@12-apps/payments-frontend 3.34.4 → 3.36.0

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

@@ -0,0 +1,175 @@
+import { Box } from "@mui/material";
+import { useMemo, type JSX, type ReactNode } from "react";
+
+import { useCheckoutCopy } from "./copy-context";
+import { ArrowBackIcon } from "./icons";
+import { CheckoutLayoutProvider, STEP_COLUMN_MAX, useCheckoutLayout, useWideLayout } from "./payment-step-layout";
+import { useCheckoutComponents } from "./ui";
+import type { CheckoutViewCopy } from "./view-copy";
+
+/**
+ * The flow's frame and header: measured once at the host's full width
+ * (FUT-3525), so every step agrees on whether this is the computer's layout or
+ * the phone's.
+ */
+
+/** Step ids are the flow's own contract; the labels beside them are host copy. */
+function stepperSteps(copy: CheckoutViewCopy): { id: string; label: string }[] {
+  return [
+    { id: "dados", label: copy.steps.dados },
+    { id: "payment", label: copy.steps.payment },
+    { id: "status", label: copy.steps.status },
+  ];
+}
+
+/**
+ * The slim checkout header — the flow's only nav: a step-aware back link
+ * (Pagamento → Dados, else the menu).
+ *
+ * Deliberately nothing else. A "limpar carrinho" trash used to sit on the right
+ * of the Dados step; it was removed because emptying the cart is a CART action
+ * and belongs where the cart is edited — the drawer, which already offers a
+ * per-line remove. Offering it here put a destructive control next to the form
+ * a buyer is filling in, one tap away from the field they are typing into.
+ */
+function CheckoutHeader({ copy, step, onBack }: { copy: CheckoutViewCopy; step: string; onBack: () => void }): JSX.Element {
+  const { Button } = useCheckoutComponents();
+  return (
+    <Box sx={{ minHeight: 36, display: "flex", alignItems: "center", gap: 1 }}>
+      <Button variant="text" color="neutral" size="sm" icon={<ArrowBackIcon fontSize="small" />} iconPosition="left" onClick={onBack} dataTestId="checkout-back">
+        {step === "dados" ? copy.dados.keepShopping : copy.dados.back}
+      </Button>
+    </Box>
+  );
+}
+
+/**
+ * The phone's header (FUT-3525, layout C): "← Voltar" with "Etapa 2 de 3 ·
+ * Pagamento" on the same row, and a thin bar filled to the step — the dots
+ * of the computer's stepper cost a phone a row for the same fact.
+ */
+function CompactHeader({
+  copy,
+  step,
+  onBack,
+}: {
+  copy: CheckoutViewCopy;
+  step: string;
+  onBack: () => void;
+}): JSX.Element {
+  const { Button, Text } = useCheckoutComponents();
+  const layout = useCheckoutCopy().screens.layout;
+  const steps = stepperSteps(copy);
+  const at = Math.max(
+    0,
+    steps.findIndex((item) => item.id === step),
+  );
+  const current = steps[at];
+  return (
+    <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
+      <Box
+        sx={{
+          minHeight: 44,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: 1,
+        }}
+      >
+        {/* Its label on the column's edge, as the prototype draws it: the text
+            button's own padding would push it 12px in. */}
+        <Box sx={{ ml: -1.5 }}>        <Button
+            variant="text"
+            color="neutral"
+            size="sm"
+            icon={<ArrowBackIcon fontSize="small" />}
+            iconPosition="left"
+            onClick={onBack}
+            dataTestId="checkout-back"
+          >
+            {step === "dados" ? copy.dados.keepShopping : copy.dados.back}
+          </Button>
+        </Box>
+        <Text
+          variant="body"
+          size="xs"
+          as="span"
+          data-testid="checkout-step-progress"
+        >
+          {layout.stepProgress(at + 1, steps.length, current?.label ?? "")}
+        </Text>
+      </Box>
+      <Box
+        // The bar draws the sentence beside it; a reader hears that once.
+        aria-hidden
+        data-testid="checkout-stepper"
+        sx={{
+          height: 4,
+          borderRadius: 2,
+          bgcolor: "divider",
+          overflow: "hidden",
+        }}
+      >
+        <Box
+          sx={{
+            height: "100%",
+            width: `${((at + 1) / steps.length) * 100}%`,
+            bgcolor: "primary.main",
+            borderRadius: 2,
+          }}
+        />
+      </Box>
+    </Box>
+  );
+}
+
+/** Compact 50px progress header so the form stays above the fold on mobile. */
+function ProgressHeader({ copy, step, completed }: { copy: CheckoutViewCopy; step: string; completed: Set<string> }): JSX.Element {
+  const { Stepper } = useCheckoutComponents();
+  return (
+    <Box sx={{ height: 50, display: "flex", flexDirection: "column", justifyContent: "center" }}>
+      <Stepper steps={stepperSteps(copy)} activeId={step} completed={completed} orientation="horizontal" size="sm" data-testid="checkout-stepper" />
+    </Box>
+  );
+}
+
+/** The header for the frame the flow is in: back link and stepper on a computer, one compact row on a phone. */
+export function FlowHeader({
+  copy,
+  step,
+  completed,
+  onBack,
+}: {
+  copy: CheckoutViewCopy;
+  step: string;
+  completed: Set<string>;
+  onBack: () => void;
+}): JSX.Element {
+  const wide = useCheckoutLayout()?.wide ?? false;
+  if (!wide) return <CompactHeader copy={copy} step={step} onBack={onBack} />;
+  return (
+    <>
+      <CheckoutHeader copy={copy} step={step} onBack={onBack} />
+      <ProgressHeader copy={copy} step={step} completed={completed} />
+    </>
+  );
+}
+
+/**
+ * Measured at the HOST's full width: one frame for the whole flow. Pagamento
+ * alone takes that width (its summary column); every other step keeps the
+ * 672px column it always had.
+ */
+export function CheckoutFrame({ payment, children }: { payment: boolean; children: ReactNode }): JSX.Element {
+  const [wide, frame] = useWideLayout();
+  const layout = useMemo(() => ({ wide }), [wide]);
+  return (
+    <Box ref={frame} sx={{ width: "100%" }}>
+      <CheckoutLayoutProvider value={layout}>
+        <Box sx={{ display: "flex", flexDirection: "column", gap: { xs: 2, sm: 3 }, width: "100%", mx: "auto", maxWidth: payment ? "none" : STEP_COLUMN_MAX }}>
+          {children}
+        </Box>
+      </CheckoutLayoutProvider>
+    </Box>
+  );
+}

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

@@ -2,14 +2,14 @@ import { Box } from "@mui/material";
 import { useEffect, useRef, type JSX, type ReactNode } from "react";
 
 import type { CheckoutBasketIdentity } from "./basket";
-import { displayTotals, PayBarTotal } from "./checkout-totals";
+import { CartChangedBoundary, type OrderRefresh } from "./cart-changed";
 import { useCheckoutCopy } from "./copy-context";
 import { useMethodChoice } from "./method-choice";
-import { MethodPicker } from "./method-picker";
 import { PixStageProvider } from "./pix-stage";
-import { StepColumn, usePaymentPixStage } from "./payment-step-layout";
+import { PayBarTotalProvider, useCheckoutLayout, usePaymentPixStage } from "./payment-step-layout";
 import { PaymentErrorPanel } from "./payment-error-panel";
-import { PayerSummary } from "./payer-summary";
+import { PaymentStepFrame, summaryParts } from "./payment-step-frame";
+import type { CheckoutDeliverySummary, CheckoutSummaryLine, OrderSummaryParts } from "./payment-summary";
 import { resolveCheckoutScreen } from "./providers/registry";
 import type {
   BuyerField,
@@ -123,48 +123,6 @@ export function EmptyCart({ copy, onBack }: { copy: EmptyCartCopy; onBack: () =>
   );
 }
 
-/** What the step knows about the amount: the charge's, the balance's, the cart's. */
-interface StepMoney {
-  order: CheckoutOrder | null;
-  cartTotals?: { totalLabel: string; totalItems: number };
-  totalOverride?: { label: string; items: number };
-  discountLines?: ReactNode;
-}
-
-/**
- * The Pagamento step's own money line (FUT-1179).
- *
- * THE RAISED ORDER'S TOTAL WINS, exactly as the confirmation screen's does
- * (`statusTotalLabel`). Once a charge exists, that charge's amount is what is
- * being taken — a repriced cart, or an order resumed from a parked entry, makes
- * the cart's total a different number from the one about to leave the buyer's
- * account. Showing the cart's number above a QR for the order's would be this
- * ticket's own defect in a new place: an amount on screen that is not the
- * amount being charged.
- *
- * The item COUNT stays the cart's — an order carries no line count, and the
- * caption is a description of the basket rather than of the charge.
- *
- * Renders nothing at all when the host supplied no totals and no order — a step
- * that would otherwise print "Total ·" with a blank beside it is worse than the
- * silence this ticket is about. Every host mounting `CheckoutFlow` gets them;
- * only a hand-composed step can be missing them.
- */
-function PaymentStepTotal({ money }: { money: StepMoney }): JSX.Element | null {
-  const { order, cartTotals, totalOverride, discountLines } = money;
-  if (!cartTotals && !totalOverride && !order) return null;
-  const { label, items } = displayTotals(totalOverride, cartTotals ?? { totalLabel: "", totalItems: 0 });
-  return (
-    <Box data-testid="payment-step-total" sx={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 2 }}>
-      <PayBarTotal totalLabel={order?.totalLabel ?? label} totalItems={items}>
-        {/* Suppressed while settling a balance: those totals come from the
-            frozen ticket, not the cart. */}
-        {totalOverride ? null : discountLines}
-      </PayBarTotal>
-    </Box>
-  );
-}
-
 /** Props for {@link PaymentStep} — step 2's inputs, wired by the flow. */
 interface PaymentStepProps {
   method: PaymentMethod | null;
@@ -180,6 +138,11 @@ interface PaymentStepProps {
  */
   errorCode?: string | null;
   onGenerate: (method: PaymentMethod) => void;
+  /**
+   * Re-price the raised order IN PLACE, keeping the card form (FUT-1139). Absent,
+   * the step falls back to raising the payment again.
+   */
+  refresh?: OrderRefresh;
   onUseEmail: (email: string) => void;
   /**
    * Present ⇒ the buyer reached this step without a Dados step (FUT-465), so
@@ -215,6 +178,12 @@ interface PaymentStepProps {
   totalOverride?: { label: string; items: number };
   /** The host's own rendered discount itemization, under the total (FUT-246). */
   discountLines?: ReactNode;
+  /** The cart's lines, listed in the computer's order summary (FUT-3525). */
+  lines?: CheckoutSummaryLine[];
+  /** Where a delivery goes — Entrega only; absent hides the row (FUT-3525). */
+  delivery?: CheckoutDeliverySummary;
+  /** The host's note control, shown in the summary (FUT-3525). */
+  orderNote?: ReactNode;
   pollIntervalMs?: number;
   /** Retrying a refused card — preselect no saved instrument (FUT-1145). */
   freshInstrument?: boolean;
@@ -240,6 +209,7 @@ export function PaymentStep({
   errorField,
   errorCode,
   onGenerate,
+  refresh,
   onUseEmail,
   onEditBuyer,
   providerConfig,
@@ -247,6 +217,9 @@ export function PaymentStep({
   cartTotals,
   totalOverride,
   discountLines,
+  lines,
+  delivery,
+  orderNote,
   pollIntervalMs,
   freshInstrument,
   basket,
@@ -258,43 +231,39 @@ export function PaymentStep({
   useAutoRaiseOrder(order, method, creating, createError, onGenerate);
   const pixStage = usePaymentPixStage(choice, onMethodChange);
 
+  const wide = useCheckoutLayout()?.wide ?? false;
+  const parts = summaryParts(
+    { order, cartTotals, totalOverride, discountLines },
+    { lines, payer: payerOf(buyer, onEditBuyer), delivery, orderNote },
+  );
+  const tabs = {
+    show: !(choice.atProvider || pixStage.afterCopy),
+    method,
+    onChange: onMethodChange,
+    cardUnavailable: choice.cardUnavailable,
+    offered: choice.offered,
+  };
+
   return (
     <PixStageProvider stage={pixStage}>
-      <Box sx={{ display: "flex", flexDirection: "column", gap: 3 }}>
-        {/* THE AMOUNT, before anything asks for it (FUT-1179). At the top rather
-            than in a sticky bar of its own: this step's actions belong to the
-            pane below it — the PIX code, the card form's own pay bar, the
-            hand-off button — and a second bar would put two "pay" controls on
-            one screen. */}
-        <PaymentStepTotal money={{ order, cartTotals, totalOverride, discountLines }} />
-
-        {/* Self-hiding: renders only for a flow whose Dados step was skipped. */}
-        <StepColumn>
-          <PayerSummary name={buyer.name} taxId={buyer.taxId} onEdit={onEditBuyer} />
-        </StepColumn>
-
-        {choice.atProvider || pixStage.afterCopy ? null : (
-          <MethodPicker value={method} onChange={onMethodChange} cardUnavailable={choice.cardUnavailable} offered={choice.offered} />
-        )}
-
-        <StepColumn full={order?.method === "PIX"}>
-          <PaymentBody
-            order={order}
-            buyer={buyer}
-            providerConfig={config}
-            method={method}
-            tenantSlug={tenantSlug}
-            onResolved={onResolved}
-            onStart={choice.onStart}
-            creating={creating}
-            pollIntervalMs={pollIntervalMs}
-            freshInstrument={freshInstrument}
-            basket={basket}
-            validateApplePayMerchant={validateApplePayMerchant}
-          />
-        </StepColumn>
-
-        <StepColumn>
+      <PayBarTotalProvider value={parts?.totalLabel ?? null}>
+        <PaymentStepFrame wide={wide} parts={parts} tabs={tabs} filled={Boolean(method || order)}>
+          <CartChangedBoundary {...{ order, creating, onGenerate, refresh }} basket={totalOverride ? undefined : basket}>
+            <PaymentBody
+              order={order}
+              buyer={buyer}
+              providerConfig={config}
+              method={method}
+              tenantSlug={tenantSlug}
+              onResolved={onResolved}
+              onStart={choice.onStart}
+              creating={creating}
+              pollIntervalMs={pollIntervalMs}
+              freshInstrument={freshInstrument}
+              basket={basket}
+              validateApplePayMerchant={validateApplePayMerchant}
+            />
+          </CartChangedBoundary>
           <RaisingState
             order={order}
             method={method}
@@ -305,12 +274,17 @@ export function PaymentStep({
             onUseEmail={onUseEmail}
             onGenerate={onGenerate}
           />
-        </StepColumn>
-      </Box>
+        </PaymentStepFrame>
+      </PayBarTotalProvider>
     </PixStageProvider>
   );
 }
 
+/** The payer line's facts — only for a flow whose Dados step was skipped (FUT-465). */
+function payerOf(buyer: BuyerInfo, onEditBuyer: (() => void) | undefined): OrderSummaryParts["payer"] {
+  return onEditBuyer ? { name: buyer.name, taxId: buyer.taxId, onEdit: onEditBuyer } : undefined;
+}
+
 /**
  * What the shell says while the order is being raised, and if raising it
  * failed.

package/src/components/checkout/icons.tsx

@@ -69,3 +69,8 @@ export const QrCodeIcon = makeIcon([
 ]);
 
 export const CheckIcon = makeIcon(['M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z']);
+
+export const PlaceOutlinedIcon = makeIcon([
+  'M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7M7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 2.88-2.88 7.19-5 9.88C9.92 16.21 7 11.85 7 9',
+  'M12 6.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5',
+]);

package/src/components/checkout/method-tabs.tsx

@@ -0,0 +1,249 @@
+import { Box } from "@mui/material";
+import type { JSX, KeyboardEvent } from "react";
+
+import { useCheckoutCopy } from "./copy-context";
+import { CreditCardIcon, PixIcon } from "./icons";
+import type { PaymentMethod } from "./types";
+import { useCheckoutComponents } from "./ui";
+
+/**
+ * The Pagamento step's method selector as TABS (FUT-3525): folder tabs over
+ * the payment panel on a computer, a pill with two equal segments on a phone.
+ *
+ * Tabs rather than the radio tiles of {@link MethodPicker} because what the
+ * choice changes is the panel right under it — the Pix pane or the card form
+ * — and the folder shape draws exactly that: the chosen tab opens into its
+ * panel. Pix and Cartão are always the same width.
+ *
+ * Everything else is the tiles' behaviour, kept: selecting raises the order
+ * (the step's auto-raise), a store without a card path disables that tab and
+ * says why under it, and the test ids are `checkout-method-<METHOD>`.
+ */
+
+type MethodTabsShape = "folder" | "pill";
+
+interface MethodTab {
+  value: PaymentMethod;
+  label: string;
+  icon: JSX.Element;
+}
+
+/**
+ * The DOM id of a method's tab, which its panel names in `aria-labelledby`.
+ * Built on the step's own `useId`, so two flows on one page (a stories grid,
+ * a host's preview) never share one.
+ */
+export function methodTabId(idBase: string, method: PaymentMethod): string {
+  return `${idBase}-method-tab-${method}`;
+}
+
+/** The DOM id of the panel every method tab controls. */
+export function methodPanelId(idBase: string): string {
+  return `${idBase}-method-panel`;
+}
+
+/** What a tab's label is drawn in: muted when it cannot be chosen, the brand colour when it is. */
+function tabColor(selected: boolean, unavailable: boolean): string {
+  if (unavailable) return "text.disabled";
+  return selected ? "primary.main" : "text.primary";
+}
+
+const TAB_COMMON = {
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: 1.25,
+  font: "inherit",
+  fontWeight: 700,
+  "&:focus-visible": { outline: "2px solid", outlineColor: "primary.main", outlineOffset: 2 },
+} as const;
+
+/** The phone's segment: half of a pill, raised when chosen. */
+function pillSx(selected: boolean) {
+  return {
+    flex: 1,
+    minHeight: 48,
+    border: 0,
+    borderRadius: 999,
+    bgcolor: selected ? "background.paper" : "transparent",
+    boxShadow: selected ? 1 : "none",
+  } as const;
+}
+
+/** The computer's folder tab: open at the bottom into the panel when chosen. */
+function folderSx(selected: boolean, unavailable: boolean) {
+  return {
+    flex: "0 1 180px",
+    minWidth: 0,
+    minHeight: 52,
+    px: 3,
+    mb: "-1px",
+    border: "1px solid",
+    borderColor: "divider",
+    borderTopWidth: selected ? 4 : 1,
+    borderTopColor: selected ? "primary.main" : "divider",
+    borderBottomColor: selected ? "background.paper" : "divider",
+    borderRadius: "8px 8px 0 0",
+    bgcolor: selected ? "background.paper" : "action.hover",
+    "&:hover": unavailable || selected ? {} : { bgcolor: "action.selected" },
+  } as const;
+}
+
+function tabSx(shape: MethodTabsShape, selected: boolean, unavailable: boolean) {
+  const state = {
+    color: tabColor(selected, unavailable),
+    cursor: unavailable ? "not-allowed" : "pointer",
+    opacity: unavailable ? 0.6 : 1,
+  };
+  const own = shape === "pill" ? pillSx(selected) : folderSx(selected, unavailable);
+  return { ...TAB_COMMON, ...state, ...own };
+}
+
+function listSx(shape: MethodTabsShape) {
+  if (shape === "pill") {
+    return {
+      display: "flex",
+      p: 0.5,
+      gap: 0.5,
+      bgcolor: "action.hover",
+      borderRadius: 999,
+    } as const;
+  }
+  return {
+    display: "flex",
+    gap: 0.75,
+    pl: 0.25,
+    borderBottom: "1px solid",
+    borderColor: "divider",
+  } as const;
+}
+
+/** Where each key moves from position `at` among `count` enabled tabs (the ARIA tabs pattern). */
+const KEY_STEPS: Record<string, (at: number, count: number) => number> = {
+  ArrowRight: (at, count) => (at + 1) % count,
+  ArrowLeft: (at, count) => (at - 1 + count) % count,
+  Home: () => 0,
+  End: (_at, count) => count - 1,
+};
+
+/** ←/→ move between the enabled tabs and select; Home and End jump. */
+function nextMethod(key: string, enabled: PaymentMethod[], current: PaymentMethod | null): PaymentMethod | null {
+  const step = KEY_STEPS[key];
+  if (!step || enabled.length === 0) return null;
+  const at = current ? enabled.indexOf(current) : -1;
+  return enabled[step(at, enabled.length)] ?? null;
+}
+
+/** One tab. A store that cannot take a card keeps the tab, disabled, with the reason in its name. */
+function MethodTabButton({
+  tab,
+  idBase,
+  shape,
+  selected,
+  unavailable,
+  focusable,
+  reason,
+  onSelect,
+}: {
+  tab: MethodTab;
+  idBase: string;
+  shape: MethodTabsShape;
+  selected: boolean;
+  unavailable: boolean;
+  focusable: boolean;
+  reason: string;
+  onSelect: () => void;
+}): JSX.Element {
+  return (
+    <Box
+      component="button"
+      type="button"
+      role="tab"
+      id={methodTabId(idBase, tab.value)}
+      aria-selected={selected}
+      aria-controls={methodPanelId(idBase)}
+      aria-label={unavailable ? `${tab.label}, ${reason}` : undefined}
+      aria-disabled={unavailable || undefined}
+      tabIndex={focusable ? 0 : -1}
+      data-testid={`checkout-method-${tab.value}`}
+      onClick={unavailable ? undefined : onSelect}
+      sx={tabSx(shape, selected, unavailable)}
+    >
+      <Box sx={{ display: "flex" }}>{tab.icon}</Box>
+      {tab.label}
+    </Box>
+  );
+}
+
+/** Why the card tab is disabled, under the tabs (a screen reader has it in the tab's name). */
+function UnavailableReason({ shape, text }: { shape: MethodTabsShape; text: string }): JSX.Element {
+  const { Text } = useCheckoutComponents();
+  return (
+    <Box aria-hidden data-testid="method-reason-CARD" sx={{ textAlign: shape === "pill" ? "right" : "left", px: 1 }}>
+      <Text variant="caption" size="xs" color="secondary" as="p" style={{ margin: 0 }}>
+        {text}
+      </Text>
+    </Box>
+  );
+}
+
+export function MethodTabs({
+  idBase,
+  shape,
+  value,
+  onChange,
+  cardUnavailable = false,
+  offered = null,
+}: {
+  /** The step's `useId`, which the tab and panel ids are built on. */
+  idBase: string;
+  shape: MethodTabsShape;
+  /** The chosen method, or `null` before the buyer has picked one. */
+  value: PaymentMethod | null;
+  onChange: (method: PaymentMethod) => void;
+  /** True ⇒ the store's active provider has no card path here; disable that tab. */
+  cardUnavailable?: boolean;
+  /** Methods the store's chain can charge, or `null` while unknown (fail open). */
+  offered?: PaymentMethod[] | null;
+}): JSX.Element {
+  const copy = useCheckoutCopy().screens.method;
+  const tabs: MethodTab[] = [
+    { value: "PIX" as const, label: copy.pixLabel, icon: <PixIcon fontSize="small" /> },
+    { value: "CARD" as const, label: copy.cardLabel, icon: <CreditCardIcon fontSize="small" /> },
+  ].filter((tab) => offered === null || offered.includes(tab.value));
+  const isUnavailable = (method: PaymentMethod): boolean => method === "CARD" && cardUnavailable;
+  const enabled = tabs.map((tab) => tab.value).filter((method) => !isUnavailable(method));
+  // With nothing chosen yet, the first enabled tab is the one Tab lands on.
+  const focusable = value && enabled.includes(value) ? value : enabled[0];
+
+  const onKeyDown = (event: KeyboardEvent<HTMLElement>): void => {
+    const next = nextMethod(event.key, enabled, value);
+    if (!next) return;
+    event.preventDefault();
+    // Selecting raises an order, so a key that lands on the tab already
+    // chosen (Home on the first, an arrow with one enabled tab) does nothing.
+    if (next !== value) onChange(next);
+    document.getElementById(methodTabId(idBase, next))?.focus();
+  };
+
+  return (
+    <Box sx={{ display: "flex", flexDirection: "column", gap: 0.5 }}>
+      <Box role="tablist" aria-label={copy.groupLabel} data-testid="checkout-method" onKeyDown={onKeyDown} sx={listSx(shape)}>
+        {tabs.map((tab) => (
+          <MethodTabButton
+            key={tab.value}
+            tab={tab}
+            idBase={idBase}
+            shape={shape}
+            selected={tab.value === value && !isUnavailable(tab.value)}
+            unavailable={isUnavailable(tab.value)}
+            focusable={tab.value === focusable}
+            reason={copy.unavailableHere}
+            onSelect={() => onChange(tab.value)}
+          />
+        ))}
+      </Box>
+      {cardUnavailable && tabs.some((tab) => tab.value === "CARD") ? <UnavailableReason shape={shape} text={copy.unavailableHere} /> : null}
+    </Box>
+  );
+}

package/src/components/checkout/payment-status-parts.tsx

@@ -206,9 +206,19 @@ function Fact({ label, value, testId }: { label: string; value: string; testId?:
       <Text variant="body" size="sm" as="span" style={{ opacity: 0.75 }}>
         {label}
       </Text>
-      <Text variant="body" size="sm" weight="bold" as="span" data-testid={testId}>
-        {value}
-      </Text>
+      {/* A long e-mail breaks rather than pushing the receipt off a 320px
+          phone: an address has no spaces to wrap at. */}
+      <Box sx={{ minWidth: 0, textAlign: "right", overflowWrap: "anywhere" }}>
+        <Text
+          variant="body"
+          size="sm"
+          weight="bold"
+          as="span"
+          data-testid={testId}
+        >
+          {value}
+        </Text>
+      </Box>
     </Box>
   );
 }