Merge pull request #6454 from edx/alasdair/not-activated-decoupled-verification-update

ECOM-869 Update copy and hide supplementary content wrapper and requirem...

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>
     <% } %>
   <% } %>
@@ -26,15 +32,10 @@
             <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>
-        <% } %>
-
+        <% } else { %>
           <% if ( requirements['photo-id-required'] ) { %>
           <li class="req req-1 req-id">
             <h4 class="title"><%- gettext( "Photo ID" ) %></h4>
@@ -61,17 +62,16 @@
             <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 ) { %>
+          <a class="next action-primary" id="next_step_button" href="?skip-first-step=1">
+            <% if ( hasPaid ) { %>
               <%- _.sprintf(
                 gettext( "Next: %(nextStepTitle)s" ),
                 { nextStepTitle: nextStepTitle }

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." ) %>
         <% } %>
@@ -125,15 +127,10 @@
             <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( "Government-issued Photo ID" ) %></h4>
@@ -156,26 +153,25 @@
             <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

@@ -91,7 +91,7 @@
 
             <div class="copy">
               <p>
-              <span class="copy-super"><%- gettext( "Check your email." ) %></span>
+                <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." )
                   %>
@@ -99,8 +99,7 @@
               </p>
             </div>
           </li>
-        <% } %>
-
+        <% } else { %>
           <% if ( requirements['photo-id-required'] ) { %>
           <li class="req req-1 req-id">
             <h4 class="title"><%- gettext( "Photo ID" ) %></h4>
@@ -127,6 +126,7 @@
             <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>