Email is sent on successful reservation

backend/config/nodemailer.js

@@ -0,0 +1,45 @@
+require("dotenv").config();
+const nodemailer = require("nodemailer");
+
+// Create a Nodemailer transporter using SMTP
+const transporter = nodemailer.createTransport({
+  service: "gmail", // or your preferred email service
+  auth: {
+    user: process.env.EMAIL_USER,
+    pass: process.env.EMAIL_PASS,
+  },
+});
+
+// Function to send reservation confirmation via email
+exports.sendReservationConfirmation = async (email, reservationDetails) => {
+  const { reservationDate, guests, time } = reservationDetails;
+
+  // Construct the email content
+  const emailText = `
+    Dear Customer,
+
+    We are pleased to confirm your reservation. Here are the details of your reservation:
+
+    Reservation Date: ${reservationDate}
+    Number of Guests: ${guests}
+    Reservation Time: ${time}
+
+    Thank you for choosing our service. We look forward to hosting you.
+
+    Best regards,
+    PlayCafe
+  `;
+
+  try {
+    await transporter.sendMail({
+      from: process.env.EMAIL_USER,
+      to: email,
+      subject: "Reservation Confirmation",
+      text: emailText,
+    });
+    console.log("Reservation confirmation sent successfully via email");
+  } catch (error) {
+    console.error("Error sending reservation confirmation email:", error);
+    throw new Error("Failed to send reservation confirmation email");
+  }
+};

backend/controller/reservation.controller.js

@@ -1,12 +1,14 @@
 const { z } = require("zod");
 const Reservation = require("../models/reservation.model");
-const logger = require("../config/logger"); // Import your logger
+const logger = require("../config/logger");
+const { sendReservationConfirmation } = require("../config/nodemailer"); // Import your email function
 
 // Define the Zod schema for reservation validation
 const reservationSchema = z.object({
   guests: z.string(),
   date: z.string(),
   time: z.string(),
+  email: z.string().email(), // Include email validation in the schema
 });
 
 async function createReservation(req, res) {
@@ -25,11 +27,26 @@ async function createReservation(req, res) {
       });
     }
 
+    // Create the reservation in the database
     const reservation = await Reservation.create(validationResult.data);
 
+    // Send a confirmation email
+    try {
+      const { email, date, guests, time } = validationResult.data;
+      await sendReservationConfirmation(email, { reservationDate: date, guests, time });
+      logger.info(`Reservation confirmation email sent to ${email}`);
+    } catch (emailError) {
+      logger.error("Error sending reservation confirmation email:", {
+        message: emailError.message,
+        stack: emailError.stack,
+      });
+      // Email error should not block the main reservation process, so no need to return a failure response
+    }
+
+    // Send the success response
     res.status(201).json({
       success: true,
-      message: "Reservation created successfully",
+      message: "Reservation created successfully, confirmation email sent",
       data: reservation,
     });
   } catch (error) {
@@ -48,4 +65,4 @@ async function createReservation(req, res) {
 
 module.exports = {
   createReservation,
-};
+};

backend/package.json

@@ -16,6 +16,7 @@
     "dotenv": "^16.4.5",
     "express": "^4.21.0",
     "mongoose": "^8.7.0",
+    "nodemailer": "^6.9.15",
     "validator": "^13.12.0",
     "winston": "^3.14.2",
     "zod": "^3.23.8"

frontend/src/App.jsx

@@ -4,11 +4,12 @@ import './App.css';
 import Navbar from '../src/components/Shared/Navbar';
 import Footer from "../src/components/Shared/Footer"
 import { Outlet } from 'react-router-dom';
-
+import { AuthProvider } from './components/Shared/AuthContext';
 import {KindeProvider} from "@kinde-oss/kinde-auth-react";
 
 function App() {
   return (
+    <AuthProvider>
     <KindeProvider
     clientId={import.meta.env.VITE_KINDE_CLIENT_ID}
     domain={import.meta.env.VITE_KINDE_DOMAIN}
@@ -19,9 +20,9 @@ function App() {
     <Outlet />
     <Footer />
   </KindeProvider>
-
+  </AuthProvider>
 
   );
 }
 
-export default App;
+export default App;

frontend/src/components/Pages/Register.jsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { useAuth } from "../Shared/AuthContext";
 import pic from "../../assets/img/abt1.jpg";
 import pic2 from "../../assets/img/abt1.png";
 import pic3 from "../../assets/img/abt2.png";
@@ -9,6 +10,7 @@ export default function Register() {
   const [date, setDate] = useState("");
   const [time, setTime] = useState("");
   const [guests, setGuests] = useState();
+  const { email } = useAuth();
 
   const handleSubmit = (e) => {
     console.log(guests);
@@ -22,11 +24,13 @@ export default function Register() {
         "Content-Type": "application/json",
       },
       body: JSON.stringify({
+        email,
         guests,
         date,
         time,
       }),
     })
+
       .then((res) => res.json())
       .then((data) => console.log(data))
       .catch((error) => console.log(error));
@@ -231,4 +235,4 @@ export default function Register() {
       </div>
     </>
   );
-}
+}

frontend/src/components/Shared/AuthContext.jsx

@@ -0,0 +1,15 @@
+import { createContext, useState, useContext } from "react";
+
+const AuthContext = createContext();
+
+export const AuthProvider = ({ children }) => {
+  const [email, setEmail] = useState(null); // Store user's email
+
+  return (
+    <AuthContext.Provider value={{ email, setEmail }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export const useAuth = () => useContext(AuthContext);

frontend/src/components/Shared/Navbar.jsx

@@ -3,13 +3,16 @@ import Logo from "../../assets/Logo/playcafe.png";
 import { Link, useLocation } from "react-router-dom";
 import { useKindeAuth } from "@kinde-oss/kinde-auth-react";
 import { message } from "antd";
+import { useAuth } from "./AuthContext";
 
 const Navbar = () => {
-  const { login, logout, isAuthenticated } = useKindeAuth();
+  const { login, logout, isAuthenticated, getUser } = useKindeAuth();
   const [isScrolled, setIsScrolled] = useState(false);
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const location = useLocation();
   const wasAuthenticated = useRef(null);
+  const { setEmail } = useAuth();
+
   const menuItems = [
     { name: "Home", path: "/" },
     { name: "Events", path: "/events" },
@@ -41,10 +44,24 @@ const Navbar = () => {
     }
     if (!wasAuthenticated.current && isAuthenticated) {
       message.success("Login successful!");
+      // Fetch user details only when authentication is successful
+      fetchUserDetails();
     }
     wasAuthenticated.current = isAuthenticated;
   }, [isAuthenticated]);
 
+  const fetchUserDetails = async () => {
+    try {
+      const user = getUser();
+      if (user) {
+        setEmail(user.email); // Store email in the context
+        console.log("User email:", user.email);
+      }
+    } catch (error) {
+      console.error("Failed to get user details:", error);
+    }
+  };
+
   const toggleMenu = () => {
     setIsMenuOpen(!isMenuOpen);
   };
@@ -67,26 +84,25 @@ const Navbar = () => {
   const handleLogin = async () => {
     try {
       await login();
-
     } catch (error) {
       message.error("Login failed. Please try again.");
     }
   };
 
-
   const handleLogout = async () => {
     try {
       await logout();
-
+      setEmail(null);
     } catch (error) {
       message.error("Logout failed. Please try again.");
     }
   };
 
   return (
     <nav
-      className={`w-full fixed top-0 z-50 transition duration-300 ${isScrolled ? "bg-[#E0F0B1]" : "bg-transparent"}
-                  ${isScrolled ? "text-gray-800" : "text-black"} ${isScrolled ? "shadow-lg" : ""}`}
+      className={`w-full fixed top-0 z-50 transition duration-300 ${
+        isScrolled ? "bg-[#E0F0B1]" : "bg-transparent"
+      } ${isScrolled ? "text-gray-800" : "text-black"} ${isScrolled ? "shadow-lg" : ""}`}
     >
       <div className="max-w-7xl mx-auto px-4">
         <div className="flex justify-between items-center h-16">
@@ -133,14 +149,27 @@ const Navbar = () => {
           {/* Mobile Menu Button */}
           <div className="flex md:hidden">
             <button onClick={toggleMenu} className={`${buttonTextClass} focus:outline-none`}>
-              {isMenuOpen ?
-                <svg className="h-6 w-6" fill="none" stroke="black" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              {isMenuOpen ? (
+                <svg
+                  className="h-6 w-6"
+                  fill="none"
+                  stroke="black"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
                 </svg>
-                : <svg className="h-6 w-6" fill="none" stroke="black" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              ) : (
+                <svg
+                  className="h-6 w-6"
+                  fill="none"
+                  stroke="black"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
                 </svg>
-              }
+              )}
             </button>
           </div>
         </div>
@@ -155,7 +184,7 @@ const Navbar = () => {
                 key={item.name}
                 to={item.path}
                 className={`block px-4 py-3 rounded-md text-base font-semibold transition duration-300 
-                            ${mobileMenuBaseTextColorClass} hover:bg-amber-300 hover:text-black`}
+                          ${mobileMenuBaseTextColorClass} hover:bg-amber-300 hover:text-black`}
               >
                 {item.name}
               </Link>
@@ -164,15 +193,15 @@ const Navbar = () => {
               <button
                 onClick={handleLogout}
                 className={`block w-full text-left px-4 py-3 rounded-md text-base font-semibold transition duration-300 
-                            ${mobileMenuBaseTextColorClass} hover:bg-amber-300 hover:text-black`}
+                          ${mobileMenuBaseTextColorClass} hover:bg-amber-300 hover:text-black`}
               >
                 Log Out
               </button>
             ) : (
               <button
                 onClick={handleLogin}
                 className={`block w-full text-left px-4 py-3 rounded-md text-base font-semibold transition duration-300 
-                              ${mobileMenuBaseTextColorClass} hover:bg-amber-300 hover:text-black`}
+                            ${mobileMenuBaseTextColorClass} hover:bg-amber-300 hover:text-black`}
               >
                 Log In
               </button>
@@ -184,4 +213,4 @@ const Navbar = () => {
   );
 };
 
-export default Navbar;
+export default Navbar;