diff --git a/modules/ppcp-button/resources/js/button.js b/modules/ppcp-button/resources/js/button.js index f5e41bc68..bee8c2361 100644 --- a/modules/ppcp-button/resources/js/button.js +++ b/modules/ppcp-button/resources/js/button.js @@ -132,21 +132,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); if (context === 'mini-cart' || context === 'product') { if (PayPalCommerceGateway.mini_cart_buttons_enabled === '1') { diff --git a/modules/ppcp-button/resources/js/modules/ContextBootstrap/CartBootstap.js b/modules/ppcp-button/resources/js/modules/ContextBootstrap/CartBootstap.js index 72d28932b..504fc4c42 100644 --- a/modules/ppcp-button/resources/js/modules/ContextBootstrap/CartBootstap.js +++ b/modules/ppcp-button/resources/js/modules/ContextBootstrap/CartBootstap.js @@ -1,4 +1,5 @@ import CartActionHandler from '../ActionHandler/CartActionHandler'; +import BootstrapHelper from "../Helper/BootstrapHelper"; import {setVisible} from "../Helper/Hiding"; class CartBootstrap { @@ -6,6 +7,10 @@ class CartBootstrap { this.gateway = gateway; this.renderer = renderer; this.errorHandler = errorHandler; + + this.renderer.onButtonsInit(this.gateway.button.wrapper, () => { + this.handleButtonStatus(); + }, true); } init() { @@ -14,9 +19,11 @@ class CartBootstrap { } this.render(); + this.handleButtonStatus(); jQuery(document.body).on('updated_cart_totals updated_checkout', () => { this.render(); + this.handleButtonStatus(); fetch( this.gateway.ajax.cart_script_params.endpoint, @@ -40,10 +47,18 @@ class CartBootstrap { }); } + handleButtonStatus() { + BootstrapHelper.handleButtonStatus(this); + } + shouldRender() { return document.querySelector(this.gateway.button.wrapper) !== null; } + shouldEnable() { + return BootstrapHelper.shouldEnable(this); + } + render() { const actionHandler = new CartActionHandler( PayPalCommerceGateway, diff --git a/modules/ppcp-button/resources/js/modules/ContextBootstrap/CheckoutBootstap.js b/modules/ppcp-button/resources/js/modules/ContextBootstrap/CheckoutBootstap.js index 59c6197a3..b426ac3ee 100644 --- a/modules/ppcp-button/resources/js/modules/ContextBootstrap/CheckoutBootstap.js +++ b/modules/ppcp-button/resources/js/modules/ContextBootstrap/CheckoutBootstap.js @@ -5,6 +5,8 @@ import { isSavedCardSelected, ORDER_BUTTON_SELECTOR, PaymentMethods } from "../Helper/CheckoutMethodState"; +import BootstrapHelper from "../Helper/BootstrapHelper"; +import {disable, enable} from "../Helper/ButtonDisabler"; class CheckoutBootstap { constructor(gateway, renderer, messages, spinner, errorHandler) { @@ -15,10 +17,15 @@ class CheckoutBootstap { this.errorHandler = errorHandler; this.standardOrderButtonSelector = ORDER_BUTTON_SELECTOR; + + this.renderer.onButtonsInit(this.gateway.button.wrapper, () => { + this.handleButtonStatus(); + }, true); } init() { this.render(); + this.handleButtonStatus(); // Unselect saved card. // WC saves form values, so with our current UI it would be a bit weird @@ -28,6 +35,7 @@ class CheckoutBootstap { jQuery(document.body).on('updated_checkout', () => { this.render() + this.handleButtonStatus(); }); jQuery(document.body).on('updated_checkout payment_method_selected', () => { @@ -43,6 +51,10 @@ class CheckoutBootstap { this.updateUi(); } + handleButtonStatus() { + BootstrapHelper.handleButtonStatus(this); + } + shouldRender() { if (document.querySelector(this.gateway.button.cancel_wrapper)) { return false; @@ -51,6 +63,10 @@ class CheckoutBootstap { return document.querySelector(this.gateway.button.wrapper) !== null || document.querySelector(this.gateway.hosted_fields.wrapper) !== null; } + shouldEnable() { + return BootstrapHelper.shouldEnable(this); + } + render() { if (!this.shouldRender()) { return; diff --git a/modules/ppcp-button/resources/js/modules/ContextBootstrap/MiniCartBootstap.js b/modules/ppcp-button/resources/js/modules/ContextBootstrap/MiniCartBootstap.js index 443c9afe4..4b4e3efd6 100644 --- a/modules/ppcp-button/resources/js/modules/ContextBootstrap/MiniCartBootstap.js +++ b/modules/ppcp-button/resources/js/modules/ContextBootstrap/MiniCartBootstap.js @@ -1,4 +1,5 @@ import CartActionHandler from '../ActionHandler/CartActionHandler'; +import BootstrapHelper from "../Helper/BootstrapHelper"; class MiniCartBootstap { constructor(gateway, renderer, errorHandler) { @@ -15,9 +16,22 @@ class MiniCartBootstap { this.errorHandler, ); this.render(); + 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() { + BootstrapHelper.handleButtonStatus(this, { + wrapper: this.gateway.button.mini_cart_wrapper, + skipMessages: true }); } @@ -26,6 +40,12 @@ class MiniCartBootstap { || document.querySelector(this.gateway.hosted_fields.mini_cart_wrapper) !== null; } + shouldEnable() { + return BootstrapHelper.shouldEnable(this, { + isDisabled: !!this.gateway.button.is_mini_cart_disabled + }); + } + render() { if (!this.shouldRender()) { return; diff --git a/modules/ppcp-button/resources/js/modules/ContextBootstrap/SingleProductBootstap.js b/modules/ppcp-button/resources/js/modules/ContextBootstrap/SingleProductBootstap.js index 540b085c1..231460642 100644 --- a/modules/ppcp-button/resources/js/modules/ContextBootstrap/SingleProductBootstap.js +++ b/modules/ppcp-button/resources/js/modules/ContextBootstrap/SingleProductBootstap.js @@ -1,7 +1,7 @@ import UpdateCart from "../Helper/UpdateCart"; import SingleProductActionHandler from "../ActionHandler/SingleProductActionHandler"; import {hide, show} from "../Helper/Hiding"; -import {disable, enable} from "../Helper/ButtonDisabler"; +import BootstrapHelper from "../Helper/BootstrapHelper"; class SingleProductBootstap { constructor(gateway, renderer, messages, errorHandler) { @@ -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); @@ -41,15 +39,9 @@ class SingleProductBootstap { } handleButtonStatus() { - if (!this.shouldEnable()) { - this.renderer.disableSmartButtons(); - disable(this.gateway.button.wrapper, this.formSelector); - disable(this.gateway.messages.wrapper); - return; - } - this.renderer.enableSmartButtons(); - enable(this.gateway.button.wrapper); - enable(this.gateway.messages.wrapper); + BootstrapHelper.handleButtonStatus(this, { + formSelector: this.formSelector + }); } init() { @@ -94,7 +86,7 @@ class SingleProductBootstap { const form = this.form(); const addToCartButton = form ? form.querySelector('.single_add_to_cart_button') : null; - return this.shouldRender() + return BootstrapHelper.shouldEnable(this) && !this.priceAmountIsZero() && ((null === addToCartButton) || !addToCartButton.classList.contains('disabled')); } diff --git a/modules/ppcp-button/resources/js/modules/Helper/BootstrapHelper.js b/modules/ppcp-button/resources/js/modules/Helper/BootstrapHelper.js new file mode 100644 index 000000000..ba00e2c76 --- /dev/null +++ b/modules/ppcp-button/resources/js/modules/Helper/BootstrapHelper.js @@ -0,0 +1,40 @@ +import {disable, enable} from "./ButtonDisabler"; + +/** + * Common Bootstrap methods to avoid code repetition. + */ +export default class BootstrapHelper { + + static handleButtonStatus(bs, options) { + options = options || {}; + options.wrapper = options.wrapper || bs.gateway.button.wrapper; + options.messagesWrapper = options.messagesWrapper || bs.gateway.messages.wrapper; + options.skipMessages = options.skipMessages || false; + + if (!bs.shouldEnable()) { + bs.renderer.disableSmartButtons(options.wrapper); + disable(options.wrapper, options.formSelector || null); + + if (!options.skipMessages) { + disable(options.messagesWrapper); + } + return; + } + bs.renderer.enableSmartButtons(options.wrapper); + enable(options.wrapper); + + if (!options.skipMessages) { + enable(options.messagesWrapper); + } + } + + static shouldEnable(bs, options) { + options = options || {}; + if (typeof options.isDisabled === 'undefined') { + options.isDisabled = bs.gateway.button.is_disabled; + } + + return bs.shouldRender() + && options.isDisabled !== true; + } +} diff --git a/modules/ppcp-button/resources/js/modules/Helper/ButtonDisabler.js b/modules/ppcp-button/resources/js/modules/Helper/ButtonDisabler.js index 9e4bf51ee..ae7f3665c 100644 --- a/modules/ppcp-button/resources/js/modules/Helper/ButtonDisabler.js +++ b/modules/ppcp-button/resources/js/modules/Helper/ButtonDisabler.js @@ -36,7 +36,10 @@ export const setEnabled = (selectorOrElement, enable, form = null) => { if (form) { // Trigger form submit to show the error message - jQuery(form).find(':submit').trigger('click'); + let $form = jQuery(form); + if ($form.find('.single_add_to_cart_button').hasClass('disabled')) { + $form.find(':submit').trigger('click'); + } } }) .find('> *') diff --git a/modules/ppcp-button/resources/js/modules/Renderer/Renderer.js b/modules/ppcp-button/resources/js/modules/Renderer/Renderer.js index efd3c0bfa..1f0e3d31a 100644 --- a/modules/ppcp-button/resources/js/modules/Renderer/Renderer.js +++ b/modules/ppcp-button/resources/js/modules/Renderer/Renderer.js @@ -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(); } } diff --git a/modules/ppcp-button/src/Assets/SmartButton.php b/modules/ppcp-button/src/Assets/SmartButton.php index 708b04717..fded20a67 100644 --- a/modules/ppcp-button/src/Assets/SmartButton.php +++ b/modules/ppcp-button/src/Assets/SmartButton.php @@ -867,10 +867,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', - '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' ), @@ -878,7 +880,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() ), @@ -1361,6 +1363,51 @@ 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( string $context = null ): bool { + if ( null === $context ) { + $context = $this->context(); + } + + if ( 'product' === $context ) { + $product = wc_get_product(); + + /** + * Allows to decide if the button should be disabled for a given product + */ + $is_disabled = apply_filters( + 'woocommerce_paypal_payments_product_buttons_disabled', + null, + $product + ); + + if ( $is_disabled !== null ) { + return $is_disabled; + } + } + + /** + * Allows to decide if the button should be disabled globally or on a given context + */ + $is_disabled = apply_filters( + 'woocommerce_paypal_payments_buttons_disabled', + null, + $context + ); + + if ( $is_disabled !== null ) { + return $is_disabled; + } + + return false; + } + /** * Retrieves all payment tokens for the user, via API or cached if already queried. *