123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190 |
- import Breadcrumb from "../components/Breadcrumbs";
- import {connect} from "react-redux";
- import {actionCardChange, actionCardClear, actionCardRemove} from "../reducers/CartReducer";
- import {ActionFullOrder} from "../actions/ActionOrder";
- import {Box, Button, Container, Divider, Grid, Typography, useMediaQuery} from "@mui/material";
- import {ItemHeaderLine, LinkProductItem, RemoveFromList, TableLine} from "../components/TableLine";
- import {NotFoundBlock} from "../components/NotFoundBlock";
- import imgUrl from "../img/not-found/3.png";
- import AddShoppingCartIcon from "@mui/icons-material/AddShoppingCart";
- import {SetCount} from "../components/SetCount";
- import {useEffect, useState} from "react";
- import {actionClearPromise} from "../reducers/PromiseReducer";
- import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
- const CartGoodLine = ({item, onCartRemove, onCardChange}) => {
- let [count, setCount] = useState(item?.count)
- useEffect(() => {
- onCardChange(item?.good, count)
- }, [count])
- return(
- <Grid container alignItems='center' marginBottom='20px'>
- <Grid item xs={6}>
- <LinkProductItem item={[item?.good?._id, item?.good?.name, item?.good?.images]} children={<Typography>${item?.good?.price}</Typography>}/>
- </Grid>
- <Grid item xs={3} display='flex' justifyContent="center">
- <SetCount height={40} width={40} defaultValue={item?.count} onCount={value => setCount(value)}/>
- </Grid>
- <Grid item xs={2}>
- <ItemHeaderLine align={'center'} text={(`$${parseFloat(item?.good?.price * count).toFixed(2)}`) || 'NaN'}/>
- </Grid>
- <Grid item xs={1}>
- <RemoveFromList good={item?.good} onRemove={onCartRemove}/>
- </Grid>
- </Grid>
- )
- }
- const TotalPriceLine = ({title, subtitle, sizeSubtitle='body2'}) => {
- return (
- <Grid container display='flex' flexDirection='row' justifyContent='space-between' alignItems='center' padding='20px'>
- <Grid item xs={6}>
- <Typography
- variant='body2'
- color='#616161'
- textAlign='left'
- >
- {title}
- </Typography>
- </Grid>
- <Grid item xs={6}>
- <Typography
- variant={sizeSubtitle}
- color='#000'
- textAlign='right'
- >
- {subtitle}
- </Typography>
- </Grid>
- </Grid>
- )
- }
- const BlockTotal = ({auth ,cart, rows, onOrderUpsert, onCartClear}) => {
- return (
- <>
- <Typography
- padding='20px'
- variant='h4'
- fontFamily='sarif'
- letterSpacing='2px'
- textAlign='center'
- >
- TOTAL
- </Typography>
- <Divider/>
- <TotalPriceLine title={`${rows.length || 1} goods for the amount`} subtitle={`$${rows.reduce((a, i) => a + (i.good.price * i.count), 0)}`}/>
- <TotalPriceLine title={'Cost of delivery'} subtitle={'according to the carrier\'s tariffs'}/>
- <Divider/>
- <TotalPriceLine title={'To pay'} subtitle={`$${rows.reduce((a, i) => a + (i.good.price * i.count), 0)}`} sizeSubtitle={'h6'}/>
- <Divider sx={{marginBottom: '20px'}}/>
- <Box display='flex' justifyContent='center' flexDirection='column' alignItems='center'>
- <Button sx={{borderRadius: '0', width:'80%', padding: '10px 20px', marginBottom: '20px'}}
- color='success'
- variant="outlined"
- onClick={() => {onOrderUpsert(cart); onCartClear()}}
- disabled={Object.entries(auth).length === 0}
- >
- {Object.entries(auth).length === 0 ? 'you need to log in' : 'confirm the order'}
- </Button>
- <Button sx={{borderRadius: '0', width:'80%', padding: '10px 20px'}}
- color='warning'
- variant="outlined"
- onClick={() => onCartClear()}
- >
- cart clear
- </Button>
- </Box>
- </>
- )
- }
- const CBlockTotal = connect(state=>({auth: state.auth}))(BlockTotal)
- const CartPage = ({order, cart, onCardChange, onCartClear, onCartRemove, onOrderUpsert, actionClearOrder}) => {
- const matches = useMediaQuery('(max-width:768px)')
- let rows = []
- for (const key of Object.values(cart)) {
- rows.push(key)
- }
- useEffect(() => {
- if (order && Object.entries(order).length > 0) {
- actionClearOrder('order')
- }
- },[cart])
- return (
- <>
- <Breadcrumb links={['cart']}/>
- {Object.values(cart).length > 0 || order ?
- <main style={{backgroundColor: "#f3f3f3", padding: matches ? "20px 0" : "50px 0", minHeight:'300px'}}>
- <Container maxWidth="lg">
- {order && Object.entries(order).length > 0 ?
- <Box display='flex' height='300px' flexDirection='column' alignItems='center' justifyContent='space-around'>
- {order.error ?
- <Typography variant='h5' textAlign='center'>Error, try again</Typography> :
- <>
- <Typography
- variant='h5'
- textAlign='center'
- >
- Order successfully completed
- </Typography>
- <CheckCircleOutlineIcon/>
- <Typography
- variant='h4'
- textAlign='center'
- fontFamily='sarif'
- letterSpacing='2px'
- sx={{textTransform: 'uppercase'}}
- >
- Thanks for your order!
- </Typography>
- <Typography
- variant='body1'
- textAlign='center'
- color="#616161"
- >
- Attention! Shipping is paid separately upon receipt of the goods.
- </Typography>
- <Typography
- variant='body1'
- textAlign='center'
- color="#616161"
- >
- Your order number: {order.payload?._id || 1}
- </Typography>
- <Typography
- variant='body1'
- textAlign='center'
- color="#616161"
- >
- For the amount: ${+order.payload?.total || 0}
- </Typography>
- </>
- }
- </Box>:
- <Grid container justifyContent='space-between'>
- <Grid item xs={8.5}>
- <TableLine columnName={['PRODUCT', 'QUANTITY', 'REMOVE', 'SUBTOTAL']}
- customSizeCol={[6, 3, 2, 1]}/>
- <Divider sx={{marginBottom: '20px'}}/>
- {rows.map(item => <CartGoodLine item={item} onCartRemove={onCartRemove}
- onCardChange={onCardChange}/>)}
- <Divider/>
- </Grid>
- <Grid item xs={3} sx={{backgroundColor: '#fff'}} height='100%' paddingBottom='20px'>
- <CBlockTotal cart={cart} rows={rows} onCartClear={onCartClear}
- onOrderUpsert={onOrderUpsert}/>
- </Grid>
- </Grid>
- }
- </Container>
- </main>:
- <NotFoundBlock img={imgUrl} headerText={'YOUR CART IS CURRENTLY EMPTY'} text={<Box display='flex' alignItems='center'><Typography component='span'>Click the</Typography><AddShoppingCartIcon sx={{margin: '0 10px'}}/><Typography component='span'>icons to add products</Typography></Box>}/>
- }
- </>
- )
- }
- const CCartPage = connect(state=>({cart: state.cart, order: state.promise?.order}), {onCardChange: actionCardChange, onCartClear: actionCardClear, onCartRemove: actionCardRemove, onOrderUpsert: ActionFullOrder, actionClearOrder: actionClearPromise})(CartPage)
- export default CCartPage
|