From c8250fd573f5f1f8141addeb5d5fd4d7472ece10 Mon Sep 17 00:00:00 2001
From: Matthew Piatetsky <mpiatetsky@edx.org>
Date: Wed, 19 Jul 2017 17:38:44 -0400
Subject: [PATCH] Implement track selection v3 test

LEARNER-1726
---
 lms/static/sass/_experiments.scss             | 426 ++++++++++++------
 .../lms/templates/course_modes/choose.html    |  31 +-
 2 files changed, 305 insertions(+), 152 deletions(-)

diff --git a/lms/static/sass/_experiments.scss b/lms/static/sass/_experiments.scss
index fee87f3911..cb1e952aea 100644
--- a/lms/static/sass/_experiments.scss
+++ b/lms/static/sass/_experiments.scss
@@ -4,22 +4,26 @@
 // Please list the ticket number of the experiment
 
 // --------------------
-// LEARNER-1312 Track Selection V2
-/* This css was added as part of the LEARNER-1312 experiment */
+// LEARNER-1726 Track Selection V3
+/* This css was added as part of the LEARNER-1726 experiment */
 .v2.register-choice {
     margin: 0 2% 20px 0 !important
 }
+
 .v2.register-choice-certificate .list-actions {
     text-align: left !important;
 }
+
 .v2.register-choice-donate .list-actions {
     margin-bottom: 0 !important;
 }
+
 .v2.register-choice-donate .action-select {
     display: inline-block !important;
     list-style-type: none !important;
     width: 100% !important;
 }
+
 .v2.register-choice-donate .donation-link {
     display: inline-block !important;
     padding: 10px 15px !important;
@@ -30,219 +34,361 @@
     text-align: center !important;
     color: #D7548E !important;
     float: left !important;
+    font-size: 15px;
+    font-weight: 500 !important;
 }
+
+@media (min-width: 375px) {
+    .donation-link {
+        font-size: 16px;
+    }
+}
+
 .v2.register-choice-v2-audit {
-    height: 250px !important;
+    height: 300px;
     background: none !important;
     border-top-color: grey !important;
     border-top-width: 1px !important;
 }
+
+@media screen and (min-width: 375px) {
+    .v2.register-choice-v2-audit {
+        height: 250px;
+    }
+}
+
 .v2.register-choice-v2-audit .list-actions {
     margin-bottom: 0 !important;
 }
+
 .v2.register-choice-v2-audit .list-actions input {
     background: transparent !important;
     color: #0075b4 !important;
     box-shadow: none !important;
     text-decoration: underline !important;
     border: none !important;
+    white-space: normal;
 }
+
 .v2.register-choice-v2-audit .wrapper-copy-inline {
     height: 70px !important;
     width: 100% !important;
     display: flex !important;
 }
+
 .v2.register-choice-v2-audit .wrapper-copy {
     width: 70% !important;
     height: auto !important;
 }
 
 .v2.page-header {
-    padding-bottom: 0;
+    padding: 0;
 }
+
 .v2 img {
     margin-top: 20px;
     margin-left: 5px;
 }
+
 .v2 .donation-link {
     font-weight: bold !important;
 }
-@media (min-width: 320px) {
-    .v2.register-choice-certificate,
-    .v2.register-choice-donate,
-    .v2.register-choice-view {
-        width: 100%;
-    }
-    .v2 .wrapper-copy-inline {
-        max-height: 115px;
-    }
-    .v2.register-choice-v2-audit .wrapper-copy-inline {
-        display: block !important;
-    }
-    .v2.register-choice-v2-audit .copy-inline {
-        width: 100% !important;
-    }
-    .v2.register-choice-v2-audit .list-actions {
-        width: 100% !important;
-        margin-top: 20px !important;
-        text-align: center !important;
-    }
-    .v2 .wrapper-copy-inline .wrapper-copy {
-        width: 100% !important;
-    }
-    .v2 .donation-link, .v2 input {
-        width: 100% !important;
-        font-size: 15px !important;
-    }
-    .v2 img {
-        display: none;
+
+.v2.register-choice-certificate,
+.v2.register-choice-donate,
+.v2.register-choice-view {
+    width: 100%;
+}
+
+.v2.register-choice-donate {
+    border-color: #D7548E !important;
+}
+
+.v2 .wrapper-copy-inline {
+    max-height: 115px;
+}
+
+.v2.register-choice-v2-audit .wrapper-copy-inline {
+    display: block !important;
+}
+
+.v2.register-choice-v2-audit .copy-inline {
+    width: 100% !important;
+}
+
+.v2.register-choice-v2-audit .list-actions {
+    width: 100% !important;
+    margin-top: 20px !important;
+    text-align: center !important;
+}
+
+.v2 .wrapper-copy-inline .wrapper-copy {
+    width: 100% !important;
+}
+
+.v2 input{
+    font-size: 15px !important;
+}
+
+.v2 button {
+    background-color: rgb(0, 103, 0);
+    border-color: rgb(0, 103, 0);
+    border-radius: 2px;
+    box-shadow: rgb(0, 77, 0) 0px 2px 1px 0px;
+    cursor: pointer;
+    font-family: "Open Sans";
+    height: auto;
+    margin-right: 4px;
+    margin-top: 0px;
+    padding: 10px 15px;
+    width: initial;
+    background-image: none !important;
+    font-size: 14px !important;
+    font-weight: 500 !important;
+
+    &:hover, &:focus {
+        background-color: #009b00 !important;
+        border-color: #009b00;
+        box-shadow: #004d00 0px 2px 1px 0px;
     }
 }
+
+.savings-message {
+    margin-top: 10px;
+    font-size: 11px;
+}
+@media screen and (min-width: 375px) {
+    .savings-message {
+        font-size: 13px;
+        margin-left: 16px;
+    }
+}
+
+.v2 .donation-link, .v2 input, .v2 button {
+    width: 100%;
+}
+
+.v2 img {
+    display: none;
+}
+
+.v2 .deco-divider {
+    display: none;
+}
+
+.v2 .visual-reference {
+    width: 38%;
+}
+
+@media (min-width: 420px) {
+    .v2 button {
+        height: 45px;
+        font-size: 16px !important;
+    }
+}
+
 @media (min-width: 768px) {
     .v2.register-choice-certificate,
     .v2.register-choice-donate {
-        width: 48% !important;
+        width: 46.5% !important;
         display: inline-block;
-        min-height: 250px;
+        min-height: 270px;
     }
+
     .v2.register-choice-v2-audit .wrapper-copy-inline {
         display: flex !important;
     }
+
     .v2.register-choice-v2-audit .copy-inline {
         width: 40% !important;
     }
+
     .v2.register-choice-v2-audit .list-actions {
         margin-top: 0 !important;
         text-align: right !important;
     }
+
     .v2 .wrapper-copy-inline .wrapper-copy {
-        width: 58% !important;
+        width: 100% !important;
     }
-    .v2 .donation-link, .v2 input {
+
+    .v2 input {
         font-size: 15px !important;
-        width: 55% !important;
     }
+
+    .v2 .donation-link, .v2.register-choice-certificate button {
+        margin-top: 20px;
+        width: initial;
+    }
+
+    .v2.register-choice-v2-audit input {
+        width: 100% !important;
+    }
+
     .v2.register-choice-view {
         height: 250px;
     }
+
     .v2 img {
         display: initial;
     }
+
     .v2.register-choice {
         margin: 0 2% 20px 0;
     }
 
+    .v2.register-choice-donate .wrapper-copy-inline .wrapper-copy, .v2.register-choice-certificate .wrapper-copy-inline .wrapper-copy {
+        width: 60%;
+    }
+
+    .v2.register-choice-view .wrapper-copy-inline .wrapper-copy {
+        width: 100%;
+    }
+
+    .v2.register-choice {
+        padding: 15px !important;
+    }
+
+    .v2.register-choice-donate .wrapper-copy-inline .wrapper-copy, .v2.register-choice-certificate .wrapper-copy-inline .wrapper-copy {
+        width: 60%;
+    }
+
+    .v2.register-choice {
+        padding: 20px !important;
+    }
+
+    .v2.register-choice.register-choice-view {
+        margin-right: 0;
+    }
+
+    .v2.register-choice .list-actions:last-child {
+        float: left;
+        width: 100%;
+        margin-top: 0px;
+    }
+
+    .v2.register-choice .action-select {
+        width: 100% !important;
+    }
+
+    .v2 .donation-link:hover,
+    .v2 .donation-link:focus {
+        background-color: #D7548E !important;
+        color: white !important;
+        text-decoration: none;
+    }
+
+    .v2 .donation-link:hover {
+        cursor: pointer;
+    }
+
+    .v2 .copy li {
+        margin-bottom: 5px;
+    }
+
+    .v2.register-choice .copy-inline {
+        width: 100%;
+    }
+
+    .v2 .register-choice-view {
+        border-color: #2991c3 !important;
+    }
+
+    .v2 .visual-reference {
+        vertical-align: top;
+    }
+
+    .v2 .wrapper-copy-inline .wrapper-copy ul {
+        margin-top: 0px;
+        padding-left: 30px;
+    }
+
+    .v2 .img-certificate {
+        border: 2px solid #009b00 !important;
+        float: right;
+        height: 120px;
+        width: auto;
+        margin-top: 0 !important;
+        display: none;
+    }
+
+    .v2 .img-donate {
+        margin-top: 0;
+        float: right;
+        border: 2px solid #D7548E !important;
+        display: none;
+    }
+
+    .v2 .img-view {
+        border: 2px solid #2991c3 !important;
+    }
+
+    .v2.register-choice .title {
+        width: 100%;
+        margin-bottom: 20px;
+    }
+
+    .v2.register-choice.register-choice-view .action-select {
+        border: 1px solid transparent !important;
+        border-radius: 3px;
+    }
+
+    .v2.register-choice.register-choice-view .action-select button {
+        border: 1px solid transparent !important;
+    }
+
+    .v2.register-choice.register-choice-view .action-select:hover {
+        border: 1px solid #0075b4 !important;
+    }
+
     .v2.deco-divider {
         width: 3% !important;
         box-sizing: border-box;
         float: left;
         display: inline-block;
-        height: 400px;
+        height: 250px;
         margin: 0px 0 40px 0 !important;
-        border-left: 4px solid #f5f5f5 !important;
-        border-top: none !important;
+        border-left: 4px solid #f5f5f5 !important; border-top:none !important;
+
+        .copy {
+            position: absolute;
+            top: 110px !important;
+            left: calc(50% - 40px) !important;
+            margin-left: 20px;
+            background: white;
+            text-align: center;
+            color: #474747;
+            width: 10px;
+            padding: 0 !important;
+        }
     }
 }
 
-@media (min-width: 320px) {
-    .v2 .visual-reference {
-        width: 38%;
-    }
-}
-@media (min-width: 768px) {
-
-    @media (min-width: 320px) {
-        .v2.register-choice-donate .wrapper-copy-inline .wrapper-copy, .v2.register-choice-certificate .wrapper-copy-inline .wrapper-copy {
-            width: 60%;
-        }
-    }
-    @media (min-width: 768px) {
-        .v2.register-choice-donate .wrapper-copy-inline .wrapper-copy, .v2.register-choice-certificate .wrapper-copy-inline .wrapper-copy {
-            width: 60%;
-        }
-    }
-    @media (min-width: 320px) {
-        .v2.register-choice-view .wrapper-copy-inline .wrapper-copy {
-            width: 100%;
-        }
-    }
-    @media (min-width: 320px) {
-        .v2.register-choice {
-            padding: 15px !important;
-        }
-    }
-    @media (min-width: 768px) {
-        .v2.register-choice {
-            padding: 20px !important;
-        }
-        .v2.register-choice.register-choice-view {
-            margin-right: 0;
-        }
-    }
-    @media screen and (min-width: 769px) {
-        .v2.register-choice .list-actions:last-child {
-            float: left;
-            width: 100%;
-            margin-top: 0px;
-        }
-    }
-    @media screen and (min-width: 769px) {
-        .v2.register-choice .action-select {
-            width: 100% !important;
-        }
-    }
-    .v2 .donation-link:hover,
-    .v2 .donation-link:focus {
-        background-color: #D7548E !important;
-        color: white !important;
-        text-decoration: none;
-    }
-    .v2 .donation-link:hover {
-        cursor: pointer;
-    }
-    .v2 .copy li {
-        margin-bottom: 5px;
-    }
-    .v2.register-choice .copy-inline {
-        width: 100%;
-    }
+@media (min-width: 835px) {
+    .v2.register-choice-certificate,
     .v2.register-choice-donate {
-        border-color: #D7548E !important;
-    }
-    .v2 .register-choice-view {
-        border-color: #2991c3 !important;
-    }
-    .v2 .visual-reference {
-        vertical-align: top;
-    }
-    .v2 .wrapper-copy-inline .wrapper-copy ul {
-        margin-top: 0px;
-        padding-left: 30px;
-    }
-    .v2 .img-certificate {
-        border: 2px solid #009b00 !important;
-    }
-    .v2 .img-donate {
-        border: 2px solid #D7548E !important;
-    }
-    .v2 .img-view {
-        border: 2px solid #2991c3 !important;
-    }
-    .v2.register-choice .title {
-        width: 100%;
-        margin-bottom: 20px;
-    }
-    .v2.register-choice.register-choice-view .action-select {
-        border: 1px solid transparent !important;
-        border-radius: 3px;
-    }
-    .v2.register-choice.register-choice-view .action-select input {
-        border: 1px solid transparent !important;
-    }
-    .v2.register-choice.register-choice-view .action-select:hover {
-        border: 1px solid #0075b4 !important;
-    }
-    .v2.deco-divider {
-        display: none !important;
+        min-height: 250px;
     }
 }
+
+@media (min-width: 1024px) {
+    .v2 .donation-link {
+        width: 55%;
+    }
+    .v2.deco-divider .copy {
+        margin-left: 15px;
+    }
+}
+
+@media (min-width: 1064px) {
+    .v2.register-choice-certificate,
+    .v2.register-choice-donate {
+        min-height: 260px;
+    }
+    .v2 .img-certificate, .v2 .img-donate {
+        display: initial;
+    }
+    .v2 .donation-link, .v2.register-choice-certificate button {
+        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 dd57a3f62e..a8ab708436 100644
--- a/themes/edx.org/lms/templates/course_modes/choose.html
+++ b/themes/edx.org/lms/templates/course_modes/choose.html
@@ -75,7 +75,7 @@ from openedx.core.djangolib.markup import HTML, Text
                         <h3 class="title v1">
                             ${title_content}
                         </h3>
-                        <!-- This div was added as part of the LEARNER-1312 experiment. The v2 class should be removed if the experiment is implemented-->
+                        <!-- This div was added as part of the LEARNER-1726 experiment. The v2 class should be removed if the experiment is implemented-->
                         <h3 class="title v2 hidden">
                             Next, Select Your Learning Path
                         </h3>
@@ -86,7 +86,7 @@ from openedx.core.djangolib.markup import HTML, Text
                         b_tag_kwargs = {'b_start': HTML('<b>'), 'b_end': HTML('</b>')}
                         %>
                         % if "verified" in modes:
-                            <!-- This div was added as part of the LEARNER-1312 experiment. The v2 class should be removed if the experiment is implemented-->
+                            <!-- 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-certificate v2 hidden">
                                 <h4 class="title">Pursue a Verified Certificate</h4>
                                 <div class="wrapper-copy-inline">
@@ -102,7 +102,14 @@ from openedx.core.djangolib.markup import HTML, Text
                                     <li class="action action-select">
                                       <input type="hidden" name="contribution" value="${min_price}" />
                                       <!-- The class verified_mode should be added to this selector if the experiment is implemented-->
-                                      <input type="submit" name="verified_mode" value="Upgrade to a Certificate ($${min_price} USD)" />
+                                      <div class="upgradev1">
+                                        <input type="submit" name="verified_mode" value="Upgrade to a Certificate ($${min_price} USD)" />
+                                      </div>
+                                      <div class="upgradev2 hidden">
+                                          <button type="submit" name="verified_mode">Upgrade to a Certificate (<del>$${min_price} USD</del>)</button>
+                                          <br>
+                                          <div class="savings-message">Save 5% if you upgrade now! ($${int(min_price * .95)} USD)</div>
+                                      </div>
                                     </li>
                                   </ul>
                                 </div>
@@ -192,41 +199,41 @@ from openedx.core.djangolib.markup import HTML, Text
                             <span class="deco-divider v1">
                                 <span class="copy">${_("or")}</span>
                             </span>
-                            <!-- This div was added as part of the LEARNER-1312 experiment. The v2 class should be removed if the experiment is implemented-->
+                            <!-- This div was added as part of the LEARNER-1726 experiment. The v2 class should be removed if the experiment is implemented-->
                             <span class="deco-divider v2 hidden">
                                 <span class="copy">${_("or")}</span>
                             </span>
 
-                            <!-- This div was added as part of the LEARNER-1312 experiment. The v2 class should be removed if the experiment is implemented-->
+                            <!-- 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">
                                 <h4 class="title">
-                                    Donate to Support our Non-Profit Mission
+                                    I Don't Want to Upgrade or Donate Today
                                 </h4>
                                 <div class="wrapper-copy-inline">
                                     <div class="wrapper-copy">
-                                        Any amount will support our mission to make the world's best education more accessible.
+                                        If you do not want to add a certificate or donate to edX's mission today, you can skip this step for now and continue to the course.
                                     </div>
                                     <img src="/static/images/edx-home-graphic.png" class="visual-reference img-donate" alt="Visual of two hands forming a heart shape" >
                                 </div>
                                 <div class="copy-inline">
                                     <ul class="list-actions">
                                       <li class="action action-select">
-                                        <a class="donation-link" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=MJUBGL54QTCTA">Donate and Continue to Course</a>
+                                        <a class="donation-link" href="/dashboard">Continue to Course</a>
                                       </li>
                                     </ul>
                                 </div>
                             </div>
 
-                            <!-- This div was added as part of the LEARNER-1312 experiment. The v2 class should be removed if the experiment is implemented-->
+                            <!-- 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">
-                              <h4 class="title">I Don't Want to Upgrade or Donate Today</h4>
+                              <h4 class="title">Donate to Support our Non-Profit Mission</h4>
                               <div class="wrapper-copy-inline">
                                 <div class="wrapper-copy">
-                                    If you do not want to buy a certificate or donate to edX's mission today, you can skip this step for now and continue to the course.
+                                    Even if you are not interested in pursuing a Verified Certificate, a donation helps edX continue to work towards its non-profit mission of making the world's best education more accessible to learners everywhere.
                                 </div>
                                 <div class="copy-inline">
                                 <ul class="list-actions">
-                                    <input type="submit" name="audit_mode" value="Continue to Course">
+                                    <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">
                                 </ul>
                               </div>
                               </div>