@12-apps/payments-frontend 1.17.0 → 1.19.0

package/src/components/checkout/wallet-pane.tsx

@@ -1,9 +1,15 @@
 import { Box, Divider } from "@mui/material";
 import { useState, type JSX } from "react";
 
+import { ApplePayButton, applePaySupported } from "./apple-pay-button";
 import { CardView } from "./card-view";
 import { GooglePayButton } from "./google-pay-button";
-import { cardChain, cardTokenization, googlePayConfig } from "./method-capability";
+import {
+  applePayDeclared,
+  cardChain,
+  cardTokenization,
+  googlePayConfig,
+} from "./method-capability";
 import type { ProviderCheckoutScreenProps } from "./providers/types";
 import { useCheckoutComponents } from "./ui";
 import { useWalletCharge, type WalletCharge } from "./use-wallet-charge";
@@ -13,9 +19,9 @@ import { useWalletCharge, type WalletCharge } from "./use-wallet-charge";
  *
  * A wallet is not a fourth method — it is another way of producing the CARD
  * instrument — so it renders INSIDE the card pane, above the form, and only
- * when the chain head both declared the wallet capability and published the
- * parameters the browser needs (`googlePayConfig`, fail-closed). A store with
- * no wallet renders exactly the card view it always did.
+ * when the chain head declared the wallet capability (both gates fail closed:
+ * `googlePayConfig` / `applePayDeclared` + the device's own support). A store
+ * with no wallet renders exactly the card view it always did.
  *
  * One pane owns BOTH submit paths' visibility so they cannot invite a double
  * payment: while a wallet charge is in flight or being confirmed, the card
@@ -23,6 +29,11 @@ import { useWalletCharge, type WalletCharge } from "./use-wallet-charge";
  * rule `card-view.tsx` applies to its own pay bar, one level up.
  */
 
+/** The screen props narrowed to a raised order — what this pane requires. */
+type WalletPaneProps = ProviderCheckoutScreenProps & {
+  order: NonNullable<ProviderCheckoutScreenProps["order"]>;
+};
+
 /** Post-submit confirmation, error > timeout > spinner — the card view's order. */
 function WalletProcessing({ wallet }: { wallet: WalletCharge }): JSX.Element {
   const { Alert, LoadingState } = useCheckoutComponents();
@@ -79,48 +90,63 @@ function WalletUnresolved({ message }: { message: string }): JSX.Element {
 
 /**
  * The wallet buttons the store's chain head supports, or null when there are
- * none. Split out so the pane below stays under the function-size gate.
+ * none to offer. The divider renders only once SOMETHING sits above it: Apple
+ * availability is known synchronously (feature-detect), Google's arrives when
+ * `isReadyToPay` approves (`onReady`) — a bare "ou pague com cartão" with
+ * nothing above it would caption an empty space.
  */
 function WalletButtons({
   props,
   wallet,
   onSheetError,
 }: {
-  props: ProviderCheckoutScreenProps & { order: NonNullable<ProviderCheckoutScreenProps["order"]> };
+  props: WalletPaneProps;
   wallet: WalletCharge;
   onSheetError: (message: string) => void;
 }): JSX.Element | null {
   const { Text } = useCheckoutComponents();
+  const [googleReady, setGoogleReady] = useState(false);
   const googlePay = googlePayConfig(props.config);
-  if (!googlePay) return null;
+  const applePay = applePayDeclared(props.config) && applePaySupported();
+  if (!googlePay && !applePay) return null;
   return (
     <Box sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}>
-      <GooglePayButton
-        order={props.order}
-        params={googlePay}
-        onKey={(key) => void wallet.payWithKey("GOOGLE_PAY", key)}
-        onError={onSheetError}
-      />
-      <Divider>
-        <Text variant="caption" size="xs" color="secondary" as="span">
-          ou pague com cartão
-        </Text>
-      </Divider>
+      {applePay ? (
+        <ApplePayButton
+          order={props.order}
+          onAuthorized={(key) => wallet.payWithKey("APPLE_PAY", key)}
+          onError={onSheetError}
+          validateMerchant={props.validateApplePayMerchant}
+        />
+      ) : null}
+      {googlePay ? (
+        <GooglePayButton
+          order={props.order}
+          params={googlePay}
+          onKey={(key) => void wallet.payWithKey("GOOGLE_PAY", key)}
+          onError={onSheetError}
+          onReady={() => setGoogleReady(true)}
+        />
+      ) : null}
+      {applePay || googleReady ? (
+        <Divider>
+          <Text variant="caption" size="xs" color="secondary" as="span">
+            ou pague com cartão
+          </Text>
+        </Divider>
+      ) : null}
     </Box>
   );
 }
 
 /** The CARD pane: wallet fast lane above, the card form below. */
-export function WalletCardPane(
-  props: ProviderCheckoutScreenProps & {
-    order: NonNullable<ProviderCheckoutScreenProps["order"]>;
-  },
-): JSX.Element {
+export function WalletCardPane(props: WalletPaneProps): JSX.Element {
   const { Alert } = useCheckoutComponents();
   const { order, buyer, config, tenantSlug, onResolved, pollIntervalMs } = props;
   const wallet = useWalletCharge(order, buyer, onResolved, pollIntervalMs);
   // A sheet failure the wallet reported before any charge existed (pay.js
-  // refused, the sheet errored) — shown beside the form, which stays usable.
+  // refused, merchant validation unavailable, the sheet errored) — shown
+  // beside the form, which stays usable.
   const [sheetError, setSheetError] = useState<string | null>(null);
 
   if (wallet.phase !== "idle") return <WalletProcessing wallet={wallet} />;

package/src/components/platform/ConnectApplicationPanel.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import { Box, Button, Stack, Typography } from '@mui/material';
+import type { ReactNode } from 'react';
+
+import type { ConnectApplicationReport, PaymentEnvironment } from '@12-apps/payments-backend';
+
+import { CARD_SX, ConnectEnvironmentCard } from './ConnectEnvironmentCard';
+
+/**
+ * The platform's PagBank Connect application, per environment (FUT-479,
+ * packaged by FUT-573).
+ *
+ * The application every store authorizes against is registered by hand, so
+ * nothing in the product could say what is registered, in which environment,
+ * or with which redirect URI. This panel is the consult
+ * (`GET /oauth2/application/{client_id}`) made permanent: per environment —
+ * sandbox and produção are separate applications — it shows what PagBank has
+ * on file, including the exact redirect_uri, and flags a mismatch against the
+ * callback the deployment actually uses (a mismatch is a silent OAuth
+ * failure). Read-only: creating an application stays a deliberate manual act.
+ *
+ * Dumb by design: the HOST fetches the report from its own mounted route
+ * (`consultConnectApplications` in `@12-apps/payments-backend`) and passes it
+ * here, so the host page is a thin mount — page chrome, auth and loading
+ * belong to the host; the screen itself lives in this package.
+ */
+export interface ConnectApplicationPanelProps {
+  /** The consult report, as the backend's `consultConnectApplications` answers. */
+  report: ConnectApplicationReport;
+  /** Re-run the consult. Omitted, the refresh button is not rendered. */
+  onRefresh?: () => void;
+  /**
+   * Which host-side variables feed one environment's application — the host's
+   * own configuration surface, rendered as a collapsible per-environment help
+   * when provided.
+   */
+  configVarsFor?: (environment: PaymentEnvironment) => string[];
+}
+
+export function ConnectApplicationPanel(props: ConnectApplicationPanelProps): ReactNode {
+  const { report, onRefresh, configVarsFor } = props;
+  return (
+    <Stack spacing={2} data-testid="connect-application-panel">
+      <Stack spacing={0.5} data-testid="connect-expected-redirect" sx={CARD_SX}>
+        <Typography variant="caption" color="text.secondary" fontWeight={600}>
+          Callback desta instalação (o valor que precisa estar registrado)
+        </Typography>
+        <Box
+          component="code"
+          sx={{ fontFamily: 'monospace', fontSize: 13, wordBreak: 'break-all' }}
+        >
+          {report.expectedRedirectUri}
+        </Box>
+      </Stack>
+      {report.environments.map((status) => (
+        <ConnectEnvironmentCard
+          key={status.environment}
+          status={status}
+          configVars={configVarsFor?.(status.environment)}
+        />
+      ))}
+      {onRefresh ? (
+        <Box>
+          <Button
+            variant="outlined"
+            size="small"
+            onClick={() => onRefresh()}
+            data-testid="connect-refresh"
+          >
+            Consultar novamente
+          </Button>
+        </Box>
+      ) : null}
+    </Stack>
+  );
+}

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>
+  );
+}