fcc/apps/frontend/src/components/email-comms/EmailEditor.tsx at ff8243f3b135b09e622c8a599b553b10ef1d9467 · Code-4-Community/fcc · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
import { useState } from 'react';
import EmailEditorCard from './EmailEditorCard';
import EmailPreviewPanel from './EmailPreviewPanel';

import {
  defaultEmails,
  defaultSignature,
  TAB_CONFIG,
  buildSignatureHTML,
} from './types';
import type { TabId, EmailData, EmailsState, Signature } from './types';

export default function EmailEditor() {
  const [activeTab, setActiveTab] = useState<TabId>('donation');
  const [emails, setEmails] = useState<EmailsState>(defaultEmails);
  const [sig, setSig] = useState<Signature>(defaultSignature);
  const [headerImageUrl, setHeaderImageUrl] = useState('');
  const [ctaText, setCtaText] = useState('Call to action button text');
  const [saved, setSaved] = useState(false);
  const [sent, setSent] = useState(false);

  const handleEmailChange = (
    tab: TabId,
    field: keyof EmailData,
    value: string,
  ) => {
    setEmails((prev) => ({ ...prev, [tab]: { ...prev[tab], [field]: value } }));
  };

  const handleSave = () => {
    console.log('[EmailEditor] Save payload:', {
      tab: activeTab,
      subject: emails[activeTab].subject,
      body: emails[activeTab].body,
      signature: sig,
      cta: ctaText,
    });
    setSaved(true);
    setTimeout(() => setSaved(false), 2500);
  };

  const handleSend = () => {
    const email = emails[activeTab];
    const fullHTML = `
      <html><body>
        ${email.body}
        ${buildSignatureHTML(sig)}
        ${ctaText ? `<div style="text-align:center;margin:28px 0"><a href="#" style="background:#059669;color:white;padding:14px 32px;border-radius:8px;font-weight:700;text-decoration:none;font-size:14px;letter-spacing:0.05em">${ctaText}</a></div>` : ''}
      </body></html>
    `;
    console.log('[EmailEditor] Send payload:', {
      to: '[recipient]',
      subject: email.subject,
      html: fullHTML,
    });
    setSent(true);
    setTimeout(() => setSent(false), 2500);
  };

  return (
    <div className="flex flex-col gap-5 p-6 bg-slate-50 min-h-screen font-sans">
      <div className="flex items-center gap-1 bg-white rounded-2xl p-1.5 shadow-sm border border-slate-100 w-fit">
        {TAB_CONFIG.map((tab) => (
          <button
            key={tab.id}
            onClick={() => setActiveTab(tab.id)}
            className={`flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-medium transition-all duration-200 ${
              activeTab === tab.id
                ? 'bg-emerald-600 text-white shadow-md shadow-emerald-200'
                : 'text-slate-500 hover:text-slate-800 hover:bg-slate-50'
            }`}
          >
            {tab.label}
          </button>
        ))}
      </div>

      <div className="flex gap-6">
        <EmailEditorCard
          activeTab={activeTab}
          emails={emails}
          onEmailChange={handleEmailChange}
          sig={sig}
          onSigChange={setSig}
          headerImageUrl={headerImageUrl}
          onHeaderImageChange={setHeaderImageUrl}
          ctaText={ctaText}
          onCtaChange={setCtaText}
          saved={saved}
          sent={sent}
          onSave={handleSave}
          onSend={handleSend}
        />

        <EmailPreviewPanel
          activeTab={activeTab}
          emails={emails}
          sig={sig}
          ctaText={ctaText}
          headerImageUrl={headerImageUrl}
        />
      </div>
    </div>
  );
}