@12-apps/payments-frontend 3.47.0 → 3.47.2

package/package.json

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

@@ -300,6 +300,24 @@ function noPick(): void {
   // No bank flow: nothing to remember.
 }
 
+/**
+ * The way to the bank app on the after-copy face, or `undefined` off a phone.
+ * With a bank chosen, one line says what to do there, in place of the
+ * checklist (FUT-3612) — unless the STORE confirms this Pix: its checklist's
+ * "A loja confirma o pagamento — até 14:32" is then the only place that says
+ * who confirms and by when, so it stays — under the six banks too. No line in
+ * the host's copy: the checklist stays too. Otherwise the six banks replace it.
+ */
+function bankFace(flow: BankFlow | null, pix: PixCharge, stale: boolean): { node: JSX.Element; replacesChecklist: boolean } | undefined {
+  if (!flow?.os) return undefined;
+  const storeConfirms = pix.confirmation === "MANUAL";
+  const oneLine = Boolean(flow.bank.copy.appHint) && !storeConfirms;
+  return {
+    node: <PixBanks bank={flow.bank} state={flow.state} stale={stale} hint={oneLine} />,
+    replacesChecklist: oneLine || (flow.state.chosen === null && !storeConfirms),
+  };
+}
+
 /** Both faces of the list's Pix, and the bar under them. */
 export function ListPixFace(props: ListPixFaceProps & { mode: PaymentListMode }): JSX.Element {
   const { Text } = useCheckoutComponents();
@@ -311,7 +329,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: true } : undefined;
+  const banks = bankFace(flow, pix, stale);
   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

@@ -182,13 +182,16 @@ function AppHint({ text }: { text: string }): JSX.Element {
   );
 }
 
-/** 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 {
+/**
+ * The grid, or the bank being opened — with, when `hint`, the line that says
+ * what to do there (the face then drops its checklist; see `ListPixFace`).
+ */
+export function PixBanks({ bank, state, stale, hint }: { bank: CheckoutPixBank; state: PixBankState; stale: boolean; hint: boolean }): JSX.Element {
   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}
+      {hint && bank.copy.appHint ? <AppHint text={bank.copy.appHint} /> : null}
     </Box>
   );
 }

package/src/components/checkout/pix-after-copy.tsx

@@ -126,12 +126,28 @@ interface PixAfterCopyProps {
   /**
    * The way to the bank app, on a phone (FUT-3612): drawn where the heading
    * was — the toast already said the code was copied and the bar says what it
-   * waits for — and, while it is the six banks, in place of the checklist.
+   * waits for — and, when `replacesChecklist`, in place of the checklist. The
+   * column then sits as tight as the prototype's (8px).
    */
   banks?: { node: ReactNode; replacesChecklist: boolean };
 }
 
-/** The narrow layout's two secondaries side by side; wide, the card link joins the row. */
+/**
+ * The pair's leading icons. On a phone's card (the pair under 360px) they go,
+ * as in the prototype: beside the icon, "Copiar de novo" took two lines in its
+ * 159px column ("novo" alone). A computer's column is wider and keeps them.
+ * `button` in the selector outranks the library Button's own icon rule, which
+ * otherwise wins or loses on style insertion order.
+ */
+const ICON_SLOT = "& button .MuiButton-startIcon, & button .MuiButton-start";
+/** The pair's own width, never the pane's. */
+const ACTIONS_NARROW = "@container pixactions (max-width: 359.95px)";
+
+/**
+ * The narrow layout's two secondaries side by side — 140px columns, so the pair
+ * fits a 390px phone's card (two of 180px did not, and stacked) and stacks only
+ * at 320 — wide, the card link joins the row.
+ */
 function Actions({ justCopied, onCopyAgain, onShowQr, onPreferCard }: Pick<PixAfterCopyProps, "justCopied" | "onCopyAgain" | "onShowQr" | "onPreferCard">): JSX.Element {
   const { Button } = useCheckoutComponents();
   const copy = useCheckoutCopy().screens.pix;
@@ -139,7 +155,7 @@ function Actions({ justCopied, onCopyAgain, onShowQr, onPreferCard }: Pick<PixAf
   // (FUT-3535): copying it again would only hand the buyer the wrong amount.
   const stale = usePaymentStale();
   return (
-    <Box sx={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))", gap: 1.25, "& button": { minHeight: 48, height: "100%" }, "& button, & button *": { fontWeight: 700 }, [PIX_WIDE]: { display: "flex", flexWrap: "wrap", alignItems: "center", gap: 1.5, "& button": { height: "auto" } } }}>
+    <Box sx={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(140px, 1fr))", gap: 1.25, "& button": { minHeight: 48, height: "100%" }, "& button, & button *": { fontWeight: 700 }, containerType: "inline-size", containerName: "pixactions", [ACTIONS_NARROW]: { [ICON_SLOT]: { display: "none" } }, [PIX_WIDE]: { display: "flex", flexWrap: "wrap", alignItems: "center", gap: 1.5, "& button": { height: "auto" } } }}>
       {/* Narrow, a grid cell; wide, its own width beside the link (the prototype's row). */}
       <Box sx={{ minWidth: 0, [PIX_WIDE]: { flex: "none", "& > *": { width: "auto" } } }}>
         <Button variant="outline" color="neutral" size="md" fullWidth icon={<ContentCopyIcon fontSize="small" />} onClick={onCopyAgain} disabled={stale} dataTestId="pix-copy-again">
@@ -169,7 +185,7 @@ export function PixAfterCopy(props: PixAfterCopyProps): JSX.Element {
   const stale = usePaymentStale();
   return (
     <Box data-testid="pix-after-copy" sx={{ display: "flex", flexWrap: "wrap", gap: 4, alignItems: "flex-start" }}>
-      <Box sx={{ flex: "999 1 420px", minWidth: 0, display: "flex", flexDirection: "column", gap: 2.5 }}>
+      <Box sx={{ flex: "999 1 420px", minWidth: 0, display: "flex", flexDirection: "column", gap: props.banks?.replacesChecklist ? 1 : 2.5 }}>
         {props.banks ? props.banks.node : <Heading words={words} totalLabel={totalLabel} />}
         {props.banks?.replacesChecklist ? null : <Checklist words={words} deadline={deadline} />}
         <Actions {...props} />

package/src/components/platform/HomologacaoEvidenceWallets.tsx

@@ -25,7 +25,7 @@ import {
   type GooglePaymentData,
   type GooglePaymentsClient,
 } from '../checkout/google-pay-button';
-import type { HomologacaoEvidenceWalletsCopy } from './copy';
+import type { AppleAbsence, HomologacaoEvidenceWalletsCopy } from './copy';
 import { usePlatformCopy } from './copy-context';
 
 /**
@@ -171,9 +171,10 @@ function notOffered(wallet: EvidenceWallet, input: EvidenceWalletsInput, googleR
 }
 
 /** Why Apple Pay has no button on a screen whose host carries wallets — null when it has one, or no wallets at all. */
-function appleAbsence(input: EvidenceWalletsInput, offered: boolean): BrowserWalletFailure | null {
+function appleAbsence(input: EvidenceWalletsInput, offered: boolean): AppleAbsence | null {
   if (offered || !input.config) return null;
-  return notOffered('APPLE_PAY', input, false)?.failure ?? null;
+  const failure = notOffered('APPLE_PAY', input, false)?.failure;
+  return failure === 'NOT_CONFIGURED' || failure === 'NOT_AVAILABLE' || failure === 'MERCHANT_VALIDATION_FAILED' ? failure : null;
 }
 
 /** The wallet step's state: the sheets' answers, the presses that open them, and what phase 2 gets. */
@@ -216,7 +217,7 @@ function GooglePayMount({ client, onPress, locale }: { client: GooglePaymentsCli
     element.replaceChildren(client.createButton({ onClick: () => latest.current(), buttonSizeMode: 'fill', buttonLocale: locale }));
     return () => element.replaceChildren();
   }, [client, locale]);
-  return <Box ref={mount} data-testid="evidence-google-pay" sx={{ minHeight: 40, width: 240, '& > *': { width: '100%' } }} />;
+  return <Box ref={mount} data-testid="evidence-google-pay" sx={{ minHeight: 40, width: { xs: '100%', sm: 240 }, '& > *': { width: '100%' } }} />;
 }
 
 /** Apple's button: Safari draws it (`-apple-pay-button`); elsewhere the name on a black pill. */
@@ -231,7 +232,7 @@ function ApplePayPress({ label, onPress }: { label: string; onPress: () => void
       sx={{
         WebkitAppearance: '-apple-pay-button',
         height: 40,
-        width: 240,
+        width: { xs: '100%', sm: 240 },
         border: 0,
         borderRadius: 1,
         cursor: 'pointer',
@@ -270,20 +271,22 @@ export function EvidenceWalletBlock({ wallets }: { wallets: EvidenceWallets }):
     return result ? [result] : [];
   });
   return (
-    <Stack spacing={1} data-testid="evidence-wallets">
+    <Stack spacing={1} data-testid="evidence-wallets" sx={{ maxWidth: '72ch' }}>
       <Typography variant="body2" fontWeight={600}>
         {copy.heading}
       </Typography>
-      <Typography variant="caption" component="p" color="text.secondary">
-        {copy.hint}
-      </Typography>
+      {wallets.google || wallets.apple ? (
+        <Typography variant="caption" component="p" color="text.secondary">
+          {copy.hint}
+        </Typography>
+      ) : null}
       <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1}>
         {wallets.google ? (
           <GooglePayMount client={wallets.google.client} onPress={wallets.google.press} locale={copy.googlePayButtonLocale} />
         ) : null}
         {wallets.apple ? <ApplePayPress label={copy.applePayButton} onPress={wallets.apple.press} /> : null}
       </Stack>
-      {wallets.appleAbsent === 'NOT_CONFIGURED' || wallets.appleAbsent === 'NOT_AVAILABLE' ? (
+      {wallets.appleAbsent ? (
         <Typography variant="caption" component="p" color="text.secondary" data-testid="evidence-apple-pay-absent">
           {copy.applePayAbsent[wallets.appleAbsent]}
         </Typography>

package/src/components/platform/copy.ts

@@ -156,6 +156,9 @@ export interface HomologacaoEvidenceCardCopy {
   wallets: HomologacaoEvidenceWalletsCopy;
 }
 
+/** Why Apple Pay has no button on the evidence card (FUT-3755). */
+export type AppleAbsence = 'NOT_CONFIGURED' | 'NOT_AVAILABLE' | 'MERCHANT_VALIDATION_FAILED';
+
 /** The Google Pay / Apple Pay step of the evidence card (FUT-3755). */
 export interface HomologacaoEvidenceWalletsCopy {
   heading: string;
@@ -174,7 +177,7 @@ export interface HomologacaoEvidenceWalletsCopy {
   /** Apple Pay started and failed. */
   applePayCannotComplete: string;
   /** Why Apple Pay has no button here: the platform has no Apple Pay identity yet, or this browser has no sheet. */
-  applePayAbsent: { NOT_CONFIGURED: string; NOT_AVAILABLE: string };
+  applePayAbsent: Record<AppleAbsence, string>;
   /** A wallet holds its token: `card` is the network and last four the wallet showed — never the token. */
   ready: (wallet: string, card: string) => string;
   /** The sheet answered no token; pressing again retries. */

package/src/components/platform/en-US.ts

@@ -147,9 +147,7 @@ export const EN_US_PLATFORM_HOMOLOGACAO_COPY: PlatformHomologacaoCopy = {
     wallets: {
       heading: 'Digital wallets (before generating)',
       names: { GOOGLE_PAY: 'Google Pay', APPLE_PAY: 'Apple Pay' },
-      hint:
-        'Google Pay and Apple Pay open their own sheet, and only on your tap. Tap each one before generating the file; ' +
-        "without it, the wallets' sections stay pending. Test only: nothing is charged.",
+      hint: "Tap each wallet before generating; without it, that wallet's section stays pending.",
       googlePayButtonLocale: 'en',
       applePayButton: 'Pay with Apple Pay',
       applePaySheetTotal: 'Homologation test',
@@ -158,6 +156,7 @@ export const EN_US_PLATFORM_HOMOLOGACAO_COPY: PlatformHomologacaoCopy = {
       applePayAbsent: {
         NOT_CONFIGURED: 'Apple Pay: waiting for the Apple Developer account. Its section stays pending.',
         NOT_AVAILABLE: 'Apple Pay: open this screen in Safari on an iPhone or Mac to test it.',
+        MERCHANT_VALIDATION_FAILED: "Apple Pay: the merchant validation is not set up. Its section stays pending.",
       },
       ready: (wallet, card) => `${wallet} ready${card ? ` — ${card}` : ''}. It will be used when the file is generated.`,
       failed: (wallet) => `${wallet} returned no token. Tap again to retry.`,

package/src/components/platform/pt-BR.ts

@@ -131,9 +131,7 @@ export const PT_BR_PLATFORM_HOMOLOGACAO_COPY: PlatformHomologacaoCopy = {
     wallets: {
       heading: 'Carteiras digitais (antes de gerar)',
       names: { GOOGLE_PAY: 'Google Pay', APPLE_PAY: 'Apple Pay' },
-      hint:
-        'O Google Pay e o Apple Pay abrem a própria folha e só com o seu toque. Toque em cada um antes de gerar o arquivo; ' +
-        'sem isso, as seções das carteiras ficam pendentes. Somente teste: nada é cobrado.',
+      hint: 'Toque em cada carteira antes de gerar; sem isso, a seção dela fica pendente.',
       googlePayButtonLocale: 'pt',
       applePayButton: 'Pagar com Apple Pay',
       applePaySheetTotal: 'Teste de homologação',
@@ -142,6 +140,7 @@ export const PT_BR_PLATFORM_HOMOLOGACAO_COPY: PlatformHomologacaoCopy = {
       applePayAbsent: {
         NOT_CONFIGURED: 'Apple Pay: aguardando a conta Apple Developer. A seção fica pendente.',
         NOT_AVAILABLE: 'Apple Pay: abra esta tela no Safari de um iPhone ou Mac para testar.',
+        MERCHANT_VALIDATION_FAILED: 'Apple Pay: a validação do comerciante não está configurada. A seção fica pendente.',
       },
       ready: (wallet, card) => `${wallet} pronto${card ? ` — ${card}` : ''}. Será usado ao gerar o arquivo.`,
       failed: (wallet) => `O ${wallet} não devolveu o token. Toque de novo para tentar.`,