Email Function for hbcform

client/src/pages/Ranking.tsx

@@ -27,12 +27,12 @@ export default function Ranking() {
     const [formData, setFormData] = useState<FormData[]>([]);
     const [userData, setUserData] = useState<User[]>([]);
     const [sortDescriptor, setSortDescriptor] = useState<SortDescriptor>({
-        column: 'avgBill',
+        column: "avgBill",
-        direction: 'ascending',
+        direction: "ascending",
     });
     const [isEmailModalOpen, setIsEmailModalOpen] = useState(false);
     const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
-    const [selectedUser, setSelectedUser] = useState<{ email: string, name: string }>({ email: '', name: '' });
+    const [selectedUser, setSelectedUser] = useState<{ email: string, name: string }>({ email: "", name: "" });
     const [selectedFormId, setSelectedFormId] = useState<number | null>(null);
 
     useEffect(() => {
@@ -63,9 +63,9 @@ export default function Ranking() {
     const sortFormData = (list: FormData[], descriptor: SortDescriptor) => {
         const { column, direction } = descriptor;
 
-        if (column === 'avgBill') {
+        if (column === "avgBill") {
             return [...list].sort((a, b) =>
-                direction === 'ascending' ? a.avgBill - b.avgBill : b.avgBill - a.avgBill
+                direction === "ascending" ? a.avgBill - b.avgBill : b.avgBill - a.avgBill
             );
         }
 
@@ -74,14 +74,14 @@ export default function Ranking() {
 
     const handleSort = () => {
         const { direction } = sortDescriptor;
-        const newDirection = direction === 'ascending' ? 'descending' : 'ascending';
+        const newDirection = direction === "ascending" ? "descending" : "ascending";
 
-        setSortDescriptor({ column: 'avgBill', direction: newDirection });
+        setSortDescriptor({ column: "avgBill", direction: newDirection });
     };
 
     const renderSortIndicator = () => {
-        if (sortDescriptor.column === 'avgBill') {
+        if (sortDescriptor.column === "avgBill") {
-            return sortDescriptor.direction === 'ascending' ? <span>&uarr;</span> : <span>&darr;</span>;
+            return sortDescriptor.direction === "ascending" ? <span>&uarr;</span> : <span>&darr;</span>;
         }
         return null;
     };
@@ -93,8 +93,8 @@ export default function Ranking() {
         const user = userData.find((user) => user.id === data.userId);
         return {
             ...data,
-            userName: user ? `${user.firstName} ${user.lastName}` : 'Unknown User',
+            userName: user ? `${user.firstName} ${user.lastName}` : "Unknown User",
-            userEmail: user ? user.email : 'Unknown Email',
+            userEmail: user ? user.email : "Unknown Email",
         };
     });
 
@@ -103,17 +103,20 @@ export default function Ranking() {
         setIsEmailModalOpen(true);
     };
 
-    const sendEmail = () => {
+    const sendEmail = async () => {
-        const subject = "Home Bill Contest";
+        try {
-        const body = `Dear ${selectedUser.name},
+            const response = await instance.post(`${config.serverAddress}/hbcform/send-homebill-contest-email`, {
-        \nPlease submit another submission for the home bill contest with correct documents.
+                email: selectedUser.email,
-        \nThank you for your cooperation.
+                name: selectedUser.name,
-        \nYour Sincerely, 
+            });
-        Admin from Ecoconnect.gov`;
+            console.log(response.data.message);
-        window.location.href = `mailto:${selectedUser.email}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
+            setIsEmailModalOpen(false);
-        setIsEmailModalOpen(false);
+        } catch (error) {
+            console.error("Failed to send email:", error);
+        }
     };
 
+
     const handleDeleteClick = (id: number) => {
         setSelectedFormId(id);
         setIsDeleteModalOpen(true);
@@ -143,7 +146,7 @@ export default function Ranking() {
                         <TableColumn>Electrical Bill</TableColumn>
                         <TableColumn>Water Bill</TableColumn>
                         <TableColumn>Total Bill</TableColumn>
-                        <TableColumn>Number of Dependents</TableColumn>
+                        <TableColumn>Dependents</TableColumn>
                         <TableColumn onClick={handleSort}>
                             Average Bill {renderSortIndicator()}
                         </TableColumn>
@@ -169,8 +172,8 @@ export default function Ranking() {
                                     {data.wbPicture && <img src={`${config.serverAddress}/hbcform/wbPicture/${data.id}`} alt="Water Bill" className="w-full" />}
                                 </TableCell>
                                 <TableCell className="flex flex-row">
-                                    <Button isIconOnly variant="light" onClick={() => handleEmailClick(data.userEmail, data.userName)}><EmailIcon /></Button>
+                                    <Button isIconOnly variant="light" className="text-blue-500" onClick={() => handleEmailClick(data.userEmail, data.userName)}><EmailIcon /></Button>
-                                    <Button isIconOnly variant="light" onClick={() => handleDeleteClick(data.id)}><TrashDeleteIcon /></Button>
+                                    <Button isIconOnly variant="light" color="danger" onClick={() => handleDeleteClick(data.id)}><TrashDeleteIcon /></Button>
                                 </TableCell>
                             </TableRow>
                         ))}

server/connections/mailersend.js

@@ -241,3 +241,206 @@ async function sendPasswordResetEmail(email, firstName, resetToken) {
 }
 
 module.exports = { sendPasswordResetEmail };
+
+async function sendThankYouEmail(recipientEmail, firstName) {
+  let dateTimeNow = new Date().toLocaleString();
+  let emailContent = `
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Homebill Contest Participation</title>
+    <style>
+      :root {
+        font-family: "Arial";
+      }
+      a {
+        all: unset;
+      }
+      .m-8 {
+        margin: 2rem;
+      }
+      .mx-auto {
+        margin-left: auto;
+        margin-right: auto;
+      }
+      .my-auto {
+        margin-top: auto;
+        margin-bottom: auto;
+      }
+      .mr-auto {
+        margin-right: auto;
+      }
+      .flex {
+        display: flex;
+      }
+      .h-20 {
+        height: 5rem;
+      }
+      .w-40 {
+        width: 10rem;
+      }
+      .w-44 {
+        width: 11rem;
+      }
+      .w-full {
+        width: 100%;
+      }
+      .w-max {
+        width: max-content;
+      }
+      .flex-row {
+        flex-direction: row;
+      }
+      .flex-col {
+        flex-direction: column;
+      }
+      .justify-center {
+        justify-content: center;
+      }
+      .gap-2 {
+        gap: 0.5rem;
+      }
+      .gap-4 {
+        gap: 1rem;
+      }
+      .rounded-xl {
+        border-radius: 0.75rem;
+      }
+      .rounded-b-xl {
+        border-bottom-right-radius: 0.75rem;
+        border-bottom-left-radius: 0.75rem;
+      }
+      .border-2 {
+        border-width: 2px;
+      }
+      .border-red-200 {
+        border-color: rgb(254 202 202);
+      }
+      .border-red-300 {
+        border-color: rgb(252 165 165);
+      }
+      .bg-red-500 {
+        background-color: rgb(239 68 68);
+      }
+      .bg-white {
+        background-color: rgb(255 255 255);
+      }
+      .p-8 {
+        padding: 2rem;
+      }
+      .px-3 {
+        padding-left: 0.75rem;
+        padding-right: 0.75rem;
+      }
+      .px-4 {
+        padding-left: 1rem;
+        padding-right: 1rem;
+      }
+      .py-2 {
+        padding-top: 0.5rem;
+        padding-bottom: 0.5rem;
+      }
+      .py-3 {
+        padding-top: 0.75rem;
+        padding-bottom: 0.75rem;
+      }
+      .text-3xl {
+        font-size: 1.875rem;
+        line-height: 2.25rem;
+      }
+      .text-sm {
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+      }
+      .font-bold {
+        font-weight: 700;
+      }
+      .text-red-900 {
+        color: rgb(127 29 29);
+      }
+      .text-white {
+        color: rgb(255 255 255);
+      }
+      .opacity-50 {
+        opacity: 0.5;
+      }
+      .shadow-lg {
+        box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+      }
+      .shadow-md {
+        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+      }
+      .\*\:my-auto > * {
+        margin-top: auto;
+        margin-bottom: auto;
+      }
+      .\*\:mr-auto > * {
+        margin-right: auto;
+      }
+      .no-underline {
+        text-decoration-line: none;
+      }
+      .h-3 {
+        height: 1.5rem;
+      }
+    </style>
+  </head>
+  <body style="background-color: white;">
+    <div class="m-8 flex flex-col rounded-xl border-2 border-red-200 shadow-lg">
+      <div class="flex flex-col gap-4 p-8 *:mr-auto">
+        <img src="${ecoconnectEmailLogoUrl}" alt="ecoconnect logo" class="w-44" />
+        <h1 class="text-3xl font-bold text-red-900">
+          Dear ${firstName},
+        </h1>
+        <p>
+          Thank you for participating in the <strong>Home Bill Contest</strong>.<br /><br />
+          We have carefully reviewed your submission and noticed some discrepancies:
+        </p>
+        <ul style="margin-left: 20px; margin-bottom: 16px;">
+          <li>The information provided does not match the attached images.</li>
+          <li>Please ensure all documents are accurate and up-to-date.</li>
+        </ul>
+        <p>
+          To avoid disqualification, we kindly request you to submit a new entry with the correct documents.<br /><br />
+          <strong>Click the button below to access the contest page and resubmit your entry:</strong>
+        </p>
+         <a
+            href="http://localhost:5173/home-bill-contest"
+            class="mt-4 rounded-xl border-2 border-red-300 bg-red-500 px-4 py-3 text-white font-bold shadow-md w-max no-underline"
+            >GO TO HOME BILL CONTEST</a
+          >
+        <p class="text-sm opacity-50">
+          If you have any questions or need assistance, feel free to contact us.
+        </p>
+        <p>
+          Best regards,<br /><span class="font-bold text-red-900"
+            >ecoconnect administrators</span
+          >
+        </p>
+      </div>
+      <div
+        class="flex flex-col justify-center h-20 w-full rounded-b-xl bg-red-500 text-white"
+      >
+        <div class="mx-auto flex w-max flex-row gap-2 *:my-auto">
+          <img
+            src="${ecoconnectEmailLogoUrl}"
+            alt="ecoconnect logo"
+            class="h-3 py-2 px-3 bg-white rounded-xl"
+          />
+          <p>· Connecting neighbourhoods together</p>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+  `;
+  await sendEmail(
+    recipientEmail,
+    "Homebill Contest: Action Required",
+    emailContent
+  );
+}
+
+module.exports = { sendThankYouEmail };

server/routes/hbcform.js

@@ -5,6 +5,7 @@ const { Op } = require("sequelize");
 const yup = require("yup");
 const multer = require("multer");
 const sharp = require("sharp");
+const { sendThankYouEmail } = require("../connections/mailersend");
 
 
 const upload = multer({ storage: multer.memoryStorage() });
@@ -124,4 +125,16 @@ router.delete("/:id", async (req, res) => {
     }
 });
 
+// Endpoint for sending emails related to home bill contest
+router.post('/send-homebill-contest-email', async (req, res) => {
+    const { email, name } = req.body;
+    try {
+        await sendThankYouEmail(email, name);
+        res.status(200).send({ message: "Email sent successfully" });
+    } catch (error) {
+        console.error("Failed to send email:", error);
+        res.status(500).send({ error: "Failed to send email" });
+    }
+});
+
 module.exports = router;