@12-apps/payments-frontend 3.36.0 → 3.38.0

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

@@ -0,0 +1,206 @@
+import { Box, useTheme } from "@mui/material";
+import type { JSX, KeyboardEvent, MouseEvent, ReactNode } from "react";
+
+import { usePaymentRefresh, usePaymentStale } from "../cart-changed";
+import { useCheckoutCopy } from "../copy-context";
+import { PixAfterCopy } from "../pix-after-copy";
+import { PixQr, StaleVeil } from "../pix-parts";
+import type { PixAfterCopyCopy } from "../screens-copy";
+import type { CheckoutOrder, PixCharge } from "../types";
+import { useCheckoutComponents } from "../ui";
+
+import type { PaymentListMode } from "./context";
+import { ListBar, ActionButton, WaitingLine } from "./list-bar";
+
+/**
+ * The Pix, in the one list (FUT-3592 #3): "Gerar Pix" already created the
+ * order and the code, so the pane opens on the code itself.
+ *
+ * Before the copy — the code in a tinted block that copies on a tap (the same
+ * as the bar's "Copiar código Pix"), "Válido até …", and two text links: the
+ * QR for paying from another phone, and the way back to the list. On a
+ * computer the QR stands beside the code instead. After the copy — ADR 0129's
+ * face, as today, with the bar saying what it is waiting for.
+ *
+ * The side-by-side switch is a container query on the pane's own width, never
+ * the window's (the 512px column a computer gives the checkout is still wider
+ * than any phone's).
+ */
+const WIDE = "@container listpix (min-width: 460px)";
+
+/** Select the code and copy it — a tap on it is the bar's button. */
+function selectAll(target: HTMLElement): void {
+  try {
+    const selection = window.getSelection();
+    selection?.removeAllRanges();
+    selection?.selectAllChildren(target);
+  } catch {
+    // Selecting is a courtesy; the copy below is what matters.
+  }
+}
+
+function TappableCode({ pix, label, onCopy }: { pix: PixCharge; label: string; onCopy: () => void }): JSX.Element {
+  const stale = usePaymentStale();
+  const { Text } = useCheckoutComponents();
+  const press = (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => {
+    selectAll(event.currentTarget);
+    onCopy();
+  };
+  // Under the veil the code is not a control at all — no role, no Tab stop,
+  // nothing a tap does (ADR 0121: the veil covers it, so it may not be one).
+  const control = stale
+    ? {}
+    : {
+        role: "button",
+        tabIndex: 0,
+        "aria-label": label,
+        onClick: press,
+        onKeyDown: (event: KeyboardEvent<HTMLElement>) => {
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            press(event);
+          }
+        },
+      };
+  return (
+    <StaleVeil stale={stale}>
+      <Box
+        {...control}
+        data-testid="list-pix-code"
+        sx={{ cursor: stale ? "default" : "pointer", bgcolor: "action.hover", borderRadius: 2, p: 1.25, wordBreak: "break-all" }}
+      >
+        <Text variant="code" size="xs" as="span">
+          {pix.copyPaste}
+        </Text>
+      </Box>
+    </StaleVeil>
+  );
+}
+
+function TextLink({ onClick, testId, children }: { onClick: () => void; testId: string; children: ReactNode }): JSX.Element {
+  const { Button } = useCheckoutComponents();
+  return (
+    <Box sx={{ alignSelf: "flex-start", ml: -1, "& button": { textDecoration: "underline", textUnderlineOffset: (t) => t.spacing(0.375), minHeight: (t) => t.spacing(5) } }}>
+      <Button variant="text" color="primary" size="md" onClick={onClick} dataTestId={testId}>
+        {children}
+      </Button>
+    </Box>
+  );
+}
+
+function BeforeCopy({ mode, pix, time, onCopy, onChangeMethod, footer }: {
+  mode: PaymentListMode;
+  pix: PixCharge;
+  time: string;
+  onCopy: () => void;
+  onChangeMethod: () => void;
+  footer: ReactNode;
+}): JSX.Element {
+  const { Text } = useCheckoutComponents();
+  const copy = mode.list.copy.pixFace;
+  const qrAlt = useCheckoutCopy().screens.pix.qrAlt;
+  // The prototype's 150px QR, on the theme's spacing scale (the QR draws in px).
+  const qrSize = Number.parseFloat(useTheme().spacing(18.75));
+  const stale = usePaymentStale();
+  return (
+    <Box sx={{ containerType: "inline-size", containerName: "listpix" }}>
+      <Box sx={{ display: "flex", gap: 2, alignItems: "flex-start", flexDirection: "column", [WIDE]: { flexDirection: "row" } }}>
+        <Box data-testid="list-pix-qr" sx={{ display: mode.qrOpen ? "block" : "none", alignSelf: "center", flex: "none", [WIDE]: { display: "block", alignSelf: "flex-start" } }}>
+          <StaleVeil stale={stale}>
+            <PixQr payload={pix.copyPaste} size={qrSize} alt={qrAlt} />
+          </StaleVeil>
+        </Box>
+        <Box sx={{ flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: 1 }}>
+          <TappableCode pix={pix} label={copy.copyCode} onCopy={onCopy} />
+          <Text variant="body" size="sm" color="secondary" as="p" style={{ margin: 0 }} data-testid="list-pix-valid">
+            {copy.validUntil(time)}
+          </Text>
+          <Box sx={{ [WIDE]: { display: "none" } }}>
+            <TextLink onClick={() => mode.setQrOpen(!mode.qrOpen)} testId="list-pix-toggle-qr">
+              {mode.qrOpen ? copy.hideQr : copy.showQr}
+            </TextLink>
+          </Box>
+          <TextLink onClick={onChangeMethod} testId="list-pix-change-method">
+            {copy.changeMethod}
+          </TextLink>
+          {footer}
+        </Box>
+      </Box>
+    </Box>
+  );
+}
+
+interface ListPixFaceProps {
+  order: CheckoutOrder;
+  pix: PixCharge;
+  /** The code's expiry, in the host's locale. */
+  time: string;
+  afterCopy: boolean;
+  words: PixAfterCopyCopy;
+  justCopied: boolean;
+  /** Copy, then show the after-copy face. */
+  onCopy: () => void;
+  onCopyAgain: () => void;
+  /** Back from the after-copy face to the code, QR open. */
+  onShowQr: () => void;
+  onPreferCard?: () => void;
+  /** The poll's stalled panel, when it has one. */
+  footer: ReactNode;
+}
+
+/**
+ * The Pix's bar: the host's hold first (a step reopened above), then — over a
+ * code the cart has outgrown — "Atualizar pagamento" (FUT-3535, E20), then
+ * the copy before it and the wait after it.
+ */
+function ListPixBar({ mode, afterCopy, onCopy }: { mode: PaymentListMode; afterCopy: boolean; onCopy: () => void }): JSX.Element {
+  const copy = mode.list.copy.pixFace;
+  const stale = usePaymentStale();
+  const refresh = usePaymentRefresh();
+  const refreshLabel = useCheckoutCopy().screens.cartChanged.refreshAction;
+  const { hold } = mode.list;
+  const action = (): JSX.Element => {
+    if (hold) return <ActionButton label={hold.action} total={null} disabled onClick={() => undefined} />;
+    if (stale && refresh) return <ActionButton label={refreshLabel} total={null} disabled={false} onClick={refresh} />;
+    if (afterCopy) return <WaitingLine text={copy.waiting} />;
+    return <ActionButton label={copy.copyCode} total={null} disabled={stale} onClick={onCopy} />;
+  };
+  return (
+    <ListBar summary={mode.list.summary} reason={hold?.reason ?? null} live={afterCopy && !hold && !stale ? copy.waiting : null}>
+      {action()}
+    </ListBar>
+  );
+}
+
+/** Both faces of the list's Pix, and the bar under them. */
+export function ListPixFace(props: ListPixFaceProps & { mode: PaymentListMode }): JSX.Element {
+  const { Text } = useCheckoutComponents();
+  const { mode, order, pix, afterCopy } = props;
+  const copy = mode.list.copy.pixFace;
+  return (
+    <Box data-testid="list-pix" sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}>
+      <Text variant="body" size="md" weight="bold" as="p" style={{ margin: 0 }} data-testid="list-pix-title">
+        {copy.title(order.totalLabel)}
+      </Text>
+      {afterCopy ? (
+        <PixAfterCopy
+          pix={pix}
+          words={props.words}
+          totalLabel={order.totalLabel}
+          deadline={props.time}
+          justCopied={props.justCopied}
+          onCopyAgain={props.onCopyAgain}
+          onShowQr={() => {
+            mode.setQrOpen(true);
+            props.onShowQr();
+          }}
+          onPreferCard={props.onPreferCard}
+          footer={props.footer}
+        />
+      ) : (
+        <BeforeCopy mode={mode} pix={pix} time={props.time} onCopy={props.onCopy} onChangeMethod={mode.onLeavePix} footer={props.footer} />
+      )}
+      <ListPixBar mode={mode} afterCopy={afterCopy} onCopy={props.onCopy} />
+    </Box>
+  );
+}

package/src/components/checkout/list/online-content.tsx

@@ -0,0 +1,137 @@
+import { Box, Chip } from "@mui/material";
+import { useRef, type JSX, type KeyboardEvent } from "react";
+
+import { NEW_CARD, NewCardForm, detectBrand, onlyDigits } from "../../../card";
+import { ChargeFailure } from "../card-view";
+import { UNRESOLVED_CODE } from "../failure-codes";
+import type { BuyerInfo, CheckoutCustomerField } from "../types";
+
+import { BuyerInline } from "./buyer-inline";
+import { cardName } from "./choice";
+import type { ListChargeFailure } from "./charge-runners";
+import type { PaymentListCopy } from "./types";
+import type { ListCard } from "./use-list-state";
+
+/** Where an arrow, Home or End moves from `at` among `count` chips, or `null` for another key. */
+function nextChip(key: string, at: number, count: number): number | null {
+  if (key === "ArrowRight" || key === "ArrowDown") return (at + 1) % count;
+  if (key === "ArrowLeft" || key === "ArrowUp") return (at - 1 + count) % count;
+  if (key === "Home") return 0;
+  if (key === "End") return count - 1;
+  return null;
+}
+
+/**
+ * The saved cards as chips — "Visa final 4242", "Outro cartão" — the
+ * storefront's chip look (the owner's "use the chips system is using today"):
+ * MUI's own `Chip`, which the host's theme already dresses, filled in the
+ * primary colour when chosen.
+ *
+ * One radio group, one Tab stop: only the checked chip (or the first) is
+ * tabbable, and the arrows, Home and End move AND select, as radios do.
+ */
+function SavedChips({ card, copy }: { card: ListCard; copy: PaymentListCopy }): JSX.Element | null {
+  const group = useRef<HTMLDivElement | null>(null);
+  if (card.saved.length === 0) return null;
+  const options = [...card.saved.map((saved) => ({ id: saved.id, label: cardName(copy, saved) })), { id: NEW_CARD, label: copy.otherCard }];
+  const checked = options.findIndex((option) => option.id === card.selection);
+  const stop = checked === -1 ? 0 : checked;
+  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    const to = nextChip(event.key, stop, options.length);
+    const target = to === null ? undefined : options[to];
+    if (to === null || !target) return;
+    event.preventDefault();
+    card.setSelection(target.id);
+    group.current?.querySelectorAll<HTMLElement>('[role="radio"]')[to]?.focus();
+  };
+  return (
+    <Box ref={group} role="radiogroup" aria-label={copy.card.label} onKeyDown={onKeyDown} sx={{ display: "flex", flexWrap: "wrap", gap: 1 }}>
+      {options.map((option, index) => {
+        const on = option.id === card.selection;
+        return (
+          <Chip
+            key={option.id}
+            label={option.label}
+            clickable
+            color={on ? "primary" : "default"}
+            variant="filled"
+            role="radio"
+            aria-checked={on}
+            tabIndex={index === stop ? 0 : -1}
+            onClick={() => card.setSelection(option.id)}
+            data-testid={option.id === NEW_CARD ? "list-card-new" : `list-card-${option.id}`}
+            sx={{
+              fontWeight: on ? 600 : 400,
+              // The keyboard's place among the chips: the rows' own 2px ring (5.1 item 6).
+              "&.Mui-focusVisible, &:focus-visible": { outline: (t) => `${t.spacing(0.25)} solid ${t.palette.primary.main}`, outlineOffset: (t) => t.spacing(0.25) },
+            }}
+          />
+        );
+      })}
+    </Box>
+  );
+}
+
+/** Whether a chosen online row has anything to open — a row with nothing opens no box (L5). */
+export function opensContent(method: string, asked: readonly CheckoutCustomerField[], failure: ListChargeFailure | null): boolean {
+  return method === "CARD" || asked.length > 0 || failure !== null;
+}
+
+/** Move the focus to the card number — the next thing to type once the CPF is complete. */
+function focusCardNumber(scope: HTMLElement | null): void {
+  scope?.querySelector<HTMLInputElement>('input[data-testid="card-number"]')?.focus();
+}
+
+/**
+ * What opens inside a chosen ONLINE option, top to bottom (M11, FN:180-202):
+ * the buyer's missing details, then — for the card — the saved-card chips and
+ * the card fields, then a refusal of the last charge. No left indent: it all
+ * starts where the row's own content starts.
+ */
+export function OnlineContent({
+  method,
+  asked,
+  buyer,
+  onBuyerChange,
+  card,
+  copy,
+  provider,
+  failure,
+}: {
+  method: "PIX" | "CARD" | "GOOGLE_PAY" | "HAND_OFF";
+  asked: readonly CheckoutCustomerField[];
+  buyer: BuyerInfo;
+  onBuyerChange: (buyer: BuyerInfo) => void;
+  card: ListCard;
+  copy: PaymentListCopy;
+  provider: string | null;
+  failure: ListChargeFailure | null;
+}): JSX.Element {
+  const scope = useRef<HTMLDivElement | null>(null);
+  const isCard = method === "CARD";
+  return (
+    <Box ref={scope} sx={{ display: "flex", flexDirection: "column", gap: 1.25 }}>
+      <BuyerInline
+        asked={asked}
+        buyer={buyer}
+        onBuyerChange={onBuyerChange}
+        copy={copy.buyer}
+        provider={provider}
+        onComplete={isCard ? () => focusCardNumber(scope.current) : undefined}
+      />
+      {isCard ? <SavedChips card={card} copy={copy} /> : null}
+      {isCard && card.selection === NEW_CARD ? (
+        <NewCardForm
+          card={card.card}
+          fieldErrors={card.fieldErrors}
+          brand={detectBrand(onlyDigits(card.card.number))}
+          saveCard={card.saveCard}
+          setCard={card.setCard}
+          setFieldErrors={card.setFieldErrors}
+          onSaveCardChange={card.setSaveCard}
+        />
+      ) : null}
+      {failure ? <ChargeFailure message={failure.message} unresolved={failure.code === UNRESOLVED_CODE} /> : null}
+    </Box>
+  );
+}

package/src/components/checkout/list/option-row.tsx

@@ -0,0 +1,123 @@
+import { Box, Radio } from "@mui/material";
+import { alpha, type Theme } from "@mui/material/styles";
+import type { JSX, ReactNode } from "react";
+
+import { useCheckoutComponents } from "../ui";
+
+/**
+ * One row of the one list (FUT-3591): a radio, its label and hint, and — while
+ * chosen — what opens inside it.
+ *
+ * Chosen, the row takes a tint of the primary colour and a thin primary
+ * border; otherwise it is the surface with a neutral one (the prototype's
+ * `.opt` / `.opt.on`). What opens inside starts at the row's own padding,
+ * under the radio, never indented past it (the owner's "remove this gap").
+ *
+ * The radio is MUI's own: the slot contract's `RadioGroup` lays out a group of
+ * label-only options and has no room for content opened inside one, and MUI
+ * is already this package's peer. Every row shares one `name`, so the online
+ * and the door options are ONE group to the keyboard and to a screen reader.
+ */
+const chosenTint = (theme: Theme): string => alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity);
+
+/**
+ * The fields opened inside a chosen row stand on the surface, not on its tint
+ * (the prototype's `.inp`, `background: var(--surface)`). The floating label
+ * keeps no fill of its own: a filled label would stand above the outline as a
+ * tab of surface on the tint.
+ */
+const FIELDS_ON_SURFACE = {
+  "& .MuiOutlinedInput-root": { bgcolor: "background.paper" },
+  // A field's complaint stays on the tint, under the field: at night the error
+  // role's lighter tone (MUI dark #f44336 is 4.05:1 on the 16% tint).
+  "& .MuiFormHelperText-root.Mui-error": {
+    color: (t: Theme) => (t.palette.mode === "dark" ? t.palette.error.light : t.palette.error.main),
+  },
+} as const;
+
+export function OptionRow({
+  name,
+  value,
+  chosen,
+  disabled = false,
+  label,
+  hint,
+  onChoose,
+  testId,
+  children,
+}: {
+  /** The group's name, shared by every row. */
+  name: string;
+  value: string;
+  chosen: boolean;
+  disabled?: boolean;
+  label: string;
+  hint?: string;
+  onChoose: () => void;
+  testId: string;
+  /** Rendered only while chosen. */
+  children?: ReactNode;
+}): JSX.Element {
+  const { Text } = useCheckoutComponents();
+  return (
+    <Box
+      data-testid={testId}
+      data-chosen={chosen ? "true" : "false"}
+      sx={{
+        border: "1px solid",
+        borderColor: chosen ? "primary.main" : "divider",
+        bgcolor: chosen ? chosenTint : "background.paper",
+        borderRadius: 2.5,
+        px: 1.5,
+        opacity: disabled ? 0.6 : 1,
+        // The keyboard's place in the group, drawn on the whole row (5.1 item 6).
+        "&:has(input:focus-visible)": { outline: (t) => `${t.spacing(0.25)} solid ${t.palette.primary.main}`, outlineOffset: (t) => t.spacing(0.25) },
+      }}
+    >
+      <Box
+        component="label"
+        // 48 + the border = the prototype's 50px row, with or without a hint (L3).
+        sx={{ display: "flex", alignItems: "center", gap: 1.5, minHeight: (t) => t.spacing(6), py: 0, cursor: disabled ? "default" : "pointer" }}
+      >
+        <Radio
+          name={name}
+          value={value}
+          checked={chosen}
+          disabled={disabled}
+          onChange={onChoose}
+          size="small"
+          sx={{ p: 0, flex: "none" }}
+          inputProps={{ "data-testid": `${testId}-radio` } as Record<string, string>}
+        />
+        <Box sx={{ display: "flex", flexDirection: "column", minWidth: 0, flex: 1 }}>
+          <Text variant="body" size="md" as="span">
+            {label}
+          </Text>
+          {hint ? (
+            <Text variant="body" size="sm" color="secondary" as="span">
+              {hint}
+            </Text>
+          ) : null}
+        </Box>
+      </Box>
+      {/* Only a row with something to open draws the box for it — no empty band. */}
+      {chosen && children ? (
+        <Box data-testid={`${testId}-content`} sx={{ display: "flex", flexDirection: "column", gap: 1.25, pb: 1.5, ...FIELDS_ON_SURFACE }}>
+          {children}
+        </Box>
+      ) : null}
+    </Box>
+  );
+}
+
+/**
+ * "PAGAR AGORA, PELO APP" / "PAGAR NA ENTREGA" — the theme's overline (small
+ * capitals, its own tracking), bold and muted. `id` labels the group under it.
+ */
+export function GroupHeading({ id, children }: { id: string; children: string }): JSX.Element {
+  return (
+    <Box component="p" id={id} sx={{ m: 0, typography: "overline", lineHeight: 1.5, fontWeight: 700, color: "text.secondary" }}>
+      {children}
+    </Box>
+  );
+}

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

@@ -0,0 +1,166 @@
+import { useCallback, useEffect, useMemo, useState, type JSX } from "react";
+
+import type { CheckoutBasketIdentity } from "../basket";
+import { CartChangedBoundary } from "../cart-changed";
+import { displayTotals } from "../checkout-totals";
+import { usePaymentPixStage } from "../payment-step-layout";
+import { PixStageProvider } from "../pix-stage";
+import { PixView } from "../pix-view";
+import { HostedLinkScreen } from "../providers/hosted-link";
+import type { BuyerContact, BuyerInfo, CheckoutProviderConfig, PaymentMethod } from "../types";
+import type { useCheckoutController } from "../use-checkout-controller";
+
+import { PaymentListProvider } from "./context";
+import { ListBar, WaitingLine } from "./list-bar";
+import { ListFace } from "./list-face";
+import type { ListCapability } from "./use-capability";
+import type { ListCharge } from "./use-list-charge";
+import type { ListState } from "./use-list-state";
+import type { CheckoutPaymentList } from "./types";
+import { useListCapability } from "./use-capability";
+import { useListCharge } from "./use-list-charge";
+import { useListState } from "./use-list-state";
+
+type Controller = ReturnType<typeof useCheckoutController>;
+
+interface PaymentListStepProps {
+  c: Controller;
+  list: CheckoutPaymentList;
+  cart: { totalLabel: string; totalItems: number; identity?: CheckoutBasketIdentity };
+  /** Settling a balance: its totals win, and its basket is no signal. */
+  totalOverride?: { label: string; items: number };
+  providerConfig: CheckoutProviderConfig | null | undefined;
+  tenantSlug: string | undefined;
+  taxIdOnFile: boolean;
+  /** What the buyer arrived with — the asked fields are decided against it. */
+  defaultBuyer: BuyerInfo | undefined;
+  saveBuyerContact?: (contact: BuyerContact) => void;
+  /** The Dados step's consent sentence — the list asks it beside the details it asks. */
+  consentLabel: string;
+  pollIntervalMs?: number;
+}
+
+/** The store's provider name, as its chain head published it — `null` when it did not. */
+function providerName(config: CheckoutProviderConfig | null): string | null {
+  return config?.chain?.[0]?.displayName?.trim() || null;
+}
+
+/** "Abrindo a página da InfinitePay…": the hand-off is under way, the bar says what it waits for. */
+function HandOffFace({ props, method }: { props: PaymentListStepProps; method: PaymentMethod }): JSX.Element {
+  const config = props.providerConfig ?? null;
+  const { c, list } = props;
+  return (
+    <>
+      <HostedLinkScreen order={null} buyer={c.buyer} config={config} method={method} onResolved={c.handleResolved} />
+      <ListBar summary={list.summary}>
+        <WaitingLine text={list.copy.handOffWaiting(providerName(config))} />
+      </ListBar>
+    </>
+  );
+}
+
+/** The hand-off was started, until the raise for it is refused. */
+function useHandingOff(createError: string | null): [boolean, () => void] {
+  const [handingOff, setHandingOff] = useState(false);
+  useEffect(() => {
+    if (createError) setHandingOff(false);
+  }, [createError]);
+  return [handingOff, useCallback(() => setHandingOff(true), [])];
+}
+
+/** "Prefere pagar com cartão?" — back to the list, with that method chosen. */
+function usePreferMethod(c: Controller, choose: ListState["choose"]): (method: PaymentMethod) => void {
+  const { setMethod } = c;
+  return useCallback(
+    (method: PaymentMethod) => {
+      setMethod(method);
+      choose({ kind: "online", method: method === "PIX" ? "PIX" : "CARD" });
+    },
+    [setMethod, choose],
+  );
+}
+
+/** The list face, with what the step gathered for it. */
+function ListFaceFor({ props, state, charge, cap, onHandOff }: {
+  props: PaymentListStepProps;
+  state: ListState;
+  charge: ListCharge;
+  cap: ListCapability;
+  onHandOff: () => void;
+}): JSX.Element {
+  const { c, cart, totalOverride } = props;
+  const config = props.providerConfig ?? null;
+  return (
+    <ListFace
+      c={c}
+      list={props.list}
+      state={state}
+      charge={charge}
+      cap={cap}
+      config={config}
+      total={displayTotals(totalOverride, cart).label}
+      provider={providerName(config)}
+      taxIdOnFile={props.taxIdOnFile}
+      tenantSlug={props.tenantSlug}
+      basket={totalOverride ? undefined : cart.identity}
+      pollIntervalMs={props.pollIntervalMs ?? 2500}
+      saveBuyerContact={props.saveBuyerContact}
+      onHandOff={onHandOff}
+    />
+  );
+}
+
+/**
+ * The Pagamento step as ONE list (FUT-3591, FUT-3592) — see `./types.ts`.
+ *
+ * Three faces, chosen from what the controller holds: the raised PIX (its code
+ * and the wait), a hand-off on its way to the provider's page, and otherwise
+ * the list with its bar. Nothing here raises on a pick; the bar's button is
+ * the only way an order is made, and the card's 5-second bar is the buyer's
+ * chance to stop it (no confirmation dialog: owner, 2026-10-14).
+ */
+export function PaymentListStep(props: PaymentListStepProps): JSX.Element {
+  const { c, list } = props;
+  const config = props.providerConfig ?? null;
+  const cap = useListCapability(config, list.totalCents);
+  const state = useListState({
+    config,
+    capability: cap,
+    tenantSlug: props.tenantSlug,
+    fresh: c.freshInstrument,
+    arrivedWith: props.defaultBuyer,
+    taxIdOnFile: props.taxIdOnFile,
+    onChoiceChange: list.onChoiceChange,
+  });
+  const charge = useListCharge({ ...c, cartTotal: displayTotals(props.totalOverride, props.cart).label });
+  const [handingOff, startHandOff] = useHandingOff(c.createError);
+  const pixStage = usePaymentPixStage(cap, usePreferMethod(c, state.choose));
+  const pix = c.order?.method === "PIX" ? c.order : null;
+  const consent = useMemo(
+    () => ({ label: props.consentLabel, checked: c.saveProfile, onChange: c.setSaveProfile }),
+    [props.consentLabel, c.saveProfile, c.setSaveProfile],
+  );
+  const face = pix ? (
+    <PixView order={pix} onResolved={c.handleResolved} pollIntervalMs={props.pollIntervalMs} />
+  ) : handingOff ? (
+    <HandOffFace props={props} method={c.method ?? "PIX"} />
+  ) : (
+    <ListFaceFor props={props} state={state} charge={charge} cap={cap} onHandOff={startHandOff} />
+  );
+  return (
+    <PaymentListProvider list={list} onLeavePix={c.dropOrder} consent={consent}>
+      <PixStageProvider stage={pixStage}>
+        <CartChangedBoundary
+          order={c.order}
+          creating={c.creating}
+          onGenerate={(method) => void c.startPayment(method)}
+          refresh={c.refresh}
+          basket={props.totalOverride ? undefined : props.cart.identity}
+          actionInBar={Boolean(pix)}
+        >
+          {face}
+        </CartChangedBoundary>
+      </PixStageProvider>
+    </PaymentListProvider>
+  );
+}