@12-apps/payments-frontend 3.28.0 → 3.29.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/payments-frontend",
-  "version": "3.28.0",
+  "version": "3.29.0",
   "type": "module",
   "sideEffects": false,
   "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.",
@@ -23,7 +23,7 @@
     "storybook:build": "storybook build"
   },
   "dependencies": {
-    "@12-apps/payments-backend": "^4.28.0",
+    "@12-apps/payments-backend": "^4.29.0",
     "react-qr-code": "^2.2.0"
   },
   "peerDependencies": {

package/src/components/ProviderSetupGuide.tsx

@@ -240,7 +240,10 @@ function StepRow({ step, actions }: StepRowProps) {
           href={step.button.url}
           target="_blank"
           rel="noreferrer"
-          sx={{ ...BTN_SECONDARY_SX, px: '12px', py: '7px', fontSize: '12px', flexShrink: 0 }}
+          // Never narrower than its label beside the text, but never wider than
+          // the row once it has wrapped under it: at 320px "Abrir o portal do
+          // desenvolvedor ↗" was wider than the step and spilled out of it.
+          sx={{ ...BTN_SECONDARY_SX, px: '12px', py: '7px', fontSize: '12px', flexShrink: 0, maxWidth: '100%' }}
           // The mark is the promise: this leaves the store and opens the
           // provider's site. A button that reads the same as the in-page ones
           // and then navigates away is a small betrayal, and here it lands on

package/src/components/ProviderStatusBar.tsx

@@ -4,7 +4,7 @@ import { Box, Stack, Switch, Tooltip, Typography } from '@mui/material';
 
 import type { MaskedProviderConfig, ProviderDescriptor } from '@12-apps/payments-backend';
 
-import { isConnected } from './connection-state';
+import { certificateExpiryProximity, isConnected } from './connection-state';
 import { T } from './panel-tokens';
 import type { ConnectionStatusCopy } from './settings-copy';
 import { usePaymentsSettingsCopy } from './settings-copy-context';
@@ -218,6 +218,58 @@ function ProviderName({
   );
 }
 
+/**
+ * The saved production certificate's renewal warning, under the headline.
+ *
+ * Only for a store on PRODUCTION: that is the one whose PIX stops when the
+ * certificate lapses, and a sandbox store testing the form has nothing to
+ * renew yet. Silent outside the 30-day window (`certificateExpiryProximity`) —
+ * a date a year out is not news, and it is on the provider's portal anyway.
+ * A `status`, lapsed or not: it is state on load, and the probe's own error is
+ * already the alert — a second would be read out twice.
+ */
+function CertificateExpiryNote({ copy, config }: { copy: ConnectionStatusCopy; config: MaskedProviderConfig | null }) {
+  const note = certificateNote(copy, config);
+  if (!note) return null;
+  const tone = note.past
+    ? { border: T.badLine, background: T.badSoft, color: T.badInk }
+    : { border: T.warnLine, background: T.warnSoft, color: T.warnInk };
+  return (
+    <Typography
+      role="status"
+      data-testid="payments-certificate-expiry"
+      sx={{
+        fontSize: '12.5px',
+        fontWeight: 600,
+        lineHeight: 1.5,
+        maxWidth: '52ch',
+        mt: '8px',
+        px: '10px',
+        py: '7px',
+        borderRadius: '8px',
+        border: `1px solid ${tone.border}`,
+        background: tone.background,
+        color: tone.color,
+      }}
+    >
+      {note.text}
+    </Typography>
+  );
+}
+
+/** What the certificate note says, or null when it has nothing to say. */
+function certificateNote(
+  copy: ConnectionStatusCopy,
+  config: MaskedProviderConfig | null,
+): { text: string; past: boolean } | null {
+  const expiresAt = config?.environment === 'PRODUCTION' ? config.credentialExpiresAt : null;
+  if (!expiresAt) return null;
+  const proximity = certificateExpiryProximity(expiresAt);
+  if (proximity === 'PAST') return { text: copy.certificateExpired(expiresAt), past: true };
+  if (proximity === 'NEAR') return { text: copy.certificateExpires(expiresAt), past: false };
+  return null;
+}
+
 export function ProviderStatusBar({
   descriptor,
   config,
@@ -248,6 +300,7 @@ export function ProviderStatusBar({
         >
           {sub}
         </Typography>
+        <CertificateExpiryNote copy={copy} config={config} />
       </Box>
       {/* The switch belongs at the far edge: it is the one control here that
           changes what buyers experience, and crowding it against the status

package/src/components/connection-state.ts

@@ -71,11 +71,31 @@ export function expiryProximity(
   expiresAt: string | null | undefined,
   now: Date = new Date(),
 ): ExpiryProximity | null {
-  if (!expiresAt) return null;
-  const at = new Date(expiresAt).getTime();
+  return proximityWithin(EXPIRY_WARNING_WINDOW_MS, expiresAt, now);
+}
+
+/**
+ * A saved CERTIFICATE's proximity (`credentialExpiresAt`) — a different
+ * window from the OAuth grant's on purpose. No sweep renews a certificate:
+ * the owner generates a new one by hand, and Itaú opens that renewal 30 days
+ * before expiry, so the warning starts the day there is something to do about
+ * it rather than a week before the store's PIX stops.
+ */
+const CERTIFICATE_WARNING_WINDOW_MS = 30 * 24 * 60 * 60 * 1000;
+
+export function certificateExpiryProximity(
+  credentialExpiresAt: string | null | undefined,
+  now: Date = new Date(),
+): ExpiryProximity | null {
+  return proximityWithin(CERTIFICATE_WARNING_WINDOW_MS, credentialExpiresAt, now);
+}
+
+function proximityWithin(windowMs: number, iso: string | null | undefined, now: Date): ExpiryProximity | null {
+  if (!iso) return null;
+  const at = new Date(iso).getTime();
   if (Number.isNaN(at)) return null;
   if (at <= now.getTime()) return 'PAST';
-  return at - now.getTime() <= EXPIRY_WARNING_WINDOW_MS ? 'NEAR' : 'SAFE';
+  return at - now.getTime() <= windowMs ? 'NEAR' : 'SAFE';
 }
 
 /**

package/src/components/settings-copy.ts

@@ -49,6 +49,14 @@ export interface ConnectionStatusCopy {
   pausedChip: string;
   /** Proven, not switched on yet. */
   readyNotReceiving: { state: string; sub: string };
+  /**
+   * The saved production certificate lapses inside the renewal window, or has
+   * lapsed. Given the ISO `validTo`; the pack formats the date in its own
+   * locale. Provider-neutral wording — the certificate is the store's, the
+   * portal is the provider's.
+   */
+  certificateExpires: (iso: string) => string;
+  certificateExpired: (iso: string) => string;
 }
 
 /**

package/src/components/settings-en-US.ts

@@ -39,6 +39,12 @@ export const EN_US_PAYMENTS_SETTINGS_COPY: PaymentsSettingsCopy = {
       state: 'Not taking sales yet',
       sub: 'Everything is ready — flip the switch to start taking payments.',
     },
+    certificateExpires: (iso) =>
+      `The production certificate expires on ${new Date(iso).toLocaleDateString('en-US')}. ` +
+      'Before then, generate a new certificate and private key in the provider’s portal and paste both on the Production tab — with an expired certificate, Pix through this provider does not work.',
+    certificateExpired: (iso) =>
+      `The production certificate expired on ${new Date(iso).toLocaleDateString('en-US')}. ` +
+      'Until it is replaced, Pix through this provider does not work. Generate a new certificate and private key in the provider’s portal and paste both on the Production tab.',
   },
   listBadge: {
     active: 'Active',

package/src/components/settings-pt-BR.ts

@@ -31,6 +31,12 @@ export const PT_BR_PAYMENTS_SETTINGS_COPY: PaymentsSettingsCopy = {
       state: 'Ainda não está recebendo',
       sub: 'Tudo pronto — ligue a chave para começar a receber.',
     },
+    certificateExpires: (iso) =>
+      `O certificado de produção vence em ${new Date(iso).toLocaleDateString('pt-BR')}. ` +
+      'Antes disso, gere um novo certificado e uma nova chave privada no portal do provedor e cole os dois na aba Produção — com o certificado vencido, o Pix por este provedor não funciona.',
+    certificateExpired: (iso) =>
+      `O certificado de produção venceu em ${new Date(iso).toLocaleDateString('pt-BR')}. ` +
+      'Enquanto ele não for trocado, o Pix por este provedor não funciona. Gere um novo certificado e uma nova chave privada no portal do provedor e cole os dois na aba Produção.',
   },
   listBadge: {
     active: 'Ativo',