@12-apps/payments-frontend 3.38.0 → 3.40.0

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

@@ -10,7 +10,11 @@ import type { BuyerContact, CheckoutProviderConfig } from "../types";
 import type { useCheckoutController } from "../use-checkout-controller";
 import { useCheckoutComponents } from "../ui";
 
+
 import { actionLabel, blockedReason, cardName } from "./choice";
+import { usePaymentListMode, type PaymentListMode } from "./context";
+import { armPixCopy, armedReady, otherBankShown, pixBankLabel, useArmedCharge, useDropRefusedCopy } from "./list-memory";
+import { OtherBankLink } from "./list-pix";
 import { ChoiceList } from "./choice-list";
 import { CardRun, WalletRun, type ListChargeFailure } from "./charge-runners";
 import { ActionButton, ChargeBar, GooglePayAction, ListBar } from "./list-bar";
@@ -66,11 +70,20 @@ function saveAsked(props: ListFaceProps): void {
   saveBuyerContact?.({ name: c.buyer.name, phone: c.buyer.phone, taxId: c.buyer.taxId });
 }
 
+/**
+ * What an online payment asks for: the host's amount due when a balance it
+ * holds pays part of the cart, else the cart's total (P3).
+ */
+function onlineTotal(props: ListFaceProps): string {
+  return props.list.amountDueLabel ?? props.total;
+}
+
 /** An online choice's press: the card goes through the bar, Pix and the hand-off raise at once. */
-function actOnline(props: ListFaceProps, method: CheckoutOnlineChoice): void {
+function actOnline(props: ListFaceProps, method: CheckoutOnlineChoice, mode: PaymentListMode | null, pick = false): void {
   const { c, charge, cap } = props;
   saveAsked(props);
-  if (method === "CARD") return charge.start("CARD", props.total);
+  if (method === "PIX" && mode) armPixCopy(props.list, mode, pick);
+  if (method === "CARD") return charge.start("CARD", onlineTotal(props));
   const raised = method === "PIX" ? "PIX" : handOffMethod(cap.offered);
   if (method === "HAND_OFF") props.onHandOff();
   c.setMethod(raised);
@@ -82,19 +95,20 @@ function actOnline(props: ListFaceProps, method: CheckoutOnlineChoice): void {
  * or a charge. A door option hands the press to the host; the card counts five
  * seconds first; everything else raises at once.
  */
-function useAct(props: ListFaceProps, clearFailure: () => void): () => void {
-  return () => {
+function useAct(props: ListFaceProps, clearFailure: () => void): (pick?: boolean) => void {
+  const mode = usePaymentListMode();
+  return (pick = false) => {
     const { choice } = props.state;
     if (!choice || inFlight(props)) return;
     if (choice.kind === "door") return chosenDoor(props)?.onSend();
     clearFailure();
-    actOnline(props, choice.method);
+    actOnline(props, choice.method, mode, pick);
   };
 }
 
 /**
  * Google Pay's press, from Google's own button: the sheet opens HERE, inside
- * the tap, priced with the host's total — then the order is raised behind it.
+ * the tap, priced with the host's amount due — then the order is raised behind it.
  */
 function useGooglePayPress(props: ListFaceProps, clearFailure: () => void, sheet: { current: OpenSheet | null }): () => void {
   return () => {
@@ -113,7 +127,7 @@ function useGooglePayPress(props: ListFaceProps, clearFailure: () => void, sheet
         },
       );
     sheet.current = { answer, cents };
-    charge.start("GOOGLE_PAY", props.total);
+    charge.start("GOOGLE_PAY", onlineTotal(props));
   };
 }
 
@@ -151,26 +165,35 @@ function cardCharging(charge: ListCharge): boolean {
   return charge.phase === "counting" || (charge.phase === "sending" && charge.kind === "CARD");
 }
 
-/** The bar's sentence: the amount frozen at the press, and the card it goes on. */
+/**
+ * The bar's sentence: the amount frozen at the press, and the card it goes on
+ * — or, when the host's balance pays everything, no card at all.
+ */
 function chargingText(props: ListFaceProps): string {
-  const { charge, list, state, total } = props;
+  const { charge, list, state } = props;
+  if (coveredByHost(list) && list.copy.chargingCovered) return list.copy.chargingCovered;
   const selected = state.card.saved.find((card) => card.id === state.card.selection);
-  return list.copy.charging(charge.pressedTotal ?? total, selected ? cardName(list.copy, selected) : null);
+  return list.copy.charging(charge.pressedTotal ?? onlineTotal(props), selected ? cardName(list.copy, selected) : null);
 }
 
 /** The verb, the amount and the busy state of the button, for what is chosen. */
 function buttonFacts(props: ListFaceProps): { label: string; total: string; busy: boolean } {
   const { list, state } = props;
   const door = chosenDoor(props);
+  const online = state.choice?.kind === "online";
   return {
-    label: list.hold ? list.hold.action : actionLabel(list.copy, state.choice, door, props.provider),
-    total: door?.totalLabel ?? props.total,
+    label: list.hold ? list.hold.action : pixBankLabel(list, state) ?? actionLabel(list.copy, state.choice, door, props.provider),
+    total: door ? (door.totalLabel ?? props.total) : online ? onlineTotal(props) : props.total,
     busy: inFlight(props),
   };
 }
 
-/** Google Pay chosen while the host re-prices: the row stays, its button waits for the price. */
-function googlePayRepricing(props: ListFaceProps): boolean {
+/**
+ * Google Pay chosen while the host re-prices (or for the one render before the
+ * list drops a choice nobody prices any more): a plain disabled button, never
+ * a spinner, with `copy.reasons.repricing` under it.
+ */
+function googlePayUnpriced(props: ListFaceProps): boolean {
   const { choice } = props.state;
   return choice?.kind === "online" && choice.method === "GOOGLE_PAY" && !props.cap.googlePay;
 }
@@ -181,27 +204,58 @@ function googlePayLive(props: ListFaceProps, reason: string | null, busy: boolea
   return choice?.kind === "online" && choice.method === "GOOGLE_PAY" && props.cap.googlePay !== null && reason === null && !busy;
 }
 
+/** The 5-second bar (or the charge going out), and the host's footer while it counts. */
+function ChargingBar({ props, onCancel }: { props: ListFaceProps; onCancel: () => void }): JSX.Element {
+  const { charge, list } = props;
+  const counting = charge.phase === "counting";
+  const footer = counting ? list.chargeFooter?.(charge.cancel) : null;
+  return (
+    <>
+      <ChargeBar text={chargingText(props)} full={!counting} cancelLabel={list.copy.cancel} onCancel={onCancel} />
+      {footer ? <Box data-testid="list-charge-footer">{footer}</Box> : null}
+    </>
+  );
+}
+
+/** The button, and "Abrir outro banco" under it when a remembered bank would open. */
+function PressButton({ props, act, reason, returnFocus }: {
+  props: ListFaceProps;
+  act: (pick?: boolean) => void;
+  reason: string | null;
+  returnFocus: boolean;
+}): JSX.Element {
+  const { list, state } = props;
+  const { label, total, busy } = buttonFacts(props);
+  const other = list.pixBank && otherBankShown(list, state, reason === null && !busy) ? list.pixBank.copy.openOther : null;
+  return (
+    <>
+      <ActionButton label={label} total={total} disabled={reason !== null || busy} loading={busy} onClick={() => act()} focusOnMount={returnFocus} />
+      {other ? <OtherBankLink label={other} onClick={() => act(true)} /> : null}
+    </>
+  );
+}
+
 /** The button, the 5-second bar, Google's own button, or nothing for a charge nobody can confirm yet. */
 function BarAction({ props, failure, act, onGooglePay, onCancel, reason, returnFocus }: {
   props: ListFaceProps;
   failure: ListChargeFailure | null;
-  act: () => void;
+  act: (pick?: boolean) => void;
   onGooglePay: () => void;
   onCancel: () => void;
   reason: string | null;
   returnFocus: boolean;
 }): JSX.Element | null {
-  const { charge, list, cap } = props;
-  if (cardCharging(charge)) {
-    return <ChargeBar text={chargingText(props)} full={charge.phase !== "counting"} cancelLabel={list.copy.cancel} onCancel={onCancel} />;
-  }
+  const { charge, cap } = props;
+  if (cardCharging(charge)) return <ChargingBar props={props} onCancel={onCancel} />;
   // An UNRESOLVED charge may be holding the buyer's money: no pay control at
   // all under "não pague de novo" (FUT-563), as the card pane does today.
   if (failure?.code === UNRESOLVED_CODE) return null;
-  const { label, total, busy } = buttonFacts(props);
-  if (googlePayRepricing(props)) return <ActionButton label={label} total={total} disabled loading onClick={act} />;
-  if (googlePayLive(props, reason, busy) && cap.googlePay) return <GooglePayAction client={cap.googlePay.client} onPress={onGooglePay} />;
-  return <ActionButton label={label} total={total} disabled={reason !== null || busy} loading={busy} onClick={act} focusOnMount={returnFocus} />;
+  if (googlePayUnpriced(props)) {
+    const { label, total } = buttonFacts(props);
+    return <ActionButton label={label} total={total} disabled loading={false} onClick={() => act()} />;
+  }
+  if (googlePayLive(props, reason, inFlight(props)) && cap.googlePay) return <GooglePayAction client={cap.googlePay.client} onPress={onGooglePay} />;
+  return <PressButton props={props} act={act} reason={reason} returnFocus={returnFocus} />;
 }
 
 /** The charge under way, once there is an order to run it against. */
@@ -230,13 +284,19 @@ function RaiseError({ c, onRetry }: { c: Controller; onRetry: () => void }): JSX
   return <PaymentErrorPanel message={c.createError} emailFlagged={c.errorField === "email"} code={c.errorCode} onUseEmail={c.payWithEmail} onRetry={onRetry} />;
 }
 
+/** The host's balance pays the whole amount (`totalCents: 0`): no card is asked for or charged. */
+function coveredByHost(list: CheckoutPaymentList): boolean {
+  return list.totalCents === 0;
+}
+
 /** Why the button is held: the host's hold, then the list's own reasons, in the prototype's order. */
 function reasonOf(props: ListFaceProps, door: CheckoutDoorOption | undefined): string | null {
   const { c, list, state } = props;
-  return blockedReason({
+  const reason = blockedReason({
     copy: list.copy, hold: list.hold?.reason ?? null, choice: state.choice, door, asked: state.asked,
-    buyer: c.buyer, selection: state.card.selection, cardIsComplete: state.card.complete,
+    buyer: c.buyer, selection: state.card.selection, cardIsComplete: state.card.complete, covered: coveredByHost(list),
   });
+  return reason ?? (googlePayUnpriced(props) ? (list.copy.reasons.repricing ?? null) : null);
 }
 
 /**
@@ -262,8 +322,8 @@ function barFacts(props: ListFaceProps, door: CheckoutDoorOption | undefined, re
  * appears or a total that moves mid-bar stops it, and `send` checks again.
  */
 function useChargeGuard(props: ListFaceProps, reason: string | null): void {
-  const { charge, total } = props;
-  const allowed = reason === null && (charge.pressedTotal === null || charge.pressedTotal === total);
+  const { charge } = props;
+  const allowed = reason === null && (charge.pressedTotal === null || charge.pressedTotal === onlineTotal(props));
   const { setAllowed } = charge;
   useEffect(() => setAllowed(allowed), [allowed, setAllowed]);
 }
@@ -295,16 +355,19 @@ export function ListFace(props: ListFaceProps): JSX.Element {
   const door = chosenDoor(props);
   const reason = reasonOf(props, door);
   useChargeGuard(props, reason);
+  const free = reason === null && props.charge.phase === "idle" && !c.creating;
+  useArmedCharge(armedReady(list, state, free), act);
+  useDropRefusedCopy(c.createError);
   const { returnFocus, onCancel } = useCancelWithFocus(charge);
   const shown = charge.phase !== "waiting";
   const facts = barFacts(props, door, reason);
   return (
     <Box data-testid="payment-list-step" sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
       {shown ? (
-        <ChoiceList copy={list.copy} state={state} door={list.door ?? []} buyer={c.buyer} onBuyerChange={c.setBuyer} provider={props.provider} failure={failure} locked={facts.locked} />
+        <ChoiceList copy={list.copy} state={state} door={list.door ?? []} buyer={c.buyer} onBuyerChange={c.setBuyer} provider={props.provider} failure={failure} locked={facts.locked} covered={coveredByHost(list)} />
       ) : null}
       <Runners props={props} sheet={sheet.current} onFailed={onFailed} />
-      <RaiseError c={c} onRetry={act} />
+      <RaiseError c={c} onRetry={() => act()} />
       {shown ? (
         <ListBar summary={list.summary} extras={facts.extras} payer={facts.charging ? null : <PayerLine props={props} />} reason={facts.underButton} live={facts.live}>
           <BarAction props={props} failure={failure} act={act} onGooglePay={onGooglePay} onCancel={onCancel} reason={reason} returnFocus={returnFocus} />

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,54 +192,151 @@ 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">
-        {copy.title(order.totalLabel)}
+        {copy.title(mode.list.amountDueLabel ?? order.totalLabel)}
       </Text>
       {afterCopy ? (
         <PixAfterCopy
           pix={pix}
           words={props.words}
-          totalLabel={order.totalLabel}
+          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/online-content.tsx

@@ -72,9 +72,13 @@ function SavedChips({ card, copy }: { card: ListCard; copy: PaymentListCopy }):
   );
 }
 
-/** 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;
+/**
+ * Whether a chosen online row has anything to open — a row with nothing opens
+ * no box (L5). The card opens nothing of its own when the host's balance pays
+ * the whole amount: no card is charged, so none is asked for.
+ */
+export function opensContent(method: string, asked: readonly CheckoutCustomerField[], failure: ListChargeFailure | null, covered = false): boolean {
+  return (method === "CARD" && !covered) || asked.length > 0 || failure !== null;
 }
 
 /** Move the focus to the card number — the next thing to type once the CPF is complete. */
@@ -97,6 +101,7 @@ export function OnlineContent({
   copy,
   provider,
   failure,
+  covered = false,
 }: {
   method: "PIX" | "CARD" | "GOOGLE_PAY" | "HAND_OFF";
   asked: readonly CheckoutCustomerField[];
@@ -106,9 +111,11 @@ export function OnlineContent({
   copy: PaymentListCopy;
   provider: string | null;
   failure: ListChargeFailure | null;
+  /** The host's balance pays the whole amount — no chips, no card fields. */
+  covered?: boolean;
 }): JSX.Element {
   const scope = useRef<HTMLDivElement | null>(null);
-  const isCard = method === "CARD";
+  const isCard = method === "CARD" && !covered;
   return (
     <Box ref={scope} sx={{ display: "flex", flexDirection: "column", gap: 1.25 }}>
       <BuyerInline

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

@@ -70,8 +70,10 @@ export function OptionRow({
         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) },
+        // The keyboard's place in the group, drawn on the whole row (5.1 item 6)
+        // — for the row's own radio only: a field opened inside draws its own
+        // ring, and a second one around the row doubled it.
+        "&:has(> label input[type='radio']:focus-visible)": { outline: (t) => `${t.spacing(0.25)} solid ${t.palette.primary.main}`, outlineOffset: (t) => t.spacing(0.25) },
       }}
     >
       <Box

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

@@ -130,9 +130,10 @@ 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 });
+  const charge = useListCharge({ ...c, cartTotal: displayTotals(props.totalOverride, props.cart).label, dueCents: list.totalCents });
   const [handingOff, startHandOff] = useHandingOff(c.createError);
   const pixStage = usePaymentPixStage(cap, usePreferMethod(c, state.choose));
   const pix = c.order?.method === "PIX" ? c.order : null;