diff --git a/conf/locale/en/LC_MESSAGES/djangojs.po b/conf/locale/en/LC_MESSAGES/djangojs.po index fbece76c9c..730d93d20c 100644 --- a/conf/locale/en/LC_MESSAGES/djangojs.po +++ b/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 "" diff --git a/lms/djangoapps/verify_student/views.py b/lms/djangoapps/verify_student/views.py index 21715ba979..d5fbaa1ca5 100644 --- a/lms/djangoapps/verify_student/views.py +++ b/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, diff --git a/lms/static/js/spec/verify_student/make_payment_step_view_spec.js b/lms/static/js/spec/verify_student/make_payment_step_view_spec.js index 31389ed5f3..211dfc76ab 100644 --- a/lms/static/js/spec/verify_student/make_payment_step_view_spec.js +++ b/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"}); diff --git a/lms/static/js/verify_student/pay_and_verify.js b/lms/static/js/verify_student/pay_and_verify.js index 93f271400b..440337c4af 100644 --- a/lms/static/js/verify_student/pay_and_verify.js +++ b/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; } diff --git a/lms/static/js/verify_student/views/make_payment_step_view.js b/lms/static/js/verify_student/views/make_payment_step_view.js index fc809e6da9..65019c7adb 100644 --- a/lms/static/js/verify_student/views/make_payment_step_view.js +++ b/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: '' }; }, diff --git a/lms/static/sass/views/_decoupled-verification.scss b/lms/static/sass/views/_decoupled-verification.scss index 95d69833b9..2c4346a912 100644 --- a/lms/static/sass/views/_decoupled-verification.scss +++ b/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 { diff --git a/lms/templates/verify_student/make_payment_step.underscore b/lms/templates/verify_student/make_payment_step.underscore index 5f327d50c7..9d9b22228e 100644 --- a/lms/templates/verify_student/make_payment_step.underscore +++ b/lms/templates/verify_student/make_payment_step.underscore @@ -1,7 +1,7 @@
<% if ( !upgrade ) { %> -

+

<%= HtmlUtils.interpolateHtml( gettext( "You are enrolling in: {courseName}"), { courseName: HtmlUtils.joinHtml( @@ -27,16 +27,25 @@

<% } %> -
+
<% if ( _.some( requirements, function( isVisible ) { return isVisible; } ) ) { %> -

+

<% 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." ) %> + + <%= HtmlUtils.interpolateHtml( + gettext( "An email has been sent to {userEmail} with a link for you to activate your account."), + {userEmail: userEmail} + ) + %> +

<%- gettext("Why activate?") %>

+
+ <%- gettext("We ask you to activate your account to ensure it is really you creating the account and to prevent fraud.") %> +
<% } 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']) { %>
    - <% if ( requirements['account-activation-required'] ) { %> -
  • -

    <%- gettext( "Activate Your Account" ) %>

    -
    - -
    - -
    -

    - <%- gettext( "Check Your Email" ) %> -

    -
    -
  • - <% } else {%> + <% if (!requirements['account-activation-required']) {%> <% if ( requirements['photo-id-required'] ) { %>
  • <%- gettext( "Government-Issued Photo ID" ) %>

    diff --git a/lms/templates/verify_student/pay_and_verify.html b/lms/templates/verify_student/pay_and_verify.html index 4b591204dd..dc20122dd4 100644 --- a/lms/templates/verify_student/pay_and_verify.html +++ b/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}'