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([
};
var expectPaymentDisabledBecauseInactive = function() {
var payButton = $( '#pay_button'),
activateButton = $( '#activate_button' );
var payButton = $( '#pay_button' );
// Payment button should be hidden
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 ) {
......
lms/static/js/verify_student/views/make_payment_step_view.js
......@@ -38,11 +38,6 @@ var edx = edx || {};
// Set the payment button to disabled by default
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
// selected in a previous screen.
if ( templateContext.contributionAmount ) {
......
lms/static/sass/views/_decoupled-verification.scss
......@@ -23,6 +23,12 @@
}
}
.placeholder-cam {
.copy {
font-weight: bold !important;
}
}
.requirements-container {
.list-reqs {
......@@ -41,7 +47,7 @@
}
&.account-not-activated {
width: 990px;
width: 300px;
.req {
height: 290px;
......@@ -75,6 +81,7 @@
display: inline;
float: left;
line-height: 45px;
color: black;
}
.wizard-steps {
......@@ -119,11 +126,23 @@
.expandable-area {
margin-top: 5px;
padding-bottom: 20px;
}
}
.help-tips {
margin-left: 0 !important;
.title {
font-size: 16px !important;
}
.list-tips {
.tip {
font-size: 16px;
line-height: 1.5em;
}
}
}
.photo-tip {
......@@ -137,6 +156,12 @@
padding-left: 20px;
}
.list-faq {
dd {
color: black;
}
}
.wrapper-task {
.msg-retake {
margin-top: 0;
......
lms/templates/verify_student/intro_step.underscore
......@@ -9,7 +9,13 @@
</h3>
<% } else { %>
<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>
<% } %>
<% } %>
......@@ -17,69 +23,63 @@
<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">
<h4 class="title"><%- gettext( "Activate Your Account" ) %></h4>
<div class="placeholder-art">
<i class="icon-envelope-alt"></i>
</div>
<li class="req req-0 req-activate">
<h4 class="title"><%- gettext( "Activate Your Account" ) %></h4>
<div class="placeholder-art">
<i class="icon-envelope-alt"></i>
</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 register for courses. Check your inbox for an activation email." )
%>
</span>
</p>
</div>
</li>
<% } %>
<% 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">
<p>
<span class="copy-super"><%- gettext( "Check your email" ) %></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">
<p>
<span class="copy-sub"><%- gettext( "A driver's license, passport, or government-issued ID with your name and picture" ) %></span>
</p>
</div>
</li>
<% } %>
<div class="copy">
<p>
<span class="copy-sub"><%- gettext( "A driver's license, passport, or government-issued ID with your name and picture" ) %></span>
</p>
</div>
</li>
<% } %>
<% if ( requirements['webcam-required'] ) { %>
<li class="req req-2 req-webcam">
<h4 class="title"><%- gettext( "Webcam" ) %></h4>
<div class="placeholder-art">
<i class="icon-facetime-video"></i>
</div>
<% if ( requirements['webcam-required'] ) { %>
<li class="req req-2 req-webcam">
<h4 class="title"><%- gettext( "Webcam" ) %></h4>
<div class="placeholder-art">
<i class="icon-facetime-video"></i>
</div>
<div class="copy"></div>
</li>
<div class="copy"></div>
</li>
<% } %>
<% } %>
</ul>
</div>
<% if ( nextStepTitle ) { %>
<% if ( nextStepTitle && isActive ) { %>
<nav class="nav-wizard is-ready">
<ol class="wizard-steps">
<li class="wizard-step">
<a class="next action-primary" <% if ( !isActive ) { %>disabled="true"<% } %> id="next_step_button" href="?skip-first-step=1">
<% if ( !isActive ) { %>
<%- gettext( "Activate Your Account" ) %>
<% } else if ( hasPaid ) { %>
<%- _.sprintf(
gettext( "Next: %(nextStepTitle)s" ),
{ nextStepTitle: nextStepTitle }
) %>
<% } else { %>
<%- nextStepTitle %>
<% } %>
</a>
<a class="next action-primary" id="next_step_button" href="?skip-first-step=1">
<% if ( hasPaid ) { %>
<%- _.sprintf(
gettext( "Next: %(nextStepTitle)s" ),
{ nextStepTitle: nextStepTitle }
) %>
<% } else { %>
<%- nextStepTitle %>
<% } %>
</a>
</li>
</ol>
</nav>
......
lms/templates/verify_student/make_payment_step.underscore
......@@ -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." ),
{ 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 ) { %>
<%- 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 @@
<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">
<h4 class="title"><%- gettext( "Activate Your Account" ) %></h4>
<div class="placeholder-art">
<i class="icon-envelope-alt"></i>
</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>
<% } %>
<li class="req req-0 req-activate">
<h4 class="title"><%- gettext( "Activate Your Account" ) %></h4>
<div class="placeholder-art">
<i class="icon-envelope-alt"></i>
</div>
<% 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">
<p>
<span class="copy-super"><%- gettext( "Check your email" ) %></span>
</p>
</div>
</li>
<% } 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>
</li>
<% } %>
<div class="copy"></div>
</li>
<% } %>
<% if ( requirements['webcam-required'] ) { %>
<li class="req req-2 req-webcam">
<h4 class="title"><%- gettext( "Webcam" ) %></h4>
<div class="placeholder-art">
<i class="icon-facetime-video"></i>
</div>
<% if ( requirements['webcam-required'] ) { %>
<li class="req req-2 req-webcam">
<h4 class="title"><%- gettext( "Webcam" ) %></h4>
<div class="placeholder-art">
<i class="icon-facetime-video"></i>
</div>
<div class="copy"></div>
</li>
<div class="copy"></div>
</li>
<% } %>
<% } %>
</ul>
</div>
<% } %>
<% if ( isActive ) { %>
<nav class="nav-wizard is-ready <% if ( isActive && !upgrade ) { %>center<% } %>">
<% if ( upgrade ) { %>
<a class="next action-primary is-disabled right" id="pay_button">
<%- gettext( "Next: Make payment" ) %>
</a>
<% } else if ( isActive ) { %>
<% } else { %>
<a class="next action-primary is-disabled" id="pay_button">
<%- gettext( "Continue to payment" ) %>
</a>
<% } else { %>
<a class="next action-primary is-disabled" id="activate_button">
<%- gettext( "Activate your account" ) %>
</a>
<% } %>
</nav>
<% } %>
<form id="payment-processor-form"></form>
</div>
lms/templates/verify_student/pay_and_verify.html
......@@ -76,6 +76,7 @@ from verify_student.views import PayAndVerifyView
data-is-active='${is_active}'
></div>
% if is_active:
## Support
<div class="wrapper-content-supplementary">
<aside class="content-supplementary">
......@@ -98,6 +99,7 @@ from verify_student.views import PayAndVerifyView
</ul>
</aside>
</div>
% endif
</section>
</div>
......
lms/templates/verify_student/payment_confirmation_step.underscore
......@@ -83,49 +83,49 @@
<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">
<h4 class="title"><%- gettext( "Activate Your Account" ) %></h4>
<div class="placeholder-art">
<i class="icon-envelope-alt"></i>
</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>
<% } %>
<li class="req req-0 req-activate">
<h4 class="title"><%- gettext( "Activate Your Account" ) %></h4>
<div class="placeholder-art">
<i class="icon-envelope-alt"></i>
</div>
<% 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">
<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>
<% } 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">
<p>
<span class="copy-sub"><%- gettext( "A driver's license, passport, or government-issued ID with your name and picture." ) %></span>
</p>
</div>
</li>
<% } %>
<div class="copy">
<p>
<span class="copy-sub"><%- gettext( "A driver's license, passport, or government-issued ID with your name and picture." ) %></span>
</p>
</div>
</li>
<% } %>
<% if ( requirements['webcam-required'] ) { %>
<li class="req req-2 req-webcam">
<h4 class="title"><%- gettext( "Webcam" ) %></h4>
<div class="placeholder-art">
<i class="icon-facetime-video"></i>
</div>
<% if ( requirements['webcam-required'] ) { %>
<li class="req req-2 req-webcam">
<h4 class="title"><%- gettext( "Webcam" ) %></h4>
<div class="placeholder-art">
<i class="icon-facetime-video"></i>
</div>
<div class="copy"></div>
</li>
<div class="copy"></div>
</li>
<% } %>
<% } %>
</ul>
</div>
......
lms/templates/verify_student/review_photos_step.underscore
......@@ -35,7 +35,7 @@
<div class="copy expandable-area">
<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>
</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