Added mail functionality to feedback form

Bitbox-Connect · Nov 6, 2024 · 70f7be8 · 70f7be8
1 parent 2c06785
commit 70f7be8
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 4 deletions.
diff --git a/client/src/component/Footers/Feedback.jsx b/client/src/component/Footers/Feedback.jsx
@@ -38,6 +38,8 @@ function Feedback(props) {
       // Check if the request was successful
       if (response.status === 200) {  // Updated to check response status properly
         toast.success('Feedback Sent Successfully!');
+        e.target.reset();
+        setRating(0);
         setIsSubmitting(false)
       } else {
         toast.error(result.message || 'Error in submission!');

diff --git a/server/.env.sample b/server/.env.sample
@@ -22,4 +22,8 @@ EMAIL_USER = ""
 
 EMAIL_PASS = ""
 GOOGLE_CLIENT_ID = ""
-JWT_SECRET = ""
+JWT_SECRET = ""
+
+EMAIL_ID= 
+PASS_KEY= 
+ADMIN_EMAIL_ID= 
diff --git a/server/Controllers/Feedback.js b/server/Controllers/Feedback.js
@@ -1,4 +1,5 @@
 const FeedbackForm = require('../Models/feedback');
+const { sendMailToAdmin } = require('../sendFeedbackToAdmin');
 
 const submitFeedback = async (req, res) => {
     // Extract data from the request body
@@ -27,6 +28,8 @@ const submitFeedback = async (req, res) => {
         rating: Rating,
     };
 
+    sendMailToAdmin(feedbackData)
+
 
     try {
         const feed = new FeedbackForm(feedbackData);

diff --git a/server/sendFeedbackToAdmin.js b/server/sendFeedbackToAdmin.js
@@ -0,0 +1,80 @@
+const nodemailer = require('nodemailer');
+require("dotenv").config();
+
+const sendMailToAdmin = (userData) => {
+    const transporter = nodemailer.createTransport({
+        service: "gmail",
+        host: "smtp.gmail.com",
+        port: 587,
+        secure: false, // Use `true` for port 465, `false` for other ports
+        auth: {
+            user: process.env.EMAIL_ID, // Your email address
+            pass: process.env.PASS_KEY, // Your email password or app-specific password
+        },
+    });
+
+    async function main() {
+        await transporter.sendMail({
+            from: {
+                name: `Bitbox Feedback - ${new Date().toLocaleString()}`,
+                address: process.env.EMAIL_ID,
+            },
+            to: process.env.ADMIN_EMAIL_ID, // Admin email address
+            subject: "New Feedback Submission from Bitbox ✔", // Email subject
+            text: "Bitbox Feedback Form", // Plain text body
+            html: `<div style="background: #282c34; color: white; padding: 20px; font-family: Arial, sans-serif;">
+                        <h2 style="text-align: center; color: #61dafb;">Bitbox Feedback Form Details</h2>
+                        <table style="width: 100%; max-width: 600px; margin: 20px auto; border-collapse: collapse;">
+                            <tr>
+                                <th style="padding: 10px; background-color: #0076b4; color: white; border: 1px solid #ddd;">Field</th>
+                                <th style="padding: 10px; background-color: #0076b4; color: white; border: 1px solid #ddd;">Value</th>
+                            </tr>
+                            <tr>
+                                <td style="padding: 10px; border: 1px solid #ddd;">Name</td>
+                                <td style="padding: 10px; border: 1px solid #ddd;">${userData.name}</td>
+                            </tr>
+                            <tr>
+                                <td style="padding: 10px; border: 1px solid #ddd;">Email</td>
+                                <td style="padding: 10px; border: 1px solid #ddd;">${userData.email}</td>
+                            </tr>
+                            <tr>
+                                <td style="padding: 10px; border: 1px solid #ddd;">Subject</td>
+                                <td style="padding: 10px; border: 1px solid #ddd;">${userData.subject}</td>
+                            </tr>
+                            <tr>
+                                <td style="padding: 10px; border: 1px solid #ddd;">Date of Visit</td>
+                                <td style="padding: 10px; border: 1px solid #ddd;">${new Date(userData.dateOfVisit).toLocaleString()}</td>
+                            </tr>
+                            <tr>
+                                <td style="padding: 10px; border: 1px solid #ddd;">Device Used</td>
+                                <td style="padding: 10px; border: 1px solid #ddd;">${userData.deviceUsed}</td>
+                            </tr>
+                            <tr>
+                                <td style="padding: 10px; border: 1px solid #ddd;">Priority Level</td>
+                                <td style="padding: 10px; border: 1px solid #ddd;">${userData.priorityLevel}</td>
+                            </tr>
+                            <tr>
+                                <td style="padding: 10px; border: 1px solid #ddd;">Suggestions</td>
+                                <td style="padding: 10px; border: 1px solid #ddd;">${userData.suggestions}</td>
+                            </tr>
+                            <tr>
+                                <td style="padding: 10px; border: 1px solid #ddd;">Feedback</td>
+                                <td style="padding: 10px; border: 1px solid #ddd;">${userData.feedback}</td>
+                            </tr>
+                            <tr>
+                                <td style="padding: 10px; border: 1px solid #ddd;">Rating</td>
+                                <td style="padding: 10px; border: 1px solid #ddd;">${userData.rating}</td>
+                            </tr>
+                            <tr>
+                                <td style="padding: 10px; border: 1px solid #ddd;">Submitted At</td>
+                                <td style="padding: 10px; border: 1px solid #ddd;">${new Date().toLocaleString()}</td>
+                            </tr>
+                        </table>
+                    </div>`, // HTML body content
+        });
+    }
+
+    main().catch(console.error);
+};
+
+module.exports = { sendMailToAdmin };
diff --git a/server/sendMail.js b/server/sendMail.js
@@ -8,8 +8,8 @@ const sendMailToAdmin = (userData) => {
         port: 587,
         secure: false, // Use `true` for port 465, `false` for other ports
         auth: {
-            user: process.env.EMAIL_USER, // Your email address
-            pass: process.env.EMAIL_PASS, // Your email password or app-specific password
+            user: process.env.EMAIL_ID, // Your email address
+            pass: process.env.PASS_KEY, // Your email password or app-specific password
         },
     });
 
@@ -18,7 +18,7 @@ const sendMailToAdmin = (userData) => {
         await transporter.sendMail({
             from: {
                 name: `Bitbox Contact - ${new Date().toLocaleString()}`,
-                address: process.env.EMAIL_USER,
+                address: process.env.EMAIL_ID,
             },
             to: process.env.ADMIN_EMAIL_ID, // Admin email address
             subject: "New Contact Form Submission from Bitbox ✔", // Email subject