@12-apps/payments-frontend 3.46.0 → 3.46.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/payments-frontend",
-  "version": "3.46.0",
+  "version": "3.46.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/list/bank-en-US.ts

@@ -20,6 +20,7 @@ export const EN_US_PIX_BANK_COPY: PixBankCopy = {
   other: "Another bank",
   notOpened: (bank) => `We couldn't open ${bank.name}. Is the app installed on this phone?`,
   retry: "Try again",
+  appHint: "Open your bank's app and paste the code in Pix copy and paste.",
   copied: "Pix code copied",
   copiedPick: "Pix code copied. Choose your bank.",
   copiedOpening: (bank) => `Pix code copied. Opening ${bank.name}…`,

package/src/components/checkout/list/bank-pt-BR.ts

@@ -20,6 +20,7 @@ export const PT_BR_PIX_BANK_COPY: PixBankCopy = {
   other: "Outro banco",
   notOpened: (bank) => `Não conseguimos abrir ${bank.the}${bank.name}. O app está instalado neste celular?`,
   retry: "Tentar de novo",
+  appHint: "Abra o app do seu banco e cole em Pix copia e cola.",
   copied: "Código Pix copiado",
   copiedPick: "Código Pix copiado. Escolha o banco.",
   copiedOpening: (bank) => `Código Pix copiado. Abrindo ${bank.the}${bank.name}…`,

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

@@ -311,7 +311,7 @@ export function ListPixFace(props: ListPixFaceProps & { mode: PaymentListMode })
   // On a phone the bank flow takes the copy: "Copiar e abrir o Nubank", the
   // toast, the app. Without it — or on a computer — the copy is today's.
   const onCopy = flow ? copies.copy : props.onCopy;
-  const banks = flow?.os ? { node: <PixBanks bank={flow.bank} state={flow.state} stale={stale} />, replacesChecklist: flow.state.chosen === null } : undefined;
+  const banks = flow?.os ? { node: <PixBanks bank={flow.bank} state={flow.state} stale={stale} />, replacesChecklist: true } : undefined;
   return (
     <Box data-testid="list-pix" sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}>
       <Text variant="body" size="md" weight="bold" as="p" style={{ margin: 0 }} data-testid="list-pix-title">

package/src/components/checkout/list/pix-banks.tsx

@@ -172,7 +172,23 @@ function Grid({ bank, state, stale }: { bank: CheckoutPixBank; state: PixBankSta
   );
 }
 
-/** The grid, or the bank being opened. */
+/** The one line under the bank being opened, where the checklist was (FUT-3612). */
+function AppHint({ text }: { text: string }): JSX.Element {
+  const { Text } = useCheckoutComponents();
+  return (
+    <Text variant="body" size="sm" color="secondary" as="p" style={{ margin: 0 }} data-testid="pix-bank-hint">
+      {text}
+    </Text>
+  );
+}
+
+/** The grid, or the bank being opened and the line that says what to do there. */
 export function PixBanks({ bank, state, stale }: { bank: CheckoutPixBank; state: PixBankState; stale: boolean }): JSX.Element {
-  return state.chosen ? <Opening bank={bank} state={state} chosen={state.chosen} /> : <Grid bank={bank} state={state} stale={stale} />;
+  if (!state.chosen) return <Grid bank={bank} state={state} stale={stale} />;
+  return (
+    <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
+      <Opening bank={bank} state={state} chosen={state.chosen} />
+      {bank.copy.appHint ? <AppHint text={bank.copy.appHint} /> : null}
+    </Box>
+  );
 }

package/src/components/checkout/list/types.ts

@@ -270,6 +270,11 @@ export interface PixBankCopy {
   notOpened: (bank: PixBankName) => string;
   /** "Tentar de novo". */
   retry: string;
+  /**
+   * The one line under the bank being opened, in place of the checklist —
+   * "Abra o app do seu banco e cole em Pix copia e cola." Absent ⇒ no line.
+   */
+  appHint?: string;
   /** The toasts. */
   copied: string;
   copiedPick: string;