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

package/src/widgets/RebuyCompleteTheLook/RebuyCompleteTheLook.tsx

@@ -0,0 +1,50 @@
+import styles from '~/widgets/RebuyCompleteTheLook/RebuyCompleteTheLook.module.css';
+
+import type { RebuyCompleteTheLookProps } from './types';
+
+import { ProductCard } from '~/components/ProductCard';
+import { Title } from '~/components/Title';
+import { getTitleLevel } from '~/hooks/titleLevel';
+
+// Component implementation
+export const RebuyCompleteTheLook = (props: RebuyCompleteTheLookProps) => {
+    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 (
+        <section className={styles.container}>
+            <Title
+                level={getTitleLevel(customTitleLevel)}
+                style={customTitleStyle}
+                text={customTitle}
+            />
+            <ul className={styles.productGrid}>
+                {products.map((product) => (
+                    <li className={styles.productItem} key={product.id}>
+                        <ProductCard
+                            addToCartBtnText={addToCartBtnText}
+                            addToCartCallback={addToCartCallback}
+                            isHydrogenReact={props.isHydrogenReact}
+                            product={product}
+                            productCardTitleLevel={getTitleLevel(
+                                customTitleLevel,
+                                true
+                            )}
+                        />
+                    </li>
+                ))}
+            </ul>
+        </section>
+    );
+};

package/src/widgets/RebuyCompleteTheLook/index.ts

@@ -0,0 +1 @@
+export * from './RebuyCompleteTheLook';

package/src/widgets/RebuyCompleteTheLook/types.ts

@@ -0,0 +1,5 @@
+import type { WidgetChildProps } from '~/types/widgets';
+
+export type RebuyCompleteTheLookProps = {
+    addToCartBtnText?: string;
+} & WidgetChildProps;

package/src/widgets/RebuyDynamicBundleProducts/BundleImages.tsx

@@ -0,0 +1,62 @@
+import { Link } from '@remix-run/react';
+import { Image } from '@shopify/hydrogen';
+import { Fragment } from 'react';
+
+import styles from '~/widgets/RebuyDynamicBundleProducts/RebuyDynamicBundleProducts.module.css';
+
+import type { BundleProduct } from '~/widgets/RebuyDynamicBundleProducts/types';
+
+export const BundleImages = ({ products }: { products: BundleProduct[] }) => {
+    const selected = products.filter((product) => product.selected);
+
+    return (
+        <ul className={styles.bundleImages}>
+            {products.map((product, index) => {
+                const image = product.selectedVariant?.image;
+                const productImage = image ? (
+                    <Image
+                        alt={image.altText || `Picture of ${product.title}`}
+                        className={styles.bundleImage}
+                        data={image}
+                        height={80}
+                        title={product.title}
+                        width={80}
+                    />
+                ) : (
+                    // 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={styles.bundleImageDelimiter}>
+                                        <span>+</span>
+                                    </li>
+                                )}
+                                <li className="flex items-center">
+                                    {product.default ? (
+                                        // Already on product page
+                                        productImage
+                                    ) : (
+                                        // Link to product
+                                        <Link
+                                            title={product.title}
+                                            to={`/products/${product.handle}`}
+                                        >
+                                            {productImage}
+                                        </Link>
+                                    )}
+                                </li>
+                            </>
+                        )}
+                    </Fragment>
+                );
+            })}
+        </ul>
+    );
+};

package/src/widgets/RebuyDynamicBundleProducts/BundlePrice.tsx

@@ -0,0 +1,93 @@
+import { Money } from '@shopify/hydrogen';
+
+import styles from './RebuyDynamicBundleProducts.module.css';
+
+import type {
+    CurrencyCode,
+    MoneyV2,
+} from '@shopify/hydrogen-react/storefront-api-types';
+import type { BundleProduct } from '~/widgets/RebuyDynamicBundleProducts/types';
+
+export const BundlePrice = ({ products }: { products: BundleProduct[] }) => {
+    const isDisabled =
+        products.filter((product) => product.selected).length < 1;
+
+    const totalBundlePrice = () => {
+        let total = 0;
+        let currencyCode = 'USD' as CurrencyCode;
+
+        for (const product of products) {
+            if (product.selected && product.selectedVariant) {
+                const { priceV2: price } = product.selectedVariant;
+
+                total += Number(price?.amount);
+                currencyCode = (price?.currencyCode || 'USD') as CurrencyCode;
+            }
+        }
+
+        return {
+            amount: String(total),
+            currencyCode,
+        };
+    };
+
+    const totalBundleCompareAtPrice = () => {
+        let compareAtTotal = 0;
+        let currencyCode = 'USD' as CurrencyCode;
+
+        for (const product of products) {
+            if (product.selected && product.selectedVariant) {
+                const { compareAtPriceV2: compareAtPrice, priceV2: price } =
+                    product.selectedVariant;
+
+                currencyCode = (price?.currencyCode || 'USD') as CurrencyCode;
+                compareAtTotal += Number((compareAtPrice || price)?.amount);
+            }
+        }
+
+        return {
+            amount: String(compareAtTotal),
+            currencyCode,
+        };
+    };
+    const isDiscounted = (
+        price: { amount: string; currencyCode: string } | null,
+        compareAtPrice: { amount: string; currencyCode: string } | null
+    ) => Number(compareAtPrice?.amount) > Number(price?.amount);
+
+    const price = totalBundlePrice();
+    const compareAtPrice = totalBundleCompareAtPrice();
+
+    const CompareAtPrice = ({
+        data: compareAtPrice,
+    }: {
+        data: MoneyV2 | null;
+    }) => {
+        return (
+            compareAtPrice && (
+                <Money
+                    as="span"
+                    className={styles.compareAtPrice}
+                    data={compareAtPrice}
+                    withoutTrailingZeros
+                />
+            )
+        );
+    };
+
+    return (
+        products.length > 0 && (
+            <div className="flex items-center flex-col">
+                {!isDisabled && (
+                    <p className="flex items-center gap-2 mb-2">
+                        <span>Total Price:</span>
+                        <Money as="span" data={price} withoutTrailingZeros />
+                        {isDiscounted(price, compareAtPrice) && (
+                            <CompareAtPrice data={compareAtPrice} />
+                        )}
+                    </p>
+                )}
+            </div>
+        )
+    );
+};

package/src/widgets/RebuyDynamicBundleProducts/BundleSelection.tsx

@@ -0,0 +1,65 @@
+import styles from '~/widgets/RebuyDynamicBundleProducts/RebuyDynamicBundleProducts.module.css';
+
+import type { BundleSelectionProps } from '~/widgets/RebuyDynamicBundleProducts/types';
+
+import { RebuyProductPrice } from '~/components/ProductPrice';
+import { Select } from '~/widgets/RebuyDynamicBundleProducts/Select';
+
+export const BundleSelection = ({
+    onSelectVariant,
+    onToggleBundleItem,
+    products,
+}: BundleSelectionProps) => {
+    return (
+        <ul>
+            {products.map((product, index) => {
+                const { availableForSale } = product.selectedVariant;
+                const isOutOfStock = !availableForSale;
+
+                return (
+                    <li
+                        className={`${styles.bundleItemRowContainer} ${
+                            !product.selected && styles.unselected
+                        }`}
+                        key={product.id + '-BundleSelection' + index}
+                    >
+                        <div className={styles.bundleItemRow}>
+                            <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}
+                            />
+                            <div className={styles.bundleItemInput}>
+                                <label
+                                    className={styles.bundleItemLabel}
+                                    htmlFor={`${product.id}-toggle`}
+                                >
+                                    {isOutOfStock && <b>SOLD OUT</b>}
+                                    {product.default && <b>This item:</b>}
+                                    {product.title}
+
+                                    <RebuyProductPrice
+                                        selectedVariant={
+                                            product.selectedVariant
+                                        }
+                                    />
+                                </label>
+
+                                {product.variants.nodes.length > 1 && (
+                                    <Select
+                                        onSelectVariant={onSelectVariant}
+                                        product={product}
+                                    />
+                                )}
+                            </div>
+                        </div>
+                    </li>
+                );
+            })}
+        </ul>
+    );
+};

package/src/widgets/RebuyDynamicBundleProducts/RebuyDynamicBundleProducts.tsx

@@ -0,0 +1,118 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import { BundlePrice } from './BundlePrice';
+
+import styles from './RebuyDynamicBundleProducts.module.css';
+
+import type {
+    BundleProduct,
+    RebuyDynamicBundleProductsProps,
+} from '~/widgets/RebuyDynamicBundleProducts/types';
+
+import { AddToCartBtn } from '~/components/AddToCartBtn';
+import { Title } from '~/components/Title';
+import { getTitleLevel } from '~/hooks/titleLevel';
+import { convertToRebuyProduct } from '~/utils/convertToRebuyProduct';
+import { BundleImages } from '~/widgets/RebuyDynamicBundleProducts/BundleImages';
+import { BundleSelection } from '~/widgets/RebuyDynamicBundleProducts/BundleSelection';
+
+export const RebuyDynamicBundleProducts = (
+    props: RebuyDynamicBundleProductsProps
+) => {
+    const {
+        addToCartBtnText = 'Add to cart',
+        addToCartCallback,
+        customTitle = `These pair with ${props.product?.title}`,
+        customTitleLevel = 'h2',
+        customTitleStyle,
+        isHydrogenReact,
+        product,
+        products = [],
+    } = props;
+    const [bundleProducts, setBundleProducts] = useState<BundleProduct[]>([]);
+
+    // Initializiation
+    useEffect(() => {
+        const mainProduct: BundleProduct = convertToRebuyProduct(
+            isHydrogenReact || false,
+            product
+        );
+
+        const formattedProducts = products.map((product) => {
+            return {
+                ...product,
+                selected: true,
+                selectedVariant: product.variants.nodes[0],
+            };
+        });
+
+        setBundleProducts([mainProduct, ...formattedProducts]);
+    }, [product, products, isHydrogenReact]);
+
+    const onToggleBundleItem = useCallback(
+        (product: BundleProduct) => {
+            product.selected = !product.selected;
+
+            setBundleProducts([...bundleProducts]);
+        },
+        [bundleProducts]
+    );
+
+    const onSelectVariant = useCallback(
+        (product: BundleProduct, variant_id: string) => {
+            const variant = product.variants.nodes.find(
+                ({ id }) => id === variant_id
+            );
+
+            if (variant) {
+                product.selectedVariant = variant;
+                product.selected = variant.availableForSale || false;
+
+                setBundleProducts([...bundleProducts]);
+            }
+        },
+        [bundleProducts]
+    );
+
+    if (products.length === 0) {
+        console.log('RebuyDynamicBundleProducts: No products found');
+        return null;
+    }
+
+    return (
+        <section className={styles.container}>
+            <Title
+                level={getTitleLevel(customTitleLevel)}
+                style={customTitleStyle}
+                text={customTitle}
+            />
+            <div className={styles.bundleContainer}>
+                <BundleImages products={bundleProducts} />
+                <BundlePrice products={bundleProducts} />
+
+                <div className={styles.addCartBtnContainer}>
+                    <AddToCartBtn
+                        addToCartBtnText={addToCartBtnText}
+                        addToCartCallback={addToCartCallback}
+                        disabled={
+                            bundleProducts.filter((product) => product.selected)
+                                .length === 0
+                        }
+                        isHydrogenReact={isHydrogenReact}
+                        selectedVariants={bundleProducts
+                            .filter((product) => product.selected)
+                            .map((product) => {
+                                return product.selectedVariant;
+                            })}
+                    />
+                </div>
+
+                <BundleSelection
+                    onSelectVariant={onSelectVariant}
+                    onToggleBundleItem={onToggleBundleItem}
+                    products={bundleProducts}
+                />
+            </div>
+        </section>
+    );
+};

package/src/widgets/RebuyDynamicBundleProducts/Select.tsx

@@ -0,0 +1,41 @@
+import styles from '~/widgets/RebuyDynamicBundleProducts/RebuyDynamicBundleProducts.module.css';
+
+import type {
+    BundleProduct,
+    BundleSelectProps,
+} from '~/widgets/RebuyDynamicBundleProducts/types';
+
+export const Select = ({ onSelectVariant, product }: BundleSelectProps) => {
+    const getOptionsLabel = (product: BundleProduct) => {
+        const options = product.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 delimited label for available option(s) e.g. Color / Size, Scent, etc
+        return (useValues ? optionsFromValues : optionsFromKeys).join(' / ');
+    };
+
+    return (
+        product && (
+            <select
+                aria-label="select variant"
+                className={styles.select}
+                onChange={(e) => onSelectVariant(product, e.target.value)}
+                value={product.selectedVariant.id}
+            >
+                <optgroup label={getOptionsLabel(product)}>
+                    {product.variants.nodes.map(({ id, title }) => (
+                        <option key={id + '-BundleVariant'} value={id}>
+                            {title}
+                        </option>
+                    ))}
+                </optgroup>
+            </select>
+        )
+    );
+};

package/src/widgets/RebuyDynamicBundleProducts/index.ts

@@ -0,0 +1 @@
+export * from './RebuyDynamicBundleProducts';

package/src/widgets/RebuyDynamicBundleProducts/types.ts

@@ -0,0 +1,23 @@
+import type { RebuyProduct } from '~/types/rebuyCustom';
+import type { WidgetChildProps } from '~/types/widgets';
+
+export type BundleProductOptions = {
+    default?: boolean;
+};
+
+export type BundleProduct = RebuyProduct & BundleProductOptions;
+
+export type BundleSelectionProps = {
+    onSelectVariant: (product: BundleProduct, variantId: string) => void;
+    onToggleBundleItem: (product: BundleProduct) => void;
+    products: BundleProduct[];
+};
+
+export type BundleSelectProps = {
+    onSelectVariant: (product: BundleProduct, variantId: string) => void;
+    product: BundleProduct;
+};
+
+export type RebuyDynamicBundleProductsProps = {
+    addToCartBtnText?: string;
+} & WidgetChildProps;

package/src/widgets/RebuyProductAddOns/RebuyProductAddOnCard.tsx

@@ -0,0 +1,66 @@
+import { Link } from '@remix-run/react';
+import { Image } from '@shopify/hydrogen';
+
+import styles from './RebuyProductAddOns.module.css';
+
+import type { RebuyProductAddOnCardProps } from './types';
+
+import { RebuyProductPrice } from '~/components/ProductPrice';
+import { Title } from '~/components/Title';
+
+export const RebuyProductAddOnCard = ({
+    handleChange,
+    learnMoreText,
+    outOfStockText,
+    product,
+    titleLevel,
+}: RebuyProductAddOnCardProps) => {
+    const { availableForSale, image } = product.selectedVariant || {};
+
+    return (
+        <label className={styles.addOnCard} htmlFor={product.id}>
+            <div className={styles.addOnCardContent}>
+                <input
+                    checked={Boolean(product.selected)}
+                    className={styles.addOnCardInput}
+                    disabled={!product.variants.nodes[0].availableForSale}
+                    id={product.id}
+                    name={product.title}
+                    onChange={(event) => handleChange(event, product)}
+                    type="checkbox"
+                    value=""
+                />
+                <div className={styles.addOnCardContentImage}>
+                    {image && (
+                        <Image
+                            alt={image.altText || `Picture of ${product.title}`}
+                            data={image}
+                            height={150}
+                            width={300}
+                        />
+                    )}
+                </div>
+
+                <div className={styles.addOnCardTextContent}>
+                    {!availableForSale && (
+                        <p className={styles.addOnCardOutOfStock}>
+                            {outOfStockText}
+                        </p>
+                    )}
+
+                    <Title level={titleLevel} text={product.title} />
+
+                    <RebuyProductPrice
+                        selectedVariant={product.selectedVariant}
+                    />
+                    <Link
+                        className={styles.addOnCardLearnMore}
+                        to={`/products/${product.handle}`}
+                    >
+                        {learnMoreText}
+                    </Link>
+                </div>
+            </div>
+        </label>
+    );
+};