✨ Updated email notifications templates (#287)

tdrive/backend/node/config/custom-environment-variables.json

@@ -63,7 +63,6 @@
       "useAuth": "SEARCH_ES_USE_AUTH",
       "username": "SEARCH_ES_USERNAME",
       "password": "SEARCH_ES_PASSWORD"
-
     }
   },
   "storage": {
@@ -83,17 +82,18 @@
       "secretKey": "STORAGE_S3_SECRET_KEY"
     }
   },
-  "email-pusher":{
+  "email-pusher": {
     "email_interface": "EMAIL_INTERFACE",
-    "endpoint":"EMAIL_ENDPOINT",
+    "endpoint": "EMAIL_ENDPOINT",
-    "api_key":"EMAIL_API_KEY",
+    "api_key": "EMAIL_API_KEY",
-    "sender":"EMAIL_SENDER",
+    "sender": "EMAIL_SENDER",
     "smtp_user": "EMAIL_SMTP_USER",
     "smtp_password": "EMAIL_SMTP_PASSWORD",
     "smtp_host": "EMAIL_SMTP_HOST",
     "smtp_port": "EMAIL_SMTP_PORT",
     "smtp_tls": "EMAIL_SMTP_SECURE",
-    "debug": "EMAIL_DEBUG"
+    "debug": "EMAIL_DEBUG",
+    "platform_url": "PLATFORM_URL"
   },
   "message-queue": {
     "type": "PUBSUB_TYPE",

tdrive/backend/node/package.json

@@ -175,6 +175,7 @@
     "reflect-metadata": "^0.1.13",
     "rxjs": "^6.6.3",
     "sharp": "^0.30.5",
+    "short-uuid": "^4.2.2",
     "socket.io": "^4.6.2",
     "socket.io-client": "^3.0.0",
     "unoconv-promise": "^1.0.8",

tdrive/backend/node/src/core/platform/services/email-pusher/index.ts

@@ -15,6 +15,7 @@ import { convert } from "html-to-text";
 import path from "path";
 import { existsSync } from "fs";
 import axios from "axios";
+import short, { Translator } from "short-uuid";
 
 export default class EmailPusherClass
   extends TdriveService<EmailPusherAPI>
@@ -29,6 +30,7 @@ export default class EmailPusherClass
   sender: string;
   transporter: any;
   debug: boolean;
+  platformUrl: string;
 
   api(): EmailPusherAPI {
     return this;
@@ -39,6 +41,7 @@ export default class EmailPusherClass
       views: path.join(__dirname, "templates"),
     });
     this.interface = this.configuration.get<string>("email_interface", "");
+    this.platformUrl = this.configuration.get<string>("platform_url", "");
     if (this.interface === "smtp") {
       const smtpConfig: SMTPClientConfigType = {
         host: this.configuration.get<string>("smtp_host", ""),
@@ -73,8 +76,12 @@ export default class EmailPusherClass
   ): Promise<EmailBuilderRenderedResult> {
     try {
       language = ["en", "fr"].find(l => language.toLocaleLowerCase().includes(l)) || "en";
+      const translator: Translator = short();
       const templatePath = path.join(__dirname, "templates", language, `${template}.eta`);
       const subjectPath = path.join(__dirname, "templates", language, `${template}.subject.eta`);
+      const encodedCompanyId = translator.fromUUID(data.notifications[0].item.company_id);
+      const encodedFileId = translator.fromUUID(data.notifications[0].item.id);
+      const encodedUrl = `${this.platformUrl}/client/${encodedCompanyId}/v/shared_with_me/preview/${encodedFileId}`;
 
       if (!existsSync(templatePath)) {
         throw Error(`template not found: ${templatePath}`);
@@ -83,8 +90,11 @@ export default class EmailPusherClass
       if (!existsSync(subjectPath)) {
         throw Error(`subject template not found: ${subjectPath}`);
       }
-
+      console.log("🚀 FILE LINK: ", encodedUrl);
-      const html = await Eta.renderFile(templatePath, data);
+      const html = await Eta.renderFile(templatePath, {
+        ...data,
+        encodedUrl,
+      });
 
       if (!html || !html.length) {
         throw Error("Failed to render template");
@@ -134,7 +144,7 @@ export default class EmailPusherClass
           try {
             this.logger.info("sending email via smtp interface.");
             const info = await this.transporter.sendMail({
-              from: `"Sender Name" <${this.sender}>`,
+              from: `"Twake Drive" <${this.sender}>`,
               to: to,
               subject: subject,
               text: text_body,

tdrive/backend/node/src/core/platform/services/email-pusher/templates/en/_structure.eta

@@ -5,8 +5,8 @@
    privacy: "Privacy Policy",
    terms: "Terms of Service",
    links: {
-       help: "https://tdrive.app/",
+       help: "#",
-       privacy: "https://tdrive.app/en/privacy-policy/",
+       privacy: "#",
-       terms: "https://tdrive.app/en/terms-of-service/"
+       terms: "#"
    }
 })) %>

tdrive/backend/node/src/core/platform/services/email-pusher/templates/en/notification-digest.eta

@@ -35,7 +35,7 @@
   `
   <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;">
     <a class="main-button" href="https://web.tdrive.app/">
-    ${it.notifications.length>1 ? `See all ${it.notifications.length} messages` : `See on Tdrive`}
+    ${it.notifications.length>1 ? `See all ${it.notifications.length} messages` : `See on Twake Drive`}
     </a>
   </div>
   `

tdrive/backend/node/src/core/platform/services/email-pusher/templates/en/notification-document-shared.eta

@@ -0,0 +1,43 @@
+<% layout('./_structure') %>
+<% it.title = 'Missed notifications from company '  %>
+
+<%~ includeFile("../common/_body.eta", {
+  paragraphs: [
+  `
+  <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%" >
+      <tbody>
+          <tr>
+              <td align="center" style="font-size:0px;padding:0 0 8px;word-break:break-word;">
+                  <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:24px;font-weight:800;line-height:29px;text-align:center;color:#000000;">
+                    You've got some updates on your Twake Drive!
+                  </div>
+              </td>
+          </tr>
+      </tbody>
+  </table>
+  `,
+  `
+  <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%" >
+      <tbody>
+          <tr>
+              <td align="center" style="font-size:0px;padding:0 0 16px;word-break:break-word;" >
+                  <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:16px;line-height:29px;text-align:center;color:#000000;">
+                    <span style="text-transform: capitalize; font-weight: 500">${it.sender.first_name}</span> shared a ${it.notifications[0].item.is_directory ? "folder" : "file" } with you! ${it.notifications[0].item.is_directory ? "📁" : "📄" }
+                  </div>
+                  <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:16px;line-height:29px;text-align:center;color:#000000;">
+                    <span style="font-weight: 500">
+                      ${!it.notifications[0].item.is_directory ? `${it.notifications[0].item.name}.${it.notifications[0].item.extension}` : `${it.notifications[0].item.name}.${it.notifications[0].item.extension}`}
+                    </span>
+                  </div>
+              </td>
+          </tr>
+      </tbody>
+  </table>
+  <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;">
+    <a class="main-button" href="${it.encodedUrl}">
+    ${it.notifications.length>1 ? `See all ${it.notifications.length} messages` : `See on Twake Drive`}
+    </a>
+  </div>
+  `
+  ]
+}) %>

tdrive/backend/node/src/core/platform/services/email-pusher/templates/en/notification-document-version-updated.eta

@@ -1,5 +1,5 @@
 <% layout('./_structure') %>
-<% it.title = 'Missed notifications from company ' +  it.company.name  %>
+<% it.title = 'Missed notifications from company '  %>
 
 <%~ includeFile("../common/_body.eta", {
   paragraphs: [
@@ -22,20 +22,20 @@
           <tr>
               <td align="center" style="font-size:0px;padding:0 0 16px;word-break:break-word;" >
                   <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:16px;line-height:29px;text-align:center;color:#000000;">
-                    A new document has been shared with you! 📄
+                    <span style="text-transform: capitalize; font-weight: 500">${it.sender.first_name}</span> updated this ${it.notifications[0].item.is_directory ? "folder" : "file" }! ${it.notifications[0].item.is_directory ? "📁" : "📄" }
+                  </div>
+                  <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:16px;line-height:29px;text-align:center;color:#000000;">
+                    <span style="font-weight: 500">
+                      ${!it.notifications[0].item.is_directory ? `${it.notifications[0].item.name}.${it.notifications[0].item.extension}` : `${it.notifications[0].item.name}.${it.notifications[0].item.extension}`}
+                    </span>
                   </div>
               </td>
           </tr>
       </tbody>
   </table>
-  `,
-  ...it.notifications.map(notification =>
-    includeFile("./notification-document/notification.eta", notification)
-  ),
-  `
   <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;">
-    <a class="main-button" href="https://web.tdrive.app/">
+    <a class="main-button" href="${it.encodedUrl}">
-    ${it.notifications.length>1 ? `See all ${it.notifications.length} messages` : `See on Tdrive`}
+    ${it.notifications.length>1 ? `See all ${it.notifications.length} messages` : `See on Twake Drive`}
     </a>
   </div>
   `

tdrive/backend/node/src/core/platform/services/email-pusher/templates/en/notification-document-version-updated.subject.eta

@@ -0,0 +1 @@
+Missed notifications in your company <%= it.company.name %>

tdrive/backend/node/src/core/platform/services/email-pusher/templates/fr/_structure.eta

@@ -5,8 +5,8 @@
    privacy: "Confidentialité",
    terms: "CGU",
    links: {
-       help: "https://tdrive.app/",
+       help: "#",
-       privacy: "https://tdrive.app/fr/privacy-policy/",
+       privacy: "#",
-       terms: "https://tdrive.app/fr/terms-of-service/"
+       terms: "#"
    }
 })) %>

tdrive/backend/node/src/core/platform/services/email-pusher/templates/fr/notification-digest.eta

@@ -37,7 +37,7 @@
   `
   <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;">
     <a class="main-button" href="https://web.tdrive.app/">
-    ${it.notifications.length>1 ? `Voir les ${it.notifications.length} messages` : `Voir sur Tdrive`}
+    ${it.notifications.length>1 ? `Voir les ${it.notifications.length} messages` : `Voir sur Twake Drive`}
     </a>
   </div>
   `

tdrive/backend/node/src/core/platform/services/email-pusher/templates/fr/notification-document-shared.eta

@@ -0,0 +1,43 @@
+<% layout('./_structure') %>
+<% it.title = 'Missed notifications from company '  %>
+
+<%~ includeFile("../common/_body.eta", {
+  paragraphs: [
+  `
+  <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%" >
+      <tbody>
+          <tr>
+              <td align="center" style="font-size:0px;padding:0 0 8px;word-break:break-word;">
+                  <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:24px;font-weight:800;line-height:29px;text-align:center;color:#000000;">
+                    Vous avez des nouvelles concernant votre Twake Drive !
+                  </div>
+              </td>
+          </tr>
+      </tbody>
+  </table>
+  `,
+  `
+  <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%" >
+      <tbody>
+          <tr>
+              <td align="center" style="font-size:0px;padding:0 0 16px;word-break:break-word;" >
+                  <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:16px;line-height:29px;text-align:center;color:#000000;">
+                    <span style="text-transform: capitalize; font-weight: 500">${it.sender.first_name}</span> shared a ${it.notifications[0].item.is_directory ? "folder" : "file" } with you! ${it.notifications[0].item.is_directory ? "📁" : "📄" }
+                  </div>
+                  <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:16px;line-height:29px;text-align:center;color:#000000;">
+                    <span style="font-weight: 500">
+                      ${!it.notifications[0].item.is_directory ? `${it.notifications[0].item.name}.${it.notifications[0].item.extension}` : `${it.notifications[0].item.name}.${it.notifications[0].item.extension}`}
+                    </span>
+                  </div>
+              </td>
+          </tr>
+      </tbody>
+  </table>
+  <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;">
+    <a class="main-button" href="${it.encodedUrl}">
+    ${it.notifications.length>1 ? `See all ${it.notifications.length} messages` : `See on Twake Drive`}
+    </a>
+  </div>
+  `
+  ]
+}) %>

tdrive/backend/node/src/core/platform/services/email-pusher/templates/fr/notification-document-shared.subject.eta

@@ -0,0 +1 @@
+Notifications manquées dans votre entreprise <%= it.company.name %>

tdrive/backend/node/src/core/platform/services/email-pusher/templates/fr/notification-document-version-updated.eta

@@ -0,0 +1,43 @@
+<% layout('./_structure') %>
+<% it.title = 'Missed notifications from company '  %>
+
+<%~ includeFile("../common/_body.eta", {
+  paragraphs: [
+  `
+  <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%" >
+      <tbody>
+          <tr>
+              <td align="center" style="font-size:0px;padding:0 0 8px;word-break:break-word;">
+                  <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:24px;font-weight:800;line-height:29px;text-align:center;color:#000000;">
+                    Vous avez des nouvelles concernant votre Twake Drive !
+                  </div>
+              </td>
+          </tr>
+      </tbody>
+  </table>
+  `,
+  `
+  <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%" >
+      <tbody>
+          <tr>
+              <td align="center" style="font-size:0px;padding:0 0 16px;word-break:break-word;" >
+                  <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:16px;line-height:29px;text-align:center;color:#000000;">
+                    <span style="text-transform: capitalize; font-weight: 500">${it.sender.first_name}</span> updated this ${it.notifications[0].item.is_directory ? "folder" : "file" }! ${it.notifications[0].item.is_directory ? "📁" : "📄" }
+                  </div>
+                  <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:16px;line-height:29px;text-align:center;color:#000000;">
+                    <span style="font-weight: 500">
+                      ${!it.notifications[0].item.is_directory ? `${it.notifications[0].item.name}.${it.notifications[0].item.extension}` : `${it.notifications[0].item.name}.${it.notifications[0].item.extension}`}
+                    </span>
+                  </div>
+              </td>
+          </tr>
+      </tbody>
+  </table>
+  <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;">
+    <a class="main-button" href="${it.encodedUrl}">
+    ${it.notifications.length>1 ? `See all ${it.notifications.length} messages` : `See on Twake Drive`}
+    </a>
+  </div>
+  `
+  ]
+}) %>

tdrive/backend/node/src/core/platform/services/email-pusher/templates/fr/notification-document-version-updated.subject.eta

@@ -0,0 +1 @@
+Notifications manquées dans votre entreprise <%= it.company.name %>

tdrive/backend/node/src/core/platform/services/email-pusher/types.ts

@@ -18,7 +18,9 @@ export type EmailBuilderRenderedResult = {
   subject: string;
 };
 
-export type EmailBuilderTemplateName = "notification-digest" | "notification-document";
+export type EmailBuilderTemplateName =
+  | "notification-document-shared"
+  | "notification-document-version-updated";
 
 export type EmailPusherPayload = {
   subject: string;

tdrive/backend/node/src/services/documents/services/engine/index.ts

@@ -16,9 +16,13 @@ export class DocumentsEngine implements Initializable {
     const company = await globalResolver.services.companies.getCompany({
       id: e.context.company.id,
     });
+    const emailTemplate =
+      event === DocumentEvents.DOCUMENT_SAHRED
+        ? "notification-document-shared"
+        : "notification-document-version-updated";
     try {
       const { html, text, subject } = await globalResolver.platformServices.emailPusher.build(
-        "notification-document",
+        emailTemplate,
         receiver.language || "en",
         {
           sender,