courrier clean 2
This commit is contained in:
parent
6bacfa28da
commit
195f8b7115
@ -4,7 +4,8 @@ import { useState, useRef, useEffect } from 'react';
|
|||||||
import { X, Paperclip, ChevronDown, ChevronUp, SendHorizontal, Loader2 } from 'lucide-react';
|
import { X, Paperclip, ChevronDown, ChevronUp, SendHorizontal, Loader2 } from 'lucide-react';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
import { Card, CardContent, CardHeader, CardTitle, CardFooter } from '@/components/ui/card';
|
import { Textarea } from '@/components/ui/textarea';
|
||||||
|
import { Label } from '@/components/ui/label';
|
||||||
import DOMPurify from 'isomorphic-dompurify';
|
import DOMPurify from 'isomorphic-dompurify';
|
||||||
import { formatEmailForReply, formatEmailForForward } from '@/lib/email-formatter';
|
import { formatEmailForReply, formatEmailForForward } from '@/lib/email-formatter';
|
||||||
|
|
||||||
@ -84,17 +85,8 @@ export default function ComposeEmail({
|
|||||||
onCancel
|
onCancel
|
||||||
}: ComposeEmailProps) {
|
}: ComposeEmailProps) {
|
||||||
const [isSending, setIsSending] = useState(false);
|
const [isSending, setIsSending] = useState(false);
|
||||||
const editorRef = useRef<HTMLDivElement>(null);
|
|
||||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||||
const composeBodyRef = useRef<HTMLDivElement>(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (editorRef.current) {
|
|
||||||
editorRef.current.focus();
|
|
||||||
}
|
|
||||||
}, [showCompose]);
|
|
||||||
|
|
||||||
// Initialize content when replying or forwarding
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// Initialize reply if replyTo is provided
|
// Initialize reply if replyTo is provided
|
||||||
if (replyTo) {
|
if (replyTo) {
|
||||||
@ -115,17 +107,15 @@ export default function ComposeEmail({
|
|||||||
});
|
});
|
||||||
|
|
||||||
setComposeBody(bodyContent);
|
setComposeBody(bodyContent);
|
||||||
|
}
|
||||||
// Show CC if needed for reply-all
|
}, [replyTo, setComposeTo, setComposeSubject, setComposeBody]);
|
||||||
if (formattedEmail.cc) {
|
|
||||||
setComposeCc(formattedEmail.cc);
|
useEffect(() => {
|
||||||
setShowCc(true);
|
// Initialize forward email if forwardFrom is provided
|
||||||
}
|
if (forwardFrom) {
|
||||||
} else if (forwardFrom) {
|
|
||||||
// Initialize forward email if forwardFrom is provided
|
|
||||||
initializeForwardedEmail(forwardFrom);
|
initializeForwardedEmail(forwardFrom);
|
||||||
}
|
}
|
||||||
}, [replyTo, forwardFrom]);
|
}, [forwardFrom]);
|
||||||
|
|
||||||
// Initialize forwarded email content
|
// Initialize forwarded email content
|
||||||
const initializeForwardedEmail = async (email: any) => {
|
const initializeForwardedEmail = async (email: any) => {
|
||||||
@ -174,171 +164,177 @@ export default function ComposeEmail({
|
|||||||
`);
|
`);
|
||||||
};
|
};
|
||||||
|
|
||||||
if (!showCompose) return null;
|
// Handle file attachment selection
|
||||||
|
const handleFileAttachment = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
const handleFileSelection = (e: React.ChangeEvent<HTMLInputElement>) => {
|
if (e.target.files) {
|
||||||
if (e.target.files && e.target.files.length > 0) {
|
const newFiles = Array.from(e.target.files);
|
||||||
const newAttachments = Array.from(e.target.files).map(file => ({
|
setAttachments([...attachments, ...newFiles]);
|
||||||
name: file.name,
|
|
||||||
type: file.type,
|
|
||||||
size: file.size,
|
|
||||||
file
|
|
||||||
}));
|
|
||||||
setAttachments([...attachments, ...newAttachments]);
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// Body input area
|
|
||||||
const renderBodyInput = () => (
|
|
||||||
<div
|
|
||||||
className="min-h-[200px] max-h-[400px] overflow-y-auto p-3 bg-white border border-gray-300 rounded-md"
|
|
||||||
contentEditable
|
|
||||||
dangerouslySetInnerHTML={{ __html: composeBody || '' }}
|
|
||||||
onInput={(e) => {
|
|
||||||
const target = e.target as HTMLDivElement;
|
|
||||||
setComposeBody(target.innerHTML);
|
|
||||||
}}
|
|
||||||
ref={composeBodyRef}
|
|
||||||
style={{ direction: 'ltr' }}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card className={`fixed inset-0 z-50 mx-auto my-8 max-w-3xl rounded-md bg-white shadow-lg flex flex-col ${showCompose ? 'block' : 'hidden'}`} style={{ maxHeight: 'calc(100vh - 4rem)' }}>
|
<>
|
||||||
<CardHeader className="bg-white p-4 border-b">
|
{/* Compose Email Modal */}
|
||||||
<div className="flex justify-between items-center">
|
{showCompose && (
|
||||||
<CardTitle className="text-xl font-semibold text-gray-800">{replyTo ? 'Reply' : forwardFrom ? 'Forward' : 'New Message'}</CardTitle>
|
<div className="fixed inset-0 bg-gray-600/30 backdrop-blur-sm z-50 flex items-center justify-center">
|
||||||
<Button variant="ghost" size="icon" onClick={onCancel}>
|
<div className="w-full max-w-2xl h-[80vh] bg-white rounded-xl shadow-xl flex flex-col mx-4">
|
||||||
<X className="h-5 w-5" />
|
{/* Modal Header */}
|
||||||
</Button>
|
<div className="flex items-center justify-between px-6 py-3 border-b border-gray-200">
|
||||||
</div>
|
<h3 className="text-lg font-semibold text-gray-900">
|
||||||
</CardHeader>
|
{composeSubject.startsWith('Re:') ? 'Reply' :
|
||||||
<CardContent className="flex-grow overflow-auto p-4 bg-white">
|
composeSubject.startsWith('Fwd:') ? 'Forward' : 'New Message'}
|
||||||
<div className="space-y-4">
|
</h3>
|
||||||
<div className="flex items-center">
|
<Button
|
||||||
<span className="w-16 text-sm font-medium text-gray-600">To:</span>
|
variant="ghost"
|
||||||
<Input
|
size="icon"
|
||||||
className="flex-1 bg-white"
|
className="hover:bg-gray-100 rounded-full"
|
||||||
value={composeTo}
|
onClick={() => {
|
||||||
onChange={(e) => setComposeTo(e.target.value)}
|
setShowCompose(false);
|
||||||
/>
|
setComposeTo('');
|
||||||
</div>
|
setComposeCc('');
|
||||||
|
setComposeBcc('');
|
||||||
{showCc && (
|
setComposeSubject('');
|
||||||
<div className="flex items-center">
|
setComposeBody('');
|
||||||
<span className="w-16 text-sm font-medium text-gray-600">Cc:</span>
|
setShowCc(false);
|
||||||
<Input
|
setShowBcc(false);
|
||||||
className="flex-1 bg-white"
|
}}
|
||||||
value={composeCc}
|
>
|
||||||
onChange={(e) => setComposeCc(e.target.value)}
|
<X className="h-5 w-5 text-gray-500" />
|
||||||
/>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
|
|
||||||
{showBcc && (
|
{/* Modal Body */}
|
||||||
<div className="flex items-center">
|
<div className="flex-1 overflow-y-auto">
|
||||||
<span className="w-16 text-sm font-medium text-gray-600">Bcc:</span>
|
<div className="p-6 space-y-4">
|
||||||
<Input
|
{/* To Field */}
|
||||||
className="flex-1 bg-white"
|
<div>
|
||||||
value={composeBcc}
|
<Label htmlFor="to" className="block text-sm font-medium text-gray-700">To</Label>
|
||||||
onChange={(e) => setComposeBcc(e.target.value)}
|
<Input
|
||||||
/>
|
id="to"
|
||||||
</div>
|
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>
|
||||||
|
|
||||||
<div className="flex">
|
{/* CC/BCC Toggle Buttons */}
|
||||||
<Button variant="link" onClick={() => setShowCc(!showCc)} className="p-0 h-auto text-sm">
|
<div className="flex items-center gap-4">
|
||||||
{showCc ? (
|
<button
|
||||||
<ChevronUp className="h-4 w-4 mr-1" />
|
type="button"
|
||||||
) : (
|
className="text-blue-600 hover:text-blue-700 text-sm font-medium"
|
||||||
<ChevronDown className="h-4 w-4 mr-1" />
|
onClick={() => setShowCc(!showCc)}
|
||||||
)}
|
>
|
||||||
Cc
|
{showCc ? 'Hide Cc' : 'Add Cc'}
|
||||||
</Button>
|
</button>
|
||||||
<Button variant="link" onClick={() => setShowBcc(!showBcc)} className="p-0 h-auto text-sm ml-4">
|
<button
|
||||||
{showBcc ? (
|
type="button"
|
||||||
<ChevronUp className="h-4 w-4 mr-1" />
|
className="text-blue-600 hover:text-blue-700 text-sm font-medium"
|
||||||
) : (
|
onClick={() => setShowBcc(!showBcc)}
|
||||||
<ChevronDown className="h-4 w-4 mr-1" />
|
>
|
||||||
)}
|
{showBcc ? 'Hide Bcc' : 'Add Bcc'}
|
||||||
Bcc
|
</button>
|
||||||
</Button>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center">
|
{/* CC Field */}
|
||||||
<span className="w-16 text-sm font-medium text-gray-600">Subject:</span>
|
{showCc && (
|
||||||
<Input
|
<div>
|
||||||
className="flex-1 bg-white"
|
<Label htmlFor="cc" className="block text-sm font-medium text-gray-700">Cc</Label>
|
||||||
value={composeSubject}
|
<Input
|
||||||
onChange={(e) => setComposeSubject(e.target.value)}
|
id="cc"
|
||||||
/>
|
value={composeCc}
|
||||||
</div>
|
onChange={(e) => setComposeCc(e.target.value)}
|
||||||
|
placeholder="cc@example.com"
|
||||||
{renderBodyInput()}
|
className="w-full mt-1 bg-white border-gray-300 text-gray-900"
|
||||||
|
/>
|
||||||
{attachments.length > 0 && (
|
|
||||||
<div className="mt-4">
|
|
||||||
<h4 className="text-sm font-medium text-gray-600 mb-2">Attachments:</h4>
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
{attachments.map((file, index) => (
|
|
||||||
<div key={index} className="flex items-center bg-gray-100 rounded-md p-2">
|
|
||||||
<Paperclip className="h-4 w-4 mr-2 text-gray-500" />
|
|
||||||
<span className="text-sm mr-2">{file.name}</span>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="icon"
|
|
||||||
className="h-5 w-5 p-0 hover:bg-gray-200"
|
|
||||||
onClick={() => {
|
|
||||||
const newAttachments = [...attachments];
|
|
||||||
newAttachments.splice(index, 1);
|
|
||||||
setAttachments(newAttachments);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<X className="h-3 w-3" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
</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 */}
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="message" className="block text-sm font-medium text-gray-700">Message</Label>
|
||||||
|
<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"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</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={handleSend}
|
||||||
|
disabled={isSending}
|
||||||
|
>
|
||||||
|
{isSending ? 'Sending...' : 'Send'}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</CardContent>
|
)}
|
||||||
<CardFooter className="flex justify-between p-4 border-t bg-white">
|
</>
|
||||||
<div className="flex gap-2">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => fileInputRef.current?.click()}
|
|
||||||
className="flex items-center gap-1 bg-white"
|
|
||||||
>
|
|
||||||
<Paperclip className="h-4 w-4" />
|
|
||||||
Attach
|
|
||||||
</Button>
|
|
||||||
<input
|
|
||||||
type="file"
|
|
||||||
ref={fileInputRef}
|
|
||||||
className="hidden"
|
|
||||||
onChange={handleFileSelection}
|
|
||||||
multiple
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<Button
|
|
||||||
onClick={handleSend}
|
|
||||||
disabled={isSending || !composeTo.trim()}
|
|
||||||
className="flex items-center gap-2"
|
|
||||||
>
|
|
||||||
{isSending ? (
|
|
||||||
<>
|
|
||||||
<Loader2 className="h-4 w-4 mr-1 animate-spin" />
|
|
||||||
Sending...
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<SendHorizontal className="h-4 w-4 mr-1" />
|
|
||||||
Send
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Button>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue
Block a user