@12-apps/payments-frontend 3.6.0 → 3.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/payments-frontend",
-  "version": "3.6.0",
+  "version": "3.7.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": {
@@ -17,7 +17,7 @@
     "storybook:build": "storybook build"
   },
   "dependencies": {
-    "@12-apps/payments-backend": "^4.14.0",
+    "@12-apps/payments-backend": "^4.15.0",
     "react-qr-code": "^2.2.0"
   },
   "peerDependencies": {
@@ -28,8 +28,8 @@
     "react-dom": ">=19.0.0"
   },
   "devDependencies": {
-    "@12-apps/eslint-config": "^1.21.0",
-    "@12-apps/typescript-config": "^1.20.0",
+    "@12-apps/eslint-config": "^1.21.1",
+    "@12-apps/typescript-config": "^1.20.1",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@mui/material": "^6.5.0",

package/src/components/checkout/checkout-flow.tsx

@@ -7,13 +7,17 @@ import { ArrowBackIcon } from "./icons";
 import { PaymentStatus } from "./payment-status";
 import type { BuyerInfo, CheckoutProviderConfig, SettlementCheckout } from "./types";
 import { CheckoutComponentsProvider, useCheckoutComponents, type CheckoutComponents } from "./ui";
+import type { CheckoutViewCopy } from "./view-copy";
 import { useCheckoutController, type CheckoutHostPorts } from "./use-checkout-controller";
 
-const STEPPER_STEPS = [
-  { id: "dados", label: "Dados" },
-  { id: "payment", label: "Pagamento" },
-  { id: "status", label: "Confirmação" },
-];
+/** Step ids are the flow's own contract; the labels beside them are host copy. */
+function stepperSteps(copy: CheckoutViewCopy): { id: string; label: string }[] {
+  return [
+    { id: "dados", label: copy.steps.dados },
+    { id: "payment", label: copy.steps.payment },
+    { id: "status", label: copy.steps.status },
+  ];
+}
 
 /** What the flow reads off the host's cart — display facts, never money math. */
 export interface CheckoutCartView {
@@ -35,6 +39,14 @@ export interface CheckoutCartView {
  * pixels render through the slot contract (`components`, see `ui.tsx`).
  */
 export interface CheckoutFlowProps extends CheckoutHostPorts {
+  /**
+   * Every sentence the flow's own chrome renders — stepper labels, the Dados
+   * step, the empty cart, the confirmation screen. REQUIRED, with no default:
+   * a pt-BR host passes `PT_BR_CHECKOUT_VIEW_COPY` from the package root by
+   * hand, so choosing Portuguese is a line in the host's diff, never a
+   * silence (FUT-760's doctrine, finally applied to the legacy flow too).
+   */
+  copy: CheckoutViewCopy;
   /** The host's cart, reduced to what the flow displays. */
   cart: CheckoutCartView;
   defaultBuyer?: BuyerInfo;
@@ -97,23 +109,23 @@ function statusTotalLabel(
  * per-line remove. Offering it here put a destructive control next to the form
  * a buyer is filling in, one tap away from the field they are typing into.
  */
-function CheckoutHeader({ step, onBack }: { step: string; onBack: () => void }): JSX.Element {
+function CheckoutHeader({ copy, step, onBack }: { copy: CheckoutViewCopy; step: string; onBack: () => void }): JSX.Element {
   const { Button } = useCheckoutComponents();
   return (
     <Box sx={{ minHeight: 36, display: "flex", alignItems: "center", gap: 1 }}>
       <Button variant="text" color="neutral" size="sm" icon={<ArrowBackIcon fontSize="small" />} iconPosition="left" onClick={onBack} dataTestId="checkout-back">
-        {step === "dados" ? "Continuar comprando" : "Voltar"}
+        {step === "dados" ? copy.dados.keepShopping : copy.dados.back}
       </Button>
     </Box>
   );
 }
 
 /** Compact 50px progress header so the form stays above the fold on mobile. */
-function ProgressHeader({ step, completed }: { step: string; completed: Set<string> }): JSX.Element {
+function ProgressHeader({ copy, step, completed }: { copy: CheckoutViewCopy; step: string; completed: Set<string> }): JSX.Element {
   const { Stepper } = useCheckoutComponents();
   return (
     <Box sx={{ height: 50, display: "flex", flexDirection: "column", justifyContent: "center" }}>
-      <Stepper steps={STEPPER_STEPS} activeId={step} completed={completed} orientation="horizontal" size="sm" data-testid="checkout-stepper" />
+      <Stepper steps={stepperSteps(copy)} activeId={step} completed={completed} orientation="horizontal" size="sm" data-testid="checkout-stepper" />
     </Box>
   );
 }
@@ -124,8 +136,37 @@ function ProgressHeader({ step, completed }: { step: string; completed: Set<stri
  * chrome (reduced to {@link CheckoutCartView} here), and the provider SDK +
  * card public key are loaded lazily by the card path (order-scoped REST).
  */
+/** Step 3, with the controller's facts mapped onto the status screen. */
+function StatusStep({
+  copy,
+  c,
+  settlement,
+  cart,
+  confirmationExtra,
+}: {
+  copy: CheckoutViewCopy;
+  c: ReturnType<typeof useCheckoutController>;
+  settlement: SettlementCheckout | null | undefined;
+  cart: CheckoutCartView;
+  confirmationExtra: ReactNode;
+}): JSX.Element {
+  return (
+    <PaymentStatus
+      copy={copy.status}
+      status={c.finalStatus}
+      totalLabel={statusTotalLabel(c.order, settlement, cart)}
+      {...confirmationFacts(c.order, c.buyer)}
+      onRetry={c.retry}
+      onRegenerate={() => { c.setStep("payment"); void c.startPayment("PIX"); }}
+      onBackToMenu={c.goToMenu}
+      paidExtra={confirmationExtra}
+      awaitingTimedOut={c.resumeTimedOut}
+    />
+  );
+}
+
 function CheckoutFlowBody(props: Omit<CheckoutFlowProps, "components">): JSX.Element {
-  const { cart, defaultBuyer, settlement, taxIdOnFile = false, providerConfig, tenantSlug, confirmationExtra, validateApplePayMerchant, ...ports } = props;
+  const { copy, cart, defaultBuyer, settlement, taxIdOnFile = false, providerConfig, tenantSlug, confirmationExtra, validateApplePayMerchant, ...ports } = props;
   // Resolved for NO method on purpose (FUT-595): the Dados step opens before
   // the picker, and the form is filled once — so it asks for the union of what
   // any chain member may need rather than re-opening after the choice. A chain
@@ -141,17 +182,18 @@ function CheckoutFlowBody(props: Omit<CheckoutFlowProps, "components">): JSX.Ele
   // method picker. It holds until an order exists — once one does, its lines are
   // snapshotted server-side and the cart no longer speaks for it.
   if (!settlement && cart.empty && !c.order && c.step !== "status") {
-    return <EmptyCart onBack={c.goToMenu} />;
+    return <EmptyCart copy={copy.emptyCart} onBack={c.goToMenu} />;
   }
 
   return (
     <Box sx={{ display: "flex", flexDirection: "column", gap: { xs: 2, sm: 3 } }}>
-      <CheckoutHeader step={c.step} onBack={c.back} />
+      <CheckoutHeader copy={copy} step={c.step} onBack={c.back} />
 
-      <ProgressHeader step={c.step} completed={c.completed} />
+      <ProgressHeader copy={copy} step={c.step} completed={c.completed} />
 
       {c.step === "dados" ? (
         <DadosStep
+          copy={copy.dados}
           buyer={c.buyer}
           onBuyerChange={c.setBuyer}
           saveProfile={c.saveProfile}
@@ -189,16 +231,7 @@ function CheckoutFlowBody(props: Omit<CheckoutFlowProps, "components">): JSX.Ele
       ) : null}
 
       {c.step === "status" ? (
-        <PaymentStatus
-          status={c.finalStatus}
-          totalLabel={statusTotalLabel(c.order, settlement, cart)}
-          {...confirmationFacts(c.order, c.buyer)}
-          onRetry={c.retry}
-          onRegenerate={() => { c.setStep("payment"); void c.startPayment("PIX"); }}
-          onBackToMenu={c.goToMenu}
-          paidExtra={confirmationExtra}
-          awaitingTimedOut={c.resumeTimedOut}
-        />
+        <StatusStep copy={copy} c={c} settlement={settlement} cart={cart} confirmationExtra={confirmationExtra} />
       ) : null}
     </Box>
   );

package/src/components/checkout/checkout-steps.tsx

@@ -17,6 +17,7 @@ import type {
   OrderStatus,
   PaymentMethod,
 } from "./types";
+import type { DadosStepCopy, EmptyCartCopy } from "./view-copy";
 import { useCheckoutComponents } from "./ui";
 
 /**
@@ -100,15 +101,15 @@ function PaymentBody({
 }
 
 /** Empty-cart state shown when there's nothing to check out. */
-export function EmptyCart({ onBack }: { onBack: () => void }): JSX.Element {
+export function EmptyCart({ copy, onBack }: { copy: EmptyCartCopy; onBack: () => void }): JSX.Element {
   const { Button, Text } = useCheckoutComponents();
   return (
     <Box data-testid="checkout-empty" sx={{ py: 8, textAlign: "center", display: "flex", flexDirection: "column", gap: 2, alignItems: "center" }}>
       <Text variant="heading" size="md" as="p">
-        Seu carrinho está vazio.
+        {copy.title}
       </Text>
       <Button variant="solid" color="primary" size="md" onClick={onBack} dataTestId="checkout-empty-back">
-        Ver cardápio
+        {copy.action}
       </Button>
     </Box>
   );
@@ -158,6 +159,7 @@ function PayBarTotal({
  * — no charge yet.
  */
 export function DadosStep({
+  copy,
   buyer,
   onBuyerChange,
   saveProfile,
@@ -170,6 +172,8 @@ export function DadosStep({
   discountLines,
   totalOverride,
 }: {
+  /** The step's own sentences — the HOST's words (see `./view-copy`). */
+  copy: DadosStepCopy;
   buyer: BuyerInfo;
   onBuyerChange: (buyer: BuyerInfo) => void;
   saveProfile: boolean;
@@ -206,12 +210,13 @@ export function DadosStep({
         <Checkbox
           checked={saveProfile}
           onChange={(_event, checked) => onSaveProfileChange(checked)}
-          label="Salvar meus dados para a próxima compra"
+          label={copy.saveProfile}
           data-testid="buyer-save-profile"
         />
       </Box>
 
       <DadosPayBar
+        copy={copy}
         totalLabel={totalLabel}
         totalItems={totalItems}
         createError={createError}
@@ -227,12 +232,14 @@ export function DadosStep({
 
 /** The sticky "Continuar" bar: the refusal, the money, and the one action. */
 function DadosPayBar({
+  copy,
   totalLabel,
   totalItems,
   createError,
   onContinue,
   children,
 }: {
+  copy: DadosStepCopy;
   totalLabel: string;
   totalItems: number;
   createError: string | null;
@@ -244,20 +251,22 @@ function DadosPayBar({
     <ActionBar dataTestId="checkout-pay-bar">
       <Box sx={{ width: "100%", display: "flex", flexDirection: "column", gap: 1.5 }}>
         {createError ? (
-          <Alert variant="danger" title="Não foi possível continuar" description={createError} showIcon data-testid="checkout-error" />
+          <Alert variant="danger" title={copy.cannotContinueTitle} description={createError} showIcon data-testid="checkout-error" />
         ) : null}
         <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
           <PayBarTotal totalLabel={totalLabel} totalItems={totalItems}>{children}</PayBarTotal>
           <Box sx={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 0.5, minWidth: 0 }}>
             <Button variant="solid" color="primary" size="lg" fullWidth onClick={onContinue} dataTestId="checkout-continue">
-              Continuar
+              {copy.continueAction}
             </Button>
-            <Box sx={{ display: "flex", alignItems: "center", gap: 0.5, color: "text.secondary" }}>
-              <LockOutlinedIcon sx={{ fontSize: 13 }} />
-              <Text variant="caption" size="xs" color="secondary" as="span">
-                Pagamento seguro
-              </Text>
-            </Box>
+            {copy.secureNotice ? (
+              <Box sx={{ display: "flex", alignItems: "center", gap: 0.5, color: "text.secondary" }}>
+                <LockOutlinedIcon sx={{ fontSize: 13 }} />
+                <Text variant="caption" size="xs" color="secondary" as="span">
+                  {copy.secureNotice}
+                </Text>
+              </Box>
+            ) : null}
           </Box>
         </Box>
       </Box>

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

@@ -4,6 +4,7 @@ import type { JSX, ReactNode } from "react";
 import { CheckCircleOutlineIcon, ErrorOutlineIcon, ScheduleIcon } from "./icons";
 import type { OrderStatus } from "./types";
 import { useCheckoutComponents } from "./ui";
+import type { PaymentStatusCopy } from "./view-copy";
 
 /**
  * The last screen of checkout.
@@ -28,67 +29,38 @@ import { useCheckoutComponents } from "./ui";
  * screen says and how it is arranged has changed.
  */
 
-/** Everything the hero block needs, per outcome. */
-interface Outcome {
-  heading: string;
-  support: string;
+/**
+ * The per-outcome VISUAL grammar — icon and semantic tone. The heading and
+ * supporting line beside them come from {@link PaymentStatusCopy}: an icon is
+ * the component's own vocabulary, a sentence never is. (The FAILED support
+ * line's job — say "nothing was charged" plainly and first — and the
+ * timed-out wait's "do not pay again" now live with the host's words, where
+ * FUT-556's reasoning is documented on the copy port.)
+ */
+interface OutcomeVisual {
   icon: JSX.Element;
   /** Semantic theme token — never a raw colour. */
   tone: "success" | "danger" | "warning" | "neutral";
 }
 
-const OUTCOME: Record<OrderStatus, Outcome> = {
-  PAID: {
-    heading: "Pedido confirmado",
-    support: "Recebemos seu pagamento e já registramos o pedido.",
-    icon: <CheckCircleOutlineIcon fontSize="large" />,
-    tone: "success",
-  },
-  AWAITING_PAYMENT: {
-    heading: "Confirmando seu pagamento",
-    support: "Isso costuma levar alguns segundos. Pode deixar esta tela aberta.",
-    icon: <ScheduleIcon fontSize="large" />,
-    tone: "neutral",
-  },
-  FAILED: {
-    heading: "Pagamento não concluído",
-    // Said plainly and first: the fear on this screen is having been charged
-    // for an order that failed.
-    support: "Nenhum valor foi cobrado. Você pode tentar novamente.",
-    icon: <ErrorOutlineIcon fontSize="large" />,
-    tone: "danger",
-  },
-  EXPIRED: {
-    heading: "O código expirou",
-    support: "Nenhum valor foi cobrado. Gere um novo código para continuar.",
-    icon: <ScheduleIcon fontSize="large" />,
-    tone: "warning",
-  },
+const OUTCOME_VISUAL: Record<OrderStatus, OutcomeVisual> = {
+  PAID: { icon: <CheckCircleOutlineIcon fontSize="large" />, tone: "success" },
+  AWAITING_PAYMENT: { icon: <ScheduleIcon fontSize="large" />, tone: "neutral" },
+  FAILED: { icon: <ErrorOutlineIcon fontSize="large" />, tone: "danger" },
+  EXPIRED: { icon: <ScheduleIcon fontSize="large" />, tone: "warning" },
 };
 
-/**
- * What the screen says once it has stopped asking (FUT-556).
- *
- * NOT an `OrderStatus`: the order really is still AWAITING_PAYMENT and may yet
- * settle — the scheduled reconciliation keeps asking the provider long after
- * this tab is gone. What ran out is the WAIT, not the order, and saying
- * otherwise would be the more expensive lie: a buyer told "não concluído" who
- * has in fact paid will either pay twice or call the store.
- *
- * So it leads with what is true and unglamorous — we have not heard yet — and
- * spends its remaining words on the one instruction that matters, which is not
- * to pay again.
- */
-const AWAITING_TIMED_OUT: Outcome = {
-  heading: "Ainda não recebemos a confirmação",
-  support:
-    "Se você já pagou, o pedido é confirmado assim que a operadora avisar — " +
-    "não pague de novo. Você pode fechar esta tela.",
-  icon: <ScheduleIcon fontSize="large" />,
-  tone: "warning",
+const OUTCOME_COPY_KEY: Record<OrderStatus, keyof Pick<
+  PaymentStatusCopy,
+  "paid" | "awaiting" | "failed" | "expired"
+>> = {
+  PAID: "paid",
+  AWAITING_PAYMENT: "awaiting",
+  FAILED: "failed",
+  EXPIRED: "expired",
 };
 
-const TONE_COLOR: Record<Outcome["tone"], string> = {
+const TONE_COLOR: Record<OutcomeVisual["tone"], string> = {
   success: "success.main",
   danger: "error.main",
   warning: "warning.main",
@@ -109,14 +81,22 @@ function orderReference(orderId: string): string {
 
 /** The headline block: icon, outcome, and one supporting line. */
 function OutcomeHero({
+  copy,
   status,
   timedOut = false,
 }: {
+  copy: PaymentStatusCopy;
   status: OrderStatus;
   timedOut?: boolean;
 }): JSX.Element {
   const { Text } = useCheckoutComponents();
-  const outcome = timedOut && status === "AWAITING_PAYMENT" ? AWAITING_TIMED_OUT : OUTCOME[status];
+  const timedOutWait = timedOut && status === "AWAITING_PAYMENT";
+  // The timed-out wait keeps AWAITING's neutral clock icon but WARNING's tone:
+  // the order is not resolved, and calm-but-alert is the visual for that.
+  const visual = timedOutWait
+    ? { icon: OUTCOME_VISUAL.AWAITING_PAYMENT.icon, tone: "warning" as const }
+    : OUTCOME_VISUAL[status];
+  const outcome = timedOutWait ? copy.awaitingTimedOut : copy[OUTCOME_COPY_KEY[status]];
   return (
     <Box
       // `payment-paid` is load-bearing for the storefront journeys — it is how
@@ -133,7 +113,7 @@ function OutcomeHero({
       }
       sx={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 1, textAlign: "center" }}
     >
-      <Box sx={{ color: TONE_COLOR[outcome.tone], display: "flex" }}>{outcome.icon}</Box>
+      <Box sx={{ color: TONE_COLOR[visual.tone], display: "flex" }}>{visual.icon}</Box>
       <Text variant="heading" size="md" weight="bold" as="h2">
         {outcome.heading}
       </Text>
@@ -165,10 +145,12 @@ function Fact({ label, value, testId }: { label: string; value: string; testId?:
  * outcome these facts are either untrue or not yet knowable.
  */
 function PaidFacts({
+  copy,
   totalLabel,
   orderId,
   buyerEmail,
 }: {
+  copy: PaymentStatusCopy;
   totalLabel: string;
   orderId?: string;
   buyerEmail?: string;
@@ -185,22 +167,24 @@ function PaidFacts({
         bgcolor: "action.hover",
       }}
     >
-      <Fact label="Valor pago" value={totalLabel} testId="payment-amount" />
+      <Fact label={copy.amountLabel} value={totalLabel} testId="payment-amount" />
       {orderId ? (
-        <Fact label="Pedido" value={`#${orderReference(orderId)}`} testId="payment-reference" />
+        <Fact label={copy.referenceLabel} value={`#${orderReference(orderId)}`} testId="payment-reference" />
       ) : null}
-      {buyerEmail ? <Fact label="Comprovante enviado para" value={buyerEmail} /> : null}
+      {buyerEmail ? <Fact label={copy.receiptEmailLabel} value={buyerEmail} /> : null}
     </Box>
   );
 }
 
 /** The next-action row: retry / regenerate for failures, always back-to-menu. */
 function StatusActions({
+  copy,
   status,
   onRetry,
   onRegenerate,
   onBackToMenu,
 }: {
+  copy: PaymentStatusCopy;
   status: OrderStatus;
   onRetry?: () => void;
   onRegenerate?: () => void;
@@ -211,12 +195,12 @@ function StatusActions({
     <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
       {status === "FAILED" && onRetry ? (
         <Button variant="solid" color="primary" size="lg" onClick={onRetry} dataTestId="payment-retry">
-          Tentar novamente
+          {copy.retryAction}
         </Button>
       ) : null}
       {status === "EXPIRED" && onRegenerate ? (
         <Button variant="solid" color="primary" size="lg" onClick={onRegenerate} dataTestId="payment-regenerate">
-          Gerar novo código
+          {copy.regenerateAction}
         </Button>
       ) : null}
       <Button
@@ -228,13 +212,14 @@ function StatusActions({
         onClick={onBackToMenu}
         dataTestId="payment-back-to-menu"
       >
-        Voltar ao cardápio
+        {copy.backAction}
       </Button>
     </Box>
   );
 }
 
 export function PaymentStatus({
+  copy,
   status,
   totalLabel,
   orderId,
@@ -245,6 +230,8 @@ export function PaymentStatus({
   paidExtra,
   awaitingTimedOut = false,
 }: {
+  /** Every sentence and label this screen renders — the HOST's words. */
+  copy: PaymentStatusCopy;
   status: OrderStatus | null;
   totalLabel: string;
   /** The created order, when there is one — absent before the charge is raised. */
@@ -278,10 +265,10 @@ export function PaymentStatus({
       data-timed-out={awaitingTimedOut ? "true" : undefined}
       sx={{ display: "flex", flexDirection: "column", gap: 3, alignItems: "stretch", py: 2 }}
     >
-      <OutcomeHero status={effective} timedOut={awaitingTimedOut} />
+      <OutcomeHero copy={copy} status={effective} timedOut={awaitingTimedOut} />
 
       {effective === "PAID" ? (
-        <PaidFacts totalLabel={totalLabel} orderId={orderId} buyerEmail={buyerEmail} />
+        <PaidFacts copy={copy} totalLabel={totalLabel} orderId={orderId} buyerEmail={buyerEmail} />
       ) : null}
 
       {effective === "PAID" ? paidExtra : null}
@@ -291,6 +278,7 @@ export function PaymentStatus({
       ) : null}
 
       <StatusActions
+        copy={copy}
         status={effective}
         onRetry={onRetry}
         onRegenerate={onRegenerate}

package/src/components/checkout/payments-unavailable.tsx

@@ -23,8 +23,16 @@ import { Box } from "@mui/material";
 import type { JSX } from "react";
 
 import { useCheckoutComponents } from "./ui";
+import type { PaymentsUnavailableCopy } from "./view-copy";
 
 interface PaymentsUnavailableProps {
+  /**
+   * Every sentence this screen can say — the HOST's words (see
+   * `./view-copy`). Until 6.0.0 the two remedies and the button were compiled
+   * in, in one application's Portuguese, and a host that dutifully passed the
+   * flows copy port still got them.
+   */
+  copy: PaymentsUnavailableCopy;
   /**
    * Whether THIS shopper can settle with a waiter — mesas on AND a mesa of
    * their own. Decides which remedy is offered.
@@ -37,6 +45,7 @@ interface PaymentsUnavailableProps {
 }
 
 export function PaymentsUnavailable({
+  copy,
   waiterAvailable,
   onCallWaiter,
   calling = false,
@@ -47,8 +56,8 @@ export function PaymentsUnavailable({
       <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }} data-testid="checkout-payments-disabled">
         <Alert
           variant="info"
-          title="Pagamento online indisponível"
-          description="Esta loja não recebe pagamentos pelo site. Combine o pagamento diretamente com a loja para concluir seu pedido."
+          title={copy.title}
+          description={copy.body}
           showIcon
         />
       </Box>
@@ -59,8 +68,8 @@ export function PaymentsUnavailable({
     <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }} data-testid="checkout-call-waiter">
       <Alert
         variant="info"
-        title="Pagamento com o garçom"
-        description="Esta loja não recebe pagamentos pelo site. Chame o garçom para fechar a conta na mesa."
+        title={copy.remedyTitle}
+        description={copy.remedyBody}
         showIcon
       />
       {onCallWaiter ? (
@@ -71,7 +80,7 @@ export function PaymentsUnavailable({
           onClick={onCallWaiter}
           dataTestId="checkout-call-waiter-button"
         >
-          {calling ? "Chamando..." : "Chamar garçom"}
+          {calling ? copy.callingAction : copy.callAction}
         </Button>
       ) : null}
     </Box>

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

@@ -0,0 +1,74 @@
+import type {
+  CheckoutViewCopy,
+  PaymentsUnavailableCopy,
+  PaymentStatusCopy,
+} from "./view-copy";
+
+/**
+ * The pt-BR pack — the exact sentences these views compiled in until 6.0.0,
+ * now NAMED exports a host passes by hand, never defaults. The filename is
+ * what exempts this file from the copy-portability gate: Portuguese may ship,
+ * it may not be silent.
+ */
+export const PT_BR_PAYMENTS_UNAVAILABLE_COPY: PaymentsUnavailableCopy = {
+  title: "Pagamento online indisponível",
+  body: "Esta loja não recebe pagamentos pelo site. Combine o pagamento diretamente com a loja para concluir seu pedido.",
+  remedyTitle: "Pagamento com o garçom",
+  remedyBody: "Esta loja não recebe pagamentos pelo site. Chame o garçom para fechar a conta na mesa.",
+  callAction: "Chamar garçom",
+  callingAction: "Chamando...",
+};
+
+export const PT_BR_PAYMENT_STATUS_COPY: PaymentStatusCopy = {
+  paid: {
+    heading: "Pedido confirmado",
+    support: "Recebemos seu pagamento e já registramos o pedido.",
+  },
+  awaiting: {
+    heading: "Confirmando seu pagamento",
+    support: "Isso costuma levar alguns segundos. Pode deixar esta tela aberta.",
+  },
+  failed: {
+    // Said plainly and first: the fear on this screen is having been charged
+    // for an order that failed.
+    heading: "Pagamento não concluído",
+    support: "Nenhum valor foi cobrado. Você pode tentar novamente.",
+  },
+  expired: {
+    heading: "O código expirou",
+    support: "Nenhum valor foi cobrado. Gere um novo código para continuar.",
+  },
+  awaitingTimedOut: {
+    heading: "Ainda não recebemos a confirmação",
+    support:
+      "Se você já pagou, o pedido é confirmado assim que a operadora avisar — " +
+      "não pague de novo. Você pode fechar esta tela.",
+  },
+  retryAction: "Tentar novamente",
+  regenerateAction: "Gerar novo código",
+  backAction: "Voltar ao cardápio",
+  amountLabel: "Valor pago",
+  referenceLabel: "Pedido",
+  receiptEmailLabel: "Comprovante enviado para",
+};
+
+export const PT_BR_CHECKOUT_VIEW_COPY: CheckoutViewCopy = {
+  steps: {
+    dados: "Dados",
+    payment: "Pagamento",
+    status: "Confirmação",
+  },
+  dados: {
+    saveProfile: "Salvar meus dados para a próxima compra",
+    cannotContinueTitle: "Não foi possível continuar",
+    continueAction: "Continuar",
+    secureNotice: "Pagamento seguro",
+    keepShopping: "Continuar comprando",
+    back: "Voltar",
+  },
+  emptyCart: {
+    title: "Seu carrinho está vazio.",
+    action: "Ver cardápio",
+  },
+  status: PT_BR_PAYMENT_STATUS_COPY,
+};

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

@@ -0,0 +1,94 @@
+/**
+ * Every string the legacy checkout views render — required props, with NO
+ * defaults, deliberately (the payments extraction's own doctrine, FUT-760):
+ * a default in the origin host's language reads as finished to the next host
+ * right up until a buyer sees it. These three views proved the point — the
+ * flows factory's copy port existed, was REQUIRED, declared
+ * `unavailableWithRemedyTitle` and `emptyCartAction`, and the views simply
+ * never read it, so a host that dutifully passed copy still rendered another
+ * product's voice.
+ *
+ * A pt-BR host imports {@link PT_BR_CHECKOUT_VIEW_COPY} from `./pt-BR` (the
+ * package root re-exports it) and passes it by hand — one reviewable line,
+ * never a silence.
+ */
+
+/** The screen shown when the store cannot take money online. */
+export interface PaymentsUnavailableCopy {
+  /** No remedy: the store simply does not charge online. */
+  title: string;
+  body: string;
+  /** A remedy exists (the origin host: the waiter; a clinic: the front desk). */
+  remedyTitle: string;
+  remedyBody: string;
+  /** The remedy button, idle and in flight. */
+  callAction: string;
+  callingAction: string;
+}
+
+/** The stepper's three labels, in flow order. */
+export interface CheckoutStepperCopy {
+  dados: string;
+  payment: string;
+  status: string;
+}
+
+/** The buyer-details step: its bar, its refusal, and the slim header. */
+export interface DadosStepCopy {
+  /** The save-my-details checkbox. */
+  saveProfile: string;
+  /** The refusal Alert's title (its body is the server's own sentence). */
+  cannotContinueTitle: string;
+  /** The sticky bar's one action. */
+  continueAction: string;
+  /**
+   * The reassurance caption under it. OPTIONAL, on the flows port's
+   * `secureNotice` precedent: a host that has not written the sentence gets
+   * NO caption rather than someone else's.
+   */
+  secureNotice?: string;
+  /** The slim header's back control, on Dados and after it. */
+  keepShopping: string;
+  back: string;
+}
+
+/** Nothing to check out (cart mode only). */
+export interface EmptyCartCopy {
+  title: string;
+  action: string;
+}
+
+/** One outcome's headline and its single supporting line. */
+export interface StatusOutcomeCopy {
+  heading: string;
+  support: string;
+}
+
+/**
+ * The confirmation screen. Icons and tones stay the component's — they are
+ * visual grammar, not language; every SENTENCE is the host's, including the
+ * timed-out wait's "do not pay again", which is the one instruction on this
+ * screen that matters (FUT-556).
+ */
+export interface PaymentStatusCopy {
+  paid: StatusOutcomeCopy;
+  awaiting: StatusOutcomeCopy;
+  failed: StatusOutcomeCopy;
+  expired: StatusOutcomeCopy;
+  awaitingTimedOut: StatusOutcomeCopy;
+  retryAction: string;
+  regenerateAction: string;
+  backAction: string;
+  /** The paid receipt's three row labels. */
+  amountLabel: string;
+  referenceLabel: string;
+  receiptEmailLabel: string;
+}
+
+/** What the legacy `CheckoutFlow` itself renders and must be handed. */
+export interface CheckoutViewCopy {
+  steps: CheckoutStepperCopy;
+  dados: DadosStepCopy;
+  emptyCart: EmptyCartCopy;
+  status: PaymentStatusCopy;
+}

package/src/flows/copy.ts

@@ -18,8 +18,20 @@
  * the port and nothing else.
  */
 
+import type { CheckoutViewCopy } from "../components/checkout/view-copy";
+
+export type { CheckoutViewCopy };
+
 /** Every buyer-facing string the factory's own screens render. */
 export interface CheckoutCopyFE {
+  /**
+   * Everything the wrapped `CheckoutFlow` itself renders — stepper labels,
+   * the Dados step, the empty cart, the whole confirmation screen. FUT-741
+   * scoped those screens out as "already carried their own product copy";
+   * that copy was one application's Portuguese, so the scope-out WAS the
+   * leak. A pt-BR host passes `PT_BR_CHECKOUT_VIEW_COPY` here by hand.
+   */
+  views: CheckoutViewCopy;
   /** No provider connected AND no host remedy: the store simply does not charge. */
   unavailableTitle: string;
   unavailableBody: string;
@@ -47,11 +59,23 @@ export interface CheckoutCopyFE {
    * part only a host can own.
    */
   returnTimedOut?: string;
-  /** Nothing to check out (cart mode only). */
-  emptyCartTitle: string;
-  emptyCartAction: string;
   /** The Dados step's primary action. */
   continueAction: string;
+  /**
+   * The reassurance caption under that action.
+   *
+   * The screen rendered "Pagamento seguro" inline — one line below a sibling
+   * reading `runtime.copy.continueAction`, so the port was already there and
+   * already required; this string simply never asked it. That is the shape
+   * FUT-760 left behind: defaults removed from the CONFIG surface without the
+   * rendering being rewired, so a host that dutifully passes copy still gets
+   * the origin product's voice.
+   *
+   * OPTIONAL, on the {@link CheckoutCopyFE.returnTimedOut} precedent: a host
+   * that has not written the sentence gets NO caption rather than someone
+   * else's. Reassurance nobody chose is worth less than silence.
+   */
+  secureNotice?: string;
   /** The add-card screen (FUT-183): putting a card on file outside a purchase. */
   addCardTitle: string;
   addCardAction: string;

package/src/flows/create-payment-flows.tsx

@@ -85,6 +85,7 @@ function buildCheckout(
 
     return (
       <CheckoutFlow
+        copy={runtime.copy.views}
         cart={cart}
         createOrder={createOrder}
         saveBuyerContact={ports.saveBuyerContact}

package/src/flows/screens-buyer.tsx

@@ -87,9 +87,11 @@ function buildBuyerDetails(runtime: FlowsRuntime): CheckoutScreens["BuyerDetails
             {runtime.copy.continueAction}
           </Button>
         </Box>
-        <Text variant="caption" size="xs" color="secondary" as="p">
-          Pagamento seguro
-        </Text>
+        {runtime.copy.secureNotice ? (
+          <Text variant="caption" size="xs" color="secondary" as="p">
+            {runtime.copy.secureNotice}
+          </Text>
+        ) : null}
       </Box>
     );
   }
@@ -155,7 +157,7 @@ function buildEmptyCart(runtime: FlowsRuntime): CheckoutScreens["EmptyCart"] {
   return function EmptyCart() {
     return (
       <FlowsShell runtime={runtime}>
-        <EmptyCartView onBack={runtime.config.ports.exitToCatalog} />
+        <EmptyCartView copy={runtime.copy.views.emptyCart} onBack={runtime.config.ports.exitToCatalog} />
       </FlowsShell>
     );
   };

package/src/flows/screens-pay.tsx

@@ -82,6 +82,7 @@ function buildPaymentStatus(runtime: FlowsRuntime): CheckoutScreens["PaymentStat
     return (
       <FlowsShell runtime={runtime}>
         <PaymentStatusView
+          copy={runtime.copy.views.status}
           status={status}
           totalLabel={payable?.totalLabel ?? ""}
           orderId={payable?.orderId}

package/src/index.ts

@@ -85,6 +85,20 @@ export {
 } from './components/checkout/transport';
 export { type CheckoutHostPorts } from './components/checkout/use-checkout-controller';
 export { PaymentsUnavailable } from './components/checkout/payments-unavailable';
+export type {
+  CheckoutStepperCopy,
+  CheckoutViewCopy,
+  DadosStepCopy,
+  EmptyCartCopy,
+  PaymentStatusCopy,
+  PaymentsUnavailableCopy,
+  StatusOutcomeCopy,
+} from './components/checkout/view-copy';
+export {
+  PT_BR_CHECKOUT_VIEW_COPY,
+  PT_BR_PAYMENTS_UNAVAILABLE_COPY,
+  PT_BR_PAYMENT_STATUS_COPY,
+} from './components/checkout/pt-BR';
 export { fetchCheckoutConfig } from './components/checkout/client';
 /**
  * The `sessionStorage` key the hosted-checkout return leg parks the raised