@rebuy/rebuy-hydrogen 2.3.1 → 3.0.0-alpha.3

package/RebuyDynamicBundleProducts.client.jsx

@@ -1,415 +0,0 @@
-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

@@ -1,89 +0,0 @@
-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;