@sledge-app/react-instant-search 1.0.42 → 1.0.44

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

@@ -91,7 +91,8 @@ const LOCAL_STORAGE_KEY = {
   PRODUCT_RECOMMENDATION_SETTING: "sledge-product-recommendation-setting",
   ISSUED_AUTH_APP: "sledge-issued-auth-app",
   EXPIRED_AUTH_APP: "sledge-expired-auth-app",
-  RECENTLY_VIEWED_APP: "sledge-recently-viewed"
+  RECENTLY_VIEWED_APP: "sledge-recently-viewed",
+  LIMIT_PRODUCT: "sledge-limit-product"
 };
 const INTERNAL_SELECTOR_VALUE = {
   ELEMENT_TOAST_NOTIFICATION: "toast-notification",
@@ -143,6 +144,7 @@ const SELECTOR = {
     ELEMENT_RELATED_PRODUCTS: `[${SELECTOR_ATTRIBUTE_KEY}="product-recommendation-related-prodcuts"]`
   }
 };
+const DEFAULT_LIMIT_VALUE = [12, 24, 36, 48, 120];
 const DEFAULT_MAX_WIDTH_COMPONENT = "1180px";
 const DEFAULT_SEARCH_RESULT_URL = "/apps/sledge/search";
 const DEFAULT_WISHLIST_URL = "/apps/sledge/wishlist";
@@ -157,6 +159,7 @@ const OBJECT_DATA_STRING_KEY = {
   CURRENT_PAGE: "{{ current_page }}",
   TOTAL_PAGE: "{{ total_page }}",
   TOTAL_RESULT: "{{ total_result }}",
+  COLLECTION_ID: "{{ collection_id }}",
   COLLECTION_NAME: "{{ collection_name }}",
   TOTAL_WISHLIST: "{{ total_wishlist }}",
   ACCEPTED_FILETYPE_MEDIA: "{{ accepted_filetype_media }}",
@@ -3892,6 +3895,7 @@ const SearchResultWidget = (props) => {
   const [displaySettings, setDisplaySettings] = React__default.useState(((_f = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _f.display) || {});
   const [colorSwatches, setColorSwatches] = React__default.useState(((_g = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _g.colors) || []);
   const [defaultSort, setDefaultSort] = React__default.useState(((_h = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _h.default_sort) || "");
+  const [defaultLimit, setDefaultLimit] = React__default.useState(DEFAULT_LIMIT_VALUE[0]);
   const [showOutOfStock, setShowOutOfStock] = React__default.useState((_i = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _i.show_out_of_stock);
   const [languageSettings, setLanguageSettings] = React__default.useState(((_j = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _j.languages) || {});
   const [hierarchicalProductTypeSettings, setHierarchicalProductTypeSettings] = React__default.useState(((_k = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _k.hierarchical_product_type) || {});
@@ -3932,7 +3936,7 @@ const SearchResultWidget = (props) => {
     setClickedTabIndexType(type);
     setResultComponent(id.includes(indexProduct) ? /* @__PURE__ */ jsxRuntimeExports.jsx(ResultProduct, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(ResultCategory, {}));
   };
-  const handleInitStates = async (data, type) => {
+  const handleInitStates = async (data) => {
     var _a2;
     const { filters, index_product, tabs, hidden_tags, show_out_of_stock, display } = data;
     let getTabs = layoutType === "product-filter" ? tabs.filter(({ index }) => index == null ? void 0 : index.includes(index_product)) : tabs;
@@ -3967,7 +3971,7 @@ const SearchResultWidget = (props) => {
           setFacets(getFacets[0]);
         return {
           indexUid: index,
-          q: type === "default" ? "" : keyword,
+          q: keyword || "",
           hitsPerPage: 1,
           facets: isHasProductFacets ? getFacets[0] : [],
           filter: isProductIndex ? additionalFilter.join(" AND ") : ""
@@ -3985,7 +3989,7 @@ const SearchResultWidget = (props) => {
     setIsFirstLoading(false);
     setIsLoadingSetting(false);
     setIsLoading(false);
-    const { facetDistribution } = (results == null ? void 0 : results.find(({ indexUid }) => indexUid.includes(index_product))) || {};
+    const { facetStats, totalHits, facetDistribution } = (results == null ? void 0 : results.find(({ indexUid }) => indexUid.includes(index_product))) || {};
     setSearchResultFacets(
       facetDistribution ? Object.fromEntries(
         Object.entries(facetDistribution).map((facet) => {
@@ -4011,26 +4015,23 @@ const SearchResultWidget = (props) => {
         })
       ) : {}
     );
-    if (type === "totalDataPerIndex") {
-      setAllowedTabs(
-        tabs == null ? void 0 : tabs.map((tab) => {
-          const { index } = tab;
-          const { totalHits } = (results == null ? void 0 : results.find(({ indexUid }) => indexUid === index)) || {};
-          return {
-            ...tab,
-            ...{
-              total: totalHits
-            }
-          };
-        })
-      );
-    } else {
-      const { facetStats, totalHits } = (results == null ? void 0 : results.find(({ indexUid }) => indexUid.includes(index_product))) || {};
-      setDefaultFacetStats(facetStats);
-      setHideFilterWhenOneValue(((_a2 = display == null ? void 0 : display.filter) == null ? void 0 : _a2.hide_when_one_value) && totalHits <= 1);
-    }
+    setDefaultFacetStats(facetStats);
+    setHideFilterWhenOneValue(((_a2 = display == null ? void 0 : display.filter) == null ? void 0 : _a2.hide_when_one_value) && totalHits <= 1);
+    setAllowedTabs(
+      tabs == null ? void 0 : tabs.map((tab) => {
+        const { index } = tab;
+        const { totalHits: totalHits2 } = (results == null ? void 0 : results.find(({ indexUid }) => indexUid === index)) || {};
+        return {
+          ...tab,
+          ...{
+            total: totalHits2
+          }
+        };
+      })
+    );
   };
   const handleSettings = async (LOCAL_STORAGE_INSTANT_SEARCH_SETTING) => {
+    var _a2;
     setIsLoadingSetting(true);
     let response;
     let getFirstIndex;
@@ -4038,13 +4039,28 @@ const SearchResultWidget = (props) => {
     if (!response)
       return;
     const { allowed_sorts, default_sort, filters, index_product, tabs, hidden_tags, display, colors, show_out_of_stock, languages, hierarchical_product_type } = response;
-    setAllowedSorts((allowed_sorts == null ? void 0 : allowed_sorts.length) ? allowed_sorts : []);
+    const { limit } = (display == null ? void 0 : display.search) || {};
+    let valueAllowedSorts = (allowed_sorts == null ? void 0 : allowed_sorts.length) ? collectionId ? allowed_sorts.map((allowed_sort) => {
+      const { value, ...other_allowed_sort } = allowed_sort;
+      return {
+        ...other_allowed_sort,
+        value: String(value).replaceAll(OBJECT_DATA_STRING_KEY.COLLECTION_ID, String(collectionId))
+      };
+    }) : allowed_sorts.filter((allowed_sort) => {
+      const { value } = allowed_sort;
+      if (!String(value).includes(OBJECT_DATA_STRING_KEY.COLLECTION_ID))
+        return allowed_sort;
+    }) : [];
+    setAllowedSorts(valueAllowedSorts);
     setAllowedFilters((filters == null ? void 0 : filters.length) ? filters : []);
     setIndexProduct(index_product);
     setHiddenTags(hidden_tags);
     setDisplaySettings(display);
     setColorSwatches(colors);
-    setDefaultSort(default_sort);
+    setDefaultSort(
+      collectionId ? String(default_sort).replaceAll(OBJECT_DATA_STRING_KEY.COLLECTION_ID, String(collectionId)) : String(default_sort).includes(OBJECT_DATA_STRING_KEY.COLLECTION_ID) ? (_a2 = valueAllowedSorts[0]) == null ? void 0 : _a2.value : default_sort
+    );
+    setDefaultLimit((localStorage == null ? void 0 : localStorage.getItem(LOCAL_STORAGE_KEY.LIMIT_PRODUCT)) || limit);
     setShowOutOfStock(show_out_of_stock);
     setLanguageSettings(languages);
     setHierarchicalProductTypeSettings(hierarchical_product_type);
@@ -4054,9 +4070,13 @@ const SearchResultWidget = (props) => {
       setClickedTabIndexName(getFirstIndex.name);
       setClickedTabIndexType(getFirstIndex.type);
     }
-    await handleInitStates(response, "default");
-    if (layoutType === "default")
-      await handleInitStates(response, "totalDataPerIndex");
+    await handleInitStates(response);
+  };
+  const handleChangeKeyword = (value) => {
+    const searchParams2 = new URLSearchParams(document.location.search);
+    searchParams2.set(queryKeyword, value);
+    setKeyword(value);
+    window.history.pushState(null, "", `${document.location.pathname}?${searchParams2.toString()}`);
   };
   React__default.useEffect(() => {
     if (!isRenderAppInstantSearch)
@@ -4073,11 +4093,11 @@ const SearchResultWidget = (props) => {
     setKeyword(valueRenderInstantSearchResult);
   }, [valueRenderInstantSearchResult]);
   React__default.useEffect(() => {
-    if (Boolean(previousState && (previousState == null ? void 0 : previousState.keyword) !== keyword) && layoutType === "default") {
+    if (Boolean(previousState && (previousState == null ? void 0 : previousState.keyword) !== keyword)) {
       const INSTANT_SEARCH_SETTING = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY.INSTANT_SEARCH_SETTING) || "");
       const delayDebounceFn = setTimeout(() => {
         if (INSTANT_SEARCH_SETTING)
-          handleInitStates(INSTANT_SEARCH_SETTING, "totalDataPerIndex");
+          handleInitStates(INSTANT_SEARCH_SETTING);
       }, 500);
       return () => clearTimeout(delayDebounceFn);
     }
@@ -4383,6 +4403,7 @@ const SearchResultWidget = (props) => {
       displaySettings,
       colorSwatches,
       defaultSort,
+      defaultLimit,
       showOutOfStock,
       languageSettings,
       hierarchicalProductTypeSettings,
@@ -4417,12 +4438,13 @@ const SearchResultWidget = (props) => {
       settings,
       isReplaceWidgetList,
       setIsReplaceWidgetList,
-      searchResultFacets
+      searchResultFacets,
+      handleChangeKeyword
     })
   ] });
 };
 const ResultProduct = (props) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
   const {
     layoutType,
     keyword,
@@ -4437,6 +4459,7 @@ const ResultProduct = (props) => {
     displaySettings,
     colorSwatches,
     defaultSort,
+    defaultLimit,
     showOutOfStock,
     languageSettings,
     hierarchicalProductTypeSettings,
@@ -4444,7 +4467,6 @@ const ResultProduct = (props) => {
     params,
     isJsVersion,
     productCardsComponent,
-    setKeyword,
     filterHorizontalSkeleton,
     filterHorizontalSkeletonComponent,
     filterVerticalSkeleton,
@@ -4462,14 +4484,14 @@ const ResultProduct = (props) => {
     settings,
     isReplaceWidgetList,
     setIsReplaceWidgetList,
-    searchResultFacets
+    searchResultFacets,
+    handleChangeKeyword
   } = props || {};
-  const queryKeyword = (query == null ? void 0 : query.keyword) ? query.keyword : DEFAULT_QUERY_PARAM.KEYWORD;
   const { collectionId, collectionName } = params || {};
   const [isFirstLoading, setIsFirstLoading] = React__default.useState(!propsData);
   const [isLoading, setIsLoading] = React__default.useState(!propsData);
   const [clickedSortId, setClickedSortId] = React__default.useState(defaultSort || "");
-  const [clickedLimitId, setClickedLimitId] = React__default.useState(((_a = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _a.limit) || 10);
+  const [clickedLimitId, setClickedLimitId] = React__default.useState(Number(defaultLimit || DEFAULT_LIMIT_VALUE[0]));
   const [clickedOpenFilterId, setClickedOpenFilterId] = React__default.useState(null);
   const [clickedOpenFilters, setClickedOpenFilters] = React__default.useState([]);
   const [clickedFacets, setClickedFacets] = React__default.useState({
@@ -4478,11 +4500,11 @@ const ResultProduct = (props) => {
     } : {}
   });
   const [triggerClickedFacets, setTriggerClickedFacets] = React__default.useState(false);
-  const [searchResult, setSearchResult] = React__default.useState(((_d = (_c = (_b = propsData == null ? void 0 : propsData.result) == null ? void 0 : _b.results) == null ? void 0 : _c[0]) == null ? void 0 : _d.hits) || []);
+  const [searchResult, setSearchResult] = React__default.useState(((_c = (_b = (_a = propsData == null ? void 0 : propsData.result) == null ? void 0 : _a.results) == null ? void 0 : _b[0]) == null ? void 0 : _c.hits) || []);
   const [searchProcessingTimeMs, setSearchProcessingTimeMs] = React__default.useState(0);
   const [currentPage, setCurrentPage] = React__default.useState(1);
   const [totalPage, setTotalPage] = React__default.useState(0);
-  const [totalSearchResult, setTotalSearchResult] = React__default.useState(((_g = (_f = (_e = propsData == null ? void 0 : propsData.result) == null ? void 0 : _e.results) == null ? void 0 : _f[0]) == null ? void 0 : _g.totalHits) || 0);
+  const [totalSearchResult, setTotalSearchResult] = React__default.useState(((_f = (_e = (_d = propsData == null ? void 0 : propsData.result) == null ? void 0 : _d.results) == null ? void 0 : _e[0]) == null ? void 0 : _f.totalHits) || 0);
   const [valueFilterPriceChange, setValueFilterPriceChange] = React__default.useState([]);
   const [allowedFilter, setAllowedFilter] = React__default.useState([]);
   const [handleSearchResultFirstTime, setHandleSearchResultFirstTime] = React__default.useState(true);
@@ -4526,13 +4548,13 @@ const ResultProduct = (props) => {
   };
   const [summaryText, setSummaryText] = React__default.useState(propsData ? summaryTextGenerator(totalSearchResult) : null);
   const previousState = usePrevious({ keyword, clickedLimitId, clickedFacets, clickedTabIndexId });
-  const { color: filter_title_color, font_size: filter_title_font_size, font_weight: filter_title_font_weight, text_transform: filter_title_text_transform } = ((_h = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _h.title) || {};
+  const { color: filter_title_color, font_size: filter_title_font_size, font_weight: filter_title_font_weight, text_transform: filter_title_text_transform } = ((_g = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _g.title) || {};
   const {
     color: filter_option_color,
     font_size: filter_option_font_size,
     font_weight: filter_option_font_weight,
     text_transform: filter_option_text_transform
-  } = ((_i = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _i.option) || {};
+  } = ((_h = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _h.option) || {};
   const {
     text_color: filter_button_text_color,
     border_color: filter_button_border_color,
@@ -4545,7 +4567,7 @@ const ResultProduct = (props) => {
     font_size: filter_button_font_size,
     font_weight: filter_button_font_weight,
     text_transform: filter_button_text_transform
-  } = ((_j = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _j.button) || {};
+  } = ((_i = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _i.button) || {};
   const filter_title_style = {
     ...filter_title_color && { color: filter_title_color },
     ...filter_title_font_size && { fontSize: filter_title_font_size },
@@ -4607,11 +4629,12 @@ const ResultProduct = (props) => {
     }).toString();
     window.history.pushState(null, "", `${document.location.pathname}${(newQueryString == null ? void 0 : newQueryString.length) ? `?${newQueryString}` : ""}`);
   };
-  const handleChangeSort = (label, value) => {
+  const handleChangeSort = (value) => {
     setClickedSortId(value);
   };
   const handleChangeLimit = (value) => {
-    setClickedLimitId(value);
+    setClickedLimitId(Number(value));
+    localStorage == null ? void 0 : localStorage.setItem(LOCAL_STORAGE_KEY.LIMIT_PRODUCT, value);
   };
   const handleOpenFilterVertical = (id) => {
     setClickedOpenFilterId(id === clickedOpenFilterId ? "" : id);
@@ -4802,12 +4825,6 @@ const ResultProduct = (props) => {
       });
     }, 200);
   };
-  const handleChangeKeyword = (value) => {
-    const searchParams = new URLSearchParams(document.location.search);
-    searchParams.set(queryKeyword, value);
-    setKeyword && setKeyword(value);
-    window.history.pushState(null, "", `${document.location.pathname}?${searchParams.toString()}`);
-  };
   React__default.useEffect(() => {
     let isRefreshSearchResult = Boolean(
       previousState && ((previousState == null ? void 0 : previousState.keyword) !== keyword || (previousState == null ? void 0 : previousState.clickedLimitId) !== clickedLimitId || (previousState == null ? void 0 : previousState.clickedFacets) !== clickedFacets)
@@ -5155,9 +5172,9 @@ const ResultProduct = (props) => {
     ) }, indexFilter) : null;
   });
   const paginationComponent = /* @__PURE__ */ jsxRuntimeExports.jsx(Pagination, { currentPage, totalPage, totalResult: totalSearchResult, onChange: (page) => handlePageChange(page), pageInfo: language_pagination_info });
-  const filterHorizontalBlockComponent = ((_k = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _k.enable_on_search) && allowedFilter.length ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isFirstLoading && !propsData ? filterHorizontalSkeleton : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isLoadingSetting && !propsData ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-horizontal-loading", children: filterHorizontalSkeleton }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-horizontal-wrapper", children: [
+  const filterHorizontalBlockComponent = ((_j = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _j.enable_on_search) && allowedFilter.length ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isFirstLoading && !propsData ? filterHorizontalSkeleton : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isLoadingSetting && !propsData ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-horizontal-loading", children: filterHorizontalSkeleton }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-horizontal-wrapper", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-horizontal sledge-instant-search__result-filter-horizontal-component", children: filterHorizontalComponents }),
-    Boolean((dataClickedFacets == null ? void 0 : dataClickedFacets.length) && ((_l = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _l.show_refine_by_block)) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-horizontal", children: [
+    Boolean((dataClickedFacets == null ? void 0 : dataClickedFacets.length) && ((_k = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _k.show_refine_by_block)) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-horizontal", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "div",
         {
@@ -5178,10 +5195,10 @@ const ResultProduct = (props) => {
     ] }) : null
   ] }) }) }) : null;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    ((_m = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _m.enable_on_search) && ((_n = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _n.layout) === "horizontal" && allowedFilter.length ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__hide-element-lg-on-mobile", children: filterHorizontalBlockComponent }) : null,
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-wrapper", "data-filter-layout": (_o = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _o.layout, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: ((_p = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _p.enable_on_search) && ((_q = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _q.layout) === "vertical" && allowedFilter.length ? isFirstLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter sledge__hide-element-lg-on-mobile", children: filterVerticalSkeleton }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter sledge__hide-element-lg-on-mobile", children: isLoadingSetting ? filterVerticalSkeleton : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        Boolean((dataClickedFacets == null ? void 0 : dataClickedFacets.length) && ((_r = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _r.show_refine_by_block)) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item", children: [
+    ((_l = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _l.enable_on_search) && ((_m = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _m.layout) === "horizontal" && allowedFilter.length ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__hide-element-lg-on-mobile", children: filterHorizontalBlockComponent }) : null,
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-wrapper", "data-filter-layout": (_n = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _n.layout, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: ((_o = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _o.enable_on_search) && ((_p = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _p.layout) === "vertical" && allowedFilter.length ? isFirstLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter sledge__hide-element-lg-on-mobile", children: filterVerticalSkeleton }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter sledge__hide-element-lg-on-mobile", children: isLoadingSetting ? filterVerticalSkeleton : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        Boolean((dataClickedFacets == null ? void 0 : dataClickedFacets.length) && ((_q = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _q.show_refine_by_block)) ? /* @__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: language_filter || "Filter" }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-instant-search__result-filter-item-title-refine-clear", onClick: handleFilterReset, children: language_clear_filter || "Clear All" })
@@ -5201,7 +5218,7 @@ const ResultProduct = (props) => {
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-data", children: [
         isFirstLoading ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__hide-element-mobile-on-lg", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-data-keyword", children: [
-            ((_s = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _s.show_total_products) ? summaryTextSkeleton : null,
+            ((_r = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _r.show_total_products) ? summaryTextSkeleton : null,
             searchFieldSkeletonComponent,
             filterHorizontalSkeletonComponent,
             selectOptionSkeletonComponent
@@ -5211,7 +5228,7 @@ const ResultProduct = (props) => {
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "div",
             {
-              className: `sledge-instant-search__result-data-summary sledge-instant-search__result-data-summary-filter-horizontal ${((_t = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _t.layout) === "horizontal" ? "" : "sledge__hide-element-mobile-on-lg"}`,
+              className: `sledge-instant-search__result-data-summary sledge-instant-search__result-data-summary-filter-horizontal ${((_s = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _s.layout) === "horizontal" ? "" : "sledge__hide-element-mobile-on-lg"}`,
               children: summaryText
             }
           ),
@@ -5222,8 +5239,8 @@ const ResultProduct = (props) => {
               icon: /* @__PURE__ */ jsxRuntimeExports.jsx(SearchIcon, { width: 18, height: 18, color: "#868686" }),
               placeholder: (language_search_form_placeholder == null ? void 0 : language_search_form_placeholder.product) || "Search products...",
               value: keyword,
-              onChange: ({ value }) => handleChangeKeyword(value),
-              onResetField: () => handleChangeKeyword(""),
+              onChange: ({ value }) => handleChangeKeyword == null ? void 0 : handleChangeKeyword(value),
+              onResetField: () => handleChangeKeyword == null ? void 0 : handleChangeKeyword(""),
               className: "sledge-instant-search__result-data-keyword-form",
               withClearField: true
             }
@@ -5253,8 +5270,8 @@ const ResultProduct = (props) => {
                       value
                     };
                   }),
-                  value: clickedSortId || (settings == null ? void 0 : settings.default_sort),
-                  onChange: ({ label, value }) => handleChangeSort(label, value)
+                  value: clickedSortId,
+                  onChange: ({ value }) => handleChangeSort(value)
                 }
               )
             ] }),
@@ -5263,7 +5280,7 @@ const ResultProduct = (props) => {
                 language_limit || "Limit",
                 ":"
               ] }),
-              ((_u = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _u.allowed_limit) && Boolean((_w = (_v = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _v.allowed_limit) == null ? void 0 : _w.length) && /* @__PURE__ */ jsxRuntimeExports.jsx(
+              ((_t = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _t.allowed_limit) && Boolean((_v = (_u = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _u.allowed_limit) == null ? void 0 : _v.length) && /* @__PURE__ */ jsxRuntimeExports.jsx(
                 SelectField,
                 {
                   align: "end",
@@ -5284,7 +5301,7 @@ const ResultProduct = (props) => {
           productGridSkeleton,
           (searchResult == null ? void 0 : searchResult.length) ? paginationComponent : null
         ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-          ((_x = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _x.layout) === "vertical" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__hide-element-lg-on-mobile", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-summary sledge-instant-search__result-data-summary-filter-vertical", children: summaryText }) }),
+          ((_w = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _w.layout) === "vertical" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__hide-element-lg-on-mobile", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-summary sledge-instant-search__result-data-summary-filter-vertical", children: summaryText }) }),
           (searchResult == null ? void 0 : searchResult.length) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               ProductGrid,
@@ -5299,9 +5316,9 @@ const ResultProduct = (props) => {
                   };
                 }),
                 setting: {
-                  show_vendor: (_y = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _y.show_vendor,
-                  show_sku: (_z = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _z.show_sku,
-                  show_price: (_A = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _A.show_price,
+                  show_vendor: (_x = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _x.show_vendor,
+                  show_sku: (_y = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _y.show_sku,
+                  show_price: (_z = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _z.show_price,
                   language_button_add_to_cart: language_add_to_cart,
                   language_button_out_of_stock: languageSettings && languageSettings["out of stock"] ? languageSettings["out of stock"] : ""
                 },
@@ -5335,7 +5352,6 @@ const ResultCategory = (props) => {
     pageCardsComponent,
     blogCardsComponent,
     articleCardsComponent,
-    setKeyword,
     searchResultContainerRef,
     onAfterRenderCollection,
     onAfterRenderPage,
@@ -5343,11 +5359,11 @@ const ResultCategory = (props) => {
     onAfterRenderArticle,
     languageSettings,
     isReplaceWidgetList,
-    setIsReplaceWidgetList
+    setIsReplaceWidgetList,
+    handleChangeKeyword
   } = props || {};
   const [isFirstLoading, setIsFirstLoading] = React__default.useState(true);
   const [isLoading, setIsLoading] = React__default.useState(true);
-  const [clickedSortId, setClickedSortId] = React__default.useState("");
   const [searchResult, setSearchResult] = React__default.useState([]);
   const [searchProcessingTimeMs, setSearchProcessingTimeMs] = React__default.useState(0);
   const [currentPage, setCurrentPage] = React__default.useState(1);
@@ -5405,7 +5421,7 @@ const ResultCategory = (props) => {
     let response;
     let body = {
       q: keyword,
-      sort: clickedSortId ? [clickedSortId] : [],
+      sort: [],
       page: isRefreshPage ? 1 : currentPage,
       hitsPerPage: 12
     };
@@ -5431,7 +5447,7 @@ const ResultCategory = (props) => {
     } else {
       handleSearchResult();
     }
-  }, [clickedSortId, keyword]);
+  }, [keyword]);
   React__default.useEffect(() => {
     let isRefreshSearchResult = Boolean(previousState && (previousState == null ? void 0 : previousState.clickedTabIndexId) !== clickedTabIndexId);
     if (isReplaceWidgetList || isRefreshSearchResult) {
@@ -5445,8 +5461,8 @@ const ResultCategory = (props) => {
       icon: /* @__PURE__ */ jsxRuntimeExports.jsx(SearchIcon, { width: 18, height: 18, color: "#868686" }),
       placeholder: clickedTabIndexType && language_search_form_placeholder[clickedTabIndexType] ? language_search_form_placeholder[clickedTabIndexType] : `Search ${clickedTabIndexName ? clickedTabIndexName.toLowerCase() : ""}...`,
       value: keyword,
-      onChange: ({ value }) => setKeyword && setKeyword(value),
-      onResetField: () => setKeyword && setKeyword(""),
+      onChange: ({ value }) => handleChangeKeyword == null ? void 0 : handleChangeKeyword(value),
+      onResetField: () => handleChangeKeyword == null ? void 0 : handleChangeKeyword(""),
       className: "sledge-instant-search__result-data-keyword-form",
       withClearField: true
     }