shopping bag

src/App.js

     // if we got cart, then just fetch from BE based on ID
     if (!isEmptyObject(cartHistory)) {
 
-      let cartId = cartHistory.id.split('/')
-      cartId = cartId[cartId.length - 1]
-
-      dispatch(fetchCart("gid://shopify/Cart/Z2NwLWFzaWEtc291dGhlYXN0MTowMUpGTkVDODRQNFY2RUtNV1JZTlJDVFBQNA?key=6d58758401066b048e3795c9cf0fa716"));
+      dispatch(fetchCart(cartHistory.id));
 
     }
 

src/components/Navbar/Navbar.jsx

 import HomeIcon from '@mui/icons-material/Home';
 import BrushIcon from '@mui/icons-material/Brush';
 import LoyaltyIcon from '@mui/icons-material/Loyalty';
+import { useSelector } from 'react-redux';
+
+function calculateTotalQuantity(cartItems) {
+  return cartItems.reduce((total, item) => total + item.quantity, 0);
+}
 
 const LanguageSelect = styled(Select)(({ theme }) => ({
   backgroundColor: 'black',
   },
 }));
 
+const navItem = [
+  {
+    title: "DISCOVER",
+    link: "/products",
+    icon: <CategoryIcon />
+  },
+  {
+    title: "HOME",
+    link: "/",
+    icon: <HomeIcon />
+  },
+  {
+    title: "BEAUTY",
+    link: "/products",
+    icon: <BrushIcon />
+  },
+  {
+    title: "SALE",
+    link: "/products",
+    icon: <LoyaltyIcon />
+  }
+]
+
 
 const Navbar = () => {
 
   const [showHeader, setShowHeader] = useState(true);
   const [lastScrollPos, setLastScrollPos] = useState(0);
   const [language, setLanguage] = useState('English');
+  
+  const cart = useSelector((state) => state.cart.cart)
+  const [cartAmount, setCartAmount] = useState(0);
 
   const [open, setOpen] = React.useState(false);
+  
+  useEffect(() => {
+    
+    if(!cart?.lines?.nodes) return // don't need to do anything if we have no cart data
+
+    setCartAmount(calculateTotalQuantity(cart?.lines?.nodes))
+
+  }, [cart])
+  
 
-  const navItem = [
-    {
-      title: "DISCOVER",
-      link: "/products",
-      icon: <CategoryIcon />
-    },
-    {
-      title: "HOME",
-      link: "/",
-      icon: <HomeIcon />
-    },
-    {
-      title: "BEAUTY",
-      link: "/products",
-      icon: <BrushIcon />
-    },
-    {
-      title: "SALE",
-      link: "/products",
-      icon: <LoyaltyIcon />
-    }
-  ]
 
   const handleChange = (event) => {
     setLanguage(event.target.value);
               <SearchIcon sx={{ color: "white" }} />
             </IconButton>
 
-            <Badge sx={{cursor:"pointer"}} onClick={()=>{ window.location.href = "/cart" }} badgeContent={1} color="primary">
+            <Badge sx={{cursor:"pointer"}} onClick={()=>{ window.location.href = "/cart" }} badgeContent={cartAmount} color="primary">
               <LocalMallIcon color="action" sx={{ color: "white" }} />
             </Badge>
 

src/components/ProductDetails/ProductDetails.jsx

   Box,
   Typography,
   Button,
-  TextField
+  TextField,
+  CircularProgress
 } from "@mui/material";
 import AddIcon from '@mui/icons-material/Add';
 import RemoveIcon from '@mui/icons-material/Remove';
 import { useSelector, useDispatch } from "react-redux";
-import { createCart } from "../../redux/slices/cartSlice";
+import { createCart, addItemToCart } from "../../redux/slices/cartSlice";
+import Alert from '@mui/material/Alert';
+import AlertTitle from '@mui/material/AlertTitle';
 
 // Utility function to check if an object is empty
 const isEmptyObject = (obj) => Object.keys(obj).length === 0 && obj.constructor === Object;
     quantityAvailable: 0
   })
   const [variants, setVariants] = useState([])
+  const [showLoader, setShowLoader] = useState(false)
+  const [alert, setAlert] = useState({ open: false, severity: '', message: '' });
 
   useEffect(() => {
     if (product) {
     let cartHistory = localStorage.getItem('amber-cart');
     cartHistory = cartHistory ? JSON.parse(cartHistory) : {};
 
+    setShowLoader(true) //cause I want to prevent user from mutiple clicking
+
     // if we got no cart, then create a new one
     if (isEmptyObject(cart) || isEmptyObject(cartHistory)) {
 
-      dispatch(createCart());
+      dispatch(createCart())
+      .then(() => {
+        showAlert('success', 'Cart created successfully!');
+      })
+      .catch(() => {
+        showAlert('error', 'Failed to create cart. Please try again.');
+      })
+      .finally(() => setShowLoader(false));
 
     } else {
 
-      // // Update cart content
-      // const existingItemIndex = cartHistory.lines?.findIndex(
-      //   (line) => line.merchandiseId === item.merchandiseId
-      // );
-
-      // if (existingItemIndex !== -1) {
-      //   // If the item exists, update the quantity
-      //   cartHistory.lines[existingItemIndex].quantity += item.quantity;
-      // } else {
-      //   // If the item doesn't exist, add it
-      //   cartHistory.lines = [...(cartHistory.lines || []), item];
-      // }
-
-      // // Update Redux store and localStorage
-      // dispatch(updateCart(cartHistory)); // Redux action to update cart
-      // localStorage.setItem('amber-cart', JSON.stringify(cartHistory));
+      console.log("ADD ITEM:", variantSelection)
+      
+      dispatch(addItemToCart({
+        cartId: cartHistory.id,
+        lines:[
+          {
+            merchandiseId:variantSelection.id,
+            quantity
+          }
+        ]
+      }))
+      .then(() => {
+        showAlert('success', 'Item added to cart successfully!');
+      })
+      .catch(() => {
+        showAlert('error', 'Failed to add item to cart. Please try again.');
+      })
+      .finally(() => setShowLoader(false));
     }
 
   }
 
+  const showAlert = (severity, message) => {
+    setAlert({ open: true, severity, message });
+
+    // Auto-close the alert after 3 seconds
+    setTimeout(() => {
+      setAlert({ ...alert, open: false });
+    }, 2000);
+  };
+
   const handleIncrement = () => {
     setQuantity((prevQuantity) => (prevQuantity >= variantSelection.quantityAvailable ? variantSelection.quantityAvailable : prevQuantity + 1));
   };
           variant="contained"
           color="common.black"
           fullWidth
+          disabled={variantSelection?.quantityAvailable == 0 || showLoader}
           sx={{
             backgroundColor: (theme) => theme.palette.common.black,
             color: "white",
             },
           }}
         >
-          ADD TO CART
+          ADD TO CART {showLoader && <CircularProgress sx={{ml:1}} color="white" size={20} />} 
         </Button>
       </Box>
-
+      {alert.open && (
+        <Alert
+          severity={alert.severity}
+          onClose={() => setAlert({ ...alert, open: false })}
+          sx={{ marginTop: 2 }}
+        >
+          <AlertTitle>{alert.severity === 'success' ? 'Success' : 'Error'}</AlertTitle>
+          {alert.message}
+        </Alert>
+      )}
     </Box>
   );
 };

src/pages/Cart.jsx

-import React from 'react'
+import { useEffect, useState } from 'react'
 import { Box, Button, IconButton } from '@mui/material'
 import SocialMedia from '../components/SocialMedia'
 import Feature from '../components/Feature'
 import TableRow from '@mui/material/TableRow';
 import AddIcon from '@mui/icons-material/Add';
 import RemoveIcon from '@mui/icons-material/Remove';
+import { useSelector, useDispatch } from 'react-redux';
 
 const Cart = () => {
 
-  function createData(img_src, description, colour, quantity, price) {
-    return { img_src, description, colour, quantity, price };
-  }
-
-  const rows = [
-    {
-      img_src: 'https://via.placeholder.com/300',
-      name: 'MELUR',
-      description: 'Atma Sari New Raya Collection 2024',
-      colour: 'black',
-      quantity: 1,
-      price: 335.50
-    },
-    {
-      img_src: 'https://via.placeholder.com/300',
-      name: 'MELUR2',
-      description: 'Atma Sari New Raya Collection 2025',
-      colour: 'red',
-      quantity: 2,
-      price: 665.00
-    },
-  ];
+  const dispatch = useDispatch()
+  const cart = useSelector((state) => state.cart.cart)
+  const [cartProducts, setCartProducts] = useState([]) // this is being used as view only, will not used as a way to manipulate cart in any way
+
+  useEffect(() => {
+
+    console.log(cart)
+
+  }, [])
+
+  useEffect(() => {
+    setCartProducts(cart?.lines?.nodes || [])
+  }, [cart])
+
 
   return (
     <>
           md: 5,
           lg: 10
         },
-        mt:10
+        mt: 10
       }}>
 
 
         {/* Header */}
-        <Grid container spacing={2} alignItems="center" sx={{ mb: 5, flexDirection: { xs: 'column-reverse', lg: 'row' } }}> 
-
-          {/* Type */}
-          <Grid item size={{xs:12, lg:2}}>
-            <Typography variant="body2">
-              <p>Mens Fashion <span style={{ fontWeight: "bold", display: "inline-block" }}>Shopping Bag</span></p>
-            </Typography>
-          </Grid>
+        <Grid container spacing={2} alignItems="center" sx={{ mb: 5, flexDirection: { xs: 'column-reverse', lg: 'row' } }}>
 
-          <Grid item size={{xs:12, md:4}}>
+          <Grid item size={{ xs: 12, md: 4 }}>
             <Typography variant="h5" sx={{ fontWeight: "bold" }}>
               SHOPPING BAG
             </Typography>
                   <Typography variant='body1'>Description</Typography>
                 </TableCell>
                 <TableCell align='center'>
-                  <Typography variant='body1'>Colour</Typography>
+                  <Typography variant='body1'>Variant</Typography>
                 </TableCell>
                 <TableCell align='center'>
 
               </TableRow>
             </TableHead>
             <TableBody>
-              {rows.map((row) => (
-                <TableRow
-                  key={row.id}
-                  sx={{
-                    '& td, & th': { border: 0 },
-                    '&:last-child td, &:last-child th': { border: 0 }
-                  }}
-                >
-                  <TableCell component="th" scope="row">
-                    <img
-                      src={row.img_src}
-                      alt={row.img_src}
-                      style={{
-                        width: 100,
-                        height: 100,
-                        aspectRatio: '4 / 4',
-                        objectFit: 'cover',
-                      }}
-                    />
-                  </TableCell>
-                  <TableCell>
-                    <Typography variant='body2' sx={{ fontWeight: "bold", mb: 1 }}>{row.name}</Typography>
-                    <Typography variant='body2'>{row.description}</Typography>
-                  </TableCell>
-                  <TableCell align='center'>
-                    <Typography variant='h6' sx={{ fontWeight: "bold" }} >{row.colour}</Typography>
-                  </TableCell>
-                  <TableCell align='center'>
-                    <Box sx={{ display: "flex", justifyContent: "center" }}>
-                      <IconButton>
-                        <RemoveIcon sx={{ fontSize: 16, margin: "0 15px" }} />
-                      </IconButton>
-                      <p style={{ fontSize: 20, fontWeight: "bold" }}>{row.quantity}</p>
-                      <IconButton >
-                        <AddIcon sx={{ fontSize: 16, margin: "0 15px" }} />
-                      </IconButton>
-                    </Box>
-                  </TableCell>
-                  <TableCell align='center'>
-                    <Typography variant='h6' sx={{ fontWeight: "bold" }}>{`RM ${parseFloat(row.price).toFixed(2)}`}</Typography>
-                  </TableCell>
-                </TableRow>
-              ))}
+              {cartProducts?.map(({ cost, merchandise, quantity }) => {
+                
+                let {amount, currencyCode} = cost.totalAmount
+                let {id, image, product, title } = merchandise // the title here is actually the variant title name
+
+                return (
+                  <TableRow
+                    key={id}
+                    sx={{
+                      '& td, & th': { border: 0 },
+                      '&:last-child td, &:last-child th': { border: 0 }
+                    }}
+                  >
+                    <TableCell component="th" scope="row">
+                      <img
+                        src={image.src}
+                        alt={image.src}
+                        style={{
+                          width: 100,
+                          height: 100,
+                          aspectRatio: '4 / 4',
+                          objectFit: 'cover',
+                          objectPosition:"top center"
+                        }}
+                      />
+                    </TableCell>
+                    <TableCell>
+                      <Typography variant='body2' sx={{ fontWeight: "bold", mb: 1 }}>{product.title}</Typography>
+                      
+                      {product?.collections?.nodes?.map(({title}) => (<Typography variant='body2'>{title}</Typography>) )}
+
+                    </TableCell>
+                    <TableCell align='center'>
+                      <Typography variant='body2' sx={{ fontWeight: "bold" }} >{title}</Typography>
+                    </TableCell>
+                    <TableCell align='center'>
+                      <Box sx={{ display: "flex", justifyContent: "center" }}>
+                        <IconButton>
+                          <RemoveIcon sx={{ fontSize: 16, margin: "0 15px" }} />
+                        </IconButton>
+                        <p style={{ fontSize: 20, fontWeight: "bold" }}>{quantity}</p>
+                        <IconButton >
+                          <AddIcon sx={{ fontSize: 16, margin: "0 15px" }} />
+                        </IconButton>
+                      </Box>
+                    </TableCell>
+                    <TableCell align='center'>
+                      <Typography variant='h6' sx={{ fontWeight: "bold" }}>{`${currencyCode} ${parseFloat(amount).toFixed(2)}`}</Typography>
+                    </TableCell>
+                  </TableRow>
+                )
+
+              })}
             </TableBody>
           </Table>
         </TableContainer>
         {/* INVOICES */}
         <Grid container spacing={2} sx={{ mb: 5 }}>
 
-          <Grid item size={{xs:12, sm:4, md:3}} sx={{ ml: "auto" }}>
+          <Grid item size={{ xs: 12, sm: 4, md: 3 }} sx={{ ml: "auto" }}>
             <Box
               display="flex"
               justifyContent="space-between"
               sx={{ mb: 2 }}
             >
               <Typography variant="body1" sx={{ fontWeight: "400" }}>Subtotal</Typography>
-              <Typography variant="body1" sx={{ fontWeight: "400" }}>{`RM ${parseFloat(500).toFixed(2)}`}</Typography>
-            </Box>
-            <Box
-              display="flex"
-              justifyContent="space-between"
-              alignItems="center"
-              sx={{ mb: 2 }}
-            >
-              <Typography variant="body1" sx={{ fontWeight: "400" }}>Shipping</Typography>
-              <Typography variant="body1" sx={{ fontWeight: "400" }}>{`RM ${parseFloat(500).toFixed(2)}`}</Typography>
+              <Typography variant="body1" sx={{ fontWeight: "400" }}>
+                {`
+                  ${cart?.cost?.subtotalAmount?.currencyCode} 
+                  ${parseFloat(cart?.cost?.subtotalAmount?.amount).toFixed(2)}
+                `}
+              </Typography>
             </Box>
             <Box
               display="flex"
               sx={{ mb: 2 }}
             >
               <Typography variant="body1" sx={{ fontWeight: "400" }}>Taxes</Typography>
-              <Typography variant="body1" sx={{ fontWeight: "400" }}>{`RM ${parseFloat(500).toFixed(2)}`}</Typography>
+              <Typography variant="body1" sx={{ fontWeight: "400" }}>
+                {`
+                  ${cart?.cost?.totalTaxAmount?.currencyCode} 
+                  ${parseFloat(cart?.cost?.totalTaxAmount?.amount).toFixed(2)}
+                `}
+              </Typography>
             </Box>
             <Box
               display="flex"
               sx={{ mb: 2 }}
             >
               <Typography variant="body1" sx={{ fontWeight: "400" }}>Total</Typography>
-              <Typography variant="body1" sx={{ fontWeight: "bold" }}>{`RM ${parseFloat(500).toFixed(2)}`}</Typography>
+              <Typography variant="body1" sx={{ fontWeight: "bold" }}>
+                {`
+                  ${cart?.cost?.totalAmount?.currencyCode} 
+                  ${parseFloat(cart?.cost?.totalAmount?.amount).toFixed(2)}
+                `}
+              </Typography>
             </Box>
           </Grid>
 
 
         {/* BUY NOW */}
         <Box sx={{ mb: 15 }}>
-          <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexDirection:{xs:"column-reverse", md:"row" } }}>
+          <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexDirection: { xs: "column-reverse", md: "row" } }}>
             <Typography variant='body2'><span style={{ fontWeight: "bolder" }}>NEED HELP?</span> CALL US: +44 (0)10 2345 6789 | EMAIL CUSTOMER CARE | SHIPPING INFORMATION | RETURNS & EXCHANGES</Typography>
             <Button
               variant="contained"
                 px: 8,
                 py: 2,
                 mb: {
-                  xs:5,
-                  md:0
+                  xs: 5,
+                  md: 0
                 },
                 "&:hover": {
                   backgroundColor: (theme) => theme.palette.grey[900],

src/redux/slices/cartSlice.js

   error: null,
 };
 
-// Async Thunks
 export const createCart = createAsyncThunk(
   'cart/createCart',
   async () => {
   }
 );
 
-export const addItemToCart = createAsyncThunk(
-  'cart/addItemToCart',
-  async ({ cartId, lines }, { rejectWithValue }) => {
+export const fetchCart = createAsyncThunk(
+  'cart/fetchCart',
+  async (cartId, { rejectWithValue }) => {
     try {
-      const response = await CartService.addItemToCart(cartId, lines);
+      const response = await CartService.getCart(cartId);
       return response;
     } catch (error) {
       return rejectWithValue(error.message);
   }
 );
 
-export const fetchCart = createAsyncThunk(
-  'cart/fetchCart',
-  async (cartId, { rejectWithValue }) => {
+export const addItemToCart = createAsyncThunk(
+  'cart/addItemToCart',
+  async ({ cartId, lines }, { rejectWithValue }) => {
     try {
-      const response = await CartService.getCart(cartId);
+      const response = await CartService.addItemToCart(cartId, lines);
       return response;
     } catch (error) {
       return rejectWithValue(error.message);
       })
       .addCase(addItemToCart.fulfilled, (state, action) => {
         state.status = 'succeeded';
+        localStorage.setItem('amber-cart', JSON.stringify(action.payload));
         state.cart = action.payload;
       })
       .addCase(addItemToCart.rejected, (state, action) => {

src/services/CartService.js

           createdAt
           updatedAt
         }
-        userErrors {
-          field
-          message
-        }
       }
     }
   `;
 
 // Add a line item to the cart
 const addItemToCart = async (cartId, lines) => {
+
   const query = `
-    mutation AddItemToCart($cartId: ID!, $lines: [CartLineInput!]!) {
+    mutation($cartId: ID!, $lines: [CartLineInput!]!) {
       cartLinesAdd(cartId: $cartId, lines: $lines) {
         cart {
           id
+          createdAt
+          updatedAt
+          cost {
+            totalAmount {
+              amount
+              currencyCode
+            }
+            subtotalAmount {
+              amount
+              currencyCode
+            }
+            totalTaxAmount {
+              amount
+              currencyCode
+            }
+          }
           lines(first: 10) {
-            edges {
-              node {
-                id
-                quantity
-                merchandise {
-                  ... on ProductVariant {
-                    id
+            nodes {
+              id
+              merchandise {
+                ... on ProductVariant {
+                  id
+                  title
+                  selectedOptions {
+                    name
+                    value
+                  }
+                  image {
+                    src
+                  }
+                  product {
                     title
+                    collections(first: 5) {
+                      nodes {
+                        title
+                      }
+                    }
                   }
                 }
               }
+              quantity
+              cost {
+                totalAmount {
+                  amount
+                  currencyCode
+                }
+              }
             }
           }
         }
-        userErrors {
-          field
-          message
-        }
       }
     }
   `;
   const variables = { cartId, lines };
-  const { data } = await client.request(query, variables);
+
+  const {data, errors, extensions} = await client.request(query,{
+    variables: {
+      cartId,
+      lines
+    }
+  });
+  
   return data.cartLinesAdd.cart;
 };
 
             amount
             currencyCode
           }
+          totalTaxAmount {
+            amount
+            currencyCode
+          }
         }
-        lines(first: 99) {
-          edges {
-            node {
-              id
-              quantity
-              merchandise {
-                ... on ProductVariant {
-                  id
+        lines(first: 10) {
+          nodes {
+            id
+            merchandise {
+              ... on ProductVariant {
+                id
+                title
+                selectedOptions {
+                  name
+                  value
+                }
+                image {
+                  src
+                }
+                product {
                   title
+                  collections(first: 5) {
+                    nodes {
+                      title
+                    }
+                  }
                 }
               }
             }
+            quantity
+            cost {
+              totalAmount {
+                amount
+                currencyCode
+              }
+            }
           }
         }
       }
+        
     }
   `;