feat: add RSVP message to portal (#252)

* feat: add RSVP message to portal

* fix: portal confirmation visibility

* Update apps/site/src/app/(main)/portal/@applicant/ConfirmAttendance.tsx

lgtm

Co-authored-by: Taesung Hwang <[email protected]>

---------

Co-authored-by: Taesung Hwang <[email protected]>
~Co-authored-by: Ruslan Manoharan <[email protected]>~

Author: njhuey

apps/site/src/app/(main)/portal/@applicant/ApplicantPortal.tsx

@@ -2,6 +2,7 @@ import { redirect } from "next/navigation";
 
 import getUserIdentity from "@/lib/utils/getUserIdentity";
 
+import ConfirmAttendance from "./ConfirmAttendance";
 import Message from "./Message";
 import VerticalTimeline from "./VerticalTimeline";
 import SignWaiver from "./SignWaiver";
@@ -24,17 +25,18 @@ async function Portal() {
 		redirect("/apply");
 	}
 
-	const isAccepted =
-		status === PortalStatus.accepted ||
-		status === PortalStatus.waived ||
-		status === PortalStatus.confirmed;
+	const submittedWaiver =
+		status === PortalStatus.waived || status === PortalStatus.confirmed;
+
+	const isAccepted = status === PortalStatus.accepted || submittedWaiver;
 
 	return (
 		<div className="bg-white text-black max-w-4xl rounded-2xl p-6 flex flex-col mb-24 w-full">
 			<h2 className="text-4xl font-semibold">Status</h2>
 			<VerticalTimeline status={status as PortalStatus} />
 			<Message status={status as PortalStatus} />
 			{isAccepted && <SignWaiver status={status as PortalStatus} />}
+			{submittedWaiver && <ConfirmAttendance status={status} />}
 		</div>
 	);
 }

apps/site/src/app/(main)/portal/@applicant/ConfirmAttendance.tsx

@@ -0,0 +1,36 @@
+import { PortalStatus } from "./ApplicantPortal";
+import Button from "@/lib/components/Button/Button";
+
+interface ConfirmAttendanceProps {
+	status: PortalStatus;
+}
+
+function ConfirmAttendance({ status }: ConfirmAttendanceProps) {
+	const buttonText =
+		status === PortalStatus.confirmed
+			? "I am no longer able to attend IrvineHacks 2024"
+			: "I will be attending IrvineHacks 2024";
+
+	return (
+		<div className="mt-4">
+			<hr />
+			<h3 className="text-3xl my-4">RSVP</h3>
+			{status === PortalStatus.confirmed ? (
+				<p>
+					Thank you for confirming your attendance. We look forward to seeing
+					you at the event!
+				</p>
+			) : (
+				<p>
+					If you plan on attending IrvineHacks 2024, please confirm your
+					attendance below!
+				</p>
+			)}
+			<form method="post" action="/api/user/rsvp">
+				<Button className="text-color-red" text={buttonText} />
+			</form>
+		</div>
+	);
+}
+
+export default ConfirmAttendance;

apps/site/src/app/(main)/portal/@applicant/Message.tsx

@@ -46,7 +46,12 @@ function Message({ status }: MessageProps) {
 				event!
 			</>
 		),
-		[PortalStatus.confirmed]: <></>,
+		[PortalStatus.confirmed]: (
+			<p>
+				Thank you for confirming your attendance! We look forward to seeing you
+				at IrvineHacks!
+			</p>
+		),
 	};
 
 	return <div>{messages[status]}</div>;

apps/site/src/app/(main)/portal/@applicant/SignWaiver.tsx

@@ -10,7 +10,8 @@ function SignWaiver({ status }: SignWaiverProps) {
 	return status === PortalStatus.waived ? null : (
 		<div>
 			<hr />
-			<p>
+			<h3 className="text-3xl my-4">Waiver</h3>
+			<p className="mt-4">
 				In order to attend IrvineHacks 2024, please fill out the waiver below
 			</p>
 			<Button