From a29aef5ebe5fec5e6a4cbb81461647e5c2f3a6be Mon Sep 17 00:00:00 2001
From: ayumi-signal <143036029+ayumi-signal@users.noreply.github.com>
Date: Wed, 3 Sep 2025 10:49:12 -0700
Subject: [PATCH] Localize payment card expiration date

---
 _locales/en/messages.json                                  | 4 ++++
 ts/components/PreferencesDonateFlow.tsx                    | 1 +
 .../preferences/donations/DonateInputCardExp.stories.tsx   | 3 +++
 ts/components/preferences/donations/DonateInputCardExp.tsx | 7 +++++--
 4 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index ae02eee8e7..f88b91f9c2 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -8954,6 +8954,10 @@
     "messageformat": "Expiration Date",
     "description": "When entering payment card details for a donation, this label is for the credit card expiration date input box."
   },
+  "icu:DonateFlow__card-form-expiration-date-placeholder": {
+    "messageformat": "MM/YY",
+    "description": "When entering payment card expiration date, this is the placeholder value in the date input box when it is empty. Please specify a value which would be reasonable to see in a payment or checkout form. The format is Month/Year to match the global credit card expiration date format. The localized value is suggested to contain 2 characters for month and 2 characters for year. In CJK languages single characters are acceptable for month and year e.g. 月 and 年. Month and year should be separated by a forward slash (/) because after the user begins typing the date, the app will automatically separate them with a slash."
+  },
   "icu:DonateFlow__card-form-title-donate-with-amount": {
     "messageformat": "Donate {formattedCurrencyAmount} to Signal",
     "description": "Title above the payment card entry form after selecting a donation amount. Amount includes the currency symbol and is formatted in the locale's standard format. Examples: Donate $10; Donate ¥1000; Donate €10"
diff --git a/ts/components/PreferencesDonateFlow.tsx b/ts/components/PreferencesDonateFlow.tsx
index 21c5b3c132..2fa37368b1 100644
--- a/ts/components/PreferencesDonateFlow.tsx
+++ b/ts/components/PreferencesDonateFlow.tsx
@@ -821,6 +821,7 @@ function CardForm({
           })}
         >
           <DonateInputCardExp
+            i18n={i18n}
             id="cardExpiration"
             value={cardExpiration}
             onValueChange={handleCardExpirationChange}
diff --git a/ts/components/preferences/donations/DonateInputCardExp.stories.tsx b/ts/components/preferences/donations/DonateInputCardExp.stories.tsx
index f66802ec38..464e9994ba 100644
--- a/ts/components/preferences/donations/DonateInputCardExp.stories.tsx
+++ b/ts/components/preferences/donations/DonateInputCardExp.stories.tsx
@@ -6,9 +6,12 @@ import { DonateInputCardExp } from './DonateInputCardExp';
 import type { DonateInputCardExpProps } from './DonateInputCardExp';
 import type { ComponentMeta } from '../../../storybook/types';
 
+const { i18n } = window.SignalContext;
+
 export default {
   component: DonateInputCardExp,
   args: {
+    i18n,
     id: '',
     value: '',
     onValueChange: action('onValueChange'),
diff --git a/ts/components/preferences/donations/DonateInputCardExp.tsx b/ts/components/preferences/donations/DonateInputCardExp.tsx
index c582a480cb..420de38b4f 100644
--- a/ts/components/preferences/donations/DonateInputCardExp.tsx
+++ b/ts/components/preferences/donations/DonateInputCardExp.tsx
@@ -36,6 +36,7 @@ export function getCardExpirationErrorMessage(
 }
 
 export type DonateInputCardExpProps = Readonly<{
+  i18n: LocalizerType;
   id: string;
   value: string;
   onValueChange: (newValue: string) => void;
@@ -46,7 +47,7 @@ export type DonateInputCardExpProps = Readonly<{
 export const DonateInputCardExp = memo(function DonateInputCardExp(
   props: DonateInputCardExpProps
 ) {
-  const { onEnter, onValueChange } = props;
+  const { i18n, onEnter, onValueChange } = props;
   const inputRef = useRef<HTMLInputElement>(null);
 
   useInputMask(inputRef, CC_EXP_FORMATTER);
@@ -71,7 +72,9 @@ export const DonateInputCardExp = memo(function DonateInputCardExp(
     <input
       ref={inputRef}
       id={props.id}
-      placeholder="MM/YY"
+      placeholder={i18n(
+        'icu:DonateFlow__card-form-expiration-date-placeholder'
+      )}
       type="text"
       inputMode="numeric"
       autoComplete="cc-exp"