Ghost/ghost/staff-service/lib/email-templates/new-milestone-received.hbs
Aileen Booker 8d290c4560
Milestone emails templates and sending implementation (#16318)
refs
https://www.notion.so/ghost/Marketing-Milestone-email-campaigns-1d2c9dee3cfa4029863edb16092ad5c4?pvs=4

- Added email template for milestones with using a configuration file
for different member milestone values, as we're sending different
content for each one
- Implement sending the email to users who have
`milestone-notifications` enabled, currently still behind a flag

Co-authored-by: Peter Zimon <peter.zimon@gmail.com>
2023-03-21 13:39:40 +00:00

143 lines
13 KiB
Handlebars
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>{{subject}}</title>
{{> styles}}
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</head>
<body style="background-color: #ffffff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.5em; margin: 0; padding: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
<table border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">
<tr>
<td style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 14px; vertical-align: top;">&nbsp;</td>
<td class="container" style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 14px; vertical-align: top; display: block; Margin: 0 auto; max-width: 660px; padding: 10px; width: 660px;">
<div class="content" style="box-sizing: border-box; display: block; Margin: 0 auto; max-width: 620px; padding: 30px 20px;">
<!-- START CENTERED CONTAINER -->
{{#> preview}}
{{#*inline "content"}}
{{{heading}}}
{{/inline}}
{{/preview}}
<table class="main" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; background: #ffffff; border-radius: 8px;">
<!-- START MAIN CONTENT AREA -->
<tr>
<td class="wrapper" align="center" valign="top" style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 14px; vertical-align: top; box-sizing: border-box;">
<!-- START LOGO -->
<table class="row" style="border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%">
<tbody>
<tr style="padding:0;text-align:left;vertical-align:top">
<th style="margin:0 auto;padding-bottom:48px;padding-left:0;padding-right:0;padding-top:40px;text-align:left;width:580px">
<center data-parsed="" style="min-width:580px; width:100%">
<table border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:60px; height: 60px;">
<tr style="padding: 0; margin: 0;">
<td background="https://static.ghost.org/v5.0.0/images/orb-email-head-static.png" width="60" height="60" style="width: 60px; height: 60px; padding: 0; margin: 0;"><img class="blog-logo" src="https://static.ghost.org/v5.0.0/images/orb-email-head.gif" alt="Blog Logo" width="60" height="60" style="-ms-interpolation-mode:bicubic;Margin:0 auto;border-radius:50%;clear:both;display:block;float:none;height:60px!important;margin:0 auto;max-width:100%;outline:0;text-align:center;text-decoration:none;width:60px!important" align="center"></td>
</tr>
</table>
</center>
</th>
</tr>
</tbody>
</table>
<!-- END LOGO -->
<!-- START FEATURE IMAGE -->
<table class="row" style="border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%">
<tbody>
<tr style="padding:0;text-align:left;vertical-align:top">
<th style="margin:0 auto; padding:0; padding-bottom: 48px; padding-left:0; padding-right:0; width:580px">
<center data-parsed="" style="min-width:580px;width:100%; padding: 0;">
<img class="feature-post-image" src="{{image.url}}" width="580"{{#if image.height}} height="{{image.height}}"{{/if}} align="center" style="-ms-interpolation-mode:bicubic;Margin:0 auto;border:0 none;clear:both;display:block;float:none;height:auto!important;margin:0 auto;max-width:100%;outline:0;text-align:center;text-decoration:none;width:100%!important;z-index:99;padding:0;"></center>
</th>
</tr>
</tbody>
</table>
<!-- END FEATURE IMAGE -->
<!-- END HEADER -->
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; max-width: 580px;">
<tr>
<td style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 14px; vertical-align: top;">
<!-- BEGIN EMAIL HEADING -->
<!--[if mso]>
<p style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 34px; color: #242628!important; font-weight: 800; line-height: 36px; margin: 0; margin-bottom: 25px; letter-spacing: -0.019em;"><font>{{{heading}}}</font></p>
<![endif]-->
<!--[if !mso !vml]-->
<p style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 34px !important; color: #242628!important; font-weight: 800; line-height: 36px; margin: 0; margin-bottom: 25px; letter-spacing: -0.019em;"><font>{{{heading}}}</font></p>
<!--[endif]-->
<!-- END EMAIL HEADING -->
<!-- BEGIN EMAIL CONTENT -->
{{#each content as |contentPart|}}
<p style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px !important; color: #3A464C; font-weight: normal; margin: 0; line-height: 23px; margin-bottom: 16px;">{{{contentPart}}}</p>
{{/each}}
<!-- END EMAIL CONTENT -->
<!-- CTA -->
<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; box-sizing: border-box;">
<tbody>
<tr>
<td align="left" style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; vertical-align: top; padding-top: 32px; padding-bottom: 12px;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
<tbody>
<tr>
<td style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; vertical-align: top; background-color: #15171A; border-radius: 5px; text-align: center;"> <a href="{{adminUrl}}" target="_blank" style="display: inline-block; color: #ffffff; background-color: #15171A; border: solid 1px #15171A; border-radius: 5px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 16px !important; font-weight: normal; margin: 0; padding: 9px 22px 10px; border-color: #15171A;">{{ctaText}}</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<p style="word-break: break-all; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 15px; line-height: 25px; margin-top:0; color: #3A464C;"></p>
</td>
</tr>
<!-- START FOOTER -->
<tr>
<td style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 14px; vertical-align: top; padding-top: 80px;">
<p class="small" style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 18px; font-size: 11px; color: #738A94; font-weight: normal; margin: 0; margin-bottom: 2px;">This message was sent from <a class="small" href="{{siteUrl}}" style="text-decoration: underline; color: #738A94; font-size: 11px;">{{siteDomain}}</a> to <a class="small" href="mailto:{{toEmail}}" style="text-decoration: underline; color: #738A94; font-size: 11px;">{{toEmail}}</a></p>
</td>
</tr>
<tr>
<td style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 14px; vertical-align: top; padding-top: 2px">
<p class="small" style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 18px; font-size: 11px; color: #738A94; font-weight: normal; margin: 0; margin-bottom: 2px;">Dont want to receive these emails? Manage your preferences <a class="small" href="{{staffUrl}}" style="text-decoration: underline; color: #738A94; font-size: 11px;">here</a>.</p>
</td>
</tr>
<!-- END FOOTER -->
</table>
<!-- END MAIN CONTENT AREA -->
</td>
</tr>
</table>
<!-- END CENTERED CONTAINER -->
</div>
</td>
<td style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 14px; vertical-align: top;">&nbsp;</td>
</tr>
</table>
</body>
</html>