Merge pull request #2712 from woocommerce/PCP-233-native-gateway-icon-feature-for-all-gateways

Native gateway icon feature for all gateways (233)

modules/ppcp-blocks/resources/js/checkout-block.js

@@ -802,9 +802,24 @@ if ( block_enabled ) {
 			);
 		}
 
+		const PaypalLabel = ( { components, config } ) => {
+			const { PaymentMethodIcons } = components;
+
+			return (
+				<>
+					<span
+						dangerouslySetInnerHTML={ {
+							__html: config.title,
+						} }
+					/>
+					<PaymentMethodIcons icons={ config.icon } align="right" />
+				</>
+			);
+		};
+
 		registerPaymentMethod( {
 			name: config.id,
-			label: <div dangerouslySetInnerHTML={ { __html: config.title } } />,
+			label: <PaypalLabel config={ config } />,
 			content: descriptionElement,
 			edit: descriptionElement,
 			placeOrderButtonLabel: config.placeOrderButtonText,

modules/ppcp-blocks/src/PayPalPaymentMethod.php

@@ -262,6 +262,13 @@ class PayPalPaymentMethod extends AbstractPaymentMethodType {
 		return array(
 			'id'                          => $this->gateway->id,
 			'title'                       => $this->gateway->title,
+			'icon'                        => array(
+				array(
+					'id'  => 'paypal',
+					'alt' => 'PayPal',
+					'src' => $this->gateway->icon,
+				),
+			),
 			'description'                 => $this->gateway->description,
 			'smartButtonsEnabled'         => $smart_buttons_enabled,
 			'placeOrderEnabled'           => $place_order_enabled,

modules/ppcp-wc-gateway/assets/images/paypal.svg

@@ -0,0 +1,3 @@
+<svg width="42" height="14" viewBox="0 0 42 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 -9.53674e-07V10.4722H2.43059V6.91664H3.58333C4.83339 6.91664 5.70838 6.54164 6.31948 5.91668C6.94444 5.27779 7.31944 4.41671 7.31944 3.45842C7.31944 2.50005 6.94444 1.63894 6.31948 1.00006C5.70838 0.37503 4.83339 -9.53674e-07 3.58333 -9.53674e-07H0ZM24.125 -9.53674e-07V10.4722H26.5556V6.91664H27.7083C28.9583 6.91664 29.8333 6.54164 30.4445 5.91668C31.0694 5.27779 31.4444 4.41671 31.4444 3.45842C31.4444 2.50005 31.0694 1.63894 30.4445 1.00006C29.8333 0.37503 28.9583 -9.53674e-07 27.7083 -9.53674e-07H24.125ZM39.6667 -9.53674e-07V10.4722H42V-9.53674e-07H39.6667ZM2.43059 2.1528H3.23613C3.88895 2.1528 4.20834 2.30553 4.44445 2.52778C4.68056 2.75003 4.81944 3.08336 4.81944 3.45842C4.81944 3.83341 4.68056 4.16668 4.44445 4.38885C4.20834 4.6111 3.88895 4.76384 3.23613 4.76384H2.43059V2.1528ZM26.5556 2.1528H27.3611C28.0139 2.1528 28.3333 2.30553 28.5694 2.52778C28.8055 2.75003 28.9444 3.08336 28.9444 3.45842C28.9444 3.83341 28.8055 4.16668 28.5694 4.38885C28.3333 4.6111 28.0139 4.76384 27.3611 4.76384H26.5556V2.1528ZM10.4722 3.30553C8.4861 3.30553 6.9583 4.93053 6.9583 7C6.9583 9.0694 8.4861 10.6945 10.4722 10.6945C11.2639 10.6945 11.9722 10.3889 12.4999 9.87498V10.4722H14.625V3.52784H12.4999V4.12502C11.9722 3.61116 11.2639 3.30553 10.4722 3.30553ZM34.5972 3.30553C32.6111 3.30553 31.0834 4.93053 31.0834 7C31.0834 9.0694 32.6111 10.6945 34.5972 10.6945C35.3889 10.6945 36.0973 10.3889 36.625 9.87498V10.4722H38.7499V3.52784H36.625V4.12502C36.0973 3.61116 35.3889 3.30553 34.5972 3.30553ZM15.1249 3.52784L18.3334 9.19443L15.9166 14H18.3888L23.625 3.52784H21.1528L19.5694 6.83337H19.5555L17.7639 3.52784H15.1249ZM10.8611 5.4167C11.7222 5.4167 12.3611 6.08335 12.3611 7C12.3611 7.91665 11.7222 8.5833 10.8611 8.5833C10 8.5833 9.3611 7.91665 9.3611 7C9.3611 6.08335 10 5.4167 10.8611 5.4167ZM34.9861 5.4167C35.8472 5.4167 36.4861 6.08335 36.4861 7C36.4861 7.91665 35.8472 8.5833 34.9861 8.5833C34.125 8.5833 33.4861 7.91665 33.4861 7C33.4861 6.08335 34.125 5.4167 34.9861 5.4167Z" fill="black"/>
+</svg>

modules/ppcp-wc-gateway/services.php

@@ -121,6 +121,7 @@ return array(
 			$container->get( 'api.endpoint.payment-tokens' ),
 			$container->get( 'vaulting.vault-v3-enabled' ),
 			$container->get( 'vaulting.wc-payment-tokens' ),
+			$container->get( 'wcgateway.url' ),
 			$container->get( 'wcgateway.settings.admin-settings-enabled' )
 		);
 	},
@@ -1494,7 +1495,8 @@ return array(
 			$container->get( 'wcgateway.pay-upon-invoice-helper' ),
 			$container->get( 'wcgateway.checkout-helper' ),
 			$container->get( 'onboarding.state' ),
-			$container->get( 'wcgateway.processor.refunds' )
+			$container->get( 'wcgateway.processor.refunds' ),
+			$container->get( 'wcgateway.url' )
 		);
 	},
 	'wcgateway.fraudnet-source-website-id'                 => static function ( ContainerInterface $container ): FraudNetSourceWebsiteId {

modules/ppcp-wc-gateway/src/Gateway/PayPalGateway.php

@@ -202,6 +202,13 @@ class PayPalGateway extends \WC_Payment_Gateway {
 	 */
 	private $wc_payment_tokens;
 
+	/**
+	 * The module URL
+	 *
+	 * @var string
+	 */
+	private $module_url;
+
 	/**
 	 * Whether settings module is enabled.
 	 *
@@ -232,6 +239,7 @@ class PayPalGateway extends \WC_Payment_Gateway {
 	 * @param PaymentTokensEndpoint    $payment_tokens_endpoint Payment tokens endpoint.
 	 * @param bool                     $vault_v3_enabled Whether Vault v3 module is enabled.
 	 * @param WooCommercePaymentTokens $wc_payment_tokens WooCommerce payment tokens.
+	 * @param string                   $module_url The module URL.
 	 * @param bool                     $admin_settings_enabled Whether settings module is enabled.
 	 */
 	public function __construct(
@@ -255,6 +263,7 @@ class PayPalGateway extends \WC_Payment_Gateway {
 		PaymentTokensEndpoint $payment_tokens_endpoint,
 		bool $vault_v3_enabled,
 		WooCommercePaymentTokens $wc_payment_tokens,
+		string $module_url,
 		bool $admin_settings_enabled
 	) {
 		$this->id                          = self::ID;
@@ -279,6 +288,8 @@ class PayPalGateway extends \WC_Payment_Gateway {
 		$this->payment_tokens_endpoint     = $payment_tokens_endpoint;
 		$this->vault_v3_enabled            = $vault_v3_enabled;
 		$this->wc_payment_tokens           = $wc_payment_tokens;
+		$this->module_url                  = $module_url;
+		$this->icon                        = apply_filters( 'woocommerce_paypal_payments_paypal_gateway_icon', esc_url( $this->module_url ) . 'assets/images/paypal.svg' );
 		$this->admin_settings_enabled      = $admin_settings_enabled;
 
 		$default_support = array(

modules/ppcp-wc-gateway/src/Gateway/PayUponInvoice/PayUponInvoiceGateway.php

@@ -103,6 +103,13 @@ class PayUponInvoiceGateway extends WC_Payment_Gateway {
 	 */
 	protected $refund_processor;
 
+	/**
+	 * The module URL
+	 *
+	 * @var string
+	 */
+	private $module_url;
+
 	/**
 	 * PayUponInvoiceGateway constructor.
 	 *
@@ -116,6 +123,7 @@ class PayUponInvoiceGateway extends WC_Payment_Gateway {
 	 * @param CheckoutHelper              $checkout_helper The checkout helper.
 	 * @param State                       $state The onboarding state.
 	 * @param RefundProcessor             $refund_processor The refund processor.
+	 * @param string                      $module_url The module URL.
 	 */
 	public function __construct(
 		PayUponInvoiceOrderEndpoint $order_endpoint,
@@ -127,7 +135,8 @@ class PayUponInvoiceGateway extends WC_Payment_Gateway {
 		PayUponInvoiceHelper $pui_helper,
 		CheckoutHelper $checkout_helper,
 		State $state,
-		RefundProcessor $refund_processor
+		RefundProcessor $refund_processor,
+		string $module_url
 	) {
 		$this->id = self::ID;
 
@@ -157,6 +166,8 @@ class PayUponInvoiceGateway extends WC_Payment_Gateway {
 		$this->transaction_url_provider = $transaction_url_provider;
 		$this->pui_helper               = $pui_helper;
 		$this->checkout_helper          = $checkout_helper;
+		$this->module_url               = $module_url;
+		$this->icon                     = apply_filters( 'woocommerce_paypal_payments_pay_upon_invoice_gateway_icon', esc_url( $this->module_url ) . 'assets/images/ratepay.svg' );
 
 		$this->state = $state;
 		if ( $state->current_state() === State::STATE_ONBOARDED ) {

tests/PHPUnit/WcGateway/Gateway/PayUponInvoice/PayUponInvoiceGatewayTest.php

@@ -64,7 +64,8 @@ class PayUponInvoiceGatewayTest extends TestCase
 			$this->pui_helper,
 			$this->checkout_helper,
 			$this->state,
-			$this->refund_processor
+			$this->refund_processor,
+			''
 		);
 	}
 

tests/PHPUnit/WcGateway/Gateway/WcGatewayTest.php

@@ -124,6 +124,7 @@ class WcGatewayTest extends TestCase
 			$this->paymentTokensEndpoint,
 			$this->vaultV3Enabled,
 			$this->wcPaymentTokens,
+			'',
 			false
 		);
 	}