@shopify/hydrogen 1.5.0 → 1.6.1

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

@@ -1,118 +1,76 @@
-import React, { useEffect, useCallback, useReducer, useMemo, useRef, } from 'react';
-import { flattenConnection } from '../../utilities/flattenConnection/index.js';
-import { CartLineAdd, CartCreate, CartLineRemove, CartLineUpdate, CartNoteUpdate, CartBuyerIdentityUpdate, CartAttributesUpdate, CartDiscountCodesUpdate, CartQuery, defaultCartFragment, } from './cart-queries.js';
+import React, { useCallback, useEffect, useMemo, useRef, useState, useTransition, } from 'react';
 import { CountryCode, } from '../../storefront-api-types.js';
-import { useCartFetch } from './hooks.client.js';
 import { CartContext } from './context.js';
+import { useCartAPIStateMachine } from './useCartAPIStateMachine.client.js';
 import { CART_ID_STORAGE_KEY } from './constants.js';
 import { ClientAnalytics } from '../../foundation/Analytics/ClientAnalytics.js';
-function getLocalStoragePolyfill() {
-    const storage = {};
-    return {
-        removeItem(key) {
-            delete storage[key];
-        },
-        setItem(key, value) {
-            storage[key] = value;
-        },
-        getItem(key) {
-            return storage[key];
-        },
-    };
-}
-const localStorage = (function () {
-    try {
-        return window.localStorage || getLocalStoragePolyfill();
-    }
-    catch (e) {
-        return getLocalStoragePolyfill();
+export function CartProvider({ 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;
     }
-})();
-function cartReducer(state, action) {
-    switch (action.type) {
-        case 'cartFetch': {
-            if (state.status === 'uninitialized') {
-                return {
-                    status: 'fetching',
-                };
-            }
-            break;
-        }
-        case 'cartCreate': {
-            if (state.status === 'uninitialized') {
-                return {
-                    status: 'creating',
-                };
-            }
-            break;
-        }
-        case 'resolve': {
-            const resolvableStatuses = ['updating', 'fetching', 'creating'];
-            if (resolvableStatuses.includes(state.status)) {
-                return {
-                    status: 'idle',
-                    cart: action.cart,
-                };
-            }
-            break;
-        }
-        case 'reject': {
-            if (action.errors) {
-                console.group('%cCart Error:', 'color:red');
-                for (const [i, error] of action.errors.entries()) {
-                    console.log(`%c${i + 1}. ` + error.message, 'color:red');
-                }
-                console.groupEnd();
-            }
-            if (state.status === 'fetching' || state.status === 'creating') {
-                return { status: 'uninitialized', error: action.errors };
-            }
-            else if (state.status === 'updating') {
-                return {
-                    status: 'idle',
-                    cart: state.lastValidCart,
-                    error: action.errors,
-                };
+    const onCartActionEntry = useCallback((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?.();
             }
-            break;
         }
-        case 'resetCart': {
-            if (state.status === 'fetching') {
-                return { status: 'uninitialized' };
-            }
-            break;
+        catch (error) {
+            console.error('Cart entry action failed', error);
         }
-        case 'addLineItem': {
-            if (state.status === 'idle') {
-                return {
-                    status: 'updating',
-                    cart: state.cart,
-                    lastValidCart: state.cart,
-                };
-            }
-            break;
-        }
-        case 'removeLineItem': {
-            if (state.status === 'idle') {
+    }, [
+        onAttributesUpdate,
+        onBuyerIdentityUpdate,
+        onCreate,
+        onDiscountCodesUpdate,
+        onLineAdd,
+        onLineRemove,
+        onLineUpdate,
+        onNoteUpdate,
+    ]);
+    const onCartActionOptimisticUI = useCallback((context, event) => {
+        if (!context?.cart)
+            return { cart: undefined };
+        switch (event.type) {
+            case 'CARTLINE_REMOVE':
                 return {
-                    status: 'updating',
+                    ...context,
+                    lastValidCart: context.cart,
                     cart: {
-                        ...state.cart,
-                        lines: state.cart.lines.filter(({ id }) => !action.lines.includes(id)),
+                        ...context.cart,
+                        lines: context?.cart?.lines.filter(({ id }) => !event.payload.lines.includes(id)),
                     },
-                    lastValidCart: state.cart,
                 };
-            }
-            break;
-        }
-        case 'updateLineItem': {
-            if (state.status === 'idle') {
+            case 'CARTLINE_UPDATE':
                 return {
-                    status: 'updating',
+                    ...context,
+                    lastValidCart: context.cart,
                     cart: {
-                        ...state.cart,
-                        lines: state.cart.lines.map((line) => {
-                            const updatedLine = action.lines.find(({ id }) => id === line.id);
+                        ...context.cart,
+                        lines: context.cart.lines.map((line) => {
+                            const updatedLine = event.payload.lines.find(({ id }) => id === line.id);
                             if (updatedLine && updatedLine.quantity) {
                                 return {
                                     ...line,
@@ -122,433 +80,455 @@ function cartReducer(state, action) {
                             return line;
                         }),
                     },
-                    lastValidCart: state.cart,
-                };
-            }
-            break;
-        }
-        case 'noteUpdate': {
-            if (state.status === 'idle') {
-                return {
-                    status: 'updating',
-                    cart: state.cart,
-                    lastValidCart: state.cart,
                 };
-            }
-            break;
         }
-        case 'buyerIdentityUpdate': {
-            if (state.status === 'idle') {
-                return {
-                    status: 'updating',
-                    cart: state.cart,
-                    lastValidCart: state.cart,
-                };
+        return { cart: context.cart ? { ...context.cart } : undefined };
+    }, []);
+    const onCartActionComplete = useCallback((context, event) => {
+        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?.();
+                    }
             }
-            break;
         }
-        case 'cartAttributesUpdate': {
-            if (state.status === 'idle') {
-                return {
-                    status: 'updating',
-                    cart: state.cart,
-                    lastValidCart: state.cart,
-                };
-            }
-            break;
+        catch (error) {
+            console.error('onCartActionComplete failed', error);
         }
-        case 'discountCodesUpdate': {
-            if (state.status === 'idle') {
-                return {
-                    status: 'updating',
-                    cart: state.cart,
-                    lastValidCart: state.cart,
-                };
+    }, [
+        onAttributesUpdateComplete,
+        onBuyerIdentityUpdateComplete,
+        onCreateComplete,
+        onDiscountCodesUpdateComplete,
+        onLineAddComplete,
+        onLineRemoveComplete,
+        onLineUpdateComplete,
+        onNoteUpdateComplete,
+    ]);
+    const [cartState, cartSend] = useCartAPIStateMachine({
+        numCartLines,
+        data: cart,
+        cartFragment,
+        countryCode,
+        onCartActionEntry,
+        onCartActionOptimisticUI,
+        onCartActionComplete,
+    });
+    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;
+    const fetchingFromStorage = useRef(false);
+    /**
+     * Initializes cart with priority in this order:
+     * 1. cart props
+     * 2. localStorage cartId
+     */
+    useEffect(() => {
+        if (!cartReady.current && !fetchingFromStorage.current) {
+            if (!cart && storageAvailable('localStorage')) {
+                fetchingFromStorage.current = true;
+                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);
+                }
             }
-            break;
+            cartReady.current = true;
         }
-    }
-    throw new Error(`Cannot dispatch event (${action.type}) for current cart state (${state.status})`);
-}
-/**
- * The `CartProvider` component creates a context for using a cart. It creates a cart object and callbacks
- * that can be accessed by any descendent component using the `useCart` hook and related hooks. It also carries out
- * any callback props when a relevant action is performed. For example, if a `onLineAdd` callback is provided,
- * then the callback will be called when a new line item is successfully added to the cart.
- *
- * The `CartProvider` component must be a descendent of the `ShopifyProvider` component.
- * You must use this component if you want to use the `useCart` hook or related hooks, or if you would like to use the `AddToCartButton` component.
- */
-export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLineRemove, onLineUpdate, onNoteUpdate, onBuyerIdentityUpdate, onAttributesUpdate, onDiscountCodesUpdate, data: cart, cartFragment = defaultCartFragment, customerAccessToken, countryCode = CountryCode.Us, }) {
-    if (countryCode)
-        countryCode = countryCode.toUpperCase();
-    const initialStatus = cart
-        ? { status: 'idle', cart: cartFromGraphQL(cart) }
-        : { status: 'uninitialized' };
-    const [state, dispatch] = useReducer((state, dispatch) => cartReducer(state, dispatch), initialStatus);
-    const fetchCart = useCartFetch();
-    const countryChanged = state.status === 'idle' &&
-        countryCode !== state?.cart?.buyerIdentity?.countryCode &&
-        !state.error;
-    const cartFetch = useCallback(async (cartId) => {
-        dispatch({ type: 'cartFetch' });
-        const { data } = await fetchCart({
-            query: CartQuery(cartFragment),
-            variables: {
-                id: cartId,
-                numCartLines,
-                country: countryCode,
-            },
-        });
-        if (!data?.cart) {
-            localStorage.removeItem(CART_ID_STORAGE_KEY);
-            dispatch({ type: 'resetCart' });
+    }, [cart, cartReady, cartSend]);
+    // Update cart country code if cart and props countryCode's as different
+    useEffect(() => {
+        if (!countryChanged || customerOverridesCountryCode.current)
             return;
-        }
-        dispatch({ type: 'resolve', cart: cartFromGraphQL(data.cart) });
-    }, [fetchCart, cartFragment, numCartLines, countryCode]);
-    const cartCreate = useCallback(async (cart) => {
-        dispatch({ type: 'cartCreate' });
-        onCreate?.();
-        if (countryCode && !cart.buyerIdentity?.countryCode) {
-            if (cart.buyerIdentity == null) {
-                cart.buyerIdentity = {};
-            }
-            cart.buyerIdentity.countryCode = countryCode;
-        }
-        if (customerAccessToken && !cart.buyerIdentity?.customerAccessToken) {
-            if (cart.buyerIdentity == null) {
-                cart.buyerIdentity = {};
-            }
-            cart.buyerIdentity.customerAccessToken = customerAccessToken;
-        }
-        const { data, errors } = await fetchCart({
-            query: CartCreate(cartFragment),
-            variables: {
-                input: cart,
-                numCartLines,
-                country: countryCode,
-            },
+        cartSend({
+            type: 'BUYER_IDENTITY_UPDATE',
+            payload: { buyerIdentity: { countryCode, customerAccessToken } },
         });
-        if (errors) {
-            dispatch({
-                type: 'reject',
-                errors,
-            });
-        }
-        if (data?.cartCreate?.cart) {
-            if (cart.lines) {
-                ClientAnalytics.publish(ClientAnalytics.eventNames.ADD_TO_CART, true, {
-                    addedCartLines: cart.lines,
-                    cart: data.cartCreate.cart,
-                    prevCart: null,
-                });
-            }
-            dispatch({
-                type: 'resolve',
-                cart: cartFromGraphQL(data.cartCreate.cart),
-            });
-            localStorage.setItem(CART_ID_STORAGE_KEY, data.cartCreate.cart.id);
-        }
     }, [
-        onCreate,
         countryCode,
-        fetchCart,
-        cartFragment,
-        numCartLines,
         customerAccessToken,
+        countryChanged,
+        customerOverridesCountryCode,
+        cartSend,
     ]);
-    const addLineItem = useCallback(async (lines, state) => {
-        if (state.status === 'idle') {
-            dispatch({ type: 'addLineItem' });
-            onLineAdd?.();
-            const { data, errors } = await fetchCart({
-                query: CartLineAdd(cartFragment),
-                variables: {
-                    cartId: state.cart.id,
-                    lines,
-                    numCartLines,
-                    country: countryCode,
-                },
-            });
-            if (errors) {
-                dispatch({
-                    type: 'reject',
-                    errors,
-                });
-            }
-            if (data?.cartLinesAdd?.cart) {
-                ClientAnalytics.publish(ClientAnalytics.eventNames.ADD_TO_CART, true, {
-                    addedCartLines: lines,
-                    cart: data.cartLinesAdd.cart,
-                    prevCart: state.cart,
-                });
-                dispatch({
-                    type: 'resolve',
-                    cart: cartFromGraphQL(data.cartLinesAdd.cart),
-                });
-            }
+    // send cart events when ready
+    const onCartReadySend = useCallback((cartEvent) => {
+        if (!cartReady.current) {
+            return console.warn("Cart isn't ready yet");
         }
-    }, [onLineAdd, fetchCart, cartFragment, numCartLines, countryCode]);
-    const removeLineItem = useCallback(async (lines, state) => {
-        if (state.status === 'idle') {
-            dispatch({ type: 'removeLineItem', lines });
-            onLineRemove?.();
-            const { data, errors } = await fetchCart({
-                query: CartLineRemove(cartFragment),
-                variables: {
-                    cartId: state.cart.id,
-                    lines,
-                    numCartLines,
-                    country: countryCode,
-                },
-            });
-            if (errors) {
-                dispatch({
-                    type: 'reject',
-                    errors,
-                });
-            }
-            if (data?.cartLinesRemove?.cart) {
-                ClientAnalytics.publish(ClientAnalytics.eventNames.REMOVE_FROM_CART, true, {
-                    removedCartLines: lines,
-                    cart: data.cartLinesRemove.cart,
-                    prevCart: state.cart,
-                });
-                dispatch({
-                    type: 'resolve',
-                    cart: cartFromGraphQL(data.cartLinesRemove.cart),
-                });
-            }
-        }
-    }, [onLineRemove, fetchCart, cartFragment, numCartLines, countryCode]);
-    const updateLineItem = useCallback(async (lines, state) => {
-        if (state.status === 'idle') {
-            dispatch({ type: 'updateLineItem', lines });
-            onLineUpdate?.();
-            const { data, errors } = await fetchCart({
-                query: CartLineUpdate(cartFragment),
-                variables: {
-                    cartId: state.cart.id,
-                    lines,
-                    numCartLines,
-                    country: countryCode,
-                },
-            });
-            if (errors) {
-                dispatch({
-                    type: 'reject',
-                    errors,
-                });
-            }
-            if (data?.cartLinesUpdate?.cart) {
-                ClientAnalytics.publish(ClientAnalytics.eventNames.UPDATE_CART, true, {
-                    updatedCartLines: lines,
-                    oldCart: state.cart,
-                    cart: data.cartLinesUpdate.cart,
-                    prevCart: state.cart,
-                });
-                dispatch({
-                    type: 'resolve',
-                    cart: cartFromGraphQL(data.cartLinesUpdate.cart),
-                });
-            }
-        }
-    }, [onLineUpdate, fetchCart, cartFragment, numCartLines, countryCode]);
-    const noteUpdate = useCallback(async (note, state) => {
-        if (state.status === 'idle') {
-            dispatch({ type: 'noteUpdate' });
-            onNoteUpdate?.();
-            const { data, errors } = await fetchCart({
-                query: CartNoteUpdate(cartFragment),
-                variables: {
-                    cartId: state.cart.id,
-                    note,
-                    numCartLines,
-                    country: countryCode,
-                },
-            });
-            if (errors) {
-                dispatch({
-                    type: 'reject',
-                    errors,
-                });
+        cartSend(cartEvent);
+    }, [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);
             }
-            if (data?.cartNoteUpdate?.cart) {
-                dispatch({
-                    type: 'resolve',
-                    cart: cartFromGraphQL(data.cartNoteUpdate.cart),
-                });
+            catch (error) {
+                console.warn('Failed to save cartId to localStorage', error);
             }
         }
-    }, [onNoteUpdate, fetchCart, cartFragment, numCartLines, countryCode]);
-    const buyerIdentityUpdate = useCallback(async (buyerIdentity, state) => {
-        if (state.status === 'idle') {
-            dispatch({ type: 'buyerIdentityUpdate' });
-            onBuyerIdentityUpdate?.();
-            const { data, errors } = await fetchCart({
-                query: CartBuyerIdentityUpdate(cartFragment),
-                variables: {
-                    cartId: state.cart.id,
-                    buyerIdentity,
-                    numCartLines,
-                    country: countryCode,
-                },
-            });
-            if (errors) {
-                dispatch({
-                    type: 'reject',
-                    errors,
-                });
+    }, [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);
             }
-            if (data?.cartBuyerIdentityUpdate?.cart) {
-                dispatch({
-                    type: 'resolve',
-                    cart: cartFromGraphQL(data.cartBuyerIdentityUpdate.cart),
-                });
+            catch (error) {
+                console.warn('Failed to delete cartId from localStorage', error);
             }
         }
-    }, [onBuyerIdentityUpdate, fetchCart, cartFragment, numCartLines, countryCode]);
-    const cartAttributesUpdate = useCallback(async (attributes, state) => {
-        if (state.status === 'idle') {
-            dispatch({ type: 'cartAttributesUpdate' });
-            onAttributesUpdate?.();
-            const { data, errors } = await fetchCart({
-                query: CartAttributesUpdate(cartFragment),
-                variables: {
-                    cartId: state.cart.id,
-                    attributes,
-                    numCartLines,
-                    country: countryCode,
-                },
-            });
-            if (errors) {
-                dispatch({
-                    type: 'reject',
-                    errors,
-                });
-            }
-            if (data?.cartAttributesUpdate?.cart) {
-                dispatch({
-                    type: 'resolve',
-                    cart: cartFromGraphQL(data.cartAttributesUpdate.cart),
-                });
+    }, [cartCompleted]);
+    const cartCreate = useCallback((cartInput) => {
+        if (countryCode && !cartInput.buyerIdentity?.countryCode) {
+            if (cartInput.buyerIdentity == null) {
+                cartInput.buyerIdentity = {};
             }
+            cartInput.buyerIdentity.countryCode = countryCode;
         }
-    }, [onAttributesUpdate, fetchCart, cartFragment, numCartLines, countryCode]);
-    const discountCodesUpdate = useCallback(async (discountCodes, state) => {
-        if (state.status === 'idle') {
-            dispatch({ type: 'discountCodesUpdate' });
-            onDiscountCodesUpdate?.();
-            const { data, errors } = await fetchCart({
-                query: CartDiscountCodesUpdate(cartFragment),
-                variables: {
-                    cartId: state.cart.id,
-                    discountCodes,
-                    numCartLines,
-                    country: countryCode,
-                },
-            });
-            if (errors) {
-                dispatch({
-                    type: 'reject',
-                    errors,
-                });
-            }
-            if (data?.cartDiscountCodesUpdate?.cart) {
-                ClientAnalytics.publish(ClientAnalytics.eventNames.DISCOUNT_CODE_UPDATED, true, {
-                    updatedDiscountCodes: discountCodes,
-                    cart: data.cartDiscountCodesUpdate.cart,
-                    prevCart: state.cart,
-                });
-                dispatch({
-                    type: 'resolve',
-                    cart: cartFromGraphQL(data.cartDiscountCodesUpdate.cart),
-                });
+        if (customerAccessToken &&
+            !cartInput.buyerIdentity?.customerAccessToken) {
+            if (cartInput.buyerIdentity == null) {
+                cartInput.buyerIdentity = {};
             }
+            cartInput.buyerIdentity.customerAccessToken = customerAccessToken;
         }
-    }, [onDiscountCodesUpdate, fetchCart, cartFragment, numCartLines, countryCode]);
-    const didFetchCart = useRef(false);
-    useEffect(() => {
-        if (localStorage.getItem(CART_ID_STORAGE_KEY) &&
-            state.status === 'uninitialized' &&
-            !didFetchCart.current) {
-            didFetchCart.current = true;
-            cartFetch(localStorage.getItem(CART_ID_STORAGE_KEY));
-        }
-    }, [cartFetch, state]);
-    useEffect(() => {
-        if (!countryChanged)
-            return;
-        buyerIdentityUpdate({ countryCode, customerAccessToken }, state);
-    }, [
-        state,
-        buyerIdentityUpdate,
-        countryCode,
-        customerAccessToken,
-        countryChanged,
-    ]);
+        onCartReadySend({
+            type: 'CART_CREATE',
+            payload: cartInput,
+        });
+    }, [countryCode, customerAccessToken, onCartReadySend]);
+    // Delays the cart state in the context if the page is hydrating
+    // preventing suspense boundary errors.
+    const cartDisplayState = useDelayedStateUntilHydration(cartState);
     const cartContextValue = useMemo(() => {
         return {
-            ...('cart' in state
-                ? state.cart
-                : {
-                    lines: [],
-                    attributes: [],
-                    ...(cart ? cartFromGraphQL(cart) : {}),
-                }),
-            status: state.status,
-            error: 'error' in state ? state.error : undefined,
-            totalQuantity: 'cart' in state ? state?.cart?.totalQuantity ?? 0 : 0,
+            ...(cartDisplayState?.context?.cart ?? { lines: [], attributes: [] }),
+            status: transposeStatus(cartDisplayState.value),
+            error: cartDisplayState?.context?.errors,
+            totalQuantity: cartDisplayState?.context?.cart?.totalQuantity ?? 0,
             cartCreate,
             linesAdd(lines) {
-                if ('cart' in state && state.cart.id) {
-                    addLineItem(lines, state);
+                if (cartDisplayState?.context?.cart?.id) {
+                    onCartReadySend({
+                        type: 'CARTLINE_ADD',
+                        payload: { lines },
+                    });
                 }
                 else {
                     cartCreate({ lines });
                 }
             },
             linesRemove(lines) {
-                removeLineItem(lines, state);
+                onCartReadySend({
+                    type: 'CARTLINE_REMOVE',
+                    payload: {
+                        lines,
+                    },
+                });
             },
             linesUpdate(lines) {
-                updateLineItem(lines, state);
+                onCartReadySend({
+                    type: 'CARTLINE_UPDATE',
+                    payload: {
+                        lines,
+                    },
+                });
             },
             noteUpdate(note) {
-                noteUpdate(note, state);
+                onCartReadySend({
+                    type: 'NOTE_UPDATE',
+                    payload: {
+                        note,
+                    },
+                });
             },
             buyerIdentityUpdate(buyerIdentity) {
-                buyerIdentityUpdate(buyerIdentity, state);
+                onCartReadySend({
+                    type: 'BUYER_IDENTITY_UPDATE',
+                    payload: {
+                        buyerIdentity,
+                    },
+                });
             },
             cartAttributesUpdate(attributes) {
-                cartAttributesUpdate(attributes, state);
+                onCartReadySend({
+                    type: 'CART_ATTRIBUTES_UPDATE',
+                    payload: {
+                        attributes,
+                    },
+                });
             },
             discountCodesUpdate(discountCodes) {
-                discountCodesUpdate(discountCodes, state);
+                onCartReadySend({
+                    type: 'DISCOUNT_CODES_UPDATE',
+                    payload: {
+                        discountCodes,
+                    },
+                });
             },
             cartFragment,
         };
     }, [
-        state,
-        cart,
         cartCreate,
+        cartDisplayState?.context?.cart,
+        cartDisplayState?.context?.errors,
+        cartDisplayState.value,
         cartFragment,
-        addLineItem,
-        removeLineItem,
-        updateLineItem,
-        noteUpdate,
-        buyerIdentityUpdate,
-        cartAttributesUpdate,
-        discountCodesUpdate,
+        onCartReadySend,
     ]);
     return (React.createElement(CartContext.Provider, { value: cartContextValue }, children));
 }
-function cartFromGraphQL(cart) {
-    return {
-        ...cart,
-        // @ts-expect-error While the cart still uses fragments, there will be a TS error here until we remove those fragments and get the type in-line
-        lines: flattenConnection(cart.lines),
-        note: cart.note ?? undefined,
-    };
+function transposeStatus(status) {
+    switch (status) {
+        case 'uninitialized':
+        case 'initializationError':
+            return 'uninitialized';
+        case 'idle':
+        case 'cartCompleted':
+        case 'error':
+            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';
+    }
+}
+/**
+ * Delays a state update until hydration finishes. Useful for preventing suspense boundaries errors when updating a context
+ * @remarks this uses startTransition and waits for it to finish.
+ */
+function useDelayedStateUntilHydration(state) {
+    const [isPending, startTransition] = useTransition();
+    const [delayedState, setDelayedState] = useState(state);
+    const firstTimePending = useRef(false);
+    if (isPending) {
+        firstTimePending.current = true;
+    }
+    const firstTimePendingFinished = useRef(false);
+    if (!isPending && firstTimePending.current) {
+        firstTimePendingFinished.current = true;
+    }
+    useEffect(() => {
+        startTransition(() => {
+            if (!firstTimePendingFinished.current) {
+                setDelayedState(state);
+            }
+        });
+    }, [state]);
+    const displayState = firstTimePendingFinished.current ? state : delayedState;
+    return displayState;
+}
+/** 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);
+    }
+}
+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
 }
+`;