tbg-ecomm-nextjs/pages-sections/hino/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 Carousel from "react-slick";
import GridItem from "components/Grid/GridItem.js";
import classNames from "classnames";
import swal from 'sweetalert';

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 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";
import FormControl from '@material-ui/core/FormControl';
import { Form, FormGroup } from "rsuite";

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

const Transition = React.forwardRef(function Transition(props, ref) {
    return <Slide direction="up" ref={ref} {...props} />;
});

const DataCheckout = function ({ checkoutprofile, backend, checkoutproduct, ...props }) {
    const settings = {
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: true,
        time: 5
    };
    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 [formValue, setFormValue] = React.useState({
        order_id: "Trx-Ord-Suzuki",
        cust_name: "Yusmar",
        cust_telp: "087797315685",
        cust_address: "Thamrin Indrapura Jl.Aipda Karel Satsuit Tubun,17 Ilir, Kec.Ilir Tim.I, Palembang, KOTA PALEMBANG - ILIR TIMUR II, SUMATERA SELATAN, ID 30114",
        product_img: null,
        product_name: "NMAX 155",
        product_color: "Red",
        product_quantity: "1",
        product_price: "28545000",
        product_courier: "JNE",
        note: "Tes",
	});

    function GenerateID(){
        var dt = new Date().getTime();
        var uuid = 'Trx-Ord-yyyyyyyy'.replace(/[y]/g, function(c) {
            var r = (dt + Math.random()*16)%16 | 0;
            dt = Math.floor(dt/16);
            return (c=='x' ? r :(r&0x3|0x8)).toString(16);
        });
        return uuid;
    }
    
    console.log("ID",GenerateID());
    
    const CheckoutAlamat = checkoutprofile.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>
                        <GridContainer>
                            <GridItem className={classes.marginAuto}>
                                <Carousel>
                                    <img src={image1} style={{width:"1100px"}}/><br></br>
                                </Carousel>
                            </GridItem>
                        </GridContainer>
                        <FormGroup>
                            <FormControl name="cust_name" value={data.username} type="text"/>
                        </FormGroup>
                        <h5>{data.username}</h5>
                        <FormGroup>
                            <FormControl name="cust_telp" value={data.telp} type="text"/>
                        </FormGroup>
                        <h5>{data.telp}</h5>
                        <FormGroup>
                            <FormControl name="cust_address" value={data.address} type="text"/>
                        </FormGroup>
                        <h5>{data.address}</h5>
                        <Button1 color="info" href={"/yamaha/profile/edit-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 handleChanges = (event) => {
            setPengiriman(event.target.value);
        };
        const [age, setAge] = React.useState('');
        const [pengiriman, setPengiriman] = 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>
                                <FormGroup>
                                    <FormControl name="product_img" value={`${backend}${data.img[0]["url"]}`} type="text"/>
                                </FormGroup>
                                <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>
                                        <FormGroup>
                                            <FormControl name="product_name" value={data.name} type="text"/>
                                        </FormGroup>
                                    <h5>{data.name}</h5>
                                </div>
                            </Grid>
                            <Grid item xs>
                                <div align="center">
                                    <h4>Warna</h4><br></br><br></br><br></br>
                                    <FormGroup>
                                        <FormControl className={classes.formControl}>
                                            <Select
                                                labelId="demo-simple-select-label"
                                                id="demo-simple-select"
                                                value={age}
                                                name="product_color"
                                                onChange={handleChange}
                                            >
                                                <MenuItem value={10}>Hitam</MenuItem>
                                                <MenuItem value={20}>Merah</MenuItem>
                                                <MenuItem value={30}>Biru</MenuItem>
                                                <MenuItem value={30}>Putih</MenuItem>
                                            </Select>
                                        </FormControl>
                                    </FormGroup>
                                </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>
                                    <FormGroup>
                                        <FormControl className={classes.formControl}>
                                            <TextField
                                                id="outlined-number"
                                                type="number"
                                                align="center"
                                                name="quantity"
                                                InputLabelProps={{
                                                    shrink: false,
                                                }}
                                            />
                                        </FormControl>
                                    </FormGroup>
                                </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
                                        id="POS"
                                        onChange={handleChanges}
                                    >
                                        <ListItemText primary="POS" secondary="Akan diterima pada tanggal 2 Apr - 6 Apr" />
                                    </ListItem>
                                    <Divider />
                                    <ListItem button
                                        id="JNE"
                                        onChange={handleChanges}
                                    >
                                        <ListItemText primary="JNE" secondary="Akan diterima pada tanggal 30 Mar - 2 Apr" />
                                    </ListItem>
                                    <ListItem button
                                        id="TIKI"
                                        onChange={handleChanges}
                                    >
                                        <ListItemText primary="TIKI" 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>
                                <h5>Total Rp. {data.price}</h5>
                                <FormGroup>
                                    <FormControl name="product_price" value={data.price} type="text"/>
                                </FormGroup>
                            </Grid>
                        </GridContainer>
                        </div>
                    </CardBody>
                </Card>
            </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>
            <Form 
                onChange={(value) => {
                    console.log("tes",value);
                    setFormValue(value);
                }}
            >
                <div>
                    {CheckoutAlamat}
                </div>
                <div>
                    {CheckoutProdukPesanan}
                </div>
                
                <div>
                    <GridContainer>
                        <Grid item xs={6} style={{padding:"20px"}}>
                            <Button1 color="info" style={{width:"100%"}}
                                onClick={async function (e) {
                                    // setFormValue({
                                    //     cust_name : data.username,
                                    //     ... formValue
                                    // });
                                    const response = await fetch(
                                        "/api/transaction/createHino",
                                        {
                                            method: "POST",
                                            headers: {
                                                'Content-Type': 'application/json'
                                            },
                                            body: JSON.stringify({formValue}),
                                        }
                                    );
                                    if (response.ok) {
                                        var res = await response.json();
                                        if (res["STATUS"] === 1) {
                                            res["DATA"]["transactionHonda"];
                                            swal("Produk Berhasil Ditambah ke Keranjang", "Silahkan Cek Keranjang Belanja Anda", "success");
                                        } 
                                        else {
                                            swal("Produk Gagal Ditambah ke Keranjang", "Silahkan Coba Lagi", "error");
                                        }
                                    } else {
                                        swal("Transaksi Gagal", "Silahkan Coba Lagi", "error");
                                    }
                                }}
                            > 
                                <Icon className={classes.icons}>attach_money</Icon>
                                Buat Pesanan
                            </Button1>
                        </Grid>
                        <Grid item xs={6} style={{padding:"20px"}}>
                            <Button1 color="danger" style={{width:"100%"}}
                                // swal({
                                //     title: "Anda Ingin Menghapus Pesanan ?",
                                //     icon: "warning",
                                //     buttons: true,
                                //     dangerMode: true,
                                //     })
                                //     .then((willDelete) => {
                                //     if (willDelete) {
                                //         swal("Pesanan Anda Berhasil Dihapus", {
                                //         icon: "success",
                                //         });
                                //     } else {
                                //         swal("Selamat Belanja Kembali");
                                //     }
                                // });
                            >
                                <Icon className={classes.icons}>attach_money</Icon>
                                Batalkan Pesanan
                            </Button1>
                        </Grid>
                    </GridContainer>
                    {/* <GridContainer>
                        <Grid item xs={6} style={{padding:"20px"}}>
                            <Button1 color="info" onClick={(e)=>{snap.pay(transactionToken);}} style={{width:"100%"}}>
                                <Icon className={classes.icons}>attach_money</Icon>
                                Bayar Pesanan
                            </Button1>
                        </Grid>
                    </GridContainer> */}
                </div>
            </Form>
        </div>
    );
}

export default DataCheckout;