@shopify/hydrogen 1.0.0-alpha.22 → 1.0.0

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

@@ -1,379 +1,466 @@
-import * as React from 'react';
-import { flattenConnection } from '../../utilities';
-import { CartLineAdd, CartCreate, CartLineRemove, CartLineUpdate, CartNoteUpdate, CartBuyerIdentityUpdate, CartAttributesUpdate, CartDiscountCodesUpdate, } from '../../graphql/graphql-constants';
-import { useCartFetch } from './hooks';
+import React, { useEffect, useCallback, useReducer, useMemo, useRef, } from 'react';
+import { flattenConnection } from '../../utilities/flattenConnection';
+import { CartLineAdd, CartCreate, CartLineRemove, CartLineUpdate, CartNoteUpdate, CartBuyerIdentityUpdate, CartAttributesUpdate, CartDiscountCodesUpdate, CartQuery, defaultCartFragment, } from './cart-queries';
+import { CountryCode, } from '../../storefront-api-types';
+import { useCartFetch } from './hooks.client';
 import { CartContext } from './context';
-import { CART_COOKIE_TTL_DAYS, CART_ID_COOKIE } from './constants';
-function cartReducer(state, event) {
-    switch (state.status) {
-        case 'uninitialized': {
-            if (event.type === 'cartCreate') {
-                return [
-                    {
-                        status: 'creating',
+import { CART_ID_STORAGE_KEY } from './constants';
+import { ClientAnalytics } from '../../foundation/Analytics/ClientAnalytics';
+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,
+                };
+            }
+            break;
+        }
+        case 'resetCart': {
+            if (state.status === 'fetching') {
+                return { status: 'uninitialized' };
+            }
+            break;
+        }
+        case 'addLineItem': {
+            if (state.status === 'idle') {
+                return {
+                    status: 'updating',
+                    cart: state.cart,
+                    lastValidCart: state.cart,
+                };
+            }
+            break;
+        }
+        case 'removeLineItem': {
+            if (state.status === 'idle') {
+                return {
+                    status: 'updating',
+                    cart: {
+                        ...state.cart,
+                        lines: state.cart.lines.filter(({ id }) => !action.lines.includes(id)),
                     },
-                    {
-                        type: 'cartCreate',
-                        cart: event.cart,
+                    lastValidCart: state.cart,
+                };
+            }
+            break;
+        }
+        case 'updateLineItem': {
+            if (state.status === 'idle') {
+                return {
+                    status: 'updating',
+                    cart: {
+                        ...state.cart,
+                        lines: state.cart.lines.map((line) => {
+                            const updatedLine = action.lines.find(({ id }) => id === line.id);
+                            if (updatedLine && updatedLine.quantity) {
+                                return {
+                                    ...line,
+                                    quantity: updatedLine.quantity,
+                                };
+                            }
+                            return line;
+                        }),
                     },
-                ];
+                    lastValidCart: state.cart,
+                };
             }
             break;
         }
-        case 'creating': {
-            switch (event.type) {
-                case 'resolve': {
-                    return [
-                        {
-                            status: 'idle',
-                            cart: event.cart,
-                        },
-                    ];
-                }
-                case 'reject': {
-                    return [{ status: 'uninitialized', error: event.error }];
-                }
+        case 'noteUpdate': {
+            if (state.status === 'idle') {
+                return {
+                    status: 'updating',
+                    cart: state.cart,
+                    lastValidCart: state.cart,
+                };
             }
             break;
         }
-        case 'updating': {
-            switch (event.type) {
-                case 'resolve': {
-                    return [{ status: 'idle', cart: event.cart }];
-                }
-                case 'reject': {
-                    return [
-                        {
-                            status: 'idle',
-                            cart: state.lastValidCart,
-                            error: event.error,
-                        },
-                    ];
-                }
+        case 'buyerIdentityUpdate': {
+            if (state.status === 'idle') {
+                return {
+                    status: 'updating',
+                    cart: state.cart,
+                    lastValidCart: state.cart,
+                };
             }
+            break;
         }
-        case 'updating':
-        case 'idle': {
-            switch (event.type) {
-                case 'addLineItem': {
-                    return [
-                        {
-                            status: 'updating',
-                            cart: state.cart,
-                            lastValidCart: state.cart,
-                        },
-                        {
-                            type: 'addLineItem',
-                            cartId: state.cart.id,
-                            lines: event.lines,
-                        },
-                    ];
-                }
-                case 'removeLineItem': {
-                    return [
-                        {
-                            status: 'updating',
-                            cart: {
-                                ...state.cart,
-                                lines: state.cart.lines.filter(({ id }) => !event.lines.includes(id)),
-                            },
-                            lastValidCart: state.cart,
-                        },
-                        {
-                            type: 'removeLineItem',
-                            cartId: state.cart.id,
-                            lines: event.lines,
-                        },
-                    ];
-                }
-                case 'updateLineItem': {
-                    return [
-                        {
-                            status: 'updating',
-                            cart: {
-                                ...state.cart,
-                                lines: state.cart.lines.map((line) => {
-                                    const updatedLine = event.lines.find(({ id }) => id === line.id);
-                                    if (updatedLine && updatedLine.quantity) {
-                                        return {
-                                            ...line,
-                                            quantity: updatedLine.quantity,
-                                        };
-                                    }
-                                    return line;
-                                }),
-                            },
-                            lastValidCart: state.cart,
-                        },
-                        {
-                            type: 'updateLineItem',
-                            cartId: state.cart.id,
-                            lines: event.lines,
-                        },
-                    ];
-                }
-                case 'noteUpdate': {
-                    return [
-                        { status: 'updating', cart: state.cart, lastValidCart: state.cart },
-                        { type: 'noteUpdate', cartId: state.cart.id, note: event.note },
-                    ];
-                }
-                case 'buyerIdentityUpdate': {
-                    return [
-                        { status: 'updating', cart: state.cart, lastValidCart: state.cart },
-                        {
-                            type: 'buyerIdentityUpdate',
-                            cartId: state.cart.id,
-                            buyerIdentity: event.buyerIdentity,
-                        },
-                    ];
-                }
-                case 'cartAttributesUpdate': {
-                    return [
-                        { status: 'updating', cart: state.cart, lastValidCart: state.cart },
-                        {
-                            type: 'cartAttributesUpdate',
-                            cartId: state.cart.id,
-                            attributes: event.attributes,
-                        },
-                    ];
-                }
-                case 'discountCodesUpdate': {
-                    return [
-                        { status: 'updating', cart: state.cart, lastValidCart: state.cart },
-                        {
-                            type: 'discountCodesUpdate',
-                            cartId: state.cart.id,
-                            discountCodes: event.discountCodes,
-                        },
-                    ];
-                }
+        case 'cartAttributesUpdate': {
+            if (state.status === 'idle') {
+                return {
+                    status: 'updating',
+                    cart: state.cart,
+                    lastValidCart: state.cart,
+                };
             }
+            break;
+        }
+        case 'discountCodesUpdate': {
+            if (state.status === 'idle') {
+                return {
+                    status: 'updating',
+                    cart: state.cart,
+                    lastValidCart: state.cart,
+                };
+            }
+            break;
         }
     }
-    throw new Error(`Cannot dispatch event (${event.type}) for current cart state (${state.status})`);
+    throw new Error(`Cannot dispatch event (${action.type}) for current cart state (${state.status})`);
 }
-export function CartProvider({ children, cart, numCartLines, }) {
+/**
+ * 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, effect], dispatch] = React.useReducer(([state], dispatch) => cartReducer(state, dispatch), initialStatus);
-    const fetch = useCartFetch();
-    React.useEffect(() => {
-        let cancelled = false;
-        async function runEffect(effect) {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
-            switch (effect.type) {
-                case 'cartCreate': {
-                    const { data, error } = await fetch({
-                        query: CartCreate,
-                        variables: {
-                            input: effect.cart,
-                            numCartLines,
-                        },
-                    });
-                    if (cancelled)
-                        return;
-                    if (error) {
-                        dispatch({
-                            type: 'reject',
-                            error: error,
-                        });
-                    }
-                    if ((_a = data === null || data === void 0 ? void 0 : data.cartCreate) === null || _a === void 0 ? void 0 : _a.cart) {
-                        dispatch({
-                            type: 'resolve',
-                            cart: cartFromGraphQL(data.cartCreate.cart),
-                        });
-                        const expires = new Date(Date.now() + CART_COOKIE_TTL_DAYS * 24 * 60 * 60 * 1000).toUTCString();
-                        document.cookie = `${CART_ID_COOKIE}=${data.cartCreate.cart.id}; Path=/; Expires=${expires}`;
-                    }
-                    break;
-                }
-                case 'addLineItem': {
-                    const { data, error } = await fetch({
-                        query: CartLineAdd,
-                        variables: {
-                            cartId: effect.cartId,
-                            lines: effect.lines,
-                            numCartLines,
-                        },
-                    });
-                    if (cancelled)
-                        return;
-                    if (error) {
-                        dispatch({
-                            type: 'reject',
-                            error: error,
-                        });
-                    }
-                    if ((_b = data === null || data === void 0 ? void 0 : data.cartLinesAdd) === null || _b === void 0 ? void 0 : _b.cart) {
-                        dispatch({
-                            type: 'resolve',
-                            cart: cartFromGraphQL(data.cartLinesAdd.cart),
-                        });
-                    }
-                    break;
-                }
-                case 'removeLineItem': {
-                    const { data, error } = await fetch({
-                        query: CartLineRemove,
-                        variables: {
-                            cartId: effect.cartId,
-                            lines: effect.lines,
-                            numCartLines,
-                        },
-                    });
-                    if (cancelled)
-                        return;
-                    if (error) {
-                        dispatch({
-                            type: 'reject',
-                            error,
-                        });
-                    }
-                    if ((_c = data === null || data === void 0 ? void 0 : data.cartLinesRemove) === null || _c === void 0 ? void 0 : _c.cart) {
-                        dispatch({
-                            type: 'resolve',
-                            cart: cartFromGraphQL(data.cartLinesRemove.cart),
-                        });
-                    }
-                    break;
-                }
-                case 'updateLineItem': {
-                    const { data, error } = await fetch({
-                        query: CartLineUpdate,
-                        variables: {
-                            cartId: effect.cartId,
-                            lines: effect.lines,
-                            numCartLines,
-                        },
-                    });
-                    if (cancelled)
-                        return;
-                    if (error) {
-                        dispatch({
-                            type: 'reject',
-                            error: error,
-                        });
-                    }
-                    if ((_d = data === null || data === void 0 ? void 0 : data.cartLinesUpdate) === null || _d === void 0 ? void 0 : _d.cart) {
-                        dispatch({
-                            type: 'resolve',
-                            cart: cartFromGraphQL(data.cartLinesUpdate.cart),
-                        });
-                    }
-                    break;
-                }
-                case 'noteUpdate': {
-                    const { data, error } = await fetch({
-                        query: CartNoteUpdate,
-                        variables: {
-                            cartId: effect.cartId,
-                            note: effect.note,
-                            numCartLines,
-                        },
-                    });
-                    if (cancelled)
-                        return;
-                    if (error) {
-                        dispatch({
-                            type: 'reject',
-                            error: error,
-                        });
-                    }
-                    if ((_e = data === null || data === void 0 ? void 0 : data.cartNoteUpdate) === null || _e === void 0 ? void 0 : _e.cart) {
-                        dispatch({
-                            type: 'resolve',
-                            cart: cartFromGraphQL(data.cartNoteUpdate.cart),
-                        });
-                    }
-                    break;
-                }
-                case 'buyerIdentityUpdate': {
-                    const { data, error } = await fetch({
-                        query: CartBuyerIdentityUpdate,
-                        variables: {
-                            cartId: effect.cartId,
-                            buyerIdentity: effect.buyerIdentity,
-                            numCartLines,
-                        },
-                    });
-                    if (cancelled)
-                        return;
-                    if (error) {
-                        dispatch({
-                            type: 'reject',
-                            error: error,
-                        });
-                    }
-                    if ((_f = data === null || data === void 0 ? void 0 : data.cartBuyerIdentityUpdate) === null || _f === void 0 ? void 0 : _f.cart) {
-                        dispatch({
-                            type: 'resolve',
-                            cart: cartFromGraphQL(data.cartBuyerIdentityUpdate.cart),
-                        });
-                    }
-                    break;
-                }
-                case 'cartAttributesUpdate': {
-                    const { data, error } = await fetch({
-                        query: CartAttributesUpdate,
-                        variables: {
-                            cartId: effect.cartId,
-                            attributes: effect.attributes,
-                            numCartLines,
-                        },
-                    });
-                    if (cancelled)
-                        return;
-                    if (error) {
-                        dispatch({
-                            type: 'reject',
-                            error: error,
-                        });
-                    }
-                    if ((_g = data === null || data === void 0 ? void 0 : data.cartAttributesUpdate) === null || _g === void 0 ? void 0 : _g.cart) {
-                        dispatch({
-                            type: 'resolve',
-                            cart: cartFromGraphQL(data.cartAttributesUpdate.cart),
-                        });
-                    }
-                    break;
-                }
-                case 'discountCodesUpdate': {
-                    const { data, error } = await fetch({
-                        query: CartDiscountCodesUpdate,
-                        variables: {
-                            cartId: effect.cartId,
-                            discountCodes: effect.discountCodes,
-                            numCartLines,
-                        },
-                    });
-                    if (cancelled)
-                        return;
-                    if (error) {
-                        dispatch({
-                            type: 'reject',
-                            error: error,
-                        });
-                    }
-                    if ((_h = data === null || data === void 0 ? void 0 : data.cartDiscountCodesUpdate) === null || _h === void 0 ? void 0 : _h.cart) {
-                        dispatch({
-                            type: 'resolve',
-                            cart: cartFromGraphQL(data.cartDiscountCodesUpdate.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) {
+            window.localStorage.removeItem(CART_ID_STORAGE_KEY);
+            dispatch({ type: 'resetCart' });
+            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;
         }
-        if (effect) {
-            runEffect(effect);
+        const { data, errors } = await fetchCart({
+            query: CartCreate(cartFragment),
+            variables: {
+                input: cart,
+                numCartLines,
+                country: countryCode,
+            },
+        });
+        if (errors) {
+            dispatch({
+                type: 'reject',
+                errors,
+            });
         }
-        return () => {
-            cancelled = true;
-        };
-    }, [effect, dispatch, fetch, numCartLines]);
-    const cartContextValue = React.useMemo(() => {
+        if (data?.cartCreate?.cart) {
+            if (cart.lines) {
+                ClientAnalytics.publish(ClientAnalytics.eventNames.ADD_TO_CART, true, {
+                    addedCartLines: cart.lines,
+                    cart: data.cartCreate.cart,
+                });
+            }
+            dispatch({
+                type: 'resolve',
+                cart: cartFromGraphQL(data.cartCreate.cart),
+            });
+            window.localStorage.setItem(CART_ID_STORAGE_KEY, data.cartCreate.cart.id);
+        }
+    }, [
+        onCreate,
+        countryCode,
+        fetchCart,
+        cartFragment,
+        numCartLines,
+        customerAccessToken,
+    ]);
+    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,
+                });
+                dispatch({
+                    type: 'resolve',
+                    cart: cartFromGraphQL(data.cartLinesAdd.cart),
+                });
+            }
+        }
+    }, [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,
+                });
+                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,
+                });
+                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,
+                });
+            }
+            if (data?.cartNoteUpdate?.cart) {
+                dispatch({
+                    type: 'resolve',
+                    cart: cartFromGraphQL(data.cartNoteUpdate.cart),
+                });
+            }
+        }
+    }, [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,
+                });
+            }
+            if (data?.cartBuyerIdentityUpdate?.cart) {
+                dispatch({
+                    type: 'resolve',
+                    cart: cartFromGraphQL(data.cartBuyerIdentityUpdate.cart),
+                });
+            }
+        }
+    }, [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),
+                });
+            }
+        }
+    }, [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,
+                });
+                dispatch({
+                    type: 'resolve',
+                    cart: cartFromGraphQL(data.cartDiscountCodesUpdate.cart),
+                });
+            }
+        }
+    }, [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,
+    ]);
+    const cartContextValue = useMemo(() => {
         return {
             ...('cart' in state
                 ? state.cart
@@ -384,39 +471,56 @@ export function CartProvider({ children, cart, numCartLines, }) {
                 }),
             status: state.status,
             error: 'error' in state ? state.error : undefined,
-            cartCreate(cart) {
-                dispatch({ type: 'cartCreate', cart: cart });
-            },
+            totalQuantity: 'cart' in state ? state?.cart?.totalQuantity ?? 0 : 0,
+            cartCreate,
             linesAdd(lines) {
-                dispatch({ type: 'addLineItem', lines });
+                if ('cart' in state && state.cart.id) {
+                    addLineItem(lines, state);
+                }
+                else {
+                    cartCreate({ lines });
+                }
             },
             linesRemove(lines) {
-                dispatch({ type: 'removeLineItem', lines });
+                removeLineItem(lines, state);
             },
             linesUpdate(lines) {
-                dispatch({ type: 'updateLineItem', lines });
+                updateLineItem(lines, state);
             },
             noteUpdate(note) {
-                dispatch({ type: 'noteUpdate', note });
+                noteUpdate(note, state);
             },
             buyerIdentityUpdate(buyerIdentity) {
-                dispatch({ type: 'buyerIdentityUpdate', buyerIdentity });
+                buyerIdentityUpdate(buyerIdentity, state);
             },
             cartAttributesUpdate(attributes) {
-                dispatch({ type: 'cartAttributesUpdate', attributes });
+                cartAttributesUpdate(attributes, state);
             },
             discountCodesUpdate(discountCodes) {
-                dispatch({ type: 'discountCodesUpdate', discountCodes });
+                discountCodesUpdate(discountCodes, state);
             },
+            cartFragment,
         };
-    }, [state, cart]);
+    }, [
+        state,
+        cart,
+        cartCreate,
+        cartFragment,
+        addLineItem,
+        removeLineItem,
+        updateLineItem,
+        noteUpdate,
+        buyerIdentityUpdate,
+        cartAttributesUpdate,
+        discountCodesUpdate,
+    ]);
     return (React.createElement(CartContext.Provider, { value: cartContextValue }, children));
 }
 function cartFromGraphQL(cart) {
-    var _a;
     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: (_a = cart.note) !== null && _a !== void 0 ? _a : undefined,
+        note: cart.note ?? undefined,
     };
 }