Emailjs - able to automatically send email automatically

waybionic/package.json

@@ -9,9 +9,12 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@emailjs/browser": "^4.4.1",
+    "emailjs": "^5.0.0",
     "next": "^15.4.10",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-hot-toast": "^2.6.0",
     "react-responsive-carousel": "^3.2.23"
   },
   "devDependencies": {

waybionic/src/app/contact/components/NonStudent.tsx

@@ -0,0 +1,65 @@
+import React from 'react'
+import NonStudentMessage from './NonStudentMessage'
+import NonStudentInput from './NonStudentInput'
+import emailjs from "@emailjs/browser";
+
+const NonStudent = ({ typeOfContact, setClubInfo, setBusinessInfo, setProfessionInfo, setSponsershipInfo, setPartnershipInfo, setOtherInfo, clubInfo, businessInfo, professionInfo, sponsershipInfo, partnershipInfo, message, setMessage, otherInfo }) => {
+  const getStateValue = () => {
+    switch(typeOfContact) {
+      case "Club":
+        return clubInfo
+      case "Business":
+        return businessInfo
+      case "Industry Professional":
+        return professionInfo
+      case "Sponsorship":
+        return sponsershipInfo
+      case "Partnership":
+        return partnershipInfo
+      case "Professor":
+        return professionInfo
+      default:
+        return otherInfo
+    }
+  }
+
+  const setStateValue = (value: string) => {
+    switch(typeOfContact) {
+      case "Club":
+        setClubInfo(value)
+        break
+      case "Business":
+        setBusinessInfo(value)
+        break
+      case "Industry Professional":
+        setProfessionInfo(value)
+        break
+      case "Sponsorship":
+        setSponsershipInfo(value)
+        break
+      case "Partnership":
+        setPartnershipInfo(value)
+        break
+      case "Professor":
+        setProfessionInfo(value)
+        break
+      default:
+        setOtherInfo(value)
+    } 
+  }
+
+  if (typeOfContact && typeOfContact !== "Student") {
+    return (
+      <>
+        <div>
+          <NonStudentMessage typeOfContact={typeOfContact} />
+          <NonStudentInput getStateValue={getStateValue} setStateValue={setStateValue} />
+        </div>
+      </>
+    )
+  }
+
+  return null
+}
+
+export default NonStudent

waybionic/src/app/contact/components/NonStudentInput.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+
+const NonStudentInput = ({ getStateValue, setStateValue}) => {
+  return (
+    <>
+      <textarea
+        id="message"
+        value={getStateValue()}
+        onChange={(e) => setStateValue(e.target.value)}
+        required
+        rows={6}
+        className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+        placeholder="Type your message here..."
+      />
+    </>
+  )
+}
+
+export default NonStudentInput

waybionic/src/app/contact/components/NonStudentMessage.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+
+type NonStudentMessageProps = {
+  typeOfContact: string;
+};
+
+const messageDictionary = {
+  "Business": "Please enter your business information and interests",
+  "Club": "Please enter your club information and interests",
+  "Industry Professional": "Please enter your profession information and interests",
+  "Professor": "Please enter your professorship information and interests",
+  "Partnership": "Please enter your partnership information and interests",
+  "Sponsorship": "Please enter your sponsorship information and interests",
+  "Other": "Please enter additional information"
+}
+
+const NonStudentMessage = ({typeOfContact} : NonStudentMessageProps) => {
+  return (
+    <>
+      <label
+        className="block text-sm font-medium text-gray-700 mb-2"
+      >
+        {messageDictionary[typeOfContact]}
+      </label>
+    </>
+  )
+}
+
+export default NonStudentMessage

waybionic/src/app/contact/components/Student.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+
+const Student = ({yearOfStudy, setYearOfStudy, fieldOfStudy, setFieldOfStudy}) => {
+  return (
+    <>
+      <div>
+        <label
+          htmlFor="yearOfStudy"
+          className="block text-sm font-medium text-gray-700 mb-2"
+        >
+          Year Of Study
+        </label>
+        <select
+          id="yearOfStudy"
+          value={yearOfStudy}
+          onChange={(e) => (setYearOfStudy(e.target.value))}
+          required
+          className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 "
+        >
+          <option value="1st" className="text-gray-700 mb-2">1st Year</option>
+          <option value="2nd" className="text-gray-700 mb-2">2nd Year</option>
+          <option value="3rd" className="text-gray-700 mb-2">3rd Year</option>
+          <option value="+4th" className="text-gray-700 mb-2">+4th Year</option>
+        </select>
+      </div>
+      <div>
+        <label
+          htmlFor="fieldOfStudy"
+          className="block text-sm font-medium text-gray-700 mb-2"
+        >
+          Field of Study / Interest
+        </label>
+        <select
+          id="fieldOfStudy"
+          value={fieldOfStudy}
+          onChange={(e) => (setFieldOfStudy(e.target.value))}
+          required
+          className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 "
+        >
+          <option value="Electrical Engineering" className="text-gray-700 mb-2">Electrical Engineering</option>
+          <option value="Software Engineering" className="text-gray-700 mb-2">Software Engineering</option>
+          <option value="Biomedical Engineering" className="text-gray-700 mb-2">Biomedical Engineering</option>
+          <option value="Mechanical Engineering" className="text-gray-700 mb-2">Mechanical Engineering</option>
+          <option value="Computer Science" className="text-gray-700 mb-2">Computer Science</option>
+          <option value="Natural Sciences" className="text-gray-700 mb-2">Natural Sciences</option>
+          <option value="Business" className="text-gray-700 mb-2">Business</option>
+          <option value="Other" className="text-gray-700 mb-2">Other</option>
+        </select>
+      </div>
+    </>
+  )
+}
+
+export default Student