chore: [app-router-migration-10] Migrate getting started page (#12776)

* make no-meeting-found page use ssr

* remove-route-groups

* add LayoutHOC

* fix

* fix

* add a/b test flags for apps, workflows, getting-started, settings/teams

* chore: migrate getting-started-page

* fix: move fonts css variables to layout

* chore/implement-ab-test

* Discard changes to .env.example

---------

Co-authored-by: zomars <zomars@me.com>

apps/web/app/future/(individual-page-wrapper)/getting-started/[[...step]]/page.tsx

@@ -0,0 +1,70 @@
+import LegacyPage from "@pages/getting-started/[[...step]]";
+import { ssrInit } from "app/_trpc/ssrInit";
+import { cookies, headers } from "next/headers";
+import { redirect } from "next/navigation";
+
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+import prisma from "@calcom/prisma";
+
+import PageWrapper from "@components/PageWrapperAppDir";
+
+async function getData() {
+  const req = { headers: headers(), cookies: cookies() };
+
+  //@ts-expect-error Type '{ headers: ReadonlyHeaders; cookies: ReadonlyRequestCookies; }' is not assignable to type 'NextApiRequest
+  const session = await getServerSession({ req });
+
+  if (!session?.user?.id) {
+    return redirect("/auth/login");
+  }
+
+  const ssr = await ssrInit();
+  await ssr.viewer.me.prefetch();
+
+  const user = await prisma.user.findUnique({
+    where: {
+      id: session.user.id,
+    },
+    select: {
+      completedOnboarding: true,
+      teams: {
+        select: {
+          accepted: true,
+          team: {
+            select: {
+              id: true,
+              name: true,
+              logo: true,
+            },
+          },
+        },
+      },
+    },
+  });
+
+  if (!user) {
+    throw new Error("User from session not found");
+  }
+
+  if (user.completedOnboarding) {
+    redirect("/event-types");
+  }
+
+  return {
+    dehydratedState: await ssr.dehydrate(),
+    hasPendingInvites: user.teams.find((team: any) => team.accepted === false) ?? false,
+  };
+}
+
+export default async function Page() {
+  const props = await getData();
+
+  const h = headers();
+  const nonce = h.get("x-nonce") ?? undefined;
+
+  return (
+    <PageWrapper getLayout={null} requiresLicense={false} nonce={nonce} themeBasis={null} {...props}>
+      <LegacyPage />
+    </PageWrapper>
+  );
+}

apps/web/pages/getting-started/[[...step]].tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import type { GetServerSidePropsContext } from "next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import Head from "next/head";
@@ -51,13 +53,18 @@ const stepRouteSchema = z.object({
 const OnboardingPage = () => {
   const pathname = usePathname();
   const params = useParamsWithFallback();
+
   const router = useRouter();
   const [user] = trpc.viewer.me.useSuspenseQuery();
   const { t } = useLocale();
-  const result = stepRouteSchema.safeParse(params);
+
+  const result = stepRouteSchema.safeParse({
+    ...params,
+    step: Array.isArray(params.step) ? params.step : [params.step],
+  });
+
   const currentStep = result.success ? result.data.step[0] : INITIAL_STEP;
   const from = result.success ? result.data.from : "";
-
   const headers = [
     {
       title: `${t("welcome_to_cal_header", { appName: APP_NAME })}`,
@@ -218,7 +225,6 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
     return { redirect: { permanent: false, destination: "/event-types" } };
   }
   const locale = await getLocale(context.req);
-
   return {
     props: {
       ...(await serverSideTranslations(locale, ["common"])),

apps/web/playwright/ab-tests-redirect.e2e.ts

@@ -166,4 +166,31 @@ test.describe("apps/ A/B tests", () => {
 
     await expect(locator).toHaveClass(/bg-emphasis/);
   });
+
+  test("should point to the /future/getting-started", async ({ page, users, context }) => {
+    await context.addCookies([
+      {
+        name: "x-calcom-future-routes-override",
+        value: "1",
+        url: "http://localhost:3000",
+      },
+    ]);
+    const user = await users.create({ completedOnboarding: false, name: null });
+
+    await user.apiLogin();
+
+    await page.goto("/getting-started/connected-calendar");
+
+    await page.waitForLoadState();
+
+    const dataNextJsRouter = await page.evaluate(() =>
+      window.document.documentElement.getAttribute("data-nextjs-router")
+    );
+
+    expect(dataNextJsRouter).toEqual("app");
+
+    const locator = page.getByText("Apple Calendar");
+
+    await expect(locator).toBeVisible();
+  });
 });