@learncard/email-templates 1.2.0 → 1.2.2

package/src/__tests__/render.test.ts

@@ -138,6 +138,41 @@ const TEMPLATE_FIXTURES: { [K in TemplateId]: TemplateDataMap[K] } = {
         credential: { name: 'Introduction to Biology' },
     },
     'account-sign-in-changed': {},
+
+    'escrow-hold-started': {
+        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',
+    },
+
+    'escrow-hold-reminder': {
+        releaseAfter: 'October 2, 2026, 3:00 PM',
+        cancelUrl: 'https://learncard.app/recovery/cancel?token=abc123',
+    },
+
+    'escrow-hold-released': {
+        completedAt: 'October 2, 2026, 3:00 PM',
+        supportUrl: 'https://learncard.app/support',
+    },
+
+    'escrow-hold-cancelled': {
+        cancelledAt: 'September 26, 2026, 9:15 AM',
+        reason: 'user',
+    },
+
+    'escrow-pin-locked': {
+        lockedAt: 'September 25, 2026, 3:00 PM',
+        releaseAfter: 'October 2, 2026, 3:00 PM',
+        cancelUrl: 'https://learncard.app/recovery/cancel?token=abc123',
+    },
+    'escrow-pin-sign-in': {
+        signedInAt: 'October 2, 2026, 3:00 PM',
+        secureUrl: 'https://learncard.app/account/secure',
+    },
+    'account-secured': {
+        securedAt: 'October 2, 2026, 3:00 PM',
+    },
 };
 
 const ALL_TEMPLATE_IDS = Object.keys(TEMPLATE_FIXTURES) as TemplateId[];
@@ -386,6 +421,277 @@ describe('renderEmail — credential-updated', () => {
     });
 });
 
+// ---------------------------------------------------------------------------
+// Escrow hold lifecycle (nitro-escrow-enclave, P5.1) — plain-language recovery
+// notifications. No user-facing jargon: never render "wallet", "DID",
+// "share", "enclave", "escrow", "SSS", or "key derivation".
+// ---------------------------------------------------------------------------
+
+describe('renderEmail — escrow hold lifecycle', () => {
+    const JARGON = ['wallet', 'DID', 'share', 'enclave', 'escrow', 'SSS', 'key derivation'];
+
+    const assertNoJargon = (text: string) => {
+        const lower = text.toLowerCase();
+        for (const word of JARGON) {
+            expect(lower).not.toContain(word.toLowerCase());
+        }
+    };
+
+    it('escrow-hold-started includes the cancel URL, both dates, and the device hint', async () => {
+        const data = TEMPLATE_FIXTURES['escrow-hold-started'];
+        const { html, text, subject } = await renderEmail(
+            'escrow-hold-started',
+            DEFAULT_BRANDING,
+            data
+        );
+
+        expect(html).toContain(data.cancelUrl);
+        expect(html).toContain(data.requestedAt);
+        expect(html).toContain(data.releaseAfter);
+        expect(html).toContain(data.deviceHint);
+        expect(subject).toBe('Account recovery started');
+        assertNoJargon(html);
+        assertNoJargon(text);
+        assertNoJargon(subject);
+    });
+
+    it('escrow-hold-started renders without the optional device hint', async () => {
+        const { html } = await renderEmail('escrow-hold-started', DEFAULT_BRANDING, {
+            requestedAt: 'September 25, 2026, 3:00 PM',
+            releaseAfter: 'October 2, 2026, 3:00 PM',
+            cancelUrl: 'https://learncard.app/recovery/cancel?token=xyz',
+        });
+
+        expect(html).toContain('https://learncard.app/recovery/cancel?token=xyz');
+        expect(html).not.toContain('undefined');
+    });
+
+    it('escrow-hold-reminder includes the cancel URL and the release date', async () => {
+        const data = TEMPLATE_FIXTURES['escrow-hold-reminder'];
+        const { html, text, subject } = await renderEmail(
+            'escrow-hold-reminder',
+            DEFAULT_BRANDING,
+            data
+        );
+
+        expect(html).toContain(data.cancelUrl);
+        expect(html).toContain(data.releaseAfter);
+        expect(subject).toBe('Recovery completes tomorrow');
+        assertNoJargon(html);
+        assertNoJargon(text);
+        assertNoJargon(subject);
+    });
+
+    it('escrow-hold-released includes the completion date and the support link when provided', async () => {
+        const data = TEMPLATE_FIXTURES['escrow-hold-released'];
+        const { html, text, subject } = await renderEmail(
+            'escrow-hold-released',
+            DEFAULT_BRANDING,
+            data
+        );
+
+        expect(html).toContain(data.completedAt);
+        expect(html).toContain(data.supportUrl);
+        expect(subject).toBe('Your account was recovered');
+        assertNoJargon(html);
+        assertNoJargon(text);
+        assertNoJargon(subject);
+    });
+
+    it('escrow-hold-released renders without the optional support link', async () => {
+        const { html } = await renderEmail('escrow-hold-released', DEFAULT_BRANDING, {
+            completedAt: 'October 2, 2026, 3:00 PM',
+        });
+
+        expect(html).toContain('October 2, 2026, 3:00 PM');
+        expect(html).not.toContain('undefined');
+    });
+
+    it.each([
+        ['user', 'cancelled this request'],
+        ['superseded', 'newer recovery request'],
+        ['pin-locked', 'incorrect PIN attempts'],
+        ['release-failed', 'could not be completed'],
+    ] as const)('escrow-hold-cancelled renders reason "%s"', async (reason, expectedSnippet) => {
+        const { html, subject } = await renderEmail('escrow-hold-cancelled', DEFAULT_BRANDING, {
+            cancelledAt: 'September 26, 2026, 9:15 AM',
+            reason,
+        });
+
+        expect(html).toContain('September 26, 2026, 9:15 AM');
+        expect(html).toContain(expectedSnippet);
+        expect(subject).toBe('Recovery request cancelled');
+        assertNoJargon(html);
+    });
+
+    it('escrow-hold-cancelled renders a generic message when reason is omitted', async () => {
+        const { html } = await renderEmail('escrow-hold-cancelled', DEFAULT_BRANDING, {
+            cancelledAt: 'September 26, 2026, 9:15 AM',
+        });
+
+        expect(html).toContain('No further action is needed');
+    });
+
+    it('escrow-pin-locked includes the locked date, release date, and cancel URL when a hold is pending', async () => {
+        const data = TEMPLATE_FIXTURES['escrow-pin-locked'];
+        const { html, text, subject } = await renderEmail(
+            'escrow-pin-locked',
+            DEFAULT_BRANDING,
+            data
+        );
+
+        expect(html).toContain(data.lockedAt);
+        expect(html).toContain(data.releaseAfter);
+        expect(html).toContain(data.cancelUrl);
+        expect(subject).toBe('Recovery PIN locked');
+        assertNoJargon(html);
+        assertNoJargon(text);
+        assertNoJargon(subject);
+    });
+
+    it('escrow-pin-locked renders generic fallback copy with no button when no hold is pending', async () => {
+        const { html } = await renderEmail('escrow-pin-locked', DEFAULT_BRANDING, {
+            lockedAt: 'September 25, 2026, 3:00 PM',
+        });
+
+        expect(html).toContain('September 25, 2026, 3:00 PM');
+        expect(html).toContain('waiting-period recovery is still available');
+        expect(html).not.toContain('undefined');
+    });
+
+    it('escrow-pin-sign-in includes the sign-in date and the secure-account link', async () => {
+        const data = TEMPLATE_FIXTURES['escrow-pin-sign-in'];
+        const { html, text, subject } = await renderEmail(
+            'escrow-pin-sign-in',
+            DEFAULT_BRANDING,
+            data
+        );
+
+        expect(html).toContain(data.signedInAt);
+        expect(html).toContain(data.secureUrl);
+        expect(text).toContain('Not you? Secure your account.');
+        expect(text).toContain('Secure my account');
+        expect(subject).toBe('New device signed in with your PIN');
+        assertNoJargon(html);
+        assertNoJargon(text);
+        assertNoJargon(subject);
+    });
+
+    it('escrow-pin-sign-in formats the ISO timestamp lca-api sends, per locale', async () => {
+        const iso = '2026-11-02T15:04:05.123Z';
+        const en = await renderEmail('escrow-pin-sign-in', DEFAULT_BRANDING, {
+            signedInAt: iso,
+            secureUrl: 'https://learncard.app/account/secure',
+        });
+        const fr = await renderEmail(
+            'escrow-pin-sign-in',
+            DEFAULT_BRANDING,
+            { signedInAt: iso, secureUrl: 'https://learncard.app/account/secure' },
+            'fr'
+        );
+
+        expect(en.text).not.toContain(iso);
+        expect(en.text).toContain('November 2, 2026');
+        expect(en.text).toContain('UTC');
+        expect(fr.text).toContain('2 novembre 2026');
+    });
+
+    it('escrow-pin-sign-in carries tenant branding', async () => {
+        const { html } = await renderEmail('escrow-pin-sign-in', VETPASS_BRANDING, {
+            signedInAt: 'October 2, 2026, 3:00 PM',
+            secureUrl: 'https://vetpass.app/account/secure',
+        });
+
+        expect(html).toContain('VetPass');
+        expect(html).toContain('https://vetpass.app/account/secure');
+    });
+
+    it('account-secured works for an owner who did not do it (no secure link, support first)', async () => {
+        const data = TEMPLATE_FIXTURES['account-secured'];
+        const { html, text, subject } = await renderEmail(
+            'account-secured',
+            DEFAULT_BRANDING,
+            data
+        );
+
+        expect(html).toContain(data.securedAt);
+        expect(subject).toBe('Other devices were signed out of your account');
+        // The owner's login may be gone, so the notice must not depend on the in-app action.
+        expect(html).not.toContain('/account/secure');
+        expect(text).toContain('your own sign-in may have been removed');
+        // The revoke reset every recovery method and removed automatic recovery, so the
+        // lost-login path is not offered as the way back; support is.
+        expect(text).toContain('reset its recovery methods');
+        expect(text).not.toContain('I lost access to my school email or login');
+        expect(text).toContain(`Contact ${DEFAULT_BRANDING.supportEmail} right away`);
+        expect(html).toContain(`href="${DEFAULT_BRANDING.appUrl}"`);
+        assertNoJargon(html);
+        assertNoJargon(text);
+        assertNoJargon(subject);
+    });
+
+    it('account-secured formats the ISO timestamp lca-api sends, per locale', async () => {
+        const iso = '2026-11-02T15:04:05.123Z';
+        const en = await renderEmail('account-secured', DEFAULT_BRANDING, { securedAt: iso });
+        const es = await renderEmail('account-secured', DEFAULT_BRANDING, { securedAt: iso }, 'es');
+
+        expect(en.text).not.toContain(iso);
+        expect(en.text).toContain('November 2, 2026');
+        expect(en.text).toContain('UTC');
+        expect(es.text).toContain('2 de noviembre de 2026');
+        expect(es.subject).not.toBe(en.subject);
+    });
+
+    it('account-secured carries tenant branding and the tenant support address', async () => {
+        const { html, text } = await renderEmail('account-secured', VETPASS_BRANDING, {
+            securedAt: 'October 2, 2026, 3:00 PM',
+        });
+
+        expect(html).toContain('VetPass');
+        expect(text).toContain(`Contact ${VETPASS_BRANDING.supportEmail} right away`);
+        expect(html).toContain(`href="${VETPASS_BRANDING.appUrl}"`);
+        expect(text).not.toContain(DEFAULT_BRANDING.supportEmail);
+    });
+
+    it('account-secured points to the organization when the tenant has no support address', async () => {
+        const { text } = await renderEmail(
+            'account-secured',
+            { ...DEFAULT_BRANDING, supportEmail: '' },
+            TEMPLATE_FIXTURES['account-secured']
+        );
+
+        expect(text).not.toContain('Contact  right away');
+        expect(text).toContain(
+            `Contact the organization that gave you access to ${DEFAULT_BRANDING.brandName} right away`
+        );
+        expect(text).not.toContain('I lost access to my school email or login');
+    });
+
+    it('all escrow hold templates include the "This wasn\'t me" cancel CTA when a cancel URL is present', async () => {
+        const started = await renderEmail(
+            'escrow-hold-started',
+            DEFAULT_BRANDING,
+            TEMPLATE_FIXTURES['escrow-hold-started']
+        );
+        const reminder = await renderEmail(
+            'escrow-hold-reminder',
+            DEFAULT_BRANDING,
+            TEMPLATE_FIXTURES['escrow-hold-reminder']
+        );
+        const pinLocked = await renderEmail(
+            'escrow-pin-locked',
+            DEFAULT_BRANDING,
+            TEMPLATE_FIXTURES['escrow-pin-locked']
+        );
+
+        // Plain text output has no HTML entity escaping, so the apostrophe is literal.
+        for (const { text } of [started, reminder, pinLocked]) {
+            expect(text).toContain("This wasn't me");
+            expect(text).toContain('Cancel recovery');
+        }
+    });
+});
+
 // ---------------------------------------------------------------------------
 // Branding tests — custom branding flows through to rendered output
 // ---------------------------------------------------------------------------

package/src/i18n.ts

@@ -108,3 +108,36 @@ export const interpolate = (template: string, params: Record<string, string | un
         const value = params[key];
         return value === undefined ? match : value;
     });
+
+/**
+ * `{ locale }` when set, `{}` otherwise — spread into props whose `locale` is optional
+ * so an absent locale is omitted rather than passed as `undefined`
+ * (safe under `exactOptionalPropertyTypes`).
+ */
+export const localeProp = (locale: string | null | undefined): { locale?: string } =>
+    locale === undefined || locale === null ? {} : { locale };
+
+/**
+ * lca-api passes ISO timestamps for security notices; show them as a readable date in
+ * the recipient's language. The recipient's time zone is unknown, so the time is shown
+ * in UTC and labelled as such. Anything that is not an ISO timestamp (previews,
+ * pre-formatted text) is shown as is.
+ */
+export const formatNoticeTimestamp = (value: string, locale: NotificationLocale): string => {
+    if (!/^\d{4}-\d{2}-\d{2}T/.test(value)) return value;
+
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime())) return value;
+
+    try {
+        return new Intl.DateTimeFormat(locale, {
+            dateStyle: 'long',
+            timeStyle: 'short',
+            timeZone: 'UTC',
+        })
+            .format(date)
+            .concat(' UTC');
+    } catch {
+        return value;
+    }
+};

package/src/index.ts

@@ -39,7 +39,15 @@ export type {
     GuardianRejectedCredentialData,
     CredentialUpdatedData,
     AccountSignInChangedData,
+    EscrowHoldStartedData,
+    EscrowHoldReminderData,
+    EscrowHoldReleasedData,
+    EscrowHoldCancelledData,
+    EscrowPinLockedData,
+    EscrowPinSignInData,
+    AccountSecuredData,
 } from './render';
+export type { EscrowHoldCancelledReason } from './templates/escrow-hold-cancelled';
 
 // SMS rendering
 export { renderSms } from './sms';

package/src/previews/account-secured-scenarios.tsx

@@ -0,0 +1,41 @@
+/**
+ * account-secured — all preview scenarios stacked.
+ */
+
+import * as React from 'react';
+
+import { AccountSecured } from '../templates/account-secured';
+import { LEARNCARD_BRANDING, VETPASS_BRANDING, ScenarioDivider } from './_fixtures';
+
+export default function AccountSecuredScenarios() {
+    return (
+        <>
+            <ScenarioDivider label="Default (LearnCard)" />
+            <AccountSecured branding={LEARNCARD_BRANDING} securedAt="October 2, 2026, 3:00 PM" />
+
+            <ScenarioDivider label="Spanish" />
+            <AccountSecured
+                branding={LEARNCARD_BRANDING}
+                securedAt="2 de octubre de 2026, 3:00 p.m."
+                locale="es"
+            />
+
+            <ScenarioDivider label="French" />
+            <AccountSecured
+                branding={LEARNCARD_BRANDING}
+                securedAt="2 octobre 2026, 15h00"
+                locale="fr"
+            />
+
+            <ScenarioDivider label="Arabic (RTL)" />
+            <AccountSecured
+                branding={LEARNCARD_BRANDING}
+                securedAt="2 أكتوبر 2026، 3:00 م"
+                locale="ar"
+            />
+
+            <ScenarioDivider label="VetPass tenant branding" />
+            <AccountSecured branding={VETPASS_BRANDING} securedAt="October 2, 2026, 3:00 PM" />
+        </>
+    );
+}

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"
+            />
+        </>
+    );
+}