diff --git a/scruter-nextjs/actions/sendContactUsEmail.tsx b/scruter-nextjs/actions/sendContactUsEmail.tsx new file mode 100644 index 00000000..2855c547 --- /dev/null +++ b/scruter-nextjs/actions/sendContactUsEmail.tsx @@ -0,0 +1,53 @@ +"use server"; + +import transporter from "@/lib/nodemailerConfig"; + +interface EmailOptions { + name: string; + email: string; + subject: string; + message: string; +} + +const sendContactEmail = async ({ name, email, subject, message }: EmailOptions) => { + const mailOptions = { + from: process.env.SMTP_USER, + to: process.env.SMTP_USER, + subject: `New Query on Scruter: ${subject}`, + text: ` + Hello Admin, + + A new query has been raised on Scruter. Here are the details: + + - Name: ${name} + - Email: ${email} + - Subject: ${subject} + + Message: + ${message} + + Please review and respond as necessary. + `, + html: ` +

Hello Admin,

+

A new query has been raised on Scruter. Here are the details:

+ +

Message:
${message.replace(/\n/g, "
")}

+

Please review and respond as necessary.

+ `, + }; + + try { + const info = await transporter.sendMail(mailOptions); + return { success: true, info }; + } catch (error) { + console.error("Error sending email:", error); + throw new Error("Failed to send email"); + } +}; + +export default sendContactEmail; diff --git a/scruter-nextjs/app/(routes)/ContactUs/components/contactUsForm.tsx b/scruter-nextjs/app/(routes)/ContactUs/components/contactUsForm.tsx new file mode 100644 index 00000000..94bf25ce --- /dev/null +++ b/scruter-nextjs/app/(routes)/ContactUs/components/contactUsForm.tsx @@ -0,0 +1,105 @@ +"use client"; + +import sendContactEmail from "@/actions/sendContactUsEmail"; +import { Button } from "@/components/ui/button"; +import { Input } from "@/components/ui/input"; +import { Textarea } from "@/components/ui/textarea"; +import { useState } from "react"; +import toast, { Toaster } from "react-hot-toast"; + +const ContactUsForm = () => { + const [formData, setFormData] = useState({ + name: "", + email: "", + subject: "", + message: "" + }); + + const [loading, setLoading] = useState(false); + + // Handle input changes + const handleChange = (e: React.ChangeEvent) => { + const { name, value } = e.target; + setFormData((prevData) => ({ + ...prevData, + [name]: value + })); + }; + + // Handle form submission + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + + setLoading(true); // Set loading to true when the form is submitted + + try { + await sendContactEmail(formData); + // console.log(response); + toast.success("Your message has been sent successfully!"); // Success message + } catch (error) { + // console.error(error); + toast.error("There was an error sending your message. Please try again."); // Error message + } finally { + setFormData({ + name: "", + email: "", + subject: "", + message: "" + }) + setLoading(false); // Set loading to false after the request completes + } + }; + + return ( +
+ {/* Render the Toaster component */} +

+ Have a question or need assistance? +

+ + + + +