fix: conditionally render monei-text span in blocks checkout labels

jimmyn · jimmyn · commit bcfa80ffd0b8 · 2025-10-09T17:03:03.000+02:00
Hide monei-text span when payment method title is empty/hidden to prevent
layout issues. Applies to all payment method labels in blocks checkout.

- CC component: conditionally render monei-text based on moneiData.title
- Bizum: conditionally render monei-text based on bizumData.title
- PayPal: conditionally render monei-text based on paypalData.title
- Multibanco: conditionally render monei-text based on multibancoData.title
- MBWay: conditionally render monei-text based on mbwayData.title
- Apple/Google already had conditional rendering

This matches the pattern already used in Apple/Google Pay component.
diff --git a/assets/css/monei-blocks-checkout.css b/assets/css/monei-blocks-checkout.css
@@ -67,7 +67,12 @@
 
 /* Label Container */
 .monei-label-container {
-	display: block;
+	flex: 1;
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: space-between;
+	gap: 0.5em;
 }
 
 .monei-text {
@@ -79,7 +84,6 @@
 	display: inline-flex;
 	align-items: center;
 	gap: 0.3125em;
-	flex-wrap: wrap;
 }
 
 .monei-card-brands img,
@@ -150,9 +154,4 @@
 		min-height: 3.75em;
 	}
 
-	.monei-label-container {
-		flex-direction: column;
-		align-items: flex-start;
-		gap: 0.3em;
-	}
 }
diff --git a/assets/js/components/monei-cc-component.js b/assets/js/components/monei-cc-component.js
@@ -359,7 +359,9 @@ export const CreditCardLabel = ( moneiData ) => {
 
 	return (
 		<div className="monei-label-container">
-			<span className="monei-text">{ moneiData.title }</span>
+			{ moneiData.title && (
+				<span className="monei-text">{ moneiData.title }</span>
+			) }
 			{ cardBrands.length > 0 ? (
 				<span className="monei-card-brands">
 					{ cardBrands.map( ( brand, index ) => (
diff --git a/assets/js/monei-block-checkout-bizum.js b/assets/js/monei-block-checkout-bizum.js
@@ -361,9 +361,11 @@
 	const bizumLabel = () => {
 		return (
 			<div className="monei-label-container">
-				<span className="monei-text">
-					{ __( bizumData.title, 'monei' ) }
-				</span>
+				{ bizumData.title && (
+					<span className="monei-text">
+						{ __( bizumData.title, 'monei' ) }
+					</span>
+				) }
 				{ bizumData?.logo && (
 					<div className="monei-logo">
 						<img src={ bizumData.logo } alt="" />
diff --git a/assets/js/monei-block-checkout-mbway.js b/assets/js/monei-block-checkout-mbway.js
@@ -6,9 +6,11 @@
 	const mbwayLabel = () => {
 		return (
 			<div className="monei-label-container">
-				<span className="monei-text">
-					{ __( mbwayData.title, 'monei' ) }
-				</span>
+				{ mbwayData.title && (
+					<span className="monei-text">
+						{ __( mbwayData.title, 'monei' ) }
+					</span>
+				) }
 				{ mbwayData?.logo && (
 					<div className="monei-logo">
 						<img src={ mbwayData.logo } alt="" />
diff --git a/assets/js/monei-block-checkout-multibanco.js b/assets/js/monei-block-checkout-multibanco.js
@@ -6,9 +6,11 @@
 	const multibancoLabel = () => {
 		return (
 			<div className="monei-label-container">
-				<span className="monei-text">
-					{ __( multibancoData.title, 'monei' ) }
-				</span>
+				{ multibancoData.title && (
+					<span className="monei-text">
+						{ __( multibancoData.title, 'monei' ) }
+					</span>
+				) }
 				{ multibancoData?.logo && (
 					<div className="monei-logo">
 						<img src={ multibancoData.logo } alt="" />
diff --git a/assets/js/monei-block-checkout-paypal.js b/assets/js/monei-block-checkout-paypal.js
@@ -235,9 +235,11 @@
 	const paypalLabel = () => {
 		return (
 			<div className="monei-label-container">
-				<span className="monei-text">
-					{ __( paypalData.title, 'monei' ) }
-				</span>
+				{ paypalData.title && (
+					<span className="monei-text">
+						{ __( paypalData.title, 'monei' ) }
+					</span>
+				) }
 				{ paypalData?.logo && (
 					<div className="monei-logo">
 						<img src={ paypalData.logo } alt="" />
