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

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 = "http://localhost:7700";
+const INSTANT_SEARCH_ENGINE_URL = "https://instant-search-engine.offstack.io";
 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, token) => {
-  let sledgeInstantSearchAuthApp = token || localStorage.getItem(LOCAL_STORAGE_KEY.INSTANT_SEARCH_AUTH_APP);
+const fetchApi = async (url, method, body) => {
+  let sledgeInstantSearchAuthApp = 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, token) => {
 const search = async (index, body) => {
   return await fetchApi(`/indexes/${index}/search`, "POST", body);
 };
-const multiSearch = async (body, token) => {
-  return await fetchApi("/multi-search", "POST", body, token);
+const multiSearch = async (body) => {
+  return await fetchApi("/multi-search", "POST", body);
 };
 const searchTrigger = async (data) => {
   const { keyword, resultCount } = data;
@@ -1673,8 +1673,7 @@ const ProductGrid = ({
   onAfterRenderProduct,
   showPopupComponent,
   setShowPopupComponent,
-  dataReviews,
-  dataWishlists
+  dataReviews
 }) => {
   const {
     show_vendor = true,
@@ -1788,8 +1787,7 @@ const ProductGrid = ({
                     },
                     ...triggerPropAdditional,
                     onAfterAddWishlist,
-                    onAfterRemoveWishlist,
-                    wishlistChecked: dataWishlists == null ? void 0 : dataWishlists[id]
+                    onAfterRemoveWishlist
                   }
                 ),
                 /* @__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` })
@@ -2666,9 +2664,9 @@ const SearchIconWidgetPopup = () => {
   ] }) });
 };
 const SearchResultWidget = (props) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
   const { isRenderApp, isJsVersion } = React__default.useContext(SledgeContext);
-  const { layoutType = "default", query, params, children, onAfterAddToCart, onAfterAddWishlist, onAfterRemoveWishlist, onAfterRenderProduct, data: propsData } = props;
+  const { layoutType = "default", query, params, children, onAfterAddToCart, onAfterAddWishlist, onAfterRemoveWishlist, onAfterRenderProduct } = props;
   const { keyword: queryKeyword = "" } = query || {};
   const { collectionId } = params || {};
   let productCardsComponent = null;
@@ -2679,7 +2677,6 @@ 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("");
@@ -2698,7 +2695,6 @@ 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) => {
@@ -2746,12 +2742,7 @@ const SearchResultWidget = (props) => {
         };
       })
     };
-    if (propsData && initStatesFirstTime) {
-      response = propsData.result;
-      setInitStatesFirstTime(false);
-      response = await multiSearch(body);
-    } else
-      response = await multiSearch(body);
+    response = await multiSearch(body);
     if (!response)
       return;
     const { results } = response;
@@ -2848,8 +2839,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 = ((_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: [
+  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: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
@@ -3065,7 +3056,7 @@ const SearchResultWidget = (props) => {
     )
   ] }) : null;
   const productGridSkeleton = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    ((_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(
+    ((_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(
       SkeletonLoading.Item,
       {
         width: "117px",
@@ -3081,7 +3072,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: [
-    ((_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,
+    ((_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,
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-keyword-form", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       SkeletonLoading.Item,
       {
@@ -3108,11 +3099,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) && !propsData ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    isFirstLoading && (layoutType == null ? void 0 : layoutType.length) ? /* @__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: [
-        ((_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,
+        ((_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,
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-data", children: [
           searchAndSelectOptionSkeleton,
           productGridSkeleton
@@ -3147,9 +3138,7 @@ const SearchResultWidget = (props) => {
       filterVerticalSkeleton,
       productGridSkeleton,
       searchAndSelectOptionSkeleton,
-      searchResultContainerRef,
-      data: propsData,
-      settings
+      searchResultContainerRef
     })
   ] });
 };
@@ -3181,9 +3170,7 @@ const ResultProduct = (props) => {
     onAfterAddWishlist,
     onAfterRemoveWishlist,
     onAfterRenderProduct,
-    searchResultContainerRef,
-    data: propsData,
-    settings
+    searchResultContainerRef
   } = props || {};
   const { keyword: queryKeyword = "" } = query || {};
   const { collectionId } = params || {};
@@ -3210,7 +3197,6 @@ 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 {
@@ -3384,7 +3370,6 @@ const ResultProduct = (props) => {
     );
   };
   const handleSearchResult = async (isRefreshPage = false, onSearch = false) => {
-    var _a2, _b2;
     if (!clickedTabIndexId)
       return;
     if (isRefreshPage)
@@ -3393,13 +3378,13 @@ const ResultProduct = (props) => {
     let detectClickedFacets = detectQueryStringFilter(clickedFacets);
     let response;
     let filters = Object.entries(detectClickedFacets).map((facet) => {
-      var _a3, _b3;
+      var _a2, _b2;
       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]) && ((_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) => {
+        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) => {
           return isCustom ? `${value} ${item}` : `${value} = '${item}'`;
         }).join(" OR ") : isCustom ? `${value} ${facet[1]}` : isArray ? `${value} IN [${facet[1]}]` : `${value} = '${facet[1]}'`;
         return items;
@@ -3418,11 +3403,7 @@ const ResultProduct = (props) => {
       facets,
       filter: filters.join(" AND ")
     };
-    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);
+    response = await search(clickedTabIndexId, body);
     handleSearchResultData(response, onSearch);
   };
   const handleAllowedFilter = () => {
@@ -3668,7 +3649,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 && !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: [
+    ((_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(
@@ -3746,7 +3727,7 @@ const ResultProduct = (props) => {
                       value
                     };
                   }),
-                  value: clickedSortId || (settings == null ? void 0 : settings.default_sort),
+                  value: clickedSortId,
                   onChange: ({ label, value }) => handleChangeSort(label, value)
                 }
               )
@@ -3799,9 +3780,7 @@ const ResultProduct = (props) => {
                 onAfterAddToCart,
                 onAfterAddWishlist,
                 onAfterRemoveWishlist,
-                onAfterRenderProduct,
-                dataWishlists: propsData == null ? void 0 : propsData.wishlists,
-                dataReviews: propsData == null ? void 0 : propsData.reviews
+                onAfterRenderProduct
               }
             ),
             paginationComponent