@sledge-app/react-instant-search 1.0.99 → 1.0.100

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

@@ -1016,6 +1016,15 @@ const FilterIcon = ({ width, height, color }) => {
     )
   ] }) });
 };
+const InfoCircleIcon = ({ width, height, color }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-icon__info-circle", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width, height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "path",
+    {
+      d: "M12 2.00293C6.49 2.00293 2 6.49293 2 12.0029C2 17.5129 6.49 22.0029 12 22.0029C17.51 22.0029 22 17.5129 22 12.0029C22 6.49293 17.51 2.00293 12 2.00293ZM11.25 8.00293C11.25 7.59293 11.59 7.25293 12 7.25293C12.41 7.25293 12.75 7.59293 12.75 8.00293V13.0029C12.75 13.4129 12.41 13.7529 12 13.7529C11.59 13.7529 11.25 13.4129 11.25 13.0029V8.00293ZM12.92 16.3829C12.87 16.5129 12.8 16.6129 12.71 16.7129C12.61 16.8029 12.5 16.8729 12.38 16.9229C12.26 16.9729 12.13 17.0029 12 17.0029C11.87 17.0029 11.74 16.9729 11.62 16.9229C11.5 16.8729 11.39 16.8029 11.29 16.7129C11.2 16.6129 11.13 16.5129 11.08 16.3829C11.03 16.2629 11 16.1329 11 16.0029C11 15.8729 11.03 15.7429 11.08 15.6229C11.13 15.5029 11.2 15.3929 11.29 15.2929C11.39 15.2029 11.5 15.1329 11.62 15.0829C11.86 14.9829 12.14 14.9829 12.38 15.0829C12.5 15.1329 12.61 15.2029 12.71 15.2929C12.8 15.3929 12.87 15.5029 12.92 15.6229C12.97 15.7429 13 15.8729 13 16.0029C13 16.1329 12.97 16.2629 12.92 16.3829Z",
+      fill: color
+    }
+  ) }) });
+};
 const Button$1 = "";
 const Button = React__default.forwardRef((props, buttonRef) => {
   const { className = "", children, colorType = "light", fullWidth = false, elementType = "button", link = "", isActive, ...otherProps } = props;
@@ -3935,6 +3944,13 @@ const VirtualizedList = ({ scrollElement, rowCount, rowRenderer: rowRenderer2, s
     }
   );
 };
+const Alert$1 = "";
+const Alert = ({ children, className = "", type, icon = null }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `sledge__alert ${className}`, "data-alert-type": type, children: [
+    icon && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: icon }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children })
+  ] });
+};
 const SearchIconWidget = (props) => {
   const { isRenderApp, isJsVersion, componentRef } = React__default.useContext(SledgeContext);
   const { instantSearch: isRenderAppInstantSearch } = isRenderApp || {};
@@ -4134,11 +4150,13 @@ const SearchIconWidgetPopup = () => {
     searchViewMoreResultComponent: null,
     query: {}
   });
+  const [totalHitsProduct, setTotalHitsProduct] = React__default.useState(0);
+  const [instantSearchSettings, setInstantSearchSettings] = React__default.useState({});
   const searchFieldRef = React__default.useRef(null);
   const previousState = usePrevious({ keyword });
   const { direction: redirectObjectDirection } = redirectObject || {};
   const handleMultiSearch = async (params) => {
-    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2;
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2;
     const { data, onSearch = false, withFetchReviewInfo = false } = params;
     const valueRedirectObject = redirectsSettings.find(({ keyword: redirectKeyword }) => {
       var _a3;
@@ -4174,13 +4192,14 @@ const SearchIconWidgetPopup = () => {
       return;
     const { results } = response;
     let valueSearchResultProduct = results == null ? void 0 : results.filter(({ indexUid }) => indexUid == null ? void 0 : indexUid.includes(index_product));
+    setTotalHitsProduct(((_c2 = valueSearchResultProduct[0]) == null ? void 0 : _c2.totalHits) || 0);
     if (onSearch && (keyword == null ? void 0 : keyword.length)) {
       searchTrigger({
         keyword,
-        resultCount: ((_c2 = valueSearchResultProduct[0]) == null ? void 0 : _c2.totalHits) || 0
+        resultCount: ((_d2 = valueSearchResultProduct[0]) == null ? void 0 : _d2.totalHits) || 0
       });
     }
-    let valueSearchResultOther = ((_d2 = results == null ? void 0 : results.filter(({ indexUid }) => !(indexUid == null ? void 0 : indexUid.includes(index_product)))) == null ? void 0 : _d2.map((result) => {
+    let valueSearchResultOther = ((_e2 = results == null ? void 0 : results.filter(({ indexUid }) => !(indexUid == null ? void 0 : indexUid.includes(index_product)))) == null ? void 0 : _e2.map((result) => {
       const { indexUid } = result;
       const { name, type } = tabs == null ? void 0 : tabs.find(({ index }) => index.includes(indexUid));
       return {
@@ -4191,16 +4210,16 @@ const SearchIconWidgetPopup = () => {
         }
       };
     })) || [];
-    let getValueSearchResultProduct = (valueSearchResultProduct == null ? void 0 : valueSearchResultProduct.length) ? (_e2 = valueSearchResultProduct[0]) == null ? void 0 : _e2.hits : [];
+    let getValueSearchResultProduct = (valueSearchResultProduct == null ? void 0 : valueSearchResultProduct.length) ? (_f2 = valueSearchResultProduct[0]) == null ? void 0 : _f2.hits : [];
     let valueSuggestionIndex = !keyword.length ? "zero_character" : !(getValueSearchResultProduct == null ? void 0 : getValueSearchResultProduct.length) ? "no_result" : "";
     let isPriorityZeroCharacter = Boolean(
-      !keyword.length && Object.keys(suggestion).length && ((_g2 = (_f2 = suggestion[valueSuggestionIndex]) == null ? void 0 : _f2.products) == null ? void 0 : _g2.active) && ((_j2 = (_i2 = (_h2 = suggestion[valueSuggestionIndex]) == null ? void 0 : _h2.products) == null ? void 0 : _i2.list) == null ? void 0 : _j2.length)
+      !keyword.length && Object.keys(suggestion).length && ((_h2 = (_g2 = suggestion[valueSuggestionIndex]) == null ? void 0 : _g2.products) == null ? void 0 : _h2.active) && ((_k2 = (_j2 = (_i2 = suggestion[valueSuggestionIndex]) == null ? void 0 : _i2.products) == null ? void 0 : _j2.list) == null ? void 0 : _k2.length)
     );
-    let dataSearchResultProduct = isPriorityZeroCharacter ? (_l2 = (_k2 = suggestion[valueSuggestionIndex]) == null ? void 0 : _k2.products) == null ? void 0 : _l2.list : getValueSearchResultProduct;
+    let dataSearchResultProduct = isPriorityZeroCharacter ? (_m2 = (_l2 = suggestion[valueSuggestionIndex]) == null ? void 0 : _l2.products) == null ? void 0 : _m2.list : getValueSearchResultProduct;
     if (withFetchReviewInfo) {
       let searchResultProductIds = dataSearchResultProduct.map(({ id }) => id);
       let valueDataReviews = await getProductsReviewInfo(searchResultProductIds);
-      if (((_m2 = valueDataReviews == null ? void 0 : valueDataReviews.status) == null ? void 0 : _m2.code) === 200)
+      if (((_n2 = valueDataReviews == null ? void 0 : valueDataReviews.status) == null ? void 0 : _n2.code) === 200)
         setDataReviews(valueDataReviews == null ? void 0 : valueDataReviews.data);
     } else {
       setDataReviews({});
@@ -4216,6 +4235,7 @@ const SearchIconWidgetPopup = () => {
     response = JSON.parse(LOCAL_STORAGE_INSTANT_SEARCH_SETTING);
     if (!response)
       return;
+    setInstantSearchSettings(response);
     const { display, languages, redirects } = response;
     setDisplaySettings(display);
     setSuggestionSettings((_a2 = display == null ? void 0 : display.search) == null ? void 0 : _a2.suggestion);
@@ -4285,10 +4305,16 @@ const SearchIconWidgetPopup = () => {
       return () => clearTimeout(delayDebounceFn);
     }
   }, [keyword]);
+  const alertFirstSyncComponent = !isLoading && !totalHitsProduct && (instantSearchSettings == null ? void 0 : instantSearchSettings.first_sync) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Alert, { className: "sledge-instant-search__icon-widget-popup-alert-first-sync", type: "info", icon: /* @__PURE__ */ jsxRuntimeExports.jsx(InfoCircleIcon, { width: 24, height: 24, color: "#003a5a" }), children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Products and Collections indexing is in progress. Product Filter and Instant Search widgets may appear empty during this process." }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("p", {}),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "The products and collections will become visible in the widgets once indexing is complete." })
+  ] }) : null;
   return /* @__PURE__ */ jsxRuntimeExports.jsx($5d3850c4d0b4e6c7$export$be92b6f5f03c0fe9, { open: showInfo, onOpenChange: setShowInfo, children: /* @__PURE__ */ jsxRuntimeExports.jsxs($5d3850c4d0b4e6c7$export$602eac185826482c, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx($5d3850c4d0b4e6c7$export$c6fdb837b070b4ff, { className: "sledge__popup-overlay" }),
     /* @__PURE__ */ jsxRuntimeExports.jsx($5d3850c4d0b4e6c7$export$c6fdb837b070b4ff, { className: "sledge__popup-overlay-blur" }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs($5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2, { className: "sledge-instant-search__icon-widget-popup-detail-content", "data-layout-type": ((_a = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _a.layout) || "", children: [
+      alertFirstSyncComponent,
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         SearchInputField,
         {
@@ -5307,6 +5333,7 @@ const SearchResultWidget = (props) => {
   const [isReplaceWidgetList, setIsReplaceWidgetList] = React__default.useState(false);
   const [searchResultFacets, setSearchResultFacets] = React__default.useState({});
   const [generalDataSettings, setGeneralDataSettings] = React__default.useState((sledgeSettings == null ? void 0 : sledgeSettings.general) || {});
+  const [instantSearchSettings, setInstantSearchSettings] = React__default.useState((sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) || {});
   const [clickedFacets, setClickedFacets] = React__default.useState({});
   const [clickedOpenFilterHorizontalId, setClickedOpenFilterHorizontalId] = React__default.useState(null);
   const [clickedOpenFilterHorizontalMobileId, setClickedOpenFilterHorizontalMobileId] = React__default.useState(null);
@@ -5315,6 +5342,7 @@ const SearchResultWidget = (props) => {
   const [mobileShowSelectedSort, setMobileShowSelectedSort] = React__default.useState(true);
   const [soldProductAtEnd, setSoldProductAtEnd] = React__default.useState(false);
   const [attributesToRetrieve, setAttributesToRetrieve] = React__default.useState(((_k = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _k.attributes_to_retrieve) || []);
+  const [totalHitsProduct, setTotalHitsProduct] = React__default.useState(0);
   const debouncedKeyword = useDebounce(keyword, 500);
   let productCardsComponent = null;
   let collectionCardsComponent = null;
@@ -5408,6 +5436,7 @@ const SearchResultWidget = (props) => {
     setIsFirstLoading(false);
     setIsLoading(false);
     const { facetStats, totalHits, facetDistribution } = (results == null ? void 0 : results.find(({ indexUid }) => indexUid.includes(index_product))) || {};
+    setTotalHitsProduct(totalHits || 0);
     let valueHideFilterWhenOneValue = ((_a2 = display == null ? void 0 : display.filter) == null ? void 0 : _a2.hide_when_one_value) && totalHits <= 1;
     let valueSearchResultFacets = facetDistribution ? Object.fromEntries(
       Object.entries(facetDistribution).map((facet) => {
@@ -5519,6 +5548,7 @@ const SearchResultWidget = (props) => {
     responseGeneral = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY.GENERAL_SETTING) || null);
     if (!response)
       return;
+    setInstantSearchSettings(response);
     if (responseGeneral)
       setGeneralDataSettings(responseGeneral);
     const {
@@ -5856,7 +5886,13 @@ const SearchResultWidget = (props) => {
   const containerStyle = {
     maxWidth: width
   };
+  const alertFirstSyncComponent = !isFirstLoading && !totalHitsProduct && (instantSearchSettings == null ? void 0 : instantSearchSettings.first_sync) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Alert, { className: "sledge-instant-search__alert-first-sync-product", type: "info", icon: /* @__PURE__ */ jsxRuntimeExports.jsx(InfoCircleIcon, { width: 24, height: 24, color: "#003a5a" }), children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Products and Collections indexing is in progress. Product Filter and Instant Search widgets may appear empty during this process." }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("p", {}),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "The products and collections will become visible in the widgets once indexing is complete." })
+  ] }) : null;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-container", ref: searchResultContainerRef, style: containerStyle, children: [
+    alertFirstSyncComponent,
     isFirstLoading ? tabSkeleton : layoutType === "default" && (allowedTabs == null ? void 0 : allowedTabs.length) ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${layoutType === "default" && (allowedTabs == null ? void 0 : allowedTabs.length) ? "sledge-instant-search__result-tab" : "sledge-instant-search__result-tab-no-index"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "sledge-instant-search__result-tab-list", children: allowedTabs.map((item) => {
       const { name, index, type, total } = item;
       let isActive = clickedTabIndexId === index;