@12-apps/payments-frontend 3.33.0 → 3.34.0

package/src/components/checkout/pix-pane.tsx

@@ -0,0 +1,225 @@
+import { Box } from "@mui/material";
+import { useId, type JSX, type KeyboardEvent, type ReactNode } from "react";
+
+import { useCheckoutCopy } from "./copy-context";
+import { ContentCopyIcon } from "./icons";
+import { Emphasized, PIX_WIDE, PixQr } from "./pix-parts";
+import type { PixCharge } from "./types";
+import { useCheckoutComponents } from "./ui";
+
+/**
+ * The PIX pane before a copy (the 2026-10-06 Pix redesign).
+ *
+ * Narrow — a phone — it is two tabs, "Copia e cola" first: the buyer pays on
+ * the phone they are holding and cannot scan a QR drawn on that same screen,
+ * so the code and its full-width button come before anything else. Wide — a
+ * desktop — the same two panels stand side by side with "ou" between them:
+ * the QR, for the phone in the buyer's hand, and the code, for their internet
+ * banking.
+ *
+ * Both panels are always mounted and the switch is CSS (`PIX_WIDE`), so the
+ * layout needs no measurement: the first paint is already right, and the QR is
+ * in the document whichever tab is showing.
+ */
+
+export type PixTab = "copy" | "qr";
+
+/** A narrow-only element: shown under the container query's threshold. */
+const NARROW_ONLY = { [PIX_WIDE]: { display: "none" } } as const;
+
+/** A wide-only element. */
+function wideOnly(display: string) {
+  return { display: "none", [PIX_WIDE]: { display } } as const;
+}
+
+/** A tab panel: shown when its tab is picked, and always in the wide layout. */
+function panelSx(shown: boolean) {
+  return {
+    display: shown ? "flex" : "none",
+    flexDirection: "column",
+    gap: 1.75,
+    minWidth: 0,
+    [PIX_WIDE]: { display: "flex" },
+  } as const;
+}
+
+/** The small capitals over each wide column. Uppercase by CSS only. */
+function ColumnHeading({ children, center }: { children: ReactNode; center?: boolean }): JSX.Element {
+  const { Text } = useCheckoutComponents();
+  return (
+    <Box sx={{ ...wideOnly("block"), textAlign: center ? "center" : "left" }}>
+      <Text variant="body" size="xs" weight="bold" color="secondary" as="p" style={{ textTransform: "uppercase", letterSpacing: "0.04em", margin: 0 }}>
+        {children}
+      </Text>
+    </Box>
+  );
+}
+
+const TAB_ORDER: readonly PixTab[] = ["copy", "qr"];
+
+/** The ARIA tabs pattern's keys: arrows move and select, Home and End jump. */
+function nextTab(key: string, tab: PixTab): PixTab | null {
+  const at = TAB_ORDER.indexOf(tab);
+  if (key === "ArrowRight") return TAB_ORDER[(at + 1) % TAB_ORDER.length] ?? null;
+  if (key === "ArrowLeft") return TAB_ORDER[(at + TAB_ORDER.length - 1) % TAB_ORDER.length] ?? null;
+  if (key === "Home") return TAB_ORDER[0] ?? null;
+  if (key === "End") return TAB_ORDER[TAB_ORDER.length - 1] ?? null;
+  return null;
+}
+
+/** DOM ids for the tabs and panels, unique per pane (two panes on one page must not collide). */
+function paneIds(base: string, id: PixTab): { tab: string; panel: string } {
+  return { tab: `${base}-tab-${id}`, panel: `${base}-panel-${id}` };
+}
+
+function PixTabs({ tab, onTab, idBase }: { tab: PixTab; onTab: (tab: PixTab) => void; idBase: string }): JSX.Element {
+  const copy = useCheckoutCopy().screens.pix;
+  const tabs: { id: PixTab; label: string }[] = [
+    { id: "copy", label: copy.copyPasteTab },
+    { id: "qr", label: copy.qrTab },
+  ];
+  const onKeyDown = (event: KeyboardEvent<HTMLElement>): void => {
+    const next = nextTab(event.key, tab);
+    if (!next) return;
+    event.preventDefault();
+    onTab(next);
+    document.getElementById(paneIds(idBase, next).tab)?.focus();
+  };
+  return (
+    <Box
+      role="tablist"
+      aria-label={copy.tabsLabel}
+      onKeyDown={onKeyDown}
+      sx={{ display: "grid", gridTemplateColumns: "repeat(2, minmax(0, 1fr))", borderBottom: "1px solid", borderColor: "divider", ...NARROW_ONLY }}
+    >
+      {tabs.map((item) => {
+        const selected = item.id === tab;
+        return (
+          <Box
+            key={item.id}
+            component="button"
+            type="button"
+            role="tab"
+            id={paneIds(idBase, item.id).tab}
+            aria-selected={selected}
+            aria-controls={paneIds(idBase, item.id).panel}
+            tabIndex={selected ? 0 : -1}
+            data-testid={`pix-tab-${item.id}`}
+            onClick={() => onTab(item.id)}
+            sx={{
+              minHeight: 44,
+              border: 0,
+              borderBottom: "3px solid",
+              borderColor: selected ? "primary.main" : "transparent",
+              bgcolor: "transparent",
+              font: "inherit",
+              fontSize: "0.875rem",
+              fontWeight: selected ? 700 : 600,
+              color: selected ? "text.primary" : "text.secondary",
+              cursor: "pointer",
+              "&:focus-visible": { outline: "2px solid", outlineColor: "primary.main", outlineOffset: -2 },
+            }}
+          >
+            {item.label}
+          </Box>
+        );
+      })}
+    </Box>
+  );
+}
+
+function QrPanel({ pix, shown, idBase }: { pix: PixCharge; shown: boolean; idBase: string }): JSX.Element {
+  const { Text } = useCheckoutComponents();
+  const copy = useCheckoutCopy().screens.pix;
+  return (
+    <Box
+      id={paneIds(idBase, "qr").panel}
+      role="tabpanel"
+      aria-labelledby={paneIds(idBase, "qr").tab}
+      sx={{
+        ...panelSx(shown),
+        alignItems: "center",
+        textAlign: "center",
+        [PIX_WIDE]: { display: "flex", p: 3, borderRadius: 1.75, border: "1px solid", borderColor: "divider", bgcolor: "action.hover" },
+      }}
+    >
+      <ColumnHeading center>{copy.qrHeading}</ColumnHeading>
+      <Box sx={{ "& svg": { width: 200, height: 200 }, [PIX_WIDE]: { "& svg": { width: 232, height: 232 } } }}>
+        <PixQr payload={pix.copyPaste} size={232} alt={copy.qrAlt} testId="pix-qr" />
+      </Box>
+      <Text variant="body" size="sm" color="secondary" as="p" style={{ margin: 0, maxWidth: 280 }}>
+        <Box component="span" sx={NARROW_ONLY}>{copy.qrTabCaption}</Box>
+        <Box component="span" sx={wideOnly("inline")}>
+          <Emphasized text={copy.qrInstructions} />
+        </Box>
+      </Text>
+    </Box>
+  );
+}
+
+function CopyPanel({ pix, shown, onCopy, idBase }: { pix: PixCharge; shown: boolean; onCopy: () => void; idBase: string }): JSX.Element {
+  const { Button, Text } = useCheckoutComponents();
+  const copy = useCheckoutCopy().screens.pix;
+  return (
+    <Box id={paneIds(idBase, "copy").panel} role="tabpanel" aria-labelledby={paneIds(idBase, "copy").tab} sx={{ ...panelSx(shown), [PIX_WIDE]: { display: "flex", justifyContent: "center" } }}>
+      <ColumnHeading>{copy.copyPasteHeading}</ColumnHeading>
+      <Box
+        sx={{ px: 2, py: 1.5, border: "1px solid", borderColor: "divider", borderRadius: 1.5, bgcolor: "action.hover" }}
+      >
+        <Text variant="code" size="xs" as="p" data-testid="pix-code" style={{ margin: 0, wordBreak: "break-all", lineHeight: 1.55 }}>
+          {pix.copyPaste}
+        </Text>
+      </Box>
+      {/* The one action on the pane: the prototype's 56px bar (52 wide), whatever the host's lg is. */}
+      <Box sx={{ "& > *": { minHeight: 56 }, [PIX_WIDE]: { "& > *": { minHeight: 52 } } }}>
+        <Button variant="solid" color="primary" size="lg" fullWidth icon={<ContentCopyIcon fontSize="small" />} onClick={onCopy} dataTestId="pix-copy">
+          {copy.copyAction}
+        </Button>
+      </Box>
+      <Text variant="body" size="sm" color="secondary" as="p" style={{ margin: 0 }}>
+        <Box component="span" sx={{ display: "block", textAlign: "center", ...NARROW_ONLY }}>
+          <Emphasized text={copy.copyPasteHint} />
+        </Box>
+        <Box component="span" sx={wideOnly("block")}>
+          <Emphasized text={copy.internetBankingHint} />
+        </Box>
+      </Text>
+    </Box>
+  );
+}
+
+/** The word between the wide layout's two columns, on a hairline. */
+function OrDivider(): JSX.Element {
+  const { Text } = useCheckoutComponents();
+  const copy = useCheckoutCopy().screens.pix;
+  const line = { width: "1px", height: 56, bgcolor: "divider" };
+  return (
+    <Box aria-hidden sx={{ ...wideOnly("flex"), flexDirection: "column", alignItems: "center", alignSelf: "center", gap: 1 }}>
+      <Box sx={line} />
+      <Text variant="body" size="xs" weight="semibold" color="secondary" as="span">
+        {copy.or}
+      </Text>
+      <Box sx={line} />
+    </Box>
+  );
+}
+
+export function PixPane({ pix, tab, onTab, onCopy }: { pix: PixCharge; tab: PixTab; onTab: (tab: PixTab) => void; onCopy: () => void }): JSX.Element {
+  const idBase = useId();
+  return (
+    <>
+      <PixTabs tab={tab} onTab={onTab} idBase={idBase} />
+      <Box
+        sx={{
+          display: "grid",
+          gap: 2,
+          [PIX_WIDE]: { gridTemplateColumns: "minmax(0, 1fr) auto minmax(0, 1fr)", gap: 4, alignItems: "stretch" },
+        }}
+      >
+        <QrPanel pix={pix} shown={tab === "qr"} idBase={idBase} />
+        <OrDivider />
+        <CopyPanel pix={pix} shown={tab === "copy"} onCopy={onCopy} idBase={idBase} />
+      </Box>
+    </>
+  );
+}

package/src/components/checkout/pix-parts.tsx

@@ -0,0 +1,79 @@
+import { Box } from "@mui/material";
+import { Fragment, useCallback, useEffect, useRef, useState, type JSX } from "react";
+import QRCode from "react-qr-code";
+
+/**
+ * The pieces the PIX pane and its after-copy face share (the 2026-10-06 Pix
+ * redesign): the container-query switch, the QR, bold spans in a sentence, and
+ * the clipboard.
+ */
+
+/**
+ * The pane switches from tabs to two columns by its OWN width, never the
+ * window's: the same checkout is mounted in a 720px column, a 1040px one and a
+ * phone, and only the room it was given says whether two columns fit.
+ */
+export const PIX_WIDE = "@container pixpane (min-width: 760px)";
+
+/** The container the {@link PIX_WIDE} query reads. */
+export const PIX_CONTAINER = { containerType: "inline-size", containerName: "pixpane" } as const;
+
+/**
+ * A sentence with `**…**` spans drawn bold. The copy packs mark the words the
+ * buyer looks for in their bank app ("Pix Copia e Cola"), so the emphasis is
+ * chosen with the words, by whoever writes them.
+ */
+export function Emphasized({ text }: { text: string }): JSX.Element {
+  const parts = text.split("**");
+  return (
+    <>
+      {parts.map((part, index) =>
+        index % 2 === 1 ? <b key={index}>{part}</b> : <Fragment key={index}>{part}</Fragment>,
+      )}
+    </>
+  );
+}
+
+/** The QR, in its bordered box, at `size` px. */
+export function PixQr({ payload, size, alt, testId }: { payload: string; size: number; alt: string; testId?: string }): JSX.Element {
+  return (
+    <Box
+      data-testid={testId}
+      role="img"
+      aria-label={alt}
+      sx={{ bgcolor: "background.paper", p: 1.75, borderRadius: 1.5, border: "1px solid", borderColor: "divider", lineHeight: 0 }}
+    >
+      <QRCode value={payload} size={size} />
+    </Box>
+  );
+}
+
+/**
+ * Copy the payload, and say so for two seconds. `copy` resolves `true` only
+ * when the clipboard took it: a failed write must not move the buyer on to a
+ * screen that says "Código Pix copiado" (the code stays visible to select by
+ * hand instead).
+ */
+export function useClipboardCopy(text: string): { copy: () => Promise<boolean>; justCopied: boolean } {
+  const [justCopied, setJustCopied] = useState(false);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  useEffect(
+    () => () => {
+      if (timer.current) clearTimeout(timer.current);
+    },
+    [],
+  );
+  const copy = useCallback(async (): Promise<boolean> => {
+    try {
+      if (!navigator.clipboard) return false;
+      await navigator.clipboard.writeText(text);
+    } catch {
+      return false;
+    }
+    setJustCopied(true);
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = setTimeout(() => setJustCopied(false), 2000);
+    return true;
+  }, [text]);
+  return { copy, justCopied };
+}

package/src/components/checkout/pix-stage.tsx

@@ -0,0 +1,34 @@
+import { createContext, useContext, useState, type JSX, type ReactNode } from "react";
+
+/**
+ * Which face the PIX pane is showing: the code to pay, or the wait that
+ * follows a copy (the 2026-10-06 Pix redesign).
+ *
+ * The flag lives ABOVE the pane, in the payment step, because the after-copy
+ * face hides the method picker — and the picker is the step's, not the
+ * pane's. `preferCard` is the step's way to the card, offered only when the
+ * store takes one: with the picker hidden it is the buyer's only route there,
+ * so it must never point at a method the store cannot charge.
+ */
+export interface PixStage {
+  afterCopy: boolean;
+  setAfterCopy: (afterCopy: boolean) => void;
+  preferCard?: () => void;
+}
+
+const PixStageContext = createContext<PixStage | null>(null);
+
+export function PixStageProvider({ stage, children }: { stage: PixStage; children: ReactNode }): JSX.Element {
+  return <PixStageContext.Provider value={stage}>{children}</PixStageContext.Provider>;
+}
+
+/**
+ * The stage the pane renders against. A pane mounted outside a payment step
+ * (a host composing `PixView` on its own, a unit test) keeps its own flag and
+ * offers no way to the card.
+ */
+export function usePixStage(): PixStage {
+  const shared = useContext(PixStageContext);
+  const [afterCopy, setAfterCopy] = useState(false);
+  return shared ?? { afterCopy, setAfterCopy };
+}