Refine translated e-mail templates

backend/src/middleware/helpers/email/sendMail.js

@@ -9,7 +9,7 @@ const hasAuthData = CONFIG.SMTP_USERNAME && CONFIG.SMTP_PASSWORD
 // let sendMailCallback = async () => {}
 // Wolle
 let sendMailCallback = async (templateArgs) => {
-  console.log('templateArgs: ', templateArgs)
+  // console.log('templateArgs: ', templateArgs)
 }
 if (!hasEmailConfig) {
   if (!CONFIG.TEST) {
@@ -19,7 +19,7 @@ if (!hasEmailConfig) {
 } else {
   sendMailCallback = async (templateArgs) => {
     // Wolle
-    console.log('templateArgs: ', templateArgs)
+    // console.log('templateArgs: ', templateArgs)
     const transporter = nodemailer.createTransport({
       host: CONFIG.SMTP_HOST,
       port: CONFIG.SMTP_PORT,

backend/src/middleware/helpers/email/templateBuilder.js

@@ -1,5 +1,6 @@
 import mustache from 'mustache'
 import CONFIG from '../../../config'
+import metadata from '../../../config/metadata.js'
 import logosWebapp from '../../../config/logos.js'
 
 import * as templates from './templates'
@@ -10,11 +11,13 @@ const from = CONFIG.EMAIL_DEFAULT_SENDER
 const welcomeImageUrl = new URL(logosWebapp.LOGO_WELCOME_PATH, CONFIG.CLIENT_URI)
 
 const defaultParams = {
-  supportUrl: CONFIG.SUPPORT_URL,
-  APPLICATION_NAME: CONFIG.APPLICATION_NAME,
-  ORGANIZATION_URL: CONFIG.ORGANIZATION_URL,
   welcomeImageUrl,
+  APPLICATION_NAME: CONFIG.APPLICATION_NAME,
+  ORGANIZATION_NAME: metadata.ORGANIZATION_NAME,
+  ORGANIZATION_URL: CONFIG.ORGANIZATION_URL,
+  supportUrl: CONFIG.SUPPORT_URL,
 }
+const englishHint = 'English version below!'
 
 export const signupTemplate = ({ email, nonce, inviteCode = null }) => {
   const subject = `Willkommen, Bienvenue, Welcome to ${CONFIG.APPLICATION_NAME}!`
@@ -35,7 +38,7 @@ export const signupTemplate = ({ email, nonce, inviteCode = null }) => {
     subject,
     html: mustache.render(
       templates.layout,
-      { ...defaultParams, actionUrl, nonce, subject },
+      { ...defaultParams, englishHint, actionUrl, nonce, subject },
       { content: templates.signup },
     ),
   }
@@ -53,7 +56,7 @@ export const emailVerificationTemplate = ({ email, nonce, name }) => {
     subject,
     html: mustache.render(
       templates.layout,
-      { ...defaultParams, actionUrl, name, nonce, subject },
+      { ...defaultParams, englishHint, actionUrl, name, nonce, subject },
       { content: templates.emailVerification },
     ),
   }
@@ -65,13 +68,22 @@ export const resetPasswordTemplate = ({ email, nonce, name }) => {
   actionUrl.searchParams.set('nonce', nonce)
   actionUrl.searchParams.set('email', email)
 
+  // Wolle
+  // console.log(
+  //   mustache.render(
+  //     templates.layout,
+  //     { ...defaultParams, englishHint, actionUrl, name, nonce, subject },
+  //     { content: templates.passwordReset },
+  //   ),
+  // )
+
   return {
     from,
     to: email,
     subject,
     html: mustache.render(
       templates.layout,
-      { ...defaultParams, actionUrl, name, nonce, subject },
+      { ...defaultParams, englishHint, actionUrl, name, nonce, subject },
       { content: templates.passwordReset },
     ),
   }
@@ -87,16 +99,16 @@ export const wrongAccountTemplate = ({ email }) => {
     subject,
     html: mustache.render(
       templates.layout,
-      { ...defaultParams, actionUrl, supportUrl: CONFIG.SUPPORT_URL, welcomeImageUrl },
+      { ...defaultParams, englishHint, actionUrl },
       { content: templates.wrongAccount },
     ),
   }
 }
 
 export const notificationTemplate = ({ email, notification }) => {
+  // TODO Wolle language
   const subject = `${CONFIG.APPLICATION_NAME} – Benachrichtigung | Notification`
   const actionUrl = new URL('/notifications', CONFIG.CLIENT_URI)
-  // TODO Wolle language
   let content
   switch (notification.to.locale) {
     case 'de':
@@ -111,13 +123,22 @@ export const notificationTemplate = ({ email, notification }) => {
       break
   }
 
+  // Wolle
+  // console.log(
+  //   mustache.render(
+  //     templates.layout,
+  //     { ...defaultParams, name: notification.to.name, actionUrl },
+  //     { content },
+  //   ),
+  // )
+
   return {
     from,
     to: email,
     subject,
     html: mustache.render(
       templates.layout,
-      { ...defaultParams, actionUrl, supportUrl: /* Wolle */ CONFIG.SUPPORT_URL, welcomeImageUrl },
+      { ...defaultParams, name: notification.to.name, actionUrl },
       { content },
     ),
   }

backend/src/middleware/helpers/email/templates/de/notification.html

@@ -23,9 +23,9 @@
             style="padding: 20px; padding-top: 0; font-family: Lato, sans-serif; font-size: 16px; line-height: 22px; color: #555555;">
             <h1
               style="margin: 0 0 10px 0; font-family: Lato, sans-serif; font-size: 25px; line-height: 30px; color: #333333; font-weight: normal;">
-              Hallo {{ name }}!</h1>
-            <p style="margin: 0;">Du hast mindestens eine Banachrichtigung bekommen! Mit Klick auf diesen Button
-              kannst Du deine Nachrichten ansehen:</p>
+              Hallo {{ name }},</h1>
+            <p style="margin: 0;">Du hast mindestens eine Benachrichtigung erhalten. Klick auf diesen Button,
+              um sie anzusehen:</p>
           </td>
         </tr>
         <tr>
@@ -35,15 +35,28 @@
               <tr>
                 <td class="button-td button-td-primary" style="border-radius: 4px; background: #17b53e;">
                   <a class="button-a button-a-primary" href="{{{ actionUrl }}}"
-                    style="background: #17b53e; font-family: Lato, sans-serif; font-size: 16px; line-height: 15px; text-decoration: none; padding: 13px 17px; color: #ffffff; display: block; border-radius: 4px;">Banachrichtigungen
-                    abrufen</a>
+                    style="background: #17b53e; font-family: Lato, sans-serif; font-size: 16px; line-height: 15px; text-decoration: none; padding: 13px 17px; color: #ffffff; display: block; border-radius: 4px;">Benachrichtigungen
+                    ansehen</a>
                 </td>
               </tr>
             </table>
             <!-- Button : END -->
           </td>
-          <td style="display: none;">
-            <p>–––––––––––––––––––––––––––––––––––––––––––––––</p>
+        </tr>
+      </table>
+    </td>
+  </tr>
+  <!-- 1 Column Text + Button : END -->
+
+  <!-- 1 Column Text : BEGIN -->
+  <tr>
+    <td style="background-color: #ffffff; padding: 0 20px;">
+      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+        <tr>
+          <td style="padding: 20px; font-family: Lato, sans-serif; font-size: 16px; line-height: 22px; color: #555555;">
+            <p style="margin: 0; margin-top: 10px;">Bis bald bei <a href="{{{ ORGANIZATION_URL }}}"
+                                                                    style="color: #17b53e;">{{APPLICATION_NAME}}</a>!</p>
+            <p style="margin: 0; margin-bottom: 10px;">– Dein {{APPLICATION_NAME}} Team</p>
           </td>
         </tr>
       </table>

backend/src/middleware/helpers/email/templates/en/notification.html

@@ -1,4 +1,4 @@
-<!-- Email Body German : BEGIN -->
+<!-- Email Body English : BEGIN -->
 <table class="email-german" align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%"
   style="margin: auto;">
 
@@ -23,9 +23,8 @@
             style="padding: 20px; padding-top: 0; font-family: Lato, sans-serif; font-size: 16px; line-height: 22px; color: #555555;">
             <h1
               style="margin: 0 0 10px 0; font-family: Lato, sans-serif; font-size: 25px; line-height: 30px; color: #333333; font-weight: normal;">
-              Hello {{ name }}!</h1>
-            <p style="margin: 0;">You have received at least one notification! By clicking on this button
-              you can view your messages:</p>
+              Hello {{ name }},</h1>
+            <p style="margin: 0;">You received at least one notification. Click on this button to view them:</p>
           </td>
         </tr>
         <tr>
@@ -35,15 +34,28 @@
               <tr>
                 <td class="button-td button-td-primary" style="border-radius: 4px; background: #17b53e;">
                   <a class="button-a button-a-primary" href="{{{ actionUrl }}}"
-                    style="background: #17b53e; font-family: Lato, sans-serif; font-size: 16px; line-height: 15px; text-decoration: none; padding: 13px 17px; color: #ffffff; display: block; border-radius: 4px;">Retrieve
+                    style="background: #17b53e; font-family: Lato, sans-serif; font-size: 16px; line-height: 15px; text-decoration: none; padding: 13px 17px; color: #ffffff; display: block; border-radius: 4px;">View
                     notifications</a>
                 </td>
               </tr>
             </table>
             <!-- Button : END -->
           </td>
-          <td style="display: none;">
-            <p>–––––––––––––––––––––––––––––––––––––––––––––––</p>
+        </tr>
+      </table>
+    </td>
+  </tr>
+  <!-- 1 Column Text + Button : END -->
+
+  <!-- 1 Column Text : BEGIN -->
+  <tr>
+    <td style="background-color: #ffffff; padding: 0 20px;">
+      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+        <tr>
+          <td style="padding: 20px; font-family: Lato, sans-serif; font-size: 16px; line-height: 22px; color: #555555;">
+            <p style="margin: 0; margin-top: 10px;">See you soon on <a href="{{{ ORGANIZATION_URL }}}"
+                                                                       style="color: #17b53e;">{{APPLICATION_NAME}}</a>!</p>
+            <p style="margin: 0; margin-bottom: 10px;">– The {{APPLICATION_NAME}} Team</p>
           </td>
         </tr>
       </table>
@@ -52,4 +64,4 @@
   <!-- 1 Column Text : END -->
 
 </table>
-<!-- Email Body German : END -->
+<!-- Email Body English : END -->

backend/src/middleware/helpers/email/templates/layout.html

@@ -159,7 +159,7 @@
             <td>
       <![endif]-->
 
-      <p style="color:#19c243; font-style: italic; font-family: Lato, sans-serif; font-size: 16px; padding-top: 20px;">English version below!</p>
+      <p style="color:#19c243; font-style: italic; font-family: Lato, sans-serif; font-size: 16px; padding-top: 20px;">{{englishHint}}</p>
 
       {{> content}}
 
@@ -169,10 +169,11 @@
         <tr>
           <td
             style="padding: 20px; font-family: Lato, sans-serif; font-size: 12px; line-height: 15px; text-align: center; color: #888888;">
-            <br><br>
-            {{ORGANIZATION_NAME}}
-            <br>{{ORGANIZATION_URL}}<br>
-            <br><br>
+            <br>
+            <a href="{{{ ORGANIZATION_URL }}}" target="_blank" style="color: #17b53e;">{{ORGANIZATION_NAME}}</a>
+            <br>
+            <br>
+            <br>
           </td>
         </tr>
       </table>

backend/src/middleware/notifications/notificationsMiddleware.js

@@ -35,13 +35,13 @@ const publishNotifications = async (context, promises) => {
   let notifications = await Promise.all(promises)
   notifications = notifications.flat()
   // Wolle
-  console.log('notifications: ', notifications)
+  // console.log('notifications: ', notifications)
   const notificationsEmailAddresses = await queryNotificationsEmails(
     context,
     notifications.map((notification) => notification.to.id),
   )
   // Wolle
-  console.log('notificationsEmailAddresses: ', notificationsEmailAddresses)
+  // console.log('notificationsEmailAddresses: ', notificationsEmailAddresses)
   notifications.forEach((notificationAdded, index) => {
     pubsub.publish(NOTIFICATION_ADDED, { notificationAdded })
     // Wolle await