code changes

src/Components/Top-level/Notification/Notification.jsx

+// Notification.jsx
 import PropTypes from "prop-types";
 import styles from "../Notification/Notification.module.css";
 import successImg from "../../../assets/success.png";
 import errorImg from "../../../assets/giferror.gif";
 import cn from "classnames";
 
-export const Notification = ({ title, type, msg, button, }) => {
+export const Notification = ({ title, type, msg, button, seats }) => {
   const selectedImage = type === "success" ? successImg : errorImg;
+
   return (
-    <>
-     {/* <div className={styles.logoutButton}>
-      <AiOutlineLogout onClick={onLogout}/>
-        </div> */}
     <div className={styles.container}>
-
       <span className={styles.span}>
         <img
           src={selectedImage}
@@ -23,11 +20,25 @@ export const Notification = ({ title, type, msg, button, }) => {
           })}
         />
       </span>
+
       <h2 className={styles.title}>{title}</h2>
       <p className={styles.msg}>{msg}</p>
-      <div className={styles.button}> {button && button}</div>
+
+      {seats && seats.length > 0 && (
+        <div className={styles.seatListWrapper}>
+          <h4 className={styles.seatTitle}>🎫 Your Seats:</h4>
+          <ul className={styles.seatList}>
+            {seats.map((seat, index) => (
+              <li key={index} className={styles.seatItem}>
+                {seat}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      <div className={styles.button}>{button}</div>
     </div>
-    </>
   );
 };
 
@@ -36,4 +47,5 @@ Notification.propTypes = {
   title: PropTypes.string.isRequired,
   msg: PropTypes.string.isRequired,
   button: PropTypes.element,
+  seats: PropTypes.arrayOf(PropTypes.string), 
 };

src/Components/Top-level/Notification/Notification.module.css

@@ -13,81 +13,75 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  margin-top: 20rem;
+  margin: 5rem auto;
   text-align: center;
-  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
-  animation: fadeIn 0.5s ease-in-out;
   width: 100%;
   max-width: 25rem;
-  background-color: #eff0ef;
   padding: 3rem;
+  background-color: #eff0ef;
   border-radius: 2rem;
-  margin: 10rem auto;
+  animation: fadeIn 0.5s ease-in-out;
 }
 
-/* .container:hover {
-  transform: scale(1.02);
-  opacity: 0.95;
-} */
-
 .span {
   font-size: 4rem;
   margin-bottom: 0.5rem;
 }
 
+.title,
+.msg {
+  color: #100f0f;
+  font-family: 'Segoe UI', sans-serif;
+  font-weight: bold;
+}
+
 .title {
-  margin-bottom: 0.5em;
   font-size: 1.5rem;
-  color: rgb(16, 15, 15);
-  font-weight: bold;
-  font-family: 'Segoe UI';
+  margin-bottom: 0.5em;
 }
 
 .msg {
   font-size: 1.5rem;
-  color: rgb(16, 15, 15);
-  margin-top: 0.5rem;
+  margin: 0.5rem 0 2rem;
   line-height: 1.5;
-  font-family: 'Segoe UI';
-  font-weight: bold;
-  margin-bottom: 2rem;
 }
 
+.success,
+.error {
+  height: 9.375rem;
+  width: 9.375rem;
+}
 
 .success {
-  color: #2ecc71;
-  width: 9.375rem; 
-  height: auto;
   animation: rotate 1s linear, glow 7s ease-in-out alternate;
 }
 
 .error {
-  color: #e74c3c;
-  height:9.375rem;
   width: 12.5rem;
 }
 
 .button {
-  max-width: 12rem;
   width: 100%;
+  max-width: 12rem;
   text-align: center;
+  margin-top: 1rem;
 }
 
 .button button {
   width: 100%;
   padding: 0.75rem 1.5rem;
-  background-color: var(--primary);
-  color: white;
   font-size: 1.1rem;
+  font-weight: bold;
+  color: white;
+  background-color: var(--primary);
   border: none;
   border-radius: 0.5rem;
-  font-weight: bold;
   cursor: pointer;
-  transition: background-color 0.3s ease-in-out, transform 0.2s;
+  transition: background-color 0.3s, transform 0.2s;
 }
 
 .button button:hover {
-  background-color:var(--primary);
+  background-color: var(--primary);
   transform: translateY(-2px);
 }
 
@@ -124,3 +118,36 @@
     filter: drop-shadow(0 0 20px #c8d92f);
   }
 }
+
+.seatListWrapper {
+  margin-top: 1rem;
+  background-color: #f5f5f5;
+  padding: 1rem;
+  border-radius: 1rem;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+}
+
+.seatTitle {
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+  color: #333;
+}
+
+.seatList {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.5rem;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.seatItem {
+  background-color: #d1e7dd;
+  color: #0f5132;
+  padding: 0.4rem 0.8rem;
+  border-radius: 0.5rem;
+  font-size: 1rem;
+  font-weight: 500;
+}

src/Components/Top-level/Response/Success/Success.jsx

@@ -4,20 +4,24 @@ import { Notification } from "../../Notification/Notification";
 import { Button } from "../../../Base/Buttons/Button";
 
 export const Success = () => {
+  const [showConfetti, setShowConfetti] = useState(true);
+  const [windowSize, setWindowSize] = useState({ width: 0, height: 0 });
+  const [bookedSeats, setBookedSeats] = useState([]);
+
   const response = {
-    title: 'Success🎉',
+    title: 'Success 🎉',
     type: 'success',
     msg: 'Successfully booked your ticket!',
   };
 
-  const [showConfetti, setShowConfetti] = useState(true);
-  const [windowSize, setWindowSize] = useState({ width: 0, height: 0 });
-
   useEffect(() => {
     setWindowSize({ width: window.innerWidth, height: window.innerHeight });
+    const seats = JSON.parse(localStorage.getItem("bookedSeats")) || [];
+    setBookedSeats(seats);
+    // Confetti timeout
     const timer = setTimeout(() => {
       setShowConfetti(false);
-    }, 20000);
+    }, 10000);
 
     return () => clearTimeout(timer);
   }, []);
@@ -32,16 +36,18 @@ export const Success = () => {
         <Confetti width={windowSize.width} height={windowSize.height} />
       )}
 
-      <Notification {...response} button={<Button  variant="secondary"
+      <Notification
+        {...response}
+        seats={bookedSeats}
+        button={
+          <Button
+            variant="secondary"
             label="Book more seats"
-      size="md" onClick={handleSuccess}/>}/>
-
-      <div
-        style={{ display: "flex", justifyContent: "center", marginTop: "1rem" }}
+            size="md"
             onClick={handleSuccess}
-      >
-
-      </div>
+          />
+        }
+      />
     </>
   );
 };

src/Components/Top-level/Seatselect/Selectseat.jsx

@@ -97,6 +97,10 @@ export const Selectseat = ({ onLogout }) => {
       .then(res => {
         if (res) {
           toast.success("Seats booked!");
+          hasWelcomed.current=true;
+           const finalSeats = [...selectedData, ...selectedSeats];
+            localStorage.setItem("bookedSeats", JSON.stringify(selectedSeats)); 
+            console.log(selectedSeats);
           setSelectedSeats([]);
           setTimeout(() => {
             window.location.replace("/success");

src/auth/authService.js

@@ -17,6 +17,7 @@ export const getCurrentUser = () => {
 
 export const logout = () => {
   localStorage.removeItem("user");
+  localStorage.removeItem("bookedSeats");
   window.location.replace('/');
   return;
 };

src/db.json

@@ -18,10 +18,7 @@
       "phoneNumber": "9361775481",
       "name": "mani",
       "reservedSeats": [
-        "A4",
-        "A5",
-        "A6",
-        "B7"
+        "E5"
       ]
     },
     {
@@ -45,7 +42,9 @@
       "name": "mani",
       "email": "mani@gmail.com",
       "phoneNumber": "9312345678",
-      "reservedSeats": []
+      "reservedSeats": [
+        "B6"
+      ]
     },
     {
       "id": "845c",
@@ -66,7 +65,11 @@
       "name": "ganesh",
       "email": "ganesh@gmail.com",
       "phoneNumber": "9786543219",
-      "reservedSeats": []
+      "reservedSeats": [
+        "C6",
+        "C7",
+        "B8"
+      ]
     },
     {
       "id": "9659",