@12-apps/payments-frontend 3.34.4 → 3.36.0

package/src/components/checkout/pix-pane.tsx

@@ -1,29 +1,27 @@
 import { Box } from "@mui/material";
-import { useId, type JSX, type KeyboardEvent, type ReactNode } from "react";
+import type { JSX, ReactNode } from "react";
 
 import { useCheckoutCopy } from "./copy-context";
 import { ContentCopyIcon } from "./icons";
+import { StickyPayBar, useCheckoutLayout } from "./payment-step-layout";
 import { Emphasized, PIX_WIDE, PixQr } from "./pix-parts";
 import type { PixCharge } from "./types";
 import { useCheckoutComponents } from "./ui";
 
 /**
- * The PIX pane before a copy (the 2026-10-06 Pix redesign).
+ * The PIX pane before a copy (the 2026-10-06 Pix redesign, laid out again by
+ * the 2026-10-11 Pagamento redesign, FUT-3525).
  *
- * Narrow — a phone — it is two tabs, "Copia e cola" first: the buyer pays on
- * the phone they are holding and cannot scan a QR drawn on that same screen,
- * so the code and its full-width button come before anything else. Wide — a
- * desktop — the same two panels stand side by side with "ou" between them:
- * the QR, for the phone in the buyer's hand, and the code, for their internet
- * banking.
+ * Narrow — a phone — the code and its button come first and the QR follows,
+ * "Ou pague de outro aparelho": the buyer pays on the phone they are holding
+ * and cannot scan a QR drawn on that same screen. Wide — a computer — the two
+ * stand side by side, the QR on the left. The Copia/QR tabs this replaced hid
+ * the QR behind a tap the phone's own buyer never needed.
  *
  * Both panels are always mounted and the switch is CSS (`PIX_WIDE`), so the
- * layout needs no measurement: the first paint is already right, and the QR is
- * in the document whichever tab is showing.
+ * layout needs no measurement: the first paint is already right.
  */
 
-export type PixTab = "copy" | "qr";
-
 /** A narrow-only element: shown under the container query's threshold. */
 const NARROW_ONLY = { [PIX_WIDE]: { display: "none" } } as const;
 
@@ -32,120 +30,82 @@ function wideOnly(display: string) {
   return { display: "none", [PIX_WIDE]: { display } } as const;
 }
 
-/** A tab panel: shown when its tab is picked, and always in the wide layout. */
-function panelSx(shown: boolean) {
-  return {
-    display: shown ? "flex" : "none",
-    flexDirection: "column",
-    gap: 1.75,
-    minWidth: 0,
-    [PIX_WIDE]: { display: "flex" },
-  } as const;
-}
-
-/** The small capitals over each wide column. Uppercase by CSS only. */
-function ColumnHeading({ children, center }: { children: ReactNode; center?: boolean }): JSX.Element {
+/** The small capitals over each column. Uppercase by CSS only. */
+function ColumnHeading({
+  children,
+  center,
+  sx,
+}: {
+  children: ReactNode;
+  center?: boolean;
+  sx?: object;
+}): JSX.Element {
   const { Text } = useCheckoutComponents();
   return (
-    <Box sx={{ ...wideOnly("block"), textAlign: center ? "center" : "left" }}>
-      <Text variant="body" size="xs" weight="bold" color="secondary" as="p" style={{ textTransform: "uppercase", letterSpacing: "0.04em", margin: 0 }}>
+    <Box sx={{ textAlign: center ? "center" : "left", ...sx }}>
+      <Text
+        variant="body"
+        size="xs"
+        weight="bold"
+        color="secondary"
+        as="p"
+        style={{
+          textTransform: "uppercase",
+          letterSpacing: "0.04em",
+          margin: 0,
+        }}
+      >
         {children}
       </Text>
     </Box>
   );
 }
 
-const TAB_ORDER: readonly PixTab[] = ["copy", "qr"];
-
-/** The ARIA tabs pattern's keys: arrows move and select, Home and End jump. */
-function nextTab(key: string, tab: PixTab): PixTab | null {
-  const at = TAB_ORDER.indexOf(tab);
-  if (key === "ArrowRight") return TAB_ORDER[(at + 1) % TAB_ORDER.length] ?? null;
-  if (key === "ArrowLeft") return TAB_ORDER[(at + TAB_ORDER.length - 1) % TAB_ORDER.length] ?? null;
-  if (key === "Home") return TAB_ORDER[0] ?? null;
-  if (key === "End") return TAB_ORDER[TAB_ORDER.length - 1] ?? null;
-  return null;
-}
-
-/** DOM ids for the tabs and panels, unique per pane (two panes on one page must not collide). */
-function paneIds(base: string, id: PixTab): { tab: string; panel: string } {
-  return { tab: `${base}-tab-${id}`, panel: `${base}-panel-${id}` };
-}
-
-function PixTabs({ tab, onTab, idBase }: { tab: PixTab; onTab: (tab: PixTab) => void; idBase: string }): JSX.Element {
-  const copy = useCheckoutCopy().screens.pix;
-  const tabs: { id: PixTab; label: string }[] = [
-    { id: "copy", label: copy.copyPasteTab },
-    { id: "qr", label: copy.qrTab },
-  ];
-  const onKeyDown = (event: KeyboardEvent<HTMLElement>): void => {
-    const next = nextTab(event.key, tab);
-    if (!next) return;
-    event.preventDefault();
-    onTab(next);
-    document.getElementById(paneIds(idBase, next).tab)?.focus();
-  };
-  return (
-    <Box
-      role="tablist"
-      aria-label={copy.tabsLabel}
-      onKeyDown={onKeyDown}
-      sx={{ display: "grid", gridTemplateColumns: "repeat(2, minmax(0, 1fr))", borderBottom: "1px solid", borderColor: "divider", ...NARROW_ONLY }}
-    >
-      {tabs.map((item) => {
-        const selected = item.id === tab;
-        return (
-          <Box
-            key={item.id}
-            component="button"
-            type="button"
-            role="tab"
-            id={paneIds(idBase, item.id).tab}
-            aria-selected={selected}
-            aria-controls={paneIds(idBase, item.id).panel}
-            tabIndex={selected ? 0 : -1}
-            data-testid={`pix-tab-${item.id}`}
-            onClick={() => onTab(item.id)}
-            sx={{
-              minHeight: 44,
-              border: 0,
-              borderBottom: "3px solid",
-              borderColor: selected ? "primary.main" : "transparent",
-              bgcolor: "transparent",
-              font: "inherit",
-              fontSize: "0.875rem",
-              fontWeight: selected ? 700 : 600,
-              color: selected ? "text.primary" : "text.secondary",
-              cursor: "pointer",
-              "&:focus-visible": { outline: "2px solid", outlineColor: "primary.main", outlineOffset: -2 },
-            }}
-          >
-            {item.label}
-          </Box>
-        );
-      })}
-    </Box>
-  );
-}
-
-function QrPanel({ pix, shown, idBase }: { pix: PixCharge; shown: boolean; idBase: string }): JSX.Element {
+function QrPanel({ pix }: { pix: PixCharge }): JSX.Element {
   const { Text } = useCheckoutComponents();
   const copy = useCheckoutCopy().screens.pix;
   return (
     <Box
-      id={paneIds(idBase, "qr").panel}
-      role="tabpanel"
-      aria-labelledby={paneIds(idBase, "qr").tab}
+      data-testid="pix-qr-panel"
       sx={{
-        ...panelSx(shown),
+        display: "flex",
+        flexDirection: "column",
         alignItems: "center",
+        gap: 1.25,
+        minWidth: 0,
         textAlign: "center",
-        [PIX_WIDE]: { display: "flex", p: 3, borderRadius: 1.75, border: "1px solid", borderColor: "divider", bgcolor: "action.hover" },
+        pt: 2,
+        borderTop: "1px solid",
+        borderColor: "divider",
+        [PIX_WIDE]: {
+          gap: 1.75,
+          p: 3,
+          borderTop: "1px solid",
+          borderRadius: 1.75,
+          border: "1px solid",
+          borderColor: "divider",
+          bgcolor: "action.hover",
+        },
       }}
     >
-      <ColumnHeading center>{copy.qrHeading}</ColumnHeading>
-      <Box sx={{ "& svg": { width: 200, height: 200 }, [PIX_WIDE]: { "& svg": { width: 232, height: 232 } } }}>
-        <PixQr payload={pix.copyPaste} size={232} alt={copy.qrAlt} testId="pix-qr" />
+      <ColumnHeading center sx={NARROW_ONLY}>
+        {copy.otherDeviceHeading}
+      </ColumnHeading>
+      <ColumnHeading center sx={wideOnly("block")}>
+        {copy.qrHeading}
+      </ColumnHeading>
+      <Box
+        sx={{
+          "& svg": { width: 168, height: 168 },
+          [PIX_WIDE]: { "& svg": { width: 232, height: 232 } },
+        }}
+      >
+        <PixQr
+          payload={pix.copyPaste}
+          size={232}
+          alt={copy.qrAlt}
+          testId="pix-qr"
+        />
       </Box>
       <Text variant="body" size="sm" color="secondary" as="p" style={{ margin: 0, maxWidth: 280 }}>
         <Box component="span" sx={NARROW_ONLY}>{copy.qrTabCaption}</Box>
@@ -157,11 +117,62 @@ function QrPanel({ pix, shown, idBase }: { pix: PixCharge; shown: boolean; idBas
   );
 }
 
-function CopyPanel({ pix, shown, onCopy, idBase }: { pix: PixCharge; shown: boolean; onCopy: () => void; idBase: string }): JSX.Element {
-  const { Button, Text } = useCheckoutComponents();
+/**
+ * The one action on the pane: the prototype's 56px bar (52 wide), whatever
+ * the host's lg is — and on the phone's Pagamento step, the sticky pay bar's
+ * button (FUT-3525).
+ */
+function CopyButton({ onCopy }: { onCopy: () => void }): JSX.Element {
+  const { Button } = useCheckoutComponents();
+  const copy = useCheckoutCopy().screens.pix;
+  return (
+    <StickyPayBar>
+      <Box
+        sx={{
+          "& > *": { minHeight: 56 },
+          "& > *, & > * *": { fontWeight: 700 },
+          [PIX_WIDE]: { "& > *": { minHeight: 52 } },
+        }}
+      >
+        <Button
+          variant="solid"
+          color="primary"
+          size="lg"
+          fullWidth
+          icon={<ContentCopyIcon fontSize="small" />}
+          onClick={onCopy}
+          dataTestId="pix-copy"
+        >
+          {copy.copyAction}
+        </Button>
+      </Box>
+    </StickyPayBar>
+  );
+}
+
+function CopyPanel({
+  pix,
+  onCopy,
+  inPanel,
+}: {
+  pix: PixCharge;
+  onCopy: () => void;
+  /** False when the phone's pay bar carries the button, at the pane's foot. */
+  inPanel: boolean;
+}): JSX.Element {
+  const { Text } = useCheckoutComponents();
   const copy = useCheckoutCopy().screens.pix;
   return (
-    <Box id={paneIds(idBase, "copy").panel} role="tabpanel" aria-labelledby={paneIds(idBase, "copy").tab} sx={{ ...panelSx(shown), [PIX_WIDE]: { display: "flex", justifyContent: "center" } }}>
+    <Box
+      data-testid="pix-copy-panel"
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        gap: 1.75,
+        minWidth: 0,
+        [PIX_WIDE]: { justifyContent: "center" },
+      }}
+    >
       <ColumnHeading>{copy.copyPasteHeading}</ColumnHeading>
       {/*
         The box IS the code's frame, so whatever the host draws for inline code
@@ -183,14 +194,15 @@ function CopyPanel({ pix, shown, onCopy, idBase }: { pix: PixCharge; shown: bool
           {pix.copyPaste}
         </Text>
       </Box>
-      {/* The one action on the pane: the prototype's 56px bar (52 wide), whatever the host's lg is. */}
-      <Box sx={{ "& > *": { minHeight: 56 }, "& > *, & > * *": { fontWeight: 700 }, [PIX_WIDE]: { "& > *": { minHeight: 52 } } }}>
-        <Button variant="solid" color="primary" size="lg" fullWidth icon={<ContentCopyIcon fontSize="small" />} onClick={onCopy} dataTestId="pix-copy">
-          {copy.copyAction}
-        </Button>
-      </Box>
-      <Text variant="body" size="sm" color="secondary" as="p" style={{ margin: 0 }}>
-        <Box component="span" sx={{ display: "block", textAlign: "center", ...NARROW_ONLY }}>
+      {inPanel ? <CopyButton onCopy={onCopy} /> : null}
+      <Text
+        variant="body"
+        size="sm"
+        color="secondary"
+        as="p"
+        style={{ margin: 0 }}
+      >
+        <Box component="span" sx={{ display: "block", ...NARROW_ONLY }}>
           <Emphasized text={copy.copyPasteHint} />
         </Box>
         <Box component="span" sx={wideOnly("block")}>
@@ -201,38 +213,51 @@ function CopyPanel({ pix, shown, onCopy, idBase }: { pix: PixCharge; shown: bool
   );
 }
 
-/** The word between the wide layout's two columns, on a hairline. */
-function OrDivider(): JSX.Element {
-  const { Text } = useCheckoutComponents();
-  const copy = useCheckoutCopy().screens.pix;
-  const line = { width: "1px", height: 56, bgcolor: "divider" };
-  return (
-    <Box aria-hidden sx={{ ...wideOnly("flex"), flexDirection: "column", alignItems: "center", alignSelf: "center", gap: 1 }}>
-      <Box sx={line} />
-      <Text variant="body" size="xs" weight="semibold" color="secondary" as="span">
-        {copy.or}
-      </Text>
-      <Box sx={line} />
-    </Box>
-  );
-}
-
-export function PixPane({ pix, tab, onTab, onCopy }: { pix: PixCharge; tab: PixTab; onTab: (tab: PixTab) => void; onCopy: () => void }): JSX.Element {
-  const idBase = useId();
+/**
+ * The pane itself. Narrow, the code comes first — the buyer pays on the phone
+ * they are holding and cannot scan a QR drawn on that same screen — and the
+ * QR follows under a hairline, for paying from another device. Wide, the two
+ * stand side by side: the QR for the phone in the buyer's hand, the code for
+ * their internet banking.
+ */
+export function PixPane({
+  pix,
+  onCopy,
+}: {
+  pix: PixCharge;
+  onCopy: () => void;
+}): JSX.Element {
+  // The phone's Pagamento step pins the button to the bottom of the screen
+  // (FUT-3525), so it goes LAST in the pane — under the QR — where a sticky
+  // bar rests when the page is scrolled to its end.
+  const layout = useCheckoutLayout();
+  const barAtFoot = layout !== null && !layout.wide;
   return (
-    <>
-      <PixTabs tab={tab} onTab={onTab} idBase={idBase} />
+    <Box
+      sx={{
+        display: "grid",
+        gap: 2.5,
+        [PIX_WIDE]: {
+          gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
+          gap: 4,
+          alignItems: "stretch",
+        },
+      }}
+    >
+      <Box sx={{ minWidth: 0, [PIX_WIDE]: { order: 2 } }}>
+        <CopyPanel pix={pix} onCopy={onCopy} inPanel={!barAtFoot} />
+      </Box>
       <Box
         sx={{
-          display: "grid",
-          gap: 2,
-          [PIX_WIDE]: { gridTemplateColumns: "minmax(0, 1fr) auto minmax(0, 1fr)", gap: 4, alignItems: "stretch" },
+          minWidth: 0,
+          display: "flex",
+          flexDirection: "column",
+          [PIX_WIDE]: { order: 1 },
         }}
       >
-        <QrPanel pix={pix} shown={tab === "qr"} idBase={idBase} />
-        <OrDivider />
-        <CopyPanel pix={pix} shown={tab === "copy"} onCopy={onCopy} idBase={idBase} />
+        <QrPanel pix={pix} />
       </Box>
-    </>
+      {barAtFoot ? <CopyButton onCopy={onCopy} /> : null}
+    </Box>
   );
 }

package/src/components/checkout/pix-parts.tsx

@@ -9,11 +9,13 @@ import QRCode from "react-qr-code";
  */
 
 /**
- * The pane switches from tabs to two columns by its OWN width, never the
- * window's: the same checkout is mounted in a 720px column, a 1040px one and a
- * phone, and only the room it was given says whether two columns fit.
+ * The pane switches from one column to two by its OWN width, never the
+ * window's: the same checkout is mounted beside an order summary, alone in a
+ * column and on a phone, and only the room it was given says whether two
+ * columns fit. 680px is what the Pagamento step's payment column leaves it
+ * beside the summary card (FUT-3525).
  */
-export const PIX_WIDE = "@container pixpane (min-width: 760px)";
+export const PIX_WIDE = "@container pixpane (min-width: 680px)";
 
 /** The container the {@link PIX_WIDE} query reads. */
 export const PIX_CONTAINER = { containerType: "inline-size", containerName: "pixpane" } as const;

package/src/components/checkout/pix-view.tsx

@@ -1,9 +1,10 @@
 import { Box } from "@mui/material";
-import { useEffect, useMemo, useRef, useState, type JSX } from "react";
+import { useEffect, useMemo, useRef, type JSX } from "react";
 
 import { useCheckoutCopy } from "./copy-context";
 import { PixAfterCopy } from "./pix-after-copy";
-import { PixPane, type PixTab } from "./pix-pane";
+import { PixPane } from "./pix-pane";
+import { useCheckoutLayout } from "./payment-step-layout";
 import { PIX_CONTAINER, PIX_WIDE, useClipboardCopy } from "./pix-parts";
 import { usePixStage } from "./pix-stage";
 import type { PixPaneCopy, SettlingCopy } from "./screens-copy";
@@ -202,11 +203,27 @@ function usePixPolling(order: CheckoutOrder, onResolved: (status: OrderStatus) =
   return polling;
 }
 
-function PixBody({ order, pix, poll }: { order: CheckoutOrder; pix: PixCharge; poll: ReturnType<typeof usePixPolling> }): JSX.Element {
+/**
+ * The pane's title, at the prototype's scale: 20px, 26px wide — left out
+ * inside the Pagamento step, where the "Pix" tab names the pane (FUT-3525).
+ */
+function PixTitle(): JSX.Element | null {
   const { Text } = useCheckoutComponents();
+  const copy = useCheckoutCopy().screens.pix;
+  const inStep = useCheckoutLayout() !== null;
+  if (inStep) return null;
+  return (
+    <Box sx={{ "&& > *": { fontSize: "1.25rem", lineHeight: 1.25 }, [PIX_WIDE]: { "&& > *": { fontSize: "1.625rem" } } }}>
+      <Text variant="heading" size="md" weight="bold" as="h2" style={{ margin: 0 }}>
+        {copy.heading}
+      </Text>
+    </Box>
+  );
+}
+
+function PixBody({ order, pix, poll }: { order: CheckoutOrder; pix: PixCharge; poll: ReturnType<typeof usePixPolling> }): JSX.Element {
   const copy = useCheckoutCopy().screens.pix;
   const stage = usePixStage();
-  const [tab, setTab] = useState<PixTab>("copy");
   const { copy: writeClipboard, justCopied } = useClipboardCopy(pix.copyPaste);
   // Leaving the payment step (a method switch, a terminal status) ends the
   // after-copy face with it: the next pane starts on the code.
@@ -240,10 +257,8 @@ function PixBody({ order, pix, poll }: { order: CheckoutOrder; pix: PixCharge; p
         deadline={time}
         justCopied={justCopied}
         onCopyAgain={() => void writeClipboard()}
-        onShowQr={() => {
-          setTab("qr");
-          setAfterCopy(false);
-        }}
+        // Back to the pane, where the QR is always on screen now.
+        onShowQr={() => setAfterCopy(false)}
         onPreferCard={stage.preferCard}
         footer={footerLine(copy.verifying)}
       />
@@ -251,16 +266,9 @@ function PixBody({ order, pix, poll }: { order: CheckoutOrder; pix: PixCharge; p
   }
   return (
     <>
-      {/* The pane's title, at the prototype's scale: 20px, 26px wide. */}
-      <Box sx={{ "&& > *": { fontSize: "1.25rem", lineHeight: 1.25 }, [PIX_WIDE]: { "&& > *": { fontSize: "1.625rem" } } }}>
-        <Text variant="heading" size="md" weight="bold" as="h2" style={{ margin: 0 }}>
-          {copy.heading}
-        </Text>
-      </Box>
+      <PixTitle />
       <PixPane
         pix={pix}
-        tab={tab}
-        onTab={setTab}
         onCopy={() => {
           // Only a copy the clipboard TOOK moves on: the next face opens on
           // "Código Pix copiado", and a failed write leaves the code on screen
@@ -287,6 +295,9 @@ export function PixView({
   const { Text } = useCheckoutComponents();
   const copy = useCheckoutCopy().screens.pix;
   const poll = usePixPolling(order, onResolved, pollIntervalMs);
+  // The Pagamento step's panel is the card there (FUT-3525); drawing another
+  // inside it would be a box in a box.
+  const inStep = useCheckoutLayout() !== null;
   const pix = order.pix;
   if (!pix) {
     return (
@@ -307,7 +318,16 @@ export function PixView({
           display: "flex",
           flexDirection: "column",
           gap: 2,
-          [PIX_WIDE]: { gap: 2.5, p: 3.5, bgcolor: "background.paper", border: "1px solid", borderColor: "divider", borderRadius: 2 },
+          [PIX_WIDE]: inStep
+            ? { gap: 2.5 }
+            : {
+                gap: 2.5,
+                p: 3.5,
+                bgcolor: "background.paper",
+                border: "1px solid",
+                borderColor: "divider",
+                borderRadius: 2,
+              },
         }}
       >
         <PixBody order={order} pix={pix} poll={poll} />

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

@@ -133,17 +133,22 @@ export interface PixPaneCopy {
   preferCardAction: string;
   /** The after-copy state's poll line. */
   verifying: string;
-  /** The narrow layout's tabs: their group name and the two labels. */
+  /** @deprecated Unread since FUT-3525, which took the narrow layout's Copia/QR tabs out. */
   tabsLabel: string;
+  /** @deprecated Unread since FUT-3525 — see {@link PixPaneCopy.tabsLabel}. */
   copyPasteTab: string;
+  /** @deprecated Unread since FUT-3525 — see {@link PixPaneCopy.tabsLabel}. */
   qrTab: string;
-  /** The wide layout's two column headings and the word between them. */
+  /** The wide layout's two column headings. */
   qrHeading: string;
+  /** The phone's heading over the QR, under the code (FUT-3525). */
+  otherDeviceHeading: string;
   copyPasteHeading: string;
+  /** @deprecated Unread since FUT-3525, which took the "ou" between the wide columns out. */
   or: string;
   /** Under the QR in the wide layout; `**…**` marks the bold span. */
   qrInstructions: string;
-  /** Under the QR in the narrow layout's QR tab. */
+  /** Under the QR in the narrow layout (a tab until FUT-3525, hence the name). */
   qrTabCaption: string;
   /** Under the copy button: narrow and wide. `**…**` marks the bold span. */
   copyPasteHint: string;
@@ -266,6 +271,21 @@ export interface HostedHandoverCopy {
   preparing: string;
 }
 
+/**
+ * The cart changed after this payment was prepared (FUT-1139): another tab, a
+ * price the store moved, a line it stopped selling. The charge prepared for the
+ * OLD basket must not be the one paid, so the step says so and offers the one
+ * control that brings the payment up to date.
+ */
+export interface CartChangedCopy {
+  heading: string;
+  support: string;
+  /** Re-prepares the payment for the cart as it stands now. */
+  refreshAction: string;
+  /** The heading over a refresh that failed; the host's own sentence is the body. */
+  refreshFailed: string;
+}
+
 /** What the browser says when the wire itself failed. */
 export interface CheckoutTransportCopy {
   /** A refusal whose envelope carried no sentence of its own. */
@@ -286,6 +306,29 @@ export interface CheckoutValidationCopy {
   required: string;
 }
 
+/**
+ * The Pagamento step's own frame (FUT-3525): the order summary beside the
+ * payment on a computer, and the phone's header, total and pay bar.
+ */
+export interface PaymentLayoutCopy {
+  /** Over the method tabs on a computer. */
+  payHeading: string;
+  /** The summary card's title. */
+  summaryTitle: string;
+  /** The summary's and the pay bar's label over the amount. */
+  total: string;
+  /** The phone's caption over the big amount — "Total a pagar · 2 itens". */
+  totalDueCaption(items: number): string;
+  /** One cart line in the summary — "2× X-Burger". */
+  lineLabel(quantity: number, name: string): string;
+  /** The phone's payer chip, for a CPF the store already holds — "CPF ✓". A typed one is shown masked. */
+  taxIdOnFileShort: string;
+  /** The address control's accessible name; its visible word is {@link PayerSummaryCopy.changeAction}. */
+  changeAddress: string;
+  /** The phone's step line — "Etapa 2 de 3 · Pagamento". */
+  stepProgress(step: number, steps: number, label: string): string;
+}
+
 /** Everything above, in the shape the checkout context carries. */
 export interface CheckoutScreensCopy {
   method: MethodPickerCopy;
@@ -293,11 +336,13 @@ export interface CheckoutScreensCopy {
   pix: PixPaneCopy;
   card: CardPaneCopy;
   payer: PayerSummaryCopy;
+  layout: PaymentLayoutCopy;
   error: PaymentErrorCopy;
   wallet: WalletCopy;
   hosted: HostedHandoverCopy;
   transport: CheckoutTransportCopy;
   validation: CheckoutValidationCopy;
+  cartChanged: CartChangedCopy;
   /** The step wrapper's own wait, while the charge is being raised. */
   generatingPayment: string;
   /**

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

@@ -54,6 +54,7 @@ export const EN_US_CHECKOUT_SCREENS_COPY: CheckoutScreensCopy = {
     copyPasteTab: 'Copy and paste',
     qrTab: 'QR code',
     qrHeading: 'On your phone',
+    otherDeviceHeading: 'Or pay from another device',
     copyPasteHeading: 'Pix copy and paste',
     or: 'or',
     qrInstructions: 'Open your banking app on your phone, choose **Pix › Scan QR code** and point it at the screen.',
@@ -99,6 +100,16 @@ export const EN_US_CHECKOUT_SCREENS_COPY: CheckoutScreensCopy = {
     payingWithSavedDetails: 'Paying with your saved details',
     changeAction: 'Change',
   },
+  layout: {
+    payHeading: 'How would you like to pay?',
+    summaryTitle: 'Order summary',
+    total: 'Total',
+    totalDueCaption: (items) => `Total due · ${items} ${items === 1 ? 'item' : 'items'}`,
+    lineLabel: (quantity, name) => `${quantity}× ${name}`,
+    taxIdOnFileShort: 'CPF ✓',
+    changeAddress: 'Change address',
+    stepProgress: (step, steps, label) => `Step ${step} of ${steps} · ${label}`,
+  },
   error: {
     confirming: 'We are confirming your payment',
     cannotContinue: 'Could not continue',
@@ -143,6 +154,12 @@ export const EN_US_CHECKOUT_SCREENS_COPY: CheckoutScreensCopy = {
     invalidResponse: 'Invalid response from the server.',
     offline: 'Could not connect. Check your connection and try again.',
   },
+  cartChanged: {
+    heading: 'Your cart changed',
+    support: 'This payment was prepared for your previous cart. Update it to pay the right amount.',
+    refreshAction: 'Update payment',
+    refreshFailed: 'Could not update the payment',
+  },
   validation: {
     taxIdInvalid: 'That CPF is not valid.',
     nameRequired: 'Enter your name.',