@bonlineza/luxity-lib 2.38.0 → 2.38.2

package/CurrencySelect.js

@@ -42,10 +42,10 @@
   var relativeInlineStyle = styled.css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"])));
   var topMiddleBodyStyle = styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  z-index: 1;\n  bottom: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n"])));
   var getTopMiddleArrowAfterStyle = function getTopMiddleArrowAfterStyle(props) {
-    return styled.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  /*Bottom Arrow*/\n  top: 100%; /* At the bottom of the tooltip */\n  left: calc(50% - ", ");\n  border-width: ", ";\n  border-style: solid;\n  border-color: ", " transparent transparent transparent;\n"])), props.apexWidth, props.apexWidth, props.theme.colors.base);
+    return styled.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  /*Bottom Arrow*/\n  top: 100%; /* At the bottom of the tooltip */\n  left: calc(50% - ", ");\n  border-width: ", ";\n  border-style: solid;\n  border-color: ", " transparent transparent transparent;\n"])), props.$apexWidth, props.$apexWidth, props.theme.colors.base);
   };
   var getBottomMiddleBodyStyle = function getBottomMiddleBodyStyle(props) {
-    return styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 100%;\n  left: calc(50% - ", " / 2);\n"])), props.bodyWidth);
+    return styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 100%;\n  left: calc(50% - ", " / 2);\n"])), props.$bodyWidth);
   };
   var getBottomMiddleArrowAfterStyle = function getBottomMiddleArrowAfterStyle(props) {
     return styled.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  /*Top Arrow*/\n  bottom: 100%; /* At the top of the tooltip */\n  top: initial;\n  left: 50%;\n  border-style: solid;\n  border-color: transparent transparent ", " transparent;\n"])), props.theme.colors.base);
@@ -55,10 +55,10 @@
 
   var getBodyStyle = function getBodyStyle() {
     var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    var _props$toolTipPositio = props.toolTipPosition,
-        toolTipPosition = _props$toolTipPositio === void 0 ? '' : _props$toolTipPositio;
+    var _props$$toolTipPositi = props.$toolTipPosition,
+        $toolTipPosition = _props$$toolTipPositi === void 0 ? '' : _props$$toolTipPositi;
 
-    switch (toolTipPosition) {
+    switch ($toolTipPosition) {
       case 'top':
         return topMiddleBodyStyle;
 
@@ -72,9 +72,9 @@
 
   var getAfterStyling = function getAfterStyling() {
     var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    var toolTipPosition = props.toolTipPosition;
+    var $toolTipPosition = props.$toolTipPosition;
 
-    switch (toolTipPosition) {
+    switch ($toolTipPosition) {
       case 'top':
         return getTopMiddleArrowAfterStyle(props);
 
@@ -87,7 +87,7 @@
   };
 
   var Body = styled__default.span(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  ", ";\n  visibility: hidden;\n  opacity: 0;\n  width: ", ";\n  transition: visibility 0.3s linear, opacity 0.3s linear;\n  background-color: ", ";\n  color: white;\n  text-align: center;\n  border-radius: 5px;\n  ", "\n  &::after {\n    content: ' ';\n    position: absolute;\n    ", "\n  }\n"])), relativeInlineStyle, function (props) {
-    return props.bodyWidth;
+    return props.$bodyWidth;
   }, function (props) {
     return props.theme.colors.base || 'black';
   }, function (props) {
@@ -163,33 +163,33 @@
     });
   });
 
+  /* eslint-disable react/require-default-props */
+
   var Tooltip = function Tooltip(_ref) {
-    var children = _ref.children,
-        toolTipText = _ref.toolTipText,
-        toolTipPosition = _ref.toolTipPosition,
-        bodyWidth = _ref.bodyWidth,
-        apexWidth = _ref.apexWidth,
-        containerClassName = _ref.containerClassName,
-        bodyClassName = _ref.bodyClassName;
+    var _ref$children = _ref.children,
+        children = _ref$children === void 0 ? null : _ref$children,
+        _ref$toolTipText = _ref.toolTipText,
+        toolTipText = _ref$toolTipText === void 0 ? '' : _ref$toolTipText,
+        _ref$toolTipPosition = _ref.toolTipPosition,
+        toolTipPosition = _ref$toolTipPosition === void 0 ? 'top' : _ref$toolTipPosition,
+        _ref$bodyWidth = _ref.bodyWidth,
+        bodyWidth = _ref$bodyWidth === void 0 ? '8em' : _ref$bodyWidth,
+        _ref$apexWidth = _ref.apexWidth,
+        apexWidth = _ref$apexWidth === void 0 ? '5px' : _ref$apexWidth,
+        _ref$containerClassNa = _ref.containerClassName,
+        containerClassName = _ref$containerClassNa === void 0 ? '' : _ref$containerClassNa,
+        _ref$bodyClassName = _ref.bodyClassName,
+        bodyClassName = _ref$bodyClassName === void 0 ? '' : _ref$bodyClassName;
     return /*#__PURE__*/React__default.createElement(Container, {
       className: containerClassName
     }, children, /*#__PURE__*/React__default.createElement(Body, {
-      toolTipPosition: toolTipPosition,
-      bodyWidth: bodyWidth,
-      apexWidth: apexWidth,
+      $toolTipPosition: toolTipPosition,
+      $bodyWidth: bodyWidth,
+      $apexWidth: apexWidth,
       className: bodyClassName
     }, toolTipText));
   };
 
-  Tooltip.defaultProps = {
-    children: null,
-    toolTipText: '',
-    toolTipPosition: 'top',
-    bodyWidth: '8em',
-    apexWidth: '5px',
-    containerClassName: '',
-    bodyClassName: ''
-  };
   var Tooltip$1 = themed(Tooltip);
 
   var CurrencySelect = function CurrencySelect(_ref) {

package/GraphQLDropdownSelector.js

@@ -1313,10 +1313,10 @@
   var relativeInlineStyle = styled.css(_templateObject$i || (_templateObject$i = _taggedTemplateLiteral(["\n  position: relative;\n"])));
   var topMiddleBodyStyle = styled.css(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n  position: absolute;\n  z-index: 1;\n  bottom: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n"])));
   var getTopMiddleArrowAfterStyle = function getTopMiddleArrowAfterStyle(props) {
-    return styled.css(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral(["\n  /*Bottom Arrow*/\n  top: 100%; /* At the bottom of the tooltip */\n  left: calc(50% - ", ");\n  border-width: ", ";\n  border-style: solid;\n  border-color: ", " transparent transparent transparent;\n"])), props.apexWidth, props.apexWidth, props.theme.colors.base);
+    return styled.css(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral(["\n  /*Bottom Arrow*/\n  top: 100%; /* At the bottom of the tooltip */\n  left: calc(50% - ", ");\n  border-width: ", ";\n  border-style: solid;\n  border-color: ", " transparent transparent transparent;\n"])), props.$apexWidth, props.$apexWidth, props.theme.colors.base);
   };
   var getBottomMiddleBodyStyle = function getBottomMiddleBodyStyle(props) {
-    return styled.css(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 100%;\n  left: calc(50% - ", " / 2);\n"])), props.bodyWidth);
+    return styled.css(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 100%;\n  left: calc(50% - ", " / 2);\n"])), props.$bodyWidth);
   };
   var getBottomMiddleArrowAfterStyle = function getBottomMiddleArrowAfterStyle(props) {
     return styled.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  /*Top Arrow*/\n  bottom: 100%; /* At the top of the tooltip */\n  top: initial;\n  left: 50%;\n  border-style: solid;\n  border-color: transparent transparent ", " transparent;\n"])), props.theme.colors.base);
@@ -1326,10 +1326,10 @@
 
   var getBodyStyle = function getBodyStyle() {
     var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    var _props$toolTipPositio = props.toolTipPosition,
-        toolTipPosition = _props$toolTipPositio === void 0 ? '' : _props$toolTipPositio;
+    var _props$$toolTipPositi = props.$toolTipPosition,
+        $toolTipPosition = _props$$toolTipPositi === void 0 ? '' : _props$$toolTipPositi;
 
-    switch (toolTipPosition) {
+    switch ($toolTipPosition) {
       case 'top':
         return topMiddleBodyStyle;
 
@@ -1343,9 +1343,9 @@
 
   var getAfterStyling = function getAfterStyling() {
     var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    var toolTipPosition = props.toolTipPosition;
+    var $toolTipPosition = props.$toolTipPosition;
 
-    switch (toolTipPosition) {
+    switch ($toolTipPosition) {
       case 'top':
         return getTopMiddleArrowAfterStyle(props);
 
@@ -1358,7 +1358,7 @@
   };
 
   var Body$1 = styled__default.span(_templateObject$j || (_templateObject$j = _taggedTemplateLiteral(["\n  ", ";\n  visibility: hidden;\n  opacity: 0;\n  width: ", ";\n  transition: visibility 0.3s linear, opacity 0.3s linear;\n  background-color: ", ";\n  color: white;\n  text-align: center;\n  border-radius: 5px;\n  ", "\n  &::after {\n    content: ' ';\n    position: absolute;\n    ", "\n  }\n"])), relativeInlineStyle, function (props) {
-    return props.bodyWidth;
+    return props.$bodyWidth;
   }, function (props) {
     return props.theme.colors.base || 'black';
   }, function (props) {

package/LuxityDesktopHeader.js

@@ -298,7 +298,7 @@
   };
 
   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 _searchResults$brands, _searchResults$produc, _initialSearchData$tr, _initialSearchData$la, _limitBrands, _limitBrands2, _initialSearchData$la2, _searchResults$produc2;
 
     var searchValue = _ref.searchValue,
         searchResults = _ref.searchResults,
@@ -312,7 +312,10 @@
         currency = _ref.currency,
         currencySymbol = _ref.currencySymbol,
         onProductSearchResultClick = _ref.onProductSearchResultClick,
-        onBrandSearchResultClick = _ref.onBrandSearchResultClick;
+        onBrandSearchResultClick = _ref.onBrandSearchResultClick,
+        onCreateInterests = _ref.onCreateInterests,
+        noResultsImage = _ref.noResultsImage,
+        showNoResults = _ref.showNoResults;
 
     var _useState = React.useState(false),
         _useState2 = _slicedToArray(_useState, 2),
@@ -330,15 +333,16 @@
         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 hasSearchBeenPerformed = (searchValue === null || searchValue === void 0 ? void 0 : searchValue.trim().length) >= 3;
+    var hasResults = (searchResults === null || searchResults === void 0 ? void 0 : (_searchResults$brands = searchResults.brands) === null || _searchResults$brands === void 0 ? void 0 : _searchResults$brands.length) > 0 || (searchResults === null || searchResults === void 0 ? void 0 : (_searchResults$produc = searchResults.products) === null || _searchResults$produc === void 0 ? void 0 : _searchResults$produc.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;
+    var shouldShowInitialData = isSearchFocused && (!hasSearchBeenPerformed || !hasResults && !showNoResults);
 
-    if (!hasResults && !hasInitialData) {
+    if (!isSearchFocused) {
       return null;
     }
 
-    if (!isSearchFocused) {
+    if (!hasResults && !hasInitialData && !showNoResults) {
       return null;
     }
 
@@ -419,7 +423,36 @@
       }
 
       return brands;
-    };
+    }; // Show no results state
+
+
+    if (showNoResults) {
+      return /*#__PURE__*/React__default.createElement("div", {
+        className: "search-results",
+        ref: searchResultsRef
+      }, /*#__PURE__*/React__default.createElement("div", {
+        className: "search-results__no-results"
+      }, /*#__PURE__*/React__default.createElement("h2", {
+        className: "search-results__header"
+      }, "TOP MATCHES"), /*#__PURE__*/React__default.createElement("div", {
+        className: "search-results__no-results-content"
+      }, /*#__PURE__*/React__default.createElement("div", {
+        className: "search-results__no-results-image"
+      }, /*#__PURE__*/React__default.createElement("img", {
+        src: noResultsImage,
+        alt: "No results"
+      })), /*#__PURE__*/React__default.createElement("div", {
+        className: "search-results__no-results-text"
+      }, /*#__PURE__*/React__default.createElement("p", {
+        className: "search-results__no-results-title"
+      }, "There are currently no products in stock that match your selection"), /*#__PURE__*/React__default.createElement("p", {
+        className: "search-results__no-results-description"
+      }, "Create an interest now and receive instant notifications as your interests list."))), /*#__PURE__*/React__default.createElement("button", {
+        type: "button",
+        className: "search-results__create-interest-button",
+        onClick: onCreateInterests
+      }, "Create Interests")));
+    }
 
     return /*#__PURE__*/React__default.createElement("div", {
       className: "search-results",
@@ -476,7 +509,7 @@
       }
     }, "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", {
+    }, 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$produc2 = searchResults.products) === null || _searchResults$produc2 === void 0 ? void 0 : _searchResults$produc2.map(renderProductCard)), /*#__PURE__*/React__default.createElement("button", {
       type: "button",
       className: "search-results__view-all-button",
       onClick: function onClick() {
@@ -497,10 +530,10 @@
   var relativeInlineStyle = styled.css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"])));
   var topMiddleBodyStyle = styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  z-index: 1;\n  bottom: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n"])));
   var getTopMiddleArrowAfterStyle = function getTopMiddleArrowAfterStyle(props) {
-    return styled.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  /*Bottom Arrow*/\n  top: 100%; /* At the bottom of the tooltip */\n  left: calc(50% - ", ");\n  border-width: ", ";\n  border-style: solid;\n  border-color: ", " transparent transparent transparent;\n"])), props.apexWidth, props.apexWidth, props.theme.colors.base);
+    return styled.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  /*Bottom Arrow*/\n  top: 100%; /* At the bottom of the tooltip */\n  left: calc(50% - ", ");\n  border-width: ", ";\n  border-style: solid;\n  border-color: ", " transparent transparent transparent;\n"])), props.$apexWidth, props.$apexWidth, props.theme.colors.base);
   };
   var getBottomMiddleBodyStyle = function getBottomMiddleBodyStyle(props) {
-    return styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 100%;\n  left: calc(50% - ", " / 2);\n"])), props.bodyWidth);
+    return styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 100%;\n  left: calc(50% - ", " / 2);\n"])), props.$bodyWidth);
   };
   var getBottomMiddleArrowAfterStyle = function getBottomMiddleArrowAfterStyle(props) {
     return styled.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  /*Top Arrow*/\n  bottom: 100%; /* At the top of the tooltip */\n  top: initial;\n  left: 50%;\n  border-style: solid;\n  border-color: transparent transparent ", " transparent;\n"])), props.theme.colors.base);
@@ -510,10 +543,10 @@
 
   var getBodyStyle = function getBodyStyle() {
     var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    var _props$toolTipPositio = props.toolTipPosition,
-        toolTipPosition = _props$toolTipPositio === void 0 ? '' : _props$toolTipPositio;
+    var _props$$toolTipPositi = props.$toolTipPosition,
+        $toolTipPosition = _props$$toolTipPositi === void 0 ? '' : _props$$toolTipPositi;
 
-    switch (toolTipPosition) {
+    switch ($toolTipPosition) {
       case 'top':
         return topMiddleBodyStyle;
 
@@ -527,9 +560,9 @@
 
   var getAfterStyling = function getAfterStyling() {
     var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    var toolTipPosition = props.toolTipPosition;
+    var $toolTipPosition = props.$toolTipPosition;
 
-    switch (toolTipPosition) {
+    switch ($toolTipPosition) {
       case 'top':
         return getTopMiddleArrowAfterStyle(props);
 
@@ -542,7 +575,7 @@
   };
 
   var Body = styled__default.span(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  ", ";\n  visibility: hidden;\n  opacity: 0;\n  width: ", ";\n  transition: visibility 0.3s linear, opacity 0.3s linear;\n  background-color: ", ";\n  color: white;\n  text-align: center;\n  border-radius: 5px;\n  ", "\n  &::after {\n    content: ' ';\n    position: absolute;\n    ", "\n  }\n"])), relativeInlineStyle, function (props) {
-    return props.bodyWidth;
+    return props.$bodyWidth;
   }, function (props) {
     return props.theme.colors.base || 'black';
   }, function (props) {
@@ -618,33 +651,33 @@
     });
   });
 
+  /* eslint-disable react/require-default-props */
+
   var Tooltip = function Tooltip(_ref) {
-    var children = _ref.children,
-        toolTipText = _ref.toolTipText,
-        toolTipPosition = _ref.toolTipPosition,
-        bodyWidth = _ref.bodyWidth,
-        apexWidth = _ref.apexWidth,
-        containerClassName = _ref.containerClassName,
-        bodyClassName = _ref.bodyClassName;
+    var _ref$children = _ref.children,
+        children = _ref$children === void 0 ? null : _ref$children,
+        _ref$toolTipText = _ref.toolTipText,
+        toolTipText = _ref$toolTipText === void 0 ? '' : _ref$toolTipText,
+        _ref$toolTipPosition = _ref.toolTipPosition,
+        toolTipPosition = _ref$toolTipPosition === void 0 ? 'top' : _ref$toolTipPosition,
+        _ref$bodyWidth = _ref.bodyWidth,
+        bodyWidth = _ref$bodyWidth === void 0 ? '8em' : _ref$bodyWidth,
+        _ref$apexWidth = _ref.apexWidth,
+        apexWidth = _ref$apexWidth === void 0 ? '5px' : _ref$apexWidth,
+        _ref$containerClassNa = _ref.containerClassName,
+        containerClassName = _ref$containerClassNa === void 0 ? '' : _ref$containerClassNa,
+        _ref$bodyClassName = _ref.bodyClassName,
+        bodyClassName = _ref$bodyClassName === void 0 ? '' : _ref$bodyClassName;
     return /*#__PURE__*/React__default.createElement(Container, {
       className: containerClassName
     }, children, /*#__PURE__*/React__default.createElement(Body, {
-      toolTipPosition: toolTipPosition,
-      bodyWidth: bodyWidth,
-      apexWidth: apexWidth,
+      $toolTipPosition: toolTipPosition,
+      $bodyWidth: bodyWidth,
+      $apexWidth: apexWidth,
       className: bodyClassName
     }, toolTipText));
   };
 
-  Tooltip.defaultProps = {
-    children: null,
-    toolTipText: '',
-    toolTipPosition: 'top',
-    bodyWidth: '8em',
-    apexWidth: '5px',
-    containerClassName: '',
-    bodyClassName: ''
-  };
   var Tooltip$1 = themed(Tooltip);
 
   var CurrencySelect = function CurrencySelect(_ref) {
@@ -706,7 +739,7 @@
 
   var searchProductsFilter = function searchProductsFilter(search, limit, currencyCode) {
     return {
-      query: "\n      query LUXITY_PRODUCTS_FILTER(\n        $search: String!\n        $limit: Int!\n        $page: Int!\n        $sort_by: String!\n        $with_sold: Boolean!\n        $currency_code: String!\n      ) {\n        luxity_products_filter(\n          search: $search\n          limit: $limit\n          page: $page\n          sort_by: $sort_by\n          with_sold: $with_sold\n        ) {\n          data {\n            id\n            product {\n              sku\n              name\n              price(currency_code: $currency_code)\n              promotion_price(currency_code: $currency_code)\n              est_retail_price(currency_code: $currency_code)\n              condition\n              currency_symbol(currency_code: $currency_code)\n            }\n            category_type\n            gender\n            status\n            featured_image\n            on_promotion\n            promotion_discount\n            luxity_brand {\n              id\n              name\n              slug\n            }\n          }\n          total\n        }\n      }\n    ",
+      query: "\n      query LUXITY_PRODUCTS_FILTER(\n        $search: String!\n        $limit: Int!\n        $page: Int!\n        $sort_by: String!\n        $with_sold: Boolean!\n        $currency_code: String!\n      ) {\n        luxity_products_filter(\n          search: $search\n          limit: $limit\n          page: $page\n          sort_by: $sort_by\n          with_sold: $with_sold\n        ) {\n          data {\n            id\n            product {\n              sku\n              name\n              price(currency_code: $currency_code)\n              promotion_price(currency_code: $currency_code)\n              est_retail_price(currency_code: $currency_code)\n              condition\n              currency_symbol(currency_code: $currency_code)\n            }\n            product_slug\n            category_type\n            gender\n            status\n            featured_image\n            on_promotion\n            promotion_discount\n            luxity_brand {\n              id\n              name\n              slug\n            }\n          }\n          total\n        }\n      }\n    ",
       variables: {
         search: search,
         limit: limit,
@@ -722,7 +755,8 @@
     var endpoint = _ref.endpoint,
         onSearchLoading = _ref.onSearchLoading,
         currency = _ref.currency,
-        onSearchPreview = _ref.onSearchPreview;
+        onSearchPreview = _ref.onSearchPreview,
+        onNoResults = _ref.onNoResults;
     var currentSearchRequestToken = React.useRef(null);
     var debounce = React.useCallback(function (func, wait) {
       var timeout;
@@ -759,7 +793,12 @@
         setSearchResults({
           brands: [],
           products: []
-        });
+        }); // Reset no results state when clearing search
+
+        if (typeof onNoResults === 'function') {
+          onNoResults(false);
+        }
+
         return;
       } // Cancel any ongoing search request to prevent race conditions
 
@@ -770,7 +809,12 @@
 
 
       var newSearchToken = axios.CancelToken.source();
-      currentSearchRequestToken.current = newSearchToken; // Set loading to true when starting the search request
+      currentSearchRequestToken.current = newSearchToken; // Reset no results state when starting new search (user is typing)
+
+      if (typeof onNoResults === 'function') {
+        onNoResults(false);
+      } // Set loading to true when starting the search request
+
 
       if (typeof onSearchLoading === 'function') {
         onSearchLoading(true);
@@ -806,11 +850,15 @@
           }); // Map products to old structure with prices
 
           var products = productsData.map(function (product) {
+            // Generate product link: /products/{category_type}/{brand_slug}/{product_slug}
+            var categorySlug = product.category_type.toLowerCase().replace(/\s+/g, '-');
+            var brandSlug = product.luxity_brand.slug;
+            var productSlug = product.product_slug;
+            var link = "/products/".concat(categorySlug, "/").concat(brandSlug, "/").concat(productSlug);
             return {
               name: product.product.name,
               brand: product.luxity_brand.name,
-              link: "/products/".concat(product.id),
-              // Using product ID for link
+              link: link,
               price: product.product.price || 0,
               promotion_price: product.product.promotion_price || null,
               est_retail_price: product.product.est_retail_price || 0,
@@ -819,9 +867,9 @@
               featured_image: product.featured_image,
               on_promotion: product.on_promotion || false,
               promotion_discount: product.promotion_discount || 0,
-              // Keep new fields for potential future use
               id: product.id,
               category_type: product.category_type,
+              product_slug: product.product_slug,
               luxity_brand: product.luxity_brand
             };
           });
@@ -830,7 +878,13 @@
             products: products,
             total: totalResults
           };
-          setSearchResults(searchResults);
+          setSearchResults(searchResults); // Check if we have no results (empty aggregations)
+
+          var hasNoResults = brandsData.length === 0 && productsData.length === 0;
+
+          if (typeof onNoResults === 'function') {
+            onNoResults(hasNoResults);
+          }
 
           if (typeof onSearchPreview === 'function') {
             var hasResults = brands.length > 0 || products.length > 0;
@@ -840,11 +894,7 @@
             });
           }
 
-          currentSearchRequestToken.current = null; // Set loading to false when search completes successfully
-
-          if (typeof onSearchLoading === 'function') {
-            onSearchLoading(false);
-          }
+          currentSearchRequestToken.current = null;
         }
       }).catch(function (error) {
         if (!axios.isCancel(error)) {
@@ -852,14 +902,10 @@
             brands: [],
             products: []
           });
-          currentSearchRequestToken.current = null; // Set loading to false when search fails
-
-          if (typeof onSearchLoading === 'function') {
-            onSearchLoading(false);
-          }
+          currentSearchRequestToken.current = null;
         }
       });
-    }, [endpoint, currency, onSearchPreview, onSearchLoading]);
+    }, [endpoint, currency, onSearchPreview, onSearchLoading, onNoResults]);
     var debouncedSearch = React.useMemo(function () {
       return debounce(function (searchQuery, setSearchResults) {
         return performSearch(searchQuery, setSearchResults);
@@ -964,22 +1010,6 @@
       }
     }, [searchValue, immediateSearch, setIsSearchFocused, setSearchValue]);
   };
-  var useSearchUrlQuery = function useSearchUrlQuery(setSearchValue, debouncedSearch) {
-    var hasProcessedUrlQuery = React.useRef(false);
-    React.useEffect(function () {
-      if (hasProcessedUrlQuery.current) return;
-      var urlParams = new URLSearchParams(window.location.search);
-      var queryParam = urlParams.get('q');
-      var isSearchPage = window.location.pathname.includes('/search');
-
-      if (queryParam && queryParam.trim() !== '' && isSearchPage) {
-        hasProcessedUrlQuery.current = true;
-        setSearchValue(queryParam);
-        debouncedSearch(queryParam);
-      }
-    }, [setSearchValue, debouncedSearch]);
-    return hasProcessedUrlQuery;
-  };
 
   var removeCategoryByName = function removeCategoryByName(categories, name) {
     var _categories$filter;
@@ -1029,17 +1059,9 @@
         isExclusive = _ref.isExclusive,
         shop = _ref.shop,
         app = _ref.app,
-        categoryConfig = _ref.categoryConfig;
-
-    var _useSearch = useSearch({
-      endpoint: endpoint,
-      onSearchLoading: onSearchLoading,
-      currency: currency,
-      onSearchPreview: onSearchPreview
-    }),
-        fetchInitialSearchData = _useSearch.fetchInitialSearchData,
-        createDebouncedSearch = _useSearch.createDebouncedSearch,
-        createImmediateSearch = _useSearch.createImmediateSearch;
+        categoryConfig = _ref.categoryConfig,
+        onCreateInterests = _ref.onCreateInterests,
+        noResultsImage = _ref.noResultsImage;
 
     var _useState = React.useState(''),
         _useState2 = _slicedToArray(_useState, 2),
@@ -1090,14 +1112,30 @@
         cachedResults = _useState16[0],
         setCachedResults = _useState16[1];
 
+    var _useState17 = React.useState(false),
+        _useState18 = _slicedToArray(_useState17, 2),
+        showNoResults = _useState18[0],
+        setShowNoResults = _useState18[1];
+
     var searchResultsRef = React.useRef(null);
+
+    var _useSearch = useSearch({
+      endpoint: endpoint,
+      onSearchLoading: onSearchLoading,
+      currency: currency,
+      onSearchPreview: onSearchPreview,
+      onNoResults: setShowNoResults
+    }),
+        fetchInitialSearchData = _useSearch.fetchInitialSearchData,
+        createDebouncedSearch = _useSearch.createDebouncedSearch,
+        createImmediateSearch = _useSearch.createImmediateSearch;
+
     var debouncedSearch = createDebouncedSearch(function (results) {
       setSearchResults(results);
       setCachedResults(results);
     });
     var immediateSearch = createImmediateSearch(setSearchValue, setSearchResults, onSearchSubmit);
     var handleChange = useSearchInputChange(setSearchValue, setIsSearchFocused, debouncedSearch, setSearchResults, setCachedResults);
-    useSearchUrlQuery(setSearchValue, debouncedSearch);
     useSearchClickOutside(searchResultsRef, searchResults, setCachedResults, setIsSearchFocused, setSearchResults);
 
     var handleSearchClick = function handleSearchClick() {
@@ -1224,6 +1262,7 @@
           products: []
         });
         setIsSearchFocused(false);
+        setShowNoResults(false);
       },
       searchResultsRef: searchResultsRef,
       onSearchSubmit: onSearchSubmit,
@@ -1234,7 +1273,10 @@
       currency: currency,
       currencySymbol: currencySymbol,
       onProductSearchResultClick: onProductSearchResultClick,
-      onBrandSearchResultClick: onBrandSearchResultClick
+      onBrandSearchResultClick: onBrandSearchResultClick,
+      onCreateInterests: onCreateInterests,
+      noResultsImage: noResultsImage,
+      showNoResults: showNoResults
     }), /*#__PURE__*/React__default.createElement("nav", {
       className: "navbar__nav-links navbar__nav-links--wrap"
     }, renderDropdownLinks(), !!stores.length && /*#__PURE__*/React__default.createElement("li", {