🏷️(mail) adapt to mjml v5

We upgraded to mjml v5, which has some breaking changes.
By default the ubuntu font was loaded, with google
fonts, that is not GDPR compliant.
We switched to Inter, and uses fonts.bunny.net to
load the font, which is GDPR compliant.

Author: AntoLC

src/mail/bin/mjml-to-html

@@ -6,4 +6,4 @@ DOCS_DIR_MAILS="${DOCS_DIR_MAILS:-../backend/core/templates/mail}/html/"
 if [ ! -d "${DOCS_DIR_MAILS}" ]; then
   mkdir -p "${DOCS_DIR_MAILS}";
 fi
-mjml mjml/*.mjml -o "${DOCS_DIR_MAILS}";
+mjml mjml/*.mjml -o "${DOCS_DIR_MAILS}" --config.allowIncludes true;

src/mail/mjml/partial/header.mjml

@@ -1,20 +1,16 @@
 <mj-head>
     <mj-title>{{ title }}</mj-title>
-    <mj-preview>
-        <!--
-            We load django tags here, in this way there are put within the body in html output
-            so the html-to-text command includes it within its output
-        -->
-        {% load i18n static extra_tags %}
-        {{ title }}
-    </mj-preview>
+    <mj-preview>{{ title }}</mj-preview>
+    <mj-font name="Inter" href="https://fonts.bunny.net/css?family=inter:300,400,500,700" />
     <mj-attributes>
         <mj-all
-            font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Cantarell, 'Helvetica Neue', sans-serif"
+            font-family="Inter, sans-serif"
             font-size="16px"
             line-height="normal"
             color="#3A3A3A"
         />
+        <mj-text font-family="Inter, sans-serif" />
+        <mj-button font-family="Inter, sans-serif" />
     </mj-attributes>
     <mj-style>
         /* Reset */

src/mail/mjml/template.mjml

@@ -2,6 +2,11 @@
   <mj-include path="./partial/header.mjml" />
 
   <mj-body mj-class="bg--blue-100">
+    <!--
+      We load django tags here so they appear in the body of the HTML output.
+      This ensures html-to-text also includes them in the plain text template.
+    -->
+    <mj-raw>{% load i18n static extra_tags %}</mj-raw>
     <mj-wrapper css-class="wrapper" padding="5px 25px 0px 25px">
       <mj-section css-class="wrapper-logo">
         <mj-column>
@@ -16,11 +21,11 @@
       </mj-section>
       <mj-section mj-class="bg--white-100" padding="0px 20px 60px 20px">
         <mj-column>
-          <mj-text align="center">
+          <mj-text align="center" font-family="Inter, sans-serif">
             <h1>{{title|capfirst}}</h1>
           </mj-text>
           <!-- Main Message -->
-          <mj-text>
+          <mj-text font-family="Inter, sans-serif">
             {{message|capfirst}}
             <a href="{{link}}">{{link_label}}</a>
           </mj-text>
@@ -29,6 +34,7 @@
             background-color="#000091"
             color="white"
             padding-bottom="30px"
+            font-family="Inter, sans-serif"
           >
             {{button_label}}
           </mj-button>
@@ -39,13 +45,13 @@
             width="30%"
             align="center"
           />
-          <mj-text>
+          <mj-text font-family="Inter, sans-serif">
             {% blocktrans %}
               Docs, your new essential tool for organizing, sharing and collaborating on your documents as a team.
             {% endblocktrans %}
           </mj-text>
           <!-- Signature -->
-          <mj-text>
+          <mj-text font-family="Inter, sans-serif">
             <p>
               {% blocktrans %}
                 Brought to you by {{brandname}}