@12-apps/payments-frontend 3.47.1 → 3.47.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/payments-frontend",
-  "version": "3.47.1",
+  "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/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.`,