From c6a0706c76e3d25b9eb4c4ab760edda184beb1fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9sar=20Costa?= <cesar.costa@automattic.com>
Date: Fri, 13 Dec 2024 16:18:38 -0300
Subject: [PATCH 1/6] Localize postal code check label dynamically

---
 .../payment-method/card/index.js               | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/client/payment-details/payment-method/card/index.js b/client/payment-details/payment-method/card/index.js
index 2de54bd204a..956a08688b3 100644
--- a/client/payment-details/payment-method/card/index.js
+++ b/client/payment-details/payment-method/card/index.js
@@ -78,6 +78,22 @@ const formatPaymentMethodDetails = ( charge ) => {
 	};
 };
 
+/**
+ * Returns the label for the postal code check.
+ *
+ * @return {string} The label for the postal code check.
+ */
+const getPostalCodeCheckLabel = () => {
+	switch ( wcpaySettings.connect.country ) {
+		case 'US':
+			return 'ZIP check';
+		case 'UK':
+			return 'Postcode check';
+		default:
+			return __( 'Postal code check', 'woocommerce-payments' );
+	}
+};
+
 /**
  * Placeholders to display while loading.
  */
@@ -205,7 +221,7 @@ const CardDetails = ( { charge = {}, isLoading } ) => {
 
 				<Detail
 					isLoading={ isLoading }
-					label={ __( 'Zip check', 'woocommerce-payments' ) }
+					label={ getPostalCodeCheckLabel() }
 				>
 					<Check checked={ postalCodeCheck } />
 				</Detail>

From 5c2ec628a237322b45a416d4d5908b509e01705e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9sar=20Costa?= <cesar.costa@automattic.com>
Date: Fri, 13 Dec 2024 16:19:43 -0300
Subject: [PATCH 2/6] Add changelog entry

---
 changelog/fix-9896-postal-code-label | 4 ++++
 1 file changed, 4 insertions(+)
 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.

From ea69359db41f420dc528329c4273c4696b8cdcbd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9sar=20Costa?= <cesar.costa@automattic.com>
Date: Fri, 13 Dec 2024 17:07:06 -0300
Subject: [PATCH 3/6] Update JS snapshots

---
 .../order-details/test/__snapshots__/index.test.tsx.snap      | 2 +-
 client/payment-details/test/__snapshots__/index.test.tsx.snap | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

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 7b4a7e3650f..ade0d2407b5 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
@@ -565,7 +565,7 @@ exports[`Order details page should match the snapshot - Charge without payment i
                 <h4
                   class="payment-method-detail__label"
                 >
-                  Zip check
+                  ZIP check
                 </h4>
                 <p
                   class="payment-method-detail__value"
diff --git a/client/payment-details/test/__snapshots__/index.test.tsx.snap b/client/payment-details/test/__snapshots__/index.test.tsx.snap
index aa8a34effd0..707679fe3ce 100644
--- a/client/payment-details/test/__snapshots__/index.test.tsx.snap
+++ b/client/payment-details/test/__snapshots__/index.test.tsx.snap
@@ -437,7 +437,7 @@ exports[`Payment details page should match the snapshot - Charge query param 1`]
                     aria-busy="true"
                     class="is-loadable-placeholder is-block"
                   >
-                    Zip check
+                    ZIP check
                   </span>
                 </h4>
                 <p
@@ -1048,7 +1048,7 @@ exports[`Payment details page should match the snapshot - Payment Intent query p
                 <h4
                   class="payment-method-detail__label"
                 >
-                  Zip check
+                  ZIP check
                 </h4>
                 <p
                   class="payment-method-detail__value"

From 85b041d965ba59a0c2b045a3ad079a1d145b01ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9sar=20Costa?= <cesar.costa@automattic.com>
Date: Tue, 17 Dec 2024 13:23:53 -0300
Subject: [PATCH 4/6] Localize 'postal code' only

---
 .../payment-method/card/index.js              | 21 ++++---------------
 1 file changed, 4 insertions(+), 17 deletions(-)

diff --git a/client/payment-details/payment-method/card/index.js b/client/payment-details/payment-method/card/index.js
index 956a08688b3..e851b8c88c7 100644
--- a/client/payment-details/payment-method/card/index.js
+++ b/client/payment-details/payment-method/card/index.js
@@ -78,22 +78,6 @@ const formatPaymentMethodDetails = ( charge ) => {
 	};
 };
 
-/**
- * Returns the label for the postal code check.
- *
- * @return {string} The label for the postal code check.
- */
-const getPostalCodeCheckLabel = () => {
-	switch ( wcpaySettings.connect.country ) {
-		case 'US':
-			return 'ZIP check';
-		case 'UK':
-			return 'Postcode check';
-		default:
-			return __( 'Postal code check', 'woocommerce-payments' );
-	}
-};
-
 /**
  * Placeholders to display while loading.
  */
@@ -221,7 +205,10 @@ const CardDetails = ( { charge = {}, isLoading } ) => {
 
 				<Detail
 					isLoading={ isLoading }
-					label={ getPostalCodeCheckLabel() }
+					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>

From 84761a57ce3bb48804ee1e8834881f738d584af4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9sar=20Costa?= <cesar.costa@automattic.com>
Date: Tue, 17 Dec 2024 13:24:05 -0300
Subject: [PATCH 5/6] Update JS snapshots

---
 .../order-details/test/__snapshots__/index.test.tsx.snap      | 2 +-
 client/payment-details/test/__snapshots__/index.test.tsx.snap | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

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 ade0d2407b5..06b0158736c 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
@@ -565,7 +565,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/test/__snapshots__/index.test.tsx.snap b/client/payment-details/test/__snapshots__/index.test.tsx.snap
index 707679fe3ce..805b7dca59f 100644
--- a/client/payment-details/test/__snapshots__/index.test.tsx.snap
+++ b/client/payment-details/test/__snapshots__/index.test.tsx.snap
@@ -437,7 +437,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
@@ -1048,7 +1048,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"

From 578bbf53a4041e02befaa32ecb39f4f5b3ad49a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9sar=20Costa?= <cesar.costa@automattic.com>
Date: Tue, 17 Dec 2024 13:24:57 -0300
Subject: [PATCH 6/6] Update CSS for the new label to fit in the column

---
 client/style.scss | 4 ++++
 1 file changed, 4 insertions(+)

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 {