@bonlineza/luxity-lib 2.35.9 → 2.36.0

package/LuxityMobileHeader.js

@@ -197,7 +197,7 @@
       src: accountIcon,
       alt: "close-icon",
       className: "side-nav__menu-icon"
-    }), "Account"))), /*#__PURE__*/React__default.createElement("div", {
+    }), "Account"))), onInterestClick && /*#__PURE__*/React__default.createElement("div", {
       className: "side-nav__menu-item"
     }, /*#__PURE__*/React__default.createElement("button", {
       type: "button",
@@ -433,6 +433,7 @@
       className: "side-nav__element"
     }, "All Brands"), !!brandsList.length && brandsList.map(function (brand) {
       return /*#__PURE__*/React__default.createElement(LinkComponent, {
+        key: brand.slug,
         href: "".concat(productUrl, "/").concat(categorySlug === 'new' ? 'brands' : categorySlug, "/").concat(brand.slug),
         onClick: handleLinkClick,
         className: "side-nav__element"
@@ -444,33 +445,10 @@
     var _categories$filter;
 
     return (_categories$filter = categories === null || categories === void 0 ? void 0 : categories.filter(function (category) {
-      return category.name !== name;
+      return category.name.toLowerCase() !== name.toLowerCase();
     })) !== null && _categories$filter !== void 0 ? _categories$filter : [];
   };
 
-  var categories = {
-    shoes: {
-      name: 'Shoes',
-      slug: 'shoes'
-    },
-    bags: {
-      name: 'Bags',
-      slug: 'bags'
-    },
-    clothing: {
-      name: 'Clothing',
-      slug: 'apparel'
-    },
-    watches: {
-      name: 'Watches',
-      slug: 'watches'
-    },
-    accessories: {
-      name: 'Accessories',
-      slug: 'accessories'
-    }
-  };
-
   var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
   /* position relative is required for the Body element to be positioned correctly */
 
@@ -689,13 +667,13 @@
         categoryElements = _ref.categoryElements,
         showSideNav = _ref.showSideNav,
         onMenuClick = _ref.onMenuClick,
-        menuData = _ref.menuData,
         currency = _ref.currency,
         currencyOptions = _ref.currencyOptions,
         onCurrencyChange = _ref.onCurrencyChange,
         isCurrencySelectionDisabled = _ref.isCurrencySelectionDisabled,
         tooltipContent = _ref.tooltipContent,
-        LinkComponent = _ref.LinkComponent;
+        LinkComponent = _ref.LinkComponent,
+        categoryConfig = _ref.categoryConfig;
 
     var _useState = React.useState(false),
         _useState2 = _slicedToArray(_useState, 2),
@@ -712,16 +690,7 @@
         loading = _useState6[0],
         setLoading = _useState6[1];
 
-    var _useState7 = React.useState({
-      latestArrivals: [],
-      bags: [],
-      shoes: [],
-      apparel: [],
-      accessories: [],
-      watches: [],
-      accessoriesCategories: [],
-      apparelStyles: []
-    }),
+    var _useState7 = React.useState({}),
         _useState8 = _slicedToArray(_useState7, 2),
         dropdownData = _useState8[0],
         setDropdownData = _useState8[1];
@@ -768,25 +737,93 @@
 
     React.useMemo(function () {
       setLoading(true);
-      axios.get("".concat(menuData)).then(function (_ref2) {
+      axios.get("".concat(categoryConfig.menuData)).then(function (_ref2) {
         var data = _ref2.data;
         setLoading(false);
-        setDropdownData(function (prev) {
-          return _objectSpread2(_objectSpread2({}, prev), {}, {
-            latestArrivals: data.latest_arrivals,
-            bags: data.bags,
-            shoes: data.shoes,
-            apparel: data.apparel,
-            accessories: data.accessories,
-            watches: data.watches,
-            accessoriesCategories: data.accessories_categories,
-            apparelStyles: data.apparel_styles
-          });
-        });
+        setDropdownData(data);
       }).catch(function () {
         return setHasError(true);
       });
-    }, [menuData]);
+    }, [categoryConfig.menuData]);
+
+    var renderMenuItems = function renderMenuItems() {
+      return categoryConfig.categories.map(function (category) {
+        var title = category.title,
+            categorySlug = category.categorySlug;
+        var slug = categorySlug;
+
+        if (categorySlug === 'brands') {
+          slug = 'new';
+        }
+
+        return /*#__PURE__*/React__default.createElement("div", {
+          className: "side-nav__menu-item",
+          key: slug
+        }, /*#__PURE__*/React__default.createElement("button", {
+          type: "button",
+          className: "side-nav__menu-title-wrapper",
+          onClick: function onClick() {
+            return onSubMenuClick(slug);
+          }
+        }, /*#__PURE__*/React__default.createElement("span", {
+          className: "side-nav__menu-title"
+        }, title), /*#__PURE__*/React__default.createElement("img", {
+          src: accordionIcon,
+          alt: "accordion-icon",
+          className: "side-nav__accordion-icon"
+        })));
+      });
+    };
+
+    var renderDropdownLinks = function renderDropdownLinks() {
+      return categoryConfig.categories.map(function (category) {
+        var categorySlug = category.categorySlug,
+            categoryName = category.categoryName,
+            elementsKey = category.elementsKey,
+            subCategoryElementsKey = category.subCategoryElementsKey,
+            styleElementsKey = category.styleElementsKey;
+        var categoryElementsProcessed = categoryElements;
+
+        if (subCategoryElementsKey && dropdownData[subCategoryElementsKey]) {
+          // show subcategory elements
+          categoryElementsProcessed = removeCategoryByName(dropdownData[subCategoryElementsKey], categoryName);
+        } else if (styleElementsKey && dropdownData[styleElementsKey]) {
+          categoryElementsProcessed = addCategoryToElements(dropdownData[styleElementsKey], categorySlug);
+        } else {
+          categoryElementsProcessed = addCategoryToElements(categoryElementsProcessed, categorySlug);
+        }
+
+        var subMenuTitle = 'Brands';
+
+        if (categorySlug !== 'brands') {
+          subMenuTitle = "".concat(categoryName, " Brands");
+        }
+
+        var subMenu = categorySlug;
+
+        if (subMenu === 'brands') {
+          subMenu = 'new';
+        }
+
+        return /*#__PURE__*/React__default.createElement(BrandsDropDown, {
+          key: categorySlug,
+          subMenuOpen: subMenuOpen && displayedSubMenu === subMenu,
+          onBackClick: onBackClick,
+          backIcon: backIcon,
+          subMenuCategoryTitle: "Department",
+          productUrl: productUrl,
+          categoryElements: categoryElementsProcessed,
+          subMenuBrandsTitle: subMenuTitle,
+          brandsList: dropdownData[elementsKey],
+          categorySlug: displayedSubMenu,
+          isLoading: loading,
+          hasError: hasError,
+          onCloseSideNav: onCloseSideNav,
+          LinkComponent: LinkComponent
+        });
+      });
+    };
+
     return /*#__PURE__*/React__default.createElement("div", {
       className: "side-nav"
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -807,92 +844,9 @@
       className: "side-nav__close-icon"
     })), /*#__PURE__*/React__default.createElement("div", {
       className: "side-nav__menu-items-wrapper"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "side-nav__menu-item"
-    }, /*#__PURE__*/React__default.createElement("button", {
-      type: "button",
-      className: "side-nav__menu-title-wrapper",
-      onClick: function onClick() {
-        return onSubMenuClick('new');
-      }
-    }, /*#__PURE__*/React__default.createElement("span", {
-      className: "side-nav__menu-title"
-    }, "New"), /*#__PURE__*/React__default.createElement("img", {
-      src: accordionIcon,
-      alt: "accordion-icon",
-      className: "side-nav__accordion-icon"
-    }))), /*#__PURE__*/React__default.createElement("div", {
-      className: "side-nav__menu-item"
-    }, /*#__PURE__*/React__default.createElement("button", {
-      type: "button",
-      className: "side-nav__menu-title-wrapper",
-      onClick: function onClick() {
-        return onSubMenuClick('bags');
-      }
-    }, /*#__PURE__*/React__default.createElement("span", {
-      className: "side-nav__menu-title"
-    }, "Bags"), /*#__PURE__*/React__default.createElement("img", {
-      src: accordionIcon,
-      alt: "accordion-icon",
-      className: "side-nav__accordion-icon"
-    }))), /*#__PURE__*/React__default.createElement("div", {
-      className: "side-nav__menu-item"
-    }, /*#__PURE__*/React__default.createElement("button", {
-      type: "button",
-      className: "side-nav__menu-title-wrapper",
-      onClick: function onClick() {
-        return onSubMenuClick('shoes');
-      }
-    }, /*#__PURE__*/React__default.createElement("span", {
-      className: "side-nav__menu-title"
-    }, "Shoes"), /*#__PURE__*/React__default.createElement("img", {
-      src: accordionIcon,
-      alt: "accordion-icon",
-      className: "side-nav__accordion-icon"
-    }))), /*#__PURE__*/React__default.createElement("div", {
-      className: "side-nav__menu-item"
-    }, /*#__PURE__*/React__default.createElement("button", {
-      type: "button",
-      className: "side-nav__menu-title-wrapper",
-      onClick: function onClick() {
-        return onSubMenuClick('apparel');
-      }
-    }, /*#__PURE__*/React__default.createElement("span", {
-      className: "side-nav__menu-title"
-    }, "Clothing"), /*#__PURE__*/React__default.createElement("img", {
-      src: accordionIcon,
-      alt: "accordion-icon",
-      className: "side-nav__accordion-icon"
-    }))), /*#__PURE__*/React__default.createElement("div", {
-      className: "side-nav__menu-item"
-    }, /*#__PURE__*/React__default.createElement("button", {
-      type: "button",
-      className: "side-nav__menu-title-wrapper",
-      onClick: function onClick() {
-        return onSubMenuClick('accessories');
-      }
-    }, /*#__PURE__*/React__default.createElement("span", {
-      className: "side-nav__menu-title"
-    }, "Accessories"), /*#__PURE__*/React__default.createElement("img", {
-      src: accordionIcon,
-      alt: "accordion-icon",
-      className: "side-nav__accordion-icon"
-    }))), /*#__PURE__*/React__default.createElement("div", {
-      className: "side-nav__menu-item"
-    }, /*#__PURE__*/React__default.createElement("button", {
-      type: "button",
-      className: "side-nav__menu-title-wrapper",
-      onClick: function onClick() {
-        return onSubMenuClick('watches');
-      }
-    }, /*#__PURE__*/React__default.createElement("span", {
-      className: "side-nav__menu-title"
-    }, "Watches"), /*#__PURE__*/React__default.createElement("img", {
-      src: accordionIcon,
-      alt: "accordion-icon",
-      className: "side-nav__accordion-icon"
-    }))), /*#__PURE__*/React__default.createElement("div", {
-      className: "side-nav__menu-item"
+    }, renderMenuItems(), !!stores.length && /*#__PURE__*/React__default.createElement("div", {
+      className: "side-nav__menu-item",
+      key: "stores"
     }, /*#__PURE__*/React__default.createElement("button", {
       type: "button",
       className: "side-nav__menu-title-wrapper",
@@ -904,134 +858,58 @@
       alt: "accordion-icon",
       className: "side-nav__accordion-icon"
     }))), /*#__PURE__*/React__default.createElement("div", {
-      className: "side-nav__menu-item"
+      className: "side-nav__menu-item",
+      key: "sell-to-us"
     }, /*#__PURE__*/React__default.createElement("button", {
       type: "button",
       className: "side-nav__block-button",
       onClick: onSellToUsClick
     }, "Sell To Us")), /*#__PURE__*/React__default.createElement("div", {
-      className: "side-nav__menu-item"
+      className: "side-nav__menu-item",
+      key: "our-story"
     }, /*#__PURE__*/React__default.createElement("button", {
       type: "button",
       className: "side-nav__sub-link",
       onClick: onOurStoryClick
-    }, "Our Story")), /*#__PURE__*/React__default.createElement("div", {
-      className: "side-nav__menu-item"
+    }, "Our Story")), typeof onBlogClick === 'function' && /*#__PURE__*/React__default.createElement("div", {
+      className: "side-nav__menu-item",
+      key: "blog"
     }, /*#__PURE__*/React__default.createElement("button", {
       type: "button",
       className: "side-nav__sub-link",
       onClick: onBlogClick
     }, "Blog")), /*#__PURE__*/React__default.createElement("div", {
-      className: "side-nav__menu-item"
+      className: "side-nav__menu-item",
+      key: "contact-us"
     }, /*#__PURE__*/React__default.createElement("button", {
       type: "button",
       className: "side-nav__sub-link",
       onClick: onContactUsClick
     }, "Contact Us")), /*#__PURE__*/React__default.createElement("div", {
-      className: "side-nav__menu-item"
+      className: "side-nav__menu-item",
+      key: "my-account"
     }, /*#__PURE__*/React__default.createElement("button", {
       type: "button",
       className: "side-nav__sub-link",
       onClick: onAccountClick
     }, "My Account")), /*#__PURE__*/React__default.createElement("div", {
-      className: "side-nav__menu-item"
+      className: "side-nav__menu-item",
+      key: "my-cart"
     }, /*#__PURE__*/React__default.createElement("button", {
       type: "button",
       className: "side-nav__sub-link",
       onClick: onCartClick
     }, "My Cart")), /*#__PURE__*/React__default.createElement(CurrencySelect, {
+      key: "currency",
       currency: currency,
       currencyOptions: currencyOptions,
       onCurrencyChange: onCurrencyChange,
       isCurrencySelectionDisabled: isCurrencySelectionDisabled,
       tooltipContent: tooltipContent
-    }))), /*#__PURE__*/React__default.createElement(BrandsDropDown, {
-      subMenuOpen: subMenuOpen && displayedSubMenu === 'new',
-      onBackClick: onBackClick,
-      backIcon: backIcon,
-      subMenuCategoryTitle: "Department",
-      productUrl: productUrl,
-      categoryElements: categoryElements,
-      subMenuBrandsTitle: "Brands",
-      brandsList: dropdownData.latestArrivals,
-      categorySlug: displayedSubMenu,
-      isLoading: loading,
-      hasError: hasError,
-      onCloseSideNav: onCloseSideNav,
-      LinkComponent: LinkComponent
-    }), /*#__PURE__*/React__default.createElement(BrandsDropDown, {
-      subMenuOpen: subMenuOpen && displayedSubMenu === 'bags',
-      onBackClick: onBackClick,
-      backIcon: backIcon,
-      subMenuCategoryTitle: "Department",
-      productUrl: productUrl,
-      categoryElements: addCategoryToElements(categoryElements, categories.bags.slug),
-      subMenuBrandsTitle: "Bag Brands",
-      brandsList: dropdownData.bags,
-      categorySlug: displayedSubMenu,
-      isLoading: loading,
-      hasError: hasError,
-      onCloseSideNav: onCloseSideNav,
-      LinkComponent: LinkComponent
-    }), /*#__PURE__*/React__default.createElement(BrandsDropDown, {
-      subMenuOpen: subMenuOpen && displayedSubMenu === 'shoes',
-      onBackClick: onBackClick,
-      backIcon: backIcon,
-      subMenuCategoryTitle: "Department",
-      productUrl: productUrl,
-      categoryElements: addCategoryToElements(categoryElements, categories.shoes.slug),
-      subMenuBrandsTitle: "Shoe Brands",
-      brandsList: dropdownData.shoes,
-      categorySlug: displayedSubMenu,
-      isLoading: loading,
-      hasError: hasError,
-      onCloseSideNav: onCloseSideNav,
-      LinkComponent: LinkComponent
-    }), /*#__PURE__*/React__default.createElement(BrandsDropDown, {
-      subMenuOpen: subMenuOpen && displayedSubMenu === 'apparel',
-      onBackClick: onBackClick,
-      backIcon: backIcon,
-      subMenuCategoryTitle: "Department",
-      productUrl: productUrl,
-      categoryElements: addCategoryToElements(dropdownData.apparelStyles, categories.clothing.slug),
-      subMenuBrandsTitle: "Clothing Brands",
-      brandsList: dropdownData.apparel,
-      categorySlug: displayedSubMenu,
-      isLoading: loading,
-      hasError: hasError,
-      onCloseSideNav: onCloseSideNav,
-      LinkComponent: LinkComponent
-    }), /*#__PURE__*/React__default.createElement(BrandsDropDown, {
-      subMenuOpen: subMenuOpen && displayedSubMenu === 'accessories',
-      onBackClick: onBackClick,
-      backIcon: backIcon,
-      subMenuCategoryTitle: "Categories",
-      productUrl: productUrl,
-      categoryElements: removeCategoryByName(dropdownData.accessoriesCategories, 'ACCESSORIES'),
-      subMenuBrandsTitle: "Accessory Brands",
-      brandsList: dropdownData.accessories,
-      categorySlug: displayedSubMenu,
-      isLoading: loading,
-      hasError: hasError,
-      onCloseSideNav: onCloseSideNav,
-      LinkComponent: LinkComponent
-    }), /*#__PURE__*/React__default.createElement(BrandsDropDown, {
-      subMenuOpen: subMenuOpen && displayedSubMenu === 'watches',
-      onBackClick: onBackClick,
-      backIcon: backIcon,
-      subMenuCategoryTitle: "Department",
-      productUrl: productUrl,
-      categoryElements: addCategoryToElements(categoryElements, categories.watches.slug),
-      subMenuBrandsTitle: "Watches Brands",
-      brandsList: dropdownData.watches,
-      categorySlug: displayedSubMenu,
-      isLoading: loading,
-      hasError: hasError,
-      onCloseSideNav: onCloseSideNav,
-      LinkComponent: LinkComponent
-    }), displayedSubMenu === 'stores' && /*#__PURE__*/React__default.createElement("div", {
+    }))), renderDropdownLinks(), displayedSubMenu === 'stores' && /*#__PURE__*/React__default.createElement("div", {
       className: "side-nav__content"
     }, /*#__PURE__*/React__default.createElement(StoresDropdown, {
+      key: "stores",
       backIcon: backIcon,
       onBackClick: onBackClick,
       stores: stores,
@@ -1354,13 +1232,16 @@
     }, [setSearchValue, setIsSearchFocused, debouncedSearch, setSearchResults, setCachedResults]);
   };
   var useSearchInputFocus = function useSearchInputFocus(searchValue, setIsSearchFocused, cachedResults, setSearchResults) {
+    var handleSearchClick = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : undefined;
     return React.useCallback(function () {
       setIsSearchFocused(true);
 
-      if (searchValue.trim().length >= 3) {
+      if (typeof handleSearchClick === 'function') {
+        handleSearchClick();
+      } else if (searchValue.trim().length >= 3) {
         setSearchResults(cachedResults);
       }
-    }, [searchValue, setIsSearchFocused, cachedResults, setSearchResults]);
+    }, [searchValue, setIsSearchFocused, cachedResults, setSearchResults, handleSearchClick]);
   };
   var useSearchInputKeyDown = function useSearchInputKeyDown(searchValue, immediateSearch, setIsSearchFocused) {
     var setSearchValue = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
@@ -1400,13 +1281,13 @@
         onDashboardClick = _ref.onDashboardClick,
         onContactUsClick = _ref.onContactUsClick,
         onOurStoryClick = _ref.onOurStoryClick,
-        onBlogClick = _ref.onBlogClick,
+        _ref$onBlogClick = _ref.onBlogClick,
+        onBlogClick = _ref$onBlogClick === void 0 ? undefined : _ref$onBlogClick,
         bugReportLink = _ref.bugReportLink,
         onSellToUsClick = _ref.onSellToUsClick,
         onLogoClick = _ref.onLogoClick,
         onLuxityShopClick = _ref.onLuxityShopClick,
         endpoint = _ref.endpoint,
-        menuData = _ref.menuData,
         initialSearchData = _ref.initialSearchData,
         onSearchSubmit = _ref.onSearchSubmit,
         onProductIdsReceived = _ref.onProductIdsReceived,
@@ -1428,7 +1309,8 @@
         tooltipContent = _ref.tooltipContent,
         LinkComponent = _ref.LinkComponent,
         shop = _ref.shop,
-        app = _ref.app;
+        app = _ref.app,
+        categoryConfig = _ref.categoryConfig;
 
     var _useSearch = useSearch({
       endpoint: endpoint,
@@ -1493,6 +1375,10 @@
     var handleChange = useSearchInputChange(setSearchValue, setIsSearchFocused, debouncedSearch, setSearchResults, setCachedResults);
     var handleKeyDown = useSearchInputKeyDown(searchValue, immediateSearch, setIsSearchFocused, setSearchValue);
     React.useMemo(function () {
+      if (!initialSearchData) {
+        return;
+      }
+
       fetchInitialSearchData(initialSearchData, setInitialSearchView);
     }, [initialSearchData, fetchInitialSearchData]);
     useSearchClickOutside(searchResultsRef, searchResults, setCachedResults, setIsSearchFocused, setSearchResults);
@@ -1597,10 +1483,9 @@
       return handleClick(onOurStoryClick);
     };
 
-    var handleBlogClick = function handleBlogClick() {
+    var handleBlogClick = onBlogClick ? function () {
       return handleClick(onBlogClick);
-    };
-
+    } : undefined;
     return /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
       className: "navbar navbar__mobile-wrapper"
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -1705,13 +1590,13 @@
       showSideNav: showSideNav,
       onMenuClick: onMenuClick,
       endpoint: endpoint,
-      menuData: menuData,
       currency: currency,
       currencyOptions: currencyOptions,
       onCurrencyChange: onCurrencyChange,
       isCurrencySelectionDisabled: isCurrencySelectionDisabled,
       tooltipContent: tooltipContent,
-      LinkComponent: LinkComponent
+      LinkComponent: LinkComponent,
+      categoryConfig: categoryConfig
     }), app && /*#__PURE__*/React__default.createElement(LuxityAppSideNav, {
       accordionIcon: accordionIcon,
       closeIcon: closeIcon,