Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00
Code Issues Projects Releases Wiki Activity

Email template for Productivity Report (#8532)

Browse Source
This commit is contained in:
Tymoteusz Czech 2024-10-25 11:41:17 +02:00 committed by GitHub
parent 3076bb4c21
commit 7c37de373f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 137 additions and 327 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -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",

17
src/lib/services/email-service.test.ts
View File

@ -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(
content.html.includes(`<b>Productivity report for customer133</b>`),
).toBe(true);
expect(content.html.includes(`Productivity Report`)).toBe(true);
});

53
src/lib/services/email-service.ts
View File

@ -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;
}

392
src/mailtemplates/productivity-report/productivity-report.html.mustache
View File

@ -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>*|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>
<title>Your Unleash Productivity Report</title>
</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>

BIN
src/mailtemplates/productivity-report/unleash-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB