@12-apps/payments-frontend 3.36.0 → 3.38.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/payments-frontend",
-  "version": "3.36.0",
+  "version": "3.38.0",
   "type": "module",
   "sideEffects": false,
   "description": "Browser half of the vendor-agnostic payments platform: plug-and-play MUI components for the per-provider settings page (credential form from each provider's schema, masked hints, verify/enable) and the checkout page (PIX QR + polling, card tokenization, hosted-checkout redirect), plus the headless hooks and fetch clients they build on. Talks only to the host's payments HTTP surface — never to a provider directly. Microfrontend-ready: no app coupling, host injects theme and auth.",

package/src/components/checkout/card-sources.ts

@@ -0,0 +1,131 @@
+import { useCallback, useEffect, useState } from "react";
+
+import { NEW_CARD, tokenizerFor, type CardTokenizationConfig, type SavedCard } from "../../card";
+
+import { useCheckoutClientApi } from "./client-context";
+
+/**
+ * Where the card path's two inputs come from: the buyer's saved cards and the
+ * store's card key. Split out of `./use-card-checkout.ts` at its size gate when
+ * the one-list Pagamento step (FUT-3591) needed the saved cards BEFORE any
+ * order exists — the list preselects one — and needed to know when the key is
+ * still on its way, because its charge runs the moment the 5-second bar fills
+ * rather than after the buyer has spent a minute typing.
+ */
+
+/**
+ * The buyer's saved cards at this store (FUT-697), loaded once per store, and
+ * whether the list has answered — "no saved card" and "not asked yet" are
+ * different facts to a screen that preselects one.
+ */
+export function useSavedCardList(tenantSlug: string | undefined): { cards: SavedCard[]; loaded: boolean } {
+  const [state, setState] = useState<{ cards: SavedCard[]; loaded: boolean }>({ cards: [], loaded: false });
+  const client = useCheckoutClientApi();
+  useEffect(() => {
+    let active = true;
+    // A list that cannot be read is an empty one that HAS answered: the
+    // buyer types a card, rather than waiting on a list that never comes.
+    void client
+      .listInstruments(tenantSlug)
+      .catch((): SavedCard[] => [])
+      .then((cards) => {
+        if (active) setState({ cards, loaded: true });
+      });
+    return () => {
+      active = false;
+    };
+  }, [tenantSlug, client]);
+  return state;
+}
+
+/**
+ * Saved-card list + current selection — scoped to the current store (FUT-697),
+ * so only cards the store's active provider can actually charge are offered.
+ * The slug arrives as an argument (the host's routing owns it); absent, the
+ * list is unscoped, exactly as before FUT-697.
+ *
+ * `freshInstrument`: the buyer is here because a card was REFUSED (FUT-1145),
+ * so the saved card this would otherwise preselect is the one that just
+ * failed. The list is still offered — another saved card may well work — but
+ * nothing is chosen for them, which puts the form in front of a buyer whose
+ * only untried instrument is a new one.
+ */
+export function useSavedCards(
+  tenantSlug: string | undefined,
+  freshInstrument: boolean,
+): {
+  savedCards: SavedCard[];
+  selection: string;
+  setSelection: (id: string) => void;
+} {
+  // The cards and the selection land in ONE update, as they always did: a
+  // render holding the cards with nothing selected would flash the new-card
+  // form at a buyer whose saved card is about to be chosen for them.
+  const [state, setState] = useState<{ savedCards: SavedCard[]; selection: string }>({ savedCards: [], selection: NEW_CARD });
+  const client = useCheckoutClientApi();
+  useEffect(() => {
+    let active = true;
+    void client
+      .listInstruments(tenantSlug)
+      .catch((): SavedCard[] => [])
+      .then((cards) => {
+        if (!active) return;
+        const first = cards[0];
+        setState((prev) => ({ savedCards: cards, selection: first && !freshInstrument ? first.id : prev.selection }));
+      });
+    return () => {
+      active = false;
+    };
+  }, [tenantSlug, client, freshInstrument]);
+  const setSelection = useCallback((id: string) => setState((prev) => ({ ...prev, selection: id })), []);
+  return { savedCards: state.savedCards, selection: state.selection, setSelection };
+}
+
+/**
+ * The store's card public key for this order. The checkout config resolved the
+ * initial key server-side (`GET /api/checkout/config`, FUT-697); the SPA
+ * fetches through the order-scoped refresh route only when the ACTIVE provider
+ * is PagBank — the sole provider that can mint a key on demand — and the
+ * config arrived without one. A `null` key never means "mock": stub permission
+ * travels separately as `mockTokenization`.
+ *
+ * `keyPending` is true while that refresh has not answered: a charge started
+ * before it lands would tokenize with no key at all.
+ */
+export function useCardPublicKey(
+  orderId: string,
+  config: CardTokenizationConfig,
+): {
+  publicKey: string | null;
+  setPublicKey: (key: string) => void;
+  keyPending: boolean;
+} {
+  const [publicKey, setPublicKey] = useState<string | null>(config.publicKey);
+  const [answered, setAnswered] = useState(false);
+  const client = useCheckoutClientApi();
+  const refreshable =
+    config.provider !== null && tokenizerFor(config.provider) === "pagbank-sdk";
+  const asks = config.publicKey === null && refreshable;
+
+  useEffect(() => {
+    if (!asks) return undefined;
+    let active = true;
+    void client
+      .refreshBrowserKey({ orderId })
+      .then((result) => {
+        if (!active) return;
+        setAnswered(true);
+        if (result.ok && result.data.publicKey) setPublicKey(result.data.publicKey);
+      })
+      // A refresh that failed has answered too: the charge goes on and the
+      // tokenizer says why, rather than the bar waiting forever.
+      .catch(() => {
+        if (active) setAnswered(true);
+      });
+    return () => {
+      active = false;
+    };
+  }, [orderId, asks, client]);
+
+  return { publicKey, setPublicKey, keyPending: asks && !answered };
+}

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

@@ -45,7 +45,11 @@ function CardHeading(): JSX.Element | null {
  * ending; now the clock is, and a wait that failed its way to the clock carries
  * both. "We keep trying" over a wait nothing is scheduled for is the lie.
  */
-function SubmittedState({ card }: { card: CardCheckout }): JSX.Element {
+export function SubmittedState({
+  card,
+}: {
+  card: Pick<CardCheckout, "pollTimedOut" | "pollError" | "pollCheckAgain">;
+}): JSX.Element {
   const { LoadingState } = useCheckoutComponents();
   const copy = useCheckoutCopy().screens.settling;
   if (card.pollTimedOut) {
@@ -88,7 +92,7 @@ function SubmittedState({ card }: { card: CardCheckout }): JSX.Element {
  * "Não foi possível pagar" above a body that says "não pague de novo" — pushes
  * the buyer toward exactly the second payment it forbids.
  */
-function ChargeFailure({
+export function ChargeFailure({
   message,
   unresolved,
 }: {

package/src/components/checkout/cart-changed.tsx

@@ -185,6 +185,11 @@ export function PaymentRefreshProvider({
  * The card pane's half: a charge the host refused with
  * {@link CART_CHANGED_CODE} re-reads the order, once per refusal.
  */
+/** The step's "Atualizar pagamento" for the order on screen, or `null` when there is nothing to refresh. */
+export function usePaymentRefresh(): (() => void) | null {
+  return useContext(PaymentRefreshContext);
+}
+
 export function useRefreshOnCartChanged(errorCode: string | null): void {
   const refresh = useContext(PaymentRefreshContext);
   // Held in a ref: the step hands down a fresh closure on every render, and
@@ -199,6 +204,23 @@ export function useRefreshOnCartChanged(errorCode: string | null): void {
   }, [errorCode]);
 }
 
+/** Where a refresh stands, for a step that may not have one (a settlement). */
+function refreshStatus(refresh: OrderRefresh | undefined): { pending: boolean; error: string | null } {
+  return { pending: refresh?.pending ?? false, error: refresh?.error ?? null };
+}
+
+const PaymentStaleContext = createContext(false);
+
+/**
+ * Whether the payment on screen was prepared for a cart that has since changed
+ * (FUT-3535). A PIX pane reads it to veil its QR and code and to stop the copy
+ * controls: the amount is IN the code, so a buyer who pays it now pays the old
+ * order. False outside a {@link CartChangedBoundary}.
+ */
+export function usePaymentStale(): boolean {
+  return useContext(PaymentStaleContext);
+}
+
 /**
  * The payment pane, with the step's warning above it when the cart moved, and
  * the refresh handed down to the card form. Nothing changes on screen while the
@@ -210,8 +232,11 @@ export function CartChangedBoundary({
   creating,
   onGenerate,
   refresh,
+  actionInBar = false,
   children,
 }: {
+  /** The step's bar carries "Atualizar pagamento" itself (the one list): the notice only says why. */
+  actionInBar?: boolean;
   order: CheckoutOrder | null;
   /** Absent for a settlement: it pays a balance, not the cart, so its basket is no signal. */
   basket: CheckoutBasketIdentity | undefined;
@@ -222,15 +247,19 @@ export function CartChangedBoundary({
 }): JSX.Element {
   const changed = useBasketChanged(order, basket) && !creating;
   const run = paymentRefresh(order, onGenerate, refresh?.run);
-  const pending = refresh?.pending ?? false;
-  const error = refresh?.error ?? null;
+  const { pending, error } = refreshStatus(refresh);
   // ONE tree shape whether or not the warning shows: wrapping the pane only
   // while it does would remount the card form the moment the refresh lands,
   // dropping what the buyer typed and the refusal that explains the new total.
   return (
     <Box sx={{ display: "flex", flexDirection: "column", gap: 3 }}>
-      {(changed || error) && run ? <CartChangedNotice onRefresh={run} pending={pending} error={error} /> : null}
-      <PaymentRefreshProvider refresh={run}>{children}</PaymentRefreshProvider>
+      {(changed || error) && run ? <CartChangedNotice onRefresh={actionInBar ? undefined : run} pending={pending} error={error} /> : null}
+      {/* Stale while the warning stands, so the veil goes with it the moment the
+          new order lands. A PIX refresh mints a new code, which takes the old
+          one off the screen first, so a failed one leaves nothing to copy. */}
+      <PaymentStaleContext.Provider value={changed && run !== null}>
+        <PaymentRefreshProvider refresh={run}>{children}</PaymentRefreshProvider>
+      </PaymentStaleContext.Provider>
     </Box>
   );
 }
@@ -241,7 +270,8 @@ function CartChangedNotice({
   pending = false,
   error = null,
 }: {
-  onRefresh: () => void;
+  /** Absent: the bar carries the control. */
+  onRefresh?: () => void;
   pending?: boolean;
   /** A refresh that failed, in the host's words: said, with the same control to try again. */
   error?: string | null;
@@ -255,19 +285,21 @@ function CartChangedNotice({
       ) : (
         <Alert variant="warning" title={copy.heading} description={copy.support} showIcon />
       )}
-      <Box>
-        <Button
-          variant="solid"
-          color="primary"
-          size="md"
-          onClick={onRefresh}
-          loading={pending}
-          disabled={pending}
-          dataTestId="checkout-cart-changed-refresh"
-        >
-          {copy.refreshAction}
-        </Button>
-      </Box>
+      {onRefresh ? (
+        <Box>
+          <Button
+            variant="solid"
+            color="primary"
+            size="md"
+            onClick={onRefresh}
+            loading={pending}
+            disabled={pending}
+            dataTestId="checkout-cart-changed-refresh"
+          >
+            {copy.refreshAction}
+          </Button>
+        </Box>
+      ) : null}
     </Box>
   );
 }

package/src/components/checkout/checkout-actions.ts

@@ -278,3 +278,21 @@ export function useRetryAction(input: {
     clearError, decline, order, setDecline, setFinalStatus, setFreshInstrument, setOrder, setStep,
   ]);
 }
+
+/**
+ * Leave the raised order without choosing another method (FUT-3592): the one
+ * list's "Trocar a forma de pagamento" goes back to the list from a Pix, and
+ * the order — and its parked entry, scoped to this store — go with it, as a
+ * method switch takes them.
+ */
+export function useDropOrder(
+  setOrder: Dispatch<SetStateAction<CheckoutOrder | null>>,
+  tenantSlug: string | undefined,
+  clearError: () => void,
+): () => void {
+  return useCallback(() => {
+    setOrder(null);
+    forgetHostedOrder(tenantSlug);
+    clearError();
+  }, [setOrder, tenantSlug, clearError]);
+}

package/src/components/checkout/checkout-flow.tsx

@@ -2,18 +2,20 @@ import { useMemo, type JSX, type ReactNode } from "react";
 
 import type { CheckoutBasketIdentity } from "./basket";
 import { buyerFieldsFor } from "./buyer-fields";
-import { EmptyCart, PaymentStep } from "./checkout-steps";
+import { EmptyCart } from "./checkout-steps";
 import { DadosStep } from "./dados-step";
 import { PaymentStatus } from "./payment-status";
 import type { BackActionEmphasis } from "./payment-status-parts";
 import type { BuyerInfo, CheckoutProviderConfig, SettlementCheckout } from "./types";
 import { CheckoutCopyProvider } from "./copy-context";
-import { OneClickProvider, useOneClick } from "./one-click";
+import { useOneClick } from "./one-click";
 import { CheckoutComponentsProvider, type CheckoutComponents } from "./ui";
 import type { CheckoutViewCopy } from "./view-copy";
 import { CheckoutFrame, FlowHeader } from "./checkout-frame";
 import type { CheckoutDeliverySummary, CheckoutSummaryLine } from "./payment-summary";
 import { useCheckoutController, type CheckoutHostPorts } from "./use-checkout-controller";
+import type { CheckoutPaymentList } from "./list/types";
+import { PaymentPhase, settlementTotalOverride } from "./payment-phase";
 
 
 /** What the flow reads off the host's cart — display facts, never money math. */
@@ -111,6 +113,16 @@ export interface CheckoutFlowProps extends CheckoutHostPorts {
   backActionEmphasis?: BackActionEmphasis;
   /** Design-system slots; unfilled slots render the raw-MUI defaults. */
   components?: Partial<CheckoutComponents>;
+  /**
+   * Opt-in: the Pagamento step as ONE list (FUT-3591) — the store's online
+   * options and the host's door options in one radio group, nothing raised on
+   * a pick, the bar's button the only way an order is made, and the card
+   * charged after a 5-second bar the buyer can cancel (FUT-3592). The buyer's
+   * missing CPF is asked inside the option instead of on a Dados step first.
+   * Absent: the method tabs, the order summary and raise-on-pick, unchanged.
+   * See `./list/types.ts`.
+   */
+  paymentList?: CheckoutPaymentList;
 }
 
 /**
@@ -123,13 +135,6 @@ function cartLoaded(cart: CheckoutCartView): boolean {
   return cart.identity?.ready !== false;
 }
 
-/** The pay-bar total override when settling a settlement (else the cart's own totals). */
-function settlementTotalOverride(
-  settlement: SettlementCheckout | null | undefined,
-): { label: string; items: number } | undefined {
-  return settlement ? { label: settlement.totalLabel, items: settlement.totalItems } : undefined;
-}
-
 /**
  * The facts the confirmation screen shows beside the total (FUT-593): which
  * order this was, and where its receipt went. Its own function so the optional
@@ -244,67 +249,17 @@ function nothingToPayFor(
   return !c.order && !c.creating && c.step !== "status";
 }
 
-/** Step 2, with the controller's facts and the host's money mapped onto it. */
-function PagamentoStep({
-  c,
-  cart,
-  settlement,
-  providerConfig,
-  tenantSlug,
-  validateApplePayMerchant,
-}: {
-  c: ReturnType<typeof useCheckoutController>;
-  cart: CheckoutCartView;
-  settlement: SettlementCheckout | null | undefined;
-  providerConfig: CheckoutProviderConfig | null | undefined;
-  tenantSlug: string | undefined;
-  validateApplePayMerchant: ((validationURL: string) => Promise<unknown>) | undefined;
-}): JSX.Element {
-  return (
-    <PaymentStep
-      method={c.method}
-      onMethodChange={c.setMethod}
-      order={c.order}
-      buyer={c.buyer}
-      creating={c.creating}
-      createError={c.createError}
-      errorField={c.errorField}
-      errorCode={c.errorCode}
-      onGenerate={(chosen) => void c.startPayment(chosen)}
-      refresh={c.refresh}
-      onUseEmail={c.payWithEmail}
-      // Set only for a skipped-Dados flow (the controller decides); the payer
-      // block hides itself when it is absent.
-      onEditBuyer={c.editBuyer}
-      providerConfig={providerConfig}
-      tenantSlug={tenantSlug}
-      // The amount, on the step that asks for it (FUT-1179).
-      cartTotals={cart}
-      totalOverride={settlementTotalOverride(settlement)}
-      discountLines={cart.discountLines}
-      // The order around the payment, for the summary (FUT-3525).
-      lines={cart.lines}
-      delivery={cart.delivery}
-      orderNote={cart.orderNote}
-      // Retrying a refused card: the failed saved card is not chosen again (FUT-1145).
-      freshInstrument={c.freshInstrument}
-      // The card path parks an order of its own for a 3-D Secure challenge, so
-      // it needs the same basket the flow was mounted for (FUT-1213).
-      basket={cart.identity}
-      validateApplePayMerchant={validateApplePayMerchant}
-      onResolved={c.handleResolved}
-    />
-  );
-}
-
 function CheckoutFlowBody(props: Omit<CheckoutFlowProps, "components">): JSX.Element {
-  const { copy, cart, defaultBuyer, settlement, taxIdOnFile = false, providerConfig, tenantSlug, confirmationExtra, confirmationHero, confirmationFooter, backActionEmphasis, validateApplePayMerchant, oneClick = false, ...ports } = props;
+  const { copy, cart, defaultBuyer, settlement, taxIdOnFile = false, providerConfig, tenantSlug, confirmationExtra, confirmationHero, confirmationFooter, backActionEmphasis, oneClick = false, paymentList } = props;
+  const ports = { createOrder: props.createOrder, saveBuyerContact: props.saveBuyerContact, onExitToMenu: props.onExitToMenu, onPaid: props.onPaid };
   // Resolved for NO method on purpose (FUT-595): the Dados step opens before
   // the picker, and the form is filled once — so it asks for the union of what
   // any chain member may need rather than re-opening after the choice. A chain
   // that declares nothing degrades to CPF-required, never to "ask nothing".
   const buyerFields = useMemo(() => buyerFieldsFor(providerConfig?.chain, null), [providerConfig]);
-  const c = useCheckoutController(ports, defaultBuyer, taxIdOnFile, buyerFields, tenantSlug, cart.identity);
+  // The list asks a missing CPF inside the option (M11), so it opens on
+  // Pagamento as a buyer with one on file always has (FUT-465).
+  const c = useCheckoutController(ports, defaultBuyer, taxIdOnFile || Boolean(paymentList), buyerFields, tenantSlug, cart.identity);
   const armed = useOneClick({ requested: oneClick, config: providerConfig, taxIdOnFile, step: c.step, method: c.method, setMethod: c.setMethod });
 
   // A settlement settlement pays already-sent kitchen items — the cart is
@@ -320,7 +275,10 @@ function CheckoutFlowBody(props: Omit<CheckoutFlowProps, "components">): JSX.Ele
 
   return (
     <CheckoutFrame payment={c.step === "payment"}>
-      <FlowHeader copy={copy} step={c.step} completed={c.completed} onBack={c.back} />
+      {/* In the list, the host's own stepper is the chrome around Pagamento. */}
+      {paymentList && c.step === "payment" ? null : (
+        <FlowHeader copy={copy} step={c.step} completed={c.completed} onBack={c.back} />
+      )}
 
           {c.step === "dados" ? (
             <DadosStep
@@ -339,18 +297,7 @@ function CheckoutFlowBody(props: Omit<CheckoutFlowProps, "components">): JSX.Ele
             />
           ) : null}
 
-          {c.step === "payment" ? (
-            <OneClickProvider armed={armed}>
-              <PagamentoStep
-                c={c}
-                cart={cart}
-                settlement={settlement}
-                providerConfig={providerConfig}
-                tenantSlug={tenantSlug}
-                validateApplePayMerchant={validateApplePayMerchant}
-              />
-            </OneClickProvider>
-          ) : null}
+          {c.step === "payment" ? <PaymentPhase props={props} c={c} armed={armed} /> : null}
 
           {c.step === "status" ? (
             <StatusStep

package/src/components/checkout/google-pay-button.tsx

@@ -109,9 +109,9 @@ function isReadyToPayRequest(): Record<string, unknown> {
 }
 
 /** Step 4's request: the same card method, now carrying gateway + price. */
-function paymentDataRequest(
+export function paymentDataRequest(
   params: GooglePayGatewayParams,
-  order: CheckoutOrder,
+  order: Pick<CheckoutOrder, "totalCents">,
 ): Record<string, unknown> {
   return {
     apiVersion: 2,
@@ -144,7 +144,7 @@ function paymentDataRequest(
 }
 
 /** The buyer closed the sheet — a choice, not a failure to report. */
-function sheetDismissed(error: unknown): boolean {
+export function sheetDismissed(error: unknown): boolean {
   return (
     typeof error === "object" &&
     error !== null &&
@@ -157,7 +157,7 @@ function sheetDismissed(error: unknown): boolean {
  * the button exists at all. `api` is injectable for tests and harnesses;
  * `undefined` means "load pay.js".
  */
-function useGooglePayClient(
+export function useGooglePayClient(
   api: GooglePayApi | null | undefined,
   environment: "TEST" | "PRODUCTION",
 ): GooglePaymentsClient | null {

package/src/components/checkout/list/buyer-inline.tsx

@@ -0,0 +1,125 @@
+import { Box } from "@mui/material";
+import { useEffect, useRef, type JSX } from "react";
+
+import { formatCpf, onlyDigits, validateCpf } from "../../../card";
+import { fieldSatisfied } from "../buyer-fields";
+import { useCheckoutCopy } from "../copy-context";
+import type { BuyerInfo, CheckoutCustomerField } from "../types";
+import { useCheckoutComponents } from "../ui";
+
+import { usePaymentListMode } from "./context";
+import type { PaymentListCopy } from "./types";
+
+/**
+ * The buyer's own details the chosen option needs, asked INSIDE it and ABOVE
+ * the card fields (M11, the owner's "maybe.. we should ask cpf first"): only
+ * the ones the store's chain requires for this method and the buyer arrived
+ * without. A buyer with a CPF on file never sees the field.
+ *
+ * When the last of them is complete, `onComplete` fires once — the card
+ * option moves the focus to "Número do cartão" with it, so the buyer's next
+ * keystroke lands where the next thing to type is.
+ */
+
+type Copy = PaymentListCopy["buyer"];
+
+function nameOf(field: CheckoutCustomerField, copy: Copy): string {
+  const names: Record<CheckoutCustomerField["key"], string> = {
+    taxId: copy.cpf,
+    phone: copy.phone,
+    name: copy.name,
+    email: copy.email,
+  };
+  return names[field.key];
+}
+
+/** The sentence under a field the buyer has started and not finished. */
+function complaintOf(field: CheckoutCustomerField, value: string, copy: Copy, cpfInvalid: (v: string) => string | undefined): string | undefined {
+  if (!value.trim() || fieldSatisfied(field, value)) return undefined;
+  if (field.key === "taxId") return onlyDigits(value).length < 11 ? copy.cpfIncomplete : cpfInvalid(value);
+  if (field.key === "phone") return copy.phoneIncomplete;
+  return undefined;
+}
+
+const PLACEHOLDERS: Partial<Record<CheckoutCustomerField["key"], string>> = {
+  taxId: "000.000.000-00",
+  phone: "(00) 00000-0000",
+};
+
+export function BuyerInline({
+  asked,
+  buyer,
+  onBuyerChange,
+  copy,
+  provider,
+  onComplete,
+}: {
+  asked: readonly CheckoutCustomerField[];
+  buyer: BuyerInfo;
+  onBuyerChange: (buyer: BuyerInfo) => void;
+  copy: Copy;
+  /** The store's provider, named in the "why" — `null` when it published no name. */
+  provider: string | null;
+  onComplete?: () => void;
+}): JSX.Element | null {
+  const { Checkbox, Input, Text } = useCheckoutComponents();
+  const consent = usePaymentListMode()?.consent;
+  const cardCopy = useCheckoutCopy().card;
+  const complete = asked.every((field) => fieldSatisfied(field, buyer[field.key]));
+  const was = useRef(complete);
+  const latest = useRef(onComplete);
+  latest.current = onComplete;
+  useEffect(() => {
+    if (complete && !was.current) latest.current?.();
+    was.current = complete;
+  }, [complete]);
+  if (asked.length === 0) return null;
+  return (
+    <Box sx={{ display: "flex", flexDirection: "column", gap: 1.25 }}>
+      {asked.map((field) => {
+        const value = buyer[field.key] ?? "";
+        const complaint = complaintOf(field, value, copy, (v) => validateCpf(v, cardCopy.fields));
+        // The label sits ABOVE the field, whole — "CPF (o PagBank pede para
+        // pagar pelo app)" (FN:182) — and a native <label> around both names
+        // the input with it; a floating label would cut the reason short.
+        return (
+          <Box key={field.key} component="label" sx={{ display: "flex", flexDirection: "column", gap: 0.5 }}>
+            <Text variant="body" size="sm" as="span">
+              {nameOf(field, copy)}{" "}
+              <Text variant="body" size="sm" color="secondary" as="span">
+                {copy.why(provider)}
+              </Text>
+            </Text>
+          <Input
+            type={field.key === "phone" ? "tel" : "text"}
+            inputMode={field.key === "taxId" ? "numeric" : undefined}
+            variant="outlined"
+            size="md"
+            fullWidth
+            required
+            placeholder={PLACEHOLDERS[field.key]}
+            value={value}
+            error={Boolean(complaint)}
+            helperText={complaint}
+            onChange={(event) =>
+              onBuyerChange({
+                ...buyer,
+                [field.key]: field.key === "taxId" ? formatCpf(event.target.value) : event.target.value,
+              })
+            }
+            data-testid={`list-buyer-${field.key}`}
+          />
+          </Box>
+        );
+      })}
+      {consent ? (
+        <Checkbox
+          label={consent.label}
+          checked={consent.checked}
+          onChange={(_event, checked) => consent.onChange(checked)}
+          data-testid="list-save-profile"
+        />
+      ) : null}
+    </Box>
+  );
+}