Nie możesz wybrać więcej, niż 25 tematów Tematy muszą się zaczynać od litery lub cyfry, mogą zawierać myślniki ('-') i mogą mieć do 35 znaków.
 
 

415 wiersze
18 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 Card from "components/Card/Card.js";
  9. import classNames from "classnames";
  10. import Icon from "@material-ui/core/Icon";
  11. import Stepper from '@material-ui/core/Stepper';
  12. import Step from '@material-ui/core/Step';
  13. import StepLabel from '@material-ui/core/StepLabel';
  14. import StepContent from '@material-ui/core/StepContent';
  15. import Paper from '@material-ui/core/Paper';
  16. import Grid from '@material-ui/core/Grid';
  17. import TextField from '@material-ui/core/TextField';
  18. import Button from '@material-ui/core/Button';
  19. import Dialog from '@material-ui/core/Dialog';
  20. import ListItemText from '@material-ui/core/ListItemText';
  21. import ListItem from '@material-ui/core/ListItem';
  22. import List from '@material-ui/core/List';
  23. import Divider from '@material-ui/core/Divider';
  24. import AppBar from '@material-ui/core/AppBar';
  25. import Toolbar from '@material-ui/core/Toolbar';
  26. import IconButton from '@material-ui/core/IconButton';
  27. import Typography from '@material-ui/core/Typography';
  28. import CloseIcon from '@material-ui/icons/Close';
  29. import Slide from '@material-ui/core/Slide';
  30. import Radio from '@material-ui/core/Radio';
  31. import RadioGroup from '@material-ui/core/RadioGroup';
  32. import FormControlLabel from '@material-ui/core/FormControlLabel';
  33. import FormControl from '@material-ui/core/FormControl';
  34. import FormLabel from '@material-ui/core/FormLabel';
  35. import value from '@material-ui/core/FormLabel';
  36. const useStyles = makeStyles((theme) => ({
  37. root: {
  38. width: '100%',
  39. },
  40. button: {
  41. marginTop: theme.spacing(1),
  42. marginRight: theme.spacing(1),
  43. },
  44. actionsContainer: {
  45. marginBottom: theme.spacing(2),
  46. },
  47. resetContainer: {
  48. padding: theme.spacing(3),
  49. },
  50. appBar: {
  51. position: 'relative',
  52. },
  53. title: {
  54. marginLeft: theme.spacing(2),
  55. flex: 1,
  56. },
  57. root: {
  58. '&:hover': {
  59. backgroundColor: 'transparent',
  60. },
  61. },
  62. icon: {
  63. borderRadius: '50%',
  64. width: 16,
  65. height: 16,
  66. boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)',
  67. backgroundColor: '#f5f8fa',
  68. backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))',
  69. '$root.Mui-focusVisible &': {
  70. outline: '2px auto rgba(19,124,189,.6)',
  71. outlineOffset: 2,
  72. },
  73. 'input:hover ~ &': {
  74. backgroundColor: '#ebf1f5',
  75. },
  76. 'input:disabled ~ &': {
  77. boxShadow: 'none',
  78. background: 'rgba(206,217,224,.5)',
  79. },
  80. },
  81. checkedIcon: {
  82. backgroundColor: '#137cbd',
  83. backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
  84. '&:before': {
  85. display: 'block',
  86. width: 16,
  87. height: 16,
  88. backgroundImage: 'radial-gradient(#fff,#fff 28%,transparent 32%)',
  89. content: '""',
  90. },
  91. 'input:hover ~ &': {
  92. backgroundColor: '#106ba3',
  93. },
  94. },
  95. }));
  96. function getSteps() {
  97. return ['Alamat Pengiriman', 'Pesanan Produk', 'Metode Pembayaran'];
  98. }
  99. function StyledRadio(props) {
  100. const classes = useStyles();
  101. return (
  102. <Radio
  103. className={classes.root}
  104. disableRipple
  105. color="default"
  106. checkedIcon={<span className={clsx(classes.icon, classes.checkedIcon)} />}
  107. icon={<span className={classes.icon} />}
  108. {...props}
  109. />
  110. );
  111. }
  112. const Transition = React.forwardRef(function Transition(props, ref) {
  113. return <Slide direction="up" ref={ref} {...props} />;
  114. });
  115. const DataCheckout = function ({ backend, checkoutproduct, ...props }) {
  116. const classes = useStyles();
  117. const [activeStep, setActiveStep] = React.useState(0);
  118. const steps = getSteps();
  119. const handleNext = () => {
  120. setActiveStep((prevActiveStep) => prevActiveStep + 1);
  121. };
  122. const handleBack = () => {
  123. setActiveStep((prevActiveStep) => prevActiveStep - 1);
  124. };
  125. const handleReset = () => {
  126. setActiveStep(0);
  127. };
  128. const [open, setOpen] = React.useState(false);
  129. const handleClickOpen = () => {
  130. setOpen(true);
  131. };
  132. const handleClose = () => {
  133. setOpen(false);
  134. };
  135. const { ...rest } = props;
  136. const imageClasses = classNames(
  137. classes.imgRaised,
  138. classes.imgRoundedCircle,
  139. classes.imgFluid
  140. );
  141. const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
  142. const CartAlamat = checkoutproduct.map((data) => {
  143. return (
  144. <div align="center">
  145. <img src={image1} style={{width:"1100px"}}/><br></br>
  146. <h4>Alamat Pengiriman</h4>
  147. <hr></hr>
  148. <h5>Yusmar</h5>
  149. <h5>087797315685</h5>
  150. <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>
  151. <Button1 color="info" href={"/yamaha/cart/checkout?s="+data.id}>
  152. <Icon className={classes.icons}>cached</Icon>
  153. Ubah Alamat
  154. </Button1>
  155. </div>
  156. );
  157. })
  158. const CartProdukPesanan = checkoutproduct.map((data) => {
  159. return (
  160. <div align="center">
  161. <GridContainer>
  162. <Grid item xs>
  163. <div align="center">
  164. <h4>Produk Dipesan</h4>
  165. <img className={navImageClasses} width="200px" alt="First slide" src={`${backend}${data.img[0]["url"]}`} />
  166. </div>
  167. </Grid>
  168. <Grid item xs>
  169. <div align="center">
  170. <h4></h4><br></br><br></br><br></br><br></br>
  171. <h5>{data.name}</h5>
  172. </div>
  173. </Grid>
  174. <Grid item xs>
  175. <div align="center">
  176. <h4>Harga Satuan</h4><br></br><br></br><br></br>
  177. <h5>Rp.{data.price}</h5>
  178. </div>
  179. </Grid>
  180. <Grid item xs>
  181. <div align="center">
  182. <h4>Jumlah Unit</h4><br></br><br></br><br></br>
  183. <h5>1 Unit</h5>
  184. </div>
  185. </Grid>
  186. <Grid item xs>
  187. <div align="center">
  188. <h4>Sub Total Produk</h4><br></br><br></br><br></br>
  189. <h5>Total Rp.{data.price}</h5>
  190. </div>
  191. </Grid>
  192. </GridContainer>
  193. <GridContainer style={{padding:"20px"}}>
  194. <Grid item xs style={{padding:"20px"}}>
  195. <TextField
  196. id="outlined-full-width"
  197. label="Pesan"
  198. style={{ margin: 8 }}
  199. placeholder="( Opsional ) Tinggalkan Pesan Kepada Dealer"
  200. fullWidth
  201. margin="normal"
  202. InputLabelProps={{
  203. shrink: true,
  204. }}
  205. variant="outlined"
  206. />
  207. </Grid>
  208. <Grid item xs style={{padding:"20px"}}><br></br>
  209. <Button variant="outlined" color="primary" onClick={handleClickOpen}>
  210. Pilih Opsi Pengiriman
  211. </Button>
  212. <Dialog fullScreen open={open} onClose={handleClose} TransitionComponent={Transition}>
  213. <AppBar className={classes.appBar}>
  214. <Toolbar>
  215. <IconButton edge="start" color="inherit" onClick={handleClose} aria-label="close">
  216. <CloseIcon />
  217. </IconButton>
  218. <Typography variant="h6" className={classes.title}>
  219. Pilih Opsi Pengiriman
  220. </Typography>
  221. <Button autoFocus color="inherit" onClick={handleClose}>
  222. Pilih
  223. </Button>
  224. </Toolbar>
  225. </AppBar>
  226. <List>
  227. <ListItem button>
  228. <ListItemText primary="Reguler" secondary="Akan diterima pada tanggal 2 Apr - 6 Apr" />
  229. </ListItem>
  230. <Divider />
  231. <ListItem button>
  232. <ListItemText primary="Kargo" secondary="Akan diterima pada tanggal 30 Mar - 2 Apr" />
  233. </ListItem>
  234. <ListItem button>
  235. <ListItemText primary="Hemat" secondary="Akan diterima pada tanggal 1 Apr - 4 Apr, COD (Bayar di Tempat) tidak didukung" />
  236. </ListItem>
  237. </List>
  238. </Dialog>
  239. </Grid>
  240. <Grid item xs align="right" style={{padding:"20px"}}><br></br>
  241. Total Rp. {data.price}
  242. </Grid>
  243. </GridContainer>
  244. </div>
  245. );
  246. })
  247. const CartMetodePembayaran = checkoutproduct.map((data) => {
  248. return (
  249. <div>
  250. <div align="center">
  251. <Typography variant="h6" className={classes.title}>
  252. Pilih Metode Pembayaran
  253. </Typography><br></br>
  254. <FormControl component="fieldset">
  255. <RadioGroup defaultValue="female" aria-label="gender">
  256. <GridContainer justify="center" style={{marginTop:"-50px"}}>
  257. <Grid style={{padding:"25px"}}>
  258. <Card style={{width: "200px"}}>
  259. <div align="center">
  260. <FormControlLabel value="1" style={{marginLeft:"20px"}} control={<StyledRadio />} /><br></br>
  261. <img src="https://1.bp.blogspot.com/-ghcXZfSaQBI/X6I02Zg-NfI/AAAAAAAAHaY/OxF9Klx83zQGKNETJ9qEnZCCmjsJ1DifQCLcBGAsYHQ/s1000/logo%2Bbank%2Bbca-01.png" width="100px"/>
  262. <h4>Bank BCA</h4>
  263. </div>
  264. </Card>
  265. </Grid>
  266. <Grid style={{padding:"25px"}}>
  267. <Card style={{width: "200px"}}>
  268. <div align="center">
  269. <FormControlLabel value="2" style={{marginLeft:"20px"}} control={<StyledRadio />} /><br></br>
  270. <img src="https://cdn.ayobandung.com/images-bandung/post/articles/2020/02/03/78361/logo-bri-bank-rakyat-indonesia-png-terbaru.png" width="120px"/>
  271. <h4>Bank BRI</h4>
  272. </div>
  273. </Card>
  274. </Grid>
  275. <Grid style={{padding:"25px"}}>
  276. <Card style={{width: "200px"}}>
  277. <div align="center">
  278. <FormControlLabel value="3" style={{marginLeft:"20px"}} control={<StyledRadio />} /><br></br>
  279. <img src="https://cdn3.iconfinder.com/data/icons/banks-in-indonesia-logo-badge/100/Mandiri-512.png" width="140px"/>
  280. <h4>Bank Mandiri</h4>
  281. </div>
  282. </Card>
  283. </Grid>
  284. <Grid style={{padding:"25px"}}>
  285. <Card style={{width: "200px"}}>
  286. <div align="center">
  287. <FormControlLabel value="4" style={{marginLeft:"20px"}} control={<StyledRadio />} /><br></br>
  288. <img src="https://cdn3.iconfinder.com/data/icons/banks-in-indonesia-logo-badge/100/BNI-512.png" width="140px"/>
  289. <h4>Bank BNI</h4>
  290. </div>
  291. </Card>
  292. </Grid>
  293. </GridContainer>
  294. <GridContainer justify="center" style={{marginTop:"-50px"}}>
  295. <Grid style={{padding:"25px"}}>
  296. <Card style={{width: "200px"}}>
  297. <div align="center">
  298. <FormControlLabel value="5" style={{marginLeft:"20px"}} control={<StyledRadio />} /><br></br>
  299. <img src="https://statik.tempo.co/?id=997833&width=650" width="140px"/>
  300. <h4>Bank BSI</h4>
  301. </div>
  302. </Card>
  303. </Grid>
  304. <Grid style={{padding:"25px"}}>
  305. <Card style={{width: "200px"}}>
  306. <div align="center">
  307. <FormControlLabel value="6" style={{marginLeft:"20px"}} control={<StyledRadio />} /><br></br>
  308. <img src="https://internationalinvestorclub.com/wp-content/uploads/2020/10/BNLI-Bank-Permata.jpg" width="150px"/>
  309. <h4>Bank Permata</h4>
  310. </div>
  311. </Card>
  312. </Grid>
  313. <Grid style={{padding:"25px"}}>
  314. <Card style={{width: "200px"}}>
  315. <div align="center">
  316. <FormControlLabel value="7" style={{marginLeft:"20px"}} control={<StyledRadio />} /><br></br>
  317. <img src="https://cdn.ayobandung.com/images-bandung/post/articles/2018/11/10/40370/images.png" width="135px"/>
  318. <h4>Bank Danamon</h4>
  319. </div>
  320. </Card>
  321. </Grid>
  322. <Grid style={{padding:"25px"}}>
  323. <Card style={{width: "200px"}}>
  324. <div align="center">
  325. <FormControlLabel value="8" style={{marginLeft:"20px"}} control={<StyledRadio />} /><br></br>
  326. <img src="https://seekvectorlogo.com/wp-content/uploads/2020/04/maybank-vector-logo.png" width="145px"/>
  327. <h4>Bank Maybank</h4>
  328. </div>
  329. </Card>
  330. </Grid>
  331. </GridContainer>
  332. </RadioGroup>
  333. </FormControl>
  334. </div>
  335. </div>
  336. );
  337. })
  338. return (
  339. <div style={{padding:"50px"}}>
  340. <div align="center" className={classes.section} id="notifications">
  341. <SnackbarContent
  342. message={
  343. <h2><b>Checkout</b></h2>
  344. }
  345. align="center"
  346. color="danger"
  347. />
  348. </div>
  349. <Stepper activeStep={activeStep} orientation="vertical">
  350. {steps.map((label, index) => (
  351. <Step key={label}>
  352. <StepLabel>{label}</StepLabel>
  353. <StepContent>
  354. <Typography>{CartMetodePembayaran}</Typography>
  355. <div className={classes.actionsContainer}>
  356. <div>
  357. <Button
  358. disabled={activeStep === 0}
  359. onClick={handleBack}
  360. className={classes.button}
  361. >
  362. Back
  363. </Button>
  364. <Button
  365. variant="contained"
  366. color="primary"
  367. onClick={handleNext}
  368. className={classes.button}
  369. >
  370. {activeStep === steps.length - 1 ? 'Buat Pesanan' : 'Next'}
  371. </Button>
  372. </div>
  373. </div>
  374. </StepContent>
  375. </Step>
  376. ))}
  377. </Stepper>
  378. {activeStep === steps.length && (
  379. <Paper square elevation={0} className={classes.resetContainer}>
  380. <Typography>Semua Langkah Sudah Selesai !!!</Typography>
  381. <Button1 color="info" href={"/yamaha/cart/checkout?s="+data.id}>
  382. <Icon className={classes.icons}>shopping_cart</Icon>
  383. Checkout
  384. </Button1>
  385. <Button1 onClick={handleReset} color="info">
  386. <Icon className={classes.icons}>restore</Icon>
  387. Reset
  388. </Button1>
  389. </Paper>
  390. )}
  391. </div>
  392. );
  393. }
  394. export default DataCheckout;