chore: Onboarding path service plus redirects (#24679)

* i18n

* WIP icon stuff

* More icon work

* More gradient tuning

* Mvoe plan-icon to planicon.tsx

* Fix cubic suggestion

* Fix darkmode icon and gradients

* Fix type error

* Onboarding path service

* Update usages of onboarding path and getting started hook

apps/web/lib/pages/auth/verify-email.ts

@@ -4,6 +4,7 @@ import { z } from "zod";
 import dayjs from "@calcom/dayjs";
 import { OrganizationRepository } from "@calcom/features/ee/organizations/repositories/OrganizationRepository";
 import { StripeBillingService } from "@calcom/features/ee/billing/stripe-billing-service";
+import { OnboardingPathService } from "@calcom/features/onboarding/lib/onboarding-path.service";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { IS_STRIPE_ENABLED } from "@calcom/lib/constants";
 import { prisma } from "@calcom/prisma";
@@ -172,7 +173,9 @@ export async function handler(req: NextApiRequest, res: NextApiResponse) {
 
   await moveUserToMatchingOrg({ email: user.email });
 
-  return res.redirect(`${WEBAPP_URL}/${hasCompletedOnboarding ? "/event-types" : "/getting-started"}`);
+  const gettingStartedPath = await OnboardingPathService.getGettingStartedPath(prisma);
+
+  return res.redirect(`${WEBAPP_URL}${hasCompletedOnboarding ? "/event-types" : gettingStartedPath}`);
 }
 
 export async function cleanUpVerificationTokens(id: number) {

apps/web/modules/auth/verify-email-view.tsx

@@ -11,6 +11,7 @@ import useEmailVerifyCheck from "@calcom/trpc/react/hooks/useEmailVerifyCheck";
 import { showToast } from "@calcom/ui/components/toast";
 import { Button } from "@calcom/ui/components/button";
 import { EmptyScreen } from "@calcom/ui/components/empty-screen";
+import { useFlagMap } from "@calcom/features/flags/context/provider";
 
 function VerifyEmailPage() {
   const { data } = useEmailVerifyCheck();
@@ -18,13 +19,15 @@ function VerifyEmailPage() {
   const router = useRouter();
   const { t, isLocaleReady } = useLocale();
   const mutation = trpc.viewer.auth.resendVerifyEmail.useMutation();
+  const flags = useFlagMap();
 
   useEffect(() => {
     if (data?.isVerified) {
-      router.replace("/getting-started");
+      const gettingStartedPath = flags["onboarding-v3"] ? "/onboarding/getting-started" : "/getting-started";
+      router.replace(gettingStartedPath);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [data?.isVerified]);
+  }, [data?.isVerified, flags]);
   if (!isLocaleReady) {
     return null;
   }

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

@@ -1,6 +1,7 @@
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 
+import { useFlagMap } from "@calcom/features/flags/context/provider";
 import { trpc } from "@calcom/trpc/react";
 
 import type { OnboardingState } from "../store/onboarding-store";
@@ -8,6 +9,7 @@ import type { OnboardingState } from "../store/onboarding-store";
 export function useCreateTeam() {
   const router = useRouter();
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const flags = useFlagMap();
 
   const createTeamMutation = trpc.viewer.teams.create.useMutation();
 
@@ -31,7 +33,11 @@ export function useCreateTeam() {
       }
 
       if (result.team) {
-        router.push("/getting-started");
+        // Not sure we need this flag check - keeping it here for safe keeping as this is called only from v3 onboarding flow
+        const gettingStartedPath = flags["onboarding-v3"]
+          ? "/onboarding/getting-started"
+          : "/getting-started";
+        router.push(gettingStartedPath);
       }
     } catch (error) {
       console.error("Failed to create team:", error);

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

@@ -4,6 +4,7 @@ import { useState } from "react";
 import { CreationSource } from "@calcom/prisma/enums";
 import { trpc } from "@calcom/trpc/react";
 import { showToast } from "@calcom/ui/components/toast";
+import { useFlagMap } from "@calcom/features/flags/context/provider";
 
 import type { OnboardingState } from "../store/onboarding-store";
 
@@ -11,6 +12,7 @@ export const useSubmitOnboarding = () => {
   const router = useRouter();
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const flags = useFlagMap();
 
   const intentToCreateOrg = trpc.viewer.organizations.intentToCreateOrg.useMutation();
 
@@ -80,7 +82,8 @@ export const useSubmitOnboarding = () => {
       showToast("Organization created successfully!", "success");
       // TODO: after this redirect we need to hard refresh the page to see org
       resetOnboarding();
-      router.push("/getting-started");
+      const gettingStartedPath = flags["onboarding-v3"] ? "/onboarding/getting-started" : "/getting-started";
+      router.push(gettingStartedPath);
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : "Failed to create organization";
       setError(errorMessage);

apps/web/server/lib/auth/sso/[provider]/getServerSideProps.tsx

@@ -7,6 +7,7 @@ import stripe from "@calcom/features/ee/payments/server/stripe";
 import { hostedCal, isSAMLLoginEnabled, samlProductID, samlTenantID } from "@calcom/features/ee/sso/lib/saml";
 import { ssoTenantProduct } from "@calcom/features/ee/sso/lib/sso";
 import { checkUsername } from "@calcom/features/profile/lib/checkUsername";
+import { OnboardingPathService } from "@calcom/features/onboarding/lib/onboarding-path.service";
 import { IS_PREMIUM_USERNAME_ENABLED } from "@calcom/lib/constants";
 import prisma from "@calcom/prisma";
 
@@ -18,7 +19,12 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
   const providerParam = asStringOrNull(context.query.provider);
   const emailParam = asStringOrNull(context.query.email);
   const usernameParam = asStringOrNull(context.query.username);
-  const successDestination = `/getting-started${usernameParam ? `?username=${usernameParam}` : ""}`;
+
+  const successDestination = await OnboardingPathService.getGettingStartedPathWithParams(
+    prisma,
+    usernameParam ? { username: usernameParam } : undefined
+  );
+
   if (!providerParam) {
     throw new Error(`File is not named sso/[provider]`);
   }