Skip to content

E
edx-platform
Commit af7620a1 by Renzo Lucioni
Options

Merge pull request #6454 from edx/alasdair/not-activated-decoupled-verification-update 

ECOM-869 Update copy and hide supplementary content wrapper and requirem...
parents cdf346ec fb013272
Showing with 158 additions and 146 deletions
lms/static/js/spec/verify_student/make_payment_step_view_spec.js
...@@ -86,16 +86,10 @@ define([ ...@@ -86,16 +86,10 @@ define([
}; };
var expectPaymentDisabledBecauseInactive = function() { var expectPaymentDisabledBecauseInactive = function() {
var payButton = $( '#pay_button'), var payButton = $( '#pay_button' );
activateButton = $( '#activate_button' );
// Payment button should be hidden // Payment button should be hidden
expect( payButton.length ).toEqual(0); expect( payButton.length ).toEqual(0);
// Activate button should be displayed and disabled
expect( activateButton.length ).toEqual(1);
expect( activateButton.hasClass( 'is-disabled' ) ).toBe( true );
expect( activateButton.prop( 'disabled' ) ).toBe( true );
}; };
var goToPayment = function( requests, kwargs ) { var goToPayment = function( requests, kwargs ) {
......
lms/static/js/verify_student/views/make_payment_step_view.js
...@@ -38,11 +38,6 @@ var edx = edx || {}; ...@@ -38,11 +38,6 @@ var edx = edx || {};
// Set the payment button to disabled by default // Set the payment button to disabled by default
this.setPaymentEnabled( false ); this.setPaymentEnabled( false );
// The activate button is always disabled
$( '#activate_button' )
.addClass( 'is-disabled' )
.prop( 'disabled', true );
// Update the contribution amount with the amount the user // Update the contribution amount with the amount the user
// selected in a previous screen. // selected in a previous screen.
if ( templateContext.contributionAmount ) { if ( templateContext.contributionAmount ) {
......
lms/static/sass/views/_decoupled-verification.scss
...@@ -23,6 +23,12 @@ ...@@ -23,6 +23,12 @@
} }
} }
.placeholder-cam {
.copy {
font-weight: bold !important;
}
}
.requirements-container { .requirements-container {
.list-reqs { .list-reqs {
...@@ -41,7 +47,7 @@ ...@@ -41,7 +47,7 @@
} }
&.account-not-activated { &.account-not-activated {
width: 990px; width: 300px;
.req { .req {
height: 290px; height: 290px;
...@@ -75,6 +81,7 @@ ...@@ -75,6 +81,7 @@
display: inline; display: inline;
float: left; float: left;
line-height: 45px; line-height: 45px;
color: black;
} }
.wizard-steps { .wizard-steps {
...@@ -119,11 +126,23 @@ ...@@ -119,11 +126,23 @@
.expandable-area { .expandable-area {
margin-top: 5px; margin-top: 5px;
padding-bottom: 20px;
} }
} }
.help-tips { .help-tips {
margin-left: 0 !important; margin-left: 0 !important;
.title {
font-size: 16px !important;
}
.list-tips {
.tip {
font-size: 16px;
line-height: 1.5em;
}
}
} }
.photo-tip { .photo-tip {
...@@ -137,6 +156,12 @@ ...@@ -137,6 +156,12 @@
padding-left: 20px; padding-left: 20px;
} }
.list-faq {
dd {
color: black;
}
}
.wrapper-task { .wrapper-task {
.msg-retake { .msg-retake {
margin-top: 0; margin-top: 0;
......
lms/templates/verify_student/intro_step.underscore
...@@ -9,7 +9,13 @@ ...@@ -9,7 +9,13 @@
</h3> </h3>
<% } else { %> <% } else { %>
<h3 class="title"><%- introTitle %></h3> <h3 class="title"><%- introTitle %></h3>
<% if ( introMsg ) { %> <% if ( !isActive ) { %>
<div class="instruction">
<p>
<%- 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." ) %>
</p>
</div>
<% } else if ( introMsg ) { %>
<div class="instruction"><p><%- introMsg %></p></div> <div class="instruction"><p><%- introMsg %></p></div>
<% } %> <% } %>
<% } %> <% } %>
...@@ -17,69 +23,63 @@ ...@@ -17,69 +23,63 @@
<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"> <li class="req req-0 req-activate">
<h4 class="title"><%- gettext( "Activate Your Account" ) %></h4> <h4 class="title"><%- gettext( "Activate Your Account" ) %></h4>
<div class="placeholder-art"> <div class="placeholder-art">
<i class="icon-envelope-alt"></i> <i class="icon-envelope-alt"></i>
</div> </div>
<div class="copy"> <div class="copy">
<p> <p>
<span class="copy-super"><%- gettext( "Check your email" ) %></span> <span class="copy-super"><%- gettext( "Check your email" ) %></span>
<span class="copy-sub"><%- </p>
gettext( "You need to activate your account before you can register for courses. Check your inbox for an activation email." ) </div>
%> </li>
</span> <% } else { %>
</p> <% if ( requirements['photo-id-required'] ) { %>
</div> <li class="req req-1 req-id">
</li> <h4 class="title"><%- gettext( "Photo ID" ) %></h4>
<% } %> <div class="placeholder-art">
<i class="icon-list-alt icon-under"></i>
<% if ( requirements['photo-id-required'] ) { %> <i class="icon-user icon-over"></i>
<li class="req req-1 req-id"> </div>
<h4 class="title"><%- gettext( "Photo ID" ) %></h4>
<div class="placeholder-art">
<i class="icon-list-alt icon-under"></i>
<i class="icon-user icon-over"></i>
</div>
<div class="copy"> <div class="copy">
<p> <p>
<span class="copy-sub"><%- gettext( "A driver's license, passport, or government-issued ID with your name and picture" ) %></span> <span class="copy-sub"><%- gettext( "A driver's license, passport, or government-issued ID with your name and picture" ) %></span>
</p> </p>
</div> </div>
</li> </li>
<% } %> <% } %>
<% if ( requirements['webcam-required'] ) { %> <% if ( requirements['webcam-required'] ) { %>
<li class="req req-2 req-webcam"> <li class="req req-2 req-webcam">
<h4 class="title"><%- gettext( "Webcam" ) %></h4> <h4 class="title"><%- gettext( "Webcam" ) %></h4>
<div class="placeholder-art"> <div class="placeholder-art">
<i class="icon-facetime-video"></i> <i class="icon-facetime-video"></i>
</div> </div>
<div class="copy"></div> <div class="copy"></div>
</li> </li>
<% } %>
<% } %> <% } %>
</ul> </ul>
</div> </div>
<% if ( nextStepTitle ) { %> <% if ( nextStepTitle && isActive ) { %>
<nav class="nav-wizard is-ready"> <nav class="nav-wizard is-ready">
<ol class="wizard-steps"> <ol class="wizard-steps">
<li class="wizard-step"> <li class="wizard-step">
<a class="next action-primary" <% if ( !isActive ) { %>disabled="true"<% } %> id="next_step_button" href="?skip-first-step=1"> <a class="next action-primary" id="next_step_button" href="?skip-first-step=1">
<% if ( !isActive ) { %> <% if ( hasPaid ) { %>
<%- gettext( "Activate Your Account" ) %> <%- _.sprintf(
<% } else if ( hasPaid ) { %> gettext( "Next: %(nextStepTitle)s" ),
<%- _.sprintf( { nextStepTitle: nextStepTitle }
gettext( "Next: %(nextStepTitle)s" ), ) %>
{ nextStepTitle: nextStepTitle } <% } else { %>
) %> <%- nextStepTitle %>
<% } else { %> <% } %>
<%- nextStepTitle %> </a>
<% } %>
</a>
</li> </li>
</ol> </ol>
</nav> </nav>
......
lms/templates/verify_student/make_payment_step.underscore
...@@ -105,6 +105,8 @@ ...@@ -105,6 +105,8 @@
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 ) { %>
<%- 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." ) %>
<% } else if ( !upgrade ) { %> <% } else if ( !upgrade ) { %>
<%- 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." ) %>
<% } %> <% } %>
...@@ -116,66 +118,60 @@ ...@@ -116,66 +118,60 @@
<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"> <li class="req req-0 req-activate">
<h4 class="title"><%- gettext( "Activate Your Account" ) %></h4> <h4 class="title"><%- gettext( "Activate Your Account" ) %></h4>
<div class="placeholder-art"> <div class="placeholder-art">
<i class="icon-envelope-alt"></i> <i class="icon-envelope-alt"></i>
</div> </div>
<div class="copy">
<p>
<span class="copy-super"><%- gettext( "Check your email" ) %></span>
<span class="copy-sub"><%-
gettext( "You need to activate your account before you can enroll in courses. Check your inbox for an activation email." )
%>
</span>
</p>
</div>
</li>
<% } %>
<% if ( requirements['photo-id-required'] ) { %> <div class="copy">
<li class="req req-1 req-id"> <p>
<h4 class="title"><%- gettext( "Government-issued Photo ID" ) %></h4> <span class="copy-super"><%- gettext( "Check your email" ) %></span>
<div class="placeholder-art"> </p>
<i class="icon-list-alt icon-under"></i> </div>
<i class="icon-user icon-over"></i> </li>
</div> <% } else {%>
<% if ( requirements['photo-id-required'] ) { %>
<li class="req req-1 req-id">
<h4 class="title"><%- gettext( "Government-issued Photo ID" ) %></h4>
<div class="placeholder-art">
<i class="icon-list-alt icon-under"></i>
<i class="icon-user icon-over"></i>
</div>
<div class="copy"></div> <div class="copy"></div>
</li> </li>
<% } %> <% } %>
<% if ( requirements['webcam-required'] ) { %> <% if ( requirements['webcam-required'] ) { %>
<li class="req req-2 req-webcam"> <li class="req req-2 req-webcam">
<h4 class="title"><%- gettext( "Webcam" ) %></h4> <h4 class="title"><%- gettext( "Webcam" ) %></h4>
<div class="placeholder-art"> <div class="placeholder-art">
<i class="icon-facetime-video"></i> <i class="icon-facetime-video"></i>
</div> </div>
<div class="copy"></div> <div class="copy"></div>
</li> </li>
<% } %>
<% } %> <% } %>
</ul> </ul>
</div> </div>
<% } %> <% } %>
<% if ( isActive ) { %>
<nav class="nav-wizard is-ready <% if ( isActive && !upgrade ) { %>center<% } %>"> <nav class="nav-wizard is-ready <% if ( isActive && !upgrade ) { %>center<% } %>">
<% if ( upgrade ) { %> <% if ( upgrade ) { %>
<a class="next action-primary is-disabled right" id="pay_button"> <a class="next action-primary is-disabled right" id="pay_button">
<%- gettext( "Next: Make payment" ) %> <%- gettext( "Next: Make payment" ) %>
</a> </a>
<% } else if ( isActive ) { %> <% } else { %>
<a class="next action-primary is-disabled" id="pay_button"> <a class="next action-primary is-disabled" id="pay_button">
<%- gettext( "Continue to payment" ) %> <%- gettext( "Continue to payment" ) %>
</a> </a>
<% } else { %>
<a class="next action-primary is-disabled" id="activate_button">
<%- gettext( "Activate your account" ) %>
</a>
<% } %> <% } %>
</nav> </nav>
<% } %>
<form id="payment-processor-form"></form> <form id="payment-processor-form"></form>
</div> </div>
lms/templates/verify_student/pay_and_verify.html
...@@ -76,6 +76,7 @@ from verify_student.views import PayAndVerifyView ...@@ -76,6 +76,7 @@ from verify_student.views import PayAndVerifyView
data-is-active='${is_active}' data-is-active='${is_active}'
></div> ></div>
% if is_active:
## Support ## Support
<div class="wrapper-content-supplementary"> <div class="wrapper-content-supplementary">
<aside class="content-supplementary"> <aside class="content-supplementary">
...@@ -98,6 +99,7 @@ from verify_student.views import PayAndVerifyView ...@@ -98,6 +99,7 @@ from verify_student.views import PayAndVerifyView
</ul> </ul>
</aside> </aside>
</div> </div>
% endif
</section> </section>
</div> </div>
......
lms/templates/verify_student/payment_confirmation_step.underscore
...@@ -83,49 +83,49 @@ ...@@ -83,49 +83,49 @@
<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"> <li class="req req-0 req-activate">
<h4 class="title"><%- gettext( "Activate Your Account" ) %></h4> <h4 class="title"><%- gettext( "Activate Your Account" ) %></h4>
<div class="placeholder-art"> <div class="placeholder-art">
<i class="icon-envelope-alt"></i> <i class="icon-envelope-alt"></i>
</div> </div>
<div class="copy">
<p>
<span class="copy-super"><%- gettext( "Check your email." ) %></span>
<span class="copy-sub"><%-
gettext( "You need to activate your account before you can enroll in courses. Check your inbox for an activation email." )
%>
</span>
</p>
</div>
</li>
<% } %>
<% if ( requirements['photo-id-required'] ) { %> <div class="copy">
<li class="req req-1 req-id"> <p>
<h4 class="title"><%- gettext( "Photo ID" ) %></h4> <span class="copy-super"><%- gettext( "Check your email" ) %></span>
<div class="placeholder-art"> <span class="copy-sub"><%-
<i class="icon-list-alt icon-under"></i> gettext( "You need to activate your account before you can enroll in courses. Check your inbox for an activation email." )
<i class="icon-user icon-over"></i> %>
</div> </span>
</p>
</div>
</li>
<% } else { %>
<% if ( requirements['photo-id-required'] ) { %>
<li class="req req-1 req-id">
<h4 class="title"><%- gettext( "Photo ID" ) %></h4>
<div class="placeholder-art">
<i class="icon-list-alt icon-under"></i>
<i class="icon-user icon-over"></i>
</div>
<div class="copy"> <div class="copy">
<p> <p>
<span class="copy-sub"><%- gettext( "A driver's license, passport, or government-issued ID with your name and picture." ) %></span> <span class="copy-sub"><%- gettext( "A driver's license, passport, or government-issued ID with your name and picture." ) %></span>
</p> </p>
</div> </div>
</li> </li>
<% } %> <% } %>
<% if ( requirements['webcam-required'] ) { %> <% if ( requirements['webcam-required'] ) { %>
<li class="req req-2 req-webcam"> <li class="req req-2 req-webcam">
<h4 class="title"><%- gettext( "Webcam" ) %></h4> <h4 class="title"><%- gettext( "Webcam" ) %></h4>
<div class="placeholder-art"> <div class="placeholder-art">
<i class="icon-facetime-video"></i> <i class="icon-facetime-video"></i>
</div> </div>
<div class="copy"></div> <div class="copy"></div>
</li> </li>
<% } %>
<% } %> <% } %>
</ul> </ul>
</div> </div>
......
lms/templates/verify_student/review_photos_step.underscore
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
<div class="copy expandable-area"> <div class="copy expandable-area">
<p><%- gettext( "You should change the name on your account to match your ID." ) %></p> <p><%- gettext( "You should change the name on your account to match your ID." ) %></p>
<input type="text" name="new-name" id="new-name" placeholder=<%= fullName %>> <input type="text" name="new-name" id="new-name" placeholder="<%= fullName %>">
</div> </div>
</div> </div>
</li> </li>
......
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