Merge pull request #473 from trycompai/mariano/questionaire

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

Author: Marfuen

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

@@ -232,9 +232,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/actions.ts

@@ -49,7 +49,9 @@ export async function getOnboardingStatus(
 	}
 
 	const checklistItems = generateChecklistItems(onboarding, orgId);
-	const completedItems = checklistItems.filter((item) => item.completed).length;
+	const completedItems = checklistItems.filter(
+		(item) => item.completed,
+	).length;
 	const totalItems = checklistItems.length;
 
 	return { checklistItems, completedItems, totalItems };
@@ -95,4 +97,4 @@ export async function markOnboardingStep({
 		// Return the error key directly
 		return { success: false, error: appErrors.UNEXPECTED_ERROR };
 	}
-}
+}

apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/implementation/checklist-items.tsx

@@ -1,13 +1,31 @@
 import type { Onboarding } from "@comp/db/types";
 import { Icons } from "@comp/ui/icons";
-import { ListCheck, NotebookText, Store, Users } from "lucide-react";
+import { Briefcase, ListCheck, NotebookText, Store, Users } from "lucide-react";
 import type { ChecklistItemProps } from "./types";
+import { companyDetailsObjectSchema } from "./lib/models/CompanyDetails";
+import { z } from "zod";
 
 export function generateChecklistItems(
 	onboarding: Onboarding,
 	orgId: string,
 ): ChecklistItemProps[] {
 	return [
+		{
+			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:
@@ -64,4 +82,4 @@ export function generateChecklistItems(
 			icon: <ListCheck className="h-5 w-5" />,
 		},
 	];
-} 
+}

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

@@ -4,11 +4,11 @@ import { ChecklistItemProps } from "../types";
 import { ChecklistItem } from "./ChecklistItem";
 
 export function Checklist({ items }: { items: ChecklistItemProps[] }) {
-    return (
-        <div className="flex flex-col gap-4">
-            {items.map((item) => (
-                <ChecklistItem key={item.dbColumn} {...item} />
-            ))}
-        </div>
-    );
-}
+	return (
+		<div className="flex flex-col gap-4">
+			{items.map((item) => (
+				<ChecklistItem key={item.dbColumn} {...item} />
+			))}
+		</div>
+	);
+}

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

@@ -6,7 +6,7 @@ import {
 	CardDescription,
 	CardFooter,
 	CardHeader,
-	CardTitle
+	CardTitle,
 } from "@comp/ui/card";
 import { Separator } from "@comp/ui/separator";
 import { ArrowRight, CheckCheck, Circle, Loader2 } from "lucide-react";
@@ -25,14 +25,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);
@@ -44,7 +49,7 @@ export function ChecklistItem({
 			}
 
 			setTimeout(() => setIsAnimating(false), 600);
-			router.push(linkWithOrgReplaced);
+			router.push(linkWithOrgReplaced ?? "/");
 		} catch (error) {
 			toast.error(
 				error instanceof Error
@@ -56,9 +61,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 && (
@@ -68,6 +79,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>
 						)} */}
@@ -81,12 +107,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,4 +1,3 @@
-import { redirect } from "next/navigation";
 import { Checklist } from "./components/Checklist";
 import { OnboardingProgress } from "./components/OnboardingProgress";
 import { getOnboardingStatus } from "./actions";
@@ -12,7 +11,9 @@ export default async function Page({
 	const checklistData = await getOnboardingStatus(orgId);
 
 	if ("error" in checklistData) {
-		return <div>Error loading onboarding status: {checklistData.error}</div>;
+		return (
+			<div>Error loading onboarding status: {checklistData.error}</div>
+		);
 	}
 
 	return (

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

@@ -1,6 +1,5 @@
-import type { Onboarding } from "@comp/db/types";
+import { Onboarding } from "@comp/db/types";
 
-// Define valid onboarding steps based on the Onboarding model keys
 export const onboardingSteps = [
 	"policies",
 	"employees",
@@ -13,11 +12,15 @@ export type OnboardingStep = (typeof onboardingSteps)[number];
 
 export interface ChecklistItemProps {
 	title: string;
-	description: string;
-	href: string;
-	dbColumn: OnboardingStep; // Use the derived literal type
-	completed: boolean;
+	description?: string;
+	href?: string;
 	docs: string;
+	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;
+}