@sledge-app/react-instant-search 2.0.21 → 2.0.23

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

@@ -671,6 +671,17 @@ const setElementAttribute = ({ element, attributeName, value }) => {
     element.setAttribute(attributeName, value);
   }
 };
+const convertToQueryParams = (obj) => {
+  var _a;
+  if (typeof obj !== "object" || obj === null || obj && !((_a = Object.keys(obj)) == null ? void 0 : _a.length))
+    return {};
+  const queryParams = {};
+  Object.keys(obj).forEach((key) => {
+    var _a2, _b;
+    queryParams[key] = (_b = (_a2 = obj[key]) == null ? void 0 : _a2.map) == null ? void 0 : _b.call(_a2, (value) => encodeURIComponent(value));
+  });
+  return queryParams;
+};
 const root = "";
 const Loading = "";
 const ConfirmationPopup = "";
@@ -6152,12 +6163,13 @@ const parseFacetObject = ({ facet = "" }) => {
   return null;
 };
 const detectQueryStringFilter = ({ facets, facetsQueryStringObject, callback }) => {
+  var _a, _b;
   const searchParams = new URLSearchParams(document.location.search);
   const searchParamsObject = Object.fromEntries(searchParams);
   for (const searchParamsKey in searchParamsObject) {
     let ifFacetsQueryStringObject = (facets == null ? void 0 : facets.length) && facets.includes(searchParamsKey);
     if (ifFacetsQueryStringObject)
-      facetsQueryStringObject[searchParamsKey] = searchParamsObject[searchParamsKey].split(",");
+      facetsQueryStringObject[searchParamsKey] = (_b = (_a = searchParamsObject[searchParamsKey].split(",")) == null ? void 0 : _a.map) == null ? void 0 : _b.call(_a, (item) => decodeURIComponent(item));
   }
   if (Object.keys(facetsQueryStringObject).length)
     callback(facetsQueryStringObject);
@@ -9957,9 +9969,10 @@ const ResultProduct = React__default.memo((props) => {
         otherQueryStringObject[searchParamsKey] = searchParamsObject[searchParamsKey];
     }
     let facetQueryStringObject = {};
-    for (const valueClickedFacetsKey in valueClickedFacets) {
-      if ((_a2 = valueClickedFacets[valueClickedFacetsKey]) == null ? void 0 : _a2.length)
-        otherQueryStringObject[valueClickedFacetsKey] = valueClickedFacets[valueClickedFacetsKey];
+    let convertValueClickedFacets = convertToQueryParams(valueClickedFacets);
+    for (const valueClickedFacetsKey in convertValueClickedFacets) {
+      if ((_a2 = convertValueClickedFacets[valueClickedFacetsKey]) == null ? void 0 : _a2.length)
+        otherQueryStringObject[valueClickedFacetsKey] = convertValueClickedFacets[valueClickedFacetsKey];
     }
     const newQueryString = new URLSearchParams({
       ...otherQueryStringObject,
@@ -10305,8 +10318,8 @@ const ResultProduct = React__default.memo((props) => {
     filter,
     scrollElementSelector
   }) => {
-    var _a2, _b2;
-    const { value, display, indexFilter } = filter;
+    var _a2, _b2, _c2;
+    const { value, display, indexFilter, settings: filterSettingsProp } = filter;
     const isDisplaySlider = ["slider", "input_range", "slider_with_input_range"].includes(display.toLowerCase());
     const isDisplayColorSwatch = ["swatch", "swatch_with_label"].includes(display.toLowerCase());
     let items = display.toLowerCase() === "tree" ? createHierarchicalFacet({
@@ -10323,33 +10336,73 @@ const ResultProduct = React__default.memo((props) => {
       hierarchicalFacetAliases,
       hierarchicalCollectionsSettings
     }) : searchResultFacets[value];
-    let isRender = Boolean(
-      isDisplaySlider ? items : Number(
-        (_a2 = handleFacetValues({
-          filter,
-          languageSettings,
-          clickedFacets,
-          searchFacetDistribution,
-          displaySettings,
-          settings,
-          items,
-          allowedFilterSlider
-        })) == null ? void 0 : _a2.length
-      )
-    );
-    if (isDisplaySlider) {
-      let defaultItemSlider = (defaultFacetStats == null ? void 0 : defaultFacetStats[value]) && Object.keys(defaultFacetStats[value]).length ? defaultFacetStats[value] : {};
-      let valueFilterSliderChange = [];
-      if (value === "variants.price") {
-        valueFilterSliderChange = valueFilterPriceChange;
-      } else if (value === "variants.sale_percent") {
-        valueFilterSliderChange = valueFilterOnSaleChange;
-      } else {
-        valueFilterSliderChange = valueFilterSliderOthers == null ? void 0 : valueFilterSliderOthers[value];
+    let isRender = false;
+    if ((_a2 = filterSettingsProp == null ? void 0 : filterSettingsProp.visibility_rules) == null ? void 0 : _a2.length) {
+      filterSettingsProp.visibility_rules.map((visibility_rule) => {
+        var _a3, _b3, _c3;
+        const { operator, type, values } = visibility_rule || {};
+        const facetSelectedValues = ((_a3 = clickedFacets == null ? void 0 : clickedFacets[type]) == null ? void 0 : _a3.length) ? clickedFacets == null ? void 0 : clickedFacets[type] : [];
+        if (operator && (values == null ? void 0 : values.length)) {
+          if (String(operator).toLowerCase() === "and") {
+            isRender = values.every((item) => {
+              var _a4;
+              return (_a4 = facetSelectedValues == null ? void 0 : facetSelectedValues.includes) == null ? void 0 : _a4.call(facetSelectedValues, item);
+            });
+          } else if (String(operator).toLowerCase() === "or") {
+            if ((_b3 = values == null ? void 0 : values.find) == null ? void 0 : _b3.call(values, (value2) => {
+              var _a4;
+              return ((_a4 = value2 == null ? void 0 : value2.toLowerCase) == null ? void 0 : _a4.call(value2)) === "all";
+            })) {
+              isRender = Boolean(facetSelectedValues == null ? void 0 : facetSelectedValues.length);
+            } else {
+              isRender = Boolean((_c3 = facetSelectedValues == null ? void 0 : facetSelectedValues.some) == null ? void 0 : _c3.call(facetSelectedValues, (item) => values.includes(item)));
+            }
+          }
+        }
+      });
+    }
+    const isRenderFromVisibilityRules = isRender;
+    const checkRenderFacet = () => {
+      var _a3;
+      isRender = Boolean(
+        isDisplaySlider ? items : Number(
+          (_a3 = handleFacetValues({
+            filter,
+            languageSettings,
+            clickedFacets,
+            searchFacetDistribution,
+            displaySettings,
+            settings,
+            items,
+            allowedFilterSlider
+          })) == null ? void 0 : _a3.length
+        )
+      );
+    };
+    const checkRenderFacetSlider = () => {
+      if (isDisplaySlider) {
+        let defaultItemSlider = (defaultFacetStats == null ? void 0 : defaultFacetStats[value]) && Object.keys(defaultFacetStats[value]).length ? defaultFacetStats[value] : {};
+        let valueFilterSliderChange = [];
+        if (value === "variants.price") {
+          valueFilterSliderChange = valueFilterPriceChange;
+        } else if (value === "variants.sale_percent") {
+          valueFilterSliderChange = valueFilterOnSaleChange;
+        } else {
+          valueFilterSliderChange = valueFilterSliderOthers == null ? void 0 : valueFilterSliderOthers[value];
+        }
+        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;
+      }
+    };
+    if ((_b2 = filterSettingsProp == null ? void 0 : filterSettingsProp.visibility_rules) == null ? void 0 : _b2.length) {
+      if (isRenderFromVisibilityRules) {
+        checkRenderFacet();
+        checkRenderFacetSlider();
       }
-      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;
+    } else {
+      checkRenderFacet();
+      checkRenderFacetSlider();
     }
     let classesUlElement = ["sledge-instant-search__result-filter-item-list"];
     const getFacetComponent = (props2) => {
@@ -10399,7 +10452,7 @@ const ResultProduct = React__default.memo((props) => {
       );
     if (display.toLowerCase() === "tree")
       classesUlElement.push("sledge-instant-search__result-filter-item-tree");
-    if (((_b2 = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _b2.layout) === "vertical" && (allowedFilter == null ? void 0 : allowedFilter.length) === 1)
+    if (((_c2 = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _c2.layout) === "vertical" && (allowedFilter == null ? void 0 : allowedFilter.length) === 1)
       classesUlElement == null ? void 0 : classesUlElement.push("sledge-instant-search__result-filter-item-list-just-one");
     let isLastIndex = allowedFilter ? (allowedFilter == null ? void 0 : allowedFilter.length) - 1 === indexFilter : false;
     return { isRender, classesUlElement, getFacetComponent, isLastIndex };