From 900ce6eb7fec16171d35160ddd5379ae6517a020 Mon Sep 17 00:00:00 2001
From: Ian Dai <56898254+IanWearsHat@users.noreply.github.com>
Date: Mon, 18 Dec 2023 01:28:03 -0800
Subject: [PATCH] Setup/application preface (#110)

Preface is shown before actual application.

Clicking button will add query parameter /apply?prefaceAccepted=true which will allow the application component to render

Advertises mentor and volunteer forms at bottom
---
 apps/site/src/app/apply/page.tsx              | 76 +++++++++++--------
 .../ApplyConfirmation/ApplyConfirm.tsx        | 11 +++
 .../ConfirmationDetails.module.scss           | 16 ++++
 .../ApplyConfirmation/ConfirmationDetails.tsx | 49 ++++++++++++
 4 files changed, 122 insertions(+), 30 deletions(-)
 create mode 100644 apps/site/src/app/apply/sections/ApplyConfirmation/ApplyConfirm.tsx
 create mode 100644 apps/site/src/app/apply/sections/ApplyConfirmation/ConfirmationDetails.module.scss
 create mode 100644 apps/site/src/app/apply/sections/ApplyConfirmation/ConfirmationDetails.tsx

diff --git a/apps/site/src/app/apply/page.tsx b/apps/site/src/app/apply/page.tsx
index f706083e..c469ccc3 100644
--- a/apps/site/src/app/apply/page.tsx
+++ b/apps/site/src/app/apply/page.tsx
@@ -3,6 +3,7 @@ import Image from "next/image";
 import koiLeft from "@/assets/images/koi-swim-left.png";
 import koiRight from "@/assets/images/koi-swim-right.png";
 
+import ApplyConfirm from "./sections/ApplyConfirmation/ApplyConfirm";
 import Form from "./sections/Form/Form";
 import Title from "./sections/Title/Title";
 
@@ -10,37 +11,52 @@ import styles from "./Apply.module.scss";
 
 export const revalidate = 60;
 
-export default function Apply() {
+export default function Apply({
+	searchParams,
+}: {
+	searchParams?: {
+		prefaceAccepted?: string;
+	};
+}) {
+	const applyBody =
+		searchParams !== undefined &&
+		searchParams?.prefaceAccepted === "true" ? (
+			<>
+				<Title />
+				<div className="relative w-full flex flex-col items-center">
+					<Image
+						src={koiLeft}
+						height="250"
+						alt="Koi fish"
+						className={`${styles.image} absolute top-0 right-0`}
+					/>
+					<Image
+						src={koiRight}
+						height="250"
+						alt="Koi fish"
+						className={`${styles.image} absolute top-1/4 left-0`}
+					/>
+					<Image
+						src={koiLeft}
+						height="250"
+						alt="Koi fish"
+						className={`${styles.image} absolute top-1/2 right-0`}
+					/>
+					<Image
+						src={koiRight}
+						height="250"
+						alt="Koi fish"
+						className={`${styles.image} absolute top-3/4 left-0`}
+					/>
+					<Form />
+				</div>
+			</>
+		) : (
+			<ApplyConfirm />
+		);
 	return (
-		<div className="flex flex-col items-center gap-10 my-32">
-			<Title />
-			<div className="relative w-full flex flex-col items-center">
-				<Image
-					src={koiLeft}
-					height="250"
-					alt="Koi fish"
-					className={`${styles.image} absolute top-0 right-0`}
-				/>
-				<Image
-					src={koiRight}
-					height="250"
-					alt="Koi fish"
-					className={`${styles.image} absolute top-1/4 left-0`}
-				/>
-				<Image
-					src={koiLeft}
-					height="250"
-					alt="Koi fish"
-					className={`${styles.image} absolute top-1/2 right-0`}
-				/>
-				<Image
-					src={koiRight}
-					height="250"
-					alt="Koi fish"
-					className={`${styles.image} absolute top-3/4 left-0`}
-				/>
-				<Form />
-			</div>
+		<div className="flex flex-col items-center gap-10 my-32 min-h-[calc(100vh-8rem)]">
+			{applyBody}
 		</div>
 	);
 }
diff --git a/apps/site/src/app/apply/sections/ApplyConfirmation/ApplyConfirm.tsx b/apps/site/src/app/apply/sections/ApplyConfirmation/ApplyConfirm.tsx
new file mode 100644
index 00000000..6fb0bc10
--- /dev/null
+++ b/apps/site/src/app/apply/sections/ApplyConfirmation/ApplyConfirm.tsx
@@ -0,0 +1,11 @@
+import getUserIdentity from "@/lib/utils/getUserIdentity";
+import ConfirmationDetails from "./ConfirmationDetails";
+
+export default async function ApplyConfirm() {
+	const identity = await getUserIdentity();
+	return (
+		<div className="flex flex-col items-center gap-10">
+			<ConfirmationDetails isLoggedIn={identity.uid !== null} />
+		</div>
+	);
+}
diff --git a/apps/site/src/app/apply/sections/ApplyConfirmation/ConfirmationDetails.module.scss b/apps/site/src/app/apply/sections/ApplyConfirmation/ConfirmationDetails.module.scss
new file mode 100644
index 00000000..8274591d
--- /dev/null
+++ b/apps/site/src/app/apply/sections/ApplyConfirmation/ConfirmationDetails.module.scss
@@ -0,0 +1,16 @@
+.header {
+	color: var(--color-brown);
+}
+
+.details {
+	background-color: #ffffff;
+	border-radius: 10px;
+
+	& > p {
+		color: #432810;
+	}
+}
+
+.policy {
+	color: var(--color-brown);
+}
diff --git a/apps/site/src/app/apply/sections/ApplyConfirmation/ConfirmationDetails.tsx b/apps/site/src/app/apply/sections/ApplyConfirmation/ConfirmationDetails.tsx
new file mode 100644
index 00000000..5fa9cc81
--- /dev/null
+++ b/apps/site/src/app/apply/sections/ApplyConfirmation/ConfirmationDetails.tsx
@@ -0,0 +1,49 @@
+import Button from "@/lib/components/Button/Button";
+import styles from "./ConfirmationDetails.module.scss";
+import Link from "next/link";
+
+interface ConfirmationDetailsProps {
+	isLoggedIn: boolean;
+}
+
+export default async function ConfirmationDetails({
+	isLoggedIn,
+}: ConfirmationDetailsProps) {
+	return (
+		<div
+			className={`${styles.details} w-8/12 flex flex-col items-center p-12 gap-10 z-1 max-[800px]:w-9/12 max-[400px]:w-11/12`}
+		>
+			<h1 className={`${styles.header} text-5xl`}>Before Applying</h1>
+			<p className={`${styles.policy} text-lg`}>
+				By submitting an application for IrvineHacks 2024, I understand
+				that IrvineHacks will take place in person during the day from
+				January 26 to 28, and that IrvineHacks will not be providing
+				transportation or overnight accommodations. In addition, I
+				understand that I must check in at certain times on all three
+				event days in order to be eligible to win prizes. Lastly, I
+				acknowledge that I am currently a student enrolled in an
+				accredited high school, college, or university in the United
+				States and will be over the age of 18 by January 26th, 2024.
+			</p>
+			<strong className="text-lg text-[#FF2222]">
+				Applications are due on January 14th, 2024 at 11:59PM PST.
+			</strong>
+			<Button
+				text={isLoggedIn ? "Proceed to Application" : "Log in to Apply"}
+				href={isLoggedIn ? "/apply?prefaceAccepted=true" : "/login"}
+			/>
+			<hr className="mt-5 w-full h-0.5 bg-[#432810]" />
+			<p className="text-display">
+				Interested in helping out instead? Consider applying to be a{" "}
+				<Link className="underline" href="/mentor">
+					mentor
+				</Link>{" "}
+				or a{" "}
+				<Link className="underline" href="/volunteer">
+					volunteer
+				</Link>
+				.
+			</p>
+		</div>
+	);
+}