@rebuy/rebuy-hydrogen 1.0.3 → 2.1.0

package/RebuyContextProvider.client.jsx

@@ -1,13 +1,33 @@
-import { useUrl, useCart } from '@shopify/hydrogen';
-
-import React, { createContext, useMemo } from 'react';
-
+import { RebuyClient } from '@rebuy/rebuy';
+import { RebuyContext } from '@rebuy/rebuy-hydrogen/RebuyContexts.client';
 import * as Utilities from '@rebuy/rebuy/utilities';
+import { useCart, useShop, useUrl } from '@shopify/hydrogen';
+import { useEffect, useMemo, useState } from 'react';
+
+const REBUY_API_KEY = import.meta.env.PUBLIC_REBUY_API_KEY;
+const API = '/api/v1';
+
+const getEncodedAttributes = (attributes) =>
+    encodeURIComponent(
+        JSON.stringify(
+            attributes.reduce(
+                (merged, { key, value }) => ({ ...merged, [key]: value }),
+                {}
+            )
+        )
+    );
 
-export const RebuyContext = createContext(null);
-
-export function RebuyContextProvider({ children }) {
+export const RebuyContextProvider = ({ children }) => {
+    // Shopify
+    const cart = useCart();
+    const shop = useShop();
     const url = useUrl();
+
+    // Default state
+    const [initialized, setInitialized] = useState(false);
+    const [rebuyConfig, setRebuyConfig] = useState(null);
+    const [config, setConfig] = useState({ shop: null });
+    // const [Rebuy, setRebuy] = useState(null);
     const queryObject = Utilities.queryStringToObject(url.search);
     const utmObject = Utilities.utmObjectFromString(url);
 
@@ -17,114 +37,186 @@ export function RebuyContextProvider({ children }) {
         }
     }
 
-    const cart = useCart();
-
-    const contextParameters = {};
-
-    // Set URL
-    contextParameters.url = url.href;
+    // Initialization
+    useEffect(() => {
+        const getRebuyConfig = async () => {
+            try {
+                const request = {
+                    url: `${API}/user/config`,
+                    parameters: { shop: shop.storeDomain },
+                };
+
+                const { data: rebuy, ...response } = await new RebuyClient(
+                    REBUY_API_KEY
+                ).getDataFromCDN(request.url, request.parameters);
+
+                // Missing Rebuy shop data?
+                if (!rebuy?.shop) {
+                    throw new Error(
+                        'Rebuy configuration is not properly set up - missing shop',
+                        { cause: response }
+                    );
+                }
 
-    // Set time
-    if (queryObject.hasOwnProperty('time')) {
-        contextParameters.time = queryObject.time;
-    }
+                setRebuyConfig(rebuy);
+            } catch (err) {
+                console.warn('Error fetching Rebuy shop config');
+                console.error(err, err.cause);
+            }
+        };
 
-    // Cart object
-    const cartContext = {};
+        const onBeforeReady = async () => {
+            // Initializing...
+            if (!rebuyConfig?.shop) {
+                return await getRebuyConfig();
+            }
+        };
+
+        onBeforeReady();
+    }, [rebuyConfig, shop]);
+
+    useEffect(() => {
+        const applyConfig = async () => {
+            // Still fetching Rebuy config OR config already applied. Abort!
+            if (!rebuyConfig || config.shop) return;
+
+            // Bring it all together
+            const appConfig = { ...config, ...rebuyConfig };
+
+            setConfig(appConfig);
+        };
+
+        applyConfig();
+    }, [config, rebuyConfig]);
+
+    useEffect(() => {
+        const onReady = () => {
+            // Still initializing... Abort!
+            if (!config.shop) return;
+
+            // Initialized!
+            setInitialized(true);
+            // const { api_key, cache_key } = config.shop;
+            // setRebuy(new RebuyClient(api_key, { cache_key }));
+        };
+
+        onReady();
+    }, [config]);
+
+    const contextParameters = useMemo(() => {
+        // Still initializing... Abort!
+        if (!config.shop) return null;
+
+        const { cache_key } = config.shop;
+        const contextParameters = {
+            url: url.href,
+            cache_key,
+        };
+        // Cart object
+        const cartContext = {};
+
+        // Set time
+        if (Object.prototype.hasOwnProperty.call(queryObject, 'time')) {
+            contextParameters.time = queryObject.time;
+        }
 
-    // Set Cart: token
-    if (cart.id) {
-        cartContext.token = Utilities.getIdFromGraphUrl(cart.id, 'Cart');
-        contextParameters.cart_token = Utilities.getIdFromGraphUrl(cart.id, 'Cart');
-    }
+        // Set Cart: token
+        if (cart.id) {
+            cartContext.token = Utilities.getIdFromGraphUrl(cart.id, 'Cart');
+            contextParameters.cart_token = Utilities.getIdFromGraphUrl(
+                cart.id,
+                'Cart'
+            );
+        }
 
-    // Set Cart: subtotal
-    if (
-        cart.estimatedCost &&
-        cart.estimatedCost.subtotalAmount &&
-        cart.estimatedCost.subtotalAmount &&
-        cart.estimatedCost.subtotalAmount.amount
-    ) {
-        cartContext.subtotal = Utilities.amountToCents(cart.estimatedCost.subtotalAmount.amount);
-        contextParameters.cart_subtotal = Utilities.amountToCents(cart.estimatedCost.subtotalAmount.amount);
-    }
+        // Set Cart: subtotal
+        if (cart.cost?.subtotalAmount?.amount) {
+            const { amount } = cart.cost.subtotalAmount;
 
-    // Set Cart: line count
-    if (typeof cart.lines != 'undefined') {
-        cartContext.line_count = cart.lines.length;
-        contextParameters.cart_count = cart.lines.length;
-        contextParameters.cart_line_count = cart.lines.length;
-    }
+            cartContext.subtotal = Utilities.amountToCents(amount);
+            contextParameters.cart_subtotal = Utilities.amountToCents(amount);
+        }
 
-    // Set Cart: item count
-    if (typeof cart.totalQuantity != 'undefined') {
-        cartContext.item_count = cart.totalQuantity;
-        contextParameters.cart_item_count = cart.totalQuantity;
-    }
+        // Set Cart: line count
+        if (typeof cart.lines != 'undefined') {
+            const totalLines = cart.lines.length;
 
-    // Set Cart: line items
-    if (typeof cart.lines != 'undefined') {
-        cartContext.items = [];
-        for (let i = 0; i < cart.lines.length; i++) {
-            const cartItem = cart.lines[i];
+            cartContext.line_count = totalLines;
+            contextParameters.cart_count = totalLines;
+            contextParameters.cart_line_count = totalLines;
+        }
 
-            const item = {};
+        // Set Cart: item count
+        if (typeof cart.totalQuantity != 'undefined') {
+            const { totalQuantity } = cart;
 
-            if (cartItem.product?.id) {
-                item.product_id = Utilities.getIdFromGraphUrl(cartItem.product.id, 'Product');
-            }
+            cartContext.item_count = totalQuantity;
+            contextParameters.cart_item_count = totalQuantity;
+        }
 
-            if (cartItem.merchandise?.id) {
-                item.variant_id = Utilities.getIdFromGraphUrl(cartItem.merchandise.id, 'ProductVariant');
-            }
+        // Set Cart: line items
+        if (typeof cart.lines != 'undefined') {
+            cartContext.items = [];
 
-            item.quantity = cartItem.quantity;
+            for (const cartItem of cart.lines) {
+                const item = {
+                    quantity: cartItem.quantity,
+                };
 
-            if (cartItem.attributes) {
-                const attributes = {};
+                if (cartItem.product?.id) {
+                    item.product_id = Utilities.getIdFromGraphUrl(
+                        cartItem.product.id,
+                        'Product'
+                    );
+                }
 
-                for (let i = 0; i < cartItem.attributes.length; i++) {
-                    const key = cartItem.attributes[i].key;
-                    const value = cartItem.attributes[i].value;
-                    attributes[key] = value;
+                if (cartItem.merchandise?.id) {
+                    item.variant_id = Utilities.getIdFromGraphUrl(
+                        cartItem.merchandise.id,
+                        'ProductVariant'
+                    );
                 }
 
-                item.properties = JSON.stringify(attributes);
-            }
+                if (cartItem.attributes) {
+                    item.properties = getEncodedAttributes(cartItem.attributes);
+                }
 
-            // TBD: item.selling_plan
+                // TBD: item.selling_plan
 
-            cartContext.items.push(item);
+                cartContext.items.push(item);
+            }
         }
-    }
 
-    // Set Cart: attributes
-    if (cart.attributes) {
-        const attributes = {};
-
-        for (let i = 0; i < cart.attributes.length; i++) {
-            const key = cart.attributes[i].key;
-            const value = cart.attributes[i].value;
-            attributes[key] = value;
+        // Set Cart: attributes
+        if (cart.attributes) {
+            cartContext.attributes = getEncodedAttributes(cart.attributes);
         }
 
-        cartContext.attributes = JSON.stringify(attributes);
-    }
+        // Set Cart: notes
+        if (cart.note) {
+            cartContext.note = cart.note;
+        }
 
-    // Set Cart: notes
-    if (cart.note) {
-        cartContext.note = cart.note;
-    }
+        // Set cart
+        contextParameters.cart = cartContext;
 
-    // Set cart
-    contextParameters.cart = cartContext;
+        return contextParameters;
+    }, [cart, config, queryObject, url]);
 
-    const value = useMemo(
-        () => ({
-            ...contextParameters,
-        }),
-        [contextParameters]
+    // Static reference (JSON) + memoization
+    // ^ prevent re-rendering children when context params are unchanged
+    const contextParametersJSON = JSON.stringify(contextParameters);
+    const contextValue = useMemo(
+        () => ({ contextParameters: JSON.parse(contextParametersJSON) }),
+        [contextParametersJSON]
     );
 
-    return React.createElement(RebuyContext.Provider, { value }, children);
-}
+    // Still initializing...
+    if (!initialized) return null;
+
+    return (
+        <RebuyContext.Provider value={contextValue}>
+            {children}
+        </RebuyContext.Provider>
+    );
+};

package/RebuyContexts.client.jsx

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const RebuyContext = createContext(null);

package/RebuyProductAddOnCard.client.jsx

@@ -0,0 +1,87 @@
+import { Image, Link, Money } from '@shopify/hydrogen';
+import clsx from 'clsx';
+import { Text } from '~/components';
+import { isDiscounted } from '~/lib/utils';
+
+const CompareAtPrice = ({ data: compareAtPrice, className }) => {
+    const styles = clsx('strike', className);
+
+    return (
+        <Money
+            withoutTrailingZeros
+            data={compareAtPrice}
+            as="span"
+            className={styles}
+        />
+    );
+};
+
+const RebuyProductPrice = ({ selectedVariant = {} }) => {
+    const { priceV2: price, compareAtPriceV2: compareAtPrice } =
+        selectedVariant;
+
+    return (
+        price && (
+            <div className="gap-4">
+                <Text className="flex gap-2">
+                    <Money data={price} withoutTrailingZeros as="span" />
+                    {isDiscounted(price, compareAtPrice) && (
+                        <CompareAtPrice
+                            data={compareAtPrice}
+                            className={'opacity-50'}
+                        />
+                    )}
+                </Text>
+            </div>
+        )
+    );
+};
+
+export const RebuyProductAddOnCard = ({
+    product = {},
+    selectedVariant = product.variants.nodes[0],
+}) => {
+    if (!selectedVariant) {
+        return null;
+    }
+
+    const { image, availableForSale } = selectedVariant;
+    const isOutOfStock = !availableForSale;
+
+    return (
+        <div className="mb-4 flex">
+            <div className="flex items-center justify-center overflow-hidden mx-auto">
+                {image && (
+                    <Image
+                        className="fadeIn"
+                        data={image}
+                        alt={image.altText || `Picture of ${product.title}`}
+                        width={80}
+                        height={80}
+                        loaderOptions={{ scale: 2 }}
+                    />
+                )}
+                {isOutOfStock && (
+                    <div className="absolute top-3 left-3 rounded text-xs bg-primary/60 text-contrast py-3 px-4">
+                        <Text>Out of stock</Text>
+                    </div>
+                )}
+            </div>
+
+            <div className="grid grid-rows-3 ml-3">
+                <Text className="font-medium">{product.title}</Text>
+
+                <RebuyProductPrice selectedVariant={selectedVariant} />
+
+                <Link
+                    to={`/products/${product?.handle}`}
+                    className="text-xs underline text-primary/50 hover:underline hover:text-primary"
+                >
+                    Learn More
+                </Link>
+            </div>
+        </div>
+    );
+};
+
+export default RebuyProductAddOnCard;

package/RebuyProductAddOns.client.jsx

@@ -0,0 +1,228 @@
+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 = '',
+    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 =
+        title ?? language?.title ?? `Popular Add-Ons for ${product.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: '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;