chore: settings/organizations - remove pages router and use app router (#16774)

* remove pages router and use app router * remove future/settings/organizations files * fix billing page * sync SettingsLayoutAppDirClient and fix members page * fix attribute pages * remove isAppDir where not needed anymore * add CTA button for members view
2024-11-25 16:49:00 -05:00
parent aea8588a21
commit f097f852ad
61 changed files with 154 additions and 504 deletions
@@ -348,7 +348,6 @@ AB_TEST_BUCKET_PROBABILITY=50
 # whether we redirect to the future/event-types from event-types or not
 APP_ROUTER_EVENT_TYPES_ENABLED=0
 APP_ROUTER_SETTINGS_DEVELOPER_ENABLED=0
-APP_ROUTER_SETTINGS_ORG_ENABLED=0
 APP_ROUTER_APPS_INSTALLED_CATEGORY_ENABLED=0
 APP_ROUTER_APPS_SLUG_ENABLED=0
 APP_ROUTER_APPS_SLUG_SETUP_ENABLED=0
@@ -8,7 +8,6 @@ import { FUTURE_ROUTES_ENABLED_COOKIE_NAME, FUTURE_ROUTES_OVERRIDE_COOKIE_NAME }
 const ROUTES: [URLPattern, boolean][] = [
  ["/event-types", process.env.APP_ROUTER_EVENT_TYPES_ENABLED === "1"] as const,
  ["/settings/developer/:path*", process.env.APP_ROUTER_SETTINGS_DEVELOPER_ENABLED === "1"] as const,
-  ["/settings/organizations/:path*", process.env.APP_ROUTER_SETTINGS_ORG_ENABLED === "1"] as const,
  ["/apps/installed/:category", process.env.APP_ROUTER_APPS_INSTALLED_CATEGORY_ENABLED === "1"] as const,
  ["/apps/:slug", process.env.APP_ROUTER_APPS_SLUG_ENABLED === "1"] as const,
  ["/apps/:slug/setup", process.env.APP_ROUTER_APPS_SLUG_SETUP_ENABLED === "1"] as const,
@@ -1,11 +0,0 @@
-import { _generateMetadata } from "app/_utils";
-
-import Page from "@calcom/ee/organizations/pages/settings/attributes/attributes-edit-view";
-
-export const generateMetadata = async () =>
-  await _generateMetadata(
-    () => "Attribute",
-    (t) => t("edit_attribute_description")
-  );
-
-export default Page;
@@ -1,11 +0,0 @@
-import { _generateMetadata } from "app/_utils";
-
-import Page from "@calcom/ee/organizations/pages/settings/attributes/attributes-create-view";
-
-export const generateMetadata = async () =>
-  await _generateMetadata(
-    () => "Attribute",
-    () => "Create an attribute for your team members"
-  );
-
-export default Page;
@@ -1,11 +0,0 @@
-import { _generateMetadata } from "app/_utils";
-
-import Page from "@calcom/ee/organizations/pages/settings/attributes/attributes-list-view";
-
-export const generateMetadata = async () =>
-  await _generateMetadata(
-    (t) => t("attributes"),
-    (t) => t("attribute_meta_description")
-  );
-
-export default Page;
@@ -1,5 +0,0 @@
-import BillingPage, { generateMetadata } from "../../billing/page";
-
-export { generateMetadata };
-
-export default BillingPage;
@@ -0,0 +1,24 @@
+import { _generateMetadata, getFixedT } from "app/_utils";
+
+import OrgAttributesEditPage from "@calcom/ee/organizations/pages/settings/attributes/attributes-edit-view";
+import { getServerSessionForAppDir } from "@calcom/features/auth/lib/get-server-session-for-app-dir";
+import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("attribute"),
+    (t) => t("edit_attribute_description")
+  );
+
+const Page = async () => {
+  const session = await getServerSessionForAppDir();
+  const t = await getFixedT(session?.user.locale || "en");
+
+  return (
+    <SettingsHeader title={t("attribute")} description={t("edit_attribute_description")}>
+      <OrgAttributesEditPage />
+    </SettingsHeader>
+  );
+};
+
+export default Page;
@@ -0,0 +1,24 @@
+import { _generateMetadata, getFixedT } from "app/_utils";
+
+import OrgAttributesCreatePage from "@calcom/ee/organizations/pages/settings/attributes/attributes-create-view";
+import { getServerSessionForAppDir } from "@calcom/features/auth/lib/get-server-session-for-app-dir";
+import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("attribute"),
+    (t) => t("create_attribute_description")
+  );
+
+const Page = async () => {
+  const session = await getServerSessionForAppDir();
+  const t = await getFixedT(session?.user.locale || "en");
+
+  return (
+    <SettingsHeader title={t("attribute")} description={t("create_attribute_description")}>
+      <OrgAttributesCreatePage />
+    </SettingsHeader>
+  );
+};
+
+export default Page;
@@ -0,0 +1,24 @@
+import { _generateMetadata, getFixedT } from "app/_utils";
+
+import OrgSettingsAttributesPage from "@calcom/ee/organizations/pages/settings/attributes/attributes-list-view";
+import { getServerSessionForAppDir } from "@calcom/features/auth/lib/get-server-session-for-app-dir";
+import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("attributes"),
+    (t) => t("attribute_meta_description")
+  );
+
+const Page = async () => {
+  const session = await getServerSessionForAppDir();
+  const t = await getFixedT(session?.user.locale || "en");
+
+  return (
+    <SettingsHeader title={t("attributes")} description={t("attribute_meta_description")}>
+      <OrgSettingsAttributesPage />
+    </SettingsHeader>
+  );
+};
+
+export default Page;
@@ -0,0 +1,5 @@
+import BillingPage, { generateMetadata } from "app/future/settings/(settings)/billing/page";
+
+export { generateMetadata };
+
+export default BillingPage;
@@ -16,7 +16,7 @@ const Page = async () => {

  return (
    <SettingsHeader title={t("general")} description={t("general_description")} borderInShellHeader={true}>
-      <LegacyPage isAppDir={true} />
+      <LegacyPage />
    </SettingsHeader>
  );
 };
@@ -19,7 +19,7 @@ const Page = async () => {
      title={t("profile")}
      description={t("profile_org_description")}
      borderInShellHeader={true}>
-      <LegacyPage isAppDir={true} />
+      <LegacyPage />
    </SettingsHeader>
  );
 };
@@ -15,8 +15,8 @@ const Page = async () => {
  const t = await getFixedT(session?.user.locale || "en");

  return (
-    <SettingsHeader title={t("profile")} description={t("profile_org_description")}>
-      <OrgSSOView isAppDir={true} />
+    <SettingsHeader title={t("sso_configuration")} description={t("sso_configuration_description_orgs")}>
+      <OrgSSOView />
    </SettingsHeader>
  );
 };
@@ -1,7 +1,9 @@
 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-members-view";
+import LegacyPage, {
+  TeamMembersCTA,
+} from "@calcom/features/ee/organizations/pages/settings/other-team-members-view";
 import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";

 export const generateMetadata = async () =>
@@ -15,9 +17,11 @@ const Page = async () => {
  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
+      title={t("team_members")}
+      description={t("members_team_description")}
+      CTA={<TeamMembersCTA />}>
+      <LegacyPage />
    </SettingsHeader>
  );
 };
@@ -16,7 +16,7 @@ const Page = async () => {

  return (
    <SettingsHeader title={t("profile")} description={t("profile_team_description")}>
-      <LegacyPage isAppDir={true} />
+      <LegacyPage />
    </SettingsHeader>
  );
 };
@@ -16,7 +16,7 @@ const Page = async () => {

  return (
    <SettingsHeader title={t("org_admin_other_teams")} description={t("org_admin_other_teams_description")}>
-      <LegacyPage isAppDir={true} />
+      <LegacyPage />
    </SettingsHeader>
  );
 };
@@ -1,8 +1,10 @@
 import { _generateMetadata, getFixedT } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";

 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";
+import SettingsLayoutAppDir from "@calcom/features/settings/appDir/SettingsLayoutAppDir";

 export const generateMetadata = async () =>
  await _generateMetadata(
@@ -16,9 +18,12 @@ const Page = async () => {

  return (
    <SettingsHeader title={t("organization_members")} description={t("organization_description")}>
-      <LegacyPage isAppDir={true} />
+      <LegacyPage />
    </SettingsHeader>
  );
 };

-export default Page;
+const getLayout = async (page: React.ReactElement) =>
+  await SettingsLayoutAppDir({ children: page, containerClassName: "lg:max-w-screen-2xl" });
+
+export default WithLayout({ ServerPage: Page, getServerLayout: getLayout })<"P">;
@@ -1,23 +0,0 @@
-import { getServerSideProps } from "@calcom/features/ee/organizations/pages/organization";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Meta } from "@calcom/ui";
-
-import PageWrapper from "@components/PageWrapper";
-
-import AboutOrganizationForm, { LayoutWrapper } from "~/settings/organizations/[id]/about-view";
-
-const Page = () => {
-  const { t } = useLocale();
-  return (
-    <>
-      <Meta title={t("about_your_organization")} description={t("about_your_organization_description")} />
-      <AboutOrganizationForm />
-    </>
-  );
-};
-
-Page.getLayout = LayoutWrapper;
-Page.PageWrapper = PageWrapper;
-
-export default Page;
-export { getServerSideProps };
@@ -1,24 +0,0 @@
-import { getServerSideProps } from "@calcom/features/ee/organizations/pages/organization";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Meta } from "@calcom/ui";
-
-import PageWrapper from "@components/PageWrapper";
-
-import AddNewTeamsForm, { LayoutWrapper } from "~/settings/organizations/[id]/add-teams-view";
-
-const Page = () => {
-  const { t } = useLocale();
-  return (
-    <>
-      <Meta title={t("create_your_teams")} description={t("create_your_teams_description")} />
-      <AddNewTeamsForm />
-    </>
-  );
-};
-
-Page.getLayout = LayoutWrapper;
-Page.PageWrapper = PageWrapper;
-
-export default Page;
-
-export { getServerSideProps };
@@ -1,27 +0,0 @@
-import { getServerSideProps } from "@calcom/features/ee/organizations/pages/organization";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Meta } from "@calcom/ui";
-
-import PageWrapper from "@components/PageWrapper";
-
-import OrgAddNewTeamMembers, { LayoutWrapper } from "~/settings/organizations/[id]/onboard-members-view";
-
-const Page = () => {
-  const { t } = useLocale();
-
-  return (
-    <>
-      <Meta
-        title={t("invite_organization_admins")}
-        description={t("invite_organization_admins_description")}
-      />
-      <OrgAddNewTeamMembers />
-    </>
-  );
-};
-
-Page.getLayout = LayoutWrapper;
-Page.PageWrapper = PageWrapper;
-
-export default Page;
-export { getServerSideProps };
@@ -1,25 +0,0 @@
-import AdminAPIView from "@calcom/features/ee/organizations/pages/settings/admin-api";
-import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Meta } from "@calcom/ui";
-
-import PageWrapper from "@components/PageWrapper";
-
-const Page = () => {
-  const { t } = useLocale();
-  return (
-    <>
-      <Meta
-        title={`${t("admin")} ${t("api_reference")}`}
-        description={t("leverage_our_api")}
-        borderInShellHeader={false}
-      />
-      <AdminAPIView />
-    </>
-  );
-};
-
-Page.PageWrapper = PageWrapper;
-Page.getLayout = getLayout;
-
-export default Page;
@@ -1,9 +0,0 @@
-import OrgAppearanceView from "@calcom/features/ee/organizations/pages/settings/appearance";
-
-import type { CalPageWrapper } from "@components/PageWrapper";
-import PageWrapper from "@components/PageWrapper";
-
-const Page = OrgAppearanceView as CalPageWrapper;
-Page.PageWrapper = PageWrapper;
-
-export default Page;
@@ -1,24 +0,0 @@
-"use client";
-
-import OrgAttributesEditPage, {
-  getLayout,
-} from "@calcom/ee/organizations/pages/settings/attributes/attributes-edit-view";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Meta } from "@calcom/ui";
-
-import PageWrapper from "@components/PageWrapper";
-
-const Page = () => {
-  const { t } = useLocale();
-  return (
-    <>
-      <Meta title="Attribute" description={t("edit_attribute_description")} />
-      <OrgAttributesEditPage />
-    </>
-  );
-};
-
-Page.getLayout = getLayout;
-Page.PageWrapper = PageWrapper;
-
-export default Page;
@@ -1,20 +0,0 @@
-import OrgAttributesCreatePage, {
-  getLayout,
-} from "@calcom/ee/organizations/pages/settings/attributes/attributes-create-view";
-import { Meta } from "@calcom/ui";
-
-import PageWrapper from "@components/PageWrapper";
-
-const Page = () => {
-  return (
-    <>
-      <Meta title="Attribute" description="Create an attribute for your team members" />
-      <OrgAttributesCreatePage />
-    </>
-  );
-};
-
-Page.getLayout = getLayout;
-Page.PageWrapper = PageWrapper;
-
-export default Page;
@@ -1,21 +0,0 @@
-import OrgSettingsAttributesPage, {
-  getLayout,
-} from "@calcom/ee/organizations/pages/settings/attributes/attributes-list-view";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Meta } from "@calcom/ui";
-
-import PageWrapper from "@components/PageWrapper";
-
-const Page = () => {
-  const { t } = useLocale();
-  return (
-    <>
-      <Meta title={t("attributes")} description={t("attribute_meta_description")} />
-      <OrgSettingsAttributesPage />
-    </>
-  );
-};
-Page.getLayout = getLayout;
-Page.PageWrapper = PageWrapper;
-
-export default Page;
@@ -1,3 +0,0 @@
-import BillingPage from "../../settings/billing/index";
-
-export default BillingPage;
@@ -1,22 +0,0 @@
-"use client";
-
-import DirectorySyncTeamView from "@calcom/features/ee/dsync/page/team-dsync-view";
-import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Meta } from "@calcom/ui";
-
-import PageWrapper from "@components/PageWrapper";
-
-const Page = () => {
-  const { t } = useLocale();
-  return (
-    <>
-      <Meta title={t("directory_sync")} description={t("directory_sync_description")} />
-      <DirectorySyncTeamView />
-    </>
-  );
-};
-Page.getLayout = getLayout;
-Page.PageWrapper = PageWrapper;
-
-export default Page;
@@ -1,11 +0,0 @@
-import OrgGeneralView from "@calcom/features/ee/organizations/pages/settings/general";
-import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
-
-import PageWrapper from "@components/PageWrapper";
-
-const Page = () => <OrgGeneralView />;
-
-Page.getLayout = getLayout;
-Page.PageWrapper = PageWrapper;
-
-export default Page;
@@ -1,20 +0,0 @@
-import MembersView from "@calcom/features/ee/organizations/pages/settings/members";
-import SettingsLayout from "@calcom/features/settings/layouts/SettingsLayout";
-
-import PageWrapper from "@components/PageWrapper";
-
-export {
-  getServerSidePropsForMembers as getServerSideProps,
-  type PageProps,
-} from "@calcom/features/ee/organizations/pages/settings/getServerSidePropsMembers";
-
-export const getLayout = (page: React.ReactElement) => (
-  <SettingsLayout containerClassName="lg:max-w-screen-2xl">{page}</SettingsLayout>
-);
-
-const Page = () => <MembersView />;
-
-Page.getLayout = getLayout;
-Page.PageWrapper = PageWrapper;
-
-export default Page;
@@ -1,26 +0,0 @@
-import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Meta } from "@calcom/ui";
-
-import { getServerSideProps } from "@lib/settings/organizations/new/getServerSideProps";
-
-import PageWrapper from "@components/PageWrapper";
-
-import CreateANewOrganizationForm, { LayoutWrapper } from "~/settings/organizations/new/create-new-view";
-
-const Page = () => {
-  const { t } = useLocale();
-  return (
-    <LicenseRequired>
-      <Meta title={t("set_up_your_organization")} description={t("organizations_description")} />
-      <CreateANewOrganizationForm />
-    </LicenseRequired>
-  );
-};
-
-Page.getLayout = LayoutWrapper;
-Page.PageWrapper = PageWrapper;
-
-export default Page;
-
-export { getServerSideProps };
@@ -1,27 +0,0 @@
-"use client";
-
-import PrivacyView from "@calcom/features/ee/organizations/pages/settings/privacy";
-import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Meta } from "@calcom/ui";
-
-import PageWrapper from "@components/PageWrapper";
-
-const Page = () => {
-  const { t } = useLocale();
-  return (
-    <>
-      <Meta
-        borderInShellHeader={false}
-        title={t("privacy")}
-        description={t("privacy_organization_description")}
-      />
-      <PrivacyView />
-    </>
-  );
-};
-
-Page.getLayout = getLayout;
-Page.PageWrapper = PageWrapper;
-
-export default Page;
@@ -1,11 +0,0 @@
-import OrgProfileView from "@calcom/features/ee/organizations/pages/settings/profile";
-import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
-
-import PageWrapper from "@components/PageWrapper";
-
-const Page = () => <OrgProfileView />;
-
-Page.getLayout = getLayout;
-Page.PageWrapper = PageWrapper;
-
-export default Page;
@@ -1,11 +0,0 @@
-import OrgSSOView from "@calcom/features/ee/sso/page/orgs-sso-view";
-import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
-
-import PageWrapper from "@components/PageWrapper";
-
-const Page = () => <OrgSSOView />;
-
-Page.getLayout = getLayout;
-Page.PageWrapper = PageWrapper;
-
-export default Page;
@@ -1,11 +0,0 @@
-import TeamAppearenceView from "@calcom/features/ee/teams/pages/team-appearance-view";
-import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
-
-import PageWrapper from "@components/PageWrapper";
-
-const Page = () => <TeamAppearenceView />;
-
-Page.getLayout = getLayout;
-Page.PageWrapper = PageWrapper;
-
-export default Page;
@@ -1,11 +0,0 @@
-import TeamMembersView from "@calcom/features/ee/organizations/pages/settings/other-team-members-view";
-import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
-
-import PageWrapper from "@components/PageWrapper";
-
-const Page = () => <TeamMembersView />;
-
-Page.getLayout = getLayout;
-Page.PageWrapper = PageWrapper;
-
-export default Page;
@@ -1,11 +0,0 @@
-import OtherTeamProfileView from "@calcom/features/ee/organizations/pages/settings/other-team-profile-view";
-import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
-
-import PageWrapper from "@components/PageWrapper";
-
-const Page = () => <OtherTeamProfileView />;
-
-Page.getLayout = getLayout;
-Page.PageWrapper = PageWrapper;
-
-export default Page;
@@ -1,11 +0,0 @@
-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";
-
-const Page = () => <OtherTeamListView />;
-
-Page.getLayout = getLayout;
-Page.PageWrapper = PageWrapper;
-
-export default Page;
@@ -2642,6 +2642,9 @@
  "add_attributes_description": "Add attributes to your team members",
  "new_option": "New option",
  "update_profile": "Update member",
+  "attribute": "Attribute",
+  "create_attribute_description": "Create an attribute for your team members",
+  "edit_attribute_description": "Edit an attribute for your team members",
  "attribute_updated_successfully": "Attribute updated successfully",
  "attribute_deleted_successfully": "Attribute deleted successfully",
  "attributes_edited_successfully": "Attributes edited successfully",
@@ -9,7 +9,6 @@ checkRoute () {
 checkRoute "$APP_ROUTER_EVENT_TYPES_ENABLED" app/future/event-types
 checkRoute "$APP_ROUTER_AVAILABILITY_ENABLED" app/future/availability
 checkRoute "$APP_ROUTER_SETTINGS_DEVELOPER_ENABLED" app/future/settings/developer
-checkRoute "$APP_ROUTER_SETTINGS_ORG_ENABLED" app/future/settings/organizations
 checkRoute "$APP_ROUTER_APPS_INSTALLED_CATEGORY_ENABLED" app/future/apps/installed
 checkRoute "$APP_ROUTER_APPS_SLUG_ENABLED" app/future/apps/\[slug\]
 checkRoute "$APP_ROUTER_APPS_SLUG_SETUP_ENABLED" app/future/apps/\[slug\]/setup
@@ -37,7 +37,7 @@ export default function MemberListItem(props: Props) {
            <UserAvatar noOrganizationIndicator size="sm" user={user} className="h-10 w-10 rounded-full" />

            <div className="ms-3 inline-block overflow-hidden">
-              <div className="mb-1 flex">
+              <div className="mb-1 flex items-center">
                <span className="text-default mr-1 text-sm font-bold leading-4">{name}</span>

                {!props.member.accepted && <TeamPill color="orange" text={t("pending")} />}
@@ -6,7 +6,6 @@ import { useFormContext } from "react-hook-form";
 import { z } from "zod";

 import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
-import SettingsLayout from "@calcom/features/settings/layouts/SettingsLayout";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Button, useMeta, showToast } from "@calcom/ui";
@@ -89,8 +88,5 @@ function CreateAttributeHeader(props: { isPending: boolean }) {
    </>
  );
 }
-export function getLayout(page: React.ReactElement) {
-  return <SettingsLayout hideHeader>{page}</SettingsLayout>;
-}

 export default CreateAttributesPage;
@@ -6,7 +6,6 @@ import { useFormContext } from "react-hook-form";
 import { z } from "zod";

 import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
-import SettingsLayout from "@calcom/features/settings/layouts/SettingsLayout";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Button, useMeta, showToast } from "@calcom/ui";
@@ -109,8 +108,4 @@ function EditAttributeHeader(props: { isPending: boolean }) {
  );
 }

-export function getLayout(page: React.ReactElement) {
-  return <SettingsLayout hideHeader>{page}</SettingsLayout>;
-}
-
 export default CreateAttributesPage;
@@ -4,7 +4,6 @@ import type { Dispatch, SetStateAction } from "react";
 import { useState } from "react";

 import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
-import SettingsLayout from "@calcom/features/settings/layouts/SettingsLayout";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
@@ -208,8 +207,4 @@ function ListAttributeHeader() {
  );
 }

-export function getLayout(page: React.ReactElement) {
-  return <SettingsLayout hideHeader>{page}</SettingsLayout>;
-}
-
 export default OrganizationAttributesPage;
@@ -28,18 +28,9 @@ import {
 import { LockEventTypeSwitch } from "../components/LockEventTypeSwitch";
 import { NoSlotsNotificationSwitch } from "../components/NoSlotsNotificationSwitch";

-const SkeletonLoader = ({
-  title,
-  description,
-  isAppDir,
-}: {
-  title: string;
-  description: string;
-  isAppDir?: boolean;
-}) => {
+const SkeletonLoader = ({ title, description }: { title: string; description: string }) => {
  return (
    <SkeletonContainer>
-      {!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" />
@@ -58,7 +49,7 @@ interface GeneralViewProps {
  localeProp: string;
 }

-const OrgGeneralView = ({ isAppDir }: { isAppDir?: boolean }) => {
+const OrgGeneralView = () => {
  const { t } = useLocale();
  const router = useRouter();
  const session = useSession();
@@ -92,7 +83,6 @@ const OrgGeneralView = ({ isAppDir }: { isAppDir?: boolean }) => {
        currentOrg={currentOrg}
        isAdminOrOwner={isAdminOrOwner}
        localeProp={user?.locale ?? "en"}
-        isAppDir={isAppDir}
      />

      <LockEventTypeSwitch currentOrg={currentOrg} isAdminOrOwner={!!isAdminOrOwner} />
@@ -101,12 +91,7 @@ const OrgGeneralView = ({ isAppDir }: { isAppDir?: boolean }) => {
  );
 };

-const GeneralView = ({
-  currentOrg,
-  isAdminOrOwner,
-  localeProp,
-  isAppDir,
-}: GeneralViewProps & { isAppDir?: boolean }) => {
+const GeneralView = ({ currentOrg, isAdminOrOwner, localeProp }: GeneralViewProps) => {
  const { t } = useLocale();

  const mutation = trpc.viewer.organizations.update.useMutation({
@@ -165,13 +150,6 @@ const GeneralView = ({
          weekStart: values.weekStart.value,
        });
      }}>
-      {!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"
@@ -7,7 +7,7 @@ import { MembershipRole } from "@calcom/prisma/enums";
 import { trpc } from "@calcom/trpc/react";
 import { Meta } from "@calcom/ui";

-const MembersView = ({ isAppDir }: { isAppDir?: boolean }) => {
+const MembersView = () => {
  const { t } = useLocale();
  const { data: currentOrg, isPending } = trpc.viewer.organizations.listCurrent.useQuery();

@@ -20,9 +20,6 @@ const MembersView = ({ isAppDir }: { isAppDir?: boolean }) => {

  return (
    <LicenseRequired>
-      {!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">
@@ -5,13 +5,10 @@ import { Meta } from "@calcom/ui";

 import { OtherTeamsListing } from "./../components/OtherTeamsListing";

-const OtherTeamListingView = ({ isAppDir }: { isAppDir?: boolean }): React.ReactElement => {
+const OtherTeamListingView = (): React.ReactElement => {
  const { t } = useLocale();
  return (
    <>
-      {!isAppDir ? (
-        <Meta title={t("org_admin_other_teams")} description={t("org_admin_other_teams_description")} />
-      ) : null}
      <OtherTeamsListing />
    </>
  );
@@ -12,7 +12,7 @@ import { useParamsWithFallback } from "@calcom/lib/hooks/useParamsWithFallback";
 import { MembershipRole } from "@calcom/prisma/enums";
 import { trpc } from "@calcom/trpc/react";
 import type { RouterOutputs } from "@calcom/trpc/react";
-import { Meta, showToast, Button } from "@calcom/ui";
+import { showToast, Button } from "@calcom/ui";

 import MakeTeamPrivateSwitch from "../../../teams/components/MakeTeamPrivateSwitch";
 import MemberListItem from "../components/MemberListItem";
@@ -59,7 +59,37 @@ function MembersList(props: MembersListProps) {
  );
 }

-const MembersView = ({ isAppDir }: { isAppDir?: boolean }) => {
+export const memberInvitationModalRef = {
+  current: null as null | ((show: boolean) => void),
+};
+
+export const TeamMembersCTA = () => {
+  const { t } = useLocale();
+  const session = useSession();
+  const { data: currentOrg } = trpc.viewer.organizations.listCurrent.useQuery(undefined, {
+    enabled: !!session.data?.user?.org,
+  });
+
+  const isOrgAdminOrOwner =
+    currentOrg &&
+    (currentOrg.user.role === MembershipRole.OWNER || currentOrg.user.role === MembershipRole.ADMIN);
+
+  if (!isOrgAdminOrOwner) return null;
+
+  return (
+    <Button
+      type="button"
+      color="primary"
+      StartIcon="plus"
+      className="ml-auto"
+      onClick={() => memberInvitationModalRef.current?.(true)}
+      data-testid="new-member-button">
+      {t("add")}
+    </Button>
+  );
+};
+
+const MembersView = () => {
  const { t, i18n } = useLocale();
  const router = useRouter();
  const params = useParamsWithFallback();
@@ -71,9 +101,6 @@ const MembersView = ({ isAppDir }: { isAppDir?: boolean }) => {
  const limit = 20;
  const [showMemberInvitationModal, setShowMemberInvitationModal] = useState<boolean>(false);

-  const { data: currentOrg } = trpc.viewer.organizations.listCurrent.useQuery(undefined, {
-    enabled: !!session.data?.user?.org,
-  });
  const {
    data: team,
    isPending: isTeamLoading,
@@ -119,6 +146,13 @@ const MembersView = ({ isAppDir }: { isAppDir?: boolean }) => {
    [router, otherMembersError, otherTeamError]
  );

+  useEffect(() => {
+    memberInvitationModalRef.current = setShowMemberInvitationModal;
+    return () => {
+      memberInvitationModalRef.current = null;
+    };
+  }, []);
+
  const isPending = isTeamLoading || isOrgListLoading;
  const inviteMemberMutation = trpc.viewer.teams.inviteMember.useMutation({
    onSuccess: () => {
@@ -129,33 +163,8 @@ const MembersView = ({ isAppDir }: { isAppDir?: boolean }) => {
    },
  });

-  const isOrgAdminOrOwner =
-    currentOrg &&
-    (currentOrg.user.role === MembershipRole.OWNER || currentOrg.user.role === MembershipRole.ADMIN);
-
  return (
    <>
-      {!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>
@@ -54,7 +54,7 @@ const teamProfileFormSchema = z.object({
  bio: z.string(),
 });

-const OtherTeamProfileView = ({ isAppDir }: { isAppDir?: boolean }) => {
+const OtherTeamProfileView = () => {
  const { t } = useLocale();
  const router = useRouter();
  const utils = trpc.useUtils();
@@ -169,7 +169,6 @@ const OtherTeamProfileView = ({ isAppDir }: { isAppDir?: boolean }) => {

  return (
    <>
-      {!isAppDir ? <Meta title={t("profile")} description={t("profile_team_description")} /> : null}
      {!isPending ? (
        <>
          {isAdmin ? (
@@ -57,18 +57,9 @@ type FormValues = {
  calVideoLogo: string | null;
 };

-const SkeletonLoader = ({
-  title,
-  description,
-  isAppDir,
-}: {
-  title: string;
-  description: string;
-  isAppDir?: boolean;
-}) => {
+const SkeletonLoader = ({ title, description }: { title: string; description: string }) => {
  return (
    <SkeletonContainer>
-      {!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" />
@@ -84,7 +75,7 @@ const SkeletonLoader = ({
  );
 };

-const OrgProfileView = ({ isAppDir }: { isAppDir?: boolean }) => {
+const OrgProfileView = () => {
  const { t } = useLocale();
  const router = useRouter();

@@ -110,9 +101,7 @@ const OrgProfileView = ({ isAppDir }: { isAppDir?: boolean }) => {
  );

  if (isPending || !orgBranding || !currentOrganisation) {
-    return (
-      <SkeletonLoader isAppDir={isAppDir} title={t("profile")} description={t("profile_org_description")} />
-    );
+    return <SkeletonLoader title={t("profile")} description={t("profile_org_description")} />;
  }

  const isOrgAdminOrOwner =
@@ -138,9 +127,6 @@ const OrgProfileView = ({ isAppDir }: { isAppDir?: boolean }) => {

  return (
    <LicenseRequired>
-      {!isAppDir ? (
-        <Meta title={t("profile")} description={t("profile_org_description")} borderInShellHeader={true} />
-      ) : null}
      <>
        {isOrgAdminOrOwner ? (
          <>
@@ -8,7 +8,7 @@ import { AppSkeletonLoader as SkeletonLoader, Meta } from "@calcom/ui";

 import SSOConfiguration from "../components/SSOConfiguration";

-const SAMLSSO = ({ isAppDir }: { isAppDir?: boolean }) => {
+const SAMLSSO = () => {
  const { t } = useLocale();

  const { data, status } = useSession();
@@ -25,9 +25,6 @@ const SAMLSSO = ({ isAppDir }: { isAppDir?: boolean }) => {

  return !!isAdminOrOwner ? (
    <div className="bg-default w-full sm:mx-0 xl:mt-0">
-      {!isAppDir ? (
-        <Meta title={t("sso_configuration")} description={t("sso_configuration_description_orgs")} />
-      ) : null}
      <SSOConfiguration teamId={org.id} />
    </div>
  ) : (
@@ -672,6 +672,7 @@ export type SettingsLayoutProps = {
  children: React.ReactNode;
  currentOrg: Awaited<ReturnType<typeof OrganizationRepository.findCurrentOrg>> | null;
  otherTeams: Awaited<ReturnType<typeof OrganizationRepository.findTeamsInOrgIamNotPartOf>> | null;
+  containerClassName?: string;
 } & ComponentProps<typeof Shell>;

 export default function SettingsLayoutAppDirClient({
@@ -723,7 +724,8 @@ export default function SettingsLayoutAppDirClient({
        <MobileSettingsContainer onSideContainerOpen={() => setSideContainerOpen(!sideContainerOpen)} />
      }>
      <div className="flex flex-1 [&>*]:flex-1">
-        <div className="mx-auto max-w-full justify-center lg:max-w-3xl">
+        <div
+          className={classNames("mx-auto max-w-full justify-center lg:max-w-3xl", rest.containerClassName)}>
          <ErrorBoundary>{children}</ErrorBoundary>
        </div>
      </div>
@@ -243,7 +243,6 @@
    "APP_ROUTER_EVENT_TYPES_ENABLED",
    "APP_ROUTER_GETTING_STARTED_STEP_ENABLED",
    "APP_ROUTER_SETTINGS_DEVELOPER_ENABLED",
-    "APP_ROUTER_SETTINGS_ORG_ENABLED",
    "APP_ROUTER_SETTINGS_TEAMS_ENABLED",
    "APP_ROUTER_WORKFLOWS_ENABLED",
    "APP_ROUTER_VIDEO_ENABLED",