chore: App router migration - /attributes, /privacy, /dsync, /license-key under /settings route group (#16406)

* migrate license-key/new

* migrate settings/org/dsync

* migrate settings/org/privacy

* migrate org attributes

* remove res in getServerSideProps

* Fix SettingsLayoutAppDir

* fix attributes pages

* fix

* fix

apps/web/app/future/settings/(settings)/organizations/attributes/[id]/edit/page.tsx

@@ -0,0 +1,11 @@
+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;

apps/web/app/future/settings/(settings)/organizations/attributes/create/page.tsx

@@ -0,0 +1,11 @@
+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;

apps/web/app/future/settings/(settings)/organizations/attributes/page.tsx

@@ -0,0 +1,11 @@
+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;

apps/web/app/future/settings/(settings)/organizations/dsync/page.tsx

@@ -0,0 +1,25 @@
+import { _generateMetadata, getFixedT } from "app/_utils";
+import { getServerSession } from "next-auth";
+
+import { AUTH_OPTIONS } from "@calcom/features/auth/lib/next-auth-options";
+import DirectorySyncTeamView from "@calcom/features/ee/dsync/page/team-dsync-view";
+import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("directory_sync"),
+    (t) => t("directory_sync_description")
+  );
+
+const Page = async () => {
+  const session = await getServerSession(AUTH_OPTIONS);
+  const t = await getFixedT(session?.user.locale || "en");
+
+  return (
+    <SettingsHeader title={t("directory_sync")} description={t("directory_sync_description")}>
+      <DirectorySyncTeamView />
+    </SettingsHeader>
+  );
+};
+
+export default Page;

apps/web/app/future/settings/(settings)/organizations/privacy/page.tsx

@@ -0,0 +1,25 @@
+import { _generateMetadata, getFixedT } from "app/_utils";
+import { getServerSession } from "next-auth";
+
+import { AUTH_OPTIONS } from "@calcom/features/auth/lib/next-auth-options";
+import PrivacyView from "@calcom/features/ee/organizations/pages/settings/privacy";
+import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("privacy"),
+    (t) => t("privacy_organization_description")
+  );
+
+const Page = async () => {
+  const session = await getServerSession(AUTH_OPTIONS);
+  const t = await getFixedT(session?.user.locale || "en");
+
+  return (
+    <SettingsHeader title={t("privacy")} description={t("privacy_organization_description")}>
+      <PrivacyView />
+    </SettingsHeader>
+  );
+};
+
+export default Page;

apps/web/app/future/settings/license-key/new/page.tsx

@@ -0,0 +1,21 @@
+import { withAppDirSsr } from "app/WithAppDirSsr";
+import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
+
+import type { inferSSRProps } from "@calcom/types/inferSSRProps";
+
+import { getServerSideProps } from "@lib/settings/license-key/new/getServerSideProps";
+
+import CreateANewLicenseKeyForm, { LayoutWrapper } from "~/settings/license-key/new/new-view";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("set_up_your_organization"),
+    (t) => t("organizations_description")
+  );
+
+export default WithLayout({
+  Page: CreateANewLicenseKeyForm,
+  getLayout: LayoutWrapper,
+  getData: withAppDirSsr<inferSSRProps<typeof getServerSideProps>>(getServerSideProps),
+});

apps/web/lib/settings/license-key/new/getServerSideProps.tsx

@@ -6,7 +6,6 @@ import { AUTH_OPTIONS } from "@calcom/feature-auth/lib/next-auth-options";
 export const getServerSideProps = async (context: GetServerSidePropsContext) => {
   const session = await getServerSession({
     req: context.req,
-    res: context.res,
     authOptions: AUTH_OPTIONS,
   });
   // Disable this check if we ever make this self serve.

apps/web/modules/settings/license-key/new/new-view.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { CreateANewLicenseKeyForm } from "@calcom/features/ee/deployment/licensekey/CreateLicenseKeyForm";
+import { WizardLayout } from "@calcom/ui";
+
+export const LayoutWrapper = (page: React.ReactElement) => {
+  return (
+    <WizardLayout currentStep={1} maxSteps={2}>
+      {page}
+    </WizardLayout>
+  );
+};
+
+export default CreateANewLicenseKeyForm;

apps/web/pages/settings/license-key/new/index.tsx

@@ -1,13 +1,14 @@
 "use client";
 
-import { CreateANewLicenseKeyForm } from "@calcom/features/ee/deployment/licensekey/CreateLicenseKeyForm";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { WizardLayout, Meta } from "@calcom/ui";
+import { Meta } from "@calcom/ui";
 
-import { getServerSideProps } from "@lib/settings/license-keys/new/getServerSideProps";
+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 (
@@ -17,13 +18,6 @@ const CreateNewLicenseKeyPage = () => {
     </>
   );
 };
-const LayoutWrapper = (page: React.ReactElement) => {
-  return (
-    <WizardLayout currentStep={1} maxSteps={2}>
-      {page}
-    </WizardLayout>
-  );
-};
 
 CreateNewLicenseKeyPage.getLayout = LayoutWrapper;
 CreateNewLicenseKeyPage.PageWrapper = PageWrapper;

apps/web/pages/settings/organizations/attributes/[id]/edit.tsx

@@ -1,9 +1,24 @@
-import OrgAttributesEditPage from "@calcom/ee/organizations/pages/settings/attributes/attributes-edit-view";
+"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 type { CalPageWrapper } from "@components/PageWrapper";
 import PageWrapper from "@components/PageWrapper";
 
-const Page = OrgAttributesEditPage as CalPageWrapper;
+const Page = () => {
+  const { t } = useLocale();
+  return (
+    <>
+      <Meta title="Attribute" description={t("edit_attribute_description")} />
+      <OrgAttributesEditPage />
+    </>
+  );
+};
+
+Page.getLayout = getLayout;
 Page.PageWrapper = PageWrapper;
 
 export default Page;

apps/web/pages/settings/organizations/attributes/create.tsx

@@ -1,9 +1,20 @@
-import OrgAttributesCreatePage from "@calcom/ee/organizations/pages/settings/attributes/attributes-create-view";
+import OrgAttributesCreatePage, {
+  getLayout,
+} from "@calcom/ee/organizations/pages/settings/attributes/attributes-create-view";
+import { Meta } from "@calcom/ui";
 
-import type { CalPageWrapper } from "@components/PageWrapper";
 import PageWrapper from "@components/PageWrapper";
 
-const Page = OrgAttributesCreatePage as CalPageWrapper;
+const Page = () => {
+  return (
+    <>
+      <Meta title="Attribute" description="Create an attribute for your team members" />
+      <OrgAttributesCreatePage />
+    </>
+  );
+};
+
+Page.getLayout = getLayout;
 Page.PageWrapper = PageWrapper;
 
 export default Page;

apps/web/pages/settings/organizations/attributes/index.tsx

@@ -1,9 +1,21 @@
-import OrgSettingsAttributesPage from "@calcom/ee/organizations/pages/settings/attributes/attributes-list-view";
+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 type { CalPageWrapper } from "@components/PageWrapper";
 import PageWrapper from "@components/PageWrapper";
 
-const Page = OrgSettingsAttributesPage as CalPageWrapper;
+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;

apps/web/pages/settings/organizations/dsync.tsx

@@ -1,9 +1,22 @@
-import DirectorySyncTeamView from "@calcom/features/ee/dsync/page/team-dsync-view";
+"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 type { CalPageWrapper } from "@components/PageWrapper";
 import PageWrapper from "@components/PageWrapper";
 
-const Page = DirectorySyncTeamView as CalPageWrapper;
+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;

apps/web/pages/settings/organizations/privacy.tsx

@@ -1,9 +1,27 @@
-import PrivacyView from "@calcom/features/ee/organizations/pages/settings/privacy";
+"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 type { CalPageWrapper } from "@components/PageWrapper";
 import PageWrapper from "@components/PageWrapper";
 
-const Page = PrivacyView as CalPageWrapper;
+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;

packages/features/ee/deployment/licensekey/CreateLicenseKeyForm.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import type { SessionContextValue } from "next-auth/react";
 import { useSession } from "next-auth/react";
 import { useState } from "react";

packages/features/ee/dsync/page/team-dsync-view.tsx

@@ -1,12 +1,13 @@
+"use client";
+
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
 
 import { HOSTED_CAL_FEATURES } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Meta, SkeletonLoader, showToast } from "@calcom/ui";
+import { SkeletonLoader, showToast } from "@calcom/ui";
 
-import { getLayout } from "../../../settings/layouts/SettingsLayout";
 import ConfigureDirectorySync from "../components/ConfigureDirectorySync";
 
 // For Hosted Cal - Team view
@@ -36,7 +37,6 @@ const DirectorySync = () => {
 
   return (
     <div className="bg-default w-full sm:mx-0 xl:mt-0">
-      <Meta title={t("directory_sync")} description={t("directory_sync_description")} />
       {HOSTED_CAL_FEATURES && <ConfigureDirectorySync organizationId={currentOrg?.id || null} />}
       {/* TODO add additional settings for dsync */}
       {/* <SettingsToggle
@@ -56,6 +56,4 @@ const DirectorySync = () => {
   );
 };
 
-DirectorySync.getLayout = getLayout;
-
 export default DirectorySync;

packages/features/ee/organizations/pages/settings/attributes/attributes-create-view.tsx

@@ -9,7 +9,7 @@ import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequir
 import SettingsLayout from "@calcom/features/settings/layouts/SettingsLayout";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Meta, Button, useMeta, showToast } from "@calcom/ui";
+import { Button, useMeta, showToast } from "@calcom/ui";
 
 import { AttributeForm } from "./AttributesForm";
 
@@ -38,7 +38,6 @@ function CreateAttributesPage() {
   return (
     <>
       <LicenseRequired>
-        <Meta title="Attribute" description="Create an attribute for your team members" />
         <AttributeForm
           header={<CreateAttributeHeader isPending={mutation.isPending} />}
           onSubmit={(values) => {
@@ -75,7 +74,7 @@ function CreateAttributeHeader(props: { isPending: boolean }) {
             <span className="sr-only">{t("back_to_attributes")}</span>
           </Button>
           <div className="font-cal text-cal flex space-x-1 text-xl font-semibold leading-none">
-            <h1 className="text-emphasis">{meta.title}</h1>
+            <h1 className="text-emphasis">{meta.title || "Attribute"}</h1>
             {watchedTitle && (
               <>
                 <span className="text-subtle">/</span> <span className="text-emphasis">{watchedTitle}</span>
@@ -90,10 +89,8 @@ function CreateAttributeHeader(props: { isPending: boolean }) {
     </>
   );
 }
-function getLayout(page: React.ReactElement) {
+export function getLayout(page: React.ReactElement) {
   return <SettingsLayout hideHeader>{page}</SettingsLayout>;
 }
 
-CreateAttributesPage.getLayout = getLayout;
-
 export default CreateAttributesPage;

packages/features/ee/organizations/pages/settings/attributes/attributes-edit-view.tsx

@@ -9,7 +9,7 @@ import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequir
 import SettingsLayout from "@calcom/features/settings/layouts/SettingsLayout";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Meta, Button, useMeta, showToast } from "@calcom/ui";
+import { Button, useMeta, showToast } from "@calcom/ui";
 
 import { AttributeForm } from "./AttributesForm";
 
@@ -49,7 +49,6 @@ function CreateAttributesPage() {
   return (
     <>
       <LicenseRequired>
-        <Meta title="Attribute" description={t("edit_attribute_description")} />
         {!attribute.isLoading && attribute.data ? (
           <AttributeForm
             initialValues={{
@@ -94,7 +93,7 @@ function EditAttributeHeader(props: { isPending: boolean }) {
             <span className="sr-only">{t("back_to_attributes")}</span>
           </Button>
           <div className="font-cal text-cal flex space-x-1 text-xl font-semibold leading-none">
-            <h1 className="text-emphasis">{meta.title}</h1>
+            <h1 className="text-emphasis">{meta.title || "Attribute"}</h1>
             {watchedTitle && (
               <>
                 <span className="text-subtle">/</span> <span className="text-emphasis">{watchedTitle}</span>
@@ -110,10 +109,8 @@ function EditAttributeHeader(props: { isPending: boolean }) {
   );
 }
 
-function getLayout(page: React.ReactElement) {
+export function getLayout(page: React.ReactElement) {
   return <SettingsLayout hideHeader>{page}</SettingsLayout>;
 }
 
-CreateAttributesPage.getLayout = getLayout;
-
 export default CreateAttributesPage;

packages/features/ee/organizations/pages/settings/attributes/attributes-list-view.tsx

@@ -8,7 +8,6 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
 import {
-  Meta,
   Switch,
   Dropdown,
   Button,
@@ -132,7 +131,6 @@ function OrganizationAttributesPage() {
   if (isLoading) {
     return (
       <>
-        <Meta title={t("attributes")} description={t("attribute_meta_description")} />
         <div className="border-subtle bg-default flex flex-col gap-4 rounded-lg border p-6">
           <ListSkeleton />
         </div>
@@ -142,7 +140,6 @@ function OrganizationAttributesPage() {
 
   return (
     <>
-      <Meta title={t("attributes")} description={t("attribute_meta_description")} />
       <ListAttributeHeader />
       <LicenseRequired>
         <div className="border-subtle bg-default flex flex-col gap-4 rounded-lg border p-6">
@@ -191,14 +188,17 @@ function OrganizationAttributesPage() {
 
 function ListAttributeHeader() {
   const { meta } = useMeta();
+  const { t } = useLocale();
 
   return (
     <>
       <div className="min-h-6 mb-6 mt-6 flex flex-grow items-center justify-between lg:mt-12">
         <div className="flex items-center gap-4 ">
           <div className="flex flex-col space-y-1 ">
-            <h1 className="text-emphasis font-cal text-xl font-semibold leading-none">{meta.title}</h1>
-            <p className="text-subtle text-sm">{meta.description}</p>
+            <h1 className="text-emphasis font-cal text-xl font-semibold leading-none">
+              {meta.title || t("attributes")}
+            </h1>
+            <p className="text-subtle text-sm">{meta.description || t("attribute_meta_description")}</p>
           </div>
         </div>
       </div>
@@ -206,10 +206,8 @@ function ListAttributeHeader() {
   );
 }
 
-function getLayout(page: React.ReactElement) {
+export function getLayout(page: React.ReactElement) {
   return <SettingsLayout hideHeader>{page}</SettingsLayout>;
 }
 
-OrganizationAttributesPage.getLayout = getLayout;
-
 export default OrganizationAttributesPage;

packages/features/ee/organizations/pages/settings/privacy.tsx

@@ -2,14 +2,10 @@
 
 import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
 import MakeTeamPrivateSwitch from "@calcom/features/ee/teams/components/MakeTeamPrivateSwitch";
-import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { MembershipRole } from "@calcom/prisma/enums";
 import { trpc } from "@calcom/trpc/react";
-import { Meta } from "@calcom/ui";
 
 const PrivacyView = () => {
-  const { t } = useLocale();
   const { data: currentOrg } = trpc.viewer.organizations.listCurrent.useQuery();
   const isOrgAdminOrOwner =
     currentOrg &&
@@ -22,11 +18,6 @@ const PrivacyView = () => {
 
   return (
     <LicenseRequired>
-      <Meta
-        borderInShellHeader={false}
-        title={t("privacy")}
-        description={t("privacy_organization_description")}
-      />
       <div>
         <MakeTeamPrivateSwitch
           isOrg={true}
@@ -38,6 +29,5 @@ const PrivacyView = () => {
     </LicenseRequired>
   );
 };
-PrivacyView.getLayout = getLayout;
 
 export default PrivacyView;

packages/features/settings/layouts/SettingsLayout.tsx

@@ -648,14 +648,12 @@ const MobileSettingsContainer = (props: { onSideContainerOpen?: () => void }) =>
   );
 };
 
-export default function SettingsLayout({
-  children,
-  hideHeader,
-  ...rest
-}: {
+export type SettingsLayoutProps = {
   children: React.ReactNode;
   hideHeader?: boolean;
-} & ComponentProps<typeof Shell>) {
+} & ComponentProps<typeof Shell>;
+
+export default function SettingsLayout({ children, hideHeader, ...rest }: SettingsLayoutProps) {
   const pathname = usePathname();
   const state = useState(false);
   const { t } = useLocale();