side cart done

src/components/SideCart/SideCart.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Drawer, Box, Typography, IconButton } from "@mui/material";
+import { Drawer, Box, Typography, IconButton, Button } from "@mui/material";
 import Grid from '@mui/material/Grid2';
 import CloseIcon from "@mui/icons-material/Close";
 import { updateItemQuantity } from "../../redux/slices/cartSlice";
@@ -20,13 +20,13 @@ const SideCart = ({ open, onClose }) => {
   }, [cart])
 
 
-  const handleUpdateCart = ({ quantity,  lineId}) => {
+  const handleUpdateCart = ({ quantity, lineId }) => {
 
     let cartHistory = localStorage.getItem('amber-cart');
     cartHistory = cartHistory ? JSON.parse(cartHistory) : {};
 
     dispatch(updateItemQuantity({
-      cartId:cartHistory.id,
+      cartId: cartHistory.id,
       lineId,
       quantity,
     }))
@@ -47,11 +47,12 @@ const SideCart = ({ open, onClose }) => {
             sm: "90%",
             md: "30%",
           },
+          height: "97%",
           padding: 2,
         },
       }}
     >
-      <Box>
+      <Box sx={{ display: "flex", flexDirection: "column", height: "100%" }}>
         {/* Header */}
         <Box
           sx={{
@@ -67,79 +68,146 @@ const SideCart = ({ open, onClose }) => {
           </IconButton>
         </Box>
 
-        {/* Product List */}
-        {cartProducts && cartProducts?.length > 0 ? (
-          cartProducts.map(({ id, cost, merchandise, quantity }, index) => {
-
-            let { amount, currencyCode } = cost.totalAmount
-            let { image, product, title } = merchandise
+        <Box sx={{ flexGrow: 1 }}>
+          {/* Product List */}
+          {cartProducts && cartProducts?.length > 0 ? (
+            cartProducts.map(({ id, cost, merchandise, quantity }, index) => {
+
+              let { amount, currencyCode } = cost.totalAmount
+              let { image, product, title } = merchandise
+
+              // ID
+              const parts = product?.id?.split('/');
+              let prodID = parts[parts.length - 1];
+
+              return (
+                <>
+                  <Box
+                    key={index}
+                    sx={{
+                      display: "flex",
+                      alignItems: "center",
+                      padding: 1,
+                      borderBottom: "1px solid #eee",
+                    }}
+                  >
+                    <Grid container>
+                      {/* Product Image */}
+                      <Grid item size={2}>
+                        <Box
+                          component="img"
+                          src={merchandise?.image?.src}
+                          alt={product.name}
+                          sx={{
+                            width: "100%",
+                            height: "auto",
+                            borderRadius: 2,
+                          }}
+                        />
+                      </Grid>
+
+                      {/* Product Details */}
+                      <Grid item size={10} sx={{ paddingLeft: 1 }}>
+                        <Typography variant="body1" sx={{ lineHeight: 1, fontWeight: "bold" }}>
+                          {product?.title}
+                        </Typography>
+                        <Typography variant='body1' sx={{ fontWeight: "bold", mb: 1 }}>{`VARIANT: ${title}`}</Typography>
+
+                        <Box sx={{ display: "flex", alignItems: "center" }}>
+
+                          <Typography variant='body1' sx={{ fontWeight: "bold" }}>{`${currencyCode} ${parseFloat(amount).toFixed(2)}`}</Typography>
+
+                          <Box sx={{ display: "flex", ml: "auto" }}>
+                            <IconButton onClick={() => {
+
+                              handleUpdateCart({ quantity: quantity - 1, lineId: id })
+                            }}>
+                              <RemoveIcon sx={{ fontSize: 16, margin: "0 15px" }} />
+                            </IconButton>
+
+                            <p style={{ fontSize: 20, fontWeight: "bold" }}>{quantity}</p>
+
+                            <IconButton onClick={() => {
+
+                              handleUpdateCart({ quantity: quantity + 1, lineId: id })
+                            }}>
+                              <AddIcon sx={{ fontSize: 16, margin: "0 15px" }} />
+                            </IconButton>
+                          </Box>
+
+                        </Box>
+                      </Grid>
+                    </Grid>
+                  </Box>
+                </>
+              )
+
+            })
+          ) : (
+            <Typography variant="body2" color="text.secondary">
+              Your cart is empty.
+            </Typography>
+          )}
+        </Box>
 
-            // ID
-            const parts = product?.id?.split('/');
-            let prodID = parts[parts.length - 1];
+        <Box sx={{ mt: "auto" }}>
+          {/* INVOICES */}
+          <Grid container spacing={2}>
 
-            return (
+            <Grid item size={12}>
+              <Box
+                display="flex"
+                justifyContent="space-between"
+                alignItems="center"
+              >
+                <Typography variant="body1" sx={{ fontWeight: "400" }}>Subtotal</Typography>
+                <Typography variant="body1" sx={{ fontWeight: "400" }}>
+                  {`
+                    ${cart?.cost?.subtotalAmount?.currencyCode} 
+                    ${parseFloat(cart?.cost?.subtotalAmount?.amount).toFixed(2)}
+                  `}
+                </Typography>
+              </Box>
               <Box
-                key={index}
-                sx={{
-                  display: "flex",
-                  alignItems: "center",
-                  padding: 1,
-                  borderBottom: "1px solid #eee",
-                }}
+                display="flex"
+                justifyContent="space-between"
+                alignItems="center"
               >
-                <Grid container>
-                  {/* Product Image */}
-                  <Grid item size={4}>
-                    <Box
-                      component="img"
-                      src={merchandise?.image?.src}
-                      alt={product.name}
-                      sx={{
-                        width: "100%",
-                        height: "auto",
-                        borderRadius: 2,
-                      }}
-                    />
-                  </Grid>
-
-                  {/* Product Details */}
-                  <Grid item size={8} sx={{ paddingLeft: 1 }}>
-                    <Typography variant="body1" sx={{lineHeight:1, fontWeight: "bold"}}>
-                      {product?.title}
-                    </Typography>
-                    <Typography variant='body2' sx={{ fontWeight: "bold" }}>{`${currencyCode} ${parseFloat(amount).toFixed(2)}`}</Typography>
-                    <Typography variant='body2' sx={{ fontWeight: "bold" }} >{title}</Typography>
-                    <Box sx={{ display: "flex", justifyContent: "center" }}>
-
-                        <IconButton onClick={() => {
-
-                          handleUpdateCart({ quantity: quantity - 1, lineId:id })
-                        }}>
-                          <RemoveIcon sx={{ fontSize: 16, margin: "0 15px" }} />
-                        </IconButton>
-
-                        <p style={{ fontSize: 20, fontWeight: "bold" }}>{quantity}</p>
-
-                        <IconButton onClick={() => {
-
-                          handleUpdateCart({ quantity: quantity + 1, lineId:id })
-                        }}>
-                          <AddIcon sx={{ fontSize: 16, margin: "0 15px" }} />
-                        </IconButton>
-
-                      </Box>
-                  </Grid>
-                </Grid>
+                <Typography variant="body1" sx={{ fontWeight: "400" }}>Taxes</Typography>
+                <Typography variant="body1" sx={{ fontWeight: "400" }}>
+                  {`
+                    ${cart?.cost?.totalTaxAmount?.currencyCode} 
+                    ${parseFloat(cart?.cost?.totalTaxAmount?.amount).toFixed(2)}
+                  `}
+                </Typography>
               </Box>
-            )
-
-          })
-        ) : (
-          <Typography variant="body2" color="text.secondary">
-            Your cart is empty.
-          </Typography>
-        )}
+              <Box
+                display="flex"
+                justifyContent="space-between"
+                alignItems="center"
+              >
+                <Typography variant="body1" sx={{ fontWeight: "400" }}>Total</Typography>
+                <Typography variant="body1" sx={{ fontWeight: "bold" }}>
+                  {`
+                    ${cart?.cost?.totalAmount?.currencyCode} 
+                    ${parseFloat(cart?.cost?.totalAmount?.amount).toFixed(2)}
+                  `}
+                </Typography>
+              </Box>
+            </Grid>
+            <Grid item size={12} sx={{textAlign:"center"}}>
+              <Button
+                variant="contained"
+                color="primary"
+                onClick={() => {
+                  window.location.href = '/cart'
+                }}>
+                CHECKOUT NOW
+              </Button>
+            </Grid>
+          </Grid>
+        </Box>
+
       </Box>
     </Drawer>
   );