@12-apps/payments-frontend 3.34.0 → 3.34.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/payments-frontend",
-  "version": "3.34.0",
+  "version": "3.34.2",
   "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/pix-after-copy.tsx

@@ -22,6 +22,9 @@ import { useCheckoutComponents } from "./ui";
 
 type StepState = "done" | "current" | "pending";
 
+/** The way to the card is a link: underlined, so it does not lean on colour alone. */
+const LINK_SX = { "& button": { textDecoration: "underline", textUnderlineOffset: "3px" }, "& button, & button *": { fontWeight: 600 } } as const;
+
 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") {
@@ -92,7 +95,7 @@ function Heading({ words, totalLabel }: { words: PixAfterCopyCopy; totalLabel: s
       </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" } } }}>
+        <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>
@@ -126,7 +129,7 @@ function Actions({ justCopied, onCopyAgain, onShowQr, onPreferCard }: Pick<PixAf
   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" } } }}>
+    <Box sx={{ display: "grid", gridTemplateColumns: "repeat(2, minmax(0, 1fr))", gap: 1.25, "& button": { minHeight: 48, height: "100%" }, "& button, & button *": { fontWeight: 700 }, [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">
@@ -139,7 +142,7 @@ function Actions({ justCopied, onCopyAgain, onShowQr, onPreferCard }: Pick<PixAf
         </Button>
       </Box>
       {onPreferCard ? (
-        <Box sx={{ display: "none", [PIX_WIDE]: { display: "block" } }}>
+        <Box sx={{ ...LINK_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>
@@ -161,7 +164,7 @@ export function PixAfterCopy(props: PixAfterCopyProps): JSX.Element {
         <Actions {...props} />
         {footer}
         {onPreferCard ? (
-          <Box sx={{ display: "flex", justifyContent: "center", [PIX_WIDE]: { display: "none" } }}>
+          <Box sx={{ ...LINK_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>

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

@@ -163,15 +163,28 @@ function CopyPanel({ pix, shown, onCopy, idBase }: { pix: PixCharge; shown: bool
   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>
+      {/*
+        The box IS the code's frame, so whatever the host draws for inline code
+        (a tinted chip, its own border and padding) is undone inside it:
+        otherwise a wrapped code reads as a box inside a box.
+      */}
       <Box
-        sx={{ px: 2, py: 1.5, border: "1px solid", borderColor: "divider", borderRadius: 1.5, bgcolor: "action.hover" }}
+        sx={{
+          px: 2,
+          py: 1.5,
+          border: "1px solid",
+          borderColor: "divider",
+          borderRadius: 1.5,
+          bgcolor: "action.hover",
+          "&& > *": { bgcolor: "transparent", border: 0, borderRadius: 0, p: 0 },
+        }}
       >
         <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 } } }}>
+      <Box sx={{ "& > *": { minHeight: 56 }, "& > *, & > * *": { fontWeight: 700 }, [PIX_WIDE]: { "& > *": { minHeight: 52 } } }}>
         <Button variant="solid" color="primary" size="lg" fullWidth icon={<ContentCopyIcon fontSize="small" />} onClick={onCopy} dataTestId="pix-copy">
           {copy.copyAction}
         </Button>

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

@@ -251,9 +251,12 @@ function PixBody({ order, pix, poll }: { order: CheckoutOrder; pix: PixCharge; p
   }
   return (
     <>
-      <Text variant="heading" size="md" weight="bold" as="h2" style={{ margin: 0 }}>
-        {copy.heading}
-      </Text>
+      {/* The pane's title, at the prototype's scale: 20px, 26px wide. */}
+      <Box sx={{ "&& > *": { fontSize: "1.25rem", lineHeight: 1.25 }, [PIX_WIDE]: { "&& > *": { fontSize: "1.625rem" } } }}>
+        <Text variant="heading" size="md" weight="bold" as="h2" style={{ margin: 0 }}>
+          {copy.heading}
+        </Text>
+      </Box>
       <PixPane
         pix={pix}
         tab={tab}
@@ -293,8 +296,22 @@ export function PixView({
     );
   }
   return (
-    <Box data-testid="pix-view" sx={{ ...PIX_CONTAINER, display: "flex", flexDirection: "column", gap: 2 }}>
-      <PixBody order={order} pix={pix} poll={poll} />
+    <Box data-testid="pix-view" sx={PIX_CONTAINER}>
+      {/*
+        Wide, the pane is one white card on the page (the prototype's desktop
+        frame): heading, the two columns and the footer read as one unit. The
+        card is a child because a container query cannot style its container.
+      */}
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          gap: 2,
+          [PIX_WIDE]: { gap: 2.5, p: 3.5, bgcolor: "background.paper", border: "1px solid", borderColor: "divider", borderRadius: 2 },
+        }}
+      >
+        <PixBody order={order} pix={pix} poll={poll} />
+      </Box>
     </Box>
   );
 }

package/src/components/checkout/poll-hint.ts

@@ -19,8 +19,9 @@ import { claimRearm, REARM_QUIET_MS } from "./poll-rearm";
  *
  * The mark is cleared by `restart`, by a `poke` that supersedes the marked
  * ask, by sending its follow-up and by a terminal answer. The deadline does
- * NOT clear it: a marked ask answering after the deadline is caught by
- * {@link owedAfterAnswer} and neither asks nor schedules.
+ * NOT clear it: a marked ask answering after the deadline is stopped by the
+ * loop's `carriesOn` (FUT-3222) before the mark is read, and neither asks nor
+ * schedules; the next `restart` clears the mark.
  *
  * Structural state, as in `poll-rearm.ts`: the loop's run satisfies it.
  */
@@ -47,12 +48,12 @@ export function claimHint(run: HintState): boolean {
 }
 
 /**
- * After a non-terminal answer: `"ask"` when a mark owes one more ask now,
- * `"ended"` when the wait stopped while that ask was out, `"none"` when nothing
- * is owed and the loop schedules as usual. Clears the mark.
+ * After a non-terminal answer to a wait that is still running: whether a mark
+ * owes one more ask now, rather than the usual schedule. Clears the mark. A
+ * wait that stopped while the ask was out never gets here (`carriesOn`).
  */
-export function owedAfterAnswer(run: Pick<HintState, "hinted" | "stopped">): "ask" | "ended" | "none" {
-  if (!run.hinted) return "none";
+export function owedAfterAnswer(run: Pick<HintState, "hinted">): boolean {
+  if (!run.hinted) return false;
   run.hinted = false;
-  return run.stopped ? "ended" : "ask";
+  return true;
 }

package/src/components/checkout/poll-loop.ts

@@ -280,11 +280,21 @@ function askNow(run: PollRun, tick: () => Promise<void>): void {
   void tick();
 }
 
+/**
+ * Whether the ask that just answered may book what comes next. Not when a newer
+ * ask superseded it, and not when the wall clock ended the wait while it was out
+ * (FUT-3222): live, `outOfTime` never ends a wait, so an ask the deadline
+ * overtook kept booking more behind the timed-out panel. Read AFTER `absorb`, so
+ * a PAID landing just past the deadline is still written.
+ */
+function carriesOn(run: PollRun, mine: number): boolean {
+  return run.attempt === mine && !run.stopped;
+}
+
 /** After a non-terminal answer: the ask a hint owes, or the usual schedule. */
 function continueAfter(run: PollRun, tick: () => Promise<void>, schedule: () => void): void {
-  const owed = owedAfterAnswer(run);
-  if (owed === "ask") askNow(run, tick);
-  else if (owed === "none") schedule();
+  if (owedAfterAnswer(run)) askNow(run, tick);
+  else schedule();
 }
 
 /** The handle the hook holds on one running wait. */
@@ -332,7 +342,7 @@ export function createPollLoop(
       clearDeadline(run);
       return;
     }
-    if (run.attempt !== mine) return;
+    if (!carriesOn(run, mine)) return;
     continueAfter(run, tick, () => scheduleNext(run, options, sink, () => void tick()));
   };