@sledge-app/react-instant-search 1.0.32 → 1.0.34

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

@@ -30,6 +30,7 @@ const DATASET_ATTRIBUTE_KEY = {
     USER_EMAIL: "data-user-email",
     USER_FULLNAME: "data-user-fullname",
     COLLECTION_ID: "data-collection-id",
+    COLLECTION_NAME: "data-collection-name",
     WIDTH_ELEMENT: "data-width-element",
     ICON_SIZE: "data-icon-size",
     API_KEY: "data-api-key",
@@ -1279,7 +1280,7 @@ const Trigger = (props) => {
       if (typeof window !== "undefined" && window.sledgeToastNotification && show_notification)
         window.sledgeToastNotification({
           title: title_fail_add_to_wishlist || "Failed",
-          message: text_fail_add_to_wishlist || "failed add to wishlist",
+          message: text_fail_add_to_wishlist || "Failed add to wishlist, please try again",
           location: location_notification,
           type: "failed",
           icon: /* @__PURE__ */ jsxRuntimeExports.jsx(HeartIcon, { width: 40, height: 40, color: "black", type: "outline" })
@@ -1394,7 +1395,7 @@ const WidgetHeaderClearTrigger = ({ buttonText, shareId, dataSettings, isFirstLo
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !isRequiredLogin && /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !shareId && /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isFirstLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "132px", height: "46px", color: "lighten", rounded: "md" }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-wishlist__widget-header-item", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { type: "button", colorType: "danger", onClick: handleClick, style: display_button_clear_all_style, children: buttonText ? buttonText : button_clear_all || "Clear Wishlist" }) }) }) }) });
 };
 const WidgetHeaderShareTrigger = ({ wishlistData, buttonText, showShareTrigger, shareLink, shareId, dataSettings, isFirstLoading }) => {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const { triggerRenderMultipleComponent, sledgeAnonymId } = React__default.useContext(SledgeContext);
   const { trigger: triggerRenderWishlistBadge } = ((_a = triggerRenderMultipleComponent == null ? void 0 : triggerRenderMultipleComponent.wishlist) == null ? void 0 : _a.badge) || {};
   const { is_required_login } = ((_b = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _b.global) || {};
@@ -1413,7 +1414,8 @@ const WidgetHeaderShareTrigger = ({ wishlistData, buttonText, showShareTrigger,
   } = ((_d = (_c = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _c.widget) == null ? void 0 : _d.button_share) || {};
   const { title_share_wishlist } = ((_e = dataSettings == null ? void 0 : dataSettings.languages) == null ? void 0 : _e.popup) || {};
   const { button_share } = ((_f = dataSettings == null ? void 0 : dataSettings.languages) == null ? void 0 : _f.widget) || {};
-  const { title_added_all_to_wishlist, text_added_all_to_wishlist } = ((_g = dataSettings == null ? void 0 : dataSettings.languages) == null ? void 0 : _g.notification) || {};
+  const { show: show_notification, location: location_notification } = ((_g = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _g.notification) || {};
+  const { title_added_all_to_wishlist, text_added_all_to_wishlist, title_fail_add_to_wishlist, text_fail_add_to_wishlist } = ((_h = dataSettings == null ? void 0 : dataSettings.languages) == null ? void 0 : _h.notification) || {};
   const [isRequiredLogin, setIsRequiredLogin] = React__default.useState(false);
   const display_button_share_style = {
     ...display_button_share_text_color && { color: display_button_share_text_color },
@@ -1464,17 +1466,18 @@ const WidgetHeaderShareTrigger = ({ wishlistData, buttonText, showShareTrigger,
         if (window.sledgeInfoPopup)
           window.sledgeInfoPopup({
             title: title_added_all_to_wishlist,
-            message: text_added_all_to_wishlist,
-            textCancel: "Cancel"
+            message: text_added_all_to_wishlist
           });
       }
       setIsLoadingBulkAdd(false);
     } else {
-      if (typeof window !== "undefined" && window.sledgeInfoPopup)
-        window.sledgeInfoPopup({
-          title: "Failed",
-          message: "Failed add to wishlist, please try again",
-          textCancel: "Cancel"
+      if (typeof window !== "undefined" && window.sledgeToastNotification && show_notification)
+        window.sledgeToastNotification({
+          title: title_fail_add_to_wishlist || "Failed",
+          message: text_fail_add_to_wishlist || "Failed add to wishlist, please try again",
+          location: location_notification,
+          type: "failed",
+          icon: /* @__PURE__ */ jsxRuntimeExports.jsx(HeartIcon, { width: 40, height: 40, color: "black", type: "outline" })
         });
     }
   };
@@ -1522,8 +1525,7 @@ const WidgetHeaderShareTrigger = ({ wishlistData, buttonText, showShareTrigger,
                                     ${clipboardIcon}
                                 </div>
                                 <div class="sledge-wishlist__widget-box-copy-content">${shareLink}</div>
-                            </div>` : "",
-          textCancel: "Cancel"
+                            </div>` : ""
         });
       }
     }
@@ -4270,7 +4272,7 @@ const ResultProduct = (props) => {
     setIsReplaceWidgetList
   } = props || {};
   const queryKeyword = (query == null ? void 0 : query.keyword) ? query.keyword : DEFAULT_QUERY_PARAM.KEYWORD;
-  const { collectionId } = params || {};
+  const { collectionId, collectionName } = params || {};
   const [isFirstLoading, setIsFirstLoading] = React__default.useState(!propsData);
   const [isLoading, setIsLoading] = React__default.useState(!propsData);
   const [isOpenSort, setIsOpenSort] = React__default.useState(false);
@@ -4296,11 +4298,23 @@ const ResultProduct = (props) => {
   const [isFilterChanged, setIsFilterChanged] = React__default.useState(false);
   const [handleSearchResultFirstTime, setHandleSearchResultFirstTime] = React__default.useState(true);
   const [searchResultFacets, setSearchResultFacets] = React__default.useState({});
-  const summaryTextGenerator = () => {
+  const {
+    sort_by: language_sort_by,
+    result: language_result,
+    search_form_placeholder: language_search_form_placeholder,
+    limit: language_limit,
+    add_to_cart: language_add_to_cart,
+    filter: language_filter,
+    clear_filter: language_clear_filter,
+    pagination_info: language_pagination_info,
+    total_result_text: language_total_result_text
+  } = languageSettings || {};
+  const summaryTextGenerator = (totalResult) => {
     var _a2;
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-summary-item", children: ((_a2 = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _a2.show_total_products) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "sledge-instant-search__result-data-summary-text", children: [
-      totalSearchResult,
-      " result",
+    const defaultSummaryText = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      totalResult,
+      " ",
+      language_result || "result",
       " ",
       (keyword == null ? void 0 : keyword.length) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
         "for ",
@@ -4310,9 +4324,17 @@ const ResultProduct = (props) => {
           '"'
         ] })
       ] }) : null
-    ] }) : null });
+    ] });
+    let getSummaryText = language_total_result_text[layoutType === "product-filter" ? "product_filter" : "product"];
+    let isSummaryTextFromLanguage = language_total_result_text && getSummaryText;
+    if (isSummaryTextFromLanguage) {
+      getSummaryText = getSummaryText.replaceAll(OBJECT_DATA_STRING_KEY.TOTAL_RESULT, totalResult);
+      if (layoutType === "product-filter")
+        getSummaryText = getSummaryText.replaceAll(OBJECT_DATA_STRING_KEY.COLLECTION_NAME, collectionName || "");
+    }
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-summary-item", children: ((_a2 = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _a2.show_total_products) ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-instant-search__result-data-summary-text", children: isSummaryTextFromLanguage ? getSummaryText : defaultSummaryText }) : null });
   };
-  const [summaryText, setSummaryText] = React__default.useState(propsData ? summaryTextGenerator() : null);
+  const [summaryText, setSummaryText] = React__default.useState(propsData ? summaryTextGenerator(totalSearchResult) : null);
   const previousState = usePrevious({ keyword, clickedLimitId, clickedFacets, clickedTabIndexId });
   const { color: filter_title_color, font_size: filter_title_font_size, font_weight: filter_title_font_weight, text_transform: filter_title_text_transform } = ((_i = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _i.title) || {};
   const {
@@ -4334,17 +4356,6 @@ const ResultProduct = (props) => {
     font_weight: filter_button_font_weight,
     text_transform: filter_button_text_transform
   } = ((_k = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _k.button) || {};
-  const {
-    sort_by: language_sort_by,
-    result: language_result,
-    search_form_placeholder: language_search_form_placeholder,
-    limit: language_limit,
-    add_to_cart: language_add_to_cart,
-    filter: language_filter,
-    clear_filter: language_clear_filter,
-    pagination_info: language_pagination_info,
-    total_result_text: language_total_result_text
-  } = languageSettings || {};
   const filter_title_style = {
     ...filter_title_color && { color: filter_title_color },
     ...filter_title_font_size && { fontSize: filter_title_font_size },
@@ -4476,7 +4487,6 @@ const ResultProduct = (props) => {
     }, 10);
   };
   const handleSearchResultData = (result, onSearch) => {
-    var _a2;
     if (!result)
       return;
     const { hits, processingTimeMs, totalHits, totalPages, facetDistribution } = result;
@@ -4493,22 +4503,7 @@ const ResultProduct = (props) => {
     setSearchProcessingTimeMs(processingTimeMs || 0);
     setTotalPage(totalPages);
     setTotalSearchResult(totalHits || 0);
-    setSummaryText(
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-summary-item", children: ((_a2 = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _a2.show_total_products) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "sledge-instant-search__result-data-summary-text", children: [
-        totalHits,
-        " ",
-        language_result || "result",
-        " ",
-        (keyword == null ? void 0 : keyword.length) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-          "for ",
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "sledge-instant-search__result-data-summary-text-keyword", children: [
-            '"',
-            keyword,
-            '"'
-          ] })
-        ] }) : null
-      ] }) : null })
-    );
+    setSummaryText(summaryTextGenerator(totalHits));
     setSearchResultFacets(
       defaultFacetDistribution ? Object.fromEntries(
         Object.entries(defaultFacetDistribution).map((facet) => {
@@ -5033,6 +5028,7 @@ const ResultCategory = (props) => {
     clickedTabIndexId,
     clickedTabIndexName,
     clickedTabIndexType,
+    displaySettings,
     isJsVersion,
     collectionCardsComponent,
     pageCardsComponent,
@@ -5058,7 +5054,34 @@ 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, search_form_placeholder: language_search_form_placeholder } = languageSettings || {};
+  const {
+    pagination_info: language_pagination_info,
+    search_form_placeholder: language_search_form_placeholder,
+    result: language_result,
+    total_result_text: language_total_result_text
+  } = languageSettings || {};
+  const summaryTextGenerator = (totalResult) => {
+    var _a;
+    const defaultSummaryText = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      totalResult,
+      " ",
+      language_result || "result",
+      " ",
+      (keyword == null ? void 0 : keyword.length) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        "for ",
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "sledge-instant-search__result-data-summary-text-keyword", children: [
+          '"',
+          keyword,
+          '"'
+        ] })
+      ] }) : null
+    ] });
+    let getSummaryText = clickedTabIndexType ? language_total_result_text[clickedTabIndexType] : null;
+    let isSummaryTextFromLanguage = language_total_result_text && getSummaryText;
+    if (isSummaryTextFromLanguage)
+      getSummaryText = getSummaryText.replaceAll(OBJECT_DATA_STRING_KEY.TOTAL_RESULT, totalResult);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-summary-item", children: ((_a = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _a.show_total_products) ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-instant-search__result-data-summary-text", children: isSummaryTextFromLanguage ? getSummaryText : defaultSummaryText }) : null });
+  };
   const handleSearchResultData = (result) => {
     if (!result)
       return;
@@ -5070,21 +5093,7 @@ const ResultCategory = (props) => {
     setSearchProcessingTimeMs(processingTimeMs || 0);
     setTotalPage(totalPages);
     setTotalSearchResult(totalHits || 0);
-    setSummaryText(
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-summary-item", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "sledge-instant-search__result-data-summary-text", children: [
-        totalHits,
-        " result",
-        " ",
-        (keyword == null ? void 0 : keyword.length) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-          "for ",
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "sledge-instant-search__result-data-summary-text-keyword", children: [
-            '"',
-            keyword,
-            '"'
-          ] })
-        ] }) : null
-      ] }) })
-    );
+    setSummaryText(summaryTextGenerator(totalHits));
   };
   const handleSearchResult = async (isRefreshPage = false) => {
     if (!clickedTabIndexId)