@bonlineza/luxity-lib 2.35.7 → 2.35.9

package/LuxityDesktopHeader.js

@@ -367,7 +367,7 @@
       return null;
     }
 
-    if (!isSearchFocused && !hasResults) {
+    if (!isSearchFocused) {
       return null;
     }
 
@@ -390,7 +390,7 @@
         key: product.link,
         href: product.link,
         className: "product-card"
-      }, (product.image_url || product.featured_image) && /*#__PURE__*/React__default.createElement("div", {
+      }, product.featured_image && /*#__PURE__*/React__default.createElement("div", {
         className: "product-card__image-container"
       }, /*#__PURE__*/React__default.createElement("img", {
         src: product.featured_image,
@@ -697,6 +697,7 @@
     var endpoint = _ref.endpoint,
         onProductIdsReceived = _ref.onProductIdsReceived,
         currency = _ref.currency;
+    var currentSearchRequestToken = React.useRef(null);
     var debounce = React.useCallback(function (func, wait) {
       var timeout;
       return function executedFunction() {
@@ -727,49 +728,75 @@
         });
       });
     }, []);
-    var performSearch = React.useCallback(function (nextValue, setSearchResults) {
-      if (!nextValue || nextValue.trim() === '') {
+    var performSearch = React.useCallback(function (searchQuery, setSearchResults) {
+      if (!searchQuery || searchQuery.trim() === '') {
         setSearchResults({
           brands: [],
           products: [],
           luxity_product_ids: []
         });
         return;
-      }
+      } // Cancel any ongoing search request to prevent race conditions
+
+
+      if (currentSearchRequestToken.current) {
+        currentSearchRequestToken.current.cancel();
+      } // Create a new token for this specific search request
+
 
-      axios.post(endpoint, searchProducts(nextValue, 3, currency)).then(function (response) {
-        var searchResults = response.data.data.luxity_products_serach_results;
-        setSearchResults(searchResults);
+      var newSearchToken = axios.CancelToken.source();
+      currentSearchRequestToken.current = newSearchToken;
+      axios.post(endpoint, searchProducts(searchQuery, 3, currency), {
+        cancelToken: newSearchToken.token
+      }).then(function (response) {
+        if (currentSearchRequestToken.current === newSearchToken) {
+          var searchResults = response.data.data.luxity_products_serach_results;
+          setSearchResults(searchResults);
 
-        if (searchResults && searchResults.luxity_product_ids) {
-          onProductIdsReceived(searchResults.luxity_product_ids);
+          if (searchResults && searchResults.luxity_product_ids) {
+            onProductIdsReceived(searchResults.luxity_product_ids);
+          }
+
+          currentSearchRequestToken.current = null;
+        }
+      }).catch(function (error) {
+        if (!axios.isCancel(error)) {
+          setSearchResults({
+            brands: [],
+            products: [],
+            luxity_product_ids: []
+          });
+          currentSearchRequestToken.current = null;
         }
-      }).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);
+      return debounce(function (searchQuery, setSearchResults) {
+        return performSearch(searchQuery, setSearchResults);
       }, 500);
     }, [debounce, performSearch]);
     var createDebouncedSearch = React.useCallback(function (setSearchResults) {
-      return function (nextValue) {
-        return debouncedSearch(nextValue, setSearchResults);
+      return function (searchQuery) {
+        return debouncedSearch(searchQuery, setSearchResults);
       };
     }, [debouncedSearch]);
     var createImmediateSearch = React.useCallback(function (setSearchValue, setSearchResults, onSearchSubmit) {
-      return function (value) {
+      return function (searchQuery) {
+        /*
+         * Cancel any pending search request when immediate search is performed
+         * Immediate search is when the user types a search query and presses enter
+         */
+        if (currentSearchRequestToken.current) {
+          currentSearchRequestToken.current.cancel();
+          currentSearchRequestToken.current = null;
+        }
+
         setSearchValue('');
         setSearchResults({
           brands: [],
           products: []
         });
-        onSearchSubmit(value);
+        onSearchSubmit(searchQuery);
       };
     }, []);
     return {
@@ -779,6 +806,72 @@
     };
   };
 
+  var useSearchClickOutside = function useSearchClickOutside(ref, searchResults, setCachedResults, setIsSearchFocused, setSearchResults) {
+    React.useEffect(function () {
+      var handleClickOutside = function handleClickOutside(event) {
+        if (ref.current && !ref.current.contains(event.target)) {
+          setCachedResults(searchResults);
+          setIsSearchFocused(false);
+          setSearchResults({
+            brands: [],
+            products: []
+          });
+        }
+      };
+
+      document.addEventListener('mousedown', handleClickOutside);
+      return function () {
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }, [ref, searchResults, setCachedResults, setIsSearchFocused, setSearchResults]);
+  };
+  var useSearchInputChange = function useSearchInputChange(setSearchValue, setIsSearchFocused, debouncedSearch, setSearchResults, setCachedResults) {
+    return React.useCallback(function (event) {
+      var value = event.target.value;
+      setSearchValue(value);
+      setIsSearchFocused(true);
+
+      if (value.trim().length >= 3) {
+        debouncedSearch(value);
+      } else {
+        setSearchResults({
+          brands: [],
+          products: []
+        });
+        setCachedResults({
+          brands: [],
+          products: []
+        });
+      }
+    }, [setSearchValue, setIsSearchFocused, debouncedSearch, setSearchResults, setCachedResults]);
+  };
+  var useSearchInputFocus = function useSearchInputFocus(searchValue, setIsSearchFocused, cachedResults, setSearchResults) {
+    return React.useCallback(function () {
+      setIsSearchFocused(true);
+
+      if (searchValue.trim().length >= 3) {
+        setSearchResults(cachedResults);
+      }
+    }, [searchValue, setIsSearchFocused, cachedResults, setSearchResults]);
+  };
+  var useSearchInputKeyDown = function useSearchInputKeyDown(searchValue, immediateSearch, setIsSearchFocused) {
+    var setSearchValue = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+    return React.useCallback(function (event) {
+      if (event.key === 'Enter') {
+        event.preventDefault();
+
+        if (searchValue.trim().length >= 3) {
+          immediateSearch(searchValue);
+        }
+
+        setIsSearchFocused(false);
+      } else if (event.key === 'Escape' && setSearchValue) {
+        setSearchValue('');
+        setIsSearchFocused(false);
+      }
+    }, [searchValue, immediateSearch, setIsSearchFocused, setSearchValue]);
+  };
+
   var LuxityDesktopHeader = function LuxityDesktopHeader(_ref) {
     var accountIcon = _ref.accountIcon,
         cartIcon = _ref.cartIcon,
@@ -800,7 +893,6 @@
         onCartClick = _ref.onCartClick,
         onAccountClick = _ref.onAccountClick,
         inputSearchIcon = _ref.inputSearchIcon,
-        onSearch = _ref.onSearch,
         onSellToUsClick = _ref.onSellToUsClick,
         contactUsLink = _ref.contactUsLink,
         ourStoryLink = _ref.ourStoryLink,
@@ -881,56 +973,24 @@
         searchResults = _useState14[0],
         setSearchResults = _useState14[1];
 
+    var _useState15 = React.useState({
+      brands: [],
+      products: []
+    }),
+        _useState16 = _slicedToArray(_useState15, 2),
+        cachedResults = _useState16[0],
+        setCachedResults = _useState16[1];
+
     var searchResultsRef = React.useRef(null);
-    var debouncedSearch = createDebouncedSearch(setSearchResults);
+    var debouncedSearch = createDebouncedSearch(function (results) {
+      setSearchResults(results);
+      setCachedResults(results);
+    });
     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);
-      } else {
-        setSearchResults({
-          brands: [],
-          products: []
-        });
-      }
-    };
-
-    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);
-      };
-    }, []);
-
-    var handleKeyDown = function handleKeyDown(event) {
-      if (event.key === 'Enter') {
-        event.preventDefault();
-
-        if (searchValue.trim().length >= 3) {
-          immediateSearch(searchValue);
-        }
-      } else if (event.key === 'Escape') {
-        setSearchValue('');
-      }
-
-      setIsSearchFocused(false);
-    };
+    var handleChange = useSearchInputChange(setSearchValue, setIsSearchFocused, debouncedSearch, setSearchResults, setCachedResults);
+    useSearchClickOutside(searchResultsRef, searchResults, setCachedResults, setIsSearchFocused, setSearchResults);
+    var handleSearchFocus = useSearchInputFocus(searchValue, setIsSearchFocused, cachedResults, setSearchResults);
+    var handleKeyDown = useSearchInputKeyDown(searchValue, immediateSearch, setIsSearchFocused);
 
     function addCategoryToElements(elements, categoryName) {
       return elements.map(function (element) {
@@ -1002,13 +1062,8 @@
       value: searchValue,
       onChange: handleChange,
       onKeyDown: handleKeyDown,
-      onClick: function onClick() {
-        onSearch();
-        setIsSearchFocused(true);
-      },
-      onFocus: function onFocus() {
-        return setIsSearchFocused(true);
-      }
+      onClick: handleSearchFocus,
+      onFocus: handleSearchFocus
     })), /*#__PURE__*/React__default.createElement(SearchResults, {
       searchValue: searchValue,
       searchResults: searchResults,

package/LuxityMobileHeader.js

@@ -1078,7 +1078,7 @@
       return null;
     }
 
-    if (!isSearchFocused && !hasResults) {
+    if (!isSearchFocused) {
       return null;
     }
 
@@ -1101,7 +1101,7 @@
         key: product.link,
         href: product.link,
         className: "product-card"
-      }, (product.image_url || product.featured_image) && /*#__PURE__*/React__default.createElement("div", {
+      }, product.featured_image && /*#__PURE__*/React__default.createElement("div", {
         className: "product-card__image-container"
       }, /*#__PURE__*/React__default.createElement("img", {
         src: product.featured_image,
@@ -1205,6 +1205,7 @@
     var endpoint = _ref.endpoint,
         onProductIdsReceived = _ref.onProductIdsReceived,
         currency = _ref.currency;
+    var currentSearchRequestToken = React.useRef(null);
     var debounce = React.useCallback(function (func, wait) {
       var timeout;
       return function executedFunction() {
@@ -1235,49 +1236,75 @@
         });
       });
     }, []);
-    var performSearch = React.useCallback(function (nextValue, setSearchResults) {
-      if (!nextValue || nextValue.trim() === '') {
+    var performSearch = React.useCallback(function (searchQuery, setSearchResults) {
+      if (!searchQuery || searchQuery.trim() === '') {
         setSearchResults({
           brands: [],
           products: [],
           luxity_product_ids: []
         });
         return;
-      }
+      } // Cancel any ongoing search request to prevent race conditions
+
+
+      if (currentSearchRequestToken.current) {
+        currentSearchRequestToken.current.cancel();
+      } // Create a new token for this specific search request
+
 
-      axios.post(endpoint, searchProducts(nextValue, 3, currency)).then(function (response) {
-        var searchResults = response.data.data.luxity_products_serach_results;
-        setSearchResults(searchResults);
+      var newSearchToken = axios.CancelToken.source();
+      currentSearchRequestToken.current = newSearchToken;
+      axios.post(endpoint, searchProducts(searchQuery, 3, currency), {
+        cancelToken: newSearchToken.token
+      }).then(function (response) {
+        if (currentSearchRequestToken.current === newSearchToken) {
+          var searchResults = response.data.data.luxity_products_serach_results;
+          setSearchResults(searchResults);
 
-        if (searchResults && searchResults.luxity_product_ids) {
-          onProductIdsReceived(searchResults.luxity_product_ids);
+          if (searchResults && searchResults.luxity_product_ids) {
+            onProductIdsReceived(searchResults.luxity_product_ids);
+          }
+
+          currentSearchRequestToken.current = null;
+        }
+      }).catch(function (error) {
+        if (!axios.isCancel(error)) {
+          setSearchResults({
+            brands: [],
+            products: [],
+            luxity_product_ids: []
+          });
+          currentSearchRequestToken.current = null;
         }
-      }).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);
+      return debounce(function (searchQuery, setSearchResults) {
+        return performSearch(searchQuery, setSearchResults);
       }, 500);
     }, [debounce, performSearch]);
     var createDebouncedSearch = React.useCallback(function (setSearchResults) {
-      return function (nextValue) {
-        return debouncedSearch(nextValue, setSearchResults);
+      return function (searchQuery) {
+        return debouncedSearch(searchQuery, setSearchResults);
       };
     }, [debouncedSearch]);
     var createImmediateSearch = React.useCallback(function (setSearchValue, setSearchResults, onSearchSubmit) {
-      return function (value) {
+      return function (searchQuery) {
+        /*
+         * Cancel any pending search request when immediate search is performed
+         * Immediate search is when the user types a search query and presses enter
+         */
+        if (currentSearchRequestToken.current) {
+          currentSearchRequestToken.current.cancel();
+          currentSearchRequestToken.current = null;
+        }
+
         setSearchValue('');
         setSearchResults({
           brands: [],
           products: []
         });
-        onSearchSubmit(value);
+        onSearchSubmit(searchQuery);
       };
     }, []);
     return {
@@ -1287,6 +1314,72 @@
     };
   };
 
+  var useSearchClickOutside = function useSearchClickOutside(ref, searchResults, setCachedResults, setIsSearchFocused, setSearchResults) {
+    React.useEffect(function () {
+      var handleClickOutside = function handleClickOutside(event) {
+        if (ref.current && !ref.current.contains(event.target)) {
+          setCachedResults(searchResults);
+          setIsSearchFocused(false);
+          setSearchResults({
+            brands: [],
+            products: []
+          });
+        }
+      };
+
+      document.addEventListener('mousedown', handleClickOutside);
+      return function () {
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }, [ref, searchResults, setCachedResults, setIsSearchFocused, setSearchResults]);
+  };
+  var useSearchInputChange = function useSearchInputChange(setSearchValue, setIsSearchFocused, debouncedSearch, setSearchResults, setCachedResults) {
+    return React.useCallback(function (event) {
+      var value = event.target.value;
+      setSearchValue(value);
+      setIsSearchFocused(true);
+
+      if (value.trim().length >= 3) {
+        debouncedSearch(value);
+      } else {
+        setSearchResults({
+          brands: [],
+          products: []
+        });
+        setCachedResults({
+          brands: [],
+          products: []
+        });
+      }
+    }, [setSearchValue, setIsSearchFocused, debouncedSearch, setSearchResults, setCachedResults]);
+  };
+  var useSearchInputFocus = function useSearchInputFocus(searchValue, setIsSearchFocused, cachedResults, setSearchResults) {
+    return React.useCallback(function () {
+      setIsSearchFocused(true);
+
+      if (searchValue.trim().length >= 3) {
+        setSearchResults(cachedResults);
+      }
+    }, [searchValue, setIsSearchFocused, cachedResults, setSearchResults]);
+  };
+  var useSearchInputKeyDown = function useSearchInputKeyDown(searchValue, immediateSearch, setIsSearchFocused) {
+    var setSearchValue = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+    return React.useCallback(function (event) {
+      if (event.key === 'Enter') {
+        event.preventDefault();
+
+        if (searchValue.trim().length >= 3) {
+          immediateSearch(searchValue);
+        }
+
+        setIsSearchFocused(false);
+      } else if (event.key === 'Escape' && setSearchValue) {
+        setSearchValue('');
+        setIsSearchFocused(false);
+      }
+    }, [searchValue, immediateSearch, setIsSearchFocused, setSearchValue]);
+  };
+
   var LuxityMobileHeader = function LuxityMobileHeader(_ref) {
     var logoSrc = _ref.logoSrc,
         menuIcon = _ref.menuIcon,
@@ -1369,73 +1462,41 @@
         searchResults = _useState8[0],
         setSearchResults = _useState8[1];
 
-    var _useState9 = React.useState(false),
+    var _useState9 = React.useState({
+      brands: [],
+      products: []
+    }),
         _useState10 = _slicedToArray(_useState9, 2),
-        isSearchFocused = _useState10[0],
-        setIsSearchFocused = _useState10[1];
+        cachedResults = _useState10[0],
+        setCachedResults = _useState10[1];
 
-    var _useState11 = React.useState({
+    var _useState11 = React.useState(false),
+        _useState12 = _slicedToArray(_useState11, 2),
+        isSearchFocused = _useState12[0],
+        setIsSearchFocused = _useState12[1];
+
+    var _useState13 = React.useState({
       trending_brands: [],
       latest_products: []
     }),
-        _useState12 = _slicedToArray(_useState11, 2),
-        initialSearchView = _useState12[0],
-        setInitialSearchView = _useState12[1];
+        _useState14 = _slicedToArray(_useState13, 2),
+        initialSearchView = _useState14[0],
+        setInitialSearchView = _useState14[1];
 
     var searchResultsRef = React.useRef(null);
     var searchInputRef = React.useRef(null);
-    var debouncedSearch = createDebouncedSearch(setSearchResults);
+    var debouncedSearch = createDebouncedSearch(function (results) {
+      setSearchResults(results);
+      setCachedResults(results);
+    });
     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);
-      } else {
-        setSearchResults({
-          brands: [],
-          products: []
-        });
-      }
-    };
-
-    var handleKeyDown = function handleKeyDown(event) {
-      if (event.key === 'Enter') {
-        event.preventDefault();
-
-        if (searchValue.trim().length >= 3) {
-          immediateSearch(searchValue);
-          setIsSearchFocused(false);
-        }
-      } else if (event.key === 'Escape') {
-        setSearchValue('');
-        setIsSearchFocused(false);
-      }
-    };
-
+    var handleChange = useSearchInputChange(setSearchValue, setIsSearchFocused, debouncedSearch, setSearchResults, setCachedResults);
+    var handleKeyDown = useSearchInputKeyDown(searchValue, immediateSearch, setIsSearchFocused, setSearchValue);
     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);
-      };
-    }, []);
+    useSearchClickOutside(searchResultsRef, searchResults, setCachedResults, setIsSearchFocused, setSearchResults);
+    var handleSearchFocus = useSearchInputFocus(searchValue, setIsSearchFocused, cachedResults, setSearchResults);
     React.useEffect(function () {
       if (showSearchBar && searchInputRef.current) {
         searchInputRef.current.focus();
@@ -1599,9 +1660,7 @@
       value: searchValue,
       onChange: handleChange,
       onKeyDown: handleKeyDown,
-      onFocus: function onFocus() {
-        return setIsSearchFocused(true);
-      }
+      onFocus: handleSearchFocus
     })), /*#__PURE__*/React__default.createElement("button", {
       type: "button",
       onClick: onSearchClick

package/build/bundle.css

@@ -1 +1 @@
-.navbar{box-shadow:2px 2px 10px #dfdede;display:flex;padding-bottom:10px;padding-top:20px;position:relative}.navbar__link-item--desktop{align-items:center;display:flex;height:35px;margin:auto 0;padding-top:5px}.navbar__mobile-wrapper{align-items:center;display:flex;flex-direction:column;padding-bottom:20px;padding-left:32px;padding-right:32px}.navbar__container{display:flex;margin:0 auto;max-width:1280px;padding-left:12px;padding-right:12px;width:100%}.navbar__body{flex-basis:60%}.navbar__wrapper{align-items:center;display:flex;justify-content:space-between;width:100%}.navbar__product-search-wrapper{align-items:center;display:flex;justify-content:center;padding:0 20%;width:100%}@media only screen and (max-width:879px){.navbar__product-search-wrapper{padding:0}}.navbar__input-close-icon{height:auto;margin-bottom:10px;margin-left:10px;width:20px}@media only screen and (max-width:879px){.navbar__input-close-icon{margin-bottom:0;margin-left:0;width:15px}}.navbar__menu-icon{width:30px}.navbar__product-search{align-items:center;display:flex;max-width:545px;width:100%}.navbar__logo-wrapper{margin-right:18px;width:200px}.navbar__logo{width:200px}@media only screen and (max-width:879px){.navbar__logo{margin-left:10px;margin-top:5px;width:125px}}.navbar__form-input{align-items:center;background:transparent;border:none;display:flex;font-size:13px;outline:none;padding:8px;width:100%}.navbar__product-search{border:1px solid #dfdede;margin-bottom:10px}@media only screen and (max-width:879px){.navbar__product-search{border:none;border-bottom:1px solid #dfdede;margin-bottom:0;margin-right:10px;margin-top:10px}}.navbar__section{align-items:flex-start;display:flex;flex-direction:row;justify-content:space-between;width:100%}.navbar__link{display:inline-block;font-family:Martel Sans;font-size:14px;font-weight:700;margin-right:10px;overflow:hidden;text-transform:uppercase;transition:.3s ease-in-out}.navbar__link:after{background-color:#000;content:"";display:block;height:2px;transition:width .25s ease-out;width:0}.navbar__link:hover:after{width:100%}.navbar__link:hover .navbar__dropdown{animation:fadeInDropdown .3s ease-in-out;display:block}.navbar__dropdown{background-color:#fff;box-shadow:5px 5px 5px #dfdede;display:none;left:0;position:absolute;width:100%;z-index:999}@keyframes fadeInDropdown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.navbar__company-link{font-size:13px;font-weight:400;list-style:none;margin-left:18px;text-decoration:none}.navbar__company-block{align-items:center;background-color:#000;color:#fff;display:flex;font-weight:700;height:33px;justify-content:center;margin-right:0;padding:0 18px;text-transform:uppercase}.navbar__input-search-icon{height:auto;margin-left:1.125rem;margin-right:.375rem;width:15px}.navbar__nav-links{align-items:center;display:flex}.navbar__nav-links--wrap{flex-wrap:wrap}.navbar__icons{align-items:center;display:flex;height:40px;justify-content:flex-end;margin-bottom:10px}@media only screen and (max-width:879px){.navbar__icons{display:block;height:20px;margin-bottom:0}}.navbar__icon{cursor:pointer;height:auto;margin-right:18px;width:20px}@media only screen and (max-width:879px){.navbar__icon{margin-right:0}}.navbar__icon--app{cursor:pointer;height:auto;margin-left:12px;width:20px}@media only screen and (max-width:879px){.navbar__icon--app{margin-right:0}}.navbar__vip-icon{height:16px;position:absolute;right:-12px;top:-4px;width:16px}.navbar__cart-icon{position:relative}.navbar__cart-count{align-items:center;background-color:#000;border-radius:50%;bottom:50%;color:#fff;display:flex;font-size:13px;height:20px;justify-content:center;left:100%;position:absolute;width:20px}.footer__newsletter-section{align-items:center;background-color:#000;color:#fff;display:flex;justify-content:space-between;padding:2.265rem 0}@media only screen and (max-width:879px){.footer__newsletter-section{flex-direction:column}}.footer__newsletter-wrapper{align-items:center;display:flex;justify-content:space-between;margin:0 auto;max-width:1280px;padding-left:32px;padding-right:32px;width:100%}@media only screen and (max-width:879px){.footer__newsletter-wrapper{flex-direction:column}.footer__link-container{flex-basis:50%}}.footer__newsletter-icon{height:30px;position:absolute;right:0;top:0;width:32px}.footer__newsletter-form{flex-basis:50%;max-width:250px;position:relative}@media only screen and (max-width:879px){.footer__newsletter-form{display:block;margin-top:20px;max-width:100%;width:100%}}.footer__newsletter-title{font-family:Martel Sans,sans-serif;font-size:14px;font-weight:700;letter-spacing:3px;margin-bottom:1.125rem;text-transform:uppercase}.footer__newsletter-text{font-size:14px}.footer__form-input{background-color:#000;border:none;border-bottom:1px solid #fff;color:#fff;height:30px;outline:none;width:100%}.footer__form-input::-moz-placeholder{color:#fff;font-weight:400}.footer__form-input::placeholder{color:#fff;font-weight:400}.footer__form-errors{color:#fff;margin-top:5px}.footer__main-section{align-items:flex-start;display:flex;justify-content:space-between;margin-bottom:50px;margin-top:80px}.footer__link-title{font-family:El Messiri;font-size:16px;font-weight:700;margin-bottom:20px;text-transform:uppercase}@media only screen and (max-width:879px){.footer__link-title{margin-bottom:10px}}.footer__link-child{margin-top:25px}.footer__links{display:flex;flex-direction:column}.footer__link{color:#939393;cursor:pointer;font-family:Martel Sans;font-size:14px;line-height:20px;margin-bottom:7px;text-align:left;text-decoration:none}.footer__link:hover{color:#000;text-decoration:underline}@media only screen and (max-width:879px){.footer__link{margin-bottom:10px}}.footer__link-wrapper{align-items:center;display:flex;gap:5px}.footer__link-icon{height:30px;margin-bottom:18px}.footer__text{color:#939393;font-family:Martel Sans;font-size:14px;line-height:20px;margin-bottom:15px;text-align:left;text-decoration:none}.footer__store-hours{margin-top:35px}.footer__copyrights-section{border-top:1px solid;display:flex;justify-content:space-between;padding-bottom:20px;padding-top:20px}.footer__logo{height:30px;width:135px}.footer__payment-icons{align-items:center;display:flex;gap:8px}.footer__wrapper{margin:0 auto;max-width:1280px;padding-left:32px;padding-right:32px;width:100%}@media only screen and (max-width:879px){.footer__wrapper{padding:32px 0 0 24px}}.footer__wrapper--desktop{display:block}@media only screen and (max-width:879px){.footer__wrapper--desktop{display:none}}.footer__wrapper--mobile{display:none}@media only screen and (max-width:879px){.footer__wrapper--mobile{display:block;padding-top:30px}}.footer__copyright{font-size:10px;line-height:22px}.footer__copyright--mobile{display:none}@media only screen and (max-width:879px){.footer__copyright--mobile{display:block;padding:30px 10px 30px 0;text-align:center}}.footer__section-row{display:flex;gap:50%}@media only screen and (max-width:879px){.footer__section-row{gap:unset}}.side-nav{font-family:Martel Sans}.side-nav__errors{align-items:center;color:red;display:flex;font-size:16px;justify-content:center}.side-nav__overlay{background-color:rgba(78,73,73,.51);height:100%;opacity:0;position:fixed;top:0;transition:opacity .5s ease-out 0s,visibility .5s ease-out 0s;width:100%;z-index:99999}.side-nav__overlay--visible{opacity:1;visibility:visible}.side-nav__overlay--hidden{opacity:1;visibility:hidden}.side-nav__content{background-color:#fff;bottom:0;overflow-y:scroll;padding:1.5rem;position:fixed;top:0;transition:left .5s ease-in-out;width:80%;z-index:99999}.side-nav__content--hidden{display:none}.side-nav__content--open{left:0}.side-nav__content--closed{left:-100%}.side-nav__menu-title-wrapper{align-items:center;background-color:transparent;border:none;display:flex;justify-content:space-between;outline:none;width:100%}.side-nav__icon-container{float:right;margin-bottom:10px}.side-nav__menu-title{font-size:14px;font-weight:700;line-height:20px;text-transform:uppercase}.side-nav__accordion-icon{height:auto;width:15px}.side-nav__menu-item{margin-bottom:25px}.side-nav__close-icon{height:20px;margin-left:auto;width:20px}.side-nav__back-button-wrapper{align-items:center;display:flex;margin-bottom:25px}.side-nav__back-icon{height:20px;width:20px}.side-nav__back-button,.side-nav__sub-menu-title{font-weight:700;text-transform:uppercase}.side-nav__sub-menu-title{font-size:14px;margin-bottom:10px}.side-nav__elements{display:flex;flex-direction:column}.side-nav__element{color:#555;cursor:pointer;line-height:20px;margin-bottom:10px}.side-nav__element,.side-nav__sub-link{font-size:14px;font-weight:400;text-transform:capitalize}.side-nav__block-button{background-color:#000;color:#fff;font-weight:700;padding:10px 0;width:100%}.interests__add-button{display:flex;flex-direction:row;gap:10px;width:100%}@media only screen and (max-width:879px){.interests__add-button{flex-direction:column}}.interests__section-wrapper{display:flex;flex-direction:column;width:100%}.interests__select-option{display:flex;flex-direction:column;margin-bottom:15px}.interests__title{font-family:El Messiri;font-size:16px;margin-bottom:10px}@charset "UTF-8";.currency-select-container{align-items:center;display:flex;margin-right:18px;position:relative}.currency-select-container .currency-flag{margin-right:5px}.currency-select-container .currency-flag img{height:15px;-o-object-fit:cover;object-fit:cover;width:20px}.currency-select-container .currency-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-color:transparent;border:none;color:#000;cursor:pointer;font-family:inherit;font-size:14px;margin:0;outline:none;padding:5px 15px 5px 5px}.currency-select-container .currency-select::-ms-expand{display:none}.currency-select-container .currency-select:focus{box-shadow:none;outline:none}.currency-select-container .currency-select:-moz-focusring{color:transparent;text-shadow:0 0 0 #000}.currency-select-container:after{color:#000;content:"▼";font-size:10px;pointer-events:none;position:absolute;right:0;top:50%;transform:translateY(-50%)}@media only screen and (max-width:879px){.currency-select-container .currency-select{appearance:menulist;-webkit-appearance:menulist;-moz-appearance:menulist;padding-right:0}.currency-select-container:after{display:none}}.currency-select-container.disabled{cursor:not-allowed;opacity:.7}.currency-select-container.disabled .currency-select{pointer-events:none}.side-nav{font-family:Martel Sans}.side-nav__errors{align-items:center;color:red;display:flex;font-size:16px;justify-content:center}.side-nav__overlay{background-color:rgba(78,73,73,.51);height:100%;opacity:0;position:fixed;top:0;transition:opacity .5s ease-out 0s,visibility .5s ease-out 0s;width:100%;z-index:99999}.side-nav__overlay--visible{opacity:1;visibility:visible}.side-nav__overlay--hidden{opacity:1;visibility:hidden}.side-nav__content{background-color:#fff;bottom:0;overflow-y:scroll;padding:1.5rem;position:fixed;top:0;transition:left .5s ease-in-out;width:80%;z-index:99999}.side-nav__content--hidden{display:none}.side-nav__content--open{left:0}.side-nav__content--closed{left:-100%}.side-nav__menu-title-wrapper{align-items:center;background-color:transparent;border:none;display:flex;outline:none;width:100%}.side-nav__icon-container{float:right;margin-bottom:10px}.side-nav__menu-title{align-items:center;display:flex;font-size:14px;font-weight:700;justify-content:center;line-height:20px;text-transform:uppercase}.side-nav__menu-icon{display:flex;height:25px;margin-right:10px;width:25px}.side-nav__menu-divider{margin-bottom:40px}.side-nav__accordion-icon{height:auto;width:15px}.side-nav__menu-item{margin-bottom:25px}.side-nav__close-icon{height:20px;margin-left:auto;width:20px}.side-nav__back-button-wrapper{align-items:center;display:flex;margin-bottom:25px}.side-nav__back-icon{height:20px;width:20px}.side-nav__back-button,.side-nav__sub-menu-title{font-weight:700;text-transform:uppercase}.side-nav__sub-menu-title{font-size:14px;margin-bottom:10px}.side-nav__elements{display:flex;flex-direction:column}.side-nav__element{color:#555;cursor:pointer;line-height:20px;margin-bottom:10px}.side-nav__element,.side-nav__sub-link{font-size:14px;font-weight:400;text-transform:capitalize}.side-nav__block-button{background-color:#000;color:#fff;font-weight:700;padding:10px 0;width:100%}.stores-dropdown{align-items:flex-start;display:flex;font-family:Martel Sans;gap:20px;margin-left:auto;margin-right:auto;max-width:1280px;overflow-x:auto;padding:20px 15px}.stores-dropdown__image{height:200px;-o-object-fit:cover;object-fit:cover;width:100%}.stores-dropdown__store-details{flex-basis:20%}.stores-dropdown__title{font-family:El Messiri}.stores-dropdown__main-title,.stores-dropdown__title{font-size:16px;font-weight:400;letter-spacing:3px;margin-top:20px}.stores-dropdown__main-title{font-weight:700;margin-bottom:10px}.stores-dropdown__open-days{font-size:12px;font-weight:700;line-height:20px}.stores-dropdown__open-hours{font-size:12px;font-weight:400;line-height:20px}.stores-dropdown__queries-title{font-family:El Messiri;font-size:16px;font-weight:400;letter-spacing:3px}.stores-dropdown__contact-details{font-size:16px;font-weight:700}.stores-dropdown__view-more{cursor:pointer;font-size:14px;font-weight:400;margin-top:10px;text-transform:capitalize}.search-results{background:#fff;border:1px solid #dfdede;border-radius:2px;box-shadow:0 2px 8px rgba(0,0,0,.08);display:flex;position:absolute;width:770px;z-index:50}@media only screen and (max-width:1052px){.search-results{border:none;box-shadow:none;flex-direction:column;top:120px;width:100%}}.search-results__section:first-child{border-right:1px solid #dfdede;flex:1;min-width:240px}.search-results__section:last-child{display:flex;flex:2;flex-direction:column}.search-results__section-header{align-items:center;display:flex;justify-content:space-between}.search-results__header{color:#000;font-family:Martel Sans;font-size:14px;font-weight:600;margin-bottom:0;padding:16px 20px;text-transform:uppercase}.search-results__view-all-link{display:none}@media only screen and (max-width:879px){.search-results__view-all-link{color:#000;display:block;font-family:Martel Sans;font-size:14px;margin-right:20px}}.search-results__list{display:flex;flex-direction:column}.search-results__item{color:grey;font-family:Martel Sans;font-size:14px;padding:8px 20px;text-decoration:none}.search-results__product-list{display:flex;flex-direction:column;overflow-y:auto}.product-card{color:inherit;display:flex;padding:12px 20px;text-decoration:none;transition:background-color .15s ease}.product-card:hover{background-color:#f4f4f4}.product-card__image-container{border-radius:2px;flex-shrink:0;height:90px;margin-right:16px;overflow:hidden;width:90px}.product-card__image{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.product-card__details{display:flex;flex:1;flex-direction:column}.product-card__name{color:#000;font-family:Martel Sans;font-size:14px;line-height:1.4;margin-bottom:24px}.product-card__brand-name{font-weight:600}.product-card__info-row{align-items:flex-end;display:flex;justify-content:space-between}@media only screen and (max-width:879px){.product-card__info-row{align-items:flex-start;flex-direction:column}}.product-card__price-group{display:flex;flex-direction:column;gap:4px}.product-card__price{color:#000;font-family:Martel Sans;font-size:14px;font-weight:600;line-height:1}.product-card__retail-price{color:#939393;font-family:Martel Sans;font-size:14px;text-decoration:line-through}.product-card__condition{color:#000;font-family:Martel Sans;font-size:13px;margin-right:20px;text-align:right}.product-card__condition-label{color:#939393;margin-right:4px}.search-results__view-all-button{background-color:#f5f0ea!important;border:none;color:#000;cursor:pointer;font-family:Martel Sans;font-size:13px;font-weight:400;padding:16px;text-align:center}@media only screen and (max-width:879px){.search-results__view-all-button{display:none}}.dropdown{display:flex;justify-content:space-between;margin-left:auto;margin-right:auto;max-width:1280px;min-height:500px;overflow-x:auto;padding:20px 0}.dropdown__errors{align-items:center;color:red;display:flex;font-size:16px;justify-content:center;min-height:300px}.dropdown__column{flex:1;padding-left:12px}.dropdown__column:nth-child(2){flex:2}.dropdown__title{font-family:El Messiri;font-size:16px;font-weight:700;letter-spacing:3px;line-height:1;margin-bottom:20px;text-transform:uppercase}.dropdown__elements{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));max-height:800px;overflow-y:auto}.dropdown__brand-elements{-moz-column-count:3;column-count:3;max-height:800px}.dropdown__brand-element{cursor:pointer;margin-bottom:10px}.dropdown__element{flex-basis:33.33%;font-family:Martel Sans;font-size:14px;font-weight:400;margin-bottom:10px;text-transform:capitalize}.cover-spinner{align-items:center;background-color:hsla(0,0%,100%,.7);display:flex;height:100%;justify-content:center;min-height:400px;position:relative;top:50%;width:100%;z-index:9999}.cover-spinner:after{animation:spin 1.5s linear infinite;border:4px dotted #000;border-radius:50%;border-top-color:transparent;content:"";display:block;height:40px;position:absolute;width:40px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
+.footer__newsletter-section{align-items:center;background-color:#000;color:#fff;display:flex;justify-content:space-between;padding:2.265rem 0}@media only screen and (max-width:879px){.footer__newsletter-section{flex-direction:column}}.footer__newsletter-wrapper{align-items:center;display:flex;justify-content:space-between;margin:0 auto;max-width:1280px;padding-left:32px;padding-right:32px;width:100%}@media only screen and (max-width:879px){.footer__newsletter-wrapper{flex-direction:column}.footer__link-container{flex-basis:50%}}.footer__newsletter-icon{height:30px;position:absolute;right:0;top:0;width:32px}.footer__newsletter-form{flex-basis:50%;max-width:250px;position:relative}@media only screen and (max-width:879px){.footer__newsletter-form{display:block;margin-top:20px;max-width:100%;width:100%}}.footer__newsletter-title{font-family:Martel Sans,sans-serif;font-size:14px;font-weight:700;letter-spacing:3px;margin-bottom:1.125rem;text-transform:uppercase}.footer__newsletter-text{font-size:14px}.footer__form-input{background-color:#000;border:none;border-bottom:1px solid #fff;color:#fff;height:30px;outline:none;width:100%}.footer__form-input::-moz-placeholder{color:#fff;font-weight:400}.footer__form-input::placeholder{color:#fff;font-weight:400}.footer__form-errors{color:#fff;margin-top:5px}.footer__main-section{align-items:flex-start;display:flex;justify-content:space-between;margin-bottom:50px;margin-top:80px}.footer__link-title{font-family:El Messiri;font-size:16px;font-weight:700;margin-bottom:20px;text-transform:uppercase}@media only screen and (max-width:879px){.footer__link-title{margin-bottom:10px}}.footer__link-child{margin-top:25px}.footer__links{display:flex;flex-direction:column}.footer__link{color:#939393;cursor:pointer;font-family:Martel Sans;font-size:14px;line-height:20px;margin-bottom:7px;text-align:left;text-decoration:none}.footer__link:hover{color:#000;text-decoration:underline}@media only screen and (max-width:879px){.footer__link{margin-bottom:10px}}.footer__link-wrapper{align-items:center;display:flex;gap:5px}.footer__link-icon{height:30px;margin-bottom:18px}.footer__text{color:#939393;font-family:Martel Sans;font-size:14px;line-height:20px;margin-bottom:15px;text-align:left;text-decoration:none}.footer__store-hours{margin-top:35px}.footer__copyrights-section{border-top:1px solid;display:flex;justify-content:space-between;padding-bottom:20px;padding-top:20px}.footer__logo{height:30px;width:135px}.footer__payment-icons{align-items:center;display:flex;gap:8px}.footer__wrapper{margin:0 auto;max-width:1280px;padding-left:32px;padding-right:32px;width:100%}@media only screen and (max-width:879px){.footer__wrapper{padding:32px 0 0 24px}}.footer__wrapper--desktop{display:block}@media only screen and (max-width:879px){.footer__wrapper--desktop{display:none}}.footer__wrapper--mobile{display:none}@media only screen and (max-width:879px){.footer__wrapper--mobile{display:block;padding-top:30px}}.footer__copyright{font-size:10px;line-height:22px}.footer__copyright--mobile{display:none}@media only screen and (max-width:879px){.footer__copyright--mobile{display:block;padding:30px 10px 30px 0;text-align:center}}.footer__section-row{display:flex;gap:50%}@media only screen and (max-width:879px){.footer__section-row{gap:unset}}.navbar{box-shadow:2px 2px 10px #dfdede;display:flex;padding-bottom:10px;padding-top:20px;position:relative}.navbar__link-item--desktop{align-items:center;display:flex;height:35px;margin:auto 0;padding-top:5px}.navbar__mobile-wrapper{align-items:center;display:flex;flex-direction:column;padding-bottom:20px;padding-left:32px;padding-right:32px}.navbar__container{display:flex;margin:0 auto;max-width:1280px;padding-left:12px;padding-right:12px;width:100%}.navbar__body{flex-basis:60%}.navbar__wrapper{align-items:center;display:flex;justify-content:space-between;width:100%}.navbar__product-search-wrapper{align-items:center;display:flex;justify-content:center;padding:0 20%;width:100%}@media only screen and (max-width:879px){.navbar__product-search-wrapper{padding:0}}.navbar__input-close-icon{height:auto;margin-bottom:10px;margin-left:10px;width:20px}@media only screen and (max-width:879px){.navbar__input-close-icon{margin-bottom:0;margin-left:0;width:15px}}.navbar__menu-icon{width:30px}.navbar__product-search{align-items:center;display:flex;max-width:545px;width:100%}.navbar__logo-wrapper{margin-right:18px;width:200px}.navbar__logo{width:200px}@media only screen and (max-width:879px){.navbar__logo{margin-left:10px;margin-top:5px;width:125px}}.navbar__form-input{align-items:center;background:transparent;border:none;display:flex;font-size:13px;outline:none;padding:8px;width:100%}.navbar__product-search{border:1px solid #dfdede;margin-bottom:10px}@media only screen and (max-width:879px){.navbar__product-search{border:none;border-bottom:1px solid #dfdede;margin-bottom:0;margin-right:10px;margin-top:10px}}.navbar__section{align-items:flex-start;display:flex;flex-direction:row;justify-content:space-between;width:100%}.navbar__link{display:inline-block;font-family:Martel Sans;font-size:14px;font-weight:700;margin-right:10px;overflow:hidden;text-transform:uppercase;transition:.3s ease-in-out}.navbar__link:after{background-color:#000;content:"";display:block;height:2px;transition:width .25s ease-out;width:0}.navbar__link:hover:after{width:100%}.navbar__link:hover .navbar__dropdown{animation:fadeInDropdown .3s ease-in-out;display:block}.navbar__dropdown{background-color:#fff;box-shadow:5px 5px 5px #dfdede;display:none;left:0;position:absolute;width:100%;z-index:999}@keyframes fadeInDropdown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.navbar__company-link{font-size:13px;font-weight:400;list-style:none;margin-left:18px;text-decoration:none}.navbar__company-block{align-items:center;background-color:#000;color:#fff;display:flex;font-weight:700;height:33px;justify-content:center;margin-right:0;padding:0 18px;text-transform:uppercase}.navbar__input-search-icon{height:auto;margin-left:1.125rem;margin-right:.375rem;width:15px}.navbar__nav-links{align-items:center;display:flex}.navbar__nav-links--wrap{flex-wrap:wrap}.navbar__icons{align-items:center;display:flex;height:40px;justify-content:flex-end;margin-bottom:10px}@media only screen and (max-width:879px){.navbar__icons{display:block;height:20px;margin-bottom:0}}.navbar__icon{cursor:pointer;height:auto;margin-right:18px;width:20px}@media only screen and (max-width:879px){.navbar__icon{margin-right:0}}.navbar__icon--app{cursor:pointer;height:auto;margin-left:12px;width:20px}@media only screen and (max-width:879px){.navbar__icon--app{margin-right:0}}.navbar__vip-icon{height:16px;position:absolute;right:-12px;top:-4px;width:16px}.navbar__cart-icon{position:relative}.navbar__cart-count{align-items:center;background-color:#000;border-radius:50%;bottom:50%;color:#fff;display:flex;font-size:13px;height:20px;justify-content:center;left:100%;position:absolute;width:20px}.side-nav{font-family:Martel Sans}.side-nav__errors{align-items:center;color:red;display:flex;font-size:16px;justify-content:center}.side-nav__overlay{background-color:rgba(78,73,73,.51);height:100%;opacity:0;position:fixed;top:0;transition:opacity .5s ease-out 0s,visibility .5s ease-out 0s;width:100%;z-index:99999}.side-nav__overlay--visible{opacity:1;visibility:visible}.side-nav__overlay--hidden{opacity:1;visibility:hidden}.side-nav__content{background-color:#fff;bottom:0;overflow-y:scroll;padding:1.5rem;position:fixed;top:0;transition:left .5s ease-in-out;width:80%;z-index:99999}.side-nav__content--hidden{display:none}.side-nav__content--open{left:0}.side-nav__content--closed{left:-100%}.side-nav__menu-title-wrapper{align-items:center;background-color:transparent;border:none;display:flex;justify-content:space-between;outline:none;width:100%}.side-nav__icon-container{float:right;margin-bottom:10px}.side-nav__menu-title{font-size:14px;font-weight:700;line-height:20px;text-transform:uppercase}.side-nav__accordion-icon{height:auto;width:15px}.side-nav__menu-item{margin-bottom:25px}.side-nav__close-icon{height:20px;margin-left:auto;width:20px}.side-nav__back-button-wrapper{align-items:center;display:flex;margin-bottom:25px}.side-nav__back-icon{height:20px;width:20px}.side-nav__back-button,.side-nav__sub-menu-title{font-weight:700;text-transform:uppercase}.side-nav__sub-menu-title{font-size:14px;margin-bottom:10px}.side-nav__elements{display:flex;flex-direction:column}.side-nav__element{color:#555;cursor:pointer;line-height:20px;margin-bottom:10px}.side-nav__element,.side-nav__sub-link{font-size:14px;font-weight:400;text-transform:capitalize}.side-nav__block-button{background-color:#000;color:#fff;font-weight:700;padding:10px 0;width:100%}.side-nav{font-family:Martel Sans}.side-nav__errors{align-items:center;color:red;display:flex;font-size:16px;justify-content:center}.side-nav__overlay{background-color:rgba(78,73,73,.51);height:100%;opacity:0;position:fixed;top:0;transition:opacity .5s ease-out 0s,visibility .5s ease-out 0s;width:100%;z-index:99999}.side-nav__overlay--visible{opacity:1;visibility:visible}.side-nav__overlay--hidden{opacity:1;visibility:hidden}.side-nav__content{background-color:#fff;bottom:0;overflow-y:scroll;padding:1.5rem;position:fixed;top:0;transition:left .5s ease-in-out;width:80%;z-index:99999}.side-nav__content--hidden{display:none}.side-nav__content--open{left:0}.side-nav__content--closed{left:-100%}.side-nav__menu-title-wrapper{align-items:center;background-color:transparent;border:none;display:flex;outline:none;width:100%}.side-nav__icon-container{float:right;margin-bottom:10px}.side-nav__menu-title{align-items:center;display:flex;font-size:14px;font-weight:700;justify-content:center;line-height:20px;text-transform:uppercase}.side-nav__menu-icon{display:flex;height:25px;margin-right:10px;width:25px}.side-nav__menu-divider{margin-bottom:40px}.side-nav__accordion-icon{height:auto;width:15px}.side-nav__menu-item{margin-bottom:25px}.side-nav__close-icon{height:20px;margin-left:auto;width:20px}.side-nav__back-button-wrapper{align-items:center;display:flex;margin-bottom:25px}.side-nav__back-icon{height:20px;width:20px}.side-nav__back-button,.side-nav__sub-menu-title{font-weight:700;text-transform:uppercase}.side-nav__sub-menu-title{font-size:14px;margin-bottom:10px}.side-nav__elements{display:flex;flex-direction:column}.side-nav__element{color:#555;cursor:pointer;line-height:20px;margin-bottom:10px}.side-nav__element,.side-nav__sub-link{font-size:14px;font-weight:400;text-transform:capitalize}.side-nav__block-button{background-color:#000;color:#fff;font-weight:700;padding:10px 0;width:100%}.interests__add-button{display:flex;flex-direction:row;gap:10px;width:100%}@media only screen and (max-width:879px){.interests__add-button{flex-direction:column}}.interests__section-wrapper{display:flex;flex-direction:column;width:100%}.interests__select-option{display:flex;flex-direction:column;margin-bottom:15px}.interests__title{font-family:El Messiri;font-size:16px;margin-bottom:10px}@charset "UTF-8";.currency-select-container{align-items:center;display:flex;margin-right:18px;position:relative}.currency-select-container .currency-flag{margin-right:5px}.currency-select-container .currency-flag img{height:15px;-o-object-fit:cover;object-fit:cover;width:20px}.currency-select-container .currency-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-color:transparent;border:none;color:#000;cursor:pointer;font-family:inherit;font-size:14px;margin:0;outline:none;padding:5px 15px 5px 5px}.currency-select-container .currency-select::-ms-expand{display:none}.currency-select-container .currency-select:focus{box-shadow:none;outline:none}.currency-select-container .currency-select:-moz-focusring{color:transparent;text-shadow:0 0 0 #000}.currency-select-container:after{color:#000;content:"▼";font-size:10px;pointer-events:none;position:absolute;right:0;top:50%;transform:translateY(-50%)}@media only screen and (max-width:879px){.currency-select-container .currency-select{appearance:menulist;-webkit-appearance:menulist;-moz-appearance:menulist;padding-right:0}.currency-select-container:after{display:none}}.currency-select-container.disabled{cursor:not-allowed;opacity:.7}.currency-select-container.disabled .currency-select{pointer-events:none}.stores-dropdown{align-items:flex-start;display:flex;font-family:Martel Sans;gap:20px;margin-left:auto;margin-right:auto;max-width:1280px;overflow-x:auto;padding:20px 15px}.stores-dropdown__image{height:200px;-o-object-fit:cover;object-fit:cover;width:100%}.stores-dropdown__store-details{flex-basis:20%}.stores-dropdown__title{font-family:El Messiri}.stores-dropdown__main-title,.stores-dropdown__title{font-size:16px;font-weight:400;letter-spacing:3px;margin-top:20px}.stores-dropdown__main-title{font-weight:700;margin-bottom:10px}.stores-dropdown__open-days{font-size:12px;font-weight:700;line-height:20px}.stores-dropdown__open-hours{font-size:12px;font-weight:400;line-height:20px}.stores-dropdown__queries-title{font-family:El Messiri;font-size:16px;font-weight:400;letter-spacing:3px}.stores-dropdown__contact-details{font-size:16px;font-weight:700}.stores-dropdown__view-more{cursor:pointer;font-size:14px;font-weight:400;margin-top:10px;text-transform:capitalize}.search-results{background:#fff;border:1px solid #dfdede;border-radius:2px;box-shadow:0 2px 8px rgba(0,0,0,.08);display:flex;position:absolute;width:770px;z-index:50}@media only screen and (max-width:1052px){.search-results{border:none;box-shadow:none;flex-direction:column;top:120px;width:100%}}.search-results__section:first-child{border-right:1px solid #dfdede;flex:1;min-width:240px}.search-results__section:last-child{display:flex;flex:2;flex-direction:column}.search-results__section-header{align-items:center;display:flex;justify-content:space-between}.search-results__header{color:#000;font-family:Martel Sans;font-size:14px;font-weight:600;margin-bottom:0;padding:16px 20px;text-transform:uppercase}.search-results__view-all-link{display:none}@media only screen and (max-width:879px){.search-results__view-all-link{color:#000;display:block;font-family:Martel Sans;font-size:14px;margin-right:20px}}.search-results__list{display:flex;flex-direction:column}.search-results__item{color:grey;font-family:Martel Sans;font-size:14px;padding:8px 20px;text-decoration:none}.search-results__product-list{display:flex;flex-direction:column;overflow-y:auto}.product-card{color:inherit;display:flex;padding:12px 20px;text-decoration:none;transition:background-color .15s ease}.product-card:hover{background-color:#f4f4f4}.product-card__image-container{border-radius:2px;flex-shrink:0;height:90px;margin-right:16px;overflow:hidden;width:90px}.product-card__image{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.product-card__details{display:flex;flex:1;flex-direction:column}.product-card__name{color:#000;font-family:Martel Sans;font-size:14px;line-height:1.4;margin-bottom:24px}.product-card__brand-name{font-weight:600}.product-card__info-row{align-items:flex-end;display:flex;justify-content:space-between}@media only screen and (max-width:879px){.product-card__info-row{align-items:flex-start;flex-direction:column}}.product-card__price-group{display:flex;flex-direction:column;gap:4px}.product-card__price{color:#000;font-family:Martel Sans;font-size:14px;font-weight:600;line-height:1}.product-card__retail-price{color:#939393;font-family:Martel Sans;font-size:14px;text-decoration:line-through}.product-card__condition{color:#000;font-family:Martel Sans;font-size:13px;margin-right:20px;text-align:right}.product-card__condition-label{color:#939393;margin-right:4px}.search-results__view-all-button{background-color:#f5f0ea!important;border:none;color:#000;cursor:pointer;font-family:Martel Sans;font-size:13px;font-weight:400;padding:16px;text-align:center}@media only screen and (max-width:879px){.search-results__view-all-button{display:none}}.dropdown{display:flex;justify-content:space-between;margin-left:auto;margin-right:auto;max-width:1280px;min-height:500px;overflow-x:auto;padding:20px 0}.dropdown__errors{align-items:center;color:red;display:flex;font-size:16px;justify-content:center;min-height:300px}.dropdown__column{flex:1;padding-left:12px}.dropdown__column:nth-child(2){flex:2}.dropdown__title{font-family:El Messiri;font-size:16px;font-weight:700;letter-spacing:3px;line-height:1;margin-bottom:20px;text-transform:uppercase}.dropdown__elements{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));max-height:800px;overflow-y:auto}.dropdown__brand-elements{-moz-column-count:3;column-count:3;max-height:800px}.dropdown__brand-element{cursor:pointer;margin-bottom:10px}.dropdown__element{flex-basis:33.33%;font-family:Martel Sans;font-size:14px;font-weight:400;margin-bottom:10px;text-transform:capitalize}.cover-spinner{align-items:center;background-color:hsla(0,0%,100%,.7);display:flex;height:100%;justify-content:center;min-height:400px;position:relative;top:50%;width:100%;z-index:9999}.cover-spinner:after{animation:spin 1.5s linear infinite;border:4px dotted #000;border-radius:50%;border-top-color:transparent;content:"";display:block;height:40px;position:absolute;width:40px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}

package/build/bundle.js

@@ -15999,7 +15999,7 @@
       return null;
     }
 
-    if (!isSearchFocused && !hasResults) {
+    if (!isSearchFocused) {
       return null;
     }
 
@@ -16022,7 +16022,7 @@
         key: product.link,
         href: product.link,
         className: "product-card"
-      }, (product.image_url || product.featured_image) && /*#__PURE__*/React__default.createElement("div", {
+      }, product.featured_image && /*#__PURE__*/React__default.createElement("div", {
         className: "product-card__image-container"
       }, /*#__PURE__*/React__default.createElement("img", {
         src: product.featured_image,
@@ -16126,6 +16126,7 @@
     var endpoint = _ref.endpoint,
         onProductIdsReceived = _ref.onProductIdsReceived,
         currency = _ref.currency;
+    var currentSearchRequestToken = React.useRef(null);
     var debounce = React.useCallback(function (func, wait) {
       var timeout;
       return function executedFunction() {
@@ -16156,49 +16157,75 @@
         });
       });
     }, []);
-    var performSearch = React.useCallback(function (nextValue, setSearchResults) {
-      if (!nextValue || nextValue.trim() === '') {
+    var performSearch = React.useCallback(function (searchQuery, setSearchResults) {
+      if (!searchQuery || searchQuery.trim() === '') {
         setSearchResults({
           brands: [],
           products: [],
           luxity_product_ids: []
         });
         return;
-      }
+      } // Cancel any ongoing search request to prevent race conditions
+
+
+      if (currentSearchRequestToken.current) {
+        currentSearchRequestToken.current.cancel();
+      } // Create a new token for this specific search request
 
-      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);
+      var newSearchToken = axios.CancelToken.source();
+      currentSearchRequestToken.current = newSearchToken;
+      axios.post(endpoint, searchProducts(searchQuery, 3, currency), {
+        cancelToken: newSearchToken.token
+      }).then(function (response) {
+        if (currentSearchRequestToken.current === newSearchToken) {
+          var searchResults = response.data.data.luxity_products_serach_results;
+          setSearchResults(searchResults);
+
+          if (searchResults && searchResults.luxity_product_ids) {
+            onProductIdsReceived(searchResults.luxity_product_ids);
+          }
+
+          currentSearchRequestToken.current = null;
+        }
+      }).catch(function (error) {
+        if (!axios.isCancel(error)) {
+          setSearchResults({
+            brands: [],
+            products: [],
+            luxity_product_ids: []
+          });
+          currentSearchRequestToken.current = null;
         }
-      }).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);
+      return debounce(function (searchQuery, setSearchResults) {
+        return performSearch(searchQuery, setSearchResults);
       }, 500);
     }, [debounce, performSearch]);
     var createDebouncedSearch = React.useCallback(function (setSearchResults) {
-      return function (nextValue) {
-        return debouncedSearch(nextValue, setSearchResults);
+      return function (searchQuery) {
+        return debouncedSearch(searchQuery, setSearchResults);
       };
     }, [debouncedSearch]);
     var createImmediateSearch = React.useCallback(function (setSearchValue, setSearchResults, onSearchSubmit) {
-      return function (value) {
+      return function (searchQuery) {
+        /*
+         * Cancel any pending search request when immediate search is performed
+         * Immediate search is when the user types a search query and presses enter
+         */
+        if (currentSearchRequestToken.current) {
+          currentSearchRequestToken.current.cancel();
+          currentSearchRequestToken.current = null;
+        }
+
         setSearchValue('');
         setSearchResults({
           brands: [],
           products: []
         });
-        onSearchSubmit(value);
+        onSearchSubmit(searchQuery);
       };
     }, []);
     return {
@@ -16208,6 +16235,72 @@
     };
   };
 
+  var useSearchClickOutside = function useSearchClickOutside(ref, searchResults, setCachedResults, setIsSearchFocused, setSearchResults) {
+    React.useEffect(function () {
+      var handleClickOutside = function handleClickOutside(event) {
+        if (ref.current && !ref.current.contains(event.target)) {
+          setCachedResults(searchResults);
+          setIsSearchFocused(false);
+          setSearchResults({
+            brands: [],
+            products: []
+          });
+        }
+      };
+
+      document.addEventListener('mousedown', handleClickOutside);
+      return function () {
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }, [ref, searchResults, setCachedResults, setIsSearchFocused, setSearchResults]);
+  };
+  var useSearchInputChange = function useSearchInputChange(setSearchValue, setIsSearchFocused, debouncedSearch, setSearchResults, setCachedResults) {
+    return React.useCallback(function (event) {
+      var value = event.target.value;
+      setSearchValue(value);
+      setIsSearchFocused(true);
+
+      if (value.trim().length >= 3) {
+        debouncedSearch(value);
+      } else {
+        setSearchResults({
+          brands: [],
+          products: []
+        });
+        setCachedResults({
+          brands: [],
+          products: []
+        });
+      }
+    }, [setSearchValue, setIsSearchFocused, debouncedSearch, setSearchResults, setCachedResults]);
+  };
+  var useSearchInputFocus = function useSearchInputFocus(searchValue, setIsSearchFocused, cachedResults, setSearchResults) {
+    return React.useCallback(function () {
+      setIsSearchFocused(true);
+
+      if (searchValue.trim().length >= 3) {
+        setSearchResults(cachedResults);
+      }
+    }, [searchValue, setIsSearchFocused, cachedResults, setSearchResults]);
+  };
+  var useSearchInputKeyDown = function useSearchInputKeyDown(searchValue, immediateSearch, setIsSearchFocused) {
+    var setSearchValue = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+    return React.useCallback(function (event) {
+      if (event.key === 'Enter') {
+        event.preventDefault();
+
+        if (searchValue.trim().length >= 3) {
+          immediateSearch(searchValue);
+        }
+
+        setIsSearchFocused(false);
+      } else if (event.key === 'Escape' && setSearchValue) {
+        setSearchValue('');
+        setIsSearchFocused(false);
+      }
+    }, [searchValue, immediateSearch, setIsSearchFocused, setSearchValue]);
+  };
+
   var LuxityDesktopHeader = function LuxityDesktopHeader(_ref) {
     var accountIcon = _ref.accountIcon,
         cartIcon = _ref.cartIcon,
@@ -16229,7 +16322,6 @@
         onCartClick = _ref.onCartClick,
         onAccountClick = _ref.onAccountClick,
         inputSearchIcon = _ref.inputSearchIcon,
-        onSearch = _ref.onSearch,
         onSellToUsClick = _ref.onSellToUsClick,
         contactUsLink = _ref.contactUsLink,
         ourStoryLink = _ref.ourStoryLink,
@@ -16310,56 +16402,24 @@
         searchResults = _useState14[0],
         setSearchResults = _useState14[1];
 
+    var _useState15 = React.useState({
+      brands: [],
+      products: []
+    }),
+        _useState16 = _slicedToArray(_useState15, 2),
+        cachedResults = _useState16[0],
+        setCachedResults = _useState16[1];
+
     var searchResultsRef = React.useRef(null);
-    var debouncedSearch = createDebouncedSearch(setSearchResults);
+    var debouncedSearch = createDebouncedSearch(function (results) {
+      setSearchResults(results);
+      setCachedResults(results);
+    });
     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);
-      } else {
-        setSearchResults({
-          brands: [],
-          products: []
-        });
-      }
-    };
-
-    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);
-      };
-    }, []);
-
-    var handleKeyDown = function handleKeyDown(event) {
-      if (event.key === 'Enter') {
-        event.preventDefault();
-
-        if (searchValue.trim().length >= 3) {
-          immediateSearch(searchValue);
-        }
-      } else if (event.key === 'Escape') {
-        setSearchValue('');
-      }
-
-      setIsSearchFocused(false);
-    };
+    var handleChange = useSearchInputChange(setSearchValue, setIsSearchFocused, debouncedSearch, setSearchResults, setCachedResults);
+    useSearchClickOutside(searchResultsRef, searchResults, setCachedResults, setIsSearchFocused, setSearchResults);
+    var handleSearchFocus = useSearchInputFocus(searchValue, setIsSearchFocused, cachedResults, setSearchResults);
+    var handleKeyDown = useSearchInputKeyDown(searchValue, immediateSearch, setIsSearchFocused);
 
     function addCategoryToElements(elements, categoryName) {
       return elements.map(function (element) {
@@ -16431,13 +16491,8 @@
       value: searchValue,
       onChange: handleChange,
       onKeyDown: handleKeyDown,
-      onClick: function onClick() {
-        onSearch();
-        setIsSearchFocused(true);
-      },
-      onFocus: function onFocus() {
-        return setIsSearchFocused(true);
-      }
+      onClick: handleSearchFocus,
+      onFocus: handleSearchFocus
     })), /*#__PURE__*/React__default.createElement(SearchResults, {
       searchValue: searchValue,
       searchResults: searchResults,
@@ -17361,73 +17416,41 @@
         searchResults = _useState8[0],
         setSearchResults = _useState8[1];
 
-    var _useState9 = React.useState(false),
+    var _useState9 = React.useState({
+      brands: [],
+      products: []
+    }),
         _useState10 = _slicedToArray(_useState9, 2),
-        isSearchFocused = _useState10[0],
-        setIsSearchFocused = _useState10[1];
+        cachedResults = _useState10[0],
+        setCachedResults = _useState10[1];
+
+    var _useState11 = React.useState(false),
+        _useState12 = _slicedToArray(_useState11, 2),
+        isSearchFocused = _useState12[0],
+        setIsSearchFocused = _useState12[1];
 
-    var _useState11 = React.useState({
+    var _useState13 = React.useState({
       trending_brands: [],
       latest_products: []
     }),
-        _useState12 = _slicedToArray(_useState11, 2),
-        initialSearchView = _useState12[0],
-        setInitialSearchView = _useState12[1];
+        _useState14 = _slicedToArray(_useState13, 2),
+        initialSearchView = _useState14[0],
+        setInitialSearchView = _useState14[1];
 
     var searchResultsRef = React.useRef(null);
     var searchInputRef = React.useRef(null);
-    var debouncedSearch = createDebouncedSearch(setSearchResults);
+    var debouncedSearch = createDebouncedSearch(function (results) {
+      setSearchResults(results);
+      setCachedResults(results);
+    });
     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);
-      } else {
-        setSearchResults({
-          brands: [],
-          products: []
-        });
-      }
-    };
-
-    var handleKeyDown = function handleKeyDown(event) {
-      if (event.key === 'Enter') {
-        event.preventDefault();
-
-        if (searchValue.trim().length >= 3) {
-          immediateSearch(searchValue);
-          setIsSearchFocused(false);
-        }
-      } else if (event.key === 'Escape') {
-        setSearchValue('');
-        setIsSearchFocused(false);
-      }
-    };
-
+    var handleChange = useSearchInputChange(setSearchValue, setIsSearchFocused, debouncedSearch, setSearchResults, setCachedResults);
+    var handleKeyDown = useSearchInputKeyDown(searchValue, immediateSearch, setIsSearchFocused, setSearchValue);
     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);
-      };
-    }, []);
+    useSearchClickOutside(searchResultsRef, searchResults, setCachedResults, setIsSearchFocused, setSearchResults);
+    var handleSearchFocus = useSearchInputFocus(searchValue, setIsSearchFocused, cachedResults, setSearchResults);
     React.useEffect(function () {
       if (showSearchBar && searchInputRef.current) {
         searchInputRef.current.focus();
@@ -17591,9 +17614,7 @@
       value: searchValue,
       onChange: handleChange,
       onKeyDown: handleKeyDown,
-      onFocus: function onFocus() {
-        return setIsSearchFocused(true);
-      }
+      onFocus: handleSearchFocus
     })), /*#__PURE__*/React__default.createElement("button", {
       type: "button",
       onClick: onSearchClick

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonlineza/luxity-lib",
-  "version": "2.35.7",
+  "version": "2.35.9",
   "scripts": {
     "start": "start-storybook -p 9001 -c .storybook -s ./public",
     "clean": "rimraf ./build/*.*",