@learncard/email-templates 1.2.0 → 1.2.2

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

@@ -0,0 +1,212 @@
+/**
+ * EscrowHoldCancelled — confirms that a pending account recovery request was
+ * cancelled and no further action will be taken.
+ *
+ * Used by: lca-api recovery hold routes (templateId: 'escrow-hold-cancelled')
+ */
+
+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 { resolveCatalogLocale, interpolate, SHARED } from '../i18n';
+
+/** Why the pending recovery request was cancelled. */
+export type EscrowHoldCancelledReason = 'user' | 'superseded' | 'pin-locked' | 'release-failed';
+
+export interface EscrowHoldCancelledProps {
+    branding: TenantBranding;
+    /** Human-readable timestamp the request was cancelled. */
+    cancelledAt: string;
+    /** Why the request was cancelled. Omit for a generic message. */
+    reason?: EscrowHoldCancelledReason;
+    /** Recipient locale (BCP-47). Defaults to English. */
+    locale?: string;
+}
+
+type Strings = {
+    preview: string;
+    heading: string;
+    body: (cancelledAt: string) => React.ReactNode;
+    reasonText: (reason?: EscrowHoldCancelledReason) => string;
+    sincerely: string;
+    subject: string;
+};
+
+const EN: Strings = {
+    preview: 'Your recovery request was cancelled',
+    heading: 'Recovery Request Cancelled',
+    body: cancelledAt => (
+        <>
+            Your account recovery request was cancelled on <strong>{cancelledAt}</strong>.
+        </>
+    ),
+    reasonText: reason => {
+        switch (reason) {
+            case 'user':
+                return 'You cancelled this request. No further action is needed.';
+            case 'superseded':
+                return 'A newer recovery request replaced this one.';
+            case 'pin-locked':
+                return 'This request was cancelled after too many incorrect PIN attempts.';
+            case 'release-failed':
+                return 'This request could not be completed and was cancelled automatically.';
+            default:
+                return 'No further action is needed.';
+        }
+    },
+    sincerely: 'Sincerely,',
+    subject: 'Recovery request cancelled',
+};
+
+const ES: Strings = {
+    preview: 'Se canceló tu solicitud de recuperación',
+    heading: 'Solicitud de Recuperación Cancelada',
+    body: cancelledAt => (
+        <>
+            Tu solicitud de recuperación de cuenta se canceló el <strong>{cancelledAt}</strong>.
+        </>
+    ),
+    reasonText: reason => {
+        switch (reason) {
+            case 'user':
+                return 'Cancelaste esta solicitud. No se requiere ninguna otra acción.';
+            case 'superseded':
+                return 'Una solicitud de recuperación más reciente reemplazó a esta.';
+            case 'pin-locked':
+                return 'Esta solicitud se canceló tras demasiados intentos incorrectos de PIN.';
+            case 'release-failed':
+                return 'Esta solicitud no pudo completarse y se canceló automáticamente.';
+            default:
+                return 'No se requiere ninguna otra acción.';
+        }
+    },
+    sincerely: 'Atentamente,',
+    subject: 'Solicitud de recuperación cancelada',
+};
+
+const FR: Strings = {
+    preview: 'Votre demande de récupération a été annulée',
+    heading: 'Demande de Récupération Annulée',
+    body: cancelledAt => (
+        <>
+            Votre demande de récupération de compte a été annulée le <strong>{cancelledAt}</strong>.
+        </>
+    ),
+    reasonText: reason => {
+        switch (reason) {
+            case 'user':
+                return 'Vous avez annulé cette demande. Aucune autre action n\u2019est nécessaire.';
+            case 'superseded':
+                return 'Une demande de récupération plus récente a remplacé celle-ci.';
+            case 'pin-locked':
+                return 'Cette demande a été annulée après trop de tentatives de code PIN incorrectes.';
+            case 'release-failed':
+                return 'Cette demande n\u2019a pas pu aboutir et a été annulée automatiquement.';
+            default:
+                return 'Aucune autre action n\u2019est nécessaire.';
+        }
+    },
+    sincerely: 'Cordialement,',
+    subject: 'Demande de récupération annulée',
+};
+
+const AR: Strings = {
+    preview: 'تم إلغاء طلب الاستعادة الخاص بك',
+    heading: 'تم إلغاء طلب الاستعادة',
+    body: cancelledAt => (
+        <>
+            تم إلغاء طلب استعادة حسابك في <strong>{cancelledAt}</strong>.
+        </>
+    ),
+    reasonText: reason => {
+        switch (reason) {
+            case 'user':
+                return 'لقد ألغيت هذا الطلب. لا حاجة لأي إجراء آخر.';
+            case 'superseded':
+                return 'حلّ طلب استعادة أحدث محل هذا الطلب.';
+            case 'pin-locked':
+                return 'تم إلغاء هذا الطلب بعد عدة محاولات خاطئة لإدخال رمز PIN.';
+            case 'release-failed':
+                return 'تعذّر إكمال هذا الطلب وتم إلغاؤه تلقائيًا.';
+            default:
+                return 'لا حاجة لأي إجراء آخر.';
+        }
+    },
+    sincerely: 'مع التحيات،',
+    subject: 'تم إلغاء طلب الاستعادة',
+};
+
+const STRINGS: Record<NotificationLocale, Strings> = { en: EN, es: ES, fr: FR, ar: AR };
+
+export const EscrowHoldCancelled: React.FC<EscrowHoldCancelledProps> = ({
+    branding,
+    cancelledAt,
+    reason,
+    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(cancelledAt)}</Text>
+
+            <Text style={paragraph}>{s.reasonText(reason)}</Text>
+
+            <Text style={signOff}>
+                {s.sincerely}
+                <br />
+                {interpolate(SHARED[resolveCatalogLocale(locale)].teamSignature, {
+                    brandName: branding.brandName,
+                })}
+            </Text>
+        </Layout>
+    );
+};
+
+export const getEscrowHoldCancelledSubject = (_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 signOff: React.CSSProperties = {
+    fontSize: 14,
+    color: '#374151',
+    lineHeight: '20px',
+    margin: '24px 0 0',
+};
+
+// ---------------------------------------------------------------------------
+// Preview
+// ---------------------------------------------------------------------------
+
+export default function Preview() {
+    return (
+        <EscrowHoldCancelled
+            branding={DEFAULT_BRANDING}
+            cancelledAt="September 26, 2026, 9:15 AM"
+            reason="user"
+        />
+    );
+}

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

@@ -0,0 +1,184 @@
+/**
+ * EscrowHoldReleased — confirms that a previously requested account recovery
+ * has completed and access has been restored.
+ *
+ * Used by: lca-api recovery hold routes (templateId: 'escrow-hold-released')
+ */
+
+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 EscrowHoldReleasedProps {
+    branding: TenantBranding;
+    /** Human-readable timestamp access was restored. */
+    completedAt: string;
+    /** Optional support link shown as a CTA (falls back to the footer's mailto link). */
+    supportUrl?: string;
+    /** Recipient locale (BCP-47). Defaults to English. */
+    locale?: string;
+}
+
+type Strings = {
+    preview: string;
+    heading: string;
+    body: (completedAt: string) => React.ReactNode;
+    warning: string;
+    button: string;
+    sincerely: string;
+    subject: string;
+};
+
+const EN: Strings = {
+    preview: 'Your account was recovered',
+    heading: 'Your Account Was Recovered',
+    body: completedAt => (
+        <>
+            Access to your account was restored on <strong>{completedAt}</strong>.
+        </>
+    ),
+    warning: "If this wasn't you, contact support immediately.",
+    button: 'Contact Support',
+    sincerely: 'Sincerely,',
+    subject: 'Your account was recovered',
+};
+
+const ES: Strings = {
+    preview: 'Tu cuenta fue recuperada',
+    heading: 'Tu Cuenta Fue Recuperada',
+    body: completedAt => (
+        <>
+            Se restableció el acceso a tu cuenta el <strong>{completedAt}</strong>.
+        </>
+    ),
+    warning: 'Si no fuiste tú, comunícate con soporte de inmediato.',
+    button: 'Contactar con soporte',
+    sincerely: 'Atentamente,',
+    subject: 'Tu cuenta fue recuperada',
+};
+
+const FR: Strings = {
+    preview: 'Votre compte a été récupéré',
+    heading: 'Votre Compte a Été Récupéré',
+    body: completedAt => (
+        <>
+            L\u2019accès à votre compte a été rétabli le <strong>{completedAt}</strong>.
+        </>
+    ),
+    warning:
+        'Si vous n\u2019êtes pas à l\u2019origine de cette action, contactez immédiatement l\u2019assistance.',
+    button: 'Contacter le support',
+    sincerely: 'Cordialement,',
+    subject: 'Votre compte a été récupéré',
+};
+
+const AR: Strings = {
+    preview: 'تمت استعادة حسابك',
+    heading: 'تمت استعادة حسابك',
+    body: completedAt => (
+        <>
+            تمت استعادة الوصول إلى حسابك في <strong>{completedAt}</strong>.
+        </>
+    ),
+    warning: 'إذا لم يكن هذا أنت، فتواصل مع الدعم فورًا.',
+    button: 'تواصل مع الدعم',
+    sincerely: 'مع التحيات،',
+    subject: 'تمت استعادة حسابك',
+};
+
+const STRINGS: Record<NotificationLocale, Strings> = { en: EN, es: ES, fr: FR, ar: AR };
+
+export const EscrowHoldReleased: React.FC<EscrowHoldReleasedProps> = ({
+    branding,
+    completedAt,
+    supportUrl,
+    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(completedAt)}</Text>
+
+            <Text style={warning}>{s.warning}</Text>
+
+            {supportUrl && (
+                <Section style={buttonWrapper}>
+                    <EmailButton href={supportUrl} branding={branding}>
+                        {s.button}
+                    </EmailButton>
+                </Section>
+            )}
+
+            <Text style={signOff}>
+                {s.sincerely}
+                <br />
+                {interpolate(SHARED[resolveCatalogLocale(locale)].teamSignature, {
+                    brandName: branding.brandName,
+                })}
+            </Text>
+
+            {supportUrl && <LinkFallback href={supportUrl} locale={locale} />}
+        </Layout>
+    );
+};
+
+export const getEscrowHoldReleasedSubject = (_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 (
+        <EscrowHoldReleased
+            branding={DEFAULT_BRANDING}
+            completedAt="October 2, 2026, 3:00 PM"
+            supportUrl="https://learncard.app/support"
+        />
+    );
+}

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

@@ -0,0 +1,184 @@
+/**
+ * EscrowHoldReminder — reminds a user that a pending account recovery request
+ * is about to complete, and gives them one more chance to cancel it.
+ *
+ * Used by: lca-api recovery hold routes (templateId: 'escrow-hold-reminder')
+ */
+
+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 EscrowHoldReminderProps {
+    branding: TenantBranding;
+    /** Human-readable timestamp access will be restored, unless cancelled. */
+    releaseAfter: string;
+    /** Link that cancels the pending recovery request. */
+    cancelUrl: string;
+    /** Recipient locale (BCP-47). Defaults to English. */
+    locale?: string;
+}
+
+type Strings = {
+    preview: string;
+    heading: string;
+    body: (releaseAfter: string) => React.ReactNode;
+    warning: string;
+    button: string;
+    sincerely: string;
+    subject: string;
+};
+
+const EN: Strings = {
+    preview: 'Recovery completes tomorrow',
+    heading: 'Recovery Completes Tomorrow',
+    body: releaseAfter => (
+        <>
+            Your account recovery will complete on <strong>{releaseAfter}</strong> unless you cancel
+            it.
+        </>
+    ),
+    warning: "If this wasn't you, cancel now.",
+    button: "This wasn't me \u2014 Cancel recovery",
+    sincerely: 'Sincerely,',
+    subject: 'Recovery completes tomorrow',
+};
+
+const ES: Strings = {
+    preview: 'La recuperación se completa mañana',
+    heading: 'La Recuperación se Completa Mañana',
+    body: releaseAfter => (
+        <>
+            La recuperación de tu cuenta se completará el <strong>{releaseAfter}</strong> a menos
+            que la canceles.
+        </>
+    ),
+    warning: 'Si no fuiste tú, cancélalo ahora.',
+    button: 'No fui yo \u2014 Cancelar recuperación',
+    sincerely: 'Atentamente,',
+    subject: 'La recuperación se completa mañana',
+};
+
+const FR: Strings = {
+    preview: 'La récupération se termine demain',
+    heading: 'La Récupération se Termine Demain',
+    body: releaseAfter => (
+        <>
+            La récupération de votre compte sera terminée le <strong>{releaseAfter}</strong> sauf si
+            vous l\u2019annulez.
+        </>
+    ),
+    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 se termine demain',
+};
+
+const AR: Strings = {
+    preview: 'تكتمل الاستعادة غدًا',
+    heading: 'تكتمل الاستعادة غدًا',
+    body: releaseAfter => (
+        <>
+            ستكتمل استعادة حسابك في <strong>{releaseAfter}</strong> ما لم تقم بإلغائها.
+        </>
+    ),
+    warning: 'إذا لم يكن هذا أنت، ألغِ الطلب الآن.',
+    button: 'لم يكن أنا \u2014 إلغاء الاستعادة',
+    sincerely: 'مع التحيات،',
+    subject: 'تكتمل الاستعادة غدًا',
+};
+
+const STRINGS: Record<NotificationLocale, Strings> = { en: EN, es: ES, fr: FR, ar: AR };
+
+export const EscrowHoldReminder: React.FC<EscrowHoldReminderProps> = ({
+    branding,
+    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(releaseAfter)}</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 getEscrowHoldReminderSubject = (_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 (
+        <EscrowHoldReminder
+            branding={DEFAULT_BRANDING}
+            releaseAfter="October 2, 2026, 3:00 PM"
+            cancelUrl="https://learncard.app/recovery/cancel?token=abc123"
+        />
+    );
+}