@12-apps/payments-frontend 3.12.0 → 3.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/payments-frontend",
-  "version": "3.12.0",
+  "version": "3.13.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

@@ -41,6 +41,12 @@ export interface CardFieldCopy {
    * flagged it, and getting it wrong makes a buyer type the year first.
    */
   expiryLabel: string;
+  /**
+   * The same order, inside the box. It sat here as `"MM/AA"` while the LABEL
+   * beside it was already required config — so a host could translate the
+   * label and be contradicted by the field one line down.
+   */
+  expiryPlaceholder: string;
   cvvLabel: string;
   /**
    * The expiry field holds something that is not yet `MM/AA` at all — too few

package/src/card/fields.tsx

@@ -115,7 +115,7 @@ function ExpiryCvvFields({
         label={copy.expiryLabel}
         type="text"
         inputMode="numeric"
-        placeholder="MM/AA"
+        placeholder={copy.expiryPlaceholder}
         variant="outlined"
         size="md"
         fullWidth

package/src/card/pt-BR.ts

@@ -19,6 +19,7 @@ export const PT_BR_CARD_COPY: CardCopy = {
     holderLabel: 'Nome impresso no cartão',
     holderRequired: 'Informe o nome impresso no cartão.',
     expiryLabel: 'Validade (MM/AA)',
+    expiryPlaceholder: 'MM/AA',
     cvvLabel: 'CVV',
     expiryIncomplete: 'Validade incompleta (MM/AA).',
     monthInvalid: 'Mês inválido.',

package/src/components/ProviderSetupGuide.tsx

@@ -159,9 +159,10 @@ function StepText({ text, link }: { text?: string; link?: SetupStep['link'] }) {
  * button gives them nothing to weigh that against.
  */
 function ConfirmBar({ action }: { action: { label: string; run: () => void } }) {
+  const copy = usePaymentsSettingsCopy().setupGuide;
   return (
     <Box sx={BAR_SX} data-testid="payments-setup-confirm-bar">
-      <Typography sx={BAR_MSG_SX}>Confirme quando terminar do lado do provedor.</Typography>
+      <Typography sx={BAR_MSG_SX}>{copy.confirmPrompt}</Typography>
       <Button variant="contained" disableElevation sx={BTN_PRIMARY_SX} onClick={() => action.run()}>
         {action.label}
       </Button>

package/src/components/platform/ConnectApplicationPanel.tsx

@@ -6,6 +6,8 @@ import type { ReactNode } from 'react';
 import type { ConnectApplicationReport, PaymentEnvironment } from '@12-apps/payments-backend';
 
 import { CARD_SX, ConnectEnvironmentCard } from './ConnectEnvironmentCard';
+import type { PlatformHomologacaoCopy } from './copy';
+import { PlatformCopyProvider, usePlatformCopy } from './copy-context';
 
 /**
  * The platform's PagBank Connect application, per environment (FUT-479,
@@ -25,9 +27,11 @@ import { CARD_SX, ConnectEnvironmentCard } from './ConnectEnvironmentCard';
  * here, so the host page is a thin mount — page chrome, auth and loading
  * belong to the host; the screen itself lives in this package.
  *
- * English, like the rest of this platform surface (FUT-760): the reader is the
- * deployment's own integrator, reading redirect URIs and environment variable
- * names, and everything a developer reads in this repo is English.
+ * Its words are the HOST's (FUT-760), passed as one required `copy` object.
+ * The reader is whoever operates the platform — and a second platform adopting
+ * this package has its own operator, who reads whatever it was handed. The
+ * literals this screen used to carry were English because they were written
+ * for whoever was reading the code, which is a different person.
  */
 export interface ConnectApplicationPanelProps {
   /** The consult report, as the backend's `consultConnectApplications` answers. */
@@ -40,15 +44,26 @@ export interface ConnectApplicationPanelProps {
    * when provided.
    */
   configVarsFor?: (environment: PaymentEnvironment) => string[];
+  /** Every word this panel and its environment cards render. REQUIRED. */
+  copy: PlatformHomologacaoCopy;
 }
 
 export function ConnectApplicationPanel(props: ConnectApplicationPanelProps): ReactNode {
+  return (
+    <PlatformCopyProvider copy={props.copy}>
+      <ConnectApplicationBody {...props} />
+    </PlatformCopyProvider>
+  );
+}
+
+function ConnectApplicationBody(props: ConnectApplicationPanelProps): ReactNode {
   const { report, onRefresh, configVarsFor } = props;
+  const copy = usePlatformCopy().connect;
   return (
     <Stack spacing={2} data-testid="connect-application-panel">
       <Stack spacing={0.5} data-testid="connect-expected-redirect" sx={CARD_SX}>
         <Typography variant="caption" color="text.secondary" fontWeight={600}>
-          Callback this deployment uses (the value that must be registered)
+          {copy.expectedRedirectHeading}
         </Typography>
         <Box
           component="code"
@@ -72,7 +87,7 @@ export function ConnectApplicationPanel(props: ConnectApplicationPanelProps): Re
             onClick={() => onRefresh()}
             data-testid="connect-refresh"
           >
-            Consult again
+            {copy.consultAgain}
           </Button>
         </Box>
       ) : null}

package/src/components/platform/ConnectEnvironmentCard.tsx

@@ -4,6 +4,7 @@ import { Alert, Box, Button, Stack, Typography } from '@mui/material';
 import { useState, type ReactNode } from 'react';
 
 import type { ConnectApplicationStatus, PaymentEnvironment } from '@12-apps/payments-backend';
+import { usePlatformCopy } from './copy-context';
 
 /**
  * One environment's Connect application (FUT-479, packaged by FUT-573).
@@ -46,49 +47,50 @@ function Field({ label, children }: { label: string; children: ReactNode }): Rea
 
 /** The verdict the screen exists for: does the registered callback match ours? */
 function MismatchAlert({ status }: { status: ConnectApplicationStatus }): ReactNode {
+  const copy = usePlatformCopy().connect;
   if (status.application === null) return null;
   if (status.redirectUriMismatch === true) {
     return (
       <Alert severity="error" data-testid={`connect-mismatch-${status.environment}`}>
-        The redirect_uri registered with PagBank differs from the callback this deployment
-        uses. The OAuth authorization flow fails silently until the registration is corrected
-        at PagBank.
+        {copy.redirectDiffers}
       </Alert>
     );
   }
   if (status.redirectUriMismatch === false) {
     return (
       <Alert severity="success" data-testid={`connect-match-${status.environment}`}>
-        The registered redirect_uri matches the callback this deployment uses.
+        {copy.redirectMatches}
       </Alert>
     );
   }
   return (
     <Alert severity="warning" data-testid={`connect-unknown-${status.environment}`}>
-      The PagBank response carried no redirect_uri, so it could not be compared with the
-      callback this deployment uses.
+      {copy.redirectUnreported}
     </Alert>
   );
 }
 
 /** What PagBank reports as registered, plus whatever extra keys came back. */
 function ApplicationFields({ status }: { status: ConnectApplicationStatus }): ReactNode {
+  const copy = usePlatformCopy().connect;
   const app = status.application;
   if (app === null) return null;
   const extraKeys = Object.keys(app.extra);
   return (
     <Stack spacing={1.5}>
       <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2.5 }}>
-        <Field label="Name (shown to the merchant)">{app.name ?? '—'}</Field>
-        <Field label="Site">{app.site ?? '—'}</Field>
-        <Field label="Description">{app.description ?? '—'}</Field>
-        <Field label="Logo">{app.logo ?? '—'}</Field>
-        <Field label="Registered redirect_uri">{app.redirectUri ?? 'not reported'}</Field>
+        <Field label={copy.fields.name}>{app.name ?? copy.fieldEmpty}</Field>
+        <Field label={copy.fields.site}>{app.site ?? copy.fieldEmpty}</Field>
+        <Field label={copy.fields.description}>{app.description ?? copy.fieldEmpty}</Field>
+        <Field label={copy.fields.logo}>{app.logo ?? copy.fieldEmpty}</Field>
+        <Field label={copy.fields.redirectUri}>
+          {app.redirectUri ?? copy.redirectNotReported}
+        </Field>
       </Box>
       {extraKeys.length > 0 ? (
         <Box data-testid={`connect-extra-${status.environment}`}>
           <Typography variant="caption" color="text.secondary" fontWeight={600}>
-            Other fields returned (undocumented schema)
+            {copy.extraKeys}
           </Typography>
           <Box component="pre" sx={{ m: 0, fontSize: 12, overflowX: 'auto' }}>
             {JSON.stringify(app.extra, null, 2)}
@@ -111,6 +113,7 @@ function ConfigHelp({
   environment: PaymentEnvironment;
   configVars?: string[];
 }): ReactNode {
+  const copy = usePlatformCopy().connect;
   const [open, setOpen] = useState(false);
   if (!configVars || configVars.length === 0) return null;
   return (
@@ -121,13 +124,12 @@ function ConfigHelp({
         onClick={() => setOpen((value) => !value)}
         data-testid={`connect-config-toggle-${environment}`}
       >
-        {open ? 'Hide environment variables' : 'Show environment variables'}
+        {open ? copy.hideConfig : copy.showConfig}
       </Button>
       {open ? (
         <Box data-testid={`connect-config-details-${environment}`}>
           <Typography variant="caption" color="text.secondary" component="p">
-            This environment's application is resolved strictly from these variables, with no
-            fallback between environments:
+            {copy.resolvedFrom}
           </Typography>
           <Box component="ul" sx={{ m: 0, pl: 2.5 }}>
             {configVars.map((name) => (
@@ -151,6 +153,7 @@ export function ConnectEnvironmentCard({
   status: ConnectApplicationStatus;
   configVars?: string[];
 }): ReactNode {
+  const copy = usePlatformCopy().connect;
   return (
     <Stack spacing={1.5} data-testid={`connect-env-${status.environment}`} sx={CARD_SX}>
       <Box sx={{ display: 'flex', alignItems: 'baseline', gap: 1.5, wordBreak: 'break-all' }}>
@@ -162,9 +165,7 @@ export function ConnectEnvironmentCard({
         </Typography>
       </Box>
       {!status.configured ? (
-        <Typography variant="body2" color="text.secondary">
-          No application configured in this environment.
-        </Typography>
+        <Typography variant="body2" color="text.secondary">{copy.noApplication}</Typography>
       ) : null}
       {status.error !== null ? (
         <Alert severity="warning" data-testid={`connect-error-${status.environment}`}>

package/src/components/platform/HomologacaoGuideCard.tsx

@@ -6,6 +6,7 @@ import type { ReactNode } from 'react';
 import type { HomologacaoGuide } from '@12-apps/payments-backend';
 
 import { CARD_SX } from './ConnectEnvironmentCard';
+import { usePlatformCopy } from './copy-context';
 
 /**
  * The paste-ready homologação answers (FUT-483, packaged by FUT-573) — the
@@ -49,31 +50,31 @@ function Answer({ label, children }: { label: string; children: ReactNode }): Re
 }
 
 export function HomologacaoGuideCard({ guide }: { guide: HomologacaoGuide }): ReactNode {
+  const copy = usePlatformCopy().guide;
   return (
     <Stack spacing={1.5} data-testid="homologacao-guide-card" sx={CARD_SX}>
       <Typography variant="body2" fontWeight={600}>
-        Homologation form — answers ready to paste
+        {copy.heading}
       </Typography>
       <Typography variant="body2" color="text.secondary" component="p">
-        Open the{' '}
+        {copy.ledeBeforeForm}
         <Link
           href={guide.formUrl}
           target="_blank"
           rel="noreferrer"
           data-testid="homologacao-form-link"
         >
-          official homologation form
-        </Link>{' '}
-        and fill it in with the values below. In parallel, open a ticket with{' '}
+          {copy.formLink}
+        </Link>
+        {copy.ledeBeforeSupport}
         <Link href={guide.supportFormUrl} target="_blank" rel="noreferrer">
-          SIP — PagBank integration support
-        </Link>{' '}
-        quoting the 403 ACCESS_DENIED: whichever answers first settles whether the form
-        covers Connect. Documentation:{' '}
+          {copy.supportLink}
+        </Link>
+        {copy.ledeBeforeDocs}
         <Link href={guide.docsUrl} target="_blank" rel="noreferrer">
-          requesting homologation
+          {copy.docsLink}
         </Link>
-        .
+        {copy.ledeAfterDocs}
       </Typography>
       <Answer label={guide.fieldLabels.integrationType}>{guide.integrationType}</Answer>
       <Box data-testid="homologacao-services">

package/src/components/platform/HomologacaoOutcomeCard.tsx

@@ -6,6 +6,7 @@ import { useState, type ReactNode } from 'react';
 import type { PlatformHomologationStatus } from '@12-apps/payments-backend';
 
 import { CARD_SX } from './ConnectEnvironmentCard';
+import { usePlatformCopy } from './copy-context';
 
 /**
  * The homologação outcome record (FUT-483, packaged by FUT-573) — the durable
@@ -44,12 +45,6 @@ export interface HomologacaoSaveState {
   success: boolean;
 }
 
-const STATUS_LABEL: Record<PlatformHomologationStatus, string> = {
-  SUBMITTED: 'Submitted',
-  APPROVED: 'Approved',
-  REJECTED: 'Rejected',
-};
-
 const STATUS_COLOR: Record<PlatformHomologationStatus, 'warning' | 'success' | 'error'> = {
   SUBMITTED: 'warning',
   APPROVED: 'success',
@@ -57,10 +52,11 @@ const STATUS_COLOR: Record<PlatformHomologationStatus, 'warning' | 'success' | '
 };
 
 function StatusChip({ record }: { record: PlatformHomologationRecordView | null }): ReactNode {
+  const copy = usePlatformCopy().outcome;
   if (record === null) {
     return (
       <Chip
-        label="Not submitted"
+        label={copy.notSubmitted}
         size="small"
         variant="outlined"
         data-testid="homologacao-status-chip"
@@ -69,7 +65,7 @@ function StatusChip({ record }: { record: PlatformHomologationRecordView | null
   }
   return (
     <Chip
-      label={STATUS_LABEL[record.status]}
+      label={copy.statuses[record.status] ?? record.status}
       size="small"
       color={STATUS_COLOR[record.status]}
       data-testid="homologacao-status-chip"
@@ -88,11 +84,12 @@ function StatusChip({ record }: { record: PlatformHomologationRecordView | null
 const formatDateTime = (iso: string): string => new Date(iso).toLocaleString();
 
 function RecordTrail({ record }: { record: PlatformHomologationRecordView }): ReactNode {
+  const copy = usePlatformCopy().outcome;
   return (
     <Typography variant="caption" color="text.secondary" component="p">
-      {record.submittedAt ? `Submitted ${formatDateTime(record.submittedAt)}. ` : ''}
-      {record.decidedAt ? `Decided ${formatDateTime(record.decidedAt)}. ` : ''}
-      {record.updatedBy ? `Recorded by ${record.updatedBy}.` : ''}
+      {record.submittedAt ? copy.submittedAt(formatDateTime(record.submittedAt)) : ''}
+      {record.decidedAt ? copy.decidedAt(formatDateTime(record.decidedAt)) : ''}
+      {record.updatedBy ? copy.recordedBy(record.updatedBy) : ''}
     </Typography>
   );
 }
@@ -106,6 +103,7 @@ interface HomologacaoOutcomeCardProps {
 
 export function HomologacaoOutcomeCard(props: HomologacaoOutcomeCardProps): ReactNode {
   const { record, onSave, save } = props;
+  const copy = usePlatformCopy().outcome;
   const [status, setStatus] = useState<PlatformHomologationStatus>(record?.status ?? 'SUBMITTED');
   const [protocol, setProtocol] = useState(record?.protocol ?? '');
   const [notes, setNotes] = useState(record?.notes ?? '');
@@ -114,7 +112,7 @@ export function HomologacaoOutcomeCard(props: HomologacaoOutcomeCardProps): Reac
     <Stack spacing={1.5} data-testid="homologacao-outcome-card" sx={CARD_SX}>
       <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
         <Typography variant="body2" fontWeight={600}>
-          Homologation status
+          {copy.heading}
         </Typography>
         <StatusChip record={record} />
       </Box>
@@ -123,7 +121,7 @@ export function HomologacaoOutcomeCard(props: HomologacaoOutcomeCardProps): Reac
         <TextField
           select
           size="small"
-          label="Status"
+          label={copy.statusLabel}
           value={status}
           onChange={(event) => setStatus(event.target.value as PlatformHomologationStatus)}
           slotProps={{
@@ -131,24 +129,24 @@ export function HomologacaoOutcomeCard(props: HomologacaoOutcomeCardProps): Reac
             htmlInput: { 'data-testid': 'homologacao-status-select' },
           }}
         >
-          {(Object.keys(STATUS_LABEL) as PlatformHomologationStatus[]).map((key) => (
+          {(Object.keys(STATUS_COLOR) as PlatformHomologationStatus[]).map((key) => (
             <option key={key} value={key}>
-              {STATUS_LABEL[key]}
+              {copy.statuses[key] ?? key}
             </option>
           ))}
         </TextField>
         <TextField
           size="small"
-          aria-label="Protocol"
-          placeholder="Protocol (Pipefy card / ticket)"
+          aria-label={copy.protocolLabel}
+          placeholder={copy.protocolPlaceholder}
           value={protocol}
           onChange={(event) => setProtocol(event.target.value)}
           slotProps={{ htmlInput: { 'data-testid': 'homologacao-protocol' } }}
         />
         <TextField
           size="small"
-          aria-label="Notes"
-          placeholder="Notes (PagBank's reply, context…)"
+          aria-label={copy.notesLabel}
+          placeholder={copy.notesPlaceholder}
           value={notes}
           onChange={(event) => setNotes(event.target.value)}
           slotProps={{ htmlInput: { 'data-testid': 'homologacao-notes' } }}
@@ -160,7 +158,7 @@ export function HomologacaoOutcomeCard(props: HomologacaoOutcomeCardProps): Reac
           onClick={() => onSave({ status, protocol, notes })}
           data-testid="homologacao-save"
         >
-          Record
+          {copy.save}
         </Button>
       </Box>
       {save.error !== null ? (
@@ -170,7 +168,7 @@ export function HomologacaoOutcomeCard(props: HomologacaoOutcomeCardProps): Reac
       ) : null}
       {save.success ? (
         <Alert severity="success" data-testid="homologacao-save-ok">
-          Record updated.
+          {copy.saved}
         </Alert>
       ) : null}
     </Stack>

package/src/components/platform/PlatformHomologacao.tsx

@@ -13,6 +13,8 @@ import {
   type HomologacaoSaveState,
   type PlatformHomologationRecordView,
 } from './HomologacaoOutcomeCard';
+import type { PlatformHomologacaoCopy } from './copy';
+import { PlatformCopyProvider, usePlatformCopy } from './copy-context';
 
 /**
  * The PLATFORM's PagBank homologação screen (FUT-483, packaged by FUT-573).
@@ -49,10 +51,13 @@ export interface PlatformHomologacaoProps {
    * card shows it verbatim.
    */
   onGenerateAnexo: () => Promise<void>;
+  /** Every word these three cards render. REQUIRED — no default copy. */
+  copy: PlatformHomologacaoCopy;
 }
 
 /** The evidence-file half: real sandbox calls, downloaded as a text file. */
 function AnexoCard({ onGenerate }: { onGenerate: () => Promise<void> }): ReactNode {
+  const copy = usePlatformCopy().anexo;
   const [error, setError] = useState<string | null>(null);
   const [busy, setBusy] = useState(false);
 
@@ -62,7 +67,7 @@ function AnexoCard({ onGenerate }: { onGenerate: () => Promise<void> }): ReactNo
     try {
       await onGenerate();
     } catch (cause) {
-      setError(cause instanceof Error ? cause.message : 'Could not generate the attachment.');
+      setError(cause instanceof Error ? cause.message : copy.generateFailed);
     } finally {
       setBusy(false);
     }
@@ -71,13 +76,10 @@ function AnexoCard({ onGenerate }: { onGenerate: () => Promise<void> }): ReactNo
   return (
     <Stack spacing={1.5} data-testid="homologacao-anexo-card" sx={CARD_SX}>
       <Typography variant="body2" fontWeight={600}>
-        Evidence attachment
+        {copy.heading}
       </Typography>
       <Typography variant="body2" color="text.secondary" component="p">
-        The form demands the requests and responses of the calls sent to PagBank's APIs. The
-        button below makes those calls for real against the test environment (Sandbox), on the
-        platform's own token — nothing is actually charged — and downloads the file ready to
-        attach, with the token redacted.
+        {copy.body}
       </Typography>
       <Box>
         <Button
@@ -87,7 +89,7 @@ function AnexoCard({ onGenerate }: { onGenerate: () => Promise<void> }): ReactNo
           onClick={() => void generate()}
           data-testid="homologacao-anexo-button"
         >
-          Generate attachment
+          {copy.generate}
         </Button>
       </Box>
       {error !== null ? (
@@ -102,10 +104,12 @@ function AnexoCard({ onGenerate }: { onGenerate: () => Promise<void> }): ReactNo
 export function PlatformHomologacao(props: PlatformHomologacaoProps): ReactNode {
   const { record, guide, onSaveRecord, save, onGenerateAnexo } = props;
   return (
-    <Stack spacing={2} data-testid="platform-homologacao">
-      <HomologacaoOutcomeCard record={record} onSave={onSaveRecord} save={save} />
-      <HomologacaoGuideCard guide={guide} />
-      <AnexoCard onGenerate={onGenerateAnexo} />
-    </Stack>
+    <PlatformCopyProvider copy={props.copy}>
+      <Stack spacing={2} data-testid="platform-homologacao">
+        <HomologacaoOutcomeCard record={record} onSave={onSaveRecord} save={save} />
+        <HomologacaoGuideCard guide={guide} />
+        <AnexoCard onGenerate={onGenerateAnexo} />
+      </Stack>
+    </PlatformCopyProvider>
   );
 }

package/src/components/platform/copy-context.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { createContext, useContext, type JSX, type ReactNode } from 'react';
+
+import type { PlatformHomologacaoCopy } from './copy';
+
+/**
+ * The platform screens' words, for the eight components that render them.
+ *
+ * A CONTEXT rather than a prop, for the same reason the settings surface uses
+ * one: this is a tree of small cards — the outcome form, the paste-ready
+ * answers, the anexo, the environment cards and the fields inside them — and
+ * threading one object through all of them as props is how a copy port comes
+ * to exist, be required, and go unread.
+ *
+ * It stays a single REQUIRED prop at the two mounts (`PlatformHomologacao` and
+ * `ConnectApplicationPanel`), which is the only place a host has to answer.
+ */
+const PlatformCopyContext = createContext<PlatformHomologacaoCopy | null>(null);
+
+export function PlatformCopyProvider({
+  copy,
+  children,
+}: {
+  copy: PlatformHomologacaoCopy;
+  children: ReactNode;
+}): JSX.Element {
+  return <PlatformCopyContext.Provider value={copy}>{children}</PlatformCopyContext.Provider>;
+}
+
+/**
+ * The words these screens render — THROWS outside a provider rather than
+ * falling back.
+ *
+ * A fallback could only be this package's own answer, handed silently to the
+ * next platform's operator. Failing at the mount is the point: it is the one
+ * moment a host can still be told it forgot.
+ */
+export function usePlatformCopy(): PlatformHomologacaoCopy {
+  const copy = useContext(PlatformCopyContext);
+  if (!copy) {
+    throw new Error('usePlatformCopy must be rendered inside a <PlatformCopyProvider>');
+  }
+  return copy;
+}

package/src/components/platform/copy.ts

@@ -0,0 +1,113 @@
+/**
+ * Every word the PLATFORM's homologação screens render.
+ *
+ * The reader here is not a buyer and not a merchant: it is whoever operates
+ * the platform, submitting a vendor homologação on behalf of every tenant on
+ * it. That made this surface look internal enough to write literals into for a
+ * long time, and it is not — a second platform adopting
+ * `@12-apps/payments-frontend` mounts these same four cards, and its operator
+ * reads whatever this package decided, in whatever language it decided.
+ *
+ * So the same rule as every other surface here: REQUIRED, no defaults. A pack
+ * for one language ships as `PT_BR_PLATFORM_HOMOLOGACAO_COPY` and a host
+ * passes it by hand.
+ *
+ * What is NOT here, deliberately: `HomologacaoGuide.fieldLabels` and the guide's
+ * three URLs. Those are PagBank's own form field names and pages, answered by
+ * the backend adapter, and a translation of them produces a submission their
+ * form does not accept.
+ */
+
+/** The outcome card: what was submitted, and what came back. */
+export interface HomologacaoOutcomeCopy {
+  heading: string;
+  /** The status a record carries — and what "no record at all" reads as. */
+  statusLabel: string;
+  notSubmitted: string;
+  /** The two free-text fields, each with a visible-less input. */
+  protocolLabel: string;
+  protocolPlaceholder: string;
+  notesLabel: string;
+  notesPlaceholder: string;
+  /** Save, and the confirmation after it. */
+  save: string;
+  saved: string;
+  /** The three statuses a record can carry, keyed by the stored value. */
+  statuses: Readonly<Record<string, string>>;
+  /**
+   * The trail under the heading, one clause per timestamp the record has. Each
+   * takes its own value because the ORDER of word and date differs by language
+   * and this line concatenates whichever clauses exist.
+   */
+  submittedAt(when: string): string;
+  decidedAt(when: string): string;
+  recordedBy(who: string): string;
+}
+
+/** The paste-ready answers card, and the three links woven through its lede. */
+export interface HomologacaoGuideCopy {
+  heading: string;
+  /**
+   * The instruction paragraph, in the runs it renders as: text, link, text,
+   * link, text, link, text. Split because two of the links sit MID-SENTENCE,
+   * so a single string with placeholders could not carry them.
+   */
+  ledeBeforeForm: string;
+  formLink: string;
+  ledeBeforeSupport: string;
+  supportLink: string;
+  ledeBeforeDocs: string;
+  docsLink: string;
+  ledeAfterDocs: string;
+}
+
+/** The evidence-file card. */
+export interface HomologacaoAnexoCopy {
+  heading: string;
+  body: string;
+  generate: string;
+  /** A generate that threw something carrying no message of its own. */
+  generateFailed: string;
+}
+
+/** The Connect application panel, and the environment card under it. */
+export interface ConnectApplicationCopy {
+  /** The callback the deployment uses — the value that must be registered. */
+  expectedRedirectHeading: string;
+  consultAgain: string;
+  /** No application resolved for this environment at all. */
+  noApplication: string;
+  /**
+   * The three verdicts on the registered `redirect_uri`: it matches, it does
+   * not, or PagBank reported none to compare against. A mismatch is the whole
+   * reason this card exists, so all three read as findings rather than states.
+   */
+  redirectMatches: string;
+  redirectDiffers: string;
+  redirectUnreported: string;
+  /** The application's own fields, as PagBank reports them. */
+  fields: {
+    name: string;
+    site: string;
+    description: string;
+    logo: string;
+    redirectUri: string;
+  };
+  /** What a field with no value reads as, and an unreported redirect_uri. */
+  fieldEmpty: string;
+  redirectNotReported: string;
+  /** Where the environment's application comes from, and its disclosure. */
+  resolvedFrom: string;
+  showConfig: string;
+  hideConfig: string;
+  /** The heading above whatever extra keys PagBank's response carried. */
+  extraKeys: string;
+}
+
+/** The whole platform surface, in one object a host passes at the mount. */
+export interface PlatformHomologacaoCopy {
+  outcome: HomologacaoOutcomeCopy;
+  guide: HomologacaoGuideCopy;
+  anexo: HomologacaoAnexoCopy;
+  connect: ConnectApplicationCopy;
+}

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

@@ -0,0 +1,73 @@
+import type { PlatformHomologacaoCopy } from './copy';
+
+/**
+ * The pt-BR pack for the platform's homologação screens.
+ *
+ * A NAMED pack, which is how this repo ships a language: a host imports it and
+ * passes it by hand, so choosing Portuguese is a line in that host's diff
+ * rather than a silence in this package.
+ *
+ * The English these screens rendered as literals is deliberately NOT what this
+ * pack says. Those sentences were written for a developer reading the code;
+ * these are written for the operator filling PagBank's form, which is the
+ * register the surface is actually in.
+ */
+export const PT_BR_PLATFORM_HOMOLOGACAO_COPY: PlatformHomologacaoCopy = {
+  outcome: {
+    heading: 'Situação da homologação',
+    statusLabel: 'Situação',
+    notSubmitted: 'Não enviada',
+    protocolLabel: 'Protocolo',
+    protocolPlaceholder: 'Protocolo (card do Pipefy / chamado)',
+    notesLabel: 'Observações',
+    notesPlaceholder: 'Observações (resposta do PagBank, contexto…)',
+    save: 'Registrar',
+    saved: 'Registro atualizado.',
+    statuses: { SUBMITTED: 'Enviada', APPROVED: 'Aprovada', REJECTED: 'Recusada' },
+    submittedAt: (when) => `Enviada em ${when}. `,
+    decidedAt: (when) => `Decidida em ${when}. `,
+    recordedBy: (who) => `Registrado por ${who}.`,
+  },
+  guide: {
+    heading: 'Formulário de homologação — respostas prontas para colar',
+    ledeBeforeForm: 'Abra o ',
+    formLink: 'formulário oficial de homologação',
+    ledeBeforeSupport: ' e preencha com os valores abaixo. Em paralelo, abra um chamado no ',
+    supportLink: 'SIP — suporte de integração PagBank',
+    ledeBeforeDocs:
+      ' citando o 403 ACCESS_DENIED: o que responder primeiro define se o formulário cobre o Connect. Documentação: ',
+    docsLink: 'solicitar homologação',
+    ledeAfterDocs: '.',
+  },
+  anexo: {
+    heading: 'Anexo de evidências',
+    body:
+      'O formulário pede as requisições e as respostas das chamadas enviadas às APIs do PagBank. O arquivo é gerado a partir das chamadas reais desta plataforma, com o token redigido.',
+    generate: 'Gerar anexo',
+    generateFailed: 'Não foi possível gerar o anexo.',
+  },
+  connect: {
+    expectedRedirectHeading: 'Callback que este deploy usa (o valor que precisa estar registrado)',
+    consultAgain: 'Consultar de novo',
+    noApplication: 'Nenhuma aplicação configurada neste ambiente.',
+    redirectMatches: 'O redirect_uri registrado confere com o callback que este deploy usa.',
+    redirectDiffers:
+      'O redirect_uri registrado no PagBank é diferente do callback que este deploy usa.',
+    redirectUnreported:
+      'A resposta do PagBank não trouxe redirect_uri, então não foi possível comparar com o callback.',
+    fields: {
+      name: 'Nome (exibido ao lojista)',
+      site: 'Site',
+      description: 'Descrição',
+      logo: 'Logo',
+      redirectUri: 'redirect_uri registrado',
+    },
+    fieldEmpty: '—',
+    redirectNotReported: 'não informado',
+    resolvedFrom:
+      'A aplicação deste ambiente é resolvida estritamente a partir destas variáveis, sem fallback entre ambientes:',
+    showConfig: 'Mostrar variáveis de ambiente',
+    hideConfig: 'Ocultar variáveis de ambiente',
+    extraKeys: 'Outros campos retornados',
+  },
+};

package/src/components/settings-copy.ts

@@ -289,6 +289,12 @@ export interface SetupGuideCopy {
   confirmedByYou: string;
   /** Reopen a section the owner already confirmed. */
   reviewAction: string;
+  /**
+   * The sentence beside the confirm button. It exists because the owner is
+   * vouching for work done in the PROVIDER's dashboard, not here — a bare
+   * button gives them nothing to weigh that against.
+   */
+  confirmPrompt: string;
   /**
    * The copy-to-clipboard button beside a reference value, and what it says
    * for the two seconds after a successful copy.

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

@@ -166,6 +166,7 @@ export const PT_BR_PAYMENTS_SETTINGS_COPY: PaymentsSettingsCopy = {
     defaultConfirmLabel: 'Já habilitei o Checkout Integrado',
     confirmedByYou: 'Confirmado por você',
     reviewAction: 'Revisar',
+    confirmPrompt: 'Confirme quando terminar do lado do provedor.',
     copyValue: (fieldLabel) => `Copiar ${fieldLabel}`,
     copied: 'Copiado',
   },

package/src/index.ts

@@ -306,23 +306,23 @@ export {
 // The PLATFORM operations screens (FUT-479 / FUT-483, packaged by FUT-573) —
 // the Connect-application consult and the homologação, as dumb components a
 // host page mounts with data + callbacks from its own routes. Their backend
-// halves live in `@12-apps/payments-backend` (`consultConnectApplications`,
-// `platformHomologacaoGuide`, `createHomologationRecordService`,
-// `buildPlatformHomologacaoAnexo`).
+// halves are `consultConnectApplications`, `platformHomologacaoGuide`,
+// `createHomologationRecordService` and `buildPlatformHomologacaoAnexo`.
 // ---------------------------------------------------------------------------
 export {
   ConnectApplicationPanel,
   type ConnectApplicationPanelProps,
 } from './components/platform/ConnectApplicationPanel';
-export {
-  PlatformHomologacao,
-  type PlatformHomologacaoProps,
-} from './components/platform/PlatformHomologacao';
+export { PlatformHomologacao, type PlatformHomologacaoProps } from './components/platform/PlatformHomologacao';
 export {
   type HomologacaoSaveInput,
   type HomologacaoSaveState,
   type PlatformHomologationRecordView,
 } from './components/platform/HomologacaoOutcomeCard';
+// Both mounts require `copy`, so the contract and its pt-BR pack are part of
+// the port — a required port a host cannot import is not one.
+export type * from './components/platform/copy';
+export { PT_BR_PLATFORM_HOMOLOGACAO_COPY } from './components/platform/pt-BR';
 
 /**
  * Re-exported because it appears in the `prepareConnect` prop a host must