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 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";
import NumberFormat from 'react-number-format';

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, province, cities, 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 { ...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: GenerateID(),
        cust_name: "",
        cust_telp: "",
        cust_address: "",
        product_img: "",
        product_name: "",
        product_color: "",
        product_quantity: "",
        product_price: "",
        product_courier: "",
        note: "",
        status : 1,
	});

    // const [formValue, setFormValue] = React.useState({
    //     order_id: "Trx-Ord-9ab8ab88",
    //     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;
    }
        
    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><b>{data.username.toUpperCase()}</b></h5>
                        <FormGroup>
                            <FormControl name="cust_telp" value={data.telp} type="text"/>
                        </FormGroup>
                        <h5 style={{marginTop:"-20px"}}><b>{data.telp}</b></h5><br/>
                        {/* <FormGroup>
                            <FormControl name="cust_telp" value={data.email} type="text"/>
                        </FormGroup> */}
                        <h5 style={{marginTop:"-20px"}}><b>{data.email.toUpperCase()}</b></h5>
                        <FormGroup>
                            <FormControl name="cust_address" value={data.address} type="text"/>
                        </FormGroup>
                        <h5 style={{marginTop:"-20px"}}><b>{data.address.toUpperCase()}</b></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) => {
            setColor(event.target.value);
        };
        const handleChanges = (event) => {
            setPengiriman(event.target.value);
        };

        const [color, setColor] = React.useState('');
        const [pengiriman, setPengiriman] = React.useState('');
        const handleClose = () => {
            setFormValue({ 
                ...formValue,
                product_courier: pengiriman,
            })
            setOpen(false);
        };
        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><b>Produk Dipesan</b></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><b>{data.name}</b></h5>
                                </div>
                            </Grid>
                            <Grid item xs>
                                <div align="center">
                                    <h4><b>Warna</b></h4><br></br><br></br><br></br>
                                    <FormGroup>
                                        <FormControl className={classes.formControl}>
                                            <Select
                                                labelId="demo-simple-select-label"
                                                id="demo-simple-select"
                                                value={color}
                                                name="product_color"
                                                onChange={(e)=>{
                                                    setFormValue({ 
                                                        ...formValue,
                                                        product_color: e.target.value.toString()
                                                    })
                                                }}
                                            >
                                                <MenuItem value={1}>Hitam</MenuItem>
                                                <MenuItem value={2}>Merah</MenuItem>
                                                <MenuItem value={3}>Biru</MenuItem>
                                                <MenuItem value={4}>Putih</MenuItem>
                                            </Select>
                                        </FormControl>
                                    </FormGroup>
                                </div>
                            </Grid>
                            <Grid item xs>
                                <div align="center">
                                    <h4><b>Harga Satuan</b></h4><br></br><br></br><br></br>
                                    <h5>
                                        <b>
                                            <NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
                                        </b>
                                    </h5>
                                </div>
                            </Grid>
                            <Grid item xs>
                                <div align="center">
                                    <h4><b>Jumlah Unit</b></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,
                                                }}
                                                onInput={(e)=>{
                                                    setFormValue({ 
                                                        ...formValue,
                                                        product_quantity: e.target.value
                                                    })
                                                }}
                                            />
                                        </FormControl>
                                    </FormGroup>
                                </div>
                            </Grid>
                            <Grid item xs>
                                <div align="center">
                                    <h4><b>Sub Total Produk</b></h4><br></br><br></br><br></br>
                                    <h5><b>Total Rp.<NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></b></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"
                                    onInput={(e)=>{
                                        setFormValue({ 
                                            ...formValue,
                                            note: e.target.value
                                        })
                                    }}
                                />
                            </Grid>
                            <Grid item xs style={{padding:"20px"}}><br></br>
                                <Button variant="outlined" color="primary" onClick={handleClickOpen}>
                                    Pilih Opsi Pengiriman
                                </Button>
                                <span>{formValue.product_courier}</span>
                                <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"
                                        selected={(pengiriman=="POS")}
                                        onClick={(e)=>{
                                            setPengiriman("POS");
                                         }}                                    
                                    >
                                        <ListItemText primary="POS" secondary="Akan diterima pada tanggal 2 Apr - 6 Apr" />
                                    </ListItem>
                                    <Divider />
                                    <ListItem button
                                        id="JNE"
                                        selected={(pengiriman=="JNE")}
                                        onClick={(e)=>{
                                            setPengiriman("JNE");
                                         }}  
                                    >
                                        <ListItemText primary="JNE" secondary="Akan diterima pada tanggal 30 Mar - 2 Apr" />
                                    </ListItem>
                                    <ListItem button
                                        id="TIKI"
                                        selected={(pengiriman=="TIKI")}
                                        onClick={(e)=>{
                                            setPengiriman("TIKI");
                                         }}  
                                    >
                                        <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><b>Total Rp.<NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></b></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="info"
                />
            </div>
            <Form 
                onSubmit={async(value) => {
                    var newformValue  = {
                        ...formValue,
                        cust_name: checkoutprofile[0].username,
                        cust_telp: checkoutprofile[0].telp.toString(),
                        cust_address: checkoutprofile[0].address,

                        // product_img: checkoutproduct[0].img,   
                        product_name: checkoutproduct[0].name,  
                        product_price: checkoutproduct[0].price,
                    }
                    setFormValue(newformValue)
                    const response = await fetch(
                        "/api/transaction/create",
                        {
                            method: "POST",
                            headers: {
                                'Content-Type': 'application/json'
                            },
                            body: JSON.stringify(newformValue),
                        }
                    );
                    if (response.ok) {
                        var res = await response.json();
                        if (res["STATUS"] === 1) {
                            res["DATA"]["transaction"];
                            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");
                    }
                }}
            >
                <div>
                    {CheckoutAlamat}
                </div>
                <div>
                    {CheckoutProdukPesanan}
                </div>
                
                <div>
                    <GridContainer>
                        <Grid item xs={6} style={{padding:"20px"}}>
                            <Button1 color="info" style={{width:"100%"}}
                                type="submit"
                                // onClick={async function (e) {
                                //     // setFormValue({
                                //     //     cust_name : data.username,
                                //     //     ... formValue
                                //     // });
                                //     
                                // }}
                            > 
                                <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;