@sledge-app/react-instant-search 0.0.40 → 0.0.41

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

@@ -2,9 +2,9 @@ import { j as jsxRuntimeExports, $ as $cb5cc270b50c6fcd$export$be92b6f5f03c0fe9,
 import React__default, { createElement } from "react";
 import { SledgeContext } from "@sledge-app/core";
 import "react-dom";
-const ProductFilterWidget = (props) => {
+const ProductFilterWidget = React__default.memo((props) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(SearchResultWidget, { layoutType: "product-filter", ...props });
-};
+});
 const API_URL = "https://sledge-api-preprod.offstack.io";
 const INSTANT_SEARCH_ENGINE_URL = "https://instant-search-engine.offstack.io";
 const LOCAL_STORAGE_KEY = {
@@ -25,6 +25,11 @@ const SEPARATE_COMPONENT_DISPLAY_NAME = {
   SEARCH_VIEW_MORE_RESULT: "SearchViewMoreResult",
   WISHLIST_WIDGET_ALERT: "WishlistWidgetAlert"
 };
+const ELEMENT_ID = {
+  PRODUCT_REVIEW: {
+    ELEMENT_WIDGET: "product-review-widget"
+  }
+};
 const sanitizeDataId = (id) => {
   if (!id)
     return "";
@@ -38,6 +43,8 @@ const sanitizeDataId = (id) => {
 };
 const isFunction = (data) => typeof data === "function";
 const scrollToElement = (element, headerOffset) => {
+  if (!element)
+    return;
   var elementPosition = element == null ? void 0 : element.getBoundingClientRect().top;
   var offsetPosition = elementPosition + window.scrollY - headerOffset;
   window.scrollTo({
@@ -1165,7 +1172,7 @@ const getReviewInfo = async (id) => {
 };
 const Rating = (props) => {
   var _a;
-  const { value, size = "md", data, withSkeletonLoading = true } = props;
+  const { value, size = "md", data, withSkeletonLoading = true, isScrollToElementWidget = true } = props;
   const { productId } = data || {};
   const { isRenderApp } = React__default.useContext(SledgeContext);
   const [isFirstLoading, setIsFirstLoading] = React__default.useState(true);
@@ -1220,6 +1227,13 @@ const Rating = (props) => {
       await handleProductRatingInfo();
     }
   };
+  const handleOnClick = () => {
+    if (!isScrollToElementWidget)
+      return;
+    setTimeout(() => {
+      scrollToElement(document.getElementById(ELEMENT_ID.PRODUCT_REVIEW.ELEMENT_WIDGET), 50);
+    }, 200);
+  };
   React__default.useEffect(() => {
     if (!(isRenderApp == null ? void 0 : isRenderApp.productReview))
       return;
@@ -1244,7 +1258,7 @@ const Rating = (props) => {
       setIsFirstLoading(true);
     handleSettings(localStorage.getItem(LOCAL_STORAGE_KEY.PRODUCT_REVIEW_SETTING) || "");
   }, [isRenderApp, productId]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-product-review__rating", children: isFirstLoading && withSkeletonLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "230px", height: "28px", color: "grey-100", rounded: "md" }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+  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(
         "path",
@@ -1469,7 +1483,7 @@ const WidgetHeaderSummary = (props) => {
     {
       trigger: isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {}) : /* @__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, { value: String(averageReview), size: "md", withSkeletonLoading: false }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-product-review__widget-summary-rating", children: !isRefreshRating && /* @__PURE__ */ jsxRuntimeExports.jsx(Rating, { value: String(averageReview), size: "md", withSkeletonLoading: false, isScrollToElementWidget: false }) }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-product-review__widget-summary-total", children: [
           totalReview,
           " ",
@@ -1506,7 +1520,7 @@ 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, { value: item, size: "sm", withSkeletonLoading: false }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Rating, { value: item, size: "sm", withSkeletonLoading: false, isScrollToElementWidget: false }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             Progress,
             {
@@ -1814,7 +1828,8 @@ const ProductGrid = ({
                 productId: id
               },
               size: "xs",
-              withSkeletonLoading: false
+              withSkeletonLoading: false,
+              isScrollToElementWidget: false
             }
           ) })
         ] })
@@ -2625,7 +2640,7 @@ const SearchIconWidgetPopup = () => {
   ] }) });
 };
 const SearchResultWidget$1 = "";
-const SearchResultWidget = (props) => {
+const SearchResultWidget = React__default.memo((props) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
   const { isRenderApp, isJsVersion } = React__default.useContext(SledgeContext);
   const { layoutType = "default", query, data, children, onAfterAddToCart, onAfterAddWishlist, onAfterRemoveWishlist, onAfterRenderProduct } = props;
@@ -3117,7 +3132,7 @@ const SearchResultWidget = (props) => {
       searchResultContainerRef
     })
   ] });
-};
+});
 const ResultProduct = (props) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t;
   const {
@@ -3625,7 +3640,7 @@ const ResultProduct = (props) => {
   });
   const paginationComponent = /* @__PURE__ */ jsxRuntimeExports.jsx(Pagination, { currentPage, totalPage, totalResult: totalSearchResult, onChange: (page) => handlePageChange(page) });
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    ((_f = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _f.enable_on_search) && ((_g = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _g.layout) === "horizontal" ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isFirstLoading ? filterHorizontalSkeleton : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isLoadingSetting ? null : filterHorizontalComponents.every((currentValue) => !currentValue) ? null : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-horizontal-wrapper", children: [
+    ((_f = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _f.enable_on_search) && ((_g = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _g.layout) === "horizontal" ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isFirstLoading ? filterHorizontalSkeleton : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isLoadingSetting ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-horizontal-loading", children: filterHorizontalSkeleton }) : filterHorizontalComponents.every((currentValue) => !currentValue) ? null : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-horizontal-wrapper", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-horizontal", children: filterHorizontalComponents }),
       Boolean((dataClickedFacets == null ? void 0 : dataClickedFacets.length) && ((_h = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _h.show_refine_by_block)) ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: Boolean(dataClickedFacets.every((currentValue) => !currentValue)) ? null : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-horizontal", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -3648,7 +3663,7 @@ const ResultProduct = (props) => {
       ] }) }) : null
     ] }) }) }) : null,
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-wrapper", "data-filter-layout": (_i = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _i.layout, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-      ((_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" ? isFirstLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter", children: filterVerticalSkeleton }) : filterVerticalComponents.every((currentValue) => !currentValue) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter", children: isLoadingSetting ? null : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      ((_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" ? isFirstLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter", children: filterVerticalSkeleton }) : filterVerticalComponents.every((currentValue) => !currentValue) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter", children: isLoadingSetting ? filterVerticalSkeleton : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
         Boolean((dataClickedFacets == null ? void 0 : dataClickedFacets.length) && ((_l = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _l.show_refine_by_block)) ? Boolean(dataClickedFacets.every((currentValue) => !currentValue)) ? null : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item-title-refine", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { className: "sledge-instant-search__result-filter-item-title-refine-heading", children: "Filter" }),