feat : change square image and redirect page at homepage

src/components/ProductList/ProductList.jsx

@@ -42,7 +42,18 @@ function getAllCollection(data) {
 function getSelectedCollectionTitles() {
   const storedCollections = sessionStorage.getItem("amber-select-collections");
 
-  if (!storedCollections) return [];
+  if (!storedCollections) {
+    const storedCollection = sessionStorage.getItem("amber-select-collection");
+
+    if (!storedCollection) return [];
+
+    try {
+      const collection = JSON.parse(storedCollection);
+      return collection?.title ? [collection.title] : [];
+    } catch (error) {
+      return [];
+    }
+  }
 
   try {
     const collectionTitles = JSON.parse(storedCollections);
@@ -159,10 +170,6 @@ const ProductList = ({ size = 99999 }) => {
 
       // Collection
       newFilteredProducts = newFilteredProducts.filter((product) => {
-        // Product list now follows collections exposed by the Shopify collection
-        // custom.menu_group metafield. 
-        if (!productHasVisibleCollection(product)) return false;
-
         if (selectedCollectionTitles.length > 0) {
           return (
             productMatchesSelectedType(product) &&
@@ -172,12 +179,18 @@ const ProductList = ({ size = 99999 }) => {
           );
         }
 
+        // Product list now follows collections exposed by the Shopify collection
+        // custom.menu_group metafield.
+        if (!productHasVisibleCollection(product)) return false;
+
         if (collection == "all" || collection == "collection") {
           return productMatchesSelectedType(product);
         } else {
           return (
             productMatchesSelectedType(product) &&
-            product.collections.some((data) => data?.title === collection)
+            product.collections.some((data) =>
+              normalizeTitle(data?.title || "") === normalizeTitle(collection)
+            )
           );
         }
       });

src/components/ProductType/ProductType.jsx

@@ -5,8 +5,8 @@ const getProductTypeValue = (title = "") => {
   return title?.trim()?.toUpperCase() === "ESSENTIALS" ? "BEAUTY" : title;
 }
 
-const ProductType = ({ title, img_url, clickable = true }) => {
-  const productTypeValue = getProductTypeValue(title);
+const ProductType = ({ title, img_url, clickable = true, productType, collectionTitles = [], collectionImage }) => {
+const productTypeValue = productType || getProductTypeValue(title);
 
   return (
     <Box
@@ -49,9 +49,17 @@ const ProductType = ({ title, img_url, clickable = true }) => {
           sessionStorage.setItem('amber-select-product-type', productTypeValue)
           sessionStorage.removeItem('amber-select-collection')
           sessionStorage.removeItem('amber-select-collections')
-          // if (title?.trim()?.toUpperCase() === "ESSENTIALS") {
-          //   sessionStorage.setItem('amber-select-collections', JSON.stringify(["COSMETICS", "HAND & BODY LOTION"]))
-          // }
+
+          if (collectionTitles.length > 0) {
+            sessionStorage.setItem('amber-select-collection', JSON.stringify({
+              title,
+              image: {
+                url: collectionImage || img_url
+              }
+            }))
+            sessionStorage.setItem('amber-select-collections', JSON.stringify(collectionTitles))
+          }
+
           window.location.href = '/products'
         } : undefined}
       >

src/pages/Home.jsx

@@ -11,9 +11,12 @@ import VideoAds from '../components/VideoAds'
 import ProductType from '../components/ProductType';
 // import NewsLetter from '../components/NewsLetter';
 import ProductService from "../services/ProductService"
-import AmberHomeWallpaper from "../assets/images/amberHomeWallpaper.webp";
-import AmberBeautyWallpaper from "../assets/images/amberBeautyWallpaper.webp";
+// import AmberHomeWallpaper from "../assets/images/amberHomeWallpaper.webp";
+import AmberHomeWallpaper from "../assets/images/squarebanneramberessentials.jpeg";
+// import AmberBeautyWallpaper from "../assets/images/amberBeautyWallpaper.webp";
+import AmberBeautyWallpaper from "../assets/images/squarebanneramberbeauty.jpeg";
 import AmberClothing from "../assets/images/MAINHEADER-13.webp"
+const AmberCosmeticsHeader = "https://cdn.shopify.com/s/files/1/0919/4592/6946/collections/Mask_Group_-4.webp?v=1737761743"
 
 const nowInMalaysia = () => new Date(new Date().toLocaleString("en-US", { timeZone: "Asia/Kuala_Lumpur" }))
 const ioiStoreHideFromDate = new Date("2026-08-01T00:00:00+08:00")
@@ -78,7 +81,7 @@ const Home = () => {
             </Grid>
             <Grid size={{xs:12, md:6}}>
               {/* <ProductType title={'BEAUTY'} img_url={AmberBeautyWallpaper}/> */}
-              <ProductType title={'Essentials'} img_url={AmberBeautyWallpaper}/>
+              <ProductType title={'Cosmetics'} img_url={AmberBeautyWallpaper} productType={'BEAUTY'} collectionTitles={['COSMETIC']} collectionImage={AmberCosmeticsHeader}/>
             </Grid>
             <Grid size={{xs:12, md:6}}>
               {/* <ProductType title={'HOME'} img_url={AmberHomeWallpaper} /> */}