@shopify/hydrogen 1.3.1 → 1.4.0

package/dist/esnext/components/CartProvider/CartActions.client.d.ts

@@ -0,0 +1,60 @@
+import { AttributeInput, CartBuyerIdentityInput, CartInput, CartLineInput, CartLineUpdateInput } from '../../storefront-api-types.js';
+import { CartAttributesUpdateMutation } from './graphql/CartAttributesUpdateMutation.js';
+import { CartBuyerIdentityUpdateMutation } from './graphql/CartBuyerIdentityUpdateMutation.js';
+import { CartCreateMutation } from './graphql/CartCreateMutation.js';
+import { CartDiscountCodesUpdateMutation, CartDiscountCodesUpdateMutationVariables } from './graphql/CartDiscountCodesUpdateMutation.js';
+import { CartLineAddMutation } from './graphql/CartLineAddMutation.js';
+import { CartLineRemoveMutation } from './graphql/CartLineRemoveMutation.js';
+import { CartLineUpdateMutation } from './graphql/CartLineUpdateMutation.js';
+import { CartNoteUpdateMutation, CartNoteUpdateMutationVariables } from './graphql/CartNoteUpdateMutation.js';
+import { CartQueryQuery } from './graphql/CartQuery.js';
+/**
+ * The `useCartActions` hook returns helper graphql functions for Storefront Cart API
+ *
+ * See [cart API graphql mutations](https://shopify.dev/api/storefront/2022-07/objects/Cart)
+ */
+export declare function useCartActions({ numCartLines, cartFragment, }: {
+    /**  Maximum number of cart lines to fetch. Defaults to 250 cart lines. */
+    numCartLines?: number;
+    /** A fragment used to query the Storefront API's [Cart object](https://shopify.dev/api/storefront/latest/objects/cart) for all queries and mutations. A default value is used if no argument is provided. */
+    cartFragment?: string;
+}): {
+    cartFetch: (cartId: string) => Promise<{
+        data: CartQueryQuery | undefined;
+        errors: any;
+    }>;
+    cartCreate: (cart: CartInput) => Promise<{
+        data: CartCreateMutation | undefined;
+        errors: any;
+    }>;
+    cartLineAdd: (cartId: string, lines: CartLineInput[]) => Promise<{
+        data: CartLineAddMutation | undefined;
+        errors: any;
+    }>;
+    cartLineUpdate: (cartId: string, lines: CartLineUpdateInput[]) => Promise<{
+        data: CartLineUpdateMutation | undefined;
+        errors: any;
+    }>;
+    cartLineRemove: (cartId: string, lines: string[]) => Promise<{
+        data: CartLineRemoveMutation | undefined;
+        errors: any;
+    }>;
+    noteUpdate: (cartId: string, note: CartNoteUpdateMutationVariables['note']) => Promise<{
+        data: CartNoteUpdateMutation | undefined;
+        errors: any;
+    }>;
+    buyerIdentityUpdate: (cartId: string, buyerIdentity: CartBuyerIdentityInput) => Promise<{
+        data: CartBuyerIdentityUpdateMutation | undefined;
+        errors: any;
+    }>;
+    cartAttributesUpdate: (cartId: string, attributes: AttributeInput[]) => Promise<{
+        data: CartAttributesUpdateMutation | undefined;
+        errors: any;
+    }>;
+    discountCodesUpdate: (cartId: string, discountCodes: CartDiscountCodesUpdateMutationVariables['discountCodes']) => Promise<{
+        data: CartDiscountCodesUpdateMutation | undefined;
+        errors: any;
+    }>;
+    cartFragment: string;
+};
+export declare const defaultCartFragment = "\nfragment CartFragment on Cart {\n  id\n  checkoutUrl\n  totalQuantity\n  buyerIdentity {\n    countryCode\n    customer {\n      id\n      email\n      firstName\n      lastName\n      displayName\n    }\n    email\n    phone\n  }\n  lines(first: $numCartLines) {\n    edges {\n      node {\n        id\n        quantity\n        attributes {\n          key\n          value\n        }\n        cost {\n          totalAmount {\n            amount\n            currencyCode\n          }\n          compareAtAmountPerQuantity {\n            amount\n            currencyCode\n          }\n        }\n        merchandise {\n          ... on ProductVariant {\n            id\n            availableForSale\n            compareAtPriceV2 {\n              ...MoneyFragment\n            }\n            priceV2 {\n              ...MoneyFragment\n            }\n            requiresShipping\n            title\n            image {\n              ...ImageFragment\n            }\n            product {\n              handle\n              title\n            }\n            selectedOptions {\n              name\n              value\n            }\n          }\n        }\n      }\n    }\n  }\n  cost {\n    subtotalAmount {\n      ...MoneyFragment\n    }\n    totalAmount {\n      ...MoneyFragment\n    }\n    totalDutyAmount {\n      ...MoneyFragment\n    }\n    totalTaxAmount {\n      ...MoneyFragment\n    }\n  }\n  note\n  attributes {\n    key\n    value\n  }\n  discountCodes {\n    code\n  }\n}\n\nfragment MoneyFragment on MoneyV2 {\n  currencyCode\n  amount\n}\nfragment ImageFragment on Image {\n  id\n  url\n  altText\n  width\n  height\n}\n";

package/dist/esnext/components/CartProvider/CartActions.client.js

@@ -0,0 +1,232 @@
+import { useCallback, useMemo } from 'react';
+import { CountryCode, } from '../../storefront-api-types.js';
+import { CartAttributesUpdate, CartBuyerIdentityUpdate, CartCreate, CartDiscountCodesUpdate, CartLineAdd, CartLineRemove, CartLineUpdate, CartNoteUpdate, CartQuery, } from './cart-queries.js';
+import { useCartFetch } from './hooks.client.js';
+/**
+ * The `useCartActions` hook returns helper graphql functions for Storefront Cart API
+ *
+ * See [cart API graphql mutations](https://shopify.dev/api/storefront/2022-07/objects/Cart)
+ */
+export function useCartActions({ numCartLines, cartFragment = defaultCartFragment, }) {
+    const fetchCart = useCartFetch();
+    const cartFetch = useCallback((cartId) => {
+        return fetchCart({
+            query: CartQuery(cartFragment),
+            variables: {
+                id: cartId,
+                numCartLines,
+                country: CountryCode.Us,
+            },
+        });
+    }, [fetchCart, cartFragment, numCartLines]);
+    const cartCreate = useCallback((cart) => {
+        return fetchCart({
+            query: CartCreate(cartFragment),
+            variables: {
+                input: cart,
+                numCartLines,
+                country: CountryCode.Us,
+            },
+        });
+    }, [cartFragment, fetchCart, numCartLines]);
+    const cartLineAdd = useCallback((cartId, lines) => {
+        return fetchCart({
+            query: CartLineAdd(cartFragment),
+            variables: {
+                cartId,
+                lines,
+                numCartLines,
+                country: CountryCode.Us,
+            },
+        });
+    }, [cartFragment, fetchCart, numCartLines]);
+    const cartLineUpdate = useCallback((cartId, lines) => {
+        return fetchCart({
+            query: CartLineUpdate(cartFragment),
+            variables: {
+                cartId,
+                lines,
+                numCartLines,
+                country: CountryCode.Us,
+            },
+        });
+    }, [cartFragment, fetchCart, numCartLines]);
+    const cartLineRemove = useCallback((cartId, lines) => {
+        return fetchCart({
+            query: CartLineRemove(cartFragment),
+            variables: {
+                cartId,
+                lines,
+                numCartLines,
+                country: CountryCode.Us,
+            },
+        });
+    }, [cartFragment, fetchCart, numCartLines]);
+    const noteUpdate = useCallback((cartId, note) => {
+        return fetchCart({
+            query: CartNoteUpdate(cartFragment),
+            variables: {
+                cartId,
+                note,
+                numCartLines,
+                country: CountryCode.Us,
+            },
+        });
+    }, [fetchCart, cartFragment, numCartLines]);
+    const buyerIdentityUpdate = useCallback((cartId, buyerIdentity) => {
+        return fetchCart({
+            query: CartBuyerIdentityUpdate(cartFragment),
+            variables: {
+                cartId,
+                buyerIdentity,
+                numCartLines,
+                country: CountryCode.Us,
+            },
+        });
+    }, [cartFragment, fetchCart, numCartLines]);
+    const cartAttributesUpdate = useCallback((cartId, attributes) => {
+        return fetchCart({
+            query: CartAttributesUpdate(cartFragment),
+            variables: {
+                cartId,
+                attributes,
+                numCartLines,
+                country: CountryCode.Us,
+            },
+        });
+    }, [cartFragment, fetchCart, numCartLines]);
+    const discountCodesUpdate = useCallback((cartId, discountCodes) => {
+        return fetchCart({
+            query: CartDiscountCodesUpdate(cartFragment),
+            variables: {
+                cartId,
+                discountCodes,
+                numCartLines,
+                country: CountryCode.Us,
+            },
+        });
+    }, [cartFragment, fetchCart, numCartLines]);
+    return useMemo(() => ({
+        cartFetch,
+        cartCreate,
+        cartLineAdd,
+        cartLineUpdate,
+        cartLineRemove,
+        noteUpdate,
+        buyerIdentityUpdate,
+        cartAttributesUpdate,
+        discountCodesUpdate,
+        cartFragment,
+    }), [
+        cartFetch,
+        cartCreate,
+        cartLineAdd,
+        cartLineUpdate,
+        cartLineRemove,
+        noteUpdate,
+        buyerIdentityUpdate,
+        cartAttributesUpdate,
+        discountCodesUpdate,
+        cartFragment,
+    ]);
+}
+export const defaultCartFragment = `
+fragment CartFragment on Cart {
+  id
+  checkoutUrl
+  totalQuantity
+  buyerIdentity {
+    countryCode
+    customer {
+      id
+      email
+      firstName
+      lastName
+      displayName
+    }
+    email
+    phone
+  }
+  lines(first: $numCartLines) {
+    edges {
+      node {
+        id
+        quantity
+        attributes {
+          key
+          value
+        }
+        cost {
+          totalAmount {
+            amount
+            currencyCode
+          }
+          compareAtAmountPerQuantity {
+            amount
+            currencyCode
+          }
+        }
+        merchandise {
+          ... on ProductVariant {
+            id
+            availableForSale
+            compareAtPriceV2 {
+              ...MoneyFragment
+            }
+            priceV2 {
+              ...MoneyFragment
+            }
+            requiresShipping
+            title
+            image {
+              ...ImageFragment
+            }
+            product {
+              handle
+              title
+            }
+            selectedOptions {
+              name
+              value
+            }
+          }
+        }
+      }
+    }
+  }
+  cost {
+    subtotalAmount {
+      ...MoneyFragment
+    }
+    totalAmount {
+      ...MoneyFragment
+    }
+    totalDutyAmount {
+      ...MoneyFragment
+    }
+    totalTaxAmount {
+      ...MoneyFragment
+    }
+  }
+  note
+  attributes {
+    key
+    value
+  }
+  discountCodes {
+    code
+  }
+}
+
+fragment MoneyFragment on MoneyV2 {
+  currencyCode
+  amount
+}
+fragment ImageFragment on Image {
+  id
+  url
+  altText
+  width
+  height
+}
+`;

package/dist/esnext/components/CartProvider/CartProviderV2.client.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import { CartFragmentFragment } from './graphql/CartFragment.js';
+export declare function CartProviderV2({ children, numCartLines, onCreate, onLineAdd, onLineRemove, onLineUpdate, onNoteUpdate, onBuyerIdentityUpdate, onAttributesUpdate, onDiscountCodesUpdate, onCreateComplete, onLineAddComplete, onLineRemoveComplete, onLineUpdateComplete, onNoteUpdateComplete, onBuyerIdentityUpdateComplete, onAttributesUpdateComplete, onDiscountCodesUpdateComplete, data, cartFragment, }: {
+    /** Any `ReactNode` elements. */
+    children: React.ReactNode;
+    /**  Maximum number of cart lines to fetch. Defaults to 250 cart lines. */
+    numCartLines?: number;
+    /** A callback that is invoked when the process to create a cart begins, but before the cart is created in the Storefront API. */
+    onCreate?: () => void;
+    /** A callback that is invoked when the process to add a line item to the cart begins, but before the line item is added to the Storefront API. */
+    onLineAdd?: () => void;
+    /** A callback that is invoked when the process to remove a line item to the cart begins, but before the line item is removed from the Storefront API. */
+    onLineRemove?: () => void;
+    /** A callback that is invoked when the process to update a line item in the cart begins, but before the line item is updated in the Storefront API. */
+    onLineUpdate?: () => void;
+    /** A callback that is invoked when the process to add or update a note in the cart begins, but before the note is added or updated in the Storefront API. */
+    onNoteUpdate?: () => void;
+    /** A callback that is invoked when the process to update the buyer identity begins, but before the buyer identity is updated in the Storefront API. */
+    onBuyerIdentityUpdate?: () => void;
+    /** A callback that is invoked when the process to update the cart attributes begins, but before the attributes are updated in the Storefront API. */
+    onAttributesUpdate?: () => void;
+    /** A callback that is invoked when the process to update the cart discount codes begins, but before the discount codes are updated in the Storefront API. */
+    onDiscountCodesUpdate?: () => void;
+    /** A callback that is invoked when the process to create a cart completes */
+    onCreateComplete?: () => void;
+    /** A callback that is invoked when the process to add a line item to the cart completes */
+    onLineAddComplete?: () => void;
+    /** A callback that is invoked when the process to remove a line item to the cart completes */
+    onLineRemoveComplete?: () => void;
+    /** A callback that is invoked when the process to update a line item in the cart completes */
+    onLineUpdateComplete?: () => void;
+    /** A callback that is invoked when the process to add or update a note in the cart completes */
+    onNoteUpdateComplete?: () => void;
+    /** A callback that is invoked when the process to update the buyer identity completes */
+    onBuyerIdentityUpdateComplete?: () => void;
+    /** A callback that is invoked when the process to update the cart attributes completes */
+    onAttributesUpdateComplete?: () => void;
+    /** A callback that is invoked when the process to update the cart discount codes completes */
+    onDiscountCodesUpdateComplete?: () => void;
+    /** An object with fields that correspond to the Storefront API's [Cart object](https://shopify.dev/api/storefront/latest/objects/cart). */
+    data?: CartFragmentFragment;
+    /** A fragment used to query the Storefront API's [Cart object](https://shopify.dev/api/storefront/latest/objects/cart) for all queries and mutations. A default value is used if no argument is provided. */
+    cartFragment?: string;
+}): JSX.Element;

package/dist/esnext/components/CartProvider/CartProviderV2.client.js

@@ -0,0 +1,232 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { CartContext } from './context.js';
+import { useCartActions } from './CartActions.client.js';
+import { useCartAPIStateMachine } from './useCartAPIStateMachine.client.js';
+import { CART_ID_STORAGE_KEY } from './constants.js';
+export function CartProviderV2({ children, numCartLines, onCreate, onLineAdd, onLineRemove, onLineUpdate, onNoteUpdate, onBuyerIdentityUpdate, onAttributesUpdate, onDiscountCodesUpdate, onCreateComplete, onLineAddComplete, onLineRemoveComplete, onLineUpdateComplete, onNoteUpdateComplete, onBuyerIdentityUpdateComplete, onAttributesUpdateComplete, onDiscountCodesUpdateComplete, data: cart, cartFragment, }) {
+    const { cartFragment: usedCartFragment } = useCartActions({
+        numCartLines,
+        cartFragment,
+    });
+    const [cartState, cartSend] = useCartAPIStateMachine({
+        numCartLines,
+        cartFragment,
+        onCartActionEntry(context, event) {
+            switch (event.type) {
+                case 'CART_CREATE':
+                    return onCreate?.();
+                case 'CARTLINE_ADD':
+                    return onLineAdd?.();
+                case 'CARTLINE_REMOVE':
+                    return onLineRemove?.();
+                case 'CARTLINE_UPDATE':
+                    return onLineUpdate?.();
+                case 'NOTE_UPDATE':
+                    return onNoteUpdate?.();
+                case 'BUYER_IDENTITY_UPDATE':
+                    return onBuyerIdentityUpdate?.();
+                case 'CART_ATTRIBUTES_UPDATE':
+                    return onAttributesUpdate?.();
+                case 'DISCOUNT_CODES_UPDATE':
+                    return onDiscountCodesUpdate?.();
+            }
+        },
+        onCartActionComplete(context, event) {
+            switch (event.type) {
+                case 'RESOLVE':
+                    switch (event.payload.cartActionEvent.type) {
+                        case 'CART_CREATE':
+                            return onCreateComplete?.();
+                        case 'CARTLINE_ADD':
+                            return onLineAddComplete?.();
+                        case 'CARTLINE_REMOVE':
+                            return onLineRemoveComplete?.();
+                        case 'CARTLINE_UPDATE':
+                            return onLineUpdateComplete?.();
+                        case 'NOTE_UPDATE':
+                            return onNoteUpdateComplete?.();
+                        case 'BUYER_IDENTITY_UPDATE':
+                            return onBuyerIdentityUpdateComplete?.();
+                        case 'CART_ATTRIBUTES_UPDATE':
+                            return onAttributesUpdateComplete?.();
+                        case 'DISCOUNT_CODES_UPDATE':
+                            return onDiscountCodesUpdateComplete?.();
+                    }
+            }
+        },
+    });
+    const [cartReady, setCartReady] = useState(false);
+    const cartCompleted = cartState.matches('cartCompleted');
+    // send cart events when ready
+    const onCartReadySend = useCallback((cartEvent) => {
+        if (!cartReady) {
+            return console.warn("Cart isn't ready yet");
+        }
+        cartSend(cartEvent);
+    }, [cartReady, cartSend]);
+    // save cart id to local storage
+    useEffect(() => {
+        if (cartState?.context?.cart?.id && storageAvailable('localStorage')) {
+            try {
+                window.localStorage.setItem(CART_ID_STORAGE_KEY, cartState.context.cart?.id);
+            }
+            catch (error) {
+                console.warn('Failed to save cartId to localStorage', error);
+            }
+        }
+    }, [cartState?.context?.cart?.id]);
+    // delete cart from local storage if cart fetched has been completed
+    useEffect(() => {
+        if (cartCompleted && storageAvailable('localStorage')) {
+            try {
+                window.localStorage.removeItem(CART_ID_STORAGE_KEY);
+            }
+            catch (error) {
+                console.warn('Failed to delete cartId from localStorage', error);
+            }
+        }
+    }, [cartCompleted]);
+    // fetch cart from local storage if cart id present and set cart as ready for use
+    useEffect(() => {
+        if (!cartReady && storageAvailable('localStorage')) {
+            try {
+                const cartId = window.localStorage.getItem(CART_ID_STORAGE_KEY);
+                if (cartId) {
+                    cartSend({ type: 'CART_FETCH', payload: { cartId } });
+                }
+            }
+            catch (error) {
+                console.warn('error fetching cartId');
+                console.warn(error);
+            }
+            setCartReady(true);
+        }
+    }, [cartReady, cartSend]);
+    const cartContextValue = useMemo(() => {
+        return {
+            ...(cartState?.context?.cart ?? { lines: [], attributes: [] }),
+            status: transposeStatus(cartState.value),
+            error: cartState?.context?.errors,
+            totalQuantity: cartState?.context?.cart?.totalQuantity ?? 0,
+            cartCreate(cartInput) {
+                onCartReadySend({
+                    type: 'CART_CREATE',
+                    payload: cartInput,
+                });
+            },
+            linesAdd(lines) {
+                onCartReadySend({
+                    type: 'CARTLINE_ADD',
+                    payload: { lines },
+                });
+            },
+            linesRemove(lines) {
+                onCartReadySend({
+                    type: 'CARTLINE_REMOVE',
+                    payload: {
+                        lines,
+                    },
+                });
+            },
+            linesUpdate(lines) {
+                onCartReadySend({
+                    type: 'CARTLINE_UPDATE',
+                    payload: {
+                        lines,
+                    },
+                });
+            },
+            noteUpdate(note) {
+                onCartReadySend({
+                    type: 'NOTE_UPDATE',
+                    payload: {
+                        note,
+                    },
+                });
+            },
+            buyerIdentityUpdate(buyerIdentity) {
+                onCartReadySend({
+                    type: 'BUYER_IDENTITY_UPDATE',
+                    payload: {
+                        buyerIdentity,
+                    },
+                });
+            },
+            cartAttributesUpdate(attributes) {
+                onCartReadySend({
+                    type: 'CART_ATTRIBUTES_UPDATE',
+                    payload: {
+                        attributes,
+                    },
+                });
+            },
+            discountCodesUpdate(discountCodes) {
+                onCartReadySend({
+                    type: 'DISCOUNT_CODES_UPDATE',
+                    payload: {
+                        discountCodes,
+                    },
+                });
+            },
+            cartFragment: usedCartFragment,
+        };
+    }, [
+        cartState?.context?.cart,
+        cartState?.context?.errors,
+        cartState.value,
+        onCartReadySend,
+        usedCartFragment,
+    ]);
+    return (React.createElement(CartContext.Provider, { value: cartContextValue }, children));
+}
+function transposeStatus(status) {
+    switch (status) {
+        case 'uninitialized':
+            return 'uninitialized';
+        case 'idle':
+        case 'cartCompleted':
+        case 'error':
+        case 'initializationError':
+            return 'idle';
+        case 'cartFetching':
+            return 'fetching';
+        case 'cartCreating':
+            return 'creating';
+        case 'cartLineAdding':
+        case 'cartLineRemoving':
+        case 'cartLineUpdating':
+        case 'noteUpdating':
+        case 'buyerIdentityUpdating':
+        case 'cartAttributesUpdating':
+        case 'discountCodesUpdating':
+            return 'updating';
+    }
+}
+/** Check for storage availability funciton obtained from
+ * https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API
+ */
+function storageAvailable(type) {
+    let storage;
+    try {
+        storage = window[type];
+        const x = '__storage_test__';
+        storage.setItem(x, x);
+        storage.removeItem(x);
+        return true;
+    }
+    catch (e) {
+        return (e instanceof DOMException &&
+            // everything except Firefox
+            (e.code === 22 ||
+                // Firefox
+                e.code === 1014 ||
+                // test name field too, because code might not be present
+                // everything except Firefox
+                e.name === 'QuotaExceededError' ||
+                // Firefox
+                e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
+            // acknowledge QuotaExceededError only if there's something already stored
+            storage &&
+            storage.length !== 0);
+    }
+}

package/dist/esnext/components/CartProvider/hooks.client.js

@@ -34,7 +34,7 @@ export function useCartFetch() {
             .catch((error) => {
             return {
                 data: undefined,
-                error: error.toString(),
+                errors: error.toString(),
             };
         });
     }, [storeDomain, storefrontApiVersion, storefrontToken, storefrontId]);