@bonlineza/luxity-lib 2.35.2 → 2.36.1-beta.0

package/LuxityMobileHeader.js

@@ -571,33 +571,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 */
 
@@ -810,7 +787,8 @@
         onCartClick = _ref.onCartClick,
         onContactUsClick = _ref.onContactUsClick,
         onOurStoryClick = _ref.onOurStoryClick,
-        onBlogClick = _ref.onBlogClick,
+        _ref$onBlogClick = _ref.onBlogClick,
+        onBlogClick = _ref$onBlogClick === void 0 ? undefined : _ref$onBlogClick,
         onSellToUsClick = _ref.onSellToUsClick,
         stores = _ref.stores,
         categoryElements = _ref.categoryElements,
@@ -822,7 +800,8 @@
         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),
@@ -839,16 +818,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];
@@ -898,22 +868,88 @@
       axios.get("".concat(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]);
+
+    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"
+        }, /*#__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, {
+          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", {
@@ -934,91 +970,7 @@
       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", {
+    }, renderMenuItems(), !!stores.length && /*#__PURE__*/React__default.createElement("div", {
       className: "side-nav__menu-item"
     }, /*#__PURE__*/React__default.createElement("button", {
       type: "button",
@@ -1042,7 +994,7 @@
       type: "button",
       className: "side-nav__sub-link",
       onClick: onOurStoryClick
-    }, "Our Story")), /*#__PURE__*/React__default.createElement("div", {
+    }, "Our Story")), typeof onBlogClick === 'function' && /*#__PURE__*/React__default.createElement("div", {
       className: "side-nav__menu-item"
     }, /*#__PURE__*/React__default.createElement("button", {
       type: "button",
@@ -1072,91 +1024,7 @@
       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, {
       backIcon: backIcon,
@@ -1166,6 +1034,10 @@
     })));
   };
 
+  LuxitySideNav.defaultProps = {
+    onBlogClick: undefined
+  };
+
   var searchProducts = function searchProducts(search, limit) {
     return {
       query: "\n      query SearchProducts($search: String!, $limit: Int!) {\n        luxity_products_serach_results(search: $search, limit: $limit) {\n          brands {\n            name\n            link\n          }\n          products {\n            name\n            link\n          }\n          luxity_product_ids\n        }\n      }\n    ",
@@ -1249,7 +1121,8 @@
         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,
@@ -1275,7 +1148,8 @@
         tooltipContent = _ref.tooltipContent,
         LinkComponent = _ref.LinkComponent,
         shop = _ref.shop,
-        app = _ref.app;
+        app = _ref.app,
+        categoryConfig = _ref.categoryConfig;
 
     var _useState = React.useState(''),
         _useState2 = _slicedToArray(_useState, 2),
@@ -1454,10 +1328,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", {
@@ -1561,7 +1434,8 @@
       onCurrencyChange: onCurrencyChange,
       isCurrencySelectionDisabled: isCurrencySelectionDisabled,
       tooltipContent: tooltipContent,
-      LinkComponent: LinkComponent
+      LinkComponent: LinkComponent,
+      categoryConfig: categoryConfig
     }), app && /*#__PURE__*/React__default.createElement(LuxityAppSideNav, {
       accordionIcon: accordionIcon,
       closeIcon: closeIcon,