From bfa8f4f436d266cd74e6d55fb78e85150fb96dca Mon Sep 17 00:00:00 2001
From: Matthew Piatetsky <mpiatetsky@edx.org>
Date: Tue, 25 Jul 2017 09:48:04 -0400
Subject: [PATCH] CSS/JS fixes to Track Selection V3 Test

LEARNER-1726
---
 lms/static/sass/_experiments.scss             | 79 +++++++++----------
 .../lms/templates/course_modes/choose.html    | 13 ++-
 2 files changed, 48 insertions(+), 44 deletions(-)

diff --git a/lms/static/sass/_experiments.scss b/lms/static/sass/_experiments.scss
index cb1e952aea..d6aa483b71 100644
--- a/lms/static/sass/_experiments.scss
+++ b/lms/static/sass/_experiments.scss
@@ -14,17 +14,17 @@
     text-align: left !important;
 }
 
-.v2.register-choice-donate .list-actions {
+.v2.register-choice-continue .list-actions {
     margin-bottom: 0 !important;
 }
 
-.v2.register-choice-donate .action-select {
+.v2.register-choice-continue .action-select {
     display: inline-block !important;
     list-style-type: none !important;
     width: 100% !important;
 }
 
-.v2.register-choice-donate .donation-link {
+.v2.register-choice-continue .continue-link {
     display: inline-block !important;
     padding: 10px 15px !important;
     border-radius: 3px !important;
@@ -38,13 +38,7 @@
     font-weight: 500 !important;
 }
 
-@media (min-width: 375px) {
-    .donation-link {
-        font-size: 16px;
-    }
-}
-
-.v2.register-choice-v2-audit {
+.v2.register-choice-v2-donate {
     height: 300px;
     background: none !important;
     border-top-color: grey !important;
@@ -52,16 +46,16 @@
 }
 
 @media screen and (min-width: 375px) {
-    .v2.register-choice-v2-audit {
+    .v2.register-choice-v2-donate {
         height: 250px;
     }
 }
 
-.v2.register-choice-v2-audit .list-actions {
+.v2.register-choice-v2-donate .list-actions {
     margin-bottom: 0 !important;
 }
 
-.v2.register-choice-v2-audit .list-actions input {
+.v2.register-choice-v2-donate .list-actions a {
     background: transparent !important;
     color: #0075b4 !important;
     box-shadow: none !important;
@@ -70,13 +64,13 @@
     white-space: normal;
 }
 
-.v2.register-choice-v2-audit .wrapper-copy-inline {
+.v2.register-choice-v2-donate .wrapper-copy-inline {
     height: 70px !important;
     width: 100% !important;
     display: flex !important;
 }
 
-.v2.register-choice-v2-audit .wrapper-copy {
+.v2.register-choice-v2-donate .wrapper-copy {
     width: 70% !important;
     height: auto !important;
 }
@@ -90,17 +84,17 @@
     margin-left: 5px;
 }
 
-.v2 .donation-link {
+.v2 .continue-link {
     font-weight: bold !important;
 }
 
 .v2.register-choice-certificate,
-.v2.register-choice-donate,
+.v2.register-choice-continue,
 .v2.register-choice-view {
     width: 100%;
 }
 
-.v2.register-choice-donate {
+.v2.register-choice-continue {
     border-color: #D7548E !important;
 }
 
@@ -108,15 +102,15 @@
     max-height: 115px;
 }
 
-.v2.register-choice-v2-audit .wrapper-copy-inline {
+.v2.register-choice-v2-donate .wrapper-copy-inline {
     display: block !important;
 }
 
-.v2.register-choice-v2-audit .copy-inline {
+.v2.register-choice-v2-donate .copy-inline {
     width: 100% !important;
 }
 
-.v2.register-choice-v2-audit .list-actions {
+.v2.register-choice-v2-donate .list-actions {
     width: 100% !important;
     margin-top: 20px !important;
     text-align: center !important;
@@ -126,7 +120,7 @@
     width: 100% !important;
 }
 
-.v2 input{
+.v2 input, .v2 a {
     font-size: 15px !important;
 }
 
@@ -164,7 +158,7 @@
     }
 }
 
-.v2 .donation-link, .v2 input, .v2 button {
+.v2 .continue-link, .v2 input, .v2 button, .v2 a {
     width: 100%;
 }
 
@@ -189,21 +183,22 @@
 
 @media (min-width: 768px) {
     .v2.register-choice-certificate,
-    .v2.register-choice-donate {
+    .v2.register-choice-continue,
+    .v2.deco-divider {
         width: 46.5% !important;
         display: inline-block;
         min-height: 270px;
     }
 
-    .v2.register-choice-v2-audit .wrapper-copy-inline {
+    .v2.register-choice-v2-donate .wrapper-copy-inline {
         display: flex !important;
     }
 
-    .v2.register-choice-v2-audit .copy-inline {
+    .v2.register-choice-v2-donate .copy-inline {
         width: 40% !important;
     }
 
-    .v2.register-choice-v2-audit .list-actions {
+    .v2.register-choice-v2-donate .list-actions {
         margin-top: 0 !important;
         text-align: right !important;
     }
@@ -212,16 +207,16 @@
         width: 100% !important;
     }
 
-    .v2 input {
+    .v2 input, .v2 a {
         font-size: 15px !important;
     }
 
-    .v2 .donation-link, .v2.register-choice-certificate button {
+    .v2 .continue-link, .v2.register-choice-certificate button, .v2.register-choice-certificate input {
         margin-top: 20px;
         width: initial;
     }
 
-    .v2.register-choice-v2-audit input {
+    .v2.register-choice-v2-donate a {
         width: 100% !important;
     }
 
@@ -237,7 +232,7 @@
         margin: 0 2% 20px 0;
     }
 
-    .v2.register-choice-donate .wrapper-copy-inline .wrapper-copy, .v2.register-choice-certificate .wrapper-copy-inline .wrapper-copy {
+    .v2.register-choice-continue .wrapper-copy-inline .wrapper-copy, .v2.register-choice-certificate .wrapper-copy-inline .wrapper-copy {
         width: 60%;
     }
 
@@ -249,7 +244,7 @@
         padding: 15px !important;
     }
 
-    .v2.register-choice-donate .wrapper-copy-inline .wrapper-copy, .v2.register-choice-certificate .wrapper-copy-inline .wrapper-copy {
+    .v2.register-choice-continue .wrapper-copy-inline .wrapper-copy, .v2.register-choice-certificate .wrapper-copy-inline .wrapper-copy {
         width: 60%;
     }
 
@@ -271,14 +266,14 @@
         width: 100% !important;
     }
 
-    .v2 .donation-link:hover,
-    .v2 .donation-link:focus {
+    .v2 .continue-link:hover,
+    .v2 .continue-link:focus {
         background-color: #D7548E !important;
         color: white !important;
         text-decoration: none;
     }
 
-    .v2 .donation-link:hover {
+    .v2 .continue-link:hover {
         cursor: pointer;
     }
 
@@ -366,13 +361,14 @@
 
 @media (min-width: 835px) {
     .v2.register-choice-certificate,
-    .v2.register-choice-donate {
+    .v2.register-choice-continue,
+    .v2.deco-divider {
         min-height: 250px;
     }
 }
 
 @media (min-width: 1024px) {
-    .v2 .donation-link {
+    .v2 .continue-link {
         width: 55%;
     }
     .v2.deco-divider .copy {
@@ -380,15 +376,18 @@
     }
 }
 
-@media (min-width: 1064px) {
+@media (min-width: 1096px) {
     .v2.register-choice-certificate,
-    .v2.register-choice-donate {
+    .v2.register-choice-continue,
+    .v2.deco-divider {
         min-height: 260px;
     }
     .v2 .img-certificate, .v2 .img-donate {
+        margin-top: 10px;
         display: initial;
     }
-    .v2 .donation-link, .v2.register-choice-certificate button {
+    .v2 .continue-link, .v2.register-choice-certificate button,
+    .v2.register-choice-certificate input {
         margin-top: -22px !important;
     }
 }
\ No newline at end of file
diff --git a/themes/edx.org/lms/templates/course_modes/choose.html b/themes/edx.org/lms/templates/course_modes/choose.html
index a8ab708436..2dc5eee275 100644
--- a/themes/edx.org/lms/templates/course_modes/choose.html
+++ b/themes/edx.org/lms/templates/course_modes/choose.html
@@ -47,6 +47,11 @@ from openedx.core.djangolib.markup import HTML, Text
                 window.location.href = '${ecommerce_payment_page | n, js_escaped_string}?sku=' +
                 encodeURIComponent('${sku | n, js_escaped_string}');
             });
+            $('.v2 button[name=verified_mode]').click(function(e){
+                e.preventDefault();
+                window.location.href = 'https://ecommerce.edx.org/coupons/redeem/?code=EDXTSV35&sku=' +
+                encodeURIComponent('${sku | n, js_escaped_string}');
+            });
             % endif
         });
     </script>
@@ -205,7 +210,7 @@ from openedx.core.djangolib.markup import HTML, Text
                             </span>
 
                             <!-- This div was added as part of the LEARNER-1726 experiment. The v2 class should be removed if the experiment is implemented-->
-                            <div class="register-choice register-choice-donate v2 hidden">
+                            <div class="register-choice register-choice-continue v2 hidden">
                                 <h4 class="title">
                                     I Don't Want to Upgrade or Donate Today
                                 </h4>
@@ -218,14 +223,14 @@ from openedx.core.djangolib.markup import HTML, Text
                                 <div class="copy-inline">
                                     <ul class="list-actions">
                                       <li class="action action-select">
-                                        <a class="donation-link" href="/dashboard">Continue to Course</a>
+                                        <a class="continue-link" href="/dashboard">Continue to Course</a>
                                       </li>
                                     </ul>
                                 </div>
                             </div>
 
                             <!-- This div was added as part of the LEARNER-1726 experiment. The v2 class should be removed if the experiment is implemented-->
-                            <div class="register-choice register-choice-v2-audit register-choice-view v2 hidden">
+                            <div class="register-choice register-choice-v2-donate register-choice-view v2 hidden">
                               <h4 class="title">Donate to Support our Non-Profit Mission</h4>
                               <div class="wrapper-copy-inline">
                                 <div class="wrapper-copy">
@@ -233,7 +238,7 @@ from openedx.core.djangolib.markup import HTML, Text
                                 </div>
                                 <div class="copy-inline">
                                 <ul class="list-actions">
-                                    <input type="submit" name="audit_mode" action="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=AG9VK2LC29L5Y" value="Donate and Continue to Course">
+                                    <a class="donation-link" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=AG9VK2LC29L5Y">Donate and Continue to Course</a>
                                 </ul>
                               </div>
                               </div>