@12-apps/payments-frontend 3.12.0 → 3.14.0

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@12-apps/payments-frontend",
-  "version": "3.12.0",
+  "version": "3.14.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": {
-    ".": "./src/index.ts"
+    ".": "./src/index.ts",
+    "./locales": "./src/locales.ts"
   },
   "scripts": {
     "clean": "rm -rf node_modules coverage storybook-static",
@@ -17,7 +18,7 @@
     "storybook:build": "storybook build"
   },
   "dependencies": {
-    "@12-apps/payments-backend": "^4.18.0",
+    "@12-apps/payments-backend": "^4.19.0",
     "react-qr-code": "^2.2.0"
   },
   "peerDependencies": {

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

@@ -0,0 +1,61 @@
+import type { CardCopy } from './copy';
+
+/**
+ * The en-US pack for the card form — a NAMED constant a host passes by hand,
+ * never a default.
+ *
+ * `MM/AA` becomes `MM/YY` and `CVV` stays `CVV`, and the difference between
+ * those two is the rule: the expiry mask is what the buyer TYPES, so it follows
+ * their own notation, while CVV is what is PRINTED on the card and is the same
+ * three letters in either language. `CPF` stays too — it is Brazil's taxpayer
+ * number, and there is nothing else to call the field a Brazilian buyer is
+ * filling in.
+ */
+export const EN_US_CARD_COPY: CardCopy = {
+  fields: {
+    unknownBrand: 'Card',
+    numberLabel: 'Card number',
+    numberRequired: 'Enter the card number.',
+    numberIncomplete: 'That card number is incomplete.',
+    numberInvalid: 'That card number is not valid.',
+    holderLabel: 'Name printed on the card',
+    holderRequired: 'Enter the name printed on the card.',
+    expiryLabel: 'Expiry (MM/YY)',
+    expiryPlaceholder: 'MM/YY',
+    cvvLabel: 'CVV',
+    expiryIncomplete: 'The expiry is incomplete (MM/YY).',
+    monthInvalid: 'That month is not valid.',
+    expired: 'That card has expired.',
+    expiryInvalid: 'That expiry is not valid, or has passed.',
+    cvvRequired: 'Enter the CVV.',
+    cvvInvalid: 'That CVV is not valid.',
+    // The length differs by brand (3 for most, 4 for Amex), so it is
+    // interpolated rather than written out.
+    cvvDigits: (length) => `The CVV must be ${length} digits.`,
+    cpfRequired: 'CPF is required.',
+    cpfInvalid: 'That CPF is not valid.',
+    savedCardsLabel: 'Card',
+    savedCardExpiry: (month, year) => `Expires ${month}/${year}`,
+    newCard: 'New card',
+    newCardDescription: 'Enter another card',
+    saveCard: 'Save this card for next time',
+  },
+  tokenize: {
+    sdkUnavailable: 'Could not load the payment method. Reload the page.',
+    cardNotProcessed: 'Could not process the card. Check the details and try again.',
+    providerUnreachable: 'Could not reach the card provider. Check your connection.',
+    providerTimedOut: 'The card provider did not answer in time.',
+    // The status and the raw response ride along because this is what a store
+    // owner forwards to support; a tidier sentence would drop the only part
+    // that identifies the failure.
+    providerRefused: (status, response) =>
+      `The card provider refused the card details (HTTP ${status}). ` + `Response: ${response}`,
+    noPublicKey:
+      'The card public key is not available for this store. ' +
+      'Reconnect the provider and try again.',
+    // Ends with what the BUYER can do, in order of how likely each is to work:
+    // this is the one message here a shopper reads mid-purchase.
+    cardUnavailable:
+      'Card payment is unavailable in this store right now. Reload the page and try again, choose another payment method, or arrange it with the store directly.',
+  },
+};

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/index.ts

@@ -42,3 +42,4 @@ export {
 export { NEW_CARD, type CardDetails, type CardFieldErrors, type CardToken, type SavedCard } from "./types";
 export type { CardCopy, CardFieldCopy, CardTokenizeCopy } from "./copy";
 export { PT_BR_CARD_COPY } from "./pt-BR";
+export { EN_US_CARD_COPY } from "./en-US";

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

@@ -0,0 +1,95 @@
+import { EN_US_CARD_COPY } from "../../card/en-US";
+import { EN_US_CHECKOUT_SCREENS_COPY } from "./screens-en-US";
+import type { CheckoutCopy } from "./copy-context";
+import type { CheckoutViewCopy, PaymentStatusCopy } from "./view-copy";
+
+/**
+ * The en-US packs for the checkout views — NAMED exports a host passes by hand,
+ * never defaults.
+ *
+ * Four of these sentences carry a promise rather than a description, and the
+ * translation keeps each one FIRST in its block, because the fear on this
+ * screen is having been charged for an order that failed:
+ *
+ *  - `failed.support` and `expired.support` both open by saying nothing was
+ *    charged;
+ *  - `awaitingTimedOut.support` says "do not pay again" before anything else it
+ *    has to say, because a second payment is the expensive mistake here;
+ *  - `dados.secureNotice` is the one reassurance on the details step.
+ */
+export const EN_US_PAYMENT_STATUS_COPY: PaymentStatusCopy = {
+  paid: {
+    heading: "Order confirmed",
+    support: "We have your payment and the order is recorded.",
+  },
+  awaiting: {
+    heading: "Confirming your payment",
+    support: "This usually takes a few seconds. You can leave this screen open.",
+  },
+  failed: {
+    heading: "Payment not completed",
+    support: "Nothing was charged. You can try again.",
+  },
+  expired: {
+    heading: "The code expired",
+    support: "Nothing was charged. Generate a new code to carry on.",
+  },
+  awaitingTimedOut: {
+    heading: "We have not had the confirmation yet",
+    support:
+      "If you have already paid, the order is confirmed as soon as the provider tells us — " +
+      "do not pay again. You can close this screen.",
+  },
+  retryAction: "Try again",
+  regenerateAction: "Generate a new code",
+  backAction: "Back to the menu",
+  amountLabel: "Amount paid",
+  referenceLabel: "Order",
+  receiptEmailLabel: "Receipt sent to",
+};
+
+/**
+ * The words the checkout's deeper screens read from context — the card form,
+ * its tokenizers, and the buyer-details step's own fields.
+ */
+export const EN_US_CHECKOUT_COPY: CheckoutCopy = {
+  card: EN_US_CARD_COPY,
+  screens: EN_US_CHECKOUT_SCREENS_COPY,
+  buyer: {
+    emailInvalid: "That e-mail address is not valid.",
+    emailRequired: "E-mail is required.",
+    nameRequired: "Name is required.",
+    phoneRequired: "Phone is required.",
+    // The list of REQUIRED field names is the host's configuration, so the
+    // sentence is built around it — and it inflects on how many there are,
+    // which is why this is a function rather than a template.
+    fieldsHint: (names) =>
+      names.length === 0
+        ? "Name, e-mail and phone are optional — they are only used for the receipt."
+        : `Enter your ${names.join(", ")} (${names.length === 1 ? "required" : "required"} ` +
+          "for payment). The other fields are optional — they are only used for the receipt.",
+  },
+};
+
+export const EN_US_CHECKOUT_VIEW_COPY: CheckoutViewCopy = {
+  screens: EN_US_CHECKOUT_COPY,
+  // The step KEYS are the package's own ids; only the labels are words.
+  steps: {
+    dados: "Details",
+    payment: "Payment",
+    status: "Confirmation",
+  },
+  dados: {
+    saveProfile: "Save my details for next time",
+    cannotContinueTitle: "Could not continue",
+    continueAction: "Continue",
+    secureNotice: "Secure payment",
+    keepShopping: "Keep shopping",
+    back: "Back",
+  },
+  emptyCart: {
+    title: "Your cart is empty.",
+    action: "See the menu",
+  },
+  status: EN_US_PAYMENT_STATUS_COPY,
+};

package/src/components/checkout/screens-en-US.ts

@@ -0,0 +1,113 @@
+import type { CheckoutScreensCopy } from './screens-copy';
+
+/**
+ * The en-US pack for the buyer's checkout screens — a NAMED constant a host
+ * passes by hand, never a default.
+ *
+ * Two entries here are LOCALE TAGS rather than words, and they move with the
+ * pack because they decide how the same screen renders a time and a wallet
+ * button: `pix.expiryLocale` formats the "valid until" clock, and
+ * `wallet.googlePay.buttonLocale` is the language Google's own button renders
+ * itself in. A pack whose sentences were English and whose clock was
+ * Portuguese would be a screen written for nobody.
+ *
+ * PIX, CPF, Apple Pay and Google Pay all keep their names: the first two are
+ * Brazilian schemes the buyer will look for by name in their banking app, and
+ * the last two are the vendors' own product names, rendered by the vendors'
+ * own buttons.
+ */
+export const EN_US_CHECKOUT_SCREENS_COPY: CheckoutScreensCopy = {
+  method: {
+    groupLabel: 'Payment method',
+    pixLabel: 'PIX',
+    cardLabel: 'Card',
+    pixDescription: 'Approved instantly',
+    cardDescription: 'Credit, paid in full',
+    unavailableHere: 'Unavailable in this store',
+  },
+  settling: {
+    cannotConfirm: 'Could not confirm the payment',
+    takingLonger: 'The payment is taking longer than expected',
+    // "do not make another payment" is the load-bearing half: a second payment
+    // is the expensive mistake on this screen.
+    takingLongerHelp:
+      'You can wait, or check your order again shortly — do not make another payment.',
+    processing: 'Processing payment…',
+    confirming: 'We are confirming your payment',
+    cannotPay: 'Could not pay',
+  },
+  pix: {
+    heading: 'Pay with PIX',
+    instructions: (totalLabel) =>
+      `Scan the QR code in your banking app, or copy the code. Total ${totalLabel}.`,
+    qrAlt: 'PIX QR code for payment',
+    copyAction: 'Copy',
+    copiedAction: 'Copied!',
+    validUntil: (time) => `Valid until ${time}. Confirmation is automatic.`,
+    expiryLocale: 'en-US',
+    awaiting: 'Waiting for payment…',
+    chargeMissing: 'Could not generate the PIX code.',
+  },
+  card: {
+    heading: 'Pay by card',
+  },
+  payer: {
+    taxId: (formatted) => `CPF ${formatted}`,
+    taxIdAlreadyKnown: 'CPF already on file',
+    payingAs: (name) => `Paying as ${name}`,
+    payingWithSavedDetails: 'Paying with your saved details',
+    changeAction: 'Change',
+  },
+  error: {
+    confirming: 'We are confirming your payment',
+    cannotContinue: 'Could not continue',
+    retryAction: 'Try again',
+    emailLabel: 'E-mail for the payment',
+    // Lower-case and fragmentary: it renders as a hint under the field.
+    emailMustDifferHint: "use an e-mail address different from the store's",
+    useEmailAction: 'Use this e-mail and continue',
+  },
+  wallet: {
+    applePay: {
+      orderTotal: 'Order total',
+      cannotStart: 'Could not start Apple Pay in this store. Pay by card instead.',
+      cannotComplete: 'Could not start Apple Pay. Try again, or pay by card.',
+      payAction: 'Pay with Apple Pay',
+    },
+    googlePay: {
+      cannotComplete: 'Could not complete the payment with Google Pay. Try again, or pay by card.',
+      // Google's button renders itself in this language; it takes a bare
+      // language subtag, not a full BCP-47 tag.
+      buttonLocale: 'en',
+    },
+    orPayWithCard: 'or pay by card',
+  },
+  hosted: {
+    // Five fragments the screen composes into one sentence, so each keeps its
+    // leading preposition and none reads as a sentence on its own.
+    destinationNamed: (displayName) => `to ${displayName}'s payment page`,
+    destinationGeneric: "to the provider's secure payment page",
+    methodsChoice: (methods) => `, where you choose to pay with ${methods}`,
+    pixAndCard: 'PIX or card',
+    pixOnly: 'PIX',
+    cardOnly: 'card',
+    handoff: (destination, choice) => `You will be taken ${destination}${choice}.`,
+    afterwards:
+      'Once the payment goes through, you come back here and we confirm the order.',
+    startAction: 'Continue to payment',
+    preparing: 'Preparing the payment',
+  },
+  transport: {
+    failed: 'Could not complete the operation. Try again.',
+    invalidResponse: 'Invalid response from the server.',
+    offline: 'Could not connect. Check your connection and try again.',
+  },
+  validation: {
+    taxIdInvalid: 'That CPF is not valid.',
+    nameRequired: 'Enter your name.',
+    emailInvalid: 'That e-mail address is not valid.',
+    phoneInvalid: 'That phone number is not valid.',
+    required: 'This field is required.',
+  },
+  generatingPayment: 'Generating payment…',
+};

package/src/components/checkout-payment-en-US.ts

@@ -0,0 +1,53 @@
+import type { CheckoutPaymentCopy } from './checkout-payment-copy';
+
+/**
+ * The en-US pack for the legacy `CheckoutPayment` step — a NAMED constant a
+ * host passes by hand, never a default.
+ *
+ * `money.amountLocale` is part of the pack and moves with it: it is what the
+ * step formats the total with, so the words around a price and the price
+ * itself are written for the same reader. It does NOT change the CURRENCY —
+ * an English-reading buyer of a Brazilian store still pays in BRL.
+ *
+ * PIX keeps its name. It is Brazil's instant-payment scheme, and the buyer will
+ * look for those three letters in their banking app.
+ */
+export const EN_US_CHECKOUT_PAYMENT_COPY: CheckoutPaymentCopy = {
+  money: {
+    totalLabel: (formattedAmount) => `Total: ${formattedAmount}`,
+    payAction: (formattedAmount) => `Pay ${formattedAmount}`,
+    amountLocale: 'en-US',
+  },
+  method: {
+    groupLabel: 'Payment method',
+    pixTitle: 'PIX',
+    pixSubtitle: 'Approved instantly',
+    cardTitle: 'Card',
+    cardSubtitle: 'Credit, paid in full',
+    generatePixAction: 'Generate a PIX QR code',
+    continueToPaymentAction: 'Continue to payment',
+  },
+  pix: {
+    qrAlt: 'PIX QR code',
+    copyPasteLabel: 'PIX copy-and-paste code',
+    copyAction: 'Copy the code',
+    copiedAction: 'Copied!',
+    awaiting: 'Waiting for payment…',
+  },
+  card: {
+    heading: 'Pay by card',
+    numberLabel: 'Card number',
+    holderLabel: 'Name printed on the card',
+    expiryLabel: 'Expiry (MM/YY)',
+    cvvLabel: 'CVV',
+    payAction: 'Pay by card',
+    newCard: 'New card — enter another card',
+    savedCard: (brand, last4, expiry) =>
+      `${brand} •••• ${last4}${expiry ? ` — expires ${expiry}` : ''}`,
+  },
+  refusal: {
+    paymentsOff: 'This store does not accept online payments yet.',
+    cardUnavailable: 'Card payment is unavailable.',
+    redirectNotice: 'You will be taken somewhere secure to finish the payment.',
+  },
+};

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">