From 57af25a197599ceaec706b510b722ad650fa5467 Mon Sep 17 00:00:00 2001 From: Alex P Date: Thu, 20 Oct 2022 09:24:24 +0300 Subject: [PATCH 1/2] Hide order button via class --- .../resources/css/hosted-fields.scss | 4 ++++ modules/ppcp-button/resources/js/button.js | 4 ++-- .../ContextBootstrap/CheckoutBootstap.js | 13 ++----------- .../resources/js/modules/Helper/Hiding.js | 17 +++++++++++++++++ 4 files changed, 25 insertions(+), 13 deletions(-) diff --git a/modules/ppcp-button/resources/css/hosted-fields.scss b/modules/ppcp-button/resources/css/hosted-fields.scss index 2305d313b..d4fcdab0a 100644 --- a/modules/ppcp-button/resources/css/hosted-fields.scss +++ b/modules/ppcp-button/resources/css/hosted-fields.scss @@ -15,3 +15,7 @@ .ppcp-dcc-order-button { float: right; } + +#place_order.ppcp-hidden { + display: none !important; +} diff --git a/modules/ppcp-button/resources/js/button.js b/modules/ppcp-button/resources/js/button.js index 9d9d792ae..b1f19bbac 100644 --- a/modules/ppcp-button/resources/js/button.js +++ b/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 diff --git a/modules/ppcp-button/resources/js/modules/ContextBootstrap/CheckoutBootstap.js b/modules/ppcp-button/resources/js/modules/ContextBootstrap/CheckoutBootstap.js index 9d008d4b6..b491bcb1e 100644 --- a/modules/ppcp-button/resources/js/modules/ContextBootstrap/CheckoutBootstap.js +++ b/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); diff --git a/modules/ppcp-button/resources/js/modules/Helper/Hiding.js b/modules/ppcp-button/resources/js/modules/Helper/Hiding.js index 8a76164f7..96836de0c 100644 --- a/modules/ppcp-button/resources/js/modules/Helper/Hiding.js +++ b/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); }; From 4ca9639fb17016f97e22b9dd5e926dc93acc1286 Mon Sep 17 00:00:00 2001 From: Alex P Date: Thu, 20 Oct 2022 13:13:42 +0300 Subject: [PATCH 2/2] Add CSS file for non-DCC rules --- modules/ppcp-button/resources/css/gateway.scss | 3 +++ .../ppcp-button/resources/css/hosted-fields.scss | 4 ---- modules/ppcp-button/src/Assets/SmartButton.php | 15 ++++++++++++--- modules/ppcp-button/webpack.config.js | 3 ++- 4 files changed, 17 insertions(+), 8 deletions(-) create mode 100644 modules/ppcp-button/resources/css/gateway.scss diff --git a/modules/ppcp-button/resources/css/gateway.scss b/modules/ppcp-button/resources/css/gateway.scss new file mode 100644 index 000000000..0a97127ab --- /dev/null +++ b/modules/ppcp-button/resources/css/gateway.scss @@ -0,0 +1,3 @@ +#place_order.ppcp-hidden { + display: none !important; +} diff --git a/modules/ppcp-button/resources/css/hosted-fields.scss b/modules/ppcp-button/resources/css/hosted-fields.scss index d4fcdab0a..2305d313b 100644 --- a/modules/ppcp-button/resources/css/hosted-fields.scss +++ b/modules/ppcp-button/resources/css/hosted-fields.scss @@ -15,7 +15,3 @@ .ppcp-dcc-order-button { float: right; } - -#place_order.ppcp-hidden { - display: none !important; -} diff --git a/modules/ppcp-button/src/Assets/SmartButton.php b/modules/ppcp-button/src/Assets/SmartButton.php index b69417a03..89c15b90b 100644 --- a/modules/ppcp-button/src/Assets/SmartButton.php +++ b/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( diff --git a/modules/ppcp-button/webpack.config.js b/modules/ppcp-button/webpack.config.js index 331df1d86..8e02ccaa5 100644 --- a/modules/ppcp-button/webpack.config.js +++ b/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/'),