@12-apps/payments-frontend 3.30.0 → 3.31.1

package/package.json

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

@@ -4,7 +4,7 @@ import QRCode from "react-qr-code";
 
 import { useCheckoutCopy } from "./copy-context";
 import { ContentCopyIcon } from "./icons";
-import type { SettlingCopy } from "./screens-copy";
+import type { PixPaneCopy, SettlingCopy } from "./screens-copy";
 import { StalledWait } from "./stalled-wait";
 import type { CheckoutOrder, OrderStatus, PixCharge } from "./types";
 import { useCheckoutComponents } from "./ui";
@@ -163,14 +163,18 @@ function PixPollFooter({
   error,
   timedOut,
   onCheckAgain,
+  manual,
 }: {
   error: string | null;
   timedOut: boolean;
   onCheckAgain: () => void;
+  /** The store confirms this Pix: the wait is for THEM, not for the bank. */
+  manual: boolean;
 }): JSX.Element {
   const { Text } = useCheckoutComponents();
   const { pix, settling } = useCheckoutCopy().screens;
   const panel = pixWaitPanel(settling, error, timedOut);
+  const awaiting = (manual ? pix.manual?.awaiting : undefined) ?? pix.awaiting;
   if (panel) {
     // The same panel the card and wallet panes show, held to the width of the
     // copy-and-paste strip above it so the centred PIX column stays a column.
@@ -190,12 +194,23 @@ function PixPollFooter({
     <Box sx={{ display: "flex", alignItems: "center", gap: 1, color: "text.secondary" }}>
       <LoadingDot />
       <Text variant="caption" size="xs" color="secondary" as="span" data-testid="pix-awaiting">
-        {pix.awaiting}
+        {awaiting}
       </Text>
     </Box>
   );
 }
 
+/**
+ * The pane's two sentences that depend on who confirms. A store-confirmed Pix
+ * must not say "a confirmação é automática": nothing confirms it but the store.
+ */
+function pixSentences(
+  copy: PixPaneCopy,
+  manual: boolean,
+): Pick<PixPaneCopy, "instructions" | "validUntil"> {
+  return (manual ? copy.manual : undefined) ?? copy;
+}
+
 export function PixView({
   order,
   onResolved,
@@ -239,10 +254,9 @@ export function PixView({
   // The locale is the HOST's (FUT-760): it decides what a buyer reads off the
   // clock, so it travels with the sentence it feeds rather than being frozen
   // to the origin host's here.
-  const validUntil = new Date(pix.expiresAt).toLocaleTimeString(copy.expiryLocale, {
-    hour: "2-digit",
-    minute: "2-digit",
-  });
+  const validUntil = new Date(pix.expiresAt).toLocaleTimeString(copy.expiryLocale, { hour: "2-digit", minute: "2-digit" });
+  const manual = pix.confirmation === "MANUAL";
+  const sentences = pixSentences(copy, manual);
 
   return (
     <Box
@@ -253,7 +267,7 @@ export function PixView({
         {copy.heading}
       </Text>
       <Text variant="body" size="sm" color="secondary" as="p">
-        {copy.instructions(order.totalLabel)}
+        {sentences.instructions(order.totalLabel)}
       </Text>
 
       <Box
@@ -268,10 +282,10 @@ export function PixView({
       <PixCodeBox pix={pix} />
 
       <Text variant="caption" size="xs" color="secondary" as="p" data-testid="pix-expiry">
-        {copy.validUntil(validUntil)}
+        {sentences.validUntil(validUntil)}
       </Text>
 
-      <PixPollFooter error={error} timedOut={timedOut} onCheckAgain={checkAgain} />
+      <PixPollFooter error={error} timedOut={timedOut} onCheckAgain={checkAgain} manual={manual} />
     </Box>
   );
 }

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

@@ -107,6 +107,17 @@ export interface PixPaneCopy {
   awaiting: string;
   /** The order came back with no PIX charge on it — nothing to show. */
   chargeMissing: string;
+  /**
+   * The same pane for a Pix the STORE confirms (`PixCharge.confirmation:
+   * 'MANUAL'`). Optional so a host's own table keeps compiling; absent, the
+   * automatic sentences are used — which promise "automática", so a host that
+   * enables a store-confirmed provider should set them.
+   */
+  manual?: {
+    instructions(totalLabel: string): string;
+    validUntil(time: string): string;
+    awaiting: string;
+  };
 }
 
 /** The card pane's own heading. Everything else in it is {@link SettlingCopy}. */

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

@@ -51,6 +51,12 @@ export const EN_US_CHECKOUT_SCREENS_COPY: CheckoutScreensCopy = {
     expiryLocale: 'en-US',
     awaiting: 'Waiting for payment…',
     chargeMissing: 'Could not generate the PIX code.',
+    manual: {
+      instructions: (totalLabel) =>
+        `Pay ${totalLabel} with the QR code or the code below. The store checks it arrived and confirms your order.`,
+      validUntil: (time) => `The store confirms the payment by ${time}.`,
+      awaiting: 'Waiting for the store to confirm the payment…',
+    },
   },
   card: {
     heading: 'Pay by card',

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

@@ -40,6 +40,12 @@ export const PT_BR_CHECKOUT_SCREENS_COPY: CheckoutScreensCopy = {
     expiryLocale: 'pt-BR',
     awaiting: 'Aguardando pagamento…',
     chargeMissing: 'Não foi possível gerar o código PIX.',
+    manual: {
+      instructions: (totalLabel) =>
+        `Pague ${totalLabel} com o QR code ou o código abaixo. A loja confere o recebimento e confirma o seu pedido.`,
+      validUntil: (time) => `A loja confirma o pagamento até ${time}.`,
+      awaiting: 'Aguardando confirmação do pagamento pela loja…',
+    },
   },
   card: {
     heading: 'Pague com cartão',

package/src/components/checkout/types.ts

@@ -66,15 +66,15 @@ export interface BuyerInfo {
 }
 
 /**
- * A raised PIX charge. `copyPaste` is the EMV "copia e cola" payload — it is both
- * what the QR code encodes and what the copy button copies. The real backend also
- * returns a provider QR image; the client renders its own QR from `copyPaste`, so
- * no image URL is needed here.
+ * A raised PIX charge. `copyPaste` is the EMV "copia e cola" payload: what the
+ * QR encodes (rendered client-side, so no image URL) and what the button copies.
  */
 export interface PixCharge {
   copyPaste: string;
   /** ISO-8601 instant when the charge expires. */
   expiresAt: string;
+  /** `'MANUAL'`: only the store confirms it (`pixmanual`); absent is automatic. */
+  confirmation?: 'AUTOMATIC' | 'MANUAL';
 }
 
 /**