HAI-1526 Add mjml template

City-of-Helsinki · Sep 5, 2023 · 952c6e5 · 952c6e5
1 parent 93965a5
commit 952c6e5
Show file tree

Hide file tree

Showing 14 changed files with 795 additions and 147 deletions.
diff --git a/README.md b/README.md
@@ -164,6 +164,11 @@ cd haitaton-backend
 When running locally, the system emails are sent to smtp4dev, which is started as part of the Docker
 Compose setup. You can access the sent emails by opening http://localhost:3003.
 
+Creation of new emails is done with [mjml.io](https://mjml.io/). Either IntelliJ or Visual Studio Code plugin MJML is
+needed. Once the Mjml template is done, it is converted to html. For example in Visual Studio, type >MJML:Copy HTML.
+
+The html output is the actual email content.
+
 ## File scan
 
 Haitaton supports uploading of attachment files. Files are validated with ClamAV anti-malware tool.

diff --git a/...service/src/integrationTest/kotlin/fi/hel/haitaton/hanke/email/EmailSenderServiceITest.kt b/...service/src/integrationTest/kotlin/fi/hel/haitaton/hanke/email/EmailSenderServiceITest.kt
@@ -153,12 +153,12 @@ class EmailSenderServiceITest : DatabaseTest() {
             val email = greenMail.firstReceivedMessage()
             val (textBody, htmlBody) = getBodiesFromHybridEmail(email)
             assertThat(textBody).all {
-                startsWith("${data.inviterName} (${data.inviterEmail}) lisäsi sinut")
+                contains("${data.inviterName} (${data.inviterEmail}) lisäsi sinut")
                 contains("hankkeelle ${data.hankeNimi} (${data.hankeTunnus}).")
                 contains("http://localhost:3001/${data.invitationToken}")
             }
             assertThat(htmlBody).all {
-                contains("<p>${data.inviterName} (${data.inviterEmail}) lisäsi sinut")
+                contains("${data.inviterName} (${data.inviterEmail})")
                 contains("hankkeelle <b>${data.hankeNimi} (${data.hankeTunnus})</b>.")
                 contains("""<a href="http://localhost:3001/${data.invitationToken}">""")
             }
@@ -172,8 +172,8 @@ class EmailSenderServiceITest : DatabaseTest() {
 
             val email = greenMail.firstReceivedMessage()
             val (textBody, htmlBody) = getBodiesFromHybridEmail(email)
-            assertThat(textBody).startsWith("Asioija ${data.inviterEmail} lisäsi sinut")
-            assertThat(htmlBody).contains("<p>Asioija ${data.inviterEmail} lisäsi sinut")
+            assertThat(textBody).contains("Asioija ${data.inviterEmail}")
+            assertThat(htmlBody).contains("Asioija ${data.inviterEmail}")
         }
     }
 
@@ -216,7 +216,7 @@ class EmailSenderServiceITest : DatabaseTest() {
             val email = greenMail.firstReceivedMessage()
             val (textBody, htmlBody) = getBodiesFromHybridEmail(email)
             assertThat(textBody).all {
-                startsWith("${data.inviterName} (${data.inviterEmail}) on")
+                contains("${data.inviterName} (${data.inviterEmail}) on")
                 contains("tehnyt johtoselvityshakemuksen (${data.applicationIdentifier})")
                 contains("hankkeella ${data.hankeTunnus}")
                 contains("rooliin ${data.roleType.text()}.")
@@ -226,7 +226,7 @@ class EmailSenderServiceITest : DatabaseTest() {
                 contains("${data.inviterName} (${data.inviterEmail})")
                 contains("johtoselvityshakemuksen (${data.applicationIdentifier})")
                 contains("rooliin ${data.roleType.text()}")
-                contains("""Tarkastele hakemusta Haitattomassa: <a href="http://localhost:3001">""")
+                contains("""<a href="http://localhost:3001">""")
             }
         }
 
@@ -238,8 +238,8 @@ class EmailSenderServiceITest : DatabaseTest() {
 
             val email = greenMail.firstReceivedMessage()
             val (textBody, htmlBody) = getBodiesFromHybridEmail(email)
-            assertThat(textBody).startsWith("Asioija ${data.inviterEmail} on tehnyt")
-            assertThat(htmlBody).contains("<p>Asioija ${data.inviterEmail} on tehnyt")
+            assertThat(textBody).contains("Asioija ${data.inviterEmail} on tehnyt")
+            assertThat(htmlBody).contains("Asioija ${data.inviterEmail} on tehnyt")
         }
     }
 

diff --git a/services/hanke-service/src/main/kotlin/fi/hel/haitaton/hanke/email/EmailSenderService.kt b/services/hanke-service/src/main/kotlin/fi/hel/haitaton/hanke/email/EmailSenderService.kt
@@ -56,12 +56,14 @@ class EmailSenderService(
     private val mailSender: JavaMailSender,
     private val emailConfig: EmailProperties,
 ) {
+
     fun sendJohtoselvitysCompleteEmail(
         to: String,
         applicationId: Long?,
         applicationIdentifier: String,
     ) {
         logger.info { "Sending email for completed johtoselvitys $applicationIdentifier" }
+
         val templateData =
             mapOf(
                 "baseUrl" to emailConfig.baseUrl,

diff --git a/services/hanke-service/src/main/resources/email/template/footer-content.mjml b/services/hanke-service/src/main/resources/email/template/footer-content.mjml
@@ -0,0 +1,27 @@
+<mj-section background-color="#FFC61E">
+    <mj-column>
+        <mj-raw>
+            <div style="display: flex; align-items: center;">
+                <div style="padding-left: 24px; padding-top: 5px; padding-bottom: 16px">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="87" height="40" viewBox="0 0 131 60"
+                         fill="none">
+                        <path fill-rule="evenodd" clip-rule="evenodd"
+                              d="M126.726 3.75164V38.251C126.726 44.836 121.268 50.2143 114.544 50.2143H77.4422C72.9858 50.2143 68.7667 51.8146 65.4706 54.7792C62.1744 51.8408 57.9554 50.2143 53.499 50.2143H16.3185C9.64705 50.2143 4.24137 44.8623 4.24137 38.251V3.75164H126.726ZM67.4483 58.0586C70.1115 55.4088 73.6714 53.9397 77.4686 53.9397H114.544C123.325 53.9397 130.471 46.9086 130.471 38.251V0H0.470581V38.2247C0.470581 46.8824 7.56389 53.9134 16.3185 53.9134H53.499C57.2698 53.9134 60.8296 55.3826 63.5193 58.0324L65.4969 60L67.4483 58.0586Z"
+                              fill="black"/>
+                        <path fill-rule="evenodd" clip-rule="evenodd"
+                              d="M113.008 19.4591C113.008 20.5954 112.081 21.4218 110.915 21.4218C109.75 21.4218 108.823 20.5954 108.823 19.4591C108.823 18.3228 109.75 17.4964 110.915 17.4964C112.081 17.4448 113.008 18.2712 113.008 19.4591ZM109.088 35.4961H112.717V22.9196H109.088V35.4961ZM102.572 27.9037L107.313 35.4961H103.367L100.189 30.4604L98.4671 32.578V35.4961H94.865V17.4189H98.4671V25.7603C98.4671 27.3098 98.2817 28.8592 98.2817 28.8592H98.3612C98.3612 28.8592 99.2087 27.4905 99.9238 26.5092L102.678 22.9196H106.916L102.572 27.9037ZM91.21 27.4389C91.21 24.3141 89.6473 22.6097 87.1576 22.6097C85.0388 22.6097 83.9263 23.8234 83.2907 24.9855H83.2112L83.3966 22.9196H79.7945V35.4961H83.3966V28.0328C83.3966 26.5867 84.2707 25.5795 85.6214 25.5795C86.9722 25.5795 87.5549 26.4575 87.5549 28.1361V35.4961H91.1835L91.21 27.4389ZM76.3249 19.4591C76.3249 20.5954 75.3979 21.4218 74.2325 21.4218C73.0671 21.4218 72.1401 20.5954 72.1401 19.4591C72.1401 18.3228 73.0671 17.4964 74.2325 17.4964C75.4244 17.4448 76.3249 18.2712 76.3249 19.4591ZM72.405 35.4961H76.0335V22.9196H72.405V35.4961ZM66.1543 31.984C66.1543 30.9768 64.7241 30.7703 63.0554 30.3054C61.122 29.8147 58.6853 28.8592 58.6853 26.4575C58.6853 24.0817 61.016 22.5839 63.7706 22.5839C66.3397 22.5839 68.6969 23.7718 69.6769 25.4504L66.5781 27.1548C66.2602 26.0444 65.3067 25.1663 63.8765 25.1663C62.9495 25.1663 62.1814 25.5537 62.1814 26.3026C62.1814 27.2581 63.8765 27.3614 65.7835 27.9554C67.7964 28.5752 69.6504 29.479 69.6504 31.7774C69.6504 34.3082 67.2402 35.806 64.4592 35.806C61.4398 35.806 59.0561 34.5665 57.9966 32.5521L61.1485 30.8219C61.5457 32.1906 62.6846 33.2236 64.4062 33.2236C65.4392 33.2236 66.1543 32.8104 66.1543 31.984ZM54.6859 17.5222H51.0573V32.0098C51.0573 33.3011 51.3487 34.2566 51.9049 34.8505C52.4876 35.4445 53.3881 35.7286 54.6329 35.7286C55.0567 35.7286 55.507 35.6769 55.9307 35.5994C56.381 35.4961 56.7253 35.367 57.0167 35.2121L57.3345 32.8362C57.0431 32.9395 56.8048 33.017 56.5664 33.0428C56.3545 33.0945 56.0896 33.0945 55.7983 33.0945C55.3216 33.0945 55.1097 32.9653 54.9507 32.7329C54.7654 32.5005 54.6859 32.0873 54.6859 31.4933V17.5222ZM42.6083 25.1405C41.284 25.1405 40.1981 26.0702 39.9067 27.7746H44.992C45.0185 26.2768 44.0121 25.1405 42.6083 25.1405ZM48.1968 30.1505H39.8538C40.0127 32.1906 41.1781 33.1978 42.6878 33.1978C44.0386 33.1978 44.9656 32.3197 45.1774 31.1318L48.2233 32.8104C47.3228 34.4115 45.3893 35.806 42.6878 35.806C39.0857 35.806 36.4371 33.3527 36.4371 29.2208C36.4371 25.1147 39.1387 22.6355 42.6083 22.6355C46.078 22.6355 48.3822 25.0372 48.3822 28.446C48.3558 29.4532 48.1968 30.1505 48.1968 30.1505ZM29.7362 35.4961H33.4972V18.1937H29.7362V25.0372H22.6644V18.2195H18.9034V35.4961H22.6644V28.3427H29.7362V35.4961Z"
+                              fill="black"/>
+                    </svg>
+                </div>
+                <div style="padding-left: 16px; padding-top: 12px; padding-bottom: 26px; font-family: Arial; font-size: 16px;">
+                    Haitaton
+                </div>
+            </div>
+        </mj-raw>
+        <mj-divider border-color="#999898" border-width="1px" padding="0px 24px 16px 24px"/>
+        <mj-text padding="0px 24px 0px 24px" color="#000000" font-family="Arial" font-size="16px">© Helsingin
+            kaupunki 2023
+        </mj-text>
+    </mj-column>
+</mj-section>
+
diff --git a/services/hanke-service/src/main/resources/email/template/header-content.mjml b/services/hanke-service/src/main/resources/email/template/header-content.mjml
@@ -0,0 +1,22 @@
+<mj-section>
+    <mj-column>
+        <mj-raw>
+            <div style="display: flex; align-items: center;">
+                <div style="padding-left: 24px; padding-top: 16px">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="131" height="60" viewBox="0 0 131 60"
+                         fill="none">
+                        <path fill-rule="evenodd" clip-rule="evenodd"
+                              d="M126.726 3.75164V38.251C126.726 44.836 121.268 50.2143 114.544 50.2143H77.4422C72.9858 50.2143 68.7667 51.8146 65.4706 54.7792C62.1744 51.8408 57.9554 50.2143 53.499 50.2143H16.3185C9.64705 50.2143 4.24137 44.8623 4.24137 38.251V3.75164H126.726ZM67.4483 58.0586C70.1115 55.4088 73.6714 53.9397 77.4686 53.9397H114.544C123.325 53.9397 130.471 46.9086 130.471 38.251V0H0.470581V38.2247C0.470581 46.8824 7.56389 53.9134 16.3185 53.9134H53.499C57.2698 53.9134 60.8296 55.3826 63.5193 58.0324L65.4969 60L67.4483 58.0586Z"
+                              fill="black"/>
+                        <path fill-rule="evenodd" clip-rule="evenodd"
+                              d="M113.008 19.4591C113.008 20.5954 112.081 21.4218 110.915 21.4218C109.75 21.4218 108.823 20.5954 108.823 19.4591C108.823 18.3228 109.75 17.4964 110.915 17.4964C112.081 17.4448 113.008 18.2712 113.008 19.4591ZM109.088 35.4961H112.717V22.9196H109.088V35.4961ZM102.572 27.9037L107.313 35.4961H103.367L100.189 30.4604L98.4671 32.578V35.4961H94.865V17.4189H98.4671V25.7603C98.4671 27.3098 98.2817 28.8592 98.2817 28.8592H98.3612C98.3612 28.8592 99.2087 27.4905 99.9238 26.5092L102.678 22.9196H106.916L102.572 27.9037ZM91.21 27.4389C91.21 24.3141 89.6473 22.6097 87.1576 22.6097C85.0388 22.6097 83.9263 23.8234 83.2907 24.9855H83.2112L83.3966 22.9196H79.7945V35.4961H83.3966V28.0328C83.3966 26.5867 84.2707 25.5795 85.6214 25.5795C86.9722 25.5795 87.5549 26.4575 87.5549 28.1361V35.4961H91.1835L91.21 27.4389ZM76.3249 19.4591C76.3249 20.5954 75.3979 21.4218 74.2325 21.4218C73.0671 21.4218 72.1401 20.5954 72.1401 19.4591C72.1401 18.3228 73.0671 17.4964 74.2325 17.4964C75.4244 17.4448 76.3249 18.2712 76.3249 19.4591ZM72.405 35.4961H76.0335V22.9196H72.405V35.4961ZM66.1543 31.984C66.1543 30.9768 64.7241 30.7703 63.0554 30.3054C61.122 29.8147 58.6853 28.8592 58.6853 26.4575C58.6853 24.0817 61.016 22.5839 63.7706 22.5839C66.3397 22.5839 68.6969 23.7718 69.6769 25.4504L66.5781 27.1548C66.2602 26.0444 65.3067 25.1663 63.8765 25.1663C62.9495 25.1663 62.1814 25.5537 62.1814 26.3026C62.1814 27.2581 63.8765 27.3614 65.7835 27.9554C67.7964 28.5752 69.6504 29.479 69.6504 31.7774C69.6504 34.3082 67.2402 35.806 64.4592 35.806C61.4398 35.806 59.0561 34.5665 57.9966 32.5521L61.1485 30.8219C61.5457 32.1906 62.6846 33.2236 64.4062 33.2236C65.4392 33.2236 66.1543 32.8104 66.1543 31.984ZM54.6859 17.5222H51.0573V32.0098C51.0573 33.3011 51.3487 34.2566 51.9049 34.8505C52.4876 35.4445 53.3881 35.7286 54.6329 35.7286C55.0567 35.7286 55.507 35.6769 55.9307 35.5994C56.381 35.4961 56.7253 35.367 57.0167 35.2121L57.3345 32.8362C57.0431 32.9395 56.8048 33.017 56.5664 33.0428C56.3545 33.0945 56.0896 33.0945 55.7983 33.0945C55.3216 33.0945 55.1097 32.9653 54.9507 32.7329C54.7654 32.5005 54.6859 32.0873 54.6859 31.4933V17.5222ZM42.6083 25.1405C41.284 25.1405 40.1981 26.0702 39.9067 27.7746H44.992C45.0185 26.2768 44.0121 25.1405 42.6083 25.1405ZM48.1968 30.1505H39.8538C40.0127 32.1906 41.1781 33.1978 42.6878 33.1978C44.0386 33.1978 44.9656 32.3197 45.1774 31.1318L48.2233 32.8104C47.3228 34.4115 45.3893 35.806 42.6878 35.806C39.0857 35.806 36.4371 33.3527 36.4371 29.2208C36.4371 25.1147 39.1387 22.6355 42.6083 22.6355C46.078 22.6355 48.3822 25.0372 48.3822 28.446C48.3558 29.4532 48.1968 30.1505 48.1968 30.1505ZM29.7362 35.4961H33.4972V18.1937H29.7362V25.0372H22.6644V18.2195H18.9034V35.4961H22.6644V28.3427H29.7362V35.4961Z"
+                              fill="black"/>
+                    </svg>
+                </div>
+                <div style="padding-left: 16px; padding-top: 12px; font-family: Arial; font-size: 24px;">
+                    Haitaton
+                </div>
+            </div>
+        </mj-raw>
+    </mj-column>
+</mj-section>