WL-515 Update Activate Account message page

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 {