fix: Update frontend-build (#340)

Update frontend-platform

.env

@@ -5,6 +5,7 @@ CSRF_TOKEN_API_PATH=null
 ECOMMERCE_BASE_URL=null
 LANGUAGE_PREFERENCE_COOKIE_NAME=null
 LMS_BASE_URL=null
+DEMOGRAPHICS_BASE_URL=null
 LOGIN_URL=null
 LOGOUT_URL=null
 MARKETING_SITE_BASE_URL=null
@@ -15,3 +16,4 @@ SEGMENT_KEY=null
 SITE_NAME=null
 SUPPORT_URL=null
 USER_INFO_COOKIE_NAME=null
+ENTERPRISE_LEARNER_PORTAL_HOSTNAME=null

.env.development

@@ -7,7 +7,8 @@ LANGUAGE_PREFERENCE_COOKIE_NAME='openedx-language-preference'
 LMS_BASE_URL='http://localhost:18000'
 LOGIN_URL='http://localhost:18000/login'
 LOGOUT_URL='http://localhost:18000/logout'
-MARKETING_SITE_BASE_URL='http://localhost:18000'
+MARKETING_SITE_BASE_URL='http://localhost:5335'
+DEMOGRAPHICS_BASE_URL='http://localhost:18360'
 NODE_ENV='development'
 ORDER_HISTORY_URL='localhost:1996/orders'
 PORT=1997
@@ -18,3 +19,5 @@ SUPPORT_URL='http://localhost:18000/support'
 USER_INFO_COOKIE_NAME='edx-user-info'
 # Temporary, Remove this once we are ready to release the feature.
 COACHING_ENABLED=true
+ENABLE_DEMOGRAPHICS_COLLECTION=true
+ENTERPRISE_LEARNER_PORTAL_HOSTNAME=null='http://localhost:8080'

.env.test

@@ -7,7 +7,8 @@ LANGUAGE_PREFERENCE_COOKIE_NAME='openedx-language-preference'
 LMS_BASE_URL='http://localhost:18000'
 LOGIN_URL='http://localhost:18000/login'
 LOGOUT_URL='http://localhost:18000/logout'
-MARKETING_SITE_BASE_URL='http://localhost:18000'
+MARKETING_SITE_BASE_URL='http://localhost:5335'
+DEMOGRAPHICS_BASE_URL='http://localhost:18360'
 NODE_ENV=null
 ORDER_HISTORY_URL='localhost:1996/orders'
 REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
@@ -16,3 +17,4 @@ SITE_NAME='edX'
 SUPPORT_URL='http://localhost:18000/support'
 USER_INFO_COOKIE_NAME='edx-user-info'
 COACHING_ENABLED=''
+ENABLE_DEMOGRAPHICS_COLLECTION=''

README.rst

@@ -41,11 +41,6 @@ This MFE is configured via node environment variables supplied at build time. Se
 For more information see the document: `Micro-frontend applications in Open
 edX <https://github.com/edx/edx-developer-docs/blob/5191e800bf16cf42f25c58c58f983bdaf7f9305d/docs/micro-frontends-in-open-edx.rst>`__.
 
-Notes
------
-
-The production Webpack configuration for this repo uses `Purgecss <https://www.purgecss.com/>`__ to remove unused CSS from the production css file. In ``webpack.prod.config.js`` the Purgecss plugin is configured to scan directories to determine what css selectors should remain. Currently the src/ directory is scanned along with all ``@edx/frontend-component*`` node modules and ``@edx/paragon``. **If you add and use a component in this repo that relies on HTML classes or ids for styling you must add it to the Purgecss configuration or it will be unstyled in the production build.**
-
 .. |Build Status| image:: https://api.travis-ci.org/edx/frontend-app-account.svg?branch=master
    :target: https://travis-ci.org/edx/frontend-app-account
 .. |Codecov| image:: https://img.shields.io/codecov/c/github/edx/frontend-app-account

package.json

@@ -29,21 +29,26 @@
     "ie 11"
   ],
   "dependencies": {
-    "@edx/frontend-component-footer": "10.0.9",
+    "@edx/frontend-component-footer": "10.0.11",
     "@edx/frontend-component-header": "2.0.5",
-    "@edx/frontend-platform": "1.1.14",
-    "@edx/paragon": "7.1.5",
-    "@fortawesome/fontawesome-svg-core": "1.2.28",
+    "@edx/frontend-platform": "1.6.1",
+    "@edx/paragon": "9.1.1",
+    "@fortawesome/fontawesome-svg-core": "1.2.32",
     "@fortawesome/free-brands-svg-icons": "5.8.2",
     "@fortawesome/free-regular-svg-icons": "5.7.2",
     "@fortawesome/free-solid-svg-icons": "5.8.2",
-    "@fortawesome/react-fontawesome": "0.1.9",
+    "@fortawesome/react-fontawesome": "0.1.12",
+    "@tensorflow-models/blazeface": "git+https://github.com/alangsto/blazeface.git",
+    "@tensorflow/tfjs-converter": "1.6.1",
+    "@tensorflow/tfjs-core": "1.6.1",
     "babel-polyfill": "6.26.0",
+    "bowser": "^2.10.0",
     "classnames": "2.2.6",
     "font-awesome": "4.7.0",
     "form-urlencoded": "4.0.1",
-    "formdata-polyfill": "3.0.19",
+    "formdata-polyfill": "3.0.20",
     "history": "4.10.1",
+    "jslib-html5-camera-photo": "^3.1.3",
     "lodash.camelcase": "4.3.0",
     "lodash.debounce": "4.0.8",
     "lodash.findindex": "4.6.0",
@@ -52,17 +57,19 @@
     "lodash.merge": "4.6.2",
     "lodash.omit": "4.5.0",
     "lodash.pick": "4.4.0",
+    "lodash.pickby": "^4.6.0",
     "lodash.snakecase": "4.1.1",
     "memoize-one": "5.1.1",
     "newrelic": "5.13.1",
     "prop-types": "15.7.2",
+    "qs": "6.9.4",
     "react": "16.10.2",
     "react-dom": "16.10.2",
     "react-redux": "7.1.3",
     "react-router": "5.1.2",
     "react-router-dom": "5.1.2",
     "react-router-hash-link": "1.2.2",
-    "react-scrollspy": "3.4.2",
+    "react-scrollspy": "3.4.3",
     "react-transition-group": "4.3.0",
     "redux": "4.0.5",
     "redux-devtools-extension": "2.13.8",
@@ -70,17 +77,18 @@
     "redux-saga": "1.1.3",
     "redux-thunk": "2.3.0",
     "reselect": "4.0.0",
-    "universal-cookie": "4.0.3"
+    "universal-cookie": "4.0.4"
   },
   "devDependencies": {
-    "@edx/frontend-build": "2.0.6",
-    "codecov": "3.6.5",
+    "@edx/frontend-build": "5.3.2",
+    "@testing-library/jest-dom": "^5.11.2",
+    "@testing-library/react": "^10.4.7",
+    "codecov": "3.7.2",
     "enzyme": "3.10.0",
-    "enzyme-adapter-react-16": "1.15.2",
+    "enzyme-adapter-react-16": "1.15.5",
     "es-check": "5.0.0",
-    "glob": "7.1.6",
     "husky": "3.0.9",
-    "purgecss-webpack-plugin": "1.6.0",
+    "jest": "^26.1.0",
     "react-test-renderer": "16.8.6",
     "reactifex": "1.1.1",
     "redux-mock-store": "1.5.4"

public/index.html

@@ -4,7 +4,7 @@
       <title>Account | edX</title>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
-      <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
+      <link rel="shortcut icon" href="<%=webpackConfig.output.publicPath%>favicon.ico" type="image/x-icon" />
   </head>
   <body>
     <div id="root"></div>

src/account-settings/AccountSettingsPage.jsx

@@ -36,6 +36,8 @@ import {
 } from './data/constants';
 import { fetchSiteLanguages } from './site-language';
 import CoachingToggle from './coaching/CoachingToggle';
+import DemographicsSection from './demographics/DemographicsSection';
+
 
 class AccountSettingsPage extends React.Component {
   constructor(props, context) {
@@ -52,6 +54,16 @@ class AccountSettingsPage extends React.Component {
     this.state = {
       duplicateTpaProvider,
     };
+
+    this.navLinkRefs = {
+      '#basic-information': React.createRef(),
+      '#profile-information': React.createRef(),
+      '#demographics-information': React.createRef(),
+      '#social-media': React.createRef(),
+      '#site-preferences': React.createRef(),
+      '#linked-accounts': React.createRef(),
+      '#delete-account': React.createRef(),
+    };
   }
 
   componentDidMount() {
@@ -64,6 +76,19 @@ class AccountSettingsPage extends React.Component {
     });
   }
 
+  componentDidUpdate(prevProps) {
+    if (prevProps.loading && !prevProps.loaded && this.props.loaded) {
+      const locationHash = global.location.hash;
+      // Check for the locationHash in the URL and then scroll to it if it is in the
+      // NavLinks list
+      if (typeof locationHash !== 'string')
+        return;
+      if (Object.keys(this.navLinkRefs).includes(locationHash) && this.navLinkRefs[locationHash].current) {
+        window.scrollTo(0, this.navLinkRefs[locationHash].current.offsetTop)
+      }
+    }
+  }
+
   // NOTE: We need 'locale' for the memoization in getLocalizedTimeZoneOptions.  Don't remove it!
   // eslint-disable-next-line no-unused-vars
   getLocalizedTimeZoneOptions = memoize((timeZoneOptions, countryTimeZoneOptions, locale) => {
@@ -206,6 +231,17 @@ class AccountSettingsPage extends React.Component {
     );
   }
 
+  renderDemographicsSection() {
+    // check the result of an LMS API call to determine if we should render the DemographicsSection component
+    if (this.props.formValues.shouldDisplayDemographicsSection) {
+      return (
+        <DemographicsSection forwardRef={this.navLinkRefs['#demographics-information']}/>
+      );
+    } else {
+      return null;
+    }
+  }
+
   renderContent() {
     const editableFieldProps = {
       onChange: this.handleEditableFieldChange,
@@ -235,7 +271,7 @@ class AccountSettingsPage extends React.Component {
 
     return (
       <React.Fragment>
-        <div className="account-section" id="basic-information">
+        <div className="account-section" id="basic-information" ref={this.navLinkRefs['#basic-information']}>
           <h2 className="section-heading">
             {this.props.intl.formatMessage(messages['account.settings.section.account.information'])}
           </h2>
@@ -322,7 +358,7 @@ class AccountSettingsPage extends React.Component {
           }
         </div>
 
-        <div className="account-section" id="profile-information">
+        <div className="account-section" id="profile-information" ref={this.navLinkRefs['#profile-information']}>
           <h2 className="section-heading">
             {this.props.intl.formatMessage(messages['account.settings.section.profile.information'])}
           </h2>
@@ -363,7 +399,7 @@ class AccountSettingsPage extends React.Component {
             />
           }
         </div>
-
+        {getConfig().ENABLE_DEMOGRAPHICS_COLLECTION && this.renderDemographicsSection()}
         <div className="account-section" id="social-media">
           <h2 className="section-heading">
             {this.props.intl.formatMessage(messages['account.settings.section.social.media'])}
@@ -396,7 +432,7 @@ class AccountSettingsPage extends React.Component {
           />
         </div>
 
-        <div className="account-section" id="site-preferences">
+        <div className="account-section" id="site-preferences" ref={this.navLinkRefs['#site-preferences']}>
           <h2 className="section-heading">
             {this.props.intl.formatMessage(messages['account.settings.section.site.preferences'])}
           </h2>
@@ -427,13 +463,13 @@ class AccountSettingsPage extends React.Component {
           />
         </div>
 
-        <div className="account-section" id="linked-accounts">
+        <div className="account-section" id="linked-accounts" ref={this.navLinkRefs['#linked-accounts']}>
           <h2 className="section-heading">{this.props.intl.formatMessage(messages['account.settings.section.linked.accounts'])}</h2>
           <p>{this.props.intl.formatMessage(messages['account.settings.section.linked.accounts.description'])}</p>
           <ThirdPartyAuth />
         </div>
 
-        <div className="account-section" id="delete-account">
+        <div className="account-section" id="delete-account" ref={this.navLinkRefs['#delete-account']}>
           <DeleteAccount
             isVerifiedAccount={this.props.isActive}
             hasLinkedTPA={hasLinkedTPA}
@@ -476,7 +512,9 @@ class AccountSettingsPage extends React.Component {
         <div>
           <div className="row">
             <div className="col-md-3">
-              <JumpNav />
+              <JumpNav
+                displayDemographicsLink={this.props.formValues.shouldDisplayDemographicsSection}
+              />
             </div>
             <div className="col-md-9">
               {loading ? this.renderLoading() : null}

src/account-settings/AccountSettingsPage.messages.jsx

@@ -46,6 +46,11 @@ const messages = defineMessages({
     defaultMessage: 'Profile Information',
     description: 'The profile information section heading.',
   },
+  'account.settings.section.demographics.information': {
+    id: 'account.settings.section.demographics.information',
+    defaultMessage: 'Optional Information',
+    description: 'The optional information section heading.',
+  },
   'account.settings.section.site.preferences': {
     id: 'account.settings.section.site.preferences',
     defaultMessage: 'Site Preferences',
@@ -287,6 +292,7 @@ const messages = defineMessages({
     defaultMessage: 'Select a Language',
     description: 'Option for an empty value on account settings spoken languages field.',
   },
+
   'account.settings.field.time.zone': {
     id: 'account.settings.field.time.zone',
     defaultMessage: 'Time zone',

src/account-settings/EditableField.jsx

@@ -23,6 +23,7 @@ function EditableField(props) {
     emptyLabel,
     type,
     value,
+    userSuppliedValue,
     options,
     saveState,
     error,
@@ -66,15 +67,22 @@ function EditableField(props) {
 
   const renderValue = (rawValue) => {
     if (!rawValue) return renderEmptyLabel();
+    let value = rawValue;
 
     if (options) {
       // Use == instead of === to prevent issues when HTML casts numbers as strings
       // eslint-disable-next-line eqeqeq
       const selectedOption = options.find(option => option.value == rawValue);
-      if (selectedOption) return selectedOption.label;
+      if (selectedOption) {
+        value = selectedOption.label;
+      };
     }
 
-    return rawValue;
+    if (userSuppliedValue) {
+      value += `: ${userSuppliedValue}`;
+    }
+
+    return value;
   };
 
   const renderConfirmationMessage = () => {
@@ -98,6 +106,7 @@ function EditableField(props) {
             >
               <label className="h6 d-block" htmlFor={id}>{label}</label>
               <Input
+                data-hj-suppress
                 name={name}
                 id={id}
                 type={type}
@@ -106,6 +115,7 @@ function EditableField(props) {
                 options={options}
                 {...others}
               />
+              <>{others.children}</>
             </ValidationFormGroup>
             <p>
               <StatefulButton
@@ -146,7 +156,7 @@ function EditableField(props) {
                 </Button>
               ) : null}
             </div>
-            <p>{renderValue(value)}</p>
+            <p data-hj-suppress>{renderValue(value)}</p>
             <p className="small text-muted mt-n2">{renderConfirmationMessage() || helpText}</p>
           </div>
         ),
@@ -162,6 +172,7 @@ EditableField.propTypes = {
   emptyLabel: PropTypes.node,
   type: PropTypes.string.isRequired,
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  userSuppliedValue: PropTypes.string,
   options: PropTypes.arrayOf(PropTypes.shape({
     label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

src/account-settings/EmailField.jsx

@@ -109,6 +109,7 @@ function EmailField(props) {
             >
               <label className="h6 d-block" htmlFor={id}>{label}</label>
               <Input
+                data-hj-suppress
                 name={name}
                 id={id}
                 type="email"
@@ -156,7 +157,7 @@ function EmailField(props) {
                 </Button>
               ) : null}
             </div>
-            <p>{renderValue()}</p>
+            <p data-hj-suppress>{renderValue()}</p>
             {renderConfirmationMessage() || <p className="small text-muted mt-n2">{helpText}</p>}
           </div>
         ),

src/account-settings/JumpNav.jsx

@@ -4,15 +4,18 @@ import { NavHashLink } from 'react-router-hash-link';
 import Scrollspy from 'react-scrollspy';
 
 import messages from './AccountSettingsPage.messages';
+import { getConfig } from '@edx/frontend-platform';
+import PropTypes from 'prop-types';
 
 
-function JumpNav({ intl }) {
+function JumpNav({ intl, displayDemographicsLink }) {
   return (
     <div className="jump-nav">
       <Scrollspy
         items={[
           'basic-information',
           'profile-information',
+          'demographics-information',
           'social-media',
           'site-preferences',
           'linked-accounts',
@@ -31,6 +34,13 @@ function JumpNav({ intl }) {
             {intl.formatMessage(messages['account.settings.section.profile.information'])}
           </NavHashLink>
         </li>
+        {getConfig().ENABLE_DEMOGRAPHICS_COLLECTION && displayDemographicsLink &&
+          <li>
+            <NavHashLink to="#demographics-information">
+              {intl.formatMessage(messages['account.settings.section.demographics.information'])}
+            </NavHashLink>
+          </li>
+        }
         <li>
           <NavHashLink to="#social-media">
             {intl.formatMessage(messages['account.settings.section.social.media'])}
@@ -59,7 +69,11 @@ function JumpNav({ intl }) {
 
 JumpNav.propTypes = {
   intl: intlShape.isRequired,
+  displayDemographicsLink: PropTypes.bool.isRequired,
 };
 
+JumpNav.defaultProps = {
+  displayDemographicsLink: false,
+}
 
 export default injectIntl(JumpNav);

src/account-settings/coaching/CoachingConsent.jsx

@@ -7,12 +7,14 @@ import { faCheck } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import get from 'lodash.get';
+import { getAuthenticatedHttpClient, getAuthenticatedUser } from '@edx/frontend-platform/auth';
 
 import PageLoading from '../PageLoading';
 import CoachingConsentForm from './CoachingConsentForm';
 import messages from './CoachingConsent.messages';
 import LogoSVG from '../../logo.svg';
-import { fetchSettings, saveSettings, saveMultipleSettings } from '../data/actions';
+import { fetchSettings } from '../data/actions';
 import { coachingConsentPageSelector } from '../data/selectors';
 
 const Logo = ({ src, alt, ...attributes }) => (
@@ -57,121 +59,75 @@ class CoachingConsent extends React.Component {
       formErrors: {},
       formSubmitted: false,
       declineSubmitted: false,
-      allSubmissionsComplete: false,
+      submissionSuccess: false,
     };
 
     this.handleSubmit = this.handleSubmit.bind(this);
     this.declineCoaching = this.declineCoaching.bind(this);
+    this.patchUsingCoachingConsentForm = this.patchUsingCoachingConsentForm.bind(this);
   }
 
   componentDidMount() {
     this.props.fetchSettings();
   }
 
-  componentDidUpdate(prevProps, prevState) {
-    /*
-      When we are submitting the form, we're calling saveSettings 3 times, which causes
-      multiple parallel redux flows. Because of this we can't rely on just the redux states
-      being sent in through props. For instance if the coaching submission and name
-      submission happen in near parallel, the coaching flow could return errors in
-      formErrors and the name flow could overwrite the formErrors with an empty object.
-
-      To minimize disruption to the rest of the app, we're going to manage flow state from
-      within this component.
-    */
-
-    // If a new error comes in, store it before the next redux call overwrites it.
-    let allFormErrors = {};
-    let allSubmissionsComplete = false;
-
-    // Collect new errors and add to state (will be cleared on new submission)
-    const newErrorsFound = (
-      this.props.formErrors !== prevProps.formErrors
-      && Object.keys(this.props.formErrors).length > 0
-    );
-    if (newErrorsFound) {
-      allFormErrors = Object.assign({}, this.state.formErrors, this.props.formErrors);
-    }
-
-    // Check if all values from the form have confirmation values
-    if (
-      this.state.formSubmitted &&
-      this.props.saveState === 'complete'
-    ) {
-      allSubmissionsComplete = true;
-    }
-
-    // Check if all values from the decline link have confirmation values
-    if (this.props.confirmationValues.coaching && this.state.declineSubmitted) {
-      allSubmissionsComplete = true;
-    }
-    if (newErrorsFound || (allSubmissionsComplete !== prevState.allSubmissionsComplete)) {
-      this.setState({
-        formErrors: allFormErrors,
-        allSubmissionsComplete,
-      });
-    }
-  }
-
   sanitizeForwardingUrl(url) {
     // Redirect to root of MFE if invalid next param is sent
     return url && url.startsWith(getConfig().LMS_BASE_URL) ? url : `${getConfig().LMS_BASE_URL}/dashboard/`;
   }
 
-  async handleSubmit(e) {
+  async patchUsingCoachingConsentForm(body) {
+    const { userId } = getAuthenticatedUser();
+    const requestUrl = `${getConfig().LMS_BASE_URL}/api/coaching/v1/coaching_consent/${userId}/`;
+    let formErrors = {};
+    const data = await getAuthenticatedHttpClient()
+      .patch(requestUrl, body)
+      .catch((error) => {
+        if (get(error, 'customAttributes.httpErrorResponseData')) {
+          formErrors = JSON.parse(error.customAttributes.httpErrorResponseData);
+        } else {
+          formErrors = { full_name: 'Something went wrong. Please try again.' };
+        }
+        this.setState({
+          submissionSuccess: false,
+          formErrors,
+          formSubmitted: false,
+        });
+      });
+    if (get(data, 'status') === 200) {
+      this.setState({ submissionSuccess: true });
+    }
+    
+  }
+
+  handleSubmit(e) {
     e.preventDefault();
+    const fullName = e.target.fullName.value;
+    const phoneNumber = e.target.phoneNumber.value;
+    const body = {
+      coaching_consent: true,
+      consent_form_seen: true,
+      phone_number: phoneNumber,
+      full_name: fullName,
+    };
     this.setState({
       formErrors: {},
       formSubmitted: true,
       declineSubmitted: false,
-    });
-    // Must store target values or they disappear before the async function can use them.
-    const fullName = e.target.fullName.value;
-    const phoneNumber = e.target.phoneNumber.value;
-    const coachingValues = this.props.formValues.coaching;
-
-    // !important: The order of this data matters!
-    // The order that this data is in, is the order that the saveSettings() function
-    // is called.
-    const settingsSubmissions = [];
-    if (!this.props.profileDataManager) {
-      settingsSubmissions.push({
-        formId: 'name',
-        commitValues: fullName,
-      });
-    }
-    Array.prototype.push.apply(settingsSubmissions, [
-      {
-        formId: 'coaching',
-        commitValues: {
-          ...coachingValues,
-          phone_number: phoneNumber,
-          coaching_consent: true,
-          consent_form_seen: true,
-        },
-      },
-      {
-        formId: 'phone_number',
-        commitValues: phoneNumber,
-      },
-    ]);
-    this.props.saveMultipleSettings(settingsSubmissions);
+    }, () => this.patchUsingCoachingConsentForm(body));
   }
 
-  async declineCoaching(e) {
+  declineCoaching(e) {
     e.preventDefault();
-    this.setState({
-      formErrors: {},
-      declineSubmitted: true,
-      formSubmitted: false,
-    });
-    // Must store target values or they disappear before the async function can use them.
-    const coachingValues = this.props.formValues.coaching;
-    this.props.saveSettings('coaching', {
-      ...coachingValues,
+    const body = {
       coaching_consent: false,
       consent_form_seen: true,
-    });
+    };
+    this.setState({
+      formErrors: {},
+      formSubmitted: false,
+      declineSubmitted: true,
+    }, () => this.patchUsingCoachingConsentForm(body));
   }
 
   renderView(currentView) {
@@ -213,13 +169,13 @@ class CoachingConsent extends React.Component {
     if (!loaded) {
       currentView = VIEWS.NOT_LOADED;
     } else if (this.state.formSubmitted && !formHasErrors) {
-      if (this.state.allSubmissionsComplete) {
+      if (this.state.submissionSuccess) {
         currentView = VIEWS.SUCCESS;
       } else {
         currentView = VIEWS.SUCCESS_PENDING;
       }
     } else if (this.state.declineSubmitted && !formHasErrors) {
-      if (this.state.allSubmissionsComplete) {
+      if (this.state.submissionSuccess) {
         currentView = VIEWS.DECLINED;
       } else {
         currentView = VIEWS.DECLINE_PENDING;
@@ -303,14 +259,10 @@ CoachingConsent.propTypes = {
     phone_number: PropTypes.object,
   }).isRequired,
   fetchSettings: PropTypes.func.isRequired,
-  saveSettings: PropTypes.func.isRequired,
-  saveMultipleSettings: PropTypes.func.isRequired,
   saveState: PropTypes.string,
   profileDataManager: PropTypes.string,
 };
 
 export default connect(coachingConsentPageSelector, {
   fetchSettings,
-  saveSettings,
-  saveMultipleSettings,
 })(injectIntl(CoachingConsent));

src/account-settings/coaching/CoachingConsent.messages.js

@@ -48,7 +48,7 @@ const messages = defineMessages({
   },
   'account.settings.coaching.consent.success.message': {
     id: 'account.settings.coaching.consent.success.message',
-    defaultMessage: "You're signed up for coaching. You will receive a text message confirmation.",
+    defaultMessage: "You're signed up for coaching. You can expect a message via email or SMS in the coming days.",
     description: 'Text announcing that you have signed up and will receive texts',
   },
   'account.settings.coaching.consent.success.continue': {

src/account-settings/coaching/CoachingConsentForm.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 
-import { getConfig } from '@edx/frontend-platform';
 import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
 import { Input, Button, Hyperlink } from '@edx/paragon';
 
@@ -38,7 +37,7 @@ const CoachingForm = props => (
             !!props.profileDataManager &&
             <ManagedProfileAlert profileDataManager={props.profileDataManager} />
           }
-          <ErrorMessage message={props.formErrors.name} />
+          <ErrorMessage message={props.formErrors.full_name} />
           <label className="h6" htmlFor="fullName">{props.intl.formatMessage(messages['account.settings.coaching.consent.label.name'])}</label>
           <Input
             type="text"
@@ -53,7 +52,7 @@ const CoachingForm = props => (
           <label className="h6" htmlFor="phoneNumber">{props.intl.formatMessage(messages['account.settings.coaching.consent.label.phone-number'])}</label>
           <Input
             type="text"
-            name="full-name"
+            name="phone_number"
             id="phoneNumber"
             defaultValue={props.formValues.phone_number}
           />
@@ -107,7 +106,7 @@ CoachingForm.propTypes = {
   }).isRequired,
   formErrors: PropTypes.shape({
     coaching: PropTypes.string,
-    name: PropTypes.string,
+    full_name: PropTypes.string,
     phone_number: PropTypes.string,
   }),
   redirectUrl: PropTypes.string.isRequired,

src/account-settings/coaching/CoachingToggle.jsx

@@ -33,7 +33,7 @@ const CoachingToggle = props => (
               formId: 'phone_number',
               commitValues: props.phone_number,
             },
-        ]);
+        ], 'phone_number');
       }
         return props.saveSettings('phone_number', props.phone_number);
     }}

src/account-settings/coaching/test/CoachingConsent.test.jsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import renderer from 'react-test-renderer';
+import { act } from 'react-dom/test-utils';
+import configureStore from 'redux-mock-store';
+import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
+import * as auth from '@edx/frontend-platform/auth';
+
+import CoachingConsent from '../CoachingConsent';
+import * as selectors from '../../data/selectors';
+
+jest.mock('@edx/frontend-platform/auth');
+
+const IntlCoachingConsent = injectIntl(CoachingConsent);
+
+jest.mock('../../data/selectors', () => {
+  return jest.fn().mockImplementation(() => ({ coachingConsentPageSelector: () => ({}) }));
+});
+
+const mockStore = configureStore();
+
+describe('CoachingConsent', () => {
+  let props = {};
+  let store = {};
+  selectors.mockClear();
+
+  const reduxWrapper = children => (
+    <IntlProvider locale="en">
+      <Provider store={store}>{children}</Provider>
+    </IntlProvider>
+  );
+
+  beforeEach(() => {
+    store = mockStore();
+    props = {
+      fetchSettings: jest.fn(),
+      loaded: true,
+      saveState: undefined,
+      formValues: {
+        name: 'edx edx',
+        phone_number: '1234567890',
+        coaching: {
+          coaching_consent: true,
+          consent_form_seen: false,
+          eligible_for_coaching: true,
+          user: 1,
+        },
+      },
+      formErrors: {},
+      confirmationValues: {},
+      profileDataManager: '',
+      intl: {},
+    };
+    auth.getAuthenticatedHttpClient = jest.fn(() => ({
+      patch: async () => ({
+        data: { status: 200 },
+        catch: () => {},
+      }),
+    }));
+    auth.getAuthenticatedUser = jest.fn(() => ({ userId: 3 }));
+  });
+
+  it('should render', () => {
+    const wrapper = renderer.create(reduxWrapper(<IntlCoachingConsent {...props} />)).toJSON();
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('disables name field on enterprise user', () => {
+    props = {
+      ...props,
+      profileDataManager: 'test person',
+    };
+    const wrapper = renderer.create(reduxWrapper(<IntlCoachingConsent {...props} />)).toJSON();
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('display completed box when successfully submitted', async () => {
+    const fakeEvent = {
+      preventDefault: () => {},
+      target: {
+        fullName: { value: 'edx edx' },
+        phoneNumber: { value: '9783028731' },
+      },
+    };
+    const wrapper = renderer.create(
+      reduxWrapper(<IntlCoachingConsent {...props} />),
+      {
+        // bypass the forward-ref. we don't care about focus for this one test
+        createNodeMock: (element) => {
+          if (element.type === 'button') {
+            // mock a focus function
+            return {
+              focus: async () => wrapper.root.findByType('form').props.onSubmit(fakeEvent),
+            };
+          }
+          return null;
+        },
+      },
+    );
+    const form = wrapper.root.findByType('form');
+    await act(async () => { await form.props.onSubmit(fakeEvent); });
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+});

src/account-settings/coaching/test/__snapshots__/CoachingConsent.test.jsx.snap

@@ -0,0 +1,282 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CoachingConsent disables name field on enterprise user 1`] = `
+<main>
+  <div
+    className="w-100 d-flex justify-content-center align-items-center shadow coaching-header"
+  >
+    <img
+      alt="Logo"
+      className="logo"
+      src="icon/mock/path"
+    />
+  </div>
+  <div
+    className="col-12 col-md-6 col-xl-5 mx-auto mt-4 p-5 shadow-lg"
+  >
+    <h2
+      className="h2"
+    >
+      Let’s get started.
+    </h2>
+    <p>
+      MicroBachelors programs include coaching that focuses on your career, education, and how you'll achieve results through one-on-one communication with an experienced professional. If you’re interested, provide the information below and click “Submit,” and our coaching partner will connect with you via email and/or text message to help you move forward. Terms and conditions apply.*
+    </p>
+    <div>
+      <form
+        onSubmit={[Function]}
+      >
+        <div
+          className="py-3"
+        >
+          <div
+            className="alert d-flex align-items-start alert alert-primary"
+          >
+            <div />
+            <div>
+              <span>
+                Your name is managed by 
+                <b>
+                  test person
+                </b>
+                . Contact your administrator for help.
+              </span>
+            </div>
+          </div>
+          <div
+            className="alert-warning mb-2"
+          >
+            
+          </div>
+          <label
+            className="h6"
+            htmlFor="fullName"
+          >
+            Please confirm your name
+          </label>
+          <input
+            className="form-control"
+            defaultValue="edx edx"
+            disabled={true}
+            id="fullName"
+            name="full-name"
+            type="text"
+          />
+        </div>
+        <div
+          className="py-3"
+        >
+          <div
+            className="alert-warning mb-2"
+          >
+            
+          </div>
+          <label
+            className="h6"
+            htmlFor="phoneNumber"
+          >
+            Enter your mobile number
+          </label>
+          <input
+            className="form-control"
+            defaultValue="1234567890"
+            id="phoneNumber"
+            name="phone_number"
+            type="text"
+          />
+        </div>
+        <div
+          className=" py-3"
+        >
+          <p
+            className="small font-italic"
+          >
+            * Coaching services are included at no additional cost to learners with US phone numbers. Coaching includes recurring text messages. Message and data rates may apply. Text STOP to opt-out.
+          </p>
+        </div>
+        <div
+          className="alert-warning mb-2"
+        >
+          
+        </div>
+        <div
+          className="d-flex flex-column align-items-center"
+        >
+          <button
+            className="btn w-100 btn-outline-primary"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            type="submit"
+          >
+            Sign up for coaching
+          </button>
+        </div>
+        <div
+          className="mt-3"
+        >
+          <a
+            className="mt-3 text-dark btn-link small"
+            href="http://localhost:18000/dashboard/"
+            onClick={[Function]}
+            target="_self"
+          >
+            I prefer not to be contacted with free coaching services
+          </a>
+        </div>
+      </form>
+    </div>
+  </div>
+</main>
+`;
+
+exports[`CoachingConsent display completed box when successfully submitted 1`] = `
+<main>
+  <div
+    className="w-100 d-flex justify-content-center align-items-center shadow coaching-header"
+  >
+    <img
+      alt="Logo"
+      className="logo"
+      src="icon/mock/path"
+    />
+  </div>
+  <div>
+    <div
+      className="d-flex justify-content-center align-items-center flex-column"
+      style={
+        Object {
+          "height": "50vh",
+        }
+      }
+    >
+      <div
+        className="spinner-border text-primary"
+        role="status"
+      >
+        <span
+          className="sr-only"
+        >
+          Submitting...
+        </span>
+      </div>
+    </div>
+  </div>
+</main>
+`;
+
+exports[`CoachingConsent should render 1`] = `
+<main>
+  <div
+    className="w-100 d-flex justify-content-center align-items-center shadow coaching-header"
+  >
+    <img
+      alt="Logo"
+      className="logo"
+      src="icon/mock/path"
+    />
+  </div>
+  <div
+    className="col-12 col-md-6 col-xl-5 mx-auto mt-4 p-5 shadow-lg"
+  >
+    <h2
+      className="h2"
+    >
+      Let’s get started.
+    </h2>
+    <p>
+      MicroBachelors programs include coaching that focuses on your career, education, and how you'll achieve results through one-on-one communication with an experienced professional. If you’re interested, provide the information below and click “Submit,” and our coaching partner will connect with you via email and/or text message to help you move forward. Terms and conditions apply.*
+    </p>
+    <div>
+      <form
+        onSubmit={[Function]}
+      >
+        <div
+          className="py-3"
+        >
+          <div
+            className="alert-warning mb-2"
+          >
+            
+          </div>
+          <label
+            className="h6"
+            htmlFor="fullName"
+          >
+            Please confirm your name
+          </label>
+          <input
+            className="form-control"
+            defaultValue="edx edx"
+            disabled={false}
+            id="fullName"
+            name="full-name"
+            type="text"
+          />
+        </div>
+        <div
+          className="py-3"
+        >
+          <div
+            className="alert-warning mb-2"
+          >
+            
+          </div>
+          <label
+            className="h6"
+            htmlFor="phoneNumber"
+          >
+            Enter your mobile number
+          </label>
+          <input
+            className="form-control"
+            defaultValue="1234567890"
+            id="phoneNumber"
+            name="phone_number"
+            type="text"
+          />
+        </div>
+        <div
+          className=" py-3"
+        >
+          <p
+            className="small font-italic"
+          >
+            * Coaching services are included at no additional cost to learners with US phone numbers. Coaching includes recurring text messages. Message and data rates may apply. Text STOP to opt-out.
+          </p>
+        </div>
+        <div
+          className="alert-warning mb-2"
+        >
+          
+        </div>
+        <div
+          className="d-flex flex-column align-items-center"
+        >
+          <button
+            className="btn w-100 btn-outline-primary"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            type="submit"
+          >
+            Sign up for coaching
+          </button>
+        </div>
+        <div
+          className="mt-3"
+        >
+          <a
+            className="mt-3 text-dark btn-link small"
+            href="http://localhost:18000/dashboard/"
+            onClick={[Function]}
+            target="_self"
+          >
+            I prefer not to be contacted with free coaching services
+          </a>
+        </div>
+      </form>
+    </div>
+  </div>
+</main>
+`;

src/account-settings/data/actions.js

@@ -100,9 +100,9 @@ export const savePreviousSiteLanguage = previousSiteLanguage => ({
   payload: { previousSiteLanguage },
 });
 
-export const saveMultipleSettings = settingsArray => ({
+export const saveMultipleSettings = (settingsArray, form = null) => ({
   type: SAVE_MULTIPLE_SETTINGS.BASE,
-  payload: { settingsArray },
+  payload: { settingsArray, form },
 });
 
 export const saveMultipleSettingsBegin = () => ({

src/account-settings/data/constants.js

@@ -112,3 +112,7 @@ const COUNTRY_STATES_MAP = {
 export function getStatesList(country) {
   return country && COUNTRY_STATES_MAP[country.toUpperCase()];
 }
+
+export const DECLINED = 'declined';
+export const SELF_DESCRIBE = 'self-describe';
+export const OTHER = 'other';

src/account-settings/data/sagas.js

@@ -106,11 +106,11 @@ export function* handleSaveSettings(action) {
 
 
 // handles mutiple settings saved at once, in order, and stops executing on first failure.
-export function* handleSaveMultipleSettings(settings) {
+export function* handleSaveMultipleSettings(action) {
   try {
     yield put(saveMultipleSettingsBegin());
     const { username, userId } = getAuthenticatedUser();
-    const { settingsArray } = settings.payload;
+    const { settingsArray, form } = action.payload;
     for (let i = 0; i < settingsArray.length; i += 1) {
       const { formId, commitValues } = settingsArray[i];
       yield put(saveSettingsBegin());
@@ -118,7 +118,11 @@ export function* handleSaveMultipleSettings(settings) {
       const savedSettings = yield call(patchSettings, username, commitData, userId);
       yield put(saveSettingsSuccess(savedSettings, commitData));
     }
-    yield put(saveMultipleSettingsSuccess(settings));
+    yield put(saveMultipleSettingsSuccess(action));
+    if (form) {
+      yield delay(1000);
+      yield put(closeForm(form));
+    }
   } catch (e) {
     if (e.fieldErrors) {
       yield put(saveMultipleSettingsFailure({ fieldErrors: e.fieldErrors }));

src/account-settings/data/selectors.js

@@ -1,6 +1,5 @@
 import { createSelector, createStructuredSelector } from 'reselect';
-
-import { siteLanguageOptionsSelector, siteLanguageListSelector } from '../site-language';
+import { siteLanguageListSelector, siteLanguageOptionsSelector } from '../site-language';
 
 export const storeName = 'accountSettings';
 
@@ -191,3 +190,18 @@ export const coachingConsentPageSelector = createSelector(
     formErrors: errors,
   }),
 );
+
+export const demographicsSectionSelector = createSelector(
+  formValuesSelector,
+  draftsSelector,
+  errorSelector,
+  (
+    formValues,
+    drafts,
+    errors,
+  ) => ({
+    formValues,
+    drafts,
+    formErrors: errors,
+  }),
+);

src/account-settings/data/service.js

@@ -1,12 +1,15 @@
 import { getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import pick from 'lodash.pick';
+import pickBy from 'lodash.pickby';
 import omit from 'lodash.omit';
 import isEmpty from 'lodash.isempty';
 
 import { handleRequestError, unpackFieldErrors } from './utils';
 import { getThirdPartyAuthProviders } from '../third-party-auth';
 import { getCoachingPreferences, patchCoachingPreferences } from '../coaching/data/service';
+import { getDemographics, getDemographicsOptions, patchDemographics } from '../demographics/data/service';
+import { DEMOGRAPHICS_FIELDS } from '../demographics/data/utils';
 
 const SOCIAL_PLATFORMS = [
   { id: 'twitter', key: 'social_link_twitter' },
@@ -149,9 +152,31 @@ export async function getProfileDataManager(username, userRoles) {
   return null;
 }
 
+/**
+ * A function to determine if the Demographics questions should be displayed to the user. For the
+ * MVP release of Demographics we are limiting the Demographics question visibility only to
+ * MicroBachelors learners.
+ */
+export async function shouldDisplayDemographicsQuestions() {
+  const requestUrl = `${getConfig().LMS_BASE_URL}/api/demographics/v1/demographics/status/`;
+  let data = {};
+
+  try {
+    ({ data } = await getAuthenticatedHttpClient().get(requestUrl));
+    if (data.display) {
+      return data.display;
+    }
+  } catch (error) {
+    // if there was an error then we just hide the section
+    return false;
+  }
+
+  return false;
+}
+
 /**
  * A single function to GET everything considered a setting.
- * Currently encapsulates Account, Preferences, Coaching, and ThirdPartyAuth
+ * Currently encapsulates Account, Preferences, Coaching, ThirdPartyAuth, and Demographics
  */
 export async function getSettings(username, userRoles, userId) {
   const results = await Promise.all([
@@ -161,6 +186,9 @@ export async function getSettings(username, userRoles, userId) {
     getProfileDataManager(username, userRoles),
     getTimeZones(),
     getConfig().COACHING_ENABLED && getCoachingPreferences(userId),
+    getConfig().ENABLE_DEMOGRAPHICS_COLLECTION && shouldDisplayDemographicsQuestions(),
+    getConfig().ENABLE_DEMOGRAPHICS_COLLECTION && getDemographics(userId),
+    getConfig().ENABLE_DEMOGRAPHICS_COLLECTION && getDemographicsOptions(),
   ]);
 
   return {
@@ -170,6 +198,9 @@ export async function getSettings(username, userRoles, userId) {
     profileDataManager: results[3],
     timeZones: results[4],
     coaching: results[5],
+    shouldDisplayDemographicsSection: results[6],
+    ...results[7], // demographics
+    demographicsOptions: results[8],
   };
 }
 
@@ -183,9 +214,12 @@ export async function patchSettings(username, commitValues, userId) {
   // user/v1/preferences where it does update. This is the one we use.
   const preferenceKeys = ['time_zone'];
   const coachingKeys = ['coaching'];
-  const accountCommitValues = omit(commitValues, preferenceKeys, coachingKeys);
+  const demographicsKeys = DEMOGRAPHICS_FIELDS;
+  const isDemographicsKey = (value, key) => key.includes('demographics');
+  const accountCommitValues = omit(commitValues, preferenceKeys, coachingKeys, demographicsKeys);
   const preferenceCommitValues = pick(commitValues, preferenceKeys);
   const coachingCommitValues = pick(commitValues, coachingKeys);
+  const demographicsCommitValues = pickBy(commitValues, isDemographicsKey);
   const patchRequests = [];
 
   if (!isEmpty(accountCommitValues)) {
@@ -197,6 +231,9 @@ export async function patchSettings(username, commitValues, userId) {
   if (!isEmpty(coachingCommitValues)) {
     patchRequests.push(patchCoachingPreferences(userId, coachingCommitValues));
   }
+  if (!isEmpty(demographicsCommitValues)) {
+    patchRequests.push(patchDemographics(userId, demographicsCommitValues));
+  }
 
   const results = await Promise.all(patchRequests);
   // Assigns in order of requests. Preference keys

src/account-settings/delete-account/ConfirmationModal.jsx

@@ -19,6 +19,8 @@ export class ConfirmationModal extends Component {
     switch (reason) {
       case 'empty-password':
         return 'account.settings.delete.account.error.no.password';
+      case 'invalid-password':
+        return 'account.settings.delete.account.error.invalid.password';
       default:
         return 'account.settings.delete.account.error.unable.to.delete';
     }

src/account-settings/delete-account/data/sagas.js

@@ -15,7 +15,9 @@ export function* handleDeleteAccount(action) {
     const response = yield call(postDeleteAccount, action.payload.password);
     yield put(deleteAccountSuccess(response));
   } catch (e) {
-    if (typeof e.response.data === 'string') {
+    if (e.response.status === 403) {
+      yield put(deleteAccountFailure('invalid-password'));
+    } else if (typeof e.response.data === 'string') {
       yield put(deleteAccountFailure());
     } else {
       throw e;

src/account-settings/delete-account/messages.js

@@ -91,6 +91,11 @@ const messages = defineMessages({
     defaultMessage: 'A password is required',
     description: 'Error message when user has not entered their password',
   },
+  'account.settings.delete.account.error.invalid.password': {
+    id: 'account.settings.delete.account.error.invalid.password',
+    defaultMessage: 'Password is incorrect',
+    description: 'Error message when user has entered incorrect password',
+  },
   'account.settings.delete.account.error.unable.to.delete.details': {
     id: 'account.settings.delete.account.error.unable.to.delete.details',
     defaultMessage: 'Sorry, there was an error trying to process your request. Please try again later.',

src/account-settings/demographics/Checkboxes.jsx

@@ -0,0 +1,78 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { CheckBox } from '@edx/paragon';
+import { DECLINED } from '../data/constants';
+
+export const Checkboxes = (props) => {
+  const {
+    id,
+    options,
+    values,
+    onChange,
+  } = props;
+
+  const [selected, setSelected] = useState(values);
+  useEffect(() => {
+    onChange(id, selected)
+  }, [selected])
+
+  const handleToggle = (value, option) => {
+    // If the user checked 'declined', uncheck all other options
+    if (value && option == DECLINED) {
+      setSelected([DECLINED]);
+      return;
+    }
+
+    // If option checked, make sure this option is in `selected` (and remove 'declined')
+    if (value && !selected.includes(option)) {
+      const newSelected = selected.filter(i => i !== DECLINED).concat(option);
+      setSelected(newSelected);
+    }
+
+    // If unchecked, make sure this option is NOT in `selected`
+    if (!value) {
+      setSelected(selected.filter(i => i !== option));
+    }
+  }
+
+  const renderCheckboxes = () => {
+    return options.map((option, index) => {
+      const isFirst = index == 0;
+      const isChecked = selected.includes(option.value);
+      return (
+        <div key={index} className="checkboxOption">
+          <CheckBox
+            type="checkbox"
+            id={option.value}
+            name={option.value}
+            value={option.value}
+            checked={isChecked}
+            autoFocus={isFirst}
+            label={option.label}
+            onChange={(value) => handleToggle(value, option.value)}
+          />
+        </div>
+      )
+    })
+  }
+
+  return (
+    <div role="group">
+      {renderCheckboxes()}
+    </div>
+  )
+}
+
+Checkboxes.propTypes = {
+  id: PropTypes.string,
+  options: PropTypes.array,
+  values: PropTypes.array,
+  onChange: PropTypes.func,
+};
+
+Checkboxes.defaultProps = {
+  options: [],
+  values: [],
+}
+
+export default Checkboxes;

src/account-settings/demographics/DemographicsSection.jsx

@@ -0,0 +1,331 @@
+import {
+  OTHER,
+  SELF_DESCRIBE,
+} from '../data/constants';
+import { getConfig } from '@edx/frontend-platform';
+import {
+  FormattedMessage,
+  injectIntl,
+  intlShape,
+} from '@edx/frontend-platform/i18n';
+import { saveMultipleSettings, updateDraft } from '../data/actions';
+
+import Alert from '../Alert';
+import Checkboxes from './Checkboxes';
+import EditableField from '../EditableField';
+import { Input } from '@edx/paragon';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { connect } from 'react-redux';
+import { demographicsSectionSelector } from '../data/selectors';
+import get from 'lodash.get';
+import isEmpty from 'lodash.isempty';
+import memoize from 'memoize-one';
+import messages from './DemographicsSection.messages';
+
+class DemographicsSection extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+  }
+
+  /**
+   * Utility method that helps determine if we were able to retrieve the available options for
+   * the Demographics questions. Returns true if the `demographicsOptions` prop is _not_ empty,
+   * otherwise false. This prop being empty is indicative of a failure communicating with the
+   * Demographics IDA's API.
+   */
+  hasRetrievedDemographicsOptions() {
+    return !isEmpty(this.props.formValues.demographicsOptions);
+  }
+
+  /**
+   * Utility method that adds the specified message as a default option to the list of available
+   * choices.
+   * 
+   * @param {*} messageId id of message matching desired default label text
+   */
+  addDefaultOption(messageId) {
+    return [{
+      value: '',
+      label: this.props.intl.formatMessage(messages[messageId]),
+    }];
+  }
+  
+  // We check the `demographicsOptions` prop to see if it is empty before we attempt to extract and
+  // format the available options for each question from the API response.
+  getApiOptions = memoize((demographicsOptions) => ( this.hasRetrievedDemographicsOptions() && {
+    demographicsGenderOptions: this.addDefaultOption('account.settings.field.demographics.gender.options.empty')
+      .concat(demographicsOptions.actions.POST.gender.choices.map(key => ({
+        value: key.value,
+        label: key.display_name
+    }))),
+    /* Ethnicity options don't need the blank/default option */
+    demographicsEthnicityOptions: demographicsOptions.actions.POST.user_ethnicity.child.children.ethnicity.choices.map(key => ({
+        value: key.value,
+        label: key.display_name
+    })),
+    demographicsIncomeOptions: this.addDefaultOption('account.settings.field.demographics.income.options.empty')
+      .concat(demographicsOptions.actions.POST.income.choices.map(key => ({
+        value: key.value,
+        label: key.display_name
+    }))),
+    demographicsMilitaryHistoryOptions: this.addDefaultOption('account.settings.field.demographics.military_history.options.empty')
+      .concat(demographicsOptions.actions.POST.military_history.choices.map(key => ({
+        value: key.value,
+        label: key.display_name
+    }))),
+    demographicsEducationLevelOptions: this.addDefaultOption('account.settings.field.demographics.education_level.options.empty')
+      .concat(demographicsOptions.actions.POST.learner_education_level.choices.map(key => ({
+        value: key.value,
+        label: key.display_name
+    }))),
+    demographicsWorkStatusOptions: this.addDefaultOption('account.settings.field.demographics.work_status.options.empty')
+      .concat(demographicsOptions.actions.POST.work_status.choices.map(key => ({
+        value: key.value,
+        label: key.display_name
+    }))),
+    demographicsWorkSectorOptions: this.addDefaultOption('account.settings.field.demographics.work_sector.options.empty')
+      .concat(demographicsOptions.actions.POST.current_work_sector.choices.map(key => ({
+        value: key.value,
+        label: key.display_name
+    }))),
+  }));
+
+  ethnicityFieldDisplay = (demographicsEthnicityOptions) => {
+    if (get(this, 'props.formValues.demographics_user_ethnicity')) {
+      const ethnicities = this.props.formValues.demographics_user_ethnicity;  
+      return ethnicities.map((e) => {
+        var matchingOption = demographicsEthnicityOptions.filter(option => option.value === e)[0];
+        return matchingOption && matchingOption.label;
+      }).join(", ")
+    }
+  }
+
+  handleEditableFieldChange = (name, value) => {
+    this.props.updateDraft(name, value);
+  };
+
+  handleSubmit = (formId, values) => {
+    // We have some custom fields in this section. Instead of relying on the
+    // submitted values, submit the values stored in 'drafts'.
+    const drafts = this.props.drafts;
+    const settingsArray = []
+    for (let field in drafts) {
+      settingsArray.push({
+        formId: field,
+        commitValues: drafts[field]
+      })
+    }
+
+    this.props.saveMultipleSettings(settingsArray, formId);
+  };
+
+  /**
+   * If an error is encountered when trying to communicate with the Demographics IDA then we will
+   * display an Alert letting the user know that their info will not be displayed and temporarily
+   * cannot be updated.
+   */
+  renderDemographicsServiceIssueWarning() {
+    if (!isEmpty(this.props.formErrors.demographicsError) |
+        this.hasRetrievedDemographicsOptions() == false) {
+      return (
+        <div
+          tabIndex="-1"
+          ref={this.alertRef}>
+          <Alert className="alert alert-danger" role="alert">
+            <FormattedMessage
+              id="account.settings.message.demographics.service.issue"
+              defaultMessage="An error occurred attempting to retrieve or save your account information. Please try again later."
+              description="alert message informing the user that the there is a problem retrieving or updating information from the Demographics microservice"
+            />
+          </Alert>
+        </div>
+      );
+    } else {
+      return null;
+    }
+  }
+
+  render() {
+    const editableFieldProps = {
+      onChange: this.handleEditableFieldChange,
+      onSubmit: this.handleSubmit,
+    };
+
+    const {
+      demographicsGenderOptions,
+      demographicsEthnicityOptions,
+      demographicsIncomeOptions,
+      demographicsMilitaryHistoryOptions,
+      demographicsEducationLevelOptions,
+      demographicsWorkStatusOptions,
+      demographicsWorkSectorOptions,
+    } = this.getApiOptions(this.props.formValues.demographicsOptions);
+
+    const showSelfDescribe = this.props.formValues.demographics_gender == SELF_DESCRIBE;
+    const showWorkStatusDescribe = this.props.formValues.demographics_work_status == OTHER;
+
+    return (
+      <div className="account-section" id="demographics-information" ref={this.props.forwardRef}>
+        <h2 className="section-heading">
+          {this.props.intl.formatMessage(messages['account.settings.section.demographics.information'])}
+        </h2>
+        <p>
+          <a href={getConfig().MARKETING_SITE_BASE_URL + '/demographics'} target="_blank">
+            {this.props.intl.formatMessage(messages['account.settings.section.demographics.why'])}
+          </a>
+        </p>
+        {this.renderDemographicsServiceIssueWarning()}
+        {/* 
+          If the demographicsOptions props are empty then there is no need to display the fields as
+          the user will not have any choices available to select, nor will they be able to update
+          their answers.
+        */}
+        { this.hasRetrievedDemographicsOptions() &&
+          <div id="demographics-fields">
+            <EditableField
+              name="demographics_gender"
+              type="select"
+              value={this.props.formValues.demographics_gender}
+              userSuppliedValue={showSelfDescribe ? this.props.formValues.demographics_gender_description : null}
+              options={demographicsGenderOptions}
+              label={this.props.intl.formatMessage(messages['account.settings.field.demographics.gender'])}
+              emptyLabel={this.props.intl.formatMessage(messages['account.settings.field.demographics.gender.empty'])}
+              {...editableFieldProps}
+            >
+              {showSelfDescribe &&
+                <Input
+                  name='demographics_gender_description'
+                  id='field-demographics_gender_description'
+                  type='text'
+                  placeholder={this.props.intl.formatMessage(messages['account.settings.field.demographics.gender_description.empty'])}
+                  value={this.props.formValues.demographics_gender_description}
+                  onChange={(e) => this.handleEditableFieldChange(`demographics_gender_description`, e.target.value)}
+                  aria-label={this.props.intl.formatMessage(messages['account.settings.field.demographics.gender_description'])}
+                  className="mt-1"
+                />
+              }
+            </EditableField>
+            <EditableField
+              name="demographics_user_ethnicity"
+              type="select"
+              hidden
+              value={this.ethnicityFieldDisplay(demographicsEthnicityOptions)}
+              label={this.props.intl.formatMessage(messages['account.settings.field.demographics.ethnicity'])}
+              emptyLabel={this.props.intl.formatMessage(messages['account.settings.field.demographics.ethnicity.empty'])}
+              {...editableFieldProps}
+            >
+              <Checkboxes
+                id="demographics_user_ethnicity"
+                options={demographicsEthnicityOptions}
+                values={this.props.formValues.demographics_user_ethnicity}
+                {...editableFieldProps}
+              />
+            </EditableField>
+            <EditableField
+              name="demographics_income"
+              type="select"
+              value={this.props.formValues.demographics_income}
+              options={demographicsIncomeOptions}
+              label={this.props.intl.formatMessage(messages['account.settings.field.demographics.income'])}
+              emptyLabel={this.props.intl.formatMessage(messages['account.settings.field.demographics.income.empty'])}
+              {...editableFieldProps}
+            />
+            <EditableField
+              name="demographics_military_history"
+              type="select"
+              value={this.props.formValues.demographics_military_history}
+              options={demographicsMilitaryHistoryOptions}
+              label={this.props.intl.formatMessage(messages['account.settings.field.demographics.military_history'])}
+              emptyLabel={this.props.intl.formatMessage(messages['account.settings.field.demographics.military_history.empty'])}
+              {...editableFieldProps}
+            />
+            <EditableField
+              name="demographics_learner_education_level"
+              type="select"
+              value={this.props.formValues.demographics_learner_education_level}
+              options={demographicsEducationLevelOptions}
+              label={this.props.intl.formatMessage(messages['account.settings.field.demographics.learner_education_level'])}
+              emptyLabel={this.props.intl.formatMessage(messages['account.settings.field.demographics.learner_education_level.empty'])}
+              {...editableFieldProps}
+            />
+            <EditableField
+              name="demographics_parent_education_level"
+              type="select"
+              value={this.props.formValues.demographics_parent_education_level}
+              options={demographicsEducationLevelOptions}
+              label={this.props.intl.formatMessage(messages['account.settings.field.demographics.parent_education_level'])}
+              emptyLabel={this.props.intl.formatMessage(messages['account.settings.field.demographics.parent_education_level.empty'])}
+              {...editableFieldProps}
+            />
+            <EditableField
+              name="demographics_work_status"
+              type="select"
+              value={this.props.formValues.demographics_work_status}
+              userSuppliedValue={showWorkStatusDescribe ? this.props.formValues.demographics_work_status_description : null}
+              options={demographicsWorkStatusOptions}
+              label={this.props.intl.formatMessage(messages['account.settings.field.demographics.work_status'])}
+              emptyLabel={this.props.intl.formatMessage(messages['account.settings.field.demographics.work_status.empty'])}
+              {...editableFieldProps}
+            >
+              {showWorkStatusDescribe &&
+                <Input
+                  name='demographics_work_status_description'
+                  id='field-demographics_work_status_description'
+                  type='text'
+                  placeholder={this.props.intl.formatMessage(messages['account.settings.field.demographics.work_status_description.empty'])}
+                  value={this.props.formValues.demographics_work_status_description}
+                  onChange={(e) => this.handleEditableFieldChange(`demographics_work_status_description`, e.target.value)}
+                  aria-label={this.props.intl.formatMessage(messages['account.settings.field.demographics.work_status_description'])}
+                  className="mt-1"
+                />
+              }
+            </EditableField>
+            <EditableField
+              name="demographics_current_work_sector"
+              type="select"
+              value={this.props.formValues.demographics_current_work_sector}
+              options={demographicsWorkSectorOptions}
+              label={this.props.intl.formatMessage(messages['account.settings.field.demographics.current_work_sector'])}
+              emptyLabel={this.props.intl.formatMessage(messages['account.settings.field.demographics.current_work_sector.empty'])}
+              {...editableFieldProps}
+            />
+            <EditableField
+              name="demographics_future_work_sector"
+              type="select"
+              value={this.props.formValues.demographics_future_work_sector}
+              options={demographicsWorkSectorOptions}
+              label={this.props.intl.formatMessage(messages['account.settings.field.demographics.future_work_sector'])}
+              emptyLabel={this.props.intl.formatMessage(messages['account.settings.field.demographics.future_work_sector.empty'])}
+              {...editableFieldProps}
+            />
+          </div>
+        }
+      </div>
+    )
+  }
+};
+
+DemographicsSection.propTypes = {
+  intl: intlShape.isRequired,
+  formValues: PropTypes.shape({
+    demographics_gender: PropTypes.string,
+    demographics_user_ethnicity: PropTypes.array,
+    demographics_income: PropTypes.string,
+    demographics_military_history: PropTypes.string,
+    demographics_learner_education_level: PropTypes.string,
+    demographics_parent_education_level: PropTypes.string,
+    demographics_work_status: PropTypes.string,
+    demographics_current_work_sector: PropTypes.string,
+    demographics_future_work_sector: PropTypes.string,
+  }).isRequired,
+  formErrors: PropTypes.shape({
+    demographicsError: PropTypes.string,
+  }).isRequired,
+  updateDraft: PropTypes.func.isRequired
+};
+
+export default connect(demographicsSectionSelector, {
+  saveMultipleSettings,
+  updateDraft,
+})(injectIntl(DemographicsSection));

src/account-settings/demographics/DemographicsSection.messages.jsx

@@ -0,0 +1,170 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  /* Demographics section heading */
+  'account.settings.section.demographics.information': {
+    id: 'account.settings.section.demographics.information',
+    defaultMessage: 'Optional Information',
+    description: 'The optional information section heading.',
+  },
+  /* Gender identity */
+  'account.settings.field.demographics.gender': {
+    id: 'account.settings.field.demographics.gender',
+    defaultMessage: 'Gender identity',
+    description: 'Label for account settings gender identity field.',
+  },
+  'account.settings.field.demographics.gender.empty': {
+    id: 'account.settings.field.demographics.gender.empty',
+    defaultMessage: 'Add gender identity',
+    description: 'Placeholder for empty account settings gender identity field.',
+  },
+  'account.settings.field.demographics.gender.options.empty': {
+    id: 'account.settings.field.demographics.gender.options.empty',
+    defaultMessage: 'Select a gender identity',
+    description: 'Placeholder for the gender identity options dropdown.',
+  },
+  'account.settings.field.demographics.gender_description': {
+    id: 'account.settings.field.demographics.gender_description',
+    defaultMessage: 'Gender identity description',
+    description: 'Label for account settings gender identity description field.',
+  },
+  'account.settings.field.demographics.gender_description.empty': {
+    id: 'account.settings.field.demographics.gender_description.empty',
+    defaultMessage: 'Enter description',
+    description: 'Placeholder for empty account settings gender identity field.',
+  },
+  /* Ethnicity */
+  'account.settings.field.demographics.ethnicity': {
+    id: 'account.settings.field.demographics.ethnicity',
+    defaultMessage: 'Race/Ethnicity identity',
+    description: 'Label for account settings ethnic background field.',
+  },
+  'account.settings.field.demographics.ethnicity.empty': {
+    id: 'account.settings.field.demographics.ethnicity.empty',
+    defaultMessage: 'Add race/ethnicity identity',
+    description: 'Placeholder for empty account settings ethnic background field.',
+  },
+  'account.settings.field.demographics.ethnicity.options.empty': {
+    id: 'account.settings.field.demographics.ethnicity.options.empty',
+    defaultMessage: 'Select all that apply', // TODO: Is this the desired text?
+    description: 'Placeholder for the ethnic background options field.',
+  },
+  /* Income */
+  'account.settings.field.demographics.income': {
+    id: 'account.settings.field.demographics.income',
+    defaultMessage: 'Family income',
+    description: 'Label for account settings household income field.',
+  },
+  'account.settings.field.demographics.income.empty': {
+    id: 'account.settings.field.demographics.income.empty',
+    defaultMessage: 'Add family income',
+    description: 'Placeholder for empty account settings household income field.',
+  },
+  'account.settings.field.demographics.income.options.empty': {
+    id: 'account.settings.field.demographics.income.options.empty',
+    defaultMessage: 'Select a family income range',
+    description: 'Placeholder for the household income dropdown.',
+  },
+  /* Military history */
+  'account.settings.field.demographics.military_history': {
+    id: 'account.settings.field.demographics.military_history',
+    defaultMessage: 'U.S. Military status',
+    description: 'Label for account settings military history field.',
+  },
+  'account.settings.field.demographics.military_history.empty': {
+    id: 'account.settings.field.demographics.military_history.empty',
+    defaultMessage: 'Add military status',
+    description: 'Placeholder for empty account settings military history field.',
+  },
+  'account.settings.field.demographics.military_history.options.empty': {
+    id: 'account.settings.field.demographics.military_history.options.empty',
+    defaultMessage: 'Select military status',
+    description: 'Placeholder for the military history dropdown.',
+  },
+  /* Learner and family education level */
+  'account.settings.field.demographics.learner_education_level': {
+    id: 'account.settings.field.demographics.learner_education_level',
+    defaultMessage: 'Your education level',
+    description: 'Label for account settings learner education level field.',
+  },
+  'account.settings.field.demographics.learner_education_level.empty': {
+    id: 'account.settings.field.demographics.learner_education_level.empty',
+    defaultMessage: 'Add education level',
+    description: 'Placeholder for empty account settings learner education level field.',
+  },
+  'account.settings.field.demographics.parent_education_level': {
+    id: 'account.settings.field.demographics.parent_education_level',
+    defaultMessage: 'Parents/Guardians education level',
+    description: 'Label for account settings parent education level field.',
+  },
+  'account.settings.field.demographics.parent_education_level.empty': {
+    id: 'account.settings.field.demographics.parent_education_level.empty',
+    defaultMessage: 'Add education level',
+    description: 'Placeholder for empty account settings parent education level field.',
+  },
+  'account.settings.field.demographics.education_level.options.empty': {
+    id: 'account.settings.field.demographics.education_level.options.empty',
+    defaultMessage: 'Select education level',
+    description: 'Placeholder for the education level options dropdown.',
+  },
+  /* Work status */
+  'account.settings.field.demographics.work_status': {
+    id: 'account.settings.field.demographics.work_status',
+    defaultMessage: 'Employment status',
+    description: 'Label for account settings work status field.',
+  },
+  'account.settings.field.demographics.work_status.empty': {
+    id: 'account.settings.field.demographics.work_status.empty',
+    defaultMessage: 'Add employment status',
+    description: 'Placeholder for empty account settings work status field.',
+  },
+  'account.settings.field.demographics.work_status.options.empty': {
+    id: 'account.settings.field.demographics.work_status.options.empty',
+    defaultMessage: 'Select employment status',
+    description: 'Placeholder for the work status options dropdown.',
+  },
+  'account.settings.field.demographics.work_status_description': {
+    id: 'account.settings.field.demographics.work_status_description',
+    defaultMessage: 'Employment status description',
+    description: 'Label for account settings work status description field.',
+  },
+  'account.settings.field.demographics.work_status_description.empty': {
+    id: 'account.settings.field.demographics.work_status_description.empty',
+    defaultMessage: 'Enter description',
+    description: 'Placeholder for empty account settings work status description field.',
+  },
+  /* Work sector */
+  'account.settings.field.demographics.current_work_sector': {
+    id: 'account.settings.field.demographics.current_work_sector',
+    defaultMessage: 'Current work industry',
+    description: 'Label for account settings current work sector field.',
+  },
+  'account.settings.field.demographics.current_work_sector.empty': {
+    id: 'account.settings.field.demographics.current_work_sector.empty',
+    defaultMessage: 'Add work industry',
+    description: 'Placeholder for empty account settings current work sector field.',
+  },
+  'account.settings.field.demographics.future_work_sector': {
+    id: 'account.settings.field.demographics.future_work_sector',
+    defaultMessage: 'Future work industry',
+    description: 'Label for account settings future work sector field.',
+  },
+  'account.settings.field.demographics.future_work_sector.empty': {
+    id: 'account.settings.field.demographics.future_work_sector.empty',
+    defaultMessage: 'Add work industry',
+    description: 'Placeholder for empty account settings future work sector field.',
+  },
+  'account.settings.field.demographics.work_sector.options.empty': {
+    id: 'account.settings.field.demographics.work_sector.options.empty',
+    defaultMessage: 'Select work industry',
+    description: 'Placeholder for the work sector options dropdown.',
+  },
+  /* Legal copy link text */
+  'account.settings.section.demographics.why': {
+    id: 'account.settings.section.demographics.why',
+    defaultMessage: 'Why does edX collect this information?',
+    description: 'Link text for a link to external legal text',
+  },
+});
+
+export default messages;

src/account-settings/demographics/data/service.js

@@ -0,0 +1,141 @@
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { getConfig } from '@edx/frontend-platform';
+import get from 'lodash.get';
+import { convertData, TO, FROM } from './utils';
+
+/**
+ * Utility method that attempts to extract errors from the response of a PATCH request in order to
+ * display a warning or otherwise meaningful message to the user.
+ *
+ * @param {Error} error
+ */
+export function createDemographicsError(error) {
+  const apiError = Object.create(error);
+  // If the error received has the `httpResponseData` field in it, then we should have reason to
+  // believe the Demographics service is alive and responding. Extract errors from fields where
+  // appropriate so we can display them to the user.
+  if (get(error, 'customAttributes.httpErrorResponseData')) {
+    apiError.fieldErrors = JSON.parse(error.customAttributes.httpErrorResponseData);
+    if (get(apiError, 'fieldErrors.gender_description')) {
+      // eslint-disable-next-line prefer-destructuring
+      apiError.fieldErrors.demographics_gender = apiError.fieldErrors.gender_description[0];
+      delete apiError.fieldErrors.gender_description;
+    } else if (get(apiError, 'fieldErrors.work_status_description')) {
+      // eslint-disable-next-line prefer-destructuring
+      apiError.fieldErrors.demographics_work_status =
+        apiError.fieldErrors.work_status_description[0];
+      delete apiError.fieldErrors.work_status_description;
+    }
+  // Otherwise, when the service is down, the error response will not contain a
+  // `httpErrorResponseData` field. Add a generic 'demographicsError' field to the fieldErrors that
+  // will trigger showing an Alert to the user to them them know the update was unsuccessful.
+  } else {
+    apiError.fieldErrors = {
+      demographicsError: error.customAttributes.httpErrorType,
+    };
+  }
+
+  return apiError;
+}
+
+/**
+ * post all of the data related to demographics.
+ * @param {Number} userId users are identified in the api by LMS id
+ * @param {Object} commitValues { demographics }
+ */
+export async function postDemographics(userId) {
+  const requestConfig = { headers: { 'Content-Type': 'application/json' } };
+  const requestUrl = `${getConfig().DEMOGRAPHICS_BASE_URL}/demographics/api/v1/demographics/`;
+  const commitValues = { user: userId };
+  let data = {};
+
+  ({ data } = await getAuthenticatedHttpClient()
+    .post(requestUrl, commitValues, requestConfig)
+    .catch((error) => {
+      const apiError = createDemographicsError(error);
+      throw apiError;
+    }));
+
+  return convertData(data, FROM);
+}
+
+/**
+ * get all data related to the demographics.
+ * @param {Number} userId users are identified in the api by LMS id
+ */
+export async function getDemographics(userId) {
+  const requestUrl = `${getConfig().DEMOGRAPHICS_BASE_URL}/demographics/api/v1/demographics/${userId}/`;
+  let data = {};
+
+  try {
+    ({ data } = await getAuthenticatedHttpClient()
+      .get(requestUrl));
+
+    data = convertData(data, FROM);
+  } catch (error) {
+    const apiError = Object.create(error);
+    // if the API called resulted in this user receiving a 404 then follow up with a POST call to
+    // try and create the demographics entity on the backend
+    if (apiError.customAttributes.httpErrorStatus) {
+      if (apiError.customAttributes.httpErrorStatus === 404) {
+        data = await postDemographics(userId);
+      }
+    } else {
+      data = {
+        user: userId,
+        demographics_gender: '',
+        demographics_gender_description: '',
+        demographics_income: '',
+        demographics_learner_education_level: '',
+        demographics_parent_education_level: '',
+        demographics_military_history: '',
+        demographics_work_status: '',
+        demographics_work_status_description: '',
+        demographics_current_work_sector: '',
+        demographics_future_work_sector: '',
+        demographics_user_ethnicity: [],
+      };
+    }
+  }
+
+  return data;
+}
+
+/**
+ * patch all of the data related to demographics.
+ * @param {Number} userId users are identified in the api by LMS id
+ * @param {Object} commitValues { demographics }
+ */
+export async function patchDemographics(userId, commitValues) {
+  const requestUrl = `${getConfig().DEMOGRAPHICS_BASE_URL}/demographics/api/v1/demographics/${userId}/`;
+  const convertedCommitValues = convertData(commitValues, TO);
+  let data = {};
+
+  ({ data } = await getAuthenticatedHttpClient()
+    .patch(requestUrl, convertedCommitValues)
+    .catch((error) => {
+      const apiError = createDemographicsError(error);
+      throw apiError;
+    }));
+
+  return convertData(data, FROM);
+}
+
+/**
+ * retrieve the options for each field from the Demographics API
+ */
+export async function getDemographicsOptions() {
+  const requestUrl = `${getConfig().DEMOGRAPHICS_BASE_URL}/demographics/api/v1/demographics/`;
+  let data = {};
+
+  try {
+    ({ data } = await getAuthenticatedHttpClient().options(requestUrl));
+  } catch (error) {
+    // We are catching and suppressing errors here on purpose. If an error occurs during the
+    // getDemographicsOptions call we will pass back an empty `data` object. Downstream we make
+    // the assumption that if the demographicsOptions object is empty that there was an issue or
+    // error communicating with the service/API.
+  }
+
+  return data;
+}

src/account-settings/demographics/data/utils.js

@@ -0,0 +1,63 @@
+export const TO = 'to';
+export const FROM = 'from';
+export const DEMOGRAPHICS_FIELDS = [
+  'demographics_gender',
+  'demographics_gender_description',
+  'demographics_income',
+  'demographics_learner_education_level',
+  'demographics_parent_education_level',
+  'demographics_military_history',
+  'demographics_work_status',
+  'demographics_work_status_description',
+  'demographics_current_work_sector',
+  'demographics_future_work_sector',
+  'demographics_user_ethnicity',
+];
+
+// Frontend wants (example):
+//    demographics_user_ethnicity: ["asian", "white", "other"]
+//
+// Demographics wants (example):
+//    user_ethnicity: [
+//      { ethnicity: "asian" },
+//      { ethnicity: "white" },
+//      { ethnicity: "other" }
+//    ]
+function convertEthnicity(ethnicityData, direction) {
+  if (direction === FROM) {
+    return ethnicityData.map(e => e.ethnicity);
+  }
+
+  if (direction === TO) {
+    return ethnicityData.map(e => ({ ethnicity: e }));
+  }
+
+  return ethnicityData;
+}
+
+// Handles conversion of data to/from Demographics IDA to/from format needed for
+// frontend
+//  * handles ethnicity field
+//  * adds/removes 'demographics' to/from key
+//  * replace `null` with empty string or empty string with null
+export function convertData(dataObject, direction) {
+  const converted = {};
+
+  Object.entries(dataObject).forEach(([key, value]) => {
+    let newValue = value;
+
+    if (key.includes('ethnicity')) {
+      newValue = convertEthnicity(value, direction);
+    }
+
+    if (direction === TO) {
+      converted[key.replace('demographics_', '')] = newValue || null;
+    }
+
+    if (direction === FROM) {
+      converted[`demographics_${key}`] = newValue || '';
+    }
+  });
+
+  return converted;
+}

src/account-settings/demographics/test/DemographicsSection.test.jsx

@@ -0,0 +1,583 @@
+import * as auth from '@edx/frontend-platform/auth';
+
+import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
+
+import DemographicsSection from '../DemographicsSection';
+import { Provider } from 'react-redux';
+import React from 'react';
+import configureStore from 'redux-mock-store';
+import renderer from 'react-test-renderer';
+
+jest.mock('@edx/frontend-platform/auth');
+
+const IntlDemographicsSection = injectIntl(DemographicsSection);
+
+jest.mock('../../data/selectors', () => {
+   return jest.fn().mockImplementation(() => ({ demographicsSectionSelector: () => ({}) })); 
+});
+
+const mockStore = configureStore();
+
+describe('DemographicsSection', () => {
+    let props = {};
+    let store = {};
+    
+    const reduxWrapper = children => (
+        <IntlProvider locale="en">
+            <Provider store={store}>{children}</Provider>
+        </IntlProvider>
+    );
+    
+    beforeEach(() => {
+        store = mockStore();
+        props = {
+            updateDraft: jest.fn(),
+            formValues: {
+                demographics_gender: 'declined',
+                demographics_gender_description: '',
+                demographics_user_ethnicity: [],
+                demographics_income: 'declined',
+                demographics_military_history: 'declined',
+                demographics_learner_education_level: 'declined',
+                demographics_parent_education_level: 'declined',
+                demographics_work_status: 'declined',
+                demographics_work_status_description: '',
+                demographics_current_work_sector: 'declined',
+                demographics_future_work_sector: 'declined',
+                demographics_user: 1,
+                demographicsOptions: {
+                    actions: {
+                        POST: {
+                            gender: {
+                                choices: [
+                                    {
+                                        "value": "woman",
+                                        "display_name": "Woman"
+                                      },
+                                      {
+                                        "value": "man",
+                                        "display_name": "Man"
+                                      },
+                                      {
+                                        "value": "non-binary",
+                                        "display_name": "Non-binary"
+                                      },
+                                      {
+                                        "value": "self-describe",
+                                        "display_name": "Prefer to self describe"
+                                      },
+                                      {
+                                        "value": "declined",
+                                        "display_name": "Prefer not to respond"
+                                      }
+                                ]
+                            },
+                            income: {
+                                choices: [
+                                    {
+                                        "value": "less-than-10k",
+                                        "display_name": "Less than US $10,000"
+                                    },
+                                    {
+                                        "value": "10k-25k",
+                                        "display_name": "US $10,000 - $25,000"
+                                    },
+                                    {
+                                        "value": "25k-50k",
+                                        "display_name": "US $25,000 - $50,000"
+                                    },
+                                    {
+                                        "value": "50k-75k",
+                                        "display_name": "US $50,000 - $75,000"
+                                    },
+                                    {
+                                        "value": "75k-100k",
+                                        "display_name": "US $75,000 - $100,000"
+                                    },
+                                    {
+                                        "value": "over-100k",
+                                        "display_name": "Over US $100,000"
+                                    },
+                                    {
+                                        "value": "unsure",
+                                        "display_name": "I don't know"
+                                    },
+                                    {
+                                        "value": "declined",
+                                        "display_name": "Prefer not to respond"
+                                    }                                    
+                                ]
+                            },
+                            learner_education_level: {
+                                choices: [
+                                    {
+                                        "value": "no-high-school",
+                                        "display_name": "No High School"
+                                    },
+                                    {
+                                        "value": "some-high-school",
+                                        "display_name": "Some High School"
+                                    },
+                                    {
+                                        "value": "high-school-ged-equivalent",
+                                        "display_name": "High School diploma, GED, or equivalent"
+                                    },
+                                    {
+                                        "value": "some-college",
+                                        "display_name": "Some college, but no degree"
+                                    },
+                                    {
+                                        "value": "associates",
+                                        "display_name": "Associates degree"
+                                    },
+                                    {
+                                        "value": "bachelors",
+                                        "display_name": "Bachelors degree"
+                                    },
+                                    {
+                                        "value": "masters",
+                                        "display_name": "Masters degree"
+                                    },
+                                    {
+                                        "value": "professional",
+                                        "display_name": "Professional degree"
+                                    },
+                                    {
+                                        "value": "doctorate",
+                                        "display_name": "Doctorate degree"
+                                    },
+                                    {
+                                        "value": "declined",
+                                        "display_name": "Prefer not to respond"
+                                    }
+                                ]
+                            },
+                            parent_education_level: {
+                                choices: [
+                                    {
+                                        "value": "no-high-school",
+                                        "display_name": "No High School"
+                                    },
+                                    {
+                                        "value": "some-high-school",
+                                        "display_name": "Some High School"
+                                    },
+                                    {
+                                        "value": "high-school-ged-equivalent",
+                                        "display_name": "High School diploma, GED, or equivalent"
+                                    },
+                                    {
+                                        "value": "some-college",
+                                        "display_name": "Some college, but no degree"
+                                    },
+                                    {
+                                        "value": "associates",
+                                        "display_name": "Associates degree"
+                                    },
+                                    {
+                                        "value": "bachelors",
+                                        "display_name": "Bachelors degree"
+                                    },
+                                    {
+                                        "value": "masters",
+                                        "display_name": "Masters degree"
+                                    },
+                                    {
+                                        "value": "professional",
+                                        "display_name": "Professional degree"
+                                    },
+                                    {
+                                        "value": "doctorate",
+                                        "display_name": "Doctorate degree"
+                                    },
+                                    {
+                                        "value": "declined",
+                                        "display_name": "Prefer not to respond"
+                                    }
+                                ]
+                            },
+                            military_history: {
+                                choices: [
+                                    {
+                                        "value": "never-served",
+                                        "display_name": "Never served in the military"
+                                    },
+                                    {
+                                        "value": "training",
+                                        "display_name": "Only on active duty for training"
+                                    },
+                                    {
+                                        "value": "active",
+                                        "display_name": "Now on active duty"
+                                    },
+                                    {
+                                        "value": "previously-active",
+                                        "display_name": "On active duty in the past, but not now"
+                                    },
+                                    {
+                                        "value": "declined",
+                                        "display_name": "Prefer not to respond"
+                                    }
+                                ]
+                            },
+                            work_status: {
+                                choices: [
+                                    {
+                                        "value": "full-time",
+                                        "display_name": "Employed, working full-time"
+                                    },
+                                    {
+                                        "value": "part-time",
+                                        "display_name": "Employed, working part-time"
+                                    },
+                                    {
+                                        "value": "self-employed",
+                                        "display_name": "Self-Employed"
+                                    },
+                                    {
+                                        "value": "not-employed-looking",
+                                        "display_name": "Not employed, looking for work"
+                                    },
+                                    {
+                                        "value": "not-employed-not-looking",
+                                        "display_name": "Not employed, not looking for work"
+                                    },
+                                    {
+                                        "value": "unable",
+                                        "display_name": "Unable to work"
+                                    },
+                                    {
+                                        "value": "retired",
+                                        "display_name": "Retired"
+                                    },
+                                    {
+                                        "value": "other",
+                                        "display_name": "Other"
+                                    },
+                                    {
+                                        "value": "declined",
+                                        "display_name": "Prefer not to respond"
+                                    }                                    
+                                ]
+                            },
+                            current_work_sector: {
+                                choices: [
+                                    {
+                                        "value": "accommodation-food",
+                                        "display_name": "Accommodation and Food Services"
+                                    },
+                                    {
+                                        "value": "administrative-support-waste-remediation",
+                                        "display_name": "Administrative and Support and Waste Management and Remediation Services"
+                                    },
+                                    {
+                                        "value": "agriculture-forestry-fishing-hunting",
+                                        "display_name": "Agriculture, Forestry, Fishing and Hunting"
+                                    },
+                                    {
+                                        "value": "arts-entertainment-recreation",
+                                        "display_name": "Arts, Entertainment, and Recreation"
+                                    },
+                                    {
+                                        "value": "construction",
+                                        "display_name": "Construction"
+                                    },
+                                    {
+                                        "value": "educational",
+                                        "display_name": "Education Services"
+                                    },
+                                    {
+                                        "value": "finance-insurance",
+                                        "display_name": "Finance and Insurance"
+                                    },
+                                    {
+                                        "value": "healthcare-social",
+                                        "display_name": "Health Care and Social Assistance"
+                                    },
+                                    {
+                                        "value": "information",
+                                        "display_name": "Information"
+                                    },
+                                    {
+                                        "value": "management",
+                                        "display_name": "Management of Companies and Enterprises"
+                                    },
+                                    {
+                                        "value": "manufacturing",
+                                        "display_name": "Manufacturing"
+                                    },
+                                    {
+                                        "value": "mining-quarry-oil-gas",
+                                        "display_name": "Mining, Quarrying, and Oil and Gas Extraction"
+                                    },
+                                    {
+                                        "value": "professional-scientific-technical",
+                                        "display_name": "Professional, Scientific, and Technical Services"
+                                    },
+                                    {
+                                        "value": "public-admin",
+                                        "display_name": "Public Administration"
+                                    },
+                                    {
+                                        "value": "real-estate",
+                                        "display_name": "Real Estate and Rental and Leasing"
+                                    },
+                                    {
+                                        "value": "retail",
+                                        "display_name": "Retail Trade"
+                                    },
+                                    {
+                                        "value": "transport-warehousing",
+                                        "display_name": "Transportation and Warehousing"
+                                    },
+                                    {
+                                        "value": "utilities",
+                                        "display_name": "Utilities"
+                                    },
+                                    {
+                                        "value": "trade",
+                                        "display_name": "Wholesale Trade"
+                                    },
+                                    {
+                                        "value": "other",
+                                        "display_name": "Other"
+                                    },
+                                    {
+                                        "value": "declined",
+                                        "display_name": "Prefer not to respond"
+                                    }                                    
+                                ]
+                            },
+                            future_work_sector: {
+                                choices: [
+                                    {
+                                        "value": "accommodation-food",
+                                        "display_name": "Accommodation and Food Services"
+                                    },
+                                    {
+                                        "value": "administrative-support-waste-remediation",
+                                        "display_name": "Administrative and Support and Waste Management and Remediation Services"
+                                    },
+                                    {
+                                        "value": "agriculture-forestry-fishing-hunting",
+                                        "display_name": "Agriculture, Forestry, Fishing and Hunting"
+                                    },
+                                    {
+                                        "value": "arts-entertainment-recreation",
+                                        "display_name": "Arts, Entertainment, and Recreation"
+                                    },
+                                    {
+                                        "value": "construction",
+                                        "display_name": "Construction"
+                                    },
+                                    {
+                                        "value": "educational",
+                                        "display_name": "Education Services"
+                                    },
+                                    {
+                                        "value": "finance-insurance",
+                                        "display_name": "Finance and Insurance"
+                                    },
+                                    {
+                                        "value": "healthcare-social",
+                                        "display_name": "Health Care and Social Assistance"
+                                    },
+                                    {
+                                        "value": "information",
+                                        "display_name": "Information"
+                                    },
+                                    {
+                                        "value": "management",
+                                        "display_name": "Management of Companies and Enterprises"
+                                    },
+                                    {
+                                        "value": "manufacturing",
+                                        "display_name": "Manufacturing"
+                                    },
+                                    {
+                                        "value": "mining-quarry-oil-gas",
+                                        "display_name": "Mining, Quarrying, and Oil and Gas Extraction"
+                                    },
+                                    {
+                                        "value": "professional-scientific-technical",
+                                        "display_name": "Professional, Scientific, and Technical Services"
+                                    },
+                                    {
+                                        "value": "public-admin",
+                                        "display_name": "Public Administration"
+                                    },
+                                    {
+                                        "value": "real-estate",
+                                        "display_name": "Real Estate and Rental and Leasing"
+                                    },
+                                    {
+                                        "value": "retail",
+                                        "display_name": "Retail Trade"
+                                    },
+                                    {
+                                        "value": "transport-warehousing",
+                                        "display_name": "Transportation and Warehousing"
+                                    },
+                                    {
+                                        "value": "utilities",
+                                        "display_name": "Utilities"
+                                    },
+                                    {
+                                        "value": "trade",
+                                        "display_name": "Wholesale Trade"
+                                    },
+                                    {
+                                        "value": "other",
+                                        "display_name": "Other"
+                                    },
+                                    {
+                                        "value": "declined",
+                                        "display_name": "Prefer not to respond"
+                                    }                                    
+                                ]
+                            },
+                            user_ethnicity: {
+                                child: {
+                                    children: {
+                                        ethnicity: {
+                                            choices: [
+                                                {
+                                                    "value": "american-indian-or-alaska-native",
+                                                    "display_name": "American Indian or Alaska Native"
+                                                  },
+                                                  {
+                                                    "value": "asian",
+                                                    "display_name": "Asian"
+                                                  },
+                                                  {
+                                                    "value": "black-or-african-american",
+                                                    "display_name": "Black or African American"
+                                                  },
+                                                  {
+                                                    "value": "hispanic-latin-spanish",
+                                                    "display_name": "Hispanic, Latin, or Spanish origin"
+                                                  },
+                                                  {
+                                                    "value": "middle-eastern-or-north-african",
+                                                    "display_name": "Middle Eastern or North African"
+                                                  },
+                                                  {
+                                                    "value": "native-hawaiian-or-pacific-islander",
+                                                    "display_name": "Native Hawaiian or Other Pacific Islander"
+                                                  },
+                                                  {
+                                                    "value": "white",
+                                                    "display_name": "White"
+                                                  },
+                                                  {
+                                                    "value": "other",
+                                                    "display_name": "Some other race, ethnicity, or origin"
+                                                  },
+                                                  {
+                                                    "value": "declined",
+                                                    "display_name": "Prefer not to respond"
+                                                  }
+                                            ]
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            },
+            formErrors: {},
+            intl: {},
+        };    
+        auth.getAuthenticatedHttpClient = jest.fn(() => ({
+            patch: async () => ({
+                data: { status: 200 },
+            catch: () => {},
+            }),
+        }));
+        auth.getAuthenticatedUser = jest.fn(() => ({ userId: 1 }));
+    });
+
+    it('should render', () => {
+        const wrapper = renderer.create(reduxWrapper(<IntlDemographicsSection {...props} />)).toJSON();
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    it('should render an Alert if an error occurs', () => {
+        props = {
+            ...props,
+            formErrors: {
+                demographicsError: "api-error"
+            }
+        };
+
+        const wrapper = renderer.create(reduxWrapper(<IntlDemographicsSection {...props} />)).toJSON();
+        expect(wrapper).toMatchSnapshot();
+    });
+    
+    it('should set user input correctly when user provides gender self-description', () => {
+        props = {
+            ...props,
+            formValues: {
+                ...props.formValues,
+                demographics_gender: 'self-describe',
+                demographics_gender_description: 'test',
+            },
+        }; 
+       
+       const wrapper = renderer.create(reduxWrapper(<IntlDemographicsSection {...props} />)).toJSON();
+       expect(wrapper).toMatchSnapshot();
+    });
+
+    it('should set user input correctly when user provides answers to work_status question', () => {
+        props = {
+            ...props,
+            formValues: {
+                ...props.formValues,
+                demographics_work_status: 'other',
+                demographics_work_status_description: 'test',
+            }
+        }
+
+        const wrapper = renderer.create(reduxWrapper(<IntlDemographicsSection {...props} />)).toJSON();
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    it('should render ethnicity text correctly', () => {
+        props = {
+            ...props,
+            formValues: {
+                ...props.formValues,
+                demographics_user_ethnicity: ['asian']
+            }
+        }
+        
+        const wrapper = renderer.create(reduxWrapper(<IntlDemographicsSection {...props} />)).toJSON();
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    it('should render ethnicity correctly when multiple options are selected', () => {
+        props = {
+            ...props,
+            formValues: {
+                ...props.formValues,
+                demographics_user_ethnicity: ['hispanic-latin-spanish', 'white']
+            }
+        }
+
+        const wrapper = renderer.create(reduxWrapper(<IntlDemographicsSection {...props} />)).toJSON();
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    it('should render an Alert when demographicsOptions props are empty', () => {
+        props = {
+            ...props,
+            formValues: {
+                demographicsOptions: ""
+            }
+        }
+
+        const wrapper = renderer.create(reduxWrapper(<IntlDemographicsSection {...props} />)).toJSON();
+        expect(wrapper).toMatchSnapshot();
+    });
+});

src/account-settings/demographics/test/__snapshots__/DemographicsSection.test.jsx.snap

@@ -0,0 +1,3688 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DemographicsSection should render 1`] = `
+<div
+  className="account-section"
+  id="demographics-information"
+>
+  <h2
+    className="section-heading"
+  >
+    Optional Information
+  </h2>
+  <p>
+    <a
+      href="http://localhost:5335/demographics"
+      target="_blank"
+    >
+      Why does edX collect this information?
+    </a>
+  </p>
+  <div
+    id="demographics-fields"
+  >
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Gender identity
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Race/Ethnicity identity
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            data-hj-suppress={true}
+          >
+            <button
+              className="btn btn-link p-0"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              Add race/ethnicity identity
+            </button>
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Family income
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              U.S. Military status
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Your education level
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Parents/Guardians education level
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Employment status
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Current work industry
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Future work industry
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
+<div
+  className="account-section"
+  id="demographics-information"
+>
+  <h2
+    className="section-heading"
+  >
+    Optional Information
+  </h2>
+  <p>
+    <a
+      href="http://localhost:5335/demographics"
+      target="_blank"
+    >
+      Why does edX collect this information?
+    </a>
+  </p>
+  <div
+    tabIndex="-1"
+  >
+    <div
+      className="alert d-flex align-items-start alert alert-danger"
+    >
+      <div />
+      <div>
+        <span>
+          An error occurred attempting to retrieve or save your account information. Please try again later.
+        </span>
+      </div>
+    </div>
+  </div>
+  <div
+    id="demographics-fields"
+  >
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Gender identity
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Race/Ethnicity identity
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            data-hj-suppress={true}
+          >
+            <button
+              className="btn btn-link p-0"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              Add race/ethnicity identity
+            </button>
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Family income
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              U.S. Military status
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Your education level
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Parents/Guardians education level
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Employment status
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Current work industry
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Future work industry
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`DemographicsSection should render an Alert when demographicsOptions props are empty 1`] = `
+<div
+  className="account-section"
+  id="demographics-information"
+>
+  <h2
+    className="section-heading"
+  >
+    Optional Information
+  </h2>
+  <p>
+    <a
+      href="http://localhost:5335/demographics"
+      target="_blank"
+    >
+      Why does edX collect this information?
+    </a>
+  </p>
+  <div
+    tabIndex="-1"
+  >
+    <div
+      className="alert d-flex align-items-start alert alert-danger"
+    >
+      <div />
+      <div>
+        <span>
+          An error occurred attempting to retrieve or save your account information. Please try again later.
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`DemographicsSection should render ethnicity correctly when multiple options are selected 1`] = `
+<div
+  className="account-section"
+  id="demographics-information"
+>
+  <h2
+    className="section-heading"
+  >
+    Optional Information
+  </h2>
+  <p>
+    <a
+      href="http://localhost:5335/demographics"
+      target="_blank"
+    >
+      Why does edX collect this information?
+    </a>
+  </p>
+  <div
+    id="demographics-fields"
+  >
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Gender identity
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Race/Ethnicity identity
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            data-hj-suppress={true}
+          >
+            Hispanic, Latin, or Spanish origin, White
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Family income
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              U.S. Military status
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Your education level
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Parents/Guardians education level
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Employment status
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Current work industry
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Future work industry
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`DemographicsSection should render ethnicity text correctly 1`] = `
+<div
+  className="account-section"
+  id="demographics-information"
+>
+  <h2
+    className="section-heading"
+  >
+    Optional Information
+  </h2>
+  <p>
+    <a
+      href="http://localhost:5335/demographics"
+      target="_blank"
+    >
+      Why does edX collect this information?
+    </a>
+  </p>
+  <div
+    id="demographics-fields"
+  >
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Gender identity
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Race/Ethnicity identity
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            data-hj-suppress={true}
+          >
+            Asian
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Family income
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              U.S. Military status
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Your education level
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Parents/Guardians education level
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Employment status
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Current work industry
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Future work industry
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`DemographicsSection should set user input correctly when user provides answers to work_status question 1`] = `
+<div
+  className="account-section"
+  id="demographics-information"
+>
+  <h2
+    className="section-heading"
+  >
+    Optional Information
+  </h2>
+  <p>
+    <a
+      href="http://localhost:5335/demographics"
+      target="_blank"
+    >
+      Why does edX collect this information?
+    </a>
+  </p>
+  <div
+    id="demographics-fields"
+  >
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Gender identity
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Race/Ethnicity identity
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            data-hj-suppress={true}
+          >
+            <button
+              className="btn btn-link p-0"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              Add race/ethnicity identity
+            </button>
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Family income
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              U.S. Military status
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Your education level
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Parents/Guardians education level
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Employment status
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            data-hj-suppress={true}
+          >
+            Other: test
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Current work industry
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Future work industry
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`DemographicsSection should set user input correctly when user provides gender self-description 1`] = `
+<div
+  className="account-section"
+  id="demographics-information"
+>
+  <h2
+    className="section-heading"
+  >
+    Optional Information
+  </h2>
+  <p>
+    <a
+      href="http://localhost:5335/demographics"
+      target="_blank"
+    >
+      Why does edX collect this information?
+    </a>
+  </p>
+  <div
+    id="demographics-fields"
+  >
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Gender identity
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            data-hj-suppress={true}
+          >
+            Prefer to self describe: test
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Race/Ethnicity identity
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            data-hj-suppress={true}
+          >
+            <button
+              className="btn btn-link p-0"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              Add race/ethnicity identity
+            </button>
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Family income
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              U.S. Military status
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Your education level
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Parents/Guardians education level
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Employment status
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Current work industry
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Future work industry
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

src/account-settings/test/JumpNav.test.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
+
+import JumpNav from "../JumpNav";
+import { BrowserRouter as Router } from 'react-router-dom';
+import { mergeConfig, setConfig } from '@edx/frontend-platform';
+
+const IntlJumpNav = injectIntl(JumpNav); 
+
+describe('JumpNav', () => {
+    mergeConfig({
+        ENABLE_DEMOGRAPHICS_COLLECTION: false,
+    });
+    
+    let props = {};
+    
+    beforeEach(() => {
+        props = {
+            intl: {},
+            displayDemographicsLink: false,
+        };
+    });
+    
+    it('should not render Optional Information link', () => {
+        const tree = renderer.create((
+            // Had to wrap the following in a router or I will receive an error stating:
+            // "Invariant failed: You should not use <NavLink> outside a <Router>"        
+            <Router>
+                <IntlProvider locale="en">
+                    <IntlJumpNav {...props} />
+                </IntlProvider>
+            </Router>
+        ))
+        .toJSON();
+
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('should render Optional Information link', () => {
+        setConfig({
+            ENABLE_DEMOGRAPHICS_COLLECTION: true,
+        });
+
+        props = {
+            ...props,
+            displayDemographicsLink: true,
+        }
+
+        const tree = renderer.create((
+            // Same as previous test
+            <Router>
+                <IntlProvider locale="en">
+                    <IntlJumpNav {...props} />
+                </IntlProvider>
+            </Router>
+        ))
+        .toJSON();
+
+        expect(tree).toMatchSnapshot();
+    });
+});

src/account-settings/test/__snapshots__/JumpNav.test.jsx.snap

@@ -0,0 +1,194 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`JumpNav should not render Optional Information link 1`] = `
+<div
+  className="jump-nav"
+>
+  <ul
+    className="list-unstyled"
+    style={Object {}}
+  >
+    <li
+      className=""
+    >
+      <a
+        aria-current="page"
+        className="active"
+        href="/#basic-information"
+        onClick={[Function]}
+        style={Object {}}
+      >
+        Account Information
+      </a>
+    </li>
+    <li
+      className=""
+    >
+      <a
+        aria-current="page"
+        className="active"
+        href="/#profile-information"
+        onClick={[Function]}
+        style={Object {}}
+      >
+        Profile Information
+      </a>
+    </li>
+    <li
+      className=""
+    >
+      <a
+        aria-current="page"
+        className="active"
+        href="/#social-media"
+        onClick={[Function]}
+        style={Object {}}
+      >
+        Social Media Links
+      </a>
+    </li>
+    <li
+      className=""
+    >
+      <a
+        aria-current="page"
+        className="active"
+        href="/#site-preferences"
+        onClick={[Function]}
+        style={Object {}}
+      >
+        Site Preferences
+      </a>
+    </li>
+    <li
+      className=""
+    >
+      <a
+        aria-current="page"
+        className="active"
+        href="/#linked-accounts"
+        onClick={[Function]}
+        style={Object {}}
+      >
+        Linked Accounts
+      </a>
+    </li>
+    <li
+      className=""
+    >
+      <a
+        aria-current="page"
+        className="active"
+        href="/#delete-account"
+        onClick={[Function]}
+        style={Object {}}
+      >
+        Delete My Account
+      </a>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`JumpNav should render Optional Information link 1`] = `
+<div
+  className="jump-nav"
+>
+  <ul
+    className="list-unstyled"
+    style={Object {}}
+  >
+    <li
+      className=""
+    >
+      <a
+        aria-current="page"
+        className="active"
+        href="/#basic-information"
+        onClick={[Function]}
+        style={Object {}}
+      >
+        Account Information
+      </a>
+    </li>
+    <li
+      className=""
+    >
+      <a
+        aria-current="page"
+        className="active"
+        href="/#profile-information"
+        onClick={[Function]}
+        style={Object {}}
+      >
+        Profile Information
+      </a>
+    </li>
+    <li
+      className=""
+    >
+      <a
+        aria-current="page"
+        className="active"
+        href="/#demographics-information"
+        onClick={[Function]}
+        style={Object {}}
+      >
+        Optional Information
+      </a>
+    </li>
+    <li
+      className=""
+    >
+      <a
+        aria-current="page"
+        className="active"
+        href="/#social-media"
+        onClick={[Function]}
+        style={Object {}}
+      >
+        Social Media Links
+      </a>
+    </li>
+    <li
+      className=""
+    >
+      <a
+        aria-current="page"
+        className="active"
+        href="/#site-preferences"
+        onClick={[Function]}
+        style={Object {}}
+      >
+        Site Preferences
+      </a>
+    </li>
+    <li
+      className=""
+    >
+      <a
+        aria-current="page"
+        className="active"
+        href="/#linked-accounts"
+        onClick={[Function]}
+        style={Object {}}
+      >
+        Linked Accounts
+      </a>
+    </li>
+    <li
+      className=""
+    >
+      <a
+        aria-current="page"
+        className="active"
+        href="/#delete-account"
+        onClick={[Function]}
+        style={Object {}}
+      >
+        Delete My Account
+      </a>
+    </li>
+  </ul>
+</div>
+`;

src/i18n/messages/ar.json

@@ -11,6 +11,7 @@
   "account.settings.section.account.information": "Account Information",
   "account.settings.section.account.information.description": "These settings include basic information about your account.",
   "account.settings.section.profile.information": "Profile Information",
+  "account.settings.section.demographics.information": "Optional Information",
   "account.settings.section.site.preferences": "Site Preferences",
   "account.settings.section.linked.accounts": "Linked Accounts",
   "account.settings.section.linked.accounts.description": "You can link your identity accounts to simplify signing in to edX.",
@@ -88,7 +89,7 @@
   "account.settings.coaching.consent.label.name": "Please confirm your name",
   "account.settings.coaching.consent.label.phone-number": "Enter your mobile number",
   "account.settings.coaching.consent.success.header": "Success!",
-  "account.settings.coaching.consent.success.message": "You're signed up for coaching. You will receive a text message confirmation.",
+  "account.settings.coaching.consent.success.message": "You're signed up for coaching. You can expect a message via email or SMS in the coming days.",
   "account.settings.coaching.consent.success.continue": "Start my course",
   "account.settings.coaching.managed.support": "support",
   "account.settings.coaching.managed.alert": "Your name is managed by {managerTitle}. Contact your administrator for help.",
@@ -116,11 +117,43 @@
   "account.settings.delete.account.modal.confirm.cancel": "Cancel",
   "account.settings.delete.account.error.unable.to.delete": "Unable to delete account",
   "account.settings.delete.account.error.no.password": "A password is required",
+  "account.settings.delete.account.error.invalid.password": "Password is incorrect",
   "account.settings.delete.account.error.unable.to.delete.details": "Sorry, there was an error trying to process your request. Please try again later.",
   "account.settings.delete.account.modal.after.header": "We're sorry to see you go!  Your account will be deleted shortly.",
   "account.settings.delete.account.modal.after.text": "Account deletion, including removal from email lists, may take a few weeks to fully process through our system. If you want to opt-out of emails before then, please unsubscribe from the footer of any email.",
   "account.settings.delete.account.modal.after.button": "Close",
   "account.settings.delete.account.text.3": "You may also lose access to verified certificates and other program credentials like MicroMasters certificates. If you want to make a copy of these for your records before proceeding with deletion, {actionLink}.",
+  "account.settings.message.demographics.service.issue": "An error occurred attempting to retrieve or save your account information. Please try again later.",
+  "account.settings.field.demographics.gender": "Gender identity",
+  "account.settings.field.demographics.gender.empty": "Add gender identity",
+  "account.settings.field.demographics.gender.options.empty": "Select a gender identity",
+  "account.settings.field.demographics.gender_description": "Gender identity description",
+  "account.settings.field.demographics.gender_description.empty": "Enter description",
+  "account.settings.field.demographics.ethnicity": "Race/Ethnicity identity",
+  "account.settings.field.demographics.ethnicity.empty": "Add race/ethnicity identity",
+  "account.settings.field.demographics.ethnicity.options.empty": "Select all that apply",
+  "account.settings.field.demographics.income": "Family income",
+  "account.settings.field.demographics.income.empty": "Add family income",
+  "account.settings.field.demographics.income.options.empty": "Select a family income range",
+  "account.settings.field.demographics.military_history": "U.S. Military status",
+  "account.settings.field.demographics.military_history.empty": "Add military status",
+  "account.settings.field.demographics.military_history.options.empty": "Select military status",
+  "account.settings.field.demographics.learner_education_level": "Your education level",
+  "account.settings.field.demographics.learner_education_level.empty": "Add education level",
+  "account.settings.field.demographics.parent_education_level": "Parents/Guardians education level",
+  "account.settings.field.demographics.parent_education_level.empty": "Add education level",
+  "account.settings.field.demographics.education_level.options.empty": "Select education level",
+  "account.settings.field.demographics.work_status": "Employment status",
+  "account.settings.field.demographics.work_status.empty": "Add employment status",
+  "account.settings.field.demographics.work_status.options.empty": "Select employment status",
+  "account.settings.field.demographics.work_status_description": "Employment status description",
+  "account.settings.field.demographics.work_status_description.empty": "Enter description",
+  "account.settings.field.demographics.current_work_sector": "Current work industry",
+  "account.settings.field.demographics.current_work_sector.empty": "Add work industry",
+  "account.settings.field.demographics.future_work_sector": "Future work industry",
+  "account.settings.field.demographics.future_work_sector.empty": "Add work industry",
+  "account.settings.field.demographics.work_sector.options.empty": "Select work industry",
+  "account.settings.section.demographics.why": "Why does edX collect this information?",
   "error.notfound.message": "The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again.",
   "account.settings.editable.field.password.reset.button.confirmation.support.link": "technical support",
   "account.settings.editable.field.password.reset.button.confirmation": "We've sent a message to {email}. Click the link in the message to reset your password. Didn't receive the message? Contact {technicalSupportLink}.",
@@ -131,5 +164,129 @@
   "account.settings.sso.account.connected": "Linked",
   "account.settings.sso.account.disconnect.error": "There was a problem disconnecting this account. Contact support if the problem persists.",
   "account.settings.sso.unlink.account": "Unlink {name} account",
-  "account.settings.sso.no.providers": "No accounts can be linked at this time."
+  "account.settings.sso.no.providers": "No accounts can be linked at this time.",
+  "id.verification.existing.request.denied.text": "You cannot verify your identity at this time. If you have yet to activate your account, please check your spam folder for the activation email from {email}.",
+  "id.verification.next": "Next",
+  "id.verification.requirements.title": "Photo Verification Requirements",
+  "id.verification.requirements.description": "In order to complete Photo Verification online, you will need the following:",
+  "id.verification.requirements.card.device.title": "Device with Camera",
+  "id.verification.requirements.card.device.allow": "Allow",
+  "id.verification.requirements.card.id.title": "Photo Identification",
+  "id.verification.requirements.card.id.text": "You need a valid ID that contains your full name and photo.",
+  "id.verification.privacy.title": "Privacy Information",
+  "id.verification.privacy.need.photo.question": "Why does edX need my photo?",
+  "id.verification.privacy.need.photo.answer": "We use your verification photos to confirm your identity and ensure the validity of your certificate.",
+  "id.verification.privacy.do.with.photo.question": "What does edX do with this photo?",
+  "id.verification.privacy.do.with.photo.answer": "We securely encrypt your photo and send it our authorization service for review. Your photo and information are not saved or visible anywhere on edX after the verification process is complete.",
+  "id.verification.existing.request.title": "Identity Verification",
+  "id.verification.existing.request.pending.text": "You have already submitted your verification information. You will see a message on your dashboard when the verification process is complete (usually within 5 days).",
+  "id.verification.photo.take": "Take Photo",
+  "id.verification.photo.retake": "Retake Photo",
+  "id.verification.photo.enable.detection": "Enable Face Detection",
+  "id.verification.photo.enable.detection.portrait.help.text": "If checked, a box will appear around your face. Your face can be seen clearly if the box around it is blue. If your face is not in a good position or undetectable, the box will be red.",
+  "id.verification.photo.enable.detection.id.help.text": "If checked, a box will appear around the face on your ID card. The face can be seen clearly if the box around it is blue. If the face is not in a good position or undetectable, the box will be red.",
+  "id.verification.photo.feedback.correct": "Face is in a good position.",
+  "id.verification.photo.feedback.two.faces": "More than one face detected.",
+  "id.verification.photo.feedback.no.faces": "No face detected.",
+  "id.verification.photo.feedback.top.left": "Incorrect position. Top left.",
+  "id.verification.photo.feedback.top.center": "Incorrect position. Top center.",
+  "id.verification.photo.feedback.top.right": "Incorrect position. Top right.",
+  "id.verification.photo.feedback.center.left": "Incorrect position. Center left.",
+  "id.verification.photo.feedback.center.center": "Incorrect position. Too close to camera.",
+  "id.verification.photo.feedback.center.right": "Incorrect position. Center right.",
+  "id.verification.photo.feedback.bottom.left": "Incorrect position. Bottom left.",
+  "id.verification.photo.feedback.bottom.center": "Incorrect position. Bottom center.",
+  "id.verification.photo.feedback.bottom.right": "Incorrect position. Bottom right.",
+  "id.verification.camera.access.title": "Camera Permissions",
+  "id.verification.camera.access.title.success": "Camera Access Enabled",
+  "id.verification.camera.access.title.failed": "Camera Access Failed",
+  "id.verification.camera.access.click.allow": "Please make sure to click \"Allow\"",
+  "id.verification.camera.access.enable": "Enable Camera",
+  "id.verification.camera.access.problems": "Having problems?",
+  "id.verification.camera.access.skip": "Skip and upload image files instead",
+  "id.verification.camera.access.success": "Looks like your camera is working and ready.",
+  "id.verification.camera.access.failure": "It looks like we're unable to access your camera. You will need to upload image files of you and your photo id.",
+  "id.verification.camera.access.failure.temporary": "It looks like we're unable to access your camera. Please verify that your webcam is connected and that you have allowed your browser to access it.",
+  "id.verification.camera.access.failure.temporary.chrome": "To enable camera access in Chrome:",
+  "id.verification.camera.access.failure.temporary.chrome.step1": "Open Chrome.",
+  "id.verification.camera.access.failure.temporary.chrome.step2": "Navigate to More > Settings.",
+  "id.verification.camera.access.failure.temporary.chrome.step2.windows": "For Windows: Alt+F, Alt+E, or F10 followed by the spacebar",
+  "id.verification.camera.access.failure.temporary.chrome.step2.mac": "For Mac: Command+,",
+  "id.verification.camera.access.failure.temporary.chrome.step3": "Under the \"Privacy and security\" tab, select \"Site Settings\" and then \"Camera.\"",
+  "id.verification.camera.access.failure.temporary.chrome.step4": "Under \"Blocked,\" find \"edx.org\" and select it.",
+  "id.verification.camera.access.failure.temporary.chrome.step5": "In the \"Permissions\" section, update the camera permissions to \"Allow.\"",
+  "id.verification.camera.access.failure.temporary.ie11": "To enable camera access in Internet Explorer:",
+  "id.verification.camera.access.failure.temporary.ie11.step1": "Open the Flash Player Settings Manager by navigating to Windows Settings > Control Panel > Flash Player.",
+  "id.verification.camera.access.failure.temporary.ie11.step2": "Select the \"Camera and Mic\" tab, and then select the \"Camera and Microphone Settings by Site\" button.",
+  "id.verification.camera.access.failure.temporary.ie11.step3": "Choose \"edx.org\" from the list of websites and change the permissions by selecting \"Allow\" in the dropdown menu.",
+  "id.verification.camera.access.failure.temporary.firefox": "To enable camera access in Firefox:",
+  "id.verification.camera.access.failure.temporary.firefox.step1": "Open Firefox.",
+  "id.verification.camera.access.failure.temporary.firefox.step2": "Enter \"about:preferences\" in the URL bar.",
+  "id.verification.camera.access.failure.temporary.firefox.step3": "Select the \"Privacy & Security\" tab, and navigate to the \"Permissions\" section.",
+  "id.verification.camera.access.failure.temporary.firefox.step4": "Next to \"Camera,\" select the \"Settings…\" button.",
+  "id.verification.camera.access.failure.temporary.firefox.step5": "In the search bar, enter \"edx.org.\"",
+  "id.verification.camera.access.failure.temporary.firefox.step6": "In the status column for \"edx.org,\" select \"Allow\" from the drop down.",
+  "id.verification.camera.access.failure.temporary.firefox.step7": "Select \"Save Changes.\"",
+  "id.verification.camera.access.failure.temporary.safari": "To enable camera access in Safari:",
+  "id.verification.camera.access.failure.temporary.safari.step1": "Open Safari.",
+  "id.verification.camera.access.failure.temporary.safari.step2": "Click on the Safari app menu, then select \"Preferences.\" You can also use Command+, as a keyboard shortcut.",
+  "id.verification.camera.access.failure.temporary.safari.step3": "Select the \"Websites\" tab and then select \"Camera.\"",
+  "id.verification.camera.access.failure.temporary.safari.step4": "Select \"edx.org\" and change the camera permissions to \"Allow.\"",
+  "id.verification.photo.tips.title": "Helpful Photo Tips",
+  "id.verification.photo.tips.description": "Next, we'll need you to take a photo of your face. Please review the helpful tips below.",
+  "id.verification.photo.tips.list.title": "Photo Tips",
+  "id.verification.photo.tips.list.description": "To take a successful photo, make sure that:",
+  "id.verification.photo.tips.list.well.lit": "Your face is well-lit.",
+  "id.verification.photo.tips.list.inside.frame": "Your entire face fits inside the frame.",
+  "id.verification.portrait.photo.title.camera": "Take a Photo of Yourself",
+  "id.verification.portrait.photo.title.upload": "Upload a Photo of Yourself",
+  "id.verification.portrait.photo.preview.alt": "Preview of photo of user's face.",
+  "id.verification.portrait.photo.instructions.camera": "When your face is in position, use the Take Photo button below to take your photo.",
+  "id.verification.portrait.photo.instructions.upload": "Please upload a portrait photo. Ensure your entire face fits inside the frame and is well-lit. (Supported formats: .jpg, .jpeg, .png)",
+  "id.verification.camera.help.sight.question": "What if I can't see the camera image or if I can't see my photo to determine which side is visible?",
+  "id.verification.camera.help.sight.answer.portrait": "You may be able to complete the image capture procedure without assistance, but it may take a couple of submission attempts to get the camera positioning right. Optimal camera positioning varies with each computer, but generally the best position for a headshot is approximately 12-18 inches (30-45 centimeters) from the camera, with your head centered relative to the computer screen. If the photos you submit are rejected, try moving the computer or camera orientation to change the lighting angle.",
+  "id.verification.camera.help.sight.answer.id": "You may be able to complete the image capture procedure without assistance, but it may take a couple of submission attempts to get the camera positioning right. Optimal camera positioning varies with each computer, but generally, the best position for a photo of an ID card is 8-12 inches (20-30 centimeters) from the camera, with the ID card centered relative to the camera. If the photos you submit are rejected, try moving the computer or camera orientation to change the lighting angle. The most common reason for rejection is inability to read the text on the ID card.",
+  "id.verification.camera.help.difficulty.question.portrait": "What if I have difficulty holding my head in position relative to the camera?",
+  "id.verification.camera.help.difficulty.question.id": "What if I have difficulty holding my ID in position relative to the camera?",
+  "id.verification.camera.help.difficulty.answer": "If you require assistance with taking a photo for submission, contact edX support for additional suggestions.",
+  "id.verification.id.photo.unclear.question": "Is your ID image not clear or too blurry?",
+  "id.verification.id.tips.title": "Helpful ID Tips",
+  "id.verification.id.tips.description": "Next, we'll need you to take a photo of a valid ID that includes your name. Please have your ID ready.",
+  "id.verification.id.tips.list.well.lit": "Your ID is well-lit.",
+  "id.verification.id.tips.list.clear": "Ensure that you can see your photo and clearly read your name.",
+  "id.verification.id.photo.title.camera": "Take a Photo of Your ID",
+  "id.verification.id.photo.title.upload": "Upload a Photo of Your ID",
+  "id.verification.id.photo.preview.alt": "Preview of photo ID.",
+  "id.verification.id.photo.instructions.camera": "When your ID is in position, use the Take Photo button below to take your photo.",
+  "id.verification.id.photo.instructions.upload": "Please upload an ID photo. Ensure the entire ID fits inside the frame and is well-lit. The file size must be under 10 MB. (Supported formats: .jpg, .jpeg, .png)",
+  "id.verification.id.photo.instructions.upload.error": "The file you have selected is too large. Please try again with a file less than 10MB.",
+  "id.verification.account.name.title": "Account Name Check",
+  "id.verification.account.name.instructions": "The name on your account and the name on your ID must be an exact match. If not, please click \"No\" to update your account name.",
+  "id.verification.account.name.radio.label": "Does the name on your ID match the Account Name below?",
+  "id.verification.account.name.radio.yes": "Yes",
+  "id.verification.account.name.radio.no": "No",
+  "id.verification.account.name.error": "Please update account name to match the name on your ID.",
+  "id.verification.account.name.warning.prefix": "Please Note:",
+  "id.verification.account.name.settings": "Account Settings",
+  "id.verification.account.name.label": "Account Name",
+  "id.verification.account.name.photo.alt": "Photo of your ID to be submitted.",
+  "id.verification.account.name.save": "Save and Next",
+  "id.verification.review.title": "Review Your Photos",
+  "id.verification.review.description": "Make sure we can verify your identity with the photos and information you have provided.",
+  "id.verification.review.portrait.label": "Your Portrait",
+  "id.verification.review.portrait.alt": "Photo of your face to be submitted.",
+  "id.verification.review.portrait.retake": "Retake Portrait Photo",
+  "id.verification.review.id.label": "Your Photo ID",
+  "id.verification.review.id.alt": "Photo of your ID to be submitted.",
+  "id.verification.review.id.retake": "Retake ID Photo",
+  "id.verification.review.confirm": "Submit",
+  "id.verification.review.error": "edX Support Page",
+  "id.verification.submitted.title": "Identity Verification in Progress",
+  "id.verification.submitted.text": "We have received your information and are verifying your identity. You will see a message on your dashboard when the verification process is complete (usually within 5 days). In the meantime, you can still access all available course content.",
+  "id.verification.return.dashboard": "Return to Your Dashboard",
+  "id.verification.return.course": "Return to Course",
+  "id.verification.request.camera.access.instructions": "In order to take a photo using your webcam, you may receive a browser prompt for access to your camera. {clickAllow}",
+  "id.verification.requirements.card.device.text": "You need a device that has a camera. If you receive a browser prompt for access to your camera, please make sure to click {allow}.",
+  "idv.submission.alert.error": "\n            We encountered a technical error while trying to submit ID verification.\n            This might be a temporary issue, so please try again in a few minutes.\n            If the problem persists,\n            please go to {support_link} for help.\n          ",
+  "id.verification.account.name.edit": "Edit{sr}"
 }

src/i18n/messages/es_419.json

@@ -11,6 +11,7 @@
   "account.settings.section.account.information": "Información de la cuenta",
   "account.settings.section.account.information.description": "Estas configuraciones incluyen información básica sobre tu cuenta.",
   "account.settings.section.profile.information": "Información del perfil",
+  "account.settings.section.demographics.information": "Información opcional",
   "account.settings.section.site.preferences": "Preferencias del sitio",
   "account.settings.section.linked.accounts": "Cuentas vinculadas",
   "account.settings.section.linked.accounts.description": "Puedes vincular tus cuentas de redes sociales para simplificar el proceso de iniciar sesión en edX.",
@@ -34,8 +35,8 @@
   "account.settings.field.country.empty": "Agregar país",
   "account.settings.field.country.options.empty": "Seleccionar un país",
   "account.settings.field.state": "Estado",
-  "account.settings.field.state.empty": "Add state",
-  "account.settings.field.state.options.empty": "Select a State",
+  "account.settings.field.state.empty": "Añada un estado",
+  "account.settings.field.state.options.empty": "Seleccionar un estado",
   "account.settings.field.site.language": "Idioma del sitio",
   "account.settings.field.site.language.help.text": "El idioma que se usará para el sitio. Actualmente solo hay disponibilidad de usar un número limitado de idiomas.",
   "account.settings.field.education": "Educación",
@@ -79,24 +80,24 @@
   "account.settings.editable.field.action.edit": "Editar",
   "account.settings.static.field.empty": "No hay valor establecido. Contacte su administrador {enterprise} para hacer cambios.",
   "account.settings.static.field.empty.no.admin": "No hay valor establecido.",
-  "account.settings.coaching.consent.welcome.header": "Let’s get started.",
-  "account.settings.coaching.consent.welcome.subheader": "We're here for you from start to finish",
-  "account.settings.coaching.consent.description": "MicroBachelors programs include coaching that focuses on your career, education, and how you'll achieve results through one-on-one communication with an experienced professional. If you’re interested, provide the information below and click “Submit,” and our coaching partner will connect with you via email and/or text message to help you move forward. Terms and conditions apply.*",
-  "account.settings.coaching.consent.text-messaging.disclaimer": "* Coaching services are included at no additional cost to learners with US phone numbers. Coaching includes recurring text messages. Message and data rates may apply. Text STOP to opt-out.",
-  "account.settings.coaching.consent.accept-coaching": "Sign up for coaching",
-  "account.settings.coaching.consent.decline-coaching": "I prefer not to be contacted with free coaching services",
-  "account.settings.coaching.consent.label.name": "Please confirm your name",
-  "account.settings.coaching.consent.label.phone-number": "Enter your mobile number",
-  "account.settings.coaching.consent.success.header": "Success!",
-  "account.settings.coaching.consent.success.message": "You're signed up for coaching. You will receive a text message confirmation.",
-  "account.settings.coaching.consent.success.continue": "Start my course",
+  "account.settings.coaching.consent.welcome.header": "Empecemos",
+  "account.settings.coaching.consent.welcome.subheader": "Estamos aquí para ustede desde el inicio hasta el final",
+  "account.settings.coaching.consent.description": "Los programas de MicroBachelors incluyen entrenamiento que se enfoca en su carrera, educación y cómo logrará resultados a través de la comunicación individual con un profesional experimentado. Si está interesado, proporcione la información a continuación y haga clic en \"Enviar\", y nuestro socio asesor se comunicará con usted por correo electrónico y / o mensaje de texto para ayudarlo a avanzar. Los términos y Condiciones aplican.*",
+  "account.settings.coaching.consent.text-messaging.disclaimer": "* Los servicios de entrenamiento se incluyen sin costo adicional para los alumnos con números de teléfono de EE. UU. El entrenamiento incluye mensajes de texto recurrentes. Se pueden aplicar tarifas por mensajes y datos. Envía STOP para cancelar la suscripción.",
+  "account.settings.coaching.consent.accept-coaching": "Registrarse para coaching",
+  "account.settings.coaching.consent.decline-coaching": "Prefiero no ser contactado con servicios de coaching gratuitos.",
+  "account.settings.coaching.consent.label.name": "Por favor confirme su nombre",
+  "account.settings.coaching.consent.label.phone-number": "Ingrese su número de teléfono móvil",
+  "account.settings.coaching.consent.success.header": "¡Éxito!",
+  "account.settings.coaching.consent.success.message": "You're signed up for coaching. You can expect a message via email or SMS in the coming days.",
+  "account.settings.coaching.consent.success.continue": "Iniciar mi curso",
   "account.settings.coaching.managed.support": "soporte",
-  "account.settings.coaching.managed.alert": "Your name is managed by {managerTitle}. Contact your administrator for help.",
+  "account.settings.coaching.managed.alert": "{ManagerTitle} administra su Nombre. Póngase en contacto con su administrador para obtener ayuda.",
   "account.settings.field.phone_number": "Teléfono",
-  "account.settings.field.phone_number.empty": "Add a phone number",
-  "account.settings.field.coaching_consent": "Coaching consent",
-  "account.settings.field.coaching_consent.tooltip": "MicroBachelors programs include text message based coaching that helps you pair educational experiences with your career goals through one-on-one advice. Coaching services are included at no additional cost, and are available to learners with U.S. mobile phone numbers. Standard messaging rates apply. Text ‘STOP’ at anytime to opt-out of messages.",
-  "account.settings.field.coaching_consent.error": "A valid US phone number is required to opt into coaching",
+  "account.settings.field.phone_number.empty": "Añadir un número de teléfono",
+  "account.settings.field.coaching_consent": "Consentimiento de coaching",
+  "account.settings.field.coaching_consent.tooltip": "Los programas de MicroBachelors incluyen entrenamiento basado en mensajes de texto que lo ayuda a emparejar experiencias educativas con sus objetivos profesionales a través de asesoramiento personalizado. Los servicios de entrenamiento se incluyen sin costo adicional y están disponibles para estudiantes con números de teléfono móvil de EE. UU. Se aplican tarifas de mensajería estándar. Envíe \"STOP\" en cualquier momento para cancelar la suscripción a los mensajes.",
+  "account.settings.field.coaching_consent.error": "Se requiere un número de teléfono válido de EE. UU. Para optar por el coaching",
   "account.settings.delete.account.before.proceeding": "Antes de continuar, por favor {actionLink}.",
   "account.settings.delete.account.header": "Eliminar mi cuenta",
   "account.settings.delete.account.subheader": "¡Sentimos que te vayas!",
@@ -116,20 +117,176 @@
   "account.settings.delete.account.modal.confirm.cancel": "Cancelar",
   "account.settings.delete.account.error.unable.to.delete": "No es posible eliminar esta cuenta",
   "account.settings.delete.account.error.no.password": "Se requiere una contraseña",
+  "account.settings.delete.account.error.invalid.password": "Contraseña incorrecta",
   "account.settings.delete.account.error.unable.to.delete.details": "Ocurrió un error al procesar tu solicitud. Por favor, intente nuevamente más tarde.",
   "account.settings.delete.account.modal.after.header": "¡Sentimos que te vayas! Tu cuenta será eliminada en breve.",
   "account.settings.delete.account.modal.after.text": "La eliminación de cuenta, incluyendo la eliminación de las listas de correo electrónico, puede tardar unas semanas en procesarse totalmente en nuestro sistema. Si quieres renunciar a recibir correos antes de que la eliminación se haya completado, por favor date de baja mediante el enlace que aparece al final de los correos.",
   "account.settings.delete.account.modal.after.button": "Cerrar",
   "account.settings.delete.account.text.3": "Puede que también pierdas el acceso a los certificados verificados y otros certificados de programas como los de los MicroMasters. Si quieres hacer una copia de dichos certificados para tus archivos antes de proceder a la eliminación, {actionLink}.",
+  "account.settings.message.demographics.service.issue": "Ocurrió un error al intentar recuperar o guardar la información de tu cuenta. Por favor inténtalo más tarde.",
+  "account.settings.field.demographics.gender": "Identidad de género",
+  "account.settings.field.demographics.gender.empty": "Añade identidad de género",
+  "account.settings.field.demographics.gender.options.empty": "Selecciona una identidad de género",
+  "account.settings.field.demographics.gender_description": "Descripción de identidad de género",
+  "account.settings.field.demographics.gender_description.empty": "Ingresa descripción",
+  "account.settings.field.demographics.ethnicity": "Identidad étnica/raza",
+  "account.settings.field.demographics.ethnicity.empty": "Añade identidad étnica/raza",
+  "account.settings.field.demographics.ethnicity.options.empty": "Selecciona todas las que apliquen",
+  "account.settings.field.demographics.income": "Ingreso familiar",
+  "account.settings.field.demographics.income.empty": "Añade ingreso familiar",
+  "account.settings.field.demographics.income.options.empty": "Selecciona un rango de ingreso familiar",
+  "account.settings.field.demographics.military_history": "Estatus militar en EE.UU.",
+  "account.settings.field.demographics.military_history.empty": "Add military status",
+  "account.settings.field.demographics.military_history.options.empty": "Selecciona estatus militar",
+  "account.settings.field.demographics.learner_education_level": "Tu nivel educacional",
+  "account.settings.field.demographics.learner_education_level.empty": "Añade nivel educacional",
+  "account.settings.field.demographics.parent_education_level": "Nivel educacional de padres/tutores",
+  "account.settings.field.demographics.parent_education_level.empty": "Añade nivel educacional",
+  "account.settings.field.demographics.education_level.options.empty": "Selecciona nivel educacional",
+  "account.settings.field.demographics.work_status": "Estatus laboral",
+  "account.settings.field.demographics.work_status.empty": "Añade estatus laboral",
+  "account.settings.field.demographics.work_status.options.empty": "Selecciona estatus laboral",
+  "account.settings.field.demographics.work_status_description": "Descripción estatus laboral",
+  "account.settings.field.demographics.work_status_description.empty": "Ingresa descripción",
+  "account.settings.field.demographics.current_work_sector": "Área profesional actual",
+  "account.settings.field.demographics.current_work_sector.empty": "Añade área profesional",
+  "account.settings.field.demographics.future_work_sector": "Área profesional futura",
+  "account.settings.field.demographics.future_work_sector.empty": "Añade área profesional",
+  "account.settings.field.demographics.work_sector.options.empty": "Selecciona área profesional",
+  "account.settings.section.demographics.why": "¿Por qué edX obtiene esta información?",
   "error.notfound.message": "La página que estas buscando no está disponible o hay un error en la URL. Por favor, comprueba la URL y vuelve a intentarlo.",
   "account.settings.editable.field.password.reset.button.confirmation.support.link": "soporte técnico",
   "account.settings.editable.field.password.reset.button.confirmation": "Hemos mandado un mensaje a {email}. Haz clic en el enlace en el mensaje para restablecer tu contraseña. ¿No recibiste el mensaje? Contáctate con {technicalSupportLink}.",
   "account.settings.editable.field.password.reset.button": "Restablecer contraseña",
-  "account.settings.editable.field.password.reset.button.forbidden": "Your previous request is in progress, please try again in few moments.",
+  "account.settings.editable.field.password.reset.button.forbidden": "Su solicitud anterior está en progreso, intente nuevamente en unos momentos.",
   "account.settings.editable.field.password.reset.label": "Contraseña",
   "account.settings.sso.link.account": "Iniciar sesión con {name}",
   "account.settings.sso.account.connected": "Vinculado",
   "account.settings.sso.account.disconnect.error": "Hubo un problema al desconectar esta Cuenta. Si el problema persiste, contacte soporte.",
   "account.settings.sso.unlink.account": "Desvincular la cuenta de {accountName} ",
-  "account.settings.sso.no.providers": "No se pueden vincular cuentas en este momento."
+  "account.settings.sso.no.providers": "No se pueden vincular cuentas en este momento.",
+  "id.verification.existing.request.denied.text": "You cannot verify your identity at this time. If you have yet to activate your account, please check your spam folder for the activation email from {email}.",
+  "id.verification.next": "Siguiente",
+  "id.verification.requirements.title": "Requerimientos de verificación por foto",
+  "id.verification.requirements.description": "Para completar la verificación por foto en línea, necesitarás lo siguiente:",
+  "id.verification.requirements.card.device.title": "Dispositivo con cámara",
+  "id.verification.requirements.card.device.allow": "Permitir",
+  "id.verification.requirements.card.id.title": "Identificación por foto",
+  "id.verification.requirements.card.id.text": "Necesitas un ID válido que contenga tu nombre completo y tu foto.",
+  "id.verification.privacy.title": "Privacy Information",
+  "id.verification.privacy.need.photo.question": "¿Por qué edX necesita mi foto?",
+  "id.verification.privacy.need.photo.answer": "Utilizamos tus fotos de verificación para confirmar tu identidad y garantizar la validez de tu certificado.",
+  "id.verification.privacy.do.with.photo.question": "¿Qué hace edX con esta foto?",
+  "id.verification.privacy.do.with.photo.answer": "We securely encrypt your photo and send it our authorization service for review. Your photo and information are not saved or visible anywhere on edX after the verification process is complete.",
+  "id.verification.existing.request.title": "Verificación de identidad",
+  "id.verification.existing.request.pending.text": "You have already submitted your verification information. You will see a message on your dashboard when the verification process is complete (usually within 5 days).",
+  "id.verification.photo.take": "Tomar la foto",
+  "id.verification.photo.retake": "Tomar nuevamente la foto",
+  "id.verification.photo.enable.detection": "Enable Face Detection",
+  "id.verification.photo.enable.detection.portrait.help.text": "If checked, a box will appear around your face. Your face can be seen clearly if the box around it is blue. If your face is not in a good position or undetectable, the box will be red.",
+  "id.verification.photo.enable.detection.id.help.text": "If checked, a box will appear around the face on your ID card. The face can be seen clearly if the box around it is blue. If the face is not in a good position or undetectable, the box will be red.",
+  "id.verification.photo.feedback.correct": "Face is in a good position.",
+  "id.verification.photo.feedback.two.faces": "More than one face detected.",
+  "id.verification.photo.feedback.no.faces": "No face detected.",
+  "id.verification.photo.feedback.top.left": "Incorrect position. Top left.",
+  "id.verification.photo.feedback.top.center": "Incorrect position. Top center.",
+  "id.verification.photo.feedback.top.right": "Incorrect position. Top right.",
+  "id.verification.photo.feedback.center.left": "Incorrect position. Center left.",
+  "id.verification.photo.feedback.center.center": "Incorrect position. Too close to camera.",
+  "id.verification.photo.feedback.center.right": "Incorrect position. Center right.",
+  "id.verification.photo.feedback.bottom.left": "Incorrect position. Bottom left.",
+  "id.verification.photo.feedback.bottom.center": "Incorrect position. Bottom center.",
+  "id.verification.photo.feedback.bottom.right": "Incorrect position. Bottom right.",
+  "id.verification.camera.access.title": "Permisos de la cámara",
+  "id.verification.camera.access.title.success": "Camera Access Enabled",
+  "id.verification.camera.access.title.failed": "Camera Access Failed",
+  "id.verification.camera.access.click.allow": "Por favor asegúrate de hacer clic en \"Permitir\"",
+  "id.verification.camera.access.enable": "Habilitar cámara",
+  "id.verification.camera.access.problems": "¿Tienes problemas?",
+  "id.verification.camera.access.skip": "Omitir y cargar un archivo de imagen",
+  "id.verification.camera.access.success": "Parece que tu cámara está funcionando y está lista.",
+  "id.verification.camera.access.failure": "It looks like we're unable to access your camera. You will need to upload image files of you and your photo id.",
+  "id.verification.camera.access.failure.temporary": "It looks like we're unable to access your camera. Please verify that your webcam is connected and that you have allowed your browser to access it.",
+  "id.verification.camera.access.failure.temporary.chrome": "To enable camera access in Chrome:",
+  "id.verification.camera.access.failure.temporary.chrome.step1": "Open Chrome.",
+  "id.verification.camera.access.failure.temporary.chrome.step2": "Navigate to More > Settings.",
+  "id.verification.camera.access.failure.temporary.chrome.step2.windows": "For Windows: Alt+F, Alt+E, or F10 followed by the spacebar",
+  "id.verification.camera.access.failure.temporary.chrome.step2.mac": "For Mac: Command+,",
+  "id.verification.camera.access.failure.temporary.chrome.step3": "Under the \"Privacy and security\" tab, select \"Site Settings\" and then \"Camera.\"",
+  "id.verification.camera.access.failure.temporary.chrome.step4": "Under \"Blocked,\" find \"edx.org\" and select it.",
+  "id.verification.camera.access.failure.temporary.chrome.step5": "In the \"Permissions\" section, update the camera permissions to \"Allow.\"",
+  "id.verification.camera.access.failure.temporary.ie11": "To enable camera access in Internet Explorer:",
+  "id.verification.camera.access.failure.temporary.ie11.step1": "Open the Flash Player Settings Manager by navigating to Windows Settings > Control Panel > Flash Player.",
+  "id.verification.camera.access.failure.temporary.ie11.step2": "Select the \"Camera and Mic\" tab, and then select the \"Camera and Microphone Settings by Site\" button.",
+  "id.verification.camera.access.failure.temporary.ie11.step3": "Choose \"edx.org\" from the list of websites and change the permissions by selecting \"Allow\" in the dropdown menu.",
+  "id.verification.camera.access.failure.temporary.firefox": "To enable camera access in Firefox:",
+  "id.verification.camera.access.failure.temporary.firefox.step1": "Open Firefox.",
+  "id.verification.camera.access.failure.temporary.firefox.step2": "Enter \"about:preferences\" in the URL bar.",
+  "id.verification.camera.access.failure.temporary.firefox.step3": "Select the \"Privacy & Security\" tab, and navigate to the \"Permissions\" section.",
+  "id.verification.camera.access.failure.temporary.firefox.step4": "Next to \"Camera,\" select the \"Settings…\" button.",
+  "id.verification.camera.access.failure.temporary.firefox.step5": "In the search bar, enter \"edx.org.\"",
+  "id.verification.camera.access.failure.temporary.firefox.step6": "In the status column for \"edx.org,\" select \"Allow\" from the drop down.",
+  "id.verification.camera.access.failure.temporary.firefox.step7": "Select \"Save Changes.\"",
+  "id.verification.camera.access.failure.temporary.safari": "To enable camera access in Safari:",
+  "id.verification.camera.access.failure.temporary.safari.step1": "Open Safari.",
+  "id.verification.camera.access.failure.temporary.safari.step2": "Click on the Safari app menu, then select \"Preferences.\" You can also use Command+, as a keyboard shortcut.",
+  "id.verification.camera.access.failure.temporary.safari.step3": "Select the \"Websites\" tab and then select \"Camera.\"",
+  "id.verification.camera.access.failure.temporary.safari.step4": "Select \"edx.org\" and change the camera permissions to \"Allow.\"",
+  "id.verification.photo.tips.title": "Consejos útiles de fotos",
+  "id.verification.photo.tips.description": "Next, we'll need you to take a photo of your face. Please review the helpful tips below.",
+  "id.verification.photo.tips.list.title": "Photo Tips",
+  "id.verification.photo.tips.list.description": "To take a successful photo, make sure that:",
+  "id.verification.photo.tips.list.well.lit": "Your face is well-lit.",
+  "id.verification.photo.tips.list.inside.frame": "Your entire face fits inside the frame.",
+  "id.verification.portrait.photo.title.camera": "Take a Photo of Yourself",
+  "id.verification.portrait.photo.title.upload": "Upload a Photo of Yourself",
+  "id.verification.portrait.photo.preview.alt": "Preview of photo of user's face.",
+  "id.verification.portrait.photo.instructions.camera": "When your face is in position, use the Take Photo button below to take your photo.",
+  "id.verification.portrait.photo.instructions.upload": "Please upload a portrait photo. Ensure your entire face fits inside the frame and is well-lit. (Supported formats: .jpg, .jpeg, .png)",
+  "id.verification.camera.help.sight.question": "What if I can't see the camera image or if I can't see my photo to determine which side is visible?",
+  "id.verification.camera.help.sight.answer.portrait": "You may be able to complete the image capture procedure without assistance, but it may take a couple of submission attempts to get the camera positioning right. Optimal camera positioning varies with each computer, but generally the best position for a headshot is approximately 12-18 inches (30-45 centimeters) from the camera, with your head centered relative to the computer screen. If the photos you submit are rejected, try moving the computer or camera orientation to change the lighting angle.",
+  "id.verification.camera.help.sight.answer.id": "You may be able to complete the image capture procedure without assistance, but it may take a couple of submission attempts to get the camera positioning right. Optimal camera positioning varies with each computer, but generally, the best position for a photo of an ID card is 8-12 inches (20-30 centimeters) from the camera, with the ID card centered relative to the camera. If the photos you submit are rejected, try moving the computer or camera orientation to change the lighting angle. The most common reason for rejection is inability to read the text on the ID card.",
+  "id.verification.camera.help.difficulty.question.portrait": "What if I have difficulty holding my head in position relative to the camera?",
+  "id.verification.camera.help.difficulty.question.id": "What if I have difficulty holding my ID in position relative to the camera?",
+  "id.verification.camera.help.difficulty.answer": "If you require assistance with taking a photo for submission, contact edX support for additional suggestions.",
+  "id.verification.id.photo.unclear.question": "Is your ID image not clear or too blurry?",
+  "id.verification.id.tips.title": "Helpful ID Tips",
+  "id.verification.id.tips.description": "Next, we'll need you to take a photo of a valid ID that includes your name. Please have your ID ready.",
+  "id.verification.id.tips.list.well.lit": "Your ID is well-lit.",
+  "id.verification.id.tips.list.clear": "Ensure that you can see your photo and clearly read your name.",
+  "id.verification.id.photo.title.camera": "Take a Photo of Your ID",
+  "id.verification.id.photo.title.upload": "Upload a Photo of Your ID",
+  "id.verification.id.photo.preview.alt": "Preview of photo ID.",
+  "id.verification.id.photo.instructions.camera": "When your ID is in position, use the Take Photo button below to take your photo.",
+  "id.verification.id.photo.instructions.upload": "Please upload an ID photo. Ensure the entire ID fits inside the frame and is well-lit. The file size must be under 10 MB. (Supported formats: .jpg, .jpeg, .png)",
+  "id.verification.id.photo.instructions.upload.error": "The file you have selected is too large. Please try again with a file less than 10MB.",
+  "id.verification.account.name.title": "Account Name Check",
+  "id.verification.account.name.instructions": "The name on your account and the name on your ID must be an exact match. If not, please click \"No\" to update your account name.",
+  "id.verification.account.name.radio.label": "Does the name on your ID match the Account Name below?",
+  "id.verification.account.name.radio.yes": "Yes",
+  "id.verification.account.name.radio.no": "No",
+  "id.verification.account.name.error": "Please update account name to match the name on your ID.",
+  "id.verification.account.name.warning.prefix": "Please Note:",
+  "id.verification.account.name.settings": "Account Settings",
+  "id.verification.account.name.label": "Account Name",
+  "id.verification.account.name.photo.alt": "Photo of your ID to be submitted.",
+  "id.verification.account.name.save": "Save and Next",
+  "id.verification.review.title": "Review Your Photos",
+  "id.verification.review.description": "Make sure we can verify your identity with the photos and information you have provided.",
+  "id.verification.review.portrait.label": "Your Portrait",
+  "id.verification.review.portrait.alt": "Photo of your face to be submitted.",
+  "id.verification.review.portrait.retake": "Retake Portrait Photo",
+  "id.verification.review.id.label": "Your Photo ID",
+  "id.verification.review.id.alt": "Photo of your ID to be submitted.",
+  "id.verification.review.id.retake": "Retake ID Photo",
+  "id.verification.review.confirm": "Submit",
+  "id.verification.review.error": "edX Support Page",
+  "id.verification.submitted.title": "Identity Verification in Progress",
+  "id.verification.submitted.text": "We have received your information and are verifying your identity. You will see a message on your dashboard when the verification process is complete (usually within 5 days). In the meantime, you can still access all available course content.",
+  "id.verification.return.dashboard": "Return to Your Dashboard",
+  "id.verification.return.course": "Return to Course",
+  "id.verification.request.camera.access.instructions": "In order to take a photo using your webcam, you may receive a browser prompt for access to your camera. {clickAllow}",
+  "id.verification.requirements.card.device.text": "You need a device that has a camera. If you receive a browser prompt for access to your camera, please make sure to click {allow}.",
+  "idv.submission.alert.error": "\n            We encountered a technical error while trying to submit ID verification.\n            This might be a temporary issue, so please try again in a few minutes.\n            If the problem persists,\n            please go to {support_link} for help.\n          ",
+  "id.verification.account.name.edit": "Edit{sr}"
 }

src/i18n/messages/fr.json

@@ -11,6 +11,7 @@
   "account.settings.section.account.information": "Account Information",
   "account.settings.section.account.information.description": "These settings include basic information about your account.",
   "account.settings.section.profile.information": "Profile Information",
+  "account.settings.section.demographics.information": "Optional Information",
   "account.settings.section.site.preferences": "Site Preferences",
   "account.settings.section.linked.accounts": "Linked Accounts",
   "account.settings.section.linked.accounts.description": "You can link your identity accounts to simplify signing in to edX.",
@@ -88,7 +89,7 @@
   "account.settings.coaching.consent.label.name": "Please confirm your name",
   "account.settings.coaching.consent.label.phone-number": "Enter your mobile number",
   "account.settings.coaching.consent.success.header": "Success!",
-  "account.settings.coaching.consent.success.message": "You're signed up for coaching. You will receive a text message confirmation.",
+  "account.settings.coaching.consent.success.message": "You're signed up for coaching. You can expect a message via email or SMS in the coming days.",
   "account.settings.coaching.consent.success.continue": "Start my course",
   "account.settings.coaching.managed.support": "support",
   "account.settings.coaching.managed.alert": "Your name is managed by {managerTitle}. Contact your administrator for help.",
@@ -116,11 +117,43 @@
   "account.settings.delete.account.modal.confirm.cancel": "Cancel",
   "account.settings.delete.account.error.unable.to.delete": "Unable to delete account",
   "account.settings.delete.account.error.no.password": "A password is required",
+  "account.settings.delete.account.error.invalid.password": "Password is incorrect",
   "account.settings.delete.account.error.unable.to.delete.details": "Sorry, there was an error trying to process your request. Please try again later.",
   "account.settings.delete.account.modal.after.header": "We're sorry to see you go!  Your account will be deleted shortly.",
   "account.settings.delete.account.modal.after.text": "Account deletion, including removal from email lists, may take a few weeks to fully process through our system. If you want to opt-out of emails before then, please unsubscribe from the footer of any email.",
   "account.settings.delete.account.modal.after.button": "Close",
   "account.settings.delete.account.text.3": "You may also lose access to verified certificates and other program credentials like MicroMasters certificates. If you want to make a copy of these for your records before proceeding with deletion, {actionLink}.",
+  "account.settings.message.demographics.service.issue": "An error occurred attempting to retrieve or save your account information. Please try again later.",
+  "account.settings.field.demographics.gender": "Gender identity",
+  "account.settings.field.demographics.gender.empty": "Add gender identity",
+  "account.settings.field.demographics.gender.options.empty": "Select a gender identity",
+  "account.settings.field.demographics.gender_description": "Gender identity description",
+  "account.settings.field.demographics.gender_description.empty": "Enter description",
+  "account.settings.field.demographics.ethnicity": "Race/Ethnicity identity",
+  "account.settings.field.demographics.ethnicity.empty": "Add race/ethnicity identity",
+  "account.settings.field.demographics.ethnicity.options.empty": "Select all that apply",
+  "account.settings.field.demographics.income": "Family income",
+  "account.settings.field.demographics.income.empty": "Add family income",
+  "account.settings.field.demographics.income.options.empty": "Select a family income range",
+  "account.settings.field.demographics.military_history": "U.S. Military status",
+  "account.settings.field.demographics.military_history.empty": "Add military status",
+  "account.settings.field.demographics.military_history.options.empty": "Select military status",
+  "account.settings.field.demographics.learner_education_level": "Your education level",
+  "account.settings.field.demographics.learner_education_level.empty": "Add education level",
+  "account.settings.field.demographics.parent_education_level": "Parents/Guardians education level",
+  "account.settings.field.demographics.parent_education_level.empty": "Add education level",
+  "account.settings.field.demographics.education_level.options.empty": "Select education level",
+  "account.settings.field.demographics.work_status": "Employment status",
+  "account.settings.field.demographics.work_status.empty": "Add employment status",
+  "account.settings.field.demographics.work_status.options.empty": "Select employment status",
+  "account.settings.field.demographics.work_status_description": "Employment status description",
+  "account.settings.field.demographics.work_status_description.empty": "Enter description",
+  "account.settings.field.demographics.current_work_sector": "Current work industry",
+  "account.settings.field.demographics.current_work_sector.empty": "Add work industry",
+  "account.settings.field.demographics.future_work_sector": "Future work industry",
+  "account.settings.field.demographics.future_work_sector.empty": "Add work industry",
+  "account.settings.field.demographics.work_sector.options.empty": "Select work industry",
+  "account.settings.section.demographics.why": "Why does edX collect this information?",
   "error.notfound.message": "The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again.",
   "account.settings.editable.field.password.reset.button.confirmation.support.link": "technical support",
   "account.settings.editable.field.password.reset.button.confirmation": "We've sent a message to {email}. Click the link in the message to reset your password. Didn't receive the message? Contact {technicalSupportLink}.",
@@ -131,5 +164,129 @@
   "account.settings.sso.account.connected": "Linked",
   "account.settings.sso.account.disconnect.error": "There was a problem disconnecting this account. Contact support if the problem persists.",
   "account.settings.sso.unlink.account": "Unlink {name} account",
-  "account.settings.sso.no.providers": "No accounts can be linked at this time."
+  "account.settings.sso.no.providers": "No accounts can be linked at this time.",
+  "id.verification.existing.request.denied.text": "You cannot verify your identity at this time. If you have yet to activate your account, please check your spam folder for the activation email from {email}.",
+  "id.verification.next": "Next",
+  "id.verification.requirements.title": "Photo Verification Requirements",
+  "id.verification.requirements.description": "In order to complete Photo Verification online, you will need the following:",
+  "id.verification.requirements.card.device.title": "Device with Camera",
+  "id.verification.requirements.card.device.allow": "Allow",
+  "id.verification.requirements.card.id.title": "Photo Identification",
+  "id.verification.requirements.card.id.text": "You need a valid ID that contains your full name and photo.",
+  "id.verification.privacy.title": "Privacy Information",
+  "id.verification.privacy.need.photo.question": "Why does edX need my photo?",
+  "id.verification.privacy.need.photo.answer": "We use your verification photos to confirm your identity and ensure the validity of your certificate.",
+  "id.verification.privacy.do.with.photo.question": "What does edX do with this photo?",
+  "id.verification.privacy.do.with.photo.answer": "We securely encrypt your photo and send it our authorization service for review. Your photo and information are not saved or visible anywhere on edX after the verification process is complete.",
+  "id.verification.existing.request.title": "Identity Verification",
+  "id.verification.existing.request.pending.text": "You have already submitted your verification information. You will see a message on your dashboard when the verification process is complete (usually within 5 days).",
+  "id.verification.photo.take": "Take Photo",
+  "id.verification.photo.retake": "Retake Photo",
+  "id.verification.photo.enable.detection": "Enable Face Detection",
+  "id.verification.photo.enable.detection.portrait.help.text": "If checked, a box will appear around your face. Your face can be seen clearly if the box around it is blue. If your face is not in a good position or undetectable, the box will be red.",
+  "id.verification.photo.enable.detection.id.help.text": "If checked, a box will appear around the face on your ID card. The face can be seen clearly if the box around it is blue. If the face is not in a good position or undetectable, the box will be red.",
+  "id.verification.photo.feedback.correct": "Face is in a good position.",
+  "id.verification.photo.feedback.two.faces": "More than one face detected.",
+  "id.verification.photo.feedback.no.faces": "No face detected.",
+  "id.verification.photo.feedback.top.left": "Incorrect position. Top left.",
+  "id.verification.photo.feedback.top.center": "Incorrect position. Top center.",
+  "id.verification.photo.feedback.top.right": "Incorrect position. Top right.",
+  "id.verification.photo.feedback.center.left": "Incorrect position. Center left.",
+  "id.verification.photo.feedback.center.center": "Incorrect position. Too close to camera.",
+  "id.verification.photo.feedback.center.right": "Incorrect position. Center right.",
+  "id.verification.photo.feedback.bottom.left": "Incorrect position. Bottom left.",
+  "id.verification.photo.feedback.bottom.center": "Incorrect position. Bottom center.",
+  "id.verification.photo.feedback.bottom.right": "Incorrect position. Bottom right.",
+  "id.verification.camera.access.title": "Camera Permissions",
+  "id.verification.camera.access.title.success": "Camera Access Enabled",
+  "id.verification.camera.access.title.failed": "Camera Access Failed",
+  "id.verification.camera.access.click.allow": "Please make sure to click \"Allow\"",
+  "id.verification.camera.access.enable": "Enable Camera",
+  "id.verification.camera.access.problems": "Having problems?",
+  "id.verification.camera.access.skip": "Skip and upload image files instead",
+  "id.verification.camera.access.success": "Looks like your camera is working and ready.",
+  "id.verification.camera.access.failure": "It looks like we're unable to access your camera. You will need to upload image files of you and your photo id.",
+  "id.verification.camera.access.failure.temporary": "It looks like we're unable to access your camera. Please verify that your webcam is connected and that you have allowed your browser to access it.",
+  "id.verification.camera.access.failure.temporary.chrome": "To enable camera access in Chrome:",
+  "id.verification.camera.access.failure.temporary.chrome.step1": "Open Chrome.",
+  "id.verification.camera.access.failure.temporary.chrome.step2": "Navigate to More > Settings.",
+  "id.verification.camera.access.failure.temporary.chrome.step2.windows": "For Windows: Alt+F, Alt+E, or F10 followed by the spacebar",
+  "id.verification.camera.access.failure.temporary.chrome.step2.mac": "For Mac: Command+,",
+  "id.verification.camera.access.failure.temporary.chrome.step3": "Under the \"Privacy and security\" tab, select \"Site Settings\" and then \"Camera.\"",
+  "id.verification.camera.access.failure.temporary.chrome.step4": "Under \"Blocked,\" find \"edx.org\" and select it.",
+  "id.verification.camera.access.failure.temporary.chrome.step5": "In the \"Permissions\" section, update the camera permissions to \"Allow.\"",
+  "id.verification.camera.access.failure.temporary.ie11": "To enable camera access in Internet Explorer:",
+  "id.verification.camera.access.failure.temporary.ie11.step1": "Open the Flash Player Settings Manager by navigating to Windows Settings > Control Panel > Flash Player.",
+  "id.verification.camera.access.failure.temporary.ie11.step2": "Select the \"Camera and Mic\" tab, and then select the \"Camera and Microphone Settings by Site\" button.",
+  "id.verification.camera.access.failure.temporary.ie11.step3": "Choose \"edx.org\" from the list of websites and change the permissions by selecting \"Allow\" in the dropdown menu.",
+  "id.verification.camera.access.failure.temporary.firefox": "To enable camera access in Firefox:",
+  "id.verification.camera.access.failure.temporary.firefox.step1": "Open Firefox.",
+  "id.verification.camera.access.failure.temporary.firefox.step2": "Enter \"about:preferences\" in the URL bar.",
+  "id.verification.camera.access.failure.temporary.firefox.step3": "Select the \"Privacy & Security\" tab, and navigate to the \"Permissions\" section.",
+  "id.verification.camera.access.failure.temporary.firefox.step4": "Next to \"Camera,\" select the \"Settings…\" button.",
+  "id.verification.camera.access.failure.temporary.firefox.step5": "In the search bar, enter \"edx.org.\"",
+  "id.verification.camera.access.failure.temporary.firefox.step6": "In the status column for \"edx.org,\" select \"Allow\" from the drop down.",
+  "id.verification.camera.access.failure.temporary.firefox.step7": "Select \"Save Changes.\"",
+  "id.verification.camera.access.failure.temporary.safari": "To enable camera access in Safari:",
+  "id.verification.camera.access.failure.temporary.safari.step1": "Open Safari.",
+  "id.verification.camera.access.failure.temporary.safari.step2": "Click on the Safari app menu, then select \"Preferences.\" You can also use Command+, as a keyboard shortcut.",
+  "id.verification.camera.access.failure.temporary.safari.step3": "Select the \"Websites\" tab and then select \"Camera.\"",
+  "id.verification.camera.access.failure.temporary.safari.step4": "Select \"edx.org\" and change the camera permissions to \"Allow.\"",
+  "id.verification.photo.tips.title": "Helpful Photo Tips",
+  "id.verification.photo.tips.description": "Next, we'll need you to take a photo of your face. Please review the helpful tips below.",
+  "id.verification.photo.tips.list.title": "Photo Tips",
+  "id.verification.photo.tips.list.description": "To take a successful photo, make sure that:",
+  "id.verification.photo.tips.list.well.lit": "Your face is well-lit.",
+  "id.verification.photo.tips.list.inside.frame": "Your entire face fits inside the frame.",
+  "id.verification.portrait.photo.title.camera": "Take a Photo of Yourself",
+  "id.verification.portrait.photo.title.upload": "Upload a Photo of Yourself",
+  "id.verification.portrait.photo.preview.alt": "Preview of photo of user's face.",
+  "id.verification.portrait.photo.instructions.camera": "When your face is in position, use the Take Photo button below to take your photo.",
+  "id.verification.portrait.photo.instructions.upload": "Please upload a portrait photo. Ensure your entire face fits inside the frame and is well-lit. (Supported formats: .jpg, .jpeg, .png)",
+  "id.verification.camera.help.sight.question": "What if I can't see the camera image or if I can't see my photo to determine which side is visible?",
+  "id.verification.camera.help.sight.answer.portrait": "You may be able to complete the image capture procedure without assistance, but it may take a couple of submission attempts to get the camera positioning right. Optimal camera positioning varies with each computer, but generally the best position for a headshot is approximately 12-18 inches (30-45 centimeters) from the camera, with your head centered relative to the computer screen. If the photos you submit are rejected, try moving the computer or camera orientation to change the lighting angle.",
+  "id.verification.camera.help.sight.answer.id": "You may be able to complete the image capture procedure without assistance, but it may take a couple of submission attempts to get the camera positioning right. Optimal camera positioning varies with each computer, but generally, the best position for a photo of an ID card is 8-12 inches (20-30 centimeters) from the camera, with the ID card centered relative to the camera. If the photos you submit are rejected, try moving the computer or camera orientation to change the lighting angle. The most common reason for rejection is inability to read the text on the ID card.",
+  "id.verification.camera.help.difficulty.question.portrait": "What if I have difficulty holding my head in position relative to the camera?",
+  "id.verification.camera.help.difficulty.question.id": "What if I have difficulty holding my ID in position relative to the camera?",
+  "id.verification.camera.help.difficulty.answer": "If you require assistance with taking a photo for submission, contact edX support for additional suggestions.",
+  "id.verification.id.photo.unclear.question": "Is your ID image not clear or too blurry?",
+  "id.verification.id.tips.title": "Helpful ID Tips",
+  "id.verification.id.tips.description": "Next, we'll need you to take a photo of a valid ID that includes your name. Please have your ID ready.",
+  "id.verification.id.tips.list.well.lit": "Your ID is well-lit.",
+  "id.verification.id.tips.list.clear": "Ensure that you can see your photo and clearly read your name.",
+  "id.verification.id.photo.title.camera": "Take a Photo of Your ID",
+  "id.verification.id.photo.title.upload": "Upload a Photo of Your ID",
+  "id.verification.id.photo.preview.alt": "Preview of photo ID.",
+  "id.verification.id.photo.instructions.camera": "When your ID is in position, use the Take Photo button below to take your photo.",
+  "id.verification.id.photo.instructions.upload": "Please upload an ID photo. Ensure the entire ID fits inside the frame and is well-lit. The file size must be under 10 MB. (Supported formats: .jpg, .jpeg, .png)",
+  "id.verification.id.photo.instructions.upload.error": "The file you have selected is too large. Please try again with a file less than 10MB.",
+  "id.verification.account.name.title": "Account Name Check",
+  "id.verification.account.name.instructions": "The name on your account and the name on your ID must be an exact match. If not, please click \"No\" to update your account name.",
+  "id.verification.account.name.radio.label": "Does the name on your ID match the Account Name below?",
+  "id.verification.account.name.radio.yes": "Yes",
+  "id.verification.account.name.radio.no": "No",
+  "id.verification.account.name.error": "Please update account name to match the name on your ID.",
+  "id.verification.account.name.warning.prefix": "Please Note:",
+  "id.verification.account.name.settings": "Account Settings",
+  "id.verification.account.name.label": "Account Name",
+  "id.verification.account.name.photo.alt": "Photo of your ID to be submitted.",
+  "id.verification.account.name.save": "Save and Next",
+  "id.verification.review.title": "Review Your Photos",
+  "id.verification.review.description": "Make sure we can verify your identity with the photos and information you have provided.",
+  "id.verification.review.portrait.label": "Your Portrait",
+  "id.verification.review.portrait.alt": "Photo of your face to be submitted.",
+  "id.verification.review.portrait.retake": "Retake Portrait Photo",
+  "id.verification.review.id.label": "Your Photo ID",
+  "id.verification.review.id.alt": "Photo of your ID to be submitted.",
+  "id.verification.review.id.retake": "Retake ID Photo",
+  "id.verification.review.confirm": "Submit",
+  "id.verification.review.error": "edX Support Page",
+  "id.verification.submitted.title": "Identity Verification in Progress",
+  "id.verification.submitted.text": "We have received your information and are verifying your identity. You will see a message on your dashboard when the verification process is complete (usually within 5 days). In the meantime, you can still access all available course content.",
+  "id.verification.return.dashboard": "Return to Your Dashboard",
+  "id.verification.return.course": "Return to Course",
+  "id.verification.request.camera.access.instructions": "In order to take a photo using your webcam, you may receive a browser prompt for access to your camera. {clickAllow}",
+  "id.verification.requirements.card.device.text": "You need a device that has a camera. If you receive a browser prompt for access to your camera, please make sure to click {allow}.",
+  "idv.submission.alert.error": "\n            We encountered a technical error while trying to submit ID verification.\n            This might be a temporary issue, so please try again in a few minutes.\n            If the problem persists,\n            please go to {support_link} for help.\n          ",
+  "id.verification.account.name.edit": "Edit{sr}"
 }

src/i18n/messages/zh_CN.json

@@ -11,6 +11,7 @@
   "account.settings.section.account.information": "Account Information",
   "account.settings.section.account.information.description": "These settings include basic information about your account.",
   "account.settings.section.profile.information": "Profile Information",
+  "account.settings.section.demographics.information": "Optional Information",
   "account.settings.section.site.preferences": "Site Preferences",
   "account.settings.section.linked.accounts": "Linked Accounts",
   "account.settings.section.linked.accounts.description": "You can link your identity accounts to simplify signing in to edX.",
@@ -88,7 +89,7 @@
   "account.settings.coaching.consent.label.name": "Please confirm your name",
   "account.settings.coaching.consent.label.phone-number": "Enter your mobile number",
   "account.settings.coaching.consent.success.header": "Success!",
-  "account.settings.coaching.consent.success.message": "You're signed up for coaching. You will receive a text message confirmation.",
+  "account.settings.coaching.consent.success.message": "You're signed up for coaching. You can expect a message via email or SMS in the coming days.",
   "account.settings.coaching.consent.success.continue": "Start my course",
   "account.settings.coaching.managed.support": "support",
   "account.settings.coaching.managed.alert": "Your name is managed by {managerTitle}. Contact your administrator for help.",
@@ -116,11 +117,43 @@
   "account.settings.delete.account.modal.confirm.cancel": "Cancel",
   "account.settings.delete.account.error.unable.to.delete": "Unable to delete account",
   "account.settings.delete.account.error.no.password": "A password is required",
+  "account.settings.delete.account.error.invalid.password": "Password is incorrect",
   "account.settings.delete.account.error.unable.to.delete.details": "Sorry, there was an error trying to process your request. Please try again later.",
   "account.settings.delete.account.modal.after.header": "We're sorry to see you go!  Your account will be deleted shortly.",
   "account.settings.delete.account.modal.after.text": "Account deletion, including removal from email lists, may take a few weeks to fully process through our system. If you want to opt-out of emails before then, please unsubscribe from the footer of any email.",
   "account.settings.delete.account.modal.after.button": "Close",
   "account.settings.delete.account.text.3": "You may also lose access to verified certificates and other program credentials like MicroMasters certificates. If you want to make a copy of these for your records before proceeding with deletion, {actionLink}.",
+  "account.settings.message.demographics.service.issue": "An error occurred attempting to retrieve or save your account information. Please try again later.",
+  "account.settings.field.demographics.gender": "Gender identity",
+  "account.settings.field.demographics.gender.empty": "Add gender identity",
+  "account.settings.field.demographics.gender.options.empty": "Select a gender identity",
+  "account.settings.field.demographics.gender_description": "Gender identity description",
+  "account.settings.field.demographics.gender_description.empty": "Enter description",
+  "account.settings.field.demographics.ethnicity": "Race/Ethnicity identity",
+  "account.settings.field.demographics.ethnicity.empty": "Add race/ethnicity identity",
+  "account.settings.field.demographics.ethnicity.options.empty": "Select all that apply",
+  "account.settings.field.demographics.income": "Family income",
+  "account.settings.field.demographics.income.empty": "Add family income",
+  "account.settings.field.demographics.income.options.empty": "Select a family income range",
+  "account.settings.field.demographics.military_history": "U.S. Military status",
+  "account.settings.field.demographics.military_history.empty": "Add military status",
+  "account.settings.field.demographics.military_history.options.empty": "Select military status",
+  "account.settings.field.demographics.learner_education_level": "Your education level",
+  "account.settings.field.demographics.learner_education_level.empty": "Add education level",
+  "account.settings.field.demographics.parent_education_level": "Parents/Guardians education level",
+  "account.settings.field.demographics.parent_education_level.empty": "Add education level",
+  "account.settings.field.demographics.education_level.options.empty": "Select education level",
+  "account.settings.field.demographics.work_status": "Employment status",
+  "account.settings.field.demographics.work_status.empty": "Add employment status",
+  "account.settings.field.demographics.work_status.options.empty": "Select employment status",
+  "account.settings.field.demographics.work_status_description": "Employment status description",
+  "account.settings.field.demographics.work_status_description.empty": "Enter description",
+  "account.settings.field.demographics.current_work_sector": "Current work industry",
+  "account.settings.field.demographics.current_work_sector.empty": "Add work industry",
+  "account.settings.field.demographics.future_work_sector": "Future work industry",
+  "account.settings.field.demographics.future_work_sector.empty": "Add work industry",
+  "account.settings.field.demographics.work_sector.options.empty": "Select work industry",
+  "account.settings.section.demographics.why": "Why does edX collect this information?",
   "error.notfound.message": "The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again.",
   "account.settings.editable.field.password.reset.button.confirmation.support.link": "technical support",
   "account.settings.editable.field.password.reset.button.confirmation": "We've sent a message to {email}. Click the link in the message to reset your password. Didn't receive the message? Contact {technicalSupportLink}.",
@@ -131,5 +164,129 @@
   "account.settings.sso.account.connected": "Linked",
   "account.settings.sso.account.disconnect.error": "There was a problem disconnecting this account. Contact support if the problem persists.",
   "account.settings.sso.unlink.account": "Unlink {name} account",
-  "account.settings.sso.no.providers": "No accounts can be linked at this time."
+  "account.settings.sso.no.providers": "No accounts can be linked at this time.",
+  "id.verification.existing.request.denied.text": "You cannot verify your identity at this time. If you have yet to activate your account, please check your spam folder for the activation email from {email}.",
+  "id.verification.next": "Next",
+  "id.verification.requirements.title": "Photo Verification Requirements",
+  "id.verification.requirements.description": "In order to complete Photo Verification online, you will need the following:",
+  "id.verification.requirements.card.device.title": "Device with Camera",
+  "id.verification.requirements.card.device.allow": "Allow",
+  "id.verification.requirements.card.id.title": "Photo Identification",
+  "id.verification.requirements.card.id.text": "You need a valid ID that contains your full name and photo.",
+  "id.verification.privacy.title": "Privacy Information",
+  "id.verification.privacy.need.photo.question": "Why does edX need my photo?",
+  "id.verification.privacy.need.photo.answer": "We use your verification photos to confirm your identity and ensure the validity of your certificate.",
+  "id.verification.privacy.do.with.photo.question": "What does edX do with this photo?",
+  "id.verification.privacy.do.with.photo.answer": "We securely encrypt your photo and send it our authorization service for review. Your photo and information are not saved or visible anywhere on edX after the verification process is complete.",
+  "id.verification.existing.request.title": "Identity Verification",
+  "id.verification.existing.request.pending.text": "You have already submitted your verification information. You will see a message on your dashboard when the verification process is complete (usually within 5 days).",
+  "id.verification.photo.take": "Take Photo",
+  "id.verification.photo.retake": "Retake Photo",
+  "id.verification.photo.enable.detection": "Enable Face Detection",
+  "id.verification.photo.enable.detection.portrait.help.text": "If checked, a box will appear around your face. Your face can be seen clearly if the box around it is blue. If your face is not in a good position or undetectable, the box will be red.",
+  "id.verification.photo.enable.detection.id.help.text": "If checked, a box will appear around the face on your ID card. The face can be seen clearly if the box around it is blue. If the face is not in a good position or undetectable, the box will be red.",
+  "id.verification.photo.feedback.correct": "Face is in a good position.",
+  "id.verification.photo.feedback.two.faces": "More than one face detected.",
+  "id.verification.photo.feedback.no.faces": "No face detected.",
+  "id.verification.photo.feedback.top.left": "Incorrect position. Top left.",
+  "id.verification.photo.feedback.top.center": "Incorrect position. Top center.",
+  "id.verification.photo.feedback.top.right": "Incorrect position. Top right.",
+  "id.verification.photo.feedback.center.left": "Incorrect position. Center left.",
+  "id.verification.photo.feedback.center.center": "Incorrect position. Too close to camera.",
+  "id.verification.photo.feedback.center.right": "Incorrect position. Center right.",
+  "id.verification.photo.feedback.bottom.left": "Incorrect position. Bottom left.",
+  "id.verification.photo.feedback.bottom.center": "Incorrect position. Bottom center.",
+  "id.verification.photo.feedback.bottom.right": "Incorrect position. Bottom right.",
+  "id.verification.camera.access.title": "Camera Permissions",
+  "id.verification.camera.access.title.success": "Camera Access Enabled",
+  "id.verification.camera.access.title.failed": "Camera Access Failed",
+  "id.verification.camera.access.click.allow": "Please make sure to click \"Allow\"",
+  "id.verification.camera.access.enable": "Enable Camera",
+  "id.verification.camera.access.problems": "Having problems?",
+  "id.verification.camera.access.skip": "Skip and upload image files instead",
+  "id.verification.camera.access.success": "Looks like your camera is working and ready.",
+  "id.verification.camera.access.failure": "It looks like we're unable to access your camera. You will need to upload image files of you and your photo id.",
+  "id.verification.camera.access.failure.temporary": "It looks like we're unable to access your camera. Please verify that your webcam is connected and that you have allowed your browser to access it.",
+  "id.verification.camera.access.failure.temporary.chrome": "To enable camera access in Chrome:",
+  "id.verification.camera.access.failure.temporary.chrome.step1": "Open Chrome.",
+  "id.verification.camera.access.failure.temporary.chrome.step2": "Navigate to More > Settings.",
+  "id.verification.camera.access.failure.temporary.chrome.step2.windows": "For Windows: Alt+F, Alt+E, or F10 followed by the spacebar",
+  "id.verification.camera.access.failure.temporary.chrome.step2.mac": "For Mac: Command+,",
+  "id.verification.camera.access.failure.temporary.chrome.step3": "Under the \"Privacy and security\" tab, select \"Site Settings\" and then \"Camera.\"",
+  "id.verification.camera.access.failure.temporary.chrome.step4": "Under \"Blocked,\" find \"edx.org\" and select it.",
+  "id.verification.camera.access.failure.temporary.chrome.step5": "In the \"Permissions\" section, update the camera permissions to \"Allow.\"",
+  "id.verification.camera.access.failure.temporary.ie11": "To enable camera access in Internet Explorer:",
+  "id.verification.camera.access.failure.temporary.ie11.step1": "Open the Flash Player Settings Manager by navigating to Windows Settings > Control Panel > Flash Player.",
+  "id.verification.camera.access.failure.temporary.ie11.step2": "Select the \"Camera and Mic\" tab, and then select the \"Camera and Microphone Settings by Site\" button.",
+  "id.verification.camera.access.failure.temporary.ie11.step3": "Choose \"edx.org\" from the list of websites and change the permissions by selecting \"Allow\" in the dropdown menu.",
+  "id.verification.camera.access.failure.temporary.firefox": "To enable camera access in Firefox:",
+  "id.verification.camera.access.failure.temporary.firefox.step1": "Open Firefox.",
+  "id.verification.camera.access.failure.temporary.firefox.step2": "Enter \"about:preferences\" in the URL bar.",
+  "id.verification.camera.access.failure.temporary.firefox.step3": "Select the \"Privacy & Security\" tab, and navigate to the \"Permissions\" section.",
+  "id.verification.camera.access.failure.temporary.firefox.step4": "Next to \"Camera,\" select the \"Settings…\" button.",
+  "id.verification.camera.access.failure.temporary.firefox.step5": "In the search bar, enter \"edx.org.\"",
+  "id.verification.camera.access.failure.temporary.firefox.step6": "In the status column for \"edx.org,\" select \"Allow\" from the drop down.",
+  "id.verification.camera.access.failure.temporary.firefox.step7": "Select \"Save Changes.\"",
+  "id.verification.camera.access.failure.temporary.safari": "To enable camera access in Safari:",
+  "id.verification.camera.access.failure.temporary.safari.step1": "Open Safari.",
+  "id.verification.camera.access.failure.temporary.safari.step2": "Click on the Safari app menu, then select \"Preferences.\" You can also use Command+, as a keyboard shortcut.",
+  "id.verification.camera.access.failure.temporary.safari.step3": "Select the \"Websites\" tab and then select \"Camera.\"",
+  "id.verification.camera.access.failure.temporary.safari.step4": "Select \"edx.org\" and change the camera permissions to \"Allow.\"",
+  "id.verification.photo.tips.title": "Helpful Photo Tips",
+  "id.verification.photo.tips.description": "Next, we'll need you to take a photo of your face. Please review the helpful tips below.",
+  "id.verification.photo.tips.list.title": "Photo Tips",
+  "id.verification.photo.tips.list.description": "To take a successful photo, make sure that:",
+  "id.verification.photo.tips.list.well.lit": "Your face is well-lit.",
+  "id.verification.photo.tips.list.inside.frame": "Your entire face fits inside the frame.",
+  "id.verification.portrait.photo.title.camera": "Take a Photo of Yourself",
+  "id.verification.portrait.photo.title.upload": "Upload a Photo of Yourself",
+  "id.verification.portrait.photo.preview.alt": "Preview of photo of user's face.",
+  "id.verification.portrait.photo.instructions.camera": "When your face is in position, use the Take Photo button below to take your photo.",
+  "id.verification.portrait.photo.instructions.upload": "Please upload a portrait photo. Ensure your entire face fits inside the frame and is well-lit. (Supported formats: .jpg, .jpeg, .png)",
+  "id.verification.camera.help.sight.question": "What if I can't see the camera image or if I can't see my photo to determine which side is visible?",
+  "id.verification.camera.help.sight.answer.portrait": "You may be able to complete the image capture procedure without assistance, but it may take a couple of submission attempts to get the camera positioning right. Optimal camera positioning varies with each computer, but generally the best position for a headshot is approximately 12-18 inches (30-45 centimeters) from the camera, with your head centered relative to the computer screen. If the photos you submit are rejected, try moving the computer or camera orientation to change the lighting angle.",
+  "id.verification.camera.help.sight.answer.id": "You may be able to complete the image capture procedure without assistance, but it may take a couple of submission attempts to get the camera positioning right. Optimal camera positioning varies with each computer, but generally, the best position for a photo of an ID card is 8-12 inches (20-30 centimeters) from the camera, with the ID card centered relative to the camera. If the photos you submit are rejected, try moving the computer or camera orientation to change the lighting angle. The most common reason for rejection is inability to read the text on the ID card.",
+  "id.verification.camera.help.difficulty.question.portrait": "What if I have difficulty holding my head in position relative to the camera?",
+  "id.verification.camera.help.difficulty.question.id": "What if I have difficulty holding my ID in position relative to the camera?",
+  "id.verification.camera.help.difficulty.answer": "If you require assistance with taking a photo for submission, contact edX support for additional suggestions.",
+  "id.verification.id.photo.unclear.question": "Is your ID image not clear or too blurry?",
+  "id.verification.id.tips.title": "Helpful ID Tips",
+  "id.verification.id.tips.description": "Next, we'll need you to take a photo of a valid ID that includes your name. Please have your ID ready.",
+  "id.verification.id.tips.list.well.lit": "Your ID is well-lit.",
+  "id.verification.id.tips.list.clear": "Ensure that you can see your photo and clearly read your name.",
+  "id.verification.id.photo.title.camera": "Take a Photo of Your ID",
+  "id.verification.id.photo.title.upload": "Upload a Photo of Your ID",
+  "id.verification.id.photo.preview.alt": "Preview of photo ID.",
+  "id.verification.id.photo.instructions.camera": "When your ID is in position, use the Take Photo button below to take your photo.",
+  "id.verification.id.photo.instructions.upload": "Please upload an ID photo. Ensure the entire ID fits inside the frame and is well-lit. The file size must be under 10 MB. (Supported formats: .jpg, .jpeg, .png)",
+  "id.verification.id.photo.instructions.upload.error": "The file you have selected is too large. Please try again with a file less than 10MB.",
+  "id.verification.account.name.title": "Account Name Check",
+  "id.verification.account.name.instructions": "The name on your account and the name on your ID must be an exact match. If not, please click \"No\" to update your account name.",
+  "id.verification.account.name.radio.label": "Does the name on your ID match the Account Name below?",
+  "id.verification.account.name.radio.yes": "Yes",
+  "id.verification.account.name.radio.no": "No",
+  "id.verification.account.name.error": "Please update account name to match the name on your ID.",
+  "id.verification.account.name.warning.prefix": "Please Note:",
+  "id.verification.account.name.settings": "Account Settings",
+  "id.verification.account.name.label": "Account Name",
+  "id.verification.account.name.photo.alt": "Photo of your ID to be submitted.",
+  "id.verification.account.name.save": "Save and Next",
+  "id.verification.review.title": "Review Your Photos",
+  "id.verification.review.description": "Make sure we can verify your identity with the photos and information you have provided.",
+  "id.verification.review.portrait.label": "Your Portrait",
+  "id.verification.review.portrait.alt": "Photo of your face to be submitted.",
+  "id.verification.review.portrait.retake": "Retake Portrait Photo",
+  "id.verification.review.id.label": "Your Photo ID",
+  "id.verification.review.id.alt": "Photo of your ID to be submitted.",
+  "id.verification.review.id.retake": "Retake ID Photo",
+  "id.verification.review.confirm": "Submit",
+  "id.verification.review.error": "edX Support Page",
+  "id.verification.submitted.title": "Identity Verification in Progress",
+  "id.verification.submitted.text": "We have received your information and are verifying your identity. You will see a message on your dashboard when the verification process is complete (usually within 5 days). In the meantime, you can still access all available course content.",
+  "id.verification.return.dashboard": "Return to Your Dashboard",
+  "id.verification.return.course": "Return to Course",
+  "id.verification.request.camera.access.instructions": "In order to take a photo using your webcam, you may receive a browser prompt for access to your camera. {clickAllow}",
+  "id.verification.requirements.card.device.text": "You need a device that has a camera. If you receive a browser prompt for access to your camera, please make sure to click {allow}.",
+  "idv.submission.alert.error": "\n            We encountered a technical error while trying to submit ID verification.\n            This might be a temporary issue, so please try again in a few minutes.\n            If the problem persists,\n            please go to {support_link} for help.\n          ",
+  "id.verification.account.name.edit": "Edit{sr}"
 }

src/id-verification/Camera.jsx

@@ -0,0 +1,360 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
+import * as blazeface from '@tensorflow-models/blazeface';
+import CameraPhoto, { FACING_MODES } from 'jslib-html5-camera-photo';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Form, Spinner } from '@edx/paragon';
+
+import shutter from './data/camera-shutter.base64.json';
+import messages from './IdVerification.messages';
+
+class Camera extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+    this.cameraPhoto = null;
+    this.videoRef = React.createRef();
+    this.canvasRef = React.createRef();
+    this.setDetection = this.setDetection.bind(this);
+    this.state = {
+      dataUri: '',
+      videoHasLoaded: false,
+      shouldDetect: false,
+      isFinishedLoadingDetection: true,
+      shouldGiveFeedback: true,
+      feedback: '',
+    };
+  }
+
+  componentDidMount() {
+    this.cameraPhoto = new CameraPhoto(this.videoRef.current);
+    this.cameraPhoto.startCamera(
+      this.props.isPortrait ? FACING_MODES.USER : FACING_MODES.ENVIRONMENT,
+      { width: 640, height: 480 },
+    );
+  }
+
+  async componentWillUnmount() {
+    this.cameraPhoto.stopCamera();
+  }
+
+  sendEvent() {
+    let eventName = 'edx.id_verification';
+    if (this.props.isPortrait) {
+      eventName += '.user_photo';
+    } else {
+      eventName += '.id_photo';
+    }
+
+    if (this.state.shouldDetect) {
+      eventName += '.face_detection_enabled';
+    } else {
+      eventName += '.face_detection_disabled';
+    }
+    sendTrackEvent(eventName);
+  }
+
+  setDetection() {
+    this.setState(
+      { shouldDetect: !this.state.shouldDetect },
+      () => {
+        if (this.state.shouldDetect) {
+          this.setState({ isFinishedLoadingDetection: false });
+          this.startDetection();
+        }
+        this.sendEvent();
+      },
+    );
+  }
+
+  startDetection() {
+    setTimeout(() => {
+      if (this.state.videoHasLoaded) {
+        const loadModelPromise = blazeface.load();
+        Promise.all([loadModelPromise])
+          .then((values) => {
+            this.setState({ isFinishedLoadingDetection: true });
+            this.detectFromVideoFrame(values[0], this.videoRef.current);
+          });
+      } else {
+        this.setState({ isFinishedLoadingDetection: true });
+        this.setState({ shouldDetect: false });
+        // TODO: add error message
+      }
+    }, 1000);
+  }
+
+  detectFromVideoFrame = (model, video) => {
+    model.estimateFaces(video).then((predictions) => {
+      if (this.state.shouldDetect && !this.state.dataUri) {
+        this.showDetections(predictions);
+
+        requestAnimationFrame(() => {
+          this.detectFromVideoFrame(model, video);
+        });
+      }
+    });
+  };
+
+  showDetections = (predictions) => {
+    let canvasContext;
+    if (predictions.length > 0) {
+      canvasContext = this.canvasRef.current.getContext('2d');
+      canvasContext.clearRect(0, 0, canvasContext.canvas.width, canvasContext.canvas.height);
+    }
+    // predictions is an array of objects describing each detected face
+    predictions.forEach((prediction) => {
+      const start = [prediction.topLeft[0], prediction.topLeft[1]];
+      const end = [prediction.bottomRight[0], prediction.bottomRight[1]];
+      const size = [end[0] - start[0], end[1] - start[1]];
+
+      // landmarks is an array of points representing each facial landmark (i.e. right eye, left eye, nose, etc.)
+      const features = prediction.landmarks;
+      let isInPosition = true;
+
+      // for each of the landmarks, determine if it is in position
+      for (let j = 0; j < features.length; j++) {
+        const x = features[j][0];
+        const y = features[j][1];
+
+        let isInRange;
+        if (this.props.isPortrait) {
+          isInRange = this.isInRangeForPortrait(x, y);
+        } else {
+          isInRange = this.isInRangeForID(x, y);
+        }
+        // if it is not in range, give feedback depending on which feature is out of range
+        isInPosition = isInPosition && isInRange;
+      }
+
+      // draw a box depending on if all landmarks are in position
+      if (isInPosition) {
+        canvasContext.strokeStyle = '#00ffff';
+        canvasContext.lineWidth = 6;
+        canvasContext.strokeRect(start[0], start[1], size[0], size[1]);
+        // give positive feedback here if user is in correct position
+        this.giveFeedback(predictions.length, [], true);
+      } else {
+        canvasContext.fillStyle = 'rgba(255, 51, 0, 0.75)';
+        canvasContext.fillRect(start[0], start[1], size[0], size[1]);
+        this.giveFeedback(predictions.length, features[0], false);
+      }
+    });
+
+    if (predictions.length === 0) {
+      this.giveFeedback(predictions.length, [], false);
+    }
+  }
+
+  giveFeedback(numFaces, rightEye, isCorrect) {
+    if (this.state.shouldGiveFeedback) {
+      const currentFeedback = this.state.feedback;
+      let newFeedback = '';
+      if (numFaces === 1) {
+        // only give feedback if one face is detected otherwise
+        // it would be difficult to tell a user which face to move
+        if (isCorrect) {
+          newFeedback = this.props.intl.formatMessage(messages['id.verification.photo.feedback.correct']);
+        } else {
+          // give feedback based on where user is
+          newFeedback = this.props.intl.formatMessage(messages[this.getGridPosition(rightEye)]);
+        }
+      } else if (numFaces > 1) {
+        newFeedback = this.props.intl.formatMessage(messages['id.verification.photo.feedback.two.faces']);
+      } else {
+        newFeedback = this.props.intl.formatMessage(messages['id.verification.photo.feedback.no.faces']);
+      }
+      if (currentFeedback !== newFeedback) {
+        // only update status if it is different, so we don't overload the user with status updates
+        this.setState({ feedback: newFeedback });
+      }
+      // turn off feedback for one to ensure that instructions aren't disruptive/interrupting
+      this.setState({ shouldGiveFeedback: false });
+      setTimeout(() => {
+        this.setState({ shouldGiveFeedback: true });
+      }, 1000);
+    }
+  }
+
+  getGridPosition(coordinates) {
+    // Used to determine where a face is (i.e. top-left, center-right, bottom-center, etc.)
+
+    const x = coordinates[0];
+    const y = coordinates[1];
+
+    let messageBase = 'id.verification.photo.feedback';
+
+    const heightUpperLimit = 320;
+    const heightMiddleLimit = 160;
+
+    if (y < heightMiddleLimit) {
+      messageBase += '.top';
+    } else if (y < heightUpperLimit && y >= heightMiddleLimit) {
+      messageBase += '.center';
+    } else {
+      messageBase += '.bottom';
+    }
+
+    const widthRightLimit = 213;
+    const widthMiddleLimit = 427;
+
+    if (x < widthRightLimit) {
+      messageBase += '.right';
+    } else if (x >= widthRightLimit && x < widthMiddleLimit) {
+      messageBase += '.center';
+    } else {
+      messageBase += '.left';
+    }
+
+    return messageBase;
+  }
+
+  isInRangeForPortrait(x, y) {
+    return x > 47 && x < 570 && y > 100 && y < 410;
+  }
+
+  isInRangeForID(x, y) {
+    return x > 120 && x < 470 && y > 120 && y < 350;
+  }
+
+  setVideoHasLoaded() {
+    this.setState({ videoHasLoaded: 'true' });
+  }
+
+  takePhoto() {
+    if (this.state.dataUri) {
+      return this.reset();
+    }
+
+    const config = {
+      sizeFactor: this.getSizeFactor(),
+    };
+
+    this.playShutterClick();
+    const dataUri = this.cameraPhoto.getDataUri(config);
+    this.setState({ dataUri });
+    this.props.onImageCapture(dataUri);
+  }
+
+  getSizeFactor() {
+    let sizeFactor = 1;
+    const settings = this.cameraPhoto.getCameraSettings();
+    if (settings) {
+      const videoWidth = settings.width;
+      const videoHeight = settings.height;
+      // need to multiply by 3 because each pixel contains 3 bytes
+      const currentSize = videoWidth * videoHeight * 3;
+      // chose a limit of 9,999,999 (bytes) so that result will
+      // always be less than 10MB
+      const ratio = 9999999 / currentSize;
+
+      if (ratio < 1) {
+        // if the current resolution creates an image larger than 10 MB, adjust sizeFactor (resolution)
+        // to ensure that image will have a file size of less than 10 MB.
+        sizeFactor = ratio;
+      } else if (videoWidth === 640 && videoHeight === 480) {
+        // otherwise increase the resolution to try and prevent blurry images.
+        sizeFactor = 2;
+      }
+    }
+    return sizeFactor;
+  }
+
+  playShutterClick() {
+    const audio = new Audio(`data:audio/mp3;base64,${shutter.base64}`);
+    audio.play();
+  }
+
+  reset() {
+    this.setState({ dataUri: '' });
+    if (this.state.shouldDetect) {
+      this.startDetection();
+    }
+  }
+
+  render() {
+    const cameraFlashClass = this.state.dataUri
+      ? 'do-transition camera-flash'
+      : 'camera-flash';
+    return (
+      <div className="camera-outer-wrapper shadow">
+        <Form.Group style={{ textAlign: 'left', padding: '0.5rem', marginBottom: '0.5rem' }} >
+          <Form.Check
+            id="videoDetection"
+            name="videoDetection"
+            label={this.props.intl.formatMessage(messages['id.verification.photo.enable.detection'])}
+            aria-describedby="videoDetectionHelpText"
+            checked={this.state.shouldDetect}
+            onChange={this.setDetection}
+            style={{ padding: '0rem', marginLeft: '1.25rem', float: this.state.isFinishedLoadingDetection ? 'none' : 'left' }}
+          />
+          {!this.state.isFinishedLoadingDetection && <Spinner animation="border" variant="primary" style={{ marginLeft: '0.5rem' }} data-testid="spinner" />}
+          <Form.Text id="videoDetectionHelpText" data-testid="videoDetectionHelpText">
+            {this.props.isPortrait
+              ? this.props.intl.formatMessage(messages['id.verification.photo.enable.detection.portrait.help.text'])
+              : this.props.intl.formatMessage(messages['id.verification.photo.enable.detection.id.help.text'])}
+          </Form.Text>
+        </Form.Group>
+        <div className="camera-wrapper">
+          <div className={cameraFlashClass} />
+          <video
+            ref={this.videoRef}
+            data-testid="video"
+            autoPlay
+            className="camera-video"
+            onLoadedData={() => { this.setVideoHasLoaded(); }}
+            style={{
+              display: this.state.dataUri ? 'none' : 'block',
+              WebkitTransform: 'scaleX(-1)',
+              transform: 'scaleX(-1)',
+            }}
+            playsInline
+          />
+          <canvas
+            ref={this.canvasRef}
+            data-testid="detection-canvas"
+            className="canvas-video"
+            style={{
+              display: !this.state.shouldDetect || this.state.dataUri ? 'none' : 'block',
+              WebkitTransform: 'scaleX(-1)',
+              transform: 'scaleX(-1)',
+            }}
+            width="640"
+            height="480"
+          />
+          <img
+            data-hj-suppress
+            alt="imgCamera"
+            src={this.state.dataUri}
+            className="camera-video"
+            style={{ display: this.state.dataUri ? 'block' : 'none' }}
+          />
+          <div role="status" className="sr-only">{this.state.feedback}</div>
+        </div>
+        <button
+          className={`btn camera-btn ${
+            this.state.dataUri ?
+              'btn-outline-primary'
+              : 'btn-primary'
+          }`}
+          accessKey="c"
+          onClick={() => {
+            this.takePhoto();
+          }}
+        >
+          {this.state.dataUri
+            ? this.props.intl.formatMessage(messages['id.verification.photo.retake'])
+            : this.props.intl.formatMessage(messages['id.verification.photo.take'])}
+        </button>
+      </div>
+    );
+  }
+}
+
+Camera.propTypes = {
+  intl: intlShape.isRequired,
+  onImageCapture: PropTypes.func.isRequired,
+  isPortrait: PropTypes.bool.isRequired,
+};
+
+export default injectIntl(Camera);

src/id-verification/CameraHelp.jsx

@@ -0,0 +1,47 @@
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Collapsible } from '@edx/paragon';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import messages from './IdVerification.messages';
+
+function CameraHelp(props) {
+  return (
+    <div>
+      <Collapsible
+        styling="card"
+        title={props.intl.formatMessage(messages['id.verification.camera.help.sight.question'])}
+        className="mb-4 shadow"
+        defaultOpen={props.isOpen}
+      >
+        <p>
+          {props.intl.formatMessage(messages[`id.verification.camera.help.sight.answer.${props.isPortrait ? 'portrait' : 'id'}`])}
+        </p>
+      </Collapsible>
+      <Collapsible
+        styling="card"
+        title={props.intl.formatMessage(messages[`id.verification.camera.help.difficulty.question.${props.isPortrait ? 'portrait' : 'id'}`])}
+        className="mb-4 shadow"
+        defaultOpen={props.isOpen}
+      >
+        <p>
+          {props.intl.formatMessage(messages['id.verification.camera.help.difficulty.answer'])}
+        </p>
+      </Collapsible>
+    </div>
+  );
+}
+
+CameraHelp.propTypes = {
+  intl: intlShape.isRequired,
+  isOpen: PropTypes.bool,
+  isPortrait: PropTypes.bool,
+};
+
+CameraHelp.defaultProps = {
+  isOpen: false,
+  isPortrait: false,
+};
+
+export default injectIntl(CameraHelp);

src/id-verification/CameraHelpWithUpload.jsx

@@ -0,0 +1,53 @@
+import React, { useState, useContext } from 'react';
+import PropTypes from 'prop-types';
+import { Collapsible } from '@edx/paragon';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
+
+import messages from './IdVerification.messages';
+import ImageFileUpload from './ImageFileUpload';
+import { IdVerificationContext } from './IdVerificationContext';
+import ImagePreview from './ImagePreview';
+
+function CameraHelpWithUpload(props) {
+  const { setIdPhotoFile, idPhotoFile, userId } = useContext(IdVerificationContext);
+  const [hasUploadedImage, setHasUploadedImage] = useState(false);
+
+  function setAndTrackIdPhotoFile(image) {
+    sendTrackEvent('edx.id_verification.upload_id', {
+      category: 'id_verification',
+      user_id: userId,
+    });
+    setHasUploadedImage(true);
+    setIdPhotoFile(image);
+  }
+
+  return (
+    <div>
+      <Collapsible
+        styling="card"
+        title={props.intl.formatMessage(messages['id.verification.id.photo.unclear.question'])}
+        data-testid="collapsible"
+        className="mb-4 shadow"
+        defaultOpen={props.isOpen}
+      >
+        {idPhotoFile && hasUploadedImage && <ImagePreview src={idPhotoFile} alt={props.intl.formatMessage(messages['id.verification.id.photo.preview.alt'])} />}
+        <p>
+          {props.intl.formatMessage(messages['id.verification.id.photo.instructions.upload'])}
+        </p>
+        <ImageFileUpload onFileChange={setAndTrackIdPhotoFile} intl={props.intl} />
+      </Collapsible>
+    </div>
+  );
+}
+
+CameraHelpWithUpload.propTypes = {
+  intl: intlShape.isRequired,
+  isOpen: PropTypes.bool,
+};
+
+CameraHelpWithUpload.defaultProps = {
+  isOpen: false,
+};
+
+export default injectIntl(CameraHelpWithUpload);

src/id-verification/ExistingRequest.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { getConfig } from '@edx/frontend-platform';
+import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
+
+import messages from './IdVerification.messages';
+
+function ExistingRequest(props) {
+  return (
+    <div>
+      <h3 aria-level="1" tabIndex="-1">
+        {props.intl.formatMessage(messages['id.verification.existing.request.title'])}
+      </h3>
+      {props.status === 'pending' || props.status === 'approved'
+        ? <p>{props.intl.formatMessage(messages['id.verification.existing.request.pending.text'])}</p>
+        : <FormattedMessage
+          id="id.verification.existing.request.denied.text"
+          defaultMessage="You cannot verify your identity at this time. If you have yet to activate your account, please check your spam folder for the activation email from {email}."
+          description="Text that displays when user is denied from making a request, and to check their email for an activation email."
+          values={{
+            email: <strong>no-reply@registration.edx.org</strong>,
+          }}
+        />
+        }
+      <div className="action-row">
+        <a className="btn btn-primary mt-3" href={`${getConfig().LMS_BASE_URL}/dashboard`}>
+          {props.intl.formatMessage(messages['id.verification.return.dashboard'])}
+        </a>
+      </div>
+    </div>
+  );
+}
+
+ExistingRequest.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(ExistingRequest);

src/id-verification/IdVerification.messages.js

@@ -0,0 +1,601 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  'id.verification.next': {
+    id: 'id.verification.next',
+    defaultMessage: 'Next',
+    description: 'Next button.',
+  },
+  'id.verification.requirements.title': {
+    id: 'id.verification.requirements.title',
+    defaultMessage: 'Photo Verification Requirements',
+    description: 'Title for the Photo Verification Requirements page.',
+  },
+  'id.verification.requirements.description': {
+    id: 'id.verification.requirements.description',
+    defaultMessage: 'In order to complete Photo Verification online, you will need the following:',
+    description: 'Description for the Photo Verification Requirements page.',
+  },
+  'id.verification.requirements.card.device.title': {
+    id: 'id.verification.requirements.card.device.title',
+    defaultMessage: 'Device with Camera',
+    description: 'Title for the Device with Camera card.',
+  },
+  'id.verification.requirements.card.device.allow': {
+    id: 'id.verification.requirements.card.device.allow',
+    defaultMessage: 'Allow',
+    description: 'Bold text emphasizing that the user needs to click "allow" in order to enable the camera.',
+  },
+  'id.verification.requirements.card.id.title': {
+    id: 'id.verification.requirements.card.id.title',
+    defaultMessage: 'Photo Identification',
+    description: 'Title for the Photo Identification requirement card.',
+  },
+  'id.verification.requirements.card.id.text': {
+    id: 'id.verification.requirements.card.id.text',
+    defaultMessage: 'You need a valid ID that contains your full name and photo.',
+    description: 'Text that explains that the user needs a photo ID.',
+  },
+  'id.verification.privacy.title': {
+    id: 'id.verification.privacy.title',
+    defaultMessage: 'Privacy Information',
+    description: 'Title for Privacy Information.',
+  },
+  'id.verification.privacy.need.photo.question': {
+    id: 'id.verification.privacy.need.photo.question',
+    defaultMessage: 'Why does edX need my photo?',
+    description: 'Question about why edX needs a verification photo.',
+  },
+  'id.verification.privacy.need.photo.answer': {
+    id: 'id.verification.privacy.need.photo.answer',
+    defaultMessage: 'We use your verification photos to confirm your identity and ensure the validity of your certificate.',
+    description: 'Answering why edX needs a verification photo.',
+  },
+  'id.verification.privacy.do.with.photo.question': {
+    id: 'id.verification.privacy.do.with.photo.question',
+    defaultMessage: 'What does edX do with this photo?',
+    description: 'Question about what edX does with the verification photo.',
+  },
+  'id.verification.privacy.do.with.photo.answer': {
+    id: 'id.verification.privacy.do.with.photo.answer',
+    defaultMessage: 'We securely encrypt your photo and send it our authorization service for review. Your photo and information are not saved or visible anywhere on edX after the verification process is complete.',
+    description: 'Answering what edX does with the verification photo.',
+  },
+  'id.verification.existing.request.title': {
+    id: 'id.verification.existing.request.title',
+    defaultMessage: 'Identity Verification',
+    description: 'Title for text that displays when user has already made a request.',
+  },
+  'id.verification.existing.request.pending.text': {
+    id: 'id.verification.existing.request.pending.text',
+    defaultMessage: 'You have already submitted your verification information. You will see a message on your dashboard when the verification process is complete (usually within 5 days).',
+    description: 'Text that displays when user has a pending or approved request.',
+  },
+  'id.verification.photo.take': {
+    id: 'id.verification.photo.take',
+    defaultMessage: 'Take Photo',
+    description: 'Button to take photo.',
+  },
+  'id.verification.photo.retake': {
+    id: 'id.verification.photo.retake',
+    defaultMessage: 'Retake Photo',
+    description: 'Button to retake photo.',
+  },
+  'id.verification.photo.enable.detection': {
+    id: 'id.verification.photo.enable.detection',
+    defaultMessage: 'Enable Face Detection',
+    description: 'Text label for the checkbox to enable face detection.',
+  },
+  'id.verification.photo.enable.detection.portrait.help.text': {
+    id: 'id.verification.photo.enable.detection.portrait.help.text',
+    defaultMessage: 'If checked, a box will appear around your face. Your face can be seen clearly if the box around it is blue. If your face is not in a good position or undetectable, the box will be red.',
+    description: 'Help text that appears for enabling face detection on the portrait photo panel.',
+  },
+  'id.verification.photo.enable.detection.id.help.text': {
+    id: 'id.verification.photo.enable.detection.id.help.text',
+    defaultMessage: 'If checked, a box will appear around the face on your ID card. The face can be seen clearly if the box around it is blue. If the face is not in a good position or undetectable, the box will be red.',
+    description: 'Help text that appears for enabling face detection on the portrait photo panel.',
+  },
+  'id.verification.photo.feedback.correct': {
+    id: 'id.verification.photo.feedback.correct',
+    defaultMessage: 'Face is in a good position.',
+    description: 'Text for screen reader when user\'s face is in a good position.',
+  },
+  'id.verification.photo.feedback.two.faces': {
+    id: 'id.verification.photo.feedback.two.faces',
+    defaultMessage: 'More than one face detected.',
+    description: 'Text for screen reader when more than one face detected.',
+  },
+  'id.verification.photo.feedback.no.faces': {
+    id: 'id.verification.photo.feedback.no.faces',
+    defaultMessage: 'No face detected.',
+    description: 'Text for screen reader when no face detected.',
+  },
+  'id.verification.photo.feedback.top.left': {
+    id: 'id.verification.photo.feedback.top.left',
+    defaultMessage: 'Incorrect position. Top left.',
+    description: 'Text for screen reader when face is in a bad position.',
+  },
+  'id.verification.photo.feedback.top.center': {
+    id: 'id.verification.photo.feedback.top.center',
+    defaultMessage: 'Incorrect position. Top center.',
+    description: 'Text for screen reader when face is in a bad position.',
+  },
+  'id.verification.photo.feedback.top.right': {
+    id: 'id.verification.photo.feedback.top.right',
+    defaultMessage: 'Incorrect position. Top right.',
+    description: 'Text for screen reader when face is in a bad position.',
+  },
+  'id.verification.photo.feedback.center.left': {
+    id: 'id.verification.photo.feedback.center.left',
+    defaultMessage: 'Incorrect position. Center left.',
+    description: 'Text for screen reader when face is in a bad position.',
+  },
+  'id.verification.photo.feedback.center.center': {
+    id: 'id.verification.photo.feedback.center.center',
+    defaultMessage: 'Incorrect position. Too close to camera.',
+    description: 'Text for screen reader when face is in a bad position.',
+  },
+  'id.verification.photo.feedback.center.right': {
+    id: 'id.verification.photo.feedback.center.right',
+    defaultMessage: 'Incorrect position. Center right.',
+    description: 'Text for screen reader when face is in a bad position.',
+  },
+  'id.verification.photo.feedback.bottom.left': {
+    id: 'id.verification.photo.feedback.bottom.left',
+    defaultMessage: 'Incorrect position. Bottom left.',
+    description: 'Text for screen reader when face is in a bad position.',
+  },
+  'id.verification.photo.feedback.bottom.center': {
+    id: 'id.verification.photo.feedback.bottom.center',
+    defaultMessage: 'Incorrect position. Bottom center.',
+    description: 'Text for screen reader when face is in a bad position.',
+  },
+  'id.verification.photo.feedback.bottom.right': {
+    id: 'id.verification.photo.feedback.bottom.right',
+    defaultMessage: 'Incorrect position. Bottom right.',
+    description: 'Text for screen reader when face is in a bad position.',
+  },
+  'id.verification.camera.access.title': {
+    id: 'id.verification.camera.access.title',
+    defaultMessage: 'Camera Permissions',
+    description: 'Title for the Camera Access page.',
+  },
+  'id.verification.camera.access.title.success': {
+    id: 'id.verification.camera.access.title.success',
+    defaultMessage: 'Camera Access Enabled',
+    description: 'Title for the Camera Access page when camera is enabled.',
+  },
+  'id.verification.camera.access.title.failed': {
+    id: 'id.verification.camera.access.title.failed',
+    defaultMessage: 'Camera Access Failed',
+    description: 'Title for the Camera Access page when camera access is denied or unavailable.',
+  },
+  'id.verification.camera.access.click.allow': {
+    id: 'id.verification.camera.access.click.allow',
+    defaultMessage: 'Please make sure to click "Allow"',
+    description: 'Instruction to allow camera access.',
+  },
+  'id.verification.camera.access.enable': {
+    id: 'id.verification.camera.access.enable',
+    defaultMessage: 'Enable Camera',
+    description: 'Text to enable camera.',
+  },
+  'id.verification.camera.access.problems': {
+    id: 'id.verification.camera.access.problems',
+    defaultMessage: 'Having problems?',
+    description: 'Text for when the user is having problems enabling camera access.',
+  },
+  'id.verification.camera.access.skip': {
+    id: 'id.verification.camera.access.skip',
+    defaultMessage: 'Skip and upload image files instead',
+    description: 'Text to skip camera access and enable image uploading.',
+  },
+  'id.verification.camera.access.success': {
+    id: 'id.verification.camera.access.success',
+    defaultMessage: 'Looks like your camera is working and ready.',
+    description: 'Text to confirm that camera is working.',
+  },
+  'id.verification.camera.access.failure': {
+    id: 'id.verification.camera.access.failure',
+    defaultMessage: 'It looks like we\'re unable to access your camera. You will need to upload image files of you and your photo id.',
+    description: 'Text indicating that the camera could not be accessed and image upload will be enabled.',
+  },
+  'id.verification.camera.access.failure.temporary': {
+    id: 'id.verification.camera.access.failure.temporary',
+    defaultMessage: 'It looks like we\'re unable to access your camera. Please verify that your webcam is connected and that you have allowed your browser to access it.',
+    description: 'Text indicating that the camera could not be accessed.',
+  },
+  'id.verification.camera.access.failure.temporary.chrome': {
+    id: 'id.verification.camera.access.failure.temporary.chrome',
+    defaultMessage: 'To enable camera access in Chrome:',
+    description: 'Description for the directions on enabling camera access.',
+  },
+  'id.verification.camera.access.failure.temporary.chrome.step1': {
+    id: 'id.verification.camera.access.failure.temporary.chrome.step1',
+    defaultMessage: 'Open Chrome.',
+    description: 'Text for step one of enabling camera access.',
+  },
+  'id.verification.camera.access.failure.temporary.chrome.step2': {
+    id: 'id.verification.camera.access.failure.temporary.chrome.step2',
+    defaultMessage: 'Navigate to More > Settings.',
+    description: 'Text for step two of enabling camera access.',
+  },
+  'id.verification.camera.access.failure.temporary.chrome.step2.windows': {
+    id: 'id.verification.camera.access.failure.temporary.chrome.step2.windows',
+    defaultMessage: 'For Windows: Alt+F, Alt+E, or F10 followed by the spacebar',
+    description: 'Text for Windows keyboard shortcut in chrome.',
+  },
+  'id.verification.camera.access.failure.temporary.chrome.step2.mac': {
+    id: 'id.verification.camera.access.failure.temporary.chrome.step2.mac',
+    defaultMessage: 'For Mac: Command+,',
+    description: 'Text for Mac keyboard shortcut in chrome.',
+  },
+  'id.verification.camera.access.failure.temporary.chrome.step3': {
+    id: 'id.verification.camera.access.failure.temporary.chrome.step3',
+    defaultMessage: 'Under the "Privacy and security" tab, select "Site Settings" and then "Camera."',
+    description: 'Text for step three of enabling camera access.',
+  },
+  'id.verification.camera.access.failure.temporary.chrome.step4': {
+    id: 'id.verification.camera.access.failure.temporary.chrome.step4',
+    defaultMessage: 'Under "Blocked," find "edx.org" and select it.',
+    description: 'Text for step four of enabling camera access.',
+  },
+  'id.verification.camera.access.failure.temporary.chrome.step5': {
+    id: 'id.verification.camera.access.failure.temporary.chrome.step5',
+    defaultMessage: 'In the "Permissions" section, update the camera permissions to "Allow."',
+    description: 'Text for step five of enabling camera access.',
+  },
+  'id.verification.camera.access.failure.temporary.ie11': {
+    id: 'id.verification.camera.access.failure.temporary.ie11',
+    defaultMessage: 'To enable camera access in Internet Explorer:',
+    description: 'Description for the directions on enabling camera access.',
+  },
+  'id.verification.camera.access.failure.temporary.ie11.step1': {
+    id: 'id.verification.camera.access.failure.temporary.ie11.step1',
+    defaultMessage: 'Open the Flash Player Settings Manager by navigating to Windows Settings > Control Panel > Flash Player.',
+    description: 'Text for step one of enabling camera access.',
+  },
+  'id.verification.camera.access.failure.temporary.ie11.step2': {
+    id: 'id.verification.camera.access.failure.temporary.ie11.step2',
+    defaultMessage: 'Select the "Camera and Mic" tab, and then select the "Camera and Microphone Settings by Site" button.',
+    description: 'Text for step two of enabling camera access.',
+  },
+  'id.verification.camera.access.failure.temporary.ie11.step3': {
+    id: 'id.verification.camera.access.failure.temporary.ie11.step3',
+    defaultMessage: 'Choose "edx.org" from the list of websites and change the permissions by selecting "Allow" in the dropdown menu.',
+    description: 'Text for step three of enabling camera access.',
+  },
+  'id.verification.camera.access.failure.temporary.firefox': {
+    id: 'id.verification.camera.access.failure.temporary.firefox',
+    defaultMessage: 'To enable camera access in Firefox:',
+    description: 'Description for the directions on enabling camera access.',
+  },
+  'id.verification.camera.access.failure.temporary.firefox.step1': {
+    id: 'id.verification.camera.access.failure.temporary.firefox.step1',
+    defaultMessage: 'Open Firefox.',
+    description: 'Text for step one of enabling camera access.',
+  },
+  'id.verification.camera.access.failure.temporary.firefox.step2': {
+    id: 'id.verification.camera.access.failure.temporary.firefox.step2',
+    defaultMessage: 'Enter "about:preferences" in the URL bar.',
+    description: 'Text for step two of enabling camera access.',
+  },
+  'id.verification.camera.access.failure.temporary.firefox.step3': {
+    id: 'id.verification.camera.access.failure.temporary.firefox.step3',
+    defaultMessage: 'Select the "Privacy & Security" tab, and navigate to the "Permissions" section.',
+    description: 'Text for step three of enabling camera access.',
+  },
+  'id.verification.camera.access.failure.temporary.firefox.step4': {
+    id: 'id.verification.camera.access.failure.temporary.firefox.step4',
+    defaultMessage: 'Next to "Camera," select the "Settings…" button.',
+    description: 'Text for step four of enabling camera access.',
+  },
+  'id.verification.camera.access.failure.temporary.firefox.step5': {
+    id: 'id.verification.camera.access.failure.temporary.firefox.step5',
+    defaultMessage: 'In the search bar, enter "edx.org."',
+    description: 'Text for step five of enabling camera access.',
+  },
+  'id.verification.camera.access.failure.temporary.firefox.step6': {
+    id: 'id.verification.camera.access.failure.temporary.firefox.step6',
+    defaultMessage: 'In the status column for "edx.org," select "Allow" from the drop down.',
+    description: 'Text for step six of enabling camera access.',
+  },
+  'id.verification.camera.access.failure.temporary.firefox.step7': {
+    id: 'id.verification.camera.access.failure.temporary.firefox.step7',
+    defaultMessage: 'Select "Save Changes."',
+    description: 'Text for step seven of enabling camera access.',
+  },
+  'id.verification.camera.access.failure.temporary.safari': {
+    id: 'id.verification.camera.access.failure.temporary.safari',
+    defaultMessage: 'To enable camera access in Safari:',
+    description: 'Description for the directions on enabling camera access.',
+  },
+  'id.verification.camera.access.failure.temporary.safari.step1': {
+    id: 'id.verification.camera.access.failure.temporary.safari.step1',
+    defaultMessage: 'Open Safari.',
+    description: 'Text for step one of enabling camera access.',
+  },
+  'id.verification.camera.access.failure.temporary.safari.step2': {
+    id: 'id.verification.camera.access.failure.temporary.safari.step2',
+    defaultMessage: 'Click on the Safari app menu, then select "Preferences." You can also use Command+, as a keyboard shortcut.',
+    description: 'Text for step two of enabling camera access.',
+  },
+  'id.verification.camera.access.failure.temporary.safari.step3': {
+    id: 'id.verification.camera.access.failure.temporary.safari.step3',
+    defaultMessage: 'Select the "Websites" tab and then select "Camera."',
+    description: 'Text for step three of enabling camera access.',
+  },
+  'id.verification.camera.access.failure.temporary.safari.step4': {
+    id: 'id.verification.camera.access.failure.temporary.safari.step4',
+    defaultMessage: 'Select "edx.org" and change the camera permissions to "Allow."',
+    description: 'Text for step four of enabling camera access.',
+  },
+  'id.verification.photo.tips.title': {
+    id: 'id.verification.photo.tips.title',
+    defaultMessage: 'Helpful Photo Tips',
+    description: 'Title for the Photo Tips page.',
+  },
+  'id.verification.photo.tips.description': {
+    id: 'id.verification.photo.tips.description',
+    defaultMessage: 'Next, we\'ll need you to take a photo of your face. Please review the helpful tips below.',
+    description: 'Description for the photo tips page.',
+  },
+  'id.verification.photo.tips.list.title': {
+    id: 'id.verification.photo.tips.list.title',
+    defaultMessage: 'Photo Tips',
+    description: 'Title for the list of photo tips.',
+  },
+  'id.verification.photo.tips.list.description': {
+    id: 'id.verification.photo.tips.list.description',
+    defaultMessage: 'To take a successful photo, make sure that:',
+    description: 'Description for the list of photo tips.',
+  },
+  'id.verification.photo.tips.list.well.lit': {
+    id: 'id.verification.photo.tips.list.well.lit',
+    defaultMessage: 'Your face is well-lit.',
+    description: 'Tip to make sure the user\'s face is well lit.',
+  },
+  'id.verification.photo.tips.list.inside.frame': {
+    id: 'id.verification.photo.tips.list.inside.frame',
+    defaultMessage: 'Your entire face fits inside the frame.',
+    description: 'Tip to make sure the user\'s face fits inside the frame.',
+  },
+  'id.verification.portrait.photo.title.camera': {
+    id: 'id.verification.portrait.photo.title.camera',
+    defaultMessage: 'Take a Photo of Yourself',
+    description: 'Title for the Portrait Photo page if camera access is enabled.',
+  },
+  'id.verification.portrait.photo.title.upload': {
+    id: 'id.verification.portrait.photo.title.upload',
+    defaultMessage: 'Upload a Photo of Yourself',
+    description: 'Title for the Portrait Photo page if camera access is disabled.',
+  },
+  'id.verification.portrait.photo.preview.alt': {
+    id: 'id.verification.portrait.photo.preview.alt',
+    defaultMessage: 'Preview of photo of user\'s face.',
+    description: 'Alt text for the portrait photo preview.',
+  },
+  'id.verification.portrait.photo.instructions.camera': {
+    id: 'id.verification.portrait.photo.instructions.camera',
+    defaultMessage: 'When your face is in position, use the Take Photo button below to take your photo.',
+    description: 'Instructions to use the camera to take a portrait photo..',
+  },
+  'id.verification.portrait.photo.instructions.upload': {
+    id: 'id.verification.portrait.photo.instructions.upload',
+    defaultMessage: 'Please upload a portrait photo. Ensure your entire face fits inside the frame and is well-lit. (Supported formats: .jpg, .jpeg, .png)',
+    description: 'Instructions for portrait photo upload.',
+  },
+  'id.verification.camera.help.sight.question': {
+    id: 'id.verification.camera.help.sight.question',
+    defaultMessage: 'What if I can\'t see the camera image or if I can\'t see my photo to determine which side is visible?',
+    description: 'Question on what to do if the user cannot see the camera image or photo during verification.',
+  },
+  'id.verification.camera.help.sight.answer.portrait': {
+    id: 'id.verification.camera.help.sight.answer.portrait',
+    defaultMessage: 'You may be able to complete the image capture procedure without assistance, but it may take a couple of submission attempts to get the camera positioning right. Optimal camera positioning varies with each computer, but generally the best position for a headshot is approximately 12-18 inches (30-45 centimeters) from the camera, with your head centered relative to the computer screen. If the photos you submit are rejected, try moving the computer or camera orientation to change the lighting angle.',
+    description: 'Confirming what to do if the camera image of the portrait cannot be seen during verification.',
+  },
+  'id.verification.camera.help.sight.answer.id': {
+    id: 'id.verification.camera.help.sight.answer.id',
+    defaultMessage: 'You may be able to complete the image capture procedure without assistance, but it may take a couple of submission attempts to get the camera positioning right. Optimal camera positioning varies with each computer, but generally, the best position for a photo of an ID card is 8-12 inches (20-30 centimeters) from the camera, with the ID card centered relative to the camera. If the photos you submit are rejected, try moving the computer or camera orientation to change the lighting angle. The most common reason for rejection is inability to read the text on the ID card.',
+    description: 'Confirming what to do if the camera image of the ID cannot be seen during verification.',
+  },
+  'id.verification.camera.help.difficulty.question.portrait': {
+    id: 'id.verification.camera.help.difficulty.question.portrait',
+    defaultMessage: 'What if I have difficulty holding my head in position relative to the camera?',
+    description: 'Question on what to do if the user has difficulty holding their head relative to the camera.',
+  },
+  'id.verification.camera.help.difficulty.question.id': {
+    id: 'id.verification.camera.help.difficulty.question.id',
+    defaultMessage: 'What if I have difficulty holding my ID in position relative to the camera?',
+    description: 'Question on what to do if the user has difficulty holding their ID relative to the camera.',
+  },
+  'id.verification.camera.help.difficulty.answer': {
+    id: 'id.verification.camera.help.difficulty.answer',
+    defaultMessage: 'If you require assistance with taking a photo for submission, contact edX support for additional suggestions.',
+    description: 'Confirming what to do if the user has difficult holding their head relative to the camera.',
+  },
+  'id.verification.id.photo.unclear.question': {
+    id: 'id.verification.id.photo.unclear.question',
+    defaultMessage: 'Is your ID image not clear or too blurry?',
+    description: 'Question on what to do if the user\'s ID image is unclear',
+  },
+  'id.verification.id.tips.title': {
+    id: 'id.verification.id.tips.title',
+    defaultMessage: 'Helpful ID Tips',
+    description: 'Title for the ID Tips page.',
+  },
+  'id.verification.id.tips.description': {
+    id: 'id.verification.id.tips.description',
+    defaultMessage: 'Next, we\'ll need you to take a photo of a valid ID that includes your name. Please have your ID ready.',
+    description: 'Description for the ID Tips page.',
+  },
+  'id.verification.id.tips.list.well.lit': {
+    id: 'id.verification.id.tips.list.well.lit',
+    defaultMessage: 'Your ID is well-lit.',
+    description: 'Tip to ensure ID is well lit.',
+  },
+  'id.verification.id.tips.list.clear': {
+    id: 'id.verification.id.tips.list.clear',
+    defaultMessage: 'Ensure that you can see your photo and clearly read your name.',
+    description: 'Tip to ensure ID and name can be seen clearly.',
+  },
+  'id.verification.id.photo.title.camera': {
+    id: 'id.verification.id.photo.title.camera',
+    defaultMessage: 'Take a Photo of Your ID',
+    description: 'Title for the ID Photo page if camera access is enabled.',
+  },
+  'id.verification.id.photo.title.upload': {
+    id: 'id.verification.id.photo.title.upload',
+    defaultMessage: 'Upload a Photo of Your ID',
+    description: 'Title for the ID Photo page if camera access is disabled.',
+  },
+  'id.verification.id.photo.preview.alt': {
+    id: 'id.verification.id.photo.preview.alt',
+    defaultMessage: 'Preview of photo ID.',
+    description: 'Alt text for the ID photo preview.',
+  },
+  'id.verification.id.photo.instructions.camera': {
+    id: 'id.verification.id.photo.instructions.camera',
+    defaultMessage: 'When your ID is in position, use the Take Photo button below to take your photo.',
+    description: 'Instructions to use the camera to take an ID photo.',
+  },
+  'id.verification.id.photo.instructions.upload': {
+    id: 'id.verification.id.photo.instructions.upload',
+    defaultMessage: 'Please upload an ID photo. Ensure the entire ID fits inside the frame and is well-lit. The file size must be under 10 MB. (Supported formats: .jpg, .jpeg, .png)',
+    description: 'Instructions for ID photo upload.',
+  },
+  'id.verification.id.photo.instructions.upload.error': {
+    id: 'id.verification.id.photo.instructions.upload.error',
+    defaultMessage: 'The file you have selected is too large. Please try again with a file less than 10MB.',
+    description: 'Error message for file upload that is larger than 10MB.',
+  },
+  'id.verification.account.name.title': {
+    id: 'id.verification.account.name.title',
+    defaultMessage: 'Account Name Check',
+    description: 'Title for the Account Name Check page.',
+  },
+  'id.verification.account.name.instructions': {
+    id: 'id.verification.account.name.instructions',
+    defaultMessage: 'The name on your account and the name on your ID must be an exact match. If not, please click "No" to update your account name.',
+    description: 'Text to verify that the account name matches the name on the ID photo.',
+  },
+  'id.verification.account.name.radio.label': {
+    id: 'id.verification.account.name.radio.label',
+    defaultMessage: 'Does the name on your ID match the Account Name below?',
+    description: 'Question to ask the user whether their account name match the name on their ID card.',
+  },
+  'id.verification.account.name.radio.yes': {
+    id: 'id.verification.account.name.radio.yes',
+    defaultMessage: 'Yes',
+    description: 'The radio button that says the account name matches.',
+  },
+  'id.verification.account.name.radio.no': {
+    id: 'id.verification.account.name.radio.no',
+    defaultMessage: 'No',
+    description: 'The radio button that says the account name does not match.',
+  },
+  'id.verification.account.name.error': {
+    id: 'id.verification.account.name.error',
+    defaultMessage: 'Please update account name to match the name on your ID.',
+    description: 'Error that shows when the user needs to update their account name to match the name on their ID.',
+  },
+  'id.verification.account.name.warning.prefix': {
+    id: 'id.verification.account.name.warning.prefix',
+    defaultMessage: 'Please Note:',
+    description: 'Prefix to the warning that any change to the account name will be saved to the account.',
+  },
+  'id.verification.account.name.settings': {
+    id: 'id.verification.account.name.settings',
+    defaultMessage: 'Account Settings',
+    description: 'Link to Account Settings.',
+  },
+  'id.verification.account.name.label': {
+    id: 'id.verification.account.name.label',
+    defaultMessage: 'Account Name',
+    description: 'Label for account name input.',
+  },
+  'id.verification.account.name.photo.alt': {
+    id: 'id.verification.account.name.photo.alt',
+    defaultMessage: 'Photo of your ID to be submitted.',
+    description: 'Alt text for the photo of the user\'s ID.',
+  },
+  'id.verification.account.name.save': {
+    id: 'id.verification.account.name.save',
+    defaultMessage: 'Save and Next',
+    description: 'Button to save the account name.',
+  },
+  'id.verification.review.title': {
+    id: 'id.verification.review.title',
+    defaultMessage: 'Review Your Photos',
+    description: 'Title for the review your photos page.',
+  },
+  'id.verification.review.description': {
+    id: 'id.verification.review.description',
+    defaultMessage: 'Make sure we can verify your identity with the photos and information you have provided.',
+    description: 'Description for the review your photos page.',
+  },
+  'id.verification.review.portrait.label': {
+    id: 'id.verification.review.portrait.label',
+    defaultMessage: 'Your Portrait',
+    description: 'Label for the portrait card.',
+  },
+  'id.verification.review.portrait.alt': {
+    id: 'id.verification.review.portrait.alt',
+    defaultMessage: 'Photo of your face to be submitted.',
+    description: 'Alt text for the portrait photo.',
+  },
+  'id.verification.review.portrait.retake': {
+    id: 'id.verification.review.portrait.retake',
+    defaultMessage: 'Retake Portrait Photo',
+    description: 'Button to retake the portrait photo.',
+  },
+  'id.verification.review.id.label': {
+    id: 'id.verification.review.id.label',
+    defaultMessage: 'Your Photo ID',
+    description: 'Label for the Photo ID card.',
+  },
+  'id.verification.review.id.alt': {
+    id: 'id.verification.review.id.alt',
+    defaultMessage: 'Photo of your ID to be submitted.',
+    description: 'Alt text for the ID photo.',
+  },
+  'id.verification.review.id.retake': {
+    id: 'id.verification.review.id.retake',
+    defaultMessage: 'Retake ID Photo',
+    description: 'Button to retake the ID photo.',
+  },
+  'id.verification.review.confirm': {
+    id: 'id.verification.review.confirm',
+    defaultMessage: 'Submit',
+    description: 'Button to confirm all information is correct and submit.',
+  },
+  'id.verification.review.error': {
+    id: 'id.verification.review.error',
+    defaultMessage: 'edX Support Page',
+    description: 'Text linking to the support page.',
+  },
+  'id.verification.submitted.title': {
+    id: 'id.verification.submitted.title',
+    defaultMessage: 'Identity Verification in Progress',
+    description: 'Title for the submitted page.',
+  },
+  'id.verification.submitted.text': {
+    id: 'id.verification.submitted.text',
+    defaultMessage: 'We have received your information and are verifying your identity. You will see a message on your dashboard when the verification process is complete (usually within 5 days). In the meantime, you can still access all available course content.',
+    description: 'Text confirming that ID verification request has been received.',
+  },
+  'id.verification.return.dashboard': {
+    id: 'id.verification.return.dashboard',
+    defaultMessage: 'Return to Your Dashboard',
+    description: 'Button to return to the dashboard.',
+  },
+  'id.verification.return.course': {
+    id: 'id.verification.return.course',
+    defaultMessage: 'Return to Course',
+    description: 'Return to the course which ID verification was accessed from.',
+  },
+});
+
+export default messages;

src/id-verification/IdVerificationContext.jsx

@@ -0,0 +1,98 @@
+import React, { useState, useContext, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { AppContext } from '@edx/frontend-platform/react';
+
+import { hasGetUserMediaSupport } from './getUserMediaShim';
+import { getExistingIdVerification } from './data/service';
+import PageLoading from '../account-settings/PageLoading';
+import ExistingRequest from './ExistingRequest';
+
+const IdVerificationContext = React.createContext({});
+
+const MEDIA_ACCESS = {
+  PENDING: 'pending',
+  UNSUPPORTED: 'unsupported',
+  DENIED: 'denied',
+  GRANTED: 'granted',
+};
+
+function IdVerificationContextProvider({ children }) {
+  const [existingIdVerification, setExistingIdVerification] = useState(null);
+  const [facePhotoFile, setFacePhotoFile] = useState(null);
+  const [idPhotoFile, setIdPhotoFile] = useState(null);
+  const [idPhotoName, setIdPhotoName] = useState(null);
+  const [mediaStream, setMediaStream] = useState(null);
+  const [mediaAccess, setMediaAccess] = useState(hasGetUserMediaSupport ?
+    MEDIA_ACCESS.PENDING :
+    MEDIA_ACCESS.UNSUPPORTED);
+  const { authenticatedUser } = useContext(AppContext);
+
+  const contextValue = {
+    existingIdVerification,
+    facePhotoFile,
+    idPhotoFile,
+    idPhotoName,
+    mediaStream,
+    mediaAccess,
+    userId: authenticatedUser.userId,
+    nameOnAccount: authenticatedUser.name,
+    setExistingIdVerification,
+    setFacePhotoFile,
+    setIdPhotoFile,
+    setIdPhotoName,
+    tryGetUserMedia: async () => {
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({ video: true });
+        setMediaAccess(MEDIA_ACCESS.GRANTED);
+        setMediaStream(stream);
+        // stop the stream, as we are not using it yet
+        const tracks = stream.getTracks();
+        tracks.forEach(track => track.stop());
+      } catch (err) {
+        setMediaAccess(MEDIA_ACCESS.DENIED);
+      }
+    },
+    stopUserMedia: () => {
+      if (mediaStream) {
+        const tracks = mediaStream.getTracks();
+        tracks.forEach(track => track.stop());
+        setMediaStream(null);
+      }
+    },
+  };
+
+  // Call verification status endpoint to check whether we can verify.
+  useEffect(() => {
+    (async () => {
+      const existingIdV = await getExistingIdVerification();
+      setExistingIdVerification(existingIdV);
+    })();
+  }, []);
+
+  // If we are waiting for verification status endpoint, show spinner.
+  if (!existingIdVerification) {
+    return <PageLoading srMessage="Loading verification status" />;
+  }
+
+  if (!existingIdVerification.canVerify) {
+    const { status } = existingIdVerification;
+    return (
+      <ExistingRequest status={status} />
+    );
+  }
+
+  return (
+    <IdVerificationContext.Provider value={contextValue}>
+      {children}
+    </IdVerificationContext.Provider>
+  );
+}
+IdVerificationContextProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export {
+  IdVerificationContext,
+  IdVerificationContextProvider,
+  MEDIA_ACCESS,
+};

src/id-verification/IdVerificationPage.jsx

@@ -0,0 +1,90 @@
+import React, { useState, useEffect } from 'react';
+import { connect } from 'react-redux';
+import { Route, Switch, Redirect, useRouteMatch, useLocation } from 'react-router-dom';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Modal, Button } from '@edx/paragon';
+import { idVerificationSelector } from './data/selectors';
+import './getUserMediaShim';
+
+import { IdVerificationContextProvider } from './IdVerificationContext';
+import ReviewRequirementsPanel from './panels/ReviewRequirementsPanel';
+import RequestCameraAccessPanel from './panels/RequestCameraAccessPanel';
+import PortraitPhotoContextPanel from './panels/PortraitPhotoContextPanel';
+import TakePortraitPhotoPanel from './panels/TakePortraitPhotoPanel';
+import IdContextPanel from './panels/IdContextPanel';
+import GetNameIdPanel from './panels/GetNameIdPanel';
+import TakeIdPhotoPanel from './panels/TakeIdPhotoPanel';
+import SummaryPanel from './panels/SummaryPanel';
+import SubmittedPanel from './panels/SubmittedPanel';
+
+import messages from './IdVerification.messages';
+
+// eslint-disable-next-line react/prefer-stateless-function
+function IdVerificationPage(props) {
+  const { path } = useRouteMatch();
+  const { search } = useLocation();
+
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  // Course run key is passed as a query string
+  useEffect(() => {
+    if (search) {
+      sessionStorage.setItem('courseRunKey', search.substring(1));
+    }
+  }, [search]);
+
+  return (
+    <>
+      {/* If user reloads, redirect to the beginning of the process */}
+      <Redirect to={`${path}/review-requirements`} />
+      <div className="page__id-verification container-fluid py-5">
+        <div className="row">
+          <div className="col-lg-6 col-md-8">
+            <IdVerificationContextProvider>
+              <Switch>
+                <Route path={`${path}/review-requirements`} component={ReviewRequirementsPanel} />
+                <Route path={`${path}/request-camera-access`} component={RequestCameraAccessPanel} />
+                <Route path={`${path}/portrait-photo-context`} component={PortraitPhotoContextPanel} />
+                <Route path={`${path}/take-portrait-photo`} component={TakePortraitPhotoPanel} />
+                <Route path={`${path}/id-context`} component={IdContextPanel} />
+                <Route path={`${path}/get-name-id`} component={GetNameIdPanel} />
+                <Route path={`${path}/take-id-photo`} component={TakeIdPhotoPanel} />
+                <Route path={`${path}/summary`} component={SummaryPanel} />
+                <Route path={`${path}/submitted`} component={SubmittedPanel} />
+              </Switch>
+            </IdVerificationContextProvider>
+          </div>
+          <div className="col-lg-6 col-md-4 pt-md-0 pt-4 text-right">
+            <Button className="btn-link px-0" onClick={() => setIsModalOpen(true)}>
+            Privacy Information
+            </Button>
+          </div>
+        </div>
+
+
+        <Modal
+          open={isModalOpen}
+          title={props.intl.formatMessage(messages['id.verification.privacy.title'])}
+          body={(
+            <div>
+              <h6>{props.intl.formatMessage(messages['id.verification.privacy.need.photo.question'])}</h6>
+              <p>{props.intl.formatMessage(messages['id.verification.privacy.need.photo.answer'])}</p>
+              <h6>{props.intl.formatMessage(messages['id.verification.privacy.do.with.photo.question'])}</h6>
+              <p>{props.intl.formatMessage(messages['id.verification.privacy.do.with.photo.answer'])}</p>
+            </div>
+          )}
+          onClose={() => setIsModalOpen(false)}
+        />
+
+      </div>
+    </>
+  );
+}
+
+IdVerificationPage.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default connect(idVerificationSelector, {
+})(injectIntl(IdVerificationPage));
+

src/id-verification/ImageFileUpload.jsx

@@ -0,0 +1,52 @@
+import React, { useCallback, useState } from 'react';
+import { intlShape } from '@edx/frontend-platform/i18n';
+import PropTypes from 'prop-types';
+import { Alert } from '@edx/paragon';
+import messages from './IdVerification.messages';
+
+
+export default function ImageFileUpload({ onFileChange, intl }) {
+  const [fileTooLargeError, setFileTooLargeError] = useState(false);
+  const maxFileSize = 10000000;
+
+  const handleChange = useCallback((e) => {
+    if (e.target.files.length === 0) {
+      return;
+    }
+
+    const fileObject = e.target.files[0];
+    if (fileObject.size < maxFileSize) {
+      const fileReader = new FileReader();
+      fileReader.addEventListener('load', () => onFileChange(fileReader.result));
+      fileReader.readAsDataURL(fileObject);
+    } else {
+      setFileTooLargeError(true);
+    }
+  }, []);
+
+  return (
+    <>
+      <input
+        type="file"
+        accept="image/*"
+        data-testid="fileUpload"
+        onChange={handleChange}
+      />
+      {fileTooLargeError && (
+      <Alert
+        id="fileTooLargeError"
+        variant="danger"
+        tabIndex="-1"
+        style={{ marginTop: '1rem' }}
+      >
+        {intl.formatMessage(messages['id.verification.id.photo.instructions.upload.error'])}
+      </Alert>
+      )}
+    </>
+  );
+}
+
+ImageFileUpload.propTypes = {
+  onFileChange: PropTypes.func.isRequired,
+  intl: intlShape.isRequired,
+};

src/id-verification/ImagePreview.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default function ImagePreview({ src, alt, id }) {
+  return (
+    <div id={id} className="image-preview">
+
+      <img data-hj-suppress style={{ objectFit: 'contain' }} src={src} alt={alt} />
+
+    </div>
+  );
+}
+
+ImagePreview.propTypes = {
+  src: PropTypes.string.isRequired,
+  alt: PropTypes.string.isRequired,
+  id: PropTypes.string,
+};

src/id-verification/_id-verification.scss

@@ -0,0 +1,79 @@
+.page__id-verification {
+  .verification-panel {
+    .card.accent {
+      border-top: solid 4px theme-color('warning');
+    }
+    .image-preview {
+      margin-bottom: 1rem;
+      max-width: 20rem;
+      img {
+        display: block;
+        max-width: 100%;
+        max-height: 10rem;
+      }
+    }
+    .form-check {
+      padding: 0.5rem 0.5rem 1rem;
+      .form-check-label {
+        margin-left: 0.5rem;
+        padding-top: 0.2rem;
+        font-weight: normal;
+      }
+    }
+  }
+  .action-row {
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: flex-start;
+    margin-bottom: 12px;
+    .btn-primary {
+      min-width: 8rem;
+      margin-left: 1rem;
+    }
+    .btn-link {
+      padding-left: 0;
+      padding-right: 0;
+      text-decoration: underline;
+      align-self: center;
+    }
+  }
+  .camera-outer-wrapper {
+    margin-bottom: 15px;
+    text-align: center;
+    border-radius: 0.3rem;
+  }
+  .camera-wrapper {
+    position: relative;
+    width: 100%;
+    height: 100%
+  }
+
+  .camera-video {
+    width: 100%;
+  }
+
+  .canvas-video {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  .camera-btn {
+    margin: 10px;
+  }
+
+  .camera-flash {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    opacity :1;
+    transition:opacity .9s ease-out;
+  }
+
+  .camera-flash.do-transition {
+    opacity: 0;
+    background: white;
+  }
+}

src/id-verification/data/selectors.js

@@ -0,0 +1,3 @@
+export const storeName = 'idVerifiction';
+
+export const idVerificationSelector = state => ({ ...state[storeName] });

src/id-verification/data/service.js

@@ -0,0 +1,71 @@
+import qs from 'qs';
+
+import { getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+/**
+ * Get ID verification status from LMS.
+ *
+ * Returns {
+ *  status: String,
+ *  expires: String|null,
+ *  canVerify: Boolean,
+ * }
+ */
+export async function getExistingIdVerification() {
+  const url = `${getConfig().LMS_BASE_URL}/verify_student/status/`;
+  const requestConfig = {
+    headers: { Accept: 'application/json' },
+  };
+  try {
+    const response = await getAuthenticatedHttpClient().get(url, requestConfig);
+    return {
+      status: response.data.status || null,
+      expires: response.data.expires || null,
+      canVerify: response.data.can_verify || false,
+    };
+  } catch (e) {
+    return { status: null, expires: null, canVerify: false };
+  }
+}
+
+/**
+ * Submit ID verifiction to LMS.
+ *
+ * verificationData should take the shape of:
+ *   - facePhotoFile (String): Base64-encoded image.
+ *   - idPhotoFile (String|null): Optional Base64-encoded image
+ *   - idPhotoName (String|null): Optional string to change the user's name to.
+ *   - courseRunKey (String|null): Optional course run to redirect to.
+ *
+ * Returns { success: Boolean, message: String|null }
+ */
+export async function submitIdVerification(verificationData) {
+  const keyMap = {
+    facePhotoFile: 'face_image',
+    idPhotoFile: 'photo_id_image',
+    idPhotoName: 'full_name',
+    courseRunKey: 'course_key',
+  };
+  const postData = {};
+  // Don't include blank/null/undefined values.
+  // Note that this will also drop the value `false`.
+  Object.keys(keyMap).forEach((jsKey) => {
+    const apiKey = keyMap[jsKey];
+    if (verificationData[jsKey]) {
+      postData[apiKey] = verificationData[jsKey];
+    }
+  });
+
+  const url = `${getConfig().LMS_BASE_URL}/verify_student/submit-photos/`;
+  const urlEncodedPostData = qs.stringify(postData);
+  const requestConfig = {
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+  };
+  try {
+    await getAuthenticatedHttpClient().post(url, urlEncodedPostData, requestConfig);
+    return { success: true, message: null };
+  } catch (e) {
+    return { success: false, message: String(e) }; // TODO: is String(e) right?
+  }
+}

src/id-verification/getUserMediaShim.js

@@ -0,0 +1,59 @@
+/**
+ * This polyfill is from MDN:
+ * https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
+ *
+ * Their description:
+ * "Here's an example of using navigator.mediaDevices.getUserMedia(), with a
+ * polyfill to cope with older browsers. Note that this polyfill does not
+ * correct for legacy differences in constraints syntax, which means constraints
+ * won't work well across browsers. It is recommended to use the adapter.js
+ * polyfill instead, which does handle constraints."
+ *
+ * Despite the lack of support for differences in constraints we'll use this
+ * since it's small and simple and we don't have a need for constraints at the
+ * moment. I've added an export hasGetUserMediaSupport before the polyfill to
+ * help us understand support before making calls to getUserMedia.
+ */
+
+// IIFE to check getUserMedia support. Must be run before the polyfill.
+const hasGetUserMediaSupport = (() => {
+  // Modern API
+  if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
+    return true;
+  }
+  // Deprecated APIs
+  if (navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
+    return true;
+  }
+  return false;
+})();
+
+// Older browsers might not implement mediaDevices at all, so we set an empty object first
+if (navigator.mediaDevices === undefined) {
+  navigator.mediaDevices = {};
+}
+
+// Some browsers partially implement mediaDevices. We can't just assign an object
+// with getUserMedia as it would overwrite existing properties.
+// Here, we will just add the getUserMedia property if it's missing.
+if (navigator.mediaDevices.getUserMedia === undefined) {
+  // eslint-disable-next-line func-names
+  navigator.mediaDevices.getUserMedia = function (constraints) {
+    // First get ahold of the legacy getUserMedia, if present
+    const getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
+
+    // Some browsers just don't implement it - return a rejected promise with an error
+    // to keep a consistent interface
+    if (!getUserMedia) {
+      return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
+    }
+
+    // Otherwise, wrap the call to the old navigator.getUserMedia with a Promise
+    return new Promise(((resolve, reject) => {
+      getUserMedia.call(navigator, constraints, resolve, reject);
+    }));
+  };
+}
+
+// eslint-disable-next-line import/prefer-default-export
+export { hasGetUserMediaSupport };

src/id-verification/index.js

@@ -0,0 +1 @@
+export { default } from './IdVerificationPage';

src/id-verification/panels/BasePanel.jsx

@@ -0,0 +1,43 @@
+import React, { useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { Redirect } from 'react-router';
+import { useVerificationRedirectSlug } from '../routing-utilities';
+
+export default function BasePanel({
+  children,
+  focusOnMount,
+  name,
+  title,
+}) {
+  const headingRef = useRef();
+
+  // focus heading element on mount
+  useEffect(() => {
+    if (focusOnMount && headingRef.current) {
+      headingRef.current.focus();
+    }
+  }, [headingRef.current]);
+
+  const redirectSlug = useVerificationRedirectSlug(name);
+  if (redirectSlug) {
+    return <Redirect to={redirectSlug} />;
+  }
+
+  return (
+    <div className={`verification-panel ${name}-panel`}>
+      <h3 aria-level="1" ref={headingRef} tabIndex="-1">{title}</h3>
+      {children}
+    </div>
+  );
+}
+
+BasePanel.propTypes = {
+  children: PropTypes.node.isRequired,
+  focusOnMount: PropTypes.bool,
+  name: PropTypes.string.isRequired,
+  title: PropTypes.node.isRequired,
+};
+
+BasePanel.defaultProps = {
+  focusOnMount: true,
+};

src/id-verification/panels/EnableCameraDirectionsPanel.jsx

@@ -0,0 +1,71 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import messages from '../IdVerification.messages';
+
+export function EnableCameraDirectionsPanel(props) {
+  if (props.browserName === 'Internet Explorer') {
+    return (
+      <>
+        <h6>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.ie11'])}</h6>
+        <ol>
+          <li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.ie11.step1'])}</li>
+          <li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.ie11.step2'])}</li>
+          <li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.ie11.step3'])}</li>
+        </ol>
+      </>
+    );
+  } else if (props.browserName === 'Chrome') {
+    return (
+      <>
+        <h6>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.chrome'])}</h6>
+        <ol>
+          <li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.chrome.step1'])}</li>
+          <li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.chrome.step2'])}</li>
+          <ul>
+            <li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.chrome.step2.windows'])}</li>
+            <li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.chrome.step2.mac'])}</li>
+          </ul>
+          <li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.chrome.step3'])}</li>
+          <li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.chrome.step4'])}</li>
+          <li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.chrome.step5'])}</li>
+        </ol>
+      </>
+    );
+  } else if (props.browserName === 'Firefox') {
+    return (
+      <>
+        <h6>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.firefox'])}</h6>
+        <ol>
+          <li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.firefox.step1'])}</li>
+          <li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.firefox.step2'])}</li>
+          <li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.firefox.step3'])}</li>
+          <li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.firefox.step4'])}</li>
+          <li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.firefox.step5'])}</li>
+          <li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.firefox.step6'])}</li>
+          <li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.firefox.step7'])}</li>
+        </ol>
+      </>
+    );
+  } else if (props.browserName === 'Safari') {
+    return (
+      <>
+        <h6>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.safari'])}</h6>
+        <ol>
+          <li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.safari.step1'])}</li>
+          <li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.safari.step2'])}</li>
+          <li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.safari.step3'])}</li>
+          <li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.safari.step4'])}</li>
+        </ol>
+      </>
+    );
+  }
+  return <></>;
+}
+
+EnableCameraDirectionsPanel.propTypes = {
+  intl: intlShape.isRequired,
+  browserName: PropTypes.string.isRequired,
+};
+
+export default injectIntl(EnableCameraDirectionsPanel);

src/id-verification/panels/GetNameIdPanel.jsx

@@ -0,0 +1,145 @@
+import React, { useContext, useState, useEffect, useRef } from 'react';
+import { Form } from '@edx/paragon';
+import { Link, useHistory } from 'react-router-dom';
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import { useNextPanelSlug } from '../routing-utilities';
+import BasePanel from './BasePanel';
+import { IdVerificationContext } from '../IdVerificationContext';
+
+import messages from '../IdVerification.messages';
+
+function GetNameIdPanel(props) {
+  const { push } = useHistory();
+  const panelSlug = 'get-name-id';
+  const [nameMatches, setNameMatches] = useState(true);
+  const nameInputRef = useRef();
+  const nextPanelSlug = useNextPanelSlug(panelSlug);
+
+  const {
+    nameOnAccount, userId, idPhotoName, setIdPhotoName,
+  } = useContext(IdVerificationContext);
+  const nameOnAccountValue = nameOnAccount || '';
+  const invalidName = !nameMatches && (!idPhotoName || idPhotoName === nameOnAccount);
+  const blankName = !nameOnAccount && !idPhotoName;
+
+  useEffect(() => {
+    setIdPhotoName('');
+  }, []);
+
+  useEffect(() => {
+    if (!nameMatches && nameInputRef.current) {
+      nameInputRef.current.focus();
+    }
+    if (!nameMatches) {
+      sendTrackEvent('edx.id_verification.name_change', {
+        category: 'id_verification',
+        user_id: userId,
+      });
+    }
+    if (blankName) {
+      setNameMatches(false);
+    }
+  }, [nameMatches, blankName]);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // If the input is empty, or if no changes have been made to the
+    // mismatching name, the user should not be able to proceed.
+    if (!invalidName && !blankName) {
+      push(nextPanelSlug);
+    }
+  };
+
+  return (
+    <BasePanel
+      name={panelSlug}
+      title={props.intl.formatMessage(messages['id.verification.account.name.title'])}
+    >
+      <p>
+        {props.intl.formatMessage(messages['id.verification.account.name.instructions'])}
+      </p>
+
+      <Form onSubmit={handleSubmit}>
+        <Form.Group>
+          <Form.Label htmlFor="nameMatchesYes">
+            {props.intl.formatMessage(messages['id.verification.account.name.radio.label'])}
+          </Form.Label>
+          <Form.Row>
+            <Form.Check
+              type="radio"
+              id="nameMatchesYes"
+              name="nameMatches"
+              data-testid="name-matches-yes"
+              label={props.intl.formatMessage(messages['id.verification.account.name.radio.yes'])}
+              checked={nameMatches}
+              disabled={!nameOnAccount}
+              inline
+              onChange={() => {
+                setNameMatches(true);
+                setIdPhotoName('');
+              }}
+            />
+            <Form.Check
+              type="radio"
+              id="nameMatchesNo"
+              name="nameMatches"
+              data-testid="name-matches-no"
+              label={props.intl.formatMessage(messages['id.verification.account.name.radio.no'])}
+              checked={!nameMatches}
+              disabled={!nameOnAccount}
+              inline
+              onChange={() => setNameMatches(false)}
+            />
+          </Form.Row>
+        </Form.Group>
+        <Form.Group>
+          <Form.Label htmlFor="photo-id-name">
+            {props.intl.formatMessage(messages['id.verification.account.name.label'])}
+          </Form.Label>
+          <Form.Control
+            controlId="photo-id-name"
+            size="lg"
+            type="text"
+            ref={nameInputRef}
+            readOnly={nameMatches}
+            isInvalid={invalidName || blankName}
+            aria-describedby="photo-id-name-feedback"
+            value={
+              !nameMatches ?
+                idPhotoName || nameOnAccountValue
+                : nameOnAccountValue
+            }
+            onChange={e => setIdPhotoName(e.target.value)}
+            data-testid="name-input"
+          />
+          <Form.Control.Feedback id="photo-id-name-feedback" type="invalid">
+            {props.intl.formatMessage(messages['id.verification.account.name.error'])}
+          </Form.Control.Feedback>
+        </Form.Group>
+      </Form>
+
+      <div className="action-row">
+        <Link
+          to={nextPanelSlug}
+          className={`btn btn-primary ${(invalidName || blankName) && 'disabled'}`}
+          data-testid="next-button"
+          aria-disabled={invalidName || blankName}
+        >
+          {
+            !nameMatches ?
+              props.intl.formatMessage(messages['id.verification.account.name.save'])
+              : props.intl.formatMessage(messages['id.verification.next'])
+          }
+        </Link>
+      </div>
+    </BasePanel>
+  );
+}
+
+GetNameIdPanel.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(GetNameIdPanel);

src/id-verification/panels/IdContextPanel.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import { useNextPanelSlug } from '../routing-utilities';
+import BasePanel from './BasePanel';
+import CameraHelp from '../CameraHelp';
+import messages from '../IdVerification.messages';
+
+function IdContextPanel(props) {
+  const panelSlug = 'id-context';
+  const nextPanelSlug = useNextPanelSlug(panelSlug);
+  return (
+    <BasePanel
+      name={panelSlug}
+      title={props.intl.formatMessage(messages['id.verification.id.tips.title'])}
+    >
+      <p>{props.intl.formatMessage(messages['id.verification.id.tips.description'])}</p>
+      <div className="card mb-4 shadow accent">
+        <div className="card-body">
+          <h6>
+            {props.intl.formatMessage(messages['id.verification.photo.tips.list.title'])}
+          </h6>
+          <p>
+            {props.intl.formatMessage(messages['id.verification.photo.tips.list.description'])}
+          </p>
+          <ul className="mb-0">
+            <li>
+              {props.intl.formatMessage(messages['id.verification.id.tips.list.well.lit'])}
+            </li>
+            <li>
+              {props.intl.formatMessage(messages['id.verification.id.tips.list.clear'])}
+            </li>
+          </ul>
+        </div>
+      </div>
+      <CameraHelp isOpen />
+      <div className="action-row">
+        <Link to={nextPanelSlug} className="btn btn-primary" data-testid="next-button">
+          {props.intl.formatMessage(messages['id.verification.next'])}
+        </Link>
+      </div>
+    </BasePanel>
+  );
+}
+
+IdContextPanel.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(IdContextPanel);

src/id-verification/panels/PortraitPhotoContextPanel.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import { useNextPanelSlug } from '../routing-utilities';
+import BasePanel from './BasePanel';
+import CameraHelp from '../CameraHelp';
+import messages from '../IdVerification.messages';
+
+function PortraitPhotoContextPanel(props) {
+  const panelSlug = 'portrait-photo-context';
+  const nextPanelSlug = useNextPanelSlug(panelSlug);
+  return (
+    <BasePanel
+      name={panelSlug}
+      title={props.intl.formatMessage(messages['id.verification.photo.tips.title'])}
+    >
+      <p>
+        {props.intl.formatMessage(messages['id.verification.photo.tips.description'])}
+      </p>
+      <div className="card mb-4 shadow accent">
+        <div className="card-body">
+          <h6>
+            {props.intl.formatMessage(messages['id.verification.photo.tips.list.title'])}
+          </h6>
+          <p>
+            {props.intl.formatMessage(messages['id.verification.photo.tips.list.description'])}
+          </p>
+          <ul className="mb-0">
+            <li>
+              {props.intl.formatMessage(messages['id.verification.photo.tips.list.well.lit'])}
+            </li>
+            <li>
+              {props.intl.formatMessage(messages['id.verification.photo.tips.list.inside.frame'])}
+            </li>
+          </ul>
+        </div>
+      </div>
+      <CameraHelp isOpen isPortrait />
+      <div className="action-row">
+        <Link to={nextPanelSlug} className="btn btn-primary" data-testid="next-button">
+          {props.intl.formatMessage(messages['id.verification.next'])}
+        </Link>
+      </div>
+    </BasePanel>
+  );
+}
+
+PortraitPhotoContextPanel.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(PortraitPhotoContextPanel);

src/id-verification/panels/RequestCameraAccessPanel.jsx

@@ -0,0 +1,116 @@
+import React, { useState, useEffect, useContext } from 'react';
+import { Link } from 'react-router-dom';
+import Bowser from 'bowser';
+import { getConfig } from '@edx/frontend-platform';
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
+import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
+
+import { useNextPanelSlug } from '../routing-utilities';
+import BasePanel from './BasePanel';
+import { IdVerificationContext, MEDIA_ACCESS } from '../IdVerificationContext';
+import { EnableCameraDirectionsPanel } from './EnableCameraDirectionsPanel';
+
+import messages from '../IdVerification.messages';
+
+function RequestCameraAccessPanel(props) {
+  const [returnUrl, setReturnUrl] = useState('dashboard');
+  const [returnText, setReturnText] = useState('id.verification.return.dashboard');
+  const panelSlug = 'request-camera-access';
+  const nextPanelSlug = useNextPanelSlug(panelSlug);
+  const { tryGetUserMedia, mediaAccess, userId } = useContext(IdVerificationContext);
+  const browserName = Bowser.parse(window.navigator.userAgent).browser.name;
+
+  useEffect(() => {
+    if (mediaAccess === MEDIA_ACCESS.UNSUPPORTED) {
+      sendTrackEvent('edx.id_verification.camera.unsupported', {
+        category: 'id_verification',
+        user_id: userId,
+      });
+    }
+    if (mediaAccess === MEDIA_ACCESS.DENIED) {
+      sendTrackEvent('edx.id_verification.camera.denied', {
+        category: 'id_verification',
+        user_id: userId,
+      });
+    }
+  }, [mediaAccess, userId]);
+
+  // If the user accessed IDV through a course,
+  // link back to that course rather than the dashboard
+  useEffect(() => {
+    if (sessionStorage.getItem('courseRunKey')) {
+      setReturnUrl(`courses/${sessionStorage.getItem('courseRunKey')}`);
+      setReturnText('id.verification.return.course');
+    }
+  }, []);
+
+  const getTitle = () => {
+    if (mediaAccess === MEDIA_ACCESS.GRANTED) {
+      return props.intl.formatMessage(messages['id.verification.camera.access.title.success']);
+    } else if ([MEDIA_ACCESS.UNSUPPORTED, MEDIA_ACCESS.DENIED].includes(mediaAccess)) {
+      return props.intl.formatMessage(messages['id.verification.camera.access.title.failed']);
+    }
+    return props.intl.formatMessage(messages['id.verification.camera.access.title']);
+  };
+
+  return (
+    <BasePanel
+      name={panelSlug}
+      title={getTitle()}
+    >
+      {mediaAccess === MEDIA_ACCESS.PENDING && (
+        <div>
+          <p>
+            <FormattedMessage
+              id="id.verification.request.camera.access.instructions"
+              defaultMessage="In order to take a photo using your webcam, you may receive a browser prompt for access to your camera. {clickAllow}"
+              description="Instructions to enable camera access."
+              values={{
+                clickAllow: <strong>{props.intl.formatMessage(messages['id.verification.camera.access.click.allow'])}</strong>,
+              }}
+            />
+          </p>
+          <div className="action-row">
+            <button className="btn btn-primary" onClick={tryGetUserMedia}>
+              {props.intl.formatMessage(messages['id.verification.camera.access.enable'])}
+            </button>
+          </div>
+        </div>
+      )}
+
+      {mediaAccess === MEDIA_ACCESS.GRANTED && (
+        <div>
+          <p data-testid="camera-access-success">
+            {props.intl.formatMessage(messages['id.verification.camera.access.success'])}
+          </p>
+          <div className="action-row">
+            <Link to={nextPanelSlug} className="btn btn-primary" data-testid="next-button">
+              {props.intl.formatMessage(messages['id.verification.next'])}
+            </Link>
+          </div>
+        </div>
+      )}
+
+      {[MEDIA_ACCESS.UNSUPPORTED, MEDIA_ACCESS.DENIED].includes(mediaAccess) && (
+        <div data-testid="camera-failure-instructions">
+          <p data-testid="camera-access-failure">
+            {props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary'])}
+          </p>
+          <EnableCameraDirectionsPanel browserName={browserName} intl={props.intl} />
+          <div className="action-row">
+            <a className="btn btn-primary" href={`${getConfig().LMS_BASE_URL}/${returnUrl}`}>
+              {props.intl.formatMessage(messages[returnText])}
+            </a>
+          </div>
+        </div>
+      )}
+
+    </BasePanel>
+  );
+}
+
+RequestCameraAccessPanel.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(RequestCameraAccessPanel);

src/id-verification/panels/ReviewRequirementsPanel.jsx

@@ -0,0 +1,89 @@
+import React, { useEffect, useContext } from 'react';
+import { Link } from 'react-router-dom';
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
+import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
+
+import { useNextPanelSlug } from '../routing-utilities';
+import BasePanel from './BasePanel';
+
+import { IdVerificationContext } from '../IdVerificationContext';
+import messages from '../IdVerification.messages';
+
+function ReviewRequirementsPanel(props) {
+  const { userId } = useContext(IdVerificationContext);
+  const panelSlug = 'review-requirements';
+  const nextPanelSlug = useNextPanelSlug(panelSlug);
+
+  useEffect(() => {
+    sendTrackEvent('edx.id_verification.started', {
+      category: 'id_verification',
+      user_id: userId,
+    });
+  }, [userId]);
+
+  return (
+    <BasePanel
+      name={panelSlug}
+      title={props.intl.formatMessage(messages['id.verification.requirements.title'])}
+      focusOnMount={false}
+    >
+      <p>
+        {props.intl.formatMessage(messages['id.verification.requirements.description'])}
+      </p>
+      <div className="card mb-4 shadow accent">
+        <div className="card-body">
+          <h6 aria-level="3">
+            {props.intl.formatMessage(messages['id.verification.requirements.card.device.title'])}
+          </h6>
+          <p className="mb-0">
+            <FormattedMessage
+              id="id.verification.requirements.card.device.text"
+              defaultMessage="You need a device that has a camera. If you receive a browser prompt for access to your camera, please make sure to click {allow}."
+              description="Text explaining that the user needs access to a camera."
+              values={{
+                allow: <strong>{props.intl.formatMessage(messages['id.verification.requirements.card.device.allow'])}</strong>,
+              }}
+            />
+          </p>
+        </div>
+      </div>
+      <div className="card mb-4 shadow accent">
+        <div className="card-body">
+          <h6 aria-level="3">
+            {props.intl.formatMessage(messages['id.verification.requirements.card.id.title'])}
+          </h6>
+          <p className="mb-0">
+            {props.intl.formatMessage(messages['id.verification.requirements.card.id.text'])}
+          </p>
+        </div>
+      </div>
+      <h4 aria-level="2" className="mb-3">
+        {props.intl.formatMessage(messages['id.verification.privacy.title'])}
+      </h4>
+      <h6 aria-level="3">
+        {props.intl.formatMessage(messages['id.verification.privacy.need.photo.question'])}
+      </h6>
+      <p>
+        {props.intl.formatMessage(messages['id.verification.privacy.need.photo.answer'])}
+      </p>
+      <h6 aria-level="3">
+        {props.intl.formatMessage(messages['id.verification.privacy.do.with.photo.question'])}
+      </h6>
+      <p>
+        {props.intl.formatMessage(messages['id.verification.privacy.do.with.photo.answer'])}
+      </p>
+
+      <div className="action-row">
+        <Link to={nextPanelSlug} className="btn btn-primary" data-testid="next-button">
+          {props.intl.formatMessage(messages['id.verification.next'])}
+        </Link>
+      </div>
+    </BasePanel>
+  );
+}
+
+ReviewRequirementsPanel.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(ReviewRequirementsPanel);

src/id-verification/panels/SubmittedPanel.jsx

@@ -0,0 +1,53 @@
+import React, { useState, useEffect, useContext } from 'react';
+import { getConfig } from '@edx/frontend-platform';
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import BasePanel from './BasePanel';
+
+import { IdVerificationContext } from '../IdVerificationContext';
+import messages from '../IdVerification.messages';
+
+function SubmittedPanel(props) {
+  const { userId } = useContext(IdVerificationContext);
+  const [returnUrl, setReturnUrl] = useState('dashboard');
+  const [returnText, setReturnText] = useState('id.verification.return.dashboard');
+  const panelSlug = 'submitted';
+
+  // If the user accessed IDV through a course,
+  // link back to that course rather than the dashboard
+  useEffect(() => {
+    if (sessionStorage.getItem('courseRunKey')) {
+      setReturnUrl(`courses/${sessionStorage.getItem('courseRunKey')}`);
+      setReturnText('id.verification.return.course');
+    }
+    sendTrackEvent('edx.id_verification.submitted', {
+      category: 'id_verification',
+      user_id: userId,
+    });
+  }, [userId]);
+
+  return (
+    <BasePanel
+      name={panelSlug}
+      title={props.intl.formatMessage(messages['id.verification.submitted.title'])}
+    >
+      <p>
+        {props.intl.formatMessage(messages['id.verification.submitted.text'])}
+      </p>
+      <a
+        className="btn btn-primary"
+        href={`${getConfig().LMS_BASE_URL}/${returnUrl}`}
+        data-testid="return-button"
+      >
+        {props.intl.formatMessage(messages[returnText])}
+      </a>
+    </BasePanel>
+  );
+}
+
+SubmittedPanel.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(SubmittedPanel);

src/id-verification/panels/SummaryPanel.jsx

@@ -0,0 +1,172 @@
+import React, { useState, useContext } from 'react';
+import { history } from '@edx/frontend-platform';
+import { Input, Button, Spinner, Alert } from '@edx/paragon';
+import { Link } from 'react-router-dom';
+import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
+
+import { submitIdVerification } from '../data/service';
+import { useNextPanelSlug } from '../routing-utilities';
+import BasePanel from './BasePanel';
+import { IdVerificationContext } from '../IdVerificationContext';
+import ImagePreview from '../ImagePreview';
+
+import messages from '../IdVerification.messages';
+import CameraHelpWithUpload from '../CameraHelpWithUpload';
+
+function SummaryPanel(props) {
+  const panelSlug = 'summary';
+  const nextPanelSlug = useNextPanelSlug(panelSlug);
+  const {
+    facePhotoFile,
+    idPhotoFile,
+    nameOnAccount,
+    idPhotoName,
+    stopUserMedia,
+  } = useContext(IdVerificationContext);
+  const nameToBeUsed = idPhotoName || nameOnAccount || '';
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submissionError, setSubmissionError] = useState(false);
+
+  function SubmitButton() {
+    async function handleClick() {
+      setIsSubmitting(true);
+      const verificationData = {
+        facePhotoFile,
+        idPhotoFile,
+        idPhotoName: nameToBeUsed,
+        courseRunKey: sessionStorage.getItem('courseRunKey'),
+      };
+      const result = await submitIdVerification(verificationData);
+      if (result.success) {
+        stopUserMedia();
+        history.push(nextPanelSlug);
+      } else {
+        stopUserMedia();
+        setIsSubmitting(false);
+        setSubmissionError(true);
+      }
+    }
+    return (
+      <Button
+        className="btn btn-primary"
+        title="Confirmation"
+        disabled={isSubmitting}
+        onClick={handleClick}
+        data-testid="submit-button"
+      >
+        {props.intl.formatMessage(messages['id.verification.review.confirm'])}
+      </Button>
+    );
+  }
+
+  return (
+    <BasePanel
+      name={panelSlug}
+      title={props.intl.formatMessage(messages['id.verification.review.title'])}
+    >
+      {submissionError &&
+      <Alert
+        variant="danger"
+        data-testid="submission-error"
+        dismissible
+        onClose={() => setSubmissionError(false)}
+      >
+        <FormattedMessage
+          id="idv.submission.alert.error"
+          defaultMessage={`
+            We encountered a technical error while trying to submit ID verification.
+            This might be a temporary issue, so please try again in a few minutes.
+            If the problem persists,
+            please go to {support_link} for help.
+          `}
+          values={{ support_link: <Alert.Link href="https://support.edx.org/hc/en-us">{props.intl.formatMessage(messages['id.verification.review.error'])}</Alert.Link> }}
+        />
+      </Alert>}
+      <p>
+        {props.intl.formatMessage(messages['id.verification.review.description'])}
+      </p>
+      <div className="row mb-4">
+        <div className="col-6">
+          <label htmlFor="photo-of-face">
+            {props.intl.formatMessage(messages['id.verification.review.portrait.label'])}
+          </label>
+          <ImagePreview
+            id="photo-of-face"
+            src={facePhotoFile}
+            alt={props.intl.formatMessage(messages['id.verification.review.portrait.alt'])}
+          />
+          <Link
+            className="btn btn-outline-primary"
+            to={{
+              pathname: 'take-portrait-photo',
+              state: { fromSummary: true },
+            }}
+            data-testid="portrait-retake"
+          >
+            {props.intl.formatMessage(messages['id.verification.review.portrait.retake'])}
+          </Link>
+        </div>
+        <div className="col-6">
+          <label htmlFor="photo-of-id/edit">
+            {props.intl.formatMessage(messages['id.verification.review.id.label'])}
+          </label>
+          <ImagePreview
+            id="photo-of-id"
+            src={idPhotoFile}
+            alt={props.intl.formatMessage(messages['id.verification.review.id.alt'])}
+          />
+          <Link
+            className="btn btn-outline-primary"
+            to={{
+              pathname: 'take-id-photo',
+              state: { fromSummary: true },
+            }}
+            data-testid="id-retake"
+          >
+            {props.intl.formatMessage(messages['id.verification.review.id.retake'])}
+          </Link>
+        </div>
+      </div>
+      <CameraHelpWithUpload />
+      <div className="form-group">
+        <label htmlFor="name-to-be-used">
+          {props.intl.formatMessage(messages['id.verification.account.name.label'])}
+        </label>
+        <div className="d-flex">
+          <Input
+            id="name-to-be-used"
+            type="text"
+            readOnly
+            value={nameToBeUsed}
+            onChange={() => {}}
+          />
+
+          <Link
+            className="btn btn-link ml-3 px-0"
+            to={{
+                pathname: 'get-name-id',
+                state: { fromSummary: true },
+              }}
+          >
+            <FormattedMessage
+              id="id.verification.account.name.edit"
+              defaultMessage="Edit{sr}"
+              description="Button to edit account name, with clarifying information for screen readers."
+              values={{
+                sr: <span className="sr-only">Account Name</span>,
+              }}
+            />
+          </Link>
+        </div>
+      </div>
+      <SubmitButton />{' '}
+      {isSubmitting && <Spinner animation="border" variant="primary" />}
+    </BasePanel>
+  );
+}
+
+SummaryPanel.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(SummaryPanel);

src/id-verification/panels/TakeIdPhotoPanel.jsx

@@ -0,0 +1,43 @@
+import React, { useContext } from 'react';
+import { Link } from 'react-router-dom';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import { useNextPanelSlug } from '../routing-utilities';
+import BasePanel from './BasePanel';
+import Camera from '../Camera';
+import { IdVerificationContext } from '../IdVerificationContext';
+
+import messages from '../IdVerification.messages';
+import CameraHelp from '../CameraHelp';
+
+function TakeIdPhotoPanel(props) {
+  const panelSlug = 'take-id-photo';
+  const nextPanelSlug = useNextPanelSlug(panelSlug);
+  const { setIdPhotoFile, idPhotoFile } = useContext(IdVerificationContext);
+
+  return (
+    <BasePanel
+      name={panelSlug}
+      title={props.intl.formatMessage(messages['id.verification.id.photo.title.camera'])}
+    >
+      <div>
+        <p>
+          {props.intl.formatMessage(messages['id.verification.id.photo.instructions.camera'])}
+        </p>
+        <Camera onImageCapture={setIdPhotoFile} isPortrait={false} />
+      </div>
+      <CameraHelp />
+      <div className="action-row" style={{ visibility: idPhotoFile ? 'unset' : 'hidden' }}>
+        <Link to={nextPanelSlug} className="btn btn-primary" data-testid="next-button">
+          {props.intl.formatMessage(messages['id.verification.next'])}
+        </Link>
+      </div>
+    </BasePanel>
+  );
+}
+
+TakeIdPhotoPanel.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(TakeIdPhotoPanel);

src/id-verification/panels/TakePortraitPhotoPanel.jsx

@@ -0,0 +1,61 @@
+import React, { useContext } from 'react';
+import { Link } from 'react-router-dom';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import { useNextPanelSlug } from '../routing-utilities';
+import BasePanel from './BasePanel';
+import ImageFileUpload from '../ImageFileUpload';
+import ImagePreview from '../ImagePreview';
+import Camera from '../Camera';
+import CameraHelp from '../CameraHelp';
+import { IdVerificationContext } from '../IdVerificationContext';
+
+import messages from '../IdVerification.messages';
+
+function TakePortraitPhotoPanel(props) {
+  const panelSlug = 'take-portrait-photo';
+  const nextPanelSlug = useNextPanelSlug(panelSlug);
+  const { setFacePhotoFile, facePhotoFile } = useContext(IdVerificationContext);
+  const shouldUseCamera = true;
+  // to reenable upload component:
+  // const shouldUseCamera = mediaAccess === MEDIA_ACCESS.GRANTED;
+
+  return (
+    <BasePanel
+      name={panelSlug}
+      title={shouldUseCamera ? props.intl.formatMessage(messages['id.verification.portrait.photo.title.camera']) : props.intl.formatMessage(messages['id.verification.portrait.photo.title.upload'])}
+    >
+      <div>
+        {facePhotoFile && !shouldUseCamera && <ImagePreview src={facePhotoFile} alt={props.intl.formatMessage(messages['id.verification.portrait.photo.preview.alt'])} />}
+
+        {shouldUseCamera ? (
+          <div>
+            <p>
+              {props.intl.formatMessage(messages['id.verification.portrait.photo.instructions.camera'])}
+            </p>
+            <Camera onImageCapture={setFacePhotoFile} isPortrait />
+          </div>
+        ) : (
+          <div>
+            <p>
+              {props.intl.formatMessage(messages['id.verification.portrait.photo.instructions.upload'])}
+            </p>
+            <ImageFileUpload onFileChange={setFacePhotoFile} />
+          </div>
+        )}
+      </div>
+      {shouldUseCamera && <CameraHelp isPortrait />}
+      <div className="action-row" style={{ visibility: facePhotoFile ? 'unset' : 'hidden' }}>
+        <Link to={nextPanelSlug} className="btn btn-primary" data-testid="next-button">
+          {props.intl.formatMessage(messages['id.verification.next'])}
+        </Link>
+      </div>
+    </BasePanel>
+  );
+}
+
+TakePortraitPhotoPanel.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(TakePortraitPhotoPanel);

src/id-verification/routing-utilities.js

@@ -0,0 +1,48 @@
+import { useContext } from 'react';
+import { useLocation } from 'react-router-dom';
+import { IdVerificationContext } from './IdVerificationContext';
+
+const panelSteps = [
+  'review-requirements',
+  'request-camera-access',
+  'portrait-photo-context',
+  'take-portrait-photo',
+  'id-context',
+  'take-id-photo',
+  'get-name-id',
+  'summary',
+  'submitted',
+];
+
+// eslint-disable-next-line import/prefer-default-export
+export const useNextPanelSlug = (originSlug) => {
+  // Go back to the summary view if that's where they came from
+  const location = useLocation();
+  const isFromSummary = location.state && location.state.fromSummary;
+  if (isFromSummary) {
+    return 'summary';
+  }
+
+  const nextIndex = panelSteps.indexOf(originSlug) + 1;
+  return nextIndex < panelSteps.length ? panelSteps[nextIndex] : null;
+};
+
+// check if the user is too far into the flow and if so, return the slug of the
+// furthest panel they are allow to be.
+export const useVerificationRedirectSlug = (slug) => {
+  const { facePhotoFile, idPhotoFile } = useContext(IdVerificationContext);
+  const indexOfCurrentPanel = panelSteps.indexOf(slug);
+
+  if (!facePhotoFile) {
+    if (indexOfCurrentPanel > panelSteps.indexOf('take-portrait-photo')) {
+      return 'portrait-photo-context';
+    }
+  } else if (!idPhotoFile) {
+    if (indexOfCurrentPanel > panelSteps.indexOf('take-id-photo')) {
+      return 'id-context';
+    }
+  }
+
+  // The user has satisfied requirements to view the panel they're on.
+  return null;
+};

src/id-verification/tests/Camera.test.jsx

@@ -0,0 +1,184 @@
+import React from 'react';
+import { Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+import '@testing-library/jest-dom/extend-expect';
+import { render, cleanup, screen, act, fireEvent } from '@testing-library/react';
+import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import * as blazeface from '@tensorflow-models/blazeface';
+import * as analytics from '@edx/frontend-platform/analytics';
+import { IdVerificationContext } from '../IdVerificationContext';
+import Camera from '../Camera';
+
+jest.mock('jslib-html5-camera-photo');
+jest.mock('@tensorflow-models/blazeface');
+jest.mock('@edx/frontend-platform/analytics');
+
+analytics.sendTrackEvent = jest.fn();
+
+window.HTMLMediaElement.prototype.play = () => {};
+
+const IntlCamera = injectIntl(Camera);
+
+const history = createMemoryHistory();
+
+describe('SubmittedPanel', () => {
+  const defaultProps = {
+    intl: {},
+    onImageCapture: jest.fn(),
+    isPortrait: true,
+  };
+
+  const idProps = {
+    intl: {},
+    onImageCapture: jest.fn(),
+    isPortrait: false,
+  };
+
+  const contextValue = {};
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('takes photo', async () => {
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlCamera {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+    const button = await screen.findByRole('button');
+    expect(button).toHaveTextContent('Take Photo');
+    fireEvent.click(button);
+    expect(defaultProps.onImageCapture).toHaveBeenCalled();
+  });
+
+  it('shows correct help text for portrait photo capture', async () => {
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlCamera {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+    const helpText = screen.getByTestId('videoDetectionHelpText');
+    expect(helpText.textContent).toEqual(expect.stringContaining('Your face can be seen clearly'));
+  });
+
+  it('shows correct help text for id photo capture', async () => {
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlCamera {...idProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+    const helpText = screen.getByTestId('videoDetectionHelpText');
+    expect(helpText.textContent).toEqual(expect.stringContaining('The face can be seen clearly'));
+  });
+
+  it('shows spinner when loading face detection', async () => {
+    blazeface.load = jest.fn().mockResolvedValue({ estimateFaces: jest.fn().mockResolvedValue([]) });
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlCamera {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+
+    await fireEvent.loadedData(screen.queryByTestId('video'));
+    const checkbox = await screen.findByLabelText('Enable Face Detection');
+    fireEvent.click(checkbox);
+    expect(screen.queryByTestId('spinner')).toBeDefined();
+  });
+
+  it('canvas is visible when detection is enabled', async () => {
+    blazeface.load = jest.fn().mockResolvedValue({ estimateFaces: jest.fn().mockResolvedValue([]) });
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlCamera {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+
+    await fireEvent.loadedData(screen.queryByTestId('video'));
+    expect(screen.queryByTestId('detection-canvas')).toHaveStyle('display:none');
+    const checkbox = await screen.findByLabelText('Enable Face Detection');
+    await fireEvent.click(checkbox);
+    expect(screen.queryByTestId('detection-canvas')).toHaveStyle('display:block');
+  });
+
+  it('blazeface is called when detection is enabled', async () => {
+    blazeface.load = jest.fn().mockResolvedValue({ estimateFaces: jest.fn().mockResolvedValue([]) });
+
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlCamera {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+
+    await fireEvent.loadedData(screen.queryByTestId('video'));
+    const checkbox = await screen.findByLabelText('Enable Face Detection');
+    await fireEvent.click(checkbox);
+    setTimeout(() => { expect(blazeface.load).toHaveBeenCalled(); }, 2000);
+  });
+
+  it('sends tracking events on portrait photo page', async () => {
+    blazeface.load = jest.fn().mockResolvedValue({ estimateFaces: jest.fn().mockResolvedValue([]) });
+
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlCamera {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+
+    await fireEvent.loadedData(screen.queryByTestId('video'));
+    const checkbox = await screen.findByLabelText('Enable Face Detection');
+    await fireEvent.click(checkbox);
+    expect(analytics.sendTrackEvent).toHaveBeenCalledWith('edx.id_verification.user_photo.face_detection_enabled');
+    await fireEvent.click(checkbox);
+    expect(analytics.sendTrackEvent).toHaveBeenCalledWith('edx.id_verification.user_photo.face_detection_disabled');
+  });
+
+  it('sends tracking events on id photo page', async () => {
+    blazeface.load = jest.fn().mockResolvedValue({ estimateFaces: jest.fn().mockResolvedValue([]) });
+
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlCamera {...idProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+
+    await fireEvent.loadedData(screen.queryByTestId('video'));
+    const checkbox = await screen.findByLabelText('Enable Face Detection');
+    await fireEvent.click(checkbox);
+    expect(analytics.sendTrackEvent).toHaveBeenCalledWith('edx.id_verification.id_photo.face_detection_enabled');
+    await fireEvent.click(checkbox);
+    expect(analytics.sendTrackEvent).toHaveBeenCalledWith('edx.id_verification.id_photo.face_detection_disabled');
+  });
+});

src/id-verification/tests/ExistingRequest.test.jsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+import { render, cleanup, act, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import '@edx/frontend-platform/analytics';
+import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import ExistingRequest from '../ExistingRequest';
+
+const IntlExistingRequest = injectIntl(ExistingRequest);
+
+const history = createMemoryHistory();
+
+describe('ExistingRequest', () => {
+  const defaultProps = {
+    intl: {},
+    status: '',
+  };
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('renders correctly when status is pending', async () => {
+    defaultProps.status = 'pending';
+
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IntlExistingRequest {...defaultProps} />
+        </IntlProvider>
+      </Router>
+    )));
+
+    const text = screen.getByText(/You have already submitted your verification information./);
+
+    expect(text).toBeInTheDocument();
+  });
+
+  it('renders correctly when status is approved', async () => {
+    defaultProps.status = 'approved';
+
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IntlExistingRequest {...defaultProps} />
+        </IntlProvider>
+      </Router>
+    )));
+
+    const text = screen.getByText(/You have already submitted your verification information./);
+
+    expect(text).toBeInTheDocument();
+  });
+
+  it('renders correctly when status is denied', async () => {
+    defaultProps.status = 'denied';
+
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IntlExistingRequest {...defaultProps} />
+        </IntlProvider>
+      </Router>
+    )));
+
+    const text = screen.getByText(/You cannot verify your identity at this time./);
+
+    expect(text).toBeInTheDocument();
+  });
+});

src/id-verification/tests/IdVerificationContext.test.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { render, cleanup, act } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { AppContext } from '@edx/frontend-platform/react';
+import { getExistingIdVerification } from '../data/service';
+import { IdVerificationContextProvider } from '../IdVerificationContext';
+
+jest.mock('../data/service', () => ({
+  getExistingIdVerification: jest.fn(),
+}));
+
+describe('IdVerificationContext', () => {
+  const defaultProps = {
+    children: <div />,
+    intl: {},
+  };
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('renders correctly and calls getExistingIdVerification', async () => {
+    await act(async () => render((
+      <AppContext.Provider value={{ authenticatedUser: { userId: 3 } }}>
+        <IntlProvider locale="en">
+          <IdVerificationContextProvider {...defaultProps} />
+        </IntlProvider>
+      </AppContext.Provider>
+    )));
+    expect(getExistingIdVerification).toHaveBeenCalled();
+  });
+});

src/id-verification/tests/panels/GetNameIdPanel.test.jsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+import { render, cleanup, act, screen, fireEvent } from '@testing-library/react';
+import '@edx/frontend-platform/analytics';
+import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import { IdVerificationContext } from '../../IdVerificationContext';
+import GetNameIdPanel from '../../panels/GetNameIdPanel';
+
+jest.mock('@edx/frontend-platform/analytics', () => ({
+  sendTrackEvent: jest.fn(),
+}));
+
+const IntlGetNameIdPanel = injectIntl(GetNameIdPanel);
+
+const history = createMemoryHistory();
+
+describe('GetNameIdPanel', () => {
+  const defaultProps = {
+    intl: {},
+  };
+
+  const contextValue = {
+    nameOnAccount: 'test',
+    userId: 3,
+    idPhotoName: '',
+    setIdPhotoName: jest.fn(),
+    facePhotoFile: 'test.jpg',
+    idPhotoFile: 'test.jpg',
+  };
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('edits', async () => {
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlGetNameIdPanel {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+    const yesButton = await screen.findByTestId('name-matches-yes');
+    const noButton = await screen.findByTestId('name-matches-no');
+    const input = await screen.findByTestId('name-input');
+    const nextButton = await screen.findByTestId('next-button');
+    expect(input).toHaveProperty('readOnly');
+    fireEvent.click(noButton);
+    expect(input).toHaveProperty('readOnly', false);
+    expect(nextButton.classList.contains('disabled')).toBe(true);
+    fireEvent.change(input, { target: { value: 'test change' } });
+    expect(contextValue.setIdPhotoName).toHaveBeenCalled();
+    fireEvent.click(yesButton);
+    expect(input).toHaveProperty('readOnly');
+    expect(contextValue.setIdPhotoName).toHaveBeenCalled();
+  });
+
+  it('disables radio buttons + next button and enables input if account name is blank', async () => {
+    contextValue.nameOnAccount = '';
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlGetNameIdPanel {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+    const yesButton = await screen.findByTestId('name-matches-yes');
+    const noButton = await screen.findByTestId('name-matches-no');
+    const input = await screen.findByTestId('name-input');
+    const nextButton = await screen.findByTestId('next-button');
+    expect(yesButton).toHaveProperty('disabled');
+    expect(noButton).toHaveProperty('disabled');
+    expect(input).toHaveProperty('readOnly', false);
+    expect(nextButton.classList.contains('disabled')).toBe(true);
+  });
+
+  it('routes to SummaryPanel', async () => {
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlGetNameIdPanel {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+    const button = await screen.findByTestId('next-button');
+    fireEvent.click(button);
+    expect(history.location.pathname).toEqual('/summary');
+  });
+});

src/id-verification/tests/panels/IdContextPanel.test.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+import { render, cleanup, act, screen, fireEvent } from '@testing-library/react';
+import '@edx/frontend-platform/analytics';
+import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import { IdVerificationContext } from '../../IdVerificationContext';
+import IdContextPanel from '../../panels/IdContextPanel';
+
+jest.mock('@edx/frontend-platform/analytics', () => ({
+  sendTrackEvent: jest.fn(),
+}));
+
+const IntlIdContextPanel = injectIntl(IdContextPanel);
+
+const history = createMemoryHistory();
+
+describe('IdContextPanel', () => {
+  const defaultProps = {
+    intl: {},
+  };
+
+  const contextValue = {
+    facePhotoFile: 'test.jpg',
+  };
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('routes to TakeIdPhotoPanel', async () => {
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlIdContextPanel {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+    const button = await screen.findByTestId('next-button');
+    fireEvent.click(button);
+    expect(history.location.pathname).toEqual('/take-id-photo');
+  });
+});

src/id-verification/tests/panels/PortraitPhotoContextPanel.test.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+import { render, cleanup, act, screen, fireEvent } from '@testing-library/react';
+import '@edx/frontend-platform/analytics';
+import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import PortraitPhotoContextPanel from '../../panels/PortraitPhotoContextPanel';
+
+jest.mock('@edx/frontend-platform/analytics', () => ({
+  sendTrackEvent: jest.fn(),
+}));
+
+const IntlPortraitPhotoContextPanel = injectIntl(PortraitPhotoContextPanel);
+
+const history = createMemoryHistory();
+
+describe('PortraitPhotoContextPanel', () => {
+  const defaultProps = {
+    intl: {},
+  };
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('routes to TakePortraitPhotoPanel', async () => {
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IntlPortraitPhotoContextPanel {...defaultProps} />
+        </IntlProvider>
+      </Router>
+    )));
+    const button = await screen.findByTestId('next-button');
+    fireEvent.click(button);
+    expect(history.location.pathname).toEqual('/take-portrait-photo');
+  });
+});

src/id-verification/tests/panels/RequestCameraAccessPanel.test.jsx

@@ -0,0 +1,164 @@
+import React from 'react';
+import { Router } from 'react-router-dom';
+import Bowser from 'bowser';
+import { createMemoryHistory } from 'history';
+import { render, screen, cleanup, act, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import { IdVerificationContext } from '../../IdVerificationContext';
+import RequestCameraAccessPanel from '../../panels/RequestCameraAccessPanel';
+
+jest.mock('@edx/frontend-platform/analytics', () => ({
+  sendTrackEvent: jest.fn(),
+}));
+
+jest.mock('bowser');
+
+const history = createMemoryHistory();
+
+const IntlRequestCameraAccessPanel = injectIntl(RequestCameraAccessPanel);
+
+describe('RequestCameraAccessPanel', () => {
+  const defaultProps = {
+    intl: {},
+  };
+
+  const contextValue = {
+    tryGetUserMedia: jest.fn(),
+  };
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('renders correctly with media access pending', async () => {
+    contextValue.mediaAccess = 'pending';
+    Bowser.parse = jest.fn().mockReturnValue({ browser: { name: '' } });
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlRequestCameraAccessPanel {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+    const button = await screen.getByRole('button');
+    expect(button).toHaveTextContent(/Enable Camera/);
+  });
+
+  it('renders correctly with media access granted and routes to PortraitPhotoContextPanel', async () => {
+    contextValue.mediaAccess = 'granted';
+    Bowser.parse = jest.fn().mockReturnValue({ browser: { name: '' } });
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlRequestCameraAccessPanel {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+    const text = await screen.findByTestId('camera-access-success');
+    expect(text).toHaveTextContent(/Looks like your camera is working and ready./);
+    const button = await screen.findByTestId('next-button');
+    fireEvent.click(button);
+    expect(history.location.pathname).toEqual('/portrait-photo-context');
+  });
+
+  it('renders correctly with media access denied', async () => {
+    contextValue.mediaAccess = 'denied';
+    Bowser.parse = jest.fn().mockReturnValue({ browser: { name: '' } });
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlRequestCameraAccessPanel {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+    const text = await screen.findByTestId('camera-access-failure');
+    expect(text).toHaveTextContent(/It looks like we're unable to access your camera./);
+  });
+
+  it('renders correctly with media access unsupported', async () => {
+    contextValue.mediaAccess = 'unsupported';
+    Bowser.parse = jest.fn().mockReturnValue({ browser: { name: '' } });
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlRequestCameraAccessPanel {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+    const text = await screen.findByTestId('camera-access-failure');
+    expect(text).toHaveTextContent(/It looks like we're unable to access your camera./);
+  });
+
+  it('renders correct directions for Chrome with media access denied', async () => {
+    contextValue.mediaAccess = 'denied';
+    Bowser.parse = jest.fn().mockReturnValue({ browser: { name: 'Chrome' } });
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlRequestCameraAccessPanel {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+    const text = await screen.findByTestId('camera-failure-instructions');
+    expect(text).toHaveTextContent(/Open Chrome./);
+  });
+
+  it('renders correct directions for Firefox with media access denied', async () => {
+    contextValue.mediaAccess = 'denied';
+    Bowser.parse = jest.fn().mockReturnValue({ browser: { name: 'Firefox' } });
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlRequestCameraAccessPanel {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+    const text = await screen.findByTestId('camera-failure-instructions');
+    expect(text).toHaveTextContent(/Open Firefox./);
+  });
+
+  it('renders correct directions for Safari with media access denied', async () => {
+    contextValue.mediaAccess = 'denied';
+    Bowser.parse = jest.fn().mockReturnValue({ browser: { name: 'Safari' } });
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlRequestCameraAccessPanel {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+    const text = await screen.findByTestId('camera-failure-instructions');
+    expect(text).toHaveTextContent(/Open Safari./);
+  });
+
+  it('renders correct directions for IE11 with media access denied', async () => {
+    contextValue.mediaAccess = 'denied';
+    Bowser.parse = jest.fn().mockReturnValue({ browser: { name: 'Internet Explorer' } });
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlRequestCameraAccessPanel {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+    const text = await screen.findByTestId('camera-failure-instructions');
+    expect(text).toHaveTextContent(/Open the Flash Player/);
+  });
+});

src/id-verification/tests/panels/ReviewRequirementsPanel.test.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+import { render, cleanup, act, screen, fireEvent } from '@testing-library/react';
+import '@edx/frontend-platform/analytics';
+import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import ReviewRequirementsPanel from '../../panels/ReviewRequirementsPanel';
+
+jest.mock('@edx/frontend-platform/analytics', () => ({
+  sendTrackEvent: jest.fn(),
+}));
+
+const IntlReviewRequirementsPanel = injectIntl(ReviewRequirementsPanel);
+
+const history = createMemoryHistory();
+
+describe('ReviewRequirementsPanel', () => {
+  const defaultProps = {
+    intl: {},
+  };
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('routes to RequestCameraAccessPanel', async () => {
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IntlReviewRequirementsPanel {...defaultProps} />
+        </IntlProvider>
+      </Router>
+    )));
+    const button = await screen.findByTestId('next-button');
+    fireEvent.click(button);
+    expect(history.location.pathname).toEqual('/request-camera-access');
+  });
+});

src/id-verification/tests/panels/SubmittedPanel.test.jsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+import '@testing-library/jest-dom/extend-expect';
+import { render, cleanup, act, screen } from '@testing-library/react';
+import '@edx/frontend-platform/analytics';
+import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import { IdVerificationContext } from '../../IdVerificationContext';
+import SubmittedPanel from '../../panels/SubmittedPanel';
+
+jest.mock('@edx/frontend-platform/analytics', () => ({
+  sendTrackEvent: jest.fn(),
+}));
+
+const IntlSubmittedPanel = injectIntl(SubmittedPanel);
+
+const history = createMemoryHistory();
+
+describe('SubmittedPanel', () => {
+  const defaultProps = {
+    intl: {},
+  };
+
+  const contextValue = {
+    facePhotoFile: 'test.jpg',
+    idPhotoFile: 'test.jpg',
+  };
+
+  beforeEach(() => {
+    global.sessionStorage.getItem = jest.fn();
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('links to dashboard without courseRunKey', async () => {
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlSubmittedPanel {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+    const button = await screen.findByTestId('return-button');
+    expect(button).toHaveTextContent(/Return to Your Dashboard/);
+  });
+
+  it('links to course with courseRunKey', async () => {
+    Storage.prototype.getItem = jest.fn(() => 'courseRunKey');
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlSubmittedPanel {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+    const button = await screen.findByTestId('return-button');
+    expect(button).toHaveTextContent(/Return to Course/);
+  });
+});

src/id-verification/tests/panels/SummaryPanel.test.jsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+import { render, cleanup, act, screen, fireEvent, waitFor } from '@testing-library/react';
+import '@edx/frontend-platform/analytics';
+import '@testing-library/jest-dom/extend-expect';
+import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import * as dataService from '../../data/service';
+import { IdVerificationContext } from '../../IdVerificationContext';
+import SummaryPanel from '../../panels/SummaryPanel';
+
+jest.mock('@edx/frontend-platform/analytics', () => ({
+  sendTrackEvent: jest.fn(),
+}));
+
+jest.mock('../../data/service');
+dataService.submitIdVerification = jest.fn().mockReturnValue({ success: true });
+
+const IntlSummaryPanel = injectIntl(SummaryPanel);
+
+const history = createMemoryHistory();
+
+describe('SummaryPanel', () => {
+  const defaultProps = {
+    intl: {},
+  };
+
+  const contextValue = {
+    facePhotoFile: 'test.jpg',
+    idPhotoFile: 'test.jpg',
+    nameOnAccount: '',
+    idPhotoName: '',
+    stopUserMedia: jest.fn(),
+  };
+
+  beforeEach(async () => {
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlSummaryPanel {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('routes back to TakePortraitPhotoPanel', async () => {
+    const button = await screen.findByTestId('portrait-retake');
+    fireEvent.click(button);
+    expect(history.location.pathname).toEqual('/take-portrait-photo');
+    expect(history.location.state.fromSummary).toEqual(true);
+  });
+
+  it('routes back to TakeIdPhotoPanel', async () => {
+    const button = await screen.findByTestId('id-retake');
+    fireEvent.click(button);
+    expect(history.location.pathname).toEqual('/take-id-photo');
+    expect(history.location.state.fromSummary).toEqual(true);
+  });
+
+  it('allows user to upload ID photo', async () => {
+    const collapsible = await screen.getAllByRole('button', { 'aria-expanded': false })[0];
+    fireEvent.click(collapsible);
+    const uploadButton = await screen.getByTestId('fileUpload');
+    expect(uploadButton).toBeVisible();
+  });
+
+  it('submits', async () => {
+    const button = await screen.findByTestId('submit-button');
+    fireEvent.click(button);
+    expect(dataService.submitIdVerification).toHaveBeenCalled();
+    await waitFor(() => expect(contextValue.stopUserMedia).toHaveBeenCalled());
+  });
+
+  it('shows error when cannot submit', async () => {
+    await cleanup();
+    dataService.submitIdVerification = jest.fn().mockReturnValue({ success: false });
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlSummaryPanel {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+    const button = await screen.findByTestId('submit-button');
+    await act(async () => fireEvent.click(button));
+    expect(dataService.submitIdVerification).toHaveBeenCalled();
+    const error = await screen.getByTestId('submission-error');
+    expect(error).toBeDefined();
+  });
+});

src/id-verification/tests/panels/TakeIdPhotoPanel.test.jsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+import { render, cleanup, act, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import { IdVerificationContext } from '../../IdVerificationContext';
+import TakeIdPhotoPanel from '../../panels/TakeIdPhotoPanel';
+
+jest.mock('@edx/frontend-platform/analytics', () => ({
+  sendTrackEvent: jest.fn(),
+}));
+
+jest.mock('../../Camera');
+
+const history = createMemoryHistory();
+
+const IntlTakeIdPhotoPanel = injectIntl(TakeIdPhotoPanel);
+
+describe('TakeIdPhotoPanel', () => {
+  const defaultProps = {
+    intl: {},
+  };
+
+  const contextValue = {
+    facePhotoFile: 'test.jpg',
+    idPhotoFile: null,
+    setIdPhotoFile: jest.fn(),
+  };
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('doesn\'t show next button before photo is taken', async () => {
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlTakeIdPhotoPanel {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+    const button = await screen.findByTestId('next-button');
+    expect(button).not.toBeVisible();
+  });
+
+  it('shows next button after photo is taken and routes to GetNameIdPanel', async () => {
+    contextValue.idPhotoFile = 'test.jpg';
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlTakeIdPhotoPanel {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+    const button = await screen.findByTestId('next-button');
+    expect(button).toBeVisible();
+    fireEvent.click(button);
+    expect(history.location.pathname).toEqual('/get-name-id');
+  });
+
+  it('routes back to SummaryPanel if that was the source', async () => {
+    contextValue.idPhotoFile = 'test.jpg';
+    history.location.state = { fromSummary: true };
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlTakeIdPhotoPanel {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+    const button = await screen.findByTestId('next-button');
+    fireEvent.click(button);
+    expect(history.location.pathname).toEqual('/summary');
+  });
+});

src/id-verification/tests/panels/TakePortraitPhotoPanel.test.jsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+import { render, cleanup, act, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import { IdVerificationContext } from '../../IdVerificationContext';
+import TakePortraitPhotoPanel from '../../panels/TakePortraitPhotoPanel';
+
+jest.mock('@edx/frontend-platform/analytics', () => ({
+  sendTrackEvent: jest.fn(),
+}));
+
+jest.mock('../../Camera');
+
+const history = createMemoryHistory();
+
+const IntlTakePortraitPhotoPanel = injectIntl(TakePortraitPhotoPanel);
+
+describe('TakePortraitPhotoPanel', () => {
+  const defaultProps = {
+    intl: {},
+  };
+
+  const contextValue = {
+    facePhotoFile: null,
+    setFacePhotoFile: jest.fn(),
+  };
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('doesn\'t show next button before photo is taken', async () => {
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlTakePortraitPhotoPanel {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+    const button = await screen.findByTestId('next-button');
+    expect(button).not.toBeVisible();
+  });
+
+  it('shows next button after photo is taken and routes to IdContextPanel', async () => {
+    contextValue.facePhotoFile = 'test.jpg';
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlTakePortraitPhotoPanel {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+    const button = await screen.findByTestId('next-button');
+    expect(button).toBeVisible();
+    fireEvent.click(button);
+    expect(history.location.pathname).toEqual('/id-context');
+  });
+
+  it('routes back to SummaryPanel if that was the source', async () => {
+    contextValue.facePhotoFile = 'test.jpg';
+    history.location.state = { fromSummary: true };
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlTakePortraitPhotoPanel {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+    const button = await screen.findByTestId('next-button');
+    fireEvent.click(button);
+    expect(history.location.pathname).toEqual('/summary');
+  });
+});

src/index.jsx

@@ -11,6 +11,7 @@ import Footer, { messages as footerMessages } from '@edx/frontend-component-foot
 
 import configureStore from './data/configureStore';
 import AccountSettingsPage, { NotFoundPage } from './account-settings';
+import IdVerificationPage from './id-verification';
 import CoachingConsent from './account-settings/coaching/CoachingConsent';
 import appMessages from './i18n';
 
@@ -18,11 +19,11 @@ import './index.scss';
 import './assets/favicon.ico';
 
 const HeaderFooterLayout = ({ children }) => (
-  <div>
+  <div className="d-flex flex-column" style={{ minHeight: '100vh' }}>
     <Header />
-      <main>
-        {children}
-      </main>
+    <main className="flex-grow-1">
+      {children}
+    </main>
     <Footer />
   </div>
 );
@@ -33,9 +34,12 @@ subscribe(APP_READY, () => {
       <Switch>
         <Route path="/coaching_consent" component={CoachingConsent} />
         <HeaderFooterLayout>
-          <Route exact path="/" component={AccountSettingsPage} />
-          <Route path="/notfound" component={NotFoundPage} />
-          <Route path="*" component={NotFoundPage} />
+          <Switch>
+            <Route path="/id-verification" component={IdVerificationPage} />
+            <Route exact path="/" component={AccountSettingsPage} />
+            <Route path="/notfound" component={NotFoundPage} />
+            <Route path="*" component={NotFoundPage} />
+          </Switch>
         </HeaderFooterLayout>
       </Switch>
     </AppProvider>,
@@ -60,6 +64,8 @@ initialize({
       mergeConfig({
         SUPPORT_URL: process.env.SUPPORT_URL,
         COACHING_ENABLED: (process.env.COACHING_ENABLED || false),
+        ENABLE_DEMOGRAPHICS_COLLECTION: (process.env.ENABLE_DEMOGRAPHICS_COLLECTION || false),
+        DEMOGRAPHICS_BASE_URL: process.env.DEMOGRAPHICS_BASE_URL,
       }, 'App loadConfig override handler');
     },
   },

src/index.scss

@@ -8,6 +8,7 @@ $fa-font-path: "~font-awesome/fonts";
 @import "~@edx/frontend-component-footer/dist/footer";
 
 @import "./account-settings/style";
+@import "./id-verification/id-verification";
 
 .word-break-all {
   word-break: break-all !important;
@@ -50,3 +51,13 @@ $fa-font-path: "~font-awesome/fonts";
     font-size: 	0.75rem;
   }
 }
+
+.checkboxOption {
+  input:focus {
+    outline: -webkit-focus-ring-color auto 5px;
+  }
+
+  label {
+    font-weight: normal;
+  }
+}

webpack.prod.config.js

@@ -1,21 +0,0 @@
-const glob = require('glob');
-const PurgecssPlugin = require('purgecss-webpack-plugin');
-const { createConfig } = require('@edx/frontend-build');
-
-module.exports = createConfig('webpack-prod', {
-  plugins: [
-    // Scan files for class names and ids and remove unused css
-    new PurgecssPlugin({
-      paths: [].concat(
-        // Scan files in this app
-        glob.sync('src/**/*', { nodir: true }),
-        // Scan files in any edx frontend-component
-        glob.sync('node_modules/@edx/frontend-component*/**/*', { nodir: true }),
-        // Scan files in paragon
-        glob.sync('node_modules/@edx/paragon/**/*', { nodir: true }),
-      ),
-      // Protect react-css-transition class names
-      whitelistPatterns: [/-enter/, /-appear/, /-exit/],
-    }),
-  ],
-});