chore: settings/teams and settings/billing - remove pages router and use app router (#16751)

* remove pages router and use app router * revert yarn.lock * remove line break from yarn lock * Add booking limits page to app dir * revert yarn.lock * do not render bookingLimits from pages router * clean up code * remove isAppDir * revert unneeded change * add layout to billing page * remove files not needed * rename imports * remove APP_ROUTER_SETTINGS_DEVELOPER * remove layout
2024-12-04 12:31:45 -05:00
1 parent 9085287fc6
commit d60b6c6a6d
@@ -357,7 +357,6 @@ APP_ROUTER_APPS_CATEGORIES_CATEGORY_ENABLED=0
 APP_ROUTER_BOOKING_ENABLED=0
 APP_ROUTER_BOOKINGS_STATUS_ENABLED=0
 APP_ROUTER_WORKFLOWS_ENABLED=0
-APP_ROUTER_SETTINGS_TEAMS_ENABLED=0
 APP_ROUTER_GETTING_STARTED_STEP_ENABLED=0
 APP_ROUTER_APPS_ENABLED=0
 APP_ROUTER_VIDEO_ENABLED=0
@@ -21,7 +21,6 @@ const ROUTES: [URLPattern, boolean][] = [
  ["/auth/platform/:path*", process.env.APP_ROUTER_AUTH_PLATFORM_ENABLED === "1"] as const,
  ["/auth/oauth2/:path*", process.env.APP_ROUTER_AUTH_OAUTH2_ENABLED === "1"] as const,
  ["/workflows/:path*", process.env.APP_ROUTER_WORKFLOWS_ENABLED === "1"] as const,
-  ["/settings/teams/:path*", process.env.APP_ROUTER_SETTINGS_TEAMS_ENABLED === "1"] as const,
  ["/getting-started/:step", process.env.APP_ROUTER_GETTING_STARTED_STEP_ENABLED === "1"] as const,
  ["/apps", process.env.APP_ROUTER_APPS_ENABLED === "1"] as const,
  ["/bookings/:status", process.env.APP_ROUTER_BOOKINGS_STATUS_ENABLED === "1"] as const,
@@ -1,5 +0,0 @@
-import { WithLayout } from "app/layoutHOC";
-
-import { getLayout } from "@calcom/features/settings/appDir/SettingsLayoutAppDir";
-
-export default WithLayout({ getServerLayout: getLayout })<"L">;
@@ -1,4 +0,0 @@
-import BillingPage, { generateMetadata } from "../../../billing/page";
-
-export { generateMetadata };
-export default BillingPage;
@@ -1,21 +0,0 @@
-import { withAppDirSsr } from "app/WithAppDirSsr";
-import { _generateMetadata } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";
-
-import { getServerSideProps } from "@lib/settings/organizations/new/getServerSideProps";
-import { type inferSSRProps } from "@lib/types/inferSSRProps";
-
-import LegacyPage, { LayoutWrapper } from "~/settings/platform/new/create-new-view";
-
-export const generateMetadata = async () =>
-  await _generateMetadata(
-    (t) => t("set_up_your_platform_organization"),
-    (t) => t("platform_organization_description")
-  );
-
-export default WithLayout({
-  getLayout: LayoutWrapper,
-  Page: LegacyPage,
-  getData: withAppDirSsr<inferSSRProps<typeof getServerSideProps>>(getServerSideProps),
-  requiresLicense: true,
-});
@@ -1,15 +0,0 @@
-import { _generateMetadata } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";
-
-import EditView from "~/settings/platform/oauth-clients/[clientId]/edit/edit-view";
-
-export const generateMetadata = async () =>
-  await _generateMetadata(
-    (t) => t("oAuth_client_updation_form"),
-    () => ""
-  );
-
-export default WithLayout({
-  getLayout: null,
-  Page: EditView,
-});
@@ -1,15 +0,0 @@
-import { _generateMetadata } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";
-
-import EditWebhooksView from "~/settings/platform/oauth-clients/[clientId]/edit/edit-webhooks-view";
-
-export const generateMetadata = async () =>
-  await _generateMetadata(
-    (t) => t("oAuth_client_updation_form"),
-    () => ""
-  );
-
-export default WithLayout({
-  getLayout: null,
-  Page: EditWebhooksView,
-});
@@ -1,19 +0,0 @@
-import type { PageProps } from "app/_types";
-import { _generateMetadata } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";
-
-import CreateNewView from "~/settings/platform/oauth-clients/create-new-view";
-
-export const generateMetadata = async ({ params, searchParams }: PageProps) => {
-  const p = { ...params, ...searchParams };
-  const clientId = p?.clientId ?? "";
-  return await _generateMetadata(
-    () => `OAuth client ${!!clientId ? "updation" : "creation"} form`,
-    () => ""
-  );
-};
-
-export default WithLayout({
-  getLayout: null,
-  Page: CreateNewView,
-});
@@ -1,16 +0,0 @@
-import { _generateMetadata } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";
-
-import PlatformView from "~/settings/platform/platform-view";
-
-export const generateMetadata = async () => {
-  return await _generateMetadata(
-    (t) => t("platform"),
-    (t) => t("platform_description")
-  );
-};
-
-export default WithLayout({
-  getLayout: null,
-  Page: PlatformView,
-});
@@ -13,9 +13,7 @@ export const generateMetadata = async () =>
  );

 const Page = async () => {
-  // FIXME: Refactor me once next-auth endpoint is migrated to App Router
  const session = await getServerSessionForAppDir();
-
  const t = await getFixedT(session?.user.locale || "en");

  return (
@@ -1,4 +1,4 @@
-import BillingPage, { generateMetadata } from "app/future/settings/(settings)/billing/page";
+import BillingPage, { generateMetadata } from "app/settings/(settings-layout)/billing/page";

 export { generateMetadata };

@@ -19,7 +19,7 @@ const Page = async () => {
      title={t("booking_appearance")}
      description={t("appearance_team_description")}
      borderInShellHeader={false}>
-      <LegacyPage isAppDir={true} />
+      <LegacyPage />
    </SettingsHeader>
  );
 };
@@ -19,7 +19,7 @@ const Page = async () => {
      title={t("booking_appearance")}
      description={t("appearance_team_description")}
      borderInShellHeader={false}>
-      <LegacyPage isAppDir={true} />
+      <LegacyPage />
    </SettingsHeader>
  );
 };
@@ -0,0 +1,4 @@
+import BillingPage, { generateMetadata } from "app/settings/(settings-layout)/billing/page";
+
+export { generateMetadata };
+export default BillingPage;
@@ -0,0 +1,27 @@
+import { _generateMetadata, getFixedT } from "app/_utils";
+
+import { getServerSessionForAppDir } from "@calcom/features/auth/lib/get-server-session-for-app-dir";
+import TeamBookingLimitsView from "@calcom/features/ee/teams/pages/team-booking-limits-view";
+import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("booking_limits"),
+    (t) => t("booking_limits_team_description")
+  );
+
+const Page = async () => {
+  const session = await getServerSessionForAppDir();
+  const t = await getFixedT(session?.user.locale || "en");
+
+  return (
+    <SettingsHeader
+      title={t("booking_limits")}
+      description={t("booking_limits_team_description")}
+      borderInShellHeader={false}>
+      <TeamBookingLimitsView />
+    </SettingsHeader>
+  );
+};
+
+export default Page;
@@ -16,7 +16,7 @@ const Page = async () => {

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

  return (
    <SettingsHeader title={t("teams")} description={t("create_manage_teams_collaborative")}>
-      <LegacyPage isAppDir={true} />
+      <LegacyPage />
    </SettingsHeader>
  );
 };
@@ -180,7 +180,6 @@ export const config = {
    "/workflows/:path*",
    "/future/workflows/:path*",
    "/settings/teams/:path*",
-    "/future/settings/teams/:path*",
    "/getting-started/:step/",
    "/future/getting-started/:step/",
    "/apps",
@@ -1,23 +0,0 @@
-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";
-
-import BillingView from "~/settings/billing/billing-view";
-
-const Page = () => {
-  const { t } = useLocale();
-
-  return (
-    <>
-      <Meta title={t("billing")} description={t("manage_billing_description")} borderInShellHeader={true} />
-      <BillingView />
-    </>
-  );
-};
-
-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,3 +0,0 @@
-import BillingPage from "../../billing";
-
-export default BillingPage;
@@ -1,24 +0,0 @@
-import TeamBookingLimitsView from "@calcom/features/ee/teams/pages/team-booking-limits-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("booking_limits")}
-        description={t("booking_limits_team_description")}
-        borderInShellHeader={false}
-      />
-      <TeamBookingLimitsView />
-    </>
-  );
-};
-Page.getLayout = getLayout;
-Page.PageWrapper = PageWrapper;
-
-export default Page;
@@ -1,27 +0,0 @@
-"use client";
-
-import Head from "next/head";
-
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-
-import PageWrapper from "@components/PageWrapper";
-
-import CreateTeamEventType, { GetLayout } from "~/settings/teams/[id]/event-types-view";
-
-const TeamEventTypePage = () => {
-  const { t } = useLocale();
-  return (
-    <>
-      <Head>
-        <title>{t("add_new_team_event_type")}</title>
-        <meta name="description" content={t("new_event_type_to_book_description")} />
-      </Head>
-      <CreateTeamEventType />
-    </>
-  );
-};
-
-TeamEventTypePage.getLayout = GetLayout;
-TeamEventTypePage.PageWrapper = PageWrapper;
-
-export default TeamEventTypePage;
@@ -1,11 +0,0 @@
-import TeamMembersView from "@calcom/features/ee/teams/pages/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,27 +0,0 @@
-"use client";
-
-import Head from "next/head";
-
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-
-import PageWrapper from "@components/PageWrapper";
-
-import AddNewTeamMembers, { GetLayout } from "~/settings/teams/[id]/onboard-members-view";
-
-const OnboardTeamMembersPage = () => {
-  const { t } = useLocale();
-  return (
-    <>
-      <Head>
-        <title>{t("add_team_members")}</title>
-        <meta name="description" content={t("add_team_members_description")} />
-      </Head>
-      <AddNewTeamMembers />
-    </>
-  );
-};
-
-OnboardTeamMembersPage.getLayout = GetLayout;
-OnboardTeamMembersPage.PageWrapper = PageWrapper;
-
-export default OnboardTeamMembersPage;
@@ -1,11 +0,0 @@
-import TeamProfileView from "@calcom/features/ee/teams/pages/team-profile-view";
-import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
-
-import PageWrapper from "@components/PageWrapper";
-
-const Page = () => <TeamProfileView />;
-
-Page.getLayout = getLayout;
-Page.PageWrapper = PageWrapper;
-
-export default Page;
@@ -1,11 +0,0 @@
-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;
@@ -1,28 +0,0 @@
-"use client";
-
-import Head from "next/head";
-
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-
-import PageWrapper from "@components/PageWrapper";
-
-import CreateNewTeamView, { LayoutWrapper } from "~/settings/teams/new/create-new-team-view";
-
-const CreateNewTeamPage = () => {
-  const { t } = useLocale();
-
-  return (
-    <>
-      <Head>
-        <title>{t("create_new_team")}</title>
-        <meta name="description" content={t("create_new_team_description")} />
-      </Head>
-      <CreateNewTeamView />
-    </>
-  );
-};
-
-CreateNewTeamPage.getLayout = LayoutWrapper;
-CreateNewTeamPage.PageWrapper = PageWrapper;
-
-export default CreateNewTeamPage;
@@ -22,7 +22,6 @@ checkRoute "$APP_ROUTER_AUTH_ERROR_ENABLED" app/future/auth/error
 checkRoute "$APP_ROUTER_AUTH_PLATFORM_ENABLED" app/future/auth/platform
 checkRoute "$APP_ROUTER_AUTH_OAUTH2_ENABLED" app/future/auth/oauth2
 checkRoute "$APP_ROUTER_WORKFLOWS_ENABLED" app/future/workflows
-checkRoute "$APP_ROUTER_SETTINGS_TEAMS_ENABLED" app/future/settings/teams
 checkRoute "$APP_ROUTER_GETTING_STARTED_STEP_ENABLED" app/future/getting-started
 checkRoute "$APP_ROUTER_APPS_ENABLED" app/future/apps
 checkRoute "$APP_ROUTER_BOOKINGS_STATUS_ENABLED" app/future/bookings
@@ -1,18 +1,9 @@
 import SectionBottomActions from "@calcom/features/settings/SectionBottomActions";
 import { Meta, SkeletonButton, SkeletonContainer, SkeletonText } from "@calcom/ui";

-export const AppearanceSkeletonLoader = ({
-  title,
-  description,
-  isAppDir,
-}: {
-  title: string;
-  description: string;
-  isAppDir?: boolean;
-}) => {
+export const AppearanceSkeletonLoader = () => {
  return (
    <SkeletonContainer>
-      {!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>
@@ -195,7 +195,6 @@ const OrgAppearanceView = ({

 const OrgAppearanceViewWrapper = () => {
  const router = useRouter();
-  const { t } = useLocale();
  const session = useSession();
  const orgRole = session?.data?.user?.org?.role;
  const { data: currentOrg, isPending, error } = trpc.viewer.organizations.listCurrent.useQuery();
@@ -210,7 +209,7 @@ const OrgAppearanceViewWrapper = () => {
  );

  if (isPending) {
-    return <AppearanceSkeletonLoader title={t("appearance")} description={t("appearance_org_description")} />;
+    return <AppearanceSkeletonLoader />;
  }

  if (!currentOrg) return null;
@@ -23,9 +23,9 @@ type BrandColorsFormValues = {
  darkBrandColor: string;
 };

-type ProfileViewProps = { team: RouterOutputs["viewer"]["teams"]["get"] } & { isAppDir?: boolean };
+type ProfileViewProps = { team: RouterOutputs["viewer"]["teams"]["get"] };

-const ProfileView = ({ team, isAppDir }: ProfileViewProps) => {
+const ProfileView = ({ team }: ProfileViewProps) => {
  const { t } = useLocale();
  const utils = trpc.useUtils();

@@ -79,13 +79,6 @@ const ProfileView = ({ team, isAppDir }: ProfileViewProps) => {

  return (
    <>
-      {!isAppDir ? (
-        <Meta
-          title={t("booking_appearance")}
-          description={t("appearance_team_description")}
-          borderInShellHeader={false}
-        />
-      ) : null}
      {isAdmin ? (
        <>
          <Form
@@ -183,7 +176,7 @@ const ProfileView = ({ team, isAppDir }: ProfileViewProps) => {
  );
 };

-const ProfileViewWrapper = ({ isAppDir }: { isAppDir?: boolean }) => {
+const ProfileViewWrapper = () => {
  const router = useRouter();
  const params = useParamsWithFallback();

@@ -209,18 +202,11 @@ const ProfileViewWrapper = ({ isAppDir }: { isAppDir?: boolean }) => {
    [error]
  );

-  if (isPending)
-    return (
-      <AppearanceSkeletonLoader
-        isAppDir={isAppDir}
-        title={t("appearance")}
-        description={t("appearance_team_description")}
-      />
-    );
+  if (isPending) return <AppearanceSkeletonLoader />;

  if (!team) return null;

-  return <ProfileView team={team} isAppDir={isAppDir} />;
+  return <ProfileView team={team} />;
 };

 export default ProfileViewWrapper;
@@ -140,8 +140,6 @@ const BookingLimitsViewWrapper = () => {
  const router = useRouter();
  const params = useParamsWithFallback();

-  const { t } = useLocale();
-
  const {
    data: team,
    isPending,
@@ -162,13 +160,7 @@ const BookingLimitsViewWrapper = () => {
    [error]
  );

-  if (isPending)
-    return (
-      <AppearanceSkeletonLoader
-        title={t("booking_limits")}
-        description={t("booking_limits_team_description")}
-      />
-    );
+  if (isPending) return <AppearanceSkeletonLoader />;

  if (!team) return null;

@@ -5,14 +5,9 @@ import { Meta } from "@calcom/ui";

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

-const TeamListingView = ({ isAppDir }: { isAppDir?: boolean }) => {
+const TeamListingView = () => {
  const { t } = useLocale();
-  return (
-    <>
-      {!isAppDir ? <Meta title={t("teams")} description={t("create_manage_teams_collaborative")} /> : null}
-      <TeamsListing />
-    </>
-  );
+  return <TeamsListing />;
 };

 export default TeamListingView;
@@ -17,7 +17,7 @@ import { MemberInvitationModalWithoutMembers } from "../components/MemberInvitat
 import MemberList from "../components/MemberList";
 import TeamInviteList from "../components/TeamInviteList";

-const MembersView = ({ isAppDir }: { isAppDir?: boolean }) => {
+const MembersView = () => {
  const { t } = useLocale();
  const [showMemberInvitationModal, setShowMemberInvitationModal] = useState(false);
  const [showInviteLinkSettingsModal, setInviteLinkSettingsModal] = useState(false);
@@ -62,9 +62,6 @@ const MembersView = ({ isAppDir }: { isAppDir?: boolean }) => {

  return (
    <>
-      {!isAppDir ? (
-        <Meta title={t("team_members")} description={t("members_team_description")} CTA={<></>} />
-      ) : null}
      {!isPending && (
        <>
          <div>
@@ -60,18 +60,9 @@ const teamProfileFormSchema = z.object({

 type FormValues = z.infer<typeof teamProfileFormSchema>;

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

-const ProfileView = ({ isAppDir }: { isAppDir?: boolean }) => {
+const ProfileView = () => {
  const params = useParamsWithFallback();
  const teamId = Number(params.id);
  const { t } = useLocale();
@@ -165,17 +156,11 @@ const ProfileView = ({ isAppDir }: { isAppDir?: boolean }) => {
  }

  if (isPending) {
-    return (
-      <SkeletonLoader isAppDir={isAppDir} title={t("profile")} description={t("profile_team_description")} />
-    );
+    return <SkeletonLoader />;
  }

  return (
    <>
-      {!isAppDir ? (
-        <Meta title={t("profile")} description={t("profile_team_description")} borderInShellHeader={true} />
-      ) : null}
-
      {isAdmin ? (
        <TeamProfileForm team={team} />
      ) : (
@@ -242,7 +242,6 @@
    "APP_ROUTER_BOOKINGS_STATUS_ENABLED",
    "APP_ROUTER_EVENT_TYPES_ENABLED",
    "APP_ROUTER_GETTING_STARTED_STEP_ENABLED",
-    "APP_ROUTER_SETTINGS_TEAMS_ENABLED",
    "APP_ROUTER_WORKFLOWS_ENABLED",
    "APP_ROUTER_VIDEO_ENABLED",
    "APP_ROUTER_AUTH_FORGOT_PASSWORD_ENABLED",