@sledge-app/react-instant-search 2.0.44 → 2.0.46

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

@@ -4190,7 +4190,7 @@ const addToCartTrigger = async (data) => {
   });
 };
 const VariantSelector = (props) => {
-  var _a, _b, _c;
+  var _a;
   const {
     data,
     setSelectedVariantId,
@@ -4201,7 +4201,6 @@ const VariantSelector = (props) => {
     setSelectedVariantCompareAtPrice,
     sourceApp,
     instantSearchSettings,
-    optionSelectedValue,
     hasEntryImage
   } = props;
   const { product } = data || {};
@@ -4209,24 +4208,6 @@ const VariantSelector = (props) => {
   const { id, handle, url } = product || {};
   const options = (product == null ? void 0 : product.options) ? Object.entries(product.options) : [];
   const images = (product == null ? void 0 : product.images) ?? [];
-  const isSplitProducts = Boolean((_a = instantSearchSettings == null ? void 0 : instantSearchSettings.split_products) == null ? void 0 : _a.enable);
-  const bySplitProducts = (_b = instantSearchSettings == null ? void 0 : instantSearchSettings.split_products) == null ? void 0 : _b.by;
-  React__default.useEffect(() => {
-    if (isSplitProducts && optionSelectedValue) {
-      const productCardElement = document.querySelector(`.sledge__product-grid-card[data-product-id="${id}"][data-option-selected-value="${encodeURIComponent(optionSelectedValue)}"]`);
-      if (productCardElement) {
-        const variantColorSwatch = productCardElement.querySelector(`.sledge__product-variant-color-swatch[data-option-value="${encodeURIComponent(optionSelectedValue)}"]`);
-        if (variantColorSwatch) {
-          variantColorSwatch.dispatchEvent(new Event("click", { bubbles: true }));
-        }
-        const variantSelectOption = productCardElement.querySelector(`.sledge__product-variant-size-swatch-select[data-option-name="${bySplitProducts}"]`);
-        if (variantSelectOption) {
-          variantSelectOption.value = optionSelectedValue;
-          variantSelectOption.dispatchEvent(new Event("change", { bubbles: true }));
-        }
-      }
-    }
-  }, [hasEntryImage]);
   const defaultSelected = {};
   function setDefaultFunction() {
     if (!(variants == null ? void 0 : variants.length))
@@ -4274,7 +4255,7 @@ const VariantSelector = (props) => {
     }
   }
   function setSelectedVariant(element, value, optionIndex) {
-    var _a2, _b2, _c2, _d, _e, _f, _g, _h, _i, _j, _k;
+    var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
     const parentCard = element.target.offsetParent;
     const selectedInput = parentCard.querySelector(`.sledge__product-grid-card-selected-option[data-product-id='${id}']`);
     setElementAttribute({
@@ -4282,8 +4263,8 @@ const VariantSelector = (props) => {
       attributeName: `data-selected-option${optionIndex}`,
       value
     });
-    const option1 = `[data-option-1="${stringToSlug((_b2 = (_a2 = selectedInput == null ? void 0 : selectedInput.attributes) == null ? void 0 : _a2["data-selected-option1"]) == null ? void 0 : _b2.value)}"]`;
-    const option2 = `${((_c2 = selectedInput == null ? void 0 : selectedInput.attributes) == null ? void 0 : _c2["data-selected-option2"]) ? `[data-option-2="${stringToSlug((_e = (_d = selectedInput == null ? void 0 : selectedInput.attributes) == null ? void 0 : _d["data-selected-option2"]) == null ? void 0 : _e.value)}"]` : ""}`;
+    const option1 = `[data-option-1="${stringToSlug((_b = (_a2 = selectedInput == null ? void 0 : selectedInput.attributes) == null ? void 0 : _a2["data-selected-option1"]) == null ? void 0 : _b.value)}"]`;
+    const option2 = `${((_c = selectedInput == null ? void 0 : selectedInput.attributes) == null ? void 0 : _c["data-selected-option2"]) ? `[data-option-2="${stringToSlug((_e = (_d = selectedInput == null ? void 0 : selectedInput.attributes) == null ? void 0 : _d["data-selected-option2"]) == null ? void 0 : _e.value)}"]` : ""}`;
     const selectOption = parentCard.querySelector(`select option${option1}${option2}`);
     const variantId = selectOption.attributes["data-graphql-id"].value;
     const imageId = (_f = selectOption.attributes["data-image-id"]) == null ? void 0 : _f.value;
@@ -4301,11 +4282,11 @@ const VariantSelector = (props) => {
       }
     });
     const setOther = () => {
-      var _a3, _b3;
+      var _a3, _b2;
       setElementAttribute({
         element: selectedInput,
         attributeName: "data-variant-id",
-        value: ((_b3 = (_a3 = selectOption == null ? void 0 : selectOption.attributes) == null ? void 0 : _a3["data-graphql-id"]) == null ? void 0 : _b3.value) || ""
+        value: ((_b2 = (_a3 = selectOption == null ? void 0 : selectOption.attributes) == null ? void 0 : _a3["data-graphql-id"]) == null ? void 0 : _b2.value) || ""
       });
       setElementAttribute({
         element: selectedInput,
@@ -4377,7 +4358,7 @@ const VariantSelector = (props) => {
       return /* @__PURE__ */ jsxRuntimeExports.jsx("option", { ...optionAttributes, children: title }, id2);
     }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-variant-images", children: images == null ? void 0 : images.map((image) => /* @__PURE__ */ jsxRuntimeExports.jsx("input", { type: "hidden", id: image == null ? void 0 : image.id, value: image == null ? void 0 : image.src }, image == null ? void 0 : image.id)) }),
-    (_c = options == null ? void 0 : options.map) == null ? void 0 : _c.call(options, (option, optionParentIndex) => {
+    (_a = options == null ? void 0 : options.map) == null ? void 0 : _a.call(options, (option, optionParentIndex) => {
       var _a2;
       const optionName = option[0];
       const optionValues = option[1];
@@ -4453,7 +4434,7 @@ ${selectedOption === item ? "sledge__product-variant-size-swatch-active" : ""} s
   ] });
 };
 const ProductCard = React__default.memo((props) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
   const {
     item,
     handleAddToCart,
@@ -4474,7 +4455,6 @@ const ProductCard = React__default.memo((props) => {
     previewSettings,
     isFlyout,
     instantSearchSettings,
-    optionSelectedValue,
     additionalCardProps,
     keyword
   } = props;
@@ -4528,6 +4508,14 @@ const ProductCard = React__default.memo((props) => {
     sku = ""
   } = (variants == null ? void 0 : variants.length) ? variants[0] : {};
   const productUrl = `${url}?variant=${(_a = variants == null ? void 0 : variants[0]) == null ? void 0 : _a.id}`;
+  const isSplitProducts = Boolean((_b = instantSearchSettings == null ? void 0 : instantSearchSettings.split_products) == null ? void 0 : _b.enable);
+  const bySplitProducts = (_c = instantSearchSettings == null ? void 0 : instantSearchSettings.split_products) == null ? void 0 : _c.by;
+  let optionSelectedValue = "";
+  if (isSplitProducts && bySplitProducts) {
+    const optionFirst = (_d = product == null ? void 0 : product.options) == null ? void 0 : _d[bySplitProducts];
+    const optionFirstValue = (optionFirst == null ? void 0 : optionFirst.length) ? optionFirst == null ? void 0 : optionFirst[0] : "";
+    optionSelectedValue = optionFirstValue;
+  }
   const defaultSelectedVariantId = variant_admin_graphql_api_id ? variant_admin_graphql_api_id : "";
   const defaultSelectedVariantStock = (variants == null ? void 0 : variants.length) && Object.hasOwn(variants[0], "inventory_quantity") ? variants[0].inventory_quantity : 0;
   const defaultSelectedVariantInventoryManagement = (variants == null ? void 0 : variants.length) && Object.hasOwn(variants[0], "inventory_management") ? variants[0].inventory_management : null;
@@ -4572,8 +4560,8 @@ const ProductCard = React__default.memo((props) => {
         },
         ...dataReviews && Object.keys(dataReviews).length ? {
           review: {
-            total: ((_b = dataReviews == null ? void 0 : dataReviews[id]) == null ? void 0 : _b.review_count) ? dataReviews == null ? void 0 : dataReviews[id].review_count : 0,
-            average: ((_d = (_c = dataReviews == null ? void 0 : dataReviews[id]) == null ? void 0 : _c.rating) == null ? void 0 : _d.average) ? dataReviews == null ? void 0 : dataReviews[id].rating.average : 0
+            total: ((_e = dataReviews == null ? void 0 : dataReviews[id]) == null ? void 0 : _e.review_count) ? dataReviews == null ? void 0 : dataReviews[id].review_count : 0,
+            average: ((_g = (_f = dataReviews == null ? void 0 : dataReviews[id]) == null ? void 0 : _f.rating) == null ? void 0 : _g.average) ? dataReviews == null ? void 0 : dataReviews[id].rating.average : 0
           }
         } : {}
       },
@@ -4754,7 +4742,7 @@ const ProductCard = React__default.memo((props) => {
                         onAfterAddWishlist,
                         onAfterRemoveWishlist,
                         wishlistChecked: dataWishlists == null ? void 0 : dataWishlists[id],
-                        ...objectPresent(previewSettings) && ((_f = (_e = previewSettings == null ? void 0 : previewSettings.settings) == null ? void 0 : _e.general) == null ? void 0 : _f.use_dummy_data) ? {
+                        ...objectPresent(previewSettings) && ((_i = (_h = previewSettings == null ? void 0 : previewSettings.settings) == null ? void 0 : _h.general) == null ? void 0 : _i.use_dummy_data) ? {
                           previewSettings
                         } : {}
                       }
@@ -4790,7 +4778,7 @@ const ProductCard = React__default.memo((props) => {
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-variant-images", children: (_h = (_g = product == null ? void 0 : product.images) == null ? void 0 : _g.map) == null ? void 0 : _h.call(_g, (image2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-variant-images", children: (_k = (_j = product == null ? void 0 : product.images) == null ? void 0 : _j.map) == null ? void 0 : _k.call(_j, (image2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
                       "img",
                       {
                         decoding: "async",
@@ -5034,9 +5022,6 @@ const ProductGrid = React__default.memo((props) => {
       "data-custom-card": Boolean(props == null ? void 0 : props.cards),
       "data-flyout": isFlyout,
       children: data == null ? void 0 : data.map((item, index) => {
-        var _a, _b, _c;
-        const isSplitProducts = Boolean((_a = instantSearchSettings == null ? void 0 : instantSearchSettings.split_products) == null ? void 0 : _a.enable);
-        const bySplitProducts = (_b = instantSearchSettings == null ? void 0 : instantSearchSettings.split_products) == null ? void 0 : _b.by;
         const productCardProps = {
           item,
           handleAddToCart,
@@ -5047,9 +5032,6 @@ const ProductGrid = React__default.memo((props) => {
             forLoopIndexWithPage: Number(currentPage) && Number(hitsPerPage) ? index + (Number(currentPage) - 1) * Number(hitsPerPage) : index
           },
           instantSearchSettings,
-          ...isSplitProducts && bySplitProducts ? {
-            optionSelectedValue: (_c = item == null ? void 0 : item.product) == null ? void 0 : _c.optionSelectedValue
-          } : {},
           ...props
         };
         return /* @__PURE__ */ jsxRuntimeExports.jsx(ProductCard, { ...productCardProps }, `sledge-product-card_${index}`);
@@ -10422,7 +10404,7 @@ const ResultProduct = React__default.memo((props) => {
     return dataClickedFacets2;
   };
   const handleSearchResultData = async (props2) => {
-    var _a2, _b2, _c2, _d2;
+    var _a2, _b2;
     const { isLoadMore: isLoadMore2 = false, result: resultProp, onSearch } = props2;
     const INSTANT_SEARCH_SETTING = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY.INSTANT_SEARCH_SETTING) || null);
     const { index_product } = INSTANT_SEARCH_SETTING || {};
@@ -10432,54 +10414,18 @@ const ResultProduct = React__default.memo((props) => {
     const result = layoutType === "default" && isFirstTimeOrOnSearch ? (_b2 = resultData == null ? void 0 : resultData.find) == null ? void 0 : _b2.call(resultData, ({ indexUid }) => indexUid.includes(index_product)) : resultData;
     if (!result)
       return;
-    const { hits: hitsResult, hitsPerPage, processingTimeMs, totalHits, totalPages, facetDistribution, query: queryResult } = result;
-    const isSplitProducts = Boolean((_c2 = instantSearchSettings == null ? void 0 : instantSearchSettings.split_products) == null ? void 0 : _c2.enable);
-    const bySplitProducts = (_d2 = instantSearchSettings == null ? void 0 : instantSearchSettings.split_products) == null ? void 0 : _d2.by;
-    const searchParams2 = new URLSearchParams(document.location.search);
-    const searchParamsObject = Object.fromEntries(searchParams2);
-    let hits = hitsResult;
-    if (isSplitProducts && bySplitProducts && (hits == null ? void 0 : hits.length)) {
-      let newHits = [];
-      hits.map((item) => {
-        var _a3;
-        const optionFirst = isSplitProducts && bySplitProducts ? (_a3 = item == null ? void 0 : item.options) == null ? void 0 : _a3[bySplitProducts] : [];
-        const optionFirstValues = (optionFirst == null ? void 0 : optionFirst.length) ? optionFirst : [];
-        if (isSplitProducts && (optionFirstValues == null ? void 0 : optionFirstValues.length)) {
-          optionFirstValues.map((optionFirstValue, indexFirstValue) => {
-            newHits.push({
-              ...item,
-              optionSelectedValue: optionFirstValue
-            });
-          });
-        } else {
-          newHits.push(item);
-        }
-      });
-      if (newHits == null ? void 0 : newHits.length) {
-        hits = newHits.filter((item) => {
-          var _a3, _b3, _c3, _d3, _e2;
-          const { optionSelectedValue } = item || {};
-          const optionsFiltered = bySplitProducts ? (_d3 = (_c3 = (_b3 = (_a3 = searchParamsObject == null ? void 0 : searchParamsObject[`options.${bySplitProducts}`]) == null ? void 0 : _a3.split) == null ? void 0 : _b3.call(_a3, ",")) == null ? void 0 : _c3.map) == null ? void 0 : _d3.call(_c3, (item2) => decodeURIComponent(item2)) : [];
-          const hasOptionsFiltered = optionsFiltered && (optionsFiltered == null ? void 0 : optionsFiltered.length) ? !((_e2 = optionsFiltered == null ? void 0 : optionsFiltered.includes) == null ? void 0 : _e2.call(optionsFiltered, optionSelectedValue)) : false;
-          const isOptionNotContainsKeyword = (queryResult == null ? void 0 : queryResult.length) ? !(optionSelectedValue == null ? void 0 : optionSelectedValue.length) ? true : !optionSelectedValue.toLowerCase().includes(queryResult.toLowerCase()) : false;
-          if (isSplitProducts && (hasOptionsFiltered || isOptionNotContainsKeyword)) {
-            return false;
-          }
-          return true;
-        });
-      }
-    }
+    const { hits, hitsPerPage, processingTimeMs, totalHits, totalPages, facetDistribution, query: queryResult } = result;
     const updateTabs = () => {
       const valueAllowedTabs = objectPresent(previewSettings) ? tabs : allowedTabs;
       if (valueAllowedTabs == null ? void 0 : valueAllowedTabs.length) {
         setAllowedTabs == null ? void 0 : setAllowedTabs(
           valueAllowedTabs.map((tab) => {
-            var _a3, _b3, _c3;
+            var _a3, _b3, _c2;
             const { index, total } = tab;
             let isCurrentIndex = index.includes(clickedTabIndexId);
             let tabTotal = isCurrentIndex ? totalHits : total;
             if (layoutType === "default" && ((_a3 = resultProp == null ? void 0 : resultProp.results) == null ? void 0 : _a3.length)) {
-              const { totalHits: totalHits2 } = (_c3 = (_b3 = resultProp == null ? void 0 : resultProp.results) == null ? void 0 : _b3.find) == null ? void 0 : _c3.call(_b3, ({ indexUid }) => indexUid.includes(index));
+              const { totalHits: totalHits2 } = (_c2 = (_b3 = resultProp == null ? void 0 : resultProp.results) == null ? void 0 : _b3.find) == null ? void 0 : _c2.call(_b3, ({ indexUid }) => indexUid.includes(index));
               tabTotal = totalHits2 || tabTotal;
             }
             return {
@@ -11478,9 +11424,20 @@ const SearchWidget = (props) => {
     handleSettings(localStorage.getItem(LOCAL_STORAGE_KEY.INSTANT_SEARCH_SETTING) || null);
   }, [previewSettings]);
   React__default.useEffect(() => {
+    var _a2, _b2;
     if (!isRenderAppInstantSearch)
       return;
     handleSettings(localStorage.getItem(LOCAL_STORAGE_KEY.INSTANT_SEARCH_SETTING) || null);
+    if (typeof window !== "undefined") {
+      if ((_b2 = (_a2 = window == null ? void 0 : window.sledge) == null ? void 0 : _a2.instantSearch) == null ? void 0 : _b2.searchWidget)
+        window.sledge.instantSearch.searchWidget.search = (keyword2 = "") => {
+          var _a3, _b3;
+          if (!(keyword2 == null ? void 0 : keyword2.length))
+            return;
+          setKeyword(keyword2);
+          (_b3 = (_a3 = searchFieldRef == null ? void 0 : searchFieldRef.current) == null ? void 0 : _a3.focus) == null ? void 0 : _b3.call(_a3);
+        };
+    }
   }, [isRenderAppInstantSearch]);
   useEffectOnChange(() => {
     const INSTANT_SEARCH_SETTING = instantSearchPreviewSettings || JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY.INSTANT_SEARCH_SETTING) || null);