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 7

Refactor button renderer and filter woocommerce_paypal_payments_<context>_button_disabled

Browse source
This commit is contained in:
Pedro Silva 2023-07-03 17:35:01 +01:00
parent 74f28ca921
commit 6b03960de7
No known key found for this signature in database
GPG key ID: E2EE20C0669D24B3
7 changed files with 131 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

15
modules/ppcp-button/resources/js/button.js
View file

@ -122,21 +122,10 @@ const bootstrap = () => {
}
};
let smartButtonsOptions = {
onInit: null,
init: function (actions) {
this.actions = actions;
if (typeof this.onInit === 'function') {
this.onInit();
}
}
};
const onSmartButtonsInit = (data, actions) => {
const onSmartButtonsInit = () => {
buttonsSpinner.unblock();
smartButtonsOptions.init(actions);
};
const renderer = new Renderer(creditCardRenderer, PayPalCommerceGateway, onSmartButtonClick, onSmartButtonsInit, smartButtonsOptions);
const renderer = new Renderer(creditCardRenderer, PayPalCommerceGateway, onSmartButtonClick, onSmartButtonsInit);
const messageRenderer = new MessageRenderer(PayPalCommerceGateway.messages);
const context = PayPalCommerceGateway.context;
if (context === 'mini-cart' || context === 'product') {

27
modules/ppcp-button/resources/js/modules/ContextBootstrap/CartBootstap.js
View file

@ -1,12 +1,16 @@
import CartActionHandler from '../ActionHandler/CartActionHandler';
import {setVisible} from "../Helper/Hiding";
import {disable} from "../Helper/ButtonDisabler";
import {disable, enable} from "../Helper/ButtonDisabler";
class CartBootstrap {
constructor(gateway, renderer, errorHandler) {
this.gateway = gateway;
this.renderer = renderer;
this.errorHandler = errorHandler;
this.renderer.onButtonsInit(this.gateway.button.wrapper, () => {
this.handleButtonStatus();
}, true);
}
init() {
@ -15,16 +19,11 @@ class CartBootstrap {
}
this.render();
if (!this.shouldEnable()) {
this.renderer.disableSmartButtons();
disable(this.gateway.button.wrapper);
disable(this.gateway.messages.wrapper);
return;
}
this.handleButtonStatus();
jQuery(document.body).on('updated_cart_totals updated_checkout', () => {
this.render();
this.handleButtonStatus();
fetch(
this.gateway.ajax.cart_script_params.endpoint,
@ -48,6 +47,18 @@ class CartBootstrap {
});
}
handleButtonStatus() {
if (!this.shouldEnable()) {
this.renderer.disableSmartButtons(this.gateway.button.wrapper);
disable(this.gateway.button.wrapper);
disable(this.gateway.messages.wrapper);
return;
}
this.renderer.enableSmartButtons(this.gateway.button.wrapper);
enable(this.gateway.button.wrapper);
enable(this.gateway.messages.wrapper);
}
shouldRender() {
return document.querySelector(this.gateway.button.wrapper) !== null;
}

27
modules/ppcp-button/resources/js/modules/ContextBootstrap/CheckoutBootstap.js
View file

@ -5,7 +5,7 @@ import {
isSavedCardSelected, ORDER_BUTTON_SELECTOR,
PaymentMethods
} from "../Helper/CheckoutMethodState";
import {disable} from "../Helper/ButtonDisabler";
import {disable, enable} from "../Helper/ButtonDisabler";
class CheckoutBootstap {
constructor(gateway, renderer, messages, spinner, errorHandler) {
@ -16,17 +16,15 @@ class CheckoutBootstap {
this.errorHandler = errorHandler;
this.standardOrderButtonSelector = ORDER_BUTTON_SELECTOR;
this.renderer.onButtonsInit(this.gateway.button.wrapper, () => {
this.handleButtonStatus();
}, true);
}
init() {
this.render();
if (!this.shouldEnable()) {
this.renderer.disableSmartButtons();
disable(this.gateway.button.wrapper);
disable(this.gateway.messages.wrapper);
return;
}
this.handleButtonStatus();
// Unselect saved card.
// WC saves form values, so with our current UI it would be a bit weird
@ -36,6 +34,7 @@ class CheckoutBootstap {
jQuery(document.body).on('updated_checkout', () => {
this.render()
this.handleButtonStatus();
});
jQuery(document.body).on('updated_checkout payment_method_selected', () => {
@ -51,6 +50,18 @@ class CheckoutBootstap {
this.updateUi();
}
handleButtonStatus() {
if (!this.shouldEnable()) {
this.renderer.disableSmartButtons(this.gateway.button.wrapper);
disable(this.gateway.button.wrapper);
disable(this.gateway.messages.wrapper);
return;
}
this.renderer.enableSmartButtons(this.gateway.button.wrapper);
enable(this.gateway.button.wrapper);
enable(this.gateway.messages.wrapper);
}
shouldRender() {
if (document.querySelector(this.gateway.button.cancel_wrapper)) {
return false;

27
modules/ppcp-button/resources/js/modules/ContextBootstrap/MiniCartBootstap.js
View file

@ -1,5 +1,5 @@
import CartActionHandler from '../ActionHandler/CartActionHandler';
import {disable} from "../Helper/ButtonDisabler";
import {disable, enable} from "../Helper/ButtonDisabler";
class MiniCartBootstap {
constructor(gateway, renderer, errorHandler) {
@ -16,17 +16,26 @@ class MiniCartBootstap {
this.errorHandler,
);
this.render();
if (!this.shouldEnable()) {
this.renderer.disableSmartButtons();
disable(this.gateway.button.wrapper);
disable(this.gateway.messages.wrapper);
return;
}
this.handleButtonStatus();
jQuery(document.body).on('wc_fragments_loaded wc_fragments_refreshed', () => {
this.render();
this.handleButtonStatus();
});
this.renderer.onButtonsInit(this.gateway.button.mini_cart_wrapper, () => {
this.handleButtonStatus();
}, true);
}
handleButtonStatus() {
if (!this.shouldEnable()) {
this.renderer.disableSmartButtons(this.gateway.button.mini_cart_wrapper);
disable(this.gateway.button.mini_cart_wrapper);
return;
}
this.renderer.enableSmartButtons(this.gateway.button.mini_cart_wrapper);
enable(this.gateway.button.mini_cart_wrapper);
}
shouldRender() {
@ -36,7 +45,7 @@ class MiniCartBootstap {
shouldEnable() {
return this.shouldRender()
&& this.gateway.button.is_disabled !== true;
&& this.gateway.button.is_mini_cart_disabled !== true;
}
render() {

16
modules/ppcp-button/resources/js/modules/ContextBootstrap/SingleProductBootstap.js
View file

@ -12,11 +12,9 @@ class SingleProductBootstap {
this.mutationObserver = new MutationObserver(this.handleChange.bind(this));
this.formSelector = 'form.cart';
if (this.renderer && this.renderer.smartButtonsOptions) {
this.renderer.smartButtonsOptions.onInit = () => {
this.handleChange();
};
}
this.renderer.onButtonsInit(this.gateway.button.wrapper, () => {
this.handleChange();
}, true);
}
form() {
@ -25,7 +23,7 @@ class SingleProductBootstap {
handleChange() {
if (!this.shouldRender()) {
this.renderer.disableSmartButtons();
this.renderer.disableSmartButtons(this.gateway.button.wrapper);
hide(this.gateway.button.wrapper, this.formSelector);
hide(this.gateway.messages.wrapper);
return;
@ -33,7 +31,7 @@ class SingleProductBootstap {
this.render();
this.renderer.enableSmartButtons();
this.renderer.enableSmartButtons(this.gateway.button.wrapper);
show(this.gateway.button.wrapper);
show(this.gateway.messages.wrapper);
@ -42,12 +40,12 @@ class SingleProductBootstap {
handleButtonStatus() {
if (!this.shouldEnable()) {
this.renderer.disableSmartButtons();
this.renderer.disableSmartButtons(this.gateway.button.wrapper);
disable(this.gateway.button.wrapper, this.formSelector);
disable(this.gateway.messages.wrapper);
return;
}
this.renderer.enableSmartButtons();
this.renderer.enableSmartButtons(this.gateway.button.wrapper);
enable(this.gateway.button.wrapper);
enable(this.gateway.messages.wrapper);
}

51
modules/ppcp-button/resources/js/modules/Renderer/Renderer.js
View file

@ -1,12 +1,14 @@
import merge from "deepmerge";
class Renderer {
constructor(creditCardRenderer, defaultSettings, onSmartButtonClick, onSmartButtonsInit, smartButtonsOptions) {
constructor(creditCardRenderer, defaultSettings, onSmartButtonClick, onSmartButtonsInit) {
this.defaultSettings = defaultSettings;
this.creditCardRenderer = creditCardRenderer;
this.onSmartButtonClick = onSmartButtonClick;
this.onSmartButtonsInit = onSmartButtonsInit;
this.smartButtonsOptions = smartButtonsOptions;
this.buttonsOptions = {};
this.onButtonsInitListeners = {};
this.renderedSources = new Set();
}
@ -78,7 +80,10 @@ class Renderer {
style,
...contextConfig,
onClick: this.onSmartButtonClick,
onInit: this.onSmartButtonsInit,
onInit: (data, actions) => {
this.onSmartButtonsInit(data, actions);
this.handleOnButtonsInit(wrapper, data, actions);
},
});
if (!btn.isEligible()) {
return;
@ -108,18 +113,42 @@ class Renderer {
this.creditCardRenderer.enableFields();
}
disableSmartButtons() {
if (!this.smartButtonsOptions || !this.smartButtonsOptions.actions) {
return;
}
this.smartButtonsOptions.actions.disable();
onButtonsInit(wrapper, handler, reset) {
this.onButtonsInitListeners[wrapper] = reset ? [] : (this.onButtonsInitListeners[wrapper] || []);
this.onButtonsInitListeners[wrapper].push(handler);
}
enableSmartButtons() {
if (!this.smartButtonsOptions || !this.smartButtonsOptions.actions) {
handleOnButtonsInit(wrapper, data, actions) {
this.buttonsOptions[wrapper] = {
data: data,
actions: actions
}
if (this.onButtonsInitListeners[wrapper]) {
for (let handler of this.onButtonsInitListeners[wrapper]) {
if (typeof handler === 'function') {
handler({
wrapper: wrapper,
...this.buttonsOptions[wrapper]
});
}
}
}
}
disableSmartButtons(wrapper) {
if (!this.buttonsOptions[wrapper]) {
return;
}
this.smartButtonsOptions.actions.enable();
this.buttonsOptions[wrapper].actions.disable();
}
enableSmartButtons(wrapper) {
if (!this.buttonsOptions[wrapper]) {
return;
}
this.buttonsOptions[wrapper].actions.enable();
}
}

51
modules/ppcp-button/src/Assets/SmartButton.php
View file

@ -857,11 +857,12 @@ class SmartButton implements SmartButtonInterface {
'bn_codes' => $this->bn_codes(),
'payer' => $this->payerData(),
'button' => array(
'wrapper' => '#ppc-button-' . PayPalGateway::ID,
'mini_cart_wrapper' => '#ppc-button-minicart',
'cancel_wrapper' => '#ppcp-cancel',
'is_disabled' => $this->is_button_disabled(),
'mini_cart_style' => array(
'wrapper' => '#ppc-button-' . PayPalGateway::ID,
'is_disabled' => $this->is_button_disabled(),
'mini_cart_wrapper' => '#ppc-button-minicart',
'is_mini_cart_disabled' => $this->is_button_disabled( 'mini-cart' ),
'cancel_wrapper' => '#ppcp-cancel',
'mini_cart_style' => array(
'layout' => $this->style_for_context( 'layout', 'mini-cart' ),
'color' => $this->style_for_context( 'color', 'mini-cart' ),
'shape' => $this->style_for_context( 'shape', 'mini-cart' ),
@ -869,7 +870,7 @@ class SmartButton implements SmartButtonInterface {
'tagline' => $this->style_for_context( 'tagline', 'mini-cart' ),
'height' => $this->settings->has( 'button_mini-cart_height' ) && $this->settings->get( 'button_mini-cart_height' ) ? $this->normalize_height( (int) $this->settings->get( 'button_mini-cart_height' ) ) : 35,
),
'style' => array(
'style' => array(
'layout' => $this->style_for_context( 'layout', $this->context() ),
'color' => $this->style_for_context( 'color', $this->context() ),
'shape' => $this->style_for_context( 'shape', $this->context() ),
@ -1354,10 +1355,14 @@ class SmartButton implements SmartButtonInterface {
/**
* Checks if PayPal buttons/messages should be rendered for the current page.
*
* @param string|null $context The context that should be checked, use default otherwise.
*
* @return bool
*/
protected function is_button_disabled(): bool {
$context = $this->context();
protected function is_button_disabled( string $context = null ): bool {
if ( null === $context ) {
$context = $this->context();
}
if ( 'product' === $context ) {
$product = wc_get_product();
@ -1365,32 +1370,28 @@ class SmartButton implements SmartButtonInterface {
/**
* Allows to decide if the button should be disabled for a given product
*/
if ( ( $isDisabled = apply_filters(
$is_disabled = apply_filters(
'woocommerce_paypal_payments_product_button_disabled',
null,
$product )
) !== null) {
return $isDisabled;
}
} else {
$filterName = 'woocommerce_paypal_payments_'
. str_replace('-', '_', $context)
. '_button_disabled';
$product
);
/**
* Allows to decide if the button should be disabled in a given context
*/
if ( ( $isDisabled = apply_filters( $filterName, null ) ) !== null ) {
return $isDisabled;
if ( $is_disabled !== null ) {
return $is_disabled;
}
}
if ( ( $isDisabled = apply_filters(
/**
* Allows to decide if the button should be disabled globally or on a given context
*/
$is_disabled = apply_filters(
'woocommerce_paypal_payments_button_disabled',
null,
$context
) ) !== null ) {
return $isDisabled;
);
if ( $is_disabled !== null ) {
return $is_disabled;
}
return false;