Order confirmation page multi refresh fix

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

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Should return correct shape 1`] = `
+Object {
+  "checkoutStep": null,
+  "error": null,
+  "handlePlaceOrder": [Function],
+  "handleReviewOrder": [Function],
+  "handleSignIn": [Function],
+  "hasError": false,
+  "isCartEmpty": true,
+  "isGuestCheckout": true,
+  "isLoading": true,
+  "isUpdating": false,
+  "orderDetailsData": null,
+  "orderDetailsLoading": false,
+  "orderNumber": null,
+  "placeOrderLoading": false,
+  "resetReviewOrderButtonClicked": [Function],
+  "reviewOrderButtonClicked": false,
+  "setIsUpdating": [Function],
+  "setPaymentInformationDone": [Function],
+  "setShippingInformationDone": [Function],
+  "setShippingMethodDone": [Function],
+}
+`;

packages/peregrine/lib/talons/CheckoutPage/__tests__/useCheckoutPage.spec.js

@@ -0,0 +1,209 @@
+import React from 'react';
+import {
+    useLazyQuery,
+    useApolloClient,
+    useMutation
+} from '@apollo/react-hooks';
+import { act } from 'react-test-renderer';
+
+import { useCheckoutPage } from '../useCheckoutPage';
+import createTestInstance from '../../../util/createTestInstance';
+import { useCartContext } from '../../../context/cart';
+
+/**
+ * Mocks
+ */
+
+jest.mock('@apollo/react-hooks', () => {
+    return {
+        useLazyQuery: jest.fn(),
+        useApolloClient: jest.fn(),
+        useMutation: jest.fn()
+    };
+});
+
+jest.mock('../../../context/user', () => ({
+    useUserContext: jest.fn().mockReturnValue([{ isSignedIn: false }])
+}));
+
+jest.mock('../../../context/app', () => ({
+    useAppContext: jest.fn().mockReturnValue([{}, { toggleDrawer: jest.fn() }])
+}));
+
+jest.mock('../../../context/cart', () => ({
+    useCartContext: jest
+        .fn()
+        .mockReturnValue([
+            { cartId: '123' },
+            { createCart: jest.fn(), removeCart: jest.fn() }
+        ])
+}));
+
+jest.mock('../../../Apollo/clearCartDataFromCache', () => ({
+    clearCartDataFromCache: jest.fn()
+}));
+
+/**
+ * Constants
+ */
+
+const createCartMutation = 'createCartMutation';
+const placeOrderMutation = 'placeOrderMutation';
+const getCheckoutDetailsQuery = 'getCheckoutDetailsQuery';
+const getOrderDetailsQuery = 'getOrderDetailsQuery';
+
+const props = {
+    mutations: { createCartMutation, placeOrderMutation },
+    queries: { getCheckoutDetailsQuery, getOrderDetailsQuery }
+};
+
+const readQuery = jest.fn();
+const writeQuery = jest.fn();
+const client = { readQuery, writeQuery };
+
+const getOrderDetails = jest.fn();
+const getOrderDetailsQueryResult = jest.fn().mockReturnValue([
+    getOrderDetails,
+    {
+        data: null,
+        loading: false,
+        called: false
+    }
+]);
+const getCheckoutDetails = jest.fn();
+const getCheckoutDetailsQueryResult = jest.fn().mockReturnValue([
+    getCheckoutDetails,
+    {
+        data: null,
+        loading: false,
+        called: false
+    }
+]);
+
+const createCart = jest.fn();
+const createCartMutationResult = jest.fn().mockReturnValue([
+    createCart,
+    {
+        error: null,
+        loading: false,
+        data: null
+    }
+]);
+const placeOrder = jest.fn();
+const placeOrderMutationResult = jest.fn().mockReturnValue([
+    placeOrder,
+    {
+        error: null,
+        loading: false,
+        data: null
+    }
+]);
+
+/**
+ * Helpers
+ */
+
+const Component = props => {
+    const talonProps = useCheckoutPage(props);
+
+    return <i talonProps={talonProps} />;
+};
+
+const getTalonProps = props => {
+    const tree = createTestInstance(<Component {...props} />);
+    const { root } = tree;
+    const { talonProps } = root.findByType('i').props;
+
+    const update = newProps => {
+        act(() => {
+            tree.update(<Component {...{ ...props, ...newProps }} />);
+        });
+
+        return root.findByType('i').props.talonProps;
+    };
+
+    return { talonProps, tree, update };
+};
+
+/**
+ * beforeAll
+ */
+
+beforeAll(() => {
+    useLazyQuery.mockImplementation(query => {
+        if (query === getCheckoutDetailsQuery) {
+            return getCheckoutDetailsQueryResult();
+        } else if (query === getOrderDetailsQuery) {
+            return getOrderDetailsQueryResult();
+        } else {
+            return [jest.fn(), {}];
+        }
+    });
+
+    useMutation.mockImplementation(mutation => {
+        if (mutation === createCartMutation) {
+            return createCartMutationResult();
+        } else if (mutation === placeOrderMutation) {
+            return placeOrderMutationResult();
+        } else {
+            return [jest.fn(), {}];
+        }
+    });
+
+    useApolloClient.mockReturnValue(client);
+});
+
+/**
+ * Tests
+ */
+
+test('Should return correct shape', () => {
+    const { talonProps } = getTalonProps(props);
+
+    expect(talonProps).toMatchSnapshot();
+});
+
+test('Should get checkout details if cartId changes and order has not been placed yet', () => {
+    useCartContext.mockReturnValueOnce([
+        { cartId: '123' },
+        { createCart: jest.fn(), removeCart: jest.fn() }
+    ]);
+
+    const { update } = getTalonProps(props);
+
+    expect(getCheckoutDetails.mock.calls[0][0]).toMatchObject({
+        variables: { cartId: '123' }
+    });
+    expect(getCheckoutDetails.mock.calls.length).toBe(1);
+
+    useCartContext.mockReturnValueOnce([
+        { cartId: 'abc' },
+        { createCart: jest.fn(), removeCart: jest.fn() }
+    ]);
+
+    update();
+
+    expect(getCheckoutDetails.mock.calls[1][0]).toMatchObject({
+        variables: { cartId: 'abc' }
+    });
+    expect(getCheckoutDetails.mock.calls.length).toBe(2);
+
+    useCartContext.mockReturnValueOnce([
+        { cartId: 'xyz' },
+        { createCart: jest.fn(), removeCart: jest.fn() }
+    ]);
+    placeOrderMutationResult.mockReturnValueOnce([
+        placeOrder,
+        {
+            error: null,
+            loading: false,
+            data: {
+                placeOrder: { order: { order_number: '000000' } }
+            }
+        }
+    ]);
+
+    update();
+
+    expect(getCheckoutDetails.mock.calls.length).toBe(2);
+});

packages/peregrine/lib/talons/CheckoutPage/useCheckoutPage.js

@@ -27,7 +27,7 @@ export const useCheckoutPage = props => {
         false
     );
 
-    const apolloClient = useApolloClient();
+    const client = useApolloClient();
     const [isUpdating, setIsUpdating] = useState(false);
 
     const [, { toggleDrawer }] = useAppContext();
@@ -56,12 +56,7 @@ export const useCheckoutPage = props => {
 
     const [
         getCheckoutDetails,
-        {
-            data: checkoutData,
-            called: checkoutCalled,
-            client,
-            loading: checkoutLoading
-        }
+        { data: checkoutData, called: checkoutCalled, loading: checkoutLoading }
     ] = useLazyQuery(getCheckoutDetailsQuery);
 
     const checkoutStep = checkoutData && checkoutData.cart.checkoutStep;
@@ -131,13 +126,13 @@ export const useCheckoutPage = props => {
 
         await removeCart();
 
-        await clearCartDataFromCache(apolloClient);
+        await clearCartDataFromCache(client);
 
         await createCart({
             fetchCartId
         });
     }, [
-        apolloClient,
+        client,
         cartId,
         createCart,
         fetchCartId,
@@ -147,14 +142,26 @@ export const useCheckoutPage = props => {
     ]);
 
     useEffect(() => {
-        if (cartId) {
+        const placedOrder = !!placeOrderData;
+
+        /**
+         * Get checkout details everytime `cartId` changes
+         * but not if the place order mutation is called
+         * and `cartId` changes because of that.This is
+         * because after the place order mutation is completed
+         * old `cartId` will be purged and a new one will be
+         * created. we wont need checkout details for that
+         * `cartId`, since the order has been placed and the UI
+         * will be in the order confirmation step.
+         */
+        if (cartId && !placedOrder) {
             getCheckoutDetails({
                 variables: {
                     cartId
                 }
             });
         }
-    }, [cartId, getCheckoutDetails]);
+    }, [cartId, placeOrderData, getCheckoutDetails]);
 
     return {
         checkoutStep,