Merge pull request #1485 from woocommerce/PCP-1788-filter-to-conditionally-block-the-pay-pal-buttons

Filter to conditionally block the PayPal buttons (1788)

modules/ppcp-button/resources/js/button.js

@@ -132,21 +132,10 @@ const bootstrap = () => {
         }
     };
 
-    let smartButtonsOptions = {
+    const onSmartButtonsInit = () => {
-        onInit: null,
-        init: function (actions) {
-            this.actions = actions;
-            if (typeof this.onInit === 'function') {
-                this.onInit();
-            }
-        }
-    };
-
-    const onSmartButtonsInit = (data, actions) => {
         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') {

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,

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;

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;

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.onButtonsInit(this.gateway.button.wrapper, () => {
-            this.renderer.smartButtonsOptions.onInit = () => {
+            this.handleChange();
-                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()) {
+        BootstrapHelper.handleButtonStatus(this, {
-            this.renderer.disableSmartButtons();
+            formSelector: this.formSelector
-            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);
     }
 
     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'));
     }

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;
+    }
+}

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('> *')

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() {
+    onButtonsInit(wrapper, handler, reset) {
-        if (!this.smartButtonsOptions || !this.smartButtonsOptions.actions) {
+        this.onButtonsInitListeners[wrapper] = reset ? [] : (this.onButtonsInitListeners[wrapper] || []);
-            return;
+        this.onButtonsInitListeners[wrapper].push(handler);
-        }
-        this.smartButtonsOptions.actions.disable();
     }
 
-    enableSmartButtons() {
+    handleOnButtonsInit(wrapper, data, actions) {
-        if (!this.smartButtonsOptions || !this.smartButtonsOptions.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();
     }
 }
 

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,
+				'wrapper'               => '#ppc-button-' . PayPalGateway::ID,
-				'mini_cart_wrapper' => '#ppc-button-minicart',
+				'is_disabled'           => $this->is_button_disabled(),
-				'cancel_wrapper'    => '#ppcp-cancel',
+				'mini_cart_wrapper'     => '#ppc-button-minicart',
-				'mini_cart_style'   => array(
+				'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.
 	 *