diff --git a/apps/i18n/common/en_us.json b/apps/i18n/common/en_us.json index b90e90b151c76..efdb4c3312717 100644 --- a/apps/i18n/common/en_us.json +++ b/apps/i18n/common/en_us.json @@ -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", diff --git a/apps/src/sites/studio/pages/signup.js b/apps/src/sites/studio/pages/signup.js index d5c6fb07023a2..a246af8650b34 100644 --- a/apps/src/sites/studio/pages/signup.js +++ b/apps/src/sites/studio/pages/signup.js @@ -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']; @@ -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( @@ -141,7 +155,6 @@ window.SignupManager = function (options) { } let schoolData = { - name: '', country: 'United States', nces: '', schoolName: '', @@ -149,17 +162,10 @@ window.SignupManager = function (options) { 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); } @@ -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(
-
{i18n.schoolInformationHeader()}
+
+ {schoolInfoOptional() ? i18n.schoolInformationOptionalHeader() : i18n.schoolInformationHeader()} +

@@ -225,7 +245,7 @@ window.SignupManager = function (options) { @@ -233,15 +253,59 @@ window.SignupManager = function (options) { + {data.showErrorMsg && ( +
+ {i18n.schoolInfoRequired()} +
+ )}
, $("#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. @@ -273,7 +337,7 @@ window.SignupManager = function (options) { } function shouldUseAutocompleteDropdown() { - return getAutocompleteFlag() && registrationSchoolStyleGroup === 'autocomplete'; + return getAutocompleteFlag() && registrationSchoolStyleGroup !== SCHOOL_STYLE_TEST_GROUPS.control; } function getUserTypeSelected() { @@ -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}); + } } }); } @@ -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({