From aa5de0eedd23a8e9a83c58bd0eba6bcfa16950ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Krist=C3=B3fer=20R?= <kristofer.thorlaksson@automattic.com>
Date: Fri, 17 Dec 2021 21:20:21 -0500
Subject: [PATCH 1/2] Use LoadingMask for PRB loading status in Blocks

---
 .../payment-request-express.js                | 65 +++++++------------
 1 file changed, 25 insertions(+), 40 deletions(-)

diff --git a/client/blocks/payment-request/payment-request-express.js b/client/blocks/payment-request/payment-request-express.js
index 4f7192b2f..14f0d321f 100644
--- a/client/blocks/payment-request/payment-request-express.js
+++ b/client/blocks/payment-request/payment-request-express.js
@@ -1,3 +1,4 @@
+import { __ } from '@wordpress/i18n';
 import {
 	Elements,
 	PaymentRequestButtonElement,
@@ -38,6 +39,7 @@ import { getBlocksConfiguration } from 'wcstripe/blocks/utils';
  */
 const PaymentRequestExpressComponent = ( {
 	billing,
+	components,
 	shippingData,
 	onClick,
 	onClose,
@@ -91,49 +93,41 @@ const PaymentRequestExpressComponent = ( {
 		return null;
 	}
 
+	const { LoadingMask } = components;
+
 	if ( isCustom ) {
 		return (
-			<div
-				className={
-					isUpdatingPaymentRequest
-						? 'wc-block-components-loading-mask'
-						: ''
-				}
+			<LoadingMask
+				isLoading={ isUpdatingPaymentRequest }
+				screenReaderLabel={ __(
+					'Loading payment request…',
+					'woocommerce-gateway-stripe'
+				) }
 			>
 				<CustomButton
-					className={
-						isUpdatingPaymentRequest
-							? 'wc-block-components-loading-mask__children'
-							: ''
-					}
 					onButtonClicked={ ( evt ) => {
 						onPaymentRequestButtonClick( evt, paymentRequest );
 					} }
 				/>
-			</div>
+			</LoadingMask>
 		);
 	}
 
 	if ( isBranded && shouldUseGooglePayBrand() ) {
 		return (
-			<div
-				className={
-					isUpdatingPaymentRequest
-						? 'wc-block-components-loading-mask'
-						: ''
-				}
+			<LoadingMask
+				isLoading={ isUpdatingPaymentRequest }
+				screenReaderLabel={ __(
+					'Loading payment request…',
+					'woocommerce-gateway-stripe'
+				) }
 			>
 				<GooglePayButton
-					className={
-						isUpdatingPaymentRequest
-							? 'wc-block-components-loading-mask__children'
-							: ''
-					}
 					onButtonClicked={ ( evt ) => {
 						onPaymentRequestButtonClick( evt, paymentRequest );
 					} }
 				/>
-			</div>
+			</LoadingMask>
 		);
 	}
 
@@ -146,30 +140,21 @@ const PaymentRequestExpressComponent = ( {
 	}
 
 	return (
-		// The classNames here manually trigger the loading state for the PRB. Hopefully we'll
-		// see an API introduced to WooCommerce Blocks that will let us control this without
-		// relying on a CSS class.
-		// - @reykjalin
-		<div
-			className={
-				isUpdatingPaymentRequest
-					? 'wc-block-components-loading-mask'
-					: ''
-			}
+		<LoadingMask
+			isLoading={ isUpdatingPaymentRequest }
+			screenReaderLabel={ __(
+				'Loading payment request…',
+				'woocommerce-gateway-stripe'
+			) }
 		>
 			<PaymentRequestButtonElement
-				className={
-					isUpdatingPaymentRequest
-						? 'wc-block-components-loading-mask__children'
-						: ''
-				}
 				onClick={ onPaymentRequestButtonClick }
 				options={ {
 					style: paymentRequestButtonStyle,
 					paymentRequest,
 				} }
 			/>
-		</div>
+		</LoadingMask>
 	);
 };
 

From 4d7331c6bcff6b0568185bdd5535c510ff5c27d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Krist=C3=B3fer=20R?= <kristofer.thorlaksson@automattic.com>
Date: Fri, 17 Dec 2021 21:37:10 -0500
Subject: [PATCH 2/2] add changelog entries

---
 changelog.txt | 1 +
 readme.txt    | 1 +
 2 files changed, 2 insertions(+)

diff --git a/changelog.txt b/changelog.txt
index ea8e39cb2..590b0aff4 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -5,6 +5,7 @@
 * Add - Text to explain how to enable webhooks when manually entering your API keys in the new Stripe settings.
 * Tweak - Redirect to the settings tab after an account is connected
 * Tweak - Show toast when payment methods list is updated with new payment methods.
+* Tweak - Use the newly exposed LoadableMask component provided by WooCommerce Blocks to trigger the loading state for Payment Request Buttons.
 * Fix - JS error on checkout when Boleto method was not active  
 
 =======
diff --git a/readme.txt b/readme.txt
index 0682530ff..de5e09187 100644
--- a/readme.txt
+++ b/readme.txt
@@ -131,5 +131,6 @@ If you get stuck, you can ask for help in the Plugin Forum.
 = 6.x.x - 2022-xx-xx =
 * Fix - Fixed capitalization for payment method names: iDEAL, giropay, and Sofort.
 * Add - Text to explain how to enable webhooks when manually entering your API keys in the new Stripe settings.
+* Tweak - Use the newly exposed LoadableMask component provided by WooCommerce Blocks to trigger the loading state for Payment Request Buttons.
 
 [See changelog for all versions](https://raw.githubusercontent.com/woocommerce/woocommerce-gateway-stripe/trunk/changelog.txt).