@12-apps/payments-frontend 3.8.0 → 3.10.0

package/src/components/checkout-payment-copy.ts

@@ -0,0 +1,88 @@
+/**
+ * Every sentence the LEGACY `CheckoutPayment` step renders (FUT-760).
+ *
+ * A required prop rather than a context, unlike the factory's screens: this
+ * component is one plug-and-play step a host drops in itself, and there is no
+ * tree of pieces below it to reach. The host already passes `reference`,
+ * `amount` and `tokenizeCard` at the same call; the words go beside them.
+ *
+ * The split is the one the whole port draws. WHICH state the charge is in — a
+ * PIX code waiting to be scanned, a hosted page the buyer is about to be sent
+ * to, a store with no provider at all — is knowledge of the payments
+ * lifecycle, and it stays here. The words are the host's.
+ */
+
+/** The money line, and the locale that renders it. */
+export interface LegacyMoneyCopy {
+  /** The heading above the amount being paid. */
+  totalLabel(formattedAmount: string): string;
+  /** The button that authorizes it, on both the saved-card and hosted paths. */
+  payAction(formattedAmount: string): string;
+  /**
+   * The BCP-47 tag the amount is formatted in — `'pt-BR'` here, and hard-coded
+   * before this port. The CURRENCY is not here: it arrives on the `Money` the
+   * host passes, which is the store's own, not a translator's.
+   */
+  amountLocale: string;
+}
+
+/** The two method cards, before a charge exists. */
+export interface LegacyMethodCopy {
+  groupLabel: string;
+  pixTitle: string;
+  pixSubtitle: string;
+  cardTitle: string;
+  cardSubtitle: string;
+  /** PIX's own action — this step generates the code rather than charging. */
+  generatePixAction: string;
+  /** A REDIRECT provider offers no choice: one button, and the buyer leaves. */
+  continueToPaymentAction: string;
+}
+
+/** The PIX panel: the code, and the wait. */
+export interface LegacyPixCopy {
+  qrAlt: string;
+  /** The label on the copy-and-paste payload field. */
+  copyPasteLabel: string;
+  copyAction: string;
+  copiedAction: string;
+  awaiting: string;
+}
+
+/** The card form, and the saved cards above it. */
+export interface LegacyCardCopy {
+  /** The heading over the saved-card radios. */
+  heading: string;
+  numberLabel: string;
+  holderLabel: string;
+  /** Its parenthetical spells the ORDER — "MM/AA" in pt-BR, "MM/YY" in en. */
+  expiryLabel: string;
+  cvvLabel: string;
+  payAction: string;
+  /** The trailing radio that opens the form. */
+  newCard: string;
+  /**
+   * How a saved card reads. Takes the parts rather than a sentence, because
+   * the expiry is optional — a provider that shared none leaves it out.
+   */
+  savedCard(brand: string, last4: string, expiry?: string): string;
+}
+
+/** What this step says when it cannot take a payment at all. */
+export interface LegacyRefusalCopy {
+  /** No provider is configured — nothing the buyer can do. */
+  paymentsOff: string;
+  /** The host wired no `tokenizeCard`, so a card cannot be minted here. */
+  cardUnavailable: string;
+  /** The interstitial before a hosted provider's own page. */
+  redirectNotice: string;
+}
+
+/** Everything above, in one object a host passes at the mount. */
+export interface CheckoutPaymentCopy {
+  money: LegacyMoneyCopy;
+  method: LegacyMethodCopy;
+  pix: LegacyPixCopy;
+  card: LegacyCardCopy;
+  refusal: LegacyRefusalCopy;
+}

package/src/components/checkout-payment-pt-BR.ts

@@ -0,0 +1,50 @@
+import type { CheckoutPaymentCopy } from './checkout-payment-copy';
+
+/**
+ * The pt-BR pack for the legacy `CheckoutPayment` step — a NAMED constant a
+ * host passes by hand, never a default.
+ *
+ * The filename is what exempts this file from the copy-portability gate:
+ * Portuguese may ship, it may not be silent. Every sentence is VERBATIM what
+ * the step used to render, so a host adopting it sees no change — what changes
+ * is that the words are chosen in a diff.
+ */
+export const PT_BR_CHECKOUT_PAYMENT_COPY: CheckoutPaymentCopy = {
+  money: {
+    totalLabel: (formattedAmount) => `Total: ${formattedAmount}`,
+    payAction: (formattedAmount) => `Pagar ${formattedAmount}`,
+    amountLocale: 'pt-BR',
+  },
+  method: {
+    groupLabel: 'Forma de pagamento',
+    pixTitle: 'PIX',
+    pixSubtitle: 'Aprovação imediata',
+    cardTitle: 'Cartão',
+    cardSubtitle: 'Crédito à vista',
+    generatePixAction: 'Gerar QR Code PIX',
+    continueToPaymentAction: 'Continuar para o pagamento',
+  },
+  pix: {
+    qrAlt: 'QR Code PIX',
+    copyPasteLabel: 'PIX copia e cola',
+    copyAction: 'Copiar código',
+    copiedAction: 'Copiado!',
+    awaiting: 'Aguardando pagamento…',
+  },
+  card: {
+    heading: 'Pague com cartão',
+    numberLabel: 'Número do cartão',
+    holderLabel: 'Nome impresso no cartão',
+    expiryLabel: 'Validade (MM/AA)',
+    cvvLabel: 'CVV',
+    payAction: 'Pagar com cartão',
+    newCard: 'Novo cartão — inserir outro cartão',
+    savedCard: (brand, last4, expiry) =>
+      `${brand} •••• ${last4}${expiry ? ` — Validade ${expiry}` : ''}`,
+  },
+  refusal: {
+    paymentsOff: 'Esta loja ainda não aceita pagamentos online.',
+    cardUnavailable: 'Pagamento com cartão indisponível.',
+    redirectNotice: 'Você será direcionado para concluir o pagamento com segurança.',
+  },
+};

package/src/components/checkout-payment-types.ts

@@ -0,0 +1,25 @@
+/**
+ * The two shapes the legacy `CheckoutPayment` step and its views both name.
+ *
+ * Their own module so the views can import them without importing the
+ * container that renders the views — the circular import that would otherwise
+ * follow from splitting the file (FUT-760). Both stay exported from the
+ * package root, where they have always been.
+ */
+
+/** What the card form collects, before anything is tokenized. */
+export interface CardFormValues {
+  number: string;
+  holder: string;
+  expiry: string;
+  cvv: string;
+}
+
+/** A provider-vaulted card the buyer may reuse ("Mastercard •••• 7599"). */
+export interface SavedCardOption {
+  savedCardToken: string;
+  brand: string;
+  last4: string;
+  /** e.g. "02/2034" — shown beside the brand, worded by the host. */
+  expiry?: string;
+}

package/src/components/checkout-payment-views.tsx

@@ -0,0 +1,225 @@
+'use client';
+
+/**
+ * The legacy `CheckoutPayment` step's PRESENTATION — the PIX panel, the card
+ * form, the saved-card list and the two method cards.
+ *
+ * Split from `CheckoutPayment.tsx` when the copy port (FUT-760) pushed that
+ * file past the size gate, along the seam it already had: everything here
+ * takes props and renders, and nothing here holds a client, a charge or an
+ * effect. The container keeps those.
+ */
+
+import {
+  Box,
+  Button,
+  CircularProgress,
+  FormControlLabel,
+  Radio,
+  RadioGroup,
+  Stack,
+  TextField,
+  Typography,
+} from '@mui/material';
+import { useState } from 'react';
+
+import type { ClientChargeView, Money } from '@12-apps/payments-backend';
+
+import type { ClientPaymentsConfig } from '../client';
+
+import type {
+  CheckoutPaymentCopy,
+  LegacyCardCopy,
+  LegacyMethodCopy,
+  LegacyMoneyCopy,
+  LegacyPixCopy,
+} from './checkout-payment-copy';
+import type { CardFormValues, SavedCardOption } from './checkout-payment-types';
+
+/**
+ * The amount, in the host's locale and the store's currency.
+ *
+ * The locale is the host's say (FUT-760) — it decides the decimal mark, the
+ * grouping and where the symbol sits. The currency is not: it rides on the
+ * `Money` the host already passes, and is a fact about the charge.
+ */
+export function formatAmount(amount: Money, copy: LegacyMoneyCopy): string {
+  return (amount.amountCents / 100).toLocaleString(copy.amountLocale, {
+    style: 'currency',
+    currency: amount.currency,
+  });
+}
+
+export function PixPanel({ charge, copy }: { charge: ClientChargeView; copy: LegacyPixCopy }) {
+  const [copied, setCopied] = useState(false);
+  if (!charge.pix) return null;
+  return (
+    <Stack spacing={1} alignItems="flex-start">
+      {charge.pix.qrImageUrl ? (
+        <Box component="img" src={charge.pix.qrImageUrl} alt={copy.qrAlt} sx={{ width: 220 }} />
+      ) : null}
+      <TextField fullWidth multiline size="small" label={copy.copyPasteLabel} value={charge.pix.qrText} />
+      <Button
+        size="small"
+        onClick={() => {
+          void navigator.clipboard.writeText(charge.pix?.qrText ?? '').then(() => setCopied(true));
+        }}
+      >
+        {copied ? copy.copiedAction : copy.copyAction}
+      </Button>
+      <Stack direction="row" spacing={1} alignItems="center">
+        <CircularProgress size={16} />
+        <Typography variant="body2">{copy.awaiting}</Typography>
+      </Stack>
+    </Stack>
+  );
+}
+
+function CardPanel({
+  disabled,
+  onSubmit,
+  copy,
+}: {
+  disabled: boolean;
+  onSubmit: (values: CardFormValues) => void;
+  copy: LegacyCardCopy;
+}) {
+  const [values, setValues] = useState<CardFormValues>({ number: '', holder: '', expiry: '', cvv: '' });
+  const field = (key: keyof CardFormValues, label: string, width?: number) => (
+    <TextField
+      size="small"
+      label={label}
+      value={values[key]}
+      sx={width ? { width } : undefined}
+      onChange={(e) => setValues((v) => ({ ...v, [key]: e.target.value }))}
+    />
+  );
+  return (
+    <Stack spacing={2}>
+      {field('number', copy.numberLabel)}
+      {field('holder', copy.holderLabel)}
+      <Stack direction="row" spacing={2}>
+        {field('expiry', copy.expiryLabel, 140)}
+        {field('cvv', copy.cvvLabel, 100)}
+      </Stack>
+      <Button variant="contained" disabled={disabled} onClick={() => onSubmit(values)}>
+        {copy.payAction}
+      </Button>
+    </Stack>
+  );
+}
+
+interface CardSectionProps {
+  amount: Money;
+  savedCards: SavedCardOption[];
+  disabled: boolean;
+  onNewCard: (values: CardFormValues) => void;
+  onSavedCard: (card: SavedCardOption) => void;
+  copy: CheckoutPaymentCopy;
+}
+
+/** "Pague com cartão": saved cards as radios + "Novo cartão" fallback. */
+function CardSection({
+  amount,
+  savedCards,
+  disabled,
+  onNewCard,
+  onSavedCard,
+  copy,
+}: CardSectionProps) {
+  const [selected, setSelected] = useState(savedCards[0]?.savedCardToken ?? 'new');
+  const chosen = savedCards.find((c) => c.savedCardToken === selected);
+  if (savedCards.length === 0) {
+    return <CardPanel disabled={disabled} onSubmit={onNewCard} copy={copy.card} />;
+  }
+  return (
+    <Stack spacing={2}>
+      <Typography variant="subtitle2">{copy.card.heading}</Typography>
+      <RadioGroup value={selected} onChange={(_, v) => setSelected(v)}>
+        {savedCards.map((card) => (
+          <FormControlLabel
+            key={card.savedCardToken}
+            value={card.savedCardToken}
+            control={<Radio />}
+            label={copy.card.savedCard(card.brand, card.last4, card.expiry)}
+          />
+        ))}
+        <FormControlLabel value="new" control={<Radio />} label={copy.card.newCard} />
+      </RadioGroup>
+      {chosen ? (
+        <Button variant="contained" disabled={disabled} onClick={() => onSavedCard(chosen)}>
+          {copy.money.payAction(formatAmount(amount, copy.money))}
+        </Button>
+      ) : (
+        <CardPanel disabled={disabled} onSubmit={onNewCard} copy={copy.card} />
+      )}
+    </Stack>
+  );
+}
+
+interface MethodChooserProps {
+  config: ClientPaymentsConfig;
+  amount: Money;
+  savedCards: SavedCardOption[];
+  loading: boolean;
+  startPix: () => void;
+  startCard: (values: CardFormValues) => void;
+  startSavedCard: (card: SavedCardOption) => void;
+  copy: CheckoutPaymentCopy;
+}
+
+/** One "Forma de pagamento" option card (PIX / Cartão). */
+function MethodCard(props: { title: string; subtitle: string; selected: boolean; onClick: () => void }) {
+  return (
+    <Button
+      variant="outlined"
+      onClick={props.onClick}
+      sx={{ flex: 1, justifyContent: 'flex-start', textAlign: 'left', borderWidth: props.selected ? 2 : 1 }}
+    >
+      <Stack alignItems="flex-start">
+        <Typography variant="subtitle2">{props.title}</Typography>
+        <Typography variant="caption" color="text.secondary">
+          {props.subtitle}
+        </Typography>
+      </Stack>
+    </Button>
+  );
+}
+
+/** Pre-charge phase: "Forma de pagamento" method cards, then the flow. */
+export function MethodChooser(props: MethodChooserProps) {
+  const { config, amount, savedCards, loading, startPix, startCard, startSavedCard, copy } = props;
+  const words: LegacyMethodCopy = copy.method;
+  const [method, setMethod] = useState<'PIX' | 'CARD'>('PIX');
+  if (config.tokenization === 'REDIRECT') {
+    return (
+      <Button variant="contained" disabled={loading} onClick={startPix}>
+        {words.continueToPaymentAction}
+      </Button>
+    );
+  }
+  return (
+    <>
+      <Typography variant="subtitle2">{words.groupLabel}</Typography>
+      <Stack direction="row" spacing={2}>
+        <MethodCard title={words.pixTitle} subtitle={words.pixSubtitle} selected={method === 'PIX'} onClick={() => setMethod('PIX')} />
+        <MethodCard title={words.cardTitle} subtitle={words.cardSubtitle} selected={method === 'CARD'} onClick={() => setMethod('CARD')} />
+      </Stack>
+      {method === 'PIX' ? (
+        <Button variant="contained" disabled={loading} onClick={startPix}>
+          {words.generatePixAction}
+        </Button>
+      ) : (
+        <CardSection
+          amount={amount}
+          savedCards={savedCards}
+          disabled={loading}
+          onNewCard={startCard}
+          onSavedCard={startSavedCard}
+          copy={copy}
+        />
+      )}
+    </>
+  );
+}
+

package/src/components/connection-state.ts

@@ -1,4 +1,5 @@
 import type { MaskedProviderConfig } from '@12-apps/payments-backend';
+import type { ConnectionBadgeCopy } from './settings-copy';
 
 /**
  * Is there actually a connection here?
@@ -77,21 +78,32 @@ export function expiryProximity(
   return at - now.getTime() <= EXPIRY_WARNING_WINDOW_MS ? 'NEAR' : 'SAFE';
 }
 
-/** What a provider card reports at a glance. */
+/**
+ * What a provider card reports at a glance.
+ *
+ * The union used to spell its four labels in Portuguese — an exported TYPE
+ * carrying one product's words, which is the structural half of the same leak
+ * `CardBrand` had (FUT-760). It names the STATE now; the word is the host's.
+ */
 type ConnectionBadge =
-  | { label: 'Ativo'; color: 'success' }
-  | { label: 'Conectado'; color: 'default' }
-  | { label: 'Reconectar'; color: 'error' }
-  | { label: 'Não conectado'; color: 'warning' };
+  | { label: string; state: 'ACTIVE'; color: 'success' }
+  | { label: string; state: 'CONNECTED'; color: 'default' }
+  | { label: string; state: 'RECONNECT'; color: 'error' }
+  | { label: string; state: 'NOT_CONNECTED'; color: 'warning' };
 
 /**
  * `enabled` is deliberately checked first: it is the only state that means
  * money can move, and a store reading `Ativo` has already passed everything
  * below it.
  */
-export function connectionBadge(config: MaskedProviderConfig | null): ConnectionBadge {
-  if (config?.enabled) return { label: 'Ativo', color: 'success' };
-  if (config?.status === 'RECONNECT_REQUIRED') return { label: 'Reconectar', color: 'error' };
-  if (isConnected(config)) return { label: 'Conectado', color: 'default' };
-  return { label: 'Não conectado', color: 'warning' };
+export function connectionBadge(
+  copy: ConnectionBadgeCopy,
+  config: MaskedProviderConfig | null,
+): ConnectionBadge {
+  if (config?.enabled) return { label: copy.active, state: 'ACTIVE', color: 'success' };
+  if (config?.status === 'RECONNECT_REQUIRED') {
+    return { label: copy.reconnect, state: 'RECONNECT', color: 'error' };
+  }
+  if (isConnected(config)) return { label: copy.connected, state: 'CONNECTED', color: 'default' };
+  return { label: copy.notConnected, state: 'NOT_CONNECTED', color: 'warning' };
 }

package/src/components/credential-rules.ts

@@ -6,6 +6,7 @@ import type {
 } from '@12-apps/payments-backend';
 
 import type { PendingSave } from './ConfirmCredentialSave';
+import type { CredentialFormCopy } from './settings-copy';
 
 /**
  * The DECISIONS the credential form makes, with no JSX anywhere near them.
@@ -91,11 +92,15 @@ export function fieldsWellFormed(
  * is the more useful of the two truths. Naming one of Stripe's four would be a
  * lie about what the button writes, which is why only the fallback changes.
  */
-export function saveLabel(descriptor: ProviderDescriptor, complete: boolean): string {
+export function saveLabel(
+  copy: CredentialFormCopy,
+  descriptor: ProviderDescriptor,
+  complete: boolean,
+): string {
   const required = descriptor.credentialSchema.filter((field) => field.required);
   const only = required.length === 1 ? required[0] : undefined;
-  if (!only) return complete ? 'Salvar e testar conexão' : 'Salvar';
-  return `Salvar ${only.label.replace(/\s*\([^)]*\)\s*$/, '')}`;
+  if (!only) return complete ? copy.saveAndTest : copy.save;
+  return copy.saveOnly(only.label.replace(/\s*\([^)]*\)\s*$/, ''));
 }
 
 /**

package/src/components/platform/ConnectApplicationPanel.tsx

@@ -24,6 +24,10 @@ import { CARD_SX, ConnectEnvironmentCard } from './ConnectEnvironmentCard';
  * (`consultConnectApplications` in `@12-apps/payments-backend`) and passes it
  * 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.
  */
 export interface ConnectApplicationPanelProps {
   /** The consult report, as the backend's `consultConnectApplications` answers. */
@@ -44,7 +48,7 @@ export function ConnectApplicationPanel(props: ConnectApplicationPanelProps): Re
     <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 desta instalação (o valor que precisa estar registrado)
+          Callback this deployment uses (the value that must be registered)
         </Typography>
         <Box
           component="code"
@@ -68,7 +72,7 @@ export function ConnectApplicationPanel(props: ConnectApplicationPanelProps): Re
             onClick={() => onRefresh()}
             data-testid="connect-refresh"
           >
-            Consultar novamente
+            Consult again
           </Button>
         </Box>
       ) : null}

package/src/components/platform/ConnectEnvironmentCard.tsx

@@ -7,15 +7,18 @@ import type { ConnectApplicationStatus, PaymentEnvironment } from '@12-apps/paym
 
 /**
  * One environment's Connect application (FUT-479, packaged by FUT-573).
- * Sandbox and produção are SEPARATE applications with separate id/secret
+ * Sandbox and production are SEPARATE applications with separate id/secret
  * pairs, so each card stands on its own: configured or not, what PagBank says
  * is registered, and whether the registered redirect URI matches the
  * deployment's callback.
+ *
+ * English, like the rest of this platform surface (FUT-760) — see
+ * `ConnectApplicationPanel` for why.
  */
 
 const ENV_LABEL: Record<PaymentEnvironment, string> = {
   SANDBOX: 'Sandbox',
-  PRODUCTION: 'Produção',
+  PRODUCTION: 'Production',
 };
 
 /** The bordered-card look every block of these screens shares. */
@@ -47,22 +50,23 @@ function MismatchAlert({ status }: { status: ConnectApplicationStatus }): ReactN
   if (status.redirectUriMismatch === true) {
     return (
       <Alert severity="error" data-testid={`connect-mismatch-${status.environment}`}>
-        A redirect_uri registrada no PagBank é diferente do callback desta instalação. O fluxo
-        de autorização OAuth falha silenciosamente até o cadastro ser corrigido no PagBank.
+        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.
       </Alert>
     );
   }
   if (status.redirectUriMismatch === false) {
     return (
       <Alert severity="success" data-testid={`connect-match-${status.environment}`}>
-        A redirect_uri registrada confere com o callback desta instalação.
+        The registered redirect_uri matches the callback this deployment uses.
       </Alert>
     );
   }
   return (
     <Alert severity="warning" data-testid={`connect-unknown-${status.environment}`}>
-      A resposta do PagBank não informou a redirect_uri — não foi possível comparar com o
-      callback desta instalação.
+      The PagBank response carried no redirect_uri, so it could not be compared with the
+      callback this deployment uses.
     </Alert>
   );
 }
@@ -75,16 +79,16 @@ function ApplicationFields({ status }: { status: ConnectApplicationStatus }): Re
   return (
     <Stack spacing={1.5}>
       <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2.5 }}>
-        <Field label="Nome (exibido ao lojista)">{app.name ?? '—'}</Field>
+        <Field label="Name (shown to the merchant)">{app.name ?? '—'}</Field>
         <Field label="Site">{app.site ?? '—'}</Field>
-        <Field label="Descrição">{app.description ?? '—'}</Field>
+        <Field label="Description">{app.description ?? '—'}</Field>
         <Field label="Logo">{app.logo ?? '—'}</Field>
-        <Field label="redirect_uri registrada">{app.redirectUri ?? 'não informada'}</Field>
+        <Field label="Registered redirect_uri">{app.redirectUri ?? 'not reported'}</Field>
       </Box>
       {extraKeys.length > 0 ? (
         <Box data-testid={`connect-extra-${status.environment}`}>
           <Typography variant="caption" color="text.secondary" fontWeight={600}>
-            Outros campos retornados (schema não documentado)
+            Other fields returned (undocumented schema)
           </Typography>
           <Box component="pre" sx={{ m: 0, fontSize: 12, overflowX: 'auto' }}>
             {JSON.stringify(app.extra, null, 2)}
@@ -117,13 +121,13 @@ function ConfigHelp({
         onClick={() => setOpen((value) => !value)}
         data-testid={`connect-config-toggle-${environment}`}
       >
-        {open ? 'Ocultar variáveis de ambiente' : 'Ver variáveis de ambiente'}
+        {open ? 'Hide environment variables' : 'Show environment variables'}
       </Button>
       {open ? (
         <Box data-testid={`connect-config-details-${environment}`}>
           <Typography variant="caption" color="text.secondary" component="p">
-            A aplicação deste ambiente é resolvida estritamente por estas variáveis (sem
-            fallback entre ambientes):
+            This environment's application is resolved strictly from these variables, with no
+            fallback between environments:
           </Typography>
           <Box component="ul" sx={{ m: 0, pl: 2.5 }}>
             {configVars.map((name) => (
@@ -159,7 +163,7 @@ export function ConnectEnvironmentCard({
       </Box>
       {!status.configured ? (
         <Typography variant="body2" color="text.secondary">
-          Nenhuma aplicação configurada neste ambiente.
+          No application configured in this environment.
         </Typography>
       ) : null}
       {status.error !== null ? (

package/src/components/platform/HomologacaoGuideCard.tsx

@@ -11,6 +11,16 @@ import { CARD_SX } from './ConnectEnvironmentCard';
  * The paste-ready homologação answers (FUT-483, packaged by FUT-573) — the
  * Pipefy form with every deployment-specific value already computed, and the
  * services list naming BOTH Order and Connect.
+ *
+ * ## Why this screen is English and its field labels are not (FUT-760)
+ *
+ * The reader is the PLATFORM's own integrator — the person registering a
+ * Connect application and chasing a `403 ACCESS_DENIED` — so the prose here
+ * follows the same rule as every other developer-facing sentence in this
+ * repo. The field names beside each value are quotes of PagBank's Pipefy
+ * form, and they arrive on `guide.fieldLabels` rather than being written
+ * here: this card is USED by matching each block to the box it goes in, and a
+ * translated box name has nothing to match.
  */
 
 /** One paste-ready value, in a copyable code block. */
@@ -42,42 +52,36 @@ export function HomologacaoGuideCard({ guide }: { guide: HomologacaoGuide }): Re
   return (
     <Stack spacing={1.5} data-testid="homologacao-guide-card" sx={CARD_SX}>
       <Typography variant="body2" fontWeight={600}>
-        Formulário de homologação — respostas prontas
+        Homologation form — answers ready to paste
       </Typography>
       <Typography variant="body2" color="text.secondary" component="p">
-        Abra o{' '}
+        Open the{' '}
         <Link
           href={guide.formUrl}
           target="_blank"
           rel="noreferrer"
           data-testid="homologacao-form-link"
         >
-          formulário oficial de homologação
+          official homologation form
         </Link>{' '}
-        e preencha com os valores abaixo. Em paralelo, abra um chamado no{' '}
+        and fill it in with the values below. In parallel, open a ticket with{' '}
         <Link href={guide.supportFormUrl} target="_blank" rel="noreferrer">
-          SIP — Suporte Integração PagBank
+          SIP — PagBank integration support
         </Link>{' '}
-        citando o 403 ACCESS_DENIED — o que responder primeiro resolve a dúvida de o
-        formulário cobrir ou não o Connect. Documentação:{' '}
+        quoting the 403 ACCESS_DENIED: whichever answers first settles whether the form
+        covers Connect. Documentation:{' '}
         <Link href={guide.docsUrl} target="_blank" rel="noreferrer">
-          solicitar homologação
+          requesting homologation
         </Link>
         .
       </Typography>
-      <Answer label="Selecione o tipo de integração">{guide.integrationType}</Answer>
+      <Answer label={guide.fieldLabels.integrationType}>{guide.integrationType}</Answer>
       <Box data-testid="homologacao-services">
-        <Answer label="Selecione qual serviço você integrou (marque OS DOIS)">
-          {guide.services.join('\n')}
-        </Answer>
+        <Answer label={guide.fieldLabels.services}>{guide.services.join('\n')}</Answer>
       </Box>
-      <Answer label="Instruções de acesso ao seu ambiente (limite de 255 caracteres)">
-        {guide.accessInstructions}
-      </Answer>
-      <Answer label="URL do site">{guide.siteUrl}</Answer>
-      <Answer label="Detalhe quais produtos/serviços serão comercializados">
-        {guide.productsDescription}
-      </Answer>
+      <Answer label={guide.fieldLabels.accessInstructions}>{guide.accessInstructions}</Answer>
+      <Answer label={guide.fieldLabels.siteUrl}>{guide.siteUrl}</Answer>
+      <Answer label={guide.fieldLabels.productsDescription}>{guide.productsDescription}</Answer>
       <Typography variant="caption" color="text.secondary" component="p">
         {guide.slaText}
       </Typography>