Merge pull request #660 from trycompai/lewis/comp-onboarding-calendar

[dev] [carhartlewis] lewis/comp-onboarding-calendar

Author: claudfuen

apps/app/package.json

@@ -23,6 +23,8 @@
 		"@aws-sdk/client-sts": "^3.808.0",
 		"@aws-sdk/s3-request-presigner": "^3.806.0",
 		"@browserbasehq/sdk": "^2.5.0",
+		"@calcom/atoms": "^1.0.102-framer",
+		"@calcom/embed-react": "^1.5.3",
 		"@comp/data": "workspace:*",
 		"@comp/db": "workspace:*",
 		"@comp/notifications": "workspace:*",

apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/implementation/book-call/actions/book-a-call.ts

@@ -0,0 +1,82 @@
+"use server";
+
+import { z } from "zod";
+import { authActionClient } from "@/actions/safe-action";
+import { db } from "@comp/db";
+import ky from "ky";
+
+export const bookCallAction = authActionClient
+	.schema(
+		z.object({
+			frameworks: z.array(z.string()),
+			role: z.string(),
+			employeeCount: z.string(),
+			lookingFor: z.string(),
+			timeline: z.string(),
+		}),
+	)
+	.metadata({
+		name: "book-call",
+	})
+	.action(
+		async ({
+			parsedInput: {
+				frameworks,
+				role,
+				employeeCount,
+				lookingFor,
+				timeline,
+			},
+			ctx: { session },
+		}) => {
+			try {
+				const { activeOrganizationId } = session;
+
+				if (!activeOrganizationId) {
+					return {
+						success: false,
+						error: "Not authorized",
+					};
+				}
+
+				const bookingDetails = {
+					frameworks,
+					role,
+					employeeCount,
+					lookingFor,
+					timeline,
+				};
+
+				await db.onboarding.upsert({
+					where: {
+						organizationId: activeOrganizationId,
+					},
+					create: {
+						callBooked: true,
+						organizationId: activeOrganizationId,
+						companyBookingDetails: bookingDetails,
+					},
+					update: {
+						callBooked: true,
+						companyBookingDetails: bookingDetails,
+					},
+				});
+
+				return {
+					success: true,
+				};
+			} catch (error) {
+				console.error("Error in bookCallAction:", error);
+
+				return {
+					success: false,
+					error: {
+						message:
+							error instanceof Error
+								? error.message
+								: "An unexpected error occurred.",
+					},
+				};
+			}
+		},
+	);

apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/implementation/book-call/components/FindOutMore.tsx

@@ -0,0 +1,95 @@
+import PageWithBreadcrumb from "@/components/pages/PageWithBreadcrumb";
+import { FindOutMoreForm } from "./components/FindOutMore";
+import { getI18n } from "@/locales/server";
+import { auth } from "@/utils/auth";
+import { db } from "@comp/db";
+import type { Metadata } from "next";
+import { setStaticParamsLocale } from "next-international/server";
+import { headers } from "next/headers";
+import { cache } from "react";
+import { notFound } from "next/navigation";
+import { z } from "zod";
+
+const findOutMoreSchema = z.object({
+    frameworks: z.array(z.string()),
+    role: z.string(),
+    employeeCount: z.string(),
+    lookingFor: z.string(),
+    timeline: z.string(),
+});
+
+export default async function FindOutMore({
+    params,
+}: {
+    params: Promise<{ locale: string, orgId: string }>;
+}) {
+    const { locale, orgId } = await params;
+    setStaticParamsLocale(locale);
+
+    const organization = await organizationDetails();
+
+    if (!organization) {
+        return notFound();
+    }
+
+    return (
+        <PageWithBreadcrumb
+            breadcrumbs={[
+                {
+                    label: "Implementation",
+                    current: false,
+                    href: `/${orgId}/implementation`,
+                },
+                { label: "Find out more about Comp AI", current: true },
+            ]}
+        >
+            <FindOutMoreForm
+                organizationName={organization?.name ?? ""}
+                isBooked={organization?.callBooked ?? false}
+                companyBookingDetails={organization?.companyBookingDetails as z.infer<typeof findOutMoreSchema> ?? {
+                    frameworks: [],
+                    role: "",
+                    employeeCount: "",
+                    lookingFor: "",
+                    timeline: "",
+                }}
+            />
+        </PageWithBreadcrumb>
+    );
+}
+
+
+const organizationDetails = cache(async () => {
+    const session = await auth.api.getSession({
+        headers: await headers(),
+    });
+
+    if (!session?.session.activeOrganizationId) {
+        return null;
+    }
+
+    const organization = await db.organization.findUnique({
+        where: { id: session?.session.activeOrganizationId },
+        select: {
+            name: true,
+            id: true,
+            website: true,
+        },
+    });
+
+    const onboarding = await db.onboarding.findFirst({
+        where: {
+            organizationId: session?.session.activeOrganizationId,
+        },
+        select: {
+            callBooked: true,
+            companyBookingDetails: true,
+        },
+    });
+
+    return {
+        name: organization?.name,
+        callBooked: onboarding?.callBooked,
+        companyBookingDetails: onboarding?.companyBookingDetails as z.infer<typeof findOutMoreSchema>,
+    };
+});

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

@@ -1,6 +1,13 @@
 import type { Onboarding } from "@comp/db/types";
 import { Icons } from "@comp/ui/icons";
-import { Briefcase, ListCheck, NotebookText, Store, Users } from "lucide-react";
+import {
+	Briefcase,
+	Calendar,
+	ListCheck,
+	NotebookText,
+	Store,
+	Users,
+} from "lucide-react";
 import type { ChecklistItemProps } from "./types";
 import { companyDetailsObjectSchema } from "./lib/models/CompanyDetails";
 import { z } from "zod";
@@ -10,6 +17,17 @@ export function generateChecklistItems(
 	orgId: string,
 ): ChecklistItemProps[] {
 	return [
+		{
+			title: "Optional: Get SOC 2 or ISO 27001 in just 4 weeks",
+			description: "Get SOC 2 compliant in just 4 weeks, implemented by the Comp AI team. Packages starting at $3,000/year - book a call and we'll share more..",
+			href: `/${orgId}/implementation/calendar`,
+			buttonLabel: "Get started",
+			icon: <Calendar className="h-5 w-5" />,
+			docs: "https://trycomp.ai/docs/call",
+			completed: onboarding.callBooked,
+			calendarPath: `/${orgId}/implementation/book-call`,
+			type: "calendar",
+		},
 		{
 			title: "Fill out company details",
 			description:

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

@@ -7,7 +7,7 @@ export function Checklist({ items }: { items: ChecklistItemProps[] }) {
 	return (
 		<div className="flex flex-col gap-4">
 			{items.map((item) => (
-				<ChecklistItem key={`checklist-${item.dbColumn}`} {...item} />
+				<ChecklistItem key={`checklist-${item.dbColumn}-${item?.type}`} {...item} />
 			))}
 		</div>
 	);

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

@@ -9,12 +9,13 @@ import {
 	CardTitle,
 } from "@comp/ui/card";
 import { Separator } from "@comp/ui/separator";
-import { ArrowRight, CheckCheck, Circle, Loader2 } from "lucide-react";
+import { ArrowRight, Calendar, 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";
+import CalendarEmbed from "@/components/calendar-embed";
 
 export function ChecklistItem({
 	title,
@@ -27,13 +28,15 @@ export function ChecklistItem({
 	icon,
 	type,
 	wizardPath,
+	calendarPath,
 }: ChecklistItemProps) {
 	const { orgId } = useParams<{ orgId: string }>();
 	const linkWithOrgReplaced = href
 		? href.replace(":organizationId", orgId)
 		: undefined;
 	const [isUpdating, setIsUpdating] = useState(false);
 	const [isAnimating, setIsAnimating] = useState(false);
+	const [showCalendar, setShowCalendar] = useState(false);
 	const router = useRouter();
 
 	const handleMarkAsDone = async () => {
@@ -67,6 +70,12 @@ export function ChecklistItem({
 		}
 	};
 
+	const handleCalendarRedirect = () => {
+		if (calendarPath) {
+			router.push(calendarPath.replace(":organizationId", orgId));
+		}
+	};
+
 	return (
 		<Card>
 			<div>
@@ -86,6 +95,8 @@ export function ChecklistItem({
 								onClick={() => {
 									if (type === "wizard") {
 										handleWizardRedirect();
+									} else if (type === "calendar") {
+										handleCalendarRedirect();
 									} else {
 										handleMarkAsDone();
 									}
@@ -94,9 +105,6 @@ export function ChecklistItem({
 								View again <ArrowRight className="h-4 w-4" />
 							</Button>
 						)}
-						{/* {completed && (
-							<Badge variant="marketing">Completed</Badge>
-						)} */}
 					</CardTitle>
 					{description && !completed && (
 						<CardDescription className="text-sm text-muted-foreground flex flex-col gap-4">
@@ -117,6 +125,18 @@ export function ChecklistItem({
 								{buttonLabel}
 								<ArrowRight className="ml-1 h-4 w-4" />
 							</Button>
+						) : type === "calendar" ? (
+							<>
+								<Button
+									variant={"secondary"}
+									className="w-full sm:w-fit"
+									disabled={isUpdating}
+									onClick={handleCalendarRedirect}
+								>
+									{buttonLabel}
+									<ArrowRight className="ml-1 h-4 w-4" />
+								</Button>
+							</>
 						) : (
 							<Button
 								variant={"secondary"}

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

@@ -17,12 +17,12 @@ export default async function Page({
 	}
 
 	return (
-		<div className="space-y-6">
+		<div className="space-y-6 max-w-[600px] mx-auto">
 			<OnboardingProgress
 				completedSteps={checklistData.completedItems}
 				totalSteps={checklistData.totalItems}
 			/>
-			<Checklist items={checklistData.checklistItems} />
+			<Checklist key={checklistData.checklistItems.length} items={checklistData.checklistItems} />
 		</div>
 	);
 }

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

@@ -6,6 +6,7 @@ export const onboardingSteps = [
 	"vendors",
 	"risk",
 	"tasks",
+	"callBooked",
 ] as const; // Use 'as const' for literal types
 
 export type OnboardingStep = (typeof onboardingSteps)[number];
@@ -19,8 +20,10 @@ export interface ChecklistItemProps {
 	completed?: boolean;
 	buttonLabel: string;
 	icon: React.ReactNode;
-	type?: "default" | "wizard";
+	type?: "default" | "wizard" | "calendar";
 	wizardPath?: string;
+	calendarPath?: string;
 	// For wizards, allow specifying a completion boolean directly
 	wizardCompleted?: boolean;
+	calendarCompleted?: boolean;
 }

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

@@ -0,0 +1,23 @@
+"use client";
+
+import Cal, { getCalApi } from "@calcom/embed-react";
+import { useEffect } from "react";
+
+export default function CalendarEmbed() {
+    useEffect(() => {
+        (async () => {
+            const cal = await getCalApi({ namespace: "meet-us" });
+            cal("ui", { hideEventTypeDetails: false, layout: "month_view" });
+        })();
+    }, []);
+
+    return (
+        <Cal
+            namespace="meet-us"
+            calLink="team/compai/meet-us"
+            style={{ width: "100%", height: "100%", overflow: "scroll" }}
+            config={{ layout: "month_view" }}
+        />
+    );
+}
+