@consilioweb/payload-support 0.13.0 → 0.14.0

package/src/utils/emailTemplate.ts

@@ -1,9 +1,38 @@
 /**
- * Professional B2B email template system
- * Configurable branding, colors, and layout
- * Tone: Professional, responsive email design
+ * ConsilioWEB Support — email template system v2
+ *
+ * Design system: warm-neutral background, ink + teal accents.
+ *   - ink     #1d2b4d  (primary text / headers)
+ *   - teal    #17807c  (accent / links / reply family)
+ *   - amber   #c2410c  (alert family — "action requise")
+ *   - paper   #faf8f5  (outer canvas)        card #ffffff
+ *   - sand    #f4f1ec  (quote / panel bg)    line #e7e2d9 (hairlines)
+ *
+ * Goals: fewer, clearer emails. Each client email carries a visual "family"
+ * (eyebrow + accent) so the inbox reads at a glance, plus an explicit preheader.
+ *
+ * Public API is FROZEN — names & signatures of emailWrapper, emailButton,
+ * emailParagraph, emailQuote, emailRichContent, emailTrackingPixel,
+ * emailInfoRow, escapeHtml, createEmailTemplateFactory must not change.
  */
 
+// ─── Design tokens ───────────────────────────────────────────────────
+
+const COLORS = {
+  ink: '#1d2b4d',
+  inkSoft: '#3a486a',
+  teal: '#17807c',
+  tealDark: '#0f5d5a',
+  amber: '#c2410c',
+  paper: '#faf8f5',
+  card: '#ffffff',
+  sand: '#f4f1ec',
+  line: '#e7e2d9',
+  text: '#2a3142',
+  muted: '#6b7280',
+  faint: '#9aa1ad',
+} as const
+
 // ─── Configuration ───────────────────────────────────────────────────
 
 export interface EmailTemplateConfig {
@@ -18,19 +47,22 @@ export interface EmailTemplateConfig {
   location?: string
   /** Short brand initials shown in header badge (e.g. "CW", "AB") */
   brandInitials?: string
+  /** Absolute URL of the client notification preferences page (footer link) */
+  preferencesUrl?: string
 }
 
 const DEFAULT_CONFIG: Required<EmailTemplateConfig> = {
   brandName: 'Support',
-  brandColor: '#00E5FF',
-  secondaryColor: '#FFD600',
-  accentColor: '#FF8A00',
+  brandColor: COLORS.teal,
+  secondaryColor: COLORS.ink,
+  accentColor: COLORS.amber,
   logoUrl: '',
   supportEmail: process.env.SUPPORT_EMAIL || '',
   websiteUrl: process.env.NEXT_PUBLIC_SERVER_URL || '',
   phone: '',
   location: '',
   brandInitials: '',
+  preferencesUrl: '',
 }
 
 function resolveConfig(config?: EmailTemplateConfig): Required<EmailTemplateConfig> {
@@ -117,34 +149,43 @@ export function emailRichContent(html: string, config?: EmailTemplateConfig): st
   result = convertFencedCodeBlocks(result)
 
   // 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, 'blockquote', `border-left: 3px solid ${COLORS.teal}; margin: 16px 0; padding: 12px 20px; background: ${COLORS.sand}; border-radius: 0 8px 8px 0; color: ${COLORS.inkSoft};`)
   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, 'a', `color: ${COLORS.teal}; 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;')
+  result = styleTag(result, 'li', `margin: 4px 0; line-height: 1.6; color: ${COLORS.text};`)
+  result = styleTag(result, 'p', `margin: 0 0 12px 0; line-height: 1.75; font-size: 15px; color: ${COLORS.text};`)
 
-  // Strip dangerous content
+  // Strip dangerous content — keep this in sync with any rich-text source.
   result = result
+    // <script>…</script> and <style>…</style> (including unclosed/nested-ish)
     .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
     .replace(/<style\b[^<]*(?:(?!<\/style>)<[^<]*)*<\/style>/gi, '')
+    // Embedded frames / plugins — never valid in email, common XSS vector
+    .replace(/<iframe\b[^<]*(?:(?!<\/iframe>)<[^<]*)*<\/iframe>/gi, '')
+    .replace(/<iframe\b[^>]*\/?>/gi, '')
+    .replace(/<embed\b[^>]*\/?>/gi, '')
+    .replace(/<object\b[^<]*(?:(?!<\/object>)<[^<]*)*<\/object>/gi, '')
+    // Inline event handlers (onclick, onload, …)
     .replace(/\bon\w+\s*=\s*"[^"]*"/gi, '')
     .replace(/\bon\w+\s*=\s*'[^']*'/gi, '')
+    .replace(/\bon\w+\s*=\s*[^\s>]+/gi, '')
+    // javascript: URIs
     .replace(/javascript:/gi, '')
 
-  return `<div style="font-size: 15px; line-height: 1.75; color: #1f2937;">${result}</div>`
+  return `<div style="font-size: 15px; line-height: 1.75; color: ${COLORS.text};">${result}</div>`
 }
 
 // ─── Configurable email components ───────────────────────────────────
 
 type ButtonColor = 'primary' | 'secondary' | 'dark'
 
-function getButtonColors(config: Required<EmailTemplateConfig>): Record<ButtonColor, { bg: string; text: string; border: string }> {
+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' },
+    primary: { bg: COLORS.teal, text: '#ffffff', border: COLORS.teal },
+    secondary: { bg: COLORS.sand, text: COLORS.ink, border: COLORS.line },
+    dark: { bg: COLORS.ink, text: '#ffffff', border: COLORS.ink },
   }
 }
 
@@ -157,7 +198,7 @@ export function emailButton(text: string, url: string, color: ButtonColor = 'pri
   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;">
+      <a href="${url}" style="display: inline-block; padding: 14px 36px; background: ${bc.bg}; color: ${bc.text}; font-weight: 700; font-size: 15px; text-decoration: none; border-radius: 10px; border: 1px solid ${bc.border}; letter-spacing: 0.01em;">
         ${text}
       </a>
     </div>
@@ -181,8 +222,9 @@ function renderCodeBlockHtml(lang: string, code: string): string {
  * Quote block for message previews — supports fenced code blocks.
  */
 export function emailQuote(content: string, borderColor?: string, config?: EmailTemplateConfig): string {
-  const c = resolveConfig(config)
-  const color = borderColor || c.brandColor
+  resolveConfig(config)
+  const color = borderColor || COLORS.teal
+  const panel = `margin: 24px 0; padding: 18px 22px; background: ${COLORS.sand}; border-left: 3px solid ${color}; border-radius: 0 8px 8px 0;`
 
   // If content has fenced code blocks, render them as styled blocks
   if (content && content.includes('```')) {
@@ -194,7 +236,7 @@ export function emailQuote(content: string, borderColor?: string, config?: Email
       // Text before the code block
       const textBefore = content.slice(lastIndex, match.index).trim()
       if (textBefore) {
-        parts.push(`<p style="margin: 0 0 12px 0; font-size: 15px; line-height: 1.75; color: #333333; white-space: pre-wrap;">${escapeHtml(textBefore)}</p>`)
+        parts.push(`<p style="margin: 0 0 12px 0; font-size: 15px; line-height: 1.75; color: ${COLORS.inkSoft}; white-space: pre-wrap;">${escapeHtml(textBefore)}</p>`)
       }
       parts.push(renderCodeBlockHtml(match[1] || '', match[2] || ''))
       lastIndex = match.index + match[0].length
@@ -202,18 +244,18 @@ export function emailQuote(content: string, borderColor?: string, config?: Email
     // Remaining text after the last code block
     const textAfter = content.slice(lastIndex).trim()
     if (textAfter) {
-      parts.push(`<p style="margin: 12px 0 0 0; font-size: 15px; line-height: 1.75; color: #333333; white-space: pre-wrap;">${escapeHtml(textAfter)}</p>`)
+      parts.push(`<p style="margin: 12px 0 0 0; font-size: 15px; line-height: 1.75; color: ${COLORS.inkSoft}; white-space: pre-wrap;">${escapeHtml(textAfter)}</p>`)
     }
     return `
-      <div style="margin: 24px 0; padding: 20px 24px; background: #f8f9fa; border-left: 4px solid ${color}; border-radius: 0 8px 8px 0;">
+      <div style="${panel}">
         ${parts.join('')}
       </div>
     `
   }
 
   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 style="${panel}">
+      <p style="margin: 0; font-size: 15px; line-height: 1.75; color: ${COLORS.inkSoft}; white-space: pre-wrap;">${escapeHtml(content)}</p>
     </div>
   `
 }
@@ -224,8 +266,8 @@ export function emailQuote(content: string, borderColor?: string, config?: Email
 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>
+      <td style="padding: 8px 0; font-weight: 700; color: ${COLORS.muted}; width: 150px; vertical-align: top; text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px;">${escapeHtml(label)}</td>
+      <td style="padding: 8px 0; font-size: 15px; color: ${COLORS.text}; line-height: 1.5;">${value}</td>
     </tr>
   `
 }
@@ -234,7 +276,28 @@ export function emailInfoRow(label: string, value: string): string {
  * 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>`
+  return `<p style="margin: 0 0 18px 0; font-size: 15px; line-height: 1.75; color: ${COLORS.text};">${text}</p>`
+}
+
+// ─── Email families (eyebrow + accent) ───────────────────────────────
+
+export type EmailKind = 'reply' | 'system' | 'alert'
+
+interface KindStyle {
+  eyebrow: string
+  accent: string
+}
+
+function getKindStyle(kind: EmailKind): KindStyle {
+  switch (kind) {
+    case 'reply':
+      return { eyebrow: 'Réponse de votre équipe', accent: COLORS.teal }
+    case 'alert':
+      return { eyebrow: 'Action requise', accent: COLORS.amber }
+    case 'system':
+    default:
+      return { eyebrow: 'Notification automatique', accent: COLORS.inkSoft }
+  }
 }
 
 /**
@@ -245,41 +308,49 @@ function emailFooter(config: Required<EmailTemplateConfig>): string {
     ? `<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>`
+    : `<a href="${config.websiteUrl}" style="font-size: 16px; font-weight: 800; color: ${COLORS.ink}; text-decoration: none; letter-spacing: -0.01em;">${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>`)
+    contactParts.push(`<a href="mailto:${config.supportEmail}" style="color: ${COLORS.muted}; 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>`)
+    contactParts.push(`<a href="tel:${config.phone.replace(/\s/g, '')}" style="color: ${COLORS.muted}; 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>`)
+    locationParts.push(`<a href="${config.websiteUrl}" style="color: ${COLORS.teal}; 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>`
+  // "Gérer mes notifications" link — points at the client preferences page
+  // when available, otherwise falls back to a mailto so the link is never dead.
+  const manageUrl = config.preferencesUrl
+    || (config.websiteUrl ? `${config.websiteUrl}/support/profile` : '')
+    || (config.supportEmail ? `mailto:${config.supportEmail}?subject=Notifications` : '')
+  const preferencesLinks: string[] = []
+  if (manageUrl) {
+    preferencesLinks.push(`<a href="${manageUrl}" style="color: ${COLORS.muted}; text-decoration: underline;">Gérer mes notifications</a>`)
+  }
+  if (config.supportEmail) {
+    preferencesLinks.push(`<a href="mailto:${config.supportEmail}?subject=Unsubscribe" style="color: ${COLORS.faint}; text-decoration: underline;">Se désinscrire</a>`)
+  }
+  const preferencesHtml = preferencesLinks.length > 0
+    ? `<p style="margin: 10px 0 0 0; font-size: 11px; color: ${COLORS.faint}; line-height: 1.5;">${preferencesLinks.join(' &nbsp;&middot;&nbsp; ')}</p>`
     : ''
 
   return `
     <!-- Spacer -->
-    <div style="height: 24px;"></div>
+    <div style="height: 28px;"></div>
 
-    <!-- Tricolor separator -->
-    <table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin-bottom: 24px;">
+    <!-- Hairline separator -->
+    <table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin-bottom: 22px;">
       <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>
+        <td height="1" bgcolor="${COLORS.line}" style="font-size:1px;line-height:1px;">&nbsp;</td>
       </tr>
     </table>
 
@@ -290,10 +361,10 @@ function emailFooter(config: Required<EmailTemplateConfig>): string {
           ${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}
+          <p style="margin: 0; font-size: 13px; font-weight: 700; color: ${COLORS.ink}; letter-spacing: 0.01em;">${escapeHtml(config.brandName)}</p>
+          ${contactParts.length > 0 ? `<p style="margin: 4px 0 0 0; font-size: 13px; color: ${COLORS.muted}; line-height: 1.5;">${contactParts.join(' &nbsp;&middot;&nbsp; ')}</p>` : ''}
+          ${locationParts.length > 0 ? `<p style="margin: 4px 0 0 0; font-size: 12px; color: ${COLORS.faint}; line-height: 1.4;">${locationParts.join(' &nbsp;&middot;&nbsp; ')}</p>` : ''}
+          ${preferencesHtml}
         </td>
       </tr>
     </table>
@@ -301,10 +372,21 @@ function emailFooter(config: Required<EmailTemplateConfig>): string {
 }
 
 interface EmailOptions {
-  /** Header background color variant */
+  /**
+   * Header background color variant.
+   * @deprecated Prefer `kind` for client emails — it drives the visual family
+   * (eyebrow + accent). `headerColor` is kept for backward compatibility.
+   */
   headerColor?: 'primary' | 'secondary'
-  /** Preheader text (hidden preview in email clients) */
+  /** Preheader text (hidden preview shown in the inbox list) */
   preheader?: string
+  /**
+   * Visual family of the email:
+   *  - 'reply'  → "Réponse de votre équipe" (teal)   — human answer
+   *  - 'system' → "Notification automatique" (ink)    — status / confirmation
+   *  - 'alert'  → "Action requise" (amber)            — reminder / needs client
+   */
+  kind?: EmailKind
 }
 
 /**
@@ -312,13 +394,18 @@ interface EmailOptions {
  */
 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 { preheader, kind } = options
+  const kindStyle = kind ? getKindStyle(kind) : null
+  const accent = kindStyle?.accent || COLORS.teal
+
+  const eyebrowHtml = kindStyle
+    ? `<p style="margin: 0 0 6px 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: ${kindStyle.accent};">${escapeHtml(kindStyle.eyebrow)}</p>`
+    : ''
 
   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 style="width: 38px; height: 38px; border-radius: 10px; background: ${COLORS.ink}; display: inline-block; text-align: center; line-height: 38px;">
+                      <span style="color: #fff; font-weight: 800; font-size: 14px; letter-spacing: 0.04em;">${escapeHtml(c.brandInitials)}</span>
                     </div>
                   </td>`
     : ''
@@ -335,23 +422,29 @@ export function emailWrapper(title: string, body: string, options: EmailOptions
   </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>` : ''}
+<body style="margin: 0; padding: 0; background: ${COLORS.paper}; 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; font-size: 1px; line-height: 1px; color: ${COLORS.paper};">${escapeHtml(preheader)}&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;</div>` : ''}
 
   <!-- Outer wrapper -->
-  <table cellpadding="0" cellspacing="0" border="0" width="100%" style="background: #f0f0f0; padding: 40px 16px;">
+  <table cellpadding="0" cellspacing="0" border="0" width="100%" style="background: ${COLORS.paper}; 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%;">
+        <!-- Main container — 640px -->
+        <table cellpadding="0" cellspacing="0" border="0" width="640" style="max-width: 640px; width: 100%;">
+
+          <!-- Accent rule -->
+          <tr>
+            <td style="height: 4px; background: ${accent}; border-radius: 12px 12px 0 0; font-size: 1px; line-height: 1px;">&nbsp;</td>
+          </tr>
 
           <!-- Header -->
           <tr>
-            <td style="background: ${headerBg}; padding: 32px 40px; border-radius: 12px 12px 0 0; border: 2px solid #000000; border-bottom: none;">
+            <td style="background: ${COLORS.card}; padding: 30px 40px 22px 40px; border: 1px solid ${COLORS.line}; border-top: none; 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;">
+                  <td valign="middle">
+                    ${eyebrowHtml}
+                    <h1 style="margin: 0; color: ${COLORS.ink}; font-size: 21px; font-weight: 800; line-height: 1.3; letter-spacing: -0.01em;">
                       ${escapeHtml(title)}
                     </h1>
                   </td>
@@ -363,7 +456,7 @@ export function emailWrapper(title: string, body: string, options: EmailOptions
 
           <!-- Body -->
           <tr>
-            <td style="background: #ffffff; padding: 40px; border: 2px solid #000000; border-top: none; border-radius: 0 0 12px 12px;">
+            <td style="background: ${COLORS.card}; padding: 8px 40px 40px 40px; border: 1px solid ${COLORS.line}; border-top: none; border-radius: 0 0 12px 12px;">
               ${body}
               ${emailFooter(c)}
             </td>
@@ -397,7 +490,6 @@ export interface EmailTemplateFactory {
  * @example
  * const email = createEmailTemplateFactory({
  *   brandName: 'MyBrand',
- *   brandColor: '#FF5733',
  *   supportEmail: 'help@mybrand.com',
  *   websiteUrl: 'https://mybrand.com',
  *   logoUrl: 'https://mybrand.com/logo.png',