mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-08-30 05:00:51 +08:00
Add handler support for settings fields
Add settings SubElementsHandler
This commit is contained in:
parent
d6f6d05431
commit
dc9eb96d99
4 changed files with 150 additions and 4 deletions
|
@ -9,6 +9,7 @@ declare(strict_types=1);
|
|||
|
||||
namespace WooCommerce\PayPalCommerce\Googlepay;
|
||||
|
||||
use WooCommerce\PayPalCommerce\Googlepay\Assets\PropertiesDictionary;
|
||||
use WooCommerce\PayPalCommerce\Onboarding\State;
|
||||
use WooCommerce\PayPalCommerce\Vendor\Psr\Container\ContainerInterface;
|
||||
|
||||
|
@ -29,10 +30,46 @@ return array(
|
|||
'allow_card_button_gateway',
|
||||
array(
|
||||
'googlepay_button_enabled' => array(
|
||||
'title' => __( 'Google Pay Button', 'woocommerce-paypal-payments' ),
|
||||
'type' => 'checkbox',
|
||||
'label' => __( 'Enable Google Pay button', 'woocommerce-paypal-payments' ),
|
||||
'default' => 'yes',
|
||||
'title' => __( 'Google Pay Button', 'woocommerce-paypal-payments' ),
|
||||
'type' => 'checkbox',
|
||||
'label' => __( 'Enable Google Pay button', 'woocommerce-paypal-payments' ),
|
||||
'default' => 'yes',
|
||||
'screens' => array( State::STATE_ONBOARDED ),
|
||||
'gateway' => 'paypal',
|
||||
'requirements' => array(),
|
||||
'custom_attributes' => array(
|
||||
'data-ppcp-handlers' => wp_json_encode(
|
||||
array(
|
||||
array(
|
||||
'handler' => 'SubElementsHandler',
|
||||
'options' => array(
|
||||
'values' => array( '1' ),
|
||||
'elements' => array( '#field-googlepay_button_color', '#field-googlepay_button_type' ),
|
||||
),
|
||||
),
|
||||
)
|
||||
),
|
||||
),
|
||||
),
|
||||
'googlepay_button_color' => array(
|
||||
'title' => str_repeat( ' ', 6 ) . __( 'Button Color', 'woocommerce-paypal-payments' ),
|
||||
'type' => 'select',
|
||||
'label' => '',
|
||||
'input_class' => array( 'wc-enhanced-select' ),
|
||||
'class' => array(),
|
||||
'default' => 'black',
|
||||
'options' => PropertiesDictionary::button_colors(),
|
||||
'screens' => array( State::STATE_ONBOARDED ),
|
||||
'gateway' => 'paypal',
|
||||
'requirements' => array(),
|
||||
),
|
||||
'googlepay_button_type' => array(
|
||||
'title' => str_repeat( ' ', 6 ) . __( 'Button Type', 'woocommerce-paypal-payments' ),
|
||||
'type' => 'select',
|
||||
'class' => array(),
|
||||
'input_class' => array( 'wc-enhanced-select' ),
|
||||
'default' => 'pay',
|
||||
'options' => PropertiesDictionary::button_types(),
|
||||
'screens' => array( State::STATE_ONBOARDED ),
|
||||
'gateway' => 'paypal',
|
||||
'requirements' => array(),
|
||||
|
|
46
modules/ppcp-googlepay/src/Assets/PropertiesDictionary.php
Normal file
46
modules/ppcp-googlepay/src/Assets/PropertiesDictionary.php
Normal file
|
@ -0,0 +1,46 @@
|
|||
<?php
|
||||
/**
|
||||
* Properties of the GooglePay module.
|
||||
*
|
||||
* @package WooCommerce\PayPalCommerce\Button\Assets
|
||||
*/
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace WooCommerce\PayPalCommerce\Googlepay\Assets;
|
||||
|
||||
/**
|
||||
* Class Button
|
||||
*/
|
||||
class PropertiesDictionary {
|
||||
|
||||
/**
|
||||
* Returns the possible list of button colors.
|
||||
*
|
||||
* @return array
|
||||
*/
|
||||
public static function button_colors(): array {
|
||||
return array(
|
||||
'white' => __( 'White', 'woocommerce-paypal-payments' ),
|
||||
'black' => __( 'Black', 'woocommerce-paypal-payments' ),
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the possible list of button types.
|
||||
*
|
||||
* @return array
|
||||
*/
|
||||
public static function button_types(): array {
|
||||
return array(
|
||||
'book' => __( 'Book', 'woocommerce-paypal-payments' ),
|
||||
'buy' => __( 'Buy', 'woocommerce-paypal-payments' ),
|
||||
'checkout' => __( 'Checkout', 'woocommerce-paypal-payments' ),
|
||||
'donate' => __( 'Donate', 'woocommerce-paypal-payments' ),
|
||||
'order' => __( 'Order', 'woocommerce-paypal-payments' ),
|
||||
'pay' => __( 'Pay', 'woocommerce-paypal-payments' ),
|
||||
'plain' => __( 'Plain', 'woocommerce-paypal-payments' ),
|
||||
'subscribe' => __( 'Book', 'woocommerce-paypal-payments' ),
|
||||
);
|
||||
}
|
||||
}
|
|
@ -0,0 +1,51 @@
|
|||
|
||||
class SubElementsHandler {
|
||||
constructor(element, options) {
|
||||
const fieldSelector = 'input, select, textarea';
|
||||
|
||||
this.element = element;
|
||||
this.values = options.values;
|
||||
this.elements = options.elements;
|
||||
|
||||
this.elementsSelector = this.elements.join(',');
|
||||
|
||||
this.input = jQuery(this.element).is(fieldSelector)
|
||||
? this.element
|
||||
: jQuery(this.element).find(fieldSelector).get(0);
|
||||
|
||||
this.updateElementsVisibility();
|
||||
|
||||
jQuery(this.input).change(() => {
|
||||
this.updateElementsVisibility();
|
||||
});
|
||||
}
|
||||
|
||||
updateElementsVisibility() {
|
||||
const $elements = jQuery(this.elementsSelector);
|
||||
|
||||
let value = this.getValue(this.input);
|
||||
value = (value !== null ? value.toString() : value);
|
||||
|
||||
if (this.values.indexOf(value) !== -1) {
|
||||
$elements.show();
|
||||
} else {
|
||||
$elements.hide();
|
||||
}
|
||||
}
|
||||
|
||||
getValue(element) {
|
||||
const $el = jQuery(element);
|
||||
|
||||
if ($el.is(':checkbox') || $el.is(':radio')) {
|
||||
if ($el.is(':checked')) {
|
||||
return $el.val();
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
} else {
|
||||
return $el.val();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default SubElementsHandler;
|
|
@ -4,6 +4,7 @@ import Renderer from '../../../ppcp-button/resources/js/modules/Renderer/Rendere
|
|||
import MessageRenderer from "../../../ppcp-button/resources/js/modules/Renderer/MessageRenderer";
|
||||
import {setVisibleByClass, isVisible} from "../../../ppcp-button/resources/js/modules/Helper/Hiding";
|
||||
import widgetBuilder from "../../../ppcp-button/resources/js/modules/Renderer/WidgetBuilder";
|
||||
import SubElementsHandler from "./SettingsHandler/SubElementsHandler";
|
||||
|
||||
document.addEventListener(
|
||||
'DOMContentLoaded',
|
||||
|
@ -307,5 +308,16 @@ document.addEventListener(
|
|||
createButtonPreview(() => getButtonDefaultSettings('#ppcpPayLaterButtonPreview'));
|
||||
});
|
||||
}
|
||||
|
||||
// Generic behaviours, can be moved to common.js once it's on trunk branch.
|
||||
jQuery( '*[data-ppcp-handlers]' ).each( (index, el) => {
|
||||
const handlers = jQuery(el).data('ppcpHandlers');
|
||||
for (const handlerConfig of handlers) {
|
||||
new {
|
||||
SubElementsHandler: SubElementsHandler
|
||||
}[handlerConfig.handler](el, handlerConfig.options)
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue