feat module 1,2,4 : product list display based on menu

src/components/ProductList/ProductList.jsx

@@ -16,6 +16,11 @@ import { fetchProducts } from "../../redux/slices/productSlice";
 import { useNavigate } from "react-router-dom";
 import defaultImage from "../../assets/images/default.png"
 import atomeLogo from "../../assets/images/atome.webp"
+import {
+  getAllowedCollectionTitleSet,
+  getRelatedProductTypes,
+  normalizeTitle,
+} from "../../config/menuCollections";
 
 //UTIL FUNCTION
 function getAllTags(data) {
@@ -127,36 +132,51 @@ const ProductList = ({ size = 99999 }) => {
     if (products?.length > 0) {
       let productType = sessionStorage.getItem("amber-select-product-type");
       const selectedCollectionTitles = getSelectedCollectionTitles();
+      const normalizedSelectedCollectionTitles = selectedCollectionTitles.map(normalizeTitle);
+      const allowedCollectionSet = getAllowedCollectionTitleSet(products, productType);
+      const relatedProductTypeSet = new Set(getRelatedProductTypes(productType));
+      const productMatchesSelectedType = (product) =>
+        relatedProductTypeSet.has(normalizeTitle(product?.productType));
+      const productHasVisibleCollection = (product) =>
+        product.collections?.some((data) =>
+          allowedCollectionSet.has(normalizeTitle(data?.title || ""))
+        );
 
       let newFilteredProducts = products.filter(
-        (product) => product.productType === productType
+        (product) => productMatchesSelectedType(product)
       );
 
       // Tags
       newFilteredProducts = newFilteredProducts.filter((product) => {
         if (tags == "all" || tags == "tag") {
-          return product.productType === productType;
+          return productMatchesSelectedType(product);
         } else {
           return (
-            product.productType === productType && product.tags.includes(tags)
+            productMatchesSelectedType(product) && product.tags.includes(tags)
           );
         }
       });
 
       // 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 (
-            product.productType === productType &&
-            product.collections.some((data) => selectedCollectionTitles.includes(data?.title))
+            productMatchesSelectedType(product) &&
+            product.collections.some((data) =>
+              normalizedSelectedCollectionTitles.includes(normalizeTitle(data?.title || ""))
+            )
           );
         }
 
         if (collection == "all" || collection == "collection") {
-          return product.productType === productType;
+          return productMatchesSelectedType(product);
         } else {
           return (
-            product.productType === productType &&
+            productMatchesSelectedType(product) &&
             product.collections.some((data) => data?.title === collection)
           );
         }