@12-apps/payments-frontend 3.32.0 → 3.34.0

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,9 +181,14 @@ export interface PixPaneCopy {
    * enables a store-confirmed provider should set them.
    */
   manual?: {
-    instructions(totalLabel: string): string;
     validUntil(time: string): string;
     awaiting: string;
+    /** 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,21 +42,51 @@ 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…',
+      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}`,
+      },
     },
   },
   card: {

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,21 +31,51 @@ 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…',
+      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}`,
+      },
     },
   },
   card: {

package/src/index.ts

@@ -125,6 +125,7 @@ export type {
   MethodPickerCopy,
   PayerSummaryCopy,
   PaymentErrorCopy,
+  PixAfterCopyCopy,
   PixPaneCopy,
   SettlingCopy,
   WalletCopy,