@sledge-app/react-instant-search 1.0.35 → 1.0.37

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

@@ -40,6 +40,8 @@ const DATASET_ATTRIBUTE_KEY = {
     SECTION_TITLE: "data-section-title",
     SECTION_DESCRIPTION: "data-section-description",
     USE_SLIDER: "data-use-slider",
+    FILL_COLOR: "data-fill-color",
+    OUTLINE_COLOR: "data-outline-color",
     POSITION_WIDGET: "data-position-widget"
   },
   WISHLIST: {
@@ -54,6 +56,7 @@ const DATASET_ATTRIBUTE_KEY = {
     RATING_TOTAL: "data-rating-total",
     RATING_AVERAGE: "data-rating-average",
     RENDER_REVIEW_PRODUCT_INFO: "data-render-review-product-info",
+    TRUST_BADGE_VARIANT: "data-trust-badge-variant",
     SHOW_RATING_AVERAGE: "data-show-rating-average"
   },
   INSTANT_SEARCH: {
@@ -72,7 +75,7 @@ const DATASET_ATTRIBUTE_KEY = {
     RENDER_ARTICLE_CARD: "data-render-article-card"
   },
   PRODUCT_RECOMMENDATION: {
-    LIMIT_TO_DISPLAY: "data-limit-to-display",
+    DISPLAY_LIMIT: "data-display-limit",
     HIDDEN_PRODUCT_IDS: "data-hidden-product-ids"
   }
 };
@@ -103,6 +106,7 @@ const INTERNAL_SELECTOR_VALUE = {
   PRODUCT_REVIEW: {
     ELEMENT_WIDGET_POPUP_DETAIL: "product-review-widget-popup-detail",
     ELEMENT_WIDGET_FORM_ADD: "product-review-widget-form-add",
+    ELEMENT_STICKY_BADGE: "product-review-sticky-badge",
     ELEMENT_HAPPY_CUSTOMERS_PAGE_POPUP: "product-review-happy-customers-page-popup"
   },
   INSTANT_SEARCH: {
@@ -124,7 +128,9 @@ const SELECTOR = {
     ELEMENT_WIDGET: `[${SELECTOR_ATTRIBUTE_KEY}="product-review-widget"]`,
     ELEMENT_HAPPY_CUSTOMERS_PAGE: `[${SELECTOR_ATTRIBUTE_KEY}="product-review-happy-customers-page"]`,
     ELEMENT_RATING: `[${SELECTOR_ATTRIBUTE_KEY}="product-review-rating"]`,
-    ELEMENT_STICKY_SIDEBAR_WIDGET: `[${SELECTOR_ATTRIBUTE_KEY}="product-review-sticky-sidebar-widget"]`
+    ELEMENT_TRUST_BADGE: `[${SELECTOR_ATTRIBUTE_KEY}="product-review-trust-badge"]`,
+    ELEMENT_STICKY_SIDEBAR_WIDGET: `[${SELECTOR_ATTRIBUTE_KEY}="product-review-sticky-sidebar-widget"]`,
+    ELEMENT_SNIPPET: `[${SELECTOR_ATTRIBUTE_KEY}="product-review-snippet"]`
   },
   INSTANT_SEARCH: {
     ELEMENT_SEARCH_WIDGET: `[${SELECTOR_ATTRIBUTE_KEY}="instant-search-widget"]`,
@@ -133,7 +139,8 @@ const SELECTOR = {
     ELEMENT_PLP_WIDGET: `[${SELECTOR_ATTRIBUTE_KEY}="instant-search-product-filter-widget"]`
   },
   PRODUCT_RECOMMENDATION: {
-    ELEMENT_RECENTLY_VIEWED_WIDGET: `[${SELECTOR_ATTRIBUTE_KEY}="product-recommendation-recently-viewed-widget"]`
+    ELEMENT_RECENTLY_VIEWED: `[${SELECTOR_ATTRIBUTE_KEY}="product-recommendation-recently-viewed"]`,
+    ELEMENT_RELATED_PRODUCTS: `[${SELECTOR_ATTRIBUTE_KEY}="product-recommendation-related-prodcuts"]`
   }
 };
 const DEFAULT_MAX_WIDTH_COMPONENT = "1180px";
@@ -150,7 +157,10 @@ const OBJECT_DATA_STRING_KEY = {
   CURRENT_PAGE: "{{ current_page }}",
   TOTAL_PAGE: "{{ total_page }}",
   TOTAL_RESULT: "{{ total_result }}",
-  COLLECTION_NAME: "{{ collection_name }}"
+  COLLECTION_NAME: "{{ collection_name }}",
+  TOTAL_WISHLIST: "{{ total_wishlist }}",
+  ACCEPTED_FILETYPE_MEDIA: "{{ accepted_filetype_media }}",
+  MAX_SIZE_MEDIA: "{{ max_size_media }}"
 };
 const ELEMENT_ID = {
   PRODUCT_REVIEW: {
@@ -165,6 +175,213 @@ const PAYLOAD_API_ALIASES = {
   PUT: "dEnOjbvTzULLK",
   DELETE: "pLC93Tvsu6g7H"
 };
+async function swr(url, options) {
+  if (typeof localStorage !== "undefined" && typeof caches !== "undefined" && options.method === "GET" && !(options == null ? void 0 : options.ignoreSWR)) {
+    const data = await getData(url);
+    return await data.json();
+  } else
+    return fetch(url, options).then((response) => response.json());
+}
+async function getData(url) {
+  const cacheVersion = 1;
+  const cacheName = `sledge-${cacheVersion}`;
+  return caches.open(cacheName).then((cache) => {
+    return cache.match(url).then((cachedResponse) => {
+      const fetchedResponse = fetch(url).then(async (networkResponse) => {
+        const mainUrl = url.split("?")[0];
+        const cacheMatches = await cache.matchAll();
+        const filteredCaches = await cacheMatches.filter((f) => f.url.includes(mainUrl) && f.url !== url);
+        for (const c of filteredCaches) {
+          await cache.delete(c.url);
+        }
+        cache.put(url, networkResponse.clone());
+        return networkResponse;
+      });
+      return cachedResponse || fetchedResponse;
+    });
+  });
+}
+const usePrevious = (value) => {
+  const ref = React__default.useRef();
+  React__default.useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+};
+const sanitizeDataId = (id) => {
+  if (!id)
+    return "";
+  let getId = String(id);
+  if (getId.includes("shopify") && getId.includes("/")) {
+    let arrId = getId.split("/");
+    return arrId[arrId.length - 1] || getId;
+  } else {
+    return getId;
+  }
+};
+const isFunction = (data) => typeof data === "function";
+const scrollToElement = (params) => {
+  const { element, headerOffset } = params;
+  if (!element)
+    return;
+  var elementPosition = element == null ? void 0 : element.getBoundingClientRect().top;
+  var offsetPosition = elementPosition + window.scrollY - headerOffset;
+  window.scrollTo({
+    top: offsetPosition,
+    behavior: "smooth"
+  });
+};
+const getUnixTimestamp = (params) => {
+  const { addMoreTime = 0, addMoreTimeBy = "day" } = params || {};
+  let moreTime = 0;
+  if (addMoreTime) {
+    if (addMoreTimeBy === "day")
+      moreTime = addMoreTime * 60 * 60 * 24;
+    if (addMoreTimeBy === "hour")
+      moreTime = addMoreTime * 60 * 60;
+    if (addMoreTimeBy === "minute")
+      moreTime = addMoreTime * 60;
+    if (addMoreTimeBy === "second")
+      moreTime = addMoreTime;
+  }
+  return Math.floor(Date.now() / 1e3) + moreTime;
+};
+const fetchApi = async (params) => {
+  const { url, method, authorization = "", payload = {}, headers = {}, isSimpleRequest = true, isUploadFile = false, ignoreSWR = false } = params;
+  var myHeaders = new Headers();
+  if (!isSimpleRequest) {
+    if (authorization)
+      myHeaders.append("Authorization", `Bearer ${authorization}`);
+    if (Object.keys(headers).length)
+      Object.keys(headers).forEach(function(key) {
+        myHeaders.append(key, headers[key]);
+      });
+  }
+  var formdata = new FormData();
+  if (isSimpleRequest || isUploadFile) {
+    if (authorization && isSimpleRequest)
+      formdata.append(PAYLOAD_API_ALIASES.Authorization, authorization);
+    formdata.append(PAYLOAD_API_ALIASES.Method, PAYLOAD_API_ALIASES[method]);
+    if (Object.keys(payload).length)
+      Object.keys(payload).forEach(function(key) {
+        if (isUploadFile && (payload == null ? void 0 : payload.files))
+          [...payload.files].map((item) => {
+            formdata.append("files", item, item.name);
+          });
+        formdata.append(key, payload[key]);
+      });
+  }
+  const fixMethod = isSimpleRequest ? "POST" : method;
+  var requestOptions = {
+    method: fixMethod,
+    redirect: "follow",
+    headers: myHeaders,
+    body: fixMethod === "GET" ? null : isSimpleRequest || isUploadFile ? formdata : JSON.stringify(payload),
+    ignoreSWR
+  };
+  return await swr(`${url}`, requestOptions);
+};
+const convertDate = (date, options = {
+  timeZone: "Asia/Jakarta",
+  year: "numeric",
+  month: "numeric",
+  day: "numeric"
+}) => new Date(date).toLocaleString("en-US", options);
+const watchElement = ({ selector = null, init = null, customInit = false }) => {
+  if (!selector || !init)
+    return;
+  var observer = new MutationObserver(function(mutations) {
+    mutations.forEach(function(mutation) {
+      var nodes = Array.prototype.slice.call(mutation.addedNodes);
+      nodes.forEach(function(node) {
+        if (node.nodeType === 1 && (node.matches(selector) || node.querySelector(selector))) {
+          if (!customInit) {
+            let elementNode = Array.from(node.querySelectorAll(selector));
+            if (elementNode.length) {
+              elementNode.map((item) => {
+                init(item);
+              });
+            }
+          } else {
+            init();
+          }
+        }
+      });
+    });
+  });
+  observer.observe(document.body, {
+    childList: true,
+    subtree: true,
+    attributes: false,
+    characterData: false
+  });
+};
+const getFillRating = ({
+  average,
+  item,
+  index,
+  productId,
+  customComponentId,
+  unixTimestamp
+}) => {
+  let ratingValue = Math.floor(parseFloat(average));
+  let getCommaValue = String(average).includes(",") ? String(average).split(",") : [];
+  let getCommaValueDot = String(average).includes(".") ? String(average).split(".") : [];
+  let isHaveCommaValue = getCommaValue.length || getCommaValueDot.length;
+  let commaValue = isHaveCommaValue ? getCommaValue[1] || getCommaValueDot[1] : 0;
+  let fillOther = "fill-0";
+  if (item > ratingValue && ratingValue + 1 === item) {
+    fillOther = `fill-${commaValue}`;
+  }
+  fillOther = item <= ratingValue ? "full" : fillOther;
+  let offset;
+  if (fillOther === "fill-0") {
+    offset = "0%";
+  }
+  if (fillOther === "fill-1") {
+    offset = "25%";
+  }
+  if (fillOther === "fill-2") {
+    offset = "35%";
+  }
+  if (fillOther === "fill-3") {
+    offset = "40%";
+  }
+  if (fillOther === "fill-4") {
+    offset = "45%";
+  }
+  if (fillOther === "fill-5") {
+    offset = "50%";
+  }
+  if (fillOther === "fill-6") {
+    offset = "60%";
+  }
+  if (fillOther === "fill-7") {
+    offset = "70%";
+  }
+  if (fillOther === "fill-8") {
+    offset = "80%";
+  }
+  if (fillOther === "fill-9") {
+    offset = "90%";
+  }
+  if (fillOther === "full") {
+    offset = "100%";
+  }
+  let suffixGradientId = `-${fillOther}-${index}-${productId ? productId : unixTimestamp}${customComponentId ? `-${customComponentId}` : ""}`;
+  let strokeGradientId = `rating-stroke${suffixGradientId}`;
+  let fillGradientId = `rating-gradient${suffixGradientId}`;
+  return {
+    suffixGradientId,
+    strokeGradientId,
+    fillGradientId,
+    offset,
+    fillOther
+  };
+};
+const stripTags = (html) => {
+  return html.replace(/(<([^>]+)>)/gi, "");
+};
 const root = "";
 const Loading = "";
 const ConfirmationPopup = "";
@@ -700,150 +917,6 @@ const SelectField = (props) => {
   ) });
 };
 const ProductGrid$1 = "";
-async function swr(url, options) {
-  if (typeof localStorage !== "undefined" && typeof caches !== "undefined" && options.method === "GET" && !(options == null ? void 0 : options.ignoreSWR)) {
-    const data = await getData(url);
-    return await data.json();
-  } else
-    return fetch(url, options).then((response) => response.json());
-}
-async function getData(url) {
-  const cacheVersion = 1;
-  const cacheName = `sledge-${cacheVersion}`;
-  return caches.open(cacheName).then((cache) => {
-    return cache.match(url).then((cachedResponse) => {
-      const fetchedResponse = fetch(url).then(async (networkResponse) => {
-        const mainUrl = url.split("?")[0];
-        const cacheMatches = await cache.matchAll();
-        const filteredCaches = await cacheMatches.filter((f) => f.url.includes(mainUrl) && f.url !== url);
-        for (const c of filteredCaches) {
-          await cache.delete(c.url);
-        }
-        cache.put(url, networkResponse.clone());
-        return networkResponse;
-      });
-      return cachedResponse || fetchedResponse;
-    });
-  });
-}
-const usePrevious = (value) => {
-  const ref = React__default.useRef();
-  React__default.useEffect(() => {
-    ref.current = value;
-  });
-  return ref.current;
-};
-const sanitizeDataId = (id) => {
-  if (!id)
-    return "";
-  let getId = String(id);
-  if (getId.includes("shopify") && getId.includes("/")) {
-    let arrId = getId.split("/");
-    return arrId[arrId.length - 1] || getId;
-  } else {
-    return getId;
-  }
-};
-const isFunction = (data) => typeof data === "function";
-const scrollToElement = (params) => {
-  const { element, headerOffset } = params;
-  if (!element)
-    return;
-  var elementPosition = element == null ? void 0 : element.getBoundingClientRect().top;
-  var offsetPosition = elementPosition + window.scrollY - headerOffset;
-  window.scrollTo({
-    top: offsetPosition,
-    behavior: "smooth"
-  });
-};
-const getUnixTimestamp = (params) => {
-  const { addMoreTime = 0, addMoreTimeBy = "day" } = params || {};
-  let moreTime = 0;
-  if (addMoreTime) {
-    if (addMoreTimeBy === "day")
-      moreTime = addMoreTime * 60 * 60 * 24;
-    if (addMoreTimeBy === "hour")
-      moreTime = addMoreTime * 60 * 60;
-    if (addMoreTimeBy === "minute")
-      moreTime = addMoreTime * 60;
-    if (addMoreTimeBy === "second")
-      moreTime = addMoreTime;
-  }
-  return Math.floor(Date.now() / 1e3) + moreTime;
-};
-const fetchApi = async (params) => {
-  const { url, method, authorization = "", payload = {}, headers = {}, isSimpleRequest = true, isUploadFile = false, ignoreSWR = false } = params;
-  var myHeaders = new Headers();
-  if (!isSimpleRequest) {
-    if (authorization)
-      myHeaders.append("Authorization", `Bearer ${authorization}`);
-    if (Object.keys(headers).length)
-      Object.keys(headers).forEach(function(key) {
-        myHeaders.append(key, headers[key]);
-      });
-  }
-  var formdata = new FormData();
-  if (isSimpleRequest || isUploadFile) {
-    if (authorization && isSimpleRequest)
-      formdata.append(PAYLOAD_API_ALIASES.Authorization, authorization);
-    formdata.append(PAYLOAD_API_ALIASES.Method, PAYLOAD_API_ALIASES[method]);
-    if (Object.keys(payload).length)
-      Object.keys(payload).forEach(function(key) {
-        if (isUploadFile && (payload == null ? void 0 : payload.files))
-          [...payload.files].map((item) => {
-            formdata.append("files", item, item.name);
-          });
-        formdata.append(key, payload[key]);
-      });
-  }
-  const fixMethod = isSimpleRequest ? "POST" : method;
-  var requestOptions = {
-    method: fixMethod,
-    redirect: "follow",
-    headers: myHeaders,
-    body: fixMethod === "GET" ? null : isSimpleRequest || isUploadFile ? formdata : JSON.stringify(payload),
-    ignoreSWR
-  };
-  return await swr(`${url}`, requestOptions);
-};
-const convertDate = (date, options = {
-  timeZone: "Asia/Jakarta",
-  year: "numeric",
-  month: "numeric",
-  day: "numeric"
-}) => new Date(date).toLocaleString("en-US", options);
-const watchElement = ({ selector = null, init = null, customInit = false }) => {
-  if (!selector || !init)
-    return;
-  var observer = new MutationObserver(function(mutations) {
-    mutations.forEach(function(mutation) {
-      var nodes = Array.prototype.slice.call(mutation.addedNodes);
-      nodes.forEach(function(node) {
-        if (node.nodeType === 1 && (node.matches(selector) || node.querySelector(selector))) {
-          if (!customInit) {
-            let elementNode = Array.from(node.querySelectorAll(selector));
-            if (elementNode.length) {
-              elementNode.map((item) => {
-                init(item);
-              });
-            }
-          } else {
-            init();
-          }
-        }
-      });
-    });
-  });
-  observer.observe(document.body, {
-    childList: true,
-    subtree: true,
-    attributes: false,
-    characterData: false
-  });
-};
-const stripTags = (html) => {
-  return html.replace(/(<([^>]+)>)/gi, "");
-};
 const addToCart = async (data) => {
   var _a, _b;
   let items = [];
@@ -991,7 +1064,7 @@ const addToCartTrigger$1 = async (data) => {
   });
 };
 const Badge = (props) => {
-  var _a;
+  var _a, _b;
   const { useProxyUrl = false, data: propsData, position: positionProp } = props;
   const { isRenderApp, triggerRenderMultipleComponent, sledgeAnonymId } = React__default.useContext(SledgeContext);
   const { wishlist: isRenderAppWishlist } = isRenderApp || {};
@@ -1006,17 +1079,18 @@ const Badge = (props) => {
   const [dataSettings, setDataSettings] = React__default.useState({});
   const [isRequiredLogin, setIsRequiredLogin] = React__default.useState(false);
   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, _b;
+    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 = !((_b = response == null ? void 0 : response.data) == null ? void 0 : _b.total_data) ? 0 : response.data.total_data;
+    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);
@@ -1043,10 +1117,9 @@ const Badge = (props) => {
     if (isRequiredLogin) {
       if (typeof window !== "undefined" && window.sledgeConfirmationPopup)
         window.sledgeConfirmationPopup({
-          title: "Login required!",
-          message: "Please login to save your wishlist across devices.",
-          textSubmit: "Login",
-          textCancel: "Cancel",
+          title: alert_login || "Login required!",
+          message: alert || "Please login to save your wishlist across devices.",
+          textSubmit: login_button || "Login",
           buttonSubmitType: "info",
           onSubmit: () => window.location.href = "/account/login"
         });
@@ -1192,7 +1265,7 @@ const BadgeInitSelector = () => {
   }
 };
 const Trigger = (props) => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e;
   const { params, forceActive = false, hidden = false, onAfterAddWishlist, onAfterRemoveWishlist, wishlistChecked } = props;
   const { productId, productVariantId } = params || {};
   const { isRenderApp, triggerRenderMultipleComponent, sledgeAnonymId } = React__default.useContext(SledgeContext);
@@ -1218,6 +1291,7 @@ const Trigger = (props) => {
   const { is_required_login } = ((_b = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _b.global) || {};
   const { show: show_notification, location: location_notification } = ((_c = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _c.notification) || {};
   const { title_added_to_wishlist, text_added_to_wishlist, title_removed_to_wishlist, text_removed_to_wishlist, title_fail_add_to_wishlist, text_fail_add_to_wishlist } = ((_d = dataSettings == null ? void 0 : dataSettings.languages) == null ? void 0 : _d.notification) || {};
+  const { alert_login, alert, login_button } = ((_e = dataSettings == null ? void 0 : dataSettings.languages) == null ? void 0 : _e.widget) || {};
   const handleCheckWishlist = async () => {
     let response;
     if (typeof wishlistChecked === "boolean" && isFirstTime) {
@@ -1234,10 +1308,9 @@ const Trigger = (props) => {
     if (isRequiredLogin) {
       if (typeof window !== "undefined" && window.sledgeConfirmationPopup)
         window.sledgeConfirmationPopup({
-          title: "Login required!",
-          message: "Please login to save your wishlist across devices.",
-          textSubmit: "Login",
-          textCancel: "Cancel",
+          title: alert_login || "Login required!",
+          message: alert || "Please login to save your wishlist across devices.",
+          textSubmit: login_button || "Login",
           buttonSubmitType: "info",
           onSubmit: () => window.location.href = "/account/login"
         });
@@ -1387,7 +1460,6 @@ const WidgetHeaderClearTrigger = ({ buttonText, shareId, dataSettings, isFirstLo
         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 || {}
       });
@@ -1412,8 +1484,8 @@ const WidgetHeaderShareTrigger = ({ wishlistData, buttonText, showShareTrigger,
     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 } = ((_e = dataSettings == null ? void 0 : dataSettings.languages) == null ? void 0 : _e.popup) || {};
-  const { button_share } = ((_f = dataSettings == null ? void 0 : dataSettings.languages) == null ? void 0 : _f.widget) || {};
+  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) || {};
   const [isRequiredLogin, setIsRequiredLogin] = React__default.useState(false);
@@ -1507,12 +1579,14 @@ const WidgetHeaderShareTrigger = ({ wishlistData, buttonText, showShareTrigger,
     }
   };
   const handleClick = async () => {
+    let getMessage = text_confirm_add_to_your_wishlist;
+    if (getMessage)
+      getMessage = getMessage.replaceAll(OBJECT_DATA_STRING_KEY.TOTAL_WISHLIST, wishlistData.length);
     if (shareId && wishlistData.length) {
       window.sledgeConfirmationPopup({
-        title: "Are you sure want to add this to your wishlist item?",
-        message: `This action cannot be undone. This will adding <strong>${wishlistData.length}</strong> item to your wishlist page.`,
-        textSubmit: "Add to your wishlist",
-        textCancel: "Cancel",
+        title: title_confirm_add_to_your_wishlist || "Are you sure want to add this to your wishlist item?",
+        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 || {}
       });
@@ -1550,7 +1624,7 @@ const WidgetHeaderShareTrigger = ({ wishlistData, buttonText, showShareTrigger,
       children: shareId ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-wishlist__badge-counter sledge-wishlist__badge-counter-top-right", children: wishlistData.length }),
         isLoadingBulkAdd ? /* @__PURE__ */ jsxRuntimeExports.jsx(LoadingDots, {}) : null,
-        "Add to your wishlist"
+        button_add_to_your_wishlist || "Add to your wishlist"
       ] }) : buttonText ? buttonText : button_share || "Share Wishlist"
     }
   ) }) }) }) });
@@ -1898,53 +1972,14 @@ const Rating = (props) => {
         [1, 2, 3, 4, 5].map((item, index) => {
           if (!(item <= numberOfIcons))
             return;
-          let ratingValue = Math.floor(parseFloat(averageReview));
-          let getCommaValue = String(averageReview).includes(",") ? String(averageReview).split(",") : [];
-          let getCommaValueDot = String(averageReview).includes(".") ? String(averageReview).split(".") : [];
-          let isHaveCommaValue = getCommaValue.length || getCommaValueDot.length;
-          let commaValue = isHaveCommaValue ? getCommaValue[1] || getCommaValueDot[1] : 0;
-          let fillOther = "fill-0";
-          if (item > ratingValue && ratingValue + 1 === item) {
-            fillOther = `fill-${commaValue}`;
-          }
-          fillOther = item <= ratingValue ? "full" : fillOther;
-          let offset;
-          if (fillOther === "fill-0") {
-            offset = "0%";
-          }
-          if (fillOther === "fill-1") {
-            offset = "25%";
-          }
-          if (fillOther === "fill-2") {
-            offset = "35%";
-          }
-          if (fillOther === "fill-3") {
-            offset = "40%";
-          }
-          if (fillOther === "fill-4") {
-            offset = "45%";
-          }
-          if (fillOther === "fill-5") {
-            offset = "50%";
-          }
-          if (fillOther === "fill-6") {
-            offset = "60%";
-          }
-          if (fillOther === "fill-7") {
-            offset = "70%";
-          }
-          if (fillOther === "fill-8") {
-            offset = "80%";
-          }
-          if (fillOther === "fill-9") {
-            offset = "90%";
-          }
-          if (fillOther === "full") {
-            offset = "100%";
-          }
-          let suffixGradientId = `-${fillOther}-${index}-${productId ? productId : unixTimestamp}${customComponentId ? `-${customComponentId}` : ""}`;
-          let strokeGradientId = `rating-stroke${suffixGradientId}`;
-          let fillGradientId = `rating-gradient${suffixGradientId}`;
+          const { strokeGradientId, suffixGradientId, offset, fillGradientId, fillOther } = getFillRating({
+            average: averageReview,
+            item,
+            index,
+            productId,
+            unixTimestamp,
+            customComponentId
+          });
           return /* @__PURE__ */ createElement("svg", { xmlns: "http://www.w3.org/2000/svg", ...sizing, viewBox: "0 0 32 32", key: suffixGradientId }, /* @__PURE__ */ jsxRuntimeExports.jsxs("defs", { children: [
             /* @__PURE__ */ jsxRuntimeExports.jsxs("linearGradient", { id: strokeGradientId, children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset, stopColor: fillColor || fill_color }),
@@ -2717,10 +2752,13 @@ const ProductGrid = (props) => {
     }
   };
   const Container = useSlider ? Carousel : "div";
+  const carouselSourceProp = useSlider && {
+    carouselSourceWidget: "productGrid"
+  } || null;
   React__default.useEffect(() => {
     onAfterRenderProduct && onAfterRenderProduct("success");
   }, []);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Container, { className: `sledge__product-grid ${className}`, "data-grid-type": type, children: data == null ? void 0 : data.map((item, index) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Container, { className: `sledge__product-grid ${className}`, ...carouselSourceProp, "data-grid-type": type, children: data == null ? void 0 : data.map((item, index) => {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(ProductCard, { item, handleAddToCart, clickedAddToCartId, ...props }, `sledge-product-card_${index}`);
   }) });
 };
@@ -3087,11 +3125,10 @@ const LoadingDots = () => {
 };
 const Carousel$1 = "";
 const Carousel = (props) => {
-  const { children, className = "", "data-grid-type": dataGridType } = props;
+  const { children, className = "", "data-grid-type": dataGridType, carouselSourceWidget } = props;
   const [active, setActive] = React__default.useState(true);
   const {
     options = {
-      active,
       slidesToScroll: "auto",
       align: "start",
       dragFree: true,
@@ -3101,12 +3138,28 @@ const Carousel = (props) => {
   const [carouselRef, carouselApi] = useEmblaCarousel(options);
   const [prevBtnDisabled, setPrevBtnDisabled] = React__default.useState(true);
   const [nextBtnDisabled, setNextBtnDisabled] = React__default.useState(true);
+  const [selectedIndex, setSelectedIndex] = React__default.useState(0);
+  const [scrollSnaps, setScrollSnaps] = React__default.useState([]);
   const scrollPrev = React__default.useCallback(() => carouselApi && carouselApi.scrollPrev(), [carouselApi]);
   const scrollNext = React__default.useCallback(() => carouselApi && carouselApi.scrollNext(), [carouselApi]);
+  const scrollTo = React__default.useCallback((index) => carouselApi && carouselApi.scrollTo(index), [carouselApi]);
   const onSelect = React__default.useCallback((carouselApi2) => {
+    setSelectedIndex(carouselApi2.selectedScrollSnap());
     setPrevBtnDisabled(!carouselApi2.canScrollPrev());
     setNextBtnDisabled(!carouselApi2.canScrollNext());
   }, []);
+  const onInit = React__default.useCallback((carouselApi2) => {
+    setScrollSnaps(carouselApi2.scrollSnapList());
+  }, []);
+  React__default.useEffect(() => {
+    if (!carouselApi)
+      return;
+    onInit(carouselApi);
+    onSelect(carouselApi);
+    carouselApi.on("reInit", onInit);
+    carouselApi.on("reInit", onSelect);
+    carouselApi.on("select", onSelect);
+  }, [carouselApi, onSelect]);
   React__default.useEffect(() => {
     if (!carouselApi)
       return;
@@ -3118,10 +3171,30 @@ const Carousel = (props) => {
   React__default.useEffect(() => {
     if (!carouselApi)
       return;
-    onSelect(carouselApi);
-    carouselApi.on("reInit", onSelect);
-    carouselApi.on("select", onSelect);
-  }, [carouselApi, onSelect]);
+    carouselApi.reInit(options);
+  }, [carouselApi, React__default.Children.count(children)]);
+  React__default.useEffect(() => {
+    if (!carouselApi)
+      return;
+    if (!active)
+      carouselApi == null ? void 0 : carouselApi.internalEngine().dragHandler.destroy();
+    else
+      carouselApi == null ? void 0 : carouselApi.internalEngine().dragHandler.init(carouselApi);
+  }, [active]);
+  let carouselAttributes = {};
+  switch (carouselSourceWidget) {
+    case "productGrid":
+      carouselAttributes = {
+        className: "sledge__carousel-container sledge__product-grid",
+        "data-grid-type": dataGridType
+      };
+      break;
+    default:
+      carouselAttributes = {
+        className: "sledge__carousel-container"
+      };
+      break;
+  }
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `sledge__carousel ${className}`, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       Navigation,
@@ -3136,7 +3209,7 @@ const Carousel = (props) => {
         className: "sledge__carousel-button-prev"
       }
     ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__carousel-viewport", ref: carouselRef, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__carousel-container sledge__product-grid", "data-grid-type": dataGridType, children }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge__carousel-viewport ${active && "is-active" || ""}`, ref: carouselRef, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ...carouselAttributes, children }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       Navigation,
       {
@@ -3149,7 +3222,8 @@ const Carousel = (props) => {
         onClick: scrollNext,
         className: "sledge__carousel-button-next"
       }
-    )
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__carousel-dots", children: scrollSnaps.map((_, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(DotButton, { onClick: () => scrollTo(index), className: "sledge__carousel-dot".concat(index === selectedIndex ? " sledge__carousel-dot--selected" : "") }, index)) })
   ] });
 };
 const Navigation = (props) => {
@@ -3174,6 +3248,10 @@ const Navigation = (props) => {
   const Icon = () => position === "left" ? LeftIcon : RightIcon;
   return /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: `sledge__carousel-button ${className}`, type: "button", ...restProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, {}) });
 };
+const DotButton = (props) => {
+  const { children, ...restProps } = props;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", ...restProps, children });
+};
 const SearchIconWidget = (props) => {
   const { isRenderApp, isJsVersion } = React__default.useContext(SledgeContext);
   const { instantSearch: isRenderAppInstantSearch } = isRenderApp || {};
@@ -4330,7 +4408,7 @@ const ResultProduct = (props) => {
     if (isSummaryTextFromLanguage) {
       getSummaryText = getSummaryText.replaceAll(OBJECT_DATA_STRING_KEY.TOTAL_RESULT, totalResult);
       if (layoutType === "product-filter")
-        getSummaryText = getSummaryText.replaceAll(OBJECT_DATA_STRING_KEY.COLLECTION_NAME, collectionName || "");
+        getSummaryText = getSummaryText.replaceAll(OBJECT_DATA_STRING_KEY.COLLECTION_NAME, collectionName || "Products");
     }
     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.jsx("span", { className: "sledge-instant-search__result-data-summary-text", children: isSummaryTextFromLanguage ? getSummaryText : defaultSummaryText }) : null });
   };