courrier clean 2$
This commit is contained in:
parent
fb0ab72675
commit
773c7759c4
@ -1,429 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import React, { useEffect, useState, useRef } from 'react';
|
|
||||||
import { X, Paperclip, ChevronDown, ChevronUp, SendHorizontal, Loader2 } from 'lucide-react';
|
|
||||||
import { Button } from '@/components/ui/button';
|
|
||||||
import { Input } from '@/components/ui/input';
|
|
||||||
import { Textarea } from '@/components/ui/textarea';
|
|
||||||
import { Label } from '@/components/ui/label';
|
|
||||||
import { sanitizeHtml } from '@/lib/utils/email-formatter';
|
|
||||||
|
|
||||||
// Simple CSS for email styling - leverages our centralized sanitization for text direction
|
|
||||||
const emailStyles = `
|
|
||||||
.email-content {
|
|
||||||
font-family: Arial, sans-serif;
|
|
||||||
}
|
|
||||||
.quoted-content {
|
|
||||||
margin-top: 20px;
|
|
||||||
border-top: 1px solid #e2e2e2;
|
|
||||||
padding-top: 10px;
|
|
||||||
color: #555;
|
|
||||||
}
|
|
||||||
.user-message {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
// Nous simplifions l'interface car nous n'utilisons plus ces props
|
|
||||||
interface EmailObject {
|
|
||||||
id?: string;
|
|
||||||
from?: string;
|
|
||||||
fromName?: string;
|
|
||||||
to?: string;
|
|
||||||
subject?: string;
|
|
||||||
content?: string;
|
|
||||||
html?: string;
|
|
||||||
text?: string;
|
|
||||||
body?: string;
|
|
||||||
date?: string;
|
|
||||||
read?: boolean;
|
|
||||||
starred?: boolean;
|
|
||||||
attachments?: { name: string; url: string }[];
|
|
||||||
folder?: string;
|
|
||||||
cc?: string;
|
|
||||||
bcc?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ComposeEmailProps {
|
|
||||||
showCompose: boolean;
|
|
||||||
setShowCompose: (show: boolean) => void;
|
|
||||||
composeTo: string;
|
|
||||||
setComposeTo: (to: string) => void;
|
|
||||||
composeCc: string;
|
|
||||||
setComposeCc: (cc: string) => void;
|
|
||||||
composeBcc: string;
|
|
||||||
setComposeBcc: (bcc: string) => void;
|
|
||||||
composeSubject: string;
|
|
||||||
setComposeSubject: (subject: string) => void;
|
|
||||||
composeBody: string;
|
|
||||||
setComposeBody: (body: string) => void;
|
|
||||||
showCc: boolean;
|
|
||||||
setShowCc: (show: boolean) => void;
|
|
||||||
showBcc: boolean;
|
|
||||||
setShowBcc: (show: boolean) => void;
|
|
||||||
attachments: any[];
|
|
||||||
setAttachments: (attachments: any[]) => void;
|
|
||||||
handleSend: () => Promise<void>;
|
|
||||||
originalEmail?: {
|
|
||||||
content: string;
|
|
||||||
type: 'reply' | 'reply-all' | 'forward';
|
|
||||||
};
|
|
||||||
onSend: (email: any) => Promise<void>;
|
|
||||||
onCancel: () => void;
|
|
||||||
// Nous laissons ces props pour la rétrocompatibilité mais nous ne les utilisons plus
|
|
||||||
replyTo?: EmailObject | null;
|
|
||||||
forwardFrom?: EmailObject | null;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function ComposeEmail({
|
|
||||||
showCompose,
|
|
||||||
setShowCompose,
|
|
||||||
composeTo,
|
|
||||||
setComposeTo,
|
|
||||||
composeCc,
|
|
||||||
setComposeCc,
|
|
||||||
composeBcc,
|
|
||||||
setComposeBcc,
|
|
||||||
composeSubject,
|
|
||||||
setComposeSubject,
|
|
||||||
composeBody,
|
|
||||||
setComposeBody,
|
|
||||||
showCc,
|
|
||||||
setShowCc,
|
|
||||||
showBcc,
|
|
||||||
setShowBcc,
|
|
||||||
attachments,
|
|
||||||
setAttachments,
|
|
||||||
handleSend,
|
|
||||||
originalEmail,
|
|
||||||
// replyTo et forwardFrom ne sont plus utilisés
|
|
||||||
replyTo,
|
|
||||||
forwardFrom,
|
|
||||||
onSend,
|
|
||||||
onCancel
|
|
||||||
}: ComposeEmailProps) {
|
|
||||||
const [isSending, setIsSending] = useState(false);
|
|
||||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
||||||
const contentEditableRef = useRef<HTMLDivElement>(null);
|
|
||||||
// Si nous avons un contenu préformaté, nous utilisons toujours l'éditeur riche
|
|
||||||
const [useRichEditor, setUseRichEditor] = useState(!!composeBody);
|
|
||||||
const [userMessage, setUserMessage] = useState('');
|
|
||||||
// Nous extrarons la partie de contenu citée du corps de l'email préformaté
|
|
||||||
const [quotedContent, setQuotedContent] = useState('');
|
|
||||||
const [hasStartedTyping, setHasStartedTyping] = useState(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
// Utiliser l'éditeur riche si nous avons du contenu HTML
|
|
||||||
if (composeBody && composeBody.includes('<')) {
|
|
||||||
setUseRichEditor(true);
|
|
||||||
|
|
||||||
// Séparer le contenu de l'utilisateur (vide) et le contenu cité (préformaté)
|
|
||||||
setUserMessage('');
|
|
||||||
setQuotedContent(composeBody);
|
|
||||||
}
|
|
||||||
}, [composeBody]);
|
|
||||||
|
|
||||||
// Nous n'avons plus besoin de ces effets qui initialisaient replyTo et forwardFrom
|
|
||||||
// useEffect(() => {
|
|
||||||
// if (replyTo) {
|
|
||||||
// initializeReplyEmail(replyTo);
|
|
||||||
// }
|
|
||||||
// }, [replyTo, setComposeTo, setComposeSubject, setComposeBody]);
|
|
||||||
//
|
|
||||||
// useEffect(() => {
|
|
||||||
// if (forwardFrom) {
|
|
||||||
// initializeForwardedEmail(forwardFrom);
|
|
||||||
// }
|
|
||||||
// }, [forwardFrom]);
|
|
||||||
|
|
||||||
// Nous n'avons plus besoin de ces fonctions qui initialisaient le contenu
|
|
||||||
// via formatEmailForReply et formatEmailForForward
|
|
||||||
// const initializeForwardedEmail = async (email: any) => {...};
|
|
||||||
// const initializeReplyEmail = async (email: any, replyType: 'reply' | 'replyAll' = 'reply') => {...};
|
|
||||||
|
|
||||||
// Handle file attachment selection
|
|
||||||
const handleFileAttachment = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
if (e.target.files) {
|
|
||||||
const newFiles = Array.from(e.target.files);
|
|
||||||
setAttachments([...attachments, ...newFiles]);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Handle contentEditable input changes
|
|
||||||
const handleUserMessageChange = () => {
|
|
||||||
if (contentEditableRef.current) {
|
|
||||||
let content = contentEditableRef.current.innerHTML;
|
|
||||||
|
|
||||||
// Check if this is the initial state or if the user has actually typed something
|
|
||||||
if (content && content !== '<p>Write your message here...</p>') {
|
|
||||||
setHasStartedTyping(true);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Sanitize the user's message using our centralized sanitizer
|
|
||||||
content = sanitizeHtml(content);
|
|
||||||
setUserMessage(content);
|
|
||||||
|
|
||||||
// Combine user message with quoted content for the full email body
|
|
||||||
const combined = `${content}${quotedContent ? `<div class="quoted-content">${quotedContent}</div>` : ''}`;
|
|
||||||
setComposeBody(combined);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Handle sending email with combined content
|
|
||||||
const handleSendWithCombinedContent = async () => {
|
|
||||||
if (isSending) return;
|
|
||||||
|
|
||||||
try {
|
|
||||||
setIsSending(true);
|
|
||||||
|
|
||||||
// For rich editor, combine user message with quoted content
|
|
||||||
if (useRichEditor) {
|
|
||||||
// Wrap the content with appropriate styling
|
|
||||||
const userContent = userMessage ? `<div class="user-message">${userMessage}</div>` : '';
|
|
||||||
const quotedWithStyles = quotedContent ? `<div class="quoted-content">${quotedContent}</div>` : '';
|
|
||||||
|
|
||||||
// Use our centralized sanitizer to ensure proper direction
|
|
||||||
const combinedContent = sanitizeHtml(`${userContent}${quotedWithStyles}`);
|
|
||||||
|
|
||||||
setComposeBody(combinedContent);
|
|
||||||
|
|
||||||
// Wait for state update to complete
|
|
||||||
await new Promise(resolve => setTimeout(resolve, 0));
|
|
||||||
}
|
|
||||||
|
|
||||||
// Call the provided onSend function
|
|
||||||
await onSend({
|
|
||||||
to: composeTo,
|
|
||||||
cc: composeCc,
|
|
||||||
bcc: composeBcc,
|
|
||||||
subject: composeSubject,
|
|
||||||
body: composeBody,
|
|
||||||
attachments: attachments
|
|
||||||
});
|
|
||||||
|
|
||||||
// Reset the compose state
|
|
||||||
setShowCompose(false);
|
|
||||||
setComposeTo('');
|
|
||||||
setComposeCc('');
|
|
||||||
setComposeBcc('');
|
|
||||||
setComposeSubject('');
|
|
||||||
setComposeBody('');
|
|
||||||
setShowCc(false);
|
|
||||||
setShowBcc(false);
|
|
||||||
setAttachments([]);
|
|
||||||
setUserMessage('');
|
|
||||||
setQuotedContent('');
|
|
||||||
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to send email:', error);
|
|
||||||
} finally {
|
|
||||||
setIsSending(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{/* Compose Email Modal */}
|
|
||||||
{showCompose && (
|
|
||||||
<div className="fixed inset-0 bg-gray-600/30 backdrop-blur-sm z-50 flex items-center justify-center">
|
|
||||||
{/* Add global styles for email direction */}
|
|
||||||
<style dangerouslySetInnerHTML={{ __html: emailStyles }} />
|
|
||||||
|
|
||||||
<div className="w-full max-w-2xl h-[80vh] bg-white rounded-xl shadow-xl flex flex-col mx-4">
|
|
||||||
{/* Modal Header */}
|
|
||||||
<div className="flex items-center justify-between px-6 py-3 border-b border-gray-200">
|
|
||||||
<h3 className="text-lg font-semibold text-gray-900">
|
|
||||||
{composeSubject.startsWith('Re:') ? 'Reply' :
|
|
||||||
composeSubject.startsWith('Fwd:') ? 'Forward' : 'New Message'}
|
|
||||||
</h3>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="icon"
|
|
||||||
className="hover:bg-gray-100 rounded-full"
|
|
||||||
onClick={() => {
|
|
||||||
setShowCompose(false);
|
|
||||||
setComposeTo('');
|
|
||||||
setComposeCc('');
|
|
||||||
setComposeBcc('');
|
|
||||||
setComposeSubject('');
|
|
||||||
setComposeBody('');
|
|
||||||
setShowCc(false);
|
|
||||||
setShowBcc(false);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<X className="h-5 w-5 text-gray-500" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Modal Body */}
|
|
||||||
<div className="flex-1 overflow-y-auto">
|
|
||||||
<div className="p-6 space-y-4">
|
|
||||||
{/* To Field */}
|
|
||||||
<div>
|
|
||||||
<Label htmlFor="to" className="block text-sm font-medium text-gray-700">To</Label>
|
|
||||||
<Input
|
|
||||||
id="to"
|
|
||||||
value={composeTo}
|
|
||||||
onChange={(e) => setComposeTo(e.target.value)}
|
|
||||||
placeholder="recipient@example.com"
|
|
||||||
className="w-full mt-1 bg-white border-gray-300 text-gray-900"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* CC/BCC Toggle Buttons */}
|
|
||||||
<div className="flex items-center gap-4">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="text-blue-600 hover:text-blue-700 text-sm font-medium"
|
|
||||||
onClick={() => setShowCc(!showCc)}
|
|
||||||
>
|
|
||||||
{showCc ? 'Hide Cc' : 'Add Cc'}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="text-blue-600 hover:text-blue-700 text-sm font-medium"
|
|
||||||
onClick={() => setShowBcc(!showBcc)}
|
|
||||||
>
|
|
||||||
{showBcc ? 'Hide Bcc' : 'Add Bcc'}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* CC Field */}
|
|
||||||
{showCc && (
|
|
||||||
<div>
|
|
||||||
<Label htmlFor="cc" className="block text-sm font-medium text-gray-700">Cc</Label>
|
|
||||||
<Input
|
|
||||||
id="cc"
|
|
||||||
value={composeCc}
|
|
||||||
onChange={(e) => setComposeCc(e.target.value)}
|
|
||||||
placeholder="cc@example.com"
|
|
||||||
className="w-full mt-1 bg-white border-gray-300 text-gray-900"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* BCC Field */}
|
|
||||||
{showBcc && (
|
|
||||||
<div>
|
|
||||||
<Label htmlFor="bcc" className="block text-sm font-medium text-gray-700">Bcc</Label>
|
|
||||||
<Input
|
|
||||||
id="bcc"
|
|
||||||
value={composeBcc}
|
|
||||||
onChange={(e) => setComposeBcc(e.target.value)}
|
|
||||||
placeholder="bcc@example.com"
|
|
||||||
className="w-full mt-1 bg-white border-gray-300 text-gray-900"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Subject Field */}
|
|
||||||
<div>
|
|
||||||
<Label htmlFor="subject" className="block text-sm font-medium text-gray-700">Subject</Label>
|
|
||||||
<Input
|
|
||||||
id="subject"
|
|
||||||
value={composeSubject}
|
|
||||||
onChange={(e) => setComposeSubject(e.target.value)}
|
|
||||||
placeholder="Enter subject"
|
|
||||||
className="w-full mt-1 bg-white border-gray-300 text-gray-900"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Message Body - conditionally render either rich editor or textarea */}
|
|
||||||
<div>
|
|
||||||
<Label htmlFor="message" className="block text-sm font-medium text-gray-700">Message</Label>
|
|
||||||
|
|
||||||
{useRichEditor ? (
|
|
||||||
<>
|
|
||||||
<div className="border rounded-md mb-4 overflow-hidden">
|
|
||||||
<div className="flex flex-col h-full">
|
|
||||||
<div
|
|
||||||
className="p-3 prose max-w-none flex-grow min-h-[200px]"
|
|
||||||
ref={contentEditableRef}
|
|
||||||
contentEditable="true"
|
|
||||||
onInput={handleUserMessageChange}
|
|
||||||
onFocus={() => {
|
|
||||||
// Clear 'Write your message here...' when user focuses on the editor
|
|
||||||
if (!hasStartedTyping && contentEditableRef.current) {
|
|
||||||
contentEditableRef.current.innerHTML = '';
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
onBlur={() => {
|
|
||||||
// Restore 'Write your message here...' placeholder if empty
|
|
||||||
if (!hasStartedTyping && contentEditableRef.current && !contentEditableRef.current.innerHTML.trim()) {
|
|
||||||
contentEditableRef.current.innerHTML = '<p>Write your message here...</p>';
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
dangerouslySetInnerHTML={hasStartedTyping ? { __html: userMessage } : { __html: '<p>Write your message here...</p>' }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/* Original email content (quoted part) */}
|
|
||||||
{quotedContent && (
|
|
||||||
<div
|
|
||||||
className="p-3 text-sm email-content quoted-content"
|
|
||||||
dangerouslySetInnerHTML={{ __html: quotedContent }}
|
|
||||||
contentEditable="false"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<Textarea
|
|
||||||
id="message"
|
|
||||||
value={composeBody}
|
|
||||||
onChange={(e) => setComposeBody(e.target.value)}
|
|
||||||
placeholder="Write your message..."
|
|
||||||
className="w-full mt-1 min-h-[200px] bg-white border-gray-300 text-gray-900 resize-none email-editor"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Modal Footer */}
|
|
||||||
<div className="flex items-center justify-between px-6 py-3 border-t border-gray-200 bg-white">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
{/* File Input for Attachments */}
|
|
||||||
<input
|
|
||||||
type="file"
|
|
||||||
id="file-attachment"
|
|
||||||
className="hidden"
|
|
||||||
multiple
|
|
||||||
onChange={handleFileAttachment}
|
|
||||||
/>
|
|
||||||
<label htmlFor="file-attachment">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="icon"
|
|
||||||
className="rounded-full bg-white hover:bg-gray-100 border-gray-300"
|
|
||||||
onClick={(e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
document.getElementById('file-attachment')?.click();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Paperclip className="h-4 w-4 text-gray-600" />
|
|
||||||
</Button>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
className="text-gray-600 hover:text-gray-700 hover:bg-gray-100"
|
|
||||||
onClick={() => setShowCompose(false)}
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
className="bg-blue-600 text-white hover:bg-blue-700"
|
|
||||||
onClick={handleSendWithCombinedContent}
|
|
||||||
disabled={isSending}
|
|
||||||
>
|
|
||||||
{isSending ? 'Sending...' : 'Send'}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue
Block a user