@learncard/email-templates 1.0.4 → 1.0.5

package/src/templates/guardian-approved-claim.tsx

@@ -13,6 +13,8 @@ import { DEFAULT_BRANDING } from '../branding';
 import { Layout } from '../components/Layout';
 import { EmailButton } from '../components/EmailButton';
 import { IssuerLogo } from '../components/IssuerLogo';
+import type { NotificationLocale } from '../i18n';
+import { resolveCatalogLocale, interpolate, SHARED } from '../i18n';
 
 export interface GuardianApprovedClaimProps {
     branding: TenantBranding;
@@ -23,44 +25,161 @@ export interface GuardianApprovedClaimProps {
     credential?: {
         name?: string;
     };
+    /** Recipient locale (BCP-47). Defaults to English. */
+    locale?: string;
 }
 
+const STRINGS: Record<
+    NotificationLocale,
+    {
+        preview: string;
+        heading: string;
+        greatNews: string;
+        body: (
+            issuerName: string,
+            credentialName: string | undefined,
+            brandName: string
+        ) => React.ReactNode;
+        openApp: string;
+        button: (brandName: string) => string;
+        sincerely: string;
+        subject: string;
+    }
+> = {
+    en: {
+        preview: 'Your credential has been approved by your guardian!',
+        heading: 'Your credential has been approved!',
+        greatNews: 'Great news!',
+        body: (issuerName, credentialName, brandName) => (
+            <>
+                Your guardian has approved the credential{' '}
+                {credentialName ? (
+                    <>
+                        <strong>&ldquo;{credentialName}&rdquo;</strong>{' '}
+                    </>
+                ) : (
+                    ''
+                )}
+                issued by <strong>{issuerName}</strong>. It is now available in your {brandName}{' '}
+                account.
+            </>
+        ),
+        openApp:
+            'Open the app to see it \u2014 your credential should appear automatically. If you don\u2019t see it right away, try refreshing.',
+        button: b => `Open ${b} \u2192`,
+        sincerely: 'Sincerely,',
+        subject: 'Your Credential Has Been Approved!',
+    },
+    es: {
+        preview: '¡Tu credencial ha sido aprobada por tu tutor!',
+        heading: '¡Tu credencial ha sido aprobada!',
+        greatNews: '¡Buenas noticias!',
+        body: (issuerName, credentialName, brandName) => (
+            <>
+                Tu tutor ha aprobado la credencial{' '}
+                {credentialName ? (
+                    <>
+                        <strong>&ldquo;{credentialName}&rdquo;</strong>{' '}
+                    </>
+                ) : (
+                    ''
+                )}
+                emitida por <strong>{issuerName}</strong>. Ya está disponible en tu cuenta de{' '}
+                {brandName}.
+            </>
+        ),
+        openApp:
+            'Abre la app para verla \u2014 tu credencial debería aparecer automáticamente. Si no la ves de inmediato, intenta actualizar.',
+        button: b => `Abrir ${b} \u2192`,
+        sincerely: 'Atentamente,',
+        subject: '¡Tu credencial ha sido aprobada!',
+    },
+    fr: {
+        preview: 'Votre titre a été approuvé par votre tuteur !',
+        heading: 'Votre titre a été approuvé !',
+        greatNews: 'Excellente nouvelle !',
+        body: (issuerName, credentialName, brandName) => (
+            <>
+                Votre tuteur a approuvé le titre{' '}
+                {credentialName ? (
+                    <>
+                        <strong>&laquo;&nbsp;{credentialName}&nbsp;&raquo;</strong>{' '}
+                    </>
+                ) : (
+                    ''
+                )}
+                émis par <strong>{issuerName}</strong>. Il est désormais disponible dans votre
+                compte {brandName}.
+            </>
+        ),
+        openApp:
+            'Ouvrez l\u2019application pour le voir \u2014 votre titre devrait apparaître automatiquement. Si vous ne le voyez pas tout de suite, essayez d\u2019actualiser.',
+        button: b => `Ouvrir ${b} \u2192`,
+        sincerely: 'Cordialement,',
+        subject: 'Votre titre a été approuvé !',
+    },
+    ar: {
+        preview: 'تمت الموافقة على شهادتك من قبل ولي أمرك!',
+        heading: 'تمت الموافقة على شهادتك!',
+        greatNews: 'أخبار رائعة!',
+        body: (issuerName, credentialName, brandName) => (
+            <>
+                وافق ولي أمرك على الشهادة{' '}
+                {credentialName ? (
+                    <>
+                        <strong>&laquo;{credentialName}&raquo;</strong>{' '}
+                    </>
+                ) : (
+                    ''
+                )}
+                الصادرة من <strong>{issuerName}</strong>. وهي متاحة الآن في حسابك على {brandName}.
+            </>
+        ),
+        openApp:
+            'افتح التطبيق لرؤيتها \u2014 ينبغي أن تظهر شهادتك تلقائيًا. إذا لم تظهرها على الفور، حاول التحديث.',
+        button: b => `فتح ${b} ←`,
+        sincerely: 'مع التحيات،',
+        subject: 'تمت الموافقة على شهادتك!',
+    },
+};
+
 export const GuardianApprovedClaim: React.FC<GuardianApprovedClaimProps> = ({
     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 credential has been approved by your guardian!" showHeaderLogo={false}>
-            <IssuerLogo logoUrl={issuer?.logoUrl} alt={issuerName ? `${issuerName} logo` : undefined} />
+        <Layout branding={branding} locale={locale} preview={s.preview} showHeaderLogo={false}>
+            <IssuerLogo
+                logoUrl={issuer?.logoUrl}
+                alt={issuerName ? `${issuerName} logo` : undefined}
+            />
 
-            <Text style={heading}>Your credential has been approved!</Text>
+            <Text style={heading}>{s.heading}</Text>
 
-            <Text style={paragraph}>Great news!</Text>
+            <Text style={paragraph}>{s.greatNews}</Text>
 
-            <Text style={paragraph}>
-                Your guardian has approved the credential{' '}
-                {credentialName ? <><strong>&ldquo;{credentialName}&rdquo;</strong> </> : ''}
-                issued by <strong>{issuerName}</strong>. It is now available in
-                your {branding.brandName} account.
-            </Text>
+            <Text style={paragraph}>{s.body(issuerName, credentialName, branding.brandName)}</Text>
 
-            <Text style={paragraph}>
-                Open the app to see it — your credential should appear automatically.
-                If you don&apos;t see it right away, try refreshing.
-            </Text>
+            <Text style={paragraph}>{s.openApp}</Text>
 
             <Section style={buttonWrapper}>
                 <EmailButton href={branding.appUrl} branding={branding}>
-                    Open {branding.brandName} &rarr;
+                    {s.button(branding.brandName)}
                 </EmailButton>
             </Section>
 
             <Text style={signOff}>
-                Sincerely,<br />The {branding.brandName} Team
+                {s.sincerely}
+                <br />
+                {interpolate(SHARED[resolveCatalogLocale(locale)].teamSignature, {
+                    brandName: branding.brandName,
+                })}
             </Text>
         </Layout>
     );
@@ -68,7 +187,8 @@ export const GuardianApprovedClaim: React.FC<GuardianApprovedClaimProps> = ({
 
 export const getGuardianApprovedClaimSubject = (
     _branding: TenantBranding,
-): string => 'Your Credential Has Been Approved!';
+    locale?: string
+): string => STRINGS[resolveCatalogLocale(locale)].subject;
 
 // ---------------------------------------------------------------------------
 // Styles

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

@@ -14,6 +14,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 GuardianCredentialApprovalProps {
     branding: TenantBranding;
@@ -29,56 +31,149 @@ export interface GuardianCredentialApprovalProps {
     recipient?: {
         email?: string;
     };
+    /** Recipient locale (BCP-47). Defaults to English. */
+    locale?: string;
 }
 
+const STRINGS: Record<
+    NotificationLocale,
+    {
+        preview: (recipientEmail: string) => string;
+        heading: string;
+        greeting: string;
+        body: (
+            issuerName: string,
+            credentialName: string,
+            recipientEmail: string
+        ) => React.ReactNode;
+        review: string;
+        button: string;
+        thankYou: string;
+        subject: string;
+    }
+> = {
+    en: {
+        preview: r => `A credential needs your approval for ${r}`,
+        heading: 'A credential needs your approval',
+        greeting: 'Hello,',
+        body: (issuerName, credentialName, recipientEmail) => (
+            <>
+                <strong>{issuerName}</strong> has issued the credential{' '}
+                <strong>&ldquo;{credentialName}&rdquo;</strong> to <strong>{recipientEmail}</strong>
+                .
+            </>
+        ),
+        review: 'As their guardian, your approval is required before they can claim it. Please review the credential and approve or decline below.',
+        button: 'Review &amp; Approve \u2192',
+        thankYou: 'Thank you,',
+        subject: 'A credential needs your approval',
+    },
+    es: {
+        preview: r => `Una credencial necesita tu aprobación para ${r}`,
+        heading: 'Una credencial necesita tu aprobación',
+        greeting: 'Hola,',
+        body: (issuerName, credentialName, recipientEmail) => (
+            <>
+                <strong>{issuerName}</strong> ha emitido la credencial{' '}
+                <strong>&ldquo;{credentialName}&rdquo;</strong> para{' '}
+                <strong>{recipientEmail}</strong>.
+            </>
+        ),
+        review: 'Como su tutor, se requiere tu aprobación antes de que pueda reclamarla. Revisa la credencial y apruébala o recházala a continuación.',
+        button: 'Revisar y aprobar \u2192',
+        thankYou: 'Gracias,',
+        subject: 'Una credencial necesita tu aprobación',
+    },
+    fr: {
+        preview: r => `Un titre nécessite votre approbation pour ${r}`,
+        heading: 'Un titre nécessite votre approbation',
+        greeting: 'Bonjour,',
+        body: (issuerName, credentialName, recipientEmail) => (
+            <>
+                <strong>{issuerName}</strong> a émis le titre{' '}
+                <strong>&laquo;&nbsp;{credentialName}&nbsp;&raquo;</strong> pour{' '}
+                <strong>{recipientEmail}</strong>.
+            </>
+        ),
+        review: 'En tant que son tuteur, votre approbation est requise avant qu\u2019il puisse le réclamer. Veuillez vérifier le titre et l\u2019approuver ou le refuser ci-dessous.',
+        button: 'Vérifier &amp; approuver \u2192',
+        thankYou: 'Merci,',
+        subject: 'Un titre nécessite votre approbation',
+    },
+    ar: {
+        preview: r => `شهادة بحاجة إلى موافقتك من أجل ${r}`,
+        heading: 'شهادة بحاجة إلى موافقتك',
+        greeting: 'مرحبًا،',
+        body: (issuerName, credentialName, recipientEmail) => (
+            <>
+                أصدر <strong>{issuerName}</strong> الشهادة{' '}
+                <strong>&laquo;{credentialName}&raquo;</strong> لـ <strong>{recipientEmail}</strong>
+                .
+            </>
+        ),
+        review: 'بصفتك ولي أمره، موافقتك مطلوبة قبل أن يتمكن من المطالبة بها. يرجى مراجعة الشهادة والموافقة عليها أو رفضها أدناه.',
+        button: 'مراجعة وموافقة ←',
+        thankYou: 'شكرًا،',
+        subject: 'شهادة بحاجة إلى موافقتك',
+    },
+};
+
 export const GuardianCredentialApproval: React.FC<GuardianCredentialApprovalProps> = ({
     branding,
     approvalUrl,
     issuer,
     credential,
     recipient,
+    locale,
 }) => {
+    const s = STRINGS[resolveCatalogLocale(locale)];
     const issuerName = issuer?.name ?? 'An issuer';
     const credentialName = credential?.name ?? 'a credential';
     const recipientEmail = recipient?.email ?? 'a student';
 
     return (
-        <Layout branding={branding} preview={`A credential needs your approval for ${recipientEmail}`} showHeaderLogo={false}>
-            <IssuerLogo logoUrl={issuer?.logoUrl} alt={issuerName ? `${issuerName} logo` : undefined} />
+        <Layout
+            branding={branding}
+            locale={locale}
+            preview={s.preview(recipientEmail)}
+            showHeaderLogo={false}
+        >
+            <IssuerLogo
+                logoUrl={issuer?.logoUrl}
+                alt={issuerName ? `${issuerName} logo` : undefined}
+            />
 
-            <Text style={heading}>A credential needs your approval</Text>
+            <Text style={heading}>{s.heading}</Text>
 
-            <Text style={paragraph}>Hello,</Text>
+            <Text style={paragraph}>{s.greeting}</Text>
 
-            <Text style={paragraph}>
-                <strong>{issuerName}</strong> has issued the credential{' '}
-                <strong>&ldquo;{credentialName}&rdquo;</strong> to{' '}
-                <strong>{recipientEmail}</strong>.
-            </Text>
+            <Text style={paragraph}>{s.body(issuerName, credentialName, recipientEmail)}</Text>
 
-            <Text style={paragraph}>
-                As their guardian, your approval is required before they can claim it.
-                Please review the credential and approve or decline below.
-            </Text>
+            <Text style={paragraph}>{s.review}</Text>
 
             <Section style={buttonWrapper}>
                 <EmailButton href={approvalUrl} branding={branding}>
-                    Review &amp; Approve &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>
     );
 };
 
 export const getGuardianCredentialApprovalSubject = (
     _branding: TenantBranding,
-): string => 'A credential needs your approval';
+    locale?: string
+): string => STRINGS[resolveCatalogLocale(locale)].subject;
 
 // ---------------------------------------------------------------------------
 // Styles

package/src/templates/guardian-email-otp.tsx

@@ -12,48 +12,131 @@ 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 GuardianEmailOtpProps {
     branding: TenantBranding;
     verificationCode: string;
+    /** Recipient locale (BCP-47). Defaults to English. */
+    locale?: string;
 }
 
+const STRINGS: Record<
+    NotificationLocale,
+    {
+        preview: (code: string) => string;
+        heading: string;
+        greeting: string;
+        body: string;
+        codeLabel: string;
+        expiry: () => React.ReactNode;
+        notRequested: string;
+        sincerely: string;
+        subject: string;
+    }
+> = {
+    en: {
+        preview: c => `Your verification code: ${c}`,
+        heading: 'Your verification code',
+        greeting: 'Hi there,',
+        body: 'Here is your verification code to confirm your identity as guardian and complete your review:',
+        codeLabel: 'Verification code',
+        expiry: () => (
+            <>
+                This code expires in <strong style={{ color: '#374151' }}>1 hour</strong>. Do not
+                share it with anyone.
+            </>
+        ),
+        notRequested: 'If you did not request this code, you can safely ignore this email.',
+        sincerely: 'Sincerely,',
+        subject: 'Your Verification Code',
+    },
+    es: {
+        preview: c => `Tu código de verificación: ${c}`,
+        heading: 'Tu código de verificación',
+        greeting: 'Hola,',
+        body: 'Aquí tienes tu código de verificación para confirmar tu identidad como tutor y completar tu revisión:',
+        codeLabel: 'Código de verificación',
+        expiry: () => (
+            <>
+                Este código caduca en <strong style={{ color: '#374151' }}>1 hora</strong>. No lo
+                compartas con nadie.
+            </>
+        ),
+        notRequested: 'Si no solicitaste este código, puedes ignorar este correo con seguridad.',
+        sincerely: 'Atentamente,',
+        subject: 'Tu código de verificación',
+    },
+    fr: {
+        preview: c => `Votre code de vérification : ${c}`,
+        heading: 'Votre code de vérification',
+        greeting: 'Bonjour,',
+        body: 'Voici votre code de vérification pour confirmer votre identité en tant que tuteur et terminer votre révision :',
+        codeLabel: 'Code de vérification',
+        expiry: () => (
+            <>
+                Ce code expire dans <strong style={{ color: '#374151' }}>1 heure</strong>. Ne le
+                partagez avec personne.
+            </>
+        ),
+        notRequested:
+            'Si vous n\u2019êtes pas à l\u2019origine de cette demande, vous pouvez ignorer cet e-mail en toute sécurité.',
+        sincerely: 'Cordialement,',
+        subject: 'Votre code de vérification',
+    },
+    ar: {
+        preview: c => `رمز التحقق الخاص بك: ${c}`,
+        heading: 'رمز التحقق الخاص بك',
+        greeting: 'مرحبًا،',
+        body: 'إليك رمز التحقق لتأكيد هويتك كولي أمر وإكمال مراجعتك:',
+        codeLabel: 'رمز التحقق',
+        expiry: () => (
+            <>
+                تنتهي صلاحية هذا الرمز خلال <strong style={{ color: '#374151' }}>ساعة واحدة</strong>
+                . لا تشاركه مع أي شخص.
+            </>
+        ),
+        notRequested: 'إذا لم تطلب هذا الرمز، يمكنك تجاهل هذه الرسالة بأمان.',
+        sincerely: 'مع التحيات،',
+        subject: 'رمز التحقق الخاص بك',
+    },
+};
+
 export const GuardianEmailOtp: React.FC<GuardianEmailOtpProps> = ({
     branding,
     verificationCode,
+    locale,
 }) => {
+    const s = STRINGS[resolveCatalogLocale(locale)];
+
     return (
-        <Layout branding={branding} preview={`Your verification code: ${verificationCode}`}>
-            <Text style={heading}>Your verification code</Text>
+        <Layout branding={branding} locale={locale} preview={s.preview(verificationCode)}>
+            <Text style={heading}>{s.heading}</Text>
 
-            <Text style={paragraph}>Hi there,</Text>
+            <Text style={paragraph}>{s.greeting}</Text>
 
-            <Text style={paragraph}>
-                Here is your verification code to confirm your identity as guardian and
-                complete your review:
-            </Text>
+            <Text style={paragraph}>{s.body}</Text>
 
-            <CodeBlock code={verificationCode} label="Verification code" />
+            <CodeBlock code={verificationCode} label={s.codeLabel} />
 
-            <Text style={muted}>
-                This code expires in <strong style={{ color: '#374151' }}>1 hour</strong>.
-                Do not share it with anyone.
-            </Text>
+            <Text style={muted}>{s.expiry()}</Text>
 
-            <Text style={muted}>
-                If you did not request this code, you can safely ignore this email.
-            </Text>
+            <Text style={muted}>{s.notRequested}</Text>
 
             <Text style={signOff}>
-                Sincerely,<br />The {branding.brandName} Team
+                {s.sincerely}
+                <br />
+                {interpolate(SHARED[resolveCatalogLocale(locale)].teamSignature, {
+                    brandName: branding.brandName,
+                })}
             </Text>
         </Layout>
     );
 };
 
-export const getGuardianEmailOtpSubject = (
-    _branding: TenantBranding,
-): string => 'Your Verification Code';
+export const getGuardianEmailOtpSubject = (_branding: TenantBranding, locale?: string): string =>
+    STRINGS[resolveCatalogLocale(locale)].subject;
 
 // ---------------------------------------------------------------------------
 // Styles
@@ -92,10 +175,5 @@ const signOff: React.CSSProperties = {
 // ---------------------------------------------------------------------------
 
 export default function Preview() {
-    return (
-        <GuardianEmailOtp
-            branding={DEFAULT_BRANDING}
-            verificationCode="847293"
-        />
-    );
+    return <GuardianEmailOtp branding={DEFAULT_BRANDING} verificationCode="847293" />;
 }