Skip to content

Commit

Permalink
Update email template for mailersend with clean HTML (#3218)
Browse files Browse the repository at this point in the history 
* wip

* wip

* wip

* Make test email script configurable

* Add comment explaining how to run script on its own

* Fix broken links

* Update all templates

---------

Co-authored-by: Cesar Varela <[email protected]>
  • Loading branch information
@lmcnulty @cesarvarela
lmcnulty and cesarvarela authored Dec 12, 2024
1 parent bdecb4c commit ad37df7
Show file tree
Hide file tree
Showing 8 changed files with 596 additions and 1,384 deletions.
317 changes: 84 additions & 233 deletions site/gatsby-site/server/emails/templates/EntityIncidentUpdated.ts
View file

Large diffs are not rendered by default.

300 changes: 70 additions & 230 deletions site/gatsby-site/server/emails/templates/IncidentUpdate.ts
View file
Original file line number Diff line number Diff line change
@@ -1,230 +1,70 @@
export default `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html data-editor-version="2" class="sg-campaigns" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!--<![endif]-->
<!--[if (gte mso 9)|(IE)]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
body {width: 600px;margin: 0 auto;}
table {border-collapse: collapse;}
table, td {mso-table-lspace: 0pt;mso-table-rspace: 0pt;}
img {-ms-interpolation-mode: bicubic;}
</style>
<![endif]-->
<style type="text/css">
body, p, div {
font-family: arial,helvetica,sans-serif;
font-size: 14px;
}
body {
color: #000000;
}
body a {
color: #1188E6;
text-decoration: none;
}
p { margin: 0; padding: 0; }
table.wrapper {
width:100% !important;
table-layout: fixed;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
img.max-width {
max-width: 100% !important;
}
.column.of-2 {
width: 50%;
}
.column.of-3 {
width: 33.333%;
}
.column.of-4 {
width: 25%;
}
ul ul ul ul {
list-style-type: disc !important;
}
ol ol {
list-style-type: lower-roman !important;
}
ol ol ol {
list-style-type: lower-latin !important;
}
ol ol ol ol {
list-style-type: decimal !important;
}
@media screen and (max-width:480px) {
.preheader .rightColumnContent,
.footer .rightColumnContent {
text-align: left !important;
}
.preheader .rightColumnContent div,
.preheader .rightColumnContent span,
.footer .rightColumnContent div,
.footer .rightColumnContent span {
text-align: left !important;
}
.preheader .rightColumnContent,
.preheader .leftColumnContent {
font-size: 80% !important;
padding: 5px 0;
}
table.wrapper-mobile {
width: 100% !important;
table-layout: fixed;
}
img.max-width {
height: auto !important;
max-width: 100% !important;
}
a.bulletproof-button {
display: block !important;
width: auto !important;
font-size: 80%;
padding-left: 0 !important;
padding-right: 0 !important;
}
.columns {
width: 100% !important;
}
.column {
display: block !important;
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.social-icon-column {
display: inline-block !important;
}
}
</style>
<style>
@media screen and (max-width:480px) {
table {
width: 480px !important;
}
}
</style>
<!--user entered Head Start--><!--End Head user entered-->
</head>
<body>
<center class="wrapper" data-link-color="#1188E6" data-body-style="font-size:14px; font-family:arial,helvetica,sans-serif; color:#000000; background-color:#FFFFFF;">
<div class="webkit">
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="wrapper" bgcolor="#FFFFFF">
<tr>
<td valign="top" bgcolor="#FFFFFF" width="100%">
<table width="100%" role="content-container" class="outer" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="100%">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<!--[if mso]>
<center>
<table><tr><td width="600">
<![endif]-->
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%; max-width:600px;" align="center">
<tr>
<td role="modules-container" style="padding:0px 0px 0px 0px; color:#000000; text-align:left;" bgcolor="#FFFFFF" width="100%" align="left"><table class="module preheader preheader-hide" role="module" data-type="preheader" border="0" cellpadding="0" cellspacing="0" width="100%" style="display: none !important; mso-hide: all; visibility: hidden; opacity: 0; color: transparent; height: 0; width: 0;">
<tr>
<td role="module-content">
<p>Incident {{incidentId}}: "{{incidentTitle}}" was updated.</p>
</td>
</tr>
</table><table class="module" role="module" data-type="text" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" data-muid="5301aec8-2187-4d96-97e4-ce266be29069" data-mc-module-version="2019-10-22">
<tbody>
<tr>
<td style="padding:18px 0px 18px 0px; line-height:35px; text-align:inherit; background-color:#061832;" height="100%" valign="top" bgcolor="#061832" role="module-content"><div><div style="font-family: inherit; text-align: center"><span style="color: #ffffff; font-size: 24px"><strong>AI INCIDENT DATABASE</strong></span></div><div></div></div></td>
</tr>
</tbody>
</table><table class="module" role="module" data-type="text" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" data-muid="902cdaf9-0c3e-40b3-b591-1fe6cf541db5" data-mc-module-version="2019-10-22">
<tbody>
<tr>
<td style="padding:18px 0px 18px 0px; line-height:22px; text-align:inherit;" height="100%" valign="top" bgcolor="" role="module-content"><div><div style="font-family: inherit; text-align: inherit">Greetings {{email}},</div>
<div style="font-family: inherit; text-align: inherit"><br>
<a href="{{incidentUrl}}">Incident {{incidentId}}</a>: "{{incidentTitle}}" was updated.</div>
<div style="font-family: inherit; text-align: inherit"><br></div>
<div style="font-family: inherit; text-align: inherit"><a href="{{incidentUrl}}">View Incident<br>
</a></div>
<div style="font-family: inherit; text-align: inherit"><br></div>
<div style="font-family: inherit; text-align: inherit">Sincerely,</div>
<div style="font-family: inherit; text-align: inherit">Responsible AI Collaborative</div><div></div></div></td>
</tr>
</tbody>
</table><table class="module" role="module" data-type="divider" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" data-muid="52ab52ad-9572-4fbb-955a-02157a2b5ec6">
<tbody>
<tr>
<td style="padding:0px 0px 0px 0px;" role="module-content" height="100%" valign="top" bgcolor="">
<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" height="1px" style="line-height:1px; font-size:1px;">
<tbody>
<tr>
<td style="padding:0px 0px 1px 0px;" bgcolor="#000000"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table><table class="module" role="module" data-type="social" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" data-muid="43e95c75-693a-4486-ac35-63e8311679fa">
<tbody>
<tr>
<td valign="top" style="padding:10px 0px 0px 0px; font-size:6px; line-height:10px;" align="center">
<table align="center" style="-webkit-margin-start:auto;-webkit-margin-end:auto;">
<tbody><tr align="center"><td style="padding: 0px 5px;" class="social-icon-column">
<a role="social-icon-link" href="https://www.facebook.com/incidentsdb" target="_blank" alt="Facebook" title="Facebook" style="display:inline-block; background-color:#3B579D; height:21px; width:21px;">
<img role="social-icon" alt="Facebook" title="Facebook" src="https://mc.sendgrid.com/assets/social/white/facebook.png" style="height:21px; width:21px;" height="21" width="21">
</a>
</td><td style="padding: 0px 5px;" class="social-icon-column">
<a role="social-icon-link" href="https://twitter.com/incidentsdb" target="_blank" alt="Twitter" title="Twitter" style="display:inline-block; background-color:#7AC4F7; height:21px; width:21px;">
<img role="social-icon" alt="Twitter" title="Twitter" src="https://mc.sendgrid.com/assets/social/white/twitter.png" style="height:21px; width:21px;" height="21" width="21">
</a>
</td></tr></tbody>
</table>
</td>
</tr>
</tbody>
</table><table class="module" role="module" data-type="text" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" data-muid="79b1a951-2f75-4d6e-940b-6610516555e0" data-mc-module-version="2019-10-22">
<tbody>
<tr>
<td style="padding:5px 0px 18px 0px; line-height:22px; text-align:inherit;" height="100%" valign="top" bgcolor="" role="module-content"><div><div style="font-family: inherit; text-align: center"><a href="{{siteUrl}}/unsubscribe?type=incident&amp;userId={{userId}}&amp;incidentId={{incidentId}}"><span style="font-size: 12px">Unsubscribe from Incident</span></a><span style="font-size: 12px"> &nbsp;&nbsp;</span></div>
<div style="font-family: inherit; text-align: center"><a href="{{siteUrl}}/unsubscribe?type=all&amp;userId={{userId}}"><span style="font-size: 12px">Unsubscribe from All Notifications</span></a></div><div></div></div></td>
</tr>
</tbody>
</table></td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
</center>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</center>
</body>
</html>`;
import {
ignoreWhitespace,
insertContent,
bodyStyle,
wrapperStyle,
headerStyle,
headerTitleStyle,
mainActionLink,
} from './shared'

const getEmailTemplate = () => {

// Styles in this function should be unique to this template.
// They get inlined at the appropriate places
// (better supported across email clients than <style> tags).
const incidentStyle = ignoreWhitespace(`
padding: 32px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
font-size: 90%;
`);

const incidentImageStyle = ignoreWhitespace(`
border-radius: 8px;
float: right;
margin-top: 16px;
margin-left: 16px;
margin-bottom: 16px;
`);

const entityStyle = ignoreWhitespace(`
border: 1px solid;
text-decoration: none;
padding: 2px 6px;
margin: 0px 2px;
border-radius: 4px;
`);

// Wraps the main email content in header, footer, etc.
// Template variables wrapped in {{ }} are handled per-email by MailerSend.
// We also use regular JavaScript string templating ${}
// to construct the MailerSend template
// -- the values from these don't differ per-email,
// they're just for organizing the code.
return insertContent(
`
<p style="margin-top: 0px;">
Greetings,
</p>
<p>
Incident {{incidentId}} was updated</a>:
<a href="{{incidentUrl}}">"{{incidentTitle}}"</a>.
</p>
<p>
You can manage your subscriptions to these notifications from
<a href="https://incidentdatabase.ai/account/">your account page</a>.
</p>
<p style="margin-bottom: 32px">
Sincerely,<br>
Responsible AI Collaborative
</p>
`,
{ title: 'Incident Update' }
);
};

export default getEmailTemplate();
Loading

0 comments on commit ad37df7

Please sign in to comment.