Merge pull request #921 from woocommerce/pcp-948-improve-button-visibility-setting

Hide order button via class

modules/ppcp-button/resources/css/gateway.scss

@@ -0,0 +1,3 @@
+#place_order.ppcp-hidden {
+	display: none !important;
+}

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

@@ -14,7 +14,7 @@ import {
     ORDER_BUTTON_SELECTOR,
     PaymentMethods
 } from "./modules/Helper/CheckoutMethodState";
-import {hide, setVisible} from "./modules/Helper/Hiding";
+import {hide, setVisible, setVisibleByClass} from "./modules/Helper/Hiding";
 import {isChangePaymentPage} from "./modules/Helper/Subscriptions";
 import FreeTrialHandler from "./modules/ActionHandler/FreeTrialHandler";
 
@@ -190,7 +190,7 @@ document.addEventListener(
             const isPaypalButton = paypalButtonGatewayIds.includes(currentPaymentMethod);
             const isCards = currentPaymentMethod === PaymentMethods.CARDS;
 
-            setVisible(ORDER_BUTTON_SELECTOR, !isPaypalButton && !isCards, true);
+            setVisibleByClass(ORDER_BUTTON_SELECTOR, !isPaypalButton && !isCards, 'ppcp-hidden');
 
             if (isPaypalButton) {
                 // stopped after the first rendering of the buttons, in onInit

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

@@ -1,6 +1,6 @@
 import ErrorHandler from '../ErrorHandler';
 import CheckoutActionHandler from '../ActionHandler/CheckoutActionHandler';
-import { setVisible } from '../Helper/Hiding';
+import {setVisible, setVisibleByClass} from '../Helper/Hiding';
 import {
     getCurrentPaymentMethod,
     isSavedCardSelected, ORDER_BUTTON_SELECTOR,
@@ -15,10 +15,6 @@ class CheckoutBootstap {
         this.spinner = spinner;
 
         this.standardOrderButtonSelector = ORDER_BUTTON_SELECTOR;
-
-        this.buttonChangeObserver = new MutationObserver((el) => {
-            this.updateUi();
-        });
     }
 
     init() {
@@ -71,11 +67,6 @@ class CheckoutBootstap {
         this.renderer.render(
             actionHandler.configuration()
         );
-
-        this.buttonChangeObserver.observe(
-            document.querySelector(this.standardOrderButtonSelector),
-            {attributes: true}
-        );
     }
 
     updateUi() {
@@ -95,7 +86,7 @@ class CheckoutBootstap {
                 }, {}),
         };
 
-        setVisible(this.standardOrderButtonSelector,  (isPaypal && isFreeTrial && hasVaultedPaypal) || isNotOurGateway || isSavedCard, true);
+        setVisibleByClass(this.standardOrderButtonSelector, (isPaypal && isFreeTrial && hasVaultedPaypal) || isNotOurGateway || isSavedCard, 'ppcp-hidden');
         setVisible('.ppcp-vaulted-paypal-details', isPaypal);
         setVisible(this.gateway.button.wrapper, isPaypal && !(isFreeTrial && hasVaultedPaypal));
         setVisible(this.gateway.messages.wrapper, isPaypal && !isFreeTrial);

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

@@ -1,3 +1,7 @@
+/**
+ * @param selectorOrElement
+ * @returns {Element}
+ */
 const getElement = (selectorOrElement) => {
     if (typeof selectorOrElement === 'string') {
         return document.querySelector(selectorOrElement);
@@ -35,6 +39,19 @@ export const setVisible = (selectorOrElement, show, important = false) => {
     }
 };
 
+export const setVisibleByClass = (selectorOrElement, show, hiddenClass) => {
+    const element = getElement(selectorOrElement);
+    if (!element) {
+        return;
+    }
+
+    if (show) {
+        element.classList.remove(hiddenClass);
+    } else {
+        element.classList.add(hiddenClass);
+    }
+};
+
 export const hide = (selectorOrElement, important = false) => {
     setVisible(selectorOrElement, false, important);
 };

modules/ppcp-button/src/Assets/SmartButton.php

@@ -522,13 +522,22 @@ class SmartButton implements SmartButtonInterface {
 			$load_script = true;
 		}
 
-		if ( in_array( $this->context(), array( 'pay-now', 'checkout' ), true ) && $this->can_render_dcc() ) {
+		if ( in_array( $this->context(), array( 'pay-now', 'checkout' ), true ) ) {
 			wp_enqueue_style(
-				'ppcp-hosted-fields',
-				untrailingslashit( $this->module_url ) . '/assets/css/hosted-fields.css',
+				'gateway',
+				untrailingslashit( $this->module_url ) . '/assets/css/gateway.css',
 				array(),
 				$this->version
 			);
+
+			if ( $this->can_render_dcc() ) {
+				wp_enqueue_style(
+					'ppcp-hosted-fields',
+					untrailingslashit( $this->module_url ) . '/assets/css/hosted-fields.css',
+					array(),
+					$this->version
+				);
+			}
 		}
 		if ( $load_script ) {
 			wp_enqueue_script(

modules/ppcp-button/webpack.config.js

@@ -7,7 +7,8 @@ module.exports = {
     target: 'web',
     entry: {
         button: path.resolve('./resources/js/button.js'),
-        "hosted-fields": path.resolve('./resources/css/hosted-fields.scss')
+        "hosted-fields": path.resolve('./resources/css/hosted-fields.scss'),
+        "gateway": path.resolve('./resources/css/gateway.scss')
     },
     output: {
         path: path.resolve(__dirname, 'assets/'),