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

import React, { Component, Fragment } from 'react';
import { withStyles, makeStyles } from '@material-ui/core/styles';
import clsx from 'clsx';
import Selects from 'react-select';

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 Typography from '@material-ui/core/Typography';
import Slide from '@material-ui/core/Slide';
import Select from '@material-ui/core/Select';
import Card from "components/Card/Card.js";
import CardBody from "components/Card/CardBody.js";
import FormControl from '@material-ui/core/FormControl';
import { Form, FormGroup, ControlLabel, SelectPicker } from "rsuite";
import InputLabel from '@material-ui/core/InputLabel';
import OutlinedInput from '@material-ui/core/OutlinedInput';

import NumberFormat from 'react-number-format';

import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';

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 StyledTableCell = withStyles((theme) => ({
        head: {
            backgroundColor: theme.palette.common.black,
            color: theme.palette.common.white,
        },
        body: {
            fontSize: 14,
        },
    }))(TableCell);

    const StyledTableRow = withStyles((theme) => ({
        root: {
            '&:nth-of-type(odd)': {
                backgroundColor: theme.palette.action.hover,
            },
        },
    }))(TableRow);

    const settings = {
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: false,
        time: 5
    };
    const classes = useStyles();
    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 (
            <Card className={classes.textCenter} align="center">
                <TableContainer>
                    <Table className={classes.table} aria-label="customized table">
                        <TableHead>
                            <TableRow>
                                <StyledTableCell align="center">Nama Customer</StyledTableCell>
                                <StyledTableCell align="center">Email Customer</StyledTableCell>
                                <StyledTableCell align="center">No.Telp Customer</StyledTableCell>
                                <StyledTableCell align="center">Alamat Customer</StyledTableCell>
                            </TableRow>
                        </TableHead>
                        <TableBody>
                            <StyledTableRow>
                                <StyledTableCell align="center"><b>{data.username}</b></StyledTableCell>
                                <StyledTableCell align="center"><b>{data.email}</b></StyledTableCell>
                                <StyledTableCell align="center"><b>{data.telp}</b></StyledTableCell>
                                <StyledTableCell align="center"><b>{data.address}</b></StyledTableCell>
                            </StyledTableRow>
                        </TableBody>
                    </Table>
                </TableContainer>
            </Card>
        );
    })

    const CheckoutProdukPesanan = checkoutproduct.map((data) => {

        const [state, setState] = React.useState({
            warna: '',
            name: 'hai',
        });
    
        const handleChange = (event) => {
            const name = event.target.name;
            setState({
                ...state,
                [name]: event.target.value,
            });
        };

        return (
            <div align="center">
                <Card className={classes.textCenter} align="center">
                    <TableContainer>
                        <Table className={classes.table} aria-label="customized table">
                            <TableHead>
                                <TableRow>
                                    <StyledTableCell align="center">Produk Dipesan</StyledTableCell>
                                    <StyledTableCell align="center">Nama Produk</StyledTableCell>
                                    <StyledTableCell align="center">Warna</StyledTableCell>
                                    <StyledTableCell align="center">Harga Per Unit</StyledTableCell>
                                    <StyledTableCell align="center">Jumlah Unit</StyledTableCell>
                                    <StyledTableCell align="center">Subtotal Harga</StyledTableCell>
                                </TableRow>
                            </TableHead>
                            <TableBody>
                                <StyledTableRow>
                                    <StyledTableCell>
                                        <img className={navImageClasses} width="200px" alt="First slide" src={`${backend}${data.img[0]["url"]}`} />
                                    </StyledTableCell>
                                    <StyledTableCell align="center"><b>{data.name}</b></StyledTableCell>
                                    <StyledTableCell align="center">
                                        <FormControl variant="outlined" className={classes.formControl}>
                                            <InputLabel htmlFor="outlined-age-native-simple">Warna</InputLabel>
                                            <Select
                                                native
                                                value={state.warna}
                                                onChange={handleChange}
                                                label="Warna"
                                                name="product_color"
                                                inputProps={{
                                                    name: 'warna',
                                                    id: 'outlined-age-native-simple',
                                                }}
                                                onInput={(e)=>{
                                                    setFormValue({
                                                        ...formValue,
                                                        product_color: e.target.value.toString()
                                                    })
                                                }}
                                            >
                                                <option aria-label="None" value="" />
                                                <option value={"Hitam"}>Hitam</option>
                                                <option value={"Putih"}>Putih</option>
                                                <option value={"Merah"}>Merah</option>
                                            </Select>
                                        </FormControl>
                                    </StyledTableCell>
                                    <StyledTableCell align="center">
                                        <h5>
                                            <b><NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></b>
                                        </h5>
                                    </StyledTableCell>
                                    <StyledTableCell align="center">
                                        <TextField
                                            id="outlined-number"
                                            label="Number"
                                            type="number"
                                            name="quantity"
                                            InputLabelProps={{
                                                shrink: true,
                                            }}
                                            onInput={(e)=>{
                                                setFormValue({
                                                    ...formValue,
                                                    product_quantity: e.target.value
                                                })
                                            }}
                                            variant="outlined"
                                        />
                                    </StyledTableCell>
                                    <StyledTableCell align="center">
                                        <h5>
                                            <b><NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></b>
                                        </h5>
                                    </StyledTableCell>
                                </StyledTableRow>
                            </TableBody>
                        </Table>
                    </TableContainer>
                    <TableContainer>
                        <Table>
                            <TableBody>
                                <TableRow>
                                    <StyledTableCell align="center">
                                        <TextField
                                            id="outlined-full-width"
                                            label="Pesan"
                                            style={{ width: "550px" }}
                                            placeholder="( Opsional ) Tinggalkan Pesan Kepada Dealer"
                                            margin="normal"
                                            variant="outlined"
                                            onInput={(e)=>{
                                                setFormValue({
                                                    ...formValue,
                                                    note: e.target.value
                                                })
                                            }}
                                        />
                                    </StyledTableCell>
                                    <StyledTableCell align="center">
                                        <FormControl variant="outlined" className={classes.formControl}>
                                            <InputLabel htmlFor="outlined-age-native-simple">Pilih Ekspedisi Pengiriman</InputLabel>
                                            <Select
                                                native
                                                style={{ width: "550px" }}
                                                value={state.age}
                                                onChange={handleChange}
                                                label="Pilih Ekspedisi Pengiriman"
                                                inputProps={{
                                                    name: 'age',
                                                    id: 'outlined-age-native-simple',
                                                }}
                                                onInput={(e)=>{
                                                    setFormValue({
                                                        ...formValue,
                                                        product_courier: e.target.value
                                                    })
                                                }}
                                            >
                                                <option aria-label="None" value="" />
                                                <option value={"JNE"}>JNE</option>
                                                <option value={"Antar Aja"}>Antar Aja</option>
                                                <option value={"TIKI"}>TIKI</option>
                                            </Select>
                                        </FormControl>
                                    </StyledTableCell>
                                </TableRow>
                            </TableBody>
                        </Table>
                    </TableContainer>
                </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.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;