From fa1839df654c64ee3b3b2829dc3a36776c57ee32 Mon Sep 17 00:00:00 2001 From: rjchow Date: Wed, 15 Mar 2023 15:29:46 +0800 Subject: [PATCH] add: payment transaction processor images to payment recommendations --- .../components/List/Item.js | 15 +++++++++++ .../components/List/List.scss | 12 +++++++++ .../transaction_processors/bancontact.svg | 6 +++++ .../cartesbancaires.svg | 12 +++++++++ .../transaction_processors/eps.svg | 9 +++++++ .../transaction_processors/giropay.svg | 9 +++++++ .../transaction_processors/ideal.svg | 20 ++++++++++++++ .../transaction_processors/sofort.svg | 7 +++++ .../add-payment-recommendations-images | 4 +++ .../Admin/API/PaymentGatewaySuggestions.php | 10 +++++++ .../DefaultPaymentGateways.php | 26 ++++++++++++------- 11 files changed, 121 insertions(+), 9 deletions(-) create mode 100644 plugins/woocommerce/assets/images/payment_methods/transaction_processors/bancontact.svg create mode 100644 plugins/woocommerce/assets/images/payment_methods/transaction_processors/cartesbancaires.svg create mode 100644 plugins/woocommerce/assets/images/payment_methods/transaction_processors/eps.svg create mode 100644 plugins/woocommerce/assets/images/payment_methods/transaction_processors/giropay.svg create mode 100644 plugins/woocommerce/assets/images/payment_methods/transaction_processors/ideal.svg create mode 100644 plugins/woocommerce/assets/images/payment_methods/transaction_processors/sofort.svg 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 80bdede39d2c3..9055968902163 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,20 @@ export const Item = ( { isRecommended, markConfigured, paymentGateway } ) => {
{ content }
+ { transactionProcessors && ( +
+ { Object.keys( transactionProcessors ).map( + ( key ) => { + return ( + { + ); + } + ) } +
+ ) }
+ + + + + diff --git a/plugins/woocommerce/assets/images/payment_methods/transaction_processors/cartesbancaires.svg b/plugins/woocommerce/assets/images/payment_methods/transaction_processors/cartesbancaires.svg new file mode 100644 index 0000000000000..4316b3ee72106 --- /dev/null +++ b/plugins/woocommerce/assets/images/payment_methods/transaction_processors/cartesbancaires.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/plugins/woocommerce/assets/images/payment_methods/transaction_processors/eps.svg b/plugins/woocommerce/assets/images/payment_methods/transaction_processors/eps.svg new file mode 100644 index 0000000000000..28b20597d24e0 --- /dev/null +++ b/plugins/woocommerce/assets/images/payment_methods/transaction_processors/eps.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/plugins/woocommerce/assets/images/payment_methods/transaction_processors/giropay.svg b/plugins/woocommerce/assets/images/payment_methods/transaction_processors/giropay.svg new file mode 100644 index 0000000000000..5e69b5d418b0b --- /dev/null +++ b/plugins/woocommerce/assets/images/payment_methods/transaction_processors/giropay.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/plugins/woocommerce/assets/images/payment_methods/transaction_processors/ideal.svg b/plugins/woocommerce/assets/images/payment_methods/transaction_processors/ideal.svg new file mode 100644 index 0000000000000..1eace8bf3d911 --- /dev/null +++ b/plugins/woocommerce/assets/images/payment_methods/transaction_processors/ideal.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/plugins/woocommerce/assets/images/payment_methods/transaction_processors/sofort.svg b/plugins/woocommerce/assets/images/payment_methods/transaction_processors/sofort.svg new file mode 100644 index 0000000000000..5c99e8c2bc95e --- /dev/null +++ b/plugins/woocommerce/assets/images/payment_methods/transaction_processors/sofort.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/plugins/woocommerce/changelog/add-payment-recommendations-images b/plugins/woocommerce/changelog/add-payment-recommendations-images new file mode 100644 index 0000000000000..69dce25d360ae --- /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 d0a83050b499d..14d51cb4485c2 100644 --- a/plugins/woocommerce/src/Admin/API/PaymentGatewaySuggestions.php +++ b/plugins/woocommerce/src/Admin/API/PaymentGatewaySuggestions.php @@ -168,6 +168,16 @@ public function get_item_schema() { '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, + ), ), ); diff --git a/plugins/woocommerce/src/Admin/Features/PaymentGatewaySuggestions/DefaultPaymentGateways.php b/plugins/woocommerce/src/Admin/Features/PaymentGatewaySuggestions/DefaultPaymentGateways.php index b9f8999fca380..398d7068620c7 100644 --- a/plugins/woocommerce/src/Admin/Features/PaymentGatewaySuggestions/DefaultPaymentGateways.php +++ b/plugins/woocommerce/src/Admin/Features/PaymentGatewaySuggestions/DefaultPaymentGateways.php @@ -152,13 +152,21 @@ public static function get_all() { 'category_additional' => array(), ), array( - 'id' => 'ppcp-gateway', - 'title' => __( 'PayPal Payments', 'woocommerce' ), - 'content' => __( "Safe and secure payments using credit cards or your customer's PayPal account.", 'woocommerce' ), - 'image' => WC_ADMIN_IMAGES_FOLDER_URL . '/paypal.png', - 'image_72x72' => WC_ADMIN_IMAGES_FOLDER_URL . '/payment_methods/72x72/paypal.png', - 'plugins' => array( 'woocommerce-paypal-payments' ), - 'is_visible' => array( + 'id' => 'ppcp-gateway', + 'title' => __( 'PayPal Payments', 'woocommerce' ), + 'content' => __( "Safe and secure payments using credit cards or your customer's PayPal account.", 'woocommerce' ), + 'transaction_processors' => array( + 'cartesbancaires' => WC_ADMIN_IMAGES_FOLDER_URL . '/payment_methods/transaction_processors/cartesbancaires.svg', + 'bancontact' => WC_ADMIN_IMAGES_FOLDER_URL . '/payment_methods/transaction_processors/bancontact.svg', + 'eps' => WC_ADMIN_IMAGES_FOLDER_URL . '/payment_methods/transaction_processors/eps.svg', + 'giropay' => WC_ADMIN_IMAGES_FOLDER_URL . '/payment_methods/transaction_processors/giropay.svg', + 'ideal' => WC_ADMIN_IMAGES_FOLDER_URL . '/payment_methods/transaction_processors/ideal.svg', + 'sofort' => WC_ADMIN_IMAGES_FOLDER_URL . '/payment_methods/transaction_processors/sofort.svg', + ), + 'image' => WC_ADMIN_IMAGES_FOLDER_URL . '/paypal.png', + 'image_72x72' => WC_ADMIN_IMAGES_FOLDER_URL . '/payment_methods/72x72/paypal.png', + 'plugins' => array( 'woocommerce-paypal-payments' ), + 'is_visible' => array( (object) array( 'type' => 'base_location_country', 'value' => 'IN', @@ -166,8 +174,8 @@ public static function get_all() { ), self::get_rules_for_cbd( false ), ), - 'category_other' => array( 'US', 'CA', 'AT', 'BE', 'BG', 'HR', 'CH', 'CY', 'CZ', 'DK', 'EE', 'ES', 'FI', 'FR', 'DE', 'GB', 'GR', 'HU', 'IE', 'IT', 'LV', 'LT', 'LU', 'MT', 'NL', 'NO', 'PL', 'PT', 'RO', 'SK', 'SL', 'SE', 'MX', 'BR', 'AR', 'CL', 'CO', 'EC', 'PE', 'UY', 'VE', 'AU', 'NZ', 'HK', 'JP', 'SG', 'CN', 'ID', 'ZA', 'NG', 'GH' ), - 'category_additional' => array( 'US', 'CA', 'AT', 'BE', 'BG', 'HR', 'CH', 'CY', 'CZ', 'DK', 'EE', 'ES', 'FI', 'FR', 'DE', 'GB', 'GR', 'HU', 'IE', 'IT', 'LV', 'LT', 'LU', 'MT', 'NL', 'NO', 'PL', 'PT', 'RO', 'SK', 'SL', 'SE', 'MX', 'BR', 'AR', 'CL', 'CO', 'EC', 'PE', 'UY', 'VE', 'AU', 'NZ', 'HK', 'JP', 'SG', 'CN', 'ID', 'IN', 'ZA', 'NG', 'GH' ), + 'category_other' => array( 'US', 'CA', 'AT', 'BE', 'BG', 'HR', 'CH', 'CY', 'CZ', 'DK', 'EE', 'ES', 'FI', 'FR', 'DE', 'GB', 'GR', 'HU', 'IE', 'IT', 'LV', 'LT', 'LU', 'MT', 'NL', 'NO', 'PL', 'PT', 'RO', 'SK', 'SL', 'SE', 'MX', 'BR', 'AR', 'CL', 'CO', 'EC', 'PE', 'UY', 'VE', 'AU', 'NZ', 'HK', 'JP', 'SG', 'CN', 'ID', 'ZA', 'NG', 'GH' ), + 'category_additional' => array( 'US', 'CA', 'AT', 'BE', 'BG', 'HR', 'CH', 'CY', 'CZ', 'DK', 'EE', 'ES', 'FI', 'FR', 'DE', 'GB', 'GR', 'HU', 'IE', 'IT', 'LV', 'LT', 'LU', 'MT', 'NL', 'NO', 'PL', 'PT', 'RO', 'SK', 'SL', 'SE', 'MX', 'BR', 'AR', 'CL', 'CO', 'EC', 'PE', 'UY', 'VE', 'AU', 'NZ', 'HK', 'JP', 'SG', 'CN', 'ID', 'IN', 'ZA', 'NG', 'GH' ), ), array( 'id' => 'cod',