@sledge-app/react-instant-search 1.0.47 → 1.0.49

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

@@ -490,11 +490,16 @@ const Popover = ({
   );
 };
 const Progress$1 = "";
-const Progress = ({ value, total, fillColor = "", outlineColor = "" }) => {
+const Progress = ({ value, total, fillColor = "", outlineColor = "", delay = 150 }) => {
   const [progress, setProgress] = React__default.useState(0);
   React__default.useEffect(() => {
-    const timer = setTimeout(() => setProgress(+value / total * 100), 150);
-    return () => clearTimeout(timer);
+    let valueProgress = +value / total * 100;
+    if (delay) {
+      const timer = setTimeout(() => setProgress(valueProgress), delay);
+      return () => clearTimeout(timer);
+    } else {
+      setProgress(valueProgress);
+    }
   }, []);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     $67824d98245208a0$export$be92b6f5f03c0fe9,
@@ -1315,6 +1320,12 @@ const Trigger = (props) => {
   });
   const [isRequiredLogin, setIsRequiredLogin] = React__default.useState(false);
   const [isFirstTime, setIsFirstTime] = React__default.useState(true);
+  const [hasEntry, setHasEntry] = React__default.useState(false);
+  const [rootRef, rootEntry] = useIntersectionObserver({
+    threshold: 0,
+    root: null,
+    rootMargin: "0px"
+  });
   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) || {};
@@ -1397,7 +1408,11 @@ const Trigger = (props) => {
     setIsLoading(false);
   };
   React__default.useEffect(() => {
-    if (!isRenderAppWishlist)
+    if (!hasEntry && (rootEntry == null ? void 0 : rootEntry.isIntersecting))
+      setHasEntry(rootEntry == null ? void 0 : rootEntry.isIntersecting);
+  }, [rootEntry]);
+  React__default.useEffect(() => {
+    if (!isRenderAppWishlist || !hasEntry)
       return;
     if (typeof window !== "undefined") {
       window.sledgeWishlistTriggerUpdate = () => {
@@ -1405,15 +1420,15 @@ const Trigger = (props) => {
       };
     }
     handleSettings(localStorage.getItem(LOCAL_STORAGE_KEY.WISHLIST_SETTING) || null);
-  }, [isRenderAppWishlist]);
+  }, [isRenderAppWishlist, hasEntry]);
   React__default.useEffect(() => {
     setIsRequiredLogin(sledgeAnonymId && is_required_login);
   }, [sledgeAnonymId]);
   React__default.useEffect(() => {
-    if (!isRenderAppWishlist)
+    if (!isRenderAppWishlist || !hasEntry)
       return;
     handleCheckWishlist();
-  }, [isRenderAppWishlist, productVariantId]);
+  }, [isRenderAppWishlist, hasEntry, productVariantId]);
   const isActive = (isWishlist || forceActive) && !isRequiredLogin;
   React__default.useEffect(() => {
     if (isActive) {
@@ -1424,7 +1439,7 @@ const Trigger = (props) => {
       setTypeIcon(defaultTypeIcon);
     }
   }, [isWishlist]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !isLoading && !hidden && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-wishlist__trigger-block", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: rootRef, children: !isLoading && !hidden && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-wishlist__trigger-block", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     "span",
     {
       className: "sledge-wishlist__trigger",
@@ -1891,7 +1906,13 @@ const Rating = (props) => {
   const [averageReview, setAverageReview] = React__default.useState(((_b = propsData == null ? void 0 : propsData.rating) == null ? void 0 : _b.average) || average || "0");
   const [dataSettings, setDataSettings] = React__default.useState((sledgeSettings == null ? void 0 : sledgeSettings.review) || {});
   const [isFirstTime, setIsFirstTime] = React__default.useState(true);
+  const [hasEntry, setHasEntry] = React__default.useState(false);
   const previousState = usePrevious({ productId });
+  const [rootRef, rootEntry] = useIntersectionObserver({
+    threshold: 0,
+    root: null,
+    rootMargin: "0px"
+  });
   const { fill_color = "#23BC45", outline_color = "#8D9196" } = ((_c = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _c.rating) || {};
   const unixTimestamp = getUnixTimestamp();
   const handleProductRatingInfo = async (paramsProductId, isTriggerMultiComponent = false) => {
@@ -1956,7 +1977,11 @@ const Rating = (props) => {
     }, 200);
   };
   React__default.useEffect(() => {
-    if (!isRenderAppProductReview)
+    if (!hasEntry && (rootEntry == null ? void 0 : rootEntry.isIntersecting))
+      setHasEntry(rootEntry == null ? void 0 : rootEntry.isIntersecting);
+  }, [rootEntry]);
+  React__default.useEffect(() => {
+    if (!isRenderAppProductReview || !hasEntry)
       return;
     if (size === "xs") {
       setSizing({
@@ -1978,7 +2003,7 @@ const Rating = (props) => {
     if (isProductIdChanged)
       setIsFirstLoading(true);
     handleSettings(localStorage.getItem(LOCAL_STORAGE_KEY.PRODUCT_REVIEW_SETTING) || null);
-  }, [isRenderAppProductReview, productId]);
+  }, [isRenderAppProductReview, hasEntry, productId]);
   React__default.useEffect(() => {
     if (!productId || productId && valueRenderProductReviewRating !== productId)
       return;
@@ -1995,6 +2020,7 @@ const Rating = (props) => {
       ...typeof size === "string" ? {
         ["data-rating-size"]: size
       } : {},
+      ref: rootRef,
       children: isFirstLoading && withSkeletonLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "230px", height: "28px", color: "lighten", rounded: "md" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !isLoading && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
         [1, 2, 3, 4, 5].map((item, index) => {
           if (!(item <= numberOfIcons))
@@ -2504,6 +2530,16 @@ const ProductCard = (props) => {
   const defaultSelectedVariantStock = (variants == null ? void 0 : variants.length) && Object.hasOwn(variants[0], "inventory_quantity") ? variants[0].inventory_quantity : 0;
   const [selectedVariantId, setSelectedVariantId] = React__default.useState(defaultSelectedVariantId);
   const [selectedVariantStock, setSelectedVariantStock] = React__default.useState(defaultSelectedVariantStock);
+  const [hasEntry, setHasEntry] = React__default.useState(false);
+  const [rootRef, rootEntry] = useIntersectionObserver({
+    threshold: 0,
+    root: null,
+    rootMargin: "0px"
+  });
+  React__default.useEffect(() => {
+    if (!hasEntry && (rootEntry == null ? void 0 : rootEntry.isIntersecting))
+      setHasEntry(rootEntry == null ? void 0 : rootEntry.isIntersecting);
+  }, [rootEntry]);
   let isLoadingAddToCart = clickedAddToCartId == selectedVariantId;
   let isOutOfStock = (variants == null ? void 0 : variants.length) && Object.hasOwn(variants[0], "inventory_quantity") ? !Number(selectedVariantStock) && showOptionOutOfStock : false;
   let component = null;
@@ -2531,7 +2567,7 @@ const ProductCard = (props) => {
       setShowPopupComponent,
       sourceApp
     };
-    component = /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isComponentJsVersion ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { dangerouslySetInnerHTML: { __html: CardsComponent({ ...CardsProps }) } }) : /* @__PURE__ */ jsxRuntimeExports.jsx(CardsComponent, { ...CardsProps }) });
+    component = /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isComponentJsVersion ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-entry-card", dangerouslySetInnerHTML: { __html: CardsComponent({ ...CardsProps }) } }) : /* @__PURE__ */ jsxRuntimeExports.jsx(CardsComponent, { ...CardsProps }) });
   } else {
     let setDefaultFunction = function() {
       if (!(variants == null ? void 0 : variants.length))
@@ -2806,7 +2842,7 @@ ${selectedOption === item2 ? "sledge__product-variant-size-swatch-active" : ""}
       ) }) : null
     ] });
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.Fragment, { children: component }, id);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-entry-card", ref: rootRef, children: hasEntry && component }, id);
 };
 const ProductGrid = (props) => {
   const { type, className = "", data, setting, sourceApp = null, useSlider = false, onAfterAddToCart, onAfterRenderProduct } = props;
@@ -3880,17 +3916,40 @@ const SearchIconWidgetPopup = () => {
     ] })
   ] }) });
 };
-const ButtonLoadMore = ({ text, onClick, isInfiniteScroll, ...otherProps }) => {
+const ButtonLoadMore = ({ text, onClick, isInfiniteScroll, currentPage, totalPage, totalResult, pageInfo: pageInfoProp, isVisibleLoadMore, ...otherProps }) => {
   const [ref, entry] = useIntersectionObserver({
     threshold: 0,
     root: null,
     rootMargin: "0px"
   });
+  const [pageInfo, setPageInfo] = React__default.useState(null);
+  const handlePageInfo = () => {
+    const defaultPageInfo = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      "Page ",
+      currentPage,
+      " of ",
+      totalPage,
+      " - total ",
+      totalResult,
+      " result"
+    ] });
+    if (pageInfoProp) {
+      pageInfoProp = pageInfoProp.replaceAll(OBJECT_DATA_STRING_KEY.CURRENT_PAGE, String(currentPage));
+      pageInfoProp = pageInfoProp.replaceAll(OBJECT_DATA_STRING_KEY.TOTAL_PAGE, String(totalPage));
+      pageInfoProp = pageInfoProp.replaceAll(OBJECT_DATA_STRING_KEY.TOTAL_RESULT, String(totalResult));
+    }
+    setPageInfo(pageInfoProp ? pageInfoProp : defaultPageInfo);
+  };
   React__default.useEffect(() => {
-    if (isInfiniteScroll && (entry == null ? void 0 : entry.isIntersecting))
+    handlePageInfo();
+    if (isInfiniteScroll && isVisibleLoadMore && (entry == null ? void 0 : entry.isIntersecting))
       onClick == null ? void 0 : onClick();
   }, [entry]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__pagination", ref, children: (entry == null ? void 0 : entry.isIntersecting) && /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { type: "button", role: "button", colorType: "light", onClick, ...otherProps, children: text }) });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__pagination", ref, children: (entry == null ? void 0 : entry.isIntersecting) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__load-more", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: pageInfo }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Progress, { value: currentPage, total: totalPage, delay: 0 }),
+    isVisibleLoadMore && /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { type: "button", role: "button", colorType: "light", onClick, ...otherProps, children: text })
+  ] }) });
 };
 const SearchResultWidget = (props) => {
   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;
@@ -5258,7 +5317,7 @@ const ResultProduct = (props) => {
       }
     ) }, indexFilter) : null;
   });
-  const paginationComponent = isLoadMore ? isVisibleLoadMore ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+  const paginationComponent = isLoadMore ? /* @__PURE__ */ jsxRuntimeExports.jsx(
     ButtonLoadMore,
     {
       disabled: isLoadingButtonLoadMore,
@@ -5269,9 +5328,14 @@ const ResultProduct = (props) => {
         }
       },
       text: isLoadingButtonLoadMore ? button_loading || "Loading..." : button_load_more || "Load More",
-      isInfiniteScroll: ((_k = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _k.pagination_type) === "infinite_scroll"
+      isInfiniteScroll: ((_k = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _k.pagination_type) === "infinite_scroll",
+      currentPage,
+      totalPage,
+      totalResult: totalSearchResult,
+      pageInfo: language_pagination_info,
+      isVisibleLoadMore
     }
-  ) : null : /* @__PURE__ */ jsxRuntimeExports.jsx(Pagination, { currentPage, totalPage, totalResult: totalSearchResult, onChange: (page) => handlePageChange(page), pageInfo: language_pagination_info });
+  ) : /* @__PURE__ */ jsxRuntimeExports.jsx(Pagination, { currentPage, totalPage, totalResult: totalSearchResult, onChange: (page) => handlePageChange(page), pageInfo: language_pagination_info });
   const filterHorizontalBlockComponent = ((_l = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _l.enable_on_search) && allowedFilter.length ? /* @__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 }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-horizontal-wrapper", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-horizontal sledge-instant-search__result-filter-horizontal-component", children: filterHorizontalComponents }),
     Boolean((dataClickedFacets == null ? void 0 : dataClickedFacets.length) && ((_m = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _m.show_refine_by_block)) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-horizontal", children: [