@sledge-app/react-instant-search 1.0.80 → 1.0.81

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

@@ -4397,7 +4397,7 @@ const createQueryFilter = ({ facets, facetsQueryStringObject, callback, addition
     if (!((detectClickedFacet == null ? void 0 : detectClickedFacet.length) && detectClickedFacet[1].length))
       continue;
     let isCustom = ["variants.inventory_quantity"].includes(detectClickedFacet[0]);
-    let isRange = ["variants.price"].includes(detectClickedFacet[0]);
+    let isRange = ["variants.price", "variants.sale_percent"].includes(detectClickedFacet[0]);
     let isHierarchical = hierarchicalFacetAliases.includes(detectClickedFacet[0]);
     if (isHierarchical) {
       let arrItemHierarchicals = [];
@@ -4511,7 +4511,7 @@ const handleConditionNotUpdateFacetDistribution = ({ value, clickedFacets }) =>
   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 isSelectedFacetWithPrice = arrFacetSelected.includes("variants.price") || arrFacetSelected.includes("variants.sale_percent");
   let isPriorityFacet = isHasFacetSelected && !isOnFacetSelectedOne && arrPriorityFacet.includes(value) && !isSelectedFacetWithPrice;
   return isNoneFacetSelected || isOnFacetSelectedOne || isPriorityFacet;
 };
@@ -4528,6 +4528,8 @@ const FacetComponent = (props) => {
     defaultFacetStats,
     valueFilterPriceChange,
     setValueFilterPriceChange,
+    valueFilterOnSaleChange,
+    setValueFilterOnSaleChange,
     separatedFilterItem,
     setSeparatedFilterItem,
     settings,
@@ -4556,34 +4558,46 @@ const FacetComponent = (props) => {
     ...filter_option_font_weight && { fontWeight: filter_option_font_weight },
     ...filter_option_text_transform && { textTransform: filter_option_text_transform }
   };
-  let { value, label, display, items } = filter;
+  let { value, label, display, indexFilter, items, settings: filterSettings } = filter;
+  const { prefix, filter_list, delete_prefix, selected_filter } = filterSettings || {};
   if (isFirstLoading)
     return null;
   let blockComponent = null;
   const isShowNumberMatchingProduct = (_b = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _b.show_number_matching_product;
   const isHideFacetWhenZeroValue = (_c = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _c.hide_when_zero_value;
   const isDisplaySlider = display.toLowerCase() === "slider";
+  const getValue = `${value}-${indexFilter}`;
   const handleFacetValues = (items2) => {
     var _a2;
     let facetValues = [];
     if (!(items2 == null ? void 0 : items2.length))
       return facetValues;
     for (const item of items2) {
-      if (!item)
+      const isManualFilter = item && filter_list === "manual" && !(selected_filter == null ? void 0 : selected_filter.includes(item == null ? void 0 : item.value));
+      const isPrefixFilter = item && filter_list === "prefix" && !(prefix == null ? void 0 : prefix.find((prefixItem) => {
+        var _a3;
+        return (_a3 = item == null ? void 0 : item.value) == null ? void 0 : _a3.startsWith(prefixItem);
+      }));
+      if (!item || isManualFilter || isPrefixFilter)
         continue;
       const isFacetHierarchical = Object.hasOwn(item, "children");
       let labelName = item.name;
-      let getValue = isFacetHierarchical ? `${value}.lvl${item.level}` : value;
+      let getValue2 = isFacetHierarchical ? `${value}.lvl${item.level}` : value;
       if (languageSettings && (languageSettings[item.value] || languageSettings[item.name]))
         labelName = languageSettings[item.value] || languageSettings[item.name];
       let counter = handleConditionNotUpdateFacetDistribution({
-        value: getValue,
+        value: getValue2,
         clickedFacets
-      }) ? (item == null ? void 0 : item.total) || 0 : (searchFacetDistribution == null ? void 0 : searchFacetDistribution[getValue]) && ((_a2 = searchFacetDistribution == null ? void 0 : searchFacetDistribution[getValue]) == null ? void 0 : _a2[item.value]) ? searchFacetDistribution[getValue][item.value] : 0;
+      }) ? (item == null ? void 0 : item.total) || 0 : (searchFacetDistribution == null ? void 0 : searchFacetDistribution[getValue2]) && ((_a2 = searchFacetDistribution == null ? void 0 : searchFacetDistribution[getValue2]) == null ? void 0 : _a2[item.value]) ? searchFacetDistribution[getValue2][item.value] : 0;
+      let getLabelName = aliases[labelName] || labelName;
+      delete_prefix == null ? void 0 : delete_prefix.map((deletePrefix) => {
+        if (String(getLabelName).startsWith(deletePrefix))
+          getLabelName = String(getLabelName).replace(deletePrefix, "");
+      });
       if (!(isHideFacetWhenZeroValue && !counter))
         facetValues.push({
           ...item,
-          labelName: aliases[labelName] || labelName,
+          labelName: getLabelName,
           counter
         });
     }
@@ -4597,7 +4611,7 @@ const FacetComponent = (props) => {
         currentItems: arrFacetValues
       };
     }
-    const lastItemLimit = separatedFilterItem[value] || Number(item_pagination_limit);
+    const lastItemLimit = separatedFilterItem[getValue] || Number(item_pagination_limit);
     let haveNextPage2 = Boolean(lastItemLimit < (arrFacetValues == null ? void 0 : arrFacetValues.length));
     let sliced = arrFacetValues;
     if (haveNextPage2)
@@ -4618,7 +4632,7 @@ const FacetComponent = (props) => {
       onClick: () => setSeparatedFilterItem == null ? void 0 : setSeparatedFilterItem((old) => {
         const fixState = {
           ...old,
-          [value]: (old[value] || Number(item_pagination_limit)) + Number(item_pagination_limit)
+          [getValue]: (old[getValue] || Number(item_pagination_limit)) + Number(item_pagination_limit)
         };
         return fixState;
       }),
@@ -4647,7 +4661,7 @@ const FacetComponent = (props) => {
       const content = /* @__PURE__ */ jsxRuntimeExports.jsx(
         Checkbox,
         {
-          id: `${value}_${index}${isFacetHierarchical ? `_${stringToSlug(itemValue)}` : ""}`,
+          id: `${getValue}_${index}${isFacetHierarchical ? `_${stringToSlug(itemValue)}` : ""}`,
           name: value,
           value: itemValue,
           label: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
@@ -4690,12 +4704,18 @@ const FacetComponent = (props) => {
     });
   };
   let scrollElement = document.querySelector(
-    scrollElementSelector || `#filter-${layoutType}-${collectionId || "all"}-standard-${stringToSlug(value)} .sledge-instant-search__result-filter-item-list`
+    scrollElementSelector || `#filter-${indexFilter}-${layoutType}-${collectionId || "all"}-standard-${stringToSlug(value)} .sledge-instant-search__result-filter-item-list`
   );
   if (isDisplaySlider) {
     items = (defaultFacetStats == null ? void 0 : defaultFacetStats[value]) && Object.keys(defaultFacetStats[value]).length ? defaultFacetStats[value] : {};
-    let defaultValueMin = valueFilterPriceChange[0] || (items == null ? void 0 : items.min);
-    let defaultValueMax = valueFilterPriceChange[1] || (items == null ? void 0 : items.max);
+    let valueFilterSliderChange = [];
+    if (value === "variants.price") {
+      valueFilterSliderChange = valueFilterPriceChange;
+    } else if (value === "variants.sale_percent") {
+      valueFilterSliderChange = valueFilterOnSaleChange;
+    }
+    let defaultValueMin = (valueFilterSliderChange == null ? void 0 : valueFilterSliderChange[0]) || (items == null ? void 0 : items.min);
+    let defaultValueMax = (valueFilterSliderChange == null ? void 0 : valueFilterSliderChange[1]) || (items == null ? void 0 : items.max);
     blockComponent = /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item-list-slider", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         Slider,
@@ -4710,7 +4730,13 @@ const FacetComponent = (props) => {
             parentId: value,
             value: valueCommit
           }),
-          setValueChange: (valueChange) => setValueFilterPriceChange(valueChange)
+          setValueChange: (valueChange) => {
+            if (value === "variants.price") {
+              setValueFilterPriceChange(valueChange);
+            } else if (value === "variants.sale_percent") {
+              setValueFilterOnSaleChange(valueChange);
+            }
+          }
         }
       ),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item-list-slider-minmax", children: [
@@ -4739,11 +4765,11 @@ const FacetComponent = (props) => {
     blockComponent = /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       RadioGroup,
       {
-        id: value,
-        name: value,
-        onValueChange: (getValue) => handleFilterChange({
+        id: getValue,
+        name: getValue,
+        onValueChange: (valueChange) => handleFilterChange({
           parentId: value,
-          value: getValue,
+          value: valueChange,
           force: true
         }),
         items: currentItems == null ? void 0 : currentItems.map((item) => {
@@ -4768,9 +4794,9 @@ const FacetComponent = (props) => {
       {
         placeholder: `Select ${label}`,
         name: value,
-        onValueChange: (getValue) => handleFilterChange({
+        onValueChange: (getValue2) => handleFilterChange({
           parentId: value,
-          value: getValue,
+          value: getValue2,
           force: true
         }),
         items: currentItems == null ? void 0 : currentItems.map((item) => {
@@ -4790,7 +4816,7 @@ const FacetComponent = (props) => {
       return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         ColorSwatch,
         {
-          id: `${value}_${index}`,
+          id: `${getValue}_${index}`,
           name: value,
           value: item.value,
           rgb: getColorSwatch == null ? void 0 : getColorSwatch.rgb,
@@ -4819,17 +4845,21 @@ const FacetComponent = (props) => {
 const FilterVerticalComponent = (props) => {
   const { filter, filterSettings, indexFilter, filterTitleStyle = {}, handleOpenFilterVertical, clickedOpenFilters, filterLayoutType, layoutType, collectionId } = props;
   const { value, label } = filter;
-  const filterItemId = `filter-${layoutType}-${collectionId || "all"}-${filterLayoutType}-${stringToSlug(value)}`;
+  const getValue = `${value}-${indexFilter}`;
+  const filterItemId = `filter-${indexFilter}-${layoutType}-${collectionId || "all"}-${filterLayoutType}-${stringToSlug(getValue)}`;
   const { isRender, classesUlElement, getFacetComponent } = filterSettings({
-    filter,
+    filter: {
+      ...filter,
+      indexFilter
+    },
     scrollElementSelector: `#${filterItemId} .sledge-instant-search__result-filter-item-list`
   });
   return isRender ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item", id: filterItemId, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item-title", onClick: () => handleOpenFilterVertical(value), children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item-title", onClick: () => handleOpenFilterVertical(getValue), children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-instant-search__result-filter-title", style: filterTitleStyle, 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" }) })
+      /* @__PURE__ */ jsxRuntimeExports.jsx(motion.div, { initial: false, animate: clickedOpenFilters.includes(getValue) ? "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: getFacetComponent() })
+    clickedOpenFilters.includes(getValue) && /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: classesUlElement.join(" "), children: getFacetComponent() })
   ] }, indexFilter) : null;
 };
 const FilterHorizontalComponent = (props) => {
@@ -4847,11 +4877,14 @@ const FilterHorizontalComponent = (props) => {
     collectionId
   } = props;
   const { value, label } = filter;
-  const filterItemId = `filter-${layoutType}-${collectionId || "all"}-${deviceType}-${stringToSlug(value)}`;
+  const filterItemId = `filter-${indexFilter}-${layoutType}-${collectionId || "all"}-${deviceType}-${stringToSlug(value)}`;
   const getValueOpenFilterId = deviceType === "mobile" ? clickedOpenFilterHorizontalMobileId : clickedOpenFilterHorizontalId;
   const isOpenFilterHorizontal = getValueOpenFilterId === value;
   const { isRender, classesUlElement, getFacetComponent, isLastIndex } = filterSettings({
-    filter,
+    filter: {
+      ...filter,
+      indexFilter
+    },
     scrollElementSelector: `#${filterItemId} .sledge-instant-search__result-filter-item-list`
   });
   return isRender ? /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -4985,6 +5018,7 @@ const SearchResultWidget = (props) => {
   const [clickedOpenFilterHorizontalId, setClickedOpenFilterHorizontalId] = React__default.useState(null);
   const [clickedOpenFilterHorizontalMobileId, setClickedOpenFilterHorizontalMobileId] = React__default.useState(null);
   const [separatedFilterItem, setSeparatedFilterItem] = React__default.useState({});
+  const [defaultFilterItems, setDefaultFilterItems] = React__default.useState([]);
   const debouncedKeyword = useDebounce(keyword, 500);
   let productCardsComponent = null;
   let collectionCardsComponent = null;
@@ -5075,31 +5109,30 @@ const SearchResultWidget = (props) => {
     setIsLoading(false);
     const { facetStats, totalHits, facetDistribution } = (results == null ? void 0 : results.find(({ indexUid }) => indexUid.includes(index_product))) || {};
     let valueHideFilterWhenOneValue = ((_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];
-        })
-      ) : {}
-    );
+    let valueSearchResultFacets = 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];
+      })
+    ) : {};
+    setSearchResultFacets(valueSearchResultFacets);
     setDefaultFacetStats(facetStats);
     setHideFilterWhenOneValue(valueHideFilterWhenOneValue);
     let allowedFilters = ((_c2 = (_b2 = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _b2.filters) == null ? void 0 : _c2.length) ? (_d2 = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _d2.filters : (filters == null ? void 0 : filters.length) ? filters : [];
@@ -5127,6 +5160,39 @@ const SearchResultWidget = (props) => {
         });
       if (isSetFilter)
         setAllowedFilter(valueAllowedFilter);
+      if (valueAllowedFilter == null ? void 0 : valueAllowedFilter.length) {
+        let valueDefaultFilterItems = valueAllowedFilter.map((filter) => {
+          var _a3;
+          const { value, label, display: display2, settings: settings2 } = filter;
+          const { prefix, filter_list, selected_filter } = settings2 || {};
+          const isDisplaySlider = display2.toLowerCase() === "slider";
+          if (isDisplaySlider)
+            return;
+          let items = [];
+          if (display2.toLowerCase() === "tree") {
+            for (let level = 0; level < MAX_LIMIT_HIERARCHICAL; level++) {
+              items = [...items, ...valueSearchResultFacets[`${value}.lvl${level}`]];
+            }
+          } else {
+            items = valueSearchResultFacets[value];
+          }
+          return {
+            label,
+            settings: settings2,
+            items: (_a3 = items == null ? void 0 : items.map((item) => {
+              const isManualFilter = item && filter_list === "manual" && !(selected_filter == null ? void 0 : selected_filter.includes(item == null ? void 0 : item.value));
+              const isPrefixFilter = item && filter_list === "prefix" && !(prefix == null ? void 0 : prefix.find((prefixItem) => {
+                var _a4;
+                return (_a4 = item == null ? void 0 : item.value) == null ? void 0 : _a4.startsWith(prefixItem);
+              }));
+              if (!item || isManualFilter || isPrefixFilter)
+                return;
+              return item.value;
+            })) == null ? void 0 : _a3.filter((item) => item)
+          };
+        }).filter((item) => item);
+        setDefaultFilterItems(valueDefaultFilterItems);
+      }
     }
     setAllowedTabs(
       tabs == null ? void 0 : tabs.map((tab) => {
@@ -5566,7 +5632,8 @@ const SearchResultWidget = (props) => {
       clickedOpenFilterHorizontalId,
       setClickedOpenFilterHorizontalId,
       clickedOpenFilterHorizontalMobileId,
-      setClickedOpenFilterHorizontalMobileId
+      setClickedOpenFilterHorizontalMobileId,
+      defaultFilterItems
     })
   ] });
 };
@@ -5624,7 +5691,8 @@ const ResultProduct = (props) => {
     setClickedOpenFilterHorizontalId,
     clickedOpenFilterHorizontalMobileId,
     setClickedOpenFilterHorizontalMobileId,
-    isFirstLoading
+    isFirstLoading,
+    defaultFilterItems
   } = props || {};
   const querySortBy = (query == null ? void 0 : query.sortBy) ? query.sortBy : DEFAULT_QUERY_PARAM.SORT_BY;
   const queryPage = (query == null ? void 0 : query.page) ? query.page : DEFAULT_QUERY_PARAM.PAGE;
@@ -5635,7 +5703,13 @@ const ResultProduct = (props) => {
   const [isLoading, setIsLoading] = React__default.useState(!propsData);
   const [clickedSortId, setClickedSortId] = React__default.useState(defaultSort || "");
   const [clickedLimitId, setClickedLimitId] = React__default.useState(Number((searchParams == null ? void 0 : searchParams.get(queryLimit)) || defaultLimit || DEFAULT_LIMIT_VALUE[0]));
-  const [clickedOpenFilters, setClickedOpenFilters] = React__default.useState((allowedFilter == null ? void 0 : allowedFilter.length) ? allowedFilter.map(({ value }) => value) : []);
+  const [clickedOpenFilters, setClickedOpenFilters] = React__default.useState(
+    (allowedFilter == null ? void 0 : allowedFilter.length) ? allowedFilter.map((props2, index) => {
+      const { value, settings: settings2 } = props2;
+      const { collapse } = settings2 || {};
+      return collapse ? null : `${value}-${index}`;
+    }).filter((item) => item) : []
+  );
   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 [searchProcessingTimeMs, setSearchProcessingTimeMs] = React__default.useState(0);
@@ -5643,6 +5717,7 @@ const ResultProduct = (props) => {
   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 [valueFilterPriceChange, setValueFilterPriceChange] = React__default.useState([]);
+  const [valueFilterOnSaleChange, setValueFilterOnSaleChange] = React__default.useState([]);
   const [handleSearchResultFirstTime, setHandleSearchResultFirstTime] = React__default.useState(true);
   const [searchFacetDistribution, setSearchFacetDistribution] = React__default.useState({});
   const [isLoadingButtonLoadMore, setIsLoadingButtonLoadMore] = React__default.useState(false);
@@ -5793,11 +5868,12 @@ const ResultProduct = (props) => {
     setTriggerClickedFacets(!triggerClickedFacets);
     handleQueryStringFilter({});
     setValueFilterPriceChange([]);
+    setValueFilterOnSaleChange([]);
   };
   const handleFilterChange = ({ parentId, value, force = false }) => {
     var _a2;
     let facets2 = [value];
-    let isRange = ["variants.price"].includes(parentId);
+    let isRange = ["variants.price", "variants.sale_percent"].includes(parentId);
     let isHierarchical = hierarchicalFacetAliases.includes(parentId);
     if (clickedFacets) {
       if (force) {
@@ -5811,7 +5887,11 @@ const ResultProduct = (props) => {
           if (isRange) {
             if (clickedFacets[parentId], clickedFacets[parentId] === value) {
               facets2 = [];
-              setValueFilterPriceChange([]);
+              if (parentId === "variants.price") {
+                setValueFilterPriceChange([]);
+              } else if (parentId === "variants.sale_percent") {
+                setValueFilterOnSaleChange([]);
+              }
             } else {
               facets2 = value;
             }
@@ -5827,7 +5907,10 @@ const ResultProduct = (props) => {
         [parentId]: facets2
       }
     };
-    handleQueryStringFilter(valueClickedFacets);
+    let handleQueryStringFilterProp = valueClickedFacets;
+    if (Object.hasOwn(handleQueryStringFilterProp, "variants.inventory_quantity"))
+      handleQueryStringFilterProp == null ? true : delete handleQueryStringFilterProp["variants.inventory_quantity"];
+    handleQueryStringFilter(handleQueryStringFilterProp);
     setClickedFacets == null ? void 0 : setClickedFacets(valueClickedFacets);
     setTriggerClickedFacets(!triggerClickedFacets);
   };
@@ -5875,6 +5958,8 @@ const ResultProduct = (props) => {
         setClickedFacets == null ? void 0 : setClickedFacets(facetsQueryStringObject);
         if (facetsQueryStringObject["variants.price"])
           setValueFilterPriceChange(facetsQueryStringObject["variants.price"]);
+        if (facetsQueryStringObject["variants.sale_percent"])
+          setValueFilterOnSaleChange(facetsQueryStringObject["variants.sale_percent"]);
       },
       separator: hierarchical_separator,
       separatorCollection: hierarchical_collections_separator,
@@ -5953,7 +6038,7 @@ const ResultProduct = (props) => {
       let isAdditionalFilter = ["variants.inventory_quantity"].includes(getName);
       if (isAdditionalFilter)
         return;
-      let isRange = ["variants.price"].includes(getName);
+      let isRange = ["variants.price", "variants.sale_percent"].includes(getName);
       let getAllowedFilterOne = allowedFilter == null ? void 0 : 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({
@@ -5975,14 +6060,29 @@ const ResultProduct = (props) => {
     }
   });
   const facetBlockSelected = ({ label, name, value, index }) => {
-    var _a2, _b2;
+    var _a2, _b2, _c2;
     let valueText = value;
-    let isRange = ["variants.price"].includes(name);
+    let isRange = ["variants.price", "variants.sale_percent"].includes(name);
+    let getLabel = label;
+    let getSettings = {};
+    if (defaultFilterItems == null ? void 0 : defaultFilterItems.length) {
+      defaultFilterItems.map((defaultFilterItem) => {
+        const { label: defaultFilterItemLabel, items, settings: defaultFilterItemSettings } = defaultFilterItem;
+        if (items == null ? void 0 : items.includes(value)) {
+          getLabel = defaultFilterItemLabel;
+          getSettings = defaultFilterItemSettings;
+        }
+      });
+    }
+    (_a2 = getSettings == null ? void 0 : getSettings.delete_prefix) == null ? void 0 : _a2.map((deletePrefix) => {
+      if (String(valueText).startsWith(deletePrefix))
+        valueText = String(valueText).replace(deletePrefix, "");
+    });
     if (isRange)
       valueText = value == null ? void 0 : value.join(" - ");
     else
-      valueText = (_a2 = String(valueText)) == null ? void 0 : _a2.replaceAll(hierarchical_collections_separator, " > ");
-    valueText = (_b2 = String(valueText)) == null ? void 0 : _b2.replaceAll("_", " ");
+      valueText = (_b2 = String(valueText)) == null ? void 0 : _b2.replaceAll(hierarchical_collections_separator, " > ");
+    valueText = (_c2 = String(valueText)) == null ? void 0 : _c2.replaceAll("_", " ");
     let aliases = {};
     let aliasValue = "";
     let aliasSeparator = "";
@@ -6004,7 +6104,7 @@ const ResultProduct = (props) => {
     }
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item-refine-selected", style: filter_option_style, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "sledge-instant-search__result-filter-item-title-refine-list", children: [
-        label,
+        getLabel,
         ": ",
         aliasValue || valueText
       ] }),
@@ -6050,8 +6150,14 @@ const ResultProduct = (props) => {
     let isRender = Boolean(display.toLowerCase() === "slider" ? items : items == null ? void 0 : items.length);
     if (display.toLowerCase() === "slider") {
       let defaultItemSlider = (defaultFacetStats == null ? void 0 : defaultFacetStats[value]) && Object.keys(defaultFacetStats[value]).length ? defaultFacetStats[value] : {};
-      let defaultValueMin = valueFilterPriceChange[0] || (defaultItemSlider == null ? void 0 : defaultItemSlider.min);
-      let defaultValueMax = valueFilterPriceChange[1] || (defaultItemSlider == null ? void 0 : defaultItemSlider.max);
+      let valueFilterSliderChange = [];
+      if (value === "variants.price") {
+        valueFilterSliderChange = valueFilterPriceChange;
+      } else if (value === "variants.sale_percent") {
+        valueFilterSliderChange = valueFilterOnSaleChange;
+      }
+      let defaultValueMin = (valueFilterSliderChange == null ? void 0 : valueFilterSliderChange[0]) || (defaultItemSlider == null ? void 0 : defaultItemSlider.min);
+      let defaultValueMax = (valueFilterSliderChange == null ? void 0 : valueFilterSliderChange[1]) || (defaultItemSlider == null ? void 0 : defaultItemSlider.max);
       isRender = !defaultValueMin && !defaultValueMax ? false : true;
     }
     let classesUlElement = ["sledge-instant-search__result-filter-item-list"];
@@ -6072,6 +6178,8 @@ const ResultProduct = (props) => {
         defaultFacetStats,
         valueFilterPriceChange,
         setValueFilterPriceChange,
+        valueFilterOnSaleChange,
+        setValueFilterOnSaleChange,
         separatedFilterItem,
         setSeparatedFilterItem,
         scrollElementSelector,