From f6010a425ef2d3619c83441552a4fff58c6fcf6e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9sar=20Costa?=
 <10233985+cesarcosta99@users.noreply.github.com>
Date: Fri, 20 Dec 2024 10:38:33 -0300
Subject: [PATCH] Show "postal code check" label based on store country (#9952)

---
 changelog/fix-9896-postal-code-label                         | 4 ++++
 .../order-details/test/__snapshots__/index.test.tsx.snap     | 2 +-
 client/payment-details/payment-method/card/index.js          | 5 ++++-
 .../payment-details/test/__snapshots__/index.test.tsx.snap   | 4 ++--
 client/style.scss                                            | 4 ++++
 5 files changed, 15 insertions(+), 4 deletions(-)
 create mode 100644 changelog/fix-9896-postal-code-label

diff --git a/changelog/fix-9896-postal-code-label b/changelog/fix-9896-postal-code-label
new file mode 100644
index 00000000000..dad971912a8
--- /dev/null
+++ 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
index a1af47f03c4..ed6c9656178 100644
--- 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
index 2de54bd204a..e851b8c88c7 100644
--- 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
index 19af9ff7235..feea948e950 100644
--- 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
index 2e4b8312271..24c8dfa12ed 100644
--- 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 {