Skip to content

E
edx-platform
Commit 8a78daa8 by Tasawer Nawaz
Options

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

LEARNER-3288
parent 05673e7e
Showing with 94 additions and 94 deletions
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}",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment