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

package/src/widgets/RebuyProductAddOns/RebuyProductAddOns.tsx

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

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

package/src/widgets/RebuyProductAddOns/types.ts

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

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

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

package/src/widgets/RebuyProductRecommendations/types.ts

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