woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-05 08:59:14 +08:00
Code Issues Projects Packages Wiki Activity Actions 11

Merge pull request #567 from woocommerce/PCP-607-add-dark-versions-of-cards

Browse source 
Add ability to select dark versions of Visa and Mastercard icons.
This commit is contained in:
Emili Castells 2022-04-13 10:30:59 +02:00 • committed by GitHub
commit 212894958e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 54 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

34
modules/ppcp-onboarding/assets/js/settings.js
View file

@ -171,6 +171,16 @@ document.addEventListener(
return; return;
} }
const allOptions = Array.from(document.querySelectorAll('select[name="ppcp[disable_cards][]"] option')); const allOptions = Array.from(document.querySelectorAll('select[name="ppcp[disable_cards][]"] option'));
const iconVersions = {
'visa': {
'light': {'label': 'Visa (light)'},
'dark' : {'label': 'Visa (dark)', 'value': 'visa-dark'}
},
'mastercard': {
'light': {'label': 'Mastercard (light)'},
'dark' : {'label': 'Mastercard (dark)', 'value': 'mastercard-dark'}
}
}
const replace = () => { const replace = () => {
const validOptions = allOptions.filter( const validOptions = allOptions.filter(
(option) => { (option) => {
@ -181,13 +191,35 @@ document.addEventListener(
const selectedValidOptions = validOptions.map( const selectedValidOptions = validOptions.map(
(option) => { (option) => {
option = option.cloneNode(true); option = option.cloneNode(true);
option.selected = target.querySelector('option[value="' + option.value + '"]') && target.querySelector('option[value="' + option.value + '"]').selected; let value = option.value;
option.selected = target.querySelector('option[value="' + value + '"]') && target.querySelector('option[value="' + value + '"]').selected;
if(value === 'visa' || value === 'mastercard') {
let darkOption = option.cloneNode(true);
let currentVersion = iconVersions[value];
let darkValue = iconVersions[value].dark.value;
option.text = currentVersion.light.label;
darkOption.text = currentVersion.dark.label;
darkOption.value = darkValue;
darkOption.selected = target.querySelector('option[value="' + darkValue + '"]') && target.querySelector('option[value="' + darkValue + '"]').selected;
return [option, darkOption];
}
return option; return option;
} }
); );
target.innerHTML = ''; target.innerHTML = '';
selectedValidOptions.forEach( selectedValidOptions.forEach(
(option) => { (option) => {
if(Array.isArray(option)){
option.forEach(
(option) => {
target.append(option);
}
)
}
target.append(option); target.append(option);
} }
); );

27
modules/ppcp-wc-gateway/services.php
View file

@ -1945,13 +1945,15 @@ return array(
'woocommerce-paypal-payments' 'woocommerce-paypal-payments'
), ),
'options' => array( 'options' => array(
'visa' => _x( 'Visa', 'Name of credit card', 'woocommerce-paypal-payments' ), 'visa' => _x( 'Visa (light)', 'Name of credit card', 'woocommerce-paypal-payments' ),
'mastercard' => _x( 'Mastercard', 'Name of credit card', 'woocommerce-paypal-payments' ), 'visa-dark' => _x( 'Visa (dark)', 'Name of credit card', 'woocommerce-paypal-payments' ),
'amex' => _x( 'American Express', 'Name of credit card', 'woocommerce-paypal-payments' ), 'mastercard' => _x( 'Mastercard (light)', 'Name of credit card', 'woocommerce-paypal-payments' ),
'discover' => _x( 'Discover', 'Name of credit card', 'woocommerce-paypal-payments' ), 'mastercard-dark' => _x( 'Mastercard (dark)', 'Name of credit card', 'woocommerce-paypal-payments' ),
'jcb' => _x( 'JCB', 'Name of credit card', 'woocommerce-paypal-payments' ), 'amex' => _x( 'American Express', 'Name of credit card', 'woocommerce-paypal-payments' ),
'elo' => _x( 'Elo', 'Name of credit card', 'woocommerce-paypal-payments' ), 'discover' => _x( 'Discover', 'Name of credit card', 'woocommerce-paypal-payments' ),
'hiper' => _x( 'Hiper', 'Name of credit card', 'woocommerce-paypal-payments' ), 'jcb' => _x( 'JCB', 'Name of credit card', 'woocommerce-paypal-payments' ),
'elo' => _x( 'Elo', 'Name of credit card', 'woocommerce-paypal-payments' ),
'hiper' => _x( 'Hiper', 'Name of credit card', 'woocommerce-paypal-payments' ),
), ),
'screens' => array( 'screens' => array(
State::STATE_ONBOARDED, State::STATE_ONBOARDED,
@ -2027,14 +2029,23 @@ return array(
* Here, we filter them out. * Here, we filter them out.
*/ */
$card_options = $fields['disable_cards']['options']; $card_options = $fields['disable_cards']['options'];
$card_icons = $fields['card_icons']['options'];
$dark_versions = array();
foreach ( $card_options as $card => $label ) { foreach ( $card_options as $card => $label ) {
if ( $dcc_applies->can_process_card( $card ) ) { if ( $dcc_applies->can_process_card( $card ) ) {
if ( 'visa' === $card || 'mastercard' === $card ) {
$dark_versions = array(
'visa-dark' => $card_icons['visa-dark'],
'mastercard-dark' => $card_icons['mastercard-dark'],
);
}
continue; continue;
} }
unset( $card_options[ $card ] ); unset( $card_options[ $card ] );
} }
$fields['disable_cards']['options'] = $card_options; $fields['disable_cards']['options'] = $card_options;
$fields['card_icons']['options'] = $card_options; $fields['card_icons']['options'] = array_merge( $dark_versions, $card_options );
/** /**
* Display vault message on Pay Later label if vault is enabled. * Display vault message on Pay Later label if vault is enabled.

3
modules/ppcp-wc-gateway/src/Gateway/CreditCardGateway.php
View file

@ -331,8 +331,9 @@ class CreditCardGateway extends \WC_Payment_Gateway_CC {
$title_options = $this->card_labels(); $title_options = $this->card_labels();
$images = array_map( $images = array_map(
function ( string $type ) use ( $title_options ): string { function ( string $type ) use ( $title_options ): string {
$striped_dark = str_replace( '-dark', '', $type );
return '<img return '<img
title="' . esc_attr( $title_options[ $type ] ) . '" title="' . esc_attr( $title_options[ $striped_dark ] ) . '"
src="' . esc_url( $this->module_url ) . 'assets/images/' . esc_attr( $type ) . '.svg" src="' . esc_url( $this->module_url ) . 'assets/images/' . esc_attr( $type ) . '.svg"
class="ppcp-card-icon" class="ppcp-card-icon"
> '; > ';