enable users to select course when making support requests

ECOM-5936

common/djangoapps/util/views.py

@@ -25,6 +25,7 @@ from edxmako.shortcuts import render_to_response, render_to_string
 from openedx.core.djangoapps.site_configuration import helpers as configuration_helpers
 import track.views
 from student.roles import GlobalStaff
+from student.models import CourseEnrollment
 
 log = logging.getLogger(__name__)
 
@@ -222,6 +223,40 @@ class _ZendeskApi(object):
         return None
 
 
+def _get_zendesk_custom_field_context(request):
+    """
+    Construct a dictionary of data that can be stored in Zendesk custom fields.
+    """
+    context = {}
+
+    course_id = request.POST.get("course_id")
+    if not course_id:
+        return context
+
+    context["course_id"] = course_id
+    if not request.user.is_authenticated():
+        return context
+
+    enrollment = CourseEnrollment.get_enrollment(request.user, CourseKey.from_string(course_id))
+    if enrollment and enrollment.is_active:
+        context["enrollment_mode"] = enrollment.mode
+
+    return context
+
+
+def _format_zendesk_custom_fields(context):
+    """
+    Format the data in `context` for compatibility with the Zendesk API.
+    Ignore any keys that have not been configured in `ZENDESK_CUSTOM_FIELDS`.
+    """
+    custom_fields = []
+    for key, val, in settings.ZENDESK_CUSTOM_FIELDS.items():
+        if key in context:
+            custom_fields.append({"id": val, "value": context[key]})
+
+    return custom_fields
+
+
 def _record_feedback_in_zendesk(
         realname,
         email,
@@ -231,7 +266,8 @@ def _record_feedback_in_zendesk(
         additional_info,
         group_name=None,
         require_update=False,
-        support_email=None
+        support_email=None,
+        custom_fields=None
 ):
     """
     Create a new user-requested Zendesk ticket.
@@ -246,6 +282,8 @@ def _record_feedback_in_zendesk(
     If `require_update` is provided, returns False when the update does not
     succeed. This allows using the private comment to add necessary information
     which the user will not see in followup emails from support.
+
+    If `custom_fields` is provided, submits data to those fields in Zendesk.
     """
     zendesk_api = _ZendeskApi()
 
@@ -271,6 +309,10 @@ def _record_feedback_in_zendesk(
             "tags": zendesk_tags
         }
     }
+
+    if custom_fields:
+        new_ticket["ticket"]["custom_fields"] = custom_fields
+
     group = None
     if group_name is not None:
         group = zendesk_api.get_group(group_name)
@@ -412,6 +454,11 @@ def submit_feedback(request):
         if not settings.ZENDESK_URL or not settings.ZENDESK_USER or not settings.ZENDESK_API_KEY:
             raise Exception("Zendesk enabled but not configured")
 
+        custom_fields = None
+        if settings.ZENDESK_CUSTOM_FIELDS:
+            custom_field_context = _get_zendesk_custom_field_context(request)
+            custom_fields = _format_zendesk_custom_fields(custom_field_context)
+
         success = _record_feedback_in_zendesk(
             context["realname"],
             context["email"],
@@ -419,7 +466,8 @@ def submit_feedback(request):
             context["details"],
             context["tags"],
             context["additional_info"],
-            support_email=context["support_email"]
+            support_email=context["support_email"],
+            custom_fields=custom_fields
         )
 
     _record_feedback_in_datadog(context["tags"])

lms/envs/aws.py

@@ -333,6 +333,8 @@ COMMENTS_SERVICE_URL = ENV_TOKENS.get("COMMENTS_SERVICE_URL", '')
 COMMENTS_SERVICE_KEY = ENV_TOKENS.get("COMMENTS_SERVICE_KEY", '')
 CERT_QUEUE = ENV_TOKENS.get("CERT_QUEUE", 'test-pull')
 ZENDESK_URL = ENV_TOKENS.get('ZENDESK_URL', ZENDESK_URL)
+ZENDESK_CUSTOM_FIELDS = ENV_TOKENS.get('ZENDESK_CUSTOM_FIELDS', ZENDESK_CUSTOM_FIELDS)
+
 FEEDBACK_SUBMISSION_EMAIL = ENV_TOKENS.get("FEEDBACK_SUBMISSION_EMAIL")
 MKTG_URLS = ENV_TOKENS.get('MKTG_URLS', MKTG_URLS)
 

lms/envs/common.py

@@ -1003,6 +1003,7 @@ FEEDBACK_SUBMISSION_EMAIL = None
 ZENDESK_URL = None
 ZENDESK_USER = None
 ZENDESK_API_KEY = None
+ZENDESK_CUSTOM_FIELDS = {}
 
 ##### EMBARGO #####
 EMBARGO_SITE_REDIRECT_URL = None

lms/static/sass/_build-lms-v1.scss

@@ -35,6 +35,7 @@
 @import 'shared/modal';
 @import 'shared/activation_messages';
 @import 'shared/unsubscribe';
+@import 'shared/help-tab';
 
 // shared - platform
 @import 'multicourse/home';

lms/static/sass/shared-v2/_help-tab.scss

@@ -78,3 +78,9 @@
         padding: 0 $baseline $baseline;
     }
 }
+
+.feedback-form-select {
+    background: $white;
+    margin-bottom: $baseline;
+    width: 100%;
+}

lms/static/sass/shared/_help-tab.scss

+.feedback-form-select {
+    background: $white;
+    margin-bottom: $baseline;
+    width: 100%;
+}

lms/templates/help_modal.html

@@ -99,15 +99,21 @@ from xmodule.tabs import CourseTabList
           <label data-field="email" for="feedback_form_email">${_('E-mail')}*</label>
           <input name="email" type="text" id="feedback_form_email" required>
     % endif
+
+          <div class="js-course-id-anchor">
+              % if course:
+                  <input name="course_id" type="hidden" value="${unicode(course.id)}">
+              % endif
+          </div>
+
           <label data-field="subject" for="feedback_form_subject">${_('Briefly describe your issue')}*</label>
           <input name="subject" type="text" id="feedback_form_subject" required>
+
           <label data-field="details" for="feedback_form_details">${_('Tell us the details')}*</label>
           <span class="tip" id="feedback_form_details_tip">${_('Describe what you were doing when you encountered the issue. Include any details that will help us to troubleshoot, including error messages that you saw.')}</span>
           <textarea name="details" id="feedback_form_details" required aria-describedby="feedback_form_details_tip"></textarea>
+
           <input name="issue_type" type="hidden">
-    % if course:
-          <input name="course_id" type="hidden" value="${unicode(course.id)}">
-    % endif
           <div class="submit">
             <input name="submit" type="submit" value="${_('Submit')}" id="feedback_submit">
           </div>
@@ -138,7 +144,12 @@ from xmodule.tabs import CourseTabList
 
 <script type="text/javascript">
 $(document).ready(function() {
-    var $helpModal = $("#help-modal"),
+    var currentCourseId,
+        courseOptions = [],
+        userAuthenticated = false,
+        courseOptionsLoadInProgress = false,
+        finishedLoadingCourseOptions = false,
+        $helpModal = $("#help-modal"),
         $closeButton = $("#help-modal .close-modal"),
         $leanOverlay = $("#lean_overlay"),
         $feedbackForm = $("#feedback_form"),
@@ -149,11 +160,101 @@ $(document).ready(function() {
             $('area,input,select,textarea,button').removeAttr('tabindex');
             $(".help-tab a").focus();
             $leanOverlay.removeAttr('tabindex');
+        },
+        showFeedback = function(event, issue_type, title, subject_label, details_label) {
+            event.preventDefault();
+            DialogTabControls.initializeTabKeyValues("#feedback_form_wrapper", $closeButton);
+            $("#feedback_form input[name='issue_type']").val(issue_type);
+            $("#feedback_form_wrapper header").html("<h2>" + title + "</h2><hr>");
+            $("#feedback_form_wrapper label[data-field='subject']").html(subject_label);
+            $("#feedback_form_wrapper label[data-field='details']").html(details_label);
+            if (userAuthenticated && finishedLoadingCourseOptions && courseOptions.length > 1) {
+                $('.js-course-id-anchor').html([
+                    '<label for="feedback_form_course">' + '${_("Course") | n, js_escaped_string}' + '</label>',
+                    '<select name="course_id" id="feedback_form_course" class="feedback-form-select">',
+                    courseOptions.join(''),
+                    '</select>'
+                ].join(''));
+            }
+            $("#help_wrapper").css("display", "none");
+            $("#feedback_form_wrapper").css("display", "block");
+            $closeButton.focus();
+        },
+        loadCourseOptions = function() {
+            courseOptionsLoadInProgress = true;
+            $.ajax({
+                url: '/api/enrollment/v1/enrollment',
+                success: function(data) {
+                    var i,
+                        courseDetails,
+                        courseName,
+                        courseId,
+                        option,
+                        defaultOptionText = '${_("- Select -") | n, js_escaped_string}',
+                        markedSelectedOption = false;
+
+                    // Make sure courseOptions is empty before we begin pushing options into it.
+                    courseOptions = [];
+
+                    for (i = 0; i < data.length; i++) {
+                        courseDetails = data[i].course_details;
+                        if (!courseDetails) {
+                            continue;
+                        }
+
+                        courseName = courseDetails.course_name;
+                        courseId = courseDetails.course_id;
+                        if (!(courseName && courseId)) {
+                            continue;
+                        }
+
+                        // Build an option for this course and select it if it's the course we're currently viewing.
+                        if (!markedSelectedOption && courseId === currentCourseId) {
+                            option = buildCourseOption(courseName, courseId, true);
+                            markedSelectedOption = true;
+                        } else {
+                            option = buildCourseOption(courseName, courseId, false);
+                        }
+
+                        courseOptions.push(option);
+                    }
+
+                    // Build the default option and select it if we haven't already selected another option.
+                    option = buildCourseOption(defaultOptionText, '', !markedSelectedOption);
+
+                    // Add the default option to the head of the courseOptions Array.
+                    courseOptions.unshift(option);
+
+                    finishedLoadingCourseOptions = true;
+                },
+                complete: function() {
+                    courseOptionsLoadInProgress = false;
+                }
+            });
+        },
+        buildCourseOption = function(courseName, courseId, selected) {
+            var option = '<option value="' + _.escape(courseId) + '"';
+            if (selected) {
+                option += ' selected';
+            }
+            option += '>' + _.escape(courseName) + '</option>';
+            return option;
         };
 
+    % if user.is_authenticated():
+        userAuthenticated = true;
+    % endif
+
+    % if course:
+        currentCourseId = "${unicode(course.id) | n, js_escaped_string}";
+    % endif
+
     DialogTabControls.setKeydownListener($helpModal, $closeButton);
 
     $(".help-tab").click(function() {
+        if (userAuthenticated && !finishedLoadingCourseOptions && !courseOptionsLoadInProgress) {
+            loadCourseOptions();
+        }
         $helpModal.css("position", "absolute");
         DialogTabControls.initializeTabKeyValues("#help_wrapper", $closeButton);
         $(".field-error").removeClass("field-error");
@@ -171,18 +272,6 @@ $(document).ready(function() {
         $closeButton.focus();
     });
 
-    showFeedback = function(event, issue_type, title, subject_label, details_label) {
-        $("#help_wrapper").css("display", "none");
-        DialogTabControls.initializeTabKeyValues("#feedback_form_wrapper", $closeButton);
-        $("#feedback_form input[name='issue_type']").val(issue_type);
-        $("#feedback_form_wrapper").css("display", "block");
-        $("#feedback_form_wrapper header").html("<h2>" + title + "</h2><hr>");
-        $("#feedback_form_wrapper label[data-field='subject']").html(subject_label);
-        $("#feedback_form_wrapper label[data-field='details']").html(details_label);
-        $closeButton.focus();
-        event.preventDefault();
-    };
-
     $("#feedback_link_problem").click(function(event) {
         $("#feedback_form_details_tip").css({"display": "block", "padding-bottom": "5px"});
         showFeedback(