function MainComponent() { const [userInput, setUserInput] = React.useState({ name: '', email: '', date: '', location: '', sender: '', senderEmail: '' }); const [selectedTemplate, setSelectedTemplate] = React.useState(null); const [emailContent, setEmailContent] = React.useState(''); const [loading, setLoading] = React.useState(false); const [emailPreview, setEmailPreview] = React.useState(false); const templates = { NEWINSTALL: 'New Installation', ESTSENT: 'Estimate Sent', ESTACC: 'Estimate Accepted', OUTREACH: 'Outreach' }; const templateMessages = { ESTSENT: `

Hello {NAME}!

...

Edible Landscapes Team

`, ESTACC: `

Hello {NAME},

...

Your Edible Landscapes Team

`, NEWINSTALL: `

Hey there!

...

The Edible Landscapes Team

`, OUTREACH: `

Great news!

...

Alex

` }; const handleInputChange = (event)=>{ const { name, value } = event.target; setUserInput((prev)=>({ ...prev, [name]: value })); }; const handleTemplateClick = async (templateKey)=>{ setSelectedTemplate(templateKey); setEmailPreview(false); setLoading(true); const messageContent = generateTemplateMessage(templateKey, userInput); const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'system', content: messageContent } ], system_prompt: `Rewrite this email content for the ${templates[templateKey]} template in an engaging tone.`, max_tokens: 2000 }) }); const data = await response.json(); setLoading(false); if (data && data.status) { setEmailContent(data.result); setEmailPreview(true); } else { setEmailContent('Failed to generate email content.'); } }; const handleEmailSend = async ()=>{ // Placeholder for email sending logic }; const copyToClipboard = ()=>{ navigator.clipboard.writeText(emailContent.replaceAll('
', '\n').replaceAll(/<[^>]+>/g, '')); }; const openGmail = ()=>{ const mailtoLink = `https://mail.google.com/mail/?view=cm&fs=1&to=${userInput.email}&cc=${userInput.senderEmail}&subject=Email From ${encodeURIComponent(userInput.sender)}&body=${encodeURIComponent(emailContent)}`; window.open(mailtoLink, '_blank'); }; const generateTemplateMessage = (templateKey, variables)=>{ return Object.entries(variables).reduce((message, [key, value])=>{ return message.replaceAll(`{${key.toUpperCase()}}`, value); }, templateMessages[templateKey]); }; const templateButtons = Object.entries(templates).map(([key, label])=>/*#__PURE__*/ React.createElement("button", { key: key, className: `border p-2 m-1 ${selectedTemplate === key ? 'bg-blue-200' : 'bg-blue-100'}`, onClick: ()=>handleTemplateClick(key), __source: { fileName: "", lineNumber: 104, columnNumber: 5 }, __self: this }, label)); const emailPreviewSection = emailPreview && /*#__PURE__*/ React.createElement("div", { className: "border p-4 my-4", __source: { fileName: "", lineNumber: 114, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { dangerouslySetInnerHTML: { __html: emailContent }, __source: { fileName: "", lineNumber: 115, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-around mt-4", __source: { fileName: "", lineNumber: 116, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "border p-2 bg-green-200", onClick: copyToClipboard, __source: { fileName: "", lineNumber: 117, columnNumber: 9 }, __self: this }, "Copy Email"), /*#__PURE__*/ React.createElement("button", { className: "border p-2 bg-yellow-200", onClick: openGmail, __source: { fileName: "", lineNumber: 118, columnNumber: 9 }, __self: this }, "Open Gmail"), /*#__PURE__*/ React.createElement("button", { className: "border p-2 bg-red-200", onClick: handleEmailSend, __source: { fileName: "", lineNumber: 119, columnNumber: 9 }, __self: this }, "Send Email"))); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center max-w-xl mx-auto p-4", __source: { fileName: "", lineNumber: 125, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4 w-full grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 126, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "border p-2", placeholder: "Name", name: "name", value: userInput.name, onChange: handleInputChange, __source: { fileName: "", lineNumber: 127, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "border p-2", placeholder: "Email", name: "email", value: userInput.email, onChange: handleInputChange, __source: { fileName: "", lineNumber: 128, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "border p-2", placeholder: "Date", name: "date", value: userInput.date, onChange: handleInputChange, __source: { fileName: "", lineNumber: 129, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "border p-2", placeholder: "Location", name: "location", value: userInput.location, onChange: handleInputChange, __source: { fileName: "", lineNumber: 130, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "border p-2", placeholder: "Sender", name: "sender", value: userInput.sender, onChange: handleInputChange, __source: { fileName: "", lineNumber: 131, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "border p-2", placeholder: "Sender Email", name: "senderEmail", value: userInput.senderEmail, onChange: handleInputChange, __source: { fileName: "", lineNumber: 132, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "my-4", __source: { fileName: "", lineNumber: 134, columnNumber: 7 }, __self: this }, templateButtons), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 135, columnNumber: 7 }, __self: this }, ` @keyframes loading-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } `), loading && /*#__PURE__*/ React.createElement("div", { className: "my-4 animate-spin", __source: { fileName: "", lineNumber: 141, columnNumber: 19 }, __self: this }, "🔄"), emailPreviewSection); }