fix unknown theme error (#773)

<!--

Make sure you've read the CONTRIBUTING.md guidelines:
https://github.com/stack-auth/stack-auth/blob/dev/CONTRIBUTING.md

-->

<!-- ELLIPSIS_HIDDEN -->


----

> [!IMPORTANT]
> Fixes unknown theme error by adding fallback to default theme and
updates theme display names.
> 
>   - **Behavior**:
> - In `route.tsx`, added fallback to `DEFAULT_EMAIL_THEME_ID` if
current theme is unknown.
> - Updates active theme in `tenancy.completeConfig.emails` if unknown.
>   - **Display Name Updates**:
> - Changed `displayName` from `default-light` to `Default Light` and
`default-dark` to `Default Dark` in `emails.ts` and `schema-fields.ts`.
>   - **Tests**:
> - Updated test cases in `email-themes.test.ts` to reflect new display
names.
> 
> <sup>This description was created by </sup>[<img alt="Ellipsis"
src="https://img.shields.io/badge/Ellipsis-blue?color=175173">](https://www.ellipsis.dev?ref=stack-auth%2Fstack-auth&utm_source=github&utm_medium=referral)<sup>
for 8d2b9f7. You can
[customize](https://app.ellipsis.dev/stack-auth/settings/summaries) this
summary. It will automatically update as commits are pushed.</sup>


<!-- ELLIPSIS_HIDDEN -->

---------

Co-authored-by: Konsti Wohlwend <n2d4xc@gmail.com>

Author: BilalG1

apps/backend/src/app/api/latest/internal/email-themes/route.tsx

@@ -2,6 +2,7 @@ import { overrideEnvironmentConfigOverride } from "@/lib/config";
 import { DEFAULT_EMAIL_THEMES } from "@/lib/email-themes";
 import { globalPrismaClient } from "@/prisma-client";
 import { createSmartRouteHandler } from "@/route-handlers/smart-route-handler";
+import { DEFAULT_EMAIL_THEME_ID } from "@stackframe/stack-shared/dist/helpers/emails";
 import { adaptSchema, yupArray, yupNumber, yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields";
 import { generateUuid } from "@stackframe/stack-shared/dist/utils/uuids";
 
@@ -68,7 +69,26 @@ export const GET = createSmartRouteHandler({
     }).defined(),
   }),
   async handler({ auth: { tenancy } }) {
-    const themes = Object.entries(tenancy.completeConfig.emails.themeList).map(([id, theme]) => ({
+    const themeList = tenancy.completeConfig.emails.themeList;
+    const currentActiveTheme = tenancy.completeConfig.emails.theme;
+    if (!(currentActiveTheme in themeList)) {
+      let newActiveTheme: string;
+      if (DEFAULT_EMAIL_THEME_ID in themeList) {
+        newActiveTheme = DEFAULT_EMAIL_THEME_ID;
+      } else {
+        newActiveTheme = Object.keys(themeList)[0];
+      }
+      await overrideEnvironmentConfigOverride({
+        tx: globalPrismaClient,
+        projectId: tenancy.project.id,
+        branchId: tenancy.branchId,
+        environmentConfigOverrideOverride: {
+          "emails.theme": newActiveTheme,
+        },
+      });
+    }
+
+    const themes = Object.entries(themeList).map(([id, theme]) => ({
       id,
       display_name: theme.displayName,
     }));

apps/e2e/tests/backend/endpoints/api/v1/email-themes.test.ts

@@ -3,7 +3,7 @@ import { describe } from "vitest";
 import { it } from "../../../../helpers";
 import { niceBackendFetch, Project } from "../../../backend-helpers";
 
-const validThemeId = "1df07ae6-abf3-4a40-83a5-a1a2cbe336ac"; // default-light theme
+const validThemeId = "1df07ae6-abf3-4a40-83a5-a1a2cbe336ac"; // Default Light theme
 const invalidThemeId = randomUUID();
 
 const validTsxSource = `import { Html, Tailwind, Body } from '@react-email/components';
@@ -89,7 +89,7 @@ describe("get email theme", () => {
       NiceResponse {
         "status": 200,
         "body": {
-          "display_name": "default-light",
+          "display_name": "Default Light",
           "tsx_source": deindent\`
             import { Html, Tailwind, Body } from '@react-email/components';
             function EmailTheme({ children }: { children: React.ReactNode }) {
@@ -188,7 +188,7 @@ describe("update email theme", () => {
       NiceResponse {
         "status": 200,
         "body": {
-          "display_name": "default-light",
+          "display_name": "Default Light",
           "rendered_html": deindent\`
             <div>Mock api key detected, themeComponent: import { Html, Tailwind, Body } from '@react-email/components';
             function EmailTheme({ children }: { children: React.ReactNode }) {
@@ -240,7 +240,7 @@ describe("update email theme", () => {
       NiceResponse {
         "status": 200,
         "body": {
-          "display_name": "default-light",
+          "display_name": "Default Light",
           "tsx_source": deindent\`
             import { Html, Tailwind, Body } from '@react-email/components';
             function EmailTheme({ children }: { children: React.ReactNode }) {
@@ -284,11 +284,11 @@ describe("create email theme", () => {
         "body": {
           "themes": [
             {
-              "display_name": "default-light",
+              "display_name": "Default Light",
               "id": "<stripped UUID>",
             },
             {
-              "display_name": "default-dark",
+              "display_name": "Default Dark",
               "id": "<stripped UUID>",
             },
           ],
@@ -304,7 +304,7 @@ describe("create email theme", () => {
         method: "POST",
         accessType: "admin",
         body: {
-          display_name: "default-light",
+          display_name: "Default Light",
         },
       }
     );

packages/stack-shared/src/helpers/emails.ts

@@ -33,11 +33,11 @@ export const DEFAULT_EMAIL_THEME_ID = "1df07ae6-abf3-4a40-83a5-a1a2cbe336ac";
 
 export const DEFAULT_EMAIL_THEMES = {
   [DEFAULT_EMAIL_THEME_ID]: {
-    displayName: 'default-light',
+    displayName: 'Default Light',
     tsxSource: LightEmailTheme,
   },
   "a0172b5d-cff0-463b-83bb-85124697373a": {
-    displayName: 'default-dark',
+    displayName: 'Default Dark',
     tsxSource: DarkEmailTheme,
   },
 };

packages/stack-shared/src/schema-fields.ts

@@ -368,7 +368,7 @@ export const emailThemeSchema = yupString().meta({ openapiField: { description:
 export const emailThemeListSchema = yupRecord(
   yupString().uuid(),
   yupObject({
-    displayName: yupString().meta({ openapiField: { description: 'Email theme name', exampleValue: 'default-light' } }).defined(),
+    displayName: yupString().meta({ openapiField: { description: 'Email theme name', exampleValue: 'Default Light' } }).defined(),
     tsxSource: yupString().meta({ openapiField: { description: 'Email theme source code tsx component' } }).defined(),
   })
 ).meta({ openapiField: { description: 'Record of email theme IDs to their display name and source code' } });