@12-apps/payments-frontend 3.47.0 → 3.47.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/payments-frontend",
-  "version": "3.47.0",
+  "version": "3.47.1",
   "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/list/list-pix.tsx

@@ -300,6 +300,24 @@ function noPick(): void {
   // No bank flow: nothing to remember.
 }
 
+/**
+ * The way to the bank app on the after-copy face, or `undefined` off a phone.
+ * With a bank chosen, one line says what to do there, in place of the
+ * checklist (FUT-3612) — unless the STORE confirms this Pix: its checklist's
+ * "A loja confirma o pagamento — até 14:32" is then the only place that says
+ * who confirms and by when, so it stays — under the six banks too. No line in
+ * the host's copy: the checklist stays too. Otherwise the six banks replace it.
+ */
+function bankFace(flow: BankFlow | null, pix: PixCharge, stale: boolean): { node: JSX.Element; replacesChecklist: boolean } | undefined {
+  if (!flow?.os) return undefined;
+  const storeConfirms = pix.confirmation === "MANUAL";
+  const oneLine = Boolean(flow.bank.copy.appHint) && !storeConfirms;
+  return {
+    node: <PixBanks bank={flow.bank} state={flow.state} stale={stale} hint={oneLine} />,
+    replacesChecklist: oneLine || (flow.state.chosen === null && !storeConfirms),
+  };
+}
+
 /** Both faces of the list's Pix, and the bar under them. */
 export function ListPixFace(props: ListPixFaceProps & { mode: PaymentListMode }): JSX.Element {
   const { Text } = useCheckoutComponents();
@@ -311,7 +329,7 @@ export function ListPixFace(props: ListPixFaceProps & { mode: PaymentListMode })
   // On a phone the bank flow takes the copy: "Copiar e abrir o Nubank", the
   // toast, the app. Without it — or on a computer — the copy is today's.
   const onCopy = flow ? copies.copy : props.onCopy;
-  const banks = flow?.os ? { node: <PixBanks bank={flow.bank} state={flow.state} stale={stale} />, replacesChecklist: true } : undefined;
+  const banks = bankFace(flow, pix, stale);
   return (
     <Box data-testid="list-pix" sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}>
       <Text variant="body" size="md" weight="bold" as="p" style={{ margin: 0 }} data-testid="list-pix-title">

package/src/components/checkout/list/pix-banks.tsx

@@ -182,13 +182,16 @@ function AppHint({ text }: { text: string }): JSX.Element {
   );
 }
 
-/** The grid, or the bank being opened and the line that says what to do there. */
-export function PixBanks({ bank, state, stale }: { bank: CheckoutPixBank; state: PixBankState; stale: boolean }): JSX.Element {
+/**
+ * The grid, or the bank being opened — with, when `hint`, the line that says
+ * what to do there (the face then drops its checklist; see `ListPixFace`).
+ */
+export function PixBanks({ bank, state, stale, hint }: { bank: CheckoutPixBank; state: PixBankState; stale: boolean; hint: boolean }): JSX.Element {
   if (!state.chosen) return <Grid bank={bank} state={state} stale={stale} />;
   return (
     <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
       <Opening bank={bank} state={state} chosen={state.chosen} />
-      {bank.copy.appHint ? <AppHint text={bank.copy.appHint} /> : null}
+      {hint && bank.copy.appHint ? <AppHint text={bank.copy.appHint} /> : null}
     </Box>
   );
 }

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

@@ -126,12 +126,28 @@ interface PixAfterCopyProps {
   /**
    * The way to the bank app, on a phone (FUT-3612): drawn where the heading
    * was — the toast already said the code was copied and the bar says what it
-   * waits for — and, while it is the six banks, in place of the checklist.
+   * waits for — and, when `replacesChecklist`, in place of the checklist. The
+   * column then sits as tight as the prototype's (8px).
    */
   banks?: { node: ReactNode; replacesChecklist: boolean };
 }
 
-/** The narrow layout's two secondaries side by side; wide, the card link joins the row. */
+/**
+ * The pair's leading icons. On a phone's card (the pair under 360px) they go,
+ * as in the prototype: beside the icon, "Copiar de novo" took two lines in its
+ * 159px column ("novo" alone). A computer's column is wider and keeps them.
+ * `button` in the selector outranks the library Button's own icon rule, which
+ * otherwise wins or loses on style insertion order.
+ */
+const ICON_SLOT = "& button .MuiButton-startIcon, & button .MuiButton-start";
+/** The pair's own width, never the pane's. */
+const ACTIONS_NARROW = "@container pixactions (max-width: 359.95px)";
+
+/**
+ * The narrow layout's two secondaries side by side — 140px columns, so the pair
+ * fits a 390px phone's card (two of 180px did not, and stacked) and stacks only
+ * at 320 — 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;
@@ -139,7 +155,7 @@ function Actions({ justCopied, onCopyAgain, onShowQr, onPreferCard }: Pick<PixAf
   // (FUT-3535): copying it again would only hand the buyer the wrong amount.
   const stale = usePaymentStale();
   return (
-    <Box sx={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(180px, 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" } } }}>
+    <Box sx={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(140px, 1fr))", gap: 1.25, "& button": { minHeight: 48, height: "100%" }, "& button, & button *": { fontWeight: 700 }, containerType: "inline-size", containerName: "pixactions", [ACTIONS_NARROW]: { [ICON_SLOT]: { display: "none" } }, [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} disabled={stale} dataTestId="pix-copy-again">
@@ -169,7 +185,7 @@ export function PixAfterCopy(props: PixAfterCopyProps): JSX.Element {
   const stale = usePaymentStale();
   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 }}>
+      <Box sx={{ flex: "999 1 420px", minWidth: 0, display: "flex", flexDirection: "column", gap: props.banks?.replacesChecklist ? 1 : 2.5 }}>
         {props.banks ? props.banks.node : <Heading words={words} totalLabel={totalLabel} />}
         {props.banks?.replacesChecklist ? null : <Checklist words={words} deadline={deadline} />}
         <Actions {...props} />