@learncard/email-templates 1.0.6 → 1.2.0

package/src/templates/credential-updated.tsx

@@ -0,0 +1,309 @@
+/**
+ * CredentialUpdated — privacy-minimal notice that an issuer published a new
+ * version of a credential.
+ *
+ * Used by: brain-service credential-refresh publication (templateId:
+ * 'credential-updated').
+ *
+ * Deliberately minimal context: the issuer display name and the credential
+ * display title are the only dynamic values. No grades, subject/recipient
+ * details, evidence, body, or issuer-authored update summary is rendered. The
+ * CTA points at the recipient's own notifications page (never a claim URL and
+ * never a bearer token), so a forwarded email cannot be used to access the
+ * credential.
+ */
+
+import { Text, Section } from '@react-email/components';
+import * as React from 'react';
+
+import type { TenantBranding } from '../branding';
+import { DEFAULT_BRANDING } from '../branding';
+import { Layout } from '../components/Layout';
+import { EmailButton } from '../components/EmailButton';
+import { IssuerLogo } from '../components/IssuerLogo';
+import { LinkFallback } from '../components/LinkFallback';
+import type { NotificationLocale } from '../i18n';
+import { resolveCatalogLocale, interpolate, SHARED } from '../i18n';
+
+export interface CredentialUpdatedProps {
+    branding: TenantBranding;
+    issuer?: {
+        name?: string;
+        logoUrl?: string;
+    };
+    /** Bounded credential display title. Omitted when unavailable. */
+    credential?: {
+        name?: string;
+    };
+    /** Recipient locale (BCP-47). Defaults to English. */
+    locale?: string;
+}
+
+const ldquo = '\u201C';
+const rdquo = '\u201D';
+
+type Strings = {
+    preview: string;
+    heading: string;
+    body: (issuerName: string | undefined, credentialName: string | undefined) => React.ReactNode;
+    signIn: string;
+    button: string;
+    sincerely: string;
+    subject: string;
+};
+
+const EN: Strings = {
+    preview: 'Your credential has been updated',
+    heading: 'Your credential was updated',
+    body: (issuerName, credentialName) =>
+        issuerName ? (
+            credentialName ? (
+                <>
+                    <strong>{issuerName}</strong> updated your{' '}
+                    <strong>
+                        {ldquo}
+                        {credentialName}
+                        {rdquo}
+                    </strong>{' '}
+                    certificate.
+                </>
+            ) : (
+                <>
+                    <strong>{issuerName}</strong> updated one of your credentials.
+                </>
+            )
+        ) : credentialName ? (
+            <>
+                Your{' '}
+                <strong>
+                    {ldquo}
+                    {credentialName}
+                    {rdquo}
+                </strong>{' '}
+                certificate was updated.
+            </>
+        ) : (
+            <>One of your credentials was updated.</>
+        ),
+    signIn: 'Sign in to view the latest version.',
+    button: 'View Updates',
+    sincerely: 'Sincerely,',
+    subject: 'Your credential was updated',
+};
+
+const ES: Strings = {
+    preview: 'Tu credencial se ha actualizado',
+    heading: 'Tu credencial se actualizó',
+    body: (issuerName, credentialName) =>
+        issuerName ? (
+            credentialName ? (
+                <>
+                    <strong>{issuerName}</strong> actualizó tu certificado{' '}
+                    <strong>
+                        {ldquo}
+                        {credentialName}
+                        {rdquo}
+                    </strong>
+                    .
+                </>
+            ) : (
+                <>
+                    <strong>{issuerName}</strong> actualizó una de tus credenciales.
+                </>
+            )
+        ) : credentialName ? (
+            <>
+                Tu certificado{' '}
+                <strong>
+                    {ldquo}
+                    {credentialName}
+                    {rdquo}
+                </strong>{' '}
+                se actualizó.
+            </>
+        ) : (
+            <>Una de tus credenciales se actualizó.</>
+        ),
+    signIn: 'Inicia sesión para ver la última versión.',
+    button: 'Ver actualizaciones',
+    sincerely: 'Atentamente,',
+    subject: 'Tu credencial se actualizó',
+};
+
+const FR: Strings = {
+    preview: 'Votre titre a été mis à jour',
+    heading: 'Votre titre a été mis à jour',
+    body: (issuerName, credentialName) =>
+        issuerName ? (
+            credentialName ? (
+                <>
+                    <strong>{issuerName}</strong> a mis à jour votre certificat{' '}
+                    <strong>
+                        {ldquo}
+                        {credentialName}
+                        {rdquo}
+                    </strong>
+                    .
+                </>
+            ) : (
+                <>
+                    <strong>{issuerName}</strong> a mis à jour l&apos;un de vos titres.
+                </>
+            )
+        ) : credentialName ? (
+            <>
+                Votre certificat{' '}
+                <strong>
+                    {ldquo}
+                    {credentialName}
+                    {rdquo}
+                </strong>{' '}
+                a été mis à jour.
+            </>
+        ) : (
+            <>L&apos;un de vos titres a été mis à jour.</>
+        ),
+    signIn: 'Connectez-vous pour voir la dernière version.',
+    button: 'Voir les mises à jour',
+    sincerely: 'Cordialement,',
+    subject: 'Votre titre a été mis à jour',
+};
+
+const AR: Strings = {
+    preview: 'تم تحديث شهادتك',
+    heading: 'تم تحديث شهادتك',
+    body: (issuerName, credentialName) =>
+        issuerName ? (
+            credentialName ? (
+                <>
+                    قام <strong>{issuerName}</strong> بتحديث شهادتك{' '}
+                    <strong>
+                        {ldquo}
+                        {credentialName}
+                        {rdquo}
+                    </strong>
+                    .
+                </>
+            ) : (
+                <>
+                    قام <strong>{issuerName}</strong> بتحديث إحدى شهاداتك.
+                </>
+            )
+        ) : credentialName ? (
+            <>
+                تم تحديث شهادتك{' '}
+                <strong>
+                    {ldquo}
+                    {credentialName}
+                    {rdquo}
+                </strong>
+                .
+            </>
+        ) : (
+            <>تم تحديث إحدى شهاداتك.</>
+        ),
+    signIn: 'سجّل الدخول لعرض أحدث إصدار.',
+    button: 'عرض التحديثات',
+    sincerely: 'مع التحيات،',
+    subject: 'تم تحديث شهادتك',
+};
+
+const STRINGS: Record<NotificationLocale, Strings> = { en: EN, es: ES, fr: FR, ar: AR };
+
+/** Notifications page of the configured app (never a claim or token URL). */
+const notificationsUrl = (branding: TenantBranding): string =>
+    `${branding.appUrl.replace(/\/+$/, '')}/notifications`;
+
+export const CredentialUpdated: React.FC<CredentialUpdatedProps> = ({
+    branding,
+    issuer,
+    credential,
+    locale,
+}) => {
+    const s = STRINGS[resolveCatalogLocale(locale)];
+    const issuerName = issuer?.name;
+    const credentialName = credential?.name;
+    const updatesUrl = notificationsUrl(branding);
+
+    return (
+        <Layout
+            branding={branding}
+            locale={locale}
+            preview={s.preview}
+            showHeaderLogo={!issuer?.logoUrl}
+        >
+            <IssuerLogo
+                logoUrl={issuer?.logoUrl}
+                alt={issuerName ? `${issuerName} logo` : undefined}
+            />
+
+            <Text style={heading}>{s.heading}</Text>
+
+            <Text style={paragraph}>{s.body(issuerName, credentialName)}</Text>
+
+            <Text style={paragraph}>{s.signIn}</Text>
+
+            <Section style={buttonWrapper}>
+                <EmailButton href={updatesUrl} branding={branding}>
+                    {s.button}
+                </EmailButton>
+            </Section>
+
+            <Text style={signOff}>
+                {s.sincerely}
+                <br />
+                {interpolate(SHARED[resolveCatalogLocale(locale)].teamSignature, {
+                    brandName: branding.brandName,
+                })}
+            </Text>
+
+            <LinkFallback href={updatesUrl} locale={locale} />
+        </Layout>
+    );
+};
+
+export const getCredentialUpdatedSubject = (_branding: TenantBranding, locale?: string): string =>
+    STRINGS[resolveCatalogLocale(locale)].subject;
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+const heading: React.CSSProperties = {
+    fontSize: 24,
+    fontWeight: 600,
+    color: '#111827',
+    margin: '0 0 24px',
+};
+
+const paragraph: React.CSSProperties = {
+    fontSize: 16,
+    color: '#374151',
+    lineHeight: '24px',
+    margin: '0 0 24px',
+};
+
+const buttonWrapper: React.CSSProperties = {
+    margin: '0 0 24px',
+};
+
+const signOff: React.CSSProperties = {
+    fontSize: 14,
+    color: '#374151',
+    lineHeight: '20px',
+    margin: '24px 0 0',
+};
+
+// ---------------------------------------------------------------------------
+// Preview
+// ---------------------------------------------------------------------------
+
+export default function Preview() {
+    return (
+        <CredentialUpdated
+            branding={DEFAULT_BRANDING}
+            issuer={{ name: 'Inbox Demo School' }}
+            credential={{ name: 'Introduction to Biology' }}
+        />
+    );
+}

package/src/templates/index.ts

@@ -16,20 +16,34 @@ export type { RecoveryKeyProps } from './recovery-key';
 export { EndorsementRequest, getEndorsementRequestSubject } from './endorsement-request';
 export type { EndorsementRequestProps } from './endorsement-request';
 
-export { CredentialAwaitingGuardian, getCredentialAwaitingGuardianSubject } from './credential-awaiting-guardian';
+export {
+    CredentialAwaitingGuardian,
+    getCredentialAwaitingGuardianSubject,
+} from './credential-awaiting-guardian';
 export type { CredentialAwaitingGuardianProps } from './credential-awaiting-guardian';
 
 export { GuardianApprovedClaim, getGuardianApprovedClaimSubject } from './guardian-approved-claim';
 export type { GuardianApprovedClaimProps } from './guardian-approved-claim';
 
-export { GuardianCredentialApproval, getGuardianCredentialApprovalSubject } from './guardian-credential-approval';
+export {
+    GuardianCredentialApproval,
+    getGuardianCredentialApprovalSubject,
+} from './guardian-credential-approval';
 export type { GuardianCredentialApprovalProps } from './guardian-credential-approval';
 
 export { GuardianEmailOtp, getGuardianEmailOtpSubject } from './guardian-email-otp';
 export type { GuardianEmailOtpProps } from './guardian-email-otp';
 
-export { GuardianRejectedCredential, getGuardianRejectedCredentialSubject } from './guardian-rejected-credential';
+export {
+    GuardianRejectedCredential,
+    getGuardianRejectedCredentialSubject,
+} from './guardian-rejected-credential';
 export type { GuardianRejectedCredentialProps } from './guardian-rejected-credential';
 
 export { EmailVerification, getEmailVerificationSubject } from './email-verification';
 export type { EmailVerificationProps } from './email-verification';
+
+export { CredentialUpdated, getCredentialUpdatedSubject } from './credential-updated';
+export type { CredentialUpdatedProps } from './credential-updated';
+export { AccountSignInChanged, getAccountSignInChangedSubject } from './account-sign-in-changed';
+export type { AccountSignInChangedProps } from './account-sign-in-changed';

package/src/templates/recovery-key.tsx

@@ -17,6 +17,7 @@ import { resolveCatalogLocale, interpolate, SHARED } from '../i18n';
 export interface RecoveryKeyProps {
     branding: TenantBranding;
     recoveryKey: string;
+    confirmationCode: string;
     /** Recipient locale (BCP-47). Defaults to English. */
     locale?: string;
 }
@@ -29,6 +30,8 @@ const STRINGS: Record<
         greeting: string;
         body: (brandName: string) => string;
         codeLabel: string;
+        confirmationCodeLabel: string;
+        confirmationInstruction: string;
         recoverInstruction: () => React.ReactNode;
         notRequested: string;
         passport: string;
@@ -43,6 +46,9 @@ const STRINGS: Record<
         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',
+        confirmationCodeLabel: 'Confirmation code',
+        confirmationInstruction:
+            'Enter this code in the app to confirm that you received your recovery key.',
         recoverInstruction: () => (
             <>
                 To recover your account, choose <strong>&ldquo;Recover via Email&rdquo;</strong> in
@@ -62,6 +68,9 @@ const STRINGS: Record<
         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',
+        confirmationCodeLabel: 'Código de confirmación',
+        confirmationInstruction:
+            'Introduce este código en la aplicación para confirmar que recibiste tu clave de recuperación.',
         recoverInstruction: () => (
             <>
                 Para recuperar tu cuenta, elige <strong>&ldquo;Recuperar por correo&rdquo;</strong>{' '}
@@ -81,6 +90,9 @@ const STRINGS: Record<
         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',
+        confirmationCodeLabel: 'Code de confirmation',
+        confirmationInstruction:
+            'Saisissez ce code dans l’application pour confirmer que vous avez reçu votre clé de récupération.',
         recoverInstruction: () => (
             <>
                 Pour récupérer votre compte, choisissez{' '}
@@ -103,6 +115,9 @@ const STRINGS: Record<
         body: b =>
             `احتفظ بهذا البريد في مكان آمن. يمكنك استخدام مفتاح الاستعادة أدناه لاستعادة الوصول إلى حسابك في ${b} إذا فقدت جهازك.`,
         codeLabel: 'مفتاح الاستعادة \u2014 لا تشاركه مع أي شخص إطلاقًا',
+        confirmationCodeLabel: 'رمز التأكيد',
+        confirmationInstruction:
+            'أدخل هذا الرمز في التطبيق لتأكيد استلام مفتاح الاستعادة الخاص بك.',
         recoverInstruction: () => (
             <>
                 لاستعادة حسابك، اختر <strong>&laquo;الاستعادة عبر البريد&raquo;</strong> في التطبيق
@@ -117,7 +132,12 @@ const STRINGS: Record<
     },
 };
 
-export const RecoveryKey: React.FC<RecoveryKeyProps> = ({ branding, recoveryKey, locale }) => {
+export const RecoveryKey: React.FC<RecoveryKeyProps> = ({
+    branding,
+    recoveryKey,
+    confirmationCode,
+    locale,
+}) => {
     const s = STRINGS[resolveCatalogLocale(locale)];
 
     return (
@@ -130,6 +150,10 @@ export const RecoveryKey: React.FC<RecoveryKeyProps> = ({ branding, recoveryKey,
 
             <CodeBlock code={recoveryKey} label={s.codeLabel} variant="key" />
 
+            <CodeBlock code={confirmationCode} label={s.confirmationCodeLabel} variant="code" />
+
+            <Text style={paragraph}>{s.confirmationInstruction}</Text>
+
             <Text style={paragraph}>{s.recoverInstruction()}</Text>
 
             <Text style={muted}>{s.notRequested}</Text>
@@ -193,6 +217,7 @@ export default function Preview() {
         <RecoveryKey
             branding={DEFAULT_BRANDING}
             recoveryKey="mango-delta-fox-echo-bravo-seven-lima-niner"
+            confirmationCode="123456"
         />
     );
 }