@12-apps/payments-frontend 3.12.0 → 3.14.0

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/en-US.ts

@@ -0,0 +1,93 @@
+import type { PlatformHomologacaoCopy } from './copy';
+
+/**
+ * The en-US 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.
+ *
+ * ## What is translated here, and what is not
+ *
+ * These screens are read by the platform OPERATOR filling PagBank's form, and
+ * that is what the words are for — so the instructions, headings and statuses
+ * are English here.
+ *
+ * What stays is everything the operator has to MATCH against PagBank's own
+ * surfaces: `redirect_uri` is the parameter name in the API response, "SIP" and
+ * "Pipefy" are the names of the systems they will open, `ACCESS_DENIED` is the
+ * error string they are quoting in the ticket, and "homologação" is what
+ * PagBank calls the process — an operator searching support for
+ * "homologation" finds nothing.
+ *
+ * The ANSWERS the form is filled with are a different matter and are not here
+ * at all: they live in `@12-apps/payments-backend`'s `PT_BR_HOMOLOGACAO_ANSWERS`
+ * and stay Portuguese, because a PagBank reviewer reads them and several are
+ * multiple-choice options on the form itself.
+ */
+export const EN_US_PLATFORM_HOMOLOGACAO_COPY: PlatformHomologacaoCopy = {
+  outcome: {
+    heading: 'Homologação status',
+    statusLabel: 'Status',
+    notSubmitted: 'Not submitted',
+    protocolLabel: 'Protocol',
+    protocolPlaceholder: 'Protocol (Pipefy card / ticket)',
+    notesLabel: 'Notes',
+    notesPlaceholder: "Notes (PagBank's reply, context…)",
+    save: 'Record',
+    saved: 'Record updated.',
+    // The KEYS are the stored status values, not words.
+    statuses: { SUBMITTED: 'Submitted', APPROVED: 'Approved', REJECTED: 'Rejected' },
+    // Three fragments the screen concatenates into one line, so the first two
+    // keep their trailing space and the last one ends the sentence.
+    submittedAt: (when) => `Submitted ${when}. `,
+    decidedAt: (when) => `Decided ${when}. `,
+    recordedBy: (who) => `Recorded by ${who}.`,
+  },
+  guide: {
+    heading: 'Homologação form — answers ready to paste',
+    // Five fragments wrapping two links. Each keeps its own leading or
+    // trailing space; a translation that made them whole sentences would break
+    // the line the screen actually renders.
+    ledeBeforeForm: 'Open the ',
+    formLink: 'official homologação form',
+    ledeBeforeSupport: ' and fill it in with the values below. In parallel, open a ticket on ',
+    supportLink: 'SIP — PagBank integration support',
+    ledeBeforeDocs:
+      ' quoting the 403 ACCESS_DENIED: what you answer first decides whether the form covers Connect. Documentation: ',
+    docsLink: 'requesting homologação',
+    ledeAfterDocs: '.',
+  },
+  anexo: {
+    heading: 'Evidence attachment',
+    body:
+      "The form asks for the requests and responses of the calls sent to PagBank's APIs. The file is generated from this platform's real calls, with the token redacted.",
+    generate: 'Generate attachment',
+    generateFailed: 'Could not generate the attachment.',
+  },
+  connect: {
+    expectedRedirectHeading: 'The callback this deploy uses (the value that must be registered)',
+    consultAgain: 'Look it up again',
+    noApplication: 'No application configured in this environment.',
+    // `redirect_uri` is the parameter name in PagBank's own response — an
+    // operator compares the two strings character by character.
+    redirectMatches: 'The registered redirect_uri matches the callback this deploy uses.',
+    redirectDiffers:
+      'The redirect_uri registered with PagBank differs from the callback this deploy uses.',
+    redirectUnreported:
+      "PagBank's response carried no redirect_uri, so it could not be compared with the callback.",
+    fields: {
+      name: 'Name (shown to the store owner)',
+      site: 'Site',
+      description: 'Description',
+      logo: 'Logo',
+      redirectUri: 'registered redirect_uri',
+    },
+    fieldEmpty: '—',
+    redirectNotReported: 'not reported',
+    resolvedFrom:
+      "This environment's application is resolved strictly from these variables, with no fallback between environments:",
+    showConfig: 'Show environment variables',
+    hideConfig: 'Hide environment variables',
+    extraKeys: 'Other fields returned',
+  },
+};

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.