@12-apps/payments-frontend 3.11.0 → 3.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/payments-frontend",
-  "version": "3.11.0",
+  "version": "3.12.0",
   "type": "module",
   "description": "Browser half of the vendor-agnostic payments platform: plug-and-play MUI components for the per-provider settings page (credential form from each provider's schema, masked hints, verify/enable) and the checkout page (PIX QR + polling, card tokenization, hosted-checkout redirect), plus the headless hooks and fetch clients they build on. Talks only to the host's payments HTTP surface — never to a provider directly. Microfrontend-ready: no app coupling, host injects theme and auth.",
   "exports": {

package/src/card/copy.ts

@@ -42,6 +42,12 @@ export interface CardFieldCopy {
    */
   expiryLabel: string;
   cvvLabel: string;
+  /**
+   * The expiry field holds something that is not yet `MM/AA` at all — too few
+   * digits, or the wrong shape. Distinct from {@link monthInvalid}, which is a
+   * well-formed date with an impossible month.
+   */
+  expiryIncomplete: string;
   /** A month outside 1–12 — a typo, not an expiry. */
   monthInvalid: string;
   /** A well-formed date that has already passed. */
@@ -66,6 +72,12 @@ export interface CardFieldCopy {
   cpfInvalid: string;
   /** The saved-cards radio group's own label. */
   savedCardsLabel: string;
+  /**
+   * A saved card's second line — the expiry, already zero-padded and split
+   * into month and year. The WORD in front of it is this host's; the order it
+   * reads in is the same order {@link expiryLabel} promised.
+   */
+  savedCardExpiry(month: string, year: number): string;
   /** The trailing option that opens the new-card form. */
   newCard: string;
   newCardDescription: string;

package/src/card/fields.tsx

@@ -41,7 +41,7 @@ export function SavedCardsPicker({
         ...savedCards.map((saved) => ({
           value: saved.id,
           label: `${saved.brand} •••• ${saved.last4}`,
-          description: `Validade ${String(saved.expMonth).padStart(2, "0")}/${saved.expYear}`,
+          description: copy.savedCardExpiry(String(saved.expMonth).padStart(2, "0"), saved.expYear),
         })),
         { value: NEW_CARD, label: copy.newCard, description: copy.newCardDescription },
       ]}

package/src/card/format.ts

@@ -97,10 +97,10 @@ export function validateExpiry(
   now: Date = new Date(),
 ): string | undefined {
   const match = /^(\d{2})\/(\d{2})$/.exec(value.trim());
-  if (!match) return "Validade incompleta (MM/AA).";
+  if (!match) return copy.expiryIncomplete;
   const mm = match[1];
   const yy = match[2];
-  if (mm === undefined || yy === undefined) return "Validade incompleta (MM/AA).";
+  if (mm === undefined || yy === undefined) return copy.expiryIncomplete;
   const month = Number(mm);
   if (month < 1 || month > 12) return copy.monthInvalid;
   const endOfMonth = new Date(2000 + Number(yy), month, 0, 23, 59, 59, 999);

package/src/card/pt-BR.ts

@@ -20,6 +20,7 @@ export const PT_BR_CARD_COPY: CardCopy = {
     holderRequired: 'Informe o nome impresso no cartão.',
     expiryLabel: 'Validade (MM/AA)',
     cvvLabel: 'CVV',
+    expiryIncomplete: 'Validade incompleta (MM/AA).',
     monthInvalid: 'Mês inválido.',
     expired: 'Cartão expirado.',
     expiryInvalid: 'Validade inválida ou expirada.',
@@ -29,6 +30,7 @@ export const PT_BR_CARD_COPY: CardCopy = {
     cpfRequired: 'CPF obrigatório.',
     cpfInvalid: 'CPF inválido.',
     savedCardsLabel: 'Cartão',
+    savedCardExpiry: (month, year) => `Validade ${month}/${year}`,
     newCard: 'Novo cartão',
     newCardDescription: 'Inserir outro cartão',
     saveCard: 'Salvar cartão para próximas compras',