fix: Revert - chore: app router - all sub-pages in /apps calcom#16976…

… (calcom#18702)

* revert

* add incomplete-booking

.env.example

@@ -355,6 +355,14 @@ E2E_TEST_OIDC_USER_PASSWORD=
 # provide a value between 0 and 100 to ensure the percentage of traffic
 # redirected from the legacy to the future pages
 AB_TEST_BUCKET_PROBABILITY=50
+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_TEAM_ENABLED=0
 APP_ROUTER_AUTH_FORGOT_PASSWORD_ENABLED=0
 APP_ROUTER_AUTH_LOGIN_ENABLED=0

apps/web/abTest/middlewareFactory.ts

@@ -5,6 +5,11 @@ import { NextResponse, URLPattern } from "next/server";
 import { FUTURE_ROUTES_ENABLED_COOKIE_NAME, FUTURE_ROUTES_OVERRIDE_COOKIE_NAME } from "@calcom/lib/constants";
 
 const ROUTES: [URLPattern, boolean][] = [
+  ["/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 { AppImageProps, MeetingImageProps } from "@calcom/lib/OgImages";
-import { constructGenericImage, constructAppImage, constructMeetingImage } from "@calcom/lib/OgImages";
+import type { MeetingImageProps } from "@calcom/lib/OgImages";
+import { constructGenericImage, 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,18 +62,17 @@ 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: truncatedDescription,
+    description,
     alternates: { canonical },
     openGraph: {
-      description: truncatedDescription,
+      description: truncateOnWord(description, 158),
       url: canonical,
       type: "website",
       siteName: APP_NAME,
@@ -106,26 +105,6 @@ 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,

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

@@ -0,0 +1,45 @@
+import { Prisma } from "@prisma/client";
+import { withAppDirSsg } from "app/WithAppDirSsg";
+import type { PageProps as _PageProps } from "app/_types";
+import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
+import { cookies, headers } from "next/headers";
+
+import { AppRepository } from "@calcom/lib/server/repository/app";
+
+import { getStaticProps } from "@lib/apps/[slug]/getStaticProps";
+import { buildLegacyCtx } from "@lib/buildLegacyCtx";
+
+import type { PageProps } from "~/apps/[slug]/slug-view";
+import Page from "~/apps/[slug]/slug-view";
+
+const getData = withAppDirSsg<PageProps>(getStaticProps, "future/apps/[slug]");
+
+export const generateMetadata = async ({ params, searchParams }: _PageProps) => {
+  const legacyContext = buildLegacyCtx(headers(), cookies(), params, searchParams);
+  const res = await getData(legacyContext);
+
+  return await _generateMetadata(
+    () => res?.data.name ?? "",
+    () => res?.data.description ?? ""
+  );
+};
+
+export const generateStaticParams = async () => {
+  try {
+    const appStore = await AppRepository.findAppStore();
+    return appStore.map(({ slug }) => ({ slug }));
+  } catch (e: unknown) {
+    if (e instanceof Prisma.PrismaClientInitializationError) {
+      // Database is not available at build time, but that's ok – we fall back to resolving paths on demand
+    } else {
+      throw e;
+    }
+  }
+
+  return [];
+};
+
+export default WithLayout({ getLayout: null, Page, getData });
+
+export const dynamic = "force-static";

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

@@ -2,34 +2,16 @@ 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) => {
-  const p = paramsSchema.safeParse(params);
-
-  if (!p.success) {
-    return notFound();
-  }
-  const metadata = await _generateMetadata(
-    () => `${p.data.slug}`,
+  return await _generateMetadata(
+    () => `${params.slug}`,
     () => ""
   );
-  return {
-    ...metadata,
-    robots: {
-      follow: false,
-      index: false,
-    },
-  };
 };
 
 const getData = withAppDirSsr<PageProps>(getServerSideProps);

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

@@ -0,0 +1,34 @@
+import { withAppDirSsg } from "app/WithAppDirSsg";
+import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
+
+import { AppCategories } from "@calcom/prisma/enums";
+import { isPrismaAvailableCheck } from "@calcom/prisma/is-prisma-available-check";
+
+import { getStaticProps } from "@lib/apps/categories/[category]/getStaticProps";
+
+import CategoryPage, { type PageProps } from "~/apps/categories/[category]/category-view";
+
+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);
+  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 [];
+  }
+
+  return paths.map((category) => ({ category }));
+};
+
+const getData = withAppDirSsg<PageProps>(getStaticProps, "future/apps/categories/[category]");
+
+export default WithLayout({ getData, Page: CategoryPage, getLayout: null })<"P">;
+export const dynamic = "force-static";

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

@@ -12,6 +12,7 @@ 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 ?? ""}`,

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

@@ -0,0 +1,18 @@
+import { withAppDirSsr } from "app/WithAppDirSsr";
+import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
+
+import { getServerSidePropsAppDir } from "@lib/apps/installed/[category]/getServerSideProps";
+
+import Page from "~/apps/installed/[category]/installed-category-view";
+
+export const generateMetadata = async () => {
+  return await _generateMetadata(
+    (t) => t("installed_apps"),
+    (t) => t("manage_your_connected_apps")
+  );
+};
+
+const getData = withAppDirSsr(getServerSidePropsAppDir);
+
+export default WithLayout({ getLayout: null, getData, Page });

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

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