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

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;

package/RebuyContextProvider.client.jsx

@@ -1,222 +0,0 @@
-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 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);
-
-    if (utmObject != null) {
-        for (const key in utmObject) {
-            url.searchParams.set(key, utmObject[key]);
-        }
-    }
-
-    // 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
-                ).getShieldedAsset(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 }
-                    );
-                }
-
-                setRebuyConfig(rebuy);
-            } catch (err) {
-                console.warn('Error fetching Rebuy shop config');
-                console.error(err, err.cause);
-            }
-        };
-
-        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: subtotal
-        if (cart.cost?.subtotalAmount?.amount) {
-            const { amount } = cart.cost.subtotalAmount;
-
-            cartContext.subtotal = Utilities.amountToCents(amount);
-            contextParameters.cart_subtotal = Utilities.amountToCents(amount);
-        }
-
-        // Set Cart: line count
-        if (typeof cart.lines != 'undefined') {
-            const totalLines = cart.lines.length;
-
-            cartContext.line_count = totalLines;
-            contextParameters.cart_count = totalLines;
-            contextParameters.cart_line_count = totalLines;
-        }
-
-        // Set Cart: item count
-        if (typeof cart.totalQuantity != 'undefined') {
-            const { totalQuantity } = cart;
-
-            cartContext.item_count = totalQuantity;
-            contextParameters.cart_item_count = totalQuantity;
-        }
-
-        // Set Cart: line items
-        if (typeof cart.lines != 'undefined') {
-            cartContext.items = [];
-
-            for (const cartItem of cart.lines) {
-                const item = {
-                    quantity: cartItem.quantity,
-                };
-
-                if (cartItem.product?.id) {
-                    item.product_id = Utilities.getIdFromGraphUrl(
-                        cartItem.product.id,
-                        'Product'
-                    );
-                }
-
-                if (cartItem.merchandise?.id) {
-                    item.variant_id = Utilities.getIdFromGraphUrl(
-                        cartItem.merchandise.id,
-                        'ProductVariant'
-                    );
-                }
-
-                if (cartItem.attributes) {
-                    item.properties = getEncodedAttributes(cartItem.attributes);
-                }
-
-                // TBD: item.selling_plan
-
-                cartContext.items.push(item);
-            }
-        }
-
-        // Set Cart: attributes
-        if (cart.attributes) {
-            cartContext.attributes = getEncodedAttributes(cart.attributes);
-        }
-
-        // Set Cart: notes
-        if (cart.note) {
-            cartContext.note = cart.note;
-        }
-
-        // Set cart
-        contextParameters.cart = cartContext;
-
-        return contextParameters;
-    }, [cart, config, queryObject, url]);
-
-    // 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]
-    );
-
-    // Still initializing...
-    if (!initialized) return null;
-
-    return (
-        <RebuyContext.Provider value={contextValue}>
-            {children}
-        </RebuyContext.Provider>
-    );
-};

package/RebuyContexts.client.jsx

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