@bonlineza/luxity-lib 2.35.4 → 2.35.6

package/build/bundle.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-animate-height'), require('styled-components'), require('numeral'), 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('react-notify-toast'), require('helpers/axios'), require('axios')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'react-animate-height', 'styled-components', 'numeral', '@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', 'react-notify-toast', 'helpers/axios', 'axios'], factory) :
-  (global = global || self, factory(global.blib = {}, global.React, global.AnimateHeight, global.styled, global.numeral, 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['react-notify-toast'], global.axiosInstance, global.axios));
-}(this, (function (exports, React, AnimateHeight, styled, numeral, EllipsisLoader, PageReady, stylisRuleSheet, reactDom, PropTypes, raf, AutosizeInput, reactTransitionGroup, functions, rcSlider, Notifications, axiosInstance, axios) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-animate-height'), require('styled-components'), require('numeral'), 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('react-notify-toast'), require('axios'), require('js-cookie')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'react-animate-height', 'styled-components', 'numeral', '@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', 'react-notify-toast', 'axios', 'js-cookie'], factory) :
+  (global = global || self, factory(global.blib = {}, global.React, global.AnimateHeight, global.styled, global.numeral, 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['react-notify-toast'], global.axios, global.Cookies));
+}(this, (function (exports, React, AnimateHeight, styled, numeral, EllipsisLoader, PageReady, stylisRuleSheet, reactDom, PropTypes, raf, AutosizeInput, reactTransitionGroup, functions, rcSlider, Notifications, axios, Cookies) { 'use strict';
 
   var React__default = 'default' in React ? React['default'] : React;
   AnimateHeight = AnimateHeight && Object.prototype.hasOwnProperty.call(AnimateHeight, 'default') ? AnimateHeight['default'] : AnimateHeight;
@@ -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);
@@ -11443,6 +11443,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) {
@@ -15648,143 +15769,6 @@
 
   var index$6 = themed(LuxityFooter);
 
-  var cssUnit = {
-      cm: true,
-      mm: true,
-      in: true,
-      px: true,
-      pt: true,
-      pc: true,
-      em: true,
-      ex: true,
-      ch: true,
-      rem: true,
-      vw: true,
-      vh: true,
-      vmin: true,
-      vmax: true,
-      "%": true,
-  };
-  /**
-   * If size is a number, append px to the value as default unit.
-   * If size is a string, validate against list of valid units.
-   * If unit is valid, return size as is.
-   * If unit is invalid, console warn issue, replace with px as the unit.
-   *
-   * @param {(number | string)} size
-   * @return {LengthObject} LengthObject
-   */
-  function parseLengthAndUnit(size) {
-      if (typeof size === "number") {
-          return {
-              value: size,
-              unit: "px",
-          };
-      }
-      var value;
-      var valueString = (size.match(/^[0-9.]*/) || "").toString();
-      if (valueString.includes(".")) {
-          value = parseFloat(valueString);
-      }
-      else {
-          value = parseInt(valueString, 10);
-      }
-      var unit = (size.match(/[^0-9]*$/) || "").toString();
-      if (cssUnit[unit]) {
-          return {
-              value: value,
-              unit: unit,
-          };
-      }
-      console.warn("React Spinners: ".concat(size, " is not a valid css value. Defaulting to ").concat(value, "px."));
-      return {
-          value: value,
-          unit: "px",
-      };
-  }
-  /**
-   * Take value as an input and return valid css value
-   *
-   * @param {(number | string)} value
-   * @return {string} valid css value
-   */
-  function cssValue(value) {
-      var lengthWithunit = parseLengthAndUnit(value);
-      return "".concat(lengthWithunit.value).concat(lengthWithunit.unit);
-  }
-
-  var createAnimation = function (loaderName, frames, suffix) {
-      var animationName = "react-spinners-".concat(loaderName, "-").concat(suffix);
-      if (typeof window == "undefined" || !window.document) {
-          return animationName;
-      }
-      var styleEl = document.createElement("style");
-      document.head.appendChild(styleEl);
-      var styleSheet = styleEl.sheet;
-      var keyFrames = "\n    @keyframes ".concat(animationName, " {\n      ").concat(frames, "\n    }\n  ");
-      if (styleSheet) {
-          styleSheet.insertRule(keyFrames, 0);
-      }
-      return animationName;
-  };
-
-  var __assign = (undefined && undefined.__assign) || function () {
-      __assign = Object.assign || function(t) {
-          for (var s, i = 1, n = arguments.length; i < n; i++) {
-              s = arguments[i];
-              for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                  t[p] = s[p];
-          }
-          return t;
-      };
-      return __assign.apply(this, arguments);
-  };
-  var __rest = (undefined && undefined.__rest) || function (s, e) {
-      var t = {};
-      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-          t[p] = s[p];
-      if (s != null && typeof Object.getOwnPropertySymbols === "function")
-          for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-              if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                  t[p[i]] = s[p[i]];
-          }
-      return t;
-  };
-  var beat = createAnimation("BeatLoader", "50% {transform: scale(0.75);opacity: 0.2} 100% {transform: scale(1);opacity: 1}", "beat");
-  function BeatLoader(_a) {
-      var _b = _a.loading, loading = _b === void 0 ? true : _b, _c = _a.color, color = _c === void 0 ? "#000000" : _c, _d = _a.speedMultiplier, speedMultiplier = _d === void 0 ? 1 : _d, _e = _a.cssOverride, cssOverride = _e === void 0 ? {} : _e, _f = _a.size, size = _f === void 0 ? 15 : _f, _g = _a.margin, margin = _g === void 0 ? 2 : _g, additionalprops = __rest(_a, ["loading", "color", "speedMultiplier", "cssOverride", "size", "margin"]);
-      var wrapper = __assign({ display: "inherit" }, cssOverride);
-      var style = function (i) {
-          return {
-              display: "inline-block",
-              backgroundColor: color,
-              width: cssValue(size),
-              height: cssValue(size),
-              margin: cssValue(margin),
-              borderRadius: "100%",
-              animation: "".concat(beat, " ").concat(0.7 / speedMultiplier, "s ").concat(i % 2 ? "0s" : "".concat(0.35 / speedMultiplier, "s"), " infinite linear"),
-              animationFillMode: "both",
-          };
-      };
-      if (!loading) {
-          return null;
-      }
-      return (React.createElement("span", __assign({ style: wrapper }, additionalprops),
-          React.createElement("span", { style: style(1) }),
-          React.createElement("span", { style: style(2) }),
-          React.createElement("span", { style: style(3) })));
-  }
-
-  var searchProducts = function searchProducts(search, limit) {
-    return {
-      query: "\n      query SearchProducts($search: String!, $limit: Int!) {\n        luxity_products_serach_results(search: $search, limit: $limit) {\n          brands {\n            name\n            link\n          }\n          products {\n            name\n            link\n          }\n          luxity_product_ids\n        }\n      }\n    ",
-      variables: {
-        search: search,
-        limit: limit
-      }
-    };
-  };
-
   var Dropdown$1 = function Dropdown(_ref) {
     var title = _ref.title,
         imageSrc = _ref.imageSrc,
@@ -15977,56 +15961,251 @@
   };
 
   var SearchResults = function SearchResults(_ref) {
+    var _searchResults$brands, _searchResults$produc, _searchResults$brands2, _searchResults$produc2, _initialSearchData$tr, _initialSearchData$la, _limitBrands, _limitBrands2, _initialSearchData$la2, _searchResults$produc3;
+
     var searchValue = _ref.searchValue,
         searchResults = _ref.searchResults,
         onViewAll = _ref.onViewAll,
         searchResultsRef = _ref.searchResultsRef,
         onSearchSubmit = _ref.onSearchSubmit,
-        setSearchValue = _ref.setSearchValue;
+        setSearchValue = _ref.setSearchValue,
+        initialSearchData = _ref.initialSearchData,
+        isSearchFocused = _ref.isSearchFocused,
+        setIsSearchFocused = _ref.setIsSearchFocused,
+        currency = _ref.currency,
+        currencySymbol = _ref.currencySymbol;
 
-    if (searchValue.trim().length >= 3) {
-      if (searchResults.brands.length === 0 && searchResults.products.length === 0) {
-        return null;
-      }
+    var _useState = React.useState(false),
+        _useState2 = _slicedToArray(_useState, 2),
+        isMobile = _useState2[0],
+        setIsMobile = _useState2[1];
 
-      return /*#__PURE__*/React__default.createElement("div", {
-        className: "z-50 absolute md:top-14 font-body bg-white w-full lg:w-1/2 flex flex-col md:flex-row md:divide-x divide-black lg:mt-1 shadow-md",
-        ref: searchResultsRef
-      }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-        className: "w-full lg:w-1/3"
-      }, /*#__PURE__*/React__default.createElement("p", {
-        className: "font-bold p-2 px-4"
-      }, "Brands"), searchResults.brands.map(function (brand) {
-        return /*#__PURE__*/React__default.createElement("a", {
-          key: brand.link,
-          href: brand.link,
-          className: ""
-        }, /*#__PURE__*/React__default.createElement("div", {
-          className: "p-2 px-4 hover:bg-gray-100"
-        }, brand.name));
+    React.useEffect(function () {
+      var checkIfMobile = function checkIfMobile() {
+        setIsMobile(window.innerWidth <= 1024);
+      };
+
+      checkIfMobile();
+      window.addEventListener('resize', checkIfMobile);
+      return function () {
+        window.removeEventListener('resize', checkIfMobile);
+      };
+    }, []);
+    var shouldShowInitialData = isSearchFocused && (!searchValue || searchValue.trim().length < 3) || (searchValue === null || searchValue === void 0 ? void 0 : searchValue.trim().length) >= 3 && !(searchResults !== null && searchResults !== void 0 && (_searchResults$brands = searchResults.brands) !== null && _searchResults$brands !== void 0 && _searchResults$brands.length) && !(searchResults !== null && searchResults !== void 0 && (_searchResults$produc = searchResults.products) !== null && _searchResults$produc !== void 0 && _searchResults$produc.length);
+    var hasResults = (searchResults === null || searchResults === void 0 ? void 0 : (_searchResults$brands2 = searchResults.brands) === null || _searchResults$brands2 === void 0 ? void 0 : _searchResults$brands2.length) > 0 || (searchResults === null || searchResults === void 0 ? void 0 : (_searchResults$produc2 = searchResults.products) === null || _searchResults$produc2 === void 0 ? void 0 : _searchResults$produc2.length) > 0;
+    var hasInitialData = (initialSearchData === null || initialSearchData === void 0 ? void 0 : (_initialSearchData$tr = initialSearchData.trending_brands) === null || _initialSearchData$tr === void 0 ? void 0 : _initialSearchData$tr.length) > 0 || (initialSearchData === null || initialSearchData === void 0 ? void 0 : (_initialSearchData$la = initialSearchData.latest_products) === null || _initialSearchData$la === void 0 ? void 0 : _initialSearchData$la.length) > 0;
+
+    if (!hasResults && !hasInitialData) {
+      return null;
+    }
+
+    if (!isSearchFocused && !hasResults) {
+      return null;
+    }
+
+    var formatPrice = function formatPrice(price) {
+      var formatter = new Intl.NumberFormat(undefined, {
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 2
+      });
+      return "".concat(currencySymbol).concat(formatter.format(price));
+    };
+
+    var renderProductCard = function renderProductCard(product) {
+      var selectedPrice = product.prices ? product.prices.find(function (p) {
+        return p.currency === currency;
+      }) : {
+        price: product.price,
+        retail_price: product.est_retail_price
+      };
+      return /*#__PURE__*/React__default.createElement("a", {
+        key: product.link,
+        href: product.link,
+        className: "product-card"
+      }, (product.image_url || product.featured_image) && /*#__PURE__*/React__default.createElement("div", {
+        className: "product-card__image-container"
+      }, /*#__PURE__*/React__default.createElement("img", {
+        src: product.featured_image,
+        alt: product.name,
+        className: "product-card__image"
       })), /*#__PURE__*/React__default.createElement("div", {
-        className: "w-full lg:w-2/3"
-      }, /*#__PURE__*/React__default.createElement("p", {
-        className: "font-bold p-2 px-4"
-      }, "Products"), searchResults.products.map(function (product) {
-        return /*#__PURE__*/React__default.createElement("a", {
-          key: product.link,
-          href: product.link
-        }, /*#__PURE__*/React__default.createElement("div", {
-          className: "p-2 px-4 hover:bg-gray-100"
-        }, product.name));
-      }), /*#__PURE__*/React__default.createElement("button", {
-        type: "button",
-        onClick: function onClick() {
-          onViewAll();
+        className: "product-card__details"
+      }, /*#__PURE__*/React__default.createElement("h3", {
+        className: "product-card__name"
+      }, shouldShowInitialData ? /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement("span", {
+        className: "product-card__brand-name"
+      }, product.brand.toUpperCase()), ' ', product.name) : product.name), /*#__PURE__*/React__default.createElement("div", {
+        className: "product-card__info-row"
+      }, /*#__PURE__*/React__default.createElement("div", {
+        className: "product-card__price-group"
+      }, /*#__PURE__*/React__default.createElement("div", {
+        className: "product-card__price"
+      }, formatPrice(selectedPrice.price)), selectedPrice.retail_price > 1 && /*#__PURE__*/React__default.createElement("div", {
+        className: "product-card__retail-price"
+      }, "Est. Retail: ", formatPrice(selectedPrice.retail_price))), /*#__PURE__*/React__default.createElement("div", {
+        className: "product-card__condition"
+      }, /*#__PURE__*/React__default.createElement("span", {
+        className: "product-card__condition-label"
+      }, "Condition:"), product.condition))));
+    };
+
+    var getBrandLink = function getBrandLink(brand) {
+      return "/products/brands/".concat(brand.slug);
+    };
+
+    var limitBrands = function limitBrands(brands) {
+      if (isMobile && brands && brands.length > 4) {
+        return brands.slice(0, 4);
+      }
+
+      return brands;
+    };
+
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "search-results",
+      ref: searchResultsRef
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "search-results__section"
+    }, /*#__PURE__*/React__default.createElement("h2", {
+      className: "search-results__header"
+    }, shouldShowInitialData ? 'TRENDING SEARCHES' : 'BRANDS'), /*#__PURE__*/React__default.createElement("div", {
+      className: "search-results__list"
+    }, shouldShowInitialData ? (_limitBrands = limitBrands(initialSearchData === null || initialSearchData === void 0 ? void 0 : initialSearchData.trending_brands)) === null || _limitBrands === void 0 ? void 0 : _limitBrands.map(function (brand) {
+      return /*#__PURE__*/React__default.createElement("a", {
+        key: brand.id,
+        href: getBrandLink(brand),
+        className: "search-results__item"
+      }, brand.name);
+    }) : (_limitBrands2 = limitBrands(searchResults === null || searchResults === void 0 ? void 0 : searchResults.brands)) === null || _limitBrands2 === void 0 ? void 0 : _limitBrands2.map(function (brand) {
+      return /*#__PURE__*/React__default.createElement("a", {
+        key: brand.link,
+        href: brand.link,
+        className: "search-results__item"
+      }, brand.name);
+    }))), /*#__PURE__*/React__default.createElement("div", {
+      className: "search-results__section"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "search-results__section-header"
+    }, /*#__PURE__*/React__default.createElement("h2", {
+      className: "search-results__header"
+    }, shouldShowInitialData ? 'POPULAR' : 'TOP MATCHES'), /*#__PURE__*/React__default.createElement("button", {
+      type: "button",
+      className: "search-results__view-all-link",
+      onClick: function onClick() {
+        onViewAll();
+      }
+    }, "View all items")), /*#__PURE__*/React__default.createElement("div", {
+      className: "search-results__product-list"
+    }, shouldShowInitialData ? initialSearchData === null || initialSearchData === void 0 ? void 0 : (_initialSearchData$la2 = initialSearchData.latest_products) === null || _initialSearchData$la2 === void 0 ? void 0 : _initialSearchData$la2.map(renderProductCard) : searchResults === null || searchResults === void 0 ? void 0 : (_searchResults$produc3 = searchResults.products) === null || _searchResults$produc3 === void 0 ? void 0 : _searchResults$produc3.map(renderProductCard)), /*#__PURE__*/React__default.createElement("button", {
+      type: "button",
+      className: "search-results__view-all-button",
+      onClick: function onClick() {
+        onViewAll();
+
+        if (!shouldShowInitialData) {
           onSearchSubmit(searchValue);
           setSearchValue('');
-        },
-        className: "bottom-0 mt-5 py-3 w-full font-body text-center text-white uppercase bg-black hover:bg-gray-950 border border-black transition-all ease-in-out duration-300 cursor-pointer"
-      }, "View all"))));
-    }
+          setIsSearchFocused(false);
+        }
+      }
+    }, "View all items")));
+  };
 
-    return null;
+  var searchProducts = function searchProducts(search, limit, currencyCode) {
+    return {
+      query: "\n      query SearchProducts($search: String!, $limit: Int!, $currencyCode: String!) {\n        luxity_products_serach_results(search: $search, limit: $limit, currency_code: $currencyCode) {\n          brands {\n            name\n            link\n          }\n          products {\n            name\n            link\n            price\n            est_retail_price\n            condition\n            featured_image\n          }\n          luxity_product_ids\n        }\n      }\n    ",
+      variables: {
+        search: search,
+        limit: limit,
+        currencyCode: currencyCode
+      }
+    };
+  };
+
+  var useSearch = function useSearch(_ref) {
+    var endpoint = _ref.endpoint,
+        onProductIdsReceived = _ref.onProductIdsReceived,
+        currency = _ref.currency;
+    var debounce = React.useCallback(function (func, wait) {
+      var timeout;
+      return function executedFunction() {
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+
+        var later = function later() {
+          clearTimeout(timeout);
+          func.apply(void 0, args);
+        };
+
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+      };
+    }, []);
+    var fetchInitialSearchData = React.useCallback(function (initialSearchDataUrl, setInitialSearchView) {
+      axios.get("".concat(initialSearchDataUrl)).then(function (_ref2) {
+        var data = _ref2.data;
+        setInitialSearchView({
+          trending_brands: data.trending_brands,
+          latest_products: data.latest_products
+        });
+      }).catch(function () {
+        setInitialSearchView({
+          trending_brands: [],
+          latest_products: []
+        });
+      });
+    }, []);
+    var performSearch = React.useCallback(function (nextValue, setSearchResults) {
+      if (!nextValue || nextValue.trim() === '') {
+        setSearchResults({
+          brands: [],
+          products: [],
+          luxity_product_ids: []
+        });
+        return;
+      }
+
+      axios.post(endpoint, searchProducts(nextValue, 3, currency)).then(function (response) {
+        var searchResults = response.data.data.luxity_products_serach_results;
+        setSearchResults(searchResults);
+
+        if (searchResults && searchResults.luxity_product_ids) {
+          onProductIdsReceived(searchResults.luxity_product_ids);
+        }
+      }).catch(function () {
+        setSearchResults({
+          brands: [],
+          products: [],
+          luxity_product_ids: []
+        });
+      });
+    }, [endpoint, currency, onProductIdsReceived]);
+    var debouncedSearch = React.useMemo(function () {
+      return debounce(function (nextValue, setSearchResults) {
+        return performSearch(nextValue, setSearchResults);
+      }, 500);
+    }, [debounce, performSearch]);
+    var createDebouncedSearch = React.useCallback(function (setSearchResults) {
+      return function (nextValue) {
+        return debouncedSearch(nextValue, setSearchResults);
+      };
+    }, [debouncedSearch]);
+    var createImmediateSearch = React.useCallback(function (setSearchValue, setSearchResults, onSearchSubmit) {
+      return function (value) {
+        setSearchValue('');
+        setSearchResults({
+          brands: [],
+          products: []
+        });
+        onSearchSubmit(value);
+      };
+    }, []);
+    return {
+      fetchInitialSearchData: fetchInitialSearchData,
+      createDebouncedSearch: createDebouncedSearch,
+      createImmediateSearch: createImmediateSearch
+    };
   };
 
   var LuxityDesktopHeader = function LuxityDesktopHeader(_ref) {
@@ -16057,9 +16236,11 @@
         onLogoClick = _ref.onLogoClick,
         endpoint = _ref.endpoint,
         menuData = _ref.menuData,
+        initialSearchData = _ref.initialSearchData,
         onSearchSubmit = _ref.onSearchSubmit,
         onProductIdsReceived = _ref.onProductIdsReceived,
         currency = _ref.currency,
+        currencySymbol = _ref.currencySymbol,
         currencyOptions = _ref.currencyOptions,
         onCurrencyChange = _ref.onCurrencyChange,
         isCurrencySelectionDisabled = _ref.isCurrencySelectionDisabled,
@@ -16070,6 +16251,15 @@
         shop = _ref.shop,
         app = _ref.app;
 
+    var _useSearch = useSearch({
+      endpoint: endpoint,
+      onProductIdsReceived: onProductIdsReceived,
+      currency: currency
+    }),
+        fetchInitialSearchData = _useSearch.fetchInitialSearchData,
+        createDebouncedSearch = _useSearch.createDebouncedSearch,
+        createImmediateSearch = _useSearch.createImmediateSearch;
+
     var _useState = React.useState(''),
         _useState2 = _slicedToArray(_useState, 2),
         searchValue = _useState2[0],
@@ -16080,7 +16270,12 @@
         loading = _useState4[0],
         setLoading = _useState4[1];
 
-    var _useState5 = React.useState({
+    var _useState5 = React.useState(false),
+        _useState6 = _slicedToArray(_useState5, 2),
+        isSearchFocused = _useState6[0],
+        setIsSearchFocused = _useState6[1];
+
+    var _useState7 = React.useState({
       latestArrivals: [],
       bags: [],
       shoes: [],
@@ -16090,70 +16285,39 @@
       accessoriesCategories: [],
       apparelStyles: []
     }),
-        _useState6 = _slicedToArray(_useState5, 2),
-        dropdownData = _useState6[0],
-        setDropdownData = _useState6[1];
-
-    var _useState7 = React.useState(false),
         _useState8 = _slicedToArray(_useState7, 2),
-        hasError = _useState8[0],
-        setHasError = _useState8[1];
+        dropdownData = _useState8[0],
+        setDropdownData = _useState8[1];
 
-    var _useState9 = React.useState(false),
+    var _useState9 = React.useState({
+      trending_brands: [],
+      latest_products: []
+    }),
         _useState10 = _slicedToArray(_useState9, 2),
-        searchLoading = _useState10[0],
-        setSearchLoading = _useState10[1];
+        initialSearchView = _useState10[0],
+        setInitialSearchView = _useState10[1];
 
-    var _useState11 = React.useState({
+    var _useState11 = React.useState(false),
+        _useState12 = _slicedToArray(_useState11, 2),
+        hasError = _useState12[0],
+        setHasError = _useState12[1];
+
+    var _useState13 = React.useState({
       brands: [],
       products: []
     }),
-        _useState12 = _slicedToArray(_useState11, 2),
-        searchResults = _useState12[0],
-        setSearchResults = _useState12[1];
+        _useState14 = _slicedToArray(_useState13, 2),
+        searchResults = _useState14[0],
+        setSearchResults = _useState14[1];
 
     var searchResultsRef = React.useRef(null);
-
-    var debounce = function debounce(func, wait) {
-      var timeout;
-      return function executedFunction() {
-        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-          args[_key] = arguments[_key];
-        }
-
-        var later = function later() {
-          clearTimeout(timeout);
-          func.apply(void 0, args);
-        };
-
-        clearTimeout(timeout);
-        timeout = setTimeout(later, wait);
-      };
-    };
-
-    var debouncedSearch = React.useCallback(debounce(function (nextValue) {
-      setSearchLoading(true);
-      axios.post(endpoint, searchProducts(nextValue, 6)).then(function (response) {
-        setSearchResults(response.data.data.luxity_products_serach_results);
-        var ids = response.data.data.luxity_products_serach_results.luxity_product_ids;
-        onProductIdsReceived(ids);
-        setSearchLoading(false);
-      }).catch(function () {
-        setSearchLoading(false);
-      });
-    }, 500), [endpoint]);
-    var immediateSearch = React.useCallback(function (value) {
-      setSearchValue('');
-      setSearchResults({
-        brands: [],
-        products: []
-      });
-      onSearchSubmit(value);
-    }, [onSearchSubmit]);
+    var debouncedSearch = createDebouncedSearch(setSearchResults);
+    var immediateSearch = createImmediateSearch(setSearchValue, setSearchResults, onSearchSubmit);
 
     var handleChange = function handleChange(event) {
       var value = event.target.value;
       setSearchValue(value);
+      setIsSearchFocused(true);
 
       if (value.trim().length >= 3) {
         debouncedSearch(value);
@@ -16169,6 +16333,11 @@
       var handleClickOutside = function handleClickOutside(event) {
         if (searchResultsRef.current && !searchResultsRef.current.contains(event.target)) {
           setSearchValue('');
+          setIsSearchFocused(false);
+          setSearchResults({
+            brands: [],
+            products: []
+          });
         }
       };
 
@@ -16188,6 +16357,8 @@
       } else if (event.key === 'Escape') {
         setSearchValue('');
       }
+
+      setIsSearchFocused(false);
     };
 
     function addCategoryToElements(elements, categoryName) {
@@ -16219,6 +16390,9 @@
         return setHasError(true);
       });
     }, [menuData]);
+    React.useMemo(function () {
+      fetchInitialSearchData(initialSearchData, setInitialSearchView);
+    }, [initialSearchData, fetchInitialSearchData]);
 
     var getMarginRight = function getMarginRight(userIsVip, userName) {
       if (userIsVip) return '15px';
@@ -16256,23 +16430,33 @@
       value: searchValue,
       onChange: handleChange,
       onKeyDown: handleKeyDown,
-      onClick: onSearch
-    }), searchLoading && /*#__PURE__*/React__default.createElement(BeatLoader, {
-      color: "#000000",
-      loading: searchLoading,
-      size: 5,
-      "aria-label": "Loading Spinner",
-      "data-testid": "loader"
+      onClick: function onClick() {
+        onSearch();
+        setIsSearchFocused(true);
+      },
+      onFocus: function onFocus() {
+        return setIsSearchFocused(true);
+      }
     })), /*#__PURE__*/React__default.createElement(SearchResults, {
       searchValue: searchValue,
       searchResults: searchResults,
       onViewAll: function onViewAll() {
         onSearchSubmit(searchValue);
         setSearchValue('');
+        setSearchResults({
+          brands: [],
+          products: []
+        });
+        setIsSearchFocused(false);
       },
       searchResultsRef: searchResultsRef,
       onSearchSubmit: onSearchSubmit,
-      setSearchValue: setSearchValue
+      setSearchValue: setSearchValue,
+      initialSearchData: initialSearchView,
+      isSearchFocused: isSearchFocused,
+      setIsSearchFocused: setIsSearchFocused,
+      currency: currency,
+      currencySymbol: currencySymbol
     }), /*#__PURE__*/React__default.createElement("nav", {
       className: "navbar__nav-links navbar__nav-links--wrap"
     }, /*#__PURE__*/React__default.createElement(DropdownLink$1, {
@@ -17121,6 +17305,7 @@
         onLuxityShopClick = _ref.onLuxityShopClick,
         endpoint = _ref.endpoint,
         menuData = _ref.menuData,
+        initialSearchData = _ref.initialSearchData,
         onSearchSubmit = _ref.onSearchSubmit,
         onProductIdsReceived = _ref.onProductIdsReceived,
         onLogoutClick = _ref.onLogoutClick,
@@ -17134,6 +17319,7 @@
         onPastSalesClick = _ref.onPastSalesClick,
         onPaidOutClick = _ref.onPaidOutClick,
         currency = _ref.currency,
+        currencySymbol = _ref.currencySymbol,
         currencyOptions = _ref.currencyOptions,
         onCurrencyChange = _ref.onCurrencyChange,
         isCurrencySelectionDisabled = _ref.isCurrencySelectionDisabled,
@@ -17142,6 +17328,15 @@
         shop = _ref.shop,
         app = _ref.app;
 
+    var _useSearch = useSearch({
+      endpoint: endpoint,
+      onProductIdsReceived: onProductIdsReceived,
+      currency: currency
+    }),
+        fetchInitialSearchData = _useSearch.fetchInitialSearchData,
+        createDebouncedSearch = _useSearch.createDebouncedSearch,
+        createImmediateSearch = _useSearch.createImmediateSearch;
+
     var _useState = React.useState(''),
         _useState2 = _slicedToArray(_useState, 2),
         searchValue = _useState2[0],
@@ -17157,59 +17352,36 @@
         showSideNav = _useState6[0],
         setShowSideNav = _useState6[1];
 
-    var _useState7 = React.useState(false),
-        _useState8 = _slicedToArray(_useState7, 2),
-        searchLoading = _useState8[0],
-        setSearchLoading = _useState8[1];
-
-    var _useState9 = React.useState({
+    var _useState7 = React.useState({
       brands: [],
       products: []
     }),
-        _useState10 = _slicedToArray(_useState9, 2),
-        searchResults = _useState10[0],
-        setSearchResults = _useState10[1];
-
-    var debounce = function debounce(func, wait) {
-      var timeout;
-      return function executedFunction() {
-        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-          args[_key] = arguments[_key];
-        }
+        _useState8 = _slicedToArray(_useState7, 2),
+        searchResults = _useState8[0],
+        setSearchResults = _useState8[1];
 
-        var later = function later() {
-          clearTimeout(timeout);
-          func.apply(void 0, args);
-        };
+    var _useState9 = React.useState(false),
+        _useState10 = _slicedToArray(_useState9, 2),
+        isSearchFocused = _useState10[0],
+        setIsSearchFocused = _useState10[1];
 
-        clearTimeout(timeout);
-        timeout = setTimeout(later, wait);
-      };
-    };
+    var _useState11 = React.useState({
+      trending_brands: [],
+      latest_products: []
+    }),
+        _useState12 = _slicedToArray(_useState11, 2),
+        initialSearchView = _useState12[0],
+        setInitialSearchView = _useState12[1];
 
-    var debouncedSearch = React.useCallback(debounce(function (nextValue) {
-      setSearchLoading(true);
-      axios.post(endpoint, searchProducts(nextValue, 6)).then(function (response) {
-        setSearchResults(response.data.data.luxity_products_serach_results);
-        var ids = response.data.data.luxity_products_serach_results.luxity_product_ids;
-        onProductIdsReceived(ids);
-        setSearchLoading(false);
-      }).catch(function () {
-        setSearchLoading(false);
-      });
-    }, 500), [endpoint]);
-    var immediateSearch = React.useCallback(function (value) {
-      setSearchValue('');
-      setSearchResults({
-        brands: [],
-        products: []
-      });
-      onSearchSubmit(value);
-    }, [onSearchSubmit]);
+    var searchResultsRef = React.useRef(null);
+    var searchInputRef = React.useRef(null);
+    var debouncedSearch = createDebouncedSearch(setSearchResults);
+    var immediateSearch = createImmediateSearch(setSearchValue, setSearchResults, onSearchSubmit);
 
     var handleChange = function handleChange(event) {
       var value = event.target.value;
       setSearchValue(value);
+      setIsSearchFocused(true);
 
       if (value.trim().length >= 3) {
         debouncedSearch(value);
@@ -17227,17 +17399,53 @@
 
         if (searchValue.trim().length >= 3) {
           immediateSearch(searchValue);
+          setIsSearchFocused(false);
         }
       } else if (event.key === 'Escape') {
         setSearchValue('');
+        setIsSearchFocused(false);
       }
     };
 
+    React.useMemo(function () {
+      fetchInitialSearchData(initialSearchData, setInitialSearchView);
+    }, [initialSearchData, fetchInitialSearchData]);
+    React.useEffect(function () {
+      var handleClickOutside = function handleClickOutside(event) {
+        if (searchResultsRef.current && !searchResultsRef.current.contains(event.target)) {
+          setSearchValue('');
+          setIsSearchFocused(false);
+          setSearchResults({
+            brands: [],
+            products: []
+          });
+        }
+      };
+
+      document.addEventListener('mousedown', handleClickOutside);
+      return function () {
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }, []);
+    React.useEffect(function () {
+      if (showSearchBar && searchInputRef.current) {
+        searchInputRef.current.focus();
+      }
+    }, [showSearchBar]);
+
     var onSearchClick = function onSearchClick() {
       setShowSearchbar(function (prev) {
         return !prev;
       });
       setSearchValue('');
+      setIsSearchFocused(!showSearchBar);
+
+      if (showSearchBar) {
+        setSearchResults({
+          brands: [],
+          products: []
+        });
+      }
     };
 
     var onMenuClick = function onMenuClick() {
@@ -17374,18 +17582,16 @@
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "navbar__product-search"
     }, /*#__PURE__*/React__default.createElement("input", {
+      ref: searchInputRef,
       className: "navbar__form-input",
       type: "text",
       placeholder: "Search for items and designs",
       value: searchValue,
       onChange: handleChange,
-      onKeyDown: handleKeyDown
-    }), searchLoading && /*#__PURE__*/React__default.createElement(BeatLoader, {
-      color: "#000000",
-      loading: searchLoading,
-      size: 5,
-      "aria-label": "Loading Spinner",
-      "data-testid": "loader"
+      onKeyDown: handleKeyDown,
+      onFocus: function onFocus() {
+        return setIsSearchFocused(true);
+      }
     })), /*#__PURE__*/React__default.createElement("button", {
       type: "button",
       onClick: onSearchClick
@@ -17395,14 +17601,24 @@
       className: "navbar__input-close-icon"
     })))), /*#__PURE__*/React__default.createElement(SearchResults, {
       searchValue: searchValue,
-      searchLoading: searchLoading,
       searchResults: searchResults,
       onViewAll: function onViewAll() {
         onSearchSubmit(searchValue);
         setSearchValue('');
+        setSearchResults({
+          brands: [],
+          products: []
+        });
+        setIsSearchFocused(false);
       },
       onSearchSubmit: onSearchSubmit,
-      setSearchValue: setSearchValue
+      setSearchValue: setSearchValue,
+      searchResultsRef: searchResultsRef,
+      initialSearchData: initialSearchView,
+      isSearchFocused: isSearchFocused,
+      setIsSearchFocused: setIsSearchFocused,
+      currency: currency,
+      currencySymbol: currencySymbol
     }), shop && /*#__PURE__*/React__default.createElement(LuxitySideNav, {
       accordionIcon: accordionIcon,
       logoSrc: logoSrc,