add discount price

src/components/Header/Header.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 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 (
@@ -32,6 +32,13 @@ const headerStyle = createStyles({
 
 const Header = () => {
 
+    const scrollToBottom = () => {
+        window.scrollTo({
+            top: document.body.scrollHeight,
+            behavior: 'smooth',
+        });
+    };
+
     return (
         <Container>
             <Box sx={{ color: "white", px: 6.1 }}>
@@ -39,11 +46,20 @@ const Header = () => {
                     <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

@@ -78,9 +78,15 @@ const ProductDetails = () => {
         })
 
         // 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 }),
@@ -107,8 +113,6 @@ const ProductDetails = () => {
 
   const handleVariantClick = (name, value) => {
 
-
-
     setVariantSelection({ ...variantSelection, [name]: value })
 
     setVariantSelection((prev) => {
@@ -118,9 +122,15 @@ const ProductDetails = () => {
       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 }),
@@ -247,7 +257,7 @@ const ProductDetails = () => {
                     sm: "0.875rem",
                     md: "1.1rem",
                   },
-                  mb:1
+                  mb: 1
                 }}>
                   {name}
                 </Typography>
@@ -286,7 +296,7 @@ const ProductDetails = () => {
               sm: "0.875rem",
               md: "1.1rem",
             },
-            mb:1
+            mb: 1
           }}>
             Quantity
           </Typography>

src/components/ProductHistoryList/ProductHistoryList.jsx

@@ -10,12 +10,12 @@ const ProductHistoryList = () => {
   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)
 
@@ -23,7 +23,22 @@ const ProductHistoryList = () => {
 
   }, [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 }}>
@@ -89,15 +104,34 @@ const ProductHistoryList = () => {
               }}>
                 {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>
@@ -112,17 +146,50 @@ const ProductHistoryList = () => {
       <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

@@ -173,9 +173,14 @@ const ProductList = ({ size = 99999 }) => {
     minPriceCurrency,
     maxPrice,
     maxPriceCurrency,
+    minDiscountPrice,
+    minDiscountPriceCurrency,
+    maxDiscountPrice,
+    maxDiscountPriceCurrency,
     extra_desc,
     selected = false
   ) => {
+
     return (
       <Grid
         className="animate__animated animate__fadeIn"
@@ -255,6 +260,7 @@ const ProductList = ({ size = 99999 }) => {
             >
               {title}
             </Typography>
+
             <Typography
               variant="body2"
               sx={{
@@ -264,10 +270,27 @@ const ProductList = ({ size = 99999 }) => {
                   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>
@@ -421,6 +444,8 @@ const ProductList = ({ size = 99999 }) => {
               collections,
               minVariantPrice,
               maxVariantPrice,
+              compareAtPriceRangeMinVariantPrice,
+              compareAtPriceRangeMaxVariantPrice,
               productType,
               variants,
               selected,
@@ -430,6 +455,12 @@ const ProductList = ({ size = 99999 }) => {
             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;
 
@@ -443,6 +474,10 @@ const ProductList = ({ size = 99999 }) => {
                 minPriceCurrency,
                 maxPrice,
                 maxPriceCurrency,
+                minDiscountPrice,
+                minDiscountPriceCurrency,
+                maxDiscountPrice,
+                maxDiscountPriceCurrency,
                 "",
                 selected
               );

src/components/ProductSelected/ProductSelected.jsx

@@ -45,7 +45,22 @@ const ProductSelected = () => {
   };
 
 
-  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 }}>
@@ -116,15 +131,34 @@ const ProductSelected = () => {
               }}>
                 {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>
@@ -161,7 +195,7 @@ const ProductSelected = () => {
           }}
           onClick={swipeToLeft}
         />
-        <Typography variant="h4" sx={{ mx: 2, fontWeight:"50" }}>
+        <Typography variant="h4" sx={{ mx: 2, fontWeight: "50" }}>
           NEW IN
         </Typography>
 
@@ -189,19 +223,51 @@ const ProductSelected = () => {
         >
           {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

@@ -33,6 +33,10 @@ const ProductSuggestion = () => {
     minPriceCurrency,
     maxPrice,
     maxPriceCurrency,
+    minDiscountPrice,
+    minDiscountPriceCurrency,
+    maxDiscountPrice,
+    maxDiscountPriceCurrency,
     extra_desc,
     selected = false
   ) => {
@@ -125,10 +129,25 @@ const ProductSuggestion = () => {
                     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>
@@ -149,6 +168,8 @@ const ProductSuggestion = () => {
             collections,
             minVariantPrice,
             maxVariantPrice,
+            compareAtPriceRangeMinVariantPrice,
+            compareAtPriceRangeMaxVariantPrice,
             productType,
             variants,
             selected,
@@ -158,6 +179,12 @@ const ProductSuggestion = () => {
           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;
 
@@ -170,6 +197,10 @@ const ProductSuggestion = () => {
             minPriceCurrency,
             maxPrice,
             maxPriceCurrency,
+            minDiscountPrice,
+            minDiscountPriceCurrency,
+            maxDiscountPrice,
+            maxDiscountPriceCurrency,
             "",
             selected
           );

src/services/ProductService.js

@@ -35,6 +35,16 @@ const getProducts = async () => {
               currencyCode
             }
           }
+          compareAtPriceRange {
+            maxVariantPrice {
+              currencyCode
+              amount
+            }
+            minVariantPrice {
+              amount
+              currencyCode
+            }
+          }
           images(first: 4) {
             nodes {
               url
@@ -143,6 +153,10 @@ const getProduct = async (handle = "") => {
             value
           }
           quantityAvailable
+          compareAtPrice {
+            currencyCode
+            amount
+          }
         }
       }
       metafield(key: "selected", namespace: "custom") {

src/utils/helpers.js

@@ -4,7 +4,7 @@
 export const formatProductData = (product) => {
 
     if(!product) return
-
+    
     return {
         id: product?.id || null,
         handle: product?.handle || "",
@@ -17,8 +17,11 @@ export const formatProductData = (product) => {
         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,
+        
     }
 
 }