From 886e2446c706f93b9538a03258e3f66c759e6537 Mon Sep 17 00:00:00 2001
From: Balaharisankar Lakshmanaperumal
 <114602603+BHS-Harish@users.noreply.github.com>
Date: Thu, 8 Aug 2024 00:07:34 +0530
Subject: [PATCH] =?UTF-8?q?=F0=9F=8D=83=20Integration=20Join=20Us=20Form?=
 =?UTF-8?q?=20with=20backend=20(#1117)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Upvote and Downvotes fixed

* JoinUs functionality fixed
---
 .../pages/Home/components/JoinUsForm/Form.jsx | 697 +++++++++---------
 .../components/JoinUsForm/form.module.scss    |  69 +-
 frontend/src/service/JoinUs.jsx               |  32 +
 3 files changed, 447 insertions(+), 351 deletions(-)
 create mode 100644 frontend/src/service/JoinUs.jsx

diff --git a/frontend/src/pages/Home/components/JoinUsForm/Form.jsx b/frontend/src/pages/Home/components/JoinUsForm/Form.jsx
index a254277a..05fa566c 100644
--- a/frontend/src/pages/Home/components/JoinUsForm/Form.jsx
+++ b/frontend/src/pages/Home/components/JoinUsForm/Form.jsx
@@ -1,6 +1,8 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import Joi from "joi-browser";
 import MultiSelect from "react-multi-select-component";
+import { SimpleToast } from "../../../../components/util/Toast";
+import { postJoinUs, PostJoinUs } from '../../../../service/JoinUs';
 
 import styles from "./form.module.scss";
 import { Button2 } from "../../../../components/util/Button/index";
@@ -9,16 +11,18 @@ export const JoinUsForm = (props) => {
 
   const [formdata, setFormData] = useState({
     name: "",
-    phone: "",
+    contact: "",
     email: "",
-    link: "",
-    desc: "",
-    other: "",
-    dept: "",
+    linkdin: "",
+    description: "",
+    otherDomain: "",
+    department: "",
     year: null,
     college: "",
   });
 
+  const [isSubmitted, setIsSubmitted] = useState(false)
+
   const options = [
     { label: "Machine Learning", value: "ml" },
     { label: "Artificial Intelligence", value: "ai" },
@@ -36,16 +40,21 @@ export const JoinUsForm = (props) => {
   const [domainError, setDomainError] = useState();
 
   const [formerrors, setFormErrors] = useState({});
+  const [toast, setToast] = useState({
+    toastStatus: false,
+    toastType: "",
+    toastMessage: "",
+  });
 
   const schema = {
     name: Joi.string().required(),
-    phone: Joi.number().allow(""),
-    email: Joi.string().email().required(),
-    link: Joi.string().uri().allow(""),
-    desc: Joi.string().allow(""),
-    other: Joi.string().allow(""),
-    dept: Joi.string().allow(""),
-    year: Joi.number().required(),
+    contact: Joi.number().required(),
+    email: Joi.string().email().required().required(),
+    linkdin: Joi.string().uri().required(),
+    description: Joi.string().required(),
+    otherDomain: Joi.string(),
+    department: Joi.string().required(),
+    year: Joi.number().required().required(),
     college: Joi.string().required(),
   };
 
@@ -80,7 +89,7 @@ export const JoinUsForm = (props) => {
     setFormErrors(errors);
   };
 
-  const handleSubmit = (e) => {
+  const handleSubmit = async (e) => {
     e.preventDefault();
     const errors = validate();
     console.log(errors);
@@ -91,375 +100,401 @@ export const JoinUsForm = (props) => {
     }
     if (errors === null || Object.keys(errors).length === 0) {
       setFormErrors({});
-      console.log("Submitted", formdata);
+      let data = { ...formdata, interestedDomain: domains.map((value)=>value.label) }
+      let res = await postJoinUs(data, setToast)
+      if (res == true)
+        setIsSubmitted(true)
     } else {
       setFormErrors(errors);
+      setToast({ toastStatus: true, toastMessage: "Fill all the fields", toastType: "error" })
     }
   };
 
-  console.log("form error: ", formerrors);
-  console.log("form data: ", formdata, domains);
-
   return (
-    <div
-      className={
-        dark
-          ? `${styles["join-us-form-section"]} ${styles["join-us-form-section-dark"]}`
-          : `${styles["join-us-form-section"]} ${styles["join-us-form-section-light"]}`
-      }
-    >
-      <div className={`${styles["join-us-form-image"]} ${styles["child1"]}`}>
-        <img src="./images/joinus2.png" alt="" />
-      </div>
+    <>
       <div
         className={
           dark
-            ? `${styles["join-us-form"]} ${styles["join-us-form-dark"]}`
-            : `${styles["join-us-form"]} ${styles["join-us-form-light"]}`
+            ? `${styles["join-us-form-section"]} ${styles["join-us-form-section-dark"]}`
+            : `${styles["join-us-form-section"]} ${styles["join-us-form-section-light"]}`
         }
       >
+        <div className={`${styles["join-us-form-image"]} ${styles["child1"]}`}>
+          <img src="./images/joinus2.png" alt="" />
+        </div>
         <div
           className={
             dark
-              ? `${styles["join-us-form-card"]} ${styles["join-us-form-card-dark"]}`
-              : `${styles["join-us-form-card"]} ${styles["join-us-form-card-light"]}`
+              ? `${styles["join-us-form"]} ${styles["join-us-form-dark"]}`
+              : `${styles["join-us-form"]} ${styles["join-us-form-light"]}`
           }
         >
-          <h3
-            className={
-              dark
-                ? `${styles["join-us-form-header-text"]} ${styles["join-us-form-header-text-dark"]}`
-                : `${styles["join-us-form-header-text"]} ${styles["join-us-form-header-text-light"]}`
-            }
-          >
-            Join Us Form
-          </h3>
-          <form onSubmit={handleSubmit}>
-            <div className={styles["inside-join-us-form"]}>
-              <div className={styles["form-row"]}>
-                <div className={`${styles["form-group"]} col-sm-6`}>
-                  <div
-                    className={
-                      dark
-                        ? `${styles["join-us-form-input"]} ${styles["join-us-form-input-dark"]}`
-                        : `${styles["join-us-form-input"]} ${styles["join-us-form-input-light"]}`
-                    }
-                  >
-                    <input
-                      placeholder="Name"
-                      id="txt_name"
-                      type="text"
-                      name="name"
-                      onChange={handleChange}
-                    />
-                    <i className={`fas fa-user ${styles["user"]}`}></i>
-                    <div
-                      className={`${styles["validation"]} validation d-sm-none d-md-block`}
-                    >
-                      {formerrors["name"] ? (
-                        <div>* {formerrors["name"]}</div>
-                      ) : (
-                        <div>&nbsp; &nbsp;</div>
-                      )}
-                    </div>
-                  </div>
-                </div>
-                <div className={`${styles["form-group2"]} col-sm-6`}>
-                  <div
-                    className={
-                      dark
-                        ? `${styles["join-us-form-input"]} ${styles["join-us-form-input-dark"]}`
-                        : `${styles["join-us-form-input"]} ${styles["join-us-form-input-light"]}`
-                    }
-                  >
-                    <input
-                      placeholder="Contact No."
-                      id="phone"
-                      type="tel"
-                      name="phone"
-                      onChange={handleChange}
-                    />
-                    <i className={`fas fa-phone ${styles["phone"]}`}></i>
-                    <div
-                      className={`${styles["validation"]} validation d-sm-none d-md-block`}
-                    >
-                      {formerrors["phone"] ? (
-                        <div>* {formerrors["phone"]}</div>
-                      ) : (
-                        <div>&nbsp; &nbsp;</div>
-                      )}
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div className={styles["form-group"]}>
-                <div
-                  className={
-                    dark
-                      ? `${styles["join-us-form-input"]} ${styles["join-us-form-input-dark"]}`
-                      : `${styles["join-us-form-input"]} ${styles["join-us-form-input-light"]}`
-                  }
-                >
-                  <input
-                    placeholder="Email ID"
-                    id="txt_email"
-                    type="text"
-                    name="email"
-                    onChange={handleChange}
-                  />
-                  <i
-                    className={`fas fa-envelope-open-text ${styles["envelope"]}`}
-                  ></i>
-                  <div
-                    className={`${styles["validation"]} validation d-sm-none d-md-block`}
-                  >
-                    {formerrors["email"] && <div>* {formerrors["email"]}</div>}
-                  </div>
-                </div>
-              </div>
-              <div className={styles["form-group"]}>
-                <div
-                  className={
-                    dark
-                      ? `${styles["join-us-form-input"]} ${styles["join-us-form-input-dark"]}`
-                      : `${styles["join-us-form-input"]} ${styles["join-us-form-input-light"]}`
-                  }
-                >
-                  <input
-                    placeholder="Linkedin Profile URL"
-                    id="txt_link"
-                    type="text"
-                    name="link"
-                    onChange={handleChange}
-                  />
-                  <i className={`fas fa-link ${styles["link"]}`}></i>
-                  <div
-                    className={`${styles["validation"]} validation d-sm-none d-md-block`}
-                  >
-                    {formerrors["link"] ? (
-                      <div>* {formerrors["link"]}</div>
-                    ) : (
-                      <div>&nbsp; &nbsp;</div>
-                    )}
+          {
+            isSubmitted ?
+              <React.Fragment>
+                <div className={styles["goodbye-card"]}>
+                  <h1 className={styles["card-heading"]}>Hello There !</h1>
+                  <div className={styles["inside-card"]}>
+                    <p style={{ textAlign: "center" }}>
+                      Your request is in process! 😄 <br />
+                      we will get back to you soon!
+                    </p>
                   </div>
                 </div>
-              </div>
+              </React.Fragment>
+              :
               <div
                 className={
                   dark
-                    ? `${styles["join-us-form-input"]} ${styles["join-us-form-input-dark"]}`
-                    : `${styles["join-us-form-input"]} ${styles["join-us-form-input-light"]}`
+                    ? `${styles["join-us-form-card"]} ${styles["join-us-form-card-dark"]}`
+                    : `${styles["join-us-form-card"]} ${styles["join-us-form-card-light"]}`
                 }
               >
-                <textarea
-                  placeholder="How can you contribute to help the community?"
-                  id="txt_desc"
-                  rows="2"
-                  cols="20"
-                  name="desc"
-                  onChange={handleChange}
-                ></textarea>
-                <i className={`fas fa-comment-dots ${styles["comments"]}`}></i>
-                <div
-                  className={`${styles["validation"]} validation d-sm-none d-md-block`}
-                >
-                  {formerrors["desc"] ? (
-                    <div>* {formerrors["desc"]}</div>
-                  ) : (
-                    <div>&nbsp; &nbsp;</div>
-                  )}
-                </div>
-              </div>
-              <div
-                className={
-                  dark
-                    ? `${styles["join-us-form-input1"]} ${styles["join-us-form-input1-dark"]}`
-                    : `${styles["join-us-form-input1"]} ${styles["join-us-form-input1-light"]}`
-                }
-              >
-                <label className={`mb-4 ${styles["ID"]}`}>
-                  Interested Domains
-                </label>
-                <MultiSelect
-                  options={options} // Options to display in the dropdown
-                  value={domains} // Preselected value to persist in dropdown
-                  onChange={setDomains} // Function will trigger on change event
-                  labelledBy={"Domains"} // Property name to display in the dropdown options
-                  className={
-                    dark ? styles["dropdown-dark"] : styles["dropdown"]
-                  }
-                />
-
-                <div
-                  className={`${styles["validation"]} validation d-sm-none d-md-block`}
-                >
-                  {domainError ? (
-                    <div>{domainError}</div>
-                  ) : (
-                    <div>&nbsp; &nbsp;</div>
-                  )}
-                </div>
-              </div>
-              <div className={styles["form-group"]}>
-                <div
+                <h3
                   className={
                     dark
-                      ? `${styles["join-us-form-input"]} ${styles["join-us-form-input-dark"]}`
-                      : `${styles["join-us-form-input"]} ${styles["join-us-form-input-light"]}`
+                      ? `${styles["join-us-form-header-text"]} ${styles["join-us-form-header-text-dark"]}`
+                      : `${styles["join-us-form-header-text"]} ${styles["join-us-form-header-text-light"]}`
                   }
                 >
-                  <input
-                    placeholder="Other - if the domain is not listed above"
-                    id="txt_other"
-                    type="text"
-                    name="other"
-                    onChange={handleChange}
-                  />
-                  <i className={`fas fa-pencil-alt ${styles["pencil"]}`}></i>
-                </div>
-              </div>
-              <div className={styles["form-group"]}>
-                <div
-                  className={
-                    dark
-                      ? `${styles["join-us-form-input"]} ${styles["join-us-form-input-dark"]}`
-                      : `${styles["join-us-form-input"]} ${styles["join-us-form-input-light"]}`
-                  }
-                >
-                  <input
-                    placeholder="Department"
-                    id="txt_dept"
-                    type="text"
-                    name="dept"
-                    onChange={handleChange}
-                  />
-                  <i className={`fas fa-building ${styles["building"]}`}></i>
-                </div>
-              </div>
-              <div
-                className={
-                  dark
-                    ? `${styles["join-us-form-input1"]} ${styles["join-us-form-input1-dark"]}`
-                    : `${styles["join-us-form-input1"]} ${styles["join-us-form-input1-light"]}`
-                }
-              >
-                <label className={`mb-4 ${styles["year-of-study"]}`}>
-                  Year of Study
-                </label>
-                <div>
-                  <div className={styles["radioButtons"]}>
-                    <div
-                      className={
-                        dark
-                          ? `${styles["radio-item"]} ${styles["radio-item-dark"]}`
-                          : `${styles["radio-item"]} ${styles["radio-item-light"]}`
-                      }
-                    >
-                      <input
-                        type="radio"
-                        name="year"
-                        value={1}
-                        onChange={handleChange}
-                      />
-                      <label className={`mx-3 ${styles["label"]}`}>1st</label>
+                  Join Us Form
+                </h3>
+                <form onSubmit={handleSubmit}>
+                  <div className={styles["inside-join-us-form"]}>
+                    <div className={styles["form-row"]}>
+                      <div className={`${styles["form-group"]} col-sm-6`}>
+                        <div
+                          className={
+                            dark
+                              ? `${styles["join-us-form-input"]} ${styles["join-us-form-input-dark"]}`
+                              : `${styles["join-us-form-input"]} ${styles["join-us-form-input-light"]}`
+                          }
+                        >
+                          <input
+                            placeholder="Name"
+                            id="txt_name"
+                            type="text"
+                            name="name"
+                            onChange={handleChange}
+                          />
+                          <i className={`fas fa-user ${styles["user"]}`}></i>
+                          <div
+                            className={`${styles["validation"]} validation d-sm-none d-md-block`}
+                          >
+                            {formerrors["name"] ? (
+                              <div>* {formerrors["name"]}</div>
+                            ) : (
+                              <div>&nbsp; &nbsp;</div>
+                            )}
+                          </div>
+                        </div>
+                      </div>
+                      <div className={`${styles["form-group2"]} col-sm-6`}>
+                        <div
+                          className={
+                            dark
+                              ? `${styles["join-us-form-input"]} ${styles["join-us-form-input-dark"]}`
+                              : `${styles["join-us-form-input"]} ${styles["join-us-form-input-light"]}`
+                          }
+                        >
+                          <input
+                            placeholder="Contact No."
+                            id="phone"
+                            type="tel"
+                            name="contact"
+                            onChange={handleChange}
+                          />
+                          <i className={`fas fa-phone ${styles["phone"]}`}></i>
+                          <div
+                            className={`${styles["validation"]} validation d-sm-none d-md-block`}
+                          >
+                            {formerrors["phone"] ? (
+                              <div>* {formerrors["phone"]}</div>
+                            ) : (
+                              <div>&nbsp; &nbsp;</div>
+                            )}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div className={styles["form-group"]}>
+                      <div
+                        className={
+                          dark
+                            ? `${styles["join-us-form-input"]} ${styles["join-us-form-input-dark"]}`
+                            : `${styles["join-us-form-input"]} ${styles["join-us-form-input-light"]}`
+                        }
+                      >
+                        <input
+                          placeholder="Email ID"
+                          id="txt_email"
+                          type="text"
+                          name="email"
+                          onChange={handleChange}
+                        />
+                        <i
+                          className={`fas fa-envelope-open-text ${styles["envelope"]}`}
+                        ></i>
+                        <div
+                          className={`${styles["validation"]} validation d-sm-none d-md-block`}
+                        >
+                          {formerrors["email"] && <div>* {formerrors["email"]}</div>}
+                        </div>
+                      </div>
+                    </div>
+                    <div className={styles["form-group"]}>
+                      <div
+                        className={
+                          dark
+                            ? `${styles["join-us-form-input"]} ${styles["join-us-form-input-dark"]}`
+                            : `${styles["join-us-form-input"]} ${styles["join-us-form-input-light"]}`
+                        }
+                      >
+                        <input
+                          placeholder="Linkedin Profile URL"
+                          id="txt_link"
+                          type="text"
+                          name="linkdin"
+                          onChange={handleChange}
+                        />
+                        <i className={`fas fa-link ${styles["link"]}`}></i>
+                        <div
+                          className={`${styles["validation"]} validation d-sm-none d-md-block`}
+                        >
+                          {formerrors["link"] ? (
+                            <div>* {formerrors["link"]}</div>
+                          ) : (
+                            <div>&nbsp; &nbsp;</div>
+                          )}
+                        </div>
+                      </div>
                     </div>
                     <div
                       className={
                         dark
-                          ? `${styles["radio-item"]} ${styles["radio-item-dark"]}`
-                          : `${styles["radio-item"]} ${styles["radio-item-light"]}`
+                          ? `${styles["join-us-form-input"]} ${styles["join-us-form-input-dark"]}`
+                          : `${styles["join-us-form-input"]} ${styles["join-us-form-input-light"]}`
                       }
                     >
-                      <input
-                        type="radio"
-                        name="year"
-                        value={2}
+                      <textarea
+                        placeholder="How can you contribute to help the community?"
+                        id="txt_desc"
+                        rows="2"
+                        cols="20"
+                        name="description"
                         onChange={handleChange}
-                      />
-                      <label className={`mx-3 ${styles["label"]}`}>2nd</label>
+                      ></textarea>
+                      <i className={`fas fa-comment-dots ${styles["comments"]}`}></i>
+                      <div
+                        className={`${styles["validation"]} validation d-sm-none d-md-block`}
+                      >
+                        {formerrors["desc"] ? (
+                          <div>* {formerrors["desc"]}</div>
+                        ) : (
+                          <div>&nbsp; &nbsp;</div>
+                        )}
+                      </div>
                     </div>
                     <div
                       className={
                         dark
-                          ? `${styles["radio-item"]} ${styles["radio-item-dark"]}`
-                          : `${styles["radio-item"]} ${styles["radio-item-light"]}`
+                          ? `${styles["join-us-form-input1"]} ${styles["join-us-form-input1-dark"]}`
+                          : `${styles["join-us-form-input1"]} ${styles["join-us-form-input1-light"]}`
                       }
                     >
-                      <input
-                        type="radio"
-                        name="year"
-                        value={3}
-                        onChange={handleChange}
+                      <label className={`mb-4 ${styles["ID"]}`}>
+                        Interested Domains
+                      </label>
+                      <MultiSelect
+                        options={options} // Options to display in the dropdown
+                        value={domains} // Preselected value to persist in dropdown
+                        onChange={setDomains} // Function will trigger on change event
+                        labelledBy={"Domains"} // Property name to display in the dropdown options
+                        className={
+                          dark ? styles["dropdown-dark"] : styles["dropdown"]
+                        }
                       />
-                      <label className={`mx-3 ${styles["label"]}`}>3rd</label>
+
+                      <div
+                        className={`${styles["validation"]} validation d-sm-none d-md-block`}
+                      >
+                        {domainError ? (
+                          <div>{domainError}</div>
+                        ) : (
+                          <div>&nbsp; &nbsp;</div>
+                        )}
+                      </div>
+                    </div>
+                    <div className={styles["form-group"]}>
+                      <div
+                        className={
+                          dark
+                            ? `${styles["join-us-form-input"]} ${styles["join-us-form-input-dark"]}`
+                            : `${styles["join-us-form-input"]} ${styles["join-us-form-input-light"]}`
+                        }
+                      >
+                        <input
+                          placeholder="Other - if the domain is not listed above"
+                          id="txt_other"
+                          type="text"
+                          name="otherDomain"
+                          onChange={handleChange}
+                        />
+                        <i className={`fas fa-pencil-alt ${styles["pencil"]}`}></i>
+                      </div>
+                    </div>
+                    <div className={styles["form-group"]}>
+                      <div
+                        className={
+                          dark
+                            ? `${styles["join-us-form-input"]} ${styles["join-us-form-input-dark"]}`
+                            : `${styles["join-us-form-input"]} ${styles["join-us-form-input-light"]}`
+                        }
+                      >
+                        <input
+                          placeholder="Department"
+                          id="txt_dept"
+                          type="text"
+                          name="department"
+                          onChange={handleChange}
+                        />
+                        <i className={`fas fa-building ${styles["building"]}`}></i>
+                      </div>
                     </div>
                     <div
                       className={
                         dark
-                          ? `${styles["radio-item"]} ${styles["radio-item-dark"]}`
-                          : `${styles["radio-item"]} ${styles["radio-item-light"]}`
+                          ? `${styles["join-us-form-input1"]} ${styles["join-us-form-input1-dark"]}`
+                          : `${styles["join-us-form-input1"]} ${styles["join-us-form-input1-light"]}`
                       }
                     >
-                      <input
-                        type="radio"
-                        name="year"
-                        value={4}
-                        onChange={handleChange}
+                      <label className={`mb-4 ${styles["year-of-study"]}`}>
+                        Year of Study
+                      </label>
+                      <div>
+                        <div className={styles["radioButtons"]}>
+                          <div
+                            className={
+                              dark
+                                ? `${styles["radio-item"]} ${styles["radio-item-dark"]}`
+                                : `${styles["radio-item"]} ${styles["radio-item-light"]}`
+                            }
+                          >
+                            <input
+                              type="radio"
+                              name="year"
+                              value={1}
+                              onChange={handleChange}
+                            />
+                            <label className={`mx-3 ${styles["label"]}`}>1st</label>
+                          </div>
+                          <div
+                            className={
+                              dark
+                                ? `${styles["radio-item"]} ${styles["radio-item-dark"]}`
+                                : `${styles["radio-item"]} ${styles["radio-item-light"]}`
+                            }
+                          >
+                            <input
+                              type="radio"
+                              name="year"
+                              value={2}
+                              onChange={handleChange}
+                            />
+                            <label className={`mx-3 ${styles["label"]}`}>2nd</label>
+                          </div>
+                          <div
+                            className={
+                              dark
+                                ? `${styles["radio-item"]} ${styles["radio-item-dark"]}`
+                                : `${styles["radio-item"]} ${styles["radio-item-light"]}`
+                            }
+                          >
+                            <input
+                              type="radio"
+                              name="year"
+                              value={3}
+                              onChange={handleChange}
+                            />
+                            <label className={`mx-3 ${styles["label"]}`}>3rd</label>
+                          </div>
+                          <div
+                            className={
+                              dark
+                                ? `${styles["radio-item"]} ${styles["radio-item-dark"]}`
+                                : `${styles["radio-item"]} ${styles["radio-item-light"]}`
+                            }
+                          >
+                            <input
+                              type="radio"
+                              name="year"
+                              value={4}
+                              onChange={handleChange}
+                            />
+                            <label className={`mx-3 ${styles["label"]}`}>4th</label>
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className={`${styles["validation"]} validation d-sm-none d-md-block`}
+                      >
+                        {formerrors["year"] ? (
+                          <div>* {formerrors["year"]}</div>
+                        ) : (
+                          <div>&nbsp; &nbsp;</div>
+                        )}
+                      </div>
+                    </div>
+                    <div className={styles["form-group"]}>
+                      <div
+                        className={
+                          dark
+                            ? `${styles["join-us-form-input"]} ${styles["join-us-form-input-dark"]}`
+                            : `${styles["join-us-form-input"]} ${styles["join-us-form-input-light"]}`
+                        }
+                      >
+                        <input
+                          placeholder="College Name"
+                          id="txt_college"
+                          type="text"
+                          name="college"
+                          onChange={handleChange}
+                        />
+                        <i
+                          className={`fas fa-graduation-cap ${styles["graduation"]}`}
+                        ></i>
+                        <div
+                          className={`${styles["validation"]} validation d-sm-none d-md-block`}
+                        >
+                          {formerrors["college"] ? (
+                            <div>* {formerrors["college"]}</div>
+                          ) : (
+                            <div>&nbsp; &nbsp;</div>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                    <div className={styles["submit-btn"]}>
+                      <Button2
+                        className={styles["submit-btn-text"]}
+                        label="Submit"
+                        type="submit"
                       />
-                      <label className={`mx-3 ${styles["label"]}`}>4th</label>
                     </div>
                   </div>
-                </div>
-                <div
-                  className={`${styles["validation"]} validation d-sm-none d-md-block`}
-                >
-                  {formerrors["year"] ? (
-                    <div>* {formerrors["year"]}</div>
-                  ) : (
-                    <div>&nbsp; &nbsp;</div>
-                  )}
-                </div>
-              </div>
-              <div className={styles["form-group"]}>
-                <div
-                  className={
-                    dark
-                      ? `${styles["join-us-form-input"]} ${styles["join-us-form-input-dark"]}`
-                      : `${styles["join-us-form-input"]} ${styles["join-us-form-input-light"]}`
-                  }
-                >
-                  <input
-                    placeholder="College Name"
-                    id="txt_college"
-                    type="text"
-                    name="college"
-                    onChange={handleChange}
-                  />
-                  <i
-                    className={`fas fa-graduation-cap ${styles["graduation"]}`}
-                  ></i>
-                  <div
-                    className={`${styles["validation"]} validation d-sm-none d-md-block`}
-                  >
-                    {formerrors["college"] ? (
-                      <div>* {formerrors["college"]}</div>
-                    ) : (
-                      <div>&nbsp; &nbsp;</div>
-                    )}
-                  </div>
-                </div>
+                </form>
               </div>
-              <div className={styles["submit-btn"]}>
-                <Button2
-                  className={styles["submit-btn-text"]}
-                  label="Submit"
-                  type="submit"
-                />
-              </div>
-            </div>
-          </form>
+          }
         </div>
       </div>
-    </div>
+      {toast.toastStatus && (
+        <SimpleToast
+          open={toast.toastStatus}
+          message={toast.toastMessage}
+          handleCloseToast={() => { setToast({ toastStatus: false, toastMessage: "", toastType: '' }) }}
+          severity={toast.toastType}
+        />
+      )}
+    </>
   );
 };
diff --git a/frontend/src/pages/Home/components/JoinUsForm/form.module.scss b/frontend/src/pages/Home/components/JoinUsForm/form.module.scss
index 448c06de..435cf9ea 100644
--- a/frontend/src/pages/Home/components/JoinUsForm/form.module.scss
+++ b/frontend/src/pages/Home/components/JoinUsForm/form.module.scss
@@ -201,9 +201,12 @@
   --rmsc-border: #ccc !important;
   --rmsc-gray: #aaa !important;
   --rmsc-bg: #333333 !important;
-  --rmsc-p: 10px !important; /* Spacing */
-  --rmsc-radius: 4px !important; /* Radius */
-  --rmsc-h: 38px !important; /* Height */
+  --rmsc-p: 10px !important;
+  /* Spacing */
+  --rmsc-radius: 4px !important;
+  /* Radius */
+  --rmsc-h: 38px !important;
+  /* Height */
 }
 
 .dropdown {
@@ -211,9 +214,12 @@
   --rmsc-selected: #474343 !important;
   --rmsc-border: #838383 !important;
   --rmsc-bg: #e7e7e7 !important;
-  --rmsc-p: 10px !important; /* Spacing */
-  --rmsc-radius: 4px !important; /* Radius */
-  --rmsc-h: 38px !important; /* Height */
+  --rmsc-p: 10px !important;
+  /* Spacing */
+  --rmsc-radius: 4px !important;
+  /* Radius */
+  --rmsc-h: 38px !important;
+  /* Height */
 }
 
 .valid {
@@ -284,7 +290,7 @@
   background-color: transparent;
 }
 
-.checkbox-item input[type="checkbox"]:checked + label:after {
+.checkbox-item input[type="checkbox"]:checked+label:after {
   width: 20px;
   height: 20px;
   position: absolute;
@@ -292,11 +298,9 @@
   left: 8px;
   content: " ";
   display: block;
-  background-image: linear-gradient(
-    to right,
-    rgba(255, 0, 90, 1),
-    rgba(10, 24, 61, 1)
-  );
+  background-image: linear-gradient(to right,
+      rgba(255, 0, 90, 1),
+      rgba(10, 24, 61, 1));
   border: 4px solid whitesmoke;
 }
 
@@ -307,7 +311,7 @@
   margin-bottom: 10px;
 }
 
-.radio-item input[type="radio"]:checked + label:after {
+.radio-item input[type="radio"]:checked+label:after {
   border-radius: 50%;
   width: 20px;
   height: 20px;
@@ -319,12 +323,10 @@
   border: 4px solid whitesmoke;
 }
 
-.radio-item-light input[type="radio"]:checked + label:after {
-  background-image: linear-gradient(
-    to right,
-    rgba(255, 0, 90, 1),
-    rgba(10, 24, 61, 1)
-  );
+.radio-item-light input[type="radio"]:checked+label:after {
+  background-image: linear-gradient(to right,
+      rgba(255, 0, 90, 1),
+      rgba(10, 24, 61, 1));
 }
 
 .validation {
@@ -333,7 +335,7 @@
 }
 
 // for dark theme
-.radio-item-dark input[type="radio"]:checked + label:after {
+.radio-item-dark input[type="radio"]:checked+label:after {
   background-image: linear-gradient(to right, #2b5876, #4e4376);
 }
 
@@ -481,3 +483,30 @@ input[type="date"]:not(:valid):before {
     text-align: left;
   }
 }
+
+.goodbye-card {
+  width: 60%;
+  height: auto;
+  background-color: #e7e7e7;
+  margin: 20% auto;
+  border-radius: 10px;
+  box-shadow: 5px 5px 15px #888888, -5px -5px 15px #ffffff;
+}
+
+.card-heading {
+  font-size: 1.6rem;
+  margin-bottom: 3px;
+  padding: 9px 0;
+  text-align: center;
+}
+
+.inside-card {
+  width: 75%;
+  margin: 0 auto;
+  padding-bottom: 32px;
+}
+
+.inside-card p {
+  padding: 0px;
+  font-size: 1.3rem;
+}
\ No newline at end of file
diff --git a/frontend/src/service/JoinUs.jsx b/frontend/src/service/JoinUs.jsx
new file mode 100644
index 00000000..6f770c32
--- /dev/null
+++ b/frontend/src/service/JoinUs.jsx
@@ -0,0 +1,32 @@
+import { END_POINT } from "../config/api";
+import { showToast } from "./toastService";
+
+const postJoinUs = async (data, setToast) => {
+    try {
+      showToast(setToast,"Loading...","info")
+      const response = await fetch(`${END_POINT}/joinUs/`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(data),
+      });
+  
+      if (response.ok) {
+        const _data = await response.json();
+        showToast(setToast, "Form submitted successfully!", "success");
+        return true;
+      } else {
+        const errorData = await response.json();
+        console.error("Error:", errorData);
+        showToast(setToast, "Something went wrong", "error");
+        return false;
+      }
+    } catch (err) {
+      console.error("Network Error:", err);
+      showToast(setToast, "Something went wrong", "error");
+      return false;
+    }
+  };
+  
+  export { postJoinUs };
\ No newline at end of file