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

package/src/widgets/RebuyProductAddOns/RebuyProductAddOns.tsx

@@ -0,0 +1,218 @@
+import { Money } from '@shopify/hydrogen-react';
+import { useCallback, useEffect, useState } from 'react';
+
+import { RebuyProductAddOnCard } from './RebuyProductAddOnCard';
+
+import styles from './RebuyProductAddOns.module.css';
+
+import type {
+    CurrencyCode,
+    MoneyV2,
+} from '@shopify/hydrogen-react/storefront-api-types';
+import type { RebuyProduct } from '~/types/rebuyCustom';
+import type { RebuyProductAddOnProps } from '~/widgets/RebuyProductAddOns/types';
+
+import { AddToCartBtn } from '~/components/AddToCartBtn';
+import { Title } from '~/components/Title';
+import { getTitleLevel } from '~/hooks/titleLevel';
+import { convertToRebuyProduct } from '~/utils/convertToRebuyProduct';
+
+export const RebuyProductAddOns = (props: RebuyProductAddOnProps) => {
+    const {
+        addToCartCallback,
+        customTitle = `These pair with ${props.product?.title}`,
+        customTitleLevel = 'h2',
+        customTitleStyle,
+        includeMainProduct = false,
+        isHydrogenReact,
+        learnMoreText = 'Learn more',
+        outOfStockText = 'Out of stock',
+        product,
+        products = [],
+        addToCartBtnText = 'Add to cart',
+        subtotalText = 'Add-ons Subtotal: ',
+        withProductText = `With ${product?.title}: `,
+    } = props;
+
+    const [addedItems, setAddedItems] = useState<RebuyProduct[]>(products);
+
+    const [subtotalWithProduct, setSubtotalWithProduct] = useState<MoneyV2>();
+    const [subtotalWithOutProduct, setSubtotalWithOutProduct] =
+        useState<MoneyV2>();
+
+    useEffect(() => {
+        let initialTotal = 0;
+        let currencyCode = 'USD' as CurrencyCode;
+
+        products.map((product) => {
+            product.selectedVariant = product.variants.nodes[0];
+            product.selected = true;
+
+            if (product.selectedVariant?.priceV2) {
+                initialTotal += Number(product.selectedVariant.priceV2.amount);
+                currencyCode = (product.selectedVariant.priceV2.currencyCode ||
+                    'USD') as CurrencyCode;
+            }
+        });
+
+        setSubtotalWithProduct({
+            amount: String(initialTotal),
+            currencyCode,
+        });
+
+        setSubtotalWithOutProduct({
+            amount: String(
+                initialTotal -
+                    Number(
+                        isHydrogenReact
+                            ? product?.selectedVariant?.price.amount
+                            : product?.selectedOrFirstAvailableVariant?.price
+                                  .amount
+                    )
+            ),
+            currencyCode,
+        });
+        setAddedItems(products);
+        if (includeMainProduct) {
+            setAddedItems([
+                convertToRebuyProduct(isHydrogenReact || false, product),
+                ...products,
+            ]);
+        } else {
+            setAddedItems(products);
+        }
+    }, [products, product, isHydrogenReact, includeMainProduct]);
+
+    const handleChange = useCallback(
+        (event: React.ChangeEvent<HTMLInputElement>, product: RebuyProduct) => {
+            const newProducts = [...products];
+            const productIndex = newProducts.findIndex(
+                (p) => p.id === product.id
+            );
+
+            if (productIndex !== -1) {
+                newProducts[productIndex] = {
+                    ...newProducts[productIndex],
+                    selected: event.target.checked,
+                };
+
+                product.selected = event.target.checked;
+
+                if (event.target.checked) {
+                    setAddedItems((prev) => [...prev, product]);
+                } else {
+                    setAddedItems((prev) =>
+                        prev.filter((item) => item.id !== product.id)
+                    );
+                }
+            }
+        },
+        [products]
+    );
+
+    useEffect(() => {
+        let total = 0;
+        let currencyCode = 'USD' as CurrencyCode;
+
+        addedItems.forEach((item) => {
+            if (item.selected && item.selectedVariant?.priceV2) {
+                total += Number(item.selectedVariant.priceV2.amount);
+                currencyCode = (item.selectedVariant.priceV2.currencyCode ||
+                    'USD') as CurrencyCode;
+            }
+        });
+
+        setSubtotalWithProduct({
+            amount: String(total),
+            currencyCode,
+        });
+
+        setSubtotalWithOutProduct({
+            amount: String(
+                total -
+                    Number(
+                        isHydrogenReact
+                            ? product?.selectedVariant?.price.amount
+                            : product?.selectedOrFirstAvailableVariant?.price
+                                  .amount
+                    )
+            ),
+            currencyCode,
+        });
+    }, [addedItems, product, isHydrogenReact]);
+
+    if (products.length === 0) {
+        console.log('RebuyProductAddOns: No products found');
+        return null;
+    }
+
+    return (
+        <div className={styles.container}>
+            <Title
+                level={getTitleLevel(customTitleLevel)}
+                style={customTitleStyle}
+                text={customTitle}
+            />
+            <ul className={styles.productAddOnsList}>
+                {products.map((product) => (
+                    <li key={product.id}>
+                        <RebuyProductAddOnCard
+                            handleChange={handleChange}
+                            learnMoreText={learnMoreText}
+                            outOfStockText={outOfStockText}
+                            product={product}
+                            titleLevel={getTitleLevel(customTitleLevel, true)}
+                        />
+                    </li>
+                ))}
+            </ul>
+            <div className={styles.productAddOnsFooter}>
+                <div className={styles.moneyContainer}>
+                    {subtotalText}
+                    {subtotalWithOutProduct && (
+                        <Money
+                            data={subtotalWithOutProduct}
+                            withoutTrailingZeros
+                        />
+                    )}
+                </div>
+                {includeMainProduct && (
+                    <div className={styles.moneyContainer}>
+                        {withProductText}
+                        {subtotalWithProduct && (
+                            <Money
+                                data={subtotalWithProduct}
+                                withoutTrailingZeros
+                            />
+                        )}
+                    </div>
+                )}
+                <div className={styles.addCartBtnContainer}>
+                    {includeMainProduct ? (
+                        <AddToCartBtn
+                            addToCartBtnText={addToCartBtnText}
+                            addToCartCallback={addToCartCallback}
+                            disabled={addedItems.length === 0}
+                            isHydrogenReact={isHydrogenReact}
+                            moneyData={subtotalWithProduct}
+                            selectedVariants={addedItems.map(
+                                (item) => item.selectedVariant
+                            )}
+                        />
+                    ) : (
+                        <AddToCartBtn
+                            addToCartBtnText={addToCartBtnText}
+                            addToCartCallback={addToCartCallback}
+                            disabled={addedItems.length === 0}
+                            isHydrogenReact={isHydrogenReact}
+                            moneyData={subtotalWithOutProduct}
+                            selectedVariants={addedItems.map(
+                                (item) => item.selectedVariant
+                            )}
+                        />
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};

package/src/widgets/RebuyProductAddOns/index.ts

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

package/src/widgets/RebuyProductAddOns/types.ts

@@ -0,0 +1,24 @@
+import type { ProductCardTitleLevel } from '~/types/common';
+import type { RebuyProduct } from '~/types/rebuyCustom';
+import type { WidgetChildProps } from '~/types/widgets';
+
+export type RebuyProductAddOnProps = {
+    addToCartBtnText?: string;
+    includeMainProduct?: boolean;
+    learnMoreText?: string;
+    outOfStockText?: string;
+    subtotalText?: string;
+    withProductText?: string;
+} & WidgetChildProps;
+
+export type RebuyProductAddOnCardProps = {
+    handleChange: (
+        event: React.ChangeEvent<HTMLInputElement>,
+        product: RebuyProduct
+    ) => void;
+
+    learnMoreText?: string;
+    outOfStockText?: string;
+    product: RebuyProduct;
+    titleLevel: ProductCardTitleLevel;
+};

package/src/widgets/RebuyProductRecommendations/RebuyProductRecommendations.tsx

@@ -0,0 +1,50 @@
+import styles from './RebuyProductRecommendations.module.css';
+
+import type { RebuyProductRecommendationsProps } from './types';
+
+import { ProductCard } from '~/components/ProductCard';
+import { Title } from '~/components/Title';
+import { getTitleLevel } from '~/hooks/titleLevel';
+
+export const RebuyProductRecommendations = (
+    props: RebuyProductRecommendationsProps
+) => {
+    const {
+        addToCartBtnText = 'Add to cart',
+        addToCartCallback,
+        customTitle = `These pair with ${props.product?.title}`,
+        customTitleLevel = 'h2',
+        customTitleStyle,
+        products = [],
+    } = props;
+
+    if (products.length === 0) {
+        console.log('RebuyProductRecommendations: No products found');
+        return null;
+    }
+    return (
+        <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/RebuyProductRecommendations/index.ts

@@ -0,0 +1 @@
+export { RebuyProductRecommendations } from './RebuyProductRecommendations';

package/src/widgets/RebuyProductRecommendations/types.ts

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

package/RebuyCompleteTheLook.client.jsx

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