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

…r” when there is an error with the transaction - Set default/initial payment method - Add tests - Update padding
magento · Oct 3, 2022 · e9a56e4 · e9a56e4
1 parent 21412f3
commit e9a56e4
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 6 deletions.
diff --git a/...ges/peregrine/lib/hooks/useCustomerWishlistSkus/__tests__/useCustomerWishlistSkus.spec.js b/...ges/peregrine/lib/hooks/useCustomerWishlistSkus/__tests__/useCustomerWishlistSkus.spec.js
@@ -49,7 +49,6 @@ test('pre-caches wishlist items', async () => {
         Object {
           "customerWishlistProducts": Array [
             "Dress",
-            "Shirt",
           ],
         }
     `);

diff --git a/...ns/CheckoutPage/PaymentInformation/__tests__/__snapshots__/usePaymentMethods.spec.js.snap b/...ns/CheckoutPage/PaymentInformation/__tests__/__snapshots__/usePaymentMethods.spec.js.snap
@@ -9,7 +9,7 @@ Object {
   ],
   "currentSelectedPaymentMethod": "currentSelectedPaymentMethod",
   "handlePaymentMethodSelection": [Function],
-  "initialSelectedMethod": "braintree",
+  "initialSelectedMethod": "availablePaymentMethod",
   "isLoading": false,
 }
 `;
diff --git a/.../peregrine/lib/talons/CheckoutPage/PaymentInformation/__tests__/usePaymentMethods.spec.js b/.../peregrine/lib/talons/CheckoutPage/PaymentInformation/__tests__/usePaymentMethods.spec.js
@@ -89,3 +89,38 @@ it('returns an empty array for availablePaymentMethods when there is no data', (
     expect(talonProps.availablePaymentMethods).toEqual([]);
     expect(talonProps.initialSelectedMethod).toBeNull();
 });
+
+it('default payment is selected when there is one available payment method', () => {
+    useQuery.mockReturnValueOnce({
+        data: {
+            cart: {
+                available_payment_methods: [{ code: 'availablePaymentMethod' }],
+                selected_payment_method: { code: null }
+            }
+        }
+    });
+
+    const { talonProps } = getTalonProps();
+
+    expect(talonProps.availablePaymentMethods.length).toEqual(1);
+    expect(talonProps.initialSelectedMethod).toEqual('availablePaymentMethod');
+});
+
+it('default payment is not selected when there is more than one available payment method', () => {
+    useQuery.mockReturnValueOnce({
+        data: {
+            cart: {
+                available_payment_methods: [
+                    { code: 'availablePaymentMethod1' },
+                    { code: 'availablePaymentMethod2' }
+                ],
+                selected_payment_method: { code: null }
+            }
+        }
+    });
+
+    const { talonProps } = getTalonProps();
+
+    expect(talonProps.availablePaymentMethods.length).toEqual(2);
+    expect(talonProps.initialSelectedMethod).toBeNull();
+});
diff --git a/packages/peregrine/lib/talons/CheckoutPage/PaymentInformation/usePaymentMethods.js b/packages/peregrine/lib/talons/CheckoutPage/PaymentInformation/usePaymentMethods.js
@@ -29,9 +29,19 @@ export const usePaymentMethods = props => {
     const availablePaymentMethods =
         (data && data.cart.available_payment_methods) || [];
 
-    const initialSelectedMethod =
+    // If there is one payment method, select it by default.
+    // If more than one, none should be selected by default.
+    const defaultPaymentCode =
+        (availablePaymentMethods.length && availablePaymentMethods[0].code) ||
+        null;
+    const selectedPaymentCode =
         (data && data.cart.selected_payment_method.code) || null;
 
+    const initialSelectedMethod =
+        availablePaymentMethods.length > 1
+            ? selectedPaymentCode
+            : defaultPaymentCode;
+
     const handlePaymentMethodSelection = useCallback(
         element => {
             const value = element.target.value;

diff --git a/packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/paymentMethods.module.css b/packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/paymentMethods.module.css
@@ -1,7 +1,7 @@
 .root {
     composes: grid from global;
     composes: p-md from global;
-    composes: pb-xs from global;
+    composes: pb-s from global;
 }
 
 .radio_group {
@@ -14,8 +14,6 @@
     composes: border-subtle from global;
     composes: pb-xs from global;
     composes: pt-xs from global;
-
-    composes: last_pt-0 from global;
 }
 
 /* TODO @TW: cannot compose */