@12-apps/payments-frontend 3.32.0 → 3.34.0

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

@@ -0,0 +1,225 @@
+import { Box } from "@mui/material";
+import { useId, type JSX, type KeyboardEvent, type ReactNode } from "react";
+
+import { useCheckoutCopy } from "./copy-context";
+import { ContentCopyIcon } from "./icons";
+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).
+ *
+ * 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.
+ *
+ * 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.
+ */
+
+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;
+
+/** A wide-only element. */
+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 {
+  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 }}>
+        {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 {
+  const { Text } = useCheckoutComponents();
+  const copy = useCheckoutCopy().screens.pix;
+  return (
+    <Box
+      id={paneIds(idBase, "qr").panel}
+      role="tabpanel"
+      aria-labelledby={paneIds(idBase, "qr").tab}
+      sx={{
+        ...panelSx(shown),
+        alignItems: "center",
+        textAlign: "center",
+        [PIX_WIDE]: { display: "flex", p: 3, 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" />
+      </Box>
+      <Text variant="body" size="sm" color="secondary" as="p" style={{ margin: 0, maxWidth: 280 }}>
+        <Box component="span" sx={NARROW_ONLY}>{copy.qrTabCaption}</Box>
+        <Box component="span" sx={wideOnly("inline")}>
+          <Emphasized text={copy.qrInstructions} />
+        </Box>
+      </Text>
+    </Box>
+  );
+}
+
+function CopyPanel({ pix, shown, onCopy, idBase }: { pix: PixCharge; shown: boolean; onCopy: () => void; idBase: string }): JSX.Element {
+  const { Button, 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" } }}>
+      <ColumnHeading>{copy.copyPasteHeading}</ColumnHeading>
+      <Box
+        sx={{ px: 2, py: 1.5, border: "1px solid", borderColor: "divider", borderRadius: 1.5, bgcolor: "action.hover" }}
+      >
+        <Text variant="code" size="xs" as="p" data-testid="pix-code" style={{ margin: 0, wordBreak: "break-all", lineHeight: 1.55 }}>
+          {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 }, [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 }}>
+          <Emphasized text={copy.copyPasteHint} />
+        </Box>
+        <Box component="span" sx={wideOnly("block")}>
+          <Emphasized text={copy.internetBankingHint} />
+        </Box>
+      </Text>
+    </Box>
+  );
+}
+
+/** 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();
+  return (
+    <>
+      <PixTabs tab={tab} onTab={onTab} idBase={idBase} />
+      <Box
+        sx={{
+          display: "grid",
+          gap: 2,
+          [PIX_WIDE]: { gridTemplateColumns: "minmax(0, 1fr) auto minmax(0, 1fr)", gap: 4, alignItems: "stretch" },
+        }}
+      >
+        <QrPanel pix={pix} shown={tab === "qr"} idBase={idBase} />
+        <OrDivider />
+        <CopyPanel pix={pix} shown={tab === "copy"} onCopy={onCopy} idBase={idBase} />
+      </Box>
+    </>
+  );
+}

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

@@ -0,0 +1,79 @@
+import { Box } from "@mui/material";
+import { Fragment, useCallback, useEffect, useRef, useState, type JSX } from "react";
+import QRCode from "react-qr-code";
+
+/**
+ * The pieces the PIX pane and its after-copy face share (the 2026-10-06 Pix
+ * redesign): the container-query switch, the QR, bold spans in a sentence, and
+ * the clipboard.
+ */
+
+/**
+ * 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.
+ */
+export const PIX_WIDE = "@container pixpane (min-width: 760px)";
+
+/** The container the {@link PIX_WIDE} query reads. */
+export const PIX_CONTAINER = { containerType: "inline-size", containerName: "pixpane" } as const;
+
+/**
+ * A sentence with `**…**` spans drawn bold. The copy packs mark the words the
+ * buyer looks for in their bank app ("Pix Copia e Cola"), so the emphasis is
+ * chosen with the words, by whoever writes them.
+ */
+export function Emphasized({ text }: { text: string }): JSX.Element {
+  const parts = text.split("**");
+  return (
+    <>
+      {parts.map((part, index) =>
+        index % 2 === 1 ? <b key={index}>{part}</b> : <Fragment key={index}>{part}</Fragment>,
+      )}
+    </>
+  );
+}
+
+/** The QR, in its bordered box, at `size` px. */
+export function PixQr({ payload, size, alt, testId }: { payload: string; size: number; alt: string; testId?: string }): JSX.Element {
+  return (
+    <Box
+      data-testid={testId}
+      role="img"
+      aria-label={alt}
+      sx={{ bgcolor: "background.paper", p: 1.75, borderRadius: 1.5, border: "1px solid", borderColor: "divider", lineHeight: 0 }}
+    >
+      <QRCode value={payload} size={size} />
+    </Box>
+  );
+}
+
+/**
+ * Copy the payload, and say so for two seconds. `copy` resolves `true` only
+ * when the clipboard took it: a failed write must not move the buyer on to a
+ * screen that says "Código Pix copiado" (the code stays visible to select by
+ * hand instead).
+ */
+export function useClipboardCopy(text: string): { copy: () => Promise<boolean>; justCopied: boolean } {
+  const [justCopied, setJustCopied] = useState(false);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  useEffect(
+    () => () => {
+      if (timer.current) clearTimeout(timer.current);
+    },
+    [],
+  );
+  const copy = useCallback(async (): Promise<boolean> => {
+    try {
+      if (!navigator.clipboard) return false;
+      await navigator.clipboard.writeText(text);
+    } catch {
+      return false;
+    }
+    setJustCopied(true);
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = setTimeout(() => setJustCopied(false), 2000);
+    return true;
+  }, [text]);
+  return { copy, justCopied };
+}

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

@@ -0,0 +1,34 @@
+import { createContext, useContext, useState, type JSX, type ReactNode } from "react";
+
+/**
+ * Which face the PIX pane is showing: the code to pay, or the wait that
+ * follows a copy (the 2026-10-06 Pix redesign).
+ *
+ * The flag lives ABOVE the pane, in the payment step, because the after-copy
+ * face hides the method picker — and the picker is the step's, not the
+ * pane's. `preferCard` is the step's way to the card, offered only when the
+ * store takes one: with the picker hidden it is the buyer's only route there,
+ * so it must never point at a method the store cannot charge.
+ */
+export interface PixStage {
+  afterCopy: boolean;
+  setAfterCopy: (afterCopy: boolean) => void;
+  preferCard?: () => void;
+}
+
+const PixStageContext = createContext<PixStage | null>(null);
+
+export function PixStageProvider({ stage, children }: { stage: PixStage; children: ReactNode }): JSX.Element {
+  return <PixStageContext.Provider value={stage}>{children}</PixStageContext.Provider>;
+}
+
+/**
+ * The stage the pane renders against. A pane mounted outside a payment step
+ * (a host composing `PixView` on its own, a unit test) keeps its own flag and
+ * offers no way to the card.
+ */
+export function usePixStage(): PixStage {
+  const shared = useContext(PixStageContext);
+  const [afterCopy, setAfterCopy] = useState(false);
+  return shared ?? { afterCopy, setAfterCopy };
+}

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

@@ -1,9 +1,11 @@
 import { Box } from "@mui/material";
-import { useEffect, useMemo, useState, type JSX } from "react";
-import QRCode from "react-qr-code";
+import { useEffect, useMemo, useRef, useState, type JSX } from "react";
 
 import { useCheckoutCopy } from "./copy-context";
-import { ContentCopyIcon } from "./icons";
+import { PixAfterCopy } from "./pix-after-copy";
+import { PixPane, type PixTab } from "./pix-pane";
+import { PIX_CONTAINER, PIX_WIDE, useClipboardCopy } from "./pix-parts";
+import { usePixStage } from "./pix-stage";
 import type { PixPaneCopy, SettlingCopy } from "./screens-copy";
 import { StalledWait } from "./stalled-wait";
 import type { CheckoutOrder, OrderStatus, PixCharge } from "./types";
@@ -11,10 +13,11 @@ import { useCheckoutComponents } from "./ui";
 import { usePaymentPolling } from "./use-payment-polling";
 
 /**
- * PIX payment view: a scannable QR (rendered client-side from the "copia e cola"
- * payload), the copyable code, and a live pending indicator. Polls the order in
- * the background and hands a terminal status up to the parent, which then shows
- * the payment-status screen.
+ * PIX payment view: the pane to pay from (tabs on a phone, QR and code side by
+ * side on a desktop — `./pix-pane`), and after a copy the wait that follows
+ * (`./pix-after-copy`). Polls the order in the background throughout and hands
+ * a terminal status up to the parent, which then shows the payment-status
+ * screen. The 2026-10-06 redesign moved the layout out; the wait stays here.
  */
 
 /**
@@ -65,62 +68,6 @@ function pixWaitMs(expiresAt: string | undefined): number {
   return Math.max(0, deadline - Date.now()) + PIX_EXPIRY_GRACE_MS;
 }
 
-/** The copyable "copia e cola" strip with its copy button. */
-function PixCodeBox({ pix }: { pix: PixCharge }): JSX.Element {
-  const { Button, Text } = useCheckoutComponents();
-  const copy = useCheckoutCopy().screens.pix;
-  const [copied, setCopied] = useState(false);
-
-  const copyCode = async (): Promise<void> => {
-    try {
-      await navigator.clipboard?.writeText(pix.copyPaste);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch {
-      /* clipboard unavailable — the code is still visible to copy manually */
-    }
-  };
-
-  return (
-    <Box
-      sx={{
-        display: "flex",
-        alignItems: "center",
-        gap: 1,
-        width: "100%",
-        maxWidth: 420,
-        p: 1,
-        borderRadius: 1,
-        border: "1px solid",
-        borderColor: "divider",
-        bgcolor: "background.default",
-      }}
-    >
-      <Text
-        variant="code"
-        size="xs"
-        as="span"
-        data-testid="pix-code"
-        style={{ flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}
-      >
-        {pix.copyPaste}
-      </Text>
-      <Button
-        variant="outline"
-        color="neutral"
-        size="sm"
-        icon={<ContentCopyIcon fontSize="small" />}
-        onClick={() => {
-          void copyCode();
-        }}
-        dataTestId="pix-copy"
-      >
-        {copied ? copy.copiedAction : copy.copyAction}
-      </Button>
-    </Box>
-  );
-}
-
 /**
  * Which of the wait's three faces the footer is showing — STOPPED, then STILL
  * TRYING, then working.
@@ -163,18 +110,17 @@ function PixPollFooter({
   error,
   timedOut,
   onCheckAgain,
-  manual,
+  awaiting,
 }: {
   error: string | null;
   timedOut: boolean;
   onCheckAgain: () => void;
-  /** The store confirms this Pix: the wait is for THEM, not for the bank. */
-  manual: boolean;
+  /** What the healthy wait says: whose confirmation it is waiting for, or "Verificando…" after a copy. */
+  awaiting: string;
 }): JSX.Element {
   const { Text } = useCheckoutComponents();
-  const { pix, settling } = useCheckoutCopy().screens;
+  const { settling } = useCheckoutCopy().screens;
   const panel = pixWaitPanel(settling, error, timedOut);
-  const awaiting = (manual ? pix.manual?.awaiting : undefined) ?? pix.awaiting;
   if (panel) {
     // The same panel the card and wallet panes show, held to the width of the
     // copy-and-paste strip above it so the centred PIX column stays a column.
@@ -193,7 +139,7 @@ function PixPollFooter({
   return (
     <Box sx={{ display: "flex", alignItems: "center", gap: 1, color: "text.secondary" }}>
       <LoadingDot />
-      <Text variant="caption" size="xs" color="secondary" as="span" data-testid="pix-awaiting">
+      <Text variant="body" size="xs" color="secondary" as="span" data-testid="pix-awaiting">
         {awaiting}
       </Text>
     </Box>
@@ -201,91 +147,154 @@ function PixPollFooter({
 }
 
 /**
- * The pane's two sentences that depend on who confirms. A store-confirmed Pix
- * must not say "a confirmação é automática": nothing confirms it but the store.
+ * The words that depend on who confirms. A store-confirmed Pix must not say
+ * "a confirmação é automática": nothing confirms it but the store.
  */
-function pixSentences(
-  copy: PixPaneCopy,
-  manual: boolean,
-): Pick<PixPaneCopy, "instructions" | "validUntil"> {
+function pixSentences(copy: PixPaneCopy, manual: boolean): Pick<PixPaneCopy, "validUntil" | "awaiting" | "afterCopy"> {
   return (manual ? copy.manual : undefined) ?? copy;
 }
 
-export function PixView({
-  order,
-  onResolved,
-  pollIntervalMs = 2500,
-}: {
-  order: CheckoutOrder;
-  onResolved: (status: OrderStatus) => void;
-  pollIntervalMs?: number;
-}): JSX.Element {
+/**
+ * The deadline and the wait, rendered once for both layouts: narrow, two
+ * centred lines under the pane; wide, one footer row under a hairline with the
+ * wait on the left and the deadline on the right.
+ */
+function PixFooter({ deadline, children }: { deadline: string; children: JSX.Element }): JSX.Element {
   const { Text } = useCheckoutComponents();
-  const copy = useCheckoutCopy().screens.pix;
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 1,
+        textAlign: "center",
+        [PIX_WIDE]: { flexDirection: "row-reverse", justifyContent: "space-between", textAlign: "left", pt: 2.25, borderTop: "1px solid", borderColor: "divider" },
+      }}
+    >
+      <Text variant="body" size="xs" color="secondary" as="p" data-testid="pix-expiry" style={{ margin: 0 }}>
+        {deadline}
+      </Text>
+      {children}
+    </Box>
+  );
+}
+
+/** The poll, bounded by the charge's own expiry (FUT-1170). */
+function usePixPolling(order: CheckoutOrder, onResolved: (status: OrderStatus) => void, pollIntervalMs: number) {
   // Fixed once per charge (FUT-1170): the bound is a span, so recomputing it
   // every render would keep pushing the deadline out — and it is an effect
   // dependency, so it would also restart the wait on every render.
   const expiresAt = order.pix?.expiresAt;
   const maxWaitMs = useMemo(() => pixWaitMs(expiresAt), [expiresAt]);
-  const { status, error, timedOut, checkAgain } = usePaymentPolling(order.orderId, {
+  const polling = usePaymentPolling(order.orderId, {
     intervalMs: pollIntervalMs,
     slowAfterPolls: PIX_FAST_POLLS,
     // Never FASTER than the opening cadence: a host that opens slowly means it.
     slowIntervalMs: Math.max(pollIntervalMs, PIX_SLOW_INTERVAL_MS),
     maxWaitMs,
   });
-
+  const { status } = polling;
   // Bubble a terminal status up once, so the parent can advance to the status step.
   useEffect(() => {
-    if (status && status !== "AWAITING_PAYMENT") {
-      onResolved(status);
-    }
+    if (status && status !== "AWAITING_PAYMENT") onResolved(status);
   }, [status, onResolved]);
+  return polling;
+}
 
-  const pix = order.pix;
-  if (!pix) {
-    return (
-      <Text variant="body" size="sm" color="danger" as="p" data-testid="pix-missing">
-        {copy.chargeMissing}
-      </Text>
-    );
-  }
+function PixBody({ order, pix, poll }: { order: CheckoutOrder; pix: PixCharge; poll: ReturnType<typeof usePixPolling> }): JSX.Element {
+  const { Text } = useCheckoutComponents();
+  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.
+  const { setAfterCopy } = stage;
+  // A clipboard write that settles after the pane is gone must not reopen the
+  // after-copy face over whatever replaced it (it would hide the picker).
+  const mounted = useRef(true);
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+      setAfterCopy(false);
+    };
+  }, [setAfterCopy]);
 
   // The locale is the HOST's (FUT-760): it decides what a buyer reads off the
   // clock, so it travels with the sentence it feeds rather than being frozen
   // to the origin host's here.
-  const validUntil = new Date(pix.expiresAt).toLocaleTimeString(copy.expiryLocale, { hour: "2-digit", minute: "2-digit" });
-  const manual = pix.confirmation === "MANUAL";
-  const sentences = pixSentences(copy, manual);
+  const time = new Date(pix.expiresAt).toLocaleTimeString(copy.expiryLocale, { hour: "2-digit", minute: "2-digit" });
+  const sentences = pixSentences(copy, pix.confirmation === "MANUAL");
+  const footerLine = (awaiting: string): JSX.Element => (
+    <PixPollFooter error={poll.error} timedOut={poll.timedOut} onCheckAgain={poll.checkAgain} awaiting={awaiting} />
+  );
 
+  if (stage.afterCopy) {
+    return (
+      <PixAfterCopy
+        pix={pix}
+        words={sentences.afterCopy}
+        totalLabel={order.totalLabel}
+        deadline={time}
+        justCopied={justCopied}
+        onCopyAgain={() => void writeClipboard()}
+        onShowQr={() => {
+          setTab("qr");
+          setAfterCopy(false);
+        }}
+        onPreferCard={stage.preferCard}
+        footer={footerLine(copy.verifying)}
+      />
+    );
+  }
   return (
-    <Box
-      data-testid="pix-view"
-      sx={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 2, textAlign: "center" }}
-    >
-      <Text variant="heading" size="md" weight="bold" as="h2">
+    <>
+      <Text variant="heading" size="md" weight="bold" as="h2" style={{ margin: 0 }}>
         {copy.heading}
       </Text>
-      <Text variant="body" size="sm" color="secondary" as="p">
-        {sentences.instructions(order.totalLabel)}
-      </Text>
-
-      <Box
-        data-testid="pix-qr"
-        role="img"
-        aria-label={copy.qrAlt}
-        sx={{ bgcolor: "background.paper", p: 2, borderRadius: 2, border: "1px solid", borderColor: "divider" }}
-      >
-        <QRCode value={pix.copyPaste} size={200} />
-      </Box>
-
-      <PixCodeBox pix={pix} />
+      <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
+          // to select by hand.
+          void writeClipboard().then((ok) => {
+            if (ok && mounted.current) setAfterCopy(true);
+          });
+        }}
+      />
+      <PixFooter deadline={sentences.validUntil(time)}>{footerLine(sentences.awaiting)}</PixFooter>
+    </>
+  );
+}
 
-      <Text variant="caption" size="xs" color="secondary" as="p" data-testid="pix-expiry">
-        {sentences.validUntil(validUntil)}
+export function PixView({
+  order,
+  onResolved,
+  pollIntervalMs = 2500,
+}: {
+  order: CheckoutOrder;
+  onResolved: (status: OrderStatus) => void;
+  pollIntervalMs?: number;
+}): JSX.Element {
+  const { Text } = useCheckoutComponents();
+  const copy = useCheckoutCopy().screens.pix;
+  const poll = usePixPolling(order, onResolved, pollIntervalMs);
+  const pix = order.pix;
+  if (!pix) {
+    return (
+      <Text variant="body" size="sm" color="danger" as="p" data-testid="pix-missing">
+        {copy.chargeMissing}
       </Text>
-
-      <PixPollFooter error={error} timedOut={timedOut} onCheckAgain={checkAgain} manual={manual} />
+    );
+  }
+  return (
+    <Box data-testid="pix-view" sx={{ ...PIX_CONTAINER, display: "flex", flexDirection: "column", gap: 2 }}>
+      <PixBody order={order} pix={pix} poll={poll} />
     </Box>
   );
 }