Add company details wizard with multi-step form and database integration

Author: Marfuen

apps/app/src/actions/organization/create-organization-action.ts

@@ -217,9 +217,16 @@ export const createOrganizationAction = authActionClient
 				revalidatePath(`/${org.organizationId}`);
 			}
 
+			await auth.api.setActiveOrganization({
+				headers: await headers(),
+				body: {
+					organizationId,
+				},
+			});
+
 			return {
 				success: true,
-				organizationId: session.session.activeOrganizationId,
+				organizationId,
 			};
 		} catch (error) {
 			console.error("Error during organization creation/update:", error);

apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/implementation/components/Checklist.tsx

@@ -4,11 +4,18 @@ import { ChecklistProps } from "../types/ChecklistProps.types";
 import { ChecklistItem } from "./ChecklistItem";
 
 export function Checklist({ items }: ChecklistProps) {
-    return (
-        <div className="flex flex-col gap-4">
-            {items.map((item) => (
-                <ChecklistItem key={item.dbColumn as string} {...item} />
-            ))}
-        </div>
-    );
-}
+	return (
+		<div className="flex flex-col gap-4">
+			{items.map((item) => (
+				<ChecklistItem
+					key={
+						item.dbColumn
+							? item.dbColumn
+							: item.title.replace(/\s+/g, "-").toLowerCase()
+					}
+					{...item}
+				/>
+			))}
+		</div>
+	);
+}

apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/implementation/components/ChecklistItem.tsx

@@ -1,23 +1,21 @@
 "use client";
 
-import { Badge } from "@comp/ui/badge";
 import { Button } from "@comp/ui/button";
 import {
 	Card,
-	CardContent,
 	CardDescription,
 	CardFooter,
 	CardHeader,
 	CardTitle,
 } from "@comp/ui/card";
+import { Separator } from "@comp/ui/separator";
 import { ArrowRight, CheckCheck, Circle, Loader2 } from "lucide-react";
 import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
 import { toast } from "sonner";
 import { updateOnboardingItem } from "../actions/update-onboarding-item";
 import type { ChecklistItemProps } from "../types/ChecklistProps.types";
-import { Separator } from "@comp/ui/separator";
-import { cn } from "../../../../../../../../../../packages/ui/src/utils";
+import Link from "next/link";
 
 export function ChecklistItem({
 	title,
@@ -28,14 +26,19 @@ export function ChecklistItem({
 	completed,
 	buttonLabel,
 	icon,
+	type,
+	wizardPath,
 }: ChecklistItemProps) {
 	const { orgId } = useParams<{ orgId: string }>();
-	const linkWithOrgReplaced = href.replace(":organizationId", orgId);
+	const linkWithOrgReplaced = href
+		? href.replace(":organizationId", orgId)
+		: undefined;
 	const [isUpdating, setIsUpdating] = useState(false);
 	const [isAnimating, setIsAnimating] = useState(false);
 	const router = useRouter();
 
 	const handleMarkAsDone = async () => {
+		if (!dbColumn) return;
 		try {
 			setIsUpdating(true);
 			setIsAnimating(true);
@@ -47,7 +50,7 @@ export function ChecklistItem({
 			}
 
 			setTimeout(() => setIsAnimating(false), 600);
-			router.push(linkWithOrgReplaced);
+			router.push(linkWithOrgReplaced ?? "/");
 		} catch (error) {
 			toast.error(
 				error instanceof Error
@@ -59,9 +62,15 @@ export function ChecklistItem({
 		}
 	};
 
+	const handleWizardRedirect = () => {
+		if (wizardPath) {
+			router.push(wizardPath.replace(":organizationId", orgId));
+		}
+	};
+
 	return (
 		<Card>
-			<div className={completed ? "opacity-40" : ""}>
+			<div>
 				<CardHeader>
 					<CardTitle className="flex items-center gap-2 w-full">
 						{completed && (
@@ -71,6 +80,21 @@ export function ChecklistItem({
 						<span className={completed ? "line-through" : ""}>
 							{title}
 						</span>
+						{completed && (
+							<Button
+								className="ml-auto"
+								variant="outline"
+								onClick={() => {
+									if (type === "wizard") {
+										handleWizardRedirect();
+									} else {
+										handleMarkAsDone();
+									}
+								}}
+							>
+								View again <ArrowRight className="h-4 w-4" />
+							</Button>
+						)}
 						{/* {completed && (
 							<Badge variant="marketing">Completed</Badge>
 						)} */}
@@ -84,12 +108,22 @@ export function ChecklistItem({
 				{!completed && <Separator className="my-6" />}
 				{!completed && (
 					<CardFooter className="justify-end">
-						{!completed && (
+						{type === "wizard" ? (
 							<Button
 								variant={"secondary"}
 								className="w-full sm:w-fit"
-								onClick={handleMarkAsDone}
+								onClick={handleWizardRedirect}
 								disabled={isUpdating}
+							>
+								{buttonLabel}
+								<ArrowRight className="ml-1 h-4 w-4" />
+							</Button>
+						) : (
+							<Button
+								variant={"secondary"}
+								className="w-full sm:w-fit"
+								onClick={handleMarkAsDone}
+								disabled={isUpdating || !dbColumn}
 							>
 								{completed ? (
 									"Completed"

apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/implementation/lib/models/CompanyDetails.ts

@@ -0,0 +1,105 @@
+import { z } from "zod";
+
+const companyDetailsSchemaV1 = z.object({
+	companyName: z.string().default(""),
+	companyWebsite: z.string().default(""),
+	vendors: z.array(z.string()).default([]),
+	headcount: z.number().default(1),
+	workStyle: z.string().default(""),
+	dataCategories: z.array(z.string()).default([]),
+	storageRegions: z.string().default(""),
+	identityProviders: z.string().default(""),
+	laptopOS: z.array(z.string()).default([]),
+	mobileDevice: z.boolean().default(false),
+});
+
+enum Versions {
+	V1 = "v1",
+}
+
+interface CompanyDetailsSchemas {
+	[Versions.V1]: typeof companyDetailsSchemaV1;
+}
+
+const versionToSchema: CompanyDetailsSchemas = {
+	[Versions.V1]: companyDetailsSchemaV1,
+};
+
+type CompanyDetailsData = {
+	[K in Versions]: z.infer<CompanyDetailsSchemas[K]>;
+};
+
+type CompanyDetailsConstructorArgs<V extends Versions> = {
+	version: V;
+	isCompleted: boolean;
+	data: CompanyDetailsData[V];
+};
+
+export const companyDetailsObjectSchema = z.object({
+	version: z.nativeEnum(Versions),
+	isCompleted: z.boolean(),
+	data: companyDetailsSchemaV1,
+});
+
+export const companyDetailslatestVersionSchema = companyDetailsSchemaV1;
+export const companyDetailsLatestVersion = Versions.V1;
+
+export class CompanyDetails {
+	readonly version: Versions;
+	readonly isCompleted: boolean;
+	readonly data: CompanyDetailsData[Versions];
+
+	constructor(input: unknown) {
+		// If for some reason the input is undefined or null, create an empty latest version.
+		if (input === undefined || input === null) {
+			const latest = CompanyDetails.createEmptyLatest();
+			this.version = latest.version;
+			this.isCompleted = latest.isCompleted;
+			this.data = latest.data;
+			return;
+		}
+		const parsed = CompanyDetails.validateAndUpgrade(input);
+		this.version = parsed.version;
+		this.isCompleted = parsed.isCompleted;
+		const schema = versionToSchema[parsed.version];
+		this.data = schema.parse(parsed.data);
+	}
+
+	private static createEmptyLatest(): CompanyDetailsConstructorArgs<Versions> {
+		const latestVersion: Versions = companyDetailsLatestVersion;
+		const schema = versionToSchema[latestVersion];
+		const emptyData = schema.parse({});
+
+		return {
+			version: latestVersion,
+			isCompleted: false,
+			data: emptyData,
+		};
+	}
+
+	private static validateAndUpgrade(
+		input: unknown,
+	): CompanyDetailsConstructorArgs<Versions> {
+		try {
+			const parsed = z
+				.object({
+					version: z.nativeEnum(Versions),
+					isCompleted: z.boolean(),
+					data: companyDetailsSchemaV1,
+				})
+				.parse(input);
+			return CompanyDetails.upgradeToLatestCompanyDetails(parsed);
+		} catch (err) {
+			console.error("Failed to validate CompanyDetails:", err);
+			throw err;
+		}
+	}
+
+	private static upgradeToLatestCompanyDetails<V extends Versions>(input: {
+		version: V;
+		data: CompanyDetailsData[V];
+		isCompleted: boolean;
+	}): CompanyDetailsConstructorArgs<Versions> {
+		return input as CompanyDetailsConstructorArgs<Versions>;
+	}
+}

apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/implementation/page.tsx

@@ -1,11 +1,13 @@
 import { db } from "@comp/db";
 import { Icons } from "@comp/ui/icons";
-import { ListCheck, NotebookText, Store, Users } from "lucide-react";
+import { Briefcase, ListCheck, NotebookText, Store, Users } from "lucide-react";
 import { redirect } from "next/navigation";
 import { cache } from "react";
 import { Checklist } from "./components/Checklist";
 import { OnboardingProgress } from "./components/OnboardingProgress";
 import { ChecklistItemProps } from "./types/ChecklistProps.types";
+import { companyDetailsObjectSchema } from "./lib/models/CompanyDetails";
+import { z } from "zod";
 
 const getChecklistItems = cache(
 	async (
@@ -29,6 +31,22 @@ const getChecklistItems = cache(
 		}
 
 		const checklistItems: ChecklistItemProps[] = [
+			{
+				title: "Fill out company details",
+				description:
+					"In order to get started, you need to provide some basic details about how your company operates.",
+				wizardPath: `/${orgId}/implementation/wizard/company-details`,
+				completed:
+					(
+						onboarding.companyDetails as z.infer<
+							typeof companyDetailsObjectSchema
+						>
+					)?.isCompleted || false,
+				docs: "https://trycomp.ai/docs/details",
+				buttonLabel: "Fill out details",
+				icon: <Briefcase className="h-5 w-5" />,
+				type: "wizard",
+			},
 			{
 				title: "Check & Publish Policies",
 				description:
@@ -87,7 +105,7 @@ const getChecklistItems = cache(
 		];
 
 		const completedItems = checklistItems.filter(
-			(item) => item.completed,
+			(item) => item.completed || item.wizardCompleted,
 		).length;
 		const totalItems = checklistItems.length;
 

apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/implementation/types/ChecklistProps.types.ts

@@ -7,10 +7,14 @@ export interface ChecklistProps {
 export interface ChecklistItemProps {
 	title: string;
 	description?: string;
-	href: string;
+	href?: string;
 	docs: string;
-	dbColumn: Exclude<keyof Onboarding, "organizationId">;
-	completed: boolean;
+	dbColumn?: Exclude<keyof Onboarding, "organizationId">;
+	completed?: boolean;
 	buttonLabel: string;
 	icon: React.ReactNode;
+	type?: "default" | "wizard";
+	wizardPath?: string;
+	// For wizards, allow specifying a completion boolean directly
+	wizardCompleted?: boolean;
 }