From 93b889c1d84d3053bb5f3c8cdf43c24d3e12ced4 Mon Sep 17 00:00:00 2001 From: Nagesh Pai <4162931+nagpai@users.noreply.github.com> Date: Thu, 26 Sep 2024 16:14:04 +0530 Subject: [PATCH] Settings - Display erroring bank notice on Settings > Payments > Deposits (#9482) Co-authored-by: Nagesh Pai --- ...ix-8331-bank-error-notice-settings-deposit | 4 + client/settings/deposits/index.js | 67 ++++--- client/settings/deposits/test/index.test.js | 179 ++++++++++++++++-- 3 files changed, 210 insertions(+), 40 deletions(-) create mode 100644 changelog/fix-8331-bank-error-notice-settings-deposit diff --git a/changelog/fix-8331-bank-error-notice-settings-deposit b/changelog/fix-8331-bank-error-notice-settings-deposit new file mode 100644 index 00000000000..ac4891b3056 --- /dev/null +++ b/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. diff --git a/client/settings/deposits/index.js b/client/settings/deposits/index.js index 79b7b81c3a5..05c114f79fd 100644 --- a/client/settings/deposits/index.js +++ b/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 ( @@ -219,31 +228,37 @@ const Deposits = () => {

{ __( 'Deposit bank account', 'woocommerce-payments' ) }

-

- { __( - 'Manage and update your deposit account information to receive payments and deposits.', - 'woocommerce-payments' - ) }{ ' ' } - { accountLink && ( - { - recordEvent( - 'wcpay_settings_deposits_manage_in_stripe_click' - ); - recordEvent( - 'wcpay_account_details_link_clicked', - { source: 'settings-deposits' } - ); - } } - > - { __( - 'Manage in Stripe', - 'woocommerce-payments' - ) } - - ) } -

+ { hasErroredExternalAccount ? ( + + ) : ( +

+ { __( + 'Manage and update your deposit account information to receive payments and deposits.', + 'woocommerce-payments' + ) }{ ' ' } + { accountLink && ( + { + recordEvent( + 'wcpay_settings_deposits_manage_in_stripe_click' + ); + recordEvent( + 'wcpay_account_details_link_clicked', + { source: 'settings-deposits' } + ); + } } + > + { __( + 'Manage in Stripe', + 'woocommerce-payments' + ) } + + ) } +

+ ) } diff --git a/client/settings/deposits/test/index.test.js b/client/settings/deposits/test/index.test.js index 9d0cee18be8..1bd3bb9d101 100644 --- a/client/settings/deposits/test/index.test.js +++ b/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,9 +262,21 @@ 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( @@ -246,17 +284,130 @@ describe( 'Deposits', () => { ); - 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( + + + + ); + + 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( + + + + ); + + 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( + + + + ); + + 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(); } ); } );