Email template for Productivity Report (#8532)

package.json

@@ -34,7 +34,7 @@
   "main": "./dist/lib/server-impl.js",
   "scripts": {
     "start": "TZ=UTC node ./dist/server.js",
-    "copy-templates": "copyfiles -u 1 src/mailtemplates/**/*.mustache dist/",
+    "copy-templates": "copyfiles -u 1 src/mailtemplates/**/* dist/",
     "build:backend": "tsc --pretty --strictNullChecks false",
     "build:frontend": "yarn --cwd ./frontend run build",
     "build:frontend:if-needed": "./scripts/build-frontend-if-needed.sh",

src/lib/services/email-service.test.ts

@@ -146,6 +146,9 @@ test('Can send order environments email', async () => {
 
 test('Can send productivity report email', async () => {
     const emailService = new EmailService({
+        server: {
+            unleashUrl: 'http://localhost',
+        },
         email: {
             host: 'test',
             port: 587,
@@ -157,15 +160,17 @@ test('Can send productivity report email', async () => {
         getLogger: noLoggerProvider,
     } as unknown as IUnleashConfig);
 
-    const customerId = 'customer133';
-
     const content = await emailService.sendProductivityReportEmail(
         'user@user.com',
-        customerId,
+        'customerId',
+        {
+            flagsCreated: 1,
+            productionUpdates: 2,
+            health: 99,
+        },
     );
+    console.log(content);
     expect(content.from).toBe('noreply@getunleash.ai');
     expect(content.subject).toBe('Unleash - productivity report');
-    expect(
+    expect(content.html.includes(`Productivity Report`)).toBe(true);
-        content.html.includes(`<b>Productivity report for customer133</b>`),
-    ).toBe(true);
 });

src/lib/services/email-service.ts

@@ -28,6 +28,11 @@ export interface IEmailEnvelope {
     subject: string;
     html: string;
     text: string;
+    attachments?: {
+        filename: string;
+        path: string;
+        cid: string;
+    }[];
 }
 
 const RESET_MAIL_SUBJECT = 'Unleash - Reset your password';
@@ -522,32 +527,48 @@ export class EmailService {
     }
 
     async sendProductivityReportEmail(
+        userName: string,
         userEmail: string,
-        customerId: string,
+        metrics: {
+            health: number;
+            flagsCreated: number;
+            productionUpdates: number;
+        },
     ): Promise<IEmailEnvelope> {
         if (this.configured()) {
             const context = {
+                userName,
                 userEmail,
-                customerId,
+                ...metrics,
+                unleashUrl: this.config.server.unleashUrl,
             };
 
+            const template = 'productivity-report';
+
             const bodyHtml = await this.compileTemplate(
-                'productivity-report',
+                template,
                 TemplateFormat.HTML,
                 context,
             );
             const bodyText = await this.compileTemplate(
-                'productivity-report',
+                template,
                 TemplateFormat.PLAIN,
                 context,
             );
-            const email = {
+            const email: IEmailEnvelope = {
                 from: this.sender,
                 to: userEmail,
                 bcc: '',
                 subject: PRODUCTIVITY_REPORT,
                 html: bodyHtml,
                 text: bodyText,
+                attachments: [
+                    this.resolveTemplateAttachment(
+                        template,
+                        'unleash-logo.png',
+                        'unleashLogo',
+                    ),
+                ],
             };
             process.nextTick(() => {
                 this.mailer!.sendMail(email).then(
@@ -613,6 +634,28 @@ export class EmailService {
         throw new NotFoundError('Could not find template');
     }
 
+    private resolveTemplateAttachment(
+        templateName: string,
+        filename: string,
+        cid: string,
+    ): {
+        filename: string;
+        path: string;
+        cid: string;
+    } {
+        const topPath = path.resolve(__dirname, '../../mailtemplates');
+        const attachment = path.join(topPath, templateName, filename);
+        if (existsSync(attachment)) {
+            return {
+                filename,
+                path: attachment,
+                cid,
+            };
+        }
+
+        throw new NotFoundError('Could not find email attachment');
+    }
+
     configured(): boolean {
         return this.sender !== 'not-configured' && this.mailer !== undefined;
     }

src/mailtemplates/productivity-report/productivity-report.html.mustache

@@ -1,320 +1,82 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<!DOCTYPE html
+    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
+
 <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>Your Unleash Productivity Report</title>
-    <title>*|MC:SUBJECT|*</title>
-    <style type="text/css">
-        /* /\/\/\/\/\/\/\/\/ CLIENT-SPECIFIC STYLES /\/\/\/\/\/\/\/\/ */
-        #outlook a{padding:0;} /* Force Outlook to provide a "view in browser" message */
-        .ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
-        .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing */
-        body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;} /* Prevent WebKit and Windows mobile changing default text sizes */
-        table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up */
-        img{-ms-interpolation-mode:bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */
-
-        /* /\/\/\/\/\/\/\/\/ RESET STYLES /\/\/\/\/\/\/\/\/ */
-        body{margin:0; padding:0;}
-        img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
-        body, #bodyTable, #bodyCell{height:100% !important; margin:0; padding:0; width:100% !important;}
-
-        /* /\/\/\/\/\/\/\/\/ TEMPLATE STYLES /\/\/\/\/\/\/\/\/ */
-
-        /* ========== Page Styles ========== */
-
-        #bodyCell{padding:20px;}
-        #templateContainer{width:600px;}
-
-        /**
-        * @tab Page
-        * @section background style
-        * @tip Set the background color and top border for your email. You may want to choose colors that match your company's branding.
-        * @theme page
-        */
-        body, #bodyTable{
-            background-color:#F7F7FA;
-        }
-
-
-        /**
-        * @tab Page
-        * @section email border
-        * @tip Set the border for your email.
-        */
-        #templateContainer{
-            border:2px solid #817AFE;
-            border-radius: 12px;
-            overflow: hidden;
-            padding: 48px;
-        }
-
-        /**
-        * @tab Page
-        * @section heading 1
-        * @tip Set the styling for all first-level headings in your emails. These should be the largest of your headings.
-        * @style heading 1
-        */
-        h1{
-            color:#202021 !important;
-            display:block;
-            font-family:Helvetica;
-            font-size:24px;
-            font-style:normal;
-            font-weight:bold;
-            line-height:1.4;
-            letter-spacing:normal;
-            margin-top:0;
-            margin-right:0;
-            margin-bottom:32px;
-            margin-left:0;
-        }
-
-        /**
-        * @tab Page
-        * @section heading 2
-        * @tip Set the styling for all second-level headings in your emails.
-        * @style heading 2
-        */
-        h2{
-            color:#202021 !important;
-            display:block;
-            font-family:Helvetica;
-            font-size:20px;
-            font-style:normal;
-            font-weight:bold;
-            line-height:1.4;
-            letter-spacing:normal;
-            margin-top:0;
-            margin-right:0;
-            margin-bottom:24px;
-            margin-left:0;
-            text-align:left;
-        }
-
-        /**
-        * @tab Page
-        * @section heading 3
-        * @tip Set the styling for all third-level headings in your emails.
-        * @style heading 3
-        */
-        h3{
-            color:#202021 !important;
-            display:block;
-            font-family:Helvetica;
-            font-size:16px;
-            font-style:normal;
-            font-weight:bold;
-            line-height:1.4;
-            letter-spacing:normal;
-            margin-top:0;
-            margin-right:0;
-            margin-bottom:16px;
-            margin-left:0;
-            text-align:left;
-        }
-
-        /**
-        * @tab Page
-        * @section heading 4
-        * @tip Set the styling for all fourth-level headings in your emails. These should be the smallest of your headings.
-        * @style heading 4
-        */
-        h4{
-            color:#202021 !important;
-            display:block;
-            font-family:Helvetica;
-            font-size:14px;
-            font-style:normal;
-            font-weight:normal;
-            line-height:1.4;
-            letter-spacing:normal;
-            margin-top:0;
-            margin-right:0;
-            margin-bottom:16px;
-            margin-left:0;
-            text-align:left;
-        }
-
-        /* ========== Header Styles ========== */
-
-        /**
-        * @tab Header
-        * @section header style
-        * @tip Set the background color and borders for your email's header area.
-        * @theme header
-        */
-        #templateHeader{
-            color:#6E6E70;
-        }
-
-        /**
-        * @tab Header
-        * @section header text
-        * @tip Set the styling for your email's header text. Choose a size and color that is easy to read.
-        */
-        .headerContent{
-            color:#6E6E70;
-            font-family:Helvetica;
-            font-size:20px;
-            font-weight:bold;
-            line-height:1.4;
-            padding-top:0;
-            padding-right:0;
-            padding-bottom:0;
-            padding-left:0;
-            text-align:left;
-            vertical-align:middle;
-        }
-
-        /**
-        * @tab Header
-        * @section header link
-        * @tip Set the styling for your email's header links. Choose a color that helps them stand out from your text.
-        */
-        .headerContent a:link, .headerContent a:visited, /* Yahoo! Mail Override */ .headerContent a .yshortcuts /* Yahoo! Mail Override */{
-            color:#fff;
-            font-weight:normal;
-            text-decoration:underline;
-        }
-
-
-        /* ========== Body Styles ========== */
-
-        /**
-        * @tab Body
-        * @section body style
-        * @tip Set the background color and borders for your email's body area.
-        */
-        #templateBody{
-            margin: 48px 0;
-            padding: 48px 0;
-            border-top: 1px solid #E1E1E3;
-            border-bottom: 1px solid #E1E1E3;
-        }
-
-        /**
-        * @tab Body
-        * @section body text
-        * @tip Set the styling for your email's main content text. Choose a size and color that is easy to read.
-        * @theme main
-        */
-        .bodyContent{
-            color:#202021;
-            font-family:Helvetica;
-            font-size:16px;
-            line-height:1.4;
-            text-align:left;
-        }
-
-        .bodyContent img{
-            display:inline;
-            height:auto;
-            max-width:560px;
-        }
-
-        .bodyContent a {
-            color: #615BC2;
-            text-decoration: none;
-        }
-
-        .bodyContent a:hover {
-            text-decoration: underline;
-        }
-
-        .bodyContent .buttonStyle {
-            margin-top: 32px;
-            display: inline-block;
-            padding: 13px 20px;
-            color: #fff;
-            background: #6C65E5;
-            border-radius: 4px;
-            font-size: 16px;
-            line-height: 1;
-            text-decoration: none !important;
-        }
-
-        /* ========== Footer Styles ========== */
-
-        /**
-        * @tab Footer
-        * @section footer text
-        * @tip Set the styling for your email's footer text. Choose a size and color that is easy to read.
-        * @theme footer
-        */
-        .footerContent{
-            color:#6E6E70;
-            font-family:Helvetica;
-            font-size:14px;
-            line-height:1.4;
-            text-align:left;
-        }
-
-        .footerContent a {
-            padding-right: 12px;
-            margin-right: 12px;
-            border-right: 1px solid #E1E1E3;
-            color:#615BC2;
-        }
-
-        .footerContent em {
-            display: block;
-            margin-top: 24px;
-        }
-
-        /**
-        * @tab Footer
-        * @section footer link
-        * @tip Set the styling for your email's footer links. Choose a color that helps them stand out from your text.
-        */
-        .footerContent a:link, .footerContent a:visited, /* Yahoo! Mail Override */ .footerContent a .yshortcuts, .footerContent a span /* Yahoo! Mail Override */{
-            color:#615BC2;
-            font-weight:normal;
-            text-decoration:underline;
-        }
-
-        /* /\/\/\/\/\/\/\/\/ MOBILE STYLES /\/\/\/\/\/\/\/\/ */
-
-        @media only screen and (max-width: 480px){
-            /* /\/\/\/\/\/\/ CLIENT-SPECIFIC MOBILE STYLES /\/\/\/\/\/\/ */
-            body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:none !important;} /* Prevent Webkit platforms from changing default text sizes */
-            body{width:100% !important; min-width:100% !important;} /* Prevent iOS Mail from adding padding to the body */
-
-            /* /\/\/\/\/\/\/ MOBILE RESET STYLES /\/\/\/\/\/\/ */
-            #bodyCell{padding:10px !important;}
-
-            /* /\/\/\/\/\/\/ MOBILE TEMPLATE STYLES /\/\/\/\/\/\/ */
-
-            /* ======== Page Styles ======== */
-
-            /**
-            * @tab Mobile Styles
-            * @section template width
-            * @tip Make the template fluid for portrait or landscape view adaptability. If a fluid layout doesn't work for you, set the width to 300px instead.
-            */
-            #templateContainer{
-                max-width:600px !important;
-                width:100% !important;
-                padding: 32px;
-            }
-
-
-            /* ======== Body Styles ======== */
-
-            #templateBody{
-                margin: 32px 0;
-                padding: 32px 0;
-            }
-
-            /* ======== Footer Styles ======== */
-
-            .footerContent a {
-                display:block !important;
-                border-right: 0;
-                padding: 6px 0;
-            } /* Place footer social and utility links on their own lines, for easier access */
-        }
-    </style>
 </head>
-<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
+
-    <b>Productivity report for {{customerId}}</b>
+<body style="font-family: Arial, sans-serif;background-color: #f9f9f9;color: #333;margin: 0;padding: 0;font-size:16px">
+    <div class="container"
+        style="max-width: 600px;margin: 24px auto;background-color: #ffffff;border-radius: 8px;border: 1px solid #f0f0f5;overflow: hidden;">
+        <div class="header" style="background-color: #6c65e5;padding: 20px;text-align: center;color: #ffffff;">
+            <img src="cid:unleashLogo" alt="Unleash" width="210px" height="60px" style="margin-top: 8px;">
+            <div class="header-title" style="font-size: 24px;margin: 20px 0;">Your Monthly Productivity Report</div>
+        </div>
+        <div class="content" style="padding: 20px;text-align: left;">
+            <div class="intro" style="margin: 0 4px;">
+                <p style="color: #222">Hi {{userName}},</p>
+                <p style="color: #222">We are excited to share the latest insights for your instance. As always if you
+                    have any questions or concerns let us know - we are here for you.</p>
+                <p style="color: #222">Ready to dive into your numbers?</p>
+            </div>
+            <div class="big-number"
+                style="font-size: 48px;line-height: 36px;font-weight: bold;color: #333;margin: 20px 0 0 0;text-align: center;">
+                <div class="shaded"
+                    style="margin: 0;padding: 36px 8px;background: #f0f0f5;border-width: 3px;border-color: #ffffff;border-style: solid;">
+                    <div style="padding-top: 12px;">
+                        <span style="color: #1a4049;">{{health}}%</span><br>
+                        <span style="font-size: 16px; color: #888;">your instance health</span>
+                    </div>
+                </div>
+            </div>
+            <table class="content-table" style="width: 100%;border-collapse: collapse;border-width: 0;">
+                <colgroup>
+                    <col style="width: 50%;">
+                    <col style="width: 50%;">
+                </colgroup>
+                <tr>
+                    <td style="text-align: center;">
+                        <div class="shaded"
+                            style="margin: 0;padding: 36px 8px;background: #f0f0f5;border-width: 3px;border-color: #ffffff;border-style: solid;">
+                            <span
+                                style="font-size: 24px; font-weight: bold; color: #1a4049;">{{flagsCreated}}</span><br>
+                            <span style="color: #888;">flags created last month</span>
+                        </div>
+                    </td>
+                    <td style="text-align: center;">
+                        <div class="shaded"
+                            style="margin: 0;padding: 36px 8px;background: #f0f0f5;border-width: 3px;border-color: #ffffff;border-style: solid;">
+                            <span
+                                style="font-size: 24px; font-weight: bold; color: #1a4049;">{{productionUpdates}}</span><br>
+                            <span style="color: #888;">production updates last month</span>
+                        </div>
+                    </td>
+                </tr>
+            </table>
+            <div style="text-align: center;">
+                <a href="{{unleashUrl}}/insights" class="button"
+                    style="color: #fefefe;text-decoration: none;display: inline-block;margin: 20px 0;padding: 12px 25px;background-color: #817afe;border-radius: 25px;font-weight: bold;"
+                    rel="noopener" target="_blank">Go to your Insights</a>
+            </div>
+        </div>
+        <div class="footer" style="text-align: center;margin-top: 20px;padding: 20px;background: #f0f0f5;">
+            <div class="footer-links">
+
+                <a href="https://getunleash.io"
+                    style="color: #1a4049;margin: 0 10px;text-decoration: none;">getunleash.io</a> |
+                <a href="https://github.com/unleash"
+                    style="color: #1a4049;margin: 0 10px;text-decoration: none;">GitHub</a> |
+                <a href="https://twitter.com/unleash"
+                    style="color: #1a4049;margin: 0 10px;text-decoration: none;">Twitter</a>
+            </div>
+            <div class="unsubscribe" style="font-size: 12px;color: #888;margin-top: 10px;">
+                This email was sent to {{userEmail}}. You’ve received this as you are a user of Unleash.<br>
+                If you wish to unsubscribe from our newsletter, click <a
+                    href="https://example.com/unsubscribe">here</a>.
+            </div>
+        </div>
+    </div>
 </body>
+
 </html>