From 934441fdeb6587bb6fbaccc1349a33b8409793d6 Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Thu, 8 Aug 2024 14:41:09 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20initial=20visibility=20of?=
 =?UTF-8?q?=20payment=20button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../js/modules/Renderer/PaymentButton.js      | 37 +++++++++++++++++--
 1 file changed, 33 insertions(+), 4 deletions(-)

diff --git a/modules/ppcp-button/resources/js/modules/Renderer/PaymentButton.js b/modules/ppcp-button/resources/js/modules/Renderer/PaymentButton.js
index 9248f3be9..6994691ae 100644
--- a/modules/ppcp-button/resources/js/modules/Renderer/PaymentButton.js
+++ b/modules/ppcp-button/resources/js/modules/Renderer/PaymentButton.js
@@ -1,6 +1,9 @@
 import ConsoleLogger from '../../../../../ppcp-wc-gateway/resources/js/helper/ConsoleLogger';
 import { apmButtonsInit } from '../Helper/ApmButtons';
-import { PaymentContext } from '../Helper/CheckoutMethodState';
+import {
+	getCurrentPaymentMethod,
+	PaymentContext,
+} from '../Helper/CheckoutMethodState';
 import {
 	ButtonEvents,
 	dispatchButtonEvent,
@@ -361,7 +364,8 @@ export default class PaymentButton {
 
 	/**
 	 * Access the button's context handler.
-	 * When no context handler was provided (like for a preview button), an empty object is returned.
+	 * When no context handler was provided (like for a preview button), an empty object is
+	 * returned.
 	 *
 	 * @return {Object} The context handler instance, or an empty object.
 	 */
@@ -442,6 +446,26 @@ export default class PaymentButton {
 		);
 	}
 
+	/**
+	 * Whether the currently selected payment gateway is set to the payment method.
+	 *
+	 * Only relevant on checkout pages, when `this.isSeparateGateway` is true.
+	 *
+	 * @return {boolean} True means that this payment method is selected as current gateway.
+	 */
+	get isCurrentGateway() {
+		if ( ! this.isSeparateGateway ) {
+			return false;
+		}
+
+		/*
+		 * We need to rely on `getCurrentPaymentMethod()` here, as the `CheckoutBootstrap.js`
+		 * module fires the "ButtonEvents.RENDER" event before any PaymentButton instances are
+		 * created. I.e. we cannot observe the initial gateway selection event.
+		 */
+		return this.methodId === getCurrentPaymentMethod();
+	}
+
 	/**
 	 * Determines if the current button instance has valid and complete configuration details.
 	 * Used during initialization to decide if the button can be initialized or should be skipped.
@@ -610,9 +634,7 @@ export default class PaymentButton {
 	}
 
 	triggerRedraw() {
-		if ( this.isEligible && this.isSeparateGateway ) {
 			this.showPaymentGateway();
-		}
 
 		dispatchButtonEvent( {
 			event: ButtonEvents.REDRAW,
@@ -672,6 +694,10 @@ export default class PaymentButton {
 	 * Only relevant on the checkout page, i.e., when `this.isSeparateGateway` is `true`
 	 */
 	showPaymentGateway() {
+		if ( ! this.isSeparateGateway || ! this.isEligible ) {
+			return;
+		}
+
 		const styleSelectors = `style[data-hide-gateway="${ this.methodId }"]`;
 
 		const styles = document.querySelectorAll( styleSelectors );
@@ -682,6 +708,9 @@ export default class PaymentButton {
 		this.log( 'Show gateway' );
 
 		styles.forEach( ( el ) => el.remove() );
+
+		// This code runs only once, during button initialization, and fixes the initial visibility.
+		this.isVisible = this.isCurrentGateway;
 	}
 
 	/**