140 lines
4.9 KiB
JavaScript
140 lines
4.9 KiB
JavaScript
import {
|
|
Box,
|
|
Button,
|
|
Container,
|
|
Grid,
|
|
Paper,
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableContainer,
|
|
TableHead,
|
|
TableRow,
|
|
Typography,
|
|
} from '@mui/material'
|
|
import React from 'react'
|
|
import { useSelector } from 'react-redux'
|
|
import { selectCartSubtotal } from '../../../redux-store/CartStore/ducs'
|
|
|
|
const ReviewOrder = ({ orderId, billTo, shipTo, paymentMode, cartItem, handleTabChange }) => {
|
|
const subtotal = useSelector(selectCartSubtotal)
|
|
|
|
// Calculate total GST for the entire cart
|
|
const totalGST = cartItem.reduce((acc, item) => {
|
|
// console.log(item)
|
|
const gstAmount = (item.price * item.GST.tax) / 100
|
|
return acc + gstAmount * item.count
|
|
}, 0)
|
|
return (
|
|
<Box>
|
|
<Box sx={{ my: '2rem', background: '#fff', padding: '1rem', borderRadius: '0.8rem' }}>
|
|
<Grid container spacing={2}>
|
|
<Grid item sm={6} md={6} lg={6}>
|
|
<Typography variant="h5" sx={{ mb: '0.5rem' }}>
|
|
Bill Address
|
|
</Typography>
|
|
<Typography sx={{ mb: '0.5rem' }}>{billTo}</Typography>
|
|
</Grid>
|
|
<Grid item sm={6} md={6} lg={6}>
|
|
<Typography variant="h5" sx={{ mb: '0.5rem' }}>
|
|
Ship Address
|
|
</Typography>
|
|
<Typography sx={{ mb: '0.5rem' }}>{shipTo}</Typography>
|
|
</Grid>
|
|
<Grid item sm={6} md={6} lg={6}>
|
|
<Typography variant="h5" sx={{ mb: '0.5rem' }}>
|
|
Payment mode : <strong>{paymentMode}</strong>
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
</Box>
|
|
|
|
<Box my={4}>
|
|
<Grid container spacing={5}>
|
|
<Grid item xs={12}>
|
|
<Box>
|
|
<TableContainer
|
|
component={Paper}
|
|
elevation={0}
|
|
sx={{ borderBottom: '1.5px solid #CFCFD5', borderRadius: 0 }}
|
|
>
|
|
<Table sx={{ minWidth: 650 }} size="large">
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableCell>Product</TableCell>
|
|
<TableCell>HSN</TableCell>
|
|
<TableCell>Quantity</TableCell>
|
|
<TableCell>Price</TableCell>
|
|
<TableCell>GST</TableCell>
|
|
<TableCell>Subtotal</TableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{cartItem.map((row, index) => {
|
|
const gstAmount = (row.price * row.GST.tax) / 100
|
|
|
|
return (
|
|
<TableRow
|
|
key={index}
|
|
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
|
|
>
|
|
<TableCell>
|
|
<Box sx={{ display: 'flex' }}>
|
|
{/* <img
|
|
src={row.product.image[0].url}
|
|
alt={row.product.name}
|
|
style={{ width: '100px', height: '70px', marginRight: '1rem' }}
|
|
/> */}
|
|
<Box>
|
|
<Typography fontWeight={600}>{row.name}</Typography>
|
|
</Box>
|
|
</Box>
|
|
</TableCell>
|
|
<TableCell>{row.SKU}</TableCell>
|
|
<TableCell>{row.count}</TableCell>
|
|
<TableCell>₹{row.price}</TableCell>
|
|
<TableCell>₹{gstAmount}</TableCell>
|
|
<TableCell>₹{row.price * row.count}</TableCell>
|
|
</TableRow>
|
|
)
|
|
})}
|
|
<TableRow>
|
|
<TableCell colSpan={5} />
|
|
<TableCell>
|
|
Subtotal:<strong> ₹ {subtotal}</strong>
|
|
</TableCell>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableCell colSpan={5} />
|
|
<TableCell>
|
|
Total GST:<strong> ₹ {totalGST} </strong>
|
|
</TableCell>
|
|
</TableRow>
|
|
|
|
<TableRow>
|
|
<TableCell colSpan={5} />
|
|
<TableCell>
|
|
Grand Total: <strong> ₹ {subtotal + totalGST}</strong>
|
|
</TableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
</Box>
|
|
</Grid>
|
|
</Grid>
|
|
<Box display={'flex'} justifyContent={'center'} mt={4} gap={10}>
|
|
<Button variant="contained" color="primary" onClick={(e) => handleTabChange(e, 0)}>
|
|
Update Order
|
|
</Button>
|
|
<Button variant="contained" color="success" onClick={(e) => handleTabChange(e, 3)}>
|
|
Confirm Order
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
export default ReviewOrder
|