Merge pull request #16949 from edx/tasawer/learner-3594/update-zendesk-proxy-and-frontend-jsx

zendesk proxy and front end of support form updated

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

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 
 import FileUpload from './file_upload';
 
-function LoggedInUser({ userInformation, setErrorState, zendeskApiHost, accessToken, submitForm }) {
+function LoggedInUser({ userInformation, setErrorState, zendeskApiHost, submitForm }) {
   let courseElement;
   if (userInformation.enrollments) {
     courseElement = (<div>
@@ -70,11 +70,12 @@ function LoggedInUser({ userInformation, setErrorState, zendeskApiHost, accessTo
       </div>
     </div>
 
-    <FileUpload
-      setErrorState={setErrorState}
-      zendeskApiHost={zendeskApiHost}
-      accessToken={accessToken}
-    />
+    {/*TODO file uploading will be done after initial release*/}
+    {/*<FileUpload*/}
+      {/*setErrorState={setErrorState}*/}
+      {/*zendeskApiHost={zendeskApiHost}*/}
+      {/*accessToken={accessToken}*/}
+    {/*/>*/}
 
     <div className="row">
       <div className="col-sm-12">
@@ -91,8 +92,7 @@ LoggedInUser.propTypes = {
   setErrorState: PropTypes.func.isRequired,
   submitForm: PropTypes.func.isRequired,
   userInformation: PropTypes.arrayOf(PropTypes.object).isRequired,
-  zendeskApiHost: PropTypes.string.isRequired,
-  accessToken: PropTypes.string.isRequired,
+  zendeskProxyUrl: PropTypes.string.isRequired,
 };
 
 export default LoggedInUser;

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

@@ -31,7 +31,7 @@ class RenderForm extends React.Component {
   }
 
   submitForm() {
-    const url = `${this.props.context.zendeskApiHost}/api/v2/tickets.json`,
+    const url = this.props.context.zendeskProxyUrl,
       $userInfo = $('.user-info'),
       request = new XMLHttpRequest(),
       $course = $('#course'),
@@ -39,14 +39,17 @@ class RenderForm extends React.Component {
         subject: $('#subject').val(),
         comment: {
           body: $('#message').val(),
-          uploads: $.map($('.uploaded-files button'), n => n.id),
         },
         tags: this.props.context.zendeskTags,
       };
 
     let course;
 
-    data.requester = $userInfo.data('email');
+    data.requester = {
+      email: $userInfo.data('email'),
+      name: $userInfo.data('username')
+    };
+
     course = $course.find(':selected').val();
     if (!course) {
       course = $course.val();
@@ -59,12 +62,10 @@ class RenderForm extends React.Component {
 
     if (this.validateData(data)) {
       request.open('POST', url, true);
-      request.setRequestHeader('Authorization', `Bearer ${this.props.context.accessToken}`);
-      request.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
+      request.setRequestHeader('Content-type', 'application/json;charset=UTF-8');
+      request.setRequestHeader('X-CSRFToken', $.cookie('csrftoken'));
 
-      request.send(JSON.stringify({
-        ticket: data,
-      }));
+      request.send(JSON.stringify(data));
 
       request.onreadystatechange = function success() {
         if (request.readyState === 4 && request.status === 201) {
@@ -81,16 +82,7 @@ class RenderForm extends React.Component {
   }
 
   validateData(data) {
-    const errors = [],
-      regex = /^([a-zA-Z0-9_.+-])+@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
-
-    if (!data.requester) {
-      errors.push(gettext('Enter a valid email address.'));
-      $('#email').closest('.form-group').addClass('has-error');
-    } else if (!regex.test(data.requester)) {
-      errors.push(gettext('Enter a valid email address.'));
-      $('#email').closest('.form-group').addClass('has-error');
-    }
+    const errors = [];
     if (!data.subject) {
       errors.push(gettext('Enter a subject for your support request.'));
       $('#subject').closest('.form-group').addClass('has-error');
@@ -124,8 +116,7 @@ class RenderForm extends React.Component {
     if (this.props.context.user) {
       userElement = (<LoggedInUser
         userInformation={this.props.context.user}
-        zendeskApiHost={this.props.context.zendeskApiHost}
-        accessToken={this.props.context.accessToken}
+        zendeskProxyUrl={this.props.context.zendeskProxyUrl}
         setErrorState={this.setErrorState}
         submitForm={this.submitForm}
       />);

lms/djangoapps/support/views/contact_us.py

@@ -18,8 +18,6 @@ class ContactUsView(View):
     def get(self, request):
         context = {
             'platform_name': configuration_helpers.get_value('platform_name', settings.PLATFORM_NAME),
-            'zendesk_api_host': settings.ZENDESK_URL,
-            'access_token': 'DUMMY_ACCESS_TOKEN',  # LEARNER-3450
             'custom_fields': settings.ZENDESK_CUSTOM_FIELDS
         }
 

lms/templates/support/contact_us.html

@@ -33,8 +33,7 @@ from openedx.core.djangolib.js_utils import js_escaped_string, dump_js_escaped_j
             'loginQuery': "${login_query() | n, js_escaped_string}",
             'dashboardUrl': "${reverse('dashboard') | n, js_escaped_string}",
             'homepageUrl': "${marketing_link('ROOT') | n, js_escaped_string}",
-            'zendeskApiHost': "${zendesk_api_host | n, js_escaped_string}",
-            'accessToken': "${access_token | n, js_escaped_string}",
+            'zendeskProxyUrl': "${reverse('zendesk_proxy_v1') | n, js_escaped_string}",
             'customFields': ${custom_fields | n, dump_js_escaped_json},
             'zendeskTags': ${zendesk_tags | n, dump_js_escaped_json},
         }