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

package/src/widgetContainer/RebuyWidgetContainer.tsx

@@ -1,183 +0,0 @@
-import { RebuyClient } from '@rebuy/rebuy';
-import * as Utilities from '@rebuy/rebuy/utilities';
-import { flattenConnection } from '@shopify/hydrogen';
-import React, {
-    ComponentType,
-    useContext,
-    useEffect,
-    useMemo,
-    useState,
-} from 'react';
-
-import type {
-    RebuyProduct,
-    RebuyWidgetContainerProps,
-    RebuyWidgetMetadata,
-} from '~/types/rebuyCustom';
-
-import { RebuyContext } from '~/context/RebuyContext';
-
-type RebuyWidgetContainerComponent = {
-    (props: RebuyWidgetContainerProps): JSX.Element;
-} & ComponentType<RebuyWidgetContainerProps>;
-
-const RebuyWidgetContainerBase = ({
-    children,
-    ...props
-}: RebuyWidgetContainerProps) => {
-    const {
-        collection,
-        collectionId,
-        dataSource,
-        limit,
-        options,
-        product,
-        productId,
-        variant,
-        variantId,
-    } = props;
-
-    const contextParameters = useContext(RebuyContext);
-
-    const [Rebuy, setRebuy] = useState<RebuyClient | null>(null);
-    const [initialized, setInitialized] = useState(false);
-    const shopifyProductId = product?.id ?? productId ?? null;
-    const shopifyVariantId = variant?.id ?? variantId ?? null;
-    const shopifyCollectionId = collection?.id ?? collectionId ?? null;
-    const [products, setProducts] = useState<RebuyProduct[]>([]);
-    const [metadata, setMetadata] = useState<RebuyWidgetMetadata>();
-
-    const REBUY_API_KEY = import.meta.env.PUBLIC_REBUY_API_KEY;
-
-    // Initialize Rebuy API client
-    useEffect(() => {
-        if (!Rebuy) {
-            const client = new RebuyClient(REBUY_API_KEY);
-            client.setContextParameters(
-                contextParameters as Record<string, unknown> // TODO: fix this type when @rebuy/rebuy is moved to typescript
-            );
-
-            if (options) {
-                client.setDefaultParameters(options as Record<string, unknown>); // TODO: fix this type when @rebuy/rebuy is moved to typescript
-            }
-
-            setRebuy(client);
-            setInitialized(true);
-        }
-    }, [REBUY_API_KEY, Rebuy, contextParameters, options]);
-
-    useEffect(() => {
-        if (!Rebuy) return;
-
-        Rebuy.setContextParameters(
-            contextParameters as Record<string, unknown> // TODO: fix this type when @rebuy/rebuy is moved to typescript
-        );
-    }, [Rebuy, contextParameters]);
-
-    // Memoize request object on prop changes (e.g. product)
-    const request = useMemo(() => {
-        const request = {
-            endpoint: dataSource || '/api/v1/products/recommended',
-            params: {} as Record<string, string | number>, // Keeping this object generic to allow for custom endpoints
-        };
-
-        if (shopifyProductId) {
-            request.params.shopify_product_ids = Utilities.getIdFromGraphUrl(
-                shopifyProductId,
-                'Product'
-            );
-        }
-
-        if (shopifyProductId) {
-            request.params.shopify_product_ids = Utilities.getIdFromGraphUrl(
-                shopifyProductId,
-                'Product'
-            );
-        }
-
-        if (shopifyVariantId) {
-            request.params.shopify_variant_ids = Utilities.getIdFromGraphUrl(
-                shopifyVariantId,
-                'ProductVariant'
-            );
-        }
-
-        if (shopifyCollectionId) {
-            request.params.shopify_collection_ids = Utilities.getIdFromGraphUrl(
-                shopifyCollectionId,
-                'Collection'
-            );
-        }
-
-        if (limit) {
-            request.params.limit = limit;
-        }
-
-        return request;
-    }, [
-        dataSource,
-        shopifyProductId,
-        shopifyVariantId,
-        shopifyCollectionId,
-        limit,
-    ]);
-
-    // Update product recommendations on cart or request change
-    useEffect(() => {
-        let isMounted = true;
-        if (!Rebuy || !initialized) return;
-
-        const fetchData = async () => {
-            const { data, metadata } = (await Rebuy.getStorefrontData(
-                request.endpoint,
-                request.params
-            )) as {
-                data: RebuyProduct[];
-                metadata: RebuyWidgetMetadata;
-            };
-
-            // Set state only if mounted
-            if (isMounted) {
-                setProducts(
-                    Array.isArray(data)
-                        ? data.map((product) => ({
-                              ...product,
-                              variants: {
-                                  nodes: product.variants
-                                      ? flattenConnection(product.variants)
-                                      : [],
-                              },
-                          }))
-                        : []
-                );
-                setMetadata(metadata);
-            }
-        };
-
-        fetchData();
-        // Unmounted?
-        return () => {
-            isMounted = false;
-        };
-    }, [Rebuy, initialized, request]);
-
-    const childrenWithProps = (props: RebuyWidgetContainerProps) =>
-        React.Children.map(children, (child) =>
-            React.isValidElement(child)
-                ? React.cloneElement(child, props)
-                : child
-        );
-
-    const childProps = {
-        ...props,
-        isHydrogenReact: contextParameters?.contextParameters?.isHydrogenReact,
-        key: product?.id,
-        metadata,
-        products,
-    };
-
-    return childrenWithProps(childProps);
-};
-
-export const RebuyWidgetContainer =
-    RebuyWidgetContainerBase as RebuyWidgetContainerComponent;

package/src/widgets/RebuyCompleteTheLook/RebuyCompleteTheLook.tsx

@@ -1,50 +0,0 @@
-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/RebuyDynamicBundleProducts/BundleImages.tsx

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

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

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

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

@@ -1,41 +0,0 @@
-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/RebuyProductAddOns/RebuyProductAddOnCard.tsx

@@ -1,66 +0,0 @@
-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>
-    );
-};