@learncard/email-templates 1.0.1 → 1.0.3

package/src/index.ts

@@ -0,0 +1,50 @@
+/**
+ * @learncard/email-templates
+ *
+ * Git-managed, tenant-branded email and SMS templates for LearnCard services.
+ *
+ * Usage:
+ *   import { renderEmail, renderSms, resolveBranding } from '@learncard/email-templates';
+ *
+ *   const { html, text, subject } = await renderEmail('inbox-claim', branding, {
+ *       claimUrl: 'https://...',
+ *       credential: { name: 'Badge' },
+ *       issuer: { name: 'Acme' },
+ *   });
+ */
+
+// Branding
+export { resolveBranding, DEFAULT_BRANDING } from './branding';
+export type { TenantBranding } from './branding';
+
+// Email rendering
+export { renderEmail } from './render';
+export type { RenderedEmail, TemplateId, TemplateDataMap } from './render';
+export type {
+    VerificationCodeData,
+    EmailVerificationData,
+    InboxClaimData,
+    GuardianApprovalData,
+    AccountApprovedData,
+    RecoveryKeyData,
+    EndorsementRequestData,
+    CredentialAwaitingGuardianData,
+    GuardianApprovedClaimData,
+    GuardianCredentialApprovalData,
+    GuardianEmailOtpData,
+    GuardianRejectedCredentialData,
+} from './render';
+
+// SMS rendering
+export { renderSms } from './sms';
+export type { SmsTemplateId, SmsTemplateDataMap, SmsInboxClaimData, SmsVerificationData } from './sms';
+
+// Server-side tenant resolution
+export { resolveTenantFromRequest, registerOriginMapping, registerTenantBranding } from './tenant-registry';
+export type { ResolvedTenant, RequestHeaders } from './tenant-registry';
+
+// Template components are intentionally NOT re-exported from the barrel.
+// They contain JSX (.tsx) and would force every transitive consumer to
+// configure `jsx` in their tsconfig. Use renderEmail() / renderSms() instead.
+// For direct component access (testing / preview), import from
+// '@learncard/email-templates/src/templates' explicitly.

package/src/previews/_fixtures.tsx

@@ -0,0 +1,51 @@
+/**
+ * Shared preview fixtures — reusable branding configs and data objects
+ * for multi-scenario email previews.
+ */
+
+import * as React from 'react';
+
+import { DEFAULT_BRANDING, resolveBranding } from '../branding';
+import type { TenantBranding } from '../branding';
+
+// ---------------------------------------------------------------------------
+// Branding presets
+// ---------------------------------------------------------------------------
+
+export const LEARNCARD_BRANDING = DEFAULT_BRANDING;
+
+export const VETPASS_BRANDING: TenantBranding = resolveBranding({
+    brandName: 'VetPass',
+    logoUrl: 'https://vetpass.app/assets/icon/icon.png',
+    logoAlt: 'VetPass',
+    primaryColor: '#1B5E20',
+    primaryTextColor: '#ffffff',
+    supportEmail: 'support@vetpass.app',
+    websiteUrl: 'https://www.vetpass.app',
+    appUrl: 'https://vetpass.app',
+    fromDomain: 'vetpass.app',
+    copyrightHolder: 'VetPass',
+});
+
+// ---------------------------------------------------------------------------
+// Scenario divider — renders a labeled horizontal rule between scenarios
+// ---------------------------------------------------------------------------
+
+export const ScenarioDivider: React.FC<{ label: string }> = ({ label }) => (
+    <div
+        style={{
+            padding: '24px 0 16px',
+            textAlign: 'center',
+            fontFamily: 'ui-monospace, monospace',
+            fontSize: 11,
+            fontWeight: 600,
+            color: '#6b7280',
+            letterSpacing: '0.05em',
+            textTransform: 'uppercase',
+            borderTop: '2px dashed #d1d5db',
+            marginTop: 48,
+        }}
+    >
+        {label}
+    </div>
+);

package/src/previews/account-approved-scenarios.tsx

@@ -0,0 +1,31 @@
+/**
+ * account-approved — all preview scenarios stacked.
+ */
+
+import * as React from 'react';
+
+import { AccountApproved } from '../templates/account-approved';
+import { LEARNCARD_BRANDING, VETPASS_BRANDING, ScenarioDivider } from './_fixtures';
+
+export default function AccountApprovedScenarios() {
+    return (
+        <>
+            <ScenarioDivider label="With user display name" />
+            <AccountApproved
+                branding={LEARNCARD_BRANDING}
+                user={{ displayName: 'Jane Doe' }}
+            />
+
+            <ScenarioDivider label="No user info (fallback greeting)" />
+            <AccountApproved
+                branding={LEARNCARD_BRANDING}
+            />
+
+            <ScenarioDivider label="VetPass tenant branding" />
+            <AccountApproved
+                branding={VETPASS_BRANDING}
+                user={{ displayName: 'Sgt. Alex Rivera' }}
+            />
+        </>
+    );
+}

package/src/previews/endorsement-request-scenarios.tsx

@@ -0,0 +1,50 @@
+/**
+ * endorsement-request — all preview scenarios stacked.
+ */
+
+import * as React from 'react';
+
+import { EndorsementRequest } from '../templates/endorsement-request';
+import { LEARNCARD_BRANDING, VETPASS_BRANDING, ScenarioDivider } from './_fixtures';
+
+export default function EndorsementRequestScenarios() {
+    return (
+        <>
+            <ScenarioDivider label="Full — issuer + credential + message + recipient" />
+            <EndorsementRequest
+                branding={LEARNCARD_BRANDING}
+                shareLink="https://learncard.app/share/xyz789"
+                recipient={{ name: 'Dr. Emily Chen' }}
+                issuer={{ name: 'John Doe', logoUrl: 'https://cdn.filestackcontent.com/J6suaVcQ467W9o1k48Kj' }}
+                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."
+            />
+
+            <ScenarioDivider label="Minimal — no recipient name, no credential, no message" />
+            <EndorsementRequest
+                branding={LEARNCARD_BRANDING}
+                shareLink="https://learncard.app/share/xyz789"
+                issuer={{ name: 'John Doe' }}
+            />
+
+            <ScenarioDivider label="With message, no credential name" />
+            <EndorsementRequest
+                branding={LEARNCARD_BRANDING}
+                shareLink="https://learncard.app/share/xyz789"
+                recipient={{ name: 'Dr. Emily Chen' }}
+                issuer={{ name: 'John Doe' }}
+                message="Would you be willing to endorse my professional qualifications?"
+            />
+
+            <ScenarioDivider label="VetPass tenant branding" />
+            <EndorsementRequest
+                branding={VETPASS_BRANDING}
+                shareLink="https://vetpass.app/share/abc456"
+                recipient={{ name: 'Col. Sarah Mitchell' }}
+                issuer={{ name: 'Sgt. Alex Rivera' }}
+                credential={{ name: 'Leadership Training Certificate' }}
+                message="Requesting your endorsement for my leadership training completed at Fort Bragg."
+            />
+        </>
+    );
+}

package/src/previews/guardian-approval-scenarios.tsx

@@ -0,0 +1,39 @@
+/**
+ * guardian-approval — all preview scenarios stacked.
+ */
+
+import * as React from 'react';
+
+import { GuardianApproval } from '../templates/guardian-approval';
+import { LEARNCARD_BRANDING, VETPASS_BRANDING, ScenarioDivider } from './_fixtures';
+
+export default function GuardianApprovalScenarios() {
+    return (
+        <>
+            <ScenarioDivider label="Full — requester name + guardian email" />
+            <GuardianApproval
+                branding={LEARNCARD_BRANDING}
+                approvalUrl="https://learncard.app/approve?token=abc123"
+                approvalToken="abc123"
+                requester={{ displayName: 'Alex Smith', profileId: 'alex-smith-123' }}
+                guardian={{ email: 'parent@example.com' }}
+            />
+
+            <ScenarioDivider label="Minimal — no requester name (fallback to 'Someone')" />
+            <GuardianApproval
+                branding={LEARNCARD_BRANDING}
+                approvalUrl="https://learncard.app/approve?token=abc123"
+                approvalToken="abc123"
+            />
+
+            <ScenarioDivider label="VetPass tenant branding" />
+            <GuardianApproval
+                branding={VETPASS_BRANDING}
+                approvalUrl="https://vetpass.app/approve?token=xyz789"
+                approvalToken="xyz789"
+                requester={{ displayName: 'Jamie Rodriguez' }}
+                guardian={{ email: 'guardian@example.com' }}
+            />
+        </>
+    );
+}

package/src/previews/guardian-credential-scenarios.tsx

@@ -0,0 +1,88 @@
+/**
+ * Guardian credential flow — approval, awaiting, approved, rejected scenarios.
+ */
+
+import * as React from 'react';
+
+import { GuardianCredentialApproval } from '../templates/guardian-credential-approval';
+import { CredentialAwaitingGuardian } from '../templates/credential-awaiting-guardian';
+import { GuardianApprovedClaim } from '../templates/guardian-approved-claim';
+import { GuardianRejectedCredential } from '../templates/guardian-rejected-credential';
+import { GuardianEmailOtp } from '../templates/guardian-email-otp';
+import { LEARNCARD_BRANDING, VETPASS_BRANDING, ScenarioDivider } from './_fixtures';
+
+export default function GuardianCredentialScenarios() {
+    return (
+        <>
+            <ScenarioDivider label="Guardian credential approval — full" />
+            <GuardianCredentialApproval
+                branding={LEARNCARD_BRANDING}
+                approvalUrl="https://learncard.app/guardian/approve?token=abc123"
+                approvalToken="abc123"
+                issuer={{ name: 'Springfield School District', logoUrl: 'https://cdn.filestackcontent.com/J6suaVcQ467W9o1k48Kj' }}
+                credential={{ name: 'Perfect Attendance Award' }}
+                recipient={{ email: 'student@example.com' }}
+            />
+
+            <ScenarioDivider label="Guardian credential approval — minimal (no issuer logo)" />
+            <GuardianCredentialApproval
+                branding={LEARNCARD_BRANDING}
+                approvalUrl="https://learncard.app/guardian/approve?token=abc123"
+                approvalToken="abc123"
+                credential={{ name: 'Science Fair Winner' }}
+                recipient={{ email: 'kid@example.com' }}
+            />
+
+            <ScenarioDivider label="Credential awaiting guardian — full" />
+            <CredentialAwaitingGuardian
+                branding={LEARNCARD_BRANDING}
+                issuer={{ name: 'Springfield School District', logoUrl: 'https://cdn.filestackcontent.com/J6suaVcQ467W9o1k48Kj' }}
+                credential={{ name: 'Perfect Attendance Award' }}
+                recipient={{ email: 'student@example.com' }}
+            />
+
+            <ScenarioDivider label="Guardian approved claim — full" />
+            <GuardianApprovedClaim
+                branding={LEARNCARD_BRANDING}
+                issuer={{ name: 'Springfield School District', logoUrl: 'https://cdn.filestackcontent.com/J6suaVcQ467W9o1k48Kj' }}
+                credential={{ name: 'Perfect Attendance Award' }}
+            />
+
+            <ScenarioDivider label="Guardian approved claim — no credential name" />
+            <GuardianApprovedClaim
+                branding={LEARNCARD_BRANDING}
+                issuer={{ name: 'Springfield School District' }}
+            />
+
+            <ScenarioDivider label="Guardian rejected credential — full" />
+            <GuardianRejectedCredential
+                branding={LEARNCARD_BRANDING}
+                issuer={{ name: 'Springfield School District' }}
+                credential={{ name: 'Perfect Attendance Award' }}
+                recipient={{ email: 'student@example.com' }}
+            />
+
+            <ScenarioDivider label="Guardian rejected credential — no credential name" />
+            <GuardianRejectedCredential
+                branding={LEARNCARD_BRANDING}
+                issuer={{ name: 'Springfield School District' }}
+            />
+
+            <ScenarioDivider label="Guardian email OTP" />
+            <GuardianEmailOtp
+                branding={LEARNCARD_BRANDING}
+                verificationCode="847293"
+            />
+
+            <ScenarioDivider label="VetPass — guardian credential approval" />
+            <GuardianCredentialApproval
+                branding={VETPASS_BRANDING}
+                approvalUrl="https://vetpass.app/guardian/approve?token=xyz789"
+                approvalToken="xyz789"
+                issuer={{ name: 'VA Medical Center' }}
+                credential={{ name: 'Health Records Access' }}
+                recipient={{ email: 'veteran@example.com' }}
+            />
+        </>
+    );
+}

package/src/previews/inbox-claim-scenarios.tsx

@@ -0,0 +1,66 @@
+/**
+ * inbox-claim — all preview scenarios stacked.
+ *
+ * Covers: full info, minimal info, no issuer, no credential name,
+ * no recipient name, and custom tenant branding.
+ */
+
+import * as React from 'react';
+
+import { InboxClaim } from '../templates/inbox-claim';
+import { LEARNCARD_BRANDING, VETPASS_BRANDING, ScenarioDivider } from './_fixtures';
+
+export default function InboxClaimScenarios() {
+    return (
+        <>
+            <ScenarioDivider label="Full — issuer + credential + recipient" />
+            <InboxClaim
+                branding={LEARNCARD_BRANDING}
+                claimUrl="https://learncard.app/claim/abc123"
+                recipient={{ name: 'Jane Doe', email: 'jane@example.com' }}
+                issuer={{ name: 'Acme University', logoUrl: 'https://cdn.filestackcontent.com/J6suaVcQ467W9o1k48Kj' }}
+                credential={{ name: 'Bachelor of Science', type: 'Achievement' }}
+            />
+
+            <ScenarioDivider label="Minimal — no issuer, no credential name, no recipient name" />
+            <InboxClaim
+                branding={LEARNCARD_BRANDING}
+                claimUrl="https://learncard.app/claim/abc123"
+            />
+
+            <ScenarioDivider label="No issuer branding (no logo, no name)" />
+            <InboxClaim
+                branding={LEARNCARD_BRANDING}
+                claimUrl="https://learncard.app/claim/abc123"
+                recipient={{ name: 'Jane Doe' }}
+                credential={{ name: 'Professional Teaching Certificate', type: 'Achievement' }}
+            />
+
+            <ScenarioDivider label="Issuer name only (no logo)" />
+            <InboxClaim
+                branding={LEARNCARD_BRANDING}
+                claimUrl="https://learncard.app/claim/abc123"
+                recipient={{ name: 'Jane Doe' }}
+                issuer={{ name: 'Springfield School District' }}
+                credential={{ name: 'Perfect Attendance Award' }}
+            />
+
+            <ScenarioDivider label="No credential name (fallback to 'achievement')" />
+            <InboxClaim
+                branding={LEARNCARD_BRANDING}
+                claimUrl="https://learncard.app/claim/abc123"
+                recipient={{ name: 'Jane Doe' }}
+                issuer={{ name: 'Acme University', logoUrl: 'https://cdn.filestackcontent.com/J6suaVcQ467W9o1k48Kj' }}
+            />
+
+            <ScenarioDivider label="VetPass tenant branding" />
+            <InboxClaim
+                branding={VETPASS_BRANDING}
+                claimUrl="https://vetpass.app/claim/xyz789"
+                recipient={{ name: 'Sgt. Alex Rivera' }}
+                issuer={{ name: 'US Department of Veterans Affairs' }}
+                credential={{ name: 'DD-214 Service Record', type: 'record' }}
+            />
+        </>
+    );
+}

package/src/previews/recovery-key-scenarios.tsx

@@ -0,0 +1,32 @@
+/**
+ * recovery-key — all preview scenarios stacked.
+ */
+
+import * as React from 'react';
+
+import { RecoveryKey } from '../templates/recovery-key';
+import { LEARNCARD_BRANDING, VETPASS_BRANDING, ScenarioDivider } from './_fixtures';
+
+export default function RecoveryKeyScenarios() {
+    return (
+        <>
+            <ScenarioDivider label="Default — LearnCard branding" />
+            <RecoveryKey
+                branding={LEARNCARD_BRANDING}
+                recoveryKey="mango-delta-fox-echo-bravo-seven-lima-niner"
+            />
+
+            <ScenarioDivider label="Long recovery key (wrapping test)" />
+            <RecoveryKey
+                branding={LEARNCARD_BRANDING}
+                recoveryKey="alpha-bravo-charlie-delta-echo-foxtrot-golf-hotel-india-juliet-kilo-lima"
+            />
+
+            <ScenarioDivider label="VetPass tenant branding" />
+            <RecoveryKey
+                branding={VETPASS_BRANDING}
+                recoveryKey="sierra-tango-uniform-victor-whiskey-xray"
+            />
+        </>
+    );
+}

package/src/previews/verification-code-scenarios.tsx

@@ -0,0 +1,60 @@
+/**
+ * verification-code — all variant + branding scenarios stacked.
+ */
+
+import * as React from 'react';
+
+import { VerificationCode } from '../templates/verification-code';
+import { LEARNCARD_BRANDING, VETPASS_BRANDING, ScenarioDivider } from './_fixtures';
+
+export default function VerificationCodeScenarios() {
+    return (
+        <>
+            <ScenarioDivider label="Login — with email" />
+            <VerificationCode
+                branding={LEARNCARD_BRANDING}
+                verificationCode="847293"
+                verificationEmail="jane@example.com"
+                variant="login"
+            />
+
+            <ScenarioDivider label="Login — no email" />
+            <VerificationCode
+                branding={LEARNCARD_BRANDING}
+                verificationCode="847293"
+                variant="login"
+            />
+
+            <ScenarioDivider label="Recovery email — with email" />
+            <VerificationCode
+                branding={LEARNCARD_BRANDING}
+                verificationCode="192837"
+                verificationEmail="backup@example.com"
+                variant="recovery-email"
+            />
+
+            <ScenarioDivider label="Embed verification — with email" />
+            <VerificationCode
+                branding={LEARNCARD_BRANDING}
+                verificationCode="564738"
+                verificationEmail="student@school.edu"
+                variant="embed-verification"
+            />
+
+            <ScenarioDivider label="Contact method" />
+            <VerificationCode
+                branding={LEARNCARD_BRANDING}
+                verificationCode="029384"
+                variant="contact-method"
+            />
+
+            <ScenarioDivider label="VetPass — login variant" />
+            <VerificationCode
+                branding={VETPASS_BRANDING}
+                verificationCode="738291"
+                verificationEmail="vet@example.com"
+                variant="login"
+            />
+        </>
+    );
+}