@12-apps/payments-frontend 3.36.0 → 3.37.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/payments-frontend",
-  "version": "3.36.0",
+  "version": "3.37.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/cart-changed.tsx

@@ -199,6 +199,23 @@ export function useRefreshOnCartChanged(errorCode: string | null): void {
   }, [errorCode]);
 }
 
+/** Where a refresh stands, for a step that may not have one (a settlement). */
+function refreshStatus(refresh: OrderRefresh | undefined): { pending: boolean; error: string | null } {
+  return { pending: refresh?.pending ?? false, error: refresh?.error ?? null };
+}
+
+const PaymentStaleContext = createContext(false);
+
+/**
+ * Whether the payment on screen was prepared for a cart that has since changed
+ * (FUT-3535). A PIX pane reads it to veil its QR and code and to stop the copy
+ * controls: the amount is IN the code, so a buyer who pays it now pays the old
+ * order. False outside a {@link CartChangedBoundary}.
+ */
+export function usePaymentStale(): boolean {
+  return useContext(PaymentStaleContext);
+}
+
 /**
  * The payment pane, with the step's warning above it when the cart moved, and
  * the refresh handed down to the card form. Nothing changes on screen while the
@@ -222,15 +239,19 @@ export function CartChangedBoundary({
 }): JSX.Element {
   const changed = useBasketChanged(order, basket) && !creating;
   const run = paymentRefresh(order, onGenerate, refresh?.run);
-  const pending = refresh?.pending ?? false;
-  const error = refresh?.error ?? null;
+  const { pending, error } = refreshStatus(refresh);
   // ONE tree shape whether or not the warning shows: wrapping the pane only
   // while it does would remount the card form the moment the refresh lands,
   // dropping what the buyer typed and the refusal that explains the new total.
   return (
     <Box sx={{ display: "flex", flexDirection: "column", gap: 3 }}>
       {(changed || error) && run ? <CartChangedNotice onRefresh={run} pending={pending} error={error} /> : null}
-      <PaymentRefreshProvider refresh={run}>{children}</PaymentRefreshProvider>
+      {/* Stale while the warning stands, so the veil goes with it the moment the
+          new order lands. A PIX refresh mints a new code, which takes the old
+          one off the screen first, so a failed one leaves nothing to copy. */}
+      <PaymentStaleContext.Provider value={changed && run !== null}>
+        <PaymentRefreshProvider refresh={run}>{children}</PaymentRefreshProvider>
+      </PaymentStaleContext.Provider>
     </Box>
   );
 }

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

@@ -1,9 +1,10 @@
 import { Box } from "@mui/material";
 import type { JSX, ReactNode } from "react";
 
+import { usePaymentStale } from "./cart-changed";
 import { useCheckoutCopy } from "./copy-context";
 import { CheckIcon, ContentCopyIcon, CreditCardIcon, QrCodeIcon, ScheduleIcon } from "./icons";
-import { Emphasized, PIX_WIDE, PixQr } from "./pix-parts";
+import { Emphasized, PIX_WIDE, PixQr, StaleVeil } from "./pix-parts";
 import type { PixAfterCopyCopy } from "./screens-copy";
 import type { PixCharge } from "./types";
 import { useCheckoutComponents } from "./ui";
@@ -128,11 +129,14 @@ interface PixAfterCopyProps {
 function Actions({ justCopied, onCopyAgain, onShowQr, onPreferCard }: Pick<PixAfterCopyProps, "justCopied" | "onCopyAgain" | "onShowQr" | "onPreferCard">): JSX.Element {
   const { Button } = useCheckoutComponents();
   const copy = useCheckoutCopy().screens.pix;
+  // The code already copied is the OLD order's once the cart changed
+  // (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" } } }}>
       {/* 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">
+        <Button variant="outline" color="neutral" size="md" fullWidth icon={<ContentCopyIcon fontSize="small" />} onClick={onCopyAgain} disabled={stale} dataTestId="pix-copy-again">
           {justCopied ? copy.copiedAction : copy.copyAgainAction}
         </Button>
       </Box>
@@ -156,6 +160,7 @@ export function PixAfterCopy(props: PixAfterCopyProps): JSX.Element {
   const { Button, Text } = useCheckoutComponents();
   const copy = useCheckoutCopy().screens.pix;
   const { pix, words, totalLabel, deadline, onPreferCard, footer } = props;
+  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 }}>
@@ -175,7 +180,9 @@ export function PixAfterCopy(props: PixAfterCopyProps): JSX.Element {
         <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} />
+        <StaleVeil stale={stale}>
+          <PixQr payload={pix.copyPaste} size={168} alt={copy.qrAlt} />
+        </StaleVeil>
         <Text variant="body" size="xs" color="secondary" as="p" style={{ margin: 0, textAlign: "center" }}>
           {copy.scanFromPhone}
         </Text>

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

@@ -1,10 +1,11 @@
 import { Box } from "@mui/material";
 import type { JSX, ReactNode } from "react";
 
+import { usePaymentStale } from "./cart-changed";
 import { useCheckoutCopy } from "./copy-context";
 import { ContentCopyIcon } from "./icons";
 import { StickyPayBar, useCheckoutLayout } from "./payment-step-layout";
-import { Emphasized, PIX_WIDE, PixQr } from "./pix-parts";
+import { Emphasized, PIX_WIDE, PixQr, StaleVeil } from "./pix-parts";
 import type { PixCharge } from "./types";
 import { useCheckoutComponents } from "./ui";
 
@@ -64,6 +65,7 @@ function ColumnHeading({
 function QrPanel({ pix }: { pix: PixCharge }): JSX.Element {
   const { Text } = useCheckoutComponents();
   const copy = useCheckoutCopy().screens.pix;
+  const stale = usePaymentStale();
   return (
     <Box
       data-testid="pix-qr-panel"
@@ -100,12 +102,14 @@ function QrPanel({ pix }: { pix: PixCharge }): JSX.Element {
           [PIX_WIDE]: { "& svg": { width: 232, height: 232 } },
         }}
       >
-        <PixQr
-          payload={pix.copyPaste}
-          size={232}
-          alt={copy.qrAlt}
-          testId="pix-qr"
-        />
+        <StaleVeil stale={stale}>
+          <PixQr
+            payload={pix.copyPaste}
+            size={232}
+            alt={copy.qrAlt}
+            testId="pix-qr"
+          />
+        </StaleVeil>
       </Box>
       <Text variant="body" size="sm" color="secondary" as="p" style={{ margin: 0, maxWidth: 280 }}>
         <Box component="span" sx={NARROW_ONLY}>{copy.qrTabCaption}</Box>
@@ -125,6 +129,9 @@ function QrPanel({ pix }: { pix: PixCharge }): JSX.Element {
 function CopyButton({ onCopy }: { onCopy: () => void }): JSX.Element {
   const { Button } = useCheckoutComponents();
   const copy = useCheckoutCopy().screens.pix;
+  // A changed cart makes this code the OLD order's (FUT-3535): nothing to copy
+  // until the step's "Atualizar pagamento" brings a new one.
+  const stale = usePaymentStale();
   return (
     <StickyPayBar>
       <Box
@@ -141,6 +148,7 @@ function CopyButton({ onCopy }: { onCopy: () => void }): JSX.Element {
           fullWidth
           icon={<ContentCopyIcon fontSize="small" />}
           onClick={onCopy}
+          disabled={stale}
           dataTestId="pix-copy"
         >
           {copy.copyAction}
@@ -162,6 +170,7 @@ function CopyPanel({
 }): JSX.Element {
   const { Text } = useCheckoutComponents();
   const copy = useCheckoutCopy().screens.pix;
+  const stale = usePaymentStale();
   return (
     <Box
       data-testid="pix-copy-panel"
@@ -179,21 +188,23 @@ function CopyPanel({
         (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",
-          "&& > *": { 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>
+      <StaleVeil stale={stale}>
+        <Box
+          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>
+      </StaleVeil>
       {inPanel ? <CopyButton onCopy={onCopy} /> : null}
       <Text
         variant="body"

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

@@ -1,7 +1,9 @@
 import { Box } from "@mui/material";
-import { Fragment, useCallback, useEffect, useRef, useState, type JSX } from "react";
+import { Fragment, useCallback, useEffect, useRef, useState, type JSX, type ReactNode } from "react";
 import QRCode from "react-qr-code";
 
+import { useCheckoutCopy } from "./copy-context";
+
 /**
  * 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
@@ -79,3 +81,47 @@ export function useClipboardCopy(text: string): { copy: () => Promise<boolean>;
   }, [text]);
   return { copy, justCopied };
 }
+
+/**
+ * A PIX's QR or code, veiled while the cart has changed under it (FUT-3535):
+ * blurred past reading, out of reach of a pointer, a selection and a screen
+ * reader, with "Atualize para gerar um novo Pix" over it. The step's warning
+ * above says why and carries the control that brings a new code. One tree
+ * shape either way, so lifting the veil redraws nothing.
+ */
+export function StaleVeil({ stale, children }: { stale: boolean; children: ReactNode }): JSX.Element {
+  const words = useCheckoutCopy().screens.cartChanged.pixVeil;
+  return (
+    <Box sx={{ position: "relative", minWidth: 0 }} data-testid={stale ? "pix-stale-veil" : undefined}>
+      <Box
+        aria-hidden={stale || undefined}
+        sx={stale ? { filter: "blur(6px)", opacity: 0.5, pointerEvents: "none", userSelect: "none" } : undefined}
+      >
+        {children}
+      </Box>
+      {stale ? (
+        <Box
+          sx={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", p: 1.5 }}
+        >
+          <Box
+            component="p"
+            sx={{
+              m: 0,
+              px: 1.5,
+              py: 0.75,
+              borderRadius: 999,
+              bgcolor: "background.paper",
+              boxShadow: 1,
+              color: "text.primary",
+              fontSize: "0.8125rem",
+              fontWeight: 600,
+              textAlign: "center",
+            }}
+          >
+            {words}
+          </Box>
+        </Box>
+      ) : null}
+    </Box>
+  );
+}

package/src/components/checkout/screens-copy.ts

@@ -284,6 +284,12 @@ export interface CartChangedCopy {
   refreshAction: string;
   /** The heading over a refresh that failed; the host's own sentence is the body. */
   refreshFailed: string;
+  /**
+   * Drawn over a PIX's QR and code while they are veiled (FUT-3535): the code
+   * on screen asks for the old amount, so it cannot be copied or scanned until
+   * the payment is updated.
+   */
+  pixVeil: string;
 }
 
 /** What the browser says when the wire itself failed. */

package/src/components/checkout/screens-en-US.ts

@@ -159,6 +159,7 @@ export const EN_US_CHECKOUT_SCREENS_COPY: CheckoutScreensCopy = {
     support: 'This payment was prepared for your previous cart. Update it to pay the right amount.',
     refreshAction: 'Update payment',
     refreshFailed: 'Could not update the payment',
+    pixVeil: 'Update to get a new Pix code',
   },
   validation: {
     taxIdInvalid: 'That CPF is not valid.',

package/src/components/checkout/screens-pt-BR.ts

@@ -145,6 +145,7 @@ export const PT_BR_CHECKOUT_SCREENS_COPY: CheckoutScreensCopy = {
     support: 'O pagamento foi preparado para o carrinho anterior. Atualize para pagar o valor certo.',
     refreshAction: 'Atualizar pagamento',
     refreshFailed: 'Não foi possível atualizar o pagamento',
+    pixVeil: 'Atualize para gerar um novo Pix',
   },
   validation: {
     taxIdInvalid: 'CPF inválido.',