Localize payment card expiration date

_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"

ts/components/PreferencesDonateFlow.tsx

@@ -821,6 +821,7 @@ function CardForm({
           })}
         >
           <DonateInputCardExp
+            i18n={i18n}
             id="cardExpiration"
             value={cardExpiration}
             onValueChange={handleCardExpirationChange}

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'),

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"