function MainComponent() { const [status, setStatus] = useState(""); const [loading, setLoading] = useState(false); const [responseDetails, setResponseDetails] = useState(null); const [formDisabled, setFormDisabled] = useState(false); const handleSubmit = async (e)=>{ e.preventDefault(); setLoading(true); setFormDisabled(true); setStatus(""); setResponseDetails(null); const formData = new FormData(e.target); const data = Object.fromEntries(formData); const selection = data.status === "accepted" ? 1 : 2; try { const response = await fetch("/api/handle-email", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ selection }) }); if (!response.ok) { throw new Error("Network response was not ok"); } const result = await response.json(); if (result.error) { setStatus(result.error); } else { setStatus(result.message); setResponseDetails(result.details); } } catch (error) { setStatus("Failed to send email. Please try again."); } finally{ setLoading(false); setFormDisabled(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 flex items-center justify-center p-4", __source: { fileName: "", lineNumber: 47, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-8 w-full max-w-md", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto mb-6 text-gray-800", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, "Email Form"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-4", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-roboto text-gray-700 mb-1", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, "Sender Email"), /*#__PURE__*/ React.createElement("input", { type: "email", name: "senderEmail", required: true, className: "w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-roboto text-gray-700 mb-1", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, "Recipient Email"), /*#__PURE__*/ React.createElement("input", { type: "email", name: "recipientEmail", required: true, className: "w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-roboto text-gray-700 mb-2", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, "Status"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 80, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "status", value: "accepted", required: true, className: "mr-2", __source: { fileName: "", lineNumber: 81, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-roboto", __source: { fileName: "", lineNumber: 88, columnNumber: 17 }, __self: this }, "Option 1 (Accepted)")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 90, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "status", value: "rejected", className: "mr-2", __source: { fileName: "", lineNumber: 91, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-roboto", __source: { fileName: "", lineNumber: 97, columnNumber: 17 }, __self: this }, "Option 2 (Rejected)")))), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading || formDisabled, className: "w-full relative bg-blue-500 text-white py-2 rounded-md hover:bg-blue-600 disabled:bg-blue-300", __source: { fileName: "", lineNumber: 102, columnNumber: 11 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("span", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 108, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-circle-notch fa-spin mr-2", __source: { fileName: "", lineNumber: 109, columnNumber: 17 }, __self: this }), "Sending...") : "Submit")), status && /*#__PURE__*/ React.createElement("div", { className: `mt-4 p-3 rounded-md ${status.includes("Failed") || status.includes("error") ? "bg-red-100 text-red-700" : "bg-green-100 text-green-700"}`, __source: { fileName: "", lineNumber: 119, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "flex items-center", __source: { fileName: "", lineNumber: 126, columnNumber: 13 }, __self: this }, status.includes("Failed") || status.includes("error") ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle mr-2", __source: { fileName: "", lineNumber: 128, columnNumber: 17 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: "fas fa-check-circle mr-2", __source: { fileName: "", lineNumber: 130, columnNumber: 17 }, __self: this }), status), responseDetails && /*#__PURE__*/ React.createElement("div", { className: "mt-2 text-sm", __source: { fileName: "", lineNumber: 135, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 136, columnNumber: 17 }, __self: this }, "Subject: ", responseDetails.subject), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 137, columnNumber: 17 }, __self: this }, "Sent at: ", new Date(responseDetails.sentAt).toLocaleString()))))); }