@sledge-app/react-instant-search 1.0.27 → 1.0.29

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

@@ -1212,7 +1212,7 @@ const Trigger = (props) => {
   const [isFirstTime, setIsFirstTime] = React__default.useState(true);
   const { is_required_login } = ((_b = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _b.global) || {};
   const { show: show_notification, location: location_notification } = ((_c = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _c.notification) || {};
-  const { title_added_to_wishlist, text_added_to_wishlist, title_removed_to_wishlist, text_removed_to_wishlist } = ((_d = dataSettings == null ? void 0 : dataSettings.languages) == null ? void 0 : _d.notification) || {};
+  const { title_added_to_wishlist, text_added_to_wishlist, title_removed_to_wishlist, text_removed_to_wishlist, title_fail_add_to_wishlist, text_fail_add_to_wishlist } = ((_d = dataSettings == null ? void 0 : dataSettings.languages) == null ? void 0 : _d.notification) || {};
   const handleCheckWishlist = async () => {
     let response;
     if (typeof wishlistChecked === "boolean" && isFirstTime) {
@@ -1274,8 +1274,8 @@ const Trigger = (props) => {
       }
       if (typeof window !== "undefined" && window.sledgeToastNotification && show_notification)
         window.sledgeToastNotification({
-          title: "Failed",
-          message: "failed add to wishlist",
+          title: title_fail_add_to_wishlist || "Failed",
+          message: text_fail_add_to_wishlist || "failed add to wishlist",
           location: location_notification,
           type: "failed",
           icon: /* @__PURE__ */ jsxRuntimeExports.jsx(HeartIcon, { width: 40, height: 40, color: "black", type: "outline" })
@@ -1627,10 +1627,11 @@ const WidgetHeaderLimit = ({ limitOptions, selectedLimit, setSelectedLimit, setI
     }
   ) }) }) : null });
 };
-const WidgetHeaderSort$1 = ({ wishlistSort, selectedSort, setSelectedSort, setIsRefreshWidgetList, dataSettings }) => {
+const WidgetHeaderSort$1 = ({ wishlistSort, selectedSort, setSelectedSort, setIsRefreshWidgetList, dataSettings, generalDataSettings }) => {
   var _a;
   const { sledgeAnonymId } = React__default.useContext(SledgeContext);
   const { is_required_login } = ((_a = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _a.global) || {};
+  const { sort_placeholder } = (generalDataSettings == null ? void 0 : generalDataSettings.languages) || {};
   const [isRequiredLogin, setIsRequiredLogin] = React__default.useState(false);
   const handleChangeSort = (value) => {
     setSelectedSort && setSelectedSort(value);
@@ -1652,7 +1653,7 @@ const WidgetHeaderSort$1 = ({ wishlistSort, selectedSort, setSelectedSort, setIs
       }),
       value: selectedSort,
       onChange: ({ value }) => handleChangeSort(value),
-      placeholder: "- Select -"
+      placeholder: sort_placeholder || "- Select -"
     }
   ) }) }) : null });
 };
@@ -2031,21 +2032,22 @@ const WidgetHeaderAddTrigger = ({ isFirstLoadingHeader, text, dataSettings, para
   ) });
 };
 const WidgetHeaderSort = ({ isFirstLoadingHeader, productReviewSort, dataSettings, setSelectedSort, setIsRefreshWidgetList }) => {
-  var _a, _b;
+  var _a, _b, _c;
   const { default_sort, show_sorting_options } = ((_a = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _a.widget) || {};
+  const { sort_by: language_sort_by } = ((_b = dataSettings == null ? void 0 : dataSettings.languages) == null ? void 0 : _b.widget) || {};
   const [clickedSortId, setClickedSortId] = React__default.useState(default_sort || null);
   const handleChangeSort = (value) => {
     setClickedSortId(value);
     setIsRefreshWidgetList && setIsRefreshWidgetList(true);
     setSelectedSort && setSelectedSort(value);
   };
-  const getSelectedSort = clickedSortId || ((_b = productReviewSort[0]) == null ? void 0 : _b.value);
+  const getSelectedSort = clickedSortId || ((_c = productReviewSort[0]) == null ? void 0 : _c.value);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !show_sorting_options ? null : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-product-review__widget-header-item", children: isFirstLoadingHeader ? /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "134px", height: "42px", rounded: "lg", color: "lighten" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
     SelectField,
     {
       align: "end",
       prefixLabel: /* @__PURE__ */ jsxRuntimeExports.jsx(SwapIcon, { width: 16, height: 16, color: "currentColor" }),
-      prefixSelectedLabel: "Sort by",
+      prefixSelectedLabel: language_sort_by || "Sort by",
       options: productReviewSort.map((item) => {
         const { name, value } = item;
         return {
@@ -2625,6 +2627,7 @@ ${selectedOption === item2 ? "sledge__product-variant-size-swatch-active" : ""}
         {
           type: "button",
           colorType: "light",
+          className: "sledge__product-grid-button-add-to-cart",
           style: {
             ...display_button_add_to_cart_style,
             ...isLoadingAddToCart && {
@@ -3503,6 +3506,14 @@ const SearchIconWidgetPopup = () => {
           value: keyword,
           fieldRef: searchFieldRef,
           onChange: ({ value }) => setKeyword(value),
+          onKeyDown: (event) => {
+            if (event.key === "Enter") {
+              const query = handleFunctions.query;
+              const queryKeyword = (query == null ? void 0 : query.keyword) ? query.keyword : DEFAULT_QUERY_PARAM.KEYWORD;
+              const urlToSearchResult = `${urlSearchResult || DEFAULT_SEARCH_RESULT_URL}?${queryKeyword}=${keyword}`;
+              window.location.href = urlToSearchResult;
+            }
+          },
           className: "sledge-instant-search__icon-widget-search-form-field",
           withClearField: true
         }
@@ -4082,7 +4093,7 @@ const SearchResultWidget = (props) => {
     )
   ] }) : null;
   const productGridSkeleton = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    ((_p = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _p.show_total_products) && ((_q = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _q.layout) === "vertical" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ((_p = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _p.show_total_products) && ((_q = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _q.layout) === "vertical" ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__hide-element-lg-on-mobile", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       SkeletonLoading.Item,
       {
         width: "117px",
@@ -4093,7 +4104,7 @@ const SearchResultWidget = (props) => {
           marginBottom: "21px"
         }
       }
-    ) : null,
+    ) }) : null,
     /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.ProductGrid, { count: 12, type: "large" })
   ] });
   const summaryTextSkeleton = /* @__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: "lighten", rounded: "md" }) });
@@ -4762,13 +4773,22 @@ const ResultProduct = (props) => {
     if (display.toLowerCase() === "swatch" && (items == null ? void 0 : items.length)) {
       classesUlElement.push("sledge-instant-search__result-filter-item-color-swatches");
     }
+    let isLastIndex = allowedFilter.length - 1 === indexFilter;
     return isRender ? /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       Popover,
       {
-        trigger: /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { type: "button", onClick: () => setClickedOpenFilterId(value), children: [
-          label,
-          /* @__PURE__ */ jsxRuntimeExports.jsx(motion.div, { initial: "closed", animate: isActive ? "open" : "closed", variants: ROTATE_FILTER_ARROW_ANIMATION, className: "sort-trigger-icon", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronArrowDownIcon, { width: 20, height: 20, color: "#000000" }) })
-        ] }),
+        trigger: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          Button,
+          {
+            type: "button",
+            onClick: () => setClickedOpenFilterId(value),
+            className: `${isLastIndex ? allowedFilter.length % 2 ? "sledge-instant-search__result-filter-trigger-odd" : "sledge-instant-search__result-filter-trigger-even" : ""}`,
+            children: [
+              label,
+              /* @__PURE__ */ jsxRuntimeExports.jsx(motion.div, { initial: "closed", animate: isActive ? "open" : "closed", variants: ROTATE_FILTER_ARROW_ANIMATION, className: "sort-trigger-icon", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronArrowDownIcon, { width: 20, height: 20, color: "#000000" }) })
+            ]
+          }
+        ),
         content: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-horizontal-facet", children: isActive && /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: classesUlElement.join(" "), children: isNotRerender ? getFacetComponent : !isFilterChanged ? getFacetComponent : null }) }),
         withOpenState: false,
         setIsOpen: (open) => setClickedOpenFilterId(!open ? "" : value),
@@ -4810,7 +4830,7 @@ const ResultProduct = (props) => {
   });
   const paginationComponent = /* @__PURE__ */ jsxRuntimeExports.jsx(Pagination, { currentPage, totalPage, totalResult: totalSearchResult, onChange: (page) => handlePageChange(page), pageInfo: language_pagination_info });
   const filterHorizontalBlockComponent = ((_l = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _l.enable_on_search) && allowedFilter.length ? /* @__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 }) : /* @__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 }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-horizontal sledge-instant-search__result-filter-horizontal-component", children: filterHorizontalComponents }),
     Boolean((dataClickedFacets == null ? void 0 : dataClickedFacets.length) && ((_m = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _m.show_refine_by_block)) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-horizontal", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "div",
@@ -5260,6 +5280,13 @@ const SearchWidget = (props) => {
         placeholder: "Search anything",
         value: keyword,
         onChange: ({ value }) => setKeyword(value),
+        onKeyDown: (event) => {
+          if (event.key === "Enter") {
+            const queryKeyword = (query == null ? void 0 : query.keyword) ? query.keyword : DEFAULT_QUERY_PARAM.KEYWORD;
+            const urlToSearchResult = `${urlSearchResult || DEFAULT_SEARCH_RESULT_URL}?${queryKeyword}=${keyword}`;
+            window.location.href = urlToSearchResult;
+          }
+        },
         onResetField: () => setKeyword(""),
         onFocus: () => {
           if (keyword)