@learncard/email-templates 1.0.3 → 1.0.5

package/src/templates/guardian-rejected-credential.tsx

@@ -11,6 +11,8 @@ 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';
 
 export interface GuardianRejectedCredentialProps {
     branding: TenantBranding;
@@ -23,36 +25,155 @@ export interface GuardianRejectedCredentialProps {
     recipient?: {
         email?: string;
     };
+    /** Recipient locale (BCP-47). Defaults to English. */
+    locale?: string;
 }
 
+const STRINGS: Record<
+    NotificationLocale,
+    {
+        preview: string;
+        heading: string;
+        greeting: string;
+        body: (issuerName: string, credentialName: string | undefined) => React.ReactNode;
+        body2: (issuerName: string) => React.ReactNode;
+        sincerely: string;
+        subject: string;
+    }
+> = {
+    en: {
+        preview: 'Your guardian has declined a credential',
+        heading: 'Credential not approved',
+        greeting: 'Hi there,',
+        body: (issuerName, credentialName) => (
+            <>
+                Your guardian has reviewed and <strong>declined</strong> the credential{' '}
+                {credentialName ? (
+                    <>
+                        <strong>&ldquo;{credentialName}&rdquo;</strong>{' '}
+                    </>
+                ) : (
+                    ''
+                )}
+                issued by <strong>{issuerName}</strong>.
+            </>
+        ),
+        body2: issuerName => (
+            <>
+                The credential will not be added to your account. If you think this was a mistake,
+                please reach out to your guardian or contact <strong>{issuerName}</strong> directly.
+            </>
+        ),
+        sincerely: 'Sincerely,',
+        subject: 'Credential Not Approved',
+    },
+    es: {
+        preview: 'Tu tutor ha rechazado una credencial',
+        heading: 'Credencial no aprobada',
+        greeting: 'Hola,',
+        body: (issuerName, credentialName) => (
+            <>
+                Tu tutor ha revisado y <strong>rechazado</strong> la credencial{' '}
+                {credentialName ? (
+                    <>
+                        <strong>&ldquo;{credentialName}&rdquo;</strong>{' '}
+                    </>
+                ) : (
+                    ''
+                )}
+                emitida por <strong>{issuerName}</strong>.
+            </>
+        ),
+        body2: issuerName => (
+            <>
+                La credencial no se añadirá a tu cuenta. Si crees que esto ha sido un error,
+                comunícate con tu tutor o contacta directamente con <strong>{issuerName}</strong>.
+            </>
+        ),
+        sincerely: 'Atentamente,',
+        subject: 'Credencial no aprobada',
+    },
+    fr: {
+        preview: 'Votre tuteur a refusé un titre',
+        heading: 'Titre non approuvé',
+        greeting: 'Bonjour,',
+        body: (issuerName, credentialName) => (
+            <>
+                Votre tuteur a examiné et <strong>refusé</strong> le titre{' '}
+                {credentialName ? (
+                    <>
+                        <strong>&laquo;&nbsp;{credentialName}&nbsp;&raquo;</strong>{' '}
+                    </>
+                ) : (
+                    ''
+                )}
+                émis par <strong>{issuerName}</strong>.
+            </>
+        ),
+        body2: issuerName => (
+            <>
+                Le titre ne sera pas ajouté à votre compte. Si vous pensez qu\u2019il s\u2019agit
+                d\u2019une erreur, veuillez contacter votre tuteur ou <strong>{issuerName}</strong>{' '}
+                directement.
+            </>
+        ),
+        sincerely: 'Cordialement,',
+        subject: 'Titre non approuvé',
+    },
+    ar: {
+        preview: 'رفض ولي أمرك شهادة',
+        heading: 'لم تتم الموافقة على الشهادة',
+        greeting: 'مرحبًا،',
+        body: (issuerName, credentialName) => (
+            <>
+                راجع ولي أمرك و<strong>رفض</strong> الشهادة{' '}
+                {credentialName ? (
+                    <>
+                        <strong>&laquo;{credentialName}&raquo;</strong>{' '}
+                    </>
+                ) : (
+                    ''
+                )}
+                الصادرة من <strong>{issuerName}</strong>.
+            </>
+        ),
+        body2: issuerName => (
+            <>
+                لن تُضاف الشهادة إلى حسابك. إذا كنت تعتقد أن هذا خطأ، يرجى التواصل مع ولي أمرك أو
+                الاتصال بـ <strong>{issuerName}</strong> مباشرة.
+            </>
+        ),
+        sincerely: 'مع التحيات،',
+        subject: 'لم تتم الموافقة على الشهادة',
+    },
+};
+
 export const GuardianRejectedCredential: React.FC<GuardianRejectedCredentialProps> = ({
     branding,
     issuer,
     credential,
+    locale,
 }) => {
+    const s = STRINGS[resolveCatalogLocale(locale)];
     const issuerName = issuer?.name ?? 'An issuer';
     const credentialName = credential?.name;
 
     return (
-        <Layout branding={branding} preview="Your guardian has declined a credential">
-            <Text style={heading}>Credential not approved</Text>
+        <Layout branding={branding} locale={locale} preview={s.preview}>
+            <Text style={heading}>{s.heading}</Text>
 
-            <Text style={paragraph}>Hi there,</Text>
+            <Text style={paragraph}>{s.greeting}</Text>
 
-            <Text style={paragraph}>
-                Your guardian has reviewed and <strong>declined</strong> the credential{' '}
-                {credentialName ? <><strong>&ldquo;{credentialName}&rdquo;</strong> </> : ''}
-                issued by <strong>{issuerName}</strong>.
-            </Text>
+            <Text style={paragraph}>{s.body(issuerName, credentialName)}</Text>
 
-            <Text style={paragraph}>
-                The credential will not be added to your account. If you think this was
-                a mistake, please reach out to your guardian or contact{' '}
-                <strong>{issuerName}</strong> directly.
-            </Text>
+            <Text style={paragraph}>{s.body2(issuerName)}</Text>
 
             <Text style={signOff}>
-                Sincerely,<br />The {branding.brandName} Team
+                {s.sincerely}
+                <br />
+                {interpolate(SHARED[resolveCatalogLocale(locale)].teamSignature, {
+                    brandName: branding.brandName,
+                })}
             </Text>
         </Layout>
     );
@@ -60,7 +181,8 @@ export const GuardianRejectedCredential: React.FC<GuardianRejectedCredentialProp
 
 export const getGuardianRejectedCredentialSubject = (
     _branding: TenantBranding,
-): string => 'Credential Not Approved';
+    locale?: string
+): string => STRINGS[resolveCatalogLocale(locale)].subject;
 
 // ---------------------------------------------------------------------------
 // Styles

package/src/templates/inbox-claim.tsx

@@ -13,6 +13,8 @@ import { Layout } from '../components/Layout';
 import { EmailButton } from '../components/EmailButton';
 import { IssuerLogo } from '../components/IssuerLogo';
 import { LinkFallback } from '../components/LinkFallback';
+import type { NotificationLocale } from '../i18n';
+import { resolveCatalogLocale, interpolate, SHARED } from '../i18n';
 
 export interface InboxClaimProps {
     branding: TenantBranding;
@@ -30,58 +32,207 @@ export interface InboxClaimProps {
         name?: string;
         type?: string;
     };
+    /** Recipient locale (BCP-47). Defaults to English. */
+    locale?: string;
 }
 
+/**
+ * Intro is a function returning ReactNode because it conditionally wraps the
+ * issuer name and credential name in <strong> + curly quotes, and word order
+ * shifts per locale. EN reproduces the original JSX exactly.
+ */
+type Strings = {
+    greeting: string;
+    greetingName: string;
+    heading: (credentialType: string) => string;
+    preview: (credentialType: string, issuerName?: string) => string;
+    intro: (issuerName: string | undefined, credentialName: string | undefined) => React.ReactNode;
+    passport: (brandName: string, credentialType: string) => React.ReactNode;
+    button: string;
+    sincerely: string;
+    subject: (issuerName?: string) => string;
+};
+
+const ldquo = '\u201C';
+const rdquo = '\u201D';
+const mdash = '\u2014';
+
+const EN: Strings = {
+    greeting: 'Hello,',
+    greetingName: 'Hello {name},',
+    heading: t => `Your digital ${t} is ready`,
+    preview: (t, issuer) => `Your digital ${t}${issuer ? ` from ${issuer}` : ''} is ready`,
+    intro: (issuerName, credentialName) => (
+        <>
+            {issuerName ? (
+                <>
+                    <strong>{issuerName}</strong> has sent you
+                </>
+            ) : (
+                <>You&apos;ve received</>
+            )}{' '}
+            a secure, digital version of your{' '}
+            <strong>{credentialName ? `${ldquo}${credentialName}${rdquo}` : 'achievement'}</strong>.
+        </>
+    ),
+    passport: (b, t) => (
+        <>
+            {b} is your private, digital passport for learning and work. It lets you securely
+            collect and share your verified skills and achievements online. By claiming this item,
+            you are saving a verifiable, official {t} to your personal passport{mdash}one that only
+            you control.
+        </>
+    ),
+    button: 'Claim Your Record \u2192',
+    sincerely: 'Sincerely,',
+    subject: issuer => `Your digital record ${issuer ? `from ${issuer} ` : ''}is ready`,
+};
+
+const ES: Strings = {
+    greeting: 'Hola,',
+    greetingName: 'Hola {name},',
+    heading: t => `Tu ${t} digital está listo`,
+    preview: (t, issuer) => `Tu ${t} digital${issuer ? ` de ${issuer}` : ''} está listo`,
+    intro: (issuerName, credentialName) => (
+        <>
+            {issuerName ? (
+                <>
+                    <strong>{issuerName}</strong> te ha enviado
+                </>
+            ) : (
+                <>Has recibido</>
+            )}{' '}
+            una versión digital y segura de tu{' '}
+            <strong>{credentialName ? `${ldquo}${credentialName}${rdquo}` : 'logro'}</strong>.
+        </>
+    ),
+    passport: (b, t) => (
+        <>
+            {b} es tu pasaporte digital y privado para el aprendizaje y el trabajo. Te permite
+            recopilar y compartir de forma segura tus habilidades y logros verificados en línea. Al
+            reclamar este elemento, estás guardando un {t}
+            verificable y oficial en tu pasaporte personal{mdash}uno que solo tú controlas.
+        </>
+    ),
+    button: 'Reclamar tu registro \u2192',
+    sincerely: 'Atentamente,',
+    subject: issuer => `Tu registro digital ${issuer ? `de ${issuer} ` : ''}está listo`,
+};
+
+const FR: Strings = {
+    greeting: 'Bonjour,',
+    greetingName: 'Bonjour {name},',
+    heading: t => `Votre ${t} numérique est prêt`,
+    preview: (t, issuer) => `Votre ${t} numérique${issuer ? ` de ${issuer}` : ''} est prêt`,
+    intro: (issuerName, credentialName) => (
+        <>
+            {issuerName ? (
+                <>
+                    <strong>{issuerName}</strong> vous a envoyé
+                </>
+            ) : (
+                <>Vous avez reçu</>
+            )}{' '}
+            une version numérique et sécurisée de votre{' '}
+            <strong>{credentialName ? `${ldquo}${credentialName}${rdquo}` : 'réalisation'}</strong>.
+        </>
+    ),
+    passport: (b, t) => (
+        <>
+            {b} est votre passeport numérique privé pour l\u2019apprentissage et le travail. Il vous
+            permet de collecter et de partager en toute sécurité vos compétences et réalisations
+            vérifiées en ligne. En réclamant cet élément, vous enregistrez un {t} vérifiable et
+            officiel dans votre passeport personnel{mdash}que vous seul contrôlez.
+        </>
+    ),
+    button: 'Réclamer votre titre \u2192',
+    sincerely: 'Cordialement,',
+    subject: issuer => `Votre titre numérique ${issuer ? `de ${issuer} ` : ''}est prêt`,
+};
+
+const AR: Strings = {
+    greeting: 'مرحبًا،',
+    greetingName: 'مرحبًا {name}،',
+    heading: t => `${t}ك الرقمي جاهز`,
+    preview: (t, issuer) => `${t}ك الرقمي${issuer ? ` من ${issuer}` : ''} جاهز`,
+    intro: (issuerName, credentialName) => (
+        <>
+            {issuerName ? (
+                <>
+                    أرسل لك <strong>{issuerName}</strong>
+                </>
+            ) : (
+                <>لقد استلمت</>
+            )}{' '}
+            نسخة رقمية وآمنة من{' '}
+            <strong>{credentialName ? `${ldquo}${credentialName}${rdquo}` : 'إنجازك'}</strong>.
+        </>
+    ),
+    passport: (b, t) => (
+        <>
+            {b} هو جواز سفرك الرقمي والخاص للتعلّم والعمل. يتيح لك جمع ومشاركة مهاراتك وإنجازاتك
+            الموثّقة بأمان عبر الإنترنت. من خلال المطالبة بهذا العنصر، فأنت تحفظ {t}ًا قابلاً للتحقق
+            ورسميًا في جواز سفرك الشخصي{mdash}الذي تتحكم فيه أنت وحدك.
+        </>
+    ),
+    button: 'مطالبة سجلك ←',
+    sincerely: 'مع التحيات،',
+    subject: issuer => `سجلك الرقمي ${issuer ? `من ${issuer} ` : ''}جاهز`,
+};
+
+const STRINGS: Record<NotificationLocale, Strings> = { en: EN, es: ES, fr: FR, ar: AR };
+
 export const InboxClaim: React.FC<InboxClaimProps> = ({
     branding,
     claimUrl,
     recipient,
     issuer,
     credential,
+    locale,
 }) => {
+    const s = STRINGS[resolveCatalogLocale(locale)];
     const credentialName = credential?.name;
     const credentialType = credential?.type ?? 'record';
-    const greeting = recipient?.name ? `Hello ${recipient.name},` : 'Hello,';
     const issuerName = issuer?.name;
     const issuerLogo = issuer?.logoUrl;
     const showHeaderLogo = !issuerLogo;
-    
+
+    const greeting = interpolate(recipient?.name ? s.greetingName : s.greeting, {
+        name: recipient?.name,
+    });
+
     return (
-        <Layout branding={branding} preview={`Your digital ${credentialType}${issuerName ? ` from ${issuerName}` : ''} is ready`} showHeaderLogo={showHeaderLogo}>
+        <Layout
+            branding={branding}
+            locale={locale}
+            preview={s.preview(credentialType, issuerName)}
+            showHeaderLogo={showHeaderLogo}
+        >
             <IssuerLogo logoUrl={issuerLogo} alt={issuerName ? `${issuerName} logo` : undefined} />
 
-            <Text style={heading}>Your digital {credentialType} is ready</Text>
+            <Text style={heading}>{s.heading(credentialType)}</Text>
 
-            <Text style={paragraph}>
-                {greeting}
-            </Text>
+            <Text style={paragraph}>{greeting}</Text>
 
-            <Text style={paragraph}>
-                {issuerName
-                    ? <><strong>{issuerName}</strong> has sent you</>
-                    : <>You&apos;ve received</>}{' '}
-                a secure, digital version of your{' '}
-                <strong>{credentialName ? `\u201C${credentialName}\u201D` : 'achievement'}</strong>.
-            </Text>
+            <Text style={paragraph}>{s.intro(issuerName, credentialName)}</Text>
 
-            <Text style={paragraph}>
-                {branding.brandName} is your private, digital passport for learning and work.
-                It lets you securely collect and share your verified skills and achievements
-                online. By claiming this item, you are saving a verifiable, official {credentialType} to
-                your personal passport&mdash;one that only you control.
-            </Text>
+            <Text style={paragraph}>{s.passport(branding.brandName, credentialType)}</Text>
 
             <Section style={buttonWrapper}>
                 <EmailButton href={claimUrl} branding={branding}>
-                    Claim Your Record &rarr;
+                    {s.button}
                 </EmailButton>
             </Section>
 
             <Text style={signOff}>
-                Sincerely,<br />The {branding.brandName} Team
+                {s.sincerely}
+                <br />
+                {interpolate(SHARED[resolveCatalogLocale(locale)].teamSignature, {
+                    brandName: branding.brandName,
+                })}
             </Text>
 
-            <LinkFallback href={claimUrl} />
+            <LinkFallback href={claimUrl} locale={locale} />
         </Layout>
     );
 };
@@ -89,11 +240,8 @@ export const InboxClaim: React.FC<InboxClaimProps> = ({
 export const getInboxClaimSubject = (
     _branding: TenantBranding,
     props: InboxClaimProps,
-): string => {
-    const issuerPart = props.issuer?.name ? `from ${props.issuer.name} ` : '';
-
-    return `Your digital record ${issuerPart}is ready`;
-};
+    locale?: string
+): string => STRINGS[resolveCatalogLocale(locale)].subject(props.issuer?.name);
 
 // ---------------------------------------------------------------------------
 // Styles
@@ -134,7 +282,10 @@ export default function Preview() {
             branding={DEFAULT_BRANDING}
             claimUrl="https://learncard.app/claim/abc123"
             recipient={{ name: 'Jane Doe' }}
-            issuer={{ name: 'Acme University', logoUrl: 'https://cdn.filestackcontent.com/J6suaVcQ467W9o1k48Kj' }}
+            issuer={{
+                name: 'Acme University',
+                logoUrl: 'https://cdn.filestackcontent.com/J6suaVcQ467W9o1k48Kj',
+            }}
             credential={{ name: 'Bachelor of Science', type: 'Achievement' }}
         />
     );

package/src/templates/recovery-key.tsx

@@ -11,50 +11,146 @@ import type { TenantBranding } from '../branding';
 import { DEFAULT_BRANDING } from '../branding';
 import { Layout } from '../components/Layout';
 import { CodeBlock } from '../components/CodeBlock';
+import type { NotificationLocale } from '../i18n';
+import { resolveCatalogLocale, interpolate, SHARED } from '../i18n';
 
 export interface RecoveryKeyProps {
     branding: TenantBranding;
     recoveryKey: string;
+    /** Recipient locale (BCP-47). Defaults to English. */
+    locale?: string;
 }
 
-export const RecoveryKey: React.FC<RecoveryKeyProps> = ({
-    branding,
-    recoveryKey,
-}) => (
-    <Layout branding={branding} preview={`Your ${branding.brandName} recovery key — keep this safe`}>
-        <Text style={heading}>Your {branding.brandName} Recovery Key</Text>
+const STRINGS: Record<
+    NotificationLocale,
+    {
+        preview: (brandName: string) => string;
+        heading: (brandName: string) => string;
+        greeting: string;
+        body: (brandName: string) => string;
+        codeLabel: string;
+        recoverInstruction: () => React.ReactNode;
+        notRequested: string;
+        passport: string;
+        sincerely: string;
+        subject: (brandName: string) => string;
+    }
+> = {
+    en: {
+        preview: b => `Your ${b} recovery key \u2014 keep this safe`,
+        heading: b => `Your ${b} Recovery Key`,
+        greeting: 'Hello,',
+        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',
+        recoverInstruction: () => (
+            <>
+                To recover your account, choose <strong>&ldquo;Recover via Email&rdquo;</strong> in
+                the app and paste the recovery key above when prompted.
+            </>
+        ),
+        notRequested: 'If you did not request this, you can safely ignore this email.',
+        passport:
+            '{brandName} is your private, digital passport for learning and work. It lets you securely collect and share your verified skills and achievements online.',
+        sincerely: 'Sincerely,',
+        subject: b => `Your ${b} recovery key`,
+    },
+    es: {
+        preview: b => `Tu clave de recuperación de ${b} \u2014 guárdala en un lugar seguro`,
+        heading: b => `Tu clave de recuperación de ${b}`,
+        greeting: 'Hola,',
+        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',
+        recoverInstruction: () => (
+            <>
+                Para recuperar tu cuenta, elige <strong>&ldquo;Recuperar por correo&rdquo;</strong>{' '}
+                en la app y pega la clave de recuperación anterior cuando se te solicite.
+            </>
+        ),
+        notRequested: 'Si no solicitaste esto, puedes ignorar este correo con seguridad.',
+        passport:
+            '{brandName} es tu pasaporte digital y privado para el aprendizaje y el trabajo. Te permite recopilar y compartir de forma segura tus habilidades y logros verificados en línea.',
+        sincerely: 'Atentamente,',
+        subject: b => `Tu clave de recuperación de ${b}`,
+    },
+    fr: {
+        preview: b => `Votre clé de récupération ${b} \u2014 conservez-la en sécurité`,
+        heading: b => `Votre clé de récupération ${b}`,
+        greeting: 'Bonjour,',
+        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',
+        recoverInstruction: () => (
+            <>
+                Pour récupérer votre compte, choisissez{' '}
+                <strong>&laquo;&nbsp;Récupérer par e-mail&nbsp;&raquo;</strong> dans
+                l\u2019application et collez la clé de récupération ci-dessus lorsque cela vous est
+                demandé.
+            </>
+        ),
+        notRequested:
+            'Si vous n\u2019êtes pas à l\u2019origine de cette demande, vous pouvez ignorer cet e-mail en toute sécurité.',
+        passport:
+            '{brandName} est votre passeport numérique privé pour l\u2019apprentissage et le travail. Il vous permet de collecter et de partager en toute sécurité vos compétences et réalisations vérifiées en ligne.',
+        sincerely: 'Cordialement,',
+        subject: b => `Votre clé de récupération ${b}`,
+    },
+    ar: {
+        preview: b => `مفتاح الاستعادة الخاص بك في ${b} \u2014 احتفظ به بأمان`,
+        heading: b => `مفتاح الاستعادة الخاص بك في ${b}`,
+        greeting: 'مرحبًا،',
+        body: b =>
+            `احتفظ بهذا البريد في مكان آمن. يمكنك استخدام مفتاح الاستعادة أدناه لاستعادة الوصول إلى حسابك في ${b} إذا فقدت جهازك.`,
+        codeLabel: 'مفتاح الاستعادة \u2014 لا تشاركه مع أي شخص إطلاقًا',
+        recoverInstruction: () => (
+            <>
+                لاستعادة حسابك، اختر <strong>&laquo;الاستعادة عبر البريد&raquo;</strong> في التطبيق
+                والصق مفتاح الاستعادة أعلاه عند المطالبة بذلك.
+            </>
+        ),
+        notRequested: 'إذا لم تطلب ذلك، يمكنك تجاهل هذه الرسالة بأمان.',
+        passport:
+            '{brandName} هو جواز سفرك الرقمي والخاص للتعلّم والعمل. يتيح لك جمع ومشاركة مهاراتك وإنجازاتك الموثّقة بأمان عبر الإنترنت.',
+        sincerely: 'مع التحيات،',
+        subject: b => `مفتاح الاستعادة الخاص بك في ${b}`,
+    },
+};
+
+export const RecoveryKey: React.FC<RecoveryKeyProps> = ({ branding, recoveryKey, locale }) => {
+    const s = STRINGS[resolveCatalogLocale(locale)];
+
+    return (
+        <Layout branding={branding} locale={locale} preview={s.preview(branding.brandName)}>
+            <Text style={heading}>{s.heading(branding.brandName)}</Text>
 
-        <Text style={paragraph}>Hello,</Text>
+            <Text style={paragraph}>{s.greeting}</Text>
 
-        <Text style={paragraph}>
-            Keep this email safe. You can use the recovery key below to regain access
-            to your {branding.brandName} account if you lose your device.
-        </Text>
+            <Text style={paragraph}>{s.body(branding.brandName)}</Text>
 
-        <CodeBlock code={recoveryKey} label="Recovery Key — do NOT share this with anyone" variant="key" />
+            <CodeBlock code={recoveryKey} label={s.codeLabel} variant="key" />
 
-        <Text style={paragraph}>
-            To recover your account, choose <strong>&ldquo;Recover via Email&rdquo;</strong> in
-            the app and paste the recovery key above when prompted.
-        </Text>
+            <Text style={paragraph}>{s.recoverInstruction()}</Text>
 
-        <Text style={muted}>
-            If you did not request this, you can safely ignore this email.
-        </Text>
+            <Text style={muted}>{s.notRequested}</Text>
 
-        <Text style={paragraph}>
-            {branding.brandName} is your private, digital passport for learning and work.
-            It lets you securely collect and share your verified skills and achievements online.
-        </Text>
+            <Text style={paragraph}>
+                {interpolate(s.passport, { brandName: branding.brandName })}
+            </Text>
 
-        <Text style={signOff}>
-            Sincerely,<br />The {branding.brandName} Team
-        </Text>
-    </Layout>
-);
+            <Text style={signOff}>
+                {s.sincerely}
+                <br />
+                {interpolate(SHARED[resolveCatalogLocale(locale)].teamSignature, {
+                    brandName: branding.brandName,
+                })}
+            </Text>
+        </Layout>
+    );
+};
 
-export const getRecoveryKeySubject = (branding: TenantBranding): string =>
-    `Your ${branding.brandName} recovery key`;
+export const getRecoveryKeySubject = (branding: TenantBranding, locale?: string): string =>
+    STRINGS[resolveCatalogLocale(locale)].subject(branding.brandName);
 
 // ---------------------------------------------------------------------------
 // Styles