From 8442f6e09320233e4b168000247904d0cecf425f Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Mon, 28 Oct 2013 13:42:30 -0400
Subject: [PATCH] LMS: adds conditional content/instructions for registration
 upgrade flow

---
 common/templates/course_modes/choose.html     | 43 +++++++++++++++----
 lms/static/sass/elements/_typography.scss     |  1 +
 lms/static/sass/views/_verification.scss      | 10 +----
 .../verify_student/_verification_header.html  |  6 ++-
 .../verify_student/_verification_support.html | 15 +++++--
 .../verify_student/photo_verification.html    | 19 ++++++--
 .../verify_student/show_requirements.html     | 35 ++++++++++++---
 7 files changed, 97 insertions(+), 32 deletions(-)

diff --git a/common/templates/course_modes/choose.html b/common/templates/course_modes/choose.html
index 5aa65a04d7..67cc0a301d 100644
--- a/common/templates/course_modes/choose.html
+++ b/common/templates/course_modes/choose.html
@@ -3,7 +3,15 @@
 <%inherit file="../main.html" />
 
 <%block name="bodyclass">register verification-process step-select-track ${'is-upgrading' if upgrade else ''}</%block>
-<%block name="title"><title>${_("Register for {} | Choose Your Track").format(course_name)}</title></%block>
+<%block name="title">
+  <title>
+    %if upgrade:
+      ${_("Upgrade Your Registration for {} | Choose Your Track").format(course_name)}
+    %else:
+      ${_("Register for {} | Choose Your Track").format(course_name)}
+    %endif
+  </title>
+</%block>
 
 <%block name="js_extra">
 <script type="text/javascript">
@@ -60,9 +68,16 @@ $(document).ready(function() {
             <div class="wrapper-copy">
               <span class="deco-ribbon"></span>
               <h4 class="title">${_("Certificate of Achievement (ID Verified)")}</h4>
-              <div class="copy">
-                <p>${_("Sign up and work toward a verified Certificate of Achievement.")}</p>
-              </div>
+
+              %if upgrade:
+                <div class="copy">
+                  <p>${_("Upgrade and work toward a verified Certificate of Achievement.")}</p>
+                </div>
+              %else:
+                <div class="copy">
+                  <p>${_("Sign up and work toward a verified Certificate of Achievement.")}</p>
+                </div>
+              %endif
             </div>
 
             <div class="field field-certificate-contribution">
@@ -118,16 +133,28 @@ $(document).ready(function() {
 
             <ul class="list-actions">
               <li class="action action-select">
-                <input type="submit" name="mode" value="Select Certificate" />
+                %if upgrade:
+                 <input type="submit" name="mode" value="Upgrade Your Registration" />
+                %else:
+                  <input type="submit" name="mode" value="Select Certificate" />
+                %endif
+
               </li>
             </ul>
           </div>
 
           <div class="help help-register">
             <h3 class="title">${_("Verified Registration Requirements")}</h3>
-            <div class="copy">
-              <p>${_("To register for a Verified Certificate of Achievement option, you will need a webcam, a credit or debit card, and an ID.")}</p>
-            </div>
+
+            %if upgrade:
+              <div class="copy">
+                <p>${_("To upgrade your registration and work towards a Verified Certificate of Achievement, you will need a webcam, a credit or debit card, and an ID.")}</p>
+              </div>
+            %else:
+              <div class="copy">
+                <p>${_("To register for a Verified Certificate of Achievement option, you will need a webcam, a credit or debit card, and an ID.")}</p>
+              </div>
+            %endif
 
             <h3 class="title">${_("What is an ID Verified Certificate?")}</h3>
             <div class="copy">
diff --git a/lms/static/sass/elements/_typography.scss b/lms/static/sass/elements/_typography.scss
index fc9acabc89..68a3cd50df 100644
--- a/lms/static/sass/elements/_typography.scss
+++ b/lms/static/sass/elements/_typography.scss
@@ -282,4 +282,5 @@
   border-radius: ($baseline/5);
   padding: ($baseline/2) $baseline;
   text-transform: uppercase;
+  letter-spacing: 0.1rem;
 }
diff --git a/lms/static/sass/views/_verification.scss b/lms/static/sass/views/_verification.scss
index 56cf35d0ea..43950d6f41 100644
--- a/lms/static/sass/views/_verification.scss
+++ b/lms/static/sass/views/_verification.scss
@@ -80,15 +80,6 @@
   }
 }
 
-%copy-badge {
-  @extend %t-title8;
-  @extend %t-weight4;
-  border-radius: ($baseline/5);
-  padding: ($baseline/2) $baseline;
-  text-transform: uppercase;
-  letter-spacing: 0.1rem;
-}
-
 // ====================
 
 // MISC: extends - button
@@ -476,6 +467,7 @@
             margin-right: ($baseline/4);
             opacity: 0.80;
             color: $white;
+            letter-spacing: 0.1rem;
           }
         }
       }
diff --git a/lms/templates/verify_student/_verification_header.html b/lms/templates/verify_student/_verification_header.html
index 0f4878221d..80a1e939b0 100644
--- a/lms/templates/verify_student/_verification_header.html
+++ b/lms/templates/verify_student/_verification_header.html
@@ -17,7 +17,11 @@
 
       <span class="sts-track">
         <span class="sts-track-value">
-          <span class="context">${_("Registering as: ")}</span> ${_("ID Verified")}
+          %if upgrade:
+            <span class="context">${_("Upgrading to:")}</span> ${_("ID Verified")}
+          %else:
+            <span class="context">${_("Registering as: ")}</span> ${_("ID Verified")}
+          %endif
         </span>
       </span>
     </span>
diff --git a/lms/templates/verify_student/_verification_support.html b/lms/templates/verify_student/_verification_support.html
index 5e4940140c..260ba7bae3 100644
--- a/lms/templates/verify_student/_verification_support.html
+++ b/lms/templates/verify_student/_verification_support.html
@@ -11,10 +11,17 @@
       </li>
 
       <li class="help-item help-item-coldfeet">
-        <h3 class="title">${_("Change your mind?")}</h3>
-        <div class="copy">
-          <p>${_("You can always {a_start} audit the course for free {a_end} without verifying.").format(a_start='<a rel="external" href="/course_modes/choose/' + course_id + '">', a_end="</a>")}</p>
-        </div>
+        %if upgrade:
+          <h3 class="title">${_("Change your mind?")}</h3>
+          <div class="copy">
+            <p>${_("You can always continue to audit the course without verifying.")}</p>
+          </div>
+        %else:
+           <h3 class="title">${_("Change your mind?")}</h3>
+          <div class="copy">
+            <p>${_("You can always {a_start} audit the course for free {a_end} without verifying.").format(a_start='<a rel="external" href="/course_modes/choose/' + course_id + '">', a_end="</a>")}</p>
+          </div>
+        %endif
       </li>
 
       <li class="help-item help-item-technical">
diff --git a/lms/templates/verify_student/photo_verification.html b/lms/templates/verify_student/photo_verification.html
index 537c26ff84..92b976ce51 100644
--- a/lms/templates/verify_student/photo_verification.html
+++ b/lms/templates/verify_student/photo_verification.html
@@ -3,8 +3,16 @@
 <%inherit file="../main.html" />
 <%namespace name='static' file='/static_content.html'/>
 
-<%block name="bodyclass">register verification-process step-photos</%block>
-<%block name="title"><title>${_("Register for {} | Verification").format(course_name)}</title></%block>
+<%block name="bodyclass">register verification-process step-photos ${'is-upgrading' if upgrade else ''}</%block>
+<%block name="title">
+  <title>
+    %if upgrade:
+      ${_("Upgrade Your Registration for {} | Verification").format(course_name)}
+    %else:
+      ${_("Register for {} | Verification").format(course_name)}
+    %endif
+  </title>
+</%block>
 
 <%block name="js_extra">
 <script src="${static.url('js/vendor/responsive-carousel/responsive-carousel.js')}"></script>
@@ -172,7 +180,12 @@
                         <dt class="faq-question">${_("What do you do with this picture?")}</dt>
                         <dd class="faq-answer">${_("We only use it to verify your identity.  It is not displayed anywhere.")}</dd>
                         <dt class="faq-question">${_("What if my camera isn't working?")}</dt>
-                        <dd class="faq-answer">${_("You can always {a_start} audit the course for free {a_end} without verifying.").format(a_start='<a rel="external" href="/course_modes/choose/' + course_id + '">', a_end="</a>")}</dd>
+
+                        %if upgrade:
+                          <dd class="faq-answer">${_("You can always continue to audit the course without verifying.")}</dd>
+                        %else:
+                          <dd class="faq-answer">${_("You can always {a_start} audit the course for free {a_end} without verifying.").format(a_start='<a rel="external" href="/course_modes/choose/' + course_id + '">', a_end="</a>")}</dd>
+                        %endif
                       </dl>
                     </div>
                   </div>
diff --git a/lms/templates/verify_student/show_requirements.html b/lms/templates/verify_student/show_requirements.html
index 4acd8b645a..3280fec89a 100644
--- a/lms/templates/verify_student/show_requirements.html
+++ b/lms/templates/verify_student/show_requirements.html
@@ -1,8 +1,16 @@
 <%! from django.utils.translation import ugettext as _ %>
 <%! from django.core.urlresolvers import reverse %>
 <%inherit file="../main.html" />
-<%block name="bodyclass">register verification-process step-requirements</%block>
-<%block name="title"><title>${_("Register for {}").format(course_name)}</title></%block>
+<%block name="bodyclass">register verification-process step-requirements ${'is-upgrading' if upgrade else ''}</%block>
+<%block name="title">
+  <title>
+    %if upgrade:
+      ${_("Upgrade Your Registration for {}").format(course_name)}
+    %else:
+      ${_("Register for {}").format(course_name)}
+    %endif
+  </title>
+</%block>
 
 <%block name="content">
 %if is_not_active:
@@ -71,11 +79,19 @@
 
     <div class="wrapper-content-main">
       <article class="content-main">
-        <h3 class="title">${_("What You Will Need to Register")}</h3>
+        %if upgrade:
+          <h3 class="title">${_("What You Will Need to Upgrade")}</h3>
 
-        <div class="instruction">
-          <p>${_("There are three things you will need to register as an ID verified student:")}</p>
-        </div>
+          <div class="instruction">
+            <p>${_("There are three things you will need to upgrade to being an ID verified student:")}</p>
+          </div>
+        %else:
+          <h3 class="title">${_("What You Will Need to Register")}</h3>
+
+          <div class="instruction">
+            <p>${_("There are three things you will need to register as an ID verified student:")}</p>
+          </div>
+        %endif
 
         <ul class="list-reqs ${"account-not-activated" if is_not_active else ""}">
           %if is_not_active:
@@ -149,7 +165,12 @@
         </ul>
 
         <nav class="nav-wizard ${"is-not-ready" if is_not_active else "is-ready"}">
-        <span class="help help-inline">${_("Missing something? You can always {a_start} audit this course instead {a_end}").format(a_start='<a href="/course_modes/choose/' + course_id + '">', a_end="</a>")}</span>
+
+          %if upgrade:
+            <span class="help help-inline">${_("Missing something? You can always continue to audit this course instead.")}</span>
+          %else:
+            <span class="help help-inline">${_("Missing something? You can always {a_start} audit this course instead {a_end}").format(a_start='<a href="/course_modes/choose/' + course_id + '">', a_end="</a>")}</span>
+          %endif
 
           <ol class="wizard-steps">
             <li class="wizard-step">