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

package/package.json

@@ -1,23 +1,35 @@
 {
     "name": "@rebuy/rebuy-hydrogen",
     "description": "This is the default library for Rebuy + Shopify Hydrogen",
-    "version": "2.3.0",
+    "version": "3.0.0-beta.1",
     "license": "MIT",
     "author": "Rebuy, Inc.",
+    "main": "./dist/index.js",
+    "module": "./dist/index.mjs",
+    "types": "./dist/index.d.ts",
     "type": "module",
     "publishConfig": {
         "access": "public"
     },
     "files": [
+        "dist",
         "README.md",
-        "**/*.js",
-        "**/*.jsx"
+        "**/*.d.ts",
+        "**/*.ts",
+        "**/*.tsx"
     ],
     "scripts": {
+        "clean": "rm -rf dist",
+        "build:types": "tsc --emitDeclarationOnly --outDir dist",
+        "build:code": "node esbuild.config.mjs",
+        "build": "npm run clean && npm run build:types && npm run build:code",
+        "build:watch": "npm run clean && npm run build:types && node esbuild.config.mjs --watch",
         "format": "npm run lint -- --fix",
         "lint": "eslint . --ext .js,.jsx,.json",
         "prepare": "husky install",
-        "test": "echo \"Error: no test specified\" && exit 1"
+        "test": "echo \"Error: no test specified\" && exit 1",
+        "types:watch": "tsc --emitDeclarationOnly --outDir dist --watch",
+        "dev": "npm run clean && concurrently \"npm run types:watch\" \"npm run build:watch\""
     },
     "config": {
         "commitizen": {
@@ -36,34 +48,48 @@
     },
     "homepage": "https://bitbucket.org/rebuyengine/npm-rebuy-hydrogen#readme",
     "devDependencies": {
-        "@commitlint/cli": "^17.2.0",
-        "@commitlint/config-conventional": "^17.2.0",
-        "@semantic-release/changelog": "^6.0.1",
-        "@semantic-release/commit-analyzer": "^9.0.2",
+        "@commitlint/cli": "^19.8.0",
+        "@commitlint/config-conventional": "^19.8.0",
+        "@semantic-release/changelog": "^6.0.3",
+        "@semantic-release/commit-analyzer": "^13.0.1",
         "@semantic-release/git": "^10.0.1",
-        "@semantic-release/npm": "^9.0.1",
-        "@semantic-release/release-notes-generator": "^10.0.3",
-        "@shopify/hydrogen": "^1.6.1",
-        "conventional-changelog-eslint": "^3.0.9",
+        "@semantic-release/npm": "^12.0.1",
+        "@semantic-release/release-notes-generator": "^14.0.3",
+        "@shopify/hydrogen": ">=2025.0.1",
+        "@shopify/hydrogen-react": ">=2025.0.1",
+        "@types/react": "^18.0.0",
+        "@types/three": "^0.175.0",
+        "@typescript-eslint/eslint-plugin": "^8.26.1",
+        "@typescript-eslint/parser": "^8.26.1",
+        "concurrently": "^9.1.2",
+        "conventional-changelog-eslint": "^6.0.0",
         "cz-conventional-changelog": "^3.3.0",
-        "cz-customizable": "^6.9.2",
-        "eslint": "^8.26.0",
-        "eslint-config-prettier": "^8.5.0",
-        "eslint-plugin-import": "^2.26.0",
-        "eslint-plugin-json": "^3.1.0",
-        "eslint-plugin-prettier": "^4.2.1",
-        "eslint-plugin-react": "^7.31.10",
-        "eslint-plugin-react-hooks": "^4.6.0",
-        "husky": "^8.0.1",
-        "lint-staged": "^13.0.3",
-        "prettier": "^2.7.1",
-        "semantic-release": "^19.0.5"
+        "cz-customizable": "^7.4.0",
+        "esbuild": "0.25.2",
+        "eslint": "^8.57.0",
+        "eslint-config-prettier": "^10.1.1",
+        "eslint-plugin-import": "^2.31.0",
+        "eslint-plugin-json": "^4.0.1",
+        "eslint-plugin-prettier": "^5.2.3",
+        "eslint-plugin-react": "^7.37.4",
+        "eslint-plugin-react-hooks": "^5.2.0",
+        "eslint-plugin-sort-destructure-keys": "^2.0.0",
+        "eslint-plugin-sort-keys": "^2.3.5",
+        "eslint-plugin-typescript-sort-keys": "^3.3.0",
+        "husky": "^9.1.7",
+        "lint-staged": "^15.5.0",
+        "prettier": "^3.5.2",
+        "react": "^18.0.0",
+        "semantic-release": "^24.2.3",
+        "typescript": "^5.8.2"
     },
     "dependencies": {
-        "@rebuy/rebuy": "^1.3.9"
+        "@rebuy/rebuy": "^1.5.1"
     },
     "peerDependencies": {
-        "@shopify/hydrogen": "^1.6.1"
+        "@remix-run/react": ">=2.10.0",
+        "@shopify/hydrogen": ">=2025.0.1",
+        "@shopify/hydrogen-react": ">=2025.0.1"
     },
     "lint-staged": {
         "**/*.{js,jsx,json}": [

package/src/components/AddToCartBtn/AddToCartBtn.tsx

@@ -0,0 +1,45 @@
+import { HydrogenAddToCartBtn } from './HydrogenAddToCartBtn';
+import { HydrogenReactAddToCartBtn } from './HydrogenReactAddToCartBtn';
+
+import type { AddToCartBtnProps } from '~/components/AddToCartBtn/types';
+
+export const AddToCartBtn = ({
+    addToCartBtnText,
+    addToCartCallback,
+    disabled,
+    isHydrogenReact,
+    moneyData,
+    selectedVariants,
+}: AddToCartBtnProps) => {
+    const linesToAdd = selectedVariants.map((variant) => ({
+        attributes: [
+            { key: '_source', value: 'Rebuy' },
+            { key: '_attribution', value: 'Rebuy Product Recommendations' },
+        ],
+        merchandiseId: variant.id,
+        quantity: 1,
+        selectedVariant: variant,
+    }));
+
+    if (isHydrogenReact) {
+        return (
+            <HydrogenReactAddToCartBtn
+                addToCartBtnText={addToCartBtnText}
+                addToCartCallback={addToCartCallback}
+                disabled={disabled}
+                linesToAdd={linesToAdd}
+                moneyData={moneyData}
+            />
+        );
+    }
+
+    return (
+        <HydrogenAddToCartBtn
+            addToCartBtnText={addToCartBtnText}
+            addToCartCallback={addToCartCallback}
+            disabled={disabled}
+            linesToAdd={linesToAdd}
+            moneyData={moneyData}
+        />
+    );
+};

package/src/components/AddToCartBtn/HydrogenAddToCartBtn.tsx

@@ -0,0 +1,43 @@
+import { type FetcherWithComponents } from '@remix-run/react';
+import { CartForm, Money } from '@shopify/hydrogen';
+
+import styles from './AddToCartBtn.module.css';
+
+import type { btnProps } from '~/components/AddToCartBtn/types';
+
+export const HydrogenAddToCartBtn = ({
+    addToCartBtnText,
+    addToCartCallback,
+    disabled,
+    linesToAdd,
+    moneyData,
+}: btnProps) => {
+    return (
+        <CartForm
+            action={CartForm.ACTIONS.LinesAdd}
+            inputs={{
+                lines: linesToAdd,
+            }}
+            route="/cart"
+        >
+            {(fetcher: FetcherWithComponents<unknown>) => (
+                <>
+                    <button
+                        className={styles.button}
+                        disabled={disabled || fetcher.state !== 'idle'}
+                        onClick={addToCartCallback}
+                        type="submit"
+                    >
+                        {addToCartBtnText}
+                        {moneyData && (
+                            <>
+                                <span> | </span>
+                                <Money data={moneyData} withoutTrailingZeros />
+                            </>
+                        )}
+                    </button>
+                </>
+            )}
+        </CartForm>
+    );
+};

package/src/components/AddToCartBtn/HydrogenReactAddToCartBtn.tsx

@@ -0,0 +1,35 @@
+import { Money, useCart } from '@shopify/hydrogen-react';
+
+import styles from './AddToCartBtn.module.css';
+
+import type { btnProps } from '~/components/AddToCartBtn/types';
+
+export const HydrogenReactAddToCartBtn = ({
+    addToCartBtnText,
+    addToCartCallback,
+    disabled,
+    linesToAdd,
+    moneyData,
+}: btnProps) => {
+    const { linesAdd } = useCart();
+    const handleAddToCart = () => {
+        linesAdd(linesToAdd);
+        addToCartCallback?.();
+    };
+    return (
+        <button
+            className={styles.button}
+            disabled={disabled}
+            onClick={handleAddToCart}
+            type="button"
+        >
+            {addToCartBtnText}
+            {moneyData && (
+                <>
+                    <span> | </span>
+                    <Money data={moneyData} withoutTrailingZeros />
+                </>
+            )}
+        </button>
+    );
+};

package/src/components/AddToCartBtn/index.ts

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

package/src/components/AddToCartBtn/types.ts

@@ -0,0 +1,27 @@
+import type { MoneyV2 } from '@shopify/hydrogen-react/storefront-api-types';
+import type { RebuyProductVariant } from '~/types/rebuyCustom';
+
+export type btnProps = {
+    addToCartBtnText?: string;
+    addToCartCallback?: () => void;
+    disabled?: boolean;
+    linesToAdd: {
+        attributes: {
+            key: string;
+            value: string;
+        }[];
+        merchandiseId: string;
+        quantity: number;
+        selectedVariant: unknown;
+    }[];
+    moneyData?: MoneyV2;
+};
+
+export type AddToCartBtnProps = {
+    addToCartBtnText?: string;
+    addToCartCallback?: () => void;
+    disabled?: boolean;
+    isHydrogenReact?: boolean;
+    moneyData?: MoneyV2;
+    selectedVariants: RebuyProductVariant[];
+};

package/src/components/ProductCard/ProductCard.tsx

@@ -0,0 +1,70 @@
+import { Link } from '@remix-run/react';
+import { Image } from '@shopify/hydrogen';
+import { useState } from 'react';
+
+import styles from './ProductCard.module.css';
+
+import type { ProductCardProps } from '~/components/ProductCard/types';
+import type { RebuyProduct } from '~/types/rebuyCustom';
+
+import { AddToCartBtn } from '~/components/AddToCartBtn';
+import { RebuyProductPrice } from '~/components/ProductPrice/ProductPrice';
+import { Title } from '~/components/Title';
+import { VariantSelect } from '~/components/VariantSelect';
+
+export const ProductCard = ({
+    addToCartBtnText,
+    addToCartCallback,
+    isHydrogenReact,
+    product,
+    productCardTitleLevel,
+}: ProductCardProps) => {
+    const [selectedVariant, setSelectedVariant] = useState(
+        product.variants.nodes[0]
+    );
+
+    const { image } = selectedVariant;
+    const handleSelectedVariant = (
+        product: RebuyProduct,
+        variant_id: string
+    ) => {
+        const updatedVariant = product.variants.nodes.find(
+            (variant) => variant.id === variant_id
+        );
+        if (updatedVariant) {
+            setSelectedVariant(updatedVariant);
+        }
+    };
+    return (
+        <div className={styles.container}>
+            <div>
+                <Link to={`/products/${product.handle}`}>
+                    <Image
+                        alt={image?.altText ?? `Picture of ${product.title}`}
+                        data={image}
+                        sizes="(max-width: 320px) 280px, (max-width: 768px) 720px, 1440px"
+                    />
+                </Link>
+                <div className={styles.productInfo}>
+                    <Link to={`/products/${product.handle}`}>
+                        <Title
+                            level={productCardTitleLevel}
+                            text={product.title}
+                        />
+                    </Link>
+                    <RebuyProductPrice selectedVariant={selectedVariant} />
+                    <VariantSelect
+                        handleSelectedVariant={handleSelectedVariant}
+                        product={product}
+                    />
+                </div>
+            </div>
+            <AddToCartBtn
+                addToCartBtnText={addToCartBtnText}
+                addToCartCallback={addToCartCallback}
+                isHydrogenReact={isHydrogenReact}
+                selectedVariants={[selectedVariant]}
+            />
+        </div>
+    );
+};

package/src/components/ProductCard/index.ts

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

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,20 @@
+import type { TitleProps } from '~/components/Title/types';
+
+export const Title = ({ level, style, text }: TitleProps) => {
+    switch (level) {
+        case 'h1':
+            return <h1 style={style}>{text}</h1>;
+        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>;
+        default:
+            return <h2 style={style}>{text}</h2>;
+    }
+};

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>
+    );
+};