feat: GooglePay live account test mode notice (#10429)

Author: frosso

changelog/feat-google-pay-test-mode-live-account-compatibility-notice

@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+feat: add compatibility notice for Google Pay with live mode accounts.

client/additional-methods-setup/upe-preview-methods-selector/test/add-payment-methods-task.test.js renamed to client/additional-methods-setup/upe-preview-methods-selector/__tests__/add-payment-methods-task.test.js

@@ -10,6 +10,7 @@ import WizardTaskContext from '../../wizard/task/context';
 import SetupComplete from '../setup-complete-task';
 import WizardContext from '../../wizard/wrapper/context';
 import { useEnabledPaymentMethodIds } from '../../../data';
+import WCPaySettingsContext from 'wcpay/settings/wcpay-settings-context';
 
 jest.mock( '@wordpress/data', () => ( {
 	useDispatch: jest.fn().mockReturnValue( { updateOptions: jest.fn() } ),
@@ -18,16 +19,24 @@ jest.mock( '../../../data', () => ( {
 	useEnabledPaymentMethodIds: jest.fn(),
 } ) );
 
+const renderWithSettingsProvider = ( ui ) =>
+	render(
+		<WCPaySettingsContext.Provider value={ global.wcpaySettings }>
+			{ ui }
+		</WCPaySettingsContext.Provider>
+	);
+
 describe( 'SetupComplete', () => {
 	beforeEach( () => {
 		useEnabledPaymentMethodIds.mockReturnValue( [
 			[ 'card', 'bancontact', 'eps', 'ideal', 'p24', 'sepa_debit' ],
 			() => null,
 		] );
+		global.wcpaySettings = { featureFlags: { multiCurrency: true } };
 	} );
 
 	it( 'renders setup complete messaging when context value is undefined', () => {
-		render(
+		renderWithSettingsProvider(
 			<WizardContext.Provider value={ { completedTasks: {} } }>
 				<WizardTaskContext.Provider value={ { isActive: true } }>
 					<SetupComplete />
@@ -41,9 +50,11 @@ describe( 'SetupComplete', () => {
 	} );
 
 	it( 'renders setup complete messaging when context value is `true`', () => {
-		render(
+		renderWithSettingsProvider(
 			<WizardContext.Provider
-				value={ { completedTasks: { 'add-payment-methods': true } } }
+				value={ {
+					completedTasks: { 'add-payment-methods': true },
+				} }
 			>
 				<WizardTaskContext.Provider value={ { isActive: true } }>
 					<SetupComplete />
@@ -57,7 +68,7 @@ describe( 'SetupComplete', () => {
 	} );
 
 	it( 'renders setup complete messaging when context value says that methods have not changed', () => {
-		render(
+		renderWithSettingsProvider(
 			<WizardContext.Provider
 				value={ {
 					completedTasks: {
@@ -90,7 +101,7 @@ describe( 'SetupComplete', () => {
 			[ 'card', 'ideal' ],
 			() => null,
 		] );
-		render(
+		renderWithSettingsProvider(
 			<WizardContext.Provider
 				value={ {
 					completedTasks: {
@@ -123,7 +134,7 @@ describe( 'SetupComplete', () => {
 			[ 'card', 'ideal' ],
 			() => null,
 		] );
-		render(
+		renderWithSettingsProvider(
 			<WizardContext.Provider
 				value={ {
 					completedTasks: {
@@ -156,7 +167,7 @@ describe( 'SetupComplete', () => {
 			[ 'card', ...additionalMethods ],
 			() => null,
 		] );
-		render(
+		renderWithSettingsProvider(
 			<WizardContext.Provider
 				value={ {
 					completedTasks: {

client/additional-methods-setup/upe-preview-methods-selector/test/currency-information-for-methods.test.js renamed to client/additional-methods-setup/upe-preview-methods-selector/__tests__/currency-information-for-methods.test.js

@@ -205,7 +205,7 @@ export const DepositFailureNotice: React.FC< {
 	/**
 	 * The link to update the account details.
 	 */
-	updateAccountLink: string;
+	updateAccountLink?: string;
 } > = ( { updateAccountLink } ) => {
 	const accountLinkWithSource = updateAccountLink
 		? addQueryArgs( updateAccountLink, {

client/additional-methods-setup/upe-preview-methods-selector/test/setup-complete-task.test.js renamed to client/additional-methods-setup/upe-preview-methods-selector/__tests__/setup-complete-task.test.js

@@ -2,33 +2,41 @@
 /**
  * External dependencies
  */
-import React, { ReactNode } from 'react';
+import React from 'react';
 import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { act } from 'react-dom/test-utils';
 
 /**
  * Internal dependencies
  */
 import PaymentMethodsCheckboxes from '..';
 import PaymentMethodsCheckbox from '../payment-method-checkbox';
 import { upeCapabilityStatuses } from '../../../additional-methods-setup/constants';
-import { act } from 'react-dom/test-utils';
+import WCPaySettingsContext from 'wcpay/settings/wcpay-settings-context';
 
 jest.mock( '@woocommerce/components', () => {
 	return {
-		Pill: ( {
-			className,
-			children,
-		}: {
-			className: string;
-			children: ReactNode;
-		} ): React.ReactElement => (
+		Pill: ( { className, children } ) => (
 			<span className={ className }>{ children }</span>
 		),
 	};
 } );
 
+const renderWithSettingsProvider = ( ui ) =>
+	render(
+		<WCPaySettingsContext.Provider value={ global.wcpaySettings }>
+			{ ui }
+		</WCPaySettingsContext.Provider>
+	);
+
 describe( 'PaymentMethodsCheckboxes', () => {
+	beforeEach( () => {
+		global.wcpaySettings = {
+			accountFees: {},
+		};
+	} );
+
 	it( 'triggers the onChange when clicking the checkbox', () => {
 		const handleChange = jest.fn();
 
@@ -40,14 +48,14 @@ describe( 'PaymentMethodsCheckboxes', () => {
 			[ 'sepa_debit', false ],
 		];
 
-		render(
+		renderWithSettingsProvider(
 			<PaymentMethodsCheckboxes>
-				{ upeMethods.map( ( key ) => (
+				{ upeMethods.map( ( [ name, checked ] ) => (
 					<PaymentMethodsCheckbox
-						key={ key[ 0 ] as React.Key }
+						key={ name }
 						onChange={ handleChange }
-						checked={ key[ 1 ] as boolean }
-						name={ key[ 0 ] as string }
+						checked={ checked }
+						name={ name }
 						status={ upeCapabilityStatuses.ACTIVE }
 						fees={ '' }
 						required={ false }
@@ -95,7 +103,7 @@ describe( 'PaymentMethodsCheckboxes', () => {
 
 	it( 'can click the checkbox on payment methods with pending statuses', () => {
 		const handleChange = jest.fn();
-		render(
+		renderWithSettingsProvider(
 			<PaymentMethodsCheckboxes>
 				<PaymentMethodsCheckbox
 					key={ 'ideal' }
@@ -126,7 +134,7 @@ describe( 'PaymentMethodsCheckboxes', () => {
 
 	it( 'shows the required label on payment methods which are required', () => {
 		const handleChange = jest.fn();
-		const page = render(
+		const page = renderWithSettingsProvider(
 			<PaymentMethodsCheckboxes>
 				<PaymentMethodsCheckbox
 					key={ 'card' }
@@ -148,7 +156,7 @@ describe( 'PaymentMethodsCheckboxes', () => {
 
 	it( 'shows the disabled notice pill on payment methods with disabled statuses', () => {
 		const handleChange = jest.fn();
-		const page = render(
+		const page = renderWithSettingsProvider(
 			<PaymentMethodsCheckboxes>
 				<PaymentMethodsCheckbox
 					key={ 'ideal' }
@@ -170,7 +178,7 @@ describe( 'PaymentMethodsCheckboxes', () => {
 
 	it( 'can not click the payment methods checkbox that are locked', () => {
 		const handleChange = jest.fn();
-		render(
+		renderWithSettingsProvider(
 			<PaymentMethodsCheckboxes>
 				<PaymentMethodsCheckbox
 					key={ 'card' }
@@ -195,7 +203,7 @@ describe( 'PaymentMethodsCheckboxes', () => {
 
 	it( 'can not click the payment methods checkbox with disabled statuses', () => {
 		const handleChange = jest.fn();
-		render(
+		renderWithSettingsProvider(
 			<PaymentMethodsCheckboxes>
 				<PaymentMethodsCheckbox
 					key={ 'ideal' }
@@ -220,7 +228,7 @@ describe( 'PaymentMethodsCheckboxes', () => {
 
 	it( "doesn't show the disabled notice pill on payment methods with active and unrequested statuses", () => {
 		const handleChange = jest.fn();
-		render(
+		renderWithSettingsProvider(
 			<PaymentMethodsCheckboxes>
 				<PaymentMethodsCheckbox
 					key={ 'ideal' }

client/components/deposits-overview/deposit-notices.tsx

@@ -13,11 +13,16 @@ declare global {
 		isSubscriptionsActive: boolean;
 		featureFlags: {
 			customSearch: boolean;
+			woopay: boolean;
+			documents: boolean;
+			woopayExpressCheckout: boolean;
 			isAuthAndCaptureEnabled: boolean;
 			paymentTimeline: boolean;
 			isDisputeIssuerEvidenceEnabled: boolean;
 			isPaymentOverviewWidgetEnabled?: boolean;
+			multiCurrency?: boolean;
 		};
+		accountFees: Record< string, any >;
 		fraudServices: unknown[];
 		testMode: boolean;
 		testModeOnboarding: boolean;
@@ -26,9 +31,10 @@ declare global {
 		isJetpackIdcActive: boolean;
 		isAccountConnected: boolean;
 		isAccountValid: boolean;
-		accountStatus: {
+		accountStatus: Partial< {
 			email?: string;
 			created: string;
+			isLive?: boolean;
 			error?: boolean;
 			status?: string;
 			country?: string;
@@ -69,7 +75,7 @@ declare global {
 				declineOnAVSFailure: boolean;
 				declineOnCVCFailure: boolean;
 			};
-		};
+		} >;
 		accountLoans: {
 			has_active_loan: boolean;
 			has_past_loans: boolean;

client/components/payment-methods-checkboxes/test/index.test.tsx renamed to client/components/payment-methods-checkboxes/__tests__/index.test.js

@@ -103,7 +103,7 @@ export const getTasks = ( {
 			getUpdateBusinessDetailsTask(
 				errorMessages,
 				status ?? '',
-				accountLink,
+				accountLink ?? '',
 				Number( currentDeadline ) ?? null,
 				pastDue ?? false,
 				detailsSubmitted ?? true

client/globals.d.ts

@@ -21,9 +21,9 @@ export const getVerifyBankAccountTask = (): any => {
 		progressiveOnboarding: {
 			isEnabled: poEnabled,
 			isComplete: poComplete,
-			tpv,
+			tpv = 0,
 			firstTransactionDate: firstPaymentDate,
-		},
+		} = {},
 		created: createdDate,
 	} = wcpaySettings.accountStatus;