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)