@learncard/email-templates 1.1.0 → 1.2.1

package/src/templates/escrow-hold-started.tsx

@@ -0,0 +1,216 @@
+/**
+ * EscrowHoldStarted — notifies a user that an account recovery request was
+ * started and gives them a way to cancel it if it wasn't them.
+ *
+ * Used by: lca-api recovery hold routes (templateId: 'escrow-hold-started')
+ */
+
+import { Text, Section } 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 { EmailButton } from '../components/EmailButton';
+import { LinkFallback } from '../components/LinkFallback';
+import type { NotificationLocale } from '../i18n';
+import { resolveCatalogLocale, interpolate, SHARED } from '../i18n';
+
+export interface EscrowHoldStartedProps {
+    branding: TenantBranding;
+    /** Human-readable timestamp the recovery request was made. */
+    requestedAt: string;
+    /** Human-readable timestamp access will be restored, unless cancelled. */
+    releaseAfter: string;
+    /** Link that cancels the pending recovery request. */
+    cancelUrl: string;
+    /** Optional human-readable hint about where the request came from (e.g. browser/OS). */
+    deviceHint?: string;
+    /** Recipient locale (BCP-47). Defaults to English. */
+    locale?: string;
+}
+
+type Strings = {
+    preview: string;
+    heading: string;
+    body: (requestedAt: string, releaseAfter: string) => React.ReactNode;
+    deviceHint: (hint: string) => React.ReactNode;
+    warning: string;
+    button: string;
+    sincerely: string;
+    subject: string;
+};
+
+const EN: Strings = {
+    preview: 'Account recovery started',
+    heading: 'Account Recovery Started',
+    body: (requestedAt, releaseAfter) => (
+        <>
+            Someone started recovering your account on <strong>{requestedAt}</strong>. Access will
+            be restored on <strong>{releaseAfter}</strong> unless you cancel.
+        </>
+    ),
+    deviceHint: hint => (
+        <>
+            The request came from <strong>{hint}</strong>.
+        </>
+    ),
+    warning: "If this wasn't you, cancel now.",
+    button: "This wasn't me \u2014 Cancel recovery",
+    sincerely: 'Sincerely,',
+    subject: 'Account recovery started',
+};
+
+const ES: Strings = {
+    preview: 'Se inició la recuperación de tu cuenta',
+    heading: 'Recuperación de Cuenta Iniciada',
+    body: (requestedAt, releaseAfter) => (
+        <>
+            Alguien inició la recuperación de tu cuenta el <strong>{requestedAt}</strong>. El acceso
+            se restablecerá el <strong>{releaseAfter}</strong> a menos que la canceles.
+        </>
+    ),
+    deviceHint: hint => (
+        <>
+            La solicitud provino de <strong>{hint}</strong>.
+        </>
+    ),
+    warning: 'Si no fuiste tú, cancélalo ahora.',
+    button: 'No fui yo \u2014 Cancelar recuperación',
+    sincerely: 'Atentamente,',
+    subject: 'Se inició la recuperación de tu cuenta',
+};
+
+const FR: Strings = {
+    preview: 'La récupération de votre compte a commencé',
+    heading: 'Récupération de Compte Commencée',
+    body: (requestedAt, releaseAfter) => (
+        <>
+            Quelqu\u2019un a commencé à récupérer votre compte le <strong>{requestedAt}</strong>.
+            L\u2019accès sera rétabli le <strong>{releaseAfter}</strong> sauf si vous annulez.
+        </>
+    ),
+    deviceHint: hint => (
+        <>
+            La demande provient de <strong>{hint}</strong>.
+        </>
+    ),
+    warning: 'Si ce n\u2019était pas vous, annulez dès maintenant.',
+    button: 'Ce n\u2019était pas moi \u2014 Annuler la récupération',
+    sincerely: 'Cordialement,',
+    subject: 'La récupération de votre compte a commencé',
+};
+
+const AR: Strings = {
+    preview: 'بدأت عملية استعادة حسابك',
+    heading: 'بدأت استعادة الحساب',
+    body: (requestedAt, releaseAfter) => (
+        <>
+            بدأ شخص ما باستعادة حسابك في <strong>{requestedAt}</strong>. ستتم استعادة الوصول في{' '}
+            <strong>{releaseAfter}</strong> ما لم تقم بالإلغاء.
+        </>
+    ),
+    deviceHint: hint => (
+        <>
+            جاء الطلب من <strong>{hint}</strong>.
+        </>
+    ),
+    warning: 'إذا لم يكن هذا أنت، ألغِ الطلب الآن.',
+    button: 'لم يكن أنا \u2014 إلغاء الاستعادة',
+    sincerely: 'مع التحيات،',
+    subject: 'بدأت عملية استعادة حسابك',
+};
+
+const STRINGS: Record<NotificationLocale, Strings> = { en: EN, es: ES, fr: FR, ar: AR };
+
+export const EscrowHoldStarted: React.FC<EscrowHoldStartedProps> = ({
+    branding,
+    requestedAt,
+    releaseAfter,
+    cancelUrl,
+    deviceHint,
+    locale,
+}) => {
+    const s = STRINGS[resolveCatalogLocale(locale)];
+
+    return (
+        <Layout branding={branding} locale={locale} preview={s.preview}>
+            <Text style={heading}>{s.heading}</Text>
+
+            <Text style={paragraph}>{s.body(requestedAt, releaseAfter)}</Text>
+
+            {deviceHint && <Text style={paragraph}>{s.deviceHint(deviceHint)}</Text>}
+
+            <Text style={warning}>{s.warning}</Text>
+
+            <Section style={buttonWrapper}>
+                <EmailButton href={cancelUrl} branding={branding}>
+                    {s.button}
+                </EmailButton>
+            </Section>
+
+            <Text style={signOff}>
+                {s.sincerely}
+                <br />
+                {interpolate(SHARED[resolveCatalogLocale(locale)].teamSignature, {
+                    brandName: branding.brandName,
+                })}
+            </Text>
+
+            <LinkFallback href={cancelUrl} locale={locale} />
+        </Layout>
+    );
+};
+
+export const getEscrowHoldStartedSubject = (_branding: TenantBranding, locale?: string): string =>
+    STRINGS[resolveCatalogLocale(locale)].subject;
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+const heading: React.CSSProperties = {
+    fontSize: 24,
+    fontWeight: 600,
+    color: '#111827',
+    margin: '0 0 24px',
+};
+
+const paragraph: React.CSSProperties = {
+    fontSize: 16,
+    color: '#374151',
+    lineHeight: '24px',
+    margin: '0 0 24px',
+};
+
+const warning: React.CSSProperties = {
+    ...paragraph,
+    fontWeight: 600,
+};
+
+const buttonWrapper: React.CSSProperties = {
+    margin: '0 0 24px',
+};
+
+const signOff: React.CSSProperties = {
+    fontSize: 14,
+    color: '#374151',
+    lineHeight: '20px',
+    margin: '24px 0 0',
+};
+
+// ---------------------------------------------------------------------------
+// Preview
+// ---------------------------------------------------------------------------
+
+export default function Preview() {
+    return (
+        <EscrowHoldStarted
+            branding={DEFAULT_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"
+        />
+    );
+}

package/src/templates/escrow-pin-locked.tsx

@@ -0,0 +1,233 @@
+/**
+ * EscrowPinLocked — notifies a user that their recovery PIN has been disabled
+ * after too many incorrect attempts. The slower, waiting-period recovery path
+ * is unaffected and still available.
+ *
+ * Used by: lca-api recovery hold routes (templateId: 'escrow-pin-locked')
+ */
+
+import { Text, Section } 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 { EmailButton } from '../components/EmailButton';
+import { LinkFallback } from '../components/LinkFallback';
+import type { NotificationLocale } from '../i18n';
+import { resolveCatalogLocale, interpolate, SHARED } from '../i18n';
+
+export interface EscrowPinLockedProps {
+    branding: TenantBranding;
+    /** Human-readable timestamp the PIN was locked. */
+    lockedAt: string;
+    /** Human-readable timestamp the waiting-period recovery will complete, if one is pending. */
+    releaseAfter?: string;
+    /** Link that cancels a pending waiting-period recovery request, if one is pending. */
+    cancelUrl?: string;
+    /** Recipient locale (BCP-47). Defaults to English. */
+    locale?: string;
+}
+
+type Strings = {
+    preview: string;
+    heading: string;
+    body: (lockedAt: string) => React.ReactNode;
+    fallbackAvailable: (releaseAfter?: string) => React.ReactNode;
+    warning: string;
+    button: string;
+    sincerely: string;
+    subject: string;
+};
+
+const EN: Strings = {
+    preview: 'Recovery PIN locked',
+    heading: 'Recovery PIN Locked',
+    body: lockedAt => (
+        <>
+            Too many incorrect PIN attempts were made on <strong>{lockedAt}</strong>. The PIN is now
+            disabled.
+        </>
+    ),
+    fallbackAvailable: releaseAfter =>
+        releaseAfter ? (
+            <>
+                The waiting-period recovery is still available and will complete on{' '}
+                <strong>{releaseAfter}</strong> unless you cancel it.
+            </>
+        ) : (
+            <>The waiting-period recovery is still available.</>
+        ),
+    warning: "If this wasn't you, cancel now.",
+    button: "This wasn't me \u2014 Cancel recovery",
+    sincerely: 'Sincerely,',
+    subject: 'Recovery PIN locked',
+};
+
+const ES: Strings = {
+    preview: 'PIN de recuperación bloqueado',
+    heading: 'PIN de Recuperación Bloqueado',
+    body: lockedAt => (
+        <>
+            Se realizaron demasiados intentos incorrectos de PIN el <strong>{lockedAt}</strong>. El
+            PIN está ahora deshabilitado.
+        </>
+    ),
+    fallbackAvailable: releaseAfter =>
+        releaseAfter ? (
+            <>
+                La recuperación por periodo de espera sigue disponible y se completará el{' '}
+                <strong>{releaseAfter}</strong> a menos que la canceles.
+            </>
+        ) : (
+            <>La recuperación por periodo de espera sigue disponible.</>
+        ),
+    warning: 'Si no fuiste tú, cancélalo ahora.',
+    button: 'No fui yo \u2014 Cancelar recuperación',
+    sincerely: 'Atentamente,',
+    subject: 'PIN de recuperación bloqueado',
+};
+
+const FR: Strings = {
+    preview: 'Code PIN de récupération verrouillé',
+    heading: 'Code PIN de Récupération Verrouillé',
+    body: lockedAt => (
+        <>
+            Un trop grand nombre de tentatives de code PIN incorrectes ont eu lieu le{' '}
+            <strong>{lockedAt}</strong>. Le code PIN est désormais désactivé.
+        </>
+    ),
+    fallbackAvailable: releaseAfter =>
+        releaseAfter ? (
+            <>
+                La récupération par délai d\u2019attente reste disponible et se terminera le{' '}
+                <strong>{releaseAfter}</strong> sauf si vous l\u2019annulez.
+            </>
+        ) : (
+            <>La récupération par délai d\u2019attente reste disponible.</>
+        ),
+    warning: 'Si ce n\u2019était pas vous, annulez dès maintenant.',
+    button: 'Ce n\u2019était pas moi \u2014 Annuler la récupération',
+    sincerely: 'Cordialement,',
+    subject: 'Code PIN de récupération verrouillé',
+};
+
+const AR: Strings = {
+    preview: 'تم قفل رمز PIN الخاص بالاستعادة',
+    heading: 'تم قفل رمز PIN الخاص بالاستعادة',
+    body: lockedAt => (
+        <>
+            تم إجراء عدة محاولات خاطئة لإدخال رمز PIN في <strong>{lockedAt}</strong>. تم الآن تعطيل
+            رمز PIN.
+        </>
+    ),
+    fallbackAvailable: releaseAfter =>
+        releaseAfter ? (
+            <>
+                لا تزال الاستعادة بفترة الانتظار متاحة وستكتمل في <strong>{releaseAfter}</strong> ما
+                لم تقم بإلغائها.
+            </>
+        ) : (
+            <>لا تزال الاستعادة بفترة الانتظار متاحة.</>
+        ),
+    warning: 'إذا لم يكن هذا أنت، ألغِ الطلب الآن.',
+    button: 'لم يكن أنا \u2014 إلغاء الاستعادة',
+    sincerely: 'مع التحيات،',
+    subject: 'تم قفل رمز PIN الخاص بالاستعادة',
+};
+
+const STRINGS: Record<NotificationLocale, Strings> = { en: EN, es: ES, fr: FR, ar: AR };
+
+export const EscrowPinLocked: React.FC<EscrowPinLockedProps> = ({
+    branding,
+    lockedAt,
+    releaseAfter,
+    cancelUrl,
+    locale,
+}) => {
+    const s = STRINGS[resolveCatalogLocale(locale)];
+
+    return (
+        <Layout branding={branding} locale={locale} preview={s.preview}>
+            <Text style={heading}>{s.heading}</Text>
+
+            <Text style={paragraph}>{s.body(lockedAt)}</Text>
+
+            <Text style={paragraph}>{s.fallbackAvailable(releaseAfter)}</Text>
+
+            {cancelUrl && (
+                <>
+                    <Text style={warning}>{s.warning}</Text>
+
+                    <Section style={buttonWrapper}>
+                        <EmailButton href={cancelUrl} branding={branding}>
+                            {s.button}
+                        </EmailButton>
+                    </Section>
+                </>
+            )}
+
+            <Text style={signOff}>
+                {s.sincerely}
+                <br />
+                {interpolate(SHARED[resolveCatalogLocale(locale)].teamSignature, {
+                    brandName: branding.brandName,
+                })}
+            </Text>
+
+            {cancelUrl && <LinkFallback href={cancelUrl} locale={locale} />}
+        </Layout>
+    );
+};
+
+export const getEscrowPinLockedSubject = (_branding: TenantBranding, locale?: string): string =>
+    STRINGS[resolveCatalogLocale(locale)].subject;
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+const heading: React.CSSProperties = {
+    fontSize: 24,
+    fontWeight: 600,
+    color: '#111827',
+    margin: '0 0 24px',
+};
+
+const paragraph: React.CSSProperties = {
+    fontSize: 16,
+    color: '#374151',
+    lineHeight: '24px',
+    margin: '0 0 24px',
+};
+
+const warning: React.CSSProperties = {
+    ...paragraph,
+    fontWeight: 600,
+};
+
+const buttonWrapper: React.CSSProperties = {
+    margin: '0 0 24px',
+};
+
+const signOff: React.CSSProperties = {
+    fontSize: 14,
+    color: '#374151',
+    lineHeight: '20px',
+    margin: '24px 0 0',
+};
+
+// ---------------------------------------------------------------------------
+// Preview
+// ---------------------------------------------------------------------------
+
+export default function Preview() {
+    return (
+        <EscrowPinLocked
+            branding={DEFAULT_BRANDING}
+            lockedAt="September 25, 2026, 3:00 PM"
+            releaseAfter="October 2, 2026, 3:00 PM"
+            cancelUrl="https://learncard.app/recovery/cancel?token=abc123"
+        />
+    );
+}

package/src/templates/index.ts

@@ -45,3 +45,20 @@ export type { EmailVerificationProps } from './email-verification';
 
 export { CredentialUpdated, getCredentialUpdatedSubject } from './credential-updated';
 export type { CredentialUpdatedProps } from './credential-updated';
+export { AccountSignInChanged, getAccountSignInChangedSubject } from './account-sign-in-changed';
+export type { AccountSignInChangedProps } from './account-sign-in-changed';
+
+export { EscrowHoldStarted, getEscrowHoldStartedSubject } from './escrow-hold-started';
+export type { EscrowHoldStartedProps } from './escrow-hold-started';
+
+export { EscrowHoldReminder, getEscrowHoldReminderSubject } from './escrow-hold-reminder';
+export type { EscrowHoldReminderProps } from './escrow-hold-reminder';
+
+export { EscrowHoldReleased, getEscrowHoldReleasedSubject } from './escrow-hold-released';
+export type { EscrowHoldReleasedProps } from './escrow-hold-released';
+
+export { EscrowHoldCancelled, getEscrowHoldCancelledSubject } from './escrow-hold-cancelled';
+export type { EscrowHoldCancelledProps, EscrowHoldCancelledReason } from './escrow-hold-cancelled';
+
+export { EscrowPinLocked, getEscrowPinLockedSubject } from './escrow-pin-locked';
+export type { EscrowPinLockedProps } from './escrow-pin-locked';

package/src/templates/recovery-key.tsx

@@ -17,6 +17,7 @@ import { resolveCatalogLocale, interpolate, SHARED } from '../i18n';
 export interface RecoveryKeyProps {
     branding: TenantBranding;
     recoveryKey: string;
+    confirmationCode: string;
     /** Recipient locale (BCP-47). Defaults to English. */
     locale?: string;
 }
@@ -29,6 +30,8 @@ const STRINGS: Record<
         greeting: string;
         body: (brandName: string) => string;
         codeLabel: string;
+        confirmationCodeLabel: string;
+        confirmationInstruction: string;
         recoverInstruction: () => React.ReactNode;
         notRequested: string;
         passport: string;
@@ -43,6 +46,9 @@ const STRINGS: Record<
         body: b =>
             `Keep this email safe. You can use the recovery key below to regain access to your ${b} account if you lose your device.`,
         codeLabel: 'Recovery Key \u2014 do NOT share this with anyone',
+        confirmationCodeLabel: 'Confirmation code',
+        confirmationInstruction:
+            'Enter this code in the app to confirm that you received your recovery key.',
         recoverInstruction: () => (
             <>
                 To recover your account, choose <strong>&ldquo;Recover via Email&rdquo;</strong> in
@@ -62,6 +68,9 @@ const STRINGS: Record<
         body: b =>
             `Guarda este correo en un lugar seguro. Puedes usar la clave de recuperación siguiente para recuperar el acceso a tu cuenta de ${b} si pierdes tu dispositivo.`,
         codeLabel: 'Clave de recuperación \u2014 NO la compartas con nadie',
+        confirmationCodeLabel: 'Código de confirmación',
+        confirmationInstruction:
+            'Introduce este código en la aplicación para confirmar que recibiste tu clave de recuperación.',
         recoverInstruction: () => (
             <>
                 Para recuperar tu cuenta, elige <strong>&ldquo;Recuperar por correo&rdquo;</strong>{' '}
@@ -81,6 +90,9 @@ const STRINGS: Record<
         body: b =>
             `Conservez cet e-mail en sécurité. Vous pouvez utiliser la clé de récupération ci-dessous pour retrouver l\u2019accès à votre compte ${b} si vous perdez votre appareil.`,
         codeLabel: 'Clé de récupération \u2014 NE la partagez avec PERSONNE',
+        confirmationCodeLabel: 'Code de confirmation',
+        confirmationInstruction:
+            'Saisissez ce code dans l’application pour confirmer que vous avez reçu votre clé de récupération.',
         recoverInstruction: () => (
             <>
                 Pour récupérer votre compte, choisissez{' '}
@@ -103,6 +115,9 @@ const STRINGS: Record<
         body: b =>
             `احتفظ بهذا البريد في مكان آمن. يمكنك استخدام مفتاح الاستعادة أدناه لاستعادة الوصول إلى حسابك في ${b} إذا فقدت جهازك.`,
         codeLabel: 'مفتاح الاستعادة \u2014 لا تشاركه مع أي شخص إطلاقًا',
+        confirmationCodeLabel: 'رمز التأكيد',
+        confirmationInstruction:
+            'أدخل هذا الرمز في التطبيق لتأكيد استلام مفتاح الاستعادة الخاص بك.',
         recoverInstruction: () => (
             <>
                 لاستعادة حسابك، اختر <strong>&laquo;الاستعادة عبر البريد&raquo;</strong> في التطبيق
@@ -117,7 +132,12 @@ const STRINGS: Record<
     },
 };
 
-export const RecoveryKey: React.FC<RecoveryKeyProps> = ({ branding, recoveryKey, locale }) => {
+export const RecoveryKey: React.FC<RecoveryKeyProps> = ({
+    branding,
+    recoveryKey,
+    confirmationCode,
+    locale,
+}) => {
     const s = STRINGS[resolveCatalogLocale(locale)];
 
     return (
@@ -130,6 +150,10 @@ export const RecoveryKey: React.FC<RecoveryKeyProps> = ({ branding, recoveryKey,
 
             <CodeBlock code={recoveryKey} label={s.codeLabel} variant="key" />
 
+            <CodeBlock code={confirmationCode} label={s.confirmationCodeLabel} variant="code" />
+
+            <Text style={paragraph}>{s.confirmationInstruction}</Text>
+
             <Text style={paragraph}>{s.recoverInstruction()}</Text>
 
             <Text style={muted}>{s.notRequested}</Text>
@@ -193,6 +217,7 @@ export default function Preview() {
         <RecoveryKey
             branding={DEFAULT_BRANDING}
             recoveryKey="mango-delta-fox-echo-bravo-seven-lima-niner"
+            confirmationCode="123456"
         />
     );
 }