Adjustments to apm button layouts.

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;
-		}
-	}
-}
+.wp-block-woocommerce-checkout, .wp-block-woocommerce-cart {
+	.ppcp-button-applepay {
+		--apple-pay-button-margin: 0;
 
-.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-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;
-	}
-}

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(() => {

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

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

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

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

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

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

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

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

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;
 

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(() => {