@shopify/hydrogen 0.0.0-experimental-20220526194818

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import { CartBuyerIdentityInput, CountryCode } from '../../storefront-api-types';
+import { CartFragmentFragment } from './graphql/CartFragment';
+/**
+ * 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 declare function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLineRemove, onLineUpdate, onNoteUpdate, onBuyerIdentityUpdate, onAttributesUpdate, onDiscountCodesUpdate, data: cart, cartFragment, customerAccessToken, countryCode, }: {
+    /** Any `ReactNode` elements. */
+    children: React.ReactNode;
+    numCartLines?: number;
+    /** A callback that is invoked when the process to create a cart begins, but before the cart is created in the Storefront API. */
+    onCreate?: () => void;
+    /** A callback that is invoked when the process to add a line item to the cart begins, but before the line item is added to the Storefront API. */
+    onLineAdd?: () => void;
+    /** A callback that is invoked when the process to remove a line item to the cart begins, but before the line item is removed from the Storefront API. */
+    onLineRemove?: () => void;
+    /** A callback that is invoked when the process to update a line item in the cart begins, but before the line item is updated in the Storefront API. */
+    onLineUpdate?: () => void;
+    /** A callback that is invoked when the process to add or update a note in the cart begins, but before the note is added or updated in the Storefront API. */
+    onNoteUpdate?: () => void;
+    /** A callback that is invoked when the process to update the buyer identity begins, but before the buyer identity is updated in the Storefront API. */
+    onBuyerIdentityUpdate?: () => void;
+    /** A callback that is invoked when the process to update the cart attributes begins, but before the attributes are updated in the Storefront API. */
+    onAttributesUpdate?: () => void;
+    /** A callback that is invoked when the process to update the cart discount codes begins, but before the discount codes are updated in the Storefront API. */
+    onDiscountCodesUpdate?: () => void;
+    /** 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;
+    /** A customer access token that's accessible on the server if there's a customer login. */
+    customerAccessToken?: CartBuyerIdentityInput['customerAccessToken'];
+    /** The ISO country code for i18n. */
+    countryCode?: CountryCode;
+}): JSX.Element;

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

@@ -0,0 +1,523 @@
+import React, { useEffect, useCallback, useReducer, useMemo, useRef, } from 'react';
+import { flattenConnection } from '../../utilities';
+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_ID_STORAGE_KEY } from './constants';
+import { ClientAnalytics } from '../../foundation/Analytics';
+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 (state.status === 'fetching' || state.status === 'creating') {
+                return { status: 'uninitialized', error: action.error };
+            }
+            else if (state.status === 'updating') {
+                return {
+                    status: 'idle',
+                    cart: state.lastValidCart,
+                    error: action.error,
+                };
+            }
+            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)),
+                    },
+                    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 '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,
+                };
+            }
+            break;
+        }
+        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 (${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, }) {
+    const initialStatus = cart
+        ? { status: 'idle', cart: cartFromGraphQL(cart) }
+        : { status: 'uninitialized' };
+    const [state, dispatch] = useReducer((state, dispatch) => cartReducer(state, dispatch), initialStatus);
+    const fetchCart = useCartFetch();
+    const cartFetch = useCallback(async (cartId) => {
+        dispatch({ type: 'cartFetch' });
+        const { data } = await fetchCart({
+            query: CartQuery(cartFragment),
+            variables: {
+                id: cartId,
+                numCartLines,
+                country: countryCode,
+            },
+        });
+        if (!(data === null || data === void 0 ? void 0 : 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) => {
+        var _a, _b, _c;
+        dispatch({ type: 'cartCreate' });
+        onCreate === null || onCreate === void 0 ? void 0 : onCreate();
+        if (countryCode && !((_a = cart.buyerIdentity) === null || _a === void 0 ? void 0 : _a.countryCode)) {
+            if (cart.buyerIdentity == null) {
+                cart.buyerIdentity = {};
+            }
+            cart.buyerIdentity.countryCode = countryCode;
+        }
+        if (customerAccessToken && !((_b = cart.buyerIdentity) === null || _b === void 0 ? void 0 : _b.customerAccessToken)) {
+            if (cart.buyerIdentity == null) {
+                cart.buyerIdentity = {};
+            }
+            cart.buyerIdentity.customerAccessToken = customerAccessToken;
+        }
+        const { data, error } = await fetchCart({
+            query: CartCreate(cartFragment),
+            variables: {
+                input: cart,
+                numCartLines,
+                country: countryCode,
+            },
+        });
+        if (error) {
+            dispatch({
+                type: 'reject',
+                error,
+            });
+        }
+        if ((_c = data === null || data === void 0 ? void 0 : data.cartCreate) === null || _c === void 0 ? void 0 : _c.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) => {
+        var _a;
+        if (state.status === 'idle') {
+            dispatch({ type: 'addLineItem' });
+            onLineAdd === null || onLineAdd === void 0 ? void 0 : onLineAdd();
+            const { data, error } = await fetchCart({
+                query: CartLineAdd(cartFragment),
+                variables: {
+                    cartId: state.cart.id,
+                    lines,
+                    numCartLines,
+                    country: countryCode,
+                },
+            });
+            if (error) {
+                dispatch({
+                    type: 'reject',
+                    error,
+                });
+            }
+            if ((_a = data === null || data === void 0 ? void 0 : data.cartLinesAdd) === null || _a === void 0 ? void 0 : _a.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) => {
+        var _a;
+        if (state.status === 'idle') {
+            dispatch({ type: 'removeLineItem', lines });
+            onLineRemove === null || onLineRemove === void 0 ? void 0 : onLineRemove();
+            const { data, error } = await fetchCart({
+                query: CartLineRemove(cartFragment),
+                variables: {
+                    cartId: state.cart.id,
+                    lines,
+                    numCartLines,
+                    country: countryCode,
+                },
+            });
+            if (error) {
+                dispatch({
+                    type: 'reject',
+                    error,
+                });
+            }
+            if ((_a = data === null || data === void 0 ? void 0 : data.cartLinesRemove) === null || _a === void 0 ? void 0 : _a.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) => {
+        var _a;
+        if (state.status === 'idle') {
+            dispatch({ type: 'updateLineItem', lines });
+            onLineUpdate === null || onLineUpdate === void 0 ? void 0 : onLineUpdate();
+            const { data, error } = await fetchCart({
+                query: CartLineUpdate(cartFragment),
+                variables: {
+                    cartId: state.cart.id,
+                    lines,
+                    numCartLines,
+                    country: countryCode,
+                },
+            });
+            if (error) {
+                dispatch({
+                    type: 'reject',
+                    error,
+                });
+            }
+            if ((_a = data === null || data === void 0 ? void 0 : data.cartLinesUpdate) === null || _a === void 0 ? void 0 : _a.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) => {
+        var _a;
+        if (state.status === 'idle') {
+            dispatch({ type: 'noteUpdate' });
+            onNoteUpdate === null || onNoteUpdate === void 0 ? void 0 : onNoteUpdate();
+            const { data, error } = await fetchCart({
+                query: CartNoteUpdate(cartFragment),
+                variables: {
+                    cartId: state.cart.id,
+                    note,
+                    numCartLines,
+                    country: countryCode,
+                },
+            });
+            if (error) {
+                dispatch({
+                    type: 'reject',
+                    error,
+                });
+            }
+            if ((_a = data === null || data === void 0 ? void 0 : data.cartNoteUpdate) === null || _a === void 0 ? void 0 : _a.cart) {
+                dispatch({
+                    type: 'resolve',
+                    cart: cartFromGraphQL(data.cartNoteUpdate.cart),
+                });
+            }
+        }
+    }, [onNoteUpdate, fetchCart, cartFragment, numCartLines, countryCode]);
+    const buyerIdentityUpdate = useCallback(async (buyerIdentity, state) => {
+        var _a;
+        if (state.status === 'idle') {
+            dispatch({ type: 'buyerIdentityUpdate' });
+            onBuyerIdentityUpdate === null || onBuyerIdentityUpdate === void 0 ? void 0 : onBuyerIdentityUpdate();
+            const { data, error } = await fetchCart({
+                query: CartBuyerIdentityUpdate(cartFragment),
+                variables: {
+                    cartId: state.cart.id,
+                    buyerIdentity,
+                    numCartLines,
+                    country: countryCode,
+                },
+            });
+            if (error) {
+                dispatch({
+                    type: 'reject',
+                    error,
+                });
+            }
+            if ((_a = data === null || data === void 0 ? void 0 : data.cartBuyerIdentityUpdate) === null || _a === void 0 ? void 0 : _a.cart) {
+                dispatch({
+                    type: 'resolve',
+                    cart: cartFromGraphQL(data.cartBuyerIdentityUpdate.cart),
+                });
+            }
+        }
+    }, [onBuyerIdentityUpdate, fetchCart, cartFragment, numCartLines, countryCode]);
+    const cartAttributesUpdate = useCallback(async (attributes, state) => {
+        var _a;
+        if (state.status === 'idle') {
+            dispatch({ type: 'cartAttributesUpdate' });
+            onAttributesUpdate === null || onAttributesUpdate === void 0 ? void 0 : onAttributesUpdate();
+            const { data, error } = await fetchCart({
+                query: CartAttributesUpdate(cartFragment),
+                variables: {
+                    cartId: state.cart.id,
+                    attributes,
+                    numCartLines,
+                    country: countryCode,
+                },
+            });
+            if (error) {
+                dispatch({
+                    type: 'reject',
+                    error,
+                });
+            }
+            if ((_a = data === null || data === void 0 ? void 0 : data.cartAttributesUpdate) === null || _a === void 0 ? void 0 : _a.cart) {
+                dispatch({
+                    type: 'resolve',
+                    cart: cartFromGraphQL(data.cartAttributesUpdate.cart),
+                });
+            }
+        }
+    }, [onAttributesUpdate, fetchCart, cartFragment, numCartLines, countryCode]);
+    const discountCodesUpdate = useCallback(async (discountCodes, state) => {
+        var _a;
+        if (state.status === 'idle') {
+            dispatch({ type: 'discountCodesUpdate' });
+            onDiscountCodesUpdate === null || onDiscountCodesUpdate === void 0 ? void 0 : onDiscountCodesUpdate();
+            const { data, error } = await fetchCart({
+                query: CartDiscountCodesUpdate(cartFragment),
+                variables: {
+                    cartId: state.cart.id,
+                    discountCodes,
+                    numCartLines,
+                    country: countryCode,
+                },
+            });
+            if (error) {
+                dispatch({
+                    type: 'reject',
+                    error,
+                });
+            }
+            if ((_a = data === null || data === void 0 ? void 0 : data.cartDiscountCodesUpdate) === null || _a === void 0 ? void 0 : _a.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 (state.status !== 'idle') {
+            return;
+        }
+        buyerIdentityUpdate({ countryCode, customerAccessToken }, state);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [countryCode, customerAccessToken]);
+    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.lines.reduce((previous, current) => {
+                    return previous + current.quantity;
+                }, 0)
+                : 0,
+            cartCreate,
+            linesAdd(lines) {
+                if ('cart' in state && state.cart.id) {
+                    addLineItem(lines, state);
+                }
+                else {
+                    cartCreate({ lines });
+                }
+            },
+            linesRemove(lines) {
+                removeLineItem(lines, state);
+            },
+            linesUpdate(lines) {
+                updateLineItem(lines, state);
+            },
+            noteUpdate(note) {
+                noteUpdate(note, state);
+            },
+            buyerIdentityUpdate(buyerIdentity) {
+                buyerIdentityUpdate(buyerIdentity, state);
+            },
+            cartAttributesUpdate(attributes) {
+                cartAttributesUpdate(attributes, state);
+            },
+            discountCodesUpdate(discountCodes) {
+                discountCodesUpdate(discountCodes, state);
+            },
+            cartFragment,
+        };
+    }, [
+        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,
+    };
+}

package/dist/esnext/components/CartProvider/cart-queries.d.ts

@@ -0,0 +1,10 @@
+export declare const CartLineAdd: (cartFragment: string) => string;
+export declare const CartCreate: (cartFragment: string) => string;
+export declare const CartLineRemove: (cartFragment: string) => string;
+export declare const CartLineUpdate: (cartFragment: string) => string;
+export declare const CartNoteUpdate: (cartFragment: string) => string;
+export declare const CartBuyerIdentityUpdate: (cartFragment: string) => string;
+export declare const CartAttributesUpdate: (cartFragment: string) => string;
+export declare const CartDiscountCodesUpdate: (cartFragment: string) => string;
+export declare const CartQuery: (cartFragment: string) => string;
+export declare const defaultCartFragment = "\nfragment CartFragment on Cart {\n  id\n  checkoutUrl\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        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  estimatedCost {\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";