@12-apps/payments-frontend 1.20.2 → 1.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/payments-frontend",
-  "version": "1.20.2",
+  "version": "1.21.0",
   "type": "module",
   "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.",
   "exports": {
@@ -17,7 +17,7 @@
     "storybook:build": "storybook build"
   },
   "dependencies": {
-    "@12-apps/payments-backend": "^2.0.2",
+    "@12-apps/payments-backend": "^2.1.0",
     "react-qr-code": "^2.2.0"
   },
   "peerDependencies": {

package/src/components/ConnectionProbe.tsx

@@ -7,7 +7,7 @@ import type { MaskedProviderConfig, ProviderDescriptor } from '@12-apps/payments
 
 import type { PaymentsSettingsClient } from '../client';
 import { isConnected } from './connection-state';
-import { ProbeAlert, type VerifyProbe } from './CredentialFormAlerts';
+import { ProbeAlert, ProbeChecklist, type VerifyProbe } from './CredentialFormAlerts';
 
 /**
  * "Testar conexão" for a store whose connection is a GRANT, not a form.
@@ -73,6 +73,9 @@ export function ConnectionProbe({
       </Button>
       {error ? <Alert severity="error">{error}</Alert> : null}
       {probe ? <ProbeAlert probe={probe} busy={busy} onRetry={() => void verify()} /> : null}
+      {/* Shown on a pass too — see `ProbeChecklist`: what a green probe did
+          NOT check is the half an owner cannot otherwise find out. */}
+      {probe ? <ProbeChecklist probe={probe} /> : null}
     </Stack>
   );
 }

package/src/components/CredentialFormAlerts.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Alert, Button, CircularProgress, Stack, Typography } from '@mui/material';
+import { Alert, Box, Button, CircularProgress, Stack, Typography } from '@mui/material';
 
 import type { VerifiedProviderConfig } from '@12-apps/payments-backend';
 
@@ -78,6 +78,72 @@ export function ProbeAlert({
   );
 }
 
+/**
+ * Off-screen but read aloud. Inline rather than `@mui/utils`'s `visuallyHidden`,
+ * which is not a dependency of this package — one style object is not worth a
+ * new one on a package that ships to every host.
+ */
+const SCREEN_READER_ONLY = {
+  position: 'absolute',
+  width: 1,
+  height: 1,
+  overflow: 'hidden',
+  clip: 'rect(0 0 0 0)',
+  whiteSpace: 'nowrap',
+} as const;
+
+/** How each verdict reads at a glance — the mark, and what it is called. */
+const CHECK_MARKS = {
+  PASS: { mark: '✓', color: 'success.main', label: 'Verificado' },
+  FAIL: { mark: '✕', color: 'error.main', label: 'Corrigir' },
+  UNCHECKED: { mark: '–', color: 'text.secondary', label: 'Não verificável' },
+} as const;
+
+/**
+ * What the probe established, credential by credential (FUT-796).
+ *
+ * Rendered on a PASS as well as a failure, which is the point. One boolean over
+ * a four-field form told an owner their connection was fine when only the
+ * secret key had been checked — the publishable key and the signing secret
+ * failed later, at a buyer's card and at a payment that never confirmed, where
+ * neither looks like a credential problem.
+ *
+ * The `UNCHECKED` row is the one that earns this component. It says a
+ * credential could NOT be verified and why, which a green tick would deny and a
+ * red cross would misattribute — and it tells the owner precisely which part of
+ * a passing result not to lean on.
+ */
+export function ProbeChecklist({ probe }: { probe: VerifyProbe }) {
+  if (!probe.checks?.length) return null;
+  return (
+    <Stack spacing={0.5} data-testid="payments-probe-checks">
+      {probe.checks.map((check) => {
+        const { mark, color, label } = CHECK_MARKS[check.status];
+        return (
+          <Stack
+            key={check.key}
+            direction="row"
+            spacing={1}
+            alignItems="flex-start"
+            data-testid={`payments-probe-check-${check.key}`}
+            data-status={check.status}
+          >
+            <Typography component="span" sx={{ color, fontWeight: 700, lineHeight: 1.5 }}>
+              <span aria-hidden>{mark}</span>
+              {/* The mark alone is colour-only information; the state has to be
+                  readable to anyone not seeing the colour. */}
+              <Box component="span" sx={SCREEN_READER_ONLY}>{` ${label}: `}</Box>
+            </Typography>
+            <Typography variant="body2" color="text.secondary">
+              {check.message}
+            </Typography>
+          </Stack>
+        );
+      })}
+    </Stack>
+  );
+}
+
 /**
  * Changing the tag on a store that has ALREADY proved it can receive.
  *

package/src/components/ProviderCredentialForm.tsx

@@ -25,6 +25,7 @@ import {
 import {
   FormActions,
   ProbeAlert,
+  ProbeChecklist,
   ReverifyWarning,
   type VerifyProbe,
 } from './CredentialFormAlerts';
@@ -375,6 +376,11 @@ export function ProviderForm(props: ProviderFormProps) {
       {form.probe ? (
         <ProbeAlert probe={form.probe} busy={form.busy !== null} onRetry={form.verify} />
       ) : null}
+      {/* The pasted-key path, and the one FUT-796 is about: this form is where
+          the credentials the probe reports on were typed, so its findings
+          belong beside them — including on a pass, where the unchecked rows are
+          the only place an owner learns what was NOT established. */}
+      {form.probe ? <ProbeChecklist probe={form.probe} /> : null}
 
       <ConfirmCredentialSave
         pending={form.pending}