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

package/dist/index.mjs

@@ -6986,7 +6986,6 @@ var RebuyWidget = (props) => {
     customTitleLevel = "h2",
     customTitleStyle,
     isCrossSell,
-    isHydrogenReact,
     popupTriggerId,
     product,
     productId,
@@ -7230,7 +7229,7 @@ var RebuyWidget = (props) => {
         customTitle,
         customTitleLevel,
         customTitleStyle,
-        isHydrogenReact,
+        isHydrogenReact: rebuyGeneralContext?.contextParameters?.isHydrogenReact,
         isInPopup: true,
         onDismiss: closePopup,
         products,
@@ -7245,7 +7244,7 @@ var RebuyWidget = (props) => {
       customTitleLevel,
       customTitleStyle,
       isCrossSell,
-      isHydrogenReact,
+      isHydrogenReact: rebuyGeneralContext?.contextParameters?.isHydrogenReact,
       isInPopup: settings?.display_type === "popup",
       products,
       settings
@@ -8860,11 +8859,33 @@ var RebuySmartCart = () => {
 import { RebuyClient as RebuyClient3 } from "@rebuy/rebuy";
 import * as Utilities5 from "@rebuy/rebuy/utilities";
 import { flattenConnection as flattenConnection4 } from "@shopify/hydrogen";
-import React12, { useContext as useContext4, useEffect as useEffect22, useMemo as useMemo21, useState as useState21 } from "react";
+import { useContext as useContext5, useEffect as useEffect22, useMemo as useMemo21, useState as useState21 } from "react";
+
+// src/context/RebuyWidgetContext.tsx
+import { createContext as createContext4, useContext as useContext4 } from "react";
+import { jsx as jsx43 } from "react/jsx-runtime";
+var RebuyWidgetContext = createContext4({
+  dataSource: "",
+  isHydrogenReact: false,
+  key: "",
+  limit: 0,
+  metadata: {},
+  options: {},
+  products: [],
+  variant: void 0,
+  variantId: void 0
+});
+var useRebuyWidget = () => useContext4(RebuyWidgetContext);
+var RebuyWidgetProvider = ({ children, value }) => {
+  return /* @__PURE__ */ jsx43(RebuyWidgetContext.Provider, { value, children });
+};
+
+// src/widgetContainer/RebuyWidgetContainer.tsx
+import { jsx as jsx44 } from "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 = useContext4(RebuyContext);
+  const rebuyContext = useContext5(RebuyContext);
   const [rebuyApiClient, setRebuyApiClient] = useState21(null);
   const [initialized, setInitialized] = useState21(false);
   const shopifyProductId = product?.id ?? productId ?? null;
@@ -8947,23 +8968,30 @@ var RebuyWidgetContainerBase = ({ children, ...props }) => {
       isMounted = false;
     };
   }, [rebuyApiClient, initialized, request, configLoadingStatus]);
-  const childrenWithProps = (currentProps) => React12.Children.map(
-    children,
-    (child) => React12.isValidElement(child) ? React12.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__ */ jsx44(
+    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;
 
@@ -8972,32 +9000,33 @@ var result23 = { "container": "RebuyCompleteTheLook_container", "productGrid": "
 var RebuyCompleteTheLook_default = result23;
 
 // src/widgets/RebuyCompleteTheLook/RebuyCompleteTheLook.tsx
-import { jsx as jsx43, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs25 } from "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__ */ jsxs25("section", { className: RebuyCompleteTheLook_default.container, children: [
-    /* @__PURE__ */ jsx43(Title, { level: getTitleLevel(customTitleLevel), style: customTitleStyle, text: customTitle }),
-    /* @__PURE__ */ jsx43("ul", { className: RebuyCompleteTheLook_default.productGrid, children: products.map((product) => /* @__PURE__ */ jsx43("li", { className: RebuyCompleteTheLook_default.productItem, children: /* @__PURE__ */ jsx43(
+    /* @__PURE__ */ jsx45(Title, { level: getTitleLevel(customTitleLevel), style: customTitleStyle, text: productTitle }),
+    /* @__PURE__ */ jsx45("ul", { className: RebuyCompleteTheLook_default.productGrid, children: products.map((product2) => /* @__PURE__ */ jsx45("li", { className: RebuyCompleteTheLook_default.productItem, children: /* @__PURE__ */ jsx45(
       ProductCard,
       {
         addToCartBtnText,
         addToCartCallback,
-        isHydrogenReact: props.isHydrogenReact,
-        product,
+        isHydrogenReact,
+        product: product2,
         productCardTitleLevel: getTitleLevel(customTitleLevel, true)
       }
-    ) }, product.id)) })
+    ) }, product2.id)) })
   ] });
 };
 
@@ -9261,12 +9290,12 @@ var result24 = { "container": "RebuyDynamicBundleProducts_container", "addCartBt
 var RebuyDynamicBundleProducts_default = result24;
 
 // src/widgets/RebuyDynamicBundleProducts/BundleImages.tsx
-import { Fragment as Fragment12, jsx as jsx44, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx46, jsxs as jsxs26 } from "react/jsx-runtime";
 var BundleImages = ({ products }) => {
   const selected = products.filter((product) => product.selected);
-  return /* @__PURE__ */ jsx44("ul", { className: RebuyDynamicBundleProducts_default.bundleImages, children: products.map((product, index) => {
+  return /* @__PURE__ */ jsx46("ul", { className: RebuyDynamicBundleProducts_default.bundleImages, children: products.map((product, index) => {
     const image = product.selectedVariant?.image;
-    const productImage = image ? /* @__PURE__ */ jsx44(
+    const productImage = image ? /* @__PURE__ */ jsx46(
       Image2,
       {
         alt: image.altText || `Picture of ${product.title}`,
@@ -9281,14 +9310,14 @@ var BundleImages = ({ products }) => {
       product.title
     );
     const showDelimiter = selected[0]?.id !== product.id;
-    return /* @__PURE__ */ jsx44(Fragment11, { children: product.selected && /* @__PURE__ */ jsxs26(Fragment12, { children: [
-      showDelimiter && /* @__PURE__ */ jsx44("li", { className: RebuyDynamicBundleProducts_default.bundleImageDelimiter, children: /* @__PURE__ */ jsx44("span", { children: "+" }) }),
-      /* @__PURE__ */ jsx44("li", { className: "flex items-center", children: product.default ? (
+    return /* @__PURE__ */ jsx46(Fragment11, { children: product.selected && /* @__PURE__ */ jsxs26(Fragment12, { children: [
+      showDelimiter && /* @__PURE__ */ jsx46("li", { className: RebuyDynamicBundleProducts_default.bundleImageDelimiter, children: /* @__PURE__ */ jsx46("span", { children: "+" }) }),
+      /* @__PURE__ */ jsx46("li", { className: "flex items-center", children: product.default ? (
         // Already on product page
         productImage
       ) : (
         // Link to product
-        /* @__PURE__ */ jsx44(
+        /* @__PURE__ */ jsx46(
           RebuyLink,
           {
             ariaLabel: `View ${product.title}`,
@@ -9303,7 +9332,7 @@ var BundleImages = ({ products }) => {
 
 // src/widgets/RebuyDynamicBundleProducts/BundlePrice.tsx
 import { Money as Money4 } from "@shopify/hydrogen";
-import { jsx as jsx45, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs27 } from "react/jsx-runtime";
 var BundlePrice = ({ products }) => {
   const isDisabled = products.filter((product) => product.selected).length < 1;
   const totalBundlePrice = () => {
@@ -9340,12 +9369,12 @@ var BundlePrice = ({ products }) => {
   const price = totalBundlePrice();
   const compareAtPrice = totalBundleCompareAtPrice();
   const CompareAtPrice = ({ data: compareAtPrice2 }) => {
-    return compareAtPrice2 && /* @__PURE__ */ jsx45(Money4, { as: "span", className: RebuyDynamicBundleProducts_default.compareAtPrice, data: compareAtPrice2, withoutTrailingZeros: true });
+    return compareAtPrice2 && /* @__PURE__ */ jsx47(Money4, { as: "span", className: RebuyDynamicBundleProducts_default.compareAtPrice, data: compareAtPrice2, withoutTrailingZeros: true });
   };
-  return products.length > 0 && /* @__PURE__ */ jsx45("div", { className: "flex items-center flex-col", children: !isDisabled && /* @__PURE__ */ jsxs27("p", { className: "flex items-center gap-2 mb-2", children: [
-    /* @__PURE__ */ jsx45("span", { children: "Total Price:" }),
-    /* @__PURE__ */ jsx45(Money4, { as: "span", data: price, withoutTrailingZeros: true }),
-    isDiscounted(price, compareAtPrice) && /* @__PURE__ */ jsx45(CompareAtPrice, { data: compareAtPrice })
+  return products.length > 0 && /* @__PURE__ */ jsx47("div", { className: "flex items-center flex-col", children: !isDisabled && /* @__PURE__ */ jsxs27("p", { className: "flex items-center gap-2 mb-2", children: [
+    /* @__PURE__ */ jsx47("span", { children: "Total Price:" }),
+    /* @__PURE__ */ jsx47(Money4, { as: "span", data: price, withoutTrailingZeros: true }),
+    isDiscounted(price, compareAtPrice) && /* @__PURE__ */ jsx47(CompareAtPrice, { data: compareAtPrice })
   ] }) });
 };
 
@@ -9353,7 +9382,7 @@ var BundlePrice = ({ products }) => {
 import clsx14 from "clsx";
 
 // src/widgets/RebuyDynamicBundleProducts/Select.tsx
-import { jsx as jsx46 } from "react/jsx-runtime";
+import { jsx as jsx48 } from "react/jsx-runtime";
 var Select = ({ onSelectVariant, product }) => {
   const getOptionsLabel = (product2) => {
     const options = product2.variants.nodes[0].selectedOptions;
@@ -9362,30 +9391,30 @@ var Select = ({ onSelectVariant, product }) => {
     const useValues = optionsFromKeys.every((key) => ["name", "value"].includes(key));
     return (useValues ? optionsFromValues : optionsFromKeys).join(" / ");
   };
-  return product && /* @__PURE__ */ jsx46(
+  return product && /* @__PURE__ */ jsx48(
     "select",
     {
       "aria-label": "select variant",
       className: RebuyDynamicBundleProducts_default.select,
       onChange: (e) => onSelectVariant(product, e.target.value),
       value: product.selectedVariant.id,
-      children: /* @__PURE__ */ jsx46("optgroup", { label: getOptionsLabel(product), children: product.variants.nodes.map(({ id, title }) => /* @__PURE__ */ jsx46("option", { value: id, children: title }, id + "-BundleVariant")) })
+      children: /* @__PURE__ */ jsx48("optgroup", { label: getOptionsLabel(product), children: product.variants.nodes.map(({ id, title }) => /* @__PURE__ */ jsx48("option", { value: id, children: title }, id + "-BundleVariant")) })
     }
   );
 };
 
 // src/widgets/RebuyDynamicBundleProducts/BundleSelection.tsx
-import { jsx as jsx47, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs28 } from "react/jsx-runtime";
 var BundleSelection = ({ onSelectVariant, onToggleBundleItem, products }) => {
-  return /* @__PURE__ */ jsx47("ul", { children: products.map((product, index) => {
+  return /* @__PURE__ */ jsx49("ul", { children: products.map((product, index) => {
     const { availableForSale } = product.selectedVariant;
     const isOutOfStock = !availableForSale;
-    return /* @__PURE__ */ jsx47(
+    return /* @__PURE__ */ jsx49(
       "li",
       {
         className: clsx14(RebuyDynamicBundleProducts_default.bundleItemRowContainer, !product.selected && RebuyDynamicBundleProducts_default.unselected),
         children: /* @__PURE__ */ jsxs28("div", { className: RebuyDynamicBundleProducts_default.bundleItemRow, children: [
-          /* @__PURE__ */ jsx47(
+          /* @__PURE__ */ jsx49(
             "input",
             {
               checked: product.selected && availableForSale,
@@ -9399,12 +9428,12 @@ var BundleSelection = ({ onSelectVariant, onToggleBundleItem, products }) => {
           ),
           /* @__PURE__ */ jsxs28("div", { className: RebuyDynamicBundleProducts_default.bundleItemInput, children: [
             /* @__PURE__ */ jsxs28("label", { className: RebuyDynamicBundleProducts_default.bundleItemLabel, htmlFor: `${product.id}-toggle`, children: [
-              isOutOfStock && /* @__PURE__ */ jsx47("b", { children: "SOLD OUT" }),
-              product.default && /* @__PURE__ */ jsx47("b", { children: "This item:" }),
+              isOutOfStock && /* @__PURE__ */ jsx49("b", { children: "SOLD OUT" }),
+              product.default && /* @__PURE__ */ jsx49("b", { children: "This item:" }),
               product.title,
-              /* @__PURE__ */ jsx47(RebuyProductPrice, { selectedVariant: product.selectedVariant })
+              /* @__PURE__ */ jsx49(RebuyProductPrice, { selectedVariant: product.selectedVariant })
             ] }),
-            product.variants.nodes.length > 1 && /* @__PURE__ */ jsx47(Select, { onSelectVariant, product })
+            product.variants.nodes.length > 1 && /* @__PURE__ */ jsx49(Select, { onSelectVariant, product })
           ] })
         ] })
       },
@@ -9414,18 +9443,17 @@ var BundleSelection = ({ onSelectVariant, onToggleBundleItem, products }) => {
 };
 
 // src/widgets/RebuyDynamicBundleProducts/RebuyDynamicBundleProducts.tsx
-import { jsx as jsx48, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs29 } from "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 { isHydrogenReact, product, products } = useRebuyWidget();
+  const productTitle = customTitle.replace("{product_title}", product?.title ?? "");
   const [bundleProducts, setBundleProducts] = useState22([]);
   useEffect23(() => {
     const mainProduct = convertToRebuyProduct(isHydrogenReact || false, product);
@@ -9461,11 +9489,11 @@ var RebuyDynamicBundleProducts = (props) => {
     return null;
   }
   return /* @__PURE__ */ jsxs29("section", { className: RebuyDynamicBundleProducts_default.container, children: [
-    /* @__PURE__ */ jsx48(Title, { level: getTitleLevel(customTitleLevel), style: customTitleStyle, text: customTitle }),
+    /* @__PURE__ */ jsx50(Title, { level: getTitleLevel(customTitleLevel), style: customTitleStyle, text: productTitle }),
     /* @__PURE__ */ jsxs29("div", { className: RebuyDynamicBundleProducts_default.bundleContainer, children: [
-      /* @__PURE__ */ jsx48(BundleImages, { products: bundleProducts }),
-      /* @__PURE__ */ jsx48(BundlePrice, { products: bundleProducts }),
-      /* @__PURE__ */ jsx48("div", { className: RebuyDynamicBundleProducts_default.addCartBtnContainer, children: /* @__PURE__ */ jsx48(
+      /* @__PURE__ */ jsx50(BundleImages, { products: bundleProducts }),
+      /* @__PURE__ */ jsx50(BundlePrice, { products: bundleProducts }),
+      /* @__PURE__ */ jsx50("div", { className: RebuyDynamicBundleProducts_default.addCartBtnContainer, children: /* @__PURE__ */ jsx50(
         AddToCartBtn,
         {
           addToCartBtnText,
@@ -9477,7 +9505,7 @@ var RebuyDynamicBundleProducts = (props) => {
           })
         }
       ) }),
-      /* @__PURE__ */ jsx48(
+      /* @__PURE__ */ jsx50(
         BundleSelection,
         {
           onSelectVariant,
@@ -9501,7 +9529,7 @@ var result25 = { "container": "RebuyProductAddOns_container", "productAddOnsList
 var RebuyProductAddOns_default = result25;
 
 // src/widgets/RebuyProductAddOns/RebuyProductAddOnCard.tsx
-import { jsx as jsx49, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs30 } from "react/jsx-runtime";
 var RebuyProductAddOnCard = ({
   handleChange,
   learnMoreText,
@@ -9510,8 +9538,8 @@ var RebuyProductAddOnCard = ({
   titleLevel
 }) => {
   const { availableForSale, image } = product.selectedVariant || {};
-  return /* @__PURE__ */ jsx49("label", { className: RebuyProductAddOns_default.addOnCard, htmlFor: product.id, children: /* @__PURE__ */ jsxs30("div", { className: RebuyProductAddOns_default.addOnCardContent, children: [
-    /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx51("label", { className: RebuyProductAddOns_default.addOnCard, htmlFor: product.id, children: /* @__PURE__ */ jsxs30("div", { className: RebuyProductAddOns_default.addOnCardContent, children: [
+    /* @__PURE__ */ jsx51(
       "input",
       {
         checked: Boolean(product.selected),
@@ -9524,7 +9552,7 @@ var RebuyProductAddOnCard = ({
         value: ""
       }
     ),
-    /* @__PURE__ */ jsx49("div", { className: RebuyProductAddOns_default.addOnCardContentImage, children: image && /* @__PURE__ */ jsx49(
+    /* @__PURE__ */ jsx51("div", { className: RebuyProductAddOns_default.addOnCardContentImage, children: image && /* @__PURE__ */ jsx51(
       Image3,
       {
         alt: image.altText || `Picture of ${product.title}`,
@@ -9534,10 +9562,10 @@ var RebuyProductAddOnCard = ({
       }
     ) }),
     /* @__PURE__ */ jsxs30("div", { className: RebuyProductAddOns_default.addOnCardTextContent, children: [
-      !availableForSale && /* @__PURE__ */ jsx49("p", { className: RebuyProductAddOns_default.addOnCardOutOfStock, children: outOfStockText }),
-      /* @__PURE__ */ jsx49(Title, { level: titleLevel, text: product.title }),
-      /* @__PURE__ */ jsx49(RebuyProductPrice, { selectedVariant: product.selectedVariant }),
-      /* @__PURE__ */ jsx49(
+      !availableForSale && /* @__PURE__ */ jsx51("p", { className: RebuyProductAddOns_default.addOnCardOutOfStock, children: outOfStockText }),
+      /* @__PURE__ */ jsx51(Title, { level: titleLevel, text: product.title }),
+      /* @__PURE__ */ jsx51(RebuyProductPrice, { selectedVariant: product.selectedVariant }),
+      /* @__PURE__ */ jsx51(
         RebuyLink,
         {
           ariaLabel: `View ${product.title}`,
@@ -9551,23 +9579,23 @@ var RebuyProductAddOnCard = ({
 };
 
 // src/widgets/RebuyProductAddOns/RebuyProductAddOns.tsx
-import { jsx as jsx50, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs31 } from "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 { isHydrogenReact, product, products } = useRebuyWidget();
+  const productTitleClean = customTitle.replace("{product_title}", product?.title ?? "");
+  const withProductTextClean = withProductText.replace("{product_title}", product?.title ?? "");
   const [addedItems, setAddedItems] = useState23(products);
   const [subtotalWithProduct, setSubtotalWithProduct] = useState23();
   const [subtotalWithOutProduct, setSubtotalWithOutProduct] = useState23();
@@ -9648,8 +9676,8 @@ var RebuyProductAddOns = (props) => {
     return null;
   }
   return /* @__PURE__ */ jsxs31("div", { className: RebuyProductAddOns_default.container, children: [
-    /* @__PURE__ */ jsx50(Title, { level: getTitleLevel(customTitleLevel), style: customTitleStyle, text: customTitle }),
-    /* @__PURE__ */ jsx50("ul", { className: RebuyProductAddOns_default.productAddOnsList, children: products.map((product2) => /* @__PURE__ */ jsx50("li", { children: /* @__PURE__ */ jsx50(
+    /* @__PURE__ */ jsx52(Title, { level: getTitleLevel(customTitleLevel), style: customTitleStyle, text: productTitleClean }),
+    /* @__PURE__ */ jsx52("ul", { className: RebuyProductAddOns_default.productAddOnsList, children: products.map((product2) => /* @__PURE__ */ jsx52("li", { children: /* @__PURE__ */ jsx52(
       RebuyProductAddOnCard,
       {
         handleChange,
@@ -9662,13 +9690,13 @@ var RebuyProductAddOns = (props) => {
     /* @__PURE__ */ jsxs31("div", { className: RebuyProductAddOns_default.productAddOnsFooter, children: [
       /* @__PURE__ */ jsxs31("div", { className: RebuyProductAddOns_default.moneyContainer, children: [
         subtotalText,
-        subtotalWithOutProduct && /* @__PURE__ */ jsx50(Money5, { data: subtotalWithOutProduct, withoutTrailingZeros: true })
+        subtotalWithOutProduct && /* @__PURE__ */ jsx52(Money5, { data: subtotalWithOutProduct, withoutTrailingZeros: true })
       ] }),
       includeMainProduct && /* @__PURE__ */ jsxs31("div", { className: RebuyProductAddOns_default.moneyContainer, children: [
-        withProductText,
-        subtotalWithProduct && /* @__PURE__ */ jsx50(Money5, { data: subtotalWithProduct, withoutTrailingZeros: true })
+        withProductTextClean,
+        subtotalWithProduct && /* @__PURE__ */ jsx52(Money5, { data: subtotalWithProduct, withoutTrailingZeros: true })
       ] }),
-      /* @__PURE__ */ jsx50("div", { className: RebuyProductAddOns_default.addCartBtnContainer, children: includeMainProduct ? /* @__PURE__ */ jsx50(
+      /* @__PURE__ */ jsx52("div", { className: RebuyProductAddOns_default.addCartBtnContainer, children: includeMainProduct ? /* @__PURE__ */ jsx52(
         AddToCartBtn,
         {
           addToCartBtnText,
@@ -9678,7 +9706,7 @@ var RebuyProductAddOns = (props) => {
           moneyData: subtotalWithProduct,
           selectedVariants: addedItems.map((item) => item.selectedVariant)
         }
-      ) : /* @__PURE__ */ jsx50(
+      ) : /* @__PURE__ */ jsx52(
         AddToCartBtn,
         {
           addToCartBtnText,
@@ -9698,32 +9726,33 @@ var result26 = { "container": "RebuyProductRecommendations_container", "productG
 var RebuyProductRecommendations_default = result26;
 
 // src/widgets/RebuyProductRecommendations/RebuyProductRecommendations.tsx
-import { jsx as jsx51, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs32 } from "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__ */ jsxs32("section", { className: RebuyProductRecommendations_default.container, children: [
-    /* @__PURE__ */ jsx51(Title, { level: getTitleLevel(customTitleLevel), style: customTitleStyle, text: customTitle }),
-    /* @__PURE__ */ jsx51("ul", { className: RebuyProductRecommendations_default.productGrid, children: products.map((product) => /* @__PURE__ */ jsx51("li", { children: /* @__PURE__ */ jsx51(
+    /* @__PURE__ */ jsx53(Title, { level: getTitleLevel(customTitleLevel), style: customTitleStyle, text: productTitle }),
+    /* @__PURE__ */ jsx53("ul", { className: RebuyProductRecommendations_default.productGrid, children: products.map((product2) => /* @__PURE__ */ jsx53("li", { children: /* @__PURE__ */ jsx53(
       ProductCard,
       {
         addToCartBtnText,
         addToCartCallback,
-        isHydrogenReact: props.isHydrogenReact,
-        product,
+        isHydrogenReact,
+        product: product2,
         productCardTitleLevel: getTitleLevel(customTitleLevel, true)
       }
-    ) }, product.id)) })
+    ) }, product2.id)) })
   ] });
 };
 
@@ -9800,14 +9829,14 @@ var RebuyProductViewed = ({ ...props }) => {
 // src/widgets/RebuyRecentlyViewedProducts/RebuyRecentlyViewedProducts.tsx
 import { RebuyClient as RebuyClient5 } from "@rebuy/rebuy";
 import { flattenConnection as flattenConnection5 } from "@shopify/hydrogen";
-import { useContext as useContext5, useEffect as useEffect26, useMemo as useMemo23, useState as useState25 } from "react";
+import { useContext as useContext6, useEffect as useEffect26, useMemo as useMemo23, useState as useState25 } from "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
-import { jsx as jsx52, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs33 } from "react/jsx-runtime";
 var RebuyRecentlyViewedProducts = (props) => {
   const {
     addToCartBtnText = "Add to cart",
@@ -9821,7 +9850,7 @@ var RebuyRecentlyViewedProducts = (props) => {
   } = props;
   const { customerId, uuid } = useProductViewedStore();
   const { apiKey, loadingStatus: configLoadingStatus, rebuyConfig } = useRebuyConfig();
-  const rebuyContext = useContext5(RebuyContext);
+  const rebuyContext = useContext6(RebuyContext);
   const [rebuyApiClient, setRebuyApiClient] = useState25(null);
   const [initialized, setInitialized] = useState25(false);
   const [products, setProducts] = useState25([]);
@@ -9897,8 +9926,8 @@ var RebuyRecentlyViewedProducts = (props) => {
     return null;
   }
   return /* @__PURE__ */ jsxs33("div", { className: RebuyRecentlyViewedProducts_default["rebuy-recently-viewed-products-container"], children: [
-    /* @__PURE__ */ jsx52(Title, { level: getTitleLevel(customTitleLevel), style: customTitleStyle, text: customTitle }),
-    /* @__PURE__ */ jsx52("ul", { className: RebuyRecentlyViewedProducts_default["product-grid"], children: products?.map((product) => /* @__PURE__ */ jsx52("li", { children: /* @__PURE__ */ jsx52(
+    /* @__PURE__ */ jsx54(Title, { level: getTitleLevel(customTitleLevel), style: customTitleStyle, text: customTitle }),
+    /* @__PURE__ */ jsx54("ul", { className: RebuyRecentlyViewedProducts_default["product-grid"], children: products?.map((product) => /* @__PURE__ */ jsx54("li", { children: /* @__PURE__ */ jsx54(
       ProductCard,
       {
         addToCartBtnText,