From 77cf18e285f751f65db94eeba6a80805a64e39b1 Mon Sep 17 00:00:00 2001 From: PriyanshuValiya <147643182+PriyanshuValiya@users.noreply.github.com> Date: Fri, 25 Oct 2024 12:52:09 +0530 Subject: [PATCH] add ContactUs Page --- backend/controllers/contactusController.js | 49 ++ backend/index.js | 3 +- backend/routes/contactUsRouter.js | 7 + frontend/src/Pages/ContactUs.jsx | 824 ++++++++++++--------- 4 files changed, 550 insertions(+), 333 deletions(-) create mode 100644 backend/controllers/contactusController.js create mode 100644 backend/routes/contactUsRouter.js diff --git a/backend/controllers/contactusController.js b/backend/controllers/contactusController.js new file mode 100644 index 0000000..4b0c192 --- /dev/null +++ b/backend/controllers/contactusController.js @@ -0,0 +1,49 @@ +import nodemailer from "nodemailer"; +import "dotenv/config"; + +export const createContactUs = async (req, res) => { + const { mail, subject, message } = req.body; + + try { + const transporter = nodemailer.createTransport({ + service: "gmail", + host: "smtp.gmail.com", + port: 587, + secure: false, + auth: { + user: process.env.EMAIL_USER, + pass: process.env.EMAIL_PASS, + }, + tls: { + rejectUnauthorized: false, // Disable strict SSL verification + }, + }); + + const mailOptions = { + from: mail, + to: process.env.EMAIL_USER, + subject: subject, + text: message, + }; + + // Send mail with defined transport object + transporter.sendMail(mailOptions, (error, mailOptions) => { + if (error) { + console.error("Error occurred: " + error.message); + return; + } + }); + + res.status(200).json({ + status: "success", + message: "Your contact request has been successfully received.", + }); + } catch (err) { + console.error(`Error at transport : ${err}`); + res.status(500).json({ + status: "error", + message: + "There was an error sending your message. Please try again later.", + }); + } +}; diff --git a/backend/index.js b/backend/index.js index 3d62fdd..7eb5448 100644 --- a/backend/index.js +++ b/backend/index.js @@ -30,12 +30,13 @@ connectDB(); import authRoutes from "./routes/authRoutes.js"; import stationRoutes from "./routes/stationRoutes.js"; import trainRoutes from "./routes/trainRoutes.js"; +import contactUs from "./routes/contactUsRouter.js"; app.use("/auth", authRoutes); app.use("/api", authRoutes); app.use("/station", stationRoutes); app.use("/train", trainRoutes); - +app.use("/contact", contactUs); app.get("/", (req, res) => { diff --git a/backend/routes/contactUsRouter.js b/backend/routes/contactUsRouter.js new file mode 100644 index 0000000..6cbc0fa --- /dev/null +++ b/backend/routes/contactUsRouter.js @@ -0,0 +1,7 @@ +import express from 'express'; +const router = express.Router(); +import { createContactUs } from "../controllers/contactusController.js"; + +router.post("/contactus", createContactUs); + +export default router; \ No newline at end of file diff --git a/frontend/src/Pages/ContactUs.jsx b/frontend/src/Pages/ContactUs.jsx index a7511e8..6477ea1 100644 --- a/frontend/src/Pages/ContactUs.jsx +++ b/frontend/src/Pages/ContactUs.jsx @@ -1,353 +1,513 @@ // src/components/ContactUs.jsx -import React, { useEffect } from 'react'; +import React, { useEffect, useState } from "react"; import { - FaPhone, - FaEnvelope, - FaMapMarkerAlt, - FaTwitter, - FaFacebook, -} from 'react-icons/fa'; -import { AiOutlineArrowUp,AiOutlineArrowDown } from 'react-icons/ai'; + FaPhone, + FaEnvelope, + FaMapMarkerAlt, + FaTwitter, + FaFacebook, +} from "react-icons/fa"; +import { AiOutlineArrowUp, AiOutlineArrowDown } from "react-icons/ai"; const ContactUs = () => { - // Function to scroll to the top of the page - const scrollToTop = () => { - window.scrollTo({ - top: 0, - behavior: 'smooth', - }); - }; - const scrollToBottom = () => { - window.scrollTo({ - top: 10000, - behavior: 'smooth', - }); - }; - useEffect(() => { - document.title = 'Station Saarthi |ContactUs'; - }, []); + // Function to scroll to the top of the page + const scrollToTop = () => { + window.scrollTo({ + top: 0, + behavior: "smooth", + }); + }; + const scrollToBottom = () => { + window.scrollTo({ + top: 10000, + behavior: "smooth", + }); + }; + useEffect(() => { + document.title = "Station Saarthi |ContactUs"; + }, []); - return ( -
- {/* Header Section */} -
-

Contact Us

-

Indian Railways

-
+ const [formData, setFormData] = useState({ + senderEmail: "", + subject: "", + message: "", + }); - {/* General Information */} -
-
- -

General Information

-
-
-
    -
  • - - - Phone Number: 139 (Railway Enquiry) - -
    • -
  • - - - Email: customercare@indianrailways.gov.in - -
    • -
-
-
+ const [isLoading, setIsLoading] = useState(false); + const [alert, setAlert] = useState(false); + const API_URL = "http://localhost:3000"; - {/* Emergency Services */} -
-
- -

Emergency Services

-
-
-
    -
  • - - - Phone Number: 182 (Security & Emergencies) - -
    • -
  • - - - Phone Number: 138 (Passenger Helpline) - -
    • -
  • - - - Email: emergencyservices@indianrailways.gov.in - -
    • -
-
-
+ const handleChange = (e) => { + const { name, value } = e.target; + setFormData((prevData) => ({ + ...prevData, + [name]: value, + })); + }; - {/* Reservation and Ticketing */} -
-
- -

Reservation and Ticketing

-
-
-
    -
  • - - - Phone Number: 139 (IRCTC Helpline) - -
    • -
  • - - - Email: care@irctc.co.in - -
    • -
  • - Website:{' '} - - IRCTC Website - -
    • -
-
-
+ const handleSubmit = async (e) => { + e.preventDefault(); + setIsLoading(true); + + try { + const response = await fetch(`${API_URL}/contact/contactus`, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + mail: formData.senderEmail, + subject: formData.subject, + message: formData.message, + }), + }); + + if (response.ok) { + setTimeout(() => { + setIsLoading(false); + setAlert(true); + setFormData({ + senderEmail: "", + subject: "", + message: "", + }); + }, 2000); + + setTimeout(() => { + setAlert(false); + }, 4000); + } else { + alert("Something went wrong, please try later!!"); + setIsLoading(false); + } + } catch (err) { + console.error("Mail sending failed: ", err); + alert("Something went wrong, please try later!!"); + setIsLoading(false); + } + }; - {/* Lost & Found */} -
-
- -

Lost & Found

-
-
-
    -
  • - - Phone Number: 139 -
    • -
  • - - - Email: lostandfound@indianrailways.gov.in - -
    • -
-
-
+ return ( +
+ {/* Header Section */} +
+

Contact Us

+

Indian Railways

+
- {/* Grievances and Complaints */} -
-
- -

Grievances and Complaints

-
-
-
    -
  • - - - Phone Number: 139 (Complaint Registration) - -
    • -
  • - - - Email: complaints@indianrailways.gov.in - -
    • -
  • - Online Portal:{' '} - - RailMadad - -
    • -
-
-
+ {/* E-Mail Section */} +
+

+ Send Email +

+
+
+ + +
+
+ + +
+
+ + +
+ - {/* Divisional Railway Manager (DRM) Offices */} -
-
- -

Divisional Railway Manager (DRM) Offices

-
-
-
    -
  • - - - Northern Railway DRM Office: drm.nr@indianrailways.gov.in - -
    • -
  • - - - Western Railway DRM Office: drm.wr@indianrailways.gov.in - -
    • -
  • - - - Southern Railway DRM Office: drm.sr@indianrailways.gov.in - -
    • -
  • - - - Eastern Railway DRM Office: drm.er@indianrailways.gov.in - -
    • -
-
-
+
+ {alert &&

Thank You, We will contact you soon..

} +
+
+
- {/* Railway Police Force (RPF) */} -
-
- -

Railway Police Force (RPF)

-
-
-
    -
  • - - Phone Number: 182 -
    • -
  • - - - Email: rpf@indianrailways.gov.in - -
    • -
-
-
+ {/* General Information */} +
+
+ +

+ General Information +

+
+
+
    +
  • + + + Phone Number: 139 (Railway Enquiry) + +
    • +
  • + + + Email: customercare@indianrailways.gov.in + +
    • +
+
+
- {/* Corporate Office */} -
-
- -

Corporate Office

-
-
-
    -
  • - - - Address: Indian Railways Corporate Office, New Delhi, India - -
    • -
  • - - - Phone Number: +91-11-23389184 - -
    • -
  • - - - Email: corporateaffairs@indianrailways.gov.in - -
    • -
-
-
+ {/* Emergency Services */} +
+
+ +

+ Emergency Services +

+
+
+
    +
  • + + + Phone Number: 182 (Security & Emergencies) + +
    • +
  • + + + Phone Number: 138 (Passenger Helpline) + +
    • +
  • + + + Email: emergencyservices@indianrailways.gov.in + +
    • +
+
+
- {/* Stay Connected */} -
-
- -

Stay Connected

-
-
- -
-
+ {/* Reservation and Ticketing */} +
+
+ +

+ Reservation and Ticketing +

+
+
+
    +
  • + + + Phone Number: 139 (IRCTC Helpline) + +
    • +
  • + + + Email: care@irctc.co.in + +
    • +
  • + Website:{" "} + + IRCTC Website + +
    • +
+
+
- {/* Feedback */} -
-
- -

Feedback

-
-
- -
-
+ {/* Lost & Found */} +
+
+ +

Lost & Found

+
+
+
    +
  • + + + Phone Number: 139 + +
    • +
  • + + + Email: lostandfound@indianrailways.gov.in + +
    • +
+
+
- {/* Back to Top Button */} - - + {/* Grievances and Complaints */} +
+
+ +

+ Grievances and Complaints +

+
+
+
    +
  • + + + Phone Number: 139 (Complaint Registration) + +
    • +
  • + + + Email: complaints@indianrailways.gov.in + +
    • +
  • + Online Portal:{" "} + + RailMadad + +
    • +
+
+
+ + {/* Divisional Railway Manager (DRM) Offices */} +
+
+ +

+ Divisional Railway Manager (DRM) Offices +

+
+
+
    +
  • + + + Northern Railway DRM Office:{" "} + drm.nr@indianrailways.gov.in + +
    • +
  • + + + Western Railway DRM Office:{" "} + drm.wr@indianrailways.gov.in + +
    • +
  • + + + Southern Railway DRM Office:{" "} + drm.sr@indianrailways.gov.in + +
    • +
  • + + + Eastern Railway DRM Office:{" "} + drm.er@indianrailways.gov.in + +
    • +
+
+
+ + {/* Railway Police Force (RPF) */} +
+
+ +

+ Railway Police Force (RPF) +

+
+
+
    +
  • + + + Phone Number: 182 + +
    • +
  • + + + Email: rpf@indianrailways.gov.in + +
    • +
+
+
+ + {/* Corporate Office */} +
+
+ +

+ Corporate Office +

+
+
+
    +
  • + + + Address: Indian Railways Corporate Office, New Delhi, India + +
    • +
  • + + + Phone Number: +91-11-23389184 + +
    • +
  • + + + Email: corporateaffairs@indianrailways.gov.in + +
    • +
- ); +
+ + {/* Stay Connected */} +
+
+ +

+ Stay Connected +

+
+
+ +
+
+ + {/* Feedback */} +
+
+ +

Feedback

+
+
+ +
+
+ + {/* Back to Top Button */} + + +
+ ); }; export default ContactUs;