feat module 1,2,4 : change to dynamic navigation menu based on shopify collection

src/config/menuCollections.js

@@ -1,3 +1,19 @@
+export const MENU_GROUPS = {
+  casual: {
+    label: "Casual",
+    productType: "Apparel",
+  },
+  traditional: {
+    label: "Traditional",
+    productType: "Apparel",
+  },
+  essentials: {
+    label: "Essentials",
+    productType: "BEAUTY",
+    productTypes: ["BEAUTY", "HOME"],
+  },
+};
+
 export const NAV_MENU_STRUCTURE = [
   {
     productType: "Apparel",
@@ -5,55 +21,234 @@ export const NAV_MENU_STRUCTURE = [
     groups: [
       {
         label: "Casual",
-        children: [
-          { label: "ND X Marii for Amber", titles: ["DENIM ND X MARII FOR AMBER", "ND X MARII FOR AMBER"] },
-          { label: "Somewhere Somehow Someone", titles: ["SOMEWHERE SOMEHOW SOMEONE"] },
-          { label: "Flower Power", titles: ["FLOWER POWER"] },
-        ],
+        menuGroup: "casual",
+        // children: [
+        //   { label: "ND X Marii for Amber", titles: ["DENIM ND X MARII FOR AMBER", "ND X MARII FOR AMBER"] },
+        //   { label: "Somewhere Somehow Someone", titles: ["SOMEWHERE SOMEHOW SOMEONE"] },
+        //   { label: "Flower Power", titles: ["FLOWER POWER"] },
+        // ],
+        children: [],
       },
       {
         label: "Traditional",
-        children: [
-          // label is the display name, titles are the collection names that will be matched to the product collections in shopify
-          { label: "Eid's Time For Love", titles: ["EID'S TIME FOR LOVE"] },
-          { label: "Raya Romantics", titles: ["RAYA ROMANTICS", "RAYA ROMANTICS COLLECTION 2025"] },
-          { label: "Atma Sari", titles: ["ATMA SARI"] },
-          { label: "Oasis abaya", titles: ["OASIS ABAYA COLLECTION", "MIRAGE COLLECTION"] },
-        ],
+        menuGroup: "traditional",
+        // children: [
+        //   { label: "Eid's Time For Love", titles: ["EID'S TIME FOR LOVE"] },
+        //   { label: "Raya Romantics", titles: ["RAYA ROMANTICS", "RAYA ROMANTICS COLLECTION 2025"] },
+        //   { label: "Atma Sari", titles: ["ATMA SARI"] },
+        //   { label: "Oasis abaya", titles: ["OASIS ABAYA COLLECTION", "MIRAGE COLLECTION"] },
+        // ],
+        children: [],
       },
     ],
   },
   {
     productType: "BEAUTY",
     label: "Essentials",
-    children: [
-      { label: "Cosmetics", titles: ["COSMETICS"] },
-      { label: "Hand & Body Lotion", titles: ["HAND & BODY LOTION"] },
-    ],
+    menuGroup: "essentials",
+    // children: [
+    //   { label: "Cosmetics", titles: ["COSMETICS"] },
+    //   { label: "Hand & Body Lotion", titles: ["HAND & BODY LOTION"] },
+    // ],
+    children: [],
   },
 ];
 
-export const getMenuCollectionTitlesByProductType = () => {
-  return NAV_MENU_STRUCTURE.reduce((allowedCollections, menu) => {
-    const titles = [];
+// Utility function to normalize product titles
+export const normalizeTitle = (value = "") => `${value || ""}`.trim().toUpperCase();
+
+// Utility function to normalize menu group names
+export const normalizeMenuGroup = (value = "") =>
+  `${value || ""}`.trim().toLowerCase().replace(/\s+/g, "_");
+
+// Utility function to check if a substring exists in an array of strings
+export const getCollectionMenuGroup = (collection = {}) => {
+  return normalizeMenuGroup(
+    collection?.menuGroup ||
+      collection?.metafield?.value ||
+      collection?.metafields?.menu_group?.value ||
+      collection?.metafields?.find?.(
+        (metafield) =>
+          metafield?.namespace === "custom" && metafield?.key === "menu_group"
+      )?.value
+  );
+};
+
+// Utility function to get the key for a collection, prioritizing handle over title
+const getCollectionKey = (collection = {}) =>
+  collection?.handle || normalizeTitle(collection?.title || "");
+
+// Utility function to check if a product type matches the allowed product types in a group configuration
+const getProductTypeMatches = (productType, groupConfig = {}) => {
+  const targetProductTypes = groupConfig.productTypes || [groupConfig.productType];
+
+  return targetProductTypes
+    .map(normalizeTitle)
+    .includes(normalizeTitle(productType));
+};
+
+// Utility function to get menu collections by product type
+export const getMenuCollectionsByProductType = (products = []) => {
+  return products.reduce((menuCollections, product) => {
+    if (!product?.productType || !Array.isArray(product?.collections)) {
+      return menuCollections;
+    }
+
+    product.collections.forEach((collection) => {
+      const menuGroup = getCollectionMenuGroup(collection);
+
+      if (!menuGroup) return;
+
+      const groupConfig = MENU_GROUPS[menuGroup];
+
+      if (!groupConfig) return;
+
+      if (!getProductTypeMatches(product.productType, groupConfig)) {
+        return;
+      }
+
+      const productType = groupConfig.productType;
+      const key = getCollectionKey(collection);
+
+      if (!menuCollections[productType]) {
+        menuCollections[productType] = {};
+      }
+
+      if (!menuCollections[productType][menuGroup]) {
+        menuCollections[productType][menuGroup] = new Map();
+      }
+
+      if (!menuCollections[productType][menuGroup].has(key)) {
+        menuCollections[productType][menuGroup].set(key, {
+          ...collection,
+          menuGroup,
+        });
+      }
+    });
+
+    return menuCollections;
+  }, {});
+};
+
+// Utility function to map a collection to a menu item structure
+const mapCollectionToMenuItem = (collection = {}) => ({
+  label: collection?.title || "",
+  titles: collection?.title ? [collection.title] : [],
+  handles: collection?.handle ? [collection.handle] : [],
+  collection,
+});
+
+// Utility function to build the navigation menu from products
+export const buildNavMenuFromProducts = (products = []) => {
+  const menuCollections = getMenuCollectionsByProductType(products);
+
+  return NAV_MENU_STRUCTURE.map((menu) => {
+    if (menu.groups) {
+      return {
+        ...menu,
+        groups: menu.groups
+          .map((group) => ({
+            ...group,
+            children: Array.from(
+              menuCollections?.[menu.productType]?.[group.menuGroup]?.values?.() || []
+            ).map(mapCollectionToMenuItem),
+          }))
+          .filter((group) => group.children.length > 0),
+      };
+    }
+
+    if (menu.menuGroup) {
+      return {
+        ...menu,
+        children: Array.from(
+          menuCollections?.[menu.productType]?.[menu.menuGroup]?.values?.() || []
+        ).map(mapCollectionToMenuItem),
+      };
+    }
+
+    return menu;
+  }).filter((menu) => {
+    if (menu.groups) return menu.groups.length > 0;
+    if (menu.menuGroup) return (menu.children || []).length > 0;
+    return true;
+  });
+};
+
+// Utility function to get menu collection titles by product type
+export const getMenuCollectionTitlesByProductType = (products = []) => {
+  const menuSource = products.length > 0 ? buildNavMenuFromProducts(products) : NAV_MENU_STRUCTURE;
+
+  return menuSource.reduce((allowedCollections, menu) => {
+    const addTitles = (productTypes = [], titles = []) => {
+      productTypes.filter(Boolean).forEach((productType) => {
+        allowedCollections[productType] = [
+          ...(allowedCollections[productType] || []),
+          ...titles,
+        ];
+      });
+    };
 
     if (menu.groups) {
       menu.groups.forEach((group) => {
-        group.children.forEach((item) => {
+        const titles = [];
+
+        (group.children || []).forEach((item) => {
           titles.push(...(item.titles || []));
         });
+
+        const groupConfig = MENU_GROUPS[group.menuGroup];
+        addTitles(
+          groupConfig?.productTypes || [groupConfig?.productType || menu.productType],
+          titles
+        );
       });
     }
 
     if (menu.children) {
+      const titles = [];
+
       menu.children.forEach((item) => {
         titles.push(...(item.titles || []));
       });
+
+      const groupConfig = MENU_GROUPS[menu.menuGroup];
+      addTitles(
+        groupConfig?.productTypes || [groupConfig?.productType || menu.productType],
+        titles
+      );
     }
 
-    return {
-      ...allowedCollections,
-      [menu.productType]: titles,
-    };
+    return allowedCollections;
   }, {});
 };
+
+// Utility function to get a set of allowed collection titles for a given product type
+export const getAllowedCollectionTitleSet = (products = [], productType = "") => {
+  const allowedCollections = getMenuCollectionTitlesByProductType(products)[productType] || [];
+
+  return new Set(allowedCollections.map(normalizeTitle));
+};
+
+// Utility function to get related product types based on a given product type
+export const getRelatedProductTypes = (productType = "") => {
+  const normalizedProductType = normalizeTitle(productType);
+  const relatedProductTypes = Object.values(MENU_GROUPS)
+    .filter((group) => normalizeTitle(group.productType) === normalizedProductType)
+    .flatMap((group) => group.productTypes || [group.productType])
+    .map(normalizeTitle);
+
+  if (relatedProductTypes.length === 0) return [normalizedProductType];
+
+  return [...new Set(relatedProductTypes)];
+};
+
+// Utility function to check if a product is in the visible menu based on its collections and product type
+export const isProductInVisibleMenu = (product, products = []) => {
+  const allowedCollectionSet = getAllowedCollectionTitleSet(products, product?.productType);
+
+  if (allowedCollectionSet.size === 0) return false;
+
+  return product?.collections?.some((collection) =>
+    allowedCollectionSet.has(normalizeTitle(collection?.title || ""))
+  );
+};