@bonlineza/luxity-lib 2.31.5 → 2.32.1

package/GraphQLDropdownSelector.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('styled-components'), require('@bonlineza/b-lib/EllipsisLoader'), require('@bonlineza/b-lib/PageReady'), require('react-animate-height'), require('numeral'), require('stylis-rule-sheet'), require('react-dom'), require('prop-types'), require('raf'), require('react-input-autosize'), require('react-transition-group'), require('@bonlineza/b-lib/functions'), require('rc-slider'), require('react-notify-toast')) :
-  typeof define === 'function' && define.amd ? define(['react', 'styled-components', '@bonlineza/b-lib/EllipsisLoader', '@bonlineza/b-lib/PageReady', 'react-animate-height', 'numeral', 'stylis-rule-sheet', 'react-dom', 'prop-types', 'raf', 'react-input-autosize', 'react-transition-group', '@bonlineza/b-lib/functions', 'rc-slider', 'react-notify-toast'], factory) :
-  (global = global || self, global.GraphQLDropdownSelector = factory(global.React, global.styled, global.EllipsisLoader, global.PageReady, global.AnimateHeight, global.numeral, global['stylis-rule-sheet'], global.reactDom, global.PropTypes, global.raf, global['react-input-autosize'], global['react-transition-group'], global.function, global.rcSlider, global['react-notify-toast']));
-}(this, (function (React, styled, EllipsisLoader, PageReady, AnimateHeight, numeral, stylisRuleSheet, reactDom, PropTypes, raf, AutosizeInput, reactTransitionGroup, functions, rcSlider, Notifications) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('styled-components'), require('@bonlineza/b-lib/EllipsisLoader'), require('@bonlineza/b-lib/PageReady'), require('react-animate-height'), require('numeral'), require('stylis-rule-sheet'), require('react-dom'), require('prop-types'), require('raf'), require('react-input-autosize'), require('react-transition-group'), require('@bonlineza/b-lib/functions'), require('rc-slider'), require('react-notify-toast'), require('axios')) :
+  typeof define === 'function' && define.amd ? define(['react', 'styled-components', '@bonlineza/b-lib/EllipsisLoader', '@bonlineza/b-lib/PageReady', 'react-animate-height', 'numeral', 'stylis-rule-sheet', 'react-dom', 'prop-types', 'raf', 'react-input-autosize', 'react-transition-group', '@bonlineza/b-lib/functions', 'rc-slider', 'react-notify-toast', 'axios'], factory) :
+  (global = global || self, global.GraphQLDropdownSelector = factory(global.React, global.styled, global.EllipsisLoader, global.PageReady, global.AnimateHeight, global.numeral, global['stylis-rule-sheet'], global.reactDom, global.PropTypes, global.raf, global['react-input-autosize'], global['react-transition-group'], global.function, global.rcSlider, global['react-notify-toast'], global.axios));
+}(this, (function (React, styled, EllipsisLoader, PageReady, AnimateHeight, numeral, stylisRuleSheet, reactDom, PropTypes, raf, AutosizeInput, reactTransitionGroup, functions, rcSlider, Notifications, axios) { 'use strict';
 
   var React__default = 'default' in React ? React['default'] : React;
   var styled__default = 'default' in styled ? styled['default'] : styled;
@@ -15,6 +15,7 @@
   raf = raf && Object.prototype.hasOwnProperty.call(raf, 'default') ? raf['default'] : raf;
   AutosizeInput = AutosizeInput && Object.prototype.hasOwnProperty.call(AutosizeInput, 'default') ? AutosizeInput['default'] : AutosizeInput;
   var Notifications__default = 'default' in Notifications ? Notifications['default'] : Notifications;
+  axios = axios && Object.prototype.hasOwnProperty.call(axios, 'default') ? axios['default'] : axios;
 
   function ownKeys(object, enumerableOnly) {
     var keys = Object.keys(object);

package/LuxityDesktopHeader.js

@@ -1,10 +1,11 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react')) :
-  typeof define === 'function' && define.amd ? define(['react'], factory) :
-  (global = global || self, global.LuxityDesktopHeader = factory(global.React));
-}(this, (function (React) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('axios')) :
+  typeof define === 'function' && define.amd ? define(['react', 'axios'], factory) :
+  (global = global || self, global.LuxityDesktopHeader = factory(global.React, global.axios));
+}(this, (function (React, axios) { 'use strict';
 
   var React__default = 'default' in React ? React['default'] : React;
+  axios = axios && Object.prototype.hasOwnProperty.call(axios, 'default') ? axios['default'] : axios;
 
   function ownKeys(object, enumerableOnly) {
     var keys = Object.keys(object);
@@ -106,6 +107,12 @@
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
   }
 
+  var getBrands = function getBrands() {
+    return {
+      query: "{\n        latest_arrivals: luxity_brands(has_products: true, limit: 1000, page: 1) {data {id name slug}}\n        bags: luxity_brands(has_products: true, limit: 1000, page: 1, category_type: BAGS) {data {id name slug}}\n        shoes: luxity_brands(has_products: true, limit: 1000, page: 1, category_type: SHOES) {data {id name slug}}\n        apparel: luxity_brands(has_products: true, limit: 1000, page: 1, category_type: APPAREL) {data {id name slug}}\n        accessories: luxity_brands(has_products: true, limit: 1000, page: 1, category_type: ACCESSORIES) {data {id name slug}}\n        watches: luxity_brands(has_products: true, limit: 1000, page: 1, category_type: WATCHES) {data {id name slug}}\n        accessories_categories: luxity_accessories_categories_list { id name slug }\n        apparel_styles: luxity_apparel_styles_list { name slug }\n      }  "
+    };
+  };
+
   var Dropdown = function Dropdown(_ref) {
     var title = _ref.title,
         imageSrc = _ref.imageSrc,
@@ -115,10 +122,16 @@
         brandElements = _ref$brandElements === void 0 ? [] : _ref$brandElements,
         productsUrl = _ref.productsUrl,
         categorySlug = _ref.categorySlug,
-        categoryTitle = _ref.categoryTitle;
-    return /*#__PURE__*/React__default.createElement("div", {
+        categoryTitle = _ref.categoryTitle,
+        isLoading = _ref.isLoading,
+        hasError = _ref.hasError;
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, hasError ? /*#__PURE__*/React__default.createElement("div", {
+      className: "dropdown__errors"
+    }, "Failed to load data.") : /*#__PURE__*/React__default.createElement("div", {
       className: "dropdown"
-    }, /*#__PURE__*/React__default.createElement("div", {
+    }, isLoading ? /*#__PURE__*/React__default.createElement("div", {
+      className: "cover-spinner"
+    }) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
       className: "dropdown__column"
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "dropdown__title"
@@ -129,11 +142,11 @@
         href: "".concat(productsUrl, "/").concat(categoryElement.category, "/").concat(categoryElement === null || categoryElement === void 0 ? void 0 : categoryElement.slug),
         className: "dropdown__element",
         key: categoryElement.name
-      }, categoryElement === null || categoryElement === void 0 ? void 0 : categoryElement.name) : /*#__PURE__*/React__default.createElement("a", {
+      }, categoryElement === null || categoryElement === void 0 ? void 0 : categoryElement.name.toLowerCase()) : /*#__PURE__*/React__default.createElement("a", {
         href: "".concat(productsUrl, "/").concat(categoryElement === null || categoryElement === void 0 ? void 0 : categoryElement.slug),
         className: "dropdown__element",
         key: categoryElement.name
-      }, categoryElement === null || categoryElement === void 0 ? void 0 : categoryElement.name);
+      }, categoryElement === null || categoryElement === void 0 ? void 0 : categoryElement.name.toLowerCase());
     }))), /*#__PURE__*/React__default.createElement("div", {
       className: "dropdown__column"
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -154,7 +167,7 @@
     }, /*#__PURE__*/React__default.createElement("img", {
       src: imageSrc,
       alt: "".concat(title)
-    })));
+    })))));
   };
 
   var StoresDropdown = function StoresDropdown(_ref) {
@@ -223,6 +236,14 @@
     }
   };
 
+  var removeCategoryByName = function removeCategoryByName(categories, name) {
+    var _categories$filter;
+
+    return (_categories$filter = categories === null || categories === void 0 ? void 0 : categories.filter(function (category) {
+      return category.name !== name;
+    })) !== null && _categories$filter !== void 0 ? _categories$filter : [];
+  };
+
   var LuxityDesktopHeader = function LuxityDesktopHeader(_ref) {
     var accountIcon = _ref.accountIcon,
         cartIcon = _ref.cartIcon,
@@ -230,39 +251,56 @@
         cartCount = _ref.cartCount,
         logoSrc = _ref.logoSrc,
         categoryElements = _ref.categoryElements,
-        newBrandElements = _ref.newBrandElements,
-        bagsElements = _ref.bagsElements,
-        shoesElements = _ref.shoesElements,
-        clothingElements = _ref.clothingElements,
-        accessoriesElements = _ref.accessoriesElements,
-        accessoriesCategoryElements = _ref.accessoriesCategoryElements,
-        apparelStylesElements = _ref.apparelStylesElements,
-        watchesElements = _ref.watchesElements,
         newBrandsImage = _ref.newBrandsImage,
         bagsImage = _ref.bagsImage,
         shoesImage = _ref.shoesImage,
         clothingImage = _ref.clothingImage,
         accessoriesImage = _ref.accessoriesImage,
         watchesImage = _ref.watchesImage,
-        productsUrl = _ref.productsUrl,
         stores = _ref.stores,
         contactNumber = _ref.contactNumber,
+        productsUrl = _ref.productsUrl,
         onInterestClick = _ref.onInterestClick,
         onCartClick = _ref.onCartClick,
         onAccountClick = _ref.onAccountClick,
         inputSearchIcon = _ref.inputSearchIcon,
         onSearch = _ref.onSearch,
-        ourStoryLink = _ref.ourStoryLink,
+        onSellToUsClick = _ref.onSellToUsClick,
         blogLink = _ref.blogLink,
         contactUsLink = _ref.contactUsLink,
-        onSellToUsClick = _ref.onSellToUsClick,
-        onLogoClick = _ref.onLogoClick;
+        ourStoryLink = _ref.ourStoryLink,
+        onLogoClick = _ref.onLogoClick,
+        endpoint = _ref.endpoint;
 
     var _useState = React.useState(''),
         _useState2 = _slicedToArray(_useState, 2),
         searchValue = _useState2[0],
         setSearchValue = _useState2[1];
 
+    var _useState3 = React.useState(false),
+        _useState4 = _slicedToArray(_useState3, 2),
+        loading = _useState4[0],
+        setLoading = _useState4[1];
+
+    var _useState5 = React.useState({
+      latestArrivals: [],
+      bags: [],
+      shoes: [],
+      clothing: [],
+      accessories: [],
+      watches: [],
+      accessoriesCategories: [],
+      apparelStyles: []
+    }),
+        _useState6 = _slicedToArray(_useState5, 2),
+        dropdownData = _useState6[0],
+        setDropdownData = _useState6[1];
+
+    var _useState7 = React.useState(false),
+        _useState8 = _slicedToArray(_useState7, 2),
+        hasError = _useState8[0],
+        setHasError = _useState8[1];
+
     var handleChange = function handleChange(event) {
       setSearchValue(event.target.value);
     };
@@ -281,6 +319,27 @@
       });
     }
 
+    React.useMemo(function () {
+      setLoading(true);
+      axios.post("".concat(endpoint), getBrands()).then(function (_ref2) {
+        var data = _ref2.data;
+        setLoading(false);
+        setDropdownData(function (prev) {
+          return _objectSpread2(_objectSpread2({}, prev), {}, {
+            latestArrivals: data.data.latest_arrivals.data,
+            bags: data.data.bags.data,
+            shoes: data.data.shoes.data,
+            apparel: data.data.apparel.data,
+            accessories: data.data.accessories.data,
+            watches: data.data.watches.data,
+            accessoriesCategories: data.data.accessories_categories,
+            apparelStyles: data.data.apparel_styles
+          });
+        });
+      }).catch(function () {
+        return setHasError(true);
+      });
+    }, [endpoint]);
     return /*#__PURE__*/React__default.createElement("div", {
       className: "navbar"
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -324,10 +383,12 @@
       title: "Department",
       imageSrc: newBrandsImage,
       categoryElements: categoryElements,
-      brandElements: newBrandElements,
+      brandElements: dropdownData.latestArrivals,
       productsUrl: productsUrl,
       categorySlug: "brands",
-      categoryTitle: "Brands"
+      categoryTitle: "Brands",
+      isLoading: loading,
+      hasError: hasError
     }))), /*#__PURE__*/React__default.createElement("li", {
       className: "navbar__link"
     }, /*#__PURE__*/React__default.createElement("a", {
@@ -339,10 +400,12 @@
       title: "Department",
       imageSrc: bagsImage,
       categoryElements: addCategoryToElements(categoryElements, categories.bags.slug),
-      brandElements: bagsElements,
+      brandElements: dropdownData.bags,
       productsUrl: productsUrl,
       categorySlug: categories.bags.slug,
-      categoryTitle: categories.bags.name
+      categoryTitle: categories.bags.name,
+      isLoading: loading,
+      hasError: hasError
     }))), /*#__PURE__*/React__default.createElement("li", {
       className: "navbar__link"
     }, /*#__PURE__*/React__default.createElement("a", {
@@ -354,10 +417,12 @@
       title: "Department",
       imageSrc: shoesImage,
       categoryElements: addCategoryToElements(categoryElements, categories.shoes.slug),
-      brandElements: shoesElements,
+      brandElements: dropdownData.shoes,
       productsUrl: productsUrl,
       categorySlug: categories.shoes.slug,
-      categoryTitle: categories.shoes.name
+      categoryTitle: categories.shoes.name,
+      isLoading: loading,
+      hasError: hasError
     }))), /*#__PURE__*/React__default.createElement("li", {
       className: "navbar__link"
     }, /*#__PURE__*/React__default.createElement("a", {
@@ -368,11 +433,13 @@
     }, /*#__PURE__*/React__default.createElement(Dropdown, {
       title: "Department",
       imageSrc: clothingImage,
-      categoryElements: apparelStylesElements,
-      brandElements: clothingElements,
+      categoryElements: dropdownData.apparelStyles,
+      brandElements: dropdownData.apparel,
       productsUrl: productsUrl,
       categorySlug: categories.clothing.slug,
-      categoryTitle: categories.clothing.name
+      categoryTitle: categories.clothing.name,
+      isLoading: loading,
+      hasError: hasError
     }))), /*#__PURE__*/React__default.createElement("li", {
       className: "navbar__link"
     }, /*#__PURE__*/React__default.createElement("a", {
@@ -383,11 +450,13 @@
     }, /*#__PURE__*/React__default.createElement(Dropdown, {
       title: "Categories",
       imageSrc: accessoriesImage,
-      categoryElements: accessoriesCategoryElements,
-      brandElements: accessoriesElements,
+      categoryElements: removeCategoryByName(dropdownData.accessoriesCategories, 'ACCESSORIES'),
+      brandElements: dropdownData.accessories,
       productsUrl: productsUrl,
       categorySlug: categories.accessories.slug,
-      categoryTitle: categories.accessories.name
+      categoryTitle: categories.accessories.name,
+      isLoading: loading,
+      hasError: hasError
     }))), /*#__PURE__*/React__default.createElement("li", {
       className: "navbar__link"
     }, /*#__PURE__*/React__default.createElement("a", {
@@ -399,10 +468,12 @@
       title: "Department",
       imageSrc: watchesImage,
       categoryElements: addCategoryToElements(categoryElements, categories.watches.slug),
-      brandElements: watchesElements,
+      brandElements: dropdownData.watches,
       productsUrl: productsUrl,
       categorySlug: categories.watches.slug,
-      categoryTitle: categories.watches.name
+      categoryTitle: categories.watches.name,
+      isLoading: loading,
+      hasError: hasError
     }))), /*#__PURE__*/React__default.createElement("li", {
       className: "navbar__link"
     }, /*#__PURE__*/React__default.createElement("a", {

package/LuxityGraphQLDropdownSelector.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('styled-components'), require('@bonlineza/b-lib/EllipsisLoader'), require('@bonlineza/b-lib/PageReady'), require('react-animate-height'), require('numeral'), require('stylis-rule-sheet'), require('react-dom'), require('prop-types'), require('raf'), require('react-input-autosize'), require('react-transition-group'), require('@bonlineza/b-lib/functions'), require('rc-slider'), require('react-notify-toast')) :
-  typeof define === 'function' && define.amd ? define(['react', 'styled-components', '@bonlineza/b-lib/EllipsisLoader', '@bonlineza/b-lib/PageReady', 'react-animate-height', 'numeral', 'stylis-rule-sheet', 'react-dom', 'prop-types', 'raf', 'react-input-autosize', 'react-transition-group', '@bonlineza/b-lib/functions', 'rc-slider', 'react-notify-toast'], factory) :
-  (global = global || self, global.LuxityGraphQLDropdownSelector = factory(global.React, global.styled, global.EllipsisLoader, global.PageReady, global.AnimateHeight, global.numeral, global['stylis-rule-sheet'], global.reactDom, global.PropTypes, global.raf, global['react-input-autosize'], global['react-transition-group'], global.function, global.rcSlider, global['react-notify-toast']));
-}(this, (function (React, styled, EllipsisLoader, PageReady, AnimateHeight, numeral, stylisRuleSheet, reactDom, PropTypes, raf, AutosizeInput, reactTransitionGroup, functions, rcSlider, Notifications) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('styled-components'), require('@bonlineza/b-lib/EllipsisLoader'), require('@bonlineza/b-lib/PageReady'), require('react-animate-height'), require('numeral'), require('stylis-rule-sheet'), require('react-dom'), require('prop-types'), require('raf'), require('react-input-autosize'), require('react-transition-group'), require('@bonlineza/b-lib/functions'), require('rc-slider'), require('react-notify-toast'), require('axios')) :
+  typeof define === 'function' && define.amd ? define(['react', 'styled-components', '@bonlineza/b-lib/EllipsisLoader', '@bonlineza/b-lib/PageReady', 'react-animate-height', 'numeral', 'stylis-rule-sheet', 'react-dom', 'prop-types', 'raf', 'react-input-autosize', 'react-transition-group', '@bonlineza/b-lib/functions', 'rc-slider', 'react-notify-toast', 'axios'], factory) :
+  (global = global || self, global.LuxityGraphQLDropdownSelector = factory(global.React, global.styled, global.EllipsisLoader, global.PageReady, global.AnimateHeight, global.numeral, global['stylis-rule-sheet'], global.reactDom, global.PropTypes, global.raf, global['react-input-autosize'], global['react-transition-group'], global.function, global.rcSlider, global['react-notify-toast'], global.axios));
+}(this, (function (React, styled, EllipsisLoader, PageReady, AnimateHeight, numeral, stylisRuleSheet, reactDom, PropTypes, raf, AutosizeInput, reactTransitionGroup, functions, rcSlider, Notifications, axios) { 'use strict';
 
   var React__default = 'default' in React ? React['default'] : React;
   var styled__default = 'default' in styled ? styled['default'] : styled;
@@ -15,6 +15,7 @@
   raf = raf && Object.prototype.hasOwnProperty.call(raf, 'default') ? raf['default'] : raf;
   AutosizeInput = AutosizeInput && Object.prototype.hasOwnProperty.call(AutosizeInput, 'default') ? AutosizeInput['default'] : AutosizeInput;
   var Notifications__default = 'default' in Notifications ? Notifications['default'] : Notifications;
+  axios = axios && Object.prototype.hasOwnProperty.call(axios, 'default') ? axios['default'] : axios;
 
   function ownKeys(object, enumerableOnly) {
     var keys = Object.keys(object);

package/LuxityMobileHeader.js

@@ -1,10 +1,52 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react')) :
-  typeof define === 'function' && define.amd ? define(['react'], factory) :
-  (global = global || self, global.LuxityMobileHeader = factory(global.React));
-}(this, (function (React) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('axios')) :
+  typeof define === 'function' && define.amd ? define(['react', 'axios'], factory) :
+  (global = global || self, global.LuxityMobileHeader = factory(global.React, global.axios));
+}(this, (function (React, axios) { 'use strict';
 
   var React__default = 'default' in React ? React['default'] : React;
+  axios = axios && Object.prototype.hasOwnProperty.call(axios, 'default') ? axios['default'] : axios;
+
+  function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+
+    if (Object.getOwnPropertySymbols) {
+      var symbols = Object.getOwnPropertySymbols(object);
+      enumerableOnly && (symbols = symbols.filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      })), keys.push.apply(keys, symbols);
+    }
+
+    return keys;
+  }
+
+  function _objectSpread2(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = null != arguments[i] ? arguments[i] : {};
+      i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+
+    return target;
+  }
+
+  function _defineProperty(obj, key, value) {
+    if (key in obj) {
+      Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+      });
+    } else {
+      obj[key] = value;
+    }
+
+    return obj;
+  }
 
   function _slicedToArray(arr, i) {
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
@@ -116,12 +158,18 @@
         subMenuBrandsTitle = _ref.subMenuBrandsTitle,
         _ref$brandsList = _ref.brandsList,
         brandsList = _ref$brandsList === void 0 ? [] : _ref$brandsList,
-        categorySlug = _ref.categorySlug;
+        categorySlug = _ref.categorySlug,
+        isLoading = _ref.isLoading,
+        hasError = _ref.hasError;
     return /*#__PURE__*/React__default.createElement("div", {
       className: "side-nav__content ".concat(subMenuOpen ? '' : 'side-nav__content--hidden')
-    }, /*#__PURE__*/React__default.createElement("div", {
+    }, hasError ? /*#__PURE__*/React__default.createElement("div", {
+      className: "side-nav__errors"
+    }, "Failed to load data.") : /*#__PURE__*/React__default.createElement("div", {
       className: "side-nav__sub-menu-wrapper"
-    }, /*#__PURE__*/React__default.createElement("div", {
+    }, isLoading ? /*#__PURE__*/React__default.createElement("div", {
+      className: "cover-spinner"
+    }) : /*#__PURE__*/React__default.createElement("div", {
       className: "side-nav__sub-menu"
     }, /*#__PURE__*/React__default.createElement("button", {
       type: "button",
@@ -141,7 +189,7 @@
       return /*#__PURE__*/React__default.createElement("a", {
         href: "".concat(productUrl, "/").concat(category.slug),
         className: "side-nav__element"
-      }, category.name);
+      }, category.name.toLowerCase());
     })), /*#__PURE__*/React__default.createElement("br", null), /*#__PURE__*/React__default.createElement("div", {
       className: "side-nav__elements"
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -157,6 +205,20 @@
     })))));
   };
 
+  var getBrands = function getBrands() {
+    return {
+      query: "{\n        latest_arrivals: luxity_brands(has_products: true, limit: 1000, page: 1) {data {id name slug}}\n        bags: luxity_brands(has_products: true, limit: 1000, page: 1, category_type: BAGS) {data {id name slug}}\n        shoes: luxity_brands(has_products: true, limit: 1000, page: 1, category_type: SHOES) {data {id name slug}}\n        apparel: luxity_brands(has_products: true, limit: 1000, page: 1, category_type: APPAREL) {data {id name slug}}\n        accessories: luxity_brands(has_products: true, limit: 1000, page: 1, category_type: ACCESSORIES) {data {id name slug}}\n        watches: luxity_brands(has_products: true, limit: 1000, page: 1, category_type: WATCHES) {data {id name slug}}\n        accessories_categories: luxity_accessories_categories_list { id name slug }\n        apparel_styles: luxity_apparel_styles_list { name slug }\n      }  "
+    };
+  };
+
+  var removeCategoryByName = function removeCategoryByName(categories, name) {
+    var _categories$filter;
+
+    return (_categories$filter = categories === null || categories === void 0 ? void 0 : categories.filter(function (category) {
+      return category.name !== name;
+    })) !== null && _categories$filter !== void 0 ? _categories$filter : [];
+  };
+
   var LuxitySideNav = function LuxitySideNav(_ref) {
     var accordionIcon = _ref.accordionIcon,
         closeIcon = _ref.closeIcon,
@@ -170,24 +232,9 @@
         onSellToUsClick = _ref.onSellToUsClick,
         stores = _ref.stores,
         categoryElements = _ref.categoryElements,
-        _ref$newBrandsList = _ref.newBrandsList,
-        newBrandsList = _ref$newBrandsList === void 0 ? [] : _ref$newBrandsList,
-        _ref$bagsBrandsList = _ref.bagsBrandsList,
-        bagsBrandsList = _ref$bagsBrandsList === void 0 ? [] : _ref$bagsBrandsList,
-        _ref$shoesBrandsList = _ref.shoesBrandsList,
-        shoesBrandsList = _ref$shoesBrandsList === void 0 ? [] : _ref$shoesBrandsList,
-        _ref$clothingBrandsLi = _ref.clothingBrandsList,
-        clothingBrandsList = _ref$clothingBrandsLi === void 0 ? [] : _ref$clothingBrandsLi,
-        _ref$accessoriesBrand = _ref.accessoriesBrandsList,
-        accessoriesBrandsList = _ref$accessoriesBrand === void 0 ? [] : _ref$accessoriesBrand,
-        _ref$watchesBrandsLis = _ref.watchesBrandsList,
-        watchesBrandsList = _ref$watchesBrandsLis === void 0 ? [] : _ref$watchesBrandsLis,
-        _ref$accessoriesCateg = _ref.accessoriesCategoryElements,
-        accessoriesCategoryElements = _ref$accessoriesCateg === void 0 ? [] : _ref$accessoriesCateg,
-        _ref$apparelStylesEle = _ref.apparelStylesElements,
-        apparelStylesElements = _ref$apparelStylesEle === void 0 ? [] : _ref$apparelStylesEle,
         showSideNav = _ref.showSideNav,
-        onMenuClick = _ref.onMenuClick;
+        onMenuClick = _ref.onMenuClick,
+        endpoint = _ref.endpoint;
 
     var _useState = React.useState(false),
         _useState2 = _slicedToArray(_useState, 2),
@@ -199,6 +246,30 @@
         displayedSubMenu = _useState4[0],
         setDisplayedSubMenu = _useState4[1];
 
+    var _useState5 = React.useState(false),
+        _useState6 = _slicedToArray(_useState5, 2),
+        loading = _useState6[0],
+        setLoading = _useState6[1];
+
+    var _useState7 = React.useState({
+      latestArrivals: [],
+      bags: [],
+      shoes: [],
+      clothing: [],
+      accessories: [],
+      watches: [],
+      accessoriesCategories: [],
+      apparelStyles: []
+    }),
+        _useState8 = _slicedToArray(_useState7, 2),
+        dropdownData = _useState8[0],
+        setDropdownData = _useState8[1];
+
+    var _useState9 = React.useState(false),
+        _useState10 = _slicedToArray(_useState9, 2),
+        hasError = _useState10[0],
+        setHasError = _useState10[1];
+
     var onSubMenuClick = function onSubMenuClick(subMenu) {
       setSubMenuOpen(function (prev) {
         return !prev;
@@ -216,6 +287,27 @@
       setDisplayedSubMenu('');
     };
 
+    React.useMemo(function () {
+      setLoading(true);
+      axios.post("".concat(endpoint), getBrands()).then(function (_ref2) {
+        var data = _ref2.data;
+        setLoading(false);
+        setDropdownData(function (prev) {
+          return _objectSpread2(_objectSpread2({}, prev), {}, {
+            latestArrivals: data.data.latest_arrivals.data,
+            bags: data.data.bags.data,
+            shoes: data.data.shoes.data,
+            apparel: data.data.apparel.data,
+            accessories: data.data.accessories.data,
+            watches: data.data.watches.data,
+            accessoriesCategories: data.data.accessories_categories,
+            apparelStyles: data.data.apparel_styles
+          });
+        });
+      }).catch(function () {
+        return setHasError(true);
+      });
+    }, [endpoint]);
     return /*#__PURE__*/React__default.createElement("div", {
       className: "side-nav"
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -369,8 +461,10 @@
       productUrl: productUrl,
       categoryElements: categoryElements,
       subMenuBrandsTitle: "Brands",
-      brandsList: newBrandsList,
-      categorySlug: displayedSubMenu
+      brandsList: dropdownData.latestArrivals,
+      categorySlug: displayedSubMenu,
+      isLoading: loading,
+      hasError: hasError
     }), /*#__PURE__*/React__default.createElement(BrandsDropDown, {
       subMenuOpen: subMenuOpen && displayedSubMenu === 'bags',
       onBackClick: onBackClick,
@@ -379,8 +473,10 @@
       productUrl: productUrl,
       categoryElements: categoryElements,
       subMenuBrandsTitle: "Bag Brands",
-      brandsList: bagsBrandsList,
-      categorySlug: displayedSubMenu
+      brandsList: dropdownData.bags,
+      categorySlug: displayedSubMenu,
+      isLoading: loading,
+      hasError: hasError
     }), /*#__PURE__*/React__default.createElement(BrandsDropDown, {
       subMenuOpen: subMenuOpen && displayedSubMenu === 'shoes',
       onBackClick: onBackClick,
@@ -389,28 +485,34 @@
       productUrl: productUrl,
       categoryElements: categoryElements,
       subMenuBrandsTitle: "Shoe Brands",
-      brandsList: shoesBrandsList,
-      categorySlug: displayedSubMenu
+      brandsList: dropdownData.shoes,
+      categorySlug: displayedSubMenu,
+      isLoading: loading,
+      hasError: hasError
     }), /*#__PURE__*/React__default.createElement(BrandsDropDown, {
       subMenuOpen: subMenuOpen && displayedSubMenu === 'clothing',
       onBackClick: onBackClick,
       backIcon: backIcon,
       subMenuCategoryTitle: "Department",
       productUrl: productUrl,
-      categoryElements: apparelStylesElements,
+      categoryElements: dropdownData.apparelStyles,
       subMenuBrandsTitle: "Clothing Brands",
-      brandsList: clothingBrandsList,
-      categorySlug: displayedSubMenu
+      brandsList: dropdownData.clothing,
+      categorySlug: displayedSubMenu,
+      isLoading: loading,
+      hasError: hasError
     }), /*#__PURE__*/React__default.createElement(BrandsDropDown, {
       subMenuOpen: subMenuOpen && displayedSubMenu === 'accessories',
       onBackClick: onBackClick,
       backIcon: backIcon,
       subMenuCategoryTitle: "Categories",
       productUrl: productUrl,
-      categoryElements: accessoriesCategoryElements,
+      categoryElements: removeCategoryByName(dropdownData.accessoriesCategories, 'ACCESSORIES'),
       subMenuBrandsTitle: "Accessory Brands",
-      brandsList: accessoriesBrandsList,
-      categorySlug: displayedSubMenu
+      brandsList: dropdownData.accessories,
+      categorySlug: displayedSubMenu,
+      isLoading: loading,
+      hasError: hasError
     }), /*#__PURE__*/React__default.createElement(BrandsDropDown, {
       subMenuOpen: subMenuOpen && displayedSubMenu === 'watches',
       onBackClick: onBackClick,
@@ -419,8 +521,10 @@
       productUrl: productUrl,
       categoryElements: categoryElements,
       subMenuBrandsTitle: "Watches Brands",
-      brandsList: watchesBrandsList,
-      categorySlug: displayedSubMenu
+      brandsList: dropdownData.watches,
+      categorySlug: displayedSubMenu,
+      isLoading: loading,
+      hasError: hasError
     }), displayedSubMenu === 'stores' && /*#__PURE__*/React__default.createElement("div", {
       className: "side-nav__content"
     }, /*#__PURE__*/React__default.createElement(StoresDropdown, {
@@ -450,15 +554,8 @@
         ourStoryLink = _ref.ourStoryLink,
         blogLink = _ref.blogLink,
         onSellToUsClick = _ref.onSellToUsClick,
-        bagsBrandsList = _ref.bagsBrandsList,
-        newBrandsList = _ref.newBrandsList,
-        shoesBrandsList = _ref.shoesBrandsList,
-        clothingBrandsList = _ref.clothingBrandsList,
-        accessoriesBrandsList = _ref.accessoriesBrandsList,
-        accessoriesCategoryElements = _ref.accessoriesCategoryElements,
-        apparelStylesElements = _ref.apparelStylesElements,
-        watchesBrandsList = _ref.watchesBrandsList,
-        onLogoClick = _ref.onLogoClick;
+        onLogoClick = _ref.onLogoClick,
+        endpoint = _ref.endpoint;
 
     var _useState = React.useState(''),
         _useState2 = _slicedToArray(_useState, 2),
@@ -571,16 +668,9 @@
       onSellToUsClick: onSellToUsClick,
       stores: stores,
       categoryElements: categoryElements,
-      newBrandsList: newBrandsList,
-      bagsBrandsList: bagsBrandsList,
-      shoesBrandsList: shoesBrandsList,
-      clothingBrandsList: clothingBrandsList,
-      accessoriesBrandsList: accessoriesBrandsList,
-      watchesBrandsList: watchesBrandsList,
       showSideNav: showSideNav,
       onMenuClick: onMenuClick,
-      accessoriesCategoryElements: accessoriesCategoryElements,
-      apparelStylesElements: apparelStylesElements
+      endpoint: endpoint
     }));
   };