@12-apps/payments-frontend 3.35.0 → 3.37.0

package/src/components/checkout/payment-step-layout.tsx

@@ -1,8 +1,20 @@
 import { Box } from "@mui/material";
-import { useCallback, useMemo, useState, type JSX, type ReactNode } from "react";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useLayoutEffect,
+  useMemo,
+  useState,
+  type JSX,
+  type ReactNode,
+} from "react";
+
+import { useCheckoutCopy } from "./copy-context";
 
 import type { PixStage } from "./pix-stage";
 import type { PaymentMethod } from "./types";
+import { useCheckoutComponents } from "./ui";
 
 /**
  * The width of the Dados and confirmation steps, and of every non-PIX pane:
@@ -12,19 +24,6 @@ import type { PaymentMethod } from "./types";
  */
 export const STEP_COLUMN_MAX = 672;
 
-/**
- * The payment step's form column. The host may give this step more room than
- * the others (the 2026-10-06 Pix redesign lets the PIX pane put its QR and code
- * side by side), and only that pane uses it: the card form, wallets, hand-off,
- * the payer line and the raising and error panels keep the 672px they
- * always had. `full` lets the PIX pane through.
- */
-export function StepColumn({ full = false, children }: { full?: boolean; children: ReactNode }): JSX.Element {
-  // `:empty` keeps a self-hiding child (the payer line, the raising state)
-  // from leaving a gap in the step's flex column.
-  return <Box sx={{ width: "100%", mx: "auto", maxWidth: full ? "none" : STEP_COLUMN_MAX, "&:empty": { display: "none" } }}>{children}</Box>;
-}
-
 /**
  * The payment step's half of the PIX pane's after-copy face (the 2026-10-06
  * Pix redesign): the flag that hides the method picker, and the way to the
@@ -63,3 +62,159 @@ export function usePaymentPixStage(
  * buys them nothing, but here the tap is the buyer's consent to LEAVE, and
  * taking it for them would redirect a checkout the moment it rendered.
  */
+
+/**
+ * The checkout container's width class, from the 2026-10-11 Pagamento
+ * redesign (FUT-3525): `wide` is the computer layout (the payment column with
+ * the order summary beside it), `narrow` the phone layout (one column, chips,
+ * a sticky pay bar).
+ *
+ * Read off the flow's own full-width root rather than the viewport, so a host
+ * that renders the checkout inside a narrow panel gets the phone layout, and
+ * picked ONCE for the whole flow so the header does not change shape between
+ * steps.
+ */
+export const WIDE_CHECKOUT_MIN = 900;
+
+/** The phone panel's padding, in px — the sticky pay bar reaches past it. */
+export const PANEL_PAD_PHONE = 16;
+
+interface CheckoutLayout {
+  wide: boolean;
+}
+
+const CheckoutLayoutContext = createContext<CheckoutLayout | null>(null);
+
+/** `null` outside a measured flow: a component composed by hand keeps its old look. */
+export function useCheckoutLayout(): CheckoutLayout | null {
+  return useContext(CheckoutLayoutContext);
+}
+
+export const CheckoutLayoutProvider = CheckoutLayoutContext.Provider;
+
+/**
+ * Measure an element's width and say whether it is the wide layout.
+ *
+ * A CALLBACK ref, so the measuring starts whenever the element mounts — the
+ * flow renders its empty-cart screen first while the host's cart is still
+ * loading, and a ref object read once in an effect would never see the frame
+ * that mounts after it. Measured in a layout effect so the first PAINT is
+ * already right; a width of zero (jsdom, a hidden tab) reads as narrow, which
+ * is the layout that fits anything.
+ */
+export function useWideLayout(): [boolean, (element: HTMLElement | null) => void] {
+  const [element, setElement] = useState<HTMLElement | null>(null);
+  const [wide, setWide] = useState(false);
+  useLayoutEffect(() => {
+    if (!element) return;
+    const measure = (): void => setWide(element.getBoundingClientRect().width >= WIDE_CHECKOUT_MIN);
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [element]);
+  return [wide, setElement];
+}
+
+/** The amount the phone's pay bar shows beside its button; set by the Pagamento step. */
+const PayBarTotalContext = createContext<string | null>(null);
+
+export const PayBarTotalProvider = PayBarTotalContext.Provider;
+
+/**
+ * The phone's sticky pay bar (FUT-3525): "Total" over the amount at its left,
+ * the step's ONE primary action filling the rest, pinned to the bottom of the
+ * viewport while the page scrolls. On the computer — or outside a measured
+ * flow — it is just the action, where the pane put it.
+ */
+/**
+ * The colour the page itself is painted, for a bar that must read as part of
+ * the page. A host may paint its ground outside the theme (the storefront's
+ * is the body's, while its `background.default` is white), so the theme role
+ * is only the fallback until the first layout reads the real one.
+ */
+function usePageGround(): string | undefined {
+  const [ground, setGround] = useState<string>();
+  useLayoutEffect(() => {
+    const painted = getComputedStyle(document.body).backgroundColor;
+    if (painted && painted !== "rgba(0, 0, 0, 0)" && painted !== "transparent") setGround(painted);
+  }, []);
+  return ground;
+}
+
+export function StickyPayBar({
+  children,
+  dataTestId,
+}: {
+  children: ReactNode;
+  dataTestId?: string;
+}): JSX.Element {
+  const layout = useCheckoutLayout();
+  const totalLabel = useContext(PayBarTotalContext);
+  const { Text } = useCheckoutComponents();
+  const copy = useCheckoutCopy().screens.layout;
+  const ground = usePageGround();
+  if (!layout) return <Box data-testid={dataTestId}>{children}</Box>;
+  if (layout.wide) {
+    // The computer's action, in the panel: the prototype's 52px bold bar.
+    return (
+      <Box data-testid={dataTestId} sx={{ "& button": { minHeight: 52 }, "& button, & button *": { fontWeight: 700 } }}>
+        {children}
+      </Box>
+    );
+  }
+  // The bar sits on the PAGE, not in the card around the pane (the
+  // prototype's layout C): it reaches past the panel's padding and border on
+  // three sides, so the card reads as ending above it.
+  const breakout = `calc(-1 * (${PANEL_PAD_PHONE}px + 1px))`;
+  return (
+    <Box
+      data-testid={dataTestId}
+      sx={{
+        position: "sticky",
+        bottom: 0,
+        zIndex: 2,
+        mx: breakout,
+        mb: breakout,
+        mt: 1,
+        // Its content on the column's edge, where the card's border was.
+        px: "1px",
+        pt: 1.5,
+        // Clear of a phone's home indicator.
+        pb: "calc(16px + env(safe-area-inset-bottom, 0px))",
+        display: "flex",
+        flexWrap: "wrap",
+        alignItems: "center",
+        columnGap: 2,
+        rowGap: 1,
+        bgcolor: ground ?? "background.default",
+      }}
+    >
+      {totalLabel ? (
+        <Box sx={{ flex: "none", display: "flex", flexDirection: "column" }}>
+          <Text variant="body" size="xs" as="span">
+            {copy.total}
+          </Text>
+          <Box sx={{ "&& > *": { fontSize: "1.125rem", lineHeight: 1.2 } }}>
+            <Text variant="body" size="md" weight="bold" as="span" data-testid="pay-bar-sticky-total">
+              {totalLabel}
+            </Text>
+          </Box>
+        </Box>
+      ) : null}
+      {/* The prototype's 56px pill with a bold label, never squeezed to two
+          lines: under ~200px beside the total it wraps under it instead. */}
+      <Box
+        sx={{
+          flex: "1 1 200px",
+          minWidth: 0,
+          "& button": { borderRadius: 999, minHeight: 56, whiteSpace: "nowrap" },
+          "& button, & button *": { fontWeight: 700 },
+        }}
+      >
+        {children}
+      </Box>
+    </Box>
+  );
+}

package/src/components/checkout/payment-summary-phone.tsx

@@ -0,0 +1,158 @@
+import { Box } from "@mui/material";
+import type { JSX, ReactNode } from "react";
+
+import { formatCpf } from "../../card";
+
+import { useCheckoutCopy } from "./copy-context";
+import { PersonOutlineIcon, PlaceOutlinedIcon } from "./icons";
+import { NoteIcon, TotalAmount, type CheckoutDeliverySummary, type OrderSummaryParts } from "./payment-summary";
+import { useCheckoutComponents } from "./ui";
+
+/**
+ * The phone's head of the Pagamento step (FUT-3525, layout C): the amount big
+ * at the top, then who pays, where it goes and the note as chips that wrap.
+ */
+
+const CHIP_ICON = { fontSize: 18, color: "text.secondary" } as const;
+
+const CHIP_SX = {
+  display: "inline-flex",
+  alignItems: "center",
+  gap: 1,
+  minHeight: 44,
+  maxWidth: "100%",
+  px: 1.75,
+  border: "1px solid",
+  borderColor: "divider",
+  borderRadius: 999,
+  bgcolor: "background.paper",
+  color: "text.primary",
+  font: "inherit",
+  fontSize: "0.8125rem",
+  cursor: "pointer",
+  "&:focus-visible": { outline: "2px solid", outlineColor: "primary.main", outlineOffset: 2 },
+} as const;
+
+/** One chip: an icon, a fact, and the word that changes it. */
+function Chip({
+  icon,
+  text,
+  action,
+  onClick,
+  label,
+  testId,
+}: {
+  icon: JSX.Element;
+  text: ReactNode;
+  action: string;
+  onClick: () => void;
+  label: string;
+  testId: string;
+}): JSX.Element {
+  return (
+    <Box component="button" type="button" onClick={onClick} aria-label={label} data-testid={testId} sx={CHIP_SX}>
+      {icon}
+      <Box component="span" sx={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", minWidth: 0 }}>
+        {text}
+      </Box>
+      <Box component="span" sx={{ color: "primary.main", fontWeight: 600, flex: "none" }}>
+        {action}
+      </Box>
+    </Box>
+  );
+}
+
+/** Who pays: the name and "CPF ✓", or the CPF typed this time, masked. */
+function PayerChip({ payer }: { payer: NonNullable<OrderSummaryParts["payer"]> }): JSX.Element {
+  const screens = useCheckoutCopy().screens;
+  const cpf = payer.taxId?.trim() ? screens.payer.taxId(formatCpf(payer.taxId)) : screens.layout.taxIdOnFileShort;
+  const who = payer.name ? screens.payer.payingAs(payer.name) : screens.payer.payingWithSavedDetails;
+  return (
+    <Box data-testid="checkout-payer" sx={{ display: "contents" }}>
+      <Chip
+        icon={<PersonOutlineIcon sx={CHIP_ICON} />}
+        text={
+          <>
+            {payer.name ? `${payer.name} · ` : null}
+            <span data-testid="checkout-payer-cpf">{cpf}</span>
+          </>
+        }
+        action={screens.payer.changeAction}
+        onClick={payer.onEdit}
+        label={`${who} — ${screens.payer.changeAction}`}
+        testId="checkout-payer-edit"
+      />
+    </Box>
+  );
+}
+
+/** Where it goes: the street line only, and the way back to the address step. */
+function AddressChip({ delivery }: { delivery: CheckoutDeliverySummary }): JSX.Element {
+  const screens = useCheckoutCopy().screens;
+  return (
+    <Box data-testid="checkout-address" sx={{ display: "contents" }}>
+      <Chip
+        icon={<PlaceOutlinedIcon sx={CHIP_ICON} />}
+        text={delivery.line1}
+        action={screens.payer.changeAction}
+        onClick={delivery.onEdit}
+        label={`${delivery.line1} — ${screens.layout.changeAddress}`}
+        testId="checkout-address-edit"
+      />
+    </Box>
+  );
+}
+
+/**
+ * The host's note control, drawn as the third chip while it is closed; once it
+ * opens into a field, that field takes the whole row.
+ */
+function NoteChip({ note }: { note: ReactNode }): JSX.Element {
+  return (
+    <Box
+      data-testid="checkout-note-slot"
+      sx={{
+        ...CHIP_SX,
+        gap: 0.5,
+        pr: 0.5,
+        cursor: "auto",
+        "&:has(textarea)": { flexBasis: "100%", display: "block", p: 0, border: 0, bgcolor: "transparent" },
+        "&:has(textarea) > svg": { display: "none" },
+      }}
+    >
+      <NoteIcon size={18} />
+      {note}
+    </Box>
+  );
+}
+
+/** The amount, big, under "Total a pagar · N itens", the host's money rows under it. */
+function PhoneTotal({ parts }: { parts: OrderSummaryParts }): JSX.Element {
+  const { Text } = useCheckoutComponents();
+  const copy = useCheckoutCopy().screens.layout;
+  return (
+    <Box data-testid="payment-step-total" sx={{ display: "flex", flexDirection: "column", gap: 0.5, py: 1 }}>
+      <Text variant="body" size="sm" color="secondary" as="span">
+        {copy.totalDueCaption(parts.totalItems)}
+      </Text>
+      <TotalAmount totalLabel={parts.totalLabel} big />
+      {parts.discountLines}
+    </Box>
+  );
+}
+
+export function PhoneOrderSummary({ parts }: { parts: OrderSummaryParts }): JSX.Element {
+  const hasChips = Boolean(parts.payer || parts.delivery || parts.orderNote);
+  return (
+    <Box sx={{ display: "flex", flexDirection: "column", gap: 2.5 }}>
+      <PhoneTotal parts={parts} />
+      {hasChips ? (
+        <Box data-testid="checkout-chips" sx={{ display: "flex", flexWrap: "wrap", gap: 1, alignItems: "center" }}>
+          {parts.payer ? <PayerChip payer={parts.payer} /> : null}
+          {parts.delivery ? <AddressChip delivery={parts.delivery} /> : null}
+          {parts.orderNote ? <NoteChip note={parts.orderNote} /> : null}
+        </Box>
+      ) : null}
+    </Box>
+  );
+}

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

@@ -0,0 +1,290 @@
+import { Box } from "@mui/material";
+import type { JSX, ReactNode } from "react";
+
+import { formatCpf } from "../../card";
+
+import { useCheckoutCopy } from "./copy-context";
+import { PersonOutlineIcon, PlaceOutlinedIcon } from "./icons";
+import { useCheckoutComponents } from "./ui";
+
+/**
+ * What the Pagamento step says about the ORDER around the payment (FUT-3525):
+ * its lines and total, who pays, where it goes and the note. On a computer
+ * it is a card beside the payment column ({@link OrderSummaryCard}); on a
+ * phone the total heads the page and the rest are chips
+ * ({@link PhoneOrderSummary}).
+ */
+
+/** One cart line, as the host words it — the package does no money math. */
+export interface CheckoutSummaryLine {
+  key: string;
+  quantity: number;
+  name: string;
+  /** The line's total, formatted by the host. */
+  totalLabel: string;
+}
+
+/** Where a delivery goes, and the host's way back to change it. */
+export interface CheckoutDeliverySummary {
+  /** "Rua Augusta, 1500 · ap 42" — street, number and complement. */
+  line1: string;
+  /** "Consolação, São Paulo" — district and city. Optional. */
+  line2?: string;
+  /** Back to the host's address step. */
+  onEdit: () => void;
+}
+
+/** Everything the summary shows. Each part is optional and hides itself when absent. */
+export interface OrderSummaryParts {
+  totalLabel: string;
+  totalItems: number;
+  /** The host's discount, fee and delivery lines under the total (FUT-246). */
+  discountLines?: ReactNode;
+  lines?: CheckoutSummaryLine[];
+  /** Who is paying — only for a flow whose Dados step was skipped (FUT-465). */
+  payer?: { name?: string; taxId?: string; onEdit: () => void };
+  delivery?: CheckoutDeliverySummary;
+  /** The host's note control, mounted as it is. */
+  orderNote?: ReactNode;
+}
+
+/** Read by a screen reader, not drawn. */
+const VISUALLY_HIDDEN = {
+  position: "absolute",
+  width: "1px",
+  height: "1px",
+  overflow: "hidden",
+  clip: "rect(0 0 0 0)",
+  whiteSpace: "nowrap",
+} as const;
+
+/** "Alterar" as the prototype's top-aligned link on the card's edge, not a padded button. */
+const EDIT_SX = { flex: "none", alignSelf: "flex-start", mt: -0.75, mr: -1 } as const;
+
+const ROW_SX = { display: "flex", gap: 1.5, alignItems: "flex-start" } as const;
+const ICON_SX = {
+  fontSize: 20,
+  color: "text.secondary",
+  flex: "0 0 auto",
+  mt: 0.25,
+} as const;
+
+export function NoteIcon({ size = 20 }: { size?: number }): JSX.Element {
+  return (
+    <Box
+      component="svg"
+      aria-hidden
+      viewBox="0 0 24 24"
+      sx={{
+        width: size,
+        height: size,
+        flex: "0 0 auto",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 2,
+        color: "text.secondary",
+      }}
+    >
+      <path d="M4 4h16v12H8l-4 4z" />
+    </Box>
+  );
+}
+
+/** The amount, the one number the whole step is about. */
+export function TotalAmount({
+  totalLabel,
+  big,
+}: {
+  totalLabel: string;
+  big: boolean;
+}): JSX.Element {
+  const { Text } = useCheckoutComponents();
+  return (
+    <Box
+      sx={{
+        "&& > *": {
+          fontSize: big ? "2.5rem" : "1.625rem",
+          lineHeight: 1.1,
+          letterSpacing: big ? "-0.02em" : 0,
+        },
+      }}
+    >
+      <Text
+        variant="heading"
+        size="md"
+        weight="bold"
+        color={big ? undefined : "primary"}
+        as="span"
+        data-testid="pay-bar-total"
+      >
+        {totalLabel}
+      </Text>
+    </Box>
+  );
+}
+
+function PayerRow({
+  payer,
+}: {
+  payer: NonNullable<OrderSummaryParts["payer"]>;
+}): JSX.Element {
+  const { Button, Text } = useCheckoutComponents();
+  const copy = useCheckoutCopy().screens.payer;
+  const cpf = payer.taxId?.trim()
+    ? copy.taxId(formatCpf(payer.taxId))
+    : copy.taxIdAlreadyKnown;
+  return (
+    <Box
+      data-testid="checkout-payer"
+      sx={ROW_SX}
+      aria-label={
+        payer.name ? copy.payingAs(payer.name) : copy.payingWithSavedDetails
+      }
+      role="group"
+    >
+      <PersonOutlineIcon sx={ICON_SX} />
+      <Box sx={{ flex: 1, minWidth: 0 }}>
+        <Text variant="body" size="sm" as="p" data-testid="checkout-payer-name">
+          {payer.name ?? copy.payingWithSavedDetails}
+        </Text>
+        <Text variant="body" size="xs" as="p" data-testid="checkout-payer-cpf">
+          {cpf}
+        </Text>
+      </Box>
+      <Box sx={EDIT_SX}>
+      <Button
+        variant="text"
+        color="primary"
+        size="sm"
+        onClick={payer.onEdit}
+        dataTestId="checkout-payer-edit"
+      >
+        {copy.changeAction}
+      </Button>
+      </Box>
+    </Box>
+  );
+}
+
+function AddressRow({
+  delivery,
+}: {
+  delivery: CheckoutDeliverySummary;
+}): JSX.Element {
+  const { Button, Text } = useCheckoutComponents();
+  const copy = useCheckoutCopy().screens;
+  return (
+    <Box data-testid="checkout-address" sx={ROW_SX}>
+      <PlaceOutlinedIcon sx={ICON_SX} />
+      <Box sx={{ flex: 1, minWidth: 0 }}>
+        <Text
+          variant="body"
+          size="sm"
+          as="p"
+          data-testid="checkout-address-line1"
+        >
+          {delivery.line1}
+        </Text>
+        {delivery.line2 ? (
+          <Text variant="body" size="xs" as="p">
+            {delivery.line2}
+          </Text>
+        ) : null}
+      </Box>
+      <Box sx={EDIT_SX}>
+      <Button
+        variant="text"
+        color="primary"
+        size="sm"
+        onClick={delivery.onEdit}
+        dataTestId="checkout-address-edit"
+      >
+        <span aria-hidden>{copy.payer.changeAction}</span>
+        <Box component="span" sx={VISUALLY_HIDDEN}>
+          {copy.layout.changeAddress}
+        </Box>
+      </Button>
+      </Box>
+    </Box>
+  );
+}
+
+const DIVIDER = <Box sx={{ height: "1px", bgcolor: "divider" }} />;
+
+/** The cart's lines, "2× X-Burger … R$ 36,00", when the host passed them. */
+function SummaryLines({ lines }: { lines: CheckoutSummaryLine[] }): JSX.Element {
+  const { Text } = useCheckoutComponents();
+  const copy = useCheckoutCopy().screens.layout;
+  return (
+    <Box component="ul" data-testid="checkout-summary-lines" sx={{ m: 0, p: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 1 }}>
+      {lines.map((line) => (
+        <Box component="li" key={line.key} sx={{ display: "flex", justifyContent: "space-between", gap: 2 }}>
+          <Text variant="body" size="sm" as="span">
+            {copy.lineLabel(line.quantity, line.name)}
+          </Text>
+          <Text variant="body" size="sm" as="span">
+            {line.totalLabel}
+          </Text>
+        </Box>
+      ))}
+    </Box>
+  );
+}
+
+/** "Total" and the amount on one line, the host's money rows under it. */
+function SummaryTotal({ totalLabel, discountLines }: { totalLabel: string; discountLines?: ReactNode }): JSX.Element {
+  const { Text } = useCheckoutComponents();
+  const copy = useCheckoutCopy().screens.layout;
+  return (
+    <Box data-testid="payment-step-total" sx={{ display: "flex", flexDirection: "column", gap: 0.5 }}>
+      <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 2 }}>
+        <Text variant="body" size="md" weight="semibold" as="span">
+          {copy.total}
+        </Text>
+        <TotalAmount totalLabel={totalLabel} big={false} />
+      </Box>
+      {discountLines}
+    </Box>
+  );
+}
+
+/** The host's note control, on a row of its own with the note icon. */
+function NoteRow({ note }: { note: ReactNode }): JSX.Element {
+  return (
+    <Box sx={{ ...ROW_SX, alignItems: "center" }}>
+      <NoteIcon />
+      <Box sx={{ flex: 1, minWidth: 0, "& .MuiButton-root, & button": { px: 0 } }}>{note}</Box>
+    </Box>
+  );
+}
+
+/**
+ * The computer's summary card, beside the payment (FUT-3525, layout A).
+ * Sticky, so the total and the address stay in view while the buyer fills
+ * the card form.
+ */
+export function OrderSummaryCard({ parts }: { parts: OrderSummaryParts }): JSX.Element {
+  const { Text } = useCheckoutComponents();
+  const copy = useCheckoutCopy().screens.layout;
+  const lines = parts.lines ?? [];
+  const hasWho = Boolean(parts.payer || parts.delivery || parts.orderNote);
+  return (
+    <Box
+      component="aside"
+      aria-label={copy.summaryTitle}
+      data-testid="checkout-summary"
+      sx={{ position: "sticky", top: 24, display: "flex", flexDirection: "column", gap: 2, p: 2.75, bgcolor: "background.paper", border: "1px solid", borderColor: "divider", borderRadius: 2.5 }}
+    >
+      <Text variant="heading" size="md" weight="bold" as="h2">
+        {copy.summaryTitle}
+      </Text>
+      {lines.length > 0 ? <SummaryLines lines={lines} /> : null}
+      {lines.length > 0 ? DIVIDER : null}
+      <SummaryTotal totalLabel={parts.totalLabel} discountLines={parts.discountLines} />
+      {hasWho ? DIVIDER : null}
+      {parts.payer ? <PayerRow payer={parts.payer} /> : null}
+      {parts.delivery ? <AddressRow delivery={parts.delivery} /> : null}
+      {parts.orderNote ? <NoteRow note={parts.orderNote} /> : null}
+    </Box>
+  );
+}

package/src/components/checkout/pix-after-copy.tsx

@@ -1,9 +1,10 @@
 import { Box } from "@mui/material";
 import type { JSX, ReactNode } from "react";
 
+import { usePaymentStale } from "./cart-changed";
 import { useCheckoutCopy } from "./copy-context";
 import { CheckIcon, ContentCopyIcon, CreditCardIcon, QrCodeIcon, ScheduleIcon } from "./icons";
-import { Emphasized, PIX_WIDE, PixQr } from "./pix-parts";
+import { Emphasized, PIX_WIDE, PixQr, StaleVeil } from "./pix-parts";
 import type { PixAfterCopyCopy } from "./screens-copy";
 import type { PixCharge } from "./types";
 import { useCheckoutComponents } from "./ui";
@@ -128,11 +129,14 @@ interface PixAfterCopyProps {
 function Actions({ justCopied, onCopyAgain, onShowQr, onPreferCard }: Pick<PixAfterCopyProps, "justCopied" | "onCopyAgain" | "onShowQr" | "onPreferCard">): JSX.Element {
   const { Button } = useCheckoutComponents();
   const copy = useCheckoutCopy().screens.pix;
+  // The code already copied is the OLD order's once the cart changed
+  // (FUT-3535): copying it again would only hand the buyer the wrong amount.
+  const stale = usePaymentStale();
   return (
-    <Box sx={{ display: "grid", gridTemplateColumns: "repeat(2, minmax(0, 1fr))", gap: 1.25, "& button": { minHeight: 48, height: "100%" }, "& button, & button *": { fontWeight: 700 }, [PIX_WIDE]: { display: "flex", flexWrap: "wrap", alignItems: "center", gap: 1.5, "& button": { height: "auto" } } }}>
+    <Box sx={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))", gap: 1.25, "& button": { minHeight: 48, height: "100%" }, "& button, & button *": { fontWeight: 700 }, [PIX_WIDE]: { display: "flex", flexWrap: "wrap", alignItems: "center", gap: 1.5, "& button": { height: "auto" } } }}>
       {/* Narrow, a grid cell; wide, its own width beside the link (the prototype's row). */}
       <Box sx={{ minWidth: 0, [PIX_WIDE]: { flex: "none", "& > *": { width: "auto" } } }}>
-        <Button variant="outline" color="neutral" size="md" fullWidth icon={<ContentCopyIcon fontSize="small" />} onClick={onCopyAgain} dataTestId="pix-copy-again">
+        <Button variant="outline" color="neutral" size="md" fullWidth icon={<ContentCopyIcon fontSize="small" />} onClick={onCopyAgain} disabled={stale} dataTestId="pix-copy-again">
           {justCopied ? copy.copiedAction : copy.copyAgainAction}
         </Button>
       </Box>
@@ -156,6 +160,7 @@ export function PixAfterCopy(props: PixAfterCopyProps): JSX.Element {
   const { Button, Text } = useCheckoutComponents();
   const copy = useCheckoutCopy().screens.pix;
   const { pix, words, totalLabel, deadline, onPreferCard, footer } = props;
+  const stale = usePaymentStale();
   return (
     <Box data-testid="pix-after-copy" sx={{ display: "flex", flexWrap: "wrap", gap: 4, alignItems: "flex-start" }}>
       <Box sx={{ flex: "999 1 420px", minWidth: 0, display: "flex", flexDirection: "column", gap: 2.5 }}>
@@ -175,7 +180,9 @@ export function PixAfterCopy(props: PixAfterCopyProps): JSX.Element {
         <Text variant="body" size="xs" weight="bold" color="secondary" as="p" style={{ margin: 0, textTransform: "uppercase", letterSpacing: "0.04em" }}>
           {copy.notPaidYet}
         </Text>
-        <PixQr payload={pix.copyPaste} size={168} alt={copy.qrAlt} />
+        <StaleVeil stale={stale}>
+          <PixQr payload={pix.copyPaste} size={168} alt={copy.qrAlt} />
+        </StaleVeil>
         <Text variant="body" size="xs" color="secondary" as="p" style={{ margin: 0, textAlign: "center" }}>
           {copy.scanFromPhone}
         </Text>