@sledge-app/react-instant-search 1.0.68 → 1.0.70

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

@@ -49,7 +49,8 @@ const DATASET_ATTRIBUTE_KEY = {
     QUERY_SHARE_ID: "data-query-share-id",
     RENDER_WISHLIST_WIDGET_ALERT: "data-render-wishlist-widget-alert",
     USE_PROXY_URL: "data-use-proxy-url",
-    LIMIT_OPTIONS: "data-limit-options"
+    LIMIT_OPTIONS: "data-limit-options",
+    TRIGGER_BADGE: "data-trigger-badge"
   },
   PRODUCT_REVIEW: {
     RATING_SIZE: "data-rating-size",
@@ -95,7 +96,8 @@ const LOCAL_STORAGE_KEY = {
   ISSUED_AUTH_APP: "sledge-issued-auth-app",
   EXPIRED_AUTH_APP: "sledge-expired-auth-app",
   RECENTLY_VIEWED_APP: "sledge-recently-viewed",
-  LIMIT_PRODUCT: "sledge-limit-product"
+  LIMIT_PRODUCT: "sledge-limit-product",
+  WISHLIST_BADGE_COUNTER: "sledge-wishlist-badge-counter"
 };
 const INTERNAL_SELECTOR_VALUE = {
   ELEMENT_TOAST_NOTIFICATION: "toast-notification",
@@ -123,6 +125,7 @@ const SELECTOR = {
   },
   WISHLIST: {
     ELEMENT_BADGE: `[${SELECTOR_ATTRIBUTE_KEY}="wishlist-badge"]`,
+    ELEMENT_BADGE_COUNTER: `[${SELECTOR_ATTRIBUTE_KEY}="wishlist-badge-counter"]`,
     ELEMENT_BADGE_MENU_ITEM: `[href="#sledge-wishlist-badge-menu-item"]`,
     ELEMENT_TRIGGER: `[${SELECTOR_ATTRIBUTE_KEY}="wishlist-trigger"]`,
     ELEMENT_WIDGET: `[${SELECTOR_ATTRIBUTE_KEY}="wishlist-widget"]`,
@@ -721,13 +724,14 @@ const Pagination = (props) => {
   ] });
 };
 const RadioGroup$1 = "";
-const rowRenderer = ({ virtualized, item, id, labelStyle }) => {
+const rowRenderer = ({ virtualized, item, id, labelStyle, useVirtualized }) => {
   const { index, key = "", style = {} } = virtualized || {};
   const { label, value } = item;
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__radio-group-item-flex", style, children: [
+  const content = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx($f99a8c78507165f7$export$6d08773d2e66f8f2, { className: "sledge__radio-group-item", value, id: `${id}${index}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx($f99a8c78507165f7$export$adb584737d712b70, { className: "sledge__radio-group-indicator" }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "sledge__radio-group-label", htmlFor: `${id}${index}`, style: labelStyle, children: label })
-  ] }, key || index);
+  ] });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__radio-group-item-flex", style, children: content }, key || index);
 };
 const RadioGroup = ({ id, name, required, defaultValue, items, labelStyle = {}, onValueChange, scrollElement, useVirtualized = false }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__radio-group-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx("form", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -756,7 +760,8 @@ const RadioGroup = ({ id, name, required, defaultValue, items, labelStyle = {},
             },
             item: items[index],
             id,
-            labelStyle
+            labelStyle,
+            useVirtualized
           })
         }
       ) : items.map(
@@ -766,7 +771,8 @@ const RadioGroup = ({ id, name, required, defaultValue, items, labelStyle = {},
           },
           item,
           id,
-          labelStyle
+          labelStyle,
+          useVirtualized
         })
       )
     }
@@ -1204,42 +1210,107 @@ const addToCartTrigger$2 = async (data) => {
     return;
   });
 };
+const wishlistInfo = async ({ callback }) => {
+  var _a, _b;
+  let response;
+  let run = false;
+  let valueTotalWishlist;
+  let valueProxyUrl;
+  response = await getWishlistInfo();
+  run = ((_a = response == null ? void 0 : response.status) == null ? void 0 : _a.code) === 200 || false;
+  valueTotalWishlist = !((_b = response == null ? void 0 : response.data) == null ? void 0 : _b.total_data) ? 0 : response.data.total_data;
+  valueProxyUrl = DEFAULT_WISHLIST_URL;
+  if (run)
+    callback({
+      totalWishlist: valueTotalWishlist,
+      proxyUrl: valueProxyUrl,
+      data: response == null ? void 0 : response.data
+    });
+};
+const BadgeCounter = (props) => {
+  var _a;
+  const { data: propsData } = props;
+  const { isRenderApp, triggerRenderMultipleComponent, sledgeAnonymId, isJsVersion } = React__default.useContext(SledgeContext);
+  const { wishlist: isRenderAppWishlist } = isRenderApp || {};
+  const { value: valueRenderWishlistBadge, trigger: triggerRenderWishlistBadge } = ((_a = triggerRenderMultipleComponent == null ? void 0 : triggerRenderMultipleComponent.wishlist) == null ? void 0 : _a.badge) || {};
+  const [totalWishlist, setTotalWishlist] = React__default.useState((propsData == null ? void 0 : propsData.total_data) || 0);
+  const [isFirstLoading, setIsFirstLoading] = React__default.useState(!propsData);
+  const [isLoading, setIsLoading] = React__default.useState(!propsData);
+  const [isMaximizeTotalWishlist, setIsMaximizeTotalWishlist] = React__default.useState(false);
+  const [dataSettings, setDataSettings] = React__default.useState({});
+  const [isRequiredLogin, setIsRequiredLogin] = React__default.useState(false);
+  const handleGetWishlistInfo = async () => {
+    if (!propsData || propsData && !Object.keys(propsData).length) {
+      await wishlistInfo({
+        callback: ({ totalWishlist: valueTotalWishlist }) => {
+          setTotalWishlist(valueTotalWishlist);
+          setIsMaximizeTotalWishlist(valueTotalWishlist > 99);
+          setIsFirstLoading(false);
+          setIsLoading(false);
+          localStorage == null ? void 0 : localStorage.setItem(LOCAL_STORAGE_KEY.WISHLIST_BADGE_COUNTER, valueTotalWishlist);
+        }
+      });
+    } else {
+      localStorage == null ? void 0 : localStorage.setItem(LOCAL_STORAGE_KEY.WISHLIST_BADGE_COUNTER, totalWishlist);
+    }
+  };
+  const handleSettings = async (LOCAL_STORAGE_WISHLIST_SETTING) => {
+    let response;
+    response = JSON.parse(LOCAL_STORAGE_WISHLIST_SETTING);
+    if (!response)
+      return;
+    const { is_required_login } = response || {};
+    setDataSettings(response);
+    setIsRequiredLogin(sledgeAnonymId && is_required_login);
+  };
+  React__default.useEffect(() => {
+    if (!isRenderAppWishlist)
+      return;
+    handleSettings(localStorage.getItem(LOCAL_STORAGE_KEY.WISHLIST_SETTING) || null);
+  }, [isRenderAppWishlist]);
+  React__default.useEffect(() => {
+    if (!(dataSettings == null ? void 0 : dataSettings.launch_point))
+      return;
+    handleGetWishlistInfo();
+  }, [dataSettings]);
+  React__default.useEffect(() => {
+    if (!valueRenderWishlistBadge)
+      return;
+    if (triggerRenderWishlistBadge)
+      triggerRenderWishlistBadge(false);
+    handleGetWishlistInfo();
+  }, [valueRenderWishlistBadge]);
+  const defaultTotalWishlist = isJsVersion ? (localStorage == null ? void 0 : localStorage.getItem(LOCAL_STORAGE_KEY.WISHLIST_BADGE_COUNTER)) || null : null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isFirstLoading ? defaultTotalWishlist : isLoading || isRequiredLogin ? 0 : `${isMaximizeTotalWishlist ? "99+" : totalWishlist}` || 0 });
+};
 const Badge = (props) => {
   var _a, _b;
   const { useProxyUrl = false, data: propsData, position: positionProp } = props;
-  const { isRenderApp, triggerRenderMultipleComponent, sledgeAnonymId } = React__default.useContext(SledgeContext);
+  const { isRenderApp, triggerRenderMultipleComponent, sledgeAnonymId, isJsVersion } = React__default.useContext(SledgeContext);
   const { wishlist: isRenderAppWishlist } = isRenderApp || {};
   const { value: valueRenderWishlistBadge, trigger: triggerRenderWishlistBadge } = ((_a = triggerRenderMultipleComponent == null ? void 0 : triggerRenderMultipleComponent.wishlist) == null ? void 0 : _a.badge) || {};
   const defaultColorIcon = "currentColor";
   const [colorIcon, setColorIcon] = React__default.useState(defaultColorIcon);
-  const [totalWishlist, setTotalWishlist] = React__default.useState((propsData == null ? void 0 : propsData.total_data) || 0);
   const [isFirstLoading, setIsFirstLoading] = React__default.useState(!propsData);
-  const [isLoading, setIsLoading] = React__default.useState(!propsData);
   const [isMaximizeTotalWishlist, setIsMaximizeTotalWishlist] = React__default.useState(false);
   const [proxyUrl, setProxyUrl] = React__default.useState((propsData == null ? void 0 : propsData.proxy_url) || "");
   const [dataSettings, setDataSettings] = React__default.useState({});
   const [isRequiredLogin, setIsRequiredLogin] = React__default.useState(false);
+  const [data, setData] = React__default.useState({});
   const { floating_button_type } = (dataSettings == null ? void 0 : dataSettings.launch_point) || {};
   const { alert_login, alert, login_button } = ((_b = dataSettings == null ? void 0 : dataSettings.languages) == null ? void 0 : _b.widget) || {};
   const defaultPosition = positionProp || floating_button_type;
   const position = defaultPosition ? defaultPosition : "none";
   const handleGetWishlistInfo = async () => {
-    var _a2, _b2;
-    let response;
-    let run = false;
-    let valueTotalWishlist;
-    let valueProxyUrl;
-    response = await getWishlistInfo();
-    run = ((_a2 = response == null ? void 0 : response.status) == null ? void 0 : _a2.code) === 200 || false;
-    valueTotalWishlist = !((_b2 = response == null ? void 0 : response.data) == null ? void 0 : _b2.total_data) ? 0 : response.data.total_data;
-    valueProxyUrl = DEFAULT_WISHLIST_URL;
-    if (run) {
-      setTotalWishlist(valueTotalWishlist);
-      setIsMaximizeTotalWishlist(valueTotalWishlist > 99);
-      setProxyUrl(valueProxyUrl);
-      setIsFirstLoading(false);
-      setIsLoading(false);
-    }
+    await wishlistInfo({
+      callback: ({ totalWishlist: valueTotalWishlist, proxyUrl: valueProxyUrl, data: valueData }) => {
+        setIsMaximizeTotalWishlist(valueTotalWishlist > 99);
+        setProxyUrl(valueProxyUrl);
+        setIsFirstLoading(false);
+        setData(valueData);
+        localStorage == null ? void 0 : localStorage.setItem(LOCAL_STORAGE_KEY.WISHLIST_BADGE_COUNTER, valueTotalWishlist);
+      }
+    });
   };
   const handleSettings = async (LOCAL_STORAGE_WISHLIST_SETTING) => {
     let response;
@@ -1289,7 +1360,24 @@ const Badge = (props) => {
   const HeaderMenu = () => {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "sledge-wishlist__badge", onClick: handleRequiredLogin, onMouseEnter: () => setColorIcon("#F85538"), onMouseLeave: () => setColorIcon(defaultColorIcon), children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(HeartIcon, { width: 20, height: 20, type: "outline", color: colorIcon }),
-      !isFirstLoading && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `sledge-wishlist__badge-counter sledge-wishlist__badge-counter-header-menu ${isMaximizeTotalWishlist ? "sledge-wishlist__badge-fit-content" : ""}`, children: isLoading || isRequiredLogin ? 0 : `${isMaximizeTotalWishlist ? "99+" : totalWishlist}` || 0 })
+      !isFirstLoading && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "span",
+        {
+          className: `sledge-wishlist__badge-counter sledge-wishlist__badge-counter-header-menu ${isMaximizeTotalWishlist ? "sledge-wishlist__badge-fit-content" : ""}`,
+          "data-component": "wishlist-badge-counter",
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { "data-component": "container-widget", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            BadgeCounter,
+            {
+              data: isJsVersion ? {
+                ...data,
+                ...{
+                  total_data: (localStorage == null ? void 0 : localStorage.getItem(LOCAL_STORAGE_KEY.WISHLIST_BADGE_COUNTER)) || (data == null ? void 0 : data.total_data)
+                }
+              } : data
+            }
+          ) })
+        }
+      )
     ] });
   };
   const FloatingFull = () => {
@@ -1297,18 +1385,84 @@ const Badge = (props) => {
       /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-wishlist__badge-floating-text", children: "My Wishlist" }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "sledge-wishlist__badge-icon", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(HeartIcon, { width: 18, height: 18, type: "fill", color: "#000000" }),
-        !isFirstLoading && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `sledge-wishlist__badge-counter sledge-wishlist__badge-counter-bottom-right ${isMaximizeTotalWishlist ? "sledge-wishlist__badge-fit-content" : ""}`, children: isLoading || isRequiredLogin ? 0 : `${isMaximizeTotalWishlist ? "99+" : totalWishlist}` || 0 })
+        !isFirstLoading && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "span",
+          {
+            className: `sledge-wishlist__badge-counter sledge-wishlist__badge-counter-bottom-right ${isMaximizeTotalWishlist ? "sledge-wishlist__badge-fit-content" : ""}`,
+            "data-component": "wishlist-badge-counter",
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { "data-component": "container-widget", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              BadgeCounter,
+              {
+                data: isJsVersion ? {
+                  ...data,
+                  ...{
+                    total_data: (localStorage == null ? void 0 : localStorage.getItem(LOCAL_STORAGE_KEY.WISHLIST_BADGE_COUNTER)) || (data == null ? void 0 : data.total_data)
+                  }
+                } : data
+              }
+            ) })
+          }
+        )
       ] })
     ] }) });
   };
   const FloatingIcon = () => {
     return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge-wishlist__badge-floating-icon sledge-wishlist__badge-floating-${position}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { onClick: handleRequiredLogin, className: "sledge-wishlist__badge-floating-icon-link", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "sledge-wishlist__badge-icon", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(HeartIcon, { width: 27.01, height: 25.73, type: "outline", color: "#000000" }),
-      !isFirstLoading && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `sledge-wishlist__badge-counter sledge-wishlist__badge-counter-bottom-right ${isMaximizeTotalWishlist ? "sledge-wishlist__badge-fit-content" : ""}`, children: isLoading || isRequiredLogin ? 0 : `${isMaximizeTotalWishlist ? "99+" : totalWishlist}` || 0 })
+      !isFirstLoading && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "span",
+        {
+          className: `sledge-wishlist__badge-counter sledge-wishlist__badge-counter-bottom-right ${isMaximizeTotalWishlist ? "sledge-wishlist__badge-fit-content" : ""}`,
+          "data-component": "wishlist-badge-counter",
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { "data-component": "container-widget", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            BadgeCounter,
+            {
+              data: isJsVersion ? {
+                ...data,
+                ...{
+                  total_data: (localStorage == null ? void 0 : localStorage.getItem(LOCAL_STORAGE_KEY.WISHLIST_BADGE_COUNTER)) || (data == null ? void 0 : data.total_data)
+                }
+              } : data
+            }
+          ) })
+        }
+      )
     ] }) }) });
   };
   return isFirstLoading ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: position === "none" ? /* @__PURE__ */ jsxRuntimeExports.jsx(HeaderMenu, {}) : String(position).includes("bottom") ? /* @__PURE__ */ jsxRuntimeExports.jsx(FloatingIcon, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(FloatingFull, {}) });
 };
+const BadgeCounterInitSelector = () => {
+  let element = Array.from(document.querySelectorAll(SELECTOR.WISHLIST.ELEMENT_BADGE_COUNTER));
+  let isElementDetected = !element || element && !element.length;
+  if (isElementDetected)
+    return;
+  element.map((item) => {
+    if (item) {
+      if (item.querySelector(`[${SELECTOR_ATTRIBUTE_KEY}="${INTERNAL_SELECTOR_VALUE.ELEMENT_CONTAINER_WIDGET}"]`))
+        item.querySelector(`[${SELECTOR_ATTRIBUTE_KEY}="${INTERNAL_SELECTOR_VALUE.ELEMENT_CONTAINER_WIDGET}"]`).remove();
+      let elementContainerWidget = document.createElement("div");
+      elementContainerWidget.setAttribute(SELECTOR_ATTRIBUTE_KEY, INTERNAL_SELECTOR_VALUE.ELEMENT_CONTAINER_WIDGET);
+      item.appendChild(elementContainerWidget);
+      client.createRoot(elementContainerWidget).render(
+        /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.StrictMode, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          SledgeContext.Provider,
+          {
+            value: {
+              isRenderApp: {
+                wishlist: true,
+                productReview: true,
+                instantSearch: true
+              },
+              sledgeAnonymId: localStorage.getItem(LOCAL_STORAGE_KEY.ANONYM_ID) || "",
+              isJsVersion: true
+            },
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(BadgeCounter, {})
+          }
+        ) })
+      );
+    }
+  });
+};
 const BadgeInitSelector = () => {
   const sledgeWishlistSettings = localStorage.getItem(LOCAL_STORAGE_KEY.WISHLIST_SETTING) ? JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY.WISHLIST_SETTING) || null) : null;
   let element = Array.from(document.querySelectorAll(SELECTOR.WISHLIST.ELEMENT_BADGE));
@@ -1407,9 +1561,9 @@ const BadgeInitSelector = () => {
 };
 const Trigger = (props) => {
   var _a, _b, _c, _d, _e;
-  const { params, forceActive = false, hidden = false, onAfterAddWishlist, onAfterRemoveWishlist, wishlistChecked } = props;
+  const { params, forceActive = false, hidden = false, onAfterAddWishlist, onAfterRemoveWishlist, wishlistChecked, triggerBadge = "default" } = props;
   const { productId, productVariantId } = params || {};
-  const { isRenderApp, triggerRenderMultipleComponent, sledgeAnonymId } = React__default.useContext(SledgeContext);
+  const { isRenderApp, triggerRenderMultipleComponent, sledgeAnonymId, isJsVersion } = React__default.useContext(SledgeContext);
   const { wishlist: isRenderAppWishlist } = isRenderApp || {};
   const { trigger: triggerRenderWishlistBadge } = ((_a = triggerRenderMultipleComponent == null ? void 0 : triggerRenderMultipleComponent.wishlist) == null ? void 0 : _a.badge) || {};
   const defaultColorIcon = "#767676";
@@ -1470,7 +1624,13 @@ const Trigger = (props) => {
       setIsWishlist(!isWishlist);
       if (triggerRenderWishlistBadge)
         triggerRenderWishlistBadge(true);
-      BadgeInitSelector();
+      if (isJsVersion) {
+        if (triggerBadge === "rerender") {
+          BadgeInitSelector();
+        } else {
+          BadgeCounterInitSelector();
+        }
+      }
       if (typeof window !== "undefined") {
         if (window.sledgeWishlistWidgetListUpdate)
           window.sledgeWishlistWidgetListUpdate();
@@ -1617,9 +1777,9 @@ const WidgetHeaderClearTrigger = ({ buttonText, shareId, dataSettings, isFirstLo
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !isRequiredLogin && /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !shareId && /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isFirstLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "132px", height: "46px", color: "lighten", rounded: "md" }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-wishlist__widget-header-item", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { type: "button", colorType: "danger", onClick: handleClick, style: display_button_clear_all_style, children: buttonText ? buttonText : button_clear_all || "Clear Wishlist" }) }) }) }) });
 };
-const WidgetHeaderShareTrigger = ({ wishlistData, buttonText, showShareTrigger, shareLink, shareId, dataSettings, isFirstLoading }) => {
+const WidgetHeaderShareTrigger = ({ wishlistData, buttonText, showShareTrigger, shareLink, shareId, dataSettings, isFirstLoading, triggerBadge }) => {
   var _a, _b, _c, _d, _e, _f, _g, _h;
-  const { triggerRenderMultipleComponent, sledgeAnonymId } = React__default.useContext(SledgeContext);
+  const { triggerRenderMultipleComponent, sledgeAnonymId, isJsVersion } = React__default.useContext(SledgeContext);
   const { trigger: triggerRenderWishlistBadge } = ((_a = triggerRenderMultipleComponent == null ? void 0 : triggerRenderMultipleComponent.wishlist) == null ? void 0 : _a.badge) || {};
   const { is_required_login } = ((_b = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _b.global) || {};
   const {
@@ -1685,7 +1845,13 @@ const WidgetHeaderShareTrigger = ({ wishlistData, buttonText, showShareTrigger,
       if (typeof window !== "undefined") {
         if (triggerRenderWishlistBadge)
           triggerRenderWishlistBadge(true);
-        BadgeInitSelector();
+        if (isJsVersion) {
+          if (triggerBadge === "rerender") {
+            BadgeInitSelector();
+          } else {
+            BadgeCounterInitSelector();
+          }
+        }
         if (window.sledgeInfoPopup)
           window.sledgeInfoPopup({
             title: title_added_all_to_wishlist,
@@ -4288,8 +4454,15 @@ const FacetComponent = (props) => {
     valueFilterPriceChange,
     setValueFilterPriceChange,
     separatedFilterItem,
-    setSeparatedFilterItem
+    setSeparatedFilterItem,
+    settings,
+    filterItemRef
   } = props;
+  let aliases = {};
+  if (filter.value === "hierarchicalProductType")
+    aliases = settings.productTypeAliases || {};
+  if (filter.value === "hierarchicalCollections")
+    aliases = settings.collectionAliases || {};
   const { button_load_more } = (generalDataSettings == null ? void 0 : generalDataSettings.languages) || {};
   const { colors: colorSwatches, languages: languageSettings } = displaySettings || {};
   const {
@@ -4332,7 +4505,7 @@ const FacetComponent = (props) => {
       if (!(isHideFacetWhenZeroValue && !counter))
         facetValues.push({
           ...item,
-          labelName,
+          labelName: aliases[labelName] || labelName,
           counter
         });
     }
@@ -4393,39 +4566,40 @@ const FacetComponent = (props) => {
       const blockComponentChildren = handleFacetCheckbox({
         facetValues: currentItems2
       });
+      const content = /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Checkbox,
+        {
+          id: `${value}_${index}${isFacetHierarchical ? `_${stringToSlug(itemValue)}` : ""}`,
+          name: value,
+          value: itemValue,
+          label: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: `${labelName}${counter !== void 0 && isShowNumberMatchingProduct ? ` (${counter})` : ""}` }),
+            isHasChildren ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+              motion.div,
+              {
+                initial: false,
+                animate: isChecked ? "open" : "closed",
+                variants: ROTATE_FILTER_ARROW_ANIMATION,
+                className: "sledge-instant-search__result-filter-checkbox-item-level-arrow",
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronArrowDownIcon, { width: 15, height: 15, color: "#000000" })
+              }
+            ) : null
+          ] }),
+          onClick: (e) => handleFilterChange({
+            parentId: value,
+            value: e.currentTarget.value
+          }),
+          checked: isChecked,
+          labelStyle: filter_option_style
+        }
+      );
       return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "li",
           {
             className: `sledge-instant-search__result-filter-checkbox-item ${isFacetHierarchical ? `sledge-instant-search__result-filter-checkbox-item-level sledge-instant-search__result-filter-checkbox-item-level-${level}` : ""}`,
             style,
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-              Checkbox,
-              {
-                id: `${value}_${index}${isFacetHierarchical ? `_${stringToSlug(itemValue)}` : ""}`,
-                name: value,
-                value: itemValue,
-                label: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: `${labelName}${counter !== void 0 && isShowNumberMatchingProduct ? ` (${counter})` : ""}` }),
-                  isHasChildren ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    motion.div,
-                    {
-                      initial: false,
-                      animate: isChecked ? "open" : "closed",
-                      variants: ROTATE_FILTER_ARROW_ANIMATION,
-                      className: "sledge-instant-search__result-filter-checkbox-item-level-arrow",
-                      children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronArrowDownIcon, { width: 15, height: 15, color: "#000000" })
-                    }
-                  ) : null
-                ] }),
-                onClick: (e) => handleFilterChange({
-                  parentId: value,
-                  value: e.currentTarget.value
-                }),
-                checked: isChecked,
-                labelStyle: filter_option_style
-              }
-            )
+            children: content
           },
           key
         ),
@@ -4438,7 +4612,7 @@ const FacetComponent = (props) => {
       ] });
     });
   };
-  let scrollElement = document.querySelector(`#filter-component-${stringToSlug(value)} .sledge-instant-search__result-filter-item-list`);
+  let scrollElement = filterItemRef == null ? void 0 : filterItemRef.current;
   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);
@@ -4560,6 +4734,20 @@ const FacetComponent = (props) => {
   }
   return blockComponent;
 };
+const FilterVerticalComponent = (props) => {
+  const { filter, indexFilter, isRender, classesUlElement, getFacetComponent, filterTitleStyle: filter_title_style = {}, handleOpenFilterVertical, clickedOpenFilters } = props;
+  const { value, label } = filter;
+  const filterItemRef = React__default.useRef(null);
+  return isRender ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item", id: `filter-component-${stringToSlug(value)}`, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item-title", onClick: () => handleOpenFilterVertical(value), children: [
+      /* @__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(" "), ref: filterItemRef, children: getFacetComponent({
+      filterItemRef
+    }) })
+  ] }, indexFilter) : null;
+};
 const ButtonLoadMore = ({ text, onClick, isInfiniteScroll, currentPage, totalPage, totalResult, pageInfo: pageInfoProp, isVisibleLoadMore, ...otherProps }) => {
   const [ref, entry] = useIntersectionObserver({
     threshold: 0,
@@ -5647,11 +5835,16 @@ const ResultProduct = (props) => {
     else
       valueText = (_a2 = String(valueText)) == null ? void 0 : _a2.replaceAll(hierarchical_collections_separator, " > ");
     valueText = (_b2 = String(valueText)) == null ? void 0 : _b2.replaceAll("_", " ");
+    let aliases = {};
+    if (name === "hierarchicalCollections")
+      aliases = settings.collectionAliases || {};
+    if (name === "hierarchicalProductType")
+      aliases = settings.productTypeAliases || {};
     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,
         ": ",
-        valueText
+        aliases[value] || valueText
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "span",
@@ -5698,7 +5891,7 @@ const ResultProduct = (props) => {
       isRender = !defaultValueMin && !defaultValueMax ? false : true;
     }
     let classesUlElement = ["sledge-instant-search__result-filter-item-list"];
-    const getFacetComponent = () => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    const getFacetComponent = ({ filterItemRef }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
       FacetComponent,
       {
         filter: {
@@ -5708,6 +5901,7 @@ const ResultProduct = (props) => {
         isFirstLoading,
         displaySettings,
         generalDataSettings,
+        settings,
         searchFacetDistribution,
         clickedFacets,
         handleFilterChange,
@@ -5715,7 +5909,8 @@ const ResultProduct = (props) => {
         valueFilterPriceChange,
         setValueFilterPriceChange,
         separatedFilterItem,
-        setSeparatedFilterItem
+        setSeparatedFilterItem,
+        filterItemRef
       }
     );
     if (display.toLowerCase() === "swatch" && (items == null ? void 0 : items.length))
@@ -5743,15 +5938,20 @@ const ResultProduct = (props) => {
     }) })
   ] }) : null;
   const filterVerticalComponents = allowedFilter == null ? void 0 : allowedFilter.map((filter, indexFilter) => {
-    const { value, label } = filter;
     const { isRender, classesUlElement, getFacetComponent } = filterSettings(filter);
-    return isRender ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item", id: `filter-component-${stringToSlug(value)}`, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item-title", onClick: () => handleOpenFilterVertical(value), children: [
-        /* @__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: getFacetComponent() })
-    ] }, indexFilter) : null;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      FilterVerticalComponent,
+      {
+        filter,
+        indexFilter,
+        isRender,
+        classesUlElement,
+        getFacetComponent,
+        filterTitleStyle: filter_title_style,
+        handleOpenFilterVertical,
+        clickedOpenFilters
+      }
+    );
   });
   const filterHorizontalComponents = allowedFilter == null ? void 0 : allowedFilter.map((filter, indexFilter) => {
     const { value, label } = filter;