improvement(MonitoredTripHtml): Render line endings in HTML email

ibi-group · Jan 2, 2024 · 56761c1 · 56761c1
1 parent 78d917b
commit 56761c1
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 17 deletions.
diff --git a/src/main/java/org/opentripplanner/middleware/otp/response/LocalizedAlert.java b/src/main/java/org/opentripplanner/middleware/otp/response/LocalizedAlert.java
@@ -23,6 +23,16 @@ public String getAlertDescriptionText() {
         return alertDescriptionText;
     }
 
+    /**
+     * Line returns are not preserved if using the HTML email renderer,
+     * so we insert line returns as line-break (br) tags to match the itinerary-body UI.
+     */
+    public String getAlertDescriptionForHtml() {
+        return alertDescriptionText != null
+            ? alertDescriptionText.replace("\n", "<br/>\n")
+            : "";
+    }
+
     @Override
     public int hashCode() {
         return Objects.hash(alertHeaderText, alertDescriptionText, alertUrl, effectiveStartDate, effectiveEndDate);

diff --git a/src/main/resources/templates/MonitoredTripHtml.ftl b/src/main/resources/templates/MonitoredTripHtml.ftl
@@ -9,23 +9,23 @@
 <#macro EmailMain>
     <div>
         <style>
-ul.alerts {
-    padding: 0;
-}
-ul.alerts li {
-    background-color: #ddd;
-    list-style-type: none;
-    margin-bottom: 10px;
-    padding: 5px 5px 5px 2em;
-    text-indent: -1.5em;
-}
-ul.alerts.resolved li {
-    background-color: #99ddff;
-}
+            ul.alerts {
+                padding: 0;
+            }
+            ul.alerts li {
+                background-color: #ddd;
+                list-style-type: none;
+                margin-bottom: 10px;
+                padding: 5px 5px 5px 2em;
+                text-indent: -1.5em;
+            }
+            ul.alerts.resolved li {
+                background-color: #99ddff;
+            }
         </style>
         <h1>Your trip has the following notifications:</h1>
 
-         <#list notifications as notification>
+        <#list notifications as notification>
             <#if notification.type == "INITIAL_REMINDER">
                 <p>${notification.body}</p>
             </#if>
@@ -40,7 +40,7 @@ ul.alerts.resolved li {
                                 <#list notification.newAlertsNotification.alerts as alert>
                                     <li>
                                         <strong>${notification.newAlertsNotification.icon} ${alert.alertHeaderText}</strong><br/>
-                                        ${alert.alertDescriptionText}
+                                        ${alert.alertDescriptionForHtml}
                                     </li>
                                 </#list>
                             </ul>
@@ -52,7 +52,7 @@ ul.alerts.resolved li {
                                 <#list notification.resolvedAlertsNotification.alerts as alert>
                                     <li>
                                         <strong>${notification.resolvedAlertsNotification.resolvedIcon} ${alert.alertHeaderText}</strong><br/>
-                                        ${alert.alertDescriptionText}
+                                        ${alert.alertDescriptionForHtml}
                                     </li>
                                 </#list>
                             </ul>

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 @@
-"<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        <style>\nul.alerts {\n    padding: 0;\n}\nul.alerts li {\n    background-color: #ddd;\n    list-style-type: none;\n    margin-bottom: 10px;\n    padding: 5px 5px 5px 2em;\n    text-indent: -1.5em;\n}\nul.alerts.resolved li {\n    background-color: #99ddff;\n}\n        </style>\n        <h1>Your trip has the following notifications:</h1>\n\n                <p>This is the initial reminder text</p>\n\n        <ul>\n                    <li>This is the departure delay text</li>\n        </ul>\n\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"
+"<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        <style>\n            ul.alerts {\n                padding: 0;\n            }\n            ul.alerts li {\n                background-color: #ddd;\n                list-style-type: none;\n                margin-bottom: 10px;\n                padding: 5px 5px 5px 2em;\n                text-indent: -1.5em;\n            }\n            ul.alerts.resolved li {\n                background-color: #99ddff;\n            }\n        </style>\n        <h1>Your trip has the following notifications:</h1>\n\n                <p>This is the initial reminder text</p>\n\n        <ul>\n                    <li>This is the departure delay text</li>\n        </ul>\n\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"
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		"<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 <style>\nul.alerts {\n padding: 0;\n}\nul.alerts li {\n background-color: #ddd;\n list-style-type: none;\n margin-bottom: 10px;\n padding: 5px 5px 5px 2em;\n text-indent: -1.5em;\n}\nul.alerts.resolved li {\n background-color: #99ddff;\n}\n </style>\n <h1>Your trip has the following notifications:</h1>\n\n <p>This is the initial reminder text</p>\n\n <ul>\n <li>This is the departure delay text</li>\n </ul>\n\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"
		"<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 <style>\n ul.alerts {\n padding: 0;\n }\n ul.alerts li {\n background-color: #ddd;\n list-style-type: none;\n margin-bottom: 10px;\n padding: 5px 5px 5px 2em;\n text-indent: -1.5em;\n }\n ul.alerts.resolved li {\n background-color: #99ddff;\n }\n </style>\n <h1>Your trip has the following notifications:</h1>\n\n <p>This is the initial reminder text</p>\n\n <ul>\n <li>This is the departure delay text</li>\n </ul>\n\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"