Add handler support for settings fields

Add settings SubElementsHandler
This commit is contained in:
Pedro Silva 2023-08-30 16:38:00 +01:00
parent d6f6d05431
commit dc9eb96d99
No known key found for this signature in database
GPG key ID: E2EE20C0669D24B3
4 changed files with 150 additions and 4 deletions

View file

@ -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(),

View 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' ),
);
}
}

View file

@ -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;

View file

@ -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)
}
});
}
);