diff --git a/modules/ppcp-button/resources/js/button.js b/modules/ppcp-button/resources/js/button.js index 0fbccd095..17fcf1bfd 100644 --- a/modules/ppcp-button/resources/js/button.js +++ b/modules/ppcp-button/resources/js/button.js @@ -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') { diff --git a/modules/ppcp-button/resources/js/modules/ContextBootstrap/CartBootstap.js b/modules/ppcp-button/resources/js/modules/ContextBootstrap/CartBootstap.js index cc613da83..978ee2578 100644 --- a/modules/ppcp-button/resources/js/modules/ContextBootstrap/CartBootstap.js +++ b/modules/ppcp-button/resources/js/modules/ContextBootstrap/CartBootstap.js @@ -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; } diff --git a/modules/ppcp-button/resources/js/modules/ContextBootstrap/CheckoutBootstap.js b/modules/ppcp-button/resources/js/modules/ContextBootstrap/CheckoutBootstap.js index a42902d9b..551baa75b 100644 --- a/modules/ppcp-button/resources/js/modules/ContextBootstrap/CheckoutBootstap.js +++ b/modules/ppcp-button/resources/js/modules/ContextBootstrap/CheckoutBootstap.js @@ -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; diff --git a/modules/ppcp-button/resources/js/modules/ContextBootstrap/MiniCartBootstap.js b/modules/ppcp-button/resources/js/modules/ContextBootstrap/MiniCartBootstap.js index a391ee7cd..c993f3be0 100644 --- a/modules/ppcp-button/resources/js/modules/ContextBootstrap/MiniCartBootstap.js +++ b/modules/ppcp-button/resources/js/modules/ContextBootstrap/MiniCartBootstap.js @@ -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() { diff --git a/modules/ppcp-button/resources/js/modules/ContextBootstrap/SingleProductBootstap.js b/modules/ppcp-button/resources/js/modules/ContextBootstrap/SingleProductBootstap.js index 8e88d0a2b..b7addb4a5 100644 --- a/modules/ppcp-button/resources/js/modules/ContextBootstrap/SingleProductBootstap.js +++ b/modules/ppcp-button/resources/js/modules/ContextBootstrap/SingleProductBootstap.js @@ -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); } 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 5a7341e77..e64633d1f 100644 --- a/modules/ppcp-button/src/Assets/SmartButton.php +++ b/modules/ppcp-button/src/Assets/SmartButton.php @@ -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;