Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

PL: teacher application form improvements #27011

Merged
merged 10 commits into from
Feb 13, 2019
Merged

PL: teacher application form improvements #27011

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
31f4747
PL: teacher application gets more text on page 1
breville Feb 11, 2019
87a5391
PL: Move teacher application's school & principal options to page 3
breville Feb 12, 2019
08c9a28
PL: change approach to moving questions between sections
breville Feb 12, 2019
ba3acc5
PL: revert unnecessary file
breville Feb 12, 2019
9d0a828
PL: swap pages 2 and 3 of teacher application
breville Feb 12, 2019
c379ee3
PL: teacher application gets 3 columns for some answer sets
breville Feb 12, 2019
e2ac8cb
PL: update teacher application thank you page
breville Feb 12, 2019
adf2592
PL: teacher application gets validations fixed for moved fields
breville Feb 12, 2019
e7fdfd5
PL: first attempt at fixing eyes UI test for new teacher application …
breville Feb 12, 2019
af5c576
PL: teacher application gets updated text
breville Feb 13, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
206 changes: 93 additions & 113 deletions apps/src/code-studio/pd/application/teacher1920/Section1AboutYou.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,10 @@ import LabeledFormComponent from '../../form_components/LabeledFormComponent';
import UsPhoneNumberInput from '../../form_components/UsPhoneNumberInput';
import {
PageLabels,
SectionHeaders,
TextFields
SectionHeaders
} from '@cdo/apps/generated/pd/teacher1920ApplicationConstants';
import {isEmail, isZipCode} from '@cdo/apps/util/formatValidation';
import {
Row,
Col,
ControlLabel,
FormGroup,
Modal,
Button
} from 'react-bootstrap';
import SchoolAutocompleteDropdown from '@cdo/apps/templates/SchoolAutocompleteDropdown';
import {FormGroup, Modal, Button} from 'react-bootstrap';
import queryString from 'query-string';
import {styles} from './TeacherApplicationConstants';
import _ from 'lodash';
Expand All @@ -40,16 +31,30 @@ export default class Section1AboutYou extends LabeledFormComponent {

static associatedFields = [
// Gender Identity and Race are things we want rendered in Section 1 in the detail view
// but we want to ask in section 5. So they need to be removed here
// but we want to ask in section 5. So they need to be removed here.
// Also remove a whole mess of fields (from school to principal to role) which we have
// moved to Section 3, and therefore don't want to validate here in Section 1.
..._.difference(Object.keys(PageLabels.section1AboutYou), [
'genderIdentity',
'race'
'race',
'school',
'schoolName',
'schoolDistrictName',
'schoolAddress',
'schoolCity',
'schoolState',
'schoolZipCode',
'schoolType',
'principalTitle',
'principalFirstName',
'principalLastName',
'principalEmail',
'principalConfirmEmail',
'principalPhoneNumber',
'currentRole'
])
];

handleSchoolChange = selectedSchool =>
this.handleChange({school: selectedSchool && selectedSchool.value});

resetCountry = () => this.handleChange({country: US});
exitApplication = () => (window.location = PD_RESOURCES_URL);

Expand Down Expand Up @@ -89,25 +94,83 @@ export default class Section1AboutYou extends LabeledFormComponent {

return (
<FormGroup>
{!nominated && (
<p>
Thanks for your interest in the Code.org Professional Learning
Program! This application should take 10 - 15 minutes to complete.
Fields marked with a <span style={{color: 'red'}}>*</span> are
required.
</p>
)}
{nominated && (
<p>
Congratulations on your nomination for a scholarship to the Code.org
Professional Learning Program! This application should take 10 - 15
minutes to complete. Fields marked with a{' '}
<span style={{color: 'red'}}>*</span> are required. We will let your
local partner know that you’ve been nominated as they consider your
application for the regional scholarships or discounts they have
available.
Professional Learning Program! We will let your local partner know
that you’ve been nominated as they consider your application for the
regional scholarship or discounts they have available.
</p>
)}

<h3>What’s in this application and how long will it take?</h3>
<p>
This application should take 10 - 15 minutes to complete. Fields
marked with a <span style={{color: 'red'}}>*</span> are required. Here
are the sections you will be asked to fill out:
</p>
<ul>
<li>
<span style={styles.bold}>Section 1: About you</span>
&nbsp; (Your and your principal’s contact info)
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like the principal's contact info is now in section 2

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great catch. I missed this change in the spec.

</li>
<li>
<span style={styles.bold}>
Section 2: Teaching and school background
</span>
&nbsp; (Principal contact info, your subject areas, and what CS
courses are offered in your school)
</li>
<li>
<span style={styles.bold}>Section 3: Choose your program</span>
&nbsp; (Which program you want to join and how you plan on teaching
the course)
</li>
<li>
<span style={styles.bold}>
Section 4: Professional Learning Program commitments
</span>
&nbsp; (Your interest and ability to participate in the whole
program)
</li>
<li>
<span style={styles.bold}>
Section 5: Additional demographic information
</span>
&nbsp; (Optional: your gender identity and race)
</li>
<li>
<span style={styles.bold}>Section 6: Submission</span>
&nbsp; (Confirm and submit)
</li>
</ul>

{!nominated && (
<div>
<h3> When will I hear back?</h3>
<p>
In most regions, applications are accepted on a rolling basis. And
in most cases, our local partner will get back to you within 2
weeks to let you know your application status.
</p>
</div>
)}

{nominated && (
<div>
<h3>When will I hear back about the scholarships and discounts?</h3>
<p>
In most regions, applications are accepted on a rolling basis. And
in most cases, our local partner will get back to you within 2
weeks to let you know your application status. Even if you don’t
get selected for the scholarship, you will still be able to attend
if you are an eligible teacher and your school can pay a
discounted price (thanks to generous donors).
</p>
</div>
)}

<h3>Need more information? </h3>
<p>
If you need more information about the program before you apply,
please visit{' '}
Expand All @@ -133,20 +196,6 @@ export default class Section1AboutYou extends LabeledFormComponent {
</a>
</p>

{nominated && (
<div>
<h4>When will I hear back about the scholarships and discounts?</h4>
<p>
In most regions, applications are accepted on a rolling basis. And
in most cases, our local partner will get back to you within 2
weeks to let you know your application status. Even if you don’t
get selected for the scholarship, you will still be able to attend
if you are an eligible teacher and your school can pay a
discounted price (thanks to our generous donors).
</p>
</div>
)}

<h3>Section 1: {SectionHeaders.section1AboutYou}</h3>

{this.radioButtonsFor('country')}
Expand Down Expand Up @@ -175,62 +224,6 @@ export default class Section1AboutYou extends LabeledFormComponent {
{this.selectFor('state', {placeholder: 'Select a state'})}
{this.inputFor('zipCode')}

<p>
If you work in a school district, please select your district and
school below:
</p>

<FormGroup
id="school"
controlId="school"
validationState={this.getValidationState('school')}
>
<Row>
<Col md={6}>
<ControlLabel>
School
<span style={{color: 'red'}}> *</span>
</ControlLabel>
</Col>
</Row>
<Row>
<Col md={6}>
<SchoolAutocompleteDropdown
value={this.props.data.school}
onChange={this.handleSchoolChange}
/>
</Col>
</Row>
</FormGroup>

{this.props.data.school && this.props.data.school === '-1' && (
<div style={styles.indented}>
{this.inputFor('schoolName')}
{this.inputFor('schoolDistrictName')}
{this.inputFor('schoolAddress')}
{this.inputFor('schoolCity')}
{this.selectFor('schoolState', {placeholder: 'Select a state'})}
{this.inputFor('schoolZipCode')}
{this.radioButtonsFor('schoolType')}
</div>
)}

{
// Disable auto complete for principal fields, so they are not filled with the teacher's details.
// Using a custom unmatched string "never" instead of "off" for wider browser compatibility.
// See https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#Disabling_autocompletion
}
{this.inputFor('principalFirstName', {autoComplete: 'never'})}
{this.inputFor('principalLastName', {autoComplete: 'never'})}
{this.inputFor('principalEmail', {autoComplete: 'never'})}
{this.inputFor('principalConfirmEmail', {autoComplete: 'never'})}
{this.usPhoneNumberInputFor('principalPhoneNumber', {
autoComplete: 'never'
})}

{this.radioButtonsWithAdditionalTextFieldsFor('currentRole', {
[TextFields.otherPleaseList]: 'other'
})}
{this.radioButtonsFor('completingOnBehalfOfSomeoneElse')}
{this.props.data.completingOnBehalfOfSomeoneElse === 'Yes' &&
this.largeInputFor('completingOnBehalfOfName')}
Expand Down Expand Up @@ -276,19 +269,6 @@ export default class Section1AboutYou extends LabeledFormComponent {
formatErrors.phone = 'Must be a valid phone number including area code';
}

if (!UsPhoneNumberInput.isValid(data.principalPhoneNumber)) {
formatErrors.principalPhoneNumber =
'Must be a valid phone number including area code';
}

if (!isEmail(data.principalEmail)) {
formatErrors.principalEmail = 'Must be a valid email address';
}

if (data.principalEmail !== data.principalConfirmEmail) {
formatErrors.principalConfirmEmail = 'Must match above email';
}

return formatErrors;
}
}
2 changes: 1 addition & 1 deletion apps/src/code-studio/pd/application/teacher1920/Section2ChooseYourProgram.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export default class Section2ChooseYourProgram extends LabeledFormComponent {
render() {
return (
<FormGroup>
<h3>Section 2: {SectionHeaders.section2ChooseYourProgram}</h3>
<h3>Section 3: {SectionHeaders.section2ChooseYourProgram}</h3>
{this.radioButtonsFor('program')}
{this.props.data.program === PROGRAM_CSD && (
<div>
Expand Down