v3.7.11

the palette has changed so the theme has to be adjusted for pwa mode

.env.example

@@ -138,6 +138,11 @@ FORMBRICKS_HOST_URL=https://app.formbricks.com
 FORMBRICKS_ENVIRONMENT_ID=
 FORMBRICKS_FEEDBACK_SURVEY_ID=
 
+# AvatarAPI
+# Used to pre-fill avatar during signup
+AVATARAPI_USERNAME=
+AVATARAPI_PASSWORD=
+
 # Twilio
 # Used to send SMS reminders in workflows
 TWILIO_SID=
@@ -231,6 +236,8 @@ CSP_POLICY=
 EDGE_CONFIG=
 
 NEXT_PUBLIC_MINUTES_TO_BOOK=5 # Minutes
+NEXT_PUBLIC_BOOKER_NUMBER_OF_DAYS_TO_LOAD=0 # Override the booker to only load X number of days worth of data
+
 # Control time intervals on a user's Schedule availability
 NEXT_PUBLIC_AVAILABILITY_SCHEDULE_INTERVAL=
 

.github/workflows/e2e-app-store.yml

@@ -28,6 +28,10 @@ jobs:
         shard: [1, 2]
 
     steps:
+      - uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
       - uses: actions/checkout@v3
       - uses: ./.github/actions/dangerous-git-checkout
       - uses: ./.github/actions/yarn-install

.github/workflows/e2e-embed-react.yml

@@ -23,6 +23,10 @@ jobs:
         shard: [1, 2]
 
     steps:
+      - uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
       - uses: actions/checkout@v3
       - uses: ./.github/actions/dangerous-git-checkout
       - uses: ./.github/actions/yarn-install

.github/workflows/e2e-embed.yml

@@ -28,6 +28,10 @@ jobs:
         shard: [1, 2]
 
     steps:
+      - uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
       - uses: actions/checkout@v3
       - uses: ./.github/actions/dangerous-git-checkout
       - uses: ./.github/actions/yarn-install

.github/workflows/e2e.yml

@@ -26,6 +26,10 @@ jobs:
       matrix:
         shard: [1, 2, 3, 4, 5]
     steps:
+      - uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
       - uses: actions/checkout@v3
       - uses: ./.github/actions/dangerous-git-checkout
       - uses: ./.github/actions/yarn-install

.github/workflows/pr.yml

@@ -12,14 +12,6 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
-  login:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Login to Docker Hub
-        uses: docker/login-action@v3
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
   changes:
     name: Detect changes
     runs-on: buildjet-4vcpu-ubuntu-2204

apps/ai/tsconfig.json

@@ -13,6 +13,12 @@
       }
     ]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    "../../packages/types/window.d.ts"
+  ],
   "exclude": ["node_modules"]
 }

apps/api/lib/helpers/rateLimitApiKey.ts

@@ -1,6 +1,7 @@
 import type { NextMiddleware } from "next-api-middleware";
 
 import { checkRateLimitAndThrowError } from "@calcom/lib/checkRateLimitAndThrowError";
+import { API_KEY_RATE_LIMIT } from "@calcom/lib/rateLimit";
 
 export const rateLimitApiKey: NextMiddleware = async (req, res, next) => {
   if (!req.query.apiKey) return res.status(401).json({ message: "No apiKey provided" });
@@ -9,6 +10,11 @@ export const rateLimitApiKey: NextMiddleware = async (req, res, next) => {
   await checkRateLimitAndThrowError({
     identifier: req.query.apiKey as string,
     rateLimitingType: "api",
+    onRateLimiterResponse: (response) => {
+      res.setHeader("X-RateLimit-Limit", API_KEY_RATE_LIMIT);
+      res.setHeader("X-RateLimit-Remaining", response.remaining);
+      res.setHeader("X-RateLimit-Reset", response.reset);
+    },
   });
 
   await next();

apps/api/lib/validations/event-type.ts

@@ -62,6 +62,7 @@ export const schemaEventTypeBaseBodyParams = EventType.pick({
   bookingLimits: true,
   onlyShowFirstAvailableSlot: true,
   durationLimits: true,
+  assignAllTeamMembers: true,
 })
   .merge(
     z.object({

apps/api/lib/validations/membership.ts

@@ -30,6 +30,7 @@ export const membershipEditBodySchema = Membership.omit({
   /** To avoid complication, let's avoid updating these, instead you can delete and create a new invite */
   teamId: true,
   userId: true,
+  id: true,
 })
   .partial({
     accepted: true,

apps/api/package.json

@@ -33,7 +33,7 @@
     "@sentry/nextjs": "^7.73.0",
     "bcryptjs": "^2.4.3",
     "memory-cache": "^0.2.0",
-    "next": "^13.4.6",
+    "next": "^13.5.4",
     "next-api-middleware": "^1.0.1",
     "next-axiom": "^0.17.0",
     "next-swagger-doc": "^0.3.6",

apps/api/pages/api/slots/_get.test.ts

@@ -0,0 +1,98 @@
+import prismock from "../../../../../tests/libs/__mocks__/prisma";
+
+import type { Request, Response } from "express";
+import type { NextApiRequest, NextApiResponse } from "next";
+import { createMocks } from "node-mocks-http";
+import { describe, expect, test } from "vitest";
+
+import dayjs from "@calcom/dayjs";
+
+import handler from "./_get";
+
+type CustomNextApiRequest = NextApiRequest & Request;
+type CustomNextApiResponse = NextApiResponse & Response;
+
+function buildMockData() {
+  prismock.user.create({
+    data: {
+      id: 1,
+      username: "test",
+      name: "Test User",
+      email: "test@example.com",
+    },
+  });
+  prismock.eventType.create({
+    data: {
+      id: 1,
+      slug: "test",
+      length: 30,
+      title: "Test Event Type",
+      userId: 1,
+    },
+  });
+}
+
+describe("GET /api/slots", () => {
+  describe("Errors", () => {
+    test("Missing required data", async () => {
+      const { req, res } = createMocks<CustomNextApiRequest, CustomNextApiResponse>({
+        method: "GET",
+      });
+
+      await handler(req, res);
+
+      expect(res.statusCode).toBe(400);
+      expect(JSON.parse(res._getData())).toMatchInlineSnapshot(`
+        {
+          "message": "invalid_type in 'startTime': Required; invalid_type in 'endTime': Required",
+        }
+      `);
+    });
+  });
+
+  describe("Success", () => {
+    describe("Regular event-type", () => {
+      test("Returns and event type available slots", async () => {
+        const { req, res } = createMocks<CustomNextApiRequest, CustomNextApiResponse>({
+          method: "GET",
+          query: {
+            eventTypeId: 1,
+            startTime: dayjs().format(),
+            endTime: dayjs().add(1, "day").format(),
+            usernameList: "test",
+          },
+          prisma: prismock,
+        });
+        buildMockData();
+        await handler(req, res);
+        console.log({ statusCode: res._getStatusCode(), data: JSON.parse(res._getData()) });
+        expect(JSON.parse(res._getData())).toMatchInlineSnapshot(`
+          {
+            "slots": {},
+          }
+        `);
+      });
+      test("Returns and event type available slots with passed timeZone", async () => {
+        const { req, res } = createMocks<CustomNextApiRequest, CustomNextApiResponse>({
+          method: "GET",
+          query: {
+            eventTypeId: 1,
+            startTime: dayjs().format(),
+            endTime: dayjs().add(1, "day").format(),
+            usernameList: "test",
+            timeZone: "UTC",
+          },
+          prisma: prismock,
+        });
+        buildMockData();
+        await handler(req, res);
+        console.log({ statusCode: res._getStatusCode(), data: JSON.parse(res._getData()) });
+        expect(JSON.parse(res._getData())).toMatchInlineSnapshot(`
+          {
+            "slots": {},
+          }
+        `);
+      });
+    });
+  });
+});

apps/api/pages/api/slots/_get.ts

@@ -22,7 +22,7 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
     const { usernameList, ...rest } = req.query;
     let slugs = usernameList;
     if (!Array.isArray(usernameList)) {
-      slugs = usernameList ? [usernameList] : [];
+      slugs = usernameList ? [usernameList] : undefined;
     }
     const input = getScheduleSchema.parse({ usernameList: slugs, ...rest });
     const timeZoneSupported = input.timeZone ? isSupportedTimeZone(input.timeZone) : false;
@@ -38,9 +38,9 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
           },
           {}
         )
-      : availableSlots;
+      : availableSlots.slots;
 
-    return slotsInProvidedTimeZone;
+    return { slots: slotsInProvidedTimeZone };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
   } catch (cause) {
     if (cause instanceof TRPCError) {

apps/api/pages/api/webhooks/[id]/_delete.ts

@@ -39,7 +39,7 @@ export async function deleteHandler(req: NextApiRequest) {
   const { prisma, query } = req;
   const { id } = schemaQueryIdAsString.parse(query);
   await prisma.webhook.delete({ where: { id } });
-  return { message: `Schedule with id: ${id} deleted successfully` };
+  return { message: `Webhook with id: ${id} deleted successfully` };
 }
 
 export default defaultResponder(deleteHandler);

apps/api/pages/api/webhooks/[id]/_patch.ts

@@ -92,7 +92,7 @@ export async function patchHandler(req: NextApiRequest) {
     args.data.userId = bodyUserId;
   }
 
-  if (args.data.eventTriggers) {
+  if (eventTriggers) {
     const eventTriggersSet = new Set(eventTriggers);
     args.data.eventTriggers = Array.from(eventTriggersSet);
   }

apps/api/pages/api/webhooks/_post.ts

@@ -92,7 +92,7 @@ async function postHandler(req: NextApiRequest) {
     args.data.userId = bodyUserId;
   }
 
-  if (args.data.eventTriggers) {
+  if (eventTriggers) {
     const eventTriggersSet = new Set(eventTriggers);
     args.data.eventTriggers = Array.from(eventTriggersSet);
   }

apps/storybook/package.json

@@ -24,7 +24,7 @@
     "@storybook/blocks": "^7.6.3",
     "@storybook/nextjs": "^7.6.3",
     "@storybook/preview-api": "^7.6.3",
-    "next": "^13.4.6",
+    "next": "^13.5.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "storybook-addon-rtl-direction": "^0.0.19"

apps/swagger/package.json

@@ -14,7 +14,7 @@
   "dependencies": {
     "highlight.js": "^11.6.0",
     "isarray": "2.0.5",
-    "next": "^13.4.6",
+    "next": "^13.5.4",
     "openapi-snippet": "^0.13.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

apps/web/abTest/middlewareFactory.ts

@@ -3,6 +3,8 @@ import type { NextMiddleware, NextRequest } from "next/server";
 import { NextResponse, URLPattern } from "next/server";
 import z from "zod";
 
+import { FUTURE_ROUTES_ENABLED_COOKIE_NAME, FUTURE_ROUTES_OVERRIDE_COOKIE_NAME } from "@calcom/lib/constants";
+
 const ROUTES: [URLPattern, boolean][] = [
   ["/event-types", process.env.APP_ROUTER_EVENT_TYPES_ENABLED === "1"] as const,
   ["/settings/admin/:path*", process.env.APP_ROUTER_SETTINGS_ADMIN_ENABLED === "1"] as const,
@@ -25,9 +27,6 @@ const ROUTES: [URLPattern, boolean][] = [
   enabled,
 ]);
 
-const FUTURE_ROUTES_OVERRIDE_COOKIE_NAME = "x-calcom-future-routes-override";
-const FUTURE_ROUTES_ENABLED_COOKIE_NAME = "x-calcom-future-routes-enabled";
-
 const bucketSchema = z.union([z.literal("legacy"), z.literal("future")]);
 
 export const abTestMiddlewareFactory =

apps/web/app/WithAppDirSsg.tsx

@@ -0,0 +1,24 @@
+import type { GetStaticProps, GetStaticPropsContext } from "next";
+import { notFound, redirect } from "next/navigation";
+
+export const withAppDirSsg =
+  <T extends Record<string, any>>(getStaticProps: GetStaticProps<T>) =>
+  async (context: GetStaticPropsContext) => {
+    const ssgResponse = await getStaticProps(context);
+
+    if ("redirect" in ssgResponse) {
+      redirect(ssgResponse.redirect.destination);
+    }
+
+    if ("notFound" in ssgResponse) {
+      notFound();
+    }
+
+    const props = await Promise.resolve(ssgResponse.props);
+
+    return {
+      ...ssgResponse.props,
+      // includes dehydratedState required for future page trpcPropvider
+      ...("trpcState" in props && { dehydratedState: props.trpcState }),
+    };
+  };

apps/web/app/WithAppDirSsr.tsx

@@ -1,9 +1,9 @@
 import type { GetServerSideProps, GetServerSidePropsContext } from "next";
 import { notFound, redirect } from "next/navigation";
 
-export const withAppDir =
+export const withAppDirSsr =
   <T extends Record<string, any>>(getServerSideProps: GetServerSideProps<T>) =>
-  async (context: GetServerSidePropsContext): Promise<T> => {
+  async (context: GetServerSidePropsContext) => {
     const ssrResponse = await getServerSideProps(context);
 
     if ("redirect" in ssrResponse) {
@@ -13,9 +13,11 @@ export const withAppDir =
       notFound();
     }
 
+    const props = await Promise.resolve(ssrResponse.props);
+
     return {
-      ...ssrResponse.props,
+      ...props,
       // includes dehydratedState required for future page trpcPropvider
-      ...("trpcState" in ssrResponse.props && { dehydratedState: ssrResponse.props.trpcState }),
+      ...("trpcState" in props && { dehydratedState: props.trpcState }),
     };
   };

apps/web/app/_trpc/createHydrateClient.tsx

@@ -1,11 +1,16 @@
 "use client";
 
-import { type DehydratedState, Hydrate } from "@tanstack/react-query";
+import { type DehydratedState, HydrationBoundary } from "@tanstack/react-query";
 import { useMemo } from "react";
 
-import type { DataTransformer } from "@trpc/server";
+type DataTransformer = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  serialize: (data: any) => any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  deserialize: (data: any) => any;
+};
 
-export function createHydrateClient(opts: { transformer?: DataTransformer }) {
+export function createHydrateClient(opts: { transformer: DataTransformer }) {
   return function HydrateClient(props: { children: React.ReactNode; state: DehydratedState }) {
     const { state, children } = props;
 
@@ -16,6 +21,6 @@ export function createHydrateClient(opts: { transformer?: DataTransformer }) {
       return state;
     }, [state]);
 
-    return <Hydrate state={transformedState}>{children}</Hydrate>;
+    return <HydrationBoundary state={transformedState}>{children}</HydrationBoundary>;
   };
 }

apps/web/app/_trpc/trpc-provider.tsx

@@ -4,10 +4,7 @@ import { trpc } from "app/_trpc/client";
 import { useState } from "react";
 import superjson from "superjson";
 
-import { httpBatchLink } from "@calcom/trpc/client/links/httpBatchLink";
-import { httpLink } from "@calcom/trpc/client/links/httpLink";
-import { loggerLink } from "@calcom/trpc/client/links/loggerLink";
-import { splitLink } from "@calcom/trpc/client/links/splitLink";
+import { httpBatchLink, httpLink, loggerLink, splitLink } from "@calcom/trpc/client";
 import { ENDPOINTS } from "@calcom/trpc/react/shared";
 
 export type Endpoint = (typeof ENDPOINTS)[number];

apps/web/app/_utils.tsx

@@ -1,12 +1,33 @@
 import { type TFunction } from "i18next";
+import i18next from "i18next";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { headers } from "next/headers";
 
 import { constructGenericImage } from "@calcom/lib/OgImages";
 import { IS_CALCOM, WEBAPP_URL, APP_NAME, SEO_IMG_OGIMG } from "@calcom/lib/constants";
-import { getFixedT } from "@calcom/lib/server/getFixedT";
+//@ts-expect-error no type definitions
+import config from "@calcom/web/next-i18next.config";
 
 import { preparePageMetadata } from "@lib/metadata";
 
+const create = async (locale: string, ns: string) => {
+  const { _nextI18Next } = await serverSideTranslations(locale, [ns], config);
+
+  const _i18n = i18next.createInstance();
+  _i18n.init({
+    lng: locale,
+    resources: _nextI18Next?.initialI18nStore,
+    fallbackLng: _nextI18Next?.userConfig?.i18n.defaultLocale,
+  });
+  return _i18n;
+};
+
+const getFixedT = async (locale: string, ns: string) => {
+  const i18n = await create(locale, ns);
+
+  return i18n.getFixedT(locale, ns);
+};
+
 export const _generateMetadata = async (
   getTitle: (t: TFunction<string, undefined>) => string,
   getDescription: (t: TFunction<string, undefined>) => string

apps/web/app/future/[user]/[type]/embed/page.tsx

@@ -0,0 +1,12 @@
+import { withAppDirSsr } from "app/WithAppDirSsr";
+import withEmbedSsrAppDir from "app/WithEmbedSSR";
+import { WithLayout } from "app/layoutHOC";
+
+import LegacyPage from "~/users/views/users-type-public-view";
+import { getServerSideProps, type PageProps } from "~/users/views/users-type-public-view.getServerSideProps";
+
+const getData = withAppDirSsr<PageProps>(getServerSideProps);
+
+const getEmbedData = withEmbedSsrAppDir(getData);
+
+export default WithLayout({ getLayout: null, getData: getEmbedData, Page: LegacyPage })<"P">;

apps/web/app/future/[user]/[type]/page.tsx

@@ -0,0 +1,45 @@
+import { withAppDirSsr } from "app/WithAppDirSsr";
+import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
+import { type GetServerSidePropsContext } from "next";
+import { headers, cookies } from "next/headers";
+
+import { buildLegacyCtx } from "@lib/buildLegacyCtx";
+
+import LegacyPage from "~/users/views/users-type-public-view";
+import { getServerSideProps, type PageProps } from "~/users/views/users-type-public-view.getServerSideProps";
+
+export const generateMetadata = async ({
+  params,
+  searchParams,
+}: {
+  params: Record<string, string | string[]>;
+  searchParams: { [key: string]: string | string[] | undefined };
+}) => {
+  const props = await getData(
+    buildLegacyCtx(headers(), cookies(), params, searchParams) as unknown as GetServerSidePropsContext
+  );
+
+  const { eventData, booking, user, slug } = props;
+  const rescheduleUid = booking?.uid;
+  const { trpc } = await import("@calcom/trpc");
+  const { data: event } = trpc.viewer.public.event.useQuery(
+    { username: user, eventSlug: slug, isTeamEvent: false, org: eventData.entity.orgSlug ?? null },
+    { refetchOnWindowFocus: false }
+  );
+
+  const profileName = event?.profile?.name ?? "";
+  const title = event?.title ?? "";
+
+  return await _generateMetadata(
+    (t) => `${rescheduleUid && !!booking ? t("reschedule") : ""} ${title} | ${profileName}`,
+    (t) => `${rescheduleUid ? t("reschedule") : ""} ${title}`
+  );
+};
+const getData = withAppDirSsr<PageProps>(getServerSideProps);
+
+export default WithLayout({
+  getData,
+  Page: LegacyPage,
+  getLayout: null,
+})<"P">;

apps/web/app/future/[user]/embed/page.tsx

@@ -0,0 +1,12 @@
+import { withAppDirSsr } from "app/WithAppDirSsr";
+import withEmbedSsrAppDir from "app/WithEmbedSSR";
+import { WithLayout } from "app/layoutHOC";
+
+import LegacyPage from "~/users/views/users-public-view";
+import { getServerSideProps, type UserPageProps } from "~/users/views/users-public-view.getServerSideProps";
+
+const getData = withAppDirSsr<UserPageProps>(getServerSideProps);
+
+const getEmbedData = withEmbedSsrAppDir(getData);
+
+export default WithLayout({ getLayout: null, getData: getEmbedData, Page: LegacyPage })<"P">;

apps/web/app/future/[user]/page.tsx

@@ -0,0 +1,33 @@
+import { withAppDirSsr } from "app/WithAppDirSsr";
+import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
+import { type GetServerSidePropsContext } from "next";
+import { headers, cookies } from "next/headers";
+
+import { getLayout } from "@calcom/features/MainLayoutAppDir";
+
+import { buildLegacyCtx } from "@lib/buildLegacyCtx";
+
+import LegacyPage from "~/users/views/users-public-view";
+import { getServerSideProps, type UserPageProps } from "~/users/views/users-public-view.getServerSideProps";
+
+export const generateMetadata = async ({
+  params,
+  searchParams,
+}: {
+  params: Record<string, string | string[]>;
+  searchParams: { [key: string]: string | string[] | undefined };
+}) => {
+  const props = await getData(
+    buildLegacyCtx(headers(), cookies(), params, searchParams) as unknown as GetServerSidePropsContext
+  );
+
+  const { profile, markdownStrippedBio } = props;
+  return await _generateMetadata(
+    () => profile.name,
+    () => markdownStrippedBio
+  );
+};
+
+const getData = withAppDirSsr<UserPageProps>(getServerSideProps);
+export default WithLayout({ getLayout, getData, Page: LegacyPage })<"P">;

apps/web/app/future/apps/[slug]/[...pages]/page.tsx

@@ -0,0 +1,197 @@
+import LegacyPage, { getLayout } from "@pages/apps/[slug]/[...pages]";
+import type { PageProps, SearchParams } from "app/_types";
+import { _generateMetadata } from "app/_utils";
+import type { GetServerSidePropsContext } from "next";
+import type { Params } from "next/dist/shared/lib/router/utils/route-matcher";
+import { cookies, headers } from "next/headers";
+import { notFound, redirect } from "next/navigation";
+import z from "zod";
+
+import { getAppWithMetadata } from "@calcom/app-store/_appRegistry";
+import RoutingFormsRoutingConfig, {
+  serverSidePropsConfig,
+} from "@calcom/app-store/routing-forms/pages/app-routing.config";
+import TypeformRoutingConfig from "@calcom/app-store/typeform/pages/app-routing.config";
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+import { APP_NAME } from "@calcom/lib/constants";
+import prisma from "@calcom/prisma";
+import type { AppGetServerSideProps } from "@calcom/types/AppGetServerSideProps";
+
+import type { AppProps } from "@lib/app-providers";
+import { buildLegacyCtx } from "@lib/buildLegacyCtx";
+
+import PageWrapper from "@components/PageWrapperAppDir";
+
+import { ssrInit } from "@server/lib/ssr";
+
+type AppPageType = {
+  getServerSideProps: AppGetServerSideProps;
+  // A component than can accept any properties
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  default: ((props: any) => JSX.Element) &
+    Pick<AppProps["Component"], "isBookingPage" | "getLayout" | "PageWrapper">;
+};
+
+type Found = {
+  notFound: false;
+  Component: AppPageType["default"];
+  getServerSideProps: AppPageType["getServerSideProps"];
+};
+
+const AppsRouting = {
+  "routing-forms": RoutingFormsRoutingConfig,
+  typeform: TypeformRoutingConfig,
+};
+
+const paramsSchema = z.object({
+  slug: z.string(),
+  pages: z.array(z.string()),
+});
+
+export const generateMetadata = async ({
+  params,
+  searchParams,
+}: {
+  params: Params;
+  searchParams: SearchParams;
+}) => {
+  const p = paramsSchema.safeParse(params);
+
+  if (!p.success) {
+    return notFound();
+  }
+
+  const mainPage = p.data.pages[0];
+
+  if (mainPage === "forms") {
+    return await _generateMetadata(
+      () => `Forms | ${APP_NAME}`,
+      () => ""
+    );
+  }
+
+  const legacyContext = buildLegacyCtx(
+    headers(),
+    cookies(),
+    params,
+    searchParams
+  ) as unknown as GetServerSidePropsContext;
+  const { form } = await getPageProps(legacyContext);
+
+  return await _generateMetadata(
+    () => `${form.name} | ${APP_NAME}`,
+    () => form.description
+  );
+};
+
+function getRoute(appName: string, pages: string[]) {
+  const routingConfig = AppsRouting[appName as keyof typeof AppsRouting] as Record<string, AppPageType>;
+
+  if (!routingConfig) {
+    notFound();
+  }
+
+  const mainPage = pages[0];
+  const appPage = routingConfig.layoutHandler || (routingConfig[mainPage] as AppPageType);
+
+  const getServerSidePropsHandler = serverSidePropsConfig[mainPage];
+
+  if (!appPage) {
+    notFound();
+  }
+
+  return {
+    notFound: false,
+    Component: appPage.default,
+    ...appPage,
+    getServerSideProps: getServerSidePropsHandler,
+  } as Found;
+}
+
+const getPageProps = async ({ params, query, req }: GetServerSidePropsContext) => {
+  const p = paramsSchema.safeParse(params);
+
+  if (!p.success) {
+    return notFound();
+  }
+
+  const { slug: appName, pages } = p.data;
+
+  const route = getRoute(appName, pages);
+
+  if (route.notFound) {
+    return route;
+  }
+
+  if (route.getServerSideProps) {
+    // TODO: Document somewhere that right now it is just a convention that filename should have appPages in it's name.
+    // appPages is actually hardcoded here and no matter the fileName the same variable would be used.
+    // We can write some validation logic later on that ensures that [...appPages].tsx file exists
+    params!.appPages = pages.slice(1);
+
+    const ctx = { req, params, query };
+
+    const session = await getServerSession({ req });
+    const user = session?.user;
+    const app = await getAppWithMetadata({ slug: appName });
+
+    if (!app) {
+      notFound();
+    }
+
+    const result = await route.getServerSideProps(
+      {
+        ...ctx,
+        params: {
+          ...ctx.params,
+          appPages: pages.slice(1),
+        },
+      } as GetServerSidePropsContext<{
+        slug: string;
+        pages: string[];
+        appPages: string[];
+      }>,
+      prisma,
+      user,
+      ssrInit
+    );
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    //@ts-ignore
+
+    if (result.notFound) {
+      notFound();
+    }
+
+    if (result.redirect) {
+      redirect(result.redirect.destination);
+    }
+
+    return {
+      appName,
+      appUrl: app.simplePath || `/apps/${appName}`,
+      ...result.props,
+    };
+  } else {
+    return {
+      appName,
+    };
+  }
+};
+
+export default async function Page({ params, searchParams }: PageProps) {
+  const h = headers();
+  const nonce = h.get("x-nonce") ?? undefined;
+
+  const legacyContext = buildLegacyCtx(
+    h,
+    cookies(),
+    params,
+    searchParams
+  ) as unknown as GetServerSidePropsContext;
+  const props = await getPageProps(legacyContext);
+  return (
+    <PageWrapper getLayout={getLayout} requiresLicense={false} nonce={nonce} themeBasis={null} {...props}>
+      <LegacyPage {...props} />
+    </PageWrapper>
+  );
+}

apps/web/app/future/apps/[slug]/layout.tsx

@@ -1,3 +0,0 @@
-import { WithLayout } from "app/layoutHOC";
-
-export default WithLayout({ getLayout: null })<"L">;

apps/web/app/future/apps/[slug]/page.tsx

@@ -1,40 +1,33 @@
-import AppPage from "@pages/apps/[slug]/index";
+import Page from "@pages/apps/[slug]/index";
 import { Prisma } from "@prisma/client";
+import { withAppDirSsg } from "app/WithAppDirSsg";
 import { _generateMetadata } from "app/_utils";
-import fs from "fs";
-import matter from "gray-matter";
-import { notFound } from "next/navigation";
-import path from "path";
-import { z } from "zod";
+import { WithLayout } from "app/layoutHOC";
+import type { InferGetStaticPropsType } from "next";
+import { cookies, headers } from "next/headers";
 
-import { getAppWithMetadata } from "@calcom/app-store/_appRegistry";
-import { getAppAssetFullPath } from "@calcom/app-store/getAppAssetFullPath";
-import { APP_NAME, IS_PRODUCTION } from "@calcom/lib/constants";
+import { APP_NAME } from "@calcom/lib/constants";
 import prisma from "@calcom/prisma";
 
-const sourceSchema = z.object({
-  content: z.string(),
-  data: z.object({
-    description: z.string().optional(),
-    items: z
-      .array(
-        z.union([
-          z.string(),
-          z.object({
-            iframe: z.object({ src: z.string() }),
-          }),
-        ])
-      )
-      .optional(),
-  }),
-});
+import { getStaticProps } from "@lib/apps/[slug]/getStaticProps";
+import { buildLegacyCtx } from "@lib/buildLegacyCtx";
 
-export const generateMetadata = async ({ params }: { params: Record<string, string | string[]> }) => {
-  const { data } = await getPageProps({ params });
+type Y = InferGetStaticPropsType<typeof getStaticProps>;
+const getData = withAppDirSsg<Y>(getStaticProps);
+
+export const generateMetadata = async ({
+  params,
+  searchParams,
+}: {
+  params: Record<string, string | string[]>;
+  searchParams: { [key: string]: string | string[] | undefined };
+}) => {
+  const legacyContext = buildLegacyCtx(headers(), cookies(), params, searchParams);
+  const res = await getData(legacyContext);
 
   return await _generateMetadata(
-    () => `${data.name} | ${APP_NAME}`,
-    () => data.description
+    () => `${res?.data.name} | ${APP_NAME}`,
+    () => res?.data.description ?? ""
   );
 };
 
@@ -53,74 +46,6 @@ export const generateStaticParams = async () => {
   return [];
 };
 
-const getPageProps = async ({ params }: { params: Record<string, string | string[]> }) => {
-  if (typeof params?.slug !== "string") {
-    notFound();
-  }
-
-  const appMeta = await getAppWithMetadata({
-    slug: params?.slug,
-  });
-
-  const appFromDb = await prisma.app.findUnique({
-    where: { slug: params.slug.toLowerCase() },
-  });
-
-  const isAppAvailableInFileSystem = appMeta;
-  const isAppDisabled = isAppAvailableInFileSystem && (!appFromDb || !appFromDb.enabled);
-
-  if (!IS_PRODUCTION && isAppDisabled) {
-    return {
-      isAppDisabled: true as const,
-      data: {
-        ...appMeta,
-      },
-    };
-  }
-
-  if (!appFromDb || !appMeta || isAppDisabled) {
-    notFound();
-  }
-
-  const isTemplate = appMeta.isTemplate;
-  const appDirname = path.join(isTemplate ? "templates" : "", appFromDb.dirName);
-  const README_PATH = path.join(process.cwd(), "..", "..", `packages/app-store/${appDirname}/DESCRIPTION.md`);
-  const postFilePath = path.join(README_PATH);
-  let source = "";
-
-  try {
-    source = fs.readFileSync(postFilePath).toString();
-    source = source.replace(/{DESCRIPTION}/g, appMeta.description);
-  } catch (error) {
-    /* If the app doesn't have a README we fallback to the package description */
-    console.log(`No DESCRIPTION.md provided for: ${appDirname}`);
-    source = appMeta.description;
-  }
-
-  const result = matter(source);
-  const { content, data } = sourceSchema.parse({ content: result.content, data: result.data });
-  if (data.items) {
-    data.items = data.items.map((item) => {
-      if (typeof item === "string") {
-        return getAppAssetFullPath(item, {
-          dirName: appMeta.dirName,
-          isTemplate: appMeta.isTemplate,
-        });
-      }
-      return item;
-    });
-  }
-  return {
-    isAppDisabled: false as const,
-    source: { content, data },
-    data: appMeta,
-  };
-};
-
-export default async function Page({ params }: { params: Record<string, string | string[]> }) {
-  const pageProps = await getPageProps({ params });
-
-  return <AppPage {...pageProps} />;
-}
+export default WithLayout({ getLayout: null, Page, getData });
 
 export const dynamic = "force-static";

apps/web/app/future/apps/[slug]/setup/page.tsx

@@ -1,8 +1,8 @@
-import SetupPage from "@pages/apps/[slug]/setup";
+import Page from "@pages/apps/[slug]/setup";
+import { withAppDirSsr } from "app/WithAppDirSsr";
 import { _generateMetadata } from "app/_utils";
-import type { GetServerSidePropsContext } from "next";
-import { cookies, headers } from "next/headers";
-import { notFound, redirect } from "next/navigation";
+import { WithLayout } from "app/layoutHOC";
+import type { InferGetServerSidePropsType } from "next";
 
 import { getServerSideProps } from "@calcom/app-store/_pages/setup/_getServerSideProps";
 import { APP_NAME } from "@calcom/lib/constants";
@@ -14,23 +14,8 @@ export const generateMetadata = async ({ params }: { params: Record<string, stri
   );
 };
 
-const getPageProps = async ({ params }: { params: Record<string, string | string[]> }) => {
-  const req = { headers: headers(), cookies: cookies() };
+type T = InferGetServerSidePropsType<typeof getServerSideProps>;
 
-  const result = await getServerSideProps({ params, req } as unknown as GetServerSidePropsContext);
+const getData = withAppDirSsr<T>(getServerSideProps);
 
-  if (!result || "notFound" in result) {
-    notFound();
-  }
-
-  if ("redirect" in result) {
-    redirect(result.redirect.destination);
-  }
-
-  return result.props;
-};
-
-export default async function Page({ params }: { params: Record<string, string | string[]> }) {
-  const pageProps = await getPageProps({ params });
-  return <SetupPage {...pageProps} />;
-}
+export default WithLayout({ getLayout: null, Page, getData });

apps/web/app/future/apps/categories/[category]/page.tsx

@@ -1,15 +1,15 @@
-import CategoryPage from "@pages/apps/categories/[category]";
+import CategoryPage, { type PageProps } from "@pages/apps/categories/[category]";
 import { Prisma } from "@prisma/client";
+import { withAppDirSsg } from "app/WithAppDirSsg";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
-import { notFound } from "next/navigation";
-import z from "zod";
 
-import { getAppRegistry } from "@calcom/app-store/_appRegistry";
 import { APP_NAME } from "@calcom/lib/constants";
 import prisma from "@calcom/prisma";
 import { AppCategories } from "@calcom/prisma/enums";
 
+import { getStaticProps } from "@lib/apps/categories/[category]/getStaticProps";
+
 export const generateMetadata = async () => {
   return await _generateMetadata(
     () => `${APP_NAME} | ${APP_NAME}`,
@@ -34,38 +34,7 @@ export const generateStaticParams = async () => {
   return paths.map((category) => ({ category }));
 };
 
-const querySchema = z.object({
-  category: z.nativeEnum(AppCategories),
-});
+const getData = withAppDirSsg<PageProps>(getStaticProps);
 
-const getPageProps = async ({ params }: { params: Record<string, string | string[]> }) => {
-  const p = querySchema.safeParse(params);
-
-  if (!p.success) {
-    return notFound();
-  }
-
-  const appQuery = await prisma.app.findMany({
-    where: {
-      categories: {
-        has: p.data.category,
-      },
-    },
-    select: {
-      slug: true,
-    },
-  });
-
-  const dbAppsSlugs = appQuery.map((category) => category.slug);
-
-  const appStore = await getAppRegistry();
-
-  const apps = appStore.filter((app) => dbAppsSlugs.includes(app.slug));
-  return {
-    apps,
-  };
-};
-
-// @ts-expect-error getData arg
-export default WithLayout({ getData: getPageProps, Page: CategoryPage })<"P">;
+export default WithLayout({ getData, Page: CategoryPage, getLayout: null })<"P">;
 export const dynamic = "force-static";

apps/web/app/future/apps/categories/page.tsx

@@ -1,13 +1,11 @@
-import LegacyPage from "@pages/apps/categories/index";
+import Page from "@pages/apps/categories/index";
+import { withAppDirSsr } from "app/WithAppDirSsr";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
-import type { GetServerSidePropsContext } from "next";
 
-import { getAppRegistry, getAppRegistryWithCredentials } from "@calcom/app-store/_appRegistry";
-import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import { APP_NAME } from "@calcom/lib/constants";
 
-import { ssrInit } from "@server/lib/ssr";
+import { getServerSideProps } from "@lib/apps/categories/getServerSideProps";
 
 export const generateMetadata = async () => {
   return await _generateMetadata(
@@ -16,29 +14,4 @@ export const generateMetadata = async () => {
   );
 };
 
-const getData = async (ctx: GetServerSidePropsContext) => {
-  const ssr = await ssrInit(ctx);
-
-  const session = await getServerSession({ req: ctx.req });
-
-  let appStore;
-  if (session?.user?.id) {
-    appStore = await getAppRegistryWithCredentials(session.user.id);
-  } else {
-    appStore = await getAppRegistry();
-  }
-
-  const categories = appStore.reduce((c, app) => {
-    for (const category of app.categories) {
-      c[category] = c[category] ? c[category] + 1 : 1;
-    }
-    return c;
-  }, {} as Record<string, number>);
-
-  return {
-    categories: Object.entries(categories).map(([name, count]) => ({ name, count })),
-    dehydratedState: ssr.dehydrate(),
-  };
-};
-
-export default WithLayout({ getData, Page: LegacyPage, getLayout: null })<"P">;
+export default WithLayout({ getData: withAppDirSsr(getServerSideProps), Page, getLayout: null })<"P">;

apps/web/app/future/apps/installed/[category]/layout.tsx

@@ -1,3 +0,0 @@
-import { WithLayout } from "app/layoutHOC";
-
-export default WithLayout({ getLayout: null })<"L">;

apps/web/app/future/apps/installed/[category]/page.tsx

@@ -1,14 +1,11 @@
-import LegacyPage from "@pages/apps/installed/[category]";
+import Page from "@pages/apps/installed/[category]";
+import { withAppDirSsr } from "app/WithAppDirSsr";
 import { _generateMetadata } from "app/_utils";
-import { notFound } from "next/navigation";
-import { z } from "zod";
+import { WithLayout } from "app/layoutHOC";
 
 import { APP_NAME } from "@calcom/lib/constants";
-import { AppCategories } from "@calcom/prisma/enums";
 
-const querySchema = z.object({
-  category: z.nativeEnum(AppCategories),
-});
+import { getServerSideProps } from "@lib/apps/installed/[category]/getServerSideProps";
 
 export const generateMetadata = async () => {
   return await _generateMetadata(
@@ -17,20 +14,6 @@ export const generateMetadata = async () => {
   );
 };
 
-const getPageProps = async ({ params }: { params: Record<string, string | string[]> }) => {
-  const p = querySchema.safeParse(params);
+const getData = withAppDirSsr(getServerSideProps);
 
-  if (!p.success) {
-    return notFound();
-  }
-
-  return {
-    category: p.data.category,
-  };
-};
-
-export default async function Page({ params }: { params: Record<string, string | string[]> }) {
-  await getPageProps({ params });
-
-  return <LegacyPage />;
-}
+export default WithLayout({ getLayout: null, getData, Page });

apps/web/app/future/apps/page.tsx

@@ -1,17 +1,12 @@
 import AppsPage from "@pages/apps";
+import { withAppDirSsr } from "app/WithAppDirSsr";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
-import type { GetServerSidePropsContext } from "next";
 
-import { getAppRegistry, getAppRegistryWithCredentials } from "@calcom/app-store/_appRegistry";
 import { getLayout } from "@calcom/features/MainLayoutAppDir";
-import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
-import type { UserAdminTeams } from "@calcom/features/ee/teams/lib/getUserAdminTeams";
-import getUserAdminTeams from "@calcom/features/ee/teams/lib/getUserAdminTeams";
 import { APP_NAME } from "@calcom/lib/constants";
-import type { AppCategories } from "@calcom/prisma/enums";
 
-import { ssrInit } from "@server/lib/ssr";
+import { getServerSideProps } from "@lib/apps/getServerSideProps";
 
 export const generateMetadata = async () => {
   return await _generateMetadata(
@@ -20,44 +15,4 @@ export const generateMetadata = async () => {
   );
 };
 
-const getData = async (ctx: GetServerSidePropsContext) => {
-  const ssr = await ssrInit(ctx);
-
-  const session = await getServerSession({ req: ctx.req });
-
-  let appStore, userAdminTeams: UserAdminTeams;
-  if (session?.user?.id) {
-    userAdminTeams = await getUserAdminTeams({ userId: session.user.id, getUserInfo: true });
-    appStore = await getAppRegistryWithCredentials(session.user.id, userAdminTeams);
-  } else {
-    appStore = await getAppRegistry();
-    userAdminTeams = [];
-  }
-
-  const categoryQuery = appStore.map(({ categories }) => ({
-    categories: categories || [],
-  }));
-
-  const categories = categoryQuery.reduce((c, app) => {
-    for (const category of app.categories) {
-      c[category] = c[category] ? c[category] + 1 : 1;
-    }
-    return c;
-  }, {} as Record<string, number>);
-
-  return {
-    categories: Object.entries(categories)
-      .map(([name, count]): { name: AppCategories; count: number } => ({
-        name: name as AppCategories,
-        count,
-      }))
-      .sort(function (a, b) {
-        return b.count - a.count;
-      }),
-    appStore,
-    userAdminTeams,
-    dehydratedState: ssr.dehydrate(),
-  };
-};
-
-export default WithLayout({ getLayout, getData, Page: AppsPage });
+export default WithLayout({ getLayout, getData: withAppDirSsr(getServerSideProps), Page: AppsPage });

apps/web/app/future/auth/forgot-password/[id]/page.tsx

@@ -0,0 +1,19 @@
+import SetNewUserPassword from "@pages/auth/forgot-password/[id]";
+import { withAppDirSsr } from "app/WithAppDirSsr";
+import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
+
+import { getServerSideProps } from "@server/lib/forgot-password/[id]/getServerSideProps";
+
+export const generateMetadata = async () => {
+  return await _generateMetadata(
+    (t) => t("reset_password"),
+    (t) => t("change_your_password")
+  );
+};
+
+export default WithLayout({
+  getLayout: null,
+  Page: SetNewUserPassword,
+  getData: withAppDirSsr(getServerSideProps),
+})<"P">;

apps/web/app/future/auth/forgot-password/page.tsx

@@ -0,0 +1,19 @@
+import ForgotPassword from "@pages/auth/forgot-password";
+import { withAppDirSsr } from "app/WithAppDirSsr";
+import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
+
+import { getServerSideProps } from "@server/lib/forgot-password/getServerSideProps";
+
+export const generateMetadata = async () => {
+  return await _generateMetadata(
+    (t) => t("reset_password"),
+    (t) => t("change_your_password")
+  );
+};
+
+export default WithLayout({
+  getLayout: null,
+  Page: ForgotPassword,
+  getData: withAppDirSsr(getServerSideProps),
+})<"P">;

apps/web/app/future/auth/login/page.tsx

@@ -0,0 +1,22 @@
+import Login from "@pages/auth/login";
+import { withAppDirSsr } from "app/WithAppDirSsr";
+import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
+import type { InferGetServerSidePropsType } from "next";
+
+import { APP_NAME } from "@calcom/lib/constants";
+
+import { getServerSideProps } from "@server/lib/auth/login/getServerSideProps";
+
+export const generateMetadata = async () => {
+  return await _generateMetadata(
+    (t) => `${t("login")} | ${APP_NAME}`,
+    (t) => t("login")
+  );
+};
+
+export default WithLayout({
+  getLayout: null,
+  Page: Login,
+  getData: withAppDirSsr<InferGetServerSidePropsType<typeof getServerSideProps>>(getServerSideProps),
+})<"P">;

apps/web/app/future/auth/logout/page.tsx

@@ -0,0 +1,7 @@
+import Logout from "@pages/auth/logout";
+import { withAppDirSsr } from "app/WithAppDirSsr";
+import { WithLayout } from "app/layoutHOC";
+
+import { getServerSideProps } from "@server/lib/auth/logout/getServerSideProps";
+
+export default WithLayout({ getLayout: null, Page: Logout, getData: withAppDirSsr(getServerSideProps) })<"P">;

apps/web/app/future/auth/setup/page.tsx

@@ -0,0 +1,12 @@
+import Setup from "@pages/auth/setup";
+import { withAppDirSsr } from "app/WithAppDirSsr";
+import { WithLayout } from "app/layoutHOC";
+import type { InferGetServerSidePropsType } from "next";
+
+import { getServerSideProps } from "@server/lib/setup/getServerSideProps";
+
+export default WithLayout({
+  getLayout: null,
+  Page: Setup,
+  getData: withAppDirSsr<InferGetServerSidePropsType<typeof getServerSideProps>>(getServerSideProps),
+})<"P">;

apps/web/app/future/auth/signin/page.tsx

@@ -0,0 +1,13 @@
+import signin from "@pages/auth/signin";
+import { withAppDirSsr } from "app/WithAppDirSsr";
+import { WithLayout } from "app/layoutHOC";
+import type { InferGetServerSidePropsType } from "next";
+
+import { getServerSideProps } from "@server/lib/auth/signin/getServerSideProps";
+
+export default WithLayout({
+  getLayout: null,
+  Page: signin,
+  // @ts-expect-error TODO: fix this
+  getData: withAppDirSsr<InferGetServerSidePropsType<typeof getServerSideProps>>(getServerSideProps),
+})<"P">;

apps/web/app/future/auth/sso/[provider]/page.tsx

@@ -0,0 +1,12 @@
+import Provider from "@pages/auth/sso/[provider]";
+import { withAppDirSsr } from "app/WithAppDirSsr";
+import { WithLayout } from "app/layoutHOC";
+import type { InferGetServerSidePropsType } from "next";
+
+import { getServerSideProps } from "@server/lib/auth/sso/[provider]/getServerSideProps";
+
+export default WithLayout({
+  getLayout: null,
+  Page: Provider,
+  getData: withAppDirSsr<InferGetServerSidePropsType<typeof getServerSideProps>>(getServerSideProps),
+})<"P">;

apps/web/app/future/auth/sso/direct/page.tsx

@@ -0,0 +1,11 @@
+import DirectSSOLogin from "@pages/auth/sso/direct";
+import { withAppDirSsr } from "app/WithAppDirSsr";
+import { WithLayout } from "app/layoutHOC";
+
+import { getServerSideProps } from "@server/lib/auth/sso/direct/getServerSideProps";
+
+export default WithLayout({
+  getLayout: null,
+  Page: DirectSSOLogin,
+  getData: withAppDirSsr(getServerSideProps),
+})<"P">;

apps/web/app/future/auth/verify-email/page.tsx

@@ -0,0 +1,15 @@
+import VerifyEmailPage from "@pages/auth/verify-email";
+import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
+
+export const generateMetadata = async () => {
+  return await _generateMetadata(
+    (t) => t("check_your_email"),
+    (t) => t("check_your_email")
+  );
+};
+
+export default WithLayout({
+  getLayout: null,
+  Page: VerifyEmailPage,
+})<"P">;

apps/web/app/future/auth/verify/page.tsx

@@ -0,0 +1,11 @@
+import VerifyPage from "@pages/auth/verify";
+import { withAppDirSsr } from "app/WithAppDirSsr";
+import { WithLayout } from "app/layoutHOC";
+
+import { getServerSideProps } from "@server/lib/auth/verify/getServerSideProps";
+
+export default WithLayout({
+  getLayout: null,
+  Page: VerifyPage,
+  getData: withAppDirSsr(getServerSideProps),
+})<"P">;

apps/web/app/future/booking/[uid]/embed/page.tsx

@@ -1,10 +1,12 @@
-import OldPage from "@pages/booking/[uid]";
+import { withAppDirSsr } from "app/WithAppDirSsr";
 import withEmbedSsrAppDir from "app/WithEmbedSSR";
 import { WithLayout } from "app/layoutHOC";
 
-import { getData } from "../page";
+import OldPage from "~/bookings/views/bookings-single-view";
+import { getServerSideProps, type PageProps } from "~/bookings/views/bookings-single-view.getServerSideProps";
+
+const getData = withAppDirSsr<PageProps>(getServerSideProps);
 
 const getEmbedData = withEmbedSsrAppDir(getData);
 
-// @ts-expect-error Type '(context: GetServerSidePropsContext) => Promise<any>' is not assignable to type '(arg: {
 export default WithLayout({ getLayout: null, getData: getEmbedData, Page: OldPage });

apps/web/app/future/booking/[uid]/page.tsx

@@ -1,204 +1,37 @@
-import OldPage from "@pages/booking/[uid]";
+import { withAppDirSsr } from "app/WithAppDirSsr";
+import type { Params, SearchParams } from "app/_types";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
-import type { GetServerSidePropsContext } from "next";
-import { notFound } from "next/navigation";
-import { z } from "zod";
+import { type GetServerSidePropsContext } from "next";
+import { cookies, headers } from "next/headers";
 
-import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
-import { getBookingWithResponses } from "@calcom/features/bookings/lib/get-booking";
-import { parseRecurringEvent } from "@calcom/lib";
-import { getDefaultEvent } from "@calcom/lib/defaultEvents";
-import { maybeGetBookingUidFromSeat } from "@calcom/lib/server/maybeGetBookingUidFromSeat";
-import prisma from "@calcom/prisma";
-import { customInputSchema, EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
+import { BookingStatus } from "@calcom/prisma/enums";
 
-import { getRecurringBookings, handleSeatsEventTypeOnBooking, getEventTypesFromDB } from "@lib/booking";
+import { buildLegacyCtx } from "@lib/buildLegacyCtx";
 
-import { ssrInit } from "@server/lib/ssr";
+import OldPage from "~/bookings/views/bookings-single-view";
+import { getServerSideProps, type PageProps } from "~/bookings/views/bookings-single-view.getServerSideProps";
 
-const stringToBoolean = z
-  .string()
-  .optional()
-  .transform((val) => val === "true");
-
-const querySchema = z.object({
-  uid: z.string(),
-  email: z.string().optional(),
-  eventTypeSlug: z.string().optional(),
-  cancel: stringToBoolean,
-  allRemainingBookings: stringToBoolean,
-  changes: stringToBoolean,
-  reschedule: stringToBoolean,
-  isSuccessBookingPage: stringToBoolean,
-  formerTime: z.string().optional(),
-  seatReferenceUid: z.string().optional(),
-});
-
-export const generateMetadata = async () =>
-  await _generateMetadata(
-    () => "",
-    () => ""
+export const generateMetadata = async ({
+  params,
+  searchParams,
+}: {
+  params: Params;
+  searchParams: SearchParams;
+}) => {
+  const { bookingInfo, eventType, recurringBookings } = await getData(
+    buildLegacyCtx(headers(), cookies(), params, searchParams) as unknown as GetServerSidePropsContext
   );
+  const needsConfirmation = bookingInfo.status === BookingStatus.PENDING && eventType.requiresConfirmation;
 
-export const getData = async (context: GetServerSidePropsContext) => {
-  const ssr = await ssrInit(context);
-  const session = await getServerSession(context);
-  let tz: string | null = null;
-  let userTimeFormat: number | null = null;
-  let requiresLoginToUpdate = false;
-  if (session) {
-    const user = await ssr.viewer.me.fetch();
-    tz = user.timeZone;
-    userTimeFormat = user.timeFormat;
-  }
-
-  const parsedQuery = querySchema.safeParse(context.query);
-
-  if (!parsedQuery.success) {
-    notFound();
-  }
-
-  const { uid, eventTypeSlug, seatReferenceUid } = parsedQuery.data;
-
-  const { uid: maybeUid } = await maybeGetBookingUidFromSeat(prisma, uid);
-  const bookingInfoRaw = await prisma.booking.findFirst({
-    where: {
-      uid: maybeUid,
-    },
-    select: {
-      title: true,
-      id: true,
-      uid: true,
-      description: true,
-      customInputs: true,
-      smsReminderNumber: true,
-      recurringEventId: true,
-      startTime: true,
-      endTime: true,
-      location: true,
-      status: true,
-      metadata: true,
-      cancellationReason: true,
-      responses: true,
-      rejectionReason: true,
-      user: {
-        select: {
-          id: true,
-          name: true,
-          email: true,
-          username: true,
-          timeZone: true,
-        },
-      },
-      attendees: {
-        select: {
-          name: true,
-          email: true,
-          timeZone: true,
-        },
-      },
-      eventTypeId: true,
-      eventType: {
-        select: {
-          eventName: true,
-          slug: true,
-          timeZone: true,
-        },
-      },
-      seatsReferences: {
-        select: {
-          referenceUid: true,
-        },
-      },
-    },
-  });
-
-  if (!bookingInfoRaw) {
-    notFound();
-  }
-
-  const eventTypeRaw = !bookingInfoRaw.eventTypeId
-    ? getDefaultEvent(eventTypeSlug || "")
-    : await getEventTypesFromDB(bookingInfoRaw.eventTypeId);
-  if (!eventTypeRaw) {
-    notFound();
-  }
-
-  if (eventTypeRaw.seatsPerTimeSlot && !seatReferenceUid && !session) {
-    requiresLoginToUpdate = true;
-  }
-
-  const bookingInfo = getBookingWithResponses(bookingInfoRaw);
-  // @NOTE: had to do this because Server side cant return [Object objects]
-  // probably fixable with json.stringify -> json.parse
-  bookingInfo["startTime"] = (bookingInfo?.startTime as Date)?.toISOString() as unknown as Date;
-  bookingInfo["endTime"] = (bookingInfo?.endTime as Date)?.toISOString() as unknown as Date;
-
-  eventTypeRaw.users = !!eventTypeRaw.hosts?.length
-    ? eventTypeRaw.hosts.map((host) => host.user)
-    : eventTypeRaw.users;
-
-  if (!eventTypeRaw.users.length) {
-    if (!eventTypeRaw.owner) {
-      notFound();
-    }
-
-    eventTypeRaw.users.push({
-      ...eventTypeRaw.owner,
-    });
-  }
-
-  const eventType = {
-    ...eventTypeRaw,
-    periodStartDate: eventTypeRaw.periodStartDate?.toString() ?? null,
-    periodEndDate: eventTypeRaw.periodEndDate?.toString() ?? null,
-    metadata: EventTypeMetaDataSchema.parse(eventTypeRaw.metadata),
-    recurringEvent: parseRecurringEvent(eventTypeRaw.recurringEvent),
-    customInputs: customInputSchema.array().parse(eventTypeRaw.customInputs),
-  };
-
-  const profile = {
-    name: eventType.team?.name || eventType.users[0]?.name || null,
-    email: eventType.team ? null : eventType.users[0].email || null,
-    theme: (!eventType.team?.name && eventType.users[0]?.theme) || null,
-    brandColor: eventType.team ? null : eventType.users[0].brandColor || null,
-    darkBrandColor: eventType.team ? null : eventType.users[0].darkBrandColor || null,
-    slug: eventType.team?.slug || eventType.users[0]?.username || null,
-  };
-
-  if (bookingInfo !== null && eventType.seatsPerTimeSlot) {
-    await handleSeatsEventTypeOnBooking(eventType, bookingInfo, seatReferenceUid, session?.user.id);
-  }
-
-  const payment = await prisma.payment.findFirst({
-    where: {
-      bookingId: bookingInfo.id,
-    },
-    select: {
-      success: true,
-      refunded: true,
-      currency: true,
-      amount: true,
-      paymentOption: true,
-    },
-  });
-
-  return {
-    themeBasis: eventType.team ? eventType.team.slug : eventType.users[0]?.username,
-    hideBranding: eventType.team ? eventType.team.hideBranding : eventType.users[0].hideBranding,
-    profile,
-    eventType,
-    recurringBookings: await getRecurringBookings(bookingInfo.recurringEventId),
-    dehydratedState: ssr.dehydrate(),
-    dynamicEventName: bookingInfo?.eventType?.eventName || "",
-    bookingInfo,
-    paymentStatus: payment,
-    ...(tz && { tz }),
-    userTimeFormat,
-    requiresLoginToUpdate,
-  };
+  return await _generateMetadata(
+    (t) =>
+      t(`booking_${needsConfirmation ? "submitted" : "confirmed"}${recurringBookings ? "_recurring" : ""}`),
+    (t) =>
+      t(`booking_${needsConfirmation ? "submitted" : "confirmed"}${recurringBookings ? "_recurring" : ""}`)
+  );
 };
 
-// @ts-expect-error Argument of type '{ req: { headers: ReadonlyHeaders; cookies: ReadonlyRequestCookies; }; }' is not assignable to parameter of type 'GetServerSidePropsContext'.
+const getData = withAppDirSsr<PageProps>(getServerSideProps);
+
 export default WithLayout({ getLayout: null, getData, Page: OldPage });

apps/web/app/future/bookings/[status]/layout.tsx

@@ -1,45 +0,0 @@
-import { _generateMetadata } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";
-import type { GetServerSidePropsContext } from "next";
-import { notFound } from "next/navigation";
-import { z } from "zod";
-
-import { getLayout } from "@calcom/features/MainLayoutAppDir";
-import { APP_NAME } from "@calcom/lib/constants";
-
-import { ssgInit } from "@server/lib/ssg";
-
-const validStatuses = ["upcoming", "recurring", "past", "cancelled", "unconfirmed"] as const;
-
-const querySchema = z.object({
-  status: z.enum(validStatuses),
-});
-
-export const generateMetadata = async () =>
-  await _generateMetadata(
-    (t) => `${APP_NAME} | ${t("bookings")}`,
-    () => ""
-  );
-
-export const generateStaticParams = async () => {
-  return validStatuses.map((status) => ({ status }));
-};
-
-const getData = async (ctx: GetServerSidePropsContext) => {
-  const parsedParams = querySchema.safeParse(ctx.params);
-
-  if (!parsedParams.success) {
-    notFound();
-  }
-
-  const ssg = await ssgInit(ctx);
-
-  return {
-    status: parsedParams.data.status,
-    dehydratedState: ssg.dehydrate(),
-  };
-};
-
-export default WithLayout({ getLayout, getData })<"L">;
-
-export const dynamic = "force-static";

apps/web/app/future/bookings/[status]/page.tsx

@@ -1 +1,28 @@
-export { default } from "@pages/bookings/[status]";
+import { withAppDirSsg } from "app/WithAppDirSsg";
+import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
+import type { InferGetStaticPropsType } from "next";
+
+import { getLayout } from "@calcom/features/MainLayoutAppDir";
+import { APP_NAME } from "@calcom/lib/constants";
+
+import { validStatuses } from "~/bookings/lib/validStatuses";
+import Page from "~/bookings/views/bookings-listing-view";
+import { getStaticProps } from "~/bookings/views/bookings-listing-view.getStaticProps";
+
+type Y = InferGetStaticPropsType<typeof getStaticProps>;
+const getData = withAppDirSsg<Y>(getStaticProps);
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => `${APP_NAME} | ${t("bookings")}`,
+    () => ""
+  );
+
+export const generateStaticParams = async () => {
+  return validStatuses.map((status) => ({ status }));
+};
+
+export default WithLayout({ getLayout, getData, Page })<"P">;
+
+export const dynamic = "force-static";

apps/web/app/future/d/[link]/[slug]/page.tsx

@@ -1,27 +1,21 @@
-import LegacyPage, { type PageProps } from "@pages/d/[link]/[slug]";
-import { withAppDir } from "app/AppDirSSRHOC";
+import LegacyPage from "@pages/d/[link]/[slug]";
+import { withAppDirSsr } from "app/WithAppDirSsr";
+import type { Params, SearchParams } from "app/_types";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
-import type { GetServerSidePropsContext } from "next";
 import { cookies, headers } from "next/headers";
-import { notFound } from "next/navigation";
-import { z } from "zod";
-
-import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
-import { getBookingForReschedule, getMultipleDurationValue } from "@calcom/features/bookings/lib/get-booking";
-import type { GetBookingType } from "@calcom/features/bookings/lib/get-booking";
-import { orgDomainConfig } from "@calcom/features/ee/organizations/lib/orgDomains";
-import slugify from "@calcom/lib/slugify";
-import prisma from "@calcom/prisma";
 
 import { buildLegacyCtx } from "@lib/buildLegacyCtx";
+import { getServerSideProps } from "@lib/d/[link]/[slug]/getServerSideProps";
 
-import { ssrInit } from "@server/lib/ssr";
-
-export const generateMetadata = async ({ params }: { params: Record<string, string | string[]> }) => {
-  const pageProps = await getPageProps(
-    buildLegacyCtx(headers(), cookies(), params) as unknown as GetServerSidePropsContext
-  );
+export const generateMetadata = async ({
+  params,
+  searchParams,
+}: {
+  params: Params;
+  searchParams: SearchParams;
+}) => {
+  const pageProps = await getData(buildLegacyCtx(headers(), cookies(), params, searchParams));
 
   const { entity, booking, user, slug, isTeamEvent } = pageProps;
   const rescheduleUid = booking?.uid;
@@ -38,95 +32,5 @@ export const generateMetadata = async ({ params }: { params: Record<string, stri
   );
 };
 
-async function getPageProps(context: GetServerSidePropsContext) {
-  const session = await getServerSession({ req: context.req });
-  const { link, slug } = paramsSchema.parse(context.params);
-  const { rescheduleUid, duration: queryDuration } = context.query;
-  const { currentOrgDomain, isValidOrgDomain } = orgDomainConfig(context.req);
-  const org = isValidOrgDomain ? currentOrgDomain : null;
-
-  const hashedLink = await prisma.hashedLink.findUnique({
-    where: {
-      link,
-    },
-    select: {
-      eventTypeId: true,
-      eventType: {
-        select: {
-          users: {
-            select: {
-              username: true,
-            },
-          },
-          team: {
-            select: {
-              id: true,
-            },
-          },
-        },
-      },
-    },
-  });
-
-  const username = hashedLink?.eventType.users[0]?.username;
-
-  if (!hashedLink || !username) {
-    return notFound();
-  }
-
-  const user = await prisma.user.findFirst({
-    where: {
-      username,
-      organization: isValidOrgDomain
-        ? {
-            slug: currentOrgDomain,
-          }
-        : null,
-    },
-    select: {
-      away: true,
-      hideBranding: true,
-    },
-  });
-
-  if (!user) {
-    return notFound();
-  }
-
-  let booking: GetBookingType | null = null;
-  if (rescheduleUid) {
-    booking = await getBookingForReschedule(`${rescheduleUid}`, session?.user?.id);
-  }
-
-  const isTeamEvent = !!hashedLink.eventType?.team?.id;
-  const ssr = await ssrInit(context);
-
-  // We use this to both prefetch the query on the server,
-  // as well as to check if the event exist, so we c an show a 404 otherwise.
-  const eventData = await ssr.viewer.public.event.fetch({ username, eventSlug: slug, isTeamEvent, org });
-
-  if (!eventData) {
-    return notFound();
-  }
-
-  return {
-    entity: eventData.entity,
-    duration: getMultipleDurationValue(eventData.metadata?.multipleDuration, queryDuration, eventData.length),
-    booking,
-    away: user?.away,
-    user: username,
-    slug,
-    dehydratedState: ssr.dehydrate(),
-    isBrandingHidden: user?.hideBranding,
-    // Sending the team event from the server, because this template file
-    // is reused for both team and user events.
-    isTeamEvent,
-    hashedLink: link,
-  };
-}
-
-const paramsSchema = z.object({ link: z.string(), slug: z.string().transform((s) => slugify(s)) });
-
-// @ts-expect-error arg
-const getData = withAppDir<PageProps>(getPageProps);
+const getData = withAppDirSsr(getServerSideProps);
 export default WithLayout({ getLayout: null, Page: LegacyPage, getData })<"P">;

apps/web/app/future/enterprise/layout.tsx

@@ -1,5 +0,0 @@
-import { WithLayout } from "app/layoutHOC";
-
-import { getLayout } from "@calcom/features/MainLayoutAppDir";
-
-export default WithLayout({ getLayout })<"L">;

apps/web/app/future/enterprise/page.tsx

@@ -1,4 +1,7 @@
 import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
+
+import { getLayout } from "@calcom/features/MainLayoutAppDir";
 
 import EnterprisePage from "@components/EnterprisePage";
 
@@ -8,4 +11,4 @@ export const generateMetadata = async () =>
     (t) => t("create_your_org_description")
   );
 
-export default EnterprisePage;
+export default WithLayout({ getLayout, Page: EnterprisePage })<"P">;

apps/web/app/future/event-types/[type]/page.tsx

@@ -0,0 +1,32 @@
+import { withAppDirSsr } from "app/WithAppDirSsr";
+import type { Params, SearchParams } from "app/_types";
+import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
+import { cookies, headers } from "next/headers";
+
+import { APP_NAME } from "@calcom/lib/constants";
+
+import { buildLegacyCtx } from "@lib/buildLegacyCtx";
+
+import EventTypePageWrapper from "~/event-types/views/event-types-single-view";
+import { getServerSideProps } from "~/event-types/views/event-types-single-view.getServerSideProps";
+
+export const generateMetadata = async ({
+  params,
+  searchParams,
+}: {
+  params: Params;
+  searchParams: SearchParams;
+}) => {
+  const legacyCtx = buildLegacyCtx(headers(), cookies(), params, searchParams);
+  const { eventType } = await getData(legacyCtx);
+
+  return await _generateMetadata(
+    (t) => `${eventType.title} | ${t("event_type")} | ${APP_NAME}`,
+    () => ""
+  );
+};
+
+const getData = withAppDirSsr(getServerSideProps);
+
+export default WithLayout({ getLayout: null, getData, Page: EventTypePageWrapper })<"P">;

apps/web/app/future/event-types/layout.tsx

@@ -1,5 +0,0 @@
-import { WithLayout } from "app/layoutHOC";
-
-import { getLayout } from "@calcom/features/MainLayoutAppDir";
-
-export default WithLayout({ getLayout })<"L">;

apps/web/app/future/event-types/page.tsx

@@ -1,5 +1,9 @@
-import EventTypes from "@pages/event-types";
 import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
+
+import { getLayout } from "@calcom/features/MainLayoutAppDir";
+
+import EventTypes from "~/event-types/views/event-types-listing-view";
 
 export const generateMetadata = async () =>
   await _generateMetadata(
@@ -7,4 +11,4 @@ export const generateMetadata = async () =>
     (t) => t("event_types_page_subtitle")
   );
 
-export default EventTypes;
+export default WithLayout({ getLayout, Page: EventTypes })<"P">;

apps/web/app/future/getting-started/[[...step]]/page.tsx

@@ -1,57 +1,7 @@
-import LegacyPage from "@pages/getting-started/[[...step]]";
+import Page from "@pages/getting-started/[[...step]]";
+import { withAppDirSsr } from "app/WithAppDirSsr";
 import { WithLayout } from "app/layoutHOC";
-import { type GetServerSidePropsContext } from "next";
-import { redirect } from "next/navigation";
 
-import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
-import prisma from "@calcom/prisma";
+import { getServerSideProps } from "@lib/getting-started/[[...step]]/getServerSideProps";
 
-import { ssrInit } from "@server/lib/ssr";
-
-const getData = async (ctx: GetServerSidePropsContext) => {
-  const session = await getServerSession({ req: ctx.req });
-
-  if (!session?.user?.id) {
-    return redirect("/auth/login");
-  }
-  const ssr = await ssrInit(ctx);
-  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: ssr.dehydrate(),
-    hasPendingInvites: user.teams.find((team) => team.accepted === false) ?? false,
-    requiresLicense: false,
-    themeBasis: null,
-  };
-};
-
-export default WithLayout({ getLayout: null, getData, Page: LegacyPage });
+export default WithLayout({ getLayout: null, getData: withAppDirSsr(getServerSideProps), Page });

apps/web/app/future/insights/page.tsx

@@ -1,10 +1,12 @@
 import LegacyPage from "@pages/insights/index";
+import { withAppDirSsr } from "app/WithAppDirSsr";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
-import { notFound } from "next/navigation";
 
 import { getLayout } from "@calcom/features/MainLayoutAppDir";
-import { getFeatureFlagMap } from "@calcom/features/flags/server/utils";
+
+import { getServerSideProps } from "@lib/insights/getServerSideProps";
+import { type inferSSRProps } from "@lib/types/inferSSRProps";
 
 export const generateMetadata = async () =>
   await _generateMetadata(
@@ -12,15 +14,6 @@ export const generateMetadata = async () =>
     (t) => t("insights_subtitle")
   );
 
-async function getData() {
-  const prisma = await import("@calcom/prisma").then((mod) => mod.default);
-  const flags = await getFeatureFlagMap(prisma);
-
-  if (flags.insights === false) {
-    return notFound();
-  }
-
-  return {};
-}
+const getData = withAppDirSsr<inferSSRProps<typeof getServerSideProps>>(getServerSideProps);
 
 export default WithLayout({ getLayout, getData, Page: LegacyPage });

apps/web/app/future/org/[orgSlug]/[user]/[type]/embed/page.tsx

@@ -1,13 +1,12 @@
 import { type PageProps } from "@pages/org/[orgSlug]/[user]/[type]";
 import Page from "@pages/org/[orgSlug]/[user]/[type]/embed";
-import { withAppDir } from "app/AppDirSSRHOC";
+import { withAppDirSsr } from "app/WithAppDirSsr";
 import withEmbedSsrAppDir from "app/WithEmbedSSR";
 import { WithLayout } from "app/layoutHOC";
 
 import { getServerSideProps } from "@lib/org/[orgSlug]/[user]/[type]/getServerSideProps";
 
-const getData = withAppDir<PageProps>(getServerSideProps);
-
+const getData = withAppDirSsr<PageProps>(getServerSideProps);
 const getEmbedData = withEmbedSsrAppDir(getData);
 
 export default WithLayout({ getLayout: null, getData: getEmbedData, isBookingPage: true, Page });

apps/web/app/future/org/[orgSlug]/[user]/[type]/page.tsx

@@ -1,9 +1,9 @@
 import Page, { type PageProps } from "@pages/org/[orgSlug]/[user]/[type]";
-import { withAppDir } from "app/AppDirSSRHOC";
+import { withAppDirSsr } from "app/WithAppDirSsr";
 import { WithLayout } from "app/layoutHOC";
 
 import { getServerSideProps } from "@lib/org/[orgSlug]/[user]/[type]/getServerSideProps";
 
-const getData = withAppDir<PageProps>(getServerSideProps);
+const getData = withAppDirSsr<PageProps>(getServerSideProps);
 
 export default WithLayout({ getLayout: null, getData, isBookingPage: true, Page });

apps/web/app/future/org/[orgSlug]/[user]/embed/page.tsx

@@ -1,10 +1,11 @@
 import { getServerSideProps, type PageProps } from "@pages/org/[orgSlug]/[user]";
 import Page from "@pages/org/[orgSlug]/[user]/embed";
-import { withAppDir } from "app/AppDirSSRHOC";
+import { withAppDirSsr } from "app/WithAppDirSsr";
 import withEmbedSsrAppDir from "app/WithEmbedSSR";
 import { WithLayout } from "app/layoutHOC";
 
-const getData = withAppDir<PageProps>(getServerSideProps);
+const getData = withAppDirSsr<PageProps>(getServerSideProps);
+
 const getEmbedData = withEmbedSsrAppDir(getData);
 
 export default WithLayout({ getLayout: null, getData: getEmbedData, isBookingPage: true, Page });

apps/web/app/future/org/[orgSlug]/[user]/page.tsx

@@ -1,7 +1,7 @@
 import Page, { getServerSideProps, type PageProps } from "@pages/org/[orgSlug]/[user]";
-import { withAppDir } from "app/AppDirSSRHOC";
+import { withAppDirSsr } from "app/WithAppDirSsr";
 import { WithLayout } from "app/layoutHOC";
 
-const getData = withAppDir<PageProps>(getServerSideProps);
+const getData = withAppDirSsr<PageProps>(getServerSideProps);
 
 export default WithLayout({ getLayout: null, getData, isBookingPage: true, Page });

apps/web/app/future/org/[orgSlug]/embed/page.tsx

@@ -0,0 +1,41 @@
+import { type PageProps } from "@pages/team/[slug]";
+import EmbedPage from "@pages/team/[slug]/embed";
+import { withAppDirSsr } from "app/WithAppDirSsr";
+import withEmbedSsrAppDir from "app/WithEmbedSSR";
+import type { Params, SearchParams } from "app/_types";
+import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
+import { type GetServerSidePropsContext } from "next";
+import { cookies, headers } from "next/headers";
+
+import { buildLegacyCtx } from "@lib/buildLegacyCtx";
+import { getServerSideProps } from "@lib/team/[slug]/getServerSideProps";
+
+const getData = withAppDirSsr<PageProps>(getServerSideProps);
+
+export const generateMetadata = async ({
+  params,
+  searchParams,
+}: {
+  params: Params;
+  searchParams: SearchParams;
+}) => {
+  const props = await getData(
+    buildLegacyCtx(headers(), cookies(), params, searchParams) as unknown as GetServerSidePropsContext
+  );
+  const teamName = props.team.name || "Nameless Team";
+
+  return await _generateMetadata(
+    () => teamName,
+    () => teamName
+  );
+};
+
+const getEmbedData = withEmbedSsrAppDir(getData);
+
+export default WithLayout({
+  Page: EmbedPage,
+  getData: getEmbedData,
+  getLayout: null,
+  isBookingPage: true,
+})<"P">;

apps/web/app/future/org/[orgSlug]/page.tsx

@@ -0,0 +1,37 @@
+import TeamPage, { type PageProps } from "@pages/team/[slug]";
+import { withAppDirSsr } from "app/WithAppDirSsr";
+import type { Params, SearchParams } from "app/_types";
+import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
+import { type GetServerSidePropsContext } from "next";
+import { cookies, headers } from "next/headers";
+
+import { buildLegacyCtx } from "@lib/buildLegacyCtx";
+import { getServerSideProps } from "@lib/team/[slug]/getServerSideProps";
+
+export const generateMetadata = async ({
+  params,
+  searchParams,
+}: {
+  params: Params;
+  searchParams: SearchParams;
+}) => {
+  const props = await getData(
+    buildLegacyCtx(headers(), cookies(), params, searchParams) as unknown as GetServerSidePropsContext
+  );
+  const teamName = props.team.name || "Nameless Team";
+
+  return await _generateMetadata(
+    () => teamName,
+    () => teamName
+  );
+};
+
+const getData = withAppDirSsr<PageProps>(getServerSideProps);
+
+export default WithLayout({
+  Page: TeamPage,
+  getData,
+  getLayout: null,
+  isBookingPage: true,
+})<"P">;

apps/web/app/future/org/[orgSlug]/team/[slug]/[type]/page.tsx

@@ -0,0 +1,43 @@
+import TypePage, { type PageProps } from "@pages/team/[slug]/[type]";
+import { withAppDirSsr } from "app/WithAppDirSsr";
+import type { Params, SearchParams } from "app/_types";
+import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
+import { type GetServerSidePropsContext } from "next";
+import { cookies, headers } from "next/headers";
+
+import { buildLegacyCtx } from "@lib/buildLegacyCtx";
+import { getServerSideProps } from "@lib/team/[slug]/[type]/getServerSideProps";
+
+export const generateMetadata = async ({
+  params,
+  searchParams,
+}: {
+  params: Params;
+  searchParams: SearchParams;
+}) => {
+  const legacyCtx = buildLegacyCtx(headers(), cookies(), params, searchParams);
+  const props = await getData(legacyCtx as unknown as GetServerSidePropsContext);
+  const { entity, user, slug, booking } = props;
+  const { trpc } = await import("@calcom/trpc");
+  const { data: event } = trpc.viewer.public.event.useQuery(
+    { username: user, eventSlug: slug, isTeamEvent: false, org: entity.orgSlug ?? null },
+    { refetchOnWindowFocus: false }
+  );
+
+  const profileName = event?.profile?.name ?? "";
+  const title = event?.title ?? "";
+
+  return await _generateMetadata(
+    (t) => `${booking?.uid && !!booking ? t("reschedule") : ""} ${title} | ${profileName}`,
+    (t) => `${booking?.uid ? t("reschedule") : ""} ${title}`
+  );
+};
+const getData = withAppDirSsr<PageProps>(getServerSideProps);
+
+export default WithLayout({
+  Page: TypePage,
+  getData,
+  getLayout: null,
+  isBookingPage: true,
+})<"P">;

apps/web/app/future/org/[orgSlug]/team/[slug]/page.tsx

@@ -0,0 +1,37 @@
+import TeamPage, { type PageProps } from "@pages/team/[slug]";
+import { withAppDirSsr } from "app/WithAppDirSsr";
+import type { Params, SearchParams } from "app/_types";
+import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
+import { type GetServerSidePropsContext } from "next";
+import { cookies, headers } from "next/headers";
+
+import { buildLegacyCtx } from "@lib/buildLegacyCtx";
+import { getServerSideProps } from "@lib/team/[slug]/getServerSideProps";
+
+export const generateMetadata = async ({
+  params,
+  searchParams,
+}: {
+  params: Params;
+  searchParams: SearchParams;
+}) => {
+  const props = await getData(
+    buildLegacyCtx(headers(), cookies(), params, searchParams) as unknown as GetServerSidePropsContext
+  );
+  const teamName = props.team.name || "Nameless Team";
+
+  return await _generateMetadata(
+    () => teamName,
+    () => teamName
+  );
+};
+
+const getData = withAppDirSsr<PageProps>(getServerSideProps);
+
+export default WithLayout({
+  Page: TeamPage,
+  getData,
+  getLayout: null,
+  isBookingPage: true,
+})<"P">;

apps/web/app/future/payment/[uid]/page.tsx

@@ -1,18 +1,10 @@
+import { withAppDirSsr } from "app/WithAppDirSsr";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
-import { type GetServerSidePropsContext } from "next";
-import { redirect, notFound } from "next/navigation";
-import { z } from "zod";
 
-import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import PaymentPage from "@calcom/features/ee/payments/components/PaymentPage";
-import { getClientSecretFromPayment } from "@calcom/features/ee/payments/pages/getClientSecretFromPayment";
+import { getServerSideProps, type PaymentPageProps } from "@calcom/features/ee/payments/pages/payment";
 import { APP_NAME } from "@calcom/lib/constants";
-import prisma from "@calcom/prisma";
-import { BookingStatus } from "@calcom/prisma/enums";
-import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
-
-import { ssrInit } from "@server/lib/ssr";
 
 export const generateMetadata = async () =>
   await _generateMetadata(
@@ -21,147 +13,6 @@ export const generateMetadata = async () =>
     () => ""
   );
 
-const querySchema = z.object({
-  uid: z.string(),
-});
-
-async function getData(context: GetServerSidePropsContext) {
-  const session = await getServerSession({ req: context.req });
-
-  if (!session?.user?.id) {
-    return redirect("/auth/login");
-  }
-
-  const ssr = await ssrInit(context);
-  await ssr.viewer.me.prefetch();
-
-  const { uid } = querySchema.parse(context.params);
-  const rawPayment = await prisma.payment.findFirst({
-    where: {
-      uid,
-    },
-    select: {
-      data: true,
-      success: true,
-      uid: true,
-      refunded: true,
-      bookingId: true,
-      appId: true,
-      amount: true,
-      currency: true,
-      paymentOption: true,
-      booking: {
-        select: {
-          id: true,
-          uid: true,
-          description: true,
-          title: true,
-          startTime: true,
-          endTime: true,
-          attendees: {
-            select: {
-              email: true,
-              name: true,
-            },
-          },
-          eventTypeId: true,
-          location: true,
-          status: true,
-          rejectionReason: true,
-          cancellationReason: true,
-          eventType: {
-            select: {
-              id: true,
-              title: true,
-              description: true,
-              length: true,
-              eventName: true,
-              requiresConfirmation: true,
-              userId: true,
-              metadata: true,
-              users: {
-                select: {
-                  name: true,
-                  username: true,
-                  hideBranding: true,
-                  theme: true,
-                },
-              },
-              team: {
-                select: {
-                  name: true,
-                  hideBranding: true,
-                },
-              },
-              price: true,
-              currency: true,
-              successRedirectUrl: true,
-            },
-          },
-        },
-      },
-    },
-  });
-
-  if (!rawPayment) {
-    return notFound();
-  }
-
-  const { data, booking: _booking, ...restPayment } = rawPayment;
-
-  const payment = {
-    ...restPayment,
-    data: data as Record<string, unknown>,
-  };
-
-  if (!_booking) {
-    return notFound();
-  }
-
-  const { startTime, endTime, eventType, ...restBooking } = _booking;
-  const booking = {
-    ...restBooking,
-    startTime: startTime.toString(),
-    endTime: endTime.toString(),
-  };
-
-  if (!eventType) {
-    return notFound();
-  }
-
-  if (eventType.users.length === 0 && !!!eventType.team) {
-    return notFound();
-  }
-
-  const [user] = eventType?.users.length
-    ? eventType.users
-    : [{ name: null, theme: null, hideBranding: null, username: null }];
-  const profile = {
-    name: eventType.team?.name || user?.name || null,
-    theme: (!eventType.team?.name && user?.theme) || null,
-    hideBranding: eventType.team?.hideBranding || user?.hideBranding || null,
-  };
-
-  if (
-    ([BookingStatus.CANCELLED, BookingStatus.REJECTED] as BookingStatus[]).includes(
-      booking.status as BookingStatus
-    )
-  ) {
-    return redirect(`/booking/${booking.uid}`);
-  }
-
-  return {
-    user,
-    eventType: {
-      ...eventType,
-      metadata: EventTypeMetaDataSchema.parse(eventType.metadata),
-    },
-    booking,
-    dehydratedState: ssr.dehydrate(),
-    payment,
-    clientSecret: getClientSecretFromPayment(payment),
-    profile,
-  };
-}
+const getData = withAppDirSsr<PaymentPageProps>(getServerSideProps);
 
 export default WithLayout({ getLayout: null, getData, Page: PaymentPage });

apps/web/app/future/reschedule/[uid]/embed/page.tsx

@@ -1,5 +1,6 @@
 import { getServerSideProps } from "@pages/reschedule/[uid]";
-import { withAppDir } from "app/AppDirSSRHOC";
+import { withAppDirSsr } from "app/WithAppDirSsr";
+import type { SearchParams } from "app/_types";
 import type { Params } from "next/dist/shared/lib/router/utils/route-matcher";
 import { cookies, headers } from "next/headers";
 
@@ -8,12 +9,12 @@ import withEmbedSsr from "@lib/withEmbedSsr";
 
 type PageProps = Readonly<{
   params: Params;
+  searchParams: SearchParams;
 }>;
 
-const Page = async ({ params }: PageProps) => {
-  const legacyCtx = buildLegacyCtx(headers(), cookies(), params);
-  // @ts-expect-error Argument of type '{ query: Params; params: Params; req: { headers: ReadonlyHeaders; cookies: ReadonlyRequestCookies; }; }'
-  await withAppDir(withEmbedSsr(getServerSideProps))(legacyCtx);
+const Page = async ({ params, searchParams }: PageProps) => {
+  const legacyCtx = buildLegacyCtx(headers(), cookies(), params, searchParams);
+  await withAppDirSsr(withEmbedSsr(getServerSideProps))(legacyCtx);
 
   return null;
 };

apps/web/app/future/reschedule/[uid]/page.tsx

@@ -1,5 +1,6 @@
-import OldPage, { getServerSideProps as _getServerSideProps } from "@pages/reschedule/[uid]";
-import { withAppDir } from "app/AppDirSSRHOC";
+import { getServerSideProps } from "@pages/reschedule/[uid]";
+import { withAppDirSsr } from "app/WithAppDirSsr";
+import type { SearchParams } from "app/_types";
 import { _generateMetadata } from "app/_utils";
 import type { Params } from "next/dist/shared/lib/router/utils/route-matcher";
 import { headers, cookies } from "next/headers";
@@ -14,17 +15,17 @@ export const generateMetadata = async () =>
 
 type PageProps = Readonly<{
   params: Params;
+  searchParams: SearchParams;
 }>;
 
-const getData = withAppDir(_getServerSideProps);
+const getData = withAppDirSsr(getServerSideProps);
 
-const Page = async ({ params }: PageProps) => {
-  const legacyCtx = buildLegacyCtx(headers(), cookies(), params);
+const Page = async ({ params, searchParams }: PageProps) => {
+  const legacyCtx = buildLegacyCtx(headers(), cookies(), params, searchParams);
 
-  // @ts-expect-error Argument of type '{ query: Params; params: Params; req: { headers: ReadonlyHeaders; cookies: ReadonlyRequestCookies; }; }'
   await getData(legacyCtx);
 
-  return <OldPage />;
+  return null;
 };
 
 export default Page;

apps/web/app/future/routing-forms/[...pages]/page.tsx

@@ -0,0 +1,12 @@
+import { redirect } from "next/navigation";
+
+const getPageProps = () => {
+  return redirect(`/apps/routing-forms/forms`);
+};
+const Page = () => {
+  getPageProps();
+
+  return null;
+};
+
+export default Page;

apps/web/app/future/routing-forms/page.tsx

@@ -0,0 +1,36 @@
+import { type SearchParams } from "app/_types";
+import { type GetServerSidePropsContext } from "next";
+import type { Params } from "next/dist/shared/lib/router/utils/route-matcher";
+import { cookies, headers } from "next/headers";
+import { redirect } from "next/navigation";
+import z from "zod";
+
+import { buildLegacyCtx } from "@lib/buildLegacyCtx";
+
+const paramsSchema = z
+  .object({
+    pages: z.array(z.string()),
+  })
+  .catch({
+    pages: [],
+  });
+
+const getPageProps = async (context: GetServerSidePropsContext) => {
+  const { pages } = paramsSchema.parse(context.params);
+
+  return redirect(`/apps/routing-forms/${pages.length ? pages.join("/") : ""}`);
+};
+
+type PageProps = Readonly<{
+  params: Params;
+  searchParams: SearchParams;
+}>;
+
+const Page = async ({ params, searchParams }: PageProps) => {
+  const legacyCtx = buildLegacyCtx(headers(), cookies(), params, searchParams);
+  await getPageProps(legacyCtx as unknown as GetServerSidePropsContext);
+
+  return null;
+};
+
+export default Page;

apps/web/app/future/settings/admin/users/[id]/edit/page.tsx

@@ -1,36 +1,32 @@
-import { getServerCaller } from "app/_trpc/serverClient";
 import { type Params } from "app/_types";
 import { _generateMetadata } from "app/_utils";
-import { cookies, headers } from "next/headers";
+import { WithLayout } from "app/layoutHOC";
 import { z } from "zod";
 
 import Page from "@calcom/features/ee/users/pages/users-edit-view";
-import prisma from "@calcom/prisma";
+import { getLayout } from "@calcom/features/settings/layouts/SettingsLayoutAppDir";
 
 const userIdSchema = z.object({ id: z.coerce.number() });
 
 export const generateMetadata = async ({ params }: { params: Params }) => {
   const input = userIdSchema.safeParse(params);
-
-  let title = "";
   if (!input.success) {
-    title = "Editing user";
-  } else {
-    const req = {
-      headers: headers(),
-      cookies: cookies(),
-    };
-
-    // @ts-expect-error Type '{ headers: ReadonlyHeaders; cookies: ReadonlyRequestCookies; }' is not assignable to type 'NextApiRequest'
-    const data = await getServerCaller({ req, prisma }).viewer.users.get({ userId: input.data.id });
-    const { user } = data;
-    title = `Editing user: ${user.username}`;
+    return await _generateMetadata(
+      () => "",
+      () => "Here you can edit a current user."
+    );
   }
 
+  const userId = input.data.id;
+  const { trpc } = await import("@calcom/trpc");
+  const [data] = trpc.viewer.users.get.useSuspenseQuery({ userId });
+  const { user } = data;
+  const title = `Editing user: ${user.username}`;
+
   return await _generateMetadata(
     () => title,
     () => "Here you can edit a current user."
   );
 };
 
-export default Page;
+export default WithLayout({ getLayout, Page })<"P">;

apps/web/app/future/settings/admin/users/add/page.tsx

@@ -1,6 +1,8 @@
 import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
 
 import Page from "@calcom/features/ee/users/pages/users-add-view";
+import { getLayout } from "@calcom/features/settings/layouts/SettingsLayoutAppDir";
 
 export const generateMetadata = async () =>
   await _generateMetadata(
@@ -8,4 +10,4 @@ export const generateMetadata = async () =>
     () => "Here you can add a new user."
   );
 
-export default Page;
+export default WithLayout({ getLayout, Page })<"P">;

apps/web/app/future/settings/admin/users/layout.tsx

@@ -1,5 +0,0 @@
-import { WithLayout } from "app/layoutHOC";
-
-import { getLayout } from "@calcom/features/settings/layouts/SettingsLayoutAppDir";
-
-export default WithLayout({ getLayout })<"L">;

apps/web/app/future/settings/admin/users/page.tsx

@@ -1,6 +1,8 @@
 import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
 
 import Page from "@calcom/features/ee/users/pages/users-listing-view";
+import { getLayout } from "@calcom/features/settings/layouts/SettingsLayoutAppDir";
 
 export const generateMetadata = async () =>
   await _generateMetadata(
@@ -8,4 +10,4 @@ export const generateMetadata = async () =>
     () => "A list of all the users in your account including their name, title, email and role."
   );
 
-export default Page;
+export default WithLayout({ getLayout, Page })<"P">;

apps/web/app/future/settings/organizations/[id]/onboard-admins/page.tsx

@@ -1,6 +1,6 @@
 import LegacyPage, {
   buildWrappedOnboardTeamMembersPage,
-} from "@pages/settings/organizations/[id]/onboard-admins";
+} from "@pages/settings/organizations/[id]/onboard-members";
 import { type Params } from "app/_types";
 import { _generateMetadata } from "app/_utils";
 import { headers } from "next/headers";

apps/web/app/future/settings/organizations/new/page.tsx

@@ -1,10 +1,9 @@
-import LegacyPage, { WrappedCreateNewOrganizationPage } from "@pages/settings/organizations/new/index";
+import LegacyPage, { getServerSideProps, LayoutWrapperAppDir } from "@pages/settings/organizations/new/index";
+import { withAppDirSsr } from "app/WithAppDirSsr";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
-import { type GetServerSidePropsContext } from "next";
-import { notFound } from "next/navigation";
 
-import { getFeatureFlagMap } from "@calcom/features/flags/server/utils";
+import { type inferSSRProps } from "@lib/types/inferSSRProps";
 
 export const generateMetadata = async () =>
   await _generateMetadata(
@@ -12,23 +11,8 @@ export const generateMetadata = async () =>
     (t) => t("organizations_description")
   );
 
-const getPageProps = async (context: GetServerSidePropsContext) => {
-  const prisma = await import("@calcom/prisma").then((mod) => mod.default);
-  const flags = await getFeatureFlagMap(prisma);
-  // Check if organizations are enabled
-  if (flags["organizations"] !== true) {
-    return notFound();
-  }
-
-  const querySlug = context.query.slug as string;
-
-  return {
-    querySlug: querySlug ?? null,
-  };
-};
-
 export default WithLayout({
-  getLayout: WrappedCreateNewOrganizationPage,
+  getLayout: LayoutWrapperAppDir,
   Page: LegacyPage,
-  getData: getPageProps,
+  getData: withAppDirSsr<inferSSRProps<typeof getServerSideProps>>(getServerSideProps),
 });

apps/web/app/future/signup/page.tsx

@@ -0,0 +1,20 @@
+import LegacyPage, { type SignupProps } from "@pages/signup";
+import { withAppDirSsr } from "app/WithAppDirSsr";
+import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
+
+import { getServerSideProps } from "@lib/signup/getServerSideProps";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("sign_up"),
+    (t) => t("sign_up")
+  );
+
+const getData = withAppDirSsr<SignupProps>(getServerSideProps);
+
+export default WithLayout({
+  Page: LegacyPage,
+  getLayout: null,
+  getData,
+})<"P">;

apps/web/app/future/team/[slug]/[type]/embed/page.tsx

@@ -0,0 +1,10 @@
+import LegacyPage, { getServerSideProps } from "@pages/team/[slug]/[type]/embed";
+import { withAppDirSsr } from "app/WithAppDirSsr";
+import withEmbedSsrAppDir from "app/WithEmbedSSR";
+import { WithLayout } from "app/layoutHOC";
+
+const getData = withAppDirSsr(getServerSideProps);
+const getEmbedData = withEmbedSsrAppDir(getData);
+
+// @ts-expect-error Type is missing the following properties from type: entity, duration, booking, away, and 7 more.
+export default WithLayout({ getLayout: null, getData: getEmbedData, Page: LegacyPage })<"P">;

apps/web/app/future/team/[slug]/[type]/page.tsx

@@ -0,0 +1,41 @@
+import LegacyPage, { type PageProps, getServerSideProps } from "@pages/team/[slug]/[type]";
+import { withAppDirSsr } from "app/WithAppDirSsr";
+import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
+import { type GetServerSidePropsContext } from "next";
+import { cookies, headers } from "next/headers";
+
+import { buildLegacyCtx } from "@lib/buildLegacyCtx";
+
+export const generateMetadata = async ({
+  params,
+  searchParams,
+}: {
+  params: Record<string, string | string[]>;
+  searchParams: { [key: string]: string | string[] | undefined };
+}) => {
+  const legacyCtx = buildLegacyCtx(headers(), cookies(), params, searchParams);
+  const props = await getData(legacyCtx as unknown as GetServerSidePropsContext);
+  const { entity, user, slug, booking } = props;
+  const { trpc } = await import("@calcom/trpc");
+  const { data: event } = trpc.viewer.public.event.useQuery(
+    { username: user, eventSlug: slug, isTeamEvent: false, org: entity.orgSlug ?? null },
+    { refetchOnWindowFocus: false }
+  );
+
+  const profileName = event?.profile?.name ?? "";
+  const title = event?.title ?? "";
+
+  return await _generateMetadata(
+    (t) => `${booking?.uid && !!booking ? t("reschedule") : ""} ${title} | ${profileName}`,
+    (t) => `${booking?.uid ? t("reschedule") : ""} ${title}`
+  );
+};
+const getData = withAppDirSsr<PageProps>(getServerSideProps);
+
+export default WithLayout({
+  Page: LegacyPage,
+  getData,
+  getLayout: null,
+  isBookingPage: true,
+})<"P">;

apps/web/app/future/team/[slug]/embed/page.tsx

@@ -0,0 +1,9 @@
+import LegacyPage, { type PageProps, getServerSideProps } from "@pages/team/[slug]";
+import { withAppDirSsr } from "app/WithAppDirSsr";
+import withEmbedSsrAppDir from "app/WithEmbedSSR";
+import { WithLayout } from "app/layoutHOC";
+
+const getData = withAppDirSsr<PageProps>(getServerSideProps);
+const getEmbedData = withEmbedSsrAppDir(getData);
+
+export default WithLayout({ getLayout: null, getData: getEmbedData, Page: LegacyPage })<"P">;

apps/web/app/future/team/[slug]/page.tsx

@@ -0,0 +1,35 @@
+import LegacyPage, { getServerSideProps, type PageProps } from "@pages/team/[slug]";
+import { withAppDirSsr } from "app/WithAppDirSsr";
+import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
+import { type GetServerSidePropsContext } from "next";
+import { cookies, headers } from "next/headers";
+
+import { buildLegacyCtx } from "@lib/buildLegacyCtx";
+
+export const generateMetadata = async ({
+  params,
+  searchParams,
+}: {
+  params: Record<string, string | string[]>;
+  searchParams: { [key: string]: string | string[] | undefined };
+}) => {
+  const props = await getData(
+    buildLegacyCtx(headers(), cookies(), params, searchParams) as unknown as GetServerSidePropsContext
+  );
+  const teamName = props.team.name || "Nameless Team";
+
+  return await _generateMetadata(
+    () => teamName,
+    () => teamName
+  );
+};
+
+const getData = withAppDirSsr<PageProps>(getServerSideProps);
+
+export default WithLayout({
+  Page: LegacyPage,
+  getData,
+  getLayout: null,
+  isBookingPage: true,
+})<"P">;

apps/web/app/future/teams/page.tsx

@@ -1,13 +1,11 @@
-import OldPage from "@pages/teams/index";
+import Page from "@pages/teams/index";
+import { withAppDirSsr } from "app/WithAppDirSsr";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
-import type { GetServerSidePropsContext } from "next";
-import { redirect } from "next/navigation";
 
 import { getLayout } from "@calcom/features/MainLayoutAppDir";
-import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 
-import { ssrInit } from "@server/lib/ssr";
+import { getServerSideProps } from "@lib/teams/getServerSideProps";
 
 export const generateMetadata = async () =>
   await _generateMetadata(
@@ -15,23 +13,4 @@ export const generateMetadata = async () =>
     (t) => t("create_manage_teams_collaborative")
   );
 
-async function getData(context: GetServerSidePropsContext) {
-  const ssr = await ssrInit(context);
-
-  await ssr.viewer.me.prefetch();
-
-  const session = await getServerSession({
-    req: context.req,
-  });
-
-  if (!session) {
-    const token = Array.isArray(context.query.token) ? context.query.token[0] : context.query.token;
-
-    const callbackUrl = token ? `/teams?token=${encodeURIComponent(token)}` : null;
-    return redirect(callbackUrl ? `/auth/login?callbackUrl=${callbackUrl}` : "/auth/login");
-  }
-
-  return { dehydratedState: ssr.dehydrate() };
-}
-
-export default WithLayout({ getData, getLayout, Page: OldPage })<"P">;
+export default WithLayout({ getData: withAppDirSsr(getServerSideProps), getLayout, Page })<"P">;

apps/web/app/future/video/[uid]/page.tsx

@@ -1,15 +1,11 @@
-import OldPage from "@pages/video/[uid]";
+import { withAppDirSsr } from "app/WithAppDirSsr";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
-import MarkdownIt from "markdown-it";
-import type { GetServerSidePropsContext } from "next";
-import { redirect } from "next/navigation";
 
-import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import { APP_NAME } from "@calcom/lib/constants";
-import prisma, { bookingMinimalSelect } from "@calcom/prisma";
 
-import { ssrInit } from "@server/lib/ssr";
+import VideosSingleView from "~/videos/views/videos-single-view";
+import { getServerSideProps, type PageProps } from "~/videos/views/videos-single-view.getServerSideProps";
 
 export const generateMetadata = async () =>
   await _generateMetadata(
@@ -17,86 +13,6 @@ export const generateMetadata = async () =>
     (t) => t("quick_video_meeting")
   );
 
-const md = new MarkdownIt("default", { html: true, breaks: true, linkify: true });
+const getData = withAppDirSsr<PageProps>(getServerSideProps);
 
-async function getData(context: GetServerSidePropsContext) {
-  const ssr = await ssrInit(context);
-
-  const booking = await prisma.booking.findUnique({
-    where: {
-      uid: context.query.uid as string,
-    },
-    select: {
-      ...bookingMinimalSelect,
-      uid: true,
-      description: true,
-      isRecorded: true,
-      user: {
-        select: {
-          id: true,
-          timeZone: true,
-          name: true,
-          email: true,
-          organization: {
-            select: {
-              calVideoLogo: true,
-            },
-          },
-        },
-      },
-      references: {
-        select: {
-          uid: true,
-          type: true,
-          meetingUrl: true,
-          meetingPassword: true,
-        },
-        where: {
-          type: "daily_video",
-        },
-      },
-    },
-  });
-
-  if (!booking || booking.references.length === 0 || !booking.references[0].meetingUrl) {
-    return redirect("/video/no-meeting-found");
-  }
-
-  //daily.co calls have a 60 minute exit buffer when a user enters a call when it's not available it will trigger the modals
-  const now = new Date();
-  const exitDate = new Date(now.getTime() - 60 * 60 * 1000);
-
-  //find out if the meeting is in the past
-  const isPast = booking?.endTime <= exitDate;
-  if (isPast) {
-    return redirect(`/video/meeting-ended/${booking?.uid}`);
-  }
-
-  const bookingObj = Object.assign({}, booking, {
-    startTime: booking.startTime.toString(),
-    endTime: booking.endTime.toString(),
-  });
-
-  const session = await getServerSession({ req: context.req });
-
-  // set meetingPassword to null for guests
-  if (session?.user.id !== bookingObj.user?.id) {
-    bookingObj.references.forEach((bookRef) => {
-      bookRef.meetingPassword = null;
-    });
-  }
-
-  return {
-    meetingUrl: bookingObj.references[0].meetingUrl ?? "",
-    ...(typeof bookingObj.references[0].meetingPassword === "string" && {
-      meetingPassword: bookingObj.references[0].meetingPassword,
-    }),
-    booking: {
-      ...bookingObj,
-      ...(bookingObj.description && { description: md.render(bookingObj.description) }),
-    },
-    dehydratedState: ssr.dehydrate(),
-  };
-}
-
-export default WithLayout({ getData, Page: OldPage, getLayout: null })<"P">;
+export default WithLayout({ getData, Page: VideosSingleView, getLayout: null })<"P">;

apps/web/app/future/video/meeting-ended/[uid]/page.tsx

@@ -1,10 +1,9 @@
-import OldPage from "@pages/video/meeting-ended/[uid]";
+import { withAppDirSsr } from "app/WithAppDirSsr";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
-import { type GetServerSidePropsContext } from "next";
-import { redirect } from "next/navigation";
 
-import prisma, { bookingMinimalSelect } from "@calcom/prisma";
+import MeetingEnded from "~/videos/views/videos-meeting-ended-single-view";
+import { getServerSideProps } from "~/videos/views/videos-meeting-ended-single-view.getServerSideProps";
 
 export const generateMetadata = async () =>
   await _generateMetadata(
@@ -12,41 +11,6 @@ export const generateMetadata = async () =>
     () => "Meeting Unavailable"
   );
 
-async function getData(context: Omit<GetServerSidePropsContext, "res" | "resolvedUrl">) {
-  const booking = await prisma.booking.findUnique({
-    where: {
-      uid: typeof context?.params?.uid === "string" ? context.params.uid : "",
-    },
-    select: {
-      ...bookingMinimalSelect,
-      uid: true,
-      user: {
-        select: {
-          credentials: true,
-        },
-      },
-      references: {
-        select: {
-          uid: true,
-          type: true,
-          meetingUrl: true,
-        },
-      },
-    },
-  });
+const getData = withAppDirSsr(getServerSideProps);
 
-  if (!booking) {
-    return redirect("/video/no-meeting-found");
-  }
-
-  const bookingObj = Object.assign({}, booking, {
-    startTime: booking.startTime.toString(),
-    endTime: booking.endTime.toString(),
-  });
-
-  return {
-    booking: bookingObj,
-  };
-}
-
-export default WithLayout({ getData, Page: OldPage, getLayout: null })<"P">;
+export default WithLayout({ getData, Page: MeetingEnded, getLayout: null })<"P">;

apps/web/app/future/video/meeting-not-started/[uid]/page.tsx

@@ -1,15 +1,12 @@
-import OldPage from "@pages/video/meeting-not-started/[uid]";
-import { type Params } from "app/_types";
+import { withAppDirSsr } from "app/WithAppDirSsr";
+import type { PageProps } from "app/_types";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
-import { type GetServerSidePropsContext } from "next";
-import { redirect } from "next/navigation";
 
 import prisma, { bookingMinimalSelect } from "@calcom/prisma";
 
-type PageProps = Readonly<{
-  params: Params;
-}>;
+import MeetingNotStarted from "~/videos/views/videos-meeting-not-started-single-view";
+import { getServerSideProps } from "~/videos/views/videos-meeting-not-started-single-view.getServerSideProps";
 
 export const generateMetadata = async ({ params }: PageProps) => {
   const booking = await prisma.booking.findUnique({
@@ -25,26 +22,6 @@ export const generateMetadata = async ({ params }: PageProps) => {
   );
 };
 
-async function getData(context: Omit<GetServerSidePropsContext, "res" | "resolvedUrl">) {
-  const booking = await prisma.booking.findUnique({
-    where: {
-      uid: typeof context?.params?.uid === "string" ? context.params.uid : "",
-    },
-    select: bookingMinimalSelect,
-  });
+const getData = withAppDirSsr(getServerSideProps);
 
-  if (!booking) {
-    return redirect("/video/no-meeting-found");
-  }
-
-  const bookingObj = Object.assign({}, booking, {
-    startTime: booking.startTime.toString(),
-    endTime: booking.endTime.toString(),
-  });
-
-  return {
-    booking: bookingObj,
-  };
-}
-
-export default WithLayout({ getData, Page: OldPage, getLayout: null })<"P">;
+export default WithLayout({ getData, Page: MeetingNotStarted, getLayout: null })<"P">;

apps/web/app/future/video/no-meeting-found/page.tsx

@@ -1,16 +1,18 @@
-import LegacyPage from "@pages/video/no-meeting-found";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
-import { type GetServerSidePropsContext } from "next";
+import type { GetServerSidePropsContext } from "next";
 
 import { ssrInit } from "@server/lib/ssr";
 
+import NoMeetingFound from "~/videos/views/videos-no-meeting-found-single-view";
+
 export const generateMetadata = async () =>
   await _generateMetadata(
     (t) => t("no_meeting_found"),
     (t) => t("no_meeting_found")
   );
 
+// ssr was added by Intuita, legacy page does not have it
 const getData = async (context: GetServerSidePropsContext) => {
   const ssr = await ssrInit(context);
 
@@ -19,4 +21,4 @@ const getData = async (context: GetServerSidePropsContext) => {
   };
 };
 
-export default WithLayout({ getData, Page: LegacyPage, getLayout: null })<"P">;
+export default WithLayout({ getData, Page: NoMeetingFound, getLayout: null })<"P">;

apps/web/app/future/workflows/[workflow]/page.tsx

@@ -1,21 +1,21 @@
+import LegacyPage, { getStaticProps } from "@pages/workflows/[workflow]";
+import { withAppDirSsg } from "app/WithAppDirSsg";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
 import { type GetServerSidePropsContext } from "next";
 import { headers, cookies } from "next/headers";
-import { notFound } from "next/navigation";
-import { z } from "zod";
-
-import LegacyPage from "@calcom/features/ee/workflows/pages/workflow";
 
 import { buildLegacyCtx } from "@lib/buildLegacyCtx";
 
-const querySchema = z.object({
-  workflow: z.string(),
-});
-
-export const generateMetadata = async ({ params }: { params: Record<string, string | string[]> }) => {
-  const { workflow } = await getProps(
-    buildLegacyCtx(headers(), cookies(), params) as unknown as GetServerSidePropsContext
+export const generateMetadata = async ({
+  params,
+  searchParams,
+}: {
+  params: Record<string, string | string[]>;
+  searchParams: { [key: string]: string | string[] | undefined };
+}) => {
+  const { workflow } = await getData(
+    buildLegacyCtx(headers(), cookies(), params, searchParams) as unknown as GetServerSidePropsContext
   );
   return await _generateMetadata(
     () => workflow ?? "Untitled",
@@ -23,19 +23,12 @@ export const generateMetadata = async ({ params }: { params: Record<string, stri
   );
 };
 
-async function getProps(context: GetServerSidePropsContext) {
-  const safeParams = querySchema.safeParse(context.params);
-
-  console.log("Built workflow page:", safeParams);
-  if (!safeParams.success) {
-    return notFound();
-  }
-  return { workflow: safeParams.data.workflow };
-}
+const getData = withAppDirSsg(getStaticProps);
 
 export const generateStaticParams = () => [];
 
-export default WithLayout({ getLayout: null, getData: getProps, Page: LegacyPage })<"P">;
+// @ts-expect-error TODO: fix this
+export default WithLayout({ getLayout: null, getData, Page: LegacyPage })<"P">;
 export const dynamic = "force-static";
 // generate segments on demand
 export const dynamicParams = true;

apps/web/app/layoutHOC.tsx

@@ -9,7 +9,7 @@ import PageWrapper from "@components/PageWrapperAppDir";
 type WithLayoutParams<T extends Record<string, any>> = {
   getLayout: ((page: React.ReactElement) => React.ReactNode) | null;
   Page?: (props: T) => React.ReactElement | null;
-  getData?: (arg: GetServerSidePropsContext) => Promise<T>;
+  getData?: (arg: GetServerSidePropsContext) => Promise<T | undefined>;
   isBookingPage?: boolean;
 };
 
@@ -22,9 +22,11 @@ export function WithLayout<T extends Record<string, any>>({
   return async <P extends "P" | "L">(p: P extends "P" ? PageProps : LayoutProps) => {
     const h = headers();
     const nonce = h.get("x-nonce") ?? undefined;
-    const props = getData
-      ? await getData(buildLegacyCtx(h, cookies(), p.params) as unknown as GetServerSidePropsContext)
-      : ({} as T);
+    let props = {} as T;
+
+    if ("searchParams" in p && getData) {
+      props = (await getData(buildLegacyCtx(h, cookies(), p.params, p.searchParams))) ?? ({} as T);
+    }
 
     const children = "children" in p ? p.children : null;
 

apps/web/app/not-found.tsx

@@ -2,13 +2,13 @@ import NotFoundPage from "@pages/404";
 import { WithLayout } from "app/layoutHOC";
 import type { GetStaticPropsContext } from "next";
 
-import { ssgInit } from "@server/lib/ssg";
+import { getTranslations } from "@server/lib/getTranslations";
 
 const getData = async (context: GetStaticPropsContext) => {
-  const ssg = await ssgInit(context);
+  const i18n = await getTranslations(context);
 
   return {
-    dehydratedState: ssg.dehydrate(),
+    i18n,
   };
 };
 

apps/web/components/PageWrapper.tsx

@@ -89,8 +89,7 @@ function PageWrapper(props: AppProps) {
           </LicenseRequired>
         ) : (
           <Component {...pageProps} err={err} />
-        ),
-        router
+        )
       )}
     </AppProviders>
   );

apps/web/components/apps/AdditionalCalendarSelector.tsx

@@ -16,10 +16,10 @@ import { Plus } from "@calcom/ui/components/icon";
 import { QueryCell } from "@lib/QueryCell";
 
 interface AdditionalCalendarSelectorProps {
-  isLoading?: boolean;
+  isPending?: boolean;
 }
 
-const AdditionalCalendarSelector = ({ isLoading }: AdditionalCalendarSelectorProps): JSX.Element | null => {
+const AdditionalCalendarSelector = ({ isPending }: AdditionalCalendarSelectorProps): JSX.Element | null => {
   const { t } = useLocale();
   const query = trpc.viewer.integrations.useQuery({ variant: "calendar", onlyInstalled: true });
 
@@ -42,7 +42,7 @@ const AdditionalCalendarSelector = ({ isLoading }: AdditionalCalendarSelectorPro
         return (
           <Dropdown modal={false}>
             <DropdownMenuTrigger asChild>
-              <Button StartIcon={Plus} color="secondary" {...(isLoading && { loading: isLoading })}>
+              <Button StartIcon={Plus} color="secondary" {...(isPending && { loading: isPending })}>
                 {t("add")}
               </Button>
             </DropdownMenuTrigger>

apps/web/components/apps/AppPage.tsx

@@ -1,6 +1,6 @@
 import Link from "next/link";
 import type { IframeHTMLAttributes } from "react";
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 
 import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
 import { AppDependencyComponent, InstallAppButton } from "@calcom/app-store/components";
@@ -92,17 +92,19 @@ export const AppPage = ({
   const [existingCredentials, setExistingCredentials] = useState<number[]>([]);
   const [showDisconnectIntegration, setShowDisconnectIntegration] = useState(false);
 
-  const appDbQuery = trpc.viewer.appCredentialsByType.useQuery(
-    { appType: type },
-    {
-      onSettled(data) {
-        const credentialsCount = data?.credentials.length || 0;
-        setShowDisconnectIntegration(
-          data?.userAdminTeams.length ? credentialsCount >= data?.userAdminTeams.length : credentialsCount > 0
-        );
-        setExistingCredentials(data?.credentials.map((credential) => credential.id) || []);
-      },
-    }
+  const appDbQuery = trpc.viewer.appCredentialsByType.useQuery({ appType: type });
+
+  useEffect(
+    function refactorMeWithoutEffect() {
+      const data = appDbQuery.data;
+
+      const credentialsCount = data?.credentials.length || 0;
+      setShowDisconnectIntegration(
+        data?.userAdminTeams.length ? credentialsCount >= data?.userAdminTeams.length : credentialsCount > 0
+      );
+      setExistingCredentials(data?.credentials.map((credential) => credential.id) || []);
+    },
+    [appDbQuery.data]
   );
 
   const dependencyData = trpc.viewer.appsRouter.queryForDependencies.useQuery(dependencies, {
@@ -190,7 +192,7 @@ export const AppPage = ({
             )}
           </header>
         </div>
-        {!appDbQuery.isLoading ? (
+        {!appDbQuery.isPending ? (
           isGlobal ||
           (existingCredentials.length > 0 && allowedMultipleInstalls ? (
             <div className="flex space-x-3">
@@ -211,7 +213,7 @@ export const AppPage = ({
                         onClick: () => {
                           mutation.mutate({ type, variant, slug });
                         },
-                        loading: mutation.isLoading,
+                        loading: mutation.isPending,
                       };
                     }
                     return (
@@ -250,7 +252,7 @@ export const AppPage = ({
                     onClick: () => {
                       mutation.mutate({ type, variant, slug });
                     },
-                    loading: mutation.isLoading,
+                    loading: mutation.isPending,
                   };
                 }
                 return (
@@ -272,7 +274,7 @@ export const AppPage = ({
         )}
 
         {dependencies &&
-          (!dependencyData.isLoading ? (
+          (!dependencyData.isPending ? (
             <div className="mt-6">
               <AppDependencyComponent appName={name} dependencyData={dependencyData.data} />
             </div>

apps/web/components/apps/CalendarListContainer.tsx

@@ -28,7 +28,7 @@ type Props = {
   onChanged: () => unknown | Promise<unknown>;
   fromOnboarding?: boolean;
   destinationCalendarId?: string;
-  isLoading?: boolean;
+  isPending?: boolean;
 };
 
 function CalendarList(props: Props) {
@@ -74,7 +74,7 @@ function ConnectedCalendarsList(props: Props) {
     suspense: true,
     refetchOnWindowFocus: false,
   });
-  const { fromOnboarding, isLoading } = props;
+  const { fromOnboarding, isPending } = props;
   return (
     <QueryCell
       query={query}
@@ -97,7 +97,7 @@ function ConnectedCalendarsList(props: Props) {
                 <div className="flex flex-col xl:flex-row xl:space-x-5">
                   {!!data.connectedCalendars.length && (
                     <div className="flex items-center">
-                      <AdditionalCalendarSelector isLoading={isLoading} />
+                      <AdditionalCalendarSelector isPending={isPending} />
                     </div>
                   )}
                 </div>
@@ -229,7 +229,7 @@ export function CalendarListContainer(props: { heading?: boolean; fromOnboarding
                               hidePlaceholder
                               value={data.destinationCalendar?.externalId}
                               onChange={mutation.mutate}
-                              isLoading={mutation.isLoading}
+                              isPending={mutation.isPending}
                             />
                           </div>
                         </div>
@@ -239,7 +239,7 @@ export function CalendarListContainer(props: { heading?: boolean; fromOnboarding
                       onChanged={onChanged}
                       fromOnboarding={fromOnboarding}
                       destinationCalendarId={data.destinationCalendar?.externalId}
-                      isLoading={mutation.isLoading}
+                      isPending={mutation.isPending}
                     />
                   </>
                 )}

apps/web/components/apps/InstallAppButtonChild.tsx

@@ -100,9 +100,9 @@ export const InstallAppButtonChild = ({
         <DropdownMenuContent
           className="w-auto"
           onInteractOutside={(event) => {
-            if (mutation.isLoading) event.preventDefault();
+            if (mutation.isPending) event.preventDefault();
           }}>
-          {mutation.isLoading && (
+          {mutation.isPending && (
             <div className="z-1 fixed inset-0 flex items-center justify-center">
               <Spinner />
             </div>

apps/web/components/booking/BookingListItem.tsx

@@ -139,7 +139,7 @@ function BookingListItem(booking: BookingItemProps) {
         setRejectionDialogIsOpen(true);
       },
       icon: Ban,
-      disabled: mutation.isLoading,
+      disabled: mutation.isPending,
     },
     // For bookings with payment, only confirm if the booking is paid for
     ...((isPending && !paymentAppData.enabled) ||
@@ -153,7 +153,7 @@ function BookingListItem(booking: BookingItemProps) {
               bookingConfirm(true);
             },
             icon: Check,
-            disabled: mutation.isLoading,
+            disabled: mutation.isPending,
           },
         ]
       : []),
@@ -293,7 +293,7 @@ function BookingListItem(booking: BookingItemProps) {
         setViewRecordingsDialogIsOpen(true);
       },
       color: showCheckRecordingButton ? "secondary" : "primary",
-      disabled: mutation.isLoading,
+      disabled: mutation.isPending,
     },
   ];
 
@@ -348,7 +348,7 @@ function BookingListItem(booking: BookingItemProps) {
           <DialogFooter>
             <DialogClose />
             <Button
-              disabled={mutation.isLoading}
+              disabled={mutation.isPending}
               data-testid="rejection-confirm"
               onClick={() => {
                 bookingConfirm(false);

apps/web/components/dialog/ChargeCardDialog.tsx

@@ -65,7 +65,7 @@ export const ChargeCardDialog = (props: IRescheduleDialog) => {
               <DialogClose />
               <Button
                 data-testid="send_request"
-                disabled={chargeCardMutation.isLoading || chargeError}
+                disabled={chargeCardMutation.isPending || chargeError}
                 onClick={() =>
                   chargeCardMutation.mutate({
                     bookingId,

apps/web/components/dialog/RescheduleDialog.tsx

@@ -27,7 +27,7 @@ export const RescheduleDialog = (props: IRescheduleDialog) => {
   const { isOpenDialog, setIsOpenDialog, bookingUId: bookingId } = props;
   const [rescheduleReason, setRescheduleReason] = useState("");
 
-  const { mutate: rescheduleApi, isLoading } = trpc.viewer.bookings.requestReschedule.useMutation({
+  const { mutate: rescheduleApi, isPending } = trpc.viewer.bookings.requestReschedule.useMutation({
     async onSuccess() {
       showToast(t("reschedule_request_sent"), "success");
       setIsOpenDialog(false);
@@ -65,7 +65,7 @@ export const RescheduleDialog = (props: IRescheduleDialog) => {
               <DialogClose />
               <Button
                 data-testid="send_request"
-                disabled={isLoading}
+                disabled={isPending}
                 onClick={() => {
                   rescheduleApi({
                     bookingId,

apps/web/components/eventtype/EventAdvancedTab.tsx

@@ -21,6 +21,7 @@ import type { EditableSchema } from "@calcom/features/form-builder/schema";
 import { BookerLayoutSelector } from "@calcom/features/settings/BookerLayoutSelector";
 import { classNames } from "@calcom/lib";
 import { APP_NAME, CAL_URL } from "@calcom/lib/constants";
+import { IS_VISUAL_REGRESSION_TESTING } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { Prisma } from "@calcom/prisma/client";
 import { trpc } from "@calcom/trpc/react";
@@ -35,7 +36,6 @@ import {
   Tooltip,
 } from "@calcom/ui";
 import { Copy, Edit, Info } from "@calcom/ui/components/icon";
-import { IS_VISUAL_REGRESSION_TESTING } from "@calcom/web/constants";
 
 import RequiresConfirmationController from "./RequiresConfirmationController";
 
@@ -55,8 +55,8 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
   const { t } = useLocale();
 
   const [showEventNameTip, setShowEventNameTip] = useState(false);
-  const [hashedLinkVisible, setHashedLinkVisible] = useState(!!eventType.hashedLink);
-  const [redirectUrlVisible, setRedirectUrlVisible] = useState(!!eventType.successRedirectUrl);
+  const [hashedLinkVisible, setHashedLinkVisible] = useState(!!formMethods.getValues("hashedLink"));
+  const [redirectUrlVisible, setRedirectUrlVisible] = useState(!!formMethods.getValues("successRedirectUrl"));
   const [hashedUrl, setHashedUrl] = useState(eventType.hashedLink?.link);
 
   const bookingFields: Prisma.JsonObject = {};
@@ -66,27 +66,31 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
     user?.theme === "dark" ||
     (!user?.theme && typeof document !== "undefined" && document.documentElement.classList.contains("dark"));
 
-  eventType.bookingFields.forEach(({ name }) => {
+  formMethods.getValues().bookingFields.forEach(({ name }) => {
     bookingFields[name] = `${name} input`;
   });
 
   const eventNameObject: EventNameObjectType = {
     attendeeName: t("scheduler"),
-    eventType: eventType.title,
-    eventName: eventType.eventName,
-    host: eventType.users[0]?.name || "Nameless",
+    eventType: formMethods.getValues("title"),
+    eventName: formMethods.getValues("eventName"),
+    host: formMethods.getValues("users")[0]?.name || "Nameless",
     bookingFields: bookingFields,
     t,
   };
 
-  const [requiresConfirmation, setRequiresConfirmation] = useState(eventType.requiresConfirmation);
-  const placeholderHashedLink = `${CAL_URL}/d/${hashedUrl}/${eventType.slug}`;
+  const [requiresConfirmation, setRequiresConfirmation] = useState(
+    formMethods.getValues("requiresConfirmation")
+  );
+  const placeholderHashedLink = `${CAL_URL}/d/${hashedUrl}/${formMethods.getValues("slug")}`;
   const seatsEnabled = formMethods.watch("seatsPerTimeSlotEnabled");
-  const noShowFeeEnabled = eventType.metadata?.apps?.stripe?.paymentOption === "HOLD";
+  const noShowFeeEnabled =
+    formMethods.getValues("metadata")?.apps?.stripe?.enabled === true &&
+    formMethods.getValues("metadata")?.apps?.stripe?.paymentOption === "HOLD";
 
   useEffect(() => {
-    !hashedUrl && setHashedUrl(generateHashedLink(eventType.users[0]?.id ?? team?.id));
-  }, [eventType.users, hashedUrl, team?.id]);
+    !hashedUrl && setHashedUrl(generateHashedLink(formMethods.getValues("users")[0]?.id ?? team?.id));
+  }, [formMethods.getValues("users"), hashedUrl, team?.id]);
 
   const toggleGuests = (enabled: boolean) => {
     const bookingFields = formMethods.getValues("bookingFields");
@@ -108,7 +112,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
   };
 
   const { shouldLockDisableProps } = useLockedFieldsManager(
-    eventType,
+    formMethods.getValues(),
     t("locked_fields_admin_description"),
     t("locked_fields_member_description")
   );
@@ -122,7 +126,6 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
 
   const closeEventNameTip = () => setShowEventNameTip(false);
 
-  const setEventName = (value: string) => formMethods.setValue("eventName", value);
   return (
     <div className="flex flex-col space-y-4">
       {/**
@@ -145,12 +148,9 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
               </Link>
             </div>
             <Controller
-              control={formMethods.control}
               name="destinationCalendar"
-              defaultValue={eventType.destinationCalendar || undefined}
               render={({ field: { onChange, value } }) => (
                 <DestinationCalendarSelector
-                  destinationCalendar={eventType.destinationCalendar}
                   value={value ? value.externalId : undefined}
                   onChange={onChange}
                   hidePlaceholder
@@ -167,7 +167,6 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
             type="text"
             {...shouldLockDisableProps("eventName")}
             placeholder={eventNamePlaceholder}
-            defaultValue={eventType.eventName || ""}
             {...formMethods.register("eventName")}
             addOnSuffix={
               <Button
@@ -194,7 +193,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
           {...shouldLockDisableProps("bookingFields")}
           dataStore={{
             options: {
-              locations: getLocationsOptionsForSelect(eventType?.locations ?? [], t),
+              locations: getLocationsOptionsForSelect(formMethods.getValues("locations") ?? [], t),
             },
           }}
         />
@@ -203,21 +202,20 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
       <RequiresConfirmationController
         eventType={eventType}
         seatsEnabled={seatsEnabled}
-        metadata={eventType.metadata}
+        metadata={formMethods.getValues("metadata")}
         requiresConfirmation={requiresConfirmation}
         onRequiresConfirmation={setRequiresConfirmation}
       />
 
       <Controller
         name="requiresBookerEmailVerification"
-        control={formMethods.control}
-        defaultValue={eventType.requiresBookerEmailVerification}
         render={({ field: { value, onChange } }) => (
           <SettingsToggle
             labelClassName="text-sm"
             toggleSwitchAtTheEnd={true}
             switchContainerClassName="border-subtle rounded-lg border py-6 px-4 sm:px-6"
             title={t("requires_booker_email_verification")}
+            data-testid="requires-booker-email-verification"
             {...shouldLockDisableProps("requiresBookerEmailVerification")}
             description={t("description_requires_booker_email_verification")}
             checked={value}
@@ -228,14 +226,13 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
 
       <Controller
         name="hideCalendarNotes"
-        control={formMethods.control}
-        defaultValue={eventType.hideCalendarNotes}
         render={({ field: { value, onChange } }) => (
           <SettingsToggle
             labelClassName="text-sm"
             toggleSwitchAtTheEnd={true}
             switchContainerClassName="border-subtle rounded-lg border py-6 px-4 sm:px-6"
             title={t("disable_notes")}
+            data-testid="disable-notes"
             {...shouldLockDisableProps("hideCalendarNotes")}
             description={t("disable_notes_description")}
             checked={value}
@@ -246,7 +243,6 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
 
       <Controller
         name="successRedirectUrl"
-        control={formMethods.control}
         render={({ field: { value, onChange } }) => (
           <>
             <SettingsToggle
@@ -258,6 +254,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
               )}
               childrenClassName="lg:ml-0"
               title={t("redirect_success_booking")}
+              data-testid="redirect-success-booking"
               {...successRedirectUrlLocked}
               description={t("redirect_url_description")}
               checked={redirectUrlVisible}
@@ -272,16 +269,17 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
                   labelSrOnly
                   disabled={successRedirectUrlLocked.disabled}
                   placeholder={t("external_redirect_url")}
+                  data-testid="external-redirect-url"
                   required={redirectUrlVisible}
                   type="text"
-                  defaultValue={eventType.successRedirectUrl || ""}
                   {...formMethods.register("successRedirectUrl")}
                 />
                 <div
                   className={classNames(
                     "p-1 text-sm text-orange-600",
                     formMethods.getValues("successRedirectUrl") ? "block" : "hidden"
-                  )}>
+                  )}
+                  data-testid="redirect-url-warning">
                   {t("redirect_url_warning")}
                 </div>
               </div>
@@ -302,6 +300,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
         title={t("enable_private_url")}
         Badge={
           <a
+            data-testid="hashedLinkCheck-info"
             target="_blank"
             rel="noreferrer"
             href="https://cal.com/docs/core-features/event-types/single-use-private-links">
@@ -327,7 +326,10 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
               hint={t("private_link_hint")}
               defaultValue={placeholderHashedLink}
               addOnSuffix={
-                <Tooltip content={eventType.hashedLink ? t("copy_to_clipboard") : t("enabled_after_update")}>
+                <Tooltip
+                  content={
+                    formMethods.getValues("hashedLink") ? t("copy_to_clipboard") : t("enabled_after_update")
+                  }>
                   <Button
                     color="minimal"
                     size="sm"
@@ -336,7 +338,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
                     aria-label="copy link"
                     onClick={() => {
                       navigator.clipboard.writeText(placeholderHashedLink);
-                      if (eventType.hashedLink) {
+                      if (formMethods.getValues("hashedLink")) {
                         showToast(t("private_link_copied"), "success");
                       } else {
                         showToast(t("enabled_after_update_description"), "warning");
@@ -353,8 +355,6 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
 
       <Controller
         name="seatsPerTimeSlotEnabled"
-        control={formMethods.control}
-        defaultValue={!!eventType.seatsPerTimeSlot}
         render={({ field: { value, onChange } }) => (
           <>
             <SettingsToggle
@@ -378,7 +378,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
                   formMethods.setValue("requiresConfirmation", false);
                   setRequiresConfirmation(false);
                   formMethods.setValue("metadata.multipleDuration", undefined);
-                  formMethods.setValue("seatsPerTimeSlot", 2);
+                  formMethods.setValue("seatsPerTimeSlot", eventType.seatsPerTimeSlot ?? 2);
                 } else {
                   formMethods.setValue("seatsPerTimeSlot", null);
                   toggleGuests(true);
@@ -388,8 +388,6 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
               <div className="border-subtle rounded-b-lg border border-t-0 p-6">
                 <Controller
                   name="seatsPerTimeSlot"
-                  control={formMethods.control}
-                  defaultValue={eventType.seatsPerTimeSlot}
                   render={({ field: { value, onChange } }) => (
                     <div>
                       <TextField
@@ -399,30 +397,40 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
                         label={t("number_of_seats")}
                         type="number"
                         disabled={seatsLocked.disabled}
-                        defaultValue={value || 2}
+                        defaultValue={value}
                         min={1}
                         containerClassName="max-w-80"
                         addOnSuffix={<>{t("seats")}</>}
                         onChange={(e) => {
                           onChange(Math.abs(Number(e.target.value)));
                         }}
+                        data-testid="seats-per-time-slot"
                       />
                       <div className="mt-4">
-                        <CheckboxField
-                          description={t("show_attendees")}
-                          disabled={seatsLocked.disabled}
-                          onChange={(e) => formMethods.setValue("seatsShowAttendees", e.target.checked)}
-                          defaultChecked={!!eventType.seatsShowAttendees}
+                        <Controller
+                          name="seatsShowAttendees"
+                          render={({ field: { value, onChange } }) => (
+                            <CheckboxField
+                              data-testid="show-attendees"
+                              description={t("show_attendees")}
+                              disabled={seatsLocked.disabled}
+                              onChange={(e) => onChange(e)}
+                              checked={value}
+                            />
+                          )}
                         />
                       </div>
                       <div className="mt-2">
-                        <CheckboxField
-                          description={t("show_available_seats_count")}
-                          disabled={seatsLocked.disabled}
-                          onChange={(e) =>
-                            formMethods.setValue("seatsShowAvailabilityCount", e.target.checked)
-                          }
-                          defaultChecked={!!eventType.seatsShowAvailabilityCount}
+                        <Controller
+                          name="seatsShowAvailabilityCount"
+                          render={({ field: { value, onChange } }) => (
+                            <CheckboxField
+                              description={t("show_available_seats_count")}
+                              disabled={seatsLocked.disabled}
+                              onChange={(e) => onChange(e)}
+                              checked={value}
+                            />
+                          )}
                         />
                       </div>
                     </div>
@@ -436,8 +444,6 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
       />
       <Controller
         name="lockTimeZoneToggleOnBookingPage"
-        control={formMethods.control}
-        defaultValue={eventType.lockTimeZoneToggleOnBookingPage}
         render={({ field: { value, onChange } }) => (
           <SettingsToggle
             labelClassName="text-sm"
@@ -448,63 +454,52 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
             description={t("description_lock_timezone_toggle_on_booking_page")}
             checked={value}
             onCheckedChange={(e) => onChange(e)}
+            data-testid="lock-timezone-toggle"
           />
         )}
       />
       {allowDisablingAttendeeConfirmationEmails(workflows) && (
-        <>
-          <Controller
-            name="metadata.disableStandardEmails.confirmation.attendee"
-            control={formMethods.control}
-            render={({ field: { value, onChange } }) => (
-              <>
-                <SettingsToggle
-                  labelClassName="text-sm"
-                  toggleSwitchAtTheEnd={true}
-                  switchContainerClassName="border-subtle rounded-lg border py-6 px-4 sm:px-6"
-                  title={t("disable_attendees_confirmation_emails")}
-                  description={t("disable_attendees_confirmation_emails_description")}
-                  checked={value || false}
-                  onCheckedChange={(e) => {
-                    formMethods.setValue("metadata.disableStandardEmails.confirmation.attendee", e);
-                    onChange(e);
-                  }}
-                />
-              </>
-            )}
-          />
-        </>
+        <Controller
+          name="metadata.disableStandardEmails.confirmation.attendee"
+          render={({ field: { value, onChange } }) => (
+            <>
+              <SettingsToggle
+                labelClassName="text-sm"
+                toggleSwitchAtTheEnd={true}
+                switchContainerClassName="border-subtle rounded-lg border py-6 px-4 sm:px-6"
+                title={t("disable_attendees_confirmation_emails")}
+                description={t("disable_attendees_confirmation_emails_description")}
+                checked={value}
+                onCheckedChange={(e) => onChange(e)}
+              />
+            </>
+          )}
+        />
       )}
       {allowDisablingHostConfirmationEmails(workflows) && (
-        <>
-          <Controller
-            name="metadata.disableStandardEmails.confirmation.host"
-            control={formMethods.control}
-            defaultValue={!!eventType.seatsPerTimeSlot}
-            render={({ field: { value, onChange } }) => (
-              <>
-                <SettingsToggle
-                  labelClassName="text-sm"
-                  toggleSwitchAtTheEnd={true}
-                  switchContainerClassName="border-subtle rounded-lg border py-6 px-4 sm:px-6"
-                  title={t("disable_host_confirmation_emails")}
-                  description={t("disable_host_confirmation_emails_description")}
-                  checked={value || false}
-                  onCheckedChange={(e) => {
-                    formMethods.setValue("metadata.disableStandardEmails.confirmation.host", e);
-                    onChange(e);
-                  }}
-                />
-              </>
-            )}
-          />
-        </>
+        <Controller
+          name="metadata.disableStandardEmails.confirmation.host"
+          defaultValue={!!formMethods.getValues("seatsPerTimeSlot")}
+          render={({ field: { value, onChange } }) => (
+            <>
+              <SettingsToggle
+                labelClassName="text-sm"
+                toggleSwitchAtTheEnd={true}
+                switchContainerClassName="border-subtle rounded-lg border py-6 px-4 sm:px-6"
+                title={t("disable_host_confirmation_emails")}
+                description={t("disable_host_confirmation_emails_description")}
+                checked={value}
+                onCheckedChange={(e) => onChange(e)}
+              />
+            </>
+          )}
+        />
       )}
       {showEventNameTip && (
         <CustomEventTypeModal
           close={closeEventNameTip}
-          setValue={setEventName}
-          defaultValue={formMethods.getValues("eventName") || eventType.eventName || ""}
+          setValue={(val: string) => formMethods.setValue("eventName", val)}
+          defaultValue={formMethods.getValues("eventName")}
           placeHolder={eventNamePlaceholder}
           event={eventNameObject}
         />