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

package/LuxityDesktopHeader.js

@@ -434,37 +434,6 @@
     }, contactNumber)));
   };
 
-  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 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 SearchResults = function SearchResults(_ref) {
     var searchValue = _ref.searchValue,
         searchResults = _ref.searchResults,
@@ -721,6 +690,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.toLowerCase() !== name.toLowerCase();
+    })) !== null && _categories$filter !== void 0 ? _categories$filter : [];
+  };
+
   var LuxityDesktopHeader = function LuxityDesktopHeader(_ref) {
     var accountIcon = _ref.accountIcon,
         cartIcon = _ref.cartIcon,
@@ -728,12 +705,6 @@
         cartCount = _ref.cartCount,
         logoSrc = _ref.logoSrc,
         categoryElements = _ref.categoryElements,
-        newBrandsImage = _ref.newBrandsImage,
-        bagsImage = _ref.bagsImage,
-        shoesImage = _ref.shoesImage,
-        clothingImage = _ref.clothingImage,
-        accessoriesImage = _ref.accessoriesImage,
-        watchesImage = _ref.watchesImage,
         stores = _ref.stores,
         contactNumber = _ref.contactNumber,
         productsUrl = _ref.productsUrl,
@@ -748,7 +719,6 @@
         ourStoryLink = _ref.ourStoryLink,
         onLogoClick = _ref.onLogoClick,
         endpoint = _ref.endpoint,
-        menuData = _ref.menuData,
         onSearchSubmit = _ref.onSearchSubmit,
         onProductIdsReceived = _ref.onProductIdsReceived,
         currency = _ref.currency,
@@ -760,7 +730,8 @@
         name = _ref.name,
         isVip = _ref.isVip,
         shop = _ref.shop,
-        app = _ref.app;
+        app = _ref.app,
+        categoryConfig = _ref.categoryConfig;
 
     var _useState = React.useState(''),
         _useState2 = _slicedToArray(_useState, 2),
@@ -772,16 +743,7 @@
         loading = _useState4[0],
         setLoading = _useState4[1];
 
-    var _useState5 = React.useState({
-      latestArrivals: [],
-      bags: [],
-      shoes: [],
-      clothing: [],
-      accessories: [],
-      watches: [],
-      accessoriesCategories: [],
-      apparelStyles: []
-    }),
+    var _useState5 = React.useState({}),
         _useState6 = _slicedToArray(_useState5, 2),
         dropdownData = _useState6[0],
         setDropdownData = _useState6[1];
@@ -882,35 +844,60 @@
       }
     };
 
-    function addCategoryToElements(elements, categoryName) {
+    React.useMemo(function () {
+      setLoading(true);
+      axios.get("".concat(categoryConfig.menuData)).then(function (_ref2) {
+        var data = _ref2.data;
+        setLoading(false);
+        setDropdownData(data);
+      }).catch(function () {
+        return setHasError(true);
+      });
+    }, [categoryConfig.menuData]);
+
+    var addCategoryToElements = function addCategoryToElements(elements, categoryName) {
       return elements.map(function (element) {
         return _objectSpread2(_objectSpread2({}, element), {}, {
           category: categoryName
         });
       });
-    }
+    };
 
-    React.useMemo(function () {
-      setLoading(true);
-      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
-          });
+    var renderDropdownLinks = function renderDropdownLinks() {
+      return categoryConfig.categories.map(function (category) {
+        var title = category.title,
+            imageSrc = category.imageSrc,
+            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);
+        }
+
+        return /*#__PURE__*/React__default.createElement(DropdownLink, {
+          key: categorySlug,
+          title: title,
+          imageSrc: imageSrc,
+          categoryElements: categoryElementsProcessed,
+          brandElements: dropdownData[elementsKey] || [],
+          productsUrl: productsUrl,
+          categorySlug: categorySlug,
+          categoryTitle: categoryName,
+          isLoading: loading,
+          hasError: hasError,
+          LinkComponent: LinkComponent
         });
-      }).catch(function () {
-        return setHasError(true);
       });
-    }, [menuData]);
+    };
 
     var getMarginRight = function getMarginRight(userIsVip, userName) {
       if (userIsVip) return '15px';
@@ -967,74 +954,9 @@
       setSearchValue: setSearchValue
     }), /*#__PURE__*/React__default.createElement("nav", {
       className: "navbar__nav-links navbar__nav-links--wrap"
-    }, /*#__PURE__*/React__default.createElement(DropdownLink, {
-      title: "New",
-      imageSrc: newBrandsImage,
-      categoryElements: categoryElements,
-      brandElements: dropdownData.latestArrivals,
-      productsUrl: productsUrl,
-      categorySlug: "brands",
-      categoryTitle: "Brands",
-      isLoading: loading,
-      hasError: hasError,
-      LinkComponent: LinkComponent
-    }), /*#__PURE__*/React__default.createElement(DropdownLink, {
-      title: "Bags",
-      imageSrc: bagsImage,
-      categoryElements: addCategoryToElements(categoryElements, categories.bags.slug),
-      brandElements: dropdownData.bags,
-      productsUrl: productsUrl,
-      categorySlug: categories.bags.slug,
-      categoryTitle: categories.bags.name,
-      isLoading: loading,
-      hasError: hasError,
-      LinkComponent: LinkComponent
-    }), /*#__PURE__*/React__default.createElement(DropdownLink, {
-      title: "Shoes",
-      imageSrc: shoesImage,
-      categoryElements: addCategoryToElements(categoryElements, categories.shoes.slug),
-      brandElements: dropdownData.shoes,
-      productsUrl: productsUrl,
-      categorySlug: categories.shoes.slug,
-      categoryTitle: categories.shoes.name,
-      isLoading: loading,
-      hasError: hasError,
-      LinkComponent: LinkComponent
-    }), /*#__PURE__*/React__default.createElement(DropdownLink, {
-      title: "Clothing",
-      imageSrc: clothingImage,
-      categoryElements: addCategoryToElements(dropdownData.apparelStyles, categories.clothing.slug),
-      brandElements: dropdownData.apparel,
-      productsUrl: productsUrl,
-      categorySlug: categories.clothing.slug,
-      categoryTitle: categories.clothing.name,
-      isLoading: loading,
-      hasError: hasError,
-      LinkComponent: LinkComponent
-    }), /*#__PURE__*/React__default.createElement(DropdownLink, {
-      title: "Accessories",
-      imageSrc: accessoriesImage,
-      categoryElements: removeCategoryByName(dropdownData.accessoriesCategories, 'ACCESSORIES'),
-      brandElements: dropdownData.accessories,
-      productsUrl: productsUrl,
-      categorySlug: categories.accessories.slug,
-      categoryTitle: categories.accessories.name,
-      isLoading: loading,
-      hasError: hasError,
-      LinkComponent: LinkComponent
-    }), /*#__PURE__*/React__default.createElement(DropdownLink, {
-      title: "Watches",
-      imageSrc: watchesImage,
-      categoryElements: addCategoryToElements(categoryElements, categories.watches.slug),
-      brandElements: dropdownData.watches,
-      productsUrl: productsUrl,
-      categorySlug: categories.watches.slug,
-      categoryTitle: categories.watches.name,
-      isLoading: loading,
-      hasError: hasError,
-      LinkComponent: LinkComponent
-    }), /*#__PURE__*/React__default.createElement("li", {
-      className: "navbar__link"
+    }, renderDropdownLinks(), !!stores.length && /*#__PURE__*/React__default.createElement("li", {
+      className: "navbar__link",
+      key: "Stores"
     }, /*#__PURE__*/React__default.createElement(LinkComponent, {
       href: contactUsLink,
       className: "navbar__link-item navbar__link-item--desktop"

package/LuxityFooter.js

@@ -2102,13 +2102,13 @@
         setError = _useForm.setError;
 
     var renderLinks = function renderLinks(links, title) {
-      return /*#__PURE__*/React__default.createElement("div", {
+      return !!links.length && /*#__PURE__*/React__default.createElement("div", {
         className: "footer__link-container"
       }, /*#__PURE__*/React__default.createElement("div", {
         className: "footer__link-title"
       }, title), /*#__PURE__*/React__default.createElement("div", {
         className: "footer__links"
-      }, !!links.length && links.map(function (link) {
+      }, links.map(function (link) {
         return /*#__PURE__*/React__default.createElement("div", {
           className: "footer__link-wrapper",
           key: link.label
@@ -2291,13 +2291,13 @@
     }), /*#__PURE__*/React__default.createElement(AccordionSection, {
       title: "POPULAR",
       links: popularLinks
-    }), /*#__PURE__*/React__default.createElement(AccordionSection, {
+    }), !!sellLinks.length && /*#__PURE__*/React__default.createElement(AccordionSection, {
       title: "SELL",
       links: sellLinks
     }), /*#__PURE__*/React__default.createElement(AccordionSection, {
       title: "COMPANY",
       links: companyLinks
-    }), /*#__PURE__*/React__default.createElement(AccordionSection, {
+    }), !!storeLinks.length && /*#__PURE__*/React__default.createElement(AccordionSection, {
       title: "CONNECT",
       links: storeLinks
     }), /*#__PURE__*/React__default.createElement("div", {

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'), 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.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.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.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, 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) {