feat: Onboarding V3 (calcom#24299)

* feat: redirect to new onboarding flow

* Getting started

* Brand details

* Preview organization brands

* Orgs team pages

* Invite team steps

* Move to global zustand store

* Few darkmdoe fixes

* Wip onboarding + stripe flow

* Default plan state

Server Action for gettting slug satus of org

* Remove onboardingId

* Confirmation prompt

* Update old onboarding flow handlers to handle new fields

* update onboarding hook

* Filter out organization section for none -company emails

* Match placeholders to users domain

* Drop migration

* Wip new onboarding intent

* WIP flow for self-hosted. Same service call just split logic

* WIP

* Add TODO

* Use onboarding user type instead of trpc session

* WIP

* WIP

* pass role and team name from onboarding to save in schema

* Add test to ensure role + name + team are persisted into onboarding table

* migrate roles to enum values

* Update ENUM

* Fix type error

* Redirect if flag is disabled

* Revert packages

* Revert all packages/* changes to original branch point

* Layout fixes + design

* Add slugify

* Support saving brand,logo and banner

* Cleanup

* iMobile fixes

* More mobile and darkmdoe fixes

* Add I18n

* Fix lock file

* Fix types

* Fix types errors

* Copy changes

Author: sean-brydon

apps/web/app/(use-page-wrapper)/onboarding/getting-started/page.tsx

@@ -0,0 +1,36 @@
+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 { OnboardingView } from "~/onboarding/getting-started/onboarding-view";
+
+export const generateMetadata = async () => {
+  return await _generateMetadata(
+    (t) => `${APP_NAME} - ${t("getting_started")}`,
+    () => "",
+    true,
+    undefined,
+    "/onboarding/getting-started"
+  );
+};
+
+const ServerPage = async () => {
+  const session = await getServerSession({ req: buildLegacyRequest(await headers(), await cookies()) });
+
+  if (!session?.user?.id) {
+    return redirect("/auth/login");
+  }
+
+  // Hello {username} || there. Not sure how to do this nicely with i18n just yet
+  const userName = session.user.name || "there";
+  const userEmail = session.user.email || "";
+
+  return <OnboardingView userName={userName} userEmail={userEmail} />;
+};
+
+export default ServerPage;

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

@@ -0,0 +1,15 @@
+import { redirect } from "next/navigation";
+
+import { FeaturesRepository } from "@calcom/features/flags/features.repository";
+import { prisma } from "@calcom/prisma";
+
+export default async function OnboardingLayout({ children }: { children: React.ReactNode }) {
+  const featuresRepository = new FeaturesRepository(prisma);
+  const isOnboardingV3Enabled = await featuresRepository.checkIfFeatureIsEnabledGlobally("onboarding-v3");
+
+  if (!isOnboardingV3Enabled) {
+    redirect("/getting-started");
+  }
+
+  return <>{children}</>;
+}

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

@@ -0,0 +1,35 @@
+import { createRouterCaller } from "app/_trpc/context";
+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 { OrganizationBrandView } from "~/onboarding/organization/brand/organization-brand-view";
+
+export const generateMetadata = async () => {
+  return await _generateMetadata(
+    (t) => `${APP_NAME} - ${t("organization_brand")}`,
+    () => "",
+    true,
+    undefined,
+    "/onboarding/organization/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 <OrganizationBrandView userEmail={userEmail} />;
+};
+
+export default ServerPage;

apps/web/app/(use-page-wrapper)/onboarding/organization/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 { OrganizationDetailsView } from "~/onboarding/organization/details/organization-details-view";
+
+export const generateMetadata = async () => {
+  return await _generateMetadata(
+    (t) => `${APP_NAME} - ${t("organization_details")}`,
+    () => "",
+    true,
+    undefined,
+    "/onboarding/organization/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 <OrganizationDetailsView userEmail={userEmail} />;
+};
+
+export default ServerPage;

apps/web/app/(use-page-wrapper)/onboarding/organization/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 { OrganizationInviteView } from "~/onboarding/organization/invite/organization-invite-view";
+
+export const generateMetadata = async () => {
+  return await _generateMetadata(
+    (t) => `${APP_NAME} - ${t("invite_teammates")}`,
+    () => "",
+    true,
+    undefined,
+    "/onboarding/organization/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 <OrganizationInviteView userEmail={userEmail} />;
+};
+
+export default ServerPage;

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

@@ -0,0 +1,35 @@
+import { createRouterCaller } from "app/_trpc/context";
+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 { OrganizationTeamsView } from "~/onboarding/organization/teams/organization-teams-view";
+
+export const generateMetadata = async () => {
+  return await _generateMetadata(
+    (t) => `${APP_NAME} - ${t("organization_teams")}`,
+    () => "",
+    true,
+    undefined,
+    "/onboarding/organization/teams"
+  );
+};
+
+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 <OrganizationTeamsView userEmail={userEmail} />;
+};
+
+export default ServerPage;

apps/web/lib/signup/getServerSideProps.tsx

@@ -30,6 +30,7 @@ export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
     "email-verification"
   );
   const signupDisabled = await featuresRepository.checkIfFeatureIsEnabledGlobally("disable-signup");
+  const onboardingV3Enabled = await featuresRepository.checkIfFeatureIsEnabledGlobally("onboarding-v3");
 
   const token = z.string().optional().parse(ctx.query.token);
   const redirectUrlData = z
@@ -62,6 +63,7 @@ export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
     isSAMLLoginEnabled,
     prepopulateFormValues: undefined,
     emailVerificationEnabled,
+    onboardingV3Enabled,
   };
 
   if ((process.env.NEXT_PUBLIC_DISABLE_SIGNUP === "true" && !token) || signupDisabled) {

apps/web/modules/onboarding/components/onboarding-continuation-prompt.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+
+import { Button } from "@calcom/ui/components/button";
+import { Icon } from "@calcom/ui/components/icon";
+
+import { useOnboardingStore } from "../store/onboarding-store";
+
+export const OnboardingContinuationPrompt = () => {
+  const router = useRouter();
+  const { organizationDetails, resetOnboarding } = useOnboardingStore();
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    // Check if there's existing organization data
+    const hasExistingData = organizationDetails.name && organizationDetails.link;
+    setIsVisible(!!hasExistingData);
+  }, [organizationDetails]);
+
+  if (!isVisible) {
+    return null;
+  }
+
+  const handleContinue = () => {
+    // Navigate to the next step in the flow (brand page)
+    router.push("/onboarding/organization/brand");
+  };
+
+  const handleStartOver = () => {
+    resetOnboarding();
+    setIsVisible(false);
+  };
+
+  return (
+    <div className="animate-fade-in fixed bottom-4 right-4 z-50">
+      <div className="bg-default border-muted shadow-default relative w-[360px] rounded-lg border p-4">
+        <button
+          onClick={() => setIsVisible(false)}
+          className="text-muted hover:text-emphasis absolute right-2 top-2 rounded-md p-1 transition-colors">
+          <Icon name="x" className="h-4 w-4" />
+        </button>
+
+        <div className="mb-3 pr-6">
+          <h3 className="text-emphasis mb-1 text-base font-semibold">Continue onboarding?</h3>
+          <p className="text-subtle text-sm">
+            Would you like to carry on with onboarding for{" "}
+            <span className="text-emphasis font-medium">{organizationDetails.name}</span> or start over?
+          </p>
+        </div>
+
+        <div className="ml-auto flex gap-2">
+          <Button onClick={handleStartOver} color="secondary">
+            Start over
+          </Button>
+          <Button onClick={handleContinue} color="primary">
+            Continue
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};