set quantity

src/App.js

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

src/components/ProductDetails/ProductDetails.jsx

-import { useState } from "react";
+import { useState, useEffect } from "react";
 import {
   Box,
   Typography,
 // Utility function to check if an object is empty
 const isEmptyObject = (obj) => Object.keys(obj).length === 0 && obj.constructor === Object;
 
+// Check if every key in the target object matches the source object
+const hasMatchingProperties = (source, target) => {
+  return Object.entries(target).every(([key, value]) => source[key] === value);
+};
+
 const ProductDetails = () => {
 
   const dispatch = useDispatch()
   const cart = useSelector((state) => state.cart.cart)
 
   const [quantity, setQuantity] = useState(1)
-  const [selectedSize, setSelectedSize] = useState(null)
+  const [variantSelection, setVariantSelection] = useState({
+    price: 0,
+    currencyCode: "",
+    quantityAvailable: 0
+  })
+  const [variants, setVariants] = useState([])
+
+  useEffect(() => {
+    if (product) {
+
+      console.log("Product: ", product)
+
+      let productVariants = product?.variants?.nodes
+
+      // get all variant type
+      if (!productVariants || productVariants?.length == 0) return
+
+      // we want to get the title for each variant
+      const uniqueOptions = {};
+      productVariants.forEach(variant => {
+        variant.selectedOptions.forEach(option => {
+          if (!uniqueOptions[option.name]) {
+            uniqueOptions[option.name] = new Set();
+          }
+          uniqueOptions[option.name].add(option.value);
+        });
+      });
+
+      const VariantsArr = Object.entries(uniqueOptions).map(([key, valueSet]) => ({
+        name: key,
+        options: Array.from(valueSet),
+      }));
+
+      // get variants value
+      setVariants(VariantsArr)
+
+      // setting Initial value for variants selection
+      setVariantSelection((prev) => {
+
+        let newVariantSelection = { ...prev }
+
+        // setting inital selection
+        VariantsArr.forEach(({ name, options }) => {
+          newVariantSelection = { ...newVariantSelection, [name]: options[0] }
+        })
+
+        // find variant price if it all match initial variant selection
+        for (const { selectedOptions, price, id, quantityAvailable } of productVariants) {
+          let { amount, currencyCode } = price;
+        
+          // Convert array to object
+          const optionsObject = selectedOptions.reduce(
+            (a, { name, value }) => ({ ...a, [name]: value }),
+            {}
+          );
+        
+          if (hasMatchingProperties(newVariantSelection, optionsObject)) {
+            newVariantSelection = { ...newVariantSelection, amount, currencyCode, id, quantityAvailable };
+            break; // Exit the loop when condition is met
+          }
+        }
+
+        return newVariantSelection
+
+      })
+
+    }
+
+  }, [product])
+
+  useEffect(() => {
+    console.log("variantSelection: ", variantSelection)
+  }, [variantSelection])
+
+  const handleVariantClick = (name, value) => {
+    setVariantSelection({ ...variantSelection, [name]: value })
+
+    setVariantSelection((prev) => {
+
+      let newVariantSelection = { ...prev }
+      newVariantSelection = { ...newVariantSelection, [name]: value }
+      let productVariants = product?.variants?.nodes
+
+      // find variant price if it all match initial variant selection
+      for (const { selectedOptions, price, id, quantityAvailable } of productVariants) {
+        let { amount, currencyCode } = price;
+      
+        // Convert array to object
+        const optionsObject = selectedOptions.reduce(
+          (a, { name, value }) => ({ ...a, [name]: value }),
+          {}
+        );
+      
+        if (hasMatchingProperties(newVariantSelection, optionsObject)) {
+          newVariantSelection = { ...newVariantSelection, amount, currencyCode, id, quantityAvailable };
+          if(quantityAvailable == 0) setQuantity(0)
+          else setQuantity(1)
+          break; // Exit the loop when condition is met
+        }
+      }
+
+
+      return newVariantSelection
+
+    })
+
+  }
 
   const handleCart = () => {
 
     if (isEmptyObject(cart) || isEmptyObject(cartHistory)) {
 
       dispatch(createCart());
-      
+
     } else {
 
       // // Update cart content
     setQuantity((prevQuantity) => (prevQuantity > 1 ? prevQuantity - 1 : 1));
   };
 
-  const handleSizeClick = (size) => {
-    setSelectedSize(size);
-  };
 
   return (
     <Box sx={{ position: "relative" }}>
             variant="body1"
             sx={{ fontWeight: "bold" }}
           >
-            {`${product?.compareAtPriceRange?.minVariantPrice?.currencyCode} 
-            ${parseFloat(product?.compareAtPriceRange?.minVariantPrice?.amount).toFixed(2)}`}
+            {`${variantSelection.currencyCode} ${parseFloat(variantSelection.amount).toFixed(2)}`}
+          </Typography>
+          <Typography
+            variant="body1"
+          >
+            IN STOCK: {`${variantSelection?.quantityAvailable}`}
           </Typography>
         </Box>
 
-        {/* Section 2: Size */}
+        {/* Section 2: Variants */}
         <Box>
-          <Typography variant="body1" sx={{ fontWeight: "bold", color: "#000", mb: 2 }}>
-            Size
-          </Typography>
-          <Box display="flex" gap={2}>
-            {["S", "M", "L", "XL"].map((size) => (
-              <Button
-                key={size}
-                variant={selectedSize === size ? "contained" : "outlined"}
-                color={selectedSize === size ? "primary" : "primary"}
-                sx={{ color: selectedSize === size ? "#FFF" : "#000" }}
-                onClick={() => handleSizeClick(size)}
-              >
-                {size}
-              </Button>
-            ))}
-          </Box>
+
+          {variants.map(({ name, options }, index) => {
+
+            return (
+              <>
+                <Typography variant="body1" sx={{ fontWeight: "bold", color: "#000", mb:1 }}>
+                  {name}
+                </Typography>
+
+                <Box display="flex" gap={2} sx={{ mb: 2 }}>
+                  {options?.map((value) => (
+                    <Button
+                      key={value}
+                      variant={variantSelection[name] === value ? "contained" : "outlined"}
+                      color={variantSelection[name] === value ? "primary" : "primary"}
+                      sx={{ color: variantSelection[name] === value ? "#FFF" : "#000" }}
+                      onClick={() => handleVariantClick(name, value)}
+                    >
+                      {value}
+                    </Button>
+                  ))}
+                </Box>
+              </>
+            )
+
+          })}
+
         </Box>
 
 
         {/* Section 3: Quantity */}
         <Box sx={{ mb: 5 }}>
           <Typography variant="body1" sx={{ fontWeight: "bold", color: "#000", mb: 2 }}>
-            Qunatity
+            Quantity
           </Typography>
           <Box display="flex" alignItems="center" gap={2}>
             <Button
               variant="contained"
               color="primary"
               sx={{ width: "35px" }}
+              disabled={variantSelection?.quantityAvailable == 0}
               onClick={handleDecrement}
             >
               <RemoveIcon />
               variant="contained"
               color="primary"
               sx={{ width: "35px" }}
+              disabled={variantSelection?.quantityAvailable == 0}
               onClick={handleIncrement}
             >
               <AddIcon />

src/components/ProductList/ProductList.jsx

 
   }, [])
 
+  useEffect(() => {
+    if(products) console.log(products)
+  }, [products])
+
   const renderProduct = (id, img_url, title, collection, price, currency, extra_desc) => {
 
     return (

src/redux/slices/cartSlice.js

       })
       .addCase(fetchCart.fulfilled, (state, action) => {
         state.status = 'succeeded';
+        localStorage.setItem('amber-cart', JSON.stringify(action.payload));
         state.cart = action.payload;
       })
       .addCase(fetchCart.rejected, (state, action) => {

src/services/CartService.js

 
 // Get cart details
 const getCart = async (cartId) => {
+
   const query = `
-    query GetCart($cartId: ID!) {
-      cart(id: $cartId) {
+    {
+      cart(id: "${cartId}") {
         id
         createdAt
         updatedAt
-        lines(first: 10) {
+        cost {
+          totalAmount {
+            amount
+            currencyCode
+          }
+          subtotalAmount {
+            amount
+            currencyCode
+          }
+        }
+        lines(first: 99) {
           edges {
             node {
               id
             }
           }
         }
-        cost {
-          subtotalAmount {
-            amount
-            currencyCode
-          }
-          totalAmount {
-            amount
-            currencyCode
-          }
-          totalTaxAmount {
-            amount
-            currencyCode
-          }
-        }
       }
     }
   `;
 
-   
-  const variables = { cartId };
-  const { data } = await client.request(query, variables);
-  debugger
+  const { data } = await client.request(query);
   return data.cart;
 };
 
+
 // Update a line item's quantity
 const updateItemQuantity = async (cartId, lineId, quantity) => {
   const query = `

src/services/ProductService.js

             currencyCode
           }
         }
-        images(first: 1) {
+        images(first: 4) {
           nodes {
             src
             url
           }
         }
-        collections(first: 1) {
+        collections(first: 55) {
           nodes {
             title
           }
         }
-        variants(first: 5) {
+        variants(first: 200) {
           nodes {
             id
             title
           url
         }
       }
-      variants(first: 5) {
+      variants(first: 200) {
         nodes {
           id
           title
             amount
             currencyCode
           }
+          selectedOptions {
+            name
+            value
+          }
+          quantityAvailable
         }
       }
-      collections(first: 1) {
+      collections(first: 20) {
         nodes {
           title
         }