feat: onboarding v3 teams (calcom#24573)

## What does this PR do?
This PR is stacked on calcom#24299 this adds the v3 flow for onboarding with teams.

    
<!-- This is an auto-generated description by cubic. -->
---

## Summary by cubic
Adds the v3 team onboarding flow with Details, Brand, and Invite steps, including slug validation, branding, and member invites. Updates routing to support the Team plan and creates teams with Stripe checkout when needed.

- **New Features**
  - Team Details: name and slug with async availability check and URL preview.
  - Team Brand: hex color picker and logo upload with live preview.
  - Team Invite: add/remove emails, invite role toggle (Member/Admin), and form validation.
  - State: adds teamDetails, teamBrand, and teamInvites to the onboarding store with actions.
  - Creation: new useCreateTeam hook; redirects to Stripe if checkout URL is returned, or to Getting Started on success.
  - Routing/Auth: protected team pages (details, brand, invite) and updates plan selection to route to /onboarding/teams.

<!-- End of auto-generated description by cubic. -->

Author: sean-brydon

apps/web/app/(use-page-wrapper)/onboarding/teams/brand/page.tsx

@@ -0,0 +1,34 @@
+import { _generateMetadata } from "app/_utils";
+import { cookies, headers } from "next/headers";
+import { redirect } from "next/navigation";
+
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+import { APP_NAME } from "@calcom/lib/constants";
+
+import { buildLegacyRequest } from "@lib/buildLegacyCtx";
+
+import { TeamBrandView } from "~/onboarding/teams/brand/team-brand-view";
+
+export const generateMetadata = async () => {
+  return await _generateMetadata(
+    (t) => `${APP_NAME} - ${t("team_brand")}`,
+    () => "",
+    true,
+    undefined,
+    "/onboarding/teams/brand"
+  );
+};
+
+const ServerPage = async () => {
+  const session = await getServerSession({ req: buildLegacyRequest(await headers(), await cookies()) });
+
+  if (!session?.user?.id) {
+    return redirect("/auth/login");
+  }
+
+  const userEmail = session.user.email || "";
+
+  return <TeamBrandView userEmail={userEmail} />;
+};
+
+export default ServerPage;

apps/web/app/(use-page-wrapper)/onboarding/teams/details/page.tsx

@@ -0,0 +1,34 @@
+import { _generateMetadata } from "app/_utils";
+import { cookies, headers } from "next/headers";
+import { redirect } from "next/navigation";
+
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+import { APP_NAME } from "@calcom/lib/constants";
+
+import { buildLegacyRequest } from "@lib/buildLegacyCtx";
+
+import { TeamDetailsView } from "~/onboarding/teams/details/team-details-view";
+
+export const generateMetadata = async () => {
+  return await _generateMetadata(
+    (t) => `${APP_NAME} - ${t("team_details")}`,
+    () => "",
+    true,
+    undefined,
+    "/onboarding/teams/details"
+  );
+};
+
+const ServerPage = async () => {
+  const session = await getServerSession({ req: buildLegacyRequest(await headers(), await cookies()) });
+
+  if (!session?.user?.id) {
+    return redirect("/auth/login");
+  }
+
+  const userEmail = session.user.email || "";
+
+  return <TeamDetailsView userEmail={userEmail} />;
+};
+
+export default ServerPage;

apps/web/app/(use-page-wrapper)/onboarding/teams/invite/page.tsx

@@ -0,0 +1,34 @@
+import { _generateMetadata } from "app/_utils";
+import { cookies, headers } from "next/headers";
+import { redirect } from "next/navigation";
+
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+import { APP_NAME } from "@calcom/lib/constants";
+
+import { buildLegacyRequest } from "@lib/buildLegacyCtx";
+
+import { TeamInviteView } from "~/onboarding/teams/invite/team-invite-view";
+
+export const generateMetadata = async () => {
+  return await _generateMetadata(
+    (t) => `${APP_NAME} - ${t("team_invite")}`,
+    () => "",
+    true,
+    undefined,
+    "/onboarding/teams/invite"
+  );
+};
+
+const ServerPage = async () => {
+  const session = await getServerSession({ req: buildLegacyRequest(await headers(), await cookies()) });
+
+  if (!session?.user?.id) {
+    return redirect("/auth/login");
+  }
+
+  const userEmail = session.user.email || "";
+
+  return <TeamInviteView userEmail={userEmail} />;
+};
+
+export default ServerPage;

apps/web/modules/onboarding/getting-started/onboarding-view.tsx

@@ -23,8 +23,9 @@ export const OnboardingView = ({ userName, userEmail }: OnboardingViewProps) =>
   const handleContinue = () => {
     if (selectedPlan === "organization") {
       router.push("/onboarding/organization/details");
-    }
-    // TODO: Handle other plan types
+    } else if (selectedPlan === "team") {
+      router.push("/onboarding/teams/details");
+    } // TODO: Handle other plan types
   };
 
   const allPlans = [

apps/web/modules/onboarding/hooks/useCreateTeam.ts

@@ -0,0 +1,49 @@
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+import { trpc } from "@calcom/trpc/react";
+
+import type { OnboardingState } from "../store/onboarding-store";
+
+export function useCreateTeam() {
+  const router = useRouter();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const createTeamMutation = trpc.viewer.teams.create.useMutation();
+
+  const createTeam = async (store: OnboardingState) => {
+    setIsSubmitting(true);
+
+    try {
+      const { teamDetails, teamBrand } = store;
+
+      // Create the team
+      const result = await createTeamMutation.mutateAsync({
+        name: teamDetails.name,
+        slug: teamDetails.slug,
+        logo: teamBrand.logo,
+      });
+
+      // If there's a checkout URL, redirect to Stripe payment
+      if (result.url && !result.team) {
+        window.location.href = result.url;
+        return;
+      }
+
+      if (result.team) {
+        router.push("/getting-started");
+      }
+    } catch (error) {
+      console.error("Failed to create team:", error);
+      throw error;
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return {
+    createTeam,
+    isSubmitting,
+    error: createTeamMutation.error,
+  };
+}

apps/web/modules/onboarding/store/onboarding-store.ts

@@ -26,6 +26,16 @@ export interface Invite {
   role: InviteRole;
 }
 
+export interface TeamDetails {
+  name: string;
+  slug: string;
+}
+
+export interface TeamBrand {
+  color: string;
+  logo: string | null; // base64 or URL
+}
+
 export interface OnboardingState {
   selectedPlan: PlanType | null;
 
@@ -38,6 +48,11 @@ export interface OnboardingState {
   invites: Invite[];
   inviteRole: InviteRole;
 
+  // Team-specific state
+  teamDetails: TeamDetails;
+  teamBrand: TeamBrand;
+  teamInvites: Invite[];
+
   // Actions
   setSelectedPlan: (plan: PlanType) => void;
   setOrganizationDetails: (details: Partial<OrganizationDetails>) => void;
@@ -46,6 +61,11 @@ export interface OnboardingState {
   setInvites: (invites: Invite[]) => void;
   setInviteRole: (role: InviteRole) => void;
 
+  // Team actions
+  setTeamDetails: (details: Partial<TeamDetails>) => void;
+  setTeamBrand: (brand: Partial<TeamBrand>) => void;
+  setTeamInvites: (invites: Invite[]) => void;
+
   // Reset
   resetOnboarding: () => void;
 }
@@ -65,6 +85,15 @@ const initialState = {
   teams: [],
   invites: [],
   inviteRole: "MEMBER" as InviteRole,
+  teamDetails: {
+    name: "",
+    slug: "",
+  },
+  teamBrand: {
+    color: "#000000",
+    logo: null,
+  },
+  teamInvites: [],
 };
 
 export const useOnboardingStore = create<OnboardingState>()(
@@ -90,6 +119,18 @@ export const useOnboardingStore = create<OnboardingState>()(
 
       setInviteRole: (role) => set({ inviteRole: role }),
 
+      setTeamDetails: (details) =>
+        set((state) => ({
+          teamDetails: { ...state.teamDetails, ...details },
+        })),
+
+      setTeamBrand: (brand) =>
+        set((state) => ({
+          teamBrand: { ...state.teamBrand, ...brand },
+        })),
+
+      setTeamInvites: (invites) => set({ teamInvites: invites }),
+
       resetOnboarding: () => set(initialState),
     }),
     {
@@ -102,6 +143,9 @@ export const useOnboardingStore = create<OnboardingState>()(
         teams: state.teams,
         invites: state.invites,
         inviteRole: state.inviteRole,
+        teamDetails: state.teamDetails,
+        teamBrand: state.teamBrand,
+        teamInvites: state.teamInvites,
       }),
     }
   )