feat(reminders): add new reminder templates

mailer.js

@@ -311,6 +311,14 @@ module.exports = function (log) {
 
   Mailer.prototype.verificationReminderEmail = function (message) {
     log.trace({ op: 'mailer.verificationReminderEmail', email: message.email, uid: message.uid })
+
+    var subject = gettext('Hello again.')
+    var template = 'verificationReminderFirstEmail'
+    if (message.type === 'second') {
+      subject = gettext('Still there?')
+      template = 'verificationReminderSecondEmail'
+    }
+
     var query = {
       uid: message.uid,
       code: message.code
@@ -333,8 +341,8 @@ module.exports = function (log) {
         'X-Uid': message.uid,
         'X-Verify-Code': message.code
       },
-      subject: gettext('Verify your Firefox Account'),
-      template: 'verificationReminderEmail',
+      subject: subject,
+      template: template,
       templateValues: {
         email: message.email,
         link: link,

templates/index.js

@@ -55,7 +55,8 @@ module.exports = function () {
       'password_reset',
       'new_sync_device',
       'post_verify',
-      'verification_reminder'
+      'verification_reminder_first',
+      'verification_reminder_second'
     ].map(loadTemplates)
   )
   .then(

templates/verification_reminder.txt

@@ -1,8 +0,0 @@
-{{t "Hello again." }}
-
-{{t "Recently you created a Firefox Account, but never verified it. Please activate your account by confirming this email address." }}
-
-{{t "Activate Now:"}}: {{{ link }}}
-
-{{t "This is an automated email; if you received it in error, no action is required."}} {{t "For more information, please visit %(supportUrl)s"}}
-

templates/verification_reminder_first.html

@@ -18,8 +18,8 @@
 <!--Header Area-->
 <tr style="page-break-before: always">
   <td valign="top">
-    <h1 style="font-family: sans-serif; font-weight: normal; margin: 0 0 24px 0; text-align: center;">{{t "Hello again." }}</h1>
-    <p class="primary" style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0 0 24px 0; text-align: center;">{{t "Recently you created a Firefox Account, but never verified it. Please activate your account by confirming this email address." }}</p>
+    <h1 style="font-family: sans-serif; font-weight: normal; margin: 0 0 24px 0; text-align: center;">{{t "Hello again."}}</h1>
+    <p class="primary" style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0 0 24px 0; text-align: center;">{{{t "A few days ago you created a Firefox Account, but never verified it. A verified account lets you access your tabs, bookmarks, passwords and history on any device connected to it. Simply confirm this email address to activate your account."}}}</p>
   </td>
 </tr>
 
@@ -48,7 +48,7 @@
 <tr style="page-break-before: always">
   <td border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
     <br/>
-    <p width="310" class="secondary" style="font-family: sans-serif; font-weight: normal; margin: 0 0 24px 0; text-align: center; color: #8A9BA8; font-size: 11px; line-height: 13px; width: 310px !important; word-wrap: break-word">{{t "Alternatively:"}}<a href="{{{link}}}" style="color: #0095dd; text-decoration: none; width: 310px !important; display:block;"><br/>{{{link}}}</a></p>
+    <p width="310" class="secondary" style="font-family: sans-serif; font-weight: normal; margin: 0 0 24px 0; text-align: center; color: #8A9BA8; font-size: 11px; line-height: 13px; width: 310px !important; word-wrap: break-word; word-break: break-all">{{t "Alternatively:"}}<a href="{{{link}}}" style="color: #0095dd; text-decoration: none; width: 310px !important; display:block;"><br/><font style="word-break:break-all;">{{{link}}}</font></a></p>
     <p class="secondary" style="font-family: sans-serif; font-weight: normal; margin: 0; text-align: center; color: #8A9BA8; font-size: 11px; line-height: 13px; width: 310px !important; word-wrap:break-word">{{t "This is an automated email; if you received it in error, no action is required."}} {{{t "For more information, please visit <a %(supportLinkAttributes)s>Mozilla Support</a>"}}}</p>
   </td>
 </tr>

templates/verification_reminder_first.txt

@@ -0,0 +1,6 @@
+{{t "Hello again."}}
+
+{{t "A few days ago you created a Firefox Account, but never verified it. A verified account lets you access your tabs, bookmarks, passwords and history on any device connected to it. Simply confirm this email address to activate your account."}}
+{{t "Activate now:"}} {{{link}}}
+
+{{t "This is an automated email; if you received it in error, no action is required."}} {{t "For more information, please visit %(supportUrl)s"}}

templates/verification_reminder_second.html

@@ -1,11 +1,25 @@
-<% extends "partials/base/base.html" %>
+<!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>{{t "Firefox Accounts"}}</title>
+</head>
+
+<body style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; margin: 0; padding: 0;">
+<table align="center" border="0" cellpadding="0" cellspacing="0" width="310" style="-webkit-text-size-adjust: 100%; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 310px; margin: 0 auto;">
+
+<!--Logo-->
+<tr style="page-break-before: always">
+  <td align="center" id="firefox-logo" style="padding: 20px 0;">
+    <img src="http://image.e.mozilla.org/lib/fe9915707361037e75/m/2/fxlogojg.gif" height="95" width="88" alt="" style="-ms-interpolation-mode: bicubic;" />
+  </td>
+</tr>
 
-<% block content %>
 <!--Header Area-->
 <tr style="page-break-before: always">
   <td valign="top">
-    <h1 style="font-family: sans-serif; font-weight: normal; margin: 0 0 24px 0; text-align: center;">{{t "Hello again." }}</h1>
-    <p class="primary" style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0 0 24px 0; text-align: center;">{{t "Recently you created a Firefox Account, but never verified it. Please activate your account by confirming this email address." }}</p>
+    <h1 style="font-family: sans-serif; font-weight: normal; margin: 0 0 24px 0; text-align: center;">{{t "Still there?"}}</h1>
+    <p class="primary" style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0 0 24px 0; text-align: center;">{{{t "A week ago you created a Firefox Account, but never verified it. We’re worried about you. Firefox is available for Windows, Mac, Linux, Android and iOS. You can sync your Firefox passwords, bookmarks and history across all of them. Confirm this email address to activate your account and let us know you're okay."}}}</p>
   </td>
 </tr>
 
@@ -34,13 +48,13 @@
 <tr style="page-break-before: always">
   <td border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
     <br/>
-    <p width="310" class="secondary" style="font-family: sans-serif; font-weight: normal; margin: 0 0 24px 0; text-align: center; color: #8A9BA8; font-size: 11px; line-height: 13px; width: 310px !important; word-wrap: break-word">{{t "Alternatively:"}}<a href="{{{link}}}" style="color: #0095dd; text-decoration: none; width: 310px !important; display:block;"><br/>{{{link}}}</a></p>
+    <p width="310" class="secondary" style="font-family: sans-serif; font-weight: normal; margin: 0 0 24px 0; text-align: center; color: #8A9BA8; font-size: 11px; line-height: 13px; width: 310px !important; word-wrap: break-word; word-break: break-all">{{t "Alternatively:"}}<a href="{{{link}}}" style="color: #0095dd; text-decoration: none; width: 310px !important; display:block;"><br/><font style="word-break:break-all;">{{{link}}}</font></a></p>
     <p class="secondary" style="font-family: sans-serif; font-weight: normal; margin: 0; text-align: center; color: #8A9BA8; font-size: 11px; line-height: 13px; width: 310px !important; word-wrap:break-word">{{t "This is an automated email; if you received it in error, no action is required."}} {{{t "For more information, please visit <a %(supportLinkAttributes)s>Mozilla Support</a>"}}}</p>
   </td>
 </tr>
-<% endblock %>
 
-<% block after_table %>
+</table>
+
 <div itemscope itemtype="https://schema.org/EmailMessage">
   <div itemprop="potentialAction" itemscope itemtype="https://schema.org/ViewAction">
     <link itemprop="target" href="{{{oneClickLink}}}"/>
@@ -49,4 +63,6 @@
   </div>
   <meta itemprop="description" content="{{t 'Verify your email to finish your Firefox Account registration'}}"/>
 </div>
-<% endblock %>
+
+</body>
+</html>

templates/verification_reminder_second.txt

@@ -0,0 +1,6 @@
+{{t "Still there?"}}
+
+{{t "A week ago you created a Firefox Account, but never verified it. We’re worried about you. Firefox is available for Windows, Mac, Linux, Android and iOS. You can sync your Firefox passwords, bookmarks and history across all of them. Confirm this email address to activate your account and let us know you're okay."}}
+{{t "Activate now:"}} {{{link}}}
+
+{{t "This is an automated email; if you received it in error, no action is required."}} {{t "For more information, please visit %(supportUrl)s"}}