tbg-ecomm-nextjs/pages-sections/yamaha/cart/checkout.js

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';

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';

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,
    },
}));

function getSteps() {
    return ['Alamat Pengiriman', 'Pesanan Produk', 'Metode Pembayaran'];
}

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 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>
        );
    })
    
    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>{CartProdukPesanan}</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;