diff --git a/lms/djangoapps/support/static/support/jsx/single_support_form.jsx b/lms/djangoapps/support/static/support/jsx/single_support_form.jsx
index 4c23849ee3..bfbe535e86 100644
--- a/lms/djangoapps/support/static/support/jsx/single_support_form.jsx
+++ b/lms/djangoapps/support/static/support/jsx/single_support_form.jsx
@@ -5,9 +5,6 @@
import PropTypes from 'prop-types';
import React from 'react';
import ReactDOM from 'react-dom';
-import { StatusAlert } from '@edx/paragon';
-
-import StringUtils from 'edx-ui-toolkit/js/utils/string-utils';
import ShowErrors from './errors_list';
import LoggedInUser from './logged_in_user';
@@ -28,11 +25,15 @@ class RenderForm extends React.Component {
this.userInformation = this.props.context.user;
const course = this.userInformation ? this.userInformation.course_id : '';
this.courseDiscussionURL = '/courses/{course_id}/discussion/forum';
+ this.learnerSupportCenterURL = 'https://support.edx.org/';
this.submitButton = null;
this.state = {
currentRequest: null,
errorList: initialFormErrors,
success: false,
+ activeSuggestion: 0,
+ suggestions: [],
+ typingTimeout: 0,
formData: {
course,
subject: '',
@@ -47,7 +48,17 @@ class RenderForm extends React.Component {
};
this.handleClick = this.handleClick.bind(this);
this.reDirectUser = this.reDirectUser.bind(this);
+ this.handleInputChange = this.handleInputChange.bind(this);
this.formOnChangeCallback = this.formOnChangeCallback.bind(this);
+ this.handleSearchButton = this.handleSearchButton.bind(this);
+ this.onKeyDown = this.onKeyDown.bind(this);
+ this.handleSuggestionClick = this.handleSuggestionClick.bind(this);
+ this.ignoreBlur = false;
+ this.handleBlur = this.handleBlur.bind(this);
+ }
+
+ setIgnoreBlur(ignore) {
+ this.ignoreBlur = ignore;
}
getFormDataFromState() {
@@ -111,12 +122,12 @@ class RenderForm extends React.Component {
handleClick(event) {
event.preventDefault();
this.submitButton = event.currentTarget;
- this.submitButton.setAttribute("disabled", true);
+ this.submitButton.setAttribute('disabled', true);
const formData = this.getFormDataFromState();
this.clearErrorState();
this.validateFormData(formData);
if (this.formHasErrors()) {
- this.submitButton.removeAttribute("disabled");
+ this.submitButton.removeAttribute('disabled');
return this.scrollToTop();
}
this.createZendeskTicket(formData);
@@ -142,18 +153,18 @@ class RenderForm extends React.Component {
request.send(JSON.stringify(data));
request.onreadystatechange = function success() {
if (request.readyState === 4) {
- this.submitButton.removeAttribute("disabled");
+ this.submitButton.removeAttribute('disabled');
if (request.status === 201) {
- this.setState({
- success: true,
- });
+ this.setState({
+ success: true,
+ });
}
}
}.bind(this);
request.onerror = function error() {
this.updateErrorInState('request', this.formValidationErrors.request);
- this.submitButton.removeAttribute("disabled");
+ this.submitButton.removeAttribute('disabled');
this.scrollToTop();
}.bind(this);
}
@@ -183,8 +194,71 @@ class RenderForm extends React.Component {
);
}
+ async handleInputChange(event) {
+ event.preventDefault();
+ const queryString = event.target.value;
+ if (this.typingTimeout) { clearTimeout(this.typingTimeout); }
+ this.typingTimeout = setTimeout(async () => {
+ if (queryString.length > 2) {
+ let suggestions = [];
+ console.log(this);
+ await fetch(`${this.learnerSupportCenterURL}/hc/api/internal/instant_search.json?query=${queryString}&locale=en-us`, { headers: {
+ 'Content-Type': 'application/json',
+ } }).then((response) => {
+ suggestions = response.json.results;
+ this.setState({ suggestions });
+ });
+ } else {
+ this.setState({
+ suggestions: [],
+ activeSuggestion: 0,
+ });
+ }
+ }, 500);
+ }
+
+ onKeyDown(event) {
+ const { activeSuggestion, suggestions } = this.state;
+ const enterKeyCode = 13,
+ upArrowKeyCode = 38,
+ downArrowKeyCode = 40;
+
+ if (event.keyCode === enterKeyCode) {
+ window.location.href = this.learnerSupportCenterURL + suggestions[activeSuggestion].url;
+ } else if (event.keyCode === upArrowKeyCode) {
+ (activeSuggestion === 0) ?
+ this.setState({ activeSuggestion: suggestions.length - 1 }) :
+ this.setState({ activeSuggestion: activeSuggestion - 1 });
+ } else if (event.keyCode === downArrowKeyCode) {
+ (activeSuggestion + 1 === suggestions.length) ?
+ this.setState({ activeSuggestion: 0 }) :
+ this.setState({ activeSuggestion: activeSuggestion + 1 });
+ }
+ }
+
+ handleBlur(event) {
+ if (!this.ignoreBlur) {
+ this.setState({
+ suggestions: [],
+ activeSuggestion: 0,
+ });
+ }
+ }
+
+ handleSearchButton(query) {
+ const queryString = query.replace(' ', '+');
+
+ window.location.href = `${this.learnerSupportCenterURL}/hc/en-us/search?&query=${queryString}`;
+ }
+
+ handleSuggestionClick(url) {
+ window.location.href = this.learnerSupportCenterURL + url;
+ }
+
renderSupportForm() {
- let userElement;
+ const { activeSuggestion, suggestions } = this.state;
+ let userElement,
+ suggestionsListComponent = null;
if (this.userInformation) {
userElement = ();
}
+ if (suggestions.length) {
+ suggestionsListComponent = (
+
+ {suggestions.map((suggestion, index) => (
+ - this.setIgnoreBlur(true)}
+ onClick={() => this.handleSuggestionClick(suggestion.url)}
+ onMouseOver={() => this.setState({ activeSuggestion: index })}
+ >
+
+
+ ))}
+
+ );
+ }
return (
@@ -225,16 +316,32 @@ class RenderForm extends React.Component {
-
+
+
+
+
+
+ {suggestionsListComponent}