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

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

package/src/queries/cart.queries.ts

@@ -0,0 +1,467 @@
+export const OPTION_FRAGMENT = `#graphql
+  fragment OptionFragment on ProductOption {
+    id
+    name
+    optionValues {
+      id
+      name
+      swatch {
+        color
+        image {
+          mediaContentType
+          previewImage {
+            height
+            id
+            url
+            width
+            altText
+          }
+          id
+          alt
+        }
+      }
+    }
+  }
+`;
+/*
+ * STOREFRONT API QUERIES -----------------------------------------------------
+ */
+
+// Docs: https://shopify.dev/docs/api/storefront/latest/objects/Cart
+
+export const CART_LINE_FRAGMENT = `#graphql
+  fragment CartLineFragment on CartLine {
+    id
+    quantity
+    cost {
+      amountPerQuantity {
+        amount
+        currencyCode
+      }
+      compareAtAmountPerQuantity {
+        amount
+        currencyCode
+      }
+      totalAmount {
+        amount
+        currencyCode
+      }
+      subtotalAmount {
+        amount
+        currencyCode
+      }
+    }
+    attributes {
+      key
+      value
+    }
+    discountAllocations {
+      discountedAmount {
+        amount
+        currencyCode
+      }
+      ... on CartAutomaticDiscountAllocation {
+        __typename
+        discountedAmount {
+          amount
+          currencyCode
+        }
+        title
+      }
+      ... on CartCodeDiscountAllocation {
+        __typename
+        code
+        discountedAmount {
+          amount
+          currencyCode
+        }
+      }
+      ... on CartCustomDiscountAllocation {
+        __typename
+        discountedAmount {
+          amount
+          currencyCode
+        }
+        title
+      }
+    }
+    merchandise {
+      ... on ProductVariant {
+        availableForSale
+        id
+        sku
+        title
+        compareAtPrice {
+          amount
+          currencyCode
+        }
+        image {
+          altText
+          height
+          id
+          url
+          width
+        }
+        price {
+          amount
+          currencyCode
+        }
+        product {
+          handle
+          id
+          productType
+          tags
+          title
+          vendor
+          collections(first: 10) {
+            nodes {
+              handle
+            }
+          }
+          options {
+            ...OptionFragment
+          }
+          images(first: 20) {
+            nodes {
+              altText
+              height
+              id
+              url
+              width
+            }
+          }
+        }
+        selectedOptions {
+          name
+          value
+        }
+      }
+    }
+  }
+` as const;
+
+export const CART_LINE_COMPONENT_FRAGMENT = `#graphql
+  fragment CartLineComponentFragment on ComponentizableCartLine {
+    id
+    quantity
+    cost {
+      amountPerQuantity {
+        amount
+        currencyCode
+      }
+      compareAtAmountPerQuantity {
+        amount
+        currencyCode
+      }
+      totalAmount {
+        amount
+        currencyCode
+      }
+      subtotalAmount {
+        amount
+        currencyCode
+      }
+    }
+    attributes {
+      key
+      value
+    }
+    discountAllocations {
+      discountedAmount {
+        amount
+        currencyCode
+      }
+      ... on CartAutomaticDiscountAllocation {
+        __typename
+        discountedAmount {
+          amount
+          currencyCode
+        }
+        title
+      }
+      ... on CartCodeDiscountAllocation {
+        __typename
+        code
+        discountedAmount {
+          amount
+          currencyCode
+        }
+      }
+      ... on CartCustomDiscountAllocation {
+        __typename
+        discountedAmount {
+          amount
+          currencyCode
+        }
+        title
+      }
+    }
+    merchandise {
+      ... on ProductVariant {
+        availableForSale
+        id
+        sku
+        title
+        compareAtPrice {
+          amount
+          currencyCode
+        }
+        image {
+          altText
+          height
+          id
+          url
+          width
+        }
+        price {
+          amount
+          currencyCode
+        }
+        product {
+          handle
+          id
+          productType
+          tags
+          title
+          vendor
+          collections(first: 10) {
+            nodes {
+              handle
+            }
+          }
+          options {
+            id
+            name
+            optionValues {
+              id
+              name
+              swatch {
+                color
+                image {
+                  mediaContentType
+                  previewImage {
+                    height
+                    id
+                    url
+                    width
+                    altText
+                  }
+                  id
+                  alt
+                }
+              }
+            }
+          }
+          images(first: 20) {
+            nodes {
+              altText
+              height
+              id
+              url
+              width
+            }
+          }
+        }
+        selectedOptions {
+          name
+          value
+        }
+      }
+    }
+    lineComponents {
+      id
+      quantity
+      cost {
+        amountPerQuantity {
+          amount
+          currencyCode
+        }
+        compareAtAmountPerQuantity {
+          amount
+          currencyCode
+        }
+        totalAmount {
+          amount
+          currencyCode
+        }
+        subtotalAmount {
+          amount
+          currencyCode
+        }
+      }
+      attributes {
+        key
+        value
+      }
+      discountAllocations {
+        discountedAmount {
+          amount
+          currencyCode
+        }
+        ... on CartAutomaticDiscountAllocation {
+          __typename
+          discountedAmount {
+            amount
+            currencyCode
+          }
+          title
+        }
+        ... on CartCodeDiscountAllocation {
+          __typename
+          code
+          discountedAmount {
+            amount
+            currencyCode
+          }
+        }
+        ... on CartCustomDiscountAllocation {
+          __typename
+          discountedAmount {
+            amount
+            currencyCode
+          }
+          title
+        }
+      }
+      merchandise {
+        ... on ProductVariant {
+          availableForSale
+          id
+          sku
+          title
+          compareAtPrice {
+            amount
+            currencyCode
+          }
+          image {
+            altText
+            height
+            id
+            url
+            width
+          }
+          price {
+            amount
+            currencyCode
+          }
+          product {
+            handle
+            id
+            productType
+            tags
+            title
+            vendor
+            collections(first: 10) {
+              nodes {
+                handle
+              }
+            }
+            options {
+              ...OptionFragment
+            }
+            images(first: 20) {
+              nodes {
+                altText
+                height
+                id
+                url
+                width
+              }
+            }
+          }
+          selectedOptions {
+            name
+            value
+          }
+        }
+      }
+    }
+  }
+` as const;
+
+export const CART_FRAGMENT = `#graphql
+  fragment CartFragment on Cart {
+    id
+    checkoutUrl
+    createdAt
+    totalQuantity
+    note
+    updatedAt
+    __typename
+    buyerIdentity {
+      countryCode
+      customer {
+        id
+        email
+        firstName
+        lastName
+        displayName
+      }
+      email
+      phone
+    }
+    attributes {
+      key
+      value
+    }
+    cost {
+      subtotalAmount {
+        amount
+        currencyCode
+      }
+      totalAmount {
+        amount
+        currencyCode
+      }
+    }
+    discountAllocations {
+      discountedAmount {
+        amount
+        currencyCode
+      }
+      ... on CartAutomaticDiscountAllocation {
+        __typename
+        discountedAmount {
+          amount
+          currencyCode
+        }
+        title
+      }
+      ... on CartCodeDiscountAllocation {
+        __typename
+        code
+        discountedAmount {
+          amount
+          currencyCode
+        }
+      }
+      ... on CartCustomDiscountAllocation {
+        __typename
+        discountedAmount {
+          amount
+          currencyCode
+        }
+        title
+      }
+    }
+    discountCodes {
+      applicable
+      code
+    }
+    lines(first: $numCartLines) {
+      edges {
+        node {
+          ...CartLineComponentFragment
+        }
+      }
+      edges {
+        node {
+          ...CartLineFragment
+        }
+      }
+    }
+  }
+  ${CART_LINE_FRAGMENT}
+  ${CART_LINE_COMPONENT_FRAGMENT}
+  ${OPTION_FRAGMENT}
+` as const;

package/src/types/common.ts

@@ -0,0 +1,8 @@
+export enum ProductCardTitleLevel {
+    H1 = 'h1',
+    H2 = 'h2',
+    H3 = 'h3',
+    H4 = 'h4',
+    H5 = 'h5',
+    H6 = 'h6',
+}