123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250 |
- import Breadcrumb from "../components/Breadcrumbs";
- import {
- Accordion,
- AccordionDetails,
- AccordionSummary, Box,
- CircularProgress,
- Container, Divider, Grid, Pagination,
- Typography,
- useMediaQuery
- } from "@mui/material";
- import {connect} from "react-redux";
- import {actionFullOrderFind} from "../actions/ActionOrderFind";
- import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
- import {timeCalc} from "./ProductPage";
- import {backURL} from "../actions/PathDB";
- import {actionMyOrderClear} from "../reducers/MyOrdersReducer";
- import {useEffect, useState} from "react";
- import imgNotFound from "../img/catalog/imgNotFound.png";
- import Link from "react-router-dom/es/Link";
- import {NotFoundBlock} from "../components/NotFoundBlock";
- const AccordionHeaderText = ({columnText, content}) => {
- return (
- <Box display='flex' flexDirection='column' justifyContent='space-between'>
- <Typography
- variant='body2'
- color='#616161'
- marginBottom='20px'
- >
- {columnText}
- </Typography>
- <Typography
- variant='body1'
- >
- {content}
- </Typography>
- </Box>
- )
- }
- const AccordionItem = ({data}) => {
- const time = timeCalc(+data['createdAt'])
- const [status, setStatus] = useState(false);
- return (
- <Accordion onChange={() => setStatus(!status)}>
- <AccordionSummary
- expandIcon={<ExpandMoreIcon />}
- >
- <Divider orientation="vertical" flexItem sx={{backgroundColor: data['total'] ? '#7cd545': '#ad2222', width:'5px', borderRadius: '3px', boxShadow: 'none'}}/>
- <Box sx={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%', padding: '10px 20px'}}>
- <AccordionHeaderText columnText={`№ ${data['_id']} from ${time}`} content={data['total'] ? 'Completed' : 'Canceled'}/>
- {!status && <AccordionHeaderText columnText={'Order price'} content={data['total'] ? `$${data['total']}` : 'null'}/>}
- {!status && <Box sx={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '200px'}}>
- {data['orderGoods'] && data['orderGoods'].map((item, index, array) => {
- if (index < 2) {
- return <Box minWidth='60px' maxWidth='60px' height='60px' borderRadius='10px' overflow='hidden' marginRight='20px'>
- <img style={{width: '100%', height: '100%', objectFit: 'cover'}}
- src={item?.good?.images && item.good.images[0].url ? backURL + '/' + item.good.images[0].url : imgNotFound}
- alt={'image'}/>
- </Box>
- }
- else if (index === 2) {
- return <Box sx={{width:'60px', height:'60px', border:'1px solid #616161', display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#616161', borderRadius: '10px'}}>
- +{array.length - 2}
- </Box>}
- })
- }
- </Box>}
- </Box>
- </AccordionSummary>
- <AccordionDetails sx={{padding: '20px'}}>
- {data['orderGoods'] && data['orderGoods'].length > 0 ?
- <>
- <Grid container>
- <Grid item md={7}>
- <Typography
- color='#616161'
- variant='body1'
- letterSpacing='1px'
- textAlign='left'
- >
- Product
- </Typography>
- </Grid>
- <Grid item md={2}>
- <Typography
- color='#616161'
- variant='body1'
- letterSpacing='1px'
- textAlign='center'
- >
- Price
- </Typography>
- </Grid>
- <Grid item md={1}>
- <Typography
- color='#616161'
- variant='body1'
- letterSpacing='1px'
- textAlign='center'
- >
- Count
- </Typography>
- </Grid>
- <Grid item md={2}>
- <Typography
- color='#616161'
- variant='body1'
- letterSpacing='1px'
- textAlign='right'
- >
- Sum
- </Typography>
- </Grid>
- </Grid>
- <Divider sx={{margin: '10px 0'}}/>
- {data['orderGoods'].map(item => {
- return <Grid container alignItems='center' marginBottom='20px'>
- <Grid item md={7}>
- <Link style={{textDecoration: 'none', display: 'flex', alignItems: 'center', color: '#616161'}} to={`/good/${item?.good?._id}`}>
- <Box minWidth='60px' maxWidth='60px' height='60px' borderRadius='10px' overflow='hidden' marginRight='20px'>
- <img style={{width: '100%', height: '100%', objectFit: 'cover'}}
- src={item?.good?.images && item.good.images[0].url ? backURL + '/' + item.good.images[0].url : imgNotFound}
- alt={'image'}/>
- </Box>
- <Typography
- variant='body1'
- >
- {item.good?.name || 'product name'}
- </Typography>
- </Link>
- </Grid>
- <Grid item md={2}>
- <Typography
- color='#616161'
- variant='body1'
- letterSpacing='1px'
- textAlign='center'
- >
- {item?.price ? '$' + parseFloat(item.price).toFixed(2) : 'NaN'}
- </Typography>
- </Grid>
- <Grid item md={1}>
- <Typography
- color='#616161'
- variant='body1'
- letterSpacing='1px'
- textAlign='center'
- >
- {item?.count || '1'}
- </Typography>
- </Grid>
- <Grid item md={2}>
- <Typography
- color='#616161'
- variant='body1'
- letterSpacing='1px'
- textAlign='right'
- >
- {item?.price && item?.count ? '$'+parseFloat(item.price * item.count).toFixed(2) : 'NaN'}
- </Typography>
- </Grid>
- </Grid>
- })}
- <Divider sx={{margin: '-10px 0 10px 0'}}/>
- <Box display='flex' justifyContent='space-between'>
- <Typography
- variant='body1'
- color='#616161'
- >
- Total
- </Typography>
- <Typography
- variant='body1'
- color='#616161'
- >
- {data?.total ? '$'+parseFloat(data.total).toFixed(2) : 'NaN'}
- </Typography>
- </Box>
- </> :
- <Typography>Error</Typography>
- }
- </AccordionDetails>
- </Accordion>
- )
- }
- const MainOrders = ({itemsPerPage=10, orders, onFindOrders, onOrdersClear}) => {
- const [page, setPage] = useState(1)
- const [count, setCount] = useState(1)
- const handleChange = (event, value) => {
- setPage(value);
- }
- useEffect(() => {
- onOrdersClear()
- }, [onOrdersClear])
- useEffect(() => {
- if(orders?.orderResult && Object.entries(orders.orderResult).length > 0) {
- setCount(Math.ceil(Object.entries(orders.orderResult).length / itemsPerPage))
- }
- }, [orders])
- if(Object.entries(orders).length === 0) onFindOrders()
- return (
- <>
- {Object.entries(orders).length === 0 ?
- <Box sx={{height: '100%', width: '100%', display: 'flex', justifyContent:'center', alignItems:'center'}}><CircularProgress color="inherit"/></Box> :
- Object.entries(orders?.orderResult).length > 0 ?
- <Box>
- {Object.values(orders.orderResult).slice((page - 1) * itemsPerPage, page * itemsPerPage).map(item => <AccordionItem data={item}/>)}
- <Divider sx={{margin: '20px'}}/>
- <Box display='flex' justifyContent='center' width='100%'>
- <Pagination
- count={count}
- page={page}
- onChange={handleChange}
- defaultPage={1}
- color="primary"
- size="large"
- showFirstButton
- showLastButton
- />
- </Box>
- </Box>
- :
- <NotFoundBlock headerText={'OOPS! ORDERS CAN’T BE FOUND'} text={'No order has been made yet.'}/>
- }
- </>
- )
- }
- export const CMainOrders = connect(state=>({orders: state.myorders}), {onFindOrders: actionFullOrderFind, onOrdersClear: actionMyOrderClear})(MainOrders)
- const MyOrdersPage = () => {
- const matches = useMediaQuery('(max-width:768px)')
- return (
- <>
- <Breadcrumb links={['My orders']} />
- <main style={{backgroundColor: "#f3f3f3", padding: matches ? "20px 0" : "50px 0", minHeight:'300px'}}>
- <Container maxWidth="lg" sx={{position:'relative'}}>
- <CMainOrders />
- </Container>
- </main>
- </>
- )
- }
- export default MyOrdersPage
|