From d3c3f73428fdeb47b830eaa4c86801548f7fadb7 Mon Sep 17 00:00:00 2001 From: Will Daly Date: Mon, 15 Dec 2014 13:10:58 -0500 Subject: [PATCH] Combine payment and intro step --- .../verify_student/tests/test_views.py | 49 +++++++--------- lms/djangoapps/verify_student/views.py | 19 +++--- lms/envs/common.py | 1 + .../js/verify_student/pay_and_verify.js | 1 + .../verify_student/views/intro_step_view.js | 23 +++++--- .../views/make_payment_step_view.js | 6 ++ .../verify_student/views/requirements_view.js | 29 ++++++++++ .../verify_student/intro_step.underscore | 58 +------------------ .../make_payment_step.underscore | 2 + .../verify_student/pay_and_verify.html | 2 +- .../verify_student/requirements.underscore | 57 ++++++++++++++++++ 11 files changed, 142 insertions(+), 105 deletions(-) create mode 100644 lms/static/js/verify_student/views/requirements_view.js create mode 100644 lms/templates/verify_student/requirements.underscore diff --git a/lms/djangoapps/verify_student/tests/test_views.py b/lms/djangoapps/verify_student/tests/test_views.py index 8c865fe724..ee24767cb6 100644 --- a/lms/djangoapps/verify_student/tests/test_views.py +++ b/lms/djangoapps/verify_student/tests/test_views.py @@ -967,8 +967,8 @@ class TestPayAndVerifyView(UrlResetMixin, ModuleStoreTestCase): self._assert_displayed_mode(response, course_mode) self._assert_steps_displayed( response, - PayAndVerifyView.ALL_STEPS, - PayAndVerifyView.INTRO_STEP + PayAndVerifyView.PAYMENT_STEPS + PayAndVerifyView.VERIFICATION_STEPS, + PayAndVerifyView.MAKE_PAYMENT_STEP ) self._assert_messaging(response, PayAndVerifyView.FIRST_TIME_VERIFY_MSG) self._assert_requirements_displayed(response, [ @@ -977,15 +977,6 @@ class TestPayAndVerifyView(UrlResetMixin, ModuleStoreTestCase): PayAndVerifyView.CREDIT_CARD_REQ, ]) - def test_start_flow_skip_intro(self): - course = self._create_course("verified") - response = self._get_page("verify_student_start_flow", course.id, skip_first_step=True) - self._assert_steps_displayed( - response, - PayAndVerifyView.ALL_STEPS, - PayAndVerifyView.MAKE_PAYMENT_STEP - ) - @ddt.data("expired", "denied") def test_start_flow_expired_or_denied_verification(self, verification_status): course = self._create_course("verified") @@ -996,7 +987,7 @@ class TestPayAndVerifyView(UrlResetMixin, ModuleStoreTestCase): # Expect the same content as when the user has not verified self._assert_steps_displayed( response, - PayAndVerifyView.STEPS_WITHOUT_PAYMENT, + [PayAndVerifyView.INTRO_STEP] + PayAndVerifyView.VERIFICATION_STEPS, PayAndVerifyView.INTRO_STEP ) self._assert_messaging(response, PayAndVerifyView.FIRST_TIME_VERIFY_MSG) @@ -1020,8 +1011,8 @@ class TestPayAndVerifyView(UrlResetMixin, ModuleStoreTestCase): self._assert_displayed_mode(response, course_mode) self._assert_steps_displayed( response, - PayAndVerifyView.STEPS_WITHOUT_VERIFICATION, - PayAndVerifyView.INTRO_STEP + PayAndVerifyView.PAYMENT_STEPS, + PayAndVerifyView.MAKE_PAYMENT_STEP ) self._assert_messaging(response, PayAndVerifyView.FIRST_TIME_VERIFY_MSG) self._assert_requirements_displayed(response, [ @@ -1036,7 +1027,7 @@ class TestPayAndVerifyView(UrlResetMixin, ModuleStoreTestCase): self._assert_displayed_mode(response, course_mode) self._assert_steps_displayed( response, - PayAndVerifyView.STEPS_WITHOUT_PAYMENT, + [PayAndVerifyView.INTRO_STEP] + PayAndVerifyView.VERIFICATION_STEPS, PayAndVerifyView.INTRO_STEP ) self._assert_messaging(response, PayAndVerifyView.FIRST_TIME_VERIFY_MSG) @@ -1056,8 +1047,8 @@ class TestPayAndVerifyView(UrlResetMixin, ModuleStoreTestCase): response = self._get_page('verify_student_start_flow', course.id) self._assert_steps_displayed( response, - PayAndVerifyView.STEPS_WITHOUT_VERIFICATION, - PayAndVerifyView.INTRO_STEP + PayAndVerifyView.PAYMENT_STEPS, + PayAndVerifyView.MAKE_PAYMENT_STEP ) self._assert_requirements_displayed(response, [ PayAndVerifyView.CREDIT_CARD_REQ, @@ -1074,8 +1065,8 @@ class TestPayAndVerifyView(UrlResetMixin, ModuleStoreTestCase): response = self._get_page('verify_student_start_flow', course.id) self._assert_steps_displayed( response, - PayAndVerifyView.STEPS_WITHOUT_VERIFICATION, - PayAndVerifyView.INTRO_STEP + PayAndVerifyView.PAYMENT_STEPS, + PayAndVerifyView.MAKE_PAYMENT_STEP ) self._assert_requirements_displayed(response, [ PayAndVerifyView.CREDIT_CARD_REQ, @@ -1110,7 +1101,7 @@ class TestPayAndVerifyView(UrlResetMixin, ModuleStoreTestCase): # but we start after the payment step (because it's already completed). self._assert_steps_displayed( response, - PayAndVerifyView.ALL_STEPS, + PayAndVerifyView.PAYMENT_STEPS + PayAndVerifyView.VERIFICATION_STEPS, PayAndVerifyView.FACE_PHOTO_STEP ) @@ -1185,7 +1176,7 @@ class TestPayAndVerifyView(UrlResetMixin, ModuleStoreTestCase): # Expect that the payment steps are NOT displayed self._assert_steps_displayed( response, - PayAndVerifyView.STEPS_WITHOUT_PAYMENT, + [PayAndVerifyView.INTRO_STEP] + PayAndVerifyView.VERIFICATION_STEPS, PayAndVerifyView.INTRO_STEP ) self._assert_requirements_displayed(response, [ @@ -1218,7 +1209,7 @@ class TestPayAndVerifyView(UrlResetMixin, ModuleStoreTestCase): # but we start at the payment confirmation step self._assert_steps_displayed( response, - PayAndVerifyView.ALL_STEPS, + PayAndVerifyView.PAYMENT_STEPS + PayAndVerifyView.VERIFICATION_STEPS, PayAndVerifyView.PAYMENT_CONFIRMATION_STEP, ) @@ -1246,7 +1237,7 @@ class TestPayAndVerifyView(UrlResetMixin, ModuleStoreTestCase): # but we start on the first verify step self._assert_steps_displayed( response, - PayAndVerifyView.ALL_STEPS, + PayAndVerifyView.PAYMENT_STEPS + PayAndVerifyView.VERIFICATION_STEPS, PayAndVerifyView.FACE_PHOTO_STEP, ) @@ -1264,7 +1255,7 @@ class TestPayAndVerifyView(UrlResetMixin, ModuleStoreTestCase): # to the dashboard. self._assert_steps_displayed( response, - PayAndVerifyView.STEPS_WITHOUT_VERIFICATION, + PayAndVerifyView.PAYMENT_STEPS, PayAndVerifyView.PAYMENT_CONFIRMATION_STEP, ) @@ -1283,7 +1274,7 @@ class TestPayAndVerifyView(UrlResetMixin, ModuleStoreTestCase): # payment confirmation step self._assert_steps_displayed( response, - PayAndVerifyView.STEPS_WITHOUT_VERIFICATION, + PayAndVerifyView.PAYMENT_STEPS, PayAndVerifyView.PAYMENT_CONFIRMATION_STEP, ) @@ -1318,8 +1309,8 @@ class TestPayAndVerifyView(UrlResetMixin, ModuleStoreTestCase): self._assert_displayed_mode(response, course_mode) self._assert_steps_displayed( response, - PayAndVerifyView.ALL_STEPS, - PayAndVerifyView.INTRO_STEP + PayAndVerifyView.PAYMENT_STEPS + PayAndVerifyView.VERIFICATION_STEPS, + PayAndVerifyView.MAKE_PAYMENT_STEP ) self._assert_messaging(response, PayAndVerifyView.UPGRADE_MSG) self._assert_requirements_displayed(response, [ @@ -1336,8 +1327,8 @@ class TestPayAndVerifyView(UrlResetMixin, ModuleStoreTestCase): response = self._get_page('verify_student_upgrade_and_verify', course.id) self._assert_steps_displayed( response, - PayAndVerifyView.STEPS_WITHOUT_VERIFICATION, - PayAndVerifyView.INTRO_STEP + PayAndVerifyView.PAYMENT_STEPS, + PayAndVerifyView.MAKE_PAYMENT_STEP ) self._assert_messaging(response, PayAndVerifyView.UPGRADE_MSG) self._assert_requirements_displayed(response, [ diff --git a/lms/djangoapps/verify_student/views.py b/lms/djangoapps/verify_student/views.py index be9f0f218f..e07c329b36 100644 --- a/lms/djangoapps/verify_student/views.py +++ b/lms/djangoapps/verify_student/views.py @@ -259,16 +259,6 @@ class PayAndVerifyView(View): ENROLLMENT_CONFIRMATION_STEP ] - STEPS_WITHOUT_PAYMENT = [ - step for step in ALL_STEPS - if step not in PAYMENT_STEPS - ] - - STEPS_WITHOUT_VERIFICATION = [ - step for step in ALL_STEPS - if step not in VERIFICATION_STEPS - ] - Step = namedtuple( 'Step', [ @@ -395,7 +385,7 @@ class PayAndVerifyView(View): def get( self, request, course_id, always_show_payment=False, - current_step=INTRO_STEP, + current_step=None, message=FIRST_TIME_VERIFY_MSG ): """Render the pay/verify requirements page. @@ -462,6 +452,9 @@ class PayAndVerifyView(View): ) requirements = self._requirements(display_steps) + if current_step is None: + current_step = display_steps[0]['name'] + # Allow the caller to skip the first page # This is useful if we want the user to be able to # use the "back" button to return to the previous step. @@ -605,6 +598,10 @@ class PayAndVerifyView(View): if already_paid and not always_show_payment: remove_steps |= set(self.PAYMENT_STEPS) + else: + # The "make payment" step doubles as an intro step, + # so if we're showing the payment step, hide the intro step. + remove_steps |= set([self.INTRO_STEP]) return [ { diff --git a/lms/envs/common.py b/lms/envs/common.py index c2274def34..6b666bd35d 100644 --- a/lms/envs/common.py +++ b/lms/envs/common.py @@ -1077,6 +1077,7 @@ verify_student_js = [ 'js/verify_student/views/error_view.js', 'js/verify_student/views/webcam_photo_view.js', 'js/verify_student/views/progress_view.js', + 'js/verify_student/views/requirements_view.js', 'js/verify_student/views/step_view.js', 'js/verify_student/views/intro_step_view.js', 'js/verify_student/views/make_payment_step_view.js', diff --git a/lms/static/js/verify_student/pay_and_verify.js b/lms/static/js/verify_student/pay_and_verify.js index 88a1d2aeab..63410bb480 100644 --- a/lms/static/js/verify_student/pay_and_verify.js +++ b/lms/static/js/verify_student/pay_and_verify.js @@ -41,6 +41,7 @@ var edx = edx || {}; requirements: el.data('requirements') }, 'make-payment-step': { + requirements: el.data('requirements'), courseKey: el.data('course-key'), minPrice: el.data('course-mode-min-price'), suggestedPrices: (el.data('course-mode-suggested-prices') || "").split(","), diff --git a/lms/static/js/verify_student/views/intro_step_view.js b/lms/static/js/verify_student/views/intro_step_view.js index 747c91ee50..d79b12e61b 100644 --- a/lms/static/js/verify_student/views/intro_step_view.js +++ b/lms/static/js/verify_student/views/intro_step_view.js @@ -8,12 +8,21 @@ var edx = edx || {}; edx.verify_student = edx.verify_student || {}; - // Currently, this view doesn't need to install any custom event handlers, - // since the button in the template reloads the page with a - // ?skip-intro=1 GET parameter. The reason for this is that we - // want to allow users to click "back" to see the requirements, - // and if they reload the page we want them to stay on the - // second step. - edx.verify_student.IntroStepView = edx.verify_student.StepView.extend({}); + edx.verify_student.IntroStepView = edx.verify_student.StepView.extend({ + + // Currently, this view doesn't need to install any custom event handlers, + // since the button in the template reloads the page with a + // ?skip-intro=1 GET parameter. The reason for this is that we + // want to allow users to click "back" to see the requirements, + // and if they reload the page we want them to stay on the + // second step. + postRender: function() { + new edx.verify_student.RequirementsView({ + el: $( '.requirements-container', this.el ), + requirements: this.stepData.requirements + }).render(); + } + + }); })( jQuery ); 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 c4dc01f26d..138e55d198 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 @@ -11,6 +11,12 @@ var edx = edx || {}; edx.verify_student.MakePaymentStepView = edx.verify_student.StepView.extend({ postRender: function() { + // Render requirements + new edx.verify_student.RequirementsView({ + el: $( '.requirements-container', this.el ), + requirements: this.stepData.requirements + }).render(); + // Enable the payment button once an amount is chosen $( "input[name='contribution']" ).on( 'click', _.bind( this.enablePaymentButton, this ) ); diff --git a/lms/static/js/verify_student/views/requirements_view.js b/lms/static/js/verify_student/views/requirements_view.js new file mode 100644 index 0000000000..ec0430e1f3 --- /dev/null +++ b/lms/static/js/verify_student/views/requirements_view.js @@ -0,0 +1,29 @@ +/** + * View for the requirements (webcam, credit card, etc.) + */ +var edx = edx || {}; + +(function( $, Backbone, _, gettext ) { + 'use strict'; + + edx.verify_student = edx.verify_student || {}; + + edx.verify_student.RequirementsView = Backbone.View.extend({ + + template: "#requirements-tpl", + + initialize: function( obj ) { + this.requirements = obj.requirements || {}; + }, + + render: function() { + var renderedHtml = _.template( + $( this.template ).html(), + { requirements: this.requirements } + ); + $( this.el ).html( renderedHtml ); + } + + }); + +})( jQuery, Backbone, _, gettext ); diff --git a/lms/templates/verify_student/intro_step.underscore b/lms/templates/verify_student/intro_step.underscore index deb52fb43f..eb00d40977 100644 --- a/lms/templates/verify_student/intro_step.underscore +++ b/lms/templates/verify_student/intro_step.underscore @@ -3,63 +3,7 @@

<%- introTitle %>

<%- introMsg %>

- +
<% if ( nextStepTitle ) { %>