@jetshop/core 6.3.8-alpha.32 → 6.3.8

package/boot/server/persistedQueries/__tests__/getPersistedQueriesForRequest.test.js

@@ -0,0 +1,201 @@
+import { getPersistedQueriesForRequest } from '../getPersistedQueriesForRequest';
+import aQuery from './mockQuery.gql';
+import nock from 'nock';
+import { ApolloError } from '@apollo/client';
+import { ChannelHandler } from '../../../../ChannelHandler/ChannelHandler';
+
+beforeAll(() => {
+  jest.useFakeTimers();
+  nock.disableNetConnect();
+});
+afterAll(() => {
+  jest.useRealTimers();
+  nock.enableNetConnect();
+});
+afterEach(() => {
+  jest.restoreAllMocks();
+  jest.clearAllTimers();
+  nock.enableNetConnect();
+});
+
+const apolloConfig = {
+  shopid: '...',
+  graphQLURI: 'http://localhost/graphql',
+  token: '...',
+  enableGateway: false,
+  persistedQueries: [{ query: aQuery }]
+};
+
+const defaultChannel = {
+  id: 1,
+  language: { name: 'English' },
+  currency: { name: 'Dollarydoos' },
+  country: {
+    id: 1234,
+    code: 'UK'
+  }
+};
+
+function mockResponse(resp, { statusCode = 200, errors } = {}) {
+  const data = {
+    errors,
+    data: resp && {
+      [resp.name]: resp.values.map((val) =>
+        Object.assign({ __typename: resp.name }, val)
+      )
+    }
+  };
+
+  const res = jest.fn(() => data);
+  nock('http://localhost').post('/graphql').reply(statusCode, res);
+  return res;
+}
+
+describe('getPersistedQueriesForRequest', () => {
+  let opts;
+
+  beforeEach(() => {
+    const channelHandler = new ChannelHandler({
+      selectedChannel: defaultChannel
+    });
+
+    opts = {
+      apolloConfig,
+      channelHandler,
+      authHandler: {
+        getAuthHeaders: () => {},
+        loadAuthToken: () => {},
+        authToken: ''
+      },
+      previewHandler: {
+        getPreviewHeaders: () => {},
+        preview: false
+      }
+    };
+  });
+  afterEach(() => {
+    opts = {};
+  });
+
+  test('creates an object keyed by the channel', async () => {
+    const clients = {};
+
+    mockResponse({
+      name: 'dogs',
+      values: [{ id: 1, name: 'Roger' }]
+    });
+
+    const newChannel = {
+      id: 2,
+      language: { name: 'Deutsch' },
+      currency: { name: 'Deutschmarks' },
+      country: {
+        id: 1923,
+        code: 'DE'
+      }
+    };
+
+    // First request comes in at channel 2…
+    opts.channelHandler.setSelectedChannel(newChannel);
+    getPersistedQueriesForRequest(clients, {
+      ...opts
+    });
+
+    // It's added to the clients object
+    expect(Object.keys(clients).length).toBe(1);
+    expect(Object.keys(clients)).toEqual(
+      expect.arrayContaining(['2_Deutsch_Deutschmarks'])
+    );
+
+    mockResponse({
+      name: 'dogs',
+      values: [{ id: 1, name: 'Roger' }]
+    });
+
+    // Another request comes in on channel 1…
+    opts.channelHandler.setSelectedChannel(defaultChannel);
+    getPersistedQueriesForRequest(clients, opts);
+
+    // Now both are kept in memory
+    expect(Object.keys(clients).length).toBe(2);
+    expect(Object.keys(clients)).toEqual(
+      expect.arrayContaining([
+        '2_Deutsch_Deutschmarks',
+        '1_English_Dollarydoos'
+      ])
+    );
+  });
+  test('requests on the same channel do not create new cache entries', async () => {
+    const clients = {};
+
+    mockResponse({
+      name: 'dogs',
+      values: [{ id: 1, name: 'Roger' }]
+    });
+
+    // A request comes in on channel 1…
+    getPersistedQueriesForRequest(clients, opts);
+
+    // And then another!
+    getPersistedQueriesForRequest(clients, opts);
+
+    // Only one entry in the cache tho
+    const keys = Object.keys(clients);
+    expect(keys.length).toBe(1);
+    expect(keys).toEqual(expect.arrayContaining(['1_English_Dollarydoos']));
+  });
+  test('propagates errors', async () => {
+    const clients = {};
+
+    mockResponse(null, {
+      errors: [
+        {
+          message: 'Something went wrong',
+          extensions: { code: 'an error occurred' }
+        }
+      ]
+    });
+
+    // A request comes in on channel 1…
+
+    try {
+      await getPersistedQueriesForRequest(clients, opts).extractCache();
+    } catch (err) {
+      expect(err).toBeInstanceOf(ApolloError);
+      expect(err.message).toBe(`GraphQL error: Something went wrong`);
+    }
+    expect.assertions(2);
+  });
+  it('response updates cache', async () => {
+    const clients = {};
+    mockResponse({
+      name: 'dogs',
+      values: [{ id: 1, name: 'Roger' }]
+    });
+
+    // A request comes in on channel 1…
+    getPersistedQueriesForRequest(clients, opts);
+
+    const firstCache = await clients['1_English_Dollarydoos'].extractCache();
+
+    expect(firstCache['dogs:1']).toEqual(
+      expect.objectContaining({ name: 'Roger' })
+    );
+
+    const mock = mockResponse({
+      name: 'dogs',
+      values: [{ id: 1, name: 'Updated name' }]
+    });
+
+    // The timer ticks over, firing off another request which should have the
+    // updated return value
+    jest.advanceTimersByTime(30000);
+    expect(mock).toHaveBeenCalled();
+
+    const updatedCache = await clients['1_English_Dollarydoos'].extractCache();
+
+    expect(updatedCache['dogs:1']).toEqual(
+      expect.objectContaining({ name: 'Updated name' })
+    );
+  });
+});

package/boot/server/persistedQueries/__tests__/mockQuery.gql

@@ -0,0 +1,6 @@
+query Doggos {
+  dogs {
+    id
+    name
+  }
+}

package/boot/server/persistedQueries/getPersistedQueriesForRequest.d.ts

@@ -0,0 +1,3 @@
+import { CreateClientOpts } from '../../apollo';
+import { PersistedClient } from './PersistedClient';
+export declare function getPersistedQueriesForRequest(persistedQueryClients: any, opts: CreateClientOpts): PersistedClient;

package/boot/server/persistedQueries/getPersistedQueriesForRequest.js

@@ -0,0 +1,27 @@
+import { PersistedClient } from './PersistedClient';
+export function getPersistedQueriesForRequest(persistedQueryClients, opts) {
+    const { apolloConfig, authHandler, previewHandler, channelHandler } = opts;
+    const queriesToPersist = apolloConfig.persistedQueries || [];
+    // When auth is enabled or we are in a preview route, we don't want to cache
+    if (!!(authHandler === null || authHandler === void 0 ? void 0 : authHandler.authToken) || (previewHandler === null || previewHandler === void 0 ? void 0 : previewHandler.preview))
+        return null;
+    // If there are no persisted queries in the config, we have nothing to cache
+    if (queriesToPersist.length === 0)
+        return null;
+    let client;
+    const channel = channelHandler.getSelectedChannel();
+    if (channel.requiresAuth)
+        return null;
+    // Create a key unique to this selected channel, lang, currency
+    const key = `${channel.id}_${channel.language.name}_${channel.currency.name}`;
+    const headers = channelHandler.getChannelHeaders();
+    if (key in persistedQueryClients) {
+        client = persistedQueryClients[key];
+    }
+    else {
+        const newClient = new PersistedClient(Object.assign(Object.assign({}, opts), { headers }));
+        client = persistedQueryClients[key] = newClient;
+    }
+    return client;
+}
+//# sourceMappingURL=getPersistedQueriesForRequest.js.map

package/boot/server/persistedQueries/getPersistedQueriesForRequest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getPersistedQueriesForRequest.js","sourceRoot":"","sources":["getPersistedQueriesForRequest.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,MAAM,UAAU,6BAA6B,CAC3C,qBAA0B,EAC1B,IAAsB;IAEtB,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,cAAc,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;IAE3E,MAAM,gBAAgB,GAAG,YAAY,CAAC,gBAAgB,IAAI,EAAE,CAAC;IAE7D,4EAA4E;IAC5E,IAAI,CAAC,CAAC,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,SAAS,CAAA,KAAI,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,OAAO,CAAA;QAAE,OAAO,IAAI,CAAC;IAErE,4EAA4E;IAC5E,IAAI,gBAAgB,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IAE/C,IAAI,MAAuB,CAAC;IAE5B,MAAM,OAAO,GAAG,cAAc,CAAC,kBAAkB,EAAE,CAAC;IAEpD,IAAI,OAAO,CAAC,YAAY;QAAE,OAAO,IAAI,CAAC;IAEtC,+DAA+D;IAC/D,MAAM,GAAG,GAAG,GAAG,OAAO,CAAC,EAAE,IAAI,OAAO,CAAC,QAAQ,CAAC,IAAI,IAAI,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;IAE9E,MAAM,OAAO,GAAG,cAAc,CAAC,iBAAiB,EAAE,CAAC;IAEnD,IAAI,GAAG,IAAI,qBAAqB,EAAE;QAChC,MAAM,GAAG,qBAAqB,CAAC,GAAG,CAAC,CAAC;KACrC;SAAM;QACL,MAAM,SAAS,GAAG,IAAI,eAAe,iCAAM,IAAI,KAAE,OAAO,IAAG,CAAC;QAE5D,MAAM,GAAG,qBAAqB,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC;KACjD;IAED,OAAO,MAAM,CAAC;AAChB,CAAC"}

package/boot/server/saleSource.test.js

@@ -0,0 +1,39 @@
+import { salesSourceMiddleware } from './salesSource';
+import { Cookies } from 'react-cookie';
+
+describe('Sales source test', () => {
+  it('Will set the sales source cookie', () => {
+    const cookies = new Cookies();
+    salesSourceMiddleware({
+      queryObject: {
+        SalesSource: 'test'
+      },
+      cookies
+    });
+    expect(cookies.get('SalesSource')).toBe('test');
+  });
+
+  it('Will remove the sales source cookie', () => {
+    const cookies = new Cookies();
+    cookies.set('SalesSource', 'test');
+    expect(cookies.get('SalesSource')).toBe('test');
+    salesSourceMiddleware({
+      queryObject: {
+        SalesSource: 'remove'
+      },
+      cookies
+    });
+    expect(cookies.get('SalesSource')).toBeFalsy();
+  });
+
+  it('Will set the cookie regardless of case', () => {
+    const cookies = new Cookies();
+    salesSourceMiddleware({
+      queryObject: {
+        salEsSoUrCe: 'test'
+      },
+      cookies
+    });
+    expect(cookies.get('SalesSource')).toBe('test');
+  });
+});

package/boot/server/salesSource.d.ts

@@ -0,0 +1,8 @@
+import { Cookies } from 'react-cookie';
+declare function salesSourceMiddleware({ queryObject, cookies }: {
+    queryObject: {
+        [key: string]: string;
+    };
+    cookies: Cookies;
+}): void;
+export { salesSourceMiddleware };

package/boot/server/salesSource.js

@@ -0,0 +1,16 @@
+function salesSourceMiddleware({ queryObject, cookies }) {
+    const caseInsensitiveSalesSourceKey = Object.keys(queryObject).find(key => key.toLowerCase() === 'salessource');
+    const salesSourceParam = queryObject[caseInsensitiveSalesSourceKey];
+    if (salesSourceParam === 'remove') {
+        cookies.remove('SalesSource');
+    }
+    else {
+        const expires = new Date();
+        expires.setFullYear(new Date().getFullYear() + 10);
+        cookies.set('SalesSource', salesSourceParam, {
+            expires
+        });
+    }
+}
+export { salesSourceMiddleware };
+//# sourceMappingURL=salesSource.js.map

package/boot/server/salesSource.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"salesSource.js","sourceRoot":"","sources":["salesSource.ts"],"names":[],"mappings":"AAEA,SAAS,qBAAqB,CAAC,EAC7B,WAAW,EACX,OAAO,EAMR;IACC,MAAM,6BAA6B,GAAG,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,IAAI,CACjE,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,WAAW,EAAE,KAAK,aAAa,CAC3C,CAAC;IACF,MAAM,gBAAgB,GAAG,WAAW,CAAC,6BAA6B,CAAC,CAAC;IACpE,IAAI,gBAAgB,KAAK,QAAQ,EAAE;QACjC,OAAO,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;KAC/B;SAAM;QACL,MAAM,OAAO,GAAG,IAAI,IAAI,EAAE,CAAC;QAC3B,OAAO,CAAC,WAAW,CAAC,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,GAAG,EAAE,CAAC,CAAC;QACnD,OAAO,CAAC,GAAG,CAAC,aAAa,EAAE,gBAAgB,EAAE;YAC3C,OAAO;SACR,CAAC,CAAC;KACJ;AACH,CAAC;AAED,OAAO,EAAE,qBAAqB,EAAE,CAAC"}

package/boot/utils/createIntOptions.d.ts

@@ -0,0 +1,6 @@
+import { SelectedChannel } from '../../components/ChannelContext/ChannelContext';
+declare const createIntlOptions: ({ selectedChannel, options }: {
+    selectedChannel: SelectedChannel;
+    options: any;
+}) => any;
+export default createIntlOptions;

package/boot/utils/createIntOptions.js

@@ -0,0 +1,19 @@
+// Todo: removing "any" type casting
+const createIntlOptions = ({ selectedChannel, options }) => {
+    const numberFormats = {};
+    selectedChannel.currencies &&
+        selectedChannel.currencies.forEach(currency => {
+            if (!currency || !currency.format || !currency.id)
+                return null;
+            numberFormats[currency.id] = {
+                style: 'currency',
+                currency: currency.format.code,
+                minimumFractionDigits: currency.format.decimals
+            };
+        });
+    return Object.assign({ formats: {
+            number: numberFormats
+        } }, options);
+};
+export default createIntlOptions;
+//# sourceMappingURL=createIntOptions.js.map

package/boot/utils/createIntOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createIntOptions.js","sourceRoot":"","sources":["createIntOptions.ts"],"names":[],"mappings":"AAEA,oCAAoC;AACpC,MAAM,iBAAiB,GAAG,CAAC,EACzB,eAAe,EACf,OAAO,EAIR,EAAE,EAAE;IACH,MAAM,aAAa,GAA2B,EAAE,CAAC;IACjD,eAAe,CAAC,UAAU;QACxB,eAAe,CAAC,UAAU,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;YAC5C,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ,CAAC,MAAM,IAAI,CAAC,QAAQ,CAAC,EAAE;gBAAE,OAAO,IAAI,CAAC;YAE/D,aAAa,CAAC,QAAQ,CAAC,EAAE,CAAC,GAAG;gBAC3B,KAAK,EAAE,UAAU;gBACjB,QAAQ,EAAE,QAAQ,CAAC,MAAM,CAAC,IAAI;gBAC9B,qBAAqB,EAAE,QAAQ,CAAC,MAAM,CAAC,QAAQ;aAChD,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,uBACE,OAAO,EAAE;YACP,MAAM,EAAE,aAAa;SACtB,IACE,OAAO,EACV;AACJ,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/boot/utils/queryLoggingMiddleware.d.ts

@@ -0,0 +1,2 @@
+import { ApolloLink } from '@apollo/client';
+export declare const logOperationTime: ApolloLink;

package/boot/utils/queryLoggingMiddleware.js

@@ -0,0 +1,15 @@
+import { ApolloLink } from '@apollo/client';
+const timeStartLink = new ApolloLink((operation, forward) => {
+    operation.setContext({ start: Date.now() });
+    return forward(operation);
+});
+const logTimeLink = new ApolloLink((operation, forward) => {
+    return forward(operation).map((data) => {
+        // data from a previous link
+        const time = Date.now() - operation.getContext().start;
+        console.log(new Date(), `operation ${operation.operationName} took ${time} to complete`);
+        return data;
+    });
+});
+export const logOperationTime = timeStartLink.concat(logTimeLink);
+//# sourceMappingURL=queryLoggingMiddleware.js.map

package/boot/utils/queryLoggingMiddleware.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"queryLoggingMiddleware.js","sourceRoot":"","sources":["queryLoggingMiddleware.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,MAAM,aAAa,GAAG,IAAI,UAAU,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,EAAE;IAC1D,SAAS,CAAC,UAAU,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;IAC5C,OAAO,OAAO,CAAC,SAAS,CAAC,CAAC;AAC5B,CAAC,CAAC,CAAC;AAEH,MAAM,WAAW,GAAG,IAAI,UAAU,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,EAAE;IACxD,OAAO,OAAO,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;QACrC,4BAA4B;QAC5B,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,SAAS,CAAC,UAAU,EAAE,CAAC,KAAK,CAAC;QACvD,OAAO,CAAC,GAAG,CACT,IAAI,IAAI,EAAE,EACV,aAAa,SAAS,CAAC,aAAa,SAAS,IAAI,cAAc,CAChE,CAAC;QACF,OAAO,IAAI,CAAC;IACd,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC"}

package/boot/utils/uid.d.ts

@@ -0,0 +1,3 @@
+import { Cookies } from 'react-cookie';
+export declare function generateUID(): string;
+export declare function setUID(cookies: Cookies): any;

package/boot/utils/uid.js

@@ -0,0 +1,20 @@
+// Generates a random UID
+export function generateUID() {
+    // Math.random should be unique because of its seeding algorithm. Convert it
+    // to base 36 (numbers + letters), and grab the first 9 characters after the
+    // decimal.
+    return Math.random()
+        .toString(36)
+        .substr(2, 9);
+}
+// Takes Cookies (from react-cookie) as an arg. Checks for an existing UID, and
+// either returns it or creates one & sets it in a cookie if it doesn't exist
+export function setUID(cookies) {
+    let uid = cookies.get('RWuid');
+    if (!uid) {
+        uid = generateUID();
+        cookies.set('RWuid', uid);
+    }
+    return uid;
+}
+//# sourceMappingURL=uid.js.map

package/boot/utils/uid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"uid.js","sourceRoot":"","sources":["uid.ts"],"names":[],"mappings":"AAEA,yBAAyB;AACzB,MAAM,UAAU,WAAW;IACzB,4EAA4E;IAC5E,4EAA4E;IAC5E,WAAW;IACX,OAAO,IAAI,CAAC,MAAM,EAAE;SACjB,QAAQ,CAAC,EAAE,CAAC;SACZ,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAClB,CAAC;AAED,+EAA+E;AAC/E,6EAA6E;AAC7E,MAAM,UAAU,MAAM,CAAC,OAAgB;IACrC,IAAI,GAAG,GAAG,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IAC/B,IAAI,CAAC,GAAG,EAAE;QACR,GAAG,GAAG,WAAW,EAAE,CAAC;QACpB,OAAO,CAAC,GAAG,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;KAC3B;IAED,OAAO,GAAG,CAAC;AACb,CAAC"}

package/cart/AddToCartFormik.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+import { FormikProps } from 'formik';
+import { Price, Product, ProductVariant, ProductVariantOption } from '../types';
+import { DocumentNode } from 'graphql';
+import { ApolloError } from '@apollo/client';
+type Comments = Record<string, string>;
+type Options = Record<string, string>;
+interface AddToCartFormikValues {
+    quantity: number;
+    comments: Comments;
+    options?: Options;
+    [otherValues: string]: any;
+}
+interface AddToCartCallbackOptions {
+    mutationId: string;
+    quantity: number;
+    product: Product;
+    selectedVariation: ProductVariant;
+    price: Price;
+}
+interface AddToCartFormikProps {
+    product: Product;
+    variant?: ProductVariant;
+    commentValidators?: {
+        [commentName: string]: ({ name, value }: {
+            name?: string;
+            value: string;
+        }) => string;
+    };
+    getMissingOptions?(): ProductVariantOption[] | null;
+    initialValues?: Record<string, any>;
+    cartQuery?: DocumentNode;
+    cartMutation?: DocumentNode;
+    onAddToCartInit?: (opts: AddToCartCallbackOptions) => void;
+    onAddToCartSuccess?: (opts: AddToCartCallbackOptions) => void;
+    onAddToCartError?: (opts: AddToCartCallbackOptions & {
+        error: Error | ApolloError;
+    }) => void;
+    children: (props: FormikProps<AddToCartFormikValues>) => React.ReactNode;
+}
+export declare function AddToCartFormik({ product, variant, commentValidators, getMissingOptions, initialValues, onAddToCartInit, onAddToCartError, onAddToCartSuccess, cartMutation, children }: AddToCartFormikProps): React.JSX.Element;
+export default AddToCartFormik;

package/cart/AddToCartFormik.js

@@ -0,0 +1,79 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import React from 'react';
+import { useAddToCart } from './useAddToCart';
+import { FormikProvider } from 'formik';
+import { useMutation } from '@apollo/client';
+import { addToCartError, addToCartSuccess, useTrackProductAdd } from '../components/Mutation/AddToCart/addToCartUtils';
+import uniqueId from '@jetshop/core/helpers/uniqueId';
+import { useCartId } from '../components/Cart/CartIdContext';
+export function AddToCartFormik({ product, variant, commentValidators = {}, getMissingOptions, initialValues, 
+// Apollo specific props
+onAddToCartInit, onAddToCartError, onAddToCartSuccess, cartMutation, 
+// Backwards compatability with render props
+children }) {
+    const [addToCartMutation] = useMutation(cartMutation, {
+        onCompleted: () => localStorage.setItem('cartChange', '1')
+    });
+    const { cartId, setCartId } = useCartId();
+    const trackAddProductVariant = useTrackProductAdd(variant);
+    function submit({ input, optimistic }) {
+        return __awaiter(this, void 0, void 0, function* () {
+            trackAddProductVariant(product, input.quantity);
+            const mutationId = uniqueId();
+            const callbackOptions = {
+                product: optimistic.product,
+                price: optimistic.price,
+                quantity: input.quantity,
+                selectedVariation: variant,
+                mutationId
+            };
+            if (onAddToCartInit) {
+                onAddToCartInit(callbackOptions);
+            }
+            return addToCartMutation({
+                variables: {
+                    input
+                },
+                update: (cache, { data }) => {
+                    cache.modify({
+                        fields: {
+                            cart() {
+                                var _a;
+                                return (_a = data === null || data === void 0 ? void 0 : data.addToCart) === null || _a === void 0 ? void 0 : _a.cart;
+                            }
+                        }
+                    });
+                }
+            })
+                .then(addToCartSuccess({
+                onAddToCartSuccess,
+                callbackOptions,
+                cartId,
+                setCartId
+            }))
+                .catch(addToCartError({
+                onAddToCartError,
+                callbackOptions
+            }));
+        });
+    }
+    const { form } = useAddToCart({
+        product,
+        variant,
+        commentValidators,
+        getMissingOptions,
+        initialValues,
+        submit
+    });
+    return React.createElement(FormikProvider, { value: form }, children(form));
+}
+export default AddToCartFormik;
+//# sourceMappingURL=AddToCartFormik.js.map

package/cart/AddToCartFormik.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddToCartFormik.js","sourceRoot":"","sources":["AddToCartFormik.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAmB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAe,MAAM,QAAQ,CAAC;AAWrD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EACL,cAAc,EACd,gBAAgB,EAChB,kBAAkB,EACnB,MAAM,iDAAiD,CAAC;AACzD,OAAO,QAAQ,MAAM,gCAAgC,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AA6C7D,MAAM,UAAU,eAAe,CAAC,EAC9B,OAAO,EACP,OAAO,EACP,iBAAiB,GAAG,EAAE,EACtB,iBAAiB,EACjB,aAAa;AACb,wBAAwB;AACxB,eAAe,EACf,gBAAgB,EAChB,kBAAkB,EAClB,YAAY;AACZ,4CAA4C;AAC5C,QAAQ,EACa;IACrB,MAAM,CAAC,iBAAiB,CAAC,GAAG,WAAW,CAGrC,YAAY,EAAE;QACd,WAAW,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,YAAY,EAAE,GAAG,CAAC;KAC3D,CAAC,CAAC;IAEH,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,CAAC;IAC1C,MAAM,sBAAsB,GAAG,kBAAkB,CAAC,OAAO,CAAC,CAAC;IAE3D,SAAe,MAAM,CAAC,EAAE,KAAK,EAAE,UAAU,EAAmB;;YAC1D,sBAAsB,CAAC,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;YAChD,MAAM,UAAU,GAAG,QAAQ,EAAE,CAAC;YAE9B,MAAM,eAAe,GAAG;gBACtB,OAAO,EAAE,UAAU,CAAC,OAAO;gBAC3B,KAAK,EAAE,UAAU,CAAC,KAAK;gBACvB,QAAQ,EAAE,KAAK,CAAC,QAAQ;gBACxB,iBAAiB,EAAE,OAAO;gBAC1B,UAAU;aACX,CAAC;YAEF,IAAI,eAAe,EAAE;gBACnB,eAAe,CAAC,eAAe,CAAC,CAAC;aAClC;YAED,OAAO,iBAAiB,CAAC;gBACvB,SAAS,EAAE;oBACT,KAAK;iBACN;gBACD,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;oBAC1B,KAAK,CAAC,MAAM,CAAC;wBACX,MAAM,EAAE;4BACN,IAAI;;gCACF,OAAO,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,SAAS,0CAAE,IAAI,CAAC;4BAC/B,CAAC;yBACF;qBACF,CAAC,CAAC;gBACL,CAAC;aACF,CAAC;iBACC,IAAI,CACH,gBAAgB,CAAC;gBACf,kBAAkB;gBAClB,eAAe;gBACf,MAAM;gBACN,SAAS;aACV,CAAC,CACH;iBACA,KAAK,CACJ,cAAc,CAAC;gBACb,gBAAgB;gBAChB,eAAe;aAChB,CAAC,CACH,CAAC;QACN,CAAC;KAAA;IAED,MAAM,EAAE,IAAI,EAAE,GAAG,YAAY,CAAC;QAC5B,OAAO;QACP,OAAO;QACP,iBAAiB;QACjB,iBAAiB;QACjB,aAAa;QACb,MAAM;KACP,CAAC,CAAC;IAEH,OAAO,oBAAC,cAAc,IAAC,KAAK,EAAE,IAAI,IAAG,QAAQ,CAAC,IAAI,CAAC,CAAkB,CAAC;AACxE,CAAC;AAED,eAAe,eAAe,CAAC"}

package/cart/useAddToCart.d.ts

@@ -0,0 +1,88 @@
+/// <reference types="react" />
+import { AddToCartInput, Price, Product, ProductVariant, ProductVariantOption } from '../types';
+type Comments = Record<string, string>;
+type Options = Record<string, string>;
+export interface AddToCartSubmit {
+    input: AddToCartInput;
+    optimistic: {
+        price?: Price;
+        previousPrice?: Price;
+        quantity: number;
+        product: Product;
+        variant?: ProductVariant;
+    };
+}
+interface AddToCartOptions {
+    product?: Product;
+    variant?: ProductVariant;
+    commentValidators?: {
+        [commentName: string]: ({ name, value }: {
+            name?: string;
+            value: string;
+        }) => string;
+    };
+    getMissingOptions?(): ProductVariantOption[] | null;
+    submit: (data: AddToCartSubmit) => Promise<any>;
+    initialValues?: Record<string, any>;
+}
+export interface AddToCartFormikValues {
+    quantity: number;
+    comments: Comments;
+    options?: Options;
+    [otherValues: string]: any;
+}
+export interface AddToCartFormikErrors {
+    quantity?: string;
+    comments?: Comments;
+    options?: Options;
+    [otherValues: string]: any;
+}
+export declare function useAddToCart({ product, variant, submit, commentValidators, getMissingOptions, initialValues }: AddToCartOptions): {
+    form: {
+        initialValues: AddToCartFormikValues;
+        initialErrors: import("formik").FormikErrors<unknown>;
+        initialTouched: import("formik").FormikTouched<unknown>;
+        initialStatus: any;
+        handleBlur: {
+            (e: import("react").FocusEvent<any, Element>): void;
+            <T = any>(fieldOrEvent: T): T extends string ? (e: any) => void : void;
+        };
+        handleChange: {
+            (e: import("react").ChangeEvent<any>): void;
+            <T_1 = string | import("react").ChangeEvent<any>>(field: T_1): T_1 extends import("react").ChangeEvent<any> ? void : (e: string | import("react").ChangeEvent<any>) => void;
+        };
+        handleReset: (e: any) => void;
+        handleSubmit: (e?: import("react").FormEvent<HTMLFormElement>) => void;
+        resetForm: (nextState?: Partial<import("formik").FormikState<AddToCartFormikValues>>) => void;
+        setErrors: (errors: import("formik").FormikErrors<AddToCartFormikValues>) => void;
+        setFormikState: (stateOrCb: import("formik").FormikState<AddToCartFormikValues> | ((state: import("formik").FormikState<AddToCartFormikValues>) => import("formik").FormikState<AddToCartFormikValues>)) => void;
+        setFieldTouched: (field: string, touched?: boolean, shouldValidate?: boolean) => Promise<void> | Promise<import("formik").FormikErrors<AddToCartFormikValues>>;
+        setFieldValue: (field: string, value: any, shouldValidate?: boolean) => Promise<void> | Promise<import("formik").FormikErrors<AddToCartFormikValues>>;
+        setFieldError: (field: string, value: string) => void;
+        setStatus: (status: any) => void;
+        setSubmitting: (isSubmitting: boolean) => void;
+        setTouched: (touched: import("formik").FormikTouched<AddToCartFormikValues>, shouldValidate?: boolean) => Promise<void> | Promise<import("formik").FormikErrors<AddToCartFormikValues>>;
+        setValues: (values: import("react").SetStateAction<AddToCartFormikValues>, shouldValidate?: boolean) => Promise<void> | Promise<import("formik").FormikErrors<AddToCartFormikValues>>;
+        submitForm: () => Promise<any>;
+        validateForm: (values?: AddToCartFormikValues) => Promise<import("formik").FormikErrors<AddToCartFormikValues>>;
+        validateField: (name: string) => Promise<void> | Promise<string>;
+        isValid: boolean;
+        dirty: boolean;
+        unregisterField: (name: string) => void;
+        registerField: (name: string, { validate }: any) => void;
+        getFieldProps: (nameOrOptions: string | import("formik").FieldConfig<any>) => import("formik").FieldInputProps<any>;
+        getFieldMeta: (name: string) => import("formik").FieldMetaProps<any>;
+        getFieldHelpers: (name: string) => import("formik").FieldHelperProps<any>;
+        validateOnBlur: boolean;
+        validateOnChange: boolean;
+        validateOnMount: boolean;
+        values: AddToCartFormikValues;
+        errors: import("formik").FormikErrors<AddToCartFormikValues>;
+        touched: import("formik").FormikTouched<AddToCartFormikValues>;
+        isSubmitting: boolean;
+        isValidating: boolean;
+        status?: any;
+        submitCount: number;
+    };
+};
+export {};