fix: Add /router to isBookingPages to prevent 500 error on customPageMessage redirect (calcom#25522)

* Add /router to isBookingPages

* Remove Dynamic Posthog Provider from AppProvider.tsx because that is only used by the pages router, and the pages router is only in use by the /router endpoint, which is a booking page and we havent implemented corresponding GeoProvider support for it

Author: hariombalhara

apps/web/components/PageWrapper.tsx

@@ -1,3 +1,12 @@
+/**
+ * PAGES ROUTER ONLY - Used exclusively by Next.js Pages Router
+ * 
+ * Currently only serves the /router endpoint (routing forms redirect page).
+ * DO NOT add new features here - this file will be deprecated once we remove apps/web/pages.
+ * 
+ * For App Router, use PageWrapperAppDir.tsx instead.
+ */
+
 "use client";
 
 import { DefaultSeo } from "next-seo";

apps/web/lib/app-providers.tsx

@@ -1,3 +1,12 @@
+/**
+ * PAGES ROUTER ONLY - Used exclusively by Next.js Pages Router (_app.tsx)
+ * 
+ * Currently only serves the /router endpoint (routing forms redirect page).
+ * DO NOT add new features here - this file will be deprecated once we remove apps/web/pages.
+ * 
+ * For App Router, use app-providers-app-dir.tsx instead.
+ */
+
 import { TooltipProvider } from "@radix-ui/react-tooltip";
 import { dir } from "i18next";
 import type { Session } from "next-auth";
@@ -12,7 +21,6 @@ import type { ParsedUrlQuery } from "querystring";
 import type { PropsWithChildren, ReactNode } from "react";
 import { useEffect } from "react";
 
-import DynamicPostHogProvider from "@calcom/features/ee/event-tracking/lib/posthog/providerDynamic";
 import { OrgBrandingProvider } from "@calcom/features/ee/organizations/context/provider";
 import DynamicHelpscoutProvider from "@calcom/features/ee/support/lib/helpscout/providerDynamic";
 import DynamicIntercomProvider from "@calcom/features/ee/support/lib/intercom/providerDynamic";
@@ -53,12 +61,6 @@ export type AppProps = Omit<
   err?: Error;
 };
 
-const PostHogPageView = dynamic(
-  () => import("@calcom/features/ee/event-tracking/lib/posthog/web/PostHogPageView"),
-  {
-    ssr: false,
-  }
-);
 
 type AppPropsWithChildren = AppProps & {
   children: ReactNode;
@@ -134,8 +136,8 @@ const enum ThemeSupport {
 
 type CalcomThemeProps = PropsWithChildren<
   Pick<AppProps, "router"> &
-    Pick<AppProps["pageProps"], "themeBasis"> &
-    Pick<AppProps["Component"], "isBookingPage" | "isThemeSupported">
+  Pick<AppProps["pageProps"], "themeBasis"> &
+  Pick<AppProps["Component"], "isBookingPage" | "isThemeSupported">
 >;
 const CalcomThemeProvider = (props: CalcomThemeProps) => {
   // Use namespace of embed to ensure same namespaced embed are displayed with same theme. This allows different embeds on the same website to be themed differently
@@ -209,8 +211,8 @@ function getThemeProviderProps({
     ? ThemeSupport.Booking
     : // if isThemeSupported is explicitly false, we don't use theme there
     props.isThemeSupported === false
-    ? ThemeSupport.None
-    : ThemeSupport.App;
+      ? ThemeSupport.None
+      : ThemeSupport.App;
 
   const isBookingPageThemeSupportRequired = themeSupport === ThemeSupport.Booking;
   const themeBasis = props.themeBasis;
@@ -234,13 +236,13 @@ function getThemeProviderProps({
 
   const storageKey = isEmbedMode
     ? // Same Namespace, Same Organizer but different themes would still work seamless and not cause theme flicker
-      // Even though it's recommended to use different namespaces when you want to theme differently on the same page but if the embeds are on different pages, the problem can still arise
-      `embed-theme-${embedNamespace}${appearanceIdSuffix}${embedExplicitlySetThemeSuffix}`
+    // Even though it's recommended to use different namespaces when you want to theme differently on the same page but if the embeds are on different pages, the problem can still arise
+    `embed-theme-${embedNamespace}${appearanceIdSuffix}${embedExplicitlySetThemeSuffix}`
     : themeSupport === ThemeSupport.App
-    ? "app-theme"
-    : isBookingPageThemeSupportRequired
-    ? `booking-theme${appearanceIdSuffix}`
-    : undefined;
+      ? "app-theme"
+      : isBookingPageThemeSupportRequired
+        ? `booking-theme${appearanceIdSuffix}`
+        : undefined;
 
   return {
     storageKey,
@@ -307,12 +309,7 @@ const AppProviders = (props: AppPropsWithChildren) => {
 
   return (
     <>
-      <DynamicHelpscoutProvider>
-        <DynamicPostHogProvider>
-          <PostHogPageView />
-          {RemainingProviders}
-        </DynamicPostHogProvider>
-      </DynamicHelpscoutProvider>
+      <DynamicHelpscoutProvider>{RemainingProviders}</DynamicHelpscoutProvider>
     </>
   );
 };

apps/web/lib/hooks/useIsBookingPage.ts

@@ -1,7 +1,9 @@
 import { usePathname } from "next/navigation";
 
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
-
+// TODO: This approach of checking booking page isn't correct.
+// app.cal.com/rick is a booking page but useIsBookingPage won't return true. This is because all unregistered router in Next.js could technically be a booking page throw catch all routes.
+// The only way to confirm it is by actually checking if we actually rendered a booking route.
 export default function useIsBookingPage(): boolean {
   const pathname = usePathname();
   const isBookingPage = [
@@ -13,6 +15,7 @@ export default function useIsBookingPage(): boolean {
     "/d", // Private Link of booking page
     "/apps/routing-forms/routing-link", // Routing Form page
     "/forms/", // Rewrites to /apps/routing-forms/routing-link
+    "/router", // Headless router page - Loads as a page when redirect type is customPageMessage
   ].some((route) => pathname?.startsWith(route));
   const isBookingsListPage = ["/upcoming", "/unconfirmed", "/recurring", "/cancelled", "/past"].some(
     (route) => pathname?.endsWith(route)