@shopify/hydrogen 1.4.0 → 1.4.1

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

@@ -1,4 +1,4 @@
-import { AttributeInput, CartBuyerIdentityInput, CartInput, CartLineInput, CartLineUpdateInput } from '../../storefront-api-types.js';
+import { AttributeInput, CartBuyerIdentityInput, CartInput, CartLineInput, CartLineUpdateInput, CountryCode } from '../../storefront-api-types.js';
 import { CartAttributesUpdateMutation } from './graphql/CartAttributesUpdateMutation.js';
 import { CartBuyerIdentityUpdateMutation } from './graphql/CartBuyerIdentityUpdateMutation.js';
 import { CartCreateMutation } from './graphql/CartCreateMutation.js';
@@ -13,11 +13,13 @@ import { CartQueryQuery } from './graphql/CartQuery.js';
  *
  * See [cart API graphql mutations](https://shopify.dev/api/storefront/2022-07/objects/Cart)
  */
-export declare function useCartActions({ numCartLines, cartFragment, }: {
+export declare function useCartActions({ numCartLines, cartFragment, countryCode, }: {
     /**  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;
+    /** The ISO country code for i18n. */
+    countryCode?: CountryCode;
 }): {
     cartFetch: (cartId: string) => Promise<{
         data: CartQueryQuery | undefined;

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

@@ -7,7 +7,7 @@ import { useCartFetch } from './hooks.client.js';
  *
  * See [cart API graphql mutations](https://shopify.dev/api/storefront/2022-07/objects/Cart)
  */
-export function useCartActions({ numCartLines, cartFragment = defaultCartFragment, }) {
+export function useCartActions({ numCartLines, cartFragment = defaultCartFragment, countryCode = CountryCode.Us, }) {
     const fetchCart = useCartFetch();
     const cartFetch = useCallback((cartId) => {
         return fetchCart({
@@ -15,20 +15,20 @@ export function useCartActions({ numCartLines, cartFragment = defaultCartFragmen
             variables: {
                 id: cartId,
                 numCartLines,
-                country: CountryCode.Us,
+                country: countryCode,
             },
         });
-    }, [fetchCart, cartFragment, numCartLines]);
+    }, [fetchCart, cartFragment, numCartLines, countryCode]);
     const cartCreate = useCallback((cart) => {
         return fetchCart({
             query: CartCreate(cartFragment),
             variables: {
                 input: cart,
                 numCartLines,
-                country: CountryCode.Us,
+                country: countryCode,
             },
         });
-    }, [cartFragment, fetchCart, numCartLines]);
+    }, [cartFragment, countryCode, fetchCart, numCartLines]);
     const cartLineAdd = useCallback((cartId, lines) => {
         return fetchCart({
             query: CartLineAdd(cartFragment),
@@ -36,10 +36,10 @@ export function useCartActions({ numCartLines, cartFragment = defaultCartFragmen
                 cartId,
                 lines,
                 numCartLines,
-                country: CountryCode.Us,
+                country: countryCode,
             },
         });
-    }, [cartFragment, fetchCart, numCartLines]);
+    }, [cartFragment, countryCode, fetchCart, numCartLines]);
     const cartLineUpdate = useCallback((cartId, lines) => {
         return fetchCart({
             query: CartLineUpdate(cartFragment),
@@ -47,10 +47,10 @@ export function useCartActions({ numCartLines, cartFragment = defaultCartFragmen
                 cartId,
                 lines,
                 numCartLines,
-                country: CountryCode.Us,
+                country: countryCode,
             },
         });
-    }, [cartFragment, fetchCart, numCartLines]);
+    }, [cartFragment, countryCode, fetchCart, numCartLines]);
     const cartLineRemove = useCallback((cartId, lines) => {
         return fetchCart({
             query: CartLineRemove(cartFragment),
@@ -58,10 +58,10 @@ export function useCartActions({ numCartLines, cartFragment = defaultCartFragmen
                 cartId,
                 lines,
                 numCartLines,
-                country: CountryCode.Us,
+                country: countryCode,
             },
         });
-    }, [cartFragment, fetchCart, numCartLines]);
+    }, [cartFragment, countryCode, fetchCart, numCartLines]);
     const noteUpdate = useCallback((cartId, note) => {
         return fetchCart({
             query: CartNoteUpdate(cartFragment),
@@ -69,10 +69,10 @@ export function useCartActions({ numCartLines, cartFragment = defaultCartFragmen
                 cartId,
                 note,
                 numCartLines,
-                country: CountryCode.Us,
+                country: countryCode,
             },
         });
-    }, [fetchCart, cartFragment, numCartLines]);
+    }, [fetchCart, cartFragment, numCartLines, countryCode]);
     const buyerIdentityUpdate = useCallback((cartId, buyerIdentity) => {
         return fetchCart({
             query: CartBuyerIdentityUpdate(cartFragment),
@@ -80,10 +80,10 @@ export function useCartActions({ numCartLines, cartFragment = defaultCartFragmen
                 cartId,
                 buyerIdentity,
                 numCartLines,
-                country: CountryCode.Us,
+                country: countryCode,
             },
         });
-    }, [cartFragment, fetchCart, numCartLines]);
+    }, [cartFragment, countryCode, fetchCart, numCartLines]);
     const cartAttributesUpdate = useCallback((cartId, attributes) => {
         return fetchCart({
             query: CartAttributesUpdate(cartFragment),
@@ -91,10 +91,10 @@ export function useCartActions({ numCartLines, cartFragment = defaultCartFragmen
                 cartId,
                 attributes,
                 numCartLines,
-                country: CountryCode.Us,
+                country: countryCode,
             },
         });
-    }, [cartFragment, fetchCart, numCartLines]);
+    }, [cartFragment, countryCode, fetchCart, numCartLines]);
     const discountCodesUpdate = useCallback((cartId, discountCodes) => {
         return fetchCart({
             query: CartDiscountCodesUpdate(cartFragment),
@@ -102,10 +102,10 @@ export function useCartActions({ numCartLines, cartFragment = defaultCartFragmen
                 cartId,
                 discountCodes,
                 numCartLines,
-                country: CountryCode.Us,
+                country: countryCode,
             },
         });
-    }, [cartFragment, fetchCart, numCartLines]);
+    }, [cartFragment, countryCode, fetchCart, numCartLines]);
     return useMemo(() => ({
         cartFetch,
         cartCreate,

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

@@ -1,6 +1,7 @@
 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, }: {
+import { CartBuyerIdentityInput, CountryCode } from '../../storefront-api-types.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, customerAccessToken, countryCode, }: {
     /** Any `ReactNode` elements. */
     children: React.ReactNode;
     /**  Maximum number of cart lines to fetch. Defaults to 250 cart lines. */
@@ -41,4 +42,8 @@ export declare function CartProviderV2({ children, numCartLines, onCreate, onLin
     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;
+    /** A customer access token that's accessible on the server if there's a customer login. */
+    customerAccessToken?: CartBuyerIdentityInput['customerAccessToken'];
+    /** The ISO country code for i18n. */
+    countryCode?: CountryCode;
 }): JSX.Element;

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

@@ -1,12 +1,26 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { CountryCode, } from '../../storefront-api-types.js';
 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, }) {
+import { ClientAnalytics } from '../../foundation/Analytics/ClientAnalytics.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, customerAccessToken, countryCode = CountryCode.Us, }) {
+    if (countryCode)
+        countryCode = countryCode.toUpperCase();
+    const [prevCountryCode, setPrevCountryCode] = useState(countryCode);
+    const [prevCustomerAccessToken, setPrevCustomerAccessToken] = useState(customerAccessToken);
+    const customerOverridesCountryCode = useRef(false);
+    if (prevCountryCode !== countryCode ||
+        prevCustomerAccessToken !== customerAccessToken) {
+        setPrevCountryCode(countryCode);
+        setPrevCustomerAccessToken(customerAccessToken);
+        customerOverridesCountryCode.current = false;
+    }
     const { cartFragment: usedCartFragment } = useCartActions({
         numCartLines,
         cartFragment,
+        countryCode,
     });
     const [cartState, cartSend] = useCartAPIStateMachine({
         numCartLines,
@@ -31,25 +45,68 @@ export function CartProviderV2({ children, numCartLines, onCreate, onLineAdd, on
                     return onDiscountCodesUpdate?.();
             }
         },
+        onCartActionOptimisticUI(context, event) {
+            if (!context?.cart)
+                return { cart: undefined };
+            switch (event.type) {
+                case 'CARTLINE_REMOVE':
+                    return {
+                        ...context,
+                        lastValidCart: context.cart,
+                        cart: {
+                            ...context.cart,
+                            lines: context?.cart?.lines.filter(({ id }) => !event.payload.lines.includes(id)),
+                        },
+                    };
+                case 'CARTLINE_UPDATE':
+                    return {
+                        ...context,
+                        lastValidCart: context.cart,
+                        cart: {
+                            ...context.cart,
+                            lines: context.cart.lines.map((line) => {
+                                const updatedLine = event.payload.lines.find(({ id }) => id === line.id);
+                                if (updatedLine && updatedLine.quantity) {
+                                    return {
+                                        ...line,
+                                        quantity: updatedLine.quantity,
+                                    };
+                                }
+                                return line;
+                            }),
+                        },
+                    };
+            }
+            return { cart: context.cart ? { ...context.cart } : undefined };
+        },
         onCartActionComplete(context, event) {
+            const cartActionEvent = event.payload.cartActionEvent;
             switch (event.type) {
                 case 'RESOLVE':
-                    switch (event.payload.cartActionEvent.type) {
+                    switch (cartActionEvent.type) {
                         case 'CART_CREATE':
+                            publishCreateAnalytics(context, cartActionEvent);
                             return onCreateComplete?.();
                         case 'CARTLINE_ADD':
+                            publishLineAddAnalytics(context, cartActionEvent);
                             return onLineAddComplete?.();
                         case 'CARTLINE_REMOVE':
+                            publishLineRemoveAnalytics(context, cartActionEvent);
                             return onLineRemoveComplete?.();
                         case 'CARTLINE_UPDATE':
+                            publishLineUpdateAnalytics(context, cartActionEvent);
                             return onLineUpdateComplete?.();
                         case 'NOTE_UPDATE':
                             return onNoteUpdateComplete?.();
                         case 'BUYER_IDENTITY_UPDATE':
+                            if (countryCodeNotUpdated(context, cartActionEvent)) {
+                                customerOverridesCountryCode.current = true;
+                            }
                             return onBuyerIdentityUpdateComplete?.();
                         case 'CART_ATTRIBUTES_UPDATE':
                             return onAttributesUpdateComplete?.();
                         case 'DISCOUNT_CODES_UPDATE':
+                            publishDiscountCodesUpdateAnalytics(context, cartActionEvent);
                             return onDiscountCodesUpdateComplete?.();
                     }
             }
@@ -57,6 +114,25 @@ export function CartProviderV2({ children, numCartLines, onCreate, onLineAdd, on
     });
     const [cartReady, setCartReady] = useState(false);
     const cartCompleted = cartState.matches('cartCompleted');
+    const countryChanged = (cartState.value === 'idle' ||
+        cartState.value === 'error' ||
+        cartState.value === 'cartCompleted') &&
+        countryCode !== cartState?.context?.cart?.buyerIdentity?.countryCode &&
+        !cartState.context.errors;
+    useEffect(() => {
+        if (!countryChanged || customerOverridesCountryCode.current)
+            return;
+        cartSend({
+            type: 'BUYER_IDENTITY_UPDATE',
+            payload: { buyerIdentity: { countryCode, customerAccessToken } },
+        });
+    }, [
+        countryCode,
+        customerAccessToken,
+        countryChanged,
+        customerOverridesCountryCode,
+        cartSend,
+    ]);
     // send cart events when ready
     const onCartReadySend = useCallback((cartEvent) => {
         if (!cartReady) {
@@ -102,23 +178,42 @@ export function CartProviderV2({ children, numCartLines, onCreate, onLineAdd, on
             setCartReady(true);
         }
     }, [cartReady, cartSend]);
+    const cartCreate = useCallback((cartInput) => {
+        if (countryCode && !cartInput.buyerIdentity?.countryCode) {
+            if (cartInput.buyerIdentity == null) {
+                cartInput.buyerIdentity = {};
+            }
+            cartInput.buyerIdentity.countryCode = countryCode;
+        }
+        if (customerAccessToken &&
+            !cartInput.buyerIdentity?.customerAccessToken) {
+            if (cartInput.buyerIdentity == null) {
+                cartInput.buyerIdentity = {};
+            }
+            cartInput.buyerIdentity.customerAccessToken = customerAccessToken;
+        }
+        onCartReadySend({
+            type: 'CART_CREATE',
+            payload: cartInput,
+        });
+    }, [countryCode, customerAccessToken, onCartReadySend]);
     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,
-                });
-            },
+            cartCreate,
             linesAdd(lines) {
-                onCartReadySend({
-                    type: 'CARTLINE_ADD',
-                    payload: { lines },
-                });
+                if (cartState?.context?.cart?.id) {
+                    onCartReadySend({
+                        type: 'CARTLINE_ADD',
+                        payload: { lines },
+                    });
+                }
+                else {
+                    cartCreate({ lines });
+                }
             },
             linesRemove(lines) {
                 onCartReadySend({
@@ -171,6 +266,7 @@ export function CartProviderV2({ children, numCartLines, onCreate, onLineAdd, on
             cartFragment: usedCartFragment,
         };
     }, [
+        cartCreate,
         cartState?.context?.cart,
         cartState?.context?.errors,
         cartState.value,
@@ -182,11 +278,11 @@ export function CartProviderV2({ children, numCartLines, onCreate, onLineAdd, on
 function transposeStatus(status) {
     switch (status) {
         case 'uninitialized':
+        case 'initializationError':
             return 'uninitialized';
         case 'idle':
         case 'cartCompleted':
         case 'error':
-        case 'initializationError':
             return 'idle';
         case 'cartFetching':
             return 'fetching';
@@ -230,3 +326,45 @@ function storageAvailable(type) {
             storage.length !== 0);
     }
 }
+function countryCodeNotUpdated(context, event) {
+    return (event.payload.buyerIdentity.countryCode &&
+        context.cart?.buyerIdentity?.countryCode !==
+            event.payload.buyerIdentity.countryCode);
+}
+// Cart Analytics
+function publishCreateAnalytics(context, event) {
+    ClientAnalytics.publish(ClientAnalytics.eventNames.ADD_TO_CART, true, {
+        addedCartLines: event.payload.lines,
+        cart: context.rawCartResult,
+        prevCart: null,
+    });
+}
+function publishLineAddAnalytics(context, event) {
+    ClientAnalytics.publish(ClientAnalytics.eventNames.ADD_TO_CART, true, {
+        addedCartLines: event.payload.lines,
+        cart: context.rawCartResult,
+        prevCart: context.prevCart,
+    });
+}
+function publishLineUpdateAnalytics(context, event) {
+    ClientAnalytics.publish(ClientAnalytics.eventNames.UPDATE_CART, true, {
+        updatedCartLines: event.payload.lines,
+        oldCart: context.prevCart,
+        cart: context.rawCartResult,
+        prevCart: context.prevCart,
+    });
+}
+function publishLineRemoveAnalytics(context, event) {
+    ClientAnalytics.publish(ClientAnalytics.eventNames.REMOVE_FROM_CART, true, {
+        removedCartLines: event.payload.lines,
+        cart: context.rawCartResult,
+        prevCart: context.prevCart,
+    });
+}
+function publishDiscountCodesUpdateAnalytics(context, event) {
+    ClientAnalytics.publish(ClientAnalytics.eventNames.DISCOUNT_CODE_UPDATED, true, {
+        updatedDiscountCodes: event.payload.discountCodes,
+        cart: context.rawCartResult,
+        prevCart: context.prevCart,
+    });
+}

package/dist/esnext/components/CartProvider/types.d.ts

@@ -97,6 +97,7 @@ export declare type CartAction = {
 } | {
     type: 'resolve';
     cart: Cart;
+    rawCartResult?: CartFragmentFragment;
 } | {
     type: 'reject';
     errors: any;
@@ -105,6 +106,9 @@ export declare type CartAction = {
 };
 export declare type CartMachineContext = {
     cart?: Cart;
+    lastValidCart?: Cart;
+    rawCartResult?: CartFragmentFragment;
+    prevCart?: Cart;
     errors?: any;
 };
 export declare type CartFetchEvent = {
@@ -170,6 +174,7 @@ export declare type CartMachineFetchResultEvent = {
     payload: {
         cartActionEvent: CartMachineActionEvent;
         cart: Cart;
+        rawCartResult: CartFragmentFragment;
     };
 } | {
     type: 'ERROR';
@@ -183,30 +188,40 @@ export declare type CartMachineTypeState = {
     value: 'uninitialized';
     context: CartMachineContext & {
         cart: undefined;
+        lastValidCart: undefined;
+        prevCart: undefined;
         errors?: any;
     };
 } | {
     value: 'initializationError';
     context: CartMachineContext & {
         cart: undefined;
+        lastValidCart: undefined;
+        prevCart: undefined;
         errors: any;
     };
 } | {
     value: 'cartCompleted';
     context: CartMachineContext & {
         cart: undefined;
+        prevCart?: Cart;
+        lastValidCart: undefined;
         errors: any;
     };
 } | {
     value: 'idle';
     context: CartMachineContext & {
         cart: Cart;
+        prevCart?: Cart;
+        lastValidCart?: Cart;
         errors?: any;
     };
 } | {
     value: 'error';
     context: CartMachineContext & {
         cart?: Cart;
+        prevCart?: Cart;
+        lastValidCart?: Cart;
         errors: any;
     };
 } | {
@@ -249,5 +264,6 @@ export declare type CartMachineActions = {
     cartAttributesUpdateAction: CartMachineAction;
     discountCodesUpdateAction: CartMachineAction;
     onCartActionEntry?: CartMachineAction;
+    onCartActionOptimisticUI?: StateMachine.AssignActionObject<CartMachineContext, CartMachineEvent>;
     onCartActionComplete?: CartMachineAction;
 };

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

@@ -1,16 +1,22 @@
 import { StateMachine } from '@xstate/fsm';
 import { CartFragmentFragment } from './graphql/CartFragment.js';
 import { Cart, CartMachineActionEvent, CartMachineContext, CartMachineEvent, CartMachineFetchResultEvent, CartMachineTypeState } from './types.js';
-export declare function useCartAPIStateMachine({ numCartLines, onCartActionEntry, onCartActionComplete, data, cartFragment, }: {
+import { CountryCode } from '../../storefront-api-types.js';
+export declare function useCartAPIStateMachine({ numCartLines, onCartActionEntry, onCartActionOptimisticUI, onCartActionComplete, data, cartFragment, countryCode, }: {
     /**  Maximum number of cart lines to fetch. Defaults to 250 cart lines. */
     numCartLines?: number;
     /** A callback that is invoked just before a Cart API action executes. */
     onCartActionEntry?: (context: CartMachineContext, event: CartMachineActionEvent) => void;
+    /** A callback that is invoked after executing the entry actions for optimistic UI changes.  */
+    onCartActionOptimisticUI?: (context: CartMachineContext, event: CartMachineEvent) => Partial<CartMachineContext>;
     /** A callback that is invoked after a Cart API completes. */
     onCartActionComplete?: (context: CartMachineContext, event: CartMachineFetchResultEvent) => void;
+    /** A callback that is invoked after a Cart API completes. */
     /** 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;
+    /** The ISO country code for i18n. */
+    countryCode?: CountryCode;
 }): readonly [StateMachine.State<CartMachineContext, CartMachineEvent, CartMachineTypeState>, (event: "CART_FETCH" | "CART_CREATE" | "CARTLINE_ADD" | "CARTLINE_REMOVE" | "CARTLINE_UPDATE" | "NOTE_UPDATE" | "BUYER_IDENTITY_UPDATE" | "CART_ATTRIBUTES_UPDATE" | "DISCOUNT_CODES_UPDATE" | "CART_COMPLETED" | "RESOLVE" | "ERROR" | CartMachineEvent) => void, StateMachine.Service<CartMachineContext, CartMachineEvent, CartMachineTypeState>];
 export declare function cartFromGraphQL(cart: CartFragmentFragment): Cart;

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

@@ -5,28 +5,41 @@ import { useCartActions } from './CartActions.client.js';
 import { useMemo } from 'react';
 function invokeCart(action, options) {
     return {
-        entry: [...(options?.entryActions || []), 'onCartActionEntry', action],
+        entry: [
+            ...(options?.entryActions || []),
+            'onCartActionEntry',
+            'onCartActionOptimisticUI',
+            action,
+        ],
         on: {
             RESOLVE: {
                 target: options?.resolveTarget || 'idle',
                 actions: [
                     assign({
+                        prevCart: (context) => context?.cart,
                         cart: (_, event) => event?.payload?.cart,
-                        errors: (_, event) => undefined,
+                        rawCartResult: (_, event) => event?.payload?.rawCartResult,
+                        errors: (_) => undefined,
                     }),
                 ],
             },
             ERROR: {
                 target: options?.errorTarget || 'error',
-                actions: assign({
-                    errors: (_, event) => event?.payload?.errors,
-                }),
+                actions: [
+                    assign({
+                        prevCart: (context) => context?.cart,
+                        cart: (context, _) => context?.lastValidCart,
+                        errors: (_, event) => event?.payload?.errors,
+                    }),
+                ],
             },
             CART_COMPLETED: {
                 target: 'cartCompleted',
                 actions: assign({
-                    cart: (_, event) => undefined,
-                    errors: (_, event) => undefined,
+                    prevCart: (_) => undefined,
+                    cart: (_) => undefined,
+                    lastValidCart: (_) => undefined,
+                    errors: (_) => undefined,
                 }),
             },
         },
@@ -40,9 +53,6 @@ const INITIALIZING_CART_EVENTS = {
     CART_CREATE: {
         target: 'cartCreating',
     },
-    CARTLINE_ADD: {
-        target: 'cartCreating',
-    },
 };
 const UPDATING_CART_EVENTS = {
     CARTLINE_ADD: {
@@ -101,10 +111,11 @@ const cartMachine = createMachine({
         discountCodesUpdating: invokeCart('discountCodesUpdateAction'),
     },
 });
-export function useCartAPIStateMachine({ numCartLines, onCartActionEntry, onCartActionComplete, data: cart, cartFragment, }) {
+export function useCartAPIStateMachine({ numCartLines, onCartActionEntry, onCartActionOptimisticUI, onCartActionComplete, data: cart, cartFragment, countryCode, }) {
     const { cartFetch, cartCreate, cartLineAdd, cartLineUpdate, cartLineRemove, noteUpdate, buyerIdentityUpdate, cartAttributesUpdate, discountCodesUpdate, } = useCartActions({
         numCartLines,
         cartFragment,
+        countryCode,
     });
     const [state, send, service] = useMachine(cartMachine, {
         actions: {
@@ -116,7 +127,7 @@ export function useCartAPIStateMachine({ numCartLines, onCartActionEntry, onCart
                 send(resultEvent);
             },
             cartCreateAction: async (_, event) => {
-                if (event.type !== 'CART_CREATE' && event.type !== 'CARTLINE_ADD')
+                if (event.type !== 'CART_CREATE')
                     return;
                 const { data, errors } = await cartCreate(event?.payload);
                 const resultEvent = eventFromFetchResult(event, data?.cartCreate?.cart, errors);
@@ -178,6 +189,11 @@ export function useCartAPIStateMachine({ numCartLines, onCartActionEntry, onCart
                     }
                 },
             }),
+            ...(onCartActionOptimisticUI && {
+                onCartActionOptimisticUI: assign((context, event) => {
+                    return onCartActionOptimisticUI(context, event);
+                }),
+            }),
             ...(onCartActionComplete && {
                 onCartActionComplete: (context, event) => {
                     if (isCartFetchResultEvent(event)) {
@@ -211,7 +227,11 @@ function eventFromFetchResult(cartActionEvent, cart, errors) {
     }
     return {
         type: 'RESOLVE',
-        payload: { cart: cartFromGraphQL(cart), cartActionEvent },
+        payload: {
+            cart: cartFromGraphQL(cart),
+            rawCartResult: cart,
+            cartActionEvent,
+        },
     };
 }
 function isCartActionEvent(event) {

package/dist/esnext/utilities/storefrontApi.js

@@ -5,24 +5,28 @@ let secretTokenWarned = false;
 let storefrontIdWarned = false;
 export function getStorefrontApiRequestHeaders({ buyerIp, publicStorefrontToken, privateStorefrontToken, storefrontId, }) {
     const headers = {};
-    if (!privateStorefrontToken && !secretTokenWarned) {
-        secretTokenWarned = true;
+    if (!privateStorefrontToken) {
         privateStorefrontToken = getOxygenVariable(OXYGEN_SECRET_TOKEN_ENVIRONMENT_VARIABLE);
-        if (!privateStorefrontToken && !__HYDROGEN_DEV__) {
-            log.error('No secret Shopify storefront API token was defined. This means your app will be rate limited!\nSee how to add the token: ');
-        }
-        else if (privateStorefrontToken) {
-            log.warn('The private shopify storefront API token was loaded implicitly by an environment variable. This is deprecated, and instead the variable should be defined directly in the Hydrogen Config.\nFor more information: ');
+        if (!secretTokenWarned) {
+            secretTokenWarned = true;
+            if (!privateStorefrontToken && !__HYDROGEN_DEV__) {
+                log.error('No secret Shopify storefront API token was defined. This means your app will be rate limited!\nSee how to add the token: ');
+            }
+            else if (privateStorefrontToken) {
+                log.warn('The private shopify storefront API token was loaded implicitly by an environment variable. This is deprecated, and instead the variable should be defined directly in the Hydrogen Config.\nFor more information: ');
+            }
         }
     }
-    if (!storefrontId && !storefrontIdWarned) {
-        storefrontIdWarned = true;
+    if (!storefrontId) {
         storefrontId = getOxygenVariable(SHOPIFY_STOREFRONT_ID_VARIABLE);
-        if (!storefrontId && !__HYDROGEN_DEV__) {
-            log.warn('No storefrontId was defined. This means the analytics on your admin dashboard will be broken!\nSee how to fix it: ');
-        }
-        else if (storefrontId) {
-            log.warn('The storefrontId was loaded implicitly by an environment variable. This is deprecated, and instead the variable should be defined directly in the Hydrogen Config.\nFor more information: ');
+        if (!storefrontIdWarned) {
+            storefrontIdWarned = true;
+            if (!storefrontId && !__HYDROGEN_DEV__) {
+                log.warn('No storefrontId was defined. This means the analytics on your admin dashboard will be broken!\nSee how to fix it: ');
+            }
+            else if (storefrontId) {
+                log.warn('The storefrontId was loaded implicitly by an environment variable. This is deprecated, and instead the variable should be defined directly in the Hydrogen Config.\nFor more information: ');
+            }
         }
     }
     /**

package/dist/esnext/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "1.4.0";
+export declare const LIB_VERSION = "1.4.1";

package/dist/esnext/version.js

@@ -1 +1 @@
-export const LIB_VERSION = '1.4.0';
+export const LIB_VERSION = '1.4.1';

package/package.json

@@ -7,7 +7,7 @@
   "engines": {
     "node": ">=14"
   },
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "Modern custom Shopify storefronts",
   "license": "MIT",
   "main": "dist/esnext/index.js",