update design of support form + form will be shown only to logged in users

LEARNER-3288

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

@@ -3,7 +3,28 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-function LoggedInUser({ userInformation }) {
+import FileUpload from './file_upload';
+
+function LoggedInUser({ userInformation, setErrorState, zendeskApiHost, accessToken, submitForm }) {
+  let courseElement;
+  if (userInformation.enrollments) {
+    courseElement = (<div>
+      <label className="label-course" htmlFor="course">{gettext('Course Name')}</label>
+      <select className="form-control select-course" id="course">
+        {userInformation.enrollments.map(enrollment =>
+                (<option key={enrollment.course_id} value={enrollment.course_id}>
+                  {enrollment.course_name}
+                </option>),
+              )}
+      </select>
+    </div>);
+  } else {
+    courseElement = (<div>
+      <label htmlFor="course">{gettext('Course Name')}<span> {gettext('(Optional)')}</span></label>
+      <input type="text" className="form-control" id="course" />
+    </div>);
+  }
+
   return (<div>
     <div className="row">
       <div
@@ -18,32 +39,60 @@ function LoggedInUser({ userInformation }) {
     <div className="row">
       <div className="col-sm-12">
         <div className="form-group">
-          {userInformation.enrollments.length === 0 &&
-          <div>
-            <label htmlFor="course">{gettext('Course Name')}<span> {gettext('(Optional)')}</span></label>
-            <input type="text" className="form-control" id="course" />
-          </div>
-          }
-          {userInformation.enrollments.length > 0 &&
-          <div>
-            <label className="label-course" htmlFor="course">{gettext('Course Name')}</label>
-            <select className="form-control select-course" id="course">
-              {userInformation.enrollments.map(enrollment =>
-                (<option key={enrollment.course_id} value={enrollment.course_id}>
-                  {enrollment.course_name}
-                </option>),
-              )}
-            </select>
-          </div>
-          }
+          {courseElement}
+        </div>
+      </div>
+    </div>
+
+    <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" />
         </div>
       </div>
     </div>
+
+    <div className="row">
+      <div className="col-sm-12">
+        <div className="form-group">
+          <label htmlFor="message">{gettext('Details')}</label>
+          <p
+            className="message-desc"
+          >{gettext('The more you tell us, the more quickly and helpfully we can respond!')}</p>
+          <textarea
+            aria-describedby="message"
+            className="form-control"
+            rows="7"
+            id="message"
+          />
+        </div>
+      </div>
+    </div>
+
+    <FileUpload
+      setErrorState={setErrorState}
+      zendeskApiHost={zendeskApiHost}
+      accessToken={accessToken}
+    />
+
+    <div className="row">
+      <div className="col-sm-12">
+        <button
+          className="btn btn-primary btn-submit"
+          onClick={submitForm}
+        >{gettext('Submit')}</button>
+      </div>
+    </div>
   </div>);
 }
 
 LoggedInUser.propTypes = {
+  setErrorState: PropTypes.func.isRequired,
+  submitForm: PropTypes.func.isRequired,
   userInformation: PropTypes.arrayOf(PropTypes.object).isRequired,
+  zendeskApiHost: PropTypes.string.isRequired,
+  accessToken: PropTypes.string.isRequired,
 };
 
 export default LoggedInUser;

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

@@ -3,7 +3,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-function LoggedOutUser({ platformName, loginUrl }) {
+function LoggedOutUser({ platformName, loginQuery }) {
   return (
     <div>
       <div className="row">
@@ -14,27 +14,13 @@ function LoggedOutUser({ platformName, loginUrl }) {
 
       <div className="row">
         <div className="col-sm-12">
-          <a href={loginUrl} className="btn btn-primary btn-signin">{gettext('Sign in')}</a>
+          <a href={`/login${loginQuery}`} className="btn btn-primary btn-signin">{gettext('Sign in')}</a>
         </div>
       </div>
 
       <div className="row">
         <div className="col-sm-12">
-          <div className="form-group">
-            <label htmlFor="email">{gettext('Your Email Address')}</label>
-            <input type="text" className="form-control" id="email" />
-          </div>
-        </div>
-      </div>
-
-      <div className="row">
-        <div className="col-sm-12">
-          <div className="form-group">
-            <label
-              htmlFor="course"
-            >{gettext('Course Name')}<span> {gettext('(Optional)')}</span></label>
-            <input type="text" className="form-control" id="course" />
-          </div>
+          <a className="create-account" href={`/register${loginQuery}`}>{gettext(`Create an ${platformName} account`)}</a>
         </div>
       </div>
     </div>
@@ -43,7 +29,7 @@ function LoggedOutUser({ platformName, loginUrl }) {
 
 LoggedOutUser.propTypes = {
   platformName: PropTypes.string.isRequired,
-  loginUrl: PropTypes.string.isRequired,
+  loginQuery: PropTypes.string.isRequired,
 };
 
 export default LoggedOutUser;

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

@@ -6,7 +6,6 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import FileUpload from './file_upload';
 import ShowErrors from './errors_list';
 import LoggedInUser from './logged_in_user';
 import LoggedOutUser from './logged_out_user';
@@ -47,19 +46,14 @@ class RenderForm extends React.Component {
 
     let course;
 
-    if ($userInfo.length) {
-      data.requester = $userInfo.data('email');
-      course = $course.find(':selected').text();
-      if (!course.length) {
-        course = $course.val();
-      }
-    } else {
-      data.requester = $('#email').val();
+    data.requester = $userInfo.data('email');
+    course = $course.find(':selected').val();
+    if (!course) {
       course = $course.val();
     }
 
     data.custom_fields = [{
-      id: this.props.context.customFields.course,
+      id: this.props.context.customFields.course_id,
       value: course,
     }];
 
@@ -128,11 +122,17 @@ class RenderForm extends React.Component {
   renderSupportForm() {
     let userElement;
     if (this.props.context.user) {
-      userElement = <LoggedInUser userInformation={this.props.context.user} />;
+      userElement = (<LoggedInUser
+        userInformation={this.props.context.user}
+        zendeskApiHost={this.props.context.zendeskApiHost}
+        accessToken={this.props.context.accessToken}
+        setErrorState={this.setErrorState}
+        submitForm={this.submitForm}
+      />);
     } else {
       userElement = (<LoggedOutUser
         platformName={this.props.context.platformName}
-        loginUrl={this.props.context.loginQuery}
+        loginQuery={this.props.context.loginQuery}
       />);
     }
 
@@ -151,7 +151,7 @@ class RenderForm extends React.Component {
 
         <div className="row">
           <div className="col-sm-12">
-            <p>{gettext('Your question might have already been answered.')}</p>
+            <p>{gettext('Find answers to the top questions asked by learners.')}</p>
           </div>
         </div>
 
@@ -165,47 +165,6 @@ class RenderForm extends React.Component {
         </div>
 
         {userElement}
-
-        <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" />
-            </div>
-          </div>
-        </div>
-
-        <div className="row">
-          <div className="col-sm-12">
-            <div className="form-group">
-              <label htmlFor="message">{gettext('Details')}</label>
-              <p
-                className="message-desc"
-              >{gettext('The more you tell us, the more quickly and helpfully we can respond!')}</p>
-              <textarea
-                aria-describedby="message"
-                className="form-control"
-                rows="7"
-                id="message"
-              />
-            </div>
-          </div>
-        </div>
-
-        <FileUpload
-          setErrorState={this.setErrorState}
-          zendeskApiHost={this.props.context.zendeskApiHost}
-          accessToken={this.props.context.accessToken}
-        />
-
-        <div className="row">
-          <div className="col-sm-12">
-            <button
-              className="btn btn-primary btn-submit"
-              onClick={this.submitForm}
-            >{gettext('Submit')}</button>
-          </div>
-        </div>
       </div>
     );
   }

lms/static/sass/views/_support.scss

@@ -248,7 +248,7 @@
   .btn-signin {
     width: $baseline * 8;
     color: $white;
-    margin-bottom: ($baseline * 2) + 10;
+    margin-bottom: $baseline;
 
     &:hover,
     &:focus {
@@ -256,6 +256,12 @@
     }
   }
 
+  a.create-account {
+    color: $m-blue-d6;
+    text-decoration: underline !important;
+    font-size: $support-form-base-font-size + 4;
+  }
+
   input[type='text'] {
     font-size: $support-form-base-font-size - 2;
     font-family: $font-family-sans-serif;

lms/templates/support/contact_us.html

@@ -13,7 +13,7 @@ from openedx.core.djangolib.js_utils import js_escaped_string, dump_js_escaped_j
 
 <%block name="title">
     <title>
-        ${_("{platform_name} Support: Contact Us").format(platform_name=platform_name)}
+        ${_("Contact {platform_name} Support").format(platform_name=platform_name)}
     </title>
 </%block>
 
@@ -30,7 +30,7 @@ from openedx.core.djangolib.js_utils import js_escaped_string, dump_js_escaped_j
         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}",
+            '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}",