PWA-2096: Track Checkout

packages/peregrine/lib/talons/CheckoutPage/PaymentInformation/__tests__/__snapshots__/useEditModal.spec.js.snap

@@ -1,5 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Should dispatch event when handlePaymentSuccess is called 1`] = `
+Object {
+  "payload": Object {
+    "cart_id": "123",
+    "selected_payment_method": "braintree",
+  },
+  "type": "CHECKOUT_BILLING_INFORMATION_UPDATED",
+}
+`;
+
 exports[`Should return correct shape 1`] = `
 Object {
   "handleClose": [Function],

packages/peregrine/lib/talons/CheckoutPage/PaymentInformation/__tests__/__snapshots__/usePaymentInformation.spec.js.snap

@@ -11,3 +11,13 @@ Object {
   "showEditModal": [Function],
 }
 `;
+
+exports[`should dispatch add payment information event 1`] = `
+Object {
+  "payload": Object {
+    "cart_id": "123",
+    "selected_payment_method": null,
+  },
+  "type": "CHECKOUT_BILLING_INFORMATION_ADDED",
+}
+`;

packages/peregrine/lib/talons/CheckoutPage/PaymentInformation/__tests__/useEditModal.spec.js

@@ -1,6 +1,8 @@
 import React from 'react';
 
 import createTestInstance from '../../../../util/createTestInstance';
+import { useEventingContext } from '@magento/peregrine/lib/context/eventing';
+
 import { useEditModal } from '../useEditModal';
 
 import { useQuery } from '@apollo/client';
@@ -25,6 +27,10 @@ jest.mock('../editModal.gql.js', () => ({
     getSelectedPaymentMethodQuery: 'getSelectedPaymentMethodQuery'
 }));
 
+jest.mock('@magento/peregrine/lib/context/eventing', () => ({
+    useEventingContext: jest.fn().mockReturnValue([{}, { dispatch: jest.fn() }])
+}));
+
 const Component = props => {
     const talonProps = useEditModal(props);
 
@@ -145,3 +151,19 @@ test('Should return null selectedPaymentMethod when fetched data does not return
 
     expect(talonProps.selectedPaymentMethod).toBeFalsy();
 });
+
+test('Should dispatch event when handlePaymentSuccess is called', async () => {
+    const mockDispatchEvent = jest.fn();
+
+    useEventingContext.mockReturnValue([{}, { dispatch: mockDispatchEvent }]);
+
+    const { talonProps } = getTalonProps({
+        onClose: () => {}
+    });
+    const { handlePaymentSuccess } = talonProps;
+
+    handlePaymentSuccess();
+
+    expect(mockDispatchEvent).toBeCalledTimes(1);
+    expect(mockDispatchEvent.mock.calls[0][0]).toMatchSnapshot();
+});

packages/peregrine/lib/talons/CheckoutPage/PaymentInformation/__tests__/usePaymentInformation.spec.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useQuery, useMutation, useApolloClient } from '@apollo/client';
 
+import { useEventingContext } from '@magento/peregrine/lib/context/eventing';
 import { usePaymentInformation } from '../usePaymentInformation';
 import createTestInstance from '../../../../util/createTestInstance';
 import { CHECKOUT_STEP } from '../../useCheckoutPage';
@@ -69,6 +70,10 @@ jest.mock('../../CheckoutError', () => {
     return CheckoutError;
 });
 
+jest.mock('@magento/peregrine/lib/context/eventing', () => ({
+    useEventingContext: jest.fn().mockReturnValue([{}, { dispatch: jest.fn() }])
+}));
+
 const onSave = jest.fn();
 const resetShouldSubmit = jest.fn();
 const setCheckoutStep = jest.fn();
@@ -331,3 +336,18 @@ test('should handle no payment information data returned', () => {
     expect(setCheckoutStep).toHaveBeenCalledWith(CHECKOUT_STEP.PAYMENT);
     expect(talonProps.doneEditing).toBeFalsy();
 });
+
+test('should dispatch add payment information event', async () => {
+    const mockDispatchEvent = jest.fn();
+
+    useEventingContext.mockReturnValue([{}, { dispatch: mockDispatchEvent }]);
+
+    const { talonProps, update } = getTalonProps({ ...defaultTalonProps });
+
+    talonProps.handlePaymentSuccess();
+
+    update({});
+
+    expect(mockDispatchEvent).toHaveBeenCalledTimes(1);
+    expect(mockDispatchEvent.mock.calls[0][0]).toMatchSnapshot();
+});

packages/peregrine/lib/talons/CheckoutPage/PaymentInformation/useEditModal.js

@@ -2,6 +2,7 @@ import { useState, useCallback } from 'react';
 import { useQuery } from '@apollo/client';
 import DEFAULT_OPERATIONS from './editModal.gql';
 import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import { useEventingContext } from '../../../context/eventing';
 
 import { useCartContext } from '../../../context/cart';
 
@@ -35,6 +36,7 @@ export const useEditModal = props => {
     const [isLoading, setIsLoading] = useState(true);
     const [updateButtonClicked, setUpdateButtonClicked] = useState(false);
     const [{ cartId }] = useCartContext();
+    const [, { dispatch }] = useEventingContext();
 
     /**
      * Queries
@@ -67,7 +69,14 @@ export const useEditModal = props => {
 
     const handlePaymentSuccess = useCallback(() => {
         onClose();
-    }, [onClose]);
+        dispatch({
+            type: 'CHECKOUT_BILLING_INFORMATION_UPDATED',
+            payload: {
+                cart_id: cartId,
+                selected_payment_method: selectedPaymentMethod
+            }
+        });
+    }, [onClose, dispatch, cartId, selectedPaymentMethod]);
 
     const handlePaymentError = useCallback(() => {
         setUpdateButtonClicked(false);

packages/peregrine/lib/talons/CheckoutPage/PaymentInformation/usePaymentInformation.js

@@ -5,6 +5,7 @@ import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
 
 import { useCartContext } from '../../../context/cart';
 import CheckoutError from '../CheckoutError';
+import { useEventingContext } from '../../../context/eventing';
 import { CHECKOUT_STEP } from '../useCheckoutPage';
 
 /**
@@ -44,6 +45,7 @@ export const usePaymentInformation = props => {
     const [isEditModalActive, setIsEditModalActive] = useState(false);
     const [{ cartId }] = useCartContext();
     const client = useApolloClient();
+    const [, { dispatch }] = useEventingContext();
 
     /**
      * Helper Functions
@@ -244,6 +246,18 @@ export const usePaymentInformation = props => {
         }
     }, [checkoutError, handleExpiredPaymentError]);
 
+    useEffect(() => {
+        if (doneEditing) {
+            dispatch({
+                type: 'CHECKOUT_BILLING_INFORMATION_ADDED',
+                payload: {
+                    cart_id: cartId,
+                    selected_payment_method: selectedPaymentMethod
+                }
+            });
+        }
+    }, [cartId, selectedPaymentMethod, doneEditing, dispatch]);
+
     return {
         doneEditing,
         handlePaymentError,

packages/peregrine/lib/talons/CheckoutPage/ShippingInformation/AddressForm/__tests__/__snapshots__/useCustomerForm.spec.js.snap

@@ -165,3 +165,16 @@ Object {
 exports[`returns Apollo errors for create customer address 1`] = `undefined`;
 
 exports[`returns Apollo errors for update customer address 1`] = `undefined`;
+
+exports[`should dispatch add address event when new address 1`] = `
+Array [
+  Array [
+    Object {
+      "payload": Object {
+        "cart_id": undefined,
+      },
+      "type": "CHECKOUT_SHIPPING_INFORMATION_ADDED",
+    },
+  ],
+]
+`;

packages/peregrine/lib/talons/CheckoutPage/ShippingInformation/AddressForm/__tests__/__snapshots__/useGuestForm.spec.js.snap

@@ -79,3 +79,16 @@ Object {
   "showSignInToast": false,
 }
 `;
+
+exports[`should dispatch add address event when new address 1`] = `
+Array [
+  Array [
+    Object {
+      "payload": Object {
+        "cart_id": "cart123",
+      },
+      "type": "CHECKOUT_SHIPPING_INFORMATION_ADDED",
+    },
+  ],
+]
+`;

packages/peregrine/lib/talons/CheckoutPage/ShippingInformation/AddressForm/__tests__/useCustomerForm.spec.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { useMutation, useQuery } from '@apollo/client';
 
 import createTestInstance from '../../../../../util/createTestInstance';
+import { useEventingContext } from '@magento/peregrine/lib/context/eventing';
 import { useCustomerForm } from '../useCustomerForm';
 
 const mockCreateCustomerAddress = jest.fn();
@@ -39,6 +40,10 @@ jest.mock('../customerForm.gql', () => ({
     getDefaultShippingQuery: 'getCustomerAddressesQuery'
 }));
 
+jest.mock('@magento/peregrine/lib/context/eventing', () => ({
+    useEventingContext: jest.fn().mockReturnValue([{}, { dispatch: jest.fn() }])
+}));
+
 const Component = props => {
     const talonProps = useCustomerForm(props);
     return <i talonProps={talonProps} />;
@@ -306,3 +311,25 @@ describe('returns Apollo errors', () => {
         expect(talonProps.formErrors).toMatchSnapshot();
     });
 });
+
+test('should dispatch add address event when new address', async () => {
+    const mockDispatchEvent = jest.fn();
+    useEventingContext.mockReturnValue([{}, { dispatch: mockDispatchEvent }]);
+
+    const tree = createTestInstance(<Component {...mockProps} />);
+    const { root } = tree;
+    const { talonProps } = root.findByType('i').props;
+
+    await talonProps.handleSubmit({
+        country: 'US',
+        email: 'fry@planet.express',
+        firstname: 'Philip',
+        region: {
+            region_id: 2
+        },
+        street: ['Street 1']
+    });
+
+    expect(mockDispatchEvent).toHaveBeenCalledTimes(1);
+    expect(mockDispatchEvent.mock.calls).toMatchSnapshot();
+});

packages/peregrine/lib/talons/CheckoutPage/ShippingInformation/AddressForm/__tests__/useGuestForm.spec.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { act } from 'react-test-renderer';
 import { useLazyQuery, useMutation } from '@apollo/client';
-
 import createTestInstance from '../../../../../util/createTestInstance';
+import { useEventingContext } from '@magento/peregrine/lib/context/eventing';
 import { useGuestForm } from '../useGuestForm';
 
 jest.mock('@apollo/client', () => ({
@@ -31,6 +31,10 @@ jest.mock('../guestForm.gql', () => ({
     setGuestShippingMutation: 'setGuestShippingMutation'
 }));
 
+jest.mock('@magento/peregrine/lib/context/eventing', () => ({
+    useEventingContext: jest.fn().mockReturnValue([{}, { dispatch: jest.fn() }])
+}));
+
 const Component = props => {
     const talonProps = useGuestForm(props);
     return <i talonProps={talonProps} />;
@@ -295,3 +299,35 @@ test('handleToastAction fires up defined toast callback action', () => {
     expect(toggleSignInContent).toHaveBeenCalled();
     expect(removeToast).toHaveBeenCalled();
 });
+
+test('should dispatch add address event when new address', async () => {
+    const setShippingInformation = jest.fn();
+    const mockDispatchEvent = jest.fn();
+
+    useEventingContext.mockReturnValue([{}, { dispatch: mockDispatchEvent }]);
+
+    useMutation.mockReturnValueOnce([
+        setShippingInformation,
+        { called: true, loading: true }
+    ]);
+
+    const emptyData = {
+        city: null,
+        country: {
+            code: null
+        }
+    };
+    const tree = createTestInstance(
+        <Component
+            afterSubmit={jest.fn()}
+            mutations={{}}
+            shippingData={emptyData}
+        />
+    );
+    const { root } = tree;
+    const { talonProps } = root.findByType('i').props;
+    await talonProps.handleSubmit({ ...shippingData, country: 'US' });
+
+    expect(mockDispatchEvent).toHaveBeenCalledTimes(1);
+    expect(mockDispatchEvent.mock.calls).toMatchSnapshot();
+});

packages/peregrine/lib/talons/CheckoutPage/ShippingInformation/AddressForm/useCustomerForm.js

@@ -2,6 +2,7 @@ import { useCallback, useMemo } from 'react';
 import { useMutation, useQuery } from '@apollo/client';
 import DEFAULT_OPERATIONS from './customerForm.gql';
 import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import { useEventingContext } from '../../../../context/eventing';
 
 export const useCustomerForm = props => {
     const { afterSubmit, onCancel, onSuccess, shippingData } = props;
@@ -71,6 +72,16 @@ export const useCustomerForm = props => {
         };
     }
 
+    const [, { dispatch }] = useEventingContext();
+    const dispatchEvent = useCallback(() => {
+        dispatch({
+            type: 'CHECKOUT_SHIPPING_INFORMATION_ADDED',
+            payload: {
+                cart_id: customerData.cart_id
+            }
+        });
+    }, [customerData.cart_id, dispatch]);
+
     const handleSubmit = useCallback(
         async formValues => {
             // eslint-disable-next-line no-unused-vars
@@ -102,6 +113,7 @@ export const useCustomerForm = props => {
                             { query: getDefaultShippingQuery }
                         ]
                     });
+                    dispatchEvent();
                 }
             } catch {
                 return;
@@ -118,7 +130,8 @@ export const useCustomerForm = props => {
             getDefaultShippingQuery,
             isUpdate,
             shippingData,
-            updateCustomerAddress
+            updateCustomerAddress,
+            dispatchEvent
         ]
     );
 

packages/peregrine/lib/talons/CheckoutPage/ShippingInformation/AddressForm/useGuestForm.js

@@ -4,6 +4,7 @@ import DEFAULT_OPERATIONS from './guestForm.gql';
 import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
 
 import { useCartContext } from '../../../../context/cart';
+import { useEventingContext } from '../../../../context/eventing';
 
 export const useGuestForm = props => {
     const {
@@ -45,6 +46,18 @@ export const useGuestForm = props => {
     // Simple heuristic to indicate form was submitted prior to this render
     const isUpdate = !!shippingData.city;
 
+    const [, { dispatch }] = useEventingContext();
+    const dispatchEvent = useCallback(() => {
+        if (!isUpdate) {
+            dispatch({
+                type: 'CHECKOUT_SHIPPING_INFORMATION_ADDED',
+                payload: {
+                    cart_id: cartId
+                }
+            });
+        }
+    }, [isUpdate, cartId, dispatch]);
+
     const handleSubmit = useCallback(
         async formValues => {
             const { country, email, region, ...address } = formValues;
@@ -63,6 +76,7 @@ export const useGuestForm = props => {
                         }
                     }
                 });
+                dispatchEvent();
             } catch {
                 return;
             }
@@ -71,7 +85,7 @@ export const useGuestForm = props => {
                 afterSubmit();
             }
         },
-        [afterSubmit, cartId, setGuestShipping]
+        [afterSubmit, cartId, setGuestShipping, dispatchEvent]
     );
 
     const handleCancel = useCallback(() => {