update: payment method test mode label behavior

changelog/update-payment-method-test-mode-label

@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+update: payment method "test mode" label at checkout to be displayed only when payment method is selected

client/checkout/blocks/index.js

@@ -110,7 +110,10 @@ Object.entries( enabledPaymentMethodsConfig )
 			label: (
 				<PaymentMethodLabel
 					api={ api }
-					upeConfig={ upeConfig }
+					title={ upeConfig.title }
+					countries={ upeConfig.countries }
+					iconLight={ upeConfig.icon }
+					iconDark={ upeConfig.darkIcon }
 					upeName={ upeName }
 					upeAppearanceTheme={ upeAppearanceTheme }
 				/>

client/checkout/blocks/payment-method-label.js

@@ -12,9 +12,50 @@ import './style.scss';
 import { useEffect, useState } from '@wordpress/element';
 import { getAppearance } from 'wcpay/checkout/upe-styles';
 
-export default ( { api, upeConfig, upeName, upeAppearanceTheme } ) => {
+const bnplMethods = [ 'affirm', 'afterpay_clearpay', 'klarna' ];
+const PaymentMethodMessageWrapper = ( {
+	upeName,
+	countries,
+	currentCountry,
+	amount,
+	appearance,
+	children,
+} ) => {
+	if ( ! bnplMethods.includes( upeName ) ) {
+		return null;
+	}
+
+	if ( amount <= 0 ) {
+		return null;
+	}
+
+	if ( ! currentCountry ) {
+		return null;
+	}
+
+	if ( ! appearance ) {
+		return null;
+	}
+
+	if ( countries.length !== 0 && ! countries.includes( currentCountry ) ) {
+		return null;
+	}
+
+	return (
+		<div className="payment-method-label__pmme-container">{ children }</div>
+	);
+};
+
+export default ( {
+	api,
+	title,
+	countries,
+	iconLight,
+	iconDark,
+	upeName,
+	upeAppearanceTheme,
+} ) => {
 	const cartData = wp.data.select( 'wc/store/cart' ).getCartData();
-	const bnplMethods = [ 'affirm', 'afterpay_clearpay', 'klarna' ];
 	const isTestMode = getUPEConfig( 'testMode' );
 	const [ appearance, setAppearance ] = useState(
 		getUPEConfig( 'wcBlocksUPEAppearance' )
@@ -35,8 +76,6 @@ export default ( { api, upeConfig, upeName, upeAppearanceTheme } ) => {
 		window.wcBlocksCheckoutData?.storeCountry ||
 		'US';
 
-	const isCreditCard = upeName === 'card';
-
 	useEffect( () => {
 		async function generateUPEAppearance() {
 			// Generate UPE input styles.
@@ -56,50 +95,44 @@ export default ( { api, upeConfig, upeName, upeAppearanceTheme } ) => {
 	return (
 		<>
 			<div className="payment-method-label">
-				<span className="payment-method-label__label">
-					{ upeConfig.title }
-				</span>
-				{ isCreditCard && isTestMode && (
+				<span className="payment-method-label__label">{ title }</span>
+				{ isTestMode && (
 					<span className="test-mode badge">
 						{ __( 'Test Mode', 'woocommerce-payments' ) }
 					</span>
 				) }
 				<img
 					className="payment-methods--logos"
 					src={
-						upeAppearanceTheme === 'night'
-							? upeConfig.darkIcon
-							: upeConfig.icon
+						upeAppearanceTheme === 'night' ? iconDark : iconLight
 					}
-					alt={ upeConfig.title }
+					alt={ title }
 				/>
 			</div>
-			{ bnplMethods.includes( upeName ) &&
-				( upeConfig.countries.length === 0 ||
-					upeConfig.countries.includes( currentCountry ) ) &&
-				amount > 0 &&
-				currentCountry &&
-				appearance && (
-					<div className="bnpl-message">
-						<Elements
-							stripe={ api.getStripeForUPE( upeName ) }
-							options={ {
-								appearance: appearance,
-							} }
-						>
-							<PaymentMethodMessagingElement
-								options={ {
-									amount: amount || 0,
-									currency:
-										cartData.totals.currency_code || 'USD',
-									paymentMethodTypes: [ upeName ],
-									countryCode: currentCountry,
-									displayType: 'promotional_text',
-								} }
-							/>
-						</Elements>
-					</div>
-				) }
+			<PaymentMethodMessageWrapper
+				upeName={ upeName }
+				countries={ countries }
+				amount={ amount }
+				currentCountry={ currentCountry }
+				appearance={ appearance }
+			>
+				<Elements
+					stripe={ api.getStripeForUPE( upeName ) }
+					options={ {
+						appearance: appearance,
+					} }
+				>
+					<PaymentMethodMessagingElement
+						options={ {
+							amount: amount || 0,
+							currency: cartData.totals.currency_code || 'USD',
+							paymentMethodTypes: [ upeName ],
+							countryCode: currentCountry,
+							displayType: 'promotional_text',
+						} }
+					/>
+				</Elements>
+			</PaymentMethodMessageWrapper>
 		</>
 	);
 };

client/checkout/blocks/style.scss

@@ -43,6 +43,21 @@ button.wcpay-stripelink-modal-trigger:hover {
 }
 
 .wc-block-checkout__payment-method {
+	input:checked ~ div {
+		.wc-block-components-radio-control__label {
+			> .payment-method-label {
+				.test-mode.badge {
+					// hiding the badge when the payment method is not selected
+					display: inline-block;
+				}
+
+				&__pmme-container {
+					display: none;
+				}
+			}
+		}
+	}
+
 	.wc-block-components-radio-control__label {
 		width: 100%;
 		display: block !important;
@@ -77,6 +92,7 @@ button.wcpay-stripelink-modal-trigger:hover {
 				color: #4d3716;
 				justify-self: start;
 				width: max-content;
+				display: none;
 			}
 
 			@include breakpoint( '<480px' ) {
@@ -88,13 +104,14 @@ button.wcpay-stripelink-modal-trigger:hover {
 					justify-self: end;
 				}
 			}
-		}
 
-		.bnpl-message {
-			width: 100%;
+			&__pmme-container {
+				width: 100%;
+				pointer-events: none;
 
-			@include breakpoint( '<480px' ) {
-				margin-top: 8px;
+				@include breakpoint( '<480px' ) {
+					margin-top: 8px;
+				}
 			}
 		}
 	}
@@ -112,11 +129,6 @@ button.wcpay-stripelink-modal-trigger:hover {
 }
 
 #payment-method {
-	label.wc-block-components-radio-control__option-checked {
-		.StripeElement {
-			display: none;
-		}
-	}
 	/* stylelint-disable-next-line selector-id-pattern */
 	#radio-control-wc-payment-method-options-woocommerce_payments_affirm__label
 		img {

client/checkout/classic/event-handlers.js

@@ -159,55 +159,43 @@ jQuery( function ( $ ) {
 
 	async function injectStripePMMEContainers() {
 		const bnplMethods = [ 'affirm', 'afterpay_clearpay', 'klarna' ];
-		const labelBase = 'payment_method_woocommerce_payments_';
 		const paymentMethods = getUPEConfig( 'paymentMethodsConfig' );
 		const paymentMethodsKeys = Object.keys( paymentMethods );
 		const cartData = await api.pmmeGetCartData();
 
 		for ( const method of paymentMethodsKeys ) {
 			if ( bnplMethods.includes( method ) ) {
-				const targetLabel = document.querySelector(
-					`label[for="${ labelBase }${ method }"]`
-				);
 				const containerID = `stripe-pmme-container-${ method }`;
+				const container = document.getElementById( containerID );
 
-				if ( document.getElementById( containerID ) ) {
-					document.getElementById( containerID ).innerHTML = '';
+				if ( ! container ) {
+					continue;
 				}
 
-				if ( targetLabel ) {
-					let container = document.getElementById( containerID );
-					if ( ! container ) {
-						container = document.createElement( 'span' );
-						container.id = containerID;
-						container.dataset.paymentMethodType = method;
-						container.classList.add( 'stripe-pmme-container' );
-						targetLabel.appendChild( container );
-					}
-
-					const currentCountry =
-						cartData?.billing_address?.country ||
-						getUPEConfig( 'storeCountry' );
-
-					if (
-						paymentMethods[ method ]?.countries.length === 0 ||
-						paymentMethods[ method ]?.countries?.includes(
-							currentCountry
-						)
-					) {
-						await mountStripePaymentMethodMessagingElement(
-							api,
-							container,
-							{
-								amount: cartData?.totals?.total_price,
-								currency: cartData?.totals?.currency_code,
-								decimalPlaces:
-									cartData?.totals?.currency_minor_unit,
-								country: currentCountry,
-							},
-							'shortcode_checkout'
-						);
-					}
+				container.innerHTML = '';
+				container.dataset.paymentMethodType = method;
+
+				const currentCountry =
+					cartData?.billing_address?.country ||
+					getUPEConfig( 'storeCountry' );
+				if (
+					paymentMethods[ method ]?.countries.length === 0 ||
+					paymentMethods[ method ]?.countries?.includes(
+						currentCountry
+					)
+				) {
+					await mountStripePaymentMethodMessagingElement(
+						api,
+						container,
+						{
+							amount: cartData?.totals?.total_price,
+							currency: cartData?.totals?.currency_code,
+							decimalPlaces:
+								cartData?.totals?.currency_minor_unit,
+							country: currentCountry,
+						},
+						'shortcode_checkout'
+					);
 				}
 			}
 		}