@12-apps/payments-frontend 1.20.1 → 1.21.0

package/package.json

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

package/src/components/SetupGuideSection.tsx

@@ -26,6 +26,18 @@ import { ProviderSetupGuide } from './ProviderSetupGuide';
  */
 export const CHECKOUT_CONFIRM_ACTION = 'checkout-integrado-confirmado';
 
+/**
+ * The confirm button's copy when a section does not author its own.
+ *
+ * InfinitePay's wording, because it was the only confirmable guide when this
+ * was a constant — and a constant is what made it wrong everywhere else: Stripe
+ * and Stone both own a step no API can report, and neither of them has a
+ * "Checkout Integrado" to have enabled. Sections say what they are asking about
+ * via `SetupSection.confirmLabel`; this fallback keeps InfinitePay's rendered
+ * guide identical.
+ */
+const CONFIRM_LABEL_FALLBACK = 'Já habilitei o Checkout Integrado';
+
 /** Does this section end in a question only the owner can answer? */
 function isConfirmable(section: SetupSection): boolean {
   return section.steps.some((step) => step.action === CHECKOUT_CONFIRM_ACTION);
@@ -133,6 +145,28 @@ function ConfirmedRow({ section, onReopen }: { section: SetupSection; onReopen:
   );
 }
 
+/**
+ * Everything the owner's confirmation contributes to this screen: the button's
+ * copy, and the one-line row the step collapses into once the walkthrough is
+ * past it.
+ *
+ * One function because both read the SAME section — the one that ASKS, which is
+ * not necessarily the one that is open. Deriving them apart is how a screen
+ * ends up captioning one step and collapsing another.
+ */
+function confirmationOf(
+  guide: Guide,
+  { stage, confirmed, editing }: { stage: number; confirmed: boolean; editing: boolean },
+): { label: string; settledSection: SetupSection | null } {
+  const asking = confirmableStage(guide);
+  const section = asking >= 0 ? sectionAt(guide, asking) : null;
+  const settled = confirmed && !editing && asking >= 0 && stage > asking;
+  return {
+    label: section?.confirmLabel ?? CONFIRM_LABEL_FALLBACK,
+    settledSection: settled ? section : null,
+  };
+}
+
 export function SetupGuideSection({
   guide,
   confirmed,
@@ -159,12 +193,7 @@ export function SetupGuideSection({
 
   const stage = effectiveStage(guide, confirmed, editing, stored);
   const open = sectionAt(guide, stage);
-  // The confirmed step keeps a row of its own once the walkthrough has moved
-  // past it — it is the claim step 3 is about to test, and when the provider
-  // refuses to mint a link the owner needs somewhere to press Revisar.
-  const settledStage = confirmableStage(guide);
-  const settled = confirmed && !editing && settledStage >= 0 && stage > settledStage;
-  const settledSection = settled ? sectionAt(guide, settledStage) : null;
+  const { label, settledSection } = confirmationOf(guide, { stage, confirmed, editing });
 
   return (
     <Box data-testid="payments-setup">
@@ -172,10 +201,7 @@ export function SetupGuideSection({
         guide={{ ...guide, sections: open ? [open] : [] }}
         activeStage={stage}
         actions={{
-          [CHECKOUT_CONFIRM_ACTION]: {
-            label: 'Já habilitei o Checkout Integrado',
-            run: onConfirm,
-          },
+          [CHECKOUT_CONFIRM_ACTION]: { label, run: onConfirm },
         }}
         beforeSections={
           <>