Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update email template for mailersend with clean HTML #3218

Merged
merged 8 commits into from
Dec 12, 2024
Merged

Update email template for mailersend with clean HTML #3218

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
9740048
wip
lmcnulty Nov 6, 2024
5570f78
wip
lmcnulty Nov 11, 2024
3cebe1e
wip
lmcnulty Nov 11, 2024
9eb9500
Make test email script configurable
lmcnulty Nov 13, 2024
48d6d0a
Add comment explaining how to run script on its own
lmcnulty Nov 13, 2024
b953611
Fix broken links
lmcnulty Nov 13, 2024
281cc72
Update all templates
lmcnulty Nov 20, 2024
a402015
Merge branch 'staging' into email-template-update-mailersend
cesarvarela Dec 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
317 changes: 84 additions & 233 deletions site/gatsby-site/server/emails/templates/EntityIncidentUpdated.ts
View file
Open in desktop

Large diffs are not rendered by default.

300 changes: 70 additions & 230 deletions site/gatsby-site/server/emails/templates/IncidentUpdate.ts
View file
Open in desktop
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
Loading