Show "postal code check" label based on store country (#9952)

Automattic · Dec 20, 2024 · f6010a4 · f6010a4
1 parent 3794508
commit f6010a4
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 4 deletions.
diff --git a/changelog/fix-9896-postal-code-label b/changelog/fix-9896-postal-code-label
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Localize postal code check label based on country.
diff --git a/client/payment-details/order-details/test/__snapshots__/index.test.tsx.snap b/client/payment-details/order-details/test/__snapshots__/index.test.tsx.snap
@@ -613,7 +613,7 @@ exports[`Order details page should match the snapshot - Charge without payment i
                 <h4
                   class="payment-method-detail__label"
                 >
-                  Zip check
+                  Postal code check
                 </h4>
                 <p
                   class="payment-method-detail__value"

diff --git a/client/payment-details/payment-method/card/index.js b/client/payment-details/payment-method/card/index.js
@@ -205,7 +205,10 @@ const CardDetails = ( { charge = {}, isLoading } ) => {
 
 				<Detail
 					isLoading={ isLoading }
-					label={ __( 'Zip check', 'woocommerce-payments' ) }
+					label={
+						/* translators: Label for results of a postal code (ZIP code, in US) check performed by a credit card issuer. */
+						__( 'Postal code check', 'woocommerce-payments' )
+					}
 				>
 					<Check checked={ postalCodeCheck } />
 				</Detail>

diff --git a/client/payment-details/test/__snapshots__/index.test.tsx.snap b/client/payment-details/test/__snapshots__/index.test.tsx.snap
@@ -485,7 +485,7 @@ exports[`Payment details page should match the snapshot - Charge query param 1`]
                     aria-busy="true"
                     class="is-loadable-placeholder is-block"
                   >
-                    Zip check
+                    Postal code check
                   </span>
                 </h4>
                 <p
@@ -1144,7 +1144,7 @@ exports[`Payment details page should match the snapshot - Payment Intent query p
                 <h4
                   class="payment-method-detail__label"
                 >
-                  Zip check
+                  Postal code check
                 </h4>
                 <p
                   class="payment-method-detail__value"

diff --git a/client/style.scss b/client/style.scss
@@ -104,6 +104,10 @@
 		font-weight: normal;
 		line-height: 20px;
 		padding: 4px 0;
+
+		@media screen and ( max-width: 470px ) {
+			flex: 0 0 40%;
+		}
 	}
 
 	&__value {