diff --git a/apps/web/app/layoutHOC.tsx b/apps/web/app/layoutHOC.tsx index 167219f84ca3a2..6e580e3dea02d9 100644 --- a/apps/web/app/layoutHOC.tsx +++ b/apps/web/app/layoutHOC.tsx @@ -52,7 +52,6 @@ export function WithLayout<T extends Record<string, any>>({ requiresLicense={requiresLicense || !!(Page && "requiresLicense" in Page && Page.requiresLicense)} nonce={nonce} themeBasis={null} - isThemeSupported={Page && "isThemeSupported" in Page ? (Page.isThemeSupported as boolean) : undefined} isBookingPage={isBookingPage || !!(Page && "isBookingPage" in Page && Page.isBookingPage)} {...props}> {pageWithServerLayout} diff --git a/apps/web/components/PageWrapperAppDir.tsx b/apps/web/components/PageWrapperAppDir.tsx index f97125fe16d7e4..a85bac21c1dded 100644 --- a/apps/web/components/PageWrapperAppDir.tsx +++ b/apps/web/components/PageWrapperAppDir.tsx @@ -18,7 +18,6 @@ export type PageWrapperProps = Readonly<{ nonce: string | undefined; themeBasis: string | null; dehydratedState?: DehydratedState; - isThemeSupported?: boolean; isBookingPage?: boolean; i18n?: SSRConfig; }>; diff --git a/apps/web/lib/app-providers-app-dir.tsx b/apps/web/lib/app-providers-app-dir.tsx index 9d6a18b8ab1f80..516c840535b6ec 100644 --- a/apps/web/lib/app-providers-app-dir.tsx +++ b/apps/web/lib/app-providers-app-dir.tsx @@ -20,6 +20,7 @@ import { FeatureProvider } from "@calcom/features/flags/context/provider"; import { useFlags } from "@calcom/features/flags/hooks"; import useIsBookingPage from "@lib/hooks/useIsBookingPage"; +import useIsThemeSupported from "@lib/hooks/useIsThemeSupported"; import PlainChat from "@lib/plain/plainChat"; import type { WithLocaleProps } from "@lib/withLocale"; import type { WithNonceProps } from "@lib/withNonce"; @@ -48,7 +49,6 @@ export type AppProps = Omit< > & { Component: NextAppProps["Component"] & { requiresLicense?: boolean; - isThemeSupported?: boolean; isBookingPage?: boolean | ((arg: { router: NextAppProps["router"] }) => boolean); getLayout?: (page: React.ReactElement) => ReactNode; PageWrapper?: (props: AppProps) => JSX.Element; @@ -129,7 +129,7 @@ type CalcomThemeProps = Readonly<{ themeBasis: string | null; nonce: string | undefined; children: React.ReactNode; - isThemeSupported?: boolean; + isThemeSupported: boolean; }>; const CalcomThemeProvider = (props: CalcomThemeProps) => { @@ -196,8 +196,7 @@ function getThemeProviderProps({ }) { const themeSupport = props.isBookingPage ? ThemeSupport.Booking - : // if isThemeSupported is explicitly false, we don't use theme there - props.isThemeSupported === false + : props.isThemeSupported === false ? ThemeSupport.None : ThemeSupport.App; @@ -263,6 +262,7 @@ function OrgBrandProvider({ children }: { children: React.ReactNode }) { const AppProviders = (props: PageWrapperProps) => { // No need to have intercom on public pages - Good for Page Performance const isBookingPage = useIsBookingPage(); + const isThemeSupported = useIsThemeSupported(); const RemainingProviders = ( <EventCollectionProvider options={{ apiPath: "/api/collect-events" }}> @@ -273,7 +273,7 @@ const AppProviders = (props: PageWrapperProps) => { <CalcomThemeProvider themeBasis={props.themeBasis} nonce={props.nonce} - isThemeSupported={/* undefined gets treated as true */ props.isThemeSupported} + isThemeSupported={isThemeSupported} isBookingPage={props.isBookingPage || isBookingPage}> <FeatureFlagsProvider> <OrgBrandProvider>{props.children}</OrgBrandProvider> diff --git a/apps/web/lib/hooks/useIsThemeSupported.ts b/apps/web/lib/hooks/useIsThemeSupported.ts new file mode 100644 index 00000000000000..766a91c9025ed7 --- /dev/null +++ b/apps/web/lib/hooks/useIsThemeSupported.ts @@ -0,0 +1,14 @@ +"use client"; + +import { usePathname } from "next/navigation"; + +const THEME_UNSUPPORTED_ROUTES = ["/auth/setup"]; + +export default function useIsThemeSupported(): boolean { + const pathname = usePathname(); + + // Check if current pathname matches any unsupported route + const isUnsupportedRoute = THEME_UNSUPPORTED_ROUTES.some((route) => pathname?.startsWith(route)); + + return !isUnsupportedRoute; +}