@12-apps/payments-frontend 3.35.0 → 3.37.0

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

@@ -133,17 +133,22 @@ export interface PixPaneCopy {
   preferCardAction: string;
   /** The after-copy state's poll line. */
   verifying: string;
-  /** The narrow layout's tabs: their group name and the two labels. */
+  /** @deprecated Unread since FUT-3525, which took the narrow layout's Copia/QR tabs out. */
   tabsLabel: string;
+  /** @deprecated Unread since FUT-3525 — see {@link PixPaneCopy.tabsLabel}. */
   copyPasteTab: string;
+  /** @deprecated Unread since FUT-3525 — see {@link PixPaneCopy.tabsLabel}. */
   qrTab: string;
-  /** The wide layout's two column headings and the word between them. */
+  /** The wide layout's two column headings. */
   qrHeading: string;
+  /** The phone's heading over the QR, under the code (FUT-3525). */
+  otherDeviceHeading: string;
   copyPasteHeading: string;
+  /** @deprecated Unread since FUT-3525, which took the "ou" between the wide columns out. */
   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. */
+  /** Under the QR in the narrow layout (a tab until FUT-3525, hence the name). */
   qrTabCaption: string;
   /** Under the copy button: narrow and wide. `**…**` marks the bold span. */
   copyPasteHint: string;
@@ -279,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. */
@@ -301,6 +312,29 @@ export interface CheckoutValidationCopy {
   required: string;
 }
 
+/**
+ * The Pagamento step's own frame (FUT-3525): the order summary beside the
+ * payment on a computer, and the phone's header, total and pay bar.
+ */
+export interface PaymentLayoutCopy {
+  /** Over the method tabs on a computer. */
+  payHeading: string;
+  /** The summary card's title. */
+  summaryTitle: string;
+  /** The summary's and the pay bar's label over the amount. */
+  total: string;
+  /** The phone's caption over the big amount — "Total a pagar · 2 itens". */
+  totalDueCaption(items: number): string;
+  /** One cart line in the summary — "2× X-Burger". */
+  lineLabel(quantity: number, name: string): string;
+  /** The phone's payer chip, for a CPF the store already holds — "CPF ✓". A typed one is shown masked. */
+  taxIdOnFileShort: string;
+  /** The address control's accessible name; its visible word is {@link PayerSummaryCopy.changeAction}. */
+  changeAddress: string;
+  /** The phone's step line — "Etapa 2 de 3 · Pagamento". */
+  stepProgress(step: number, steps: number, label: string): string;
+}
+
 /** Everything above, in the shape the checkout context carries. */
 export interface CheckoutScreensCopy {
   method: MethodPickerCopy;
@@ -308,6 +342,7 @@ export interface CheckoutScreensCopy {
   pix: PixPaneCopy;
   card: CardPaneCopy;
   payer: PayerSummaryCopy;
+  layout: PaymentLayoutCopy;
   error: PaymentErrorCopy;
   wallet: WalletCopy;
   hosted: HostedHandoverCopy;

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

@@ -54,6 +54,7 @@ export const EN_US_CHECKOUT_SCREENS_COPY: CheckoutScreensCopy = {
     copyPasteTab: 'Copy and paste',
     qrTab: 'QR code',
     qrHeading: 'On your phone',
+    otherDeviceHeading: 'Or pay from another device',
     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.',
@@ -99,6 +100,16 @@ export const EN_US_CHECKOUT_SCREENS_COPY: CheckoutScreensCopy = {
     payingWithSavedDetails: 'Paying with your saved details',
     changeAction: 'Change',
   },
+  layout: {
+    payHeading: 'How would you like to pay?',
+    summaryTitle: 'Order summary',
+    total: 'Total',
+    totalDueCaption: (items) => `Total due · ${items} ${items === 1 ? 'item' : 'items'}`,
+    lineLabel: (quantity, name) => `${quantity}× ${name}`,
+    taxIdOnFileShort: 'CPF ✓',
+    changeAddress: 'Change address',
+    stepProgress: (step, steps, label) => `Step ${step} of ${steps} · ${label}`,
+  },
   error: {
     confirming: 'We are confirming your payment',
     cannotContinue: 'Could not continue',
@@ -148,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

@@ -43,6 +43,7 @@ export const PT_BR_CHECKOUT_SCREENS_COPY: CheckoutScreensCopy = {
     copyPasteTab: 'Copia e cola',
     qrTab: 'QR code',
     qrHeading: 'Pelo celular',
+    otherDeviceHeading: 'Ou pague de outro aparelho',
     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.',
@@ -88,6 +89,16 @@ export const PT_BR_CHECKOUT_SCREENS_COPY: CheckoutScreensCopy = {
     payingWithSavedDetails: 'Pagando com os seus dados salvos',
     changeAction: 'Alterar',
   },
+  layout: {
+    payHeading: 'Como você quer pagar?',
+    summaryTitle: 'Resumo do pedido',
+    total: 'Total',
+    totalDueCaption: (items) => `Total a pagar · ${items} ${items === 1 ? 'item' : 'itens'}`,
+    lineLabel: (quantity, name) => `${quantity}× ${name}`,
+    taxIdOnFileShort: 'CPF ✓',
+    changeAddress: 'Alterar endereço',
+    stepProgress: (step, steps, label) => `Etapa ${step} de ${steps} · ${label}`,
+  },
   error: {
     confirming: 'Estamos confirmando seu pagamento',
     cannotContinue: 'Não foi possível continuar',
@@ -134,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.',

package/src/index.ts

@@ -60,6 +60,7 @@ export {
   type CheckoutFlowProps,
 } from './components/checkout/checkout-flow';
 export type { BackActionEmphasis } from './components/checkout/payment-status-parts';
+export type { CheckoutDeliverySummary, CheckoutSummaryLine } from './components/checkout/payment-summary';
 
 // ---------------------------------------------------------------------------
 // The MOUNTED buyer checkout (FUT-741) and the checkout PIPELINE (FUT-1240).
@@ -126,6 +127,7 @@ export type {
   MethodPickerCopy,
   PayerSummaryCopy,
   PaymentErrorCopy,
+  PaymentLayoutCopy,
   PixAfterCopyCopy,
   PixPaneCopy,
   SettlingCopy,