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/nextjs-bundle-analysis.yml

@@ -69,7 +69,7 @@ jobs:
           body="${body//'%'/'%25'}"
           body="${body//$'\n'/'%0A'}"
           body="${body//$'\r'/'%0D'}"
-          echo "{body}=${body}" >> $GITHUB_OUTPUT
+          echo ::set-output name=body::$body
 
       - name: Find Comment
         uses: peter-evans/find-comment@v2

.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

README.md

@@ -448,7 +448,7 @@ Don't code but still want to contribute? Join our [discord](https://go.cal.com/d
 3. Enable the selected API.
 4. Next, go to the [OAuth consent screen](https://console.cloud.google.com/apis/credentials/consent) from the side pane. Select the app type (Internal or External) and enter the basic app details on the first page.
 5. In the second page on Scopes, select Add or Remove Scopes. Search for Calendar.event and select the scope with scope value `.../auth/calendar.events`, `.../auth/calendar.readonly` and select Update.
-6. In the third page (Test Users), add the Google account(s) you'll using. Make sure the details are correct on the last page of the wizard and your consent screen will be configured.
+6. In the third page (Test Users), add the Google account(s) you'll be using. Make sure the details are correct on the last page of the wizard and your consent screen will be configured.
 7. Now select [Credentials](https://console.cloud.google.com/apis/credentials) from the side pane and then select Create Credentials. Select the OAuth Client ID option.
 8. Select Web Application as the Application Type.
 9. Under Authorized redirect URI's, select Add URI and then add the URI `<Cal.com URL>/api/integrations/googlecalendar/callback` and `<Cal.com URL>/api/auth/callback/google` replacing Cal.com URL with the URI at which your application runs.

apps/ai/src/tools/getBookings.ts

@@ -22,6 +22,8 @@ const fetchBookings = async ({
   const params = {
     apiKey,
     userId: userId.toString(),
+    dateFrom: from,
+    dateTo: to,
   };
 
   const urlParams = new URLSearchParams(params);
@@ -40,11 +42,9 @@ const fetchBookings = async ({
 
   const bookings: Booking[] = data.bookings
     .filter((booking: Booking) => {
-      const afterFrom = new Date(booking.startTime).getTime() > new Date(from).getTime();
-      const beforeTo = new Date(booking.endTime).getTime() < new Date(to).getTime();
       const notCancelled = booking.status !== BOOKING_STATUS.CANCELLED;
 
-      return afterFrom && beforeTo && notCancelled;
+      return notCancelled;
     })
     .map(({ endTime, eventTypeId, id, startTime, status, title }: Booking) => ({
       endTime,

apps/ai/src/utils/agent.ts

@@ -13,7 +13,7 @@ import type { User, UserList } from "../types/user";
 import type { WorkingHours } from "../types/workingHours";
 import now from "./now";
 
-const gptModel = "gpt-4";
+const gptModel = "gpt-4-0613";
 
 /**
  * Core of the Cal.ai booking agent: a LangChain Agent Executor.
@@ -58,7 +58,14 @@ If you can't find a referenced user, ask the user for their email or @username.
 
 The primary user's id is: ${userId}
 The primary user's username is: ${user.username}
-The current time in the primary user's timezone is: ${now(user.timeZone)}
+The current time in the primary user's timezone is: ${now(user.timeZone, {
+        weekday: "long",
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+        hour: "numeric",
+        minute: "numeric",
+      })}
 The primary user's time zone is: ${user.timeZone}
 The primary user's event types are: ${user.eventTypes
         .map((e: EventType) => `ID: ${e.id}, Slug: ${e.slug}, Title: ${e.title}, Length: ${e.length};`)

apps/ai/src/utils/now.ts

@@ -1,5 +1,6 @@
-export default function now(timeZone: string) {
+export default function now(timeZone: string, options: Intl.DateTimeFormatOptions = {}) {
   return new Date().toLocaleString("en-US", {
     timeZone,
+    ...options,
   });
 }

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/booking.ts

@@ -18,6 +18,11 @@ const schemaBookingBaseBodyParams = Booking.pick({
 
 export const schemaBookingCreateBodyParams = extendedBookingCreateBody.merge(schemaQueryUserId.partial());
 
+export const schemaBookingGetParams = z.object({
+  dateFrom: iso8601.optional(),
+  dateTo: iso8601.optional(),
+});
+
 const schemaBookingEditParams = z
   .object({
     title: z.string().optional(),

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/lib/validations/team.ts

@@ -5,14 +5,23 @@ import { _TeamModel as Team } from "@calcom/prisma/zod";
 export const schemaTeamBaseBodyParams = Team.omit({ id: true, createdAt: true }).partial({
   hideBranding: true,
   metadata: true,
+  pendingPayment: true,
 });
 
-const schemaTeamRequiredParams = z.object({});
+const schemaTeamRequiredParams = z.object({
+  name: z.string().max(255),
+});
 
 export const schemaTeamBodyParams = schemaTeamBaseBodyParams.merge(schemaTeamRequiredParams).strict();
 
 export const schemaTeamUpdateBodyParams = schemaTeamBodyParams.partial();
 
+const schemaOwnerId = z.object({
+  ownerId: z.number().optional(),
+});
+
+export const schemaTeamCreateBodyParams = schemaTeamBodyParams.merge(schemaOwnerId).strict();
+
 export const schemaTeamReadPublic = Team.omit({});
 
 export const schemaTeamsReadPublic = z.array(schemaTeamReadPublic);

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/bookings/_get.ts

@@ -4,7 +4,7 @@ import type { NextApiRequest } from "next";
 import { HttpError } from "@calcom/lib/http-error";
 import { defaultResponder } from "@calcom/lib/server";
 
-import { schemaBookingReadPublic } from "~/lib/validations/booking";
+import { schemaBookingGetParams, schemaBookingReadPublic } from "~/lib/validations/booking";
 import { schemaQuerySingleOrMultipleAttendeeEmails } from "~/lib/validations/shared/queryAttendeeEmail";
 import { schemaQuerySingleOrMultipleUserIds } from "~/lib/validations/shared/queryUserId";
 
@@ -119,13 +119,13 @@ import { schemaQuerySingleOrMultipleUserIds } from "~/lib/validations/shared/que
  * @returns An object that represents the WHERE clause for the findMany/findUnique operation.
  */
 function buildWhereClause(
-  userId: number,
+  userId: number | null,
   attendeeEmails: string[],
   userIds: number[] = [],
   userEmails: string[] = []
 ) {
   const filterByAttendeeEmails = attendeeEmails.length > 0;
-  const userFilter = userIds.length > 0 ? { userId: { in: userIds } } : { userId };
+  const userFilter = userIds.length > 0 ? { userId: { in: userIds } } : !!userId ? { userId } : {};
   let whereClause = {};
   if (filterByAttendeeEmails) {
     whereClause = {
@@ -162,6 +162,9 @@ function buildWhereClause(
 
 async function handler(req: NextApiRequest) {
   const { userId, isAdmin, prisma } = req;
+
+  const { dateFrom, dateTo } = schemaBookingGetParams.parse(req.query);
+
   const args: Prisma.BookingFindManyArgs = {};
   args.include = {
     attendees: true,
@@ -189,7 +192,7 @@ async function handler(req: NextApiRequest) {
       const userEmails = users.map((u) => u.email);
       args.where = buildWhereClause(userId, attendeeEmails, userIds, userEmails);
     } else if (filterByAttendeeEmails) {
-      args.where = buildWhereClause(userId, attendeeEmails, [], []);
+      args.where = buildWhereClause(null, attendeeEmails, [], []);
     }
   } else {
     const user = await prisma.user.findUnique({
@@ -203,6 +206,20 @@ async function handler(req: NextApiRequest) {
     }
     args.where = buildWhereClause(userId, attendeeEmails, [], []);
   }
+
+  if (dateFrom) {
+    args.where = {
+      ...args.where,
+      startTime: { gte: dateFrom },
+    };
+  }
+  if (dateTo) {
+    args.where = {
+      ...args.where,
+      endTime: { lte: dateTo },
+    };
+  }
+
   const data = await prisma.booking.findMany(args);
   return { bookings: data.map((booking) => schemaBookingReadPublic.parse(booking)) };
 }

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/teams/_post.ts

@@ -1,12 +1,14 @@
 import type { NextApiRequest } from "next";
 
-import { IS_TEAM_BILLING_ENABLED } from "@calcom/lib/constants";
+import { getStripeCustomerIdFromUserId } from "@calcom/app-store/stripepayment/lib/customer";
+import stripe from "@calcom/app-store/stripepayment/lib/server";
+import { IS_TEAM_BILLING_ENABLED, WEBAPP_URL } from "@calcom/lib/constants";
 import { HttpError } from "@calcom/lib/http-error";
 import { defaultResponder } from "@calcom/lib/server";
 import { MembershipRole } from "@calcom/prisma/enums";
 
 import { schemaMembershipPublic } from "~/lib/validations/membership";
-import { schemaTeamBodyParams, schemaTeamReadPublic } from "~/lib/validations/team";
+import { schemaTeamCreateBodyParams, schemaTeamReadPublic } from "~/lib/validations/team";
 
 /**
  * @swagger
@@ -31,6 +33,12 @@ import { schemaTeamBodyParams, schemaTeamReadPublic } from "~/lib/validations/te
  *              required:
  *                - name
  *                - slug
+ *                - hideBookATeamMember
+ *                - brandColor
+ *                - darkBrandColor
+ *                - timeZone
+ *                - weekStart
+ *                - isPrivate
  *              properties:
  *                name:
  *                  type: string
@@ -38,6 +46,27 @@ import { schemaTeamBodyParams, schemaTeamReadPublic } from "~/lib/validations/te
  *                slug:
  *                  type: string
  *                  description: A unique slug that works as path for the team public page
+ *                hideBookATeamMember:
+ *                  type: boolean
+ *                  description: Flag to hide or show the book a team member option
+ *                brandColor:
+ *                  type: string
+ *                  description: Primary brand color for the team
+ *                darkBrandColor:
+ *                  type: string
+ *                  description: Dark variant of the primary brand color for the team
+ *                timeZone:
+ *                  type: string
+ *                  description: Time zone of the team
+ *                weekStart:
+ *                  type: string
+ *                  description: Starting day of the week for the team
+ *                isPrivate:
+ *                  type: boolean
+ *                  description: Flag indicating if the team is private
+ *                ownerId:
+ *                  type: number
+ *                  description: ID of the team owner - only admins can set this.
  *     tags:
  *     - teams
  *     responses:
@@ -49,23 +78,23 @@ import { schemaTeamBodyParams, schemaTeamReadPublic } from "~/lib/validations/te
  *        description: Authorization information is missing or invalid.
  */
 async function postHandler(req: NextApiRequest) {
-  const { prisma, body, userId } = req;
-  const data = schemaTeamBodyParams.parse(body);
+  const { prisma, body, userId, isAdmin } = req;
+  const { ownerId, ...data } = schemaTeamCreateBodyParams.parse(body);
+
+  await checkPermissions(req);
+
+  const effectiveUserId = isAdmin && ownerId ? ownerId : userId;
 
   if (data.slug) {
     const alreadyExist = await prisma.team.findFirst({
       where: {
-        slug: data.slug,
+        slug: {
+          mode: "insensitive",
+          equals: data.slug,
+        },
       },
     });
     if (alreadyExist) throw new HttpError({ statusCode: 409, message: "Team slug already exists" });
-    if (IS_TEAM_BILLING_ENABLED) {
-      // Setting slug in metadata, so it can be published later
-      data.metadata = {
-        requestedSlug: data.slug,
-      };
-      delete data.slug;
-    }
   }
 
   // Check if parentId is related to this user
@@ -87,24 +116,102 @@ async function postHandler(req: NextApiRequest) {
     ...data,
     metadata: data.metadata === null ? {} : data.metadata || undefined,
   };
-  const team = await prisma.team.create({
+
+  if (!IS_TEAM_BILLING_ENABLED) {
+    const team = await prisma.team.create({
+      data: {
+        ...cloneData,
+        members: {
+          create: { userId: effectiveUserId, role: MembershipRole.OWNER, accepted: true },
+        },
+      },
+      include: { members: true },
+    });
+
+    req.statusCode = 201;
+
+    return {
+      team: schemaTeamReadPublic.parse(team),
+      owner: schemaMembershipPublic.parse(team.members[0]),
+      message: `Team created successfully. We also made user with ID=${ownerId} the owner of this team.`,
+    };
+  }
+
+  const pendingPaymentTeam = await prisma.team.create({
     data: {
       ...cloneData,
-      createdAt: new Date(),
-      members: {
-        // We're also creating the relation membership of team ownership in this call.
-        create: { userId, role: MembershipRole.OWNER, accepted: true },
-      },
+      pendingPayment: true,
     },
-    include: { members: true },
   });
-  req.statusCode = 201;
-  // We are also returning the new ownership relation as owner besides team.
+
+  const checkoutSession = await generateTeamCheckoutSession({
+    pendingPaymentTeamId: pendingPaymentTeam.id,
+    ownerId: effectiveUserId,
+  });
+
   return {
-    team: schemaTeamReadPublic.parse(team),
-    owner: schemaMembershipPublic.parse(team.members[0]),
-    message: "Team created successfully, we also made you the owner of this team",
+    message:
+      "Your team will be created once we receive your payment. Please complete the payment using the payment link.",
+    paymentLink: checkoutSession.url,
+    pendingTeam: {
+      ...schemaTeamReadPublic.parse(pendingPaymentTeam),
+    },
   };
 }
 
+async function checkPermissions(req: NextApiRequest) {
+  const { isAdmin } = req;
+  const body = schemaTeamCreateBodyParams.parse(req.body);
+
+  /* Non-admin users can only create teams for themselves */
+  if (!isAdmin && body.ownerId)
+    throw new HttpError({
+      statusCode: 401,
+      message: "ADMIN required for `ownerId`",
+    });
+}
+
+const generateTeamCheckoutSession = async ({
+  pendingPaymentTeamId,
+  ownerId,
+}: {
+  pendingPaymentTeamId: number;
+  ownerId: number;
+}) => {
+  const customer = await getStripeCustomerIdFromUserId(ownerId);
+  const session = await stripe.checkout.sessions.create({
+    customer,
+    mode: "subscription",
+    allow_promotion_codes: true,
+    success_url: `${WEBAPP_URL}/api/teams/api/create?session_id={CHECKOUT_SESSION_ID}`,
+    cancel_url: `${WEBAPP_URL}/settings/my-account/profile`,
+    line_items: [
+      {
+        /** We only need to set the base price and we can upsell it directly on Stripe's checkout  */
+        price: process.env.STRIPE_TEAM_MONTHLY_PRICE_ID,
+        /**Initially it will be just the team owner */
+        quantity: 1,
+      },
+    ],
+    customer_update: {
+      address: "auto",
+    },
+    automatic_tax: {
+      enabled: true,
+    },
+    metadata: {
+      pendingPaymentTeamId,
+      ownerId,
+    },
+  });
+
+  if (!session.url)
+    throw new HttpError({
+      statusCode: 500,
+      message: "Failed generating a checkout session URL.",
+    });
+
+  return session;
+};
+
 export default defaultResponder(postHandler);

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/connect-and-join/page.tsx

@@ -0,0 +1,4 @@
+import LegacyPage from "@pages/connect-and-join";
+import { WithLayout } from "app/layoutHOC";
+
+export default WithLayout({ getLayout: null, Page: LegacyPage })<"P">;

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

@@ -0,0 +1,12 @@
+import { type PageProps } from "@pages/org/[orgSlug]/[user]/[type]";
+import Page from "@pages/org/[orgSlug]/[user]/[type]/embed";
+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 = 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

@@ -0,0 +1,9 @@
+import Page, { type PageProps } from "@pages/org/[orgSlug]/[user]/[type]";
+import { withAppDirSsr } from "app/WithAppDirSsr";
+import { WithLayout } from "app/layoutHOC";
+
+import { getServerSideProps } from "@lib/org/[orgSlug]/[user]/[type]/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

@@ -0,0 +1,11 @@
+import { getServerSideProps, type PageProps } from "@pages/org/[orgSlug]/[user]";
+import Page from "@pages/org/[orgSlug]/[user]/embed";
+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, isBookingPage: true, Page });

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

@@ -0,0 +1,7 @@
+import Page, { getServerSideProps, type PageProps } from "@pages/org/[orgSlug]/[user]";
+import { withAppDirSsr } from "app/WithAppDirSsr";
+import { WithLayout } from "app/layoutHOC";
+
+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,21 +9,35 @@ 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;
 };
 
-export function WithLayout<T extends Record<string, any>>({ getLayout, getData, Page }: WithLayoutParams<T>) {
+export function WithLayout<T extends Record<string, any>>({
+  getLayout,
+  getData,
+  Page,
+  isBookingPage,
+}: WithLayoutParams<T>) {
   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;
 
     return (
-      <PageWrapper getLayout={getLayout} requiresLicense={false} nonce={nonce} themeBasis={null} {...props}>
+      <PageWrapper
+        getLayout={getLayout}
+        requiresLicense={false}
+        nonce={nonce}
+        themeBasis={null}
+        isBookingPage={isBookingPage}
+        {...props}>
         {Page ? <Page {...props} /> : children}
       </PageWrapper>
     );