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

package/src/components/ProductPrice/ProductPrice.tsx

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

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

package/src/components/Title/Title.tsx

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

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

package/src/components/Title/types.ts

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

package/src/components/VariantSelect/VariantSelect.tsx

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

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

package/src/components/VariantSelect/types.ts

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

package/src/context/RebuyContext.tsx

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

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

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

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

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

@@ -1,58 +0,0 @@
-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;
-};