Add failure message

client/deposits/details/index.tsx

@@ -32,12 +32,13 @@ import { CopyButton } from 'components/copy-button';
 import Page from 'components/page';
 import ErrorBoundary from 'components/error-boundary';
 import { TestModeNotice } from 'components/test-mode-notice';
+import BannerNotice from 'components/banner-notice';
 import InlineNotice from 'components/inline-notice';
 import {
 	formatCurrency,
 	formatExplicitCurrency,
 } from 'multi-currency/interface/functions';
-import { depositStatusLabels } from '../strings';
+import { depositStatusLabels, payoutFailureMessages } from '../strings';
 import './style.scss';
 import { formatDateTimeFromString } from 'wcpay/utils/date-time';
 
@@ -227,6 +228,19 @@ export const DepositOverview: React.FC< DepositOverviewProps > = ( {
 					] }
 				</SummaryList>
 			) }
+			{ deposit.status === 'failed' && (
+				<BannerNotice
+					status="error"
+					isDismissible={ false }
+					key="payout-failure-notice"
+				>
+					<strong>
+						{ __( 'Failure reason: ', 'woocommerce-payments' ) }
+					</strong>
+					{ payoutFailureMessages[ deposit.failure_code ] ||
+						__( 'Unknown', 'woocommerce-payments' ) }
+				</BannerNotice>
+			) }
 			<Card>
 				<CardHeader>
 					<Text size={ 16 } weight={ 600 }>

client/deposits/strings.ts

@@ -9,7 +9,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 
-import type { DepositStatus } from 'wcpay/types/deposits';
+import type { DepositStatus, PayoutFailureCode } from 'wcpay/types/deposits';
 
 export const displayType = {
 	deposit: __( 'Payout', 'woocommerce-payments' ),
@@ -36,7 +36,7 @@ export const depositStatusLabels: Record<
 /**
  * Mapping of payout failure code to display string.
  */
-export const payoutFailureCodeDisplayStrings: Record< string, string > = {
+export const payoutFailureMessages: Record< PayoutFailureCode, string > = {
 	insufficient_funds: __(
 		'Your account has insufficient funds to cover the transfer.',
 		'woocommerce-payments'

client/types/deposits.d.ts

@@ -32,6 +32,7 @@ export interface CachedDeposit {
 	bankAccount: string;
 	automatic: boolean;
 	bank_reference_key: string;
+	failure_code: PayoutFailureCode;
 }
 
 export interface DepositsSummaryCache {
@@ -52,3 +53,29 @@ export type DepositStatus =
 	| 'in_transit'
 	| 'canceled'
 	| 'failed';
+
+export type PayoutFailureCode =
+	| 'insufficient_funds'
+	| 'bank_account_restricted'
+	| 'debit_not_authorized'
+	| 'invalid_card'
+	| 'declined'
+	| 'invalid_transaction'
+	| 'refer_to_card_issuer'
+	| 'unsupported_card'
+	| 'lost_or_stolen_card'
+	| 'invalid_issuer'
+	| 'expired_card'
+	| 'could_not_process'
+	| 'invalid_account_number'
+	| 'incorrect_account_holder_name'
+	| 'account_closed'
+	| 'no_account'
+	| 'exceeds_amount_limit'
+	| 'account_frozen'
+	| 'issuer_unavailable'
+	| 'invalid_currency'
+	| 'incorrect_account_type'
+	| 'incorrect_account_holder_details'
+	| 'bank_ownership_changed'
+	| 'exceeds_count_limit';