Replace email templates (#4)

Author: jonathanschad

Diff for: server/package.json

@@ -35,6 +35,7 @@
         "@nestjs/jwt": "^10.2.0",
         "@nestjs/platform-fastify": "^10.3.10",
         "@prisma/client": "5.18.0",
+        "@usewaypoint/email-builder": "^0.0.8",
         "axios": "^1.7.7",
         "class-transformer": "^0.5.1",
         "class-validator": "^0.14.1",
@@ -43,10 +44,13 @@
         "nodemailer": "^6.9.14",
         "pino": "^9.3.1",
         "pino-pretty": "^11.2.1",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
         "reflect-metadata": "^0.2.0",
         "rxjs": "^7.8.1",
         "sharp": "^0.33.5",
-        "uuid": "^10.0.0"
+        "uuid": "^10.0.0",
+        "zod": "^3.23.8"
     },
     "devDependencies": {
         "@nestjs/cli": "^10.0.0",

Diff for: server/src/app.controller.ts

@@ -17,7 +17,7 @@ export class AppController {
     @PublicRoute()
     async getFrontendEnvs() {
         return {
-            BACKEND_URL: new URL('/api', this.appConfigService.publicUrl).href,
+            BACKEND_URL: new URL('/api', this.appConfigService.backendPublicUrl).href,
             PUBLIC_URL: this.appConfigService.frontendPublicUrl,
         };
     }

Diff for: server/src/auth/google.auth.service.ts

@@ -41,7 +41,7 @@ export class GoogleAuthService {
     ) {}
 
     public buildGoogleOAuthRedirectUrl(): string {
-        const url = new URL(this.appConfigService.googleOAuthRedirectUri, this.appConfigService.publicUrl);
+        const url = new URL(this.appConfigService.googleOAuthRedirectUri, this.appConfigService.backendPublicUrl);
 
         return url.href;
     }

Diff for: server/src/config/app-config.service.ts

@@ -28,7 +28,7 @@ export class AppConfigService {
         return this.get('HOST');
     }
 
-    get publicUrl(): string {
+    get backendPublicUrl(): string {
         return this.get('VITE_BACKEND_URL');
     }
 

Diff for: server/src/mail/mail.service.ts

@@ -8,15 +8,19 @@ import { AppConfigService } from '@/config/app-config.service';
 import { Language } from '@prisma/client';
 import { UserWithSettings } from '@/types/prisma';
 import { templates } from '@/mail/templates/templates';
-import { generateSocials } from '@/mail/templates/generate-socials';
 import * as path from 'path';
+import { renderToStaticMarkup, TReaderDocument } from '@usewaypoint/email-builder';
+import { defaultEmailTemplateFactory } from '@/mail/templates/default-template';
 export interface MailTemplate {
-    template: string;
+    templateFactory: (translations: any) => TReaderDocument; // TODO type this
     translations: Record<Language, EmailTranslation>;
-    images?: Attachment[];
+    images: Attachment[];
+    headlineIconUrl: string;
 }
 export interface EmailTranslation {
     subject: string;
+    headline: string;
+    contactHeadline: string;
     [key: string]: string;
 }
 
@@ -94,15 +98,18 @@ export class MailService {
         otherKeys?: Record<string, string>,
     ): void {
         const template = templates[email];
-
+        const socials = this.appConfigService.socials.map((social) => ({
+            name: social.name.toLowerCase(),
+            url: social.url.toLowerCase(),
+        }));
         const images = template.images ?? [];
         images.push(
             {
                 cid: 'logo',
                 filename: 'logo.png',
                 path: path.join(__dirname, './templates/images/logo.png'),
             },
-            ...this.appConfigService.socials.map((social) => ({
+            ...socials.map((social) => ({
                 cid: social.name,
                 filename: `${social.name}.png`,
                 path: path.join(__dirname, `./templates/images/${social.name}.png`),
@@ -111,24 +118,27 @@ export class MailService {
 
         const translation = template.translations[options.language];
 
-        const socials = generateSocials(this.appConfigService.socials);
-
-        const htmlContent = this.applyTranslation(template.template, {
+        const templateRoot = defaultEmailTemplateFactory({
             ...translation,
-            ...otherKeys,
+            iconUrl: template.headlineIconUrl,
             contact1: this.appConfigService.imprintContact1,
             contact2: this.appConfigService.imprintContact2,
             contact3: this.appConfigService.imprintContact3,
             contact4: this.appConfigService.imprintContact4,
+            copyRight: this.appConfigService.imprintCopyright,
             socials,
-            imprintCopyright: this.appConfigService.imprintCopyright,
         });
+        const contentTemplate = template.templateFactory({ ...translation, ...otherKeys });
 
+        const templateOptions = {
+            ...templateRoot,
+            ...contentTemplate,
+        };
         const mailOptions: MailOptions = {
             from: this.appConfigService.smtpUser,
             to: options.email,
             subject: translation.subject,
-            html: htmlContent,
+            html: renderToStaticMarkup(templateOptions, { rootBlockId: 'root' }),
             attachments: template.images,
         };
 
@@ -140,13 +150,4 @@ export class MailService {
             }
         });
     }
-
-    private applyTranslation(template: string, translation: EmailTranslation): string {
-        let result = template;
-        Object.keys(translation).forEach((key) => {
-            const regex = new RegExp(`{{\\s*${key}\\s*}}`, 'g');
-            result = result.replace(regex, translation[key]);
-        });
-        return result;
-    }
 }