@learncard/email-templates 1.0.1 → 1.0.3

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

@@ -0,0 +1,137 @@
+/**
+ * CredentialAwaitingGuardian — email sent to a student/recipient when their
+ * credential is pending guardian approval.
+ *
+ * Used by: brain-service (templateAlias: 'credential-awaiting-guardian')
+ */
+
+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 { IssuerLogo } from '../components/IssuerLogo';
+
+export interface CredentialAwaitingGuardianProps {
+    branding: TenantBranding;
+    issuer?: {
+        name?: string;
+        logoUrl?: string;
+    };
+    credential?: {
+        name?: string;
+    };
+    recipient?: {
+        email?: string;
+    };
+}
+
+export const CredentialAwaitingGuardian: React.FC<CredentialAwaitingGuardianProps> = ({
+    branding,
+    issuer,
+    credential,
+}) => {
+    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} />
+
+            <Text style={heading}>Pending guardian approval</Text>
+
+            <Text style={paragraph}>Hi there,</Text>
+
+            <Text style={paragraph}>
+                <strong>{issuerName}</strong> has sent you the credential{' '}
+                <strong>&ldquo;{credentialName}&rdquo;</strong>.
+            </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>
+
+            <Section style={statusBadge}>
+                <Text style={statusText}>Awaiting Guardian Approval</Text>
+            </Section>
+
+            <Text style={muted}>
+                No action is needed from you right now.
+            </Text>
+
+            <Text style={signOff}>
+                Sincerely,<br />The {branding.brandName} Team
+            </Text>
+        </Layout>
+    );
+};
+
+export const getCredentialAwaitingGuardianSubject = (
+    _branding: TenantBranding,
+): string => 'Your Credential Is Pending Guardian Approval';
+
+// ---------------------------------------------------------------------------
+// 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 statusBadge: React.CSSProperties = {
+    backgroundColor: '#f5f3ff',
+    border: '1px solid #ddd6fe',
+    borderRadius: 8,
+    padding: '16px 24px',
+    margin: '20px 0',
+    textAlign: 'center' as const,
+};
+
+const statusText: React.CSSProperties = {
+    fontSize: 14,
+    fontWeight: 600,
+    color: '#6366f1',
+    margin: 0,
+};
+
+const muted: React.CSSProperties = {
+    fontSize: 14,
+    color: '#6b7280',
+    lineHeight: '20px',
+    margin: '0 0 24px',
+};
+
+const signOff: React.CSSProperties = {
+    fontSize: 14,
+    color: '#374151',
+    lineHeight: '20px',
+    margin: '24px 0 0',
+};
+
+// ---------------------------------------------------------------------------
+// Preview
+// ---------------------------------------------------------------------------
+
+export default function Preview() {
+    return (
+        <CredentialAwaitingGuardian
+            branding={DEFAULT_BRANDING}
+            issuer={{ name: 'Springfield School District' }}
+            credential={{ name: 'Perfect Attendance Award' }}
+            recipient={{ email: 'student@example.com' }}
+        />
+    );
+}

package/src/templates/email-verification.tsx

@@ -0,0 +1,110 @@
+/**
+ * EmailVerification — link-based email verification (click a button to verify).
+ *
+ * Used by: brain-service contact-methods.ts (templateId: 'contact-method-verification')
+ *
+ * This is distinct from VerificationCode (which displays a 6-digit code).
+ * Here the user receives a UUID token embedded in a CTA link.
+ */
+
+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 { LinkFallback } from '../components/LinkFallback';
+
+export interface EmailVerificationProps {
+    branding: TenantBranding;
+    verificationToken: string;
+    recipient?: {
+        name?: string;
+    };
+}
+
+export const EmailVerification: React.FC<EmailVerificationProps> = ({
+    branding,
+    verificationToken,
+    recipient,
+}) => {
+    const greeting = recipient?.name ? `Hello ${recipient.name},` : 'Hello,';
+    const verifyUrl = `${branding.appUrl}/verify-email?token=${verificationToken}`;
+
+    return (
+        <Layout branding={branding} preview="Verify your email address">
+            <Text style={heading}>Verify Your Email</Text>
+
+            <Text style={paragraph}>{greeting}</Text>
+
+            <Text style={paragraph}>
+                Please click the button below to verify your email address.
+            </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>
+
+            <Section style={buttonWrapper}>
+                <EmailButton href={verifyUrl} branding={branding}>
+                    Verify Your Email &rarr;
+                </EmailButton>
+            </Section>
+
+            <Text style={signOff}>
+                Sincerely,<br />The {branding.brandName} Team
+            </Text>
+
+            <LinkFallback href={verifyUrl} />
+        </Layout>
+    );
+};
+
+export const getEmailVerificationSubject = (
+    _branding: TenantBranding,
+): string => 'Verify Your Email';
+
+// ---------------------------------------------------------------------------
+// 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 (
+        <EmailVerification
+            branding={DEFAULT_BRANDING}
+            verificationToken="f47ac10b-58cc-4372-a567-0e02b2c3d479"
+            recipient={{ name: 'Jane Doe' }}
+        />
+    );
+}

package/src/templates/endorsement-request.tsx

@@ -0,0 +1,157 @@
+/**
+ * EndorsementRequest — email asking someone to endorse a credential.
+ *
+ * Used by: lca-api credentials.ts (templateAlias: ENDORSEMENT_REQUEST_TEMPLATE_ALIAS)
+ */
+
+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';
+
+export interface EndorsementRequestProps {
+    branding: TenantBranding;
+    shareLink: string;
+    recipient?: {
+        name?: string;
+        email?: string;
+    };
+    issuer?: {
+        name?: string;
+        logoUrl?: string;
+    };
+    credential?: {
+        name?: string;
+        type?: string;
+    };
+    message?: string;
+}
+
+export const EndorsementRequest: React.FC<EndorsementRequestProps> = ({
+    branding,
+    shareLink,
+    recipient,
+    issuer,
+    credential,
+    message,
+}) => {
+    const greeting = recipient?.name ? `Hello ${recipient.name},` : 'Hello,';
+    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} />
+
+            <Text style={paragraph}>{greeting}</Text>
+
+            <Text style={paragraph}>
+                <strong>{issuerName}</strong> has requested an endorsement from you
+                {credentialName ? <> for <strong>{credentialName}</strong></> : ''}.
+            </Text>
+
+            {message && (
+                <Section style={messageBox}>
+                    <Text style={messageText}>{message}</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.
+            </Text>
+
+            <Section style={buttonWrapper}>
+                <EmailButton href={shareLink} branding={branding}>
+                    Endorse &rarr;
+                </EmailButton>
+            </Section>
+
+            <Text style={signOff}>
+                Sincerely,<br />The {branding.brandName} Team
+            </Text>
+
+            <LinkFallback href={shareLink} />
+        </Layout>
+    );
+};
+
+export const getEndorsementRequestSubject = (
+    _branding: TenantBranding,
+    props: EndorsementRequestProps,
+): string => {
+    const issuerName = props.issuer?.name ?? 'Someone';
+
+    return `${issuerName} is requesting your endorsement`;
+};
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+const paragraph: React.CSSProperties = {
+    fontSize: 16,
+    color: '#374151',
+    lineHeight: '24px',
+    margin: '0 0 24px',
+};
+
+const messageBox: React.CSSProperties = {
+    backgroundColor: '#f6f6f9',
+    borderRadius: 8,
+    padding: '16px 20px',
+    margin: '16px 0',
+    borderLeft: '3px solid #C5C8D3',
+};
+
+const messageText: React.CSSProperties = {
+    fontSize: 15,
+    color: '#111827',
+    lineHeight: '22px',
+    margin: 0,
+    textAlign: 'left' as const,
+};
+
+const messageSender: React.CSSProperties = {
+    fontSize: 14,
+    fontWeight: 600,
+    color: '#111827',
+    margin: '12px 0 0',
+};
+
+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 (
+        <EndorsementRequest
+            branding={DEFAULT_BRANDING}
+            shareLink="https://learncard.app/share/xyz789"
+            recipient={{ name: 'Dr. Emily Chen' }}
+            issuer={{ name: 'John Doe' }}
+            credential={{ name: 'Professional Teaching Certificate' }}
+            message="I would greatly appreciate your endorsement of my teaching credential. We worked together at Springfield Academy for 3 years."
+        />
+    );
+}

package/src/templates/guardian-approval.tsx

@@ -0,0 +1,122 @@
+/**
+ * GuardianApproval — email sent to a guardian to approve a minor's account.
+ *
+ * Used by: brain-service inbox.ts (templateId: 'guardian-approval')
+ */
+
+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 { LinkFallback } from '../components/LinkFallback';
+
+export interface GuardianApprovalProps {
+    branding: TenantBranding;
+    approvalUrl: string;
+    approvalToken: string;
+    requester?: {
+        displayName?: string;
+        profileId?: string;
+    };
+    guardian?: {
+        email?: string;
+    };
+}
+
+export const GuardianApproval: React.FC<GuardianApprovalProps> = ({
+    branding,
+    approvalUrl,
+    requester,
+}) => {
+    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>
+
+            <Text style={paragraph}>Hello,</Text>
+
+            <Text style={paragraph}>
+                <strong>{requesterName}</strong> has requested approval to use their {branding.brandName} account.
+            </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}>
+                Please click the button below to approve this account request.
+            </Text>
+
+            <Section style={buttonWrapper}>
+                <EmailButton href={approvalUrl} branding={branding}>
+                    Approve Request &rarr;
+                </EmailButton>
+            </Section>
+
+            <Text style={signOff}>
+                Thank you,<br />The {branding.brandName} Team
+            </Text>
+
+            <LinkFallback href={approvalUrl} />
+        </Layout>
+    );
+};
+
+export const getGuardianApprovalSubject = (
+    branding: TenantBranding,
+    props: GuardianApprovalProps,
+): string => {
+    const name = props.requester?.displayName ?? 'Someone';
+
+    return `${name} needs your approval to join ${branding.brandName}`;
+};
+
+// ---------------------------------------------------------------------------
+// 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 (
+        <GuardianApproval
+            branding={DEFAULT_BRANDING}
+            approvalUrl="https://learncard.app/approve?token=abc123"
+            approvalToken="abc123"
+            requester={{ displayName: 'Alex Smith' }}
+            guardian={{ email: 'parent@example.com' }}
+        />
+    );
+}

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

@@ -0,0 +1,114 @@
+/**
+ * GuardianApprovedClaim — email sent to a student when their guardian has
+ * approved a credential.
+ *
+ * Used by: brain-service (templateAlias: 'guardian-approved-claim')
+ */
+
+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';
+
+export interface GuardianApprovedClaimProps {
+    branding: TenantBranding;
+    issuer?: {
+        name?: string;
+        logoUrl?: string;
+    };
+    credential?: {
+        name?: string;
+    };
+}
+
+export const GuardianApprovedClaim: React.FC<GuardianApprovedClaimProps> = ({
+    branding,
+    issuer,
+    credential,
+}) => {
+    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} />
+
+            <Text style={heading}>Your credential has been approved!</Text>
+
+            <Text style={paragraph}>Great news!</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}>
+                Open the app to see it — your credential should appear automatically.
+                If you don&apos;t see it right away, try refreshing.
+            </Text>
+
+            <Section style={buttonWrapper}>
+                <EmailButton href={branding.appUrl} branding={branding}>
+                    Open {branding.brandName} &rarr;
+                </EmailButton>
+            </Section>
+
+            <Text style={signOff}>
+                Sincerely,<br />The {branding.brandName} Team
+            </Text>
+        </Layout>
+    );
+};
+
+export const getGuardianApprovedClaimSubject = (
+    _branding: TenantBranding,
+): string => 'Your Credential Has Been Approved!';
+
+// ---------------------------------------------------------------------------
+// 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 (
+        <GuardianApprovedClaim
+            branding={DEFAULT_BRANDING}
+            issuer={{ name: 'Springfield School District' }}
+            credential={{ name: 'Perfect Attendance Award' }}
+        />
+    );
+}