@sledge-app/react-instant-search 1.0.30 → 1.0.31

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

@@ -148,7 +148,8 @@ const OBJECT_DATA_STRING_KEY = {
   },
   CURRENT_PAGE: "{{ current_page }}",
   TOTAL_PAGE: "{{ total_page }}",
-  TOTAL_RESULT: "{{ total_result }}"
+  TOTAL_RESULT: "{{ total_result }}",
+  COLLECTION_NAME: "{{ collection_name }}"
 };
 const ELEMENT_ID = {
   PRODUCT_REVIEW: {
@@ -3328,7 +3329,7 @@ const Global = {
   SearchViewMoreResult
 };
 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;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w;
   const { isRenderApp } = React__default.useContext(SledgeContext);
   const { instantSearch: isRenderAppInstantSearch } = isRenderApp || {};
   const [isLoading, setIsLoading] = React__default.useState(true);
@@ -3341,6 +3342,7 @@ const SearchIconWidgetPopup = () => {
   const [suggestionSettings, setSuggestionSettings] = React__default.useState({});
   const [suggestionIndex, setSuggestionIndex] = React__default.useState("");
   const [urlSearchResult, setUrlSearchResult] = React__default.useState("");
+  const [languageSettings, setLanguageSettings] = React__default.useState({});
   const [handleFunctions, setHandleFunctions] = React__default.useState({
     onAfterAddToCart: (state) => {
     },
@@ -3429,9 +3431,10 @@ const SearchIconWidgetPopup = () => {
     response = JSON.parse(LOCAL_STORAGE_INSTANT_SEARCH_SETTING);
     if (!response)
       return;
-    const { display } = response;
+    const { display, languages } = response;
     setDisplaySettings(display);
     setSuggestionSettings((_a2 = display == null ? void 0 : display.search) == null ? void 0 : _a2.suggestion);
+    setLanguageSettings(languages);
     await handleMultiSearch({
       data: response,
       withFetchReviewInfo: true
@@ -3505,7 +3508,7 @@ const SearchIconWidgetPopup = () => {
         {
           type: "text",
           icon: /* @__PURE__ */ jsxRuntimeExports.jsx(SearchIcon, { width: 20, height: 20, color: "#000000" }),
-          placeholder: "Search anything...",
+          placeholder: ((_b = languageSettings == null ? void 0 : languageSettings.search_form_placeholder) == null ? void 0 : _b.widget) || "Search anything...",
           value: keyword,
           fieldRef: searchFieldRef,
           onChange: ({ value }) => setKeyword(value),
@@ -3564,7 +3567,7 @@ const SearchIconWidgetPopup = () => {
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__icon-widget-search-form-result-flex-item-product", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.ProductGrid, { count: 6, type: "medium" }) })
       ] }) }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__icon-widget-search-form-result-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__icon-widget-search-form-result-flex", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__icon-widget-search-form-result-flex-item-other", children: [
-          Object.keys(suggestionSettings).length && ((_c = (_b = suggestionSettings[suggestionIndex]) == null ? void 0 : _b.keywords) == null ? void 0 : _c.active) && ((_f = (_e = (_d = suggestionSettings[suggestionIndex]) == null ? void 0 : _d.keywords) == null ? void 0 : _e.list) == null ? void 0 : _f.length) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Object.keys(suggestionSettings).length && ((_d = (_c = suggestionSettings[suggestionIndex]) == null ? void 0 : _c.keywords) == null ? void 0 : _d.active) && ((_g = (_f = (_e = suggestionSettings[suggestionIndex]) == null ? void 0 : _e.keywords) == null ? void 0 : _f.list) == null ? void 0 : _g.length) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
             Global.SuggestionKeywordLists,
             {
               listsComponent: handleFunctions.suggestionKeywordListsComponent,
@@ -3605,9 +3608,9 @@ const SearchIconWidgetPopup = () => {
                 };
               }),
               setting: {
-                show_vendor: (_g = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _g.show_vendor,
-                show_sku: (_h = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _h.show_sku,
-                show_price: (_i = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _i.show_price
+                show_vendor: (_h = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _h.show_vendor,
+                show_sku: (_i = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _i.show_sku,
+                show_price: (_j = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _j.show_price
               },
               showOptionOutOfStock: true,
               isComponentJsVersion: handleFunctions.isJsVersion,
@@ -3620,7 +3623,7 @@ const SearchIconWidgetPopup = () => {
               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: [
+          ) }) : Object.keys(suggestionSettings).length && ((_l = (_k = suggestionSettings[suggestionIndex]) == null ? void 0 : _k.products) == null ? void 0 : _l.active) && ((_o = (_n = (_m = suggestionSettings[suggestionIndex]) == null ? void 0 : _m.products) == null ? void 0 : _n.list) == null ? void 0 : _o.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: [
               /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Sorry" }),
               ", nothing found for ",
@@ -3640,9 +3643,9 @@ const SearchIconWidgetPopup = () => {
                   };
                 }),
                 setting: {
-                  show_vendor: (_o = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _o.show_vendor,
-                  show_sku: (_p = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _p.show_sku,
-                  show_price: (_q = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _q.show_price
+                  show_vendor: (_p = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _p.show_vendor,
+                  show_sku: (_q = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _q.show_sku,
+                  show_price: (_r = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _r.show_price
                 },
                 showOptionOutOfStock: true,
                 isComponentJsVersion: handleFunctions.isJsVersion,
@@ -3659,7 +3662,7 @@ const SearchIconWidgetPopup = () => {
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__icon-widget-search-form-result-title", children: "Products" }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__icon-widget-search-form-result-item-disabled", children: "No product were found" })
           ] }),
-          (searchResultProduct == null ? void 0 : searchResultProduct.length) || Object.keys(suggestionSettings).length && ((_s = (_r = suggestionSettings[suggestionIndex]) == null ? void 0 : _r.products) == null ? void 0 : _s.active) && ((_v = (_u = (_t = suggestionSettings[suggestionIndex]) == null ? void 0 : _t.products) == null ? void 0 : _u.list) == null ? void 0 : _v.length) ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__icon-widget-button-more-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          (searchResultProduct == null ? void 0 : searchResultProduct.length) || Object.keys(suggestionSettings).length && ((_t = (_s = suggestionSettings[suggestionIndex]) == null ? void 0 : _s.products) == null ? void 0 : _t.active) && ((_w = (_v = (_u = suggestionSettings[suggestionIndex]) == null ? void 0 : _u.products) == null ? void 0 : _v.list) == null ? void 0 : _w.length) ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__icon-widget-button-more-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             Global.SearchViewMoreResult,
             {
               component: handleFunctions.searchViewMoreResultComponent,
@@ -4163,6 +4166,7 @@ const SearchResultWidget = (props) => {
         ] })
       ] })
     ] }) : React__default.cloneElement(resultComponent, {
+      layoutType,
       isLoading,
       keyword,
       clickedTabIndexId,
@@ -4218,6 +4222,7 @@ const SearchResultWidget = (props) => {
 const ResultProduct = (props) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B;
   const {
+    layoutType,
     keyword,
     clickedTabIndexId,
     isLoadingSetting,
@@ -4329,7 +4334,8 @@ const ResultProduct = (props) => {
     add_to_cart: language_add_to_cart,
     filter: language_filter,
     clear_filter: language_clear_filter,
-    pagination_info: language_pagination_info
+    pagination_info: language_pagination_info,
+    total_result_text: language_total_result_text
   } = languageSettings || {};
   const filter_title_style = {
     ...filter_title_color && { color: filter_title_color },
@@ -5043,7 +5049,7 @@ const ResultCategory = (props) => {
   const [totalSearchResult, setTotalSearchResult] = React__default.useState(0);
   const [summaryText, setSummaryText] = React__default.useState(null);
   const previousState = usePrevious({ keyword, clickedTabIndexId });
-  const { pagination_info: language_pagination_info } = languageSettings || {};
+  const { pagination_info: language_pagination_info, search_form_placeholder: language_search_form_placeholder } = languageSettings || {};
   const handleSearchResultData = (result) => {
     if (!result)
       return;
@@ -5118,7 +5124,7 @@ const ResultCategory = (props) => {
     {
       type: "text",
       icon: /* @__PURE__ */ jsxRuntimeExports.jsx(SearchIcon, { width: 18, height: 18, color: "#868686" }),
-      placeholder: `Search ${clickedTabIndexName ? clickedTabIndexName.toLowerCase() : ""}...`,
+      placeholder: clickedTabIndexType && language_search_form_placeholder[clickedTabIndexType] ? language_search_form_placeholder[clickedTabIndexType] : `Search ${clickedTabIndexName ? clickedTabIndexName.toLowerCase() : ""}...`,
       value: keyword,
       onChange: ({ value }) => setKeyword && setKeyword(value),
       onResetField: () => setKeyword && setKeyword(""),
@@ -5172,7 +5178,7 @@ const ResultEmpty = (props) => {
   ] });
 };
 const SearchWidget = (props) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u;
+  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, isJsVersion } = React__default.useContext(SledgeContext);
   const { instantSearch: isRenderAppInstantSearch } = isRenderApp || {};
   const { width = "400px", children, onAfterAddToCart, onAfterAddWishlist, onAfterRemoveWishlist, onAfterRenderProduct, urlSearchResult, query } = props;
@@ -5201,6 +5207,7 @@ const SearchWidget = (props) => {
   const [suggestionSettings, setSuggestionSettings] = React__default.useState({});
   const [suggestionIndex, setSuggestionIndex] = React__default.useState("");
   const [showSearchResult, setShowSearchResult] = React__default.useState(false);
+  const [languageSettings, setLanguageSettings] = React__default.useState({});
   const previousState = usePrevious({ keyword });
   const searchFieldRef = React__default.useRef(null);
   const handleMultiSearch = async (data, onSearch = false) => {
@@ -5261,16 +5268,16 @@ const SearchWidget = (props) => {
   };
   const handleSettings = async (LOCAL_STORAGE_INSTANT_SEARCH_SETTING) => {
     var _a2;
-    if (!keyword.length)
-      return;
     let response;
     response = JSON.parse(LOCAL_STORAGE_INSTANT_SEARCH_SETTING);
     if (!response)
       return;
-    const { display } = response;
+    const { display, languages } = response;
     setDisplaySettings(display);
     setSuggestionSettings((_a2 = display == null ? void 0 : display.search) == null ? void 0 : _a2.suggestion);
-    await handleMultiSearch(response);
+    setLanguageSettings(languages);
+    if (keyword.length)
+      await handleMultiSearch(response);
   };
   React__default.useEffect(() => {
     if (!isRenderAppInstantSearch)
@@ -5305,7 +5312,7 @@ const SearchWidget = (props) => {
         type: "text",
         fieldRef: searchFieldRef,
         icon: /* @__PURE__ */ jsxRuntimeExports.jsx(SearchIcon, { width: 18, height: 18, color: "#868686" }),
-        placeholder: "Search anything",
+        placeholder: ((_a = languageSettings == null ? void 0 : languageSettings.search_form_placeholder) == null ? void 0 : _a.widget) || "Search anything...",
         value: keyword,
         onChange: ({ value }) => setKeyword(value),
         onKeyDown: (event) => {
@@ -5367,7 +5374,7 @@ const SearchWidget = (props) => {
     ] }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { isLoading, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__widget-search-form-result-flex", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__widget-search-form-result-flex-item-other", children: [
-          Object.keys(suggestionSettings).length && ((_b = (_a = suggestionSettings[suggestionIndex]) == null ? void 0 : _a.keywords) == null ? void 0 : _b.active) && ((_e = (_d = (_c = suggestionSettings[suggestionIndex]) == null ? void 0 : _c.keywords) == null ? void 0 : _d.list) == null ? void 0 : _e.length) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Object.keys(suggestionSettings).length && ((_c = (_b = suggestionSettings[suggestionIndex]) == null ? void 0 : _b.keywords) == null ? void 0 : _c.active) && ((_f = (_e = (_d = suggestionSettings[suggestionIndex]) == null ? void 0 : _d.keywords) == null ? void 0 : _e.list) == null ? void 0 : _f.length) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
             Global.SuggestionKeywordLists,
             {
               listsComponent: suggestionKeywordListsComponent,
@@ -5397,9 +5404,9 @@ const SearchWidget = (props) => {
                 };
               }),
               setting: {
-                show_vendor: (_f = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _f.show_vendor,
-                show_sku: (_g = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _g.show_sku,
-                show_price: (_h = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _h.show_price
+                show_vendor: (_g = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _g.show_vendor,
+                show_sku: (_h = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _h.show_sku,
+                show_price: (_i = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _i.show_price
               },
               showOptionOutOfStock: true,
               isComponentJsVersion: isJsVersion,
@@ -5409,7 +5416,7 @@ const SearchWidget = (props) => {
               onAfterRemoveWishlist,
               onAfterRenderProduct
             }
-          ) }) : Object.keys(suggestionSettings).length && ((_j = (_i = suggestionSettings[suggestionIndex]) == null ? void 0 : _i.products) == null ? void 0 : _j.active) && ((_m = (_l = (_k = suggestionSettings[suggestionIndex]) == null ? void 0 : _k.products) == null ? void 0 : _l.list) == null ? void 0 : _m.length) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+          ) }) : 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__widget-search-form-result-product-suggestion-no-result-text", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Sorry, nothing found for" }),
               " ",
@@ -5430,9 +5437,9 @@ const SearchWidget = (props) => {
                   };
                 }),
                 setting: {
-                  show_vendor: (_n = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _n.show_vendor,
-                  show_sku: (_o = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _o.show_sku,
-                  show_price: (_p = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _p.show_price
+                  show_vendor: (_o = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _o.show_vendor,
+                  show_sku: (_p = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _p.show_sku,
+                  show_price: (_q = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _q.show_price
                 },
                 showOptionOutOfStock: true,
                 isComponentJsVersion: isJsVersion,
@@ -5446,7 +5453,7 @@ const SearchWidget = (props) => {
           ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__widget-search-form-result-product-disabled", children: "No product were found" })
         ] })
       ] }),
-      (searchResultProduct == null ? void 0 : searchResultProduct.length) || Object.keys(suggestionSettings).length && ((_r = (_q = suggestionSettings[suggestionIndex]) == null ? void 0 : _q.products) == null ? void 0 : _r.active) && ((_u = (_t = (_s = suggestionSettings[suggestionIndex]) == null ? void 0 : _s.products) == null ? void 0 : _t.list) == null ? void 0 : _u.length) ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__widget-button-more-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      (searchResultProduct == null ? void 0 : searchResultProduct.length) || Object.keys(suggestionSettings).length && ((_s = (_r = suggestionSettings[suggestionIndex]) == null ? void 0 : _r.products) == null ? void 0 : _s.active) && ((_v = (_u = (_t = suggestionSettings[suggestionIndex]) == null ? void 0 : _t.products) == null ? void 0 : _u.list) == null ? void 0 : _v.length) ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__widget-button-more-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         Global.SearchViewMoreResult,
         {
           component: searchViewMoreResultComponent,