Skip to content

Commit 6053f5d

Browse files
sundasnoreen12sundasnoreen12
authored
Merge pull request #36932 from openedx/sundas/INF-1941
feat: added goal reminder new UI
2 parents b2c9ddd + cc86662 commit 6053f5d

File tree

6 files changed

+470
-119
lines changed

6 files changed

+470
-119
lines changed

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,7 @@ def send_ace_message(goal, session_id):
9292

9393
message_context.update({
9494
'email': user.email,
95+
'user_name': user.username,
9596
'platform_name': configuration_helpers.get_value('PLATFORM_NAME', settings.PLATFORM_NAME),
9697
'course_name': course_name,
9798
'course_id': str(goal.course_key),
@@ -103,6 +104,8 @@ def send_ace_message(goal, session_id):
103104
'omit_unsubscribe_link': True,
104105
'courses_url': getattr(settings, 'ACE_EMAIL_COURSES_URL', None),
105106
'programs_url': getattr(settings, 'ACE_EMAIL_PROGRAMS_URL', None),
107+
'goal_reminder_banner_url': settings.GOAL_REMINDER_BANNER_URL,
108+
'goal_reminder_profile_url': settings.GOAL_REMINDER_PROFILE_URL,
106109
})
107110

108111
options = {

‎lms/djangoapps/course_goals/templates/course_goals/edx_ace/goalreminder/email/base_body.html

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
{% load django_markup %}
2+
{% load i18n %}
3+
<!-- These tags come from the ace_common djangoapp in edx ace -->
4+
{% load ace %}
5+
<!-- These tags come from the edx_ace app within the edx_ace repository -->
6+
{% load acetags %}
7+
8+
{% get_current_language as LANGUAGE_CODE %}
9+
{% get_current_language_bidi as LANGUAGE_BIDI %}
10+
11+
{# This is preview text that is visible in the inbox view of many email clients but not visible in the actual #}
12+
{# email itself. #}
13+
14+
<div lang="{{ LANGUAGE_CODE|default:"en" }}" style="
15+
display:none;
16+
font-size:1px;
17+
line-height:1px;
18+
max-height:0px;
19+
max-width:0px;
20+
opacity:0;
21+
overflow:hidden;
22+
visibility:hidden;
23+
">
24+
{% block preview_text %}{% endblock %}
25+
</div>
26+
27+
{% for image_src in channel.tracker_image_sources %}
28+
<img src="{image_src}" alt="" role="presentation" aria-hidden="true" />
29+
{% endfor %}
30+
31+
{% google_analytics_tracking_pixel %}
32+
33+
<div bgcolor="#F2F0EF" lang="{{ LANGUAGE_CODE|default:"en" }}" dir="{{ LANGUAGE_BIDI|yesno:"rtl,ltr" }}" style="
34+
margin: 0;
35+
padding: 0;
36+
min-width: 100%;
37+
">
38+
<!-- Hack for outlook 2010, which wants to render everything in Times New Roman -->
39+
<!--[if mso]>
40+
<style type="text/css">
41+
body, table, td {font-family: Arial, sans-serif !important;}
42+
</style>
43+
<![endif]-->
44+
45+
<!--[if (gte mso 9)|(IE)]>
46+
<table role="presentation" width="600" align="center" cellpadding="0" cellspacing="0" border="0">
47+
<tr>
48+
<td>
49+
<![endif]-->
50+
51+
<!-- CONTENT -->
52+
<table class="content" role="presentation" align="center" cellpadding="0" cellspacing="0" border="0" bgcolor="#fbfaf9" width="100%"
53+
{% block table_style %}
54+
style="
55+
font-family: Arial, sans-serif;
56+
font-size: 1em;
57+
max-width: 600px;
58+
"
59+
{% endblock %}
60+
>
61+
<tr>
62+
<!-- HEADER -->
63+
<td class="header" style="background-color: #F2F0EF;">
64+
{% block header %}{% endblock %}
65+
</td>
66+
</tr>
67+
68+
<tr>
69+
<!-- MAIN -->
70+
<td class="main" bgcolor="#ffffff">
71+
{% block content %}{% endblock %}
72+
</td>
73+
</tr>
74+
75+
<tr>
76+
<!-- FOOTER -->
77+
<td class="footer" style="padding: 30px; background-color: #F2F0EF;">
78+
{% block footer %}{% endblock %}
79+
</td>
80+
</tr>
81+
82+
</table>
83+
84+
<!--[if (gte mso 9)|(IE)]>
85+
</td>
86+
</tr>
87+
</table>
88+
<![endif]-->
89+
90+
</div>

‎lms/djangoapps/course_goals/templates/course_goals/edx_ace/goalreminder/email/body.html

Lines changed: 138 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
{% extends 'ace_common/edx_ace/common/base_body.html' %}
1+
{% extends 'course_goals/edx_ace/goalreminder/email/base_body.html' %}
2+
23
{% load i18n %}
34
{% load django_markup %}
45
{% load static %}
@@ -21,119 +22,152 @@
2122
{# email client support for style sheets is pretty spotty, so we have to inline all of these styles #}
2223
{# 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 #}
2324

24-
<table style="width: 100%; min-width: 325px;" align="left" border="0" cellpadding="0" cellspacing="0" role="presentation">
25-
<tr>
26-
<td>
27-
{% include "goal_reminder_banner.html" %}
28-
<tr>
29-
<td height="36" align="center" valign="middle" style="margin: 0; font-size: 0px; line-height: 0px;">&nbsp;</td>
30-
</tr>
31-
<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;">
32-
<tr>
33-
<h3 style="
34-
font-size: 25px;
35-
font-size: 1.563rem;
36-
font-style: normal;
37-
font-weight: 700;
38-
line-height: 28px;
39-
line-height: 1.75rem;
40-
text-align: left;
41-
color: black;
42-
margin-top: 20px;
43-
margin-bottom: 20px;
44-
">
45-
{% filter force_escape %}{% blocktrans %}
46-
There’s still time to reach your goal
47-
{% endblocktrans %}{% endfilter %}
48-
</h3>
49-
</tr>
50-
51-
<tr>
52-
<p style="color: rgba(0,0,0,.75); font-size: 16px; font-size: 1rem; margin: 0; padding-top: 20px; padding-bottom: 14px">
53-
{% filter force_escape %}
54-
{% autoescape off %}
55-
{% blocktrans count count=days_per_week asvar goal_text %}
56-
You set a goal of learning {start_bold}{{days_per_week}} time a week in {{course_name}}{end_bold}. You’re not quite there, but there's still time to reach that goal!
57-
{% plural %}
58-
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!
59-
{% endblocktrans %}
60-
{% endautoescape %}
61-
{% endfilter %}
62-
{% interpolate_html goal_text start_bold='<b>'|safe end_bold='</b>'|safe %}
63-
</p>
64-
</tr>
65-
66-
<tr style="padding-top: 16px;">
67-
<a href="{{course_url}}" target="_blank" style="
68-
display: inline-block;
69-
text-decoration:none !important; text-decoration:none;
70-
color: white;
71-
border-color: #D23228;
72-
border-style: solid;
73-
border-width: 8px 12px;
74-
border-width: 0.5rem 0.75rem;
75-
background: #D23228;
76-
font-size: 16px;
77-
font-size: 1rem;
78-
">
79-
<p style="margin: 0;">
80-
{% filter force_escape %}{% blocktrans %}
81-
Jump back in
82-
{% endblocktrans %}{% endfilter %}
25+
<table width="100%" align="left" border="0" cellpadding="0" cellspacing="0" role="presentation">
26+
<tr>
27+
<td>
28+
<img
29+
src="{{ goal_reminder_banner_url }}"
30+
style="margin-bottom: 16px; width: 600px;"
31+
width= "600"
32+
height="265"
33+
alt="{% trans 'There’s still time to reach your goal' as tmsg %}{{ tmsg | force_escape }}"
34+
/>
35+
</td>
36+
</tr>
37+
<tr>
38+
<td>
39+
<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;">
40+
{% filter force_escape %}
41+
{% blocktrans with user_name=user_name %}
42+
You’re almost there, {{ user_name }}!
43+
{% endblocktrans %}
44+
{% endfilter %}
45+
</p>
46+
<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;">
47+
{% filter force_escape %}
48+
{% autoescape off %}
49+
{% blocktrans count count=days_per_week asvar goal_text %}
50+
You set a goal of learning {start_bold}{{days_per_week}} time a week in {{course_name}}{end_bold}. Now it’s up to you to make those goals a reality.
51+
{% plural %}
52+
You set a goal of learning {start_bold}{{days_per_week}} times a week in {{course_name}}{end_bold}. Now it’s up to you to make those goals a reality.
53+
{% endblocktrans %}
54+
{% endautoescape %}
55+
{% endfilter %}
56+
{% interpolate_html goal_text start_bold='<b>'|safe end_bold='</b>'|safe %}
57+
</p>
58+
</td>
59+
</tr>
60+
<tr style="height: 32px;">
61+
<td style="padding-top: 1rem;" class="course-text">
62+
<a href="{{course_url}}" target="_blank"
63+
style="
64+
text-decoration: none;
65+
color: white;
66+
background-color: #ED5C13;
67+
text-align: center;
68+
vertical-align: middle;
69+
user-select: none;
70+
font-weight: 500;
71+
font-size: 12px;
72+
text-decoration-style: solid;
73+
display: inline-flex;
74+
flex-direction: row;
75+
border-radius: 30.22px;
76+
padding: 6px 11px;
77+
margin-left: 30px;
78+
">
79+
{% filter force_escape %}{% blocktrans %}
80+
Jump back in
81+
{% endblocktrans %}{% endfilter %}
82+
</a>
83+
</td>
84+
</tr>
85+
<tr>
86+
<td style="height: 32px; line-height: 32px; font-size: 1px;">
87+
&nbsp;
88+
</td>
89+
</tr>
90+
<tr style="background-color: #F3F1ED;">
91+
<td>
92+
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="max-width: 540px; border-radius: 8px;" bgcolor="#F3F1ED" class="goals-engage-table" align="left">
93+
<!-- Row 1: Image and title -->
94+
<!--[if mso]>
95+
<tr>
96+
<td style="width: 400px; color: #1F453D; font-size: 16px; font-family: Arial, Helvetica, sans-serif; font-weight: 400; line-height: 24px; width: 100%;">
97+
<p style="padding: 20px 30px; margin-left: 30px">
98+
<strong> {% trans "Remember: the best goal is one that you can stick to. " as tmsg %}{{ tmsg | force_escape }} </strong>
99+
{% trans "You can always" as tmsg %}{{ tmsg | force_escape }}
100+
<a href="{{course_url}}" target="_blank" style="color: #ED5C13;">change your learning goal </a>
101+
{% trans "if you need to." as tmsg %}{{ tmsg | force_escape }}
102+
</p>
103+
</td>
104+
<td width="120" style="width: 120px; padding: 0; margin: 0; vertical-align: top;">
105+
<img src="{{ goal_reminder_profile_url }}"
106+
alt="Message Icon"
107+
width="120"
108+
height="158"
109+
style="display: block; border: 0; margin: 0; padding: 0; width: 120px; height: 158px; max-width: 120px !important; max-height: 158px !important;" />
110+
</td>
111+
</tr>
112+
<![endif]-->
113+
<!--[if !mso]><!-->
114+
<tr>
115+
<td style="width: 400px; color: #1F453D; font-size: 16px; font-family: Arial, sans-serif; font-weight: 400; line-height: 24px;">
116+
<p style="padding: 20px 30px; margin: 0px;">
117+
<strong> {% trans "Remember: the best goal is one that you can stick to. " as tmsg %}{{ tmsg | force_escape }} </strong>
118+
{% trans "You can always" as tmsg %}{{ tmsg | force_escape }}
119+
<a href="{{course_url}}" target="_blank" style="color: #ED5C13;">change your learning goal </a>
120+
{% trans "if you need to." as tmsg %}{{ tmsg | force_escape }}
83121
</p>
84-
</a>
85-
</tr>
86-
87-
<tr>
88-
<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">
89-
<br>
90-
{% filter force_escape %}{% blocktrans %}
91-
Remember, you can always change your learning goal. The best goal is one that you can stick to.
92-
{% endblocktrans %}{% endfilter %}
93-
</p>
94-
</tr>
95-
96-
<tr>
97-
<a style="text-decoration: none; display: inline-block; border: 10px solid #F2F0EF; border: 0.0625rem solid #F2F0EF;"
98-
href="{{course_url}}" target="_blank">
99-
<div style="
100-
border-color: white;
101-
border-style: solid;
102-
border-width: 6px 12px;
103-
border-width: 0.5rem 0.75rem;
104-
background: white;
105-
font-size: 16px;
106-
font-size: 1rem;
107-
color: #D23228;
108-
">
109-
{% filter force_escape %}{% blocktrans %}
110-
Adjust my goal
111-
{% endblocktrans %}{% endfilter %}
112-
</div>
113-
</a>
114-
115-
<center>
122+
</td>
123+
<td style="padding: 0; margin: 0;" align="left" valign="top">
124+
<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;">
125+
</td>
126+
</tr>
127+
<!--<![endif]-->
128+
</table>
129+
</td>
130+
</tr>
131+
<tr>
132+
<td>
133+
<!--[if !mso]><!-->
116134
<a style="
117135
color: #00688D;
118136
display: block;
119-
margin: 20px auto 0 auto;
120-
margin: 1.25rem auto 0 auto;
121-
text-align: center;
122137
text-decoration: none;
123-
width: 250px;
124-
width: 15.625rem;
125-
font-size: 16px;
126-
font-size: 1rem;
138+
font-size: 12px;
139+
padding-top: 24px;
140+
padding-bottom: 30px;
141+
padding-left: 30px;
127142
"
128143
href="{{goals_unsubscribe_url}}" target="_blank">
129144
{% filter force_escape %}{% blocktrans %}
130145
Unsubscribe from goal reminder emails for this course
131146
{% endblocktrans %}{% endfilter %}
132147
</a>
133-
</center>
134-
</tr>
135-
</table>
136-
</td>
137-
</tr>
148+
<!--<![endif]-->
149+
<!--[if mso]>
150+
<table width="100%" border="0" cellspacing="0" cellpadding="0">
151+
<tr>
152+
<td height="24" style="line-height: 24px; font-size: 0;">&nbsp;</td>
153+
</tr>
154+
<tr>
155+
<td align="left" style="padding-left: 30px; padding-bottom: 30px;">
156+
<a href="{{goals_unsubscribe_url}}" target="_blank"
157+
style="color: #00688D; text-decoration: none; font-size: 12px;">
158+
{% filter force_escape %}{% blocktrans %}
159+
Unsubscribe from goal reminder emails for this course
160+
{% endblocktrans %}{% endfilter %}
161+
</a>
162+
</td>
163+
</tr>
164+
</table>
165+
<![endif]-->
166+
</td>
167+
</tr>
138168
</table>
139169
{% endblock %}
170+
171+
{% block footer%}
172+
{%include 'course_goals/edx_ace/goalreminder/email/footer.html'%}
173+
{% endblock%}

0 commit comments

Comments
 (0)