Add ability to send transactional emails (#3272)

pontoon/base/static/css/check-box.css

@@ -25,6 +25,7 @@
     width: 342px;
   }
 
+  .check-box.hover .check-box-wrapper,
   .check-box-wrapper:hover {
     color: var(--white-1);
   }

pontoon/messaging/forms.py

@@ -6,5 +6,6 @@ from pontoon.base.forms import HtmlField
 class MessageForm(forms.Form):
     notification = forms.BooleanField(required=False)
     email = forms.BooleanField(required=False)
+    transactional = forms.BooleanField(required=False)
     subject = forms.CharField()
     body = HtmlField()

pontoon/messaging/static/css/messaging.css

@@ -39,6 +39,16 @@
 
     .message-type {
       .check-list {
+        .check-box.transactional {
+          display: none;
+          padding-left: 20px;
+
+          .help {
+            padding: 5px 0 0 30px;
+            font-style: italic;
+          }
+        }
+
         .check-box-wrapper {
           text-align: left;
         }

pontoon/messaging/static/js/messaging.js

@@ -7,6 +7,11 @@ $(function () {
     $(`[type=checkbox][name=${name}]`).click();
 
     self.toggleClass('enabled');
+
+    // Toggle Transactional check box
+    if (self.is('.email')) {
+      $('.check-box.transactional').toggle(self.is('.enabled'));
+    }
   });
 
   const container = $('#main .container');

pontoon/messaging/templates/messaging/messaging.html

@@ -39,9 +39,11 @@
             <div class="message-type">
               <ul class="check-list">
                 {{ Checkbox.checkbox('Notification', class='notification', attribute='notification') }}
-                <input type="checkbox" name="notification">
+                <li><input type="checkbox" name="notification"></li>
                 {{ Checkbox.checkbox('Email', class='email', attribute='email') }}
-                <input type="checkbox" name="email">
+                <li><input type="checkbox" name="email"></li>
+                {{ Checkbox.checkbox('Transactional', class='transactional', attribute='transactional', help='Transactional emails are also sent to users who have not opted in to email communication. They are restricted in the type of content that can be included.') }}
+                <li class="transactional"><input type="checkbox" name="transactional"></li>
               </ul>
 
                 <div class="errors">

pontoon/messaging/views.py

@@ -47,6 +47,7 @@ def send_message(request):
 
         is_notification = form.cleaned_data.get("notification")
         is_email = form.cleaned_data.get("email")
+        is_transactional = form.cleaned_data.get("transactional")
         subject = form.cleaned_data.get("subject")
         body = form.cleaned_data.get("body")
 
@@ -63,9 +64,13 @@ def send_message(request):
                 )
 
         if is_email:
-            footer = """<br><br>
+            footer = (
+                """<br><br>
 You’re receiving this email as a contributor to Mozilla localization on Pontoon. <br>To no longer receive emails like these, unsubscribe here: <a href="https://pontoon.mozilla.org/unsubscribe/{ uuid }">Unsubscribe</a>.
             """
+                if not is_transactional
+                else ""
+            )
             html_template = body + footer
             text_template = utils.html_to_plain_text_with_links(html_template)