chore: App Router Migration - Ensure isBookingPage is correctly flagged before being passed to PageWrapper (#16362)

* Ensure adding isBookingPage is done in components in /modules, not in /pages

* Detect isBookingPage prop coming from Page and add it to page wrapper app dir

* fix build

* fix

---------

Co-authored-by: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com>

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

@@ -6,4 +6,4 @@ import { getServerSideProps } from "@lib/org/[orgSlug]/[user]/[type]/getServerSi
 
 const getData = withAppDirSsr<PageProps>(getServerSideProps);
 
-export default WithLayout({ getLayout: null, getData, isBookingPage: true, Page });
+export default WithLayout({ getLayout: null, getData, Page });

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

@@ -4,4 +4,4 @@ import { WithLayout } from "app/layoutHOC";
 
 const getData = withAppDirSsr<PageProps>(getServerSideProps);
 
-export default WithLayout({ getLayout: null, getData, isBookingPage: true, Page });
+export default WithLayout({ getLayout: null, getData, Page });

apps/web/app/layoutHOC.tsx

@@ -36,7 +36,7 @@ export function WithLayout<T extends Record<string, any>>({
         requiresLicense={false}
         nonce={nonce}
         themeBasis={null}
-        isBookingPage={isBookingPage}
+        isBookingPage={isBookingPage || !!(Page && "isBookingPage" in Page && Page.isBookingPage)}
         {...props}>
         {Page ? <Page {...props} /> : children}
       </PageWrapper>

apps/web/modules/users/views/users-public-view.tsx

@@ -20,7 +20,8 @@ import { HeadSeo, Icon, UnpublishedEntity, UserAvatar } from "@calcom/ui";
 
 import { type getServerSideProps } from "./users-public-view.getServerSideProps";
 
-export function UserPage(props: InferGetServerSidePropsType<typeof getServerSideProps>) {
+export type PageProps = InferGetServerSidePropsType<typeof getServerSideProps>;
+export function UserPage(props: PageProps) {
   const { users, profile, eventTypes, markdownStrippedBio, entity } = props;
 
   const [user] = users; //To be used when we only have a single user, not dynamic group
@@ -159,5 +160,5 @@ export function UserPage(props: InferGetServerSidePropsType<typeof getServerSide
     </>
   );
 }
-
+UserPage.isBookingPage = true;
 export default UserPage;

apps/web/modules/users/views/users-type-public-view.tsx

@@ -18,7 +18,7 @@ export const getMultipleDurationValue = (
   return defaultValue;
 };
 
-export default function Type({
+function Type({
   slug,
   user,
   isEmbed,
@@ -62,3 +62,7 @@ export default function Type({
     </main>
   );
 }
+
+Type.isBookingPage = true;
+
+export default Type;

apps/web/pages/[user]/[type]/embed.tsx

@@ -1,18 +1,15 @@
-import { type AppProps } from "@lib/app-providers";
 import withEmbedSsr from "@lib/withEmbedSsr";
 
-import PageWrapper, { type CalPageWrapper } from "@components/PageWrapper";
+import PageWrapper from "@components/PageWrapper";
 
 import TypePage from "~/users/views/users-type-public-view";
+import type { PageProps } from "~/users/views/users-type-public-view.getServerSideProps";
 import { getServerSideProps as _getServerSideProps } from "~/users/views/users-type-public-view.getServerSideProps";
 
 export const getServerSideProps = withEmbedSsr(_getServerSideProps);
 
-const Type = TypePage as unknown as CalPageWrapper & {
-  isBookingPage: AppProps["Component"]["isBookingPage"];
-};
+const Type = (props: PageProps) => <TypePage {...props} />;
 
-Type.isBookingPage = true;
 Type.PageWrapper = PageWrapper;
 
 export default Type;

apps/web/pages/[user]/[type]/index.tsx

@@ -1,16 +1,12 @@
-import { type AppProps } from "@lib/app-providers";
-
-import PageWrapper, { type CalPageWrapper } from "@components/PageWrapper";
+import PageWrapper from "@components/PageWrapper";
 
 import TypePage from "~/users/views/users-type-public-view";
+import type { PageProps } from "~/users/views/users-type-public-view.getServerSideProps";
 
 export { getServerSideProps } from "~/users/views/users-type-public-view.getServerSideProps";
 
-const Type = TypePage as unknown as CalPageWrapper & {
-  isBookingPage: AppProps["Component"]["isBookingPage"];
-};
+const Type = (props: PageProps) => <TypePage {...props} />;
 
-Type.isBookingPage = true;
 Type.PageWrapper = PageWrapper;
 
 export default Type;

apps/web/pages/[user]/embed.tsx

@@ -1,16 +1,12 @@
-import { type AppProps } from "@lib/app-providers";
 import withEmbedSsr from "@lib/withEmbedSsr";
 
-import PageWrapper, { type CalPageWrapper } from "@components/PageWrapper";
+import PageWrapper from "@components/PageWrapper";
 
-import User from "~/users/views/users-public-view";
+import User, { type PageProps } from "~/users/views/users-public-view";
 import { getServerSideProps as _getServerSideProps } from "~/users/views/users-public-view.getServerSideProps";
 
-const UserPage = User as unknown as CalPageWrapper & {
-  isBookingPage: AppProps["Component"]["isBookingPage"];
-};
+const UserPage = (props: PageProps) => <User {...props} />;
 
-UserPage.isBookingPage = true;
 UserPage.PageWrapper = PageWrapper;
 
 export default UserPage;

apps/web/pages/[user]/index.tsx

@@ -1,16 +1,11 @@
-import { type AppProps } from "@lib/app-providers";
+import PageWrapper from "@components/PageWrapper";
 
-import PageWrapper, { type CalPageWrapper } from "@components/PageWrapper";
+import User, { type PageProps } from "~/users/views/users-public-view";
 
-import User from "~/users/views/users-public-view";
+export { getServerSideProps } from "~/users/views/users-public-view.getServerSideProps";
 
-export { getServerSideProps, type UserPageProps } from "~/users/views/users-public-view.getServerSideProps";
+const UserPage = (props: PageProps) => <User {...props} />;
 
-const UserPage = User as unknown as CalPageWrapper & {
-  isBookingPage: AppProps["Component"]["isBookingPage"];
-};
-
-UserPage.isBookingPage = true;
 UserPage.PageWrapper = PageWrapper;
 
 export default UserPage;

apps/web/pages/org/[orgSlug]/[user]/[type]/index.tsx

@@ -18,4 +18,3 @@ export default function Page(props: PageProps) {
 }
 
 Page.PageWrapper = PageWrapper;
-Page.isBookingPage = true;

apps/web/pages/org/[orgSlug]/[user]/index.tsx

@@ -12,10 +12,11 @@ export { getServerSideProps } from "@lib/org/[orgSlug]/[user]/getServerSideProps
 
 export type PageProps = UserPageProps | TeamPageProps;
 
-export default function Page(props: PageProps) {
+function Page(props: PageProps) {
   if ((props as TeamPageProps)?.team) return <TeamPage {...(props as TeamPageProps)} />;
   return <UserPage {...(props as UserPageProps)} />;
 }
 
-Page.isBookingPage = true;
 Page.PageWrapper = PageWrapper;
+
+export default Page;