diff --git a/components/email/ComposeEmail.tsx b/components/email/ComposeEmail.tsx index 5138914e..b351cc41 100644 --- a/components/email/ComposeEmail.tsx +++ b/components/email/ComposeEmail.tsx @@ -181,8 +181,38 @@ export default function ComposeEmail(props: ComposeEmailAllProps) { const subject = subjectBase.match(/^Re:/i) ? subjectBase : `Re: ${subjectBase}`; setSubject(subject); - // Set an empty content with proper spacing before the quoted content - setEmailContent('


'); + // Format the reply content with the quoted message included directly + const content = initialEmail.content || initialEmail.html || initialEmail.text || ''; + const sender = initialEmail.from && initialEmail.from.length > 0 + ? initialEmail.from[0].name || initialEmail.from[0].address + : 'Unknown sender'; + const date = initialEmail.date ? + (typeof initialEmail.date === 'string' ? new Date(initialEmail.date) : initialEmail.date) : + new Date(); + + // Format date for display + const formattedDate = date.toLocaleString('en-US', { + weekday: 'short', + year: 'numeric', + month: 'short', + day: 'numeric', + hour: '2-digit', + minute: '2-digit' + }); + + // Create reply content with quote + const replyContent = ` +

+

+
On ${formattedDate}, ${sender} wrote:
+
+
+ ${content} +
+
+ `; + + setEmailContent(replyContent); // Show CC field if there are CC recipients if (initialEmail.cc && initialEmail.cc.length > 0) { @@ -195,8 +225,45 @@ export default function ComposeEmail(props: ComposeEmailAllProps) { const subject = subjectBase.match(/^(Fwd|FW|Forward):/i) ? subjectBase : `Fwd: ${subjectBase}`; setSubject(subject); - // Set an empty content with proper spacing before the quoted content - setEmailContent('


'); + // Format the forward content with the original email included directly + const content = initialEmail.content || initialEmail.html || initialEmail.text || ''; + const fromString = formatEmailAddresses(initialEmail.from || []); + const toString = formatEmailAddresses(initialEmail.to || []); + const date = initialEmail.date ? + (typeof initialEmail.date === 'string' ? new Date(initialEmail.date) : initialEmail.date) : + new Date(); + + // Format date for display + const formattedDate = date.toLocaleString('en-US', { + weekday: 'short', + year: 'numeric', + month: 'short', + day: 'numeric', + hour: '2-digit', + minute: '2-digit' + }); + + // Create forwarded content + const forwardContent = ` +

+

+
+
+
+
---------- Forwarded message ---------
+
From: ${fromString}
+
Date: ${formattedDate}
+
Subject: ${initialEmail.subject || ''}
+
To: ${toString}
+
+ +
+
+ `; + + setEmailContent(forwardContent); // If the original email has attachments, we should include them if (initialEmail.attachments && initialEmail.attachments.length > 0) { @@ -363,16 +430,6 @@ export default function ComposeEmail(props: ComposeEmailAllProps) { - {/* Add QuotedEmailContent for replies and forwards */} - {initialEmail && (type === 'reply' || type === 'reply-all' || type === 'forward') && ( -
- -
- )} - {/* Attachments */} {attachments.length > 0 && (
@@ -499,6 +556,78 @@ function LegacyAdapter({ return 'new'; }; + // Format legacy content on mount if necessary + useEffect(() => { + // Only format if we have original email and no content was set yet + if ((originalEmail || replyTo || forwardFrom) && + (!composeBody || composeBody === '

' || composeBody === '
')) { + + const type = determineType(); + + if (type === 'reply' || type === 'reply-all') { + // For reply, format with sender info and original content + const content = originalEmail?.content || ''; + const sender = replyTo?.name || replyTo?.email || 'Unknown sender'; + const date = new Date().toLocaleString('en-US', { + weekday: 'short', + year: 'numeric', + month: 'short', + day: 'numeric', + hour: '2-digit', + minute: '2-digit' + }); + + const replyContent = ` +

+

+
On ${date}, ${sender} wrote:
+
+
+ ${content} +
+
+ `; + + setComposeBody(replyContent); + } + else if (type === 'forward') { + // For forward, format with original message details + const content = originalEmail?.content || ''; + const fromString = forwardFrom?.name || forwardFrom?.email || 'Unknown'; + const toString = 'Recipients'; + const date = new Date().toLocaleString('en-US', { + weekday: 'short', + year: 'numeric', + month: 'short', + day: 'numeric', + hour: '2-digit', + minute: '2-digit' + }); + + const forwardContent = ` +

+

+
+
+
+
---------- Forwarded message ---------
+
From: ${fromString}
+
Date: ${date}
+
Subject: ${composeSubject || ''}
+
To: ${toString}
+
+ +
+
+ `; + + setComposeBody(forwardContent); + } + } + }, [originalEmail, replyTo, forwardFrom, composeBody, determineType, composeSubject]); + // Converts attachments to the expected format const convertAttachments = () => { return attachments.map(att => ({ @@ -660,18 +789,6 @@ function LegacyAdapter({
- {/* Add QuotedEmailContent for replies and forwards */} - {(originalEmail || replyTo || forwardFrom) && - (determineType() === 'reply' || determineType() === 'reply-all' || determineType() === 'forward') && ( -
- {/* For legacy adapter, we'd need to convert the different formats */} - {/* Since we don't have the full implementation for this, we'll add a placeholder */} -
-

Original message content would appear here

-
-
- )} - {/* Attachments */} {attachments.length > 0 && (
diff --git a/components/email/RichEmailEditor.tsx b/components/email/RichEmailEditor.tsx index 0118d26f..8e47ac13 100644 --- a/components/email/RichEmailEditor.tsx +++ b/components/email/RichEmailEditor.tsx @@ -314,6 +314,38 @@ const RichEmailEditor: React.FC = ({ font-size: 13px !important; } + /* Status styles for email displays */ + :global(.ql-editor td[class*="status"]), + :global(.ql-editor td[class*="Status"]) { + background-color: #f8f9fa !important; + font-weight: 500 !important; + } + + /* Amount styles */ + :global(.ql-editor td[class*="amount"]), + :global(.ql-editor td[class*="Amount"]), + :global(.ql-editor td[class*="price"]), + :global(.ql-editor td[class*="Price"]) { + text-align: right !important; + font-family: monospace !important; + } + + /* Header row styles */ + :global(.ql-editor tr:first-child td), + :global(.ql-editor th) { + background-color: #f8f9fa !important; + font-weight: 600 !important; + } + + /* Improve table cells with specific content */ + :global(.ql-editor td:has(div[class*="number"])), + :global(.ql-editor td:has(div[class*="Number"])), + :global(.ql-editor td:has(div[class*="invoice"])), + :global(.ql-editor td:has(div[class*="Invoice"])) { + font-family: monospace !important; + letter-spacing: 0.5px !important; + } + /* Fix quoted paragraphs */ :global(.ql-editor blockquote p) { margin-bottom: 8px !important;