feat: added content block in email notification template

openedx · Aug 28, 2024 · d4a66d3 · d4a66d3
1 parent e615540
commit d4a66d3
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 9 deletions.
diff --git a/openedx/core/djangoapps/notifications/email/utils.py b/openedx/core/djangoapps/notifications/email/utils.py
@@ -4,6 +4,7 @@
 import datetime
 import json
 
+from bs4 import BeautifulSoup
 from django.conf import settings
 from django.contrib.auth import get_user_model
 from django.shortcuts import get_object_or_404
@@ -195,6 +196,18 @@ def get_time_ago(datetime_obj):
     return f"{days_diff}d"
 
 
+def add_zero_margin_to_root(html_string):
+    """
+    Adds to zero margin to root element of html string
+    """
+    soup = BeautifulSoup(html_string, 'html.parser')
+    element = soup.find()
+    if not element:
+        return html_string
+    element['style'] = "margin: 0;"
+    return str(soup)
+
+
 def add_additional_attributes_to_notifications(notifications, courses_data=None):
     """
     Add attributes required for email content to notification instance
@@ -214,6 +227,8 @@ def add_additional_attributes_to_notifications(notifications, courses_data=None)
         notification.course_name = course_info.get('name', '')
         notification.icon = get_icon_url_for_notification_type(notification_type)
         notification.time_ago = get_time_ago(notification.created)
+        notification.email_content = add_zero_margin_to_root(notification.content)
+        notification.details = add_zero_margin_to_root(notification.content_context.get('email_content', ''))
     return notifications
 
 

diff --git a/openedx/core/djangoapps/notifications/templates/notifications/digest_content.html b/openedx/core/djangoapps/notifications/templates/notifications/digest_content.html
@@ -1,6 +1,3 @@
-<style>
-    .notification-content > p { margin: 0; padding: 0}
-</style>
 {% for notification_app in email_content %}
     <h3 style="font-size: 1.375rem; font-weight:700; line-height:28px; margin: 0.75rem 0 0;">
         {{ notification_app.title }}
@@ -32,11 +29,15 @@ <h3 style="font-size: 1.375rem; font-weight:700; line-height:28px; margin: 0.75r
                             />
                         </td>
                         <td class="notification-content" width="100%" align="left" valign="top" style=" padding: 1rem 1rem 1rem 0.5rem">
-                            <p style="font-size: 0.875rem; font-weight:400; line-height:24px; color:#454545; margin: 0;">
-                                {{ notification.content | truncatechars_html:600 | safe }}
-                            </p>
-                            <p style="height: 0.5rem; margin: 0"></p>
-                            <p style="color:#707070; margin: 0">
+                            <blockquote style="font-size: 0.875rem; font-weight:400; line-height:24px; color:#454545; margin: 0 0 0.5rem 0;">
+                                {{ notification.email_content | truncatechars_html:600 | safe }}
+                            </blockquote>
+                            {% if notification.details %}
+                                <blockquote style="color:#454545; margin: 0 0 0.5rem 0; font-size: 14px; font-style: normal; font-weight: 400; line-height: 24px;">
+                                    {{ notification.details | safe }}
+                                </blockquote>
+                            {% endif %}
+                            <blockquote style="color:#707070; margin: 0">
                                 <span style="float: left">
                                     <span>{{ notification.course_name }}</span>
                                     <span style="padding: 0 0.375rem">{{ "&middot;"|safe }}</span>
@@ -47,7 +48,7 @@ <h3 style="font-size: 1.375rem; font-weight:700; line-height:28px; margin: 0.75r
                                         View
                                     </a>
                                 </span>
-                            </p>
+                            </blockquote>
                         </td>
                     </tr>
                 {% endfor %}