diff --git a/apps/sim/app/api/careers/submit/route.ts b/apps/sim/app/api/careers/submit/route.ts
index 0d6e0646d7..2ce4309721 100644
--- a/apps/sim/app/api/careers/submit/route.ts
+++ b/apps/sim/app/api/careers/submit/route.ts
@@ -2,8 +2,7 @@ import { render } from '@react-email/components'
import { createLogger } from '@sim/logger'
import { type NextRequest, NextResponse } from 'next/server'
import { z } from 'zod'
-import CareersConfirmationEmail from '@/components/emails/careers/careers-confirmation-email'
-import CareersSubmissionEmail from '@/components/emails/careers/careers-submission-email'
+import { CareersConfirmationEmail, CareersSubmissionEmail } from '@/components/emails'
import { generateRequestId } from '@/lib/core/utils/request'
import { sendEmail } from '@/lib/messaging/email/mailer'
diff --git a/apps/sim/app/api/chat/[identifier]/otp/route.test.ts b/apps/sim/app/api/chat/[identifier]/otp/route.test.ts
index 24526a80d6..b16818f179 100644
--- a/apps/sim/app/api/chat/[identifier]/otp/route.test.ts
+++ b/apps/sim/app/api/chat/[identifier]/otp/route.test.ts
@@ -156,6 +156,11 @@ describe('Chat OTP API Route', () => {
}),
}))
+ vi.doMock('@/lib/core/config/env', async () => {
+ const { createEnvMock } = await import('@sim/testing')
+ return createEnvMock()
+ })
+
vi.doMock('zod', () => ({
z: {
object: vi.fn().mockReturnValue({
diff --git a/apps/sim/app/api/chat/[identifier]/otp/route.ts b/apps/sim/app/api/chat/[identifier]/otp/route.ts
index 52948e2bfc..de7b0ff4b6 100644
--- a/apps/sim/app/api/chat/[identifier]/otp/route.ts
+++ b/apps/sim/app/api/chat/[identifier]/otp/route.ts
@@ -5,7 +5,7 @@ import { createLogger } from '@sim/logger'
import { and, eq, gt } from 'drizzle-orm'
import type { NextRequest } from 'next/server'
import { z } from 'zod'
-import { renderOTPEmail } from '@/components/emails/render-email'
+import { renderOTPEmail } from '@/components/emails'
import { getRedisClient } from '@/lib/core/config/redis'
import { getStorageMethod } from '@/lib/core/storage'
import { generateRequestId } from '@/lib/core/utils/request'
diff --git a/apps/sim/app/api/chat/route.test.ts b/apps/sim/app/api/chat/route.test.ts
index 0eb6288834..4fb96da4eb 100644
--- a/apps/sim/app/api/chat/route.test.ts
+++ b/apps/sim/app/api/chat/route.test.ts
@@ -249,17 +249,13 @@ describe('Chat API Route', () => {
}),
}))
- vi.doMock('@/lib/core/config/env', () => ({
- env: {
+ vi.doMock('@/lib/core/config/env', async () => {
+ const { createEnvMock } = await import('@sim/testing')
+ return createEnvMock({
NODE_ENV: 'development',
NEXT_PUBLIC_APP_URL: 'http://localhost:3000',
- },
- isTruthy: (value: string | boolean | number | undefined) =>
- typeof value === 'string'
- ? value.toLowerCase() === 'true' || value === '1'
- : Boolean(value),
- getEnv: (variable: string) => process.env[variable],
- }))
+ })
+ })
const validData = {
workflowId: 'workflow-123',
@@ -296,15 +292,13 @@ describe('Chat API Route', () => {
}),
}))
- vi.doMock('@/lib/core/config/env', () => ({
- env: {
+ vi.doMock('@/lib/core/config/env', async () => {
+ const { createEnvMock } = await import('@sim/testing')
+ return createEnvMock({
NODE_ENV: 'development',
NEXT_PUBLIC_APP_URL: 'http://localhost:3000',
- },
- isTruthy: (value: string | boolean | number | undefined) =>
- typeof value === 'string' ? value === 'true' || value === '1' : Boolean(value),
- getEnv: (variable: string) => process.env[variable],
- }))
+ })
+ })
const validData = {
workflowId: 'workflow-123',
diff --git a/apps/sim/app/api/copilot/api-keys/route.test.ts b/apps/sim/app/api/copilot/api-keys/route.test.ts
index 2556a7e93a..b5d27be6e1 100644
--- a/apps/sim/app/api/copilot/api-keys/route.test.ts
+++ b/apps/sim/app/api/copilot/api-keys/route.test.ts
@@ -21,12 +21,13 @@ describe('Copilot API Keys API Route', () => {
SIM_AGENT_API_URL_DEFAULT: 'https://agent.sim.example.com',
}))
- vi.doMock('@/lib/core/config/env', () => ({
- env: {
- SIM_AGENT_API_URL: null,
+ vi.doMock('@/lib/core/config/env', async () => {
+ const { createEnvMock } = await import('@sim/testing')
+ return createEnvMock({
+ SIM_AGENT_API_URL: undefined,
COPILOT_API_KEY: 'test-api-key',
- },
- }))
+ })
+ })
})
afterEach(() => {
diff --git a/apps/sim/app/api/copilot/stats/route.test.ts b/apps/sim/app/api/copilot/stats/route.test.ts
index e48dff0169..0d06c5edd9 100644
--- a/apps/sim/app/api/copilot/stats/route.test.ts
+++ b/apps/sim/app/api/copilot/stats/route.test.ts
@@ -46,12 +46,13 @@ describe('Copilot Stats API Route', () => {
SIM_AGENT_API_URL_DEFAULT: 'https://agent.sim.example.com',
}))
- vi.doMock('@/lib/core/config/env', () => ({
- env: {
- SIM_AGENT_API_URL: null,
+ vi.doMock('@/lib/core/config/env', async () => {
+ const { createEnvMock } = await import('@sim/testing')
+ return createEnvMock({
+ SIM_AGENT_API_URL: undefined,
COPILOT_API_KEY: 'test-api-key',
- },
- }))
+ })
+ })
})
afterEach(() => {
diff --git a/apps/sim/app/api/emails/preview/route.ts b/apps/sim/app/api/emails/preview/route.ts
new file mode 100644
index 0000000000..5047a3eaa6
--- /dev/null
+++ b/apps/sim/app/api/emails/preview/route.ts
@@ -0,0 +1,176 @@
+import type { NextRequest } from 'next/server'
+import { NextResponse } from 'next/server'
+import {
+ renderBatchInvitationEmail,
+ renderCareersConfirmationEmail,
+ renderCareersSubmissionEmail,
+ renderCreditPurchaseEmail,
+ renderEnterpriseSubscriptionEmail,
+ renderFreeTierUpgradeEmail,
+ renderHelpConfirmationEmail,
+ renderInvitationEmail,
+ renderOTPEmail,
+ renderPasswordResetEmail,
+ renderPaymentFailedEmail,
+ renderPlanWelcomeEmail,
+ renderUsageThresholdEmail,
+ renderWelcomeEmail,
+ renderWorkspaceInvitationEmail,
+} from '@/components/emails'
+
+const emailTemplates = {
+ // Auth emails
+ otp: () => renderOTPEmail('123456', 'user@example.com', 'email-verification'),
+ 'reset-password': () => renderPasswordResetEmail('John', 'https://sim.ai/reset?token=abc123'),
+ welcome: () => renderWelcomeEmail('John'),
+
+ // Invitation emails
+ invitation: () => renderInvitationEmail('Jane Doe', 'Acme Corp', 'https://sim.ai/invite/abc123'),
+ 'batch-invitation': () =>
+ renderBatchInvitationEmail(
+ 'Jane Doe',
+ 'Acme Corp',
+ 'admin',
+ [
+ { workspaceId: 'ws_123', workspaceName: 'Engineering', permission: 'write' },
+ { workspaceId: 'ws_456', workspaceName: 'Design', permission: 'read' },
+ ],
+ 'https://sim.ai/invite/abc123'
+ ),
+ 'workspace-invitation': () =>
+ renderWorkspaceInvitationEmail(
+ 'John Smith',
+ 'Engineering Team',
+ 'https://sim.ai/workspace/invite/abc123'
+ ),
+
+ // Support emails
+ 'help-confirmation': () => renderHelpConfirmationEmail('feature_request', 2),
+
+ // Billing emails
+ 'usage-threshold': () =>
+ renderUsageThresholdEmail({
+ userName: 'John',
+ planName: 'Pro',
+ percentUsed: 75,
+ currentUsage: 15,
+ limit: 20,
+ ctaLink: 'https://sim.ai/settings/billing',
+ }),
+ 'enterprise-subscription': () => renderEnterpriseSubscriptionEmail('John'),
+ 'free-tier-upgrade': () =>
+ renderFreeTierUpgradeEmail({
+ userName: 'John',
+ percentUsed: 90,
+ currentUsage: 9,
+ limit: 10,
+ upgradeLink: 'https://sim.ai/settings/billing',
+ }),
+ 'plan-welcome-pro': () =>
+ renderPlanWelcomeEmail({
+ planName: 'Pro',
+ userName: 'John',
+ loginLink: 'https://sim.ai/login',
+ }),
+ 'plan-welcome-team': () =>
+ renderPlanWelcomeEmail({
+ planName: 'Team',
+ userName: 'John',
+ loginLink: 'https://sim.ai/login',
+ }),
+ 'credit-purchase': () =>
+ renderCreditPurchaseEmail({
+ userName: 'John',
+ amount: 50,
+ newBalance: 75,
+ }),
+ 'payment-failed': () =>
+ renderPaymentFailedEmail({
+ userName: 'John',
+ amountDue: 20,
+ lastFourDigits: '4242',
+ billingPortalUrl: 'https://sim.ai/settings/billing',
+ failureReason: 'Card declined',
+ }),
+
+ // Careers emails
+ 'careers-confirmation': () => renderCareersConfirmationEmail('John Doe', 'Senior Engineer'),
+ 'careers-submission': () =>
+ renderCareersSubmissionEmail({
+ name: 'John Doe',
+ email: 'john@example.com',
+ phone: '+1 (555) 123-4567',
+ position: 'Senior Engineer',
+ linkedin: 'https://linkedin.com/in/johndoe',
+ portfolio: 'https://johndoe.dev',
+ experience: '5-10',
+ location: 'San Francisco, CA',
+ message:
+ 'I have 10 years of experience building scalable distributed systems. Most recently, I led a team at a Series B startup where we scaled from 100K to 10M users.',
+ }),
+} as const
+
+type EmailTemplate = keyof typeof emailTemplates
+
+export async function GET(request: NextRequest) {
+ const { searchParams } = new URL(request.url)
+ const template = searchParams.get('template') as EmailTemplate | null
+
+ if (!template) {
+ const categories = {
+ Auth: ['otp', 'reset-password', 'welcome'],
+ Invitations: ['invitation', 'batch-invitation', 'workspace-invitation'],
+ Support: ['help-confirmation'],
+ Billing: [
+ 'usage-threshold',
+ 'enterprise-subscription',
+ 'free-tier-upgrade',
+ 'plan-welcome-pro',
+ 'plan-welcome-team',
+ 'credit-purchase',
+ 'payment-failed',
+ ],
+ Careers: ['careers-confirmation', 'careers-submission'],
+ }
+
+ const categoryHtml = Object.entries(categories)
+ .map(
+ ([category, templates]) => `
+ ${category}
+
+ ${templates.map((t) => `- ${t}
`).join('')}
+
+ `
+ )
+ .join('')
+
+ return new NextResponse(
+ `
+
+
+ Email Previews
+
+
+
+ Email Templates
+ ${categoryHtml}
+
+`,
+ { headers: { 'Content-Type': 'text/html' } }
+ )
+ }
+
+ if (!(template in emailTemplates)) {
+ return NextResponse.json({ error: `Unknown template: ${template}` }, { status: 400 })
+ }
+
+ const html = await emailTemplates[template]()
+
+ return new NextResponse(html, {
+ headers: { 'Content-Type': 'text/html' },
+ })
+}
diff --git a/apps/sim/app/api/help/route.ts b/apps/sim/app/api/help/route.ts
index ca3d040c2a..676397d2d2 100644
--- a/apps/sim/app/api/help/route.ts
+++ b/apps/sim/app/api/help/route.ts
@@ -118,7 +118,6 @@ ${message}
// Send confirmation email to the user
try {
const confirmationHtml = await renderHelpConfirmationEmail(
- email,
type as 'bug' | 'feedback' | 'feature_request' | 'other',
images.length
)
diff --git a/apps/sim/app/api/organizations/[id]/invitations/route.ts b/apps/sim/app/api/organizations/[id]/invitations/route.ts
index 46cdabea9d..f72705e90e 100644
--- a/apps/sim/app/api/organizations/[id]/invitations/route.ts
+++ b/apps/sim/app/api/organizations/[id]/invitations/route.ts
@@ -16,7 +16,7 @@ import {
getEmailSubject,
renderBatchInvitationEmail,
renderInvitationEmail,
-} from '@/components/emails/render-email'
+} from '@/components/emails'
import { getSession } from '@/lib/auth'
import {
validateBulkInvitations,
@@ -376,8 +376,7 @@ export async function POST(request: NextRequest, { params }: { params: Promise<{
const emailHtml = await renderInvitationEmail(
inviter[0]?.name || 'Someone',
organizationEntry[0]?.name || 'organization',
- `${getBaseUrl()}/invite/${orgInvitation.id}`,
- email
+ `${getBaseUrl()}/invite/${orgInvitation.id}`
)
emailResult = await sendEmail({
diff --git a/apps/sim/app/api/organizations/[id]/members/route.ts b/apps/sim/app/api/organizations/[id]/members/route.ts
index 4ada7c2ba8..eb3f4b0cda 100644
--- a/apps/sim/app/api/organizations/[id]/members/route.ts
+++ b/apps/sim/app/api/organizations/[id]/members/route.ts
@@ -4,7 +4,7 @@ import { invitation, member, organization, user, userStats } from '@sim/db/schem
import { createLogger } from '@sim/logger'
import { and, eq } from 'drizzle-orm'
import { type NextRequest, NextResponse } from 'next/server'
-import { getEmailSubject, renderInvitationEmail } from '@/components/emails/render-email'
+import { getEmailSubject, renderInvitationEmail } from '@/components/emails'
import { getSession } from '@/lib/auth'
import { getUserUsageData } from '@/lib/billing/core/usage'
import { validateSeatAvailability } from '@/lib/billing/validation/seat-management'
@@ -260,8 +260,7 @@ export async function POST(request: NextRequest, { params }: { params: Promise<{
const emailHtml = await renderInvitationEmail(
inviter[0]?.name || 'Someone',
organizationEntry[0]?.name || 'organization',
- `${getBaseUrl()}/invite/organization?id=${invitationId}`,
- normalizedEmail
+ `${getBaseUrl()}/invite/organization?id=${invitationId}`
)
const emailResult = await sendEmail({
diff --git a/apps/sim/app/api/workspaces/invitations/[invitationId]/route.ts b/apps/sim/app/api/workspaces/invitations/[invitationId]/route.ts
index 0d427f1779..4d4ac7928f 100644
--- a/apps/sim/app/api/workspaces/invitations/[invitationId]/route.ts
+++ b/apps/sim/app/api/workspaces/invitations/[invitationId]/route.ts
@@ -11,7 +11,7 @@ import {
import { createLogger } from '@sim/logger'
import { and, eq } from 'drizzle-orm'
import { type NextRequest, NextResponse } from 'next/server'
-import { WorkspaceInvitationEmail } from '@/components/emails/workspace-invitation'
+import { WorkspaceInvitationEmail } from '@/components/emails'
import { getSession } from '@/lib/auth'
import { getBaseUrl } from '@/lib/core/utils/urls'
import { sendEmail } from '@/lib/messaging/email/mailer'
diff --git a/apps/sim/app/api/workspaces/invitations/route.test.ts b/apps/sim/app/api/workspaces/invitations/route.test.ts
index 96370bf63d..b47e7bf362 100644
--- a/apps/sim/app/api/workspaces/invitations/route.test.ts
+++ b/apps/sim/app/api/workspaces/invitations/route.test.ts
@@ -87,14 +87,10 @@ describe('Workspace Invitations API Route', () => {
WorkspaceInvitationEmail: vi.fn(),
}))
- vi.doMock('@/lib/core/config/env', () => ({
- env: {
- RESEND_API_KEY: 'test-resend-key',
- NEXT_PUBLIC_APP_URL: 'https://test.sim.ai',
- FROM_EMAIL_ADDRESS: 'Sim ',
- EMAIL_DOMAIN: 'test.sim.ai',
- },
- }))
+ vi.doMock('@/lib/core/config/env', async () => {
+ const { createEnvMock } = await import('@sim/testing')
+ return createEnvMock()
+ })
vi.doMock('@/lib/core/utils/urls', () => ({
getEmailDomain: vi.fn().mockReturnValue('sim.ai'),
diff --git a/apps/sim/app/api/workspaces/invitations/route.ts b/apps/sim/app/api/workspaces/invitations/route.ts
index 6ad6285b35..19ee610878 100644
--- a/apps/sim/app/api/workspaces/invitations/route.ts
+++ b/apps/sim/app/api/workspaces/invitations/route.ts
@@ -12,7 +12,7 @@ import {
import { createLogger } from '@sim/logger'
import { and, eq, inArray } from 'drizzle-orm'
import { type NextRequest, NextResponse } from 'next/server'
-import { WorkspaceInvitationEmail } from '@/components/emails/workspace-invitation'
+import { WorkspaceInvitationEmail } from '@/components/emails'
import { getSession } from '@/lib/auth'
import { getBaseUrl } from '@/lib/core/utils/urls'
import { sendEmail } from '@/lib/messaging/email/mailer'
diff --git a/apps/sim/components/emails/_styles/base.ts b/apps/sim/components/emails/_styles/base.ts
new file mode 100644
index 0000000000..844ac1c55f
--- /dev/null
+++ b/apps/sim/components/emails/_styles/base.ts
@@ -0,0 +1,246 @@
+/**
+ * Base styles for all email templates.
+ * Colors are derived from globals.css light mode tokens.
+ */
+
+/** Color tokens from globals.css (light mode) */
+export const colors = {
+ /** Main canvas background */
+ bgOuter: '#F7F9FC',
+ /** Card/container background - pure white */
+ bgCard: '#ffffff',
+ /** Primary text color */
+ textPrimary: '#2d2d2d',
+ /** Secondary text color */
+ textSecondary: '#404040',
+ /** Tertiary text color */
+ textTertiary: '#5c5c5c',
+ /** Muted text (footer) */
+ textMuted: '#737373',
+ /** Brand primary - purple */
+ brandPrimary: '#6f3dfa',
+ /** Brand tertiary - green (matches Run/Deploy buttons) */
+ brandTertiary: '#32bd7e',
+ /** Border/divider color */
+ divider: '#ededed',
+ /** Footer background */
+ footerBg: '#F7F9FC',
+}
+
+/** Typography settings */
+export const typography = {
+ fontFamily: "-apple-system, 'SF Pro Display', 'SF Pro Text', 'Helvetica', sans-serif",
+ fontSize: {
+ body: '16px',
+ small: '14px',
+ caption: '12px',
+ },
+ lineHeight: {
+ body: '24px',
+ caption: '20px',
+ },
+}
+
+/** Spacing values */
+export const spacing = {
+ containerWidth: 600,
+ gutter: 40,
+ sectionGap: 20,
+ paragraphGap: 12,
+ /** Logo width in pixels */
+ logoWidth: 90,
+}
+
+export const baseStyles = {
+ fontFamily: typography.fontFamily,
+
+ /** Main body wrapper with outer background */
+ main: {
+ backgroundColor: colors.bgOuter,
+ fontFamily: typography.fontFamily,
+ padding: '32px 0',
+ },
+
+ /** Center wrapper for email content */
+ wrapper: {
+ maxWidth: `${spacing.containerWidth}px`,
+ margin: '0 auto',
+ },
+
+ /** Main card container with rounded corners */
+ container: {
+ maxWidth: `${spacing.containerWidth}px`,
+ margin: '0 auto',
+ backgroundColor: colors.bgCard,
+ borderRadius: '16px',
+ overflow: 'hidden',
+ },
+
+ /** Header section with logo */
+ header: {
+ padding: `32px ${spacing.gutter}px 16px ${spacing.gutter}px`,
+ textAlign: 'left' as const,
+ },
+
+ /** Main content area with horizontal padding */
+ content: {
+ padding: `0 ${spacing.gutter}px 32px ${spacing.gutter}px`,
+ },
+
+ /** Standard paragraph text */
+ paragraph: {
+ fontSize: typography.fontSize.body,
+ lineHeight: typography.lineHeight.body,
+ color: colors.textSecondary,
+ fontWeight: 400,
+ fontFamily: typography.fontFamily,
+ margin: `${spacing.paragraphGap}px 0`,
+ },
+
+ /** Bold label text (e.g., "Platform:", "Time:") */
+ label: {
+ fontSize: typography.fontSize.body,
+ lineHeight: typography.lineHeight.body,
+ color: colors.textSecondary,
+ fontWeight: 'bold' as const,
+ fontFamily: typography.fontFamily,
+ margin: 0,
+ display: 'inline',
+ },
+
+ /** Primary CTA button - matches app tertiary button style */
+ button: {
+ display: 'inline-block',
+ backgroundColor: colors.brandTertiary,
+ color: '#ffffff',
+ fontWeight: 500,
+ fontSize: '14px',
+ padding: '6px 12px',
+ borderRadius: '5px',
+ textDecoration: 'none',
+ textAlign: 'center' as const,
+ margin: '4px 0',
+ fontFamily: typography.fontFamily,
+ },
+
+ /** Link text style */
+ link: {
+ color: colors.brandTertiary,
+ fontWeight: 'bold' as const,
+ textDecoration: 'none',
+ },
+
+ /** Horizontal divider */
+ divider: {
+ borderTop: `1px solid ${colors.divider}`,
+ margin: `16px 0`,
+ },
+
+ /** Footer container (inside gray area below card) */
+ footer: {
+ maxWidth: `${spacing.containerWidth}px`,
+ margin: '0 auto',
+ padding: `32px ${spacing.gutter}px`,
+ textAlign: 'left' as const,
+ },
+
+ /** Footer text style */
+ footerText: {
+ fontSize: typography.fontSize.caption,
+ lineHeight: typography.lineHeight.caption,
+ color: colors.textMuted,
+ fontFamily: typography.fontFamily,
+ margin: '0 0 10px 0',
+ },
+
+ /** Code/OTP container */
+ codeContainer: {
+ margin: '12px 0',
+ padding: '12px 16px',
+ backgroundColor: '#f8f9fa',
+ borderRadius: '6px',
+ border: `1px solid ${colors.divider}`,
+ textAlign: 'center' as const,
+ },
+
+ /** Code/OTP text */
+ code: {
+ fontSize: '24px',
+ fontWeight: 'bold' as const,
+ letterSpacing: '3px',
+ color: colors.textPrimary,
+ fontFamily: typography.fontFamily,
+ margin: 0,
+ },
+
+ /** Highlighted info box (e.g., "What you get with Pro") */
+ infoBox: {
+ backgroundColor: colors.bgOuter,
+ padding: '16px 18px',
+ borderRadius: '6px',
+ margin: '16px 0',
+ },
+
+ /** Info box title */
+ infoBoxTitle: {
+ fontSize: typography.fontSize.body,
+ lineHeight: typography.lineHeight.body,
+ fontWeight: 600,
+ color: colors.textPrimary,
+ fontFamily: typography.fontFamily,
+ margin: '0 0 8px 0',
+ },
+
+ /** Info box list content */
+ infoBoxList: {
+ fontSize: typography.fontSize.body,
+ lineHeight: '1.6',
+ color: colors.textSecondary,
+ fontFamily: typography.fontFamily,
+ margin: 0,
+ },
+
+ /** Section borders - decorative accent line */
+ sectionsBorders: {
+ width: '100%',
+ display: 'flex',
+ },
+
+ sectionBorder: {
+ borderBottom: `1px solid ${colors.divider}`,
+ width: '249px',
+ },
+
+ sectionCenter: {
+ borderBottom: `1px solid ${colors.brandTertiary}`,
+ width: '102px',
+ },
+
+ /** Spacer row for vertical spacing in tables */
+ spacer: {
+ border: 0,
+ margin: 0,
+ padding: 0,
+ fontSize: '1px',
+ lineHeight: '1px',
+ },
+
+ /** Gutter cell for horizontal padding in tables */
+ gutter: {
+ border: 0,
+ margin: 0,
+ padding: 0,
+ fontSize: '1px',
+ lineHeight: '1px',
+ width: `${spacing.gutter}px`,
+ },
+
+ /** Info row (e.g., Platform, Device location, Time) */
+ infoRow: {
+ fontSize: typography.fontSize.body,
+ lineHeight: typography.lineHeight.body,
+ color: colors.textSecondary,
+ fontFamily: typography.fontFamily,
+ margin: '8px 0',
+ },
+}
diff --git a/apps/sim/components/emails/_styles/index.ts b/apps/sim/components/emails/_styles/index.ts
new file mode 100644
index 0000000000..dd1d961d5e
--- /dev/null
+++ b/apps/sim/components/emails/_styles/index.ts
@@ -0,0 +1 @@
+export { baseStyles, colors, spacing, typography } from './base'
diff --git a/apps/sim/components/emails/auth/index.ts b/apps/sim/components/emails/auth/index.ts
new file mode 100644
index 0000000000..b1d04f1dd0
--- /dev/null
+++ b/apps/sim/components/emails/auth/index.ts
@@ -0,0 +1,3 @@
+export { OTPVerificationEmail } from './otp-verification-email'
+export { ResetPasswordEmail } from './reset-password-email'
+export { WelcomeEmail } from './welcome-email'
diff --git a/apps/sim/components/emails/auth/otp-verification-email.tsx b/apps/sim/components/emails/auth/otp-verification-email.tsx
new file mode 100644
index 0000000000..41791adfb6
--- /dev/null
+++ b/apps/sim/components/emails/auth/otp-verification-email.tsx
@@ -0,0 +1,57 @@
+import { Section, Text } from '@react-email/components'
+import { baseStyles } from '@/components/emails/_styles'
+import { EmailLayout } from '@/components/emails/components'
+import { getBrandConfig } from '@/lib/branding/branding'
+
+interface OTPVerificationEmailProps {
+ otp: string
+ email?: string
+ type?: 'sign-in' | 'email-verification' | 'forget-password' | 'chat-access'
+ chatTitle?: string
+}
+
+const getSubjectByType = (type: string, brandName: string, chatTitle?: string) => {
+ switch (type) {
+ case 'sign-in':
+ return `Sign in to ${brandName}`
+ case 'email-verification':
+ return `Verify your email for ${brandName}`
+ case 'forget-password':
+ return `Reset your ${brandName} password`
+ case 'chat-access':
+ return `Verification code for ${chatTitle || 'Chat'}`
+ default:
+ return `Verification code for ${brandName}`
+ }
+}
+
+export function OTPVerificationEmail({
+ otp,
+ email = '',
+ type = 'email-verification',
+ chatTitle,
+}: OTPVerificationEmailProps) {
+ const brand = getBrandConfig()
+
+ return (
+
+ Your verification code:
+
+
+
+ This code will expire in 15 minutes.
+
+ {/* Divider */}
+
+
+
+ Do not share this code with anyone. If you didn't request this code, you can safely ignore
+ this email.
+
+
+ )
+}
+
+export default OTPVerificationEmail
diff --git a/apps/sim/components/emails/auth/reset-password-email.tsx b/apps/sim/components/emails/auth/reset-password-email.tsx
new file mode 100644
index 0000000000..68f95c2ae9
--- /dev/null
+++ b/apps/sim/components/emails/auth/reset-password-email.tsx
@@ -0,0 +1,36 @@
+import { Link, Text } from '@react-email/components'
+import { baseStyles } from '@/components/emails/_styles'
+import { EmailLayout } from '@/components/emails/components'
+import { getBrandConfig } from '@/lib/branding/branding'
+
+interface ResetPasswordEmailProps {
+ username?: string
+ resetLink?: string
+}
+
+export function ResetPasswordEmail({ username = '', resetLink = '' }: ResetPasswordEmailProps) {
+ const brand = getBrandConfig()
+
+ return (
+
+ Hello {username},
+
+ A password reset was requested for your {brand.name} account. Click below to set a new
+ password.
+
+
+
+ Reset Password
+
+
+ {/* Divider */}
+
+
+
+ If you didn't request this, you can ignore this email. Link expires in 24 hours.
+
+
+ )
+}
+
+export default ResetPasswordEmail
diff --git a/apps/sim/components/emails/auth/welcome-email.tsx b/apps/sim/components/emails/auth/welcome-email.tsx
new file mode 100644
index 0000000000..bbd196b08d
--- /dev/null
+++ b/apps/sim/components/emails/auth/welcome-email.tsx
@@ -0,0 +1,45 @@
+import { Link, Text } from '@react-email/components'
+import { baseStyles } from '@/components/emails/_styles'
+import { EmailLayout } from '@/components/emails/components'
+import { getBrandConfig } from '@/lib/branding/branding'
+import { getBaseUrl } from '@/lib/core/utils/urls'
+
+interface WelcomeEmailProps {
+ userName?: string
+}
+
+export function WelcomeEmail({ userName }: WelcomeEmailProps) {
+ const brand = getBrandConfig()
+ const baseUrl = getBaseUrl()
+
+ return (
+
+
+ {userName ? `Hey ${userName},` : 'Hey,'}
+
+
+ Welcome to {brand.name}! Your account is ready. Start building, testing, and deploying AI
+ workflows in minutes.
+
+
+
+ Get Started
+
+
+
+ If you have any questions or feedback, just reply to this email. I read every message!
+
+
+ - Emir, co-founder of {brand.name}
+
+ {/* Divider */}
+
+
+
+ You're on the free plan with $10 in credits to get started.
+
+
+ )
+}
+
+export default WelcomeEmail
diff --git a/apps/sim/components/emails/base-styles.ts b/apps/sim/components/emails/base-styles.ts
deleted file mode 100644
index 633c762eee..0000000000
--- a/apps/sim/components/emails/base-styles.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-// Base styles for all email templates
-
-export const baseStyles = {
- fontFamily: 'HelveticaNeue, Helvetica, Arial, sans-serif',
- main: {
- backgroundColor: '#f5f5f7',
- fontFamily: 'HelveticaNeue, Helvetica, Arial, sans-serif',
- },
- container: {
- maxWidth: '580px',
- margin: '30px auto',
- backgroundColor: '#ffffff',
- borderRadius: '5px',
- overflow: 'hidden',
- },
- header: {
- padding: '30px 0',
- display: 'flex',
- justifyContent: 'center',
- alignItems: 'center',
- backgroundColor: '#ffffff',
- },
- content: {
- padding: '5px 30px 20px 30px',
- },
- paragraph: {
- fontSize: '16px',
- lineHeight: '1.5',
- color: '#333333',
- margin: '16px 0',
- },
- button: {
- display: 'inline-block',
- backgroundColor: '#6F3DFA',
- color: '#ffffff',
- fontWeight: 'bold',
- fontSize: '16px',
- padding: '12px 30px',
- borderRadius: '5px',
- textDecoration: 'none',
- textAlign: 'center' as const,
- margin: '20px 0',
- },
- link: {
- color: '#6F3DFA',
- textDecoration: 'underline',
- },
- footer: {
- maxWidth: '580px',
- margin: '0 auto',
- padding: '20px 0',
- textAlign: 'center' as const,
- },
- footerText: {
- fontSize: '12px',
- color: '#666666',
- margin: '0',
- },
- codeContainer: {
- margin: '20px 0',
- padding: '16px',
- backgroundColor: '#f8f9fa',
- borderRadius: '5px',
- border: '1px solid #eee',
- textAlign: 'center' as const,
- },
- code: {
- fontSize: '28px',
- fontWeight: 'bold',
- letterSpacing: '4px',
- color: '#333333',
- },
- sectionsBorders: {
- width: '100%',
- display: 'flex',
- },
- sectionBorder: {
- borderBottom: '1px solid #eeeeee',
- width: '249px',
- },
- sectionCenter: {
- borderBottom: '1px solid #6F3DFA',
- width: '102px',
- },
-}
diff --git a/apps/sim/components/emails/batch-invitation-email.tsx b/apps/sim/components/emails/batch-invitation-email.tsx
deleted file mode 100644
index fa67ae096c..0000000000
--- a/apps/sim/components/emails/batch-invitation-email.tsx
+++ /dev/null
@@ -1,168 +0,0 @@
-import {
- Body,
- Column,
- Container,
- Head,
- Html,
- Img,
- Link,
- Preview,
- Row,
- Section,
- Text,
-} from '@react-email/components'
-import { baseStyles } from '@/components/emails/base-styles'
-import EmailFooter from '@/components/emails/footer'
-import { getBrandConfig } from '@/lib/branding/branding'
-import { getBaseUrl } from '@/lib/core/utils/urls'
-
-interface WorkspaceInvitation {
- workspaceId: string
- workspaceName: string
- permission: 'admin' | 'write' | 'read'
-}
-
-interface BatchInvitationEmailProps {
- inviterName: string
- organizationName: string
- organizationRole: 'admin' | 'member'
- workspaceInvitations: WorkspaceInvitation[]
- acceptUrl: string
-}
-
-const getPermissionLabel = (permission: string) => {
- switch (permission) {
- case 'admin':
- return 'Admin (full access)'
- case 'write':
- return 'Editor (can edit workflows)'
- case 'read':
- return 'Viewer (read-only access)'
- default:
- return permission
- }
-}
-
-const getRoleLabel = (role: string) => {
- switch (role) {
- case 'admin':
- return 'Admin'
- case 'member':
- return 'Member'
- default:
- return role
- }
-}
-
-export const BatchInvitationEmail = ({
- inviterName = 'Someone',
- organizationName = 'the team',
- organizationRole = 'member',
- workspaceInvitations = [],
- acceptUrl,
-}: BatchInvitationEmailProps) => {
- const brand = getBrandConfig()
- const baseUrl = getBaseUrl()
- const hasWorkspaces = workspaceInvitations.length > 0
-
- return (
-
-
-
-
- You've been invited to join {organizationName}
- {hasWorkspaces ? ` and ${workspaceInvitations.length} workspace(s)` : ''}
-
-
-
-
-
- 
-
-
-
-
-
-
-
- Hello,
-
- {inviterName} has invited you to join{' '}
- {organizationName} on Sim.
-
-
- {/* Team Role Information */}
-
- Team Role: {getRoleLabel(organizationRole)}
-
-
- {organizationRole === 'admin'
- ? "As a Team Admin, you'll be able to manage team members, billing, and workspace access."
- : "As a Team Member, you'll have access to shared team billing and can be invited to workspaces."}
-
-
- {/* Workspace Invitations */}
- {hasWorkspaces && (
- <>
-
-
- Workspace Access ({workspaceInvitations.length} workspace
- {workspaceInvitations.length !== 1 ? 's' : ''}):
-
-
- {workspaceInvitations.map((ws) => (
-
- • {ws.workspaceName} - {getPermissionLabel(ws.permission)}
-
- ))}
-
- )}
-
-
- Accept Invitation
-
-
-
- By accepting this invitation, you'll join {organizationName}
- {hasWorkspaces
- ? ` and gain access to ${workspaceInvitations.length} workspace(s)`
- : ''}
- .
-
-
-
- This invitation will expire in 7 days. If you didn't expect this invitation, you can
- safely ignore this email.
-
-
-
- Best regards,
-
- The Sim Team
-
-
-
-
-
-
-
- )
-}
-
-export default BatchInvitationEmail
diff --git a/apps/sim/components/emails/billing/credit-purchase-email.tsx b/apps/sim/components/emails/billing/credit-purchase-email.tsx
index 8668ef9f44..b2c62a0a0e 100644
--- a/apps/sim/components/emails/billing/credit-purchase-email.tsx
+++ b/apps/sim/components/emails/billing/credit-purchase-email.tsx
@@ -1,19 +1,6 @@
-import {
- Body,
- Column,
- Container,
- Head,
- Hr,
- Html,
- Img,
- Link,
- Preview,
- Row,
- Section,
- Text,
-} from '@react-email/components'
-import { baseStyles } from '@/components/emails/base-styles'
-import EmailFooter from '@/components/emails/footer'
+import { Link, Section, Text } from '@react-email/components'
+import { baseStyles, colors } from '@/components/emails/_styles'
+import { EmailLayout } from '@/components/emails/components'
import { getBrandConfig } from '@/lib/branding/branding'
import { getBaseUrl } from '@/lib/core/utils/urls'
@@ -36,89 +23,74 @@ export function CreditPurchaseEmail({
const previewText = `${brand.name}: $${amount.toFixed(2)} in credits added to your account`
return (
-
-
-