chore: [app-router-migration 28] Migrate org/[orgSlug]/[user] page group (#13100)

## What does this PR do?  Fixes # (issue)  ## Requirement/Documentation  - If there is a requirement document, please, share it here. - If there is ab UI/UX design document, please, share it here. ## Type of change  - Bug fix (non-breaking change which fixes an issue) - Chore (refactoring code, technical debt, workflow improvements) - New feature (non-breaking change which adds functionality) - Breaking change (fix or feature that would cause existing functionality to not work as expected) - Tests (Unit/Integration/E2E or any other test) - This change requires a documentation update ## How should this be tested?  - Are there environment variables that should be set? - What are the minimal test data to have? - What is expected (happy path) to have (input and output)? - Any other important info that could help to test that PR ## Mandatory Tasks - [ ] Make sure you have self-reviewed the code. A decent size PR without self-review might be rejected. ## Checklist  - I haven't read the [contributing guide](https://github.com/calcom/cal.com/blob/main/CONTRIBUTING.md) - My code doesn't follow the style guidelines of this project - I haven't commented my code, particularly in hard-to-understand areas - I haven't checked if my PR needs changes to the documentation - I haven't checked if my changes generate no new warnings - I haven't added tests that prove my fix is effective or that my feature works - I haven't checked if new and existing unit tests pass locally with my changes
2024-01-16 13:17:58 -07:00
parent 7b8902a769
commit e99e8b169a
15 changed files with 471 additions and 400 deletions
@@ -0,0 +1,9 @@
+import Page from "@pages/org/[orgSlug]/[user]/[type]/embed";
+import withEmbedSsrAppDir from "app/WithEmbedSSR";
+import { WithLayout } from "app/layoutHOC";
+
+import { getData } from "../page";
+
+const getEmbedData = withEmbedSsrAppDir(getData);
+
+export default WithLayout({ getLayout: null, getData: getEmbedData, isBookingPage: true, Page });
@@ -0,0 +1,9 @@
+import Page, { type PageProps } from "@pages/org/[orgSlug]/[user]/[type]";
+import { withAppDir } from "app/AppDirSSRHOC";
+import { WithLayout } from "app/layoutHOC";
+
+import { getServerSideProps } from "@lib/org/[orgSlug]/[user]/[type]/getServerSideProps";
+
+export const getData = withAppDir<PageProps>(getServerSideProps);
+
+export default WithLayout({ getLayout: null, getData, isBookingPage: true, Page });
@@ -0,0 +1,9 @@
+import Page from "@pages/org/[orgSlug]/[user]/embed";
+import withEmbedSsrAppDir from "app/WithEmbedSSR";
+import { WithLayout } from "app/layoutHOC";
+
+import { getData } from "../page";
+
+const getEmbedData = withEmbedSsrAppDir(getData);
+
+export default WithLayout({ getLayout: null, getData: getEmbedData, isBookingPage: true, Page });
@@ -0,0 +1,7 @@
+import Page, { getServerSideProps, type PageProps } from "@pages/org/[orgSlug]/[user]";
+import { withAppDir } from "app/AppDirSSRHOC";
+import { WithLayout } from "app/layoutHOC";
+
+export const getData = withAppDir<PageProps>(getServerSideProps);
+
+export default WithLayout({ getLayout: null, getData, isBookingPage: true, Page });
@@ -10,9 +10,15 @@ 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>;
+  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;
@@ -23,7 +29,13 @@ export function WithLayout<T extends Record<string, any>>({ getLayout, getData,
    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>
    );
@@ -0,0 +1,213 @@
+import { type GetServerSidePropsContext } from "next";
+import { z } from "zod";
+
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+import { handleTypeRedirection } from "@calcom/features/booking-redirect/handle-type";
+import { getBookingForReschedule, getBookingForSeatedEvent } from "@calcom/features/bookings/lib/get-booking";
+import type { GetBookingType } from "@calcom/features/bookings/lib/get-booking";
+import { orgDomainConfig, userOrgQuery } from "@calcom/features/ee/organizations/lib/orgDomains";
+import { getUsernameList } from "@calcom/lib/defaultEvents";
+import slugify from "@calcom/lib/slugify";
+import prisma from "@calcom/prisma";
+import { RedirectType } from "@calcom/prisma/client";
+
+import { getTemporaryOrgRedirect } from "@lib/getTemporaryOrgRedirect";
+
+async function getDynamicGroupPageProps(context: GetServerSidePropsContext) {
+  const session = await getServerSession(context);
+  const { user: usernames, type: slug } = paramsSchema.parse(context.params);
+  const { rescheduleUid, bookingUid } = context.query;
+
+  const { ssrInit } = await import("@server/lib/ssr");
+  const ssr = await ssrInit(context);
+  const { currentOrgDomain, isValidOrgDomain } = orgDomainConfig(context.req, context.params?.orgSlug);
+  const org = isValidOrgDomain ? currentOrgDomain : null;
+  if (!org) {
+    const redirect = await getTemporaryOrgRedirect({
+      slugs: usernames,
+      redirectType: RedirectType.User,
+      eventTypeSlug: slug,
+      currentQuery: context.query,
+    });
+
+    if (redirect) {
+      return redirect;
+    }
+  }
+
+  const users = await prisma.user.findMany({
+    where: {
+      username: {
+        in: usernames,
+      },
+      organization: isValidOrgDomain
+        ? {
+            slug: currentOrgDomain,
+          }
+        : null,
+    },
+    select: {
+      allowDynamicBooking: true,
+    },
+  });
+
+  if (!users.length) {
+    return {
+      notFound: true,
+    } as const;
+  }
+
+  let booking: GetBookingType | null = null;
+  if (rescheduleUid) {
+    booking = await getBookingForReschedule(`${rescheduleUid}`, session?.user?.id);
+  } else if (bookingUid) {
+    booking = await getBookingForSeatedEvent(`${bookingUid}`);
+  }
+
+  // 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: usernames.join("+"),
+    eventSlug: slug,
+    org,
+  });
+
+  if (!eventData) {
+    return {
+      notFound: true,
+    } as const;
+  }
+
+  return {
+    props: {
+      eventData: {
+        entity: eventData.entity,
+        length: eventData.length,
+        metadata: {
+          ...eventData.metadata,
+          multipleDuration: [15, 30, 60],
+        },
+      },
+      booking,
+      user: usernames.join("+"),
+      slug,
+      away: false,
+      trpcState: ssr.dehydrate(),
+      isBrandingHidden: false,
+      isSEOIndexable: true,
+      themeBasis: null,
+      bookingUid: bookingUid ? `${bookingUid}` : null,
+      rescheduleUid: rescheduleUid ? `${rescheduleUid}` : null,
+    },
+  };
+}
+
+async function getUserPageProps(context: GetServerSidePropsContext) {
+  const session = await getServerSession(context);
+  const { user: usernames, type: slug } = paramsSchema.parse(context.params);
+  const username = usernames[0];
+  const { rescheduleUid, bookingUid } = context.query;
+  const { currentOrgDomain, isValidOrgDomain } = orgDomainConfig(context.req, context.params?.orgSlug);
+  let outOfOffice = false;
+  const isOrgContext = currentOrgDomain && isValidOrgDomain;
+  if (!isOrgContext) {
+    const redirect = await getTemporaryOrgRedirect({
+      slugs: usernames,
+      redirectType: RedirectType.User,
+      eventTypeSlug: slug,
+      currentQuery: context.query,
+    });
+
+    if (redirect) {
+      return redirect;
+    }
+  }
+
+  const { ssrInit } = await import("@server/lib/ssr");
+  const ssr = await ssrInit(context);
+  const user = await prisma.user.findFirst({
+    where: {
+      username,
+      organization: userOrgQuery(context.req, context.params?.orgSlug),
+    },
+    select: {
+      id: true,
+      hideBranding: true,
+      allowSEOIndexing: true,
+    },
+  });
+
+  if (!user) {
+    return {
+      notFound: true,
+    } as const;
+  }
+  // If user is found, quickly verify bookingRedirects
+  const result = await handleTypeRedirection({
+    userId: user.id,
+    username,
+    slug,
+  });
+  if (result && result.outOfOffice) {
+    outOfOffice = true;
+  }
+  if (result && result.redirect?.destination) {
+    return result;
+  }
+
+  let booking: GetBookingType | null = null;
+  if (rescheduleUid) {
+    booking = await getBookingForReschedule(`${rescheduleUid}`, session?.user?.id);
+  } else if (bookingUid) {
+    booking = await getBookingForSeatedEvent(`${bookingUid}`);
+  }
+
+  const org = isValidOrgDomain ? currentOrgDomain : null;
+  // We use this to both prefetch the query on the server,
+  // as well as to check if the event exist, so we can show a 404 otherwise.
+  const eventData = await ssr.viewer.public.event.fetch({
+    username,
+    eventSlug: slug,
+    org,
+  });
+
+  if (!eventData) {
+    return {
+      notFound: true,
+    } as const;
+  }
+
+  return {
+    props: {
+      booking,
+      eventData: {
+        entity: eventData.entity,
+        length: eventData.length,
+        metadata: eventData.metadata,
+      },
+      away: outOfOffice,
+      user: username,
+      slug,
+      trpcState: ssr.dehydrate(),
+      isBrandingHidden: user?.hideBranding,
+      isSEOIndexable: user?.allowSEOIndexing,
+      themeBasis: username,
+      bookingUid: bookingUid ? `${bookingUid}` : null,
+      rescheduleUid: rescheduleUid ? `${rescheduleUid}` : null,
+    },
+  };
+}
+
+const paramsSchema = z.object({
+  type: z.string().transform((s) => slugify(s)),
+  user: z.string().transform((s) => getUsernameList(s)),
+});
+
+// Booker page fetches a tiny bit of data server side, to determine early
+// whether the page should show an away state or dynamic booking not allowed.
+export const getServerSideProps = async (context: GetServerSidePropsContext) => {
+  const { user } = paramsSchema.parse(context.params);
+  const isDynamicGroup = user.length > 1;
+
+  return isDynamicGroup ? await getDynamicGroupPageProps(context) : await getUserPageProps(context);
+};
@@ -0,0 +1,58 @@
+import type { GetServerSidePropsContext } from "next";
+import z from "zod";
+
+import { getSlugOrRequestedSlug } from "@calcom/features/ee/organizations/lib/orgDomains";
+import slugify from "@calcom/lib/slugify";
+import prisma from "@calcom/prisma";
+
+import { getServerSideProps as GSSUserTypePage } from "@lib/[user]/[type]/getServerSideProps";
+import { getServerSideProps as GSSTeamTypePage } from "@lib/team/[slug]/[type]/getServerSideProps";
+
+const paramsSchema = z.object({
+  orgSlug: z.string().transform((s) => slugify(s)),
+  user: z.string(),
+  type: z.string().transform((s) => slugify(s)),
+});
+
+export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
+  const { user: teamOrUserSlugOrDynamicGroup, orgSlug, type } = paramsSchema.parse(ctx.params);
+  const team = await prisma.team.findFirst({
+    where: {
+      slug: slugify(teamOrUserSlugOrDynamicGroup),
+      parentId: {
+        not: null,
+      },
+      parent: getSlugOrRequestedSlug(orgSlug),
+    },
+    select: {
+      id: true,
+    },
+  });
+
+  if (team) {
+    const params = { slug: teamOrUserSlugOrDynamicGroup, type };
+    return GSSTeamTypePage({
+      ...ctx,
+      params: {
+        ...ctx.params,
+        ...params,
+      },
+      query: {
+        ...ctx.query,
+        ...params,
+      },
+    });
+  }
+  const params = { user: teamOrUserSlugOrDynamicGroup, type };
+  return GSSUserTypePage({
+    ...ctx,
+    params: {
+      ...ctx.params,
+      ...params,
+    },
+    query: {
+      ...ctx.query,
+      ...params,
+    },
+  });
+};
@@ -0,0 +1,25 @@
+import { getServerSideProps as GSSUserPage } from "@pages/[user]";
+import { getServerSideProps as GSSTeamPage } from "@pages/team/[slug]";
+import type { GetServerSidePropsContext } from "next";
+
+import { getSlugOrRequestedSlug } from "@calcom/features/ee/organizations/lib/orgDomains";
+import prisma from "@calcom/prisma";
+
+export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
+  const team = await prisma.team.findFirst({
+    where: {
+      slug: ctx.query.user as string,
+      parentId: {
+        not: null,
+      },
+      parent: getSlugOrRequestedSlug(ctx.query.orgSlug as string),
+    },
+    select: {
+      id: true,
+    },
+  });
+  if (team) {
+    return GSSTeamPage({ ...ctx, query: { slug: ctx.query.user } });
+  }
+  return GSSUserPage({ ...ctx, query: { user: ctx.query.user, redirect: ctx.query.redirect } });
+};
@@ -0,0 +1,102 @@
+import type { GetServerSidePropsContext } from "next";
+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 { getSlugOrRequestedSlug } from "@calcom/features/ee/organizations/lib/orgDomains";
+import { orgDomainConfig } from "@calcom/features/ee/organizations/lib/orgDomains";
+import slugify from "@calcom/lib/slugify";
+import prisma from "@calcom/prisma";
+import { RedirectType } from "@calcom/prisma/client";
+
+import { getTemporaryOrgRedirect } from "@lib/getTemporaryOrgRedirect";
+
+const paramsSchema = z.object({
+  type: z.string().transform((s) => slugify(s)),
+  slug: z.string().transform((s) => slugify(s)),
+});
+
+// Booker page fetches a tiny bit of data server side:
+// 1. Check if team exists, to show 404
+// 2. If rescheduling, get the booking details
+export const getServerSideProps = async (context: GetServerSidePropsContext) => {
+  const session = await getServerSession(context);
+  const { slug: teamSlug, type: meetingSlug } = paramsSchema.parse(context.params);
+  const { rescheduleUid, duration: queryDuration, isInstantMeeting: queryIsInstantMeeting } = context.query;
+  const { ssrInit } = await import("@server/lib/ssr");
+  const ssr = await ssrInit(context);
+  const { currentOrgDomain, isValidOrgDomain } = orgDomainConfig(context.req, context.params?.orgSlug);
+  const isOrgContext = currentOrgDomain && isValidOrgDomain;
+
+  if (!isOrgContext) {
+    const redirect = await getTemporaryOrgRedirect({
+      slugs: teamSlug,
+      redirectType: RedirectType.Team,
+      eventTypeSlug: meetingSlug,
+      currentQuery: context.query,
+    });
+
+    if (redirect) {
+      return redirect;
+    }
+  }
+
+  const team = await prisma.team.findFirst({
+    where: {
+      ...getSlugOrRequestedSlug(teamSlug),
+      parent: isValidOrgDomain && currentOrgDomain ? getSlugOrRequestedSlug(currentOrgDomain) : null,
+    },
+    select: {
+      id: true,
+      hideBranding: true,
+    },
+  });
+
+  if (!team) {
+    return {
+      notFound: true,
+    } as const;
+  }
+
+  let booking: GetBookingType | null = null;
+  if (rescheduleUid) {
+    booking = await getBookingForReschedule(`${rescheduleUid}`, session?.user?.id);
+  }
+
+  const org = isValidOrgDomain ? currentOrgDomain : null;
+  // 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: teamSlug,
+    eventSlug: meetingSlug,
+    isTeamEvent: true,
+    org,
+  });
+
+  if (!eventData) {
+    return {
+      notFound: true,
+    } as const;
+  }
+
+  return {
+    props: {
+      entity: eventData.entity,
+      duration: getMultipleDurationValue(
+        eventData.metadata?.multipleDuration,
+        queryDuration,
+        eventData.length
+      ),
+      booking,
+      away: false,
+      user: teamSlug,
+      teamId: team.id,
+      slug: meetingSlug,
+      trpcState: ssr.dehydrate(),
+      isBrandingHidden: team?.hideBranding,
+      isInstantMeeting: eventData.isInstantEvent && queryIsInstantMeeting ? true : false,
+      themeBasis: null,
+    },
+  };
+};
@@ -1,28 +1,19 @@
-import type { GetServerSidePropsContext } from "next";
+"use client";
+
 import { useSearchParams } from "next/navigation";
-import { z } from "zod";

 import { Booker } from "@calcom/atoms";
-import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
-import { handleTypeRedirection } from "@calcom/features/booking-redirect/handle-type";
 import { getBookerWrapperClasses } from "@calcom/features/bookings/Booker/utils/getBookerWrapperClasses";
 import { BookerSeo } from "@calcom/features/bookings/components/BookerSeo";
-import { getBookingForReschedule, getBookingForSeatedEvent } from "@calcom/features/bookings/lib/get-booking";
-import type { GetBookingType } from "@calcom/features/bookings/lib/get-booking";
-import { orgDomainConfig, userOrgQuery } from "@calcom/features/ee/organizations/lib/orgDomains";
-import { getUsernameList } from "@calcom/lib/defaultEvents";
-import slugify from "@calcom/lib/slugify";
-import prisma from "@calcom/prisma";
-import { RedirectType } from "@calcom/prisma/client";

+import { getServerSideProps } from "@lib/[user]/[type]/getServerSideProps";
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
 import type { EmbedProps } from "@lib/withEmbedSsr";

 import PageWrapper from "@components/PageWrapper";

-import { getTemporaryOrgRedirect } from "../../lib/getTemporaryOrgRedirect";
-
-export type PageProps = inferSSRProps<typeof getServerSideProps> & EmbedProps;
+export type PageProps = Omit<inferSSRProps<typeof getServerSideProps>, "trpcState"> & EmbedProps;
+export { getServerSideProps };

 export const getMultipleDurationValue = (
  multipleDurationConfig: number[] | undefined,
@@ -81,202 +72,3 @@ export default function Type({

 Type.isBookingPage = true;
 Type.PageWrapper = PageWrapper;
-
-async function getDynamicGroupPageProps(context: GetServerSidePropsContext) {
-  const session = await getServerSession(context);
-  const { user: usernames, type: slug } = paramsSchema.parse(context.params);
-  const { rescheduleUid, bookingUid } = context.query;
-
-  const { ssrInit } = await import("@server/lib/ssr");
-  const ssr = await ssrInit(context);
-  const { currentOrgDomain, isValidOrgDomain } = orgDomainConfig(context.req, context.params?.orgSlug);
-  const org = isValidOrgDomain ? currentOrgDomain : null;
-  if (!org) {
-    const redirect = await getTemporaryOrgRedirect({
-      slugs: usernames,
-      redirectType: RedirectType.User,
-      eventTypeSlug: slug,
-      currentQuery: context.query,
-    });
-
-    if (redirect) {
-      return redirect;
-    }
-  }
-
-  const users = await prisma.user.findMany({
-    where: {
-      username: {
-        in: usernames,
-      },
-      organization: isValidOrgDomain
-        ? {
-            slug: currentOrgDomain,
-          }
-        : null,
-    },
-    select: {
-      allowDynamicBooking: true,
-    },
-  });
-
-  if (!users.length) {
-    return {
-      notFound: true,
-    } as const;
-  }
-
-  let booking: GetBookingType | null = null;
-  if (rescheduleUid) {
-    booking = await getBookingForReschedule(`${rescheduleUid}`, session?.user?.id);
-  } else if (bookingUid) {
-    booking = await getBookingForSeatedEvent(`${bookingUid}`);
-  }
-
-  // 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: usernames.join("+"),
-    eventSlug: slug,
-    org,
-  });
-
-  if (!eventData) {
-    return {
-      notFound: true,
-    } as const;
-  }
-
-  return {
-    props: {
-      eventData: {
-        entity: eventData.entity,
-        length: eventData.length,
-        metadata: {
-          ...eventData.metadata,
-          multipleDuration: [15, 30, 60],
-        },
-      },
-      booking,
-      user: usernames.join("+"),
-      slug,
-      away: false,
-      trpcState: ssr.dehydrate(),
-      isBrandingHidden: false,
-      isSEOIndexable: true,
-      themeBasis: null,
-      bookingUid: bookingUid ? `${bookingUid}` : null,
-      rescheduleUid: rescheduleUid ? `${rescheduleUid}` : null,
-    },
-  };
-}
-
-async function getUserPageProps(context: GetServerSidePropsContext) {
-  const session = await getServerSession(context);
-  const { user: usernames, type: slug } = paramsSchema.parse(context.params);
-  const username = usernames[0];
-  const { rescheduleUid, bookingUid } = context.query;
-  const { currentOrgDomain, isValidOrgDomain } = orgDomainConfig(context.req, context.params?.orgSlug);
-  let outOfOffice = false;
-  const isOrgContext = currentOrgDomain && isValidOrgDomain;
-  if (!isOrgContext) {
-    const redirect = await getTemporaryOrgRedirect({
-      slugs: usernames,
-      redirectType: RedirectType.User,
-      eventTypeSlug: slug,
-      currentQuery: context.query,
-    });
-
-    if (redirect) {
-      return redirect;
-    }
-  }
-
-  const { ssrInit } = await import("@server/lib/ssr");
-  const ssr = await ssrInit(context);
-  const user = await prisma.user.findFirst({
-    where: {
-      username,
-      organization: userOrgQuery(context.req, context.params?.orgSlug),
-    },
-    select: {
-      id: true,
-      hideBranding: true,
-      allowSEOIndexing: true,
-    },
-  });
-
-  if (!user) {
-    return {
-      notFound: true,
-    } as const;
-  }
-  // If user is found, quickly verify bookingRedirects
-  const result = await handleTypeRedirection({
-    userId: user.id,
-    username,
-    slug,
-  });
-  if (result && result.outOfOffice) {
-    outOfOffice = true;
-  }
-  if (result && result.redirect?.destination) {
-    return result;
-  }
-
-  let booking: GetBookingType | null = null;
-  if (rescheduleUid) {
-    booking = await getBookingForReschedule(`${rescheduleUid}`, session?.user?.id);
-  } else if (bookingUid) {
-    booking = await getBookingForSeatedEvent(`${bookingUid}`);
-  }
-
-  const org = isValidOrgDomain ? currentOrgDomain : null;
-  // We use this to both prefetch the query on the server,
-  // as well as to check if the event exist, so we can show a 404 otherwise.
-  const eventData = await ssr.viewer.public.event.fetch({
-    username,
-    eventSlug: slug,
-    org,
-  });
-
-  if (!eventData) {
-    return {
-      notFound: true,
-    } as const;
-  }
-
-  return {
-    props: {
-      booking,
-      eventData: {
-        entity: eventData.entity,
-        length: eventData.length,
-        metadata: eventData.metadata,
-      },
-      away: outOfOffice,
-      user: username,
-      slug,
-      trpcState: ssr.dehydrate(),
-      isBrandingHidden: user?.hideBranding,
-      isSEOIndexable: user?.allowSEOIndexing,
-      themeBasis: username,
-      bookingUid: bookingUid ? `${bookingUid}` : null,
-      rescheduleUid: rescheduleUid ? `${rescheduleUid}` : null,
-    },
-  };
-}
-
-const paramsSchema = z.object({
-  type: z.string().transform((s) => slugify(s)),
-  user: z.string().transform((s) => getUsernameList(s)),
-});
-
-// Booker page fetches a tiny bit of data server side, to determine early
-// whether the page should show an away state or dynamic booking not allowed.
-export const getServerSideProps = async (context: GetServerSidePropsContext) => {
-  const { user } = paramsSchema.parse(context.params);
-  const isDynamicGroup = user.length > 1;
-
-  return isDynamicGroup ? await getDynamicGroupPageProps(context) : await getUserPageProps(context);
-};
@@ -1,69 +1,17 @@
-import type { GetServerSidePropsContext } from "next";
-import z from "zod";
-
-import { getSlugOrRequestedSlug } from "@calcom/features/ee/organizations/lib/orgDomains";
-import slugify from "@calcom/lib/slugify";
-import prisma from "@calcom/prisma";
+"use client";

 import PageWrapper from "@components/PageWrapper";

 import type { PageProps as UserTypePageProps } from "../../../[user]/[type]";
-import UserTypePage, { getServerSideProps as GSSUserTypePage } from "../../../[user]/[type]";
+import UserTypePage from "../../../[user]/[type]";
 import type { PageProps as TeamTypePageProps } from "../../../team/[slug]/[type]";
-import TeamTypePage, { getServerSideProps as GSSTeamTypePage } from "../../../team/[slug]/[type]";
+import TeamTypePage from "../../../team/[slug]/[type]";

-const paramsSchema = z.object({
-  orgSlug: z.string().transform((s) => slugify(s)),
-  user: z.string(),
-  type: z.string().transform((s) => slugify(s)),
-});
+export { getServerSideProps } from "@lib/org/[orgSlug]/[user]/[type]/getServerSideProps";

-export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
-  const { user: teamOrUserSlugOrDynamicGroup, orgSlug, type } = paramsSchema.parse(ctx.params);
-  const team = await prisma.team.findFirst({
-    where: {
-      slug: slugify(teamOrUserSlugOrDynamicGroup),
-      parentId: {
-        not: null,
-      },
-      parent: getSlugOrRequestedSlug(orgSlug),
-    },
-    select: {
-      id: true,
-    },
-  });
+export type PageProps = UserTypePageProps | TeamTypePageProps;

-  if (team) {
-    const params = { slug: teamOrUserSlugOrDynamicGroup, type };
-    return GSSTeamTypePage({
-      ...ctx,
-      params: {
-        ...ctx.params,
-        ...params,
-      },
-      query: {
-        ...ctx.query,
-        ...params,
-      },
-    });
-  }
-  const params = { user: teamOrUserSlugOrDynamicGroup, type };
-  return GSSUserTypePage({
-    ...ctx,
-    params: {
-      ...ctx.params,
-      ...params,
-    },
-    query: {
-      ...ctx.query,
-      ...params,
-    },
-  });
-};
-
-type Props = UserTypePageProps | TeamTypePageProps;
-
-export default function Page(props: Props) {
+export default function Page(props: PageProps) {
  if ((props as TeamTypePageProps)?.teamId) return <TeamTypePage {...(props as TeamTypePageProps)} />;
  return <UserTypePage {...(props as UserTypePageProps)} />;
 }
@@ -1,3 +1,5 @@
+"use client";
+
 import withEmbedSsr from "@lib/withEmbedSsr";

 import { getServerSideProps as _getServerSideProps } from "../[type]";
@@ -1,3 +1,5 @@
+"use client";
+
 import withEmbedSsr from "@lib/withEmbedSsr";

 import { getServerSideProps as _getServerSideProps } from "../[user]";
@@ -1,37 +1,17 @@
-import type { GetServerSidePropsContext } from "next";
-
-import { getSlugOrRequestedSlug } from "@calcom/features/ee/organizations/lib/orgDomains";
-import prisma from "@calcom/prisma";
+"use client";

 import PageWrapper from "@components/PageWrapper";

 import type { UserPageProps } from "../../../[user]";
-import UserPage, { getServerSideProps as GSSUserPage } from "../../../[user]";
+import UserPage from "../../../[user]";
 import type { PageProps as TeamPageProps } from "../../../team/[slug]";
-import TeamPage, { getServerSideProps as GSSTeamPage } from "../../../team/[slug]";
+import TeamPage from "../../../team/[slug]";

-export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
-  const team = await prisma.team.findFirst({
-    where: {
-      slug: ctx.query.user as string,
-      parentId: {
-        not: null,
-      },
-      parent: getSlugOrRequestedSlug(ctx.query.orgSlug as string),
-    },
-    select: {
-      id: true,
-    },
-  });
-  if (team) {
-    return GSSTeamPage({ ...ctx, query: { slug: ctx.query.user } });
-  }
-  return GSSUserPage({ ...ctx, query: { user: ctx.query.user, redirect: ctx.query.redirect } });
-};
+export { getServerSideProps } from "@lib/org/[orgSlug]/[user]/getServerSideProps";

-type Props = UserPageProps | TeamPageProps;
+export type PageProps = UserPageProps | TeamPageProps;

-export default function Page(props: Props) {
+export default function Page(props: PageProps) {
  if ((props as TeamPageProps)?.team) return <TeamPage {...(props as TeamPageProps)} />;
  return <UserPage {...(props as UserPageProps)} />;
 }
@@ -1,27 +1,19 @@
-import type { GetServerSidePropsContext } from "next";
-import { z } from "zod";
+"use client";

 import { Booker } from "@calcom/atoms";
-import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import { getBookerWrapperClasses } from "@calcom/features/bookings/Booker/utils/getBookerWrapperClasses";
 import { BookerSeo } from "@calcom/features/bookings/components/BookerSeo";
-import { getBookingForReschedule, getMultipleDurationValue } from "@calcom/features/bookings/lib/get-booking";
-import type { GetBookingType } from "@calcom/features/bookings/lib/get-booking";
-import { getSlugOrRequestedSlug } from "@calcom/features/ee/organizations/lib/orgDomains";
-import { orgDomainConfig } from "@calcom/features/ee/organizations/lib/orgDomains";
-import slugify from "@calcom/lib/slugify";
-import prisma from "@calcom/prisma";
-import { RedirectType } from "@calcom/prisma/client";

+import { getServerSideProps } from "@lib/team/[slug]/[type]/getServerSideProps";
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
 import type { EmbedProps } from "@lib/withEmbedSsr";

 import PageWrapper from "@components/PageWrapper";

-import { getTemporaryOrgRedirect } from "../../../lib/getTemporaryOrgRedirect";
-
 export type PageProps = inferSSRProps<typeof getServerSideProps> & EmbedProps;

+export { getServerSideProps };
+
 export default function Type({
  slug,
  user,
@@ -61,92 +53,3 @@ export default function Type({

 Type.PageWrapper = PageWrapper;
 Type.isBookingPage = true;
-
-const paramsSchema = z.object({
-  type: z.string().transform((s) => slugify(s)),
-  slug: z.string().transform((s) => slugify(s)),
-});
-
-// Booker page fetches a tiny bit of data server side:
-// 1. Check if team exists, to show 404
-// 2. If rescheduling, get the booking details
-export const getServerSideProps = async (context: GetServerSidePropsContext) => {
-  const session = await getServerSession(context);
-  const { slug: teamSlug, type: meetingSlug } = paramsSchema.parse(context.params);
-  const { rescheduleUid, duration: queryDuration, isInstantMeeting: queryIsInstantMeeting } = context.query;
-  const { ssrInit } = await import("@server/lib/ssr");
-  const ssr = await ssrInit(context);
-  const { currentOrgDomain, isValidOrgDomain } = orgDomainConfig(context.req, context.params?.orgSlug);
-  const isOrgContext = currentOrgDomain && isValidOrgDomain;
-
-  if (!isOrgContext) {
-    const redirect = await getTemporaryOrgRedirect({
-      slugs: teamSlug,
-      redirectType: RedirectType.Team,
-      eventTypeSlug: meetingSlug,
-      currentQuery: context.query,
-    });
-
-    if (redirect) {
-      return redirect;
-    }
-  }
-
-  const team = await prisma.team.findFirst({
-    where: {
-      ...getSlugOrRequestedSlug(teamSlug),
-      parent: isValidOrgDomain && currentOrgDomain ? getSlugOrRequestedSlug(currentOrgDomain) : null,
-    },
-    select: {
-      id: true,
-      hideBranding: true,
-    },
-  });
-
-  if (!team) {
-    return {
-      notFound: true,
-    } as const;
-  }
-
-  let booking: GetBookingType | null = null;
-  if (rescheduleUid) {
-    booking = await getBookingForReschedule(`${rescheduleUid}`, session?.user?.id);
-  }
-
-  const org = isValidOrgDomain ? currentOrgDomain : null;
-  // 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: teamSlug,
-    eventSlug: meetingSlug,
-    isTeamEvent: true,
-    org,
-  });
-
-  if (!eventData) {
-    return {
-      notFound: true,
-    } as const;
-  }
-
-  return {
-    props: {
-      entity: eventData.entity,
-      duration: getMultipleDurationValue(
-        eventData.metadata?.multipleDuration,
-        queryDuration,
-        eventData.length
-      ),
-      booking,
-      away: false,
-      user: teamSlug,
-      teamId: team.id,
-      slug: meetingSlug,
-      trpcState: ssr.dehydrate(),
-      isBrandingHidden: team?.hideBranding,
-      isInstantMeeting: eventData.isInstantEvent && queryIsInstantMeeting ? true : false,
-      themeBasis: null,
-    },
-  };
-};