@12-apps/payments-frontend 3.33.0 → 3.34.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/payments-frontend",
-  "version": "3.33.0",
+  "version": "3.34.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/checkout-flow.tsx

@@ -13,6 +13,7 @@ import { CheckoutCopyProvider } from "./copy-context";
 import { OneClickProvider, useOneClick } from "./one-click";
 import { CheckoutComponentsProvider, useCheckoutComponents, type CheckoutComponents } from "./ui";
 import type { CheckoutViewCopy } from "./view-copy";
+import { STEP_COLUMN_MAX } from "./payment-step-layout";
 import { useCheckoutController, type CheckoutHostPorts } from "./use-checkout-controller";
 
 /** Step ids are the flow's own contract; the labels beside them are host copy. */
@@ -340,7 +341,8 @@ function CheckoutFlowBody(props: Omit<CheckoutFlowProps, "components">): JSX.Ele
   }
 
   return (
-    <Box sx={{ display: "flex", flexDirection: "column", gap: { xs: 2, sm: 3 } }}>
+    // Pagamento alone takes the host's full width (its PIX pane, FUT-3367).
+    <Box sx={{ display: "flex", flexDirection: "column", gap: { xs: 2, sm: 3 }, width: "100%", mx: "auto", maxWidth: c.step === "payment" ? "none" : STEP_COLUMN_MAX }}>
       <CheckoutHeader copy={copy} step={c.step} onBack={c.back} />
 
       <ProgressHeader copy={copy} step={c.step} completed={c.completed} />

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

@@ -6,6 +6,8 @@ import { displayTotals, PayBarTotal } from "./checkout-totals";
 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 { PaymentErrorPanel } from "./payment-error-panel";
 import { PayerSummary } from "./payer-summary";
 import { resolveCheckoutScreen } from "./providers/registry";
@@ -228,22 +230,6 @@ interface PaymentStepProps {
   onResolved: OnCheckoutResolved;
 }
 
-/**
- * Step 2 "Pagamento" — pick PIX or card and pay on the SAME page. Selecting a
- * method auto-raises its order and reveals its UI (PIX QR / card form) with no
- * intermediate tap; switching method clears the previous order (controller).
- *
- * ## Unless the choice is not ours to ask
- *
- * A store that finishes checkout on the provider's own page gets NO picker
- * here (`methodChosenAtProvider`). Its screen renders a single "Seguir para o
- * pagamento" instead, and pressing it selects the store's hand-off method —
- * which is the same event a tile press is, so the auto-raise, the error panel
- * and the retry below all keep working unchanged. Preselection is suppressed
- * for the same flow, and deliberately: it exists to spare a buyer a tap that
- * buys them nothing, but here the tap is the buyer's consent to LEAVE, and
- * taking it for them would redirect a checkout the moment it rendered.
- */
 export function PaymentStep({
   method,
   onMethodChange,
@@ -270,55 +256,58 @@ export function PaymentStep({
   const config = providerConfig ?? null;
   const choice = useMethodChoice(config, method, onMethodChange);
   useAutoRaiseOrder(order, method, creating, createError, onGenerate);
+  const pixStage = usePaymentPixStage(choice, onMethodChange);
 
   return (
-    <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 }} />
+    <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. */}
-      <PayerSummary name={buyer.name} taxId={buyer.taxId} onEdit={onEditBuyer} />
+        {/* 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 ? null : (
-        <MethodPicker
-          value={method}
-          onChange={onMethodChange}
-          cardUnavailable={choice.cardUnavailable}
-          offered={choice.offered}
-          pixByStore={config?.chain?.find((link) => link.methods.includes("PIX"))?.confirmation === "MANUAL"}
-        />
-      )}
+        {choice.atProvider || pixStage.afterCopy ? null : (
+          <MethodPicker value={method} onChange={onMethodChange} cardUnavailable={choice.cardUnavailable} offered={choice.offered} />
+        )}
 
-      <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 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>
 
-      <RaisingState
-        order={order}
-        method={method}
-        creating={creating && !choice.atProvider}
-        createError={createError}
-        errorField={errorField}
-        errorCode={errorCode}
-        onUseEmail={onUseEmail}
-        onGenerate={onGenerate}
-      />
-    </Box>
+        <StepColumn>
+          <RaisingState
+            order={order}
+            method={method}
+            creating={creating && !choice.atProvider}
+            createError={createError}
+            errorField={errorField}
+            errorCode={errorCode}
+            onUseEmail={onUseEmail}
+            onGenerate={onGenerate}
+          />
+        </StepColumn>
+      </Box>
+    </PixStageProvider>
   );
 }
 

package/src/components/checkout/icons.tsx

@@ -63,3 +63,9 @@ export const PersonOutlineIcon = makeIcon([
 export const CloseIcon = makeIcon([
   'M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z',
 ]);
+
+export const QrCodeIcon = makeIcon([
+  'M3 11h8V3H3zm2-6h4v4H5zM3 21h8v-8H3zm2-6h4v4H5zm8-12v8h8V3zm6 6h-4V5h4zm0 10h2v2h-2zm-6-6h2v2h-2zm2 2h2v2h-2zm-2 2h2v2h-2zm2 2h2v2h-2zm2-2h2v2h-2zm0-4h2v2h-2zm2 2h2v2h-2z',
+]);
+
+export const CheckIcon = makeIcon(['M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z']);

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

@@ -10,52 +10,42 @@ import { useCheckoutComponents } from "./ui";
 interface MethodOption {
   value: PaymentMethod;
   label: string;
-  description: string;
   icon: JSX.Element;
 }
 
-/**
- * The two tiles, named by the HOST (FUT-760).
- *
- * Built per render rather than as a module constant, because the words are no
- * longer this package's: a frozen `OPTIONS` array could only hold the origin
- * host's Portuguese. The order and the icons are still ours — that is layout,
- * not language.
- */
-function methodOptions(copy: MethodPickerCopy, pixByStore: boolean): MethodOption[] {
-  // A Pix the store confirms by hand is not "aprovação imediata" (FUT-3232).
-  const pixDescription = (pixByStore ? copy.pixManualDescription : undefined) ?? copy.pixDescription;
+function methodOptions(copy: MethodPickerCopy): MethodOption[] {
   return [
-    { value: "PIX", label: copy.pixLabel, description: pixDescription, icon: <PixIcon /> },
-    {
-      value: "CARD",
-      label: copy.cardLabel,
-      description: copy.cardDescription,
-      icon: <CreditCardIcon />,
-    },
+    { value: "PIX", label: copy.pixLabel, icon: <PixIcon fontSize="small" /> },
+    { value: "CARD", label: copy.cardLabel, icon: <CreditCardIcon fontSize="small" /> },
   ];
 }
 
-/** Text/icon color for a tile's state — one place, so the ternaries stay flat. */
-function tileColor(unavailable: boolean, selected: boolean, muted: string): string {
+function tileColor(unavailable: boolean, selected: boolean): string {
   if (unavailable) return "text.disabled";
-  return selected ? "primary.main" : muted;
+  return selected ? "primary.main" : "text.primary";
 }
 
-/** One selectable (or disabled) payment-method tile of the segmented control. */
+/**
+ * One method: its icon and its name on one line (the 2026-10-06 Pix
+ * redesign). The line under the name went: it cost the phone a row above the
+ * Pix code, and the name says enough. A tile the store cannot charge is
+ * disabled, and the reason is part of its accessible name ("Cartão, …") as
+ * well as the caption under it.
+ */
 function MethodTile({
   option,
   selected,
   unavailable,
+  reason,
   onSelect,
 }: {
   option: MethodOption;
   selected: boolean;
   unavailable: boolean;
+  reason: string;
   onSelect: () => void;
 }): JSX.Element {
   const { Text } = useCheckoutComponents();
-  const copy = useCheckoutCopy().screens.method;
   const cursor = unavailable ? "not-allowed" : "pointer";
   return (
     <Box
@@ -63,24 +53,25 @@ function MethodTile({
       type="button"
       role="radio"
       aria-checked={selected}
+      aria-label={unavailable ? `${option.label}, ${reason}` : undefined}
       disabled={unavailable}
       onClick={unavailable ? undefined : onSelect}
       data-testid={`checkout-method-${option.value}`}
       sx={{
-        flex: 1,
-        minWidth: 0,
+        width: "100%",
+        minHeight: 48,
         display: "flex",
         alignItems: "center",
+        justifyContent: "center",
         gap: 1,
-        p: 1.25,
+        px: 1.5,
         cursor,
-        borderRadius: 2,
-        border: "2px solid",
+        borderRadius: 1.5,
+        border: selected ? "2px solid" : "1px solid",
         borderColor: selected ? "primary.main" : "divider",
         bgcolor: selected ? "action.selected" : "background.paper",
-        color: tileColor(unavailable, selected, "text.primary"),
+        color: tileColor(unavailable, selected),
         opacity: unavailable ? 0.6 : 1,
-        textAlign: "left",
         transition: "border-color 0.15s, background-color 0.15s",
         "& *": { cursor },
         "&:hover": { borderColor: unavailable ? "divider" : "primary.main" },
@@ -91,47 +82,16 @@ function MethodTile({
         },
       }}
     >
-      <Box sx={{ display: "flex", color: tileColor(unavailable, selected, "text.secondary") }}>
-        {option.icon}
-      </Box>
-      <Box sx={{ minWidth: 0 }}>
-        <Text variant="body" size="sm" weight="semibold" as="span">
-          {option.label}
-        </Text>
-        <Text variant="caption" size="xs" color="secondary" as="p">
-          {unavailable ? copy.unavailableHere : option.description}
-        </Text>
-      </Box>
+      <Box sx={{ display: "flex" }}>{option.icon}</Box>
+      <Text variant="body" size="sm" weight={selected ? "bold" : "semibold"} as="span">
+        {option.label}
+      </Text>
     </Box>
   );
 }
 
-/**
- * PIX / Card payment-method picker as a compact two-button segmented control.
- * Each option is a real focusable `<button role="radio">` (keyboard + AT
- * operable), selected-state shown by the button fill itself — so there's no radio
- * dot taking space and the two always sit side by side.
- *
- * `offered` derives the options from the chain's declared capabilities
- * (FUT-698): a provider that cannot PIX must not offer PIX — the charge walk
- * would refuse the method after the buyer already chose it. `null` (config
- * still loading / fetch blip) fails OPEN and offers everything: the server
- * still fails the charge closed.
- *
- * `cardUnavailable` DISABLES the card option with a caption saying so
- * (FUT-697): a provider with no browser card path must not take the buyer to a
- * form that fails at the last click — and a tile that silently vanished would
- * leave an unexplained one-option "choice". The caller preselects the sole
- * remaining method, so no extra tap is demanded either.
- */
-function visibleOptions(
-  copy: MethodPickerCopy,
-  offered: PaymentMethod[] | null,
-  pixByStore: boolean,
-): MethodOption[] {
-  return methodOptions(copy, pixByStore).filter(
-    (option) => offered === null || offered.includes(option.value),
-  );
+function visibleOptions(copy: MethodPickerCopy, offered: PaymentMethod[] | null): MethodOption[] {
+  return methodOptions(copy).filter((option) => offered === null || offered.includes(option.value));
 }
 
 export function MethodPicker({
@@ -139,7 +99,6 @@ export function MethodPicker({
   onChange,
   cardUnavailable = false,
   offered = null,
-  pixByStore = false,
 }: {
   /** The chosen method, or `null` before the buyer has picked one. */
   value: PaymentMethod | null;
@@ -148,36 +107,39 @@ export function MethodPicker({
   cardUnavailable?: boolean;
   /** Methods the store's chain can charge, or `null` while unknown (fail open). */
   offered?: PaymentMethod[] | null;
-  /** True ⇒ the chain's first PIX provider is one the STORE confirms by hand. */
-  pixByStore?: boolean;
 }): JSX.Element {
   const { Text } = useCheckoutComponents();
   const copy = useCheckoutCopy().screens.method;
-  const options = visibleOptions(copy, offered, pixByStore);
+  const options = visibleOptions(copy, offered);
   return (
-    <Box>
-      <Text variant="body" size="sm" weight="bold" as="p" style={{ marginBottom: 8 }}>
-        {copy.groupLabel}
-      </Text>
-      <Box
-        role="radiogroup"
-        aria-label={copy.groupLabel}
-        data-testid="checkout-method"
-        sx={{ display: "flex", gap: 1 }}
-      >
-        {options.map((option) => {
-          const unavailable = option.value === "CARD" && cardUnavailable;
-          return (
+    <Box
+      role="radiogroup"
+      aria-label={copy.groupLabel}
+      data-testid="checkout-method"
+      sx={{ display: "grid", gridTemplateColumns: `repeat(${options.length}, minmax(0, 1fr))`, gap: 1 }}
+    >
+      {options.map((option) => {
+        const unavailable = option.value === "CARD" && cardUnavailable;
+        const reasonId = `method-reason-${option.value}`;
+        return (
+          <Box key={option.value} sx={{ display: "flex", flexDirection: "column", gap: 0.5, minWidth: 0 }}>
             <MethodTile
-              key={option.value}
               option={option}
               selected={option.value === value && !unavailable}
               unavailable={unavailable}
+              reason={copy.unavailableHere}
               onSelect={() => onChange(option.value)}
             />
-          );
-        })}
-      </Box>
+            {unavailable ? (
+              <Box aria-hidden data-testid={reasonId} sx={{ textAlign: "center" }}>
+                <Text variant="caption" size="xs" color="secondary" as="p" style={{ margin: 0 }}>
+                  {copy.unavailableHere}
+                </Text>
+              </Box>
+            ) : null}
+          </Box>
+        );
+      })}
     </Box>
   );
 }

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

@@ -0,0 +1,65 @@
+import { Box } from "@mui/material";
+import { useCallback, useMemo, useState, type JSX, type ReactNode } from "react";
+
+import type { PixStage } from "./pix-stage";
+import type { PaymentMethod } from "./types";
+
+/**
+ * The width of the Dados and confirmation steps, and of every non-PIX pane:
+ * the content of the 720px column the checkout always had once its host's
+ * 24px gutters are taken (672). A host that widens the checkout for the PIX
+ * pane (FUT-3367) leaves everything else exactly as wide as before.
+ */
+export const STEP_COLUMN_MAX = 672;
+
+/**
+ * The payment step's form column. The host may give this step more room than
+ * the others (the 2026-10-06 Pix redesign lets the PIX pane put its QR and code
+ * side by side), and only that pane uses it: the card form, wallets, hand-off,
+ * the payer line and the raising and error panels keep the 672px they
+ * always had. `full` lets the PIX pane through.
+ */
+export function StepColumn({ full = false, children }: { full?: boolean; children: ReactNode }): JSX.Element {
+  // `:empty` keeps a self-hiding child (the payer line, the raising state)
+  // from leaving a gap in the step's flex column.
+  return <Box sx={{ width: "100%", mx: "auto", maxWidth: full ? "none" : STEP_COLUMN_MAX, "&:empty": { display: "none" } }}>{children}</Box>;
+}
+
+/**
+ * The payment step's half of the PIX pane's after-copy face (the 2026-10-06
+ * Pix redesign): the flag that hides the method picker, and the way to the
+ * card that replaces it — offered only when the store actually takes a card,
+ * since with the picker hidden it is the buyer's only route there.
+ */
+export function usePaymentPixStage(
+  choice: { offered: PaymentMethod[] | null; cardUnavailable: boolean },
+  onMethodChange: (method: PaymentMethod) => void,
+): PixStage {
+  const [afterCopy, setAfterCopy] = useState(false);
+  const cardOffered = (choice.offered === null || choice.offered.includes("CARD")) && !choice.cardUnavailable;
+  const preferCard = useCallback(() => {
+    setAfterCopy(false);
+    onMethodChange("CARD");
+  }, [onMethodChange]);
+  return useMemo(
+    () => ({ afterCopy, setAfterCopy, preferCard: cardOffered ? preferCard : undefined }),
+    [afterCopy, cardOffered, preferCard],
+  );
+}
+
+/**
+ * Step 2 "Pagamento" — pick PIX or card and pay on the SAME page. Selecting a
+ * method auto-raises its order and reveals its UI (PIX QR / card form) with no
+ * intermediate tap; switching method clears the previous order (controller).
+ *
+ * ## Unless the choice is not ours to ask
+ *
+ * A store that finishes checkout on the provider's own page gets NO picker
+ * here (`methodChosenAtProvider`). Its screen renders a single "Seguir para o
+ * pagamento" instead, and pressing it selects the store's hand-off method —
+ * which is the same event a tile press is, so the auto-raise, the error panel
+ * and the retry below all keep working unchanged. Preselection is suppressed
+ * for the same flow, and deliberately: it exists to spare a buyer a tap that
+ * buys them nothing, but here the tap is the buyer's consent to LEAVE, and
+ * taking it for them would redirect a checkout the moment it rendered.
+ */

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

@@ -0,0 +1,182 @@
+import { Box } from "@mui/material";
+import type { JSX, ReactNode } from "react";
+
+import { useCheckoutCopy } from "./copy-context";
+import { CheckIcon, ContentCopyIcon, CreditCardIcon, QrCodeIcon, ScheduleIcon } from "./icons";
+import { Emphasized, PIX_WIDE, PixQr } from "./pix-parts";
+import type { PixAfterCopyCopy } from "./screens-copy";
+import type { PixCharge } from "./types";
+import { useCheckoutComponents } from "./ui";
+
+/**
+ * The PIX pane after a copy (the 2026-10-06 Pix redesign): the buyer has left
+ * for their bank app and comes back to a screen that says what happens next —
+ * a three-step checklist with the one they are on in bold — instead of the
+ * code they already have.
+ *
+ * Every Pix gets it; whether the BANK or the STORE confirms changes only the
+ * words (`PixAfterCopyCopy`). Wide, a smaller QR stays on the right for a
+ * buyer who would rather scan after all; narrow, "Ver QR code" goes back to
+ * the pane on its QR tab.
+ */
+
+type StepState = "done" | "current" | "pending";
+
+function StepMark({ state, index }: { state: StepState; index: number }): JSX.Element {
+  const size = { width: 26, height: 26, [PIX_WIDE]: { width: 28, height: 28 } };
+  if (state === "done") {
+    return (
+      <Box sx={{ ...size, flex: "none", borderRadius: "50%", bgcolor: "success.main", color: "success.contrastText", display: "flex", alignItems: "center", justifyContent: "center" }}>
+        <CheckIcon sx={{ fontSize: 16 }} />
+      </Box>
+    );
+  }
+  return (
+    <Box
+      sx={{
+        ...size,
+        flex: "none",
+        boxSizing: "border-box",
+        borderRadius: "50%",
+        border: "2px solid",
+        borderColor: state === "current" ? "primary.main" : "divider",
+        color: state === "current" ? "primary.main" : "text.secondary",
+        fontSize: "0.75rem",
+        fontWeight: 700,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      {index}
+    </Box>
+  );
+}
+
+function Step({ state, index, children }: { state: StepState; index: number; children: ReactNode }): JSX.Element {
+  const { Text } = useCheckoutComponents();
+  return (
+    <Box component="li" data-testid={`pix-after-copy-step-${index}`} data-state={state} sx={{ display: "flex", alignItems: "center", gap: 1.5 }}>
+      <StepMark state={state} index={index} />
+      <Text variant="body" size="sm" weight={state === "current" ? "bold" : undefined} color={state === "current" ? undefined : "secondary"} as="span">
+        {children}
+      </Text>
+    </Box>
+  );
+}
+
+/** The checklist. Step 2's wording follows the layout (an app, or internet banking too). */
+function Checklist({ words, deadline }: { words: PixAfterCopyCopy; deadline: string }): JSX.Element {
+  return (
+    <Box
+      component="ol"
+      sx={{ m: 0, p: 2, listStyle: "none", border: "1px solid", borderColor: "divider", borderRadius: 1.5, display: "flex", flexDirection: "column", gap: 1.75, [PIX_WIDE]: { py: 2.25, px: 2.5, gap: 2 } }}
+    >
+      <Step state="done" index={1}>{words.stepCopied}</Step>
+      <Step state="current" index={2}>
+        <Box component="span" sx={{ [PIX_WIDE]: { display: "none" } }}>{words.stepPay(false)}</Box>
+        <Box component="span" sx={{ display: "none", [PIX_WIDE]: { display: "inline" } }}>{words.stepPay(true)}</Box>
+      </Step>
+      <Step state="pending" index={3}>{words.stepConfirm(deadline)}</Step>
+    </Box>
+  );
+}
+
+/** The clock, the title and the sentence: a centred stack narrow, a row wide. */
+function Heading({ words, totalLabel }: { words: PixAfterCopyCopy; totalLabel: string }): JSX.Element {
+  const { Text } = useCheckoutComponents();
+  return (
+    <Box sx={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 1.25, textAlign: "center", [PIX_WIDE]: { flexDirection: "row", gap: 2, textAlign: "left" } }}>
+      <Box sx={{ flex: "none", width: 64, height: 64, borderRadius: "50%", bgcolor: "action.selected", color: "primary.main", display: "flex", alignItems: "center", justifyContent: "center", [PIX_WIDE]: { width: 56, height: 56 } }}>
+        <ScheduleIcon sx={{ fontSize: 30 }} />
+      </Box>
+      <Box sx={{ display: "flex", flexDirection: "column", gap: 0.5 }}>
+        {/* The screen's title outranks the checklist: 22px, 28px wide (the prototype's scale). */}
+        <Box sx={{ "& > *": { fontSize: "1.375rem", lineHeight: 1.25 }, [PIX_WIDE]: { "& > *": { fontSize: "1.75rem" } } }}>
+          <Text variant="heading" size="md" weight="bold" as="h2" style={{ margin: 0 }} data-testid="pix-after-copy-title">
+            {words.title}
+          </Text>
+        </Box>
+        <Text variant="body" size="sm" color="secondary" as="p" style={{ margin: 0 }}>
+          <Box component="span" sx={{ [PIX_WIDE]: { display: "none" } }}>{words.body(totalLabel, false)}</Box>
+          <Box component="span" sx={{ display: "none", [PIX_WIDE]: { display: "inline" } }}>
+            <Emphasized text={words.body(totalLabel, true)} />
+          </Box>
+        </Text>
+      </Box>
+    </Box>
+  );
+}
+
+interface PixAfterCopyProps {
+  pix: PixCharge;
+  words: PixAfterCopyCopy;
+  totalLabel: string;
+  deadline: string;
+  justCopied: boolean;
+  onCopyAgain: () => void;
+  onShowQr: () => void;
+  onPreferCard?: () => void;
+  /** The poll's line ("Verificando…", or the stalled panel that replaces it). */
+  footer: ReactNode;
+}
+
+/** The narrow layout's two secondaries side by side; wide, the card link joins the row. */
+function Actions({ justCopied, onCopyAgain, onShowQr, onPreferCard }: Pick<PixAfterCopyProps, "justCopied" | "onCopyAgain" | "onShowQr" | "onPreferCard">): JSX.Element {
+  const { Button } = useCheckoutComponents();
+  const copy = useCheckoutCopy().screens.pix;
+  return (
+    <Box sx={{ display: "grid", gridTemplateColumns: "repeat(2, minmax(0, 1fr))", gap: 1.25, "& button": { minHeight: 48, height: "100%" }, [PIX_WIDE]: { display: "flex", flexWrap: "wrap", alignItems: "center", gap: 1.5, "& button": { height: "auto" } } }}>
+      {/* Narrow, a grid cell; wide, its own width beside the link (the prototype's row). */}
+      <Box sx={{ minWidth: 0, [PIX_WIDE]: { flex: "none", "& > *": { width: "auto" } } }}>
+        <Button variant="outline" color="neutral" size="md" fullWidth icon={<ContentCopyIcon fontSize="small" />} onClick={onCopyAgain} dataTestId="pix-copy-again">
+          {justCopied ? copy.copiedAction : copy.copyAgainAction}
+        </Button>
+      </Box>
+      <Box sx={{ display: "contents", [PIX_WIDE]: { display: "none" } }}>
+        <Button variant="outline" color="neutral" size="md" fullWidth icon={<QrCodeIcon fontSize="small" />} onClick={onShowQr} dataTestId="pix-show-qr">
+          {copy.showQrAction}
+        </Button>
+      </Box>
+      {onPreferCard ? (
+        <Box sx={{ display: "none", [PIX_WIDE]: { display: "block" } }}>
+          <Button variant="text" color="primary" size="md" icon={<CreditCardIcon fontSize="small" />} onClick={onPreferCard} dataTestId="pix-prefer-card-wide">
+            {copy.preferCardAction}
+          </Button>
+        </Box>
+      ) : null}
+    </Box>
+  );
+}
+
+export function PixAfterCopy(props: PixAfterCopyProps): JSX.Element {
+  const { Button, Text } = useCheckoutComponents();
+  const copy = useCheckoutCopy().screens.pix;
+  const { pix, words, totalLabel, deadline, onPreferCard, footer } = props;
+  return (
+    <Box data-testid="pix-after-copy" sx={{ display: "flex", flexWrap: "wrap", gap: 4, alignItems: "flex-start" }}>
+      <Box sx={{ flex: "999 1 420px", minWidth: 0, display: "flex", flexDirection: "column", gap: 2.5 }}>
+        <Heading words={words} totalLabel={totalLabel} />
+        <Checklist words={words} deadline={deadline} />
+        <Actions {...props} />
+        {footer}
+        {onPreferCard ? (
+          <Box sx={{ display: "flex", justifyContent: "center", [PIX_WIDE]: { display: "none" } }}>
+            <Button variant="text" color="primary" size="md" icon={<CreditCardIcon fontSize="small" />} onClick={onPreferCard} dataTestId="pix-prefer-card">
+              {copy.preferCardAction}
+            </Button>
+          </Box>
+        ) : null}
+      </Box>
+      <Box sx={{ display: "none", [PIX_WIDE]: { display: "flex" }, flex: "1 1 240px", minWidth: 0, flexDirection: "column", alignItems: "center", gap: 1.5, p: 2.5, borderRadius: 1.75, border: "1px solid", borderColor: "divider", bgcolor: "action.hover" }}>
+        <Text variant="body" size="xs" weight="bold" color="secondary" as="p" style={{ margin: 0, textTransform: "uppercase", letterSpacing: "0.04em" }}>
+          {copy.notPaidYet}
+        </Text>
+        <PixQr payload={pix.copyPaste} size={168} alt={copy.qrAlt} />
+        <Text variant="body" size="xs" color="secondary" as="p" style={{ margin: 0, textAlign: "center" }}>
+          {copy.scanFromPhone}
+        </Text>
+      </Box>
+    </Box>
+  );
+}