@learncard/email-templates 1.0.3 → 1.0.5

package/src/index.ts

@@ -17,6 +17,10 @@
 export { resolveBranding, DEFAULT_BRANDING } from './branding';
 export type { TenantBranding } from './branding';
 
+// i18n (LC-1902)
+export { resolveCatalogLocale } from './i18n';
+export type { NotificationLocale } from './i18n';
+
 // Email rendering
 export { renderEmail } from './render';
 export type { RenderedEmail, TemplateId, TemplateDataMap } from './render';
@@ -37,10 +41,19 @@ export type {
 
 // SMS rendering
 export { renderSms } from './sms';
-export type { SmsTemplateId, SmsTemplateDataMap, SmsInboxClaimData, SmsVerificationData } from './sms';
+export type {
+    SmsTemplateId,
+    SmsTemplateDataMap,
+    SmsInboxClaimData,
+    SmsVerificationData,
+} from './sms';
 
 // Server-side tenant resolution
-export { resolveTenantFromRequest, registerOriginMapping, registerTenantBranding } from './tenant-registry';
+export {
+    resolveTenantFromRequest,
+    registerOriginMapping,
+    registerTenantBranding,
+} from './tenant-registry';
 export type { ResolvedTenant, RequestHeaders } from './tenant-registry';
 
 // Template components are intentionally NOT re-exported from the barrel.

package/src/render.ts

@@ -239,10 +239,12 @@ export async function renderEmail<T extends TemplateId>(
     templateId: T,
     branding: Partial<TenantBranding> | TenantBranding,
     data: TemplateDataMap[T],
+    /** Recipient locale (BCP-47). Defaults to English. */
+    locale?: string
 ): Promise<RenderedEmail> {
     const resolved = resolveBranding(branding);
 
-    const { element, subject } = buildElement(templateId, resolved, data);
+    const { element, subject } = buildElement(templateId, resolved, data, locale);
 
     const html = await render(element);
     const text = await render(element, { plainText: true });
@@ -258,6 +260,7 @@ function buildVerificationElement(
     branding: TenantBranding,
     data: VerificationCodeData,
     variant: VerificationCodeVariant,
+    locale?: string
 ): { element: React.ReactElement; subject: string } {
     return {
         element: React.createElement(VerificationCode, {
@@ -265,8 +268,9 @@ function buildVerificationElement(
             verificationCode: data.verificationCode,
             verificationEmail: data.verificationEmail,
             variant,
+            locale,
         }),
-        subject: getVerificationCodeSubject(branding, variant),
+        subject: getVerificationCodeSubject(branding, variant, locale),
     };
 }
 
@@ -274,48 +278,63 @@ function buildElement(
     templateId: TemplateId,
     branding: TenantBranding,
     data: TemplateDataMap[TemplateId],
+    locale?: string
 ): { element: React.ReactElement; subject: string } {
-
     switch (templateId) {
         case 'embed-email-verification':
-            return buildVerificationElement(branding, data as VerificationCodeData, 'embed-verification');
+            return buildVerificationElement(
+                branding,
+                data as VerificationCodeData,
+                'embed-verification',
+                locale
+            );
 
         case 'contact-method-verification': {
             const d = data as EmailVerificationData;
-            const props: EmailVerificationProps = { branding, ...d };
+            const props: EmailVerificationProps = { branding, ...d, locale };
 
             return {
                 element: React.createElement(EmailVerification, props),
-                subject: getEmailVerificationSubject(branding),
+                subject: getEmailVerificationSubject(branding, locale),
             };
         }
 
         case 'login-verification-code':
         case 'contact-method-verification-1':
-            return buildVerificationElement(branding, data as VerificationCodeData, 'login');
+            return buildVerificationElement(
+                branding,
+                data as VerificationCodeData,
+                'login',
+                locale
+            );
 
         case 'recovery-email-code':
         case 'recovery-email-verification':
-            return buildVerificationElement(branding, data as VerificationCodeData, 'recovery-email');
+            return buildVerificationElement(
+                branding,
+                data as VerificationCodeData,
+                'recovery-email',
+                locale
+            );
 
         case 'inbox-claim':
         case 'universal-inbox-claim': {
             const d = data as InboxClaimData;
-            const props: InboxClaimProps = { branding, ...d };
+            const props: InboxClaimProps = { branding, ...d, locale };
 
             return {
                 element: React.createElement(InboxClaim, props),
-                subject: getInboxClaimSubject(branding, props),
+                subject: getInboxClaimSubject(branding, props, locale),
             };
         }
 
         case 'guardian-approval': {
             const d = data as GuardianApprovalData;
-            const props: GuardianApprovalProps = { branding, ...d };
+            const props: GuardianApprovalProps = { branding, ...d, locale };
 
             return {
                 element: React.createElement(GuardianApproval, props),
-                subject: getGuardianApprovalSubject(branding, props),
+                subject: getGuardianApprovalSubject(branding, props, locale),
             };
         }
 
@@ -324,80 +343,80 @@ function buildElement(
             const d = data as AccountApprovedData;
 
             return {
-                element: React.createElement(AccountApproved, { branding, ...d }),
-                subject: getAccountApprovedSubject(branding),
+                element: React.createElement(AccountApproved, { branding, ...d, locale }),
+                subject: getAccountApprovedSubject(branding, locale),
             };
         }
 
         case 'recovery-key':
         case 'recovery-key-backup': {
             const d = data as RecoveryKeyData;
-            const props: RecoveryKeyProps = { branding, ...d };
+            const props: RecoveryKeyProps = { branding, ...d, locale };
 
             return {
                 element: React.createElement(RecoveryKey, props),
-                subject: getRecoveryKeySubject(branding),
+                subject: getRecoveryKeySubject(branding, locale),
             };
         }
 
         case 'endorsement-request':
         case 'universal-inbox-claim-1': {
             const d = data as EndorsementRequestData;
-            const props: EndorsementRequestProps = { branding, ...d };
+            const props: EndorsementRequestProps = { branding, ...d, locale };
 
             return {
                 element: React.createElement(EndorsementRequest, props),
-                subject: getEndorsementRequestSubject(branding, props),
+                subject: getEndorsementRequestSubject(branding, props, locale),
             };
         }
 
         case 'credential-awaiting-guardian': {
             const d = data as CredentialAwaitingGuardianData;
-            const props: CredentialAwaitingGuardianProps = { branding, ...d };
+            const props: CredentialAwaitingGuardianProps = { branding, ...d, locale };
 
             return {
                 element: React.createElement(CredentialAwaitingGuardian, props),
-                subject: getCredentialAwaitingGuardianSubject(branding),
+                subject: getCredentialAwaitingGuardianSubject(branding, locale),
             };
         }
 
         case 'guardian-approved-claim': {
             const d = data as GuardianApprovedClaimData;
-            const props: GuardianApprovedClaimProps = { branding, ...d };
+            const props: GuardianApprovedClaimProps = { branding, ...d, locale };
 
             return {
                 element: React.createElement(GuardianApprovedClaim, props),
-                subject: getGuardianApprovedClaimSubject(branding),
+                subject: getGuardianApprovedClaimSubject(branding, locale),
             };
         }
 
         case 'guardian-credential-approval': {
             const d = data as GuardianCredentialApprovalData;
-            const props: GuardianCredentialApprovalProps = { branding, ...d };
+            const props: GuardianCredentialApprovalProps = { branding, ...d, locale };
 
             return {
                 element: React.createElement(GuardianCredentialApproval, props),
-                subject: getGuardianCredentialApprovalSubject(branding),
+                subject: getGuardianCredentialApprovalSubject(branding, locale),
             };
         }
 
         case 'guardian-email-otp': {
             const d = data as GuardianEmailOtpData;
-            const props: GuardianEmailOtpProps = { branding, ...d };
+            const props: GuardianEmailOtpProps = { branding, ...d, locale };
 
             return {
                 element: React.createElement(GuardianEmailOtp, props),
-                subject: getGuardianEmailOtpSubject(branding),
+                subject: getGuardianEmailOtpSubject(branding, locale),
             };
         }
 
         case 'guardian-rejected-credential': {
             const d = data as GuardianRejectedCredentialData;
-            const props: GuardianRejectedCredentialProps = { branding, ...d };
+            const props: GuardianRejectedCredentialProps = { branding, ...d, locale };
 
             return {
                 element: React.createElement(GuardianRejectedCredential, props),
-                subject: getGuardianRejectedCredentialSubject(branding),
+                subject: getGuardianRejectedCredentialSubject(branding, locale),
             };
         }
 

package/src/sms.ts

@@ -1,11 +1,14 @@
 /**
  * SMS template rendering — tenant-aware replacement for sms.helpers.ts.
  *
- * Replaces the hardcoded "LearnCard" in SMS text with the tenant's brand name.
+ * Replaces the hardcoded "LearnCard" in SMS text with the tenant's brand name
+ * and renders localized SMS bodies (LC-1902, workstream C1).
  */
 
 import type { TenantBranding } from './branding';
 import { resolveBranding } from './branding';
+import type { NotificationLocale } from './i18n';
+import { resolveCatalogLocale } from './i18n';
 
 // ---------------------------------------------------------------------------
 // SMS template data shapes
@@ -29,12 +32,59 @@ export interface SmsTemplateDataMap {
     'contact-method-verification': SmsVerificationData;
 }
 
+// ---------------------------------------------------------------------------
+// Per-locale SMS copy. EN values byte-match the originals in sms.helpers.ts.
+// ---------------------------------------------------------------------------
+
+const INBOX_CLAIM: Record<
+    NotificationLocale,
+    {
+        greetingName: (name: string) => string;
+        body: (credType: string, credName: string, issuerName: string | undefined) => string;
+        cta: string;
+    }
+> = {
+    en: {
+        greetingName: name => `Hello, ${name}! `,
+        body: (credType, credName, issuerName) =>
+            `You have a new ${credType}, "${credName}"${issuerName ? ` from ${issuerName}.` : '.'}`,
+        cta: 'Claim it here:',
+    },
+    es: {
+        greetingName: name => `¡Hola, ${name}! `,
+        body: (credType, credName, issuerName) =>
+            `Tienes un nuevo ${credType}, "${credName}"${issuerName ? ` de ${issuerName}.` : '.'}`,
+        cta: 'Reclámalo aquí:',
+    },
+    fr: {
+        greetingName: name => `Bonjour ${name} ! `,
+        body: (credType, credName, issuerName) =>
+            `Vous avez un nouveau ${credType}, « ${credName} »${
+                issuerName ? ` de ${issuerName}.` : '.'
+            }`,
+        cta: 'Réclamez-le ici :',
+    },
+    ar: {
+        greetingName: name => `مرحبًا ${name}! `,
+        body: (credType, credName, issuerName) =>
+            `لديك ${credType} جديد، "${credName}"${issuerName ? ` من ${issuerName}.` : '.'}`,
+        cta: 'طالب به هنا:',
+    },
+};
+
+const VERIFICATION: Record<NotificationLocale, (brandName: string) => string> = {
+    en: b => `Your ${b} verification code is:`,
+    es: b => `Tu código de verificación de ${b} es:`,
+    fr: b => `Votre code de vérification ${b} est :`,
+    ar: b => `رمز التحقق الخاص بك في ${b} هو:`,
+};
+
 // ---------------------------------------------------------------------------
 // renderSms()
 // ---------------------------------------------------------------------------
 
 /**
- * Render a branded SMS body for the given template.
+ * Render a branded, localized SMS body for the given template.
  *
  * @returns The SMS body string, or `undefined` if the templateId is unknown.
  */
@@ -42,24 +92,29 @@ export function renderSms<T extends SmsTemplateId>(
     templateId: T,
     branding: Partial<TenantBranding> | TenantBranding,
     data: SmsTemplateDataMap[T],
+    /** Recipient locale (BCP-47). Defaults to English. */
+    locale?: string
 ): string | undefined {
     const resolved = resolveBranding(branding);
+    const loc = resolveCatalogLocale(locale);
 
     switch (templateId) {
         case 'inbox-claim': {
             const d = data as SmsInboxClaimData;
-            const greeting = d.recipient?.name ? `Hello, ${d.recipient.name}! ` : '';
+            const s = INBOX_CLAIM[loc];
+            const greeting = d.recipient?.name ? s.greetingName(d.recipient.name) : '';
             const credType = d.credential?.type ?? 'credential';
             const credName = d.credential?.name ?? 'Unnamed Credential';
-            const issuerPart = d.issuer?.name ? ` from ${d.issuer.name}.` : '.';
 
-            return `${greeting}You have a new ${credType}, "${credName}"${issuerPart} Claim it here: ${d.claimUrl}`;
+            return `${greeting}${s.body(credType, credName, d.issuer?.name)} ${s.cta} ${
+                d.claimUrl
+            }`;
         }
 
         case 'contact-method-verification': {
             const d = data as SmsVerificationData;
 
-            return `Your ${resolved.brandName} verification code is: ${d.verificationToken}`;
+            return `${VERIFICATION[loc](resolved.brandName)} ${d.verificationToken}`;
         }
 
         default:

package/src/templates/account-approved.tsx

@@ -11,56 +11,114 @@ import type { TenantBranding } from '../branding';
 import { DEFAULT_BRANDING } from '../branding';
 import { Layout } from '../components/Layout';
 import { EmailButton } from '../components/EmailButton';
+import type { NotificationLocale } from '../i18n';
+import { resolveCatalogLocale, interpolate, SHARED } from '../i18n';
 
 export interface AccountApprovedProps {
     branding: TenantBranding;
     user?: {
         displayName?: string;
     };
+    /** Recipient locale (BCP-47). Defaults to English. */
+    locale?: string;
 }
 
-export const AccountApproved: React.FC<AccountApprovedProps> = ({
-    branding,
-    user,
-}) => {
+const STRINGS: Record<
+    NotificationLocale,
+    {
+        preview: (brandName: string) => string;
+        heading: (brandName: string) => string;
+        greeting: (name: string) => string;
+        body1: (brandName: string) => string;
+        body2: string;
+        ctaInstruction: string;
+        button: (brandName: string) => string;
+        thankYou: string;
+        subject: (brandName: string) => string;
+    }
+> = {
+    en: {
+        preview: b => `Your ${b} account has been approved!`,
+        heading: b => `Your ${b} account has been approved!`,
+        greeting: name => `Hello ${name},`,
+        body1: b => `Your ${b} account has been approved by your guardian/parent.`,
+        body2: '{brandName} is a private, digital passport for learning and work. It lets users securely collect and share their verified skills and achievements online.',
+        ctaInstruction: 'Please click the button below to login to your account.',
+        button: b => `Login to ${b} \u2192`,
+        thankYou: 'Thank you,',
+        subject: b => `Your ${b} account has been approved`,
+    },
+    es: {
+        preview: b => `¡Tu cuenta de ${b} ha sido aprobada!`,
+        heading: b => `¡Tu cuenta de ${b} ha sido aprobada!`,
+        greeting: name => `Hola ${name},`,
+        body1: b => `Tu cuenta de ${b} ha sido aprobada por tu tutor o progenitor.`,
+        body2: '{brandName} es un pasaporte digital y privado para el aprendizaje y el trabajo. Permite a los usuarios recopilar y compartir de forma segura sus habilidades y logros verificados en línea.',
+        ctaInstruction: 'Haz clic en el botón siguiente para iniciar sesión en tu cuenta.',
+        button: b => `Iniciar sesión en ${b} \u2192`,
+        thankYou: 'Gracias,',
+        subject: b => `Tu cuenta de ${b} ha sido aprobada`,
+    },
+    fr: {
+        preview: b => `Votre compte ${b} a été approuvé !`,
+        heading: b => `Votre compte ${b} a été approuvé !`,
+        greeting: name => `Bonjour ${name},`,
+        body1: b => `Votre compte ${b} a été approuvé par votre tuteur ou parent.`,
+        body2: '{brandName} est un passeport numérique privé pour l\u2019apprentissage et le travail. Il permet aux utilisateurs de collecter et de partager en toute sécurité leurs compétences et réalisations vérifiées en ligne.',
+        ctaInstruction:
+            'Veuillez cliquer sur le bouton ci-dessous pour vous connecter à votre compte.',
+        button: b => `Se connecter à ${b} \u2192`,
+        thankYou: 'Merci,',
+        subject: b => `Votre compte ${b} a été approuvé`,
+    },
+    ar: {
+        preview: b => `تمت الموافقة على حسابك في ${b}!`,
+        heading: b => `تمت الموافقة على حسابك في ${b}!`,
+        greeting: name => `مرحبًا ${name}،`,
+        body1: b => `تمت الموافقة على حسابك في ${b} من قبل ولي أمرك.`,
+        body2: '{brandName} هو جواز سفر رقمي خاص للتعلّم والعمل. يتيح للمستخدمين جمع ومشاركة مهاراتهم وإنجازاتهم الموثّقة بأمان عبر الإنترنت.',
+        ctaInstruction: 'يرجى النقر على الزر أدناه لتسجيل الدخول إلى حسابك.',
+        button: b => `تسجيل الدخول إلى ${b} ←`,
+        thankYou: 'شكرًا،',
+        subject: b => `تمت الموافقة على حسابك في ${b}`,
+    },
+};
+
+export const AccountApproved: React.FC<AccountApprovedProps> = ({ branding, user, locale }) => {
+    const s = STRINGS[resolveCatalogLocale(locale)];
     const name = user?.displayName ?? 'there';
 
     return (
-        <Layout branding={branding} preview={`Your ${branding.brandName} account has been approved!`}>
-            <Text style={heading}>Your {branding.brandName} account has been approved!</Text>
+        <Layout branding={branding} locale={locale} preview={s.preview(branding.brandName)}>
+            <Text style={heading}>{s.heading(branding.brandName)}</Text>
 
-            <Text style={paragraph}>
-                Hello {name},
-            </Text>
+            <Text style={paragraph}>{s.greeting(name)}</Text>
 
-            <Text style={paragraph}>
-                Your {branding.brandName} account has been approved by your guardian/parent.
-            </Text>
+            <Text style={paragraph}>{s.body1(branding.brandName)}</Text>
 
-            <Text style={paragraph}>
-                {branding.brandName} is a private, digital passport for learning and work.
-                It lets users securely collect and share their verified skills and achievements online.
-            </Text>
+            <Text style={paragraph}>{interpolate(s.body2, { brandName: branding.brandName })}</Text>
 
-            <Text style={paragraph}>
-                Please click the button below to login to your account.
-            </Text>
+            <Text style={paragraph}>{s.ctaInstruction}</Text>
 
             <Section style={buttonWrapper}>
                 <EmailButton href={branding.appUrl} branding={branding}>
-                    Login to {branding.brandName} &rarr;
+                    {s.button(branding.brandName)}
                 </EmailButton>
             </Section>
 
             <Text style={signOff}>
-                Thank you,<br />The {branding.brandName} Team
+                {s.thankYou}
+                <br />
+                {interpolate(SHARED[resolveCatalogLocale(locale)].teamSignature, {
+                    brandName: branding.brandName,
+                })}
             </Text>
         </Layout>
     );
 };
 
-export const getAccountApprovedSubject = (branding: TenantBranding): string =>
-    `Your ${branding.brandName} account has been approved`;
+export const getAccountApprovedSubject = (branding: TenantBranding, locale?: string): string =>
+    STRINGS[resolveCatalogLocale(locale)].subject(branding.brandName);
 
 // ---------------------------------------------------------------------------
 // Styles
@@ -96,10 +154,5 @@ const signOff: React.CSSProperties = {
 // ---------------------------------------------------------------------------
 
 export default function Preview() {
-    return (
-        <AccountApproved
-            branding={DEFAULT_BRANDING}
-            user={{ displayName: 'Jane Doe' }}
-        />
-    );
+    return <AccountApproved branding={DEFAULT_BRANDING} user={{ displayName: 'Jane Doe' }} />;
 }

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

@@ -12,6 +12,8 @@ import type { TenantBranding } from '../branding';
 import { DEFAULT_BRANDING } from '../branding';
 import { Layout } from '../components/Layout';
 import { IssuerLogo } from '../components/IssuerLogo';
+import type { NotificationLocale } from '../i18n';
+import { resolveCatalogLocale, interpolate, SHARED } from '../i18n';
 
 export interface CredentialAwaitingGuardianProps {
     branding: TenantBranding;
@@ -25,45 +27,136 @@ export interface CredentialAwaitingGuardianProps {
     recipient?: {
         email?: string;
     };
+    /** Recipient locale (BCP-47). Defaults to English. */
+    locale?: string;
 }
 
+const STRINGS: Record<
+    NotificationLocale,
+    {
+        preview: (credentialName: string) => string;
+        heading: string;
+        greeting: string;
+        body1: (issuerName: string, credentialName: string) => React.ReactNode;
+        body2: (brandName: string) => string;
+        statusBadge: string;
+        muted: string;
+        sincerely: string;
+        subject: string;
+    }
+> = {
+    en: {
+        preview: c => `Your credential "${c}" is pending guardian approval`,
+        heading: 'Pending guardian approval',
+        greeting: 'Hi there,',
+        body1: (issuerName, credentialName) => (
+            <>
+                <strong>{issuerName}</strong> has sent you the credential{' '}
+                <strong>&ldquo;{credentialName}&rdquo;</strong>.
+            </>
+        ),
+        body2: b =>
+            `Before you can claim it, your guardian needs to review and approve it first. We\u2019ve already sent them a notification \u2014 once they approve, you\u2019ll receive a follow-up email and the credential will appear in your ${b} account.`,
+        statusBadge: 'Awaiting Guardian Approval',
+        muted: 'No action is needed from you right now.',
+        sincerely: 'Sincerely,',
+        subject: 'Your Credential Is Pending Guardian Approval',
+    },
+    es: {
+        preview: c => `Tu credencial "${c}" está pendiente de aprobación del tutor`,
+        heading: 'Pendiente de aprobación del tutor',
+        greeting: 'Hola,',
+        body1: (issuerName, credentialName) => (
+            <>
+                <strong>{issuerName}</strong> te ha enviado la credencial{' '}
+                <strong>&ldquo;{credentialName}&rdquo;</strong>.
+            </>
+        ),
+        body2: b =>
+            `Antes de poder reclamarla, tu tutor debe revisarla y aprobarla primero. Ya le hemos enviado una notificación \u2014 cuando la apruebe, recibirás un correo de seguimiento y la credencial aparecerá en tu cuenta de ${b}.`,
+        statusBadge: 'Pendiente de aprobación del tutor',
+        muted: 'No necesitas realizar ninguna acción en este momento.',
+        sincerely: 'Atentamente,',
+        subject: 'Tu credencial está pendiente de aprobación del tutor',
+    },
+    fr: {
+        preview: c => `Votre titre « ${c} » est en attente d\u2019approbation du tuteur`,
+        heading: 'En attente d\u2019approbation du tuteur',
+        greeting: 'Bonjour,',
+        body1: (issuerName, credentialName) => (
+            <>
+                <strong>{issuerName}</strong> vous a envoyé le titre{' '}
+                <strong>&laquo;&nbsp;{credentialName}&nbsp;&raquo;</strong>.
+            </>
+        ),
+        body2: b =>
+            `Avant de pouvoir le réclamer, votre tuteur doit d\u2019abord le vérifier et l\u2019approuver. Nous lui avons déjà envoyé une notification \u2014 une fois qu\u2019il aura approuvé, vous recevrez un e-mail de suivi et le titre apparaîtra dans votre compte ${b}.`,
+        statusBadge: 'En attente d\u2019approbation du tuteur',
+        muted: 'Aucune action n\u2019est requise de votre part pour le moment.',
+        sincerely: 'Cordialement,',
+        subject: 'Votre titre est en attente d\u2019approbation du tuteur',
+    },
+    ar: {
+        preview: c => `شهادتك "${c}" بانتظار موافقة ولي الأمر`,
+        heading: 'بانتظار موافقة ولي الأمر',
+        greeting: 'مرحبًا،',
+        body1: (issuerName, credentialName) => (
+            <>
+                أرسل لك <strong>{issuerName}</strong> الشهادة{' '}
+                <strong>&laquo;{credentialName}&raquo;</strong>.
+            </>
+        ),
+        body2: b =>
+            `قبل أن تتمكن من المطالبة بها، يجب على ولي أمرك مراجعتها والموافقة عليها أولاً. لقد أرسلنا إليه إشعارًا بالفعل \u2014 بمجرد موافقته، ستتلقى رسالة متابعة وستظهر الشهادة في حسابك على ${b}.`,
+        statusBadge: 'بانتظار موافقة ولي الأمر',
+        muted: 'لا حاجة لأي إجراء منك في الوقت الحالي.',
+        sincerely: 'مع التحيات،',
+        subject: 'شهادتك بانتظار موافقة ولي الأمر',
+    },
+};
+
 export const CredentialAwaitingGuardian: React.FC<CredentialAwaitingGuardianProps> = ({
     branding,
     issuer,
     credential,
+    locale,
 }) => {
+    const s = STRINGS[resolveCatalogLocale(locale)];
     const issuerName = issuer?.name ?? 'An issuer';
     const credentialName = credential?.name ?? 'a credential';
 
     return (
-        <Layout branding={branding} preview={`Your credential "${credentialName}" is pending guardian approval`} showHeaderLogo={false}>
-            <IssuerLogo logoUrl={issuer?.logoUrl} alt={issuerName ? `${issuerName} logo` : undefined} />
+        <Layout
+            branding={branding}
+            locale={locale}
+            preview={s.preview(credentialName)}
+            showHeaderLogo={false}
+        >
+            <IssuerLogo
+                logoUrl={issuer?.logoUrl}
+                alt={issuerName ? `${issuerName} logo` : undefined}
+            />
 
-            <Text style={heading}>Pending guardian approval</Text>
+            <Text style={heading}>{s.heading}</Text>
 
-            <Text style={paragraph}>Hi there,</Text>
+            <Text style={paragraph}>{s.greeting}</Text>
 
-            <Text style={paragraph}>
-                <strong>{issuerName}</strong> has sent you the credential{' '}
-                <strong>&ldquo;{credentialName}&rdquo;</strong>.
-            </Text>
+            <Text style={paragraph}>{s.body1(issuerName, credentialName)}</Text>
 
-            <Text style={paragraph}>
-                Before you can claim it, your guardian needs to review and approve it first.
-                We&apos;ve already sent them a notification — once they approve, you&apos;ll receive
-                a follow-up email and the credential will appear in your {branding.brandName} account.
-            </Text>
+            <Text style={paragraph}>{s.body2(branding.brandName)}</Text>
 
             <Section style={statusBadge}>
-                <Text style={statusText}>Awaiting Guardian Approval</Text>
+                <Text style={statusText}>{s.statusBadge}</Text>
             </Section>
 
-            <Text style={muted}>
-                No action is needed from you right now.
-            </Text>
+            <Text style={muted}>{s.muted}</Text>
 
             <Text style={signOff}>
-                Sincerely,<br />The {branding.brandName} Team
+                {s.sincerely}
+                <br />
+                {interpolate(SHARED[resolveCatalogLocale(locale)].teamSignature, {
+                    brandName: branding.brandName,
+                })}
             </Text>
         </Layout>
     );
@@ -71,7 +164,8 @@ export const CredentialAwaitingGuardian: React.FC<CredentialAwaitingGuardianProp
 
 export const getCredentialAwaitingGuardianSubject = (
     _branding: TenantBranding,
-): string => 'Your Credential Is Pending Guardian Approval';
+    locale?: string
+): string => STRINGS[resolveCatalogLocale(locale)].subject;
 
 // ---------------------------------------------------------------------------
 // Styles