Adds notice that deposits are paused to Deposits Listing screen

changelog/add-8332-deposits-list-failure-notice

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Added a notice to the Deposits Listing screen when deposits are paused

client/deposits/index.tsx

@@ -5,11 +5,14 @@
  */
 import React, { useState } from 'react';
 import { useDispatch } from '@wordpress/data';
+import { ExternalLink } from '@wordpress/components';
 
 /**
  * Internal dependencies.
  */
 import Page from 'components/page';
+import interpolateComponents from '@automattic/interpolate-components';
+import { __ } from '@wordpress/i18n';
 import { TestModeNotice } from 'components/test-mode-notice';
 import BannerNotice from 'components/banner-notice';
 import DepositSchedule from 'components/deposits-overview/deposit-schedule';
@@ -38,10 +41,24 @@ const useNextDepositNoticeState = () => {
 	};
 };
 
-const NextDepositNotice: React.FC = () => {
+const useAccountStatus = () => {
 	const {
 		overviews: { account },
 	} = useAllDepositsOverviews();
+
+	const hasErroredExternalAccount =
+		account?.default_external_accounts?.some(
+			( externalAccount ) => externalAccount.status === 'errored'
+		) ?? false;
+
+	return {
+		account,
+		hasErroredExternalAccount,
+	};
+};
+
+const NextDepositNotice: React.FC = () => {
+	const { account, hasErroredExternalAccount } = useAccountStatus();
 	const {
 		isNextDepositNoticeDismissed,
 		handleDismissNextDepositNotice,
@@ -63,7 +80,8 @@ const NextDepositNotice: React.FC = () => {
 		! hasCompletedWaitingPeriod ||
 		! account ||
 		isNextDepositNoticeDismissed ||
-		! hasScheduledDeposits
+		! hasScheduledDeposits ||
+		hasErroredExternalAccount
 	) {
 		return null;
 	}
@@ -79,6 +97,33 @@ const NextDepositNotice: React.FC = () => {
 	);
 };
 
+const DepositFailureNotice: React.FC = () => {
+	const { hasErroredExternalAccount } = useAccountStatus();
+
+	return hasErroredExternalAccount ? (
+		<BannerNotice
+			status="warning"
+			icon
+			className="deposit-failure-notice"
+			isDismissible={ false }
+		>
+			{ interpolateComponents( {
+				mixedString: __(
+					'Deposits are currently paused because a recent deposit failed. Please {{updateLink}}update your bank account details{{/updateLink}}.',
+					'woocommerce-payments'
+				),
+				components: {
+					updateLink: (
+						<ExternalLink
+							href={ wcpaySettings.accountStatus.accountLink }
+						/>
+					),
+				},
+			} ) }
+		</BannerNotice>
+	) : null;
+};
+
 const DepositsPage: React.FC = () => {
 	// pre-fetching the settings.
 	useSettings();
@@ -87,6 +132,7 @@ const DepositsPage: React.FC = () => {
 		<Page>
 			<TestModeNotice currentPage="deposits" />
 			<NextDepositNotice />
+			<DepositFailureNotice />
 			<DepositsList />
 		</Page>
 	);