@sledge-app/react-instant-search 0.0.39 → 0.0.41

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

@@ -2,9 +2,9 @@ import { j as jsxRuntimeExports, $ as $cb5cc270b50c6fcd$export$be92b6f5f03c0fe9,
 import React__default, { createElement } from "react";
 import { SledgeContext } from "@sledge-app/core";
 import "react-dom";
-const ProductFilterWidget = (props) => {
+const ProductFilterWidget = React__default.memo((props) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(SearchResultWidget, { layoutType: "product-filter", ...props });
-};
+});
 const API_URL = "https://sledge-api-preprod.offstack.io";
 const INSTANT_SEARCH_ENGINE_URL = "https://instant-search-engine.offstack.io";
 const LOCAL_STORAGE_KEY = {
@@ -22,7 +22,13 @@ 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 ELEMENT_ID = {
+  PRODUCT_REVIEW: {
+    ELEMENT_WIDGET: "product-review-widget"
+  }
 };
 const sanitizeDataId = (id) => {
   if (!id)
@@ -36,6 +42,16 @@ const sanitizeDataId = (id) => {
   }
 };
 const isFunction = (data) => typeof data === "function";
+const scrollToElement = (element, headerOffset) => {
+  if (!element)
+    return;
+  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 = "";
@@ -1156,7 +1172,7 @@ const getReviewInfo = async (id) => {
 };
 const Rating = (props) => {
   var _a;
-  const { value, size = "md", data, withSkeletonLoading = true } = props;
+  const { value, size = "md", data, withSkeletonLoading = true, isScrollToElementWidget = true } = props;
   const { productId } = data || {};
   const { isRenderApp } = React__default.useContext(SledgeContext);
   const [isFirstLoading, setIsFirstLoading] = React__default.useState(true);
@@ -1211,6 +1227,13 @@ const Rating = (props) => {
       await handleProductRatingInfo();
     }
   };
+  const handleOnClick = () => {
+    if (!isScrollToElementWidget)
+      return;
+    setTimeout(() => {
+      scrollToElement(document.getElementById(ELEMENT_ID.PRODUCT_REVIEW.ELEMENT_WIDGET), 50);
+    }, 200);
+  };
   React__default.useEffect(() => {
     if (!(isRenderApp == null ? void 0 : isRenderApp.productReview))
       return;
@@ -1235,7 +1258,7 @@ const Rating = (props) => {
       setIsFirstLoading(true);
     handleSettings(localStorage.getItem(LOCAL_STORAGE_KEY.PRODUCT_REVIEW_SETTING) || "");
   }, [isRenderApp, productId]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-product-review__rating", children: isFirstLoading && withSkeletonLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "230px", height: "28px", color: "grey-100", rounded: "md" }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-product-review__rating", onClick: handleOnClick, children: isFirstLoading && withSkeletonLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "230px", height: "28px", color: "grey-100", rounded: "md" }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", style: { display: "none" }, id: "sledge-product-review-rating-icon-svg-store", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("symbol", { id: "sledge-product-review-icons-rating-icon-fill", viewBox: "0 0 30 29", fill: fill_color || "#23BC45", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         "path",
@@ -1460,7 +1483,7 @@ const WidgetHeaderSummary = (props) => {
     {
       trigger: isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {}) : /* @__PURE__ */ jsxRuntimeExports.jsxs(motion.div, { initial: false, animate: isOpen ? "open" : "closed", className: "sledge-product-review__widget-summary-trigger", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-product-review__widget-summary-average", children: averageReview }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-product-review__widget-summary-rating", children: !isRefreshRating && /* @__PURE__ */ jsxRuntimeExports.jsx(Rating, { value: String(averageReview), size: "md", withSkeletonLoading: false }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-product-review__widget-summary-rating", children: !isRefreshRating && /* @__PURE__ */ jsxRuntimeExports.jsx(Rating, { value: String(averageReview), size: "md", withSkeletonLoading: false, isScrollToElementWidget: false }) }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-product-review__widget-summary-total", children: [
           totalReview,
           " ",
@@ -1497,7 +1520,7 @@ const WidgetHeaderSummary = (props) => {
         ] }, index);
       }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-product-review__widget-summary-dist", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-product-review__widget-summary-dist-progress", children: [5, 4, 3, 2, 1].map((item, index) => {
         return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-product-review__widget-summary-dist-progress-item", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Rating, { value: item, size: "sm", withSkeletonLoading: false }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Rating, { value: item, size: "sm", withSkeletonLoading: false, isScrollToElementWidget: false }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             Progress,
             {
@@ -1805,7 +1828,8 @@ const ProductGrid = ({
                 productId: id
               },
               size: "xs",
-              withSkeletonLoading: false
+              withSkeletonLoading: false,
+              isScrollToElementWidget: false
             }
           ) })
         ] })
@@ -2188,16 +2212,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 +2237,6 @@ const SearchIconWidget = (props) => {
       }
     }
   });
-  const { isRenderApp } = React__default.useContext(SledgeContext);
   const [sizing, setSizing] = React__default.useState({
     width: 0,
     height: 0
@@ -2246,7 +2268,7 @@ const SearchIconWidget = (props) => {
         onAfterAddWishlist,
         onAfterRemoveWishlist,
         onAfterRenderProduct,
-        separateJsVersionComponent,
+        isJsVersion,
         productCardsComponent,
         suggestionKeywordListsComponent,
         otherIndexListsComponent,
@@ -2321,7 +2343,7 @@ const SearchIconWidgetPopup = () => {
     },
     onAfterRenderProduct: (state) => {
     },
-    separateJsVersionComponent: null,
+    isJsVersion: null,
     productCardsComponent: null,
     suggestionKeywordListsComponent: null,
     otherIndexListsComponent: null,
@@ -2419,7 +2441,7 @@ const SearchIconWidgetPopup = () => {
         },
         onAfterRenderProduct = () => {
         },
-        separateJsVersionComponent = null,
+        isJsVersion = null,
         productCardsComponent = () => {
         },
         suggestionKeywordListsComponent = () => {
@@ -2435,7 +2457,7 @@ const SearchIconWidgetPopup = () => {
           onAfterAddWishlist,
           onAfterRemoveWishlist,
           onAfterRenderProduct,
-          separateJsVersionComponent,
+          isJsVersion,
           productCardsComponent,
           suggestionKeywordListsComponent,
           otherIndexListsComponent,
@@ -2525,7 +2547,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 +2558,7 @@ const SearchIconWidgetPopup = () => {
                 listsComponent: handleFunctions.otherIndexListsComponent,
                 name,
                 items: hits,
-                isComponentJsVersion: handleFunctions.separateJsVersionComponent
+                isComponentJsVersion: handleFunctions.isJsVersion
               }
             ) }, index);
           })
@@ -2560,7 +2582,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 +2614,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 +2631,7 @@ const SearchIconWidgetPopup = () => {
             {
               component: handleFunctions.searchViewMoreResultComponent,
               keyword,
-              isComponentJsVersion: handleFunctions.separateJsVersionComponent
+              isComponentJsVersion: handleFunctions.isJsVersion
             }
           ) }) : null
         ] })
@@ -2618,21 +2640,19 @@ const SearchIconWidgetPopup = () => {
   ] }) });
 };
 const SearchResultWidget$1 = "";
-const SearchResultWidget = (props) => {
+const SearchResultWidget = React__default.memo((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 +2671,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 +3081,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 +3117,7 @@ const SearchResultWidget = (props) => {
       showOutOfStock,
       query,
       data,
-      separateJsVersionComponent,
+      isJsVersion,
       productCardsComponent,
       onAfterAddToCart,
       onAfterAddWishlist,
@@ -3107,10 +3128,11 @@ const SearchResultWidget = (props) => {
       filterHorizontalSkeleton,
       filterVerticalSkeleton,
       productGridSkeleton,
-      searchAndSelectOptionSkeleton
+      searchAndSelectOptionSkeleton,
+      searchResultContainerRef
     })
   ] });
-};
+});
 const ResultProduct = (props) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t;
   const {
@@ -3128,7 +3150,7 @@ const ResultProduct = (props) => {
     showOutOfStock,
     query,
     data,
-    separateJsVersionComponent,
+    isJsVersion,
     productCardsComponent,
     setKeyword,
     filterHorizontalSkeleton,
@@ -3138,7 +3160,8 @@ const ResultProduct = (props) => {
     onAfterAddToCart,
     onAfterAddWishlist,
     onAfterRemoveWishlist,
-    onAfterRenderProduct
+    onAfterRenderProduct,
+    searchResultContainerRef
   } = props || {};
   const { keyword: queryKeyword = "" } = query || {};
   const { collectionId } = data || {};
@@ -3395,6 +3418,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);
@@ -3614,7 +3640,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 ? null : 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 ? /* @__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: [
       /* @__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(
@@ -3637,7 +3663,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 ? null : /* @__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: [
         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" }),
@@ -3739,7 +3765,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 +3783,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 +3836,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 +3917,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 +3942,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 +4111,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 +4139,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 +4172,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 +4183,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
     ] }) }) })
   ] });
 };