chore: app router - all sub-pages in /apps

.env.example

@@ -357,14 +357,6 @@ E2E_TEST_OIDC_USER_PASSWORD=
 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_APPS_INSTALLED_CATEGORY_ENABLED=0
-APP_ROUTER_APPS_SLUG_ENABLED=0
-APP_ROUTER_APPS_SLUG_SETUP_ENABLED=0
-# whether we redirect to the future/apps/categories from /apps/categories or not
-APP_ROUTER_APPS_CATEGORIES_ENABLED=0
-# whether we redirect to the future/apps/categories/[category] from /apps/categories/[category] or not
-APP_ROUTER_APPS_CATEGORIES_CATEGORY_ENABLED=0
-APP_ROUTER_APPS_ENABLED=0
 APP_ROUTER_AUTH_FORGOT_PASSWORD_ENABLED=0
 APP_ROUTER_AUTH_LOGIN_ENABLED=0
 APP_ROUTER_AUTH_LOGOUT_ENABLED=0

apps/web/abTest/middlewareFactory.ts

@@ -6,11 +6,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,
-  ["/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,
-  ["/apps/:slug/setup", process.env.APP_ROUTER_APPS_SLUG_SETUP_ENABLED === "1"] as const,
-  ["/apps/categories", process.env.APP_ROUTER_APPS_CATEGORIES_ENABLED === "1"] as const,
-  ["/apps/categories/:category", process.env.APP_ROUTER_APPS_CATEGORIES_CATEGORY_ENABLED === "1"] as const,
   ["/auth/forgot-password/:path*", process.env.APP_ROUTER_AUTH_FORGOT_PASSWORD_ENABLED === "1"] as const,
   ["/auth/login", process.env.APP_ROUTER_AUTH_LOGIN_ENABLED === "1"] as const,
   ["/auth/logout", process.env.APP_ROUTER_AUTH_LOGOUT_ENABLED === "1"] as const,

apps/web/app/_utils.tsx

@@ -3,8 +3,8 @@ import i18next from "i18next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { headers } from "next/headers";
 
-import type { MeetingImageProps } from "@calcom/lib/OgImages";
-import { constructGenericImage, constructMeetingImage } from "@calcom/lib/OgImages";
+import type { AppImageProps, MeetingImageProps } from "@calcom/lib/OgImages";
+import { constructGenericImage, constructAppImage, constructMeetingImage } from "@calcom/lib/OgImages";
 import { IS_CALCOM, WEBAPP_URL, APP_NAME, SEO_IMG_OGIMG, CAL_URL } from "@calcom/lib/constants";
 import { buildCanonical } from "@calcom/lib/next-seo.config";
 import { truncateOnWord } from "@calcom/lib/text";
@@ -62,17 +62,18 @@ const _generateMetadataWithoutImage = async (
   const t = await getTranslationWithCache(locale);
 
   const title = getTitle(t);
-  const description = getDescription(t);
+
   const titleSuffix = `| ${APP_NAME}`;
   const displayedTitle = title.includes(titleSuffix) || hideBranding ? title : `${title} ${titleSuffix}`;
   const metadataBase = new URL(IS_CALCOM ? "https://cal.com" : WEBAPP_URL);
+  const truncatedDescription = truncateOnWord(getDescription(t), 158);
 
   return {
     title: title.length === 0 ? APP_NAME : displayedTitle,
-    description,
+    description: truncatedDescription,
     alternates: { canonical },
     openGraph: {
-      description: truncateOnWord(description, 158),
+      description: truncatedDescription,
       url: canonical,
       type: "website",
       siteName: APP_NAME,
@@ -105,6 +106,26 @@ export const _generateMetadata = async (
   };
 };
 
+export const generateAppMetadata = async (
+  app: AppImageProps,
+  getTitle: (t: TFunction<string, undefined>) => string,
+  getDescription: (t: TFunction<string, undefined>) => string,
+  hideBranding?: boolean,
+  origin?: string
+) => {
+  const metadata = await _generateMetadataWithoutImage(getTitle, getDescription, hideBranding, origin);
+
+  const image = SEO_IMG_OGIMG + constructAppImage({ ...app, description: metadata.description });
+
+  return {
+    ...metadata,
+    openGraph: {
+      ...metadata.openGraph,
+      images: [image],
+    },
+  };
+};
+
 export const generateMeetingMetadata = async (
   meeting: MeetingImageProps,
   getTitle: (t: TFunction<string, undefined>) => string,
@@ -113,6 +134,7 @@ export const generateMeetingMetadata = async (
   origin?: string
 ) => {
   const metadata = await _generateMetadataWithoutImage(getTitle, getDescription, hideBranding, origin);
+
   const image = SEO_IMG_OGIMG + constructMeetingImage(meeting);
   return {
     ...metadata,

apps/web/app/apps/[slug]/page.tsx

@@ -0,0 +1,68 @@
+import type { PageProps as _PageProps } from "app/_types";
+import { _generateMetadata, generateAppMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
+import { notFound } from "next/navigation";
+import { z } from "zod";
+
+import { AppRepository } from "@calcom/lib/server/repository/app";
+import { isPrismaAvailableCheck } from "@calcom/prisma/is-prisma-available-check";
+
+import { getStaticProps } from "@lib/apps/[slug]/getStaticProps";
+
+import AppView from "~/apps/[slug]/slug-view";
+
+const paramsSchema = z.object({
+  slug: z.string(),
+});
+
+export const generateMetadata = async ({ params, searchParams }: _PageProps) => {
+  const p = paramsSchema.safeParse(params);
+
+  if (!p.success) {
+    return notFound();
+  }
+
+  const props = await getStaticProps(p.data.slug);
+
+  if (!props) {
+    notFound();
+  }
+  const { name, logo, description } = props.data;
+
+  return await generateAppMetadata(
+    { slug: logo, name, description },
+    () => name,
+    () => description
+  );
+};
+
+export const generateStaticParams = async () => {
+  const isPrismaAvailable = await isPrismaAvailableCheck();
+
+  if (!isPrismaAvailable) {
+    // Database is not available at build time. Make sure we fall back to building these pages on demand
+    return [];
+  }
+  const appStore = await AppRepository.findAppStore();
+  return appStore.map(({ slug }) => ({ slug }));
+};
+
+async function Page({ params }: _PageProps) {
+  const p = paramsSchema.safeParse(params);
+
+  if (!p.success) {
+    return notFound();
+  }
+
+  const props = await getStaticProps(p.data.slug);
+
+  if (!props) {
+    notFound();
+  }
+
+  return <AppView {...props} />;
+}
+
+export default WithLayout({ getLayout: null, ServerPage: Page });
+
+export const dynamic = "force-dynamic";

apps/web/app/future/apps/[slug]/setup/page.tsx → apps/web/app/apps/[slug]/setup/page.tsx

@@ -2,16 +2,34 @@ import { withAppDirSsr } from "app/WithAppDirSsr";
 import type { PageProps as _PageProps } from "app/_types";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
+import { notFound } from "next/navigation";
+import { z } from "zod";
 
 import { getServerSideProps } from "@calcom/app-store/_pages/setup/_getServerSideProps";
 
 import Page, { type PageProps } from "~/apps/[slug]/setup/setup-view";
 
+const paramsSchema = z.object({
+  slug: z.string(),
+});
+
 export const generateMetadata = async ({ params }: _PageProps) => {
-  return await _generateMetadata(
-    () => `${params.slug}`,
+  const p = paramsSchema.safeParse(params);
+
+  if (!p.success) {
+    return notFound();
+  }
+  const metadata = await _generateMetadata(
+    () => `${p.data.slug}`,
     () => ""
   );
+  return {
+    ...metadata,
+    robots: {
+      follow: false,
+      index: false,
+    },
+  };
 };
 
 const getData = withAppDirSsr<PageProps>(getServerSideProps);

apps/web/app/apps/categories/[category]/page.tsx

@@ -0,0 +1,40 @@
+import type { PageProps } from "app/_types";
+import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
+import { redirect } from "next/navigation";
+import { z } from "zod";
+
+import { AppCategories } from "@calcom/prisma/enums";
+
+import { getStaticProps } from "@lib/apps/categories/[category]/getStaticProps";
+
+import CategoryPage from "~/apps/categories/[category]/category-view";
+
+const querySchema = z.object({
+  category: z.enum(Object.values(AppCategories) as [AppCategories, ...AppCategories[]]),
+});
+
+export const generateMetadata = async () => {
+  return await _generateMetadata(
+    (t) => t("app_store"),
+    (t) => t("app_store_description")
+  );
+};
+
+export const generateStaticParams = async () => {
+  const paths = Object.keys(AppCategories);
+  return paths.map((category) => ({ category }));
+};
+
+async function Page({ params, searchParams }: PageProps) {
+  const parsed = querySchema.safeParse({ ...params, ...searchParams });
+  if (!parsed.success) {
+    redirect("/apps/categories/calendar");
+  }
+
+  const props = await getStaticProps(parsed.data.category);
+
+  return <CategoryPage {...props} />;
+}
+
+export default WithLayout({ getLayout: null, ServerPage: Page });

apps/web/app/future/apps/installation/[[...step]]/page.tsx → apps/web/app/apps/installation/[[...step]]/page.tsx

@@ -12,7 +12,6 @@ import Page from "~/apps/installation/[[...step]]/step-view";
 
 export const generateMetadata = async ({ params, searchParams }: PageProps) => {
   const legacyCtx = buildLegacyCtx(headers(), cookies(), params, searchParams);
-
   const { appMetadata } = await getData(legacyCtx);
   return await _generateMetadata(
     (t) => `${t("install")} ${appMetadata?.name ?? ""}`,
@@ -23,3 +22,4 @@ export const generateMetadata = async ({ params, searchParams }: PageProps) => {
 const getData = withAppDirSsr<OnboardingPageProps>(getServerSideProps);
 
 export default WithLayout({ getLayout: null, getData, Page });
+

apps/web/app/apps/installed/[category]/page.tsx

@@ -0,0 +1,32 @@
+import { PageProps } from "app/_types";
+import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
+import { redirect } from "next/navigation";
+import { z } from "zod";
+
+import { AppCategories } from "@calcom/prisma/enums";
+
+import InstalledApps from "~/apps/installed/[category]/installed-category-view";
+
+const querySchema = z.object({
+  category: z.nativeEnum(AppCategories),
+});
+
+export const generateMetadata = async () => {
+  return await _generateMetadata(
+    (t) => t("installed_apps"),
+    (t) => t("manage_your_connected_apps")
+  );
+};
+
+const InstalledAppsWrapper = async ({ params }: PageProps) => {
+  const parsedParams = querySchema.safeParse(params);
+
+  if (!parsedParams.success) {
+    redirect("/apps/installed/calendar");
+  }
+
+  return <InstalledApps category={parsedParams.data.category} />;
+};
+
+export default WithLayout({ getLayout: null, ServerPage: InstalledAppsWrapper });

apps/web/app/future/routing-forms/[...pages]/page.tsx

@@ -13,7 +13,7 @@ const paramsSchema = z
 const Page = ({ params, searchParams }: PageProps) => {
   const { pages } = paramsSchema.parse({ ...params, ...searchParams });
 
-  redirect(`/apps/routing-forms/${pages.length ? pages.join("/") : ""}`);
+  redirect(`/routing/${pages.length ? pages.join("/") : ""}`);
 };
 
 export default Page;