@sledge-app/react-instant-search 0.0.14 → 0.0.16

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

@@ -16,6 +16,14 @@ const LOCAL_STORAGE_KEY = {
   INSTANT_SEARCH_SETTING: "sledge-instant-search-setting"
 };
 const SEARCH_RESULT_URL = "/pages/search-result";
+const SEPARATE_COMPONENT_DISPLAY_NAME = {
+  PRODUCT: {
+    CARDS: "ProductCards"
+  }
+};
+const SHOPIFY_GID = "gid://shopify/";
+const SHOPIFY_GID_PRODUCT_ID = `${SHOPIFY_GID}Product/`;
+const SHOPIFY_GID_PRODUCT_VARIANT_ID = `${SHOPIFY_GID}ProductVariant/`;
 const sanitizeDataId = (id) => {
   if (!id)
     return "";
@@ -27,6 +35,7 @@ const sanitizeDataId = (id) => {
     return getId;
   }
 };
+const isFunction = (data) => typeof data === "function";
 const SearchIconWidget$1 = "";
 const root = "";
 const Loading = "";
@@ -606,7 +615,7 @@ const ButtonDetail = "";
 const Trigger$1 = "";
 const Trigger = (props) => {
   var _a, _b, _c;
-  const { data, forceActive, hidden, onAfterAddWishlist, onAfterRemoveWishlist } = props;
+  const { data, forceActive = false, hidden = false, onAfterAddWishlist, onAfterRemoveWishlist } = props;
   const { productId, productVariantId } = data || {};
   const { isRenderApp, triggerRenderMultipleComponent, sledgeAnonymId } = React__default.useContext(SledgeContext);
   const defaultColorIcon = "#767676";
@@ -629,7 +638,7 @@ const Trigger = (props) => {
   const handleCheckWishlist = async () => {
     let response;
     response = await checkWishlist(productId, productVariantId);
-    setIsWishlist(response);
+    setIsWishlist(forceActive ? forceActive : response);
   };
   const handleClick = async (e) => {
     var _a2, _b2, _c2, _d, _e, _f;
@@ -1624,16 +1633,19 @@ const addToCartTrigger = async (data) => {
     return;
   });
 };
-const ProductCardComponent = ({
+const ProductGrid = ({
+  type,
+  className = "",
   data,
   setting,
   showOptionOutOfStock = false,
   triggerPropAdditional,
   sourceApp = null,
+  cards,
   onAfterAddToCart,
   onAfterAddWishlist,
   onAfterRemoveWishlist,
-  children
+  onAfterRenderProduct
 }) => {
   const {
     show_vendor = true,
@@ -1694,15 +1706,37 @@ const ProductCardComponent = ({
       }, 1e3);
     }
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: data == null ? void 0 : data.map((item, index) => {
-    var _a;
+  React__default.useEffect(() => {
+    onAfterRenderProduct && onAfterRenderProduct("success");
+  }, []);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge__product-grid ${className}`, "data-grid-type": type, children: data == null ? void 0 : data.map((item, index) => {
     const { product, variants } = item || {};
     const { id, title, image, url, vendor = "", currency } = product || {};
     const { id: variant_id = "", title: variant_title = "", price = "", sku = "" } = (variants == null ? void 0 : variants.length) ? variants[0] : {};
-    let totalStock = ((_a = variants == null ? void 0 : variants.map(({ inventory_quantity }) => inventory_quantity)) == null ? void 0 : _a.reduce((a, b) => a + b, 0)) || 0;
     let isLoadingAddToCart = clickedAddToCartId == variant_id;
-    let isOutOfStock = !totalStock && showOptionOutOfStock;
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card", children: [
+    let isOutOfStock = (variants == null ? void 0 : variants.length) && Object.hasOwn(variants[0], "inventory_quantity") ? !variants[0].inventory_quantity && showOptionOutOfStock : false;
+    return cards ? /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.Fragment, { children: cards({
+      product: {
+        ...{
+          ...product,
+          ...{
+            id: `${SHOPIFY_GID_PRODUCT_ID}${id}`
+          }
+        },
+        ...{
+          variants: variants.map((variant, index2) => {
+            const { id: variant_id2, inventory_quantity, ...otherObject } = variant || {};
+            return {
+              ...otherObject,
+              ...{
+                id: `${SHOPIFY_GID_PRODUCT_VARIANT_ID}${variant_id2}`
+              },
+              is_out_of_stock: Object.hasOwn(variants[index2], "inventory_quantity") ? !inventory_quantity : false
+            };
+          })
+        }
+      }
+    }) }, index) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-content", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card-image", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -1759,10 +1793,15 @@ const ProductCardComponent = ({
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card-text", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: variant_title }),
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-              "Vendor: ",
-              vendor,
-              " | SKU: ",
-              sku
+              /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: show_vendor ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                "Vendor: ",
+                vendor
+              ] }) : null }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: " | " }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: show_sku ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                "SKU: ",
+                sku
+              ] }) : null })
             ] })
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-rating", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -1806,30 +1845,13 @@ const ProductCardComponent = ({
                 fill: "#393D4E"
               }
             ) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Add To Cart" })
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: language_button_add_to_cart ? language_button_add_to_cart : "Add To Cart" })
           ] })
         }
       ) }) : null
     ] }, index);
   }) });
 };
-const ProductCards = ({ component, ...otherProps }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: component && React__default.isValidElement(component) ? React__default.cloneElement(component, { ...otherProps }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ProductCardComponent, { ...otherProps }) });
-};
-const ProductGrid = ({ type, className = "", cards, onAfterRenderProduct, ...otherProps }) => {
-  React__default.useEffect(() => {
-    onAfterRenderProduct && onAfterRenderProduct("success");
-  }, []);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge__product-grid ${className}`, "data-grid-type": type, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-    ProductCards,
-    {
-      ...cards ? {
-        component: cards
-      } : {},
-      ...otherProps
-    }
-  ) });
-};
 const TextAreaField = "";
 const InputField = "";
 const CollectionGrid$1 = "";
@@ -2172,7 +2194,14 @@ const SkeletonLoading = {
   BlogGrid: SkeletonBlogGrid
 };
 const SearchIconWidget = (props) => {
-  const { size = "sm", onAfterAddToCart, onAfterAddWishlist, onAfterRemoveWishlist, onAfterRenderProduct } = props || {};
+  const { size = "sm", children, onAfterAddToCart, onAfterAddWishlist, onAfterRemoveWishlist, onAfterRenderProduct } = props || {};
+  let productCardsComponent = null;
+  React__default.Children.map(children, (child) => {
+    if (React__default.isValidElement(child) && isFunction(child.type) && child.type.name === SEPARATE_COMPONENT_DISPLAY_NAME.PRODUCT.CARDS) {
+      const { component } = (child == null ? void 0 : child.props) || {};
+      productCardsComponent = component;
+    }
+  });
   const { isRenderApp } = React__default.useContext(SledgeContext);
   const [sizing, setSizing] = React__default.useState({
     width: 0,
@@ -2200,7 +2229,7 @@ const SearchIconWidget = (props) => {
   }, [isRenderApp]);
   const handleShowWidget = () => {
     if (typeof window !== "undefined" && window.sledgeInstantSearchIconWidgetPopup)
-      window.sledgeInstantSearchIconWidgetPopup(onAfterAddToCart, onAfterAddWishlist, onAfterRemoveWishlist, onAfterRenderProduct);
+      window.sledgeInstantSearchIconWidgetPopup(onAfterAddToCart, onAfterAddWishlist, onAfterRemoveWishlist, onAfterRenderProduct, productCardsComponent);
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-instant-search__icon-widget", onClick: handleShowWidget, children: /* @__PURE__ */ jsxRuntimeExports.jsx(SearchIcon, { ...sizing, color: "currentColor" }) });
 };
@@ -2226,7 +2255,8 @@ const SearchIconWidgetPopup = () => {
     onAfterRemoveWishlist: (state) => {
     },
     onAfterRenderProduct: (state) => {
-    }
+    },
+    productCardsComponent: null
   });
   const searchFieldRef = React__default.useRef(null);
   const previousState = usePrevious({ keyword });
@@ -2315,13 +2345,15 @@ const SearchIconWidgetPopup = () => {
       }, onAfterAddWishlist = () => {
       }, onAfterRemoveWishlist = () => {
       }, onAfterRenderProduct = () => {
+      }, productCardsComponent = () => {
       }) => {
         setShowInfo(true);
         setHandleFunctions({
           onAfterAddToCart,
           onAfterAddWishlist,
           onAfterRemoveWishlist,
-          onAfterRenderProduct
+          onAfterRenderProduct,
+          productCardsComponent
         });
         setTimeout(() => {
           if (searchFieldRef == null ? void 0 : searchFieldRef.current) {
@@ -2463,6 +2495,7 @@ const SearchIconWidgetPopup = () => {
                 show_price: (_i = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _i.show_price
               },
               showOptionOutOfStock: true,
+              cards: handleFunctions.productCardsComponent,
               onAfterAddToCart: handleFunctions.onAfterAddToCart,
               onAfterAddWishlist: handleFunctions.onAfterAddWishlist,
               onAfterRemoveWishlist: handleFunctions.onAfterRemoveWishlist,
@@ -2503,6 +2536,7 @@ const SearchIconWidgetPopup = () => {
                   show_price: (_q = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _q.show_price
                 },
                 showOptionOutOfStock: true,
+                cards: handleFunctions.productCardsComponent,
                 onAfterAddToCart: handleFunctions.onAfterAddToCart,
                 onAfterAddWishlist: handleFunctions.onAfterAddWishlist,
                 onAfterRemoveWishlist: handleFunctions.onAfterRemoveWishlist,
@@ -2522,9 +2556,16 @@ const SearchIconWidgetPopup = () => {
 const SearchResultWidget$1 = "";
 const SearchResultWidget = (props) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
-  const { layoutType = "default", query, data, onAfterAddToCart, onAfterAddWishlist, onAfterRemoveWishlist, onAfterRenderProduct } = props;
+  const { layoutType = "default", query, data, children, onAfterAddToCart, onAfterAddWishlist, onAfterRemoveWishlist, onAfterRenderProduct } = props;
   const { keyword: queryKeyword = "" } = query || {};
   const { collectionId } = data || {};
+  let productCardsComponent = null;
+  React__default.Children.map(children, (child) => {
+    if (React__default.isValidElement(child) && isFunction(child.type) && child.type.name === SEPARATE_COMPONENT_DISPLAY_NAME.PRODUCT.CARDS) {
+      const { component } = (child == null ? void 0 : child.props) || {};
+      productCardsComponent = component;
+    }
+  });
   const { isRenderApp } = React__default.useContext(SledgeContext);
   const [isFirstLoading, setIsFirstLoading] = React__default.useState(true);
   const [isLoading, setIsLoading] = React__default.useState(true);
@@ -2990,6 +3031,7 @@ const SearchResultWidget = (props) => {
       defaultSort,
       showOutOfStock,
       data,
+      productCardsComponent,
       onAfterAddToCart,
       onAfterAddWishlist,
       onAfterRemoveWishlist,
@@ -3019,6 +3061,7 @@ const ResultProduct = (props) => {
     defaultSort,
     showOutOfStock,
     data,
+    productCardsComponent,
     setKeyword,
     filterHorizontalSkeleton,
     filterVerticalSkeleton,
@@ -3591,6 +3634,7 @@ const ResultProduct = (props) => {
                   show_sku: (_s = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _s.show_sku,
                   show_price: (_t = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _t.show_price
                 },
+                cards: productCardsComponent,
                 showOptionOutOfStock: true,
                 onAfterAddToCart,
                 onAfterAddWishlist,
@@ -3738,7 +3782,14 @@ const ResultEmpty = (props) => {
 const SearchWidget$1 = "";
 const SearchWidget = (props) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u;
-  const { width = "400px", onAfterAddToCart, onAfterAddWishlist, onAfterRemoveWishlist, onAfterRenderProduct } = props;
+  const { width = "400px", children, onAfterAddToCart, onAfterAddWishlist, onAfterRemoveWishlist, onAfterRenderProduct } = props;
+  let productCardsComponent = null;
+  React__default.Children.map(children, (child) => {
+    if (React__default.isValidElement(child) && isFunction(child.type) && child.type.name === SEPARATE_COMPONENT_DISPLAY_NAME.PRODUCT.CARDS) {
+      const { component } = (child == null ? void 0 : child.props) || {};
+      productCardsComponent = component;
+    }
+  });
   const { isRenderApp } = React__default.useContext(SledgeContext);
   const [isLoading, setIsLoading] = React__default.useState(true);
   const [keyword, setKeyword] = React__default.useState("");
@@ -3966,6 +4017,7 @@ const SearchWidget = (props) => {
                 show_price: (_h = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _h.show_price
               },
               showOptionOutOfStock: true,
+              cards: productCardsComponent,
               onAfterAddToCart,
               onAfterAddWishlist,
               onAfterRemoveWishlist,
@@ -4007,6 +4059,7 @@ const SearchWidget = (props) => {
                   show_price: (_p = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _p.show_price
                 },
                 showOptionOutOfStock: true,
+                cards: productCardsComponent,
                 onAfterAddToCart,
                 onAfterAddWishlist,
                 onAfterRemoveWishlist,