@12-apps/payments-frontend 3.39.0 → 3.41.0

package/src/components/checkout/list/list-memory.ts

@@ -0,0 +1,96 @@
+import { useEffect } from "react";
+
+import { NEW_CARD } from "../../../card";
+import { deferredCopy } from "../pix-parts";
+
+import { bankFlowOs } from "./bank-apps";
+import { usePaymentListMode, type PaymentListMode } from "./context";
+import type { ListState } from "./use-list-state";
+import type { CheckoutPaymentList, PixBankId } from "./types";
+
+/**
+ * What the list does with the host's memory of the buyer (FUT-3611, FUT-3612):
+ * the bank a Pix opens in, and the charge "Pedir em 1 toque" armed.
+ */
+
+/** How long after the step opens an armed charge may still start by itself. */
+export const ARMED_WINDOW_MS = 15_000;
+
+/** The bank flow's remembered bank, on a phone — what the Pix button opens. */
+function rememberedBank(list: CheckoutPaymentList): PixBankId | null {
+  const bank = list.pixBank;
+  if (!bank?.remembered || !bankFlowOs(bank.phone)) return null;
+  return bank.remembered;
+}
+
+/**
+ * Pix with the host's bank flow (FUT-3612): the clipboard is opened HERE,
+ * inside the tap, for a code the server has not answered yet — the Pix face
+ * writes it the moment it arrives, then opens the remembered bank (or, for
+ * "Abrir outro banco", shows the six).
+ */
+export function armPixCopy(list: CheckoutPaymentList, mode: PaymentListMode, pick: boolean): void {
+  if (!list.pixBank) return;
+  mode.pixIntent.current?.copy.fail();
+  const os = bankFlowOs(list.pixBank.phone);
+  mode.pixIntent.current = { copy: deferredCopy(), bank: os && !pick ? list.pixBank.remembered : null, pick };
+}
+
+function pixChosen(state: ListState): boolean {
+  return state.choice?.kind === "online" && state.choice.method === "PIX";
+}
+
+/** Pix with the bank flow: "Gerar e copiar o Pix", or "Gerar, copiar e abrir o Nubank". */
+export function pixBankLabel(list: CheckoutPaymentList, state: ListState): string | null {
+  const bank = list.pixBank;
+  if (!bank || !pixChosen(state)) return null;
+  const remembered = rememberedBank(list);
+  return remembered ? bank.copy.generateCopyAndOpen(bank.copy.names[remembered]) : bank.copy.generateAndCopy;
+}
+
+/** "Abrir outro banco" under the button: Pix chosen, a bank remembered, a phone, and the button free to act. */
+export function otherBankShown(list: CheckoutPaymentList, state: ListState, free: boolean): boolean {
+  return free && pixChosen(state) && rememberedBank(list) !== null;
+}
+
+/** A saved card — not the fields — is what the card choice will charge. */
+function savedCardChosen(state: ListState): boolean {
+  const { choice, card } = state;
+  if (choice?.kind !== "online" || choice.method !== "CARD") return false;
+  return card.selection !== null && card.selection !== NEW_CARD;
+}
+
+/**
+ * The armed charge may start now: the host armed it, the saved card the
+ * consent named is the one chosen, and nothing (`free`) holds the button.
+ */
+export function armedReady(list: CheckoutPaymentList, state: ListState, free: boolean): boolean {
+  if (!list.armedCharge || !free || !savedCardChosen(state)) return false;
+  return list.armedCardId === undefined || state.card.selection === list.armedCardId;
+}
+
+/**
+ * "Pedir em 1 toque" opened this checkout (FUT-3611): start the card's bar by
+ * itself, ONCE per step — as soon as {@link armedReady} holds, within
+ * {@link ARMED_WINDOW_MS}. Anything after Cancelar never charges by itself.
+ */
+export function useArmedCharge(ready: boolean, act: () => void): void {
+  const mode = usePaymentListMode();
+  useEffect(() => {
+    const armed = mode?.armed.current;
+    if (!ready || !armed || armed.spent) return;
+    // Spent either way: fired now, or too late to be the tap's own charge.
+    armed.spent = true;
+    if (Date.now() - armed.since <= ARMED_WINDOW_MS) act();
+  }, [ready, act, mode]);
+}
+
+/** A Pix press whose code never came (the raise was refused) gives the clipboard up. */
+export function useDropRefusedCopy(createError: unknown): void {
+  const mode = usePaymentListMode();
+  useEffect(() => {
+    if (!createError || !mode?.pixIntent.current) return;
+    mode.pixIntent.current.copy.fail();
+    mode.pixIntent.current = null;
+  }, [createError, mode]);
+}

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

@@ -1,5 +1,5 @@
 import { Box, useTheme } from "@mui/material";
-import type { JSX, KeyboardEvent, MouseEvent, ReactNode } from "react";
+import { useEffect, useRef, useState, type JSX, type KeyboardEvent, type MouseEvent, type ReactNode } from "react";
 
 import { usePaymentRefresh, usePaymentStale } from "../cart-changed";
 import { useCheckoutCopy } from "../copy-context";
@@ -9,8 +9,11 @@ import type { PixAfterCopyCopy } from "../screens-copy";
 import type { CheckoutOrder, PixCharge } from "../types";
 import { useCheckoutComponents } from "../ui";
 
+import { bankFlowOs, type PhoneOs } from "./bank-apps";
 import type { PaymentListMode } from "./context";
 import { ListBar, ActionButton, WaitingLine } from "./list-bar";
+import { PixBanks, usePixBankState, type PixBankState } from "./pix-banks";
+import type { CheckoutPixBank, PixBankId } from "./types";
 
 /**
  * The Pix, in the one list (FUT-3592 #3): "Gerar Pix" already created the
@@ -146,6 +149,42 @@ interface ListPixFaceProps {
   onPreferCard?: () => void;
   /** The poll's stalled panel, when it has one. */
   footer: ReactNode;
+  /** The clipboard alone, saying whether it took the code — the bank flow's copy. */
+  writeClipboard: () => Promise<boolean>;
+  setAfterCopy: (afterCopy: boolean) => void;
+}
+
+/** A phone with a bank remembered: the copy opens it too, and keeps the way to another (FUT-3612). */
+function rememberedOnPhone(flow: BankFlow | null): PixBankId | null {
+  return flow?.os ? flow.state.chosen : null;
+}
+
+/** "Copiar e abrir no Nubank" with a remembered bank on a phone, else the plain copy. */
+function copyLabel(plain: string, flow: BankFlow | null): string {
+  const remembered = rememberedOnPhone(flow);
+  return remembered && flow ? flow.bank.copy.copyAndOpen(flow.bank.copy.names[remembered]) : plain;
+}
+
+/** "Abrir outro banco", when a remembered bank on a phone is what the copy opens. */
+function otherBankLabel(flow: BankFlow | null): string | null {
+  return flow && rememberedOnPhone(flow) ? flow.bank.copy.openOther : null;
+}
+
+/** The bar's one control: held, "Atualizar pagamento", the wait after the copy, or the copy. */
+function PixBarAction({ mode, afterCopy, onCopy, copyLabel }: {
+  mode: PaymentListMode;
+  afterCopy: boolean;
+  onCopy: () => void;
+  copyLabel: string;
+}): JSX.Element {
+  const stale = usePaymentStale();
+  const refresh = usePaymentRefresh();
+  const refreshLabel = useCheckoutCopy().screens.cartChanged.refreshAction;
+  const { hold } = mode.list;
+  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={mode.list.copy.pixFace.waiting} />;
+  return <ActionButton label={copyLabel} total={null} disabled={stale} onClick={onCopy} />;
 }
 
 /**
@@ -153,30 +192,126 @@ interface ListPixFaceProps {
  * 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 {
+function ListPixBar({ mode, afterCopy, onCopy, bankFlow, onOtherBank }: {
+  mode: PaymentListMode;
+  afterCopy: boolean;
+  onCopy: () => void;
+  bankFlow: BankFlow | null;
+  onOtherBank: () => 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} />;
-  };
+  const settled = !hold && !stale;
+  const other = settled && !afterCopy ? otherBankLabel(bankFlow) : null;
   return (
-    <ListBar summary={mode.list.summary} reason={hold?.reason ?? null} live={afterCopy && !hold && !stale ? copy.waiting : null}>
-      {action()}
+    <ListBar summary={mode.list.summary} reason={hold?.reason ?? null} live={afterCopy && settled ? copy.waiting : null}>
+      <PixBarAction mode={mode} afterCopy={afterCopy} onCopy={onCopy} copyLabel={copyLabel(copy.copyCode, bankFlow)} />
+      {other ? <OtherBankLink label={other} onClick={onOtherBank} /> : null}
     </ListBar>
   );
 }
 
+/** "Abrir outro banco" — a centred text link under the bar's button (FUT-3612). */
+export function OtherBankLink({ label, onClick }: { label: string; onClick: () => void }): JSX.Element {
+  const { Button } = useCheckoutComponents();
+  return (
+    <Box sx={{ display: "flex", justifyContent: "center", "& button": { textDecoration: "underline", minHeight: (t) => t.spacing(5.5) } }}>
+      <Button variant="text" color="primary" size="sm" onClick={onClick} dataTestId="pix-open-other-bank">
+        {label}
+      </Button>
+    </Box>
+  );
+}
+
+/** The Pix-to-bank flow, when the host offers it (FUT-3612). */
+interface BankFlow {
+  bank: CheckoutPixBank;
+  /** `null` on a computer: copy-and-say, no banks. */
+  os: PhoneOs | null;
+  state: PixBankState;
+}
+
+/** The toast after a copy: which bank opens, or that one is to be chosen. */
+function copiedSentence(flow: BankFlow, opening: PixBankId | null): string {
+  const { copy } = flow.bank;
+  if (!flow.os) return copy.copied;
+  return opening ? copy.copiedOpening(copy.names[opening]) : copy.copiedPick;
+}
+
+/** A copy the clipboard took: the after-copy face, the grid when asked for, the toast, and the bank opened. */
+function landCopy(at: { mode: PaymentListMode; flow: BankFlow; ports: CopyPorts; stale: boolean }, opening: PixBankId | null, grid: boolean): void {
+  const { mode, flow, ports } = at;
+  ports.setAfterCopy(true);
+  if (grid) flow.state.showGrid();
+  const target = flow.os ? opening : null;
+  mode.list.notify?.(copiedSentence(flow, target));
+  if (target && !at.stale) flow.state.open(target, false);
+}
+
+/**
+ * Every copy on the bank flow ends the same way: the after-copy face, the
+ * toast, and the bank opened — the one chosen, or none when the grid is asked
+ * for. A copy the clipboard refused does none of it (the code stays to copy by
+ * hand).
+ */
+function useBankCopies(mode: PaymentListMode, flow: BankFlow | null, pix: PixCharge, ports: CopyPorts) {
+  const stale = usePaymentStale();
+  const live = useRef(true);
+  useEffect(() => {
+    live.current = true;
+    return () => {
+      live.current = false;
+    };
+  }, []);
+  const land = (ok: boolean, grid: boolean, target: PixBankId | null): void => {
+    if (ok && live.current && flow) landCopy({ mode, flow, ports, stale }, grid ? null : target, grid);
+  };
+  // The bar's press already opened the clipboard, waiting for this code.
+  useEffect(() => {
+    const intent = mode.pixIntent.current;
+    if (!intent) return;
+    mode.pixIntent.current = null;
+    intent.copy.resolve(pix.copyPaste);
+    void intent.copy.done.then((ok) => land(ok, intent.pick, intent.pick ? null : intent.bank));
+    // Once, as the code arrives.
+  }, []);
+  const copyThen = (grid: boolean) => () =>
+    void ports.writeClipboard().then((ok) => land(ok, grid, flow?.state.chosen ?? null));
+  return { copy: copyThen(false), other: copyThen(true) };
+}
+
+interface CopyPorts {
+  writeClipboard: () => Promise<boolean>;
+  setAfterCopy: (afterCopy: boolean) => void;
+}
+
+/** The bank flow's state, or `null` when the host does not offer it. */
+function useBankFlow(mode: PaymentListMode): BankFlow | null {
+  const bank = mode.list.pixBank;
+  const [os] = useState(() => bankFlowOs(bank?.phone));
+  const stale = usePaymentStale();
+  const startOnGrid = mode.pixIntent.current?.pick ?? false;
+  const state = usePixBankState(bank?.remembered ?? null, bank?.onPick ?? noPick, os, stale, startOnGrid);
+  return bank ? { bank, os, state } : null;
+}
+
+function noPick(): void {
+  // No bank flow: nothing to remember.
+}
+
 /** 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;
+  const flow = useBankFlow(mode);
+  const copies = useBankCopies(mode, flow, pix, props);
+  const stale = usePaymentStale();
+  // On a phone the bank flow takes the copy: "Copiar e abrir o Nubank", the
+  // toast, the app. Without it — or on a computer — the copy is today's.
+  const onCopy = flow ? copies.copy : props.onCopy;
+  const banks = flow?.os ? { node: <PixBanks bank={flow.bank} state={flow.state} stale={stale} />, replacesChecklist: flow.state.chosen === null } : undefined;
   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">
@@ -189,18 +324,19 @@ export function ListPixFace(props: ListPixFaceProps & { mode: PaymentListMode })
           totalLabel={mode.list.amountDueLabel ?? order.totalLabel}
           deadline={props.time}
           justCopied={props.justCopied}
-          onCopyAgain={props.onCopyAgain}
+          onCopyAgain={flow ? copies.copy : props.onCopyAgain}
           onShowQr={() => {
             mode.setQrOpen(true);
             props.onShowQr();
           }}
           onPreferCard={props.onPreferCard}
           footer={props.footer}
+          banks={banks}
         />
       ) : (
-        <BeforeCopy mode={mode} pix={pix} time={props.time} onCopy={props.onCopy} onChangeMethod={mode.onLeavePix} footer={props.footer} />
+        <BeforeCopy mode={mode} pix={pix} time={props.time} onCopy={onCopy} onChangeMethod={mode.onLeavePix} footer={props.footer} />
       )}
-      <ListPixBar mode={mode} afterCopy={afterCopy} onCopy={props.onCopy} />
+      <ListPixBar mode={mode} afterCopy={afterCopy} onCopy={onCopy} bankFlow={flow} onOtherBank={copies.other} />
     </Box>
   );
 }

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

@@ -130,6 +130,7 @@ export function PaymentListStep(props: PaymentListStepProps): JSX.Element {
     fresh: c.freshInstrument,
     arrivedWith: props.defaultBuyer,
     taxIdOnFile: props.taxIdOnFile,
+    lastMethod: list.lastMethod,
     onChoiceChange: list.onChoiceChange,
   });
   const charge = useListCharge({ ...c, cartTotal: displayTotals(props.totalOverride, props.cart).label, dueCents: list.totalCents });

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

@@ -0,0 +1,178 @@
+import { Box } from "@mui/material";
+import { useCallback, useEffect, useRef, useState, type JSX } from "react";
+
+import { Emphasized } from "../pix-parts";
+import { useCheckoutComponents } from "../ui";
+
+import { BankLogo } from "./bank-logos";
+import { openBankApp, PIX_BANKS, type PhoneOs } from "./bank-apps";
+import type { CheckoutPixBank, PixBankId } from "./types";
+
+/**
+ * The after-copy face's way to the bank app (FUT-3612), on a phone: with no
+ * bank chosen, the six as a 2×3 grid of large buttons under "Abra seu banco e
+ * cole em Pix copia e cola"; with one, "Abrindo o **Nubank**…" and "Outro
+ * banco" in one row — or, when the app did not open, the sentence that says so
+ * with "Tentar de novo".
+ */
+
+export type BankStatus = "opening" | "failed";
+
+export interface PixBankState {
+  /** The bank this face opens, or `null` while the grid is shown. */
+  chosen: PixBankId | null;
+  status: BankStatus | null;
+  /** Open `bank` (a pick from the grid remembers it). */
+  open: (bank: PixBankId, remember: boolean) => void;
+  /** "Outro banco": the grid again. The stored bank is replaced only by the next pick. */
+  showGrid: () => void;
+}
+
+/**
+ * The bank face's state. It starts on the remembered bank — unless the press
+ * asked for the grid ("Abrir outro banco") — and never opens anything while
+ * the code is veiled (FUT-3535: an app opened then would paste the old amount).
+ */
+export function usePixBankState(
+  remembered: PixBankId | null,
+  onPick: (bank: PixBankId) => void,
+  os: PhoneOs | null,
+  stale: boolean,
+  startOnGrid: boolean,
+): PixBankState {
+  const [chosen, setChosen] = useState<PixBankId | null>(startOnGrid ? null : remembered);
+  const [status, setStatus] = useState<BankStatus | null>(null);
+  const live = useRef(true);
+  useEffect(() => {
+    // Set in the body too: a remount (StrictMode's, or a parent's) runs the
+    // cleanup first, and a flag left false would swallow every "não abriu".
+    live.current = true;
+    return () => {
+      live.current = false;
+    };
+  }, []);
+  const open = useCallback(
+    (next: PixBankId, remember: boolean) => {
+      if (stale || !os) return;
+      setChosen(next);
+      setStatus("opening");
+      if (remember) onPick(next);
+      void openBankApp(next, os).then((opened) => {
+        if (live.current && !opened) setStatus("failed");
+      });
+    },
+    [os, onPick, stale],
+  );
+  const showGrid = useCallback(() => {
+    setChosen(null);
+    setStatus(null);
+  }, []);
+  return { chosen, status, open, showGrid };
+}
+
+function OtherLink({ label, onClick, testId }: { label: string; onClick: () => void; testId: string }): JSX.Element {
+  const { Button } = useCheckoutComponents();
+  return (
+    <Box sx={{ ml: "auto", flex: "none", "& button": { textDecoration: "underline", minHeight: (t) => t.spacing(5.5), px: 0.5 } }}>
+      <Button variant="text" color="primary" size="sm" onClick={onClick} dataTestId={testId}>
+        {label}
+      </Button>
+    </Box>
+  );
+}
+
+/** "Abrindo o **Nubank**…" · "Outro banco" — or "Não conseguimos abrir…" · "Tentar de novo" · "Outro banco". */
+function Opening({ bank, state, chosen }: { bank: CheckoutPixBank; state: PixBankState; chosen: PixBankId }): JSX.Element {
+  const { Button, Text } = useCheckoutComponents();
+  const name = bank.copy.names[chosen];
+  const failed = state.status === "failed";
+  return (
+    <Box data-testid="pix-bank-opening" data-status={state.status ?? "opening"} sx={{ display: "flex", alignItems: "center", flexWrap: "wrap", gap: 1 }}>
+      <Box component="span" role={failed ? "alert" : "status"} sx={{ minWidth: 0 }}>
+        <Text variant="body" size="sm" as="span">
+          {failed ? bank.copy.notOpened(name) : <Emphasized text={bank.copy.opening(name)} />}
+        </Text>
+      </Box>
+      {failed ? (
+        <Box sx={{ "& button": { minHeight: (t) => t.spacing(5.5) } }}>
+          <Button variant="outline" color="primary" size="sm" onClick={() => state.open(chosen, false)} dataTestId="pix-bank-retry">
+            {bank.copy.retry}
+          </Button>
+        </Box>
+      ) : null}
+      <OtherLink label={bank.copy.other} onClick={state.showGrid} testId="pix-bank-other" />
+    </Box>
+  );
+}
+
+/** One of the six: the bank's logo at 32px and its name, ≈56px tall. */
+/** The grid's own width, never the window's: under it, a cell is too narrow for logo and name side by side. */
+const NARROW_GRID = "@container pixbanks (max-width: 289.95px)";
+
+function BankButton({ bank, id, onPick, disabled }: { bank: CheckoutPixBank; id: PixBankId; onPick: () => void; disabled: boolean }): JSX.Element {
+  const { Button } = useCheckoutComponents();
+  const name = bank.copy.names[id];
+  const label = bank.copy.open(name);
+  const lead = label.slice(0, label.lastIndexOf(name.name));
+  return (
+    <Box
+      sx={{
+        minWidth: 0,
+        "& button": {
+          width: "100%",
+          minHeight: (t) => t.spacing(7),
+          borderRadius: 1.5,
+          justifyContent: "flex-start",
+          textAlign: "left",
+          gap: 1.25,
+          px: 1.5,
+          color: "text.primary",
+          borderColor: "divider",
+          // A 320px phone gives the grid ~254px (each half ~123px): logo
+          // beside "Santander" no longer fits, so the logo goes above the name.
+          [NARROW_GRID]: {
+            flexDirection: "column",
+            justifyContent: "center",
+            textAlign: "center",
+            gap: 0.5,
+            px: 1,
+            py: 1,
+            "& .MuiButton-startIcon, & .MuiButton-start": { m: 0 },
+          },
+        },
+        "& button, & button *": { fontWeight: 600 },
+      }}
+    >
+      <Button variant="outline" color="neutral" size="md" fullWidth disabled={disabled} icon={<BankLogo bank={id} />} onClick={onPick} dataTestId={`pix-bank-${id}`}>
+        {/* The accessible name is "Abrir Nubank"; the eye reads the logo and "Nubank". */}
+        <Box component="span" sx={{ position: "absolute", width: "1px", height: "1px", overflow: "hidden", clip: "rect(0 0 0 0)", whiteSpace: "nowrap" }}>
+          {lead}
+        </Box>
+        {name.name}
+      </Button>
+    </Box>
+  );
+}
+
+function Grid({ bank, state, stale }: { bank: CheckoutPixBank; state: PixBankState; stale: boolean }): JSX.Element {
+  const { Text } = useCheckoutComponents();
+  return (
+    <Box data-testid="pix-bank-grid" sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
+      <Text variant="body" size="md" weight="semibold" as="p" style={{ margin: 0 }}>
+        {bank.copy.listTitle}
+      </Text>
+      <Box sx={{ containerType: "inline-size", containerName: "pixbanks" }}>
+        <Box sx={{ display: "grid", gridTemplateColumns: "repeat(2, minmax(0, 1fr))", gap: 1 }}>
+          {PIX_BANKS.map((id) => (
+            <BankButton key={id} bank={bank} id={id} disabled={stale} onPick={() => state.open(id, true)} />
+          ))}
+        </Box>
+      </Box>
+    </Box>
+  );
+}
+
+/** The grid, or the bank being opened. */
+export function PixBanks({ bank, state, stale }: { bank: CheckoutPixBank; state: PixBankState; stale: boolean }): JSX.Element {
+  return state.chosen ? <Opening bank={bank} state={state} chosen={state.chosen} /> : <Grid bank={bank} state={state} stale={stale} />;
+}

package/src/components/checkout/list/types.ts

@@ -131,6 +131,97 @@ export interface CheckoutPaymentList {
    * the list returns to its rows.
    */
   amountDueLabel?: string;
+  /**
+   * The buyer's last ONLINE way to pay, as the host remembers it (FUT-3611) —
+   * chosen for them before they touch anything, when the store offers it: Pix
+   * as Pix; a card as the saved card used last. Absent or `null` ⇒ the saved
+   * card rule alone. A door tender is never chosen for the buyer.
+   */
+  lastMethod?: "PIX" | "CARD" | null;
+  /**
+   * "Pedir em 1 toque" opened this checkout (FUT-3611): the tap on the
+   * cardápio was the buyer's consent, so the card's 5-second bar starts by
+   * itself once the saved card is chosen and nothing holds the button — ONCE
+   * per step, and only within {@link ARMED_WINDOW_MS} of the step opening: a
+   * checkout that lands held (a field to fill) never charges by itself minutes
+   * later. Without a saved card it does nothing.
+   */
+  armedCharge?: boolean;
+  /**
+   * The saved card the host's consent named (the 1-tap offer's). Given, the
+   * armed charge fires only on THAT card; a different selection never charges
+   * by itself.
+   */
+  armedCardId?: string;
+  /**
+   * Host content under the 5-second bar's Cancelar while it counts — the
+   * storefront's "Cancelar e desativar a compra em 1 toque". It is handed the
+   * bar's own cancel, so a link there stops the charge before doing its own.
+   */
+  chargeFooter?: (cancel: () => void) => ReactNode;
+  /**
+   * Pix straight to the buyer's bank app (FUT-3612) — on a phone only: the
+   * button generates AND copies the code, a short message says so through
+   * `notify`, and the after-copy face offers the six banks (or opens the one
+   * remembered). Absent ⇒ today's Pix: "Gerar Pix", then a tap to copy.
+   */
+  pixBank?: CheckoutPixBank;
+  /** Says a short sentence in the host's own toast — "Código Pix copiado". */
+  notify?: (message: string) => void;
+}
+
+/** The six banks the Pix face offers to open, in the prototype's order. */
+export type PixBankId = "nubank" | "itau" | "bradesco" | "bb" | "caixa" | "santander";
+
+/** `CheckoutPaymentList.pixBank`. */
+export interface CheckoutPixBank {
+  /** The bank the buyer picked last time, as the host stored it — or `null`. */
+  remembered: PixBankId | null;
+  /** A bank was picked: the host remembers it for next time (a new pick replaces it). */
+  onPick: (bank: PixBankId) => void;
+  /** The words; ship with the list's pack (`PIX_BANK_COPY`). */
+  copy: PixBankCopy;
+  /**
+   * Whether this device can open a bank app — a phone. Absent ⇒ read from the
+   * browser (Android or iOS). A computer keeps today's face and gets only the
+   * generate-and-copy.
+   */
+  phone?: boolean;
+}
+
+/** A bank's name and the article pt-BR puts before it ("o Nubank", "a Caixa"). */
+export interface PixBankName {
+  name: string;
+  /** "Abrir o Nubank" / "Abrir a Caixa" — the article with its trailing space, or "" for none. */
+  the: string;
+}
+
+export interface PixBankCopy {
+  names: Record<PixBankId, PixBankName>;
+  /** The bar's button with no bank remembered — "Gerar e copiar o Pix". */
+  generateAndCopy: string;
+  /** With one remembered — "Gerar, copiar e abrir o Nubank". */
+  generateCopyAndOpen: (bank: PixBankName) => string;
+  /** The before-copy face's button with one remembered — "Copiar e abrir o Nubank". */
+  copyAndOpen: (bank: PixBankName) => string;
+  /** The link under the button — "Abrir outro banco". */
+  openOther: string;
+  /** Over the grid — "Abra seu banco e cole em Pix copia e cola". */
+  listTitle: string;
+  /** A bank button's accessible name — "Abrir Nubank". */
+  open: (bank: PixBankName) => string;
+  /** "Abrindo o **Nubank**…" — `**` marks the bold span. */
+  opening: (bank: PixBankName) => string;
+  /** "Outro banco". */
+  other: string;
+  /** "Não conseguimos abrir o Nubank. O app está instalado neste celular?" */
+  notOpened: (bank: PixBankName) => string;
+  /** "Tentar de novo". */
+  retry: string;
+  /** The toasts. */
+  copied: string;
+  copiedPick: string;
+  copiedOpening: (bank: PixBankName) => string;
 }
 
 /** The list's words — a pack per locale ships at `@12-apps/payments-frontend/locales`. */

package/src/components/checkout/list/use-list-state.ts

@@ -59,6 +59,7 @@ function usePreselect(
   rows: readonly OnlineRow[],
   saved: readonly SavedCard[],
   fresh: boolean,
+  lastMethod: "PIX" | "CARD" | null,
   apply: (choice: CheckoutListChoice, selection: string | null) => void,
   touched: { current: boolean },
 ): void {
@@ -66,9 +67,9 @@ function usePreselect(
   useEffect(() => {
     if (done.current || touched.current || !loaded) return;
     done.current = true;
-    const pick = preselection(rows, saved, fresh);
+    const pick = preselection(rows, saved, fresh, lastMethod);
     if (pick) apply(pick.choice, pick.selection);
-  }, [loaded, rows, saved, fresh, apply, touched]);
+  }, [loaded, rows, saved, fresh, lastMethod, apply, touched]);
 }
 
 /**
@@ -96,6 +97,8 @@ export function useListState(input: {
   fresh: boolean;
   arrivedWith: BuyerInfo | undefined;
   taxIdOnFile: boolean;
+  /** The buyer's last online method, from the host (FUT-3611). */
+  lastMethod?: "PIX" | "CARD" | null;
   onChoiceChange?: (choice: CheckoutListChoice | null) => void;
 }): ListState {
   const { capability } = input;
@@ -112,7 +115,7 @@ export function useListState(input: {
     },
     [setSelection],
   );
-  usePreselect(loaded, rows, cards, input.fresh, apply, touched);
+  usePreselect(loaded, rows, cards, input.fresh, input.lastMethod ?? null, apply, touched);
   const choose = useCallback(
     (next: CheckoutListChoice) => {
       touched.current = true;

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

@@ -123,6 +123,12 @@ interface PixAfterCopyProps {
   onPreferCard?: () => void;
   /** The poll's line ("Verificando…", or the stalled panel that replaces it). */
   footer: ReactNode;
+  /**
+   * The way to the bank app, on a phone (FUT-3612): drawn where the heading
+   * was — the toast already said the code was copied and the bar says what it
+   * waits for — and, while it is the six banks, in place of the checklist.
+   */
+  banks?: { node: ReactNode; replacesChecklist: boolean };
 }
 
 /** The narrow layout's two secondaries side by side; wide, the card link joins the row. */
@@ -164,8 +170,8 @@ export function PixAfterCopy(props: PixAfterCopyProps): JSX.Element {
   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 }}>
-        <Heading words={words} totalLabel={totalLabel} />
-        <Checklist words={words} deadline={deadline} />
+        {props.banks ? props.banks.node : <Heading words={words} totalLabel={totalLabel} />}
+        {props.banks?.replacesChecklist ? null : <Checklist words={words} deadline={deadline} />}
         <Actions {...props} />
         {footer}
         {onPreferCard ? (