chore: App router - Fix errors in settings pages & add remaining pages (#16648)

* fix settings/admin/page

* remove references to pages for settings/teams

* remove double layouts

* move pages that do not need layout out of (settings) group

* fix

* fix

* fix

* fix

* add sso page and fix layouts

apps/web/app/future/settings/(admin)/admin/page.tsx

@@ -1,8 +1,4 @@
-import LegacyPage from "@pages/settings/admin/index";
 import { _generateMetadata } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";
-
-import { getLayout } from "@components/auth/layouts/AdminLayoutAppDir";
 
 export const generateMetadata = async () =>
   await _generateMetadata(
@@ -10,4 +6,5 @@ export const generateMetadata = async () =>
     () => "admin_description"
   );
 
-export default WithLayout({ getServerLayout: getLayout, Page: LegacyPage })<"P">;
+const Page = () => <h1>Admin index</h1>;
+export default Page;

apps/web/app/future/settings/(settings)/organizations/appearance/layout.tsx

@@ -1,5 +0,0 @@
-import { WithLayout } from "app/layoutHOC";
-
-import { getLayout } from "@calcom/features/settings/appDir/SettingsLayoutAppDir";
-
-export default WithLayout({ getServerLayout: getLayout });

apps/web/app/future/settings/(settings)/organizations/billing/layout.tsx

@@ -1,5 +0,0 @@
-import { WithLayout } from "app/layoutHOC";
-
-import { getLayout } from "@calcom/features/settings/appDir/SettingsLayoutAppDir";
-
-export default WithLayout({ getServerLayout: getLayout });

apps/web/app/future/settings/(settings)/organizations/billing/page.tsx

@@ -1,11 +1,5 @@
-import { _generateMetadata } from "app/_utils";
+import BillingPage, { generateMetadata } from "../../billing/page";
 
-import Page from "~/settings/billing/billing-view";
+export { generateMetadata };
 
-export const generateMetadata = async () =>
-  await _generateMetadata(
-    (t) => t("billing"),
-    (t) => t("manage_billing_description")
-  );
-
-export default Page;
+export default BillingPage;

apps/web/app/future/settings/(settings)/organizations/general/layout.tsx

@@ -1,5 +0,0 @@
-import { WithLayout } from "app/layoutHOC";
-
-import { getLayout } from "@calcom/features/settings/appDir/SettingsLayoutAppDir";
-
-export default WithLayout({ getServerLayout: getLayout });

apps/web/app/future/settings/(settings)/organizations/general/page.tsx

@@ -1,6 +1,8 @@
-import { _generateMetadata } from "app/_utils";
+import { _generateMetadata, getFixedT } from "app/_utils";
 
-import Page from "@calcom/features/ee/organizations/pages/settings/general";
+import { getServerSessionForAppDir } from "@calcom/features/auth/lib/get-server-session-for-app-dir";
+import LegacyPage from "@calcom/features/ee/organizations/pages/settings/general";
+import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
 
 export const generateMetadata = async () =>
   await _generateMetadata(
@@ -8,4 +10,15 @@ export const generateMetadata = async () =>
     (t) => t("general_description")
   );
 
+const Page = async () => {
+  const session = await getServerSessionForAppDir();
+  const t = await getFixedT(session?.user.locale || "en");
+
+  return (
+    <SettingsHeader title={t("general")} description={t("general_description")} borderInShellHeader={true}>
+      <LegacyPage isAppDir={true} />
+    </SettingsHeader>
+  );
+};
+
 export default Page;

apps/web/app/future/settings/(settings)/organizations/members/layout.tsx

@@ -1,5 +0,0 @@
-import { WithLayout } from "app/layoutHOC";
-
-import { getLayout } from "@calcom/features/settings/appDir/SettingsLayoutAppDir";
-
-export default WithLayout({ getServerLayout: getLayout });

apps/web/app/future/settings/(settings)/organizations/members/page.tsx

@@ -1,6 +1,8 @@
-import { _generateMetadata } from "app/_utils";
+import { _generateMetadata, getFixedT } from "app/_utils";
 
-import Page from "@calcom/features/ee/organizations/pages/settings/members";
+import { getServerSessionForAppDir } from "@calcom/features/auth/lib/get-server-session-for-app-dir";
+import LegacyPage from "@calcom/features/ee/organizations/pages/settings/members";
+import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
 
 export const generateMetadata = async () =>
   await _generateMetadata(
@@ -8,4 +10,15 @@ export const generateMetadata = async () =>
     (t) => t("organization_description")
   );
 
+const Page = async () => {
+  const session = await getServerSessionForAppDir();
+  const t = await getFixedT(session?.user.locale || "en");
+
+  return (
+    <SettingsHeader title={t("organization_members")} description={t("organization_description")}>
+      <LegacyPage isAppDir={true} />
+    </SettingsHeader>
+  );
+};
+
 export default Page;

apps/web/app/future/settings/(settings)/organizations/profile/layout.tsx

@@ -1,5 +0,0 @@
-import { WithLayout } from "app/layoutHOC";
-
-import { getLayout } from "@calcom/features/settings/appDir/SettingsLayoutAppDir";
-
-export default WithLayout({ getServerLayout: getLayout });

apps/web/app/future/settings/(settings)/organizations/profile/page.tsx

@@ -1,6 +1,8 @@
-import { _generateMetadata } from "app/_utils";
+import { _generateMetadata, getFixedT } from "app/_utils";
 
-import Page from "@calcom/features/ee/organizations/pages/settings/profile";
+import { getServerSessionForAppDir } from "@calcom/features/auth/lib/get-server-session-for-app-dir";
+import LegacyPage from "@calcom/features/ee/organizations/pages/settings/profile";
+import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
 
 export const generateMetadata = async () =>
   await _generateMetadata(
@@ -8,4 +10,18 @@ export const generateMetadata = async () =>
     (t) => t("profile_org_description")
   );
 
+const Page = async () => {
+  const session = await getServerSessionForAppDir();
+  const t = await getFixedT(session?.user.locale || "en");
+
+  return (
+    <SettingsHeader
+      title={t("profile")}
+      description={t("profile_org_description")}
+      borderInShellHeader={true}>
+      <LegacyPage isAppDir={true} />
+    </SettingsHeader>
+  );
+};
+
 export default Page;

apps/web/app/future/settings/(settings)/organizations/sso/page.tsx

@@ -0,0 +1,24 @@
+import { _generateMetadata, getFixedT } from "app/_utils";
+
+import { getServerSessionForAppDir } from "@calcom/features/auth/lib/get-server-session-for-app-dir";
+import OrgSSOView from "@calcom/features/ee/sso/page/orgs-sso-view";
+import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("sso_configuration"),
+    (t) => t("sso_configuration_description_orgs")
+  );
+
+const Page = async () => {
+  const session = await getServerSessionForAppDir();
+  const t = await getFixedT(session?.user.locale || "en");
+
+  return (
+    <SettingsHeader title={t("profile")} description={t("profile_org_description")}>
+      <OrgSSOView isAppDir={true} />
+    </SettingsHeader>
+  );
+};
+
+export default Page;

apps/web/app/future/settings/(settings)/organizations/teams/other/[id]/appearance/layout.tsx

@@ -1,5 +0,0 @@
-import { WithLayout } from "app/layoutHOC";
-
-import { getLayout } from "@calcom/features/settings/appDir/SettingsLayoutAppDir";
-
-export default WithLayout({ getServerLayout: getLayout });

apps/web/app/future/settings/(settings)/organizations/teams/other/[id]/appearance/page.tsx

@@ -1,6 +1,8 @@
-import { _generateMetadata } from "app/_utils";
+import { _generateMetadata, getFixedT } from "app/_utils";
 
-import Page from "@calcom/features/ee/teams/pages/team-appearance-view";
+import { getServerSessionForAppDir } from "@calcom/features/auth/lib/get-server-session-for-app-dir";
+import LegacyPage from "@calcom/features/ee/teams/pages/team-appearance-view";
+import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
 
 export const generateMetadata = async () =>
   await _generateMetadata(
@@ -8,4 +10,18 @@ export const generateMetadata = async () =>
     (t) => t("appearance_team_description")
   );
 
+const Page = async () => {
+  const session = await getServerSessionForAppDir();
+  const t = await getFixedT(session?.user.locale || "en");
+
+  return (
+    <SettingsHeader
+      title={t("booking_appearance")}
+      description={t("appearance_team_description")}
+      borderInShellHeader={false}>
+      <LegacyPage isAppDir={true} />
+    </SettingsHeader>
+  );
+};
+
 export default Page;

apps/web/app/future/settings/(settings)/organizations/teams/other/[id]/members/layout.tsx

@@ -1,5 +0,0 @@
-import { WithLayout } from "app/layoutHOC";
-
-import { getLayout } from "@calcom/features/settings/appDir/SettingsLayoutAppDir";
-
-export default WithLayout({ getServerLayout: getLayout });

apps/web/app/future/settings/(settings)/organizations/teams/other/[id]/members/page.tsx

@@ -1,6 +1,8 @@
-import { _generateMetadata } from "app/_utils";
+import { _generateMetadata, getFixedT } from "app/_utils";
 
-import Page from "@calcom/features/ee/organizations/pages/settings/other-team-members-view";
+import { getServerSessionForAppDir } from "@calcom/features/auth/lib/get-server-session-for-app-dir";
+import LegacyPage from "@calcom/features/ee/organizations/pages/settings/other-team-members-view";
+import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
 
 export const generateMetadata = async () =>
   await _generateMetadata(
@@ -8,4 +10,16 @@ export const generateMetadata = async () =>
     (t) => t("members_team_description")
   );
 
+const Page = async () => {
+  const session = await getServerSessionForAppDir();
+  const t = await getFixedT(session?.user.locale || "en");
+
+  return (
+    // TODO: Add CTA Button
+    <SettingsHeader title={t("team_members")} description={t("members_team_description")}>
+      <LegacyPage isAppDir={true} />
+    </SettingsHeader>
+  );
+};
+
 export default Page;

apps/web/app/future/settings/(settings)/organizations/teams/other/[id]/profile/layout.tsx

@@ -1,5 +0,0 @@
-import { WithLayout } from "app/layoutHOC";
-
-import { getLayout } from "@calcom/features/settings/appDir/SettingsLayoutAppDir";
-
-export default WithLayout({ getServerLayout: getLayout });

apps/web/app/future/settings/(settings)/organizations/teams/other/[id]/profile/page.tsx

@@ -1,6 +1,8 @@
-import { _generateMetadata } from "app/_utils";
+import { _generateMetadata, getFixedT } from "app/_utils";
 
-import Page from "@calcom/features/ee/organizations/pages/settings/other-team-profile-view";
+import { getServerSessionForAppDir } from "@calcom/features/auth/lib/get-server-session-for-app-dir";
+import LegacyPage from "@calcom/features/ee/organizations/pages/settings/other-team-profile-view";
+import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
 
 export const generateMetadata = async () =>
   await _generateMetadata(
@@ -8,4 +10,15 @@ export const generateMetadata = async () =>
     (t) => t("profile_team_description")
   );
 
+const Page = async () => {
+  const session = await getServerSessionForAppDir();
+  const t = await getFixedT(session?.user.locale || "en");
+
+  return (
+    <SettingsHeader title={t("profile")} description={t("profile_team_description")}>
+      <LegacyPage isAppDir={true} />
+    </SettingsHeader>
+  );
+};
+
 export default Page;

apps/web/app/future/settings/(settings)/organizations/teams/other/layout.tsx

@@ -1,5 +0,0 @@
-import { WithLayout } from "app/layoutHOC";
-
-import { getLayout } from "@calcom/features/settings/appDir/SettingsLayoutAppDir";
-
-export default WithLayout({ getServerLayout: getLayout });

apps/web/app/future/settings/(settings)/organizations/teams/other/page.ts

@@ -1,11 +0,0 @@
-import { _generateMetadata } from "app/_utils";
-
-import Page from "@calcom/features/ee/organizations/pages/settings/other-team-listing-view";
-
-export const generateMetadata = async () =>
-  await _generateMetadata(
-    (t) => t("org_admin_other_teams"),
-    (t) => t("org_admin_other_teams_description")
-  );
-
-export default Page;

apps/web/app/future/settings/(settings)/organizations/teams/other/page.tsx

@@ -0,0 +1,24 @@
+import { _generateMetadata, getFixedT } from "app/_utils";
+
+import { getServerSessionForAppDir } from "@calcom/features/auth/lib/get-server-session-for-app-dir";
+import LegacyPage from "@calcom/features/ee/organizations/pages/settings/other-team-listing-view";
+import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("org_admin_other_teams"),
+    (t) => t("org_admin_other_teams_description")
+  );
+
+const Page = async () => {
+  const session = await getServerSessionForAppDir();
+  const t = await getFixedT(session?.user.locale || "en");
+
+  return (
+    <SettingsHeader title={t("org_admin_other_teams")} description={t("org_admin_other_teams_description")}>
+      <LegacyPage isAppDir={true} />
+    </SettingsHeader>
+  );
+};
+
+export default Page;

apps/web/app/future/settings/(settings)/teams/[id]/appearance/page.tsx

@@ -1,6 +1,8 @@
-import { _generateMetadata } from "app/_utils";
+import { _generateMetadata, getFixedT } from "app/_utils";
 
-import Page from "@calcom/features/ee/teams/pages/team-appearance-view";
+import { getServerSessionForAppDir } from "@calcom/features/auth/lib/get-server-session-for-app-dir";
+import LegacyPage from "@calcom/features/ee/teams/pages/team-appearance-view";
+import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
 
 export const generateMetadata = async () =>
   await _generateMetadata(
@@ -8,4 +10,18 @@ export const generateMetadata = async () =>
     (t) => t("appearance_team_description")
   );
 
+const Page = async () => {
+  const session = await getServerSessionForAppDir();
+  const t = await getFixedT(session?.user.locale || "en");
+
+  return (
+    <SettingsHeader
+      title={t("booking_appearance")}
+      description={t("appearance_team_description")}
+      borderInShellHeader={false}>
+      <LegacyPage isAppDir={true} />
+    </SettingsHeader>
+  );
+};
+
 export default Page;

apps/web/app/future/settings/(settings)/teams/[id]/billing/page.tsx

@@ -1,11 +1,4 @@
-import { _generateMetadata } from "app/_utils";
+import BillingPage, { generateMetadata } from "../../../billing/page";
 
-import Page from "~/settings/billing/billing-view";
-
-export const generateMetadata = async () =>
-  await _generateMetadata(
-    (t) => t("billing"),
-    (t) => t("team_billing_description")
-  );
-
-export default Page;
+export { generateMetadata };
+export default BillingPage;

apps/web/app/future/settings/(settings)/teams/[id]/members/page.tsx

@@ -1,6 +1,8 @@
-import { _generateMetadata } from "app/_utils";
+import { _generateMetadata, getFixedT } from "app/_utils";
 
-import Page from "@calcom/features/ee/teams/pages/team-members-view";
+import { getServerSessionForAppDir } from "@calcom/features/auth/lib/get-server-session-for-app-dir";
+import LegacyPage from "@calcom/features/ee/teams/pages/team-members-view";
+import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
 
 export const generateMetadata = async () =>
   await _generateMetadata(
@@ -8,4 +10,15 @@ export const generateMetadata = async () =>
     (t) => t("members_team_description")
   );
 
+const Page = async () => {
+  const session = await getServerSessionForAppDir();
+  const t = await getFixedT(session?.user.locale || "en");
+
+  return (
+    <SettingsHeader title={t("team_members")} description={t("members_team_description")}>
+      <LegacyPage isAppDir={true} />
+    </SettingsHeader>
+  );
+};
+
 export default Page;

apps/web/app/future/settings/(settings)/teams/[id]/profile/page.tsx

@@ -1,6 +1,8 @@
-import { _generateMetadata } from "app/_utils";
+import { _generateMetadata, getFixedT } from "app/_utils";
 
-import Page from "@calcom/features/ee/teams/pages/team-profile-view";
+import { getServerSessionForAppDir } from "@calcom/features/auth/lib/get-server-session-for-app-dir";
+import LegacyPage from "@calcom/features/ee/teams/pages/team-profile-view";
+import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
 
 export const generateMetadata = async () =>
   await _generateMetadata(
@@ -8,4 +10,18 @@ export const generateMetadata = async () =>
     (t) => t("profile_team_description")
   );
 
+const Page = async () => {
+  const session = await getServerSessionForAppDir();
+  const t = await getFixedT(session?.user.locale || "en");
+
+  return (
+    <SettingsHeader
+      title={t("profile")}
+      description={t("profile_team_description")}
+      borderInShellHeader={true}>
+      <LegacyPage isAppDir={true} />
+    </SettingsHeader>
+  );
+};
+
 export default Page;

apps/web/app/future/settings/(settings)/teams/page.ts

@@ -1,11 +0,0 @@
-import { _generateMetadata } from "app/_utils";
-
-import Page from "@calcom/features/ee/teams/pages/team-listing-view";
-
-export const generateMetadata = async () =>
-  await _generateMetadata(
-    (t) => t("teams"),
-    (t) => t("create_manage_teams_collaborative")
-  );
-
-export default Page;

apps/web/app/future/settings/(settings)/teams/page.tsx

@@ -0,0 +1,24 @@
+import { _generateMetadata, getFixedT } from "app/_utils";
+
+import { getServerSessionForAppDir } from "@calcom/features/auth/lib/get-server-session-for-app-dir";
+import LegacyPage from "@calcom/features/ee/teams/pages/team-listing-view";
+import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("teams"),
+    (t) => t("create_manage_teams_collaborative")
+  );
+
+const Page = async () => {
+  const session = await getServerSessionForAppDir();
+  const t = await getFixedT(session?.user.locale || "en");
+
+  return (
+    <SettingsHeader title={t("teams")} description={t("create_manage_teams_collaborative")}>
+      <LegacyPage isAppDir={true} />
+    </SettingsHeader>
+  );
+};
+
+export default Page;

apps/web/app/future/settings/organizations/[id]/about/page.tsx

@@ -1,6 +1,9 @@
+import { withAppDirSsr } from "app/WithAppDirSsr";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
 
+import { getServerSideProps } from "@calcom/features/ee/organizations/pages/organization";
+
 import LegacyPage, { LayoutWrapper } from "~/settings/organizations/[id]/about-view";
 
 export const generateMetadata = async () =>
@@ -9,7 +12,10 @@ export const generateMetadata = async () =>
     (t) => t("about_your_organization_description")
   );
 
+const getData = withAppDirSsr(getServerSideProps);
+
 export default WithLayout({
   Page: LegacyPage,
   getLayout: LayoutWrapper,
+  getData,
 });

apps/web/app/future/settings/organizations/[id]/add-teams/page.tsx

@@ -1,6 +1,9 @@
+import { withAppDirSsr } from "app/WithAppDirSsr";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
 
+import { getServerSideProps } from "@calcom/features/ee/organizations/pages/organization";
+
 import LegacyPage, { LayoutWrapper } from "~/settings/organizations/[id]/add-teams-view";
 
 export const generateMetadata = async () =>
@@ -9,7 +12,10 @@ export const generateMetadata = async () =>
     (t) => t("create_your_teams_description")
   );
 
+const getData = withAppDirSsr(getServerSideProps);
+
 export default WithLayout({
   Page: LegacyPage,
   getLayout: LayoutWrapper,
+  getData,
 });

apps/web/app/future/settings/organizations/[id]/onboard-members/page.tsx

@@ -1,6 +1,9 @@
+import { withAppDirSsr } from "app/WithAppDirSsr";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
 
+import { getServerSideProps } from "@calcom/features/ee/organizations/pages/organization";
+
 import LegacyPage, { LayoutWrapper } from "~/settings/organizations/[id]/onboard-members-view";
 
 export const generateMetadata = async () =>
@@ -9,7 +12,10 @@ export const generateMetadata = async () =>
     (t) => t("invite_organization_admins_description")
   );
 
+const getData = withAppDirSsr(getServerSideProps);
+
 export default WithLayout({
   Page: LegacyPage,
   getLayout: LayoutWrapper,
+  getData,
 });

apps/web/app/future/settings/organizations/appearance/page.tsx

@@ -1,4 +1,5 @@
 import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
 
 import Page from "@calcom/features/ee/organizations/pages/settings/appearance";
 
@@ -8,4 +9,4 @@ export const generateMetadata = async () =>
     (t) => t("appearance_org_description")
   );
 
-export default Page;
+export default WithLayout({ Page });

apps/web/app/future/settings/teams/[id]/event-type/page.tsx

@@ -1,11 +1,12 @@
-import LegacyPage, { GetLayout } from "@pages/settings/teams/[id]/event-type";
 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: LegacyPage, getLayout: GetLayout })<"P">;
+export default WithLayout({ Page: CreateTeamEventType, getLayout: GetLayout })<"P">;

apps/web/app/future/settings/teams/[id]/onboard-members/page.tsx

@@ -1,11 +1,12 @@
-import LegacyPage, { GetLayout } from "@pages/settings/teams/[id]/onboard-members";
 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: LegacyPage, getLayout: GetLayout })<"P">;
+export default WithLayout({ Page: AddNewTeamMembers, getLayout: GetLayout })<"P">;

apps/web/app/future/settings/teams/new/page.tsx

@@ -1,11 +1,12 @@
-import LegacyPage, { LayoutWrapper } from "@pages/settings/teams/new/index";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
 
+import CreateNewTeamView, { LayoutWrapper } from "~/settings/teams/new/create-new-team-view";
+
 export const generateMetadata = async () =>
   await _generateMetadata(
     (t) => t("create_new_team"),
     (t) => t("create_new_team_description")
   );
 
-export default WithLayout({ Page: LegacyPage, getLayout: LayoutWrapper })<"P">;
+export default WithLayout({ Page: CreateNewTeamView, getLayout: LayoutWrapper })<"P">;

apps/web/modules/settings/teams/[id]/event-types-view.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+
+import { TeamEventTypeForm } from "@calcom/features/ee/teams/components/TeamEventTypeForm";
+import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { WizardLayout } from "@calcom/ui";
+import { Button, showToast } from "@calcom/ui";
+
+export const CreateTeamEventType = () => {
+  const searchParams = useCompatSearchParams();
+  const { t } = useLocale();
+  const router = useRouter();
+  const teamId = searchParams?.get("id") ? Number(searchParams.get("id")) : -1;
+
+  const onSuccessMutation = () => {
+    router.push(`/settings/teams/${teamId}/profile`);
+  };
+
+  const onErrorMutation = (err: string) => {
+    showToast(err, "error");
+  };
+
+  const SubmitButton = (isPending: boolean) => {
+    return (
+      <Button
+        data-testid="finish-button"
+        type="submit"
+        color="primary"
+        className="w-full justify-center"
+        disabled={isPending}>
+        {t("finish")}
+      </Button>
+    );
+  };
+
+  return (
+    <TeamEventTypeForm
+      isTeamAdminOrOwner={true}
+      teamId={teamId}
+      SubmitButton={SubmitButton}
+      onSuccessMutation={onSuccessMutation}
+      onErrorMutation={onErrorMutation}
+      isInfiniteScrollEnabled={false}
+    />
+  );
+};
+
+export const GetLayout = (page: React.ReactElement) => {
+  const router = useRouter();
+  const searchParams = useCompatSearchParams();
+  const teamId = searchParams?.get("id") ? Number(searchParams.get("id")) : -1;
+
+  return (
+    <WizardLayout
+      currentStep={3}
+      maxSteps={3}
+      isOptionalCallback={() => {
+        router.push(`/settings/teams/${teamId}/profile`);
+      }}>
+      {page}
+    </WizardLayout>
+  );
+};
+
+export default CreateTeamEventType;

apps/web/modules/settings/teams/[id]/onboard-members-view.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import AddNewTeamMembers from "@calcom/features/ee/teams/components/AddNewTeamMembers";
+import { WizardLayout } from "@calcom/ui";
+
+export const GetLayout = (page: React.ReactElement) => (
+  <WizardLayout currentStep={2} maxSteps={3}>
+    {page}
+  </WizardLayout>
+);
+
+export default AddNewTeamMembers;

apps/web/modules/settings/teams/new/create-new-team-view.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import React from "react";
+import { z } from "zod";
+
+import { CreateANewTeamForm } from "@calcom/features/ee/teams/components";
+import { HOSTED_CAL_FEATURES } from "@calcom/lib/constants";
+import { getSafeRedirectUrl } from "@calcom/lib/getSafeRedirectUrl";
+import { useParamsWithFallback } from "@calcom/lib/hooks/useParamsWithFallback";
+import { telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
+import type { RouterOutputs } from "@calcom/trpc/react";
+import { WizardLayout } from "@calcom/ui";
+
+const querySchema = z.object({
+  returnTo: z.string().optional(),
+  slug: z.string().optional(),
+});
+
+const CreateNewTeamPage = () => {
+  const params = useParamsWithFallback();
+  const parsedQuery = querySchema.safeParse(params);
+  const router = useRouter();
+  const telemetry = useTelemetry();
+
+  const isTeamBillingEnabledClient = !!process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY && HOSTED_CAL_FEATURES;
+  const flag = isTeamBillingEnabledClient
+    ? {
+        telemetryEvent: telemetryEventTypes.team_checkout_session_created,
+        submitLabel: "checkout",
+      }
+    : {
+        telemetryEvent: telemetryEventTypes.team_created,
+        submitLabel: "continue",
+      };
+
+  const returnToParam =
+    (parsedQuery.success ? getSafeRedirectUrl(parsedQuery.data.returnTo) : "/teams") || "/teams";
+
+  const onSuccess = (data: RouterOutputs["viewer"]["teams"]["create"]) => {
+    telemetry.event(flag.telemetryEvent);
+    router.push(data.url);
+  };
+
+  return (
+    <CreateANewTeamForm
+      slug={parsedQuery.success ? parsedQuery.data.slug : ""}
+      onCancel={() => router.push(returnToParam)}
+      submitLabel={flag.submitLabel}
+      onSuccess={onSuccess}
+    />
+  );
+};
+export const LayoutWrapper = (page: React.ReactElement) => {
+  return (
+    <WizardLayout currentStep={1} maxSteps={3}>
+      {page}
+    </WizardLayout>
+  );
+};
+
+export default CreateNewTeamPage;

apps/web/pages/settings/organizations/billing.tsx

@@ -1,9 +1,3 @@
-import type { CalPageWrapper } from "@components/PageWrapper";
-import PageWrapper from "@components/PageWrapper";
-
 import BillingPage from "../../settings/billing/index";
 
-const Page = BillingPage as CalPageWrapper;
-Page.PageWrapper = PageWrapper;
-
-export default Page;
+export default BillingPage;

apps/web/pages/settings/organizations/general.tsx

@@ -1,9 +1,11 @@
 import OrgGeneralView from "@calcom/features/ee/organizations/pages/settings/general";
+import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
 
-import type { CalPageWrapper } from "@components/PageWrapper";
 import PageWrapper from "@components/PageWrapper";
 
-const Page = OrgGeneralView as CalPageWrapper;
+const Page = () => <OrgGeneralView />;
+
+Page.getLayout = getLayout;
 Page.PageWrapper = PageWrapper;
 
 export default Page;

apps/web/pages/settings/organizations/members.tsx

@@ -1,6 +1,6 @@
 import MembersView from "@calcom/features/ee/organizations/pages/settings/members";
+import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
 
-import type { CalPageWrapper } from "@components/PageWrapper";
 import PageWrapper from "@components/PageWrapper";
 
 export {
@@ -8,7 +8,9 @@ export {
   type PageProps,
 } from "@calcom/features/ee/organizations/pages/settings/getServerSidePropsMembers";
 
-const Page = MembersView as unknown as CalPageWrapper;
+const Page = () => <MembersView />;
+
+Page.getLayout = getLayout;
 Page.PageWrapper = PageWrapper;
 
 export default Page;

apps/web/pages/settings/organizations/profile.tsx

@@ -1,9 +1,11 @@
 import OrgProfileView from "@calcom/features/ee/organizations/pages/settings/profile";
+import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
 
-import type { CalPageWrapper } from "@components/PageWrapper";
 import PageWrapper from "@components/PageWrapper";
 
-const Page = OrgProfileView as CalPageWrapper;
+const Page = () => <OrgProfileView />;
+
+Page.getLayout = getLayout;
 Page.PageWrapper = PageWrapper;
 
 export default Page;

apps/web/pages/settings/organizations/sso.tsx

@@ -1,9 +1,11 @@
 import OrgSSOView from "@calcom/features/ee/sso/page/orgs-sso-view";
+import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
 
-import type { CalPageWrapper } from "@components/PageWrapper";
 import PageWrapper from "@components/PageWrapper";
 
-const Page = OrgSSOView as CalPageWrapper;
+const Page = () => <OrgSSOView />;
+
+Page.getLayout = getLayout;
 Page.PageWrapper = PageWrapper;
 
 export default Page;

apps/web/pages/settings/organizations/teams/other/[id]/appearance.tsx

@@ -1,9 +1,11 @@
 import TeamAppearenceView from "@calcom/features/ee/teams/pages/team-appearance-view";
+import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
 
-import type { CalPageWrapper } from "@components/PageWrapper";
 import PageWrapper from "@components/PageWrapper";
 
-const Page = TeamAppearenceView as CalPageWrapper;
+const Page = () => <TeamAppearenceView />;
+
+Page.getLayout = getLayout;
 Page.PageWrapper = PageWrapper;
 
 export default Page;

apps/web/pages/settings/organizations/teams/other/[id]/members.tsx

@@ -1,9 +1,11 @@
 import TeamMembersView from "@calcom/features/ee/organizations/pages/settings/other-team-members-view";
+import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
 
-import type { CalPageWrapper } from "@components/PageWrapper";
 import PageWrapper from "@components/PageWrapper";
 
-const Page = TeamMembersView as CalPageWrapper;
+const Page = () => <TeamMembersView />;
+
+Page.getLayout = getLayout;
 Page.PageWrapper = PageWrapper;
 
 export default Page;

apps/web/pages/settings/organizations/teams/other/[id]/profile.tsx

@@ -1,9 +1,11 @@
 import OtherTeamProfileView from "@calcom/features/ee/organizations/pages/settings/other-team-profile-view";
+import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
 
-import type { CalPageWrapper } from "@components/PageWrapper";
 import PageWrapper from "@components/PageWrapper";
 
-const Page = OtherTeamProfileView as CalPageWrapper;
+const Page = () => <OtherTeamProfileView />;
+
+Page.getLayout = getLayout;
 Page.PageWrapper = PageWrapper;
 
 export default Page;

apps/web/pages/settings/organizations/teams/other/index.tsx

@@ -1,9 +1,11 @@
 import OtherTeamListView from "@calcom/features/ee/organizations/pages/settings/other-team-listing-view";
+import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
 
 import PageWrapper from "@components/PageWrapper";
-import type { CalPageWrapper } from "@components/PageWrapper";
 
-const Page = OtherTeamListView as CalPageWrapper;
+const Page = () => <OtherTeamListView />;
+
+Page.getLayout = getLayout;
 Page.PageWrapper = PageWrapper;
 
 export default Page;

apps/web/pages/settings/teams/[id]/appearance.tsx

@@ -1,9 +1,11 @@
 import TeamAppearenceView from "@calcom/features/ee/teams/pages/team-appearance-view";
+import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
 
-import type { CalPageWrapper } from "@components/PageWrapper";
 import PageWrapper from "@components/PageWrapper";
 
-const Page = TeamAppearenceView as CalPageWrapper;
+const Page = () => <TeamAppearenceView />;
+
+Page.getLayout = getLayout;
 Page.PageWrapper = PageWrapper;
 
 export default Page;

apps/web/pages/settings/teams/[id]/billing.tsx

@@ -1,9 +1,3 @@
-import type { CalPageWrapper } from "@components/PageWrapper";
-import PageWrapper from "@components/PageWrapper";
-
 import BillingPage from "../../billing";
 
-const Page = BillingPage as CalPageWrapper;
-Page.PageWrapper = PageWrapper;
-
-export default Page;
+export default BillingPage;

apps/web/pages/settings/teams/[id]/event-type.tsx

@@ -1,54 +1,12 @@
 "use client";
 
 import Head from "next/head";
-import { useRouter } from "next/navigation";
 
-import { TeamEventTypeForm } from "@calcom/features/ee/teams/components/TeamEventTypeForm";
-import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { WizardLayout } from "@calcom/ui";
-import { Button, showToast } from "@calcom/ui";
 
 import PageWrapper from "@components/PageWrapper";
 
-export const CreateTeamEventType = () => {
-  const searchParams = useCompatSearchParams();
-  const { t } = useLocale();
-  const router = useRouter();
-  const teamId = searchParams?.get("id") ? Number(searchParams.get("id")) : -1;
-
-  const onSuccessMutation = () => {
-    router.push(`/settings/teams/${teamId}/profile`);
-  };
-
-  const onErrorMutation = (err: string) => {
-    showToast(err, "error");
-  };
-
-  const SubmitButton = (isPending: boolean) => {
-    return (
-      <Button
-        data-testid="finish-button"
-        type="submit"
-        color="primary"
-        className="w-full justify-center"
-        disabled={isPending}>
-        {t("finish")}
-      </Button>
-    );
-  };
-
-  return (
-    <TeamEventTypeForm
-      isTeamAdminOrOwner={true}
-      teamId={teamId}
-      SubmitButton={SubmitButton}
-      onSuccessMutation={onSuccessMutation}
-      onErrorMutation={onErrorMutation}
-      isInfiniteScrollEnabled={false}
-    />
-  );
-};
+import CreateTeamEventType, { GetLayout } from "~/settings/teams/[id]/event-types-view";
 
 const TeamEventTypePage = () => {
   const { t } = useLocale();
@@ -63,23 +21,6 @@ const TeamEventTypePage = () => {
   );
 };
 
-export const GetLayout = (page: React.ReactElement) => {
-  const router = useRouter();
-  const searchParams = useCompatSearchParams();
-  const teamId = searchParams?.get("id") ? Number(searchParams.get("id")) : -1;
-
-  return (
-    <WizardLayout
-      currentStep={3}
-      maxSteps={3}
-      isOptionalCallback={() => {
-        router.push(`/settings/teams/${teamId}/profile`);
-      }}>
-      {page}
-    </WizardLayout>
-  );
-};
-
 TeamEventTypePage.getLayout = GetLayout;
 TeamEventTypePage.PageWrapper = PageWrapper;
 

apps/web/pages/settings/teams/[id]/members.tsx

@@ -1,9 +1,11 @@
 import TeamMembersView from "@calcom/features/ee/teams/pages/team-members-view";
+import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
 
-import type { CalPageWrapper } from "@components/PageWrapper";
 import PageWrapper from "@components/PageWrapper";
 
-const Page = TeamMembersView as CalPageWrapper;
+const Page = () => <TeamMembersView />;
+
+Page.getLayout = getLayout;
 Page.PageWrapper = PageWrapper;
 
 export default Page;

apps/web/pages/settings/teams/[id]/onboard-members.tsx

@@ -2,12 +2,12 @@
 
 import Head from "next/head";
 
-import AddNewTeamMembers from "@calcom/features/ee/teams/components/AddNewTeamMembers";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { WizardLayout } from "@calcom/ui";
 
 import PageWrapper from "@components/PageWrapper";
 
+import AddNewTeamMembers, { GetLayout } from "~/settings/teams/[id]/onboard-members-view";
+
 const OnboardTeamMembersPage = () => {
   const { t } = useLocale();
   return (
@@ -21,12 +21,6 @@ const OnboardTeamMembersPage = () => {
   );
 };
 
-export const GetLayout = (page: React.ReactElement) => (
-  <WizardLayout currentStep={2} maxSteps={3}>
-    {page}
-  </WizardLayout>
-);
-
 OnboardTeamMembersPage.getLayout = GetLayout;
 OnboardTeamMembersPage.PageWrapper = PageWrapper;
 

apps/web/pages/settings/teams/[id]/profile.tsx

@@ -1,9 +1,11 @@
 import TeamProfileView from "@calcom/features/ee/teams/pages/team-profile-view";
+import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
 
-import type { CalPageWrapper } from "@components/PageWrapper";
 import PageWrapper from "@components/PageWrapper";
 
-const Page = TeamProfileView as CalPageWrapper;
+const Page = () => <TeamProfileView />;
+
+Page.getLayout = getLayout;
 Page.PageWrapper = PageWrapper;
 
 export default Page;

apps/web/pages/settings/teams/index.ts

@@ -1,9 +0,0 @@
-import TeamListView from "@calcom/features/ee/teams/pages/team-listing-view";
-
-import PageWrapper from "@components/PageWrapper";
-import type { CalPageWrapper } from "@components/PageWrapper";
-
-const Page = TeamListView as CalPageWrapper;
-Page.PageWrapper = PageWrapper;
-
-export default Page;

apps/web/pages/settings/teams/index.tsx

@@ -0,0 +1,11 @@
+import TeamListingView from "@calcom/features/ee/teams/pages/team-listing-view";
+import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
+
+import PageWrapper from "@components/PageWrapper";
+
+const Page = () => <TeamListingView />;
+
+Page.getLayout = getLayout;
+Page.PageWrapper = PageWrapper;
+
+export default Page;

apps/web/pages/settings/teams/new/index.tsx

@@ -1,50 +1,15 @@
 "use client";
 
 import Head from "next/head";
-import { useRouter } from "next/navigation";
-import { z } from "zod";
 
-import { CreateANewTeamForm } from "@calcom/features/ee/teams/components";
-import { HOSTED_CAL_FEATURES } from "@calcom/lib/constants";
-import { getSafeRedirectUrl } from "@calcom/lib/getSafeRedirectUrl";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { useParamsWithFallback } from "@calcom/lib/hooks/useParamsWithFallback";
-import { telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
-import type { RouterOutputs } from "@calcom/trpc/react";
-import { WizardLayout } from "@calcom/ui";
 
 import PageWrapper from "@components/PageWrapper";
 
-const querySchema = z.object({
-  returnTo: z.string().optional(),
-  slug: z.string().optional(),
-});
+import CreateNewTeamView, { LayoutWrapper } from "~/settings/teams/new/create-new-team-view";
 
 const CreateNewTeamPage = () => {
   const { t } = useLocale();
-  const params = useParamsWithFallback();
-  const parsedQuery = querySchema.safeParse(params);
-  const router = useRouter();
-  const telemetry = useTelemetry();
-
-  const isTeamBillingEnabledClient = !!process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY && HOSTED_CAL_FEATURES;
-  const flag = isTeamBillingEnabledClient
-    ? {
-        telemetryEvent: telemetryEventTypes.team_checkout_session_created,
-        submitLabel: "checkout",
-      }
-    : {
-        telemetryEvent: telemetryEventTypes.team_created,
-        submitLabel: "continue",
-      };
-
-  const returnToParam =
-    (parsedQuery.success ? getSafeRedirectUrl(parsedQuery.data.returnTo) : "/teams") || "/teams";
-
-  const onSuccess = (data: RouterOutputs["viewer"]["teams"]["create"]) => {
-    telemetry.event(flag.telemetryEvent);
-    router.push(data.url);
-  };
 
   return (
     <>
@@ -52,22 +17,10 @@ const CreateNewTeamPage = () => {
         <title>{t("create_new_team")}</title>
         <meta name="description" content={t("create_new_team_description")} />
       </Head>
-      <CreateANewTeamForm
-        slug={parsedQuery.success ? parsedQuery.data.slug : ""}
-        onCancel={() => router.push(returnToParam)}
-        submitLabel={flag.submitLabel}
-        onSuccess={onSuccess}
-      />
+      <CreateNewTeamView />
     </>
   );
 };
-export const LayoutWrapper = (page: React.ReactElement) => {
-  return (
-    <WizardLayout currentStep={1} maxSteps={3}>
-      {page}
-    </WizardLayout>
-  );
-};
 
 CreateNewTeamPage.getLayout = LayoutWrapper;
 CreateNewTeamPage.PageWrapper = PageWrapper;

packages/features/ee/components/CommonSkeletonLoaders.tsx

@@ -1,10 +1,18 @@
 import SectionBottomActions from "@calcom/features/settings/SectionBottomActions";
 import { Meta, SkeletonButton, SkeletonContainer, SkeletonText } from "@calcom/ui";
 
-export const AppearanceSkeletonLoader = ({ title, description }: { title: string; description: string }) => {
+export const AppearanceSkeletonLoader = ({
+  title,
+  description,
+  isAppDir,
+}: {
+  title: string;
+  description: string;
+  isAppDir?: boolean;
+}) => {
   return (
     <SkeletonContainer>
-      <Meta title={title} description={description} borderInShellHeader={false} />
+      {!isAppDir ? <Meta title={title} description={description} borderInShellHeader={false} /> : null}
       <div className="border-subtle mt-6 flex items-center rounded-t-xl border p-6 text-sm">
         <SkeletonText className="h-8 w-1/3" />
       </div>

packages/features/ee/organizations/pages/organization.tsx

@@ -11,7 +11,7 @@ export const getServerSideProps = async ({ req, res }: GetServerSidePropsContext
   if (!organizationsEnabled) {
     return {
       notFound: true,
-    };
+    } as const;
   }
 
   // Check if logged in user has an organization assigned
@@ -20,7 +20,7 @@ export const getServerSideProps = async ({ req, res }: GetServerSidePropsContext
   if (!session?.user.profile?.organizationId) {
     return {
       notFound: true,
-    };
+    } as const;
   }
 
   // Check if logged in user has OWNER/ADMIN role in organization
@@ -36,7 +36,7 @@ export const getServerSideProps = async ({ req, res }: GetServerSidePropsContext
   if (!membership?.role || membership?.role === MembershipRole.MEMBER) {
     return {
       notFound: true,
-    };
+    } as const;
   }
 
   // Otherwise, all good

packages/features/ee/organizations/pages/settings/general.tsx

@@ -7,7 +7,6 @@ import { Controller, useForm } from "react-hook-form";
 
 import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
 import SectionBottomActions from "@calcom/features/settings/SectionBottomActions";
-import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { nameOfDay } from "@calcom/lib/weekday";
 import { MembershipRole } from "@calcom/prisma/enums";
@@ -29,10 +28,18 @@ import {
 import { LockEventTypeSwitch } from "../components/LockEventTypeSwitch";
 import { NoSlotsNotificationSwitch } from "../components/NoSlotsNotificationSwitch";
 
-const SkeletonLoader = ({ title, description }: { title: string; description: string }) => {
+const SkeletonLoader = ({
+  title,
+  description,
+  isAppDir,
+}: {
+  title: string;
+  description: string;
+  isAppDir?: boolean;
+}) => {
   return (
     <SkeletonContainer>
-      <Meta title={title} description={description} borderInShellHeader={true} />
+      {!isAppDir ? <Meta title={title} description={description} borderInShellHeader={true} /> : null}
       <div className="mb-8 mt-6 space-y-6">
         <SkeletonText className="h-8 w-full" />
         <SkeletonText className="h-8 w-full" />
@@ -51,7 +58,7 @@ interface GeneralViewProps {
   localeProp: string;
 }
 
-const OrgGeneralView = () => {
+const OrgGeneralView = ({ isAppDir }: { isAppDir?: boolean }) => {
   const { t } = useLocale();
   const router = useRouter();
   const session = useSession();
@@ -85,6 +92,7 @@ const OrgGeneralView = () => {
         currentOrg={currentOrg}
         isAdminOrOwner={isAdminOrOwner}
         localeProp={user?.locale ?? "en"}
+        isAppDir={isAppDir}
       />
 
       <LockEventTypeSwitch currentOrg={currentOrg} isAdminOrOwner={!!isAdminOrOwner} />
@@ -93,7 +101,12 @@ const OrgGeneralView = () => {
   );
 };
 
-const GeneralView = ({ currentOrg, isAdminOrOwner, localeProp }: GeneralViewProps) => {
+const GeneralView = ({
+  currentOrg,
+  isAdminOrOwner,
+  localeProp,
+  isAppDir,
+}: GeneralViewProps & { isAppDir?: boolean }) => {
   const { t } = useLocale();
 
   const mutation = trpc.viewer.organizations.update.useMutation({
@@ -152,11 +165,13 @@ const GeneralView = ({ currentOrg, isAdminOrOwner, localeProp }: GeneralViewProp
           weekStart: values.weekStart.value,
         });
       }}>
-      <Meta
-        title={t("general")}
-        description={t("organization_general_description")}
-        borderInShellHeader={true}
-      />
+      {!isAppDir ? (
+        <Meta
+          title={t("general")}
+          description={t("organization_general_description")}
+          borderInShellHeader={true}
+        />
+      ) : null}
       <div className="border-subtle border-x border-y-0 px-4 py-8 sm:px-6">
         <Controller
           name="timeZone"
@@ -226,5 +241,4 @@ const GeneralView = ({ currentOrg, isAdminOrOwner, localeProp }: GeneralViewProp
   );
 };
 
-OrgGeneralView.getLayout = getLayout;
 export default OrgGeneralView;

packages/features/ee/organizations/pages/settings/members.tsx

@@ -1,14 +1,13 @@
 "use client";
 
 import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
-import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
 import { UserListTable } from "@calcom/features/users/components/UserTable/UserListTable";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { MembershipRole } from "@calcom/prisma/enums";
 import { trpc } from "@calcom/trpc/react";
 import { Meta } from "@calcom/ui";
 
-const MembersView = () => {
+const MembersView = ({ isAppDir }: { isAppDir?: boolean }) => {
   const { t } = useLocale();
   const { data: currentOrg, isPending } = trpc.viewer.organizations.listCurrent.useQuery();
 
@@ -21,7 +20,9 @@ const MembersView = () => {
 
   return (
     <LicenseRequired>
-      <Meta title={t("organization_members")} description={t("organization_description")} />
+      {!isAppDir ? (
+        <Meta title={t("organization_members")} description={t("organization_description")} />
+      ) : null}
       <div>{!isPending && canLoggedInUserSeeMembers && <UserListTable />}</div>
       {!canLoggedInUserSeeMembers && (
         <div className="border-subtle rounded-xl border p-6" data-testId="members-privacy-warning">
@@ -31,6 +32,5 @@ const MembersView = () => {
     </LicenseRequired>
   );
 };
-MembersView.getLayout = getLayout;
 
 export default MembersView;

packages/features/ee/organizations/pages/settings/other-team-listing-view.tsx

@@ -3,19 +3,18 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Meta } from "@calcom/ui";
 
-import { getLayout } from "../../../../settings/layouts/SettingsLayout";
 import { OtherTeamsListing } from "./../components/OtherTeamsListing";
 
-const OtherTeamListingView = (): React.ReactElement => {
+const OtherTeamListingView = ({ isAppDir }: { isAppDir?: boolean }): React.ReactElement => {
   const { t } = useLocale();
   return (
     <>
-      <Meta title={t("org_admin_other_teams")} description={t("org_admin_other_teams_description")} />
+      {!isAppDir ? (
+        <Meta title={t("org_admin_other_teams")} description={t("org_admin_other_teams_description")} />
+      ) : null}
       <OtherTeamsListing />
     </>
   );
 };
 
-OtherTeamListingView.getLayout = getLayout;
-
 export default OtherTeamListingView;

packages/features/ee/organizations/pages/settings/other-team-members-view.tsx

@@ -14,7 +14,6 @@ import { trpc } from "@calcom/trpc/react";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { Meta, showToast, Button } from "@calcom/ui";
 
-import { getLayout } from "../../../../settings/layouts/SettingsLayout";
 import MakeTeamPrivateSwitch from "../../../teams/components/MakeTeamPrivateSwitch";
 import MemberListItem from "../components/MemberListItem";
 
@@ -60,7 +59,7 @@ function MembersList(props: MembersListProps) {
   );
 }
 
-const MembersView = () => {
+const MembersView = ({ isAppDir }: { isAppDir?: boolean }) => {
   const { t, i18n } = useLocale();
   const router = useRouter();
   const params = useParamsWithFallback();
@@ -136,25 +135,27 @@ const MembersView = () => {
 
   return (
     <>
-      <Meta
-        title={t("team_members")}
-        description={t("members_team_description")}
-        CTA={
-          isOrgAdminOrOwner ? (
-            <Button
-              type="button"
-              color="primary"
-              StartIcon="plus"
-              className="ml-auto"
-              onClick={() => setShowMemberInvitationModal(true)}
-              data-testid="new-member-button">
-              {t("add")}
-            </Button>
-          ) : (
-            <></>
-          )
-        }
-      />
+      {!isAppDir ? (
+        <Meta
+          title={t("team_members")}
+          description={t("members_team_description")}
+          CTA={
+            isOrgAdminOrOwner ? (
+              <Button
+                type="button"
+                color="primary"
+                StartIcon="plus"
+                className="ml-auto"
+                onClick={() => setShowMemberInvitationModal(true)}
+                data-testid="new-member-button">
+                {t("add")}
+              </Button>
+            ) : (
+              <></>
+            )
+          }
+        />
+      ) : null}
       {!isPending && (
         <>
           <div>
@@ -246,6 +247,4 @@ const MembersView = () => {
   );
 };
 
-MembersView.getLayout = getLayout;
-
 export default MembersView;

packages/features/ee/organizations/pages/settings/other-team-profile-view.tsx

@@ -38,7 +38,6 @@ import {
   TextField,
 } from "@calcom/ui";
 
-import { getLayout } from "../../../../settings/layouts/SettingsLayout";
 import { subdomainSuffix } from "../../../organizations/lib/orgDomains";
 
 const regex = new RegExp("^[a-zA-Z0-9-]*$");
@@ -55,7 +54,7 @@ const teamProfileFormSchema = z.object({
   bio: z.string(),
 });
 
-const OtherTeamProfileView = () => {
+const OtherTeamProfileView = ({ isAppDir }: { isAppDir?: boolean }) => {
   const { t } = useLocale();
   const router = useRouter();
   const utils = trpc.useUtils();
@@ -170,7 +169,7 @@ const OtherTeamProfileView = () => {
 
   return (
     <>
-      <Meta title={t("profile")} description={t("profile_team_description")} />
+      {!isAppDir ? <Meta title={t("profile")} description={t("profile_team_description")} /> : null}
       {!isPending ? (
         <>
           {isAdmin ? (
@@ -369,6 +368,4 @@ const OtherTeamProfileView = () => {
   );
 };
 
-OtherTeamProfileView.getLayout = getLayout;
-
 export default OtherTeamProfileView;

packages/features/ee/organizations/pages/settings/profile.tsx

@@ -38,7 +38,6 @@ import {
 // if I include this in the above barrel import, I get a runtime error that the component is not exported.
 import { OrgBanner } from "@calcom/ui";
 
-import { getLayout } from "../../../../settings/layouts/SettingsLayout";
 import { useOrgBranding } from "../../../organizations/context/provider";
 
 const orgProfileFormSchema = z.object({
@@ -58,10 +57,18 @@ type FormValues = {
   calVideoLogo: string | null;
 };
 
-const SkeletonLoader = ({ title, description }: { title: string; description: string }) => {
+const SkeletonLoader = ({
+  title,
+  description,
+  isAppDir,
+}: {
+  title: string;
+  description: string;
+  isAppDir?: boolean;
+}) => {
   return (
     <SkeletonContainer>
-      <Meta title={title} description={description} borderInShellHeader={true} />
+      {!isAppDir ? <Meta title={title} description={description} borderInShellHeader={true} /> : null}
       <div className="border-subtle space-y-6 rounded-b-xl border border-t-0 px-4 py-8">
         <div className="flex items-center">
           <SkeletonAvatar className="me-4 mt-0 h-16 w-16 px-4" />
@@ -77,7 +84,7 @@ const SkeletonLoader = ({ title, description }: { title: string; description: st
   );
 };
 
-const OrgProfileView = () => {
+const OrgProfileView = ({ isAppDir }: { isAppDir?: boolean }) => {
   const { t } = useLocale();
   const router = useRouter();
 
@@ -103,7 +110,9 @@ const OrgProfileView = () => {
   );
 
   if (isPending || !orgBranding || !currentOrganisation) {
-    return <SkeletonLoader title={t("profile")} description={t("profile_org_description")} />;
+    return (
+      <SkeletonLoader isAppDir={isAppDir} title={t("profile")} description={t("profile_org_description")} />
+    );
   }
 
   const isOrgAdminOrOwner =
@@ -129,7 +138,9 @@ const OrgProfileView = () => {
 
   return (
     <LicenseRequired>
-      <Meta title={t("profile")} description={t("profile_org_description")} borderInShellHeader={true} />
+      {!isAppDir ? (
+        <Meta title={t("profile")} description={t("profile_org_description")} borderInShellHeader={true} />
+      ) : null}
       <>
         {isOrgAdminOrOwner ? (
           <>
@@ -399,6 +410,4 @@ const OrgProfileForm = ({ defaultValues }: { defaultValues: FormValues }) => {
   );
 };
 
-OrgProfileView.getLayout = getLayout;
-
 export default OrgProfileView;

packages/features/ee/sso/page/orgs-sso-view.tsx

@@ -6,10 +6,9 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { MembershipRole } from "@calcom/prisma/enums";
 import { AppSkeletonLoader as SkeletonLoader, Meta } from "@calcom/ui";
 
-import { getLayout } from "../../../settings/layouts/SettingsLayout";
 import SSOConfiguration from "../components/SSOConfiguration";
 
-const SAMLSSO = () => {
+const SAMLSSO = ({ isAppDir }: { isAppDir?: boolean }) => {
   const { t } = useLocale();
 
   const { data, status } = useSession();
@@ -26,7 +25,9 @@ const SAMLSSO = () => {
 
   return !!isAdminOrOwner ? (
     <div className="bg-default w-full sm:mx-0 xl:mt-0">
-      <Meta title={t("sso_configuration")} description={t("sso_configuration_description_orgs")} />
+      {!isAppDir ? (
+        <Meta title={t("sso_configuration")} description={t("sso_configuration_description_orgs")} />
+      ) : null}
       <SSOConfiguration teamId={org.id} />
     </div>
   ) : (
@@ -36,6 +37,4 @@ const SAMLSSO = () => {
   );
 };
 
-SAMLSSO.getLayout = getLayout;
-
 export default SAMLSSO;

packages/features/ee/teams/pages/team-appearance-view.tsx

@@ -17,16 +17,15 @@ import type { RouterOutputs } from "@calcom/trpc/react";
 import { Button, Form, Meta, showToast, SettingsToggle } from "@calcom/ui";
 
 import ThemeLabel from "../../../settings/ThemeLabel";
-import { getLayout } from "../../../settings/layouts/SettingsLayout";
 
 type BrandColorsFormValues = {
   brandColor: string;
   darkBrandColor: string;
 };
 
-type ProfileViewProps = { team: RouterOutputs["viewer"]["teams"]["getMinimal"] };
+type ProfileViewProps = { team: RouterOutputs["viewer"]["teams"]["getMinimal"] } & { isAppDir?: boolean };
 
-const ProfileView = ({ team }: ProfileViewProps) => {
+const ProfileView = ({ team, isAppDir }: ProfileViewProps) => {
   const { t } = useLocale();
   const utils = trpc.useUtils();
 
@@ -80,11 +79,13 @@ const ProfileView = ({ team }: ProfileViewProps) => {
 
   return (
     <>
-      <Meta
-        title={t("booking_appearance")}
-        description={t("appearance_team_description")}
-        borderInShellHeader={false}
-      />
+      {!isAppDir ? (
+        <Meta
+          title={t("booking_appearance")}
+          description={t("appearance_team_description")}
+          borderInShellHeader={false}
+        />
+      ) : null}
       {isAdmin ? (
         <>
           <Form
@@ -182,7 +183,7 @@ const ProfileView = ({ team }: ProfileViewProps) => {
   );
 };
 
-const ProfileViewWrapper = () => {
+const ProfileViewWrapper = ({ isAppDir }: { isAppDir?: boolean }) => {
   const router = useRouter();
   const params = useParamsWithFallback();
 
@@ -210,14 +211,16 @@ const ProfileViewWrapper = () => {
 
   if (isPending)
     return (
-      <AppearanceSkeletonLoader title={t("appearance")} description={t("appearance_team_description")} />
+      <AppearanceSkeletonLoader
+        isAppDir={isAppDir}
+        title={t("appearance")}
+        description={t("appearance_team_description")}
+      />
     );
 
   if (!team) return null;
 
-  return <ProfileView team={team} />;
+  return <ProfileView team={team} isAppDir={isAppDir} />;
 };
 
-ProfileViewWrapper.getLayout = getLayout;
-
 export default ProfileViewWrapper;

packages/features/ee/teams/pages/team-billing-view.tsx

@@ -1,34 +0,0 @@
-import { usePathname } from "next/navigation";
-
-import { WEBAPP_URL } from "@calcom/lib/constants";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, Meta } from "@calcom/ui";
-
-import { getLayout } from "../../../settings/layouts/SettingsLayout";
-
-const BillingView = () => {
-  const pathname = usePathname();
-  const { t } = useLocale();
-  const returnTo = pathname;
-  const billingHref = `/api/integrations/stripepayment/portal?returnTo=${WEBAPP_URL}${returnTo}`;
-  return (
-    <>
-      <Meta title={t("billing")} description={t("team_billing_description")} borderInShellHeader={true} />
-      <div className="text-default flex flex-col text-sm sm:flex-row">
-        <div>
-          <h2 className="font-medium">{t("view_and_manage_billing_details")}</h2>
-          <p>{t("view_and_edit_billing_details")}</p>
-        </div>
-        <div className="flex-shrink-0 pt-3 sm:ml-auto sm:pl-3 sm:pt-0">
-          <Button color="primary" href={billingHref} target="_blank" EndIcon="external-link">
-            {t("billing_portal")}
-          </Button>
-        </div>
-      </div>
-    </>
-  );
-};
-
-BillingView.getLayout = getLayout;
-
-export default BillingView;

packages/features/ee/teams/pages/team-listing-view.tsx

@@ -3,19 +3,16 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Meta } from "@calcom/ui";
 
-import { getLayout } from "../../../settings/layouts/SettingsLayout";
 import { TeamsListing } from "../components";
 
-const TeamListingView = () => {
+const TeamListingView = ({ isAppDir }: { isAppDir?: boolean }) => {
   const { t } = useLocale();
   return (
     <>
-      <Meta title={t("teams")} description={t("create_manage_teams_collaborative")} />
+      {!isAppDir ? <Meta title={t("teams")} description={t("create_manage_teams_collaborative")} /> : null}
       <TeamsListing />
     </>
   );
 };
 
-TeamListingView.getLayout = getLayout;
-
 export default TeamListingView;

packages/features/ee/teams/pages/team-members-view.tsx

@@ -10,7 +10,6 @@ import { MembershipRole } from "@calcom/prisma/enums";
 import { trpc } from "@calcom/trpc/react";
 import { Meta } from "@calcom/ui";
 
-import { getLayout } from "../../../settings/layouts/SettingsLayout";
 import DisableTeamImpersonation from "../components/DisableTeamImpersonation";
 import InviteLinkSettingsModal from "../components/InviteLinkSettingsModal";
 import MakeTeamPrivateSwitch from "../components/MakeTeamPrivateSwitch";
@@ -18,7 +17,7 @@ import { MemberInvitationModalWithoutMembers } from "../components/MemberInvitat
 import MemberListItem from "../components/MemberListItem";
 import TeamInviteList from "../components/TeamInviteList";
 
-const MembersView = () => {
+const MembersView = ({ isAppDir }: { isAppDir?: boolean }) => {
   const { t } = useLocale();
   const [showMemberInvitationModal, setShowMemberInvitationModal] = useState(false);
   const [showInviteLinkSettingsModal, setInviteLinkSettingsModal] = useState(false);
@@ -63,7 +62,9 @@ const MembersView = () => {
 
   return (
     <>
-      <Meta title={t("team_members")} description={t("members_team_description")} CTA={<></>} />
+      {!isAppDir ? (
+        <Meta title={t("team_members")} description={t("members_team_description")} CTA={<></>} />
+      ) : null}
       {!isPending && (
         <>
           <div>
@@ -140,6 +141,4 @@ const MembersView = () => {
   );
 };
 
-MembersView.getLayout = getLayout;
-
 export default MembersView;

packages/features/ee/teams/pages/team-profile-view.tsx

@@ -44,8 +44,6 @@ import {
   TextField,
 } from "@calcom/ui";
 
-import { getLayout } from "../../../settings/layouts/SettingsLayout";
-
 const regex = new RegExp("^[a-zA-Z0-9-]*$");
 
 const teamProfileFormSchema = z.object({
@@ -62,10 +60,18 @@ const teamProfileFormSchema = z.object({
 
 type FormValues = z.infer<typeof teamProfileFormSchema>;
 
-const SkeletonLoader = ({ title, description }: { title: string; description: string }) => {
+const SkeletonLoader = ({
+  isAppDir,
+  title,
+  description,
+}: {
+  isAppDir?: boolean;
+  title: string;
+  description: string;
+}) => {
   return (
     <SkeletonContainer>
-      <Meta title={title} description={description} borderInShellHeader={true} />
+      {!isAppDir ? <Meta title={title} description={description} borderInShellHeader={true} /> : null}
       <div className="border-subtle space-y-6 rounded-b-xl border border-t-0 px-4 py-8">
         <div className="flex items-center">
           <SkeletonAvatar className="me-4 mt-0 h-16 w-16 px-4" />
@@ -81,7 +87,7 @@ const SkeletonLoader = ({ title, description }: { title: string; description: st
   );
 };
 
-const ProfileView = () => {
+const ProfileView = ({ isAppDir }: { isAppDir?: boolean }) => {
   const params = useParamsWithFallback();
   const teamId = Number(params.id);
   const { t } = useLocale();
@@ -159,12 +165,16 @@ const ProfileView = () => {
   }
 
   if (isPending) {
-    return <SkeletonLoader title={t("profile")} description={t("profile_team_description")} />;
+    return (
+      <SkeletonLoader isAppDir={isAppDir} title={t("profile")} description={t("profile_team_description")} />
+    );
   }
 
   return (
     <>
-      <Meta title={t("profile")} description={t("profile_team_description")} borderInShellHeader={true} />
+      {!isAppDir ? (
+        <Meta title={t("profile")} description={t("profile_team_description")} borderInShellHeader={true} />
+      ) : null}
 
       {isAdmin ? (
         <TeamProfileForm team={team} />
@@ -438,6 +448,4 @@ const TeamProfileForm = ({ team }: TeamProfileFormProps) => {
   );
 };
 
-ProfileView.getLayout = getLayout;
-
 export default ProfileView;