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

package/LuxitySideNav.js

@@ -260,33 +260,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 */
 
@@ -499,7 +476,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,
@@ -511,7 +489,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),
@@ -528,16 +507,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];
@@ -587,22 +557,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", {
@@ -623,91 +659,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",
@@ -731,7 +683,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",
@@ -761,91 +713,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,
@@ -855,6 +723,10 @@
     })));
   };
 
+  LuxitySideNav.defaultProps = {
+    onBlogClick: undefined
+  };
+
   return LuxitySideNav;
 
 })));

package/MaterialSelector.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'), require('helpers/axios'), 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', 'helpers/axios', 'axios'], factory) :
-  (global = global || self, global.MaterialSelector = 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.axiosInstance, global.axios));
-}(this, (function (React, styled, EllipsisLoader, PageReady, AnimateHeight, numeral, stylisRuleSheet, reactDom, PropTypes, raf, AutosizeInput, reactTransitionGroup, functions, rcSlider, Notifications, axiosInstance, axios) { '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'), require('js-cookie')) :
+  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', 'js-cookie'], factory) :
+  (global = global || self, global.MaterialSelector = 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, global.Cookies));
+}(this, (function (React, styled, EllipsisLoader, PageReady, AnimateHeight, numeral, stylisRuleSheet, reactDom, PropTypes, raf, AutosizeInput, reactTransitionGroup, functions, rcSlider, Notifications, axios, Cookies) { 'use strict';
 
   var React__default = 'default' in React ? React['default'] : React;
   var styled__default = 'default' in styled ? styled['default'] : styled;
@@ -15,8 +15,8 @@
   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;
-  axiosInstance = axiosInstance && Object.prototype.hasOwnProperty.call(axiosInstance, 'default') ? axiosInstance['default'] : axiosInstance;
   axios = axios && Object.prototype.hasOwnProperty.call(axios, 'default') ? axios['default'] : axios;
+  Cookies = Cookies && Object.prototype.hasOwnProperty.call(Cookies, 'default') ? Cookies['default'] : Cookies;
 
   function ownKeys(object, enumerableOnly) {
     var keys = Object.keys(object);
@@ -9586,9 +9586,9 @@
   };
 
   var _templateObject$D;
-  var StyledHeader = styled__default.h5(_templateObject$D || (_templateObject$D = _taggedTemplateLiteral(["\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n\n  @media (max-width: ", ") {\n    display: block;\n  }\n\n  .icon-header__left {\n    display: flex;\n    flex-flow: row nowrap;\n    align-items: center;\n\n    @media (max-width: ", ") {\n      align-self: flex-start;\n    }\n\n    svg {\n      height: 1.5em;\n      width: 1.5em;\n      margin-right: ", ";\n    }\n  }\n\n  .icon-header__right {\n    display: flex;\n    flex-grow: 1;\n    justify-content: flex-end;\n  }\n"])), media.sm, media.sm, function (props) {
+  var StyledHeader = styled__default.h5(_templateObject$D || (_templateObject$D = _taggedTemplateLiteral(["\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n\n  @media (max-width: ", ") {\n    display: block;\n  }\n\n  .icon-header__left {\n    display: flex;\n    flex-flow: row nowrap;\n    align-items: center;\n\n    @media (max-width: ", ") {\n      align-self: flex-start;\n    }\n\n    svg {\n      height: 1.5em;\n      width: 1.5em;\n      margin-right: ", ";\n    }\n  }\n\n  .icon-header__right {\n    display: flex;\n    flex-grow: 1;\n    justify-content: flex-end;\n\n    @media (max-width: ", ") {\n      justify-content: flex-start;\n    }\n  }\n"])), media.sm, media.sm, function (props) {
     return props.theme.marginPaddings[1];
-  });
+  }, media.sm);
 
   /**
    * IconHeader can render the standard Luxity Page/Section Header nodes with SVG
@@ -9633,7 +9633,7 @@
   });
 
   var _templateObject$E;
-  var NotifyContainer = styled__default.div(_templateObject$E || (_templateObject$E = _taggedTemplateLiteral(["\n  .page-ready {\n    display: flex;\n    align-items: center;\n  }\n\n  .notification-settings {\n    display: flex;\n    align-items: center;\n\n    @media (max-width: 768px) {\n      flex-direction: column;\n      align-items: flex-end;\n      padding: 10px 0;\n    }\n  }\n\n  .notification-dropdown-label {\n    margin-left: 20px;\n  }\n\n  .loader {\n    min-width: 150px;\n  }\n\n  .notification-dropdown-select-container {\n    min-width: 110px;\n\n    .notification-dropdown-select__control {\n      min-height: auto;\n      background-color: ", ";\n      border: none;\n      border-radius: 0;\n\n      &--is-focused {\n        border: none;\n        border-radius: 0;\n        box-shadow: none;\n      }\n\n      .notification-dropdown-select__value-container {\n        & > div {\n          padding: 0;\n          margin: 0;\n          color: ", ";\n        }\n        & .notification-dropdown-select__single-value,\n        & .notification-dropdown-select__placeholder {\n          overflow: visible;\n          font-weight: lighter;\n        }\n      }\n    }\n  }\n\n  .notification-dropdown-select__indicators {\n    padding: 0 !important;\n    .notification-dropdown-select__dropdown-indicator {\n      color: ", ";\n    }\n  }\n\n  .notification-dropdown-select__menu {\n    border-radius: 0;\n\n    & > .notification-dropdown-select__menu-list {\n      border-radius: 0;\n\n      & > .notification-dropdown-select__option {\n        font-weight: bold;\n        &:last-child {\n          border-bottom: none;\n        }\n\n        &.notification-dropdown-select__option--is-focused {\n          background-color: ", ";\n          border-style: hidden;\n        }\n        &.notification-dropdown-select__option--is-selected {\n          color: ", ";\n          background-color: ", ";\n          border-style: hidden;\n        }\n        &.notification-dropdown-select__option--is-selected.notification-dropdown-select__option--is-focused {\n          border-style: hidden;\n        }\n      }\n    }\n  }\n"])), function (props) {
+  var NotifyContainer = styled__default.div(_templateObject$E || (_templateObject$E = _taggedTemplateLiteral(["\n  .page-ready {\n    display: flex;\n    align-items: center;\n  }\n\n  .notification-settings {\n    display: flex;\n    align-items: center;\n\n    @media (max-width: ", ") {\n      flex-direction: column;\n      align-items: flex-end;\n      padding: 10px 0;\n    }\n  }\n\n  .notification-row-wrapper {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    width: 100%;\n\n    @media (min-width: ", ") {\n      justify-content: center;\n      width: auto;\n    }\n  }\n\n  .notification-dropdown-label {\n    margin-left: 20px;\n\n    @media (max-width: ", ") {\n      margin-left: 0;\n    }\n  }\n\n  .loader {\n    min-width: 150px;\n  }\n\n  .notification-dropdown-select-container {\n    min-width: 110px;\n\n    .notification-dropdown-select__control {\n      min-height: auto;\n      background-color: ", ";\n      border: none;\n      border-radius: 0;\n\n      &--is-focused {\n        border: none;\n        border-radius: 0;\n        box-shadow: none;\n      }\n\n      .notification-dropdown-select__value-container {\n        & > div {\n          padding: 0;\n          margin: 0;\n          color: ", ";\n        }\n        & .notification-dropdown-select__single-value,\n        & .notification-dropdown-select__placeholder {\n          overflow: visible;\n          font-weight: lighter;\n        }\n      }\n    }\n  }\n\n  .notification-dropdown-select__indicators {\n    padding: 0 !important;\n    .notification-dropdown-select__dropdown-indicator {\n      color: ", ";\n    }\n  }\n\n  .notification-dropdown-select__menu {\n    border-radius: 0;\n\n    & > .notification-dropdown-select__menu-list {\n      border-radius: 0;\n\n      & > .notification-dropdown-select__option {\n        font-weight: bold;\n        &:last-child {\n          border-bottom: none;\n        }\n\n        &.notification-dropdown-select__option--is-focused {\n          background-color: ", ";\n          border-style: hidden;\n        }\n        &.notification-dropdown-select__option--is-selected {\n          color: ", ";\n          background-color: ", ";\n          border-style: hidden;\n        }\n        &.notification-dropdown-select__option--is-selected.notification-dropdown-select__option--is-focused {\n          border-style: hidden;\n        }\n      }\n    }\n  }\n"])), media.sm, media.lg, media.sm, function (props) {
     return props.theme.colors.ntrlMin;
   }, function (props) {
     return props.theme.colors.base;
@@ -9747,7 +9747,7 @@
         }, /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
           className: "notification-settings"
         }, isVip && /*#__PURE__*/React__default.createElement("div", {
-          className: "flex justify-center items-center"
+          className: "notification-row-wrapper"
         }, /*#__PURE__*/React__default.createElement("div", {
           className: "notification-dropdown-label"
         }, "Notify me via WhatsApp:\xA0"), updating ? /*#__PURE__*/React__default.createElement(EllipsisLoader, null) : /*#__PURE__*/React__default.createElement(index$1, {
@@ -9766,7 +9766,7 @@
           },
           value: whatsappSelectedOption
         })), /*#__PURE__*/React__default.createElement("div", {
-          className: "flex justify-center items-center"
+          className: "notification-row-wrapper"
         }, /*#__PURE__*/React__default.createElement("div", {
           className: "notification-dropdown-label"
         }, "Notify me via Email:\xA0"), updating ? /*#__PURE__*/React__default.createElement(EllipsisLoader, null) : /*#__PURE__*/React__default.createElement(index$1, {
@@ -11009,6 +11009,127 @@
     }));
   });
 
+  function getToken() {
+    var _Cookies$get;
+
+    return (_Cookies$get = Cookies.get('_tk')) === null || _Cookies$get === void 0 ? void 0 : _Cookies$get.replace('*', 'Bearer ');
+  }
+  function setToken(value) {
+    Cookies.set('_tk', value, 30);
+  }
+
+  /** @format */
+
+  function getEncodedSearch(currentUrl) {
+    var splitUrl = currentUrl.split('?');
+    var baseUrl = splitUrl[0];
+    var nextUrlSegments = splitUrl[1].split('&');
+    var nextQueryString = splitUrl[1];
+
+    if (nextUrlSegments.length > 0) {
+      nextQueryString = nextUrlSegments.map(function (v) {
+        var nextValue = v;
+
+        if (v.includes('search=')) {
+          var temp = v.split('=');
+          nextValue = "".concat(temp[0], "=").concat(encodeURIComponent(temp[1]));
+        }
+
+        return nextValue;
+      }).join('&');
+    }
+
+    return "".concat(baseUrl, "?").concat(nextQueryString);
+  }
+  /**
+   * Gets an instance of Axios that is configured with the custom failure handlers
+   * @param {Function} onAuthFailed - callback triggers when auth fails - ie, server error is one of ['token_invalid', 'token_not_provided', 'user_not_found', 'token_expired'] or http status is one of [401, 503, 400]
+   * @param {Function} onForbidden - callback triggers when http status = 403
+   */
+
+
+  var axiosInstance = function axiosInstance(onAuthFailed, onForbidden) {
+    var instance = axios.create({
+      validateStatus: function validateStatus(status) {
+        return status >= 200 && status < 300;
+      }
+    });
+    var token = getToken();
+
+    if (token !== '') {
+      instance.defaults.headers.common.Authorization = token;
+    }
+
+    instance.defaults.headers.common['Content-Type'] = 'application/json;charset=UTF-8'; // Add a request interceptor
+
+    instance.interceptors.request.use(function (request, error) {
+      if (error) {
+        return Promise.reject(error.response);
+      }
+
+      if (request.url.includes('search') && request.url.includes('?')) {
+        // do some uri manipulation for ie
+        // https://stackoverflow.com/questions/18220057
+        // eslint-disable-next-line no-param-reassign
+        request.url = getEncodedSearch(request.url);
+      } // eslint-disable-next-line no-param-reassign
+
+
+      request.headers.common['Content-Type'] = 'application/json; charset=utf-8';
+
+      if (typeof request.body === 'undefined') {
+        request.body = {};
+      }
+
+      token = getToken();
+
+      if (token !== '') {
+        // eslint-disable-next-line no-param-reassign
+        request.headers.common.Authorization = token;
+      }
+
+      return request;
+    }, function (error) {
+      return Promise.reject(error.message);
+    }); // Add a response interceptor
+
+    instance.interceptors.response.use(function (response, error) {
+      if (error) {
+        return Promise.reject(error.response);
+      }
+
+      if (response.headers.authorization) {
+        setToken(response.headers.authorization);
+      }
+
+      return response;
+    }, function (error) {
+      if (error.response) {
+        // network error
+        if (error.response.data && error.response.data.error && (error.response.data.error === 'token_invalid' || error.response.data.error === 'token_not_provided' || error.response.data.error === 'user_not_found' || error.response.data.error === 'token_expired') || error.response.status === 401 || error.response.status === 503 || error.response.status === 400) {
+          onAuthFailed();
+        } // if (error.response.status === 500) {
+        //   // INTERNAL SERVER ERROR
+        //   store.dispatch({
+        //     type: AppConstants.OVERLAY.SERVER_ERROR,
+        //   });
+        //   return Promise.reject(error.response);
+        // }
+
+
+        if (error.response.status === 403) {
+          // FORBIDDEN
+          onForbidden();
+        }
+
+        return Promise.reject(error.response);
+      }
+
+      return Promise.reject(error);
+    });
+    return instance;
+  }; // NOTE: this to be instanciated with params: onAuthFailed, onForbidden
+
   var _excluded$8 = ["children"];
 
   var DropdownSelector = function DropdownSelector(_ref) {