@sledge-app/react-instant-search 0.0.38 → 0.0.40

package/dist/sledge-react-instant-search.js

@@ -22,7 +22,8 @@ const SEPARATE_COMPONENT_DISPLAY_NAME = {
   },
   SUGGESTION_KEYWORD_LISTS: "SuggestionKeywordLists",
   OTHER_INDEX_LISTS: "OtherIndexLists",
-  SEARCH_VIEW_MORE_RESULT: "SearchViewMoreResult"
+  SEARCH_VIEW_MORE_RESULT: "SearchViewMoreResult",
+  WISHLIST_WIDGET_ALERT: "WishlistWidgetAlert"
 };
 const sanitizeDataId = (id) => {
   if (!id)
@@ -36,6 +37,14 @@ const sanitizeDataId = (id) => {
   }
 };
 const isFunction = (data) => typeof data === "function";
+const scrollToElement = (element, headerOffset) => {
+  var elementPosition = element == null ? void 0 : element.getBoundingClientRect().top;
+  var offsetPosition = elementPosition + window.scrollY - headerOffset;
+  window.scrollTo({
+    top: offsetPosition,
+    behavior: "smooth"
+  });
+};
 const SearchIconWidget$1 = "";
 const root = "";
 const Loading = "";
@@ -2188,16 +2197,15 @@ const SkeletonLoading = {
   BlogGrid: SkeletonBlogGrid
 };
 const SearchIconWidget = (props) => {
+  const { isRenderApp, isJsVersion } = React__default.useContext(SledgeContext);
   const { size = "sm", children, onAfterAddToCart, onAfterAddWishlist, onAfterRemoveWishlist, onAfterRenderProduct } = props || {};
   let productCardsComponent = null;
   let suggestionKeywordListsComponent = null;
   let otherIndexListsComponent = null;
   let searchViewMoreResultComponent = null;
-  let separateJsVersionComponent = false;
   React__default.Children.map(children, (child) => {
     if (React__default.isValidElement(child) && isFunction(child.type)) {
-      const { component, isJsVersion } = (child == null ? void 0 : child.props) || {};
-      separateJsVersionComponent = isJsVersion;
+      const { component } = (child == null ? void 0 : child.props) || {};
       switch (child.type.name) {
         case SEPARATE_COMPONENT_DISPLAY_NAME.PRODUCT.CARDS:
           productCardsComponent = component;
@@ -2214,7 +2222,6 @@ const SearchIconWidget = (props) => {
       }
     }
   });
-  const { isRenderApp } = React__default.useContext(SledgeContext);
   const [sizing, setSizing] = React__default.useState({
     width: 0,
     height: 0
@@ -2246,7 +2253,7 @@ const SearchIconWidget = (props) => {
         onAfterAddWishlist,
         onAfterRemoveWishlist,
         onAfterRenderProduct,
-        separateJsVersionComponent,
+        isJsVersion,
         productCardsComponent,
         suggestionKeywordListsComponent,
         otherIndexListsComponent,
@@ -2321,7 +2328,7 @@ const SearchIconWidgetPopup = () => {
     },
     onAfterRenderProduct: (state) => {
     },
-    separateJsVersionComponent: null,
+    isJsVersion: null,
     productCardsComponent: null,
     suggestionKeywordListsComponent: null,
     otherIndexListsComponent: null,
@@ -2419,7 +2426,7 @@ const SearchIconWidgetPopup = () => {
         },
         onAfterRenderProduct = () => {
         },
-        separateJsVersionComponent = null,
+        isJsVersion = null,
         productCardsComponent = () => {
         },
         suggestionKeywordListsComponent = () => {
@@ -2435,7 +2442,7 @@ const SearchIconWidgetPopup = () => {
           onAfterAddWishlist,
           onAfterRemoveWishlist,
           onAfterRenderProduct,
-          separateJsVersionComponent,
+          isJsVersion,
           productCardsComponent,
           suggestionKeywordListsComponent,
           otherIndexListsComponent,
@@ -2525,7 +2532,7 @@ const SearchIconWidgetPopup = () => {
             {
               listsComponent: handleFunctions.suggestionKeywordListsComponent,
               keywords: suggestionSettings[suggestionIndex].keywords.list,
-              isComponentJsVersion: handleFunctions.separateJsVersionComponent
+              isComponentJsVersion: handleFunctions.isJsVersion
             }
           ) : null,
           searchResultOther && searchResultOther.map((item, index) => {
@@ -2536,7 +2543,7 @@ const SearchIconWidgetPopup = () => {
                 listsComponent: handleFunctions.otherIndexListsComponent,
                 name,
                 items: hits,
-                isComponentJsVersion: handleFunctions.separateJsVersionComponent
+                isComponentJsVersion: handleFunctions.isJsVersion
               }
             ) }, index);
           })
@@ -2560,7 +2567,7 @@ const SearchIconWidgetPopup = () => {
                 show_price: (_i = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _i.show_price
               },
               showOptionOutOfStock: true,
-              isComponentJsVersion: handleFunctions.separateJsVersionComponent,
+              isComponentJsVersion: handleFunctions.isJsVersion,
               cards: handleFunctions.productCardsComponent,
               onAfterAddToCart: handleFunctions.onAfterAddToCart,
               onAfterAddWishlist: handleFunctions.onAfterAddWishlist,
@@ -2592,7 +2599,7 @@ const SearchIconWidgetPopup = () => {
                   show_price: (_q = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _q.show_price
                 },
                 showOptionOutOfStock: true,
-                isComponentJsVersion: handleFunctions.separateJsVersionComponent,
+                isComponentJsVersion: handleFunctions.isJsVersion,
                 cards: handleFunctions.productCardsComponent,
                 onAfterAddToCart: handleFunctions.onAfterAddToCart,
                 onAfterAddWishlist: handleFunctions.onAfterAddWishlist,
@@ -2609,7 +2616,7 @@ const SearchIconWidgetPopup = () => {
             {
               component: handleFunctions.searchViewMoreResultComponent,
               keyword,
-              isComponentJsVersion: handleFunctions.separateJsVersionComponent
+              isComponentJsVersion: handleFunctions.isJsVersion
             }
           ) }) : null
         ] })
@@ -2620,19 +2627,17 @@ const SearchIconWidgetPopup = () => {
 const SearchResultWidget$1 = "";
 const SearchResultWidget = (props) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  const { isRenderApp, isJsVersion } = React__default.useContext(SledgeContext);
   const { layoutType = "default", query, data, children, onAfterAddToCart, onAfterAddWishlist, onAfterRemoveWishlist, onAfterRenderProduct } = props;
   const { keyword: queryKeyword = "" } = query || {};
   const { collectionId } = data || {};
   let productCardsComponent = null;
-  let separateJsVersionComponent = false;
   React__default.Children.map(children, (child) => {
     if (React__default.isValidElement(child) && isFunction(child.type) && child.type.name === SEPARATE_COMPONENT_DISPLAY_NAME.PRODUCT.CARDS) {
-      const { component, isJsVersion } = (child == null ? void 0 : child.props) || {};
+      const { component } = (child == null ? void 0 : child.props) || {};
       productCardsComponent = component;
-      separateJsVersionComponent = isJsVersion;
     }
   });
-  const { isRenderApp } = React__default.useContext(SledgeContext);
   const [isFirstLoading, setIsFirstLoading] = React__default.useState(true);
   const [isLoading, setIsLoading] = React__default.useState(true);
   const [keyword, setKeyword] = React__default.useState("");
@@ -2651,6 +2656,7 @@ const SearchResultWidget = (props) => {
   const [colorSwatches, setColorSwatches] = React__default.useState([]);
   const [defaultSort, setDefaultSort] = React__default.useState("");
   const [showOutOfStock, setShowOutOfStock] = React__default.useState(false);
+  const searchResultContainerRef = React__default.useRef(null);
   const previousState = usePrevious({ keyword });
   const handleChangeTabIndex = (id, name, e) => {
     setClickedTabIndexId(id);
@@ -2701,9 +2707,7 @@ const SearchResultWidget = (props) => {
     if (!response)
       return;
     const { results } = response;
-    setTimeout(() => {
-      setIsFirstLoading(false);
-    }, 1300);
+    setIsFirstLoading(false);
     setIsLoadingSetting(false);
     setIsLoading(false);
     if (type === "totalDataPerIndex") {
@@ -2754,6 +2758,7 @@ const SearchResultWidget = (props) => {
     }
   };
   const handleSettings = async (LOCAL_STORAGE_INSTANT_SEARCH_SETTING) => {
+    setIsLoadingSetting(true);
     let response;
     let run = false;
     let getFirstIndex;
@@ -3061,7 +3066,7 @@ const SearchResultWidget = (props) => {
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-summary-select-field-item", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "150px", height: "42px", color: "grey-100", rounded: "lg" }) })
     ] })
   ] });
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-container", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-container", ref: searchResultContainerRef, children: [
     isFirstLoading ? null : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${layoutType === "default" && (allowedTabs == null ? void 0 : allowedTabs.length) ? "sledge-instant-search__result-tab" : "sledge-instant-search__result-tab-no-index"}`, children: layoutType === "default" && (allowedTabs == null ? void 0 : allowedTabs.length) ? /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "sledge-instant-search__result-tab-list", children: allowedTabs.map((item) => {
       const { name, index, total } = item;
       let isActive = clickedTabIndexId === index;
@@ -3097,7 +3102,7 @@ const SearchResultWidget = (props) => {
       showOutOfStock,
       query,
       data,
-      separateJsVersionComponent,
+      isJsVersion,
       productCardsComponent,
       onAfterAddToCart,
       onAfterAddWishlist,
@@ -3108,7 +3113,8 @@ const SearchResultWidget = (props) => {
       filterHorizontalSkeleton,
       filterVerticalSkeleton,
       productGridSkeleton,
-      searchAndSelectOptionSkeleton
+      searchAndSelectOptionSkeleton,
+      searchResultContainerRef
     })
   ] });
 };
@@ -3129,7 +3135,7 @@ const ResultProduct = (props) => {
     showOutOfStock,
     query,
     data,
-    separateJsVersionComponent,
+    isJsVersion,
     productCardsComponent,
     setKeyword,
     filterHorizontalSkeleton,
@@ -3139,7 +3145,8 @@ const ResultProduct = (props) => {
     onAfterAddToCart,
     onAfterAddWishlist,
     onAfterRemoveWishlist,
-    onAfterRenderProduct
+    onAfterRenderProduct,
+    searchResultContainerRef
   } = props || {};
   const { keyword: queryKeyword = "" } = query || {};
   const { collectionId } = data || {};
@@ -3396,6 +3403,9 @@ const ResultProduct = (props) => {
   };
   const handlePageChange = (page) => {
     setCurrentPage(page);
+    setTimeout(() => {
+      scrollToElement(searchResultContainerRef.current, 50);
+    }, 200);
   };
   const handleChangeKeyword = (value) => {
     const searchParams = new URLSearchParams(document.location.search);
@@ -3615,7 +3625,7 @@ const ResultProduct = (props) => {
   });
   const paginationComponent = /* @__PURE__ */ jsxRuntimeExports.jsx(Pagination, { currentPage, totalPage, totalResult: totalSearchResult, onChange: (page) => handlePageChange(page) });
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    ((_f = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _f.enable_on_search) && ((_g = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _g.layout) === "horizontal" ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isFirstLoading ? filterHorizontalSkeleton : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isLoadingSetting ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-horizontal-loading", children: filterHorizontalSkeleton }) : filterHorizontalComponents.every((currentValue) => !currentValue) ? null : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-horizontal-wrapper", children: [
+    ((_f = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _f.enable_on_search) && ((_g = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _g.layout) === "horizontal" ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isFirstLoading ? filterHorizontalSkeleton : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isLoadingSetting ? null : filterHorizontalComponents.every((currentValue) => !currentValue) ? null : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-horizontal-wrapper", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-horizontal", children: filterHorizontalComponents }),
       Boolean((dataClickedFacets == null ? void 0 : dataClickedFacets.length) && ((_h = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _h.show_refine_by_block)) ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: Boolean(dataClickedFacets.every((currentValue) => !currentValue)) ? null : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-horizontal", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -3638,7 +3648,7 @@ const ResultProduct = (props) => {
       ] }) }) : null
     ] }) }) }) : null,
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-wrapper", "data-filter-layout": (_i = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _i.layout, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-      ((_j = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _j.enable_on_search) && ((_k = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _k.layout) === "vertical" ? isFirstLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter", children: filterVerticalSkeleton }) : filterVerticalComponents.every((currentValue) => !currentValue) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter", children: isLoadingSetting ? filterVerticalSkeleton : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      ((_j = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _j.enable_on_search) && ((_k = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _k.layout) === "vertical" ? isFirstLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter", children: filterVerticalSkeleton }) : filterVerticalComponents.every((currentValue) => !currentValue) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter", children: isLoadingSetting ? null : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
         Boolean((dataClickedFacets == null ? void 0 : dataClickedFacets.length) && ((_l = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _l.show_refine_by_block)) ? Boolean(dataClickedFacets.every((currentValue) => !currentValue)) ? null : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item-title-refine", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { className: "sledge-instant-search__result-filter-item-title-refine-heading", children: "Filter" }),
@@ -3740,7 +3750,7 @@ const ResultProduct = (props) => {
                   show_sku: (_s = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _s.show_sku,
                   show_price: (_t = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _t.show_price
                 },
-                isComponentJsVersion: separateJsVersionComponent,
+                isComponentJsVersion: isJsVersion,
                 cards: productCardsComponent,
                 showOptionOutOfStock: true,
                 onAfterAddToCart,
@@ -3758,7 +3768,7 @@ const ResultProduct = (props) => {
 };
 const ResultCategory = (props) => {
   var _a, _b, _c, _d;
-  const { keyword, clickedTabIndexId, clickedTabIndexName, setKeyword } = props || {};
+  const { keyword, clickedTabIndexId, clickedTabIndexName, setKeyword, searchResultContainerRef } = props || {};
   const [isFirstLoading, setIsFirstLoading] = React__default.useState(true);
   const [isLoading, setIsLoading] = React__default.useState(true);
   const [clickedSortId, setClickedSortId] = React__default.useState("");
@@ -3811,6 +3821,9 @@ const ResultCategory = (props) => {
   };
   const handlePageChange = (page) => {
     setCurrentPage(page);
+    setTimeout(() => {
+      scrollToElement(searchResultContainerRef.current, 50);
+    }, 200);
   };
   React__default.useEffect(() => {
     if (Boolean(previousState && (previousState == null ? void 0 : previousState.keyword) !== keyword)) {
@@ -3889,16 +3902,15 @@ const ResultEmpty = (props) => {
 const SearchWidget$1 = "";
 const SearchWidget = (props) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u;
+  const { isRenderApp, isJsVersion } = React__default.useContext(SledgeContext);
   const { width = "400px", children, onAfterAddToCart, onAfterAddWishlist, onAfterRemoveWishlist, onAfterRenderProduct } = props;
   let productCardsComponent = null;
   let suggestionKeywordListsComponent = null;
   let otherIndexListsComponent = null;
   let searchViewMoreResultComponent = null;
-  let separateJsVersionComponent = false;
   React__default.Children.map(children, (child) => {
     if (React__default.isValidElement(child) && isFunction(child.type)) {
-      const { component, isJsVersion } = (child == null ? void 0 : child.props) || {};
-      separateJsVersionComponent = isJsVersion;
+      const { component } = (child == null ? void 0 : child.props) || {};
       switch (child.type.name) {
         case SEPARATE_COMPONENT_DISPLAY_NAME.PRODUCT.CARDS:
           productCardsComponent = component;
@@ -3915,7 +3927,6 @@ const SearchWidget = (props) => {
       }
     }
   });
-  const { isRenderApp } = React__default.useContext(SledgeContext);
   const [isLoading, setIsLoading] = React__default.useState(true);
   const [keyword, setKeyword] = React__default.useState("");
   const [suffixIndexProduct, setSuffixIndexProduct] = React__default.useState("");
@@ -4085,12 +4096,12 @@ const SearchWidget = (props) => {
             {
               listsComponent: suggestionKeywordListsComponent,
               keywords: suggestionSettings[suggestionIndex].keywords.list,
-              isComponentJsVersion: separateJsVersionComponent
+              isComponentJsVersion: isJsVersion
             }
           ) : null,
           searchResultOther.map((item, index) => {
             const { hits, name } = item;
-            return /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Global.OtherIndexLists, { listsComponent: otherIndexListsComponent, name, items: hits, isComponentJsVersion: separateJsVersionComponent }) }, index);
+            return /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Global.OtherIndexLists, { listsComponent: otherIndexListsComponent, name, items: hits, isComponentJsVersion: isJsVersion }) }, index);
           })
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__widget-search-form-result-flex-item-product", children: [
@@ -4113,7 +4124,7 @@ const SearchWidget = (props) => {
                 show_price: (_h = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _h.show_price
               },
               showOptionOutOfStock: true,
-              isComponentJsVersion: separateJsVersionComponent,
+              isComponentJsVersion: isJsVersion,
               cards: productCardsComponent,
               onAfterAddToCart,
               onAfterAddWishlist,
@@ -4146,7 +4157,7 @@ const SearchWidget = (props) => {
                   show_price: (_p = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _p.show_price
                 },
                 showOptionOutOfStock: true,
-                isComponentJsVersion: separateJsVersionComponent,
+                isComponentJsVersion: isJsVersion,
                 cards: productCardsComponent,
                 onAfterAddToCart,
                 onAfterAddWishlist,
@@ -4157,7 +4168,7 @@ const SearchWidget = (props) => {
           ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__widget-search-form-result-product-disabled", children: "No product were found" })
         ] })
       ] }),
-      (searchResultProduct == null ? void 0 : searchResultProduct.length) || Object.keys(suggestionSettings).length && ((_r = (_q = suggestionSettings[suggestionIndex]) == null ? void 0 : _q.products) == null ? void 0 : _r.active) && ((_u = (_t = (_s = suggestionSettings[suggestionIndex]) == null ? void 0 : _s.products) == null ? void 0 : _t.list) == null ? void 0 : _u.length) ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__widget-button-more-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Global.SearchViewMoreResult, { component: searchViewMoreResultComponent, keyword, isComponentJsVersion: separateJsVersionComponent }) }) : null
+      (searchResultProduct == null ? void 0 : searchResultProduct.length) || Object.keys(suggestionSettings).length && ((_r = (_q = suggestionSettings[suggestionIndex]) == null ? void 0 : _q.products) == null ? void 0 : _r.active) && ((_u = (_t = (_s = suggestionSettings[suggestionIndex]) == null ? void 0 : _s.products) == null ? void 0 : _t.list) == null ? void 0 : _u.length) ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__widget-button-more-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Global.SearchViewMoreResult, { component: searchViewMoreResultComponent, keyword, isComponentJsVersion: isJsVersion }) }) : null
     ] }) }) })
   ] });
 };