@rebuy/rebuy-hydrogen 2.3.1 → 3.0.0-beta.10

package/dist/index.mjs

@@ -0,0 +1,1935 @@
+// src/providers/RebuyHydrogenContextProvider.tsx
+import * as Utilities2 from "@rebuy/rebuy/utilities";
+import { Await, useLocation } from "@remix-run/react";
+import { useEffect, useMemo, useState } from "react";
+
+// src/context/RebuyContext.tsx
+import { createContext } from "react";
+var RebuyContext = createContext(null);
+
+// src/utils/createContextParameters.ts
+import * as Utilities from "@rebuy/rebuy/utilities";
+
+// src/utils/getEncodedAttributes.ts
+var getEncodedAttributes = (attributes) => encodeURIComponent(
+  JSON.stringify(attributes.reduce((merged, { key, value }) => ({ ...merged, [key]: value }), {}))
+);
+
+// src/utils/createContextParameters.ts
+var createContextParameters = ({
+  cacheKey,
+  cartAttributes,
+  cartId,
+  cartLines,
+  cartLinesLength,
+  cartNote,
+  cartSubtotal,
+  cartTotalQuantity,
+  isHydrogenReact,
+  queryObject,
+  windowUrl
+}) => {
+  const contextParameters = {
+    cache_key: cacheKey,
+    cart_count: 0,
+    cart_item_count: 0,
+    cart_line_count: 0,
+    cart_subtotal: 0,
+    isHydrogenReact,
+    time: "",
+    url: windowUrl
+  };
+  const cartContext = {
+    attributes: "",
+    item_count: 0,
+    items: [],
+    line_count: 0,
+    note: "",
+    subtotal: 0,
+    token: ""
+  };
+  if (Object.prototype.hasOwnProperty.call(queryObject, "time")) {
+    contextParameters.time = queryObject.time;
+  }
+  if (cartId) {
+    cartContext.token = Utilities.getIdFromGraphUrl(cartId, "Cart");
+    contextParameters.cart_token = Utilities.getIdFromGraphUrl(cartId, "Cart");
+  }
+  if (cartSubtotal) {
+    cartContext.subtotal = Utilities.amountToCents(parseFloat(cartSubtotal));
+    contextParameters.cart_subtotal = Utilities.amountToCents(parseFloat(cartSubtotal));
+  }
+  if (cartLinesLength) {
+    const totalLines = cartLinesLength;
+    cartContext.line_count = totalLines;
+    contextParameters.cart_count = totalLines;
+    contextParameters.cart_line_count = totalLines;
+  }
+  if (cartTotalQuantity) {
+    cartContext.item_count = cartTotalQuantity;
+    contextParameters.cart_item_count = cartTotalQuantity;
+  }
+  if (cartLines) {
+    cartContext.items = [];
+    for (const cartItem of cartLines) {
+      const item = {
+        attributes: [],
+        product_id: "",
+        properties: "",
+        quantity: cartItem?.quantity,
+        variant_id: ""
+      };
+      if (cartItem?.merchandise?.product?.id) {
+        item.product_id = Utilities.getIdFromGraphUrl(cartItem.merchandise.product.id, "Product");
+      }
+      if (cartItem?.merchandise?.id) {
+        item.variant_id = Utilities.getIdFromGraphUrl(cartItem.merchandise.id, "ProductVariant");
+      }
+      if (cartItem?.attributes?.length) {
+        const validAttributes = cartItem.attributes.filter(
+          (attr) => attr !== void 0 && typeof attr.key === "string" && typeof attr.value === "string"
+        );
+        item.properties = getEncodedAttributes(validAttributes);
+      }
+      cartContext.items.push(item);
+    }
+  }
+  if (cartAttributes) {
+    const validAttributes = cartAttributes.filter(
+      (attr) => attr !== void 0 && typeof attr.key === "string" && typeof attr.value === "string"
+    );
+    cartContext.attributes = getEncodedAttributes(validAttributes);
+  }
+  if (cartNote) {
+    cartContext.note = cartNote;
+  }
+  contextParameters.cart = cartContext;
+  return contextParameters;
+};
+
+// src/utils/getRebuyConfig.ts
+import { RebuyClient } from "@rebuy/rebuy";
+var getRebuyConfig = async (storeDomain) => {
+  try {
+    const request = {
+      parameters: { shop: storeDomain },
+      url: `/api/v1/user/config`
+    };
+    const { data: rebuy, ...response } = await new RebuyClient(void 0, void 0, storeDomain).getShieldedAsset(
+      request.url,
+      request.parameters
+    );
+    if (!rebuy?.shop) {
+      throw new Error("Rebuy configuration is not properly set up - missing shop", { cause: response });
+    }
+    return rebuy;
+  } catch (error) {
+    const err = error;
+    console.warn("Error fetching Rebuy shop config");
+    console.error(err, err.cause);
+    throw err;
+  }
+};
+
+// src/providers/RebuyHydrogenContextProvider.tsx
+import { jsx } from "react/jsx-runtime";
+var RebuyHydrogenContext = ({
+  apiKey,
+  cartAttributes,
+  cartCost,
+  cartId,
+  cartLines,
+  cartNote,
+  cartQuantity,
+  children,
+  publicStoreDomain,
+  shop
+}) => {
+  const [rebuyConfig, setRebuyConfig] = useState(null);
+  const location = useLocation();
+  const queryObject = Utilities2.queryStringToObject(location.search);
+  const windowUrl = `${shop}${location.pathname}${location.search}`;
+  useEffect(() => {
+    const initConfig = async () => {
+      const config = await getRebuyConfig(publicStoreDomain);
+      setRebuyConfig(config);
+    };
+    if (!rebuyConfig?.shop) {
+      initConfig();
+    }
+  }, [rebuyConfig]);
+  const contextParameters = useMemo(
+    () => createContextParameters({
+      cacheKey: rebuyConfig?.shop?.cache_key,
+      cartAttributes,
+      cartId,
+      cartLines,
+      cartLinesLength: cartLines?.length,
+      cartNote,
+      cartSubtotal: cartCost,
+      cartTotalQuantity: cartQuantity,
+      isHydrogenReact: false,
+      queryObject,
+      windowUrl
+    }),
+    [rebuyConfig, windowUrl, queryObject, cartAttributes, cartCost, cartId, cartLines, cartQuantity, cartNote]
+  );
+  const contextParametersJSON = JSON.stringify(contextParameters);
+  const contextValue = useMemo(
+    () => ({ contextParameters: JSON.parse(contextParametersJSON) }),
+    [contextParametersJSON]
+  );
+  return /* @__PURE__ */ jsx(RebuyContext.Provider, { value: contextValue, children });
+};
+var RebuyHydrogenContextProvider = ({
+  apiKey,
+  cart,
+  children,
+  publicStoreDomain,
+  shop
+}) => {
+  return /* @__PURE__ */ jsx(Await, { resolve: cart, children: (resolvedCart) => {
+    const cart2 = resolvedCart;
+    return /* @__PURE__ */ jsx(
+      RebuyHydrogenContext,
+      {
+        apiKey,
+        cartAttributes: cart2?.attributes,
+        cartCost: cart2?.cost?.subtotalAmount?.amount,
+        cartId: cart2?.id,
+        cartLines: cart2?.lines?.nodes,
+        cartNote: cart2?.note,
+        cartQuantity: cart2?.totalQuantity,
+        publicStoreDomain,
+        shop,
+        children
+      }
+    );
+  } });
+};
+
+// src/providers/RebuyHydrogenReactContextProvider.tsx
+import * as Utilities3 from "@rebuy/rebuy/utilities";
+import { useLocation as useLocation2 } from "@remix-run/react";
+import { CartProvider, ShopifyProvider, useCart } from "@shopify/hydrogen-react";
+import { useEffect as useEffect2, useMemo as useMemo2, useState as useState2 } from "react";
+
+// src/queries/cart.queries.ts
+var OPTION_FRAGMENT = `#graphql
+  fragment OptionFragment on ProductOption {
+    id
+    name
+    optionValues {
+      id
+      name
+      swatch {
+        color
+        image {
+          mediaContentType
+          previewImage {
+            height
+            id
+            url
+            width
+            altText
+          }
+          id
+          alt
+        }
+      }
+    }
+  }
+`;
+var CART_LINE_FRAGMENT = `#graphql
+  fragment CartLineFragment on CartLine {
+    id
+    quantity
+    cost {
+      amountPerQuantity {
+        amount
+        currencyCode
+      }
+      compareAtAmountPerQuantity {
+        amount
+        currencyCode
+      }
+      totalAmount {
+        amount
+        currencyCode
+      }
+      subtotalAmount {
+        amount
+        currencyCode
+      }
+    }
+    attributes {
+      key
+      value
+    }
+    discountAllocations {
+      discountedAmount {
+        amount
+        currencyCode
+      }
+      ... on CartAutomaticDiscountAllocation {
+        __typename
+        discountedAmount {
+          amount
+          currencyCode
+        }
+        title
+      }
+      ... on CartCodeDiscountAllocation {
+        __typename
+        code
+        discountedAmount {
+          amount
+          currencyCode
+        }
+      }
+      ... on CartCustomDiscountAllocation {
+        __typename
+        discountedAmount {
+          amount
+          currencyCode
+        }
+        title
+      }
+    }
+    merchandise {
+      ... on ProductVariant {
+        availableForSale
+        id
+        sku
+        title
+        compareAtPrice {
+          amount
+          currencyCode
+        }
+        image {
+          altText
+          height
+          id
+          url
+          width
+        }
+        price {
+          amount
+          currencyCode
+        }
+        product {
+          handle
+          id
+          productType
+          tags
+          title
+          vendor
+          collections(first: 10) {
+            nodes {
+              handle
+            }
+          }
+          options {
+            ...OptionFragment
+          }
+          images(first: 20) {
+            nodes {
+              altText
+              height
+              id
+              url
+              width
+            }
+          }
+        }
+        selectedOptions {
+          name
+          value
+        }
+      }
+    }
+  }
+`;
+var CART_LINE_COMPONENT_FRAGMENT = `#graphql
+  fragment CartLineComponentFragment on ComponentizableCartLine {
+    id
+    quantity
+    cost {
+      amountPerQuantity {
+        amount
+        currencyCode
+      }
+      compareAtAmountPerQuantity {
+        amount
+        currencyCode
+      }
+      totalAmount {
+        amount
+        currencyCode
+      }
+      subtotalAmount {
+        amount
+        currencyCode
+      }
+    }
+    attributes {
+      key
+      value
+    }
+    discountAllocations {
+      discountedAmount {
+        amount
+        currencyCode
+      }
+      ... on CartAutomaticDiscountAllocation {
+        __typename
+        discountedAmount {
+          amount
+          currencyCode
+        }
+        title
+      }
+      ... on CartCodeDiscountAllocation {
+        __typename
+        code
+        discountedAmount {
+          amount
+          currencyCode
+        }
+      }
+      ... on CartCustomDiscountAllocation {
+        __typename
+        discountedAmount {
+          amount
+          currencyCode
+        }
+        title
+      }
+    }
+    merchandise {
+      ... on ProductVariant {
+        availableForSale
+        id
+        sku
+        title
+        compareAtPrice {
+          amount
+          currencyCode
+        }
+        image {
+          altText
+          height
+          id
+          url
+          width
+        }
+        price {
+          amount
+          currencyCode
+        }
+        product {
+          handle
+          id
+          productType
+          tags
+          title
+          vendor
+          collections(first: 10) {
+            nodes {
+              handle
+            }
+          }
+          options {
+            id
+            name
+            optionValues {
+              id
+              name
+              swatch {
+                color
+                image {
+                  mediaContentType
+                  previewImage {
+                    height
+                    id
+                    url
+                    width
+                    altText
+                  }
+                  id
+                  alt
+                }
+              }
+            }
+          }
+          images(first: 20) {
+            nodes {
+              altText
+              height
+              id
+              url
+              width
+            }
+          }
+        }
+        selectedOptions {
+          name
+          value
+        }
+      }
+    }
+    lineComponents {
+      id
+      quantity
+      cost {
+        amountPerQuantity {
+          amount
+          currencyCode
+        }
+        compareAtAmountPerQuantity {
+          amount
+          currencyCode
+        }
+        totalAmount {
+          amount
+          currencyCode
+        }
+        subtotalAmount {
+          amount
+          currencyCode
+        }
+      }
+      attributes {
+        key
+        value
+      }
+      discountAllocations {
+        discountedAmount {
+          amount
+          currencyCode
+        }
+        ... on CartAutomaticDiscountAllocation {
+          __typename
+          discountedAmount {
+            amount
+            currencyCode
+          }
+          title
+        }
+        ... on CartCodeDiscountAllocation {
+          __typename
+          code
+          discountedAmount {
+            amount
+            currencyCode
+          }
+        }
+        ... on CartCustomDiscountAllocation {
+          __typename
+          discountedAmount {
+            amount
+            currencyCode
+          }
+          title
+        }
+      }
+      merchandise {
+        ... on ProductVariant {
+          availableForSale
+          id
+          sku
+          title
+          compareAtPrice {
+            amount
+            currencyCode
+          }
+          image {
+            altText
+            height
+            id
+            url
+            width
+          }
+          price {
+            amount
+            currencyCode
+          }
+          product {
+            handle
+            id
+            productType
+            tags
+            title
+            vendor
+            collections(first: 10) {
+              nodes {
+                handle
+              }
+            }
+            options {
+              ...OptionFragment
+            }
+            images(first: 20) {
+              nodes {
+                altText
+                height
+                id
+                url
+                width
+              }
+            }
+          }
+          selectedOptions {
+            name
+            value
+          }
+        }
+      }
+    }
+  }
+`;
+var CART_FRAGMENT = `#graphql
+  fragment CartFragment on Cart {
+    id
+    checkoutUrl
+    createdAt
+    totalQuantity
+    note
+    updatedAt
+    __typename
+    buyerIdentity {
+      countryCode
+      customer {
+        id
+        email
+        firstName
+        lastName
+        displayName
+      }
+      email
+      phone
+    }
+    attributes {
+      key
+      value
+    }
+    cost {
+      subtotalAmount {
+        amount
+        currencyCode
+      }
+      totalAmount {
+        amount
+        currencyCode
+      }
+    }
+    discountAllocations {
+      discountedAmount {
+        amount
+        currencyCode
+      }
+      ... on CartAutomaticDiscountAllocation {
+        __typename
+        discountedAmount {
+          amount
+          currencyCode
+        }
+        title
+      }
+      ... on CartCodeDiscountAllocation {
+        __typename
+        code
+        discountedAmount {
+          amount
+          currencyCode
+        }
+      }
+      ... on CartCustomDiscountAllocation {
+        __typename
+        discountedAmount {
+          amount
+          currencyCode
+        }
+        title
+      }
+    }
+    discountCodes {
+      applicable
+      code
+    }
+    lines(first: $numCartLines) {
+      edges {
+        node {
+          ...CartLineComponentFragment
+        }
+      }
+      edges {
+        node {
+          ...CartLineFragment
+        }
+      }
+    }
+  }
+  ${CART_LINE_FRAGMENT}
+  ${CART_LINE_COMPONENT_FRAGMENT}
+  ${OPTION_FRAGMENT}
+`;
+
+// src/providers/RebuyHydrogenReactContextProvider.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var PUBLIC_PRIMARY_DOMAIN = import.meta.env.PUBLIC_PRIMARY_DOMAIN;
+var PUBLIC_REBUY_API_KEY = import.meta.env.PUBLIC_REBUY_API_KEY;
+var PUBLIC_STORE_DOMAIN = import.meta.env.PUBLIC_STORE_DOMAIN;
+var PUBLIC_STOREFRONT_ID = import.meta.env.PUBLIC_STOREFRONT_ID;
+var PUBLIC_STOREFRONT_API_TOKEN = import.meta.env.PUBLIC_STOREFRONT_API_TOKEN || "";
+var RebuyHydrogenReactContext = ({ children }) => {
+  const [rebuyConfig, setRebuyConfig] = useState2(null);
+  const location = useLocation2();
+  const queryObject = Utilities3.queryStringToObject(location.search);
+  const windowUrl = `${PUBLIC_PRIMARY_DOMAIN}${location.pathname}${location.search}`;
+  const cart = useCart();
+  useEffect2(() => {
+    const initConfig = async () => {
+      const config = await getRebuyConfig(PUBLIC_STORE_DOMAIN);
+      setRebuyConfig(config);
+    };
+    if (!rebuyConfig?.shop) {
+      initConfig();
+    }
+  }, [rebuyConfig, PUBLIC_STORE_DOMAIN]);
+  const contextParameters = useMemo2(
+    () => createContextParameters({
+      cacheKey: rebuyConfig?.shop?.cache_key,
+      cartAttributes: cart?.attributes,
+      cartId: cart?.id,
+      cartLines: cart?.lines,
+      cartLinesLength: cart?.lines?.length,
+      cartSubtotal: cart?.cost?.subtotalAmount?.amount,
+      cartTotalQuantity: cart?.totalQuantity,
+      isHydrogenReact: true,
+      queryObject,
+      windowUrl
+    }),
+    [rebuyConfig, windowUrl, queryObject, cart]
+  );
+  const contextParametersJSON = JSON.stringify(contextParameters);
+  const contextValue = useMemo2(
+    () => ({ contextParameters: JSON.parse(contextParametersJSON) }),
+    [contextParametersJSON]
+  );
+  return /* @__PURE__ */ jsx2(RebuyContext.Provider, { value: contextValue, children });
+};
+var RebuyHydrogenReactContextProvider = ({
+  cartFragment = CART_FRAGMENT,
+  children,
+  countryIsoCode = "US",
+  customerAccessToken = "",
+  data,
+  languageIsoCode = "EN",
+  numCartLines,
+  onAttributesUpdate,
+  onAttributesUpdateComplete,
+  onBuyerIdentityUpdate,
+  onBuyerIdentityUpdateComplete,
+  onCreate,
+  onCreateComplete,
+  onDiscountCodesUpdate,
+  onDiscountCodesUpdateComplete,
+  onLineAdd,
+  onLineAddComplete,
+  onLineRemove,
+  onLineRemoveComplete,
+  onLineUpdate,
+  onLineUpdateComplete,
+  onNoteUpdate,
+  onNoteUpdateComplete,
+  storefrontApiVersion = "2025-01"
+}) => {
+  const adapted = {
+    onAttributesUpdate: onAttributesUpdate ? () => onAttributesUpdate() : void 0,
+    onAttributesUpdateComplete: onAttributesUpdateComplete ? () => onAttributesUpdateComplete() : void 0,
+    onBuyerIdentityUpdate: onBuyerIdentityUpdate ? () => onBuyerIdentityUpdate() : void 0,
+    onBuyerIdentityUpdateComplete: onBuyerIdentityUpdateComplete ? () => onBuyerIdentityUpdateComplete() : void 0,
+    onCreate: onCreate ? () => onCreate() : void 0,
+    onCreateComplete: onCreateComplete ? () => onCreateComplete() : void 0,
+    onDiscountCodesUpdate: onDiscountCodesUpdate ? () => onDiscountCodesUpdate() : void 0,
+    onDiscountCodesUpdateComplete: onDiscountCodesUpdateComplete ? () => onDiscountCodesUpdateComplete() : void 0,
+    onLineAdd: onLineAdd ? () => onLineAdd() : void 0,
+    onLineAddComplete: onLineAddComplete ? () => onLineAddComplete() : void 0,
+    onLineRemove: onLineRemove ? () => onLineRemove() : void 0,
+    onLineRemoveComplete: onLineRemoveComplete ? () => onLineRemoveComplete() : void 0,
+    onLineUpdate: onLineUpdate ? () => onLineUpdate() : void 0,
+    onLineUpdateComplete: onLineUpdateComplete ? () => onLineUpdateComplete() : void 0,
+    onNoteUpdate: onNoteUpdate ? () => onNoteUpdate() : void 0,
+    onNoteUpdateComplete: onNoteUpdateComplete ? () => onNoteUpdateComplete() : void 0
+  };
+  return /* @__PURE__ */ jsx2(
+    ShopifyProvider,
+    {
+      countryIsoCode,
+      languageIsoCode,
+      storeDomain: PUBLIC_STORE_DOMAIN,
+      storefrontApiVersion,
+      storefrontId: PUBLIC_STOREFRONT_ID,
+      storefrontToken: PUBLIC_STOREFRONT_API_TOKEN,
+      children: /* @__PURE__ */ jsx2(
+        CartProvider,
+        {
+          cartFragment,
+          countryCode: countryIsoCode,
+          customerAccessToken,
+          data,
+          languageCode: languageIsoCode,
+          numCartLines,
+          onAttributesUpdate: adapted.onAttributesUpdate,
+          onAttributesUpdateComplete: adapted.onAttributesUpdateComplete,
+          onBuyerIdentityUpdate: adapted.onBuyerIdentityUpdate,
+          onBuyerIdentityUpdateComplete: adapted.onBuyerIdentityUpdateComplete,
+          onCreate: adapted.onCreate,
+          onCreateComplete: adapted.onCreateComplete,
+          onDiscountCodesUpdate: adapted.onDiscountCodesUpdate,
+          onDiscountCodesUpdateComplete: adapted.onDiscountCodesUpdateComplete,
+          onLineAdd: adapted.onLineAdd,
+          onLineAddComplete: adapted.onLineAddComplete,
+          onLineRemove: adapted.onLineRemove,
+          onLineRemoveComplete: adapted.onLineRemoveComplete,
+          onLineUpdate: adapted.onLineUpdate,
+          onLineUpdateComplete: adapted.onLineUpdateComplete,
+          onNoteUpdate: adapted.onNoteUpdate,
+          onNoteUpdateComplete: adapted.onNoteUpdateComplete,
+          children: /* @__PURE__ */ jsx2(RebuyHydrogenReactContext, { children })
+        }
+      )
+    }
+  );
+};
+
+// src/widgetContainer/RebuyWidgetContainer.tsx
+import { RebuyClient as RebuyClient2 } from "@rebuy/rebuy";
+import * as Utilities4 from "@rebuy/rebuy/utilities";
+import { flattenConnection } from "@shopify/hydrogen";
+import React, { useContext, useEffect as useEffect3, useMemo as useMemo3, useState as useState3 } from "react";
+var RebuyWidgetContainerBase = ({ children, ...props }) => {
+  const { apiKey, collection, collectionId, dataSource, limit, options, product, productId, variant, variantId } = props;
+  const contextParameters = useContext(RebuyContext);
+  const [Rebuy, setRebuy] = useState3(null);
+  const [initialized, setInitialized] = useState3(false);
+  const shopifyProductId = product?.id ?? productId ?? null;
+  const shopifyVariantId = variant?.id ?? variantId ?? null;
+  const shopifyCollectionId = collection?.id ?? collectionId ?? null;
+  const [products, setProducts] = useState3([]);
+  const [metadata, setMetadata] = useState3();
+  useEffect3(() => {
+    if (!Rebuy) {
+      const client = new RebuyClient2(apiKey);
+      client.setContextParameters(
+        contextParameters
+        // TODO: fix this type when @rebuy/rebuy is moved to typescript
+      );
+      if (options) {
+        client.setDefaultParameters(options);
+      }
+      setRebuy(client);
+      setInitialized(true);
+    }
+  }, [apiKey, Rebuy, contextParameters, options]);
+  useEffect3(() => {
+    if (!Rebuy) return;
+    Rebuy.setContextParameters(
+      contextParameters
+      // TODO: fix this type when @rebuy/rebuy is moved to typescript
+    );
+  }, [Rebuy, contextParameters]);
+  const request = useMemo3(() => {
+    const request2 = {
+      endpoint: dataSource || "/api/v1/products/recommended",
+      params: {}
+      // Keeping this object generic to allow for custom endpoints
+    };
+    if (shopifyProductId) {
+      request2.params.shopify_product_ids = Utilities4.getIdFromGraphUrl(shopifyProductId, "Product");
+    }
+    if (shopifyProductId) {
+      request2.params.shopify_product_ids = Utilities4.getIdFromGraphUrl(shopifyProductId, "Product");
+    }
+    if (shopifyVariantId) {
+      request2.params.shopify_variant_ids = Utilities4.getIdFromGraphUrl(shopifyVariantId, "ProductVariant");
+    }
+    if (shopifyCollectionId) {
+      request2.params.shopify_collection_ids = Utilities4.getIdFromGraphUrl(shopifyCollectionId, "Collection");
+    }
+    if (limit) {
+      request2.params.limit = limit;
+    }
+    return request2;
+  }, [dataSource, shopifyProductId, shopifyVariantId, shopifyCollectionId, limit]);
+  useEffect3(() => {
+    let isMounted = true;
+    if (!Rebuy || !initialized) return;
+    const fetchData = async () => {
+      const { data, metadata: metadata2 } = await Rebuy.getStorefrontData(request.endpoint, request.params);
+      if (isMounted) {
+        setProducts(
+          Array.isArray(data) ? data.map((product2) => ({
+            ...product2,
+            variants: {
+              nodes: product2.variants ? flattenConnection(product2.variants) : []
+            }
+          })) : []
+        );
+        setMetadata(metadata2);
+      }
+    };
+    fetchData();
+    return () => {
+      isMounted = false;
+    };
+  }, [Rebuy, initialized, request]);
+  const childrenWithProps = (props2) => React.Children.map(
+    children,
+    (child) => React.isValidElement(child) ? React.cloneElement(child, props2) : child
+  );
+  const childProps = {
+    ...props,
+    isHydrogenReact: contextParameters?.contextParameters?.isHydrogenReact,
+    key: product?.id,
+    metadata,
+    products
+  };
+  return childrenWithProps(childProps);
+};
+var RebuyWidgetContainer = RebuyWidgetContainerBase;
+
+// src/components/ProductCard/ProductCard.tsx
+import { Link } from "@remix-run/react";
+import { Image } from "@shopify/hydrogen";
+import { useState as useState4 } from "react";
+
+// src/components/AddToCartBtn/HydrogenAddToCartBtn.tsx
+import { CartForm, Money } from "@shopify/hydrogen";
+
+// src/components/AddToCartBtn/AddToCartBtn.module.css
+var AddToCartBtn_default = {
+  button: "AddToCartBtn_button"
+};
+
+// src/components/AddToCartBtn/HydrogenAddToCartBtn.tsx
+import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
+var HydrogenAddToCartBtn = ({
+  addToCartBtnText,
+  addToCartCallback,
+  disabled,
+  linesToAdd,
+  moneyData
+}) => {
+  return /* @__PURE__ */ jsx3(
+    CartForm,
+    {
+      action: CartForm.ACTIONS.LinesAdd,
+      inputs: {
+        lines: linesToAdd
+      },
+      route: "/cart",
+      children: (fetcher) => /* @__PURE__ */ jsx3(Fragment, { children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          className: AddToCartBtn_default.button,
+          disabled: disabled || fetcher.state !== "idle",
+          onClick: addToCartCallback,
+          type: "submit",
+          children: [
+            addToCartBtnText,
+            moneyData && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx3("span", { children: " | " }),
+              /* @__PURE__ */ jsx3(Money, { data: moneyData, withoutTrailingZeros: true })
+            ] })
+          ]
+        }
+      ) })
+    }
+  );
+};
+
+// src/components/AddToCartBtn/HydrogenReactAddToCartBtn.tsx
+import { Money as Money2, useCart as useCart2 } from "@shopify/hydrogen-react";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var HydrogenReactAddToCartBtn = ({
+  addToCartBtnText,
+  addToCartCallback,
+  disabled,
+  linesToAdd,
+  moneyData
+}) => {
+  const { linesAdd } = useCart2();
+  const handleAddToCart = () => {
+    linesAdd(linesToAdd);
+    addToCartCallback?.();
+  };
+  return /* @__PURE__ */ jsxs2("button", { className: AddToCartBtn_default.button, disabled, onClick: handleAddToCart, type: "button", children: [
+    addToCartBtnText,
+    moneyData && /* @__PURE__ */ jsxs2(Fragment2, { children: [
+      /* @__PURE__ */ jsx4("span", { children: " | " }),
+      /* @__PURE__ */ jsx4(Money2, { data: moneyData, withoutTrailingZeros: true })
+    ] })
+  ] });
+};
+
+// src/components/AddToCartBtn/AddToCartBtn.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var AddToCartBtn = ({
+  addToCartBtnText,
+  addToCartCallback,
+  disabled,
+  isHydrogenReact,
+  moneyData,
+  selectedVariants
+}) => {
+  const linesToAdd = selectedVariants.map((variant) => ({
+    attributes: [
+      { key: "_source", value: "Rebuy" },
+      { key: "_attribution", value: "Rebuy Product Recommendations" }
+    ],
+    merchandiseId: variant.id,
+    quantity: 1,
+    selectedVariant: variant
+  }));
+  if (isHydrogenReact) {
+    return /* @__PURE__ */ jsx5(
+      HydrogenReactAddToCartBtn,
+      {
+        addToCartBtnText,
+        addToCartCallback,
+        disabled,
+        linesToAdd,
+        moneyData
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx5(
+    HydrogenAddToCartBtn,
+    {
+      addToCartBtnText,
+      addToCartCallback,
+      disabled,
+      linesToAdd,
+      moneyData
+    }
+  );
+};
+
+// src/components/ProductPrice/ProductPrice.tsx
+import { Money as Money3 } from "@shopify/hydrogen";
+
+// src/components/ProductPrice/ProductPrice.module.css
+var ProductPrice_default = {
+  priceContainer: "ProductPrice_priceContainer",
+  compareAtPrice: "ProductPrice_compareAtPrice"
+};
+
+// src/components/ProductPrice/ProductPrice.tsx
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+var RebuyProductPrice = ({ selectedVariant }) => {
+  if (!selectedVariant) return null;
+  const { compareAtPriceV2: compareAtPrice, priceV2: price } = selectedVariant;
+  const isDiscounted = (price2, compareAtPrice2) => Number(compareAtPrice2?.amount) > Number(price2?.amount);
+  const CompareAtPrice = ({ data: compareAtPrice2 }) => {
+    return compareAtPrice2 && /* @__PURE__ */ jsx6(Money3, { as: "span", className: ProductPrice_default.compareAtPrice, data: compareAtPrice2, withoutTrailingZeros: true });
+  };
+  return price && /* @__PURE__ */ jsxs3("div", { className: ProductPrice_default.priceContainer, children: [
+    /* @__PURE__ */ jsx6(Money3, { data: price, withoutTrailingZeros: true }),
+    compareAtPrice && isDiscounted(price, compareAtPrice) && /* @__PURE__ */ jsx6(CompareAtPrice, { data: compareAtPrice })
+  ] });
+};
+
+// src/components/Title/Title.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var Title = ({ level, style, text }) => {
+  switch (level) {
+    case "h1":
+      return /* @__PURE__ */ jsx7("h1", { style, children: text });
+    default:
+    case "h2":
+      return /* @__PURE__ */ jsx7("h2", { style, children: text });
+    case "h3":
+      return /* @__PURE__ */ jsx7("h3", { style, children: text });
+    case "h4":
+      return /* @__PURE__ */ jsx7("h4", { style, children: text });
+    case "h5":
+      return /* @__PURE__ */ jsx7("h5", { style, children: text });
+    case "h6":
+      return /* @__PURE__ */ jsx7("h6", { style, children: text });
+  }
+};
+
+// src/components/VariantSelect/VariantSelect.module.css
+var VariantSelect_default = {
+  select: "VariantSelect_select"
+};
+
+// src/components/VariantSelect/VariantSelect.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var VariantSelect = ({ handleSelectedVariant, product }) => {
+  const getOptionsLabel = (product2) => {
+    const options = product2.variants.nodes[0].selectedOptions;
+    const optionsFromKeys = options ? Object.keys(options[0]) : [];
+    const optionsFromValues = options ? options.map((option) => option.name) : [];
+    const useValues = optionsFromKeys.every((key) => ["name", "value"].includes(key));
+    return (useValues ? optionsFromValues : optionsFromKeys).join(" / ");
+  };
+  return product?.variants.nodes.length > 1 && /* @__PURE__ */ jsx8("div", { children: /* @__PURE__ */ jsx8(
+    "select",
+    {
+      "aria-label": "select variant",
+      className: VariantSelect_default.select,
+      onChange: (e) => handleSelectedVariant(product, e.target.value),
+      children: /* @__PURE__ */ jsx8("optgroup", { label: getOptionsLabel(product), children: product.variants.nodes.map(({ id, title }) => /* @__PURE__ */ jsx8("option", { value: id, children: title }, id + "-variant")) })
+    }
+  ) });
+};
+
+// src/components/ProductCard/ProductCard.module.css
+var ProductCard_default = {
+  container: "ProductCard_container",
+  productInfo: "ProductCard_productInfo"
+};
+
+// src/components/ProductCard/ProductCard.tsx
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+var ProductCard = ({
+  addToCartBtnText,
+  addToCartCallback,
+  isHydrogenReact,
+  product,
+  productCardTitleLevel
+}) => {
+  const [selectedVariant, setSelectedVariant] = useState4(product.variants.nodes[0]);
+  const { image } = selectedVariant;
+  const handleSelectedVariant = (product2, variant_id) => {
+    const updatedVariant = product2.variants.nodes.find((variant) => variant.id === variant_id);
+    if (updatedVariant) {
+      setSelectedVariant(updatedVariant);
+    }
+  };
+  return /* @__PURE__ */ jsxs4("div", { className: ProductCard_default.container, children: [
+    /* @__PURE__ */ jsxs4("div", { children: [
+      /* @__PURE__ */ jsx9(Link, { to: `/products/${product.handle}`, children: /* @__PURE__ */ jsx9(
+        Image,
+        {
+          alt: image?.altText ?? `Picture of ${product.title}`,
+          data: image,
+          sizes: "(max-width: 320px) 280px, (max-width: 768px) 720px, 1440px"
+        }
+      ) }),
+      /* @__PURE__ */ jsxs4("div", { className: ProductCard_default.productInfo, children: [
+        /* @__PURE__ */ jsx9(Link, { to: `/products/${product.handle}`, children: /* @__PURE__ */ jsx9(Title, { level: productCardTitleLevel, text: product.title }) }),
+        /* @__PURE__ */ jsx9(RebuyProductPrice, { selectedVariant }),
+        /* @__PURE__ */ jsx9(VariantSelect, { handleSelectedVariant, product })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx9(
+      AddToCartBtn,
+      {
+        addToCartBtnText,
+        addToCartCallback,
+        isHydrogenReact,
+        selectedVariants: [selectedVariant]
+      }
+    )
+  ] });
+};
+
+// src/hooks/titleLevel.tsx
+var getTitleLevel = (level, decreaseLevel = false) => {
+  switch (level) {
+    case "h1":
+      if (decreaseLevel) {
+        return "h2" /* H2 */;
+      }
+      return "h1" /* H1 */;
+    case "h2":
+      if (decreaseLevel) {
+        return "h3" /* H3 */;
+      }
+      return "h2" /* H2 */;
+    case "h3":
+      if (decreaseLevel) {
+        return "h4" /* H4 */;
+      }
+      return "h3" /* H3 */;
+    case "h4":
+      if (decreaseLevel) {
+        return "h5" /* H5 */;
+      }
+      return "h4" /* H4 */;
+    case "h5":
+      if (decreaseLevel) {
+        return "h6" /* H6 */;
+      }
+      return "h5" /* H5 */;
+    case "h6":
+      if (decreaseLevel) {
+        return "h6" /* H6 */;
+      }
+      return "h6" /* H6 */;
+    default:
+      return "h2" /* H2 */;
+  }
+};
+
+// src/widgets/RebuyCompleteTheLook/RebuyCompleteTheLook.module.css
+var RebuyCompleteTheLook_default = {
+  container: "RebuyCompleteTheLook_container",
+  productGrid: "RebuyCompleteTheLook_productGrid",
+  productItem: "RebuyCompleteTheLook_productItem"
+};
+
+// src/widgets/RebuyCompleteTheLook/RebuyCompleteTheLook.tsx
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+var RebuyCompleteTheLook = (props) => {
+  const {
+    addToCartBtnText = "Add to cart",
+    addToCartCallback,
+    customTitle = `These pair with ${props.product?.title}`,
+    customTitleLevel = "h2",
+    customTitleStyle,
+    products = []
+  } = props;
+  if (products.length === 0) {
+    console.log("RebuyCompleteTheLook: No products found");
+    return null;
+  }
+  return /* @__PURE__ */ jsxs5("section", { className: RebuyCompleteTheLook_default.container, children: [
+    /* @__PURE__ */ jsx10(Title, { level: getTitleLevel(customTitleLevel), style: customTitleStyle, text: customTitle }),
+    /* @__PURE__ */ jsx10("ul", { className: RebuyCompleteTheLook_default.productGrid, children: products.map((product) => /* @__PURE__ */ jsx10("li", { className: RebuyCompleteTheLook_default.productItem, children: /* @__PURE__ */ jsx10(
+      ProductCard,
+      {
+        addToCartBtnText,
+        addToCartCallback,
+        isHydrogenReact: props.isHydrogenReact,
+        product,
+        productCardTitleLevel: getTitleLevel(customTitleLevel, true)
+      }
+    ) }, product.id)) })
+  ] });
+};
+
+// src/widgets/RebuyDynamicBundleProducts/RebuyDynamicBundleProducts.tsx
+import { useCallback, useEffect as useEffect4, useState as useState5 } from "react";
+
+// src/utils/convertToRebuyProduct.tsx
+var convertToRebuyProduct = (isHydrogenReact, product) => {
+  const mainProductVariants = isHydrogenReact ? product?.variants?.nodes?.map((variant) => {
+    return {
+      ...variant
+    };
+  }) || [] : product?.adjacentVariants.map((variant) => {
+    return {
+      availableForSale: variant.availableForSale,
+      compareAtPriceV2: {
+        amount: variant.compareAtPrice?.amount || "",
+        currencyCode: variant.compareAtPrice?.currencyCode || "USD"
+      },
+      id: variant.id,
+      image: {
+        altText: variant.image?.altText || "",
+        height: variant.image?.height || 100,
+        id: variant.image?.id || "",
+        url: variant.image?.url || "",
+        width: variant.image?.width || 100
+      },
+      priceV2: {
+        amount: variant.price.amount || "",
+        currencyCode: variant.price.currencyCode || "USD"
+      },
+      product: {
+        handle: product.handle,
+        id: product.id,
+        title: product.title,
+        vendor: product.vendor
+      },
+      selectedOptions: variant.selectedOptions,
+      sku: variant.sku || "",
+      title: variant.title || ""
+    };
+  }) || [];
+  return isHydrogenReact ? {
+    collections: {
+      nodes: product?.collections.nodes.map((collection) => {
+        return {
+          handle: collection.handle
+        };
+      }) || []
+    },
+    compareAtPriceRange: {
+      maxVariantCompareAtPrice: null,
+      minVariantCompareAtPrice: null
+    },
+    description: product?.description || "",
+    descriptionHtml: product?.descriptionHtml || "",
+    featuredImage: {
+      altText: product?.featuredImage?.altText || "",
+      height: product?.featuredImage?.height || 100,
+      id: product?.featuredImage?.id || "",
+      url: product?.featuredImage?.url || "",
+      width: product?.featuredImage?.width || 100
+    },
+    handle: product?.handle || "",
+    id: product?.id || "",
+    images: [{ altText: "", height: 100, id: "", url: "", width: 100 }],
+    media: [],
+    metafields: [],
+    options: [],
+    priceRange: product?.priceRange || {
+      maxVariantPrice: { amount: "0", currencyCode: "USD" },
+      minVariantPrice: { amount: "0", currencyCode: "USD" }
+    },
+    selected: true,
+    selectedOptions: product?.selectedVariant?.selectedOptions?.reduce((acc, option) => {
+      return { ...acc, [option.name]: option.value };
+    }, {}) || {},
+    selectedSellingPlan: {},
+    selectedSellingPlanAllocation: {},
+    selectedVariant: {
+      availableForSale: product?.selectedVariant?.availableForSale || false,
+      compareAtPriceV2: {
+        amount: product?.selectedVariant?.compareAtPrice?.amount || "",
+        currencyCode: product?.selectedVariant?.compareAtPrice?.currencyCode || "USD"
+      },
+      id: product?.selectedVariant?.id || "",
+      image: {
+        altText: product?.selectedVariant?.image?.altText || "",
+        height: product?.selectedVariant?.image?.height || 100,
+        id: product?.selectedVariant?.image?.id || "",
+        url: product?.selectedVariant?.image?.url || "",
+        width: product?.selectedVariant?.image?.width || 100
+      },
+      priceV2: {
+        amount: product?.selectedVariant?.price.amount || "",
+        currencyCode: product?.selectedVariant?.price.currencyCode || "USD"
+      },
+      product: {
+        handle: product?.handle || "",
+        id: product?.id || "",
+        title: product?.title || "",
+        vendor: product?.vendor || ""
+      },
+      selectedOptions: product?.selectedVariant?.selectedOptions || [],
+      sku: product?.selectedVariant?.sku || "",
+      title: product?.selectedVariant?.title || ""
+    },
+    sellingPlanGroups: [],
+    seo: {
+      description: product?.seo?.description || "",
+      title: product?.seo?.title || ""
+    },
+    title: product?.title || "",
+    variants: {
+      nodes: mainProductVariants
+    },
+    vendor: product?.vendor || ""
+  } : {
+    collections: {
+      nodes: []
+    },
+    compareAtPriceRange: {
+      maxVariantCompareAtPrice: null,
+      minVariantCompareAtPrice: null
+    },
+    description: product?.description || "",
+    descriptionHtml: product?.descriptionHtml || "",
+    featuredImage: {
+      altText: product?.selectedOrFirstAvailableVariant?.image?.altText || "",
+      height: product?.selectedOrFirstAvailableVariant?.image?.height || 100,
+      id: product?.selectedOrFirstAvailableVariant?.image?.id || "",
+      url: product?.selectedOrFirstAvailableVariant?.image?.url || "",
+      width: product?.selectedOrFirstAvailableVariant?.image?.width || 100
+    },
+    handle: product?.handle || "",
+    id: product?.id || "",
+    images: [
+      {
+        altText: product?.selectedOrFirstAvailableVariant?.image?.altText || "",
+        height: product?.selectedOrFirstAvailableVariant?.image?.height || 100,
+        id: product?.selectedOrFirstAvailableVariant?.image?.id || "",
+        url: product?.selectedOrFirstAvailableVariant?.image?.url || "",
+        width: product?.selectedOrFirstAvailableVariant?.image?.width || 100
+      }
+    ],
+    media: [],
+    metafields: [],
+    options: [],
+    priceRange: product?.priceRange || {
+      maxVariantPrice: { amount: "0", currencyCode: "USD" },
+      minVariantPrice: { amount: "0", currencyCode: "USD" }
+    },
+    selected: true,
+    selectedOptions: product?.selectedOrFirstAvailableVariant?.selectedOptions?.reduce((acc, option) => {
+      return { ...acc, [option.name]: option.value };
+    }, {}) || {},
+    selectedSellingPlan: {},
+    selectedSellingPlanAllocation: {},
+    selectedVariant: {
+      availableForSale: product?.selectedOrFirstAvailableVariant?.availableForSale || false,
+      compareAtPriceV2: {
+        amount: product?.selectedOrFirstAvailableVariant?.compareAtPrice?.amount || "",
+        currencyCode: product?.selectedOrFirstAvailableVariant?.compareAtPrice?.currencyCode || "USD"
+      },
+      id: product?.selectedOrFirstAvailableVariant?.id || "",
+      image: {
+        altText: product?.selectedOrFirstAvailableVariant?.image?.altText || "",
+        height: product?.selectedOrFirstAvailableVariant?.image?.height || 100,
+        id: product?.selectedOrFirstAvailableVariant?.image?.id || "",
+        url: product?.selectedOrFirstAvailableVariant?.image?.url || "",
+        width: product?.selectedOrFirstAvailableVariant?.image?.width || 100
+      },
+      priceV2: {
+        amount: product?.selectedOrFirstAvailableVariant?.price.amount || "",
+        currencyCode: product?.selectedOrFirstAvailableVariant?.price.currencyCode || "USD"
+      },
+      product: {
+        handle: product?.handle || "",
+        id: product?.id || "",
+        title: product?.title || "",
+        vendor: product?.vendor || ""
+      },
+      selectedOptions: product?.selectedOrFirstAvailableVariant?.selectedOptions || [],
+      sku: product?.selectedOrFirstAvailableVariant?.sku || "",
+      title: product?.selectedOrFirstAvailableVariant?.title || ""
+    },
+    sellingPlanGroups: [],
+    seo: {
+      description: null,
+      title: null
+    },
+    title: product?.title || "",
+    variants: {
+      nodes: [
+        {
+          availableForSale: product?.selectedOrFirstAvailableVariant?.availableForSale || false,
+          compareAtPriceV2: {
+            amount: product?.selectedOrFirstAvailableVariant?.compareAtPrice?.amount || "",
+            currencyCode: product?.selectedOrFirstAvailableVariant?.compareAtPrice?.currencyCode || "USD"
+          },
+          id: product?.selectedOrFirstAvailableVariant?.id || "",
+          image: {
+            altText: product?.selectedOrFirstAvailableVariant?.image?.altText || "",
+            height: product?.selectedOrFirstAvailableVariant?.image?.height || 100,
+            id: product?.selectedOrFirstAvailableVariant?.image?.id || "",
+            url: product?.selectedOrFirstAvailableVariant?.image?.url || "",
+            width: product?.selectedOrFirstAvailableVariant?.image?.width || 100
+          },
+          priceV2: {
+            amount: product?.selectedOrFirstAvailableVariant?.price.amount || "",
+            currencyCode: product?.selectedOrFirstAvailableVariant?.price.currencyCode || "USD"
+          },
+          product: {
+            handle: product?.handle || "",
+            id: product?.id || "",
+            title: product?.title || "",
+            vendor: product?.vendor || ""
+          },
+          selectedOptions: product?.selectedOrFirstAvailableVariant?.selectedOptions || [],
+          sku: product?.selectedOrFirstAvailableVariant?.sku || "",
+          title: product?.selectedOrFirstAvailableVariant?.title || ""
+        },
+        ...mainProductVariants
+      ]
+    },
+    vendor: product?.vendor || ""
+  };
+};
+
+// src/widgets/RebuyDynamicBundleProducts/BundleImages.tsx
+import { Link as Link2 } from "@remix-run/react";
+import { Image as Image2 } from "@shopify/hydrogen";
+import { Fragment as Fragment3 } from "react";
+
+// src/widgets/RebuyDynamicBundleProducts/RebuyDynamicBundleProducts.module.css
+var RebuyDynamicBundleProducts_default = {
+  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",
+  "fade-in": "RebuyDynamicBundleProducts_fade-in",
+  bundleImageDelimiter: "RebuyDynamicBundleProducts_bundleImageDelimiter",
+  compareAtPrice: "RebuyDynamicBundleProducts_compareAtPrice"
+};
+
+// src/widgets/RebuyDynamicBundleProducts/BundleImages.tsx
+import { Fragment as Fragment4, jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+var BundleImages = ({ products }) => {
+  const selected = products.filter((product) => product.selected);
+  return /* @__PURE__ */ jsx11("ul", { className: RebuyDynamicBundleProducts_default.bundleImages, children: products.map((product, index) => {
+    const image = product.selectedVariant?.image;
+    const productImage = image ? /* @__PURE__ */ jsx11(
+      Image2,
+      {
+        alt: image.altText || `Picture of ${product.title}`,
+        className: RebuyDynamicBundleProducts_default.bundleImage,
+        data: image,
+        height: 80,
+        title: product.title,
+        width: 80
+      }
+    ) : (
+      // No image defined
+      product.title
+    );
+    const showDelimiter = selected[0]?.id !== product.id;
+    return /* @__PURE__ */ jsx11(Fragment3, { children: product.selected && /* @__PURE__ */ jsxs6(Fragment4, { children: [
+      showDelimiter && /* @__PURE__ */ jsx11("li", { className: RebuyDynamicBundleProducts_default.bundleImageDelimiter, children: /* @__PURE__ */ jsx11("span", { children: "+" }) }),
+      /* @__PURE__ */ jsx11("li", { className: "flex items-center", children: product.default ? (
+        // Already on product page
+        productImage
+      ) : (
+        // Link to product
+        /* @__PURE__ */ jsx11(Link2, { title: product.title, to: `/products/${product.handle}`, children: productImage })
+      ) })
+    ] }) }, product.id + "-BundleImages-" + index);
+  }) });
+};
+
+// src/widgets/RebuyDynamicBundleProducts/Select.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+var Select = ({ onSelectVariant, product }) => {
+  const getOptionsLabel = (product2) => {
+    const options = product2.variants.nodes[0].selectedOptions;
+    const optionsFromKeys = options ? Object.keys(options[0]) : [];
+    const optionsFromValues = options ? options.map((option) => option.name) : [];
+    const useValues = optionsFromKeys.every((key) => ["name", "value"].includes(key));
+    return (useValues ? optionsFromValues : optionsFromKeys).join(" / ");
+  };
+  return product && /* @__PURE__ */ jsx12(
+    "select",
+    {
+      "aria-label": "select variant",
+      className: RebuyDynamicBundleProducts_default.select,
+      onChange: (e) => onSelectVariant(product, e.target.value),
+      value: product.selectedVariant.id,
+      children: /* @__PURE__ */ jsx12("optgroup", { label: getOptionsLabel(product), children: product.variants.nodes.map(({ id, title }) => /* @__PURE__ */ jsx12("option", { value: id, children: title }, id + "-BundleVariant")) })
+    }
+  );
+};
+
+// src/widgets/RebuyDynamicBundleProducts/BundleSelection.tsx
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+var BundleSelection = ({ onSelectVariant, onToggleBundleItem, products }) => {
+  return /* @__PURE__ */ jsx13("ul", { children: products.map((product, index) => {
+    const { availableForSale } = product.selectedVariant;
+    const isOutOfStock = !availableForSale;
+    return /* @__PURE__ */ jsx13(
+      "li",
+      {
+        className: `${RebuyDynamicBundleProducts_default.bundleItemRowContainer} ${!product.selected && RebuyDynamicBundleProducts_default.unselected}`,
+        children: /* @__PURE__ */ jsxs7("div", { className: RebuyDynamicBundleProducts_default.bundleItemRow, children: [
+          /* @__PURE__ */ jsx13(
+            "input",
+            {
+              checked: product.selected && availableForSale,
+              className: "mt-1 rounded-sm accent-black cursor-pointer",
+              disabled: isOutOfStock,
+              id: `${product.id}-toggle`,
+              onChange: () => onToggleBundleItem(product),
+              type: "checkbox",
+              value: product.id
+            }
+          ),
+          /* @__PURE__ */ jsxs7("div", { className: RebuyDynamicBundleProducts_default.bundleItemInput, children: [
+            /* @__PURE__ */ jsxs7("label", { className: RebuyDynamicBundleProducts_default.bundleItemLabel, htmlFor: `${product.id}-toggle`, children: [
+              isOutOfStock && /* @__PURE__ */ jsx13("b", { children: "SOLD OUT" }),
+              product.default && /* @__PURE__ */ jsx13("b", { children: "This item:" }),
+              product.title,
+              /* @__PURE__ */ jsx13(RebuyProductPrice, { selectedVariant: product.selectedVariant })
+            ] }),
+            product.variants.nodes.length > 1 && /* @__PURE__ */ jsx13(Select, { onSelectVariant, product })
+          ] })
+        ] })
+      },
+      product.id + "-BundleSelection" + index
+    );
+  }) });
+};
+
+// src/widgets/RebuyDynamicBundleProducts/BundlePrice.tsx
+import { Money as Money4 } from "@shopify/hydrogen";
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+var BundlePrice = ({ products }) => {
+  const isDisabled = products.filter((product) => product.selected).length < 1;
+  const totalBundlePrice = () => {
+    let total = 0;
+    let currencyCode = "USD";
+    for (const product of products) {
+      if (product.selected && product.selectedVariant) {
+        const { priceV2: price2 } = product.selectedVariant;
+        total += Number(price2?.amount);
+        currencyCode = price2?.currencyCode || "USD";
+      }
+    }
+    return {
+      amount: String(total),
+      currencyCode
+    };
+  };
+  const totalBundleCompareAtPrice = () => {
+    let compareAtTotal = 0;
+    let currencyCode = "USD";
+    for (const product of products) {
+      if (product.selected && product.selectedVariant) {
+        const { compareAtPriceV2: compareAtPrice2, priceV2: price2 } = product.selectedVariant;
+        currencyCode = price2?.currencyCode || "USD";
+        compareAtTotal += Number((compareAtPrice2 || price2)?.amount);
+      }
+    }
+    return {
+      amount: String(compareAtTotal),
+      currencyCode
+    };
+  };
+  const isDiscounted = (price2, compareAtPrice2) => Number(compareAtPrice2?.amount) > Number(price2?.amount);
+  const price = totalBundlePrice();
+  const compareAtPrice = totalBundleCompareAtPrice();
+  const CompareAtPrice = ({ data: compareAtPrice2 }) => {
+    return compareAtPrice2 && /* @__PURE__ */ jsx14(Money4, { as: "span", className: RebuyDynamicBundleProducts_default.compareAtPrice, data: compareAtPrice2, withoutTrailingZeros: true });
+  };
+  return products.length > 0 && /* @__PURE__ */ jsx14("div", { className: "flex items-center flex-col", children: !isDisabled && /* @__PURE__ */ jsxs8("p", { className: "flex items-center gap-2 mb-2", children: [
+    /* @__PURE__ */ jsx14("span", { children: "Total Price:" }),
+    /* @__PURE__ */ jsx14(Money4, { as: "span", data: price, withoutTrailingZeros: true }),
+    isDiscounted(price, compareAtPrice) && /* @__PURE__ */ jsx14(CompareAtPrice, { data: compareAtPrice })
+  ] }) });
+};
+
+// src/widgets/RebuyDynamicBundleProducts/RebuyDynamicBundleProducts.tsx
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+var RebuyDynamicBundleProducts = (props) => {
+  const {
+    addToCartBtnText = "Add to cart",
+    addToCartCallback,
+    customTitle = `These pair with ${props.product?.title}`,
+    customTitleLevel = "h2",
+    customTitleStyle,
+    isHydrogenReact,
+    product,
+    products = []
+  } = props;
+  const [bundleProducts, setBundleProducts] = useState5([]);
+  useEffect4(() => {
+    const mainProduct = convertToRebuyProduct(isHydrogenReact || false, product);
+    const formattedProducts = products.map((product2) => {
+      return {
+        ...product2,
+        selected: true,
+        selectedVariant: product2.variants.nodes[0]
+      };
+    });
+    setBundleProducts([mainProduct, ...formattedProducts]);
+  }, [product, products, isHydrogenReact]);
+  const onToggleBundleItem = useCallback(
+    (product2) => {
+      product2.selected = !product2.selected;
+      setBundleProducts([...bundleProducts]);
+    },
+    [bundleProducts]
+  );
+  const onSelectVariant = useCallback(
+    (product2, variant_id) => {
+      const variant = product2.variants.nodes.find(({ id }) => id === variant_id);
+      if (variant) {
+        product2.selectedVariant = variant;
+        product2.selected = variant.availableForSale || false;
+        setBundleProducts([...bundleProducts]);
+      }
+    },
+    [bundleProducts]
+  );
+  if (products.length === 0) {
+    console.log("RebuyDynamicBundleProducts: No products found");
+    return null;
+  }
+  return /* @__PURE__ */ jsxs9("section", { className: RebuyDynamicBundleProducts_default.container, children: [
+    /* @__PURE__ */ jsx15(Title, { level: getTitleLevel(customTitleLevel), style: customTitleStyle, text: customTitle }),
+    /* @__PURE__ */ jsxs9("div", { className: RebuyDynamicBundleProducts_default.bundleContainer, children: [
+      /* @__PURE__ */ jsx15(BundleImages, { products: bundleProducts }),
+      /* @__PURE__ */ jsx15(BundlePrice, { products: bundleProducts }),
+      /* @__PURE__ */ jsx15("div", { className: RebuyDynamicBundleProducts_default.addCartBtnContainer, children: /* @__PURE__ */ jsx15(
+        AddToCartBtn,
+        {
+          addToCartBtnText,
+          addToCartCallback,
+          disabled: bundleProducts.filter((product2) => product2.selected).length === 0,
+          isHydrogenReact,
+          selectedVariants: bundleProducts.filter((product2) => product2.selected).map((product2) => {
+            return product2.selectedVariant;
+          })
+        }
+      ) }),
+      /* @__PURE__ */ jsx15(
+        BundleSelection,
+        {
+          onSelectVariant,
+          onToggleBundleItem,
+          products: bundleProducts
+        }
+      )
+    ] })
+  ] });
+};
+
+// src/widgets/RebuyProductAddOns/RebuyProductAddOns.tsx
+import { Money as Money5 } from "@shopify/hydrogen-react";
+import { useCallback as useCallback2, useEffect as useEffect5, useState as useState6 } from "react";
+
+// src/widgets/RebuyProductAddOns/RebuyProductAddOnCard.tsx
+import { Link as Link3 } from "@remix-run/react";
+import { Image as Image3 } from "@shopify/hydrogen";
+
+// src/widgets/RebuyProductAddOns/RebuyProductAddOns.module.css
+var RebuyProductAddOns_default = {
+  container: "RebuyProductAddOns_container",
+  productAddOnsList: "RebuyProductAddOns_productAddOnsList",
+  addOnCard: "RebuyProductAddOns_addOnCard",
+  addOnCardContent: "RebuyProductAddOns_addOnCardContent",
+  addOnCardInput: "RebuyProductAddOns_addOnCardInput",
+  addOnCardContentImage: "RebuyProductAddOns_addOnCardContentImage",
+  addOnCardOutOfStock: "RebuyProductAddOns_addOnCardOutOfStock",
+  addOnCardTextContent: "RebuyProductAddOns_addOnCardTextContent",
+  addOnCardLearnMore: "RebuyProductAddOns_addOnCardLearnMore",
+  addCartBtnContainer: "RebuyProductAddOns_addCartBtnContainer",
+  moneyContainer: "RebuyProductAddOns_moneyContainer"
+};
+
+// src/widgets/RebuyProductAddOns/RebuyProductAddOnCard.tsx
+import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+var RebuyProductAddOnCard = ({
+  handleChange,
+  learnMoreText,
+  outOfStockText,
+  product,
+  titleLevel
+}) => {
+  const { availableForSale, image } = product.selectedVariant || {};
+  return /* @__PURE__ */ jsx16("label", { className: RebuyProductAddOns_default.addOnCard, htmlFor: product.id, children: /* @__PURE__ */ jsxs10("div", { className: RebuyProductAddOns_default.addOnCardContent, children: [
+    /* @__PURE__ */ jsx16(
+      "input",
+      {
+        checked: Boolean(product.selected),
+        className: RebuyProductAddOns_default.addOnCardInput,
+        disabled: !product.variants.nodes[0].availableForSale,
+        id: product.id,
+        name: product.title,
+        onChange: (event) => handleChange(event, product),
+        type: "checkbox",
+        value: ""
+      }
+    ),
+    /* @__PURE__ */ jsx16("div", { className: RebuyProductAddOns_default.addOnCardContentImage, children: image && /* @__PURE__ */ jsx16(
+      Image3,
+      {
+        alt: image.altText || `Picture of ${product.title}`,
+        data: image,
+        height: 150,
+        width: 300
+      }
+    ) }),
+    /* @__PURE__ */ jsxs10("div", { className: RebuyProductAddOns_default.addOnCardTextContent, children: [
+      !availableForSale && /* @__PURE__ */ jsx16("p", { className: RebuyProductAddOns_default.addOnCardOutOfStock, children: outOfStockText }),
+      /* @__PURE__ */ jsx16(Title, { level: titleLevel, text: product.title }),
+      /* @__PURE__ */ jsx16(RebuyProductPrice, { selectedVariant: product.selectedVariant }),
+      /* @__PURE__ */ jsx16(Link3, { className: RebuyProductAddOns_default.addOnCardLearnMore, to: `/products/${product.handle}`, children: learnMoreText })
+    ] })
+  ] }) });
+};
+
+// src/widgets/RebuyProductAddOns/RebuyProductAddOns.tsx
+import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+var RebuyProductAddOns = (props) => {
+  const {
+    addToCartCallback,
+    customTitle = `These pair with ${props.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}: `
+  } = props;
+  const [addedItems, setAddedItems] = useState6(products);
+  const [subtotalWithProduct, setSubtotalWithProduct] = useState6();
+  const [subtotalWithOutProduct, setSubtotalWithOutProduct] = useState6();
+  useEffect5(() => {
+    let initialTotal = 0;
+    let currencyCode = "USD";
+    products.map((product2) => {
+      product2.selectedVariant = product2.variants.nodes[0];
+      product2.selected = true;
+      if (product2.selectedVariant?.priceV2) {
+        initialTotal += Number(product2.selectedVariant.priceV2.amount);
+        currencyCode = product2.selectedVariant.priceV2.currencyCode || "USD";
+      }
+    });
+    setSubtotalWithProduct({
+      amount: String(initialTotal),
+      currencyCode
+    });
+    setSubtotalWithOutProduct({
+      amount: String(
+        initialTotal - Number(
+          isHydrogenReact ? product?.selectedVariant?.price.amount : product?.selectedOrFirstAvailableVariant?.price.amount
+        )
+      ),
+      currencyCode
+    });
+    setAddedItems(products);
+    if (includeMainProduct) {
+      setAddedItems([convertToRebuyProduct(isHydrogenReact || false, product), ...products]);
+    } else {
+      setAddedItems(products);
+    }
+  }, [products, product, isHydrogenReact, includeMainProduct]);
+  const handleChange = useCallback2(
+    (event, product2) => {
+      const newProducts = [...products];
+      const productIndex = newProducts.findIndex((p) => p.id === product2.id);
+      if (productIndex !== -1) {
+        newProducts[productIndex] = {
+          ...newProducts[productIndex],
+          selected: event.target.checked
+        };
+        product2.selected = event.target.checked;
+        if (event.target.checked) {
+          setAddedItems((prev) => [...prev, product2]);
+        } else {
+          setAddedItems((prev) => prev.filter((item) => item.id !== product2.id));
+        }
+      }
+    },
+    [products]
+  );
+  useEffect5(() => {
+    let total = 0;
+    let currencyCode = "USD";
+    addedItems.forEach((item) => {
+      if (item.selected && item.selectedVariant?.priceV2) {
+        total += Number(item.selectedVariant.priceV2.amount);
+        currencyCode = item.selectedVariant.priceV2.currencyCode || "USD";
+      }
+    });
+    setSubtotalWithProduct({
+      amount: String(total),
+      currencyCode
+    });
+    setSubtotalWithOutProduct({
+      amount: String(
+        total - Number(
+          isHydrogenReact ? product?.selectedVariant?.price.amount : product?.selectedOrFirstAvailableVariant?.price.amount
+        )
+      ),
+      currencyCode
+    });
+  }, [addedItems, product, isHydrogenReact]);
+  if (products.length === 0) {
+    console.log("RebuyProductAddOns: No products found");
+    return null;
+  }
+  return /* @__PURE__ */ jsxs11("div", { className: RebuyProductAddOns_default.container, children: [
+    /* @__PURE__ */ jsx17(Title, { level: getTitleLevel(customTitleLevel), style: customTitleStyle, text: customTitle }),
+    /* @__PURE__ */ jsx17("ul", { className: RebuyProductAddOns_default.productAddOnsList, children: products.map((product2) => /* @__PURE__ */ jsx17("li", { children: /* @__PURE__ */ jsx17(
+      RebuyProductAddOnCard,
+      {
+        handleChange,
+        learnMoreText,
+        outOfStockText,
+        product: product2,
+        titleLevel: getTitleLevel(customTitleLevel, true)
+      }
+    ) }, product2.id)) }),
+    /* @__PURE__ */ jsxs11("div", { className: RebuyProductAddOns_default.productAddOnsFooter, children: [
+      /* @__PURE__ */ jsxs11("div", { className: RebuyProductAddOns_default.moneyContainer, children: [
+        subtotalText,
+        subtotalWithOutProduct && /* @__PURE__ */ jsx17(Money5, { data: subtotalWithOutProduct, withoutTrailingZeros: true })
+      ] }),
+      includeMainProduct && /* @__PURE__ */ jsxs11("div", { className: RebuyProductAddOns_default.moneyContainer, children: [
+        withProductText,
+        subtotalWithProduct && /* @__PURE__ */ jsx17(Money5, { data: subtotalWithProduct, withoutTrailingZeros: true })
+      ] }),
+      /* @__PURE__ */ jsx17("div", { className: RebuyProductAddOns_default.addCartBtnContainer, children: includeMainProduct ? /* @__PURE__ */ jsx17(
+        AddToCartBtn,
+        {
+          addToCartBtnText,
+          addToCartCallback,
+          disabled: addedItems.length === 0,
+          isHydrogenReact,
+          moneyData: subtotalWithProduct,
+          selectedVariants: addedItems.map((item) => item.selectedVariant)
+        }
+      ) : /* @__PURE__ */ jsx17(
+        AddToCartBtn,
+        {
+          addToCartBtnText,
+          addToCartCallback,
+          disabled: addedItems.length === 0,
+          isHydrogenReact,
+          moneyData: subtotalWithOutProduct,
+          selectedVariants: addedItems.map((item) => item.selectedVariant)
+        }
+      ) })
+    ] })
+  ] });
+};
+
+// src/widgets/RebuyProductRecommendations/RebuyProductRecommendations.module.css
+var RebuyProductRecommendations_default = {
+  container: "RebuyProductRecommendations_container",
+  productGrid: "RebuyProductRecommendations_productGrid"
+};
+
+// src/widgets/RebuyProductRecommendations/RebuyProductRecommendations.tsx
+import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+var RebuyProductRecommendations = (props) => {
+  const {
+    addToCartBtnText = "Add to cart",
+    addToCartCallback,
+    customTitle = `These pair with ${props.product?.title}`,
+    customTitleLevel = "h2",
+    customTitleStyle,
+    products = []
+  } = props;
+  if (products.length === 0) {
+    console.log("RebuyProductRecommendations: No products found");
+    return null;
+  }
+  return /* @__PURE__ */ jsxs12("section", { className: RebuyProductRecommendations_default.container, children: [
+    /* @__PURE__ */ jsx18(Title, { level: getTitleLevel(customTitleLevel), style: customTitleStyle, text: customTitle }),
+    /* @__PURE__ */ jsx18("ul", { className: RebuyProductRecommendations_default.productGrid, children: products.map((product) => /* @__PURE__ */ jsx18("li", { className: RebuyProductRecommendations_default.productItem, children: /* @__PURE__ */ jsx18(
+      ProductCard,
+      {
+        addToCartBtnText,
+        addToCartCallback,
+        isHydrogenReact: props.isHydrogenReact,
+        product,
+        productCardTitleLevel: getTitleLevel(customTitleLevel, true)
+      }
+    ) }, product.id)) })
+  ] });
+};
+export {
+  RebuyCompleteTheLook,
+  RebuyDynamicBundleProducts,
+  RebuyHydrogenContextProvider,
+  RebuyHydrogenReactContextProvider,
+  RebuyProductAddOns,
+  RebuyProductRecommendations,
+  RebuyWidgetContainer
+};
+//# sourceMappingURL=index.mjs.map