From ef0de13568bea7526c82a2396e49517f17c7f15e Mon Sep 17 00:00:00 2001
From: Timur Karimov <timur@Timurs-MacBook-Pro.local>
Date: Mon, 9 Dec 2024 12:10:10 +0100
Subject: [PATCH 1/6] ECE only (w/o WooPay) loads smoothly now

---
 client/express-checkout/button-ui.js          | 21 +++++++++++++---
 .../express-checkout-element.scss             | 24 +++++++++++++++++++
 client/express-checkout/index.js              |  2 +-
 ...lass-wc-payments-woopay-button-handler.php |  2 +-
 ...xpress-checkout-button-display-handler.php |  7 +++---
 ...yments-express-checkout-button-handler.php |  2 +-
 6 files changed, 49 insertions(+), 9 deletions(-)
 create mode 100644 client/express-checkout/express-checkout-element.scss

diff --git a/client/express-checkout/button-ui.js b/client/express-checkout/button-ui.js
index 9e29ea6b7b5..5e2cf9e9d7f 100644
--- a/client/express-checkout/button-ui.js
+++ b/client/express-checkout/button-ui.js
@@ -32,17 +32,32 @@ const expressCheckoutButtonUi = {
 
 	renderButton: ( eceButton ) => {
 		if ( get$Container()?.length ) {
-			expressCheckoutButtonUi.showContainer();
 			eceButton.mount( expressCheckoutElementId );
 		}
 	},
 
 	hideContainer: () => {
-		get$Container().hide();
+		const wrapper = document.querySelector('.wcpay-express-checkout-wrapper');
+    
+		if (wrapper) {
+			wrapper.style.display = 'none';
+			wrapper.classList.remove('is-loaded');
+			wrapper.setAttribute('aria-hidden', 'true');
+		}
 	},
 
 	showContainer: () => {
-		get$Container().show();
+		const wrapper = document.querySelector('.wcpay-express-checkout-wrapper');
+    
+		if (wrapper) {
+			wrapper.style.display = 'block';
+			// Force a reflow to ensure the transition works
+			wrapper.offsetHeight;
+			wrapper.classList.add('is-loaded');
+			wrapper.setAttribute('aria-hidden', 'false');
+			expressCheckoutButtonUi.getButtonSeparator().show();
+		}
+		
 	},
 };
 
diff --git a/client/express-checkout/express-checkout-element.scss b/client/express-checkout/express-checkout-element.scss
new file mode 100644
index 00000000000..b38d9af71e8
--- /dev/null
+++ b/client/express-checkout/express-checkout-element.scss
@@ -0,0 +1,24 @@
+.wcpay-express-checkout-wrapper {
+    opacity: 0;
+    max-height: 0;
+    overflow: hidden;
+    transition: 
+        opacity 0.2s ease-in-out,
+        max-height 0.3s ease-out; // Slightly longer duration for height
+    
+    &.is-loaded {
+        opacity: 1;
+        max-height: 90px; // Adjust based on button (40px) + separator + margins
+    }
+
+    // Style the express checkout element
+    .wcpay-express-checkout-element {
+        min-height: 40px;
+    }
+
+    // Style the separator
+    .wcpay-express-checkout-button-separator {
+        margin: 1.5em 0;
+        text-align: center;
+    }
+}
\ No newline at end of file
diff --git a/client/express-checkout/index.js b/client/express-checkout/index.js
index 6f36a3e6b59..69aaeef4fad 100644
--- a/client/express-checkout/index.js
+++ b/client/express-checkout/index.js
@@ -6,6 +6,7 @@ import { debounce } from 'lodash';
  * Internal dependencies
  */
 import WCPayAPI from '../checkout/api';
+import './express-checkout-element.scss';
 import '../checkout/express-checkout-buttons.scss';
 import {
 	getExpressCheckoutButtonAppearance,
@@ -362,7 +363,6 @@ jQuery( ( $ ) => {
 					).filter( Boolean ).length
 				) {
 					expressCheckoutButtonUi.showContainer();
-					expressCheckoutButtonUi.getButtonSeparator().show();
 				}
 			} );
 
diff --git a/includes/class-wc-payments-woopay-button-handler.php b/includes/class-wc-payments-woopay-button-handler.php
index a42fe8046a4..7eeec73af7d 100644
--- a/includes/class-wc-payments-woopay-button-handler.php
+++ b/includes/class-wc-payments-woopay-button-handler.php
@@ -333,7 +333,7 @@ public function display_woopay_button_html() {
 		$settings = $this->get_button_settings();
 
 		?>
-		<div id="wcpay-woopay-button" data-product_page=<?php echo esc_attr( $this->express_checkout_helper->is_product() ); ?>>
+		<div id="wcpay-woopay-button" class="wcpay-woopay-button" data-product_page=<?php echo esc_attr( $this->express_checkout_helper->is_product() ); ?>>
 			<?php // The WooPay express checkout button React component will go here. This is rendered as disabled for now, until the page is initialized. ?>
 			<button
 				class="woopay-express-button"
diff --git a/includes/express-checkout/class-wc-payments-express-checkout-button-display-handler.php b/includes/express-checkout/class-wc-payments-express-checkout-button-display-handler.php
index f9c978d43a1..860a405cdfd 100644
--- a/includes/express-checkout/class-wc-payments-express-checkout-button-display-handler.php
+++ b/includes/express-checkout/class-wc-payments-express-checkout-button-display-handler.php
@@ -109,7 +109,7 @@ public function init() {
 	public function display_express_checkout_separator_if_necessary( $separator_starts_hidden = false ) {
 		if ( $this->express_checkout_helper->is_checkout() ) {
 			?>
-			<p id="wcpay-express-checkout-button-separator" style="margin-top:1.5em;text-align:center;<?php echo $separator_starts_hidden ? 'display:none;' : ''; ?>">&mdash; <?php esc_html_e( 'OR', 'woocommerce-payments' ); ?> &mdash;</p>
+			<p id="wcpay-express-checkout-button-separator" class="wcpay-express-checkout-button-separator" style="margin-top:1.5em;text-align:center;<?php echo $separator_starts_hidden ? 'display:none;' : ''; ?>">&mdash; <?php esc_html_e( 'OR', 'woocommerce-payments' ); ?> &mdash;</p>
 			<?php
 		}
 	}
@@ -128,7 +128,7 @@ public function display_express_checkout_buttons() {
 		$separator_starts_hidden = ! $should_show_woopay;
 		if ( $should_show_woopay || $should_show_express_checkout_button ) {
 			?>
-			<div class='wcpay-express-checkout-wrapper' >
+			<div class='wcpay-express-checkout-wrapper' style="display: none;">
 			<?php
 			if ( ! $this->express_checkout_helper->is_pay_for_order_page() || $this->is_pay_for_order_flow_supported() ) {
 				$this->platform_checkout_button_handler->display_woopay_button_html();
@@ -142,10 +142,11 @@ public function display_express_checkout_buttons() {
 				$this->add_order_attribution_inputs();
 			}
 
+			$this->display_express_checkout_separator_if_necessary( $separator_starts_hidden );
+
 			?>
 			</div >
 			<?php
-			$this->display_express_checkout_separator_if_necessary( $separator_starts_hidden );
 		}
 	}
 
diff --git a/includes/express-checkout/class-wc-payments-express-checkout-button-handler.php b/includes/express-checkout/class-wc-payments-express-checkout-button-handler.php
index f580cc45565..ed02f683071 100644
--- a/includes/express-checkout/class-wc-payments-express-checkout-button-handler.php
+++ b/includes/express-checkout/class-wc-payments-express-checkout-button-handler.php
@@ -318,7 +318,7 @@ public function display_express_checkout_button_html() {
 			return;
 		}
 		?>
-		<div id="wcpay-express-checkout-element" style="display: none;"></div>
+		<div id="wcpay-express-checkout-element" class="wcpay-express-checkout-element"></div>
 		<?php
 	}
 

From ce8da280103a7258930181c21538330504e41826 Mon Sep 17 00:00:00 2001
From: Timur Karimov <timur@Timurs-MacBook-Pro.local>
Date: Mon, 9 Dec 2024 13:28:02 +0100
Subject: [PATCH 2/6] tmp

---
 .../express-checkout-element.scss             | 41 +++++++++----------
 1 file changed, 20 insertions(+), 21 deletions(-)

diff --git a/client/express-checkout/express-checkout-element.scss b/client/express-checkout/express-checkout-element.scss
index b38d9af71e8..e4d5464e5de 100644
--- a/client/express-checkout/express-checkout-element.scss
+++ b/client/express-checkout/express-checkout-element.scss
@@ -1,24 +1,23 @@
 .wcpay-express-checkout-wrapper {
-    opacity: 0;
-    max-height: 0;
-    overflow: hidden;
-    transition: 
-        opacity 0.2s ease-in-out,
-        max-height 0.3s ease-out; // Slightly longer duration for height
-    
-    &.is-loaded {
-        opacity: 1;
-        max-height: 90px; // Adjust based on button (40px) + separator + margins
-    }
+	opacity: 0;
+	max-height: 0;
+	overflow: hidden;
+	transition: opacity 0.2s ease-in-out, max-height 0.3s ease-out; // Slightly longer duration for height
 
-    // Style the express checkout element
-    .wcpay-express-checkout-element {
-        min-height: 40px;
-    }
+	&.is-loaded {
+		opacity: 1;
+		max-height: 120px; // Increased to accommodate button + full separator margins
+		margin-bottom: 1.5em; // Add bottom margin when loaded
+	}
 
-    // Style the separator
-    .wcpay-express-checkout-button-separator {
-        margin: 1.5em 0;
-        text-align: center;
-    }
-}
\ No newline at end of file
+	// Style the express checkout element
+	.wcpay-express-checkout-element {
+		min-height: 40px;
+	}
+
+	// Style the separator
+	.wcpay-express-checkout-button-separator {
+		margin: 1.5em 0;
+		text-align: center;
+	}
+}

From e5c87c34723953458b670fcc19fbfe0a20964277 Mon Sep 17 00:00:00 2001
From: Timur Karimov <timur@Timurs-MacBook-Pro.local>
Date: Mon, 9 Dec 2024 16:38:14 +0100
Subject: [PATCH 3/6] some tweaks to let the separator in

---
 client/express-checkout/express-checkout-element.scss           | 2 +-
 ...lass-wc-payments-express-checkout-button-display-handler.php | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/express-checkout/express-checkout-element.scss b/client/express-checkout/express-checkout-element.scss
index e4d5464e5de..bb038a2d7a6 100644
--- a/client/express-checkout/express-checkout-element.scss
+++ b/client/express-checkout/express-checkout-element.scss
@@ -6,7 +6,7 @@
 
 	&.is-loaded {
 		opacity: 1;
-		max-height: 120px; // Increased to accommodate button + full separator margins
+		max-height: 300px; // Increased to accommodate button + full separator margins
 		margin-bottom: 1.5em; // Add bottom margin when loaded
 	}
 
diff --git a/includes/express-checkout/class-wc-payments-express-checkout-button-display-handler.php b/includes/express-checkout/class-wc-payments-express-checkout-button-display-handler.php
index 860a405cdfd..c454b096a8c 100644
--- a/includes/express-checkout/class-wc-payments-express-checkout-button-display-handler.php
+++ b/includes/express-checkout/class-wc-payments-express-checkout-button-display-handler.php
@@ -128,7 +128,7 @@ public function display_express_checkout_buttons() {
 		$separator_starts_hidden = ! $should_show_woopay;
 		if ( $should_show_woopay || $should_show_express_checkout_button ) {
 			?>
-			<div class='wcpay-express-checkout-wrapper' style="display: none;">
+			<div class='wcpay-express-checkout-wrapper' style="<?php echo $should_show_woopay && ( $this->express_checkout_helper->is_pay_for_order_page() && ! $this->is_pay_for_order_flow_supported() ) ? 'display: none;' : ''; ?>">
 			<?php
 			if ( ! $this->express_checkout_helper->is_pay_for_order_page() || $this->is_pay_for_order_flow_supported() ) {
 				$this->platform_checkout_button_handler->display_woopay_button_html();

From f58ab85ff85f7f2f323d02fc2296e5158cc1b141 Mon Sep 17 00:00:00 2001
From: Timur Karimov <timur@Timurs-MacBook-Pro.local>
Date: Tue, 10 Dec 2024 10:36:32 +0100
Subject: [PATCH 4/6] load WooPay if ECE fails to load

---
 client/checkout/express-checkout-buttons.scss | 28 +++++++++++++------
 client/express-checkout/button-ui.js          | 28 ++++++++++---------
 client/express-checkout/index.js              | 10 ++++++-
 3 files changed, 43 insertions(+), 23 deletions(-)

diff --git a/client/checkout/express-checkout-buttons.scss b/client/checkout/express-checkout-buttons.scss
index be3e02845d8..5fbbafba2db 100644
--- a/client/checkout/express-checkout-buttons.scss
+++ b/client/checkout/express-checkout-buttons.scss
@@ -1,14 +1,16 @@
 .wcpay-express-checkout-wrapper {
-	margin-top: 1em;
-	width: 100%;
-	clear: both;
+	// Start with opacity 0 but maintain the space
+	opacity: 0;
+	// overflow: hidden;
+	display: block;
 
-	.woocommerce-cart & {
-		margin-bottom: 0;
-	}
+	pointer-events: none; // Prevent interaction while hidden
+	transition: opacity 0.9s ease-in-out, height 1s ease-out;
 
-	.woocommerce-checkout & {
-		margin-top: 0;
+	&.is-loaded {
+		opacity: 1;
+		height: auto; // Let it expand to content
+		pointer-events: auto;
 	}
 
 	> div {
@@ -20,7 +22,7 @@
 	}
 }
 
-// This fixes width calculation issues inside the iframe for blocks and shortcode pages.
+// This fixes width calculation issues inside the iframe for blocks and shortcode pages
 .wcpay-express-checkout-wrapper,
 .wc-block-components-express-payment__event-buttons {
 	.StripeElement iframe {
@@ -28,3 +30,11 @@
 	}
 	list-style: none;
 }
+
+.wcpay-express-checkout-element {
+	display: none;
+
+	&.is-loaded {
+		display: block;
+	}
+}
diff --git a/client/express-checkout/button-ui.js b/client/express-checkout/button-ui.js
index 5e2cf9e9d7f..429a6a0b054 100644
--- a/client/express-checkout/button-ui.js
+++ b/client/express-checkout/button-ui.js
@@ -37,27 +37,29 @@ const expressCheckoutButtonUi = {
 	},
 
 	hideContainer: () => {
-		const wrapper = document.querySelector('.wcpay-express-checkout-wrapper');
-    
-		if (wrapper) {
+		const wrapper = document.querySelector(
+			'.wcpay-express-checkout-wrapper'
+		);
+
+		if ( wrapper ) {
 			wrapper.style.display = 'none';
-			wrapper.classList.remove('is-loaded');
-			wrapper.setAttribute('aria-hidden', 'true');
+			wrapper.classList.remove( 'is-loaded' );
+			wrapper.setAttribute( 'aria-hidden', 'true' );
 		}
 	},
 
 	showContainer: () => {
-		const wrapper = document.querySelector('.wcpay-express-checkout-wrapper');
-    
-		if (wrapper) {
-			wrapper.style.display = 'block';
+		const wrapper = document.querySelector(
+			'.wcpay-express-checkout-wrapper'
+		);
+
+		if ( wrapper ) {
 			// Force a reflow to ensure the transition works
-			wrapper.offsetHeight;
-			wrapper.classList.add('is-loaded');
-			wrapper.setAttribute('aria-hidden', 'false');
+			void wrapper.offsetHeight;
+			wrapper.classList.add( 'is-loaded' );
+			wrapper.setAttribute( 'aria-hidden', 'false' );
 			expressCheckoutButtonUi.getButtonSeparator().show();
 		}
-		
 	},
 };
 
diff --git a/client/express-checkout/index.js b/client/express-checkout/index.js
index 69aaeef4fad..e1e01458f0f 100644
--- a/client/express-checkout/index.js
+++ b/client/express-checkout/index.js
@@ -362,8 +362,16 @@ jQuery( ( $ ) => {
 						onReadyParams.availablePaymentMethods
 					).filter( Boolean ).length
 				) {
-					expressCheckoutButtonUi.showContainer();
+					const ece = document.querySelector(
+						'.wcpay-express-checkout-element'
+					);
+
+					if ( ece ) {
+						ece.classList.add( 'is-loaded' );
+					}
 				}
+
+				expressCheckoutButtonUi.showContainer();
 			} );
 
 			if ( getExpressCheckoutData( 'button_context' ) === 'product' ) {

From 3561ce6fed36eb91c09ce1f072524b0197f492d8 Mon Sep 17 00:00:00 2001
From: Timur Karimov <timur@Timurs-MacBook-Pro.local>
Date: Tue, 10 Dec 2024 14:07:54 +0100
Subject: [PATCH 5/6] ensure correct button height and width

---
 client/checkout/express-checkout-buttons.scss | 36 ++++++-------------
 client/express-checkout/utils/index.ts        | 18 +++++++---
 2 files changed, 23 insertions(+), 31 deletions(-)

diff --git a/client/checkout/express-checkout-buttons.scss b/client/checkout/express-checkout-buttons.scss
index 5fbbafba2db..49c49232618 100644
--- a/client/checkout/express-checkout-buttons.scss
+++ b/client/checkout/express-checkout-buttons.scss
@@ -1,40 +1,24 @@
 .wcpay-express-checkout-wrapper {
-	// Start with opacity 0 but maintain the space
 	opacity: 0;
-	// overflow: hidden;
-	display: block;
-
-	pointer-events: none; // Prevent interaction while hidden
-	transition: opacity 0.9s ease-in-out, height 1s ease-out;
+	visibility: hidden;
+	transition: opacity 0.9s ease-in-out;
+	pointer-events: none;
 
 	&.is-loaded {
 		opacity: 1;
-		height: auto; // Let it expand to content
+		visibility: visible;
 		pointer-events: auto;
 	}
 
 	> div {
-		margin-bottom: 12px;
-
-		&:last-of-type {
-			margin-bottom: 0;
-		}
+		margin-bottom: 1em;
 	}
-}
 
-// This fixes width calculation issues inside the iframe for blocks and shortcode pages
-.wcpay-express-checkout-wrapper,
-.wc-block-components-express-payment__event-buttons {
-	.StripeElement iframe {
-		max-width: unset;
-	}
-	list-style: none;
-}
-
-.wcpay-express-checkout-element {
-	display: none;
+	.__PrivateStripeElement {
+		height: var( --wcpay-express-button-height, 48px );
 
-	&.is-loaded {
-		display: block;
+		iframe {
+			max-width: unset;
+		}
 	}
 }
diff --git a/client/express-checkout/utils/index.ts b/client/express-checkout/utils/index.ts
index cfbc2b25b2b..dedf56cca26 100644
--- a/client/express-checkout/utils/index.ts
+++ b/client/express-checkout/utils/index.ts
@@ -233,6 +233,18 @@ export const getExpressCheckoutButtonStyleSettings = () => {
 			? 'plain'
 			: buttonSettings?.type ?? 'plain';
 
+	// Calculate button height once and store it
+	const buttonHeight = Math.min(
+		Math.max( parseInt( buttonSettings?.height ?? '48', 10 ), 40 ),
+		55
+	);
+
+	// Set the CSS variable for the PrivateStripeElement
+	document.documentElement.style.setProperty(
+		'--wcpay-express-button-height',
+		`${ buttonHeight }px`
+	);
+
 	return {
 		paymentMethods: {
 			applePay: 'always',
@@ -256,10 +268,6 @@ export const getExpressCheckoutButtonStyleSettings = () => {
 			googlePay: googlePayType,
 			applePay: applePayType,
 		},
-		// Allowed height must be 40px to 55px.
-		buttonHeight: Math.min(
-			Math.max( parseInt( buttonSettings?.height ?? '48', 10 ), 40 ),
-			55
-		),
+		buttonHeight,
 	};
 };

From f1fca37a22210428aab956d860ba8f508c144f97 Mon Sep 17 00:00:00 2001
From: Timur Karimov <timur@Timurs-MacBook-Pro.local>
Date: Thu, 12 Dec 2024 13:42:41 +0100
Subject: [PATCH 6/6] fix some styling issues

---
 .../express-checkout/express-checkout-element.scss   | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/client/express-checkout/express-checkout-element.scss b/client/express-checkout/express-checkout-element.scss
index bb038a2d7a6..f307cb94344 100644
--- a/client/express-checkout/express-checkout-element.scss
+++ b/client/express-checkout/express-checkout-element.scss
@@ -2,20 +2,20 @@
 	opacity: 0;
 	max-height: 0;
 	overflow: hidden;
-	transition: opacity 0.2s ease-in-out, max-height 0.3s ease-out; // Slightly longer duration for height
+	transition: opacity 0.2s ease-in-out, max-height 0.3s ease-out;
+	display: flex;
+	flex-direction: column;
 
 	&.is-loaded {
 		opacity: 1;
-		max-height: 300px; // Increased to accommodate button + full separator margins
-		margin-bottom: 1.5em; // Add bottom margin when loaded
+		max-height: 300px;
 	}
 
-	// Style the express checkout element
 	.wcpay-express-checkout-element {
-		min-height: 40px;
+		margin-bottom: 0;
+		height: var(--wcpay-express-button-height, 48px);
 	}
 
-	// Style the separator
 	.wcpay-express-checkout-button-separator {
 		margin: 1.5em 0;
 		text-align: center;