|
- 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, 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 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-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;
- }
-
- 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"}}>
- <script type="text/javascript" src="https://app.sandbox.midtrans.com/snap/snap.js" data-client-key="SB-Mid-client-srx674LjNbEybd4-"/>
- <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/create",
- {
- 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"]["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");
- }
- }}
- >
- <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;
|