chore: use app router for settings/platform/members page (#17849)

* use i18n strings

* migrate platform/members page

apps/web/app/settings/platform/members/page.tsx

@@ -0,0 +1,14 @@
+import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
+
+import PlatformMembersView from "@calcom/features/ee/platform/pages/settings/members";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("platform_members"),
+    (t) => t("platform_members_description")
+  );
+
+export default WithLayout({
+  Page: PlatformMembersView,
+});

apps/web/pages/settings/platform/members/index.tsx

@@ -1,9 +0,0 @@
-import PlatformMembersView from "@calcom/features/ee/platform/pages/settings/members";
-
-import PageWrapper from "@components/PageWrapper";
-
-const Page = () => <PlatformMembersView />;
-
-Page.PageWrapper = PageWrapper;
-
-export default Page;

apps/web/public/static/locales/en/common.json

@@ -1643,6 +1643,8 @@
   "format": "Format",
   "uppercase_for_letters": "Use uppercase for all letters",
   "replace_whitespaces_underscores": "Replace whitespaces with underscores",
+  "platform_members": "Platform members",
+  "platform_members_description": "Manage the admins and members in your platform team",
   "platform_billing": "Platform billing",
   "manage_billing": "Manage billing",
   "manage_billing_description": "Manage all things billing",

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

@@ -2,6 +2,7 @@
 
 import Shell from "@calcom/features/shell/Shell";
 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 { Button } from "@calcom/ui";
@@ -10,6 +11,7 @@ import { useGetUserAttributes } from "@calcom/web/components/settings/platform/h
 import { PlatformPricing } from "@calcom/web/components/settings/platform/pricing/platform-pricing/index";
 
 const PlatformMembersView = () => {
+  const { t } = useLocale();
   const { isUserLoading, isUserBillingDataLoading, isPlatformUser, isPaidUser, userBillingData, userOrgId } =
     useGetUserAttributes();
   const { data: currentOrg, isPending } = trpc.viewer.organizations.listCurrent.useQuery();
@@ -61,10 +63,10 @@ const PlatformMembersView = () => {
           />
         </div>
       }
-      title="Platform members"
+      title={t("platform_members")}
+      subtitle={t("platform_members_description")}
       hideHeadingOnMobile
       withoutMain={false}
-      subtitle="Manage the admins and members in your platform team"
       isPlatformUser={true}>
       <div>{!isPending && canLoggedInUserSeeMembers && <UserListTable />}</div>
     </Shell>