@12-apps/payments-frontend 3.9.0 → 3.10.0

package/src/components/ConnectionProbe.tsx

@@ -8,6 +8,7 @@ import type { MaskedProviderConfig, ProviderDescriptor } from '@12-apps/payments
 import type { PaymentsSettingsClient } from '../client';
 import { isConnected } from './connection-state';
 import { ProbeAlert, ProbeChecklist, type VerifyProbe } from './CredentialFormAlerts';
+import { usePaymentsSettingsCopy } from './settings-copy-context';
 
 /**
  * "Testar conexão" for a store whose connection is a GRANT, not a form.
@@ -41,6 +42,7 @@ export function ConnectionProbe({
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [probe, setProbe] = useState<VerifyProbe | null>(null);
+  const copy = usePaymentsSettingsCopy().credentials;
   if (!isConnected(config)) return null;
 
   const verify = async () => {
@@ -69,7 +71,7 @@ export function ConnectionProbe({
         onClick={() => void verify()}
         sx={{ textTransform: 'none' }}
       >
-        {busy ? <CircularProgress size={18} /> : 'Testar conexão'}
+        {busy ? <CircularProgress size={18} /> : copy.probeAction}
       </Button>
       {error ? <Alert severity="error">{error}</Alert> : null}
       {probe ? <ProbeAlert probe={probe} busy={busy} onRetry={() => void verify()} /> : null}

package/src/components/CredentialFieldStack.tsx

@@ -8,6 +8,7 @@ import { CredentialField } from './CredentialFields';
 import { saveLabel } from './credential-rules';
 import { FormActions, ReverifyWarning } from './CredentialFormAlerts';
 import type { CredentialFormState } from './ProviderCredentialForm';
+import { usePaymentsSettingsCopy } from './settings-copy-context';
 
 /**
  * The live inputs for the step still owed, plus the one button that commits
@@ -27,9 +28,10 @@ export function CredentialFields({
   /** A real charge has landed through this connection — see `ReverifyWarning`. */
   proven: boolean;
 }) {
+  const copy = usePaymentsSettingsCopy().credentials;
   return (
     <Stack spacing={2}>
-      {proven ? <ReverifyWarning /> : null}
+      {proven ? <ReverifyWarning displayName={descriptor.displayName} /> : null}
       {descriptor.credentialSchema.map((spec) => (
         <CredentialField
           key={spec.key}
@@ -46,7 +48,11 @@ export function CredentialFields({
       ))}
       <FormActions
         busy={form.busy}
-        label={saveLabel(descriptor, form.complete)}
+        label={saveLabel(copy, descriptor, form.complete)}
+        // The FACT, not the words. This bar used to read `label.includes(
+        // 'testar')` to decide which promise to print — which quietly made the
+        // sentence depend on how a host spelled its button (FUT-760).
+        willTest={form.complete}
         disabled={form.nothingEdited || !form.valid}
         onSave={form.requestSave}
       />

package/src/components/CredentialFields.tsx

@@ -5,6 +5,8 @@ import { Box, Button, Stack, TextField, Typography } from '@mui/material';
 import type { CredentialFieldSpec, MaskedFieldState } from '@12-apps/payments-backend';
 
 import { LINKISH_SX, T } from './panel-tokens';
+import { usePaymentsSettingsCopy } from './settings-copy-context';
+import type { CredentialFormCopy } from './settings-copy';
 
 /**
  * The schema-driven credential inputs, and the one-line summary a finished
@@ -27,6 +29,7 @@ function secretPresentation(
   state: MaskedFieldState | undefined,
   value: string | undefined,
   required: boolean,
+  copy: CredentialFormCopy,
 ): FieldPresentation {
   const configured = state?.configured ?? false;
   return {
@@ -34,7 +37,7 @@ function secretPresentation(
     value: value ?? '',
     required: required && !configured,
     placeholder: configured ? (state?.hint ?? '') : undefined,
-    helperText: configured ? 'Configurado — deixe em branco para manter o valor atual.' : undefined,
+    helperText: configured ? copy.configuredKeepBlank : undefined,
   };
 }
 
@@ -42,8 +45,9 @@ function fieldPresentation(
   spec: CredentialFieldSpec,
   state: MaskedFieldState | undefined,
   value: string | undefined,
+  copy: CredentialFormCopy,
 ): FieldPresentation {
-  if (spec.secret) return secretPresentation(state, value, spec.required);
+  if (spec.secret) return secretPresentation(state, value, spec.required, copy);
   const configured = state?.configured ?? false;
   return {
     type: 'text',
@@ -83,7 +87,8 @@ interface CredentialFieldProps {
 
 /** One schema-driven form field. Secrets are write-only: hint, never value. */
 export function CredentialField({ spec, state, value, onChange, check }: CredentialFieldProps) {
-  const presentation = fieldPresentation(spec, state, value);
+  const copy = usePaymentsSettingsCopy().credentials;
+  const presentation = fieldPresentation(spec, state, value, copy);
   // Label ABOVE the box, not floating in it. Four credentials whose names are
   // the only thing distinguishing them (`sk_`, `pk_`, `whsec_`, `acct_`) are
   // read as a column, and a floating label disappears the moment a value is
@@ -103,7 +108,7 @@ export function CredentialField({ spec, state, value, onChange, check }: Credent
         {spec.label}
         {spec.advanced ? (
           <Box component="span" sx={{ fontWeight: 500, color: T.ink4 }}>
-            {' · só para plataformas Connect'}
+            {copy.advancedSuffix}
           </Box>
         ) : null}
       </Typography>
@@ -222,16 +227,18 @@ export function DoneRow({
   value,
   mono,
   onEdit,
-  editLabel = 'Alterar',
+  editLabel,
   testId,
 }: {
   label: string;
   value: string;
   mono?: boolean;
   onEdit: () => void;
+  /** Defaults to the host's `changeAction` when the caller names none. */
   editLabel?: string;
   testId: string;
 }) {
+  const copy = usePaymentsSettingsCopy().credentials;
   return (
     // Green, not grey: a finished step reads as an achievement at a glance, and
     // the whole point of collapsing it is that the eye can skip it on the way to
@@ -263,7 +270,7 @@ export function DoneRow({
       </Typography>
       <Box sx={{ flexGrow: 1 }} />
       <Button size="small" onClick={onEdit} data-testid={`${testId}-edit`} sx={LINKISH_SX}>
-        {editLabel}
+        {editLabel ?? copy.changeAction}
       </Button>
     </Stack>
   );

package/src/components/CredentialFormAlerts.tsx

@@ -4,8 +4,11 @@ import { Alert, Box, Button, CircularProgress, Stack, Typography } from '@mui/ma
 
 import type { VerifiedProviderConfig } from '@12-apps/payments-backend';
 
-import { ENVIRONMENT_LABELS } from './EnvironmentTabs';
+import { environmentLabels } from './EnvironmentTabs';
+import type { CredentialFormCopy } from './settings-copy';
+import { usePaymentsSettingsCopy } from './settings-copy-context';
 import { BAR_MSG_SX, BAR_SX, BTN_PRIMARY_SX } from './panel-tokens';
+import { richText } from './rich-text';
 
 /**
  * The credential step's alerts and its one button.
@@ -41,14 +44,13 @@ export function ProbeAlert({
   onRetry: () => void;
 }) {
   if (probe.ok) return null;
-  const where = ENVIRONMENT_LABELS[probe.environment];
+  const copy = usePaymentsSettingsCopy();
+  const where = environmentLabels(copy.environment)[probe.environment];
   // The ADAPTER's sentence when it has one. Only it knows the provider's name,
   // what that provider's own app calls this field and which screen states it —
   // "confira as credenciais deste ambiente" is advice you can follow all
   // afternoon without ever finding the value you were asked to check.
-  const message =
-    probe.message ??
-    `Não foi possível conectar em ${where}. Confira as credenciais deste ambiente.`;
+  const message = probe.message ?? copy.credentials.probeFailed(where);
 
   // An outage is not a rejection. The credential is already SAVED and may well
   // be perfect; nothing was learned about it. So it is amber rather than red,
@@ -69,7 +71,7 @@ export function ProbeAlert({
             data-testid="payments-verify-retry"
             sx={{ textTransform: 'none' }}
           >
-            Testar conexão
+            {copy.credentials.probeAction}
           </Button>
         ) : undefined
       }
@@ -94,11 +96,13 @@ const SCREEN_READER_ONLY = {
 } as const;
 
 /** How each verdict reads at a glance — the mark, and what it is called. */
-const CHECK_MARKS = {
-  PASS: { mark: '✓', color: 'success.main', label: 'Verificado' },
-  FAIL: { mark: '✕', color: 'error.main', label: 'Corrigir' },
-  UNCHECKED: { mark: '–', color: 'text.secondary', label: 'Não verificável' },
-} as const;
+function checkMarks(copy: CredentialFormCopy) {
+  return {
+    PASS: { mark: '✓', color: 'success.main', label: copy.checkPass },
+    FAIL: { mark: '✕', color: 'error.main', label: copy.checkFail },
+    UNCHECKED: { mark: '–', color: 'text.secondary', label: copy.uncheckable },
+  } as const;
+}
 
 /**
  * What the probe established, credential by credential (FUT-796).
@@ -122,12 +126,13 @@ export function ProbeChecklist({
   /** Keep only the verdicts this predicate accepts — see `ProviderForm`. */
   only?: (key: string) => boolean;
 }) {
+  const marks = checkMarks(usePaymentsSettingsCopy().credentials);
   const shown = (probe.checks ?? []).filter((check) => only?.(check.key) ?? true);
   if (shown.length === 0) return null;
   return (
     <Stack spacing={0.5} data-testid="payments-probe-checks">
       {shown.map((check) => {
-        const { mark, color, label } = CHECK_MARKS[check.status];
+        const { mark, color, label } = marks[check.status];
         return (
           <Stack
             key={check.key}
@@ -164,11 +169,11 @@ export function ProbeChecklist({
  * correct and entirely invisible, and an owner who came to fix a typo deserves
  * to learn it before typing rather than from a quiet storefront.
  */
-export function ReverifyWarning() {
+export function ReverifyWarning({ displayName }: { displayName: string }) {
+  const copy = usePaymentsSettingsCopy().credentials;
   return (
     <Alert severity="warning" data-testid="payments-reverify-warning">
-      Esta loja já está verificada. Trocar a InfiniteTag <strong>exige uma nova verificação</strong>{' '}
-      e a loja <strong>para de receber</strong> por este provedor até que ela termine.
+      {richText(copy.reverifyWarning(displayName))}
     </Alert>
   );
 }
@@ -187,23 +192,27 @@ export function ReverifyWarning() {
 export function FormActions({
   busy,
   label,
+  willTest,
   disabled,
   onSave,
 }: {
   busy: string | null;
   label: string;
+  /** Whether pressing save will also SEND the set to the provider. */
+  willTest: boolean;
   disabled: boolean;
   onSave: () => void;
 }) {
   // The bar states what pressing it costs, which is the half a verb cannot
   // carry: a complete set is sent to the provider on save, and a partial one is
   // only written down. The owner reads the promise and the button in one line.
+  const copy = usePaymentsSettingsCopy().credentials;
   const message =
     busy === 'verify'
-      ? 'Testando a conexão…'
-      : label.includes('testar')
-        ? 'Salvamos e testamos as chaves no provedor antes de seguir.'
-        : 'Guardamos o que você já preencheu. Complete os campos para testar.';
+      ? copy.probeRunning
+      : willTest
+        ? copy.probeSaveNote
+        : copy.probeIncompleteNote;
 
   return (
     <Box sx={BAR_SX} data-testid="payments-form-bar">

package/src/components/EnvironmentTabs.tsx

@@ -5,12 +5,19 @@ import { Alert, Box, Tab, Tabs, Typography } from '@mui/material';
 import type { PaymentEnvironment } from '@12-apps/payments-backend';
 
 import { T } from './panel-tokens';
+import type { EnvironmentCopy } from './settings-copy';
+import { usePaymentsSettingsCopy } from './settings-copy-context';
 
-/** One environment's human name — the tabs and the probe result share it. */
-export const ENVIRONMENT_LABELS: Record<PaymentEnvironment, string> = {
-  SANDBOX: 'Sandbox',
-  PRODUCTION: 'Produção',
-};
+/**
+ * One environment's human name — the tabs and the probe result share it.
+ *
+ * Built from the host's pack rather than declared here (FUT-760): the names
+ * appear inside the probe's own failure sentence too, so one spelling has to
+ * serve both or the screen contradicts itself.
+ */
+export function environmentLabels(copy: EnvironmentCopy): Record<PaymentEnvironment, string> {
+  return { SANDBOX: copy.sandbox, PRODUCTION: copy.production };
+}
 
 /**
  * Sentence case, because these are place names rather than shouted commands —
@@ -47,6 +54,7 @@ export function EnvironmentSelector({
   environment: PaymentEnvironment;
   onChange: (next: PaymentEnvironment) => void;
 }) {
+  const copy = usePaymentsSettingsCopy().environment;
   // A segmented control, not underlined tabs. Two options that CHANGE WHAT
   // EVERY FIELD BELOW MEANS should look like a switch being thrown, and the
   // label above says which switch — "Ambiente" alone reads as a page section.
@@ -55,12 +63,12 @@ export function EnvironmentSelector({
       <Typography
         sx={{ display: 'block', fontSize: '12px', fontWeight: 650, color: T.ink2, mb: '5px' }}
       >
-        Ambiente desta conexão
+        {copy.groupLabel}
       </Typography>
       <Tabs
         value={environment}
         onChange={(_, next: PaymentEnvironment) => onChange(next)}
-        aria-label="Ambiente desta conexão"
+        aria-label={copy.groupLabel}
         data-testid="payments-environment-tabs"
         slotProps={{ indicator: { sx: { display: 'none' } } }}
         sx={{
@@ -73,13 +81,13 @@ export function EnvironmentSelector({
         }}
       >
         <Tab
-          label="Sandbox"
+          label={copy.sandbox}
           value="SANDBOX"
           data-testid="payments-environment-SANDBOX"
           sx={TAB_SX}
         />
         <Tab
-          label="Produção"
+          label={copy.production}
           value="PRODUCTION"
           data-testid="payments-environment-PRODUCTION"
           sx={TAB_SX}
@@ -126,7 +134,9 @@ export function EnvironmentNotice({
    */
   band?: boolean;
 }) {
-  const elsewhere = active !== null && active !== environment ? ENVIRONMENT_LABELS[active] : null;
+  const copy = usePaymentsSettingsCopy().environment;
+  const elsewhere =
+    active !== null && active !== environment ? environmentLabels(copy)[active] : null;
   const production = environment === 'PRODUCTION';
   return (
     <Alert
@@ -137,12 +147,10 @@ export function EnvironmentNotice({
       sx={band ? { borderRadius: 0, py: 0.5, px: 3 } : { py: 0.5 }}
     >
       <strong>
-        {production ? 'Produção — dinheiro real.' : 'Sandbox — ambiente de teste.'}
+        {production ? copy.productionMeaning : copy.sandboxMeaning}
       </strong>{' '}
-      {production
-        ? 'Tudo o que você fizer aqui vale para as vendas da loja.'
-        : 'Nenhum valor sai ou entra de verdade.'}
-      {elsewhere ? ` Hoje a loja está usando ${elsewhere}.` : ''}
+      {production ? copy.productionConsequence : copy.sandboxConsequence}
+      {elsewhere ? copy.storeIsUsing(elsewhere) : ''}
     </Alert>
   );
 }

package/src/components/OAuthPanel.tsx

@@ -8,6 +8,7 @@ import { LINKISH_SX } from './panel-tokens';
 import { ProviderConnection } from './ProviderConnection';
 import type { ActivePanelProps } from './ProviderPanel';
 import { ProviderCard } from './ProviderPanel';
+import { usePaymentsSettingsCopy } from './settings-copy-context';
 
 /**
  * The OAuth branch of a provider's screen, and the switch between its two
@@ -108,6 +109,7 @@ export function OAuthPanel({
   walkthrough: (path: 'oauth' | 'credentials') => ReactNode;
   form: ReactNode;
 }) {
+  const copy = usePaymentsSettingsCopy().oauth;
   // Which path the owner is on. The disclosure is no longer just a container —
   // opening it CHOOSES the credentials path, so the panel has to know.
   const [manual, setManual] = useState(false);
@@ -119,10 +121,7 @@ export function OAuthPanel({
   if (!prepareConnect) {
     return (
       <ProviderCard header={statusBar}>
-        <Alert severity="info">
-          Este provedor conecta por autorização, mas o botão de conexão não está disponível nesta
-          instalação. Você ainda pode conectar informando as credenciais manualmente.
-        </Alert>
+        <Alert severity="info">{copy.connectUnavailable}</Alert>
         {form}
         {probe}
         {verification}
@@ -134,7 +133,7 @@ export function OAuthPanel({
     <ProviderCard header={statusBar}>
       {manual ? (
         <PathSwitch
-          label="Prefiro conectar por autorização"
+          label={copy.preferOAuth}
           expanded={false}
           onChange={() => setManual(false)}
           testId="payments-oauth-fallback"
@@ -153,7 +152,7 @@ export function OAuthPanel({
       {probe}
       {descriptor.credentialSchema.length > 0 ? (
         <PathSwitch
-          label="Prefiro informar as credenciais manualmente"
+          label={copy.preferCredentials}
           expanded={manual}
           onChange={setManual}
           testId="payments-manual-fallback"

package/src/components/PaymentProviderSettings.tsx

@@ -21,6 +21,8 @@ import {
   type ProviderChangeHandler,
 } from './settings-state';
 import { openSection, SetupGuideSection } from './SetupGuideSection';
+import type { PaymentsSettingsCopy } from './settings-copy';
+import { PaymentsSettingsCopyProvider } from './settings-copy-context';
 
 /**
  * Plug-and-play settings page for payment providers — the reusable
@@ -40,6 +42,15 @@ import { openSection, SetupGuideSection } from './SetupGuideSection';
  */
 export interface PaymentProviderSettingsProps {
   client: PaymentsSettingsClient;
+  /**
+   * Every sentence this surface renders (FUT-760).
+   *
+   * REQUIRED, with no default in the package: a default would be one product's
+   * Portuguese compiled into every other product's settings screen. Passed
+   * once, here, and read from context by the fifteen components below —
+   * `PT_BR_PAYMENTS_SETTINGS_COPY` reproduces today's wording verbatim.
+   */
+  copy: PaymentsSettingsCopy;
   /** Called after any state-changing action, e.g. to refresh host UI. */
   onChanged?: (config: MaskedProviderConfig) => void;
   /**
@@ -233,8 +244,34 @@ function ProviderScreen({ onBack, ...panel }: ProviderScreenProps) {
   );
 }
 
+/**
+ * The walkthrough slot the panel renders, per the connection path it has open.
+ *
+ * Extracted for the size gate, and it reads better here anyway: the mount above
+ * is about resolving WHICH provider is open, and this is about what its
+ * walkthrough shows once one is.
+ */
+function guideSlot(
+  guide: ProviderSetupGuide | null,
+  ack: { confirmed: boolean; confirm: () => void; withdraw: () => void },
+) {
+  return ({ path, ...slots }: Parameters<NonNullable<ProviderScreenProps['guide']>>[0]) => (
+    <SetupGuideSection
+      // Which walkthrough, per the path the panel has open. Only the SECTIONS
+      // differ; `blocked`/`hidden` at the call site stay computed from the base
+      // guide, which `credentialsPath` is required to mirror.
+      guide={guideForPath(guide, path)}
+      confirmed={ack.confirmed}
+      onConfirm={ack.confirm}
+      onReopen={ack.withdraw}
+      {...slots}
+    />
+  );
+}
+
 export function PaymentProviderSettings({
   client,
+  copy,
   onChanged,
   prepareConnect,
   initialProvider = null,
@@ -268,10 +305,15 @@ export function PaymentProviderSettings({
   if (!view) return <CircularProgress data-testid="payments-settings-loading" />;
 
   if (!active) {
-    return <ProviderList view={view} client={client} reload={reload} onSelect={openProvider} />;
+    return (
+      <PaymentsSettingsCopyProvider copy={copy}>
+        <ProviderList view={view} client={client} reload={reload} onSelect={openProvider} />
+      </PaymentsSettingsCopyProvider>
+    );
   }
 
   return (
+    <PaymentsSettingsCopyProvider copy={copy}>
     <ProviderScreen
       descriptor={active}
       config={activeConfig}
@@ -296,18 +338,8 @@ export function PaymentProviderSettings({
         onVerified: () => void reload(),
         onSetupIncomplete: ack.withdraw,
       })}
-      guide={({ path, ...slots }) => (
-        <SetupGuideSection
-          // Which walkthrough, per the path the panel has open. Only the
-          // SECTIONS differ; `blocked`/`hidden` above stay computed from the
-          // base guide, which `credentialsPath` is required to mirror.
-          guide={guideForPath(guide, path)}
-          confirmed={ack.confirmed}
-          onConfirm={ack.confirm}
-          onReopen={ack.withdraw}
-          {...slots}
-        />
-      )}
+      guide={guideSlot(guide, ack)}
     />
+    </PaymentsSettingsCopyProvider>
   );
 }