@12-apps/payments-frontend 3.32.0 → 3.33.0

package/package.json

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

@@ -66,7 +66,7 @@ function pixWaitMs(expiresAt: string | undefined): number {
 }
 
 /** The copyable "copia e cola" strip with its copy button. */
-function PixCodeBox({ pix }: { pix: PixCharge }): JSX.Element {
+function PixCodeBox({ pix, onCopied }: { pix: PixCharge; onCopied: () => void }): JSX.Element {
   const { Button, Text } = useCheckoutComponents();
   const copy = useCheckoutCopy().screens.pix;
   const [copied, setCopied] = useState(false);
@@ -75,6 +75,7 @@ function PixCodeBox({ pix }: { pix: PixCharge }): JSX.Element {
     try {
       await navigator.clipboard?.writeText(pix.copyPaste);
       setCopied(true);
+      onCopied();
       setTimeout(() => setCopied(false), 2000);
     } catch {
       /* clipboard unavailable — the code is still visible to copy manually */
@@ -200,6 +201,43 @@ function PixPollFooter({
   );
 }
 
+/**
+ * What a store-confirmed Pix says once its code is copied (FUT-3232).
+ *
+ * The footer's caption already names the store's wait, but in a grey line
+ * under the QR that a buyer on their way to the bank app does not read. Copying
+ * is that moment, so it answers with a notice that stays: the wait can run for
+ * minutes, and "volte para esta tela" is the instruction that keeps the buyer
+ * where the confirmation will land.
+ */
+function ManualCopiedNotice({ manual, copied }: { manual: boolean; copied: boolean }): JSX.Element | null {
+  const { Alert } = useCheckoutComponents();
+  const notice = useCheckoutCopy().screens.pix.manual?.copied;
+  if (!manual || !copied || !notice) return null;
+  return (
+    <Box sx={{ width: "100%", maxWidth: 420, textAlign: "left" }}>
+      <Alert
+        variant="info"
+        title={notice.title}
+        description={notice.description}
+        showIcon
+        data-testid="pix-manual-copied"
+      />
+    </Box>
+  );
+}
+
+/** The code strip and, once it has been copied, what that copy means. */
+function PixCopyRow({ pix, manual }: { pix: PixCharge; manual: boolean }): JSX.Element {
+  const [copied, setCopied] = useState(false);
+  return (
+    <>
+      <PixCodeBox pix={pix} onCopied={() => setCopied(true)} />
+      <ManualCopiedNotice manual={manual} copied={copied} />
+    </>
+  );
+}
+
 /**
  * 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.
@@ -279,7 +317,7 @@ export function PixView({
         <QRCode value={pix.copyPaste} size={200} />
       </Box>
 
-      <PixCodeBox pix={pix} />
+      <PixCopyRow pix={pix} manual={manual} />
 
       <Text variant="caption" size="xs" color="secondary" as="p" data-testid="pix-expiry">
         {sentences.validUntil(validUntil)}

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

@@ -123,6 +123,13 @@ export interface PixPaneCopy {
     instructions(totalLabel: string): string;
     validUntil(time: string): string;
     awaiting: string;
+    /**
+     * Shown once the buyer copies the code, and kept: copying is the moment
+     * they leave for their bank app, so it is when they must learn the wait
+     * that follows is the STORE's, and that the answer arrives on this screen.
+     * Optional so a host's own copy without it simply shows no notice.
+     */
+    copied?: { title: string; description: string };
   };
 }
 

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

@@ -57,6 +57,11 @@ export const EN_US_CHECKOUT_SCREENS_COPY: CheckoutScreensCopy = {
         `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…',
+      copied: {
+        title: 'Code copied. Now pay in your bank app',
+        description:
+          'Once you have paid, come back to this screen and wait: the store checks it arrived and confirms your order right here.',
+      },
     },
   },
   card: {

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

@@ -46,6 +46,11 @@ export const PT_BR_CHECKOUT_SCREENS_COPY: CheckoutScreensCopy = {
         `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…',
+      copied: {
+        title: 'Código copiado. Agora pague no app do seu banco',
+        description:
+          'Depois de pagar, volte para esta tela e aguarde: a loja confere o recebimento e confirma o seu pedido aqui mesmo.',
+      },
     },
   },
   card: {