Commit 23da87f0 by AlasdairSwan

Merge pull request #6414 from edx/alasdair/decoupled-verified-state-copy-cleanup

ECOM-811 design and layout changes
parents 35ec3611 686905d9
......@@ -279,27 +279,27 @@ class PayAndVerifyView(View):
template_name="intro_step"
),
MAKE_PAYMENT_STEP: Step(
title=ugettext_lazy("Make Payment"),
title=ugettext_lazy("Make payment"),
template_name="make_payment_step"
),
PAYMENT_CONFIRMATION_STEP: Step(
title=ugettext_lazy("Payment Confirmation"),
title=ugettext_lazy("Payment confirmation"),
template_name="payment_confirmation_step"
),
FACE_PHOTO_STEP: Step(
title=ugettext_lazy("Take Photo"),
title=ugettext_lazy("Take photo"),
template_name="face_photo_step"
),
ID_PHOTO_STEP: Step(
title=ugettext_lazy("Take a Photo of Your ID"),
title=ugettext_lazy("Take a photo of your ID"),
template_name="id_photo_step"
),
REVIEW_PHOTOS_STEP: Step(
title=ugettext_lazy("Review Your Info"),
title=ugettext_lazy("Review your info"),
template_name="review_photos_step"
),
ENROLLMENT_CONFIRMATION_STEP: Step(
title=ugettext_lazy("Enrollment Confirmation"),
title=ugettext_lazy("Enrollment confirmation"),
template_name="enrollment_confirmation_step"
),
}
......@@ -318,55 +318,6 @@ class PayAndVerifyView(View):
UPGRADE_MSG = 'upgrade'
PAYMENT_CONFIRMATION_MSG = 'payment-confirmation'
Message = namedtuple(
'Message',
[
'page_title',
'top_level_msg',
'status_msg',
'intro_title',
'intro_msg'
]
)
MESSAGES = {
FIRST_TIME_VERIFY_MSG: Message(
page_title=ugettext_lazy("Enroll In {course_name}"),
top_level_msg=ugettext_lazy("Congrats! You are now enrolled in {course_name}."),
status_msg=ugettext_lazy("Enrolling as"),
intro_title=ugettext_lazy("What You Will Need To Enroll"),
intro_msg=ugettext_lazy("There are {num_requirements} things you will need to enroll in the {course_mode} track.")
),
VERIFY_NOW_MSG: Message(
page_title=ugettext_lazy("Enroll In {course_name}"),
top_level_msg=ugettext_lazy("Congrats! You are now enrolled in {course_name}."),
status_msg=ugettext_lazy("Enrolled as"),
intro_title=ugettext_lazy("What You Will Need To Enroll"),
intro_msg=ugettext_lazy("There are {num_requirements} things you will need to enroll in the {course_mode} track.")
),
VERIFY_LATER_MSG: Message(
page_title=ugettext_lazy("Enroll In {course_name}"),
top_level_msg=ugettext_lazy("Congrats! You are now enrolled in {course_name}."),
status_msg=ugettext_lazy("Enrolled as"),
intro_title=ugettext_lazy("What You Will Need To Verify"),
intro_msg=ugettext_lazy("There are {num_requirements} things you will need to complete verification.")
),
UPGRADE_MSG: Message(
page_title=ugettext_lazy("Upgrade Your Enrollment For {course_name}."),
top_level_msg=ugettext_lazy("You are upgrading your enrollment for {course_name}."),
status_msg=ugettext_lazy("Upgrading to"),
intro_title=ugettext_lazy("What You Will Need To Upgrade"),
intro_msg=ugettext_lazy("There are {num_requirements} things you will need to complete upgrade to the {course_mode} track.")
),
PAYMENT_CONFIRMATION_MSG: Message(
page_title=ugettext_lazy("Payment Confirmation"),
top_level_msg=ugettext_lazy("You are now enrolled in {course_name}."),
status_msg=ugettext_lazy("Enrolled as"),
intro_title="",
intro_msg=""
)
}
# Requirements
#
# These explain to the user what he or she
......@@ -505,30 +456,24 @@ class PayAndVerifyView(View):
# Render the top-level page
context = {
'user_full_name': full_name,
'contribution_amount': contribution_amount,
'course': course,
'course_key': unicode(course_key),
'course_mode': course_mode,
'verification_deadline': (
get_default_time_display(course_mode.expiration_datetime)
if course_mode.expiration_datetime else ""
),
'courseware_url': courseware_url,
'current_step': current_step,
'disable_courseware_js': True,
'display_steps': display_steps,
'contribution_amount': contribution_amount,
'is_active': json.dumps(request.user.is_active),
'messages': self._messages(
message,
course.display_name,
course_mode,
requirements
),
'message_key': message,
'platform_name': settings.PLATFORM_NAME,
'purchase_endpoint': get_purchase_endpoint(),
'requirements': requirements,
'user_full_name': full_name,
'verification_deadline': (
get_default_time_display(course_mode.expiration_datetime)
if course_mode.expiration_datetime else ""
),
}
return render_to_response("verify_student/pay_and_verify.html", context)
......@@ -677,42 +622,6 @@ class PayAndVerifyView(View):
return all_requirements
def _messages(self, message_key, course_name, course_mode, requirements):
"""Construct messages based on how the user arrived at the page.
Arguments:
message_key (string): One of the keys in `MESSAGES`.
course_name (unicode): The name of the course the user wants to enroll in.
course_mode (CourseMode): The course mode for the course.
requirements (dict): The requirements for verifying and/or paying.
Returns:
`Message` (namedtuple)
"""
messages = self.MESSAGES[message_key]
# Count requirements
num_requirements = sum([
1 if requirement else 0
for requirement in requirements.values()
])
context = {
'course_name': course_name,
'course_mode': course_mode.name,
'num_requirements': num_requirements
}
# Interpolate the course name / mode into messaging strings
# Implicitly force lazy translations to unicode
return self.Message(
**{
key: value.format(**context)
for key, value in messages._asdict().iteritems() # pylint: disable=protected-access
}
)
def _check_already_verified(self, user):
"""Check whether the user has a valid or pending verification.
......
......@@ -36,9 +36,9 @@ var edx = edx || {};
currentStep: el.data('current-step'),
stepInfo: {
'intro-step': {
courseName: el.data('course-name'),
hasPaid: el.data('msg-key') === 'verify-now' || el.data('msg-key') === 'verify-later',
isActive: el.data('is-active'),
introTitle: el.data('intro-title'),
introMsg: el.data('intro-msg'),
platformName: el.data('platform-name'),
requirements: el.data('requirements')
},
......@@ -47,7 +47,11 @@ var edx = edx || {};
requirements: el.data('requirements'),
courseKey: el.data('course-key'),
courseName: el.data('course-name'),
upgrade: el.data('data-msg-key') === 'upgrade',
hasVisibleReqs: _.some(
el.data('requirements'),
function( isVisible ) { return isVisible; }
),
upgrade: el.data('msg-key') === 'upgrade',
minPrice: el.data('course-mode-min-price'),
contributionAmount: el.data('contribution-amount'),
suggestedPrices: _.filter(
......
......@@ -15,6 +15,7 @@ var edx = edx || {};
introTitle: '',
introMsg: '',
isActive: false,
hasPaid: false,
platformName: '',
requirements: {}
};
......
......@@ -20,6 +20,7 @@ var edx = edx || {};
verificationDeadline: '',
courseName: '',
requirements: {},
hasVisibleReqs: false,
platformName: ''
};
},
......
......@@ -15,6 +15,14 @@
}
}
.payment-info {
padding: 5px 0 30px;
.copy {
margin: 20px 0;
}
}
.requirements-container {
.list-reqs {
......@@ -74,6 +82,26 @@
}
}
.photo-controls {
position: relative;
.control {
&.control-do {
left: 45%;
left: calc( ( 50% ) - ( 69px / 2 ) );
}
&.control-retake {
left: 40%;
left: calc( ( 50% ) - ( 131px / 2 ) );
}
.action-redo {
line-height: 28px;
}
}
}
.retake-photos {
color: $blue;
......@@ -98,6 +126,17 @@
margin-left: 0 !important;
}
.photo-tip {
@extend %t-copy-sub1;
color: black;
margin-bottom: 20px;
}
.list-help {
list-style: disc;
padding-left: 20px;
}
.wrapper-task {
.msg-retake {
margin-top: 0;
......@@ -115,6 +154,7 @@
}
}
}
.enrollment-status-footer {
margin: 50px 0;
......
......@@ -2,7 +2,7 @@
<article class="content-main">
<h3 class="title"><%- _.sprintf( gettext( "Congratulations! You are now verified on %(platformName)s!" ), { platformName: platformName } ) %></h3>
<div class="instruction">
<p><%- gettext( "You are now enrolled as an ID verified student for:" ) %></p>
<p><%- gettext( "You are now enrolled as a verified student for:" ) %></p>
</div>
<ul class="list-info">
......@@ -34,7 +34,7 @@
<% } %>
</td>
<td>
<a class="action action-primary" href="/dashboard"><%- gettext("Go to your dashboard") %></a>
<a class="action action-primary" href="/dashboard"><%- gettext("Go to your Dashboard") %></a>
</td>
</tr>
</tfoot>
......
......@@ -17,7 +17,7 @@
<li class="help-item"><%- gettext( "Make sure your face is well-lit" ) %></li>
<li class="help-item"><%- gettext( "Be sure your entire face is inside the frame" ) %></li>
<li class="help-item">
<%= _.sprintf( gettext( "Once in position, use the camera button %(icon)s to capture your face" ), { icon: '<span class="example">(<i class="icon-camera"></i>)</span>' } ) %>
<%= _.sprintf( gettext( "Once in position, use the camera button %(icon)s to capture your picture" ), { icon: '<span class="example">(<i class="icon-camera"></i>)</span>' } ) %>
</li>
<li class="help-item"><%- gettext( "Can we match the photo you took with the one on your ID?" ) %></li>
<li class="help-item"><%- gettext( "Use the retake photo button if you are not pleased with your photo" ) %></li>
......@@ -46,7 +46,10 @@
<% if ( nextStepTitle ) { %>
<nav class="nav-wizard" id="face_next_button_nav">
<a id="next_step_button" class="next action-primary is-disabled right" aria-hidden="true" title="Next">
<%- nextStepTitle %>
<%- _.sprintf(
gettext( "Next: %(nextStepTitle)s" ),
{ nextStepTitle: nextStepTitle }
) %>
</a>
</nav>
......
......@@ -10,18 +10,18 @@
<div class="wrapper-help">
<div class="help help-task photo-tips idtips">
<p class="photo-tip"><%- gettext( "You need an ID with your name and photo. A driver's license, passport, or other government-issued IDs are all acceptable." ) %></p>
<h4 class="title"><%- gettext( "Tips on taking a successful photo" ) %></h4>
<div class="copy">
<ul class="list-help">
<li class="help-item"><%- gettext( "Make sure your ID is well-lit" ) %></li>
<li class="help-item"><%- gettext( "Check that there isn't any glare" ) %></li>
<li class="help-item"><%- gettext( "Ensure that you can see your photo and read your name" ) %></li>
<li class="help-item"><%- gettext( "Try to keep your fingers at the edge to avoid covering important information" ) %></li>
<li class="help-item"><%- gettext( "Acceptable IDs include driver's licenses, passports, or other government-issued IDs that include your name and photo" ) %></li>
<li class="help-item"><%- gettext( "Make sure your ID is well-lit" ) %></li>
<li class="help-item">
<%= _.sprintf( gettext( "Once in position, use the camera button %(icon)s to capture your ID" ), { icon: '<span class="example">(<i class="icon-camera"></i>)</span>' } ) %>
</li>
<li class="help-item"><%- gettext( "Use the retake photo button if you are not pleased with your photo" ) %></li>
</ul>
</div>
</div>
......@@ -31,10 +31,14 @@
<div class="copy">
<dl class="list-faq">
<dt class="faq-question"><%- gettext( "Why do you need a photo of my ID?" ) %></dt>
<dd class="faq-answer"><%- gettext( "We need to match your ID with your photo and name to confirm that you are you." ) %></dd>
<dt class="faq-question">
<%- _.sprintf( gettext( "Why does %(platformName)s need my photo?" ), { platformName: platformName } ) %>
</dt>
<dd class="faq-answer"><%- gettext( "We need to match your ID with your photo and name to confirm your identity." ) %></dd>
<dt class="faq-question"><%- gettext( "What do you do with this picture?" ) %></dt>
<dt class="faq-question">
<%- _.sprintf( gettext( "What does %(platformName)s do with this picture?" ), { platformName: platformName } ) %>
</dt>
<dd class="faq-answer"><%- gettext( "We encrypt it and send it to our secure authorization service for review. We use the highest levels of security and do not save the photo or information anywhere once the match has been completed." ) %></dd>
</dl>
</div>
......@@ -45,7 +49,10 @@
<% if ( nextStepTitle ) { %>
<nav class="nav-wizard" id="face_next_button_nav">
<a id="next_step_button" class="next action-primary is-disabled right" aria-hidden="true" title="Next">
<%- nextStepTitle %>
<%- _.sprintf(
gettext( "Next: %(nextStepTitle)s" ),
{ nextStepTitle: nextStepTitle }
) %>
</a>
</nav>
<% } %>
......
<div class="wrapper-content-main intro-step">
<article class="content-main">
<% if ( hasPaid ) { %>
<h3 class="title">
<%= _.sprintf(
gettext( "Thanks for returning to verify your ID in: %(courseName)s"),
{ courseName: '<span class="course-title">' + courseName + '</span>' }
) %>
</h3>
<% } else { %>
<h3 class="title"><%- introTitle %></h3>
<% if ( introMsg ) { %>
<div class="instruction"><p><%- introMsg %></p></div>
<% } %>
<% } %>
<div class="requirements-container">
<ul class="list-reqs <% if ( requirements['account-activation-required'] ) { %>account-not-activated<% } %>">
......@@ -62,6 +71,11 @@
<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 %>
<% } %>
......
<div id="wrapper-review" class="wrapper-view make-payment-step">
<div class="review view">
<h3 class="title <% if ( !upgrade ) { %>center-col<% } %>">
<%- gettext( "You are enrolling in: " ) %>
<span class="course-title"><%= courseName %></span>
</h3>
<% if ( !upgrade ) { %>
<h3 class="title center-col">
<%= _.sprintf(
gettext( "You are enrolling in: %(courseName)s"),
{ courseName: '<span class="course-title">' + courseName + '</span>' }
) %>
</h3>
<% } else { %>
<h3 class="title">
<%= _.sprintf(
gettext( "You are upgrading your enrollment for: %(courseName)s"),
{ courseName: '<span class="course-title">' + courseName + '</span>' }
) %>
</h3>
<div class="instruction">
<%- gettext( "We've already verified your identity through the photos of you and your ID you provided earlier. You can now pay and complete registration." ) %>
</div>
<% } %>
<% if ( isActive ) { %>
<% if ( isActive && ( !hasVisibleReqs || upgrade ) ) { %>
<div class="wrapper-task hidden" aria-hidden="true">
<ol class="review-tasks">
<% if ( suggestedPrices.length > 0 ) { %>
<li class="review-task review-task-contribution">
<h4 class="title"><%- gettext( "Enter Your Contribution Level" ) %></h4>
<h4 class="title">
<% if ( upgrade ) { %>
<%- gettext( "Choose your contribution for your Verified Track upgrade" ) %>
<% } else { %>
<%- gettext( "Enter Your Contribution Level" ) %>
<% } %>
</h4>
<div class="copy">
<p><%- _.sprintf(
gettext( "Please confirm your contribution for this course (min. $ %(minPrice)s %(currency)s)" ),
{ minPrice: minPrice, currency: currency }
) %>
<p>
<% if ( !upgrade ) { %>
<%- _.sprintf(
gettext( "Please confirm your contribution for this course (min. $ %(minPrice)s %(currency)s)" ),
{ minPrice: minPrice, currency: currency }
) %>
<% } %>
</p>
</div>
......@@ -73,6 +96,7 @@
</div>
</div>
<% } %>
<div class="instruction <% if ( !upgrade ) { %>center-col<% } %>">
<% if ( _.some( requirements, function( isVisible ) { return isVisible; } ) ) { %>
<p>
......@@ -81,13 +105,14 @@
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 { %>
<% } 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." ) %>
<% } %>
</p>
<% } %>
</div>
<% if ( !upgrade ) { %>
<div class="requirements-container">
<ul class="list-reqs <% if ( requirements['account-activation-required'] ) { %>account-not-activated<% } %>">
<% if ( requirements['account-activation-required'] ) { %>
......@@ -111,7 +136,7 @@
<% if ( requirements['photo-id-required'] ) { %>
<li class="req req-1 req-id">
<h4 class="title"><%- gettext( "Government-Issued Photo ID" ) %></h4>
<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>
......@@ -133,18 +158,23 @@
<% } %>
</ul>
</div>
<% } %>
<nav class="nav-wizard is-ready center">
<% 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 ) { %>
<a class="next action-primary is-disabled" id="pay_button">
<%- gettext( "Go to payment" ) %>
<%- gettext( "Continue to payment" ) %>
</a>
<% } else { %>
<% } else { %>
<a class="next action-primary is-disabled" id="activate_button">
<%- gettext( "Activate Your Account" ) %>
<%- gettext( "Activate your account" ) %>
</a>
<% } %>
<% } %>
</nav>
<form id="payment-processor-form"></form>
......
......@@ -7,7 +7,19 @@ from verify_student.views import PayAndVerifyView
<%inherit file="../main.html" />
<%block name="bodyclass">register verification-process step-requirements</%block>
<%block name="pagetitle">${messages.page_title}</%block>
<%block name="pagetitle">
% if message_key == PayAndVerifyView.UPGRADE_MSG:
${_("Upgrade Your Enrollment For {course_name}.").format(course_name=course.display_name)}
% elif message_key == PayAndVerifyView.PAYMENT_CONFIRMATION_MSG:
${_("Receipt For {course_name}").format(course_name=course.display_name)}
% elif message_key in [PayAndVerifyView.VERIFY_NOW_MSG, PayAndVerifyView.VERIFY_LATER_MSG]:
${_("Verify For {course_name}").format(course_name=course.display_name)}
% else:
${_("Enroll In {course_name}").format(course_name=course.display_name)}
% endif
</%block>
<%block name="header_extras">
<%
template_names = (
......@@ -62,8 +74,6 @@ from verify_student.views import PayAndVerifyView
data-requirements='${json.dumps(requirements)}'
data-msg-key='${message_key}'
data-is-active='${is_active}'
data-intro-title='${messages.intro_title}'
data-intro-msg='${messages.intro_msg}'
></div>
## Support
......
<div class="wrapper-content-main payment-confirmation-step">
<article class="content-main">
<h3 class="title">
<%- _.sprintf( gettext( "Thank you! We have received your payment for %(courseName)s" ), { courseName: courseName } ) %>
<%= _.sprintf( gettext( "Thank you! We have received your payment for %(courseName)s" ), { courseName: '<span class="course-title">' + courseName + '</span>' } ) %>
</h3>
<% if ( receipt ) { %>
......@@ -28,13 +28,13 @@
<td><del><%- receipt.orderNum %></del></td>
<td><del><%- receipt.items[i].lineDescription %></del></td>
<td><del><%- receipt.purchasedDatetime %></del></td>
<td><del><%- receipt.items[i].cost %> ($<%- receipt.currency.toUpperCase() %>)</del></td>
<td><del><%- receipt.items[i].cost %> (<%- receipt.currency.toUpperCase() %>)</del></td>
<% } else { %>
<tr>
<td><%- receipt.orderNum %></td>
<td><%- receipt.items[i].lineDescription %></td>
<td><%- receipt.purchasedDatetime %></td>
<td><%- receipt.items[i].cost %> ($<%- receipt.currency.toUpperCase() %>)</td>
<td><%- receipt.items[i].cost %> (<%- receipt.currency.toUpperCase() %>)</td>
</tr>
<% } %>
<% } %>
......@@ -78,7 +78,7 @@
<% } %>
<% if ( nextStepTitle ) { %>
<h3 class="title"><%- gettext( "Next Step: Confirm Your Identity" ) %></h3>
<h3 class="title"><%- gettext( "Next Step: Confirm your identity" ) %></h3>
<div class="requirements-container">
<ul class="list-reqs <% if ( requirements['account-activation-required'] ) { %>account-not-activated<% } %>">
......@@ -135,7 +135,10 @@
class="next action-primary right"
href="<%- _.sprintf( '/verify_student/verify-now/%(courseKey)s', { courseKey: courseKey } ) %>"
>
<%- nextStepTitle %>
<%- _.sprintf(
gettext( "Next: %(nextStepTitle)s" ),
{ nextStepTitle: nextStepTitle }
) %>
</a>
<a id="verify_later_button" class="next action-secondary verify-later nav-link" href="/dashboard" data-tooltip="<%- _.sprintf( gettext( "If you don't confirm your identity now, you can go to the dashboard to explore your course and %(platformName)s will remind you later." ), { platformName: platformName } ) %>">
......
<div id="wrapper-review" class="wrapper-view review-photos-step">
<div class="review view">
<h3 class="title"><%- gettext( "Review Your Photos" ) %></h3>
<h3 class="title"><%- gettext( "Review your photos" ) %></h3>
<div class="instruction">
<p><%- gettext( "Make sure we can verify your identity from the photos below." ) %></p>
</div>
......@@ -30,7 +30,7 @@
<li class="tip"><%- _.sprintf( gettext( "Does the name on your ID match your account name: %(fullName)s?" ), { fullName: fullName } ) %>
<div class="help-tip is-expandable">
<a href="#" class="title title-expand" aria-expanded="false" role="link">
<%- gettext( "Edit Your Name" ) %>
<%- gettext( "Edit your name" ) %>
</a>
<div class="copy expandable-area">
......@@ -48,7 +48,7 @@
<p>
<%- gettext( "Photos don't meet the requirements?" ) %>
<a id="retake_photos_button" class="retake-photos">
<%- gettext( "Retake Your Photos" ) %>
<%- gettext( "Retake your photos" ) %>
</a>
</p>
</div>
......@@ -59,13 +59,13 @@
<nav class="nav-wizard">
<div class="prompt-verify">
<h3 class="title"><%- gettext( "Before proceeding, please confirm that your photos match." ) %></h3>
<h3 class="title"><%- gettext( "Before proceeding, please confirm that your details match" ) %></h3>
</div>
<ol class="wizard-steps">
<li class="wizard-step step-proceed">
<a id="next_step_button" class="next action-primary right" aria-hidden="true" title="Confirmation">
<%- gettext( "Confirmation" ) %>
<%- gettext( "Confirm" ) %>
</a>
</li>
</ol>
......
......@@ -8,14 +8,12 @@
</div>
<div class="controls photo-controls">
<ul class="list-controls">
<li class="control control-retake is-hidden" id="webcam_reset_button">
<a class="action action-redo"><%- gettext( "Retake Photo" ) %></a>
</li>
<li class="control control-do is-hidden" id="webcam_capture_button">
<a class="action action-do">
<i class="icon-camera"></i> <span class="sr"><%- gettext( "Take photo" ) %></span>
</a>
</li>
</ul>
<div class="control control-retake is-hidden" id="webcam_reset_button">
<a class="action action-redo"><%- gettext( "Retake photo" ) %></a>
</div>
<div class="control control-do is-hidden" id="webcam_capture_button">
<a class="action action-do">
<i class="icon-camera"></i> <span class="sr"><%- gettext( "Take photo" ) %></span>
</a>
</div>
</div>
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