@12-apps/payments-frontend 3.9.0 → 3.11.0

package/src/components/ProviderConnection.tsx

@@ -22,6 +22,8 @@ import type { PaymentsSettingsClient } from '../client';
 import { ConnectionFacts, ConnectSteps, DisconnectDialog } from './ConnectionCard';
 import { expiryProximity, isConnected } from './connection-state';
 import { BAR_MSG_SX, BAR_SX, BTN_PRIMARY_SX, BTN_QUIET_DANGER_SX, T } from './panel-tokens';
+import type { OAuthConnectionCopy } from './settings-copy';
+import { usePaymentsSettingsCopy } from './settings-copy-context';
 
 /**
  * The `authMode: 'oauth'` half of the settings page: a provider whose
@@ -56,12 +58,13 @@ export interface ProviderConnectionProps {
  * gray line read the same on the eve of an outage as a year out.
  */
 function ExpiryNote(props: { expiresAt: string }) {
+  const copy = usePaymentsSettingsCopy().oauth;
   const when = new Date(props.expiresAt).toLocaleString('pt-BR');
   const proximity = expiryProximity(props.expiresAt);
   if (proximity === 'SAFE' || proximity === null) {
     return (
       <Typography variant="caption" color="text.secondary">
-        {`Autorização válida até ${when}`}
+        {copy.validUntil(when)}
       </Typography>
     );
   }
@@ -73,8 +76,8 @@ function ExpiryNote(props: { expiresAt: string }) {
       data-testid="payments-expiry-warning"
     >
       {proximity === 'PAST'
-        ? `A autorização expirou em ${when}. Reconecte para voltar a receber pagamentos.`
-        : `A autorização expira em ${when}. Se o aviso continuar, reconecte a conta.`}
+        ? copy.expiredAt(when)
+        : copy.expiresAt(when)}
     </Typography>
   );
 }
@@ -96,23 +99,19 @@ function ExpiryNote(props: { expiresAt: string }) {
  * up confidently misdescribing an outage.
  */
 function connectFailure(
+  copy: OAuthConnectionCopy,
   message: string,
   displayName: string,
 ): { severity: 'error' | 'warning'; text: string } {
   if (/no platform oauth application credentials/i.test(message)) {
-    return {
-      severity: 'warning',
-      text:
-        `A conexão automática com ${displayName} não está disponível nesta instalação — ` +
-        'o aplicativo de autorização não foi cadastrado. Para conectar agora, abra ' +
-        '“Prefiro informar as credenciais manualmente” abaixo e cole as suas próprias chaves.',
-    };
+    return { severity: 'warning', text: copy.notAvailableHere(displayName) };
   }
   return { severity: 'error', text: message };
 }
 
 function ConnectError({ message, displayName }: { message: string; displayName: string }) {
-  const { severity, text } = connectFailure(message, displayName);
+  const copy = usePaymentsSettingsCopy().oauth;
+  const { severity, text } = connectFailure(copy, message, displayName);
   return (
     <Alert severity={severity} data-testid="payments-connect-failure">
       {text}
@@ -120,21 +119,28 @@ function ConnectError({ message, displayName }: { message: string; displayName:
   );
 }
 
-function connectLabel(displayName: string, connected: boolean, busy: string | null) {
+function connectLabel(
+  copy: OAuthConnectionCopy,
+  displayName: string,
+  connected: boolean,
+  busy: string | null,
+) {
   if (busy === 'connect') return <CircularProgress size={18} />;
-  return connected ? 'Reconectar' : `Conectar com ${displayName}`;
+  return connected ? copy.reconnectAction : copy.connectAction(displayName);
 }
 
 /**
  * pt-BR labels for the scopes a store owner actually sees. Unknown scopes fall
  * back to the provider's own spelling — wrong words are worse than raw ones.
  */
-const SCOPE_LABELS: Record<string, string> = {
-  'payments.read': 'Consultar pagamentos',
-  'payments.create': 'Criar cobranças',
-  'payments.refund': 'Estornar pagamentos',
-  'accounts.read': 'Consultar dados da conta',
-};
+function scopeLabels(copy: OAuthConnectionCopy): Record<string, string> {
+  return {
+    'payments.read': copy.scopes.read,
+    'payments.create': copy.scopes.create,
+    'payments.refund': copy.scopes.refund,
+    'accounts.read': copy.scopes.account,
+  };
+}
 
 /**
  * WHICH account is connected (FUT-300): identity, granted scopes and the
@@ -143,6 +149,7 @@ const SCOPE_LABELS: Record<string, string> = {
  * charges into was to disconnect and connect again.
  */
 function ConnectedAccountDetails(props: { account: ConnectedOAuthAccount }) {
+  const copy = usePaymentsSettingsCopy().oauth;
   const { account } = props;
   const identity = account.accountLabel ?? account.accountId;
   return (
@@ -154,7 +161,7 @@ function ConnectedAccountDetails(props: { account: ConnectedOAuthAccount }) {
       ) : null}
       {account.connectedAt ? (
         <Typography variant="caption" color="text.secondary">
-          {`Conectada em ${new Date(account.connectedAt).toLocaleString('pt-BR')}`}
+          {copy.connectedAt(new Date(account.connectedAt).toLocaleString())}
         </Typography>
       ) : null}
       {account.grantedScopes.length > 0 ? (
@@ -164,7 +171,7 @@ function ConnectedAccountDetails(props: { account: ConnectedOAuthAccount }) {
               key={scope}
               size="small"
               variant="outlined"
-              label={SCOPE_LABELS[scope] ?? scope}
+              label={scopeLabels(copy)[scope] ?? scope}
             />
           ))}
         </Stack>
@@ -184,6 +191,7 @@ function ConnectionSummary(props: {
   environment: PaymentEnvironment;
   connectedAccount: ConnectedOAuthAccount | null;
 }) {
+  const copy = usePaymentsSettingsCopy().oauth;
   return (
     <>
       {/*
@@ -215,8 +223,8 @@ function ConnectionSummary(props: {
       */}
       <Typography sx={{ fontSize: '13px', color: T.ink2, lineHeight: 1.6 }}>
         {props.connected
-          ? 'Sua conta está conectada. As cobranças são criadas em seu nome — nenhuma chave precisa ser copiada.'
-          : `Conecte sua conta ${props.displayName} autorizando o acesso no site do provedor. Nenhuma chave precisa ser copiada.`}
+          ? copy.connectedExplainer
+          : copy.invitation(props.displayName)}
       </Typography>
       {props.connected ? null : <ConnectSteps displayName={props.displayName} />}
       {props.connected && props.connectedAccount ? (
@@ -224,7 +232,7 @@ function ConnectionSummary(props: {
       ) : null}
       {props.status === 'RECONNECT_REQUIRED' ? (
         <Alert severity="warning">
-          A autorização expirou ou foi revogada. Reconecte para voltar a receber pagamentos.
+          {copy.revoked}
         </Alert>
       ) : null}
       {props.expiresAt ? <ExpiryNote expiresAt={props.expiresAt} /> : null}
@@ -249,13 +257,14 @@ function ConnectionActions(props: {
   onConnect: () => void;
   onDisconnect: () => void;
 }) {
+  const copy = usePaymentsSettingsCopy().oauth;
   const { displayName, connected, busy, onConnect, onDisconnect } = props;
   return (
     <Box sx={BAR_SX} data-testid="payments-connection-bar">
       <Typography sx={BAR_MSG_SX}>
         {connected
-          ? `Conta ${displayName} conectada. Revogue quando quiser, aqui ou no painel do provedor.`
-          : 'Você sai para o provedor e volta para cá — leva menos de um minuto.'}
+          ? copy.connectedNote(displayName)
+          : copy.roundTripNote}
       </Typography>
       {connected ? (
         <Button
@@ -264,7 +273,7 @@ function ConnectionActions(props: {
           sx={BTN_QUIET_DANGER_SX}
           data-testid="payments-disconnect"
         >
-          {busy === 'disconnect' ? <CircularProgress size={18} /> : 'Remover conexão'}
+          {busy === 'disconnect' ? <CircularProgress size={18} /> : copy.removeAction}
         </Button>
       ) : null}
       <Button
@@ -274,7 +283,7 @@ function ConnectionActions(props: {
         onClick={onConnect}
         sx={BTN_PRIMARY_SX}
       >
-        {connectLabel(displayName, connected, busy)}
+        {connectLabel(copy, displayName, connected, busy)}
       </Button>
     </Box>
   );

package/src/components/ProviderList.tsx

@@ -7,6 +7,7 @@ import type { MaskedProviderConfig, MerchantSettingsView, ProviderDescriptor } f
 import type { PaymentsSettingsClient } from '../client';
 import { connectionBadge } from './connection-state';
 import { ProviderPriorityList, chainOf } from './ProviderPriorityList';
+import { usePaymentsSettingsCopy } from './settings-copy-context';
 
 /**
  * Provider picker — one card per provider, click to open it.
@@ -26,6 +27,7 @@ function ProviderPicker({
   activeName: string | null;
   onSelect: (name: string) => void;
 }) {
+  const copy = usePaymentsSettingsCopy().listBadge;
   return (
     <Box
       data-testid="payments-provider-picker"
@@ -38,7 +40,7 @@ function ProviderPicker({
     >
       {providers.map((provider) => {
         const config = configs.find((c) => c.provider === provider.name) ?? null;
-        const badge = connectionBadge(config);
+        const badge = connectionBadge(copy, config);
         const selected = provider.name === activeName;
         return (
           <Box
@@ -93,6 +95,7 @@ export function ProviderList({
   reload: () => Promise<void>;
   onSelect: (name: string) => void;
 }) {
+  const copy = usePaymentsSettingsCopy().providerList;
   return (
     <Box data-testid="payments-provider-settings">
       {/*
@@ -111,9 +114,9 @@ export function ProviderList({
           />
         </Box>
       ) : null}
-      <Typography variant="subtitle1">Escolha o provedor de pagamento</Typography>
+      <Typography variant="subtitle1">{copy.heading}</Typography>
       <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
-        Selecione onde sua loja recebe — a configuração é feita sob medida para ele.
+        {copy.subheading}
       </Typography>
       <ProviderPicker
         providers={view.providers}

package/src/components/ProviderPriorityList.tsx

@@ -15,6 +15,8 @@ import { useCallback, useState } from 'react';
 import type { MerchantSettingsView, ProviderDescriptor } from '@12-apps/payments-backend';
 
 import type { PaymentsSettingsClient } from '../client';
+import { usePaymentsSettingsCopy } from './settings-copy-context';
+import { richText } from './rich-text';
 
 /**
  * The store's failover chain, ordered.
@@ -92,6 +94,7 @@ function PriorityRow({
   onDragEnd,
   onMove,
 }: PriorityRowProps) {
+  const copy = usePaymentsSettingsCopy().priority;
   return (
     <Paper
       component="li"
@@ -120,12 +123,12 @@ function PriorityRow({
       <Typography sx={{ flexGrow: 1 }}>{label}</Typography>
       {index === 0 ? (
         <Typography variant="caption" color="primary" data-testid="payments-priority-first">
-          primeiro
+          {copy.firstInChain}
         </Typography>
       ) : null}
       <IconButton
         size="small"
-        aria-label={`Mover ${label} para cima`}
+        aria-label={copy.moveUp(label)}
         disabled={index === 0 || saving}
         onClick={() => onMove(index, index - 1)}
       >
@@ -133,7 +136,7 @@ function PriorityRow({
       </IconButton>
       <IconButton
         size="small"
-        aria-label={`Mover ${label} para baixo`}
+        aria-label={copy.moveDown(label)}
         disabled={index === total - 1 || saving}
         onClick={() => onMove(index, index + 1)}
       >
@@ -154,6 +157,7 @@ function useChainReorder(
   client: PaymentsSettingsClient,
   onReordered?: (next: MerchantSettingsView) => void,
 ) {
+  const copy = usePaymentsSettingsCopy().priority;
   const [chain, setChain] = useState<string[]>(() => chainOf(view));
   const [error, setError] = useState<string | null>(null);
   const [saving, setSaving] = useState(false);
@@ -174,7 +178,7 @@ function useChainReorder(
         })
         .catch((err: unknown) => {
           setChain(previous);
-          setError(err instanceof Error ? err.message : 'Não foi possível salvar a ordem.');
+          setError(err instanceof Error ? err.message : copy.saveFailed);
         })
         .finally(() => setSaving(false));
     },
@@ -201,6 +205,7 @@ function DeclinePolicyControl({
   client: PaymentsSettingsClient;
   onChanged?: (next: MerchantSettingsView) => void;
 }) {
+  const copy = usePaymentsSettingsCopy().priority;
   const [saving, setSaving] = useState(false);
   const cascades = view.failoverPolicy === 'TECHNICAL_AND_DECLINE';
 
@@ -212,7 +217,9 @@ function DeclinePolicyControl({
             size="small"
             checked={cascades}
             disabled={saving}
-            inputProps={{ 'aria-label': 'Tentar cartão recusado no próximo provedor' }}
+            // The accessible name is the same sentence with its emphasis
+            // markers stripped: a screen reader must not spell out asterisks.
+            inputProps={{ 'aria-label': copy.retryDeclinedLabel.replace(/\*\*/g, '') }}
             onChange={(e) => {
               setSaving(true);
               void client
@@ -223,28 +230,25 @@ function DeclinePolicyControl({
           />
         }
         label={
-          <Typography variant="body2">
-            Tentar cartão <strong>recusado</strong> no próximo provedor
-          </Typography>
+          <Typography variant="body2">{richText(copy.retryDeclinedLabel)}</Typography>
         }
       />
       <Typography variant="caption" color="text.secondary" display="block">
-        {cascades
-          ? 'Uma recusa passa para o próximo da lista. Isso pode aumentar custos de transação e sinais de fraude.'
-          : 'Padrão: uma recusa encerra a cobrança. Só falhas técnicas passam para o próximo.'}
+        {cascades ? copy.retryDeclinedOn : copy.retryDeclinedOff}
       </Typography>
     </Box>
   );
 }
 
 export function ProviderPriorityList({ view, client, onReordered }: ProviderPriorityListProps) {
+  const copy = usePaymentsSettingsCopy().priority;
   const { chain, error, saving, move } = useChainReorder(view, client, onReordered);
   const [dragging, setDragging] = useState<number | null>(null);
 
   if (chain.length === 0) {
     return (
       <Alert severity="warning" data-testid="payments-priority-empty">
-        Nenhum provedor está ativo. O checkout não conseguirá cobrar até que você ative ao menos um.
+        {copy.noneActive}
       </Alert>
     );
   }
@@ -252,12 +256,10 @@ export function ProviderPriorityList({ view, client, onReordered }: ProviderPrio
   return (
     <Box data-testid="payments-priority-list">
       <Typography variant="subtitle2" gutterBottom>
-        Ordem de tentativa
+        {copy.orderHeading}
       </Typography>
       <Typography variant="body2" color="text.secondary" sx={{ mb: 1.5 }}>
-        O checkout tenta <strong>{labelOf(view.providers, chain[0] ?? '')}</strong> primeiro. Se uma
-        cobrança falhar por motivo técnico, ele tenta o próximo da lista — mas só quando é possível
-        comprovar que a tentativa anterior não gerou cobrança.
+        {richText(copy.chainExplainer(labelOf(view.providers, chain[0] ?? '')))}
       </Typography>
 
       {error ? (

package/src/components/ProviderSetupGuide.tsx

@@ -31,6 +31,7 @@ import {
 } from './panel-tokens';
 
 import { richText } from './rich-text';
+import { usePaymentsSettingsCopy } from './settings-copy-context';
 
 /**
  * Renders a provider's step-by-step onboarding walkthrough — the reusable
@@ -104,6 +105,7 @@ function CopyField({
 }
 
 function CopyRow({ label, text }: { label: string; text: string }) {
+  const copy = usePaymentsSettingsCopy().setupGuide;
   const [copied, setCopied] = useState(false);
   return (
     <Stack direction="row" spacing={1} alignItems="center" sx={{ width: '100%' }}>
@@ -114,7 +116,7 @@ function CopyRow({ label, text }: { label: string; text: string }) {
       */}
       <TextField fullWidth size="small" disabled value={text} />
       <IconButton
-        aria-label={copied ? 'Copiado' : `Copiar ${label}`}
+        aria-label={copied ? copy.copied : copy.copyValue(label)}
         onClick={() => {
           void navigator.clipboard.writeText(text).then(() => setCopied(true));
         }}

package/src/components/ProviderStatusBar.tsx

@@ -6,6 +6,8 @@ import type { MaskedProviderConfig, ProviderDescriptor } from '@12-apps/payments
 
 import { isConnected } from './connection-state';
 import { T } from './panel-tokens';
+import type { ConnectionStatusCopy } from './settings-copy';
+import { usePaymentsSettingsCopy } from './settings-copy-context';
 
 /**
  * The provider's headline: what state it is in, and the switch that decides
@@ -37,19 +39,22 @@ interface StatusBadge {
  * — a real payment that actually landed — and is the only one painted green.
  */
 export function statusBadge(
+  copy: ConnectionStatusCopy,
   config: MaskedProviderConfig | null,
   descriptor?: ProviderDescriptor,
 ): StatusBadge {
-  if (config?.chargeVerifiedAt) return { label: 'VERIFICADO', color: 'success' };
+  if (config?.chargeVerifiedAt) return { label: copy.verified, color: 'success' };
   // A store that has entered nothing has not FAILED at anything. The stored
   // status outlives the credential it described — clearing the field leaves the
   // last verdict behind — so a red FALHOU sat above an empty form, accusing the
   // owner of a mistake they had not yet had the chance to make.
   if (descriptor && !anyCredentialStored(config, descriptor)) {
-    return { label: 'NÃO VERIFICADO', color: 'default' };
+    return { label: copy.unverified, color: 'default' };
   }
-  if (config?.status === 'RECONNECT_REQUIRED') return { label: 'RECONECTAR', color: 'error' };
-  if (isConnected(config)) return { label: 'CONEXÃO OK', color: 'info' };
+  if (config?.status === 'RECONNECT_REQUIRED') {
+    return { label: copy.reconnectRequired, color: 'error' };
+  }
+  if (isConnected(config)) return { label: copy.connectionOk, color: 'info' };
   // A FAILED probe lands here, and it says NÃO VERIFICADO like every other
   // not-yet-connected state. `FALHOU` was a third word for the same fact — the
   // store cannot take money through this provider yet — and it was the only
@@ -59,7 +64,7 @@ export function statusBadge(
   //
   // `RECONNECT_REQUIRED` stays red on purpose: that one is a connection that
   // WAS working and stopped, which is news rather than a step.
-  return { label: 'NÃO VERIFICADO', color: 'default' };
+  return { label: copy.unverified, color: 'default' };
 }
 
 /**
@@ -107,6 +112,7 @@ function anyCredentialStored(
  * does not have, and quoting it from here could only ever be a guess.
  */
 function toggleGate(
+  copy: ConnectionStatusCopy,
   descriptor: ProviderDescriptor,
   config: MaskedProviderConfig | null,
   enabled: boolean,
@@ -119,9 +125,7 @@ function toggleGate(
   if (!lockedOff) return { lockedOff, hint: '' };
   return {
     lockedOff,
-    hint: provable
-      ? 'Este provedor só passa a receber vendas depois dos 3 passos abaixo.'
-      : 'Conecte e verifique o provedor antes de ativar as vendas.',
+    hint: provable ? copy.threeStepsAhead : copy.connectAndVerifyFirst,
   };
 }
 
@@ -133,24 +137,19 @@ function toggleGate(
  * opposite situations: the first is a step outstanding, the second a decision
  * the owner made and can undo in one click.
  */
-function headline(io: { enabled: boolean; paused: boolean; lockedOff: boolean; hint: string }) {
+function headline(
+  copy: ConnectionStatusCopy,
+  io: { enabled: boolean; paused: boolean; lockedOff: boolean; hint: string },
+) {
   if (io.enabled) {
-    return {
-      state: 'Recebendo vendas',
-      sub: 'Sua loja está recebendo por este provedor.',
-      tone: T.ok,
-    };
+    return { ...copy.receiving, tone: T.ok };
   }
   if (io.paused) {
-    return {
-      state: 'Pausado',
-      sub: 'Conexão pronta e pausada por você — nenhum pedido novo é cobrado aqui.',
-      tone: T.warn,
-    };
+    return { ...copy.pausedByOwner, tone: T.warn };
   }
   return {
-    state: 'Ainda não está recebendo',
-    sub: io.lockedOff ? io.hint : 'Tudo pronto — ligue a chave para começar a receber.',
+    state: copy.readyNotReceiving.state,
+    sub: io.lockedOff ? io.hint : copy.readyNotReceiving.sub,
     tone: T.ink3,
   };
 }
@@ -231,12 +230,13 @@ export function ProviderStatusBar({
   onToggle: (enabled: boolean) => void;
 }) {
   const enabled = config?.enabled ?? false;
-  const { lockedOff, hint } = toggleGate(descriptor, config, enabled);
-  const badge = statusBadge(config, descriptor);
+  const copy = usePaymentsSettingsCopy().status;
+  const { lockedOff, hint } = toggleGate(copy, descriptor, config, enabled);
+  const badge = statusBadge(copy, config, descriptor);
 
   const proven = Boolean(config?.chargeVerifiedAt);
   const paused = proven && !enabled;
-  const { state, sub, tone } = headline({ enabled, paused, lockedOff, hint });
+  const { state, sub, tone } = headline(copy, { enabled, paused, lockedOff, hint });
 
   return (
     <Stack direction="row" alignItems="flex-start" gap="14px" flexWrap="wrap">

package/src/components/SetupGuideSection.tsx

@@ -7,6 +7,7 @@ import type { ProviderSetupGuide as Guide, SetupSection } from '@12-apps/payment
 
 import { DoneRow } from './CredentialFields';
 import { ProviderSetupGuide } from './ProviderSetupGuide';
+import { usePaymentsSettingsCopy } from './settings-copy-context';
 
 /**
  * The walkthrough, plus the one step whose completion only the OWNER can
@@ -34,9 +35,10 @@ export const CHECKOUT_CONFIRM_ACTION = 'checkout-integrado-confirmado';
  * and Stone both own a step no API can report, and neither of them has a
  * "Checkout Integrado" to have enabled. Sections say what they are asking about
  * via `SetupSection.confirmLabel`; this fallback keeps InfinitePay's rendered
- * guide identical.
+ * guide identical. It is `setupGuide.defaultConfirmLabel` on the host's pack
+ * now, so the vendor's product name is at least chosen rather than compiled in.
  */
-const CONFIRM_LABEL_FALLBACK = 'Já habilitei o Checkout Integrado';
+
 
 /** Does this section end in a question only the owner can answer? */
 function isConfirmable(section: SetupSection): boolean {
@@ -134,12 +136,13 @@ export interface SetupGuideSectionProps {
  * still there to press Revisar on.
  */
 function ConfirmedRow({ section, onReopen }: { section: SetupSection; onReopen: () => void }) {
+  const copy = usePaymentsSettingsCopy().setupGuide;
   return (
     <DoneRow
       testId="payments-setup-confirmed"
       label={section.doneSummary?.label ?? section.title}
-      value={section.doneSummary?.value ?? 'Confirmado por você'}
-      editLabel="Revisar"
+      value={section.doneSummary?.value ?? copy.confirmedByYou}
+      editLabel={copy.reviewAction}
       onEdit={onReopen}
     />
   );
@@ -157,12 +160,13 @@ function ConfirmedRow({ section, onReopen }: { section: SetupSection; onReopen:
 function confirmationOf(
   guide: Guide,
   { stage, confirmed, editing }: { stage: number; confirmed: boolean; editing: boolean },
+  fallbackLabel: string,
 ): { label: string; settledSection: SetupSection | null } {
   const asking = confirmableStage(guide);
   const section = asking >= 0 ? sectionAt(guide, asking) : null;
   const settled = confirmed && !editing && asking >= 0 && stage > asking;
   return {
-    label: section?.confirmLabel ?? CONFIRM_LABEL_FALLBACK,
+    label: section?.confirmLabel ?? fallbackLabel,
     settledSection: settled ? section : null,
   };
 }
@@ -193,7 +197,12 @@ export function SetupGuideSection({
 
   const stage = effectiveStage(guide, confirmed, editing, stored);
   const open = sectionAt(guide, stage);
-  const { label, settledSection } = confirmationOf(guide, { stage, confirmed, editing });
+  const guideCopy = usePaymentsSettingsCopy().setupGuide;
+  const { label, settledSection } = confirmationOf(
+    guide,
+    { stage, confirmed, editing },
+    guideCopy.defaultConfirmLabel,
+  );
 
   return (
     <Box data-testid="payments-setup">

package/src/components/checkout/apple-pay-button.tsx

@@ -1,8 +1,13 @@
 import { Box } from "@mui/material";
 import { useRef, type JSX } from "react";
 
+import { useCheckoutCopy } from "./copy-context";
+import type { WalletCopy } from "./screens-copy";
 import type { CheckoutOrder } from "./types";
 
+/** The Apple half of {@link WalletCopy} — what this button and its sheet say. */
+type ApplePayCopy = WalletCopy["applePay"];
+
 /**
  * The Apple-owned pay button (FUT-472), on `ApplePaySession` — the API Safari
  * ships natively; there is no script to load. This component owns token
@@ -85,13 +90,16 @@ export function applePaySupported(): boolean {
 }
 
 /** The sheet's payment request, from the server-authoritative order total. */
-function paymentRequest(order: CheckoutOrder): ApplePayPaymentRequest {
+function paymentRequest(order: CheckoutOrder, copy: ApplePayCopy): ApplePayPaymentRequest {
   return {
     countryCode: "BR",
     currencyCode: "BRL",
     supportedNetworks: APPLE_PAY_SUPPORTED_NETWORKS,
     merchantCapabilities: ["supports3DS"],
-    total: { label: "Total do pedido", amount: (order.totalCents / 100).toFixed(2) },
+    // The one line Apple's own sheet renders from us, so it is the host's
+    // (FUT-760) — the rest of that sheet is Apple's, in the buyer's own
+    // system language.
+    total: { label: copy.orderTotal, amount: (order.totalCents / 100).toFixed(2) },
   };
 }
 
@@ -109,8 +117,8 @@ export interface ApplePayButtonProps {
    * The host's merchant-validation port: exchange `validationURL` for an
    * Apple merchant session, SERVER-SIDE (the merchant identity certificate
    * must never reach a browser). Absent — the external prerequisites are not
-   * done, or the host has not wired it — the session aborts with a pt-BR
-   * message and the card form remains the way to pay.
+   * done, or the host has not wired it — the session aborts with the host's
+   * `cannotStart` sentence and the card form remains the way to pay.
    */
   validateMerchant?: (validationURL: string) => Promise<unknown>;
 }
@@ -120,20 +128,21 @@ function runSession(
   Session: ApplePaySessionClass,
   order: CheckoutOrder,
   handlers: ApplePayButtonProps,
+  copy: ApplePayCopy,
 ): void {
-  const session = new Session(APPLE_PAY_VERSION, paymentRequest(order));
+  const session = new Session(APPLE_PAY_VERSION, paymentRequest(order, copy));
   session.onvalidatemerchant = (event) => {
     const validate = handlers.validateMerchant;
     if (!validate) {
       session.abort();
-      handlers.onError("Não foi possível iniciar o Apple Pay nesta loja. Pague com cartão.");
+      handlers.onError(copy.cannotStart);
       return;
     }
     validate(event.validationURL)
       .then((merchantSession) => session.completeMerchantValidation(merchantSession))
       .catch(() => {
         session.abort();
-        handlers.onError("Não foi possível iniciar o Apple Pay. Tente novamente ou pague com cartão.");
+        handlers.onError(copy.cannotComplete);
       });
   };
   session.onpaymentauthorized = (event) => {
@@ -162,15 +171,16 @@ export function ApplePayButton(props: ApplePayButtonProps): JSX.Element | null {
   // over a stale charge target.
   const current = useRef(props);
   current.current = props;
+  const copy = useCheckoutCopy().screens.wallet.applePay;
   const Session = applePaySessionClass();
   if (!Session || !applePaySupported()) return null;
   return (
     <Box
       component="button"
       type="button"
-      aria-label="Pagar com Apple Pay"
+      aria-label={copy.payAction}
       data-testid="apple-pay-button"
-      onClick={() => runSession(Session, current.current.order, current.current)}
+      onClick={() => runSession(Session, current.current.order, current.current, copy)}
       sx={{
         WebkitAppearance: "-apple-pay-button",
         // Apple draws the button; these only give it room. The fallback

package/src/components/checkout/buyer-fields.ts

@@ -28,7 +28,7 @@
  * the two must not disagree about what a chain needs.
  */
 
-import { validateCpf } from "../../card";
+import { isValidCpf } from "../../card";
 
 import type { CheckoutChainLink, CheckoutCustomerField, PaymentMethod } from "./types";
 
@@ -105,8 +105,10 @@ const RULES: Record<CheckoutCustomerField["type"], (value: string) => boolean> =
   PHONE: (value) => /^\d{10,11}$/.test(value.replace(/\D/g, "")),
   MOBILE: (value) => /^\d{2}9\d{8}$/.test(value.replace(/\D/g, "")),
   // The real check-digit rule, not a length test: the same validator the CPF
-  // input has always used, so the form and the gate cannot disagree.
-  CPF: (value) => validateCpf(value) === undefined,
+  // input has always used, so the form and the gate cannot disagree. The
+  // PREDICATE rather than the message — this is a gate, and it would only be
+  // throwing the sentence away (FUT-760).
+  CPF: (value) => isValidCpf(value),
 };
 
 /** Whether a declared field is satisfied by what the buyer typed. */