@rebuy/rebuy-hydrogen 2.0.0 → 2.2.0

package/RebuyCompleteTheLook.client.jsx

@@ -0,0 +1,188 @@
+import {
+    AddToCartButton,
+    Image,
+    Link,
+    Money,
+    ProductOptionsProvider,
+} from '@shopify/hydrogen';
+import clsx from 'clsx';
+import { useState } from 'react';
+import { Section, Text } from '~/components';
+import { Button } from '~/components/elements';
+
+const isDiscounted = (price, compareAtPrice) =>
+    Number(compareAtPrice?.amount) > Number(price?.amount);
+
+const CompareAtPrice = ({ data: compareAtPrice, className }) => {
+    const styles = clsx('strike', className);
+
+    return (
+        <Money
+            withoutTrailingZeros
+            data={compareAtPrice}
+            as="span"
+            className={styles}
+        />
+    );
+};
+
+const AddToCartMarkup = ({
+    product,
+    selectedVariant = product.variants.nodes[0],
+}) => {
+    const isOutOfStock = !selectedVariant.availableForSale;
+
+    return (
+        <AddToCartButton
+            disabled={isOutOfStock}
+            variantId={selectedVariant?.id}
+            quantity={1}
+            accessibleAddingToCartLabel="Adding item to your cart"
+            type="button"
+            attributes={[
+                { key: '_source', value: 'Rebuy' },
+                { key: '_attribution', value: 'Rebuy Product Recommendations' },
+            ]}
+        >
+            <Button
+                width="full"
+                variant={isOutOfStock ? 'secondary' : 'primary'}
+                as="span"
+                className="px-0"
+            >
+                {isOutOfStock ? 'Out of stock' : 'Add'}
+            </Button>
+        </AddToCartButton>
+    );
+};
+
+const RebuyProductPrice = ({ selectedVariant = {} }) => {
+    const { priceV2: price, compareAtPriceV2: compareAtPrice } =
+        selectedVariant;
+
+    return (
+        price && (
+            <div className="gap-4">
+                <Text className="flex gap-2">
+                    <Money withoutTrailingZeros data={price} />
+                    {isDiscounted(price, compareAtPrice) && (
+                        <CompareAtPrice
+                            className={'opacity-50'}
+                            data={compareAtPrice}
+                        />
+                    )}
+                </Text>
+            </div>
+        )
+    );
+};
+
+const VariantSelector = ({ product, handleSelectedVariant }) => {
+    return (
+        product?.variants.nodes.length > 1 && (
+            <div className="">
+                <select
+                    className="w-full py-1 rounded"
+                    name=""
+                    onChange={(e) =>
+                        handleSelectedVariant(product, e.target.value)
+                    }
+                >
+                    <optgroup label={getOptionsLabel(product)}>
+                        {product.variants.nodes.map(({ id, title }) => (
+                            <option key={id + '-variant'} value={id}>
+                                {title}
+                            </option>
+                        ))}
+                    </optgroup>
+                </select>
+            </div>
+        )
+    );
+};
+
+const getOptionsLabel = (product) => {
+    const options = product.variants.nodes[0].selectedOptions;
+    const optionsFromKeys = Object.keys(options[0]);
+    const optionsFromValues = options.map((option) => option.name);
+    const useValues = optionsFromKeys.every((key) =>
+        ['name', 'value'].includes(key)
+    );
+
+    // Return delimited label for available option(s) e.g. Color / Size, Scent, etc
+    return (useValues ? optionsFromValues : optionsFromKeys).join(' / ');
+};
+
+const RebuyProductCard = ({ product }) => {
+    const [selectedVariant, setSelectedVariant] = useState(
+        product.variants.nodes[0]
+    );
+    const { image } = selectedVariant;
+    const handleSelectedVariant = (product, variant_id) => {
+        const updatedVariant = product.variants.nodes.find(
+            (variant) => variant.id === variant_id
+        );
+
+        setSelectedVariant(updatedVariant);
+    };
+
+    return (
+        <div className="grid grid-cols-2 grid-rows-1 gap-6">
+            <Link to={`/products/${product.handle}`}>
+                {image && (
+                    <Image
+                        className="w-full object-cover fadeIn"
+                        data={image}
+                        alt={image.altText || `Picture of ${product.title}`}
+                    />
+                )}
+            </Link>
+            <div className="grid gap-1 items-start">
+                <Link to={`/products/${product.handle}`}>
+                    <Text>{product.title}</Text>
+                </Link>
+                <RebuyProductPrice selectedVariant={selectedVariant} />
+                <VariantSelector
+                    product={product}
+                    handleSelectedVariant={handleSelectedVariant}
+                />
+                <AddToCartMarkup
+                    product={product}
+                    selectedVariant={selectedVariant}
+                />
+            </div>
+        </div>
+    );
+};
+
+export const RebuyCompleteTheLook = ({
+    product = {},
+    products = [],
+    // eslint-disable-next-line no-unused-vars
+    metadata = {},
+    title = `These pair with ${product.title}`,
+    className = '',
+}) => {
+    const styles = clsx('', className);
+
+    return (
+        products.length > 0 && (
+            <Section heading={title} padding="n" className={styles}>
+                <ul className="grid gap-8">
+                    {products.map((product) => (
+                        <li key={product.id}>
+                            <ProductOptionsProvider
+                                data={product}
+                                initialVariantId={product.variants.nodes[0].id}
+                            >
+                                <RebuyProductCard product={product} />
+                            </ProductOptionsProvider>
+                        </li>
+                    ))}
+                </ul>
+            </Section>
+        )
+    );
+};
+
+export default RebuyCompleteTheLook;

package/RebuyDynamicBundleProducts.client.jsx

@@ -0,0 +1,415 @@
+import {
+    Image,
+    Link,
+    Money,
+    useCart,
+    useProductOptions,
+} from '@shopify/hydrogen';
+import clsx from 'clsx';
+import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
+import { Heading, Text } from '~/components';
+import { Button } from '~/components/elements';
+
+const isDiscounted = (price, compareAtPrice) =>
+    Number(compareAtPrice?.amount) > Number(price?.amount);
+
+const CompareAtPrice = ({ data: compareAtPrice, className }) => {
+    const styles = clsx('strike', className);
+
+    return (
+        <Money
+            withoutTrailingZeros
+            data={compareAtPrice}
+            as="span"
+            className={styles}
+        />
+    );
+};
+
+const RebuyProductPrice = ({ selectedVariant = {} }) => {
+    const { priceV2: price, compareAtPriceV2: compareAtPrice } =
+        selectedVariant;
+
+    return (
+        price && (
+            <div className="gap-4">
+                <Text className="flex gap-2">
+                    <Money data={price} withoutTrailingZeros as="span" />
+                    {isDiscounted(price, compareAtPrice) && (
+                        <CompareAtPrice
+                            data={compareAtPrice}
+                            className={'opacity-50'}
+                        />
+                    )}
+                </Text>
+            </div>
+        )
+    );
+};
+
+const VariantSelector = ({ product, onSelectVariant, className = '' }) => {
+    const styles = clsx('rounded py-1', className);
+
+    return (
+        product && (
+            <select
+                onChange={(e) => onSelectVariant(product, e.target.value)}
+                aria-label="select variant"
+                className={styles}
+                value={product.selectedVariant.id}
+            >
+                <optgroup label={getOptionsLabel(product)}>
+                    {product.variants.nodes.map(({ id, title }) => (
+                        <option key={id + '-BundleVariant'} value={id}>
+                            {title}
+                        </option>
+                    ))}
+                </optgroup>
+            </select>
+        )
+    );
+};
+
+const getOptionsLabel = (product) => {
+    const options = product.variants.nodes[0].selectedOptions;
+    const optionsFromKeys = Object.keys(options[0]);
+    const optionsFromValues = options.map((option) => option.name);
+    const useValues = optionsFromKeys.every((key) =>
+        ['name', 'value'].includes(key)
+    );
+
+    // Return delimited label for available option(s) e.g. Color / Size, Scent, etc
+    return (useValues ? optionsFromValues : optionsFromKeys).join(' / ');
+};
+
+const AddToCartPriceMarkup = ({ products, addLineItemsToCart }) => {
+    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: price } = product.selectedVariant;
+
+                total += Number(price.amount);
+                currencyCode = price.currencyCode;
+            }
+        }
+
+        return {
+            amount: String(total),
+            currencyCode,
+        };
+    };
+
+    const totalBundleCompareAtPrice = () => {
+        let compareAtTotal = 0;
+        let currencyCode = 'USD';
+
+        for (const product of products) {
+            if (product.selected && product.selectedVariant) {
+                const { priceV2: price, compareAtPriceV2: compareAtPrice } =
+                    product.selectedVariant;
+
+                currencyCode = price.currencyCode;
+                compareAtTotal += Number((compareAtPrice || price).amount);
+            }
+        }
+
+        return {
+            amount: String(compareAtTotal),
+            currencyCode,
+        };
+    };
+
+    const price = totalBundlePrice();
+    const compareAtPrice = totalBundleCompareAtPrice();
+
+    return (
+        products.length > 0 && (
+            <div className="flex items-center flex-col">
+                {!isDisabled && (
+                    <Text className="flex items-center gap-2 mb-2">
+                        <span>Total Price:</span>
+                        <Money data={price} withoutTrailingZeros as="span" />
+                        {isDiscounted(price, compareAtPrice) && (
+                            <CompareAtPrice
+                                data={compareAtPrice}
+                                className={'opacity-50'}
+                            />
+                        )}
+                    </Text>
+                )}
+
+                <Button
+                    as="button"
+                    variant={isDisabled ? 'secondary' : 'primary'}
+                    disabled={isDisabled}
+                    onClick={addLineItemsToCart}
+                >
+                    <Text as="span">
+                        {isDisabled ? 'Create your bundle below' : 'Add to bag'}
+                    </Text>
+                </Button>
+            </div>
+        )
+    );
+};
+
+const BundleImages = ({ products }) => {
+    const selected = products.filter((product) => product.selected);
+
+    return (
+        <ul className="flex flex-nowrap justify-center gap-1 mb-4">
+            {products.map((product, index) => {
+                const image = product.selectedVariant.image;
+                const productImage = image ? (
+                    <Image
+                        className="fadeIn"
+                        data={image}
+                        alt={image.altText || `Picture of ${product.title}`}
+                        title={product.title}
+                        width={80}
+                        height={80}
+                        loaderOptions={{ scale: 2 }}
+                    />
+                ) : (
+                    // No image defined
+                    product.title
+                );
+                // Hide delimiter for first selected item
+                const showDelimiter = selected[0]?.id !== product.id;
+
+                return (
+                    <Fragment key={product.id + '-BundleImages-' + index}>
+                        {product.selected && (
+                            <>
+                                {showDelimiter && (
+                                    <li className="flex items-center">
+                                        <span className="font-semibold">+</span>
+                                    </li>
+                                )}
+                                <li className="flex items-center">
+                                    {product.default ? (
+                                        // Already on product page
+                                        productImage
+                                    ) : (
+                                        // Link to product
+                                        <Link
+                                            to={`/products/${product.handle}`}
+                                            title={product.title}
+                                        >
+                                            {productImage}
+                                        </Link>
+                                    )}
+                                </li>
+                            </>
+                        )}
+                    </Fragment>
+                );
+            })}
+        </ul>
+    );
+};
+
+const BundleSelection = ({ products, onToggleBundleItem, onSelectVariant }) => {
+    return (
+        <ul>
+            {products.map((product, index) => {
+                const bundleItemRowStyle = clsx(
+                    'mb-4',
+                    !product.selected ? 'opacity-50' : ''
+                );
+                const bundleItemLabelStyle = clsx(
+                    'flex flex-row gap-2 mb-1 cursor-pointer'
+                );
+                const { availableForSale } = product.selectedVariant;
+                const isOutOfStock = !availableForSale;
+
+                return (
+                    <li
+                        key={product.id + '-BundleSelection' + index}
+                        className={bundleItemRowStyle}
+                    >
+                        <div className="flex flex-row items-start gap-2">
+                            <input
+                                className="mt-1 rounded-sm accent-black cursor-pointer"
+                                type="checkbox"
+                                value={product.id}
+                                id={`${product.id}-toggle`}
+                                checked={product.selected && availableForSale}
+                                disabled={isOutOfStock}
+                                onChange={() => onToggleBundleItem(product)}
+                            />
+                            <div className="flex-grow">
+                                <label
+                                    htmlFor={`${product.id}-toggle`}
+                                    className={bundleItemLabelStyle}
+                                >
+                                    {isOutOfStock && <b>SOLD OUT</b>}
+                                    {product.default && <b>This item:</b>}
+                                    {product.title}
+
+                                    <RebuyProductPrice
+                                        selectedVariant={
+                                            product.selectedVariant
+                                        }
+                                    />
+                                </label>
+
+                                {product.variants?.nodes.length > 1 && (
+                                    <VariantSelector
+                                        product={product}
+                                        onSelectVariant={onSelectVariant}
+                                        className="w-full"
+                                    />
+                                )}
+                            </div>
+                        </div>
+                    </li>
+                );
+            })}
+        </ul>
+    );
+};
+
+export const RebuyDynamicBundleProducts = ({
+    product = {},
+    products = [],
+    metadata = {},
+    title = 'Frequently purchased together',
+    className = '',
+}) => {
+    // Hooks
+    const { linesAdd } = useCart();
+    const { selectedVariant } = useProductOptions();
+
+    // State
+    const [bundleProducts, setBundleProduct] = useState([]);
+    const language = metadata.widget?.language ?? {};
+    const componentTitle = language?.title || title;
+    const styles = clsx('grid gap-4 py-6 md:py-8 lg:py-12', className);
+
+    const rebuyAttributes = useMemo(() => {
+        return [
+            { key: '_source', value: 'Rebuy' },
+            {
+                key: '_attribution',
+                value: 'Rebuy Dynamic Bundle Recommendations',
+            },
+        ];
+    }, []);
+
+    // Initializiation
+    useEffect(() => {
+        const formatProducts = (products = []) => {
+            for (let product of products) {
+                product.selectedVariant = { ...product.variants.nodes[0] };
+                product.selected = product.selectedVariant.availableForSale;
+            }
+
+            return products;
+        };
+
+        // Flag the main product (PDP)
+        product.default = true;
+
+        setBundleProduct(formatProducts([product, ...products]));
+    }, [product, products]);
+
+    // Mirror selectedVariant from PDP + allow override
+    useEffect(() => {
+        const bundleWithVariantMatch = (currentBundle) => {
+            for (let product of currentBundle) {
+                if (product.default) {
+                    product.selectedVariant = selectedVariant;
+                    product.selected = product.selectedVariant.availableForSale;
+                    break;
+                }
+            }
+
+            return [...currentBundle];
+        };
+
+        setBundleProduct(bundleWithVariantMatch);
+    }, [selectedVariant]);
+
+    const onToggleBundleItem = useCallback(
+        (product) => {
+            product.selected = !product.selected;
+
+            setBundleProduct([...bundleProducts]);
+        },
+        [bundleProducts]
+    );
+
+    const onSelectVariant = useCallback(
+        (product, variantId) => {
+            const variant = product.variants.nodes.find(
+                ({ id }) => id === variantId
+            );
+
+            if (variant) {
+                product.selectedVariant = variant;
+                product.selected = variant.availableForSale;
+
+                setBundleProduct([...bundleProducts]);
+            }
+        },
+        [bundleProducts]
+    );
+
+    const addLineItemsToCart = useCallback(() => {
+        const itemsToAdd = [];
+
+        for (let product of bundleProducts) {
+            if (product.selected && product.selectedVariant) {
+                itemsToAdd.push({
+                    quantity: 1,
+                    merchandiseId: product.selectedVariant.id,
+                    attributes: rebuyAttributes,
+                });
+            }
+        }
+
+        linesAdd(itemsToAdd);
+    }, [bundleProducts, linesAdd, rebuyAttributes]);
+
+    return (
+        bundleProducts.length > 0 && (
+            <div className={styles}>
+                {componentTitle && (
+                    <Heading
+                        size="lead"
+                        width="full"
+                        className="px-6 md:px-8 lg:px-12"
+                    >
+                        {componentTitle}
+                    </Heading>
+                )}
+
+                <div className="px-6 md:px-8 lg:px-12">
+                    <div className="flex flex-col lg:flex-row mb-4">
+                        <BundleImages products={bundleProducts} />
+
+                        <AddToCartPriceMarkup
+                            addLineItemsToCart={addLineItemsToCart}
+                            products={bundleProducts}
+                        />
+                    </div>
+
+                    <BundleSelection
+                        products={bundleProducts}
+                        onToggleBundleItem={onToggleBundleItem}
+                        onSelectVariant={onSelectVariant}
+                    />
+                </div>
+            </div>
+        )
+    );
+};
+
+export default RebuyDynamicBundleProducts;

package/RebuyProductAddOnCard.client.jsx

@@ -0,0 +1,89 @@
+import { Image, Link, Money } from '@shopify/hydrogen';
+import clsx from 'clsx';
+import { Text } from '~/components';
+
+const isDiscounted = (price, compareAtPrice) =>
+    Number(compareAtPrice?.amount) > Number(price?.amount);
+
+const CompareAtPrice = ({ data: compareAtPrice, className }) => {
+    const styles = clsx('strike', className);
+
+    return (
+        <Money
+            withoutTrailingZeros
+            data={compareAtPrice}
+            as="span"
+            className={styles}
+        />
+    );
+};
+
+const RebuyProductPrice = ({ selectedVariant = {} }) => {
+    const { priceV2: price, compareAtPriceV2: compareAtPrice } =
+        selectedVariant;
+
+    return (
+        price && (
+            <div className="gap-4">
+                <Text className="flex gap-2">
+                    <Money data={price} withoutTrailingZeros as="span" />
+                    {isDiscounted(price, compareAtPrice) && (
+                        <CompareAtPrice
+                            data={compareAtPrice}
+                            className={'opacity-50'}
+                        />
+                    )}
+                </Text>
+            </div>
+        )
+    );
+};
+
+export const RebuyProductAddOnCard = ({
+    product = {},
+    selectedVariant = product.variants.nodes[0],
+}) => {
+    if (!selectedVariant) {
+        return null;
+    }
+
+    const { image, availableForSale } = selectedVariant;
+    const isOutOfStock = !availableForSale;
+
+    return (
+        <div className="mb-4 flex">
+            <div className="flex items-center justify-center overflow-hidden mx-auto">
+                {image && (
+                    <Image
+                        className="fadeIn"
+                        data={image}
+                        alt={image.altText || `Picture of ${product.title}`}
+                        width={80}
+                        height={80}
+                        loaderOptions={{ scale: 2 }}
+                    />
+                )}
+                {isOutOfStock && (
+                    <div className="absolute top-3 left-3 rounded text-xs bg-primary/60 text-contrast py-3 px-4">
+                        <Text>Out of stock</Text>
+                    </div>
+                )}
+            </div>
+
+            <div className="grid grid-rows-3 ml-3">
+                <Text className="font-medium">{product.title}</Text>
+
+                <RebuyProductPrice selectedVariant={selectedVariant} />
+
+                <Link
+                    to={`/products/${product?.handle}`}
+                    className="text-xs underline text-primary/50 hover:underline hover:text-primary"
+                >
+                    Learn More
+                </Link>
+            </div>
+        </div>
+    );
+};
+
+export default RebuyProductAddOnCard;

package/RebuyProductAddOns.client.jsx

@@ -0,0 +1,227 @@
+import {
+    Money,
+    ProductOptionsProvider,
+    useCart,
+    useProductOptions,
+} from '@shopify/hydrogen';
+import clsx from 'clsx';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Heading, Text } from '~/components';
+import { Button } from '~/components/elements';
+import { RebuyProductAddOnCard } from './RebuyProductAddOnCard.client';
+
+export const RebuyProductAddOns = ({
+    product = {},
+    products = [],
+    metadata = {},
+    title = `Popular Add-Ons for ${product.title}`,
+    className = '',
+}) => {
+    // Hooks
+    const { linesAdd } = useCart();
+    const { selectedVariant } = useProductOptions();
+
+    // State
+    const [addedItems, setAddedItems] = useState([]);
+    const [totalMoney, _setTotalMoney] = useState(selectedVariant.priceV2);
+    const isOutOfStock = !selectedVariant.availableForSale;
+    const language = metadata.widget?.language ?? {};
+    const componentTitle = language?.title || title;
+    const styles = clsx('grid gap-4 py-6 md:py-8 lg:py-12', className);
+
+    const AddToCartMarkup = ({ items, money, selectedVariant }) => {
+        return (
+            <>
+                <Button
+                    onClick={() => addLineItemsToCart(items, selectedVariant)}
+                    variant="primary"
+                    as="button"
+                >
+                    <Text
+                        as="span"
+                        className="flex items-center justify-center gap-2"
+                    >
+                        <span>Add to bag</span> <span>·</span>{' '}
+                        <Money withoutTrailingZeros data={money} />
+                    </Text>
+                </Button>
+            </>
+        );
+    };
+
+    const addLineItemsToCart = useCallback(
+        (items, selectedVariant) => {
+            const lineItemsToAdd = items.map((item) => ({
+                quantity: 1,
+                merchandiseId: item.variantId,
+                attributes: [
+                    { key: '_source', value: 'Rebuy' },
+                    { key: '_attribution', value: 'Rebuy Product AddOn' },
+                ],
+            }));
+
+            // Add the selected variant of the main product
+            lineItemsToAdd.push({
+                quantity: 1,
+                merchandiseId: selectedVariant.id,
+            });
+
+            // Add additional cart lines
+            linesAdd(lineItemsToAdd);
+
+            return;
+        },
+        [linesAdd]
+    );
+
+    // reference object for line data
+    const refItems = useMemo(() => {
+        const items = {};
+
+        products.forEach((product) => {
+            // NOTE: More work must be done if the add-ons will have variant selectors of their own
+            const singleVariant = product.variants?.nodes[0];
+
+            items[product.id] = {
+                id: product.id,
+                variantId: singleVariant.id,
+                moneyPrice: singleVariant.priceV2, // full MoneyV2 object
+            };
+        });
+
+        return items;
+    }, [products]);
+
+    const setTotalMoney = useCallback(
+        (items) => {
+            // get base product price
+            const newTotalMoney = { ...selectedVariant.priceV2 };
+
+            if (items.length === 0) {
+                _setTotalMoney(newTotalMoney);
+                return;
+            }
+
+            // cast amount to number for calculation
+            let totalAmount = Number(newTotalMoney.amount);
+            // sum up the prices of the added items
+            items.forEach((item) => {
+                totalAmount += Number(item.moneyPrice.amount);
+            });
+
+            // cast amount back to string for MoneyV2
+            newTotalMoney.amount = String(totalAmount);
+
+            _setTotalMoney(newTotalMoney);
+            return;
+        },
+        [selectedVariant]
+    );
+
+    // listen for selected variant change from parent
+    useEffect(() => {
+        setTotalMoney(addedItems);
+    }, [addedItems, setTotalMoney]);
+
+    const handleChange = useCallback(
+        (event, product) => {
+            // const mainPrice = Number(selectedVariant.priceV2.amount);
+            let newAddedItems = [...addedItems];
+            if (event.target.checked) {
+                newAddedItems = [...addedItems, refItems[product.id]];
+            } else {
+                newAddedItems = addedItems.filter(
+                    (item) => item.id !== product.id
+                );
+            }
+
+            setAddedItems(newAddedItems);
+            setTotalMoney(newAddedItems);
+        },
+        [addedItems, refItems, setTotalMoney]
+    );
+
+    return (
+        /* Render Product AddOns with AddToCart Button */
+        product &&
+        products.length > 0 &&
+        !isOutOfStock && (
+            <div className={styles}>
+                <Heading size="lead" className="px-6 md:px-8 lg:px-12">
+                    {componentTitle}
+                </Heading>
+                {/* Product Add-Ons */}
+                <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 px-6 md:px-8 lg:px-12">
+                    {products.map((product) => (
+                        <li key={product.id}>
+                            <ProductOptionsProvider data={product}>
+                                <div className="mt-2">
+                                    <label
+                                        htmlFor={product.id}
+                                        className="cursor-pointer flex items-center hover:bg-slate-200 p-2 gap-2"
+                                    >
+                                        <input
+                                            type="checkbox"
+                                            value=""
+                                            disabled={
+                                                !product.variants.nodes[0]
+                                                    .availableForSale
+                                            }
+                                            name={product.title}
+                                            id={product.id}
+                                            checked={
+                                                addedItems.filter(
+                                                    (item) =>
+                                                        item.id === product.id
+                                                ).length > 0
+                                            }
+                                            className="accent-black rounded-sm cursor-pointer"
+                                            onChange={(event) =>
+                                                handleChange(event, product)
+                                            }
+                                        />
+                                        <RebuyProductAddOnCard
+                                            product={product}
+                                        />
+                                    </label>
+                                </div>
+                            </ProductOptionsProvider>
+                        </li>
+                    ))}
+                </ul>
+
+                <div className="px-6 md:px-8 lg:px-12">
+                    {/* Subtotal */}
+                    {Number(totalMoney.amount) >
+                        Number(selectedVariant.priceV2.amount) && (
+                        <Text
+                            as="div"
+                            className="flex gap-1 pb-4 text-gray-600"
+                        >
+                            Subtotal:{' '}
+                            <Money
+                                data={{
+                                    ...totalMoney,
+                                    amount: String(
+                                        totalMoney.amount -
+                                            selectedVariant.priceV2.amount
+                                    ),
+                                }}
+                                withoutTrailingZeros
+                            />
+                        </Text>
+                    )}
+
+                    {/* AddToCart Button */}
+                    <AddToCartMarkup
+                        items={addedItems}
+                        money={totalMoney}
+                        selectedVariant={selectedVariant}
+                    />
+                </div>
+            </div>
+        )
+    );
+};
+
+export default RebuyProductAddOns;

package/RebuyProductRecommendations.client.jsx

@@ -8,7 +8,7 @@ const AddToCartMarkup = ({ product }) => {
     const isOutOfStock = !selectedVariant.availableForSale;
 
     return (
-        <div className="space-y-2 mb-8">
+        <div className="py-2">
             <AddToCartButton
                 disabled={isOutOfStock}
                 product={product}
@@ -18,7 +18,10 @@ const AddToCartMarkup = ({ product }) => {
                 type="button"
                 attributes={[
                     { key: '_source', value: 'Rebuy' },
-                    { key: '_attribution', value: 'Product Recommendations' },
+                    {
+                        key: '_attribution',
+                        value: 'Rebuy Product Recommendations',
+                    },
                 ]}
             >
                 <Button
@@ -33,9 +36,11 @@ const AddToCartMarkup = ({ product }) => {
     );
 };
 
-export const RebuyProductRecommendations = ({ product, products }) => {
-    const title = `Like ${product.title}? You may also like:`;
-
+export const RebuyProductRecommendations = ({
+    product,
+    products,
+    title = `Like ${product.title}? You may also like:`,
+}) => {
     return (
         products.length > 0 && (
             <Section heading={title} padding="y">

package/RebuyRecentlyViewedProducts.client.jsx

@@ -8,7 +8,7 @@ const AddToCartMarkup = ({ product }) => {
     const isOutOfStock = !selectedVariant.availableForSale;
 
     return (
-        <div className="space-y-2 mb-8">
+        <div className="py-2">
             <AddToCartButton
                 disabled={isOutOfStock}
                 product={product}
@@ -18,7 +18,10 @@ const AddToCartMarkup = ({ product }) => {
                 type="button"
                 attributes={[
                     { key: '_source', value: 'Rebuy' },
-                    { key: '_attribution', value: 'Recently Viewed Product' },
+                    {
+                        key: '_attribution',
+                        value: 'Rebuy Recently Viewed Product',
+                    },
                 ]}
             >
                 <Button

package/RebuyWidgetContainer.client.jsx

@@ -22,7 +22,7 @@ export const RebuyWidgetContainer = ({ children, ...props }) => {
     const cart = useCart();
     const { contextParameters } = useContext(RebuyContext);
     const [products, setProducts] = useState([]);
-    const [metadata, setMetadata] = useState([]);
+    const [metadata, setMetadata] = useState({});
     const [Rebuy, setRebuy] = useState(null);
     const [initialized, setInitialized] = useState(false);
     const isCartReady = ['uninitialized', 'idle'].includes(cart.status); // uninitialized, creating, fetching, updating, idle
@@ -128,7 +128,7 @@ export const RebuyWidgetContainer = ({ children, ...props }) => {
                 : child
         );
 
-    const childProps = { ...props, products, metadata };
+    const childProps = { ...props, products, metadata, key: product.id };
 
     return childrenWithProps(childProps);
 };

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@rebuy/rebuy-hydrogen",
     "description": "This is the default library for Rebuy + Shopify Hydrogen",
-    "version": "2.0.0",
+    "version": "2.2.0",
     "license": "MIT",
     "author": "Rebuy, Inc.",
     "type": "module",