Resolve conflict and Merge branch 'develop' into add/1-8482-preset-da…

…te-selector-for-payment-widget

changelog/add-1527-survey-modal-on-deactivation

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add a feedback survey modal upon deactivation.

changelog/add-deposit-currency-param-for-payment-widget

@@ -0,0 +1,5 @@
+Significance: patch
+Type: add
+Comment: Behind feature flag. Adds few changes to support displaying multiple currencies for Payment Activity Widget.
+
+

changelog/as-disable-woopay-rejected-suspended-accounts

@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+Disable WooPay for suspended and rejected accounts.

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.

changelog/fix-klarna-e2e-tests

@@ -0,0 +1,5 @@
+Significance: patch
+Type: dev
+Comment: Fix Klarna E2E Tests.
+
+

changelog/fix-specific-field-checkout-failures-e2e-tests

@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+Fix input-specific credit card errors.

client/checkout/blocks/payment-processor.js

@@ -66,7 +66,7 @@ const PaymentProcessor = ( {
 } ) => {
 	const stripe = useStripe();
 	const elements = useElements();
-	const isPaymentInformationCompleteRef = useRef( false );
+	const hasLoadErrorRef = useRef( false );
 
 	const paymentMethodsConfig = getUPEConfig( 'paymentMethodsConfig' );
 	const isTestMode = getUPEConfig( 'testMode' );
@@ -140,11 +140,11 @@ const PaymentProcessor = ( {
 						return;
 					}
 
-					if ( ! isPaymentInformationCompleteRef.current ) {
+					if ( hasLoadErrorRef.current ) {
 						return {
 							type: 'error',
 							message: __(
-								'Your payment information is incomplete.',
+								'Invalid or missing payment details. Please ensure the provided payment method is correctly entered.',
 								'woocommerce-payments'
 							),
 						};
@@ -237,8 +237,9 @@ const PaymentProcessor = ( {
 		shouldSavePayment
 	);
 
-	const setPaymentInformationCompletionStatus = ( event ) => {
-		isPaymentInformationCompleteRef.current = event.complete;
+	const setHasLoadError = ( event ) => {
+		hasLoadErrorRef.current = true;
+		onLoadError( event );
 	};
 
 	return (
@@ -256,8 +257,7 @@ const PaymentProcessor = ( {
 					shouldSavePayment,
 					paymentMethodsConfig
 				) }
-				onLoadError={ onLoadError }
-				onChange={ setPaymentInformationCompletionStatus }
+				onLoadError={ setHasLoadError }
 				className="wcpay-payment-element"
 			/>
 		</>

client/checkout/blocks/test/payment-processor.test.js

@@ -29,20 +29,12 @@ jest.mock( '@stripe/react-stripe-js', () => ( {
 	useStripe: jest.fn(),
 } ) );
 
-const MockPaymentElement = ( { onChange } ) => {
-	useEffect( () => {
-		onChange( { complete: true } );
-	}, [ onChange ] );
-
-	return null;
-};
-
 describe( 'PaymentProcessor', () => {
 	let mockApi;
 	let mockCreatePaymentMethod;
 	beforeEach( () => {
 		global.wcpay_upe_config = { paymentMethodsConfig: {} };
-		PaymentElement.mockImplementation( MockPaymentElement );
+		PaymentElement.mockImplementation( () => null );
 		mockCreatePaymentMethod = jest
 			.fn()
 			.mockResolvedValue( { paymentMethod: {} } );
@@ -97,8 +89,14 @@ describe( 'PaymentProcessor', () => {
 		).not.toBeInTheDocument();
 	} );
 
-	it( 'should return an error when the payment information is incomplete', async () => {
-		PaymentElement.mockImplementation( () => null );
+	it( 'should return an error if the payment method could not be loaded', async () => {
+		PaymentElement.mockImplementation( ( { onLoadError } ) => {
+			useEffect( () => {
+				onLoadError();
+			}, [ onLoadError ] );
+
+			return null;
+		} );
 		let onPaymentSetupCallback;
 		render(
 			<PaymentProcessor
@@ -113,12 +111,14 @@ describe( 'PaymentProcessor', () => {
 				fingerprint=""
 				shouldSavePayment={ false }
 				upeMethods={ { card: 'woocommerce_payments' } }
+				onLoadError={ jest.fn() }
 			/>
 		);
 
 		expect( await onPaymentSetupCallback() ).toEqual( {
 			type: 'error',
-			message: 'Your payment information is incomplete.',
+			message:
+				'Invalid or missing payment details. Please ensure the provided payment method is correctly entered.',
 		} );
 		expect( mockCreatePaymentMethod ).not.toHaveBeenCalled();
 	} );

client/checkout/classic/payment-processing.js

@@ -39,7 +39,7 @@ for ( const paymentMethodType in getUPEConfig( 'paymentMethodsConfig' ) ) {
 	gatewayUPEComponents[ paymentMethodType ] = {
 		elements: null,
 		upeElement: null,
-		isPaymentInformationComplete: false,
+		hasLoadError: false,
 	};
 }
 
@@ -406,11 +406,9 @@ export async function mountStripePaymentElement( api, domElement ) {
 		gatewayUPEComponents[ paymentMethodType ].upeElement ||
 		( await createStripePaymentElement( api, paymentMethodType ) );
 	upeElement.mount( domElement );
-	upeElement.on( 'change', ( e ) => {
-		gatewayUPEComponents[ paymentMethodType ].isPaymentInformationComplete =
-			e.complete;
-	} );
 	upeElement.on( 'loaderror', ( e ) => {
+		// setting the flag to true to prevent the form from being submitted.
+		gatewayUPEComponents[ paymentMethodType ].hasLoadError = true;
 		// unset any styling to ensure the WC error message wrapper can take more width.
 		domElement.style.padding = '0';
 		// creating a new element to be added to the DOM, so that the message can be displayed.
@@ -524,15 +522,14 @@ export const processPayment = (
 		try {
 			await blockUI( $form );
 
-			const {
-				elements,
-				isPaymentInformationComplete,
-			} = gatewayUPEComponents[ paymentMethodType ];
+			const { elements, hasLoadError } = gatewayUPEComponents[
+				paymentMethodType
+			];
 
-			if ( ! isPaymentInformationComplete ) {
+			if ( hasLoadError ) {
 				throw new Error(
 					__(
-						'Your payment information is incomplete.',
+						'Invalid or missing payment details. Please ensure the provided payment method is correctly entered.',
 						'woocommerce-payments'
 					)
 				);

client/checkout/classic/test/payment-processing.test.js

@@ -76,14 +76,6 @@ const mockCreateFunction = jest.fn( () => ( {
 		eventHandlersFromElementsCreate[ event ].push( handler );
 	},
 } ) );
-const callAllCreateHandlersWith = ( event, ...args ) => {
-	eventHandlersFromElementsCreate[ event ]?.forEach( ( handler ) => {
-		handler.apply( null, args );
-	} );
-};
-const markAllPaymentElementsAsComplete = () => {
-	callAllCreateHandlersWith( 'change', { complete: true } );
-};
 
 const mockSubmit = jest.fn( () => ( {
 	then: jest.fn(),
@@ -396,7 +388,6 @@ describe( 'Payment processing', () => {
 		mockDomElement.dataset.paymentMethodType = 'card';
 
 		await mountStripePaymentElement( apiMock, mockDomElement );
-		markAllPaymentElementsAsComplete();
 
 		const mockJqueryForm = {
 			submit: jest.fn(),
@@ -443,7 +434,6 @@ describe( 'Payment processing', () => {
 		mockDomElement.dataset.paymentMethodType = 'card';
 
 		await mountStripePaymentElement( apiMock, mockDomElement );
-		markAllPaymentElementsAsComplete();
 
 		const checkoutForm = {
 			submit: jest.fn(),
@@ -487,7 +477,6 @@ describe( 'Payment processing', () => {
 		mockDomElement.dataset.paymentMethodType = 'card';
 
 		await mountStripePaymentElement( apiMock, mockDomElement );
-		markAllPaymentElementsAsComplete();
 
 		const checkoutForm = {
 			submit: jest.fn(),
@@ -527,7 +516,6 @@ describe( 'Payment processing', () => {
 		mockDomElement.dataset.paymentMethodType = 'card';
 
 		await mountStripePaymentElement( apiMock, mockDomElement );
-		markAllPaymentElementsAsComplete();
 
 		const checkoutForm = {
 			submit: jest.fn(),
@@ -564,7 +552,6 @@ describe( 'Payment processing', () => {
 		mockDomElement.dataset.paymentMethodType = 'card';
 
 		await mountStripePaymentElement( apiMock, mockDomElement );
-		markAllPaymentElementsAsComplete();
 
 		const checkoutForm = {
 			submit: jest.fn(),
@@ -599,7 +586,6 @@ describe( 'Payment processing', () => {
 		mockDomElement.dataset.paymentMethodType = 'card';
 
 		await mountStripePaymentElement( apiMock, mockDomElement );
-		markAllPaymentElementsAsComplete();
 
 		const addPaymentMethodForm = {
 			submit: jest.fn(),

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();
+		}
 	}
 };

client/components/payment-activity/index.tsx

@@ -214,6 +214,9 @@ const PaymentActivity: React.FC = () => {
 	};
 
 	const { paymentActivityData, isLoading } = usePaymentActivityData( {
+		// In future this will be bound to currency picker via useSelectedCurrency().
+		// Can hard-code other store settings to test.
+		currency: wcpaySettings.accountDefaultCurrency,
 		date_start: dateRangeState.start
 			? dateRangeState.start.format( 'YYYY-MM-DDTHH:mm:ss' )
 			: '',

client/data/payment-activity/test/hooks.test.ts

@@ -34,6 +34,7 @@ describe( 'usePaymentActivityData', () => {
 		);
 
 		const result = usePaymentActivityData( {
+			currency: 'jpy',
 			date_start: '2021-01-01',
 			date_end: '2021-01-31',
 			timezone: 'UTC',