feat: organization upgrade flow v3 (calcom#25972)

* wip flow

* add tests

* WIP migrateing view

* push back step

* fix tests and logic for adding new members to existing teams

* few UI fixes

* type fixes

* fix nits

* few UI + re-route fixes

* fix teamId when migrating

Author: sean-brydon

apps/web/app/(use-page-wrapper)/onboarding/organization/migrate-members/page.tsx

@@ -0,0 +1,38 @@
+import { cookies, headers } from "next/headers";
+import { redirect } from "next/navigation";
+
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+import { isCompanyEmail } from "@calcom/features/ee/organizations/lib/utils";
+import { OnboardingPathService } from "@calcom/features/onboarding/lib/onboarding-path.service";
+import { UserRepository } from "@calcom/features/users/repositories/UserRepository";
+import { prisma } from "@calcom/prisma";
+
+import { buildLegacyRequest } from "@lib/buildLegacyCtx";
+
+import { OrganizationMigrateMembersView } from "~/onboarding/organization/migrate-members/organization-migrate-members-view";
+
+export default async function MigrateMembersPage() {
+  const session = await getServerSession({ req: buildLegacyRequest(await headers(), await cookies()) });
+
+  if (!session?.user?.id) {
+    return redirect("/auth/login");
+  }
+
+  const userEmail = session.user.email || "";
+  const userId = session.user.id;
+
+  const gettingStartedPath = await OnboardingPathService.getGettingStartedPath(prisma);
+
+  if (!isCompanyEmail(userEmail)) {
+    return redirect(gettingStartedPath);
+  }
+
+  const userRepository = new UserRepository(prisma);
+  const isMemberOfOrganization = await userRepository.findIfAMemberOfSomeOrganization({ user: { id: userId } });
+
+  if (isMemberOfOrganization) {
+    return redirect(gettingStartedPath);
+  }
+
+  return <OrganizationMigrateMembersView userEmail={userEmail} />;
+}

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

@@ -0,0 +1,61 @@
+import { cookies, headers } from "next/headers";
+import { redirect } from "next/navigation";
+
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+import { isCompanyEmail } from "@calcom/features/ee/organizations/lib/utils";
+import { TeamRepository } from "@calcom/features/ee/teams/repositories/TeamRepository";
+import { OnboardingPathService } from "@calcom/features/onboarding/lib/onboarding-path.service";
+import { UserRepository } from "@calcom/features/users/repositories/UserRepository";
+import { prisma } from "@calcom/prisma";
+
+import { buildLegacyRequest } from "@lib/buildLegacyCtx";
+
+import { OrganizationMigrateTeamsView } from "~/onboarding/organization/migrate-teams/organization-migrate-teams-view";
+
+type PageProps = {
+  searchParams: Promise<{ migrate?: string }>;
+};
+
+export default async function MigrateTeamsPage({ searchParams }: PageProps) {
+  const session = await getServerSession({ req: buildLegacyRequest(await headers(), await cookies()) });
+
+  if (!session?.user?.id) {
+    return redirect("/auth/login");
+  }
+
+  const userEmail = session.user.email || "";
+  const userId = session.user.id;
+
+  const gettingStartedPath = await OnboardingPathService.getGettingStartedPath(prisma);
+
+  if (!isCompanyEmail(userEmail)) {
+    return redirect(gettingStartedPath);
+  }
+
+  const userRepository = new UserRepository(prisma);
+  const { organizations } = await userRepository.findOrganizations({ userId });
+
+  if (organizations.length > 0) {
+    return redirect(gettingStartedPath);
+  }
+
+  // Check for migrate query param
+  const params = await searchParams;
+  const migrateParam = params?.migrate;
+
+  // If no migrate param, redirect to teams step
+  if (migrateParam !== "true") {
+    return redirect("/onboarding/organization/teams");
+  }
+
+  // Check if user has teams to migrate
+  const teamRepository = new TeamRepository(prisma);
+  const ownedTeams = await teamRepository.findOwnedTeamsByUserId({ userId });
+
+  // If no teams, redirect to teams step
+  if (ownedTeams.length === 0) {
+    return redirect("/onboarding/organization/teams");
+  }
+
+  return <OrganizationMigrateTeamsView userEmail={userEmail} />;
+}

apps/web/app/api/organizations/payment-redirect/route.ts

@@ -5,9 +5,11 @@ import { z } from "zod";
 
 import stripe from "@calcom/features/ee/payments/server/stripe";
 import { FeaturesRepository } from "@calcom/features/flags/features.repository";
+import { OrganizationOnboardingRepository } from "@calcom/features/organizations/repositories/OrganizationOnboardingRepository";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { HttpError } from "@calcom/lib/http-error";
 import { prisma } from "@calcom/prisma";
+import { orgOnboardingTeamsSchema } from "@calcom/prisma/zod-utils";
 
 const querySchema = z.object({
   session_id: z.string().min(1),
@@ -43,6 +45,19 @@ async function getHandler(req: NextRequest) {
 
     // If onboarding-v3 is enabled AND organizationOnboardingId exists, redirect to onboarding flow
     if (isOnboardingV3Enabled && organizationOnboardingId) {
+      // Check if this is a migration flow (user has already completed onboarding)
+      const onboarding = await OrganizationOnboardingRepository.findById(organizationOnboardingId);
+      const hasMigratedTeams =
+        onboarding?.teams &&
+        orgOnboardingTeamsSchema.parse(onboarding.teams).some((team) => team.isBeingMigrated);
+
+      if (hasMigratedTeams) {
+        // Migration flow - user already completed onboarding, redirect to event-types
+        const redirectUrl = new URL("/event-types?newOrganizationModal=true", WEBAPP_URL).toString();
+        return NextResponse.redirect(redirectUrl);
+      }
+
+      // Regular flow - redirect to personal onboarding
       params.append("fromTeamOnboarding", "true");
       const redirectUrl = new URL(
         `/onboarding/personal/settings?${params.toString()}`,

apps/web/modules/onboarding/components/onboarding-invite-browser-view.tsx

@@ -6,6 +6,8 @@ import { usePathname } from "next/navigation";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Avatar } from "@calcom/ui/components/avatar";
+import { Badge } from "@calcom/ui/components/badge";
+import classNames from "@calcom/ui/classNames";
 
 import { useOnboardingStore, type Invite } from "../store/onboarding-store";
 
@@ -26,6 +28,7 @@ type DisplayItem = {
   email: string;
   team: string;
   isReal?: boolean;
+  isMigrated?: boolean;
 };
 
 export const OnboardingInviteBrowserView = ({
@@ -35,8 +38,16 @@ export const OnboardingInviteBrowserView = ({
 }: OnboardingInviteBrowserViewProps) => {
   const pathname = usePathname();
   const { data: user } = trpc.viewer.me.get.useQuery();
-  const { teamBrand, teamInvites, invites, teamDetails, organizationBrand, organizationDetails } =
-    useOnboardingStore();
+  const {
+    teamBrand,
+    teamInvites,
+    invites,
+    teamDetails,
+    organizationBrand,
+    organizationDetails,
+    migratedMembers,
+    teams,
+  } = useOnboardingStore();
   const { t } = useLocale();
 
   // Animation variants for entry and exit
@@ -83,6 +94,32 @@ export const OnboardingInviteBrowserView = ({
   // Filter out empty invites (where email is empty or just whitespace)
   const validInvites = actualInvites.filter((invite) => invite.email && invite.email.trim().length > 0);
 
+  // Add migrated members if using organization invites
+  const migratedInvites: Invite[] = [];
+  if (useOrganizationInvites && migratedMembers.length > 0) {
+    migratedInvites.push(
+      ...migratedMembers.map((member) => {
+        // Find team name from teamId
+        const team = teams.find((t) => t.id === member.teamId);
+        return {
+          email: member.email,
+          team: team?.name || "",
+          role: "MEMBER" as const,
+        };
+      })
+    );
+  }
+
+  // Combine form invites with migrated members, avoiding duplicates
+  const allInvites = [...validInvites];
+  const existingEmails = new Set(validInvites.map((inv) => inv.email.toLowerCase()));
+  migratedInvites.forEach((migratedInvite) => {
+    if (!existingEmails.has(migratedInvite.email.toLowerCase())) {
+      allInvites.push(migratedInvite);
+      existingEmails.add(migratedInvite.email.toLowerCase());
+    }
+  });
+
   // Create empty state items
   const emptyStateItem = {
     name: t("team_member"),
@@ -95,14 +132,19 @@ export const OnboardingInviteBrowserView = ({
   const displayItems: DisplayItem[] = [];
   const maxItems = 9;
 
-  // Add actual invites first
-  for (let i = 0; i < validInvites.length && i < maxItems; i++) {
-    const invite = validInvites[i];
+  // Create a set of migrated member emails for quick lookup
+  const migratedEmails = new Set(migratedMembers.map((member) => member.email.toLowerCase()));
+
+  // Add all invites (form invites + migrated members)
+  for (let i = 0; i < allInvites.length && i < maxItems; i++) {
+    const invite = allInvites[i];
+    const isMigrated = migratedEmails.has(invite.email.toLowerCase());
     displayItems.push({
       name: invite.email.split("@")[0] || t("team_member"),
       email: invite.email,
       team: invite.team || t("team"),
       isReal: true,
+      isMigrated,
     });
   }
 
@@ -134,30 +176,65 @@ export const OnboardingInviteBrowserView = ({
               ease: "backOut",
             }}>
             <div className="bg-default border-subtle flex flex-col rounded-2xl border">
-              <div className="relative p-1">
-                {/* Banner Image */}
-                {organizationBrand.banner && (
-                  <div className="border-subtle relative h-36 w-full overflow-hidden rounded-xl border">
-                    {/* eslint-disable-next-line @next/next/no-img-element */}
-                    <img
-                      src={organizationBrand.banner}
-                      alt={displayName}
-                      className="h-full w-full object-cover"
-                    />
-                  </div>
-                )}
+              {useOrganizationInvites || organizationBrand.banner || avatar ? (
+                <div className="relative p-1">
+                  {/* Banner Image */}
+                  {useOrganizationInvites && (
+                    <div className="border-subtle relative h-36 w-full overflow-hidden rounded-xl border">
+                      {organizationBrand.banner ? (
+                        /* eslint-disable-next-line @next/next/no-img-element */
+                        <img
+                          src={organizationBrand.banner}
+                          alt={displayName}
+                          className="h-full w-full object-cover"
+                        />
+                      ) : (
+                        <div className="bg-emphasis h-full w-full" />
+                      )}
+                    </div>
+                  )}
+                  {!useOrganizationInvites && organizationBrand.banner && (
+                    <div className="border-subtle relative h-36 w-full overflow-hidden rounded-xl border">
+                      {/* eslint-disable-next-line @next/next/no-img-element */}
+                      <img
+                        src={organizationBrand.banner}
+                        alt={displayName}
+                        className="h-full w-full object-cover"
+                      />
+                    </div>
+                  )}
 
-                {/* Organization Avatar - Overlaying the banner */}
-                {organizationBrand.banner && avatar && (
-                  <div className="absolute -bottom-6 left-4">
-                    <Avatar size="lg" imageSrc={avatar} alt={displayName} className="h-12 w-12 border" />
-                  </div>
-                )}
-              </div>
+                  {/* Organization Avatar - Overlaying the banner */}
+                  {useOrganizationInvites && avatar && (
+                    <div className="absolute -bottom-6 left-4">
+                      <Avatar
+                        size="lg"
+                        imageSrc={avatar}
+                        alt={displayName}
+                        className="h-12 w-12 border"
+                      />
+                    </div>
+                  )}
+                  {!useOrganizationInvites && organizationBrand.banner && avatar && (
+                    <div className="absolute -bottom-6 left-4">
+                      <Avatar
+                        size="lg"
+                        imageSrc={avatar}
+                        alt={displayName}
+                        className="h-12 w-12 border"
+                      />
+                    </div>
+                  )}
+                </div>
+              ) : null}
 
               {/* Organization Info */}
-              <div className={`flex flex-col items-start gap-1 px-4 pb-4 pt-8`}>
-                {!organizationBrand.banner && avatar && (
+              <div
+                className={classNames(
+                  `flex flex-col items-start gap-1 px-4 pb-4`,
+                  useOrganizationInvites || organizationBrand.banner || avatar ? "pt-8" : "pt-4"
+                )}>
+                {!useOrganizationInvites && !organizationBrand.banner && avatar && (
                   <Avatar
                     size="lg"
                     imageSrc={avatar}
@@ -192,11 +269,18 @@ export const OnboardingInviteBrowserView = ({
                         {item.email}
                       </p>
                     </div>
-                    {item.team && (
-                      <div className="bg-emphasis text-emphasis rounded-md px-2 py-0.5 text-xs">
-                        {item.team}
-                      </div>
-                    )}
+                    <div className="flex flex-col items-center gap-1">
+                      {item.team && !item.isMigrated && (
+                        <div className="bg-emphasis text-emphasis line-clamp-1 max-w-[86px] truncate rounded-md px-2 py-0.5 text-xs">
+                          {item.team}
+                        </div>
+                      )}
+                      {item.isMigrated && (
+                        <Badge variant="green" className="text-xs">
+                          {t("migrating")}
+                        </Badge>
+                      )}
+                    </div>
                   </div>
                 </div>
               ))}