Merge pull request #220 from edx/ork/MICROBA-311_add-state-to-account-settings

MICROBA-311 Add state field to account settings

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 &&
+            <EditableField
+              name="state"
+              type="select"
+              value={this.props.formValues.state}
+              options={stateOptions}
+              label={this.props.intl.formatMessage(messages['account.settings.field.state'])}
+              emptyLabel={
+                this.isEditable('state') ?
+                  this.props.intl.formatMessage(messages['account.settings.field.state.empty']) :
+                  this.renderEmptyStaticFieldMessage()
+              }
+              isEditable={this.isEditable('state')}
+              {...editableFieldProps}
+            />
+          }
         </div>
 
         <div className="account-section" id="profile-information">

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',

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()];
+}