@12-apps/payments-frontend 1.15.2 → 1.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/payments-frontend",
-  "version": "1.15.2",
+  "version": "1.16.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": "^1.15.2",
+    "@12-apps/payments-backend": "^1.16.0",
     "react-qr-code": "^2.2.0"
   },
   "peerDependencies": {
@@ -28,8 +28,8 @@
     "react-dom": ">=19.0.0"
   },
   "devDependencies": {
-    "@12-apps/eslint-config": "^1.17.2",
-    "@12-apps/typescript-config": "^1.17.2",
+    "@12-apps/eslint-config": "^1.18.0",
+    "@12-apps/typescript-config": "^1.18.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@mui/material": "^6.5.0",

package/src/components/ProviderConnection.tsx

@@ -22,7 +22,7 @@ import type {
 } from '@12-apps/payments-backend';
 
 import type { PaymentsSettingsClient } from '../client';
-import { isConnected } from './connection-state';
+import { expiryProximity, isConnected } from './connection-state';
 
 /**
  * The `authMode: 'oauth'` half of the settings page: a provider whose
@@ -49,10 +49,35 @@ export interface ProviderConnectionProps {
   onChanged: () => void;
 }
 
-function expiryNote(expiresAt: string | null): string | null {
-  if (!expiresAt) return null;
-  const when = new Date(expiresAt);
-  return `Autorização válida até ${when.toLocaleString('pt-BR')}`;
+/**
+ * The expiry caption, with PROXIMITY emphasis (FUT-683): the renewal sweep
+ * normally refreshes a grant long before it lapses, so an expiry that is
+ * actually close means renewal has been failing quietly — and this caption is
+ * the only warning an owner gets before checkout starts refusing. A neutral
+ * gray line read the same on the eve of an outage as a year out.
+ */
+function ExpiryNote(props: { expiresAt: string }) {
+  const when = new Date(props.expiresAt).toLocaleString('pt-BR');
+  const proximity = expiryProximity(props.expiresAt);
+  if (proximity === 'SAFE' || proximity === null) {
+    return (
+      <Typography variant="caption" color="text.secondary">
+        {`Autorização válida até ${when}`}
+      </Typography>
+    );
+  }
+  return (
+    <Typography
+      variant="caption"
+      color={proximity === 'PAST' ? 'error.main' : 'warning.main'}
+      sx={{ fontWeight: 600 }}
+      data-testid="payments-expiry-warning"
+    >
+      {proximity === 'PAST'
+        ? `A autorização expirou em ${when}. Reconecte para voltar a receber pagamentos.`
+        : `A autorização expira em ${when}. Se o aviso continuar, reconecte a conta.`}
+    </Typography>
+  );
 }
 
 function connectLabel(displayName: string, connected: boolean, busy: string | null) {
@@ -98,11 +123,7 @@ function ConnectionSummary(props: {
           A autorização expirou ou foi revogada. Reconecte para voltar a receber pagamentos.
         </Alert>
       ) : null}
-      {props.expiresAt ? (
-        <Typography variant="caption" color="text.secondary">
-          {expiryNote(props.expiresAt)}
-        </Typography>
-      ) : null}
+      {props.expiresAt ? <ExpiryNote expiresAt={props.expiresAt} /> : null}
     </>
   );
 }

package/src/components/connection-state.ts

@@ -46,6 +46,37 @@ export function canAttemptCharge(config: MaskedProviderConfig | null | undefined
   return false;
 }
 
+/**
+ * How close `expiresAt` is to becoming an outage, in buckets the UI can
+ * style (FUT-683).
+ *
+ * The host's renewal sweep normally refreshes a grant long before this ever
+ * says `NEAR` — so `NEAR` is not "working as intended", it is the sweep having
+ * failed quietly for days, and the caption is the only place an owner can see
+ * it coming before checkout starts refusing. `PAST` means the grant is already
+ * dead even if the status has not caught up yet.
+ */
+type ExpiryProximity = 'SAFE' | 'NEAR' | 'PAST';
+
+/**
+ * A week: several sweep cycles' worth of margin, so a single missed run never
+ * alarms anyone, while a renewal that keeps failing surfaces well before the
+ * grant actually lapses.
+ */
+const EXPIRY_WARNING_WINDOW_MS = 7 * 24 * 60 * 60 * 1000;
+
+/** Where `expiresAt` stands relative to `now`; null when it cannot expire. */
+export function expiryProximity(
+  expiresAt: string | null | undefined,
+  now: Date = new Date(),
+): ExpiryProximity | null {
+  if (!expiresAt) return null;
+  const at = new Date(expiresAt).getTime();
+  if (Number.isNaN(at)) return null;
+  if (at <= now.getTime()) return 'PAST';
+  return at - now.getTime() <= EXPIRY_WARNING_WINDOW_MS ? 'NEAR' : 'SAFE';
+}
+
 /** What a provider card reports at a glance. */
 type ConnectionBadge =
   | { label: 'Ativo'; color: 'success' }