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

Sign up page: school info should be required for 1/3 of users #19122

Merged
merged 2 commits into from
Nov 14, 2017
Merged

Sign up page: school info should be required for 1/3 of users #19122

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2c6d187
Switch to 3-way split test where 1/3 apiece are control, autocomplete…
ewjordan Nov 14, 2017
c83dcb4
Merge branches 'sign-up-school-info-required' and 'staging' of https:…
ewjordan Nov 14, 2017
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
1 change: 1 addition & 0 deletions apps/i18n/common/en_us.json
View file
Open in desktop
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
Open in desktop
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