Updated blocks checkout payment method label design (#9483)

Automattic · Sep 25, 2024 · dec6733 · dec6733
1 parent 7cd304e
commit dec6733
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 53 deletions.
diff --git a/assets/images/payment-methods/generic-card.svg b/assets/images/payment-methods/generic-card.svg
diff --git a/changelog/blocks-checkout-label-design b/changelog/blocks-checkout-label-design
@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Redesigned the Payment Method labels for the Blocks Checkout
diff --git a/client/checkout/blocks/payment-method-label.js b/client/checkout/blocks/payment-method-label.js
@@ -6,6 +6,9 @@ import {
 	PaymentMethodMessagingElement,
 } from '@stripe/react-stripe-js';
 import { normalizeCurrencyToMinorUnit } from '../utils';
+import { getUPEConfig } from 'wcpay/utils/checkout';
+import { __ } from '@wordpress/i18n';
+import './style.scss';
 
 export default ( {
 	api,
@@ -16,6 +19,7 @@ export default ( {
 } ) => {
 	const cartData = wp.data.select( 'wc/store/cart' ).getCartData();
 	const bnplMethods = [ 'affirm', 'afterpay_clearpay', 'klarna' ];
+	const isTestMode = getUPEConfig( 'testMode' );
 
 	// Stripe expects the amount to be sent as the minor unit of 2 digits.
 	const amount = parseInt(
@@ -34,43 +38,50 @@ export default ( {
 
 	return (
 		<>
-			<span>
-				{ upeConfig.title }
-				{ bnplMethods.includes( upeName ) &&
-					( upeConfig.countries.length === 0 ||
-						upeConfig.countries.includes( currentCountry ) ) &&
-					amount > 0 &&
-					currentCountry && (
-						<>
-							<Elements
-								stripe={ api.getStripeForUPE( upeName ) }
-								options={ {
-									appearance: stripeAppearance ?? {},
-								} }
-							>
-								<PaymentMethodMessagingElement
-									options={ {
-										amount: amount || 0,
-										currency:
-											cartData.totals.currency_code ||
-											'USD',
-										paymentMethodTypes: [ upeName ],
-										countryCode: currentCountry,
-										displayType: 'promotional_text',
-									} }
-								/>
-							</Elements>
-						</>
-					) }
+			<div className="payment-method-label">
+				<span className="payment-method-label__label">
+					{ upeConfig.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
 					}
 					alt={ upeConfig.title }
 				/>
-			</span>
+			</div>
+			{ bnplMethods.includes( upeName ) &&
+				( upeConfig.countries.length === 0 ||
+					upeConfig.countries.includes( currentCountry ) ) &&
+				amount > 0 &&
+				currentCountry && (
+					<div className="bnpl-message">
+						<Elements
+							stripe={ api.getStripeForUPE( upeName ) }
+							options={ {
+								appearance: stripeAppearance ?? {},
+							} }
+						>
+							<PaymentMethodMessagingElement
+								options={ {
+									amount: amount || 0,
+									currency:
+										cartData.totals.currency_code || 'USD',
+									paymentMethodTypes: [ upeName ],
+									countryCode: currentCountry,
+									displayType: 'promotional_text',
+								} }
+							/>
+						</Elements>
+					</div>
+				) }
 		</>
 	);
 };
diff --git a/client/checkout/blocks/style.scss b/client/checkout/blocks/style.scss
@@ -43,31 +43,58 @@ button.wcpay-stripelink-modal-trigger:hover {
 }
 
 .wc-block-checkout__payment-method {
-	.wc-block-components-radio-control__label span {
-		width: 95%;
+	.wc-block-components-radio-control__label {
+		width: 100%;
+		display: block !important;
+
+		> .payment-method-label {
+			display: grid !important;
+			justify-content: normal !important;
+			grid-template-columns: max-content auto;
+			grid-template-areas: 'label badge logos';
+			align-items: center;
+			gap: 8px;
+			width: 100%;
 
-		&:has( .StripeElement ) {
-			display: grid;
-			grid-template-columns: 1fr auto;
-		}
+			> .payment-method-label__label {
+				grid-area: label;
+				width: 100%;
+			}
 
-		img {
-			float: right;
-			border: 0;
-			padding: 0;
-			height: 24px;
-			max-height: 24px;
+			> .payment-methods--logos {
+				grid-area: logos;
+				justify-self: end;
+			}
+
+			> .test-mode.badge {
+				grid-area: badge;
+				background-color: #fff2d7;
+				border-radius: 4px;
+				padding: 4px 6px;
+				font-size: 12px;
+				font-weight: 400;
+				line-height: 16px;
+				color: #4d3716;
+				justify-self: start;
+				width: max-content;
+			}
+
+			@include breakpoint( '<480px' ) {
+				grid-template-areas: 'label logos' 'badge badge';
+				grid-template-columns: 1fr auto;
+				align-items: start;
+
+				.payment-methods--logos {
+					justify-self: end;
+				}
+			}
 		}
 
-		.StripeElement {
+		.bnpl-message {
 			width: 100%;
-			grid-column: 1 / span 2;
-			grid-row-start: 2;
-			pointer-events: none;
 
-			+ img {
-				grid-row: 1 / span 2;
-				grid-column: 2;
+			@include breakpoint( '<480px' ) {
+				margin-top: 8px;
 			}
 		}
 	}
@@ -89,10 +116,6 @@ button.wcpay-stripelink-modal-trigger:hover {
 		.StripeElement {
 			display: none;
 		}
-		img {
-			grid-column: 2;
-			grid-row: 1;
-		}
 	}
 	/* stylelint-disable-next-line selector-id-pattern */
 	#radio-control-wc-payment-method-options-woocommerce_payments_affirm__label

diff --git a/includes/payment-methods/class-cc-payment-method.php b/includes/payment-methods/class-cc-payment-method.php
@@ -27,7 +27,7 @@ public function __construct( $token_service ) {
 		$this->title       = __( 'Credit card / debit card', 'woocommerce-payments' );
 		$this->is_reusable = true;
 		$this->currencies  = [];// All currencies are supported.
-		$this->icon_url    = plugins_url( 'assets/images/payment-methods/cc.svg', WCPAY_PLUGIN_FILE );
+		$this->icon_url    = plugins_url( 'assets/images/payment-methods/generic-card.svg', WCPAY_PLUGIN_FILE );
 	}
 
 	/**