Feature/complete onboarding form

app/(app)/alpha/additional-details/_actions.ts → app/(app)/onboarding/_actions.ts

@@ -80,8 +80,16 @@ export async function slideThreeSubmitAction(dataInput: TypeSlideThreeSchema) {
   }
 
   try {
-    const { professionalOrStudent, course, jobTitle, levelOfStudy, workplace } =
-      slideThreeSchema.parse(dataInput);
+    const {
+      professionalOrStudent,
+      course,
+      jobTitle,
+      levelOfStudy,
+      workplace,
+      yearsOfExperience,
+    } = slideThreeSchema.parse(dataInput);
+
+    const onboardingComplete = new Date().toISOString();
 
     await db
       .update(user)
@@ -91,6 +99,8 @@ export async function slideThreeSubmitAction(dataInput: TypeSlideThreeSchema) {
         jobTitle,
         levelOfStudy,
         workplace,
+        yearsOfExperience,
+        onboardingComplete,
       })
       .where(eq(user.id, session.user.id));
 

app/(app)/alpha/additional-details/_client.tsx → app/(app)/onboarding/_client.tsx

@@ -21,7 +21,7 @@ import {
   locationOptions,
   levelOfStudyOptions,
   monthsOptions,
-} from "@/app/(app)/alpha/additional-details/selectOptions";
+} from "@/app/(app)/onboarding/selectOptions";
 import {
   slideOneSubmitAction,
   slideThreeSubmitAction,
@@ -39,6 +39,7 @@ import { Select } from "@/components/ui-components/select";
 import { Button } from "@/components/ui-components/button";
 import { Heading, Subheading } from "@/components/ui-components/heading";
 import { Divider } from "@/components/ui-components/divider";
+import { experienceRangeEnum } from "@/server/db/schema";
 
 type UserDetails = {
   username: string;
@@ -51,6 +52,7 @@ type UserDetails = {
   levelOfStudy: string;
   jobTitle: string;
   workplace: string;
+  yearsOfExperience: "0-1" | "1-3" | "3-5" | "5-8" | "12+" | undefined;
 };
 
 export default function AdditionalSignUpDetails({
@@ -357,7 +359,7 @@ function SlideTwo({ details }: { details: UserDetails }) {
                 id="day"
                 aria-label="day"
                 value={day ? day : ""}
-                disabled={!month || undefined}
+                disabled={month === undefined || year === undefined}
                 required
                 onChange={(e) => setDay(Number(e.target.value))}
               >
@@ -399,8 +401,14 @@ function SlideTwo({ details }: { details: UserDetails }) {
 function SlideThree({ details }: { details: UserDetails }) {
   const router = useRouter();
 
-  const { professionalOrStudent, workplace, jobTitle, course, levelOfStudy } =
-    details;
+  const {
+    professionalOrStudent,
+    workplace,
+    jobTitle,
+    course,
+    levelOfStudy,
+    yearsOfExperience,
+  } = details;
 
   const {
     register,
@@ -417,6 +425,13 @@ function SlideThree({ details }: { details: UserDetails }) {
       jobTitle,
       course,
       levelOfStudy,
+      yearsOfExperience: yearsOfExperience as
+        | "0-1"
+        | "1-3"
+        | "3-5"
+        | "5-8"
+        | "12+"
+        | undefined,
     },
   });
 
@@ -427,7 +442,7 @@ function SlideThree({ details }: { details: UserDetails }) {
     const professionalOrStudent = getValues("professionalOrStudent");
 
     if (isError && professionalOrStudent === "Working professional") {
-      isError = await trigger(["workplace", "jobTitle"]);
+      isError = await trigger(["workplace", "jobTitle", "yearsOfExperience"]);
     }
 
     if (isError && professionalOrStudent === "Current student") {
@@ -512,6 +527,29 @@ function SlideThree({ details }: { details: UserDetails }) {
                   </ErrorMessage>
                 )}
               </Field>
+
+              <Field className="mx-4 my-4">
+                <Label>Years of experience:</Label>
+                <Select
+                  id="years-of-experience"
+                  {...register("yearsOfExperience")}
+                  defaultValue=""
+                >
+                  <option value="" disabled>
+                    Select years of experience
+                  </option>
+                  {experienceRangeEnum.enumValues.map((range) => (
+                    <option key={range} value={range}>
+                      {range} years
+                    </option>
+                  ))}
+                </Select>
+                {errors.yearsOfExperience && (
+                  <ErrorMessage className="text-red-500">
+                    {errors.yearsOfExperience.message}
+                  </ErrorMessage>
+                )}
+              </Field>
             </>
           )}
 

app/(app)/alpha/additional-details/page.tsx → app/(app)/onboarding/page.tsx

@@ -22,6 +22,7 @@ export default async function Page() {
       levelOfStudy: true,
       jobTitle: true,
       workplace: true,
+      yearsOfExperience: true,
     },
     where: (user, { eq }) => eq(user.id, userId),
   });
@@ -37,6 +38,7 @@ export default async function Page() {
     levelOfStudy: details?.levelOfStudy || "",
     jobTitle: details?.jobTitle || "",
     workplace: details?.workplace || "",
+    yearsOfExperience: details?.yearsOfExperience || undefined,
   };
 
   return <Content details={detailsWithNullsRemoved} />;

context/AuthProvider.tsx

@@ -1,10 +1,29 @@
 "use client";
-import { SessionProvider } from "next-auth/react";
+import { SessionProvider, useSession } from "next-auth/react";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
 
 export default function AuthProvider({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  return <SessionProvider>{children}</SessionProvider>;
+  return (
+    <SessionProvider>
+      <OnboardingCheck>{children}</OnboardingCheck>
+    </SessionProvider>
+  );
+}
+
+function OnboardingCheck({ children }: { children: React.ReactNode }) {
+  const { data: session, status } = useSession();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (status === "authenticated" && !session?.user?.isOnboardingComplete) {
+      router.push("/onboarding");
+    }
+  }, [status, session, router]);
+
+  return <>{children}</>;
 }

drizzle/0011_years-experience-user-table.sql

@@ -0,0 +1,9 @@
+DO $$ BEGIN
+ CREATE TYPE "public"."experience_range" AS ENUM('0-1', '1-3', '3-5', '5-8', '12+');
+EXCEPTION
+ WHEN duplicate_object THEN null;
+END $$;
+--> statement-breakpoint
+ALTER TABLE "session" ADD PRIMARY KEY ("sessionToken");--> statement-breakpoint
+ALTER TABLE "user" ADD COLUMN "yearsOfExperience" "experience_range";--> statement-breakpoint
+ALTER TABLE "user" ADD COLUMN "onboardingComplete" timestamp with time zone;