Integrated email to users

Author: Vansh-Baghel

package-lock.json

@@ -17,6 +17,7 @@
     "@mui/material": "^5.11.15",
     "@mui/x-data-grid": "^6.0.4",
     "@mui/x-date-pickers": "^6.0.4",
+    "@sendgrid/mail": "^7.7.0",
     "aos": "^2.3.4",
     "axios": "^1.3.5",
     "cheerio": "^1.0.0-rc.12",

package.json

@@ -0,0 +1,10 @@
+const mongoose = require("mongoose");
+
+const emailSchema = new mongoose.Schema({
+  emails: String,
+  stringMsg: String,
+});
+
+const Email = mongoose.model("Email", emailSchema);
+
+module.exports = Email;

server/models/EmailSchema.js

@@ -1,7 +1,8 @@
-const express = require('express');
+const express = require("express");
 const router = express.Router();
 
-const { sendOTP, verifyOTP } = require("../services/smsAPI");
+const { sendOTP, verifyOTP, sendMail } = require("../services/smsAPI");
+const Email = require("../models/EmailSchema");
 
 // OTP routes
 router.post("/apis/sendOTP", (req, res) => {
@@ -16,11 +17,11 @@ router.post("/apis/sendOTP", (req, res) => {
       data,
     });
 
-    sendOTP(phone)
+  sendOTP(phone)
     .then(() => {
-        res.status(200).send({
-            message: `OTP sent to ${phone}`
-        })
+      res.status(200).send({
+        message: `OTP sent to ${phone}`,
+      });
     })
     .catch((err) => {
       console.log(err);
@@ -33,6 +34,9 @@ router.post("/apis/sendOTP", (req, res) => {
     });
 });
 
+// sendGrid router
+router.post("/apis/sendEmail", sendMail);
+
 // Verify Endpoint
 router.post("/apis/verifyOTP", (req, res) => {
   const phone = `+91${req.body.phone}`;
@@ -75,5 +79,4 @@ router.post("/apis/verifyOTP", (req, res) => {
     });
 });
 
-
-module.exports = router;
+module.exports = router;

server/routes/sms.js

@@ -0,0 +1,19 @@
+const sgMail = require("@sendgrid/mail");
+sgMail.setApiKey(process.env.SENDGRID_API_KEY);
+
+const msg = {
+  to: "[email protected]", // Change to your recipient
+  from: "[email protected]", // Change to your verified sender
+  subject: "Sending with SendGrid is Fun",
+  text: "and easy to do anywhere, even with Node.js",
+  html: "<strong>and easy to do anywhere, even with Node.js</strong>",
+};
+
+sgMail
+  .send(msg)
+  .then(() => {
+    console.log("Email sent");
+  })
+  .catch((error) => {
+    console.error(error);
+  });

server/services/sendEmail.js

@@ -1,52 +1,64 @@
 const TWILIO_ACCOUNT_SID = process.env.TWILIO_ACCOUNT_SID;
 const AUTH_TOKEN = process.env.AUTH_TOKEN;
 const SERVICE_ID = process.env.SERVICE_ID;
-const sgMail = require('@sendgrid/mail')
-sgMail.setApiKey(process.env.SENDGRID_API_KEY)
+const sgMail = require("@sendgrid/mail");
+const Email = require("../models/EmailSchema");
 
+sgMail.setApiKey(process.env.SENDGRID_API_KEY);
 
 console.log("Twilio params", {
-    TWILIO_ACCOUNT_SID,
-    AUTH_TOKEN,
-    SERVICE_ID
+  TWILIO_ACCOUNT_SID,
+  AUTH_TOKEN,
+  SERVICE_ID,
 });
 
-const twilioClient = require('twilio')(TWILIO_ACCOUNT_SID, AUTH_TOKEN);
+const twilioClient = require("twilio")(TWILIO_ACCOUNT_SID, AUTH_TOKEN);
 
 exports.sendOTP = (phone) => {
-    return new Promise((resolve, reject) => {
-        twilioClient.verify.v2.services(SERVICE_ID)
-            .verifications
-            .create({to: phone, channel: 'sms'})
-            .then(resolve)
-            .catch(reject)
-    })
-}
+  return new Promise((resolve, reject) => {
+    twilioClient.verify.v2
+      .services(SERVICE_ID)
+      .verifications.create({ to: phone, channel: "sms" })
+      .then(resolve)
+      .catch(reject);
+  });
+};
 
 exports.verifyOTP = (phone, code) => {
-    return new Promise((resolve, reject) => {
-        twilioClient.verify.v2.services(SERVICE_ID)
-        .verificationChecks
-        .create({to: phone, code: code})
-        .then(resolve)
-        .catch(reject);
-    })
-}
-
-exports.sendMail = () => {
+  return new Promise((resolve, reject) => {
+    twilioClient.verify.v2
+      .services(SERVICE_ID)
+      .verificationChecks.create({ to: phone, code: code })
+      .then(resolve)
+      .catch(reject);
+  });
+};
+
+// Email through sendGrid
+exports.sendMail = async (req, res) => {
+  const ownerEmails = await Email.create({ emails: req.body.emails , stringMsg : req.body.stringMsg});
+
+  try {
     const msg = {
-        to: '[email protected]', // Change to your recipient
-        from: '[email protected]', // Change to your verified sender
-        subject: 'Sending with SendGrid is Fun',
-        text: 'and easy to do anywhere, even with Node.js',
-        html: '<strong>and easy to do anywhere, even with Node.js</strong>',
-    }
-    sgMail
-    .send(msg)
-    .then(() => {
-        console.log('Email sent')
-    })
-    .catch((error) => {
-        console.error(error)
-    })
-}
+      personalizations: [
+    {
+      "to": [
+        {
+          "email": ownerEmails.emails
+        }
+      ]}],
+      from: "[email protected]", // Change to your verified sender
+      subject: "Message from user to owners",
+      text: ownerEmails.stringMsg,
+    };
+
+    await sgMail.send(msg).then(() => {
+      console.log("Email sent");
+      return res
+        .status(200)
+        .json({ statusMessage: "Message sent!!", emails: ownerEmails.emails , text: ownerEmails.stringMsg });
+    });
+  } catch {
+    return res.json({ statusMessage: "Message not sent!!", emails: ownerEmails.emails });
+  }
+};

server/services/smsAPI.js

@@ -1,7 +1,8 @@
 import { Button } from 'flowbite-react';
 import { useState } from 'react';
+import axios from 'axios'
 
-const TagList = () => {
+const TagList = ({emailMsg}) => {
   const [tags, setTags] = useState([]);
   const [inputValue, setInputValue] = useState('');
 
@@ -13,6 +14,7 @@ const TagList = () => {
     if (e.key === 'Enter' && inputValue !== '') {
       setTags([...tags, inputValue]);
       setInputValue('');
+      console.log(tags);
     } else if (e.key === 'Backspace' && inputValue === '') {
       setTags(tags.slice(0, -1));
     }
@@ -22,9 +24,16 @@ const TagList = () => {
     setTags(tags.filter((_, index) => index !== tagIndex));
   };
 
+  const sendUrl = () => {
+    for (let i = 0; i < tags.length; i++){
+      axios.post('http://localhost:5001/apis/sendEmail', {emails: tags[i] , stringMsg: emailMsg }).then((resp) => {
+        console.log(resp.data);
+      })
+    }
+  }
+
   return (
     <div className="flex flex-col gap-2 w-[100%] px-[30px]">
-      
       <div className='flex flex-row gap-x-[10px] items-center py-[10px]'>
         <input
           type="text"
@@ -34,7 +43,7 @@ const TagList = () => {
           placeholder='Enter the input tag'
           className="block rounded-md text-gray-900 border-[1px] border-[#DCE3EE] dark:border-[#232830] flex-grow"
         />
-        <Button className='ml-auto'>Share</Button>
+        <Button className='ml-auto' onClick={() => sendUrl()}>Share</Button>
       </div>
 
       <div className='w-full h-auto flex flex-col flex-grow gap-y-[10px] pb-[20px]'>

src/components/TagList.jsx

@@ -5,7 +5,9 @@ import React from 'react'
 
 const ByLink = () => {
   const { profile } = useAuth()
-  console.log(profile)
+  const gstinNum = profile !== null && profile.gstin;
+  const emailMsg = `https://localhost:3000/verifyByLink/${gstinNum}`;
+  
   return (
     <div className='w-[70%] dark:text-white dark:bg-dark2 text-dark3'>
         <div className='flex flex-col justify-center text-[26px] font-medium h-[80px] pl-[40px] border-b-[1px] dark:border-[#232830] border-[#DCE3EE]'>
@@ -20,7 +22,7 @@ const ByLink = () => {
             </svg>
           </div>
           <div className='flex flex-row items-center text-[16px] font-medium px-[20px] text-[#090D11] dark:text-[#D9D9D9]'>
-            https://localhost:3000/verifyByLink/{profile.gstin}
+            https://localhost:3000/verifyByLink/{gstinNum}
           </div>
           <Button className='ml-auto mr-[25px]'>
             Copy Link
@@ -33,7 +35,7 @@ const ByLink = () => {
             <div className='text-[12px]'>enter your friends' email address to send them link</div>
           </div>
           <div className='overflow-scroll'>
-            <TagList/>
+            <TagList emailMsg={emailMsg}/>
           </div>
         </div>
     </div>