Merge pull request #16554 from edx/tasawer/learner-2736/integrate-zendesk-with-single-support-form

integrate Zendesk with new single support form

lms/djangoapps/support/static/support/jsx/file_upload.jsx

@@ -23,12 +23,11 @@ class FileUpload extends React.Component {
     e.preventDefault();
     const fileToken = e.target.id,
       $this = this,
-      url = `https://arbisoft.zendesk.com/api/v2/uploads/${fileToken}.json`,
-      accessToken = 'd6ed06821334b6584dd9607d04007c281007324ed07e087879c9c44835c684da',
+      url = `${this.props.zendeskApiHost}/api/v2/uploads/${fileToken}.json`,
       request = new XMLHttpRequest();
 
     request.open('DELETE', url, true);
-    request.setRequestHeader('Authorization', `Bearer ${accessToken}`);
+    request.setRequestHeader('Authorization', `Bearer ${this.props.accessToken}`);
     request.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
 
     request.send();
@@ -43,13 +42,12 @@ class FileUpload extends React.Component {
   }
 
   uploadFile(e) {
-    const url = 'https://arbisoft.zendesk.com/api/v2/uploads.json?filename=',
+    const url = `${this.props.zendeskApiHost}/api/v2/uploads.json?filename=`,
       fileReader = new FileReader(),
       request = new XMLHttpRequest(),
       errorList = [],
       $this = this,
       file = e.target.files[0],
-      accessToken = 'd6ed06821334b6584dd9607d04007c281007324ed07e087879c9c44835c684da',
       maxFileSize = 5000000, // 5mb is max limit
       allowedFileTypes = ['gif', 'png', 'jpg', 'jpeg', 'pdf'];
 
@@ -68,7 +66,7 @@ class FileUpload extends React.Component {
     }
 
     request.open('POST', (url + file.name), true);
-    request.setRequestHeader('Authorization', `Bearer ${accessToken}`);
+    request.setRequestHeader('Authorization', `Bearer ${this.props.accessToken}`);
     request.setRequestHeader('Content-Type', 'application/binary');
 
     fileReader.readAsArrayBuffer(file);
@@ -166,5 +164,7 @@ class FileUpload extends React.Component {
 
 FileUpload.propTypes = {
   setErrorState: PropTypes.func.isRequired,
+  zendeskApiHost: PropTypes.string.isRequired,
+  accessToken: PropTypes.string.isRequired,
 };
 export default FileUpload;

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

@@ -12,11 +12,6 @@ import LoggedInUser from './logged_in_user';
 import LoggedOutUser from './logged_out_user';
 import Success from './success';
 
-// TODO
-// edx zendesk APIs
-// access token
-// custom fields ids
-// https://openedx.atlassian.net/browse/LEARNER-2736
 
 class RenderForm extends React.Component {
   constructor(props) {
@@ -24,7 +19,7 @@ class RenderForm extends React.Component {
     this.state = {
       currentRequest: null,
       errorList: [],
-      success: true,
+      success: false,
     };
     this.submitForm = this.submitForm.bind(this);
     this.setErrorState = this.setErrorState.bind(this);
@@ -37,11 +32,10 @@ class RenderForm extends React.Component {
   }
 
   submitForm() {
-    const url = 'https://example.zendesk.com/api/v2/tickets.json',
+    const url = `${this.props.context.zendeskApiHost}/api/v2/tickets.json`,
       $userInfo = $('.user-info'),
       request = new XMLHttpRequest(),
       $course = $('#course'),
-      accessToken = 'abc000',
       data = {
         subject: $('#subject').val(),
         comment: {
@@ -64,13 +58,13 @@ class RenderForm extends React.Component {
     }
 
     data.custom_fields = [{
-      id: '114099484092',
+      id: this.props.context.customFields.course,
       value: course,
     }];
 
     if (this.validateData(data)) {
       request.open('POST', url, true);
-      request.setRequestHeader('Authorization', `Bearer ${accessToken}`);
+      request.setRequestHeader('Authorization', `Bearer ${this.props.context.accessToken}`);
       request.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
 
       request.send(JSON.stringify({
@@ -197,7 +191,11 @@ class RenderForm extends React.Component {
           </div>
         </div>
 
-        <FileUpload setErrorState={this.setErrorState} />
+        <FileUpload
+          setErrorState={this.setErrorState}
+          zendeskApiHost={this.props.context.zendeskApiHost}
+          accessToken={this.props.context.accessToken}
+        />
 
         <div className="row">
           <div className="col-sm-12">

lms/djangoapps/support/views/contact_us.py

@@ -16,7 +16,10 @@ class ContactUsView(View):
 
     def get(self, request):
         context = {
-            'platform_name': helpers.get_value('platform_name', settings.PLATFORM_NAME)
+            'platform_name': helpers.get_value('platform_name', settings.PLATFORM_NAME),
+            'zendesk_api_host': settings.ZENDESK_URL,
+            'access_token': settings.ZENDESK_OAUTH_ACCESS_TOKEN,
+            'custom_fields': settings.ZENDESK_CUSTOM_FIELDS
         }
         if request.user.is_authenticated():
             context['user_enrollments'] = CourseEnrollment.enrollments_for_user(request.user)

lms/envs/aws.py

@@ -594,6 +594,7 @@ MAILCHIMP_NEW_USER_LIST_ID = ENV_TOKENS.get("MAILCHIMP_NEW_USER_LIST_ID")
 # Zendesk
 ZENDESK_USER = AUTH_TOKENS.get("ZENDESK_USER")
 ZENDESK_API_KEY = AUTH_TOKENS.get("ZENDESK_API_KEY")
+ZENDESK_OAUTH_ACCESS_TOKEN = AUTH_TOKENS.get("ZENDESK_OAUTH_ACCESS_TOKEN")
 
 # API Key for inbound requests from Notifier service
 EDX_API_KEY = AUTH_TOKENS.get("EDX_API_KEY")

lms/envs/common.py

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

lms/templates/support/contact_us.html

@@ -33,6 +33,9 @@ from openedx.core.djangolib.js_utils import js_escaped_string
             'loginQuery': "/login${login_query() | n, js_escaped_string}",
             'dashboardUrl': "${reverse('dashboard') | n, js_escaped_string}",
             'homepageUrl': "${marketing_link('ROOT') | n, js_escaped_string}",
+            'zendeskApiHost': "${zendeskApiHost | n, js_escaped_string}",
+            'accessToken': "${access_token | n, js_escaped_string}",
+            'customFields': "${custom_fields | n, js_escaped_string}",
         }
 
         % if user.is_authenticated():