courrier refactor rebuild 2
This commit is contained in:
parent
4ef9268b86
commit
e023d050d2
@ -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('<div><br/><br/></div>');
|
||||
// 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 = `
|
||||
<div><br></div>
|
||||
<div><br></div>
|
||||
<div style="font-weight: 400; color: #555; margin: 20px 0 8px 0; font-size: 13px;">On ${formattedDate}, ${sender} wrote:</div>
|
||||
<blockquote style="margin: 0; padding: 10px 0 10px 15px; border-left: 2px solid #ddd; color: #505050; background-color: #f9f9f9; border-radius: 4px;">
|
||||
<div style="font-size: 13px;">
|
||||
${content}
|
||||
</div>
|
||||
</blockquote>
|
||||
`;
|
||||
|
||||
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('<div><br/><br/></div>');
|
||||
// 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 = `
|
||||
<div><br></div>
|
||||
<div><br></div>
|
||||
<div style="border-top: 1px solid #ccc; margin-top: 10px; padding-top: 10px;">
|
||||
<div style="font-family: Arial, sans-serif; color: #333;">
|
||||
<div style="margin-bottom: 15px;">
|
||||
<div>---------- Forwarded message ---------</div>
|
||||
<div><b>From:</b> ${fromString}</div>
|
||||
<div><b>Date:</b> ${formattedDate}</div>
|
||||
<div><b>Subject:</b> ${initialEmail.subject || ''}</div>
|
||||
<div><b>To:</b> ${toString}</div>
|
||||
</div>
|
||||
<div class="email-original-content">
|
||||
${content}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
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) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Add QuotedEmailContent for replies and forwards */}
|
||||
{initialEmail && (type === 'reply' || type === 'reply-all' || type === 'forward') && (
|
||||
<div className="mt-4">
|
||||
<EmailMessageToQuotedContentAdapter
|
||||
email={initialEmail}
|
||||
type={type}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Attachments */}
|
||||
{attachments.length > 0 && (
|
||||
<div className="border rounded-md p-3 mt-4">
|
||||
@ -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 === '<p></p>' || composeBody === '<br>')) {
|
||||
|
||||
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 = `
|
||||
<div><br></div>
|
||||
<div><br></div>
|
||||
<div style="font-weight: 400; color: #555; margin: 20px 0 8px 0; font-size: 13px;">On ${date}, ${sender} wrote:</div>
|
||||
<blockquote style="margin: 0; padding: 10px 0 10px 15px; border-left: 2px solid #ddd; color: #505050; background-color: #f9f9f9; border-radius: 4px;">
|
||||
<div style="font-size: 13px;">
|
||||
${content}
|
||||
</div>
|
||||
</blockquote>
|
||||
`;
|
||||
|
||||
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 = `
|
||||
<div><br></div>
|
||||
<div><br></div>
|
||||
<div style="border-top: 1px solid #ccc; margin-top: 10px; padding-top: 10px;">
|
||||
<div style="font-family: Arial, sans-serif; color: #333;">
|
||||
<div style="margin-bottom: 15px;">
|
||||
<div>---------- Forwarded message ---------</div>
|
||||
<div><b>From:</b> ${fromString}</div>
|
||||
<div><b>Date:</b> ${date}</div>
|
||||
<div><b>Subject:</b> ${composeSubject || ''}</div>
|
||||
<div><b>To:</b> ${toString}</div>
|
||||
</div>
|
||||
<div class="email-original-content">
|
||||
${content}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
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({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Add QuotedEmailContent for replies and forwards */}
|
||||
{(originalEmail || replyTo || forwardFrom) &&
|
||||
(determineType() === 'reply' || determineType() === 'reply-all' || determineType() === 'forward') && (
|
||||
<div className="mt-4">
|
||||
{/* 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 */}
|
||||
<div className="border-t border-gray-200 pt-4 mt-2 text-gray-500 italic">
|
||||
<p>Original message content would appear here</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Attachments */}
|
||||
{attachments.length > 0 && (
|
||||
<div className="border rounded-md p-3 mt-4">
|
||||
|
||||
@ -314,6 +314,38 @@ const RichEmailEditor: React.FC<RichEmailEditorProps> = ({
|
||||
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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user