From 46c575a4010410beb0fb48ba98174004e9957212 Mon Sep 17 00:00:00 2001 From: Pedro Silva Date: Thu, 7 Dec 2023 18:20:58 +0000 Subject: [PATCH 1/5] Fix apm button styling --- .../ppcp-applepay/resources/css/styles.scss | 20 +++-- .../resources/js/ApplepayButton.js | 17 +++- .../ppcp-applepay/resources/js/boot-admin.js | 2 +- .../ppcp-applepay/resources/js/boot-block.js | 2 +- .../src/Assets/ApplePayButton.php | 4 +- .../src/Assets/DataToAppleButtonScripts.php | 3 + .../ppcp-button/resources/css/gateway.scss | 11 +++ .../resources/css/mixins/apm-button.scss | 18 ++++ .../resources/js/modules/Helper/ApmButton.js | 83 +++++++++++++++++++ .../ppcp-googlepay/resources/css/styles.scss | 11 --- .../resources/js/GooglepayButton.js | 3 + .../ppcp-googlepay/resources/js/boot-admin.js | 2 +- .../ppcp-googlepay/resources/js/boot-block.js | 2 +- modules/ppcp-googlepay/src/Assets/Button.php | 4 +- .../ppcp-wc-gateway/resources/css/common.scss | 10 +++ .../ppcp-wc-gateway/resources/js/common.js | 3 - 16 files changed, 163 insertions(+), 32 deletions(-) create mode 100644 modules/ppcp-button/resources/css/mixins/apm-button.scss create mode 100644 modules/ppcp-button/resources/js/modules/Helper/ApmButton.js diff --git a/modules/ppcp-applepay/resources/css/styles.scss b/modules/ppcp-applepay/resources/css/styles.scss index 215a7888e..cb98a7e17 100644 --- a/modules/ppcp-applepay/resources/css/styles.scss +++ b/modules/ppcp-applepay/resources/css/styles.scss @@ -1,26 +1,34 @@ +.ppcp-button-applepay { + .ppcp-width-min & { + --apple-pay-button-height: 35px; + } + .ppcp-width-300 & { + --apple-pay-button-height: 45px; + } + .ppcp-width-500 & { + --apple-pay-button-height: 55px; + } +} + #applepay-container, .ppcp-button-applepay { - --apple-pay-button-height: 45px; - --apple-pay-button-min-height: 40px; + --apple-pay-button-min-height: 35px; --apple-pay-button-width: 100%; --apple-pay-button-max-width: 750px; --apple-pay-button-border-radius: 4px; --apple-pay-button-overflow: hidden; - margin:7px 0; + &.ppcp-button-pill { --apple-pay-button-border-radius: 50px; } &.ppcp-button-minicart { --apple-pay-button-display: block; - --apple-pay-button-height: 40px; } } .woocommerce-checkout { #applepay-container, .ppcp-button-applepay { - margin-top: 0; --apple-pay-button-border-radius: 4px; - --apple-pay-button-height: 45px; &.ppcp-button-pill { --apple-pay-button-border-radius: 50px; } diff --git a/modules/ppcp-applepay/resources/js/ApplepayButton.js b/modules/ppcp-applepay/resources/js/ApplepayButton.js index c6e05cf35..068f83086 100644 --- a/modules/ppcp-applepay/resources/js/ApplepayButton.js +++ b/modules/ppcp-applepay/resources/js/ApplepayButton.js @@ -5,10 +5,13 @@ import {setEnabled} from '../../../ppcp-button/resources/js/modules/Helper/Butto import FormValidator from "../../../ppcp-button/resources/js/modules/Helper/FormValidator"; import ErrorHandler from '../../../ppcp-button/resources/js/modules/ErrorHandler'; import widgetBuilder from "../../../ppcp-button/resources/js/modules/Renderer/WidgetBuilder"; +import {apmButtonInit} from "../../../ppcp-button/resources/js/modules/Helper/ApmButton"; class ApplepayButton { constructor(context, externalHandler, buttonConfig, ppcpConfig) { + apmButtonInit(); + this.isInitialized = false; this.context = context; @@ -60,7 +63,7 @@ class ApplepayButton { this.initEventHandlers(); this.isInitialized = true; this.applePayConfig = config; - const isEligible = this.applePayConfig.isEligible; + const isEligible = (this.applePayConfig.isEligible && window.ApplePaySession) || this.buttonConfig.is_admin; if (isEligible) { this.fetchTransactionInfo().then(() => { @@ -84,6 +87,10 @@ class ApplepayButton { }); } }); + } else { + jQuery('#' + this.buttonConfig.button.wrapper).hide(); + jQuery('#' + this.buttonConfig.button.mini_cart_wrapper).hide(); + jQuery('#express-payment-method-ppcp-applepay').hide(); } } @@ -179,13 +186,15 @@ class ApplepayButton { appleContainer.innerHTML = ``; } - jQuery('#' + wrapper).addClass('ppcp-button-' + ppcpStyle.shape); + const $wrapper = jQuery('#' + wrapper); + $wrapper.addClass('ppcp-button-' + ppcpStyle.shape); if (ppcpStyle.height) { - jQuery('#' + wrapper).css('--apple-pay-button-height', `${ppcpStyle.height}px`) + $wrapper.css('--apple-pay-button-height', `${ppcpStyle.height}px`) + $wrapper.css('height', `${ppcpStyle.height}px`) } - jQuery(wrapper).append(appleContainer); + jQuery(wrapper).append(appleContainer); // ToDo: this selector doesnt seem valid. } //------------------------ diff --git a/modules/ppcp-applepay/resources/js/boot-admin.js b/modules/ppcp-applepay/resources/js/boot-admin.js index 30032f56b..f584ce41b 100644 --- a/modules/ppcp-applepay/resources/js/boot-admin.js +++ b/modules/ppcp-applepay/resources/js/boot-admin.js @@ -65,7 +65,7 @@ import widgetBuilder from "../../../ppcp-button/resources/js/modules/Renderer/Wi buttonConfig.button.wrapper = selector.replace('#', ''); applyConfigOptions(buttonConfig); - const wrapperElement = `
`; + const wrapperElement = `
`; if (!jQuery(selector).length) { jQuery(ppcpConfig.button.wrapper).after(wrapperElement); diff --git a/modules/ppcp-applepay/resources/js/boot-block.js b/modules/ppcp-applepay/resources/js/boot-block.js index 2e6b99124..6850b6346 100644 --- a/modules/ppcp-applepay/resources/js/boot-block.js +++ b/modules/ppcp-applepay/resources/js/boot-block.js @@ -50,7 +50,7 @@ const ApplePayComponent = () => { }, [paypalLoaded, applePayLoaded]); return ( -
+
); } diff --git a/modules/ppcp-applepay/src/Assets/ApplePayButton.php b/modules/ppcp-applepay/src/Assets/ApplePayButton.php index c34a9fc6c..f8ce67bd6 100644 --- a/modules/ppcp-applepay/src/Assets/ApplePayButton.php +++ b/modules/ppcp-applepay/src/Assets/ApplePayButton.php @@ -968,7 +968,7 @@ function () { add_action( $render_placeholder, function () { - echo ''; + echo ''; }, 21 ); @@ -981,7 +981,7 @@ function () { */ protected function applepay_button(): void { ?> -
+
$this->sdk_url, 'is_debug' => defined( 'WP_DEBUG' ) && WP_DEBUG ? true : false, + 'is_admin' => false, 'preferences' => array( 'checkout_data_mode' => $checkout_data_mode, ), @@ -204,6 +205,7 @@ protected function data_for_cart_page( return array( 'sdk_url' => $this->sdk_url, 'is_debug' => defined( 'WP_DEBUG' ) && WP_DEBUG ? true : false, + 'is_admin' => false, 'preferences' => array( 'checkout_data_mode' => $checkout_data_mode, ), @@ -252,6 +254,7 @@ protected function data_for_admin_page( return array( 'sdk_url' => $this->sdk_url, 'is_debug' => defined( 'WP_DEBUG' ) && WP_DEBUG ? true : false, + 'is_admin' => true, 'preferences' => array( 'checkout_data_mode' => $checkout_data_mode, ), diff --git a/modules/ppcp-button/resources/css/gateway.scss b/modules/ppcp-button/resources/css/gateway.scss index 42b216e92..85f2356e7 100644 --- a/modules/ppcp-button/resources/css/gateway.scss +++ b/modules/ppcp-button/resources/css/gateway.scss @@ -1,3 +1,5 @@ +@use "mixins/apm-button" as apm-button; + #place_order.ppcp-hidden { display: none !important; } @@ -15,3 +17,12 @@ .ppc-button-wrapper #ppcp-messages:first-child { padding-top: 10px; } + +// Prevents spacing after button group. +#ppc-button-ppcp-gateway { + line-height: 0; +} + +.ppcp-button-apm { + @include apm-button.button; +} diff --git a/modules/ppcp-button/resources/css/mixins/apm-button.scss b/modules/ppcp-button/resources/css/mixins/apm-button.scss new file mode 100644 index 000000000..1de993b2b --- /dev/null +++ b/modules/ppcp-button/resources/css/mixins/apm-button.scss @@ -0,0 +1,18 @@ + +@mixin button { + min-width: 200px; + max-width: 750px; + line-height: 0; + + .ppcp-width-min & { + height: 35px; + } + + .ppcp-width-300 & { + height: 45px; + } + + .ppcp-width-500 & { + height: 55px; + } +} diff --git a/modules/ppcp-button/resources/js/modules/Helper/ApmButton.js b/modules/ppcp-button/resources/js/modules/Helper/ApmButton.js new file mode 100644 index 000000000..5e5c7fa0d --- /dev/null +++ b/modules/ppcp-button/resources/js/modules/Helper/ApmButton.js @@ -0,0 +1,83 @@ + +export const apmButtonInit = (selector = '.ppcp-button-apm') => { + if (window.apmButton) { + return; + } + window.apmButton = new ApmButton(selector); +} + +export class ApmButton { + + constructor(selector) { + this.selector = selector; + this.containers = []; + + jQuery(window).resize(() => { + this.refresh(); + }).resize(); + + // TODO: detect changes don't rely on setInterval + setInterval(() => { + jQuery(selector).each((index, el) => { + const parent = jQuery(el).parent(); + if (!this.containers.some($el => $el.is(parent))) { + this.containers.push(parent); + } + }); + + this.refresh(); + }, 100); + } + + refresh() { + for (const container of this.containers) { + const containerClasses = []; + const $container = jQuery(container); + + // Check width and add classes + const width = $container.width(); + + if (width >= 500) { + containerClasses.push('ppcp-width-500'); + } else if (width >= 300) { + containerClasses.push('ppcp-width-300'); + } else { + containerClasses.push('ppcp-width-min'); + } + + $container.removeClass('ppcp-width-500 ppcp-width-300 ppcp-width-min'); + $container.addClass(containerClasses.join(' ')); + + // Check first apm button + const $firstApmButton = $container.find(this.selector + ':visible').first(); + const $firstElement = $container.children(':visible').first(); + + let $spacingTopButton = null; + if (!$firstApmButton.is($firstElement)) { + $spacingTopButton = $firstApmButton; + } + + // Check last apm button + const $lastApmButton = $container.find(this.selector + ':visible').last(); + + // Assign margins to buttons + $container.find(this.selector).each((index, el) => { + const $el = jQuery(el); + const height = $el.height(); + + if ($el.is($spacingTopButton)) { + $el.css('margin-top', `${Math.round(height * 0.3)}px`); + } + + if ($el.is($lastApmButton)) { + $el.css('margin-bottom', `0px`); + return true; + } + + $el.css('margin-bottom', `${Math.round(height * 0.3)}px`); + }); + + } + } + +} diff --git a/modules/ppcp-googlepay/resources/css/styles.scss b/modules/ppcp-googlepay/resources/css/styles.scss index 82755efd8..5bdf8edae 100644 --- a/modules/ppcp-googlepay/resources/css/styles.scss +++ b/modules/ppcp-googlepay/resources/css/styles.scss @@ -1,8 +1,6 @@ .ppcp-button-googlepay { - margin: 7px 0; overflow: hidden; min-height: 40px; - height: 45px; &.ppcp-button-pill { border-radius: 50px; @@ -10,13 +8,6 @@ &.ppcp-button-minicart { display: block; - height: 40px; - } -} - -.woocommerce-checkout { - .ppcp-button-googlepay { - margin-top: 0; } } @@ -25,14 +16,12 @@ .wp-block-woocommerce-checkout { .ppcp-button-googlepay { margin: 0; - height: 48px; } } .wp-block-woocommerce-cart { .ppcp-button-googlepay { margin: 0; - height: 48px; } } diff --git a/modules/ppcp-googlepay/resources/js/GooglepayButton.js b/modules/ppcp-googlepay/resources/js/GooglepayButton.js index 9197cd5a5..ed70fd55b 100644 --- a/modules/ppcp-googlepay/resources/js/GooglepayButton.js +++ b/modules/ppcp-googlepay/resources/js/GooglepayButton.js @@ -3,10 +3,13 @@ import {setVisible} from '../../../ppcp-button/resources/js/modules/Helper/Hidin import {setEnabled} from '../../../ppcp-button/resources/js/modules/Helper/ButtonDisabler'; import widgetBuilder from "../../../ppcp-button/resources/js/modules/Renderer/WidgetBuilder"; import UpdatePaymentData from "./Helper/UpdatePaymentData"; +import {apmButtonInit} from "../../../ppcp-button/resources/js/modules/Helper/ApmButton"; class GooglepayButton { constructor(context, externalHandler, buttonConfig, ppcpConfig) { + apmButtonInit(); + this.isInitialized = false; this.context = context; diff --git a/modules/ppcp-googlepay/resources/js/boot-admin.js b/modules/ppcp-googlepay/resources/js/boot-admin.js index 577733b6b..3b971986f 100644 --- a/modules/ppcp-googlepay/resources/js/boot-admin.js +++ b/modules/ppcp-googlepay/resources/js/boot-admin.js @@ -67,7 +67,7 @@ import widgetBuilder from "../../../ppcp-button/resources/js/modules/Renderer/Wi buttonConfig.button.wrapper = selector; applyConfigOptions(buttonConfig); - const wrapperElement = `
`; + const wrapperElement = `
`; if (!jQuery(selector).length) { jQuery(ppcpConfig.button.wrapper).after(wrapperElement); diff --git a/modules/ppcp-googlepay/resources/js/boot-block.js b/modules/ppcp-googlepay/resources/js/boot-block.js index 69baf2d5e..3b68456b9 100644 --- a/modules/ppcp-googlepay/resources/js/boot-block.js +++ b/modules/ppcp-googlepay/resources/js/boot-block.js @@ -51,7 +51,7 @@ const GooglePayComponent = () => { }, [paypalLoaded, googlePayLoaded]); return ( -
+
); } diff --git a/modules/ppcp-googlepay/src/Assets/Button.php b/modules/ppcp-googlepay/src/Assets/Button.php index df482c73f..15f16e381 100644 --- a/modules/ppcp-googlepay/src/Assets/Button.php +++ b/modules/ppcp-googlepay/src/Assets/Button.php @@ -311,7 +311,7 @@ function () { add_action( $render_placeholder, function () { - echo ''; + echo ''; }, 21 ); @@ -325,7 +325,7 @@ function () { */ private function googlepay_button(): void { ?> -
+
{ const rules = jQuery(el).data('ppcpDisplay'); - - // console.log('rules', rules); - for (const rule of rules) { displayManager.addRule(rule); } From 55c7900a3e213f2a8d5b38ccb7df724b0ec30672 Mon Sep 17 00:00:00 2001 From: Pedro Silva Date: Mon, 11 Dec 2023 12:02:06 +0000 Subject: [PATCH 2/5] Adjust block button styles. --- .../ppcp-applepay/resources/css/styles.scss | 7 ++++++ .../resources/js/ApplepayButton.js | 2 +- .../ppcp-blocks/resources/css/gateway.scss | 9 ++++++++ modules/ppcp-blocks/src/BlocksModule.php | 22 +++++++++++++++++++ modules/ppcp-blocks/webpack.config.js | 3 ++- 5 files changed, 41 insertions(+), 2 deletions(-) create mode 100644 modules/ppcp-blocks/resources/css/gateway.scss diff --git a/modules/ppcp-applepay/resources/css/styles.scss b/modules/ppcp-applepay/resources/css/styles.scss index cb98a7e17..e15bf70ea 100644 --- a/modules/ppcp-applepay/resources/css/styles.scss +++ b/modules/ppcp-applepay/resources/css/styles.scss @@ -69,3 +69,10 @@ } } } + +// todo remove +.ppcp-button-applepay { + apple-pay-button { + display: block !important; + } +} diff --git a/modules/ppcp-applepay/resources/js/ApplepayButton.js b/modules/ppcp-applepay/resources/js/ApplepayButton.js index 068f83086..91cfd7659 100644 --- a/modules/ppcp-applepay/resources/js/ApplepayButton.js +++ b/modules/ppcp-applepay/resources/js/ApplepayButton.js @@ -63,7 +63,7 @@ class ApplepayButton { this.initEventHandlers(); this.isInitialized = true; this.applePayConfig = config; - const isEligible = (this.applePayConfig.isEligible && window.ApplePaySession) || this.buttonConfig.is_admin; + const isEligible = (this.applePayConfig.isEligible && window.ApplePaySession) || this.buttonConfig.is_admin || true; // todo remove if (isEligible) { this.fetchTransactionInfo().then(() => { diff --git a/modules/ppcp-blocks/resources/css/gateway.scss b/modules/ppcp-blocks/resources/css/gateway.scss new file mode 100644 index 000000000..a8caf175e --- /dev/null +++ b/modules/ppcp-blocks/resources/css/gateway.scss @@ -0,0 +1,9 @@ +@use "../../../ppcp-button/resources/css/mixins/apm-button" as apm-button; + +li[id^="express-payment-method-ppcp-"] { + line-height: 0; +} + +.ppcp-button-apm { + @include apm-button.button; +} diff --git a/modules/ppcp-blocks/src/BlocksModule.php b/modules/ppcp-blocks/src/BlocksModule.php index 1766806b7..9b00d61bc 100644 --- a/modules/ppcp-blocks/src/BlocksModule.php +++ b/modules/ppcp-blocks/src/BlocksModule.php @@ -88,6 +88,28 @@ static function () use ( $c ) { $endpoint->handle_request(); } ); + + // Enqueue frontend scripts. + add_action( + 'wp_enqueue_scripts', + static function () use ( $c ) { + if ( ! has_block( 'woocommerce/checkout' ) && ! has_block( 'woocommerce/cart' ) ) { + return; + } + + $module_url = $c->get( 'blocks.url' ); + $asset_version = $c->get( 'ppcp.asset-version' ); + + wp_register_style( + 'wc-ppcp-blocks', + untrailingslashit( $module_url ) . '/assets/css/gateway.css', + array(), + $asset_version + ); + wp_enqueue_style( 'wc-ppcp-blocks' ); + } + ); + } /** diff --git a/modules/ppcp-blocks/webpack.config.js b/modules/ppcp-blocks/webpack.config.js index 4695769ed..bdf508fba 100644 --- a/modules/ppcp-blocks/webpack.config.js +++ b/modules/ppcp-blocks/webpack.config.js @@ -9,7 +9,8 @@ module.exports = { target: 'web', plugins: [ new DependencyExtractionWebpackPlugin() ], entry: { - 'checkout-block': path.resolve('./resources/js/checkout-block.js') + 'checkout-block': path.resolve('./resources/js/checkout-block.js'), + "gateway": path.resolve('./resources/css/gateway.scss') }, output: { path: path.resolve(__dirname, 'assets/'), From ec0dd5221dc8d3d5ee1d899eca260fc3729d21ea Mon Sep 17 00:00:00 2001 From: Pedro Silva Date: Mon, 11 Dec 2023 17:14:43 +0000 Subject: [PATCH 3/5] Adjustments to apm button layouts. --- .../ppcp-applepay/resources/css/styles.scss | 59 +++-------- .../resources/js/ApplepayButton.js | 6 +- .../ppcp-applepay/resources/js/boot-block.js | 6 -- .../ppcp-blocks/resources/css/gateway.scss | 6 ++ .../ppcp-button/resources/css/gateway.scss | 5 + .../resources/css/mixins/apm-button.scss | 26 ++++- .../resources/js/modules/Helper/ApmButton.js | 83 --------------- .../resources/js/modules/Helper/ApmButtons.js | 100 ++++++++++++++++++ .../ppcp-googlepay/resources/css/styles.scss | 31 +----- .../resources/js/GooglepayButton.js | 4 +- .../ppcp-googlepay/resources/js/boot-block.js | 7 -- 11 files changed, 159 insertions(+), 174 deletions(-) delete mode 100644 modules/ppcp-button/resources/js/modules/Helper/ApmButton.js create mode 100644 modules/ppcp-button/resources/js/modules/Helper/ApmButtons.js diff --git a/modules/ppcp-applepay/resources/css/styles.scss b/modules/ppcp-applepay/resources/css/styles.scss index e15bf70ea..858094433 100644 --- a/modules/ppcp-applepay/resources/css/styles.scss +++ b/modules/ppcp-applepay/resources/css/styles.scss @@ -1,4 +1,12 @@ .ppcp-button-applepay { + // Should replicate apm-button.scss sizes. + --apple-pay-button-height: 45px; + --apple-pay-button-min-height: 35px; + --apple-pay-button-width: 100%; + --apple-pay-button-max-width: 750px; + --apple-pay-button-border-radius: 4px; + --apple-pay-button-overflow: hidden; + .ppcp-width-min & { --apple-pay-button-height: 35px; } @@ -8,14 +16,6 @@ .ppcp-width-500 & { --apple-pay-button-height: 55px; } -} - -#applepay-container, .ppcp-button-applepay { - --apple-pay-button-min-height: 35px; - --apple-pay-button-width: 100%; - --apple-pay-button-max-width: 750px; - --apple-pay-button-border-radius: 4px; - --apple-pay-button-overflow: hidden; &.ppcp-button-pill { --apple-pay-button-border-radius: 50px; @@ -26,41 +26,19 @@ } } -.woocommerce-checkout { - #applepay-container, .ppcp-button-applepay { - --apple-pay-button-border-radius: 4px; - &.ppcp-button-pill { - --apple-pay-button-border-radius: 50px; - } - } -} - -.ppcp-has-applepay-block { - - .wp-block-woocommerce-checkout { - #applepay-container, .ppcp-button-applepay { - margin: 0; - --apple-pay-button-margin: 0; - --apple-pay-button-height: 48px; - &.ppcp-button-pill { - --apple-pay-button-border-radius: 50px; - } - } - } +.wp-block-woocommerce-checkout, .wp-block-woocommerce-cart { + .ppcp-button-applepay { + --apple-pay-button-margin: 0; - .wp-block-woocommerce-cart { - #applepay-container, .ppcp-button-applepay { - margin: 0; - --apple-pay-button-margin: 0; - --apple-pay-button-height: 48px; + apple-pay-button { + min-width: 0; + width: 100%; + --apple-pay-button-width-default: 100%; } } } .wp-admin { - .ppcp-button-applepay { - pointer-events: none; - } &.ppcp-non-ios-device { .ppcp-button-applepay { apple-pay-button { @@ -69,10 +47,3 @@ } } } - -// todo remove -.ppcp-button-applepay { - apple-pay-button { - display: block !important; - } -} diff --git a/modules/ppcp-applepay/resources/js/ApplepayButton.js b/modules/ppcp-applepay/resources/js/ApplepayButton.js index 91cfd7659..ddcaacb41 100644 --- a/modules/ppcp-applepay/resources/js/ApplepayButton.js +++ b/modules/ppcp-applepay/resources/js/ApplepayButton.js @@ -5,12 +5,12 @@ import {setEnabled} from '../../../ppcp-button/resources/js/modules/Helper/Butto import FormValidator from "../../../ppcp-button/resources/js/modules/Helper/FormValidator"; import ErrorHandler from '../../../ppcp-button/resources/js/modules/ErrorHandler'; import widgetBuilder from "../../../ppcp-button/resources/js/modules/Renderer/WidgetBuilder"; -import {apmButtonInit} from "../../../ppcp-button/resources/js/modules/Helper/ApmButton"; +import {apmButtonsInit} from "../../../ppcp-button/resources/js/modules/Helper/ApmButtons"; class ApplepayButton { constructor(context, externalHandler, buttonConfig, ppcpConfig) { - apmButtonInit(); + apmButtonsInit(); this.isInitialized = false; @@ -63,7 +63,7 @@ class ApplepayButton { this.initEventHandlers(); this.isInitialized = true; this.applePayConfig = config; - const isEligible = (this.applePayConfig.isEligible && window.ApplePaySession) || this.buttonConfig.is_admin || true; // todo remove + const isEligible = (this.applePayConfig.isEligible && window.ApplePaySession) || this.buttonConfig.is_admin; if (isEligible) { this.fetchTransactionInfo().then(() => { diff --git a/modules/ppcp-applepay/resources/js/boot-block.js b/modules/ppcp-applepay/resources/js/boot-block.js index 6850b6346..b8f905b6d 100644 --- a/modules/ppcp-applepay/resources/js/boot-block.js +++ b/modules/ppcp-applepay/resources/js/boot-block.js @@ -23,12 +23,6 @@ const ApplePayComponent = () => { const manager = new ApplepayManager(buttonConfig, ppcpConfig); manager.init(); }; - useEffect(() => { - const bodyClass = 'ppcp-has-applepay-block'; - if (!document.body.classList.contains(bodyClass)) { - document.body.classList.add(bodyClass); - } - }, []); useEffect(() => { // Load ApplePay SDK diff --git a/modules/ppcp-blocks/resources/css/gateway.scss b/modules/ppcp-blocks/resources/css/gateway.scss index a8caf175e..1268f6379 100644 --- a/modules/ppcp-blocks/resources/css/gateway.scss +++ b/modules/ppcp-blocks/resources/css/gateway.scss @@ -2,8 +2,14 @@ li[id^="express-payment-method-ppcp-"] { line-height: 0; + + // Set min-width to 0 as the buttons need to fit in a tight grid. + .paypal-buttons { + min-width: 0 !important; + } } .ppcp-button-apm { @include apm-button.button; } + diff --git a/modules/ppcp-button/resources/css/gateway.scss b/modules/ppcp-button/resources/css/gateway.scss index 85f2356e7..40326c921 100644 --- a/modules/ppcp-button/resources/css/gateway.scss +++ b/modules/ppcp-button/resources/css/gateway.scss @@ -23,6 +23,11 @@ line-height: 0; } +#ppc-button-minicart { + line-height: 0; + display: block; +} + .ppcp-button-apm { @include apm-button.button; } diff --git a/modules/ppcp-button/resources/css/mixins/apm-button.scss b/modules/ppcp-button/resources/css/mixins/apm-button.scss index 1de993b2b..5c9e73921 100644 --- a/modules/ppcp-button/resources/css/mixins/apm-button.scss +++ b/modules/ppcp-button/resources/css/mixins/apm-button.scss @@ -1,8 +1,22 @@ @mixin button { - min-width: 200px; + overflow: hidden; + min-width: 0; max-width: 750px; line-height: 0; + border-radius: 4px; + + // Defaults + height: 45px; + margin-top: 14px; + + &.ppcp-button-pill { + border-radius: 50px; + } + + &.ppcp-button-minicart { + display: block; + } .ppcp-width-min & { height: 35px; @@ -15,4 +29,14 @@ .ppcp-width-500 & { height: 55px; } + + // No margin on block layout. + .wp-block-woocommerce-checkout &, .wp-block-woocommerce-cart & { + margin: 0; + min-width: 0; + } + + .wp-admin & { + pointer-events: none; + } } diff --git a/modules/ppcp-button/resources/js/modules/Helper/ApmButton.js b/modules/ppcp-button/resources/js/modules/Helper/ApmButton.js deleted file mode 100644 index 5e5c7fa0d..000000000 --- a/modules/ppcp-button/resources/js/modules/Helper/ApmButton.js +++ /dev/null @@ -1,83 +0,0 @@ - -export const apmButtonInit = (selector = '.ppcp-button-apm') => { - if (window.apmButton) { - return; - } - window.apmButton = new ApmButton(selector); -} - -export class ApmButton { - - constructor(selector) { - this.selector = selector; - this.containers = []; - - jQuery(window).resize(() => { - this.refresh(); - }).resize(); - - // TODO: detect changes don't rely on setInterval - setInterval(() => { - jQuery(selector).each((index, el) => { - const parent = jQuery(el).parent(); - if (!this.containers.some($el => $el.is(parent))) { - this.containers.push(parent); - } - }); - - this.refresh(); - }, 100); - } - - refresh() { - for (const container of this.containers) { - const containerClasses = []; - const $container = jQuery(container); - - // Check width and add classes - const width = $container.width(); - - if (width >= 500) { - containerClasses.push('ppcp-width-500'); - } else if (width >= 300) { - containerClasses.push('ppcp-width-300'); - } else { - containerClasses.push('ppcp-width-min'); - } - - $container.removeClass('ppcp-width-500 ppcp-width-300 ppcp-width-min'); - $container.addClass(containerClasses.join(' ')); - - // Check first apm button - const $firstApmButton = $container.find(this.selector + ':visible').first(); - const $firstElement = $container.children(':visible').first(); - - let $spacingTopButton = null; - if (!$firstApmButton.is($firstElement)) { - $spacingTopButton = $firstApmButton; - } - - // Check last apm button - const $lastApmButton = $container.find(this.selector + ':visible').last(); - - // Assign margins to buttons - $container.find(this.selector).each((index, el) => { - const $el = jQuery(el); - const height = $el.height(); - - if ($el.is($spacingTopButton)) { - $el.css('margin-top', `${Math.round(height * 0.3)}px`); - } - - if ($el.is($lastApmButton)) { - $el.css('margin-bottom', `0px`); - return true; - } - - $el.css('margin-bottom', `${Math.round(height * 0.3)}px`); - }); - - } - } - -} diff --git a/modules/ppcp-button/resources/js/modules/Helper/ApmButtons.js b/modules/ppcp-button/resources/js/modules/Helper/ApmButtons.js new file mode 100644 index 000000000..b49345a68 --- /dev/null +++ b/modules/ppcp-button/resources/js/modules/Helper/ApmButtons.js @@ -0,0 +1,100 @@ + +export const apmButtonsInit = (selector = '.ppcp-button-apm') => { + if (window.ppcpApmButtons) { + return; + } + window.ppcpApmButtons = new ApmButtons(selector); +} + +export class ApmButtons { + + constructor(selector) { + this.selector = selector; + this.containers = []; + + // Reloads button containers. + this.reloadContainers(); + + // Refresh button layout. + jQuery(window).resize(() => { + this.refresh(); + }).resize(); + + // Observes for new buttons. + (new MutationObserver(this.observeElementsCallback.bind(this))) + .observe(document.body, { childList: true, subtree: true }); + } + + observeElementsCallback(mutationsList, observer) { + const observeSelector = this.selector + ', .widget_shopping_cart, .widget_shopping_cart_content'; + + let shouldReload = false; + for (let mutation of mutationsList) { + if (mutation.type === 'childList') { + mutation.addedNodes.forEach(node => { + if (node.matches && node.matches(observeSelector)) { + shouldReload = true; + } + }); + } + } + + if (shouldReload) { + this.reloadContainers(); + this.refresh(); + } + }; + + reloadContainers() { + jQuery(this.selector).each((index, el) => { + const parent = jQuery(el).parent(); + if (!this.containers.some($el => $el.is(parent))) { + this.containers.push(parent); + } + }); + console.log('this.containers', this.containers); + } + + refresh() { + for (const container of this.containers) { + const $container = jQuery(container); + + // Check width and add classes + const width = $container.width(); + + $container.removeClass('ppcp-width-500 ppcp-width-300 ppcp-width-min'); + + if (width >= 500) { + $container.addClass('ppcp-width-500'); + } else if (width >= 300) { + $container.addClass('ppcp-width-300'); + } else { + $container.addClass('ppcp-width-min'); + } + + // Check first apm button + const $firstApmButton = $container.find(this.selector + ':visible').first(); + const $firstElement = $container.children(':visible').first(); + + let isFirstElement = false; + if ($firstApmButton.is($firstElement)) { + isFirstElement = true; + } + + // Assign margins to buttons + $container.find(this.selector).each((index, el) => { + const $el = jQuery(el); + const height = $el.height(); + + if (isFirstElement) { + $el.css('margin-top', `0px`); + return true; + } + + $el.css('margin-top', `${Math.round(height * 0.3)}px`); + }); + + } + } + +} diff --git a/modules/ppcp-googlepay/resources/css/styles.scss b/modules/ppcp-googlepay/resources/css/styles.scss index 5bdf8edae..0747a2a91 100644 --- a/modules/ppcp-googlepay/resources/css/styles.scss +++ b/modules/ppcp-googlepay/resources/css/styles.scss @@ -1,34 +1,9 @@ .ppcp-button-googlepay { - overflow: hidden; min-height: 40px; - - &.ppcp-button-pill { - border-radius: 50px; - } - - &.ppcp-button-minicart { - display: block; - } -} - -.ppcp-has-googlepay-block { - - .wp-block-woocommerce-checkout { - .ppcp-button-googlepay { - margin: 0; - } - } - - .wp-block-woocommerce-cart { - .ppcp-button-googlepay { - margin: 0; - } - } - } -.wp-admin { - .ppcp-button-googlepay { - pointer-events: none; +.wp-block-woocommerce-checkout, .wp-block-woocommerce-cart { + .gpay-button { + min-width: 0 !important; } } diff --git a/modules/ppcp-googlepay/resources/js/GooglepayButton.js b/modules/ppcp-googlepay/resources/js/GooglepayButton.js index ed70fd55b..5200743a0 100644 --- a/modules/ppcp-googlepay/resources/js/GooglepayButton.js +++ b/modules/ppcp-googlepay/resources/js/GooglepayButton.js @@ -3,12 +3,12 @@ import {setVisible} from '../../../ppcp-button/resources/js/modules/Helper/Hidin import {setEnabled} from '../../../ppcp-button/resources/js/modules/Helper/ButtonDisabler'; import widgetBuilder from "../../../ppcp-button/resources/js/modules/Renderer/WidgetBuilder"; import UpdatePaymentData from "./Helper/UpdatePaymentData"; -import {apmButtonInit} from "../../../ppcp-button/resources/js/modules/Helper/ApmButton"; +import {apmButtonsInit} from "../../../ppcp-button/resources/js/modules/Helper/ApmButtons"; class GooglepayButton { constructor(context, externalHandler, buttonConfig, ppcpConfig) { - apmButtonInit(); + apmButtonsInit(); this.isInitialized = false; diff --git a/modules/ppcp-googlepay/resources/js/boot-block.js b/modules/ppcp-googlepay/resources/js/boot-block.js index 3b68456b9..bc117357a 100644 --- a/modules/ppcp-googlepay/resources/js/boot-block.js +++ b/modules/ppcp-googlepay/resources/js/boot-block.js @@ -24,13 +24,6 @@ const GooglePayComponent = () => { manager.init(); }; - useEffect(() => { - const bodyClass = 'ppcp-has-googlepay-block'; - if (!document.body.classList.contains(bodyClass)) { - document.body.classList.add(bodyClass); - } - }, []); - useEffect(() => { // Load GooglePay SDK loadCustomScript({ url: buttonConfig.sdk_url }).then(() => { From c59f6de143ce201b942b00e610217558ea2e1ab9 Mon Sep 17 00:00:00 2001 From: Pedro Silva Date: Tue, 12 Dec 2023 10:18:28 +0000 Subject: [PATCH 4/5] Fix ApmButton margin condition. --- .../resources/js/modules/Helper/ApmButtons.js | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/modules/ppcp-button/resources/js/modules/Helper/ApmButtons.js b/modules/ppcp-button/resources/js/modules/Helper/ApmButtons.js index b49345a68..97242f615 100644 --- a/modules/ppcp-button/resources/js/modules/Helper/ApmButtons.js +++ b/modules/ppcp-button/resources/js/modules/Helper/ApmButtons.js @@ -73,24 +73,18 @@ export class ApmButtons { } // Check first apm button - const $firstApmButton = $container.find(this.selector + ':visible').first(); const $firstElement = $container.children(':visible').first(); - let isFirstElement = false; - if ($firstApmButton.is($firstElement)) { - isFirstElement = true; - } - // Assign margins to buttons $container.find(this.selector).each((index, el) => { const $el = jQuery(el); - const height = $el.height(); - if (isFirstElement) { + if ($el.is($firstElement)) { $el.css('margin-top', `0px`); return true; } + const height = $el.height(); $el.css('margin-top', `${Math.round(height * 0.3)}px`); }); From 39040eb8e3d54bb7ff930bf519eb67274640c9f3 Mon Sep 17 00:00:00 2001 From: Pedro Silva Date: Wed, 13 Dec 2023 10:18:37 +0000 Subject: [PATCH 5/5] Remove unused code. --- modules/ppcp-applepay/resources/js/ApplepayButton.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/modules/ppcp-applepay/resources/js/ApplepayButton.js b/modules/ppcp-applepay/resources/js/ApplepayButton.js index ddcaacb41..babca29f3 100644 --- a/modules/ppcp-applepay/resources/js/ApplepayButton.js +++ b/modules/ppcp-applepay/resources/js/ApplepayButton.js @@ -193,8 +193,6 @@ class ApplepayButton { $wrapper.css('--apple-pay-button-height', `${ppcpStyle.height}px`) $wrapper.css('height', `${ppcpStyle.height}px`) } - - jQuery(wrapper).append(appleContainer); // ToDo: this selector doesnt seem valid. } //------------------------