@12-apps/payments-frontend 3.10.0 → 3.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/payments-frontend",
-  "version": "3.10.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. */
@@ -51,6 +57,8 @@ export interface CardFieldCopy {
    * the expiry as one string and only learns it is unusable.
    */
   expiryInvalid: string;
+  /** No CVV typed at all — distinct from one of the wrong length. */
+  cvvRequired: string;
   cvvInvalid: string;
   /**
    * The CVV is the wrong length for the detected network — Amex wants four,
@@ -64,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);
@@ -113,7 +113,7 @@ export function validateCvv(
   brand: CardBrand = "Unknown",
 ): string | undefined {
   const digits = onlyDigits(value);
-  if (!digits) return "Informe o CVV.";
+  if (!digits) return copy.cvvRequired;
   const len = cvvLength(brand);
   return digits.length === len ? undefined : copy.cvvDigits(len);
 }

package/src/card/pt-BR.ts

@@ -20,14 +20,17 @@ 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.',
+    cvvRequired: 'Informe o CVV.',
     cvvInvalid: 'CVV inválido.',
     cvvDigits: (length) => `CVV deve ter ${length} dígitos.`,
     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',

package/src/components/ConnectionCard.tsx

@@ -219,7 +219,7 @@ export function DisconnectDialog(props: {
           {props.busy ? <CircularProgress size={18} sx={{ color: '#fff' }} /> : copy.removeAction}
         </Button>
         <Button fullWidth onClick={props.onCancel} disabled={props.busy} sx={LINKISH_SX}>
-          Cancelar
+          {copy.cancel}
         </Button>
       </DialogActions>
     </Dialog>

package/src/components/ProviderSetupGuide.tsx

@@ -31,6 +31,7 @@ import {
 } from './panel-tokens';
 
 import { richText } from './rich-text';
+import { usePaymentsSettingsCopy } from './settings-copy-context';
 
 /**
  * Renders a provider's step-by-step onboarding walkthrough — the reusable
@@ -104,6 +105,7 @@ function CopyField({
 }
 
 function CopyRow({ label, text }: { label: string; text: string }) {
+  const copy = usePaymentsSettingsCopy().setupGuide;
   const [copied, setCopied] = useState(false);
   return (
     <Stack direction="row" spacing={1} alignItems="center" sx={{ width: '100%' }}>
@@ -114,7 +116,7 @@ function CopyRow({ label, text }: { label: string; text: string }) {
       */}
       <TextField fullWidth size="small" disabled value={text} />
       <IconButton
-        aria-label={copied ? 'Copiado' : `Copiar ${label}`}
+        aria-label={copied ? copy.copied : copy.copyValue(label)}
         onClick={() => {
           void navigator.clipboard.writeText(text).then(() => setCopied(true));
         }}

package/src/components/settings-copy.ts

@@ -176,6 +176,8 @@ export interface ConnectionCardCopy {
    * taking orders — the offer that makes the destructive button safe to show.
    */
   pauseInstead: string;
+  /** The dialog's plain dismiss, under the two offers above. */
+  cancel: string;
 }
 
 /** The credential form: its fields, its probe, and what it says while testing. */
@@ -287,6 +289,12 @@ export interface SetupGuideCopy {
   confirmedByYou: string;
   /** Reopen a section the owner already confirmed. */
   reviewAction: string;
+  /**
+   * The copy-to-clipboard button beside a reference value, and what it says
+   * for the two seconds after a successful copy.
+   */
+  copyValue(fieldLabel: string): string;
+  copied: string;
 }
 
 /** The whole settings surface, in one object a host passes at the mount. */

package/src/components/settings-pt-BR.ts

@@ -108,6 +108,7 @@ export const PT_BR_PAYMENTS_SETTINGS_COPY: PaymentsSettingsCopy = {
       `Pagamentos já aprovados e estornos em andamento seguem normalmente pelo ${displayName}.`,
     removeRestartsSetup: 'Para reconectar, os passos recomeçam do zero.',
     pauseInstead: 'Só pausar o recebimento',
+    cancel: 'Cancelar',
   },
   credentials: {
     configuredKeepBlank: 'Configurado — deixe em branco para manter o valor atual.',
@@ -165,5 +166,7 @@ export const PT_BR_PAYMENTS_SETTINGS_COPY: PaymentsSettingsCopy = {
     defaultConfirmLabel: 'Já habilitei o Checkout Integrado',
     confirmedByYou: 'Confirmado por você',
     reviewAction: 'Revisar',
+    copyValue: (fieldLabel) => `Copiar ${fieldLabel}`,
+    copied: 'Copiado',
   },
 };