web: new onboarding

apps/web/actions/organization/upload-organization-icon.ts

@@ -6,10 +6,8 @@ import { organizations } from "@cap/database/schema";
 import { serverEnv } from "@cap/env";
 import { S3Buckets } from "@cap/web-backend";
 import type { Organisation } from "@cap/web-domain";
-import DOMPurify from "dompurify";
 import { eq } from "drizzle-orm";
 import { Effect, Option } from "effect";
-import { JSDOM } from "jsdom";
 import { revalidatePath } from "next/cache";
 import { sanitizeFile } from "@/lib/sanitizeFile";
 import { runPromise } from "@/lib/server";
@@ -37,7 +35,7 @@ export async function uploadOrganizationIcon(
 		throw new Error("Only the owner can update organization icon");
 	}
 
-	const file = formData.get("file") as File;
+	const file = formData.get("icon") as File | null;
 
 	if (!file) {
 		throw new Error("No file provided");
@@ -64,11 +62,12 @@ export async function uploadOrganizationIcon(
 		await Effect.gen(function* () {
 			const [bucket] = yield* S3Buckets.getBucketAccess(Option.none());
 
-			yield* bucket.putObject(
-				fileKey,
-				yield* Effect.promise(() => sanitizedFile.bytes()),
-				{ contentType: file.type },
-			);
+			const bodyBytes = yield* Effect.promise(async () => {
+				const buf = await sanitizedFile.arrayBuffer();
+				return new Uint8Array(buf);
+			});
+
+			yield* bucket.putObject(fileKey, bodyBytes, { contentType: file.type });
 			// Construct the icon URL
 			if (serverEnv().CAP_AWS_BUCKET_URL) {
 				// If a custom bucket URL is defined, use it

apps/web/app/(org)/dashboard/_components/Navbar/Items.tsx

@@ -49,7 +49,6 @@ interface Props {
 const AdminNavItems = ({ toggleMobileNav }: Props) => {
 	const pathname = usePathname();
 	const [open, setOpen] = useState(false);
-	const [hoveredItem, setHoveredItem] = useState<string | null>(null);
 	const { user, sidebarCollapsed, userCapsCount } = useDashboardContext();
 
 	const manageNavigation = [
@@ -221,7 +220,7 @@ const AdminNavItems = ({ toggleMobileNav }: Props) => {
 															? "pointer-events-none"
 															: "text-gray-10 hover:text-gray-12 hover:bg-gray-6",
 													)}
-													key={`${organization.organization.name}-organization`}
+													key={`${organization.organization.name}-organization-${organization.organization.id}`}
 													onSelect={async () => {
 														await updateActiveOrganization(
 															organization.organization.id,
@@ -323,23 +322,6 @@ const AdminNavItems = ({ toggleMobileNav }: Props) => {
 									/>
 								)}
 
-								{hoveredItem === item.name && !isPathActive(item.href) && (
-									<motion.div
-										layoutId="hoverIndicator"
-										className={clsx(
-											"absolute bg-transparent rounded-xl",
-											sidebarCollapsed ? "inset-0 mx-auto w-9 h-9" : "inset-0",
-										)}
-										initial={{ opacity: 0 }}
-										animate={{ opacity: 1 }}
-										exit={{ opacity: 0 }}
-										transition={{
-											type: "spring",
-											bounce: 0.2,
-											duration: 0.2,
-										}}
-									/>
-								)}
 								<NavItem
 									name={item.name}
 									href={item.href}

apps/web/app/(org)/dashboard/caps/page.tsx

@@ -123,16 +123,6 @@ export default async function CapsPage(props: PageProps<"/dashboard/caps">) {
 
 	const totalCount = totalCountResult[0]?.count || 0;
 
-	// Get custom domain and verification status for the user's organization
-	const organizationData = await db()
-		.select({
-			customDomain: organizations.customDomain,
-			domainVerified: organizations.domainVerified,
-		})
-		.from(organizations)
-		.where(eq(organizations.id, user.activeOrganizationId))
-		.limit(1);
-
 	const videoData = await db()
 		.select({
 			id: videos.id,

apps/web/app/(org)/dashboard/layout.tsx

@@ -29,7 +29,7 @@ export default async function DashboardLayout({
 	}
 
 	if (!user.name || user.name.length === 0) {
-		redirect("/onboarding");
+		redirect("/onboarding/welcome");
 	}
 
 	let organizationSelect: Organization[] = [];

apps/web/app/(org)/dashboard/settings/organization/components/OrganizationIcon.tsx

@@ -1,14 +1,15 @@
 "use client";
 
 import { CardDescription, Label } from "@cap/ui";
-import { useState } from "react";
+import { useId, useState } from "react";
 import { toast } from "sonner";
 import { removeOrganizationIcon } from "@/actions/organization/remove-icon";
 import { uploadOrganizationIcon } from "@/actions/organization/upload-organization-icon";
 import { FileInput } from "@/components/FileInput";
 import { useDashboardContext } from "../../../Contexts";
 
 export const OrganizationIcon = () => {
+	const iconInputId = useId();
 	const { activeOrganization } = useDashboardContext();
 	const organizationId = activeOrganization?.organization.id;
 	const existingIconUrl = activeOrganization?.organization.iconUrl;
@@ -22,10 +23,9 @@ export const OrganizationIcon = () => {
 		// Upload the file to the server immediately
 		try {
 			setIsUploading(true);
-			const formData = new FormData();
-			formData.append("file", file);
-
-			const result = await uploadOrganizationIcon(formData, organizationId);
+			const fd = new FormData();
+			fd.append("icon", file);
+			const result = await uploadOrganizationIcon(fd, organizationId);
 
 			if (result.success) {
 				toast.success("Organization icon updated successfully");
@@ -68,7 +68,7 @@ export const OrganizationIcon = () => {
 			<FileInput
 				height={44}
 				previewIconSize={20}
-				id="icon"
+				id={iconInputId}
 				name="icon"
 				onChange={handleFileChange}
 				disabled={isUploading}

apps/web/app/(org)/onboarding/[...steps]/layout.tsx

@@ -0,0 +1,45 @@
+import { getCurrentUser } from "@cap/database/auth/session";
+import { redirect } from "next/navigation";
+
+export default async function OnboardingStepLayout({
+	children,
+	params,
+}: {
+	children: React.ReactNode;
+	params: Promise<{ steps: string[] }>;
+}) {
+	const user = await getCurrentUser();
+
+	if (!user) {
+		redirect("/login");
+	}
+
+	const steps = user.onboardingSteps || {};
+	const currentStep = (await params).steps?.[0] ?? "welcome";
+
+	const ordered = [
+		"welcome",
+		"organization-setup",
+		"custom-domain",
+		"invite-team",
+		"download",
+	] as const;
+	const isComplete = (s: (typeof ordered)[number]) =>
+		s === "welcome"
+			? Boolean(steps.welcome && user.name)
+			: s === "organization-setup"
+				? Boolean(steps.organizationSetup)
+				: s === "custom-domain"
+					? Boolean(steps.customDomain)
+					: s === "invite-team"
+						? Boolean(steps.inviteTeam)
+						: Boolean(steps.download);
+
+	const firstIncomplete = ordered.find((s) => !isComplete(s)) ?? "download";
+
+	if (currentStep !== firstIncomplete) {
+		redirect(`/onboarding/${firstIncomplete}`);
+	}
+
+	return children;
+}

apps/web/app/(org)/onboarding/[...steps]/page.tsx

@@ -0,0 +1,33 @@
+import { getCurrentUser } from "@cap/database/auth/session";
+import { CustomDomainPage } from "../components/CustomDomainPage";
+import { DownloadPage } from "../components/DownloadPage";
+import { InviteTeamPage } from "../components/InviteTeamPage";
+import { OrganizationSetupPage } from "../components/OrganizationSetupPage";
+import { WelcomePage } from "../components/WelcomePage";
+
+export default async function OnboardingStepPage({
+	params,
+}: {
+	params: Promise<{
+		steps: "welcome" | "organization-setup" | "custom-domain" | "invite-team";
+	}>;
+}) {
+	const step = (await params).steps[0];
+
+	switch (step) {
+		case "welcome":
+			return <WelcomePage />;
+		case "organization-setup": {
+			const user = await getCurrentUser();
+			return <OrganizationSetupPage firstName={user?.name} />;
+		}
+		case "custom-domain":
+			return <CustomDomainPage />;
+		case "invite-team":
+			return <InviteTeamPage />;
+		case "download":
+			return <DownloadPage />;
+		default:
+			return null;
+	}
+}

apps/web/app/(org)/onboarding/components/Base.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { LogoBadge } from "@cap/ui";
+import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import clsx from "clsx";
+import { useRouter } from "next/navigation";
+
+export const Base = ({
+	children,
+	title,
+	description,
+	descriptionClassName,
+	hideBackButton = true,
+}: {
+	children: React.ReactNode;
+	title: string;
+	description: string | React.ReactNode;
+	descriptionClassName?: string;
+	hideBackButton?: boolean;
+}) => {
+	const router = useRouter();
+	return (
+		<div className="relative w-[calc(100%-2%)] space-y-7 p-7 max-w-[472px] bg-gray-2 border border-gray-4 rounded-2xl">
+			{!hideBackButton && (
+				<div
+					onClick={() => router.back()}
+					className="absolute overflow-hidden flex top-5 rounded-full left-5 z-20 hover:bg-gray-1 gap-2 items-center py-1.5 px-3 text-gray-12 bg-transparent border border-gray-4 transition-colors duration-300 cursor-pointer"
+				>
+					<FontAwesomeIcon className="w-2" icon={faArrowLeft} />
+					<p className="text-xs text-inherit">Back</p>
+				</div>
+			)}
+			<a href="/">
+				<LogoBadge className="mx-auto w-auto h-12" />
+			</a>
+			<div className="flex flex-col justify-center items-center space-y-1 text-center">
+				<h2 className="text-2xl font-semibold text-gray-12">{title}</h2>
+				{typeof description === "string" ? (
+					<p
+						className={clsx(
+							"w-full text-base max-w-[260px] text-gray-10",
+							descriptionClassName,
+						)}
+					>
+						{description}
+					</p>
+				) : (
+					description
+				)}
+			</div>
+			{children}
+		</div>
+	);
+};