@bonlineza/luxity-lib 2.35.8 → 2.36.0

package/LuxityAppSideNav.js

@@ -66,7 +66,7 @@
       src: accountIcon,
       alt: "close-icon",
       className: "side-nav__menu-icon"
-    }), "Account"))), /*#__PURE__*/React.createElement("div", {
+    }), "Account"))), onInterestClick && /*#__PURE__*/React.createElement("div", {
       className: "side-nav__menu-item"
     }, /*#__PURE__*/React.createElement("button", {
       type: "button",

package/LuxityDesktopHeader.js

@@ -189,11 +189,11 @@
       onClick: onMenuItemClick
     }, "All ", categoryTitle)), !!brandElements.length && brandElements.map(function (brand) {
       return /*#__PURE__*/React__default.createElement("div", {
-        className: "dropdown__brand-element"
+        className: "dropdown__brand-element",
+        key: brand.name
       }, /*#__PURE__*/React__default.createElement(LinkComponent, {
         href: "".concat(productsUrl, "/").concat(categorySlug, "/").concat(brand === null || brand === void 0 ? void 0 : brand.slug),
         className: "dropdown__element",
-        key: brand.name,
         onClick: onMenuItemClick
       }, brand === null || brand === void 0 ? void 0 : brand.name));
     }))), /*#__PURE__*/React__default.createElement("div", {
@@ -297,37 +297,6 @@
     }, contactNumber)));
   };
 
-  var categories = {
-    shoes: {
-      name: 'Shoes',
-      slug: 'shoes'
-    },
-    bags: {
-      name: 'Bags',
-      slug: 'bags'
-    },
-    clothing: {
-      name: 'Clothing',
-      slug: 'apparel'
-    },
-    watches: {
-      name: 'Watches',
-      slug: 'watches'
-    },
-    accessories: {
-      name: 'Accessories',
-      slug: 'accessories'
-    }
-  };
-
-  var removeCategoryByName = function removeCategoryByName(categories, name) {
-    var _categories$filter;
-
-    return (_categories$filter = categories === null || categories === void 0 ? void 0 : categories.filter(function (category) {
-      return category.name !== name;
-    })) !== null && _categories$filter !== void 0 ? _categories$filter : [];
-  };
-
   var SearchResults = function SearchResults(_ref) {
     var _searchResults$brands, _searchResults$produc, _searchResults$brands2, _searchResults$produc2, _initialSearchData$tr, _initialSearchData$la, _limitBrands, _limitBrands2, _initialSearchData$la2, _searchResults$produc3;
 
@@ -697,6 +666,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 +697,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
+
 
-      axios.post(endpoint, searchProducts(nextValue, 3, currency)).then(function (response) {
-        var searchResults = response.data.data.luxity_products_serach_results;
-        setSearchResults(searchResults);
+      if (currentSearchRequestToken.current) {
+        currentSearchRequestToken.current.cancel();
+      } // Create a new token for this specific search request
 
-        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 {
@@ -819,13 +815,16 @@
     }, [setSearchValue, setIsSearchFocused, debouncedSearch, setSearchResults, setCachedResults]);
   };
   var useSearchInputFocus = function useSearchInputFocus(searchValue, setIsSearchFocused, cachedResults, setSearchResults) {
+    var handleSearchClick = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : undefined;
     return React.useCallback(function () {
       setIsSearchFocused(true);
 
-      if (searchValue.trim().length >= 3) {
+      if (typeof handleSearchClick === 'function') {
+        handleSearchClick();
+      } else if (searchValue.trim().length >= 3) {
         setSearchResults(cachedResults);
       }
-    }, [searchValue, setIsSearchFocused, cachedResults, setSearchResults]);
+    }, [searchValue, setIsSearchFocused, cachedResults, setSearchResults, handleSearchClick]);
   };
   var useSearchInputKeyDown = function useSearchInputKeyDown(searchValue, immediateSearch, setIsSearchFocused) {
     var setSearchValue = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
@@ -845,6 +844,14 @@
     }, [searchValue, immediateSearch, setIsSearchFocused, setSearchValue]);
   };
 
+  var removeCategoryByName = function removeCategoryByName(categories, name) {
+    var _categories$filter;
+
+    return (_categories$filter = categories === null || categories === void 0 ? void 0 : categories.filter(function (category) {
+      return category.name.toLowerCase() !== name.toLowerCase();
+    })) !== null && _categories$filter !== void 0 ? _categories$filter : [];
+  };
+
   var LuxityDesktopHeader = function LuxityDesktopHeader(_ref) {
     var accountIcon = _ref.accountIcon,
         cartIcon = _ref.cartIcon,
@@ -852,12 +859,6 @@
         cartCount = _ref.cartCount,
         logoSrc = _ref.logoSrc,
         categoryElements = _ref.categoryElements,
-        newBrandsImage = _ref.newBrandsImage,
-        bagsImage = _ref.bagsImage,
-        shoesImage = _ref.shoesImage,
-        clothingImage = _ref.clothingImage,
-        accessoriesImage = _ref.accessoriesImage,
-        watchesImage = _ref.watchesImage,
         stores = _ref.stores,
         contactNumber = _ref.contactNumber,
         productsUrl = _ref.productsUrl,
@@ -871,9 +872,9 @@
         ourStoryLink = _ref.ourStoryLink,
         onLogoClick = _ref.onLogoClick,
         endpoint = _ref.endpoint,
-        menuData = _ref.menuData,
         initialSearchData = _ref.initialSearchData,
         onSearchSubmit = _ref.onSearchSubmit,
+        onSearchClick = _ref.onSearchClick,
         onProductIdsReceived = _ref.onProductIdsReceived,
         currency = _ref.currency,
         currencySymbol = _ref.currencySymbol,
@@ -885,7 +886,8 @@
         name = _ref.name,
         isVip = _ref.isVip,
         shop = _ref.shop,
-        app = _ref.app;
+        app = _ref.app,
+        categoryConfig = _ref.categoryConfig;
 
     var _useSearch = useSearch({
       endpoint: endpoint,
@@ -912,26 +914,17 @@
         setIsSearchFocused = _useState6[1];
 
     var _useState7 = React.useState({
-      latestArrivals: [],
-      bags: [],
-      shoes: [],
-      clothing: [],
-      accessories: [],
-      watches: [],
-      accessoriesCategories: [],
-      apparelStyles: []
-    }),
-        _useState8 = _slicedToArray(_useState7, 2),
-        dropdownData = _useState8[0],
-        setDropdownData = _useState8[1];
-
-    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),
-        initialSearchView = _useState10[0],
-        setInitialSearchView = _useState10[1];
+        dropdownData = _useState10[0],
+        setDropdownData = _useState10[1];
 
     var _useState11 = React.useState(false),
         _useState12 = _slicedToArray(_useState11, 2),
@@ -962,7 +955,17 @@
     var immediateSearch = createImmediateSearch(setSearchValue, setSearchResults, onSearchSubmit);
     var handleChange = useSearchInputChange(setSearchValue, setIsSearchFocused, debouncedSearch, setSearchResults, setCachedResults);
     useSearchClickOutside(searchResultsRef, searchResults, setCachedResults, setIsSearchFocused, setSearchResults);
-    var handleSearchFocus = useSearchInputFocus(searchValue, setIsSearchFocused, cachedResults, setSearchResults);
+
+    var handleSearchClick = function handleSearchClick() {
+      if (typeof onSearchClick === 'function') {
+        onSearchClick();
+        return;
+      }
+
+      handleSearchFocus();
+    };
+
+    var handleSearchFocus = useSearchInputFocus(searchValue, setIsSearchFocused, cachedResults, setSearchResults, onSearchClick);
     var handleKeyDown = useSearchInputKeyDown(searchValue, immediateSearch, setIsSearchFocused);
 
     function addCategoryToElements(elements, categoryName) {
@@ -975,29 +978,58 @@
 
     React.useMemo(function () {
       setLoading(true);
-      axios.get("".concat(menuData)).then(function (_ref2) {
+      axios.get("".concat(categoryConfig.menuData)).then(function (_ref2) {
         var data = _ref2.data;
         setLoading(false);
-        setDropdownData(function (prev) {
-          return _objectSpread2(_objectSpread2({}, prev), {}, {
-            latestArrivals: data.latest_arrivals,
-            bags: data.bags,
-            shoes: data.shoes,
-            apparel: data.apparel,
-            accessories: data.accessories,
-            watches: data.watches,
-            accessoriesCategories: data.accessories_categories,
-            apparelStyles: data.apparel_styles
-          });
-        });
+        setDropdownData(data);
       }).catch(function () {
         return setHasError(true);
       });
-    }, [menuData]);
+    }, [categoryConfig.menuData]);
     React.useMemo(function () {
+      if (!initialSearchData) {
+        return;
+      }
+
       fetchInitialSearchData(initialSearchData, setInitialSearchView);
     }, [initialSearchData, fetchInitialSearchData]);
 
+    var renderDropdownLinks = function renderDropdownLinks() {
+      return categoryConfig.categories.map(function (category) {
+        var title = category.title,
+            imageSrc = category.imageSrc,
+            categorySlug = category.categorySlug,
+            categoryName = category.categoryName,
+            elementsKey = category.elementsKey,
+            subCategoryElementsKey = category.subCategoryElementsKey,
+            styleElementsKey = category.styleElementsKey;
+        var categoryElementsProcessed = categoryElements;
+
+        if (subCategoryElementsKey && dropdownData[subCategoryElementsKey]) {
+          // show subcategory elements
+          categoryElementsProcessed = removeCategoryByName(dropdownData[subCategoryElementsKey], categoryName);
+        } else if (styleElementsKey && dropdownData[styleElementsKey]) {
+          categoryElementsProcessed = addCategoryToElements(dropdownData[styleElementsKey], categorySlug);
+        } else {
+          categoryElementsProcessed = addCategoryToElements(categoryElementsProcessed, categorySlug);
+        }
+
+        return /*#__PURE__*/React__default.createElement(DropdownLink, {
+          key: categorySlug,
+          title: title,
+          imageSrc: imageSrc,
+          categoryElements: categoryElementsProcessed,
+          brandElements: dropdownData[elementsKey] || [],
+          productsUrl: productsUrl,
+          categorySlug: categorySlug,
+          categoryTitle: categoryName,
+          isLoading: loading,
+          hasError: hasError,
+          LinkComponent: LinkComponent
+        });
+      });
+    };
+
     var getMarginRight = function getMarginRight(userIsVip, userName) {
       if (userIsVip) return '15px';
       if (userName) return '5px';
@@ -1035,7 +1067,7 @@
       value: searchValue,
       onChange: handleChange,
       onKeyDown: handleKeyDown,
-      onClick: handleSearchFocus,
+      onClick: handleSearchClick,
       onFocus: handleSearchFocus
     })), /*#__PURE__*/React__default.createElement(SearchResults, {
       searchValue: searchValue,
@@ -1059,74 +1091,9 @@
       currencySymbol: currencySymbol
     }), /*#__PURE__*/React__default.createElement("nav", {
       className: "navbar__nav-links navbar__nav-links--wrap"
-    }, /*#__PURE__*/React__default.createElement(DropdownLink, {
-      title: "New",
-      imageSrc: newBrandsImage,
-      categoryElements: categoryElements,
-      brandElements: dropdownData.latestArrivals,
-      productsUrl: productsUrl,
-      categorySlug: "brands",
-      categoryTitle: "Brands",
-      isLoading: loading,
-      hasError: hasError,
-      LinkComponent: LinkComponent
-    }), /*#__PURE__*/React__default.createElement(DropdownLink, {
-      title: "Bags",
-      imageSrc: bagsImage,
-      categoryElements: addCategoryToElements(categoryElements, categories.bags.slug),
-      brandElements: dropdownData.bags,
-      productsUrl: productsUrl,
-      categorySlug: categories.bags.slug,
-      categoryTitle: categories.bags.name,
-      isLoading: loading,
-      hasError: hasError,
-      LinkComponent: LinkComponent
-    }), /*#__PURE__*/React__default.createElement(DropdownLink, {
-      title: "Shoes",
-      imageSrc: shoesImage,
-      categoryElements: addCategoryToElements(categoryElements, categories.shoes.slug),
-      brandElements: dropdownData.shoes,
-      productsUrl: productsUrl,
-      categorySlug: categories.shoes.slug,
-      categoryTitle: categories.shoes.name,
-      isLoading: loading,
-      hasError: hasError,
-      LinkComponent: LinkComponent
-    }), /*#__PURE__*/React__default.createElement(DropdownLink, {
-      title: "Clothing",
-      imageSrc: clothingImage,
-      categoryElements: addCategoryToElements(dropdownData.apparelStyles, categories.clothing.slug),
-      brandElements: dropdownData.apparel,
-      productsUrl: productsUrl,
-      categorySlug: categories.clothing.slug,
-      categoryTitle: categories.clothing.name,
-      isLoading: loading,
-      hasError: hasError,
-      LinkComponent: LinkComponent
-    }), /*#__PURE__*/React__default.createElement(DropdownLink, {
-      title: "Accessories",
-      imageSrc: accessoriesImage,
-      categoryElements: removeCategoryByName(dropdownData.accessoriesCategories, 'ACCESSORIES'),
-      brandElements: dropdownData.accessories,
-      productsUrl: productsUrl,
-      categorySlug: categories.accessories.slug,
-      categoryTitle: categories.accessories.name,
-      isLoading: loading,
-      hasError: hasError,
-      LinkComponent: LinkComponent
-    }), /*#__PURE__*/React__default.createElement(DropdownLink, {
-      title: "Watches",
-      imageSrc: watchesImage,
-      categoryElements: addCategoryToElements(categoryElements, categories.watches.slug),
-      brandElements: dropdownData.watches,
-      productsUrl: productsUrl,
-      categorySlug: categories.watches.slug,
-      categoryTitle: categories.watches.name,
-      isLoading: loading,
-      hasError: hasError,
-      LinkComponent: LinkComponent
-    }), /*#__PURE__*/React__default.createElement("li", {
-      className: "navbar__link"
+    }, renderDropdownLinks(), !!stores.length && /*#__PURE__*/React__default.createElement("li", {
+      className: "navbar__link",
+      key: "Stores"
     }, /*#__PURE__*/React__default.createElement(LinkComponent, {
       href: contactUsLink,
       className: "navbar__link-item navbar__link-item--desktop"
@@ -1169,7 +1136,7 @@
       onClick: onAccountClick
     }, /*#__PURE__*/React__default.createElement("span", {
       className: "text-sm"
-    }, name))), /*#__PURE__*/React__default.createElement("button", {
+    }, name))), onInterestClick && /*#__PURE__*/React__default.createElement("button", {
       type: "button",
       className: "".concat(app ? 'navbar__icon--app' : 'navbar__icon'),
       onClick: onInterestClick

package/LuxityFooter.js

@@ -2102,13 +2102,13 @@
         setError = _useForm.setError;
 
     var renderLinks = function renderLinks(links, title) {
-      return /*#__PURE__*/React__default.createElement("div", {
+      return !!links.length && /*#__PURE__*/React__default.createElement("div", {
         className: "footer__link-container"
       }, /*#__PURE__*/React__default.createElement("div", {
         className: "footer__link-title"
       }, title), /*#__PURE__*/React__default.createElement("div", {
         className: "footer__links"
-      }, !!links.length && links.map(function (link) {
+      }, links.map(function (link) {
         return /*#__PURE__*/React__default.createElement("div", {
           className: "footer__link-wrapper",
           key: link.label
@@ -2291,13 +2291,13 @@
     }), /*#__PURE__*/React__default.createElement(AccordionSection, {
       title: "POPULAR",
       links: popularLinks
-    }), /*#__PURE__*/React__default.createElement(AccordionSection, {
+    }), !!sellLinks.length && /*#__PURE__*/React__default.createElement(AccordionSection, {
       title: "SELL",
       links: sellLinks
     }), /*#__PURE__*/React__default.createElement(AccordionSection, {
       title: "COMPANY",
       links: companyLinks
-    }), /*#__PURE__*/React__default.createElement(AccordionSection, {
+    }), !!storeLinks.length && /*#__PURE__*/React__default.createElement(AccordionSection, {
       title: "CONNECT",
       links: storeLinks
     }), /*#__PURE__*/React__default.createElement("div", {