@learncard/email-templates 1.1.0 → 1.2.1

package/src/previews/escrow-hold-cancelled-scenarios.tsx

@@ -0,0 +1,79 @@
+/**
+ * escrow-hold-cancelled — all preview scenarios stacked (one per reason).
+ */
+
+import * as React from 'react';
+
+import { EscrowHoldCancelled } from '../templates/escrow-hold-cancelled';
+import { LEARNCARD_BRANDING, VETPASS_BRANDING, ScenarioDivider } from './_fixtures';
+
+export default function EscrowHoldCancelledScenarios() {
+    return (
+        <>
+            <ScenarioDivider label="Reason: user" />
+            <EscrowHoldCancelled
+                branding={LEARNCARD_BRANDING}
+                cancelledAt="September 26, 2026, 9:15 AM"
+                reason="user"
+            />
+
+            <ScenarioDivider label="Reason: superseded" />
+            <EscrowHoldCancelled
+                branding={LEARNCARD_BRANDING}
+                cancelledAt="September 26, 2026, 9:15 AM"
+                reason="superseded"
+            />
+
+            <ScenarioDivider label="Reason: pin-locked" />
+            <EscrowHoldCancelled
+                branding={LEARNCARD_BRANDING}
+                cancelledAt="September 26, 2026, 9:15 AM"
+                reason="pin-locked"
+            />
+
+            <ScenarioDivider label="Reason: release-failed" />
+            <EscrowHoldCancelled
+                branding={LEARNCARD_BRANDING}
+                cancelledAt="September 26, 2026, 9:15 AM"
+                reason="release-failed"
+            />
+
+            <ScenarioDivider label="No reason (generic message)" />
+            <EscrowHoldCancelled
+                branding={LEARNCARD_BRANDING}
+                cancelledAt="September 26, 2026, 9:15 AM"
+            />
+
+            <ScenarioDivider label="Spanish" />
+            <EscrowHoldCancelled
+                branding={LEARNCARD_BRANDING}
+                cancelledAt="26 de septiembre de 2026, 9:15 a.m."
+                reason="user"
+                locale="es"
+            />
+
+            <ScenarioDivider label="French" />
+            <EscrowHoldCancelled
+                branding={LEARNCARD_BRANDING}
+                cancelledAt="26 septembre 2026, 9h15"
+                reason="user"
+                locale="fr"
+            />
+
+            <ScenarioDivider label="Arabic (RTL)" />
+            <EscrowHoldCancelled
+                branding={LEARNCARD_BRANDING}
+                cancelledAt="26 سبتمبر 2026، 9:15 ص"
+                reason="user"
+                locale="ar"
+            />
+
+            <ScenarioDivider label="VetPass tenant branding" />
+            <EscrowHoldCancelled
+                branding={VETPASS_BRANDING}
+                cancelledAt="September 26, 2026, 9:15 AM"
+                reason="user"
+            />
+        </>
+    );
+}

package/src/previews/escrow-hold-released-scenarios.tsx

@@ -0,0 +1,58 @@
+/**
+ * escrow-hold-released — all preview scenarios stacked.
+ */
+
+import * as React from 'react';
+
+import { EscrowHoldReleased } from '../templates/escrow-hold-released';
+import { LEARNCARD_BRANDING, VETPASS_BRANDING, ScenarioDivider } from './_fixtures';
+
+export default function EscrowHoldReleasedScenarios() {
+    return (
+        <>
+            <ScenarioDivider label="With support link" />
+            <EscrowHoldReleased
+                branding={LEARNCARD_BRANDING}
+                completedAt="October 2, 2026, 3:00 PM"
+                supportUrl="https://learncard.app/support"
+            />
+
+            <ScenarioDivider label="No support link (footer contact only)" />
+            <EscrowHoldReleased
+                branding={LEARNCARD_BRANDING}
+                completedAt="October 2, 2026, 3:00 PM"
+            />
+
+            <ScenarioDivider label="Spanish" />
+            <EscrowHoldReleased
+                branding={LEARNCARD_BRANDING}
+                completedAt="2 de octubre de 2026, 3:00 p.m."
+                supportUrl="https://learncard.app/support"
+                locale="es"
+            />
+
+            <ScenarioDivider label="French" />
+            <EscrowHoldReleased
+                branding={LEARNCARD_BRANDING}
+                completedAt="2 octobre 2026, 15h00"
+                supportUrl="https://learncard.app/support"
+                locale="fr"
+            />
+
+            <ScenarioDivider label="Arabic (RTL)" />
+            <EscrowHoldReleased
+                branding={LEARNCARD_BRANDING}
+                completedAt="2 أكتوبر 2026، 3:00 م"
+                supportUrl="https://learncard.app/support"
+                locale="ar"
+            />
+
+            <ScenarioDivider label="VetPass tenant branding" />
+            <EscrowHoldReleased
+                branding={VETPASS_BRANDING}
+                completedAt="October 2, 2026, 3:00 PM"
+                supportUrl="https://vetpass.app/support"
+            />
+        </>
+    );
+}

package/src/previews/escrow-hold-reminder-scenarios.tsx

@@ -0,0 +1,52 @@
+/**
+ * escrow-hold-reminder — all preview scenarios stacked.
+ */
+
+import * as React from 'react';
+
+import { EscrowHoldReminder } from '../templates/escrow-hold-reminder';
+import { LEARNCARD_BRANDING, VETPASS_BRANDING, ScenarioDivider } from './_fixtures';
+
+export default function EscrowHoldReminderScenarios() {
+    return (
+        <>
+            <ScenarioDivider label="Default — LearnCard branding" />
+            <EscrowHoldReminder
+                branding={LEARNCARD_BRANDING}
+                releaseAfter="October 2, 2026, 3:00 PM"
+                cancelUrl="https://learncard.app/recovery/cancel?token=abc123"
+            />
+
+            <ScenarioDivider label="Spanish" />
+            <EscrowHoldReminder
+                branding={LEARNCARD_BRANDING}
+                releaseAfter="2 de octubre de 2026, 3:00 p.m."
+                cancelUrl="https://learncard.app/recovery/cancel?token=abc123"
+                locale="es"
+            />
+
+            <ScenarioDivider label="French" />
+            <EscrowHoldReminder
+                branding={LEARNCARD_BRANDING}
+                releaseAfter="2 octobre 2026, 15h00"
+                cancelUrl="https://learncard.app/recovery/cancel?token=abc123"
+                locale="fr"
+            />
+
+            <ScenarioDivider label="Arabic (RTL)" />
+            <EscrowHoldReminder
+                branding={LEARNCARD_BRANDING}
+                releaseAfter="2 أكتوبر 2026، 3:00 م"
+                cancelUrl="https://learncard.app/recovery/cancel?token=abc123"
+                locale="ar"
+            />
+
+            <ScenarioDivider label="VetPass tenant branding" />
+            <EscrowHoldReminder
+                branding={VETPASS_BRANDING}
+                releaseAfter="October 2, 2026, 3:00 PM"
+                cancelUrl="https://vetpass.app/recovery/cancel?token=abc123"
+            />
+        </>
+    );
+}

package/src/previews/escrow-hold-started-scenarios.tsx

@@ -0,0 +1,67 @@
+/**
+ * escrow-hold-started — all preview scenarios stacked.
+ */
+
+import * as React from 'react';
+
+import { EscrowHoldStarted } from '../templates/escrow-hold-started';
+import { LEARNCARD_BRANDING, VETPASS_BRANDING, ScenarioDivider } from './_fixtures';
+
+export default function EscrowHoldStartedScenarios() {
+    return (
+        <>
+            <ScenarioDivider label="Default — with device hint" />
+            <EscrowHoldStarted
+                branding={LEARNCARD_BRANDING}
+                requestedAt="September 25, 2026, 3:00 PM"
+                releaseAfter="October 2, 2026, 3:00 PM"
+                cancelUrl="https://learncard.app/recovery/cancel?token=abc123"
+                deviceHint="Chrome on Windows"
+            />
+
+            <ScenarioDivider label="No device hint" />
+            <EscrowHoldStarted
+                branding={LEARNCARD_BRANDING}
+                requestedAt="September 25, 2026, 3:00 PM"
+                releaseAfter="October 2, 2026, 3:00 PM"
+                cancelUrl="https://learncard.app/recovery/cancel?token=abc123"
+            />
+
+            <ScenarioDivider label="Spanish" />
+            <EscrowHoldStarted
+                branding={LEARNCARD_BRANDING}
+                requestedAt="25 de septiembre de 2026, 3:00 p.m."
+                releaseAfter="2 de octubre de 2026, 3:00 p.m."
+                cancelUrl="https://learncard.app/recovery/cancel?token=abc123"
+                locale="es"
+            />
+
+            <ScenarioDivider label="French" />
+            <EscrowHoldStarted
+                branding={LEARNCARD_BRANDING}
+                requestedAt="25 septembre 2026, 15h00"
+                releaseAfter="2 octobre 2026, 15h00"
+                cancelUrl="https://learncard.app/recovery/cancel?token=abc123"
+                locale="fr"
+            />
+
+            <ScenarioDivider label="Arabic (RTL)" />
+            <EscrowHoldStarted
+                branding={LEARNCARD_BRANDING}
+                requestedAt="25 سبتمبر 2026، 3:00 م"
+                releaseAfter="2 أكتوبر 2026، 3:00 م"
+                cancelUrl="https://learncard.app/recovery/cancel?token=abc123"
+                locale="ar"
+            />
+
+            <ScenarioDivider label="VetPass tenant branding" />
+            <EscrowHoldStarted
+                branding={VETPASS_BRANDING}
+                requestedAt="September 25, 2026, 3:00 PM"
+                releaseAfter="October 2, 2026, 3:00 PM"
+                cancelUrl="https://vetpass.app/recovery/cancel?token=abc123"
+                deviceHint="Safari on iPhone"
+            />
+        </>
+    );
+}

package/src/previews/escrow-pin-locked-scenarios.tsx

@@ -0,0 +1,60 @@
+/**
+ * escrow-pin-locked — all preview scenarios stacked.
+ */
+
+import * as React from 'react';
+
+import { EscrowPinLocked } from '../templates/escrow-pin-locked';
+import { LEARNCARD_BRANDING, VETPASS_BRANDING, ScenarioDivider } from './_fixtures';
+
+export default function EscrowPinLockedScenarios() {
+    return (
+        <>
+            <ScenarioDivider label="With pending waiting-period recovery (cancel link)" />
+            <EscrowPinLocked
+                branding={LEARNCARD_BRANDING}
+                lockedAt="September 25, 2026, 3:00 PM"
+                releaseAfter="October 2, 2026, 3:00 PM"
+                cancelUrl="https://learncard.app/recovery/cancel?token=abc123"
+            />
+
+            <ScenarioDivider label="No pending recovery" />
+            <EscrowPinLocked branding={LEARNCARD_BRANDING} lockedAt="September 25, 2026, 3:00 PM" />
+
+            <ScenarioDivider label="Spanish" />
+            <EscrowPinLocked
+                branding={LEARNCARD_BRANDING}
+                lockedAt="25 de septiembre de 2026, 3:00 p.m."
+                releaseAfter="2 de octubre de 2026, 3:00 p.m."
+                cancelUrl="https://learncard.app/recovery/cancel?token=abc123"
+                locale="es"
+            />
+
+            <ScenarioDivider label="French" />
+            <EscrowPinLocked
+                branding={LEARNCARD_BRANDING}
+                lockedAt="25 septembre 2026, 15h00"
+                releaseAfter="2 octobre 2026, 15h00"
+                cancelUrl="https://learncard.app/recovery/cancel?token=abc123"
+                locale="fr"
+            />
+
+            <ScenarioDivider label="Arabic (RTL)" />
+            <EscrowPinLocked
+                branding={LEARNCARD_BRANDING}
+                lockedAt="25 سبتمبر 2026، 3:00 م"
+                releaseAfter="2 أكتوبر 2026، 3:00 م"
+                cancelUrl="https://learncard.app/recovery/cancel?token=abc123"
+                locale="ar"
+            />
+
+            <ScenarioDivider label="VetPass tenant branding" />
+            <EscrowPinLocked
+                branding={VETPASS_BRANDING}
+                lockedAt="September 25, 2026, 3:00 PM"
+                releaseAfter="October 2, 2026, 3:00 PM"
+                cancelUrl="https://vetpass.app/recovery/cancel?token=abc123"
+            />
+        </>
+    );
+}

package/src/previews/recovery-key-scenarios.tsx

@@ -14,18 +14,21 @@ export default function RecoveryKeyScenarios() {
             <RecoveryKey
                 branding={LEARNCARD_BRANDING}
                 recoveryKey="mango-delta-fox-echo-bravo-seven-lima-niner"
+                confirmationCode="123456"
             />
 
             <ScenarioDivider label="Long recovery key (wrapping test)" />
             <RecoveryKey
                 branding={LEARNCARD_BRANDING}
                 recoveryKey="alpha-bravo-charlie-delta-echo-foxtrot-golf-hotel-india-juliet-kilo-lima"
+                confirmationCode="654321"
             />
 
             <ScenarioDivider label="VetPass tenant branding" />
             <RecoveryKey
                 branding={VETPASS_BRANDING}
                 recoveryKey="sierra-tango-uniform-victor-whiskey-xray"
+                confirmationCode="987654"
             />
         </>
     );

package/src/render.ts

@@ -41,6 +41,18 @@ import {
     getEmailVerificationSubject,
     CredentialUpdated,
     getCredentialUpdatedSubject,
+    AccountSignInChanged,
+    getAccountSignInChangedSubject,
+    EscrowHoldStarted,
+    getEscrowHoldStartedSubject,
+    EscrowHoldReminder,
+    getEscrowHoldReminderSubject,
+    EscrowHoldReleased,
+    getEscrowHoldReleasedSubject,
+    EscrowHoldCancelled,
+    getEscrowHoldCancelledSubject,
+    EscrowPinLocked,
+    getEscrowPinLockedSubject,
 } from './templates';
 
 import type {
@@ -56,6 +68,13 @@ import type {
     GuardianRejectedCredentialProps,
     EmailVerificationProps,
     CredentialUpdatedProps,
+    AccountSignInChangedProps,
+    EscrowHoldStartedProps,
+    EscrowHoldReminderProps,
+    EscrowHoldReleasedProps,
+    EscrowHoldCancelledProps,
+    EscrowHoldCancelledReason,
+    EscrowPinLockedProps,
 } from './templates';
 
 // ---------------------------------------------------------------------------
@@ -152,6 +171,25 @@ export interface TemplateDataMap {
 
     /** brain-service: managed credential refresh update notice (LC-2198) */
     'credential-updated': CredentialUpdatedData;
+    /** lca-api: lost-login identity rebind security notification */
+    'account-sign-in-changed': AccountSignInChangedData;
+
+    // -- Recovery hold lifecycle (nitro-escrow-enclave) ----------------------
+
+    /** lca-api: recovery hold started — includes a cancel link */
+    'escrow-hold-started': EscrowHoldStartedData;
+
+    /** lca-api: recovery hold reminder (T-24h) — includes a cancel link */
+    'escrow-hold-reminder': EscrowHoldReminderData;
+
+    /** lca-api: recovery hold completed and access was restored */
+    'escrow-hold-released': EscrowHoldReleasedData;
+
+    /** lca-api: recovery hold cancelled (user, superseded, PIN lock, or failure) */
+    'escrow-hold-cancelled': EscrowHoldCancelledData;
+
+    /** lca-api: recovery PIN locked after too many failed attempts */
+    'escrow-pin-locked': EscrowPinLockedData;
 }
 
 export type TemplateId = keyof TemplateDataMap;
@@ -190,6 +228,7 @@ export interface AccountApprovedData {
 
 export interface RecoveryKeyData {
     recoveryKey: string;
+    confirmationCode: string;
 }
 
 export interface EndorsementRequestData {
@@ -235,6 +274,36 @@ export interface CredentialUpdatedData {
     credential?: { name?: string };
 }
 
+export type AccountSignInChangedData = Record<string, never>;
+
+export interface EscrowHoldStartedData {
+    requestedAt: string;
+    releaseAfter: string;
+    cancelUrl: string;
+    deviceHint?: string;
+}
+
+export interface EscrowHoldReminderData {
+    releaseAfter: string;
+    cancelUrl: string;
+}
+
+export interface EscrowHoldReleasedData {
+    completedAt: string;
+    supportUrl?: string;
+}
+
+export interface EscrowHoldCancelledData {
+    cancelledAt: string;
+    reason?: EscrowHoldCancelledReason;
+}
+
+export interface EscrowPinLockedData {
+    lockedAt: string;
+    releaseAfter?: string;
+    cancelUrl?: string;
+}
+
 // ---------------------------------------------------------------------------
 // renderEmail()
 // ---------------------------------------------------------------------------
@@ -442,6 +511,65 @@ function buildElement(
             };
         }
 
+        case 'account-sign-in-changed': {
+            const props: AccountSignInChangedProps = { branding, locale };
+
+            return {
+                element: React.createElement(AccountSignInChanged, props),
+                subject: getAccountSignInChangedSubject(branding, locale),
+            };
+        }
+
+        case 'escrow-hold-started': {
+            const d = data as EscrowHoldStartedData;
+            const props: EscrowHoldStartedProps = { branding, ...d, locale };
+
+            return {
+                element: React.createElement(EscrowHoldStarted, props),
+                subject: getEscrowHoldStartedSubject(branding, locale),
+            };
+        }
+
+        case 'escrow-hold-reminder': {
+            const d = data as EscrowHoldReminderData;
+            const props: EscrowHoldReminderProps = { branding, ...d, locale };
+
+            return {
+                element: React.createElement(EscrowHoldReminder, props),
+                subject: getEscrowHoldReminderSubject(branding, locale),
+            };
+        }
+
+        case 'escrow-hold-released': {
+            const d = data as EscrowHoldReleasedData;
+            const props: EscrowHoldReleasedProps = { branding, ...d, locale };
+
+            return {
+                element: React.createElement(EscrowHoldReleased, props),
+                subject: getEscrowHoldReleasedSubject(branding, locale),
+            };
+        }
+
+        case 'escrow-hold-cancelled': {
+            const d = data as EscrowHoldCancelledData;
+            const props: EscrowHoldCancelledProps = { branding, ...d, locale };
+
+            return {
+                element: React.createElement(EscrowHoldCancelled, props),
+                subject: getEscrowHoldCancelledSubject(branding, locale),
+            };
+        }
+
+        case 'escrow-pin-locked': {
+            const d = data as EscrowPinLockedData;
+            const props: EscrowPinLockedProps = { branding, ...d, locale };
+
+            return {
+                element: React.createElement(EscrowPinLocked, props),
+                subject: getEscrowPinLockedSubject(branding, locale),
+            };
+        }
+
         default: {
             const _exhaustive: never = templateId;
             throw new Error(`Unknown template: ${_exhaustive}`);

package/src/templates/account-sign-in-changed.tsx

@@ -0,0 +1,113 @@
+import { Text } from '@react-email/components';
+import * as React from 'react';
+
+import type { TenantBranding } from '../branding';
+import { DEFAULT_BRANDING } from '../branding';
+import { Layout } from '../components/Layout';
+import type { NotificationLocale } from '../i18n';
+import { interpolate, resolveCatalogLocale, SHARED } from '../i18n';
+
+export interface AccountSignInChangedProps {
+    branding: TenantBranding;
+    locale?: string;
+}
+
+const STRINGS: Record<
+    NotificationLocale,
+    {
+        preview: string;
+        heading: string;
+        body: string;
+        warning: string;
+        subject: string;
+        sincerely: string;
+    }
+> = {
+    en: {
+        preview: 'Your account sign-in was changed',
+        heading: 'Your Sign-In Was Changed',
+        body: 'Your {brandName} account was restored and connected to a new sign-in.',
+        warning: 'If this was not you, contact support immediately.',
+        subject: 'Your account sign-in was changed',
+        sincerely: 'Sincerely,',
+    },
+    es: {
+        preview: 'Se cambió el inicio de sesión de tu cuenta',
+        heading: 'Se cambió tu inicio de sesión',
+        body: 'Tu cuenta de {brandName} se restauró y se conectó a un nuevo inicio de sesión.',
+        warning: 'Si no fuiste tú, comunícate con soporte de inmediato.',
+        subject: 'Se cambió el inicio de sesión de tu cuenta',
+        sincerely: 'Atentamente,',
+    },
+    fr: {
+        preview: 'La connexion à votre compte a été modifiée',
+        heading: 'Votre connexion a été modifiée',
+        body: 'Votre compte {brandName} a été restauré et associé à une nouvelle connexion.',
+        warning:
+            'Si vous n’êtes pas à l’origine de cette action, contactez immédiatement l’assistance.',
+        subject: 'La connexion à votre compte a été modifiée',
+        sincerely: 'Cordialement,',
+    },
+    ar: {
+        preview: 'تم تغيير تسجيل الدخول إلى حسابك',
+        heading: 'تم تغيير تسجيل الدخول',
+        body: 'تمت استعادة حسابك في {brandName} وربطه بتسجيل دخول جديد.',
+        warning: 'إذا لم تكن أنت من أجرى هذا التغيير، فتواصل مع الدعم فورًا.',
+        subject: 'تم تغيير تسجيل الدخول إلى حسابك',
+        sincerely: 'مع التحيات،',
+    },
+};
+
+export const AccountSignInChanged: React.FC<AccountSignInChangedProps> = ({ branding, locale }) => {
+    const strings = STRINGS[resolveCatalogLocale(locale)];
+
+    return (
+        <Layout branding={branding} locale={locale} preview={strings.preview}>
+            <Text style={heading}>{strings.heading}</Text>
+            <Text style={paragraph}>
+                {interpolate(strings.body, { brandName: branding.brandName })}
+            </Text>
+            <Text style={warning}>{strings.warning}</Text>
+            <Text style={signOff}>
+                {strings.sincerely}
+                <br />
+                {interpolate(SHARED[resolveCatalogLocale(locale)].teamSignature, {
+                    brandName: branding.brandName,
+                })}
+            </Text>
+        </Layout>
+    );
+};
+
+/** Return the localized subject for an account sign-in change notification. */
+export const getAccountSignInChangedSubject = (
+    _branding: TenantBranding,
+    locale?: string
+): string => STRINGS[resolveCatalogLocale(locale)].subject;
+
+const heading: React.CSSProperties = {
+    color: '#111827',
+    fontSize: '24px',
+    fontWeight: 600,
+    lineHeight: '32px',
+};
+
+const paragraph: React.CSSProperties = {
+    color: '#374151',
+    fontSize: '16px',
+    lineHeight: '24px',
+};
+
+const warning: React.CSSProperties = {
+    ...paragraph,
+    fontWeight: 600,
+};
+
+const signOff: React.CSSProperties = {
+    ...paragraph,
+    marginTop: '24px',
+};
+
+export default function Preview(): React.ReactElement {
+    return <AccountSignInChanged branding={DEFAULT_BRANDING} />;
+}