Fix apm button styling

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: 35px;
-	--apple-pay-button-min-height: 40px;
 	--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;
 		}

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 = `<apple-pay-button id="${id}" buttonstyle="${color}" type="${type}" locale="${language}">`;
         }
 
-        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.
     }
 
     //------------------------

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 = `<div id="${selector.replace('#', '')}" class="ppcp-button-applepay"></div>`;
+        const wrapperElement = `<div id="${selector.replace('#', '')}" class="ppcp-button-apm ppcp-button-applepay"></div>`;
 
         if (!jQuery(selector).length) {
             jQuery(ppcpConfig.button.wrapper).after(wrapperElement);

modules/ppcp-applepay/resources/js/boot-block.js

@@ -50,7 +50,7 @@ const ApplePayComponent = () => {
     }, [paypalLoaded, applePayLoaded]);
 
     return (
-        <div id={buttonConfig.button.wrapper.replace('#', '')}></div>
+        <div id={buttonConfig.button.wrapper.replace('#', '')} className="ppcp-button-apm ppcp-button-applepay"></div>
     );
 }
 

modules/ppcp-applepay/src/Assets/ApplePayButton.php

@@ -968,7 +968,7 @@ class ApplePayButton implements ButtonInterface {
 			add_action(
 				$render_placeholder,
 				function () {
-					echo '<span id="applepay-container-minicart" class="ppcp-button-applepay ppcp-button-minicart"></span>';
+					echo '<span id="applepay-container-minicart" class="ppcp-button-apm ppcp-button-applepay ppcp-button-minicart"></span>';
 				},
 				21
 			);
@@ -981,7 +981,7 @@ class ApplePayButton implements ButtonInterface {
 	 */
 	protected function applepay_button(): void {
 		?>
-		<div id="applepay-container">
+		<div id="applepay-container" class="ppcp-button-apm ppcp-button-applepay">
 			<?php wp_nonce_field( 'woocommerce-process_checkout', 'woocommerce-process-checkout-nonce' ); ?>
 		</div>
 		<?php

modules/ppcp-applepay/src/Assets/DataToAppleButtonScripts.php

@@ -149,6 +149,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,
 			),
@@ -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,
 			),

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

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

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

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

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;

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 = `<div id="${selector.replace('#', '')}" class="ppcp-button-googlepay"></div>`;
+        const wrapperElement = `<div id="${selector.replace('#', '')}" class="ppcp-button-apm ppcp-button-googlepay"></div>`;
 
         if (!jQuery(selector).length) {
             jQuery(ppcpConfig.button.wrapper).after(wrapperElement);

modules/ppcp-googlepay/resources/js/boot-block.js

@@ -51,7 +51,7 @@ const GooglePayComponent = () => {
     }, [paypalLoaded, googlePayLoaded]);
 
     return (
-        <div id={buttonConfig.button.wrapper.replace('#', '')} className="ppcp-button-googlepay"></div>
+        <div id={buttonConfig.button.wrapper.replace('#', '')} className="ppcp-button-apm ppcp-button-googlepay"></div>
     );
 }
 

modules/ppcp-googlepay/src/Assets/Button.php

@@ -311,7 +311,7 @@ class Button implements ButtonInterface {
 			add_action(
 				$render_placeholder,
 				function () {
-					echo '<span id="ppc-button-googlepay-container-minicart" class="ppcp-button-googlepay ppcp-button-minicart"></span>';
+					echo '<span id="ppc-button-googlepay-container-minicart" class="ppcp-button-apm ppcp-button-googlepay ppcp-button-minicart"></span>';
 				},
 				21
 			);
@@ -325,7 +325,7 @@ class Button implements ButtonInterface {
 	 */
 	private function googlepay_button(): void {
 		?>
-		<div id="ppc-button-googlepay-container" class="ppcp-button-googlepay">
+		<div id="ppc-button-googlepay-container" class="ppcp-button-apm ppcp-button-googlepay">
 			<?php wp_nonce_field( 'woocommerce-process_checkout', 'woocommerce-process-checkout-nonce' ); ?>
 		</div>
 		<?php

modules/ppcp-wc-gateway/resources/css/common.scss

@@ -1,3 +1,4 @@
+@use "../../../ppcp-button/resources/css/mixins/apm-button" as apm-button;
 
 .ppcp-field-hidden {
 	display: none !important;
@@ -15,3 +16,12 @@
 		padding-left: 20px;
 	}
 }
+
+// Prevents spacing after button group.
+.ppcp-button-preview-inner {
+	line-height: 0;
+}
+
+.ppcp-button-apm {
+	@include apm-button.button;
+}

modules/ppcp-wc-gateway/resources/js/common.js

@@ -15,9 +15,6 @@ document.addEventListener(
 
         jQuery( '*[data-ppcp-display]' ).each( (index, el) => {
             const rules = jQuery(el).data('ppcpDisplay');
-
-            // console.log('rules', rules);
-
             for (const rule of rules) {
                 displayManager.addRule(rule);
             }