-
Notifications
You must be signed in to change notification settings - Fork 35
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge remote-tracking branch 'upstream/staging' into feature-magic-links
- Loading branch information
Showing
12 changed files
with
646 additions
and
1,394 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
317 changes: 84 additions & 233 deletions
317
site/gatsby-site/server/emails/templates/EntityIncidentUpdated.ts
Large diffs are not rendered by default.
Oops, something went wrong.
300 changes: 70 additions & 230 deletions
300
site/gatsby-site/server/emails/templates/IncidentUpdate.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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&userId={{userId}}&incidentId={{incidentId}}"><span style="font-size: 12px">Unsubscribe from Incident</span></a><span style="font-size: 12px"> </span></div> | ||
| <div style="font-family: inherit; text-align: center"><a href="{{siteUrl}}/unsubscribe?type=all&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(); |
Oops, something went wrong.