From 018ba0de3e0cd81f9e354d156df28ef5cd8dc73e Mon Sep 17 00:00:00 2001
From: Alex P <alex.pantec@gmail.com>
Date: Wed, 22 Nov 2023 17:27:21 +0200
Subject: [PATCH] Handle block google/apple buttons height

---
 .../ppcp-applepay/resources/css/styles.scss   |  4 ++--
 .../resources/js/ApplepayButton.js            | 19 +++++++++----------
 .../ppcp-googlepay/resources/css/styles.scss  |  4 ++--
 .../resources/js/GooglepayButton.js           |  4 ++++
 4 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/modules/ppcp-applepay/resources/css/styles.scss b/modules/ppcp-applepay/resources/css/styles.scss
index 5eabe5640..a543ee71b 100644
--- a/modules/ppcp-applepay/resources/css/styles.scss
+++ b/modules/ppcp-applepay/resources/css/styles.scss
@@ -32,7 +32,7 @@
 	.wp-block-woocommerce-checkout {
 		#applepay-container, .ppcp-button-applepay {
 			--apple-pay-button-margin: 0;
-			--apple-pay-button-height: 40px;
+			--apple-pay-button-height: 48px;
 			&.ppcp-button-pill {
 				--apple-pay-button-border-radius: 50px;
 			}
@@ -42,7 +42,7 @@
 	.wp-block-woocommerce-cart {
 		#applepay-container, .ppcp-button-applepay {
 			--apple-pay-button-margin: 0;
-			--apple-pay-button-height: 40px;
+			--apple-pay-button-height: 48px;
 		}
 		/* Workaround for blocks grid */
 		.wc-block-components-express-payment__event-buttons {
diff --git a/modules/ppcp-applepay/resources/js/ApplepayButton.js b/modules/ppcp-applepay/resources/js/ApplepayButton.js
index 0ae04fb2f..1447f6a6c 100644
--- a/modules/ppcp-applepay/resources/js/ApplepayButton.js
+++ b/modules/ppcp-applepay/resources/js/ApplepayButton.js
@@ -107,7 +107,7 @@ class ApplepayButton {
         let config = {
             wrapper: this.buttonConfig.button.wrapper,
             ppcpStyle: this.ppcpConfig.button.style,
-            //buttonStyle: this.buttonConfig.button.style,
+            buttonStyle: this.buttonConfig.button.style,
             ppcpButtonWrapper: this.ppcpConfig.button.wrapper
         }
 
@@ -167,14 +167,8 @@ class ApplepayButton {
     addButton() {
         this.log('addButton', this.context);
 
-        const wrapper =
-            (this.context === 'mini-cart')
-                ? this.buttonConfig.button.mini_cart_wrapper
-                : this.buttonConfig.button.wrapper;
-        const shape =
-            (this.context === 'mini-cart')
-                ? this.ppcpConfig.button.mini_cart_style.shape
-                : this.ppcpConfig.button.style.shape;
+        const { wrapper, ppcpStyle } = this.contextConfig();
+
         const appleContainer = document.getElementById(wrapper);
         const type = this.buttonConfig.button.type;
         const language = this.buttonConfig.button.lang;
@@ -185,7 +179,12 @@ class ApplepayButton {
             appleContainer.innerHTML = `<apple-pay-button id="${id}" buttonstyle="${color}" type="${type}" locale="${language}">`;
         }
 
-        jQuery('#' + wrapper).addClass('ppcp-button-' + shape);
+        jQuery('#' + wrapper).addClass('ppcp-button-' + ppcpStyle.shape);
+
+        if (ppcpStyle.height) {
+            jQuery('#' + wrapper).css('--apple-pay-button-height', `${ppcpStyle.height}px`)
+        }
+
         jQuery(wrapper).append(appleContainer);
     }
 
diff --git a/modules/ppcp-googlepay/resources/css/styles.scss b/modules/ppcp-googlepay/resources/css/styles.scss
index f8233a410..360404811 100644
--- a/modules/ppcp-googlepay/resources/css/styles.scss
+++ b/modules/ppcp-googlepay/resources/css/styles.scss
@@ -25,14 +25,14 @@
 	.wp-block-woocommerce-checkout {
 		.ppcp-button-googlepay {
 			margin: 0;
-			height: 40px;
+			height: 48px;
 		}
 	}
 
 	.wp-block-woocommerce-cart {
 		.ppcp-button-googlepay {
 			margin: 0;
-			height: 40px;
+			height: 48px;
 		}
 		/* Workaround for blocks grid */
 		.wc-block-components-express-payment__event-buttons {
diff --git a/modules/ppcp-googlepay/resources/js/GooglepayButton.js b/modules/ppcp-googlepay/resources/js/GooglepayButton.js
index 61b5451ba..e1e596683 100644
--- a/modules/ppcp-googlepay/resources/js/GooglepayButton.js
+++ b/modules/ppcp-googlepay/resources/js/GooglepayButton.js
@@ -168,6 +168,10 @@ class GooglepayButton {
         this.waitForWrapper(wrapper, () => {
             jQuery(wrapper).addClass('ppcp-button-' + ppcpStyle.shape);
 
+            if (ppcpStyle.height) {
+                jQuery(wrapper).css('height', `${ppcpStyle.height}px`)
+            }
+
             const button =
                 this.paymentsClient.createButton({
                     onClick: this.onButtonClick.bind(this),