feat: email service for productivity report (#8517)

Co-authored-by: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>

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

@@ -143,3 +143,29 @@ test('Can send order environments email', async () => {
     expect(content.html.includes(customerId)).toBe(true);
     expect(content.bcc).toBe('bcc@bcc.com');
 });
+
+test('Can send productivity report email', async () => {
+    const emailService = new EmailService({
+        email: {
+            host: 'test',
+            port: 587,
+            secure: false,
+            smtpuser: '',
+            smtppass: '',
+            sender: 'noreply@getunleash.ai',
+        },
+        getLogger: noLoggerProvider,
+    } as unknown as IUnleashConfig);
+
+    const customerId = 'customer133';
+
+    const content = await emailService.sendProductivityReportEmail(
+        'user@user.com',
+        customerId,
+    );
+    expect(content.from).toBe('noreply@getunleash.ai');
+    expect(content.subject).toBe('Unleash - productivity report');
+    expect(
+        content.html.includes(`<b>Productivity report for customer133</b>`),
+    ).toBe(true);
+});

src/lib/services/email-service.ts

@@ -34,6 +34,7 @@ const RESET_MAIL_SUBJECT = 'Unleash - Reset your password';
 const GETTING_STARTED_SUBJECT = 'Welcome to Unleash';
 const ORDER_ENVIRONMENTS_SUBJECT =
     'Unleash - ordered environments successfully';
+const PRODUCTIVITY_REPORT = 'Unleash - productivity report';
 const SCHEDULED_CHANGE_CONFLICT_SUBJECT =
     'Unleash - Scheduled changes can no longer be applied';
 const SCHEDULED_EXECUTION_FAILED_SUBJECT =
@@ -520,6 +521,64 @@ export class EmailService {
         });
     }
 
+    async sendProductivityReportEmail(
+        userEmail: string,
+        customerId: string,
+    ): Promise<IEmailEnvelope> {
+        if (this.configured()) {
+            const context = {
+                userEmail,
+                customerId,
+            };
+
+            const bodyHtml = await this.compileTemplate(
+                'productivity-report',
+                TemplateFormat.HTML,
+                context,
+            );
+            const bodyText = await this.compileTemplate(
+                'productivity-report',
+                TemplateFormat.PLAIN,
+                context,
+            );
+            const email = {
+                from: this.sender,
+                to: userEmail,
+                bcc: '',
+                subject: PRODUCTIVITY_REPORT,
+                html: bodyHtml,
+                text: bodyText,
+            };
+            process.nextTick(() => {
+                this.mailer!.sendMail(email).then(
+                    () =>
+                        this.logger.info(
+                            'Successfully sent productivity report email',
+                        ),
+                    (e) =>
+                        this.logger.warn(
+                            'Failed to send productivity report email',
+                            e,
+                        ),
+                );
+            });
+            return Promise.resolve(email);
+        }
+        return new Promise((res) => {
+            this.logger.warn(
+                'No mailer is configured. Please read the docs on how to configure an email service',
+            );
+            res({
+                from: this.sender,
+                to: userEmail,
+                bcc: '',
+                subject: PRODUCTIVITY_REPORT,
+                html: '',
+                text: '',
+            });
+        });
+    }
+
     isEnabled(): boolean {
         return this.mailer !== undefined;
     }

src/lib/types/experimental.ts

@@ -63,7 +63,8 @@ export type IFlagKey =
     | 'webhookDomainLogging'
     | 'addonUsageMetrics'
     | 'releasePlans'
-    | 'navigationSidebar';
+    | 'navigationSidebar'
+    | 'productivityReportEmail';
 
 export type IFlags = Partial<{ [key in IFlagKey]: boolean | Variant }>;
 
@@ -316,6 +317,10 @@ const flags: IFlags = {
         process.env.UNLEASH_EXPERIMENTAL_SIDEBAR_NAVIGATION,
         true,
     ),
+    productivityReportEmail: parseEnvVarBoolean(
+        process.env.UNLEASH_EXPERIMENTAL_PRODUCTIVITY_REPORT_EMAIL,
+        false,
+    ),
 };
 
 export const defaultExperimentalOptions: IExperimentalOptions = {

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

@@ -0,0 +1,320 @@
+<!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>*|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>
+</html>

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

@@ -0,0 +1,5 @@
+Subject: Unleash productivity report
+
+Hello,
+
+Productivity report