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 @@ class ApplePayButton implements ButtonInterface { add_action( $render_placeholder, function () { - echo ''; + echo ''; }, 21 ); @@ -981,7 +981,7 @@ class ApplePayButton implements ButtonInterface { */ 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 @@ class DataToAppleButtonScripts { 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 @@ class DataToAppleButtonScripts { 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 @@ class Button implements ButtonInterface { add_action( $render_placeholder, function () { - echo ''; + echo ''; }, 21 ); @@ -325,7 +325,7 @@ class Button implements ButtonInterface { */ private function googlepay_button(): void { ?> -
+
{ const rules = jQuery(el).data('ppcpDisplay'); - - // console.log('rules', rules); - for (const rule of rules) { displayManager.addRule(rule); }