IEDCMEC · AchyuthMohan · Dec 30, 2022 · Dec 30, 2022 · Dec 30, 2022
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
     "react": "^17.0.1",
     "react-bootstrap": "^1.4.0",
     "react-dom": "^17.0.1",
+    "react-html-email": "^3.0.0",
     "react-icons": "^4.4.0",
     "react-lottie": "^1.2.3",
     "react-router": "^6.3.0",

diff --git a/src/Components/Animation/Animation.scss b/src/Components/Animation/Animation.scss
@@ -42,6 +42,7 @@
   border: none;
   outline: none;
   position: absolute;
+  cursor: pointer;
   gap: 0.6rem;
   bottom: -20px;
   z-index: 2;

diff --git a/src/Components/ConfirmEmail/ConfirmEmail.js b/src/Components/ConfirmEmail/ConfirmEmail.js
@@ -0,0 +1,62 @@
+function ConfirmEmail({ request,status }) {
+  return (
+    <>
+      <div>
+        <p>
+          Hi {request.sender}
+          {" , "}{" "}
+        </p>
+        <p
+          style={{
+            paddingLeft: "1.5rem",
+          }}
+        >
+          <b>{request.receiver}</b> has{" "}
+          <b>{status === "accepted" && "ACCEPTED"}</b>
+          <b>{status === "declined" && "DECLINED"}</b> your{" "}
+          <b>{request.type === "invite" ? "INVITE" : "REQUEST"}</b> to join
+          their team for the project{"  "}
+          <i>
+            <a
+              href={`https://iedc-collab-frontend.pages.dev/${request.project_id}`}
+              target="_blank"
+              rel="noreferrer"
+            >
+              {request.project}
+            </a>
+          </i>
+        </p>
+        <br />
+        <div>
+          <p>
+            To view more details , Vist{" "}
+            <a
+              href="https://www.iedc-collab-frontend.pages.dev"
+              target="_blank"
+              rel="noreferrer"
+            >
+              https://www.iedc-collab-frontend.pages.dev
+            </a>
+          </p>
+        </div>
+        <br />
+        <p>Thank You</p>
+        <br />
+        <p>Regards</p>
+        <p>IEDC MEC Collab Team</p>
+        <br />
+        <p>
+          NOTE : This is an auto generated email.Please DO NOT REPLY to this
+          mail.
+        </p>
+        <p>
+          <i>
+            For any queries please visit{" "}
+            <a href="https://www.iedcmec.in">https://www.iedcmec.in</a>
+          </i>
+        </p>
+      </div>
+    </>
+  );
+}
+export default ConfirmEmail;
diff --git a/src/Components/Email/Email.js b/src/Components/Email/Email.js
@@ -0,0 +1,84 @@
+function Email({ request }) {
+  return (
+    <>
+      <div>
+        <p>
+          Hi {request.receiver}
+          {" , "}{" "}
+        </p>
+        <p
+          style={{
+            paddingLeft: "1.5rem",
+          }}
+        >
+          <b>{request.sender}</b> has{" "}
+          <b>{request.type === "invite" ? "INVITED" : "REQUESTED"}</b> you to
+          join their team for the project{"  "}
+          <i>
+            <a
+              href={`https://iedc-collab-frontend.pages.dev/${request.project_id}`}
+              target="_blank"
+              rel="noreferrer"
+            >
+              {request.project}
+            </a>
+          </i>
+        </p>
+        <br />
+        <p
+          style={{
+            paddingLeft: "1.5rem",
+          }}
+        >
+          <b>Message : </b>{" "}
+          <p
+            style={{
+              paddingLeft: "1.5rem",
+            }}
+          >
+            {request.message}
+          </p>
+        </p>
+        <p
+          style={{
+            paddingLeft: "1.5rem",
+          }}
+        >
+          {"- "}
+          <b>{request.sender}</b>
+        </p>
+        <br />
+        <div>
+          <p>
+            To view more details and to accept/decline the{" "}
+            {request.type === "invite" ? "invite" : "request"} , Vist{" "}
+            <a
+              href="https://iedc-collab-frontend.pages.dev"
+              target="_blank"
+              rel="noreferrer"
+            >
+              https://iedc-collab-frontend.pages.dev
+            </a>
+          </p>
+        </div>
+        <br />
+        <p>Thank You</p>
+        <br />
+        <p>Regards</p>
+        <p>IEDC MEC Collab Team</p>
+        <br />
+        <p>
+          NOTE : This is an auto generated email.Please DO NOT REPLY to this
+          mail.
+        </p>
+        <p>
+          <i>
+            For any queries please visit{" "}
+            <a href="https://iedcmec.in">https://iedcmec.in</a>
+          </i>
+        </p>
+      </div>
+    </>
+  );
+}
+export default Email;
diff --git a/src/Components/InviteToProjectModal/InviteToProjectModal.js b/src/Components/InviteToProjectModal/InviteToProjectModal.js
@@ -1,4 +1,3 @@
-
 import Button from "react-bootstrap/Button";
 import "./InviteToProjectModal.scss";
 import { emailUrl } from "../../Utils/urls";
@@ -8,7 +7,7 @@ import triangle_3 from "../../assets/triangle_3.svg";
 import triangle_4 from "../../assets/triangle_4.svg";
 import axios from "axios";
 import { useContext, useEffect, useState } from "react";
-import '../JoinTeamModal/JoinTeamModal.scss'
+import "../JoinTeamModal/JoinTeamModal.scss";
 // import {
 //   getProjects,
 // } from "../../Firebase/firebase";
@@ -21,19 +20,24 @@ import {
   MenuItem,
   Select,
   ThemeProvider,
+  useMediaQuery,
 } from "@mui/material";
 import { sendInvite } from "../../Firebase/firebase";
 import { toast } from "react-toastify";
 import { ProjectContext } from "../../contexts/ProjectContext";
 import { RiCloseLine } from "react-icons/ri";
 import { IoPaperPlaneSharp } from "react-icons/io5";
+import { useTheme } from "@emotion/react";
+import Email from "../Email/Email";
+import { renderEmail } from "react-html-email";
 
 const InviteToProjectModal = ({ user, selectedUser, ...props }) => {
   // const [projects, setProjects] = useState([]);
   const [project, setProject] = useState("");
   const { projects, fetchRequests } = useContext(ProjectContext);
   const [listProjects, setListProjects] = useState([]);
   const [message, setMessage] = useState("");
+  const fullScreen = useMediaQuery(useTheme().breakpoints.down("sm"));
   const theme = createTheme({
     components: {
       MuiOutlinedInput: {
@@ -61,20 +65,11 @@ const InviteToProjectModal = ({ user, selectedUser, ...props }) => {
     },
   });
   async function handleSubmit() {
-    try {
-      await axios.post(emailUrl, {
-        toEmail: selectedUser.email,
-        subject: `Invite to ${project.name} from IEDC Collab`,
-        content: message,
-      });
-    } catch (err) {
-      console.log(err);
-    }
-
     let data = {
       sender: user.displayName,
       sender_id: user.uid,
       sender_email: user.email,
+      sender_img: user.photoURL,
       reciever_email: selectedUser.email,
       receiver: selectedUser.name,
       reciever_img:
@@ -91,6 +86,12 @@ const InviteToProjectModal = ({ user, selectedUser, ...props }) => {
       toast("Invite Sent Successfully");
       fetchRequests();
     });
+    await axios.post(emailUrl, {
+      toEmail: selectedUser.email,
+      subject: `Invite to join project ${project.name} from IEDC Collab`,
+      // content: message,
+      content: renderEmail(<Email request={data} />),
+    });
   }
 
   const getWorks = async () => {
@@ -125,13 +126,8 @@ const InviteToProjectModal = ({ user, selectedUser, ...props }) => {
     <Dialog
       onClose={props.handleClose}
       open={props.open}
-      PaperProps={{
-        sx: {
-          width: "95vw",
-          position: "absolute",
-        },
-      }}
       fullWidth={true}
+      fullScreen={fullScreen}
       maxWidth="md"
       className="invite-to-project-modal"
     >
@@ -150,7 +146,6 @@ const InviteToProjectModal = ({ user, selectedUser, ...props }) => {
               <FormControl>
                 <InputLabel
                   id="demo-simple-select-label"
-
                   style={{
                     fontWeight: "400",
                     fontSize: "17px",
@@ -161,11 +156,11 @@ const InviteToProjectModal = ({ user, selectedUser, ...props }) => {
                   Select Project
                 </InputLabel>
                 <Select
-                className="invite-project-name__label"
+                  className="invite-project-name__label"
                   style={{
                     fontWeight: "400",
                     fontSize: "17px",
-                    
+
                     lineHeight: "26px",
                     color: " #622308",
                   }}
@@ -196,7 +191,7 @@ const InviteToProjectModal = ({ user, selectedUser, ...props }) => {
             <p className="message__label">Message</p>
             <textarea
               className="message__text"
-              style={{whiteSpace: "pre-wrap"}}
+              style={{ whiteSpace: "pre-wrap" }}
               onChange={(e) => setMessage(e.target.value)}
             ></textarea>
           </div>

diff --git a/src/Components/InviteToProjectModal/InviteToProjectModal.scss b/src/Components/InviteToProjectModal/InviteToProjectModal.scss
@@ -81,7 +81,7 @@
     padding-inline: 10px;
   }
 
-  #message__text {
+  .message__text {
     border: 1px solid #9e0000;
     border-radius: 10px;
     background-color: inherit;

diff --git a/src/Components/JoinTeamModal/JoinTeamModal.js b/src/Components/JoinTeamModal/JoinTeamModal.js
@@ -10,25 +10,16 @@ import { toast } from "react-toastify";
 import { ProjectContext } from "../../contexts/ProjectContext";
 import { RiCloseLine } from "react-icons/ri";
 import { IoPaperPlaneSharp } from "react-icons/io5";
-import { Dialog, DialogContent } from "@mui/material";
+import { Dialog, DialogContent, useMediaQuery, useTheme } from "@mui/material";
+import { renderEmail } from "react-html-email";
+import Email from "../Email/Email";
 
 const JoinTeamModal = ({ user, project, ...props }) => {
   const [message, setMessage] = useState("");
+  const fullScreen = useMediaQuery(useTheme().breakpoints.down("sm"));
   const { fetchRequests } = useContext(ProjectContext);
 
   const onSubmit = async () => {
-    try {
-      await axios.post(
-        "https://w2e9j471i2.execute-api.ap-south-1.amazonaws.com/dev/send-email",
-        {
-          toEmail: project.leaderEmail,
-          subject: `Request to Join Team of ${project.name} from IEDC Collab`,
-          content: message,
-        }
-      );
-    } catch (err) {
-      console.log(err);
-    }
     let data = {
       sender: user.displayName,
       sender_id: user.uid,
@@ -48,18 +39,25 @@ const JoinTeamModal = ({ user, project, ...props }) => {
       fetchRequests();
       toast("Request Sent Successfully");
     });
+    try {
+      await axios.post(
+        "https://w2e9j471i2.execute-api.ap-south-1.amazonaws.com/dev/send-email",
+        {
+          toEmail: project.leaderEmail,
+          subject: `Request to Join Team of ${project.name} from IEDC Collab`,
+          content: renderEmail(<Email request={data} />),
+        }
+      );
+    } catch (err) {
+      console.log(err);
+    }
   };
   return (
     <>
       <Dialog
         onClose={props.handleClose}
         open={props.open}
-        PaperProps={{
-          sx: {
-            width: "95vw",
-            position: "absolute",
-          },
-        }}
+        fullScreen={fullScreen}
         fullWidth={true}
         maxWidth="md"
         className="join-team-modal"
@@ -105,7 +103,7 @@ const JoinTeamModal = ({ user, project, ...props }) => {
               <p className="message__label">Message</p>
               <textarea
                 className="message__text"
-                style={{whiteSpace: "pre-wrap"}}
+                style={{ whiteSpace: "pre-wrap" }}
                 onChange={(e) => setMessage(e.target.value)}
               ></textarea>
             </div>