@sledge-app/react-instant-search 2.0.63 → 2.0.64

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

@@ -68,7 +68,8 @@ const DATASET_ATTRIBUTE_KEY = {
     RENDER_PAGE_CARD: "data-render-page-card",
     RENDER_BLOG_CARD: "data-render-blog-card",
     RENDER_ARTICLE_CARD: "data-render-article-card",
-    CURRENT_TAGS: "data-current-tags"
+    CURRENT_TAGS: "data-current-tags",
+    COLLECTION_DEFAULT_SORT_BY: "data-collection-default-sort-by"
   },
   PRODUCT_RECOMMENDATION: {
     DISPLAY_LIMIT: "data-display-limit",
@@ -702,6 +703,23 @@ const translate = (props) => {
   const translation = (_a = translationObject == null ? void 0 : translationObject[locale]) == null ? void 0 : _a[objectKey];
   return translation || callbackValue;
 };
+const getSortMap = ({
+  activeCollectionId = "",
+  collectionAllId = ""
+}) => {
+  activeCollectionId = activeCollectionId || "default";
+  collectionAllId = collectionAllId || "all";
+  return {
+    "best-selling": `bestSellingSort.${collectionAllId}:asc`,
+    "manual": `featuredSort.${activeCollectionId}:asc`,
+    "created-ascending": "created_at:asc",
+    "created-descending": "created_at:desc",
+    "price-ascending": `first_available_variant.price:asc`,
+    "price-descending": `first_available_variant.price:desc`,
+    "title-ascending": "title:asc",
+    "title-descending": "title:desc"
+  };
+};
 const root = "";
 const Loading = "";
 const ConfirmationPopup = "";
@@ -2781,9 +2799,8 @@ const WidgetRoot = (props) => {
         }
       }
     ) : WishlistWidgetAlert ? /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.Fragment, { children: isJsVersion ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { dangerouslySetInnerHTML: { __html: WishlistWidgetAlert() } }) : /* @__PURE__ */ jsxRuntimeExports.jsx(WishlistWidgetAlert, {}) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-wishlist__widget-alert", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-wishlist__widget-alert-text", children: [
-      alert || "Please login to save your wishlist across devices.",
-      " ",
-      /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: "/account/login", className: "sledge-wishlist__widget-alert-link", children: alert_login || "Login Here" })
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { dangerouslySetInnerHTML: { __html: alert || "Please login to save your wishlist across devices." } }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: "/account/login", className: "sledge-wishlist__widget-alert-link", dangerouslySetInnerHTML: { __html: alert_login || "Login Here" } })
     ] }) }) }) }),
     React__default.Children.count(children) && React__default.Children.map(children, (child) => {
       return React__default.cloneElement(child, {
@@ -2830,7 +2847,7 @@ Widget.Root = WidgetRoot;
 Widget.Header = WidgetHeader$1;
 Widget.List = WidgetList;
 const Badge = (props) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   const {
     children,
     useProxyUrl = false,
@@ -2859,6 +2876,7 @@ const Badge = (props) => {
   const { use_wishlist_flyout } = ((_b = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _b.widget) || {};
   const { floating_button_type } = (dataSettings == null ? void 0 : dataSettings.launch_point) || {};
   const { alert_login, alert, login_button, header_title: language_header_title, see_all_wishlist } = ((_c = dataSettings == null ? void 0 : dataSettings.languages) == null ? void 0 : _c.widget) || {};
+  const { is_required_login } = ((_d = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _d.global) || {};
   const defaultPosition = positionProp || floating_button_type;
   const position = defaultPosition ? defaultPosition : "none";
   const urlWishlistWidget = urlWishlistWidgetProp || proxyUrl;
@@ -2880,9 +2898,9 @@ const Badge = (props) => {
     response = wishlistPreviewSettings || JSON.parse(LOCAL_STORAGE_WISHLIST_SETTING);
     if (!response)
       return;
-    const { is_required_login } = response || {};
+    const { is_required_login: is_required_login2 } = response || {};
     setDataSettings(response);
-    setIsRequiredLogin(sledgeAnonymId && is_required_login);
+    setIsRequiredLogin(sledgeAnonymId && is_required_login2);
     setIsFirstLoading(false);
   };
   const handleConfirmationPopup = (props2) => {
@@ -2906,8 +2924,12 @@ const Badge = (props) => {
       if (useWishlistFlyout) {
         setOpenFlyoutWishlistWidget(true);
       } else {
-        if (useProxyUrl)
+        if (useProxyUrl) {
           window.location.href = proxyUrl || "/";
+        } else {
+          if (urlWishlistWidgetProp)
+            window.location.href = urlWishlistWidgetProp;
+        }
       }
     }
   };
@@ -2946,27 +2968,46 @@ const Badge = (props) => {
     });
   }
   const HeaderMenu = () => {
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: `${mainClassName} sledge-wishlist__badge`, onClick: handleRequiredLogin, onMouseEnter: () => setColorIcon("#F85538"), onMouseLeave: () => setColorIcon(defaultColorIcon), children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(HeartIcon, { width: 20, height: 20, type: "outline", color: colorIcon }),
-      !isFirstLoading && /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "span",
-        {
-          className: `sledge-wishlist__badge-counter sledge-wishlist__badge-counter-header-menu ${isMaximizeTotalWishlist ? "sledge-wishlist__badge-fit-content" : ""}`,
-          "data-component": INTERNAL_SELECTOR_VALUE.WISHLIST.ELEMENT_BADGE_COUNTER,
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { "data-component": INTERNAL_SELECTOR_VALUE.ELEMENT_CONTAINER_WIDGET, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            BadgeCounter,
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "span",
+      {
+        className: `${mainClassName} sledge-wishlist__badge`,
+        onClick: handleRequiredLogin,
+        onMouseEnter: () => {
+          var _a2, _b2;
+          if ((_b2 = (_a2 = window == null ? void 0 : window.matchMedia) == null ? void 0 : _a2.call(window, "(pointer: coarse)")) == null ? void 0 : _b2.matches)
+            return;
+          setColorIcon("#F85538");
+        },
+        onMouseLeave: () => {
+          var _a2, _b2;
+          if ((_b2 = (_a2 = window == null ? void 0 : window.matchMedia) == null ? void 0 : _a2.call(window, "(pointer: coarse)")) == null ? void 0 : _b2.matches)
+            return;
+          setColorIcon(defaultColorIcon);
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(HeartIcon, { width: 20, height: 20, type: "outline", color: colorIcon }),
+          !isFirstLoading && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "span",
             {
-              data: isJsVersion ? {
-                ...data,
-                ...{
-                  total_data: (localStorage == null ? void 0 : localStorage.getItem(LOCAL_STORAGE_KEY.WISHLIST_BADGE_COUNTER)) || (data == null ? void 0 : data.total_data)
+              className: `sledge-wishlist__badge-counter sledge-wishlist__badge-counter-header-menu ${isMaximizeTotalWishlist ? "sledge-wishlist__badge-fit-content" : ""}`,
+              "data-component": INTERNAL_SELECTOR_VALUE.WISHLIST.ELEMENT_BADGE_COUNTER,
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { "data-component": INTERNAL_SELECTOR_VALUE.ELEMENT_CONTAINER_WIDGET, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                BadgeCounter,
+                {
+                  data: isJsVersion ? {
+                    ...data,
+                    ...{
+                      total_data: (localStorage == null ? void 0 : localStorage.getItem(LOCAL_STORAGE_KEY.WISHLIST_BADGE_COUNTER)) || (data == null ? void 0 : data.total_data)
+                    }
+                  } : data
                 }
-              } : data
+              ) })
             }
-          ) })
-        }
-      )
-    ] });
+          )
+        ]
+      }
+    );
   };
   const FloatingFull = () => {
     return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${mainClassName} sledge-wishlist__badge-floating sledge__badge-floating-${position}`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { onClick: handleRequiredLogin, className: "sledge-wishlist__badge-floating-icon-link", children: [
@@ -3042,6 +3083,9 @@ const Badge = (props) => {
             }
           )
         ] }),
+        ...sledgeAnonymId && !is_required_login ? {
+          flyoutInfoContent: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { dangerouslySetInnerHTML: { __html: alert || "Please login to save your wishlist across devices." } })
+        } : {},
         content: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-flyout-widget__wishlist-content", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Widget.Root, { isFlyout: useWishlistFlyout, children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(CustomComponents, { productCard: productCardsComponent }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(Widget.List, {})
@@ -3127,7 +3171,9 @@ const BadgeInitSelector = (props) => {
           const USE_PROXY_URL = item.getAttribute(DATASET_ATTRIBUTE_KEY.WISHLIST.USE_PROXY_URL);
           const USE_WISHLIST_FLYOUT = item.getAttribute(DATASET_ATTRIBUTE_KEY.WISHLIST.USE_WISHLIST_FLYOUT);
           const URL_WISHLIST_WIDGET = item.getAttribute(DATASET_ATTRIBUTE_KEY.WISHLIST.URL_WISHLIST_WIDGET);
+          const POSITION_WIDGET = item.getAttribute(DATASET_ATTRIBUTE_KEY.GLOBAL.POSITION_WIDGET);
           const PRODUCT_CARDS = (_a2 = item.querySelector(SELECTOR.GLOBAL.ELEMENT_CUSTOM_COMPONENTS)) == null ? void 0 : _a2.getAttribute(DATASET_ATTRIBUTE_KEY.GLOBAL.RENDER_PRODUCT_CARD);
+          const isPositionFromProps = ["none", "left", "right", "bottom-left", "bottom-right"].includes(POSITION_WIDGET);
           client.createRoot(elementContainerWidget).render(
             /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.StrictMode, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
               SledgeContext.Provider,
@@ -3147,7 +3193,7 @@ const BadgeInitSelector = (props) => {
                     previewSettings,
                     useProxyUrl: Boolean(USE_PROXY_URL && USE_PROXY_URL === "true"),
                     useWishlistFlyout: Boolean(USE_WISHLIST_FLYOUT && USE_WISHLIST_FLYOUT === "true"),
-                    position: floating_button_type,
+                    position: isPositionFromProps ? POSITION_WIDGET : floating_button_type,
                     urlWishlistWidget: URL_WISHLIST_WIDGET,
                     children: /* @__PURE__ */ jsxRuntimeExports.jsx(CustomComponents, { productCard: stringToFunction(PRODUCT_CARDS) })
                   }
@@ -3176,7 +3222,9 @@ const BadgeInitSelector = (props) => {
           const USE_PROXY_URL = item.getAttribute(DATASET_ATTRIBUTE_KEY.WISHLIST.USE_PROXY_URL);
           const USE_WISHLIST_FLYOUT = item.getAttribute(DATASET_ATTRIBUTE_KEY.WISHLIST.USE_WISHLIST_FLYOUT);
           const URL_WISHLIST_WIDGET = item.getAttribute(DATASET_ATTRIBUTE_KEY.WISHLIST.URL_WISHLIST_WIDGET);
+          const POSITION_WIDGET = item.getAttribute(DATASET_ATTRIBUTE_KEY.GLOBAL.POSITION_WIDGET);
           const PRODUCT_CARDS = (_a2 = item.querySelector(SELECTOR.GLOBAL.ELEMENT_CUSTOM_COMPONENTS)) == null ? void 0 : _a2.getAttribute(DATASET_ATTRIBUTE_KEY.GLOBAL.RENDER_PRODUCT_CARD);
+          const isPositionFromProps = ["none", "left", "right", "bottom-left", "bottom-right"].includes(POSITION_WIDGET);
           client.createRoot(elementContainerWidget).render(
             /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.StrictMode, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
               SledgeContext.Provider,
@@ -3196,7 +3244,7 @@ const BadgeInitSelector = (props) => {
                     previewSettings,
                     useProxyUrl: Boolean(USE_PROXY_URL && USE_PROXY_URL === "true"),
                     useWishlistFlyout: Boolean(USE_WISHLIST_FLYOUT && USE_WISHLIST_FLYOUT === "true"),
-                    position: floating_button_type,
+                    position: isPositionFromProps ? POSITION_WIDGET : floating_button_type,
                     urlWishlistWidget: URL_WISHLIST_WIDGET,
                     children: /* @__PURE__ */ jsxRuntimeExports.jsx(CustomComponents, { productCard: stringToFunction(PRODUCT_CARDS) })
                   }
@@ -3217,7 +3265,9 @@ const BadgeInitSelector = (props) => {
         const USE_PROXY_URL = item.getAttribute(DATASET_ATTRIBUTE_KEY.WISHLIST.USE_PROXY_URL);
         const USE_WISHLIST_FLYOUT = item.getAttribute(DATASET_ATTRIBUTE_KEY.WISHLIST.USE_WISHLIST_FLYOUT);
         const URL_WISHLIST_WIDGET = item.getAttribute(DATASET_ATTRIBUTE_KEY.WISHLIST.URL_WISHLIST_WIDGET);
+        const POSITION_WIDGET = item.getAttribute(DATASET_ATTRIBUTE_KEY.GLOBAL.POSITION_WIDGET);
         const PRODUCT_CARDS = (_a2 = item.querySelector(SELECTOR.GLOBAL.ELEMENT_CUSTOM_COMPONENTS)) == null ? void 0 : _a2.getAttribute(DATASET_ATTRIBUTE_KEY.GLOBAL.RENDER_PRODUCT_CARD);
+        const isPositionFromProps = ["none", "left", "right", "bottom-left", "bottom-right"].includes(POSITION_WIDGET);
         const elementPreload = item.querySelector(`[${SELECTOR_ATTRIBUTE_KEY}="preload"]`);
         if (elementPreload)
           elementPreload.remove();
@@ -3247,6 +3297,7 @@ const BadgeInitSelector = (props) => {
                   useProxyUrl: Boolean(USE_PROXY_URL && USE_PROXY_URL === "true"),
                   useWishlistFlyout: Boolean(USE_WISHLIST_FLYOUT && USE_WISHLIST_FLYOUT === "true"),
                   urlWishlistWidget: URL_WISHLIST_WIDGET,
+                  ...isPositionFromProps ? { position: POSITION_WIDGET } : {},
                   children: /* @__PURE__ */ jsxRuntimeExports.jsx(CustomComponents, { productCard: stringToFunction(PRODUCT_CARDS) })
                 }
               )
@@ -3368,6 +3419,10 @@ const Trigger = (props) => {
         } else {
           BadgeCounterInitSelector({ reload: true });
         }
+        TriggerInitSelector({
+          selector: `[${DATASET_ATTRIBUTE_KEY.GLOBAL.PRODUCT_ID}="${productId}"][${DATASET_ATTRIBUTE_KEY.GLOBAL.PRODUCT_VARIANT_ID}="${productVariantId}"]${SELECTOR.WISHLIST.ELEMENT_TRIGGER}`,
+          reload: true
+        });
       }
       if (typeof window !== "undefined") {
         if (window.sledgeWishlistWidgetListUpdate)
@@ -3494,6 +3549,83 @@ const Trigger = (props) => {
     }
   ) });
 };
+const ElementInit = (item, reload, previewSettings) => {
+  if ((item == null ? void 0 : item.hasAttribute("loaded")) && !reload)
+    return;
+  item.setAttribute("loaded", "");
+  if (item.parentNode)
+    item.parentNode.classList.add("sledge-wishlist__trigger-parent-element");
+  item.classList.add("sledge-wishlist__trigger-wrapper");
+  const PRODUCT_ID = item.getAttribute(DATASET_ATTRIBUTE_KEY.GLOBAL.PRODUCT_ID);
+  const PRODUCT_VARIANT_ID = item.getAttribute(DATASET_ATTRIBUTE_KEY.GLOBAL.PRODUCT_VARIANT_ID);
+  const PRODUCT_NAME = item.getAttribute(DATASET_ATTRIBUTE_KEY.GLOBAL.PRODUCT_NAME);
+  const PRODUCT_VENDOR = item.getAttribute(DATASET_ATTRIBUTE_KEY.GLOBAL.PRODUCT_VENDOR);
+  const PRODUCT_SKU = item.getAttribute(DATASET_ATTRIBUTE_KEY.GLOBAL.PRODUCT_SKU);
+  const PRODUCT_VARIANT_NAME = item.getAttribute(DATASET_ATTRIBUTE_KEY.GLOBAL.PRODUCT_VARIANT_NAME);
+  const PRODUCT_LINK = item.getAttribute(DATASET_ATTRIBUTE_KEY.GLOBAL.PRODUCT_LINK);
+  const PRODUCT_IMAGE = item.getAttribute(DATASET_ATTRIBUTE_KEY.GLOBAL.PRODUCT_IMAGE);
+  const PRODUCT_CURRENCY = item.getAttribute(DATASET_ATTRIBUTE_KEY.GLOBAL.PRODUCT_CURRENCY);
+  const PRODUCT_PRICE = item.getAttribute(DATASET_ATTRIBUTE_KEY.GLOBAL.PRODUCT_PRICE);
+  const TRIGGER_BADGE = item.getAttribute(DATASET_ATTRIBUTE_KEY.WISHLIST.TRIGGER_BADGE);
+  const getElementContainerWidgetQuery = item.querySelector(`[${SELECTOR_ATTRIBUTE_KEY}="${INTERNAL_SELECTOR_VALUE.ELEMENT_CONTAINER_WIDGET}"]`);
+  if (getElementContainerWidgetQuery)
+    getElementContainerWidgetQuery.remove();
+  let elementContainerWidget = document.createElement("div");
+  elementContainerWidget.setAttribute(SELECTOR_ATTRIBUTE_KEY, INTERNAL_SELECTOR_VALUE.ELEMENT_CONTAINER_WIDGET);
+  item.appendChild(elementContainerWidget);
+  client.createRoot(elementContainerWidget).render(
+    /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.StrictMode, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      SledgeContext.Provider,
+      {
+        value: {
+          isRenderApp: {
+            wishlist: true,
+            productReview: true,
+            instantSearch: true
+          },
+          sledgeAnonymId: localStorage.getItem(LOCAL_STORAGE_KEY.ANONYM_ID) || "",
+          isJsVersion: true
+        },
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Trigger,
+          {
+            params: {
+              productId: PRODUCT_ID || "",
+              productVariantId: PRODUCT_VARIANT_ID || "",
+              productName: PRODUCT_NAME || "",
+              productVendor: PRODUCT_VENDOR || "",
+              productSku: PRODUCT_SKU || "",
+              productVariantName: PRODUCT_VARIANT_NAME || "",
+              productLink: PRODUCT_LINK || "",
+              productImage: PRODUCT_IMAGE || "",
+              productCurrency: PRODUCT_CURRENCY || "",
+              productPrice: PRODUCT_PRICE || ""
+            },
+            ...TRIGGER_BADGE && {
+              triggerBadge: TRIGGER_BADGE
+            },
+            reload,
+            previewSettings
+          }
+        )
+      }
+    ) })
+  );
+};
+const TriggerInitSelector = (props) => {
+  const { selector = "", reload = false, previewSettings = null } = props || {};
+  const getSelector = selector || SELECTOR.WISHLIST.ELEMENT_TRIGGER;
+  watchElement({
+    selector: getSelector,
+    init: ElementInit
+  });
+  let element = Array.from(document.querySelectorAll(getSelector));
+  if (!element || element && !element.length)
+    return;
+  element.map((item) => {
+    ElementInit(item, reload, previewSettings);
+  });
+};
 const getReviewInfo = async (props) => {
   const { productId = null, query = null } = props || {};
   let convertId = productId ? sanitizeDataId(productId) : "";
@@ -3704,6 +3836,7 @@ const Rating = (props) => {
         ["data-rating-size"]: size
       } : {},
       ref: rootRef,
+      "data-review-counter": totalReview || 0,
       children: isFirstLoading && withSkeletonLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "230px", height: "28px", color: "lighten", rounded: "md" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !isLoading && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
         [1, 2, 3, 4, 5].map((item, index) => {
           if (!(item <= numberOfIcons))
@@ -5612,7 +5745,7 @@ const DotButton = (props) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", ...restProps, children });
 };
 const FlyoutSidebar$1 = "";
-const FlyoutSidebar = ({ title, content, footer = null, open, setOpen, position = "left", className = "", withBlurEffect = false }) => {
+const FlyoutSidebar = ({ title, content, footer = null, open, setOpen, position = "left", className = "", withBlurEffect = false, flyoutInfoContent = null }) => {
   const [isLoading, setIsLoading] = React__default.useState(false);
   const [isScrollAtBottom, setIsScrollAtBottom] = React__default.useState(false);
   const contentContainerRef = React__default.useRef(null);
@@ -5639,10 +5772,13 @@ const FlyoutSidebar = ({ title, content, footer = null, open, setOpen, position
     if (!open)
       return;
     setIsLoading(true);
-    setTimeout(() => {
-      setIsLoading(false);
-    }, 0);
   }, [open]);
+  React__default.useEffect(() => {
+    if (isLoading) {
+      const id = requestAnimationFrame(() => setIsLoading(false));
+      return () => cancelAnimationFrame(id);
+    }
+  }, [isLoading]);
   const showBlurEffect = withBlurEffect && !isScrollAtBottom;
   return createPortal(
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `sledge__flyout-mobile ${className}`, "data-open": open, "data-position": position, children: [
@@ -5652,6 +5788,7 @@ const FlyoutSidebar = ({ title, content, footer = null, open, setOpen, position
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__flyout-mobile-title", children: title }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__flyout-close-field-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "sledge__flyout-close-field", type: "button", onClick: () => setOpen(false), children: /* @__PURE__ */ jsxRuntimeExports.jsx(CloseIcon, { width: 14, height: 14, color: "#393d4e" }) }) })
         ] }),
+        flyoutInfoContent ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__flyout-mobile-info", children: flyoutInfoContent }) : null,
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: contentContainerRef, className: `sledge__flyout-mobile-content ${showBlurEffect ? "sledge__flyout-mobile-content-blur-effect" : ""}`, children: isLoading ? null : content }),
         footer ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__flyout-mobile-footer", children: isLoading ? null : footer }) : null
       ] })
@@ -9202,7 +9339,8 @@ const SearchResultWidget = (props) => {
     data: propsData,
     sledgeSettings,
     previewSettings: previewSettingsProp,
-    currentTags = []
+    currentTags = [],
+    collectionDefaultSortBy
   } = props;
   const queryKeyword = (query == null ? void 0 : query.keyword) ? query.keyword : DEFAULT_QUERY_PARAM.KEYWORD;
   const querySortBy = (query == null ? void 0 : query.sortBy) ? query.sortBy : DEFAULT_QUERY_PARAM.SORT_BY;
@@ -9578,6 +9716,7 @@ const SearchResultWidget = (props) => {
       active_tabs,
       allowed_sorts,
       default_sort,
+      featured_as_collection_default_sort,
       index_product,
       tabs: tabs2,
       hidden_tags,
@@ -10088,7 +10227,8 @@ const SearchResultWidget = (props) => {
       instantSearchSettings,
       currentColumnGrid,
       setCurrentColumnGrid,
-      currentTags
+      currentTags,
+      collectionDefaultSortBy
     })
   ] });
 };
@@ -10176,7 +10316,8 @@ const ResultProduct = React__default.memo((props) => {
     instantSearchSettings,
     currentColumnGrid,
     setCurrentColumnGrid,
-    currentTags
+    currentTags,
+    collectionDefaultSortBy
   } = props || {};
   const { collectionId, collectionName } = params || {};
   const isLoadMore = ["load_more", "infinite_scroll"].includes((_a = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _a.pagination_type);
@@ -10552,7 +10693,7 @@ const ResultProduct = React__default.memo((props) => {
     setSearchFacetDistribution(facetDistribution);
   };
   const handleSearchResult = async (props2) => {
-    var _a2, _b2;
+    var _a2, _b2, _c2;
     if (!clickedTabIndexId)
       return;
     const { isLoadMore: isLoadMore2 = false, isReplaceData = false, onSearch } = props2;
@@ -10576,8 +10717,20 @@ const ResultProduct = React__default.memo((props) => {
     let sort = soldProductAtEnd ? ["availability:asc"] : [];
     if (clickedSortId)
       sort.push(clickedSortId);
+    if (collectionDefaultSortBy && ((_a2 = sort == null ? void 0 : sort.some) == null ? void 0 : _a2.call(sort, (item) => item.includes("featuredSort."))) && (instantSearchSettings == null ? void 0 : instantSearchSettings.featured_as_collection_default_sort)) {
+      const sortMap = getSortMap({
+        activeCollectionId: collectionId,
+        collectionAllId: instantSearchSettings == null ? void 0 : instantSearchSettings.collections_all_id
+      });
+      sort = sort.map((item) => {
+        if (item.includes("featuredSort.")) {
+          return sortMap[collectionDefaultSortBy];
+        }
+        return item;
+      });
+    }
     if (propsData && handleSearchResultFirstTime) {
-      response = (_b2 = (_a2 = propsData == null ? void 0 : propsData.result) == null ? void 0 : _a2.results) == null ? void 0 : _b2[0];
+      response = (_c2 = (_b2 = propsData == null ? void 0 : propsData.result) == null ? void 0 : _b2.results) == null ? void 0 : _c2[0];
     } else {
       response = await handleSearchResponse({
         layoutType,