From 150e93dc6e97a516e9a4d1e32d749a3d98f6995c Mon Sep 17 00:00:00 2001 From: Hariom Balhara Date: Tue, 2 Dec 2025 19:21:04 +0530 Subject: [PATCH] fix: Add /router to isBookingPages to prevent 500 error on customPageMessage redirect (#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 --- apps/web/components/PageWrapper.tsx | 9 ++++++ apps/web/lib/app-providers.tsx | 43 ++++++++++++-------------- apps/web/lib/hooks/useIsBookingPage.ts | 5 ++- 3 files changed, 33 insertions(+), 24 deletions(-) diff --git a/apps/web/components/PageWrapper.tsx b/apps/web/components/PageWrapper.tsx index 027ff2bc73..eebcf44ea2 100644 --- a/apps/web/components/PageWrapper.tsx +++ b/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"; diff --git a/apps/web/lib/app-providers.tsx b/apps/web/lib/app-providers.tsx index 844040a877..12cb484b3a 100644 --- a/apps/web/lib/app-providers.tsx +++ b/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 & - Pick & - Pick + Pick & + Pick >; 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 ( <> - - - - {RemainingProviders} - - + {RemainingProviders} ); }; diff --git a/apps/web/lib/hooks/useIsBookingPage.ts b/apps/web/lib/hooks/useIsBookingPage.ts index b0ebe545cc..6cbb7bf713 100644 --- a/apps/web/lib/hooks/useIsBookingPage.ts +++ b/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)