@sledge-app/react-instant-search 2.0.1 → 2.0.3

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

@@ -1094,7 +1094,7 @@ const Pagination = (props) => {
   };
   React__default.useEffect(() => {
     handlePageInfo();
-  }, []);
+  }, [pageInfoProp]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__pagination", "data-pagination-type": type, children: renderPaginationLayout() });
 };
 const RadioGroup$1 = "";
@@ -1737,14 +1737,18 @@ const addToCartTrigger$2 = async (data) => {
     return;
   });
 };
-const wishlistInfo = async ({ callback, wishlistPreviewSettings }) => {
+const wishlistInfo = async ({
+  callback,
+  wishlistPreviewSettings,
+  generalPreviewSettings
+}) => {
   var _a, _b;
   let response;
   let run = false;
   let valueTotalWishlist;
   let valueProxyUrl;
   let queryParam = {
-    ...wishlistPreviewSettings ? {
+    ...wishlistPreviewSettings && (generalPreviewSettings == null ? void 0 : generalPreviewSettings.use_dummy_data) ? {
       is_preview: true
     } : {}
   };
@@ -1818,10 +1822,9 @@ const BadgeCounter = (props) => {
   const contentTotalWishlist = isFirstLoading ? defaultTotalWishlist : isLoading || isRequiredLogin ? 0 : `${isMaximizeTotalWishlist ? "99+" : totalWishlist}` || 0;
   return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { "data-wishlist-counter": contentTotalWishlist, children: contentTotalWishlist });
 };
-const WidgetHeaderClearTrigger = ({ buttonText, shareId, dataSettings, isFirstLoading }) => {
-  var _a, _b, _c, _d, _e;
+const WidgetHeaderClearTrigger = ({ buttonText, shareId, dataSettings, isFirstLoading, previewSettings }) => {
+  var _a, _b, _c, _d;
   const { sledgeAnonymId } = React__default.useContext(SledgeContext);
-  const { is_required_login } = ((_a = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _a.global) || {};
   const {
     text_color: display_button_clear_all_text_color,
     border_color: display_button_clear_all_border_color,
@@ -1834,9 +1837,9 @@ const WidgetHeaderClearTrigger = ({ buttonText, shareId, dataSettings, isFirstLo
     font_size: display_button_clear_all_font_size,
     font_weight: display_button_clear_all_font_weight,
     text_transform: display_button_clear_all_text_transform
-  } = ((_c = (_b = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _b.widget) == null ? void 0 : _c.button_clear_all) || {};
-  const { title_confirm_clear_all_wishlist, text_confirm_clear_all_wishlist, button_submit_confirm_clear_all_wishlist, button_cancel_confirm_clear_all_wishlist } = ((_d = dataSettings == null ? void 0 : dataSettings.languages) == null ? void 0 : _d.popup) || {};
-  const { button_clear_all } = ((_e = dataSettings == null ? void 0 : dataSettings.languages) == null ? void 0 : _e.widget) || {};
+  } = ((_b = (_a = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _a.widget) == null ? void 0 : _b.button_clear_all) || {};
+  const { title_confirm_clear_all_wishlist, text_confirm_clear_all_wishlist, button_submit_confirm_clear_all_wishlist, button_cancel_confirm_clear_all_wishlist } = ((_c = dataSettings == null ? void 0 : dataSettings.languages) == null ? void 0 : _c.popup) || {};
+  const { button_clear_all } = ((_d = dataSettings == null ? void 0 : dataSettings.languages) == null ? void 0 : _d.widget) || {};
   const [isRequiredLogin, setIsRequiredLogin] = React__default.useState(false);
   const display_button_clear_all_style = {
     ...display_button_clear_all_text_color && { color: display_button_clear_all_text_color },
@@ -1852,25 +1855,41 @@ const WidgetHeaderClearTrigger = ({ buttonText, shareId, dataSettings, isFirstLo
     ...display_button_clear_all_text_transform && { textTransform: display_button_clear_all_text_transform }
   };
   React__default.useEffect(() => {
+    var _a2;
+    const { is_required_login } = ((_a2 = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _a2.global) || {};
     setIsRequiredLogin(sledgeAnonymId && is_required_login);
-  }, [sledgeAnonymId]);
-  const handleClick = () => {
+  }, [sledgeAnonymId, dataSettings]);
+  const handleClick = (props) => {
     if (typeof window !== "undefined" && window.sledgeConfirmationPopup)
       window.sledgeConfirmationPopup({
         title: title_confirm_clear_all_wishlist,
         message: text_confirm_clear_all_wishlist,
         textSubmit: button_submit_confirm_clear_all_wishlist,
+        textCancel: button_cancel_confirm_clear_all_wishlist,
         buttonSubmitType: "danger",
-        onSubmit: window.sledgeWishlistWidgetClearList || {}
+        onSubmit: window.sledgeWishlistWidgetClearList || {},
+        ...props || {}
       });
   };
+  useEffectOnChange(() => {
+    handleClick({ isPreviewSettings: true });
+  }, [previewSettings]);
   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 sledge-wishlist__widget-header-clear-all-trigger", 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, triggerBadge }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
+const WidgetHeaderShareTrigger = ({
+  wishlistData,
+  buttonText,
+  showShareTrigger,
+  shareLink,
+  shareId,
+  dataSettings,
+  isFirstLoading,
+  triggerBadge,
+  previewSettings
+}) => {
+  var _a, _b, _c, _d, _e, _f, _g;
   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 {
     text_color: display_button_share_text_color,
     border_color: display_button_share_border_color,
@@ -1883,11 +1902,11 @@ const WidgetHeaderShareTrigger = ({ wishlistData, buttonText, showShareTrigger,
     font_size: display_button_share_font_size,
     font_weight: display_button_share_font_weight,
     text_transform: display_button_share_text_transform
-  } = ((_d = (_c = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _c.widget) == null ? void 0 : _d.button_share) || {};
-  const { title_share_wishlist, title_confirm_add_to_your_wishlist, text_confirm_add_to_your_wishlist, button_confirm_add_to_your_wishlist } = ((_e = dataSettings == null ? void 0 : dataSettings.languages) == null ? void 0 : _e.popup) || {};
-  const { button_share, button_add_to_your_wishlist } = ((_f = dataSettings == null ? void 0 : dataSettings.languages) == null ? void 0 : _f.widget) || {};
-  const { show: show_notification, location: location_notification } = ((_g = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _g.notification) || {};
-  const { title_added_all_to_wishlist, text_added_all_to_wishlist, title_fail_add_to_wishlist, text_fail_add_to_wishlist } = ((_h = dataSettings == null ? void 0 : dataSettings.languages) == null ? void 0 : _h.notification) || {};
+  } = ((_c = (_b = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _b.widget) == null ? void 0 : _c.button_share) || {};
+  const { title_share_wishlist, title_confirm_add_to_your_wishlist, text_confirm_add_to_your_wishlist, button_confirm_add_to_your_wishlist } = ((_d = dataSettings == null ? void 0 : dataSettings.languages) == null ? void 0 : _d.popup) || {};
+  const { button_share, button_add_to_your_wishlist } = ((_e = dataSettings == null ? void 0 : dataSettings.languages) == null ? void 0 : _e.widget) || {};
+  const { show: show_notification, location: location_notification } = ((_f = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _f.notification) || {};
+  const { title_added_all_to_wishlist, text_added_all_to_wishlist, title_fail_add_to_wishlist, text_fail_add_to_wishlist } = ((_g = dataSettings == null ? void 0 : dataSettings.languages) == null ? void 0 : _g.notification) || {};
   const [isRequiredLogin, setIsRequiredLogin] = React__default.useState(false);
   const display_button_share_style = {
     ...display_button_share_text_color && { color: display_button_share_text_color },
@@ -1985,7 +2004,7 @@ const WidgetHeaderShareTrigger = ({ wishlistData, buttonText, showShareTrigger,
       });
     }
   };
-  const handleClick = async () => {
+  const handleClick = async (props) => {
     let getMessage = text_confirm_add_to_your_wishlist;
     if (getMessage)
       getMessage = getMessage.replaceAll(OBJECT_DATA_STRING_KEY.TOTAL_WISHLIST, wishlistData.length);
@@ -1995,7 +2014,8 @@ const WidgetHeaderShareTrigger = ({ wishlistData, buttonText, showShareTrigger,
         message: getMessage || `This action cannot be undone. This will adding <strong>${wishlistData.length}</strong> item to your wishlist page.`,
         textSubmit: button_confirm_add_to_your_wishlist || "Add to your wishlist",
         buttonSubmitType: "info",
-        onSubmit: handleBulkAddWishlist || {}
+        onSubmit: handleBulkAddWishlist || {},
+        ...props || {}
       });
     } else {
       if (typeof window !== "undefined" && window.sledgeInfoPopup) {
@@ -2006,14 +2026,20 @@ const WidgetHeaderShareTrigger = ({ wishlistData, buttonText, showShareTrigger,
                                     ${clipboardIcon}
                                 </div>
                                 <div class="sledge-wishlist__widget-box-copy-content">${shareLink}</div>
-                            </div>` : ""
+                            </div>` : "",
+          ...props || {}
         });
       }
     }
   };
   React__default.useEffect(() => {
+    var _a2;
+    const { is_required_login } = ((_a2 = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _a2.global) || {};
     setIsRequiredLogin(sledgeAnonymId && is_required_login);
-  }, [sledgeAnonymId]);
+  }, [sledgeAnonymId, dataSettings]);
+  useEffectOnChange(() => {
+    handleClick({ isPreviewSettings: true });
+  }, [previewSettings]);
   watchElement({
     selector: ".sledge-wishlist__widget-box-copy",
     init: handleCopyShareLink
@@ -2037,10 +2063,9 @@ const WidgetHeaderShareTrigger = ({ wishlistData, buttonText, showShareTrigger,
   ) }) }) }) });
 };
 const WidgetHeaderSearchForm = ({ setIsLoading, setKeyword, keyword, placeholder, dataSettings }) => {
-  var _a, _b;
+  var _a;
   const { sledgeAnonymId } = React__default.useContext(SledgeContext);
-  const { is_required_login } = ((_a = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _a.global) || {};
-  const { search_form_placeholder } = ((_b = dataSettings == null ? void 0 : dataSettings.languages) == null ? void 0 : _b.widget) || {};
+  const { search_form_placeholder } = ((_a = dataSettings == null ? void 0 : dataSettings.languages) == null ? void 0 : _a.widget) || {};
   const [isRequiredLogin, setIsRequiredLogin] = React__default.useState(false);
   const searchFieldRef = React__default.useRef(null);
   const handleResetField = () => {
@@ -2053,8 +2078,10 @@ const WidgetHeaderSearchForm = ({ setIsLoading, setKeyword, keyword, placeholder
     setKeyword && setKeyword(value);
   };
   React__default.useEffect(() => {
+    var _a2;
+    const { is_required_login } = ((_a2 = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _a2.global) || {};
     setIsRequiredLogin(sledgeAnonymId && is_required_login);
-  }, [sledgeAnonymId]);
+  }, [sledgeAnonymId, dataSettings]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !isRequiredLogin && /* @__PURE__ */ jsxRuntimeExports.jsx(
     SearchInputField,
     {
@@ -2088,17 +2115,17 @@ const WidgetHeaderTitle = ({ text, dataSettings }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-wishlist__widget-header-item", children: /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { style: display_header_title_style, children: text ? text : language_header_title || "My Wishlist" }) });
 };
 const WidgetHeaderLimit = ({ limitOptions, selectedLimit, setSelectedLimit, setIsRefreshWidgetList, dataSettings }) => {
-  var _a;
   const { sledgeAnonymId } = React__default.useContext(SledgeContext);
-  const { is_required_login } = ((_a = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _a.global) || {};
   const [isRequiredLogin, setIsRequiredLogin] = React__default.useState(false);
   const handleChangeLimit = (value) => {
     setSelectedLimit && setSelectedLimit(value);
     setIsRefreshWidgetList && setIsRefreshWidgetList(true);
   };
   React__default.useEffect(() => {
+    var _a;
+    const { is_required_login } = ((_a = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _a.global) || {};
     setIsRequiredLogin(sledgeAnonymId && is_required_login);
-  }, [sledgeAnonymId]);
+  }, [sledgeAnonymId, dataSettings]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !isRequiredLogin ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: limitOptions && Boolean(limitOptions == null ? void 0 : limitOptions.length) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-wishlist__widget-header-item sledge-wishlist__widget-header-limit-option", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     SelectField,
     {
@@ -2115,9 +2142,7 @@ const WidgetHeaderLimit = ({ limitOptions, selectedLimit, setSelectedLimit, setI
   ) }) }) : null });
 };
 const WidgetHeaderSort$1 = ({ wishlistSort, selectedSort, setSelectedSort, setIsRefreshWidgetList, dataSettings, generalDataSettings }) => {
-  var _a;
   const { sledgeAnonymId } = React__default.useContext(SledgeContext);
-  const { is_required_login } = ((_a = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _a.global) || {};
   const { sort_placeholder } = (generalDataSettings == null ? void 0 : generalDataSettings.languages) || {};
   const [isRequiredLogin, setIsRequiredLogin] = React__default.useState(false);
   const handleChangeSort = (value) => {
@@ -2125,8 +2150,10 @@ const WidgetHeaderSort$1 = ({ wishlistSort, selectedSort, setSelectedSort, setIs
     setIsRefreshWidgetList && setIsRefreshWidgetList(true);
   };
   React__default.useEffect(() => {
+    var _a;
+    const { is_required_login } = ((_a = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _a.global) || {};
     setIsRequiredLogin(sledgeAnonymId && is_required_login);
-  }, [sledgeAnonymId]);
+  }, [sledgeAnonymId, dataSettings]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !isRequiredLogin ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: wishlistSort && Boolean(wishlistSort == null ? void 0 : wishlistSort.length) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-wishlist__widget-header-item sledge-wishlist__widget-header-sort-option", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     SelectField,
     {
@@ -2200,26 +2227,26 @@ WidgetHeader$1.Sort = WidgetHeaderSort$1;
 WidgetHeader$1.Limit = WidgetHeaderLimit;
 const defaultGridType = "large";
 const WidgetList = (props) => {
-  var _a;
   const { sledgeAnonymId } = React__default.useContext(SledgeContext);
   const { isLoading, wishlistData, dataSettings, gridType = defaultGridType, isFlyout } = props || {};
-  const { is_required_login } = ((_a = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _a.global) || {};
   const [isRequiredLogin, setIsRequiredLogin] = React__default.useState(false);
   React__default.useEffect(() => {
+    var _a;
+    const { is_required_login } = ((_a = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _a.global) || {};
     setIsRequiredLogin(sledgeAnonymId && is_required_login);
-  }, [sledgeAnonymId]);
+  }, [sledgeAnonymId, dataSettings]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.ProductGrid, { count: 8, type: gridType, isFlyout }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-wishlist__widget-product-wrapper", children: !(wishlistData == null ? void 0 : wishlistData.length) || isRequiredLogin ? /* @__PURE__ */ jsxRuntimeExports.jsx(WidgetListEmpty, { ...props, isRequiredLogin }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ProductWrapper, { ...props }) }) });
 };
 const WidgetListEmpty = (props) => {
-  var _a;
   const { onSearch, keyword, dataSettings, isRequiredLogin } = props || {};
-  const { title_no_result, text_no_result, title_search_no_result, text_search_no_result, login_button, continue_shopping, alert, alert_login } = ((_a = dataSettings == null ? void 0 : dataSettings.languages) == null ? void 0 : _a.widget) || {};
   const [title, setTitle] = React__default.useState("");
   const [description, setDescription] = React__default.useState("");
   const [showButton, setShowButton] = React__default.useState(false);
   const [textButton, setTextButton] = React__default.useState("");
   const [urlButton, setUrlButton] = React__default.useState("");
   React__default.useEffect(() => {
+    var _a;
+    const { title_no_result, text_no_result, title_search_no_result, text_search_no_result, login_button, continue_shopping, alert, alert_login } = ((_a = dataSettings == null ? void 0 : dataSettings.languages) == null ? void 0 : _a.widget) || {};
     if (isRequiredLogin) {
       setTitle(alert_login || "Login required!");
       setDescription(alert || "Please login to save your wishlist across devices.");
@@ -2235,7 +2262,7 @@ const WidgetListEmpty = (props) => {
         setUrlButton("/");
       }
     }
-  }, [onSearch, dataSettings]);
+  }, [onSearch, isRequiredLogin, dataSettings]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-wishlist__widget-product-empty", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-wishlist__widget-product-empty-icon", children: /* @__PURE__ */ jsxRuntimeExports.jsx(HeartIcon, { width: 32, height: 32, type: "outline", color: "#000000" }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-wishlist__widget-product-empty-title", dangerouslySetInnerHTML: { __html: title } }),
@@ -2492,7 +2519,7 @@ const WidgetRoot = (props) => {
     }
   };
   const handleSetWishlistData = async (isLoadMore = false, init = false) => {
-    var _a2, _b2, _c2, _d;
+    var _a2, _b2, _c2;
     const searchParams = new URLSearchParams(document.location.search);
     const getShareId = (params == null ? void 0 : params.shareId) ? params.shareId : (searchParams == null ? void 0 : searchParams.get(queryShareId)) || "";
     setIsLoading(isRefreshWidgetList ? true : !isLoadMore);
@@ -2503,7 +2530,6 @@ const WidgetRoot = (props) => {
     let response;
     let run = false;
     let valueWishlistData;
-    let valueWishlistSort;
     let valueTotalPage = 0;
     let queryParam = {
       page: isLoadMore ? currentPage : 1,
@@ -2512,7 +2538,7 @@ const WidgetRoot = (props) => {
       keyword,
       shareId: getShareId,
       locale: isJsVersion ? selectedLocaleJs() : locale,
-      ...wishlistPreviewSettings ? {
+      ...wishlistPreviewSettings && (generalPreviewSettings == null ? void 0 : generalPreviewSettings.use_dummy_data) ? {
         is_preview: true
       } : {}
     };
@@ -2522,11 +2548,9 @@ const WidgetRoot = (props) => {
       response = await getWishlist(queryParam);
     run = ((_a2 = response == null ? void 0 : response.status) == null ? void 0 : _a2.code) === 200 || false;
     valueWishlistData = !((_b2 = response.data) == null ? void 0 : _b2.length) ? [] : (prevState) => (wishlistData == null ? void 0 : wishlistData.length) && isLoadMore ? [...prevState, ...response.data] : response.data;
-    valueWishlistSort = !((_c2 = response.sorts) == null ? void 0 : _c2.length) ? [] : response.sorts;
-    valueTotalPage = ((_d = response == null ? void 0 : response.page) == null ? void 0 : _d.total_page) || 1;
+    valueTotalPage = ((_c2 = response == null ? void 0 : response.page) == null ? void 0 : _c2.total_page) || 1;
     if (run) {
       setWishlistData(valueWishlistData);
-      setWishlistSort(valueWishlistSort);
       setTotalPage(valueTotalPage);
       setIsLoading(false);
       setIsRefreshWidgetList(false);
@@ -2544,7 +2568,7 @@ const WidgetRoot = (props) => {
     let valueShareLink;
     let valueShareId;
     let queryParam = {
-      ...wishlistPreviewSettings ? {
+      ...wishlistPreviewSettings && (generalPreviewSettings == null ? void 0 : generalPreviewSettings.use_dummy_data) ? {
         is_preview: true
       } : {}
     };
@@ -2573,7 +2597,9 @@ const WidgetRoot = (props) => {
     responseGeneral = generalPreviewSettings || JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY.GENERAL_SETTING) || null);
     if (!response)
       return;
+    const { sorts } = response == null ? void 0 : response.display;
     setDataSettings(response);
+    setWishlistSort(sorts);
     if (responseGeneral)
       setGeneralDataSettings(responseGeneral);
   };
@@ -2745,7 +2771,8 @@ const Badge = (props) => {
         setData(valueData);
         localStorage == null ? void 0 : localStorage.setItem(LOCAL_STORAGE_KEY.WISHLIST_BADGE_COUNTER, valueTotalWishlist);
       },
-      wishlistPreviewSettings
+      wishlistPreviewSettings,
+      generalPreviewSettings
     });
   };
   const handleSettings = async (LOCAL_STORAGE_WISHLIST_SETTING) => {
@@ -3183,7 +3210,7 @@ const Trigger = (props) => {
   const handleCheckWishlist = async () => {
     let response;
     let queryParam = {
-      ...wishlistPreviewSettings ? {
+      ...wishlistPreviewSettings && (generalPreviewSettings == null ? void 0 : generalPreviewSettings.use_dummy_data) ? {
         is_preview: true
       } : {}
     };
@@ -3218,20 +3245,11 @@ const Trigger = (props) => {
       handleConfirmationPopup();
       return;
     }
-    let resAddWishlist = await addWishlist(
-      wishlistPreviewSettings && !(params == null ? void 0 : params.productId) ? {
-        productId: "1234567890",
-        productVariantId: "",
-        productName: "",
-        productVendor: "",
-        productSku: "",
-        productVariantName: "",
-        productLink: "",
-        productImage: "",
-        productCurrency: "",
-        productPrice: ""
-      } : params
-    );
+    let resAddWishlist = wishlistPreviewSettings ? {
+      status: {
+        code: 200
+      }
+    } : await addWishlist(params);
     const { status, data } = resAddWishlist || {};
     const { code } = status || {};
     const { product } = data || {};
@@ -3259,7 +3277,8 @@ const Trigger = (props) => {
         if (window.sledgeWishlistButtonDetailUpdate)
           window.sledgeWishlistButtonDetailUpdate();
       }
-      handleCheckWishlist();
+      if (!wishlistPreviewSettings)
+        handleCheckWishlist();
       if (!isWishlist) {
         handleFunctions.onAfterAddWishlist && handleFunctions.onAfterAddWishlist("success");
       } else {
@@ -3434,7 +3453,7 @@ const Rating = (props) => {
   const { isRenderApp, triggerRenderMultipleComponent } = React__default.useContext(SledgeContext);
   const { productReview: isRenderAppProductReview } = isRenderApp || {};
   const { value: valueRenderProductReviewRating, trigger: triggerRenderProductReviewRating } = ((_a = triggerRenderMultipleComponent == null ? void 0 : triggerRenderMultipleComponent.productReview) == null ? void 0 : _a.rating) || {};
-  const { productReviewPreviewSettings, previewSettings } = usePreviewSettings({
+  const { generalPreviewSettings, productReviewPreviewSettings, previewSettings } = usePreviewSettings({
     defaultSettings: previewSettingsProp,
     nestedProperty: "sledge.productReview.rating.preview"
   });
@@ -3472,7 +3491,7 @@ const Rating = (props) => {
     let valueTotalReview = 0;
     let valueAverageReview;
     let queryParam = {
-      ...productReviewPreviewSettings ? {
+      ...productReviewPreviewSettings && (generalPreviewSettings == null ? void 0 : generalPreviewSettings.use_dummy_data) ? {
         is_preview: true
       } : {}
     };
@@ -3737,7 +3756,7 @@ const WidgetHeaderSummary = (props) => {
   var _a, _b, _c, _d, _e;
   const { isRenderApp } = React__default.useContext(SledgeContext);
   const { productReview: isRenderAppProductReview } = isRenderApp || {};
-  const { params, dataSettings, summaryData, sledgeSettings, productReviewPreviewSettings } = props;
+  const { params, dataSettings, summaryData, sledgeSettings, generalPreviewSettings, productReviewPreviewSettings } = 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 { fill_color = "#23BC45", outline_color = "#8D9196" } = ((_c = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _c.rating) || {};
@@ -3769,7 +3788,7 @@ const WidgetHeaderSummary = (props) => {
     let valueRatingList;
     let valueAverageReview;
     let queryParam = {
-      ...productReviewPreviewSettings ? {
+      ...productReviewPreviewSettings && (generalPreviewSettings == null ? void 0 : generalPreviewSettings.use_dummy_data) ? {
         is_preview: true
       } : {}
     };
@@ -4651,7 +4670,7 @@ const ProductGrid = React__default.memo((props) => {
       setClickedAddToCartId(null);
       onAfterAddToCart && onAfterAddToCart("success");
       if (redirect_add_to_cart) {
-        window.location.href = "/cart";
+        window.location.href = (generalDataSettings == null ? void 0 : generalDataSettings.cart_url) || "/cart";
       } else {
         window.sledgeToastNotification({
           title: "Cart added",
@@ -6766,7 +6785,7 @@ const FilterSelected$2 = (props) => {
     handleFilterChange,
     allowedFilterSlider
   } = props;
-  const { language_filter, language_clear_filter } = languageSettings || {};
+  const { filter: language_filter, clear_filter: language_clear_filter } = languageSettings || {};
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: Boolean((items == null ? void 0 : items.length) && ((_a = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _a.show_refine_by_block)) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item-title-refine", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { className: "sledge-instant-search__result-filter-item-title-refine-heading", children: language_filter || "Filter" }),
@@ -7070,6 +7089,7 @@ const FilterItem = (props) => {
     filter,
     filterSettings,
     indexFilter,
+    filterTitleStyle,
     deviceType,
     clickedOpenFilterHorizontalId,
     setClickedOpenFilterHorizontalId,
@@ -7107,6 +7127,7 @@ const FilterItem = (props) => {
             }
           },
           className: isHorizontalGroup ? "sledge-instant-search__result-filter-trigger-horizontal-group" : `${isLastIndex ? (allowedFilter == null ? void 0 : allowedFilter.length) % 2 ? "sledge-instant-search__result-filter-trigger-odd" : "sledge-instant-search__result-filter-trigger-even" : ""}`,
+          style: filterTitleStyle,
           children: [
             label,
             /* @__PURE__ */ jsxRuntimeExports.jsx(motion.div, { initial: "closed", animate: isOpenFilterHorizontal ? "open" : "closed", variants: ROTATE_FILTER_ARROW_ANIMATION, className: "sort-trigger-icon", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronArrowDownIcon, { width: 20, height: 20, color: "#000000" }) })
@@ -7147,7 +7168,7 @@ const FilterSelected$1 = (props) => {
     handleFilterChange,
     allowedFilterSlider
   } = props;
-  const { language_clear_filter } = languageSettings || {};
+  const { clear_filter: language_clear_filter } = languageSettings || {};
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: Boolean((items == null ? void 0 : items.length) && ((_a = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _a.show_refine_by_block)) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-horizontal", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-horizontal-refine-item sledge-instant-search__result-filter-horizontal-refine-item-clear-all", onClick: handleFilterReset, children: language_clear_filter || "Clear All" }),
     items.map((item, index) => {
@@ -7177,6 +7198,7 @@ const FilterHorizontal = (props) => {
   const {
     items = [],
     filterSettings = null,
+    filterTitleStyle = {},
     deviceType = "desktop",
     clickedOpenFilterHorizontalId,
     setClickedOpenFilterHorizontalId,
@@ -7216,6 +7238,7 @@ const FilterHorizontal = (props) => {
               filter,
               filterSettings,
               indexFilter,
+              filterTitleStyle,
               deviceType,
               clickedOpenFilterHorizontalId,
               setClickedOpenFilterHorizontalId,
@@ -7264,7 +7287,7 @@ const FilterSelected = (props) => {
     handleFilterChange,
     allowedFilterSlider
   } = props;
-  const { language_clear_filter } = languageSettings || {};
+  const { clear_filter: language_clear_filter } = languageSettings || {};
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: Boolean((items == null ? void 0 : items.length) && ((_a = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _a.show_refine_by_block)) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-horizontal sledge-instant-search__result-filter-active", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-horizontal-refine-item sledge-instant-search__result-filter-horizontal-refine-item-clear-all", onClick: handleFilterReset, children: language_clear_filter || "Clear All" }),
     items.map((item, index) => {
@@ -8982,11 +9005,13 @@ const SearchResultWidget = (props) => {
     setUsePublishedFilter(use_published_filter);
     setShowOutOfStock(show_out_of_stock);
     setTabs(tabs2);
-    getFirstIndex = (_b2 = tabs2 == null ? void 0 : tabs2.find) == null ? void 0 : _b2.call(tabs2, ({ index }) => index.includes(index_product));
-    if (Object.keys(getFirstIndex).length) {
-      setClickedTabIndexId(getFirstIndex.index);
-      setClickedTabIndexName(getFirstIndex.name);
-      setClickedTabIndexType(getFirstIndex.type);
+    if (!clickedTabIndexId) {
+      getFirstIndex = (_b2 = tabs2 == null ? void 0 : tabs2.find) == null ? void 0 : _b2.call(tabs2, ({ index }) => index.includes(index_product));
+      if (Object.keys(getFirstIndex).length) {
+        setClickedTabIndexId(getFirstIndex.index);
+        setClickedTabIndexName(getFirstIndex.name);
+        setClickedTabIndexType(getFirstIndex.type);
+      }
     }
     setIsLoadingSetting(false);
     if (isPreviewSettings) {
@@ -9005,16 +9030,14 @@ const SearchResultWidget = (props) => {
         }
       }
       setAllowedTabs(
-        (_g2 = (_f2 = (_e2 = allowedTabs == null ? void 0 : allowedTabs.map) == null ? void 0 : _e2.call(allowedTabs, (allowedTab) => {
+        (_g2 = (_f2 = (_e2 = tabs2 == null ? void 0 : tabs2.map) == null ? void 0 : _e2.call(tabs2, (allowedTab) => {
           var _a3, _b3;
-          const { name, type } = allowedTab;
-          if (!(active_tabs == null ? void 0 : active_tabs[type]))
-            return;
-          const newName = ((_b3 = (_a3 = tabs2 == null ? void 0 : tabs2.find) == null ? void 0 : _a3.call(tabs2, (tab) => (tab == null ? void 0 : tab.type) === type)) == null ? void 0 : _b3.name) || name;
+          const { type } = allowedTab;
+          const total = ((_b3 = (_a3 = allowedTabs == null ? void 0 : allowedTabs.find) == null ? void 0 : _a3.call(allowedTabs, (tab) => (tab == null ? void 0 : tab.type) === type)) == null ? void 0 : _b3.total) || 0;
           return {
             ...allowedTab,
             ...{
-              name: newName
+              total
             }
           };
         })) == null ? void 0 : _f2.filter) == null ? void 0 : _g2.call(_f2, (item) => item)
@@ -9329,17 +9352,22 @@ const SearchResultWidget = (props) => {
     /* @__PURE__ */ jsxRuntimeExports.jsx("p", {}),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "The products and collections will become visible in the widgets once indexing is complete." })
   ] }) : null;
+  const tabItems = instantSearchPreviewSettings ? (_y = (_x = (_w = tabs == null ? void 0 : tabs.map) == null ? void 0 : _w.call(tabs, (allowedTab) => {
+    var _a2, _b2;
+    const { type } = allowedTab;
+    const total = ((_b2 = (_a2 = allowedTabs == null ? void 0 : allowedTabs.find) == null ? void 0 : _a2.call(allowedTabs, (tab) => (tab == null ? void 0 : tab.type) === type)) == null ? void 0 : _b2.total) || 0;
+    if (!(activeTabs == null ? void 0 : activeTabs[type]))
+      return;
+    return {
+      ...allowedTab,
+      ...{
+        total
+      }
+    };
+  })) == null ? void 0 : _x.filter) == null ? void 0 : _y.call(_x, (item) => item) : allowedTabs;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-container", ref: searchResultContainerRef, style: containerStyle, children: [
     alertFirstSyncComponent,
-    isFirstLoading ? tabSkeleton : layoutType === "default" && (allowedTabs == null ? void 0 : allowedTabs.length) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Tab,
-      {
-        items: instantSearchPreviewSettings ? (_y = (_x = (_w = allowedTabs == null ? void 0 : allowedTabs.map) == null ? void 0 : _w.call(allowedTabs, (allowedTab) => (activeTabs == null ? void 0 : activeTabs[allowedTab == null ? void 0 : allowedTab.type]) ? allowedTab : null)) == null ? void 0 : _x.filter) == null ? void 0 : _y.call(_x, (item) => item) : allowedTabs,
-        layoutType,
-        clickedTabIndexId,
-        handleChangeTab: handleChangeTabIndex
-      }
-    ) : tabSkeleton,
+    isFirstLoading ? tabSkeleton : layoutType === "default" && (allowedTabs == null ? void 0 : allowedTabs.length) ? /* @__PURE__ */ jsxRuntimeExports.jsx(Tab, { items: tabItems, layoutType, clickedTabIndexId, handleChangeTab: handleChangeTabIndex }) : tabSkeleton,
     isFirstLoading && (layoutType == null ? void 0 : layoutType.length) && !propsData ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
       mobileFilterWithSearchAndSelectOptionSkeleton,
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__hide-element-lg-on-mobile", children: filterHorizontalSkeleton }),
@@ -9806,9 +9834,10 @@ const ResultProduct = React__default.memo((props) => {
       return;
     const { hits, processingTimeMs, totalHits, totalPages, facetDistribution } = result;
     const updateTabs = () => {
-      if (allowedTabs == null ? void 0 : allowedTabs.length) {
+      const valueAllowedTabs = objectPresent(previewSettings) ? tabs : allowedTabs;
+      if (valueAllowedTabs == null ? void 0 : valueAllowedTabs.length) {
         setAllowedTabs == null ? void 0 : setAllowedTabs(
-          allowedTabs.map((tab) => {
+          valueAllowedTabs.map((tab) => {
             var _a3, _b3, _c2;
             const { index, total } = tab;
             let isCurrentIndex = index.includes(clickedTabIndexId);
@@ -9827,6 +9856,8 @@ const ResultProduct = React__default.memo((props) => {
         );
       }
     };
+    if (objectPresent(previewSettings))
+      updateTabs();
     if (isFirstTimeOrOnSearch || isNoneFacetSelected) {
       handleSetInitStates == null ? void 0 : handleSetInitStates({
         results: resultData,
@@ -9980,6 +10011,9 @@ const ResultProduct = React__default.memo((props) => {
       });
     }
   }, [isReplaceWidgetList, clickedTabIndexId]);
+  useEffectOnChange(() => {
+    setSummaryText(summaryTextGenerator(totalSearchResult));
+  }, [previewSettings]);
   let dataClickedFacets = handleDataClickedFacets();
   let keepCounterFacets = [];
   allowedFilter == null ? void 0 : allowedFilter.map((filter) => {
@@ -10115,6 +10149,7 @@ const ResultProduct = React__default.memo((props) => {
     const defaultProps = {
       items: allowedFilter,
       filterSettings,
+      filterTitleStyle: filter_title_style,
       clickedOpenFilterHorizontalId,
       setClickedOpenFilterHorizontalId,
       clickedOpenFilterHorizontalMobileId,