diff --git a/src/account-settings/AccountSettingsPage.jsx b/src/account-settings/AccountSettingsPage.jsx index 8ed54bf..9a14da3 100644 --- a/src/account-settings/AccountSettingsPage.jsx +++ b/src/account-settings/AccountSettingsPage.jsx @@ -31,6 +31,8 @@ import { YEAR_OF_BIRTH_OPTIONS, EDUCATION_LEVELS, GENDER_OPTIONS, + COUNTRY_WITH_STATES, + getStatesList, } from './data/constants'; import { fetchSiteLanguages } from './site-language'; import CoachingToggle from './coaching/CoachingToggle'; @@ -82,11 +84,15 @@ class AccountSettingsPage extends React.Component { return concatTimeZoneOptions; }); - getLocalizedOptions = memoize(locale => ({ + getLocalizedOptions = memoize((locale, country) => ({ countryOptions: [{ value: '', label: this.props.intl.formatMessage(messages['account.settings.field.country.options.empty']), }].concat(getCountryList(locale).map(({ code, name }) => ({ value: code, label: name }))), + stateOptions: [{ + value: '', + label: this.props.intl.formatMessage(messages['account.settings.field.state.options.empty']), + }].concat(getStatesList(country)), languageProficiencyOptions: [{ value: '', label: this.props.intl.formatMessage(messages['account.settings.field.language_proficiencies.options.empty']), @@ -209,11 +215,15 @@ class AccountSettingsPage extends React.Component { // Memoized options lists const { countryOptions, + stateOptions, languageProficiencyOptions, yearOfBirthOptions, educationLevelOptions, genderOptions, - } = this.getLocalizedOptions(this.context.locale); + } = this.getLocalizedOptions(this.context.locale, this.props.formValues.country); + + // Show State field only if the country is US (could include Canada later) + const showState = this.props.formValues.country == COUNTRY_WITH_STATES; const timeZoneOptions = this.getLocalizedTimeZoneOptions( this.props.timeZoneOptions, @@ -294,6 +304,22 @@ class AccountSettingsPage extends React.Component { isEditable={this.isEditable('country')} {...editableFieldProps} /> + {showState && + + }
diff --git a/src/account-settings/AccountSettingsPage.messages.jsx b/src/account-settings/AccountSettingsPage.messages.jsx index 03c4692..20e40ba 100644 --- a/src/account-settings/AccountSettingsPage.messages.jsx +++ b/src/account-settings/AccountSettingsPage.messages.jsx @@ -156,6 +156,21 @@ const messages = defineMessages({ defaultMessage: 'Select a Country', description: 'Option for empty value on account settings country field.', }, + 'account.settings.field.state': { + id: 'account.settings.field.state', + defaultMessage: 'State', + description: 'Label for account settings state field.', + }, + 'account.settings.field.state.empty': { + id: 'account.settings.field.state.empty', + defaultMessage: 'Add state', + description: 'Placeholder for empty account settings state field.', + }, + 'account.settings.field.state.options.empty': { + id: 'account.settings.field.state.options.empty', + defaultMessage: 'Select a State', + description: 'Option for empty value on account settings state field.', + }, 'account.settings.field.site.language': { id: 'account.settings.field.site.language', defaultMessage: 'Site language', diff --git a/src/account-settings/data/constants.js b/src/account-settings/data/constants.js index c6e2552..0ac9ed7 100644 --- a/src/account-settings/data/constants.js +++ b/src/account-settings/data/constants.js @@ -31,4 +31,84 @@ export const GENDER_OPTIONS = [ 'o', ]; +export const COUNTRY_WITH_STATES = 'US'; + export const TRANSIFEX_LANGUAGE_BASE_URL = 'https://www.transifex.com/open-edx/edx-platform/language/'; + +const COUNTRY_STATES_MAP = { + CA: [ + { value: 'AB', label: 'Alberta' }, + { value: 'BC', label: 'British Columbia' }, + { value: 'MB', label: 'Manitoba' }, + { value: 'NB', label: 'New Brunswick' }, + { value: 'NL', label: 'Newfoundland and Labrador' }, + { value: 'NS', label: 'Nova Scotia' }, + { value: 'NT', label: 'Northwest Territories' }, + { value: 'NU', label: 'Nunavut' }, + { value: 'ON', label: 'Ontario' }, + { value: 'PE', label: 'Prince Edward Island' }, + { value: 'QC', label: 'Québec' }, + { value: 'SK', label: 'Saskatchewan' }, + { value: 'YT', label: 'Yukon' }, + ], + US: [ + { value: 'AL', label: 'Alabama' }, + { value: 'AK', label: 'Alaska' }, + { value: 'AZ', label: 'Arizona' }, + { value: 'AR', label: 'Arkansas' }, + { value: 'AA', label: 'Armed Forces Americas' }, + { value: 'AE', label: 'Armed Forces Europe' }, + { value: 'AP', label: 'Armed Forces Pacific' }, + { value: 'CA', label: 'California' }, + { value: 'CO', label: 'Colorado' }, + { value: 'CT', label: 'Connecticut' }, + { value: 'DE', label: 'Delaware' }, + { value: 'DC', label: 'District Of Columbia' }, + { value: 'FL', label: 'Florida' }, + { value: 'GA', label: 'Georgia' }, + { value: 'HI', label: 'Hawaii' }, + { value: 'ID', label: 'Idaho' }, + { value: 'IL', label: 'Illinois' }, + { value: 'IN', label: 'Indiana' }, + { value: 'IA', label: 'Iowa' }, + { value: 'KS', label: 'Kansas' }, + { value: 'KY', label: 'Kentucky' }, + { value: 'LA', label: 'Louisiana' }, + { value: 'ME', label: 'Maine' }, + { value: 'MD', label: 'Maryland' }, + { value: 'MA', label: 'Massachusetts' }, + { value: 'MI', label: 'Michigan' }, + { value: 'MN', label: 'Minnesota' }, + { value: 'MS', label: 'Mississippi' }, + { value: 'MO', label: 'Missouri' }, + { value: 'MT', label: 'Montana' }, + { value: 'NE', label: 'Nebraska' }, + { value: 'NV', label: 'Nevada' }, + { value: 'NH', label: 'New Hampshire' }, + { value: 'NJ', label: 'New Jersey' }, + { value: 'NM', label: 'New Mexico' }, + { value: 'NY', label: 'New York' }, + { value: 'NC', label: 'North Carolina' }, + { value: 'ND', label: 'North Dakota' }, + { value: 'OH', label: 'Ohio' }, + { value: 'OK', label: 'Oklahoma' }, + { value: 'OR', label: 'Oregon' }, + { value: 'PA', label: 'Pennsylvania' }, + { value: 'RI', label: 'Rhode Island' }, + { value: 'SC', label: 'South Carolina' }, + { value: 'SD', label: 'South Dakota' }, + { value: 'TN', label: 'Tennessee' }, + { value: 'TX', label: 'Texas' }, + { value: 'UT', label: 'Utah' }, + { value: 'VT', label: 'Vermont' }, + { value: 'VA', label: 'Virginia' }, + { value: 'WA', label: 'Washington' }, + { value: 'WV', label: 'West Virginia' }, + { value: 'WI', label: 'Wisconsin' }, + { value: 'WY', label: 'Wyoming' }, + ], +}; + +export function getStatesList(country) { + return country && COUNTRY_STATES_MAP[country.toUpperCase()]; +}