@bonlineza/luxity-lib 2.38.1 → 2.39.0

package/LuxityDesktopHeader.js

@@ -82,10 +82,22 @@
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
   }
 
+  function _toConsumableArray(arr) {
+    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+  }
+
+  function _arrayWithoutHoles(arr) {
+    if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+  }
+
   function _arrayWithHoles(arr) {
     if (Array.isArray(arr)) return arr;
   }
 
+  function _iterableToArray(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+  }
+
   function _iterableToArrayLimit(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
 
@@ -133,6 +145,10 @@
     return arr2;
   }
 
+  function _nonIterableSpread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+
   function _nonIterableRest() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
   }
@@ -298,7 +314,7 @@
   };
 
   var SearchResults = function SearchResults(_ref) {
-    var _searchResults$brands, _searchResults$produc, _initialSearchData$tr, _initialSearchData$la, _limitBrands, _limitBrands2, _initialSearchData$la2, _searchResults$produc2;
+    var _searchResults$brands, _searchResults$produc, _initialSearchData$tr, _initialSearchData$la;
 
     var searchValue = _ref.searchValue,
         searchResults = _ref.searchResults,
@@ -315,7 +331,9 @@
         onBrandSearchResultClick = _ref.onBrandSearchResultClick,
         onCreateInterests = _ref.onCreateInterests,
         noResultsImage = _ref.noResultsImage,
-        showNoResults = _ref.showNoResults;
+        showNoResults = _ref.showNoResults,
+        _ref$isLoading = _ref.isLoading,
+        isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading;
 
     var _useState = React.useState(false),
         _useState2 = _slicedToArray(_useState, 2),
@@ -354,6 +372,39 @@
       return "".concat(currencySymbol).concat(formatter.format(price));
     };
 
+    var renderBrandSkeleton = function renderBrandSkeleton() {
+      return /*#__PURE__*/React__default.createElement("div", {
+        className: "brand-skeleton"
+      }, /*#__PURE__*/React__default.createElement("div", {
+        className: "brand-skeleton__item shimmer"
+      }), /*#__PURE__*/React__default.createElement("div", {
+        className: "brand-skeleton__item shimmer"
+      }), /*#__PURE__*/React__default.createElement("div", {
+        className: "brand-skeleton__item shimmer"
+      }), /*#__PURE__*/React__default.createElement("div", {
+        className: "brand-skeleton__item shimmer"
+      }));
+    };
+
+    var renderProductSkeleton = function renderProductSkeleton() {
+      return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, _toConsumableArray(Array(3)).map(function (_, index) {
+        return /*#__PURE__*/React__default.createElement("div", {
+          key: index,
+          className: "product-skeleton"
+        }, /*#__PURE__*/React__default.createElement("div", {
+          className: "product-skeleton__image shimmer"
+        }), /*#__PURE__*/React__default.createElement("div", {
+          className: "product-skeleton__content"
+        }, /*#__PURE__*/React__default.createElement("div", {
+          className: "product-skeleton__title shimmer"
+        }), /*#__PURE__*/React__default.createElement("div", {
+          className: "product-skeleton__subtitle shimmer"
+        }), /*#__PURE__*/React__default.createElement("div", {
+          className: "product-skeleton__price shimmer"
+        })));
+      }));
+    };
+
     var renderProductCard = function renderProductCard(product) {
       var selectedPrice = product.prices ? product.prices.find(function (p) {
         return p.currency === currency;
@@ -423,6 +474,70 @@
       }
 
       return brands;
+    };
+
+    var renderBrandsList = function renderBrandsList() {
+      var _limitBrands2;
+
+      if (isLoading) {
+        return renderBrandSkeleton();
+      }
+
+      if (shouldShowInitialData) {
+        var _limitBrands;
+
+        return (_limitBrands = limitBrands(initialSearchData === null || initialSearchData === void 0 ? void 0 : initialSearchData.trending_brands)) === null || _limitBrands === void 0 ? void 0 : _limitBrands.map(function (brand) {
+          return /*#__PURE__*/React__default.createElement("a", {
+            key: brand.id,
+            href: getBrandLink(brand),
+            className: "search-results__item",
+            onClick: function onClick() {
+              if (typeof onBrandSearchResultClick === 'function') {
+                onBrandSearchResultClick({
+                  brand_name: brand.name,
+                  brand_link: getBrandLink(brand),
+                  search_string: searchValue,
+                  is_trending: true
+                });
+              }
+            }
+          }, brand.name);
+        });
+      }
+
+      return (_limitBrands2 = limitBrands(searchResults === null || searchResults === void 0 ? void 0 : searchResults.brands)) === null || _limitBrands2 === void 0 ? void 0 : _limitBrands2.map(function (brand) {
+        return /*#__PURE__*/React__default.createElement("a", {
+          key: brand.link,
+          href: brand.link,
+          className: "search-results__item",
+          onClick: function onClick() {
+            if (typeof onBrandSearchResultClick === 'function') {
+              onBrandSearchResultClick({
+                brand_name: brand.name,
+                brand_link: brand.link,
+                search_string: searchValue,
+                is_trending: false
+              });
+            }
+          }
+        }, brand.name);
+      });
+    };
+
+    var renderProductsList = function renderProductsList() {
+      var _searchResults$produc2;
+
+      if (isLoading) {
+        return renderProductSkeleton();
+      }
+
+      if (shouldShowInitialData) {
+        var _initialSearchData$la2;
+
+        return initialSearchData === null || initialSearchData === void 0 ? void 0 : (_initialSearchData$la2 = initialSearchData.latest_products) === null || _initialSearchData$la2 === void 0 ? void 0 : _initialSearchData$la2.map(renderProductCard);
+      }
+
+      return searchResults === null || searchResults === void 0 ? void 0 : (_searchResults$produc2 = searchResults.products) === null || _searchResults$produc2 === void 0 ? void 0 : _searchResults$produc2.map(renderProductCard);
     }; // Show no results state
 
 
@@ -463,39 +578,7 @@
       className: "search-results__header"
     }, shouldShowInitialData ? 'TRENDING SEARCHES' : 'BRANDS'), /*#__PURE__*/React__default.createElement("div", {
       className: "search-results__list"
-    }, shouldShowInitialData ? (_limitBrands = limitBrands(initialSearchData === null || initialSearchData === void 0 ? void 0 : initialSearchData.trending_brands)) === null || _limitBrands === void 0 ? void 0 : _limitBrands.map(function (brand) {
-      return /*#__PURE__*/React__default.createElement("a", {
-        key: brand.id,
-        href: getBrandLink(brand),
-        className: "search-results__item",
-        onClick: function onClick() {
-          if (typeof onBrandSearchResultClick === 'function') {
-            onBrandSearchResultClick({
-              brand_name: brand.name,
-              brand_link: getBrandLink(brand),
-              search_string: searchValue,
-              is_trending: true
-            });
-          }
-        }
-      }, brand.name);
-    }) : (_limitBrands2 = limitBrands(searchResults === null || searchResults === void 0 ? void 0 : searchResults.brands)) === null || _limitBrands2 === void 0 ? void 0 : _limitBrands2.map(function (brand) {
-      return /*#__PURE__*/React__default.createElement("a", {
-        key: brand.link,
-        href: brand.link,
-        className: "search-results__item",
-        onClick: function onClick() {
-          if (typeof onBrandSearchResultClick === 'function') {
-            onBrandSearchResultClick({
-              brand_name: brand.name,
-              brand_link: brand.link,
-              search_string: searchValue,
-              is_trending: false
-            });
-          }
-        }
-      }, brand.name);
-    }))), /*#__PURE__*/React__default.createElement("div", {
+    }, renderBrandsList())), /*#__PURE__*/React__default.createElement("div", {
       className: "search-results__section"
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "search-results__section-header"
@@ -509,7 +592,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$produc2 = searchResults.products) === null || _searchResults$produc2 === void 0 ? void 0 : _searchResults$produc2.map(renderProductCard)), /*#__PURE__*/React__default.createElement("button", {
+    }, renderProductsList()), /*#__PURE__*/React__default.createElement("button", {
       type: "button",
       className: "search-results__view-all-button",
       onClick: function onClick() {
@@ -739,7 +822,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,
@@ -835,7 +918,12 @@
         if (currentSearchRequestToken.current === newSearchToken) {
           var _brandsResponse$data$, _productsResponse$dat, _productsResponse$dat2;
 
-          // Extract brands from aggregations
+          // Set loading to false when search completes
+          if (typeof onSearchLoading === 'function') {
+            onSearchLoading(false);
+          } // 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) || [];
@@ -850,11 +938,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,
@@ -863,9 +955,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
             };
           });
@@ -894,6 +986,11 @@
         }
       }).catch(function (error) {
         if (!axios.isCancel(error)) {
+          // Set loading to false when search fails
+          if (typeof onSearchLoading === 'function') {
+            onSearchLoading(false);
+          }
+
           setSearchResults({
             brands: [],
             products: []
@@ -1041,7 +1138,7 @@
         onSearchPreview = _ref.onSearchPreview,
         onProductSearchResultClick = _ref.onProductSearchResultClick,
         onBrandSearchResultClick = _ref.onBrandSearchResultClick,
-        onSearchLoading = _ref.onSearchLoading,
+        _onSearchLoading = _ref.onSearchLoading,
         currency = _ref.currency,
         currencySymbol = _ref.currencySymbol,
         currencyOptions = _ref.currencyOptions,
@@ -1071,53 +1168,64 @@
 
     var _useState5 = React.useState(false),
         _useState6 = _slicedToArray(_useState5, 2),
-        isSearchFocused = _useState6[0],
-        setIsSearchFocused = _useState6[1];
+        searchLoading = _useState6[0],
+        setSearchLoading = _useState6[1];
+
+    var _useState7 = React.useState(false),
+        _useState8 = _slicedToArray(_useState7, 2),
+        isSearchFocused = _useState8[0],
+        setIsSearchFocused = _useState8[1];
 
-    var _useState7 = React.useState({
+    var _useState9 = React.useState({
       trending_brands: [],
       latest_products: []
     }),
-        _useState8 = _slicedToArray(_useState7, 2),
-        initialSearchView = _useState8[0],
-        setInitialSearchView = _useState8[1];
-
-    var _useState9 = React.useState({}),
         _useState10 = _slicedToArray(_useState9, 2),
-        dropdownData = _useState10[0],
-        setDropdownData = _useState10[1];
+        initialSearchView = _useState10[0],
+        setInitialSearchView = _useState10[1];
 
-    var _useState11 = React.useState(false),
+    var _useState11 = React.useState({}),
         _useState12 = _slicedToArray(_useState11, 2),
-        hasError = _useState12[0],
-        setHasError = _useState12[1];
+        dropdownData = _useState12[0],
+        setDropdownData = _useState12[1];
 
-    var _useState13 = React.useState({
-      brands: [],
-      products: []
-    }),
+    var _useState13 = React.useState(false),
         _useState14 = _slicedToArray(_useState13, 2),
-        searchResults = _useState14[0],
-        setSearchResults = _useState14[1];
+        hasError = _useState14[0],
+        setHasError = _useState14[1];
 
     var _useState15 = React.useState({
       brands: [],
       products: []
     }),
         _useState16 = _slicedToArray(_useState15, 2),
-        cachedResults = _useState16[0],
-        setCachedResults = _useState16[1];
+        searchResults = _useState16[0],
+        setSearchResults = _useState16[1];
 
-    var _useState17 = React.useState(false),
+    var _useState17 = React.useState({
+      brands: [],
+      products: []
+    }),
         _useState18 = _slicedToArray(_useState17, 2),
-        showNoResults = _useState18[0],
-        setShowNoResults = _useState18[1];
+        cachedResults = _useState18[0],
+        setCachedResults = _useState18[1];
+
+    var _useState19 = React.useState(false),
+        _useState20 = _slicedToArray(_useState19, 2),
+        showNoResults = _useState20[0],
+        setShowNoResults = _useState20[1];
 
     var searchResultsRef = React.useRef(null);
 
     var _useSearch = useSearch({
       endpoint: endpoint,
-      onSearchLoading: onSearchLoading,
+      onSearchLoading: function onSearchLoading(isLoading) {
+        setSearchLoading(isLoading);
+
+        if (typeof _onSearchLoading === 'function') {
+          _onSearchLoading(isLoading);
+        }
+      },
       currency: currency,
       onSearchPreview: onSearchPreview,
       onNoResults: setShowNoResults
@@ -1272,7 +1380,8 @@
       onBrandSearchResultClick: onBrandSearchResultClick,
       onCreateInterests: onCreateInterests,
       noResultsImage: noResultsImage,
-      showNoResults: showNoResults
+      showNoResults: showNoResults,
+      isLoading: searchLoading
     }), /*#__PURE__*/React__default.createElement("nav", {
       className: "navbar__nav-links navbar__nav-links--wrap"
     }, renderDropdownLinks(), !!stores.length && /*#__PURE__*/React__default.createElement("li", {