Merge pull request #1908 from woocommerce/PCP-2468-incorrect-margins-when-pay-pal-buttons-are-rendered-as-separate-gateways

Incorrect margins when PayPal buttons are rendered as separate gateways. (2468)

modules/ppcp-applepay/resources/js/ApplepayButton.js

@@ -10,7 +10,7 @@ import {apmButtonsInit} from "../../../ppcp-button/resources/js/modules/Helper/A
 class ApplepayButton {
 
     constructor(context, externalHandler, buttonConfig, ppcpConfig) {
-        apmButtonsInit();
+        apmButtonsInit(ppcpConfig);
 
         this.isInitialized = false;
 

modules/ppcp-button/resources/css/gateway.scss

@@ -21,6 +21,13 @@
 // Prevents spacing after button group.
 #ppc-button-ppcp-gateway {
 	line-height: 0;
+
+	div[class^="item-"] {
+		margin-top: 14px;
+		&:first-child {
+			margin-top: 0;
+		}
+	}
 }
 
 #ppc-button-minicart {

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

@@ -22,6 +22,7 @@ import FormValidator from "./modules/Helper/FormValidator";
 import {loadPaypalScript} from "./modules/Helper/ScriptLoading";
 import buttonModuleWatcher from "./modules/ButtonModuleWatcher";
 import MessagesBootstrap from "./modules/ContextBootstrap/MessagesBootstap";
+import {apmButtonsInit} from "./modules/Helper/ApmButtons";
 
 // TODO: could be a good idea to have a separate spinner for each gateway,
 // but I think we care mainly about the script loading, so one spinner should be enough.
@@ -145,6 +146,7 @@ const bootstrap = () => {
     };
 
     const onSmartButtonsInit = () => {
+        jQuery(document).trigger('ppcp-smart-buttons-init', this);
         buttonsSpinner.unblock();
     };
     const renderer = new Renderer(creditCardRenderer, PayPalCommerceGateway, onSmartButtonClick, onSmartButtonsInit);
@@ -217,6 +219,8 @@ const bootstrap = () => {
         messageRenderer,
     );
     messagesBootstrap.init();
+
+    apmButtonsInit(PayPalCommerceGateway);
 };
 
 document.addEventListener(

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

@@ -1,15 +1,31 @@
 
-export const apmButtonsInit = (selector = '.ppcp-button-apm') => {
+export const apmButtonsInit = (config, selector = '.ppcp-button-apm') => {
+    let selectorInContainer = selector;
+
     if (window.ppcpApmButtons) {
         return;
     }
-    window.ppcpApmButtons = new ApmButtons(selector);
+
+    if (config && config.button) {
+
+        // If it's separate gateways, modify wrapper to account for the individual buttons as individual APMs.
+        const wrapper = config.button.wrapper;
+        const isSeparateGateways = jQuery(wrapper).children('div[class^="item-"]').length > 0;
+
+        if (isSeparateGateways) {
+            selector += `, ${wrapper} div[class^="item-"]`;
+            selectorInContainer += `, div[class^="item-"]`;
+        }
+    }
+
+    window.ppcpApmButtons = new ApmButtons(selector, selectorInContainer);
 }
 
 export class ApmButtons {
 
-    constructor(selector) {
+    constructor(selector, selectorInContainer) {
         this.selector = selector;
+        this.selectorInContainer = selectorInContainer;
         this.containers = [];
 
         // Reloads button containers.
@@ -20,6 +36,10 @@ export class ApmButtons {
             this.refresh();
         }).resize();
 
+        jQuery(document).on('ppcp-smart-buttons-init', () => {
+            this.refresh();
+        });
+
         // Observes for new buttons.
         (new MutationObserver(this.observeElementsCallback.bind(this)))
             .observe(document.body, { childList: true, subtree: true });
@@ -76,7 +96,7 @@ export class ApmButtons {
             const $firstElement = $container.children(':visible').first();
 
             // Assign margins to buttons
-            $container.find(this.selector).each((index, el) => {
+            $container.find(this.selectorInContainer).each((index, el) => {
                 const $el = jQuery(el);
 
                 if ($el.is($firstElement)) {

modules/ppcp-googlepay/resources/js/GooglepayButton.js

@@ -8,7 +8,7 @@ import {apmButtonsInit} from "../../../ppcp-button/resources/js/modules/Helper/A
 class GooglepayButton {
 
     constructor(context, externalHandler, buttonConfig, ppcpConfig) {
-        apmButtonsInit();
+        apmButtonsInit(ppcpConfig);
 
         this.isInitialized = false;