@12-apps/payments-frontend 3.36.0 → 3.38.0

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

@@ -0,0 +1,186 @@
+import { Box } from "@mui/material";
+import { keyframes } from "@mui/material/styles";
+import { useEffect, useRef, type JSX, type ReactNode } from "react";
+
+import { useCheckoutCopy } from "../copy-context";
+import type { GooglePaymentsClient } from "../google-pay-button";
+import { useCheckoutComponents } from "../ui";
+
+import { CHARGE_WINDOW_MS } from "./use-list-charge";
+
+/** The prototype's 52px action and 44px secondary, on the theme's spacing scale. */
+const ACTION_HEIGHT = 6.5;
+const SECONDARY_HEIGHT = 5.5;
+
+/** Focus the first button under `scope` — the slot owns the element, so it is found, not referenced. */
+function focusButtonIn(scope: HTMLElement | null): void {
+  scope?.querySelector<HTMLButtonElement>("button")?.focus();
+}
+
+/**
+ * The one list's bar (FUT-3591 #7, M12), top to bottom: the host's line
+ * (items and delivery fee), the host's online-only extras (store credit), who
+ * is paying, the ONE action — or what replaced it — and why it is held.
+ *
+ * Drawn through the host's `ActionBar` slot, which is what pins it to the
+ * bottom of the screen: the storefront passes its sticky action bar.
+ *
+ * ONE live region, always mounted, says what changes under the button — the
+ * reason it is held, the charge under way, the wait — because a region that
+ * mounts with its text already in it is announced by nobody.
+ */
+export function ListBar({ summary, extras, payer, reason, live, children }: {
+  summary?: ReactNode;
+  extras?: ReactNode;
+  payer?: ReactNode;
+  /** Why the action is held, under it. */
+  reason?: string | null;
+  /** What the region announces when there is no reason: the bar's own sentence. */
+  live?: string | null;
+  /** The action, or the charge bar, or the wait. */
+  children: ReactNode;
+}): JSX.Element {
+  const { ActionBar, Text } = useCheckoutComponents();
+  return (
+    <ActionBar dataTestId="list-pay-bar">
+      <Box sx={{ display: "flex", flexDirection: "column", gap: 1, width: "100%", minWidth: 0 }}>
+        {summary ? <Box data-testid="list-bar-summary">{summary}</Box> : null}
+        {extras ? <Box data-testid="list-bar-extras">{extras}</Box> : null}
+        {payer}
+        {children}
+        <Box role="status" aria-live="polite" data-testid="list-bar-live">
+          {reason ? (
+            <Text variant="body" size="sm" color="danger" as="p" style={{ margin: 0 }} data-testid="list-blocked-reason">
+              {reason}
+            </Text>
+          ) : (
+            <Box component="span" sx={{ position: "absolute", width: "1px", height: "1px", overflow: "hidden", clip: "rect(0 0 0 0)", whiteSpace: "nowrap" }}>
+              {live ?? ""}
+            </Box>
+          )}
+        </Box>
+      </Box>
+    </ActionBar>
+  );
+}
+
+/** "Pagar" on the left, "R$ 22,00" on the right — the prototype's 52px bar of a button. */
+export function ActionButton({ label, total, disabled, loading, onClick, focusOnMount = false }: {
+  label: string;
+  total: string | null;
+  disabled: boolean;
+  loading?: boolean;
+  onClick: () => void;
+  /** Take the focus as it appears — back from a cancelled charge, where the focus was on Cancelar. */
+  focusOnMount?: boolean;
+}): JSX.Element {
+  const { Button } = useCheckoutComponents();
+  const scope = useRef<HTMLDivElement | null>(null);
+  useEffect(() => {
+    if (focusOnMount) focusButtonIn(scope.current);
+  }, [focusOnMount]);
+  return (
+    <Box ref={scope} sx={{ "& button": { minHeight: (t) => t.spacing(ACTION_HEIGHT) }, "& button, & button *": { fontWeight: 600 } }}>
+      <Button variant="solid" color="primary" size="lg" fullWidth disabled={disabled} loading={loading} onClick={onClick} dataTestId="list-pay">
+        {/* The amount never breaks ("R$ / 27,00"); the label may wrap, at the left. An action with
+            no amount ("Copiar código Pix") is centred (C20). */}
+        <Box component="span" sx={{ display: "flex", justifyContent: total ? "space-between" : "center", alignItems: "center", gap: 1, width: "100%" }}>
+          <Box component="span" sx={{ minWidth: 0, textAlign: total ? "left" : "center" }}>{label}</Box>
+          {total ? <Box component="span" sx={{ flex: "none", whiteSpace: "nowrap" }}>{total}</Box> : null}
+        </Box>
+      </Button>
+    </Box>
+  );
+}
+
+const fill = keyframes`from { width: 0; } to { width: 100%; }`;
+
+/**
+ * The card's 5-second bar, in the button's own place (FUT-3592 #2): the
+ * sentence in white on the primary colour, a darker fill growing left to
+ * right, and "Cancelar" under it while there is still nothing sent — which
+ * takes the focus as it appears, since the button that had it is gone. `full`
+ * draws it filled, with no Cancelar — the charge is on its way.
+ */
+export function ChargeBar({ text, full, cancelLabel, onCancel }: {
+  text: string;
+  full: boolean;
+  cancelLabel: string;
+  onCancel: () => void;
+}): JSX.Element {
+  const { Button } = useCheckoutComponents();
+  const cancelScope = useRef<HTMLDivElement | null>(null);
+  useEffect(() => {
+    if (!full) focusButtonIn(cancelScope.current);
+  }, [full]);
+  return (
+    <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
+      <Box
+        data-testid="list-charge-bar"
+        data-full={full ? "true" : "false"}
+        // White on the primary's DARK shade, and on a darker fill still, in
+        // either theme: `primary.contrastText` turns dark in a dark theme and
+        // falls under 4.5:1 on the fill (E13 says white).
+        sx={{ position: "relative", minHeight: (t) => t.spacing(ACTION_HEIGHT), borderRadius: 2, bgcolor: "primary.dark", overflow: "hidden", display: "flex", alignItems: "center", px: 2.25 }}
+      >
+        <Box
+          aria-hidden
+          sx={{
+            position: "absolute",
+            insetBlock: 0,
+            left: 0,
+            bgcolor: "common.black",
+            opacity: 0.3,
+            width: full ? "100%" : 0,
+            animation: full ? "none" : `${fill} ${CHARGE_WINDOW_MS}ms linear forwards`,
+          }}
+        />
+        <Box component="span" sx={{ position: "relative", color: "common.white", typography: "body1", fontWeight: 600 }}>
+          {text}
+        </Box>
+      </Box>
+      {full ? null : (
+        <Box ref={cancelScope} sx={{ "& button": { minHeight: (t) => t.spacing(SECONDARY_HEIGHT) } }}>
+          <Button variant="outline" color="primary" size="lg" fullWidth onClick={onCancel} dataTestId="list-charge-cancel">
+            {cancelLabel}
+          </Button>
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+/** A muted, inert line in the action's place — "Aguardando o pagamento do Pix…" (the bar's live region says it). */
+export function WaitingLine({ text }: { text: string }): JSX.Element {
+  const { Text } = useCheckoutComponents();
+  return (
+    <Box
+      data-testid="list-waiting"
+      sx={{ minHeight: (t) => t.spacing(SECONDARY_HEIGHT), borderRadius: 2, bgcolor: "action.hover", display: "flex", alignItems: "center", justifyContent: "center", textAlign: "center", px: 1 }}
+    >
+      <Text variant="body" size="sm" color="secondary" as="span">
+        {text}
+      </Text>
+    </Box>
+  );
+}
+
+/**
+ * Google Pay's own button in the action's place (FUT-471's brand rule: the
+ * buyer presses Google's button, drawn by `createButton`, never a look-alike).
+ * Its press opens the sheet SYNCHRONOUSLY — inside the tap, as the browser
+ * requires — through `onPress`.
+ */
+export function GooglePayAction({ client, onPress }: { client: GooglePaymentsClient; onPress: () => void }): JSX.Element {
+  const mount = useRef<HTMLDivElement | null>(null);
+  const latest = useRef(onPress);
+  latest.current = onPress;
+  const locale = useCheckoutCopy().screens.wallet.googlePay.buttonLocale;
+  useEffect(() => {
+    const element = mount.current;
+    if (!element) return undefined;
+    element.replaceChildren(client.createButton({ onClick: () => latest.current(), buttonSizeMode: "fill", buttonLocale: locale }));
+    return () => element.replaceChildren();
+  }, [client, locale]);
+  return <Box ref={mount} data-testid="list-google-pay" sx={{ minHeight: (t) => t.spacing(ACTION_HEIGHT), "& > *": { width: "100%" } }} />;
+}

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

@@ -0,0 +1,315 @@
+import { Box } from "@mui/material";
+import { useCallback, useEffect, useRef, useState, type JSX } from "react";
+
+import { cardChain, cardTokenization, handOffMethod } from "../method-capability";
+import { paymentDataRequest, sheetDismissed } from "../google-pay-button";
+import { PaymentErrorPanel } from "../payment-error-panel";
+import { UNRESOLVED_CODE } from "../failure-codes";
+import type { CheckoutBasketIdentity } from "../basket";
+import type { BuyerContact, CheckoutProviderConfig } from "../types";
+import type { useCheckoutController } from "../use-checkout-controller";
+import { useCheckoutComponents } from "../ui";
+
+import { actionLabel, blockedReason, cardName } from "./choice";
+import { ChoiceList } from "./choice-list";
+import { CardRun, WalletRun, type ListChargeFailure } from "./charge-runners";
+import { ActionButton, ChargeBar, GooglePayAction, ListBar } from "./list-bar";
+import type { ListCapability } from "./use-capability";
+import type { ListCharge } from "./use-list-charge";
+import type { ListState } from "./use-list-state";
+import type { CheckoutDoorOption, CheckoutOnlineChoice, CheckoutPaymentList } from "./types";
+
+type Controller = ReturnType<typeof useCheckoutController>;
+
+/** Everything the list face reads, gathered by the step. */
+interface ListFaceProps {
+  c: Controller;
+  list: CheckoutPaymentList;
+  state: ListState;
+  charge: ListCharge;
+  cap: ListCapability;
+  config: CheckoutProviderConfig | null;
+  /** The amount the buyer sees now — the cart's, or the balance's. Never a held order's. */
+  total: string;
+  provider: string | null;
+  taxIdOnFile: boolean;
+  tenantSlug: string | undefined;
+  basket: CheckoutBasketIdentity | undefined;
+  pollIntervalMs: number;
+  saveBuyerContact?: (contact: BuyerContact) => void;
+  /** The hand-off was started: the step shows where the buyer is going. */
+  onHandOff: () => void;
+}
+
+/** Google Pay's sheet, opened in the tap: its answer and the amount it showed. */
+interface OpenSheet {
+  answer: Promise<string | null>;
+  cents: number;
+}
+
+function chosenDoor(props: ListFaceProps): CheckoutDoorOption | undefined {
+  const { choice } = props.state;
+  if (choice?.kind !== "door") return undefined;
+  return props.list.door?.find((option) => option.id === choice.id);
+}
+
+/** Something is on its way that a second press would duplicate: a raise, a host send, a charge. */
+function inFlight(props: ListFaceProps): boolean {
+  const doorPending = props.list.door?.some((option) => option.pending) ?? false;
+  return props.c.creating || doorPending || props.charge.phase !== "idle";
+}
+
+/** Remember the asked details for next time, as the Dados step's "Continuar" did — only with the buyer's consent. */
+function saveAsked(props: ListFaceProps): void {
+  const { c, state, saveBuyerContact } = props;
+  if (state.asked.length === 0 || !c.saveProfile) return;
+  saveBuyerContact?.({ name: c.buyer.name, phone: c.buyer.phone, taxId: c.buyer.taxId });
+}
+
+/** 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 {
+  const { c, charge, cap } = props;
+  saveAsked(props);
+  if (method === "CARD") return charge.start("CARD", props.total);
+  const raised = method === "PIX" ? "PIX" : handOffMethod(cap.offered);
+  if (method === "HAND_OFF") props.onHandOff();
+  c.setMethod(raised);
+  void c.startPayment(raised);
+}
+
+/**
+ * The bar's ONE action (M7): the only thing in the list that raises an order
+ * 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 () => {
+    const { choice } = props.state;
+    if (!choice || inFlight(props)) return;
+    if (choice.kind === "door") return chosenDoor(props)?.onSend();
+    clearFailure();
+    actOnline(props, choice.method);
+  };
+}
+
+/**
+ * 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.
+ */
+function useGooglePayPress(props: ListFaceProps, clearFailure: () => void, sheet: { current: OpenSheet | null }): () => void {
+  return () => {
+    const { cap, list, charge } = props;
+    const cents = list.totalCents;
+    if (!cap.googlePay || cents === undefined || inFlight(props)) return;
+    clearFailure();
+    saveAsked(props);
+    const answer = cap.googlePay.client
+      .loadPaymentData(paymentDataRequest(cap.googlePay.params, { totalCents: cents }))
+      .then(
+        (data) => data.paymentMethodData.tokenizationData.token,
+        (error: unknown) => {
+          if (sheetDismissed(error)) return null;
+          throw error;
+        },
+      );
+    sheet.current = { answer, cents };
+    charge.start("GOOGLE_PAY", props.total);
+  };
+}
+
+/** Who is paying, when the store already holds their CPF (FUT-465): "Pagando como … · CPF ✓ Alterar". */
+function PayerLine({ props }: { props: ListFaceProps }): JSX.Element | null {
+  const { Button, Text } = useCheckoutComponents();
+  const { c, list, taxIdOnFile, state } = props;
+  const name = c.buyer.name?.trim();
+  if (!taxIdOnFile || !name || state.choice?.kind !== "online") return null;
+  return (
+    // Left-aligned, "Alterar" ~4px after "CPF ✓" and wrapping under it when
+    // the name is long; the link keeps a 40px target and a visible focus ring.
+    <Box data-testid="list-payer" sx={{ display: "flex", alignItems: "center", justifyContent: "flex-start", flexWrap: "wrap", columnGap: 0 }}>
+      <Text variant="body" size="sm" color="secondary" as="span">
+        {list.copy.payer(name)}
+      </Text>
+      {c.editBuyer ? (
+        <Box
+          sx={{
+            "& button": { textDecoration: "underline", minHeight: (t) => t.spacing(5), minWidth: 0, px: 0.5, py: 0 },
+            "& button:focus-visible": { outline: (t) => `${t.spacing(0.25)} solid ${t.palette.primary.main}`, outlineOffset: (t) => t.spacing(0.25) },
+          }}
+        >
+          <Button variant="text" color="primary" size="sm" onClick={c.editBuyer} dataTestId="list-payer-change">
+            {list.copy.payerChange}
+          </Button>
+        </Box>
+      ) : null}
+    </Box>
+  );
+}
+
+/** The card's charge is past the button: counting down, or going out. */
+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. */
+function chargingText(props: ListFaceProps): string {
+  const { charge, list, state, total } = props;
+  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);
+}
+
+/** 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);
+  return {
+    label: list.hold ? list.hold.action : actionLabel(list.copy, state.choice, door, props.provider),
+    total: door?.totalLabel ?? 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 {
+  const { choice } = props.state;
+  return choice?.kind === "online" && choice.method === "GOOGLE_PAY" && !props.cap.googlePay;
+}
+
+/** Google Pay is chosen and nothing holds it: Google's own button takes the action's place. */
+function googlePayLive(props: ListFaceProps, reason: string | null, busy: boolean): boolean {
+  const { choice } = props.state;
+  return choice?.kind === "online" && choice.method === "GOOGLE_PAY" && props.cap.googlePay !== null && reason === null && !busy;
+}
+
+/** 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;
+  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} />;
+  }
+  // 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} />;
+}
+
+/** The charge under way, once there is an order to run it against. */
+function Runners({ props, sheet, onFailed }: {
+  props: ListFaceProps;
+  sheet: OpenSheet | null;
+  onFailed: (failure: ListChargeFailure | null) => void;
+}): JSX.Element | null {
+  const { c, charge, config } = props;
+  const order = charge.chargeable;
+  if (!order) return null;
+  const common = {
+    order, buyer: c.buyer, scope: { tenantSlug: props.tenantSlug, basket: props.basket },
+    onResolved: c.handleResolved, pollIntervalMs: props.pollIntervalMs, onAccepted: charge.accepted, onFailed,
+  };
+  if (charge.kind === "CARD") {
+    return <CardRun {...common} card={props.state.card} config={cardTokenization(config)} chain={cardChain(config)} />;
+  }
+  if (charge.kind === "GOOGLE_PAY" && sheet) return <WalletRun {...common} sheet={sheet.answer} sheetCents={sheet.cents} />;
+  return null;
+}
+
+/** A raise the host refused, with the step's own retry — as the tabs layout shows it. */
+function RaiseError({ c, onRetry }: { c: Controller; onRetry: () => void }): JSX.Element | null {
+  if (!c.createError || c.order || c.creating) return null;
+  return <PaymentErrorPanel message={c.createError} emailFlagged={c.errorField === "email"} code={c.errorCode} onUseEmail={c.payWithEmail} onRetry={onRetry} />;
+}
+
+/** 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({
+    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,
+  });
+}
+
+/**
+ * While the bar counts, a charge goes out, a raise or a host send is under way,
+ * only Cancelar acts: the list is inert, and the credit and the payer line
+ * step aside (FN:587,590).
+ */
+function barFacts(props: ListFaceProps, door: CheckoutDoorOption | undefined, reason: string | null) {
+  const charging = props.charge.phase !== "idle";
+  const online = props.state.choice?.kind === "online";
+  return {
+    charging,
+    locked: inFlight(props),
+    extras: online && !charging ? props.list.onlineExtras : undefined,
+    underButton: charging ? null : (door?.error ?? reason),
+    live: cardCharging(props.charge) ? chargingText(props) : null,
+  };
+}
+
+/**
+ * The bar may still charge only while nothing holds it and the amount it named
+ * at the press is still the amount — a hold the host raises, a reason that
+ * 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 { setAllowed } = charge;
+  useEffect(() => setAllowed(allowed), [allowed, setAllowed]);
+}
+
+/** Cancelar by the buyer gives the focus back to the button it replaced. */
+function useCancelWithFocus(charge: ListCharge): { returnFocus: boolean; onCancel: () => void } {
+  const [returnFocus, setReturnFocus] = useState(false);
+  useEffect(() => {
+    if (returnFocus && charge.phase === "idle") setReturnFocus(false);
+  }, [returnFocus, charge.phase]);
+  const { cancel } = charge;
+  const onCancel = useCallback(() => {
+    setReturnFocus(true);
+    cancel();
+  }, [cancel]);
+  return { returnFocus, onCancel };
+}
+
+/** The list, the charge under way, and the bar. */
+export function ListFace(props: ListFaceProps): JSX.Element {
+  const { c, list, state, charge } = props;
+  const [failure, setFailure] = useState<ListChargeFailure | null>(null);
+  const clearFailure = useCallback(() => setFailure(null), []);
+  const { settle } = charge;
+  const onFailed = useCallback((next: ListChargeFailure | null) => { setFailure(next); settle(); }, [settle]);
+  const sheet = useRef<OpenSheet | null>(null);
+  const act = useAct(props, clearFailure);
+  const onGooglePay = useGooglePayPress(props, clearFailure, sheet);
+  const door = chosenDoor(props);
+  const reason = reasonOf(props, door);
+  useChargeGuard(props, reason);
+  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} />
+      ) : null}
+      <Runners props={props} sheet={sheet.current} onFailed={onFailed} />
+      <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} />
+        </ListBar>
+      ) : null}
+    </Box>
+  );
+}