Merge pull request #186 from ibi-group/update-email-templates

refactor: reword and add styling to user emails
ibi-group · Sep 5, 2023 · 94274fa · 94274fa
2 parents 9c63b15 + 47fe464
commit 94274fa
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 12 deletions.
diff --git a/src/main/resources/templates/BaseEmail.ftl b/src/main/resources/templates/BaseEmail.ftl
@@ -3,9 +3,25 @@
     emails that use this must implement a macro called `EmailBody` and the whole html email will
     eventually get rendered by the statement <@HtmlEmail/>.
 -->
+<style>
+    body { 
+        padding: 1em;
+    }
+
+    h1 {
+        font-size: 18px;
+        font-weight: 600;
+    }
+
+    small {
+        color: #515151
+    }
+</style>
 
 <#macro HtmlEmail>
-<div>
-    <@EmailBody/>
-</div>
+<body>
+    <div>
+        <@EmailBody/>
+    </div>
+</body>
 </#macro>
diff --git a/src/main/resources/templates/MonitoredTripHtml.ftl b/src/main/resources/templates/MonitoredTripHtml.ftl
@@ -7,13 +7,13 @@
 
 <#macro EmailMain>
     <div>
-        <p>Your trip has the following notifications:</p>
+        <h1>Your trip has the following notifications:</h1>
         <ul>
         <#list notifications as notification>
           <li>${notification}</li>
         </#list>
         </ul>
-        <p>View trip <a href="${OTP_UI_URL}${TRIPS_PATH}/${tripId}">here</a>.
+        <p>View all of your saved trips in <a href="${OTP_UI_URL}${TRIPS_PATH}/${tripId}">${OTP_UI_NAME}</a>.</p>
     </div>
 </#macro>
 

diff --git a/src/main/resources/templates/OtpUserContainer.ftl b/src/main/resources/templates/OtpUserContainer.ftl
@@ -7,19 +7,16 @@
 -->
 
 <#macro EmailBody>
-<#-- header -->
-<div>
-    <h2>An email from the ${OTP_UI_NAME}</h2>
-</div>
 <#-- main -->
 <div>
     <@EmailMain/>
 </div>
 <#-- footer -->
+<hr/>
 <div>
     <p>
         <small>
-            Manage Subscriptions <a href="${OTP_UI_URL}/#/account">here</a>.
+            You're receiving this email because you're subscribed to notifications through ${OTP_UI_NAME}. You can manage that subscription <a href="${OTP_UI_URL}/#/account">here</a>.
         </small>
     </p>
 </div>

diff --git a/...ots/org/opentripplanner/middleware/utils/TemplateUtilsTest/Event_Errors_Html_Email-0.json b/...ots/org/opentripplanner/middleware/utils/TemplateUtilsTest/Event_Errors_Html_Email-0.json
@@ -1 +1 @@
-"\n\n\n<div>\n<div>\n    <h2>An email from the OTP Admin Dashboard</h2>\n</div>\n<div>\n    <div>\n        <h3>test subject</h3>\n        <p>\n            Visit the\n            <a href=\"https://otp-admin-ui.now.sh?dashboard=errors\">OTP Admin Dashboard</a>\n            to view new errors.\n        </p>\n    </div>\n</div>\n<div>\n    <p>\n        <small>\n            Manage subscriptions <a href=\"https://otp-admin-ui.now.sh/account\">here</a>.\n        </small>\n    </p>\n</div>\n</div>\n"
+"<style>\n    body { \n        padding: 1em;\n    }\n\n    h1 {\n        font-size: 18px;\n        font-weight: 600;\n    }\n\n    small {\n        color: #515151\n    }\n</style>\n\n\n\n\n<body>\n    <div>\n<div>\n    <h2>An email from the OTP Admin Dashboard</h2>\n</div>\n<div>\n    <div>\n        <h3>test subject</h3>\n        <p>\n            Visit the\n            <a href=\"https://otp-admin-ui.now.sh?dashboard=errors\">OTP Admin Dashboard</a>\n            to view new errors.\n        </p>\n    </div>\n</div>\n<div>\n    <p>\n        <small>\n            Manage subscriptions <a href=\"https://otp-admin-ui.now.sh/account\">here</a>.\n        </small>\n    </p>\n</div>\n    </div>\n</body>\n"
diff --git a/...s/org/opentripplanner/middleware/utils/TemplateUtilsTest/Monitored_Trip_HTML_Email-0.json b/...s/org/opentripplanner/middleware/utils/TemplateUtilsTest/Monitored_Trip_HTML_Email-0.json
@@ -1 +1 @@
-"\n\n\n<div>\n<div>\n    <h2>An email from the Trip Planner</h2>\n</div>\n<div>\n    <div>\n        <p>Your trip has the following notifications:</p>\n        <ul>\n          <li>Test notification.</li>\n          <li>Another notification.</li>\n        </ul>\n        <p>View trip <a href=\"https://plan.example.com/#/account/trips/18f642d5-f7a8-475a-9469-800129e6c0b3\">here</a>.\n    </div>\n</div>\n<div>\n    <p>\n        <small>\n            Manage Subscriptions <a href=\"https://plan.example.com/#/account\">here</a>.\n        </small>\n    </p>\n</div>\n</div>\n"
+"<style>\n    body { \n        padding: 1em;\n    }\n\n    h1 {\n        font-size: 18px;\n        font-weight: 600;\n    }\n\n    small {\n        color: #515151\n    }\n</style>\n\n\n\n\n<body>\n    <div>\n<div>\n    <div>\n        <h1>Your trip has the following notifications:</h1>\n        <ul>\n          <li>Test notification.</li>\n          <li>Another notification.</li>\n        </ul>\n        <p>View all of your saved trips in <a href=\"https://plan.example.com/#/account/trips/18f642d5-f7a8-475a-9469-800129e6c0b3\">Trip Planner</a>.</p>\n    </div>\n</div>\n<hr/>\n<div>\n    <p>\n        <small>\n            You're receiving this email because you're subscribed to notifications through Trip Planner. You can manage that subscription <a href=\"https://plan.example.com/#/account\">here</a>.\n        </small>\n    </p>\n</div>\n    </div>\n</body>\n"