@learncard/email-templates 1.2.1 → 1.2.2

package/src/templates/account-secured.tsx

@@ -0,0 +1,236 @@
+/**
+ * AccountSecured — tells the account owner that "Secure my account" ran: every other
+ * device and login was signed out and the recovery methods have to be set up again.
+ *
+ * The recipient may be an owner who did NOT do this (someone with their login and
+ * PIN ran it first) and whose own login was unlinked. So the copy never relies on the
+ * in-app "Secure my account" link. It also does not offer the app's lost-login path
+ * as the way back: the revoke itself returned every recovery method to pending and
+ * removed automatic recovery, so that path usually has nothing left to use. It sends
+ * the owner to the tenant's support address, or, when the tenant has none, to the
+ * organization that gave them access (no address is made up).
+ *
+ * Used by: lca-api `POST /keys/revoke-other-devices` (templateId: 'account-secured')
+ */
+
+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,
+    formatNoticeTimestamp,
+    localeProp,
+} from '../i18n';
+
+export interface AccountSecuredProps {
+    branding: TenantBranding;
+    /** ISO timestamp of the revoke (formatted per locale), or display text. */
+    securedAt: string;
+    /** Recipient locale (BCP-47). Defaults to English. */
+    locale?: string | undefined;
+}
+
+type Strings = {
+    preview: string;
+    heading: string;
+    body: (securedAt: string, brandName: string) => React.ReactNode;
+    ifYou: string;
+    notYouWarning: string;
+    resetWarning: string;
+    support: string;
+    supportFallback: string;
+    button: string;
+    sincerely: string;
+    subject: string;
+};
+
+const EN: Strings = {
+    preview: 'Other devices were signed out of your account',
+    heading: 'Your Account Was Secured',
+    body: (securedAt, brandName) => (
+        <>
+            On <strong>{securedAt}</strong>, someone signed in to your {brandName} account signed
+            out every other device and login. The account’s recovery methods now need to be set up
+            again.
+        </>
+    ),
+    ifYou: 'If this was you, there is nothing else to do here. Finish setting up your recovery methods in the app.',
+    notYouWarning:
+        'If this wasn’t you, someone else may have access to your account, and your own sign-in may have been removed.',
+    resetWarning:
+        'Securing the account also reset its recovery methods, so your recovery phrase, backup, passkey or recovery PIN may no longer get you back in.',
+    support: 'Contact {supportEmail} right away for help getting back into your account.',
+    supportFallback:
+        'Contact the organization that gave you access to {brandName} right away for help getting back into your account.',
+    button: 'Open {brandName}',
+    sincerely: 'Sincerely,',
+    subject: 'Other devices were signed out of your account',
+};
+
+const ES: Strings = {
+    preview: 'Se cerró la sesión de otros dispositivos en tu cuenta',
+    heading: 'Tu Cuenta Fue Protegida',
+    body: (securedAt, brandName) => (
+        <>
+            El <strong>{securedAt}</strong>, alguien con sesión iniciada en tu cuenta de {brandName}{' '}
+            cerró la sesión de todos los demás dispositivos e inicios de sesión. Ahora hay que
+            volver a configurar los métodos de recuperación de la cuenta.
+        </>
+    ),
+    ifYou: 'Si fuiste tú, no tienes que hacer nada más aquí. Termina de configurar tus métodos de recuperación en la aplicación.',
+    notYouWarning:
+        'Si no fuiste tú, es posible que otra persona tenga acceso a tu cuenta y que se haya eliminado tu propio inicio de sesión.',
+    resetWarning:
+        'Al proteger la cuenta también se restablecieron sus métodos de recuperación, así que es posible que tu frase de recuperación, copia de seguridad, llave de acceso o PIN de recuperación ya no te permitan volver a entrar.',
+    support:
+        'Escribe cuanto antes a {supportEmail} para que te ayuden a recuperar el acceso a tu cuenta.',
+    supportFallback:
+        'Comunícate cuanto antes con la organización que te dio acceso a {brandName} para que te ayuden a recuperar el acceso a tu cuenta.',
+    button: 'Abrir {brandName}',
+    sincerely: 'Atentamente,',
+    subject: 'Se cerró la sesión de otros dispositivos en tu cuenta',
+};
+
+const FR: Strings = {
+    preview: 'Les autres appareils ont été déconnectés de votre compte',
+    heading: 'Votre Compte a Été Sécurisé',
+    body: (securedAt, brandName) => (
+        <>
+            Le <strong>{securedAt}</strong>, une personne connectée à votre compte {brandName} a
+            déconnecté tous les autres appareils et connexions. Les méthodes de récupération du
+            compte doivent maintenant être configurées à nouveau.
+        </>
+    ),
+    ifYou: 'Si c’était vous, vous n’avez rien d’autre à faire ici. Terminez la configuration de vos méthodes de récupération dans l’application.',
+    notYouWarning:
+        'Si ce n’était pas vous, quelqu’un d’autre a peut-être accès à votre compte, et votre propre connexion a peut-être été supprimée.',
+    resetWarning:
+        'La sécurisation du compte a aussi réinitialisé ses méthodes de récupération : votre phrase de récupération, votre sauvegarde, votre clé d’accès ou votre code PIN de récupération ne vous permettront peut-être plus de vous reconnecter.',
+    support:
+        'Écrivez sans attendre à {supportEmail} pour obtenir de l’aide afin de récupérer l’accès à votre compte.',
+    supportFallback:
+        'Contactez sans attendre l’organisation qui vous a donné accès à {brandName} pour obtenir de l’aide afin de récupérer l’accès à votre compte.',
+    button: 'Ouvrir {brandName}',
+    sincerely: 'Cordialement,',
+    subject: 'Les autres appareils ont été déconnectés de votre compte',
+};
+
+const AR: Strings = {
+    preview: 'تم تسجيل خروج الأجهزة الأخرى من حسابك',
+    heading: 'تم تأمين حسابك',
+    body: (securedAt, brandName) => (
+        <>
+            في <strong>{securedAt}</strong>، قام شخص مسجّل الدخول إلى حسابك في {brandName} بتسجيل
+            خروج جميع الأجهزة وعمليات تسجيل الدخول الأخرى. يجب الآن إعداد طرق استعادة الحساب من
+            جديد.
+        </>
+    ),
+    ifYou: 'إذا كنت أنت، فلا داعي لفعل أي شيء آخر هنا. أكمل إعداد طرق الاستعادة في التطبيق.',
+    notYouWarning:
+        'إذا لم تكن أنت، فقد يكون لدى شخص آخر حق الوصول إلى حسابك، وربما تمت إزالة تسجيل الدخول الخاص بك.',
+    resetWarning:
+        'أدى تأمين الحساب أيضًا إلى إعادة تعيين طرق استعادته، لذلك قد لا تتمكن بعد الآن من العودة إلى حسابك باستخدام عبارة الاستعادة أو النسخة الاحتياطية أو مفتاح المرور أو رمز PIN للاستعادة.',
+    support: 'راسل {supportEmail} فورًا للحصول على مساعدة في استعادة الوصول إلى حسابك.',
+    supportFallback:
+        'تواصل فورًا مع الجهة التي منحتك الوصول إلى {brandName} للحصول على مساعدة في استعادة الوصول إلى حسابك.',
+    button: 'فتح {brandName}',
+    sincerely: 'مع التحيات،',
+    subject: 'تم تسجيل خروج الأجهزة الأخرى من حسابك',
+};
+
+const STRINGS: Record<NotificationLocale, Strings> = { en: EN, es: ES, fr: FR, ar: AR };
+
+export const AccountSecured: React.FC<AccountSecuredProps> = ({ branding, securedAt, locale }) => {
+    const catalogLocale = resolveCatalogLocale(locale);
+    const s = STRINGS[catalogLocale];
+    const { brandName, supportEmail, appUrl } = branding;
+
+    return (
+        <Layout branding={branding} preview={s.preview} {...localeProp(locale)}>
+            <Text style={heading}>{s.heading}</Text>
+
+            <Text style={paragraph}>
+                {s.body(formatNoticeTimestamp(securedAt, catalogLocale), brandName)}
+            </Text>
+
+            <Text style={paragraph}>{s.ifYou}</Text>
+
+            <Text style={warning}>{s.notYouWarning}</Text>
+
+            <Text style={paragraph}>{s.resetWarning}</Text>
+
+            <Text style={paragraph}>
+                {supportEmail
+                    ? interpolate(s.support, { supportEmail })
+                    : interpolate(s.supportFallback, { brandName })}
+            </Text>
+
+            <Section style={buttonWrapper}>
+                <EmailButton href={appUrl} branding={branding}>
+                    {interpolate(s.button, { brandName })}
+                </EmailButton>
+            </Section>
+
+            <Text style={signOff}>
+                {s.sincerely}
+                <br />
+                {interpolate(SHARED[catalogLocale].teamSignature, { brandName })}
+            </Text>
+
+            <LinkFallback href={appUrl} {...localeProp(locale)} />
+        </Layout>
+    );
+};
+
+export const getAccountSecuredSubject = (_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 <AccountSecured branding={DEFAULT_BRANDING} securedAt="October 2, 2026, 3:00 PM" />;
+}

package/src/templates/escrow-pin-sign-in.tsx

@@ -0,0 +1,197 @@
+/**
+ * EscrowPinSignIn — tells the account owner that a new device just signed in
+ * with their recovery PIN, and links to the in-app "Secure my account" action
+ * (which stops other devices and logins from signing in again and turns off the old
+ * recovery methods).
+ *
+ * Used by: lca-api `/keys/escrow/complete` for PIN releases
+ * (templateId: 'escrow-pin-sign-in')
+ */
+
+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,
+    formatNoticeTimestamp,
+    localeProp,
+} from '../i18n';
+
+export interface EscrowPinSignInProps {
+    branding: TenantBranding;
+    /** ISO timestamp of the PIN sign-in (formatted per locale), or display text. */
+    signedInAt: string;
+    /** In-app link to the "Secure my account" action. */
+    secureUrl: string;
+    /** Recipient locale (BCP-47). Defaults to English. */
+    locale?: string;
+}
+
+type Strings = {
+    preview: string;
+    heading: string;
+    body: (signedInAt: string) => React.ReactNode;
+    warning: string;
+    button: string;
+    sincerely: string;
+    subject: string;
+};
+
+const EN: Strings = {
+    preview: 'New device signed in with your PIN',
+    heading: 'New Device Signed In With Your PIN',
+    body: signedInAt => (
+        <>
+            A new device signed in to your account with your recovery PIN on{' '}
+            <strong>{signedInAt}</strong>.
+        </>
+    ),
+    warning: 'Not you? Secure your account.',
+    button: 'Secure my account',
+    sincerely: 'Sincerely,',
+    subject: 'New device signed in with your PIN',
+};
+
+const ES: Strings = {
+    preview: 'Un dispositivo nuevo inició sesión con tu PIN',
+    heading: 'Un Dispositivo Nuevo Inició Sesión con tu PIN',
+    body: signedInAt => (
+        <>
+            Un dispositivo nuevo inició sesión en tu cuenta con tu PIN de recuperación el{' '}
+            <strong>{signedInAt}</strong>.
+        </>
+    ),
+    warning: '¿No fuiste tú? Protege tu cuenta.',
+    button: 'Proteger mi cuenta',
+    sincerely: 'Atentamente,',
+    subject: 'Un dispositivo nuevo inició sesión con tu PIN',
+};
+
+const FR: Strings = {
+    preview: 'Un nouvel appareil s’est connecté avec votre code PIN',
+    heading: 'Un Nouvel Appareil S’est Connecté avec Votre Code PIN',
+    body: signedInAt => (
+        <>
+            Un nouvel appareil s’est connecté à votre compte avec votre code PIN de récupération le{' '}
+            <strong>{signedInAt}</strong>.
+        </>
+    ),
+    warning: 'Ce n’était pas vous ? Sécurisez votre compte.',
+    button: 'Sécuriser mon compte',
+    sincerely: 'Cordialement,',
+    subject: 'Un nouvel appareil s’est connecté avec votre code PIN',
+};
+
+const AR: Strings = {
+    preview: 'تم تسجيل الدخول من جهاز جديد باستخدام رمز PIN الخاص بك',
+    heading: 'تم تسجيل الدخول من جهاز جديد باستخدام رمز PIN الخاص بك',
+    body: signedInAt => (
+        <>
+            سجّل جهاز جديد الدخول إلى حسابك باستخدام رمز PIN الخاص بالاستعادة في{' '}
+            <strong>{signedInAt}</strong>.
+        </>
+    ),
+    warning: 'لم يكن أنت؟ أمّن حسابك.',
+    button: 'تأمين حسابي',
+    sincerely: 'مع التحيات،',
+    subject: 'تم تسجيل الدخول من جهاز جديد باستخدام رمز PIN الخاص بك',
+};
+
+const STRINGS: Record<NotificationLocale, Strings> = { en: EN, es: ES, fr: FR, ar: AR };
+
+export const EscrowPinSignIn: React.FC<EscrowPinSignInProps> = ({
+    branding,
+    signedInAt,
+    secureUrl,
+    locale,
+}) => {
+    const catalogLocale = resolveCatalogLocale(locale);
+    const s = STRINGS[catalogLocale];
+
+    return (
+        <Layout branding={branding} preview={s.preview} {...localeProp(locale)}>
+            <Text style={heading}>{s.heading}</Text>
+
+            <Text style={paragraph}>
+                {s.body(formatNoticeTimestamp(signedInAt, catalogLocale))}
+            </Text>
+
+            <Text style={warning}>{s.warning}</Text>
+
+            <Section style={buttonWrapper}>
+                <EmailButton href={secureUrl} branding={branding}>
+                    {s.button}
+                </EmailButton>
+            </Section>
+
+            <Text style={signOff}>
+                {s.sincerely}
+                <br />
+                {interpolate(SHARED[catalogLocale].teamSignature, {
+                    brandName: branding.brandName,
+                })}
+            </Text>
+
+            <LinkFallback href={secureUrl} {...localeProp(locale)} />
+        </Layout>
+    );
+};
+
+export const getEscrowPinSignInSubject = (_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 (
+        <EscrowPinSignIn
+            branding={DEFAULT_BRANDING}
+            signedInAt="October 2, 2026, 3:00 PM"
+            secureUrl="https://learncard.app/account/secure"
+        />
+    );
+}

package/src/templates/index.ts

@@ -1,64 +1,124 @@
-export { VerificationCode, getVerificationCodeSubject } from './verification-code';
-export type { VerificationCodeProps, VerificationCodeVariant } from './verification-code';
+// One export declaration per template module. Projects that resolve this package
+// through its `development` condition (source) typecheck without `jsx`, and TypeScript
+// reports TS6142 once per declaration that imports a .tsx module from this .ts file;
+// a separate `export type` line for the same module would add a second report.
 
-export { InboxClaim, getInboxClaimSubject } from './inbox-claim';
-export type { InboxClaimProps } from './inbox-claim';
+export {
+    VerificationCode,
+    getVerificationCodeSubject,
+    type VerificationCodeProps,
+    type VerificationCodeVariant,
+} from './verification-code';
 
-export { GuardianApproval, getGuardianApprovalSubject } from './guardian-approval';
-export type { GuardianApprovalProps } from './guardian-approval';
+export { InboxClaim, getInboxClaimSubject, type InboxClaimProps } from './inbox-claim';
 
-export { AccountApproved, getAccountApprovedSubject } from './account-approved';
-export type { AccountApprovedProps } from './account-approved';
+export {
+    GuardianApproval,
+    getGuardianApprovalSubject,
+    type GuardianApprovalProps,
+} from './guardian-approval';
 
-export { RecoveryKey, getRecoveryKeySubject } from './recovery-key';
-export type { RecoveryKeyProps } from './recovery-key';
+export {
+    AccountApproved,
+    getAccountApprovedSubject,
+    type AccountApprovedProps,
+} from './account-approved';
 
-export { EndorsementRequest, getEndorsementRequestSubject } from './endorsement-request';
-export type { EndorsementRequestProps } from './endorsement-request';
+export { RecoveryKey, getRecoveryKeySubject, type RecoveryKeyProps } from './recovery-key';
+
+export {
+    EndorsementRequest,
+    getEndorsementRequestSubject,
+    type EndorsementRequestProps,
+} from './endorsement-request';
 
 export {
     CredentialAwaitingGuardian,
     getCredentialAwaitingGuardianSubject,
+    type CredentialAwaitingGuardianProps,
 } from './credential-awaiting-guardian';
-export type { CredentialAwaitingGuardianProps } from './credential-awaiting-guardian';
 
-export { GuardianApprovedClaim, getGuardianApprovedClaimSubject } from './guardian-approved-claim';
-export type { GuardianApprovedClaimProps } from './guardian-approved-claim';
+export {
+    GuardianApprovedClaim,
+    getGuardianApprovedClaimSubject,
+    type GuardianApprovedClaimProps,
+} from './guardian-approved-claim';
 
 export {
     GuardianCredentialApproval,
     getGuardianCredentialApprovalSubject,
+    type GuardianCredentialApprovalProps,
 } from './guardian-credential-approval';
-export type { GuardianCredentialApprovalProps } from './guardian-credential-approval';
 
-export { GuardianEmailOtp, getGuardianEmailOtpSubject } from './guardian-email-otp';
-export type { GuardianEmailOtpProps } from './guardian-email-otp';
+export {
+    GuardianEmailOtp,
+    getGuardianEmailOtpSubject,
+    type GuardianEmailOtpProps,
+} from './guardian-email-otp';
 
 export {
     GuardianRejectedCredential,
     getGuardianRejectedCredentialSubject,
+    type GuardianRejectedCredentialProps,
 } from './guardian-rejected-credential';
-export type { GuardianRejectedCredentialProps } from './guardian-rejected-credential';
 
-export { EmailVerification, getEmailVerificationSubject } from './email-verification';
-export type { EmailVerificationProps } from './email-verification';
+export {
+    EmailVerification,
+    getEmailVerificationSubject,
+    type EmailVerificationProps,
+} from './email-verification';
+
+export {
+    CredentialUpdated,
+    getCredentialUpdatedSubject,
+    type CredentialUpdatedProps,
+} from './credential-updated';
+
+export {
+    AccountSignInChanged,
+    getAccountSignInChangedSubject,
+    type AccountSignInChangedProps,
+} from './account-sign-in-changed';
 
-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,
+    type EscrowHoldStartedProps,
+} from './escrow-hold-started';
+
+export {
+    EscrowHoldReminder,
+    getEscrowHoldReminderSubject,
+    type EscrowHoldReminderProps,
+} from './escrow-hold-reminder';
 
-export { EscrowHoldStarted, getEscrowHoldStartedSubject } from './escrow-hold-started';
-export type { EscrowHoldStartedProps } from './escrow-hold-started';
+export {
+    EscrowHoldReleased,
+    getEscrowHoldReleasedSubject,
+    type EscrowHoldReleasedProps,
+} from './escrow-hold-released';
 
-export { EscrowHoldReminder, getEscrowHoldReminderSubject } from './escrow-hold-reminder';
-export type { EscrowHoldReminderProps } from './escrow-hold-reminder';
+export {
+    EscrowHoldCancelled,
+    getEscrowHoldCancelledSubject,
+    type EscrowHoldCancelledProps,
+    type EscrowHoldCancelledReason,
+} from './escrow-hold-cancelled';
 
-export { EscrowHoldReleased, getEscrowHoldReleasedSubject } from './escrow-hold-released';
-export type { EscrowHoldReleasedProps } from './escrow-hold-released';
+export {
+    EscrowPinLocked,
+    getEscrowPinLockedSubject,
+    type EscrowPinLockedProps,
+} from './escrow-pin-locked';
 
-export { EscrowHoldCancelled, getEscrowHoldCancelledSubject } from './escrow-hold-cancelled';
-export type { EscrowHoldCancelledProps, EscrowHoldCancelledReason } from './escrow-hold-cancelled';
+export {
+    EscrowPinSignIn,
+    getEscrowPinSignInSubject,
+    type EscrowPinSignInProps,
+} from './escrow-pin-sign-in';
 
-export { EscrowPinLocked, getEscrowPinLockedSubject } from './escrow-pin-locked';
-export type { EscrowPinLockedProps } from './escrow-pin-locked';
+export {
+    AccountSecured,
+    getAccountSecuredSubject,
+    type AccountSecuredProps,
+} from './account-secured';