PWA-2985: [bug]: Payment method always reverts to "Check / Money orde…

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

@@ -8,7 +8,8 @@ Object {
     },
   ],
   "currentSelectedPaymentMethod": "currentSelectedPaymentMethod",
-  "initialSelectedMethod": "availablePaymentMethod",
+  "handlePaymentMethodSelection": [Function],
+  "initialSelectedMethod": "braintree",
   "isLoading": false,
 }
 `;

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

@@ -18,14 +18,21 @@ jest.mock(
     }
 );
 
+const mockSetPaymentMethodOnCartMutation = jest.fn();
+
 jest.mock('@apollo/client', () => {
     return {
+        useMutation: jest.fn(() => [
+            mockSetPaymentMethodOnCartMutation,
+            { loading: true }
+        ]),
         useQuery: jest.fn().mockReturnValue({
             data: {
                 cart: {
                     available_payment_methods: [
                         { code: 'availablePaymentMethod' }
-                    ]
+                    ],
+                    selected_payment_method: { code: 'braintree' }
                 }
             },
             loading: false
@@ -34,9 +41,18 @@ jest.mock('@apollo/client', () => {
 });
 
 jest.mock('../paymentMethods.gql', () => ({
-    getPaymentMethodsQuery: 'paymentMethodsQuery'
+    getPaymentMethodsQuery: 'paymentMethodsQuery',
+    setPaymentMethodOnCartMutation: 'setPaymentMethod'
 }));
 
+const getPaymentMethodsQuery = 'getPaymentMethodsQuery';
+const setPaymentMethodOnCartMutation = 'setPaymentMethodOnCartMutation';
+
+const operations = {
+    getPaymentMethodsQuery,
+    setPaymentMethodOnCartMutation
+};
+
 const Component = props => {
     const talonProps = usePaymentMethods(props);
 
@@ -58,7 +74,9 @@ const getTalonProps = props => {
 };
 
 it('returns the correct shape', () => {
-    const { talonProps } = getTalonProps();
+    const { talonProps } = getTalonProps({
+        operations
+    });
 
     expect(talonProps).toMatchSnapshot();
 });

packages/peregrine/lib/talons/CheckoutPage/PaymentInformation/paymentMethods.gql.js

@@ -8,10 +8,33 @@ export const GET_PAYMENT_METHODS = gql`
                 code
                 title
             }
+            selected_payment_method {
+                code
+            }
+        }
+    }
+`;
+
+export const SET_PAYMENT_METHOD_ON_CART = gql`
+    mutation setPaymentMethodOnCart(
+        $cartId: String!
+        $paymentMethod: PaymentMethodInput!
+    ) {
+        setPaymentMethodOnCart(
+            input: { cart_id: $cartId, payment_method: $paymentMethod }
+        ) {
+            cart {
+                id
+                selected_payment_method {
+                    code
+                    title
+                }
+            }
         }
     }
 `;
 
 export default {
-    getPaymentMethodsQuery: GET_PAYMENT_METHODS
+    getPaymentMethodsQuery: GET_PAYMENT_METHODS,
+    setPaymentMethodOnCartMutation: SET_PAYMENT_METHOD_ON_CART
 };

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

@@ -1,4 +1,5 @@
-import { useQuery } from '@apollo/client';
+import { useCallback } from 'react';
+import { useMutation, useQuery } from '@apollo/client';
 import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
 import DEFAULT_OPERATIONS from './paymentMethods.gql';
 import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
@@ -7,7 +8,12 @@ import { useCartContext } from '../../../context/cart';
 
 export const usePaymentMethods = props => {
     const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
-    const { getPaymentMethodsQuery } = operations;
+    const {
+        getPaymentMethodsQuery,
+        setPaymentMethodOnCartMutation
+    } = operations;
+
+    const [setPaymentMethod] = useMutation(setPaymentMethodOnCartMutation);
 
     const [{ cartId }] = useCartContext();
 
@@ -24,12 +30,32 @@ export const usePaymentMethods = props => {
         (data && data.cart.available_payment_methods) || [];
 
     const initialSelectedMethod =
-        (availablePaymentMethods.length && availablePaymentMethods[0].code) ||
-        null;
+        (data && data.cart.selected_payment_method.code) || null;
+
+    const handlePaymentMethodSelection = useCallback(
+        element => {
+            const value = element.target.value;
+
+            setPaymentMethod({
+                variables: {
+                    cartId,
+                    paymentMethod: {
+                        code: value,
+                        braintree: {
+                            payment_method_nonce: value,
+                            is_active_payment_token_enabler: false
+                        }
+                    }
+                }
+            });
+        },
+        [cartId, setPaymentMethod]
+    );
 
     return {
         availablePaymentMethods,
         currentSelectedPaymentMethod,
+        handlePaymentMethodSelection,
         initialSelectedMethod,
         isLoading: loading
     };

packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/paymentMethods.js

@@ -28,6 +28,7 @@ const PaymentMethods = props => {
     const {
         availablePaymentMethods,
         currentSelectedPaymentMethod,
+        handlePaymentMethodSelection,
         initialSelectedMethod,
         isLoading
     } = talonProps;
@@ -65,6 +66,7 @@ const PaymentMethods = props => {
                             label: classes.radio_label
                         }}
                         checked={isSelected}
+                        onChange={handlePaymentMethodSelection}
                     />
                     {renderedComponent}
                 </div>