@bonlineza/luxity-lib 2.37.8 → 2.38.1

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;
     }
 
@@ -357,6 +361,8 @@
         price: product.price,
         retail_price: product.est_retail_price
       };
+      var displayPrice = product.on_promotion && product.promotion_price ? product.promotion_price : selectedPrice.price;
+      var hasPromotion = product.on_promotion && product.promotion_price;
       return /*#__PURE__*/React__default.createElement("a", {
         key: product.link,
         href: product.link,
@@ -384,15 +390,23 @@
         className: "product-card__name"
       }, shouldShowInitialData ? /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement("span", {
         className: "product-card__brand-name"
-      }, product.brand.toUpperCase()), ' ', product.name) : product.name), /*#__PURE__*/React__default.createElement("div", {
+      }, product.brand.toUpperCase()), ' ', product.name) : /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement("span", {
+        className: "product-card__brand-name"
+      }, product.brand.toUpperCase()), ' ', product.name)), /*#__PURE__*/React__default.createElement("div", {
         className: "product-card__info-row"
       }, /*#__PURE__*/React__default.createElement("div", {
         className: "product-card__price-group"
+      }, hasPromotion ? /*#__PURE__*/React__default.createElement("div", {
+        className: "product-card__price-with-promotion"
       }, /*#__PURE__*/React__default.createElement("div", {
+        className: "product-card__price product-card__price--promotion"
+      }, formatPrice(displayPrice)), /*#__PURE__*/React__default.createElement("div", {
+        className: "product-card__price product-card__price--original"
+      }, formatPrice(selectedPrice.price))) : /*#__PURE__*/React__default.createElement("div", {
         className: "product-card__price"
-      }, formatPrice(selectedPrice.price)), selectedPrice.retail_price > 1 && /*#__PURE__*/React__default.createElement("div", {
+      }, formatPrice(displayPrice)), selectedPrice.retail_price > 1 && selectedPrice.retail_price > displayPrice && /*#__PURE__*/React__default.createElement("div", {
         className: "product-card__retail-price"
-      }, "Est. Retail: ", formatPrice(selectedPrice.retail_price))), /*#__PURE__*/React__default.createElement("div", {
+      }, "Est. Retail: ", formatPrice(selectedPrice.retail_price))), product.condition && /*#__PURE__*/React__default.createElement("div", {
         className: "product-card__condition"
       }, /*#__PURE__*/React__default.createElement("span", {
         className: "product-card__condition-label"
@@ -409,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",
@@ -466,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() {
@@ -684,22 +727,36 @@
     }))));
   };
 
-  var searchProducts = function searchProducts(search, limit, currencyCode) {
+  var searchBrandsAggregations = function searchBrandsAggregations(search, currencyCode) {
     return {
-      query: "\n      query SearchProducts($search: String!, $limit: Int!, $currencyCode: String!) {\n        luxity_products_serach_results(search: $search, limit: $limit, currency_code: $currencyCode) {\n          brands {\n            name\n            link\n          }\n          products {\n            name\n            link\n            price\n            est_retail_price\n            condition\n            featured_image\n          }\n          luxity_product_ids\n        }\n      }\n    ",
+      query: "\n      query GetProductFilterAggregations($search: String!) {\n        luxity_products_aggregations(search: $search) {\n          luxity_brand {\n            name\n          }\n        }\n      }\n    ",
+      variables: {
+        search: search,
+        currency_code: currencyCode
+      }
+    };
+  }; // NEW: Get top products for search dropdown (right side)
+
+  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    ",
       variables: {
         search: search,
         limit: limit,
-        currencyCode: currencyCode
+        page: 1,
+        sort_by: 'newest',
+        with_sold: false,
+        currency_code: currencyCode
       }
     };
   };
 
   var useSearch = function useSearch(_ref) {
     var endpoint = _ref.endpoint,
-        onProductIdsReceived = _ref.onProductIdsReceived,
+        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;
@@ -735,9 +792,13 @@
       if (!searchQuery || searchQuery.trim() === '') {
         setSearchResults({
           brands: [],
-          products: [],
-          luxity_product_ids: []
-        });
+          products: []
+        }); // Reset no results state when clearing search
+
+        if (typeof onNoResults === 'function') {
+          onNoResults(false);
+        }
+
         return;
       } // Cancel any ongoing search request to prevent race conditions
 
@@ -748,22 +809,81 @@
 
 
       var newSearchToken = axios.CancelToken.source();
-      currentSearchRequestToken.current = newSearchToken;
-      axios.post(endpoint, searchProducts(searchQuery, 3, currency), {
+      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);
+      } // Make TWO parallel queries: brands aggregations + products filter
+
+
+      Promise.all([// Query 1: Get brands aggregations
+      axios.post(endpoint, searchBrandsAggregations(searchQuery, currency), {
+        cancelToken: newSearchToken.token
+      }), // Query 2: Get top 3 products
+      axios.post(endpoint, searchProductsFilter(searchQuery, 3, currency), {
         cancelToken: newSearchToken.token
-      }).then(function (response) {
+      })]).then(function (_ref3) {
+        var _ref4 = _slicedToArray(_ref3, 2),
+            brandsResponse = _ref4[0],
+            productsResponse = _ref4[1];
+
         if (currentSearchRequestToken.current === newSearchToken) {
-          var searchResults = response.data.data.luxity_products_serach_results;
-          setSearchResults(searchResults);
+          var _brandsResponse$data$, _productsResponse$dat, _productsResponse$dat2;
+
+          // Extract brands from aggregations
+          var brandsData = ((_brandsResponse$data$ = brandsResponse.data.data.luxity_products_aggregations) === null || _brandsResponse$data$ === void 0 ? void 0 : _brandsResponse$data$.luxity_brand) || []; // Extract products from filter
+
+          var productsData = ((_productsResponse$dat = productsResponse.data.data.luxity_products_filter) === null || _productsResponse$dat === void 0 ? void 0 : _productsResponse$dat.data) || [];
+          var totalResults = ((_productsResponse$dat2 = productsResponse.data.data.luxity_products_filter) === null || _productsResponse$dat2 === void 0 ? void 0 : _productsResponse$dat2.total) || 0; // Map brands to old structure: { name, link }
+
+          var brands = brandsData.slice(0, 10).map(function (brand) {
+            return {
+              name: brand.name,
+              link: "/products/brands/".concat(brand.name.toLowerCase().replace(/\s+/g, '-')) // Convert to slug
+
+            };
+          }); // Map products to old structure with prices
+
+          var products = productsData.map(function (product) {
+            return {
+              name: product.product.name,
+              brand: product.luxity_brand.name,
+              link: "/products/".concat(product.id),
+              // Using product ID for link
+              price: product.product.price || 0,
+              promotion_price: product.product.promotion_price || null,
+              est_retail_price: product.product.est_retail_price || 0,
+              condition: product.product.condition || '',
+              currency_symbol: product.product.currency_symbol || '',
+              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,
+              luxity_brand: product.luxity_brand
+            };
+          });
+          var searchResults = {
+            brands: brands,
+            products: products,
+            total: totalResults
+          };
+          setSearchResults(searchResults); // Check if we have no results (empty aggregations)
+
+          var hasNoResults = brandsData.length === 0 && productsData.length === 0;
 
-          if (searchResults && searchResults.luxity_product_ids) {
-            onProductIdsReceived(searchResults.luxity_product_ids);
+          if (typeof onNoResults === 'function') {
+            onNoResults(hasNoResults);
           }
 
           if (typeof onSearchPreview === 'function') {
-            var _searchResults$brands, _searchResults$produc;
-
-            var hasResults = ((_searchResults$brands = searchResults.brands) === null || _searchResults$brands === void 0 ? void 0 : _searchResults$brands.length) > 0 || ((_searchResults$produc = searchResults.products) === null || _searchResults$produc === void 0 ? void 0 : _searchResults$produc.length) > 0;
+            var hasResults = brands.length > 0 || products.length > 0;
             onSearchPreview({
               search_string: searchQuery,
               has_results: hasResults
@@ -776,13 +896,12 @@
         if (!axios.isCancel(error)) {
           setSearchResults({
             brands: [],
-            products: [],
-            luxity_product_ids: []
+            products: []
           });
           currentSearchRequestToken.current = null;
         }
       });
-    }, [endpoint, currency, onSearchPreview, onProductIdsReceived]);
+    }, [endpoint, currency, onSearchPreview, onSearchLoading, onNoResults]);
     var debouncedSearch = React.useMemo(function () {
       return debounce(function (searchQuery, setSearchResults) {
         return performSearch(searchQuery, setSearchResults);
@@ -922,7 +1041,7 @@
         onSearchPreview = _ref.onSearchPreview,
         onProductSearchResultClick = _ref.onProductSearchResultClick,
         onBrandSearchResultClick = _ref.onBrandSearchResultClick,
-        onProductIdsReceived = _ref.onProductIdsReceived,
+        onSearchLoading = _ref.onSearchLoading,
         currency = _ref.currency,
         currencySymbol = _ref.currencySymbol,
         currencyOptions = _ref.currencyOptions,
@@ -936,17 +1055,9 @@
         isExclusive = _ref.isExclusive,
         shop = _ref.shop,
         app = _ref.app,
-        categoryConfig = _ref.categoryConfig;
-
-    var _useSearch = useSearch({
-      endpoint: endpoint,
-      onProductIdsReceived: onProductIdsReceived,
-      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),
@@ -997,7 +1108,24 @@
         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);
@@ -1130,6 +1258,7 @@
           products: []
         });
         setIsSearchFocused(false);
+        setShowNoResults(false);
       },
       searchResultsRef: searchResultsRef,
       onSearchSubmit: onSearchSubmit,
@@ -1140,7 +1269,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", {