Commit a9cfa746 by Matt Drayer Committed by GitHub

Merge pull request #12775 from edx/asadiqbal08/WL-515

WL-515 Update Activate Account message page
parents 6222b1cd 4e38b2e4
...@@ -8817,3 +8817,19 @@ msgstr "" ...@@ -8817,3 +8817,19 @@ msgstr ""
#: cms/templates/js/video/transcripts/messages/transcripts-use-existing.underscore #: cms/templates/js/video/transcripts/messages/transcripts-use-existing.underscore
msgid "Use Current Transcript" msgid "Use Current Transcript"
msgstr "" msgstr ""
#: lms/templates/verify_student/make_payment_step.underscore:47
msgid ""
"We ask you to activate your account to ensure it is really you creating the "
"account and to prevent fraud."
msgstr ""
#: lms/templates/verify_student/make_payment_step.underscore:41
msgid ""
"An email has been sent to {userEmail} with a link for you to activate your "
"account."
msgstr ""
#: lms/templates/verify_student/make_payment_step.underscore:45
msgid "Why activate?"
msgstr ""
...@@ -418,6 +418,7 @@ class PayAndVerifyView(View): ...@@ -418,6 +418,7 @@ class PayAndVerifyView(View):
'disable_courseware_js': True, 'disable_courseware_js': True,
'display_steps': display_steps, 'display_steps': display_steps,
'is_active': json.dumps(request.user.is_active), 'is_active': json.dumps(request.user.is_active),
'user_email': request.user.email,
'message_key': message, 'message_key': message,
'platform_name': theming_helpers.get_value('PLATFORM_NAME', settings.PLATFORM_NAME), 'platform_name': theming_helpers.get_value('PLATFORM_NAME', settings.PLATFORM_NAME),
'processors': processors, 'processors': processors,
......
...@@ -142,6 +142,11 @@ define([ ...@@ -142,6 +142,11 @@ define([
expectPaymentSubmitted( view, {foo: 'bar'} ); expectPaymentSubmitted( view, {foo: 'bar'} );
}); });
it ('view containing user email', function() {
createView({userEmail: 'test@example.com', requirements: {isVisible:true}, isActive: false});
expect($('p.instruction-info:contains("test@example.com")').length).toEqual(1);
});
it( 'provides working payment buttons for a single processor', function() { it( 'provides working payment buttons for a single processor', function() {
createView({processors: ['cybersource']}); createView({processors: ['cybersource']});
checkPaymentButtons( AjaxHelpers.requests(this), {cybersource: "Checkout"}); checkPaymentButtons( AjaxHelpers.requests(this), {cybersource: "Checkout"});
......
...@@ -49,6 +49,7 @@ var edx = edx || {}; ...@@ -49,6 +49,7 @@ var edx = edx || {};
requirements: el.data('requirements'), requirements: el.data('requirements'),
courseKey: el.data('course-key'), courseKey: el.data('course-key'),
courseName: el.data('course-name'), courseName: el.data('course-name'),
userEmail: el.data('user-email'),
hasVisibleReqs: _.some( hasVisibleReqs: _.some(
el.data('requirements'), el.data('requirements'),
function( isVisible ) { return isVisible; } function( isVisible ) { return isVisible; }
......
...@@ -37,7 +37,8 @@ var edx = edx || {}; ...@@ -37,7 +37,8 @@ var edx = edx || {};
alreadyVerified: false, alreadyVerified: false,
courseModeSlug: 'audit', courseModeSlug: 'audit',
verificationGoodUntil: '', verificationGoodUntil: '',
isABTesting: false isABTesting: false,
userEmail: ''
}; };
}, },
......
...@@ -5,6 +5,20 @@ ...@@ -5,6 +5,20 @@
.title.center-col { .title.center-col {
padding: 0 calc( ( 100% - 750px ) / 2 ) 10px; padding: 0 calc( ( 100% - 750px ) / 2 ) 10px;
} }
h2 {
font-size: 16px;
font-weight: 600;
text-transform: unset;
color: #4a4a4a;
margin-bottom: 40px;
.course-title {
display: block;
font-weight: 100;
font-size: 24px;
margin-top: 5px;
}
}
} }
.instruction { .instruction {
...@@ -13,6 +27,28 @@ ...@@ -13,6 +27,28 @@
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
.instruction-info {
font-size: 24px;
font-weight: 100;
color: #57595a;
margin-bottom: 30px;
.fa-envelope-o {
color: #b92167;
font-size: 26px;
margin-right: 8px;
}
}
.activate {
font-size: 16px;
font-weight: 600;
color: #4a4a4a;
}
.activate-info {
font-size: 16px;
font-weight: 100;
color: #4a4a4a;
}
} }
.payment-info { .payment-info {
......
<div id="wrapper-review" tab-index="0" class="wrapper-view make-payment-step"> <div id="wrapper-review" tab-index="0" class="wrapper-view make-payment-step">
<div class="review view"> <div class="review view">
<% if ( !upgrade ) { %> <% if ( !upgrade ) { %>
<h2 class="title center-col"> <h2 class="right-col">
<%= HtmlUtils.interpolateHtml( <%= HtmlUtils.interpolateHtml(
gettext( "You are enrolling in: {courseName}"), gettext( "You are enrolling in: {courseName}"),
{ courseName: HtmlUtils.joinHtml( { courseName: HtmlUtils.joinHtml(
...@@ -27,16 +27,25 @@ ...@@ -27,16 +27,25 @@
</div> </div>
<% } %> <% } %>
<div class="instruction <% if ( !upgrade ) { %>center-col<% } %>"> <div class="instruction <% if ( !upgrade && isActive ) { %>center-col<% } %>">
<% if ( _.some( requirements, function( isVisible ) { return isVisible; } ) ) { %> <% if ( _.some( requirements, function( isVisible ) { return isVisible; } ) ) { %>
<p> <p class="instruction-info">
<% if ( verificationDeadline ) { %> <% if ( verificationDeadline ) { %>
<%- _.sprintf( <%- _.sprintf(
gettext( "You can pay now even if you don't have the following items available, but you will need to have these by %(date)s to qualify to earn a Verified Certificate." ), gettext( "You can pay now even if you don't have the following items available, but you will need to have these by %(date)s to qualify to earn a Verified Certificate." ),
{ date: verificationDeadline } { date: verificationDeadline }
) %> ) %>
<% } else if ( !isActive ) { %> <% } else if ( !isActive ) { %>
<%- gettext( "You need to activate your account before you can enroll in courses. Check your inbox for an activation email. After you complete activation you can return and refresh this page." ) %> <i class="fa fa-envelope-o" aria-hidden="true"></i>
<%= HtmlUtils.interpolateHtml(
gettext( "An email has been sent to {userEmail} with a link for you to activate your account."),
{userEmail: userEmail}
)
%>
<h3 class="activate"><%- gettext("Why activate?") %></h3>
<div class="activate-info">
<%- gettext("We ask you to activate your account to ensure it is really you creating the account and to prevent fraud.") %>
<div>
<% } else { %> <% } else { %>
<%- gettext( "You can pay now even if you don't have the following items available, but you will need to have these to qualify to earn a Verified Certificate." ) %> <%- gettext( "You can pay now even if you don't have the following items available, but you will need to have these to qualify to earn a Verified Certificate." ) %>
<% } %> <% } %>
...@@ -47,20 +56,7 @@ ...@@ -47,20 +56,7 @@
<% if ( requirements['account-activation-required'] || requirements['photo-id-required'] || requirements['webcam-required']) { %> <% if ( requirements['account-activation-required'] || requirements['photo-id-required'] || requirements['webcam-required']) { %>
<div class="requirements-container"> <div class="requirements-container">
<ul class="list-reqs <% if ( requirements['account-activation-required'] ) { %>account-not-activated<% } %>"> <ul class="list-reqs <% if ( requirements['account-activation-required'] ) { %>account-not-activated<% } %>">
<% if ( requirements['account-activation-required'] ) { %> <% if (!requirements['account-activation-required']) {%>
<li class="req req-0 req-activate">
<h3 class="title"><%- gettext( "Activate Your Account" ) %></h3>
<div class="placeholder-art">
<span class="icon fa fa-envelope-o" aria-hidden="true"></span>
</div>
<div class="copy">
<p>
<span class="copy-super"><%- gettext( "Check Your Email" ) %></span>
</p>
</div>
</li>
<% } else {%>
<% if ( requirements['photo-id-required'] ) { %> <% if ( requirements['photo-id-required'] ) { %>
<li class="req req-1 req-id"> <li class="req req-1 req-id">
<h3 class="title"><%- gettext( "Government-Issued Photo ID" ) %></h3> <h3 class="title"><%- gettext( "Government-Issued Photo ID" ) %></h3>
......
...@@ -81,6 +81,7 @@ from lms.djangoapps.verify_student.views import PayAndVerifyView ...@@ -81,6 +81,7 @@ from lms.djangoapps.verify_student.views import PayAndVerifyView
data-requirements='${json.dumps(requirements)}' data-requirements='${json.dumps(requirements)}'
data-msg-key='${message_key}' data-msg-key='${message_key}'
data-is-active='${is_active}' data-is-active='${is_active}'
data-user-email='${user_email}'
data-already-verified='${already_verified}' data-already-verified='${already_verified}'
data-verification-good-until='${verification_good_until}' data-verification-good-until='${verification_good_until}'
data-capture-sound='${capture_sound}' data-capture-sound='${capture_sound}'
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment