Merge branch 'develop' into PWA-1514

magento · Mar 31, 2021 · 58c9254 · 58c9254
2 parents 2a52669 + 9fef965
commit 58c9254
Show file tree

Hide file tree

Showing 28 changed files with 412 additions and 29 deletions.
diff --git a/packages/peregrine/lib/talons/CheckoutPage/AddressBook/__tests__/useAddressBook.spec.js b/packages/peregrine/lib/talons/CheckoutPage/AddressBook/__tests__/useAddressBook.spec.js
@@ -105,13 +105,16 @@ const Component = props => {
 };
 
 const toggleActiveContent = jest.fn();
+const onSuccess = jest.fn();
+
 const mockProps = {
     mutations: {},
     queries: {
         getCustomerAddressesQuery: 'getCustomerAddressesQuery',
         getCustomerCartAddressQuery: 'getCustomerCartAddressQuery'
     },
-    toggleActiveContent
+    toggleActiveContent,
+    onSuccess
 };
 
 test('returns the correct shape', () => {
@@ -361,3 +364,12 @@ test('does not set a selected address when there are no available customer cart
 
     expect(talonProps.selectedAddress).toBeUndefined();
 });
+
+test('should call onSuccess on mutation success', () => {
+    createTestInstance(<Component {...mockProps} />);
+
+    const { onCompleted } = useMutation.mock.calls[0][1];
+    onCompleted();
+
+    expect(onSuccess).toHaveBeenCalled();
+});
diff --git a/packages/peregrine/lib/talons/CheckoutPage/AddressBook/useAddressBook.js b/packages/peregrine/lib/talons/CheckoutPage/AddressBook/useAddressBook.js
@@ -10,7 +10,8 @@ export const useAddressBook = props => {
     const {
         mutations: { setCustomerAddressOnCartMutation },
         queries: { getCustomerAddressesQuery, getCustomerCartAddressQuery },
-        toggleActiveContent
+        toggleActiveContent,
+        onSuccess
     } = props;
 
     const [, { toggleDrawer }] = useAppContext();
@@ -27,7 +28,11 @@ export const useAddressBook = props => {
             error: setCustomerAddressOnCartError,
             loading: setCustomerAddressOnCartLoading
         }
-    ] = useMutation(setCustomerAddressOnCartMutation);
+    ] = useMutation(setCustomerAddressOnCartMutation, {
+        onCompleted: () => {
+            onSuccess();
+        }
+    });
 
     const {
         data: customerAddressesData,

diff --git a/...lib/talons/CheckoutPage/ShippingInformation/AddressForm/__tests__/useCustomerForm.spec.js b/...lib/talons/CheckoutPage/ShippingInformation/AddressForm/__tests__/useCustomerForm.spec.js
@@ -38,6 +38,7 @@ const Component = props => {
 
 const afterSubmit = jest.fn();
 const onCancel = jest.fn();
+const onSuccess = jest.fn();
 const shippingData = {
     country: {
         code: 'US'
@@ -59,7 +60,8 @@ const mockProps = {
         getCustomerAddressesQuery: 'getCustomerAddressesQuery',
         getDefaultShippingQuery: 'getCustomerAddressesQuery'
     },
-    shippingData
+    shippingData,
+    onSuccess
 };
 
 test('return correct shape for initial address entry', () => {
@@ -216,6 +218,15 @@ test('does not call afterSubmit() if it is undefined', async () => {
     expect(afterSubmit).not.toHaveBeenCalled();
 });
 
+test('should call onSuccess on mutation success', () => {
+    createTestInstance(<Component {...mockProps} />);
+
+    const { onCompleted } = useMutation.mock.calls[0][1];
+    onCompleted();
+
+    expect(onSuccess).toHaveBeenCalled();
+});
+
 describe('returns Apollo errors', () => {
     test('for create customer address', () => {
         useMutation.mockReturnValueOnce([

diff --git a/...ne/lib/talons/CheckoutPage/ShippingInformation/AddressForm/__tests__/useGuestForm.spec.js b/...ne/lib/talons/CheckoutPage/ShippingInformation/AddressForm/__tests__/useGuestForm.spec.js
@@ -174,3 +174,22 @@ test('calls the onCancel() callback', () => {
 
     expect(onCancel).toHaveBeenCalled();
 });
+
+test('should call onSuccess on mutation success', () => {
+    const onSuccess = jest.fn();
+
+    createTestInstance(
+        <Component
+            onSuccess={onSuccess}
+            onCancel={jest.fn()}
+            afterSubmit={jest.fn()}
+            mutations={{}}
+            shippingData={shippingData}
+        />
+    );
+
+    const { onCompleted } = useMutation.mock.calls[0][1];
+    onCompleted();
+
+    expect(onSuccess).toHaveBeenCalled();
+});
diff --git a/...ages/peregrine/lib/talons/CheckoutPage/ShippingInformation/AddressForm/useCustomerForm.js b/...ages/peregrine/lib/talons/CheckoutPage/ShippingInformation/AddressForm/useCustomerForm.js
@@ -9,6 +9,7 @@ export const useCustomerForm = props => {
             updateCustomerAddressMutation
         },
         onCancel,
+        onSuccess,
         queries: {
             getCustomerQuery,
             getCustomerAddressesQuery,
@@ -23,15 +24,23 @@ export const useCustomerForm = props => {
             error: createCustomerAddressError,
             loading: createCustomerAddressLoading
         }
-    ] = useMutation(createCustomerAddressMutation);
+    ] = useMutation(createCustomerAddressMutation, {
+        onCompleted: () => {
+            onSuccess();
+        }
+    });
 
     const [
         updateCustomerAddress,
         {
             error: updateCustomerAddressError,
             loading: updateCustomerAddressLoading
         }
-    ] = useMutation(updateCustomerAddressMutation);
+    ] = useMutation(updateCustomerAddressMutation, {
+        onCompleted: () => {
+            onSuccess();
+        }
+    });
 
     const { data: customerData, loading: getCustomerLoading } = useQuery(
         getCustomerQuery

diff --git a/packages/peregrine/lib/talons/CheckoutPage/ShippingInformation/AddressForm/useGuestForm.js b/packages/peregrine/lib/talons/CheckoutPage/ShippingInformation/AddressForm/useGuestForm.js
@@ -8,13 +8,19 @@ export const useGuestForm = props => {
         afterSubmit,
         mutations: { setGuestShippingMutation },
         onCancel,
+        onSuccess,
         shippingData
     } = props;
 
     const [{ cartId }] = useCartContext();
 
     const [setGuestShipping, { error, loading }] = useMutation(
-        setGuestShippingMutation
+        setGuestShippingMutation,
+        {
+            onCompleted: () => {
+                onSuccess();
+            }
+        }
     );
 
     const { country, region } = shippingData;

diff --git a/...es/peregrine/lib/talons/CheckoutPage/__tests__/__snapshots__/useCheckoutPage.spec.js.snap b/...es/peregrine/lib/talons/CheckoutPage/__tests__/__snapshots__/useCheckoutPage.spec.js.snap
@@ -24,11 +24,23 @@ Object {
   "placeOrderLoading": false,
   "resetReviewOrderButtonClicked": [Function],
   "reviewOrderButtonClicked": false,
+  "scrollShippingInformationIntoView": [Function],
+  "scrollShippingMethodIntoView": [Function],
   "setCheckoutStep": [Function],
   "setIsUpdating": [Function],
   "setPaymentInformationDone": [Function],
   "setShippingInformationDone": [Function],
   "setShippingMethodDone": [Function],
+  "shippingInformationRef": Object {
+    "current": Object {
+      "scrollIntoView": [MockFunction],
+    },
+  },
+  "shippingMethodRef": Object {
+    "current": Object {
+      "scrollIntoView": [MockFunction],
+    },
+  },
   "toggleAddressBookContent": [Function],
   "toggleSignInContent": [Function],
 }

diff --git a/packages/peregrine/lib/talons/CheckoutPage/__tests__/useCheckoutPage.spec.js b/packages/peregrine/lib/talons/CheckoutPage/__tests__/useCheckoutPage.spec.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import {
     useLazyQuery,
     useApolloClient,
@@ -28,6 +28,15 @@ jest.mock('@apollo/client', () => {
     };
 });
 
+jest.mock('react', () => ({
+    ...jest.requireActual('react'),
+    useRef: jest.fn().mockReturnValue({
+        current: {
+            scrollIntoView: jest.fn()
+        }
+    })
+}));
+
 jest.mock('../../../context/user', () => ({
     useUserContext: jest.fn().mockReturnValue([{ isSignedIn: false }])
 }));
@@ -671,3 +680,27 @@ test('check availablePaymentMethods, if not implemented then show page level mes
 
     expect(talonProps.availablePaymentMethods).toBeNull();
 });
+
+test('should scroll shipping information into view when scrollShippingInformationIntoView is called', () => {
+    const scrollIntoView = jest.fn();
+    useRef.mockReturnValueOnce({ current: { scrollIntoView } });
+
+    const { talonProps } = getTalonProps(defaultProps);
+
+    talonProps.scrollShippingInformationIntoView();
+
+    expect(scrollIntoView).toHaveBeenCalledWith({ behavior: 'smooth' });
+});
+
+test('should scroll shipping method into view when scrollShippingMethodIntoView is called', () => {
+    const scrollIntoView = jest.fn();
+    useRef
+        .mockReturnValueOnce({ current: { scrollIntoView: jest.fn() } })
+        .mockReturnValueOnce({ current: { scrollIntoView } });
+
+    const { talonProps } = getTalonProps(defaultProps);
+
+    talonProps.scrollShippingMethodIntoView();
+
+    expect(scrollIntoView).toHaveBeenCalledWith({ behavior: 'smooth' });
+});
diff --git a/packages/peregrine/lib/talons/CheckoutPage/__tests__/useShippingMethod.spec.js b/packages/peregrine/lib/talons/CheckoutPage/__tests__/useShippingMethod.spec.js
@@ -89,6 +89,7 @@ const Component = props => {
 };
 
 const setPageIsUpdating = jest.fn();
+const onSuccess = jest.fn();
 
 const props = {
     onSave: jest.fn(),
@@ -99,7 +100,8 @@ const props = {
     mutations: {
         setShippingMethod: 'setShippingMethod'
     },
-    setPageIsUpdating
+    setPageIsUpdating,
+    onSuccess
 };
 
 /*
@@ -428,3 +430,12 @@ test('does not auto-select a shipping method on a signed in user when it has alr
 
     expect(setShippingMethod).not.toHaveBeenCalled();
 });
+
+test('should call onSuccess on mutation success', () => {
+    createTestInstance(<Component {...props} />);
+
+    const { onCompleted } = useMutation.mock.calls[0][1];
+    onCompleted();
+
+    expect(onSuccess).toHaveBeenCalled();
+});
diff --git a/packages/peregrine/lib/talons/CheckoutPage/useCheckoutPage.js b/packages/peregrine/lib/talons/CheckoutPage/useCheckoutPage.js
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState, useRef } from 'react';
 import {
     useApolloClient,
     useLazyQuery,
@@ -23,6 +23,47 @@ export const CHECKOUT_STEP = {
     REVIEW: 4
 };
 
+/**
+ *
+ * @param {DocumentNode} props.operations.getCheckoutDetailsQuery query to fetch checkout details
+ * @param {DocumentNode} props.operations.getCustomerQuery query to fetch customer details
+ * @param {DocumentNode} props.operations.getOrderDetailsQuery query to fetch order details
+ * @param {DocumentNode} props.operations.createCartMutation mutation to create a new cart
+ * @param {DocumentNode} props.operations.placeOrderMutation mutation to place order
+ *
+ * @returns {
+ *  activeContent: String,
+ *  availablePaymentMethods: Array,
+ *  cartItems: Array,
+ *  checkoutStep: Number,
+ *  customer: Object,
+ *  error: ApolloError,
+ *  handlePlaceOrder: Function,
+ *  hasError: Boolean,
+ *  isCartEmpty: Boolean,
+ *  isGuestCheckout: Boolean,
+ *  isLoading: Boolean,
+ *  isUpdating: Boolean,
+ *  orderDetailsData: Object,
+ *  orderDetailsLoading: Boolean,
+ *  orderNumber: String,
+ *  placeOrderLoading: Boolean,
+ *  setCheckoutStep: Function,
+ *  setIsUpdating: Function,
+ *  setShippingInformationDone: Function,
+ *  setShippingMethodDone: Function,
+ *  setPaymentInformationDone: Function,
+ *  scrollShippingInformationIntoView: Function,
+ *  shippingInformationRef: ReactRef,
+ *  shippingMethodRef: ReactRef,
+ *  scrollShippingMethodIntoView: Function,
+ *  resetReviewOrderButtonClicked: Function,
+ *  handleReviewOrder: Function,
+ *  reviewOrderButtonClicked: Boolean,
+ *  toggleAddressBookContent: Function,
+ *  toggleSignInContent: Function,
+ * }
+ */
 export const useCheckoutPage = (props = {}) => {
     const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
 
@@ -38,6 +79,9 @@ export const useCheckoutPage = (props = {}) => {
         false
     );
 
+    const shippingInformationRef = useRef();
+    const shippingMethodRef = useRef();
+
     const apolloClient = useApolloClient();
     const [isUpdating, setIsUpdating] = useState(false);
     const [activeContent, setActiveContent] = useState('checkout');
@@ -131,12 +175,28 @@ export const useCheckoutPage = (props = {}) => {
         setReviewOrderButtonClicked(false);
     }, []);
 
+    const scrollShippingInformationIntoView = useCallback(() => {
+        if (shippingInformationRef.current) {
+            shippingInformationRef.current.scrollIntoView({
+                behavior: 'smooth'
+            });
+        }
+    }, [shippingInformationRef]);
+
     const setShippingInformationDone = useCallback(() => {
         if (checkoutStep === CHECKOUT_STEP.SHIPPING_ADDRESS) {
             setCheckoutStep(CHECKOUT_STEP.SHIPPING_METHOD);
         }
     }, [checkoutStep]);
 
+    const scrollShippingMethodIntoView = useCallback(() => {
+        if (shippingMethodRef.current) {
+            shippingMethodRef.current.scrollIntoView({
+                behavior: 'smooth'
+            });
+        }
+    }, [shippingMethodRef]);
+
     const setShippingMethodDone = useCallback(() => {
         if (checkoutStep === CHECKOUT_STEP.SHIPPING_METHOD) {
             setCheckoutStep(CHECKOUT_STEP.PAYMENT);
@@ -242,6 +302,10 @@ export const useCheckoutPage = (props = {}) => {
         setShippingInformationDone,
         setShippingMethodDone,
         setPaymentInformationDone,
+        scrollShippingInformationIntoView,
+        shippingInformationRef,
+        shippingMethodRef,
+        scrollShippingMethodIntoView,
         resetReviewOrderButtonClicked,
         handleReviewOrder,
         reviewOrderButtonClicked,

diff --git a/packages/peregrine/lib/talons/CheckoutPage/useShippingMethod.js b/packages/peregrine/lib/talons/CheckoutPage/useShippingMethod.js
@@ -42,6 +42,7 @@ const DEFAULT_AVAILABLE_SHIPPING_METHODS = [];
 export const useShippingMethod = props => {
     const {
         onSave,
+        onSuccess,
         mutations: { setShippingMethod },
         queries: { getSelectedAndAvailableShippingMethods },
         setPageIsUpdating
@@ -56,7 +57,11 @@ export const useShippingMethod = props => {
     const [
         setShippingMethodCall,
         { error: setShippingMethodError, loading: isSettingShippingMethod }
-    ] = useMutation(setShippingMethod);
+    ] = useMutation(setShippingMethod, {
+        onCompleted: () => {
+            onSuccess();
+        }
+    });
 
     const { data, loading: isLoadingShippingMethods } = useQuery(
         getSelectedAndAvailableShippingMethods,