@sledge-app/react-instant-search 0.0.74 → 0.0.75

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

@@ -6,7 +6,7 @@ const ProductFilterWidget = (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 INSTANT_SEARCH_ENGINE_URL = "http://localhost:7700";
 const LOCAL_STORAGE_KEY = {
   ANONYM_ID: "sledge-anonym-id",
   AUTH_APP: "sledge-auth-app",
@@ -1564,8 +1564,8 @@ const WidgetHeader = (props) => {
 WidgetHeader.Sort = WidgetHeaderSort;
 WidgetHeader.AddTrigger = WidgetHeaderAddTrigger;
 WidgetHeader.Summary = WidgetHeaderSummary;
-const fetchApi = async (url, method, body) => {
-  let sledgeInstantSearchAuthApp = localStorage.getItem(LOCAL_STORAGE_KEY.INSTANT_SEARCH_AUTH_APP);
+const fetchApi = async (url, method, body, token) => {
+  let sledgeInstantSearchAuthApp = token || localStorage.getItem(LOCAL_STORAGE_KEY.INSTANT_SEARCH_AUTH_APP);
   var myHeaders = new Headers();
   myHeaders.append("Authorization", `Bearer ${sledgeInstantSearchAuthApp}`);
   myHeaders.append("Content-Type", "application/json");
@@ -1586,8 +1586,8 @@ const fetchApi = async (url, method, body) => {
 const search = async (index, body) => {
   return await fetchApi(`/indexes/${index}/search`, "POST", body);
 };
-const multiSearch = async (body) => {
-  return await fetchApi("/multi-search", "POST", body);
+const multiSearch = async (body, token) => {
+  return await fetchApi("/multi-search", "POST", body, token);
 };
 const searchTrigger = async (data) => {
   const { keyword, resultCount } = data;
@@ -1673,7 +1673,8 @@ const ProductGrid = ({
   onAfterRenderProduct,
   showPopupComponent,
   setShowPopupComponent,
-  dataReviews
+  dataReviews,
+  dataWishlists
 }) => {
   const {
     show_vendor = true,
@@ -1787,7 +1788,8 @@ const ProductGrid = ({
                     },
                     ...triggerPropAdditional,
                     onAfterAddWishlist,
-                    onAfterRemoveWishlist
+                    onAfterRemoveWishlist,
+                    wishlistChecked: dataWishlists == null ? void 0 : dataWishlists[id]
                   }
                 ),
                 /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: (image == null ? void 0 : image.src) || "", alt: "sledge-product-card-image", loading: "lazy", onError: (event) => event.currentTarget.src = `${API_URL}/img/blank-image.png` })
@@ -2664,10 +2666,9 @@ const SearchIconWidgetPopup = () => {
   ] }) });
 };
 const SearchResultWidget = (props) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
-  console.log("SearchResultWidget");
+  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 } = props;
+  const { layoutType = "default", query, params, children, onAfterAddToCart, onAfterAddWishlist, onAfterRemoveWishlist, onAfterRenderProduct, data: propsData } = props;
   const { keyword: queryKeyword = "" } = query || {};
   const { collectionId } = params || {};
   let productCardsComponent = null;
@@ -2678,6 +2679,7 @@ const SearchResultWidget = (props) => {
         productCardsComponent = productCard;
     }
   });
+  const [settings] = React__default.useState(typeof localStorage !== "undefined" ? (_a = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY.INSTANT_SEARCH_SETTING) || "{}")) == null ? void 0 : _a.data : {});
   const [isFirstLoading, setIsFirstLoading] = React__default.useState(true);
   const [isLoading, setIsLoading] = React__default.useState(true);
   const [keyword, setKeyword] = React__default.useState("");
@@ -2696,6 +2698,7 @@ const SearchResultWidget = (props) => {
   const [colorSwatches, setColorSwatches] = React__default.useState([]);
   const [defaultSort, setDefaultSort] = React__default.useState("");
   const [showOutOfStock, setShowOutOfStock] = React__default.useState(false);
+  const [initStatesFirstTime, setInitStatesFirstTime] = React__default.useState(true);
   const searchResultContainerRef = React__default.useRef(null);
   const previousState = usePrevious({ keyword });
   const handleChangeTabIndex = (id, name, e) => {
@@ -2743,7 +2746,12 @@ const SearchResultWidget = (props) => {
         };
       })
     };
-    response = await multiSearch(body);
+    if (propsData && initStatesFirstTime) {
+      response = propsData.result;
+      setInitStatesFirstTime(false);
+      response = await multiSearch(body);
+    } else
+      response = await multiSearch(body);
     if (!response)
       return;
     const { results } = response;
@@ -2840,8 +2848,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 = ((_a = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _a.enable_on_search) && ((_b = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _b.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 = ((_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) === "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",
       {
@@ -3057,7 +3065,7 @@ const SearchResultWidget = (props) => {
     )
   ] }) : null;
   const productGridSkeleton = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    ((_e = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _e.show_total_products) && ((_f = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _f.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",
@@ -3073,7 +3081,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: [
-    ((_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) === "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,
       {
@@ -3100,11 +3108,11 @@ const SearchResultWidget = (props) => {
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-instant-search__result-tab-total", children: total || 0 })
       ] }, index);
     }) }) : null }),
-    isFirstLoading && (layoutType == null ? void 0 : layoutType.length) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    isFirstLoading && (layoutType == null ? void 0 : layoutType.length) && !propsData ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
       tabSkeleton,
       filterHorizontalSkeleton,
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-wrapper sledge-instant-search__result-wrapper-skeleton", children: [
-        ((_i = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _i.enable_on_search) && ((_j = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _j.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
@@ -3139,7 +3147,9 @@ const SearchResultWidget = (props) => {
       filterVerticalSkeleton,
       productGridSkeleton,
       searchAndSelectOptionSkeleton,
-      searchResultContainerRef
+      searchResultContainerRef,
+      data: propsData,
+      settings
     })
   ] });
 };
@@ -3171,7 +3181,9 @@ const ResultProduct = (props) => {
     onAfterAddWishlist,
     onAfterRemoveWishlist,
     onAfterRenderProduct,
-    searchResultContainerRef
+    searchResultContainerRef,
+    data: propsData,
+    settings
   } = props || {};
   const { keyword: queryKeyword = "" } = query || {};
   const { collectionId } = params || {};
@@ -3198,6 +3210,7 @@ const ResultProduct = (props) => {
   const [allowedFilter, setAllowedFilter] = React__default.useState([]);
   const [isFilterChanged, setIsFilterChanged] = React__default.useState(false);
   const [summaryText, setSummaryText] = React__default.useState(null);
+  const [handleSearchResultFirstTime, setHandleSearchResultFirstTime] = React__default.useState(true);
   const previousState = usePrevious({ keyword, clickedLimitId, clickedFacets });
   const { color: filter_title_color, font_size: filter_title_font_size, font_weight: filter_title_font_weight, text_transform: filter_title_text_transform } = ((_c = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _c.title) || {};
   const {
@@ -3371,6 +3384,7 @@ const ResultProduct = (props) => {
     );
   };
   const handleSearchResult = async (isRefreshPage = false, onSearch = false) => {
+    var _a2, _b2;
     if (!clickedTabIndexId)
       return;
     if (isRefreshPage)
@@ -3379,13 +3393,13 @@ const ResultProduct = (props) => {
     let detectClickedFacets = detectQueryStringFilter(clickedFacets);
     let response;
     let filters = Object.entries(detectClickedFacets).map((facet) => {
-      var _a2, _b2;
+      var _a3, _b3;
       if ((facet == null ? void 0 : facet.length) && facet[1].length) {
         let value = facet[0];
         let isCustom = ["variants.inventory_quantity"].includes(value);
         let isRange = ["variants.price"].includes(value);
         let isArray = ["tags"].includes(value);
-        let items = Array.isArray(facet[1]) && ((_a2 = facet[1]) == null ? void 0 : _a2.length) > 1 ? isRange ? `${value} >= ${facet[1][0]} AND ${value} <= ${facet[1][1]}` : isArray ? `${value} IN [${facet[1]}]` : (_b2 = facet[1]) == null ? void 0 : _b2.map((item) => {
+        let items = Array.isArray(facet[1]) && ((_a3 = facet[1]) == null ? void 0 : _a3.length) > 1 ? isRange ? `${value} >= ${facet[1][0]} AND ${value} <= ${facet[1][1]}` : isArray ? `${value} IN [${facet[1]}]` : (_b3 = facet[1]) == null ? void 0 : _b3.map((item) => {
           return isCustom ? `${value} ${item}` : `${value} = '${item}'`;
         }).join(" OR ") : isCustom ? `${value} ${facet[1]}` : isArray ? `${value} IN [${facet[1]}]` : `${value} = '${facet[1]}'`;
         return items;
@@ -3404,7 +3418,11 @@ const ResultProduct = (props) => {
       facets,
       filter: filters.join(" AND ")
     };
-    response = await search(clickedTabIndexId, body);
+    if (propsData && handleSearchResultFirstTime) {
+      response = (_b2 = (_a2 = propsData == null ? void 0 : propsData.result) == null ? void 0 : _a2.results) == null ? void 0 : _b2[0];
+      setHandleSearchResultFirstTime(false);
+    } else
+      response = await search(clickedTabIndexId, body);
     handleSearchResultData(response, onSearch);
   };
   const handleAllowedFilter = () => {
@@ -3650,7 +3668,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 ? /* @__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: [
+    ((_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 && !propsData ? filterHorizontalSkeleton : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isLoadingSetting && !propsData ? /* @__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(
@@ -3728,7 +3746,7 @@ const ResultProduct = (props) => {
                       value
                     };
                   }),
-                  value: clickedSortId,
+                  value: clickedSortId || (settings == null ? void 0 : settings.default_sort),
                   onChange: ({ label, value }) => handleChangeSort(label, value)
                 }
               )
@@ -3781,7 +3799,9 @@ const ResultProduct = (props) => {
                 onAfterAddToCart,
                 onAfterAddWishlist,
                 onAfterRemoveWishlist,
-                onAfterRenderProduct
+                onAfterRenderProduct,
+                dataWishlists: propsData == null ? void 0 : propsData.wishlists,
+                dataReviews: propsData == null ? void 0 : propsData.reviews
               }
             ),
             paginationComponent