Revert "remove pages router and use app router (#16793)" (#17002)

This reverts commit 664a92a1d0.

apps/web/app/future/settings/(settings)/my-account/general/page.tsx

@@ -1,6 +1,5 @@
 import { _generateMetadata } from "app/_utils";
 import { getFixedT } from "app/_utils";
-import { revalidatePath } from "next/cache";
 
 import { getServerSessionForAppDir } from "@calcom/feature-auth/lib/get-server-session-for-app-dir";
 import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
@@ -17,14 +16,9 @@ const Page = async () => {
   const session = await getServerSessionForAppDir();
 
   const t = await getFixedT(session?.user.locale || "en");
-  const revalidatePage = async () => {
-    "use server";
-    revalidatePath("settings/my-account/general");
-  };
-
   return (
     <SettingsHeader title={t("general")} description={t("general_description")} borderInShellHeader={true}>
-      <GeneralQueryView revalidatePage={revalidatePage} />
+      <GeneralQueryView />
     </SettingsHeader>
   );
 };

apps/web/modules/settings/my-account/general-view.tsx

@@ -68,14 +68,9 @@ interface GeneralViewProps {
   localeProp: string;
   user: RouterOutputs["viewer"]["me"];
   travelSchedules: RouterOutputs["viewer"]["getTravelSchedules"];
-  revalidatePage: GeneralQueryViewProps["revalidatePage"];
 }
 
-type GeneralQueryViewProps = {
-  revalidatePage: () => Promise<void>;
-};
-
-const GeneralQueryView = ({ revalidatePage }: GeneralQueryViewProps) => {
+const GeneralQueryView = () => {
   const { t } = useLocale();
 
   const { data: user, isPending } = trpc.viewer.me.useQuery();
@@ -87,17 +82,10 @@ const GeneralQueryView = ({ revalidatePage }: GeneralQueryViewProps) => {
   if (!user) {
     throw new Error(t("something_went_wrong"));
   }
-  return (
-    <GeneralView
-      user={user}
-      travelSchedules={travelSchedules || []}
-      localeProp={user.locale}
-      revalidatePage={revalidatePage}
-    />
-  );
+  return <GeneralView user={user} travelSchedules={travelSchedules || []} localeProp={user.locale} />;
 };
 
-const GeneralView = ({ localeProp, user, travelSchedules, revalidatePage }: GeneralViewProps) => {
+const GeneralView = ({ localeProp, user, travelSchedules }: GeneralViewProps) => {
   const utils = trpc.useContext();
   const {
     t,
@@ -117,7 +105,6 @@ const GeneralView = ({ localeProp, user, travelSchedules, revalidatePage }: Gene
       if (res.locale) {
         window.calNewLocale = res.locale;
       }
-      await revalidatePage();
     },
     onError: () => {
       showToast(t("error_updating_settings"), "error");
@@ -190,7 +177,7 @@ const GeneralView = ({ localeProp, user, travelSchedules, revalidatePage }: Gene
     <div>
       <Form
         form={formMethods}
-        handleSubmit={async (values) => {
+        handleSubmit={(values) => {
           setIsUpdateBtnLoading(true);
           mutation.mutate({
             ...values,

apps/web/next.config.js

@@ -178,7 +178,6 @@ const nextConfig = {
     serverComponentsExternalPackages: ["next-i18next"],
     optimizePackageImports: ["@calcom/ui"],
     instrumentationHook: true,
-    serverActions: true,
   },
   i18n: {
     ...i18n,

apps/web/pages/settings/my-account/appearance.tsx

@@ -0,0 +1,23 @@
+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 AppearancePage from "~/settings/my-account/appearance-view";
+
+const Page = () => {
+  const { t } = useLocale();
+
+  return (
+    <>
+      <Meta title={t("appearance")} description={t("appearance_description")} borderInShellHeader={false} />
+      <AppearancePage />
+    </>
+  );
+};
+
+Page.getLayout = getLayout;
+Page.PageWrapper = PageWrapper;
+
+export default Page;

apps/web/pages/settings/my-account/calendars.tsx

@@ -0,0 +1,31 @@
+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 { CalendarListContainer } from "@components/apps/CalendarListContainer";
+
+import AddCalendarButton from "~/settings/my-account/components/AddCalendarButton";
+
+const Page = () => {
+  const { t } = useLocale();
+
+  return (
+    <>
+      <Meta
+        title={t("calendars")}
+        description={t("calendars_description")}
+        CTA={<AddCalendarButton />}
+        borderInShellHeader={false}
+      />
+      <div className="mt-8">
+        <CalendarListContainer />
+      </div>
+    </>
+  );
+};
+
+Page.getLayout = getLayout;
+Page.PageWrapper = PageWrapper;
+
+export default Page;

apps/web/pages/settings/my-account/conferencing.tsx

@@ -0,0 +1,36 @@
+import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Button, Meta } from "@calcom/ui";
+
+import PageWrapper from "@components/PageWrapper";
+
+import ConferencingView from "~/settings/my-account/conferencing-view";
+
+const Page = () => {
+  const { t } = useLocale();
+
+  const AddConferencingButton = () => {
+    return (
+      <Button color="secondary" StartIcon="plus" href="/apps/categories/conferencing">
+        {t("add")}
+      </Button>
+    );
+  };
+
+  return (
+    <>
+      <Meta
+        title={t("conferencing")}
+        description={t("conferencing_description")}
+        CTA={<AddConferencingButton />}
+        borderInShellHeader={true}
+      />
+      <ConferencingView />
+    </>
+  );
+};
+
+Page.getLayout = getLayout;
+Page.PageWrapper = PageWrapper;
+
+export default Page;

apps/web/pages/settings/my-account/general.tsx

@@ -0,0 +1,23 @@
+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 GeneralQueryView from "~/settings/my-account/general-view";
+
+const Page = () => {
+  const { t } = useLocale();
+
+  return (
+    <>
+      <Meta title={t("general")} description={t("general_description")} borderInShellHeader={true} />
+      <GeneralQueryView />
+    </>
+  );
+};
+
+Page.getLayout = getLayout;
+Page.PageWrapper = PageWrapper;
+
+export default Page;

apps/web/pages/settings/my-account/out-of-office/index.tsx

@@ -0,0 +1,31 @@
+import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
+import CreateNewOutOfOfficeEntryButton from "@calcom/features/settings/outOfOffice/CreateNewOutOfOfficeEntryButton";
+import { OutOfOfficeEntriesList } from "@calcom/features/settings/outOfOffice/OutOfOfficeEntriesList";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc } from "@calcom/trpc/react";
+import { Meta, SkeletonText } from "@calcom/ui";
+
+import PageWrapper from "@components/PageWrapper";
+
+const Page = () => {
+  const { t } = useLocale();
+
+  const { isPending } = trpc.viewer.outOfOfficeReasonList.useQuery();
+
+  return (
+    <>
+      <Meta
+        title={t("out_of_office")}
+        description={t("out_of_office_description")}
+        borderInShellHeader={false}
+        CTA={isPending ? <SkeletonText className="h-8 w-20" /> : <CreateNewOutOfOfficeEntryButton />}
+      />
+      <OutOfOfficeEntriesList />
+    </>
+  );
+};
+
+Page.getLayout = getLayout;
+Page.PageWrapper = PageWrapper;
+
+export default Page;

apps/web/pages/settings/my-account/profile.tsx

@@ -0,0 +1,27 @@
+import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
+import { APP_NAME } from "@calcom/lib/constants";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Meta } from "@calcom/ui";
+
+import PageWrapper from "@components/PageWrapper";
+
+import ProfileView from "~/settings/my-account/profile-view";
+
+const Page = () => {
+  const { t } = useLocale();
+  return (
+    <>
+      <Meta
+        title={t("profile")}
+        description={t("profile_description", { appName: APP_NAME })}
+        borderInShellHeader={true}
+      />
+      <ProfileView />
+    </>
+  );
+};
+
+Page.getLayout = getLayout;
+Page.PageWrapper = PageWrapper;
+
+export default Page;