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

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

@@ -1320,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) || {};
@@ -1402,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 = () => {
@@ -1410,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) {
@@ -1429,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",
@@ -1896,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) => {
@@ -1961,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({
@@ -1983,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;
@@ -2000,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))
@@ -2509,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;
@@ -2536,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))
@@ -2811,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;