tbg-ecomm-nextjs/pages-sections/yamaha/order/order.js

import React from "react";
import classNames from "classnames";

import { withStyles, makeStyles } from "@material-ui/core/styles";
import Dashboard from "@material-ui/icons/Dashboard";

import GridContainer from "components/Grid/GridContainer.js";
import Grid from '@material-ui/core/Grid';
import GridItem from "components/Grid/GridItem.js";
import NavPills from "components/NavPills/NavPills.js";
import Card from "components/Card/Card.js";
import CardBody from "components/Card/CardBody.js";
import CardHeader from "components/Card/CardHeader.js";
import Button from "components/CustomButtons/Button.js";
import Icon from "@material-ui/core/Icon";
import styles from "assets/jss/nextjs-material-kit/pages/profilePage.js";
import Image from "assets/img/sosmed/yt.jpg";
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 Logo from "assets/img/Black.png";

const useStyles = makeStyles(styles);
const DataCheckout = function ({ midtransClient, transactionToken, backend, order, unpaid, prepared, sending, finished, ...props }) {
    const classes = useStyles();

    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 navImageClasses = classNames(classes.imgRounded, classes.imgGallery);

    const SemuaOrder = order.map((data) => {
        return (
            <div className={classes.root}>
                <Card className={classes.textCenter} align="center">
                    <TableContainer>
                        <Table className={classes.table} aria-label="customized table">
                            <TableHead>
                                <TableRow>
                                    <StyledTableCell align="left">Produk Dipesan</StyledTableCell>
                                    <StyledTableCell align="center">Rincian Produk</StyledTableCell>
                                    <StyledTableCell align="center">Rincian Pemesan</StyledTableCell>
                                    <StyledTableCell align="center"></StyledTableCell>
                                    <StyledTableCell align="center">Subtotal Harga</StyledTableCell>
                                </TableRow>
                            </TableHead>
                            <TableBody>
                                <StyledTableRow>
                                    <StyledTableCell align="left">
                                        {/* <img className={navImageClasses} width="200px" alt="First slide" src={`${backend}${data.img[0]["url"]}`} /> */}
                                        <img src={Image} width="200px" />
                                    </StyledTableCell>
                                    <StyledTableCell align="center">
                                        <p><b>Nama Produk : {data.product_name}</b><br /></p>
                                        <p><b>Warna : {data.product_color}</b><br /></p>
                                        <p><b>Jumlah : {data.product_quantity} Unit</b></p>
                                    </StyledTableCell>
                                    <StyledTableCell align="center">
                                        <p><b>Nama Pemesan : {data.cust_name}</b><br /></p>
                                        <p><b>Telpon : {data.cust_telp}</b><br /></p>
                                        <p><b>Alamat : {data.cust_address}</b></p>
                                    </StyledTableCell>
                                    <StyledTableCell align="center"></StyledTableCell>
                                    <StyledTableCell align="center">
                                        <h5>
                                            <b><NumberFormat value={data.product_price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></b>
                                        </h5>
                                    </StyledTableCell>
                                </StyledTableRow>
                                <StyledTableRow>
                                    <StyledTableCell align="center"></StyledTableCell>
                                    <StyledTableCell align="center"></StyledTableCell>
                                    <StyledTableCell align="right">
                                        <Button color="danger" href={"/yamaha/product/product_detail?s="}>
                                            <Icon className={classes.icons}>shopping_cart</Icon>Beli Lagi Produk
                                        </Button>
                                    </StyledTableCell>
                                    <StyledTableCell align="center"></StyledTableCell>
                                    <StyledTableCell align="center">
                                        <Button
                                            color="info"
                                            href={"/yamaha/product/product_detail?s="}
                                        >
                                            <Icon className={classes.icons}>open_in_new</Icon>Beri Nilai Produk
                                        </Button>
                                    </StyledTableCell>
                                </StyledTableRow>
                            </TableBody>
                        </Table>
                    </TableContainer>
                </Card>
            </div>
        );
    })

    const BelumBayar = unpaid.map((data) => {
        return (
            <div className={classes.root}>
                <Card className={classes.textCenter} align="center">
                    <TableContainer>
                        <Table className={classes.table} aria-label="customized table">
                            <TableHead>
                                <TableRow>
                                    <StyledTableCell align="left">Produk Dipesan</StyledTableCell>
                                    <StyledTableCell align="center">Rincian Produk</StyledTableCell>
                                    <StyledTableCell align="center">Rincian Pemesan</StyledTableCell>
                                    <StyledTableCell align="center"></StyledTableCell>
                                    <StyledTableCell align="center">Subtotal Harga</StyledTableCell>
                                </TableRow>
                            </TableHead>
                            <TableBody>
                                <StyledTableRow>
                                    <StyledTableCell align="left">
                                        {/* <img className={navImageClasses} width="200px" alt="First slide" src={`${backend}${data.img[0]["url"]}`} /> */}
                                        <img src={Image} width="200px" />
                                    </StyledTableCell>
                                    <StyledTableCell align="center">
                                        <p><b>Nama Produk : {data.product_name}</b><br /></p>
                                        <p><b>Warna : {data.product_color}</b><br /></p>
                                        <p><b>Jumlah : {data.product_quantity} Unit</b></p>
                                    </StyledTableCell>
                                    <StyledTableCell align="center">
                                        <p><b>Nama Pemesan : {data.cust_name}</b><br /></p>
                                        <p><b>Telpon : {data.cust_telp}</b><br /></p>
                                        <p><b>Alamat : {data.cust_address}</b></p>
                                    </StyledTableCell>
                                    <StyledTableCell align="center"></StyledTableCell>
                                    <StyledTableCell align="center">
                                        <h5>
                                            <b><NumberFormat value={data.product_price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></b>
                                        </h5>
                                    </StyledTableCell>
                                </StyledTableRow>
                                <StyledTableRow>
                                    <StyledTableCell align="center"></StyledTableCell>
                                    <StyledTableCell align="center"></StyledTableCell>
                                    <StyledTableCell align="right">
                                        <Button color="info" onClick={(e) => { snap.pay(transactionToken); }} style={{ width: "100%" }}>
                                            <Icon className={classes.icons}>attach_money</Icon>Bayar Pesanan
                                        </Button>
                                    </StyledTableCell>
                                    <StyledTableCell align="center"></StyledTableCell>
                                    <StyledTableCell align="center">
                                        <Button
                                            color="danger"
                                            href={"/yamaha/product/product_detail?s="}
                                        >
                                            <Icon className={classes.icons}>open_in_new</Icon>Batalkan Pesanan
                                        </Button>
                                    </StyledTableCell>
                                </StyledTableRow>
                            </TableBody>
                        </Table>
                    </TableContainer>
                </Card>
            </div>
        );
    })

    const Dikemas = prepared.map((data) => {
        return (
            <div className={classes.root}>
                <Card style={{ padding: "10px" }}>
                    <Grid container spacing={3}>
                        <Grid item xs={6}>
                            <h4>Dealer A.Rivai | Thamrin Brothers - Yamaha</h4>
                        </Grid>
                        <Grid item xs={6}>
                            <div align="right">
                                <h4>Paket Telah Diterima | Selesai</h4>
                            </div>
                        </Grid>
                    </Grid>
                    <hr />
                    <Grid container spacing={3}>
                        <Grid item xs={4}><br />
                            <img src={Image} width="80%" />
                        </Grid>
                        <Grid item xs={4}>
                            <h3>All New NMAX 155 Connected / ABS Version</h3>
                            <h5>Variasi = Hitam</h5>
                            <h5>Jumlah = 1 Unit</h5>
                        </Grid>
                        <Grid item xs={4}>
                            <div align="left">
                                <h3>Rp.32.000.000,-</h3><br /><br /><br /><br />
                                <h3>Total Pesanan = Rp.32.000.000,-</h3>
                            </div>
                        </Grid>
                    </Grid>
                    <hr /><br />
                    <Grid container>
                        <Grid item xs={4}>
                            <h5>Nilai produk sebelum 30-10-2021</h5>
                            <h5>Nilai sekarang & dapatkan 100 Koin Loyalty!</h5>
                        </Grid>
                        <Grid item xs={2}>

                        </Grid>
                        <Grid item xs={2}>

                        </Grid>
                        <Grid item xs={2}>
                            <div align="right">
                                <Button
                                    color="danger"
                                    href={"/yamaha/product/product_detail?s="}
                                >
                                    <Icon className={classes.icons}>shopping_cart</Icon>Beli Lagi Produk
                                </Button>
                            </div>
                        </Grid>
                        <Grid item xs={2}>
                            <div align="right">
                                <Button
                                    color="info"
                                    href={"/yamaha/product/product_detail?s="}
                                >
                                    <Icon className={classes.icons}>open_in_new</Icon>Beri Nilai Produk
                                </Button>
                            </div>
                        </Grid>
                    </Grid>
                </Card>
            </div>
        );
    })

    const Dikirim = sending.map((data) => {
        return (
            <div className={classes.root}>
                <Card style={{ padding: "10px" }}>
                    <Grid container spacing={3}>
                        <Grid item xs={6}>
                            <h4>Dealer A.Rivai | Thamrin Brothers - Yamaha</h4>
                        </Grid>
                        <Grid item xs={6}>
                            <div align="right">
                                <h4>Paket Telah Diterima | Selesai</h4>
                            </div>
                        </Grid>
                    </Grid>
                    <hr />
                    <Grid container spacing={3}>
                        <Grid item xs={4}><br />
                            <img src={Image} width="80%" />
                        </Grid>
                        <Grid item xs={4}>
                            <h3>All New NMAX 155 Connected / ABS Version</h3>
                            <h5>Variasi = Hitam</h5>
                            <h5>Jumlah = 1 Unit</h5>
                        </Grid>
                        <Grid item xs={4}>
                            <div align="left">
                                <h3>Rp.32.000.000,-</h3><br /><br /><br /><br />
                                <h3>Total Pesanan = Rp.32.000.000,-</h3>
                            </div>
                        </Grid>
                    </Grid>
                    <hr /><br />
                    <Grid container>
                        <Grid item xs={4}>
                            <h5>Nilai produk sebelum 30-10-2021</h5>
                            <h5>Nilai sekarang & dapatkan 100 Koin Loyalty!</h5>
                        </Grid>
                        <Grid item xs={2}>

                        </Grid>
                        <Grid item xs={2}>

                        </Grid>
                        <Grid item xs={2}>
                            <div align="right">
                                <Button
                                    color="danger"
                                    href={"/yamaha/product/product_detail?s="}
                                >
                                    <Icon className={classes.icons}>shopping_cart</Icon>Beli Lagi Produk
                                </Button>
                            </div>
                        </Grid>
                        <Grid item xs={2}>
                            <div align="right">
                                <Button
                                    color="info"
                                    href={"/yamaha/product/product_detail?s="}
                                >
                                    <Icon className={classes.icons}>open_in_new</Icon>Beri Nilai Produk
                                </Button>
                            </div>
                        </Grid>
                    </Grid>
                </Card>
            </div>
        );
    })

    const Selesai = finished.map((data) => {
        return (
            <div className={classes.root}>
                <Card style={{ padding: "10px" }}>
                    <Grid container spacing={3}>
                        <Grid item xs={6}>
                            <h4>Dealer A.Rivai | Thamrin Brothers - Yamaha</h4>
                        </Grid>
                        <Grid item xs={6}>
                            <div align="right">
                                <h4>Paket Telah Diterima | Selesai</h4>
                            </div>
                        </Grid>
                    </Grid>
                    <hr />
                    <Grid container spacing={3}>
                        <Grid item xs={4}><br />
                            <img src={Image} width="80%" />
                        </Grid>
                        <Grid item xs={4}>
                            <h3>All New NMAX 155 Connected / ABS Version</h3>
                            <h5>Variasi = Hitam</h5>
                            <h5>Jumlah = 1 Unit</h5>
                        </Grid>
                        <Grid item xs={4}>
                            <div align="left">
                                <h3>Rp.32.000.000,-</h3><br /><br /><br /><br />
                                <h3>Total Pesanan = Rp.32.000.000,-</h3>
                            </div>
                        </Grid>
                    </Grid>
                    <hr /><br />
                    <Grid container>
                        <Grid item xs={4}>
                            <h5>Nilai produk sebelum 30-10-2021</h5>
                            <h5>Nilai sekarang & dapatkan 100 Koin Loyalty!</h5>
                        </Grid>
                        <Grid item xs={2}>

                        </Grid>
                        <Grid item xs={2}>

                        </Grid>
                        <Grid item xs={2}>
                            <div align="right">
                                <Button
                                    color="danger"
                                    href={"/yamaha/product/product_detail?s="}
                                >
                                    <Icon className={classes.icons}>shopping_cart</Icon>Beli Lagi Produk
                                </Button>
                            </div>
                        </Grid>
                        <Grid item xs={2}>
                            <div align="right">
                                <Button
                                    color="info"
                                    href={"/yamaha/product/product_detail?s="}
                                >
                                    <Icon className={classes.icons}>open_in_new</Icon>Beri Nilai Produk
                                </Button>
                            </div>
                        </Grid>
                    </Grid>
                </Card>
            </div>
        );
    })

    return (
        <Card className={classes.textCenter}>
            <script type="text/javascript" src="https://app.sandbox.midtrans.com/snap/snap.js" data-client-key="SB-Mid-client-srx674LjNbEybd4-" />
            <div align="center">
                <CardHeader color="info">Pesanan Saya</CardHeader>
            </div>
            <CardBody>
                <div align="center">
                    <h2>Pesayanan Saya</h2>
                </div>
                <GridContainer justify="center">
                    <GridItem>
                        <NavPills
                            alignCenter
                            color="primary"
                            tabs={[
                                {
                                    tabButton: "Semua",
                                    tabIcon: Dashboard,
                                    tabContent: (
                                        <div>
                                            <h2>Semua Pesanan</h2><hr />
                                            <div style={{ padding: "20px" }}>
                                                {SemuaOrder}
                                            </div>
                                        </div>
                                    ),
                                },
                                {
                                    tabButton: "Belum Bayar",
                                    tabIcon: Dashboard,
                                    tabContent: (
                                        <div>
                                            <h2>Belum Bayar</h2><hr />
                                            <div >
                                                {BelumBayar}
                                            </div>
                                        </div>
                                    ),
                                },
                                {
                                    tabButton: "Dikemas",
                                    tabIcon: Dashboard,
                                    tabContent: (
                                        <div>
                                            <h2>Dikemas</h2><hr />
                                            <div >
                                                {Dikemas}
                                            </div>
                                        </div>
                                    ),
                                },
                                {
                                    tabButton: "Dikirim",
                                    tabIcon: Dashboard,
                                    tabContent: (
                                        <div>
                                            <h2>Dikirim</h2><hr />
                                            <div >
                                                {Dikirim}
                                            </div>
                                        </div>
                                    ),
                                },
                                {
                                    tabButton: "Selesai",
                                    tabIcon: Dashboard,
                                    tabContent: (
                                        <div>
                                            <h2>Selesai</h2><hr />
                                            <div >
                                                {Selesai}
                                            </div>
                                        </div>
                                    ),
                                },
                            ]}
                        />
                    </GridItem>
                </GridContainer>
            </CardBody>
        </Card>
    );
}

export default DataCheckout;