From 4424b2aea354f752a9d96a37dfc4a41834f57b85 Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Mon, 20 Jan 2025 04:00:18 -0500
Subject: [PATCH] useIsThemeSupported hook (#18746)

---
 apps/web/app/layoutHOC.tsx                |  1 -
 apps/web/components/PageWrapperAppDir.tsx |  1 -
 apps/web/lib/app-providers-app-dir.tsx    | 10 +++++-----
 apps/web/lib/hooks/useIsThemeSupported.ts | 14 ++++++++++++++
 4 files changed, 19 insertions(+), 7 deletions(-)
 create mode 100644 apps/web/lib/hooks/useIsThemeSupported.ts

diff --git a/apps/web/app/layoutHOC.tsx b/apps/web/app/layoutHOC.tsx
index 167219f84c..6e580e3dea 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 f97125fe16..a85bac21c1 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 9d6a18b8ab..516c840535 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 0000000000..766a91c902
--- /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;
+}