fix: use pngs for the goal reminder email banner and remove redundant unsubscribe link from the email (#29215)

* fix: use pngs for the goal reminder email banner and remove redundant unsubscribe link

* fix: update

cms/envs/common.py

@@ -1677,6 +1677,9 @@ INSTALLED_APPS = [
 
     # Content Library LTI 1.3 Support.
     'pylti1p3.contrib.django.lti1p3_tool_config',
+
+    # For edx ace template tags
+    'edx_ace',
 ]
 
 

lms/djangoapps/course_goals/management/commands/goal_reminder_email.py

@@ -51,13 +51,27 @@ def send_ace_message(goal):
     site = Site.objects.get_current()
     message_context = get_base_template_context(site)
 
-    course_home_url = get_learning_mfe_home_url(course_key=goal.course_key)
+    course_home_url = get_learning_mfe_home_url(course_key=goal.course_key, view_name='home')
 
     goals_unsubscribe_url = settings.LEARNING_MICROFRONTEND_URL + reverse(
         'course-home:unsubscribe-from-course-goal',
         kwargs={'token': goal.unsubscribe_token}
     )
 
+    language = get_user_preference(user, LANGUAGE_KEY)
+
+    # Code to allow displaying different banner images for different languages
+    # However, we'll likely want to develop a better way to do this within edx-ace
+    image_url = settings.STATIC_URL
+    if image_url:
+        # If the image url is a relative url prepend the LMS ROOT
+        if 'http' not in image_url:
+            image_url = settings.LMS_ROOT_URL + settings.STATIC_URL
+        image_url += 'images/'
+
+        if language and language in ['es', 'es-419']:
+            image_url += 'spanish-'
+
     message_context.update({
         'email': user.email,
         'platform_name': configuration_helpers.get_value('PLATFORM_NAME', settings.PLATFORM_NAME),
@@ -65,15 +79,16 @@ def send_ace_message(goal):
         'days_per_week': goal.days_per_week,
         'course_url': course_home_url,
         'goals_unsubscribe_url': goals_unsubscribe_url,
-        'image_url': settings.LMS_ROOT_URL + settings.STATIC_URL,
+        'image_url': image_url,
         'unsubscribe_url': None,  # We don't want to include the default unsubscribe link
+        'omit_unsubscribe_link': True,
     })
 
     msg = Message(
         name="goalreminder",
         app_label="course_goals",
         recipient=Recipient(user.id, user.email),
-        language=get_user_preference(user, LANGUAGE_KEY),
+        language=language,
         context=message_context,
         options={'transactional': True},
     )

lms/envs/common.py

@@ -3188,6 +3188,9 @@ INSTALLED_APPS = [
 
     # Content Library LTI 1.3 Support.
     'pylti1p3.contrib.django.lti1p3_tool_config',
+
+    # For edx ace template tags
+    'edx_ace',
 ]
 
 ######################### CSRF #########################################

lms/templates/goal_reminder_banner.html

@@ -1,59 +1,20 @@
-{% load i18n %}
 {# email client support for style sheets is pretty spotty, so we have to inline all of these styles #}
-{# we're using important below to override inline styles and my understanding is for email clients where media queries do not work, they'll simply see the desktop css on their phone #}
 <style>
-.goals-two-color:first-line { color: white !important;}
-.goals-two-color {
-    font-size: 2.686rem;
-    line-height: 3rem;
-    margin: 4.5rem 0 3.44rem 1.0625rem;
-    padding-left: 1.25rem;
-    width: 18.75rem;
-    top: 100px;
-}
-@media only screen and (max-width: 575px) {
-  .goals-two-color {
-    font-size: 2.2rem;
-    line-height: 2rem;
-    width: 15rem;
-  }
-}
 @media only screen and (max-width: 456px) {
-  .goals-two-color {
-    font-size: 1.8rem;
-    line-height: 1.8rem;
-    width: 12.5rem;
-    margin: 2.25rem 0;
-    top: 7.5rem;
-  }
-}
-@media only screen and (max-width: 375px) {
-  .goals-two-color {
-    font-size: 1.35rem;
-    line-height: 1.65rem;
-    top: 6.875rem;
-  }
-}
-@media only screen and (max-width: 325px) {
-  .goals-two-color {
-    top: 6.25rem;
+  .goals-banner-div {
+    background-image: url('{{image_url}}goalreminder-mobile-hero.png') !important;
   }
 }
 </style>
-<div class="goals-banner-wrapper-div" style="width:inherit; font-family: Inter, Arial, sans-serif;">
-    <div class="goals-banner-div" style="width: inherit; margin-left: -1.25rem; margin-top: -1rem;">
-      <img src="{{image_url}}images/goalreminder-desktop-hero.png" style="
-          width: calc(100% + 20px);
-          height: auto;
-      ">
-        <h2 class="goals-two-color" style="
-          color: #F0CD01;
-          font-weight: bold;
-          position: absolute;
-        ">
-            {% filter force_escape %}{% blocktrans %}
-                You’re almost there!
-            {% endblocktrans %}{% endfilter %}
-        </h2>
-    </div>
-</div>
+{% if image_url %}
+<div class="goals-banner-div" style="
+    margin-left: -1.25rem;
+    margin-top: -1rem;
+    width: calc(100% + 20px);
+    height: 0;
+    padding-top: 41%;
+    background-image: url('{{image_url}}goalreminder-desktop-hero.png');
+    background-size: contain;
+    background-repeat: no-repeat;">
+</div>
+{% endif %}

openedx/core/djangoapps/ace_common/templates/ace_common/edx_ace/common/base_body.html

@@ -1,5 +1,8 @@
 {% load i18n %}
+<!-- These tags come from the ace_common djangoapp in edx ace -->
 {% load ace %}
+<!-- These tags come from the edx_ace app within the edx_ace repository -->
+{% load acetags %}
 
 {% get_current_language as LANGUAGE_CODE %}
 {% get_current_language_bidi as LANGUAGE_BIDI %}
@@ -159,7 +162,8 @@
                     <tr>
                         <!-- Actions -->
                         <td style="padding-bottom: 20px;">
-                            {% for action_link_url, action_link_text in channel.action_links %}
+                            {% get_action_links channel omit_unsubscribe_link=omit_unsubscribe_link as action_links %}
+                            {% for action_link_url, action_link_text in action_links %}
                                 <p>
                                     <a href="{{ action_link_url }}" style="color: #005686">
                                         <font color="#005686"><b>{{ action_link_text }}</b></font>

requirements/edx/base.txt

@@ -384,7 +384,7 @@ drf-jwt==1.19.1
     # via edx-drf-extensions
 drf-yasg==1.20.0
     # via edx-api-doc-tools
-edx-ace==1.3.1
+edx-ace==1.4.0
     # via -r requirements/edx/base.in
 edx-api-doc-tools==1.5.0
     # via -r requirements/edx/base.in

requirements/edx/development.txt

@@ -489,7 +489,7 @@ drf-yasg==1.20.0
     # via
     #   -r requirements/edx/testing.txt
     #   edx-api-doc-tools
-edx-ace==1.3.1
+edx-ace==1.4.0
     # via -r requirements/edx/testing.txt
 edx-api-doc-tools==1.5.0
     # via -r requirements/edx/testing.txt

requirements/edx/testing.txt

@@ -470,7 +470,7 @@ drf-yasg==1.20.0
     # via
     #   -r requirements/edx/base.txt
     #   edx-api-doc-tools
-edx-ace==1.3.1
+edx-ace==1.4.0
     # via -r requirements/edx/base.txt
 edx-api-doc-tools==1.5.0
     # via -r requirements/edx/base.txt