Add the activate account step to the verified workflow.

Changing approach such that email activation is not a step.

Removing stale line of code.

Update activate account step according to new UI changes.

Adding new test for activation.

lms/djangoapps/verify_student/tests/test_views.py

@@ -1456,6 +1456,23 @@ class TestPayAndVerifyView(UrlResetMixin, ModuleStoreTestCase):
             expected_status_code=404
         )
 
+    def test_account_not_active(self):
+        self.user.is_active = False
+        self.user.save()
+        course = self._create_course("verified")
+        response = self._get_page('verify_student_start_flow', course.id)
+        self._assert_steps_displayed(
+            response,
+            PayAndVerifyView.PAYMENT_STEPS + PayAndVerifyView.VERIFICATION_STEPS,
+            PayAndVerifyView.MAKE_PAYMENT_STEP
+        )
+        self._assert_requirements_displayed(response, [
+            PayAndVerifyView.ACCOUNT_ACTIVATION_REQ,
+            PayAndVerifyView.CREDIT_CARD_REQ,
+            PayAndVerifyView.PHOTO_ID_REQ,
+            PayAndVerifyView.WEBCAM_REQ,
+        ])
+
     def _create_course(self, *course_modes, **kwargs):
         """Create a new course with the specified course modes. """
         course = CourseFactory.create()

lms/djangoapps/verify_student/views.py

@@ -375,6 +375,7 @@ class PayAndVerifyView(View):
     # need to complete the verification steps,
     # then the photo ID and webcam requirements are hidden.
     #
+    ACCOUNT_ACTIVATION_REQ = "account-activation-required"
     PHOTO_ID_REQ = "photo-id-required"
     WEBCAM_REQ = "webcam-required"
     CREDIT_CARD_REQ = "credit-card-required"
@@ -454,7 +455,7 @@ class PayAndVerifyView(View):
             already_verified,
             already_paid
         )
-        requirements = self._requirements(display_steps)
+        requirements = self._requirements(display_steps, request.user.is_active)
 
         if current_step is None:
             current_step = display_steps[0]['name']
@@ -484,24 +485,25 @@ class PayAndVerifyView(View):
 
         # Render the top-level page
         context = {
-            'disable_courseware_js': True,
             'user_full_name': full_name,
-            'platform_name': settings.PLATFORM_NAME,
-            'course_key': unicode(course_key),
             'course': course,
-            'courseware_url': courseware_url,
+            'course_key': unicode(course_key),
             'course_mode': course_mode,
-            'purchase_endpoint': get_purchase_endpoint(),
-            'display_steps': display_steps,
+            'courseware_url': courseware_url,
             'current_step': current_step,
-            'requirements': requirements,
-            'message_key': message,
+            'disable_courseware_js': True,
+            'display_steps': display_steps,
+            'is_active': 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,
         }
         return render_to_response("verify_student/pay_and_verify.html", context)
 
@@ -582,6 +584,7 @@ class PayAndVerifyView(View):
         if the user has already completed them.
 
         Arguments:
+
             always_show_payment (bool): If True, display the payment steps
                 even if the user has already paid.
 
@@ -618,7 +621,7 @@ class PayAndVerifyView(View):
             if step not in remove_steps
         ]
 
-    def _requirements(self, display_steps):
+    def _requirements(self, display_steps, is_active):
         """Determine which requirements to show the user.
 
         For example, if the user needs to submit a photo
@@ -627,6 +630,7 @@ class PayAndVerifyView(View):
 
         Arguments:
             display_steps (list): The steps to display to the user.
+            is_active (bool): If False, adds a requirement to activate the user account.
 
         Returns:
             dict: Keys are requirement names, values are booleans
@@ -634,6 +638,7 @@ class PayAndVerifyView(View):
 
         """
         all_requirements = {
+            self.ACCOUNT_ACTIVATION_REQ: not is_active,
             self.PHOTO_ID_REQ: False,
             self.WEBCAM_REQ: False,
             self.CREDIT_CARD_REQ: False

lms/static/js/verify_student/pay_and_verify.js

@@ -36,11 +36,14 @@ var edx = edx || {};
         currentStep: el.data('current-step'),
         stepInfo: {
             'intro-step': {
+                isActive: el.data('is-active'),
                 introTitle: el.data('intro-title'),
                 introMsg: el.data('intro-msg'),
+                platformName: el.data('platform-name'),
                 requirements: el.data('requirements')
             },
             'make-payment-step': {
+                isActive: el.data('is-active'),
                 requirements: el.data('requirements'),
                 courseKey: el.data('course-key'),
                 minPrice: el.data('course-mode-min-price'),

lms/templates/verify_student/intro_step.underscore

@@ -9,8 +9,12 @@
     <nav class="nav-wizard is-ready">
       <ol class="wizard-steps">
         <li class="wizard-step">
-        <a class="next action-primary" id="next_step_button" href="?skip-first-step=1">
-          <%- _.sprintf( gettext( "Go to Step %s" ), nextStepNum ) %>: <%- nextStepTitle %>
+        <a class="next action-primary" <% if (isActive == "False") { %>disabled="true"<% } %> id="next_step_button" href="?skip-first-step=1">
+          <% if ( isActive == "False" ) { %>
+            <%- gettext( "Activate Your Account" ) %>
+          <% } else { %>
+            <%- _.sprintf( gettext( "Go to Step %s" ), nextStepNum ) %>: <%- nextStepTitle %>
+          <% } %>
         </a>
         </li>
       </ol>

lms/templates/verify_student/make_payment_step.underscore

@@ -7,78 +7,84 @@
 
     <div class="requirements-container"></div>
 
-    <div class="wrapper-task">
-      <ol class="review-tasks">
-        <% if ( suggestedPrices.length > 0 ) { %>
-        <li class="review-task review-task-contribution">
-          <h4 class="title"><%- 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>
-          </div>
+    <% if ( isActive == "True" ) { %>
+      <div class="wrapper-task">
+        <ol class="review-tasks">
+          <% if ( suggestedPrices.length > 0 ) { %>
+          <li class="review-task review-task-contribution">
+            <h4 class="title"><%- 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>
+            </div>
 
-          <ul class="list-fields contribution-options">
-            <% for ( var i = 0; i < suggestedPrices.length; i++ ) {
-                price = suggestedPrices[i];
-            %>
-            <li class="field contribution-option">
-              <input type="radio" name="contribution" value="<%- price %>" id="contribution-<%- price %>" />
-              <label for="contribution-<%- price %>">
-                <span class="deco-denomination">$</span>
-                <span class="label-value"><%- price %></span>
-                <span class="denomination-name"><%- currency %></span>
-              </label>
-            </li>
-            <% } %>
-
-            <li class="field contribution-option">
-              <ul class="field-group field-group-other">
-              <li class="contribution-option contribution-option-other1">
-                <input type="radio" id="contribution-other" name="contribution" value="" />
-                <label for="contribution-other"><span class="sr">Other</span></label>
+            <ul class="list-fields contribution-options">
+              <% for ( var i = 0; i < suggestedPrices.length; i++ ) {
+                  price = suggestedPrices[i];
+              %>
+              <li class="field contribution-option">
+                <input type="radio" name="contribution" value="<%- price %>" id="contribution-<%- price %>" />
+                <label for="contribution-<%- price %>">
+                  <span class="deco-denomination">$</span>
+                  <span class="label-value"><%- price %></span>
+                  <span class="denomination-name"><%- currency %></span>
+                </label>
               </li>
-              <li class="contribution-option contribution-option-other2">
-                  <label for="contribution-other-amt">
-                    <span class="sr">Other Amount</span>
-                  </label>
-                  <div class="wrapper">
-                    <span class="deco-denomination">$</span>
-                    <input type="text" size="9" name="contribution-other-amt" id="contribution-other-amt" value=""/>
-                    <span class="denomination-name"><%- currency %></span>
-                  </div>
-                </li>
-              </ul>
-            </li>
-          </ul>
-        </li>
+              <% } %>
 
-        <% } else {%>
-        <li class="review-task review-task-contribution">
-          <h4 class="title"><%- gettext( "Your Course Total" ) %></h4>
-          <div class="copy">
-            <p><%- gettext( "To complete your registration, you will need to pay:" ) %></p>
-          </div>
-          <ul class="list-fields contribution-options">
-            <li class="field contribution-option">
-              <span class="deco-denomination">$</span>
-              <span class="label-value"><%- minPrice %></span>
-              <span class="denomination-name"><%- currency %></span>
-            </li>
-          </ul>
-        </li>
-        <% } %>
-      </ol>
+             <li class="field contribution-option">
+                <ul class="field-group field-group-other">
+                <li class="contribution-option contribution-option-other1">
+                  <input type="radio" id="contribution-other" name="contribution" value="" />
+                  <label for="contribution-other"><span class="sr">Other</span></label>
+                </li>
+                <li class="contribution-option contribution-option-other2">
+                    <label for="contribution-other-amt">
+                      <span class="sr">Other Amount</span>
+                    </label>
+                    <div class="wrapper">
+                      <span class="deco-denomination">$</span>
+                      <input type="text" size="9" name="contribution-other-amt" id="contribution-other-amt" value=""/>
+                      <span class="denomination-name"><%- currency %></span>
+                    </div>
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </li>
+
+          <% } else {%>
+          <li class="review-task review-task-contribution">
+            <h4 class="title"><%- gettext( "Your Course Total" ) %></h4>
+            <div class="copy">
+              <p><%- gettext( "To complete your registration, you will need to pay:" ) %></p>
+            </div>
+            <ul class="list-fields contribution-options">
+              <li class="field contribution-option">
+                <span class="deco-denomination">$</span>
+                <span class="label-value"><%- minPrice %></span>
+                <span class="denomination-name"><%- currency %></span>
+              </li>
+            </ul>
+          </li>
+          <% } %>
+        </ol>
+      </div>
     </div>
-  </div>
+  <% } %>
 
   <nav class="nav-wizard is-ready">
     <ol class="wizard-steps">
       <li class="wizard-step">
         <a class="next action-primary is-disabled" id="pay_button">
-          <%- gettext( "Go to payment" ) %>
+          <% if ( isActive == "False" ) { %>
+            <%- gettext( "Activate Your Account" ) %>
+          <% } else { %>
+            <%- gettext( "Go to payment" ) %>
+          <% } %>
         </a>
       </li>
     </ol>

lms/templates/verify_student/pay_and_verify.html

@@ -70,6 +70,7 @@ from verify_student.views import PayAndVerifyView
       data-current-step='${current_step}'
       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>

lms/templates/verify_student/requirements.underscore

@@ -1,4 +1,23 @@
-<ul class="list-reqs">
+<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 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">