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

package/LuxityMobileHeader.js

@@ -571,10 +571,33 @@
     var _categories$filter;
 
     return (_categories$filter = categories === null || categories === void 0 ? void 0 : categories.filter(function (category) {
-      return category.name.toLowerCase() !== name.toLowerCase();
+      return category.name !== name;
     })) !== 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 */
 
@@ -787,8 +810,7 @@
         onCartClick = _ref.onCartClick,
         onContactUsClick = _ref.onContactUsClick,
         onOurStoryClick = _ref.onOurStoryClick,
-        _ref$onBlogClick = _ref.onBlogClick,
-        onBlogClick = _ref$onBlogClick === void 0 ? undefined : _ref$onBlogClick,
+        onBlogClick = _ref.onBlogClick,
         onSellToUsClick = _ref.onSellToUsClick,
         stores = _ref.stores,
         categoryElements = _ref.categoryElements,
@@ -800,8 +822,7 @@
         onCurrencyChange = _ref.onCurrencyChange,
         isCurrencySelectionDisabled = _ref.isCurrencySelectionDisabled,
         tooltipContent = _ref.tooltipContent,
-        LinkComponent = _ref.LinkComponent,
-        categoryConfig = _ref.categoryConfig;
+        LinkComponent = _ref.LinkComponent;
 
     var _useState = React.useState(false),
         _useState2 = _slicedToArray(_useState, 2),
@@ -818,7 +839,16 @@
         loading = _useState6[0],
         setLoading = _useState6[1];
 
-    var _useState7 = React.useState({}),
+    var _useState7 = React.useState({
+      latestArrivals: [],
+      bags: [],
+      shoes: [],
+      apparel: [],
+      accessories: [],
+      watches: [],
+      accessoriesCategories: [],
+      apparelStyles: []
+    }),
         _useState8 = _slicedToArray(_useState7, 2),
         dropdownData = _useState8[0],
         setDropdownData = _useState8[1];
@@ -868,88 +898,22 @@
       axios.get("".concat(menuData)).then(function (_ref2) {
         var data = _ref2.data;
         setLoading(false);
-        setDropdownData(data);
+        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
+          });
+        });
       }).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", {
@@ -970,7 +934,91 @@
       className: "side-nav__close-icon"
     })), /*#__PURE__*/React__default.createElement("div", {
       className: "side-nav__menu-items-wrapper"
-    }, renderMenuItems(), !!stores.length && /*#__PURE__*/React__default.createElement("div", {
+    }, /*#__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"
     }, /*#__PURE__*/React__default.createElement("button", {
       type: "button",
@@ -994,7 +1042,7 @@
       type: "button",
       className: "side-nav__sub-link",
       onClick: onOurStoryClick
-    }, "Our Story")), typeof onBlogClick === 'function' && /*#__PURE__*/React__default.createElement("div", {
+    }, "Our Story")), /*#__PURE__*/React__default.createElement("div", {
       className: "side-nav__menu-item"
     }, /*#__PURE__*/React__default.createElement("button", {
       type: "button",
@@ -1024,7 +1072,91 @@
       onCurrencyChange: onCurrencyChange,
       isCurrencySelectionDisabled: isCurrencySelectionDisabled,
       tooltipContent: tooltipContent
-    }))), renderDropdownLinks(), displayedSubMenu === 'stores' && /*#__PURE__*/React__default.createElement("div", {
+    }))), /*#__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", {
       className: "side-nav__content"
     }, /*#__PURE__*/React__default.createElement(StoresDropdown, {
       backIcon: backIcon,
@@ -1034,10 +1166,6 @@
     })));
   };
 
-  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    ",
@@ -1121,8 +1249,7 @@
         onDashboardClick = _ref.onDashboardClick,
         onContactUsClick = _ref.onContactUsClick,
         onOurStoryClick = _ref.onOurStoryClick,
-        _ref$onBlogClick = _ref.onBlogClick,
-        onBlogClick = _ref$onBlogClick === void 0 ? undefined : _ref$onBlogClick,
+        onBlogClick = _ref.onBlogClick,
         bugReportLink = _ref.bugReportLink,
         onSellToUsClick = _ref.onSellToUsClick,
         onLogoClick = _ref.onLogoClick,
@@ -1148,8 +1275,7 @@
         tooltipContent = _ref.tooltipContent,
         LinkComponent = _ref.LinkComponent,
         shop = _ref.shop,
-        app = _ref.app,
-        categoryConfig = _ref.categoryConfig;
+        app = _ref.app;
 
     var _useState = React.useState(''),
         _useState2 = _slicedToArray(_useState, 2),
@@ -1328,9 +1454,10 @@
       return handleClick(onOurStoryClick);
     };
 
-    var handleBlogClick = onBlogClick ? function () {
+    var handleBlogClick = function handleBlogClick() {
       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", {
@@ -1434,8 +1561,7 @@
       onCurrencyChange: onCurrencyChange,
       isCurrencySelectionDisabled: isCurrencySelectionDisabled,
       tooltipContent: tooltipContent,
-      LinkComponent: LinkComponent,
-      categoryConfig: categoryConfig
+      LinkComponent: LinkComponent
     }), app && /*#__PURE__*/React__default.createElement(LuxityAppSideNav, {
       accordionIcon: accordionIcon,
       closeIcon: closeIcon,