Display page level error and disable checkout button when no availabl…

…e payment methods (#2873) * Added payment method query to checkoutPageFragments.gql.js to fetch all available payment methods while fetching cart data on checkout page * Added page level error message when no payment method implementations available for available methods * Adding checkout page test update * Adding useCheckoutPage talon test * executed prettier on checkoutPage.spec.js * executed prettier on useCheckoutPage.spec.js * Updated unit test * Corrected test snap to pass the unit test * Converted "CheckoutPageOperations" to peregrine. Also moved other connected queries to peregrine. * Fixed useCheckoutPage.spec.js to make it compatible with migrated "CheckoutPageOperations" in useCheckoutPage.js peregrine component * Prettier-ed useCheckoutPage.spec.js * Fixed issue with gql client after migration of CheckoutPageOperations to peregrine. * Fixed issue with gql client after migration of CheckoutPageOperations to peregrine. * Sorted the new lang definitions while adding * Used the ternary operator instead of the logical operators * Changed variable "props" to "defaultProps" * Removed empty object usage as it was not required anymore. * Corrected lint error related to array reassignment due to let declaration * Update packages/peregrine/lib/talons/CheckoutPage/useCheckoutPage.js Co-authored-by: Stephen <sirugh@users.noreply.github.com> * Re-add lost query * Add missing mock in test Signed-off-by: sirugh <rugh@adobe.com> * Prettified * exporting default operations as root properties * Remove styles Signed-off-by: sirugh <rugh@adobe.com> * fix operations mock in tests Signed-off-by: sirugh <rugh@adobe.com> * Fix zero total checkout use case. Add tests * Fixed layout issue with multiple page errors on checkoutPage. * Updated test snapshots * Updated test cases snapshots Co-authored-by: Stephen <sirugh@users.noreply.github.com> Co-authored-by: sirugh <rugh@adobe.com> Co-authored-by: Devagouda <40405790+dpatil-magento@users.noreply.github.com>
magento · Feb 26, 2021 · ec4e97d · ec4e97d
1 parent 05bb83f
commit ec4e97d
Show file tree

Hide file tree

Showing 19 changed files with 335 additions and 81 deletions.
diff --git a/packages/peregrine/lib/talons/CheckoutPage/ItemsReview/itemsReview.gql.js b/packages/peregrine/lib/talons/CheckoutPage/ItemsReview/itemsReview.gql.js
@@ -1,5 +1,7 @@
 import { gql } from '@apollo/client';
 
+import { ItemsReviewFragment } from './itemsReviewFragments.gql';
+
 export const GET_CONFIGURABLE_THUMBNAIL_SOURCE = gql`
     query getConfigurableThumbnailSource {
         storeConfig {
@@ -9,6 +11,18 @@ export const GET_CONFIGURABLE_THUMBNAIL_SOURCE = gql`
     }
 `;
 
+export const LIST_OF_PRODUCTS_IN_CART_QUERY = gql`
+    query getItemsInCart($cartId: String!) {
+        cart(cart_id: $cartId) {
+            id
+            ...ItemsReviewFragment
+        }
+    }
+
+    ${ItemsReviewFragment}
+`;
+
 export default {
-    getConfigurableThumbnailSource: GET_CONFIGURABLE_THUMBNAIL_SOURCE
+    getConfigurableThumbnailSource: GET_CONFIGURABLE_THUMBNAIL_SOURCE,
+    getItemsInCart: LIST_OF_PRODUCTS_IN_CART_QUERY
 };
diff --git a/...e/ItemsReview/itemsReviewFragments.gql.js → ...e/ItemsReview/itemsReviewFragments.gql.js b/...e/ItemsReview/itemsReviewFragments.gql.js → ...e/ItemsReview/itemsReviewFragments.gql.js
diff --git a/...age/orderConfirmationPageFragments.gql.js → ...age/orderConfirmationPageFragments.gql.js b/...age/orderConfirmationPageFragments.gql.js → ...age/orderConfirmationPageFragments.gql.js
diff --git a/...egrine/lib/talons/CheckoutPage/PaymentInformation/__tests__/usePaymentInformation.spec.js b/...egrine/lib/talons/CheckoutPage/PaymentInformation/__tests__/usePaymentInformation.spec.js
@@ -12,6 +12,7 @@ jest.mock('../../../../context/cart', () => ({
 
 jest.mock('@apollo/client', () => {
     return {
+        ...jest.requireActual('@apollo/client'),
         useApolloClient: jest.fn(),
         useQuery: jest.fn().mockReturnValue({
             data: {

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
@@ -3,6 +3,7 @@
 exports[`Should return correct shape 1`] = `
 Object {
   "activeContent": "checkout",
+  "availablePaymentMethods": null,
   "cartItems": Array [],
   "checkoutStep": 1,
   "customer": Object {

diff --git a/packages/peregrine/lib/talons/CheckoutPage/__tests__/useCheckoutPage.spec.js b/packages/peregrine/lib/talons/CheckoutPage/__tests__/useCheckoutPage.spec.js
@@ -20,6 +20,7 @@ import CheckoutError from '../CheckoutError';
 
 jest.mock('@apollo/client', () => {
     return {
+        ...jest.requireActual('@apollo/client'),
         useLazyQuery: jest.fn(),
         useApolloClient: jest.fn(),
         useMutation: jest.fn(),
@@ -64,9 +65,14 @@ const getCheckoutDetailsQuery = 'getCheckoutDetailsQuery';
 const getOrderDetailsQuery = 'getOrderDetailsQuery';
 const getCustomerQuery = 'getCustomerQuery';
 
-const props = {
-    mutations: { createCartMutation, placeOrderMutation },
-    queries: { getCheckoutDetailsQuery, getOrderDetailsQuery, getCustomerQuery }
+const defaultProps = {
+    operations: {
+        createCartMutation,
+        getCheckoutDetailsQuery,
+        getOrderDetailsQuery,
+        getCustomerQuery,
+        placeOrderMutation
+    }
 };
 
 const readQuery = jest.fn().mockReturnValue({ cart: {} });
@@ -182,7 +188,7 @@ beforeEach(() => {
  */
 
 test('Should return correct shape', () => {
-    const { talonProps } = getTalonProps(props);
+    const { talonProps } = getTalonProps(defaultProps);
 
     expect(talonProps).toMatchSnapshot();
 });
@@ -193,7 +199,7 @@ test('isLoading should be set to true if the checkout details query networkStatu
         networkStatus: 4
     });
 
-    const { talonProps, update } = getTalonProps(props);
+    const { talonProps, update } = getTalonProps(defaultProps);
 
     expect(talonProps.isLoading).toBeTruthy();
 
@@ -221,7 +227,7 @@ test('isLoading should be set to true if the customer details query is loading',
         loading: true
     });
 
-    const { talonProps } = getTalonProps(props);
+    const { talonProps } = getTalonProps(defaultProps);
 
     expect(talonProps.isLoading).toBeTruthy();
 });
@@ -231,7 +237,7 @@ test('returns cartItems from getOrderDetails query', () => {
     getCheckoutDetailsQueryResult.mockReturnValueOnce({
         data: { cart: { items: cartItems } }
     });
-    const { talonProps } = getTalonProps(props);
+    const { talonProps } = getTalonProps(defaultProps);
 
     expect(talonProps.cartItems).toEqual(cartItems);
 });
@@ -247,7 +253,7 @@ test('returned error prop should be error from place order mutation', () => {
         }
     ]);
 
-    const { talonProps } = getTalonProps(props);
+    const { talonProps } = getTalonProps(defaultProps);
 
     expect(talonProps.error).toBeInstanceOf(CheckoutError);
 });
@@ -258,7 +264,7 @@ test('should get order details when handlePlaceOrder called', () => {
         { createCart: () => {}, removeCart: () => {} }
     ]);
 
-    const { talonProps } = getTalonProps(props);
+    const { talonProps } = getTalonProps(defaultProps);
 
     act(() => {
         talonProps.handlePlaceOrder();
@@ -284,7 +290,7 @@ test("should place order and cleanup when we have order details and place order
         return [jest.fn(), { data: {}, loading: false }];
     });
 
-    const { talonProps } = getTalonProps(props);
+    const { talonProps } = getTalonProps(defaultProps);
 
     await act(async () => {
         await talonProps.handlePlaceOrder();
@@ -308,7 +314,7 @@ test('hasError should be true if place order mutation failed with errors', () =>
         }
     ]);
 
-    const { talonProps } = getTalonProps(props);
+    const { talonProps } = getTalonProps(defaultProps);
 
     expect(talonProps.hasError).toBeTruthy();
 });
@@ -321,7 +327,7 @@ describe('isCartEmpty', () => {
             loading: false
         });
 
-        const { talonProps } = getTalonProps(props);
+        const { talonProps } = getTalonProps(defaultProps);
 
         expect(talonProps.isCartEmpty).toBeTruthy();
     });
@@ -337,7 +343,7 @@ describe('isCartEmpty', () => {
             loading: false
         });
 
-        const { talonProps } = getTalonProps(props);
+        const { talonProps } = getTalonProps(defaultProps);
 
         expect(talonProps.isCartEmpty).toBeTruthy();
     });
@@ -353,7 +359,7 @@ describe('isCartEmpty', () => {
             loading: false
         });
 
-        const { talonProps } = getTalonProps(props);
+        const { talonProps } = getTalonProps(defaultProps);
 
         expect(talonProps.isCartEmpty).toBeFalsy();
     });
@@ -362,7 +368,7 @@ describe('isCartEmpty', () => {
 test('isGuestCheckout should be negation of isSignedIn from useUserContext', () => {
     useUserContext.mockReturnValueOnce([{ isSignedIn: false }]);
 
-    const { talonProps, update } = getTalonProps(props);
+    const { talonProps, update } = getTalonProps(defaultProps);
 
     expect(talonProps.isGuestCheckout).toBeTruthy();
 
@@ -384,7 +390,7 @@ test('orderDetailsData should be data from getOrderDetailsQuery', () => {
         }
     ]);
 
-    const { talonProps } = getTalonProps(props);
+    const { talonProps } = getTalonProps(defaultProps);
 
     expect(talonProps.orderDetailsData).toBe(data);
 });
@@ -399,7 +405,7 @@ test('orderDetailsLoading should be loading status of the getOrderDetailsQuery',
         }
     ]);
 
-    const { talonProps } = getTalonProps(props);
+    const { talonProps } = getTalonProps(defaultProps);
 
     expect(talonProps.orderDetailsLoading).toBeTruthy();
 });
@@ -420,7 +426,7 @@ test('orderNumber should be the order_number from the place order mutation resul
         }
     ]);
 
-    const { talonProps } = getTalonProps(props);
+    const { talonProps } = getTalonProps(defaultProps);
 
     expect(talonProps.orderNumber).toBe('123');
 });
@@ -435,7 +441,7 @@ test('orderNumber should be the null if place order mutation result is falsy', (
         }
     ]);
 
-    const { talonProps } = getTalonProps(props);
+    const { talonProps } = getTalonProps(defaultProps);
 
     expect(talonProps.orderNumber).toBeNull();
 });
@@ -450,14 +456,14 @@ test('placeOrderLoading should be loading status of the place order mutation', (
         }
     ]);
 
-    const { talonProps } = getTalonProps(props);
+    const { talonProps } = getTalonProps(defaultProps);
 
     expect(talonProps.placeOrderLoading).toBeTruthy();
 });
 
 describe('setShippingInformationDone', () => {
     test('should set the checkoutStep to SHIPPING_METHOD if current checkoutStep is SHIPPING_ADDRESS', () => {
-        const { talonProps, update } = getTalonProps(props);
+        const { talonProps, update } = getTalonProps(defaultProps);
 
         talonProps.setCheckoutStep(CHECKOUT_STEP.SHIPPING_ADDRESS);
 
@@ -473,7 +479,7 @@ describe('setShippingInformationDone', () => {
     });
 
     test('should not set the checkoutStep to SHIPPING_METHOD if current checkoutStep is not SHIPPING_ADDRESS', () => {
-        const { talonProps, update } = getTalonProps(props);
+        const { talonProps, update } = getTalonProps(defaultProps);
 
         talonProps.setCheckoutStep(CHECKOUT_STEP.PAYMENT);
 
@@ -491,7 +497,7 @@ describe('setShippingInformationDone', () => {
 
 describe('setShippingMethodDone', () => {
     test('should set the checkoutStep to PAYMENT if current checkoutStep is SHIPPING_METHOD', () => {
-        const { talonProps, update } = getTalonProps(props);
+        const { talonProps, update } = getTalonProps(defaultProps);
 
         talonProps.setCheckoutStep(CHECKOUT_STEP.SHIPPING_METHOD);
 
@@ -507,7 +513,7 @@ describe('setShippingMethodDone', () => {
     });
 
     test('should not set the checkoutStep to PAYMENT if current checkoutStep is not SHIPPING_METHOD', () => {
-        const { talonProps, update } = getTalonProps(props);
+        const { talonProps, update } = getTalonProps(defaultProps);
 
         talonProps.setCheckoutStep(CHECKOUT_STEP.REVIEW);
 
@@ -525,7 +531,7 @@ describe('setShippingMethodDone', () => {
 
 describe('setPaymentInformationDone', () => {
     test('should set the checkoutStep to REVIEW if current checkoutStep is PAYMENT', () => {
-        const { talonProps, update } = getTalonProps(props);
+        const { talonProps, update } = getTalonProps(defaultProps);
 
         talonProps.setCheckoutStep(CHECKOUT_STEP.PAYMENT);
 
@@ -541,7 +547,7 @@ describe('setPaymentInformationDone', () => {
     });
 
     test('should not set the checkoutStep to REVIEW if current checkoutStep is not PAYMENT', () => {
-        const { talonProps, update } = getTalonProps(props);
+        const { talonProps, update } = getTalonProps(defaultProps);
 
         talonProps.setCheckoutStep(CHECKOUT_STEP.SHIPPING_METHOD);
 
@@ -558,7 +564,7 @@ describe('setPaymentInformationDone', () => {
 });
 
 test('handleReviewOrder should set reviewOrderButtonClicked to true', () => {
-    const { talonProps, update } = getTalonProps(props);
+    const { talonProps, update } = getTalonProps(defaultProps);
 
     expect(talonProps.reviewOrderButtonClicked).toBeFalsy();
 
@@ -570,7 +576,7 @@ test('handleReviewOrder should set reviewOrderButtonClicked to true', () => {
 });
 
 test('resetReviewOrderButtonClicked should set reviewOrderButtonClicked to false', () => {
-    const { talonProps, update } = getTalonProps(props);
+    const { talonProps, update } = getTalonProps(defaultProps);
 
     expect(talonProps.reviewOrderButtonClicked).toBeFalsy();
 
@@ -588,7 +594,7 @@ test('resetReviewOrderButtonClicked should set reviewOrderButtonClicked to false
 });
 
 test('toggles addressBook content', () => {
-    const { talonProps: initialProps, update } = getTalonProps(props);
+    const { talonProps: initialProps, update } = getTalonProps(defaultProps);
 
     initialProps.toggleAddressBookContent();
     const step1Props = update();
@@ -602,7 +608,7 @@ test('toggles addressBook content', () => {
 });
 
 test('toggles signIn content', () => {
-    const { talonProps: initialProps, update } = getTalonProps(props);
+    const { talonProps: initialProps, update } = getTalonProps(defaultProps);
 
     initialProps.toggleSignInContent();
     const step1Props = update();
@@ -616,7 +622,7 @@ test('toggles signIn content', () => {
 });
 
 test('resets active content to checkout on sign in', () => {
-    const { talonProps: initialProps, update } = getTalonProps(props);
+    const { talonProps: initialProps, update } = getTalonProps(defaultProps);
 
     initialProps.toggleSignInContent();
     const step1Props = update();
@@ -628,3 +634,9 @@ test('resets active content to checkout on sign in', () => {
 
     expect(step2Props.activeContent).toBe('checkout');
 });
+
+test('check availablePaymentMethods, if not implemented then show page level message', () => {
+    const { talonProps } = getTalonProps(defaultProps);
+
+    expect(talonProps.availablePaymentMethods).toBeNull();
+});
diff --git a/...mponents/CheckoutPage/checkoutPage.gql.js → ...b/talons/CheckoutPage/checkoutPage.gql.js b/...mponents/CheckoutPage/checkoutPage.gql.js → ...b/talons/CheckoutPage/checkoutPage.gql.js
@@ -53,13 +53,9 @@ export const GET_CUSTOMER = gql`
 `;
 
 export default {
-    mutations: {
-        createCartMutation: CREATE_CART,
-        placeOrderMutation: PLACE_ORDER
-    },
-    queries: {
-        getCheckoutDetailsQuery: GET_CHECKOUT_DETAILS,
-        getCustomerQuery: GET_CUSTOMER,
-        getOrderDetailsQuery: GET_ORDER_DETAILS
-    }
+    createCartMutation: CREATE_CART,
+    getCheckoutDetailsQuery: GET_CHECKOUT_DETAILS,
+    getCustomerQuery: GET_CUSTOMER,
+    getOrderDetailsQuery: GET_ORDER_DETAILS,
+    placeOrderMutation: PLACE_ORDER
 };
diff --git a/...CheckoutPage/checkoutPageFragments.gql.js → ...CheckoutPage/checkoutPageFragments.gql.js b/...CheckoutPage/checkoutPageFragments.gql.js → ...CheckoutPage/checkoutPageFragments.gql.js
@@ -12,5 +12,8 @@ export const CheckoutPageFragment = gql`
         }
         # If total quantity is falsy we render empty.
         total_quantity
+        available_payment_methods {
+            code
+        }
     }
 `;