chore: settings/platform, settings/license-key - remove pages router and use app router (#17384)

* remove pages router and use app router * remove pages router and use app router for platform * add billing page and plans page * fix metadata for settings/platform/billing * fix metadata for settings/platform/oauth-clients
2024-11-04 15:56:43 -03:00
parent ddfbe25903
commit 7263f3b00b
26 changed files with 129 additions and 178 deletions
@@ -342,8 +342,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_MY_ACCOUNT_ENABLED=0
-APP_ROUTER_SETTINGS_PLATFORM_ENABLED=0
 APP_ROUTER_SETTINGS_ORG_ENABLED=0
 APP_ROUTER_APPS_INSTALLED_CATEGORY_ENABLED=0
 APP_ROUTER_APPS_SLUG_ENABLED=0
@@ -8,8 +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/my-account/:path*", process.env.APP_ROUTER_SETTINGS_MY_ACCOUNT_ENABLED === "1"] as const,
-  ["/settings/platform/:path*", process.env.APP_ROUTER_SETTINGS_PLATFORM_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,
@@ -5,7 +5,7 @@ import EditView from "~/settings/platform/oauth-clients/[clientId]/edit/edit-vie

 export const generateMetadata = async () =>
  await _generateMetadata(
-    () => "OAuth client updation form",
+    (t) => t("oAuth_client_updation_form"),
    () => ""
  );

@@ -5,7 +5,7 @@ import EditWebhooksView from "~/settings/platform/oauth-clients/[clientId]/edit/

 export const generateMetadata = async () =>
  await _generateMetadata(
-    () => "OAuth client updation form",
+    (t) => t("oAuth_client_updation_form"),
    () => ""
  );

@@ -0,0 +1,15 @@
+import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
+
+import PlatformBillingUpgrade from "~/settings/platform/billing/billing-view";
+
+export const generateMetadata = async () => {
+  return await _generateMetadata(
+    (t) => t("platform_billing"),
+    (t) => t("manage_billing_description")
+  );
+};
+
+export default WithLayout({
+  Page: PlatformBillingUpgrade,
+});
@@ -0,0 +1,21 @@
+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,
+});
@@ -0,0 +1,15 @@
+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,
+});
@@ -0,0 +1,15 @@
+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,
+});
@@ -0,0 +1,19 @@
+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,
+});
@@ -0,0 +1,16 @@
+import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
+
+import PlatformView from "~/settings/platform/platform-view";
+
+export const generateMetadata = async () => {
+  return await _generateMetadata(
+    () => "Platform",
+    () => "Manage everything related to platform."
+  );
+};
+
+export default WithLayout({
+  getLayout: null,
+  Page: PlatformView,
+});
@@ -0,0 +1,15 @@
+import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
+
+import PlatformPlansView from "~/settings/platform/plans/platform-plans-view";
+
+export const generateMetadata = async () => {
+  return await _generateMetadata(
+    () => "Platform plans",
+    () => ""
+  );
+};
+
+export default WithLayout({
+  Page: PlatformPlansView,
+});
@@ -55,11 +55,11 @@ export default function PlatformBillingUpgrade() {
  return (
    <div>
      <Shell
-        heading="Platform billing"
-        title="Platform billing"
+        heading={t("platform_billing")}
+        title={t("platform_billing")}
        hideHeadingOnMobile
        withoutMain={false}
-        subtitle="Manage all things billing"
+        subtitle={t("manage_billing_description")}
        isPlatformUser={true}>
        <>
          <div className="border-subtle space-y-6 rounded-lg border px-6 py-8 text-sm sm:space-y-8">
@@ -5,6 +5,7 @@ import { useRouter } from "next/navigation";

 import Shell from "@calcom/features/shell/Shell";
 import { ErrorCode } from "@calcom/lib/errorCodes";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { PERMISSIONS_GROUPED_MAP } from "@calcom/platform-constants";
 import { showToast } from "@calcom/ui";

@@ -30,6 +31,7 @@ import {
 } from "../../../../../../../../packages/platform/utils/permissions";

 export default function EditOAuthClient() {
+  const { t } = useLocale();
  const router = useRouter();
  const params = useParams<{ clientId: string }>();
  const clientId = params?.clientId || "";
@@ -78,7 +80,7 @@ export default function EditOAuthClient() {
  if (isPlatformUser && isPaidUser) {
    return (
      <div>
-        <Shell title="OAuth client updation form" isPlatformUser={true}>
+        <Shell title={t("oAuth_client_updation_form")} isPlatformUser={true}>
          <div className="m-2 md:mx-14 md:mx-5">
            <div className="border-subtle mx-auto block justify-between rounded-t-lg border px-4 py-6 sm:flex sm:px-6">
              <div className="flex w-full flex-col">
@@ -5,6 +5,7 @@ import { useRouter } from "next/navigation";

 import Shell from "@calcom/features/shell/Shell";
 import { WebhookForm } from "@calcom/features/webhooks/components";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { WebhookTriggerEvents } from "@calcom/prisma/enums";
 import { showToast } from "@calcom/ui";

@@ -18,6 +19,7 @@ import NoPlatformPlan from "@components/settings/platform/dashboard/NoPlatformPl
 import { useGetUserAttributes } from "@components/settings/platform/hooks/useGetUserAttributes";

 export default function EditOAuthClientWebhooks() {
+  const { t } = useLocale();
  const router = useRouter();
  const params = useParams<{ clientId: string }>();
  const clientId = params?.clientId || "";
@@ -40,7 +42,7 @@ export default function EditOAuthClientWebhooks() {
  if (isPlatformUser && isPaidUser) {
    return (
      <div>
-        <Shell title="OAuth client updation form" isPlatformUser={true}>
+        <Shell title={t("oAuth_client_updation_form")} isPlatformUser={true}>
          <div className="m-2 md:mx-5">
            <div className="border-subtle mx-auto block justify-between rounded-t-lg border px-4 py-6 sm:flex sm:px-6">
              <div className="flex w-full flex-col">
@@ -1,27 +0,0 @@
-"use client";
-
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Meta } from "@calcom/ui";
-
-import { getServerSideProps } from "@lib/settings/license-key/new/getServerSideProps";
-
-import PageWrapper from "@components/PageWrapper";
-
-import CreateANewLicenseKeyForm, { LayoutWrapper } from "~/settings/license-key/new/new-view";
-
-const CreateNewLicenseKeyPage = () => {
-  const { t } = useLocale();
-  return (
-    <>
-      <Meta title={t("set_up_your_organization")} description={t("organizations_description")} />
-      <CreateANewLicenseKeyForm />
-    </>
-  );
-};
-
-CreateNewLicenseKeyPage.getLayout = LayoutWrapper;
-CreateNewLicenseKeyPage.PageWrapper = PageWrapper;
-
-export default CreateNewLicenseKeyPage;
-
-export { getServerSideProps };
@@ -1,12 +0,0 @@
-import PageWrapper from "@components/PageWrapper";
-
-import PlatformBillingUpgrade from "~/settings/platform/billing/billing-view";
-
-const Page = new Proxy<{
-  (): JSX.Element;
-  PageWrapper?: typeof PageWrapper;
-}>(PlatformBillingUpgrade, {});
-
-Page.PageWrapper = PageWrapper;
-
-export default Page;
@@ -1,12 +0,0 @@
-import PageWrapper from "@components/PageWrapper";
-
-import PlatformView from "~/settings/platform/platform-view";
-
-const Page = new Proxy<{
-  (): JSX.Element;
-  PageWrapper?: typeof PageWrapper;
-}>(PlatformView, {});
-
-Page.PageWrapper = PageWrapper;
-
-export default Page;
@@ -1,64 +0,0 @@
-import { useRouter } from "next/navigation";
-
-import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Meta } from "@calcom/ui";
-import { SkeletonContainer, SkeletonText } from "@calcom/ui";
-
-import { getServerSideProps } from "@lib/settings/organizations/new/getServerSideProps";
-
-import PageWrapper from "@components/PageWrapper";
-import usePlatformMe from "@components/settings/platform/hooks/usePlatformMe";
-
-import CreateNewOrganizationPage, { LayoutWrapper } from "~/settings/platform/new/create-new-view";
-
-const SkeletonLoader = () => {
-  return (
-    <SkeletonContainer>
-      <div className="mr-3">
-        <SkeletonText className="h-4 w-28" />
-        <SkeletonText className="mt-3 h-11 w-full" />
-        <SkeletonText className="mt-2 h-11 w-full" />
-      </div>
-    </SkeletonContainer>
-  );
-};
-
-const Page = () => {
-  const { t } = useLocale();
-  const { isFetching, data: platformMe } = usePlatformMe();
-  const router = useRouter();
-
-  if (isFetching) {
-    return <SkeletonLoader />;
-  }
-
-  if (platformMe?.organization?.id) {
-    // if user has a platform org redirect to platform dashboard
-    if (platformMe?.organization?.isPlatform) {
-      router.push("/settings/platform");
-      // user has a regular org redirect to organization settings
-    } else {
-      router.push("/settings/organizations/profile");
-    }
-    // display loader while redirection is happening
-    return <SkeletonLoader />;
-  }
-
-  return (
-    <LicenseRequired>
-      <Meta
-        title={t("set_up_your_platform_organization")}
-        description={t("platform_organization_description")}
-      />
-      <CreateNewOrganizationPage />
-    </LicenseRequired>
-  );
-};
-
-Page.getLayout = LayoutWrapper;
-Page.PageWrapper = PageWrapper;
-
-export default Page;
-
-export { getServerSideProps };
@@ -1,12 +0,0 @@
-import PageWrapper from "@components/PageWrapper";
-
-import EditView from "~/settings/platform/oauth-clients/[clientId]/edit/edit-view";
-
-const Page = new Proxy<{
-  (): JSX.Element;
-  PageWrapper?: typeof PageWrapper;
-}>(EditView, {});
-
-Page.PageWrapper = PageWrapper;
-
-export default Page;
@@ -1,12 +0,0 @@
-import PageWrapper from "@components/PageWrapper";
-
-import EditWebhooksView from "~/settings/platform/oauth-clients/[clientId]/edit/edit-webhooks-view";
-
-const Page = new Proxy<{
-  (): JSX.Element;
-  PageWrapper?: typeof PageWrapper;
-}>(EditWebhooksView, {});
-
-Page.PageWrapper = PageWrapper;
-
-export default Page;
@@ -1,12 +0,0 @@
-import PageWrapper from "@components/PageWrapper";
-
-import CreateOAuthClientView from "~/settings/platform/oauth-clients/create-new-view";
-
-const Page = new Proxy<{
-  (): JSX.Element;
-  PageWrapper?: typeof PageWrapper;
-}>(CreateOAuthClientView, {});
-
-Page.PageWrapper = PageWrapper;
-
-export default Page;
@@ -1,12 +0,0 @@
-import PageWrapper from "@components/PageWrapper";
-
-import PlatformPlansView from "~/settings/platform/plans/platform-plans-view";
-
-const Page = new Proxy<{
-  (): JSX.Element;
-  PageWrapper?: typeof PageWrapper;
-}>(PlatformPlansView, {});
-
-Page.PageWrapper = PageWrapper;
-
-export default Page;
@@ -1630,6 +1630,7 @@
  "format": "Format",
  "uppercase_for_letters": "Use uppercase for all letters",
  "replace_whitespaces_underscores": "Replace whitespaces with underscores",
+  "platform_billing": "Platform billing",
  "manage_billing": "Manage billing",
  "manage_billing_description": "Manage all things billing",
  "billing_freeplan_title": "You're currently on the FREE plan",
@@ -2276,6 +2277,7 @@
  "seat_options_doesnt_multiple_durations": "Seat option doesn't support multiple durations",
  "include_calendar_event": "Include calendar event",
  "oAuth": "OAuth",
+  "oAuth_client_updation_form": "OAuth client updation form",
  "recently_added": "Recently added",
  "connect_all_calendars": "Connect all your calendars",
  "connect_all_calendars_description": "{{appName}} reads availability from all your existing calendars.",
@@ -9,8 +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_MY_ACCOUNT_ENABLED" app/future/settings/my-account
-checkRoute "$APP_ROUTER_SETTINGS_PLATFORM_ENABLED" app/future/settings/platform
 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\]
@@ -241,8 +241,6 @@
    "APP_ROUTER_EVENT_TYPES_ENABLED",
    "APP_ROUTER_GETTING_STARTED_STEP_ENABLED",
    "APP_ROUTER_SETTINGS_DEVELOPER_ENABLED",
-    "APP_ROUTER_SETTINGS_MY_ACCOUNT_ENABLED",
-    "APP_ROUTER_SETTINGS_PLATFORM_ENABLED",
    "APP_ROUTER_SETTINGS_ORG_ENABLED",
    "APP_ROUTER_SETTINGS_TEAMS_ENABLED",
    "APP_ROUTER_WORKFLOWS_ENABLED",