@consilioweb/payload-support 0.5.1

package/src/types.ts

@@ -0,0 +1,255 @@
+// ─── Feature flags ───────────────────────────────────────
+
+export interface SupportFeatures {
+  /** Time tracking: timer, manual entries, billing */
+  timeTracking?: boolean
+  /** AI features: sentiment, synthesis, suggestion, rewrite */
+  ai?: boolean
+  /** Satisfaction surveys: CSAT rating after resolution */
+  satisfaction?: boolean
+  /** Live chat integration: chat → ticket conversion */
+  chat?: boolean
+  /** Email tracking: pixel tracking, open/sent status per message */
+  emailTracking?: boolean
+  /** Canned responses: quick reply templates */
+  canned?: boolean
+  /** Ticket merge: combine two tickets into one */
+  merge?: boolean
+  /** Snooze: temporarily hide a ticket */
+  snooze?: boolean
+  /** External messages: add messages received outside the system */
+  externalMessages?: boolean
+  /** Client history: past tickets, projects, notes sidebar */
+  clientHistory?: boolean
+  /** Activity log: audit trail of actions on the ticket */
+  activityLog?: boolean
+  /** Split ticket: extract a message into a new ticket */
+  splitTicket?: boolean
+  /** Scheduled replies: send a message at a future date */
+  scheduledReplies?: boolean
+  /** Auto-close: automatically resolve inactive tickets */
+  autoClose?: boolean
+  /** Auto-close delay in days */
+  autoCloseDays?: number
+  /** Round-robin: distribute new tickets evenly among agents */
+  roundRobin?: boolean
+  /** SLA policies: response & resolution time targets */
+  sla?: boolean
+  /** Webhooks: outbound HTTP hooks on ticket events */
+  webhooks?: boolean
+  /** Macros: multi-action shortcuts */
+  macros?: boolean
+  /** Custom statuses: configurable ticket statuses */
+  customStatuses?: boolean
+  /** Collision detection: warn when multiple agents view same ticket */
+  collisionDetection?: boolean
+  /** Per-agent email signatures */
+  signatures?: boolean
+  /** AI chatbot for self-service */
+  chatbot?: boolean
+  /** Bulk actions on multiple tickets */
+  bulkActions?: boolean
+  /** Command palette (⌘K) */
+  commandPalette?: boolean
+  /** Knowledge base / FAQ */
+  knowledgeBase?: boolean
+  /** Pending email queue */
+  pendingEmails?: boolean
+  /** Authentication audit logs */
+  authLogs?: boolean
+}
+
+// ─── AI provider ─────────────────────────────────────────
+
+export interface AIProviderConfig {
+  provider: 'anthropic' | 'openai' | 'ollama' | 'custom'
+  apiKey?: string
+  model?: string
+  baseUrl?: string
+}
+
+// ─── Email configuration ─────────────────────────────────
+
+export interface EmailConfig {
+  fromAddress?: string
+  fromName?: string
+  replyTo?: string
+}
+
+// ─── Plugin configuration ────────────────────────────────
+
+export interface SupportPluginConfig {
+  /** Enable/disable individual features (all enabled by default) */
+  features?: SupportFeatures
+
+  /** AI provider configuration */
+  ai?: AIProviderConfig
+
+  /** Email configuration for ticket notifications */
+  email?: EmailConfig
+
+  /** Locale: 'fr' or 'en' (default: 'fr') */
+  locale?: 'fr' | 'en'
+
+  /** Nav group label in Payload admin sidebar */
+  navGroup?: string
+
+  /** Base path for admin views (default: '/support') */
+  basePath?: string
+
+  /** User collection slug for agent relationships (default: 'users') */
+  userCollectionSlug?: string
+
+  /**
+   * Restrict Google OAuth auto-registration to specific email domains.
+   * When set and non-empty, only emails matching one of these domains can
+   * create an account via OAuth. Existing accounts are unaffected.
+   * Example: ['acme.com', 'partner.org']
+   */
+  allowedEmailDomains?: string[]
+
+  /** Skip injecting collections (use your own custom collections) */
+  skipCollections?: boolean
+
+  /** Skip injecting admin views (use your own custom views) */
+  skipViews?: boolean
+
+  /** Skip injecting endpoints (use your own custom API routes) */
+  skipEndpoints?: boolean
+
+  /** Collection slug overrides */
+  collectionSlugs?: {
+    tickets?: string
+    ticketMessages?: string
+    supportClients?: string
+    timeEntries?: string
+    cannedResponses?: string
+    ticketActivityLog?: string
+    satisfactionSurveys?: string
+    knowledgeBase?: string
+    chatMessages?: string
+    pendingEmails?: string
+    emailLogs?: string
+    authLogs?: string
+    webhookEndpoints?: string
+    slaPolicies?: string
+    macros?: string
+    ticketStatuses?: string
+  }
+
+  /** Admin notification collection slug (default: 'admin-notifications') */
+  notificationSlug?: string
+
+  /** Custom component path for ticket conversation UI field */
+  conversationComponent?: string
+
+  /** Project collection slug — adds a project relationship to tickets (optional) */
+  projectCollectionSlug?: string
+
+  /** Documents upload collection slug — adds quote/invoice upload fields to tickets (optional) */
+  documentsCollectionSlug?: string
+}
+
+// ─── Ticket data types ───────────────────────────────────
+
+export interface TicketData {
+  id: number | string
+  ticketNumber: string
+  subject: string
+  status: string
+  priority: string
+  category?: string
+  client?: number | string
+  assignedTo?: number | string
+  totalTimeMinutes?: number
+  createdAt: string
+  updatedAt: string
+}
+
+export interface MessageData {
+  id: number | string
+  ticket: number | string
+  body: string
+  bodyHtml?: string
+  authorType: 'admin' | 'client' | 'email'
+  isInternal?: boolean
+  attachments?: Array<{ file: number | string }>
+  createdAt: string
+}
+
+export interface TimeEntryData {
+  id: number | string
+  ticket: number | string
+  minutes: number
+  description?: string
+  date: string
+}
+
+export interface ClientData {
+  id: number | string
+  email: string
+  firstName: string
+  lastName: string
+  company?: string
+  phone?: string
+}
+
+export interface CannedResponseData {
+  id: number | string
+  title: string
+  body: string
+  category?: string
+}
+
+export interface ActivityEntryData {
+  id: number | string
+  ticket: number | string
+  action: string
+  field?: string
+  oldValue?: string
+  newValue?: string
+  actorType: 'admin' | 'client' | 'system'
+  actorEmail?: string
+  createdAt: string
+}
+
+export interface SatisfactionSurveyData {
+  id: number | string
+  ticket: number | string
+  client: number | string
+  rating: number
+  comment?: string
+}
+
+// ─── Default feature values ──────────────────────────────
+
+export const DEFAULT_FEATURES: Required<SupportFeatures> = {
+  timeTracking: true,
+  ai: true,
+  satisfaction: true,
+  chat: true,
+  emailTracking: true,
+  canned: true,
+  merge: true,
+  snooze: true,
+  externalMessages: true,
+  clientHistory: true,
+  activityLog: true,
+  splitTicket: true,
+  scheduledReplies: true,
+  autoClose: true,
+  autoCloseDays: 7,
+  roundRobin: false,
+  sla: true,
+  webhooks: true,
+  macros: true,
+  customStatuses: false,
+  collisionDetection: true,
+  signatures: true,
+  chatbot: true,
+  bulkActions: true,
+  commandPalette: true,
+  knowledgeBase: true,
+  pendingEmails: true,
+  authLogs: true,
+}

package/src/utils/adminNotification.ts

@@ -0,0 +1,38 @@
+import type { Payload } from 'payload'
+
+/**
+ * Helper to create an admin notification.
+ * Can be called from any hook or endpoint.
+ *
+ * @param payload - Payload instance
+ * @param data - Notification data
+ * @param collectionSlug - Override collection slug (default: 'admin-notifications')
+ */
+export async function createAdminNotification(
+  payload: Payload,
+  data: {
+    title: string
+    message?: string
+    type: 'info' | 'new_ticket' | 'client_message' | 'quote_request' | 'urgent_ticket' | 'post_published' | 'satisfaction' | 'sla_alert'
+    link?: string
+    recipient?: number | string
+  },
+  collectionSlug = 'admin-notifications',
+): Promise<void> {
+  try {
+    await payload.create({
+      collection: collectionSlug as any,
+      data: {
+        title: data.title,
+        message: data.message,
+        type: data.type,
+        link: data.link,
+        recipient: data.recipient,
+        read: false,
+      },
+      overrideAccess: true,
+    })
+  } catch (err) {
+    console.error('[notification] Failed to create:', err)
+  }
+}

package/src/utils/auth.ts

@@ -0,0 +1,46 @@
+import type { CollectionSlugs } from './slugs'
+
+/**
+ * Custom error class for authentication/authorization failures.
+ * Carries an HTTP status code for consistent API responses.
+ */
+export class AuthError extends Error {
+  public readonly statusCode: number
+
+  constructor(message: string, statusCode: number) {
+    super(message)
+    this.name = 'AuthError'
+    this.statusCode = statusCode
+  }
+}
+
+/**
+ * Asserts the request comes from an authenticated admin user.
+ * Throws AuthError(401) if unauthenticated, AuthError(403) if not an admin.
+ * Uses TypeScript assertion signature so `req.user` is narrowed to non-null after call.
+ */
+export function requireAdmin(req: { user?: any }, slugs: CollectionSlugs): asserts req is { user: NonNullable<typeof req.user> } {
+  if (!req.user) throw new AuthError('Authentication required', 401)
+  if (req.user.collection !== slugs.users) throw new AuthError('Admin access required', 403)
+}
+
+/**
+ * Asserts the request comes from an authenticated support client.
+ * Throws AuthError(401) if unauthenticated, AuthError(403) if not a client.
+ * Uses TypeScript assertion signature so `req.user` is narrowed to non-null after call.
+ */
+export function requireClient(req: { user?: any }, slugs: CollectionSlugs): asserts req is { user: NonNullable<typeof req.user> } {
+  if (!req.user) throw new AuthError('Authentication required', 401)
+  if (req.user.collection !== slugs.supportClients) throw new AuthError('Client access required', 403)
+}
+
+/**
+ * Handles AuthError in catch blocks, returning appropriate JSON responses.
+ * Returns null if the error is not an AuthError (caller should handle it).
+ */
+export function handleAuthError(error: unknown): Response | null {
+  if (error instanceof AuthError) {
+    return Response.json({ error: error.message }, { status: error.statusCode })
+  }
+  return null
+}

package/src/utils/emailTemplate.ts

@@ -0,0 +1,343 @@
+/**
+ * Professional B2B email template system
+ * Configurable branding, colors, and layout
+ * Tone: Professional, responsive email design
+ */
+
+// ─── Configuration ───────────────────────────────────────────────────
+
+export interface EmailTemplateConfig {
+  brandName?: string
+  brandColor?: string // primary accent color (hex)
+  secondaryColor?: string // secondary accent color (hex)
+  accentColor?: string // tertiary accent color (hex)
+  logoUrl?: string
+  supportEmail?: string
+  websiteUrl?: string
+  phone?: string
+  location?: string
+  /** Short brand initials shown in header badge (e.g. "CW", "AB") */
+  brandInitials?: string
+}
+
+const DEFAULT_CONFIG: Required<EmailTemplateConfig> = {
+  brandName: 'Support',
+  brandColor: '#00E5FF',
+  secondaryColor: '#FFD600',
+  accentColor: '#FF8A00',
+  logoUrl: '',
+  supportEmail: process.env.SUPPORT_EMAIL || '',
+  websiteUrl: process.env.NEXT_PUBLIC_SERVER_URL || '',
+  phone: '',
+  location: '',
+  brandInitials: '',
+}
+
+function resolveConfig(config?: EmailTemplateConfig): Required<EmailTemplateConfig> {
+  return { ...DEFAULT_CONFIG, ...config }
+}
+
+// ─── Brand-agnostic utilities ────────────────────────────────────────
+
+export function escapeHtml(str: string): string {
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;')
+}
+
+/**
+ * Tracking pixel for email open detection
+ * Inserts a 1x1 transparent GIF that triggers /api/support/track-open
+ */
+export function emailTrackingPixel(ticketId: number | string, messageId?: number | string, baseUrl?: string): string {
+  const url = baseUrl || process.env.NEXT_PUBLIC_SERVER_URL || ''
+  const params = `t=${ticketId}${messageId ? `&m=${messageId}` : ''}`
+  return `<img src="${url}/api/support/track-open?${params}" width="1" height="1" alt="" style="display:block;width:1px;height:1px;border:0;" />`
+}
+
+/**
+ * Convert WYSIWYG HTML to email-safe HTML with inline styles.
+ * Handles blockquotes, images, links, lists, and paragraphs.
+ */
+export function emailRichContent(html: string, config?: EmailTemplateConfig): string {
+  const c = resolveConfig(config)
+  const baseUrl = c.websiteUrl
+
+  // Helper: replace tag with inline-styled version (strips existing style)
+  function styleTag(input: string, tag: string, style: string): string {
+    const regex = new RegExp(`<${tag}(\\s[^>]*)?>`, 'gi')
+    return input.replace(regex, (_match, attrs) => {
+      const cleanAttrs = (attrs || '').replace(/\s*style="[^"]*"/g, '')
+      return `<${tag}${cleanAttrs} style="${style}">`
+    })
+  }
+
+  let result = html
+    // Make relative image URLs absolute
+    .replace(/src="\/([^"]+)"/g, `src="${baseUrl}/$1"`)
+
+  // Apply inline styles to elements
+  result = styleTag(result, 'blockquote', `border-left: 4px solid ${c.brandColor}; margin: 16px 0; padding: 12px 20px; background: #f0f9fa; border-radius: 0 8px 8px 0;`)
+  result = styleTag(result, 'img', 'max-width: 100%; height: auto; border-radius: 8px; margin: 12px 0; display: block;')
+  result = styleTag(result, 'a', `color: ${c.brandColor}; text-decoration: underline; font-weight: 600;`)
+  result = styleTag(result, 'ul', 'margin: 8px 0; padding-left: 24px;')
+  result = styleTag(result, 'ol', 'margin: 8px 0; padding-left: 24px;')
+  result = styleTag(result, 'li', 'margin: 4px 0; line-height: 1.6;')
+  result = styleTag(result, 'p', 'margin: 0 0 12px 0; line-height: 1.75; font-size: 15px; color: #1f2937;')
+
+  // Strip dangerous content
+  result = result
+    .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
+    .replace(/<style\b[^<]*(?:(?!<\/style>)<[^<]*)*<\/style>/gi, '')
+    .replace(/\bon\w+\s*=\s*"[^"]*"/gi, '')
+    .replace(/\bon\w+\s*=\s*'[^']*'/gi, '')
+    .replace(/javascript:/gi, '')
+
+  return `<div style="font-size: 15px; line-height: 1.75; color: #1f2937;">${result}</div>`
+}
+
+// ─── Configurable email components ───────────────────────────────────
+
+type ButtonColor = 'primary' | 'secondary' | 'dark'
+
+function getButtonColors(config: Required<EmailTemplateConfig>): Record<ButtonColor, { bg: string; text: string; border: string }> {
+  return {
+    primary: { bg: config.brandColor, text: '#000000', border: '#000000' },
+    secondary: { bg: config.secondaryColor, text: '#000000', border: '#000000' },
+    dark: { bg: '#000000', text: '#FFFFFF', border: '#000000' },
+  }
+}
+
+/**
+ * Generate a CTA button for emails
+ */
+export function emailButton(text: string, url: string, color: ButtonColor = 'primary', config?: EmailTemplateConfig): string {
+  const c = resolveConfig(config)
+  const colors = getButtonColors(c)
+  const bc = colors[color]
+  return `
+    <div style="text-align: center; margin: 32px 0;">
+      <a href="${url}" style="display: inline-block; padding: 16px 40px; background: ${bc.bg}; color: ${bc.text}; font-weight: 800; font-size: 15px; text-decoration: none; border-radius: 10px; border: 2px solid ${bc.border}; letter-spacing: 0.02em;">
+        ${text}
+      </a>
+    </div>
+  `
+}
+
+/**
+ * Quote block for message previews
+ */
+export function emailQuote(content: string, borderColor?: string, config?: EmailTemplateConfig): string {
+  const c = resolveConfig(config)
+  const color = borderColor || c.brandColor
+  return `
+    <div style="margin: 24px 0; padding: 20px 24px; background: #f8f9fa; border-left: 4px solid ${color}; border-radius: 0 8px 8px 0;">
+      <p style="margin: 0; font-size: 15px; line-height: 1.75; color: #333333; white-space: pre-wrap;">${escapeHtml(content)}</p>
+    </div>
+  `
+}
+
+/**
+ * Info row (label: value) for structured data in emails
+ */
+export function emailInfoRow(label: string, value: string): string {
+  return `
+    <tr>
+      <td style="padding: 8px 0; font-size: 14px; font-weight: 700; color: #333333; width: 150px; vertical-align: top; text-transform: uppercase; letter-spacing: 0.03em; font-size: 12px;">${escapeHtml(label)}</td>
+      <td style="padding: 8px 0; font-size: 15px; color: #1f2937; line-height: 1.5;">${value}</td>
+    </tr>
+  `
+}
+
+/**
+ * Paragraph helper with professional styling
+ */
+export function emailParagraph(text: string): string {
+  return `<p style="margin: 0 0 18px 0; font-size: 15px; line-height: 1.75; color: #1f2937;">${text}</p>`
+}
+
+/**
+ * Generate the professional footer
+ */
+function emailFooter(config: Required<EmailTemplateConfig>): string {
+  const logoHtml = config.logoUrl
+    ? `<a href="${config.websiteUrl}">
+            <img src="${config.logoUrl}" alt="${escapeHtml(config.brandName)}" width="100" height="47" style="display: block; border: 0;" />
+          </a>`
+    : `<a href="${config.websiteUrl}" style="font-size: 18px; font-weight: 900; color: #000000; text-decoration: none;">${escapeHtml(config.brandName)}</a>`
+
+  const contactParts: string[] = []
+  if (config.supportEmail) {
+    contactParts.push(`<a href="mailto:${config.supportEmail}" style="color: #555555; text-decoration: none;">${config.supportEmail}</a>`)
+  }
+  if (config.phone) {
+    contactParts.push(`<a href="tel:${config.phone.replace(/\s/g, '')}" style="color: #555555; text-decoration: none;">${config.phone}</a>`)
+  }
+
+  const locationParts: string[] = []
+  if (config.websiteUrl) {
+    const displayUrl = config.websiteUrl.replace(/^https?:\/\//, '')
+    locationParts.push(`<a href="${config.websiteUrl}" style="color: ${config.brandColor}; text-decoration: none; font-weight: 600;">${displayUrl}</a>`)
+  }
+  if (config.location) {
+    locationParts.push(config.location)
+  }
+
+  const unsubscribeHtml = config.supportEmail
+    ? `<p style="margin: 8px 0 0 0; font-size: 11px; color: #aaaaaa; line-height: 1.4;">
+            <a href="mailto:${config.supportEmail}?subject=Unsubscribe" style="color: #aaaaaa; text-decoration: underline;">Se d&eacute;sinscrire</a>
+          </p>`
+    : ''
+
+  return `
+    <!-- Spacer -->
+    <div style="height: 24px;"></div>
+
+    <!-- Tricolor separator -->
+    <table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin-bottom: 24px;">
+      <tr>
+        <td width="50%" height="3" bgcolor="${config.brandColor}" style="font-size:1px;line-height:1px;">&nbsp;</td>
+        <td width="25%" height="3" bgcolor="${config.secondaryColor}" style="font-size:1px;line-height:1px;">&nbsp;</td>
+        <td width="25%" height="3" bgcolor="${config.accentColor}" style="font-size:1px;line-height:1px;">&nbsp;</td>
+      </tr>
+    </table>
+
+    <!-- Footer -->
+    <table cellpadding="0" cellspacing="0" border="0" width="100%">
+      <tr>
+        <td width="120" valign="top" style="padding-right: 16px;">
+          ${logoHtml}
+        </td>
+        <td valign="top">
+          <p style="margin: 0; font-size: 14px; font-weight: 800; color: #000000; letter-spacing: 0.01em;">${escapeHtml(config.brandName)}</p>
+          ${contactParts.length > 0 ? `<p style="margin: 4px 0 0 0; font-size: 13px; color: #555555; line-height: 1.5;">${contactParts.join(' &nbsp;&middot;&nbsp; ')}</p>` : ''}
+          ${locationParts.length > 0 ? `<p style="margin: 4px 0 0 0; font-size: 12px; color: #888888; line-height: 1.4;">${locationParts.join(' &nbsp;&middot;&nbsp; ')}</p>` : ''}
+          ${unsubscribeHtml}
+        </td>
+      </tr>
+    </table>
+  `
+}
+
+interface EmailOptions {
+  /** Header background color variant */
+  headerColor?: 'primary' | 'secondary'
+  /** Preheader text (hidden preview in email clients) */
+  preheader?: string
+}
+
+/**
+ * Wrap email content in the professional template
+ */
+export function emailWrapper(title: string, body: string, options: EmailOptions = {}, config?: EmailTemplateConfig): string {
+  const c = resolveConfig(config)
+  const { headerColor = 'primary', preheader } = options
+  const headerBg = headerColor === 'secondary' ? c.secondaryColor : c.brandColor
+
+  const badgeHtml = c.brandInitials
+    ? `<td width="48" align="right" valign="middle">
+                    <div style="width: 36px; height: 36px; border-radius: 8px; background: #000; display: inline-block; text-align: center; line-height: 36px;">
+                      <span style="color: #fff; font-weight: 900; font-size: 14px; letter-spacing: 0.05em;">${escapeHtml(c.brandInitials)}</span>
+                    </div>
+                  </td>`
+    : ''
+
+  return `<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>${escapeHtml(title)}</title>
+  <!--[if mso]>
+  <style type="text/css">
+    body, table, td { font-family: Arial, Helvetica, sans-serif; }
+  </style>
+  <![endif]-->
+</head>
+<body style="margin: 0; padding: 0; background: #f0f0f0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;">
+  ${preheader ? `<div style="display: none; max-height: 0; overflow: hidden; mso-hide: all;">${escapeHtml(preheader)}</div>` : ''}
+
+  <!-- Outer wrapper -->
+  <table cellpadding="0" cellspacing="0" border="0" width="100%" style="background: #f0f0f0; padding: 40px 16px;">
+    <tr>
+      <td align="center">
+        <!-- Main container — wider (660px) -->
+        <table cellpadding="0" cellspacing="0" border="0" width="660" style="max-width: 660px; width: 100%;">
+
+          <!-- Header -->
+          <tr>
+            <td style="background: ${headerBg}; padding: 32px 40px; border-radius: 12px 12px 0 0; border: 2px solid #000000; border-bottom: none;">
+              <table cellpadding="0" cellspacing="0" border="0" width="100%">
+                <tr>
+                  <td>
+                    <h1 style="margin: 0; color: #000000; font-size: 22px; font-weight: 800; line-height: 1.3; letter-spacing: -0.01em;">
+                      ${escapeHtml(title)}
+                    </h1>
+                  </td>
+                  ${badgeHtml}
+                </tr>
+              </table>
+            </td>
+          </tr>
+
+          <!-- Body -->
+          <tr>
+            <td style="background: #ffffff; padding: 40px; border: 2px solid #000000; border-top: none; border-radius: 0 0 12px 12px;">
+              ${body}
+              ${emailFooter(c)}
+            </td>
+          </tr>
+
+        </table>
+      </td>
+    </tr>
+  </table>
+</body>
+</html>`
+}
+
+// ─── Factory ─────────────────────────────────────────────────────────
+
+export interface EmailTemplateFactory {
+  emailButton: (text: string, url: string, color?: ButtonColor) => string
+  emailWrapper: (title: string, body: string, options?: EmailOptions) => string
+  emailQuote: (content: string, borderColor?: string) => string
+  emailInfoRow: (label: string, value: string) => string
+  emailParagraph: (text: string) => string
+  emailTrackingPixel: (ticketId: number | string, messageId?: number | string) => string
+  emailRichContent: (html: string) => string
+  escapeHtml: (str: string) => string
+}
+
+/**
+ * Create a pre-configured email template factory.
+ * All returned functions use the provided config automatically.
+ *
+ * @example
+ * const email = createEmailTemplateFactory({
+ *   brandName: 'MyBrand',
+ *   brandColor: '#FF5733',
+ *   supportEmail: 'help@mybrand.com',
+ *   websiteUrl: 'https://mybrand.com',
+ *   logoUrl: 'https://mybrand.com/logo.png',
+ *   brandInitials: 'MB',
+ * })
+ *
+ * const html = email.emailWrapper('Welcome!', email.emailParagraph('Hello world.'))
+ */
+export function createEmailTemplateFactory(config: EmailTemplateConfig): EmailTemplateFactory {
+  const c = resolveConfig(config)
+  return {
+    emailButton: (text, url, color = 'primary') => emailButton(text, url, color, c),
+    emailWrapper: (title, body, options = {}) => emailWrapper(title, body, options, c),
+    emailQuote: (content, borderColor?) => emailQuote(content, borderColor, c),
+    emailInfoRow,
+    emailParagraph,
+    emailTrackingPixel: (ticketId, messageId?) => emailTrackingPixel(ticketId, messageId, c.websiteUrl),
+    emailRichContent: (html) => emailRichContent(html, c),
+    escapeHtml,
+  }
+}