Merge pull request #20816 from edx/usama/prod-338-support-contact-us-form

Support Contact Form Updated

lms/djangoapps/support/static/support/jsx/logged_in_user.jsx

@@ -12,6 +12,9 @@ function LoggedInUser({ userInformation, setErrorState, zendeskApiHost, submitFo
   if (userInformation.enrollments) {
     courseElement = (<div>
       <label className="label-course" htmlFor="course">{gettext('Course Name')}</label>
+      <p className="message-desc"><i>
+      {gettext('For inquiries regarding assignments, grades, or structure of a specific course, please post in the discussion forums for that course directly.')}
+      </i></p>
       <select className="form-control select-course" id="course" defaultValue={userInformation.course_id}>
         <option key="select-course" value="">--------</option>
         <option key="not-course-specific" value="Not specific to a course">
@@ -31,6 +34,26 @@ function LoggedInUser({ userInformation, setErrorState, zendeskApiHost, submitFo
     </div>);
   }
 
+  let subjectElement;
+  subjectElement = (<div>
+    <label htmlFor="subject">{gettext('Subject')}</label>
+    <select className="form-control select-subject" id="subject">
+      <option value="">--------</option>
+      <option value="Account Settings">{gettext('Account Settings')}</option>
+      <option value="Billing/Payment Options">{gettext('Billing/Payment Options')}</option>
+      <option value="Certificates">{gettext('Certificates')}</option>
+      <option value="Course Content">{gettext('Course Content')}</option>
+      <option value="Deadlines">{gettext('Deadlines')}</option>
+      <option value="Errors/Technical Issues">{gettext('Errors/Technical Issues')}</option>
+      <option value="Financial Aid">{gettext('Financial Aid')}</option>
+      <option value="Masters">{gettext('Masters')}</option>
+      <option value="Financial Aid">{gettext('Financial Aid')}</option>
+      <option value="Photo Verification">{gettext('Photo Verification')}</option>
+      <option value="Proctoring">{gettext('Proctoring')}</option>
+      <option value="Other">{gettext('Other')}</option>
+    </select>
+  </div>);
+
   return (<div>
     <div className="row">
       <div
@@ -58,8 +81,7 @@ function LoggedInUser({ userInformation, setErrorState, zendeskApiHost, submitFo
     <div className="row">
       <div className="col-sm-12">
         <div className="form-group">
-          <label htmlFor="subject">{gettext('Subject')}</label>
-          <input type="text" className="form-control" id="subject" />
+          {subjectElement}
         </div>
       </div>
     </div>

lms/djangoapps/support/static/support/jsx/single_support_form.jsx

@@ -37,8 +37,8 @@ class RenderForm extends React.Component {
       $userInfo = $('.user-info'),
       request = new XMLHttpRequest(),
       $course = $('#course'),
+      $subject = $('#subject'),
       data = {
-        subject: $('#subject').val(),
         comment: {
           body: $('#message').val(),
         },
@@ -67,6 +67,17 @@ class RenderForm extends React.Component {
       value: course,
     }];
 
+    let subject;
+    subject = $subject.find(':selected').val();
+    if (!subject) {
+      subject = $subject.val();
+    }
+    if (!subject) {
+      $('#subject').closest('.form-group').addClass('has-error');
+      errors.push(gettext('Select a subject for your support request.'));
+    }
+    data.subject = subject;
+
     if (this.validateData(data, errors)) {
       request.open('POST', url, true);
       request.setRequestHeader('Content-type', 'application/json;charset=UTF-8');
@@ -94,10 +105,6 @@ class RenderForm extends React.Component {
   }
 
   validateData(data, errors) {
-    if (!data.subject) {
-      errors.push(gettext('Enter a subject for your support request.'));
-      $('#subject').closest('.form-group').addClass('has-error');
-    }
     if (!data.comment.body) {
       errors.push(gettext('Enter some details for your support request.'));
       $('#message').closest('.form-group').addClass('has-error');