@sledge-app/react-instant-search 0.0.89 → 0.0.91

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

@@ -33,7 +33,8 @@ const DATASET_ATTRIBUTE_KEY = {
     ICON_SIZE: "data-icon-size",
     API_KEY: "data-api-key",
     INSTANT_SEARCH_API_KEY: "data-instant-search-api-key",
-    RENDER_PRODUCT_CARD: "data-render-product-card"
+    RENDER_PRODUCT_CARD: "data-render-product-card",
+    WITH_SKELETON_LOADING: "data-with-skeleton-loading"
   },
   WISHLIST: {
     SHARE_ID: "data-share-id",
@@ -43,7 +44,9 @@ const DATASET_ATTRIBUTE_KEY = {
     USE_PROXY_URL: "data-use-proxy-url"
   },
   PRODUCT_REVIEW: {
-    RATING_SIZE: "data-rating-size"
+    RATING_SIZE: "data-rating-size",
+    RATING_TOTAL: "data-rating-total",
+    RATING_AVERAGE: "data-rating-average"
   },
   INSTANT_SEARCH: {
     QUERY_KEYWORD: "data-query-keyword",
@@ -65,6 +68,7 @@ const INTERNAL_SELECTOR_VALUE = {
   ELEMENT_TOAST_NOTIFICATION: "toast-notification",
   ELEMENT_CONFIRMATION_POPUP: "confirmation-popup",
   ELEMENT_INFO_POPUP: "info-popup",
+  ELEMENT_CONTAINER_WIDGET: "container-widget",
   WISHLIST: {
     ELEMENT_BADGE_FLOATING_ICON: "wishlist-badge-floating-icon",
     ELEMENT_BADGE_FLOATING_FULL: "wishlist-badge-floating-full",
@@ -117,14 +121,19 @@ const sanitizeDataId = (id) => {
     return getId;
   }
 };
-const detectInitSelector = (element, init) => {
+const detectInitSelector = (element, init, reRender) => {
   let hasRunning = false;
-  document.body.addEventListener("DOMNodeInserted", () => {
-    if (!hasRunning && element) {
-      hasRunning = true;
+  if (!reRender) {
+    document.body.addEventListener("DOMNodeInserted", () => {
+      if (!hasRunning && element) {
+        hasRunning = true;
+        init();
+      }
+    });
+  } else {
+    if (element)
       init();
-    }
-  });
+  }
 };
 const isFunction = (data) => typeof data === "function";
 const scrollToElement = (element, headerOffset) => {
@@ -710,6 +719,29 @@ const BadgeHeaderMenu = (props) => {
     !isFirstLoading && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `sledge-wishlist__badge-counter sledge-wishlist__badge-counter-header-menu ${isMaximizeTotalWishlist ? "sledge-wishlist__badge-fit-content" : ""}`, children: isLoading || isRequiredLogin ? 0 : `${isMaximizeTotalWishlist ? "99+" : totalWishlist}` || 0 })
   ] });
 };
+const getWishlist = async (query, token) => {
+  const { page, limit, sort, keyword, shareId } = query || {};
+  let sledgeAuthApp = token || localStorage.getItem(LOCAL_STORAGE_KEY.AUTH_APP);
+  let queryParams = "?" + new URLSearchParams({
+    page: page || "",
+    limit: limit || "",
+    sort: sort || "",
+    keyword: keyword || "",
+    share_id: shareId || ""
+  }).toString();
+  var myHeaders = new Headers();
+  myHeaders.append("Authorization", `Bearer ${sledgeAuthApp}`);
+  var requestOptions = {
+    method: "GET",
+    headers: myHeaders,
+    redirect: "follow"
+  };
+  return await fetch(`${API_URL}/wishlist${queryParams}`, requestOptions).then((response) => response.json()).then((result) => {
+    return result;
+  }).catch(() => {
+    return;
+  });
+};
 const addWishlist = async (data) => {
   const { productId, productVariantId, productName, productVendor, productSku, productVariantName, productLink, productImage, productCurrency, productPrice } = data;
   let sledgeAuthApp = localStorage.getItem(LOCAL_STORAGE_KEY.AUTH_APP);
@@ -892,7 +924,7 @@ Badge.Root = BadgeRoot;
 Badge.HeaderMenu = BadgeHeaderMenu;
 Badge.FloatingFull = BadgeFloatingFull;
 Badge.FloatingIcon = BadgeFloatingIcon;
-const BadgeInitSelector = () => {
+const BadgeInitSelector = (reRender = false) => {
   const sledgeWishlistSettings = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY.WISHLIST_SETTING) || "");
   if (!sledgeWishlistSettings)
     return;
@@ -952,33 +984,41 @@ const BadgeInitSelector = () => {
     }
   } else {
     let element = Array.from(document.querySelectorAll(SELECTOR.WISHLIST.ELEMENT_BADGE));
-    detectInitSelector(element, () => {
-      if (element.length) {
-        element.map((item) => {
-          if (item) {
-            const USE_PROXY_URL = item.getAttribute(DATASET_ATTRIBUTE_KEY.WISHLIST.USE_PROXY_URL);
-            item.innerHTML = "";
-            client.createRoot(item).render(
-              /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.StrictMode, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                SledgeContext.Provider,
-                {
-                  value: {
-                    isRenderApp: {
-                      wishlist: true,
-                      productReview: true,
-                      instantSearch: true
+    detectInitSelector(
+      element,
+      () => {
+        if (element.length) {
+          element.map((item) => {
+            if (item) {
+              const USE_PROXY_URL = item.getAttribute(DATASET_ATTRIBUTE_KEY.WISHLIST.USE_PROXY_URL);
+              if (item.querySelector(`[${SELECTOR_ATTRIBUTE_KEY}="${INTERNAL_SELECTOR_VALUE.ELEMENT_CONTAINER_WIDGET}"]`))
+                item.querySelector(`[${SELECTOR_ATTRIBUTE_KEY}="${INTERNAL_SELECTOR_VALUE.ELEMENT_CONTAINER_WIDGET}"]`).remove();
+              let elementContainerWidget = document.createElement("div");
+              elementContainerWidget.setAttribute(SELECTOR_ATTRIBUTE_KEY, INTERNAL_SELECTOR_VALUE.ELEMENT_CONTAINER_WIDGET);
+              item.appendChild(elementContainerWidget);
+              client.createRoot(elementContainerWidget).render(
+                /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.StrictMode, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  SledgeContext.Provider,
+                  {
+                    value: {
+                      isRenderApp: {
+                        wishlist: true,
+                        productReview: true,
+                        instantSearch: true
+                      },
+                      sledgeAnonymId: localStorage.getItem(LOCAL_STORAGE_KEY.ANONYM_ID) || "",
+                      isJsVersion: true
                     },
-                    sledgeAnonymId: localStorage.getItem(LOCAL_STORAGE_KEY.ANONYM_ID) || "",
-                    isJsVersion: true
-                  },
-                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(Badge.Root, { useProxyUrl: Boolean(USE_PROXY_URL && USE_PROXY_URL === "true"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(Badge.HeaderMenu, {}) })
-                }
-              ) })
-            );
-          }
-        });
-      }
-    });
+                    children: /* @__PURE__ */ jsxRuntimeExports.jsx(Badge.Root, { useProxyUrl: Boolean(USE_PROXY_URL && USE_PROXY_URL === "true"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(Badge.HeaderMenu, {}) })
+                  }
+                ) })
+              );
+            }
+          });
+        }
+      },
+      reRender
+    );
   }
 };
 const Trigger = (props) => {
@@ -1038,10 +1078,10 @@ const Trigger = (props) => {
     const { status, data: response_data } = resAddWishlist || {};
     const { code } = status || {};
     if (code === 200) {
+      if (((_b2 = (_a2 = triggerRenderMultipleComponent == null ? void 0 : triggerRenderMultipleComponent.wishlist) == null ? void 0 : _a2.badge) == null ? void 0 : _b2.trigger) && typeof wishlistChecked !== "boolean")
+        (_f = (_c2 = triggerRenderMultipleComponent == null ? void 0 : triggerRenderMultipleComponent.wishlist) == null ? void 0 : _c2.badge) == null ? void 0 : _f.trigger(!((_e = (_d = triggerRenderMultipleComponent == null ? void 0 : triggerRenderMultipleComponent.wishlist) == null ? void 0 : _d.badge) == null ? void 0 : _e.value));
+      BadgeInitSelector(true);
       if (typeof window !== "undefined") {
-        if (((_b2 = (_a2 = triggerRenderMultipleComponent == null ? void 0 : triggerRenderMultipleComponent.wishlist) == null ? void 0 : _a2.badge) == null ? void 0 : _b2.trigger) && typeof wishlistChecked !== "boolean")
-          (_f = (_c2 = triggerRenderMultipleComponent == null ? void 0 : triggerRenderMultipleComponent.wishlist) == null ? void 0 : _c2.badge) == null ? void 0 : _f.trigger(!((_e = (_d = triggerRenderMultipleComponent == null ? void 0 : triggerRenderMultipleComponent.wishlist) == null ? void 0 : _d.badge) == null ? void 0 : _e.value));
-        BadgeInitSelector();
         if (window.sledgeWishlistWidgetListUpdate)
           window.sledgeWishlistWidgetListUpdate();
         if (window.sledgeWishlistButtonDetailUpdate)
@@ -1520,23 +1560,39 @@ const getReviewInfo = async (id) => {
     return;
   });
 };
+const getProductsReviewInfo = async (ids, token) => {
+  let convertIds = ids.map((v) => sanitizeDataId(v));
+  let sledgeAuthApp = token || localStorage.getItem(LOCAL_STORAGE_KEY.AUTH_APP);
+  var myHeaders = new Headers();
+  myHeaders.append("Authorization", `Bearer ${sledgeAuthApp}`);
+  var requestOptions = {
+    method: "GET",
+    headers: myHeaders,
+    redirect: "follow"
+  };
+  return await fetch(`${API_URL}/review/info/ids/${convertIds.join(",")}`, requestOptions).then((response) => response.json()).then((result) => {
+    return result;
+  }).catch(() => {
+    return;
+  });
+};
 const Rating = (props) => {
   var _a, _b;
-  const { value, size = "md", params, withSkeletonLoading = true, isScrollToElementWidget = true, data: propsData, sledgeSettings } = props;
+  const { total, average, size = "md", params, withSkeletonLoading = true, withTotal = true, isScrollToElementWidget = true, data: propsData, sledgeSettings } = props;
   const { productId } = params || {};
   const { isRenderApp, triggerRenderMultipleComponent } = React__default.useContext(SledgeContext);
   const { productReview: isRenderAppProductReview } = isRenderApp || {};
-  const initLoading = propsData || value ? false : true;
+  const initLoading = propsData || typeof total !== "undefined" || typeof average !== "undefined" ? false : true;
   const [isFirstLoading, setIsFirstLoading] = React__default.useState(initLoading);
   const [isLoading, setIsLoading] = React__default.useState(initLoading);
   const [sizing, setSizing] = React__default.useState(
-    propsData || value ? getSizing(size) : {
+    propsData || typeof total !== "undefined" || typeof average !== "undefined" ? getSizing(size) : {
       width: 0,
       height: 0
     }
   );
-  const [totalReview, setTotalReview] = React__default.useState((propsData == null ? void 0 : propsData.review_count) || 0);
-  const [averageReview, setAverageReview] = React__default.useState(((_a = propsData == null ? void 0 : propsData.rating) == null ? void 0 : _a.average) || value || "0");
+  const [totalReview, setTotalReview] = React__default.useState((propsData == null ? void 0 : propsData.review_count) || total || 0);
+  const [averageReview, setAverageReview] = React__default.useState(((_a = propsData == null ? void 0 : propsData.rating) == null ? void 0 : _a.average) || average || "0");
   const [dataSettings, setDataSettings] = React__default.useState((sledgeSettings == null ? void 0 : sledgeSettings.review) || {});
   const [isFirstTime, setIsFirstTime] = React__default.useState(true);
   const previousState = usePrevious({ productId });
@@ -1575,8 +1631,7 @@ const Rating = (props) => {
     }
   };
   const handleRefreshProductRating = async () => {
-    if (value && !params) {
-      setAverageReview(value);
+    if (typeof total !== "undefined" || typeof average !== "undefined") {
       setIsLoading(false);
     } else {
       handleProductRatingInfo(productId);
@@ -1666,7 +1721,7 @@ const Rating = (props) => {
         }
         return /* @__PURE__ */ createElement("svg", { ...sizing, viewBox: "0 0 30 29", "data-product-review-rating-fill": item <= ratingValue ? "full" : fillOther, key: index }, /* @__PURE__ */ jsxRuntimeExports.jsx("use", { href: "#sledge-product-review-icons-rating-icon" }));
       }),
-      !value && params ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-product-review__rating-summary-total", children: [
+      withTotal ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-product-review__rating-summary-total", children: [
         "(",
         totalReview,
         ")"
@@ -1883,7 +1938,18 @@ const WidgetHeaderSummary = (props) => {
     {
       trigger: /* @__PURE__ */ jsxRuntimeExports.jsxs(motion.div, { initial: false, animate: isOpen ? "open" : "closed", className: "sledge-product-review__widget-summary-trigger", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-product-review__widget-summary-average", children: averageReview }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-product-review__widget-summary-rating", children: !isRefreshRating && /* @__PURE__ */ jsxRuntimeExports.jsx(Rating, { data: summaryData, sledgeSettings, value: String(averageReview), size: "md", withSkeletonLoading: false, isScrollToElementWidget: false }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-product-review__widget-summary-rating", children: !isRefreshRating && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Rating,
+          {
+            data: summaryData,
+            sledgeSettings,
+            average: String(averageReview),
+            size: "md",
+            withSkeletonLoading: false,
+            withTotal: false,
+            isScrollToElementWidget: false
+          }
+        ) }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-product-review__widget-summary-total", children: [
           totalReview,
           " ",
@@ -1920,7 +1986,18 @@ const WidgetHeaderSummary = (props) => {
         ] }, index);
       }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-product-review__widget-summary-dist", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-product-review__widget-summary-dist-progress", children: [5, 4, 3, 2, 1].map((item, index) => {
         return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-product-review__widget-summary-dist-progress-item", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Rating, { data: summaryData, sledgeSettings, value: item, size: "sm", withSkeletonLoading: false, isScrollToElementWidget: false }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Rating,
+            {
+              data: summaryData,
+              sledgeSettings,
+              average: item,
+              size: "sm",
+              withSkeletonLoading: false,
+              withTotal: false,
+              isScrollToElementWidget: false
+            }
+          ),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             Progress,
             {
@@ -2136,6 +2213,7 @@ const ProductGrid = ({
     onAfterRenderProduct && onAfterRenderProduct("success");
   }, []);
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge__product-grid ${className}`, "data-grid-type": type, children: data == null ? void 0 : data.map((item, index) => {
+    var _a, _b, _c;
     const { product, variants } = item || {};
     const { id, title, image, url, vendor = "", currency } = product || {};
     const { id: variant_id = "", title: variant_title = "", price = "", sku = "" } = (variants == null ? void 0 : variants.length) ? variants[0] : {};
@@ -2151,7 +2229,11 @@ const ProductGrid = ({
               ...variant,
               is_out_of_stock: Object.hasOwn(variants[index2], "inventory_quantity") ? !inventory_quantity : false
             };
-          })
+          }),
+          review: {
+            total: ((_a = dataReviews == null ? void 0 : dataReviews[id]) == null ? void 0 : _a.review_count) ? dataReviews == null ? void 0 : dataReviews[id].review_count : 0,
+            average: ((_c = (_b = dataReviews == null ? void 0 : dataReviews[id]) == null ? void 0 : _b.rating) == null ? void 0 : _c.average) ? dataReviews == null ? void 0 : dataReviews[id].rating.average : 0
+          }
         }
       },
       showPopupComponent,
@@ -2678,6 +2760,19 @@ const SearchIconWidget = (props) => {
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-instant-search__icon-widget", onClick: handleShowWidget, children: /* @__PURE__ */ jsxRuntimeExports.jsx(SearchIcon, { ...sizing, color: "currentColor" }) });
 };
+const wishlistCheck = async (session, productIds = []) => {
+  let wishlisted = await getWishlist({ limit: 1e3 }, session.token);
+  wishlisted = (wishlisted == null ? void 0 : wishlisted.data) || [];
+  let result = {};
+  for (let id of productIds) {
+    const exist = wishlisted.find((f) => {
+      var _a, _b;
+      return ((_b = (_a = f.product) == null ? void 0 : _a.id) == null ? void 0 : _b.toString()) === id.toString();
+    });
+    result[id] = !!exist;
+  }
+  return result;
+};
 const OtherIndexLists = ({
   listsComponent,
   name,
@@ -2742,11 +2837,14 @@ const Global = {
 };
 const SearchIconWidgetPopup = () => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v;
+  const { isRenderApp } = React__default.useContext(SledgeContext);
+  const { instantSearch: isRenderAppInstantSearch } = isRenderApp || {};
   const [isLoading, setIsLoading] = React__default.useState(true);
   const [showInfo, setShowInfo] = React__default.useState(false);
   const [keyword, setKeyword] = React__default.useState("");
   const [searchResultProduct, setSearchResultProduct] = React__default.useState([]);
   const [searchResultOther, setSearchResultOther] = React__default.useState([]);
+  const [dataReviews, setDataReviews] = React__default.useState([]);
   const [displaySettings, setDisplaySettings] = React__default.useState({});
   const [suggestionSettings, setSuggestionSettings] = React__default.useState({});
   const [suggestionIndex, setSuggestionIndex] = React__default.useState("");
@@ -2768,9 +2866,7 @@ const SearchIconWidgetPopup = () => {
   const searchFieldRef = React__default.useRef(null);
   const previousState = usePrevious({ keyword });
   const handleMultiSearch = async (data, onSearch = false) => {
-    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2;
-    if (!showInfo)
-      return;
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2;
     setIsLoading(true);
     const { tabs, suffix_index_product, hidden_tags, display, show_out_of_stock } = data;
     const suggestion = ((_a2 = display == null ? void 0 : display.search) == null ? void 0 : _a2.suggestion) || {};
@@ -2818,15 +2914,24 @@ const SearchIconWidgetPopup = () => {
     let isPriorityZeroCharacter = Boolean(
       !keyword.length && Object.keys(suggestion).length && ((_f2 = (_e2 = suggestion[valueSuggestionIndex]) == null ? void 0 : _e2.products) == null ? void 0 : _f2.active) && ((_i2 = (_h2 = (_g2 = suggestion[valueSuggestionIndex]) == null ? void 0 : _g2.products) == null ? void 0 : _h2.list) == null ? void 0 : _i2.length)
     );
-    setSearchResultProduct(isPriorityZeroCharacter ? (_k2 = (_j2 = suggestion[valueSuggestionIndex]) == null ? void 0 : _j2.products) == null ? void 0 : _k2.list : getValueSearchResultProduct);
+    let dataSearchResultProduct = isPriorityZeroCharacter ? (_k2 = (_j2 = suggestion[valueSuggestionIndex]) == null ? void 0 : _j2.products) == null ? void 0 : _k2.list : getValueSearchResultProduct;
+    let searchResultProductIds = dataSearchResultProduct.map(({ id }) => id);
+    await wishlistCheck(
+      {
+        token: (localStorage == null ? void 0 : localStorage.getItem(LOCAL_STORAGE_KEY.AUTH_APP)) || null
+      },
+      searchResultProductIds
+    );
+    let valueDataReviews = await getProductsReviewInfo(searchResultProductIds);
+    if (((_l2 = valueDataReviews == null ? void 0 : valueDataReviews.status) == null ? void 0 : _l2.code) === 200)
+      setDataReviews(valueDataReviews == null ? void 0 : valueDataReviews.data);
+    setSearchResultProduct(dataSearchResultProduct);
     setSearchResultOther(valueSearchResultOther);
     setSuggestionIndex(valueSuggestionIndex);
     setIsLoading(false);
   };
   const handleSettings = async (LOCAL_STORAGE_INSTANT_SEARCH_SETTING) => {
     var _a2;
-    if (!showInfo)
-      return;
     let response;
     response = JSON.parse(LOCAL_STORAGE_INSTANT_SEARCH_SETTING);
     if (!response)
@@ -2837,6 +2942,8 @@ const SearchIconWidgetPopup = () => {
     await handleMultiSearch(response);
   };
   React__default.useEffect(() => {
+    if (!isRenderAppInstantSearch)
+      return;
     if (typeof window !== "undefined") {
       window.sledgeInstantSearchIconWidgetPopup = ({
         onAfterAddToCart = () => {
@@ -2878,6 +2985,8 @@ const SearchIconWidgetPopup = () => {
       };
     }
     handleSettings(localStorage.getItem(LOCAL_STORAGE_KEY.INSTANT_SEARCH_SETTING) || "");
+  }, [isRenderAppInstantSearch]);
+  React__default.useEffect(() => {
     showInfo ? document.body.classList.add("sledge__open-popup-state") : document.body.classList.remove("sledge__open-popup-state");
   }, [showInfo]);
   React__default.useEffect(() => {
@@ -3002,7 +3111,8 @@ const SearchIconWidgetPopup = () => {
               onAfterRemoveWishlist: handleFunctions.onAfterRemoveWishlist,
               onAfterRenderProduct: handleFunctions.onAfterRenderProduct,
               showPopupComponent: showInfo,
-              setShowPopupComponent: setShowInfo
+              setShowPopupComponent: setShowInfo,
+              dataReviews
             }
           ) }) : Object.keys(suggestionSettings).length && ((_k = (_j = suggestionSettings[suggestionIndex]) == null ? void 0 : _j.products) == null ? void 0 : _k.active) && ((_n = (_m = (_l = suggestionSettings[suggestionIndex]) == null ? void 0 : _l.products) == null ? void 0 : _m.list) == null ? void 0 : _n.length) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__icon-widget-search-form-result-product-suggestion-no-result-text", children: [