feat module 1,2,4 : modified search bar result based on menu at navbar - search bar

src/components/Navbar/Navbar.jsx

@@ -29,6 +29,7 @@ import { Scrollbar, A11y, Navigation } from 'swiper/modules';
 
 import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+import { NAV_MENU_STRUCTURE as SHARED_NAV_MENU_STRUCTURE } from "../../config/menuCollections";
 
 function calculateTotalQuantity(cartItems) {
   return cartItems.reduce((total, item) => total + item.quantity, 0);
@@ -89,6 +90,9 @@ const getProductTypeMenuLabel = (productType = "") => {
   return normalizeTitle(productType) === "BEAUTY" ? "Essentials" : productType;
 };
 
+const NAV_MENU_STRUCTURE = SHARED_NAV_MENU_STRUCTURE;
+
+/*
 const NAV_MENU_STRUCTURE = [
   {
     productType: "Apparel",
@@ -97,7 +101,6 @@ const NAV_MENU_STRUCTURE = [
       {
         label: "Casual",
         children: [
-          // Local Shopify collection title is "DENIM ND X MARII FOR AMBER"; old/reference title: "ND X MARII FOR AMBER".
           { 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"] },
@@ -106,9 +109,7 @@ const NAV_MENU_STRUCTURE = [
       {
         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"] },
-          // Local Shopify collection title is "RAYA ROMANTICS"; old/reference title: "RAYA ROMANTICS COLLECTION 2025".
           { 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"] },
@@ -125,6 +126,7 @@ const NAV_MENU_STRUCTURE = [
     ],
   },
 ];
+*/
 
 const sortCollectionsByPriority = (collection = [], productType = "") => {
   const typeKey = (productType || "").trim().toLowerCase();

src/components/SearchProduct/SearchProduct.jsx

@@ -11,6 +11,7 @@ import {
   CardMedia,
 } from "@mui/material";
 import { useSelector } from "react-redux";
+import { getMenuCollectionTitlesByProductType } from "../../config/menuCollections";
 
 function doesSubstringExistInArray(array, substring) {
     
@@ -22,6 +23,47 @@ function doesSubstringExistInArray(array, substring) {
     return array.some(element => element.toLowerCase().includes(lowerCaseSubstring));
 }
 
+// Define allowed search collections for each product type
+const allowedSearchCollectionsByProductType = getMenuCollectionTitlesByProductType();
+
+/*
+Old standalone search allow-list. Current code uses src/config/menuCollections.js
+so search results automatically follow the navbar menu.
+
+const allowedSearchCollectionsByProductType = {
+  Apparel: [
+    "DENIM ND X MARII FOR AMBER",
+    "ND X MARII FOR AMBER",
+    "SOMEWHERE SOMEHOW SOMEONE",
+    "FLOWER POWER",
+    "EID'S TIME FOR LOVE",
+    "RAYA ROMANTICS",
+    "RAYA ROMANTICS COLLECTION 2025",
+    "ATMA SARI",
+    "OASIS ABAYA COLLECTION",
+    "MIRAGE COLLECTION",
+  ],
+  BEAUTY: [
+    "COSMETICS",
+    "HAND & BODY LOTION",
+  ],
+};
+*/
+
+const normalizeTitle = (value = "") => value.trim().toUpperCase();
+
+const isProductAllowedInSearch = (product) => {
+  const allowedCollections = allowedSearchCollectionsByProductType[product?.productType];
+
+  if (!allowedCollections) return false;
+
+  const allowedCollectionSet = new Set(allowedCollections.map(normalizeTitle));
+
+  return product?.collections?.some((collection) =>
+    allowedCollectionSet.has(normalizeTitle(collection?.title || ""))
+  );
+}
+
 const SearchProduct = ({ onClose }) => {
   const products = useSelector((state) => state.products.products.data);
   const [searchedProducts, setSearchedProducts] = useState([]);
@@ -31,7 +73,8 @@ const SearchProduct = ({ onClose }) => {
 
     if(searchQuery?.length < 2) return
 
-    let filteredProducts = products.filter((product) => {
+      // let filteredProducts = products.filter((product) => {
+      let filteredProducts = products.filter(isProductAllowedInSearch).filter((product) => {
 
       let title = product?.title?.toLowerCase();
       let search = searchQuery.toLowerCase();

src/config/menuCollections.js

@@ -0,0 +1,59 @@
+export const NAV_MENU_STRUCTURE = [
+  {
+    productType: "Apparel",
+    label: "APPAREL",
+    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"] },
+        ],
+      },
+      {
+        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"] },
+        ],
+      },
+    ],
+  },
+  {
+    productType: "BEAUTY",
+    label: "Essentials",
+    children: [
+      { label: "Cosmetics", titles: ["COSMETICS"] },
+      { label: "Hand & Body Lotion", titles: ["HAND & BODY LOTION"] },
+    ],
+  },
+];
+
+export const getMenuCollectionTitlesByProductType = () => {
+  return NAV_MENU_STRUCTURE.reduce((allowedCollections, menu) => {
+    const titles = [];
+
+    if (menu.groups) {
+      menu.groups.forEach((group) => {
+        group.children.forEach((item) => {
+          titles.push(...(item.titles || []));
+        });
+      });
+    }
+
+    if (menu.children) {
+      menu.children.forEach((item) => {
+        titles.push(...(item.titles || []));
+      });
+    }
+
+    return {
+      ...allowedCollections,
+      [menu.productType]: titles,
+    };
+  }, {});
+};