@sledge-app/react-instant-search 0.0.80 → 0.0.82

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

@@ -1,4 +1,4 @@
-import { j as jsxRuntimeExports, $ as $cb5cc270b50c6fcd$export$be92b6f5f03c0fe9, a as $cb5cc270b50c6fcd$export$41fb9f06171c75f4, b as $cb5cc270b50c6fcd$export$602eac185826482c, c as $cb5cc270b50c6fcd$export$7c6e2c02157bb7d2, d as $cb5cc270b50c6fcd$export$f39c2d165cd861fe, e as $cb5cc270b50c6fcd$export$21b07c8f274aebd5, f as $67824d98245208a0$export$be92b6f5f03c0fe9, g as $67824d98245208a0$export$adb584737d712b70, h as $e698a72e93240346$export$be92b6f5f03c0fe9, i as $e698a72e93240346$export$adb584737d712b70, k as $faa2e61a3361514f$export$be92b6f5f03c0fe9, l as $faa2e61a3361514f$export$13921ac0cc260818, m as $faa2e61a3361514f$export$9a58ef0d7ad3278c, n as $faa2e61a3361514f$export$6521433ed15a34db, o as $f99a8c78507165f7$export$be92b6f5f03c0fe9, p as $f99a8c78507165f7$export$6d08773d2e66f8f2, q as $f99a8c78507165f7$export$adb584737d712b70, r as $cc7e05a45900e73f$export$6d08773d2e66f8f2, s as $cc7e05a45900e73f$export$d6e5bf9c43ea9319, t as $cc7e05a45900e73f$export$c3468e2714d175fa, u as $cc7e05a45900e73f$export$be92b6f5f03c0fe9, v as $cc7e05a45900e73f$export$41fb9f06171c75f4, w as $cc7e05a45900e73f$export$4c8d1a57a761ef94, x as $cc7e05a45900e73f$export$f04a61298a47a40f, y as $cc7e05a45900e73f$export$602eac185826482c, z as $cc7e05a45900e73f$export$7c6e2c02157bb7d2, A as $cc7e05a45900e73f$export$2f60d3ec9ad468f2, B as $cc7e05a45900e73f$export$d5c6c08dc2d3ca7, C as $cc7e05a45900e73f$export$bf1aedc3039c8d63, D as motion, E as $a093c7e1ec25a057$export$2881499e37b75b9a, F as $a093c7e1ec25a057$export$be92b6f5f03c0fe9, G as $a093c7e1ec25a057$export$41fb9f06171c75f4, H as $a093c7e1ec25a057$export$602eac185826482c, I as $a093c7e1ec25a057$export$7c6e2c02157bb7d2, J as $a093c7e1ec25a057$export$21b07c8f274aebd5, K as $57acba87d6e25586$export$be92b6f5f03c0fe9, L as $57acba87d6e25586$export$d5c6c08dc2d3ca7, M as $57acba87d6e25586$export$9a4e88b92edfce6b, N as $57acba87d6e25586$export$6521433ed15a34db, O as $57acba87d6e25586$export$ac61190d9fc311a9, P as MasonryResponsive, Q as Masonry, R as $5d3850c4d0b4e6c7$export$be92b6f5f03c0fe9, S as $5d3850c4d0b4e6c7$export$602eac185826482c, T as $5d3850c4d0b4e6c7$export$c6fdb837b070b4ff, U as $5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2 } from "./vendor-eeee87f8.js";
+import { j as jsxRuntimeExports, $ as $cb5cc270b50c6fcd$export$be92b6f5f03c0fe9, a as $cb5cc270b50c6fcd$export$41fb9f06171c75f4, b as $cb5cc270b50c6fcd$export$602eac185826482c, c as $cb5cc270b50c6fcd$export$7c6e2c02157bb7d2, d as $cb5cc270b50c6fcd$export$f39c2d165cd861fe, e as $cb5cc270b50c6fcd$export$21b07c8f274aebd5, f as $67824d98245208a0$export$be92b6f5f03c0fe9, g as $67824d98245208a0$export$adb584737d712b70, h as $e698a72e93240346$export$be92b6f5f03c0fe9, i as $e698a72e93240346$export$adb584737d712b70, k as $faa2e61a3361514f$export$be92b6f5f03c0fe9, l as $faa2e61a3361514f$export$13921ac0cc260818, m as $faa2e61a3361514f$export$9a58ef0d7ad3278c, n as $faa2e61a3361514f$export$6521433ed15a34db, o as $f99a8c78507165f7$export$be92b6f5f03c0fe9, p as $f99a8c78507165f7$export$6d08773d2e66f8f2, q as $f99a8c78507165f7$export$adb584737d712b70, r as $cc7e05a45900e73f$export$6d08773d2e66f8f2, s as $cc7e05a45900e73f$export$d6e5bf9c43ea9319, t as $cc7e05a45900e73f$export$c3468e2714d175fa, u as $cc7e05a45900e73f$export$be92b6f5f03c0fe9, v as $cc7e05a45900e73f$export$41fb9f06171c75f4, w as $cc7e05a45900e73f$export$4c8d1a57a761ef94, x as $cc7e05a45900e73f$export$f04a61298a47a40f, y as $cc7e05a45900e73f$export$602eac185826482c, z as $cc7e05a45900e73f$export$7c6e2c02157bb7d2, A as $cc7e05a45900e73f$export$2f60d3ec9ad468f2, B as $cc7e05a45900e73f$export$d5c6c08dc2d3ca7, C as $cc7e05a45900e73f$export$bf1aedc3039c8d63, D as motion, E as $a093c7e1ec25a057$export$2881499e37b75b9a, F as $a093c7e1ec25a057$export$be92b6f5f03c0fe9, G as $a093c7e1ec25a057$export$41fb9f06171c75f4, H as $a093c7e1ec25a057$export$602eac185826482c, I as $a093c7e1ec25a057$export$7c6e2c02157bb7d2, J as $a093c7e1ec25a057$export$21b07c8f274aebd5, K as $57acba87d6e25586$export$be92b6f5f03c0fe9, L as $57acba87d6e25586$export$d5c6c08dc2d3ca7, M as $57acba87d6e25586$export$9a4e88b92edfce6b, N as $57acba87d6e25586$export$6521433ed15a34db, O as $57acba87d6e25586$export$ac61190d9fc311a9, P as MasonryResponsive, Q as Masonry, R as $5d3850c4d0b4e6c7$export$be92b6f5f03c0fe9, S as $5d3850c4d0b4e6c7$export$602eac185826482c, T as $5d3850c4d0b4e6c7$export$c6fdb837b070b4ff, U as $5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2 } from "./vendor-90dfd914.js";
 import React__default, { createElement } from "react";
 import { SledgeContext } from "@sledge-app/core";
 import "react-dom";
@@ -13,7 +13,8 @@ const LOCAL_STORAGE_KEY = {
   INSTANT_SEARCH_AUTH_APP: "sledge-instant-search-auth-app",
   WISHLIST_SETTING: "sledge-wishlist-setting",
   PRODUCT_REVIEW_SETTING: "sledge-product-review-setting",
-  INSTANT_SEARCH_SETTING: "sledge-instant-search-setting"
+  INSTANT_SEARCH_SETTING: "sledge-instant-search-setting",
+  EXPIRY_SETTING: "sledge-expiry-setting"
 };
 const SEARCH_RESULT_URL = "/pages/search-result";
 const ELEMENT_ID = {
@@ -626,23 +627,27 @@ const Trigger = (props) => {
   const defaultTypeIcon = "outline";
   const activeColorIcon = "#F85538";
   const activeTypeIcon = "fill";
-  const [colorIcon, setColorIcon] = React__default.useState(defaultColorIcon);
-  const [typeIcon, setTypeIcon] = React__default.useState(defaultTypeIcon);
-  const [isWishlist, setIsWishlist] = React__default.useState(false);
-  const [isLoading, setIsLoading] = React__default.useState(true);
+  const wishlistCheckedFilled = typeof wishlistChecked === "boolean";
+  const isWishlisted = wishlistCheckedFilled ? wishlistChecked : false;
+  const [colorIcon, setColorIcon] = React__default.useState(isWishlisted ? activeColorIcon : defaultColorIcon);
+  const [typeIcon, setTypeIcon] = React__default.useState(isWishlisted ? activeTypeIcon : defaultTypeIcon);
+  const [isWishlist, setIsWishlist] = React__default.useState(!!wishlistChecked);
+  const [isLoading, setIsLoading] = React__default.useState(!wishlistCheckedFilled);
   const [dataSettings, setDataSettings] = React__default.useState({});
   const [handleFunctions, _setHandleFunctions] = React__default.useState({
     onAfterAddWishlist,
     onAfterRemoveWishlist
   });
   const [isRequiredLogin, setIsRequiredLogin] = React__default.useState(false);
+  const [isFirstTime, setIsFirstTime] = React__default.useState(true);
   const { is_required_login } = ((_a = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _a.global) || {};
   const { show: show_notification, location: location_notification } = ((_b = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _b.notification) || {};
   const { title_added_to_wishlist, text_added_to_wishlist, title_removed_to_wishlist, text_removed_to_wishlist } = ((_c = dataSettings == null ? void 0 : dataSettings.languages) == null ? void 0 : _c.notification) || {};
-  const handleCheckWishlist = async (init) => {
+  const handleCheckWishlist = async () => {
     let response;
-    if (typeof wishlistChecked === "boolean" && init) {
+    if (typeof wishlistChecked === "boolean" && isFirstTime) {
       response = wishlistChecked;
+      setIsFirstTime(false);
     } else {
       response = await checkWishlist(productId, productVariantId);
     }
@@ -724,7 +729,7 @@ const Trigger = (props) => {
       return;
     if (typeof window !== "undefined") {
       window.sledgeWishlistTriggerUpdate = () => {
-        handleCheckWishlist(true);
+        handleCheckWishlist();
       };
     }
     handleSettings(localStorage.getItem(LOCAL_STORAGE_KEY.WISHLIST_SETTING) || "");
@@ -735,7 +740,7 @@ const Trigger = (props) => {
   React__default.useEffect(() => {
     if (!(isRenderApp == null ? void 0 : isRenderApp.wishlist))
       return;
-    handleCheckWishlist(true);
+    handleCheckWishlist();
   }, [isRenderApp, productVariantId]);
   const isActive = (isWishlist || forceActive) && !isRequiredLogin;
   React__default.useEffect(() => {
@@ -1156,23 +1161,27 @@ const getReviewInfo = async (id) => {
   });
 };
 const Rating = (props) => {
-  var _a;
-  const { value, size = "md", params, withSkeletonLoading = true, isScrollToElementWidget = true, data: propsData } = props;
+  var _a, _b;
+  const { value, size = "md", params, withSkeletonLoading = true, isScrollToElementWidget = true, data: propsData, sledgeSettings } = props;
   const { productId } = params || {};
   const { isRenderApp, triggerRenderMultipleComponent } = React__default.useContext(SledgeContext);
-  const [isFirstLoading, setIsFirstLoading] = React__default.useState(true);
-  const [isLoading, setIsLoading] = React__default.useState(true);
-  const [sizing, setSizing] = React__default.useState({
-    width: 0,
-    height: 0
-  });
-  const [totalReview, setTotalReview] = React__default.useState(0);
-  const [averageReview, setAverageReview] = React__default.useState("0");
-  const [dataSettings, setDataSettings] = React__default.useState({});
+  const initLoading = propsData || value ? false : true;
+  const [isFirstLoading, setIsFirstLoading] = React__default.useState(initLoading);
+  const [isLoading, setIsLoading] = React__default.useState(initLoading);
+  const [sizing, setSizing] = React__default.useState(
+    propsData || value ? getSizing(size) : {
+      width: 0,
+      height: 0
+    }
+  );
+  const [totalReview, setTotalReview] = React__default.useState((propsData == null ? void 0 : propsData.review_count) || 0);
+  const [averageReview, setAverageReview] = React__default.useState(((_a = propsData == null ? void 0 : propsData.rating) == null ? void 0 : _a.average) || value || "0");
+  const [dataSettings, setDataSettings] = React__default.useState((sledgeSettings == null ? void 0 : sledgeSettings.review) || {});
+  const [isFirstTime, setIsFirstTime] = React__default.useState(true);
   const previousState = usePrevious({ productId });
-  const { fill_color, outline_color } = ((_a = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _a.rating) || {};
+  const { fill_color, outline_color } = ((_b = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _b.rating) || {};
   const handleProductRatingInfo = async (paramsProductId, isTriggerMultiComponent = false) => {
-    var _a2, _b, _c, _d, _e, _f, _g;
+    var _a2, _b2, _c, _d, _e, _f, _g;
     if (paramsProductId !== productId)
       return;
     let response;
@@ -1180,7 +1189,11 @@ const Rating = (props) => {
     let valueTotalReview = 0;
     let valueAverageReview;
     let data;
-    if (!propsData) {
+    if (propsData && isFirstTime) {
+      data = propsData;
+      run = true;
+      setIsFirstTime(false);
+    } else {
       response = await getReviewInfo(paramsProductId);
       if (!response)
         return;
@@ -1188,9 +1201,6 @@ const Rating = (props) => {
       data = response.data;
       const { code } = status;
       run = code === 200 || false;
-    } else {
-      data = propsData;
-      run = true;
     }
     valueTotalReview = (data == null ? void 0 : data.review_count) ? data.review_count : 0;
     valueAverageReview = ((_a2 = data == null ? void 0 : data.rating) == null ? void 0 : _a2.average) ? data.rating.average : 0;
@@ -1199,7 +1209,7 @@ const Rating = (props) => {
       setAverageReview(valueAverageReview);
       setIsLoading(false);
       setIsFirstLoading(false);
-      if (isTriggerMultiComponent && ((_c = (_b = triggerRenderMultipleComponent == null ? void 0 : triggerRenderMultipleComponent.productReview) == null ? void 0 : _b.rating) == null ? void 0 : _c.value) && ((_e = (_d = triggerRenderMultipleComponent == null ? void 0 : triggerRenderMultipleComponent.productReview) == null ? void 0 : _d.rating) == null ? void 0 : _e.trigger))
+      if (isTriggerMultiComponent && ((_c = (_b2 = triggerRenderMultipleComponent == null ? void 0 : triggerRenderMultipleComponent.productReview) == null ? void 0 : _b2.rating) == null ? void 0 : _c.value) && ((_e = (_d = triggerRenderMultipleComponent == null ? void 0 : triggerRenderMultipleComponent.productReview) == null ? void 0 : _d.rating) == null ? void 0 : _e.trigger))
         (_g = (_f = triggerRenderMultipleComponent == null ? void 0 : triggerRenderMultipleComponent.productReview) == null ? void 0 : _f.rating) == null ? void 0 : _g.trigger("");
     }
   };
@@ -1252,8 +1262,8 @@ const Rating = (props) => {
     handleSettings(localStorage.getItem(LOCAL_STORAGE_KEY.PRODUCT_REVIEW_SETTING) || "");
   }, [isRenderApp, productId]);
   React__default.useEffect(() => {
-    var _a2, _b, _c, _d;
-    if (!productId || productId && ((_b = (_a2 = triggerRenderMultipleComponent == null ? void 0 : triggerRenderMultipleComponent.productReview) == null ? void 0 : _a2.rating) == null ? void 0 : _b.value) !== productId)
+    var _a2, _b2, _c, _d;
+    if (!productId || productId && ((_b2 = (_a2 = triggerRenderMultipleComponent == null ? void 0 : triggerRenderMultipleComponent.productReview) == null ? void 0 : _a2.rating) == null ? void 0 : _b2.value) !== productId)
       return;
     setIsFirstLoading(true);
     handleProductRatingInfo((_d = (_c = triggerRenderMultipleComponent == null ? void 0 : triggerRenderMultipleComponent.productReview) == null ? void 0 : _c.rating) == null ? void 0 : _d.value, true);
@@ -1303,6 +1313,24 @@ const Rating = (props) => {
     ] })
   ] }) });
 };
+const getSizing = (size) => {
+  if (size === "xs") {
+    return {
+      width: 14.4,
+      height: 14.4
+    };
+  } else if (size === "sm") {
+    return {
+      width: 18,
+      height: 18
+    };
+  } else {
+    return {
+      width: 28.8,
+      height: 28.8
+    };
+  }
+};
 const WidgetHeaderAddTrigger = ({ isFirstLoading, text, dataSettings, params, onAfterAddReview }) => {
   var _a, _b, _c;
   const {
@@ -1354,7 +1382,7 @@ const WidgetHeaderAddTrigger = ({ isFirstLoading, text, dataSettings, params, on
     }
   ) });
 };
-const WidgetHeaderSort = ({ isFirstLoading, productReviewSort, dataSettings, setSelectedSort, setIsRefreshWidgetList, LinkComponent }) => {
+const WidgetHeaderSort = ({ isFirstLoading, productReviewSort, dataSettings, setSelectedSort, setIsRefreshWidgetList }) => {
   var _a, _b;
   const { default_sort, show_sorting_options } = ((_a = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _a.widget) || {};
   const [clickedSortId, setClickedSortId] = React__default.useState(default_sort || null);
@@ -1387,7 +1415,6 @@ const WidgetHeaderSort = ({ isFirstLoading, productReviewSort, dataSettings, set
       }),
       value: getSelectedSort,
       onChange: ({ value }) => handleChangeSort(value),
-      LinkComponent,
       link: "?page=1&sort=value"
     }
   ) }) });
@@ -1415,25 +1442,28 @@ const VISIBLE_ANIMATION = {
   }
 };
 const WidgetHeaderSummary = (props) => {
-  var _a, _b, _c;
-  const { params, dataSettings, summaryData } = props;
+  var _a, _b, _c, _d;
+  const { params, dataSettings, summaryData, sledgeSettings } = props;
   const { productId } = params || {};
   const { fill_color: display_summary_bar_fill_color, outline_color: display_summary_bar_outline_color } = ((_b = (_a = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _a.widget) == null ? void 0 : _b.summary_bar) || {};
   const { review_singular, review_plural } = ((_c = dataSettings == null ? void 0 : dataSettings.languages) == null ? void 0 : _c.widget) || {};
   const [isFirstLoading, setIsFirstLoading] = React__default.useState(true);
   const [isFirstLoadingSummary, setIsFirstLoadingSummary] = React__default.useState(true);
   const [isLoading, setIsLoading] = React__default.useState(true);
-  const [isRefreshRating, setIsRefreshRating] = React__default.useState(true);
+  const [isRefreshRating, setIsRefreshRating] = React__default.useState(summaryData ? false : true);
   const [isOpen, setIsOpen] = React__default.useState(false);
-  const [totalReview, setTotalReview] = React__default.useState(0);
-  const [ratingList, setRatingList] = React__default.useState({
-    5: 0,
-    4: 0,
-    3: 0,
-    2: 0,
-    1: 0
-  });
-  const [averageReview, setAverageReview] = React__default.useState("0");
+  const [totalReview, setTotalReview] = React__default.useState((summaryData == null ? void 0 : summaryData.review_count) | 0);
+  const [ratingList, setRatingList] = React__default.useState(
+    (summaryData == null ? void 0 : summaryData.rating) || {
+      5: 0,
+      4: 0,
+      3: 0,
+      2: 0,
+      1: 0
+    }
+  );
+  const [averageReview, setAverageReview] = React__default.useState(((_d = summaryData == null ? void 0 : summaryData.rating) == null ? void 0 : _d.average) || "0");
+  const [isFirstTime, setIsFirstTime] = React__default.useState(true);
   const previousState = usePrevious({ productId });
   const handleProductReviewInfo = async () => {
     var _a2;
@@ -1443,7 +1473,11 @@ const WidgetHeaderSummary = (props) => {
     let valueTotalReview = 0;
     let valueRatingList;
     let valueAverageReview;
-    if (!summaryData) {
+    if (summaryData && isFirstTime) {
+      data = summaryData;
+      run = true;
+      setIsFirstTime(false);
+    } else {
       response = await getReviewInfo(productId);
       if (!response)
         return;
@@ -1451,9 +1485,6 @@ const WidgetHeaderSummary = (props) => {
       const { code } = status;
       data = response.data;
       run = code === 200 || false;
-    } else {
-      data = summaryData;
-      run = true;
     }
     valueTotalReview = (data == null ? void 0 : data.review_count) ? data.review_count : 0;
     valueRatingList = (data == null ? void 0 : data.rating) ? {
@@ -1486,12 +1517,12 @@ const WidgetHeaderSummary = (props) => {
       setIsFirstLoading(true);
     handleProductReviewInfo();
   }, [isOpen, productId]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-product-review__widget-summary", children: isFirstLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "630px", height: "42px", color: "grey-100", rounded: "md", animationDuration: "5s" }) : isLoading ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-product-review__widget-summary", children: isFirstLoading && !summaryData ? /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "630px", height: "42px", color: "grey-100", rounded: "md", animationDuration: "5s" }) : isLoading && !summaryData ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
     Popover,
     {
       trigger: /* @__PURE__ */ jsxRuntimeExports.jsxs(motion.div, { initial: false, animate: isOpen ? "open" : "closed", className: "sledge-product-review__widget-summary-trigger", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-product-review__widget-summary-average", children: averageReview }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-product-review__widget-summary-rating", children: !isRefreshRating && /* @__PURE__ */ jsxRuntimeExports.jsx(Rating, { value: String(averageReview), size: "md", withSkeletonLoading: false, isScrollToElementWidget: false }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-product-review__widget-summary-rating", children: !isRefreshRating && /* @__PURE__ */ jsxRuntimeExports.jsx(Rating, { data: summaryData, sledgeSettings, value: String(averageReview), size: "md", withSkeletonLoading: false, isScrollToElementWidget: false }) }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-product-review__widget-summary-total", children: [
           totalReview,
           " ",
@@ -1528,7 +1559,7 @@ const WidgetHeaderSummary = (props) => {
         ] }, index);
       }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-product-review__widget-summary-dist", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-product-review__widget-summary-dist-progress", children: [5, 4, 3, 2, 1].map((item, index) => {
         return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-product-review__widget-summary-dist-progress-item", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Rating, { value: item, size: "sm", withSkeletonLoading: false, isScrollToElementWidget: false }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Rating, { data: summaryData, sledgeSettings, value: item, size: "sm", withSkeletonLoading: false, isScrollToElementWidget: false }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             Progress,
             {
@@ -1555,7 +1586,7 @@ const WidgetHeaderSummary = (props) => {
   ) });
 };
 const WidgetHeader = (props) => {
-  const [isLoading, setIsLoading] = React__default.useState(true);
+  const [isLoading, setIsLoading] = React__default.useState(!props.data);
   React__default.useEffect(() => {
     setIsLoading(false);
   }, []);
@@ -2382,18 +2413,17 @@ const SearchIconWidgetPopup = () => {
     if (!showInfo)
       return;
     setIsLoading(true);
-    const { tabs, suffix_index_product, hidden_tags, display } = data;
+    const { tabs, suffix_index_product, hidden_tags, display, show_out_of_stock } = data;
     const suggestion = ((_a2 = display == null ? void 0 : display.search) == null ? void 0 : _a2.suggestion) || {};
     let response;
     let body = {
       queries: tabs.map((tab) => {
-        var _a3;
         const { index } = tab;
         let isProductIndex = index.includes(suffix_index_product);
         let additionalFilter = [];
         if (hidden_tags == null ? void 0 : hidden_tags.length)
           additionalFilter.push(`tags NOT IN [${hidden_tags}]`);
-        if (!((_a3 = display == null ? void 0 : display.filter) == null ? void 0 : _a3.show_out_of_stock))
+        if (!show_out_of_stock)
           additionalFilter.push("variants.inventory_quantity > 0");
         return {
           indexUid: index,
@@ -2496,8 +2526,10 @@ const SearchIconWidgetPopup = () => {
   }, [showInfo]);
   React__default.useEffect(() => {
     if (Boolean(previousState && (previousState == null ? void 0 : previousState.keyword) !== keyword)) {
+      const INSTANT_SEARCH_SETTING = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY.INSTANT_SEARCH_SETTING) || "");
       const delayDebounceFn = setTimeout(() => {
-        handleMultiSearch({ tabs: allowedTabs, suffix_index_product: suffixIndexProduct, hidden_tags: hiddenTags, display: displaySettings }, true);
+        if (INSTANT_SEARCH_SETTING)
+          handleMultiSearch(INSTANT_SEARCH_SETTING, true);
       }, 500);
       return () => clearTimeout(delayDebounceFn);
     }
@@ -2671,9 +2703,9 @@ const SearchIconWidgetPopup = () => {
   ] }) });
 };
 const SearchResultWidget = (props) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s;
   const { isRenderApp, isJsVersion } = React__default.useContext(SledgeContext);
-  const { layoutType = "default", query, params, children, onAfterAddToCart, onAfterAddWishlist, onAfterRemoveWishlist, onAfterRenderProduct, data: propsData } = props;
+  const { layoutType = "default", query, params, children, onAfterAddToCart, onAfterAddWishlist, onAfterRemoveWishlist, onAfterRenderProduct, data: propsData, sledgeSettings } = props;
   const { keyword: queryKeyword = "" } = query || {};
   const { collectionId } = params || {};
   let productCardsComponent = null;
@@ -2686,24 +2718,24 @@ const SearchResultWidget = (props) => {
   });
   const searchParams = typeof document !== "undefined" ? new URLSearchParams((_a = document == null ? void 0 : document.location) == null ? void 0 : _a.search) : null;
   const [settings] = React__default.useState(typeof localStorage !== "undefined" ? JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY.INSTANT_SEARCH_SETTING) || "{}") : {});
-  const [isFirstLoading, setIsFirstLoading] = React__default.useState(true);
-  const [isLoading, setIsLoading] = React__default.useState(true);
+  const [isFirstLoading, setIsFirstLoading] = React__default.useState(!propsData);
+  const [isLoading, setIsLoading] = React__default.useState(!propsData);
   const [keyword, setKeyword] = React__default.useState(searchParams == null ? void 0 : searchParams.get(queryKeyword));
   const [clickedTabIndexId, setClickedTabIndexId] = React__default.useState(null);
   const [clickedTabIndexName, setClickedTabIndexName] = React__default.useState();
   const [resultComponent, setResultComponent] = React__default.useState(/* @__PURE__ */ jsxRuntimeExports.jsx(ResultProduct, {}));
-  const [isLoadingSetting, setIsLoadingSetting] = React__default.useState(true);
-  const [allowedSorts, setAllowedSorts] = React__default.useState([]);
-  const [allowedFilters, setAllowedFilters] = React__default.useState([]);
+  const [isLoadingSetting, setIsLoadingSetting] = React__default.useState(!propsData);
+  const [allowedSorts, setAllowedSorts] = React__default.useState(((_b = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _b.allowed_sorts) || []);
+  const [allowedFilters, setAllowedFilters] = React__default.useState(((_c = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _c.filters) || []);
   const [allowedTabs, setAllowedTabs] = React__default.useState([]);
   const [facets, setFacets] = React__default.useState([]);
-  const [suffixIndexProduct, setSuffixIndexProduct] = React__default.useState("");
+  const [suffixIndexProduct, setSuffixIndexProduct] = React__default.useState(((_d = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _d.suffix_index_product) || "");
   const [searchResultFacets, setSearchResultFacets] = React__default.useState({});
-  const [hiddenTags, setHiddenTags] = React__default.useState([]);
-  const [displaySettings, setDisplaySettings] = React__default.useState({});
-  const [colorSwatches, setColorSwatches] = React__default.useState([]);
-  const [defaultSort, setDefaultSort] = React__default.useState("");
-  const [showOutOfStock, setShowOutOfStock] = React__default.useState(false);
+  const [hiddenTags, setHiddenTags] = React__default.useState(((_e = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _e.hidden_tags) || []);
+  const [displaySettings, setDisplaySettings] = React__default.useState(((_f = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _f.display) || {});
+  const [colorSwatches, setColorSwatches] = React__default.useState(((_g = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _g.colors) || []);
+  const [defaultSort, setDefaultSort] = React__default.useState(((_h = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _h.default_sort) || "");
+  const [showOutOfStock, setShowOutOfStock] = React__default.useState((_i = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _i.show_out_of_stock);
   const [initStatesFirstTime, setInitStatesFirstTime] = React__default.useState(true);
   const searchResultContainerRef = React__default.useRef(null);
   const previousState = usePrevious({ keyword });
@@ -2713,7 +2745,7 @@ const SearchResultWidget = (props) => {
     setResultComponent(id.includes(suffixIndexProduct) ? /* @__PURE__ */ jsxRuntimeExports.jsx(ResultProduct, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(ResultCategory, {}));
   };
   const handleInitStates = async (data, type) => {
-    const { filters, tabs, suffix_index_product, hidden_tags, display, show_out_of_stock } = data;
+    const { filters, tabs, suffix_index_product, hidden_tags, show_out_of_stock } = data;
     let getTabs = layoutType === "product-filter" ? tabs.filter(({ index }) => index == null ? void 0 : index.includes(suffix_index_product)) : tabs;
     let response;
     let body = {
@@ -2811,6 +2843,7 @@ const SearchResultWidget = (props) => {
     }
   };
   const handleSettings = async (LOCAL_STORAGE_INSTANT_SEARCH_SETTING) => {
+    console.log("handleSettings running");
     setIsLoadingSetting(true);
     let response;
     let getFirstIndex;
@@ -2853,8 +2886,8 @@ const SearchResultWidget = (props) => {
     }
   }, [keyword]);
   const tabSkeleton = layoutType === "default" ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-tab-list sledge-instant-search__result-tab-list-skeleton", children: [1, 2, 3, 4, 5].map((index) => /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "122px", height: "28px", rounded: "md", color: "grey-100", animationDuration: "15s" }, index)) }) : null;
-  const filterHorizontalSkeleton = ((_b = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _b.enable_on_search) && ((_c = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _c.layout) === "horizontal" ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-horizontal-skeleton", children: [1, 2, 3, 4, 5, 6, 7].map((index) => /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "106px", height: "42px", rounded: "md", color: "grey-100", animationDuration: "13s" }, index)) }) : null;
-  const filterVerticalSkeleton = ((_d = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _d.enable_on_search) && ((_e = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _e.layout) === "vertical" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+  const filterHorizontalSkeleton = ((_j = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _j.enable_on_search) && ((_k = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _k.layout) === "horizontal" ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-horizontal-skeleton", children: [1, 2, 3, 4, 5, 6, 7].map((index) => /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "106px", height: "42px", rounded: "md", color: "grey-100", animationDuration: "13s" }, index)) }) : null;
+  const filterVerticalSkeleton = ((_l = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _l.enable_on_search) && ((_m = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _m.layout) === "vertical" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
@@ -3070,7 +3103,7 @@ const SearchResultWidget = (props) => {
     )
   ] }) : null;
   const productGridSkeleton = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    ((_f = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _f.show_total_products) && ((_g = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _g.layout) === "vertical" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ((_n = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _n.show_total_products) && ((_o = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _o.layout) === "vertical" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
       SkeletonLoading.Item,
       {
         width: "117px",
@@ -3086,7 +3119,7 @@ const SearchResultWidget = (props) => {
     /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.ProductGrid, { count: 12, type: "large" })
   ] });
   const searchAndSelectOptionSkeleton = /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-data-keyword", children: [
-    ((_h = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _h.show_total_products) && ((_i = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _i.layout) === "horizontal" ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-summary sledge-instant-search__result-data-summary-filter-horizontal", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "117px", height: "28px", color: "grey-100", rounded: "md", animationDuration: "13s" }) }) : null,
+    ((_p = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _p.show_total_products) && ((_q = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _q.layout) === "horizontal" ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-summary sledge-instant-search__result-data-summary-filter-horizontal", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "117px", height: "28px", color: "grey-100", rounded: "md", animationDuration: "13s" }) }) : null,
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-keyword-form", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       SkeletonLoading.Item,
       {
@@ -3117,7 +3150,7 @@ const SearchResultWidget = (props) => {
       tabSkeleton,
       filterHorizontalSkeleton,
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-wrapper sledge-instant-search__result-wrapper-skeleton", children: [
-        ((_j = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _j.enable_on_search) && ((_k = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _k.layout) === "vertical" ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter", children: filterVerticalSkeleton }) : null,
+        ((_r = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _r.enable_on_search) && ((_s = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _s.layout) === "vertical" ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter", children: filterVerticalSkeleton }) : null,
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-data", children: [
           searchAndSelectOptionSkeleton,
           productGridSkeleton
@@ -3159,7 +3192,7 @@ const SearchResultWidget = (props) => {
   ] });
 };
 const ResultProduct = (props) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
   const {
     keyword,
     clickedTabIndexId,
@@ -3192,8 +3225,8 @@ const ResultProduct = (props) => {
   } = props || {};
   const { keyword: queryKeyword = "" } = query || {};
   const { collectionId } = params || {};
-  const [isFirstLoading, setIsFirstLoading] = React__default.useState(true);
-  const [isLoading, setIsLoading] = React__default.useState(true);
+  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 || "");
@@ -3206,24 +3239,40 @@ const ResultProduct = (props) => {
     } : {}
   });
   const [triggerClickedFacets, setTriggerClickedFacets] = React__default.useState(false);
-  const [searchResult, setSearchResult] = React__default.useState([]);
+  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 [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(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 [valueFilterPriceChange, setValueFilterPriceChange] = React__default.useState([]);
   const [allowedFilter, setAllowedFilter] = React__default.useState([]);
   const [isFilterChanged, setIsFilterChanged] = React__default.useState(false);
-  const [summaryText, setSummaryText] = React__default.useState(null);
   const [handleSearchResultFirstTime, setHandleSearchResultFirstTime] = React__default.useState(true);
+  const summaryTextGenerator = () => {
+    var _a2;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-summary-item", children: ((_a2 = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _a2.show_total_products) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "sledge-instant-search__result-data-summary-text", children: [
+      totalSearchResult,
+      " result",
+      " ",
+      (keyword == null ? void 0 : keyword.length) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        "for ",
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "sledge-instant-search__result-data-summary-text-keyword", children: [
+          '"',
+          keyword,
+          '"'
+        ] })
+      ] }) : null
+    ] }) : null });
+  };
+  const [summaryText, setSummaryText] = React__default.useState(propsData ? summaryTextGenerator() : null);
   const previousState = usePrevious({ keyword, clickedLimitId, clickedFacets });
-  const { color: filter_title_color, font_size: filter_title_font_size, font_weight: filter_title_font_weight, text_transform: filter_title_text_transform } = ((_c = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _c.title) || {};
+  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_option_color,
     font_size: filter_option_font_size,
     font_weight: filter_option_font_weight,
     text_transform: filter_option_text_transform
-  } = ((_d = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _d.option) || {};
+  } = ((_j = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _j.option) || {};
   const {
     text_color: filter_button_text_color,
     border_color: filter_button_border_color,
@@ -3236,7 +3285,7 @@ const ResultProduct = (props) => {
     font_size: filter_button_font_size,
     font_weight: filter_button_font_weight,
     text_transform: filter_button_text_transform
-  } = ((_e = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _e.button) || {};
+  } = ((_k = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _k.button) || {};
   const filter_title_style = {
     ...filter_title_color && { color: filter_title_color },
     ...filter_title_font_size && { fontSize: filter_title_font_size },
@@ -3673,9 +3722,9 @@ const ResultProduct = (props) => {
   });
   const paginationComponent = /* @__PURE__ */ jsxRuntimeExports.jsx(Pagination, { currentPage, totalPage, totalResult: totalSearchResult, onChange: (page) => handlePageChange(page) });
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    ((_f = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _f.enable_on_search) && ((_g = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _g.layout) === "horizontal" ? /* @__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 }) : filterHorizontalComponents.every((currentValue) => !currentValue) ? null : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-horizontal-wrapper", children: [
+    ((_l = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _l.enable_on_search) && ((_m = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _m.layout) === "horizontal" ? /* @__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 }) : filterHorizontalComponents.every((currentValue) => !currentValue) ? null : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-horizontal-wrapper", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-horizontal", children: filterHorizontalComponents }),
-      Boolean((dataClickedFacets == null ? void 0 : dataClickedFacets.length) && ((_h = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _h.show_refine_by_block)) ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: Boolean(dataClickedFacets.every((currentValue) => !currentValue)) ? null : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-horizontal", children: [
+      Boolean((dataClickedFacets == null ? void 0 : dataClickedFacets.length) && ((_n = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _n.show_refine_by_block)) ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: Boolean(dataClickedFacets.every((currentValue) => !currentValue)) ? null : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-horizontal", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "div",
           {
@@ -3695,9 +3744,9 @@ const ResultProduct = (props) => {
         })
       ] }) }) : null
     ] }) }) }) : null,
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-wrapper", "data-filter-layout": (_i = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _i.layout, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-      ((_j = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _j.enable_on_search) && ((_k = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _k.layout) === "vertical" ? isFirstLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter", children: filterVerticalSkeleton }) : filterVerticalComponents.every((currentValue) => !currentValue) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter", children: isLoadingSetting ? filterVerticalSkeleton : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        Boolean((dataClickedFacets == null ? void 0 : dataClickedFacets.length) && ((_l = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _l.show_refine_by_block)) ? Boolean(dataClickedFacets.every((currentValue) => !currentValue)) ? null : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item", children: [
+    /* @__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: [
+      ((_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" ? isFirstLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter", children: filterVerticalSkeleton }) : filterVerticalComponents.every((currentValue) => !currentValue) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter", 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)) ? Boolean(dataClickedFacets.every((currentValue) => !currentValue)) ? null : /* @__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: "Filter" }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-instant-search__result-filter-item-title-refine-clear", onClick: handleFilterReset, children: "Clear All" })
@@ -3716,7 +3765,7 @@ const ResultProduct = (props) => {
       ] }) }) : null,
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-data", children: [
         isFirstLoading ? searchAndSelectOptionSkeleton : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-data-keyword", children: [
-          ((_m = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _m.layout) === "horizontal" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-summary sledge-instant-search__result-data-summary-filter-horizontal", children: summaryText }),
+          ((_s = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _s.layout) === "horizontal" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-summary sledge-instant-search__result-data-summary-filter-horizontal", children: summaryText }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             SearchInputField,
             {
@@ -3758,7 +3807,7 @@ const ResultProduct = (props) => {
             ] }),
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-data-summary-select-field-item", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Limit:" }),
-              ((_n = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _n.allowed_limit) && Boolean((_p = (_o = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _o.allowed_limit) == null ? void 0 : _p.length) && /* @__PURE__ */ jsxRuntimeExports.jsx(
+              ((_t = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _t.allowed_limit) && Boolean((_v = (_u = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _u.allowed_limit) == null ? void 0 : _v.length) && /* @__PURE__ */ jsxRuntimeExports.jsx(
                 SelectField,
                 {
                   align: "end",
@@ -3779,7 +3828,7 @@ const ResultProduct = (props) => {
           productGridSkeleton,
           (searchResult == null ? void 0 : searchResult.length) ? paginationComponent : null
         ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-          ((_q = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _q.layout) === "vertical" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-summary sledge-instant-search__result-data-summary-filter-vertical", children: summaryText }),
+          ((_w = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _w.layout) === "vertical" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-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,
@@ -3794,9 +3843,9 @@ const ResultProduct = (props) => {
                   };
                 }),
                 setting: {
-                  show_vendor: (_r = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _r.show_vendor,
-                  show_sku: (_s = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _s.show_sku,
-                  show_price: (_t = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _t.show_price
+                  show_vendor: (_x = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _x.show_vendor,
+                  show_sku: (_y = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _y.show_sku,
+                  show_price: (_z = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _z.show_price
                 },
                 isComponentJsVersion: isJsVersion,
                 cards: productCardsComponent,
@@ -3986,18 +4035,17 @@ const SearchWidget = (props) => {
     if (!keyword.length)
       return;
     setIsLoading(true);
-    const { tabs, suffix_index_product, hidden_tags, display } = data;
+    const { tabs, suffix_index_product, hidden_tags, display, show_out_of_stock } = data;
     const suggestion = ((_a2 = display == null ? void 0 : display.search) == null ? void 0 : _a2.suggestion) || {};
     let response;
     let body = {
       queries: tabs.map((tab) => {
-        var _a3;
         const { index } = tab;
         let isProductIndex = index.includes(suffix_index_product);
         let additionalFilter = [];
         if (hidden_tags == null ? void 0 : hidden_tags.length)
           additionalFilter.push(`tags NOT IN [${hidden_tags}]`);
-        if (!((_a3 = display == null ? void 0 : display.filter) == null ? void 0 : _a3.show_out_of_stock))
+        if (!show_out_of_stock)
           additionalFilter.push("variants.inventory_quantity > 0");
         return {
           indexUid: index,
@@ -4061,8 +4109,10 @@ const SearchWidget = (props) => {
   }, [keyword]);
   React__default.useEffect(() => {
     if (Boolean(previousState && (previousState == null ? void 0 : previousState.keyword) !== keyword)) {
+      const INSTANT_SEARCH_SETTING = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY.INSTANT_SEARCH_SETTING) || "");
       const delayDebounceFn = setTimeout(() => {
-        handleMultiSearch({ tabs: allowedTabs, suffix_index_product: suffixIndexProduct, hidden_tags: hiddenTags, display: displaySettings }, true);
+        if (INSTANT_SEARCH_SETTING)
+          handleMultiSearch(INSTANT_SEARCH_SETTING, true);
       }, 500);
       return () => clearTimeout(delayDebounceFn);
     }