@learncard/email-templates 1.0.4 → 1.0.6

package/src/templates/email-verification.tsx

@@ -15,6 +15,8 @@ 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 EmailVerificationProps {
     branding: TenantBranding;
@@ -22,49 +24,118 @@ export interface EmailVerificationProps {
     recipient?: {
         name?: string;
     };
+    /** Recipient locale (BCP-47). Defaults to English. */
+    locale?: string;
 }
 
+const STRINGS: Record<
+    NotificationLocale,
+    {
+        preview: string;
+        heading: string;
+        greeting: string;
+        greetingName: string;
+        paragraph: string;
+        passport: string;
+        button: string;
+        sincerely: string;
+        subject: string;
+    }
+> = {
+    en: {
+        preview: 'Verify your email address',
+        heading: 'Verify Your Email',
+        greeting: 'Hello,',
+        greetingName: 'Hello {name},',
+        paragraph: 'Please click the button below to verify your email address.',
+        passport:
+            '{brandName} is your private, digital passport for learning and work. It lets you securely collect and share your verified skills and achievements online.',
+        button: 'Verify Your Email \u2192',
+        sincerely: 'Sincerely,',
+        subject: 'Verify Your Email',
+    },
+    es: {
+        preview: 'Verifica tu dirección de correo',
+        heading: 'Verifica tu correo',
+        greeting: 'Hola,',
+        greetingName: 'Hola {name},',
+        paragraph: 'Haz clic en el botón siguiente para verificar tu dirección de correo.',
+        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.',
+        button: 'Verifica tu correo \u2192',
+        sincerely: 'Atentamente,',
+        subject: 'Verifica tu correo',
+    },
+    fr: {
+        preview: 'Vérifiez votre adresse e-mail',
+        heading: 'Vérifiez votre e-mail',
+        greeting: 'Bonjour,',
+        greetingName: 'Bonjour {name},',
+        paragraph: 'Veuillez cliquer sur le bouton ci-dessous pour vérifier votre adresse e-mail.',
+        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.',
+        button: 'Vérifiez votre e-mail \u2192',
+        sincerely: 'Cordialement,',
+        subject: 'Vérifiez votre e-mail',
+    },
+    ar: {
+        preview: 'تأكيد عنوان بريدك الإلكتروني',
+        heading: 'تأكيد بريدك الإلكتروني',
+        greeting: 'مرحبًا،',
+        greetingName: 'مرحبًا {name}،',
+        paragraph: 'يرجى النقر على الزر أدناه لتأكيد عنوان بريدك الإلكتروني.',
+        passport:
+            '{brandName} هو جواز سفرك الرقمي والخاص للتعلّم والعمل. يتيح لك جمع ومشاركة مهاراتك وإنجازاتك الموثّقة بأمان عبر الإنترنت.',
+        button: 'تأكيد بريدك الإلكتروني ←',
+        sincerely: 'مع التحيات،',
+        subject: 'تأكيد بريدك الإلكتروني',
+    },
+};
+
 export const EmailVerification: React.FC<EmailVerificationProps> = ({
     branding,
     verificationToken,
     recipient,
+    locale,
 }) => {
-    const greeting = recipient?.name ? `Hello ${recipient.name},` : 'Hello,';
+    const s = STRINGS[resolveCatalogLocale(locale)];
+    const greeting = interpolate(recipient?.name ? s.greetingName : s.greeting, {
+        name: recipient?.name,
+    });
     const verifyUrl = `${branding.appUrl}/verify-email?token=${verificationToken}`;
+    const passport = interpolate(s.passport, { brandName: branding.brandName });
 
     return (
-        <Layout branding={branding} preview="Verify your email address">
-            <Text style={heading}>Verify Your Email</Text>
+        <Layout branding={branding} locale={locale} preview={s.preview}>
+            <Text style={heading}>{s.heading}</Text>
 
             <Text style={paragraph}>{greeting}</Text>
 
-            <Text style={paragraph}>
-                Please click the button below to verify your email address.
-            </Text>
+            <Text style={paragraph}>{s.paragraph}</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}>{passport}</Text>
 
             <Section style={buttonWrapper}>
                 <EmailButton href={verifyUrl} branding={branding}>
-                    Verify Your Email &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={verifyUrl} />
+            <LinkFallback href={verifyUrl} locale={locale} />
         </Layout>
     );
 };
 
-export const getEmailVerificationSubject = (
-    _branding: TenantBranding,
-): string => 'Verify Your Email';
+export const getEmailVerificationSubject = (_branding: TenantBranding, locale?: string): string =>
+    STRINGS[resolveCatalogLocale(locale)].subject;
 
 // ---------------------------------------------------------------------------
 // Styles

package/src/templates/endorsement-request.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 EndorsementRequestProps {
     branding: TenantBranding;
@@ -30,8 +32,121 @@ export interface EndorsementRequestProps {
         type?: string;
     };
     message?: string;
+    /** Recipient locale (BCP-47). Defaults to English. */
+    locale?: string;
 }
 
+const STRINGS: Record<
+    NotificationLocale,
+    {
+        preview: (issuerName: string) => string;
+        greeting: string;
+        greetingName: string;
+        body: (issuerName: string, credentialName: string | undefined) => React.ReactNode;
+        passport: string;
+        button: string;
+        sincerely: string;
+        subject: (issuerName: string) => string;
+    }
+> = {
+    en: {
+        preview: i => `${i} is requesting your endorsement`,
+        greeting: 'Hello,',
+        greetingName: 'Hello {name},',
+        body: (issuerName, credentialName) => (
+            <>
+                <strong>{issuerName}</strong> has requested an endorsement from you
+                {credentialName ? (
+                    <>
+                        {' '}
+                        for <strong>{credentialName}</strong>
+                    </>
+                ) : (
+                    ''
+                )}
+                .
+            </>
+        ),
+        passport:
+            '{brandName} is your private, digital passport for learning and work. It lets you securely collect and share your verified skills and achievements online.',
+        button: 'Endorse \u2192',
+        sincerely: 'Sincerely,',
+        subject: i => `${i} is requesting your endorsement`,
+    },
+    es: {
+        preview: i => `${i} solicita tu validación`,
+        greeting: 'Hola,',
+        greetingName: 'Hola {name},',
+        body: (issuerName, credentialName) => (
+            <>
+                <strong>{issuerName}</strong> te ha solicitado una validación
+                {credentialName ? (
+                    <>
+                        {' '}
+                        para <strong>{credentialName}</strong>
+                    </>
+                ) : (
+                    ''
+                )}
+                .
+            </>
+        ),
+        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.',
+        button: 'Validar \u2192',
+        sincerely: 'Atentamente,',
+        subject: i => `${i} solicita tu validación`,
+    },
+    fr: {
+        preview: i => `${i} vous demande une validation`,
+        greeting: 'Bonjour,',
+        greetingName: 'Bonjour {name},',
+        body: (issuerName, credentialName) => (
+            <>
+                <strong>{issuerName}</strong> vous a demandé une validation
+                {credentialName ? (
+                    <>
+                        {' '}
+                        pour <strong>{credentialName}</strong>
+                    </>
+                ) : (
+                    ''
+                )}
+                .
+            </>
+        ),
+        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.',
+        button: 'Valider \u2192',
+        sincerely: 'Cordialement,',
+        subject: i => `${i} vous demande une validation`,
+    },
+    ar: {
+        preview: i => `${i} يطلب منك التأييد`,
+        greeting: 'مرحبًا،',
+        greetingName: 'مرحبًا {name}،',
+        body: (issuerName, credentialName) => (
+            <>
+                طلب <strong>{issuerName}</strong> منك تأييدًا
+                {credentialName ? (
+                    <>
+                        {' '}
+                        لـ <strong>{credentialName}</strong>
+                    </>
+                ) : (
+                    ''
+                )}
+                .
+            </>
+        ),
+        passport:
+            '{brandName} هو جواز سفرك الرقمي والخاص للتعلّم والعمل. يتيح لك جمع ومشاركة مهاراتك وإنجازاتك الموثّقة بأمان عبر الإنترنت.',
+        button: 'تأييد ←',
+        sincerely: 'مع التحيات،',
+        subject: i => `${i} يطلب منك التأييد`,
+    },
+};
+
 export const EndorsementRequest: React.FC<EndorsementRequestProps> = ({
     branding,
     shareLink,
@@ -39,48 +154,58 @@ export const EndorsementRequest: React.FC<EndorsementRequestProps> = ({
     issuer,
     credential,
     message,
+    locale,
 }) => {
-    const greeting = recipient?.name ? `Hello ${recipient.name},` : 'Hello,';
+    const s = STRINGS[resolveCatalogLocale(locale)];
+    const greeting = interpolate(recipient?.name ? s.greetingName : s.greeting, {
+        name: recipient?.name,
+    });
     const issuerName = issuer?.name ?? 'Someone';
     const credentialName = credential?.name;
 
     return (
-        <Layout branding={branding} preview={`${issuerName} is requesting your endorsement`} showHeaderLogo={false}>
-            <IssuerLogo logoUrl={issuer?.logoUrl} alt={issuerName ? `${issuerName} logo` : undefined} />
+        <Layout
+            branding={branding}
+            locale={locale}
+            preview={s.preview(issuerName)}
+            showHeaderLogo={false}
+        >
+            <IssuerLogo
+                logoUrl={issuer?.logoUrl}
+                alt={issuerName ? `${issuerName} logo` : undefined}
+            />
 
             <Text style={paragraph}>{greeting}</Text>
 
-            <Text style={paragraph}>
-                <strong>{issuerName}</strong> has requested an endorsement from you
-                {credentialName ? <> for <strong>{credentialName}</strong></> : ''}.
-            </Text>
+            <Text style={paragraph}>{s.body(issuerName, credentialName)}</Text>
 
             {message && (
                 <Section style={messageBox}>
                     <Text style={messageText}>{message}</Text>
 
-                    {issuer?.name && (
-                        <Text style={messageSender}>— {issuer.name}</Text>
-                    )}
+                    {issuer?.name && <Text style={messageSender}>— {issuer.name}</Text>}
                 </Section>
             )}
 
             <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.
+                {interpolate(s.passport, { brandName: branding.brandName })}
             </Text>
 
             <Section style={buttonWrapper}>
                 <EmailButton href={shareLink} branding={branding}>
-                    Endorse &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={shareLink} />
+            <LinkFallback href={shareLink} locale={locale} />
         </Layout>
     );
 };
@@ -88,10 +213,10 @@ export const EndorsementRequest: React.FC<EndorsementRequestProps> = ({
 export const getEndorsementRequestSubject = (
     _branding: TenantBranding,
     props: EndorsementRequestProps,
+    locale?: string
 ): string => {
     const issuerName = props.issuer?.name ?? 'Someone';
-
-    return `${issuerName} is requesting your endorsement`;
+    return STRINGS[resolveCatalogLocale(locale)].subject(issuerName);
 };
 
 // ---------------------------------------------------------------------------

package/src/templates/guardian-approval.tsx

@@ -12,6 +12,8 @@ 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 GuardianApprovalProps {
     branding: TenantBranding;
@@ -24,45 +26,133 @@ export interface GuardianApprovalProps {
     guardian?: {
         email?: string;
     };
+    /** Recipient locale (BCP-47). Defaults to English. */
+    locale?: string;
 }
 
+const STRINGS: Record<
+    NotificationLocale,
+    {
+        preview: (requesterName: string, brandName: string) => string;
+        heading: string;
+        greeting: string;
+        body: (requesterName: string, brandName: string) => React.ReactNode;
+        passport: string;
+        ctaInstruction: string;
+        button: string;
+        thankYou: string;
+        subject: (requesterName: string, brandName: string) => string;
+    }
+> = {
+    en: {
+        preview: (n, b) => `${n} needs your approval to join ${b}`,
+        heading: 'Account Approval Request',
+        greeting: 'Hello,',
+        body: (n, b) => (
+            <>
+                <strong>{n}</strong> has requested approval to use their {b} account.
+            </>
+        ),
+        passport:
+            '{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 approve this account request.',
+        button: 'Approve Request \u2192',
+        thankYou: 'Thank you,',
+        subject: (n, b) => `${n} needs your approval to join ${b}`,
+    },
+    es: {
+        preview: (n, b) => `${n} necesita tu aprobación para unirse a ${b}`,
+        heading: 'Solicitud de aprobación de cuenta',
+        greeting: 'Hola,',
+        body: (n, b) => (
+            <>
+                <strong>{n}</strong> ha solicitado aprobación para usar su cuenta de {b}.
+            </>
+        ),
+        passport:
+            '{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 aprobar esta solicitud de cuenta.',
+        button: 'Aprobar solicitud \u2192',
+        thankYou: 'Gracias,',
+        subject: (n, b) => `${n} necesita tu aprobación para unirse a ${b}`,
+    },
+    fr: {
+        preview: (n, b) => `${n} a besoin de votre approbation pour rejoindre ${b}`,
+        heading: "Demande d'approbation de compte",
+        greeting: 'Bonjour,',
+        body: (n, b) => (
+            <>
+                <strong>{n}</strong> a demandé l\u2019approbation pour utiliser son compte {b}.
+            </>
+        ),
+        passport:
+            '{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 approuver cette demande de compte.',
+        button: 'Approuver la demande \u2192',
+        thankYou: 'Merci,',
+        subject: (n, b) => `${n} a besoin de votre approbation pour rejoindre ${b}`,
+    },
+    ar: {
+        preview: (n, b) => `${n} بحاجة إلى موافقتك للانضمام إلى ${b}`,
+        heading: 'طلب الموافقة على الحساب',
+        greeting: 'مرحبًا،',
+        body: (n, b) => (
+            <>
+                طلب <strong>{n}</strong> الموافقة لاستخدام حسابه في {b}.
+            </>
+        ),
+        passport:
+            '{brandName} هو جواز سفر رقمي خاص للتعلّم والعمل. يتيح للمستخدمين جمع ومشاركة مهاراتهم وإنجازاتهم الموثّقة بأمان عبر الإنترنت.',
+        ctaInstruction: 'يرجى النقر على الزر أدناه للموافقة على طلب الحساب هذا.',
+        button: 'الموافقة على الطلب ←',
+        thankYou: 'شكرًا،',
+        subject: (n, b) => `${n} بحاجة إلى موافقتك للانضمام إلى ${b}`,
+    },
+};
+
 export const GuardianApproval: React.FC<GuardianApprovalProps> = ({
     branding,
     approvalUrl,
     requester,
+    locale,
 }) => {
+    const s = STRINGS[resolveCatalogLocale(locale)];
     const requesterName = requester?.displayName ?? 'Someone';
 
     return (
-        <Layout branding={branding} preview={`${requesterName} needs your approval to join ${branding.brandName}`}>
-            <Text style={heading}>Account Approval Request</Text>
+        <Layout
+            branding={branding}
+            locale={locale}
+            preview={s.preview(requesterName, branding.brandName)}
+        >
+            <Text style={heading}>{s.heading}</Text>
 
-            <Text style={paragraph}>Hello,</Text>
+            <Text style={paragraph}>{s.greeting}</Text>
 
-            <Text style={paragraph}>
-                <strong>{requesterName}</strong> has requested approval to use their {branding.brandName} account.
-            </Text>
+            <Text style={paragraph}>{s.body(requesterName, 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.
+                {interpolate(s.passport, { brandName: branding.brandName })}
             </Text>
 
-            <Text style={paragraph}>
-                Please click the button below to approve this account request.
-            </Text>
+            <Text style={paragraph}>{s.ctaInstruction}</Text>
 
             <Section style={buttonWrapper}>
                 <EmailButton href={approvalUrl} branding={branding}>
-                    Approve Request &rarr;
+                    {s.button}
                 </EmailButton>
             </Section>
 
             <Text style={signOff}>
-                Thank you,<br />The {branding.brandName} Team
+                {s.thankYou}
+                <br />
+                {interpolate(SHARED[resolveCatalogLocale(locale)].teamSignature, {
+                    brandName: branding.brandName,
+                })}
             </Text>
 
-            <LinkFallback href={approvalUrl} />
+            <LinkFallback href={approvalUrl} locale={locale} />
         </Layout>
     );
 };
@@ -70,10 +160,10 @@ export const GuardianApproval: React.FC<GuardianApprovalProps> = ({
 export const getGuardianApprovalSubject = (
     branding: TenantBranding,
     props: GuardianApprovalProps,
+    locale?: string
 ): string => {
     const name = props.requester?.displayName ?? 'Someone';
-
-    return `${name} needs your approval to join ${branding.brandName}`;
+    return STRINGS[resolveCatalogLocale(locale)].subject(name, branding.brandName);
 };
 
 // ---------------------------------------------------------------------------