From 434a77c6c07e339b4da38263cf1755b85c55778a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matja=C5=BE=20Horvat?= <matjaz.horvat@gmail.com>
Date: Thu, 11 Jul 2024 09:13:06 +0200
Subject: [PATCH] Add ability to send transactional emails (#3272)

---
 pontoon/base/static/css/check-box.css                |  1 +
 pontoon/messaging/forms.py                           |  1 +
 pontoon/messaging/static/css/messaging.css           | 10 ++++++++++
 pontoon/messaging/static/js/messaging.js             |  5 +++++
 pontoon/messaging/templates/messaging/messaging.html |  6 ++++--
 pontoon/messaging/views.py                           |  7 ++++++-
 6 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/pontoon/base/static/css/check-box.css b/pontoon/base/static/css/check-box.css
index ff3c10ab6..bcb6284cf 100644
--- a/pontoon/base/static/css/check-box.css
+++ b/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);
   }
diff --git a/pontoon/messaging/forms.py b/pontoon/messaging/forms.py
index b15d3103c..6904fa234 100644
--- a/pontoon/messaging/forms.py
+++ b/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()
diff --git a/pontoon/messaging/static/css/messaging.css b/pontoon/messaging/static/css/messaging.css
index 8fce0e2c4..6e8a33510 100644
--- a/pontoon/messaging/static/css/messaging.css
+++ b/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;
         }
diff --git a/pontoon/messaging/static/js/messaging.js b/pontoon/messaging/static/js/messaging.js
index 6f677da80..69584c5ac 100644
--- a/pontoon/messaging/static/js/messaging.js
+++ b/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');
diff --git a/pontoon/messaging/templates/messaging/messaging.html b/pontoon/messaging/templates/messaging/messaging.html
index 45a7bba83..bc6c71b8f 100644
--- a/pontoon/messaging/templates/messaging/messaging.html
+++ b/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">
diff --git a/pontoon/messaging/views.py b/pontoon/messaging/views.py
index 909ca9ae7..c4c1a9f56 100644
--- a/pontoon/messaging/views.py
+++ b/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)