@sledge-app/react-instant-search 0.0.69 → 0.0.71

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

@@ -441,7 +441,7 @@ const SearchInputField = (props) => {
 const SelectField$1 = "";
 const SelectField = (props) => {
   var _a;
-  const { className = "", placeholder = null, prefixLabel = null, prefixSelectedLabel = "", align = "end", onChange, value = "", options = [] } = props;
+  const { className = "", placeholder = null, prefixLabel = null, prefixSelectedLabel = "", align = "end", onChange, value = "", options = [], LinkComponent, link } = props;
   const [isOpen, setIsOpen] = React__default.useState(false);
   const handleChangeField = (label, value2) => {
     onChange && onChange({ label, value: value2 });
@@ -457,7 +457,7 @@ const SelectField = (props) => {
       ] }),
       content: /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "sledge__select-field-option", children: options == null ? void 0 : options.map((option, index) => {
         const { label, value: optionValue } = option;
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(
+        const Item = () => /* @__PURE__ */ jsxRuntimeExports.jsx(
           "li",
           {
             onClick: () => handleChangeField(label, optionValue),
@@ -468,6 +468,7 @@ const SelectField = (props) => {
           },
           index
         );
+        return LinkComponent ? /* @__PURE__ */ jsxRuntimeExports.jsx(LinkComponent, { scroll: false, to: link == null ? void 0 : link.replace("value", optionValue), href: link == null ? void 0 : link.replace("value", optionValue), children: /* @__PURE__ */ jsxRuntimeExports.jsx(Item, {}) }, index) : /* @__PURE__ */ jsxRuntimeExports.jsx(Item, {}, index);
       }) }),
       isOpen,
       setIsOpen,
@@ -618,8 +619,8 @@ const addToCartTrigger$1 = async (data) => {
 };
 const Trigger = (props) => {
   var _a, _b, _c;
-  const { data, forceActive = false, hidden = false, onAfterAddWishlist, onAfterRemoveWishlist } = props;
-  const { productId, productVariantId } = data || {};
+  const { params, forceActive = false, hidden = false, onAfterAddWishlist, onAfterRemoveWishlist } = props;
+  const { productId, productVariantId } = params || {};
   const { isRenderApp, triggerRenderMultipleComponent, sledgeAnonymId } = React__default.useContext(SledgeContext);
   const defaultColorIcon = "#767676";
   const defaultTypeIcon = "outline";
@@ -660,7 +661,7 @@ const Trigger = (props) => {
       return;
     }
     setIsWishlist(!isWishlist);
-    let resAddWishlist = await addWishlist(data);
+    let resAddWishlist = await addWishlist(params);
     const { status, data: response_data } = resAddWishlist || {};
     const { code } = status || {};
     if (code === 200) {
@@ -712,11 +713,11 @@ const Trigger = (props) => {
     response = JSON.parse(LOCAL_STORAGE_WISHLIST_SETTING);
     if (!response)
       return;
-    const { status, data: data2 } = response;
+    const { status, data } = response;
     const { code } = status;
     run = code === 200 || false;
     if (run) {
-      setDataSettings(data2);
+      setDataSettings(data);
       setIsLoading(false);
     }
   };
@@ -1158,8 +1159,8 @@ const getReviewInfo = async (id) => {
 };
 const Rating = (props) => {
   var _a;
-  const { value, size = "md", data, withSkeletonLoading = true, isScrollToElementWidget = true, defaultData } = props;
-  const { productId } = data || {};
+  const { value, size = "md", params, withSkeletonLoading = true, isScrollToElementWidget = true, defaultData } = props;
+  const { productId } = params || {};
   const { isRenderApp, triggerRenderMultipleComponent } = React__default.useContext(SledgeContext);
   const [isFirstLoading, setIsFirstLoading] = React__default.useState(true);
   const [isLoading, setIsLoading] = React__default.useState(true);
@@ -1178,21 +1179,21 @@ const Rating = (props) => {
     let run = false;
     let valueTotalReview = 0;
     let valueAverageReview;
-    let data2;
+    let data;
     if (!defaultData) {
       response = await getReviewInfo(validateProductId);
       if (!response)
         return;
       const { status } = response;
-      data2 = response.data;
+      data = response.data;
       const { code } = status;
       run = code === 200 || false;
     } else {
-      data2 = defaultData;
+      data = defaultData;
       run = true;
     }
-    valueTotalReview = (data2 == null ? void 0 : data2.review_count) ? data2.review_count : 0;
-    valueAverageReview = ((_a2 = data2 == null ? void 0 : data2.rating) == null ? void 0 : _a2.average) ? data2.rating.average : 0;
+    valueTotalReview = (data == null ? void 0 : data.review_count) ? data.review_count : 0;
+    valueAverageReview = ((_a2 = data == null ? void 0 : data.rating) == null ? void 0 : _a2.average) ? data.rating.average : 0;
     if (run) {
       setTotalReview(valueTotalReview);
       setAverageReview(valueAverageReview);
@@ -1201,7 +1202,7 @@ const Rating = (props) => {
     }
   };
   const handleRefreshProductRating = async () => {
-    if (value && !data) {
+    if (value && !params) {
       setAverageReview(value);
       setIsLoading(false);
     } else {
@@ -1215,11 +1216,11 @@ const Rating = (props) => {
     response = JSON.parse(LOCAL_STORAGE_PRODUCT_REVIEW_SETTING);
     if (!response)
       return;
-    const { status, data: data2 } = response;
+    const { status, data } = response;
     const { code } = status;
     run = code === 200 || false;
     if (run) {
-      setDataSettings(data2);
+      setDataSettings(data);
       await handleRefreshProductRating();
     }
   };
@@ -1297,7 +1298,7 @@ const Rating = (props) => {
         }
         return /* @__PURE__ */ createElement("svg", { ...sizing, viewBox: "0 0 30 29", "data-product-review-rating-fill": item <= ratingValue ? "full" : fillOther, key: index }, /* @__PURE__ */ jsxRuntimeExports.jsx("use", { href: "#sledge-product-review-icons-rating-icon" }));
       }),
-      !value && data ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-product-review__rating-summary-total", children: [
+      !value && params ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-product-review__rating-summary-total", children: [
         "(",
         totalReview,
         ")"
@@ -1305,7 +1306,7 @@ const Rating = (props) => {
     ] })
   ] }) });
 };
-const WidgetHeaderAddTrigger = ({ isFirstLoading, text, dataSettings, data, onAfterAddReview }) => {
+const WidgetHeaderAddTrigger = ({ isFirstLoading, text, dataSettings, params, onAfterAddReview }) => {
   var _a, _b, _c;
   const {
     text_color: display_button_write_review_text_color,
@@ -1339,7 +1340,7 @@ const WidgetHeaderAddTrigger = ({ isFirstLoading, text, dataSettings, data, onAf
     {
       type: "button",
       colorType: "success",
-      onClick: () => typeof window !== "undefined" && window.sledgeProductReviewWidgetFormAdd && window.sledgeProductReviewWidgetFormAdd(data, onAfterAddReview),
+      onClick: () => typeof window !== "undefined" && window.sledgeProductReviewWidgetFormAdd && window.sledgeProductReviewWidgetFormAdd(params, onAfterAddReview),
       style: display_button_write_review_style,
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: 16, height: 17, viewBox: "0 0 16 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -1356,7 +1357,7 @@ const WidgetHeaderAddTrigger = ({ isFirstLoading, text, dataSettings, data, onAf
     }
   ) });
 };
-const WidgetHeaderSort = ({ isFirstLoading, productReviewSort, dataSettings, setSelectedSort, setIsRefreshWidgetList }) => {
+const WidgetHeaderSort = ({ isFirstLoading, productReviewSort, dataSettings, setSelectedSort, setIsRefreshWidgetList, LinkComponent }) => {
   var _a, _b;
   const { default_sort, show_sorting_options } = ((_a = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _a.widget) || {};
   const [clickedSortId, setClickedSortId] = React__default.useState(default_sort || null);
@@ -1388,7 +1389,9 @@ const WidgetHeaderSort = ({ isFirstLoading, productReviewSort, dataSettings, set
         };
       }),
       value: getSelectedSort,
-      onChange: ({ value }) => handleChangeSort(value)
+      onChange: ({ value }) => handleChangeSort(value),
+      LinkComponent,
+      link: "?page=1&sort=value"
     }
   ) }) });
 };
@@ -1416,8 +1419,8 @@ const VISIBLE_ANIMATION = {
 };
 const WidgetHeaderSummary = (props) => {
   var _a, _b, _c;
-  const { data, dataSettings, defaultData } = props;
-  const { productId } = data || {};
+  const { params, dataSettings, summaryData } = props;
+  const { productId } = params || {};
   const { fill_color: display_summary_bar_fill_color, outline_color: display_summary_bar_outline_color } = ((_b = (_a = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _a.widget) == null ? void 0 : _b.summary_bar) || {};
   const { review_singular, review_plural } = ((_c = dataSettings == null ? void 0 : dataSettings.languages) == null ? void 0 : _c.widget) || {};
   const [isFirstLoading, setIsFirstLoading] = React__default.useState(true);
@@ -1438,32 +1441,32 @@ const WidgetHeaderSummary = (props) => {
   const handleProductReviewInfo = async () => {
     var _a2;
     let response;
-    let data2;
+    let data;
     let run = false;
     let valueTotalReview = 0;
     let valueRatingList;
     let valueAverageReview;
-    if (!defaultData) {
+    if (!summaryData) {
       response = await getReviewInfo(productId);
       if (!response)
         return;
       const { status } = response;
       const { code } = status;
-      data2 = response.data;
+      data = response.data;
       run = code === 200 || false;
     } else {
-      data2 = defaultData;
+      data = summaryData;
       run = true;
     }
-    valueTotalReview = (data2 == null ? void 0 : data2.review_count) ? data2.review_count : 0;
-    valueRatingList = (data2 == null ? void 0 : data2.rating) ? {
-      5: data2.rating["5"] || 0,
-      4: data2.rating["4"] || 0,
-      3: data2.rating["3"] || 0,
-      2: data2.rating["2"] || 0,
-      1: data2.rating["1"] || 0
+    valueTotalReview = (data == null ? void 0 : data.review_count) ? data.review_count : 0;
+    valueRatingList = (data == null ? void 0 : data.rating) ? {
+      5: data.rating["5"] || 0,
+      4: data.rating["4"] || 0,
+      3: data.rating["3"] || 0,
+      2: data.rating["2"] || 0,
+      1: data.rating["1"] || 0
     } : ratingList;
-    valueAverageReview = ((_a2 = data2 == null ? void 0 : data2.rating) == null ? void 0 : _a2.average) ? data2.rating.average : "0";
+    valueAverageReview = ((_a2 = data == null ? void 0 : data.rating) == null ? void 0 : _a2.average) ? data.rating.average : "0";
     if (run) {
       setTotalReview(valueTotalReview);
       setRatingList(valueRatingList);
@@ -1777,7 +1780,7 @@ const ProductGrid = ({
                 /* @__PURE__ */ jsxRuntimeExports.jsx(
                   Trigger,
                   {
-                    data: {
+                    params: {
                       productId: id,
                       productVariantId: variant_id,
                       productName: title,
@@ -1834,7 +1837,7 @@ const ProductGrid = ({
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-rating", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             Rating,
             {
-              data: {
+              params: {
                 productId: id
               },
               size: "xs",
@@ -2675,9 +2678,9 @@ const SearchIconWidgetPopup = () => {
 const SearchResultWidget = (props) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
   const { isRenderApp, isJsVersion } = React__default.useContext(SledgeContext);
-  const { layoutType = "default", query, data, children, onAfterAddToCart, onAfterAddWishlist, onAfterRemoveWishlist, onAfterRenderProduct } = props;
+  const { layoutType = "default", query, params, children, onAfterAddToCart, onAfterAddWishlist, onAfterRemoveWishlist, onAfterRenderProduct } = props;
   const { keyword: queryKeyword = "" } = query || {};
-  const { collectionId } = data || {};
+  const { collectionId } = params || {};
   let productCardsComponent = null;
   React__default.Children.map(children, (child) => {
     if (React__default.isValidElement(child) && isFunction(child.type)) {
@@ -2711,8 +2714,8 @@ const SearchResultWidget = (props) => {
     setClickedTabIndexName(name);
     setResultComponent(id.includes(suffixIndexProduct) ? /* @__PURE__ */ jsxRuntimeExports.jsx(ResultProduct, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(ResultCategory, {}));
   };
-  const handleInitStates = async (data2, type) => {
-    const { filters, tabs, suffix_index_product, hidden_tags, display, show_out_of_stock } = data2;
+  const handleInitStates = async (data, type) => {
+    const { filters, tabs, suffix_index_product, hidden_tags, display, show_out_of_stock } = data;
     let getTabs = layoutType === "product-filter" ? tabs.filter(({ index }) => index == null ? void 0 : index.includes(suffix_index_product)) : tabs;
     let response;
     let body = {
@@ -2813,9 +2816,9 @@ const SearchResultWidget = (props) => {
     response = JSON.parse(LOCAL_STORAGE_INSTANT_SEARCH_SETTING);
     if (!response)
       return;
-    const { status, data: data2 } = response;
+    const { status, data } = response;
     const { code } = status;
-    const { allowed_sorts, default_sort, filters, tabs, suffix_index_product, hidden_tags, display, colors, show_out_of_stock } = data2;
+    const { allowed_sorts, default_sort, filters, tabs, suffix_index_product, hidden_tags, display, colors, show_out_of_stock } = data;
     run = code === 200 || false;
     if (run) {
       setAllowedSorts((allowed_sorts == null ? void 0 : allowed_sorts.length) ? allowed_sorts : []);
@@ -2831,9 +2834,9 @@ const SearchResultWidget = (props) => {
         setClickedTabIndexId(getFirstIndex.index);
         setClickedTabIndexName(getFirstIndex.name);
       }
-      await handleInitStates(data2, "default");
+      await handleInitStates(data, "default");
       if (layoutType === "default")
-        await handleInitStates(data2, "totalDataPerIndex");
+        await handleInitStates(data, "totalDataPerIndex");
     }
   };
   React__default.useEffect(() => {
@@ -3149,7 +3152,7 @@ const SearchResultWidget = (props) => {
       defaultSort,
       showOutOfStock,
       query,
-      data,
+      params,
       isJsVersion,
       productCardsComponent,
       onAfterAddToCart,
@@ -3182,7 +3185,7 @@ const ResultProduct = (props) => {
     defaultSort,
     showOutOfStock,
     query,
-    data,
+    params,
     isJsVersion,
     productCardsComponent,
     setKeyword,
@@ -3197,7 +3200,7 @@ const ResultProduct = (props) => {
     searchResultContainerRef
   } = props || {};
   const { keyword: queryKeyword = "" } = query || {};
-  const { collectionId } = data || {};
+  const { collectionId } = params || {};
   const [isFirstLoading, setIsFirstLoading] = React__default.useState(true);
   const [isLoading, setIsLoading] = React__default.useState(true);
   const [isOpenSort, setIsOpenSort] = React__default.useState(false);