@sledge-app/react-instant-search 1.0.37 → 1.0.39

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

@@ -504,27 +504,20 @@ const Checkbox = ({ id, name, value, required, label, checked, labelStyle = {},
 };
 const Slider$1 = "";
 const Slider = (props) => {
-  const { defaultValue, min, max, step = 1, setValueCommit, setValueChange } = props;
-  const [value, setValue] = React__default.useState(defaultValue);
+  const { value, min, max, step = 1, setValueCommit, setValueChange } = props;
   return /* @__PURE__ */ jsxRuntimeExports.jsx("form", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
     $faa2e61a3361514f$export$be92b6f5f03c0fe9,
     {
       className: "sledge__SliderRoot",
-      defaultValue,
+      value,
       ...typeof min !== "undefined" ? {
         min
       } : {},
       max,
       step,
       "aria-label": "Volume",
-      onValueCommit: (valueCommit) => {
-        setValueCommit && setValueCommit(valueCommit);
-        setValue(valueCommit);
-      },
-      onValueChange: (valueChange) => {
-        setValueChange && setValueChange(valueChange);
-        setValue(valueChange);
-      },
+      onValueCommit: (valueCommit) => setValueCommit == null ? void 0 : setValueCommit(valueCommit),
+      onValueChange: (valueChange) => setValueChange == null ? void 0 : setValueChange(valueChange),
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx($faa2e61a3361514f$export$13921ac0cc260818, { className: "sledge__SliderTrack", children: /* @__PURE__ */ jsxRuntimeExports.jsx($faa2e61a3361514f$export$9a58ef0d7ad3278c, { className: "sledge__SliderRange" }) }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -536,7 +529,7 @@ const Slider = (props) => {
             children: /* @__PURE__ */ jsxRuntimeExports.jsx($faa2e61a3361514f$export$6521433ed15a34db, { className: "sledge__SliderThumb" })
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
+        !value[1] ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
           Tooltip,
           {
             content: value[1],
@@ -1043,7 +1036,7 @@ const checkWishlist = async (id, variantId) => {
     return;
   });
 };
-const addToCartTrigger$1 = async (data) => {
+const addToCartTrigger$2 = async (data) => {
   const { productId } = data;
   let sledgeAuthApp = typeof localStorage !== "undefined" ? localStorage.getItem(LOCAL_STORAGE_KEY.AUTH_APP) || "" : "";
   let url = `${API_URL}/wishlist/cart`;
@@ -2341,7 +2334,7 @@ const searchTrigger = async (data) => {
     return;
   });
 };
-const productClickTrigger = async (data) => {
+const productClickTrigger$1 = async (data) => {
   const { productId } = data;
   let sledgeAuthApp = typeof localStorage !== "undefined" ? localStorage.getItem(LOCAL_STORAGE_KEY.AUTH_APP) || "" : "";
   let url = `${API_URL}/instantsearch/statistics/click`;
@@ -2366,7 +2359,7 @@ const productClickTrigger = async (data) => {
     return;
   });
 };
-const addToCartTrigger = async (data) => {
+const addToCartTrigger$1 = async (data) => {
   const { productId } = data;
   let sledgeAuthApp = typeof localStorage !== "undefined" ? localStorage.getItem(LOCAL_STORAGE_KEY.AUTH_APP) || "" : "";
   let url = `${API_URL}/instantsearch/statistics/cart`;
@@ -2391,6 +2384,55 @@ const addToCartTrigger = async (data) => {
     return;
   });
 };
+const productRecommendationSourceApps = ["recently-viewed", "related-product", "hand-picked", "new-arrival", "personalized-curated"];
+const productClickTrigger = async (data) => {
+  const { productId, sourceApp } = data;
+  let sledgeAuthApp = typeof localStorage !== "undefined" ? localStorage.getItem(LOCAL_STORAGE_KEY.AUTH_APP) || "" : "";
+  let url = `${API_URL}/product-recommendation/statistics/click`;
+  let headers = {
+    "Content-Type": "application/json"
+  };
+  let payload = {
+    product_id: sanitizeDataId(productId),
+    widget: sourceApp
+  };
+  return await fetchApi({
+    url,
+    method: "POST",
+    authorization: sledgeAuthApp,
+    payload,
+    headers,
+    isSimpleRequest: false
+  }).then((result) => {
+    return result;
+  }).catch(() => {
+    return;
+  });
+};
+const addToCartTrigger = async (data) => {
+  const { productId, sourceApp } = data;
+  let sledgeAuthApp = typeof localStorage !== "undefined" ? localStorage.getItem(LOCAL_STORAGE_KEY.AUTH_APP) || "" : "";
+  let url = `${API_URL}/product-recommendation/statistics/cart`;
+  let headers = {
+    "Content-Type": "application/json"
+  };
+  let payload = {
+    product_id: sanitizeDataId(productId),
+    widget: sourceApp
+  };
+  return await fetchApi({
+    url,
+    method: "POST",
+    authorization: sledgeAuthApp,
+    payload,
+    headers,
+    isSimpleRequest: false
+  }).then((result) => {
+    return result;
+  }).catch(() => {
+    return;
+  });
+};
 const ProductCard = (props) => {
   var _a, _b, _c;
   const {
@@ -2536,9 +2578,18 @@ const ProductCard = (props) => {
             "a",
             {
               href: url,
-              onClick: () => sourceApp === "instant-search" && productClickTrigger({
-                productId: id
-              }),
+              onClick: () => {
+                if (sourceApp === "instant-search") {
+                  productClickTrigger$1({
+                    productId: id
+                  });
+                } else if (productRecommendationSourceApps.includes(sourceApp)) {
+                  productClickTrigger({
+                    productId: id,
+                    sourceApp
+                  });
+                }
+              },
               className: "sledge__product-grid-card-image-link",
               children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -2562,7 +2613,21 @@ const ProductCard = (props) => {
                     wishlistChecked: dataWishlists == null ? void 0 : dataWishlists[id]
                   }
                 ),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: (image == null ? void 0 : image.src) || `${CDN_URL}/images/blank-image.png`, alt: "sledge-card-image", loading: "lazy", className: "sledge__product-grid-card-image-featured-image" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "img",
+                  {
+                    src: (image == null ? void 0 : image.src) || `${CDN_URL}/images/blank-image.png`,
+                    alt: "sledge-card-image",
+                    loading: "lazy",
+                    className: "sledge__product-grid-card-image-featured-image",
+                    onError: ({ currentTarget }) => {
+                      if (!currentTarget)
+                        return;
+                      currentTarget.onerror = null;
+                      currentTarget.src = `${CDN_URL}/images/blank-image.png`;
+                    }
+                  }
+                ),
                 /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-variant-images", children: images == null ? void 0 : images.map((image2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
                   "img",
                   {
@@ -2609,9 +2674,18 @@ const ProductCard = (props) => {
             "a",
             {
               href: url,
-              onClick: () => sourceApp === "instant-search" && productClickTrigger({
-                productId: id
-              }),
+              onClick: () => {
+                if (sourceApp === "instant-search") {
+                  productClickTrigger$1({
+                    productId: id
+                  });
+                } else if (productRecommendationSourceApps.includes(sourceApp)) {
+                  productClickTrigger({
+                    productId: id,
+                    sourceApp
+                  });
+                }
+              },
               children: /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "sledge__product-grid-card-product-name", style: display_product_name_style, children: title })
             }
           ) : null,
@@ -2716,13 +2790,18 @@ const ProductGrid = (props) => {
     ]);
     if ((_a = resShopifyAddToCart == null ? void 0 : resShopifyAddToCart.items) == null ? void 0 : _a.length) {
       if (sourceApp === "wishlist") {
-        await addToCartTrigger$1({
+        await addToCartTrigger$2({
           productId: id
         });
       } else if (sourceApp === "instant-search") {
-        await addToCartTrigger({
+        await addToCartTrigger$1({
           productId: id
         });
+      } else if (productRecommendationSourceApps.includes(sourceApp)) {
+        await addToCartTrigger({
+          productId: id,
+          sourceApp
+        });
       }
       setClickedAddToCartId(null);
       onAfterAddToCart && onAfterAddToCart("success");
@@ -3811,9 +3890,9 @@ const SearchResultWidget = (props) => {
   const [languageSettings, setLanguageSettings] = React__default.useState(((_j = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _j.languages) || {});
   const [initStatesFirstTime, setInitStatesFirstTime] = React__default.useState(true);
   const [defaultFacetStats, setDefaultFacetStats] = React__default.useState({});
-  const [defaultFacetDistribution, setDefaultFacetDistribution] = React__default.useState({});
   const [hideFilterWhenOneValue, setHideFilterWhenOneValue] = React__default.useState(false);
   const [isReplaceWidgetList, setIsReplaceWidgetList] = React__default.useState(false);
+  const [searchResultFacets, setSearchResultFacets] = React__default.useState({});
   let productCardsComponent = null;
   let collectionCardsComponent = null;
   let pageCardsComponent = null;
@@ -3914,8 +3993,32 @@ const SearchResultWidget = (props) => {
     } else {
       const { facetStats, totalHits, facetDistribution } = (results == null ? void 0 : results.find(({ indexUid }) => indexUid.includes(index_product))) || {};
       setDefaultFacetStats(facetStats);
-      setDefaultFacetDistribution(facetDistribution);
       setHideFilterWhenOneValue(((_a2 = display == null ? void 0 : display.filter) == null ? void 0 : _a2.hide_when_one_value) && totalHits <= 1);
+      setSearchResultFacets(
+        facetDistribution ? Object.fromEntries(
+          Object.entries(facetDistribution).map((facet) => {
+            let value = facet[0];
+            let items = [];
+            if (value === "variants.inventory_quantity") {
+              items = [
+                {
+                  name: "In Stock",
+                  value: "> 0"
+                }
+              ];
+            } else {
+              items = Object.keys(facetDistribution[value]).map((item) => {
+                return {
+                  name: item,
+                  value: item,
+                  total: facetDistribution[value][item] || 0
+                };
+              });
+            }
+            return [value, items];
+          })
+        ) : {}
+      );
     }
   };
   const handleSettings = async (LOCAL_STORAGE_INSTANT_SEARCH_SETTING) => {
@@ -4265,7 +4368,6 @@ const SearchResultWidget = (props) => {
       allowedFilters,
       facets,
       defaultFacetStats,
-      defaultFacetDistribution,
       hideFilterWhenOneValue,
       hiddenTags,
       displaySettings,
@@ -4303,12 +4405,13 @@ const SearchResultWidget = (props) => {
       data: propsData,
       settings,
       isReplaceWidgetList,
-      setIsReplaceWidgetList
+      setIsReplaceWidgetList,
+      searchResultFacets
     })
   ] });
 };
 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, _B;
+  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;
   const {
     layoutType,
     keyword,
@@ -4318,7 +4421,6 @@ const ResultProduct = (props) => {
     allowedFilters,
     facets,
     defaultFacetStats,
-    defaultFacetDistribution,
     hideFilterWhenOneValue,
     hiddenTags,
     displaySettings,
@@ -4347,17 +4449,15 @@ const ResultProduct = (props) => {
     data: propsData,
     settings,
     isReplaceWidgetList,
-    setIsReplaceWidgetList
+    setIsReplaceWidgetList,
+    searchResultFacets
   } = 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 [isOpenSort, setIsOpenSort] = React__default.useState(false);
-  const [isOpenLimit, setIsOpenLimit] = React__default.useState(false);
   const [clickedSortId, setClickedSortId] = React__default.useState(defaultSort || "");
-  const [clickedSortName, setClickedSortName] = React__default.useState(allowedSorts && Boolean(allowedSorts == null ? void 0 : allowedSorts.length) ? (_a = allowedSorts.find(({ value }) => value === defaultSort)) == null ? void 0 : _a.label : "");
-  const [clickedLimitId, setClickedLimitId] = React__default.useState(((_b = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _b.limit) || 10);
+  const [clickedLimitId, setClickedLimitId] = React__default.useState(((_a = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _a.limit) || 10);
   const [clickedOpenFilterId, setClickedOpenFilterId] = React__default.useState(null);
   const [clickedOpenFilters, setClickedOpenFilters] = React__default.useState([]);
   const [clickedFacets, setClickedFacets] = React__default.useState({
@@ -4366,16 +4466,15 @@ const ResultProduct = (props) => {
     } : {}
   });
   const [triggerClickedFacets, setTriggerClickedFacets] = React__default.useState(false);
-  const [searchResult, setSearchResult] = React__default.useState(((_e = (_d = (_c = propsData == null ? void 0 : propsData.result) == null ? void 0 : _c.results) == null ? void 0 : _d[0]) == null ? void 0 : _e.hits) || []);
+  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 [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(((_h = (_g = (_f = propsData == null ? void 0 : propsData.result) == null ? void 0 : _f.results) == null ? void 0 : _g[0]) == null ? void 0 : _h.totalHits) || 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 [valueFilterPriceChange, setValueFilterPriceChange] = React__default.useState([]);
   const [allowedFilter, setAllowedFilter] = React__default.useState([]);
-  const [isFilterChanged, setIsFilterChanged] = React__default.useState(false);
   const [handleSearchResultFirstTime, setHandleSearchResultFirstTime] = React__default.useState(true);
-  const [searchResultFacets, setSearchResultFacets] = React__default.useState({});
+  const [searchFacetDistribution, setSearchFacetDistribution] = React__default.useState({});
   const {
     sort_by: language_sort_by,
     result: language_result,
@@ -4414,13 +4513,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 } = ((_i = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _i.title) || {};
+  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_option_color,
     font_size: filter_option_font_size,
     font_weight: filter_option_font_weight,
     text_transform: filter_option_text_transform
-  } = ((_j = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _j.option) || {};
+  } = ((_i = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _i.option) || {};
   const {
     text_color: filter_button_text_color,
     border_color: filter_button_border_color,
@@ -4433,7 +4532,7 @@ const ResultProduct = (props) => {
     font_size: filter_button_font_size,
     font_weight: filter_button_font_weight,
     text_transform: filter_button_text_transform
-  } = ((_k = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _k.button) || {};
+  } = ((_j = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _j.button) || {};
   const filter_title_style = {
     ...filter_title_color && { color: filter_title_color },
     ...filter_title_font_size && { fontSize: filter_title_font_size },
@@ -4496,12 +4595,9 @@ const ResultProduct = (props) => {
     window.history.pushState(null, "", `${document.location.pathname}${(newQueryString == null ? void 0 : newQueryString.length) ? `?${newQueryString}` : ""}`);
   };
   const handleChangeSort = (label, value) => {
-    setIsOpenSort(false);
-    setClickedSortName(label);
     setClickedSortId(value);
   };
   const handleChangeLimit = (value) => {
-    setIsOpenLimit(false);
     setClickedLimitId(value);
   };
   const handleOpenFilterVertical = (id) => {
@@ -4517,18 +4613,13 @@ const ResultProduct = (props) => {
     setClickedOpenFilters(valueClickedOpenFilters);
   };
   const handleFilterReset = () => {
-    setIsFilterChanged(true);
     setClickedFacets({});
     setTriggerClickedFacets(!triggerClickedFacets);
     handleQueryStringFilter({});
     setValueFilterPriceChange([]);
-    setTimeout(() => {
-      setIsFilterChanged(false);
-    }, 10);
   };
   const handleFilterChange = (parentId, value, force = false) => {
     var _a2;
-    setIsFilterChanged(true);
     let facets2 = [value];
     let isRange = ["variants.price"].includes(parentId);
     if (clickedFacets) {
@@ -4560,9 +4651,6 @@ const ResultProduct = (props) => {
     handleQueryStringFilter(valueClickedFacets);
     setClickedFacets(valueClickedFacets);
     setTriggerClickedFacets(!triggerClickedFacets);
-    setTimeout(() => {
-      setIsFilterChanged(false);
-    }, 10);
   };
   const handleSearchResultData = (result, onSearch) => {
     if (!result)
@@ -4582,34 +4670,7 @@ const ResultProduct = (props) => {
     setTotalPage(totalPages);
     setTotalSearchResult(totalHits || 0);
     setSummaryText(summaryTextGenerator(totalHits));
-    setSearchResultFacets(
-      defaultFacetDistribution ? Object.fromEntries(
-        Object.entries(defaultFacetDistribution).map((facet) => {
-          let value = facet[0];
-          let items = [];
-          if (value === "variants.inventory_quantity") {
-            Object.keys(defaultFacetDistribution[value]).map((item) => {
-              return Boolean(Number(item)) ? defaultFacetDistribution[value][item] : 0;
-            });
-            items = [
-              {
-                name: "In Stock",
-                value: "> 0"
-              }
-            ];
-          } else {
-            items = Object.keys(defaultFacetDistribution[value]).map((item) => {
-              return {
-                name: item,
-                value: item,
-                total: facetDistribution[value][item] || 0
-              };
-            });
-          }
-          return [value, items];
-        })
-      ) : {}
-    );
+    setSearchFacetDistribution(facetDistribution);
   };
   const handleSearchResult = async (isRefreshPage = false, onSearch = false) => {
     var _a2, _b2;
@@ -4715,6 +4776,37 @@ const ResultProduct = (props) => {
   React__default.useEffect(() => {
     handleAllowedFilter();
   }, [allowedFilters, searchResultFacets, totalSearchResult]);
+  let dataClickedFacets = [];
+  let arrFacetSelected = [];
+  Object.entries(clickedFacets).map((facet) => {
+    var _a2, _b2;
+    if ((facet == null ? void 0 : facet.length) && facet[1].length) {
+      arrFacetSelected.push(facet[0]);
+      let getName = facet[0];
+      let isAdditionalFilter = ["variants.inventory_quantity"].includes(getName);
+      if (isAdditionalFilter)
+        return;
+      let isRange = ["variants.price"].includes(getName);
+      let getAllowedFilterOne = allowedFilter.filter(({ value }) => value == null ? void 0 : value.includes(getName));
+      let getLabel = (getAllowedFilterOne == null ? void 0 : getAllowedFilterOne.length) ? getAllowedFilterOne[0].label : getName;
+      let items = Array.isArray(facet[1]) && ((_a2 = facet[1]) == null ? void 0 : _a2.length) > 1 ? isRange ? dataClickedFacets.push({
+        label: getLabel,
+        name: getName,
+        value: facet[1]
+      }) : (_b2 = facet[1]) == null ? void 0 : _b2.map((item) => {
+        dataClickedFacets.push({
+          label: getLabel,
+          name: getName,
+          value: item
+        });
+      }) : dataClickedFacets.push({
+        label: getLabel,
+        name: getName,
+        value: facet[1][0]
+      });
+      return items;
+    }
+  });
   const facetBlockSelected = ({ label, name, value, index }) => {
     var _a2;
     let valueText = value;
@@ -4738,12 +4830,36 @@ const ResultProduct = (props) => {
       ) }) })
     ] }, index);
   };
+  const handleConditionNotUpdateFacetDistribution = (value) => {
+    let arrPriorityFacet = ["vendor"];
+    let isHasFacetSelected = arrFacetSelected == null ? void 0 : arrFacetSelected.length;
+    let isNoneFacetSelected = !isHasFacetSelected;
+    let isOnFacetSelectedOne = isHasFacetSelected && arrFacetSelected.includes(value) && isHasFacetSelected === 1;
+    let isSelectedFacetWithPrice = arrFacetSelected.includes("variants.price");
+    let isPriorityFacet = isHasFacetSelected && !isOnFacetSelectedOne && arrPriorityFacet.includes(value) && !isSelectedFacetWithPrice;
+    return isNoneFacetSelected || isOnFacetSelectedOne || isPriorityFacet;
+  };
   const facetComponent = (filter) => {
     var _a2, _b2;
     const { value, label, display } = filter;
+    if (isFirstLoading)
+      return null;
     let blockComponent = null;
     let items = searchResultFacets[value];
     let isShowNumberMatchingProduct = (_a2 = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _a2.show_number_matching_product;
+    let itemsComponent = [];
+    if (["checkbox", "radio", "select"].includes(display.toLowerCase()))
+      itemsComponent = items == null ? void 0 : items.map((item) => {
+        let labelName = item.name;
+        if (languageSettings && (languageSettings[item.value] || languageSettings[item.name]))
+          labelName = languageSettings[item.value] || languageSettings[item.name];
+        let counter = handleConditionNotUpdateFacetDistribution(value) ? (item == null ? void 0 : item.total) || 0 : searchFacetDistribution[value] && searchFacetDistribution[value][item.value] ? searchFacetDistribution[value][item.value] : 0;
+        return {
+          ...item,
+          labelName,
+          counter
+        };
+      });
     if (display.toLowerCase() === "slider") {
       items = defaultFacetStats[value] && Object.keys(defaultFacetStats[value]).length ? defaultFacetStats[value] : {};
       let defaultValueMin = valueFilterPriceChange[0] || (items == null ? void 0 : items.min);
@@ -4752,7 +4868,7 @@ const ResultProduct = (props) => {
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           Slider,
           {
-            defaultValue: defaultValueMin === defaultValueMax ? [defaultValueMax] : [defaultValueMin, defaultValueMax],
+            value: defaultValueMin === defaultValueMax ? [defaultValueMax] : [defaultValueMin, defaultValueMax],
             ...(items == null ? void 0 : items.min) === (items == null ? void 0 : items.max) ? {} : {
               min: items == null ? void 0 : items.min
             },
@@ -4763,25 +4879,23 @@ const ResultProduct = (props) => {
           }
         ),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item-list-slider-minmax", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-minmax-field", children: valueFilterPriceChange[0] || (items == null ? void 0 : items.min) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-minmax-field", children: valueFilterPriceChange[1] || (items == null ? void 0 : items.max) })
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-minmax-field", children: defaultValueMin }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-minmax-field", children: defaultValueMax })
         ] })
       ] });
     } else if (display.toLowerCase() === "checkbox" && (items == null ? void 0 : items.length)) {
-      blockComponent = /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: items == null ? void 0 : items.map((item, index) => {
+      blockComponent = /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: itemsComponent == null ? void 0 : itemsComponent.map((item, index) => {
         var _a3;
-        let labelName = item.name;
-        if (languageSettings && (languageSettings[item.value] || languageSettings[item.name]))
-          labelName = languageSettings[item.value] || languageSettings[item.name];
+        const { labelName, value: itemValue, counter } = item;
         return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           Checkbox,
           {
             id: `${value}_${index}`,
             name: value,
-            value: item.value,
-            label: `${labelName}${item.total !== void 0 && isShowNumberMatchingProduct ? ` (${item.total})` : ""}`,
+            value: itemValue,
+            label: `${labelName}${counter !== void 0 && isShowNumberMatchingProduct ? ` (${counter})` : ""}`,
             onClick: (e) => handleFilterChange(value, e.currentTarget.value),
-            checked: clickedFacets && ((_a3 = clickedFacets[value]) == null ? void 0 : _a3.includes(item.value)),
+            checked: Boolean(clickedFacets && ((_a3 = clickedFacets[value]) == null ? void 0 : _a3.includes(itemValue))),
             labelStyle: filter_option_style
           }
         ) }, index);
@@ -4794,12 +4908,9 @@ const ResultProduct = (props) => {
           name: value,
           onValueChange: (getValue) => handleFilterChange(value, getValue, true),
           items: items == null ? void 0 : items.map((item) => {
-            const { name, value: value2, total } = item;
-            let labelName = name;
-            if (languageSettings && (languageSettings[value2] || languageSettings[name]))
-              labelName = languageSettings[value2] || languageSettings[name];
+            const { labelName, value: value2, counter } = item;
             return {
-              label: `${labelName} ${total !== void 0 && isShowNumberMatchingProduct ? ` (${total})` : ""}`,
+              label: `${labelName} ${counter !== void 0 && isShowNumberMatchingProduct ? ` (${counter})` : ""}`,
               value: value2
             };
           }),
@@ -4815,12 +4926,9 @@ const ResultProduct = (props) => {
           name: value,
           onValueChange: (getValue) => handleFilterChange(value, getValue, true),
           items: items == null ? void 0 : items.map((item) => {
-            const { name, value: value2, total } = item;
-            let labelName = name;
-            if (languageSettings && (languageSettings[value2] || languageSettings[name]))
-              labelName = languageSettings[value2] || languageSettings[name];
+            const { labelName, value: value2, counter } = item;
             return {
-              label: `${labelName} ${total !== void 0 && isShowNumberMatchingProduct ? ` (${total})` : ""}`,
+              label: `${labelName} ${counter !== void 0 && isShowNumberMatchingProduct ? ` (${counter})` : ""}`,
               value: value2
             };
           }),
@@ -4840,7 +4948,7 @@ const ResultProduct = (props) => {
             rgb: getColorSwatch == null ? void 0 : getColorSwatch.rgb,
             image: getColorSwatch == null ? void 0 : getColorSwatch.image,
             onClick: (e) => handleFilterChange(value, e.currentTarget.value),
-            defaultChecked: clickedFacets && ((_a3 = clickedFacets[value]) == null ? void 0 : _a3.includes(item.value))
+            defaultChecked: Boolean(clickedFacets && ((_a3 = clickedFacets[value]) == null ? void 0 : _a3.includes(item.value)))
           }
         ) }, index);
       }) });
@@ -4851,7 +4959,6 @@ const ResultProduct = (props) => {
     const { value, label, display } = filter;
     let items = searchResultFacets[value];
     let isRender = Boolean(display.toLowerCase() === "slider" ? items : items == null ? void 0 : items.length);
-    let isNotRerender = ["select"].includes(display.toLowerCase()) && (items == null ? void 0 : items.length);
     let classesUlElement = ["sledge-instant-search__result-filter-item-list"];
     let getFacetComponent = facetComponent(filter);
     if (display.toLowerCase() === "swatch" && (items == null ? void 0 : items.length)) {
@@ -4862,7 +4969,7 @@ const ResultProduct = (props) => {
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-instant-search__result-filter-title", style: filter_title_style, children: label }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(motion.div, { initial: false, animate: clickedOpenFilters.includes(value) ? "open" : "closed", variants: ROTATE_FILTER_ARROW_ANIMATION, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronArrowDownIcon, { width: 15, height: 15, color: "#000000" }) })
       ] }),
-      clickedOpenFilters.includes(value) && /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: classesUlElement.join(" "), children: isNotRerender ? getFacetComponent : !isFilterChanged ? getFacetComponent : null })
+      clickedOpenFilters.includes(value) && /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: classesUlElement.join(" "), children: getFacetComponent })
     ] }, indexFilter) : null;
   });
   const filterHorizontalComponents = allowedFilter.map((filter, indexFilter) => {
@@ -4870,7 +4977,6 @@ const ResultProduct = (props) => {
     let isActive = clickedOpenFilterId === value;
     let items = searchResultFacets[value];
     let isRender = Boolean(display.toLowerCase() === "slider" ? items : items == null ? void 0 : items.length);
-    let isNotRerender = ["radio", "select"].includes(display.toLowerCase()) && (items == null ? void 0 : items.length);
     let classesUlElement = ["sledge-instant-search__result-filter-item-list"];
     let getFacetComponent = facetComponent(filter);
     if (display.toLowerCase() === "swatch" && (items == null ? void 0 : items.length)) {
@@ -4892,7 +4998,7 @@ const ResultProduct = (props) => {
             ]
           }
         ),
-        content: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-horizontal-facet", children: isActive && /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: classesUlElement.join(" "), children: isNotRerender ? getFacetComponent : !isFilterChanged ? getFacetComponent : null }) }),
+        content: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-horizontal-facet", children: isActive && /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: classesUlElement.join(" "), children: getFacetComponent }) }),
         withOpenState: false,
         setIsOpen: (open) => setClickedOpenFilterId(!open ? "" : value),
         hideCloseIcon: true,
@@ -4902,39 +5008,10 @@ const ResultProduct = (props) => {
       }
     ) }, indexFilter) : null;
   });
-  let dataClickedFacets = [];
-  Object.entries(clickedFacets).map((facet) => {
-    var _a2, _b2;
-    if ((facet == null ? void 0 : facet.length) && facet[1].length) {
-      let getName = facet[0];
-      let isAdditionalFilter = ["variants.inventory_quantity"].includes(getName);
-      if (isAdditionalFilter)
-        return;
-      let isRange = ["variants.price"].includes(getName);
-      let getAllowedFilterOne = allowedFilter.filter(({ value }) => value == null ? void 0 : value.includes(getName));
-      let getLabel = (getAllowedFilterOne == null ? void 0 : getAllowedFilterOne.length) ? getAllowedFilterOne[0].label : getName;
-      let items = Array.isArray(facet[1]) && ((_a2 = facet[1]) == null ? void 0 : _a2.length) > 1 ? isRange ? dataClickedFacets.push({
-        label: getLabel,
-        name: getName,
-        value: facet[1]
-      }) : (_b2 = facet[1]) == null ? void 0 : _b2.map((item) => {
-        dataClickedFacets.push({
-          label: getLabel,
-          name: getName,
-          value: item
-        });
-      }) : dataClickedFacets.push({
-        label: getLabel,
-        name: getName,
-        value: facet[1][0]
-      });
-      return items;
-    }
-  });
   const paginationComponent = /* @__PURE__ */ jsxRuntimeExports.jsx(Pagination, { currentPage, totalPage, totalResult: totalSearchResult, onChange: (page) => handlePageChange(page), pageInfo: language_pagination_info });
-  const filterHorizontalBlockComponent = ((_l = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _l.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 = ((_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: [
     /* @__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) && ((_m = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _m.show_refine_by_block)) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-horizontal", children: [
+    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: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "div",
         {
@@ -4955,10 +5032,10 @@ const ResultProduct = (props) => {
     ] }) : null
   ] }) }) }) : null;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    ((_n = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _n.enable_on_search) && ((_o = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _o.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": (_p = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _p.layout, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: ((_q = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _q.enable_on_search) && ((_r = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _r.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) && ((_s = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _s.show_refine_by_block)) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item", 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: [
           /* @__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" })
@@ -4978,7 +5055,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: [
-            ((_t = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _t.show_total_products) ? summaryTextSkeleton : null,
+            ((_s = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _s.show_total_products) ? summaryTextSkeleton : null,
             searchFieldSkeletonComponent,
             filterHorizontalSkeletonComponent,
             selectOptionSkeletonComponent
@@ -4988,7 +5065,7 @@ const ResultProduct = (props) => {
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "div",
             {
-              className: `sledge-instant-search__result-data-summary sledge-instant-search__result-data-summary-filter-horizontal ${((_u = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _u.layout) === "horizontal" ? "" : "sledge__hide-element-mobile-on-lg"}`,
+              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"}`,
               children: summaryText
             }
           ),
@@ -5040,7 +5117,7 @@ const ResultProduct = (props) => {
                 language_limit || "Limit",
                 ":"
               ] }),
-              ((_v = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _v.allowed_limit) && Boolean((_x = (_w = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _w.allowed_limit) == null ? void 0 : _x.length) && /* @__PURE__ */ jsxRuntimeExports.jsx(
+              ((_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(
                 SelectField,
                 {
                   align: "end",
@@ -5061,7 +5138,7 @@ const ResultProduct = (props) => {
           productGridSkeleton,
           (searchResult == null ? void 0 : searchResult.length) ? paginationComponent : null
         ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-          ((_y = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _y.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 }) }),
+          ((_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 }) }),
           (searchResult == null ? void 0 : searchResult.length) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               ProductGrid,
@@ -5076,9 +5153,9 @@ const ResultProduct = (props) => {
                   };
                 }),
                 setting: {
-                  show_vendor: (_z = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _z.show_vendor,
-                  show_sku: (_A = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _A.show_sku,
-                  show_price: (_B = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _B.show_price,
+                  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,
                   language_button_add_to_cart: language_add_to_cart,
                   language_button_out_of_stock: languageSettings && languageSettings["out of stock"] ? languageSettings["out of stock"] : ""
                 },