Skip to content

Commit

Permalink
Merge pull request #19122 from code-dot-org/sign-up-school-info-required
Browse files Browse the repository at this point in the history 
Sign up page: school info should be required for 1/3 of users
  • Loading branch information
@ewjordan
ewjordan committed Nov 14, 2017
2 parents ac40bd7 + c83dcb4 commit a6d9f0f
Show file tree
Hide file tree
Showing 2 changed files with 95 additions and 17 deletions.
1 change: 1 addition & 0 deletions apps/i18n/common/en_us.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -727,6 +727,7 @@
"schoolCountry": "School Country",
"schoolInfoRequired": "School information is required.",
"schoolInformationHeader": "School / Organization Information",
"schoolInformationOptionalHeader": "School / Organization Information (optional)",
"schoolName": "School Name",
"schoolState": "School State",
"schoolType": "School Type",
Expand Down
111 changes: 94 additions & 17 deletions apps/src/sites/studio/pages/signup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { COUNTRIES } from '@cdo/apps/geographyConstants';
import SchoolNotFound from '@cdo/apps/templates/SchoolNotFound';
import i18n from "@cdo/locale";
import firehoseClient from '@cdo/apps/lib/util/firehose';
import * as color from "@cdo/apps/util/color";

const SCHOOL_TYPES_HAVING_NCES_SEARCH = ['charter', 'private', 'public'];

Expand Down Expand Up @@ -127,7 +128,20 @@ window.SignupManager = function (options) {
$("#user_terms_of_service_version").prop('checked', true);
}

const registrationSchoolStyleGroup = (Math.random() > 0.5) ? "control" : "autocomplete";
const SCHOOL_STYLE_TEST_GROUPS = {
control: "control",
autocompleteOptional: "autocomplete-optional",
autocompleteRequired: "autocomplete-required",
};

const schoolStyleRandom = Math.random();
let registrationSchoolStyleGroup = SCHOOL_STYLE_TEST_GROUPS.control;
if (schoolStyleRandom > 1.0 / 3.0) {
registrationSchoolStyleGroup = SCHOOL_STYLE_TEST_GROUPS.autocompleteOptional;
}
if (schoolStyleRandom > 2.0 / 3.0) {
registrationSchoolStyleGroup = SCHOOL_STYLE_TEST_GROUPS.autocompleteRequired;
}

function logEvent(event) {
firehoseClient.putRecord(
Expand All @@ -141,25 +155,17 @@ window.SignupManager = function (options) {
}

let schoolData = {
name: '',
country: 'United States',
nces: '',
schoolName: '',
schoolCity: '',
schoolState: '',
schoolZip: '',
schoolType: '',
showErrorMsg: false,
};

let schoolDataErrors = {
name: false,
country: false,
nces: false,
schoolType: false,
school: false
};

function onCountryChange(field, event) {
function onCountryChange(_, event) {
schoolData.country = event ? event.value : '';
updateAutocompleteSchoolFields(schoolData);
}
Expand Down Expand Up @@ -189,16 +195,30 @@ window.SignupManager = function (options) {
updateAutocompleteSchoolFields(schoolData);
}

function schoolInfoOptional() {
return registrationSchoolStyleGroup !== SCHOOL_STYLE_TEST_GROUPS.autocompleteRequired;
}

const errorStyles = {
fontSize: 14,
fontFamily: '"Gotham 3r", sans-serif',
color: color.red,
paddingTop: 5,
paddingBottom: 5
};

function updateAutocompleteSchoolFields(data) {
const isUS = data.country === 'United States';
ReactDOM.render(
<div>
<h5 style={{fontWeight: "bold"}}>{i18n.schoolInformationHeader()}</h5>
<h5 style={{fontWeight: "bold"}}>
{schoolInfoOptional() ? i18n.schoolInformationOptionalHeader() : i18n.schoolInformationHeader()}
</h5>
<hr/>
<CountryAutocompleteDropdown
onChange={onCountryChange}
value={data.country}
showErrorMsg={schoolDataErrors.country}
showErrorMsg={false}
singleLineLayout
/>
<div className="itemblock" style={{minHeight:42}}>
Expand All @@ -225,23 +245,67 @@ window.SignupManager = function (options) {
<SchoolAutocompleteDropdownWithLabel
setField={onSchoolChange}
value={data.nces}
showErrorMsg={schoolDataErrors.nces}
showErrorMsg={false}
singleLineLayout
showRequiredIndicator={false}
/>
}
<SignupSchoolNotFound
isUS={isUS}
data={data}
schoolDataErrors={schoolDataErrors}
schoolDataErrors={{}}
onSchoolNotFoundChange={onSchoolNotFoundChange}
/>
{data.showErrorMsg && (
<div style={errorStyles}>
{i18n.schoolInfoRequired()}
</div>
)}
</div>
,
$("#schooldropdown-block")[0]
);
}

function schoolInfoIsComplete() {
// Logic:
// require country
// require school type
// if US:
// if school type requires nces search, require nces <> ''
// if nces === -1 or not requires nces search:
// require city/town
// if SCHOOL_TYPES_HAVING_NAMES:
// require school name
// else (non-US):
// require city/town
// if SCHOOL_TYPES_HAVING_NAMES:
// require school name
let missingInfo = false;
missingInfo |= schoolData.country === '';
missingInfo |= schoolData.schoolType === '';
const registrationSchoolLocation = $('#registration-school-location')[0];
if (schoolData.country === 'United States') {
const useNCES = SCHOOL_TYPES_HAVING_NCES_SEARCH.includes(schoolData.schoolType);
if (useNCES) {
missingInfo |= schoolData.nces === '';
}
if (!useNCES || schoolData.nces === '-1') {
registrationSchoolLocation && (missingInfo |= registrationSchoolLocation.value === '');
if (SCHOOL_TYPES_HAVING_NAMES.includes(schoolData.schoolType)) {
missingInfo |= schoolData.schoolName === '';
}
}
} else if (schoolData.country !== '') {
// Non-US
registrationSchoolLocation && (missingInfo |= registrationSchoolLocation.value === '');
if (SCHOOL_TYPES_HAVING_NAMES.includes(schoolData.schoolType)) {
missingInfo |= schoolData.schoolName === '';
}
}
return !missingInfo;
}

let loggedTeacherSelected = false; // only make this log call once
function showTeacher() {
// Show correct form elements.
Expand Down Expand Up @@ -273,7 +337,7 @@ window.SignupManager = function (options) {
}

function shouldUseAutocompleteDropdown() {
return getAutocompleteFlag() && registrationSchoolStyleGroup === 'autocomplete';
return getAutocompleteFlag() && registrationSchoolStyleGroup !== SCHOOL_STYLE_TEST_GROUPS.control;
}

function getUserTypeSelected() {
Expand Down Expand Up @@ -319,7 +383,9 @@ window.SignupManager = function (options) {
const match = schoolInfoDataMap.find(x => x.from === el.name);
if (match) {
const value = match.transform ? match.transform(el.value) : el.value;
formData.push({name: "user[school_info_attributes][" + match.to + "]", value: value});
if (!(match.to === 'school_id' && value === '-1')) { // skip passing "not found" school id value
formData.push({name: "user[school_info_attributes][" + match.to + "]", value: value});
}
}
});
}
Expand All @@ -344,7 +410,18 @@ window.SignupManager = function (options) {
$("#password_message_confirmation").text("");

if (getAutocompleteFlag() && isTeacherSelected()) {
schoolData.showErrorMsg = false;
logEvent('teacher-submitted');
if (registrationSchoolStyleGroup === SCHOOL_STYLE_TEST_GROUPS.autocompleteRequired) {
if (!schoolInfoIsComplete()) {
schoolData.showErrorMsg = true;
updateAutocompleteSchoolFields(schoolData);
logEvent('teacher-submit-error');
$('#signup-button').prop('disabled', false);
return false;
}
}
updateAutocompleteSchoolFields(schoolData);
}

$.ajax({
Expand Down

0 comments on commit a6d9f0f

Please sign in to comment.