@12-apps/payments-frontend 3.9.0 → 3.11.0

package/src/components/platform/HomologacaoOutcomeCard.tsx

@@ -45,9 +45,9 @@ export interface HomologacaoSaveState {
 }
 
 const STATUS_LABEL: Record<PlatformHomologationStatus, string> = {
-  SUBMITTED: 'Solicitada',
-  APPROVED: 'Aprovada',
-  REJECTED: 'Recusada',
+  SUBMITTED: 'Submitted',
+  APPROVED: 'Approved',
+  REJECTED: 'Rejected',
 };
 
 const STATUS_COLOR: Record<PlatformHomologationStatus, 'warning' | 'success' | 'error'> = {
@@ -60,7 +60,7 @@ function StatusChip({ record }: { record: PlatformHomologationRecordView | null
   if (record === null) {
     return (
       <Chip
-        label="Não solicitada"
+        label="Not submitted"
         size="small"
         variant="outlined"
         data-testid="homologacao-status-chip"
@@ -77,14 +77,22 @@ function StatusChip({ record }: { record: PlatformHomologationRecordView | null
   );
 }
 
-const formatDateTime = (iso: string): string => new Date(iso).toLocaleString('pt-BR');
+/**
+ * The trail's timestamps, in the READER's own locale.
+ *
+ * No tag passed, deliberately (FUT-760): this screen is the platform
+ * integrator's, and it was pinned to `pt-BR` — which showed a Brazilian date
+ * to an operator whose browser is set to anything else. The runtime default is
+ * the one thing here that is genuinely theirs.
+ */
+const formatDateTime = (iso: string): string => new Date(iso).toLocaleString();
 
 function RecordTrail({ record }: { record: PlatformHomologationRecordView }): ReactNode {
   return (
     <Typography variant="caption" color="text.secondary" component="p">
-      {record.submittedAt ? `Solicitada em ${formatDateTime(record.submittedAt)}. ` : ''}
-      {record.decidedAt ? `Decidida em ${formatDateTime(record.decidedAt)}. ` : ''}
-      {record.updatedBy ? `Registrado por ${record.updatedBy}.` : ''}
+      {record.submittedAt ? `Submitted ${formatDateTime(record.submittedAt)}. ` : ''}
+      {record.decidedAt ? `Decided ${formatDateTime(record.decidedAt)}. ` : ''}
+      {record.updatedBy ? `Recorded by ${record.updatedBy}.` : ''}
     </Typography>
   );
 }
@@ -106,7 +114,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}>
-          Situação da homologação
+          Homologation status
         </Typography>
         <StatusChip record={record} />
       </Box>
@@ -115,7 +123,7 @@ export function HomologacaoOutcomeCard(props: HomologacaoOutcomeCardProps): Reac
         <TextField
           select
           size="small"
-          label="Situação"
+          label="Status"
           value={status}
           onChange={(event) => setStatus(event.target.value as PlatformHomologationStatus)}
           slotProps={{
@@ -131,16 +139,16 @@ export function HomologacaoOutcomeCard(props: HomologacaoOutcomeCardProps): Reac
         </TextField>
         <TextField
           size="small"
-          aria-label="Protocolo"
-          placeholder="Protocolo (cartão do Pipefy / chamado)"
+          aria-label="Protocol"
+          placeholder="Protocol (Pipefy card / ticket)"
           value={protocol}
           onChange={(event) => setProtocol(event.target.value)}
           slotProps={{ htmlInput: { 'data-testid': 'homologacao-protocol' } }}
         />
         <TextField
           size="small"
-          aria-label="Observações"
-          placeholder="Observações (resposta do PagBank, contexto…)"
+          aria-label="Notes"
+          placeholder="Notes (PagBank's reply, context…)"
           value={notes}
           onChange={(event) => setNotes(event.target.value)}
           slotProps={{ htmlInput: { 'data-testid': 'homologacao-notes' } }}
@@ -152,7 +160,7 @@ export function HomologacaoOutcomeCard(props: HomologacaoOutcomeCardProps): Reac
           onClick={() => onSave({ status, protocol, notes })}
           data-testid="homologacao-save"
         >
-          Registrar
+          Record
         </Button>
       </Box>
       {save.error !== null ? (
@@ -162,7 +170,7 @@ export function HomologacaoOutcomeCard(props: HomologacaoOutcomeCardProps): Reac
       ) : null}
       {save.success ? (
         <Alert severity="success" data-testid="homologacao-save-ok">
-          Registro atualizado.
+          Record updated.
         </Alert>
       ) : null}
     </Stack>

package/src/components/platform/PlatformHomologacao.tsx

@@ -28,9 +28,13 @@ import {
  * mounted routes (`platformHomologacaoGuide`, `createHomologationRecordService`
  * and `buildPlatformHomologacaoAnexo` in `@12-apps/payments-backend`), so the
  * host page is a thin mount.
+ *
+ * English, like the rest of this platform surface (FUT-760) — see
+ * `ConnectApplicationPanel` for why. The only Portuguese that reaches the
+ * screen is PagBank's own form field names, carried on `guide.fieldLabels`.
  */
 export interface PlatformHomologacaoProps {
-  /** The recorded outcome; null renders the honest "não solicitada". */
+  /** The recorded outcome; null renders the honest "not submitted". */
   record: PlatformHomologationRecordView | null;
   /** The paste-ready answers, computed by the host's backend. */
   guide: HomologacaoGuide;
@@ -58,7 +62,7 @@ function AnexoCard({ onGenerate }: { onGenerate: () => Promise<void> }): ReactNo
     try {
       await onGenerate();
     } catch (cause) {
-      setError(cause instanceof Error ? cause.message : 'Não foi possível gerar o anexo.');
+      setError(cause instanceof Error ? cause.message : 'Could not generate the attachment.');
     } finally {
       setBusy(false);
     }
@@ -67,13 +71,13 @@ 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}>
-        Anexo de evidências
+        Evidence attachment
       </Typography>
       <Typography variant="body2" color="text.secondary" component="p">
-        O formulário exige os requests e responses das requisições enviadas às APIs do
-        PagBank. O botão abaixo faz as chamadas reais no ambiente de testes (Sandbox) com o
-        token da própria plataforma — nada é cobrado de verdade — e baixa o arquivo pronto
-        para anexar, com o token redigido.
+        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.
       </Typography>
       <Box>
         <Button
@@ -83,7 +87,7 @@ function AnexoCard({ onGenerate }: { onGenerate: () => Promise<void> }): ReactNo
           onClick={() => void generate()}
           data-testid="homologacao-anexo-button"
         >
-          Gerar anexo
+          Generate attachment
         </Button>
       </Box>
       {error !== null ? (

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

@@ -0,0 +1,50 @@
+'use client';
+
+import { createContext, useContext, type JSX, type ReactNode } from 'react';
+
+import type { PaymentsSettingsCopy } from './settings-copy';
+
+/**
+ * The settings surface's words, for the fifteen components that render them
+ * (FUT-760).
+ *
+ * A CONTEXT rather than a prop, unlike `CheckoutViewCopy`: this screen is a
+ * tree of small pieces — the status bar, the environment tabs, the connection
+ * card, the credential form, the priority list, the walkthrough — 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 mount
+ * (`PaymentProviderSettings`), which is the only place a host has to answer.
+ */
+const PaymentsSettingsCopyContext = createContext<PaymentsSettingsCopy | null>(null);
+
+export function PaymentsSettingsCopyProvider({
+  copy,
+  children,
+}: {
+  copy: PaymentsSettingsCopy;
+  children: ReactNode;
+}): JSX.Element {
+  return (
+    <PaymentsSettingsCopyContext.Provider value={copy}>
+      {children}
+    </PaymentsSettingsCopyContext.Provider>
+  );
+}
+
+/**
+ * The words this settings screen renders — THROWS outside a provider rather
+ * than falling back.
+ *
+ * A fallback could only be the origin host's Portuguese, handed silently to the
+ * next adopter's store owner. Failing at the mount is the point: it is the one
+ * moment a host can still be told it forgot.
+ */
+export function usePaymentsSettingsCopy(): PaymentsSettingsCopy {
+  const copy = useContext(PaymentsSettingsCopyContext);
+  if (!copy) {
+    throw new Error(
+      'usePaymentsSettingsCopy must be rendered inside a <PaymentsSettingsCopyProvider>',
+    );
+  }
+  return copy;
+}

package/src/components/settings-copy.ts

@@ -0,0 +1,312 @@
+/**
+ * Every sentence the payments SETTINGS surface puts in front of a store owner
+ * (FUT-760).
+ *
+ * Required, with no defaults — this package's own doctrine, stated in
+ * `checkout/view-copy.ts`: a default in the origin host's language reads as
+ * finished to the next host right up until an owner sees it.
+ *
+ * The split is the one the whole port draws. WHICH state the connection is in
+ * — authorized but unverified, verified and paused, an authorization about to
+ * expire, an environment that moves real money — is knowledge of the payments
+ * lifecycle, and it stays here. The words are the host's.
+ *
+ * ## What is NOT in here
+ *
+ * The provider's own display name. It arrives as `displayName` from the
+ * adapter and is interpolated by the functions below, because "PagBank" is
+ * PagBank's name in every language.
+ *
+ * The dates. `Autorização válida até {when}` takes an already-formatted
+ * string, since how a host formats a date is a host decision it has already
+ * made elsewhere.
+ */
+
+/** The chip and the two lines under it — where this connection stands. */
+export interface ConnectionStatusCopy {
+  /** A real charge has gone through — the strongest thing the chip can say. */
+  verified: string;
+  /** Nothing has been proven about this connection yet. */
+  unverified: string;
+  /** The credential probe passed; no charge has been made. */
+  connectionOk: string;
+  /**
+   * A connection that WAS working and stopped — the one red chip, because it
+   * is news rather than a step still to finish.
+   */
+  reconnectRequired: string;
+  /** Not connected at all. */
+  notConnected: string;
+  /** The lead line before the three steps, for a provider not yet receiving. */
+  threeStepsAhead: string;
+  /** The same, when the store must connect and verify first. */
+  connectAndVerifyFirst: string;
+  /** Live: this provider is taking money. */
+  receiving: { state: string; sub: string };
+  /** Proven, and switched off by the owner. */
+  pausedByOwner: { state: string; sub: string };
+  /** The chip above that pair. */
+  pausedChip: string;
+  /** Proven, not switched on yet. */
+  readyNotReceiving: { state: string; sub: string };
+}
+
+/**
+ * The provider LIST's badge — one word per row, and a different vocabulary
+ * from the panel's chip on purpose: the list answers "where does this store
+ * stand" and the panel answers "what is left to do".
+ */
+export interface ConnectionBadgeCopy {
+  /** Money can move through this provider right now. */
+  active: string;
+  /** Connected and proven, but not switched on. */
+  connected: string;
+  /** It was working and stopped. */
+  reconnect: string;
+  notConnected: string;
+}
+
+/** The environment tabs, and what choosing one means. */
+export interface EnvironmentCopy {
+  /** The two environments' names, as this host says them. */
+  production: string;
+  sandbox: string;
+  /** The tab group's own label (and its `aria-label`). */
+  groupLabel: string;
+  /** The line under the tabs: which environment, and what it costs. */
+  productionMeaning: string;
+  sandboxMeaning: string;
+  productionConsequence: string;
+  sandboxConsequence: string;
+  /**
+   * The store is CURRENTLY charging in the other environment — the sentence
+   * that stops an owner editing sandbox keys believing they are live.
+   */
+  storeIsUsing(environmentName: string): string;
+}
+
+/** The OAuth half: connecting by authorization rather than by pasted keys. */
+export interface OAuthConnectionCopy {
+  connectAction(displayName: string): string;
+  /** The same button once a connection exists — a re-grant, not a first one. */
+  reconnectAction: string;
+  /** Drop the connection entirely. */
+  removeAction: string;
+  /** The invitation, before anything is connected. */
+  invitation(displayName: string): string;
+  /** How long it takes and where the owner goes. */
+  roundTripNote: string;
+  /** Connected: what the authorization does and does not give us. */
+  connectedExplainer: string;
+  connectedNote(displayName: string): string;
+  connectedAt(when: string): string;
+  /** The authorization is still good, until this moment. */
+  validUntil(when: string): string;
+  /** It has already lapsed. */
+  expiredAt(when: string): string;
+  /** It lapses soon. */
+  expiresAt(when: string): string;
+  /** It lapsed or was revoked at the provider. */
+  revoked: string;
+  /**
+   * This DEPLOYMENT registered no OAuth application, so the button cannot
+   * work — the one sentence here about the installation rather than the store.
+   */
+  notAvailableHere(displayName: string): string;
+  /**
+   * The whole PANEL's refusal, for a deployment with no registered provider
+   * application at all.
+   *
+   * Not the same sentence as {@link notAvailableHere}: that one sits beside a
+   * working credential form and points at it, this one replaces the connect
+   * card because there is no button to render.
+   */
+  connectUnavailable: string;
+  /** The two links that swap between the grant and the credential form. */
+  preferOAuth: string;
+  preferCredentials: string;
+  /** What the grant lets this platform do, listed by scope. */
+  scopes: {
+    read: string;
+    create: string;
+    refund: string;
+    account: string;
+  };
+}
+
+/** The connection card, and the confirmation that removes it. */
+export interface ConnectionCardCopy {
+  accountHeading(displayName: string): string;
+  /** The fact rows' own labels, down the left of the card. */
+  accountLabel: string;
+  connectionLabel: string;
+  authorizedAt(displayName: string): string;
+  environmentLabel: string;
+  connectedAtLabel: string;
+  /**
+   * Sandbox, as this card names it — the parenthetical is here and not in
+   * `EnvironmentCopy` because the tabs label a CHOICE and this labels a fact.
+   */
+  sandboxWithNote: string;
+  /** The three steps a grant takes, for a store that has not connected yet. */
+  steps: { signIn(displayName: string): string; authorize: string; comeBack: string };
+  removeAction: string;
+  removeQuestion(displayName: string): string;
+  /**
+   * What removing costs. Two sentences, because a LIVE connection stops the
+   * store taking money the moment it goes — and that is not the same warning
+   * as "you can reconnect later".
+   */
+  removeConsequenceLive: string;
+  removeConsequenceIdle: string;
+  /**
+   * The first itemised consequence, shown only for a LIVE connection: the
+   * store stops taking money the moment this is confirmed.
+   *
+   * Its own field rather than a clause of `removeConsequenceLive`, because
+   * the list beside it is what makes the irreversible item weigh more than
+   * the reversible ones — a single paragraph is what an owner skims.
+   */
+  removeStopsChargingNow: string;
+  removeRevokes(displayName: string): string;
+  removeKeepsSettled(displayName: string): string;
+  removeRestartsSetup: string;
+  /**
+   * The way out of the removal dialog for an owner who only meant to stop
+   * 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. */
+export interface CredentialFormCopy {
+  /** A stored secret, shown masked — leaving it blank keeps it. */
+  configuredKeepBlank: string;
+  /** The suffix on an `advanced` field most stores must leave empty. */
+  advancedSuffix: string;
+  probeAction: string;
+  /**
+   * What replacing a PROVEN connection's credentials costs.
+   *
+   * Takes the provider's display name: the sentence used to name "InfiniteTag"
+   * outright, and it renders above EVERY provider's credential form — so a
+   * Stripe store was told to be careful with a field it does not have. Rendered
+   * through `richText`, so `**…**` marks the two clauses that carry the cost.
+   */
+  reverifyWarning(displayName: string): string;
+  probeRunning: string;
+  probeSaveNote: string;
+  probeIncompleteNote: string;
+  probeFailed(environmentName: string): string;
+  /** The per-credential marks beside each field. */
+  checkPass: string;
+  checkFail: string;
+  /** A credential the provider offers no way to check. */
+  uncheckable: string;
+  /**
+   * The save button's three forms. WHICH one is right is a fact this package
+   * establishes — a complete set is sent to the provider, a partial one is
+   * only written down, and a one-field provider names its field instead.
+   */
+  saveAndTest: string;
+  save: string;
+  saveOnly(fieldLabel: string): string;
+  /** Reopen a finished credential step — unaccented, so only a reading found it. */
+  changeAction: string;
+}
+
+/** Ordering the provider chain, and what a decline does at the end of it. */
+export interface ProviderPriorityCopy {
+  moveUp(label: string): string;
+  moveDown(label: string): string;
+  saveFailed: string;
+  /** The head of the chain, captioned so the order is unmistakable. */
+  firstInChain: string;
+  /** The reorderable list's own heading. */
+  orderHeading: string;
+  /**
+   * What the order MEANS, naming the provider at the head of it.
+   *
+   * Rendered through `richText`, so `**…**` marks that name — the sentence is
+   * about which provider is tried first, and the name is the answer.
+   */
+  chainExplainer(firstProviderLabel: string): string;
+  /** No provider is switched on, so nothing can be charged at all. */
+  noneActive: string;
+  /**
+   * The switch's label. Rendered through `richText`, so `**…**` emphasises the
+   * word the sentence is about — the same two-asterisk grammar the setup-guide
+   * steps use, and the only markup any copy in this package may carry.
+   */
+  retryDeclinedLabel: string;
+  retryDeclinedOn: string;
+  retryDeclinedOff: string;
+}
+
+/** Choosing which provider to set up, before there is a connection at all. */
+export interface ProviderListCopy {
+  heading: string;
+  /** What choosing one means — the setup that follows is shaped by it. */
+  subheading: string;
+}
+
+/**
+ * The last look at the value that decides who gets paid.
+ *
+ * A mistyped account handle is the one failure on this screen with no
+ * recourse: the charge succeeds, the buyer is happy, and the money is in a
+ * stranger's account. So these sentences are not decoration, and a host that
+ * softens them has removed the only intervention available.
+ */
+export interface ConfirmCredentialSaveCopy {
+  title: string;
+  /**
+   * What saving this value means, naming the field it will be saved as — the
+   * provider's own name for it, as the credential schema spells it.
+   */
+  body(fieldLabel: string): string;
+  /** What to call the field when the schema shipped no label for it. */
+  fieldFallback: string;
+  /** The irreversibility, said plainly and last. */
+  warning: string;
+  /** Cancel is the plain, first-reached option; confirm carries the verb. */
+  cancelAction: string;
+  confirmAction: string;
+}
+
+/** The walkthrough's own controls — the confirmation only an owner can give. */
+export interface SetupGuideCopy {
+  /**
+   * The fallback confirm label, for a guide whose section declares none.
+   *
+   * It names another vendor's product ("Checkout Integrado"), which is why a
+   * section that can say something truer declares `confirmLabel` itself.
+   */
+  defaultConfirmLabel: string;
+  /** How a confirmed section reads once it has collapsed. */
+  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. */
+export interface PaymentsSettingsCopy {
+  status: ConnectionStatusCopy;
+  listBadge: ConnectionBadgeCopy;
+  environment: EnvironmentCopy;
+  oauth: OAuthConnectionCopy;
+  card: ConnectionCardCopy;
+  credentials: CredentialFormCopy;
+  priority: ProviderPriorityCopy;
+  providerList: ProviderListCopy;
+  confirmSave: ConfirmCredentialSaveCopy;
+  setupGuide: SetupGuideCopy;
+}