Skip to content

Commit

Permalink
Merge pull request openedx#16675 from edx/tasawer/learner-3288/suppor…
Browse files Browse the repository at this point in the history 
…t-form-design-update

Update single support form
  • Loading branch information
Tasawer Nawaz authored Nov 29, 2017
2 parents 05673e7 + 8a78daa commit 3431bb7
Show file tree
Hide file tree
Showing 5 changed files with 94 additions and 94 deletions.
87 changes: 68 additions & 19 deletions lms/djangoapps/support/static/support/jsx/logged_in_user.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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;
22 changes: 4 additions & 18 deletions lms/djangoapps/support/static/support/jsx/logged_out_user.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
Expand All @@ -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;
67 changes: 13 additions & 54 deletions lms/djangoapps/support/static/support/jsx/single_support_form.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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,
}];

Expand Down Expand Up @@ -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}
/>);
}

Expand All @@ -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>

Expand All @@ -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>
);
}
Expand Down
8 changes: 7 additions & 1 deletion lms/static/sass/views/_support.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -248,14 +248,20 @@
.btn-signin {
width: $baseline * 8;
color: $white;
margin-bottom: ($baseline * 2) + 10;
margin-bottom: $baseline;

&:hover,
&:focus {
color: $white;
}
}

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;
Expand Down
4 changes: 2 additions & 2 deletions lms/templates/support/contact_us.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@

<%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>

Expand All @@ -30,7 +30,7 @@
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}",
Expand Down

0 comments on commit 3431bb7

Please sign in to comment.