130 lines
3.2 KiB
TypeScript
130 lines
3.2 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import EmailContentDisplay from '@/components/email/EmailContentDisplay';
|
|
import { formatEmailDate } from '@/lib/utils/email-utils';
|
|
import { EmailContent } from '@/types/email';
|
|
|
|
interface QuotedEmailContentProps {
|
|
content: EmailContent | string;
|
|
sender: {
|
|
name?: string;
|
|
email: string;
|
|
};
|
|
date: Date | string;
|
|
subject?: string;
|
|
recipients?: string;
|
|
type: 'reply' | 'forward';
|
|
className?: string;
|
|
}
|
|
|
|
/**
|
|
* Component for displaying properly formatted quoted email content in replies and forwards
|
|
*/
|
|
const QuotedEmailContent: React.FC<QuotedEmailContentProps> = ({
|
|
content,
|
|
sender,
|
|
date,
|
|
subject,
|
|
recipients,
|
|
type,
|
|
className = ''
|
|
}) => {
|
|
// Format sender info
|
|
const senderName = sender.name || sender.email;
|
|
const formattedDate = formatEmailDate(date);
|
|
|
|
// Create header based on type
|
|
const renderQuoteHeader = () => {
|
|
if (type === 'reply') {
|
|
return (
|
|
<div className="quote-header">
|
|
On {formattedDate}, {senderName} wrote:
|
|
</div>
|
|
);
|
|
} else {
|
|
return (
|
|
<div className="forward-header">
|
|
<div>---------- Forwarded message ---------</div>
|
|
<div><b>From:</b> {senderName} <{sender.email}></div>
|
|
<div><b>Date:</b> {formattedDate}</div>
|
|
<div><b>Subject:</b> {subject || '(No subject)'}</div>
|
|
<div><b>To:</b> {recipients || 'Undisclosed recipients'}</div>
|
|
</div>
|
|
);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className={`quoted-email-container ${className}`}>
|
|
{renderQuoteHeader()}
|
|
<div className="quoted-content">
|
|
<EmailContentDisplay
|
|
content={content}
|
|
type="auto"
|
|
className="quoted-email-body"
|
|
showQuotedText={true}
|
|
/>
|
|
</div>
|
|
|
|
<style jsx>{`
|
|
.quoted-email-container {
|
|
margin-top: 20px;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
|
|
}
|
|
|
|
.quote-header {
|
|
color: #555;
|
|
font-size: 13px;
|
|
margin: 10px 0;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.forward-header {
|
|
color: #555;
|
|
font-size: 13px;
|
|
margin-bottom: 15px;
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
|
|
.forward-header div {
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.quoted-content {
|
|
border-left: 2px solid #ddd;
|
|
padding: 0 0 0 15px;
|
|
margin: 10px 0;
|
|
color: #505050;
|
|
}
|
|
|
|
:global(.quoted-email-body) {
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
:global(.quoted-email-body table) {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
:global(.quoted-email-body th),
|
|
:global(.quoted-email-body td) {
|
|
padding: 0.5rem;
|
|
vertical-align: top;
|
|
border: 1px solid #dee2e6;
|
|
}
|
|
|
|
:global(.quoted-email-body th) {
|
|
font-weight: 600;
|
|
text-align: left;
|
|
background-color: #f8f9fa;
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default QuotedEmailContent;
|