Merge pull request #1144 from maykinmedia/feature/2255-new-mailtempla…

…te-styles 💄 [#2255] Add new mail-templates styles everywhere
maykinmedia · Apr 12, 2024 · 32328ac · 32328ac
2 parents f91a428 + 3662100
commit 32328ac
Show file tree

Hide file tree

Showing 15 changed files with 501 additions and 89 deletions.
diff --git a/src/open_inwoner/accounts/tests/test_actions_expire.py b/src/open_inwoner/accounts/tests/test_actions_expire.py
@@ -21,7 +21,7 @@ def test_notify_about_expiring_action(self):
         html_body = sent_mail.alternatives[0][0]
 
         self.assertEqual(
-            sent_mail.subject, "Actions about to end today at Open Inwoner Platform"
+            sent_mail.subject, "Acties verlopen vandaag op Open Inwoner Platform"
         )
         self.assertEqual(sent_mail.to, [user.email])
         self.assertIn(action.name, html_body)

diff --git a/src/open_inwoner/accounts/tests/test_contact_views.py b/src/open_inwoner/accounts/tests/test_contact_views.py
@@ -504,7 +504,7 @@ def test_notification_email_for_approval_is_sent(self):
         email = mail.outbox[0]
         self.assertEqual(
             email.subject,
-            f"Goedkeuring geven op Open Inwoner Platform: {self.user.get_full_name()} wilt u toevoegen als contactpersoon",
+            f"Goedkeuring geven op Open Inwoner Platform: {self.user.get_full_name()} wil u toevoegen als contactpersoon",
         )
         self.assertEqual(email.to, [existing_user.email])
         invite_url = f"http://testserver{reverse('profile:contact_list')}"
@@ -524,7 +524,7 @@ def test_notification_email_for_approval_is_not_sent_when_new_user(self):
         email = mail.outbox[0]
         self.assertNotEqual(
             email.subject,
-            f"Goedkeuring geven op Open Inwoner Platform: {self.user.get_full_name()} wilt u toevoegen als contactpersoon",
+            f"Goedkeuring geven op Open Inwoner Platform: {self.user.get_full_name()} wil u toevoegen als contactpersoon",
         )
         self.assertNotEqual(email.to, ["[email protected]"])
         invite_url = f"http://testserver{reverse('profile:contact_list')}"

diff --git a/src/open_inwoner/accounts/tests/test_notify_about_messages.py b/src/open_inwoner/accounts/tests/test_notify_about_messages.py
@@ -23,9 +23,9 @@ def test_notify_about_received_message(self):
         sent_mail = mail.outbox[0]
         html_body = sent_mail.alternatives[0][0]
 
-        self.assertEqual(sent_mail.subject, "New messages at Open Inwoner Platform")
+        self.assertEqual(sent_mail.subject, "Nieuwe berichten op Open Inwoner Platform")
         self.assertEqual(sent_mail.to, [user.email])
-        self.assertIn("You've received 3 new messages from 2 users", sent_mail.body)
+        self.assertIn("U heeft 3 berichten ontvangen van 2 gebruikers.", sent_mail.body)
         self.assertIn(reverse("inbox:index"), html_body)
 
         for message in messages:
@@ -85,11 +85,11 @@ def test_notify_several_users(self):
 
         email1, email2 = sorted(mail.outbox, key=lambda x: x.to, reverse=True)
         for email in [email1, email2]:
-            self.assertEqual(email.subject, "New messages at Open Inwoner Platform")
+            self.assertEqual(email.subject, "Nieuwe berichten op Open Inwoner Platform")
             html_body = email.alternatives[0][0]
             self.assertIn(reverse("inbox:index"), html_body)
 
         self.assertEqual(email1.to, [user2.email])
-        self.assertIn("You've received 2 new messages from 1 users", email1.body)
+        self.assertIn("U heeft 2 berichten ontvangen van 1 gebruikers.", email1.body)
         self.assertEqual(email2.to, [user1.email])
-        self.assertIn("You've received 3 new messages from 1 users", email2.body)
+        self.assertIn("U heeft 3 berichten ontvangen van 1 gebruikers.", email2.body)
diff --git a/src/open_inwoner/conf/parts/contact_approval.html b/src/open_inwoner/conf/parts/contact_approval.html
@@ -1,7 +1,58 @@
-<p>Beste</p>
-<p>Gebruiker {{ sender_name }} wil u toevoegen als contactpersoon op {{ site_name }}.
-    Volg onderstaande link waarop u uw goedkeuring kan geven of kan aangeven {{ sender_name }} niet als contactpersoon te willen. </p>
-<p><a href="{{ contacts_link }}">Mijn Contacten</a><span class="color--secondary"> &rarr;</span></p>
-<p>U kunt ook op een later moment toestemming geven, het verzoek van {{ sender_name }} blijft open staat totdat u een keuze heeft gemaakt.</p>
-<p>Met vriendelijke groet,</p>
-<p>{{ site_name }}</p>
+<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%" class="table-mail">
+    <tbody>
+    <tr>
+        <td class="td-mail td__padding-all" colspan="6">
+            <p>Beste inwoner,</p>
+            <p>&nbsp;</p>
+            <p>Gebruiker {{ sender_name }} wil u toevoegen als contactpersoon op {{ site_name }}.</p>
+            <p>Volg onderstaande link waarop u uw goedkeuring kan geven of kan aangeven {{ sender_name }} niet als contactpersoon te willen.</p>
+            <br/>
+            <p>U kunt ook op een later moment toestemming geven, het verzoek van {{ sender_name }} blijft open staat totdat u een keuze heeft gemaakt.</p>
+        </td>
+    </tr>
+    <tr>
+        <td class="td-mail td__padding-right td__padding-left" colspan="6">
+            <p><a href="{{ contacts_link }}" class="button--primary">Ga naar 'Mijn contacten'</a></p>
+        </td>
+    </tr>
+    <tr>
+        <td class="spacing__extra" colspan="6">
+            &nbsp;
+        </td>
+    </tr>
+    <tr>
+        <td class="td-mail td__padding-all" colspan="6">
+            <p>Met vriendelijke groet,</p>
+            <p>&nbsp;</p>
+            <p>{{ site_name }}</p>
+        </td>
+    </tr>
+    <tr class="tr-mail">
+        <td class="td-mail spacer-bottom td__padding-zero" colspan="6">
+            <!-- <hr> styling -->
+        </td>
+    </tr>
+    <tr>
+        <td class="td-mail td__padding-top td__padding-right td__padding-left" colspan="6">
+            <p>Dit bericht is automatisch verzonden. U kunt <strong>niet reageren</strong> op deze e-mail. </p>
+            <p>&nbsp;</p>
+            <p><strong>Contact opnemen</strong></p>
+        </td>
+    </tr>
+    <tr>
+        <td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left td__leftcell" colspan="2"><p><a href="{{ contact_page }}">Ga naar onze contactpagina</a></p>
+        </td>
+        <td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left td__rightcell td__nowrap" colspan="4"><p><a href="tel:{{ contact_phonenumber }}" data-rel="external">Bel {{ contact_phonenumber }}</a></p></td>
+    </tr>
+    <tr class="tr-mail border-top">
+        <td class="td-mail border-top td__padding-zero" colspan="6">
+            <!-- <hr> styling --> &nbsp;
+        </td>
+    </tr>
+    <tr>
+        <td class="td-mail td__padding-right td__padding-bottom td__padding-left" colspan="6">
+            <p>Pas hier uw <a href="{{ profile_notifications }}">voorkeuren</a> aan voor de notificaties. </p>
+        </td>
+    </tr>
+    </tbody>
+</table>
diff --git a/src/open_inwoner/conf/parts/expiring_action.html b/src/open_inwoner/conf/parts/expiring_action.html
@@ -1,19 +1,80 @@
-<p>Dear</p>
-<p>You are receiving this email because you have some actions that are expiring.</p>
-
-<table width="600">
+<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%" class="table-mail">
+    <tbody>
+    <tr>
+        <td class="td-mail td__padding-all" colspan="6">
+            <p>Beste inwoner,</p>
+            <p>U ontvangt deze e-mail omdat enkele van uw acties verlopen.</p>
+        </td>
+    </tr>
+    <tr>
+        <td class="spacing__extra" colspan="6">
+            &nbsp;
+        </td>
+    </tr>
+    <!-- Contains Table with different column-widths -->
+    <tr>
+        <td class="td-mail td-mail__bg-danger cell--rounded-padding" colspan="6">
+            <div class="td-mail__bg-white mail-cell--rounded">
+                <table width="598" class="table-mail--lined">
+                    <tr>
+                        <th><strong>Actie naam</strong></th>
+                        <th><strong>Vervaldatum</strong></th>
+                    </tr>
+                    {% for action in actions %}
+                        <tr>
+                            <td>{{ action.name }}</td>
+                            <td>{{ action.end_date|date:"j F Y" }}</td>
+                        </tr>
+                    {% endfor %}
+                </table>
+            </div>
+        </td>
+    </tr>
+    <!-- end of Table with differing column-widths -->
+    <tr>
+        <td class="td-mail td-mail__bg-danger td__padding-all" colspan="6">
+            <p><a href="{{ actions_link }}" class="button--primary">Ga naar Acties</a></p>
+        </td>
+    </tr>
+    <tr>
+        <td class="spacing__extra" colspan="6">
+            &nbsp;
+        </td>
+    </tr>
+    <tr>
+        <td class="td-mail td__padding-all" colspan="6">
+            <p>Met vriendelijke groet,</p>
+            <p>&nbsp;</p>
+            <p>{{ site_name }}</p>
+        </td>
+    </tr>
+    <tr class="tr-mail">
+        <td class="td-mail spacer-bottom td__padding-zero" colspan="6">
+            <!-- <hr> styling -->
+        </td>
+    </tr>
+    <tr>
+        <td class="td-mail td__padding-top td__padding-right td__padding-left" colspan="6">
+            <p>Dit bericht is automatisch verzonden. U kunt <strong>niet reageren</strong> op deze e-mail. </p>
+            <p>&nbsp;</p>
+            <p><strong>Contact opnemen</strong></p>
+        </td>
+    </tr>
+    <tr class="tr--responsive">
+        <td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left td__leftcell" colspan="2"><p><a href="{{ contact_page }}">Ga naar onze contactpagina</a></p>
+        </td>
+        <td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left td__rightcell td__nowrap" colspan="4"><p><a href="tel:{{ contact_phonenumber }}" data-rel="external">Bel {{ contact_phonenumber }}</a></p></td>
+    </tr>
+    <tr class="tr-mail border-top">
+        <td class="td-mail border-top td__padding-zero" colspan="6">
+            <!-- <hr> styling --> &nbsp;
+        </td>
+    </tr>
     <tr>
-        <td>Action name</td>
-        <td>End date</td>
+        <td class="td-mail td__padding-right td__padding-bottom td__padding-left" colspan="6">
+            <p>Pas hier uw <a href="{{ profile_notifications }}">voorkeuren</a> aan voor de notificaties. </p>
+        </td>
     </tr>
-    {% for action in actions %}
-        <tr>
-            <td>{{ action.name }}</td>
-            <td>{{ action.end_date|date:"j F Y" }}</td>
-        </tr>
-    {% endfor %}
+    </tbody>
 </table>
 
-<p><a href="{{ actions_link }}">Go to your actions</a></p>
-<p>Met vriendelijke groet,</p>
-<p>{{ site_name }}</p>
diff --git a/src/open_inwoner/conf/parts/expiring_plan.html b/src/open_inwoner/conf/parts/expiring_plan.html
@@ -1,21 +1,69 @@
-<p>Dear</p>
-<p>You are receiving this email because you have some plans that are expiring.</p>
-
-<table width="600">
+<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%" class="table-mail">
+    <tbody>
     <tr>
-        <td>Plan name</td>
-        <td>Goal</td>
-        <td>End date</td>
-    </tr>
-    {% for plan in plans %}
-        <tr>
-            <td>{{ plan.title }}</td>
-            <td>{{ plan.goal }}</td>
-            <td>{{ plan.end_date|date:"j F Y" }}</td>
-        </tr>
-    {% endfor %}
+        <td class="td-mail td__padding-all" colspan="6">
+            <p>Beste inwoner,</p>
+            <p>U ontvangt deze e-mail omdat 1 of meer van uw samenwerkingsplannen verlopen.</p>
+            <p>&nbsp;</p>
+            <table width="598" class="table-mail--lined">
+                <tr>
+                    <th><strong>Samenwerking naam</strong></th>
+                    <th><strong>Doel</strong></th>
+                    <th><strong>Vervaldatum</strong></th>
+                </tr>
+                {% for plan in plans %}
+                    <tr>
+                        <td>{{ plan.title }}</td>
+                        <td>{{ plan.goal }}</td>
+                        <td>{{ plan.end_date|date:"j F Y" }}</td>
+                    </tr>
+                {% endfor %}
+            </table>
+        </td>
+    </tr>
+    <tr>
+        <td class="td-mail td__padding-right td__padding-left" colspan="6">
+            <p><a href="{{ plan_list_link }}" class="button--primary">Ga naar Samenwerkingsplannen</a></p>
+        </td>
+    </tr>
+    <tr>
+        <td class="spacing__extra" colspan="6">
+            &nbsp;
+        </td>
+    </tr>
+    <tr>
+        <td class="td-mail td__padding-all" colspan="6">
+            <p>Met vriendelijke groet,</p>
+            <p>&nbsp;</p>
+            <p>{{ site_name }}</p>
+        </td>
+    </tr>
+    <tr class="tr-mail">
+        <td class="td-mail spacer-bottom td__padding-zero" colspan="6">
+            <!-- <hr> styling -->
+        </td>
+    </tr>
+    <tr>
+        <td class="td-mail td__padding-top td__padding-right td__padding-left" colspan="6">
+            <p>Dit bericht is automatisch verzonden. U kunt <strong>niet reageren</strong> op deze e-mail. </p>
+            <p>&nbsp;</p>
+            <p><strong>Contact opnemen</strong></p>
+        </td>
+    </tr>
+    <tr class="tr--responsive">
+        <td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left td__leftcell" colspan="2"><p><a href="{{ contact_page }}">Ga naar onze contactpagina</a></p>
+        </td>
+        <td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left td__rightcell td__nowrap" colspan="4"><p><a href="tel:{{ contact_phonenumber }}" data-rel="external">Bel {{ contact_phonenumber }}</a></p></td>
+    </tr>
+    <tr class="tr-mail border-top">
+        <td class="td-mail border-top td__padding-zero" colspan="6">
+            <!-- <hr> styling --> &nbsp;
+        </td>
+    </tr>
+    <tr>
+        <td class="td-mail td__padding-right td__padding-bottom td__padding-left" colspan="6">
+            <p>Pas hier uw <a href="{{ profile_notifications }}">voorkeuren</a> aan voor de notificaties. </p>
+        </td>
+    </tr>
+    </tbody>
 </table>
-
-<p><a href="{{ plan_list_link }}">Go to your plans</a></p>
-<p>Met vriendelijke groet,</p>
-<p>{{ site_name }}</p>
diff --git a/src/open_inwoner/conf/parts/invite.html b/src/open_inwoner/conf/parts/invite.html
@@ -1,7 +1,48 @@
-<p>Beste</p>
-<p>Je bent door {{ inviter_name }} uitgenodigd om in te loggen op {{ site_name }}.
-    Gebruik onderstaande link om je aan te melden </p>
-<p><a href="{{ invite_link }}">aanmelden</a><span class="color--secondary"> &rarr;</span></p>
-<p>Mocht je geen behoefte hieraan hebben dan staat het je vrij om dit bericht te negeren </p>
-<p>Met vriendelijke groet,</p>
-<p>{{ site_name }}</p>
+<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%" class="table-mail">
+    <tbody>
+    <tr>
+        <td class="td-mail td__padding-all" colspan="6">
+            <p>Beste inwoner,</p>
+            <p>&nbsp;</p>
+            <p>Je bent door {{ inviter_name }} uitgenodigd om in te loggen op {{ site_name }}.</p>
+            <p>Gebruik onderstaande link om je aan te melden</p>
+            <p>&nbsp;</p>
+            <p>Mocht je geen behoefte hieraan hebben dan staat het je vrij om dit bericht te negeren </p>
+        </td>
+    </tr>
+    <tr>
+        <td class="td-mail td__padding-right td__padding-left" colspan="6">
+            <p><a href="{{ invite_link }}" class="button--primary">Aanmelden</a></p>
+        </td>
+    </tr>
+    <tr>
+        <td class="spacing__extra" colspan="6">
+            &nbsp;
+        </td>
+    </tr>
+    <tr>
+        <td class="td-mail td__padding-all" colspan="6">
+            <p>Met vriendelijke groet,</p>
+            <p>&nbsp;</p>
+            <p>{{ site_name }}</p>
+        </td>
+    </tr>
+    <tr class="tr-mail">
+        <td class="td-mail spacer-bottom td__padding-zero" colspan="6">
+            <!-- <hr> styling -->
+        </td>
+    </tr>
+    <tr>
+        <td class="td-mail td__padding-top td__padding-right td__padding-left" colspan="6">
+            <p>Dit bericht is automatisch verzonden. U kunt <strong>niet reageren</strong> op deze e-mail. </p>
+            <p>&nbsp;</p>
+            <p><strong>Contact opnemen</strong></p>
+        </td>
+    </tr>
+    <tr>
+        <td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left td__leftcell" colspan="2"><p><a href="{{ contact_page }}">Ga naar onze contactpagina</a></p>
+        </td>
+        <td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left td__rightcell td__nowrap" colspan="4"><p><a href="tel:{{ contact_phonenumber }}" data-rel="external">Bel {{ contact_phonenumber }}</a></p></td>
+    </tr>
+    </tbody>
+</table>