Use the LoadingMask component from WooCommerce Blocks for PRB loading status in the Cart and Checkout Blocks (#2248)

Author: Kristófer Reykjalín

changelog.txt

@@ -6,6 +6,7 @@
 * Tweak - Redirect to the settings tab after an account is connected.
 * Tweak - Prompt message when navigating out Stripe settings with unsaved changes
 * 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.
 * Fix - Fixed bug that show "Use new payment method" on pay order page when there were no saved card was.
 * Tweak - Autocomplete for account keys and webhooks fields were disabled.

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>
 	);
 };
 

readme.txt

@@ -131,6 +131,7 @@ 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.
 * Tweak - Redirect to the settings tab after an account is connected
 * Tweak - Prompt message when navigating out Stripe settings with unsaved changes
 * Tweak - Show toast when payment methods list is updated with new payment methods.