Cart total calculation

jll38 · May 10, 2024 · 40edf29 · 40edf29
1 parent d14f6f5
commit 40edf29
Showing 1 changed file with 41 additions and 11 deletions.
diff --git a/frontend/src/components/shared/cart/Cart.tsx b/frontend/src/components/shared/cart/Cart.tsx
@@ -1,19 +1,34 @@
-import React, { useContext, useState } from "react";
+import React, { useEffect, useContext, useState } from "react";
 import ShoppingBagOutlinedIcon from "@mui/icons-material/ShoppingBagOutlined";
 import SideDrawer from "../modal/SideDrawer/SideDrawer";
 import { Typography, Box, Button } from "@mui/material";
 import Divider from "@mui/material/Divider";
 import { AWS_S3_BASE_URL } from "../../../constants";
 import { CartContext } from "../../../App";
 
-import DeleteIcon from '@mui/icons-material/Delete';
+import DeleteIcon from "@mui/icons-material/Delete";
 export default function Cart() {
   const [open, setOpen] = useState(false);
   const { cart, setCart } = useContext(CartContext);
-
-  React.useEffect(() => {
-    console.log(cart);
+  const [subTotal, setSubTotal] = useState<Number>(0);
+  const [tax, setTax] = useState<Number>(0);
+  const [total, setTotal] = useState<Number>(0);
+  useEffect(() => {
+    const newSubTotal = cart.reduce((accumulator, cartItem) => {
+      const price = cartItem.product.sale_price || cartItem.product.price;
+      return accumulator + price * cartItem.quantity;
+    }, 0);
+    setSubTotal(newSubTotal);
+    console.log(total);
   }, [cart]);
+
+  useEffect(() => {
+    setTax(0.07 * Number(subTotal));
+  }, [subTotal]);
+
+  useEffect(() => {
+    setTotal(Number(tax) + Number(subTotal));
+  }, [tax]);
   return (
     <>
       <button
@@ -29,13 +44,26 @@ export default function Cart() {
           <div className="border p-2 flex items-center gap-2">
             <aside>
               <figure>
-                <img width={100} src={AWS_S3_BASE_URL + cartItem.product.image_url} />
+                <img
+                  width={100}
+                  src={AWS_S3_BASE_URL + cartItem.product.image_url}
+                />
               </figure>
             </aside>
             <div>
               <Typography>{cartItem.product.product_name}</Typography>
-              <Typography color={"gray"}>{cartItem.color} | {cartItem.size}</Typography>
-              <Typography fontWeight={600} fontSize={14}>Qty: {cartItem.quantity}</Typography>
+              <Typography color={"gray"}>
+                {cartItem.color} | {cartItem.size}
+              </Typography>
+              <Typography fontWeight={600} fontSize={14}>
+                Qty: {cartItem.quantity}
+              </Typography>
+              <Typography fontWeight={600} fontSize={14}>
+                $
+                {cartItem.product.sale_price
+                  ? cartItem.product.sale_price
+                  : cartItem.product.price}
+              </Typography>
             </div>
           </div>
         ))}
@@ -49,9 +77,11 @@ export default function Cart() {
           }}
         >
           <Box>
-            <Typography variant="h6">Subtotal: </Typography>
-            <Typography>Tax: </Typography>
-            <Typography variant="h5">Total: </Typography>
+            <Typography variant="h6">
+              Subtotal: ${subTotal.toFixed(2)}{" "}
+            </Typography>
+            <Typography>Tax: ${tax.toFixed(2)} </Typography>
+            <Typography variant="h5">Total: ${total.toFixed(2)} </Typography>
           </Box>
           <Divider />
           <Button>Checkout</Button>