Email Compose Card

1"use client";
2 
3import {
4	Button,
5	Chip,
6	Input,
7	Modal,
8	ModalBody,
9	ModalContent,
10	ScrollShadow,
11	Textarea,
12} from "@heroui/react";
13import type React from "react";
14import { useEffect, useRef, useState } from "react";
15import { z } from "zod";
16import {
17	Cancel01Icon,
18	HugeiconsIcon,
19	Loading03Icon,
20	Mail01Icon,
21	PencilEdit01Icon,
22	PlusSignIcon,
23	Tick02Icon,
24} from "@/components/icons";
25import { cn } from "@/lib/utils";
26 
27// Email validation schema
28const emailComposeSchema = z.object({
29	to: z
30		.array(z.string().email("Invalid email address"))
31		.min(1, "At least one recipient is required"),
32	subject: z
33		.string()
34		.min(1, "Subject is required")
35		.max(200, "Subject must be under 200 characters"),
36	body: z
37		.string()
38		.min(1, "Email body is required")
39		.max(10000, "Email body must be under 10,000 characters"),
40});
41 
42const emailValidationSchema = z.string().email("Invalid email address");
43 
44export interface EmailData {
45	to: string[];
46	subject: string;
47	body: string;
48	draft_id?: string;
49	thread_id?: string;
50	bcc?: string[];
51	cc?: string[];
52	is_html?: boolean;
53}
54 
55export interface EmailComposeCardProps {
56	emailData: EmailData;
57	onSend?: (data: EmailData) => void;
58	className?: string;
59}
60 
61function RecipientSelectionModal({
62	isOpen,
63	onClose,
64	onConfirm,
65	suggestions,
66	selectedEmails,
67	setSelectedEmails,
68	customEmailInput,
69	setCustomEmailInput,
70	customEmailError,
71	setCustomEmailError,
72	handleAddCustomEmail,
73}: {
74	isOpen: boolean;
75	onClose: () => void;
76	onConfirm: () => void;
77	suggestions: string[];
78	selectedEmails: string[];
79	setSelectedEmails: React.Dispatch<React.SetStateAction<string[]>>;
80	customEmailInput: string;
81	setCustomEmailInput: React.Dispatch<React.SetStateAction<string>>;
82	customEmailError: string;
83	setCustomEmailError: React.Dispatch<React.SetStateAction<string>>;
84	handleAddCustomEmail: () => void;
85}) {
86	const handleSuggestionToggle = (email: string) => {
87		setSelectedEmails((prev) => {
88			if (prev.includes(email)) {
89				// Remove from selected
90				return prev.filter((e) => e !== email);
91			} else {
92				// Add to selected
93				return [...prev, email];
94			}
95		});
96	};
97 
98	const handleCustomEmailKeyPress = (e: React.KeyboardEvent) => {
99		if (e.key === "Enter") {
100			e.preventDefault();
101			handleAddCustomEmail();
102		}
103	};
104 
105	return (
106		<Modal isOpen={isOpen} onOpenChange={onClose} size="sm">
107			<ModalContent>
108				<ModalBody>
109					<div className="pt-2 text-sm font-medium text-zinc-900 dark:text-zinc-100">
110						Email Suggestions
111					</div>
112 
113// … truncated