perf: Use one PageWrapper instance for all settings pages (#18752)

* add a layoutfile to use-page-wrapper route group * refactor and move bookings status page to route group * improve logic in pagesAndRewritePaths * fix * add use client directive * move /403 and /500 * move /auth/error * move /connect-and-join * move /enterprise * move /maintenance * move /more * move /upgrade * chore: remove WithLayout from 8 low-risk single pages (#18745) * move /403 and /500 * move /auth/error * move /connect-and-join * move /enterprise * move /maintenance * move /more * move /upgrade * move /availability pages * move /event-types pages * move /insights pages * move /apps to use-page-wrapper group * move /getting-started to use-page-wrapper group * move /signup to use-page-wrapper group * move /workflows to use-page-wrapper group * move /video pages to use-page-wrapper group * pass dehydratedState in layout * pass dehydratedState in layout * move settings/(settings-layout) to use-page-wrapper * move settings/(admin-layout) to use-page-wrapper * move remaining settings pages to (use-page-wrapper) * fix test * remove unused code * remove unused files * fix type check * remove test tag * remove page * RSC should not default export client components
2025-02-18 04:43:25 -05:00
1 parent 0048b2d92c
commit 43ba47a122
@@ -6,7 +6,7 @@ import { getServerSession } from "@calcom/features/auth/lib/getServerSession";

 import { buildLegacyRequest } from "@lib/buildLegacyCtx";

-import SettingsLayoutAppDir from "../(settings-layout)/SettingsLayoutAppDir";
+import SettingsLayoutAppDir from "../(settings-layout)/layout";
 import type { AdminLayoutProps } from "./AdminLayoutAppDirClient";

 const AdminLayoutAppDirClient = dynamic(() => import("./AdminLayoutAppDirClient"), {
@@ -21,5 +21,3 @@ export default async function AdminLayoutAppDir(props: AdminLayoutAppDirProps) {

  return await SettingsLayoutAppDir({ children: <AdminLayoutAppDirClient {...props} userRole={userRole} /> });
 }
-
-export const getLayout = async (page: React.ReactElement) => await AdminLayoutAppDir({ children: page });
@@ -13,10 +13,11 @@ const SettingsLayoutAppDirClient = dynamic(() => import("./SettingsLayoutAppDirC
  ssr: false,
 });

-type SettingsLayoutAppDir = Omit<SettingsLayoutProps, "currentOrg" | "otherTeams">;
+type SettingsLayoutAppDirProps = Omit<SettingsLayoutProps, "currentOrg" | "otherTeams">;

-export default async function SettingsLayoutAppDir(props: SettingsLayoutAppDir) {
+export default async function SettingsLayoutAppDir(props: SettingsLayoutAppDirProps) {
  const session = await getServerSession({ req: buildLegacyRequest(headers(), cookies()) });
+
  const userId = session?.user?.id ?? -1;
  const orgId = session?.user?.org?.id ?? -1;
  let currentOrg = null;
@@ -35,5 +36,3 @@ export default async function SettingsLayoutAppDir(props: SettingsLayoutAppDir)

  return <SettingsLayoutAppDirClient {...props} currentOrg={currentOrg} otherTeams={otherTeams} />;
 }
-
-export const getLayout = async (page: React.ReactElement) => await SettingsLayoutAppDir({ children: page });
@@ -0,0 +1,5 @@
+import BillingPage, { generateMetadata } from "../../billing/page";
+
+export { generateMetadata };
+
+export default BillingPage;
@@ -0,0 +1,4 @@
+import BillingPage, { generateMetadata } from "../../../billing/page";
+
+export { generateMetadata };
+export default BillingPage;
@@ -1,9 +1,11 @@
 import { withAppDirSsr } from "app/WithAppDirSsr";
+import type { PageProps } from "app/_types";
 import { _generateMetadata } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";
+import { cookies, headers } from "next/headers";

 import type { inferSSRProps } from "@calcom/types/inferSSRProps";

+import { buildLegacyCtx } from "@lib/buildLegacyCtx";
 import { getServerSideProps } from "@lib/settings/license-key/new/getServerSideProps";

 import CreateANewLicenseKeyForm, { LayoutWrapper } from "~/settings/license-key/new/new-view";
@@ -14,8 +16,15 @@ export const generateMetadata = async () =>
    (t) => t("organizations_description")
  );

-export default WithLayout({
-  Page: CreateANewLicenseKeyForm,
-  getLayout: LayoutWrapper,
-  getData: withAppDirSsr<inferSSRProps<typeof getServerSideProps>>(getServerSideProps),
-});
+const getData = withAppDirSsr<inferSSRProps<typeof getServerSideProps>>(getServerSideProps);
+
+const ServerPage = async ({ params, searchParams }: PageProps) => {
+  await getData(buildLegacyCtx(headers(), cookies(), params, searchParams));
+  return (
+    <LayoutWrapper>
+      <CreateANewLicenseKeyForm />
+    </LayoutWrapper>
+  );
+};
+
+export default ServerPage;
@@ -1,9 +1,12 @@
 import { withAppDirSsr } from "app/WithAppDirSsr";
+import type { PageProps } from "app/_types";
 import { _generateMetadata } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";
+import { cookies, headers } from "next/headers";

 import { getServerSideProps } from "@calcom/features/ee/organizations/pages/organization";

+import { buildLegacyCtx } from "@lib/buildLegacyCtx";
+
 import LegacyPage, { LayoutWrapper } from "~/settings/organizations/[id]/about-view";

 export const generateMetadata = async () =>
@@ -14,8 +17,13 @@ export const generateMetadata = async () =>

 const getData = withAppDirSsr(getServerSideProps);

-export default WithLayout({
-  Page: LegacyPage,
-  getLayout: LayoutWrapper,
-  getData,
-});
+const ServerPage = async ({ params, searchParams }: PageProps) => {
+  await getData(buildLegacyCtx(headers(), cookies(), params, searchParams));
+  return (
+    <LayoutWrapper>
+      <LegacyPage />
+    </LayoutWrapper>
+  );
+};
+
+export default ServerPage;
@@ -1,9 +1,12 @@
 import { withAppDirSsr } from "app/WithAppDirSsr";
+import type { PageProps } from "app/_types";
 import { _generateMetadata } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";
+import { cookies, headers } from "next/headers";

 import { getServerSideProps } from "@calcom/features/ee/organizations/pages/organization";

+import { buildLegacyCtx } from "@lib/buildLegacyCtx";
+
 import LegacyPage, { LayoutWrapper } from "~/settings/organizations/[id]/add-teams-view";

 export const generateMetadata = async () =>
@@ -14,8 +17,13 @@ export const generateMetadata = async () =>

 const getData = withAppDirSsr(getServerSideProps);

-export default WithLayout({
-  Page: LegacyPage,
-  getLayout: LayoutWrapper,
-  getData,
-});
+const ServerPage = async ({ params, searchParams }: PageProps) => {
+  await getData(buildLegacyCtx(headers(), cookies(), params, searchParams));
+  return (
+    <LayoutWrapper>
+      <LegacyPage />
+    </LayoutWrapper>
+  );
+};
+
+export default ServerPage;
@@ -1,5 +1,4 @@
 import { _generateMetadata } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";

 import MembersPage from "~/members/members-view";

@@ -9,6 +8,8 @@ export const generateMetadata = async () =>
    (t) => t("organization_description")
  );

-export default WithLayout({
-  Page: MembersPage,
-});
+const ServerPageWrapper = () => {
+  return <MembersPage />;
+};
+
+export default ServerPageWrapper;
@@ -1,9 +1,12 @@
 import { withAppDirSsr } from "app/WithAppDirSsr";
+import type { PageProps } from "app/_types";
 import { _generateMetadata } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";
+import { cookies, headers } from "next/headers";

 import { getServerSideProps } from "@calcom/features/ee/organizations/pages/organization";

+import { buildLegacyCtx } from "@lib/buildLegacyCtx";
+
 import LegacyPage, { LayoutWrapper } from "~/settings/organizations/[id]/onboard-members-view";

 export const generateMetadata = async () =>
@@ -14,8 +17,13 @@ export const generateMetadata = async () =>

 const getData = withAppDirSsr(getServerSideProps);

-export default WithLayout({
-  Page: LegacyPage,
-  getLayout: LayoutWrapper,
-  getData,
-});
+const ServerPage = async ({ params, searchParams }: PageProps) => {
+  await getData(buildLegacyCtx(headers(), cookies(), params, searchParams));
+  return (
+    <LayoutWrapper>
+      <LegacyPage />
+    </LayoutWrapper>
+  );
+};
+
+export default ServerPage;
@@ -1,5 +1,4 @@
 import { _generateMetadata } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";

 import Page from "@calcom/features/ee/organizations/pages/settings/appearance";

@@ -9,4 +8,8 @@ export const generateMetadata = async () =>
    (t) => t("appearance_org_description")
  );

-export default WithLayout({ Page });
+const ServerPageWrapper = () => {
+  return <Page />;
+};
+
+export default ServerPageWrapper;
@@ -1,11 +1,9 @@
+import SettingsLayoutAppDir from "app/(use-page-wrapper)/settings/(settings-layout)/layout";
 import { _generateMetadata, getTranslate } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";

 import LegacyPage from "@calcom/features/ee/organizations/pages/members";
 import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";

-import SettingsLayoutAppDir from "../../(settings-layout)/SettingsLayoutAppDir";
-
 export const generateMetadata = async () =>
  await _generateMetadata(
    (t) => t("organization_members"),
@@ -15,14 +13,12 @@ export const generateMetadata = async () =>
 const Page = async () => {
  const t = await getTranslate();

-  return (
+  const children = (
    <SettingsHeader title={t("organization_members")} description={t("organization_description")}>
      <LegacyPage />
    </SettingsHeader>
  );
+  return await SettingsLayoutAppDir({ children, containerClassName: "lg:max-w-screen-2xl" });
 };

-const getLayout = async (page: React.ReactElement) =>
-  await SettingsLayoutAppDir({ children: page, containerClassName: "lg:max-w-screen-2xl" });
-
-export default WithLayout({ ServerPage: Page, getServerLayout: getLayout })<"P">;
+export default Page;
@@ -0,0 +1,33 @@
+import { withAppDirSsr } from "app/WithAppDirSsr";
+import type { PageProps } from "app/_types";
+import { _generateMetadata } from "app/_utils";
+import { cookies, headers } from "next/headers";
+
+import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
+
+import { buildLegacyCtx } from "@lib/buildLegacyCtx";
+import { getServerSideProps } from "@lib/settings/organizations/new/getServerSideProps";
+import { type inferSSRProps } from "@lib/types/inferSSRProps";
+
+import LegacyPage, { LayoutWrapper } from "~/settings/organizations/new/create-new-view";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("set_up_your_organization"),
+    (t) => t("organizations_description")
+  );
+
+const getData = withAppDirSsr<inferSSRProps<typeof getServerSideProps>>(getServerSideProps);
+
+const ServerPage = async ({ params, searchParams }: PageProps) => {
+  await getData(buildLegacyCtx(headers(), cookies(), params, searchParams));
+  return (
+    <LayoutWrapper>
+      <LicenseRequired>
+        <LegacyPage />
+      </LicenseRequired>
+    </LayoutWrapper>
+  );
+};
+
+export default ServerPage;
@@ -1,5 +1,4 @@
 import { _generateMetadata } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";

 import PlatformBillingUpgrade from "~/settings/platform/billing/billing-view";

@@ -10,6 +9,8 @@ export const generateMetadata = async () => {
  );
 };

-export default WithLayout({
-  Page: PlatformBillingUpgrade,
-});
+const ServerPageWrapper = () => {
+  return <PlatformBillingUpgrade />;
+};
+
+export default ServerPageWrapper;
@@ -1,5 +1,4 @@
 import { _generateMetadata } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";

 import ManagedUsersView from "~/settings/platform/managed-users/managed-users-view";

@@ -9,6 +8,8 @@ export const generateMetadata = async () =>
    (t) => t("platform_members_description")
  );

-export default WithLayout({
-  Page: ManagedUsersView,
-});
+const ServerPageWrapper = () => {
+  return <ManagedUsersView />;
+};
+
+export default ServerPageWrapper;
@@ -1,5 +1,4 @@
 import { _generateMetadata } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";

 import PlatformMembersView from "@calcom/features/ee/platform/pages/settings/members";

@@ -9,6 +8,8 @@ export const generateMetadata = async () =>
    (t) => t("platform_members_description")
  );

-export default WithLayout({
-  Page: PlatformMembersView,
-});
+const ServerPageWrapper = () => {
+  return <PlatformMembersView />;
+};
+
+export default ServerPageWrapper;
@@ -0,0 +1,33 @@
+import { withAppDirSsr } from "app/WithAppDirSsr";
+import type { PageProps } from "app/_types";
+import { _generateMetadata } from "app/_utils";
+import { cookies, headers } from "next/headers";
+
+import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
+
+import { buildLegacyCtx } from "@lib/buildLegacyCtx";
+import { getServerSideProps } from "@lib/settings/organizations/new/getServerSideProps";
+import { type inferSSRProps } from "@lib/types/inferSSRProps";
+
+import LegacyPage, { LayoutWrapper } from "~/settings/platform/new/create-new-view";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("set_up_your_platform_organization"),
+    (t) => t("platform_organization_description")
+  );
+
+const getData = withAppDirSsr<inferSSRProps<typeof getServerSideProps>>(getServerSideProps);
+
+const ServerPage = async ({ params, searchParams }: PageProps) => {
+  await getData(buildLegacyCtx(headers(), cookies(), params, searchParams));
+  return (
+    <LayoutWrapper>
+      <LicenseRequired>
+        <LegacyPage />
+      </LicenseRequired>
+    </LayoutWrapper>
+  );
+};
+
+export default ServerPage;
@@ -1,5 +1,4 @@
 import { _generateMetadata } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";

 import EditView from "~/settings/platform/oauth-clients/[clientId]/edit/edit-view";

@@ -9,7 +8,8 @@ export const generateMetadata = async () =>
    () => ""
  );

-export default WithLayout({
-  getLayout: null,
-  Page: EditView,
-});
+const ServerPageWrapper = () => {
+  return <EditView />;
+};
+
+export default ServerPageWrapper;
@@ -1,5 +1,4 @@
 import { _generateMetadata } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";

 import EditWebhooksView from "~/settings/platform/oauth-clients/[clientId]/edit/edit-webhooks-view";

@@ -9,7 +8,8 @@ export const generateMetadata = async () =>
    () => ""
  );

-export default WithLayout({
-  getLayout: null,
-  Page: EditWebhooksView,
-});
+const ServerPageWrapper = () => {
+  return <EditWebhooksView />;
+};
+
+export default ServerPageWrapper;
@@ -1,5 +1,4 @@
 import { _generateMetadata } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";

 import CreateNewView from "~/settings/platform/oauth-clients/create-new-view";

@@ -10,7 +9,8 @@ export const generateMetadata = async () => {
  );
 };

-export default WithLayout({
-  getLayout: null,
-  Page: CreateNewView,
-});
+const ServerPageWrapper = () => {
+  return <CreateNewView />;
+};
+
+export default ServerPageWrapper;
@@ -1,5 +1,4 @@
 import { _generateMetadata } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";

 import PlatformView from "~/settings/platform/platform-view";

@@ -10,7 +9,8 @@ export const generateMetadata = async () => {
  );
 };

-export default WithLayout({
-  getLayout: null,
-  Page: PlatformView,
-});
+const ServerPageWrapper = () => {
+  return <PlatformView />;
+};
+
+export default ServerPageWrapper;
@@ -1,5 +1,4 @@
 import { _generateMetadata } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";

 import PlatformPlansView from "~/settings/platform/plans/platform-plans-view";

@@ -10,6 +9,8 @@ export const generateMetadata = async () => {
  );
 };

-export default WithLayout({
-  Page: PlatformPlansView,
-});
+const ServerPageWrapper = () => {
+  return <PlatformPlansView />;
+};
+
+export default ServerPageWrapper;
@@ -0,0 +1,19 @@
+import { _generateMetadata } from "app/_utils";
+
+import CreateTeamEventType, { LayoutWrapper } from "~/settings/teams/[id]/event-types-view";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("add_new_team_event_type"),
+    (t) => t("new_event_type_to_book_description")
+  );
+
+const ServerPage = async () => {
+  return (
+    <LayoutWrapper>
+      <CreateTeamEventType />
+    </LayoutWrapper>
+  );
+};
+
+export default ServerPage;
@@ -0,0 +1,19 @@
+import { _generateMetadata } from "app/_utils";
+
+import AddNewTeamMembers, { LayoutWrapper } from "~/settings/teams/[id]/onboard-members-view";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("add_team_members"),
+    (t) => t("add_team_members_description")
+  );
+
+const ServerPage = async () => {
+  return (
+    <LayoutWrapper>
+      <AddNewTeamMembers />
+    </LayoutWrapper>
+  );
+};
+
+export default ServerPage;
@@ -1,5 +1,4 @@
 import { _generateMetadata } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";

 import CreateNewTeamView, { LayoutWrapper } from "~/settings/teams/new/create-new-team-view";

@@ -9,4 +8,12 @@ export const generateMetadata = async () =>
    (t) => t("create_new_team_description")
  );

-export default WithLayout({ Page: CreateNewTeamView, getLayout: LayoutWrapper })<"P">;
+const ServerPage = async () => {
+  return (
+    <LayoutWrapper>
+      <CreateNewTeamView />
+    </LayoutWrapper>
+  );
+};
+
+export default ServerPage;
@@ -1,5 +0,0 @@
-import { WithLayout } from "app/layoutHOC";
-
-import { getLayout } from "./AdminLayoutAppDir";
-
-export default WithLayout({ getServerLayout: getLayout })<"L">;
@@ -1,5 +0,0 @@
-import { WithLayout } from "app/layoutHOC";
-
-import { getLayout } from "./SettingsLayoutAppDir";
-
-export default WithLayout({ getServerLayout: getLayout })<"L">;
@@ -1,5 +0,0 @@
-import BillingPage, { generateMetadata } from "app/settings/(settings-layout)/billing/page";
-
-export { generateMetadata };
-
-export default BillingPage;
@@ -1,4 +0,0 @@
-import BillingPage, { generateMetadata } from "app/settings/(settings-layout)/billing/page";
-
-export { generateMetadata };
-export default BillingPage;
@@ -1,21 +0,0 @@
-import { withAppDirSsr } from "app/WithAppDirSsr";
-import { _generateMetadata } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";
-
-import { getServerSideProps } from "@lib/settings/organizations/new/getServerSideProps";
-import { type inferSSRProps } from "@lib/types/inferSSRProps";
-
-import LegacyPage, { LayoutWrapper } from "~/settings/organizations/new/create-new-view";
-
-export const generateMetadata = async () =>
-  await _generateMetadata(
-    (t) => t("set_up_your_organization"),
-    (t) => t("organizations_description")
-  );
-
-export default WithLayout({
-  requiresLicense: true,
-  getLayout: LayoutWrapper,
-  Page: LegacyPage,
-  getData: withAppDirSsr<inferSSRProps<typeof getServerSideProps>>(getServerSideProps),
-});
@@ -1,21 +0,0 @@
-import { withAppDirSsr } from "app/WithAppDirSsr";
-import { _generateMetadata } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";
-
-import { getServerSideProps } from "@lib/settings/organizations/new/getServerSideProps";
-import { type inferSSRProps } from "@lib/types/inferSSRProps";
-
-import LegacyPage, { LayoutWrapper } from "~/settings/platform/new/create-new-view";
-
-export const generateMetadata = async () =>
-  await _generateMetadata(
-    (t) => t("set_up_your_platform_organization"),
-    (t) => t("platform_organization_description")
-  );
-
-export default WithLayout({
-  getLayout: LayoutWrapper,
-  Page: LegacyPage,
-  getData: withAppDirSsr<inferSSRProps<typeof getServerSideProps>>(getServerSideProps),
-  requiresLicense: true,
-});
@@ -1,12 +0,0 @@
-import { _generateMetadata } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";
-
-import CreateTeamEventType, { GetLayout } from "~/settings/teams/[id]/event-types-view";
-
-export const generateMetadata = async () =>
-  await _generateMetadata(
-    (t) => t("add_new_team_event_type"),
-    (t) => t("new_event_type_to_book_description")
-  );
-
-export default WithLayout({ Page: CreateTeamEventType, getLayout: GetLayout })<"P">;
@@ -1,12 +0,0 @@
-import { _generateMetadata } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";
-
-import AddNewTeamMembers, { GetLayout } from "~/settings/teams/[id]/onboard-members-view";
-
-export const generateMetadata = async () =>
-  await _generateMetadata(
-    (t) => t("add_team_members"),
-    (t) => t("add_team_members_description")
-  );
-
-export default WithLayout({ Page: AddNewTeamMembers, getLayout: GetLayout })<"P">;
@@ -3,10 +3,10 @@
 import { CreateANewLicenseKeyForm } from "@calcom/features/ee/deployment/licensekey/CreateLicenseKeyForm";
 import { WizardLayout } from "@calcom/ui";

-export const LayoutWrapper = (page: React.ReactElement) => {
+export const LayoutWrapper = ({ children }: { children: React.ReactNode }) => {
  return (
    <WizardLayout currentStep={1} maxSteps={2}>
-      {page}
+      {children}
    </WizardLayout>
  );
 };
@@ -3,10 +3,10 @@
 import { AboutOrganizationForm } from "@calcom/features/ee/organizations/components";
 import { WizardLayout } from "@calcom/ui";

-export const LayoutWrapper = (page: React.ReactElement) => {
+export const LayoutWrapper = ({ children }: { children: React.ReactNode }) => {
  return (
    <WizardLayout currentStep={3} maxSteps={5}>
-      {page}
+      {children}
    </WizardLayout>
  );
 };
@@ -3,10 +3,10 @@
 import { AddNewTeamsForm } from "@calcom/features/ee/organizations/components";
 import { WizardLayout } from "@calcom/ui";

-export const LayoutWrapper = (page: React.ReactElement) => {
+export const LayoutWrapper = ({ children }: { children: React.ReactNode }) => {
  return (
    <WizardLayout currentStep={5} maxSteps={5}>
-      {page}
+      {children}
    </WizardLayout>
  );
 };
@@ -6,7 +6,7 @@ import AddNewTeamMembers from "@calcom/features/ee/teams/components/AddNewTeamMe
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { WizardLayout } from "@calcom/ui";

-export const LayoutWrapper = (page: React.ReactElement) => {
+export const LayoutWrapper = ({ children }: { children: React.ReactNode }) => {
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const router = useRouter();
  // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -19,7 +19,7 @@ export const LayoutWrapper = (page: React.ReactElement) => {
      isOptionalCallback={() => {
        router.push(`/settings/organizations/${query.get("id")}/add-teams`);
      }}>
-      {page}
+      {children}
    </WizardLayout>
  );
 };
@@ -3,10 +3,10 @@
 import { CreateANewOrganizationForm } from "@calcom/features/ee/organizations/components";
 import { WizardLayout } from "@calcom/ui";

-export const LayoutWrapper = (page: React.ReactElement) => {
+export const LayoutWrapper = ({ children }: { children: React.ReactNode }) => {
  return (
    <WizardLayout currentStep={1} maxSteps={5}>
-      {page}
+      {children}
    </WizardLayout>
  );
 };
@@ -3,10 +3,10 @@
 import { CreateANewPlatformForm } from "@calcom/features/ee/platform/components/index";
 import { WizardLayout } from "@calcom/ui";

-export const LayoutWrapper = (page: React.ReactElement) => {
+export const LayoutWrapper = ({ children }: { children: React.ReactNode }) => {
  return (
    <WizardLayout currentStep={1} maxSteps={1}>
-      {page}
+      {children}
    </WizardLayout>
  );
 };
@@ -65,7 +65,7 @@ export const CreateTeamEventType = () => {
  );
 };

-export const GetLayout = (page: React.ReactElement) => {
+export const LayoutWrapper = ({ children }: { children: React.ReactNode }) => {
  const router = useRouter();
  const searchParams = useCompatSearchParams();
  const teamId = searchParams?.get("id") ? Number(searchParams.get("id")) : -1;
@@ -77,7 +77,7 @@ export const GetLayout = (page: React.ReactElement) => {
      isOptionalCallback={() => {
        router.push(`/settings/teams/${teamId}/profile`);
      }}>
-      {page}
+      {children}
    </WizardLayout>
  );
 };
@@ -3,9 +3,9 @@
 import AddNewTeamMembers from "@calcom/features/ee/teams/components/AddNewTeamMembers";
 import { WizardLayout } from "@calcom/ui";

-export const GetLayout = (page: React.ReactElement) => (
+export const LayoutWrapper = ({ children }: { children: React.ReactNode }) => (
  <WizardLayout currentStep={2} maxSteps={3}>
-    {page}
+    {children}
  </WizardLayout>
 );

@@ -51,10 +51,10 @@ const CreateNewTeamPage = () => {
    />
  );
 };
-export const LayoutWrapper = (page: React.ReactElement) => {
+export const LayoutWrapper = ({ children }: { children: React.ReactNode }) => {
  return (
    <WizardLayout currentStep={1} maxSteps={3}>
-      {page}
+      {children}
    </WizardLayout>
  );
 };