|
- import React from 'react';
- import { makeStyles } from '@material-ui/core/styles';
- import clsx from 'clsx';
-
- import SnackbarContent from "components/Snackbar/SnackbarContent.js";
- import Button1 from "components/CustomButtons/Button.js";
- import image1 from "../../../assets/img/mail.png"
- import GridContainer from "components/Grid/GridContainer.js";
- import Card from "components/Card/Card.js";
- import classNames from "classnames";
-
- import Icon from "@material-ui/core/Icon";
- import Stepper from '@material-ui/core/Stepper';
- import Step from '@material-ui/core/Step';
- import StepLabel from '@material-ui/core/StepLabel';
- import StepContent from '@material-ui/core/StepContent';
- import Paper from '@material-ui/core/Paper';
- import Grid from '@material-ui/core/Grid';
- import TextField from '@material-ui/core/TextField';
- import Button from '@material-ui/core/Button';
- import Dialog from '@material-ui/core/Dialog';
- import ListItemText from '@material-ui/core/ListItemText';
- import ListItem from '@material-ui/core/ListItem';
- import List from '@material-ui/core/List';
- import Divider from '@material-ui/core/Divider';
- import AppBar from '@material-ui/core/AppBar';
- import Toolbar from '@material-ui/core/Toolbar';
- import IconButton from '@material-ui/core/IconButton';
- import Typography from '@material-ui/core/Typography';
- import CloseIcon from '@material-ui/icons/Close';
- import Slide from '@material-ui/core/Slide';
- import Radio from '@material-ui/core/Radio';
- import RadioGroup from '@material-ui/core/RadioGroup';
- import FormControlLabel from '@material-ui/core/FormControlLabel';
- import FormControl from '@material-ui/core/FormControl';
- import FormLabel from '@material-ui/core/FormLabel';
- import value from '@material-ui/core/FormLabel';
-
- const useStyles = makeStyles((theme) => ({
- root: {
- width: '100%',
- },
- button: {
- marginTop: theme.spacing(1),
- marginRight: theme.spacing(1),
- },
- actionsContainer: {
- marginBottom: theme.spacing(2),
- },
- resetContainer: {
- padding: theme.spacing(3),
- },
- appBar: {
- position: 'relative',
- },
- title: {
- marginLeft: theme.spacing(2),
- flex: 1,
- },
- root: {
- '&:hover': {
- backgroundColor: 'transparent',
- },
- },
- icon: {
- borderRadius: '50%',
- width: 16,
- height: 16,
- boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)',
- backgroundColor: '#f5f8fa',
- backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))',
- '$root.Mui-focusVisible &': {
- outline: '2px auto rgba(19,124,189,.6)',
- outlineOffset: 2,
- },
- 'input:hover ~ &': {
- backgroundColor: '#ebf1f5',
- },
- 'input:disabled ~ &': {
- boxShadow: 'none',
- background: 'rgba(206,217,224,.5)',
- },
- },
- checkedIcon: {
- backgroundColor: '#137cbd',
- backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
- '&:before': {
- display: 'block',
- width: 16,
- height: 16,
- backgroundImage: 'radial-gradient(#fff,#fff 28%,transparent 32%)',
- content: '""',
- },
- 'input:hover ~ &': {
- backgroundColor: '#106ba3',
- },
- },
- }));
-
- function getSteps() {
- return ['Alamat Pengiriman', 'Pesanan Produk', 'Metode Pembayaran'];
- }
-
- function StyledRadio(props) {
- const classes = useStyles();
- return (
- <Radio
- className={classes.root}
- disableRipple
- color="default"
- checkedIcon={<span className={clsx(classes.icon, classes.checkedIcon)} />}
- icon={<span className={classes.icon} />}
- {...props}
- />
- );
- }
-
- const Transition = React.forwardRef(function Transition(props, ref) {
- return <Slide direction="up" ref={ref} {...props} />;
- });
-
- const DataCheckout = function ({ backend, checkoutproduct, ...props }) {
- const classes = useStyles();
- const [activeStep, setActiveStep] = React.useState(0);
- const steps = getSteps();
-
- const handleNext = () => {
- setActiveStep((prevActiveStep) => prevActiveStep + 1);
- };
-
- const handleBack = () => {
- setActiveStep((prevActiveStep) => prevActiveStep - 1);
- };
-
- const handleReset = () => {
- setActiveStep(0);
- };
-
- const [open, setOpen] = React.useState(false);
-
- const handleClickOpen = () => {
- setOpen(true);
- };
-
- const handleClose = () => {
- setOpen(false);
- };
-
- const { ...rest } = props;
- const imageClasses = classNames(
- classes.imgRaised,
- classes.imgRoundedCircle,
- classes.imgFluid
- );
- const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
-
- const CartAlamat = checkoutproduct.map((data) => {
- return (
- <div align="center">
- <img src={image1} style={{width:"1100px"}}/><br></br>
- <h4>Alamat Pengiriman</h4>
- <hr></hr>
- <h5>Yusmar</h5>
- <h5>087797315685</h5>
- <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>
-
- <Button1 color="info" href={"/yamaha/cart/checkout?s="+data.id}>
- <Icon className={classes.icons}>cached</Icon>
- Ubah Alamat
- </Button1>
- </div>
- );
- })
-
- const CartProdukPesanan = checkoutproduct.map((data) => {
- return (
- <div align="center">
- <GridContainer>
- <Grid item xs>
- <div align="center">
- <h4>Produk Dipesan</h4>
- <img className={navImageClasses} width="200px" alt="First slide" src={`${backend}${data.img[0]["url"]}`} />
- </div>
- </Grid>
- <Grid item xs>
- <div align="center">
- <h4></h4><br></br><br></br><br></br><br></br>
- <h5>{data.name}</h5>
- </div>
- </Grid>
- <Grid item xs>
- <div align="center">
- <h4>Harga Satuan</h4><br></br><br></br><br></br>
- <h5>Rp.{data.price}</h5>
- </div>
- </Grid>
- <Grid item xs>
- <div align="center">
- <h4>Jumlah Unit</h4><br></br><br></br><br></br>
- <h5>1 Unit</h5>
- </div>
- </Grid>
- <Grid item xs>
- <div align="center">
- <h4>Sub Total Produk</h4><br></br><br></br><br></br>
- <h5>Total Rp.{data.price}</h5>
- </div>
- </Grid>
- </GridContainer>
- <GridContainer style={{padding:"20px"}}>
- <Grid item xs style={{padding:"20px"}}>
- <TextField
- id="outlined-full-width"
- label="Pesan"
- style={{ margin: 8 }}
- placeholder="( Opsional ) Tinggalkan Pesan Kepada Dealer"
- fullWidth
- margin="normal"
- InputLabelProps={{
- shrink: true,
- }}
- variant="outlined"
- />
- </Grid>
- <Grid item xs style={{padding:"20px"}}><br></br>
- <Button variant="outlined" color="primary" onClick={handleClickOpen}>
- Pilih Opsi Pengiriman
- </Button>
- <Dialog fullScreen open={open} onClose={handleClose} TransitionComponent={Transition}>
- <AppBar className={classes.appBar}>
- <Toolbar>
- <IconButton edge="start" color="inherit" onClick={handleClose} aria-label="close">
- <CloseIcon />
- </IconButton>
- <Typography variant="h6" className={classes.title}>
- Pilih Opsi Pengiriman
- </Typography>
- <Button autoFocus color="inherit" onClick={handleClose}>
- Pilih
- </Button>
- </Toolbar>
- </AppBar>
- <List>
- <ListItem button>
- <ListItemText primary="Reguler" secondary="Akan diterima pada tanggal 2 Apr - 6 Apr" />
- </ListItem>
- <Divider />
- <ListItem button>
- <ListItemText primary="Kargo" secondary="Akan diterima pada tanggal 30 Mar - 2 Apr" />
- </ListItem>
- <ListItem button>
- <ListItemText primary="Hemat" secondary="Akan diterima pada tanggal 1 Apr - 4 Apr, COD (Bayar di Tempat) tidak didukung" />
- </ListItem>
- </List>
- </Dialog>
- </Grid>
- <Grid item xs align="right" style={{padding:"20px"}}><br></br>
- Total Rp. {data.price}
- </Grid>
- </GridContainer>
- </div>
- );
- })
-
- const CartMetodePembayaran = checkoutproduct.map((data) => {
- return (
- <div>
- <div align="center">
- <Typography variant="h6" className={classes.title}>
- Pilih Metode Pembayaran
- </Typography><br></br>
- <FormControl component="fieldset">
- <RadioGroup defaultValue="female" aria-label="gender">
- <GridContainer justify="center" style={{marginTop:"-50px"}}>
- <Grid style={{padding:"25px"}}>
- <Card style={{width: "200px"}}>
- <div align="center">
- <FormControlLabel value="1" style={{marginLeft:"20px"}} control={<StyledRadio />} /><br></br>
- <img src="https://1.bp.blogspot.com/-ghcXZfSaQBI/X6I02Zg-NfI/AAAAAAAAHaY/OxF9Klx83zQGKNETJ9qEnZCCmjsJ1DifQCLcBGAsYHQ/s1000/logo%2Bbank%2Bbca-01.png" width="100px"/>
- <h4>Bank BCA</h4>
- </div>
- </Card>
- </Grid>
- <Grid style={{padding:"25px"}}>
- <Card style={{width: "200px"}}>
- <div align="center">
- <FormControlLabel value="2" style={{marginLeft:"20px"}} control={<StyledRadio />} /><br></br>
- <img src="https://cdn.ayobandung.com/images-bandung/post/articles/2020/02/03/78361/logo-bri-bank-rakyat-indonesia-png-terbaru.png" width="120px"/>
- <h4>Bank BRI</h4>
- </div>
- </Card>
- </Grid>
- <Grid style={{padding:"25px"}}>
- <Card style={{width: "200px"}}>
- <div align="center">
- <FormControlLabel value="3" style={{marginLeft:"20px"}} control={<StyledRadio />} /><br></br>
- <img src="https://cdn3.iconfinder.com/data/icons/banks-in-indonesia-logo-badge/100/Mandiri-512.png" width="140px"/>
- <h4>Bank Mandiri</h4>
- </div>
- </Card>
- </Grid>
- <Grid style={{padding:"25px"}}>
- <Card style={{width: "200px"}}>
- <div align="center">
- <FormControlLabel value="4" style={{marginLeft:"20px"}} control={<StyledRadio />} /><br></br>
- <img src="https://cdn3.iconfinder.com/data/icons/banks-in-indonesia-logo-badge/100/BNI-512.png" width="140px"/>
- <h4>Bank BNI</h4>
- </div>
- </Card>
- </Grid>
- </GridContainer>
- <GridContainer justify="center" style={{marginTop:"-50px"}}>
- <Grid style={{padding:"25px"}}>
- <Card style={{width: "200px"}}>
- <div align="center">
- <FormControlLabel value="5" style={{marginLeft:"20px"}} control={<StyledRadio />} /><br></br>
- <img src="https://statik.tempo.co/?id=997833&width=650" width="140px"/>
- <h4>Bank BSI</h4>
- </div>
- </Card>
- </Grid>
- <Grid style={{padding:"25px"}}>
- <Card style={{width: "200px"}}>
- <div align="center">
- <FormControlLabel value="6" style={{marginLeft:"20px"}} control={<StyledRadio />} /><br></br>
- <img src="https://internationalinvestorclub.com/wp-content/uploads/2020/10/BNLI-Bank-Permata.jpg" width="150px"/>
- <h4>Bank Permata</h4>
- </div>
- </Card>
- </Grid>
- <Grid style={{padding:"25px"}}>
- <Card style={{width: "200px"}}>
- <div align="center">
- <FormControlLabel value="7" style={{marginLeft:"20px"}} control={<StyledRadio />} /><br></br>
- <img src="https://cdn.ayobandung.com/images-bandung/post/articles/2018/11/10/40370/images.png" width="135px"/>
- <h4>Bank Danamon</h4>
- </div>
- </Card>
- </Grid>
- <Grid style={{padding:"25px"}}>
- <Card style={{width: "200px"}}>
- <div align="center">
- <FormControlLabel value="8" style={{marginLeft:"20px"}} control={<StyledRadio />} /><br></br>
- <img src="https://seekvectorlogo.com/wp-content/uploads/2020/04/maybank-vector-logo.png" width="145px"/>
- <h4>Bank Maybank</h4>
- </div>
- </Card>
- </Grid>
- </GridContainer>
- </RadioGroup>
- </FormControl>
- </div>
- </div>
- );
- })
-
- return (
- <div style={{padding:"50px"}}>
- <div align="center" className={classes.section} id="notifications">
- <SnackbarContent
- message={
- <h2><b>Checkout</b></h2>
- }
- align="center"
- color="danger"
- />
- </div>
- <Stepper activeStep={activeStep} orientation="vertical">
- {steps.map((label, index) => (
- <Step key={label}>
- <StepLabel>{label}</StepLabel>
- <StepContent>
- <Typography>{CartMetodePembayaran}</Typography>
- <div className={classes.actionsContainer}>
- <div>
- <Button
- disabled={activeStep === 0}
- onClick={handleBack}
- className={classes.button}
- >
- Back
- </Button>
- <Button
- variant="contained"
- color="primary"
- onClick={handleNext}
- className={classes.button}
- >
- {activeStep === steps.length - 1 ? 'Buat Pesanan' : 'Next'}
- </Button>
- </div>
- </div>
- </StepContent>
- </Step>
- ))}
- </Stepper>
- {activeStep === steps.length && (
- <Paper square elevation={0} className={classes.resetContainer}>
- <Typography>Semua Langkah Sudah Selesai !!!</Typography>
- <Button1 color="info" href={"/yamaha/cart/checkout?s="+data.id}>
- <Icon className={classes.icons}>shopping_cart</Icon>
- Checkout
- </Button1>
- <Button1 onClick={handleReset} color="info">
- <Icon className={classes.icons}>restore</Icon>
- Reset
- </Button1>
- </Paper>
- )}
- </div>
- );
- }
-
- export default DataCheckout;
|