@learncard/email-templates 1.0.1 → 1.0.3

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

@@ -0,0 +1,127 @@
+/**
+ * GuardianCredentialApproval — email sent to a guardian asking them to
+ * approve or decline a specific credential issued to their ward.
+ *
+ * Used by: brain-service (templateAlias: 'guardian-credential-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 { IssuerLogo } from '../components/IssuerLogo';
+import { LinkFallback } from '../components/LinkFallback';
+
+export interface GuardianCredentialApprovalProps {
+    branding: TenantBranding;
+    approvalUrl: string;
+    approvalToken?: string;
+    issuer?: {
+        name?: string;
+        logoUrl?: string;
+    };
+    credential?: {
+        name?: string;
+    };
+    recipient?: {
+        email?: string;
+    };
+}
+
+export const GuardianCredentialApproval: React.FC<GuardianCredentialApprovalProps> = ({
+    branding,
+    approvalUrl,
+    issuer,
+    credential,
+    recipient,
+}) => {
+    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} />
+
+            <Text style={heading}>A credential needs your approval</Text>
+
+            <Text style={paragraph}>Hello,</Text>
+
+            <Text style={paragraph}>
+                <strong>{issuerName}</strong> has issued the credential{' '}
+                <strong>&ldquo;{credentialName}&rdquo;</strong> to{' '}
+                <strong>{recipientEmail}</strong>.
+            </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>
+
+            <Section style={buttonWrapper}>
+                <EmailButton href={approvalUrl} branding={branding}>
+                    Review &amp; Approve &rarr;
+                </EmailButton>
+            </Section>
+
+            <Text style={signOff}>
+                Thank you,<br />The {branding.brandName} Team
+            </Text>
+
+            <LinkFallback href={approvalUrl} />
+        </Layout>
+    );
+};
+
+export const getGuardianCredentialApprovalSubject = (
+    _branding: TenantBranding,
+): string => 'A credential needs your 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 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 (
+        <GuardianCredentialApproval
+            branding={DEFAULT_BRANDING}
+            approvalUrl="https://learncard.app/guardian/approve?token=abc123"
+            approvalToken="abc123"
+            issuer={{ name: 'Springfield School District' }}
+            credential={{ name: 'Perfect Attendance Award' }}
+            recipient={{ email: 'student@example.com' }}
+        />
+    );
+}

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

@@ -0,0 +1,101 @@
+/**
+ * GuardianEmailOtp — verification code email sent to a guardian when they
+ * open an approval link and need to confirm their identity via OTP.
+ *
+ * Used by: brain-service (templateAlias: 'guardian-email-otp')
+ */
+
+import { Text } 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 { CodeBlock } from '../components/CodeBlock';
+
+export interface GuardianEmailOtpProps {
+    branding: TenantBranding;
+    verificationCode: string;
+}
+
+export const GuardianEmailOtp: React.FC<GuardianEmailOtpProps> = ({
+    branding,
+    verificationCode,
+}) => {
+    return (
+        <Layout branding={branding} preview={`Your verification code: ${verificationCode}`}>
+            <Text style={heading}>Your verification code</Text>
+
+            <Text style={paragraph}>Hi there,</Text>
+
+            <Text style={paragraph}>
+                Here is your verification code to confirm your identity as guardian and
+                complete your review:
+            </Text>
+
+            <CodeBlock code={verificationCode} label="Verification code" />
+
+            <Text style={muted}>
+                This code expires in <strong style={{ color: '#374151' }}>1 hour</strong>.
+                Do not share it with anyone.
+            </Text>
+
+            <Text style={muted}>
+                If you did not request this code, you can safely ignore this email.
+            </Text>
+
+            <Text style={signOff}>
+                Sincerely,<br />The {branding.brandName} Team
+            </Text>
+        </Layout>
+    );
+};
+
+export const getGuardianEmailOtpSubject = (
+    _branding: TenantBranding,
+): string => 'Your Verification Code';
+
+// ---------------------------------------------------------------------------
+// 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 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 (
+        <GuardianEmailOtp
+            branding={DEFAULT_BRANDING}
+            verificationCode="847293"
+        />
+    );
+}

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

@@ -0,0 +1,103 @@
+/**
+ * GuardianRejectedCredential — email sent to a student when their guardian
+ * has declined to approve a credential.
+ *
+ * Used by: brain-service (templateAlias: 'guardian-rejected-credential')
+ */
+
+import { Text } from '@react-email/components';
+import * as React from 'react';
+
+import type { TenantBranding } from '../branding';
+import { DEFAULT_BRANDING } from '../branding';
+import { Layout } from '../components/Layout';
+
+export interface GuardianRejectedCredentialProps {
+    branding: TenantBranding;
+    issuer?: {
+        name?: string;
+    };
+    credential?: {
+        name?: string;
+    };
+    recipient?: {
+        email?: string;
+    };
+}
+
+export const GuardianRejectedCredential: React.FC<GuardianRejectedCredentialProps> = ({
+    branding,
+    issuer,
+    credential,
+}) => {
+    const issuerName = issuer?.name ?? 'An issuer';
+    const credentialName = credential?.name;
+
+    return (
+        <Layout branding={branding} preview="Your guardian has declined a credential">
+            <Text style={heading}>Credential not approved</Text>
+
+            <Text style={paragraph}>Hi there,</Text>
+
+            <Text style={paragraph}>
+                Your guardian has reviewed and <strong>declined</strong> the credential{' '}
+                {credentialName ? <><strong>&ldquo;{credentialName}&rdquo;</strong> </> : ''}
+                issued by <strong>{issuerName}</strong>.
+            </Text>
+
+            <Text style={paragraph}>
+                The credential will not be added to your account. If you think this was
+                a mistake, please reach out to your guardian or contact{' '}
+                <strong>{issuerName}</strong> directly.
+            </Text>
+
+            <Text style={signOff}>
+                Sincerely,<br />The {branding.brandName} Team
+            </Text>
+        </Layout>
+    );
+};
+
+export const getGuardianRejectedCredentialSubject = (
+    _branding: TenantBranding,
+): string => 'Credential Not 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 signOff: React.CSSProperties = {
+    fontSize: 14,
+    color: '#374151',
+    lineHeight: '20px',
+    margin: '24px 0 0',
+};
+
+// ---------------------------------------------------------------------------
+// Preview
+// ---------------------------------------------------------------------------
+
+export default function Preview() {
+    return (
+        <GuardianRejectedCredential
+            branding={DEFAULT_BRANDING}
+            issuer={{ name: 'Springfield School District' }}
+            credential={{ name: 'Perfect Attendance Award' }}
+            recipient={{ email: 'student@example.com' }}
+        />
+    );
+}

package/src/templates/inbox-claim.tsx

@@ -0,0 +1,141 @@
+/**
+ * InboxClaim — email notifying a recipient they have a credential to claim.
+ *
+ * Used by: brain-service inbox.helpers.ts (templateId: 'universal-inbox-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';
+import { LinkFallback } from '../components/LinkFallback';
+
+export interface InboxClaimProps {
+    branding: TenantBranding;
+    claimUrl: string;
+    recipient?: {
+        name?: string;
+        email?: string;
+        phone?: string;
+    };
+    issuer?: {
+        name?: string;
+        logoUrl?: string;
+    };
+    credential?: {
+        name?: string;
+        type?: string;
+    };
+}
+
+export const InboxClaim: React.FC<InboxClaimProps> = ({
+    branding,
+    claimUrl,
+    recipient,
+    issuer,
+    credential,
+}) => {
+    const credentialName = credential?.name;
+    const credentialType = credential?.type ?? 'record';
+    const greeting = recipient?.name ? `Hello ${recipient.name},` : 'Hello,';
+    const issuerName = issuer?.name;
+    const issuerLogo = issuer?.logoUrl;
+    const showHeaderLogo = !issuerLogo;
+    
+    return (
+        <Layout branding={branding} preview={`Your digital ${credentialType}${issuerName ? ` from ${issuerName}` : ''} is ready`} showHeaderLogo={showHeaderLogo}>
+            <IssuerLogo logoUrl={issuerLogo} alt={issuerName ? `${issuerName} logo` : undefined} />
+
+            <Text style={heading}>Your digital {credentialType} is ready</Text>
+
+            <Text style={paragraph}>
+                {greeting}
+            </Text>
+
+            <Text style={paragraph}>
+                {issuerName
+                    ? <><strong>{issuerName}</strong> has sent you</>
+                    : <>You&apos;ve received</>}{' '}
+                a secure, digital version of your{' '}
+                <strong>{credentialName ? `\u201C${credentialName}\u201D` : 'achievement'}</strong>.
+            </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. By claiming this item, you are saving a verifiable, official {credentialType} to
+                your personal passport&mdash;one that only you control.
+            </Text>
+
+            <Section style={buttonWrapper}>
+                <EmailButton href={claimUrl} branding={branding}>
+                    Claim Your Record &rarr;
+                </EmailButton>
+            </Section>
+
+            <Text style={signOff}>
+                Sincerely,<br />The {branding.brandName} Team
+            </Text>
+
+            <LinkFallback href={claimUrl} />
+        </Layout>
+    );
+};
+
+export const getInboxClaimSubject = (
+    _branding: TenantBranding,
+    props: InboxClaimProps,
+): string => {
+    const issuerPart = props.issuer?.name ? `from ${props.issuer.name} ` : '';
+
+    return `Your digital record ${issuerPart}is ready`;
+};
+
+// ---------------------------------------------------------------------------
+// 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 (
+        <InboxClaim
+            branding={DEFAULT_BRANDING}
+            claimUrl="https://learncard.app/claim/abc123"
+            recipient={{ name: 'Jane Doe' }}
+            issuer={{ name: 'Acme University', logoUrl: 'https://cdn.filestackcontent.com/J6suaVcQ467W9o1k48Kj' }}
+            credential={{ name: 'Bachelor of Science', type: 'Achievement' }}
+        />
+    );
+}

package/src/templates/index.ts

@@ -0,0 +1,35 @@
+export { VerificationCode, getVerificationCodeSubject } from './verification-code';
+export type { VerificationCodeProps, VerificationCodeVariant } from './verification-code';
+
+export { InboxClaim, getInboxClaimSubject } from './inbox-claim';
+export type { InboxClaimProps } from './inbox-claim';
+
+export { GuardianApproval, getGuardianApprovalSubject } from './guardian-approval';
+export type { GuardianApprovalProps } from './guardian-approval';
+
+export { AccountApproved, getAccountApprovedSubject } from './account-approved';
+export type { AccountApprovedProps } from './account-approved';
+
+export { RecoveryKey, getRecoveryKeySubject } from './recovery-key';
+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 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 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 type { GuardianRejectedCredentialProps } from './guardian-rejected-credential';
+
+export { EmailVerification, getEmailVerificationSubject } from './email-verification';
+export type { EmailVerificationProps } from './email-verification';

package/src/templates/recovery-key.tsx

@@ -0,0 +1,102 @@
+/**
+ * RecoveryKey — email containing a user's account recovery key.
+ *
+ * Used by: lca-api keys.ts (templateAlias: RECOVERY_KEY_TEMPLATE_ALIAS)
+ */
+
+import { Text } 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 { CodeBlock } from '../components/CodeBlock';
+
+export interface RecoveryKeyProps {
+    branding: TenantBranding;
+    recoveryKey: string;
+}
+
+export const RecoveryKey: React.FC<RecoveryKeyProps> = ({
+    branding,
+    recoveryKey,
+}) => (
+    <Layout branding={branding} preview={`Your ${branding.brandName} recovery key — keep this safe`}>
+        <Text style={heading}>Your {branding.brandName} Recovery Key</Text>
+
+        <Text style={paragraph}>Hello,</Text>
+
+        <Text style={paragraph}>
+            Keep this email safe. You can use the recovery key below to regain access
+            to your {branding.brandName} account if you lose your device.
+        </Text>
+
+        <CodeBlock code={recoveryKey} label="Recovery Key — do NOT share this with anyone" variant="key" />
+
+        <Text style={paragraph}>
+            To recover your account, choose <strong>&ldquo;Recover via Email&rdquo;</strong> in
+            the app and paste the recovery key above when prompted.
+        </Text>
+
+        <Text style={muted}>
+            If you did not request this, you can safely ignore this email.
+        </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={signOff}>
+            Sincerely,<br />The {branding.brandName} Team
+        </Text>
+    </Layout>
+);
+
+export const getRecoveryKeySubject = (branding: TenantBranding): string =>
+    `Your ${branding.brandName} recovery key`;
+
+// ---------------------------------------------------------------------------
+// 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 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 (
+        <RecoveryKey
+            branding={DEFAULT_BRANDING}
+            recoveryKey="mango-delta-fox-echo-bravo-seven-lima-niner"
+        />
+    );
+}