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

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

@@ -1159,7 +1159,7 @@ const Rating = (props) => {
   var _a;
   const { value, size = "md", params, withSkeletonLoading = true, isScrollToElementWidget = true, data: propsData } = props;
   const { productId } = params || {};
-  const { isRenderApp } = React__default.useContext(SledgeContext);
+  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({
@@ -1171,15 +1171,17 @@ const Rating = (props) => {
   const [dataSettings, setDataSettings] = React__default.useState({});
   const previousState = usePrevious({ productId });
   const { fill_color, outline_color } = ((_a = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _a.rating) || {};
-  const handleProductRatingInfo = async (validateProductId) => {
-    var _a2;
+  const handleProductRatingInfo = async (paramsProductId, isTriggerMultiComponent = false) => {
+    var _a2, _b, _c, _d, _e, _f, _g;
+    if (paramsProductId !== productId)
+      return;
     let response;
     let run = false;
     let valueTotalReview = 0;
     let valueAverageReview;
     let data;
     if (!propsData) {
-      response = await getReviewInfo(validateProductId);
+      response = await getReviewInfo(paramsProductId);
       if (!response)
         return;
       const { status } = response;
@@ -1197,6 +1199,8 @@ 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))
+        (_g = (_f = triggerRenderMultipleComponent == null ? void 0 : triggerRenderMultipleComponent.productReview) == null ? void 0 : _f.rating) == null ? void 0 : _g.trigger("");
     }
   };
   const handleRefreshProductRating = async () => {
@@ -1226,12 +1230,6 @@ const Rating = (props) => {
   React__default.useEffect(() => {
     if (!(isRenderApp == null ? void 0 : isRenderApp.productReview))
       return;
-    if (typeof window !== "undefined") {
-      window.sledgeProductReviewRatingUpdate = () => {
-        setIsLoading(true);
-        handleRefreshProductRating();
-      };
-    }
     if (size === "xs") {
       setSizing({
         width: 14.4,
@@ -1253,6 +1251,13 @@ const Rating = (props) => {
       setIsFirstLoading(true);
     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)
+      return;
+    setIsFirstLoading(true);
+    handleProductRatingInfo((_d = (_c = triggerRenderMultipleComponent == null ? void 0 : triggerRenderMultipleComponent.productReview) == null ? void 0 : _c.rating) == null ? void 0 : _d.value, true);
+  }, [productId, triggerRenderMultipleComponent]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-product-review__rating", onClick: handleOnClick, children: isFirstLoading && withSkeletonLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "230px", height: "28px", color: "grey-100", rounded: "md" }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", style: { display: "none" }, id: "sledge-product-review-rating-icon-svg-store", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("symbol", { id: "sledge-product-review-icons-rating-icon-fill", viewBox: "0 0 30 29", fill: fill_color || "#23BC45", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -2666,7 +2671,7 @@ const SearchIconWidgetPopup = () => {
   ] }) });
 };
 const SearchResultWidget = (props) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
   const { isRenderApp, isJsVersion } = React__default.useContext(SledgeContext);
   const { layoutType = "default", query, params, children, onAfterAddToCart, onAfterAddWishlist, onAfterRemoveWishlist, onAfterRenderProduct, data: propsData } = props;
   const { keyword: queryKeyword = "" } = query || {};
@@ -2680,7 +2685,7 @@ 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" ? (_b = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY.INSTANT_SEARCH_SETTING) || "{}")) == null ? void 0 : _b.data : {});
+  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 [keyword, setKeyword] = React__default.useState(searchParams == null ? void 0 : searchParams.get(queryKeyword));
@@ -2848,8 +2853,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 = ((_c = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _c.enable_on_search) && ((_d = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _d.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 = ((_e = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _e.enable_on_search) && ((_f = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _f.layout) === "vertical" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+  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: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
@@ -3065,7 +3070,7 @@ const SearchResultWidget = (props) => {
     )
   ] }) : null;
   const productGridSkeleton = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    ((_g = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _g.show_total_products) && ((_h = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _h.layout) === "vertical" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ((_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(
       SkeletonLoading.Item,
       {
         width: "117px",
@@ -3081,7 +3086,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: [
-    ((_i = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _i.show_total_products) && ((_j = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _j.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,
+    ((_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,
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-keyword-form", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       SkeletonLoading.Item,
       {
@@ -3112,7 +3117,7 @@ const SearchResultWidget = (props) => {
       tabSkeleton,
       filterHorizontalSkeleton,
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-wrapper sledge-instant-search__result-wrapper-skeleton", children: [
-        ((_k = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _k.enable_on_search) && ((_l = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _l.layout) === "vertical" ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter", children: filterVerticalSkeleton }) : null,
+        ((_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,
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-data", children: [
           searchAndSelectOptionSkeleton,
           productGridSkeleton