@sledge-app/react-instant-search 0.0.39 → 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);
@@ -3060,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;
@@ -3096,7 +3102,7 @@ const SearchResultWidget = (props) => {
       showOutOfStock,
       query,
       data,
-      separateJsVersionComponent,
+      isJsVersion,
       productCardsComponent,
       onAfterAddToCart,
       onAfterAddWishlist,
@@ -3107,7 +3113,8 @@ const SearchResultWidget = (props) => {
       filterHorizontalSkeleton,
       filterVerticalSkeleton,
       productGridSkeleton,
-      searchAndSelectOptionSkeleton
+      searchAndSelectOptionSkeleton,
+      searchResultContainerRef
     })
   ] });
 };
@@ -3128,7 +3135,7 @@ const ResultProduct = (props) => {
     showOutOfStock,
     query,
     data,
-    separateJsVersionComponent,
+    isJsVersion,
     productCardsComponent,
     setKeyword,
     filterHorizontalSkeleton,
@@ -3138,7 +3145,8 @@ const ResultProduct = (props) => {
     onAfterAddToCart,
     onAfterAddWishlist,
     onAfterRemoveWishlist,
-    onAfterRenderProduct
+    onAfterRenderProduct,
+    searchResultContainerRef
   } = props || {};
   const { keyword: queryKeyword = "" } = query || {};
   const { collectionId } = data || {};
@@ -3395,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);
@@ -3739,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,
@@ -3757,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("");
@@ -3810,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)) {
@@ -3888,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;
@@ -3914,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("");
@@ -4084,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: [
@@ -4112,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,
@@ -4145,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,
@@ -4156,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
     ] }) }) })
   ] });
 };