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

package/src/components/ProductCard/types.ts

@@ -0,0 +1,10 @@
+import type { ProductCardTitleLevel } from '~/types/common';
+import type { RebuyProduct } from '~/types/rebuyCustom';
+
+export type ProductCardProps = {
+    addToCartBtnText?: string;
+    addToCartCallback?: () => void; // to allow for custom add to cart logic/opening the cart drawer
+    isHydrogenReact?: boolean;
+    product: RebuyProduct;
+    productCardTitleLevel: ProductCardTitleLevel;
+};

package/src/components/ProductPrice/ProductPrice.tsx

@@ -0,0 +1,49 @@
+import { Money } from '@shopify/hydrogen';
+
+import styles from './ProductPrice.module.css';
+
+import type { MoneyV2 } from '@shopify/hydrogen-react/storefront-api-types';
+import type { RebuyProductVariant } from '~/types/rebuyCustom';
+
+export const RebuyProductPrice = ({
+    selectedVariant,
+}: {
+    selectedVariant: RebuyProductVariant;
+}) => {
+    if (!selectedVariant) return null;
+    const { compareAtPriceV2: compareAtPrice, priceV2: price } =
+        selectedVariant;
+
+    const isDiscounted = (
+        price: MoneyV2 | null,
+        compareAtPrice: MoneyV2 | null
+    ) => Number(compareAtPrice?.amount) > Number(price?.amount);
+
+    const CompareAtPrice = ({
+        data: compareAtPrice,
+    }: {
+        data: MoneyV2 | null;
+    }) => {
+        return (
+            compareAtPrice && (
+                <Money
+                    as="span"
+                    className={styles.compareAtPrice}
+                    data={compareAtPrice}
+                    withoutTrailingZeros
+                />
+            )
+        );
+    };
+
+    return (
+        price && (
+            <div className={styles.priceContainer}>
+                <Money data={price} withoutTrailingZeros />
+                {compareAtPrice && isDiscounted(price, compareAtPrice) && (
+                    <CompareAtPrice data={compareAtPrice} />
+                )}
+            </div>
+        )
+    );
+};

package/src/components/ProductPrice/index.ts

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

package/src/components/Title/Title.tsx

@@ -0,0 +1,19 @@
+import type { TitleProps } from '~/components/Title/types';
+
+export const Title = ({ level, style, text }: TitleProps) => {
+    switch (level) {
+        case 'h1':
+            return <h1 style={style}>{text}</h1>;
+        default:
+        case 'h2':
+            return <h2 style={style}>{text}</h2>;
+        case 'h3':
+            return <h3 style={style}>{text}</h3>;
+        case 'h4':
+            return <h4 style={style}>{text}</h4>;
+        case 'h5':
+            return <h5 style={style}>{text}</h5>;
+        case 'h6':
+            return <h6 style={style}>{text}</h6>;
+    }
+};

package/src/components/Title/index.ts

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

package/src/components/Title/types.ts

@@ -0,0 +1,7 @@
+import type { ProductCardTitleLevel } from '~/types/common';
+
+export type TitleProps = {
+    level: ProductCardTitleLevel;
+    style?: React.CSSProperties;
+    text: string;
+};

package/src/components/VariantSelect/VariantSelect.tsx

@@ -0,0 +1,45 @@
+import styles from './VariantSelect.module.css';
+
+import type { VariantSelectProps } from '~/components/VariantSelect/types';
+import type { RebuyProduct } from '~/types/rebuyCustom';
+
+export const VariantSelect = ({
+    handleSelectedVariant,
+    product,
+}: VariantSelectProps) => {
+    const getOptionsLabel = (product: RebuyProduct) => {
+        const options = product.variants.nodes[0].selectedOptions;
+        const optionsFromKeys = options ? Object.keys(options[0]) : [];
+        const optionsFromValues = options
+            ? 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(' / ');
+    };
+
+    return (
+        product?.variants.nodes.length > 1 && (
+            <div>
+                <select
+                    aria-label="select variant"
+                    className={styles.select}
+                    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>
+        )
+    );
+};

package/src/components/VariantSelect/index.ts

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

package/src/components/VariantSelect/types.ts

@@ -0,0 +1,6 @@
+import type { RebuyProduct } from '~/types/rebuyCustom';
+
+export type VariantSelectProps = {
+    handleSelectedVariant: (product: RebuyProduct, variant_id: string) => void;
+    product: RebuyProduct;
+};

package/src/context/RebuyContext.tsx

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+
+import { type ContextParameters } from '~/types/rebuyCustom';
+
+export type RebuyContextType = {
+    contextParameters: ContextParameters;
+};
+
+export const RebuyContext = createContext<RebuyContextType | null>(null);

package/src/hooks/titleLevel.tsx

@@ -0,0 +1,42 @@
+import { ProductCardTitleLevel } from '~/types/common';
+
+// Convert the string header level to enum
+export const getTitleLevel = (
+    level: string,
+    decreaseLevel: boolean = false
+): ProductCardTitleLevel => {
+    switch (level) {
+        case 'h1':
+            if (decreaseLevel) {
+                return ProductCardTitleLevel.H2;
+            }
+            return ProductCardTitleLevel.H1;
+        case 'h2':
+            if (decreaseLevel) {
+                return ProductCardTitleLevel.H3;
+            }
+            return ProductCardTitleLevel.H2;
+        case 'h3':
+            if (decreaseLevel) {
+                return ProductCardTitleLevel.H4;
+            }
+            return ProductCardTitleLevel.H3;
+        case 'h4':
+            if (decreaseLevel) {
+                return ProductCardTitleLevel.H5;
+            }
+            return ProductCardTitleLevel.H4;
+        case 'h5':
+            if (decreaseLevel) {
+                return ProductCardTitleLevel.H6;
+            }
+            return ProductCardTitleLevel.H5;
+        case 'h6':
+            if (decreaseLevel) {
+                return ProductCardTitleLevel.H6;
+            }
+            return ProductCardTitleLevel.H6;
+        default:
+            return ProductCardTitleLevel.H2;
+    }
+};

package/src/index.ts

@@ -0,0 +1,7 @@
+export * from './providers/RebuyHydrogenContextProvider';
+export * from './providers/RebuyHydrogenReactContextProvider';
+export * from './widgetContainer/RebuyWidgetContainer';
+export * from './widgets/RebuyCompleteTheLook';
+export * from './widgets/RebuyDynamicBundleProducts';
+export * from './widgets/RebuyProductAddOns';
+export * from './widgets/RebuyProductRecommendations';

package/src/providers/RebuyHydrogenContextProvider.tsx

@@ -0,0 +1,112 @@
+import * as Utilities from '@rebuy/rebuy/utilities';
+import { Await, useLocation } from '@remix-run/react';
+import { useEffect, useMemo, useState } from 'react';
+
+import type { CartReturn } from '@shopify/hydrogen';
+import type {
+    RebuyHydrogenContextProviderProps,
+    RebuyHydrogenProps,
+} from '~/providers/types';
+
+import { RebuyContext } from '~/context/RebuyContext';
+import { RebuyConfig } from '~/types/rebuyCustom';
+import { createContextParameters } from '~/utils/createContextParameters';
+import { getRebuyConfig } from '~/utils/getRebuyConfig';
+
+const RebuyHydrogenContext = ({
+    cartAttributes,
+    cartCost,
+    cartId,
+    cartLines,
+    cartNote,
+    cartQuantity,
+    children,
+}: RebuyHydrogenProps) => {
+    const primaryDomain = import.meta.env.PRIMARY_DOMAIN;
+    const rebuyKey = import.meta.env.PUBLIC_REBUY_API_KEY;
+    const storeDomain = import.meta.env.PUBLIC_STORE_DOMAIN;
+
+    const [rebuyConfig, setRebuyConfig] = useState<RebuyConfig | null>(null);
+    const location = useLocation();
+    const queryObject = Utilities.queryStringToObject(location.search);
+    const windowUrl = `${primaryDomain}${location.pathname}${location.search}`;
+
+    // Initialization
+    useEffect(() => {
+        const initConfig = async () => {
+            const config = await getRebuyConfig(rebuyKey, storeDomain);
+            setRebuyConfig(config);
+        };
+
+        if (!rebuyConfig?.shop) {
+            initConfig();
+        }
+    }, [rebuyConfig, rebuyKey, storeDomain]);
+
+    const contextParameters = useMemo(
+        () =>
+            createContextParameters({
+                cacheKey: rebuyConfig?.shop?.cache_key,
+                cartAttributes,
+                cartId,
+                cartLines,
+                cartLinesLength: cartLines?.length,
+                cartNote: cartNote as string,
+                cartSubtotal: cartCost,
+                cartTotalQuantity: cartQuantity,
+                isHydrogenReact: false,
+                queryObject,
+                windowUrl,
+            }),
+        [
+            rebuyConfig,
+            windowUrl,
+            queryObject,
+            cartAttributes,
+            cartCost,
+            cartId,
+            cartLines,
+            cartQuantity,
+            cartNote,
+        ]
+    );
+
+    // 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 (
+        <RebuyContext.Provider value={contextValue}>
+            {children}
+        </RebuyContext.Provider>
+    );
+};
+
+export const RebuyHydrogenContextProvider = ({
+    cart,
+    children,
+}: RebuyHydrogenContextProviderProps) => {
+    return (
+        <Await resolve={cart}>
+            {(resolvedCart) => {
+                const cart = resolvedCart as CartReturn;
+                return (
+                    <RebuyHydrogenContext
+                        cartAttributes={cart?.attributes}
+                        cartCost={cart?.cost?.subtotalAmount?.amount}
+                        cartId={cart?.id}
+                        cartLines={cart?.lines?.nodes}
+                        cartNote={cart?.note}
+                        cartQuantity={cart?.totalQuantity}
+                    >
+                        {children}
+                    </RebuyHydrogenContext>
+                );
+            }}
+        </Await>
+    );
+};

package/src/providers/RebuyHydrogenReactContextProvider.tsx

@@ -0,0 +1,192 @@
+import * as Utilities from '@rebuy/rebuy/utilities';
+import { useLocation } from '@remix-run/react';
+import {
+    CartProvider,
+    ShopifyProvider,
+    useCart,
+} from '@shopify/hydrogen-react';
+import { useEffect, useMemo, useState } from 'react';
+
+import type { Attribute } from '@shopify/hydrogen-react/storefront-api-types';
+import type {
+    RebuyHydrogenReactContextProviderProps,
+    RebuyHydrogenReactProps,
+} from '~/providers/types';
+import type { RebuyConfig } from '~/types/rebuyCustom';
+
+import { RebuyContext } from '~/context/RebuyContext';
+import { CART_FRAGMENT } from '~/queries/cart.queries';
+import { createContextParameters } from '~/utils/createContextParameters';
+import { getRebuyConfig } from '~/utils/getRebuyConfig';
+
+const RebuyHydrogenReactContext = ({ children }: RebuyHydrogenReactProps) => {
+    const primaryDomain = import.meta.env.PRIMARY_DOMAIN;
+    const rebuyKey = import.meta.env.PUBLIC_REBUY_API_KEY;
+    const storeDomain = import.meta.env.PUBLIC_STORE_DOMAIN;
+
+    const [rebuyConfig, setRebuyConfig] = useState<RebuyConfig | null>(null);
+    const location = useLocation();
+    const queryObject = Utilities.queryStringToObject(location.search);
+    const windowUrl = `${primaryDomain}${location.pathname}${location.search}`;
+
+    // This is the cart object from Hydrogen-React
+    const cart = useCart();
+
+    // Initialization
+    useEffect(() => {
+        const initConfig = async () => {
+            const config = await getRebuyConfig(rebuyKey, storeDomain);
+            setRebuyConfig(config);
+        };
+
+        if (!rebuyConfig?.shop) {
+            initConfig();
+        }
+    }, [rebuyConfig, rebuyKey, storeDomain]);
+
+    const contextParameters = useMemo(
+        () =>
+            createContextParameters({
+                cacheKey: rebuyConfig?.shop?.cache_key,
+                cartAttributes: cart?.attributes as Attribute[],
+                cartId: cart?.id,
+                cartLines: cart?.lines,
+                cartLinesLength: cart?.lines?.length,
+                cartSubtotal: cart?.cost?.subtotalAmount?.amount,
+                cartTotalQuantity: cart?.totalQuantity,
+                isHydrogenReact: true,
+                queryObject,
+                windowUrl,
+            }),
+        [rebuyConfig, windowUrl, queryObject, cart]
+    );
+
+    // 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 (
+        <RebuyContext.Provider value={contextValue}>
+            {children}
+        </RebuyContext.Provider>
+    );
+};
+
+export const RebuyHydrogenReactContextProvider = ({
+    cartFragment = CART_FRAGMENT,
+    children,
+    countryIsoCode = 'US',
+    customerAccessToken = '',
+    data,
+    languageIsoCode = 'EN',
+    numCartLines,
+    onAttributesUpdate,
+    onAttributesUpdateComplete,
+    onBuyerIdentityUpdate,
+    onBuyerIdentityUpdateComplete,
+    onCreate,
+    onCreateComplete,
+    onDiscountCodesUpdate,
+    onDiscountCodesUpdateComplete,
+    onLineAdd,
+    onLineAddComplete,
+    onLineRemove,
+    onLineRemoveComplete,
+    onLineUpdate,
+    onLineUpdateComplete,
+    onNoteUpdate,
+    onNoteUpdateComplete,
+    storefrontApiVersion = '2025-01',
+}: RebuyHydrogenReactContextProviderProps) => {
+    const publicStoreDomain = import.meta.env.PUBLIC_STORE_DOMAIN;
+    const storefrontId = import.meta.env.PUBLIC_STOREFRONT_ID;
+    const storefrontToken = import.meta.env.PUBLIC_STOREFRONT_API_TOKEN || '';
+    const adapted = {
+        onAttributesUpdate: onAttributesUpdate
+            ? () => onAttributesUpdate()
+            : undefined,
+        onAttributesUpdateComplete: onAttributesUpdateComplete
+            ? () => onAttributesUpdateComplete()
+            : undefined,
+        onBuyerIdentityUpdate: onBuyerIdentityUpdate
+            ? () => onBuyerIdentityUpdate()
+            : undefined,
+        onBuyerIdentityUpdateComplete: onBuyerIdentityUpdateComplete
+            ? () => onBuyerIdentityUpdateComplete()
+            : undefined,
+        onCreate: onCreate ? () => onCreate() : undefined,
+        onCreateComplete: onCreateComplete
+            ? () => onCreateComplete()
+            : undefined,
+        onDiscountCodesUpdate: onDiscountCodesUpdate
+            ? () => onDiscountCodesUpdate()
+            : undefined,
+        onDiscountCodesUpdateComplete: onDiscountCodesUpdateComplete
+            ? () => onDiscountCodesUpdateComplete()
+            : undefined,
+        onLineAdd: onLineAdd ? () => onLineAdd() : undefined,
+        onLineAddComplete: onLineAddComplete
+            ? () => onLineAddComplete()
+            : undefined,
+        onLineRemove: onLineRemove ? () => onLineRemove() : undefined,
+        onLineRemoveComplete: onLineRemoveComplete
+            ? () => onLineRemoveComplete()
+            : undefined,
+        onLineUpdate: onLineUpdate ? () => onLineUpdate() : undefined,
+        onLineUpdateComplete: onLineUpdateComplete
+            ? () => onLineUpdateComplete()
+            : undefined,
+        onNoteUpdate: onNoteUpdate ? () => onNoteUpdate() : undefined,
+        onNoteUpdateComplete: onNoteUpdateComplete
+            ? () => onNoteUpdateComplete()
+            : undefined,
+    };
+
+    return (
+        <ShopifyProvider
+            countryIsoCode={countryIsoCode}
+            languageIsoCode={languageIsoCode}
+            storeDomain={publicStoreDomain}
+            storefrontApiVersion={storefrontApiVersion}
+            storefrontId={storefrontId}
+            storefrontToken={storefrontToken}
+        >
+            <CartProvider
+                cartFragment={cartFragment}
+                countryCode={countryIsoCode}
+                customerAccessToken={customerAccessToken}
+                data={data}
+                languageCode={languageIsoCode}
+                numCartLines={numCartLines}
+                onAttributesUpdate={adapted.onAttributesUpdate}
+                onAttributesUpdateComplete={adapted.onAttributesUpdateComplete}
+                onBuyerIdentityUpdate={adapted.onBuyerIdentityUpdate}
+                onBuyerIdentityUpdateComplete={
+                    adapted.onBuyerIdentityUpdateComplete
+                }
+                onCreate={adapted.onCreate}
+                onCreateComplete={adapted.onCreateComplete}
+                onDiscountCodesUpdate={adapted.onDiscountCodesUpdate}
+                onDiscountCodesUpdateComplete={
+                    adapted.onDiscountCodesUpdateComplete
+                }
+                onLineAdd={adapted.onLineAdd}
+                onLineAddComplete={adapted.onLineAddComplete}
+                onLineRemove={adapted.onLineRemove}
+                onLineRemoveComplete={adapted.onLineRemoveComplete}
+                onLineUpdate={adapted.onLineUpdate}
+                onLineUpdateComplete={adapted.onLineUpdateComplete}
+                onNoteUpdate={adapted.onNoteUpdate}
+                onNoteUpdateComplete={adapted.onNoteUpdateComplete}
+            >
+                <RebuyHydrogenReactContext>
+                    {children}
+                </RebuyHydrogenReactContext>
+            </CartProvider>
+        </ShopifyProvider>
+    );
+};

package/src/providers/types.ts

@@ -0,0 +1,58 @@
+import { PartialDeep } from 'type-fest';
+
+import type { CartReturn } from '@shopify/hydrogen';
+import type {
+    Attribute,
+    Cart,
+    CartLine,
+    ComponentizableCartLine,
+    CountryCode,
+    LanguageCode,
+    Maybe,
+} from '@shopify/hydrogen-react/storefront-api-types';
+
+export type RebuyHydrogenContextProviderProps = {
+    cart: CartReturn;
+    children: React.ReactNode;
+};
+
+export type RebuyHydrogenProps = {
+    cartAttributes?: Attribute[];
+    cartCost?: string;
+    cartId?: string;
+    cartLines?: (CartLine | ComponentizableCartLine)[];
+    cartNote?: Maybe<string>;
+    cartQuantity?: number;
+    children: React.ReactNode;
+};
+
+export type RebuyHydrogenReactProps = {
+    children: React.ReactNode;
+};
+
+export type RebuyHydrogenReactContextProviderProps = {
+    cartFragment?: string;
+    children: React.ReactNode;
+    countryIsoCode?: CountryCode;
+    customerAccessToken?: string;
+    data?: PartialDeep<Cart, { recurseIntoArrays: true }>;
+    languageIsoCode?: LanguageCode;
+    numCartLines?: number;
+    onAttributesUpdate?: () => void;
+    onAttributesUpdateComplete?: () => void;
+    onBuyerIdentityUpdate?: () => void;
+    onBuyerIdentityUpdateComplete?: () => void;
+    onCreate?: () => void;
+    onCreateComplete?: () => void;
+    onDiscountCodesUpdate?: () => void;
+    onDiscountCodesUpdateComplete?: () => void;
+    onLineAdd?: () => void;
+    onLineAddComplete?: () => void;
+    onLineRemove?: () => void;
+    onLineRemoveComplete?: () => void;
+    onLineUpdate?: () => void;
+    onLineUpdateComplete?: () => void;
+    onNoteUpdate?: () => void;
+    onNoteUpdateComplete?: () => void;
+    storefrontApiVersion?: string;
+};