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

calcom#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,13 +1,10 @@
-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(
     () => "Admin",
     () => "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/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/page.tsx

@@ -1,11 +1,24 @@
-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(
     (t) => t("general"),
     (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/page.tsx

@@ -1,11 +1,24 @@
-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(
     (t) => t("organization_members"),
     (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/page.tsx

@@ -1,11 +1,27 @@
-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(
     (t) => t("profile"),
     (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/page.tsx

@@ -1,11 +1,27 @@
-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(
     (t) => t("booking_appearance"),
     (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/page.tsx

@@ -1,11 +1,25 @@
-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(
     (t) => t("team_members"),
     (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/page.tsx

@@ -1,11 +1,24 @@
-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(
     (t) => t("profile"),
     (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/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,11 +1,27 @@
-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(
     (t) => t("booking_appearance"),
     (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,11 +1,24 @@
-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(
     (t) => t("team_members"),
     (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;