Fall back to credit card when a payment method is toggled off (#8909)

changelog/fix-fallback-to-cc-when-hiding-pm

@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+Fall back to credit card as default payment method when a payment method is toggled off.

client/checkout/utils/test/upe.test.js

@@ -10,6 +10,7 @@ import {
 	getSelectedUPEGatewayPaymentMethod,
 	isUsingSavedPaymentMethod,
 	dispatchChangeEventFor,
+	togglePaymentMethodForCountry,
 } from '../upe';
 import { getPaymentMethodsConstants } from '../../constants';
 import { getUPEConfig } from 'wcpay/utils/checkout';
@@ -125,6 +126,100 @@ describe( 'UPE checkout utils', () => {
 		} );
 	} );
 
+	describe( 'togglePaymentMethodForCountry', () => {
+		let container;
+
+		beforeAll( () => {
+			container = document.createElement( 'div' );
+			container.innerHTML = `
+				<select id="billing_country">
+					<option value="US">United States</option>
+					<option value="BE">Belgium</option>
+				</select>
+				<ul class="wc_payment_methods payment_methods methods">
+					<li class="wc_payment_method payment_method_woocommerce_payments_card" data-payment-method-type="card">
+						<input id="payment_method_woocommerce_payments" type="radio" class="input-radio">
+					</li>
+					<li class="wc_payment_method payment_method_woocommerce_payments_bancontact" data-payment-method-type="bancontact">
+						<input id="payment_method_woocommerce_payments_bancontact" type="radio" class="input-radio">
+					</li>
+				</ul>
+			`;
+			document.body.appendChild( container );
+		} );
+
+		afterAll( () => {
+			document.body.removeChild( container );
+			container = null;
+		} );
+
+		beforeEach( () => {
+			jest.clearAllMocks();
+			getUPEConfig.mockImplementation( ( argument ) => {
+				if ( argument === 'paymentMethodsConfig' ) {
+					return {
+						card: { countries: [ 'US' ] },
+						bancontact: { countries: [ 'BE' ] },
+					};
+				}
+
+				if ( argument === 'gatewayId' ) {
+					return 'woocommerce_payments';
+				}
+			} );
+			window.wcpayCustomerData = { billing_country: 'BE' };
+		} );
+
+		afterEach( () => {
+			// document.getElementById('billing_country').value = '';
+			window.wcpayCustomerData = null;
+		} );
+
+		it( 'should show payment method if country is supported', () => {
+			const upeElement = document.querySelector(
+				'.payment_method_woocommerce_payments_card'
+			);
+			document.getElementById( 'billing_country' ).value = 'US';
+
+			togglePaymentMethodForCountry( upeElement );
+
+			expect( upeElement.style.display ).toBe( 'block' );
+		} );
+
+		it( 'should hide payment method if country is not supported', () => {
+			const upeElement = document.querySelector(
+				'.payment_method_woocommerce_payments_card'
+			);
+			document.getElementById( 'billing_country' ).value = 'BE';
+
+			togglePaymentMethodForCountry( upeElement );
+
+			expect( upeElement.style.display ).toBe( 'none' );
+		} );
+
+		it( 'should fall back to card as the default payment method if the selected payment method is toggled off', () => {
+			const input = document.querySelector(
+				'#payment_method_woocommerce_payments_bancontact'
+			);
+			input.checked = true;
+
+			const upeElement = document.querySelector(
+				'.payment_method_woocommerce_payments_bancontact'
+			);
+			document.getElementById( 'billing_country' ).value = 'US';
+
+			const cardPaymentMethod = document.querySelector(
+				'#payment_method_woocommerce_payments'
+			);
+			jest.spyOn( cardPaymentMethod, 'click' );
+
+			togglePaymentMethodForCountry( upeElement );
+
+			expect( upeElement.style.display ).toBe( 'none' );
+			expect( cardPaymentMethod.click ).toHaveBeenCalled();
+		} );
+	} );
+
 	describe( 'getUPESettings', () => {
 		afterEach( () => {
 			const checkboxElement = document.getElementById(

client/checkout/utils/upe.js

@@ -311,6 +311,7 @@ export const togglePaymentMethodForCountry = ( upeElement ) => {
 	const paymentMethodType = upeElement.dataset.paymentMethodType;
 	const supportedCountries =
 		paymentMethodsConfig[ paymentMethodType ].countries;
+	const selectedPaymentMethod = getSelectedUPEGatewayPaymentMethod();
 
 	/* global wcpayCustomerData */
 	// in the case of "pay for order", there is no "billing country" input, so we need to rely on backend data.
@@ -326,5 +327,11 @@ export const togglePaymentMethodForCountry = ( upeElement ) => {
 		upeContainer.style.display = 'block';
 	} else {
 		upeContainer.style.display = 'none';
+		// if the toggled off payment method was selected, we need to fall back to credit card
+		if ( paymentMethodType === selectedPaymentMethod ) {
+			document
+				.querySelector( '#payment_method_woocommerce_payments' )
+				.click();
+		}
 	}
 };