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

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;