Merge pull request #16350 from edx/tasawer/learner-2735/add-success-component

add success component on successful form submission

lms/djangoapps/support/static/support/jsx/errors_list.jsx

@@ -1,10 +1,10 @@
+/* global gettext */
 /* eslint react/no-array-index-key: 0 */
 
 import React from 'react';
 import PropTypes from 'prop-types';
 
 class ShowErrors extends React.Component {
-  
   render() {
     window.scrollTo(0, 0);
     return this.props.errorList.length > 0 &&

lms/djangoapps/support/static/support/jsx/logged_out_user.jsx

@@ -3,12 +3,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-function LoggedOutUser({ loginUrl }) {
+function LoggedOutUser({ platformName, loginUrl }) {
   return (
     <div>
       <div className="row">
         <div className="col-sm-12">
-          <p>{gettext('Sign in to edX so we can help you better.')}</p>
+          <p>{gettext(`Sign in to ${platformName} so we can help you better.`)}</p>
         </div>
       </div>
 
@@ -42,6 +42,7 @@ function LoggedOutUser({ loginUrl }) {
 }
 
 LoggedOutUser.propTypes = {
+  platformName: PropTypes.string.isRequired,
   loginUrl: PropTypes.string.isRequired,
 };
 

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

@@ -10,13 +10,13 @@ import FileUpload from './file_upload';
 import ShowErrors from './errors_list';
 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
-// https://openedx.atlassian.net/browse/LEARNER-2735
 
 class RenderForm extends React.Component {
   constructor(props) {
@@ -24,6 +24,7 @@ class RenderForm extends React.Component {
     this.state = {
       currentRequest: null,
       errorList: [],
+      success: true,
     };
     this.submitForm = this.submitForm.bind(this);
     this.setErrorState = this.setErrorState.bind(this);
@@ -36,11 +37,11 @@ class RenderForm extends React.Component {
   }
 
   submitForm() {
-    const url = 'https://arbisoft.zendesk.com/api/v2/tickets.json',
+    const url = 'https://example.zendesk.com/api/v2/tickets.json',
       $userInfo = $('.user-info'),
       request = new XMLHttpRequest(),
       $course = $('#course'),
-      accessToken = 'd6ed06821334b6584dd9607d04007c281007324ed07e087879c9c44835c684da',
+      accessToken = 'abc000',
       data = {
         subject: $('#subject').val(),
         comment: {
@@ -78,11 +79,11 @@ class RenderForm extends React.Component {
 
       request.onreadystatechange = function success() {
         if (request.readyState === 4 && request.status === 201) {
-          // TODO needs to remove after implementing success page
-          const alert = 'Request submitted successfully.';
-          alert();
+          this.setState({
+            success: true,
+          });
         }
-      };
+      }.bind(this);
 
       request.onerror = function error() {
         this.setErrorState([gettext('Something went wrong. Please try again later.')]);
@@ -118,12 +119,26 @@ class RenderForm extends React.Component {
     return false;
   }
 
-  render() {
+  renderSuccess() {
+    return (
+      <Success
+        platformName={this.props.context.platformName}
+        homepageUrl={this.props.context.homepageUrl}
+        dashboardUrl={this.props.context.dashboardUrl}
+        isLoggedIn={this.props.context.user !== undefined}
+      />
+    );
+  }
+
+  renderSupportForm() {
     let userElement;
     if (this.props.context.user) {
       userElement = <LoggedInUser userInformation={this.props.context.user} />;
     } else {
-      userElement = <LoggedOutUser loginUrl={this.props.context.loginQuery} />;
+      userElement = (<LoggedOutUser
+        platformName={this.props.context.platformName}
+        loginUrl={this.props.context.loginQuery}
+      />);
     }
 
     return (
@@ -150,7 +165,7 @@ class RenderForm extends React.Component {
             <a
               href={this.props.context.marketingUrl}
               className="btn btn-secondary help-button"
-            >{gettext('Search the edX Help Center')}</a>
+            >{`Search the ${this.props.context.platformName} Help Center`}</a>
           </div>
         </div>
 
@@ -195,6 +210,14 @@ class RenderForm extends React.Component {
       </div>
     );
   }
+
+  render() {
+    if (this.state.success) {
+      return this.renderSuccess();
+    }
+
+    return this.renderSupportForm();
+  }
 }
 
 RenderForm.propTypes = {

lms/djangoapps/support/static/support/jsx/success.jsx

@@ -0,0 +1,49 @@
+/* global gettext */
+/* eslint one-var: ["error", "always"] */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function Success({ platformName, homepageUrl, dashboardUrl, isLoggedIn }) {
+  let btnText,
+    btnUrl;
+  if (isLoggedIn) {
+    btnText = gettext('Go to my Dashboard');
+    btnUrl = dashboardUrl;
+  } else {
+    btnText = gettext(`Go to ${platformName} Home`);
+    btnUrl = homepageUrl;
+  }
+  return (<div className="contact-us-wrapper">
+    <div className="row">
+      <div className="col-sm-12">
+        <h2>{gettext('Contact Us')}</h2>
+      </div>
+    </div>
+
+    <div className="row">
+      <div className="col-sm-12">
+        <p>{gettext('Thank you for submitting a request! We will contact you within 24 hours.')}</p>
+      </div>
+    </div>
+
+    <div className="row">
+      <div className="col-sm-12">
+        <a
+          href={btnUrl}
+          className="btn btn-secondary help-button"
+        >{btnText}
+        </a>
+      </div>
+    </div>
+  </div>);
+}
+
+Success.propTypes = {
+  platformName: PropTypes.string.isRequired,
+  dashboardUrl: PropTypes.string.isRequired,
+  homepageUrl: PropTypes.string.isRequired,
+  isLoggedIn: PropTypes.bool.isRequired,
+};
+
+export default Success;

lms/djangoapps/support/views/contact_us.py

@@ -1,12 +1,13 @@
 """
 Signle support contact view
 """
+from django.conf import settings
 from django.views.generic import View
-
 from edxmako.shortcuts import render_to_response
-
 from student.models import CourseEnrollment
 
+from openedx.core.djangoapps.site_configuration import helpers
+
 
 class ContactUsView(View):
     """
@@ -14,7 +15,9 @@ class ContactUsView(View):
     """
 
     def get(self, request):
-        context = {}
+        context = {
+            'platform_name': helpers.get_value('platform_name', settings.PLATFORM_NAME)
+        }
         if request.user.is_authenticated():
             context['user_enrollments'] = CourseEnrollment.enrollments_for_user(request.user)
 

lms/templates/support/contact_us.html

@@ -1,7 +1,9 @@
 <%page expression_filter="h"/>
 
 <%!
+from django.core.urlresolvers import reverse
 from django.utils.translation import ugettext as _
+
 from openedx.core.djangolib.js_utils import js_escaped_string
 %>
 
@@ -11,7 +13,7 @@ from openedx.core.djangolib.js_utils import js_escaped_string
 
 <%block name="title">
     <title>
-        ${_("Contact US")}
+        ${_("{platform_name} Support: Contact Us").format(platform_name=platform_name)}
     </title>
 </%block>
 
@@ -26,8 +28,11 @@ from openedx.core.djangolib.js_utils import js_escaped_string
 
     <%static:webpack entry="SingleSupportForm">
         var context = {
+            'platformName': "${platform_name | n, js_escaped_string}",
             'marketingUrl': "${marketing_link('FAQ') | n, 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}",
         }
 
         % if user.is_authenticated():