feat: added goal reminder new UI

This commit is contained in:
sundasnoreen12
2025-06-19 12:05:17 +05:00
parent 9d6d8088b8
commit 8e1f06aa59
6 changed files with 468 additions and 119 deletions

View File

@@ -92,6 +92,7 @@ def send_ace_message(goal, session_id):
message_context.update({
'email': user.email,
'user_name': user.username,
'platform_name': configuration_helpers.get_value('PLATFORM_NAME', settings.PLATFORM_NAME),
'course_name': course_name,
'course_id': str(goal.course_key),
@@ -103,6 +104,8 @@ def send_ace_message(goal, session_id):
'omit_unsubscribe_link': True,
'courses_url': getattr(settings, 'ACE_EMAIL_COURSES_URL', None),
'programs_url': getattr(settings, 'ACE_EMAIL_PROGRAMS_URL', None),
'goal_reminder_banner_url': settings.GOAL_REMINDER_BANNER_URL,
'goal_reminder_profile_url': settings.GOAL_REMINDER_PROFILE_URL,
})
options = {

View File

@@ -0,0 +1,90 @@
{% load django_markup %}
{% 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 %}
{# This is preview text that is visible in the inbox view of many email clients but not visible in the actual #}
{# email itself. #}
<div lang="{{ LANGUAGE_CODE|default:"en" }}" style="
display:none;
font-size:1px;
line-height:1px;
max-height:0px;
max-width:0px;
opacity:0;
overflow:hidden;
visibility:hidden;
">
{% block preview_text %}{% endblock %}
</div>
{% for image_src in channel.tracker_image_sources %}
<img src="{image_src}" alt="" role="presentation" aria-hidden="true" />
{% endfor %}
{% google_analytics_tracking_pixel %}
<div bgcolor="#F2F0EF" lang="{{ LANGUAGE_CODE|default:"en" }}" dir="{{ LANGUAGE_BIDI|yesno:"rtl,ltr" }}" style="
margin: 0;
padding: 0;
min-width: 100%;
">
<!-- Hack for outlook 2010, which wants to render everything in Times New Roman -->
<!--[if mso]>
<style type="text/css">
body, table, td {font-family: Arial, sans-serif !important;}
</style>
<![endif]-->
<!--[if (gte mso 9)|(IE)]>
<table role="presentation" width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<!-- CONTENT -->
<table class="content" role="presentation" align="center" cellpadding="0" cellspacing="0" border="0" bgcolor="#fbfaf9" width="100%"
{% block table_style %}
style="
font-family: Arial, sans-serif;
font-size: 1em;
max-width: 600px;
"
{% endblock %}
>
<tr>
<!-- HEADER -->
<td class="header" style="background-color: #F2F0EF;">
{% block header %}{% endblock %}
</td>
</tr>
<tr>
<!-- MAIN -->
<td class="main" bgcolor="#ffffff">
{% block content %}{% endblock %}
</td>
</tr>
<tr>
<!-- FOOTER -->
<td class="footer" style="padding: 30px; background-color: #F2F0EF;">
{% block footer %}{% endblock %}
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</div>

View File

@@ -1,4 +1,5 @@
{% extends 'ace_common/edx_ace/common/base_body.html' %}
{% extends 'course_goals/edx_ace/goalreminder/email/base_body.html' %}
{% load i18n %}
{% load django_markup %}
{% load static %}
@@ -21,119 +22,150 @@
{# 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 #}
<table style="width: 100%; min-width: 325px;" align="left" border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td>
{% include "goal_reminder_banner.html" %}
<tr>
<td height="36" align="center" valign="middle" style="margin: 0; font-size: 0px; line-height: 0px;">&nbsp;</td>
</tr>
<table class="goal-reminder-body-wrapper" style="width:inherit; font-size: 14px; font-size: 0.875rem; padding: 0 20px 0 5%; margin: 0 20px 0 17px; margin: 0 1.25rem 0 1.0625rem;">
<tr>
<h3 style="
font-size: 25px;
font-size: 1.563rem;
font-style: normal;
font-weight: 700;
line-height: 28px;
line-height: 1.75rem;
text-align: left;
color: black;
margin-top: 20px;
margin-bottom: 20px;
">
{% filter force_escape %}{% blocktrans %}
Theres still time to reach your goal
{% endblocktrans %}{% endfilter %}
</h3>
</tr>
<tr>
<p style="color: rgba(0,0,0,.75); font-size: 16px; font-size: 1rem; margin: 0; padding-top: 20px; padding-bottom: 14px">
{% filter force_escape %}
{% autoescape off %}
{% blocktrans count count=days_per_week asvar goal_text %}
You set a goal of learning {start_bold}{{days_per_week}} time a week in {{course_name}}{end_bold}. Youre not quite there, but there's still time to reach that goal!
{% plural %}
You set a goal of learning {start_bold}{{days_per_week}} times a week in {{course_name}}{end_bold}. You're not quite there, but there's still time to reach that goal!
{% endblocktrans %}
{% endautoescape %}
{% endfilter %}
{% interpolate_html goal_text start_bold='<b>'|safe end_bold='</b>'|safe %}
</p>
</tr>
<tr style="padding-top: 16px;">
<a href="{{course_url}}" target="_blank" style="
display: inline-block;
text-decoration:none !important; text-decoration:none;
color: white;
border-color: #D23228;
border-style: solid;
border-width: 8px 12px;
border-width: 0.5rem 0.75rem;
background: #D23228;
font-size: 16px;
font-size: 1rem;
">
<p style="margin: 0;">
{% filter force_escape %}{% blocktrans %}
Jump back in
{% endblocktrans %}{% endfilter %}
<table width="100%" align="left" border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td>
<img
src="{{ goal_reminder_banner_url }}"
style="margin-bottom: 16px; width: 600px;"
width= "600"
height="265"
alt="{% trans 'Theres still time to reach your goal' as tmsg %}{{ tmsg | force_escape }}"
/>
</td>
</tr>
<tr>
<td>
<p style="margin-top: 16px; color: #1F453D; font-family: Arial; font-size: 30px; font-weight: 700; line-height: 36px; margin-left: 30px; margin-right: 30px;">
{% blocktrans with user_name=user_name %}
Youre almost there, {{ user_name }}!
{% endblocktrans %}
</p>
<p style="margin-top: 16px; color: #000000; font-family: Arial; font-size: 16px; font-weight: 400; line-height: 24px; margin-left: 30px; margin-right: 30px;">
{% filter force_escape %}
{% autoescape off %}
{% blocktrans count count=days_per_week asvar goal_text %}
You set a goal of learning {start_bold}{{days_per_week}} time a week in {{course_name}}{end_bold}. Now its up to you to make those goals a reality.
{% plural %}
You set a goal of learning {start_bold}{{days_per_week}} times a week in {{course_name}}{end_bold}. Now its up to you to make those goals a reality.
{% endblocktrans %}
{% endautoescape %}
{% endfilter %}
{% interpolate_html goal_text start_bold='<b>'|safe end_bold='</b>'|safe %}
</p>
</td>
</tr>
<tr style="height: 32px;">
<td style="padding-top: 1rem;" class="course-text">
<a href="{{course_url}}" target="_blank"
style="
text-decoration: none;
color: white;
background-color: #ED5C13;
text-align: center;
vertical-align: middle;
user-select: none;
font-weight: 500;
font-size: 12px;
text-decoration-style: solid;
display: inline-flex;
flex-direction: row;
border-radius: 30.22px;
padding: 6px 11px;
margin-left: 30px;
">
{% filter force_escape %}{% blocktrans %}
Jump back in
{% endblocktrans %}{% endfilter %}
</a>
</td>
</tr>
<tr>
<td style="height: 32px; line-height: 32px; font-size: 1px;">
&nbsp;
</td>
</tr>
<tr style="background-color: #F3F1ED;">
<td>
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="max-width: 540px; border-radius: 8px;" bgcolor="#F3F1ED" class="goals-engage-table" align="left">
<!-- Row 1: Image and title -->
<!--[if mso]>
<tr>
<td style="width: 400px; color: #1F453D; font-size: 16px; font-family: Arial, Helvetica, sans-serif; font-weight: 400; line-height: 24px; width: 100%;">
<p style="padding: 20px 30px; margin-left: 30px">
<strong> {% trans "Remember: the best goal is one that you can stick to. " as tmsg %}{{ tmsg | force_escape }} </strong>
{% trans "You can always" as tmsg %}{{ tmsg | force_escape }}
<a href="{{course_url}}" target="_blank" style="color: #ED5C13;">change your learning goal </a>
{% trans "if you need to." as tmsg %}{{ tmsg | force_escape }}
</p>
</td>
<td width="120" style="width: 120px; padding: 0; margin: 0; vertical-align: top;">
<img src="{{ goal_reminder_profile_url }}"
alt="Message Icon"
width="120"
height="158"
style="display: block; border: 0; margin: 0; padding: 0; width: 120px; height: 158px; max-width: 120px !important; max-height: 158px !important;" />
</td>
</tr>
<![endif]-->
<!--[if !mso]><!-->
<tr>
<td style="width: 400px; color: #1F453D; font-size: 16px; font-family: Arial, sans-serif; font-weight: 400; line-height: 24px;">
<p style="padding: 20px 30px; margin: 0px;">
<strong> {% trans "Remember: the best goal is one that you can stick to. " as tmsg %}{{ tmsg | force_escape }} </strong>
{% trans "You can always" as tmsg %}{{ tmsg | force_escape }}
<a href="{{course_url}}" target="_blank" style="color: #ED5C13;">change your learning goal </a>
{% trans "if you need to." as tmsg %}{{ tmsg | force_escape }}
</p>
</a>
</tr>
<tr>
<p style="margin-top: 0; margin-bottom: 0; color: rgba(0,0,0,.75); font-size: 16px; font-size: 1rem; padding-top: 16px; padding-bottom: 14px">
<br>
{% filter force_escape %}{% blocktrans %}
Remember, you can always change your learning goal. The best goal is one that you can stick to.
{% endblocktrans %}{% endfilter %}
</p>
</tr>
<tr>
<a style="text-decoration: none; display: inline-block; border: 10px solid #F2F0EF; border: 0.0625rem solid #F2F0EF;"
href="{{course_url}}" target="_blank">
<div style="
border-color: white;
border-style: solid;
border-width: 6px 12px;
border-width: 0.5rem 0.75rem;
background: white;
font-size: 16px;
font-size: 1rem;
color: #D23228;
">
{% filter force_escape %}{% blocktrans %}
Adjust my goal
{% endblocktrans %}{% endfilter %}
</div>
</a>
<center>
</td>
<td style="padding: 0; margin: 0;" align="left" valign="top">
<img src="{{ goal_reminder_profile_url }}" alt="Message Icon" style="display: block; border: 0; margin: 0; padding: 0; width: 120px; height: 158px; margin-top: -40px;">
</td>
</tr>
<!--<![endif]-->
</table>
</td>
</tr>
<tr>
<td>
<!--[if !mso]><!-->
<a style="
color: #00688D;
display: block;
margin: 20px auto 0 auto;
margin: 1.25rem auto 0 auto;
text-align: center;
text-decoration: none;
width: 250px;
width: 15.625rem;
font-size: 16px;
font-size: 1rem;
font-size: 12px;
padding-top: 24px;
padding-bottom: 30px;
padding-left: 30px;
"
href="{{goals_unsubscribe_url}}" target="_blank">
{% filter force_escape %}{% blocktrans %}
Unsubscribe from goal reminder emails for this course
{% endblocktrans %}{% endfilter %}
</a>
</center>
</tr>
</table>
</td>
</tr>
<!--<![endif]-->
<!--[if mso]>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="24" style="line-height: 24px; font-size: 0;">&nbsp;</td>
</tr>
<tr>
<td align="left" style="padding-left: 30px; padding-bottom: 30px;">
<a href="{{goals_unsubscribe_url}}" target="_blank"
style="color: #00688D; text-decoration: none; font-size: 12px;">
{% filter force_escape %}{% blocktrans %}
Unsubscribe from goal reminder emails for this course
{% endblocktrans %}{% endfilter %}
</a>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
{% endblock %}
{% block footer%}
{%include 'course_goals/edx_ace/goalreminder/email/footer.html'%}
{% endblock%}

View File

@@ -0,0 +1,195 @@
{% load django_markup %}
{% load i18n %}
{% load ace %}
{% load acetags %}
{% load static %}
<table role="presentation" width="100%" align="left" border="0" cellpadding="0" cellspacing="0">
<style>
.hyperlink {
color: #00688d;
text-decoration: none;
background-color: transparent;
}
.hyperlink:hover {
color: #004972 !important;
text-decoration: underline !important;
}
</style>
{% if confirm_activation_link %}
{% endif %}
<tr>
<td>
<!-- SOCIAL -->
<table role="presentation" align="{{ LANGUAGE_BIDI|yesno:"right,left" }}" border="0" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" valign="top">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" valign="top" style="padding: 0px 15px;">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" valign="top">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" valign="top">
<!-- logo -->
<table align="left" cellpadding="0" cellspacing="0" class="width_100percent">
<tbody>
<tr>
<td align="center" valign="top">
<a href="{% with_link_tracking homepage_url %}">
<img src="{{ logo_url }}" width="92" height="65" alt="{% filter force_escape %}{% blocktrans %}Go to {{ platform_name }} Home Page{% endblocktrans %}{% endfilter %}"/></a>
</td>
</tr>
</tbody>
</table>
<table align="right" cellpadding="0" cellspacing="0" class="width_100percent">
<tbody>
<tr>
<td align="center" class="paddingtop_20 height_0" height="66" valign="middle">
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
{% if social_media_urls.facebook %}
<td height="32" width="35">
<a href="{{ social_media_urls.facebook|safe }}">
<img src="http://email-media.s3.amazonaws.com/edX/2021/social_1_fb.png"
width="25" height="25" alt="{% filter force_escape %}{% blocktrans %}{{ platform_name }} on Facebook{% endblocktrans %}{% endfilter %}"/>
</a>
</td>
{% endif %}
{% if social_media_urls.instagram %}
<td height="32" width="35">
<a href="{{ social_media_urls.instagram|safe }}">
<img src="http://email-media.s3.amazonaws.com/edX/2021/social_4_insta.png"
width="25" height="25" alt="{% filter force_escape %}{% blocktrans %}{{ platform_name }} on Facebook{% endblocktrans %}{% endfilter %}"/>
</a>
</td>
{% endif %}
{% if social_media_urls.linkedin %}
<td height="32" width="35">
<a href="{{ social_media_urls.linkedin|safe }}">
<img src="http://email-media.s3.amazonaws.com/edX/2021/social_3_linkedin.png"
width="25" height="25" alt="{% filter force_escape %}{% blocktrans %}{{ platform_name }} on LinkedIn{% endblocktrans %}{% endfilter %}"/>
</a>
</td>
{% endif %}
{% if social_media_urls.twitter %}
<td height="32" width="35">
<a href="{{ social_media_urls.twitter|safe }}">
<img src="http://email-media.s3.amazonaws.com/edX/2021/social_2_twitter.png"
width="25" height="25" alt="{% filter force_escape %}{% blocktrans %}{{ platform_name }} on Twitter{% endblocktrans %}{% endfilter %}"/>
</a>
</td>
{% endif %}
{% if social_media_urls.reddit %}
<td height="32" width="35">
<a href="{{ social_media_urls.reddit|safe }}">
<img src="http://email-media.s3.amazonaws.com/edX/2021/social_5_reddit.png"
width="25" height="25" alt="{% filter force_escape %}{% blocktrans %}{{ platform_name }} on Reddit{% endblocktrans %}{% endfilter %}"/>
</a>
</td>
{% endif %}
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="20" style="line-height:1px;font-size:1px;"></td>
</tr>
<!-- APP BUTTONS -->
<tr>
<td align="left" valign="top" style="padding: 0px 15px;">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" valign="top">
<table align="left" cellpadding="0" cellspacing="0" class="width_100percent">
<tbody>
<tr>
<td align="center" valign="top">
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
{% if mobile_store_urls.apple %}
<td align="left" valign="top">
<a href="{{ mobile_store_urls.apple|safe }}" style="text-decoration: none">
<img src="http://email-media.s3.amazonaws.com/edX/2021/store_apple_229x78.jpg"
alt="{% trans "Download the iOS app on the Apple Store" as tmsg %}{{ tmsg | force_escape }}"
border="0" height="32" style="display:block;" width="95.135" /></a>
</a>
</td>
{% endif %}
<td width="20"></td>
{% if mobile_store_urls.google %}
<td align="left" valign="top">
<a href="{{ mobile_store_urls.google|safe }}" style="text-decoration: none">
<img src="http://email-media.s3.amazonaws.com/edX/2021/store_google_253x78.jpg"
alt="{% trans "Download the Android app on the Google Play Store" as tmsg %}{{ tmsg | force_escape }}"
border="0" height="32" style="display:block;" width="108.108" /></a>
</a>
</td>
{% endif %}
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="24" style="line-height:1px;font-size:1px;"></td>
</tr>
<tr>
<!-- COPYRIGHT -->
<td align="left" class="fallback_font" style="font-family:Arial,sans-serif;font-size:14px;line-height:21px;color:#000000;font-style: normal;font-weight: 400;" valign="top">
{% if disclaimer %}
{{ disclaimer }}<br/>
{% endif %}
{% trans "edX is the trusted platform for education and learning" as tmsg %}{{ tmsg | force_escape }}.<br/>
<br/>
&copy; {% now "Y" %} {{ platform_name }} LLC. {% trans "All rights reserved" as tmsg %}{{ tmsg | force_escape }}.<br/>
<br/>
{% if unsubscribe_link %}
<a href="{% with_link_tracking unsubscribe_link %}" style="color: #000000;">
{%if unsubscribe_text%} {{unsubscribe_text}} {%else%} {% trans "Unsubscribe from these emails." as tmsg %}{{ tmsg | force_escape }} {%endif%}
</a><br/>
<br/>
{% endif %}
{{ contact_mailing_address }}
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>

View File

@@ -1,15 +1,40 @@
{% extends 'ace_common/edx_ace/common/base_head.html' %}
{% block additional_styles %}
<style type="text/css">
@media only screen and (max-width: 456px) {
.goal-reminder-body-wrapper {
margin: 5px 12.8px 0 4.8px !important;
margin: .5rem .8rem 0 .3rem !important;
padding-left: 3% !important;
}
h3 {
margin-top: 0;
}
}
</style>
{% endblock %}
{% load django_markup %}
{% load i18n %}
{% load ace %}
{% load acetags %}
{% load static %}
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#F2F0EF">
<tr>
<td valign="top" align="center">
<table width="600" cellpadding="0" cellspacing="0" align="center" class="width_100percent">
<tr>
<td valign="top" align="center" style="max-width:600px;" class="min_width">
<table width="100%" cellpadding="0" cellspacing="0" bgcolor="#F2F0EF">
<tr><td height="20" style="line-height:1px;">&nbsp;</td></tr>
<tr>
<td align="center" valign="top" style="padding:0 60px;" class="padding_none">
<table cellpadding="0" cellspacing="0" align="center" class="width_100percent">
<tr>
<td align="center" valign="top">
<table cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top">
<a href="{% with_link_tracking homepage_url %}">
<img src="{{ logo_url }}" width="92" height="65" alt="{% filter force_escape %}{% blocktrans %}Go to {{ platform_name }} Home Page{% endblocktrans %}{% endfilter %}"/></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr><td height="20" style="line-height:1px;font-size:1px;">&nbsp;</td></tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>

View File

@@ -5415,6 +5415,10 @@ NOTIFICATION_DIGEST_LOGO = DEFAULT_EMAIL_LOGO_URL
SELF_PACED_BANNER_URL = ""
SELF_PACED_CLOUD_URL = ""
############## GOAL REMINDER EMAIL ##############
GOAL_REMINDER_BANNER_URL = ""
GOAL_REMINDER_PROFILE_URL = ""
############## NUDGE EMAILS ###############
# .. setting_name: DISABLED_ORGS_FOR_PROGRAM_NUDGE
# .. setting_default: []