From f852bc9f8f1a935092edf9b5098c95aa65b5020f Mon Sep 17 00:00:00 2001 From: Shreeya Adhikari Date: Wed, 3 Jun 2026 00:27:27 -0400 Subject: [PATCH 1/6] Add applicant dashboard and RSVP --- apps/app-portal/package.json | 4 +- .../src/app/(applicant)/dashboard/loading.tsx | 25 +++ .../src/app/(applicant)/dashboard/page.tsx | 25 +-- .../src/app/(applicant)/rsvp/loading.tsx | 16 ++ .../src/app/(applicant)/rsvp/page.tsx | 32 +-- .../src/app/api/v1/post-acceptance/route.ts | 26 ++- .../app-portal/src/app/api/v1/status/route.ts | 15 +- .../src/components/dashboard/AdmittedView.tsx | 69 +++++- .../dashboard/ConfirmByCountdown.tsx | 23 +- .../src/components/dashboard/DeclinedView.tsx | 50 ++++- .../components/dashboard/InProgressView.tsx | 68 +++++- .../src/components/dashboard/PortalShell.tsx | 73 +++++++ .../dashboard/PreRegistrationView.tsx | 85 +++++++- .../components/dashboard/RsvpExperience.tsx | 26 +++ .../src/components/dashboard/RsvpForm.tsx | 201 ++++++++++++++++-- .../components/dashboard/SubmittedView.tsx | 68 +++++- .../components/dashboard/WaitlistedView.tsx | 50 ++++- .../src/components/dashboard/styles.ts | 8 + .../dashboard/useConfirmByCountdown.ts | 63 ++++++ .../src/lib/status/fetchPortalStatus.ts | 27 +++ apps/app-portal/src/lib/status/format.ts | 41 ++++ apps/app-portal/src/lib/status/machine.ts | 14 +- .../src/lib/status/mock-singletons.ts | 10 +- apps/app-portal/src/lib/status/service.ts | 9 +- apps/app-portal/src/lib/status/types.ts | 24 ++- 25 files changed, 944 insertions(+), 108 deletions(-) create mode 100644 apps/app-portal/src/app/(applicant)/dashboard/loading.tsx create mode 100644 apps/app-portal/src/app/(applicant)/rsvp/loading.tsx create mode 100644 apps/app-portal/src/components/dashboard/PortalShell.tsx create mode 100644 apps/app-portal/src/components/dashboard/RsvpExperience.tsx create mode 100644 apps/app-portal/src/components/dashboard/styles.ts create mode 100644 apps/app-portal/src/components/dashboard/useConfirmByCountdown.ts create mode 100644 apps/app-portal/src/lib/status/fetchPortalStatus.ts create mode 100644 apps/app-portal/src/lib/status/format.ts diff --git a/apps/app-portal/package.json b/apps/app-portal/package.json index 2e8c5684..62415b98 100644 --- a/apps/app-portal/package.json +++ b/apps/app-portal/package.json @@ -12,10 +12,12 @@ "dependencies": { "@repo/ui": "*", "@repo/util": "*", + "@hookform/resolvers": "^5.2.2", "next": "^14.2.3", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-hook-form": "^7.75.0" + "react-hook-form": "^7.75.0", + "zod": "^3.25.67" }, "devDependencies": { "@eslint/eslintrc": "^3.1.0", diff --git a/apps/app-portal/src/app/(applicant)/dashboard/loading.tsx b/apps/app-portal/src/app/(applicant)/dashboard/loading.tsx new file mode 100644 index 00000000..3c54a418 --- /dev/null +++ b/apps/app-portal/src/app/(applicant)/dashboard/loading.tsx @@ -0,0 +1,25 @@ +export default function Loading(): JSX.Element { + return ( +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ); +} \ No newline at end of file diff --git a/apps/app-portal/src/app/(applicant)/dashboard/page.tsx b/apps/app-portal/src/app/(applicant)/dashboard/page.tsx index b9a78d3e..67a4324b 100644 --- a/apps/app-portal/src/app/(applicant)/dashboard/page.tsx +++ b/apps/app-portal/src/app/(applicant)/dashboard/page.tsx @@ -1,7 +1,5 @@ import React from "react"; -import { returnDashboardBranch } from "../../../lib/status/machine"; -import { decisionDates } from "../../../lib/status/mock-singletons"; -import { getApplicantStatus } from "../../../lib/status/service"; +import { fetchPortalStatus } from "../../../lib/status/fetchPortalStatus"; import PreRegistrationView from "../../../components/dashboard/PreRegistrationView"; import InProgressView from "../../../components/dashboard/InProgressView"; import SubmittedView from "../../../components/dashboard/SubmittedView"; @@ -10,24 +8,27 @@ import WaitlistedView from "../../../components/dashboard/WaitlistedView"; import DeclinedView from "../../../components/dashboard/DeclinedView"; export default async function DashboardPage(): Promise { - const status = await getApplicantStatus("mock-user"); - const showDecision = new Date() >= decisionDates.showDecision; - const branch = returnDashboardBranch(status, decisionDates, showDecision); + const { branch, status, decisionDates } = await fetchPortalStatus(); + const resolvedDates = { + registrationOpen: new Date(decisionDates.registrationOpen), + showDecision: new Date(decisionDates.showDecision), + confirmBy: new Date(decisionDates.confirmBy), + }; switch (branch) { case "pre-registration": - return ; + return ; case "in-progress": - return ; + return ; case "submitted": - return ; + return ; case "admitted": - return ; + return ; case "waitlisted": - return ; + return ; case "declined": return ; default: - return ; + return ; } } diff --git a/apps/app-portal/src/app/(applicant)/rsvp/loading.tsx b/apps/app-portal/src/app/(applicant)/rsvp/loading.tsx new file mode 100644 index 00000000..7d62782e --- /dev/null +++ b/apps/app-portal/src/app/(applicant)/rsvp/loading.tsx @@ -0,0 +1,16 @@ +export default function Loading(): JSX.Element { + return ( +
+
+
+
+
+
+
+
+
+
+
+
+ ); +} \ No newline at end of file diff --git a/apps/app-portal/src/app/(applicant)/rsvp/page.tsx b/apps/app-portal/src/app/(applicant)/rsvp/page.tsx index cdda45cd..de6a4005 100644 --- a/apps/app-portal/src/app/(applicant)/rsvp/page.tsx +++ b/apps/app-portal/src/app/(applicant)/rsvp/page.tsx @@ -1,28 +1,16 @@ import React from "react"; -import { decisionDates } from "../../../lib/status/mock-singletons"; -import { getApplicantStatus } from "../../../lib/status/service"; -import ConfirmByCountdown from "../../../components/dashboard/ConfirmByCountdown"; -import RsvpForm from "../../../components/dashboard/RsvpForm"; +import { redirect } from "next/navigation"; +import { fetchPortalStatus } from "../../../lib/status/fetchPortalStatus"; +import RsvpExperience from "../../../components/dashboard/RsvpExperience"; export default async function RsvpPage(): Promise { - const status = await getApplicantStatus("mock-user"); - const isAdmitted = status.decisionStatus === "admitted"; - const isAfterConfirmBy = new Date() > decisionDates.confirmBy; - const canRsvp = isAdmitted && !isAfterConfirmBy; + const { branch, status, decisionDates } = await fetchPortalStatus(); + const confirmBy = new Date(decisionDates.confirmBy); + const isAfterConfirmBy = Date.now() > confirmBy.getTime(); - return ( -
-

Post-acceptance RSVP

-

confirm your attendance.

-
- -
+ if (branch !== "admitted" || isAfterConfirmBy) { + redirect("/dashboard"); + } - {canRsvp ? ( - - ) : ( -

no RSVP available

- )} -
- ); + return ; } diff --git a/apps/app-portal/src/app/api/v1/post-acceptance/route.ts b/apps/app-portal/src/app/api/v1/post-acceptance/route.ts index 6cf6f31a..0cfc1db3 100644 --- a/apps/app-portal/src/app/api/v1/post-acceptance/route.ts +++ b/apps/app-portal/src/app/api/v1/post-acceptance/route.ts @@ -1,5 +1,27 @@ import { NextResponse } from "next/server"; +import { z } from "zod"; +import { saveRsvp } from "../../../../lib/status/service"; -export async function POST() { - return NextResponse.json({ error: "error 501" }, { status: 501 }); +const rsvpSchema = z.object({ + attending: z.enum(["yes", "no"]), + dietaryRestrictions: z.string().max(240), + tshirtSize: z.enum(["xs", "s", "m", "l", "xl"]), + accessibilityNeeds: z.string().max(240), + additionalNotes: z.string().max(400), +}); + +export async function POST(request: Request) { + try { + const body = await request.json(); + const parsed = rsvpSchema.parse(body); + + await saveRsvp("mock-user", parsed); + + return NextResponse.json({ success: true }); + } catch { + return NextResponse.json( + { error: "Unable to save RSVP right now" }, + { status: 400 }, + ); + } } diff --git a/apps/app-portal/src/app/api/v1/status/route.ts b/apps/app-portal/src/app/api/v1/status/route.ts index 1fef0acd..1021b11b 100644 --- a/apps/app-portal/src/app/api/v1/status/route.ts +++ b/apps/app-portal/src/app/api/v1/status/route.ts @@ -1,9 +1,22 @@ import { NextResponse } from "next/server"; +import { decisionDates } from "../../../../lib/status/mock-singletons"; +import { returnDashboardBranch } from "../../../../lib/status/machine"; import { getApplicantStatus } from "../../../../lib/status/service"; export async function GET() { const status = await getApplicantStatus("mock-user"); - return NextResponse.json(status); + const showDecision = new Date() >= decisionDates.showDecision; + const branch = returnDashboardBranch(status, decisionDates, showDecision); + + return NextResponse.json({ + branch, + status, + decisionDates: { + registrationOpen: decisionDates.registrationOpen.toISOString(), + showDecision: decisionDates.showDecision.toISOString(), + confirmBy: decisionDates.confirmBy.toISOString(), + }, + }); } export async function POST() { diff --git a/apps/app-portal/src/components/dashboard/AdmittedView.tsx b/apps/app-portal/src/components/dashboard/AdmittedView.tsx index 9ccd0ea9..94543dba 100644 --- a/apps/app-portal/src/components/dashboard/AdmittedView.tsx +++ b/apps/app-portal/src/components/dashboard/AdmittedView.tsx @@ -1,13 +1,68 @@ import React from "react"; import Link from "next/link"; +import PortalShell from "./PortalShell"; +import { formatLongDate } from "../../lib/status/format"; +import { primaryActionClass, secondaryActionClass, statCardClass } from "./styles"; +import type { ApplicantStatus, DecisionDates } from "../../lib/status/types"; -export default function AdmittedView(): JSX.Element { +type AdmittedViewProps = { + status: ApplicantStatus; + decisionDates: DecisionDates; +}; + +export default function AdmittedView({ + status, + decisionDates, +}: AdmittedViewProps): JSX.Element { return ( -
-

Acceptance message.

- - Link to RSVP - -
+ +

+ Confirm-by window +

+

+ RSVP before {formatLongDate(decisionDates.confirmBy)} to hold your + spot. +

+

+ This is the branch where admitted applicants get a clear and urgent + next step. +

+ + } + description={ + <> + You're in. Celebrate for a second, then hop over to RSVP so we + can finalize your attendance details. + + } + eyebrow="Admission decision" + primaryAction={ + + RSVP now + + } + secondaryAction={ + + Refresh status + + } + title={<>You're in!} + > +
+

+ RSVP status +

+

+ {status.rsvpStatus === "submitted" ? "Confirmed" : "Needs RSVP"} +

+

+ {status.rsvpStatus === "submitted" + ? "Thanks for confirming your attendance." + : "Please complete the RSVP form before the deadline."} +

+
+ ); } diff --git a/apps/app-portal/src/components/dashboard/ConfirmByCountdown.tsx b/apps/app-portal/src/components/dashboard/ConfirmByCountdown.tsx index 64e55e36..e62c4239 100644 --- a/apps/app-portal/src/components/dashboard/ConfirmByCountdown.tsx +++ b/apps/app-portal/src/components/dashboard/ConfirmByCountdown.tsx @@ -1,23 +1,26 @@ import React from "react"; +import useConfirmByCountdown from "./useConfirmByCountdown"; type ConfirmByCountdownProps = { - confirmBy: Date; + confirmBy: string; }; export default function ConfirmByCountdown({ confirmBy, }: ConfirmByCountdownProps): JSX.Element { - const isClosed = new Date() > confirmBy; - let disabledLabel = "no"; - - if (isClosed) { - disabledLabel = "yes"; - } + const { expired, label } = useConfirmByCountdown(confirmBy); return ( -
-
RSVP deadline: {String(confirmBy)}
-
RSVP form disabled: {disabledLabel}
+
+
+ Confirm-by deadline +
+
+ {label} +
+
+ {expired ? "RSVP is closed." : "The form updates every minute."} +
); } diff --git a/apps/app-portal/src/components/dashboard/DeclinedView.tsx b/apps/app-portal/src/components/dashboard/DeclinedView.tsx index 4fd2a8dc..d56d0bc6 100644 --- a/apps/app-portal/src/components/dashboard/DeclinedView.tsx +++ b/apps/app-portal/src/components/dashboard/DeclinedView.tsx @@ -1,9 +1,53 @@ import React from "react"; +import Link from "next/link"; +import PortalShell from "./PortalShell"; +import { primaryActionClass, secondaryActionClass, statCardClass } from "./styles"; export default function DeclinedView(): JSX.Element { return ( -
-

Declined message

-
+ +

+ Keep in touch +

+

+ The portal is still a good way to stay connected. We hope to see you + next year. +

+
+ } + description={ + <> + We're sorry this cycle didn't work out. We appreciate your + interest and hope you'll stay in the orbit for future events. + + } + eyebrow="Decision update" + primaryAction={ + + Join the mailing list + + } + secondaryAction={ + + Refresh status + + } + title={<>We hope to see you next year} + > +
+

+ Next step +

+

+ Stay connected for the next cycle +

+

+ We'll keep sharing updates, and the mailing list is the easiest + place to hear about the next application window. +

+
+ ); } diff --git a/apps/app-portal/src/components/dashboard/InProgressView.tsx b/apps/app-portal/src/components/dashboard/InProgressView.tsx index 48292573..32d3d04c 100644 --- a/apps/app-portal/src/components/dashboard/InProgressView.tsx +++ b/apps/app-portal/src/components/dashboard/InProgressView.tsx @@ -1,13 +1,67 @@ import React from "react"; import Link from "next/link"; +import PortalShell from "./PortalShell"; +import { formatPercentComplete } from "../../lib/status/format"; +import { primaryActionClass, secondaryActionClass, statCardClass } from "./styles"; +import type { ApplicantStatus } from "../../lib/status/types"; + +type InProgressViewProps = { + status: ApplicantStatus; +}; + +export default function InProgressView({ status }: InProgressViewProps): JSX.Element { + const progressPercent = status.applicationStatus === "in-progress" ? 42 : 100; -export default function InProgressView(): JSX.Element { return ( -
-

Draft saved

- - Link to continue application - -
+ +

+ Status snapshot +

+
+

Current mock state

+

+ {formatPercentComplete(progressPercent)} +

+
+

+ We can wire a real completion tracker later. For now, the important + part is giving applicants a clear path back into the draft. +

+ + } + description={ + <> + You’ve started your application. Jump back in where you left off and + keep moving toward submission. + + } + eyebrow="Application draft" + primaryAction={ + + Continue application + + } + secondaryAction={ + + Refresh status + + } + title={<>You've started your application} + > +
+

+ Completion +

+

+ {formatPercentComplete(progressPercent)} +

+

+ This is a temporary completion value until the application sections are + wired up. +

+
+ ); } diff --git a/apps/app-portal/src/components/dashboard/PortalShell.tsx b/apps/app-portal/src/components/dashboard/PortalShell.tsx new file mode 100644 index 00000000..9d9ab058 --- /dev/null +++ b/apps/app-portal/src/components/dashboard/PortalShell.tsx @@ -0,0 +1,73 @@ +import Link from "next/link"; +import type { ReactNode } from "react"; + +type PortalShellProps = { + eyebrow: string; + title: ReactNode; + description: ReactNode; + primaryAction?: ReactNode; + secondaryAction?: ReactNode; + aside?: ReactNode; + children?: ReactNode; +}; + +export default function PortalShell({ + eyebrow, + title, + description, + primaryAction, + secondaryAction, + aside, + children, +}: PortalShellProps): JSX.Element { + return ( +
+
+
+
+ {eyebrow} +
+
+

+ {title} +

+

+ {description} +

+
+
+ +
+
+
{children}
+ {(primaryAction || secondaryAction) && ( +
+ {primaryAction} + {secondaryAction} +
+ )} +
+ + {aside ? ( + + ) : ( +
+

+ Review the status mock in the route handler to preview the other + branches. +

+ + Reload dashboard + +
+ )} +
+
+
+ ); +} \ No newline at end of file diff --git a/apps/app-portal/src/components/dashboard/PreRegistrationView.tsx b/apps/app-portal/src/components/dashboard/PreRegistrationView.tsx index 1f19c422..6fbf63c7 100644 --- a/apps/app-portal/src/components/dashboard/PreRegistrationView.tsx +++ b/apps/app-portal/src/components/dashboard/PreRegistrationView.tsx @@ -1,9 +1,86 @@ import React from "react"; +import Link from "next/link"; +import PortalShell from "./PortalShell"; +import { formatCountdownLabel, formatLongDate } from "../../lib/status/format"; +import { statCardClass, primaryActionClass, secondaryActionClass } from "./styles"; +import type { DecisionDates } from "../../lib/status/types"; + +type PreRegistrationViewProps = { + decisionDates: DecisionDates; +}; + +export default function PreRegistrationView({ + decisionDates, +}: PreRegistrationViewProps): JSX.Element { + const registrationCountdown = formatCountdownLabel(decisionDates.registrationOpen); -export default function PreRegistrationView(): JSX.Element { return ( -
-

Applications open soon

-
+ +
+

+ Next step +

+

+ Applications are opening soon. +

+
+
+

+ We’ll open the application on {formatLongDate(decisionDates.registrationOpen)}. +

+

+ The portal will switch automatically once registration is live. +

+
+ + } + description={ + <> + The dashboard is waiting for registration to open. In the meantime, + we’re counting down the days and getting everything ready. + + } + eyebrow="Application portal" + primaryAction={ + + Learn more about HackBeanpot + + } + secondaryAction={ + + Refresh status + + } + title={<>Applications open in {registrationCountdown}} + > +
+
+

+ Opens +

+

+ {formatLongDate(decisionDates.registrationOpen)} +

+
+
+

+ Decision date +

+

+ {formatLongDate(decisionDates.showDecision)} +

+
+
+

+ Confirm by +

+

+ {formatLongDate(decisionDates.confirmBy)} +

+
+
+ ); } diff --git a/apps/app-portal/src/components/dashboard/RsvpExperience.tsx b/apps/app-portal/src/components/dashboard/RsvpExperience.tsx new file mode 100644 index 00000000..cac495eb --- /dev/null +++ b/apps/app-portal/src/components/dashboard/RsvpExperience.tsx @@ -0,0 +1,26 @@ +"use client"; + +import ConfirmByCountdown from "./ConfirmByCountdown"; +import RsvpForm from "./RsvpForm"; + +type RsvpExperienceProps = { + confirmBy: string; + alreadySubmitted: boolean; +}; + +export default function RsvpExperience({ + confirmBy, + alreadySubmitted, +}: RsvpExperienceProps): JSX.Element { + return ( +
+ + {alreadySubmitted && ( +
+ RSVP received. You can still update your details before the deadline. +
+ )} + +
+ ); +} diff --git a/apps/app-portal/src/components/dashboard/RsvpForm.tsx b/apps/app-portal/src/components/dashboard/RsvpForm.tsx index 866cabc9..1ec1c0ee 100644 --- a/apps/app-portal/src/components/dashboard/RsvpForm.tsx +++ b/apps/app-portal/src/components/dashboard/RsvpForm.tsx @@ -2,32 +2,193 @@ import React from "react"; import { useForm } from "react-hook-form"; +import { z } from "zod"; +import { zodResolver } from "@hookform/resolvers/zod"; +import { useRouter } from "next/navigation"; -type RsvpFormValues = { - attending: "yes" | "no"; +const rsvpSchema = z.object({ + attending: z.enum(["yes", "no"], { + required_error: "Please choose whether you’re attending.", + }), + dietaryRestrictions: z.string().max(240).optional().or(z.literal("")), + tshirtSize: z.enum(["xs", "s", "m", "l", "xl"], { + required_error: "Please choose a t-shirt size.", + }), + accessibilityNeeds: z.string().max(240).optional().or(z.literal("")), + additionalNotes: z.string().max(400).optional().or(z.literal("")), +}); + +type RsvpFormValues = z.infer; + +type RsvpFormProps = { + confirmBy: string; }; -export default function RsvpForm(): JSX.Element { - const { register, handleSubmit } = useForm(); +const sizeOptions = [ + { value: "xs", label: "XS" }, + { value: "s", label: "S" }, + { value: "m", label: "M" }, + { value: "l", label: "L" }, + { value: "xl", label: "XL" }, +] as const; + +export default function RsvpForm({ confirmBy }: RsvpFormProps): JSX.Element { + const router = useRouter(); + const [toast, setToast] = React.useState<{ + type: "success" | "error"; + message: string; + } | null>(null); + const [isSubmitting, setIsSubmitting] = React.useState(false); + + const { register, handleSubmit, formState: { errors } } = useForm({ + resolver: zodResolver(rsvpSchema), + defaultValues: { + attending: "yes", + dietaryRestrictions: "", + tshirtSize: "m", + accessibilityNeeds: "", + additionalNotes: "", + }, + }); + + React.useEffect(() => { + if (!toast) { + return; + } + + const timer = window.setTimeout(() => setToast(null), 4000); + return () => window.clearTimeout(timer); + }, [toast]); + + const isExpired = new Date() > new Date(confirmBy); + + const onSubmit = async (values: RsvpFormValues) => { + if (isExpired) { + setToast({ + type: "error", + message: "The confirm-by deadline has passed.", + }); + return; + } + + setIsSubmitting(true); - const onSubmit = (values: RsvpFormValues) => { - void values; + try { + const response = await fetch("/api/v1/post-acceptance", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(values), + }); + + if (!response.ok) { + throw new Error("Unable to submit RSVP"); + } + + setToast({ + type: "success", + message: "RSVP submitted successfully. Redirecting to your dashboard.", + }); + + window.setTimeout(() => { + router.push("/dashboard"); + router.refresh(); + }, 1000); + } catch { + setToast({ + type: "error", + message: "We couldn’t submit your RSVP. Please try again.", + }); + } finally { + setIsSubmitting(false); + } }; return ( -
- - - -
+
+ {toast && ( +
+ {toast.message} +
+ )} + +
+
+ + + +
+ + + +