@shopify/hydrogen 1.4.0 → 1.4.2

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;
+    cartFragment: string;
+    /** The ISO country code for i18n. */
+    countryCode?: CountryCode;
 }): {
     cartFetch: (cartId: string) => Promise<{
         data: CartQueryQuery | undefined;
@@ -57,4 +59,3 @@ export declare function useCartActions({ numCartLines, cartFragment, }: {
     }>;
     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

@@ -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, 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,
@@ -130,103 +130,3 @@ export function useCartActions({ numCartLines, cartFragment = defaultCartFragmen
         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

@@ -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: cart, cartFragment, customerAccessToken, countryCode, }: {
     /** Any `ReactNode` elements. */
     children: React.ReactNode;
     /**  Maximum number of cart lines to fetch. Defaults to 250 cart lines. */
@@ -41,4 +42,9 @@ 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;
+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/CartProviderV2.client.js

@@ -1,69 +1,176 @@
-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, }) {
-    const { cartFragment: usedCartFragment } = useCartActions({
-        numCartLines,
-        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 = defaultCartFragment, 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 [cartState, cartSend] = useCartAPIStateMachine({
         numCartLines,
         cartFragment,
+        countryCode,
         onCartActionEntry(context, event) {
+            try {
+                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?.();
+                }
+            }
+            catch (error) {
+                console.error('Cart entry action failed', error);
+            }
+        },
+        onCartActionOptimisticUI(context, event) {
+            if (!context?.cart)
+                return { cart: undefined };
             switch (event.type) {
-                case 'CART_CREATE':
-                    return onCreate?.();
-                case 'CARTLINE_ADD':
-                    return onLineAdd?.();
                 case 'CARTLINE_REMOVE':
-                    return onLineRemove?.();
+                    return {
+                        ...context,
+                        lastValidCart: context.cart,
+                        cart: {
+                            ...context.cart,
+                            lines: context?.cart?.lines.filter(({ id }) => !event.payload.lines.includes(id)),
+                        },
+                    };
                 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?.();
+                    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) {
-            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 cartActionEvent = event.payload.cartActionEvent;
+            try {
+                switch (event.type) {
+                    case 'RESOLVE':
+                        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?.();
+                        }
+                }
+            }
+            catch (error) {
+                console.error('onCartActionComplete failed', error);
             }
         },
     });
-    const [cartReady, setCartReady] = useState(false);
+    const cartReady = useRef(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;
+    /**
+     * Initializes cart with priority in this order:
+     * 1. cart props
+     * 2. localStorage cartId
+     */
+    useEffect(() => {
+        if (!cartReady.current) {
+            if (cart) {
+                cartSend({ type: 'CART_SET', payload: { cart } });
+            }
+            else if (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);
+                }
+            }
+            cartReady.current = true;
+        }
+    }, [cart, cartReady, cartSend]);
+    // Update cart country code if cart and props countryCode's as different
+    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) {
+        if (!cartReady.current) {
             return console.warn("Cart isn't ready yet");
         }
         cartSend(cartEvent);
-    }, [cartReady, cartSend]);
+    }, [cartSend]);
     // save cart id to local storage
     useEffect(() => {
         if (cartState?.context?.cart?.id && storageAvailable('localStorage')) {
@@ -86,39 +193,42 @@ export function CartProviderV2({ children, numCartLines, onCreate, onLineAdd, on
             }
         }
     }, [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 } });
-                }
+    const cartCreate = useCallback((cartInput) => {
+        if (countryCode && !cartInput.buyerIdentity?.countryCode) {
+            if (cartInput.buyerIdentity == null) {
+                cartInput.buyerIdentity = {};
             }
-            catch (error) {
-                console.warn('error fetching cartId');
-                console.warn(error);
+            cartInput.buyerIdentity.countryCode = countryCode;
+        }
+        if (customerAccessToken &&
+            !cartInput.buyerIdentity?.customerAccessToken) {
+            if (cartInput.buyerIdentity == null) {
+                cartInput.buyerIdentity = {};
             }
-            setCartReady(true);
+            cartInput.buyerIdentity.customerAccessToken = customerAccessToken;
         }
-    }, [cartReady, cartSend]);
+        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({
@@ -168,25 +278,26 @@ export function CartProviderV2({ children, numCartLines, onCreate, onLineAdd, on
                     },
                 });
             },
-            cartFragment: usedCartFragment,
+            cartFragment,
         };
     }, [
+        cartCreate,
+        cartFragment,
         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':
+        case 'initializationError':
             return 'uninitialized';
         case 'idle':
         case 'cartCompleted':
         case 'error':
-        case 'initializationError':
             return 'idle';
         case 'cartFetching':
             return 'fetching';
@@ -230,3 +341,145 @@ 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,
+    });
+}
+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/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 = {
@@ -117,6 +121,12 @@ export declare type CartCreateEvent = {
     type: 'CART_CREATE';
     payload: CartInput;
 };
+export declare type CartSetEvent = {
+    type: 'CART_SET';
+    payload: {
+        cart: CartFragmentFragment;
+    };
+};
 export declare type CartLineAddEvent = {
     type: 'CARTLINE_ADD';
     payload: {
@@ -159,7 +169,7 @@ export declare type DiscountCodesUpdateEvent = {
         discountCodes: string[];
     };
 };
-export declare type CartMachineActionEvent = CartFetchEvent | CartCreateEvent | CartLineAddEvent | CartLineRemoveEvent | CartLineUpdateEvent | NoteUpdateEvent | BuyerIdentityUpdateEvent | CartAttributesUpdateEvent | DiscountCodesUpdateEvent;
+export declare type CartMachineActionEvent = CartFetchEvent | CartCreateEvent | CartSetEvent | CartLineAddEvent | CartLineRemoveEvent | CartLineUpdateEvent | NoteUpdateEvent | BuyerIdentityUpdateEvent | CartAttributesUpdateEvent | DiscountCodesUpdateEvent;
 export declare type CartMachineFetchResultEvent = {
     type: 'CART_COMPLETED';
     payload: {
@@ -170,6 +180,7 @@ export declare type CartMachineFetchResultEvent = {
     payload: {
         cartActionEvent: CartMachineActionEvent;
         cart: Cart;
+        rawCartResult: CartFragmentFragment;
     };
 } | {
     type: 'ERROR';
@@ -183,30 +194,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 +270,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,21 @@
 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;
     /** 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;
-}): 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>];
+    cartFragment: string;
+    /** The ISO country code for i18n. */
+    countryCode?: CountryCode;
+}): readonly [StateMachine.State<CartMachineContext, CartMachineEvent, CartMachineTypeState>, (event: "CART_FETCH" | "CART_CREATE" | "CART_SET" | "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,8 +53,14 @@ const INITIALIZING_CART_EVENTS = {
     CART_CREATE: {
         target: 'cartCreating',
     },
-    CARTLINE_ADD: {
-        target: 'cartCreating',
+    CART_SET: {
+        target: 'idle',
+        actions: [
+            assign({
+                rawCartResult: (_, event) => event.payload.cart,
+                cart: (_, event) => cartFromGraphQL(event.payload.cart),
+            }),
+        ],
     },
 };
 const UPDATING_CART_EVENTS = {
@@ -81,10 +100,10 @@ const cartMachine = createMachine({
             on: INITIALIZING_CART_EVENTS,
         },
         idle: {
-            on: UPDATING_CART_EVENTS,
+            on: { ...INITIALIZING_CART_EVENTS, ...UPDATING_CART_EVENTS },
         },
         error: {
-            on: UPDATING_CART_EVENTS,
+            on: { ...INITIALIZING_CART_EVENTS, ...UPDATING_CART_EVENTS },
         },
         cartFetching: invokeCart('cartFetchAction', {
             errorTarget: 'initializationError',
@@ -101,10 +120,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 +136,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 +198,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 +236,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/entry-server.js

@@ -152,9 +152,12 @@ async function processRequest(handleRequest, App, url, request, sessionApi, opti
     const rsc = runRSC({ App, state, log, request, response });
     if (isRSCRequest) {
         const buffered = await bufferReadableStream(rsc.readable.getReader());
-        postRequestTasks('rsc', 200, request, response);
-        response.headers.set('cache-control', response.cacheControlHeader);
-        cacheResponse(response, request, [buffered], revalidate);
+        const rscDidError = !!rsc.didError();
+        postRequestTasks('rsc', rscDidError ? 500 : 200, request, response, rscDidError);
+        if (rscDidError) {
+            response.headers.set('cache-control', response.cacheControlHeader);
+            cacheResponse(response, request, [buffered], revalidate);
+        }
         return new Response(buffered, {
             headers: response.headers,
         });
@@ -319,7 +322,7 @@ async function runSSR({ rsc, state, request, response, nodeResponse, nonce, dev,
                 // Last SSR write might be pending, delay closing the writable one tick
                 setTimeout(() => {
                     writable.close();
-                    postRequestTasks('str', responseOptions.status, request, response);
+                    postRequestTasks('str', responseOptions.status, request, response, !!didError());
                     response.status = responseOptions.status;
                     cacheResponse(response, request, savedChunks, revalidate);
                 }, 0);
@@ -328,7 +331,7 @@ async function runSSR({ rsc, state, request, response, nodeResponse, nonce, dev,
         else {
             // Redirects do not write body
             writable.close();
-            postRequestTasks('str', responseOptions.status, request, response);
+            postRequestTasks('str', responseOptions.status, request, response, !!didError());
         }
         if (response.canStream()) {
             return new Response(transform.readable, responseOptions);
@@ -376,7 +379,7 @@ async function runSSR({ rsc, state, request, response, nodeResponse, nonce, dev,
                 log.trace('node complete ssr');
                 if (!revalidate &&
                     (response.canStream() || nodeResponse.writableEnded)) {
-                    postRequestTasks('str', nodeResponse.statusCode, request, response);
+                    postRequestTasks('str', nodeResponse.statusCode, request, response, !!didError());
                     return;
                 }
                 writeHeadToNodeResponse(nodeResponse, response, log, didError());
@@ -396,8 +399,8 @@ async function runSSR({ rsc, state, request, response, nodeResponse, nonce, dev,
                     let html = template;
                     if (!error) {
                         html = assembleHtml({ ssrHtml, rscPayload, request, template });
-                        postRequestTasks('ssr', nodeResponse.statusCode, request, response);
                     }
+                    postRequestTasks('ssr', nodeResponse.statusCode, request, response, !!didError());
                     if (!nodeResponse.writableEnded) {
                         nodeResponse.write(html);
                         nodeResponse.end();
@@ -506,8 +509,8 @@ function isRedirect(response) {
 function flightContainer(chunk) {
     return `<meta data-flight="${htmlEncode(chunk)}" />`;
 }
-function postRequestTasks(type, status, request, response) {
-    logServerResponse(type, request, status);
+function postRequestTasks(type, status, request, response, didError) {
+    logServerResponse(type, request, status, didError);
     logCacheControlHeaders(type, request, response);
     logQueryTimings(type, request);
     request.savePreloadQueries();

package/dist/esnext/foundation/Analytics/connectors/Shopify/ShopifyAnalytics.client.js

@@ -74,7 +74,9 @@ function getCookieDomain(cookieDomain) {
 function trackPageView(payload) {
     microSessionCount += 1;
     try {
-        sendToServer(storefrontPageViewSchema(payload));
+        payload &&
+            payload.shopify &&
+            sendToServer(storefrontPageViewSchema(payload));
     }
     catch (error) {
         console.error(`Error Shopify analytics: ${ClientAnalytics.eventNames.PAGE_VIEW}`, error);
@@ -94,7 +96,7 @@ function buildStorefrontPageViewPayload(payload) {
     const shopify = payload.shopify;
     let formattedData = {
         appClientId: '6167201',
-        hydrogenSubchannelId: shopify.storefrontId,
+        hydrogenSubchannelId: shopify.storefrontId || '0',
         isPersistentCookie: shopify.isPersistentCookie,
         uniqToken: shopify.userId,
         visitToken: shopify.sessionId,

package/dist/esnext/foundation/Analytics/connectors/Shopify/ShopifyAnalytics.server.js

@@ -10,7 +10,7 @@ import { CacheLong } from '../../../Cache/strategies/index.js';
 import { gql } from '../../../../utilities/graphql-tag.js';
 import { SHOPIFY_Y, SHOPIFY_S } from '../../../../constants.js';
 export function ShopifyAnalytics({ cookieDomain }) {
-    const { storeDomain } = useShop();
+    const { storeDomain, storefrontId } = useShop();
     const request = useServerRequest();
     const cookies = parse(request.headers.get('Cookie') || '');
     const domain = cookieDomain || storeDomain;
@@ -23,7 +23,7 @@ export function ShopifyAnalytics({ cookieDomain }) {
         shopify: {
             shopId: id,
             currency: currencyCode,
-            storefrontId: globalThis.Oxygen?.env?.SHOPIFY_STOREFRONT_ID || '0',
+            storefrontId,
             acceptedLanguage: request.headers.get('Accept-Language')?.replace(/-.*/, '') || 'en',
             isPersistentCookie: !!cookies[SHOPIFY_S] || !!cookies[SHOPIFY_Y],
         },

package/dist/esnext/foundation/ShopifyProvider/ShopifyProvider.server.js

@@ -16,7 +16,8 @@ export const CLIENT_CONTEXT_ALLOW_LIST = [
 function makeShopifyContext(shopifyConfig) {
     const countryCode = shopifyConfig.defaultCountryCode ?? DEFAULT_COUNTRY;
     const languageCode = shopifyConfig.defaultLanguageCode ?? DEFAULT_LANGUAGE;
-    const storefrontId = getOxygenVariable(SHOPIFY_STOREFRONT_ID_VARIABLE);
+    const storefrontId = shopifyConfig.storefrontId ??
+        getOxygenVariable(SHOPIFY_STOREFRONT_ID_VARIABLE);
     const shopifyProviderServerValue = {
         defaultCountryCode: countryCode.toUpperCase(),
         defaultLanguageCode: languageCode.toUpperCase(),

package/dist/esnext/index.d.ts

@@ -40,5 +40,5 @@ export { CartQuery } from './components/CartProvider/cart-queries.js';
 export { fetchSync } from './foundation/fetchSync/server/fetchSync.js';
 export { type HydrogenRequest } from './foundation/HydrogenRequest/HydrogenRequest.server.js';
 export { type HydrogenResponse } from './foundation/HydrogenResponse/HydrogenResponse.server.js';
-export { type HydrogenRouteProps } from './types.js';
+export { type HydrogenRouteProps, type CachingStrategy } from './types.js';
 export { type ResourceGetter as HydrogenApiRoute, RequestOptions as HydrogenApiRouteOptions, } from './utilities/apiRoutes.js';

package/dist/esnext/utilities/apiRoutes.js

@@ -161,7 +161,7 @@ export async function renderApiRoute(request, route, hydrogenConfig, { session,
         });
     }
     if (!suppressLog) {
-        logServerResponse('api', request, response.status ?? 200);
+        logServerResponse('api', request, response.status ?? 200, false);
     }
     if (response instanceof Request) {
         const url = new URL(request.url);

package/dist/esnext/utilities/log/log.d.ts

@@ -24,5 +24,5 @@ export declare type RenderType = 'str' | 'rsc' | 'ssr' | 'api';
 export declare function getLoggerWithContext(context: Partial<HydrogenRequest>): Logger;
 export declare const log: Logger;
 export declare function setLogger(config?: LoggerConfig): void;
-export declare function logServerResponse(type: RenderType, request: HydrogenRequest, responseStatus: number): void;
+export declare function logServerResponse(type: RenderType, request: HydrogenRequest, responseStatus: number, didError: boolean): void;
 export {};

package/dist/esnext/utilities/log/log.js

@@ -72,7 +72,7 @@ const SERVER_RESPONSE_MAP = {
     rsc: 'Server Components',
     ssr: 'buffered SSR',
 };
-export function logServerResponse(type, request, responseStatus) {
+export function logServerResponse(type, request, responseStatus, didError) {
     const log = getLoggerWithContext(request);
     const coloredResponseStatus = responseStatus >= 500
         ? red(responseStatus)
@@ -85,5 +85,5 @@ export function logServerResponse(type, request, responseStatus) {
     const styledType = italic(fullType.padEnd(17));
     const paddedTiming = ((getTime() - request.time).toFixed(2) + ' ms').padEnd(10);
     const url = parseUrl(type, request.url);
-    log.debug(`${request.method} ${styledType} ${coloredResponseStatus} ${paddedTiming} ${url}`);
+    log.debug(`${request.method} ${styledType} ${coloredResponseStatus} ${didError || responseStatus >= 400 ? red('error') : green('ok   ')} ${paddedTiming} ${url}`);
 }

package/dist/esnext/utilities/storefrontApi.js

@@ -5,24 +5,25 @@ 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: https://shopify.dev/custom-storefronts/hydrogen/framework/hydrogen-config');
+            }
         }
     }
-    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) {
+                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: https://shopify.dev/custom-storefronts/hydrogen/framework/hydrogen-config');
+            }
         }
     }
     /**

package/dist/esnext/version.d.ts

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

package/dist/esnext/version.js

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

package/package.json

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