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

package/AddProductInterest.js

@@ -1,12 +1,13 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('styled-components'), require('helpers/axios'), require('react-notify-toast'), require('stylis-rule-sheet'), require('react-dom'), require('prop-types'), require('raf'), require('react-input-autosize'), require('react-transition-group')) :
-  typeof define === 'function' && define.amd ? define(['react', 'styled-components', 'helpers/axios', 'react-notify-toast', 'stylis-rule-sheet', 'react-dom', 'prop-types', 'raf', 'react-input-autosize', 'react-transition-group'], factory) :
-  (global = global || self, global.AddProductInterest = factory(global.React, global.styled, global.axiosInstance, global['react-notify-toast'], global['stylis-rule-sheet'], global.reactDom, global.PropTypes, global.raf, global['react-input-autosize'], global['react-transition-group']));
-}(this, (function (React, styled, axiosInstance, Notifications, stylisRuleSheet, reactDom, PropTypes, raf, AutosizeInput, reactTransitionGroup) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('styled-components'), require('axios'), require('js-cookie'), require('react-notify-toast'), require('stylis-rule-sheet'), require('react-dom'), require('prop-types'), require('raf'), require('react-input-autosize'), require('react-transition-group')) :
+  typeof define === 'function' && define.amd ? define(['react', 'styled-components', 'axios', 'js-cookie', 'react-notify-toast', 'stylis-rule-sheet', 'react-dom', 'prop-types', 'raf', 'react-input-autosize', 'react-transition-group'], factory) :
+  (global = global || self, global.AddProductInterest = factory(global.React, global.styled, global.axios, global.Cookies, global['react-notify-toast'], global['stylis-rule-sheet'], global.reactDom, global.PropTypes, global.raf, global['react-input-autosize'], global['react-transition-group']));
+}(this, (function (React, styled, axios, Cookies, Notifications, stylisRuleSheet, reactDom, PropTypes, raf, AutosizeInput, reactTransitionGroup) { 'use strict';
 
   var React__default = 'default' in React ? React['default'] : React;
   var styled__default = 'default' in styled ? styled['default'] : styled;
-  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;
   var Notifications__default = 'default' in Notifications ? Notifications['default'] : Notifications;
   stylisRuleSheet = stylisRuleSheet && Object.prototype.hasOwnProperty.call(stylisRuleSheet, 'default') ? stylisRuleSheet['default'] : stylisRuleSheet;
   PropTypes = PropTypes && Object.prototype.hasOwnProperty.call(PropTypes, 'default') ? PropTypes['default'] : PropTypes;
@@ -559,6 +560,127 @@
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
   }
 
+  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 defaultNotifyTime = 5000;
   var error = function error(message) {
     Notifications.notify.show(message, 'error', defaultNotifyTime);

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

package/IconHeader.js

@@ -108,9 +108,9 @@
   });
 
   var _templateObject;
-  var StyledHeader = styled__default.h5(_templateObject || (_templateObject = _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 || (_templateObject = _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

package/Interests.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('styled-components'), require('react-notify-toast'), require('@bonlineza/b-lib/EllipsisLoader'), require('@bonlineza/b-lib/PageReady'), 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('numeral'), require('helpers/axios')) :
-  typeof define === 'function' && define.amd ? define(['react', 'styled-components', 'react-notify-toast', '@bonlineza/b-lib/EllipsisLoader', '@bonlineza/b-lib/PageReady', 'stylis-rule-sheet', 'react-dom', 'prop-types', 'raf', 'react-input-autosize', 'react-transition-group', '@bonlineza/b-lib/functions', 'rc-slider', 'numeral', 'helpers/axios'], factory) :
-  (global = global || self, global.Interests = factory(global.React, global.styled, global['react-notify-toast'], global.EllipsisLoader, global.PageReady, global['stylis-rule-sheet'], global.reactDom, global.PropTypes, global.raf, global['react-input-autosize'], global['react-transition-group'], global.function, global.rcSlider, global.numeral, global.axiosInstance));
-}(this, (function (React, styled, Notifications, EllipsisLoader, PageReady, stylisRuleSheet, reactDom, PropTypes, raf, AutosizeInput, reactTransitionGroup, functions, rcSlider, numeral, axiosInstance) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('styled-components'), require('react-notify-toast'), require('@bonlineza/b-lib/EllipsisLoader'), require('@bonlineza/b-lib/PageReady'), 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('numeral'), require('axios'), require('js-cookie')) :
+  typeof define === 'function' && define.amd ? define(['react', 'styled-components', 'react-notify-toast', '@bonlineza/b-lib/EllipsisLoader', '@bonlineza/b-lib/PageReady', 'stylis-rule-sheet', 'react-dom', 'prop-types', 'raf', 'react-input-autosize', 'react-transition-group', '@bonlineza/b-lib/functions', 'rc-slider', 'numeral', 'axios', 'js-cookie'], factory) :
+  (global = global || self, global.Interests = factory(global.React, global.styled, global['react-notify-toast'], global.EllipsisLoader, global.PageReady, global['stylis-rule-sheet'], global.reactDom, global.PropTypes, global.raf, global['react-input-autosize'], global['react-transition-group'], global.function, global.rcSlider, global.numeral, global.axios, global.Cookies));
+}(this, (function (React, styled, Notifications, EllipsisLoader, PageReady, stylisRuleSheet, reactDom, PropTypes, raf, AutosizeInput, reactTransitionGroup, functions, rcSlider, numeral, axios, Cookies) { 'use strict';
 
   var React__default = 'default' in React ? React['default'] : React;
   var styled__default = 'default' in styled ? styled['default'] : styled;
@@ -14,7 +14,8 @@
   raf = raf && Object.prototype.hasOwnProperty.call(raf, 'default') ? raf['default'] : raf;
   AutosizeInput = AutosizeInput && Object.prototype.hasOwnProperty.call(AutosizeInput, 'default') ? AutosizeInput['default'] : AutosizeInput;
   numeral = numeral && Object.prototype.hasOwnProperty.call(numeral, 'default') ? numeral['default'] : numeral;
-  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);
@@ -810,9 +811,9 @@
   });
 
   var _templateObject;
-  var StyledHeader = styled__default.h5(_templateObject || (_templateObject = _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 || (_templateObject = _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
@@ -7525,7 +7526,7 @@
   var index$1 = manageState(Select);
 
   var _templateObject$1;
-  var NotifyContainer = styled__default.div(_templateObject$1 || (_templateObject$1 = _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$1 || (_templateObject$1 = _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;
@@ -7652,7 +7653,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, {
@@ -7671,7 +7672,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, {
@@ -10872,6 +10873,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) {