User Onboarding Flow

apps/web/src/app/(pages)/(dashboard)/layout.tsx

@@ -1,6 +1,7 @@
 import { Toaster } from "@cooper/ui/toaster";
 
 import HeaderLayout from "~/app/_components/header-layout";
+import OnboardingWrapper from "~/app/_components/onboarding/onboarding-wrapper";
 
 export default function RootLayout({
   children,
@@ -9,8 +10,10 @@ export default function RootLayout({
 }) {
   return (
     <HeaderLayout>
-      {children}
-      <Toaster />
+      <OnboardingWrapper>
+        {children}
+        <Toaster />
+      </OnboardingWrapper>
     </HeaderLayout>
   );
 }

apps/web/src/app/_components/onboarding/constants/index.ts

@@ -0,0 +1,21 @@
+export const monthOptions = [
+  { value: "1", label: "January" },
+  { value: "2", label: "February" },
+  { value: "3", label: "March" },
+  { value: "4", label: "April" },
+  { value: "5", label: "May" },
+  { value: "6", label: "June" },
+  { value: "7", label: "July" },
+  { value: "8", label: "August" },
+  { value: "9", label: "September" },
+  { value: "10", label: "October" },
+  { value: "11", label: "November" },
+  { value: "12", label: "December" },
+];
+
+export const majors = [
+  "Computer Science",
+  "Computer Science + Math",
+  "Computer Science + Business",
+  "Computer Science + Design",
+];

apps/web/src/app/_components/onboarding/dialog.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { useState } from "react";
+
+import type { Session } from "@cooper/auth";
+import { Dialog, DialogContent } from "@cooper/ui/dialog";
+
+import { OnboardingForm } from "~/app/_components/onboarding/onboarding-form";
+import { api } from "~/trpc/react";
+
+interface OnboardingDialogProps {
+  isOpen?: boolean;
+  session: Session | null;
+}
+
+/**
+ * OnboardingDialog component that handles user onboarding.
+ * Implementation note: Use OnboardingWrapper to wrap the component and initiate the dialog.
+ * @param isOpen - Whether the dialog is open
+ * @param session - The current user session
+ * @returns The OnboardingDialog component or null
+ */
+export function OnboardingDialog({
+  isOpen = true,
+  session,
+}: OnboardingDialogProps) {
+  const [open, setOpen] = useState<boolean>(isOpen);
+
+  const profile = api.profile.getCurrentUser.useQuery();
+
+  const shouldShowOnboarding = session && !profile.data;
+
+  const closeDialog = () => {
+    setOpen(false);
+  };
+
+  if (profile.isPending || !shouldShowOnboarding) {
+    return null;
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent className="max-w-fit rounded-lg p-12 lg:max-w-[50dvw]">
+        <OnboardingForm userId={session.user.id} closeDialog={closeDialog} />
+      </DialogContent>
+    </Dialog>
+  );
+}