@12-apps/payments-frontend 1.16.0 → 1.18.0

package/src/components/platform/ConnectEnvironmentCard.tsx

@@ -0,0 +1,175 @@
+'use client';
+
+import { Alert, Box, Button, Stack, Typography } from '@mui/material';
+import { useState, type ReactNode } from 'react';
+
+import type { ConnectApplicationStatus, PaymentEnvironment } from '@12-apps/payments-backend';
+
+/**
+ * One environment's Connect application (FUT-479, packaged by FUT-573).
+ * Sandbox and produção are SEPARATE applications with separate id/secret
+ * pairs, so each card stands on its own: configured or not, what PagBank says
+ * is registered, and whether the registered redirect URI matches the
+ * deployment's callback.
+ */
+
+const ENV_LABEL: Record<PaymentEnvironment, string> = {
+  SANDBOX: 'Sandbox',
+  PRODUCTION: 'Produção',
+};
+
+/** The bordered-card look every block of these screens shares. */
+export const CARD_SX = {
+  border: 1,
+  borderColor: 'divider',
+  borderRadius: 2,
+  p: 2,
+} as const;
+
+function Field({ label, children }: { label: string; children: ReactNode }): ReactNode {
+  return (
+    <Box
+      sx={{ display: 'flex', flexDirection: 'column', gap: 0.25, minWidth: 180, wordBreak: 'break-all' }}
+    >
+      <Typography variant="caption" color="text.secondary" fontWeight={600}>
+        {label}
+      </Typography>
+      <Typography component="span" variant="body2">
+        {children}
+      </Typography>
+    </Box>
+  );
+}
+
+/** The verdict the screen exists for: does the registered callback match ours? */
+function MismatchAlert({ status }: { status: ConnectApplicationStatus }): ReactNode {
+  if (status.application === null) return null;
+  if (status.redirectUriMismatch === true) {
+    return (
+      <Alert severity="error" data-testid={`connect-mismatch-${status.environment}`}>
+        A redirect_uri registrada no PagBank é diferente do callback desta instalação. O fluxo
+        de autorização OAuth falha silenciosamente até o cadastro ser corrigido no PagBank.
+      </Alert>
+    );
+  }
+  if (status.redirectUriMismatch === false) {
+    return (
+      <Alert severity="success" data-testid={`connect-match-${status.environment}`}>
+        A redirect_uri registrada confere com o callback desta instalação.
+      </Alert>
+    );
+  }
+  return (
+    <Alert severity="warning" data-testid={`connect-unknown-${status.environment}`}>
+      A resposta do PagBank não informou a redirect_uri — não foi possível comparar com o
+      callback desta instalação.
+    </Alert>
+  );
+}
+
+/** What PagBank reports as registered, plus whatever extra keys came back. */
+function ApplicationFields({ status }: { status: ConnectApplicationStatus }): ReactNode {
+  const app = status.application;
+  if (app === null) return null;
+  const extraKeys = Object.keys(app.extra);
+  return (
+    <Stack spacing={1.5}>
+      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2.5 }}>
+        <Field label="Nome (exibido ao lojista)">{app.name ?? '—'}</Field>
+        <Field label="Site">{app.site ?? '—'}</Field>
+        <Field label="Descrição">{app.description ?? '—'}</Field>
+        <Field label="Logo">{app.logo ?? '—'}</Field>
+        <Field label="redirect_uri registrada">{app.redirectUri ?? 'não informada'}</Field>
+      </Box>
+      {extraKeys.length > 0 ? (
+        <Box data-testid={`connect-extra-${status.environment}`}>
+          <Typography variant="caption" color="text.secondary" fontWeight={600}>
+            Outros campos retornados (schema não documentado)
+          </Typography>
+          <Box component="pre" sx={{ m: 0, fontSize: 12, overflowX: 'auto' }}>
+            {JSON.stringify(app.extra, null, 2)}
+          </Box>
+        </Box>
+      ) : null}
+    </Stack>
+  );
+}
+
+/**
+ * The collapsible "what feeds this environment" help. The variable names are
+ * the HOST's own configuration surface, so they arrive via `configVars`; with
+ * none provided the toggle is omitted entirely rather than opening on nothing.
+ */
+function ConfigHelp({
+  environment,
+  configVars,
+}: {
+  environment: PaymentEnvironment;
+  configVars?: string[];
+}): ReactNode {
+  const [open, setOpen] = useState(false);
+  if (!configVars || configVars.length === 0) return null;
+  return (
+    <Stack spacing={1} alignItems="flex-start">
+      <Button
+        variant="outlined"
+        size="small"
+        onClick={() => setOpen((value) => !value)}
+        data-testid={`connect-config-toggle-${environment}`}
+      >
+        {open ? 'Ocultar variáveis de ambiente' : 'Ver variáveis de ambiente'}
+      </Button>
+      {open ? (
+        <Box data-testid={`connect-config-details-${environment}`}>
+          <Typography variant="caption" color="text.secondary" component="p">
+            A aplicação deste ambiente é resolvida estritamente por estas variáveis (sem
+            fallback entre ambientes):
+          </Typography>
+          <Box component="ul" sx={{ m: 0, pl: 2.5 }}>
+            {configVars.map((name) => (
+              <Box component="li" key={name}>
+                <Box component="code" sx={{ fontFamily: 'monospace', fontSize: 12 }}>
+                  {name}
+                </Box>
+              </Box>
+            ))}
+          </Box>
+        </Box>
+      ) : null}
+    </Stack>
+  );
+}
+
+export function ConnectEnvironmentCard({
+  status,
+  configVars,
+}: {
+  status: ConnectApplicationStatus;
+  configVars?: string[];
+}): ReactNode {
+  return (
+    <Stack spacing={1.5} data-testid={`connect-env-${status.environment}`} sx={CARD_SX}>
+      <Box sx={{ display: 'flex', alignItems: 'baseline', gap: 1.5, wordBreak: 'break-all' }}>
+        <Typography variant="body2" fontWeight={600}>
+          {ENV_LABEL[status.environment]}
+        </Typography>
+        <Typography component="span" variant="caption" color="text.secondary">
+          {status.clientId !== null ? `client_id: ${status.clientId}` : ''}
+        </Typography>
+      </Box>
+      {!status.configured ? (
+        <Typography variant="body2" color="text.secondary">
+          Nenhuma aplicação configurada neste ambiente.
+        </Typography>
+      ) : null}
+      {status.error !== null ? (
+        <Alert severity="warning" data-testid={`connect-error-${status.environment}`}>
+          {status.error}
+        </Alert>
+      ) : null}
+      <MismatchAlert status={status} />
+      <ApplicationFields status={status} />
+      <ConfigHelp environment={status.environment} configVars={configVars} />
+    </Stack>
+  );
+}

package/src/components/platform/HomologacaoGuideCard.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import { Box, Link, Stack, Typography } from '@mui/material';
+import type { ReactNode } from 'react';
+
+import type { HomologacaoGuide } from '@12-apps/payments-backend';
+
+import { CARD_SX } from './ConnectEnvironmentCard';
+
+/**
+ * The paste-ready homologação answers (FUT-483, packaged by FUT-573) — the
+ * Pipefy form with every deployment-specific value already computed, and the
+ * services list naming BOTH Order and Connect.
+ */
+
+/** One paste-ready value, in a copyable code block. */
+function Answer({ label, children }: { label: string; children: ReactNode }): ReactNode {
+  return (
+    <Stack spacing={0.25}>
+      <Typography variant="caption" color="text.secondary" fontWeight={600}>
+        {label}
+      </Typography>
+      <Box
+        component="code"
+        sx={{
+          fontFamily: 'monospace',
+          fontSize: 12,
+          p: 1,
+          borderRadius: 1,
+          bgcolor: 'action.hover',
+          wordBreak: 'break-word',
+          whiteSpace: 'pre-wrap',
+        }}
+      >
+        {children}
+      </Box>
+    </Stack>
+  );
+}
+
+export function HomologacaoGuideCard({ guide }: { guide: HomologacaoGuide }): ReactNode {
+  return (
+    <Stack spacing={1.5} data-testid="homologacao-guide-card" sx={CARD_SX}>
+      <Typography variant="body2" fontWeight={600}>
+        Formulário de homologação — respostas prontas
+      </Typography>
+      <Typography variant="body2" color="text.secondary" component="p">
+        Abra o{' '}
+        <Link
+          href={guide.formUrl}
+          target="_blank"
+          rel="noreferrer"
+          data-testid="homologacao-form-link"
+        >
+          formulário oficial de homologação
+        </Link>{' '}
+        e preencha com os valores abaixo. Em paralelo, abra um chamado no{' '}
+        <Link href={guide.supportFormUrl} target="_blank" rel="noreferrer">
+          SIP — Suporte Integração PagBank
+        </Link>{' '}
+        citando o 403 ACCESS_DENIED — o que responder primeiro resolve a dúvida de o
+        formulário cobrir ou não o Connect. Documentação:{' '}
+        <Link href={guide.docsUrl} target="_blank" rel="noreferrer">
+          solicitar homologação
+        </Link>
+        .
+      </Typography>
+      <Answer label="Selecione o tipo de integração">{guide.integrationType}</Answer>
+      <Box data-testid="homologacao-services">
+        <Answer label="Selecione qual serviço você integrou (marque OS DOIS)">
+          {guide.services.join('\n')}
+        </Answer>
+      </Box>
+      <Answer label="Instruções de acesso ao seu ambiente (limite de 255 caracteres)">
+        {guide.accessInstructions}
+      </Answer>
+      <Answer label="URL do site">{guide.siteUrl}</Answer>
+      <Answer label="Detalhe quais produtos/serviços serão comercializados">
+        {guide.productsDescription}
+      </Answer>
+      <Typography variant="caption" color="text.secondary" component="p">
+        {guide.slaText}
+      </Typography>
+    </Stack>
+  );
+}

package/src/components/platform/HomologacaoOutcomeCard.tsx

@@ -0,0 +1,170 @@
+'use client';
+
+import { Alert, Box, Button, Chip, Stack, TextField, Typography } from '@mui/material';
+import { useState, type ReactNode } from 'react';
+
+import type { PlatformHomologationStatus } from '@12-apps/payments-backend';
+
+import { CARD_SX } from './ConnectEnvironmentCard';
+
+/**
+ * The homologação outcome record (FUT-483, packaged by FUT-573) — the durable
+ * answer to "is the platform homologated?". Absence of the record is the
+ * honest fourth state ("não solicitada"), which is why it is displayed but
+ * never offered as a choice.
+ */
+
+/**
+ * One provider's recorded outcome as the wire carries it — the backend's
+ * `PlatformHomologationRecord` after JSON serialization (dates as ISO
+ * strings).
+ */
+export interface PlatformHomologationRecordView {
+  provider: string;
+  status: PlatformHomologationStatus;
+  protocol: string | null;
+  notes: string | null;
+  submittedAt: string | null;
+  decidedAt: string | null;
+  updatedBy: string | null;
+  updatedAt: string;
+}
+
+/** What the outcome form submits — the whole record, replaced deliberately. */
+export interface HomologacaoSaveInput {
+  status: PlatformHomologationStatus;
+  protocol: string;
+  notes: string;
+}
+
+/** The host's save-mutation state, whatever machinery produces it. */
+export interface HomologacaoSaveState {
+  pending: boolean;
+  error: string | null;
+  success: boolean;
+}
+
+const STATUS_LABEL: Record<PlatformHomologationStatus, string> = {
+  SUBMITTED: 'Solicitada',
+  APPROVED: 'Aprovada',
+  REJECTED: 'Recusada',
+};
+
+const STATUS_COLOR: Record<PlatformHomologationStatus, 'warning' | 'success' | 'error'> = {
+  SUBMITTED: 'warning',
+  APPROVED: 'success',
+  REJECTED: 'error',
+};
+
+function StatusChip({ record }: { record: PlatformHomologationRecordView | null }): ReactNode {
+  if (record === null) {
+    return (
+      <Chip
+        label="Não solicitada"
+        size="small"
+        variant="outlined"
+        data-testid="homologacao-status-chip"
+      />
+    );
+  }
+  return (
+    <Chip
+      label={STATUS_LABEL[record.status]}
+      size="small"
+      color={STATUS_COLOR[record.status]}
+      data-testid="homologacao-status-chip"
+    />
+  );
+}
+
+const formatDateTime = (iso: string): string => new Date(iso).toLocaleString('pt-BR');
+
+function RecordTrail({ record }: { record: PlatformHomologationRecordView }): ReactNode {
+  return (
+    <Typography variant="caption" color="text.secondary" component="p">
+      {record.submittedAt ? `Solicitada em ${formatDateTime(record.submittedAt)}. ` : ''}
+      {record.decidedAt ? `Decidida em ${formatDateTime(record.decidedAt)}. ` : ''}
+      {record.updatedBy ? `Registrado por ${record.updatedBy}.` : ''}
+    </Typography>
+  );
+}
+
+interface HomologacaoOutcomeCardProps {
+  record: PlatformHomologationRecordView | null;
+  /** Record the outcome — the host PUTs it and refreshes `record`. */
+  onSave: (input: HomologacaoSaveInput) => void;
+  save: HomologacaoSaveState;
+}
+
+export function HomologacaoOutcomeCard(props: HomologacaoOutcomeCardProps): ReactNode {
+  const { record, onSave, save } = props;
+  const [status, setStatus] = useState<PlatformHomologationStatus>(record?.status ?? 'SUBMITTED');
+  const [protocol, setProtocol] = useState(record?.protocol ?? '');
+  const [notes, setNotes] = useState(record?.notes ?? '');
+
+  return (
+    <Stack spacing={1.5} data-testid="homologacao-outcome-card" sx={CARD_SX}>
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
+        <Typography variant="body2" fontWeight={600}>
+          Situação da homologação
+        </Typography>
+        <StatusChip record={record} />
+      </Box>
+      {record ? <RecordTrail record={record} /> : null}
+      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1.5, alignItems: 'flex-start' }}>
+        <TextField
+          select
+          size="small"
+          label="Situação"
+          value={status}
+          onChange={(event) => setStatus(event.target.value as PlatformHomologationStatus)}
+          slotProps={{
+            select: { native: true },
+            htmlInput: { 'data-testid': 'homologacao-status-select' },
+          }}
+        >
+          {(Object.keys(STATUS_LABEL) as PlatformHomologationStatus[]).map((key) => (
+            <option key={key} value={key}>
+              {STATUS_LABEL[key]}
+            </option>
+          ))}
+        </TextField>
+        <TextField
+          size="small"
+          aria-label="Protocolo"
+          placeholder="Protocolo (cartão do Pipefy / chamado)"
+          value={protocol}
+          onChange={(event) => setProtocol(event.target.value)}
+          slotProps={{ htmlInput: { 'data-testid': 'homologacao-protocol' } }}
+        />
+        <TextField
+          size="small"
+          aria-label="Observações"
+          placeholder="Observações (resposta do PagBank, contexto…)"
+          value={notes}
+          onChange={(event) => setNotes(event.target.value)}
+          slotProps={{ htmlInput: { 'data-testid': 'homologacao-notes' } }}
+        />
+        <Button
+          variant="contained"
+          size="small"
+          disabled={save.pending}
+          onClick={() => onSave({ status, protocol, notes })}
+          data-testid="homologacao-save"
+        >
+          Registrar
+        </Button>
+      </Box>
+      {save.error !== null ? (
+        <Alert severity="error" data-testid="homologacao-save-error">
+          {save.error}
+        </Alert>
+      ) : null}
+      {save.success ? (
+        <Alert severity="success" data-testid="homologacao-save-ok">
+          Registro atualizado.
+        </Alert>
+      ) : null}
+    </Stack>
+  );
+}

package/src/components/platform/PlatformHomologacao.tsx

@@ -0,0 +1,107 @@
+'use client';
+
+import { Alert, Box, Button, Stack, Typography } from '@mui/material';
+import { useState, type ReactNode } from 'react';
+
+import type { HomologacaoGuide } from '@12-apps/payments-backend';
+
+import { CARD_SX } from './ConnectEnvironmentCard';
+import { HomologacaoGuideCard } from './HomologacaoGuideCard';
+import {
+  HomologacaoOutcomeCard,
+  type HomologacaoSaveInput,
+  type HomologacaoSaveState,
+  type PlatformHomologationRecordView,
+} from './HomologacaoOutcomeCard';
+
+/**
+ * The PLATFORM's PagBank homologação screen (FUT-483, packaged by FUT-573).
+ *
+ * The platform is the direct integrator, so the homologação is the
+ * platform's, once — store owners are platform users and are exempt. The
+ * screen carries the three halves: the recorded outcome (so "is the platform
+ * homologated?" stops being a question for a person), the Pipefy form with
+ * paste-ready answers (BOTH services — Order and Connect), and the evidence
+ * generator running on the platform's own sandbox credentials.
+ *
+ * Dumb by design: data and mutations arrive via props from the host's own
+ * mounted routes (`platformHomologacaoGuide`, `createHomologationRecordService`
+ * and `buildPlatformHomologacaoAnexo` in `@12-apps/payments-backend`), so the
+ * host page is a thin mount.
+ */
+export interface PlatformHomologacaoProps {
+  /** The recorded outcome; null renders the honest "não solicitada". */
+  record: PlatformHomologationRecordView | null;
+  /** The paste-ready answers, computed by the host's backend. */
+  guide: HomologacaoGuide;
+  /** Record the outcome — the host PUTs it and refreshes `record`. */
+  onSaveRecord: (input: HomologacaoSaveInput) => void;
+  /** The host's save-mutation state. */
+  save: HomologacaoSaveState;
+  /**
+   * Generate AND deliver the evidence file (the host downloads what its anexo
+   * route answers). Reject with an Error whose message names the reason —
+   * e.g. the missing platform sandbox token and where to fix it — and the
+   * card shows it verbatim.
+   */
+  onGenerateAnexo: () => Promise<void>;
+}
+
+/** The evidence-file half: real sandbox calls, downloaded as a text file. */
+function AnexoCard({ onGenerate }: { onGenerate: () => Promise<void> }): ReactNode {
+  const [error, setError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  const generate = async (): Promise<void> => {
+    setBusy(true);
+    setError(null);
+    try {
+      await onGenerate();
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : 'Não foi possível gerar o anexo.');
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <Stack spacing={1.5} data-testid="homologacao-anexo-card" sx={CARD_SX}>
+      <Typography variant="body2" fontWeight={600}>
+        Anexo de evidências
+      </Typography>
+      <Typography variant="body2" color="text.secondary" component="p">
+        O formulário exige os requests e responses das requisições enviadas às APIs do
+        PagBank. O botão abaixo faz as chamadas reais no ambiente de testes (Sandbox) com o
+        token da própria plataforma — nada é cobrado de verdade — e baixa o arquivo pronto
+        para anexar, com o token redigido.
+      </Typography>
+      <Box>
+        <Button
+          variant="outlined"
+          size="small"
+          disabled={busy}
+          onClick={() => void generate()}
+          data-testid="homologacao-anexo-button"
+        >
+          Gerar anexo
+        </Button>
+      </Box>
+      {error !== null ? (
+        <Alert severity="error" data-testid="homologacao-anexo-error">
+          {error}
+        </Alert>
+      ) : null}
+    </Stack>
+  );
+}
+
+export function PlatformHomologacao(props: PlatformHomologacaoProps): ReactNode {
+  const { record, guide, onSaveRecord, save, onGenerateAnexo } = props;
+  return (
+    <Stack spacing={2} data-testid="platform-homologacao">
+      <HomologacaoOutcomeCard record={record} onSave={onSaveRecord} save={save} />
+      <HomologacaoGuideCard guide={guide} />
+      <AnexoCard onGenerate={onGenerateAnexo} />
+    </Stack>
+  );
+}

package/src/flows/create-payment-flows.tsx

@@ -96,6 +96,7 @@ function buildCheckout(
         providerConfig={config}
         tenantSlug={tenantSlug}
         confirmationExtra={runtime.config.confirmation?.extra}
+        validateApplePayMerchant={ports.validateApplePayMerchant}
       />
     );
   }

package/src/flows/types.ts

@@ -74,6 +74,13 @@ export interface CheckoutPorts {
    * some hosts must log or confirm the departure.
    */
   navigate?(url: string): void;
+  /**
+   * Apple Pay merchant validation (FUT-472): exchange the session's
+   * `validationURL` for an Apple merchant session, SERVER-SIDE — the merchant
+   * identity certificate must never reach a browser. Optional; without it the
+   * Apple Pay sheet cannot start and the card form remains the way to pay.
+   */
+  validateApplePayMerchant?(validationURL: string): Promise<unknown>;
   /** The remedy shown on the no-provider screen, AND the host's veto. */
   useAvailability?(): CheckoutAvailability;
 }

package/src/index.ts

@@ -84,6 +84,29 @@ export {
 export { type CheckoutHostPorts } from './components/checkout/use-checkout-controller';
 export { PaymentsUnavailable } from './components/checkout/payments-unavailable';
 export { fetchCheckoutConfig } from './components/checkout/client';
+// ---------------------------------------------------------------------------
+// Digital wallets (FUT-471/472) — the Google-branded button and the capability
+// read it is gated on. `CheckoutFlow` wires these automatically; they are
+// exported for hosts composing their own pixels.
+// ---------------------------------------------------------------------------
+export {
+  GooglePayButton,
+  type GooglePayApi,
+  type GooglePayButtonProps,
+  type GooglePaymentData,
+  type GooglePaymentsClient,
+  type GooglePayGatewayParams,
+} from './components/checkout/google-pay-button';
+export {
+  ApplePayButton,
+  applePaySupported,
+  APPLE_PAY_SUPPORTED_NETWORKS,
+  type ApplePayButtonProps,
+  type ApplePayPaymentRequest,
+  type ApplePaySessionClass,
+  type ApplePaySessionLike,
+} from './components/checkout/apple-pay-button';
+export { applePayDeclared, googlePayConfig } from './components/checkout/method-capability';
 export {
   CheckoutComponentsProvider,
   type CheckoutActionBarProps,
@@ -103,11 +126,13 @@ export {
   type BuyerContact,
   type BuyerField,
   type BuyerInfo,
+  type ChargeWalletInput,
   type CheckoutChainLink,
   type CheckoutCustomerField,
   type CheckoutError,
   type CheckoutOrder,
   type CheckoutProviderConfig,
+  type CheckoutWalletType,
   type ComandaCheckout,
   type CreateOrderRequest,
   type CreateOrderResult,
@@ -169,6 +194,28 @@ export {
   type PaymentProviderSettingsProps,
 } from './components/PaymentProviderSettings';
 
+// ---------------------------------------------------------------------------
+// The PLATFORM operations screens (FUT-479 / FUT-483, packaged by FUT-573) —
+// the Connect-application consult and the homologação, as dumb components a
+// host page mounts with data + callbacks from its own routes. Their backend
+// halves live in `@12-apps/payments-backend` (`consultConnectApplications`,
+// `platformHomologacaoGuide`, `createHomologationRecordService`,
+// `buildPlatformHomologacaoAnexo`).
+// ---------------------------------------------------------------------------
+export {
+  ConnectApplicationPanel,
+  type ConnectApplicationPanelProps,
+} from './components/platform/ConnectApplicationPanel';
+export {
+  PlatformHomologacao,
+  type PlatformHomologacaoProps,
+} from './components/platform/PlatformHomologacao';
+export {
+  type HomologacaoSaveInput,
+  type HomologacaoSaveState,
+  type PlatformHomologationRecordView,
+} from './components/platform/HomologacaoOutcomeCard';
+
 /**
  * Re-exported because it appears in the `prepareConnect` prop a host must
  * implement: without it the host could not type its own callback without