WL-515 Update Activate Account message page

conf/locale/en/LC_MESSAGES/djangojs.po

@@ -8808,3 +8808,19 @@ msgstr ""
 #: cms/templates/js/video/transcripts/messages/transcripts-use-existing.underscore
 msgid "Use Current Transcript"
 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 ""

lms/djangoapps/verify_student/views.py

@@ -418,6 +418,7 @@ class PayAndVerifyView(View):
             'disable_courseware_js': True,
             'display_steps': display_steps,
             'is_active': json.dumps(request.user.is_active),
+            'user_email': request.user.email,
             'message_key': message,
             'platform_name': settings.PLATFORM_NAME,
             'processors': processors,

lms/static/js/spec/verify_student/make_payment_step_view_spec.js

@@ -142,6 +142,11 @@ define([
                 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() {
                 createView({processors: ['cybersource']});
                 checkPaymentButtons( AjaxHelpers.requests(this), {cybersource: "Checkout"});

lms/static/js/verify_student/pay_and_verify.js

@@ -49,6 +49,7 @@ var edx = edx || {};
                 requirements: el.data('requirements'),
                 courseKey: el.data('course-key'),
                 courseName: el.data('course-name'),
+                userEmail: el.data('user-email'),
                 hasVisibleReqs: _.some(
                     el.data('requirements'),
                     function( isVisible ) { return isVisible; }

lms/static/js/verify_student/views/make_payment_step_view.js

@@ -37,7 +37,8 @@ var edx = edx || {};
                 alreadyVerified: false,
                 courseModeSlug: 'audit',
                 verificationGoodUntil: '',
-                isABTesting: false
+                isABTesting: false,
+                userEmail: ''
             };
         },
 

lms/static/sass/views/_decoupled-verification.scss

@@ -5,6 +5,20 @@
             .title.center-col {
                 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 {
@@ -13,6 +27,28 @@
                 margin-left: 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 {

lms/templates/verify_student/make_payment_step.underscore

 <div id="wrapper-review" tab-index="0" class="wrapper-view make-payment-step">
   <div class="review view">
     <% if ( !upgrade ) { %>
-      <h2 class="title center-col">
+      <h2 class="right-col">
         <%= HtmlUtils.interpolateHtml(
             gettext( "You are enrolling in: {courseName}"),
             { courseName: HtmlUtils.joinHtml(
@@ -27,16 +27,25 @@
       </div>
     <% } %>
 
-    <div class="instruction <% if ( !upgrade ) { %>center-col<% } %>">
+    <div class="instruction <% if ( !upgrade && isActive ) { %>center-col<% } %>">
       <% if ( _.some( requirements, function( isVisible ) { return isVisible; } ) ) { %>
-      <p>
+      <p class="instruction-info">
         <% if ( verificationDeadline ) { %>
           <%- _.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." ),
             { date: verificationDeadline }
           ) %>
         <% } 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 { %>
             <%- 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 @@
     <% if ( requirements['account-activation-required'] || requirements['photo-id-required'] || requirements['webcam-required']) { %>
     <div class="requirements-container">
       <ul class="list-reqs <% if ( requirements['account-activation-required'] ) { %>account-not-activated<% } %>">
-        <% 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['account-activation-required']) {%>
           <% if ( requirements['photo-id-required'] ) { %>
           <li class="req req-1 req-id">
             <h3 class="title"><%- gettext( "Government-Issued Photo ID" ) %></h3>

lms/templates/verify_student/pay_and_verify.html

@@ -81,6 +81,7 @@ from lms.djangoapps.verify_student.views import PayAndVerifyView
       data-requirements='${json.dumps(requirements)}'
       data-msg-key='${message_key}'
       data-is-active='${is_active}'
+      data-user-email='${user_email}'
       data-already-verified='${already_verified}'
       data-verification-good-until='${verification_good_until}'
       data-capture-sound='${capture_sound}'