From 33c6c06e85bec04baaea834c0eca6c8ebb48c3d3 Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Fri, 7 Jun 2024 15:42:16 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20button=20specific=20config?=
 =?UTF-8?q?-preparation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ppcp-applepay/resources/js/boot-admin.js  | 24 +++++++++++++++++++
 .../js/modules/Renderer/PreviewButton.js      | 17 ++++++++-----
 .../ppcp-googlepay/resources/js/boot-admin.js | 12 +++++++++-
 .../resources/css/gateway-settings.scss       |  6 ++++-
 4 files changed, 51 insertions(+), 8 deletions(-)

diff --git a/modules/ppcp-applepay/resources/js/boot-admin.js b/modules/ppcp-applepay/resources/js/boot-admin.js
index fdb5572a7..151459b07 100644
--- a/modules/ppcp-applepay/resources/js/boot-admin.js
+++ b/modules/ppcp-applepay/resources/js/boot-admin.js
@@ -96,6 +96,30 @@ class ApplePayPreviewButton extends PreviewButton {
 
         button.init(this.configResponse);
     }
+
+    /**
+     * Some style details need to be copied from the ppcpConfig object to buttonConfig.
+     *
+     * - ppcpConfig: Generated by JS, containing the current form values.
+     * - buttonConfig: Generated on server side, contains the full (saved) button details.
+     */
+    applyPreviewConfig() {
+        // The Apple Pay button expects the "wrapper" to be an ID without `#` prefix!
+        if (this.buttonConfig?.button?.wrapper) {
+            this.buttonConfig.button.wrapper = this.buttonConfig.button.wrapper.replace(/^#/, '');
+        }
+
+        // Apple Pay expects the param "lang" instead of "language"
+        if (this.ppcpConfig?.button?.style?.language) {
+            this.ppcpConfig.button.style.lang = this.ppcpConfig.button.style.language;
+        }
+
+        if (this.ppcpConfig && this.buttonConfig) {
+            this.buttonConfig.button.type = this.ppcpConfig.button.style.type;
+            this.buttonConfig.button.color = this.ppcpConfig.button.style.color;
+            this.buttonConfig.button.lang = this.ppcpConfig.button.style.lang;
+        }
+    }
 }
 
 // Initialize the preview button manager.
diff --git a/modules/ppcp-button/resources/js/modules/Renderer/PreviewButton.js b/modules/ppcp-button/resources/js/modules/Renderer/PreviewButton.js
index 0e4bba6cd..71cce9d9b 100644
--- a/modules/ppcp-button/resources/js/modules/Renderer/PreviewButton.js
+++ b/modules/ppcp-button/resources/js/modules/Renderer/PreviewButton.js
@@ -20,7 +20,6 @@ class PreviewButton {
         this.selector = selector;
 
         this.domWrapper = null;
-        this.payButton = null;
     }
 
     /**
@@ -50,18 +49,24 @@ class PreviewButton {
             this.buttonConfig.button.wrapper = this.selector
         }
 
-        if (this.ppcpConfig && this.buttonConfig) {
-            this.buttonConfig.button.style = this.ppcpConfig.button.style;
-        }
+        this.applyPreviewConfig();
 
         return this;
     }
 
+    /**
+     * Some style details need to be copied from the ppcpConfig object to buttonConfig.
+     *
+     * - ppcpConfig: Generated by JS, containing the current form values.
+     * - buttonConfig: Generated on server side, contains the full (saved) button details.
+     */
+    applyPreviewConfig() {
+        // Implement in the derived class.
+    }
+
     /**
      * Responsible for creating the actual payment button preview.
      * Called by the `render()` method, after the wrapper DOM element is ready.
-     *
-     * @return {any} Return value is assigned to `this.payButton`
      */
     createButton() {
         throw new Error('The "createButton" method must be implemented by the derived class');
diff --git a/modules/ppcp-googlepay/resources/js/boot-admin.js b/modules/ppcp-googlepay/resources/js/boot-admin.js
index 0cdb37e2d..bb1e07d91 100644
--- a/modules/ppcp-googlepay/resources/js/boot-admin.js
+++ b/modules/ppcp-googlepay/resources/js/boot-admin.js
@@ -97,8 +97,18 @@ class GooglePayPreviewButton extends PreviewButton {
         );
 
         button.init(this.configResponse);
+    }
 
-        return button;
+    /**
+     * Some style details need to be copied from the ppcpConfig object to buttonConfig.
+     *
+     * - ppcpConfig: Generated by JS, containing the current form values.
+     * - buttonConfig: Generated on server side, contains the full (saved) button details.
+     */
+    applyPreviewConfig() {
+        if (this.ppcpConfig && this.buttonConfig) {
+            this.buttonConfig.button.style = this.ppcpConfig.button.style;
+        }
     }
 }
 
diff --git a/modules/ppcp-wc-gateway/resources/css/gateway-settings.scss b/modules/ppcp-wc-gateway/resources/css/gateway-settings.scss
index 488d7646f..e915905bd 100644
--- a/modules/ppcp-wc-gateway/resources/css/gateway-settings.scss
+++ b/modules/ppcp-wc-gateway/resources/css/gateway-settings.scss
@@ -7,9 +7,13 @@
 	box-shadow: 0 2px 10px 1px #ddd;
 	margin-right: -28px;
 
+	// Preview box showing a single button.
 	&[data-ppcp-apm-preview] {
 		height: 82px;
-		margin-top: -149px;
+
+		@media (min-width: 1200px) {
+			margin-top: -149px;
+		}
 
 		@media (min-width: 601px) and (max-width: 1399px) {
 			margin-right: 10px;