您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符
 
 

370 行
16 KiB

  1. import React from 'react';
  2. import { makeStyles } from '@material-ui/core/styles';
  3. import clsx from 'clsx';
  4. import SnackbarContent from "components/Snackbar/SnackbarContent.js";
  5. import Button1 from "components/CustomButtons/Button.js";
  6. import image1 from "../../../assets/img/mail.png"
  7. import GridContainer from "components/Grid/GridContainer.js";
  8. import classNames from "classnames";
  9. import swal from 'sweetalert';
  10. import Icon from "@material-ui/core/Icon";
  11. import Grid from '@material-ui/core/Grid';
  12. import TextField from '@material-ui/core/TextField';
  13. import Button from '@material-ui/core/Button';
  14. import Dialog from '@material-ui/core/Dialog';
  15. import ListItemText from '@material-ui/core/ListItemText';
  16. import ListItem from '@material-ui/core/ListItem';
  17. import List from '@material-ui/core/List';
  18. import Divider from '@material-ui/core/Divider';
  19. import AppBar from '@material-ui/core/AppBar';
  20. import Toolbar from '@material-ui/core/Toolbar';
  21. import IconButton from '@material-ui/core/IconButton';
  22. import Typography from '@material-ui/core/Typography';
  23. import CloseIcon from '@material-ui/icons/Close';
  24. import Slide from '@material-ui/core/Slide';
  25. import FormControl from '@material-ui/core/FormControl';
  26. import Select from '@material-ui/core/Select';
  27. import MenuItem from '@material-ui/core/MenuItem';
  28. import Card from "components/Card/Card.js";
  29. import CardBody from "components/Card/CardBody.js";
  30. const useStyles = makeStyles((theme) => ({
  31. root: {
  32. width: '100%',
  33. },
  34. button: {
  35. marginTop: theme.spacing(1),
  36. marginRight: theme.spacing(1),
  37. },
  38. actionsContainer: {
  39. marginBottom: theme.spacing(2),
  40. },
  41. resetContainer: {
  42. padding: theme.spacing(3),
  43. },
  44. appBar: {
  45. position: 'relative',
  46. },
  47. title: {
  48. marginLeft: theme.spacing(2),
  49. flex: 1,
  50. },
  51. root: {
  52. '&:hover': {
  53. backgroundColor: 'transparent',
  54. },
  55. },
  56. icon: {
  57. borderRadius: '50%',
  58. width: 16,
  59. height: 16,
  60. boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)',
  61. backgroundColor: '#f5f8fa',
  62. backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))',
  63. '$root.Mui-focusVisible &': {
  64. outline: '2px auto rgba(19,124,189,.6)',
  65. outlineOffset: 2,
  66. },
  67. 'input:hover ~ &': {
  68. backgroundColor: '#ebf1f5',
  69. },
  70. 'input:disabled ~ &': {
  71. boxShadow: 'none',
  72. background: 'rgba(206,217,224,.5)',
  73. },
  74. },
  75. checkedIcon: {
  76. backgroundColor: '#137cbd',
  77. backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
  78. '&:before': {
  79. display: 'block',
  80. width: 16,
  81. height: 16,
  82. backgroundImage: 'radial-gradient(#fff,#fff 28%,transparent 32%)',
  83. content: '""',
  84. },
  85. 'input:hover ~ &': {
  86. backgroundColor: '#106ba3',
  87. },
  88. },
  89. }));
  90. const Transition = React.forwardRef(function Transition(props, ref) {
  91. return <Slide direction="up" ref={ref} {...props} />;
  92. });
  93. const DataCheckout = function ({ province, cities, midtransClient, backend, checkoutproduct, transactionToken, ...props }) {
  94. console.log('Token :',transactionToken);
  95. const classes = useStyles();
  96. const [open, setOpen] = React.useState(false);
  97. const handleClickOpen = () => {
  98. setOpen(true);
  99. };
  100. const handleClose = () => {
  101. setOpen(false);
  102. };
  103. const { ...rest } = props;
  104. const imageClasses = classNames(
  105. classes.imgRaised,
  106. classes.imgRoundedCircle,
  107. classes.imgFluid
  108. );
  109. const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
  110. const CheckoutAlamat = checkoutproduct.map((data) => {
  111. return (
  112. <div align="center">
  113. <Card className={classes.textCenter} align="center">
  114. <CardBody>
  115. <div style={{padding:"10px"}}>
  116. <Typography variant="h6" align="left" className={classes.title}>
  117. Alamat Pengiriman
  118. </Typography><br></br>
  119. <img src={image1} style={{width:"1100px"}}/><br></br>
  120. <h5>Yusmar</h5>
  121. <h5>087797315685</h5>
  122. <h5>Thamrin Indrapura Jl.Aipda Karel Satsuit Tubun,17 Ilir, Kec.Ilir Tim.I, Palembang, KOTA PALEMBANG - ILIR TIMUR II, SUMATERA SELATAN, ID 30114</h5>
  123. <Button1 color="info" href={"/yamaha/profile/edit-profile"}>
  124. <Icon className={classes.icons}>cached</Icon>
  125. Ubah Alamat
  126. </Button1>
  127. </div>
  128. </CardBody>
  129. </Card>
  130. </div>
  131. );
  132. })
  133. const CheckoutProdukPesanan = checkoutproduct.map((data) => {
  134. const handleChange = (event) => {
  135. setAge(event.target.value);
  136. };
  137. const handleChanges = (event) => {
  138. setPengiriman(event.target.value);
  139. };
  140. const [age, setAge] = React.useState('');
  141. const [pengiriman, setPengiriman] = React.useState('');
  142. return (
  143. <div align="center">
  144. <Card className={classes.textCenter} align="center">
  145. <CardBody>
  146. <div style={{padding:"10px"}}>
  147. <Typography variant="h6" align="left" className={classes.title}>
  148. Pesanan Produk
  149. </Typography><br></br><hr></hr>
  150. <GridContainer>
  151. <Grid item xs>
  152. <div align="center">
  153. <h4>Produk Dipesan</h4>
  154. <img className={navImageClasses} width="200px" alt="First slide" src={`${backend}${data.img[0]["url"]}`} />
  155. </div>
  156. </Grid>
  157. <Grid item xs>
  158. <div align="center">
  159. <h4></h4><br></br><br></br><br></br><br></br>
  160. <h5>{data.name}</h5>
  161. </div>
  162. </Grid>
  163. <Grid item xs>
  164. <div align="center">
  165. <h4>Warna</h4><br></br><br></br><br></br>
  166. <FormControl className={classes.formControl}>
  167. <Select
  168. labelId="demo-simple-select-label"
  169. id="demo-simple-select"
  170. value={age}
  171. onChange={handleChange}
  172. >
  173. <MenuItem value={10}>Hitam</MenuItem>
  174. <MenuItem value={20}>Merah</MenuItem>
  175. <MenuItem value={30}>Biru</MenuItem>
  176. <MenuItem value={30}>Putih</MenuItem>
  177. </Select>
  178. </FormControl>
  179. </div>
  180. </Grid>
  181. <Grid item xs>
  182. <div align="center">
  183. <h4>Harga Satuan</h4><br></br><br></br><br></br>
  184. <h5>Rp.{data.price}</h5>
  185. </div>
  186. </Grid>
  187. <Grid item xs>
  188. <div align="center">
  189. <h4>Jumlah Unit</h4><br></br><br></br><br></br>
  190. <FormControl className={classes.formControl}>
  191. <TextField
  192. id="outlined-number"
  193. type="number"
  194. align="center"
  195. InputLabelProps={{
  196. shrink: true,
  197. }}
  198. />
  199. </FormControl>
  200. </div>
  201. </Grid>
  202. <Grid item xs>
  203. <div align="center">
  204. <h4>Sub Total Produk</h4><br></br><br></br><br></br>
  205. <h5>Total Rp.{data.price}</h5>
  206. </div>
  207. </Grid>
  208. </GridContainer>
  209. <GridContainer style={{padding:"20px"}}>
  210. <Grid item xs style={{padding:"20px"}}>
  211. <TextField
  212. id="outlined-full-width"
  213. label="Pesan"
  214. style={{ margin: 8 }}
  215. placeholder="( Opsional ) Tinggalkan Pesan Kepada Dealer"
  216. fullWidth
  217. margin="normal"
  218. InputLabelProps={{
  219. shrink: true,
  220. }}
  221. variant="outlined"
  222. />
  223. </Grid>
  224. <Grid item xs style={{padding:"20px"}}><br></br>
  225. <Button variant="outlined" color="primary" onClick={handleClickOpen}>
  226. Pilih Opsi Pengiriman
  227. </Button>
  228. <Dialog fullScreen open={open} onClose={handleClose} TransitionComponent={Transition}>
  229. <AppBar className={classes.appBar}>
  230. <Toolbar>
  231. <IconButton edge="start" color="inherit" onClick={handleClose} aria-label="close">
  232. <CloseIcon />
  233. </IconButton>
  234. <Typography variant="h6" className={classes.title}>
  235. Pilih Opsi Pengiriman
  236. </Typography>
  237. <Button autoFocus color="inherit" onClick={handleClose}>
  238. Pilih
  239. </Button>
  240. </Toolbar>
  241. </AppBar>
  242. <List>
  243. <ListItem button
  244. id="POS"
  245. value={pengiriman}
  246. onChange={handleChanges}
  247. >
  248. <ListItemText primary="POS" secondary="Akan diterima pada tanggal 2 Apr - 6 Apr" />
  249. </ListItem>
  250. <Divider />
  251. <ListItem button
  252. id="JNE"
  253. value={pengiriman}
  254. onChange={handleChanges}
  255. >
  256. <ListItemText primary="JNE" secondary="Akan diterima pada tanggal 30 Mar - 2 Apr" />
  257. </ListItem>
  258. <ListItem button
  259. id="TIKI"
  260. value={pengiriman}
  261. onChange={handleChanges}
  262. >
  263. <ListItemText primary="TIKI" secondary="Akan diterima pada tanggal 1 Apr - 4 Apr, COD (Bayar di Tempat) tidak didukung" />
  264. </ListItem>
  265. </List>
  266. </Dialog>
  267. </Grid>
  268. <Grid item xs align="right"><br></br>
  269. <h5>Total Rp. {data.price}</h5>
  270. </Grid>
  271. </GridContainer>
  272. </div>
  273. </CardBody>
  274. </Card>
  275. </div>
  276. );
  277. })
  278. return (
  279. <div style={{padding:"50px"}}>
  280. <script type="text/javascript" src="https://app.sandbox.midtrans.com/snap/snap.js" data-client-key="SB-Mid-client-srx674LjNbEybd4-"/>
  281. <div align="center" className={classes.section} id="notifications">
  282. <SnackbarContent
  283. message={
  284. <h2><b>Checkout</b></h2>
  285. }
  286. align="center"
  287. color="danger"
  288. />
  289. </div>
  290. <div>
  291. {CheckoutAlamat}
  292. </div>
  293. <div>
  294. {CheckoutProdukPesanan}
  295. </div>
  296. <div>
  297. <GridContainer>
  298. <Grid item xs={6} style={{padding:"20px"}}>
  299. <Button1 color="info" style={{width:"100%"}}
  300. onClick={async function (e) {
  301. // setFormValue({
  302. // cust_name : data.username,
  303. // ... formValue
  304. // });
  305. const response = await fetch(
  306. "/api/transaction/createSuzuki",
  307. {
  308. method: "POST",
  309. headers: {
  310. 'Content-Type': 'application/json'
  311. },
  312. body: JSON.stringify({formValue}),
  313. }
  314. );
  315. if (response.ok) {
  316. var res = await response.json();
  317. if (res["STATUS"] === 1) {
  318. res["DATA"]["transaction"];
  319. swal("Produk Berhasil Ditambah ke Keranjang", "Silahkan Cek Keranjang Belanja Anda", "success");
  320. }
  321. else {
  322. swal("Produk Gagal Ditambah ke Keranjang", "Silahkan Coba Lagi", "error");
  323. }
  324. } else {
  325. swal("Transaksi Gagal", "Silahkan Coba Lagi", "error");
  326. }
  327. }}
  328. >
  329. <Icon className={classes.icons}>attach_money</Icon>
  330. Buat Pesanan
  331. </Button1>
  332. </Grid>
  333. <Grid item xs={6} style={{padding:"20px"}}>
  334. <Button1 color="danger" style={{width:"100%"}}
  335. // swal({
  336. // title: "Anda Ingin Menghapus Pesanan ?",
  337. // icon: "warning",
  338. // buttons: true,
  339. // dangerMode: true,
  340. // })
  341. // .then((willDelete) => {
  342. // if (willDelete) {
  343. // swal("Pesanan Anda Berhasil Dihapus", {
  344. // icon: "success",
  345. // });
  346. // } else {
  347. // swal("Selamat Belanja Kembali");
  348. // }
  349. // });
  350. >
  351. <Icon className={classes.icons}>attach_money</Icon>
  352. Batalkan Pesanan
  353. </Button1>
  354. </Grid>
  355. </GridContainer>
  356. </div>
  357. </div>
  358. );
  359. }
  360. export default DataCheckout;