From ca129d06a6fa763c05c8b6480e88dbd410ee68fe Mon Sep 17 00:00:00 2001 From: haseebzaki-07 Date: Wed, 30 Oct 2024 20:49:24 +0530 Subject: [PATCH] add contact us email --- .env.example | 2 +- package-lock.json | 12 +++---- package.json | 4 +-- src/app/(app)/contactus/page.tsx | 54 +++++++++++++++++++++++++------- src/app/api/contact-us/route.ts | 46 +++++++++++++++++++++++++++ 5 files changed, 97 insertions(+), 21 deletions(-) create mode 100644 src/app/api/contact-us/route.ts diff --git a/.env.example b/.env.example index a5c5285..83b7a58 100644 --- a/.env.example +++ b/.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 \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index c3cec83..3427880 100644 --- a/package-lock.json +++ b/package-lock.json @@ -51,7 +51,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", @@ -75,7 +75,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", @@ -6864,9 +6864,9 @@ } }, "node_modules/nodemailer": { - "version": "6.9.15", - "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-6.9.15.tgz", - "integrity": "sha512-AHf04ySLC6CIfuRtRiEYtGEXgRfa6INgWGluDhnxTZhHSKvrBu7lc1VVchQ0d8nPc4cFaZoPq8vkyNoZr0TpGQ==", + "version": "6.9.16", + "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-6.9.16.tgz", + "integrity": "sha512-psAuZdTIRN08HKVd/E8ObdV6NO7NTBY3KsC30F7M4H1OnmLCUNaS56FpYxyb26zWLSyYF9Ozch9KYHhHegsiOQ==", "engines": { "node": ">=6.0.0" } @@ -9388,4 +9388,4 @@ } } } -} \ No newline at end of file +} diff --git a/package.json b/package.json index 601c549..35d2039 100644 --- a/package.json +++ b/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", diff --git a/src/app/(app)/contactus/page.tsx b/src/app/(app)/contactus/page.tsx index 488049c..0ba6cc1 100644 --- a/src/app/(app)/contactus/page.tsx +++ b/src/app/(app)/contactus/page.tsx @@ -16,24 +16,54 @@ const EnhancedFormPage: React.FC = () => { const [message, setMessage] = useState(""); const [submitted, setSubmitted] = useState(false); const [error, setError] = useState(""); + 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 (
@@ -71,7 +101,7 @@ const EnhancedFormPage: React.FC = () => { {/* Right Side: Form */}
{submitted && ( -

Thank you for your submission!

+

Thank you for your submission. A email is sent to the mail id!

)} {error &&

{error}

} diff --git a/src/app/api/contact-us/route.ts b/src/app/api/contact-us/route.ts new file mode 100644 index 0000000..f1ea073 --- /dev/null +++ b/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." }); + } + +}