@rebuy/rebuy-hydrogen 2.3.0 → 3.0.0-alpha.1

package/RebuyProductAddOns.client.jsx

@@ -1,227 +0,0 @@
-import {
-    Money,
-    ProductOptionsProvider,
-    useCart,
-    useProductOptions,
-} from '@shopify/hydrogen';
-import clsx from 'clsx';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Heading, Text } from '~/components';
-import { Button } from '~/components/elements';
-import { RebuyProductAddOnCard } from './RebuyProductAddOnCard.client';
-
-export const RebuyProductAddOns = ({
-    product = {},
-    products = [],
-    metadata = {},
-    title = `Popular Add-Ons for ${product.title}`,
-    className = '',
-}) => {
-    // Hooks
-    const { linesAdd } = useCart();
-    const { selectedVariant } = useProductOptions();
-
-    // State
-    const [addedItems, setAddedItems] = useState([]);
-    const [totalMoney, _setTotalMoney] = useState(selectedVariant.priceV2);
-    const isOutOfStock = !selectedVariant.availableForSale;
-    const language = metadata.widget?.language ?? {};
-    const componentTitle = language?.title || title;
-    const styles = clsx('grid gap-4 py-6 md:py-8 lg:py-12', className);
-
-    const AddToCartMarkup = ({ items, money, selectedVariant }) => {
-        return (
-            <>
-                <Button
-                    onClick={() => addLineItemsToCart(items, selectedVariant)}
-                    variant="primary"
-                    as="button"
-                >
-                    <Text
-                        as="span"
-                        className="flex items-center justify-center gap-2"
-                    >
-                        <span>Add to bag</span> <span>·</span>{' '}
-                        <Money withoutTrailingZeros data={money} />
-                    </Text>
-                </Button>
-            </>
-        );
-    };
-
-    const addLineItemsToCart = useCallback(
-        (items, selectedVariant) => {
-            const lineItemsToAdd = items.map((item) => ({
-                quantity: 1,
-                merchandiseId: item.variantId,
-                attributes: [
-                    { key: '_source', value: 'Rebuy' },
-                    { key: '_attribution', value: 'Rebuy Product AddOn' },
-                ],
-            }));
-
-            // Add the selected variant of the main product
-            lineItemsToAdd.push({
-                quantity: 1,
-                merchandiseId: selectedVariant.id,
-            });
-
-            // Add additional cart lines
-            linesAdd(lineItemsToAdd);
-
-            return;
-        },
-        [linesAdd]
-    );
-
-    // reference object for line data
-    const refItems = useMemo(() => {
-        const items = {};
-
-        products.forEach((product) => {
-            // NOTE: More work must be done if the add-ons will have variant selectors of their own
-            const singleVariant = product.variants?.nodes[0];
-
-            items[product.id] = {
-                id: product.id,
-                variantId: singleVariant.id,
-                moneyPrice: singleVariant.priceV2, // full MoneyV2 object
-            };
-        });
-
-        return items;
-    }, [products]);
-
-    const setTotalMoney = useCallback(
-        (items) => {
-            // get base product price
-            const newTotalMoney = { ...selectedVariant.priceV2 };
-
-            if (items.length === 0) {
-                _setTotalMoney(newTotalMoney);
-                return;
-            }
-
-            // cast amount to number for calculation
-            let totalAmount = Number(newTotalMoney.amount);
-            // sum up the prices of the added items
-            items.forEach((item) => {
-                totalAmount += Number(item.moneyPrice.amount);
-            });
-
-            // cast amount back to string for MoneyV2
-            newTotalMoney.amount = String(totalAmount);
-
-            _setTotalMoney(newTotalMoney);
-            return;
-        },
-        [selectedVariant]
-    );
-
-    // listen for selected variant change from parent
-    useEffect(() => {
-        setTotalMoney(addedItems);
-    }, [addedItems, setTotalMoney]);
-
-    const handleChange = useCallback(
-        (event, product) => {
-            // const mainPrice = Number(selectedVariant.priceV2.amount);
-            let newAddedItems = [...addedItems];
-            if (event.target.checked) {
-                newAddedItems = [...addedItems, refItems[product.id]];
-            } else {
-                newAddedItems = addedItems.filter(
-                    (item) => item.id !== product.id
-                );
-            }
-
-            setAddedItems(newAddedItems);
-            setTotalMoney(newAddedItems);
-        },
-        [addedItems, refItems, setTotalMoney]
-    );
-
-    return (
-        /* Render Product AddOns with AddToCart Button */
-        product &&
-        products.length > 0 &&
-        !isOutOfStock && (
-            <div className={styles}>
-                <Heading size="lead" className="px-6 md:px-8 lg:px-12">
-                    {componentTitle}
-                </Heading>
-                {/* Product Add-Ons */}
-                <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 px-6 md:px-8 lg:px-12">
-                    {products.map((product) => (
-                        <li key={product.id}>
-                            <ProductOptionsProvider data={product}>
-                                <div className="mt-2">
-                                    <label
-                                        htmlFor={product.id}
-                                        className="cursor-pointer flex items-center hover:bg-slate-200 p-2 gap-2"
-                                    >
-                                        <input
-                                            type="checkbox"
-                                            value=""
-                                            disabled={
-                                                !product.variants.nodes[0]
-                                                    .availableForSale
-                                            }
-                                            name={product.title}
-                                            id={product.id}
-                                            checked={
-                                                addedItems.filter(
-                                                    (item) =>
-                                                        item.id === product.id
-                                                ).length > 0
-                                            }
-                                            className="accent-black rounded-sm cursor-pointer"
-                                            onChange={(event) =>
-                                                handleChange(event, product)
-                                            }
-                                        />
-                                        <RebuyProductAddOnCard
-                                            product={product}
-                                        />
-                                    </label>
-                                </div>
-                            </ProductOptionsProvider>
-                        </li>
-                    ))}
-                </ul>
-
-                <div className="px-6 md:px-8 lg:px-12">
-                    {/* Subtotal */}
-                    {Number(totalMoney.amount) >
-                        Number(selectedVariant.priceV2.amount) && (
-                        <Text
-                            as="div"
-                            className="flex gap-1 pb-4 text-gray-600"
-                        >
-                            Subtotal:{' '}
-                            <Money
-                                data={{
-                                    ...totalMoney,
-                                    amount: String(
-                                        totalMoney.amount -
-                                            selectedVariant.priceV2.amount
-                                    ),
-                                }}
-                                withoutTrailingZeros
-                            />
-                        </Text>
-                    )}
-
-                    {/* AddToCart Button */}
-                    <AddToCartMarkup
-                        items={addedItems}
-                        money={totalMoney}
-                        selectedVariant={selectedVariant}
-                    />
-                </div>
-            </div>
-        )
-    );
-};
-
-export default RebuyProductAddOns;

package/RebuyProductRecommendations.client.jsx

@@ -1,68 +0,0 @@
-import { AddToCartButton, ProductOptionsProvider } from '@shopify/hydrogen';
-import { Section } from '~/components';
-import { ProductCard } from '~/components/cards';
-import { Button } from '~/components/elements';
-
-const AddToCartMarkup = ({ product }) => {
-    const selectedVariant = product.variants.nodes[0];
-    const isOutOfStock = !selectedVariant.availableForSale;
-
-    return (
-        <div className="py-2">
-            <AddToCartButton
-                disabled={isOutOfStock}
-                product={product}
-                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"
-                >
-                    {isOutOfStock ? 'Out of stock' : 'Add to bag'}
-                </Button>
-            </AddToCartButton>
-        </div>
-    );
-};
-
-export const RebuyProductRecommendations = ({
-    product,
-    products,
-    title = `Like ${product.title}? You may also like:`,
-}) => {
-    return (
-        products.length > 0 && (
-            <Section heading={title} padding="y">
-                <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 px-6 md:px-8 lg:px-12">
-                    {products.map((product) => (
-                        <li key={product.id}>
-                            <ProductOptionsProvider
-                                data={product}
-                                initialVariantId={product.variants.nodes[0].id}
-                            >
-                                <ProductCard
-                                    product={product}
-                                    className={'w-100'}
-                                />
-                                <AddToCartMarkup product={product} />
-                            </ProductOptionsProvider>
-                        </li>
-                    ))}
-                </ul>
-            </Section>
-        )
-    );
-};
-
-export default RebuyProductRecommendations;

package/RebuyProductViewed.client.jsx

@@ -1,62 +0,0 @@
-import { RebuyClient } from '@rebuy/rebuy';
-import * as Utilities from '@rebuy/rebuy/utilities';
-import { useEffect, useMemo, useState } from 'react';
-
-const REBUY_API_KEY = import.meta.env.PUBLIC_REBUY_API_KEY;
-
-export const RebuyProductViewed = ({ children, ...props }) => {
-    const { product, productId, productHandle } = props;
-
-    // eslint-disable-next-line no-unused-vars
-    const [event, setEvent] = useState(null);
-    const [Rebuy, setRebuy] = useState(null);
-    const [initialized, setInitialized] = useState(false);
-    const shopifyProductId = product?.id ?? productId ?? null;
-
-    const request = useMemo(() => {
-        const request = {
-            parameters: {},
-        };
-
-        if (shopifyProductId) {
-            request.parameters.shopify_product_id = Utilities.getIdFromGraphUrl(
-                shopifyProductId,
-                'Product'
-            );
-        } else if (productHandle) {
-            request.parameters.shopify_product_handle = productHandle;
-        }
-
-        return request;
-    }, [productHandle, shopifyProductId]);
-
-    useEffect(() => {
-        const recordView = async () => {
-            const response = await Rebuy.trackProductViewed(request.parameters);
-
-            setEvent(response.data);
-        };
-
-        if (!initialized) {
-            const client = new RebuyClient(REBUY_API_KEY);
-
-            setRebuy(client);
-            setInitialized(true);
-
-            // Abort
-            return;
-        }
-
-        // Initialized
-        recordView();
-    }, [Rebuy, request, initialized]);
-
-    if (Object.keys(request.parameters).length === 0) {
-        console.warn('No parameters!');
-        return;
-    }
-
-    return children;
-};
-
-export default RebuyProductViewed;

package/RebuyRecentlyViewedProducts.client.jsx

@@ -1,68 +0,0 @@
-import { AddToCartButton, ProductOptionsProvider } from '@shopify/hydrogen';
-import { Section } from '~/components';
-import { ProductCard } from '~/components/cards';
-import { Button } from '~/components/elements';
-
-const AddToCartMarkup = ({ product }) => {
-    const selectedVariant = product.variants.nodes[0];
-    const isOutOfStock = !selectedVariant.availableForSale;
-
-    return (
-        <div className="py-2">
-            <AddToCartButton
-                disabled={isOutOfStock}
-                product={product}
-                variantId={selectedVariant?.id}
-                quantity={1}
-                accessibleAddingToCartLabel="Adding item to your cart"
-                type="button"
-                attributes={[
-                    { key: '_source', value: 'Rebuy' },
-                    {
-                        key: '_attribution',
-                        value: 'Rebuy Recently Viewed Product',
-                    },
-                ]}
-            >
-                <Button
-                    width="full"
-                    variant={isOutOfStock ? 'secondary' : 'primary'}
-                    as="span"
-                >
-                    {isOutOfStock ? 'Out of stock' : 'Add to bag'}
-                </Button>
-            </AddToCartButton>
-        </div>
-    );
-};
-
-export const RebuyRecentlyViewedProducts = ({ product, products }) => {
-    const title = 'Recently Viewed';
-    // Filter current product from recently viewed
-    const filtered = products.filter((recent) => recent.id !== product.id);
-
-    return (
-        filtered.length > 0 && (
-            <Section heading={title} padding="y">
-                <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16 px-6 md:px-8 lg:px-12">
-                    {filtered.map((product) => (
-                        <li key={product.id}>
-                            <ProductOptionsProvider
-                                data={product}
-                                initialVariantId={product.variants.nodes[0].id}
-                            >
-                                <ProductCard
-                                    product={product}
-                                    className={'w-100'}
-                                />
-                                <AddToCartMarkup product={product} />
-                            </ProductOptionsProvider>
-                        </li>
-                    ))}
-                </ul>
-            </Section>
-        )
-    );
-};
-
-export default RebuyRecentlyViewedProducts;

package/RebuyWidgetContainer.client.jsx

@@ -1,136 +0,0 @@
-import { RebuyClient } from '@rebuy/rebuy';
-import { RebuyContext } from '@rebuy/rebuy-hydrogen/RebuyContexts.client';
-import * as Utilities from '@rebuy/rebuy/utilities';
-import { flattenConnection, useCart } from '@shopify/hydrogen';
-import React, { useContext, useEffect, useMemo, useState } from 'react';
-
-const REBUY_API_KEY = import.meta.env.PUBLIC_REBUY_API_KEY;
-
-export const RebuyWidgetContainer = ({ children, ...props }) => {
-    const {
-        collection,
-        collectionId,
-        dataSource,
-        limit,
-        options,
-        product,
-        productId,
-        variant,
-        variantId,
-    } = props;
-
-    const cart = useCart();
-    const { contextParameters } = useContext(RebuyContext);
-    const [products, setProducts] = useState([]);
-    const [metadata, setMetadata] = useState({});
-    const [Rebuy, setRebuy] = useState(null);
-    const [initialized, setInitialized] = useState(false);
-    const isCartReady = ['uninitialized', 'idle'].includes(cart.status); // uninitialized, creating, fetching, updating, idle
-    const shopifyProductId = product?.id ?? productId ?? null;
-    const shopifyVariantId = variant?.id ?? variantId ?? null;
-    const shopifyCollectionId = collection?.id ?? collectionId ?? null;
-
-    // Initialize Rebuy API client
-    useEffect(() => {
-        if (!Rebuy) {
-            const client = new RebuyClient(REBUY_API_KEY);
-            client.setContextParameters(contextParameters);
-
-            if (options) {
-                client.setDefaultParameters(options);
-            }
-
-            setRebuy(client);
-            setInitialized(true);
-        }
-    }, [Rebuy, contextParameters, options]);
-
-    // Update context params
-    useEffect(() => {
-        if (!Rebuy) return;
-
-        Rebuy.setContextParameters(contextParameters);
-    }, [Rebuy, contextParameters]);
-
-    // Memoize request object on prop changes (e.g. product)
-    const request = useMemo(() => {
-        const request = {
-            url: dataSource || '/api/v1/products/recommended',
-            parameters: {},
-        };
-
-        if (shopifyProductId) {
-            request.parameters.shopify_product_ids =
-                Utilities.getIdFromGraphUrl(shopifyProductId, 'Product');
-        }
-
-        if (shopifyVariantId) {
-            request.parameters.shopify_variant_ids =
-                Utilities.getIdFromGraphUrl(shopifyVariantId, 'ProductVariant');
-        }
-
-        if (shopifyCollectionId) {
-            request.parameters.shopify_collection_ids =
-                Utilities.getIdFromGraphUrl(shopifyCollectionId, 'Collection');
-        }
-
-        if (limit) {
-            request.parameters.limit = limit;
-        }
-
-        return request;
-    }, [
-        dataSource,
-        limit,
-        shopifyCollectionId,
-        shopifyProductId,
-        shopifyVariantId,
-    ]);
-
-    // Update product recommendations on cart or request change
-    useEffect(() => {
-        let ignore = false;
-
-        // Initializing...
-        if (!initialized || !Rebuy || !isCartReady) return;
-
-        const fetchData = async () => {
-            const { data, metadata } = await Rebuy.getStorefrontData(
-                request.url,
-                request.parameters
-            );
-
-            data.forEach((product) => {
-                product.variants = {
-                    nodes: flattenConnection(product.variants),
-                };
-            });
-
-            // Set state only if mounted
-            if (!ignore) {
-                setProducts(data);
-                setMetadata(metadata);
-            }
-        };
-
-        fetchData();
-
-        // Unmounted?
-        return () => {
-            ignore = true;
-        };
-    }, [Rebuy, initialized, request, isCartReady]);
-
-    const childrenWithProps = (props) =>
-        React.Children.map(children, (child) =>
-            React.isValidElement(child)
-                ? React.cloneElement(child, props)
-                : child
-        );
-
-    const childProps = { ...props, products, metadata, key: product.id };
-
-    return childrenWithProps(childProps);
-};
-
-export default RebuyWidgetContainer;