add discount price

src/components/Header/Header.jsx

 import { createStyles, styled } from '@mui/material/styles';
 import { Box, Typography, Link } from '@mui/material';
 import InstagramIcon from '@mui/icons-material/Instagram';
-import WhatsAppIcon from '@mui/icons-material/WhatsApp'; 
+import WhatsAppIcon from '@mui/icons-material/WhatsApp';
 
 const TikTokIcon = ({ color = "#000000" }) => {
     return (
 
 const Header = () => {
 
+    const scrollToBottom = () => {
+        window.scrollTo({
+            top: document.body.scrollHeight,
+            behavior: 'smooth',
+        });
+    };
+
     return (
         <Container>
             <Box sx={{ color: "white", px: 6.1 }}>
                     <WhatsAppIcon sx={{ ":hover": { color: "gray" } }} style={headerStyle.icon} onClick={() => { window.open('https://wa.me/+60172282072', '_blank') }} />
                     <InstagramIcon sx={{ ":hover": { color: "gray" } }} style={headerStyle.icon} onClick={() => { window.open('https://www.instagram.com/amber.officials/?hl=en', '_blank') }} />
                     <a onClick={() => { window.open('https://www.tiktok.com/@ambermodeofficial', '_blank') }}>
-                    <TikTokIcon color={"#FFF"}/>
+                        <TikTokIcon color={"#FFF"} />
                     </a>
-                    
+
                 </Box>
-                <Typography variant="body2" sx={{ position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)" }}>Don’t miss out on our next big thing! Click <a style={{ color: "white", textDecoration: "underline", cursor: 'pointer' }}> here</a> to subcribe now.</Typography>
+                <Typography variant="body2" sx={{ position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)" }}>Don’t miss out on our next big thing! Click  <span
+                    onClick={scrollToBottom}
+                    style={{
+                        color: 'white',
+                        textDecoration: 'underline',
+                        cursor: 'pointer',
+                    }}
+                >
+                    here
+                </span> to subcribe now.</Typography>
             </Box>
         </Container>
     );

src/components/ProductDetails/ProductDetails.jsx

         })
 
         // find variant price if it all match initial variant selection
-        for (const { selectedOptions, price, id, quantityAvailable } of productVariants) {
+        for (const { selectedOptions, price, compareAtPrice, id, quantityAvailable } of productVariants) {
+
           let { amount, currencyCode } = price;
 
+          if (compareAtPrice?.amount > 0) {
+            amount = compareAtPrice?.amount
+            currencyCode = compareAtPrice?.currencyCode
+          }
+
           // Convert array to object
           const optionsObject = selectedOptions.reduce(
             (a, { name, value }) => ({ ...a, [name]: value }),
 
   const handleVariantClick = (name, value) => {
 
-
-
     setVariantSelection({ ...variantSelection, [name]: value })
 
     setVariantSelection((prev) => {
       let productVariants = product?.variants
 
       // find variant price if it all match initial variant selection
-      for (const { selectedOptions, price, id, quantityAvailable } of productVariants) {
+      for (const { selectedOptions, price, compareAtPrice, id, quantityAvailable } of productVariants) {
+
         let { amount, currencyCode } = price;
 
+        if (compareAtPrice?.amount > 0) {
+          amount = compareAtPrice?.amount
+          currencyCode = compareAtPrice?.currencyCode
+        }
+
         // Convert array to object
         const optionsObject = selectedOptions.reduce(
           (a, { name, value }) => ({ ...a, [name]: value }),
                     sm: "0.875rem",
                     md: "1.1rem",
                   },
-                  mb:1
+                  mb: 1
                 }}>
                   {name}
                 </Typography>
               sm: "0.875rem",
               md: "1.1rem",
             },
-            mb:1
+            mb: 1
           }}>
             Quantity
           </Typography>

src/components/ProductHistoryList/ProductHistoryList.jsx

   const products = useSelector((state) => state.products.products.data); // only used as referenced
   const [filterProducts, setFilterProducts] = useState([])
 
-  useEffect(()=>{ 
+  useEffect(() => {
 
     if (products.length > 0 && localStorage.getItem('amber-product-history')) {
 
       const productHandleList = JSON.parse(localStorage.getItem('amber-product-history')) || []
-      const selectedProducts = products.filter(({ handle }) => productHandleList.includes(handle) ) || []
+      const selectedProducts = products.filter(({ handle }) => productHandleList.includes(handle)) || []
 
       setFilterProducts(selectedProducts)
 
 
   }, [products])
 
-  const renderProduct = (handle, img_url, title, collection_name, minPrice, minPriceCurrency, maxPrice, maxPriceCurrency, extra_desc, selected = false) => {
+  const renderProduct = (
+    handle,
+    img_url,
+    title,
+    collection_name,
+    minPrice,
+    minPriceCurrency,
+    maxPrice,
+    maxPriceCurrency,
+    minDiscountPrice,
+    minDiscountPriceCurrency,
+    maxDiscountPrice,
+    maxDiscountPriceCurrency,
+    extra_desc,
+    selected = false
+  ) => {
 
     return (
       <Grid className="animate__animated animate__fadeIn" item size={{ xs: 6, sm: 6, md: 3 }}>
               }}>
                 {title}
               </Typography>
-              <Typography variant="body2" sx={{
-                fontWeight: "100", fontSize: {
-                  xs: "0.73rem",
-                  sm: "0.73rem",
-                  md: "0.875rem",
-                },
-              }}>
+              <Typography
+                variant="body2"
+                sx={{
+                  fontWeight: "100",
+                  fontSize: {
+                    xs: "0.73rem",
+                    sm: "0.73rem",
+                    md: "0.875rem",
+                  },
+                  textDecoration: (minDiscountPrice > 0) ? "line-through" : "none"
+                }}
+              >
                 {`${minPriceCurrency} ${parseFloat(minPrice).toFixed(2)}`}
               </Typography>
+
+              {(minDiscountPrice > 0) && <Typography
+                variant="body2"
+                sx={{
+                  fontWeight: "100",
+                  fontSize: {
+                    xs: "0.73rem",
+                    sm: "0.73rem",
+                    md: "0.875rem",
+                  },
+                }}
+              >
+                {`${minDiscountPriceCurrency} ${parseFloat(minDiscountPrice).toFixed(2)}`}
+              </Typography>}
             </Box>
           </Box>
         </a>
       <Grid container spacing={1} columns={12}>
         {filterProducts.map((product, index) => {
 
-          let { handle, title, images, collections, minVariantPrice, maxVariantPrice, productType, variants, selected } = product
+          let {
+            handle,
+            title,
+            images,
+            collections,
+            minVariantPrice,
+            maxVariantPrice,
+            compareAtPriceRangeMinVariantPrice,
+            compareAtPriceRangeMaxVariantPrice,
+            productType,
+            variants,
+            selected,
+          } = product;
 
           let minPrice = minVariantPrice.amount
           let minPriceCurrency = minVariantPrice.currencyCode
           let maxPrice = maxVariantPrice.amount
           let maxPriceCurrency = maxVariantPrice.currencyCode
+          // SHOULD BE THE DISCOUNTED PRICE
+          let minDiscountPrice = compareAtPriceRangeMinVariantPrice.amount;
+          let minDiscountPriceCurrency = compareAtPriceRangeMinVariantPrice.currencyCode;
+          let maxDiscountPrice = compareAtPriceRangeMaxVariantPrice.amount;
+          let maxDiscountPriceCurrency = compareAtPriceRangeMaxVariantPrice.currencyCode;
+
           let img_url = images[0]?.url || defaultImage
           let collection_name = collections[0]?.title
 
           if (index < 4) {
-            return renderProduct(handle, img_url, title, collection_name, minPrice, minPriceCurrency, maxPrice, maxPriceCurrency, "", selected)
+            return renderProduct(
+              handle,
+              img_url,
+              title,
+              collection_name,
+              minPrice,
+              minPriceCurrency,
+              maxPrice,
+              maxPriceCurrency,
+              minDiscountPrice,
+              minDiscountPriceCurrency,
+              maxDiscountPrice,
+              maxDiscountPriceCurrency,
+              "",
+              selected
+            );
           }
 
         })}

src/components/ProductList/ProductList.jsx

     minPriceCurrency,
     maxPrice,
     maxPriceCurrency,
+    minDiscountPrice,
+    minDiscountPriceCurrency,
+    maxDiscountPrice,
+    maxDiscountPriceCurrency,
     extra_desc,
     selected = false
   ) => {
+
     return (
       <Grid
         className="animate__animated animate__fadeIn"
             >
               {title}
             </Typography>
+
             <Typography
               variant="body2"
               sx={{
                   sm: "0.73rem",
                   md: "0.875rem",
                 },
+                textDecoration: (minDiscountPrice > 0) ? "line-through" : "none"
               }}
             >
               {`${minPriceCurrency} ${parseFloat(minPrice).toFixed(2)}`}
             </Typography>
+
+            {(minDiscountPrice > 0) && <Typography
+              variant="body2"
+              sx={{
+                fontWeight: "100",
+                fontSize: {
+                  xs: "0.73rem",
+                  sm: "0.73rem",
+                  md: "0.875rem",
+                },
+              }}
+            >
+              {`${minDiscountPriceCurrency} ${parseFloat(minDiscountPrice).toFixed(2)}`}
+            </Typography>}
+            
+
           </Box>
         </Box>
       </Grid>
               collections,
               minVariantPrice,
               maxVariantPrice,
+              compareAtPriceRangeMinVariantPrice,
+              compareAtPriceRangeMaxVariantPrice,
               productType,
               variants,
               selected,
             let minPriceCurrency = minVariantPrice.currencyCode;
             let maxPrice = maxVariantPrice.amount;
             let maxPriceCurrency = maxVariantPrice.currencyCode;
+            // SHOULD BE THE DISCOUNTED PRICE
+            let minDiscountPrice = compareAtPriceRangeMinVariantPrice.amount;
+            let minDiscountPriceCurrency = compareAtPriceRangeMinVariantPrice.currencyCode;
+            let maxDiscountPrice = compareAtPriceRangeMaxVariantPrice.amount;
+            let maxDiscountPriceCurrency = compareAtPriceRangeMaxVariantPrice.currencyCode;
+
             let img_url = images[0]?.url || defaultImage;
             let collection_name = collections[0]?.title;
 
                 minPriceCurrency,
                 maxPrice,
                 maxPriceCurrency,
+                minDiscountPrice,
+                minDiscountPriceCurrency,
+                maxDiscountPrice,
+                maxDiscountPriceCurrency,
                 "",
                 selected
               );

src/components/ProductSelected/ProductSelected.jsx

   };
 
 
-  const renderProduct = (handle, img_url, title, collection_name, minPrice, minPriceCurrency, maxPrice, maxPriceCurrency, extra_desc) => {
+  const renderProduct = (
+    handle,
+    img_url,
+    title,
+    collection_name,
+    minPrice,
+    minPriceCurrency,
+    maxPrice,
+    maxPriceCurrency,
+    minDiscountPrice,
+    minDiscountPriceCurrency,
+    maxDiscountPrice,
+    maxDiscountPriceCurrency,
+    extra_desc,
+    selected = false
+  ) => {
 
     return (
       <Grid item size={{ xs: 6, sm: 6, md: 3 }}>
               }}>
                 {title}
               </Typography>
-              <Typography variant="body2" sx={{
-                fontWeight: "100", fontSize: {
-                  xs: "0.73rem",
-                  sm: "0.73rem",
-                  md: "0.875rem",
-                },
-              }}>
+              <Typography
+                variant="body2"
+                sx={{
+                  fontWeight: "100",
+                  fontSize: {
+                    xs: "0.73rem",
+                    sm: "0.73rem",
+                    md: "0.875rem",
+                  },
+                  textDecoration: (minDiscountPrice > 0) ? "line-through" : "none"
+                }}
+              >
                 {`${minPriceCurrency} ${parseFloat(minPrice).toFixed(2)}`}
               </Typography>
+
+              {(minDiscountPrice > 0) && <Typography
+                variant="body2"
+                sx={{
+                  fontWeight: "100",
+                  fontSize: {
+                    xs: "0.73rem",
+                    sm: "0.73rem",
+                    md: "0.875rem",
+                  },
+                }}
+              >
+                {`${minDiscountPriceCurrency} ${parseFloat(minDiscountPrice).toFixed(2)}`}
+              </Typography>}
             </Box>
           </Box>
         </a>
           }}
           onClick={swipeToLeft}
         />
-        <Typography variant="h4" sx={{ mx: 2, fontWeight:"50" }}>
+        <Typography variant="h4" sx={{ mx: 2, fontWeight: "50" }}>
           NEW IN
         </Typography>
 
         >
           {filterProducts.map((product, index) => {
 
-            let { handle, title, images, collections, minVariantPrice, maxVariantPrice, productType, variants } = product
+            let {
+              handle,
+              title,
+              images,
+              collections,
+              minVariantPrice,
+              maxVariantPrice,
+              compareAtPriceRangeMinVariantPrice,
+              compareAtPriceRangeMaxVariantPrice,
+              productType,
+              variants,
+              selected,
+            } = product;
 
             let minPrice = minVariantPrice.amount
             let minPriceCurrency = minVariantPrice.currencyCode
             let maxPrice = maxVariantPrice.amount
             let maxPriceCurrency = maxVariantPrice.currencyCode
+            // SHOULD BE THE DISCOUNTED PRICE
+            let minDiscountPrice = compareAtPriceRangeMinVariantPrice.amount;
+            let minDiscountPriceCurrency = compareAtPriceRangeMinVariantPrice.currencyCode;
+            let maxDiscountPrice = compareAtPriceRangeMaxVariantPrice.amount;
+            let maxDiscountPriceCurrency = compareAtPriceRangeMaxVariantPrice.currencyCode;
 
             let img_url = images[0]?.url || defaultImage
             let collection_name = collections[0]?.title
 
             return (
               <SwiperSlide>
-                {renderProduct(handle, img_url, title, collection_name, minPrice, minPriceCurrency, maxPrice, maxPriceCurrency, "")}
+                {renderProduct(
+                  handle,
+                  img_url,
+                  title,
+                  collection_name,
+                  minPrice,
+                  minPriceCurrency,
+                  maxPrice,
+                  maxPriceCurrency,
+                  minDiscountPrice,
+                  minDiscountPriceCurrency,
+                  maxDiscountPrice,
+                  maxDiscountPriceCurrency,
+                  "",
+                  selected
+                )}
               </SwiperSlide>
             )
 

src/components/ProductSuggestion/ProductSuggestion.jsx

     minPriceCurrency,
     maxPrice,
     maxPriceCurrency,
+    minDiscountPrice,
+    minDiscountPriceCurrency,
+    maxDiscountPrice,
+    maxDiscountPriceCurrency,
     extra_desc,
     selected = false
   ) => {
                     sm: "0.73rem",
                     md: "0.875rem",
                   },
+                  textDecoration: (minDiscountPrice > 0) ? "line-through" : "none"
                 }}
               >
                 {`${minPriceCurrency} ${parseFloat(minPrice).toFixed(2)}`}
               </Typography>
+
+              {(minDiscountPrice > 0) && <Typography
+                variant="body2"
+                sx={{
+                  fontWeight: "100",
+                  fontSize: {
+                    xs: "0.73rem",
+                    sm: "0.73rem",
+                    md: "0.875rem",
+                  },
+                }}
+              >
+                {`${minDiscountPriceCurrency} ${parseFloat(minDiscountPrice).toFixed(2)}`}
+              </Typography>}
             </Box>
           </Box>
         </a>
             collections,
             minVariantPrice,
             maxVariantPrice,
+            compareAtPriceRangeMinVariantPrice,
+            compareAtPriceRangeMaxVariantPrice,
             productType,
             variants,
             selected,
           let minPriceCurrency = minVariantPrice.currencyCode;
           let maxPrice = maxVariantPrice.amount;
           let maxPriceCurrency = maxVariantPrice.currencyCode;
+          // SHOULD BE THE DISCOUNTED PRICE
+          let minDiscountPrice = compareAtPriceRangeMinVariantPrice.amount;
+          let minDiscountPriceCurrency = compareAtPriceRangeMinVariantPrice.currencyCode;
+          let maxDiscountPrice = compareAtPriceRangeMaxVariantPrice.amount;
+          let maxDiscountPriceCurrency = compareAtPriceRangeMaxVariantPrice.currencyCode;
+
           let img_url = images[0]?.url || defaultImage
           let collection_name = collections[0]?.title;
 
             minPriceCurrency,
             maxPrice,
             maxPriceCurrency,
+            minDiscountPrice,
+            minDiscountPriceCurrency,
+            maxDiscountPrice,
+            maxDiscountPriceCurrency,
             "",
             selected
           );

src/services/ProductService.js

               currencyCode
             }
           }
+          compareAtPriceRange {
+            maxVariantPrice {
+              currencyCode
+              amount
+            }
+            minVariantPrice {
+              amount
+              currencyCode
+            }
+          }
           images(first: 4) {
             nodes {
               url
             value
           }
           quantityAvailable
+          compareAtPrice {
+            currencyCode
+            amount
+          }
         }
       }
       metafield(key: "selected", namespace: "custom") {

src/utils/helpers.js

 export const formatProductData = (product) => {
 
     if(!product) return
-
+    
     return {
         id: product?.id || null,
         handle: product?.handle || "",
         selected: (product?.metafield?.key == "selected") ? product?.metafield?.value == "true" : false, // cause I want to have a true false value, somehow BE return text value "true", thus == used to convert it to proper boolean value
         minVariantPrice: product?.priceRange?.minVariantPrice || {amount:0 , currencyCode:''},
         maxVariantPrice: product?.priceRange?.maxVariantPrice || {amount:0 , currencyCode:''},
+        compareAtPriceRangeMinVariantPrice: product?.compareAtPriceRange?.minVariantPrice || {amount:0 , currencyCode:''},
+        compareAtPriceRangeMaxVariantPrice: product?.compareAtPriceRange?.maxVariantPrice || {amount:0 , currencyCode:''},
         productType: product?.productType || null,
-        variants: product?.variants?.nodes || null
+        variants: product?.variants?.nodes || null,
+        
     }
 
 }