fix: theme is not configured in app router (#16889)

* fix: theme is not configured in app router

* fix type error

* remove logs

* use testBothFutureAndLegacyRoutes

* add APP_ROUTER_SETTINGS_MY_ACCOUNT_ENABLED

.env.example

@@ -335,6 +335,7 @@ AB_TEST_BUCKET_PROBABILITY=50
 APP_ROUTER_EVENT_TYPES_ENABLED=0
 APP_ROUTER_SETTINGS_DEVELOPER_ENABLED=0
 APP_ROUTER_SETTINGS_ADMIN_ENABLED=0
+APP_ROUTER_SETTINGS_MY_ACCOUNT_ENABLED=0
 APP_ROUTER_SETTINGS_PLATFORM_ENABLED=0
 APP_ROUTER_SETTINGS_ORG_ENABLED=0
 APP_ROUTER_APPS_INSTALLED_CATEGORY_ENABLED=0

apps/web/abTest/middlewareFactory.ts

@@ -9,6 +9,7 @@ const ROUTES: [URLPattern, boolean][] = [
   ["/event-types", process.env.APP_ROUTER_EVENT_TYPES_ENABLED === "1"] as const,
   ["/settings/developer/:path*", process.env.APP_ROUTER_SETTINGS_DEVELOPER_ENABLED === "1"] as const,
   ["/settings/admin/:path*", process.env.APP_ROUTER_SETTINGS_ADMIN_ENABLED === "1"] as const,
+  ["/settings/my-account/:path*", process.env.APP_ROUTER_SETTINGS_MY_ACCOUNT_ENABLED === "1"] as const,
   ["/settings/platform/:path*", process.env.APP_ROUTER_SETTINGS_PLATFORM_ENABLED === "1"] as const,
   ["/settings/organizations/:path*", process.env.APP_ROUTER_SETTINGS_ORG_ENABLED === "1"] as const,
   ["/apps/installed/:category", process.env.APP_ROUTER_APPS_INSTALLED_CATEGORY_ENABLED === "1"] as const,

apps/web/app/layoutHOC.tsx

@@ -51,7 +51,7 @@ 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)}
+        isThemeSupported={Page && "isThemeSupported" in Page ? (Page.isThemeSupported as boolean) : undefined}
         isBookingPage={isBookingPage || !!(Page && "isBookingPage" in Page && Page.isBookingPage)}
         {...props}>
         {pageWithServerLayout}

apps/web/lib/app-providers-app-dir.tsx

@@ -127,8 +127,8 @@ type CalcomThemeProps = Readonly<{
   isBookingPage: boolean;
   themeBasis: string | null;
   nonce: string | undefined;
-  isThemeSupported: boolean;
   children: React.ReactNode;
+  isThemeSupported?: boolean;
 }>;
 
 const CalcomThemeProvider = (props: CalcomThemeProps) => {
@@ -273,7 +273,7 @@ const AppProviders = (props: PageWrapperProps) => {
               <CalcomThemeProvider
                 themeBasis={props.themeBasis}
                 nonce={props.nonce}
-                isThemeSupported={/* undefined gets treated as true */ props.isThemeSupported ?? true}
+                isThemeSupported={/* undefined gets treated as true */ props.isThemeSupported}
                 isBookingPage={props.isBookingPage || isBookingPage}>
                 <FeatureFlagsProvider>
                   <OrgBrandProvider>

apps/web/playwright/change-theme.e2e.ts

@@ -1,8 +1,9 @@
 import { expect } from "@playwright/test";
+import { testBothFutureAndLegacyRoutes } from "playwright/lib/future-legacy-routes";
 
 import { test } from "./lib/fixtures";
 
-test.describe("Change Theme Test", () => {
+testBothFutureAndLegacyRoutes.describe("Change Theme Test", () => {
   test("change theme to dark", async ({ page, users }) => {
     const pro = await users.create();
     await pro.apiLogin();

apps/web/scripts/vercel-app-router-deploy.sh

@@ -10,6 +10,7 @@ checkRoute "$APP_ROUTER_EVENT_TYPES_ENABLED" app/future/event-types
 checkRoute "$APP_ROUTER_AVAILABILITY_ENABLED" app/future/availability
 checkRoute "$APP_ROUTER_SETTINGS_DEVELOPER_ENABLED" app/future/settings/developer
 checkRoute "$APP_ROUTER_SETTINGS_ADMIN_ENABLED" app/future/settings/admin
+checkRoute "$APP_ROUTER_SETTINGS_MY_ACCOUNT_ENABLED" app/future/settings/my-account
 checkRoute "$APP_ROUTER_SETTINGS_PLATFORM_ENABLED" app/future/settings/platform
 checkRoute "$APP_ROUTER_SETTINGS_ORG_ENABLED" app/future/settings/organizations
 checkRoute "$APP_ROUTER_APPS_INSTALLED_CATEGORY_ENABLED" app/future/apps/installed

turbo.json

@@ -238,6 +238,7 @@
     "APP_ROUTER_GETTING_STARTED_STEP_ENABLED",
     "APP_ROUTER_SETTINGS_DEVELOPER_ENABLED",
     "APP_ROUTER_SETTINGS_ADMIN_ENABLED",
+    "APP_ROUTER_SETTINGS_MY_ACCOUNT_ENABLED",
     "APP_ROUTER_SETTINGS_PLATFORM_ENABLED",
     "APP_ROUTER_SETTINGS_ORG_ENABLED",
     "APP_ROUTER_SETTINGS_TEAMS_ENABLED",