Fix selectors so that unenrollment survey works with multiple courses

lms/static/js/learner_dashboard/views/unenroll_view.js

@@ -3,36 +3,33 @@
     define(['backbone',
         'jquery',
         'underscore',
-        'gettext',
-        'edx-ui-toolkit/js/utils/html-utils'
+        'gettext'
     ],
          function(
              Backbone,
              $,
              _,
-             gettext,
-             HtmlUtils
+             gettext
          ) {
              return Backbone.View.extend({
                  el: '.unenroll-modal',
 
                  switchToSlideOne: function() {
-                     var survey, i,
-                         reasonsSurvey = HtmlUtils.HTML($('.reasons_survey'));
+                     var survey, i;
                      // Randomize survey option order
                      survey = document.querySelector('.options');
                      for (i = survey.children.length - 1; i >= 0; i--) {
                          survey.appendChild(survey.children[Math.random() * i | 0]);
                      }
-                     $('.inner-wrapper header').hide();
-                     $('#unenroll_form').after(HtmlUtils.ensureHtml(reasonsSurvey).toString()).hide();
-                     $('.reasons_survey .slide1').removeClass('hidden');
+                     this.$('.inner-wrapper header').hide();
+                     this.$('#unenroll_form').hide();
+                     this.$('.slide1').removeClass('hidden');
                  },
 
                  switchToSlideTwo: function() {
-                     var reason = $(".reasons_survey input[name='reason']:checked").attr('val');
+                     var reason = this.$(".reasons_survey input[name='reason']:checked").attr('val');
                      if (reason === 'Other') {
-                         reason = $('.other_text').val();
+                         reason = this.$('.other_text').val();
                      }
                      if (reason) {
                          window.analytics.track('unenrollment_reason.selected', {
@@ -41,9 +38,11 @@
                              displayName: 'v1'
                          });
                      }
-                     HtmlUtils.setHtml($('.reasons_survey'), HtmlUtils.HTML($('.slide2').html()));
-                     $('.reasons_survey .return_to_dashboard').attr('href', this.urls.dashboard);
-                     $('.reasons_survey .browse_courses').attr('href', this.urls.browseCourses);
+                     this.$('.slide1').addClass('hidden');
+                     this.$('.survey_course_name').text(this.$('#unenroll_course_name').text());
+                     this.$('.slide2').removeClass('hidden');
+                     this.$('.reasons_survey .return_to_dashboard').attr('href', this.urls.dashboard);
+                     this.$('.reasons_survey .browse_courses').attr('href', this.urls.browseCourses);
                  },
 
                  unenrollComplete: function(event, xhr) {
@@ -52,7 +51,7 @@
                              location.href = this.urls.dashboard;
                          } else {
                              this.switchToSlideOne();
-                             $('.submit_reasons').click(this.switchToSlideTwo.bind(this));
+                             this.$('.reasons_survey:first .submit_reasons').click(this.switchToSlideTwo.bind(this));
                          }
                      } else if (xhr.status === 403) {
                          location.href = this.urls.signInUser + '?course_id=' +

lms/static/js/spec/learner_dashboard/unenroll_view_spec.js

@@ -20,7 +20,7 @@ define([
         };
 
         beforeEach(function() {
-            setFixtures('<div class="wrapper-action-more" data-course-key="course-v1:edX+DemoX+Demo_Course"> <button type="button" class="action action-more" id="actions-dropdown-link-0" aria-haspopup="true" aria-expanded="true" aria-controls="actions-dropdown-0" data-course-number="DemoX" data-course-name="edX Demonstration Course" data-dashboard-index="0"> <span class="sr">Course options for</span> <span class="sr">&nbsp;  edX Demonstration Course </span> <span class="fa fa-cog" aria-hidden="true"></span> </button> <div class="actions-dropdown is-visible" id="actions-dropdown-0" tabindex="-1"> <ul class="actions-dropdown-list" id="actions-dropdown-list-0" aria-label="Available Actions" role="menu"> <div class="reasons_survey"> <div class="slide1 hidden">  <h3>We\'re sorry to see you go! Please share your main reason for unenrolling.</h3><br>  <ul class="options">  <li><label class="option"><input type="radio" name="reason" val="I don\'t have enough support">I don\'t have enough support</label></li><li><label class="option"><input type="radio" name="reason" val="I don’t have the academic or language prerequisites">I don\'t have the academic or language prerequisites</label></li><li><label class="option"><input type="radio" name="reason" val="Something was broken">Something was broken</label></li><li><label class="option"><input type="radio" name="reason" val="I just wanted to browse the material">I just wanted to browse the material</label></li><li><label class="option"><input type="radio" name="reason" val="This won’t help me reach my goals">This won\'t help me reach my goals</label></li><li><label class="option"><input type="radio" name="reason" val="I am not happy with the quality of the content">I am not happy with the quality of the content</label></li><li><label class="option"><input type="radio" name="reason" val="The course material was too hard">The course material was too hard</label></li><li><label class="option"><input type="radio" name="reason" val="I don\'t have the time">I don\'t have the time</label></li><li><label class="option"><input type="radio" name="reason" val="The course material was too easy">The course material was too easy</label></li><li><label class="option"><input class="other_radio" type="radio" name="reason" val="Other">Other <input type="text" class="other_text"></label></li></ul>  <button class="submit_reasons">Submit</button> </div> </div> <div class="slide2 hidden"> Thank you for sharing your reasons for unenrolling.<br> You are unenrolled from edX Demonstration Course. <a class="button survey_button return_to_dashboard">  Return To Dashboard </a> <a class="button survey_button browse_courses">  Browse Courses </a> </div>   <li class="actions-item" id="actions-item-unenroll-0">   <a href="#unenroll-modal" class="action action-unenroll" rel="leanModal" data-course-id="course-v1:edX+DemoX+Demo_Course" data-course-number="DemoX" data-course-name="edX Demonstration Course" data-dashboard-index="0" data-track-info="Are you sure you want to unenroll from %(course_name)s (%(course_number)s)?" id="unenroll-0">    Unenroll   </a>  </li>  <li class="actions-item" id="actions-item-email-settings-0">  </li>  </ul> </div> </div>');  // eslint-disable-line max-len
+            setFixtures('<div class="unenroll-modal"><div class="wrapper-action-more" data-course-key="course-v1:edX+DemoX+Demo_Course"> <button type="button" class="action action-more" id="actions-dropdown-link-0" aria-haspopup="true" aria-expanded="true" aria-controls="actions-dropdown-0" data-course-number="DemoX" data-course-name="edX Demonstration Course" data-dashboard-index="0"> <span class="sr">Course options for</span> <span class="sr">&nbsp;  edX Demonstration Course </span> <span class="fa fa-cog" aria-hidden="true"></span> </button> <div class="actions-dropdown is-visible" id="actions-dropdown-0" tabindex="-1"> <ul class="actions-dropdown-list" id="actions-dropdown-list-0" aria-label="Available Actions" role="menu"> <div class="reasons_survey"> <div class="slide1 hidden">  <h3>We\'re sorry to see you go! Please share your main reason for unenrolling.</h3><br>  <ul class="options">  <li><label class="option"><input type="radio" name="reason" val="I don\'t have enough support">I don\'t have enough support</label></li><li><label class="option"><input type="radio" name="reason" val="I don’t have the academic or language prerequisites">I don\'t have the academic or language prerequisites</label></li><li><label class="option"><input type="radio" name="reason" val="Something was broken">Something was broken</label></li><li><label class="option"><input type="radio" name="reason" val="I just wanted to browse the material">I just wanted to browse the material</label></li><li><label class="option"><input type="radio" name="reason" val="This won’t help me reach my goals">This won\'t help me reach my goals</label></li><li><label class="option"><input type="radio" name="reason" val="I am not happy with the quality of the content">I am not happy with the quality of the content</label></li><li><label class="option"><input type="radio" name="reason" val="The course material was too hard">The course material was too hard</label></li><li><label class="option"><input type="radio" name="reason" val="I don\'t have the time">I don\'t have the time</label></li><li><label class="option"><input type="radio" name="reason" val="The course material was too easy">The course material was too easy</label></li><li><label class="option"><input class="other_radio" type="radio" name="reason" val="Other">Other <input type="text" class="other_text"></label></li></ul>  <button class="submit_reasons">Submit</button> </div> </div> <div class="slide2 hidden"> Thank you for sharing your reasons for unenrolling.<br> You are unenrolled from edX Demonstration Course. <a class="button survey_button return_to_dashboard">  Return To Dashboard </a> <a class="button survey_button browse_courses">  Browse Courses </a> </div>   <li class="actions-item" id="actions-item-unenroll-0">   <a href="#unenroll-modal" class="action action-unenroll" rel="leanModal" data-course-id="course-v1:edX+DemoX+Demo_Course" data-course-number="DemoX" data-course-name="edX Demonstration Course" data-dashboard-index="0" data-track-info="Are you sure you want to unenroll from %(course_name)s (%(course_number)s)?" id="unenroll-0">    Unenroll   </a>  </li>  <li class="actions-item" id="actions-item-email-settings-0">  </li>  </ul> </div> </div></div>');  // eslint-disable-line max-len
         });
 
         afterEach(function() {
@@ -39,7 +39,7 @@ define([
             expect($('.slide1').hasClass('hidden')).toEqual(false);
             expect($('.slide2').hasClass('hidden')).toEqual(true);
             view.switchToSlideTwo();
-            expect($('.slide2').hasClass('hidden')).toEqual(true);
+            expect($('.slide2').hasClass('hidden')).toEqual(false);
         });
     });
 }

lms/static/sass/multicourse/_dashboard.scss

@@ -1504,7 +1504,7 @@ a.fade-cover{
 }
 
 .reasons_survey {
-  padding: 20px;
+  margin: 20px;
 
   .options {
     list-style: none;

lms/templates/dashboard/_dashboard_course_listing.html

@@ -220,7 +220,6 @@ from util.course import get_link_for_about_page, get_encoded_course_sharing_utm_
               <div class="actions-dropdown" id="actions-dropdown-${dashboard_index}" tabindex="-1">
                 <ul class="actions-dropdown-list" id="actions-dropdown-list-${dashboard_index}" aria-label="${_('Available Actions')}" role="menu">
                   % if can_unenroll:
-                    <%include file='_reason_survey.html' args='course_overview=course_overview' />
                     <li class="actions-item" id="actions-item-unenroll-${dashboard_index}">
                       <% course_refund_url = reverse('course_run_refund_status', args=[unicode(course_overview.id)]) %>
                           % if not is_course_blocked:

lms/templates/dashboard/_reason_survey.html

-<%page args="course_overview" expression_filter="h"/>
 <%!
-import urllib
-
 from django.utils.translation import ugettext as _
 %>
 <div class="reasons_survey">
@@ -21,10 +18,9 @@ from django.utils.translation import ugettext as _
     </ul>
     <button class="submit_reasons">${_('Submit')}</button>
   </div>
-</div>
-<div class="slide2 hidden">
+  <div class="slide2 hidden">
     ${_('Thank you for sharing your reasons for unenrolling.')}<br>
-  ${_('You are unenrolled from')} ${course_overview.display_name_with_default}.
+    ${_('You are unenrolled from')} <span class="survey_course_name"></span>.
 
     <div>
       <a class="button survey_button return_to_dashboard">
@@ -34,4 +30,5 @@ from django.utils.translation import ugettext as _
         ${_('Browse Courses')}
       </a>
     </div>
+  </div>
 </div>

themes/edx.org/lms/templates/dashboard.html

@@ -288,5 +288,6 @@ from openedx.core.djangoapps.theming import helpers as theming_helpers
         <input name="submit" type="submit" value="${_("Unenroll")}" />
       </div>
     </form>
+    <%include file='dashboard/_reason_survey.html' />
   </div>
 </section>