Email Improvements.

client/src/components/email-overlay/email-overlay.component.jsx

@@ -1,68 +1,82 @@
 import { UploadOutlined } from "@ant-design/icons";
-import { Button, Card, Divider, Input, Select, Upload } from "antd";
+import { Card, Divider, Form, Input, Select, Upload } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 
-export default function EmailOverlayComponent({
-  messageOptions,
-  handleConfigChange,
-  handleToChange,
-  handleHtmlChange,
-  handleUpload,
-  handleFileRemove,
-}) {
+export default function EmailOverlayComponent({ form }) {
   const { t } = useTranslation();
   return (
     <div>
-      To:
-      <Select
+      <Form.Item
+        label={t("emails.fields.to")}
         name="to"
-        mode="tags"
-        value={messageOptions.to}
-        //style={{ width: "100%" }}
-        onChange={handleToChange}
-        tokenSeparators={[",", ";"]}
-      />
-      CC:
-      <Select
-        value={messageOptions.cc}
-        mode="tags"
-        onChange={(value) => handleConfigChange("cc", value)}
-        name="cc"
-        tokenSeparators={[",", ";"]}
-      />
-      Subject:
-      <Input
-        value={messageOptions.subject}
-        onChange={(e) => handleConfigChange("subject", e.target.value)}
+        rules={[
+          {
+            required: true,
+            message: t("general.validation.required"),
+          },
+        ]}
+      >
+        <Select mode="tags" tokenSeparators={[",", ";"]} />
+      </Form.Item>
+      <Form.Item label={t("emails.fields.cc")} name="cc">
+        <Select mode="tags" tokenSeparators={[",", ";"]} />
+      </Form.Item>
+      <Form.Item
+        label={t("emails.fields.subject")}
         name="subject"
-      />
-      <Divider>{t("emails.labels.preview")}</Divider>
-      <div
-        style={{
-          padding: "1rem",
+        rules={[
+          {
+            required: true,
+            message: t("general.validation.required"),
+          },
+        ]}
+      >
+        <Input />
+      </Form.Item>
 
-          backgroundColor: "lightgray",
-          borderLeft: "6px solid #2196F3",
+      <Divider>{t("emails.labels.preview")}</Divider>
+      <Form.Item shouldUpdate>
+        {() => {
+          return (
+            <div
+              style={{
+                padding: "1rem",
+
+                backgroundColor: "lightgray",
+                borderLeft: "6px solid #2196F3",
+              }}
+              dangerouslySetInnerHTML={{ __html: form.getFieldValue("html") }}
+            />
+          );
         }}
-        dangerouslySetInnerHTML={{ __html: messageOptions.html }}
-      />
-      <Divider>
-        <Divider>{t("emails.labels.preview")}</Divider>
-      </Divider>
+      </Form.Item>
+
       <Card title={t("emails.labels.attachments")}>
-        <Upload
-          fileList={messageOptions.fileList}
-          beforeUpload={handleUpload}
-          onRemove={handleFileRemove}
-          multiple
-          listType="picture-card"
-          style={{ width: "100%" }}
+        <Form.Item
+          name="fileList"
+          valuePropName="fileList"
+          getValueFromEvent={(e) => {
+            console.log("Upload event:", e);
+
+            if (Array.isArray(e)) {
+              return e;
+            }
+
+            return e && e.fileList;
+          }}
         >
-          <Button>
-            <UploadOutlined /> Upload
-          </Button>
-        </Upload>
+          <Upload.Dragger multiple listType="picture-card">
+            <>
+              <p className="ant-upload-drag-icon">
+                <UploadOutlined />
+              </p>
+              <p className="ant-upload-text">
+                Click or drag files to this area to upload.
+              </p>
+            </>
+          </Upload.Dragger>
+        </Form.Item>
       </Card>
     </div>
   );