From aba7c6df7f9adf776afff0dc1601b7ff9d86e349 Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Sun, 23 Feb 2025 04:13:11 -0500
Subject: [PATCH] perf: move all booking pages into (booking-page-wrapper)
 route group (#19321)

* update useIsBookingPage

* move team pages into use-page-wrapper route group

* update imports

* fix type check

* update

* update

* remove isBookingPage configure from booking client components

* move all booking pages to use-page-wrapper route group

* add checkIfBookingPage util

* update layout

* update AppProviders

* improve comments

* update

* update pagesAndRewritePaths logic

* refactor
---
 .../[user]/[type]/page.tsx                    |  0
 .../[user]/page.tsx                           |  0
 .../web/app/(booking-page-wrapper)/layout.tsx | 25 +++++++++++++++++++
 .../org/[orgSlug]/[user]/[type]/page.tsx      |  6 ++---
 .../org/[orgSlug]/[user]/page.tsx             |  6 ++---
 .../team/[slug]/[type]/page.tsx               |  9 +++++--
 .../org/[orgSlug]/page.tsx                    |  4 +++
 .../org/[orgSlug]/team/[slug]/[type]/page.tsx |  4 +++
 .../org/[orgSlug]/team/[slug]/page.tsx        |  4 +++
 .../team/[slug]/[type]/page.tsx               | 12 ++++-----
 .../team/[slug]/page.tsx                      | 12 ++++-----
 apps/web/app/(use-page-wrapper)/layout.tsx    |  1 +
 .../[orgSlug]/[user]/[type]/embed/page.tsx    |  2 +-
 .../org/[orgSlug]/[user]/embed/page.tsx       |  2 +-
 apps/web/app/org/[orgSlug]/page.tsx           |  4 ---
 .../org/[orgSlug]/team/[slug]/[type]/page.tsx |  4 ---
 .../app/org/[orgSlug]/team/[slug]/page.tsx    |  4 ---
 apps/web/lib/app-providers-app-dir.tsx        |  2 +-
 apps/web/modules/team/team-view.tsx           |  2 --
 .../modules/users/views/users-public-view.tsx |  2 +-
 .../users/views/users-type-public-view.tsx    |  2 --
 apps/web/pagesAndRewritePaths.js              | 14 ++++++++---
 22 files changed, 75 insertions(+), 46 deletions(-)
 rename apps/web/app/{(use-page-wrapper) => (booking-page-wrapper)}/[user]/[type]/page.tsx (100%)
 rename apps/web/app/{(use-page-wrapper) => (booking-page-wrapper)}/[user]/page.tsx (100%)
 create mode 100644 apps/web/app/(booking-page-wrapper)/layout.tsx
 rename apps/web/app/{ => (booking-page-wrapper)}/org/[orgSlug]/[user]/[type]/page.tsx (92%)
 rename apps/web/app/{ => (booking-page-wrapper)}/org/[orgSlug]/[user]/page.tsx (93%)
 rename apps/web/app/{ => (booking-page-wrapper)}/org/[orgSlug]/instant-meeting/team/[slug]/[type]/page.tsx (89%)
 create mode 100644 apps/web/app/(booking-page-wrapper)/org/[orgSlug]/page.tsx
 create mode 100644 apps/web/app/(booking-page-wrapper)/org/[orgSlug]/team/[slug]/[type]/page.tsx
 create mode 100644 apps/web/app/(booking-page-wrapper)/org/[orgSlug]/team/[slug]/page.tsx
 rename apps/web/app/{ => (booking-page-wrapper)}/team/[slug]/[type]/page.tsx (89%)
 rename apps/web/app/{ => (booking-page-wrapper)}/team/[slug]/page.tsx (86%)
 delete mode 100644 apps/web/app/org/[orgSlug]/page.tsx
 delete mode 100644 apps/web/app/org/[orgSlug]/team/[slug]/[type]/page.tsx
 delete mode 100644 apps/web/app/org/[orgSlug]/team/[slug]/page.tsx

diff --git a/apps/web/app/(use-page-wrapper)/[user]/[type]/page.tsx b/apps/web/app/(booking-page-wrapper)/[user]/[type]/page.tsx
similarity index 100%
rename from apps/web/app/(use-page-wrapper)/[user]/[type]/page.tsx
rename to apps/web/app/(booking-page-wrapper)/[user]/[type]/page.tsx
diff --git a/apps/web/app/(use-page-wrapper)/[user]/page.tsx b/apps/web/app/(booking-page-wrapper)/[user]/page.tsx
similarity index 100%
rename from apps/web/app/(use-page-wrapper)/[user]/page.tsx
rename to apps/web/app/(booking-page-wrapper)/[user]/page.tsx
diff --git a/apps/web/app/(booking-page-wrapper)/layout.tsx b/apps/web/app/(booking-page-wrapper)/layout.tsx
new file mode 100644
index 0000000000..1dd819f322
--- /dev/null
+++ b/apps/web/app/(booking-page-wrapper)/layout.tsx
@@ -0,0 +1,25 @@
+import { cookies, headers } from "next/headers";
+
+import { buildLegacyCtx } from "@lib/buildLegacyCtx";
+
+import PageWrapper from "@components/PageWrapperAppDir";
+
+import { ssrInit } from "@server/lib/ssr";
+
+export default async function BookingPageWrapperLayout({ children }: { children: React.ReactNode }) {
+  const h = headers();
+  const nonce = h.get("x-nonce") ?? undefined;
+  const context = buildLegacyCtx(h, cookies(), {}, {});
+  const ssr = await ssrInit(context);
+
+  return (
+    <PageWrapper
+      isBookingPage={true}
+      requiresLicense={false}
+      nonce={nonce}
+      themeBasis={null}
+      dehydratedState={ssr.dehydrate()}>
+      {children}
+    </PageWrapper>
+  );
+}
diff --git a/apps/web/app/org/[orgSlug]/[user]/[type]/page.tsx b/apps/web/app/(booking-page-wrapper)/org/[orgSlug]/[user]/[type]/page.tsx
similarity index 92%
rename from apps/web/app/org/[orgSlug]/[user]/[type]/page.tsx
rename to apps/web/app/(booking-page-wrapper)/org/[orgSlug]/[user]/[type]/page.tsx
index c33365e31e..65b7bdf34a 100644
--- a/apps/web/app/org/[orgSlug]/[user]/[type]/page.tsx
+++ b/apps/web/app/(booking-page-wrapper)/org/[orgSlug]/[user]/[type]/page.tsx
@@ -1,7 +1,6 @@
 import { withAppDirSsr } from "app/WithAppDirSsr";
 import type { PageProps } from "app/_types";
 import { generateMeetingMetadata } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";
 import { cookies, headers } from "next/headers";
 
 import { getOrgFullOrigin } from "@calcom/features/ee/organizations/lib/orgDomains";
@@ -56,11 +55,12 @@ export const generateMetadata = async ({ params, searchParams }: PageProps) => {
   };
 };
 
-const Page = async (props: OrgTypePageProps) => {
+const ServerPage = async ({ params, searchParams }: PageProps) => {
+  const props = await getData(buildLegacyCtx(headers(), cookies(), params, searchParams));
   if ((props as TeamTypePageProps)?.teamId) {
     return <TeamTypePage {...(props as TeamTypePageProps)} />;
   }
   return <UserTypePage {...(props as UserTypePageProps)} />;
 };
 
-export default WithLayout({ getLayout: null, getData, ServerPage: Page, isBookingPage: true });
+export default ServerPage;
diff --git a/apps/web/app/org/[orgSlug]/[user]/page.tsx b/apps/web/app/(booking-page-wrapper)/org/[orgSlug]/[user]/page.tsx
similarity index 93%
rename from apps/web/app/org/[orgSlug]/[user]/page.tsx
rename to apps/web/app/(booking-page-wrapper)/org/[orgSlug]/[user]/page.tsx
index ec1baeceb8..a338de8f77 100644
--- a/apps/web/app/org/[orgSlug]/[user]/page.tsx
+++ b/apps/web/app/(booking-page-wrapper)/org/[orgSlug]/[user]/page.tsx
@@ -1,7 +1,6 @@
 import { withAppDirSsr } from "app/WithAppDirSsr";
 import type { PageProps } from "app/_types";
 import { generateMeetingMetadata } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";
 import { cookies, headers } from "next/headers";
 
 import { getOrgFullOrigin } from "@calcom/features/ee/organizations/lib/orgDomains";
@@ -78,11 +77,12 @@ export const generateMetadata = async ({ params, searchParams }: PageProps) => {
   }
 };
 
-const Page = async (props: OrgPageProps) => {
+const ServerPage = async ({ params, searchParams }: PageProps) => {
+  const props = await getData(buildLegacyCtx(headers(), cookies(), params, searchParams));
   if ((props as TeamPageProps)?.team) {
     return <TeamPage {...(props as TeamPageProps)} />;
   }
   return <UserPage {...(props as UserPageProps)} />;
 };
 
-export default WithLayout({ getLayout: null, getData, ServerPage: Page, isBookingPage: true });
+export default ServerPage;
diff --git a/apps/web/app/org/[orgSlug]/instant-meeting/team/[slug]/[type]/page.tsx b/apps/web/app/(booking-page-wrapper)/org/[orgSlug]/instant-meeting/team/[slug]/[type]/page.tsx
similarity index 89%
rename from apps/web/app/org/[orgSlug]/instant-meeting/team/[slug]/[type]/page.tsx
rename to apps/web/app/(booking-page-wrapper)/org/[orgSlug]/instant-meeting/team/[slug]/[type]/page.tsx
index 3b9354b900..42aadb35fa 100644
--- a/apps/web/app/org/[orgSlug]/instant-meeting/team/[slug]/[type]/page.tsx
+++ b/apps/web/app/(booking-page-wrapper)/org/[orgSlug]/instant-meeting/team/[slug]/[type]/page.tsx
@@ -1,7 +1,6 @@
 import { withAppDirSsr } from "app/WithAppDirSsr";
 import type { PageProps as _PageProps } from "app/_types";
 import { generateMeetingMetadata } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";
 import { headers, cookies } from "next/headers";
 
 import { getOrgFullOrigin } from "@calcom/features/ee/organizations/lib/orgDomains";
@@ -50,4 +49,10 @@ export const generateMetadata = async ({ params, searchParams }: _PageProps) =>
 };
 
 const getData = withAppDirSsr<Props>(getServerSideProps);
-export default WithLayout({ getData, Page, isBookingPage: true })<"P">;
+
+const ServerPage = async ({ params, searchParams }: _PageProps) => {
+  const props = await getData(buildLegacyCtx(headers(), cookies(), params, searchParams));
+  return <Page {...props} />;
+};
+
+export default ServerPage;
diff --git a/apps/web/app/(booking-page-wrapper)/org/[orgSlug]/page.tsx b/apps/web/app/(booking-page-wrapper)/org/[orgSlug]/page.tsx
new file mode 100644
index 0000000000..2359fb25a1
--- /dev/null
+++ b/apps/web/app/(booking-page-wrapper)/org/[orgSlug]/page.tsx
@@ -0,0 +1,4 @@
+import Page from "app/(booking-page-wrapper)/team/[slug]/page";
+
+export { generateMetadata } from "app/(booking-page-wrapper)/team/[slug]/page";
+export default Page;
diff --git a/apps/web/app/(booking-page-wrapper)/org/[orgSlug]/team/[slug]/[type]/page.tsx b/apps/web/app/(booking-page-wrapper)/org/[orgSlug]/team/[slug]/[type]/page.tsx
new file mode 100644
index 0000000000..26c2c6eb89
--- /dev/null
+++ b/apps/web/app/(booking-page-wrapper)/org/[orgSlug]/team/[slug]/[type]/page.tsx
@@ -0,0 +1,4 @@
+import Page from "app/(booking-page-wrapper)/team/[slug]/[type]/page";
+
+export { generateMetadata } from "app/(booking-page-wrapper)/team/[slug]/[type]/page";
+export default Page;
diff --git a/apps/web/app/(booking-page-wrapper)/org/[orgSlug]/team/[slug]/page.tsx b/apps/web/app/(booking-page-wrapper)/org/[orgSlug]/team/[slug]/page.tsx
new file mode 100644
index 0000000000..2359fb25a1
--- /dev/null
+++ b/apps/web/app/(booking-page-wrapper)/org/[orgSlug]/team/[slug]/page.tsx
@@ -0,0 +1,4 @@
+import Page from "app/(booking-page-wrapper)/team/[slug]/page";
+
+export { generateMetadata } from "app/(booking-page-wrapper)/team/[slug]/page";
+export default Page;
diff --git a/apps/web/app/team/[slug]/[type]/page.tsx b/apps/web/app/(booking-page-wrapper)/team/[slug]/[type]/page.tsx
similarity index 89%
rename from apps/web/app/team/[slug]/[type]/page.tsx
rename to apps/web/app/(booking-page-wrapper)/team/[slug]/[type]/page.tsx
index 56bc0ef9fc..72016bebc9 100644
--- a/apps/web/app/team/[slug]/[type]/page.tsx
+++ b/apps/web/app/(booking-page-wrapper)/team/[slug]/[type]/page.tsx
@@ -1,7 +1,6 @@
 import { withAppDirSsr } from "app/WithAppDirSsr";
 import type { PageProps } from "app/_types";
 import { generateMeetingMetadata } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";
 import { cookies, headers } from "next/headers";
 
 import { getOrgFullOrigin } from "@calcom/features/ee/organizations/lib/orgDomains";
@@ -51,9 +50,8 @@ export const generateMetadata = async ({ params, searchParams }: PageProps) => {
 
 const getData = withAppDirSsr<LegacyPageProps>(getServerSideProps);
 
-export default WithLayout({
-  Page: LegacyPage,
-  getData,
-  getLayout: null,
-  isBookingPage: true,
-})<"P">;
+const ServerPage = async ({ params, searchParams }: PageProps) => {
+  const props = await getData(buildLegacyCtx(headers(), cookies(), params, searchParams));
+  return <LegacyPage {...props} />;
+};
+export default ServerPage;
diff --git a/apps/web/app/team/[slug]/page.tsx b/apps/web/app/(booking-page-wrapper)/team/[slug]/page.tsx
similarity index 86%
rename from apps/web/app/team/[slug]/page.tsx
rename to apps/web/app/(booking-page-wrapper)/team/[slug]/page.tsx
index a4e3eaffc6..70993de138 100644
--- a/apps/web/app/team/[slug]/page.tsx
+++ b/apps/web/app/(booking-page-wrapper)/team/[slug]/page.tsx
@@ -1,7 +1,6 @@
 import { withAppDirSsr } from "app/WithAppDirSsr";
 import type { PageProps as _PageProps } from "app/_types";
 import { generateMeetingMetadata } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";
 import { cookies, headers } from "next/headers";
 
 import { getOrgFullOrigin } from "@calcom/features/ee/organizations/lib/orgDomains";
@@ -45,9 +44,8 @@ export const generateMetadata = async ({ params, searchParams }: _PageProps) =>
 
 const getData = withAppDirSsr<PageProps>(getServerSideProps);
 
-export default WithLayout({
-  Page: LegacyPage,
-  getData,
-  getLayout: null,
-  isBookingPage: true,
-})<"P">;
+const ServerPage = async ({ params, searchParams }: _PageProps) => {
+  const props = await getData(buildLegacyCtx(headers(), cookies(), params, searchParams));
+  return <LegacyPage {...props} />;
+};
+export default ServerPage;
diff --git a/apps/web/app/(use-page-wrapper)/layout.tsx b/apps/web/app/(use-page-wrapper)/layout.tsx
index 2e75568305..40aeb0db27 100644
--- a/apps/web/app/(use-page-wrapper)/layout.tsx
+++ b/apps/web/app/(use-page-wrapper)/layout.tsx
@@ -9,6 +9,7 @@ import { ssrInit } from "@server/lib/ssr";
 export default async function PageWrapperLayout({ children }: { children: React.ReactNode }) {
   const h = headers();
   const nonce = h.get("x-nonce") ?? undefined;
+
   const context = buildLegacyCtx(headers(), cookies(), {}, {});
   const ssr = await ssrInit(context);
 
diff --git a/apps/web/app/future/org/[orgSlug]/[user]/[type]/embed/page.tsx b/apps/web/app/future/org/[orgSlug]/[user]/[type]/embed/page.tsx
index b246540b8e..081d18a07f 100644
--- a/apps/web/app/future/org/[orgSlug]/[user]/[type]/embed/page.tsx
+++ b/apps/web/app/future/org/[orgSlug]/[user]/[type]/embed/page.tsx
@@ -1,7 +1,7 @@
 import Page from "@pages/org/[orgSlug]/[user]/[type]/embed";
 import withEmbedSsrAppDir from "app/WithEmbedSSR";
 import { WithLayout } from "app/layoutHOC";
-import type { OrgTypePageProps } from "app/org/[orgSlug]/[user]/[type]/page";
+import type { OrgTypePageProps } from "app/(booking-page-wrapper)/org/[orgSlug]/[user]/[type]/page";
 
 import { getServerSideProps } from "@lib/org/[orgSlug]/[user]/[type]/getServerSideProps";
 
diff --git a/apps/web/app/future/org/[orgSlug]/[user]/embed/page.tsx b/apps/web/app/future/org/[orgSlug]/[user]/embed/page.tsx
index 605dafa333..4f214d72b3 100644
--- a/apps/web/app/future/org/[orgSlug]/[user]/embed/page.tsx
+++ b/apps/web/app/future/org/[orgSlug]/[user]/embed/page.tsx
@@ -1,6 +1,6 @@
 import withEmbedSsrAppDir from "app/WithEmbedSSR";
 import { WithLayout } from "app/layoutHOC";
-import type { OrgPageProps } from "app/org/[orgSlug]/[user]/page";
+import type { OrgPageProps } from "app/(booking-page-wrapper)/org/[orgSlug]/[user]/page";
 
 import { getServerSideProps } from "@lib/org/[orgSlug]/[user]/getServerSideProps";
 
diff --git a/apps/web/app/org/[orgSlug]/page.tsx b/apps/web/app/org/[orgSlug]/page.tsx
deleted file mode 100644
index 215b04ad5f..0000000000
--- a/apps/web/app/org/[orgSlug]/page.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-import Page from "app/team/[slug]/page";
-
-export { generateMetadata } from "app/team/[slug]/page";
-export default Page;
diff --git a/apps/web/app/org/[orgSlug]/team/[slug]/[type]/page.tsx b/apps/web/app/org/[orgSlug]/team/[slug]/[type]/page.tsx
deleted file mode 100644
index ebc0046999..0000000000
--- a/apps/web/app/org/[orgSlug]/team/[slug]/[type]/page.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-import Page from "app/team/[slug]/[type]/page";
-
-export { generateMetadata } from "app/team/[slug]/[type]/page";
-export default Page;
diff --git a/apps/web/app/org/[orgSlug]/team/[slug]/page.tsx b/apps/web/app/org/[orgSlug]/team/[slug]/page.tsx
deleted file mode 100644
index 215b04ad5f..0000000000
--- a/apps/web/app/org/[orgSlug]/team/[slug]/page.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-import Page from "app/team/[slug]/page";
-
-export { generateMetadata } from "app/team/[slug]/page";
-export default Page;
diff --git a/apps/web/lib/app-providers-app-dir.tsx b/apps/web/lib/app-providers-app-dir.tsx
index 99885bbfbf..bec6cc812d 100644
--- a/apps/web/lib/app-providers-app-dir.tsx
+++ b/apps/web/lib/app-providers-app-dir.tsx
@@ -287,7 +287,7 @@ const AppProviders = (props: PageWrapperProps) => {
     RemainingProviders
   );
 
-  if (isBookingPage) {
+  if (props.isBookingPage || isBookingPage) {
     return Hydrated;
   }
 
diff --git a/apps/web/modules/team/team-view.tsx b/apps/web/modules/team/team-view.tsx
index ae602d6840..5f6ff3501f 100644
--- a/apps/web/modules/team/team-view.tsx
+++ b/apps/web/modules/team/team-view.tsx
@@ -240,6 +240,4 @@ function TeamPage({ team, considerUnpublished, isValidOrgDomain }: PageProps) {
   );
 }
 
-TeamPage.isBookingPage = true;
-
 export default TeamPage;
diff --git a/apps/web/modules/users/views/users-public-view.tsx b/apps/web/modules/users/views/users-public-view.tsx
index 97143b8efb..31d32c4b10 100644
--- a/apps/web/modules/users/views/users-public-view.tsx
+++ b/apps/web/modules/users/views/users-public-view.tsx
@@ -146,5 +146,5 @@ export function UserPage(props: PageProps) {
     </>
   );
 }
-UserPage.isBookingPage = true;
+
 export default UserPage;
diff --git a/apps/web/modules/users/views/users-type-public-view.tsx b/apps/web/modules/users/views/users-type-public-view.tsx
index db10cfd684..8a709c7c5b 100644
--- a/apps/web/modules/users/views/users-type-public-view.tsx
+++ b/apps/web/modules/users/views/users-type-public-view.tsx
@@ -48,6 +48,4 @@ function Type({ slug, user, isEmbed, booking, isBrandingHidden, eventData, orgBa
   );
 }
 
-Type.isBookingPage = true;
-
 export default Type;
diff --git a/apps/web/pagesAndRewritePaths.js b/apps/web/pagesAndRewritePaths.js
index 7c2f1f083b..f64a0d33df 100644
--- a/apps/web/pagesAndRewritePaths.js
+++ b/apps/web/pagesAndRewritePaths.js
@@ -3,12 +3,18 @@ const { nextJsOrgRewriteConfig } = require("./getNextjsOrgRewriteConfig");
 /** Needed to rewrite public booking page, gets all static pages but [user] */
 // Pages found here are excluded from redirects in beforeFiles in next.config.js
 let pages = (exports.pages = glob
-  .sync("{pages,app,app/(use-page-wrapper),app/(use-page-wrapper)/(main-nav)}/**/[^_]*.{tsx,js,ts}", {
-    cwd: __dirname,
-  })
+  .sync(
+    "{pages,app,app/(booking-page-wrapper),app/(use-page-wrapper),app/(use-page-wrapper)/(main-nav)}/**/[^_]*.{tsx,js,ts}",
+    {
+      cwd: __dirname,
+    }
+  )
   .map((filename) =>
     filename
-      .replace(/^(app\/\(use-page-wrapper\)\/\(main-nav\)|app\/\(use-page-wrapper\)|pages|app)\//, "")
+      .replace(
+        /^(app\/\(use-page-wrapper\)\/\(main-nav\)|app\/\(use-page-wrapper\)|app\/\(booking-page-wrapper\)|pages|app)\//,
+        ""
+      )
       .replace(/(\.tsx|\.js|\.ts)/, "")
       .replace(/\/.*/, "")
   )