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

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 classNames from "classnames";

import Icon from "@material-ui/core/Icon";
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 Select from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';
import Card from "components/Card/Card.js";
import CardBody from "components/Card/CardBody.js";

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 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 [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 CheckoutAlamat = checkoutproduct.map((data) => {
        return (
            <div align="center">
                <Card className={classes.textCenter} align="center">
                    <CardBody>
                    <div style={{padding:"10px"}}>
                        <Typography variant="h6" align="left" className={classes.title}>
                            Alamat Pengiriman
                        </Typography><br></br>
                        <img src={image1} style={{width:"1100px"}}/><br></br>
                        <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/profile/profile"}>
                            <Icon className={classes.icons}>cached</Icon>
                            Ubah Alamat
                        </Button1>
                    </div>
                    </CardBody>
                </Card>
            </div>
        );
    })

    const CheckoutProdukPesanan = checkoutproduct.map((data) => {
        const handleChange = (event) => {
            setAge(event.target.value);
        };
        const [age, setAge] = React.useState('');
        return (
            <div align="center">
                <Card className={classes.textCenter} align="center">
                    <CardBody>
                        <div style={{padding:"10px"}}>
                        <Typography variant="h6" align="left" className={classes.title}>
                            Pesanan Produk
                        </Typography><br></br><hr></hr>
                        <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>Warna</h4><br></br><br></br><br></br>
                                    <FormControl className={classes.formControl}>
                                        <Select
                                        labelId="demo-simple-select-label"
                                        id="demo-simple-select"
                                        value={age}
                                        onChange={handleChange}
                                        >
                                        <MenuItem value={10}>Hitam</MenuItem>
                                        <MenuItem value={20}>Merah</MenuItem>
                                        <MenuItem value={30}>Biru</MenuItem>
                                        <MenuItem value={30}>Putih</MenuItem>
                                        </Select>
                                    </FormControl>
                                </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>
                                    <FormControl className={classes.formControl}>
                                        <TextField
                                            id="outlined-number"
                                            type="number"
                                            align="center"
                                            InputLabelProps={{
                                                shrink: true,
                                            }}
                                        />
                                    </FormControl>
                                </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>
                    </CardBody>
                </Card>
            </div>
        );
    })

    const CheckoutMetodePembayaran = checkoutproduct.map((data) => {
        return (
            <div>
                <div align="center">
                    <Card className={classes.textCenter} align="center">
                        <CardBody>
                        <div style={{padding:"10px"}}>
                        <Typography variant="h6" align="left" className={classes.title}>
                            Pilih Metode Pembayaran
                        </Typography><br></br><hr></hr>
                        <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>
                        </CardBody>
                    </Card>
                </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>
            <div>
                {CheckoutAlamat}
            </div>
            <div>
                {CheckoutProdukPesanan}
            </div>
            <div>
                {CheckoutMetodePembayaran}
            </div>
            <div>
                <Card className={classes.textCenter} align="center">
                    <CardBody>
                    <div style={{padding:"10px"}}>
                        <Button1 color="info" href={"/yamaha/profile/profile"} style={{width:"100%"}}>
                            <Icon className={classes.icons}>shop</Icon>
                            Buat Pesanan
                        </Button1>
                    </div>
                    </CardBody>
                </Card>
            </div>
        </div>
    );
}

export default DataCheckout;