Add contact us email

.env.example

@@ -2,6 +2,6 @@ DATABASE_URL=
 NEXTAUTH_SECRET=""
 EMAIL_PASS= #App password for your email account from which you want to send the email
 EMAIL_USER= #Email address from which you want to send the email
-
+NEXTAUTH_URL=http://localhost:3000
 GOOGLE_CLIENT_ID= #Your Google client ID
 GOOGLE_CLIENT_SECRET= #your Google client secret

package.json

@@ -54,7 +54,7 @@
     "next-themes": "^0.3.0",
     "nextjs-toploader": "^3.7.15",
     "node-forge": "^1.3.1",
-    "nodemailer": "^6.9.14",
+    "nodemailer": "^6.9.16",
     "openai": "^4.51.0",
     "react": "^18",
     "react-dom": "^18",
@@ -78,7 +78,7 @@
     "@types/json5": "^0.0.30",
     "@types/node": "^20.16.11",
     "@types/node-forge": "^1.3.11",
-    "@types/nodemailer": "^6.4.15",
+    "@types/nodemailer": "^6.4.16",
     "@types/prop-types": "^15.7.13",
     "@types/react": "^18",
     "@types/react-dom": "^18",

src/app/(app)/contactus/page.tsx

@@ -16,24 +16,54 @@ const EnhancedFormPage: React.FC = () => {
   const [message, setMessage] = useState<string>("");
   const [submitted, setSubmitted] = useState<boolean>(false);
   const [error, setError] = useState<string>("");
+  const API_URL = process.env.NEXTAUTH_URL || "http://localhost:3000";
 
-  const handleSubmit = (e: React.FormEvent) => {
+
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setError("");
+    setSubmitted(false);
 
     if (!name || !email || !phone || !message) {
-      setError("Please fill in all fields.");
-      return;
+        setError("Please fill in all fields.");
+        return;
     }
 
-    console.log("Form submitted:", { name, email, phone, category, message });
-    setSubmitted(true);
-    setName("");
-    setEmail("");
-    setPhone("");
-    setCategory("General Inquiry");
-    setMessage("");
-  };
+    try {
+        const response = await fetch(`${API_URL}/api/contact-us`, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json"
+            },
+            body: JSON.stringify({
+                name,
+                email,
+                phone,
+                category,
+                message
+            })
+        });
+
+        if (!response.ok) {
+            const errorData = await response.json();
+            setError(errorData.message || "An error occurred. Please try again.");
+            alert(`Error: ${errorData.message || "An error occurred. Please try again."}`);
+            return;
+        }
+        setSubmitted(true);
+        setName("");
+        setEmail("");
+        setPhone("");
+        setCategory("General Inquiry");
+        setMessage("");
+    } catch (error) {
+        // Catch any network errors
+        console.error("Error:", error);
+        setError("Failed to send message. Please try again later.");
+        alert("Failed to send message. Please try again later.");
+    }
+};
+
 
   return (
     <div className="min-h-screen bg-gray-100 dark:bg-black text-gray-900 dark:text-white transition-colors duration-300">
@@ -71,7 +101,7 @@ const EnhancedFormPage: React.FC = () => {
             {/* Right Side: Form */}
             <div className="flex-1 mt-8 sm:mt-0">
               {submitted && (
-                <p className="text-green-500 mb-4">Thank you for your submission!</p>
+                <p className="text-green-500 mb-4">Thank you for your submission. A email is sent to the mail id!</p>
               )}
               {error && <p className="text-red-500 mb-4">{error}</p>}
 

src/app/api/contact-us/route.ts

@@ -0,0 +1,46 @@
+import { NextRequest, NextResponse } from "next/server";
+import nodemailer from "nodemailer";
+
+const adminEmail = process.env.EMAIL_USER; 
+const adminEmailPassword = process.env.EMAIL_PASS; 
+
+const transporter = nodemailer.createTransport({
+  service: "gmail",
+  auth: {
+    user: adminEmail,
+    pass: adminEmailPassword,
+  },
+});
+export async function GET() {
+  return  NextResponse.json({"msg" : "hi there"})
+}
+export async function POST(req: NextRequest, res: NextResponse) {
+
+    const { name, email, phone, category, message } =await req.json();
+
+    if (!name || !email || !phone || !message) {
+      return NextResponse.json({ error: "Please fill in all fields." });
+    }
+
+    const mailOptions = {
+      from: email,
+      to: adminEmail,
+      subject: `Contact Us Submission - ${category}`,
+      text: `
+        Name: ${name}
+        Email: ${email}
+        Phone: ${phone}
+        Category: ${category}
+        Message: ${message}
+      `,
+    };
+
+    try {
+      await transporter.sendMail(mailOptions);
+      return  NextResponse.json({ success: true, message: "Message sent successfully!" });
+    } catch (error) {
+      console.error("Error sending email:", error);
+      return NextResponse.json({ error: "Failed to send the message. Please try again later." });
+    }
+
+}