Settings - Display erroring bank notice on Settings > Payments > Depo…

…sits (#9482)

Co-authored-by: Nagesh Pai <[email protected]>

changelog/fix-8331-bank-error-notice-settings-deposit

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Show a notice in Payments > Settings > Deposits if there is an error with the bank account.

client/settings/deposits/index.js

@@ -6,11 +6,11 @@ import { select } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { Card, SelectControl, ExternalLink } from '@wordpress/components';
 import interpolateComponents from '@automattic/interpolate-components';
-import { STORE_NAME } from 'wcpay/data/constants';
 
 /**
  * Internal dependencies
  */
+import { STORE_NAME } from 'wcpay/data/constants';
 import { getDepositMonthlyAnchorLabel } from 'wcpay/deposits/utils';
 import WCPaySettingsContext from '../wcpay-settings-context';
 import CardBody from '../card-body';
@@ -21,10 +21,12 @@ import {
 	useDepositStatus,
 	useCompletedWaitingPeriod,
 	useDepositRestrictions,
+	useAllDepositsOverviews,
 } from '../../data';
 import './style.scss';
 import { recordEvent } from 'tracks';
 import InlineNotice from 'components/inline-notice';
+import { DepositFailureNotice } from 'components/deposits-overview/deposit-notices';
 
 const daysOfWeek = [
 	{ label: __( 'Monday', 'woocommerce-payments' ), value: 'monday' },
@@ -208,6 +210,13 @@ const Deposits = () => {
 		accountStatus: { accountLink },
 	} = useContext( WCPaySettingsContext );
 
+	const { overviews } = useAllDepositsOverviews();
+
+	const hasErroredExternalAccount =
+		overviews.account?.default_external_accounts?.some(
+			( externalAccount ) => externalAccount.status === 'errored'
+		) ?? false;
+
 	return (
 		<Card className="deposits">
 			<CardBody>
@@ -219,31 +228,37 @@ const Deposits = () => {
 					<h4>
 						{ __( 'Deposit bank account', 'woocommerce-payments' ) }
 					</h4>
-					<p className="deposits__bank-information-help">
-						{ __(
-							'Manage and update your deposit account information to receive payments and deposits.',
-							'woocommerce-payments'
-						) }{ ' ' }
-						{ accountLink && (
-							<ExternalLink
-								href={ accountLink }
-								onClick={ () => {
-									recordEvent(
-										'wcpay_settings_deposits_manage_in_stripe_click'
-									);
-									recordEvent(
-										'wcpay_account_details_link_clicked',
-										{ source: 'settings-deposits' }
-									);
-								} }
-							>
-								{ __(
-									'Manage in Stripe',
-									'woocommerce-payments'
-								) }
-							</ExternalLink>
-						) }
-					</p>
+					{ hasErroredExternalAccount ? (
+						<DepositFailureNotice
+							updateAccountLink={ accountLink }
+						/>
+					) : (
+						<p className="deposits__bank-information-help">
+							{ __(
+								'Manage and update your deposit account information to receive payments and deposits.',
+								'woocommerce-payments'
+							) }{ ' ' }
+							{ accountLink && (
+								<ExternalLink
+									href={ accountLink }
+									onClick={ () => {
+										recordEvent(
+											'wcpay_settings_deposits_manage_in_stripe_click'
+										);
+										recordEvent(
+											'wcpay_account_details_link_clicked',
+											{ source: 'settings-deposits' }
+										);
+									} }
+								>
+									{ __(
+										'Manage in Stripe',
+										'woocommerce-payments'
+									) }
+								</ExternalLink>
+							) }
+						</p>
+					) }
 				</div>
 			</CardBody>
 		</Card>

client/settings/deposits/test/index.test.js

@@ -16,9 +16,22 @@ import {
 	useDepositScheduleInterval,
 	useDepositScheduleWeeklyAnchor,
 	useDepositScheduleMonthlyAnchor,
+	useAllDepositsOverviews,
 } from 'wcpay/data';
 
-jest.mock( '@wordpress/data' );
+jest.mock( '@wordpress/data', () => ( {
+	createRegistryControl: jest.fn(),
+	dispatch: jest.fn( () => ( {
+		setIsMatching: jest.fn(),
+		onLoad: jest.fn(), // Add this line
+		onHistoryChange: jest.fn(),
+	} ) ),
+	registerStore: jest.fn(),
+	select: jest.fn(),
+	useDispatch: jest.fn( () => ( { createNotice: jest.fn() } ) ),
+	withDispatch: jest.fn( () => jest.fn() ),
+	withSelect: jest.fn( () => jest.fn() ),
+} ) );
 
 jest.mock( 'wcpay/data', () => ( {
 	useAccountStatementDescriptor: jest.fn(),
@@ -32,6 +45,7 @@ jest.mock( 'wcpay/data', () => ( {
 	useDepositScheduleInterval: jest.fn(),
 	useDepositScheduleWeeklyAnchor: jest.fn(),
 	useDepositScheduleMonthlyAnchor: jest.fn(),
+	useAllDepositsOverviews: jest.fn(),
 } ) );
 
 describe( 'Deposits', () => {
@@ -54,6 +68,18 @@ describe( 'Deposits', () => {
 				account_country: 'US',
 			} ),
 		} ) );
+		useAllDepositsOverviews.mockReturnValue( {
+			overviews: {
+				account: {
+					default_external_accounts: [
+						{
+							currency: 'usd',
+							status: 'enabled',
+						},
+					],
+				},
+			},
+		} );
 	} );
 
 	it( 'renders', () => {
@@ -236,27 +262,152 @@ describe( 'Deposits', () => {
 		}
 	} );
 
-	it( 'renders the monthly offset select', () => {
-		useDepositScheduleInterval.mockReturnValue( [ 'monthly', jest.fn() ] );
-		useDepositScheduleMonthlyAnchor.mockReturnValue( [ 14, jest.fn() ] );
+	it( 'renders the deposit failure notice if there is an errored bank account', () => {
+		useDepositStatus.mockReturnValue( 'enabled' );
+		useCompletedWaitingPeriod.mockReturnValue( true );
+		useAllDepositsOverviews.mockReturnValue( {
+			overviews: {
+				account: {
+					default_external_accounts: [
+						{
+							currency: 'usd',
+							status: 'errored',
+						},
+					],
+				},
+			},
+		} );
 
 		render(
 			<WCPaySettingsContext.Provider value={ settingsContext }>
 				<Deposits />
 			</WCPaySettingsContext.Provider>
 		);
 
-		const frequencySelect = screen.getByLabelText( /Frequency/ );
-		expect( frequencySelect ).toHaveValue( 'monthly' );
+		const depositsMessage = screen.getByText(
+			/Deposits are currently paused because a recent deposit failed./,
+			{
+				ignore: '.a11y-speak-region',
+			}
+		);
+		expect( depositsMessage ).toBeInTheDocument();
 
-		const monthlyAnchorSelect = screen.getByLabelText( /Date/ );
-		expect( monthlyAnchorSelect ).toHaveValue( '14' );
+		expect(
+			screen.queryByText(
+				/Manage and update your deposit account information to receive payments and deposits./,
+				{
+					ignore: '.a11y-speak-region',
+				}
+			)
+		).toBeFalsy();
+	} );
 
-		const monthlyAnchors = [ /^1st/i, /^28th/i, /Last day of the month/i ];
-		for ( const anchor of monthlyAnchors ) {
-			within( monthlyAnchorSelect ).getByRole( 'option', {
-				name: anchor,
-			} );
-		}
+	it( 'does not render the deposit failure notice if there is no errored bank account', () => {
+		render(
+			<WCPaySettingsContext.Provider value={ settingsContext }>
+				<Deposits />
+			</WCPaySettingsContext.Provider>
+		);
+
+		expect(
+			screen.queryByText(
+				/Deposits are currently paused because a recent deposit failed./,
+				{
+					ignore: '.a11y-speak-region',
+				}
+			)
+		).toBeFalsy();
+
+		const depositsMessage = screen.getByText(
+			/Manage and update your deposit account information to receive payments and deposits./,
+			{
+				ignore: '.a11y-speak-region',
+			}
+		);
+		expect( depositsMessage ).toBeInTheDocument();
+	} );
+
+	it( 'renders deposit failure notice with at least one errored default account in multicurrency', () => {
+		useAllDepositsOverviews.mockReturnValue( {
+			overviews: {
+				account: {
+					default_external_accounts: [
+						{
+							currency: 'usd',
+							status: 'errored',
+						},
+						{
+							currency: 'eur',
+							status: 'enabled',
+						},
+					],
+				},
+			},
+		} );
+
+		render(
+			<WCPaySettingsContext.Provider value={ settingsContext }>
+				<Deposits />
+			</WCPaySettingsContext.Provider>
+		);
+
+		const depositsMessage = screen.getByText(
+			/Deposits are currently paused because a recent deposit failed./,
+			{
+				ignore: '.a11y-speak-region',
+			}
+		);
+		expect( depositsMessage ).toBeInTheDocument();
+
+		expect(
+			screen.queryByText(
+				/Manage and update your deposit account information to receive payments and deposits./,
+				{
+					ignore: '.a11y-speak-region',
+				}
+			)
+		).toBeFalsy();
+	} );
+
+	it( 'renders deposit failure notice with all enabled default accounts in multicurrency', () => {
+		useAllDepositsOverviews.mockReturnValue( {
+			overviews: {
+				account: {
+					default_external_accounts: [
+						{
+							currency: 'usd',
+							status: 'enabled',
+						},
+						{
+							currency: 'eur',
+							status: 'enabled',
+						},
+					],
+				},
+			},
+		} );
+
+		render(
+			<WCPaySettingsContext.Provider value={ settingsContext }>
+				<Deposits />
+			</WCPaySettingsContext.Provider>
+		);
+
+		expect(
+			screen.queryByText(
+				/Deposits are currently paused because a recent deposit failed./,
+				{
+					ignore: '.a11y-speak-region',
+				}
+			)
+		).toBeFalsy();
+
+		const depositsMessage = screen.getByText(
+			/Manage and update your deposit account information to receive payments and deposits./,
+			{
+				ignore: '.a11y-speak-region',
+			}
+		);
+		expect( depositsMessage ).toBeInTheDocument();
 	} );
 } );