From 23b79428f72219f72f78345c0be378b9c9f1f824 Mon Sep 17 00:00:00 2001
From: RJ <27843274+rjchow@users.noreply.github.com>
Date: Fri, 17 Mar 2023 13:49:50 +0800
Subject: [PATCH] add: payment transaction processor images to payment
 recommendations (#37230)

---
 .../components/List/Item.js                      | 16 ++++++++++++++++
 .../components/List/List.scss                    | 12 ++++++++++++
 .../changelog/add-payment-recommendations-images |  4 ++++
 .../src/Admin/API/PaymentGatewaySuggestions.php  | 10 ++++++++++
 4 files changed, 42 insertions(+)
 create mode 100644 plugins/woocommerce/changelog/add-payment-recommendations-images

diff --git a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/List/Item.js b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/List/Item.js
index 80bdede39d2..25ceb1c4557 100644
--- a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/List/Item.js
+++ b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/List/Item.js
@@ -31,6 +31,7 @@ export const Item = ( { isRecommended, markConfigured, paymentGateway } ) => {
 		settingsUrl: manageUrl,
 		is_local_partner: isLocalPartner,
 		external_link: externalLink,
+		transaction_processors: transactionProcessors,
 	} = paymentGateway;
 
 	const connectSlot = useSlot(
@@ -88,6 +89,21 @@ export const Item = ( { isRecommended, markConfigured, paymentGateway } ) => {
 					<div className="woocommerce-task-payment__content">
 						{ content }
 					</div>
+					{ transactionProcessors && (
+						<div className="woocommerce-task-payment__transaction-processors_images">
+							{ Object.keys( transactionProcessors ).map(
+								( key ) => {
+									return (
+										<img
+											src={ transactionProcessors[ key ] }
+											alt={ key }
+											key={ key }
+										/>
+									);
+								}
+							) }
+						</div>
+					) }
 				</div>
 				<div className="woocommerce-task-payment__footer">
 					<Action
diff --git a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/List/List.scss b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/List/List.scss
index da05a93d13e..1cbc1f7104f 100644
--- a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/List/List.scss
+++ b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/List/List.scss
@@ -67,6 +67,18 @@
 			font-size: 12px;
 		}
 	}
+	.woocommerce-task-payment__transaction-processors_images {
+		padding-top: 16px;
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		gap: 8px;
+
+		img {
+			height: 24px;
+		}
+	}
+
 	.woocommerce-task-payment__description {
 		flex: 1;
 	}
diff --git a/plugins/woocommerce/changelog/add-payment-recommendations-images b/plugins/woocommerce/changelog/add-payment-recommendations-images
new file mode 100644
index 00000000000..69dce25d360
--- /dev/null
+++ b/plugins/woocommerce/changelog/add-payment-recommendations-images
@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Added images support for the payment recommendations transaction processors
diff --git a/plugins/woocommerce/src/Admin/API/PaymentGatewaySuggestions.php b/plugins/woocommerce/src/Admin/API/PaymentGatewaySuggestions.php
index d0a83050b49..14d51cb4485 100644
--- a/plugins/woocommerce/src/Admin/API/PaymentGatewaySuggestions.php
+++ b/plugins/woocommerce/src/Admin/API/PaymentGatewaySuggestions.php
@@ -168,6 +168,16 @@ class PaymentGatewaySuggestions extends \WC_REST_Data_Controller {
 					'context'     => array( 'view', 'edit' ),
 					'readonly'    => true,
 				),
+				'transaction_processors'  => array(
+					'description'         => __( 'Array of transaction processors and their images.', 'woocommerce' ),
+					'type'                => 'object',
+					'addtionalProperties' => array(
+						'type'   => 'string',
+						'format' => 'uri',
+					),
+					'context'             => array( 'view', 'edit' ),
+					'readonly'            => true,
+				),
 			),
 		);