perf: server-fetch data for all pages in /settings/my-account

apps/web/app/(use-page-wrapper)/apps/installed/[category]/page.tsx

@@ -1,9 +1,12 @@
+import { createRouterCaller } from "app/_trpc/context";
 import type { PageProps } from "app/_types";
 import { _generateMetadata } from "app/_utils";
 import { redirect } from "next/navigation";
 import { z } from "zod";
 
 import { AppCategories } from "@calcom/prisma/enums";
+import { appsRouter } from "@calcom/trpc/server/routers/viewer/apps/_router";
+import { calendarsRouter } from "@calcom/trpc/server/routers/viewer/calendars/_router";
 
 import InstalledApps from "~/apps/installed/[category]/installed-category-view";
 
@@ -28,7 +31,24 @@ const InstalledAppsWrapper = async ({ params }: PageProps) => {
     redirect("/apps/installed/calendar");
   }
 
-  return <InstalledApps category={parsedParams.data.category} />;
+  const [calendarsCaller, appsCaller] = await Promise.all([
+    createRouterCaller(calendarsRouter),
+    createRouterCaller(appsRouter),
+  ]);
+
+  const connectedCalendars = await calendarsCaller.connectedCalendars();
+  const installedCalendars = await appsCaller.integrations({
+    variant: "calendar",
+    onlyInstalled: true,
+  });
+
+  return (
+    <InstalledApps
+      connectedCalendars={connectedCalendars}
+      installedCalendars={installedCalendars}
+      category={parsedParams.data.category}
+    />
+  );
 };
 
 export default InstalledAppsWrapper;

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/my-account/appearance/actions.ts

@@ -0,0 +1,7 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+
+export async function revalidateSettingsAppearance() {
+  revalidatePath("/settings/my-account/appearance");
+}

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/my-account/appearance/loading.tsx

@@ -0,0 +1,5 @@
+import { SkeletonLoader } from "~/settings/my-account/appearance-skeleton";
+
+export default function Loading() {
+  return <SkeletonLoader />;
+}

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/my-account/appearance/page.tsx

@@ -1,7 +1,15 @@
+import { createRouterCaller } from "app/_trpc/context";
 import { _generateMetadata } from "app/_utils";
-import { getTranslate } from "app/_utils";
+import { cookies, headers } from "next/headers";
+import { redirect } from "next/navigation";
 
-import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+import { IS_SELF_HOSTED } from "@calcom/lib/constants";
+import hasKeyInMetadata from "@calcom/lib/hasKeyInMetadata";
+import { meRouter } from "@calcom/trpc/server/routers/viewer/me/_router";
+import { getCachedHasTeamPlan } from "@calcom/web/app/cache/membership";
+
+import { buildLegacyRequest } from "@lib/buildLegacyCtx";
 
 import AppearancePage from "~/settings/my-account/appearance-view";
 
@@ -15,13 +23,29 @@ export const generateMetadata = async () =>
   );
 
 const Page = async () => {
-  const t = await getTranslate();
+  const session = await getServerSession({ req: buildLegacyRequest(await headers(), await cookies()) });
+  const userId = session?.user?.id;
+  const redirectUrl = "/auth/login?callbackUrl=/settings/my-account/appearance";
 
-  return (
-    <SettingsHeader title={t("appearance")} description={t("appearance_description")}>
-      <AppearancePage />
-    </SettingsHeader>
-  );
+  if (!userId) {
+    redirect(redirectUrl);
+  }
+
+  const [meCaller, hasTeamPlan] = await Promise.all([
+    createRouterCaller(meRouter),
+    getCachedHasTeamPlan(userId),
+  ]);
+
+  const user = await meCaller.get();
+
+  if (!user) {
+    redirect(redirectUrl);
+  }
+  const isCurrentUsernamePremium =
+    user && hasKeyInMetadata(user, "isPremium") ? !!user.metadata.isPremium : false;
+  const hasPaidPlan = IS_SELF_HOSTED ? true : hasTeamPlan?.hasTeamPlan || isCurrentUsernamePremium;
+
+  return <AppearancePage user={user} hasPaidPlan={hasPaidPlan} />;
 };
 
 export default Page;

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/my-account/calendars/loading.tsx

@@ -0,0 +1,5 @@
+import { CalendarListContainerSkeletonLoader } from "@components/apps/CalendarListContainer";
+
+export default function Loading() {
+  return <CalendarListContainerSkeletonLoader />;
+}

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/my-account/calendars/page.tsx

@@ -1,8 +1,8 @@
+import { createRouterCaller } from "app/_trpc/context";
 import { _generateMetadata } from "app/_utils";
-import { getTranslate } from "app/_utils";
 
-import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
-import { Button } from "@calcom/ui/components/button";
+import { appsRouter } from "@calcom/trpc/server/routers/viewer/apps/_router";
+import { calendarsRouter } from "@calcom/trpc/server/routers/viewer/calendars/_router";
 
 import { CalendarListContainer } from "@components/apps/CalendarListContainer";
 
@@ -16,25 +16,18 @@ export const generateMetadata = async () =>
   );
 
 const Page = async () => {
-  const t = await getTranslate();
-
-  const AddCalendarButton = () => {
-    return (
-      <>
-        <Button color="secondary" StartIcon="plus" href="/apps/categories/calendar">
-          {t("add_calendar")}
-        </Button>
-      </>
-    );
-  };
+  const [calendarsCaller, appsCaller] = await Promise.all([
+    createRouterCaller(calendarsRouter),
+    createRouterCaller(appsRouter),
+  ]);
 
+  const connectedCalendars = await calendarsCaller.connectedCalendars();
+  const installedCalendars = await appsCaller.integrations({
+    variant: "calendar",
+    onlyInstalled: true,
+  });
   return (
-    <SettingsHeader
-      title={t("calendars")}
-      description={t("calendars_description")}
-      CTA={<AddCalendarButton />}>
-      <CalendarListContainer />
-    </SettingsHeader>
+    <CalendarListContainer connectedCalendars={connectedCalendars} installedCalendars={installedCalendars} />
   );
 };
 

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/my-account/conferencing/page.tsx

@@ -1,5 +1,4 @@
 import { _generateMetadata } from "app/_utils";
-import { getTranslate } from "app/_utils";
 
 import { ConferencingAppsViewWebWrapper } from "@calcom/atoms/connect/conferencing-apps/ConferencingAppsViewWebWrapper";
 
@@ -13,15 +12,7 @@ export const generateMetadata = async () =>
   );
 
 const Page = async () => {
-  const t = await getTranslate();
-
-  return (
-    <ConferencingAppsViewWebWrapper
-      title={t("conferencing")}
-      description={t("conferencing_description")}
-      add={t("add")}
-    />
-  );
+  return <ConferencingAppsViewWebWrapper />;
 };
 
 export default Page;

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/my-account/general/actions.ts

@@ -0,0 +1,7 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+
+export async function revalidateSettingsGeneral() {
+  revalidatePath("/settings/my-account/general");
+}

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/my-account/general/loading.tsx

@@ -0,0 +1,5 @@
+import { SkeletonLoader } from "~/settings/my-account/general-skeleton";
+
+export default function Loading() {
+  return <SkeletonLoader />;
+}

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/my-account/general/page.tsx

@@ -1,10 +1,15 @@
+import { createRouterCaller } from "app/_trpc/context";
 import { _generateMetadata } from "app/_utils";
-import { getTranslate } from "app/_utils";
-import { revalidatePath } from "next/cache";
+import { cookies, headers } from "next/headers";
+import { redirect } from "next/navigation";
 
-import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+import { meRouter } from "@calcom/trpc/server/routers/viewer/me/_router";
+import { getTravelSchedule } from "@calcom/web/app/cache/travelSchedule";
 
-import GeneralQueryView from "~/settings/my-account/general-view";
+import { buildLegacyRequest } from "@lib/buildLegacyCtx";
+
+import GeneralView from "~/settings/my-account/general-view";
 
 export const generateMetadata = async () =>
   await _generateMetadata(
@@ -16,17 +21,20 @@ export const generateMetadata = async () =>
   );
 
 const Page = async () => {
-  const t = await getTranslate();
-  const revalidatePage = async () => {
-    "use server";
-    revalidatePath("settings/my-account/general");
-  };
-
-  return (
-    <SettingsHeader title={t("general")} description={t("general_description")} borderInShellHeader={true}>
-      <GeneralQueryView revalidatePage={revalidatePage} />
-    </SettingsHeader>
-  );
+  const session = await getServerSession({ req: buildLegacyRequest(await headers(), await cookies()) });
+  const userId = session?.user?.id;
+  const redirectUrl = "/auth/login?callbackUrl=/settings/my-account/general";
+
+  if (!userId) {
+    return redirect(redirectUrl);
+  }
+
+  const meCaller = await createRouterCaller(meRouter);
+  const [user, travelSchedules] = await Promise.all([meCaller.get(), getTravelSchedule(userId)]);
+  if (!user) {
+    redirect(redirectUrl);
+  }
+  return <GeneralView user={user} travelSchedules={travelSchedules ?? []} />;
 };
 
 export default Page;

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/my-account/out-of-office/page.tsx

@@ -1,10 +1,6 @@
 import { _generateMetadata } from "app/_utils";
-import { getTranslate } from "app/_utils";
 
-import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
-import CreateNewOutOfOfficeEntryButton from "@calcom/features/settings/outOfOffice/CreateNewOutOfOfficeEntryButton";
 import OutOfOfficeEntriesList from "@calcom/features/settings/outOfOffice/OutOfOfficeEntriesList";
-import { OutOfOfficeToggleGroup } from "@calcom/features/settings/outOfOffice/OutOfOfficeToggleGroup";
 
 export const generateMetadata = async () =>
   await _generateMetadata(
@@ -15,22 +11,8 @@ export const generateMetadata = async () =>
     "/settings/my-account/out-of-office"
   );
 
-const Page = async () => {
-  const t = await getTranslate();
-
-  return (
-    <SettingsHeader
-      title={t("out_of_office")}
-      description={t("out_of_office_description")}
-      CTA={
-        <div className="flex gap-2">
-          <OutOfOfficeToggleGroup />
-          <CreateNewOutOfOfficeEntryButton data-testid="add_entry_ooo" />
-        </div>
-      }>
-      <OutOfOfficeEntriesList />
-    </SettingsHeader>
-  );
+const Page = () => {
+  return <OutOfOfficeEntriesList />;
 };
 
 export default Page;

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/my-account/profile/loading.tsx

@@ -0,0 +1,5 @@
+import { SkeletonLoader } from "~/settings/my-account/profile-skeleton";
+
+export default function Loading() {
+  return <SkeletonLoader />;
+}

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/my-account/profile/page.tsx

@@ -1,8 +1,8 @@
+import { createRouterCaller } from "app/_trpc/context";
 import { _generateMetadata } from "app/_utils";
-import { getTranslate } from "app/_utils";
+import { redirect } from "next/navigation";
 
-import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
-import { APP_NAME } from "@calcom/lib/constants";
+import { meRouter } from "@calcom/trpc/server/routers/viewer/me/_router";
 
 import ProfileView from "~/settings/my-account/profile-view";
 
@@ -16,16 +16,13 @@ export const generateMetadata = async () =>
   );
 
 const Page = async () => {
-  const t = await getTranslate();
+  const meCaller = await createRouterCaller(meRouter);
+  const user = await meCaller.get({ includePasswordAdded: true });
+  if (!user) {
+    redirect("/auth/login");
+  }
 
-  return (
-    <SettingsHeader
-      title={t("profile")}
-      description={t("profile_description", { appName: APP_NAME })}
-      borderInShellHeader={true}>
-      <ProfileView />
-    </SettingsHeader>
-  );
+  return <ProfileView user={user} />;
 };
 
 export default Page;

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/my-account/push-notifications/page.tsx

@@ -1,8 +1,5 @@
-import { getTranslate } from "app/_utils";
 import { _generateMetadata } from "app/_utils";
 
-import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
-
 import PushNotificationsView from "~/settings/my-account/push-notifications-view";
 
 export const generateMetadata = async () =>
@@ -14,17 +11,8 @@ export const generateMetadata = async () =>
     "/settings/my-account/push-notifications"
   );
 
-const Page = async () => {
-  const t = await getTranslate();
-
-  return (
-    <SettingsHeader
-      title={t("push_notifications")}
-      description={t("push_notifications_description")}
-      borderInShellHeader={true}>
-      <PushNotificationsView />
-    </SettingsHeader>
-  );
+const Page = () => {
+  return <PushNotificationsView />;
 };
 
 export default Page;

apps/web/app/cache/membership.ts

@@ -0,0 +1,27 @@
+"use server";
+
+import { revalidateTag, unstable_cache } from "next/cache";
+
+import { NEXTJS_CACHE_TTL } from "@calcom/lib/constants";
+import { MembershipRepository } from "@calcom/lib/server/repository/membership";
+
+const CACHE_TAGS = {
+  HAS_TEAM_PLAN: "MembershipRepository.findFirstAcceptedMembershipByUserId",
+} as const;
+
+export const getCachedHasTeamPlan = unstable_cache(
+  async (userId: number) => {
+    const hasTeamPlan = await MembershipRepository.findFirstAcceptedMembershipByUserId(userId);
+
+    return { hasTeamPlan: !!hasTeamPlan };
+  },
+  ["getCachedHasTeamPlan"],
+  {
+    revalidate: NEXTJS_CACHE_TTL,
+    tags: [CACHE_TAGS.HAS_TEAM_PLAN],
+  }
+);
+
+export const revalidateHasTeamPlan = async () => {
+  revalidateTag(CACHE_TAGS.HAS_TEAM_PLAN);
+};

apps/web/app/cache/path/settings/my-account/index.ts

@@ -0,0 +1,11 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+
+export async function revalidateSettingsProfile() {
+  revalidatePath("/settings/my-account/profile");
+}
+
+export async function revalidateSettingsCalendars() {
+  revalidatePath("/settings/my-account/calendars");
+}