Fix for Express Checkout Element use with coupons (#9234)

changelog/fix-9233-ece-coupons

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix error in Express Checkout Element use with coupons.

client/express-checkout/utils/normalize.js

@@ -7,14 +7,17 @@
  * @return {Array} An array of PaymentItems
  */
 export const normalizeLineItems = ( displayItems ) => {
-	return displayItems.map( ( displayItem ) =>
-		// The amount prop is already present on the item.
-		( {
-			...displayItem,
+	return displayItems.map( ( displayItem ) => {
+		let amount = displayItem?.amount ?? displayItem?.value;
+		if ( displayItem.key === 'total_discount' ) {
+			amount = -amount;
+		}
+
+		return {
 			name: displayItem.label,
-			amount: displayItem?.amount ?? displayItem?.value,
-		} )
-	);
+			amount,
+		};
+	} );
 };
 
 /**

client/express-checkout/utils/test/normalize.js

@@ -31,22 +31,15 @@ describe( 'Express checkout normalization', () => {
 			const expected = [
 				{
 					name: 'Item 1',
-					label: 'Item 1',
 					amount: 100,
-					value: 100,
 				},
 				{
 					name: 'Item 2',
-					label: 'Item 2',
 					amount: 200,
-					value: 200,
 				},
 				{
 					name: 'Item 3',
-					label: 'Item 3',
 					amount: 200,
-					valueWithTax: 300,
-					value: 200,
 				},
 			];
 
@@ -74,19 +67,61 @@ describe( 'Express checkout normalization', () => {
 			const expected = [
 				{
 					name: 'Item 1',
-					label: 'Item 1',
 					amount: 100,
 				},
 				{
 					name: 'Item 2',
-					label: 'Item 2',
 					amount: 200,
 				},
 				{
 					name: 'Item 3',
+					amount: 300,
+				},
+			];
+
+			expect( normalizeLineItems( displayItems ) ).toStrictEqual(
+				expected
+			);
+		} );
+
+		test( 'normalizes discount line item properly', () => {
+			const displayItems = [
+				{
+					label: 'Item 1',
+					amount: 100,
+				},
+				{
+					label: 'Item 2',
+					amount: 200,
+				},
+				{
 					label: 'Item 3',
 					amount: 300,
 				},
+				{
+					key: 'total_discount',
+					label: 'Discount',
+					amount: 50,
+				},
+			];
+
+			const expected = [
+				{
+					name: 'Item 1',
+					amount: 100,
+				},
+				{
+					name: 'Item 2',
+					amount: 200,
+				},
+				{
+					name: 'Item 3',
+					amount: 300,
+				},
+				{
+					name: 'Discount',
+					amount: -50,
+				},
 			];
 
 			expect( normalizeLineItems( displayItems ) ).toStrictEqual(

includes/express-checkout/class-wc-payments-express-checkout-button-helper.php

@@ -124,6 +124,7 @@ public function build_display_items( $itemized_display_items = false ) {
 
 		if ( WC()->cart->has_discount() ) {
 			$items[] = [
+				'key'    => 'total_discount',
 				'label'  => esc_html( __( 'Discount', 'woocommerce-payments' ) ),
 				'amount' => WC_Payments_Utils::prepare_amount( $discounts, $currency ),
 			];