@12-apps/payments-frontend 3.33.0 → 3.34.1

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

@@ -1,9 +1,11 @@
 import { Box } from "@mui/material";
-import { useEffect, useMemo, useState, type JSX } from "react";
-import QRCode from "react-qr-code";
+import { useEffect, useMemo, useRef, useState, type JSX } from "react";
 
 import { useCheckoutCopy } from "./copy-context";
-import { ContentCopyIcon } from "./icons";
+import { PixAfterCopy } from "./pix-after-copy";
+import { PixPane, type PixTab } from "./pix-pane";
+import { PIX_CONTAINER, PIX_WIDE, useClipboardCopy } from "./pix-parts";
+import { usePixStage } from "./pix-stage";
 import type { PixPaneCopy, SettlingCopy } from "./screens-copy";
 import { StalledWait } from "./stalled-wait";
 import type { CheckoutOrder, OrderStatus, PixCharge } from "./types";
@@ -11,10 +13,11 @@ import { useCheckoutComponents } from "./ui";
 import { usePaymentPolling } from "./use-payment-polling";
 
 /**
- * PIX payment view: a scannable QR (rendered client-side from the "copia e cola"
- * payload), the copyable code, and a live pending indicator. Polls the order in
- * the background and hands a terminal status up to the parent, which then shows
- * the payment-status screen.
+ * PIX payment view: the pane to pay from (tabs on a phone, QR and code side by
+ * side on a desktop — `./pix-pane`), and after a copy the wait that follows
+ * (`./pix-after-copy`). Polls the order in the background throughout and hands
+ * a terminal status up to the parent, which then shows the payment-status
+ * screen. The 2026-10-06 redesign moved the layout out; the wait stays here.
  */
 
 /**
@@ -65,63 +68,6 @@ function pixWaitMs(expiresAt: string | undefined): number {
   return Math.max(0, deadline - Date.now()) + PIX_EXPIRY_GRACE_MS;
 }
 
-/** The copyable "copia e cola" strip with its copy button. */
-function PixCodeBox({ pix, onCopied }: { pix: PixCharge; onCopied: () => void }): JSX.Element {
-  const { Button, Text } = useCheckoutComponents();
-  const copy = useCheckoutCopy().screens.pix;
-  const [copied, setCopied] = useState(false);
-
-  const copyCode = async (): Promise<void> => {
-    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 */
-    }
-  };
-
-  return (
-    <Box
-      sx={{
-        display: "flex",
-        alignItems: "center",
-        gap: 1,
-        width: "100%",
-        maxWidth: 420,
-        p: 1,
-        borderRadius: 1,
-        border: "1px solid",
-        borderColor: "divider",
-        bgcolor: "background.default",
-      }}
-    >
-      <Text
-        variant="code"
-        size="xs"
-        as="span"
-        data-testid="pix-code"
-        style={{ flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}
-      >
-        {pix.copyPaste}
-      </Text>
-      <Button
-        variant="outline"
-        color="neutral"
-        size="sm"
-        icon={<ContentCopyIcon fontSize="small" />}
-        onClick={() => {
-          void copyCode();
-        }}
-        dataTestId="pix-copy"
-      >
-        {copied ? copy.copiedAction : copy.copyAction}
-      </Button>
-    </Box>
-  );
-}
-
 /**
  * Which of the wait's three faces the footer is showing — STOPPED, then STILL
  * TRYING, then working.
@@ -164,18 +110,17 @@ function PixPollFooter({
   error,
   timedOut,
   onCheckAgain,
-  manual,
+  awaiting,
 }: {
   error: string | null;
   timedOut: boolean;
   onCheckAgain: () => void;
-  /** The store confirms this Pix: the wait is for THEM, not for the bank. */
-  manual: boolean;
+  /** What the healthy wait says: whose confirmation it is waiting for, or "Verificando…" after a copy. */
+  awaiting: string;
 }): JSX.Element {
   const { Text } = useCheckoutComponents();
-  const { pix, settling } = useCheckoutCopy().screens;
+  const { 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.
@@ -194,7 +139,7 @@ function PixPollFooter({
   return (
     <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">
+      <Text variant="body" size="xs" color="secondary" as="span" data-testid="pix-awaiting">
         {awaiting}
       </Text>
     </Box>
@@ -202,128 +147,154 @@ 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.
+ * The words that depend on who confirms. A store-confirmed Pix must not say
+ * "a confirmação é automática": nothing confirms it but the store.
  */
-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} />
-    </>
-  );
+function pixSentences(copy: PixPaneCopy, manual: boolean): Pick<PixPaneCopy, "validUntil" | "awaiting" | "afterCopy"> {
+  return (manual ? copy.manual : undefined) ?? copy;
 }
 
 /**
- * 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.
+ * The deadline and the wait, rendered once for both layouts: narrow, two
+ * centred lines under the pane; wide, one footer row under a hairline with the
+ * wait on the left and the deadline on the right.
  */
-function pixSentences(
-  copy: PixPaneCopy,
-  manual: boolean,
-): Pick<PixPaneCopy, "instructions" | "validUntil"> {
-  return (manual ? copy.manual : undefined) ?? copy;
+function PixFooter({ deadline, children }: { deadline: string; children: JSX.Element }): JSX.Element {
+  const { Text } = useCheckoutComponents();
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 1,
+        textAlign: "center",
+        [PIX_WIDE]: { flexDirection: "row-reverse", justifyContent: "space-between", textAlign: "left", pt: 2.25, borderTop: "1px solid", borderColor: "divider" },
+      }}
+    >
+      <Text variant="body" size="xs" color="secondary" as="p" data-testid="pix-expiry" style={{ margin: 0 }}>
+        {deadline}
+      </Text>
+      {children}
+    </Box>
+  );
 }
 
-export function PixView({
-  order,
-  onResolved,
-  pollIntervalMs = 2500,
-}: {
-  order: CheckoutOrder;
-  onResolved: (status: OrderStatus) => void;
-  pollIntervalMs?: number;
-}): JSX.Element {
-  const { Text } = useCheckoutComponents();
-  const copy = useCheckoutCopy().screens.pix;
+/** The poll, bounded by the charge's own expiry (FUT-1170). */
+function usePixPolling(order: CheckoutOrder, onResolved: (status: OrderStatus) => void, pollIntervalMs: number) {
   // Fixed once per charge (FUT-1170): the bound is a span, so recomputing it
   // every render would keep pushing the deadline out — and it is an effect
   // dependency, so it would also restart the wait on every render.
   const expiresAt = order.pix?.expiresAt;
   const maxWaitMs = useMemo(() => pixWaitMs(expiresAt), [expiresAt]);
-  const { status, error, timedOut, checkAgain } = usePaymentPolling(order.orderId, {
+  const polling = usePaymentPolling(order.orderId, {
     intervalMs: pollIntervalMs,
     slowAfterPolls: PIX_FAST_POLLS,
     // Never FASTER than the opening cadence: a host that opens slowly means it.
     slowIntervalMs: Math.max(pollIntervalMs, PIX_SLOW_INTERVAL_MS),
     maxWaitMs,
   });
-
+  const { status } = polling;
   // Bubble a terminal status up once, so the parent can advance to the status step.
   useEffect(() => {
-    if (status && status !== "AWAITING_PAYMENT") {
-      onResolved(status);
-    }
+    if (status && status !== "AWAITING_PAYMENT") onResolved(status);
   }, [status, onResolved]);
+  return polling;
+}
 
-  const pix = order.pix;
-  if (!pix) {
-    return (
-      <Text variant="body" size="sm" color="danger" as="p" data-testid="pix-missing">
-        {copy.chargeMissing}
-      </Text>
-    );
-  }
+function PixBody({ order, pix, poll }: { order: CheckoutOrder; pix: PixCharge; poll: ReturnType<typeof usePixPolling> }): JSX.Element {
+  const { Text } = useCheckoutComponents();
+  const copy = useCheckoutCopy().screens.pix;
+  const stage = usePixStage();
+  const [tab, setTab] = useState<PixTab>("copy");
+  const { copy: writeClipboard, justCopied } = useClipboardCopy(pix.copyPaste);
+  // Leaving the payment step (a method switch, a terminal status) ends the
+  // after-copy face with it: the next pane starts on the code.
+  const { setAfterCopy } = stage;
+  // A clipboard write that settles after the pane is gone must not reopen the
+  // after-copy face over whatever replaced it (it would hide the picker).
+  const mounted = useRef(true);
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+      setAfterCopy(false);
+    };
+  }, [setAfterCopy]);
 
   // 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 manual = pix.confirmation === "MANUAL";
-  const sentences = pixSentences(copy, manual);
+  const time = new Date(pix.expiresAt).toLocaleTimeString(copy.expiryLocale, { hour: "2-digit", minute: "2-digit" });
+  const sentences = pixSentences(copy, pix.confirmation === "MANUAL");
+  const footerLine = (awaiting: string): JSX.Element => (
+    <PixPollFooter error={poll.error} timedOut={poll.timedOut} onCheckAgain={poll.checkAgain} awaiting={awaiting} />
+  );
 
+  if (stage.afterCopy) {
+    return (
+      <PixAfterCopy
+        pix={pix}
+        words={sentences.afterCopy}
+        totalLabel={order.totalLabel}
+        deadline={time}
+        justCopied={justCopied}
+        onCopyAgain={() => void writeClipboard()}
+        onShowQr={() => {
+          setTab("qr");
+          setAfterCopy(false);
+        }}
+        onPreferCard={stage.preferCard}
+        footer={footerLine(copy.verifying)}
+      />
+    );
+  }
   return (
-    <Box
-      data-testid="pix-view"
-      sx={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 2, textAlign: "center" }}
-    >
-      <Text variant="heading" size="md" weight="bold" as="h2">
+    <>
+      <Text variant="heading" size="md" weight="bold" as="h2" style={{ margin: 0 }}>
         {copy.heading}
       </Text>
-      <Text variant="body" size="sm" color="secondary" as="p">
-        {sentences.instructions(order.totalLabel)}
-      </Text>
-
-      <Box
-        data-testid="pix-qr"
-        role="img"
-        aria-label={copy.qrAlt}
-        sx={{ bgcolor: "background.paper", p: 2, borderRadius: 2, border: "1px solid", borderColor: "divider" }}
-      >
-        <QRCode value={pix.copyPaste} size={200} />
-      </Box>
-
-      <PixCopyRow pix={pix} manual={manual} />
+      <PixPane
+        pix={pix}
+        tab={tab}
+        onTab={setTab}
+        onCopy={() => {
+          // Only a copy the clipboard TOOK moves on: the next face opens on
+          // "Código Pix copiado", and a failed write leaves the code on screen
+          // to select by hand.
+          void writeClipboard().then((ok) => {
+            if (ok && mounted.current) setAfterCopy(true);
+          });
+        }}
+      />
+      <PixFooter deadline={sentences.validUntil(time)}>{footerLine(sentences.awaiting)}</PixFooter>
+    </>
+  );
+}
 
-      <Text variant="caption" size="xs" color="secondary" as="p" data-testid="pix-expiry">
-        {sentences.validUntil(validUntil)}
+export function PixView({
+  order,
+  onResolved,
+  pollIntervalMs = 2500,
+}: {
+  order: CheckoutOrder;
+  onResolved: (status: OrderStatus) => void;
+  pollIntervalMs?: number;
+}): JSX.Element {
+  const { Text } = useCheckoutComponents();
+  const copy = useCheckoutCopy().screens.pix;
+  const poll = usePixPolling(order, onResolved, pollIntervalMs);
+  const pix = order.pix;
+  if (!pix) {
+    return (
+      <Text variant="body" size="sm" color="danger" as="p" data-testid="pix-missing">
+        {copy.chargeMissing}
       </Text>
-
-      <PixPollFooter error={error} timedOut={timedOut} onCheckAgain={checkAgain} manual={manual} />
+    );
+  }
+  return (
+    <Box data-testid="pix-view" sx={{ ...PIX_CONTAINER, display: "flex", flexDirection: "column", gap: 2 }}>
+      <PixBody order={order} pix={pix} poll={poll} />
     </Box>
   );
 }

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

@@ -21,25 +21,35 @@
 
 /** The method tiles, and what each one promises. */
 export interface MethodPickerCopy {
-  /** The group's heading, and its `aria-label` — one string, said once. */
+  /**
+   * The group's accessible name. Not drawn: the tiles are self-explaining
+   * ("Pix", "Cartão") and the heading cost the phone a line above the code
+   * (the 2026-10-06 Pix redesign).
+   */
   groupLabel: string;
   /**
-   * What each method is CALLED. "PIX" is a Brazilian instrument and keeps its
+   * What each method is CALLED. "Pix" is a Brazilian instrument and keeps its
    * name everywhere, the way "Visa" does; "Cartão" is just the word for card,
    * and was the tile's label — so both are stated rather than one assumed.
    */
   pixLabel: string;
   cardLabel: string;
-  /** What each method is like to use — shown under its name. */
+  /**
+   * What each method is like to use. The checkout's tiles no longer draw it
+   * (the 2026-10-06 Pix redesign kept the picker to one line); the flow
+   * pipeline's method list (`flows/pipeline/methods.ts`) still says it.
+   */
   pixDescription: string;
   /**
-   * PIX's line when the store confirms it by hand (the chain's first PIX
-   * provider declares `confirmation: 'MANUAL'`). Optional; absent falls back
-   * to `pixDescription`, so a host enabling such a provider should set it.
+   * PIX's line when the store confirms it by hand. Optional; absent falls
+   * back to `pixDescription`.
    */
   pixManualDescription?: string;
   cardDescription: string;
-  /** This store's providers cannot take that method. */
+  /**
+   * This store's providers cannot take that method: the disabled tile's
+   * accessible description, and a caption under the picker.
+   */
   unavailableHere: string;
 }
 
@@ -88,16 +98,59 @@ export interface SettlingCopy {
   checkAgainAction: string;
 }
 
+/**
+ * The words the after-copy state says (the 2026-10-06 Pix redesign). One shape
+ * for both kinds of Pix: the manual one says the STORE confirms, the automatic
+ * one that the BANK does — the screen around it is the same.
+ */
+export interface PixAfterCopyCopy {
+  title: string;
+  /**
+   * The sentence under the title. `wide` is the desktop layout, whose reader is
+   * on a "page" rather than a "screen"; `**…**` marks the bold span.
+   */
+  body(totalLabel: string, wide: boolean): string;
+  /** The three steps: copied (done), pay (current), the confirmation (pending). */
+  stepCopied: string;
+  stepPay(wide: boolean): string;
+  stepConfirm(time: string): string;
+}
+
 /** The PIX pane: the QR, the copyable code, and the wait. */
 export interface PixPaneCopy {
   heading: string;
-  /** What to do with the QR, carrying the order total the buyer is paying. */
-  instructions(totalLabel: string): string;
   /** The QR image's alternative text — the only thing a screen reader gets. */
   qrAlt: string;
+  /** The primary copy button. */
   copyAction: string;
-  /** The same button for the two seconds after a successful copy. */
+  /** Replaces a copy button's label for the two seconds after a successful copy. */
   copiedAction: string;
+  /** The after-copy state's copy-again button. */
+  copyAgainAction: string;
+  /** The after-copy state's way back to the QR (narrow layout only). */
+  showQrAction: string;
+  /** The after-copy state's way to the card, when the store takes one. */
+  preferCardAction: string;
+  /** The after-copy state's poll line. */
+  verifying: string;
+  /** The narrow layout's tabs: their group name and the two labels. */
+  tabsLabel: string;
+  copyPasteTab: string;
+  qrTab: string;
+  /** The wide layout's two column headings and the word between them. */
+  qrHeading: string;
+  copyPasteHeading: string;
+  or: string;
+  /** Under the QR in the wide layout; `**…**` marks the bold span. */
+  qrInstructions: string;
+  /** Under the QR in the narrow layout's QR tab. */
+  qrTabCaption: string;
+  /** Under the copy button: narrow and wide. `**…**` marks the bold span. */
+  copyPasteHint: string;
+  internetBankingHint: string;
+  /** The wide after-copy state's QR box. */
+  notPaidYet: string;
+  scanFromPhone: string;
   /**
    * How long the code lasts. Takes the already-formatted clock time, and
    * {@link expiryLocale} is what formatted it.
@@ -113,6 +166,14 @@ export interface PixPaneCopy {
   awaiting: string;
   /** The order came back with no PIX charge on it — nothing to show. */
   chargeMissing: string;
+  /**
+   * @deprecated Unread since the 2026-10-06 redesign (FUT-3368): the pane's
+   * hints replaced the one instructions line. Kept, optional and in its old
+   * shape, so an old pack only has to ADD the new keys; remove it from yours.
+   */
+  instructions?: (totalLabel: string) => string;
+  /** After a copy, for a Pix the BANK confirms. */
+  afterCopy: PixAfterCopyCopy;
   /**
    * The same pane for a Pix the STORE confirms (`PixCharge.confirmation:
    * 'MANUAL'`). Optional so a host's own table keeps compiling; absent, the
@@ -120,15 +181,13 @@ export interface PixPaneCopy {
    * enables a store-confirmed provider should set them.
    */
   manual?: {
-    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.
-     */
+    /** Required: the automatic sentences promise "automática" (FUT-3232). */
+    afterCopy: PixAfterCopyCopy;
+    /** @deprecated Unread since FUT-3368; see {@link PixPaneCopy.instructions}. */
+    instructions?: (totalLabel: string) => string;
+    /** @deprecated Unread since FUT-3368: the after-copy screen replaced the notice. */
     copied?: { title: string; description: string };
   };
 }

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

@@ -19,12 +19,12 @@ import type { CheckoutScreensCopy } from './screens-copy';
 export const EN_US_CHECKOUT_SCREENS_COPY: CheckoutScreensCopy = {
   method: {
     groupLabel: 'Payment method',
-    pixLabel: 'PIX',
+    pixLabel: 'Pix',
     cardLabel: 'Card',
     pixDescription: 'Approved instantly',
     pixManualDescription: 'Confirmed by the store',
     cardDescription: 'Credit, paid in full',
-    unavailableHere: 'Unavailable in this store',
+    unavailableHere: 'Not available at this store',
   },
   settling: {
     cannotConfirm: 'Could not confirm the payment',
@@ -42,25 +42,50 @@ export const EN_US_CHECKOUT_SCREENS_COPY: CheckoutScreensCopy = {
     checkAgainAction: 'Check again',
   },
   pix: {
-    heading: 'Pay with PIX',
-    instructions: (totalLabel) =>
-      `Scan the QR code in your banking app, or copy the code. Total ${totalLabel}.`,
+    heading: 'Pay with Pix',
     qrAlt: 'PIX QR code for payment',
-    copyAction: 'Copy',
+    copyAction: 'Copy code',
     copiedAction: 'Copied!',
+    copyAgainAction: 'Copy again',
+    showQrAction: 'Show QR code',
+    preferCardAction: 'Rather pay by card?',
+    verifying: 'Checking automatically…',
+    tabsLabel: 'How to pay the Pix',
+    copyPasteTab: 'Copy and paste',
+    qrTab: 'QR code',
+    qrHeading: 'On your phone',
+    copyPasteHeading: 'Pix copy and paste',
+    or: 'or',
+    qrInstructions: 'Open your banking app on your phone, choose **Pix › Scan QR code** and point it at the screen.',
+    qrTabCaption: 'Scan it with the banking app on another phone.',
+    copyPasteHint: 'Paste it into your banking app under **Pix copy and paste**.',
+    internetBankingHint: 'Paying through internet banking? Paste the code under **Pix copy and paste**.',
+    notPaidYet: 'Not paid yet?',
+    scanFromPhone: 'Scan it with the banking app on your phone.',
     validUntil: (time) => `Valid until ${time}. Confirmation is automatic.`,
     expiryLocale: 'en-US',
     awaiting: 'Waiting for payment…',
     chargeMissing: 'Could not generate the PIX code.',
+    afterCopy: {
+      title: 'Waiting for the payment',
+      body: (totalLabel, wide) =>
+        `As soon as the bank confirms the payment of ${wide ? `**${totalLabel}**` : totalLabel}, your order shows up here. You can leave this ${wide ? 'page' : 'screen'} open.`,
+      stepCopied: 'Pix code copied',
+      stepPay: (wide) =>
+        wide ? 'Pay in your banking app or internet banking (Pix copy and paste)' : 'Pay in your banking app (Pix copy and paste)',
+      stepConfirm: () => 'The bank confirms the payment automatically',
+    },
     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…',
-      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.',
+      awaiting: 'Waiting for the store to confirm…',
+      afterCopy: {
+        title: 'Waiting for the store',
+        body: (totalLabel, wide) =>
+          `As soon as the store confirms it received ${wide ? `**${totalLabel}**` : totalLabel}, your order shows up here. You can leave this ${wide ? 'page' : 'screen'} open.`,
+        stepCopied: 'Pix code copied',
+        stepPay: (wide) =>
+          wide ? 'Pay in your banking app or internet banking (Pix copy and paste)' : 'Pay in your banking app (Pix copy and paste)',
+        stepConfirm: (time) => `The store confirms the payment — by ${time}`,
       },
     },
   },

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

@@ -12,7 +12,7 @@ import type { CheckoutScreensCopy } from './screens-copy';
 export const PT_BR_CHECKOUT_SCREENS_COPY: CheckoutScreensCopy = {
   method: {
     groupLabel: 'Forma de pagamento',
-    pixLabel: 'PIX',
+    pixLabel: 'Pix',
     cardLabel: 'Cartão',
     pixDescription: 'Aprovação imediata',
     pixManualDescription: 'Confirmado pela loja',
@@ -31,25 +31,50 @@ export const PT_BR_CHECKOUT_SCREENS_COPY: CheckoutScreensCopy = {
     checkAgainAction: 'Verificar de novo',
   },
   pix: {
-    heading: 'Pague com PIX',
-    instructions: (totalLabel) =>
-      `Escaneie o QR code no app do seu banco ou copie o código. Total ${totalLabel}.`,
+    heading: 'Pague com Pix',
     qrAlt: 'QR Code PIX para pagamento',
-    copyAction: 'Copiar',
+    copyAction: 'Copiar código',
     copiedAction: 'Copiado!',
+    copyAgainAction: 'Copiar de novo',
+    showQrAction: 'Ver QR code',
+    preferCardAction: 'Prefere pagar com cartão?',
+    verifying: 'Verificando automaticamente…',
+    tabsLabel: 'Forma de pagar o Pix',
+    copyPasteTab: 'Copia e cola',
+    qrTab: 'QR code',
+    qrHeading: 'Pelo celular',
+    copyPasteHeading: 'Pix Copia e Cola',
+    or: 'ou',
+    qrInstructions: 'Abra o app do seu banco no celular, escolha **Pix › Ler QR code** e aponte para a tela.',
+    qrTabCaption: 'Escaneie com o app do banco em outro celular.',
+    copyPasteHint: 'Cole no app do seu banco em **Pix Copia e Cola**.',
+    internetBankingHint: 'Pagando pelo internet banking? Cole o código em **Pix Copia e Cola**.',
+    notPaidYet: 'Ainda não pagou?',
+    scanFromPhone: 'Escaneie com o app do banco no celular.',
     validUntil: (time) => `Válido até ${time}. A confirmação é automática.`,
     expiryLocale: 'pt-BR',
     awaiting: 'Aguardando pagamento…',
     chargeMissing: 'Não foi possível gerar o código PIX.',
+    afterCopy: {
+      title: 'Aguardando o pagamento',
+      body: (totalLabel, wide) =>
+        `Assim que o banco confirmar o pagamento de ${wide ? `**${totalLabel}**` : totalLabel}, seu pedido aparece aqui. Pode deixar esta ${wide ? 'página' : 'tela'} aberta.`,
+      stepCopied: 'Código Pix copiado',
+      stepPay: (wide) =>
+        wide ? 'Pague no app ou no internet banking (Pix Copia e Cola)' : 'Pague no app do seu banco (Pix Copia e Cola)',
+      stepConfirm: () => 'O banco confirma o pagamento automaticamente',
+    },
     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…',
-      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.',
+      awaiting: 'Aguardando confirmação da loja…',
+      afterCopy: {
+        title: 'Aguardando a loja',
+        body: (totalLabel, wide) =>
+          `Assim que a loja confirmar o recebimento de ${wide ? `**${totalLabel}**` : totalLabel}, seu pedido aparece aqui. Pode deixar esta ${wide ? 'página' : 'tela'} aberta.`,
+        stepCopied: 'Código Pix copiado',
+        stepPay: (wide) =>
+          wide ? 'Pague no app ou no internet banking (Pix Copia e Cola)' : 'Pague no app do seu banco (Pix Copia e Cola)',
+        stepConfirm: (time) => `A loja confirma o pagamento — até ${time}`,
       },
     },
   },