@shopify/hydrogen 0.1.0

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

@@ -0,0 +1,422 @@
+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 { 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',
+                    },
+                    {
+                        type: 'cartCreate',
+                        cart: event.cart,
+                    },
+                ];
+            }
+            break;
+        }
+        case 'creating': {
+            switch (event.type) {
+                case 'resolve': {
+                    return [
+                        {
+                            status: 'idle',
+                            cart: event.cart,
+                        },
+                    ];
+                }
+                case 'reject': {
+                    return [{ status: 'uninitialized', error: event.error }];
+                }
+            }
+            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 '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,
+                        },
+                    ];
+                }
+            }
+        }
+    }
+    throw new Error(`Cannot dispatch event (${event.type}) for current cart state (${state.status})`);
+}
+export function CartProvider({ children, cart, numCartLines, }) {
+    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),
+                        });
+                    }
+                }
+            }
+        }
+        if (effect) {
+            runEffect(effect);
+        }
+        return () => {
+            cancelled = true;
+        };
+    }, [effect, dispatch, fetch, numCartLines]);
+    const cartContextValue = React.useMemo(() => {
+        return {
+            ...('cart' in state
+                ? state.cart
+                : {
+                    lines: [],
+                    attributes: [],
+                    ...(cart ? cartFromGraphQL(cart) : {}),
+                }),
+            status: state.status,
+            error: 'error' in state ? state.error : undefined,
+            cartCreate(cart) {
+                dispatch({ type: 'cartCreate', cart: cart });
+            },
+            linesAdd(lines) {
+                dispatch({ type: 'addLineItem', lines });
+            },
+            linesRemove(lines) {
+                dispatch({ type: 'removeLineItem', lines });
+            },
+            linesUpdate(lines) {
+                dispatch({ type: 'updateLineItem', lines });
+            },
+            noteUpdate(note) {
+                dispatch({ type: 'noteUpdate', note });
+            },
+            buyerIdentityUpdate(buyerIdentity) {
+                dispatch({ type: 'buyerIdentityUpdate', buyerIdentity });
+            },
+            cartAttributesUpdate(attributes) {
+                dispatch({ type: 'cartAttributesUpdate', attributes });
+            },
+            discountCodesUpdate(discountCodes) {
+                dispatch({ type: 'discountCodesUpdate', discountCodes });
+            },
+        };
+    }, [state, cart]);
+    return (React.createElement(CartContext.Provider, { value: cartContextValue }, children));
+}
+function cartFromGraphQL(cart) {
+    var _a;
+    return {
+        ...cart,
+        lines: flattenConnection(cart.lines),
+        note: (_a = cart.note) !== null && _a !== void 0 ? _a : undefined,
+    };
+}

package/dist/esnext/components/CartProvider/CartServerProvider.server.d.ts

@@ -0,0 +1,11 @@
+import React, { ReactNode } from 'react';
+import { ServerComponentRequest } from '../../foundation/Hydration/ServerComponentRequest.server';
+import { Cart } from './types';
+export declare function CartServerProvider({ children, request, numCartLines, }: {
+    children: (props: {
+        cart?: Cart;
+        numCartLines?: number;
+    }) => ReactNode;
+    request: ServerComponentRequest;
+    numCartLines?: number;
+}): React.ReactNode;

package/dist/esnext/components/CartProvider/CartServerProvider.server.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { CartQuery } from '../../graphql/graphql-constants';
+import { useShopQuery } from '../../hooks/useShopQuery';
+import { CART_ID_COOKIE } from './constants';
+export function CartServerProvider({ children, request, numCartLines, }) {
+    const cartId = request.cookies.get(CART_ID_COOKIE);
+    return cartId ? (React.createElement(PopulatedCartProvider, { cartId: cartId, numCartLines: numCartLines }, children)) : (children({ numCartLines }));
+}
+function PopulatedCartProvider({ cartId, children, numCartLines }) {
+    const { data, errors } = useShopQuery({
+        query: CartQuery,
+        variables: { id: cartId, numCartLines },
+    });
+    if (!(data === null || data === void 0 ? void 0 : data.cart)) {
+        // TODO: Figure out how to expire the cookie when the cart no longer exists
+        console.warn('Cart failed to load', errors);
+        return children({ numCartLines });
+    }
+    return children({ cart: data.cart, numCartLines });
+}

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

@@ -0,0 +1,2 @@
+export declare const CART_ID_COOKIE = "shopifyCartId";
+export declare const CART_COOKIE_TTL_DAYS = 14;

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

@@ -0,0 +1,2 @@
+export const CART_ID_COOKIE = 'shopifyCartId';
+export const CART_COOKIE_TTL_DAYS = 14;

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

@@ -0,0 +1,2 @@
+import { CartWithActions } from './types';
+export declare const CartContext: import("react").Context<CartWithActions | null>;

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

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export const CartContext = createContext(null);

package/dist/esnext/components/CartProvider/graphql/CartAttributesUpdateMutation.d.ts

@@ -0,0 +1,18 @@
+import * as Types from '../../../graphql/types/types';
+import { CartFragmentFragment } from './CartFragment';
+export declare type CartAttributesUpdateMutationVariables = Types.Exact<{
+    attributes: Array<Types.AttributeInput> | Types.AttributeInput;
+    cartId: Types.Scalars['ID'];
+    numCartLines?: Types.Maybe<Types.Scalars['Int']>;
+}>;
+export declare type CartAttributesUpdateMutation = {
+    __typename?: 'Mutation';
+} & {
+    cartAttributesUpdate?: Types.Maybe<{
+        __typename?: 'CartAttributesUpdatePayload';
+    } & {
+        cart?: Types.Maybe<{
+            __typename?: 'Cart';
+        } & CartFragmentFragment>;
+    }>;
+};

package/dist/esnext/components/CartProvider/graphql/CartAttributesUpdateMutation.js

@@ -0,0 +1 @@
+export {};

package/dist/esnext/components/CartProvider/graphql/CartBuyerIdentityUpdateMutation.d.ts

@@ -0,0 +1,18 @@
+import * as Types from '../../../graphql/types/types';
+import { CartFragmentFragment } from './CartFragment';
+export declare type CartBuyerIdentityUpdateMutationVariables = Types.Exact<{
+    cartId: Types.Scalars['ID'];
+    buyerIdentity: Types.CartBuyerIdentityInput;
+    numCartLines?: Types.Maybe<Types.Scalars['Int']>;
+}>;
+export declare type CartBuyerIdentityUpdateMutation = {
+    __typename?: 'Mutation';
+} & {
+    cartBuyerIdentityUpdate?: Types.Maybe<{
+        __typename?: 'CartBuyerIdentityUpdatePayload';
+    } & {
+        cart?: Types.Maybe<{
+            __typename?: 'Cart';
+        } & CartFragmentFragment>;
+    }>;
+};

package/dist/esnext/components/CartProvider/graphql/CartBuyerIdentityUpdateMutation.js

@@ -0,0 +1 @@
+export {};

package/dist/esnext/components/CartProvider/graphql/CartCreateMutation.d.ts

@@ -0,0 +1,17 @@
+import * as Types from '../../../graphql/types/types';
+import { CartFragmentFragment } from './CartFragment';
+export declare type CartCreateMutationVariables = Types.Exact<{
+    input: Types.CartInput;
+    numCartLines?: Types.Maybe<Types.Scalars['Int']>;
+}>;
+export declare type CartCreateMutation = {
+    __typename?: 'Mutation';
+} & {
+    cartCreate?: Types.Maybe<{
+        __typename?: 'CartCreatePayload';
+    } & {
+        cart?: Types.Maybe<{
+            __typename?: 'Cart';
+        } & CartFragmentFragment>;
+    }>;
+};

package/dist/esnext/components/CartProvider/graphql/CartCreateMutation.js

@@ -0,0 +1 @@
+export {};

package/dist/esnext/components/CartProvider/graphql/CartDiscountCodesUpdateMutation.d.ts

@@ -0,0 +1,18 @@
+import * as Types from '../../../graphql/types/types';
+import { CartFragmentFragment } from './CartFragment';
+export declare type CartDiscountCodesUpdateMutationVariables = Types.Exact<{
+    cartId: Types.Scalars['ID'];
+    discountCodes?: Types.Maybe<Array<Types.Scalars['String']> | Types.Scalars['String']>;
+    numCartLines?: Types.Maybe<Types.Scalars['Int']>;
+}>;
+export declare type CartDiscountCodesUpdateMutation = {
+    __typename?: 'Mutation';
+} & {
+    cartDiscountCodesUpdate?: Types.Maybe<{
+        __typename?: 'CartDiscountCodesUpdatePayload';
+    } & {
+        cart?: Types.Maybe<{
+            __typename?: 'Cart';
+        } & CartFragmentFragment>;
+    }>;
+};

package/dist/esnext/components/CartProvider/graphql/CartDiscountCodesUpdateMutation.js

@@ -0,0 +1 @@
+export {};

package/dist/esnext/components/CartProvider/graphql/CartFragment.d.ts

@@ -0,0 +1,68 @@
+import * as Types from '../../../graphql/types/types';
+export declare type CartFragmentFragment = {
+    __typename?: 'Cart';
+} & Pick<Types.Cart, 'id' | 'checkoutUrl' | 'note'> & {
+    buyerIdentity: {
+        __typename?: 'CartBuyerIdentity';
+    } & Pick<Types.CartBuyerIdentity, 'countryCode' | 'email' | 'phone'> & {
+        customer?: Types.Maybe<{
+            __typename?: 'Customer';
+        } & Pick<Types.Customer, 'id' | 'email' | 'firstName' | 'lastName' | 'displayName'>>;
+    };
+    lines: {
+        __typename?: 'CartLineConnection';
+    } & {
+        edges: Array<{
+            __typename?: 'CartLineEdge';
+        } & {
+            node: {
+                __typename?: 'CartLine';
+            } & Pick<Types.CartLine, 'id' | 'quantity'> & {
+                attributes: Array<{
+                    __typename?: 'Attribute';
+                } & Pick<Types.Attribute, 'key' | 'value'>>;
+                merchandise: {
+                    __typename?: 'ProductVariant';
+                } & Pick<Types.ProductVariant, 'id' | 'availableForSale' | 'requiresShipping' | 'title'> & {
+                    compareAtPriceV2?: Types.Maybe<{
+                        __typename?: 'MoneyV2';
+                    } & Pick<Types.MoneyV2, 'amount' | 'currencyCode'>>;
+                    priceV2: {
+                        __typename?: 'MoneyV2';
+                    } & Pick<Types.MoneyV2, 'amount' | 'currencyCode'>;
+                    image?: Types.Maybe<{
+                        __typename?: 'Image';
+                    } & Pick<Types.Image, 'originalSrc' | 'altText'>>;
+                    product: {
+                        __typename?: 'Product';
+                    } & Pick<Types.Product, 'handle' | 'title'>;
+                    selectedOptions: Array<{
+                        __typename?: 'SelectedOption';
+                    } & Pick<Types.SelectedOption, 'name' | 'value'>>;
+                };
+            };
+        }>;
+    };
+    estimatedCost: {
+        __typename?: 'CartEstimatedCost';
+    } & {
+        subtotalAmount: {
+            __typename?: 'MoneyV2';
+        } & Pick<Types.MoneyV2, 'currencyCode' | 'amount'>;
+        totalAmount: {
+            __typename?: 'MoneyV2';
+        } & Pick<Types.MoneyV2, 'currencyCode' | 'amount'>;
+        totalDutyAmount?: Types.Maybe<{
+            __typename?: 'MoneyV2';
+        } & Pick<Types.MoneyV2, 'currencyCode' | 'amount'>>;
+        totalTaxAmount?: Types.Maybe<{
+            __typename?: 'MoneyV2';
+        } & Pick<Types.MoneyV2, 'currencyCode' | 'amount'>>;
+    };
+    attributes: Array<{
+        __typename?: 'Attribute';
+    } & Pick<Types.Attribute, 'key' | 'value'>>;
+    discountCodes: Array<{
+        __typename?: 'CartDiscountCode';
+    } & Pick<Types.CartDiscountCode, 'code'>>;
+};

package/dist/esnext/components/CartProvider/graphql/CartFragment.js

@@ -0,0 +1 @@
+export {};

package/dist/esnext/components/CartProvider/graphql/CartLineAddMutation.d.ts

@@ -0,0 +1,18 @@
+import * as Types from '../../../graphql/types/types';
+import { CartFragmentFragment } from './CartFragment';
+export declare type CartLineAddMutationVariables = Types.Exact<{
+    cartId: Types.Scalars['ID'];
+    lines: Array<Types.CartLineInput> | Types.CartLineInput;
+    numCartLines?: Types.Maybe<Types.Scalars['Int']>;
+}>;
+export declare type CartLineAddMutation = {
+    __typename?: 'Mutation';
+} & {
+    cartLinesAdd?: Types.Maybe<{
+        __typename?: 'CartLinesAddPayload';
+    } & {
+        cart?: Types.Maybe<{
+            __typename?: 'Cart';
+        } & CartFragmentFragment>;
+    }>;
+};

package/dist/esnext/components/CartProvider/graphql/CartLineAddMutation.js

@@ -0,0 +1 @@
+export {};

package/dist/esnext/components/CartProvider/graphql/CartLineRemoveMutation.d.ts

@@ -0,0 +1,18 @@
+import * as Types from '../../../graphql/types/types';
+import { CartFragmentFragment } from './CartFragment';
+export declare type CartLineRemoveMutationVariables = Types.Exact<{
+    cartId: Types.Scalars['ID'];
+    lines: Array<Types.Scalars['ID']> | Types.Scalars['ID'];
+    numCartLines?: Types.Maybe<Types.Scalars['Int']>;
+}>;
+export declare type CartLineRemoveMutation = {
+    __typename?: 'Mutation';
+} & {
+    cartLinesRemove?: Types.Maybe<{
+        __typename?: 'CartLinesRemovePayload';
+    } & {
+        cart?: Types.Maybe<{
+            __typename?: 'Cart';
+        } & CartFragmentFragment>;
+    }>;
+};