Move Promise instantiation into memoized function to ensure caching c…

…onsistency (#9927) Co-authored-by: Timur Karimov <[email protected]>
Automattic · Dec 17, 2024 · 0c7422e · 0c7422e
1 parent eb54bb9
commit 0c7422e
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 65 deletions.
diff --git a/changelog/fix-unhandled-promises b/changelog/fix-unhandled-promises
@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+Fix payment method filtering when billing country changes in Blocks checkout.
diff --git a/client/express-checkout/blocks/index.js b/client/express-checkout/blocks/index.js
@@ -39,9 +39,7 @@ const expressCheckoutElementApplePay = ( api ) => ( {
 			return false;
 		}
 
-		return new Promise( ( resolve ) => {
-			checkPaymentMethodIsAvailable( 'applePay', cart, resolve );
-		} );
+		return checkPaymentMethodIsAvailable( 'applePay', cart );
 	},
 } );
 
@@ -77,9 +75,7 @@ const expressCheckoutElementGooglePay = ( api ) => {
 				return false;
 			}
 
-			return new Promise( ( resolve ) => {
-				checkPaymentMethodIsAvailable( 'googlePay', cart, resolve );
-			} );
+			return checkPaymentMethodIsAvailable( 'googlePay', cart );
 		},
 	};
 };

diff --git a/client/express-checkout/utils/checkPaymentMethodIsAvailable.js b/client/express-checkout/utils/checkPaymentMethodIsAvailable.js
@@ -14,71 +14,75 @@ import WCPayAPI from 'wcpay/checkout/api';
 import { getUPEConfig } from 'wcpay/utils/checkout';
 
 export const checkPaymentMethodIsAvailable = memoize(
-	( paymentMethod, cart, resolve ) => {
-		// Create the DIV container on the fly
-		const containerEl = document.createElement( 'div' );
+	( paymentMethod, cart ) => {
+		return new Promise( ( resolve ) => {
+			// Create the DIV container on the fly
+			const containerEl = document.createElement( 'div' );
 
-		// Ensure the element is hidden and doesn’t interfere with the page layout.
-		containerEl.style.display = 'none';
+			// Ensure the element is hidden and doesn’t interfere with the page layout.
+			containerEl.style.display = 'none';
 
-		document.querySelector( 'body' ).appendChild( containerEl );
+			document.querySelector( 'body' ).appendChild( containerEl );
 
-		const root = ReactDOM.createRoot( containerEl );
+			const root = ReactDOM.createRoot( containerEl );
 
-		const api = new WCPayAPI(
-			{
-				publishableKey: getUPEConfig( 'publishableKey' ),
-				accountId: getUPEConfig( 'accountId' ),
-				forceNetworkSavedCards: getUPEConfig(
-					'forceNetworkSavedCards'
-				),
-				locale: getUPEConfig( 'locale' ),
-				isStripeLinkEnabled: isLinkEnabled(
-					getUPEConfig( 'paymentMethodsConfig' )
-				),
-			},
-			request
-		);
+			const api = new WCPayAPI(
+				{
+					publishableKey: getUPEConfig( 'publishableKey' ),
+					accountId: getUPEConfig( 'accountId' ),
+					forceNetworkSavedCards: getUPEConfig(
+						'forceNetworkSavedCards'
+					),
+					locale: getUPEConfig( 'locale' ),
+					isStripeLinkEnabled: isLinkEnabled(
+						getUPEConfig( 'paymentMethodsConfig' )
+					),
+				},
+				request
+			);
 
-		root.render(
-			<Elements
-				stripe={ api.loadStripeForExpressCheckout() }
-				options={ {
-					mode: 'payment',
-					paymentMethodCreation: 'manual',
-					amount: Number( cart.cartTotals.total_price ),
-					currency: cart.cartTotals.currency_code.toLowerCase(),
-				} }
-			>
-				<ExpressCheckoutElement
-					onLoadError={ () => resolve( false ) }
+			root.render(
+				<Elements
+					stripe={ api.loadStripeForExpressCheckout() }
 					options={ {
-						paymentMethods: {
-							amazonPay: 'never',
-							applePay:
-								paymentMethod === 'applePay'
-									? 'always'
-									: 'never',
-							googlePay:
-								paymentMethod === 'googlePay'
-									? 'always'
-									: 'never',
-							link: 'never',
-							paypal: 'never',
-						},
+						mode: 'payment',
+						paymentMethodCreation: 'manual',
+						amount: Number( cart.cartTotals.total_price ),
+						currency: cart.cartTotals.currency_code.toLowerCase(),
 					} }
-					onReady={ ( event ) => {
-						let canMakePayment = false;
-						if ( event.availablePaymentMethods ) {
-							canMakePayment =
-								event.availablePaymentMethods[ paymentMethod ];
-						}
-						resolve( canMakePayment );
-						root.unmount();
-						containerEl.remove();
-					} }
-				/>
-			</Elements>
-		);
+				>
+					<ExpressCheckoutElement
+						onLoadError={ () => resolve( false ) }
+						options={ {
+							paymentMethods: {
+								amazonPay: 'never',
+								applePay:
+									paymentMethod === 'applePay'
+										? 'always'
+										: 'never',
+								googlePay:
+									paymentMethod === 'googlePay'
+										? 'always'
+										: 'never',
+								link: 'never',
+								paypal: 'never',
+							},
+						} }
+						onReady={ ( event ) => {
+							let canMakePayment = false;
+							if ( event.availablePaymentMethods ) {
+								canMakePayment =
+									event.availablePaymentMethods[
+										paymentMethod
+									];
+							}
+							resolve( canMakePayment );
+							root.unmount();
+							containerEl.remove();
+						} }
+					/>
+				</Elements>
+			);
+		} );
 	}
 );