@rebuy/rebuy-hydrogen 3.0.0-beta.17 → 3.0.0-beta.18

package/dist/index.js

@@ -7036,7 +7036,6 @@ var RebuyWidget = (props) => {
     customTitleLevel = "h2",
     customTitleStyle,
     isCrossSell,
-    isHydrogenReact,
     popupTriggerId,
     product,
     productId,
@@ -7280,7 +7279,7 @@ var RebuyWidget = (props) => {
         customTitle,
         customTitleLevel,
         customTitleStyle,
-        isHydrogenReact,
+        isHydrogenReact: rebuyGeneralContext?.contextParameters?.isHydrogenReact,
         isInPopup: true,
         onDismiss: closePopup,
         products,
@@ -7295,7 +7294,7 @@ var RebuyWidget = (props) => {
       customTitleLevel,
       customTitleStyle,
       isCrossSell,
-      isHydrogenReact,
+      isHydrogenReact: rebuyGeneralContext?.contextParameters?.isHydrogenReact,
       isInPopup: settings?.display_type === "popup",
       products,
       settings
@@ -8910,19 +8909,41 @@ var RebuySmartCart = () => {
 var import_rebuy3 = require("@rebuy/rebuy");
 var Utilities5 = __toESM(require("@rebuy/rebuy/utilities"), 1);
 var import_hydrogen7 = require("@shopify/hydrogen");
-var import_react33 = __toESM(require("react"), 1);
+var import_react34 = require("react");
+
+// src/context/RebuyWidgetContext.tsx
+var import_react33 = require("react");
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var RebuyWidgetContext = (0, import_react33.createContext)({
+  dataSource: "",
+  isHydrogenReact: false,
+  key: "",
+  limit: 0,
+  metadata: {},
+  options: {},
+  products: [],
+  variant: void 0,
+  variantId: void 0
+});
+var useRebuyWidget = () => (0, import_react33.useContext)(RebuyWidgetContext);
+var RebuyWidgetProvider = ({ children, value }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(RebuyWidgetContext.Provider, { value, children });
+};
+
+// src/widgetContainer/RebuyWidgetContainer.tsx
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var RebuyWidgetContainerBase = ({ children, ...props }) => {
   const { collection, collectionId, dataSource, limit, options, product, productId, variant, variantId } = props;
   const { apiKey, loadingStatus: configLoadingStatus, rebuyConfig } = useRebuyConfig();
-  const rebuyContext = (0, import_react33.useContext)(RebuyContext);
-  const [rebuyApiClient, setRebuyApiClient] = (0, import_react33.useState)(null);
-  const [initialized, setInitialized] = (0, import_react33.useState)(false);
+  const rebuyContext = (0, import_react34.useContext)(RebuyContext);
+  const [rebuyApiClient, setRebuyApiClient] = (0, import_react34.useState)(null);
+  const [initialized, setInitialized] = (0, import_react34.useState)(false);
   const shopifyProductId = product?.id ?? productId ?? null;
   const shopifyVariantId = variant?.id ?? variantId ?? null;
   const shopifyCollectionId = collection?.id ?? collectionId ?? null;
-  const [products, setProducts] = (0, import_react33.useState)([]);
-  const [metadata, setMetadata] = (0, import_react33.useState)();
-  (0, import_react33.useEffect)(() => {
+  const [products, setProducts] = (0, import_react34.useState)([]);
+  const [metadata, setMetadata] = (0, import_react34.useState)();
+  (0, import_react34.useEffect)(() => {
     if (!rebuyApiClient && apiKey && configLoadingStatus === "success") {
       const client = new import_rebuy3.RebuyClient(apiKey);
       const currentEndpoint = dataSource || "/api/v1/products/recommended";
@@ -8937,14 +8958,14 @@ var RebuyWidgetContainerBase = ({ children, ...props }) => {
       setInitialized(true);
     }
   }, [apiKey, rebuyApiClient, configLoadingStatus, options, rebuyContext, dataSource]);
-  (0, import_react33.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     if (rebuyApiClient && rebuyContext?.contextParameters) {
       const currentEndpoint = dataSource || "/api/v1/products/recommended";
       const filteredParams = filterContextForWidgetEndpoints(rebuyContext.contextParameters, currentEndpoint);
       rebuyApiClient.setContextParameters(filteredParams);
     }
   }, [rebuyApiClient, rebuyContext, dataSource]);
-  const request = (0, import_react33.useMemo)(() => {
+  const request = (0, import_react34.useMemo)(() => {
     const req = {
       endpoint: dataSource || "/api/v1/products/recommended",
       params: {}
@@ -8964,7 +8985,7 @@ var RebuyWidgetContainerBase = ({ children, ...props }) => {
     }
     return req;
   }, [dataSource, shopifyProductId, shopifyVariantId, shopifyCollectionId, limit]);
-  (0, import_react33.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     let isMounted = true;
     if (!rebuyApiClient || !initialized || configLoadingStatus !== "success") return;
     const fetchData = async () => {
@@ -8997,23 +9018,30 @@ var RebuyWidgetContainerBase = ({ children, ...props }) => {
       isMounted = false;
     };
   }, [rebuyApiClient, initialized, request, configLoadingStatus]);
-  const childrenWithProps = (currentProps) => import_react33.default.Children.map(
-    children,
-    (child) => import_react33.default.isValidElement(child) ? import_react33.default.cloneElement(child, currentProps) : child
-  );
-  const childProps = {
-    ...props,
-    apiKey,
-    cacheKey: rebuyConfig?.shop?.cache_key,
-    isHydrogenReact: rebuyContext?.contextParameters?.isHydrogenReact,
-    key: product?.id,
-    metadata,
-    products
-  };
   if (configLoadingStatus !== "success" || !rebuyApiClient) {
     return null;
   }
-  return childrenWithProps(childProps);
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    RebuyWidgetProvider,
+    {
+      value: {
+        apiKey: apiKey ?? void 0,
+        cacheKey: rebuyConfig?.shop?.cache_key,
+        dataSource: dataSource || "/api/v1/products/recommended",
+        isHydrogenReact: rebuyContext?.contextParameters?.isHydrogenReact || false,
+        key: product?.id || "",
+        limit: limit || 0,
+        metadata: metadata || {},
+        options: options || {},
+        product,
+        productId,
+        products,
+        variant,
+        variantId
+      },
+      children
+    }
+  );
 };
 var RebuyWidgetContainer = RebuyWidgetContainerBase;
 
@@ -9022,37 +9050,38 @@ var result23 = { "container": "RebuyCompleteTheLook_container", "productGrid": "
 var RebuyCompleteTheLook_default = result23;
 
 // src/widgets/RebuyCompleteTheLook/RebuyCompleteTheLook.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var RebuyCompleteTheLook = (props) => {
   const {
     addToCartBtnText = "Add to cart",
     addToCartCallback,
-    customTitle = `These pair with ${props.product?.title}`,
+    customTitle = `These pair with {product_title}`,
     customTitleLevel = "h2",
-    customTitleStyle,
-    products = []
+    customTitleStyle
   } = props;
+  const { isHydrogenReact, product, products } = useRebuyWidget();
+  const productTitle = customTitle.replace("{product_title}", product?.title ?? "");
   if (products.length === 0) {
     rebuyDebugLog.log("widget-complete-the-look" /* WIDGET_COMPLETE_THE_LOOK */, "RebuyCompleteTheLook: No products found");
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("section", { className: RebuyCompleteTheLook_default.container, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Title, { level: getTitleLevel(customTitleLevel), style: customTitleStyle, text: customTitle }),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("ul", { className: RebuyCompleteTheLook_default.productGrid, children: products.map((product) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("li", { className: RebuyCompleteTheLook_default.productItem, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("section", { className: RebuyCompleteTheLook_default.container, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Title, { level: getTitleLevel(customTitleLevel), style: customTitleStyle, text: productTitle }),
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("ul", { className: RebuyCompleteTheLook_default.productGrid, children: products.map((product2) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("li", { className: RebuyCompleteTheLook_default.productItem, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
       ProductCard,
       {
         addToCartBtnText,
         addToCartCallback,
-        isHydrogenReact: props.isHydrogenReact,
-        product,
+        isHydrogenReact,
+        product: product2,
         productCardTitleLevel: getTitleLevel(customTitleLevel, true)
       }
-    ) }, product.id)) })
+    ) }, product2.id)) })
   ] });
 };
 
 // src/widgets/RebuyDynamicBundleProducts/RebuyDynamicBundleProducts.tsx
-var import_react35 = require("react");
+var import_react36 = require("react");
 
 // src/utils/convertToRebuyProduct.tsx
 var convertToRebuyProduct = (isHydrogenReact, product) => {
@@ -9304,19 +9333,19 @@ var convertToRebuyProduct = (isHydrogenReact, product) => {
 
 // src/widgets/RebuyDynamicBundleProducts/BundleImages.tsx
 var import_hydrogen8 = require("@shopify/hydrogen");
-var import_react34 = require("react");
+var import_react35 = require("react");
 
 // src/widgets/RebuyDynamicBundleProducts/RebuyDynamicBundleProducts.module.css
 var result24 = { "container": "RebuyDynamicBundleProducts_container", "addCartBtnContainer": "RebuyDynamicBundleProducts_addCartBtnContainer", "bundleContainer": "RebuyDynamicBundleProducts_bundleContainer", "select": "RebuyDynamicBundleProducts_select", "bundleItemRowContainer": "RebuyDynamicBundleProducts_bundleItemRowContainer", "unselected": "RebuyDynamicBundleProducts_unselected", "bundleItemRow": "RebuyDynamicBundleProducts_bundleItemRow", "bundleItemInput": "RebuyDynamicBundleProducts_bundleItemInput", "bundleItemLabel": "RebuyDynamicBundleProducts_bundleItemLabel", "bundleImages": "RebuyDynamicBundleProducts_bundleImages", "bundleImage": "RebuyDynamicBundleProducts_bundleImage", "bundleImageDelimiter": "RebuyDynamicBundleProducts_bundleImageDelimiter", "compareAtPrice": "RebuyDynamicBundleProducts_compareAtPrice" };
 var RebuyDynamicBundleProducts_default = result24;
 
 // src/widgets/RebuyDynamicBundleProducts/BundleImages.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 var BundleImages = ({ products }) => {
   const selected = products.filter((product) => product.selected);
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("ul", { className: RebuyDynamicBundleProducts_default.bundleImages, children: products.map((product, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("ul", { className: RebuyDynamicBundleProducts_default.bundleImages, children: products.map((product, index) => {
     const image = product.selectedVariant?.image;
-    const productImage = image ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    const productImage = image ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
       import_hydrogen8.Image,
       {
         alt: image.altText || `Picture of ${product.title}`,
@@ -9331,14 +9360,14 @@ var BundleImages = ({ products }) => {
       product.title
     );
     const showDelimiter = selected[0]?.id !== product.id;
-    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react34.Fragment, { children: product.selected && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
-      showDelimiter && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("li", { className: RebuyDynamicBundleProducts_default.bundleImageDelimiter, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { children: "+" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("li", { className: "flex items-center", children: product.default ? (
+    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react35.Fragment, { children: product.selected && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
+      showDelimiter && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("li", { className: RebuyDynamicBundleProducts_default.bundleImageDelimiter, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { children: "+" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("li", { className: "flex items-center", children: product.default ? (
         // Already on product page
         productImage
       ) : (
         // Link to product
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
           RebuyLink,
           {
             ariaLabel: `View ${product.title}`,
@@ -9353,7 +9382,7 @@ var BundleImages = ({ products }) => {
 
 // src/widgets/RebuyDynamicBundleProducts/BundlePrice.tsx
 var import_hydrogen9 = require("@shopify/hydrogen");
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var BundlePrice = ({ products }) => {
   const isDisabled = products.filter((product) => product.selected).length < 1;
   const totalBundlePrice = () => {
@@ -9390,12 +9419,12 @@ var BundlePrice = ({ products }) => {
   const price = totalBundlePrice();
   const compareAtPrice = totalBundleCompareAtPrice();
   const CompareAtPrice = ({ data: compareAtPrice2 }) => {
-    return compareAtPrice2 && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_hydrogen9.Money, { as: "span", className: RebuyDynamicBundleProducts_default.compareAtPrice, data: compareAtPrice2, withoutTrailingZeros: true });
+    return compareAtPrice2 && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_hydrogen9.Money, { as: "span", className: RebuyDynamicBundleProducts_default.compareAtPrice, data: compareAtPrice2, withoutTrailingZeros: true });
   };
-  return products.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "flex items-center flex-col", children: !isDisabled && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("p", { className: "flex items-center gap-2 mb-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { children: "Total Price:" }),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_hydrogen9.Money, { as: "span", data: price, withoutTrailingZeros: true }),
-    isDiscounted(price, compareAtPrice) && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(CompareAtPrice, { data: compareAtPrice })
+  return products.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "flex items-center flex-col", children: !isDisabled && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("p", { className: "flex items-center gap-2 mb-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { children: "Total Price:" }),
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_hydrogen9.Money, { as: "span", data: price, withoutTrailingZeros: true }),
+    isDiscounted(price, compareAtPrice) && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(CompareAtPrice, { data: compareAtPrice })
   ] }) });
 };
 
@@ -9403,7 +9432,7 @@ var BundlePrice = ({ products }) => {
 var import_clsx14 = __toESM(require("clsx"), 1);
 
 // src/widgets/RebuyDynamicBundleProducts/Select.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var Select = ({ onSelectVariant, product }) => {
   const getOptionsLabel = (product2) => {
     const options = product2.variants.nodes[0].selectedOptions;
@@ -9412,30 +9441,30 @@ var Select = ({ onSelectVariant, product }) => {
     const useValues = optionsFromKeys.every((key) => ["name", "value"].includes(key));
     return (useValues ? optionsFromValues : optionsFromKeys).join(" / ");
   };
-  return product && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return product && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     "select",
     {
       "aria-label": "select variant",
       className: RebuyDynamicBundleProducts_default.select,
       onChange: (e) => onSelectVariant(product, e.target.value),
       value: product.selectedVariant.id,
-      children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("optgroup", { label: getOptionsLabel(product), children: product.variants.nodes.map(({ id, title }) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("option", { value: id, children: title }, id + "-BundleVariant")) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("optgroup", { label: getOptionsLabel(product), children: product.variants.nodes.map(({ id, title }) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("option", { value: id, children: title }, id + "-BundleVariant")) })
     }
   );
 };
 
 // src/widgets/RebuyDynamicBundleProducts/BundleSelection.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var BundleSelection = ({ onSelectVariant, onToggleBundleItem, products }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("ul", { children: products.map((product, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("ul", { children: products.map((product, index) => {
     const { availableForSale } = product.selectedVariant;
     const isOutOfStock = !availableForSale;
-    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       "li",
       {
         className: (0, import_clsx14.default)(RebuyDynamicBundleProducts_default.bundleItemRowContainer, !product.selected && RebuyDynamicBundleProducts_default.unselected),
-        children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: RebuyDynamicBundleProducts_default.bundleItemRow, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: RebuyDynamicBundleProducts_default.bundleItemRow, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             "input",
             {
               checked: product.selected && availableForSale,
@@ -9447,14 +9476,14 @@ var BundleSelection = ({ onSelectVariant, onToggleBundleItem, products }) => {
               value: product.id
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: RebuyDynamicBundleProducts_default.bundleItemInput, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("label", { className: RebuyDynamicBundleProducts_default.bundleItemLabel, htmlFor: `${product.id}-toggle`, children: [
-              isOutOfStock && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("b", { children: "SOLD OUT" }),
-              product.default && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("b", { children: "This item:" }),
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: RebuyDynamicBundleProducts_default.bundleItemInput, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("label", { className: RebuyDynamicBundleProducts_default.bundleItemLabel, htmlFor: `${product.id}-toggle`, children: [
+              isOutOfStock && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("b", { children: "SOLD OUT" }),
+              product.default && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("b", { children: "This item:" }),
               product.title,
-              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(RebuyProductPrice, { selectedVariant: product.selectedVariant })
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(RebuyProductPrice, { selectedVariant: product.selectedVariant })
             ] }),
-            product.variants.nodes.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Select, { onSelectVariant, product })
+            product.variants.nodes.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Select, { onSelectVariant, product })
           ] })
         ] })
       },
@@ -9464,20 +9493,19 @@ var BundleSelection = ({ onSelectVariant, onToggleBundleItem, products }) => {
 };
 
 // src/widgets/RebuyDynamicBundleProducts/RebuyDynamicBundleProducts.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var RebuyDynamicBundleProducts = (props) => {
   const {
     addToCartBtnText = "Add to cart",
     addToCartCallback,
-    customTitle = `These pair with ${props.product?.title}`,
+    customTitle = `These pair with {product_title}`,
     customTitleLevel = "h2",
-    customTitleStyle,
-    isHydrogenReact,
-    product,
-    products = []
+    customTitleStyle
   } = props;
-  const [bundleProducts, setBundleProducts] = (0, import_react35.useState)([]);
-  (0, import_react35.useEffect)(() => {
+  const { isHydrogenReact, product, products } = useRebuyWidget();
+  const productTitle = customTitle.replace("{product_title}", product?.title ?? "");
+  const [bundleProducts, setBundleProducts] = (0, import_react36.useState)([]);
+  (0, import_react36.useEffect)(() => {
     const mainProduct = convertToRebuyProduct(isHydrogenReact || false, product);
     const formattedProducts = products.map((product2) => {
       return {
@@ -9488,14 +9516,14 @@ var RebuyDynamicBundleProducts = (props) => {
     });
     setBundleProducts([mainProduct, ...formattedProducts]);
   }, [product, products, isHydrogenReact]);
-  const onToggleBundleItem = (0, import_react35.useCallback)(
+  const onToggleBundleItem = (0, import_react36.useCallback)(
     (product2) => {
       product2.selected = !product2.selected;
       setBundleProducts([...bundleProducts]);
     },
     [bundleProducts]
   );
-  const onSelectVariant = (0, import_react35.useCallback)(
+  const onSelectVariant = (0, import_react36.useCallback)(
     (product2, variant_id) => {
       const variant = product2.variants.nodes.find(({ id }) => id === variant_id);
       if (variant) {
@@ -9510,12 +9538,12 @@ var RebuyDynamicBundleProducts = (props) => {
     rebuyDebugLog.log("widget-dynamic-bundle-products" /* WIDGET_DYNAMIC_BUNDLE_PRODUCTS */, "RebuyDynamicBundleProducts: No products found");
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("section", { className: RebuyDynamicBundleProducts_default.container, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Title, { level: getTitleLevel(customTitleLevel), style: customTitleStyle, text: customTitle }),
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: RebuyDynamicBundleProducts_default.bundleContainer, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(BundleImages, { products: bundleProducts }),
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(BundlePrice, { products: bundleProducts }),
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: RebuyDynamicBundleProducts_default.addCartBtnContainer, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("section", { className: RebuyDynamicBundleProducts_default.container, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Title, { level: getTitleLevel(customTitleLevel), style: customTitleStyle, text: productTitle }),
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: RebuyDynamicBundleProducts_default.bundleContainer, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(BundleImages, { products: bundleProducts }),
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(BundlePrice, { products: bundleProducts }),
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: RebuyDynamicBundleProducts_default.addCartBtnContainer, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
         AddToCartBtn,
         {
           addToCartBtnText,
@@ -9527,7 +9555,7 @@ var RebuyDynamicBundleProducts = (props) => {
           })
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
         BundleSelection,
         {
           onSelectVariant,
@@ -9541,7 +9569,7 @@ var RebuyDynamicBundleProducts = (props) => {
 
 // src/widgets/RebuyProductAddOns/RebuyProductAddOns.tsx
 var import_hydrogen_react3 = require("@shopify/hydrogen-react");
-var import_react36 = require("react");
+var import_react37 = require("react");
 
 // src/widgets/RebuyProductAddOns/RebuyProductAddOnCard.tsx
 var import_hydrogen10 = require("@shopify/hydrogen");
@@ -9551,7 +9579,7 @@ var result25 = { "container": "RebuyProductAddOns_container", "productAddOnsList
 var RebuyProductAddOns_default = result25;
 
 // src/widgets/RebuyProductAddOns/RebuyProductAddOnCard.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var RebuyProductAddOnCard = ({
   handleChange,
   learnMoreText,
@@ -9560,8 +9588,8 @@ var RebuyProductAddOnCard = ({
   titleLevel
 }) => {
   const { availableForSale, image } = product.selectedVariant || {};
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("label", { className: RebuyProductAddOns_default.addOnCard, htmlFor: product.id, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: RebuyProductAddOns_default.addOnCardContent, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("label", { className: RebuyProductAddOns_default.addOnCard, htmlFor: product.id, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: RebuyProductAddOns_default.addOnCardContent, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
       "input",
       {
         checked: Boolean(product.selected),
@@ -9574,7 +9602,7 @@ var RebuyProductAddOnCard = ({
         value: ""
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: RebuyProductAddOns_default.addOnCardContentImage, children: image && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: RebuyProductAddOns_default.addOnCardContentImage, children: image && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
       import_hydrogen10.Image,
       {
         alt: image.altText || `Picture of ${product.title}`,
@@ -9583,11 +9611,11 @@ var RebuyProductAddOnCard = ({
         width: 300
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: RebuyProductAddOns_default.addOnCardTextContent, children: [
-      !availableForSale && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: RebuyProductAddOns_default.addOnCardOutOfStock, children: outOfStockText }),
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Title, { level: titleLevel, text: product.title }),
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(RebuyProductPrice, { selectedVariant: product.selectedVariant }),
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: RebuyProductAddOns_default.addOnCardTextContent, children: [
+      !availableForSale && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("p", { className: RebuyProductAddOns_default.addOnCardOutOfStock, children: outOfStockText }),
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Title, { level: titleLevel, text: product.title }),
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(RebuyProductPrice, { selectedVariant: product.selectedVariant }),
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
         RebuyLink,
         {
           ariaLabel: `View ${product.title}`,
@@ -9601,28 +9629,28 @@ var RebuyProductAddOnCard = ({
 };
 
 // src/widgets/RebuyProductAddOns/RebuyProductAddOns.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var RebuyProductAddOns = (props) => {
   const {
+    addToCartBtnText = "Add to cart",
     addToCartCallback,
-    customTitle = `These pair with ${props.product?.title}`,
+    customTitle = `These pair with {product_title}`,
     customTitleLevel = "h2",
     customTitleStyle,
     includeMainProduct = false,
-    isHydrogenReact,
     learnMoreText = "Learn more",
     outOfStockText = "Out of stock",
-    product,
-    products = [],
-    addToCartBtnText = "Add to cart",
     subtotalText = "Add-ons Subtotal: ",
-    withProductText = `With ${product?.title}: `
+    withProductText = `With {product_title}: `
   } = props;
-  const [addedItems, setAddedItems] = (0, import_react36.useState)(products);
-  const [subtotalWithProduct, setSubtotalWithProduct] = (0, import_react36.useState)();
-  const [subtotalWithOutProduct, setSubtotalWithOutProduct] = (0, import_react36.useState)();
+  const { isHydrogenReact, product, products } = useRebuyWidget();
+  const productTitleClean = customTitle.replace("{product_title}", product?.title ?? "");
+  const withProductTextClean = withProductText.replace("{product_title}", product?.title ?? "");
+  const [addedItems, setAddedItems] = (0, import_react37.useState)(products);
+  const [subtotalWithProduct, setSubtotalWithProduct] = (0, import_react37.useState)();
+  const [subtotalWithOutProduct, setSubtotalWithOutProduct] = (0, import_react37.useState)();
   const convertedProduct = convertToRebuyProduct(isHydrogenReact || false, product);
-  (0, import_react36.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     let initialTotal = 0;
     let currencyCode = "USD";
     products.map((product2) => {
@@ -9652,7 +9680,7 @@ var RebuyProductAddOns = (props) => {
       setAddedItems(products);
     }
   }, [products, product, isHydrogenReact, includeMainProduct]);
-  const handleChange = (0, import_react36.useCallback)(
+  const handleChange = (0, import_react37.useCallback)(
     (event, product2) => {
       const newProducts = [...products];
       const productIndex = newProducts.findIndex((p) => p.id === product2.id);
@@ -9671,7 +9699,7 @@ var RebuyProductAddOns = (props) => {
     },
     [products]
   );
-  (0, import_react36.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     let total = 0;
     let currencyCode = "USD";
     addedItems.forEach((item) => {
@@ -9697,9 +9725,9 @@ var RebuyProductAddOns = (props) => {
     rebuyDebugLog.log("widget-product-add-ons" /* WIDGET_PRODUCT_ADD_ONS */, "RebuyProductAddOns: No products found");
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: RebuyProductAddOns_default.container, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Title, { level: getTitleLevel(customTitleLevel), style: customTitleStyle, text: customTitle }),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("ul", { className: RebuyProductAddOns_default.productAddOnsList, children: products.map((product2) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: RebuyProductAddOns_default.container, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Title, { level: getTitleLevel(customTitleLevel), style: customTitleStyle, text: productTitleClean }),
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("ul", { className: RebuyProductAddOns_default.productAddOnsList, children: products.map((product2) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
       RebuyProductAddOnCard,
       {
         handleChange,
@@ -9709,16 +9737,16 @@ var RebuyProductAddOns = (props) => {
         titleLevel: getTitleLevel(customTitleLevel, true)
       }
     ) }, product2.id)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: RebuyProductAddOns_default.productAddOnsFooter, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: RebuyProductAddOns_default.moneyContainer, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: RebuyProductAddOns_default.productAddOnsFooter, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: RebuyProductAddOns_default.moneyContainer, children: [
         subtotalText,
-        subtotalWithOutProduct && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_hydrogen_react3.Money, { data: subtotalWithOutProduct, withoutTrailingZeros: true })
+        subtotalWithOutProduct && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_hydrogen_react3.Money, { data: subtotalWithOutProduct, withoutTrailingZeros: true })
       ] }),
-      includeMainProduct && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: RebuyProductAddOns_default.moneyContainer, children: [
-        withProductText,
-        subtotalWithProduct && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_hydrogen_react3.Money, { data: subtotalWithProduct, withoutTrailingZeros: true })
+      includeMainProduct && /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: RebuyProductAddOns_default.moneyContainer, children: [
+        withProductTextClean,
+        subtotalWithProduct && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_hydrogen_react3.Money, { data: subtotalWithProduct, withoutTrailingZeros: true })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: RebuyProductAddOns_default.addCartBtnContainer, children: includeMainProduct ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: RebuyProductAddOns_default.addCartBtnContainer, children: includeMainProduct ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
         AddToCartBtn,
         {
           addToCartBtnText,
@@ -9728,7 +9756,7 @@ var RebuyProductAddOns = (props) => {
           moneyData: subtotalWithProduct,
           selectedVariants: addedItems.map((item) => item.selectedVariant)
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
         AddToCartBtn,
         {
           addToCartBtnText,
@@ -9748,39 +9776,40 @@ var result26 = { "container": "RebuyProductRecommendations_container", "productG
 var RebuyProductRecommendations_default = result26;
 
 // src/widgets/RebuyProductRecommendations/RebuyProductRecommendations.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var RebuyProductRecommendations = (props) => {
   const {
     addToCartBtnText = "Add to cart",
     addToCartCallback,
-    customTitle = `These pair with ${props.product?.title}`,
+    customTitle = `These pair with {product_title}`,
     customTitleLevel = "h2",
-    customTitleStyle,
-    products = []
+    customTitleStyle
   } = props;
+  const { isHydrogenReact, product, products } = useRebuyWidget();
+  const productTitle = customTitle.replace("{product_title}", product?.title ?? "");
   if (products.length === 0) {
     rebuyDebugLog.log("widget-product-recommendations" /* WIDGET_PRODUCT_RECOMMENDATIONS */, "RebuyProductRecommendations: No products found");
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("section", { className: RebuyProductRecommendations_default.container, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Title, { level: getTitleLevel(customTitleLevel), style: customTitleStyle, text: customTitle }),
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("ul", { className: RebuyProductRecommendations_default.productGrid, children: products.map((product) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("section", { className: RebuyProductRecommendations_default.container, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Title, { level: getTitleLevel(customTitleLevel), style: customTitleStyle, text: productTitle }),
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("ul", { className: RebuyProductRecommendations_default.productGrid, children: products.map((product2) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       ProductCard,
       {
         addToCartBtnText,
         addToCartCallback,
-        isHydrogenReact: props.isHydrogenReact,
-        product,
+        isHydrogenReact,
+        product: product2,
         productCardTitleLevel: getTitleLevel(customTitleLevel, true)
       }
-    ) }, product.id)) })
+    ) }, product2.id)) })
   ] });
 };
 
 // src/widgets/RebuyProductViewed/RebuyProductViewed.tsx
 var import_rebuy4 = require("@rebuy/rebuy");
 var Utilities6 = __toESM(require("@rebuy/rebuy/utilities"), 1);
-var import_react37 = require("react");
+var import_react38 = require("react");
 
 // src/zustandStores/productViewed.ts
 var import_zustand2 = require("zustand");
@@ -9795,12 +9824,12 @@ var useProductViewedStore = (0, import_zustand2.create)((set) => ({
 var RebuyProductViewed = ({ ...props }) => {
   const { apiKey: apiKeyFromContext } = useRebuyConfig();
   const { customerId, product, productHandle, productId } = props;
-  const [event, setEvent] = (0, import_react37.useState)(null);
-  const [Rebuy, setRebuy] = (0, import_react37.useState)(null);
+  const [event, setEvent] = (0, import_react38.useState)(null);
+  const [Rebuy, setRebuy] = (0, import_react38.useState)(null);
   const shopifyProductId = product?.id ?? productId ?? null;
-  const [initialized, setInitialized] = (0, import_react37.useState)(false);
+  const [initialized, setInitialized] = (0, import_react38.useState)(false);
   const { setCustomerId, setUuid } = useProductViewedStore();
-  const request = (0, import_react37.useMemo)(() => {
+  const request = (0, import_react38.useMemo)(() => {
     const request2 = {
       parameters: {}
     };
@@ -9814,7 +9843,7 @@ var RebuyProductViewed = ({ ...props }) => {
     }
     return request2;
   }, [productHandle, shopifyProductId]);
-  (0, import_react37.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     const recordView = async () => {
       if (!Rebuy) {
         return;
@@ -9850,14 +9879,14 @@ var RebuyProductViewed = ({ ...props }) => {
 // src/widgets/RebuyRecentlyViewedProducts/RebuyRecentlyViewedProducts.tsx
 var import_rebuy5 = require("@rebuy/rebuy");
 var import_hydrogen11 = require("@shopify/hydrogen");
-var import_react38 = require("react");
+var import_react39 = require("react");
 
 // src/widgets/RebuyRecentlyViewedProducts/RebuyRecentlyViewedProducts.module.css
 var result27 = { "rebuy-recently-viewed-products-container": "RebuyRecentlyViewedProducts_rebuy-recently-viewed-products-container", "product-grid": "RebuyRecentlyViewedProducts_product-grid" };
 var RebuyRecentlyViewedProducts_default = result27;
 
 // src/widgets/RebuyRecentlyViewedProducts/RebuyRecentlyViewedProducts.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var RebuyRecentlyViewedProducts = (props) => {
   const {
     addToCartBtnText = "Add to cart",
@@ -9871,14 +9900,14 @@ var RebuyRecentlyViewedProducts = (props) => {
   } = props;
   const { customerId, uuid } = useProductViewedStore();
   const { apiKey, loadingStatus: configLoadingStatus, rebuyConfig } = useRebuyConfig();
-  const rebuyContext = (0, import_react38.useContext)(RebuyContext);
-  const [rebuyApiClient, setRebuyApiClient] = (0, import_react38.useState)(null);
-  const [initialized, setInitialized] = (0, import_react38.useState)(false);
-  const [products, setProducts] = (0, import_react38.useState)([]);
-  const [metadata, setMetadata] = (0, import_react38.useState)();
+  const rebuyContext = (0, import_react39.useContext)(RebuyContext);
+  const [rebuyApiClient, setRebuyApiClient] = (0, import_react39.useState)(null);
+  const [initialized, setInitialized] = (0, import_react39.useState)(false);
+  const [products, setProducts] = (0, import_react39.useState)([]);
+  const [metadata, setMetadata] = (0, import_react39.useState)();
   const rebuyConfigKey = rebuyConfig?.shop?.cache_key;
   const endpoint = customerId && customerId !== "" ? `/api/v1/products/viewed?key=${rebuyConfigKey}&customer_id=${customerId}` : `/api/v1/products/viewed?key=${rebuyConfigKey}&uuid=${uuid}`;
-  (0, import_react38.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     if (!rebuyApiClient && apiKey && configLoadingStatus === "success") {
       const client = new import_rebuy5.RebuyClient(apiKey);
       if (rebuyContext?.contextParameters) {
@@ -9892,13 +9921,13 @@ var RebuyRecentlyViewedProducts = (props) => {
       setInitialized(true);
     }
   }, [apiKey, rebuyApiClient, configLoadingStatus, options, rebuyContext, uuid, endpoint]);
-  (0, import_react38.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     if (rebuyApiClient && rebuyContext?.contextParameters) {
       const filteredParams = filterContextForWidgetEndpoints(rebuyContext.contextParameters, endpoint);
       rebuyApiClient.setContextParameters(filteredParams);
     }
   }, [rebuyApiClient, rebuyContext, uuid, endpoint]);
-  const request = (0, import_react38.useMemo)(() => {
+  const request = (0, import_react39.useMemo)(() => {
     const req = {
       endpoint,
       params: {}
@@ -9909,7 +9938,7 @@ var RebuyRecentlyViewedProducts = (props) => {
     }
     return req;
   }, [limit, uuid, endpoint]);
-  (0, import_react38.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     let isMounted = true;
     if (!rebuyApiClient || !initialized || configLoadingStatus !== "success") return;
     const fetchData = async () => {
@@ -9946,9 +9975,9 @@ var RebuyRecentlyViewedProducts = (props) => {
     rebuyDebugLog.log("widget-recently-viewed-products" /* WIDGET_RECENTLY_VIEWED_PRODUCTS */, "RebuyRecentlyViewedProducts: No products found");
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: RebuyRecentlyViewedProducts_default["rebuy-recently-viewed-products-container"], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Title, { level: getTitleLevel(customTitleLevel), style: customTitleStyle, text: customTitle }),
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("ul", { className: RebuyRecentlyViewedProducts_default["product-grid"], children: products?.map((product) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: RebuyRecentlyViewedProducts_default["rebuy-recently-viewed-products-container"], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Title, { level: getTitleLevel(customTitleLevel), style: customTitleStyle, text: customTitle }),
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("ul", { className: RebuyRecentlyViewedProducts_default["product-grid"], children: products?.map((product) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
       ProductCard,
       {
         addToCartBtnText,