Style donations card form

ts/components/preferences/donations/DonateInputCardCvc.tsx

@@ -8,18 +8,17 @@ import { CardCvcError } from '../../../types/DonationsCardForm';
 import { missingCaseError } from '../../../util/missingCaseError';
 
 export function getCardCvcErrorMessage(
-  _i18n: LocalizerType,
+  i18n: LocalizerType,
   error: CardCvcError
 ): string {
   switch (error) {
-    case CardCvcError.EMPTY:
-      return 'EMPTY';
     case CardCvcError.LENGTH_TOO_SHORT:
-      return 'LENGTH_TOO_SHORT';
+      return i18n('icu:DonateFlow__card-form-error-cvc-too-short');
+    case CardCvcError.EMPTY:
     case CardCvcError.INVALID_CHARS:
     case CardCvcError.LENGTH_TOO_LONG:
     case CardCvcError.LENGTH_INVALID:
-      return 'INVALID';
+      return i18n('icu:DonateFlow__card-form-error-invalid');
     default:
       throw missingCaseError(error);
   }

ts/components/preferences/donations/DonateInputCardExp.tsx

@@ -8,18 +8,17 @@ import { missingCaseError } from '../../../util/missingCaseError';
 import type { LocalizerType } from '../../../types/I18N';
 
 export function getCardExpirationErrorMessage(
-  _i18n: LocalizerType,
+  i18n: LocalizerType,
   error: CardExpirationError
 ): string {
   switch (error) {
-    case CardExpirationError.EMPTY:
-      return 'EMPTY';
     case CardExpirationError.EXPIRED_PAST_YEAR:
     case CardExpirationError.EXPIRED_EARLIER_IN_YEAR:
-      return 'EXPIRED';
+      return i18n('icu:DonateFlow__card-form-error-expiration-expired');
     case CardExpirationError.YEAR_MISSING:
     case CardExpirationError.YEAR_EMPTY:
-      return 'MISSING YEAR';
+      return i18n('icu:DonateFlow__card-form-error-year-missing');
+    case CardExpirationError.EMPTY:
     case CardExpirationError.INVALID_CHARS:
     case CardExpirationError.TOO_MANY_SLASHES:
     case CardExpirationError.MONTH_EMPTY:
@@ -30,7 +29,7 @@ export function getCardExpirationErrorMessage(
     case CardExpirationError.YEAR_INVALID_INTEGER:
     case CardExpirationError.MONTH_OUT_OF_RANGE:
     case CardExpirationError.YEAR_TOO_FAR_IN_FUTURE:
-      return 'INVALID';
+      return i18n('icu:DonateFlow__card-form-error-invalid');
     default:
       throw missingCaseError(error);
   }

ts/components/preferences/donations/DonateInputCardNumber.tsx

@@ -8,16 +8,15 @@ import { CardNumberError } from '../../../types/DonationsCardForm';
 import { missingCaseError } from '../../../util/missingCaseError';
 
 export function getCardNumberErrorMessage(
-  _i18n: LocalizerType,
+  i18n: LocalizerType,
   error: CardNumberError
 ): string {
   switch (error) {
     case CardNumberError.EMPTY:
-      return 'EMPTY';
     case CardNumberError.INVALID_CHARS:
     case CardNumberError.INVALID_OR_INCOMPLETE_NUMBER:
     case CardNumberError.INVALID_NUMBER:
-      return 'INVALID';
+      return i18n('icu:DonateFlow__card-form-error-invalid-card-number');
     default:
       throw missingCaseError(error);
   }