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): ...@@ -279,27 +279,27 @@ class PayAndVerifyView(View):
template_name="intro_step" template_name="intro_step"
), ),
MAKE_PAYMENT_STEP: Step( MAKE_PAYMENT_STEP: Step(
title=ugettext_lazy("Make Payment"), title=ugettext_lazy("Make payment"),
template_name="make_payment_step" template_name="make_payment_step"
), ),
PAYMENT_CONFIRMATION_STEP: Step( PAYMENT_CONFIRMATION_STEP: Step(
title=ugettext_lazy("Payment Confirmation"), title=ugettext_lazy("Payment confirmation"),
template_name="payment_confirmation_step" template_name="payment_confirmation_step"
), ),
FACE_PHOTO_STEP: Step( FACE_PHOTO_STEP: Step(
title=ugettext_lazy("Take Photo"), title=ugettext_lazy("Take photo"),
template_name="face_photo_step" template_name="face_photo_step"
), ),
ID_PHOTO_STEP: 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" template_name="id_photo_step"
), ),
REVIEW_PHOTOS_STEP: Step( REVIEW_PHOTOS_STEP: Step(
title=ugettext_lazy("Review Your Info"), title=ugettext_lazy("Review your info"),
template_name="review_photos_step" template_name="review_photos_step"
), ),
ENROLLMENT_CONFIRMATION_STEP: Step( ENROLLMENT_CONFIRMATION_STEP: Step(
title=ugettext_lazy("Enrollment Confirmation"), title=ugettext_lazy("Enrollment confirmation"),
template_name="enrollment_confirmation_step" template_name="enrollment_confirmation_step"
), ),
} }
...@@ -318,55 +318,6 @@ class PayAndVerifyView(View): ...@@ -318,55 +318,6 @@ class PayAndVerifyView(View):
UPGRADE_MSG = 'upgrade' UPGRADE_MSG = 'upgrade'
PAYMENT_CONFIRMATION_MSG = 'payment-confirmation' 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 # Requirements
# #
# These explain to the user what he or she # These explain to the user what he or she
...@@ -505,30 +456,24 @@ class PayAndVerifyView(View): ...@@ -505,30 +456,24 @@ class PayAndVerifyView(View):
# Render the top-level page # Render the top-level page
context = { context = {
'user_full_name': full_name, 'contribution_amount': contribution_amount,
'course': course, 'course': course,
'course_key': unicode(course_key), 'course_key': unicode(course_key),
'course_mode': course_mode, 'course_mode': course_mode,
'verification_deadline': (
get_default_time_display(course_mode.expiration_datetime)
if course_mode.expiration_datetime else ""
),
'courseware_url': courseware_url, 'courseware_url': courseware_url,
'current_step': current_step, 'current_step': current_step,
'disable_courseware_js': True, 'disable_courseware_js': True,
'display_steps': display_steps, 'display_steps': display_steps,
'contribution_amount': contribution_amount,
'is_active': json.dumps(request.user.is_active), 'is_active': json.dumps(request.user.is_active),
'messages': self._messages(
message,
course.display_name,
course_mode,
requirements
),
'message_key': message, 'message_key': message,
'platform_name': settings.PLATFORM_NAME, 'platform_name': settings.PLATFORM_NAME,
'purchase_endpoint': get_purchase_endpoint(), 'purchase_endpoint': get_purchase_endpoint(),
'requirements': requirements, '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) return render_to_response("verify_student/pay_and_verify.html", context)
...@@ -677,42 +622,6 @@ class PayAndVerifyView(View): ...@@ -677,42 +622,6 @@ class PayAndVerifyView(View):
return all_requirements 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): def _check_already_verified(self, user):
"""Check whether the user has a valid or pending verification. """Check whether the user has a valid or pending verification.
......
...@@ -36,9 +36,9 @@ var edx = edx || {}; ...@@ -36,9 +36,9 @@ var edx = edx || {};
currentStep: el.data('current-step'), currentStep: el.data('current-step'),
stepInfo: { stepInfo: {
'intro-step': { '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'), isActive: el.data('is-active'),
introTitle: el.data('intro-title'),
introMsg: el.data('intro-msg'),
platformName: el.data('platform-name'), platformName: el.data('platform-name'),
requirements: el.data('requirements') requirements: el.data('requirements')
}, },
...@@ -47,7 +47,11 @@ var edx = edx || {}; ...@@ -47,7 +47,11 @@ var edx = edx || {};
requirements: el.data('requirements'), requirements: el.data('requirements'),
courseKey: el.data('course-key'), courseKey: el.data('course-key'),
courseName: el.data('course-name'), 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'), minPrice: el.data('course-mode-min-price'),
contributionAmount: el.data('contribution-amount'), contributionAmount: el.data('contribution-amount'),
suggestedPrices: _.filter( suggestedPrices: _.filter(
......
...@@ -15,6 +15,7 @@ var edx = edx || {}; ...@@ -15,6 +15,7 @@ var edx = edx || {};
introTitle: '', introTitle: '',
introMsg: '', introMsg: '',
isActive: false, isActive: false,
hasPaid: false,
platformName: '', platformName: '',
requirements: {} requirements: {}
}; };
......
...@@ -20,6 +20,7 @@ var edx = edx || {}; ...@@ -20,6 +20,7 @@ var edx = edx || {};
verificationDeadline: '', verificationDeadline: '',
courseName: '', courseName: '',
requirements: {}, requirements: {},
hasVisibleReqs: false,
platformName: '' platformName: ''
}; };
}, },
......
...@@ -15,6 +15,14 @@ ...@@ -15,6 +15,14 @@
} }
} }
.payment-info {
padding: 5px 0 30px;
.copy {
margin: 20px 0;
}
}
.requirements-container { .requirements-container {
.list-reqs { .list-reqs {
...@@ -74,6 +82,26 @@ ...@@ -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 { .retake-photos {
color: $blue; color: $blue;
...@@ -98,6 +126,17 @@ ...@@ -98,6 +126,17 @@
margin-left: 0 !important; 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 { .wrapper-task {
.msg-retake { .msg-retake {
margin-top: 0; margin-top: 0;
...@@ -115,6 +154,7 @@ ...@@ -115,6 +154,7 @@
} }
} }
} }
.enrollment-status-footer { .enrollment-status-footer {
margin: 50px 0; margin: 50px 0;
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<article class="content-main"> <article class="content-main">
<h3 class="title"><%- _.sprintf( gettext( "Congratulations! You are now verified on %(platformName)s!" ), { platformName: platformName } ) %></h3> <h3 class="title"><%- _.sprintf( gettext( "Congratulations! You are now verified on %(platformName)s!" ), { platformName: platformName } ) %></h3>
<div class="instruction"> <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> </div>
<ul class="list-info"> <ul class="list-info">
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
<% } %> <% } %>
</td> </td>
<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> </td>
</tr> </tr>
</tfoot> </tfoot>
......
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
<li class="help-item"><%- gettext( "Make sure your face is well-lit" ) %></li> <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"><%- gettext( "Be sure your entire face is inside the frame" ) %></li>
<li class="help-item"> <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>
<li class="help-item"><%- gettext( "Can we match the photo you took with the one on your ID?" ) %></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> <li class="help-item"><%- gettext( "Use the retake photo button if you are not pleased with your photo" ) %></li>
...@@ -46,7 +46,10 @@ ...@@ -46,7 +46,10 @@
<% if ( nextStepTitle ) { %> <% if ( nextStepTitle ) { %>
<nav class="nav-wizard" id="face_next_button_nav"> <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"> <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> </a>
</nav> </nav>
......
...@@ -10,18 +10,18 @@ ...@@ -10,18 +10,18 @@
<div class="wrapper-help"> <div class="wrapper-help">
<div class="help help-task photo-tips idtips"> <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> <h4 class="title"><%- gettext( "Tips on taking a successful photo" ) %></h4>
<div class="copy"> <div class="copy">
<ul class="list-help"> <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( "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( "Make sure your ID is well-lit" ) %></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"> <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>' } ) %> <%= _.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>
<li class="help-item"><%- gettext( "Use the retake photo button if you are not pleased with your photo" ) %></li>
</ul> </ul>
</div> </div>
</div> </div>
...@@ -31,10 +31,14 @@ ...@@ -31,10 +31,14 @@
<div class="copy"> <div class="copy">
<dl class="list-faq"> <dl class="list-faq">
<dt class="faq-question"><%- gettext( "Why do you need a photo of my ID?" ) %></dt> <dt class="faq-question">
<dd class="faq-answer"><%- gettext( "We need to match your ID with your photo and name to confirm that you are you." ) %></dd> <%- _.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> <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> </dl>
</div> </div>
...@@ -45,7 +49,10 @@ ...@@ -45,7 +49,10 @@
<% if ( nextStepTitle ) { %> <% if ( nextStepTitle ) { %>
<nav class="nav-wizard" id="face_next_button_nav"> <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"> <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> </a>
</nav> </nav>
<% } %> <% } %>
......
<div class="wrapper-content-main intro-step"> <div class="wrapper-content-main intro-step">
<article class="content-main"> <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> <h3 class="title"><%- introTitle %></h3>
<% if ( introMsg ) { %> <% if ( introMsg ) { %>
<div class="instruction"><p><%- introMsg %></p></div> <div class="instruction"><p><%- introMsg %></p></div>
<% } %> <% } %>
<% } %>
<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<% } %>">
...@@ -62,6 +71,11 @@ ...@@ -62,6 +71,11 @@
<a class="next action-primary" <% if ( !isActive ) { %>disabled="true"<% } %> id="next_step_button" href="?skip-first-step=1"> <a class="next action-primary" <% if ( !isActive ) { %>disabled="true"<% } %> id="next_step_button" href="?skip-first-step=1">
<% if ( !isActive ) { %> <% if ( !isActive ) { %>
<%- gettext( "Activate Your Account" ) %> <%- gettext( "Activate Your Account" ) %>
<% } else if ( hasPaid ) { %>
<%- _.sprintf(
gettext( "Next: %(nextStepTitle)s" ),
{ nextStepTitle: nextStepTitle }
) %>
<% } else { %> <% } else { %>
<%- nextStepTitle %> <%- nextStepTitle %>
<% } %> <% } %>
......
<div id="wrapper-review" class="wrapper-view make-payment-step"> <div id="wrapper-review" class="wrapper-view make-payment-step">
<div class="review view"> <div class="review view">
<h3 class="title <% if ( !upgrade ) { %>center-col<% } %>"> <% if ( !upgrade ) { %>
<%- gettext( "You are enrolling in: " ) %> <h3 class="title center-col">
<span class="course-title"><%= courseName %></span> <%= _.sprintf(
</h3> 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"> <div class="wrapper-task hidden" aria-hidden="true">
<ol class="review-tasks"> <ol class="review-tasks">
<% if ( suggestedPrices.length > 0 ) { %> <% if ( suggestedPrices.length > 0 ) { %>
<li class="review-task review-task-contribution"> <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"> <div class="copy">
<p><%- _.sprintf( <p>
gettext( "Please confirm your contribution for this course (min. $ %(minPrice)s %(currency)s)" ), <% if ( !upgrade ) { %>
{ minPrice: minPrice, currency: currency } <%- _.sprintf(
) %> gettext( "Please confirm your contribution for this course (min. $ %(minPrice)s %(currency)s)" ),
{ minPrice: minPrice, currency: currency }
) %>
<% } %>
</p> </p>
</div> </div>
...@@ -73,6 +96,7 @@ ...@@ -73,6 +96,7 @@
</div> </div>
</div> </div>
<% } %> <% } %>
<div class="instruction <% if ( !upgrade ) { %>center-col<% } %>"> <div class="instruction <% if ( !upgrade ) { %>center-col<% } %>">
<% if ( _.some( requirements, function( isVisible ) { return isVisible; } ) ) { %> <% if ( _.some( requirements, function( isVisible ) { return isVisible; } ) ) { %>
<p> <p>
...@@ -81,13 +105,14 @@ ...@@ -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." ), 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 { %> <% } 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." ) %>
<% } %> <% } %>
</p> </p>
<% } %> <% } %>
</div> </div>
<% if ( !upgrade ) { %>
<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'] ) { %>
...@@ -111,7 +136,7 @@ ...@@ -111,7 +136,7 @@
<% if ( requirements['photo-id-required'] ) { %> <% if ( requirements['photo-id-required'] ) { %>
<li class="req req-1 req-id"> <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"> <div class="placeholder-art">
<i class="icon-list-alt icon-under"></i> <i class="icon-list-alt icon-under"></i>
<i class="icon-user icon-over"></i> <i class="icon-user icon-over"></i>
...@@ -133,18 +158,23 @@ ...@@ -133,18 +158,23 @@
<% } %> <% } %>
</ul> </ul>
</div> </div>
<% } %>
<nav class="nav-wizard is-ready center"> <nav class="nav-wizard is-ready <% if ( isActive && !upgrade ) { %>center<% } %>">
<% if ( isActive ) { %> <% 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"> <a class="next action-primary is-disabled" id="pay_button">
<%- gettext( "Go to payment" ) %> <%- gettext( "Continue to payment" ) %>
</a> </a>
<% } else { %> <% } else { %>
<a class="next action-primary is-disabled" id="activate_button"> <a class="next action-primary is-disabled" id="activate_button">
<%- gettext( "Activate Your Account" ) %> <%- gettext( "Activate your account" ) %>
</a> </a>
<% } %> <% } %>
</nav> </nav>
<form id="payment-processor-form"></form> <form id="payment-processor-form"></form>
......
...@@ -7,7 +7,19 @@ from verify_student.views import PayAndVerifyView ...@@ -7,7 +7,19 @@ from verify_student.views import PayAndVerifyView
<%inherit file="../main.html" /> <%inherit file="../main.html" />
<%block name="bodyclass">register verification-process step-requirements</%block> <%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"> <%block name="header_extras">
<% <%
template_names = ( template_names = (
...@@ -62,8 +74,6 @@ from verify_student.views import PayAndVerifyView ...@@ -62,8 +74,6 @@ from verify_student.views import PayAndVerifyView
data-requirements='${json.dumps(requirements)}' data-requirements='${json.dumps(requirements)}'
data-msg-key='${message_key}' data-msg-key='${message_key}'
data-is-active='${is_active}' data-is-active='${is_active}'
data-intro-title='${messages.intro_title}'
data-intro-msg='${messages.intro_msg}'
></div> ></div>
## Support ## Support
......
<div class="wrapper-content-main payment-confirmation-step"> <div class="wrapper-content-main payment-confirmation-step">
<article class="content-main"> <article class="content-main">
<h3 class="title"> <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> </h3>
<% if ( receipt ) { %> <% if ( receipt ) { %>
...@@ -28,13 +28,13 @@ ...@@ -28,13 +28,13 @@
<td><del><%- receipt.orderNum %></del></td> <td><del><%- receipt.orderNum %></del></td>
<td><del><%- receipt.items[i].lineDescription %></del></td> <td><del><%- receipt.items[i].lineDescription %></del></td>
<td><del><%- receipt.purchasedDatetime %></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 { %> <% } else { %>
<tr> <tr>
<td><%- receipt.orderNum %></td> <td><%- receipt.orderNum %></td>
<td><%- receipt.items[i].lineDescription %></td> <td><%- receipt.items[i].lineDescription %></td>
<td><%- receipt.purchasedDatetime %></td> <td><%- receipt.purchasedDatetime %></td>
<td><%- receipt.items[i].cost %> ($<%- receipt.currency.toUpperCase() %>)</td> <td><%- receipt.items[i].cost %> (<%- receipt.currency.toUpperCase() %>)</td>
</tr> </tr>
<% } %> <% } %>
<% } %> <% } %>
...@@ -78,7 +78,7 @@ ...@@ -78,7 +78,7 @@
<% } %> <% } %>
<% if ( nextStepTitle ) { %> <% 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"> <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<% } %>">
...@@ -135,7 +135,10 @@ ...@@ -135,7 +135,10 @@
class="next action-primary right" class="next action-primary right"
href="<%- _.sprintf( '/verify_student/verify-now/%(courseKey)s', { courseKey: courseKey } ) %>" href="<%- _.sprintf( '/verify_student/verify-now/%(courseKey)s', { courseKey: courseKey } ) %>"
> >
<%- nextStepTitle %> <%- _.sprintf(
gettext( "Next: %(nextStepTitle)s" ),
{ nextStepTitle: nextStepTitle }
) %>
</a> </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 } ) %>"> <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 id="wrapper-review" class="wrapper-view review-photos-step">
<div class="review view"> <div class="review view">
<h3 class="title"><%- gettext( "Review Your Photos" ) %></h3> <h3 class="title"><%- gettext( "Review your photos" ) %></h3>
<div class="instruction"> <div class="instruction">
<p><%- gettext( "Make sure we can verify your identity from the photos below." ) %></p> <p><%- gettext( "Make sure we can verify your identity from the photos below." ) %></p>
</div> </div>
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
<li class="tip"><%- _.sprintf( gettext( "Does the name on your ID match your account name: %(fullName)s?" ), { fullName: fullName } ) %> <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"> <div class="help-tip is-expandable">
<a href="#" class="title title-expand" aria-expanded="false" role="link"> <a href="#" class="title title-expand" aria-expanded="false" role="link">
<%- gettext( "Edit Your Name" ) %> <%- gettext( "Edit your name" ) %>
</a> </a>
<div class="copy expandable-area"> <div class="copy expandable-area">
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
<p> <p>
<%- gettext( "Photos don't meet the requirements?" ) %> <%- gettext( "Photos don't meet the requirements?" ) %>
<a id="retake_photos_button" class="retake-photos"> <a id="retake_photos_button" class="retake-photos">
<%- gettext( "Retake Your Photos" ) %> <%- gettext( "Retake your photos" ) %>
</a> </a>
</p> </p>
</div> </div>
...@@ -59,13 +59,13 @@ ...@@ -59,13 +59,13 @@
<nav class="nav-wizard"> <nav class="nav-wizard">
<div class="prompt-verify"> <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> </div>
<ol class="wizard-steps"> <ol class="wizard-steps">
<li class="wizard-step step-proceed"> <li class="wizard-step step-proceed">
<a id="next_step_button" class="next action-primary right" aria-hidden="true" title="Confirmation"> <a id="next_step_button" class="next action-primary right" aria-hidden="true" title="Confirmation">
<%- gettext( "Confirmation" ) %> <%- gettext( "Confirm" ) %>
</a> </a>
</li> </li>
</ol> </ol>
......
...@@ -8,14 +8,12 @@ ...@@ -8,14 +8,12 @@
</div> </div>
<div class="controls photo-controls"> <div class="controls photo-controls">
<ul class="list-controls"> <div class="control control-retake is-hidden" id="webcam_reset_button">
<li class="control control-retake is-hidden" id="webcam_reset_button"> <a class="action action-redo"><%- gettext( "Retake photo" ) %></a>
<a class="action action-redo"><%- gettext( "Retake Photo" ) %></a> </div>
</li> <div class="control control-do is-hidden" id="webcam_capture_button">
<li class="control control-do is-hidden" id="webcam_capture_button"> <a class="action action-do">
<a class="action action-do"> <i class="icon-camera"></i> <span class="sr"><%- gettext( "Take photo" ) %></span>
<i class="icon-camera"></i> <span class="sr"><%- gettext( "Take photo" ) %></span> </a>
</a> </div>
</li>
</ul>
</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