From 09a019e82d5b98c11a6cd9a60f8618b66f46845e Mon Sep 17 00:00:00 2001
From: Eranga Dharmarathne <115540160+eradharmarathne@users.noreply.github.com>
Date: Mon, 24 Jun 2024 18:03:59 +0530
Subject: [PATCH] add email service to yes page

---
 Frontend/package-lock.json |  16 ++++
 Frontend/package.json      |   1 +
 Frontend/src/Pages/Yes.tsx | 163 ++++++++-----------------------------
 3 files changed, 50 insertions(+), 130 deletions(-)

diff --git a/Frontend/package-lock.json b/Frontend/package-lock.json
index 95fc42b..b3d455a 100644
--- a/Frontend/package-lock.json
+++ b/Frontend/package-lock.json
@@ -20,6 +20,7 @@
         "@types/react-router-dom": "^5.3.3",
         "axios": "^1.5.1",
         "dotenv": "^16.4.5",
+        "emailjs-com": "^3.2.0",
         "express-session": "^1.17.3",
         "framer-motion": "^10.16.4",
         "jwt-decode": "^3.1.2",
@@ -5269,6 +5270,16 @@
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.775.tgz",
       "integrity": "sha512-JpOfl1aNAiZ88wFzjPczTLwYIoPIsij8S9/XQH9lqMpiJOf23kxea68B8wje4f68t4rOIq4Bh+vP4I65njiJBw=="
     },
+    "node_modules/emailjs-com": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/emailjs-com/-/emailjs-com-3.2.0.tgz",
+      "integrity": "sha512-Prbz3E1usiAwGjMNYRv6EsJ5c373cX7/AGnZQwOfrpNJrygQJ15+E9OOq4pU8yC977Z5xMetRfc3WmDX6RcjAA==",
+      "deprecated": "The SDK name changed to @emailjs/browser",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/emittery": {
       "version": "0.13.1",
       "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.13.1.tgz",
@@ -14342,6 +14353,11 @@
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.775.tgz",
       "integrity": "sha512-JpOfl1aNAiZ88wFzjPczTLwYIoPIsij8S9/XQH9lqMpiJOf23kxea68B8wje4f68t4rOIq4Bh+vP4I65njiJBw=="
     },
+    "emailjs-com": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/emailjs-com/-/emailjs-com-3.2.0.tgz",
+      "integrity": "sha512-Prbz3E1usiAwGjMNYRv6EsJ5c373cX7/AGnZQwOfrpNJrygQJ15+E9OOq4pU8yC977Z5xMetRfc3WmDX6RcjAA=="
+    },
     "emittery": {
       "version": "0.13.1",
       "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.13.1.tgz",
diff --git a/Frontend/package.json b/Frontend/package.json
index 4137f97..83c94e5 100644
--- a/Frontend/package.json
+++ b/Frontend/package.json
@@ -24,6 +24,7 @@
     "@types/react-router-dom": "^5.3.3",
     "axios": "^1.5.1",
     "dotenv": "^16.4.5",
+    "emailjs-com": "^3.2.0",
     "express-session": "^1.17.3",
     "framer-motion": "^10.16.4",
     "jwt-decode": "^3.1.2",
diff --git a/Frontend/src/Pages/Yes.tsx b/Frontend/src/Pages/Yes.tsx
index 949987e..25bbd0c 100644
--- a/Frontend/src/Pages/Yes.tsx
+++ b/Frontend/src/Pages/Yes.tsx
@@ -1,54 +1,52 @@
 import React from "react";
 import Header from "../components/Header";
-import { Input, Button, FormControl, FormLabel } from "@chakra-ui/react";
-import { Text, Grid, GridItem, Box } from "@chakra-ui/react";
+import { Input, Button, FormControl, Text, Grid, GridItem, Box } from "@chakra-ui/react";
 import FooterSection from "../components/FooterSection";
-import axios from "axios";
+import emailjs from 'emailjs-com';
 import { useNavigate } from "react-router-dom";
 
 const gridBackgrougndColor = "#F5F5F5";
-// const inputFieldTextColor = "black";
 const labelColor = "black";
 
 const Yes = () => {
-  //2013.11.26 start
   const [billSettle, setBillSettle] = React.useState("");
   const [reportSubmit, setReportSubmit] = React.useState("");
   const [isLoading, setIsLoading] = React.useState(false);
 
   const navigate = useNavigate();
 
+  const sendEmail = (templateParams) => {
+    emailjs.send('service_t7usi6m', 'template_ojlf31n', templateParams, 'oju11hQbtondf0x7i')
+      .then((response) => {
+        console.log('SUCCESS!', response.status, response.text);
+        alert('Email sent successfully!');
+      }, (error) => {
+        console.error('FAILED...', error);
+        alert('Failed to send email.');
+      });
+  };
+
   const onSubmitClick = () => {
-    if (reportSubmit == "" || billSettle == "") {
-      alert("Select all required fields !");
+    if (reportSubmit === "" || billSettle === "") {
+      alert("Select all required fields!");
     } else {
       setIsLoading(true);
-      const obj = {
-        id: "652ffd472fd82b9a09fd96e9",
-        billSettle: billSettle,
-        reportSubmit: reportSubmit,
+      const templateParams = {
+        to_name: "Student Name", // Replace with dynamic student name
+        from_name: "Eranga", // Replace with your name or sender's name
+        message: `Your project "Secure Network Infrastructure Enhancement Project" has been approved. The bills are to be settled by ${billSettle} and the report is to be submitted by ${reportSubmit}.`
       };
-      axios
-        .post("http://localhost:5000/approved", obj)
-        .then((res) => {
-          setIsLoading(false);
-          if (res.status == 200) {
-            navigate("/admin");
-          }
-        })
-        .catch((error) => {
-          setIsLoading(false);
-          alert(error);
-        });
+      sendEmail(templateParams);
+      setIsLoading(false);
+      navigate("/admin");
     }
     console.log("reportSubmit ", reportSubmit);
     console.log("billSettle ", billSettle);
   };
-  //2013.11.26 end
 
   return (
     <>
-      <Header></Header>
+      <Header />
 
       {isLoading ? (
         <Text
@@ -56,7 +54,7 @@ const Yes = () => {
           fontWeight={"bold"}
           color={"grey"}
         >
-          Submiting please wait ......
+          Submitting, please wait...
         </Text>
       ) : (
         <>
@@ -97,13 +95,6 @@ const Yes = () => {
               marginBottom={5}
             >
               <GridItem area={"input"}>
-                {/* <Input
-              margin={{ base: "0% 0% 1%", md: "0% 0% 3%" }}
-              width={{ base: "80%", md: "85%", lg: "90%" }}
-              variant="outline" 
-              borderColor="black" 
-              placeholder="Yes / No" 
-            /> */}
                 <Input
                   disabled
                   margin={{ base: "0% 0% 1%", md: "0% 0% 3%" }}
@@ -112,89 +103,20 @@ const Yes = () => {
                   borderColor="black"
                   placeholder="Yes"
                   color="grey"
-                  value="Yes" // Set the initial value to "Yes"
-                  readOnly // Make the input read-only
+                  value="Yes"
+                  readOnly
                 />
               </GridItem>
             </Grid>
 
-            {/* <GridItem area={"dates"}> */}
-            {/* <GridItem area={"title"} colSpan={1}>
-            <Text
-              fontWeight="bold"
-              marginTop={2}
-              whiteSpace={"nowrap"}
-              color={labelColor}
-            >
-              Fund offering date
-            </Text>
-          </GridItem>
-          <GridItem
-            area={"answer"}
-            bg={gridBackgrougndColor}
-            borderRadius={7}
-            colSpan={1}
-            paddingX={{ base: "20px", md: "5%" }}
-            paddingY={{ base: "10px", md: "2%", lg: "3%"}}
-            margin={{base: "10%", md: "2%"}}
-          >
-            <FormControl>
-             {/* <FormLabel>Project fund giving date</FormLabel> */}
-            {/* <Input
-                margin={{ base: "0% 0% 1%", md: "0% 0% 3%" }}
-                width={{ base: "80%", md: "85%", lg: "90%" }}
-                variant="outline"
-                borderColor="black"
-                type="date" // Use the 'date' type for date input
-                placeholder="Select date"
-              />
-            </FormControl>
-          </GridItem>
-          <GridItem area={"title"} colSpan={1}>
-            <Text
-              fontWeight="bold"
-              marginTop={2}
-              whiteSpace={"nowrap"}
-              color={labelColor}
-            >
-              Fund offering date
-            </Text>
-          </GridItem>
-          <GridItem
-            area={"answer"}
-            bg={gridBackgrougndColor}
-            borderRadius={7}
-            colSpan={1}
-            paddingX={{ base: "20px", md: "5%" }}
-            paddingY={{ base: "10px", md: "2%", lg: "3%"}}
-            margin={{base: "10%", md: "2%"}}
-          >
-            <FormControl>
-             {/* <FormLabel>Project fund giving date</FormLabel> */}
-            {/* <Input
-                margin={{ base: "0% 0% 1%", md: "0% 0% 3%" }}
-                width={{ base: "80%", md: "85%", lg: "90%" }}
-                variant="outline"
-                borderColor="black"
-                type="date" // Use the 'date' type for date input
-                placeholder="Select date" */}
-            {/* /> */}
-            {/* </FormControl>
-          </GridItem> */}
-
-            {/* <GridItem area={"input2"}> */}
-
             <Grid
               paddingX={{ base: "20px", md: "10%" }}
               paddingY={{ base: "20px", md: "2%" }}
               bg={gridBackgrougndColor}
               borderRadius={"20px"}
               templateAreas={{
-                base: `"title"
-            "inputArea"`,
-
-                md: `"title" 
-            "inputArea"`,
+                base: `"title" "inputArea"`,
+                md: `"title" "inputArea"`,
               }}
               gridTemplateColumns={{ md: "0.6fr 1.4fr" }}
               gap={3}
@@ -212,13 +134,12 @@ const Yes = () => {
               </GridItem>
               <GridItem area={"inputArea"}>
                 <FormControl>
-                  {/* <FormLabel>Project fund giving date</FormLabel> */}
                   <Input
                     margin={{ base: "0% 0% 1%", md: "0% 0% 3%" }}
                     width={{ base: "80%", md: "85%", lg: "90%" }}
                     variant="outline"
                     borderColor="black"
-                    type="date" // Use the 'date' type for date input
+                    type="date"
                     placeholder="Select date"
                     value={billSettle}
                     onChange={(e) => {
@@ -235,11 +156,8 @@ const Yes = () => {
               bg={gridBackgrougndColor}
               borderRadius={"20px"}
               templateAreas={{
-                base: `"title"
-            "inputArea"`,
-
-                md: `"title" 
-            "inputArea"`,
+                base: `"title" "inputArea"`,
+                md: `"title" "inputArea"`,
               }}
               gridTemplateColumns={{ md: "0.6fr 1.4fr" }}
               gap={3}
@@ -252,18 +170,17 @@ const Yes = () => {
                   color={labelColor}
                   fontWeight={"bold"}
                 >
-                  The date on which the report to be submitted:
+                  The date on which the report is to be submitted:
                 </Text>
               </GridItem>
               <GridItem area={"inputArea"}>
                 <FormControl>
-                  {/* <FormLabel>Project fund giving date</FormLabel> */}
                   <Input
                     margin={{ base: "0% 0% 1%", md: "0% 0% 3%" }}
                     width={{ base: "80%", md: "85%", lg: "90%" }}
                     variant="outline"
                     borderColor="black"
-                    type="date" // Use the 'date' type for date input
+                    type="date"
                     placeholder="Select date"
                     value={reportSubmit}
                     onChange={(e) => {
@@ -274,18 +191,6 @@ const Yes = () => {
               </GridItem>
             </Grid>
 
-            {/* </GridItem> */}
-            {/* <Text
-              fontSize={"smaller"}
-              margin={{ base: "5% 0% 0%", md: "3% 0% 0%" }}
-              color={"#757070"}
-            >
-              Provide your decision by typing Yes / No
-            </Text> */}
-
-            {/* </GridItem> */}
-
-            {/* <GridItem area={"button1"}> */}
             <Button
               onClick={onSubmitClick}
               marginTop={"2%"}
@@ -299,8 +204,6 @@ const Yes = () => {
             >
               SUBMIT
             </Button>
-            {/* </GridItem> */}
-            {/* </Grid> */}
           </Box>
         </>
       )}