Add failure reason to failed timeline events

changelog/update-5713-failed-orders-should-include-more-info-on-transaction-details-page

@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+Add failure reason to failed payments in the timeline.

client/payment-details/timeline/map-events.js

@@ -30,7 +30,7 @@ import {
 import { formatFee } from 'utils/fees';
 import { getAdminUrl } from 'wcpay/utils';
 import { ShieldIcon } from 'wcpay/icons';
-import { fraudOutcomeRulesetMapping } from './mappings';
+import { fraudOutcomeRulesetMapping, paymentFailureMapping } from './mappings';
 
 /**
  * Creates a timeline item about a payment status change
@@ -772,18 +772,25 @@ const mapEventToTimelineItems = ( event ) => {
 				),
 			];
 		case 'failed':
+			const paymentFailureMessage =
+				paymentFailureMapping[ event.reason ] ||
+				paymentFailureMapping.default;
+
 			return [
 				getStatusChangeTimelineItem(
 					event,
 					__( 'Failed', 'woocommerce-payments' )
 				),
 				getMainTimelineItem(
 					event,
-					stringWithAmount(
-						/* translators: %s is a monetary amount */
-						__( 'A payment of %s failed.', 'woocommerce-payments' ),
-						event.amount,
-						true
+					sprintf(
+						/* translators: %1$s is the payment amount, %2$s is the failure reason message */
+						__(
+							'A payment of %1$s failed: %2$s.',
+							'woocommerce-payments'
+						),
+						formatExplicitCurrency( event.amount, event.currency ),
+						paymentFailureMessage
 					),
 					<CrossIcon className="is-error" />
 				),

client/payment-details/timeline/mappings.ts

@@ -65,3 +65,46 @@ export const fraudOutcomeRulesetMapping = {
 		),
 	},
 };
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const paymentFailureMapping = {
+	card_declined: __(
+		'The card was declined by the bank',
+		'woocommerce-payments'
+	),
+	expired_card: __( 'The card has expired', 'woocommerce-payments' ),
+	incorrect_cvc: __(
+		'The security code is incorrect',
+		'woocommerce-payments'
+	),
+	incorrect_number: __(
+		'The card number is incorrect',
+		'woocommerce-payments'
+	),
+	incorrect_zip: __( 'The postal code is incorrect', 'woocommerce-payments' ),
+	invalid_cvc: __( 'The security code is invalid', 'woocommerce-payments' ),
+	invalid_expiry_month: __(
+		'The expiration month is invalid',
+		'woocommerce-payments'
+	),
+	invalid_expiry_year: __(
+		'The expiration year is invalid',
+		'woocommerce-payments'
+	),
+	invalid_number: __( 'The card number is invalid', 'woocommerce-payments' ),
+	processing_error: __(
+		'An error occurred while processing the card',
+		'woocommerce-payments'
+	),
+	authentication_required: __(
+		'The payment requires authentication',
+		'woocommerce-payments'
+	),
+	insufficient_funds: __(
+		'The card has insufficient funds to complete the purchase',
+		'woocommerce-payments'
+	),
+
+	// Default fallback
+	default: __( 'The payment was declined', 'woocommerce-payments' ),
+};

client/payment-details/timeline/test/__snapshots__/index.js.snap

@@ -933,7 +933,7 @@ exports[`PaymentDetailsTimeline renders correctly (with a mocked Timeline compon
                         </g>
                       </svg>
                       <span>
-                        A payment of $77.00 failed.
+                        A payment of $77.00 failed: The card was declined by the bank.
                       </span>
                     </div>
                     <span

client/payment-details/timeline/test/__snapshots__/map-events.js.snap

@@ -265,7 +265,7 @@ exports[`mapTimelineEvents formats card_declined events 1`] = `
   {
     "body": [],
     "date": 2020-04-01T03:35:13.000Z,
-    "headline": "A payment of $77.00 USD failed.",
+    "headline": "A payment of $77.00 USD failed: The card was declined by the bank.",
     "icon": <CrossIcon
       className="is-error"
     />,

client/payment-details/timeline/test/map-events.js

@@ -662,4 +662,59 @@ describe( 'mapTimelineEvents', () => {
 			).toMatchSnapshot();
 		} );
 	} );
+
+	test( 'formats payment failure events with different error codes', () => {
+		const testCases = [
+			{
+				reason: 'insufficient_funds',
+				expectedMessage:
+					'A payment of $77.00 USD failed: The card has insufficient funds to complete the purchase.',
+			},
+			{
+				reason: 'expired_card',
+				expectedMessage:
+					'A payment of $77.00 USD failed: The card has expired.',
+			},
+			{
+				reason: 'invalid_cvc',
+				expectedMessage:
+					'A payment of $77.00 USD failed: The security code is invalid.',
+			},
+			{
+				reason: 'unknown_reason',
+				expectedMessage:
+					'A payment of $77.00 USD failed: The payment was declined.',
+			},
+		];
+
+		testCases.forEach( ( { reason, expectedMessage } ) => {
+			const events = mapTimelineEvents( [
+				{
+					amount: 7700,
+					currency: 'USD',
+					datetime: 1585712113,
+					reason,
+					type: 'failed',
+				},
+			] );
+
+			expect( events[ 1 ].headline ).toBe( expectedMessage );
+		} );
+	} );
+
+	test( 'formats payment failure events with different currencies', () => {
+		const events = mapTimelineEvents( [
+			{
+				amount: 7700,
+				currency: 'EUR',
+				datetime: 1585712113,
+				reason: 'card_declined',
+				type: 'failed',
+			},
+		] );
+
+		expect( events[ 1 ].headline ).toBe(
+			'A payment of €77.00 EUR failed: The card was declined by the bank.'
+		);
+	} );
 } );