fix(deps): update dependency @edx/frontend-platform to v1.9.5 (#190)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

.env

@@ -13,7 +13,13 @@ NODE_ENV=null
 ORDER_HISTORY_URL=null
 REFRESH_ACCESS_TOKEN_ENDPOINT=null
 SEGMENT_KEY=null
-SITE_NAME=null
+SITE_NAME=''
 SUPPORT_URL=null
 USER_INFO_COOKIE_NAME=null
-ENTERPRISE_LEARNER_PORTAL_HOSTNAME=null
+LOGO_URL=''
+LOGO_TRADEMARK_URL=''
+LOGO_WHITE_URL=''
+FAVICON_URL=''
+PUBLISHER_BASE_URL=
+STUDIO_BASE_URL=
+DISCOVERY_API_BASE_URL=

.env.development

@@ -14,10 +14,16 @@ ORDER_HISTORY_URL='localhost:1996/orders'
 PORT=1997
 REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
 SEGMENT_KEY=null
-SITE_NAME='edX'
+SITE_NAME=localhost
 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'
+LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
+LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
+LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
+FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
+PUBLISHER_BASE_URL=
+STUDIO_BASE_URL=
+DISCOVERY_API_BASE_URL=

.env.test

@@ -13,8 +13,15 @@ NODE_ENV=null
 ORDER_HISTORY_URL='localhost:1996/orders'
 REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
 SEGMENT_KEY=null
-SITE_NAME='edX'
+SITE_NAME=localhost
 SUPPORT_URL='http://localhost:18000/support'
 USER_INFO_COOKIE_NAME='edx-user-info'
 COACHING_ENABLED=''
 ENABLE_DEMOGRAPHICS_COLLECTION=''
+LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
+LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
+LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
+FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
+PUBLISHER_BASE_URL=
+STUDIO_BASE_URL=
+DISCOVERY_API_BASE_URL=

.gitignore

@@ -16,3 +16,4 @@ temp/babel-plugin-react-intl
 *~
 /temp
 /.vscode
+/module.config.js

README.rst

@@ -41,8 +41,8 @@ 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>`__.
 
-.. |Build Status| image:: https://api.travis-ci.org/edx/frontend-app-account.svg?branch=master
-   :target: https://travis-ci.org/edx/frontend-app-account
+.. |Build Status| image:: https://api.travis-ci.com/edx/frontend-app-account.svg?branch=master
+   :target: https://travis-ci.com/edx/frontend-app-account
 .. |Codecov| image:: https://img.shields.io/codecov/c/github/edx/frontend-app-account
    :target: https://codecov.io/gh/edx/frontend-app-account
 .. |npm_version| image:: https://img.shields.io/npm/v/@edx/frontend-app-account.svg

package.json

@@ -12,7 +12,7 @@
     "build": "fedx-scripts webpack",
     "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
     "is-es5": "es-check es5 ./dist/*.js",
-    "lint": "fedx-scripts eslint",
+    "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
     "test": "fedx-scripts jest --coverage --passWithNoTests"
@@ -29,24 +29,27 @@
     "ie 11"
   ],
   "dependencies": {
-    "@edx/frontend-component-footer": "10.0.11",
-    "@edx/frontend-component-header": "2.0.5",
-    "@edx/frontend-platform": "1.1.14",
-    "@edx/paragon": "9.1.1",
-    "@fortawesome/fontawesome-svg-core": "1.2.30",
+    "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
+    "@edx/frontend-component-footer": "10.1.4",
+    "@edx/frontend-component-header": "2.2.4",
+    "@edx/frontend-platform": "1.9.5",
+    "@edx/paragon": "13.1.2",
+    "@fortawesome/fontawesome-svg-core": "1.2.34",
     "@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.11",
+    "@fortawesome/react-fontawesome": "0.1.14",
+    "@tensorflow-models/blazeface": "0.0.7",
+    "@tensorflow/tfjs-converter": "1.6.1",
+    "@tensorflow/tfjs-core": "1.6.1",
     "babel-polyfill": "6.26.0",
-    "bowser": "^2.10.0",
+    "bowser": "2.10.0",
     "classnames": "2.2.6",
     "font-awesome": "4.7.0",
     "form-urlencoded": "4.0.1",
     "formdata-polyfill": "3.0.20",
     "history": "4.10.1",
-    "jslib-html5-camera-photo": "^3.1.3",
-    "lodash.camelcase": "4.3.0",
+    "jslib-html5-camera-photo": "3.1.6",
     "lodash.debounce": "4.0.8",
     "lodash.findindex": "4.6.0",
     "lodash.get": "4.4.2",
@@ -54,12 +57,11 @@
     "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",
+    "lodash.pickby": "4.6.0",
     "memoize-one": "5.1.1",
     "newrelic": "5.13.1",
     "prop-types": "15.7.2",
-    "qs": "6.9.4",
+    "qs": "6.9.6",
     "react": "16.10.2",
     "react-dom": "16.10.2",
     "react-redux": "7.1.3",
@@ -74,18 +76,17 @@
     "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",
-    "@testing-library/jest-dom": "^5.11.2",
-    "@testing-library/react": "^10.4.7",
+    "@edx/frontend-build": "5.6.9",
+    "@testing-library/jest-dom": "5.11.9",
+    "@testing-library/react": "10.4.9",
     "codecov": "3.7.2",
     "enzyme": "3.10.0",
-    "enzyme-adapter-react-16": "1.15.3",
+    "enzyme-adapter-react-16": "1.15.6",
     "es-check": "5.0.0",
     "husky": "3.0.9",
-    "jest": "^26.1.0",
     "react-test-renderer": "16.8.6",
     "reactifex": "1.1.1",
     "redux-mock-store": "1.5.4"

public/index.html

@@ -1,10 +1,15 @@
 <!doctype html>
 <html lang="en-us">
   <head>
-      <title>Account | edX</title>
+      <title>Account | <%= process.env.SITE_NAME %></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" />
+      <% if (process.env.OPTIMIZELY_PROJECT_ID) { %>
+        <script
+          src="<%= process.env.MARKETING_SITE_BASE_URL %>/optimizelyjs/<%= process.env.OPTIMIZELY_PROJECT_ID %>.js"
+        ></script>
+      <% } %>
   </head>
   <body>
     <div id="root"></div>

renovate.json

@@ -5,5 +5,13 @@
   "patch": {
     "automerge": true
   },
-  "rebaseStalePrs": true
+  "rebaseStalePrs": true,
+  "packageRules": [
+    {
+      "matchPackagePatterns": ["^@edx/paragon"],
+      "matchUpdateTypes": ["minor", "patch", "pin", "digest"],
+      "automerge": true,
+      "stabilityDays": 3
+    }
+  ]
 }

src/account-settings/AccountSettingsPage.jsx

@@ -38,15 +38,14 @@ import { fetchSiteLanguages } from './site-language';
 import CoachingToggle from './coaching/CoachingToggle';
 import DemographicsSection from './demographics/DemographicsSection';
 
-
 class AccountSettingsPage extends React.Component {
   constructor(props, context) {
     super(props, context);
 
     // If there is a "duplicate_provider" query parameter, that's the backend's
     // way of telling us that the provider account the user tried to link is already linked
-    // to another Open edX account. We use this to display a message to that effect, and remove the
-    // parameter from the URL.
+    // to another user account on the platform. We use this to display a message to that effect,
+    // and remove the parameter from the URL.
     const duplicateTpaProvider = getQueryParameters().duplicate_provider;
     if (duplicateTpaProvider !== undefined) {
       history.replace(history.location.pathname);
@@ -81,10 +80,11 @@ class AccountSettingsPage extends React.Component {
       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')
+      if (typeof locationHash !== 'string') {
         return;
+      }
       if (Object.keys(this.navLinkRefs).includes(locationHash) && this.navLinkRefs[locationHash].current) {
-        window.scrollTo(0, this.navLinkRefs[locationHash].current.offsetTop)
+        window.scrollTo(0, this.navLinkRefs[locationHash].current.offsetTop);
       }
     }
   }
@@ -136,6 +136,14 @@ class AccountSettingsPage extends React.Component {
     })),
   }));
 
+  handleEditableFieldChange = (name, value) => {
+    this.props.updateDraft(name, value);
+  };
+
+  handleSubmit = (formId, values) => {
+    this.props.saveSettings(formId, values);
+  };
+
   isEditable(fieldName) {
     return !this.props.staticFields.includes(fieldName);
   }
@@ -146,14 +154,6 @@ class AccountSettingsPage extends React.Component {
     return Boolean(this.props.profileDataManager);
   }
 
-  handleEditableFieldChange = (name, value) => {
-    this.props.updateDraft(name, value);
-  };
-
-  handleSubmit = (formId, values) => {
-    this.props.saveSettings(formId, values);
-  };
-
   renderDuplicateTpaProviderMessage() {
     if (!this.state.duplicateTpaProvider) {
       return null;
@@ -164,10 +164,11 @@ class AccountSettingsPage extends React.Component {
         <Alert className="alert alert-danger" role="alert">
           <FormattedMessage
             id="account.settings.message.duplicate.tpa.provider"
-            defaultMessage="The {provider} account you selected is already linked to another edX account."
-            description="alert message informing the user that the third-party account they attempted to link is already linked to another edX account"
+            defaultMessage="The {provider} account you selected is already linked to another {siteName} account."
+            description="alert message informing the user that the third-party account they attempted to link is already linked to another account"
             values={{
               provider: <b>{this.state.duplicateTpaProvider}</b>,
+              siteName: getConfig().SITE_NAME,
             }}
           />
         </Alert>
@@ -215,7 +216,7 @@ class AccountSettingsPage extends React.Component {
   }
 
   renderSecondaryEmailField(editableFieldProps) {
-    if (!Boolean(this.props.formValues.secondary_email_enabled)) {
+    if (!this.props.formValues.secondary_email_enabled) {
       return null;
     }
 
@@ -235,11 +236,10 @@ class AccountSettingsPage extends React.Component {
     // 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']}/>
+        <DemographicsSection forwardRef={this.navLinkRefs['#demographics-information']} />
       );
-    } else {
-      return null;
     }
+    return null;
   }
 
   renderContent() {
@@ -259,7 +259,7 @@ class AccountSettingsPage extends React.Component {
     } = this.getLocalizedOptions(this.context.locale, this.props.formValues.country);
 
     // Show State field only if the country is US (could include Canada later)
-    const showState = this.props.formValues.country == COUNTRY_WITH_STATES;
+    const showState = this.props.formValues.country === COUNTRY_WITH_STATES;
 
     const timeZoneOptions = this.getLocalizedTimeZoneOptions(
       this.props.timeZoneOptions,
@@ -270,7 +270,7 @@ class AccountSettingsPage extends React.Component {
     const hasLinkedTPA = findIndex(this.props.tpaProviders, provider => provider.connected) >= 0;
 
     return (
-      <React.Fragment>
+      <>
         <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'])}
@@ -283,7 +283,10 @@ class AccountSettingsPage extends React.Component {
             type="text"
             value={this.props.formValues.username}
             label={this.props.intl.formatMessage(messages['account.settings.field.username'])}
-            helpText={this.props.intl.formatMessage(messages['account.settings.field.username.help.text'])}
+            helpText={this.props.intl.formatMessage(
+              messages['account.settings.field.username.help.text'],
+              { siteName: getConfig().SITE_NAME },
+            )}
             isEditable={false}
             {...editableFieldProps}
           />
@@ -293,9 +296,9 @@ class AccountSettingsPage extends React.Component {
             value={this.props.formValues.name}
             label={this.props.intl.formatMessage(messages['account.settings.field.full.name'])}
             emptyLabel={
-              this.isEditable('name') ?
-                this.props.intl.formatMessage(messages['account.settings.field.full.name.empty']) :
-                this.renderEmptyStaticFieldMessage()
+              this.isEditable('name')
+                ? this.props.intl.formatMessage(messages['account.settings.field.full.name.empty'])
+                : this.renderEmptyStaticFieldMessage()
             }
             helpText={this.props.intl.formatMessage(messages['account.settings.field.full.name.help.text'])}
             isEditable={this.isEditable('name')}
@@ -305,13 +308,16 @@ class AccountSettingsPage extends React.Component {
             name="email"
             label={this.props.intl.formatMessage(messages['account.settings.field.email'])}
             emptyLabel={
-              this.isEditable('email') ?
-                this.props.intl.formatMessage(messages['account.settings.field.email.empty']) :
-                this.renderEmptyStaticFieldMessage()
+              this.isEditable('email')
+                ? this.props.intl.formatMessage(messages['account.settings.field.email.empty'])
+                : this.renderEmptyStaticFieldMessage()
             }
             value={this.props.formValues.email}
             confirmationMessageDefinition={messages['account.settings.field.email.confirmation']}
-            helpText={this.props.intl.formatMessage(messages['account.settings.field.email.help.text'])}
+            helpText={this.props.intl.formatMessage(
+              messages['account.settings.field.email.help.text'],
+              { siteName: getConfig().SITE_NAME },
+            )}
             isEditable={this.isEditable('email')}
             {...editableFieldProps}
           />
@@ -333,14 +339,15 @@ class AccountSettingsPage extends React.Component {
             options={countryOptions}
             label={this.props.intl.formatMessage(messages['account.settings.field.country'])}
             emptyLabel={
-              this.isEditable('country') ?
-                this.props.intl.formatMessage(messages['account.settings.field.country.empty']) :
-                this.renderEmptyStaticFieldMessage()
+              this.isEditable('country')
+                ? this.props.intl.formatMessage(messages['account.settings.field.country.empty'])
+                : this.renderEmptyStaticFieldMessage()
             }
             isEditable={this.isEditable('country')}
             {...editableFieldProps}
           />
-          {showState &&
+          {showState
+            && (
             <EditableField
               name="state"
               type="select"
@@ -348,14 +355,14 @@ class AccountSettingsPage extends React.Component {
               options={stateOptions}
               label={this.props.intl.formatMessage(messages['account.settings.field.state'])}
               emptyLabel={
-                this.isEditable('state') ?
-                  this.props.intl.formatMessage(messages['account.settings.field.state.empty']) :
-                  this.renderEmptyStaticFieldMessage()
+                this.isEditable('state')
+                  ? this.props.intl.formatMessage(messages['account.settings.field.state.empty'])
+                  : this.renderEmptyStaticFieldMessage()
               }
               isEditable={this.isEditable('state')}
               {...editableFieldProps}
             />
-          }
+            )}
         </div>
 
         <div className="account-section" id="profile-information" ref={this.navLinkRefs['#profile-information']}>
@@ -390,21 +397,27 @@ class AccountSettingsPage extends React.Component {
             emptyLabel={this.props.intl.formatMessage(messages['account.settings.field.language.proficiencies.empty'])}
             {...editableFieldProps}
           />
-          {getConfig().COACHING_ENABLED &&
-            this.props.formValues.coaching.eligible_for_coaching &&
+          {getConfig().COACHING_ENABLED
+            && this.props.formValues.coaching.eligible_for_coaching
+            && (
             <CoachingToggle
               name="coaching"
               phone_number={this.props.formValues.phone_number}
               coaching={this.props.formValues.coaching}
             />
-          }
+            )}
         </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'])}
           </h2>
-          <p>{this.props.intl.formatMessage(messages['account.settings.section.social.media.description'])}</p>
+          <p>
+            {this.props.intl.formatMessage(
+              messages['account.settings.section.social.media.description'],
+              { siteName: getConfig().SITE_NAME },
+            )}
+          </p>
 
           <EditableField
             name="social_link_linkedin"
@@ -465,7 +478,12 @@ class AccountSettingsPage extends React.Component {
 
         <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>
+          <p>
+            {this.props.intl.formatMessage(
+              messages['account.settings.section.linked.accounts.description'],
+              { siteName: getConfig().SITE_NAME },
+            )}
+          </p>
           <ThirdPartyAuth />
         </div>
 
@@ -476,7 +494,7 @@ class AccountSettingsPage extends React.Component {
           />
         </div>
 
-      </React.Fragment>
+      </>
     );
   }
 
@@ -542,6 +560,7 @@ AccountSettingsPage.propTypes = {
     name: PropTypes.string,
     email: PropTypes.string,
     secondary_email: PropTypes.string,
+    secondary_email_enabled: PropTypes.bool,
     year_of_birth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     country: PropTypes.string,
     level_of_education: PropTypes.string,
@@ -557,6 +576,8 @@ AccountSettingsPage.propTypes = {
       user: PropTypes.number.isRequired,
       eligible_for_coaching: PropTypes.bool.isRequired,
     }),
+    state: PropTypes.string,
+    shouldDisplayDemographicsSection: PropTypes.bool,
   }).isRequired,
   siteLanguage: PropTypes.shape({
     previousValue: PropTypes.string,

src/account-settings/AccountSettingsPage.messages.jsx

@@ -63,7 +63,7 @@ const messages = defineMessages({
   },
   'account.settings.section.linked.accounts.description': {
     id: 'account.settings.section.linked.accounts.description',
-    defaultMessage: 'You can link your identity accounts to simplify signing in to edX.',
+    defaultMessage: 'You can link your identity accounts to simplify signing in to {siteName}.',
     description: 'The linked accounts section heading description.',
   },
   'account.settings.field.username': {
@@ -73,7 +73,7 @@ const messages = defineMessages({
   },
   'account.settings.field.username.help.text': {
     id: 'account.settings.field.username.help.text',
-    defaultMessage: 'The name that identifies you on edX. You cannot change your username.',
+    defaultMessage: 'The name that identifies you on {siteName}. You cannot change your username.',
     description: 'Help text for the account settings username field.',
   },
   'account.settings.field.full.name': {
@@ -108,7 +108,7 @@ const messages = defineMessages({
   },
   'account.settings.field.email.help.text': {
     id: 'account.settings.field.email.help.text',
-    defaultMessage: 'You receive messages from edX and course teams at this address.',
+    defaultMessage: 'You receive messages from {siteName} and course teams at this address.',
     description: 'Help text for the account settings email field.',
   },
   'account.settings.field.secondary.email': {
@@ -279,18 +279,18 @@ const messages = defineMessages({
   },
   'account.settings.field.language.proficiencies': {
     id: 'account.settings.field.language.proficiencies',
-    defaultMessage: 'Spoken languages',
-    description: 'Label for account settings spoken languages field.',
+    defaultMessage: 'Spoken language',
+    description: 'Label for account settings spoken language field.',
   },
   'account.settings.field.language.proficiencies.empty': {
     id: 'account.settings.field.language.proficiencies.empty',
     defaultMessage: 'Add a spoken language',
-    description: 'Placeholder for empty account settings spoken languages field.',
+    description: 'Placeholder for empty account settings spoken language field.',
   },
   'account.settings.field.language_proficiencies.options.empty': {
     id: 'account.settings.field.language_proficiencies.options.empty',
     defaultMessage: 'Select a Language',
-    description: 'Option for an empty value on account settings spoken languages field.',
+    description: 'Option for an empty value on account settings spoken language field.',
   },
 
   'account.settings.field.time.zone': {
@@ -331,7 +331,7 @@ const messages = defineMessages({
   },
   'account.settings.section.social.media.description': {
     id: 'account.settings.section.social.media.description',
-    defaultMessage: 'Optionally, link your personal accounts to the social media icons on your edX profile.',
+    defaultMessage: 'Optionally, link your personal accounts to the social media icons on your {siteName} profile.',
     description: 'Section subheader for social media links settings',
   },
   'account.settings.field.social.platform.name.linkedin': {

src/account-settings/Alert.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-
 function Alert(props) {
   return (
     <div className={classNames('alert d-flex align-items-start', props.className)}>
@@ -16,7 +15,6 @@ function Alert(props) {
   );
 }
 
-
 Alert.propTypes = {
   className: PropTypes.string,
   icon: PropTypes.node,
@@ -29,5 +27,4 @@ Alert.defaultProps = {
   children: undefined,
 };
 
-
 export default Alert;

src/account-settings/BetaLanguageBanner.jsx

@@ -65,7 +65,7 @@ class BetaLanguageBanner extends React.Component {
             })}
           </p>
           <div>
-            <Button onClick={this.handleRevertLanguage} className="btn btn-primary mr-2">
+            <Button onClick={this.handleRevertLanguage} className="mr-2">
               {this.props.intl.formatMessage(
                 messages['account.settings.banner.beta.language.action.switch.back'],
                 { previous_language: previousLanguage.name },

src/account-settings/EditableField.jsx

@@ -2,7 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Button, Input, StatefulButton, ValidationFormGroup } from '@edx/paragon';
+import {
+  Button, Input, StatefulButton, ValidationFormGroup,
+} from '@edx/paragon';
 import { faPencilAlt } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
@@ -15,7 +17,6 @@ import {
 } from './data/actions';
 import { editableFieldSelector } from './data/selectors';
 
-
 function EditableField(props) {
   const {
     name,
@@ -60,33 +61,37 @@ function EditableField(props) {
 
   const renderEmptyLabel = () => {
     if (isEditable) {
-      return <Button onClick={handleEdit} className="btn-link p-0">{emptyLabel}</Button>;
+      return <Button variant="link" onClick={handleEdit} className="p-0">{emptyLabel}</Button>;
     }
     return <span className="text-muted">{emptyLabel}</span>;
   };
 
   const renderValue = (rawValue) => {
-    if (!rawValue) return renderEmptyLabel();
-    let value = rawValue;
+    if (!rawValue) {
+      return renderEmptyLabel();
+    }
+    let finalValue = 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) {
-        value = selectedOption.label;
-      };
+        finalValue = selectedOption.label;
+      }
     }
 
     if (userSuppliedValue) {
-      value += `: ${userSuppliedValue}`;
+      finalValue += `: ${userSuppliedValue}`;
     }
 
-    return value;
+    return finalValue;
   };
 
   const renderConfirmationMessage = () => {
-    if (!confirmationMessageDefinition || !confirmationValue) return null;
+    if (!confirmationMessageDefinition || !confirmationValue) {
+      return null;
+    }
     return intl.formatMessage(confirmationMessageDefinition, {
       value: confirmationValue,
     });
@@ -106,6 +111,7 @@ function EditableField(props) {
             >
               <label className="h6 d-block" htmlFor={id}>{label}</label>
               <Input
+                data-hj-suppress
                 name={name}
                 id={id}
                 type={type}
@@ -119,7 +125,7 @@ function EditableField(props) {
             <p>
               <StatefulButton
                 type="submit"
-                className="btn-primary mr-2"
+                className="mr-2"
                 state={saveState}
                 labels={{
                   default: intl.formatMessage(messages['account.settings.editable.field.action.save']),
@@ -132,13 +138,13 @@ function EditableField(props) {
                   // Swallowing the onSubmit event on the form would be better, but
                   // we would have to add that logic for every field given our
                   // current structure of the application.
-                  if (saveState === 'pending') e.preventDefault();
+                  if (saveState === 'pending') { e.preventDefault(); }
                 }}
                 disabledStates={[]}
               />
               <Button
+                variant="outline-primary"
                 onClick={handleCancel}
-                className="btn-outline-primary"
               >
                 {intl.formatMessage(messages['account.settings.editable.field.action.cancel'])}
               </Button>
@@ -150,12 +156,12 @@ function EditableField(props) {
             <div className="d-flex align-items-start">
               <h6 aria-level="3">{label}</h6>
               {isEditable ? (
-                <Button onClick={handleEdit} className="ml-3 btn-link">
+                <Button variant="link" onClick={handleEdit} className="ml-3">
                   <FontAwesomeIcon className="mr-1" icon={faPencilAlt} />{intl.formatMessage(messages['account.settings.editable.field.action.edit'])}
                 </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>
         ),
@@ -164,7 +170,6 @@ function EditableField(props) {
   );
 }
 
-
 EditableField.propTypes = {
   name: PropTypes.string.isRequired,
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -206,9 +211,9 @@ EditableField.defaultProps = {
   helpText: undefined,
   isEditing: false,
   isEditable: true,
+  userSuppliedValue: undefined,
 };
 
-
 export default connect(editableFieldSelector, {
   onEdit: openForm,
   onCancel: closeForm,

src/account-settings/EmailField.jsx

@@ -2,7 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
-import { Button, StatefulButton, Input, ValidationFormGroup } from '@edx/paragon';
+import {
+  Button, StatefulButton, Input, ValidationFormGroup,
+} from '@edx/paragon';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faExclamationTriangle, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
 
@@ -16,7 +18,6 @@ import {
 } from './data/actions';
 import { editableFieldSelector } from './data/selectors';
 
-
 function EmailField(props) {
   const {
     name,
@@ -56,7 +57,9 @@ function EmailField(props) {
   };
 
   const renderConfirmationMessage = () => {
-    if (!confirmationMessageDefinition || !confirmationValue) return null;
+    if (!confirmationMessageDefinition || !confirmationValue) {
+      return null;
+    }
     return (
       <Alert
         className="alert-warning mt-n2"
@@ -85,13 +88,15 @@ function EmailField(props) {
 
   const renderEmptyLabel = () => {
     if (isEditable) {
-      return <Button onClick={handleEdit} className="btn-link p-0">{emptyLabel}</Button>;
+      return <Button variant="link" onClick={handleEdit} className="p-0">{emptyLabel}</Button>;
     }
     return <span className="text-muted">{emptyLabel}</span>;
   };
 
   const renderValue = () => {
-    if (confirmationValue) return renderConfirmationValue();
+    if (confirmationValue) {
+      return renderConfirmationValue();
+    }
     return value || renderEmptyLabel();
   };
 
@@ -109,6 +114,7 @@ function EmailField(props) {
             >
               <label className="h6 d-block" htmlFor={id}>{label}</label>
               <Input
+                data-hj-suppress
                 name={name}
                 id={id}
                 type="email"
@@ -119,7 +125,7 @@ function EmailField(props) {
             <p>
               <StatefulButton
                 type="submit"
-                className="btn-primary mr-2"
+                className="mr-2"
                 state={saveState}
                 labels={{
                   default: intl.formatMessage(messages['account.settings.editable.field.action.save']),
@@ -132,13 +138,13 @@ function EmailField(props) {
                   // Swallowing the onSubmit event on the form would be better, but
                   // we would have to add that logic for every field given our
                   // current structure of the application.
-                  if (saveState === 'pending') e.preventDefault();
+                  if (saveState === 'pending') { e.preventDefault(); }
                 }}
                 disabledStates={[]}
               />
               <Button
+                variant="outline-primary"
                 onClick={handleCancel}
-                className="btn-outline-primary"
               >
                 {intl.formatMessage(messages['account.settings.editable.field.action.cancel'])}
               </Button>
@@ -150,13 +156,13 @@ function EmailField(props) {
             <div className="d-flex align-items-start">
               <h6 aria-level="3">{label}</h6>
               {isEditable ? (
-                <Button onClick={handleEdit} className="ml-3 btn-link">
+                <Button variant="link" onClick={handleEdit} className="ml-3">
                   <FontAwesomeIcon className="mr-1" icon={faPencilAlt} />
                   {intl.formatMessage(messages['account.settings.editable.field.action.edit'])}
                 </Button>
               ) : null}
             </div>
-            <p>{renderValue()}</p>
+            <p data-hj-suppress>{renderValue()}</p>
             {renderConfirmationMessage() || <p className="small text-muted mt-n2">{helpText}</p>}
           </div>
         ),
@@ -165,7 +171,6 @@ function EmailField(props) {
   );
 }
 
-
 EmailField.propTypes = {
   name: PropTypes.string.isRequired,
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -202,7 +207,6 @@ EmailField.defaultProps = {
   isEditable: true,
 };
 
-
 export default connect(editableFieldSelector, {
   onEdit: openForm,
   onCancel: closeForm,

src/account-settings/JumpNav.jsx

@@ -3,10 +3,9 @@ import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 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';
-
+import messages from './AccountSettingsPage.messages';
 
 function JumpNav({ intl, displayDemographicsLink }) {
   return (
@@ -34,13 +33,14 @@ function JumpNav({ intl, displayDemographicsLink }) {
             {intl.formatMessage(messages['account.settings.section.profile.information'])}
           </NavHashLink>
         </li>
-        {getConfig().ENABLE_DEMOGRAPHICS_COLLECTION && displayDemographicsLink &&
+        {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'])}
@@ -66,14 +66,9 @@ function JumpNav({ intl, displayDemographicsLink }) {
   );
 }
 
-
 JumpNav.propTypes = {
   intl: intlShape.isRequired,
   displayDemographicsLink: PropTypes.bool.isRequired,
 };
 
-JumpNav.defaultProps = {
-  displayDemographicsLink: false,
-}
-
 export default injectIntl(JumpNav);

src/account-settings/SwitchContent.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { TransitionReplace } from '@edx/paragon';
 
-
 const onChildExit = (htmlNode) => {
   // If the leaving child has focus, take control and redirect it
   if (htmlNode.contains(document.activeElement)) {
@@ -11,7 +10,9 @@ const onChildExit = (htmlNode) => {
     const enteringChild = htmlNode.previousSibling || htmlNode.nextSibling;
 
     // There's no replacement, do nothing.
-    if (!enteringChild) return;
+    if (!enteringChild) {
+      return;
+    }
 
     // Get all the focusable elements in the entering child and focus the first one
     const focusableElements = enteringChild.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
@@ -21,7 +22,6 @@ const onChildExit = (htmlNode) => {
   }
 };
 
-
 function SwitchContent({ expression, cases, className }) {
   const getContent = (caseKey) => {
     if (cases[caseKey]) {
@@ -29,7 +29,8 @@ function SwitchContent({ expression, cases, className }) {
         return getContent(cases[caseKey]);
       }
       return React.cloneElement(cases[caseKey], { key: caseKey });
-    } else if (cases.default) {
+    }
+    if (cases.default) {
       if (typeof cases.default === 'string') {
         return getContent(cases.default);
       }
@@ -49,7 +50,6 @@ function SwitchContent({ expression, cases, className }) {
   );
 }
 
-
 SwitchContent.propTypes = {
   expression: PropTypes.string,
   cases: PropTypes.objectOf(PropTypes.node).isRequired,
@@ -61,5 +61,4 @@ SwitchContent.defaultProps = {
   className: null,
 };
 
-
 export default SwitchContent;

src/account-settings/_style.scss

@@ -2,9 +2,11 @@
   .form-group {
     margin-bottom: 1.5rem;
   }
+
   h6, .h6 {
     margin-bottom: .25rem;
   }
+
   .btn-link {
     line-height: 1.2;
     border: none;
@@ -18,8 +20,10 @@
       position: sticky;
       top: 1rem;
     }
+
     li {
       margin-bottom: .5rem;
+
       a {
         text-decoration: underline;
       }
@@ -30,15 +34,17 @@
     @extend .h4;
     margin-bottom: map-get($spacers, 3);
   }
+
   .account-section {
     // These properties together will shift the hashlink position
     margin-bottom: map-get($spacers, 5);
     padding-top: 1rem;
   }
-  
+
   .custom-switch {
     padding: 0;
     max-width: 500px;
+
     .custom-control-label {
       left: 2.25rem;
       line-height: 1.6rem;

src/account-settings/coaching/CoachingConsent.jsx

@@ -97,7 +97,6 @@ class CoachingConsent extends React.Component {
     if (get(data, 'status') === 200) {
       this.setState({ submissionSuccess: true });
     }
-    
   }
 
   handleSubmit(e) {
@@ -135,23 +134,27 @@ class CoachingConsent extends React.Component {
       case VIEWS.NOT_LOADED:
         return <PageLoading srMessage="" />;
       case VIEWS.LOADED:
-        return (<CoachingConsentForm
-          onSubmit={this.handleSubmit}
-          declineCoaching={this.declineCoaching}
-          formErrors={this.state.formErrors}
-          formValues={this.props.formValues}
-          redirectUrl={this.state.redirectUrl}
-          profileDataManager={this.props.profileDataManager}
-        />);
+        return (
+          <CoachingConsentForm
+            onSubmit={this.handleSubmit}
+            declineCoaching={this.declineCoaching}
+            formErrors={this.state.formErrors}
+            formValues={this.props.formValues}
+            redirectUrl={this.state.redirectUrl}
+            profileDataManager={this.props.profileDataManager}
+          />
+        );
       case VIEWS.SUCCESS_PENDING:
         return <PageLoading srMessage="Submitting..." />;
       case VIEWS.SUCCESS:
-        return (<SuccessMessage
-          continueUrl={this.state.redirectUrl}
-          header={this.props.intl.formatMessage(messages['account.settings.coaching.consent.success.header'])}
-          message={this.props.intl.formatMessage(messages['account.settings.coaching.consent.success.message'])}
-          continue={this.props.intl.formatMessage(messages['account.settings.coaching.consent.success.continue'])}
-        />);
+        return (
+          <SuccessMessage
+            continueUrl={this.state.redirectUrl}
+            header={this.props.intl.formatMessage(messages['account.settings.coaching.consent.success.header'])}
+            message={this.props.intl.formatMessage(messages['account.settings.coaching.consent.success.message'])}
+            continue={this.props.intl.formatMessage(messages['account.settings.coaching.consent.success.continue'])}
+          />
+        );
       case VIEWS.DECLINE_PENDING:
         return <PageLoading srMessage="Redirecting..." />;
       case VIEWS.DECLINED:
@@ -233,7 +236,6 @@ AutoRedirect.propTypes = {
 
 CoachingConsent.defaultProps = {
   loaded: false,
-  saveState: undefined,
   profileDataManager: null,
 };
 
@@ -259,7 +261,6 @@ CoachingConsent.propTypes = {
     phone_number: PropTypes.object,
   }).isRequired,
   fetchSettings: PropTypes.func.isRequired,
-  saveState: PropTypes.string,
   profileDataManager: PropTypes.string,
 };
 

src/account-settings/coaching/CoachingConsentForm.jsx

@@ -33,12 +33,13 @@ const CoachingForm = props => (
     <div>
       <form onSubmit={props.onSubmit}>
         <div className="py-3">
-          {
-            !!props.profileDataManager &&
+          {!!props.profileDataManager && (
             <ManagedProfileAlert profileDataManager={props.profileDataManager} />
-          }
+          )}
           <ErrorMessage message={props.formErrors.full_name} />
-          <label className="h6" htmlFor="fullName">{props.intl.formatMessage(messages['account.settings.coaching.consent.label.name'])}</label>
+          <label className="h6" htmlFor="fullName">
+            {props.intl.formatMessage(messages['account.settings.coaching.consent.label.name'])}
+          </label>
           <Input
             type="text"
             name="full-name"
@@ -49,7 +50,9 @@ const CoachingForm = props => (
         </div>
         <div className="py-3">
           <ErrorMessage message={props.formErrors.phone_number} />
-          <label className="h6" htmlFor="phoneNumber">{props.intl.formatMessage(messages['account.settings.coaching.consent.label.phone-number'])}</label>
+          <label className="h6" htmlFor="phoneNumber">
+            {props.intl.formatMessage(messages['account.settings.coaching.consent.label.phone-number'])}
+          </label>
           <Input
             type="text"
             name="phone_number"
@@ -64,7 +67,7 @@ const CoachingForm = props => (
         </div>
         <ErrorMessage message={props.formErrors.coaching} />
         <div className="d-flex flex-column align-items-center">
-          <Button className="w-100 btn-outline-primary" type="submit">
+          <Button variant="outline-primary" className="w-100" type="submit">
             {props.intl.formatMessage(messages['account.settings.coaching.consent.accept-coaching'])}
           </Button>
         </div>
@@ -123,7 +126,6 @@ ErrorMessage.propTypes = {
 
 ManagedProfileAlert.propTypes = {
   profileDataManager: PropTypes.string.isRequired,
-  intl: intlShape.isRequired,
 };
 
 export default injectIntl(CoachingForm);

src/account-settings/coaching/CoachingToggle.jsx

@@ -8,7 +8,6 @@ import { editableFieldSelector } from '../data/selectors';
 import { saveSettings, updateDraft, saveMultipleSettings } from '../data/actions';
 import EditableField from '../EditableField';
 
-
 const CoachingToggle = props => (
   <>
     <EditableField
@@ -33,10 +32,10 @@ const CoachingToggle = props => (
               formId: 'phone_number',
               commitValues: props.phone_number,
             },
-        ], 'phone_number');
-      }
+          ], 'phone_number');
+        }
         return props.saveSettings('phone_number', props.phone_number);
-    }}
+      }}
     />
     <ValidationFormGroup
       for="coachingConsent"

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

@@ -13,9 +13,7 @@ jest.mock('@edx/frontend-platform/auth');
 
 const IntlCoachingConsent = injectIntl(CoachingConsent);
 
-jest.mock('../../data/selectors', () => {
-  return jest.fn().mockImplementation(() => ({ coachingConsentPageSelector: () => ({}) }));
-});
+jest.mock('../../data/selectors', () => jest.fn().mockImplementation(() => ({ coachingConsentPageSelector: () => ({}) })));
 
 const mockStore = configureStore();
 

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

@@ -103,10 +103,8 @@ exports[`CoachingConsent disables name field on enterprise user 1`] = `
           className="d-flex flex-column align-items-center"
         >
           <button
-            className="btn w-100 btn-outline-primary"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
+            className="w-100 btn btn-outline-primary"
+            disabled={false}
             type="submit"
           >
             Sign up for coaching
@@ -254,10 +252,8 @@ exports[`CoachingConsent should render 1`] = `
           className="d-flex flex-column align-items-center"
         >
           <button
-            className="btn w-100 btn-outline-primary"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
+            className="w-100 btn btn-outline-primary"
+            disabled={false}
             type="submit"
           >
             Sign up for coaching

src/account-settings/data/actions.js

@@ -44,7 +44,6 @@ export const fetchSettingsReset = () => ({
   type: FETCH_SETTINGS.RESET,
 });
 
-
 // FORM STATE ACTIONS
 
 export const openForm = formId => ({
@@ -69,7 +68,6 @@ export const resetDrafts = () => ({
   type: RESET_DRAFTS,
 });
 
-
 // SAVE SETTINGS ACTIONS
 
 export const saveSettings = (formId, commitValues) => ({

src/account-settings/data/constants.js

@@ -1,4 +1,3 @@
-
 export const YEAR_OF_BIRTH_OPTIONS = (() => {
   const currentYear = new Date().getFullYear();
   const years = [];

src/account-settings/data/reducers.js

@@ -48,11 +48,9 @@ const reducer = (state = defaultState, action) => {
     case FETCH_SETTINGS.SUCCESS:
       return {
         ...state,
-        values: Object.assign({}, state.values, action.payload.values),
+        values: { ...state.values, ...action.payload.values },
         // Dump the providers into thirdPartyAuth.
-        thirdPartyAuth: Object.assign({}, state.thirdPartyAuth, {
-          providers: action.payload.thirdPartyAuthProviders,
-        }),
+        thirdPartyAuth: { ...state.thirdPartyAuth, providers: action.payload.thirdPartyAuthProviders },
         profileDataManager: action.payload.profileDataManager,
         timeZones: action.payload.timeZones,
         loading: false,
@@ -97,9 +95,7 @@ const reducer = (state = defaultState, action) => {
     case UPDATE_DRAFT:
       return {
         ...state,
-        drafts: Object.assign({}, state.drafts, {
-          [action.payload.name]: action.payload.value,
-        }),
+        drafts: { ...state.drafts, [action.payload.name]: action.payload.value },
         saveState: null,
         errors: {},
       };
@@ -120,19 +116,19 @@ const reducer = (state = defaultState, action) => {
       return {
         ...state,
         saveState: 'complete',
-        values: Object.assign({}, state.values, action.payload.values),
+        values: { ...state.values, ...action.payload.values },
         errors: {},
-        confirmationValues: Object.assign(
-          {},
-          state.confirmationValues,
-          action.payload.confirmationValues,
-        ),
+        confirmationValues: {
+
+          ...state.confirmationValues,
+          ...action.payload.confirmationValues,
+        },
       };
     case SAVE_SETTINGS.FAILURE:
       return {
         ...state,
         saveState: 'error',
-        errors: Object.assign({}, state.errors, action.payload.errors),
+        errors: { ...state.errors, ...action.payload.errors },
       };
     case SAVE_SETTINGS.RESET:
       return {
@@ -161,7 +157,7 @@ const reducer = (state = defaultState, action) => {
       return {
         ...state,
         saveState: 'error',
-        errors: Object.assign({}, state.errors, action.payload.errors),
+        errors: { ...state.errors, ...action.payload.errors },
       };
 
     case FETCH_TIME_ZONES.SUCCESS:

src/account-settings/data/sagas.js

@@ -1,4 +1,6 @@
-import { call, put, delay, takeEvery, all } from 'redux-saga/effects';
+import {
+  call, put, delay, takeEvery, all,
+} from 'redux-saga/effects';
 
 import { publish } from '@edx/frontend-platform';
 import { getLocale, handleRtl, LOCALE_CHANGED } from '@edx/frontend-platform/i18n';
@@ -52,7 +54,7 @@ export function* handleFetchSettings() {
       userId,
     );
 
-    if (values.country) yield put(fetchTimeZones(values.country));
+    if (values.country) { yield put(fetchTimeZones(values.country)); }
 
     yield put(fetchSettingsSuccess({
       values,
@@ -91,7 +93,7 @@ export function* handleSaveSettings(action) {
       savedValues = yield call(patchSettings, username, commitData, userId);
     }
     yield put(saveSettingsSuccess(savedValues, commitData));
-    if (savedValues.country) yield put(fetchTimeZones(savedValues.country));
+    if (savedValues.country) { yield put(fetchTimeZones(savedValues.country)); }
     yield delay(1000);
     yield put(closeForm(action.payload.formId));
   } catch (e) {
@@ -104,7 +106,6 @@ export function* handleSaveSettings(action) {
   }
 }
 
-
 // handles mutiple settings saved at once, in order, and stops executing on first failure.
 export function* handleSaveMultipleSettings(action) {
   try {
@@ -138,7 +139,6 @@ export function* handleFetchTimeZones(action) {
   yield put(fetchTimeZonesSuccess(response, action.payload.country));
 }
 
-
 export default function* saga() {
   yield takeEvery(FETCH_SETTINGS.BASE, handleFetchSettings);
   yield takeEvery(SAVE_SETTINGS.BASE, handleSaveSettings);

src/account-settings/data/selectors.js

@@ -72,7 +72,6 @@ export const staticFieldsSelector = createSelector(
   accountSettings => (accountSettings.profileDataManager ? ['name', 'email', 'country'] : []),
 );
 
-
 /**
  * If there's no draft present at all (undefined), use the original committed value.
  */

src/account-settings/data/service.js

@@ -44,7 +44,9 @@ function packAccountCommitData(commitData) {
 
   SOCIAL_PLATFORMS.forEach(({ id, key }) => {
     // Skip missing values. Empty strings are valid values and should be preserved.
-    if (commitData[key] === undefined) return;
+    if (commitData[key] === undefined) {
+      return;
+    }
 
     packedData.social_links = [{ platform: id, social_link: commitData[key] }];
     delete packedData[key];

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

@@ -1,38 +0,0 @@
-import camelCase from 'lodash.camelcase';
-import snakeCase from 'lodash.snakecase';
-
-export function modifyObjectKeys(object, modify) {
-  // If the passed in object is not an object, return it.
-  if (
-    object === undefined ||
-    object === null ||
-    (typeof object !== 'object' && !Array.isArray(object))
-  ) {
-    return object;
-  }
-
-  if (Array.isArray(object)) {
-    return object.map(value => modifyObjectKeys(value, modify));
-  }
-
-  // Otherwise, process all its keys.
-  const result = {};
-  Object.entries(object).forEach(([key, value]) => {
-    result[modify(key)] = modifyObjectKeys(value, modify);
-  });
-  return result;
-}
-
-export function camelCaseObject(object) {
-  return modifyObjectKeys(object, camelCase);
-}
-
-export function snakeCaseObject(object) {
-  return modifyObjectKeys(object, snakeCase);
-}
-
-export function convertKeyNames(object, nameMap) {
-  const transformer = key => (nameMap[key] === undefined ? key : nameMap[key]);
-
-  return modifyObjectKeys(object, transformer);
-}

src/account-settings/data/utils/dataUtils.test.js

@@ -1,90 +0,0 @@
-import {
-  modifyObjectKeys,
-  camelCaseObject,
-  snakeCaseObject,
-  convertKeyNames,
-} from './dataUtils';
-
-describe('modifyObjectKeys', () => {
-  it('should use the provided modify function to change all keys in and object and its children', () => {
-    function meowKeys(key) {
-      return `${key}Meow`;
-    }
-
-    const result = modifyObjectKeys(
-      {
-        one: undefined,
-        two: null,
-        three: '',
-        four: 0,
-        five: NaN,
-        six: [1, 2, { seven: 'woof' }],
-        eight: { nine: { ten: 'bark' }, eleven: true },
-      },
-      meowKeys,
-    );
-
-    expect(result).toEqual({
-      oneMeow: undefined,
-      twoMeow: null,
-      threeMeow: '',
-      fourMeow: 0,
-      fiveMeow: NaN,
-      sixMeow: [1, 2, { sevenMeow: 'woof' }],
-      eightMeow: { nineMeow: { tenMeow: 'bark' }, elevenMeow: true },
-    });
-  });
-});
-
-describe('camelCaseObject', () => {
-  it('should make everything camelCase', () => {
-    const result = camelCaseObject({
-      what_now: 'brown cow',
-      but_who: { says_you_people: 'okay then', but_how: { will_we_even_know: 'the song is over' } },
-      'dot.dot.dot': 123,
-    });
-
-    expect(result).toEqual({
-      whatNow: 'brown cow',
-      butWho: { saysYouPeople: 'okay then', butHow: { willWeEvenKnow: 'the song is over' } },
-      dotDotDot: 123,
-    });
-  });
-});
-
-describe('snakeCaseObject', () => {
-  it('should make everything snake_case', () => {
-    const result = snakeCaseObject({
-      whatNow: 'brown cow',
-      butWho: { saysYouPeople: 'okay then', butHow: { willWeEvenKnow: 'the song is over' } },
-      'dot.dot.dot': 123,
-    });
-
-    expect(result).toEqual({
-      what_now: 'brown cow',
-      but_who: { says_you_people: 'okay then', but_how: { will_we_even_know: 'the song is over' } },
-      dot_dot_dot: 123,
-    });
-  });
-});
-
-describe('convertKeyNames', () => {
-  it('should replace the specified keynames', () => {
-    const result = convertKeyNames(
-      {
-        one: { two: { three: 'four' } },
-        five: 'six',
-      },
-      {
-        two: 'blue',
-        five: 'alive',
-        seven: 'heaven',
-      },
-    );
-
-    expect(result).toEqual({
-      one: { blue: { three: 'four' } },
-      alive: 'six',
-    });
-  });
-});

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

@@ -1,9 +1,3 @@
-export {
-  camelCaseObject,
-  convertKeyNames,
-  modifyObjectKeys,
-  snakeCaseObject,
-} from './dataUtils';
 export {
   AsyncActionType,
   getModuleState,

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

@@ -6,6 +6,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Hyperlink } from '@edx/paragon';
 
 // Messages
+import { getConfig } from '@edx/frontend-platform';
 import messages from './messages';
 
 // Components
@@ -22,13 +23,14 @@ const BeforeProceedingBanner = (props) => {
       <FormattedMessage
         id="account.settings.delete.account.before.proceeding"
         defaultMessage="Before proceeding, please {actionLink}."
-        description="Error that appears if you are trying to delete your edX account, but something about your account needs attention first.  The actionLink will be instructions, such as 'unlink your Facebook account'."
+        description="Error that appears if you are trying to delete your account, but something about your account needs attention first.  The actionLink will be instructions, such as 'unlink your Facebook account'."
         values={{
           actionLink: (
             <Hyperlink destination={supportArticleUrl}>
               {intl.formatMessage(messages[instructionMessageId])}
             </Hyperlink>
           ),
+          siteName: getConfig().SITE_NAME,
         }}
       />
     </Alert>

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

@@ -1,11 +1,14 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
-import { Button, Input, Modal, ValidationFormGroup } from '@edx/paragon';
+import {
+  Button, Input, Modal, ValidationFormGroup,
+} from '@edx/paragon';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { faExclamationCircle, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
+import { getConfig } from '@edx/frontend-platform';
 import messages from './messages';
 import Alert from '../Alert';
 import PrintingInstructions from './PrintingInstructions';
@@ -33,10 +36,9 @@ export class ConfirmationModal extends Component {
       return null;
     }
     const headerMessageId = this.getShortErrorMessageId(errorType);
-    const detailsMessageId =
-      reason === 'empty-password'
-        ? null
-        : 'account.settings.delete.account.error.unable.to.delete.details';
+    const detailsMessageId = reason === 'empty-password'
+      ? null
+      : 'account.settings.delete.account.error.unable.to.delete.details';
 
     return (
       <Alert
@@ -64,11 +66,18 @@ export class ConfirmationModal extends Component {
     const open = ['confirming', 'pending', 'failed'].includes(status);
     const passwordFieldId = 'passwordFieldId';
     const invalidMessage = messages[this.getShortErrorMessageId(errorType)];
+
+    // TODO: We lack a good way of providing custom language for a particular site.  This is a hack
+    // to allow edx.org to fulfill its business requirements.
+    const deleteAccountModalText2MessageKey = getConfig().SITE_NAME === 'edX'
+      ? 'account.settings.delete.account.modal.text.2.edX'
+      : 'account.settings.delete.account.modal.text.2';
+
     return (
       <Modal
         open={open}
         title={intl.formatMessage(messages['account.settings.delete.account.modal.header'])}
-        body={
+        body={(
           <div>
             {this.renderError()}
             <Alert
@@ -76,9 +85,17 @@ export class ConfirmationModal extends Component {
               icon={<FontAwesomeIcon className="mr-2" icon={faExclamationTriangle} />}
             >
               <h6>
-                {intl.formatMessage(messages['account.settings.delete.account.modal.text.1'])}
+                {intl.formatMessage(
+                  messages['account.settings.delete.account.modal.text.1'],
+                  { siteName: getConfig().SITE_NAME },
+                )}
               </h6>
-              <p>{intl.formatMessage(messages['account.settings.delete.account.modal.text.2'])}</p>
+              <p>
+                {intl.formatMessage(
+                  messages[deleteAccountModalText2MessageKey],
+                  { siteName: getConfig().SITE_NAME },
+                )}
+              </p>
               <p>
                 <PrintingInstructions />
               </p>
@@ -100,9 +117,9 @@ export class ConfirmationModal extends Component {
               />
             </ValidationFormGroup>
           </div>
-        }
+        )}
         buttons={[
-          <Button className="btn-danger" onClick={onSubmit}>
+          <Button variant="danger" onClick={onSubmit}>
             {intl.formatMessage(messages['account.settings.delete.account.modal.confirm.delete'])}
           </Button>,
         ]}

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

@@ -24,9 +24,13 @@ import ConnectedSuccessModal from './SuccessModal';
 import BeforeProceedingBanner from './BeforeProceedingBanner';
 
 export class DeleteAccount extends React.Component {
-  state = {
-    password: '',
-  };
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      password: '',
+    };
+  }
 
   handleSubmit = () => {
     if (this.state.password === '') {
@@ -56,19 +60,36 @@ export class DeleteAccount extends React.Component {
     } = this.props;
     const canDelete = isVerifiedAccount && !hasLinkedTPA;
 
+    // TODO: We lack a good way of providing custom language for a particular site.  This is a hack
+    // to allow edx.org to fulfill its business requirements.
+    const deleteAccountText2MessageKey = getConfig().SITE_NAME === 'edX'
+      ? 'account.settings.delete.account.text.2.edX'
+      : 'account.settings.delete.account.text.2';
+
     return (
       <div>
         <h2 className="section-heading">
           {intl.formatMessage(messages['account.settings.delete.account.header'])}
         </h2>
         <p>{intl.formatMessage(messages['account.settings.delete.account.subheader'])}</p>
-        <p>{intl.formatMessage(messages['account.settings.delete.account.text.1'])}</p>
-        <p>{intl.formatMessage(messages['account.settings.delete.account.text.2'])}</p>
+        <p>
+          {intl.formatMessage(
+            messages['account.settings.delete.account.text.1'],
+            { siteName: getConfig().SITE_NAME },
+          )}
+        </p>
+        <p>
+          {intl.formatMessage(
+            messages[deleteAccountText2MessageKey],
+            { siteName: getConfig().SITE_NAME },
+          )}
+        </p>
         <p>
           <PrintingInstructions />
         </p>
         <p className="text-danger h6">
-          {intl.formatMessage(messages['account.settings.delete.account.text.warning'])}
+          {intl.formatMessage(messages['account.settings.delete.account.text.warning'],
+            { siteName: getConfig().SITE_NAME })}
         </p>
         <p>
           <Hyperlink destination="https://support.edx.org/hc/en-us/sections/115004139268-Manage-Your-Account-Settings">
@@ -77,7 +98,7 @@ export class DeleteAccount extends React.Component {
         </p>
         <p>
           <Button
-            className="btn-outline-danger"
+            variant="outline-danger"
             onClick={canDelete ? this.props.deleteAccountConfirmation : null}
             disabled={!canDelete}
           >

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

@@ -2,22 +2,39 @@ import React from 'react';
 import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Hyperlink } from '@edx/paragon';
 
+import { getConfig } from '@edx/frontend-platform';
 import messages from './messages';
 
 const PrintingInstructions = (props) => {
   const actionLink = (
     <Hyperlink
-      destination="https://edx.readthedocs.io/projects/edx-guide-for-students/en/latest/SFD_certificates.html#printing-a-certificate"
+      // TODO: What would a generic version of this link look like?  Should
+      // CERTIFICATE_SHARING_HELP_URL really be a configuration variable?  In the meantime,
+      // We've removed the link from the default message.
+      destination="https://support.edx.org/hc/en-us/sections/115004173027-Receive-and-Share-edX-Certificates"
     >
       {props.intl.formatMessage(messages['account.settings.delete.account.text.3.link'])}
     </Hyperlink>
   );
 
+  // TODO: We lack a good way of providing custom language for a particular site.  This is a hack
+  // to allow edx.org to mention MicroMasters certificates to fulfill its business requirements.
+  if (getConfig().SITE_NAME === 'edX') {
+    return (
+      <FormattedMessage
+        id="account.settings.delete.account.text.3.edX"
+        defaultMessage="You may also lose access to verified certificates and other program credentials like MicroMasters certificates. You can make a copy of these for your records before proceeding with deletion. {actionLink}."
+        description="A message in the user account deletion area warning users that deleting their account will prevent them from accessing their certificates. 'actionLink' is a HTML link with a full sentence that describes how to print a certificate."
+        values={{ actionLink }}
+      />
+    );
+  }
+
   return (
     <FormattedMessage
       id="account.settings.delete.account.text.3"
-      defaultMessage="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}."
-      description="A message in the user account deletion area"
+      defaultMessage="You may also lose access to verified certificates and other program credentials. You can make a copy of these for your records before proceeding with deletion."
+      description="A message in the user account deletion area warning users that deleting their account will prevent them from accessing their certificates."
       values={{ actionLink }}
     />
   );

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

@@ -11,13 +11,13 @@ export const SuccessModal = (props) => {
     <Modal
       open={status === 'deleted'}
       title={intl.formatMessage(messages['account.settings.delete.account.modal.after.header'])}
-      body={
+      body={(
         <div>
           <p className="h6">
             {intl.formatMessage(messages['account.settings.delete.account.modal.after.text'])}
           </p>
         </div>
-      }
+      )}
       closeText={intl.formatMessage(messages['account.settings.delete.account.modal.after.button'])}
       renderHeaderCloseButton={false}
       onClose={onClose}

src/account-settings/delete-account/__snapshots__/ConfirmationModal.test.jsx.snap

@@ -1,439 +1,566 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ConfirmationModal should match default closed confirmation modal snapshot 1`] = `
-<div>
+Array [
   <div
     className="fade"
     role="presentation"
-  />
+  />,
   <div
-    className="modal js-close-modal-on-click fade"
-    onMouseDown={[Function]}
+    className="modal fade"
+    role="presentation"
+  >
+    <div
+      aria-labelledby="id1"
+      aria-modal={true}
+      className=""
+      role="dialog"
+    >
+      <div
+        data-focus-guard={true}
+        style={
+          Object {
+            "height": "0px",
+            "left": "1px",
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "fixed",
+            "top": "1px",
+            "width": "1px",
+          }
+        }
+        tabIndex={-1}
+      />
+      <div
+        data-focus-guard={true}
+        style={
+          Object {
+            "height": "0px",
+            "left": "1px",
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "fixed",
+            "top": "1px",
+            "width": "1px",
+          }
+        }
+        tabIndex={-1}
+      />
+      <div
+        data-focus-lock-disabled="disabled"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onScrollCapture={[Function]}
+        onTouchMoveCapture={[Function]}
+        onWheelCapture={[Function]}
+      >
+        <div
+          className="modal-content"
+        >
+          <div
+            className="modal-header"
+          >
+            <h2
+              className="modal-title"
+              id="id1"
+            >
+              Are you sure?
+            </h2>
+          </div>
+          <div
+            className="modal-body"
+          >
+            <div>
+              <div
+                className="alert d-flex align-items-start alert-warning mt-n2"
+              >
+                <div>
+                  <svg
+                    aria-hidden="true"
+                    className="svg-inline--fa fa-exclamation-triangle fa-w-18 mr-2"
+                    data-icon="exclamation-triangle"
+                    data-prefix="fas"
+                    focusable="false"
+                    role="img"
+                    style={Object {}}
+                    viewBox="0 0 576 512"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+                      fill="currentColor"
+                      style={Object {}}
+                    />
+                  </svg>
+                </div>
+                <div>
+                  <h6>
+                    You have selected "Delete My Account". Deletion of your account and personal data is permanent and cannot be undone. localhost will not be able to recover your account or the data that is deleted.
+                  </h6>
+                  <p>
+                    If you proceed, you will be unable to use this account to take courses on localhost.
+                  </p>
+                  <p>
+                    <span>
+                      You may also lose access to verified certificates and other program credentials. You can make a copy of these for your records before proceeding with deletion.
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div
+                className="form-group"
+              >
+                <label
+                  className="d-block"
+                  htmlFor="passwordFieldId"
+                >
+                  If you still wish to continue and delete your account, please enter your account password:
+                </label>
+                <input
+                  aria-describedby=""
+                  className="form-control"
+                  id="passwordFieldId"
+                  name="password"
+                  onChange={[MockFunction]}
+                  type="password"
+                  value="fluffy bunnies"
+                />
+                <strong
+                  className="invalid-feedback"
+                  id="passwordFieldId-invalid-feedback"
+                >
+                  Unable to delete account
+                </strong>
+              </div>
+            </div>
+          </div>
+          <div
+            className="modal-footer"
+          >
+            <button
+              className="btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              Cancel
+            </button>
+            <button
+              className="btn btn-danger"
+              disabled={false}
+              onClick={[MockFunction]}
+              type="button"
+            >
+              Yes, Delete
+            </button>
+          </div>
+        </div>
+      </div>
+      <div
+        data-focus-guard={true}
+        style={
+          Object {
+            "height": "0px",
+            "left": "1px",
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "fixed",
+            "top": "1px",
+            "width": "1px",
+          }
+        }
+        tabIndex={-1}
+      />
+    </div>
+  </div>,
+]
+`;
+
+exports[`ConfirmationModal should match empty password confirmation modal snapshot 1`] = `
+Array [
+  <div
+    className="modal-backdrop show"
+    role="presentation"
+  />,
+  <div
+    className="modal show d-block"
+    role="presentation"
+  >
+    <div
+      aria-labelledby="id3"
+      aria-modal={true}
+      className="modal-dialog"
+      role="dialog"
+    >
+      <div
+        data-focus-guard={true}
+        style={
+          Object {
+            "height": "0px",
+            "left": "1px",
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "fixed",
+            "top": "1px",
+            "width": "1px",
+          }
+        }
+        tabIndex={0}
+      />
+      <div
+        data-focus-guard={true}
+        style={
+          Object {
+            "height": "0px",
+            "left": "1px",
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "fixed",
+            "top": "1px",
+            "width": "1px",
+          }
+        }
+        tabIndex={1}
+      />
+      <div
+        data-focus-lock-disabled={false}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onScrollCapture={[Function]}
+        onTouchMoveCapture={[Function]}
+        onTouchStart={[Function]}
+        onWheelCapture={[Function]}
+      >
+        <div
+          className="modal-content"
+        >
+          <div
+            className="modal-header"
+          >
+            <h2
+              className="modal-title"
+              id="id3"
+            >
+              Are you sure?
+            </h2>
+          </div>
+          <div
+            className="modal-body"
+          >
+            <div>
+              <div
+                className="alert d-flex align-items-start alert-danger mt-n2"
+              >
+                <div>
+                  <svg
+                    aria-hidden="true"
+                    className="svg-inline--fa fa-exclamation-circle fa-w-16 mr-2"
+                    data-icon="exclamation-circle"
+                    data-prefix="fas"
+                    focusable="false"
+                    role="img"
+                    style={Object {}}
+                    viewBox="0 0 512 512"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+                      fill="currentColor"
+                      style={Object {}}
+                    />
+                  </svg>
+                </div>
+                <div>
+                  <h6>
+                    A password is required
+                  </h6>
+                  <p
+                    className="text-danger"
+                  >
+                    Sorry, there was an error trying to process your request. Please try again later.
+                  </p>
+                </div>
+              </div>
+              <div
+                className="alert d-flex align-items-start alert-warning mt-n2"
+              >
+                <div>
+                  <svg
+                    aria-hidden="true"
+                    className="svg-inline--fa fa-exclamation-triangle fa-w-18 mr-2"
+                    data-icon="exclamation-triangle"
+                    data-prefix="fas"
+                    focusable="false"
+                    role="img"
+                    style={Object {}}
+                    viewBox="0 0 576 512"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+                      fill="currentColor"
+                      style={Object {}}
+                    />
+                  </svg>
+                </div>
+                <div>
+                  <h6>
+                    You have selected "Delete My Account". Deletion of your account and personal data is permanent and cannot be undone. localhost will not be able to recover your account or the data that is deleted.
+                  </h6>
+                  <p>
+                    If you proceed, you will be unable to use this account to take courses on localhost.
+                  </p>
+                  <p>
+                    <span>
+                      You may also lose access to verified certificates and other program credentials. You can make a copy of these for your records before proceeding with deletion.
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div
+                className="form-group"
+              >
+                <label
+                  className="d-block"
+                  htmlFor="passwordFieldId"
+                >
+                  If you still wish to continue and delete your account, please enter your account password:
+                </label>
+                <input
+                  aria-describedby="passwordFieldId-invalid-feedback"
+                  className="form-control is-invalid"
+                  id="passwordFieldId"
+                  name="password"
+                  onChange={[MockFunction]}
+                  type="password"
+                  value="fluffy bunnies"
+                />
+                <strong
+                  className="invalid-feedback"
+                  id="passwordFieldId-invalid-feedback"
+                >
+                  A password is required
+                </strong>
+              </div>
+            </div>
+          </div>
+          <div
+            className="modal-footer"
+          >
+            <button
+              className="btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              Cancel
+            </button>
+            <button
+              className="btn btn-danger"
+              disabled={false}
+              onClick={[MockFunction]}
+              type="button"
+            >
+              Yes, Delete
+            </button>
+          </div>
+        </div>
+      </div>
+      <div
+        data-focus-guard={true}
+        style={
+          Object {
+            "height": "0px",
+            "left": "1px",
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "fixed",
+            "top": "1px",
+            "width": "1px",
+          }
+        }
+        tabIndex={0}
+      />
+    </div>
+  </div>,
+]
+`;
+
+exports[`ConfirmationModal should match open confirmation modal snapshot 1`] = `
+Array [
+  <div
+    className="modal-backdrop show"
+    role="presentation"
+  />,
+  <div
+    className="modal show d-block"
     role="presentation"
   >
     <div
       aria-labelledby="id2"
       aria-modal={true}
-      className=""
-      role="dialog"
-      tabIndex="-1"
-    >
-      <div
-        className="modal-content"
-      >
-        <div
-          className="modal-header"
-        >
-          <h2
-            className="modal-title"
-            id="id2"
-          >
-            Are you sure?
-          </h2>
-        </div>
-        <div
-          className="modal-body"
-        >
-          <div>
-            <div
-              className="alert d-flex align-items-start alert-warning mt-n2"
-            >
-              <div>
-                <svg
-                  aria-hidden="true"
-                  className="svg-inline--fa fa-exclamation-triangle fa-w-18 mr-2"
-                  data-icon="exclamation-triangle"
-                  data-prefix="fas"
-                  focusable="false"
-                  role="img"
-                  style={Object {}}
-                  viewBox="0 0 576 512"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
-                    fill="currentColor"
-                    style={Object {}}
-                  />
-                </svg>
-              </div>
-              <div>
-                <h6>
-                  You have selected "Delete My Account". Deletion of your account and personal data is permanent and cannot be undone. edX will not be able to recover your account or the data that is deleted.
-                </h6>
-                <p>
-                  If you proceed, you will be unable to use this account to take courses on the edX app, edx.org, or any other site hosted by edX. This includes access to edx.org from your employer's or university's system and access to private sites offered by MIT Open Learning, Wharton Executive Education, and Harvard Medical School.
-                </p>
-                <p>
-                  <span>
-                    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, 
-                    <a
-                      href="https://edx.readthedocs.io/projects/edx-guide-for-students/en/latest/SFD_certificates.html#printing-a-certificate"
-                      onClick={[Function]}
-                      target="_self"
-                    >
-                      follow the instructions for printing or downloading a certificate
-                    </a>
-                    .
-                  </span>
-                </p>
-              </div>
-            </div>
-            <div
-              className="form-group"
-            >
-              <label
-                className="d-block"
-                htmlFor="passwordFieldId"
-              >
-                If you still wish to continue and delete your account, please enter your account password:
-              </label>
-              <input
-                aria-describedby=""
-                className="form-control"
-                id="passwordFieldId"
-                name="password"
-                onChange={[MockFunction]}
-                type="password"
-                value="fluffy bunnies"
-              />
-              <strong
-                className="invalid-feedback"
-                id="passwordFieldId-invalid-feedback"
-              >
-                Unable to delete account
-              </strong>
-            </div>
-          </div>
-        </div>
-        <div
-          className="modal-footer"
-        >
-          <button
-            className="btn btn-danger"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            Yes, Delete
-          </button>
-          <button
-            className="btn js-close-modal-on-click btn-secondary"
-            id="paragonCloseModalButton1"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            Cancel
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`ConfirmationModal should match empty password confirmation modal snapshot 1`] = `
-<div>
-  <div
-    className="modal-backdrop show"
-    role="presentation"
-  />
-  <div
-    className="modal js-close-modal-on-click show d-block"
-    onMouseDown={[Function]}
-    role="presentation"
-  >
-    <div
-      aria-labelledby="id6"
-      aria-modal={true}
       className="modal-dialog"
       role="dialog"
-      tabIndex="-1"
     >
       <div
-        className="modal-content"
-      >
-        <div
-          className="modal-header"
-        >
-          <h2
-            className="modal-title"
-            id="id6"
-          >
-            Are you sure?
-          </h2>
-        </div>
-        <div
-          className="modal-body"
-        >
-          <div>
-            <div
-              className="alert d-flex align-items-start alert-danger mt-n2"
-            >
-              <div>
-                <svg
-                  aria-hidden="true"
-                  className="svg-inline--fa fa-exclamation-circle fa-w-16 mr-2"
-                  data-icon="exclamation-circle"
-                  data-prefix="fas"
-                  focusable="false"
-                  role="img"
-                  style={Object {}}
-                  viewBox="0 0 512 512"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
-                    fill="currentColor"
-                    style={Object {}}
-                  />
-                </svg>
-              </div>
-              <div>
-                <h6>
-                  A password is required
-                </h6>
-                <p
-                  className="text-danger"
-                >
-                  Sorry, there was an error trying to process your request. Please try again later.
-                </p>
-              </div>
-            </div>
-            <div
-              className="alert d-flex align-items-start alert-warning mt-n2"
-            >
-              <div>
-                <svg
-                  aria-hidden="true"
-                  className="svg-inline--fa fa-exclamation-triangle fa-w-18 mr-2"
-                  data-icon="exclamation-triangle"
-                  data-prefix="fas"
-                  focusable="false"
-                  role="img"
-                  style={Object {}}
-                  viewBox="0 0 576 512"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
-                    fill="currentColor"
-                    style={Object {}}
-                  />
-                </svg>
-              </div>
-              <div>
-                <h6>
-                  You have selected "Delete My Account". Deletion of your account and personal data is permanent and cannot be undone. edX will not be able to recover your account or the data that is deleted.
-                </h6>
-                <p>
-                  If you proceed, you will be unable to use this account to take courses on the edX app, edx.org, or any other site hosted by edX. This includes access to edx.org from your employer's or university's system and access to private sites offered by MIT Open Learning, Wharton Executive Education, and Harvard Medical School.
-                </p>
-                <p>
-                  <span>
-                    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, 
-                    <a
-                      href="https://edx.readthedocs.io/projects/edx-guide-for-students/en/latest/SFD_certificates.html#printing-a-certificate"
-                      onClick={[Function]}
-                      target="_self"
-                    >
-                      follow the instructions for printing or downloading a certificate
-                    </a>
-                    .
-                  </span>
-                </p>
-              </div>
-            </div>
-            <div
-              className="form-group"
-            >
-              <label
-                className="d-block"
-                htmlFor="passwordFieldId"
-              >
-                If you still wish to continue and delete your account, please enter your account password:
-              </label>
-              <input
-                aria-describedby="passwordFieldId-invalid-feedback"
-                className="form-control is-invalid"
-                id="passwordFieldId"
-                name="password"
-                onChange={[MockFunction]}
-                type="password"
-                value="fluffy bunnies"
-              />
-              <strong
-                className="invalid-feedback"
-                id="passwordFieldId-invalid-feedback"
-              >
-                A password is required
-              </strong>
-            </div>
-          </div>
-        </div>
-        <div
-          className="modal-footer"
-        >
-          <button
-            className="btn btn-danger"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            Yes, Delete
-          </button>
-          <button
-            className="btn js-close-modal-on-click btn-secondary"
-            id="paragonCloseModalButton5"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            Cancel
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`ConfirmationModal should match open confirmation modal snapshot 1`] = `
-<div>
-  <div
-    className="modal-backdrop show"
-    role="presentation"
-  />
-  <div
-    className="modal js-close-modal-on-click show d-block"
-    onMouseDown={[Function]}
-    role="presentation"
-  >
-    <div
-      aria-labelledby="id4"
-      aria-modal={true}
-      className="modal-dialog"
-      role="dialog"
-      tabIndex="-1"
-    >
+        data-focus-guard={true}
+        style={
+          Object {
+            "height": "0px",
+            "left": "1px",
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "fixed",
+            "top": "1px",
+            "width": "1px",
+          }
+        }
+        tabIndex={0}
+      />
       <div
-        className="modal-content"
+        data-focus-guard={true}
+        style={
+          Object {
+            "height": "0px",
+            "left": "1px",
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "fixed",
+            "top": "1px",
+            "width": "1px",
+          }
+        }
+        tabIndex={1}
+      />
+      <div
+        data-focus-lock-disabled={false}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onScrollCapture={[Function]}
+        onTouchMoveCapture={[Function]}
+        onTouchStart={[Function]}
+        onWheelCapture={[Function]}
       >
         <div
-          className="modal-header"
+          className="modal-content"
         >
-          <h2
-            className="modal-title"
-            id="id4"
+          <div
+            className="modal-header"
           >
-            Are you sure?
-          </h2>
-        </div>
-        <div
-          className="modal-body"
-        >
-          <div>
-            <div
-              className="alert d-flex align-items-start alert-warning mt-n2"
+            <h2
+              className="modal-title"
+              id="id2"
             >
-              <div>
-                <svg
-                  aria-hidden="true"
-                  className="svg-inline--fa fa-exclamation-triangle fa-w-18 mr-2"
-                  data-icon="exclamation-triangle"
-                  data-prefix="fas"
-                  focusable="false"
-                  role="img"
-                  style={Object {}}
-                  viewBox="0 0 576 512"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
-                    fill="currentColor"
+              Are you sure?
+            </h2>
+          </div>
+          <div
+            className="modal-body"
+          >
+            <div>
+              <div
+                className="alert d-flex align-items-start alert-warning mt-n2"
+              >
+                <div>
+                  <svg
+                    aria-hidden="true"
+                    className="svg-inline--fa fa-exclamation-triangle fa-w-18 mr-2"
+                    data-icon="exclamation-triangle"
+                    data-prefix="fas"
+                    focusable="false"
+                    role="img"
                     style={Object {}}
-                  />
-                </svg>
+                    viewBox="0 0 576 512"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+                      fill="currentColor"
+                      style={Object {}}
+                    />
+                  </svg>
+                </div>
+                <div>
+                  <h6>
+                    You have selected "Delete My Account". Deletion of your account and personal data is permanent and cannot be undone. localhost will not be able to recover your account or the data that is deleted.
+                  </h6>
+                  <p>
+                    If you proceed, you will be unable to use this account to take courses on localhost.
+                  </p>
+                  <p>
+                    <span>
+                      You may also lose access to verified certificates and other program credentials. You can make a copy of these for your records before proceeding with deletion.
+                    </span>
+                  </p>
+                </div>
               </div>
-              <div>
-                <h6>
-                  You have selected "Delete My Account". Deletion of your account and personal data is permanent and cannot be undone. edX will not be able to recover your account or the data that is deleted.
-                </h6>
-                <p>
-                  If you proceed, you will be unable to use this account to take courses on the edX app, edx.org, or any other site hosted by edX. This includes access to edx.org from your employer's or university's system and access to private sites offered by MIT Open Learning, Wharton Executive Education, and Harvard Medical School.
-                </p>
-                <p>
-                  <span>
-                    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, 
-                    <a
-                      href="https://edx.readthedocs.io/projects/edx-guide-for-students/en/latest/SFD_certificates.html#printing-a-certificate"
-                      onClick={[Function]}
-                      target="_self"
-                    >
-                      follow the instructions for printing or downloading a certificate
-                    </a>
-                    .
-                  </span>
-                </p>
+              <div
+                className="form-group"
+              >
+                <label
+                  className="d-block"
+                  htmlFor="passwordFieldId"
+                >
+                  If you still wish to continue and delete your account, please enter your account password:
+                </label>
+                <input
+                  aria-describedby=""
+                  className="form-control"
+                  id="passwordFieldId"
+                  name="password"
+                  onChange={[MockFunction]}
+                  type="password"
+                  value="fluffy bunnies"
+                />
+                <strong
+                  className="invalid-feedback"
+                  id="passwordFieldId-invalid-feedback"
+                >
+                  Unable to delete account
+                </strong>
               </div>
             </div>
-            <div
-              className="form-group"
-            >
-              <label
-                className="d-block"
-                htmlFor="passwordFieldId"
-              >
-                If you still wish to continue and delete your account, please enter your account password:
-              </label>
-              <input
-                aria-describedby=""
-                className="form-control"
-                id="passwordFieldId"
-                name="password"
-                onChange={[MockFunction]}
-                type="password"
-                value="fluffy bunnies"
-              />
-              <strong
-                className="invalid-feedback"
-                id="passwordFieldId-invalid-feedback"
-              >
-                Unable to delete account
-              </strong>
-            </div>
           </div>
-        </div>
-        <div
-          className="modal-footer"
-        >
-          <button
-            className="btn btn-danger"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
+          <div
+            className="modal-footer"
           >
-            Yes, Delete
-          </button>
-          <button
-            className="btn js-close-modal-on-click btn-secondary"
-            id="paragonCloseModalButton3"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            Cancel
-          </button>
+            <button
+              className="btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              Cancel
+            </button>
+            <button
+              className="btn btn-danger"
+              disabled={false}
+              onClick={[MockFunction]}
+              type="button"
+            >
+              Yes, Delete
+            </button>
+          </div>
         </div>
       </div>
+      <div
+        data-focus-guard={true}
+        style={
+          Object {
+            "height": "0px",
+            "left": "1px",
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "fixed",
+            "top": "1px",
+            "width": "1px",
+          }
+        }
+        tabIndex={0}
+      />
     </div>
-  </div>
-</div>
+  </div>,
+]
 `;

src/account-settings/delete-account/__snapshots__/DeleteAccount.test.jsx.snap

@@ -11,28 +11,20 @@ exports[`DeleteAccount should match default section snapshot 1`] = `
     We're sorry to see you go!
   </p>
   <p>
-    Please note: Deletion of your account and personal data is permanent and cannot be undone. edX will not be able to recover your account or the data that is deleted.
+    Please note: Deletion of your account and personal data is permanent and cannot be undone. localhost will not be able to recover your account or the data that is deleted.
   </p>
   <p>
-    Once your account is deleted, you cannot use it to take courses on the edX app, edx.org, or any other site hosted by edX. This includes access to edx.org from your employer’s or university’s system and access to private sites offered by MIT Open Learning, Wharton Executive Education, and Harvard Medical School.
+    Once your account is deleted, you cannot use it to take courses on localhost.
   </p>
   <p>
     <span>
-      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, 
-      <a
-        href="https://edx.readthedocs.io/projects/edx-guide-for-students/en/latest/SFD_certificates.html#printing-a-certificate"
-        onClick={[Function]}
-        target="_self"
-      >
-        follow the instructions for printing or downloading a certificate
-      </a>
-      .
+      You may also lose access to verified certificates and other program credentials. You can make a copy of these for your records before proceeding with deletion.
     </span>
   </p>
   <p
     className="text-danger h6"
   >
-    Warning: Account deletion is permanent. Please read the above carefully before proceeding. This is an irreversible action, and you will no longer be able to use the same email on edX.
+    Warning: Account deletion is permanent. Please read the above carefully before proceeding. This is an irreversible action, and you will no longer be able to use the same email on localhost.
   </p>
   <p>
     <a
@@ -47,9 +39,7 @@ exports[`DeleteAccount should match default section snapshot 1`] = `
     <button
       className="btn btn-outline-danger"
       disabled={false}
-      onBlur={[Function]}
-      onClick={[Function]}
-      onKeyDown={[Function]}
+      onClick={[MockFunction]}
       type="button"
     >
       Delete My Account
@@ -69,28 +59,20 @@ exports[`DeleteAccount should match unverified account section snapshot 1`] = `
     We're sorry to see you go!
   </p>
   <p>
-    Please note: Deletion of your account and personal data is permanent and cannot be undone. edX will not be able to recover your account or the data that is deleted.
+    Please note: Deletion of your account and personal data is permanent and cannot be undone. localhost will not be able to recover your account or the data that is deleted.
   </p>
   <p>
-    Once your account is deleted, you cannot use it to take courses on the edX app, edx.org, or any other site hosted by edX. This includes access to edx.org from your employer’s or university’s system and access to private sites offered by MIT Open Learning, Wharton Executive Education, and Harvard Medical School.
+    Once your account is deleted, you cannot use it to take courses on localhost.
   </p>
   <p>
     <span>
-      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, 
-      <a
-        href="https://edx.readthedocs.io/projects/edx-guide-for-students/en/latest/SFD_certificates.html#printing-a-certificate"
-        onClick={[Function]}
-        target="_self"
-      >
-        follow the instructions for printing or downloading a certificate
-      </a>
-      .
+      You may also lose access to verified certificates and other program credentials. You can make a copy of these for your records before proceeding with deletion.
     </span>
   </p>
   <p
     className="text-danger h6"
   >
-    Warning: Account deletion is permanent. Please read the above carefully before proceeding. This is an irreversible action, and you will no longer be able to use the same email on edX.
+    Warning: Account deletion is permanent. Please read the above carefully before proceeding. This is an irreversible action, and you will no longer be able to use the same email on localhost.
   </p>
   <p>
     <a
@@ -105,9 +87,7 @@ exports[`DeleteAccount should match unverified account section snapshot 1`] = `
     <button
       className="btn btn-outline-danger"
       disabled={true}
-      onBlur={[Function]}
-      onClick={[Function]}
-      onKeyDown={[Function]}
+      onClick={null}
       type="button"
     >
       Delete My Account
@@ -163,28 +143,20 @@ exports[`DeleteAccount should match unverified account section snapshot 2`] = `
     We're sorry to see you go!
   </p>
   <p>
-    Please note: Deletion of your account and personal data is permanent and cannot be undone. edX will not be able to recover your account or the data that is deleted.
+    Please note: Deletion of your account and personal data is permanent and cannot be undone. localhost will not be able to recover your account or the data that is deleted.
   </p>
   <p>
-    Once your account is deleted, you cannot use it to take courses on the edX app, edx.org, or any other site hosted by edX. This includes access to edx.org from your employer’s or university’s system and access to private sites offered by MIT Open Learning, Wharton Executive Education, and Harvard Medical School.
+    Once your account is deleted, you cannot use it to take courses on localhost.
   </p>
   <p>
     <span>
-      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, 
-      <a
-        href="https://edx.readthedocs.io/projects/edx-guide-for-students/en/latest/SFD_certificates.html#printing-a-certificate"
-        onClick={[Function]}
-        target="_self"
-      >
-        follow the instructions for printing or downloading a certificate
-      </a>
-      .
+      You may also lose access to verified certificates and other program credentials. You can make a copy of these for your records before proceeding with deletion.
     </span>
   </p>
   <p
     className="text-danger h6"
   >
-    Warning: Account deletion is permanent. Please read the above carefully before proceeding. This is an irreversible action, and you will no longer be able to use the same email on edX.
+    Warning: Account deletion is permanent. Please read the above carefully before proceeding. This is an irreversible action, and you will no longer be able to use the same email on localhost.
   </p>
   <p>
     <a
@@ -199,9 +171,7 @@ exports[`DeleteAccount should match unverified account section snapshot 2`] = `
     <button
       className="btn btn-outline-danger"
       disabled={true}
-      onBlur={[Function]}
-      onClick={[Function]}
-      onKeyDown={[Function]}
+      onClick={null}
       type="button"
     >
       Delete My Account

src/account-settings/delete-account/__snapshots__/SuccessModal.test.jsx.snap

@@ -1,14 +1,125 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SuccessModal should match default closed success modal snapshot 1`] = `
-<div>
+Array [
   <div
     className="fade"
     role="presentation"
-  />
+  />,
   <div
-    className="modal js-close-modal-on-click fade"
-    onMouseDown={[Function]}
+    className="modal fade"
+    role="presentation"
+  >
+    <div
+      aria-labelledby="id1"
+      aria-modal={true}
+      className=""
+      role="dialog"
+    >
+      <div
+        data-focus-guard={true}
+        style={
+          Object {
+            "height": "0px",
+            "left": "1px",
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "fixed",
+            "top": "1px",
+            "width": "1px",
+          }
+        }
+        tabIndex={-1}
+      />
+      <div
+        data-focus-guard={true}
+        style={
+          Object {
+            "height": "0px",
+            "left": "1px",
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "fixed",
+            "top": "1px",
+            "width": "1px",
+          }
+        }
+        tabIndex={-1}
+      />
+      <div
+        data-focus-lock-disabled="disabled"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onScrollCapture={[Function]}
+        onTouchMoveCapture={[Function]}
+        onWheelCapture={[Function]}
+      >
+        <div
+          className="modal-content"
+        >
+          <div
+            className="modal-header"
+          >
+            <h2
+              className="modal-title"
+              id="id1"
+            >
+              We're sorry to see you go!  Your account will be deleted shortly.
+            </h2>
+          </div>
+          <div
+            className="modal-body"
+          >
+            <div>
+              <p
+                className="h6"
+              >
+                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.
+              </p>
+            </div>
+          </div>
+          <div
+            className="modal-footer"
+          >
+            <button
+              className="btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      </div>
+      <div
+        data-focus-guard={true}
+        style={
+          Object {
+            "height": "0px",
+            "left": "1px",
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "fixed",
+            "top": "1px",
+            "width": "1px",
+          }
+        }
+        tabIndex={-1}
+      />
+    </div>
+  </div>,
+]
+`;
+
+exports[`SuccessModal should match default closed success modal snapshot 2`] = `
+Array [
+  <div
+    className="fade"
+    role="presentation"
+  />,
+  <div
+    className="modal fade"
     role="presentation"
   >
     <div
@@ -16,61 +127,223 @@ exports[`SuccessModal should match default closed success modal snapshot 1`] = `
       aria-modal={true}
       className=""
       role="dialog"
-      tabIndex="-1"
     >
       <div
-        className="modal-content"
+        data-focus-guard={true}
+        style={
+          Object {
+            "height": "0px",
+            "left": "1px",
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "fixed",
+            "top": "1px",
+            "width": "1px",
+          }
+        }
+        tabIndex={-1}
+      />
+      <div
+        data-focus-guard={true}
+        style={
+          Object {
+            "height": "0px",
+            "left": "1px",
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "fixed",
+            "top": "1px",
+            "width": "1px",
+          }
+        }
+        tabIndex={-1}
+      />
+      <div
+        data-focus-lock-disabled="disabled"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onScrollCapture={[Function]}
+        onTouchMoveCapture={[Function]}
+        onWheelCapture={[Function]}
       >
         <div
-          className="modal-header"
+          className="modal-content"
         >
-          <h2
-            className="modal-title"
-            id="id2"
+          <div
+            className="modal-header"
           >
-            We're sorry to see you go!  Your account will be deleted shortly.
-          </h2>
-        </div>
-        <div
-          className="modal-body"
-        >
-          <div>
-            <p
-              className="h6"
+            <h2
+              className="modal-title"
+              id="id2"
             >
-              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.
-            </p>
+              We're sorry to see you go!  Your account will be deleted shortly.
+            </h2>
+          </div>
+          <div
+            className="modal-body"
+          >
+            <div>
+              <p
+                className="h6"
+              >
+                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.
+              </p>
+            </div>
+          </div>
+          <div
+            className="modal-footer"
+          >
+            <button
+              className="btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              Close
+            </button>
           </div>
         </div>
-        <div
-          className="modal-footer"
-        >
-          <button
-            className="btn js-close-modal-on-click btn-secondary"
-            id="paragonCloseModalButton1"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            Close
-          </button>
-        </div>
       </div>
+      <div
+        data-focus-guard={true}
+        style={
+          Object {
+            "height": "0px",
+            "left": "1px",
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "fixed",
+            "top": "1px",
+            "width": "1px",
+          }
+        }
+        tabIndex={-1}
+      />
     </div>
-  </div>
-</div>
+  </div>,
+]
 `;
 
-exports[`SuccessModal should match default closed success modal snapshot 2`] = `
-<div>
+exports[`SuccessModal should match default closed success modal snapshot 3`] = `
+Array [
   <div
     className="fade"
     role="presentation"
-  />
+  />,
   <div
-    className="modal js-close-modal-on-click fade"
-    onMouseDown={[Function]}
+    className="modal fade"
+    role="presentation"
+  >
+    <div
+      aria-labelledby="id3"
+      aria-modal={true}
+      className=""
+      role="dialog"
+    >
+      <div
+        data-focus-guard={true}
+        style={
+          Object {
+            "height": "0px",
+            "left": "1px",
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "fixed",
+            "top": "1px",
+            "width": "1px",
+          }
+        }
+        tabIndex={-1}
+      />
+      <div
+        data-focus-guard={true}
+        style={
+          Object {
+            "height": "0px",
+            "left": "1px",
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "fixed",
+            "top": "1px",
+            "width": "1px",
+          }
+        }
+        tabIndex={-1}
+      />
+      <div
+        data-focus-lock-disabled="disabled"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onScrollCapture={[Function]}
+        onTouchMoveCapture={[Function]}
+        onWheelCapture={[Function]}
+      >
+        <div
+          className="modal-content"
+        >
+          <div
+            className="modal-header"
+          >
+            <h2
+              className="modal-title"
+              id="id3"
+            >
+              We're sorry to see you go!  Your account will be deleted shortly.
+            </h2>
+          </div>
+          <div
+            className="modal-body"
+          >
+            <div>
+              <p
+                className="h6"
+              >
+                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.
+              </p>
+            </div>
+          </div>
+          <div
+            className="modal-footer"
+          >
+            <button
+              className="btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      </div>
+      <div
+        data-focus-guard={true}
+        style={
+          Object {
+            "height": "0px",
+            "left": "1px",
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "fixed",
+            "top": "1px",
+            "width": "1px",
+          }
+        }
+        tabIndex={-1}
+      />
+    </div>
+  </div>,
+]
+`;
+
+exports[`SuccessModal should match default closed success modal snapshot 4`] = `
+Array [
+  <div
+    className="fade"
+    role="presentation"
+  />,
+  <div
+    className="modal fade"
     role="presentation"
   >
     <div
@@ -78,234 +351,213 @@ exports[`SuccessModal should match default closed success modal snapshot 2`] = `
       aria-modal={true}
       className=""
       role="dialog"
-      tabIndex="-1"
     >
       <div
-        className="modal-content"
-      >
-        <div
-          className="modal-header"
-        >
-          <h2
-            className="modal-title"
-            id="id4"
-          >
-            We're sorry to see you go!  Your account will be deleted shortly.
-          </h2>
-        </div>
-        <div
-          className="modal-body"
-        >
-          <div>
-            <p
-              className="h6"
-            >
-              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.
-            </p>
-          </div>
-        </div>
-        <div
-          className="modal-footer"
-        >
-          <button
-            className="btn js-close-modal-on-click btn-secondary"
-            id="paragonCloseModalButton3"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            Close
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`SuccessModal should match default closed success modal snapshot 3`] = `
-<div>
-  <div
-    className="fade"
-    role="presentation"
-  />
-  <div
-    className="modal js-close-modal-on-click fade"
-    onMouseDown={[Function]}
-    role="presentation"
-  >
-    <div
-      aria-labelledby="id6"
-      aria-modal={true}
-      className=""
-      role="dialog"
-      tabIndex="-1"
-    >
+        data-focus-guard={true}
+        style={
+          Object {
+            "height": "0px",
+            "left": "1px",
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "fixed",
+            "top": "1px",
+            "width": "1px",
+          }
+        }
+        tabIndex={-1}
+      />
       <div
-        className="modal-content"
-      >
-        <div
-          className="modal-header"
-        >
-          <h2
-            className="modal-title"
-            id="id6"
-          >
-            We're sorry to see you go!  Your account will be deleted shortly.
-          </h2>
-        </div>
-        <div
-          className="modal-body"
-        >
-          <div>
-            <p
-              className="h6"
-            >
-              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.
-            </p>
-          </div>
-        </div>
-        <div
-          className="modal-footer"
-        >
-          <button
-            className="btn js-close-modal-on-click btn-secondary"
-            id="paragonCloseModalButton5"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            Close
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`SuccessModal should match default closed success modal snapshot 4`] = `
-<div>
-  <div
-    className="fade"
-    role="presentation"
-  />
-  <div
-    className="modal js-close-modal-on-click fade"
-    onMouseDown={[Function]}
-    role="presentation"
-  >
-    <div
-      aria-labelledby="id8"
-      aria-modal={true}
-      className=""
-      role="dialog"
-      tabIndex="-1"
-    >
+        data-focus-guard={true}
+        style={
+          Object {
+            "height": "0px",
+            "left": "1px",
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "fixed",
+            "top": "1px",
+            "width": "1px",
+          }
+        }
+        tabIndex={-1}
+      />
       <div
-        className="modal-content"
+        data-focus-lock-disabled="disabled"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onScrollCapture={[Function]}
+        onTouchMoveCapture={[Function]}
+        onWheelCapture={[Function]}
       >
         <div
-          className="modal-header"
+          className="modal-content"
         >
-          <h2
-            className="modal-title"
-            id="id8"
+          <div
+            className="modal-header"
           >
-            We're sorry to see you go!  Your account will be deleted shortly.
-          </h2>
-        </div>
-        <div
-          className="modal-body"
-        >
-          <div>
-            <p
-              className="h6"
+            <h2
+              className="modal-title"
+              id="id4"
             >
-              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.
-            </p>
+              We're sorry to see you go!  Your account will be deleted shortly.
+            </h2>
+          </div>
+          <div
+            className="modal-body"
+          >
+            <div>
+              <p
+                className="h6"
+              >
+                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.
+              </p>
+            </div>
+          </div>
+          <div
+            className="modal-footer"
+          >
+            <button
+              className="btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              Close
+            </button>
           </div>
         </div>
-        <div
-          className="modal-footer"
-        >
-          <button
-            className="btn js-close-modal-on-click btn-secondary"
-            id="paragonCloseModalButton7"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            Close
-          </button>
-        </div>
       </div>
+      <div
+        data-focus-guard={true}
+        style={
+          Object {
+            "height": "0px",
+            "left": "1px",
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "fixed",
+            "top": "1px",
+            "width": "1px",
+          }
+        }
+        tabIndex={-1}
+      />
     </div>
-  </div>
-</div>
+  </div>,
+]
 `;
 
 exports[`SuccessModal should match open success modal snapshot 1`] = `
-<div>
+Array [
   <div
     className="modal-backdrop show"
     role="presentation"
-  />
+  />,
   <div
-    className="modal js-close-modal-on-click show d-block"
-    onMouseDown={[Function]}
+    className="modal show d-block"
     role="presentation"
   >
     <div
-      aria-labelledby="id10"
+      aria-labelledby="id5"
       aria-modal={true}
       className="modal-dialog"
       role="dialog"
-      tabIndex="-1"
     >
       <div
-        className="modal-content"
+        data-focus-guard={true}
+        style={
+          Object {
+            "height": "0px",
+            "left": "1px",
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "fixed",
+            "top": "1px",
+            "width": "1px",
+          }
+        }
+        tabIndex={0}
+      />
+      <div
+        data-focus-guard={true}
+        style={
+          Object {
+            "height": "0px",
+            "left": "1px",
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "fixed",
+            "top": "1px",
+            "width": "1px",
+          }
+        }
+        tabIndex={1}
+      />
+      <div
+        data-focus-lock-disabled={false}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onScrollCapture={[Function]}
+        onTouchMoveCapture={[Function]}
+        onTouchStart={[Function]}
+        onWheelCapture={[Function]}
       >
         <div
-          className="modal-header"
+          className="modal-content"
         >
-          <h2
-            className="modal-title"
-            id="id10"
+          <div
+            className="modal-header"
           >
-            We're sorry to see you go!  Your account will be deleted shortly.
-          </h2>
-        </div>
-        <div
-          className="modal-body"
-        >
-          <div>
-            <p
-              className="h6"
+            <h2
+              className="modal-title"
+              id="id5"
             >
-              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.
-            </p>
+              We're sorry to see you go!  Your account will be deleted shortly.
+            </h2>
+          </div>
+          <div
+            className="modal-body"
+          >
+            <div>
+              <p
+                className="h6"
+              >
+                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.
+              </p>
+            </div>
+          </div>
+          <div
+            className="modal-footer"
+          >
+            <button
+              className="btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              Close
+            </button>
           </div>
         </div>
-        <div
-          className="modal-footer"
-        >
-          <button
-            className="btn js-close-modal-on-click btn-secondary"
-            id="paragonCloseModalButton9"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            Close
-          </button>
-        </div>
       </div>
+      <div
+        data-focus-guard={true}
+        style={
+          Object {
+            "height": "0px",
+            "left": "1px",
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "fixed",
+            "top": "1px",
+            "width": "1px",
+          }
+        }
+        tabIndex={0}
+      />
     </div>
-  </div>
-</div>
+  </div>,
+]
 `;

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

@@ -13,22 +13,27 @@ const messages = defineMessages({
   },
   'account.settings.delete.account.text.1': {
     id: 'account.settings.delete.account.text.1',
-    defaultMessage: 'Please note: Deletion of your account and personal data is permanent and cannot be undone. edX will not be able to recover your account or the data that is deleted.',
+    defaultMessage: 'Please note: Deletion of your account and personal data is permanent and cannot be undone. {siteName} will not be able to recover your account or the data that is deleted.',
     description: 'A message in the user account deletion area',
   },
   'account.settings.delete.account.text.2': {
     id: 'account.settings.delete.account.text.2',
+    defaultMessage: 'Once your account is deleted, you cannot use it to take courses on {siteName}.',
+    description: 'A message in the user account deletion area',
+  },
+  'account.settings.delete.account.text.2.edX': {
+    id: 'account.settings.delete.account.text.2.edX',
     defaultMessage: 'Once your account is deleted, you cannot use it to take courses on the edX app, edx.org, or any other site hosted by edX. This includes access to edx.org from your employer’s or university’s system and access to private sites offered by MIT Open Learning, Wharton Executive Education, and Harvard Medical School.',
     description: 'A message in the user account deletion area',
   },
   'account.settings.delete.account.text.3.link': {
     id: 'account.settings.delete.account.text.3.link',
-    defaultMessage: 'follow the instructions for printing or downloading a certificate',
-    description: 'This text will be a link to a technical support page; it will go in the phrase If you want to make a copy of these for your records, ______ .',
+    defaultMessage: 'Follow these instructions for printing or downloading a certificate',
+    description: 'This text is a link to a technical support page where users can learn how to print or download their certificates.',
   },
   'account.settings.delete.account.text.warning': {
     id: 'account.settings.delete.account.text.warning',
-    defaultMessage: 'Warning: Account deletion is permanent. Please read the above carefully before proceeding. This is an irreversible action, and you will no longer be able to use the same email on edX.',
+    defaultMessage: 'Warning: Account deletion is permanent. Please read the above carefully before proceeding. This is an irreversible action, and you will no longer be able to use the same email on {siteName}.',
     description: 'A message in the user account deletion area',
   },
   'account.settings.delete.account.text.change.instead': {
@@ -39,7 +44,7 @@ const messages = defineMessages({
   'account.settings.delete.account.button': {
     id: 'account.settings.delete.account.button',
     defaultMessage: 'Delete My Account',
-    description: 'Button label to permanently delete your edX account',
+    description: 'Button label to permanently delete your platform account',
   },
   'account.settings.delete.account.please.activate': {
     id: 'account.settings.delete.account.please.activate',
@@ -58,11 +63,16 @@ const messages = defineMessages({
   },
   'account.settings.delete.account.modal.text.1': {
     id: 'account.settings.delete.account.modal.text.1',
-    defaultMessage: 'You have selected "Delete My Account". Deletion of your account and personal data is permanent and cannot be undone. edX will not be able to recover your account or the data that is deleted.',
+    defaultMessage: 'You have selected "Delete My Account". Deletion of your account and personal data is permanent and cannot be undone. {siteName} will not be able to recover your account or the data that is deleted.',
     description: 'Messaging in the dialog asking user to confirm that they want to delete their entire account',
   },
   'account.settings.delete.account.modal.text.2': {
     id: 'account.settings.delete.account.modal.text.2',
+    defaultMessage: 'If you proceed, you will be unable to use this account to take courses on {siteName}.',
+    description: 'Messaging in the dialog asking user to confirm that they want to delete their entire account',
+  },
+  'account.settings.delete.account.modal.text.2.edX': {
+    id: 'account.settings.delete.account.modal.text.2.edX',
     defaultMessage: 'If you proceed, you will be unable to use this account to take courses on the edX app, edx.org, or any other site hosted by edX. This includes access to edx.org from your employer\'s or university\'s system and access to private sites offered by MIT Open Learning, Wharton Executive Education, and Harvard Medical School.',
     description: 'Messaging in the dialog asking user to confirm that they want to delete their entire account',
   },

src/account-settings/demographics/Checkboxes.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { CheckBox } from '@edx/paragon';
 import { DECLINED } from '../data/constants';
 
-export const Checkboxes = (props) => {
+const Checkboxes = (props) => {
   const {
     id,
     options,
@@ -13,12 +13,12 @@ export const Checkboxes = (props) => {
 
   const [selected, setSelected] = useState(values);
   useEffect(() => {
-    onChange(id, selected)
-  }, [selected])
+    onChange(id, selected);
+  }, [selected]);
 
   const handleToggle = (value, option) => {
     // If the user checked 'declined', uncheck all other options
-    if (value && option == DECLINED) {
+    if (value && option === DECLINED) {
       setSelected([DECLINED]);
       return;
     }
@@ -33,46 +33,47 @@ export const Checkboxes = (props) => {
     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>
-      )
-    })
-  }
+  const renderCheckboxes = () => options.map((option, index) => {
+    const isFirst = index === 0;
+    const isChecked = selected.includes(option.value);
+    return (
+      <div key={option.value} 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,
+  id: PropTypes.string.isRequired,
+  options: PropTypes.arrayOf(PropTypes.shape({
+    value: PropTypes.string,
+    label: PropTypes.string,
+  })),
+  values: PropTypes.arrayOf(PropTypes.string),
+  onChange: PropTypes.func.isRequired,
 };
 
 Checkboxes.defaultProps = {
   options: [],
   values: [],
-}
+};
 
 export default Checkboxes;

src/account-settings/demographics/DemographicsSection.jsx

@@ -1,31 +1,109 @@
-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 { Hyperlink, 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 { demographicsSectionSelector } from '../data/selectors';
+import EditableField from '../EditableField';
+import Checkboxes from './Checkboxes';
+import Alert from '../Alert';
+import { saveMultipleSettings, updateDraft } from '../data/actions';
+import {
+  OTHER,
+  SELF_DESCRIBE,
+} from '../data/constants';
 import messages from './DemographicsSection.messages';
 
 class DemographicsSection extends React.Component {
-  constructor(props, context) {
-    super(props, context);
+  // 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) => {
+    let ethnicities = [];
+    if (get(this, 'props.formValues.demographics_user_ethnicity')) {
+      ethnicities = this.props.formValues.demographics_user_ethnicity;
+    }
+    return ethnicities.map((e) => {
+      const matchingOption = demographicsEthnicityOptions.filter(option => option.value === e)[0];
+      return matchingOption && matchingOption.label;
+    }).join(', ');
+  }
+
+  handleEditableFieldChange = (name, value) => {
+    this.props.updateDraft(name, value);
+  };
+
+  handleSubmit = (formId) => {
+    // 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;
+    const settingsArray = Object.entries(drafts).map(([field, value]) => ({
+      formId: field,
+      commitValues: value,
+    }));
+
+    this.props.saveMultipleSettings(settingsArray, formId);
+  };
+
+  /**
+   * 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]),
+    }];
   }
 
   /**
@@ -38,100 +116,19 @@ class DemographicsSection extends React.Component {
     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) {
+    if (!isEmpty(this.props.formErrors.demographicsError)
+        || !this.hasRetrievedDemographicsOptions()) {
       return (
         <div
           tabIndex="-1"
-          ref={this.alertRef}>
+          ref={this.alertRef}
+        >
           <Alert className="alert alert-danger" role="alert">
             <FormattedMessage
               id="account.settings.message.demographics.service.issue"
@@ -141,9 +138,8 @@ class DemographicsSection extends React.Component {
           </Alert>
         </div>
       );
-    } else {
-      return null;
     }
+    return null;
   }
 
   render() {
@@ -162,8 +158,8 @@ class DemographicsSection extends React.Component {
       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;
+    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}>
@@ -171,17 +167,26 @@ class DemographicsSection extends React.Component {
           {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>
+          <Hyperlink
+            destination={`${getConfig().MARKETING_SITE_BASE_URL}/demographics`}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {this.props.intl.formatMessage(
+              messages['account.settings.section.demographics.why'],
+              {
+                siteName: getConfig().SITE_NAME,
+              },
+            )}
+          </Hyperlink>
         </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() &&
+        {this.hasRetrievedDemographicsOptions() && (
           <div id="demographics-fields">
             <EditableField
               name="demographics_gender"
@@ -193,18 +198,18 @@ class DemographicsSection extends React.Component {
               emptyLabel={this.props.intl.formatMessage(messages['account.settings.field.demographics.gender.empty'])}
               {...editableFieldProps}
             >
-              {showSelfDescribe &&
+              {showSelfDescribe && (
                 <Input
-                  name='demographics_gender_description'
-                  id='field-demographics_gender_description'
-                  type='text'
+                  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)}
+                  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"
@@ -262,24 +267,26 @@ class DemographicsSection extends React.Component {
               name="demographics_work_status"
               type="select"
               value={this.props.formValues.demographics_work_status}
-              userSuppliedValue={showWorkStatusDescribe ? this.props.formValues.demographics_work_status_description : null}
+              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 &&
+              {showWorkStatusDescribe && (
                 <Input
-                  name='demographics_work_status_description'
-                  id='field-demographics_work_status_description'
-                  type='text'
+                  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)}
+                  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"
@@ -300,11 +307,11 @@ class DemographicsSection extends React.Component {
               {...editableFieldProps}
             />
           </div>
-        }
+        )}
       </div>
-    )
+    );
   }
-};
+}
 
 DemographicsSection.propTypes = {
   intl: intlShape.isRequired,
@@ -318,11 +325,30 @@ DemographicsSection.propTypes = {
     demographics_work_status: PropTypes.string,
     demographics_current_work_sector: PropTypes.string,
     demographics_future_work_sector: PropTypes.string,
+    demographics_work_status_description: PropTypes.string,
+    demographics_gender_description: PropTypes.string,
+    demographicsOptions: PropTypes.object,
+  }).isRequired,
+  drafts: 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,
+    demographics_work_status_description: PropTypes.string,
+    demographics_gender_description: PropTypes.string,
+    demographicsOptions: PropTypes.object,
   }).isRequired,
   formErrors: PropTypes.shape({
     demographicsError: PropTypes.string,
   }).isRequired,
-  updateDraft: PropTypes.func.isRequired
+  forwardRef: PropTypes.func.isRequired,
+  updateDraft: PropTypes.func.isRequired,
+  saveMultipleSettings: PropTypes.func.isRequired,
 };
 
 export default connect(demographicsSectionSelector, {

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

@@ -162,7 +162,7 @@ const messages = defineMessages({
   /* Legal copy link text */
   'account.settings.section.demographics.why': {
     id: 'account.settings.section.demographics.why',
-    defaultMessage: 'Why does edX collect this information?',
+    defaultMessage: 'Why does {siteName} collect this information?',
     description: 'Link text for a link to external legal text',
   },
 });

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

@@ -22,8 +22,7 @@ export function createDemographicsError(error) {
       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];
+      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

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

@@ -2,582 +2,582 @@ 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';
+import DemographicsSection from '../DemographicsSection';
 
 jest.mock('@edx/frontend-platform/auth');
 
 const IntlDemographicsSection = injectIntl(DemographicsSection);
 
-jest.mock('../../data/selectors', () => {
-   return jest.fn().mockImplementation(() => ({ demographicsSectionSelector: () => ({}) })); 
-});
+jest.mock('../../data/selectors', () => 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"
-                                                  }
-                                            ]
-                                        }
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }
+  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 }));
-    });
+          },
+        },
+      },
+      formErrors: {},
+      intl: {},
+      forwardRef: () => {},
+      drafts: {},
+    };
+    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', () => {
+    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"
-            }
-        };
+  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();
-    });
+    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',
-            }
-        }
+  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();
-    });
+    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 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',
+      },
+    };
 
-    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();
+  });
 
-        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'],
+      },
+    };
 
-    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();
+  });
 
-        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: null,
+      },
+    };
+
+    const wrapper = renderer.create(reduxWrapper(<IntlDemographicsSection {...props} />)).toJSON();
+    expect(wrapper).toMatchSnapshot();
+  });
 });

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

@@ -13,9 +13,20 @@ exports[`DemographicsSection should render 1`] = `
   <p>
     <a
       href="http://localhost:5335/demographics"
+      onClick={[Function]}
+      rel="noopener noopener noreferrer"
       target="_blank"
     >
-      Why does edX collect this information?
+      Why does localhost collect this information?
+      <span>
+         
+        <span
+          aria-hidden={false}
+          aria-label="Opens in a new window"
+          className="fa fa-external-link"
+          title="Opens in a new window"
+        />
+      </span>
     </a>
   </p>
   <div
@@ -48,10 +59,9 @@ exports[`DemographicsSection should render 1`] = `
               Gender identity
             </h6>
             <button
-              className="btn ml-3 btn-link"
-              onBlur={[Function]}
+              className="ml-3 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               <svg
@@ -74,7 +84,9 @@ exports[`DemographicsSection should render 1`] = `
               Edit
             </button>
           </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
             Prefer not to respond
           </p>
           <p
@@ -110,10 +122,9 @@ exports[`DemographicsSection should render 1`] = `
               Race/Ethnicity identity
             </h6>
             <button
-              className="btn ml-3 btn-link"
-              onBlur={[Function]}
+              className="ml-3 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               <svg
@@ -136,12 +147,13 @@ exports[`DemographicsSection should render 1`] = `
               Edit
             </button>
           </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
             <button
-              className="btn btn-link p-0"
-              onBlur={[Function]}
+              className="p-0 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               Add race/ethnicity identity
@@ -180,10 +192,9 @@ exports[`DemographicsSection should render 1`] = `
               Family income
             </h6>
             <button
-              className="btn ml-3 btn-link"
-              onBlur={[Function]}
+              className="ml-3 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               <svg
@@ -206,7 +217,9 @@ exports[`DemographicsSection should render 1`] = `
               Edit
             </button>
           </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
             Prefer not to respond
           </p>
           <p
@@ -242,10 +255,9 @@ exports[`DemographicsSection should render 1`] = `
               U.S. Military status
             </h6>
             <button
-              className="btn ml-3 btn-link"
-              onBlur={[Function]}
+              className="ml-3 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               <svg
@@ -268,7 +280,9 @@ exports[`DemographicsSection should render 1`] = `
               Edit
             </button>
           </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
             Prefer not to respond
           </p>
           <p
@@ -304,10 +318,9 @@ exports[`DemographicsSection should render 1`] = `
               Your education level
             </h6>
             <button
-              className="btn ml-3 btn-link"
-              onBlur={[Function]}
+              className="ml-3 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               <svg
@@ -330,7 +343,9 @@ exports[`DemographicsSection should render 1`] = `
               Edit
             </button>
           </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
             Prefer not to respond
           </p>
           <p
@@ -366,10 +381,9 @@ exports[`DemographicsSection should render 1`] = `
               Parents/Guardians education level
             </h6>
             <button
-              className="btn ml-3 btn-link"
-              onBlur={[Function]}
+              className="ml-3 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               <svg
@@ -392,7 +406,9 @@ exports[`DemographicsSection should render 1`] = `
               Edit
             </button>
           </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
             Prefer not to respond
           </p>
           <p
@@ -428,10 +444,9 @@ exports[`DemographicsSection should render 1`] = `
               Employment status
             </h6>
             <button
-              className="btn ml-3 btn-link"
-              onBlur={[Function]}
+              className="ml-3 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               <svg
@@ -454,7 +469,9 @@ exports[`DemographicsSection should render 1`] = `
               Edit
             </button>
           </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
             Prefer not to respond
           </p>
           <p
@@ -490,10 +507,9 @@ exports[`DemographicsSection should render 1`] = `
               Current work industry
             </h6>
             <button
-              className="btn ml-3 btn-link"
-              onBlur={[Function]}
+              className="ml-3 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               <svg
@@ -516,7 +532,9 @@ exports[`DemographicsSection should render 1`] = `
               Edit
             </button>
           </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
             Prefer not to respond
           </p>
           <p
@@ -552,10 +570,9 @@ exports[`DemographicsSection should render 1`] = `
               Future work industry
             </h6>
             <button
-              className="btn ml-3 btn-link"
-              onBlur={[Function]}
+              className="ml-3 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               <svg
@@ -578,7 +595,9 @@ exports[`DemographicsSection should render 1`] = `
               Edit
             </button>
           </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
             Prefer not to respond
           </p>
           <p
@@ -604,9 +623,20 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
   <p>
     <a
       href="http://localhost:5335/demographics"
+      onClick={[Function]}
+      rel="noopener noopener noreferrer"
       target="_blank"
     >
-      Why does edX collect this information?
+      Why does localhost collect this information?
+      <span>
+         
+        <span
+          aria-hidden={false}
+          aria-label="Opens in a new window"
+          className="fa fa-external-link"
+          title="Opens in a new window"
+        />
+      </span>
     </a>
   </p>
   <div
@@ -653,10 +683,9 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
               Gender identity
             </h6>
             <button
-              className="btn ml-3 btn-link"
-              onBlur={[Function]}
+              className="ml-3 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               <svg
@@ -679,7 +708,9 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
               Edit
             </button>
           </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
             Prefer not to respond
           </p>
           <p
@@ -715,10 +746,9 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
               Race/Ethnicity identity
             </h6>
             <button
-              className="btn ml-3 btn-link"
-              onBlur={[Function]}
+              className="ml-3 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               <svg
@@ -741,12 +771,13 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
               Edit
             </button>
           </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
             <button
-              className="btn btn-link p-0"
-              onBlur={[Function]}
+              className="p-0 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               Add race/ethnicity identity
@@ -785,10 +816,9 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
               Family income
             </h6>
             <button
-              className="btn ml-3 btn-link"
-              onBlur={[Function]}
+              className="ml-3 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               <svg
@@ -811,7 +841,9 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
               Edit
             </button>
           </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
             Prefer not to respond
           </p>
           <p
@@ -847,10 +879,9 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
               U.S. Military status
             </h6>
             <button
-              className="btn ml-3 btn-link"
-              onBlur={[Function]}
+              className="ml-3 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               <svg
@@ -873,7 +904,9 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
               Edit
             </button>
           </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
             Prefer not to respond
           </p>
           <p
@@ -909,10 +942,9 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
               Your education level
             </h6>
             <button
-              className="btn ml-3 btn-link"
-              onBlur={[Function]}
+              className="ml-3 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               <svg
@@ -935,7 +967,9 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
               Edit
             </button>
           </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
             Prefer not to respond
           </p>
           <p
@@ -971,10 +1005,9 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
               Parents/Guardians education level
             </h6>
             <button
-              className="btn ml-3 btn-link"
-              onBlur={[Function]}
+              className="ml-3 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               <svg
@@ -997,7 +1030,9 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
               Edit
             </button>
           </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
             Prefer not to respond
           </p>
           <p
@@ -1033,10 +1068,9 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
               Employment status
             </h6>
             <button
-              className="btn ml-3 btn-link"
-              onBlur={[Function]}
+              className="ml-3 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               <svg
@@ -1059,7 +1093,9 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
               Edit
             </button>
           </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
             Prefer not to respond
           </p>
           <p
@@ -1095,10 +1131,9 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
               Current work industry
             </h6>
             <button
-              className="btn ml-3 btn-link"
-              onBlur={[Function]}
+              className="ml-3 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               <svg
@@ -1121,7 +1156,9 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
               Edit
             </button>
           </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
             Prefer not to respond
           </p>
           <p
@@ -1157,10 +1194,9 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
               Future work industry
             </h6>
             <button
-              className="btn ml-3 btn-link"
-              onBlur={[Function]}
+              className="ml-3 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               <svg
@@ -1183,7 +1219,9 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
               Edit
             </button>
           </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
             Prefer not to respond
           </p>
           <p
@@ -1209,9 +1247,20 @@ exports[`DemographicsSection should render an Alert when demographicsOptions pro
   <p>
     <a
       href="http://localhost:5335/demographics"
+      onClick={[Function]}
+      rel="noopener noopener noreferrer"
       target="_blank"
     >
-      Why does edX collect this information?
+      Why does localhost collect this information?
+      <span>
+         
+        <span
+          aria-hidden={false}
+          aria-label="Opens in a new window"
+          className="fa fa-external-link"
+          title="Opens in a new window"
+        />
+      </span>
     </a>
   </p>
   <div
@@ -1244,9 +1293,20 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
   <p>
     <a
       href="http://localhost:5335/demographics"
+      onClick={[Function]}
+      rel="noopener noopener noreferrer"
       target="_blank"
     >
-      Why does edX collect this information?
+      Why does localhost collect this information?
+      <span>
+         
+        <span
+          aria-hidden={false}
+          aria-label="Opens in a new window"
+          className="fa fa-external-link"
+          title="Opens in a new window"
+        />
+      </span>
     </a>
   </p>
   <div
@@ -1279,10 +1339,9 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
               Gender identity
             </h6>
             <button
-              className="btn ml-3 btn-link"
-              onBlur={[Function]}
+              className="ml-3 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               <svg
@@ -1305,7 +1364,9 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
               Edit
             </button>
           </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
             Prefer not to respond
           </p>
           <p
@@ -1341,10 +1402,9 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
               Race/Ethnicity identity
             </h6>
             <button
-              className="btn ml-3 btn-link"
-              onBlur={[Function]}
+              className="ml-3 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               <svg
@@ -1367,7 +1427,9 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
               Edit
             </button>
           </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
             Hispanic, Latin, or Spanish origin, White
           </p>
           <p
@@ -1403,10 +1465,9 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
               Family income
             </h6>
             <button
-              className="btn ml-3 btn-link"
-              onBlur={[Function]}
+              className="ml-3 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               <svg
@@ -1429,7 +1490,9 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
               Edit
             </button>
           </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
             Prefer not to respond
           </p>
           <p
@@ -1465,10 +1528,9 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
               U.S. Military status
             </h6>
             <button
-              className="btn ml-3 btn-link"
-              onBlur={[Function]}
+              className="ml-3 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               <svg
@@ -1491,7 +1553,9 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
               Edit
             </button>
           </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
             Prefer not to respond
           </p>
           <p
@@ -1527,10 +1591,9 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
               Your education level
             </h6>
             <button
-              className="btn ml-3 btn-link"
-              onBlur={[Function]}
+              className="ml-3 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               <svg
@@ -1553,7 +1616,9 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
               Edit
             </button>
           </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
             Prefer not to respond
           </p>
           <p
@@ -1589,10 +1654,9 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
               Parents/Guardians education level
             </h6>
             <button
-              className="btn ml-3 btn-link"
-              onBlur={[Function]}
+              className="ml-3 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               <svg
@@ -1615,7 +1679,9 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
               Edit
             </button>
           </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
             Prefer not to respond
           </p>
           <p
@@ -1651,10 +1717,9 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
               Employment status
             </h6>
             <button
-              className="btn ml-3 btn-link"
-              onBlur={[Function]}
+              className="ml-3 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               <svg
@@ -1677,7 +1742,9 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
               Edit
             </button>
           </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
             Prefer not to respond
           </p>
           <p
@@ -1713,10 +1780,9 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
               Current work industry
             </h6>
             <button
-              className="btn ml-3 btn-link"
-              onBlur={[Function]}
+              className="ml-3 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               <svg
@@ -1739,7 +1805,9 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
               Edit
             </button>
           </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
             Prefer not to respond
           </p>
           <p
@@ -1775,10 +1843,9 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
               Future work industry
             </h6>
             <button
-              className="btn ml-3 btn-link"
-              onBlur={[Function]}
+              className="ml-3 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               <svg
@@ -1801,7 +1868,9 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
               Edit
             </button>
           </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
             Prefer not to respond
           </p>
           <p
@@ -1827,9 +1896,20 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
   <p>
     <a
       href="http://localhost:5335/demographics"
+      onClick={[Function]}
+      rel="noopener noopener noreferrer"
       target="_blank"
     >
-      Why does edX collect this information?
+      Why does localhost collect this information?
+      <span>
+         
+        <span
+          aria-hidden={false}
+          aria-label="Opens in a new window"
+          className="fa fa-external-link"
+          title="Opens in a new window"
+        />
+      </span>
     </a>
   </p>
   <div
@@ -1862,10 +1942,9 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
               Gender identity
             </h6>
             <button
-              className="btn ml-3 btn-link"
-              onBlur={[Function]}
+              className="ml-3 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               <svg
@@ -1888,7 +1967,9 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
               Edit
             </button>
           </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
             Prefer not to respond
           </p>
           <p
@@ -1924,10 +2005,9 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
               Race/Ethnicity identity
             </h6>
             <button
-              className="btn ml-3 btn-link"
-              onBlur={[Function]}
+              className="ml-3 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               <svg
@@ -1950,7 +2030,9 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
               Edit
             </button>
           </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
             Asian
           </p>
           <p
@@ -1986,10 +2068,9 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
               Family income
             </h6>
             <button
-              className="btn ml-3 btn-link"
-              onBlur={[Function]}
+              className="ml-3 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               <svg
@@ -2012,7 +2093,9 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
               Edit
             </button>
           </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
             Prefer not to respond
           </p>
           <p
@@ -2048,10 +2131,9 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
               U.S. Military status
             </h6>
             <button
-              className="btn ml-3 btn-link"
-              onBlur={[Function]}
+              className="ml-3 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               <svg
@@ -2074,7 +2156,9 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
               Edit
             </button>
           </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
             Prefer not to respond
           </p>
           <p
@@ -2110,10 +2194,9 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
               Your education level
             </h6>
             <button
-              className="btn ml-3 btn-link"
-              onBlur={[Function]}
+              className="ml-3 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               <svg
@@ -2136,7 +2219,9 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
               Edit
             </button>
           </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
             Prefer not to respond
           </p>
           <p
@@ -2172,10 +2257,9 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
               Parents/Guardians education level
             </h6>
             <button
-              className="btn ml-3 btn-link"
-              onBlur={[Function]}
+              className="ml-3 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               <svg
@@ -2198,7 +2282,9 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
               Edit
             </button>
           </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
             Prefer not to respond
           </p>
           <p
@@ -2234,10 +2320,9 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
               Employment status
             </h6>
             <button
-              className="btn ml-3 btn-link"
-              onBlur={[Function]}
+              className="ml-3 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               <svg
@@ -2260,7 +2345,9 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
               Edit
             </button>
           </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
             Prefer not to respond
           </p>
           <p
@@ -2296,10 +2383,9 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
               Current work industry
             </h6>
             <button
-              className="btn ml-3 btn-link"
-              onBlur={[Function]}
+              className="ml-3 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               <svg
@@ -2322,7 +2408,9 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
               Edit
             </button>
           </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
             Prefer not to respond
           </p>
           <p
@@ -2358,10 +2446,9 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
               Future work industry
             </h6>
             <button
-              className="btn ml-3 btn-link"
-              onBlur={[Function]}
+              className="ml-3 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               <svg
@@ -2384,7 +2471,9 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
               Edit
             </button>
           </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
             Prefer not to respond
           </p>
           <p
@@ -2410,9 +2499,20 @@ exports[`DemographicsSection should set user input correctly when user provides
   <p>
     <a
       href="http://localhost:5335/demographics"
+      onClick={[Function]}
+      rel="noopener noopener noreferrer"
       target="_blank"
     >
-      Why does edX collect this information?
+      Why does localhost collect this information?
+      <span>
+         
+        <span
+          aria-hidden={false}
+          aria-label="Opens in a new window"
+          className="fa fa-external-link"
+          title="Opens in a new window"
+        />
+      </span>
     </a>
   </p>
   <div
@@ -2445,10 +2545,9 @@ exports[`DemographicsSection should set user input correctly when user provides
               Gender identity
             </h6>
             <button
-              className="btn ml-3 btn-link"
-              onBlur={[Function]}
+              className="ml-3 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               <svg
@@ -2471,7 +2570,9 @@ exports[`DemographicsSection should set user input correctly when user provides
               Edit
             </button>
           </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
             Prefer not to respond
           </p>
           <p
@@ -2507,10 +2608,9 @@ exports[`DemographicsSection should set user input correctly when user provides
               Race/Ethnicity identity
             </h6>
             <button
-              className="btn ml-3 btn-link"
-              onBlur={[Function]}
+              className="ml-3 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               <svg
@@ -2533,12 +2633,13 @@ exports[`DemographicsSection should set user input correctly when user provides
               Edit
             </button>
           </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
             <button
-              className="btn btn-link p-0"
-              onBlur={[Function]}
+              className="p-0 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               Add race/ethnicity identity
@@ -2577,10 +2678,9 @@ exports[`DemographicsSection should set user input correctly when user provides
               Family income
             </h6>
             <button
-              className="btn ml-3 btn-link"
-              onBlur={[Function]}
+              className="ml-3 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               <svg
@@ -2603,7 +2703,9 @@ exports[`DemographicsSection should set user input correctly when user provides
               Edit
             </button>
           </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
             Prefer not to respond
           </p>
           <p
@@ -2639,10 +2741,9 @@ exports[`DemographicsSection should set user input correctly when user provides
               U.S. Military status
             </h6>
             <button
-              className="btn ml-3 btn-link"
-              onBlur={[Function]}
+              className="ml-3 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               <svg
@@ -2665,7 +2766,9 @@ exports[`DemographicsSection should set user input correctly when user provides
               Edit
             </button>
           </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
             Prefer not to respond
           </p>
           <p
@@ -2701,10 +2804,9 @@ exports[`DemographicsSection should set user input correctly when user provides
               Your education level
             </h6>
             <button
-              className="btn ml-3 btn-link"
-              onBlur={[Function]}
+              className="ml-3 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               <svg
@@ -2727,7 +2829,9 @@ exports[`DemographicsSection should set user input correctly when user provides
               Edit
             </button>
           </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
             Prefer not to respond
           </p>
           <p
@@ -2763,10 +2867,9 @@ exports[`DemographicsSection should set user input correctly when user provides
               Parents/Guardians education level
             </h6>
             <button
-              className="btn ml-3 btn-link"
-              onBlur={[Function]}
+              className="ml-3 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               <svg
@@ -2789,7 +2892,9 @@ exports[`DemographicsSection should set user input correctly when user provides
               Edit
             </button>
           </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
             Prefer not to respond
           </p>
           <p
@@ -2825,10 +2930,9 @@ exports[`DemographicsSection should set user input correctly when user provides
               Employment status
             </h6>
             <button
-              className="btn ml-3 btn-link"
-              onBlur={[Function]}
+              className="ml-3 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               <svg
@@ -2851,7 +2955,9 @@ exports[`DemographicsSection should set user input correctly when user provides
               Edit
             </button>
           </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
             Other: test
           </p>
           <p
@@ -2887,10 +2993,9 @@ exports[`DemographicsSection should set user input correctly when user provides
               Current work industry
             </h6>
             <button
-              className="btn ml-3 btn-link"
-              onBlur={[Function]}
+              className="ml-3 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               <svg
@@ -2913,7 +3018,9 @@ exports[`DemographicsSection should set user input correctly when user provides
               Edit
             </button>
           </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
             Prefer not to respond
           </p>
           <p
@@ -2949,10 +3056,9 @@ exports[`DemographicsSection should set user input correctly when user provides
               Future work industry
             </h6>
             <button
-              className="btn ml-3 btn-link"
-              onBlur={[Function]}
+              className="ml-3 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               <svg
@@ -2975,7 +3081,9 @@ exports[`DemographicsSection should set user input correctly when user provides
               Edit
             </button>
           </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
             Prefer not to respond
           </p>
           <p
@@ -3001,9 +3109,20 @@ exports[`DemographicsSection should set user input correctly when user provides
   <p>
     <a
       href="http://localhost:5335/demographics"
+      onClick={[Function]}
+      rel="noopener noopener noreferrer"
       target="_blank"
     >
-      Why does edX collect this information?
+      Why does localhost collect this information?
+      <span>
+         
+        <span
+          aria-hidden={false}
+          aria-label="Opens in a new window"
+          className="fa fa-external-link"
+          title="Opens in a new window"
+        />
+      </span>
     </a>
   </p>
   <div
@@ -3036,10 +3155,9 @@ exports[`DemographicsSection should set user input correctly when user provides
               Gender identity
             </h6>
             <button
-              className="btn ml-3 btn-link"
-              onBlur={[Function]}
+              className="ml-3 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               <svg
@@ -3062,7 +3180,9 @@ exports[`DemographicsSection should set user input correctly when user provides
               Edit
             </button>
           </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
             Prefer to self describe: test
           </p>
           <p
@@ -3098,10 +3218,9 @@ exports[`DemographicsSection should set user input correctly when user provides
               Race/Ethnicity identity
             </h6>
             <button
-              className="btn ml-3 btn-link"
-              onBlur={[Function]}
+              className="ml-3 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               <svg
@@ -3124,12 +3243,13 @@ exports[`DemographicsSection should set user input correctly when user provides
               Edit
             </button>
           </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
             <button
-              className="btn btn-link p-0"
-              onBlur={[Function]}
+              className="p-0 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               Add race/ethnicity identity
@@ -3168,10 +3288,9 @@ exports[`DemographicsSection should set user input correctly when user provides
               Family income
             </h6>
             <button
-              className="btn ml-3 btn-link"
-              onBlur={[Function]}
+              className="ml-3 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               <svg
@@ -3194,7 +3313,9 @@ exports[`DemographicsSection should set user input correctly when user provides
               Edit
             </button>
           </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
             Prefer not to respond
           </p>
           <p
@@ -3230,10 +3351,9 @@ exports[`DemographicsSection should set user input correctly when user provides
               U.S. Military status
             </h6>
             <button
-              className="btn ml-3 btn-link"
-              onBlur={[Function]}
+              className="ml-3 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               <svg
@@ -3256,7 +3376,9 @@ exports[`DemographicsSection should set user input correctly when user provides
               Edit
             </button>
           </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
             Prefer not to respond
           </p>
           <p
@@ -3292,10 +3414,9 @@ exports[`DemographicsSection should set user input correctly when user provides
               Your education level
             </h6>
             <button
-              className="btn ml-3 btn-link"
-              onBlur={[Function]}
+              className="ml-3 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               <svg
@@ -3318,7 +3439,9 @@ exports[`DemographicsSection should set user input correctly when user provides
               Edit
             </button>
           </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
             Prefer not to respond
           </p>
           <p
@@ -3354,10 +3477,9 @@ exports[`DemographicsSection should set user input correctly when user provides
               Parents/Guardians education level
             </h6>
             <button
-              className="btn ml-3 btn-link"
-              onBlur={[Function]}
+              className="ml-3 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               <svg
@@ -3380,7 +3502,9 @@ exports[`DemographicsSection should set user input correctly when user provides
               Edit
             </button>
           </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
             Prefer not to respond
           </p>
           <p
@@ -3416,10 +3540,9 @@ exports[`DemographicsSection should set user input correctly when user provides
               Employment status
             </h6>
             <button
-              className="btn ml-3 btn-link"
-              onBlur={[Function]}
+              className="ml-3 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               <svg
@@ -3442,7 +3565,9 @@ exports[`DemographicsSection should set user input correctly when user provides
               Edit
             </button>
           </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
             Prefer not to respond
           </p>
           <p
@@ -3478,10 +3603,9 @@ exports[`DemographicsSection should set user input correctly when user provides
               Current work industry
             </h6>
             <button
-              className="btn ml-3 btn-link"
-              onBlur={[Function]}
+              className="ml-3 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               <svg
@@ -3504,7 +3628,9 @@ exports[`DemographicsSection should set user input correctly when user provides
               Edit
             </button>
           </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
             Prefer not to respond
           </p>
           <p
@@ -3540,10 +3666,9 @@ exports[`DemographicsSection should set user input correctly when user provides
               Future work industry
             </h6>
             <button
-              className="btn ml-3 btn-link"
-              onBlur={[Function]}
+              className="ml-3 btn btn-link"
+              disabled={false}
               onClick={[Function]}
-              onKeyDown={[Function]}
               type="button"
             >
               <svg
@@ -3566,7 +3691,9 @@ exports[`DemographicsSection should set user input correctly when user provides
               Edit
             </button>
           </div>
-          <p>
+          <p
+            data-hj-suppress={true}
+          >
             Prefer not to respond
           </p>
           <p

src/account-settings/reset-password/RequestInProgressAlert.jsx

@@ -5,20 +5,17 @@ import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 
 import Alert from '../Alert';
 
-const RequestInProgressAlert = (props) => {
-
-  return (
-    <Alert
-      className="alert-warning mt-n2"
-      icon={<FontAwesomeIcon className="mr-2" icon={faExclamationTriangle} />}
-    >
-      <FormattedMessage
-        id="account.settings.editable.field.password.reset.button.forbidden"
-        defaultMessage="Your previous request is in progress, please try again in few moments."
-        description="A message displayed when a previous password reset request is still in progress."
-      />
-    </Alert>
-  );
-};
+const RequestInProgressAlert = () => (
+  <Alert
+    className="alert-warning mt-n2"
+    icon={<FontAwesomeIcon className="mr-2" icon={faExclamationTriangle} />}
+  >
+    <FormattedMessage
+      id="account.settings.editable.field.password.reset.button.forbidden"
+      defaultMessage="Your previous request is in progress, please try again in few moments."
+      description="A message displayed when a previous password reset request is still in progress."
+    />
+  </Alert>
+);
 
 export default RequestInProgressAlert;

src/account-settings/reset-password/ResetPassword.jsx

@@ -22,7 +22,7 @@ const ResetPassword = (props) => {
       </h6>
       <p>
         <StatefulButton
-          className="btn-link"
+          variant="link"
           state={status}
           onClick={(e) => {
             // Swallow clicks if the state is pending.

src/account-settings/reset-password/data/sagas.js

@@ -1,6 +1,8 @@
 import { put, call, takeEvery } from 'redux-saga/effects';
 
-import { resetPasswordBegin, resetPasswordForbidden, resetPasswordSuccess, RESET_PASSWORD } from './actions';
+import {
+  resetPasswordBegin, resetPasswordForbidden, resetPasswordSuccess, RESET_PASSWORD,
+} from './actions';
 import { postResetPassword } from './service';
 
 function* handleResetPassword(action) {

src/account-settings/site-language/selectors.js

@@ -12,9 +12,8 @@ export const siteLanguageListSelector = createSelector(
 
 export const siteLanguageOptionsSelector = createSelector(
   siteLanguageSelector,
-  siteLanguage =>
-    siteLanguage.siteLanguageList.map(({ code, name }) => ({
-      value: code,
-      label: name,
-    })),
+  siteLanguage => siteLanguage.siteLanguageList.map(({ code, name }) => ({
+    value: code,
+    label: name,
+  })),
 );

src/account-settings/site-language/service.js

@@ -1,7 +1,7 @@
 import { getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { convertKeyNames, snakeCaseObject } from '@edx/frontend-platform/utils';
 import siteLanguageList from './constants';
-import { snakeCaseObject, convertKeyNames } from '../data/utils';
 
 export async function getSiteLanguageList() {
   return siteLanguageList;

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

@@ -2,61 +2,61 @@ 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';
+import JumpNav from '../JumpNav';
 
-const IntlJumpNav = injectIntl(JumpNav); 
+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();
+  mergeConfig({
+    ENABLE_DEMOGRAPHICS_COLLECTION: false,
+  });
 
-        expect(tree).toMatchSnapshot();
+  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,
     });
 
-    it('should render Optional Information link', () => {
-        setConfig({
-            ENABLE_DEMOGRAPHICS_COLLECTION: true,
-        });
+    props = {
+      ...props,
+      displayDemographicsLink: true,
+    };
 
-        props = {
-            ...props,
-            displayDemographicsLink: true,
-        }
+    const tree = renderer.create((
+      // Same as previous test
+      <Router>
+        <IntlProvider locale="en">
+          <IntlJumpNav {...props} />
+        </IntlProvider>
+      </Router>
+    ))
+      .toJSON();
 
-        const tree = renderer.create((
-            // Same as previous test
-            <Router>
-                <IntlProvider locale="en">
-                    <IntlJumpNav {...props} />
-                </IntlProvider>
-            </Router>
-        ))
-        .toJSON();
-
-        expect(tree).toMatchSnapshot();
-    });
+    expect(tree).toMatchSnapshot();
+  });
 });

src/account-settings/third-party-auth/ThirdPartyAuth.jsx

@@ -11,14 +11,16 @@ class ThirdPartyAuth extends Component {
   onClickDisconnect = (e) => {
     e.preventDefault();
     const providerId = e.currentTarget.getAttribute('data-provider-id');
-    if (this.props.disconnectionStatuses[providerId] === 'pending') return;
+    if (this.props.disconnectionStatuses[providerId] === 'pending') {
+      return;
+    }
     const disconnectUrl = e.currentTarget.getAttribute('data-disconnect-url');
     this.props.disconnectAuth(disconnectUrl, providerId);
   }
 
   renderUnconnectedProvider(url, name) {
     return (
-      <React.Fragment>
+      <>
         <h6 aria-level="3">{name}</h6>
         <Hyperlink destination={url} className="btn btn-outline-primary">
           <FormattedMessage
@@ -28,7 +30,7 @@ class ThirdPartyAuth extends Component {
             values={{ name }}
           />
         </Hyperlink>
-      </React.Fragment>
+      </>
     );
   }
 
@@ -36,7 +38,7 @@ class ThirdPartyAuth extends Component {
     const hasError = this.props.errors[id];
 
     return (
-      <React.Fragment>
+      <>
         <h6 aria-level="3">
           {name}
           <span className="small font-weight-normal text-muted ml-2">
@@ -58,7 +60,7 @@ class ThirdPartyAuth extends Component {
         ) : null}
 
         <StatefulButton
-          className="btn-link"
+          variant="link"
           state={this.props.disconnectionStatuses[id]}
           labels={{
             default: (
@@ -75,7 +77,7 @@ class ThirdPartyAuth extends Component {
           data-disconnect-url={url}
           data-provider-id={id}
         />
-      </React.Fragment>
+      </>
     );
   }
 
@@ -85,9 +87,9 @@ class ThirdPartyAuth extends Component {
     return (
       <div className="form-group" key={id}>
         {
-          connected ?
-          this.renderConnectedProvider(disconnectUrl, name, id) :
-          this.renderUnconnectedProvider(connectUrl, name)
+          connected
+            ? this.renderConnectedProvider(disconnectUrl, name, id)
+            : this.renderUnconnectedProvider(connectUrl, name)
         }
       </div>
     );
@@ -98,13 +100,15 @@ class ThirdPartyAuth extends Component {
       <FormattedMessage
         id="account.settings.sso.no.providers"
         defaultMessage="No accounts can be linked at this time."
-        description="Displayed when no third party accounts are available to link an edX account to"
+        description="Displayed when no third-party accounts are available for the user to link to their account on the platform."
       />
     );
   }
 
   render() {
-    if (this.props.providers === undefined) return null;
+    if (this.props.providers === undefined) {
+      return null;
+    }
 
     if (this.props.providers.length === 0) {
       return this.renderNoProviders();
@@ -114,7 +118,6 @@ class ThirdPartyAuth extends Component {
   }
 }
 
-
 ThirdPartyAuth.propTypes = {
   providers: PropTypes.arrayOf(PropTypes.shape({
     name: PropTypes.string,

src/i18n/messages/ar.json

@@ -1,334 +1,318 @@
 {
-  "account.settings.message.duplicate.tpa.provider": "The {provider} account you selected is already linked to another edX account.",
-  "account.settings.message.managed.settings": "Your profile settings are managed by {managerTitle}. Contact your administrator or {support} for help.",
-  "account.settings.message.managed.settings.support": "support",
-  "account.settings.page.heading": "Account Settings",
-  "account.settings.loading.message": "Loading...",
-  "account.settings.loading.error": "Error: {error}",
-  "account.settings.banner.beta.language": "You have set your language to {beta_language}, which is currently not fully translated. You can help us translate this language fully by joining the Transifex community and adding translations from English for learners that speak {beta_language}.",
-  "account.settings.banner.beta.language.action.switch.back": "Switch Back to {previous_language}",
-  "account.settings.banner.beta.language.action.help.translate": "Help Translate into {beta_language}",
-  "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.",
-  "account.settings.field.username": "Username",
-  "account.settings.field.username.help.text": "The name that identifies you on edX. You cannot change your username.",
-  "account.settings.field.full.name": "Full name",
-  "account.settings.field.full.name.empty": "Add name",
-  "account.settings.field.full.name.help.text": "The name that is used for ID verification and that appears on your certificates.",
-  "account.settings.field.email": "Email address (Sign in)",
-  "account.settings.field.email.empty": "Add email address",
-  "account.settings.field.email.confirmation": "We’ve sent a confirmation message to {value}. Click the link in the message to update your email address.",
-  "account.settings.field.email.help.text": "You receive messages from edX and course teams at this address.",
-  "account.settings.field.secondary.email": "Recovery email address",
-  "account.settings.field.secondary.email.empty": "Add a recovery email address",
-  "account.settings.field.secondary.email.confirmation": "We’ve sent a confirmation message to {value}. Click the link in the message to update your recovery email address.",
-  "account.settings.email.field.confirmation.header": "Pending confirmation",
-  "account.settings.field.dob": "Year of birth",
-  "account.settings.field.dob.empty": "Add year of birth",
-  "account.settings.field.year_of_birth.options.empty": "Select a year of birth",
-  "account.settings.field.country": "Country",
-  "account.settings.field.country.empty": "Add country",
-  "account.settings.field.country.options.empty": "Select a Country",
-  "account.settings.field.state": "State",
-  "account.settings.field.state.empty": "Add state",
-  "account.settings.field.state.options.empty": "Select a State",
-  "account.settings.field.site.language": "Site language",
-  "account.settings.field.site.language.help.text": "The language used throughout this site. This site is currently available in a limited number of languages.",
-  "account.settings.field.education": "Education",
-  "account.settings.field.education.empty": "Add level of education",
-  "account.settings.field.education.levels.empty": "Select a level of education",
-  "account.settings.field.education.levels.p": "Doctorate",
-  "account.settings.field.education.levels.m": "Master's or professional degree",
-  "account.settings.field.education.levels.b": "Bachelor's Degree",
-  "account.settings.field.education.levels.a": "Associate's degree",
-  "account.settings.field.education.levels.hs": "Secondary/high school",
-  "account.settings.field.education.levels.jhs": "Junior secondary/junior high/middle school",
-  "account.settings.field.education.levels.el": "Elementary/primary school",
-  "account.settings.field.education.levels.none": "No formal education",
-  "account.settings.field.education.levels.o": "Other education",
-  "account.settings.field.gender": "Gender",
-  "account.settings.field.gender.empty": "Add gender",
-  "account.settings.field.gender.options.empty": "Select a gender",
-  "account.settings.field.gender.options.f": "Female",
-  "account.settings.field.gender.options.m": "Male",
-  "account.settings.field.gender.options.o": "Other",
-  "account.settings.field.language.proficiencies": "Spoken languages",
-  "account.settings.field.language.proficiencies.empty": "Add a spoken language",
-  "account.settings.field.language_proficiencies.options.empty": "Select a Language",
-  "account.settings.field.time.zone": "Time zone",
-  "account.settings.field.time.zone.empty": "Set time zone",
-  "account.settings.field.time.zone.description": "Select the time zone for displaying course dates. If you do not specify a time zone, course dates, including assignment deadlines, will be displayed in your browser’s local time zone.",
-  "account.settings.field.time.zone.default": "Default (Local Time Zone)",
-  "account.settings.field.time.zone.all": "All time zones",
-  "account.settings.field.time.zone.country": "Country time zones",
-  "account.settings.section.social.media": "Social Media Links",
-  "account.settings.section.social.media.description": "Optionally, link your personal accounts to the social media icons on your edX profile.",
-  "account.settings.field.social.platform.name.linkedin": "LinkedIn",
-  "account.settings.field.social.platform.name.linkedin.empty": "Add LinkedIn profile",
-  "account.settings.jump.nav.delete.account": "Delete My Account",
-  "account.settings.field.social.platform.name.twitter": "Twitter",
-  "account.settings.field.social.platform.name.twitter.empty": "Add Twitter profile",
-  "account.settings.field.social.platform.name.facebook": "Facebook",
-  "account.settings.field.social.platform.name.facebook.empty": "Add Facebook profile",
-  "account.settings.editable.field.action.save": "Save",
-  "account.settings.editable.field.action.cancel": "Cancel",
-  "account.settings.editable.field.action.edit": "Edit",
-  "account.settings.static.field.empty": "No value set. Contact your {enterprise} administrator to make changes.",
-  "account.settings.static.field.empty.no.admin": "No value set.",
-  "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 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.",
-  "account.settings.field.phone_number": "Phone Number",
-  "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.delete.account.before.proceeding": "Before proceeding, please {actionLink}.",
-  "account.settings.delete.account.header": "Delete My Account",
-  "account.settings.delete.account.subheader": "We're sorry to see you go!",
-  "account.settings.delete.account.text.1": "Please note: Deletion of your account and personal data is permanent and cannot be undone. edX will not be able to recover your account or the data that is deleted.",
-  "account.settings.delete.account.text.2": "Once your account is deleted, you cannot use it to take courses on the edX app, edx.org, or any other site hosted by edX. This includes access to edx.org from your employer’s or university’s system and access to private sites offered by MIT Open Learning, Wharton Executive Education, and Harvard Medical School.",
-  "account.settings.delete.account.text.3.link": "follow the instructions for printing or downloading a certificate",
-  "account.settings.delete.account.text.warning": "Warning: Account deletion is permanent. Please read the above carefully before proceeding. This is an irreversible action, and you will no longer be able to use the same email on edX.",
-  "account.settings.delete.account.text.change.instead": "Want to change your email, name, or password instead?",
-  "account.settings.delete.account.button": "Delete My Account",
-  "account.settings.delete.account.please.activate": "activate your account",
-  "account.settings.delete.account.please.unlink": "unlink all social media accounts",
-  "account.settings.delete.account.modal.header": "Are you sure?",
-  "account.settings.delete.account.modal.text.1": "You have selected \"Delete My Account\". Deletion of your account and personal data is permanent and cannot be undone. edX will not be able to recover your account or the data that is deleted.",
-  "account.settings.delete.account.modal.text.2": "If you proceed, you will be unable to use this account to take courses on the edX app, edx.org, or any other site hosted by edX. This includes access to edx.org from your employer's or university's system and access to private sites offered by MIT Open Learning, Wharton Executive Education, and Harvard Medical School.",
-  "account.settings.delete.account.modal.enter.password": "If you still wish to continue and delete your account, please enter your account password:",
-  "account.settings.delete.account.modal.confirm.delete": "Yes, Delete",
-  "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.options.woman": "Woman",
-  "account.settings.field.demographics.gender.options.man": "Man",
-  "account.settings.field.demographics.gender.options.non-binary": "Non-binary",
-  "account.settings.field.demographics.gender.options.self-describe": "Prefer to self-describe",
-  "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.ethnicity.options.american-indian-or-alaska-native": "American Indian or Alaska Native",
-  "account.settings.field.demographics.ethnicity.options.asian": "Asian",
-  "account.settings.field.demographics.ethnicity.options.black-or-african-american": "Black or African American",
-  "account.settings.field.demographics.ethnicity.options.hispanic-latin-spanish": "Hispanic, Latin, or Spanish origin",
-  "account.settings.field.demographics.ethnicity.options.middle-eastern-or-north-african": "Middle Eastern or North African",
-  "account.settings.field.demographics.ethnicity.options.native-hawaiian-or-pacific-islander": "Native Hawaiian or Other Pacific Islander",
-  "account.settings.field.demographics.ethnicity.options.white": "White",
-  "account.settings.field.demographics.ethnicity.options.other": "Some other race, ethnicity, or origin",
-  "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.income.options.less-than-10k": "Less than US $10,000",
-  "account.settings.field.demographics.income.options.10k-25k": "US $10,000 - $25,000",
-  "account.settings.field.demographics.income.options.25k-50k": "US $25,000 - $50,000",
-  "account.settings.field.demographics.income.options.50k-75k": "US $50,000 - $75,000",
-  "account.settings.field.demographics.income.options.75k-100k": "US $75,000 - $100,000",
-  "account.settings.field.demographics.income.options.over-100k": "Over US $100,000",
-  "account.settings.field.demographics.income.options.unsure": "I don't know",
-  "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.income.options.never-served": "Never served in the military",
-  "account.settings.field.demographics.income.options.training": "Only on active duty for training",
-  "account.settings.field.demographics.income.options.active": "Now on active duty",
-  "account.settings.field.demographics.income.options.previously-active": "On active duty in the past, but not now",
-  "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.education_level.options.no-high-school": "No High School",
-  "account.settings.field.demographics.education_level.options.some-high-school": "Some High School",
-  "account.settings.field.demographics.education_level.options.high-school-ged-equivalent": "High School diploma, GED, or equivalent",
-  "account.settings.field.demographics.education_level.options.some-college": "Some college, but no degree",
-  "account.settings.field.demographics.education_level.options.associates": "Associates degree",
-  "account.settings.field.demographics.education_level.options.bachelors": "Bachelors degree",
-  "account.settings.field.demographics.education_level.options.masters": "Masters degree",
-  "account.settings.field.demographics.education_level.options.professional": "Professional degree",
-  "account.settings.field.demographics.education_level.options.doctorate": "Doctorate degree",
-  "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.options.full-time": "Employed, working full-time",
-  "account.settings.field.demographics.work_status.options.part-time": "Employed, working part-time",
-  "account.settings.field.demographics.work_status.options.self-employed": "Self-Employed",
-  "account.settings.field.demographics.work_status.options.not-employed-looking": "Not employed, looking for work",
-  "account.settings.field.demographics.work_status.options.not-employed-not-looking": "Not employed, not looking for work",
-  "account.settings.field.demographics.work_status.options.unable": "Unable to work",
-  "account.settings.field.demographics.work_status.options.retired": "Retired",
-  "account.settings.field.demographics.work_status.options.other": "Other",
-  "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.field.demographics.work_sector.options.accommodation-food": "Accommodation and Food Services",
-  "account.settings.field.demographics.work_sector.options.administrative-support-waste-remediation": "Administrative and Support and Waste Management and Remediation Services",
-  "account.settings.field.demographics.work_sector.options.agriculture-forestry-fishing-hunting": "Agriculture, Forestry, Fishing and Hunting",
-  "account.settings.field.demographics.work_sector.options.arts-entertainment-recreation": "Arts, Entertainment, and Recreation",
-  "account.settings.field.demographics.work_sector.options.construction": "Construction",
-  "account.settings.field.demographics.work_sector.options.educational": "Education Services",
-  "account.settings.field.demographics.work_sector.options.finance-insurance": "Finance and Insurance",
-  "account.settings.field.demographics.work_sector.options.healthcare-social": "Health Care and Social Assistance",
-  "account.settings.field.demographics.work_sector.options.information": "Information",
-  "account.settings.field.demographics.work_sector.options.management": "Management of Companies and Enterprises",
-  "account.settings.field.demographics.work_sector.options.manufacturing": "Manufacturing",
-  "account.settings.field.demographics.work_sector.options.mining-quarry-oil-gas": "Mining, Quarrying, and Oil and Gas Extraction",
-  "account.settings.field.demographics.work_sector.options.professional-scientific-technical": "Professional, Scientific, and Technical Services",
-  "account.settings.field.demographics.work_sector.options.public-admin": "Public Administration",
-  "account.settings.field.demographics.work_sector.options.real-estate": "Real Estate and Rental and Leasing",
-  "account.settings.field.demographics.work_sector.options.retail": "Retail Trade",
-  "account.settings.field.demographics.work_sector.options.transport-warehousing": "Transportation and Warehousing",
-  "account.settings.field.demographics.work_sector.options.utilities": "Utilities",
-  "account.settings.field.demographics.work_sector.options.trade": "Wholesale Trade",
-  "account.settings.field.demographics.work_sector.options.other": "Other",
-  "account.settings.field.demographics.options.declined": "Prefer not to respond",
-  "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}.",
-  "account.settings.editable.field.password.reset.button": "Reset Password",
-  "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.label": "Password",
-  "account.settings.sso.link.account": "Sign in with {name}",
-  "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.",
-  "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.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.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. (Supported formats: .jpg, .jpeg, .png)",
-  "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.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}.",
-  "id.verification.account.name.edit": "Edit{sr}"
+  "account.settings.message.duplicate.tpa.provider": "إنّ حساب {provider} الذي اخترتَه مرتبط مسبقًا بحساب آخر في edX. ",
+  "account.settings.message.managed.settings": "تتم إدارة إعدادات الملف الشخصي بواسطة {ManagerTitle}. اتصل بالمسؤول أو {support} للحصول على المساعدة.",
+  "account.settings.message.managed.settings.support": "الدعم",
+  "account.settings.page.heading": "إعدادات الحساب",
+  "account.settings.loading.message": "جاري التحميل...",
+  "account.settings.loading.error": "خطأ: {error}",
+  "account.settings.banner.beta.language": "لقد قمت بتعيين لغتك الى {beta_language}، والتي لم تتم ترجمتها بالكامل حاليًا. يمكنك مساعدتنا في ترجمة هذه اللغة بالكامل من خلال الانضمام إلى مجتمع Transifex وإضافة ترجمات من الإنجليزية للمتعلمين الذين يتحدثون {beta_language}.",
+  "account.settings.banner.beta.language.action.switch.back": "العودة لـِ {previous_language}",
+  "account.settings.banner.beta.language.action.help.translate": "المساعدة في الترجمة إلى {beta_language}",
+  "account.settings.section.account.information": "معلومات الحساب",
+  "account.settings.section.account.information.description": "تتضمن هذه الإعدادات معلومات أساسية عن حسابك.",
+  "account.settings.section.profile.information": "معلومات الملف الشخصي",
+  "account.settings.section.demographics.information": "معلومات اختيارية",
+  "account.settings.section.site.preferences": "تفضيلات الموقع",
+  "account.settings.section.linked.accounts": "الحسابات المرتبطة",
+  "account.settings.section.linked.accounts.description": "يمكنك ربط حساباتك الشخصية لتسهيل عملية تسجيل دخولك إلى edX.",
+  "account.settings.field.username": "اسم المستخدم",
+  "account.settings.field.username.help.text": "اسم المستخدم الخاص بك الذي يميزك في edX. لا يمكنك تغيير اسم المستخدم الخاص بك لاحقاً.",
+  "account.settings.field.full.name": "الاسم الكامل",
+  "account.settings.field.full.name.empty": "إضافة اسم",
+  "account.settings.field.full.name.help.text": "الاسم المستخدم للتحقق من هويتك والذي سوف يظهر على الشهادات الخاصة بك.",
+  "account.settings.field.email": "البريد الالكتروني (الدخول)",
+  "account.settings.field.email.empty": "إضافة عنوان البريد الإلكتروني",
+  "account.settings.field.email.confirmation": "لقد أرسلنا رسالة تأكيد إلى {value}. انقر فوق الرابط في الرسالة لتحديث عنوان بريدك الإلكتروني.",
+  "account.settings.field.email.help.text": "أنت تتلقى رسائل من edX وفرق المساق على هذا العنوان.",
+  "account.settings.field.secondary.email": "عنوان البريد الإلكتروني للاسترداد",
+  "account.settings.field.secondary.email.empty": "إضافة عنوان البريد الإلكتروني للاسترداد",
+  "account.settings.field.secondary.email.confirmation": "لقد أرسلنا رسالة تأكيد إلى {value}. انقر فوق الرابط في الرسالة لتحديث عنوان بريد الاسترداد الإلكتروني.",
+  "account.settings.email.field.confirmation.header": "تعليق عملية التأكيد",
+  "account.settings.field.dob": "سنة الميلاد",
+  "account.settings.field.dob.empty": "إضافة سنة الميلاد",
+  "account.settings.field.year_of_birth.options.empty": "اختر سنة ميلاد",
+  "account.settings.field.country": "الدولة",
+  "account.settings.field.country.empty": "إضافة البلد ",
+  "account.settings.field.country.options.empty": "اختر دولة",
+  "account.settings.field.state": "الحالة",
+  "account.settings.field.state.empty": "إضافة منطقة",
+  "account.settings.field.state.options.empty": "اختر منطقة",
+  "account.settings.field.site.language": "لغة الموقع",
+  "account.settings.field.site.language.help.text": "اللغة المستخدمة في كافة أقسام هذا الموقع. يتوفّر هذا الموقع حاليًا بعدد محدود من اللغات.",
+  "account.settings.field.education": "المستوى التعليمي",
+  "account.settings.field.education.empty": "إضافة المستوى التعليمي",
+  "account.settings.field.education.levels.empty": "اختر المستوى التعليمي",
+  "account.settings.field.education.levels.p": "دكتوراه",
+  "account.settings.field.education.levels.m": "ماجستير أو شهادة مهنيّة",
+  "account.settings.field.education.levels.b": "بكالوريوس",
+  "account.settings.field.education.levels.a": "زمالة",
+  "account.settings.field.education.levels.hs": "شهادة الثانوية العامة",
+  "account.settings.field.education.levels.jhs": "شهادة الثانوية الصغرى/الإعدادية/المرحلة المتوسّطة",
+  "account.settings.field.education.levels.el": "شهادة المدرسة الابتدائية",
+  "account.settings.field.education.levels.none": "لا يوجد تعليم رسمي",
+  "account.settings.field.education.levels.o": "نوع آخر من التعليم",
+  "account.settings.field.gender": "الجنس",
+  "account.settings.field.gender.empty": "إضافة الجنس",
+  "account.settings.field.gender.options.empty": "اختر جنسًا",
+  "account.settings.field.gender.options.f": "أنثى",
+  "account.settings.field.gender.options.m": "ذكر",
+  "account.settings.field.gender.options.o": "آخر",
+  "account.settings.field.language.proficiencies": "لغة التحدّث",
+  "account.settings.field.language.proficiencies.empty": "إضافة لغة التحدث",
+  "account.settings.field.language_proficiencies.options.empty": "اختر لغة",
+  "account.settings.field.time.zone": "المنطقة الزمنية",
+  "account.settings.field.time.zone.empty": "ضبط المنطقة الزمنية",
+  "account.settings.field.time.zone.description": "حدد المنطقة الزمنية لعرض تواريخ المساق. إذا لم تحدد منطقة زمنية، فسيتم عرض تواريخ المساق، بما في ذلك المواعيد النهائية للواجب في المنطقة الزمنية المحلية في المتصفح.",
+  "account.settings.field.time.zone.default": "الافتراضي (منطقة التوقيت المحلي)",
+  "account.settings.field.time.zone.all": "جميع المناطق الزمنية",
+  "account.settings.field.time.zone.country": "المنطقة الزمنية للدولة",
+  "account.settings.section.social.media": "روابط منصات التواصل الإجتماعي",
+  "account.settings.section.social.media.description": "اختياريا، قم بربط حساباتك الشخصية بأيقونات منصات التواصل الاجتماعي في ملف التعريف الخاص بك.",
+  "account.settings.field.social.platform.name.linkedin": "لينكد إن",
+  "account.settings.field.social.platform.name.linkedin.empty": "إضافة عنوان ملف لينكد إن ",
+  "account.settings.jump.nav.delete.account": "احذف حسابي",
+  "account.settings.field.social.platform.name.twitter": "تويتر",
+  "account.settings.field.social.platform.name.twitter.empty": "إضافة عنوان صفحة تويتر",
+  "account.settings.field.social.platform.name.facebook": "فيسبوك",
+  "account.settings.field.social.platform.name.facebook.empty": "إضافة عنوان صفحة فيسبوك",
+  "account.settings.editable.field.action.save": "حفظ",
+  "account.settings.editable.field.action.cancel": "إلغاء",
+  "account.settings.editable.field.action.edit": "تحرير",
+  "account.settings.static.field.empty": "لم يتم تحديد قيمة، فضلًا اتصل بمدير  {enterprise} لتعيين بعض التغييرات.",
+  "account.settings.static.field.empty.no.admin": "لم يتم تحديد قيمة",
+  "account.settings.coaching.consent.welcome.header": "لنبدأ",
+  "account.settings.coaching.consent.welcome.subheader": "نحن هنا لأجلك من البداية حتى النهاية",
+  "account.settings.coaching.consent.description": "تتضمن برامج البكالوريوس التدريب الذي يركز على مهنتك وتعليمك وكيفية تحقيق نتائج مبهرة من خلال التواصل الشخصي مع خبراء متمرسين. إذا كنت مهتمًا، فقدّم المعلومات أدناه وانقر فوق \"إرسال\"، وسيتصل بك شريكنا في التدريب عبر البريد الإلكتروني و/أو الرسائل النصية لمساعدتك على المضي قدمًا. تنطبق الشروط والأحكام.*",
+  "account.settings.coaching.consent.text-messaging.disclaimer": "* يتم تضمين خدمات التدريب بدون أي تكلفة إضافية للمتعلمين الذين لديهم أرقام هواتف أمريكية. يتضمن التدريب رسائل نصية متكررة. قد تنطبق أسعار الرسائل والبيانات. إيقاف النص لإلغاء الاشتراك.",
+  "account.settings.coaching.consent.accept-coaching": "سجّل للاستفادة من خدمات التدريب",
+  "account.settings.coaching.consent.decline-coaching": "أفضّل عدم الاتصال بخدمات التدريب المجانية",
+  "account.settings.coaching.consent.label.name": "يرجى تأكيد الاسم",
+  "account.settings.coaching.consent.label.phone-number": "فضلًا أدخل رقم الهاتف ",
+  "account.settings.coaching.consent.success.header": "تمت العملية بنجاح",
+  "account.settings.coaching.consent.success.message": "لقد اشتركت في التدريب. يمكنك توقع استلام رسالة عبر البريد الإلكتروني أو الرسائل القصيرة في الأيام المقبلة.",
+  "account.settings.coaching.consent.success.continue": "البدء في مساقي",
+  "account.settings.coaching.managed.support": "الدعم",
+  "account.settings.coaching.managed.alert": "تتم إدارة اسمك بواسطة {ManagerTitle}. اتصل بالمسؤول للحصول على المساعدة.",
+  "account.settings.field.phone_number": "رقم الهاتف",
+  "account.settings.field.phone_number.empty": "إضافة رقم الهاتف",
+  "account.settings.field.coaching_consent": "اتفاقية التدريب",
+  "account.settings.field.coaching_consent.tooltip": "تتضمن برامج البكالوريوس التدريب القائم على الرسائل النصية الذي يساعدك على إقران التجارب التعليمية مع أهدافك المهنية من خلال النصائح الشخصية. يتم تضمين خدمات التدريب بدون أي تكلفة إضافية، وهي متوفرة للمتعلمين الذين لديهم أرقام هواتف نقالة أمريكية. تنطبق أسعار المراسلة القياسية. أرسل \"قف\" في أي وقت لإلغاء الرسائل.",
+  "account.settings.field.coaching_consent.error": "مطلوب رقم هاتف أمريكي صالح للدخول في التدريب",
+  "account.settings.delete.account.before.proceeding": "قبل المتابعة، يرجى {actionLink}.",
+  "account.settings.delete.account.header": "احذف حسابي",
+  "account.settings.delete.account.subheader": "نأسف لذهابك!",
+  "account.settings.delete.account.text.1": "يرجى ملاحظة: إن حذف حسابك والبيانات الشخصية قرار نهائي ولا يمكن التراجع عنه. لن تتمكن edX من استعادة حسابك أو البيانات التي تم حذفها.",
+  "account.settings.delete.account.text.2": "بمجرد حذف حسابك ، لا يمكنك استخدامه لأخذ دورات تدريبية على تطبيق edX أو edx.org أو أي موقع آخر تستضيفه edX. وهذا يشمل الوصول إلى edx.org من نظام صاحب العمل أو الجامعة والوصول إلى المواقع الخاصة التي تقدمها MIT Open Learning و Wharton Executive Education و Harvard Medical School.",
+  "account.settings.delete.account.text.3.link": "اتبع الإرشادات التالية لطباعة أو تحميل شهادة.",
+  "account.settings.delete.account.text.warning": "تحذير: حذف الحساب قرار نهائي. يرجى قراءة ما سبق بعناية قبل المتابعة. هذا إجراء لا رجعة فيه، ولن تتمكن بعد الآن من استخدام البريد الإلكتروني نفسه على edX.",
+  "account.settings.delete.account.text.change.instead": "هل تريد تغيير البريد الإلكتروني أو الاسم أو كلمة المرور بدلاً من ذلك؟",
+  "account.settings.delete.account.button": "احذف حسابي",
+  "account.settings.delete.account.please.activate": "تنشيط حسابك",
+  "account.settings.delete.account.please.unlink": "إلغاء ربط جميع حسابات التواصل الاجتماعي",
+  "account.settings.delete.account.modal.header": "هل أنت متأكد؟",
+  "account.settings.delete.account.modal.text.1": "لقد حددت \"حذف حسابي\". إن حذف حسابك وبياناتك الشخصية قرار نهائي لا يمكن التراجع عنه. لن تتمكن edX من استعادة حسابك أو البيانات التي تم حذفها.",
+  "account.settings.delete.account.modal.text.2": "عند المتابعة، فلن تتمكن من استخدام هذا الحساب للحصول على مساقات على تطبيق edX أو edx.org أو أي موقع آخر يستضيفه edX. وهذا يشمل الوصول إلى edx.org من نظام صاحب العمل أو الجامعة والوصول إلى المواقع الخاصة التي يقدمها معهد ماساتشوستس للتكنولوجيا التعليم المفتوح، وارتون التعليم التنفيذي، وكلية هارفارد الطبية.",
+  "account.settings.delete.account.modal.enter.password": "إذا كنت لا تزال ترغب في المتابعة وحذف حسابك ، فيرجى إدخال كلمة مرور حسابك:",
+  "account.settings.delete.account.modal.confirm.delete": "تعم، أحذف",
+  "account.settings.delete.account.modal.confirm.cancel": "إلغاء",
+  "account.settings.delete.account.error.unable.to.delete": "تعذر حذف الحساب",
+  "account.settings.delete.account.error.no.password": "كلمة المرور مطلوبة",
+  "account.settings.delete.account.error.invalid.password": "كلمة المرور المدخلة غير صحيحة",
+  "account.settings.delete.account.error.unable.to.delete.details": "عذراً ، حدث خطأ أثناء محاولة معالجة طلبك. الرجاء معاودة المحاولة في وقت لاحق.",
+  "account.settings.delete.account.modal.after.header": "نأسف لذهابك! سيتم حذف حسابك قريبا.",
+  "account.settings.delete.account.modal.after.text": "قد يستغرق حذف الحساب ، بما في ذلك الإزالة من قوائم البريد الإلكتروني ، بضعة أسابيع حتى تتم معالجته بالكامل من خلال نظامنا. إذا كنت ترغب في إلغاء الاشتراك في رسائل البريد الإلكتروني قبل ذلك الحين ، يرجى إلغاء الاشتراك من تذييل أي بريد إلكتروني.",
+  "account.settings.delete.account.modal.after.button": "إغلاق ",
+  "account.settings.delete.account.text.3": "قد تفقد أيضًا إمكانية الوصول إلى الشهادات التي تم التحقق منها وبيانات اعتماد البرامج الأخرى مثل شهادات MicroMasters. إذا أردت عمل نسخة من هذه السجلات قبل متابعة الحذف، {actionLink}.",
+  "account.settings.message.demographics.service.issue": "حدث خطأ أثناء محاولة استرداد معلومات حسابك أو حفظها. يرجى المحاولة مرة أخرى لاحقًا.",
+  "account.settings.field.demographics.gender": "هوية الجنس",
+  "account.settings.field.demographics.gender.empty": "إضافة هوية الجنس",
+  "account.settings.field.demographics.gender.options.empty": "حدد هوية الجنس",
+  "account.settings.field.demographics.gender_description": "وصف هوية الجنس",
+  "account.settings.field.demographics.gender_description.empty": "أدخل وصفًا",
+  "account.settings.field.demographics.ethnicity": "هوية العرق/ الأصل",
+  "account.settings.field.demographics.ethnicity.empty": "إضافة هوية العرق/الأصل",
+  "account.settings.field.demographics.ethnicity.options.empty": "فضلًا اختر جميع ما ينطبق",
+  "account.settings.field.demographics.income": "الدخل المادي الأسري",
+  "account.settings.field.demographics.income.empty": "إضافة الدخل المادي الأسري",
+  "account.settings.field.demographics.income.options.empty": "حدد نطاق الدخل المادي للأسرة",
+  "account.settings.field.demographics.military_history": "حالة الخدمة العسكرية في الولايات المتحدة الأمريكية",
+  "account.settings.field.demographics.military_history.empty": "إضافة حالة الخدمة العسكرية",
+  "account.settings.field.demographics.military_history.options.empty": "اختر حالة الخدمة العسكرية",
+  "account.settings.field.demographics.learner_education_level": "مؤهلك التعليمي",
+  "account.settings.field.demographics.learner_education_level.empty": "إضافة مؤهلك التعليمي",
+  "account.settings.field.demographics.parent_education_level": "مؤهل الوالدين/الآوصياء التعليمي",
+  "account.settings.field.demographics.parent_education_level.empty": "إضافة المؤهل التعليمي",
+  "account.settings.field.demographics.education_level.options.empty": "حدد موهلاً تعليميًا",
+  "account.settings.field.demographics.work_status": "الحالة الوظيفية",
+  "account.settings.field.demographics.work_status.empty": "إضافة الحالة الوظيفية",
+  "account.settings.field.demographics.work_status.options.empty": "فضلًا حدد حالتك الوظيفية",
+  "account.settings.field.demographics.work_status_description": "وصف الحالة الوظيفية",
+  "account.settings.field.demographics.work_status_description.empty": "أدخل وصفًا",
+  "account.settings.field.demographics.current_work_sector": "مجال العمل الحالي",
+  "account.settings.field.demographics.current_work_sector.empty": "إضافة مجال العمل",
+  "account.settings.field.demographics.future_work_sector": "مجال العمل المستقبلي",
+  "account.settings.field.demographics.future_work_sector.empty": "إضافة مجال العمل",
+  "account.settings.field.demographics.work_sector.options.empty": "حدد مجال العمل",
+  "account.settings.section.demographics.why": "لماذا تجمع edX هذه المعلومات؟",
+  "error.notfound.message": "الصفحة التي تبحث عنها غير متوفرة أو هناك خطأ في نص الرابط. الرجاء التحقق من الرابط والمحاولة مجددا.",
+  "account.settings.editable.field.password.reset.button.confirmation.support.link": "الدعم الفني",
+  "account.settings.editable.field.password.reset.button.confirmation": "لقد أرسلنا رسالة إلى {email}. انقر فوق الرابط في الرسالة لإعادة تعيين كلمة المرور. إذا لم يتم استلام الرسالة؟ اتصل بـ {technicalSupportLink}.",
+  "account.settings.editable.field.password.reset.button": "تغيير كلمة المرور",
+  "account.settings.editable.field.password.reset.button.forbidden": "طلبك السابق قيد التقدم، يرجى إعادة المحاولة بعد لحظات قليلة.",
+  "account.settings.editable.field.password.reset.label": "كلمة المرور",
+  "account.settings.sso.link.account": "تسجيل الدخول كـ  {name}",
+  "account.settings.sso.account.connected": "مربوط",
+  "account.settings.sso.account.disconnect.error": "حدثت مشكلة أثناء قطع اتصال هذا الحساب، اتصل بالدعم عند استمرار المشكلة.",
+  "account.settings.sso.unlink.account": "إلغاء ربط حساب {name} ",
+  "account.settings.sso.no.providers": "لا يمكن ربط أية حسابات حاليًا",
+  "id.verification.access.blocked.denied": "لا يمكنك التحقق من هويتك في الوقت الحالي. إذا لم تقم بعد بتنشيط حسابك، فيرجى التحقق من مجلد البريد المهمل للحصول على رسالة التفعيل من {email}.",
+  "id.verification.next": "التالي",
+  "id.verification.support": "support",
+  "id.verification.example.card.alt": "مثال على بطاقة هوية صحيحة بالاسم الكامل وصورة.",
+  "id.verification.requirements.title": "متطلبات التحقق من الصورة",
+  "id.verification.requirements.description": "يجب عليك اتباع الآتي لإكمال عملية التحقق الإلكتروني من هويتك:",
+  "id.verification.requirements.card.device.title": "جهاز مزود بكاميرا",
+  "id.verification.requirements.card.device.allow": "موافق",
+  "id.verification.requirements.card.id.title": "صورة التحقق من الشخصية.",
+  "id.verification.requirements.card.id.text": "تحتاج إلى بطاقة هوية صحيحة للتحقق تحوي اسمك الكامل وصورتك.",
+  "id.verification.privacy.title": "بيانات الخصوصية.",
+  "id.verification.privacy.need.photo.question": "لماذا تحتاج edX إلى صورتي؟ ",
+  "id.verification.privacy.need.photo.answer": "نستخدم صور التحقق الخاصة بك لتأكيد هويتك والتأكد من صحة شهادتك.",
+  "id.verification.privacy.do.with.photo.question": "ما الذي تفعله edX بهذه الصورة؟",
+  "id.verification.privacy.do.with.photo.answer": "سنقوم بتشفير صورتك بأمان وإرسالها لخدمة التحقق للمراجعة . لن يتم حفظ صورتك ومعلوماتك أو عرضها في أي مكان على edX بعد اكتمال عملية التحقق.",
+  "id.verification.access.blocked.title": "التحقق من الهوية",
+  "id.verification.access.blocked.enrollment": "أنت الآن ملتحق بمساق يتطلب التحقق من الهوية.",
+  "id.verification.access.blocked.pending": "لقد قمت بالفعل بإرسال معلومات التحقق الخاصة بك. ستصلك رسالة على لوحة المعلومات عند اكتمال عملية التحقق (عادةً خلال 5 أيام).",
+  "id.verification.photo.take": "التقاط صورة ",
+  "id.verification.photo.retake": "Retake Photo?",
+  "id.verification.photo.enable.detection": "تمكين خاصية التعرف على الوجه",
+  "id.verification.photo.enable.detection.portrait.help.text": "عند تحديد هذا الخيار، فسيظهر مربع حول وجهك. يمكن رؤية وجهك بوضوح إذا كان المربع المحيط به أزرق. إذا لم يكن وجهك في وضع جيد أو إذا لم يكن قابلاً للاكتشاف، فسيكون المربع باللون الأحمر.",
+  "id.verification.photo.enable.detection.id.help.text": "عند تحديد هذا الخيار، فسيظهر مربع حول صورة وجهك في بطاقة الهوية. يمكن رؤية وجهك بوضوح إذا كان المربع المحيط به أزرق. إذا لم يكن وجهك في وضع جيد أو إذا لم يكن قابلاً للاكتشاف، فسيكون المربع باللون الأحمر.",
+  "id.verification.photo.feedback.correct": "وضع الوجه جيد.",
+  "id.verification.photo.feedback.two.faces": "تم تحديد أكثر من وجه.",
+  "id.verification.photo.feedback.no.faces": "لم يتم تحديد أي وجه.",
+  "id.verification.photo.feedback.top.left": "وضع خاطئ. أعلى اليسار.",
+  "id.verification.photo.feedback.top.center": "وضع خاطئ. أعلى الوسط.",
+  "id.verification.photo.feedback.top.right": "وضع خاطئ. أعلى اليمين.",
+  "id.verification.photo.feedback.center.left": "وضع خاطئ. وسط اليسار.",
+  "id.verification.photo.feedback.center.center": "وضع خاطئ. قريب جدًا من الكاميرا.",
+  "id.verification.photo.feedback.center.right": "وضع خاطئ. وسط اليمين.",
+  "id.verification.photo.feedback.bottom.left": "وضع خاطئ. أسفل اليسار.",
+  "id.verification.photo.feedback.bottom.center": "وضع خاطئ. أسفل الوسط.",
+  "id.verification.photo.feedback.bottom.right": "وضع خاطئ. أسفل اليمين.",
+  "id.verification.camera.access.title": "صلاحيات الكاميرا",
+  "id.verification.camera.access.title.success": "تمكين الوصول للكاميرا",
+  "id.verification.camera.access.title.failed": "تعذّر الوصول للكاميرا.",
+  "id.verification.camera.access.click.allow": "فضلًا تأكد من اختيار الأمر \"السماح\"",
+  "id.verification.camera.access.enable": "تمكين الكاميرا",
+  "id.verification.camera.access.problems": "هل تواجه أية مشكلة؟",
+  "id.verification.camera.access.skip": "قم بتخطي ملفات الصور وتحميلها بدلاً من ذلك",
+  "id.verification.camera.access.success": "يبدو أن الكاميرا تعمل وجاهزة.",
+  "id.verification.camera.access.failure": "يبدو أننا غير قادرين على الوصول إلى الكاميرا. ستحتاج إلى تحميل ملفات الصور الخاصة بك و معرّف الصور الخاص بك.",
+  "id.verification.camera.access.failure.temporary": "يبدو أننا غير قادرين على الوصول إلى الكاميرا. يرجى التحقق من أن كاميرا الويب متصلة ومن أنك سمحت للمتصفح بالوصول إليها.",
+  "id.verification.camera.access.failure.temporary.chrome": "تمكين الوصول للكاميرا في متصفّح كروم: ",
+  "id.verification.camera.access.failure.temporary.chrome.step1": "فتح متصفّح كروم.",
+  "id.verification.camera.access.failure.temporary.chrome.step2": "توجه إلى المزيد > الإعدادات.",
+  "id.verification.camera.access.failure.temporary.chrome.step2.windows": "لنظام ويندوز: Alt+F أو Alt+E أو F10 متبوعاً بـ SPACEBAR",
+  "id.verification.camera.access.failure.temporary.chrome.step2.mac": "لنظام ماك: Command+,",
+  "id.verification.camera.access.failure.temporary.chrome.step3": "ضمن علامة التبويب \"الخصوصية والأمان\"، حدد \"إعدادات الموقع\" ثم \"الكاميرا\".",
+  "id.verification.camera.access.failure.temporary.chrome.step4": "ضمن \"قائمة الحظر\"، ابحث عن \"edx.org\" وحدده.",
+  "id.verification.camera.access.failure.temporary.chrome.step5": "في القسم \"الصلاحيات\"، قم بتحديث صلاحيات الكاميرا إلى \"السماح\".",
+  "id.verification.camera.access.failure.temporary.ie11": "تمكين الوصول للكاميرا في متصفح انترنت إكسبلورر:",
+  "id.verification.camera.access.failure.temporary.ie11.step1": "افتح إدارة إعدادات Flash Player عن طريق الانتقال إلى إعدادات Windows > لوحة التحكم > Flash Player.",
+  "id.verification.camera.access.failure.temporary.ie11.step2": "حدد علامة التبويب \"Camera and Mic\" (الكاميرا والميكروفون)، ثم حدد الزر \"Camera and Microphone Settings by Site\" (إعدادات الكاميرا والميكروفون حسب الموقع).",
+  "id.verification.camera.access.failure.temporary.ie11.step3": "اختر \"edx.org\" من قائمة مواقع ويب وقم بتغيير الصلاحيات من خلال تحديد \"السماح\" في القائمة المنسدلة.",
+  "id.verification.camera.access.failure.temporary.firefox": "لتمكين الوصول للكاميرا في متصفّح فايرفوكس: ",
+  "id.verification.camera.access.failure.temporary.firefox.step1": "فتح متصفّح فايرفوكس.",
+  "id.verification.camera.access.failure.temporary.firefox.step2": "أدخل \"about:preferences\" في شريط عنوان الرابط.",
+  "id.verification.camera.access.failure.temporary.firefox.step3": "حدد علامة التبويب \"الخصوصية والأمان\"، وانتقل إلى القسم \"الصلاحيات\".",
+  "id.verification.camera.access.failure.temporary.firefox.step4": "بجوار \"Camera\" (الكاميرا)، حدد \"Settings…\" (الإعدادات…) الزر.",
+  "id.verification.camera.access.failure.temporary.firefox.step5": "في شريط البحث أدخل \"edx.org.\"",
+  "id.verification.camera.access.failure.temporary.firefox.step6": "في عمود الحالة لـ \"edx.org,\" حدد \"السماح\" من القائمة المنسدلة.",
+  "id.verification.camera.access.failure.temporary.firefox.step7": "اختر \"حفظ التغييرات.\"",
+  "id.verification.camera.access.failure.temporary.safari": "تمكين الوصول للكاميرا في متصفّح سفاري: ",
+  "id.verification.camera.access.failure.temporary.safari.step1": "فتح متصفّح سفاري.",
+  "id.verification.camera.access.failure.temporary.safari.step2": "انقر فوق قائمة تطبيق سفاري، ثم حدد \"Preferences\" (التفضيلات). يمكنك أيضاً استخدام الأمرCommand+ كاختصار للوحة المفاتيح",
+  "id.verification.camera.access.failure.temporary.safari.step3": "حدد علامة التبويب \"مواقع ويب\" ثم حدد \"كاميرا\".",
+  "id.verification.camera.access.failure.temporary.safari.step4": "حدد \"edx.org\" وقم بتغيير صلاحيات الكاميرا إلى \"السماح\".",
+  "id.verification.camera.access.failure.unsupported": "It looks like your browser does not support camera access.",
+  "id.verification.camera.access.failure.unsupported.chrome.explanation": "The Chrome browser currently does not support camera access on iOS devices, such as iPhones and iPads.",
+  "id.verification.camera.access.failure.unsupported.instructions": "Please use another browser to complete Identity Verification.",
+  "id.verification.photo.tips.title": "تلميحات مفيدة للصورة",
+  "id.verification.photo.tips.description": "بعد ذلك، سنحتاج منك التقاط صورة لوجهك. يرجى مراجعة التلميحات المفيدة أدناه.",
+  "id.verification.photo.tips.list.title": "تلميحات الصورة",
+  "id.verification.photo.tips.list.description": "لالتقاط صورة ناجحة، يُرجى التأكّد ممّا يلي:",
+  "id.verification.photo.tips.list.well.lit": "أنّ الإضاءة جيّدة على وجهك.",
+  "id.verification.photo.tips.list.inside.frame": "أنّ وجهك داخل إطار الصورة بالكامل.",
+  "id.verification.portrait.photo.title.camera": "التقط صورة لنفسك",
+  "id.verification.portrait.photo.title.upload": "ارفع صورتك",
+  "id.verification.portrait.photo.preview.alt": "معاينة صورة وجه المستخدم.",
+  "id.verification.portrait.photo.instructions.camera": "عندما يكون وجهك في موضعه، استخدم زر التقاط صورة أدناه لالتقاط الصورة.",
+  "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: ",
+  "id.verification.camera.help.sight.question": "ماذا لو لم أتمكن من رؤية صورة الكاميرا ؟ أو إذا لم أتمكن من رؤية صورتي لتحديد أي جانب مرئي؟",
+  "id.verification.camera.help.sight.answer.portrait": "قد تتمكن من إكمال إجراء التقاط الصور من دون مساعدة، ولكن قد يتطلب الأمر بضع محاولات ضبط وضع الكاميرا بشكل صحيح. يختلف وضع الكاميرا المثالي باختلاف الكمبيوتر، ولكن بشكل عام، يكون أفضل موضع للتصوير في الرأس هو 12 إلى 18 بوصة (30-45 سم) تقريبًا من الكاميرا، مع وضع الرأس في المنتصف بالنسبة إلى شاشة الكمبيوتر. إذا تم رفض الصور التي ترسلها، فحاول تحريك اتجاه الكمبيوتر أو الكاميرا لتغيير زاوية الإضاءة.",
+  "id.verification.camera.help.sight.answer.id": "قد تتمكن من إكمال إجراء التقاط الصور من دون مساعدة، ولكن قد يتطلب الأمر بضع محاولات لضبط وضع الكاميرا بشكل صحيح. يختلف الوضع الأمثل للكاميرا باختلاف جهاز الكمبيوتر، ولكن بشكل عام، يكون أفضل وضع لصورة بطاقة تعريف من 8 إلى 12 بوصة (من 20 إلى 30 سم) عن الكاميرا، مع وضع بطاقة الهوية في الوسط بالنسبة للكاميرا. إذا تم رفض الصور التي ترسلها، فحاول تحريك اتجاه الكمبيوتر أو الكاميرا لتغيير زاوية الإضاءة. إن السبب الأكثر شيوعاً للرفض هو عدم القدرة على قراءة النص الموجود على بطاقة الهوية.",
+  "id.verification.camera.help.difficulty.question.portrait": "ماذا لو واجهت صعوبة في تثبيت رأسي في الموضع المناسب للكاميرا؟",
+  "id.verification.camera.help.difficulty.question.id": "ماذا لو واجهت صعوبة في تثبيت بطاقة هويتي في الموضع المناسب للكاميرا؟",
+  "id.verification.camera.help.difficulty.answer": "إذا كنت بحاجة إلى المساعدة في التقاط صورة للتقديم، فاتصل بدعم edX للحصول على اقتراحات إضافية.",
+  "id.verification.camera.help.upload.question": "What if I want to upload a photo instead?",
+  "id.verification.camera.help.upload.answer": "On the next page you will have the option to switch to upload mode. By selecting that option, you will be able to upload a photo instead.",
+  "id.verification.id.photo.unclear.question": "هل صورة بطاقة الهوية غير واضحة أو ضبابية؟",
+  "id.verification.id.tips.title": "تلميحات مفيدة للهوية ",
+  "id.verification.id.tips.description": "بعد ذلك، سنكون بحاجة إلى التقاط صورة لبطاقة هوية صالحة تتضمن اسمك الكامل وصورتك. يرجى تجهيز بطاقة هويتك.",
+  "id.verification.id.tips.list.well.lit": "إضاءة بطاقة هويتك جيدة.",
+  "id.verification.id.tips.list.clear": "تأكد من قدرتك على رؤية صورتك وقراءة اسمك بوضوح.",
+  "id.verification.id.photo.title.camera": "التقط صورة لبطاقتك الشخصية",
+  "id.verification.id.photo.title.upload": "حمّل صورة لهويتك",
+  "id.verification.id.photo.preview.alt": "معاينة صورة الهوية.",
+  "id.verification.id.photo.instructions.camera": "عندما تكون بطاقة هويتك في موضعها، استخدم زر التقاط صورة أدناه لالتقاط الصورة.",
+  "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: ",
+  "id.verification.id.photo.instructions.upload.error.invalidFileType": "The file you have selected is not a supported image type. Please choose from the following formats: ",
+  "id.verification.id.photo.instructions.upload.error.fileTooLarge": "The file you have selected is too large. Please try again with a file less than 10MB.",
+  "id.verification.account.name.title": "التحقق من اسم الحساب",
+  "id.verification.account.name.instructions": "يجب أن يكون الاسم الموجود على حسابك والاسم الموجود على المعرّف الخاص بك متطابقًا تمامًا. إذا لم يكن الأمر كذلك، فيرجى النقر فوق \"لا\" لتحديث اسم حسابك.",
+  "id.verification.account.name.radio.label": "هل يتطابق الاسم الموجود على هويتك مع اسم الحساب أدناه؟",
+  "id.verification.account.name.radio.yes": "نعم",
+  "id.verification.account.name.radio.no": "لا",
+  "id.verification.account.name.error": "يرجى تحديث اسم الحساب لمطابقة الاسم على بطاقة الهوية.",
+  "id.verification.account.name.warning.prefix": "يُرجى الملاحظة:",
+  "id.verification.account.name.settings": "إعدادات الحساب",
+  "id.verification.account.name.label": "اسم الحساب",
+  "id.verification.account.name.photo.alt": "صورة من هويتك للتقديم.",
+  "id.verification.account.name.save": "حفظ ثم التالي",
+  "id.verification.review.title": "مراجعة صورك",
+  "id.verification.review.description": "يُرجى التأكّد من أنّ الصور والمعلومات التي قدّمتها تمكّننا من التحقّق من هويّتك. ",
+  "id.verification.review.portrait.label": "صورتك الشخصية",
+  "id.verification.review.portrait.alt": "صورة شخصية للتقديم.",
+  "id.verification.review.portrait.retake": "إعادة التقاط الصورة شخصية",
+  "id.verification.review.id.label": "معرّف صورتك",
+  "id.verification.review.id.alt": "صورة من هويتك للتقديم.",
+  "id.verification.review.id.retake": "إعادة التقاط صورة الهوية",
+  "id.verification.review.confirm": "إرسال",
+  "id.verification.submission.alert.error.face": "مطلوب صورة لوجهك. يرجى إعادة التقاط الصورة الشخصية.",
+  "id.verification.submission.alert.error.id": "مطلوب صورة لبطاقة هويتك. يرجى إعادة التقاط صورة بطاقة الهوية.",
+  "id.verification.submission.alert.error.name": "مطلوب اسم حساب صالح. يرجى تحديث اسم حسابك لمطابقة الاسم على هويتك.",
+  "id.verification.submission.alert.error.unsupported": "One or more of the files you have uploaded is in an unsupported format. Please choose from the following: ",
+  "id.verification.review.error": "صفحة فريق دعم edX ",
+  "id.verification.submitted.title": "جارِ التحقق من الهوية",
+  "id.verification.submitted.text": "لقد تلقينا معلوماتك وجاري الآن العمل على التحقق من هويتك. ستصلك رسالة على لوحة المعلومات عند اكتمال عملية التحقق (عادةً خلال 5 أيام). في غضون ذلك، لا يزال بإمكانك الوصول إلى كل محتوى المساق المتوفر.",
+  "id.verification.return.dashboard": "العودة إلى لوحة المعلومات",
+  "id.verification.return.course": "العودة للمساق",
+  "id.verification.photo.upload.help.title": "Upload a Photo Instead",
+  "id.verification.photo.camera.help.title": "Use Your Camera Instead",
+  "id.verification.photo.upload.help.text": "If you are having trouble using the photo capture above, you may want to upload a photo instead. To upload a photo, click the button below.",
+  "id.verification.photo.camera.help.text": "If you are having trouble uploading a photo above, you may want to use your camera instead. To use your camera, click the button below.",
+  "id.verification.upload.help.button": "Switch to Upload Mode",
+  "id.verification.camera.help.button": "Switch to Camera Mode",
+  "id.verification.choose.mode.title": "Photo Requirements Options",
+  "id.verification.choose.mode.hep.text": "To complete verification, please select one of the following options to submit photos. You will be able to switch between these options throughout the process if needed.",
+  "id.verification.choose.mode.radio.upload": "Upload photos from my device",
+  "id.verification.choose.mode.radio.camera": "Take pictures using my camera",
+  "id.verification.account.name.managed.alert": "Your profile settings are managed by {managerTitle}, so you are not allowed to update your name. Please contact your {profileDataManager} administrator or {support} for help.",
+  "id.verification.request.camera.access.instructions": "لالتقاط صورة باستخدام كاميرا الويب، قد تتلقى طلب المتصفح للوصول إلى الكاميرا. {clickAllow}",
+  "id.verification.requirements.account.managed.alert": "Your account settings are managed by {managerTitle}. If the name on your photo ID does not match the name on your account, please contact your {profileDataManager} administrator or {support} for help before completing the Photo Verification process.",
+  "id.verification.requirements.card.device.text": "أنت بحاجة إلى جهاز مزود بكاميرا. إذا تلقيت طلب المتصفح للوصول إلى الكاميرا، فيرجى التأكد من النقر فوق {السماح}.",
+  "id.verification.account.name.summary.alert": "Your account settings are managed by {managerTitle}. If the name on your photo ID does not match the name on your account, please contact your {profileDataManager} administrator or {support} for help.",
+  "idv.submission.alert.error": "\nواجهنا خطأ فني أثناء محاولة رفع طلب التحقق من الهوية\nقد تكون هذه مشكلة مؤقتة، لذا يرجى المحاولة مرة أخرى بعد بضع دقائق\nعند استمرار المشكلة يرجى الانتقال إلى {support_link} للحصول على المساعدة",
+  "id.verification.account.name.edit": "Edit {sr}"
 }

src/i18n/messages/es_419.json

@@ -11,7 +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": "Optional Information",
+  "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.",
@@ -57,7 +57,7 @@
   "account.settings.field.gender.options.f": "Femenino",
   "account.settings.field.gender.options.m": "Masculino",
   "account.settings.field.gender.options.o": "Otro",
-  "account.settings.field.language.proficiencies": "Idiomas hablados",
+  "account.settings.field.language.proficiencies": "Idioma hablado",
   "account.settings.field.language.proficiencies.empty": "Agregar un idioma hablado",
   "account.settings.field.language_proficiencies.options.empty": "Selecciona lenguaje",
   "account.settings.field.time.zone": "Zona horaria",
@@ -89,7 +89,7 @@
   "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.message": "Estás inscrito para coaching. Puedes esperar un mensaje por correo electrónico o SMS en los próximos días.",
   "account.settings.coaching.consent.success.continue": "Iniciar mi curso",
   "account.settings.coaching.managed.support": "soporte",
   "account.settings.coaching.managed.alert": "{ManagerTitle} administra su Nombre. Póngase en contacto con su administrador para obtener ayuda.",
@@ -117,104 +117,43 @@
   "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": "Password is incorrect",
+  "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": "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.options.woman": "Woman",
-  "account.settings.field.demographics.gender.options.man": "Man",
-  "account.settings.field.demographics.gender.options.non-binary": "Non-binary",
-  "account.settings.field.demographics.gender.options.self-describe": "Prefer to self-describe",
-  "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.ethnicity.options.american-indian-or-alaska-native": "American Indian or Alaska Native",
-  "account.settings.field.demographics.ethnicity.options.asian": "Asian",
-  "account.settings.field.demographics.ethnicity.options.black-or-african-american": "Black or African American",
-  "account.settings.field.demographics.ethnicity.options.hispanic-latin-spanish": "Hispanic, Latin, or Spanish origin",
-  "account.settings.field.demographics.ethnicity.options.middle-eastern-or-north-african": "Middle Eastern or North African",
-  "account.settings.field.demographics.ethnicity.options.native-hawaiian-or-pacific-islander": "Native Hawaiian or Other Pacific Islander",
-  "account.settings.field.demographics.ethnicity.options.white": "White",
-  "account.settings.field.demographics.ethnicity.options.other": "Some other race, ethnicity, or origin",
-  "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.income.options.less-than-10k": "Less than US $10,000",
-  "account.settings.field.demographics.income.options.10k-25k": "US $10,000 - $25,000",
-  "account.settings.field.demographics.income.options.25k-50k": "US $25,000 - $50,000",
-  "account.settings.field.demographics.income.options.50k-75k": "US $50,000 - $75,000",
-  "account.settings.field.demographics.income.options.75k-100k": "US $75,000 - $100,000",
-  "account.settings.field.demographics.income.options.over-100k": "Over US $100,000",
-  "account.settings.field.demographics.income.options.unsure": "I don't know",
-  "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.income.options.never-served": "Never served in the military",
-  "account.settings.field.demographics.income.options.training": "Only on active duty for training",
-  "account.settings.field.demographics.income.options.active": "Now on active duty",
-  "account.settings.field.demographics.income.options.previously-active": "On active duty in the past, but not now",
-  "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.education_level.options.no-high-school": "No High School",
-  "account.settings.field.demographics.education_level.options.some-high-school": "Some High School",
-  "account.settings.field.demographics.education_level.options.high-school-ged-equivalent": "High School diploma, GED, or equivalent",
-  "account.settings.field.demographics.education_level.options.some-college": "Some college, but no degree",
-  "account.settings.field.demographics.education_level.options.associates": "Associates degree",
-  "account.settings.field.demographics.education_level.options.bachelors": "Bachelors degree",
-  "account.settings.field.demographics.education_level.options.masters": "Masters degree",
-  "account.settings.field.demographics.education_level.options.professional": "Professional degree",
-  "account.settings.field.demographics.education_level.options.doctorate": "Doctorate degree",
-  "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.options.full-time": "Employed, working full-time",
-  "account.settings.field.demographics.work_status.options.part-time": "Employed, working part-time",
-  "account.settings.field.demographics.work_status.options.self-employed": "Self-Employed",
-  "account.settings.field.demographics.work_status.options.not-employed-looking": "Not employed, looking for work",
-  "account.settings.field.demographics.work_status.options.not-employed-not-looking": "Not employed, not looking for work",
-  "account.settings.field.demographics.work_status.options.unable": "Unable to work",
-  "account.settings.field.demographics.work_status.options.retired": "Retired",
-  "account.settings.field.demographics.work_status.options.other": "Other",
-  "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.field.demographics.work_sector.options.accommodation-food": "Accommodation and Food Services",
-  "account.settings.field.demographics.work_sector.options.administrative-support-waste-remediation": "Administrative and Support and Waste Management and Remediation Services",
-  "account.settings.field.demographics.work_sector.options.agriculture-forestry-fishing-hunting": "Agriculture, Forestry, Fishing and Hunting",
-  "account.settings.field.demographics.work_sector.options.arts-entertainment-recreation": "Arts, Entertainment, and Recreation",
-  "account.settings.field.demographics.work_sector.options.construction": "Construction",
-  "account.settings.field.demographics.work_sector.options.educational": "Education Services",
-  "account.settings.field.demographics.work_sector.options.finance-insurance": "Finance and Insurance",
-  "account.settings.field.demographics.work_sector.options.healthcare-social": "Health Care and Social Assistance",
-  "account.settings.field.demographics.work_sector.options.information": "Information",
-  "account.settings.field.demographics.work_sector.options.management": "Management of Companies and Enterprises",
-  "account.settings.field.demographics.work_sector.options.manufacturing": "Manufacturing",
-  "account.settings.field.demographics.work_sector.options.mining-quarry-oil-gas": "Mining, Quarrying, and Oil and Gas Extraction",
-  "account.settings.field.demographics.work_sector.options.professional-scientific-technical": "Professional, Scientific, and Technical Services",
-  "account.settings.field.demographics.work_sector.options.public-admin": "Public Administration",
-  "account.settings.field.demographics.work_sector.options.real-estate": "Real Estate and Rental and Leasing",
-  "account.settings.field.demographics.work_sector.options.retail": "Retail Trade",
-  "account.settings.field.demographics.work_sector.options.transport-warehousing": "Transportation and Warehousing",
-  "account.settings.field.demographics.work_sector.options.utilities": "Utilities",
-  "account.settings.field.demographics.work_sector.options.trade": "Wholesale Trade",
-  "account.settings.field.demographics.work_sector.options.other": "Other",
-  "account.settings.field.demographics.options.declined": "Prefer not to respond",
-  "account.settings.section.demographics.why": "Why does edX collect this information?",
+  "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": "Añade estatus militar",
+  "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}.",
@@ -226,109 +165,154 @@
   "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.",
-  "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.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.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. (Supported formats: .jpg, .jpeg, .png)",
-  "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.access.blocked.denied": "No puedes verificar tu identidad en este momento. Si aún tienes que activar tu cuenta, revisa tu carpeta de correo no deseado y busca el correo electrónico de activación de {email}.",
+  "id.verification.next": "Siguiente",
+  "id.verification.support": "support",
+  "id.verification.example.card.alt": "Ejemplo de un documento de identidad válido con foto y nombre completo.",
+  "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 documento de identidad válido que contenga tu foto y nombre completo.",
+  "id.verification.privacy.title": "Información de privacidad",
+  "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": "Encriptamos de forma segura tu foto y la enviamos a nuestro servicio de autorización para su revisión. Tu foto e información no se guardan ni se ven en ninguna parte de edX después de que se completa el proceso de verificación.",
+  "id.verification.access.blocked.title": "Verificación de identidad",
+  "id.verification.access.blocked.enrollment": "Actualmente, no estás inscrito en un curso que requiera verificación de identidad.",
+  "id.verification.access.blocked.pending": "Ya has enviado tu información de verificación de identidad. Recibirás un mensaje en tu panel principal cuando el proceso de verificación esté completado (usualmente dentro de los 5 días).",
+  "id.verification.photo.take": "Tomar la foto",
+  "id.verification.photo.retake": "Retake Photo?",
+  "id.verification.photo.enable.detection": "Habilitar la detección de rostro",
+  "id.verification.photo.enable.detection.portrait.help.text": "Si está marcada, aparecerá un cuadro alrededor de tu cara. Tu rostro se puede ver claramente si el cuadro que lo rodea es azul. Si Tu cara no está en una buena posición o es indetectable, el cuadro será rojo.",
+  "id.verification.photo.enable.detection.id.help.text": "Si está marcada, aparecerá una casilla alrededor de la cara de tu documento de identificación. La cara se puede ver claramente si la caja que la rodea es azul. Si la cara no está en una buena posición o es indetectable, el cuadro será rojo.",
+  "id.verification.photo.feedback.correct": "La cara está en una buena posición.",
+  "id.verification.photo.feedback.two.faces": "Más de un rostro detectado.",
+  "id.verification.photo.feedback.no.faces": "No se detectó el rostro.",
+  "id.verification.photo.feedback.top.left": "Posición incorrecta. Arriba a la izquierda.",
+  "id.verification.photo.feedback.top.center": "Posición incorrecta. Centro Superior.",
+  "id.verification.photo.feedback.top.right": "Posición incorrecta. Parte superior derecha.",
+  "id.verification.photo.feedback.center.left": "Posición incorrecta. Centro izquierda.",
+  "id.verification.photo.feedback.center.center": "Posición incorrecta. Demasiado cerca de la cámara.",
+  "id.verification.photo.feedback.center.right": "Posición incorrecta. Centro derecha.",
+  "id.verification.photo.feedback.bottom.left": "Posición incorrecta. Abajo a la izquierda.",
+  "id.verification.photo.feedback.bottom.center": "Posición incorrecta. Parte inferior central.",
+  "id.verification.photo.feedback.bottom.right": "Posición incorrecta. Abajo a la derecha.",
+  "id.verification.camera.access.title": "Permisos de la cámara",
+  "id.verification.camera.access.title.success": "Acceso a la cámara habilitado",
+  "id.verification.camera.access.title.failed": "Acceso a la cámara no habilitado",
+  "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": "Parece que no podemos acceder a tu cámara. Deberás cargar archivos de imagen de tu rostro y tu identificación con foto.",
+  "id.verification.camera.access.failure.temporary": "Parece que no podemos acceder a tu cámara. Verifica que tu cámara web esté conectada y que permitiste que tu navegador acceda a ella.",
+  "id.verification.camera.access.failure.temporary.chrome": "Para habilitar el acceso a la cámara en Chrome:",
+  "id.verification.camera.access.failure.temporary.chrome.step1": "Abrir Chrome.",
+  "id.verification.camera.access.failure.temporary.chrome.step2": "Navega a Más > Configuración.",
+  "id.verification.camera.access.failure.temporary.chrome.step2.windows": "Para Windows: Alt + F, Alt + E o F10 seguido de la barra espaciadora",
+  "id.verification.camera.access.failure.temporary.chrome.step2.mac": "Para Mac: Comando +,",
+  "id.verification.camera.access.failure.temporary.chrome.step3": "En la pestaña \"Privacidad y seguridad\", selecciona \"Configuración del sitio\" y luego \"Cámara.\"",
+  "id.verification.camera.access.failure.temporary.chrome.step4": "En \"Bloqueado\", busca \"edx.org\" y selecciónalo.",
+  "id.verification.camera.access.failure.temporary.chrome.step5": "En la sección \"Permisos\", actualiza los permisos de la cámara a \"Permitir\".",
+  "id.verification.camera.access.failure.temporary.ie11": "Para habilitar el acceso a la cámara en Internet Explorer:",
+  "id.verification.camera.access.failure.temporary.ie11.step1": "Abre el Administrador de configuración de Flash Player navegando a Configuración de Windows > Panel de control > Flash Player.",
+  "id.verification.camera.access.failure.temporary.ie11.step2": "Selecciona la pestaña \"Cámara y micrófono,\" y luego selecciona el botón \"Configuración de cámara y micrófono por sitio.\"",
+  "id.verification.camera.access.failure.temporary.ie11.step3": "Elige \"edx.org\" de la lista de sitios web y cambia los permisos seleccionando \"Permitir\" en el menú desplegable.",
+  "id.verification.camera.access.failure.temporary.firefox": "Para habilitar el acceso a la cámara en Firefox:",
+  "id.verification.camera.access.failure.temporary.firefox.step1": "Abrir Firefox.",
+  "id.verification.camera.access.failure.temporary.firefox.step2": "Coloca \"about:preferences\" en la barra del URL.",
+  "id.verification.camera.access.failure.temporary.firefox.step3": "Selecciona la pestaña \"Privacidad y seguridad\" y navega hasta la sección \"Permisos.\"",
+  "id.verification.camera.access.failure.temporary.firefox.step4": "Junto a \"Cámara,\" selecciona el botón \"Configuración...\"",
+  "id.verification.camera.access.failure.temporary.firefox.step5": "En la barra de búsqueda, ingresa \"edx.org\".",
+  "id.verification.camera.access.failure.temporary.firefox.step6": "En la columna de estado de \"edx.org\", selecciona \"Permitir\" en el menú desplegable.",
+  "id.verification.camera.access.failure.temporary.firefox.step7": "Selecciona \"Guardar cambios.\"",
+  "id.verification.camera.access.failure.temporary.safari": "Para habilitar el acceso a la cámara en Safari:",
+  "id.verification.camera.access.failure.temporary.safari.step1": "Abrir Safari.",
+  "id.verification.camera.access.failure.temporary.safari.step2": "Haz clic en el menú de la aplicación Safari y luego selecciona \"Preferencias\". También puedes utilizar Command +, como método abreviado de teclado.",
+  "id.verification.camera.access.failure.temporary.safari.step3": "Selecciona la pestaña \"Sitios web\" y luego selecciona \"Cámara\".",
+  "id.verification.camera.access.failure.temporary.safari.step4": "Selecciona \"edx.org\" y cambia los permisos de la cámara a \"Permitir.\"",
+  "id.verification.camera.access.failure.unsupported": "It looks like your browser does not support camera access.",
+  "id.verification.camera.access.failure.unsupported.chrome.explanation": "The Chrome browser currently does not support camera access on iOS devices, such as iPhones and iPads.",
+  "id.verification.camera.access.failure.unsupported.instructions": "Please use another browser to complete Identity Verification.",
+  "id.verification.photo.tips.title": "Consejos útiles de fotos",
+  "id.verification.photo.tips.description": "A continuación, necesitaremos que tomes una foto de tu rostro. Por favor, revisa los siguientes consejos útiles.",
+  "id.verification.photo.tips.list.title": "Consejos para fotos",
+  "id.verification.photo.tips.list.description": "Para tomar la foto correctamente, asegúrate de: ",
+  "id.verification.photo.tips.list.well.lit": "El rostro esté bien iluminado",
+  "id.verification.photo.tips.list.inside.frame": "Tu cara está completamente dentro del marco de la foto.",
+  "id.verification.portrait.photo.title.camera": "Toma una foto de ti mismo",
+  "id.verification.portrait.photo.title.upload": "Sube una foto tuya",
+  "id.verification.portrait.photo.preview.alt": "Previsualización de la foto con el rostro del usuario",
+  "id.verification.portrait.photo.instructions.camera": "Cuando tu rostro esté en posición, usa el botón Tomar foto a continuación para tomar tu foto.",
+  "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: ",
+  "id.verification.camera.help.sight.question": "¿Qué pasa si no puedo ver la imagen de la cámara o si no puedo ver mi foto para determinar qué lado es visible?",
+  "id.verification.camera.help.sight.answer.portrait": "Es posible que puedas completar el procedimiento de captura de imágenes sin ayuda, pero es posible que necesites un par de intentos de envío para que la cámara se coloque correctamente. La posición óptima de la cámara varía con cada computadora, pero generalmente la mejor distancia para una foto de rostro es aproximadamente a 12 a 18 pulgadas (30 a 45 centímetros) de la cámara, con la cabeza centrada en relación con la pantalla de la computadora. Si las fotos que envías son rechazadas, intenta mover la computadora o la orientación de la cámara para cambiar el ángulo de iluminación.",
+  "id.verification.camera.help.sight.answer.id": "Es posible que puedas completar el procedimiento de captura de imágenes sin ayuda, pero es posible que necesites un par de intentos de envío para que la cámara se coloque correctamente. El posicionamiento óptimo de la cámara varía con cada computadora pero, generalmente, la mejor distancia para una foto de un documento de identificación es a 8 a 12 pulgadas (20 a 30 centímetros) de la cámara, con el documento de identificación centrado en relación con la cámara. Si las fotos que envías son rechazadas, intenta mover la computadora o la orientación de la cámara para cambiar el ángulo de iluminación. La razón más común de rechazo es la imposibilidad de leer el texto del documento de identidad.",
+  "id.verification.camera.help.difficulty.question.portrait": "¿Qué sucede si tengo dificultades para mantener la cabeza en posición con respecto a la cámara?",
+  "id.verification.camera.help.difficulty.question.id": "¿Qué sucede si tengo dificultades para mantener mi identificación en posición con respecto a la cámara?",
+  "id.verification.camera.help.difficulty.answer": "Si necesitas ayuda para tomar una foto para enviarla, comunícate con soporte de edX para obtener sugerencias adicionales.",
+  "id.verification.camera.help.upload.question": "What if I want to upload a photo instead?",
+  "id.verification.camera.help.upload.answer": "On the next page you will have the option to switch to upload mode. By selecting that option, you will be able to upload a photo instead.",
+  "id.verification.id.photo.unclear.question": "¿La imagen de tu identificación no es clara o está demasiado borrosa?",
+  "id.verification.id.tips.title": "Consejos útiles para la verificación",
+  "id.verification.id.tips.description": "A continuación, necesitaremos que tomes una foto de un documento de identidad válido que incluya tu foto y nombre completo. Ten tu ID a mano.",
+  "id.verification.id.tips.list.well.lit": "Tu identificación está bien iluminada.",
+  "id.verification.id.tips.list.clear": "Asegúrate de que puedes ver tu foto y leer claramente tu nombre.",
+  "id.verification.id.photo.title.camera": "Toma una Foto de tu Identificación",
+  "id.verification.id.photo.title.upload": "Carga una foto de tu identificación",
+  "id.verification.id.photo.preview.alt": "Previsualización de Foto ID",
+  "id.verification.id.photo.instructions.camera": "Cuando tu identificación esté en su lugar, usa el botón Tomar foto a continuación para tomar tu foto.",
+  "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: ",
+  "id.verification.id.photo.instructions.upload.error.invalidFileType": "The file you have selected is not a supported image type. Please choose from the following formats: ",
+  "id.verification.id.photo.instructions.upload.error.fileTooLarge": "The file you have selected is too large. Please try again with a file less than 10MB.",
+  "id.verification.account.name.title": "Verificación de nombre de cuenta",
+  "id.verification.account.name.instructions": "El nombre de tu cuenta y el nombre de tu identificación deben coincidir exactamente. De lo contrario, haz clic en \"No\" para actualizar el nombre de tu cuenta.",
+  "id.verification.account.name.radio.label": "¿El nombre de tu identificación coincide con el nombre de la cuenta a continuación?",
+  "id.verification.account.name.radio.yes": "Si",
   "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.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}.",
-  "id.verification.account.name.edit": "Edit{sr}"
+  "id.verification.account.name.error": "Actualiza el nombre de la cuenta para que coincida con el nombre de tu identificación.",
+  "id.verification.account.name.warning.prefix": "Ten en cuenta:",
+  "id.verification.account.name.settings": "Configuración de cuenta",
+  "id.verification.account.name.label": "Nombre de la cuenta",
+  "id.verification.account.name.photo.alt": "Foto de tu identificación a enviar.",
+  "id.verification.account.name.save": "Guardar y siguiente",
+  "id.verification.review.title": "Revisar tus fotos",
+  "id.verification.review.description": "Asegúrate de que podamos verificar tu identidad con las imágenes y la información suministradas.",
+  "id.verification.review.portrait.label": "Tu Retrato",
+  "id.verification.review.portrait.alt": "Foto de tu rostro a enviar.",
+  "id.verification.review.portrait.retake": "Retomar Foto de Retrato",
+  "id.verification.review.id.label": "Tu Foto de identificación",
+  "id.verification.review.id.alt": "Foto de tu identificación a enviar.",
+  "id.verification.review.id.retake": "Retomar Foto de identificación",
+  "id.verification.review.confirm": "Enviar",
+  "id.verification.submission.alert.error.face": "Se requiere una foto de tu rostro. Vuelve a tomar tu foto de retrato.",
+  "id.verification.submission.alert.error.id": "Se requiere una foto de tu documento de ID. Vuelve a tomar tu foto de ID.",
+  "id.verification.submission.alert.error.name": "Se requiere un nombre de cuenta válido. Actualiza el nombre de tu cuenta para que coincida con el nombre que figura en tu ID.",
+  "id.verification.submission.alert.error.unsupported": "One or more of the files you have uploaded is in an unsupported format. Please choose from the following: ",
+  "id.verification.review.error": "Página de soporte de edX",
+  "id.verification.submitted.title": "Verificación de identidad en progreso.",
+  "id.verification.submitted.text": "Hemos recibido tu información y estamos verificando tu identidad. Verás un mensaje en tu tablero cuando se complete el proceso de verificación (generalmente en un periodo de 5 días). Mientras tanto, aún puedes acceder a todo el contenido del curso disponible.",
+  "id.verification.return.dashboard": "Volver al panel principal",
+  "id.verification.return.course": "Regresar al curso",
+  "id.verification.photo.upload.help.title": "Upload a Photo Instead",
+  "id.verification.photo.camera.help.title": "Use Your Camera Instead",
+  "id.verification.photo.upload.help.text": "If you are having trouble using the photo capture above, you may want to upload a photo instead. To upload a photo, click the button below.",
+  "id.verification.photo.camera.help.text": "If you are having trouble uploading a photo above, you may want to use your camera instead. To use your camera, click the button below.",
+  "id.verification.upload.help.button": "Switch to Upload Mode",
+  "id.verification.camera.help.button": "Switch to Camera Mode",
+  "id.verification.choose.mode.title": "Photo Requirements Options",
+  "id.verification.choose.mode.hep.text": "To complete verification, please select one of the following options to submit photos. You will be able to switch between these options throughout the process if needed.",
+  "id.verification.choose.mode.radio.upload": "Upload photos from my device",
+  "id.verification.choose.mode.radio.camera": "Take pictures using my camera",
+  "id.verification.account.name.managed.alert": "Your profile settings are managed by {managerTitle}, so you are not allowed to update your name. Please contact your {profileDataManager} administrator or {support} for help.",
+  "id.verification.request.camera.access.instructions": "Para tomar una foto con tu cámara web, es posible que recibas un aviso del navegador para acceder a tu cámara. {clickAllow}",
+  "id.verification.requirements.account.managed.alert": "Your account settings are managed by {managerTitle}. If the name on your photo ID does not match the name on your account, please contact your {profileDataManager} administrator or {support} for help before completing the Photo Verification process.",
+  "id.verification.requirements.card.device.text": "Necesitas un dispositivo que tenga una cámara. Si has recibido un aviso del navegador para habilitar acceso a tu cámara, por favor asegúrate de seleccionar [allow].",
+  "id.verification.account.name.summary.alert": "Your account settings are managed by {managerTitle}. If the name on your photo ID does not match the name on your account, please contact your {profileDataManager} administrator or {support} for help.",
+  "idv.submission.alert.error": "\n          Se produjo un error técnico al intentar enviar la verificación de ID.\n          Es posible que sea una cuestión temporal, así que inténtalo de nuevo en unos minutos.\n          Si el problema continúa, dirígete a {support_link} para obtener ayuda.\n        ",
+  "id.verification.account.name.edit": "Edit {sr}"
 }

src/i18n/messages/fr.json

@@ -57,7 +57,7 @@
   "account.settings.field.gender.options.f": "Female",
   "account.settings.field.gender.options.m": "Male",
   "account.settings.field.gender.options.o": "Other",
-  "account.settings.field.language.proficiencies": "Spoken languages",
+  "account.settings.field.language.proficiencies": "Spoken language",
   "account.settings.field.language.proficiencies.empty": "Add a spoken language",
   "account.settings.field.language_proficiencies.options.empty": "Select a Language",
   "account.settings.field.time.zone": "Time zone",
@@ -127,65 +127,25 @@
   "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.options.woman": "Woman",
-  "account.settings.field.demographics.gender.options.man": "Man",
-  "account.settings.field.demographics.gender.options.non-binary": "Non-binary",
-  "account.settings.field.demographics.gender.options.self-describe": "Prefer to self-describe",
   "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.ethnicity.options.american-indian-or-alaska-native": "American Indian or Alaska Native",
-  "account.settings.field.demographics.ethnicity.options.asian": "Asian",
-  "account.settings.field.demographics.ethnicity.options.black-or-african-american": "Black or African American",
-  "account.settings.field.demographics.ethnicity.options.hispanic-latin-spanish": "Hispanic, Latin, or Spanish origin",
-  "account.settings.field.demographics.ethnicity.options.middle-eastern-or-north-african": "Middle Eastern or North African",
-  "account.settings.field.demographics.ethnicity.options.native-hawaiian-or-pacific-islander": "Native Hawaiian or Other Pacific Islander",
-  "account.settings.field.demographics.ethnicity.options.white": "White",
-  "account.settings.field.demographics.ethnicity.options.other": "Some other race, ethnicity, or origin",
   "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.income.options.less-than-10k": "Less than US $10,000",
-  "account.settings.field.demographics.income.options.10k-25k": "US $10,000 - $25,000",
-  "account.settings.field.demographics.income.options.25k-50k": "US $25,000 - $50,000",
-  "account.settings.field.demographics.income.options.50k-75k": "US $50,000 - $75,000",
-  "account.settings.field.demographics.income.options.75k-100k": "US $75,000 - $100,000",
-  "account.settings.field.demographics.income.options.over-100k": "Over US $100,000",
-  "account.settings.field.demographics.income.options.unsure": "I don't know",
   "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.income.options.never-served": "Never served in the military",
-  "account.settings.field.demographics.income.options.training": "Only on active duty for training",
-  "account.settings.field.demographics.income.options.active": "Now on active duty",
-  "account.settings.field.demographics.income.options.previously-active": "On active duty in the past, but not now",
   "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.education_level.options.no-high-school": "No High School",
-  "account.settings.field.demographics.education_level.options.some-high-school": "Some High School",
-  "account.settings.field.demographics.education_level.options.high-school-ged-equivalent": "High School diploma, GED, or equivalent",
-  "account.settings.field.demographics.education_level.options.some-college": "Some college, but no degree",
-  "account.settings.field.demographics.education_level.options.associates": "Associates degree",
-  "account.settings.field.demographics.education_level.options.bachelors": "Bachelors degree",
-  "account.settings.field.demographics.education_level.options.masters": "Masters degree",
-  "account.settings.field.demographics.education_level.options.professional": "Professional degree",
-  "account.settings.field.demographics.education_level.options.doctorate": "Doctorate degree",
   "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.options.full-time": "Employed, working full-time",
-  "account.settings.field.demographics.work_status.options.part-time": "Employed, working part-time",
-  "account.settings.field.demographics.work_status.options.self-employed": "Self-Employed",
-  "account.settings.field.demographics.work_status.options.not-employed-looking": "Not employed, looking for work",
-  "account.settings.field.demographics.work_status.options.not-employed-not-looking": "Not employed, not looking for work",
-  "account.settings.field.demographics.work_status.options.unable": "Unable to work",
-  "account.settings.field.demographics.work_status.options.retired": "Retired",
-  "account.settings.field.demographics.work_status.options.other": "Other",
   "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",
@@ -193,27 +153,6 @@
   "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.field.demographics.work_sector.options.accommodation-food": "Accommodation and Food Services",
-  "account.settings.field.demographics.work_sector.options.administrative-support-waste-remediation": "Administrative and Support and Waste Management and Remediation Services",
-  "account.settings.field.demographics.work_sector.options.agriculture-forestry-fishing-hunting": "Agriculture, Forestry, Fishing and Hunting",
-  "account.settings.field.demographics.work_sector.options.arts-entertainment-recreation": "Arts, Entertainment, and Recreation",
-  "account.settings.field.demographics.work_sector.options.construction": "Construction",
-  "account.settings.field.demographics.work_sector.options.educational": "Education Services",
-  "account.settings.field.demographics.work_sector.options.finance-insurance": "Finance and Insurance",
-  "account.settings.field.demographics.work_sector.options.healthcare-social": "Health Care and Social Assistance",
-  "account.settings.field.demographics.work_sector.options.information": "Information",
-  "account.settings.field.demographics.work_sector.options.management": "Management of Companies and Enterprises",
-  "account.settings.field.demographics.work_sector.options.manufacturing": "Manufacturing",
-  "account.settings.field.demographics.work_sector.options.mining-quarry-oil-gas": "Mining, Quarrying, and Oil and Gas Extraction",
-  "account.settings.field.demographics.work_sector.options.professional-scientific-technical": "Professional, Scientific, and Technical Services",
-  "account.settings.field.demographics.work_sector.options.public-admin": "Public Administration",
-  "account.settings.field.demographics.work_sector.options.real-estate": "Real Estate and Rental and Leasing",
-  "account.settings.field.demographics.work_sector.options.retail": "Retail Trade",
-  "account.settings.field.demographics.work_sector.options.transport-warehousing": "Transportation and Warehousing",
-  "account.settings.field.demographics.work_sector.options.utilities": "Utilities",
-  "account.settings.field.demographics.work_sector.options.trade": "Wholesale Trade",
-  "account.settings.field.demographics.work_sector.options.other": "Other",
-  "account.settings.field.demographics.options.declined": "Prefer not to respond",
   "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",
@@ -226,23 +165,41 @@
   "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.",
-  "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.access.blocked.denied": "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.support": "support",
+  "id.verification.example.card.alt": "Example of a valid identification card with a full name and photo.",
   "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.requirements.card.id.text": "You need a valid identification card 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.access.blocked.title": "Identity Verification",
+  "id.verification.access.blocked.enrollment": "You are not currently enrolled in a course that requires identity verification.",
+  "id.verification.access.blocked.pending": "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.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",
@@ -278,6 +235,9 @@
   "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.camera.access.failure.unsupported": "It looks like your browser does not support camera access.",
+  "id.verification.camera.access.failure.unsupported.chrome.explanation": "The Chrome browser currently does not support camera access on iOS devices, such as iPhones and iPads.",
+  "id.verification.camera.access.failure.unsupported.instructions": "Please use another browser to complete Identity Verification.",
   "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",
@@ -288,22 +248,27 @@
   "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.portrait.photo.instructions.upload": "Please upload a portrait photo. Ensure your entire face fits inside the frame and is well-lit. Supported formats: ",
   "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.camera.help.upload.question": "What if I want to upload a photo instead?",
+  "id.verification.camera.help.upload.answer": "On the next page you will have the option to switch to upload mode. By selecting that option, you will be able to upload a photo instead.",
+  "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.description": "Next, we'll need you to take a photo of a valid identification card that includes your full name and photo. 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. (Supported formats: .jpg, .jpeg, .png)",
+  "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: ",
+  "id.verification.id.photo.instructions.upload.error.invalidFileType": "The file you have selected is not a supported image type. Please choose from the following formats: ",
+  "id.verification.id.photo.instructions.upload.error.fileTooLarge": "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?",
@@ -324,11 +289,30 @@
   "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.submission.alert.error.face": "A photo of your face is required. Please retake your portrait photo.",
+  "id.verification.submission.alert.error.id": "A photo of your ID card is required. Please retake your ID photo.",
+  "id.verification.submission.alert.error.name": "A valid account name is required. Please update your account name to match the name on your ID.",
+  "id.verification.submission.alert.error.unsupported": "One or more of the files you have uploaded is in an unsupported format. Please choose from the following: ",
+  "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.photo.upload.help.title": "Upload a Photo Instead",
+  "id.verification.photo.camera.help.title": "Use Your Camera Instead",
+  "id.verification.photo.upload.help.text": "If you are having trouble using the photo capture above, you may want to upload a photo instead. To upload a photo, click the button below.",
+  "id.verification.photo.camera.help.text": "If you are having trouble uploading a photo above, you may want to use your camera instead. To use your camera, click the button below.",
+  "id.verification.upload.help.button": "Switch to Upload Mode",
+  "id.verification.camera.help.button": "Switch to Camera Mode",
+  "id.verification.choose.mode.title": "Photo Requirements Options",
+  "id.verification.choose.mode.hep.text": "To complete verification, please select one of the following options to submit photos. You will be able to switch between these options throughout the process if needed.",
+  "id.verification.choose.mode.radio.upload": "Upload photos from my device",
+  "id.verification.choose.mode.radio.camera": "Take pictures using my camera",
+  "id.verification.account.name.managed.alert": "Your profile settings are managed by {managerTitle}, so you are not allowed to update your name. Please contact your {profileDataManager} administrator or {support} for help.",
   "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.account.managed.alert": "Your account settings are managed by {managerTitle}. If the name on your photo ID does not match the name on your account, please contact your {profileDataManager} administrator or {support} for help before completing the Photo Verification process.",
   "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}.",
-  "id.verification.account.name.edit": "Edit{sr}"
+  "id.verification.account.name.summary.alert": "Your account settings are managed by {managerTitle}. If the name on your photo ID does not match the name on your account, please contact your {profileDataManager} administrator or {support} for help.",
+  "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, please go to {support_link} for help.\n        ",
+  "id.verification.account.name.edit": "Edit {sr}"
 }

src/i18n/messages/zh_CN.json

@@ -57,7 +57,7 @@
   "account.settings.field.gender.options.f": "Female",
   "account.settings.field.gender.options.m": "Male",
   "account.settings.field.gender.options.o": "Other",
-  "account.settings.field.language.proficiencies": "Spoken languages",
+  "account.settings.field.language.proficiencies": "Spoken language",
   "account.settings.field.language.proficiencies.empty": "Add a spoken language",
   "account.settings.field.language_proficiencies.options.empty": "Select a Language",
   "account.settings.field.time.zone": "Time zone",
@@ -127,65 +127,25 @@
   "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.options.woman": "Woman",
-  "account.settings.field.demographics.gender.options.man": "Man",
-  "account.settings.field.demographics.gender.options.non-binary": "Non-binary",
-  "account.settings.field.demographics.gender.options.self-describe": "Prefer to self-describe",
   "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.ethnicity.options.american-indian-or-alaska-native": "American Indian or Alaska Native",
-  "account.settings.field.demographics.ethnicity.options.asian": "Asian",
-  "account.settings.field.demographics.ethnicity.options.black-or-african-american": "Black or African American",
-  "account.settings.field.demographics.ethnicity.options.hispanic-latin-spanish": "Hispanic, Latin, or Spanish origin",
-  "account.settings.field.demographics.ethnicity.options.middle-eastern-or-north-african": "Middle Eastern or North African",
-  "account.settings.field.demographics.ethnicity.options.native-hawaiian-or-pacific-islander": "Native Hawaiian or Other Pacific Islander",
-  "account.settings.field.demographics.ethnicity.options.white": "White",
-  "account.settings.field.demographics.ethnicity.options.other": "Some other race, ethnicity, or origin",
   "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.income.options.less-than-10k": "Less than US $10,000",
-  "account.settings.field.demographics.income.options.10k-25k": "US $10,000 - $25,000",
-  "account.settings.field.demographics.income.options.25k-50k": "US $25,000 - $50,000",
-  "account.settings.field.demographics.income.options.50k-75k": "US $50,000 - $75,000",
-  "account.settings.field.demographics.income.options.75k-100k": "US $75,000 - $100,000",
-  "account.settings.field.demographics.income.options.over-100k": "Over US $100,000",
-  "account.settings.field.demographics.income.options.unsure": "I don't know",
   "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.income.options.never-served": "Never served in the military",
-  "account.settings.field.demographics.income.options.training": "Only on active duty for training",
-  "account.settings.field.demographics.income.options.active": "Now on active duty",
-  "account.settings.field.demographics.income.options.previously-active": "On active duty in the past, but not now",
   "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.education_level.options.no-high-school": "No High School",
-  "account.settings.field.demographics.education_level.options.some-high-school": "Some High School",
-  "account.settings.field.demographics.education_level.options.high-school-ged-equivalent": "High School diploma, GED, or equivalent",
-  "account.settings.field.demographics.education_level.options.some-college": "Some college, but no degree",
-  "account.settings.field.demographics.education_level.options.associates": "Associates degree",
-  "account.settings.field.demographics.education_level.options.bachelors": "Bachelors degree",
-  "account.settings.field.demographics.education_level.options.masters": "Masters degree",
-  "account.settings.field.demographics.education_level.options.professional": "Professional degree",
-  "account.settings.field.demographics.education_level.options.doctorate": "Doctorate degree",
   "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.options.full-time": "Employed, working full-time",
-  "account.settings.field.demographics.work_status.options.part-time": "Employed, working part-time",
-  "account.settings.field.demographics.work_status.options.self-employed": "Self-Employed",
-  "account.settings.field.demographics.work_status.options.not-employed-looking": "Not employed, looking for work",
-  "account.settings.field.demographics.work_status.options.not-employed-not-looking": "Not employed, not looking for work",
-  "account.settings.field.demographics.work_status.options.unable": "Unable to work",
-  "account.settings.field.demographics.work_status.options.retired": "Retired",
-  "account.settings.field.demographics.work_status.options.other": "Other",
   "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",
@@ -193,27 +153,6 @@
   "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.field.demographics.work_sector.options.accommodation-food": "Accommodation and Food Services",
-  "account.settings.field.demographics.work_sector.options.administrative-support-waste-remediation": "Administrative and Support and Waste Management and Remediation Services",
-  "account.settings.field.demographics.work_sector.options.agriculture-forestry-fishing-hunting": "Agriculture, Forestry, Fishing and Hunting",
-  "account.settings.field.demographics.work_sector.options.arts-entertainment-recreation": "Arts, Entertainment, and Recreation",
-  "account.settings.field.demographics.work_sector.options.construction": "Construction",
-  "account.settings.field.demographics.work_sector.options.educational": "Education Services",
-  "account.settings.field.demographics.work_sector.options.finance-insurance": "Finance and Insurance",
-  "account.settings.field.demographics.work_sector.options.healthcare-social": "Health Care and Social Assistance",
-  "account.settings.field.demographics.work_sector.options.information": "Information",
-  "account.settings.field.demographics.work_sector.options.management": "Management of Companies and Enterprises",
-  "account.settings.field.demographics.work_sector.options.manufacturing": "Manufacturing",
-  "account.settings.field.demographics.work_sector.options.mining-quarry-oil-gas": "Mining, Quarrying, and Oil and Gas Extraction",
-  "account.settings.field.demographics.work_sector.options.professional-scientific-technical": "Professional, Scientific, and Technical Services",
-  "account.settings.field.demographics.work_sector.options.public-admin": "Public Administration",
-  "account.settings.field.demographics.work_sector.options.real-estate": "Real Estate and Rental and Leasing",
-  "account.settings.field.demographics.work_sector.options.retail": "Retail Trade",
-  "account.settings.field.demographics.work_sector.options.transport-warehousing": "Transportation and Warehousing",
-  "account.settings.field.demographics.work_sector.options.utilities": "Utilities",
-  "account.settings.field.demographics.work_sector.options.trade": "Wholesale Trade",
-  "account.settings.field.demographics.work_sector.options.other": "Other",
-  "account.settings.field.demographics.options.declined": "Prefer not to respond",
   "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",
@@ -226,23 +165,41 @@
   "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.",
-  "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.access.blocked.denied": "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.support": "support",
+  "id.verification.example.card.alt": "Example of a valid identification card with a full name and photo.",
   "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.requirements.card.id.text": "You need a valid identification card 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.access.blocked.title": "Identity Verification",
+  "id.verification.access.blocked.enrollment": "You are not currently enrolled in a course that requires identity verification.",
+  "id.verification.access.blocked.pending": "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.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",
@@ -278,6 +235,9 @@
   "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.camera.access.failure.unsupported": "It looks like your browser does not support camera access.",
+  "id.verification.camera.access.failure.unsupported.chrome.explanation": "The Chrome browser currently does not support camera access on iOS devices, such as iPhones and iPads.",
+  "id.verification.camera.access.failure.unsupported.instructions": "Please use another browser to complete Identity Verification.",
   "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",
@@ -288,22 +248,27 @@
   "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.portrait.photo.instructions.upload": "Please upload a portrait photo. Ensure your entire face fits inside the frame and is well-lit. Supported formats: ",
   "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.camera.help.upload.question": "What if I want to upload a photo instead?",
+  "id.verification.camera.help.upload.answer": "On the next page you will have the option to switch to upload mode. By selecting that option, you will be able to upload a photo instead.",
+  "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.description": "Next, we'll need you to take a photo of a valid identification card that includes your full name and photo. 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. (Supported formats: .jpg, .jpeg, .png)",
+  "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: ",
+  "id.verification.id.photo.instructions.upload.error.invalidFileType": "The file you have selected is not a supported image type. Please choose from the following formats: ",
+  "id.verification.id.photo.instructions.upload.error.fileTooLarge": "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?",
@@ -324,11 +289,30 @@
   "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.submission.alert.error.face": "A photo of your face is required. Please retake your portrait photo.",
+  "id.verification.submission.alert.error.id": "A photo of your ID card is required. Please retake your ID photo.",
+  "id.verification.submission.alert.error.name": "A valid account name is required. Please update your account name to match the name on your ID.",
+  "id.verification.submission.alert.error.unsupported": "One or more of the files you have uploaded is in an unsupported format. Please choose from the following: ",
+  "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.photo.upload.help.title": "Upload a Photo Instead",
+  "id.verification.photo.camera.help.title": "Use Your Camera Instead",
+  "id.verification.photo.upload.help.text": "If you are having trouble using the photo capture above, you may want to upload a photo instead. To upload a photo, click the button below.",
+  "id.verification.photo.camera.help.text": "If you are having trouble uploading a photo above, you may want to use your camera instead. To use your camera, click the button below.",
+  "id.verification.upload.help.button": "Switch to Upload Mode",
+  "id.verification.camera.help.button": "Switch to Camera Mode",
+  "id.verification.choose.mode.title": "Photo Requirements Options",
+  "id.verification.choose.mode.hep.text": "To complete verification, please select one of the following options to submit photos. You will be able to switch between these options throughout the process if needed.",
+  "id.verification.choose.mode.radio.upload": "Upload photos from my device",
+  "id.verification.choose.mode.radio.camera": "Take pictures using my camera",
+  "id.verification.account.name.managed.alert": "Your profile settings are managed by {managerTitle}, so you are not allowed to update your name. Please contact your {profileDataManager} administrator or {support} for help.",
   "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.account.managed.alert": "Your account settings are managed by {managerTitle}. If the name on your photo ID does not match the name on your account, please contact your {profileDataManager} administrator or {support} for help before completing the Photo Verification process.",
   "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}.",
-  "id.verification.account.name.edit": "Edit{sr}"
+  "id.verification.account.name.summary.alert": "Your account settings are managed by {managerTitle}. If the name on your photo ID does not match the name on your account, please contact your {profileDataManager} administrator or {support} for help.",
+  "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, please go to {support_link} for help.\n        ",
+  "id.verification.account.name.edit": "Edit {sr}"
 }

src/id-verification/AccessBlocked.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { getConfig } from '@edx/frontend-platform';
+import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
+
+import messages from './IdVerification.messages';
+import { ERROR_REASONS } from './IdVerificationContext';
+
+function AccessBlocked({ error, intl }) {
+  const handleMessage = () => {
+    if (error === ERROR_REASONS.COURSE_ENROLLMENT) {
+      return <p>{intl.formatMessage(messages['id.verification.access.blocked.enrollment'])}</p>;
+    }
+    if (error === ERROR_REASONS.EXISTING_REQUEST) {
+      return <p>{intl.formatMessage(messages['id.verification.access.blocked.pending'])}</p>;
+    }
+    return (
+      <FormattedMessage
+        id="id.verification.access.blocked.denied"
+        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>,
+        }}
+      />
+    );
+  };
+
+  return (
+    <div>
+      <h3 aria-level="1" tabIndex="-1">
+        {intl.formatMessage(messages['id.verification.access.blocked.title'])}
+      </h3>
+      {handleMessage()}
+      <div className="action-row">
+        <a className="btn btn-primary mt-3" href={`${getConfig().LMS_BASE_URL}/dashboard`}>
+          {intl.formatMessage(messages['id.verification.return.dashboard'])}
+        </a>
+      </div>
+    </div>
+  );
+}
+
+AccessBlocked.propTypes = {
+  intl: intlShape.isRequired,
+  error: PropTypes.string.isRequired,
+};
+
+export default injectIntl(AccessBlocked);

src/id-verification/Camera.jsx

@@ -1,7 +1,13 @@
+/* eslint-disable jsx-a11y/media-has-caption */
+/* eslint-disable jsx-a11y/no-access-key */
 import React from 'react';
 import PropTypes from 'prop-types';
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
+// eslint-disable-next-line import/no-unresolved
+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';
@@ -11,27 +17,245 @@ class Camera extends React.Component {
     super(props, context);
     this.cameraPhoto = null;
     this.videoRef = React.createRef();
+    this.canvasRef = React.createRef();
+    this.setDetection = this.setDetection.bind(this);
     this.state = {
-      trackedObject: null,
       dataUri: '',
+      videoHasLoaded: false,
+      shouldDetect: false,
+      isFinishedLoadingDetection: true,
+      shouldGiveFeedback: true,
+      feedback: '',
     };
   }
 
   componentDidMount() {
     this.cameraPhoto = new CameraPhoto(this.videoRef.current);
-    this.cameraPhoto.startCamera(FACING_MODES.USER, { width: 1280 });
+    this.cameraPhoto.startCamera(
+      this.props.isPortrait ? FACING_MODES.USER : FACING_MODES.ENVIRONMENT,
+      { width: 640, height: 480 },
+    );
   }
 
   async componentWillUnmount() {
     this.cameraPhoto.stopCamera();
   }
 
+  setDetection() {
+    this.setState(
+      (state) => ({ shouldDetect: !state.shouldDetect }),
+      () => {
+        if (this.state.shouldDetect) {
+          this.setState({ isFinishedLoadingDetection: false });
+          this.startDetection();
+        }
+        this.sendEvent();
+      },
+    );
+  }
+
+  setVideoHasLoaded() {
+    this.setState({ videoHasLoaded: 'true' });
+  }
+
+  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;
+  }
+
+  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;
+  }
+
+  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);
+    }
+  }
+
+  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);
+  }
+
+  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);
+  }
+
+  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);
+    }
+  }
+
+  isInRangeForPortrait(x, y) {
+    return x > 47 && x < 570 && y > 100 && y < 410;
+  }
+
+  isInRangeForID(x, y) {
+    return x > 120 && x < 470 && y > 120 && y < 350;
+  }
+
   takePhoto() {
     if (this.state.dataUri) {
-      return this.reset();
+      this.reset();
+      return;
     }
+
     const config = {
-      sizeFactor: 1,
+      sizeFactor: this.getSizeFactor(),
     };
 
     this.playShutterClick();
@@ -41,12 +265,15 @@ class Camera extends React.Component {
   }
 
   playShutterClick() {
-    const audio = new Audio('data:audio/mp3;base64,' + shutter.base64);
+    const audio = new Audio(`data:audio/mp3;base64,${shutter.base64}`);
     audio.play();
   }
 
   reset() {
     this.setState({ dataUri: '' });
+    if (this.state.shouldDetect) {
+      this.startDetection();
+    }
   }
 
   render() {
@@ -54,29 +281,68 @@ class Camera extends React.Component {
       ? 'do-transition camera-flash'
       : 'camera-flash';
     return (
-      <div className='camera-outer-wrapper shadow'>
-        <div className='camera-wrapper'>
+      <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}
-            autoPlay={true}
-            className='camera-video'
-            style={{ display: this.state.dataUri ? 'none' : 'block' }}
+            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
-            alt='imgCamera'
+            data-hj-suppress
+            alt="imgCamera"
             src={this.state.dataUri}
-            className='camera-video'
+            className="camera-video"
             style={{ display: this.state.dataUri ? 'block' : 'none' }}
           />
+          <div role="status" className="sr-only">{this.state.feedback}</div>
         </div>
         <button
+          type="button"
           className={`btn camera-btn ${
-            this.state.dataUri ?
-              'btn-outline-primary'
+            this.state.dataUri
+              ? 'btn-outline-primary'
               : 'btn-primary'
           }`}
-          accessKey='c'
+          accessKey="c"
           onClick={() => {
             this.takePhoto();
           }}
@@ -93,6 +359,7 @@ class Camera extends React.Component {
 Camera.propTypes = {
   intl: intlShape.isRequired,
   onImageCapture: PropTypes.func.isRequired,
+  isPortrait: PropTypes.bool.isRequired,
 };
 
 export default injectIntl(Camera);

src/id-verification/CameraHelp.jsx

@@ -1,14 +1,30 @@
-
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { Collapsible } from '@edx/paragon';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
+import { getConfig } from '@edx/frontend-platform';
 import messages from './IdVerification.messages';
+import IdVerificationContext from './IdVerificationContext';
 
 function CameraHelp(props) {
+  const { optimizelyExperimentName } = useContext(IdVerificationContext);
+
   return (
     <div>
+      { optimizelyExperimentName
+        && (
+        <Collapsible
+          styling="card"
+          title={props.intl.formatMessage(messages['id.verification.camera.help.upload.question'])}
+          className="mb-4 shadow"
+          defaultOpen={props.isOpen}
+        >
+          <p>
+            {props.intl.formatMessage(messages['id.verification.camera.help.upload.answer'])}
+          </p>
+        </Collapsible>
+        )}
       <Collapsible
         styling="card"
         title={props.intl.formatMessage(messages['id.verification.camera.help.sight.question'])}
@@ -26,7 +42,10 @@ function CameraHelp(props) {
         defaultOpen={props.isOpen}
       >
         <p>
-          {props.intl.formatMessage(messages['id.verification.camera.help.difficulty.answer'])}
+          {props.intl.formatMessage(
+            messages['id.verification.camera.help.difficulty.answer'],
+            { siteName: getConfig().SITE_NAME },
+          )}
         </p>
       </Collapsible>
     </div>

src/id-verification/CameraHelpWithUpload.jsx

@@ -6,8 +6,9 @@ import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 
 import messages from './IdVerification.messages';
 import ImageFileUpload from './ImageFileUpload';
-import { IdVerificationContext } from './IdVerificationContext';
+import IdVerificationContext from './IdVerificationContext';
 import ImagePreview from './ImagePreview';
+import SupportedMediaTypes from './SupportedMediaTypes';
 
 function CameraHelpWithUpload(props) {
   const { setIdPhotoFile, idPhotoFile, userId } = useContext(IdVerificationContext);
@@ -34,8 +35,9 @@ function CameraHelpWithUpload(props) {
         {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'])}
+          <SupportedMediaTypes />
         </p>
-        <ImageFileUpload onFileChange={setAndTrackIdPhotoFile} />
+        <ImageFileUpload onFileChange={setAndTrackIdPhotoFile} intl={props.intl} />
       </Collapsible>
     </div>
   );

src/id-verification/CollapsibleImageHelp.jsx

@@ -0,0 +1,66 @@
+import React, { useContext } from 'react';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Button, Collapsible } from '@edx/paragon';
+import { Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
+
+import IdVerificationContext, { MEDIA_ACCESS } from './IdVerificationContext';
+import messages from './IdVerification.messages';
+
+function CollapsibleImageHelp(props) {
+  const {
+    shouldUseCamera, setShouldUseCamera, optimizelyExperimentName, mediaAccess,
+  } = useContext(IdVerificationContext);
+
+  function handleClick() {
+    setShouldUseCamera(!shouldUseCamera);
+  }
+
+  if (optimizelyExperimentName && mediaAccess !== MEDIA_ACCESS.DENIED && mediaAccess !== MEDIA_ACCESS.UNSUPPORTED) {
+    return (
+      <Collapsible
+        styling="card"
+        title={shouldUseCamera ? props.intl.formatMessage(messages['id.verification.photo.upload.help.title']) : props.intl.formatMessage(messages['id.verification.photo.camera.help.title'])}
+        className="mb-4 shadow"
+        defaultOpen
+      >
+        <p data-testid="help-text">
+          {shouldUseCamera
+            ? props.intl.formatMessage(messages['id.verification.photo.upload.help.text'])
+            : props.intl.formatMessage(messages['id.verification.photo.camera.help.text'])}
+        </p>
+        { (mediaAccess === MEDIA_ACCESS.PENDING && !shouldUseCamera)
+          ? (
+            // if a user has not enabled camera access yet, and they are trying to switch
+            // to camera mode, direct them to panel that requests camera access
+            <Link
+              to={{ pathname: 'request-camera-access', state: { fromPortraitCapture: props.isPortrait, fromIdCapture: !props.isPortrait } }}
+              className="btn btn-primary"
+              data-testid="access-link"
+            >
+              {props.intl.formatMessage(messages['id.verification.photo.camera.help.button'])}
+            </Link>
+          )
+          : (
+            <Button
+              title={shouldUseCamera ? 'Upload Portrait Photo' : 'Take Portrait Photo'}
+              data-testid="toggle-button"
+              onClick={handleClick}
+              style={{ marginTop: '0.5rem' }}
+            >
+              {shouldUseCamera ? props.intl.formatMessage(messages['id.verification.photo.upload.help.button']) : props.intl.formatMessage(messages['id.verification.photo.camera.help.button'])}
+            </Button>
+          )}
+      </Collapsible>
+    );
+  }
+
+  return null;
+}
+
+CollapsibleImageHelp.propTypes = {
+  intl: intlShape.isRequired,
+  isPortrait: PropTypes.bool.isRequired,
+};
+
+export default injectIntl(CollapsibleImageHelp);

src/id-verification/ExistingRequest.jsx

@@ -1,37 +0,0 @@
-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

@@ -6,6 +6,21 @@ const messages = defineMessages({
     defaultMessage: 'Next',
     description: 'Next button.',
   },
+  'id.verification.support': {
+    id: 'id.verification.support',
+    defaultMessage: 'support',
+    description: 'Website support.',
+  },
+  'id.verification.continue.upload': {
+    id: 'id.verification.continue.upload',
+    defaultMessage: 'Continue with Upload',
+    description: 'Button to continue with upload.',
+  },
+  'id.verification.example.card.alt': {
+    id: 'id.verification.example.card.alt',
+    defaultMessage: 'Example of a valid identification card with a full name and photo.',
+    description: 'Alt text for an example identification card.',
+  },
   'id.verification.requirements.title': {
     id: 'id.verification.requirements.title',
     defaultMessage: 'Photo Verification Requirements',
@@ -33,7 +48,7 @@ const messages = defineMessages({
   },
   '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.',
+    defaultMessage: 'You need a valid identification card that contains your full name and photo.',
     description: 'Text that explains that the user needs a photo ID.',
   },
   'id.verification.privacy.title': {
@@ -43,31 +58,36 @@ const messages = defineMessages({
   },
   '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.',
+    defaultMessage: 'Why does {siteName} need my photo?',
+    description: 'Question about why the platform 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.',
+    description: 'Answering why the platform 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.',
+    defaultMessage: 'What does {siteName} do with this photo?',
+    description: 'Question about what the platform 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.',
+    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 {siteName} after the verification process is complete.',
+    description: 'Answering what the platform does with the verification photo.',
   },
-  'id.verification.existing.request.title': {
-    id: 'id.verification.existing.request.title',
+  'id.verification.access.blocked.title': {
+    id: 'id.verification.access.blocked.title',
     defaultMessage: 'Identity Verification',
-    description: 'Title for text that displays when user has already made a request.',
+    description: 'Title for text that displays when a user is blocked from ID verification.',
   },
-  'id.verification.existing.request.pending.text': {
-    id: 'id.verification.existing.request.pending.text',
+  'id.verification.access.blocked.enrollment': {
+    id: 'id.verification.access.blocked.enrollment',
+    defaultMessage: 'You are not currently enrolled in a course that requires identity verification.',
+    description: 'Text that displays when user is trying to verify while not enrolled in a course that requires ID verification.',
+  },
+  'id.verification.access.blocked.pending': {
+    id: 'id.verification.access.blocked.pending',
     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.',
   },
@@ -78,9 +98,84 @@ const messages = defineMessages({
   },
   'id.verification.photo.retake': {
     id: 'id.verification.photo.retake',
-    defaultMessage: 'Retake Photo',
+    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',
@@ -256,6 +351,21 @@ const messages = defineMessages({
     defaultMessage: 'Select "edx.org" and change the camera permissions to "Allow."',
     description: 'Text for step four of enabling camera access.',
   },
+  'id.verification.camera.access.failure.unsupported': {
+    id: 'id.verification.camera.access.failure.unsupported',
+    defaultMessage: 'It looks like your browser does not support camera access.',
+    description: 'Text indicating that the user\'s browser does not support camera access.',
+  },
+  'id.verification.camera.access.failure.unsupported.chrome.explanation': {
+    id: 'id.verification.camera.access.failure.unsupported.chrome.explanation',
+    defaultMessage: 'The Chrome browser currently does not support camera access on iOS devices, such as iPhones and iPads.',
+    description: 'Explanation for why certain web browsers, like Chrome, do not support accessing the user\'s camera.',
+  },
+  'id.verification.camera.access.failure.unsupported.instructions': {
+    id: 'id.verification.camera.access.failure.unsupported.instructions',
+    defaultMessage: 'Please use another browser to complete Identity Verification.',
+    description: 'Instructions for the user to user another web browser to complete the process.',
+  },
   'id.verification.photo.tips.title': {
     id: 'id.verification.photo.tips.title',
     defaultMessage: 'Helpful Photo Tips',
@@ -308,7 +418,7 @@ const messages = defineMessages({
   },
   '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)',
+    defaultMessage: 'Please upload a portrait photo. Ensure your entire face fits inside the frame and is well-lit. Supported formats: ',
     description: 'Instructions for portrait photo upload.',
   },
   'id.verification.camera.help.sight.question': {
@@ -338,9 +448,19 @@ const messages = defineMessages({
   },
   '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.',
+    defaultMessage: 'If you require assistance with taking a photo for submission, contact {siteName} support for additional suggestions.',
     description: 'Confirming what to do if the user has difficult holding their head relative to the camera.',
   },
+  'id.verification.camera.help.upload.question': {
+    id: 'id.verification.camera.help.upload.question',
+    defaultMessage: 'What if I want to upload a photo instead?',
+    description: 'Question on what to do if the user would like to upload a photo instead.',
+  },
+  'id.verification.camera.help.upload.answer': {
+    id: 'id.verification.camera.help.upload.answer',
+    defaultMessage: 'On the next page you will have the option to switch to upload mode. By selecting that option, you will be able to upload a photo instead.',
+    description: 'Confirming what to do if the user would like to upload a photo.',
+  },
   'id.verification.id.photo.unclear.question': {
     id: 'id.verification.id.photo.unclear.question',
     defaultMessage: 'Is your ID image not clear or too blurry?',
@@ -353,7 +473,7 @@ const messages = defineMessages({
   },
   '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.',
+    defaultMessage: 'Next, we\'ll need you to take a photo of a valid identification card that includes your full name and photo. Please have your ID ready.',
     description: 'Description for the ID Tips page.',
   },
   'id.verification.id.tips.list.well.lit': {
@@ -388,9 +508,19 @@ const messages = defineMessages({
   },
   '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. (Supported formats: .jpg, .jpeg, .png)',
+    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: ',
     description: 'Instructions for ID photo upload.',
   },
+  'id.verification.id.photo.instructions.upload.error.invalidFileType': {
+    id: 'id.verification.id.photo.instructions.upload.error.invalidFileType',
+    defaultMessage: 'The file you have selected is not a supported image type. Please choose from the following formats: ',
+    description: 'Error message for file upload that is not a supported image type.',
+  },
+  'id.verification.id.photo.instructions.upload.error.fileTooLarge': {
+    id: 'id.verification.id.photo.instructions.upload.error.fileTooLarge',
+    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',
@@ -491,6 +621,31 @@ const messages = defineMessages({
     defaultMessage: 'Submit',
     description: 'Button to confirm all information is correct and submit.',
   },
+  'id.verification.submission.alert.error.face': {
+    id: 'id.verification.submission.alert.error.face',
+    defaultMessage: 'A photo of your face is required. Please retake your portrait photo.',
+    description: 'Error message displayed when the user\'s portrait photo is missing.',
+  },
+  'id.verification.submission.alert.error.id': {
+    id: 'id.verification.submission.alert.error.id',
+    defaultMessage: 'A photo of your ID card is required. Please retake your ID photo.',
+    description: 'Error message displayed when the user\'s ID photo is missing.',
+  },
+  'id.verification.submission.alert.error.name': {
+    id: 'id.verification.submission.alert.error.name',
+    defaultMessage: 'A valid account name is required. Please update your account name to match the name on your ID.',
+    description: 'Error message displayed when the user\'s account name is missing.',
+  },
+  'id.verification.submission.alert.error.unsupported': {
+    id: 'id.verification.submission.alert.error.unsupported',
+    defaultMessage: 'One or more of the files you have uploaded is in an unsupported format. Please choose from the following: ',
+    description: 'Error message displayed when the user uploads an unsupported file type.',
+  },
+  'id.verification.review.error': {
+    id: 'id.verification.review.error',
+    defaultMessage: '{siteName} Support Page',
+    description: 'Text linking to the platform support page.',
+  },
   'id.verification.submitted.title': {
     id: 'id.verification.submitted.title',
     defaultMessage: 'Identity Verification in Progress',
@@ -511,6 +666,56 @@ const messages = defineMessages({
     defaultMessage: 'Return to Course',
     description: 'Return to the course which ID verification was accessed from.',
   },
+  'id.verification.photo.upload.help.title': {
+    id: 'id.verification.photo.upload.help.title',
+    defaultMessage: 'Upload a Photo Instead',
+    description: 'Title for section that allows switching to photo upload mode.',
+  },
+  'id.verification.photo.camera.help.title': {
+    id: 'id.verification.photo.camera.help.title',
+    defaultMessage: 'Use Your Camera Instead',
+    description: 'Title for section that allows switching to camera mode.',
+  },
+  'id.verification.photo.upload.help.text': {
+    id: 'id.verification.photo.upload.help.text',
+    defaultMessage: 'If you are having trouble using the photo capture above, you may want to upload a photo instead. To upload a photo, click the button below.',
+    description: 'Help text for switching to upload mode.',
+  },
+  'id.verification.photo.camera.help.text': {
+    id: 'id.verification.photo.camera.help.text',
+    defaultMessage: 'If you are having trouble uploading a photo above, you may want to use your camera instead. To use your camera, click the button below.',
+    description: 'Help text for switching to camera mode.',
+  },
+  'id.verification.photo.upload.help.button': {
+    id: 'id.verification.upload.help.button',
+    defaultMessage: 'Switch to Upload Mode',
+    description: 'Button used to switch to upload mode.',
+  },
+  'id.verification.photo.camera.help.button': {
+    id: 'id.verification.camera.help.button',
+    defaultMessage: 'Switch to Camera Mode',
+    description: 'Button used to switch to camera mode.',
+  },
+  'id.verification.choose.mode.title': {
+    id: 'id.verification.choose.mode.title',
+    defaultMessage: 'Photo Requirements Options',
+    description: 'Title for section that allows user to choose photo mode.',
+  },
+  'id.verification.choose.mode.help.text': {
+    id: 'id.verification.choose.mode.hep.text',
+    defaultMessage: 'To complete verification, please select one of the following options to submit photos. You will be able to switch between these options throughout the process if needed.',
+    description: 'Help text for section that allows user to choose photo mode.',
+  },
+  'id.verification.choose.mode.radio.upload': {
+    id: 'id.verification.choose.mode.radio.upload',
+    defaultMessage: 'Upload photos from my device',
+    description: 'Radio button to choose to upload photos.',
+  },
+  'id.verification.choose.mode.radio.camera': {
+    id: 'id.verification.choose.mode.radio.camera',
+    defaultMessage: 'Take pictures using my camera',
+    description: 'Radio button to choose to use camera for photos.',
+  },
 });
 
 export default messages;

src/id-verification/IdVerificationContext.jsx

@@ -1,11 +1,4 @@
-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';
+import React from 'react';
 
 const IdVerificationContext = React.createContext({});
 
@@ -16,83 +9,17 @@ const MEDIA_ACCESS = {
   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);
-        // If we would like to stop the stream immediately. I guess we can leave it open
-        // 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,
+const ERROR_REASONS = {
+  COURSE_ENROLLMENT: 'course_enrollment',
+  EXISTING_REQUEST: 'existing_request',
+  CANNOT_VERIFY: 'cannot_verify',
 };
 
+const VERIFIED_MODES = ['verified', 'professional', 'masters', 'executive_education'];
+
+export default IdVerificationContext;
 export {
-  IdVerificationContext,
-  IdVerificationContextProvider,
   MEDIA_ACCESS,
+  ERROR_REASONS,
+  VERIFIED_MODES,
 };

src/id-verification/IdVerificationContextProvider.jsx

@@ -0,0 +1,147 @@
+import React, { useState, useContext, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { AppContext } from '@edx/frontend-platform/react';
+
+import { getProfileDataManager } from '../account-settings/data/service';
+import PageLoading from '../account-settings/PageLoading';
+
+import { getExistingIdVerification, getEnrollments } from './data/service';
+import AccessBlocked from './AccessBlocked';
+import { hasGetUserMediaSupport } from './getUserMediaShim';
+import IdVerificationContext, { MEDIA_ACCESS, ERROR_REASONS, VERIFIED_MODES } from './IdVerificationContext';
+
+export default function IdVerificationContextProvider({ children }) {
+  const { authenticatedUser } = useContext(AppContext);
+
+  const [existingIdVerification, setExistingIdVerification] = useState(null);
+  useEffect(() => {
+    // Call verification status endpoint to check whether we can verify.
+    (async () => {
+      const existingIdV = await getExistingIdVerification();
+      setExistingIdVerification(existingIdV);
+    })();
+  }, []);
+
+  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 [canVerify, setCanVerify] = useState(true);
+  const [error, setError] = useState('');
+  useEffect(() => {
+    // Check for an existing verification attempt
+    if (existingIdVerification && !existingIdVerification.canVerify) {
+      const { status } = existingIdVerification;
+      setCanVerify(false);
+      if (status === 'pending' || status === 'approved') {
+        setError(ERROR_REASONS.EXISTING_REQUEST);
+      } else {
+        setError(ERROR_REASONS.CANNOT_VERIFY);
+      }
+    }
+  }, [existingIdVerification]);
+  useEffect(() => {
+    // Check whether the learner is enrolled in a verified course mode.
+    (async () => {
+      /* eslint-disable arrow-body-style */
+      const enrollments = await getEnrollments();
+      const verifiedEnrollments = enrollments.filter((enrollment) => {
+        return VERIFIED_MODES.includes(enrollment.mode);
+      });
+      if (verifiedEnrollments.length === 0) {
+        setCanVerify(false);
+        setError(ERROR_REASONS.COURSE_ENROLLMENT);
+      }
+    })();
+  }, []);
+
+  const [profileDataManager, setProfileDataManager] = useState(null);
+  useEffect(() => {
+    // Determine if the user's profile data is managed by a third-party identity provider.
+    // If so, they cannot update their account name manually.
+    if (authenticatedUser.roles.length > 0) {
+      (async () => {
+        const thirdPartyManager = await getProfileDataManager(
+          authenticatedUser.username,
+          authenticatedUser.roles,
+        );
+        if (thirdPartyManager) {
+          setProfileDataManager(thirdPartyManager);
+        }
+      })();
+    }
+  }, [authenticatedUser]);
+
+  const [optimizelyExperimentName, setOptimizelyExperimentName] = useState('');
+  const [shouldUseCamera, setShouldUseCamera] = useState(false);
+
+  // If the user reaches the end of the flow and goes back to retake their photos,
+  // this flag ensures that they are directed straight back to the summary panel
+  const [reachedSummary, setReachedSummary] = useState(false);
+
+  const contextValue = {
+    existingIdVerification,
+    facePhotoFile,
+    idPhotoFile,
+    idPhotoName,
+    mediaStream,
+    mediaAccess,
+    userId: authenticatedUser.userId,
+    nameOnAccount: authenticatedUser.name,
+    profileDataManager,
+    optimizelyExperimentName,
+    shouldUseCamera,
+    reachedSummary,
+    setExistingIdVerification,
+    setFacePhotoFile,
+    setIdPhotoFile,
+    setIdPhotoName,
+    setOptimizelyExperimentName,
+    setShouldUseCamera,
+    setReachedSummary,
+    tryGetUserMedia: async () => {
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({ video: true });
+        setMediaAccess(MEDIA_ACCESS.GRANTED);
+        setMediaStream(stream);
+        setShouldUseCamera(true);
+        // 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);
+        setShouldUseCamera(false);
+      }
+    },
+    stopUserMedia: () => {
+      if (mediaStream) {
+        const tracks = mediaStream.getTracks();
+        tracks.forEach(track => track.stop());
+        setMediaStream(null);
+      }
+    },
+  };
+
+  // If we are waiting for verification status endpoint, show spinner.
+  if (!existingIdVerification) {
+    return <PageLoading srMessage="Loading verification status" />;
+  }
+
+  if (!canVerify) {
+    return <AccessBlocked error={error} />;
+  }
+
+  return (
+    <IdVerificationContext.Provider value={contextValue}>
+      {children}
+    </IdVerificationContext.Provider>
+  );
+}
+
+IdVerificationContextProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+};

src/id-verification/IdVerificationPage.jsx

@@ -1,13 +1,18 @@
 import React, { useState, useEffect } from 'react';
 import { connect } from 'react-redux';
-import { Route, Switch, Redirect, useRouteMatch, useLocation } from 'react-router-dom';
+import {
+  Route, Switch, Redirect, useRouteMatch, useLocation,
+} from 'react-router-dom';
+import qs from 'qs';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Modal, Button } from '@edx/paragon';
+import { getConfig } from '@edx/frontend-platform';
 import { idVerificationSelector } from './data/selectors';
 import './getUserMediaShim';
 
-import { IdVerificationContextProvider } from './IdVerificationContext';
+import IdVerificationContextProvider from './IdVerificationContextProvider';
 import ReviewRequirementsPanel from './panels/ReviewRequirementsPanel';
+import ChooseModePanel from './panels/ChooseModePanel';
 import RequestCameraAccessPanel from './panels/RequestCameraAccessPanel';
 import PortraitPhotoContextPanel from './panels/PortraitPhotoContextPanel';
 import TakePortraitPhotoPanel from './panels/TakePortraitPhotoPanel';
@@ -29,7 +34,13 @@ function IdVerificationPage(props) {
   // Course run key is passed as a query string
   useEffect(() => {
     if (search) {
-      sessionStorage.setItem('courseRunKey', search.substring(1));
+      const parsed = qs.parse(search, {
+        ignoreQueryPrefix: true,
+        interpretNumericEntities: true,
+      });
+      if (Object.prototype.hasOwnProperty.call(parsed, 'course_id') && parsed.course_id) {
+        sessionStorage.setItem('courseRunKey', parsed.course_id);
+      }
     }
   }, [search]);
 
@@ -43,6 +54,7 @@ function IdVerificationPage(props) {
             <IdVerificationContextProvider>
               <Switch>
                 <Route path={`${path}/review-requirements`} component={ReviewRequirementsPanel} />
+                <Route path={`${path}/choose-mode`} component={ChooseModePanel} />
                 <Route path={`${path}/request-camera-access`} component={RequestCameraAccessPanel} />
                 <Route path={`${path}/portrait-photo-context`} component={PortraitPhotoContextPanel} />
                 <Route path={`${path}/take-portrait-photo`} component={TakePortraitPhotoPanel} />
@@ -55,27 +67,40 @@ function IdVerificationPage(props) {
             </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 variant="link" className="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>
+              <h6>
+                {props.intl.formatMessage(
+                  messages['id.verification.privacy.need.photo.question'],
+                  { siteName: getConfig().SITE_NAME },
+                )}
+              </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>
+              <h6>
+                {props.intl.formatMessage(
+                  messages['id.verification.privacy.do.with.photo.question'],
+                  { siteName: getConfig().SITE_NAME },
+                )}
+              </h6>
+              <p>
+                {props.intl.formatMessage(
+                  messages['id.verification.privacy.do.with.photo.answer'],
+                  { siteName: getConfig().SITE_NAME },
+                )}
+              </p>
             </div>
           )}
           onClose={() => setIsModalOpen(false)}
         />
-
       </div>
     </>
   );
@@ -85,6 +110,4 @@ IdVerificationPage.propTypes = {
   intl: intlShape.isRequired,
 };
 
-export default connect(idVerificationSelector, {
-})(injectIntl(IdVerificationPage));
-
+export default connect(idVerificationSelector, {})(injectIntl(IdVerificationPage));

src/id-verification/ImageFileUpload.jsx

@@ -1,28 +1,60 @@
-import React, { useCallback } from 'react';
+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';
+import SupportedMediaTypes from './SupportedMediaTypes';
+
+export default function ImageFileUpload({ onFileChange, intl }) {
+  const [error, setError] = useState(null);
+  const errorTypes = {
+    invalidFileType: 'invalidFileType',
+    fileTooLarge: 'fileTooLarge',
+  };
+  const maxFileSize = 10000000;
 
-export default function ImageFileUpload({ onFileChange }) {
   const handleChange = useCallback((e) => {
     if (e.target.files.length === 0) {
       return;
     }
 
     const fileObject = e.target.files[0];
-    const fileReader = new FileReader();
-    fileReader.addEventListener('load', () => onFileChange(fileReader.result));
-    fileReader.readAsDataURL(fileObject);
+    if (!fileObject.type.startsWith('image')) {
+      setError(errorTypes.invalidFileType);
+    } else if (fileObject.size >= maxFileSize) {
+      setError(errorTypes.fileTooLarge);
+    } else {
+      setError(null);
+      const fileReader = new FileReader();
+      fileReader.addEventListener('load', () => onFileChange(fileReader.result));
+      fileReader.readAsDataURL(fileObject);
+    }
   }, []);
 
   return (
-    <input
-      type="file"
-      accept="image/*"
-      data-testid="fileUpload"
-      onChange={handleChange}
-    />
+    <>
+      <input
+        type="file"
+        accept="image/*"
+        data-testid="fileUpload"
+        onChange={handleChange}
+      />
+      {error && (
+      <Alert
+        id="fileError"
+        variant="danger"
+        tabIndex="-1"
+        style={{ marginTop: '1rem' }}
+      >
+        {intl.formatMessage(messages[`id.verification.id.photo.instructions.upload.error.${error}`])}
+        <SupportedMediaTypes />
+      </Alert>
+      )}
+    </>
   );
 }
 
 ImageFileUpload.propTypes = {
   onFileChange: PropTypes.func.isRequired,
+  intl: intlShape.isRequired,
 };

src/id-verification/ImagePreview.jsx

@@ -5,7 +5,7 @@ export default function ImagePreview({ src, alt, id }) {
   return (
     <div id={id} className="image-preview">
 
-      <img style={{ objectFit: 'contain' }} src={src} alt={alt} />
+      <img data-hj-suppress style={{ objectFit: 'contain' }} src={src} alt={alt} />
 
     </div>
   );
@@ -16,3 +16,7 @@ ImagePreview.propTypes = {
   alt: PropTypes.string.isRequired,
   id: PropTypes.string,
 };
+
+ImagePreview.defaultProps = {
+  id: undefined,
+};

src/id-verification/SupportedMediaTypes.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+export default function SupportedMediaTypes() {
+  const SUPPORTED_TYPES = ['.png', '.jpeg', '.jpg', '.bmp', '.webp', '.tiff'];
+
+  const getSupportedTypes = () => SUPPORTED_TYPES.map((type, index) => {
+    if (index === SUPPORTED_TYPES.length - 1) {
+      return type;
+    }
+    return `${type}, `;
+  });
+
+  return <span>{getSupportedTypes()}</span>;
+}

src/id-verification/_id-verification.scss

@@ -1,5 +1,8 @@
 .page__id-verification {
   .verification-panel {
+    img {
+      max-width: 100%;
+    }
     .card.accent {
       border-top: solid 4px theme-color('warning');
     }
@@ -8,12 +11,11 @@
       max-width: 20rem;
       img {
         display: block;
-        max-width: 100%;
         max-height: 10rem;
       }
     }
     .form-check {
-      padding: 0.5rem 0.5rem 1rem;      
+      padding: 0.5rem 0.5rem 1rem;
       .form-check-label {
         margin-left: 0.5rem;
         padding-top: 0.2rem;
@@ -52,6 +54,14 @@
     width: 100%;
   }
 
+  .canvas-video {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
   .camera-btn {
     margin: 10px;
   }
@@ -68,4 +78,4 @@
     opacity: 0;
     background: white;
   }
-}
+}

src/id-verification/data/service.js

@@ -29,6 +29,25 @@ export async function getExistingIdVerification() {
   }
 }
 
+/**
+ * Get the learner's enrollments. Used to check whether the learner is enrolled
+ * in a verified course mode.
+ *
+ * Returns an array: [{...data, mode: String}]
+ */
+export async function getEnrollments() {
+  const url = `${getConfig().LMS_BASE_URL}/api/enrollment/v1/enrollment`;
+  const requestConfig = {
+    headers: { Accept: 'application/json' },
+  };
+  try {
+    const { data } = await getAuthenticatedHttpClient().get(url, requestConfig);
+    return data;
+  } catch (e) {
+    return [];
+  }
+}
+
 /**
  * Submit ID verifiction to LMS.
  *
@@ -45,7 +64,7 @@ export async function submitIdVerification(verificationData) {
     facePhotoFile: 'face_image',
     idPhotoFile: 'photo_id_image',
     idPhotoName: 'full_name',
-    courseRunKey: 'course_key',
+    optimizelyExperimentName: 'experiment_name',
   };
   const postData = {};
   // Don't include blank/null/undefined values.
@@ -66,6 +85,10 @@ export async function submitIdVerification(verificationData) {
     await getAuthenticatedHttpClient().post(url, urlEncodedPostData, requestConfig);
     return { success: true, message: null };
   } catch (e) {
-    return { success: false, message: String(e) }; // TODO: is String(e) right?
+    return {
+      success: false,
+      status: e.customAttributes.httpErrorStatus,
+      message: String(e),
+    };
   }
 }

src/id-verification/panels/ChooseModePanel.jsx

@@ -0,0 +1,60 @@
+import React, { useContext } from 'react';
+import { Link } from 'react-router-dom';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Form } from '@edx/paragon';
+
+import { useNextPanelSlug } from '../routing-utilities';
+import BasePanel from './BasePanel';
+import IdVerificationContext from '../IdVerificationContext';
+import messages from '../IdVerification.messages';
+
+function ChooseModePanel(props) {
+  const panelSlug = 'choose-mode';
+  const { shouldUseCamera, setShouldUseCamera } = useContext(IdVerificationContext);
+
+  function onPhotoModeChange(value) {
+    setShouldUseCamera(value);
+  }
+
+  return (
+    <BasePanel
+      name={panelSlug}
+      title={props.intl.formatMessage(messages['id.verification.choose.mode.title'])}
+    >
+      <p>
+        {props.intl.formatMessage(messages['id.verification.choose.mode.help.text'])}
+      </p>
+      <fieldset>
+        <Form.Group controlId="formChoosePhotoOption" style={{ marginLeft: '1.25rem' }}>
+          <Form.Check
+            type="radio"
+            id="useUploadMode"
+            label={props.intl.formatMessage(messages['id.verification.choose.mode.radio.upload'])}
+            name="photoMode"
+            checked={!shouldUseCamera}
+            onChange={() => onPhotoModeChange(false)}
+          />
+          <Form.Check
+            type="radio"
+            id="useCameraMode"
+            label={props.intl.formatMessage(messages['id.verification.choose.mode.radio.camera'])}
+            name="photoMode"
+            checked={shouldUseCamera}
+            onChange={() => onPhotoModeChange(true)}
+          />
+        </Form.Group>
+      </fieldset>
+      <div className="action-row">
+        <Link to={useNextPanelSlug(panelSlug)} className="btn btn-primary" data-testid="next-button">
+          {props.intl.formatMessage(messages['id.verification.next'])}
+        </Link>
+      </div>
+    </BasePanel>
+  );
+}
+
+ChooseModePanel.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(ChooseModePanel);

src/id-verification/panels/EnableCameraDirectionsPanel.jsx

@@ -15,7 +15,8 @@ export function EnableCameraDirectionsPanel(props) {
         </ol>
       </>
     );
-  } else if (props.browserName === 'Chrome') {
+  }
+  if (props.browserName === 'Chrome') {
     return (
       <>
         <h6>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.chrome'])}</h6>
@@ -32,7 +33,8 @@ export function EnableCameraDirectionsPanel(props) {
         </ol>
       </>
     );
-  } else if (props.browserName === 'Firefox') {
+  }
+  if (props.browserName === 'Firefox') {
     return (
       <>
         <h6>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.firefox'])}</h6>
@@ -47,7 +49,8 @@ export function EnableCameraDirectionsPanel(props) {
         </ol>
       </>
     );
-  } else if (props.browserName === 'Safari') {
+  }
+  if (props.browserName === 'Safari') {
     return (
       <>
         <h6>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.safari'])}</h6>

src/id-verification/panels/GetNameIdPanel.jsx

@@ -1,30 +1,34 @@
-import React, { useContext, useState, useEffect, useRef } from 'react';
-import { Form } from '@edx/paragon';
-import { Link } from 'react-router-dom';
+import React, {
+  useContext, useState, useEffect, useRef,
+} from 'react';
+import { getConfig } from '@edx/frontend-platform';
+import { Hyperlink, 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 { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
 
 import { useNextPanelSlug } from '../routing-utilities';
 import BasePanel from './BasePanel';
-import { IdVerificationContext } from '../IdVerificationContext';
+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,
+    nameOnAccount, userId, profileDataManager, idPhotoName, setIdPhotoName,
   } = useContext(IdVerificationContext);
   const nameOnAccountValue = nameOnAccount || '';
   const invalidName = !nameMatches && (!idPhotoName || idPhotoName === nameOnAccount);
   const blankName = !nameOnAccount && !idPhotoName;
 
   useEffect(() => {
-    setIdPhotoName('');
+    setIdPhotoName(null);
   }, []);
 
   useEffect(() => {
@@ -42,6 +46,48 @@ function GetNameIdPanel(props) {
     }
   }, [nameMatches, blankName]);
 
+  function getNameValue() {
+    if (!nameMatches) {
+      // Explicitly check for null, as an empty string should still be used here
+      if (idPhotoName === null) {
+        return nameOnAccountValue;
+      }
+      return idPhotoName;
+    }
+    return nameOnAccountValue;
+  }
+
+  function getErrorMessage() {
+    if (profileDataManager) {
+      return (
+        <FormattedMessage
+          id="id.verification.account.name.managed.alert"
+          defaultMessage="Your profile settings are managed by {managerTitle}, so you are not allowed to update your name. Please contact your {profileDataManager} administrator or {support} for help."
+          description="Alert message informing the user their account name is managed by a third party."
+          values={{
+            managerTitle: <strong>{profileDataManager}</strong>,
+            profileDataManager,
+            support: (
+              <Hyperlink destination={getConfig().SUPPORT_URL} target="_blank">
+                {props.intl.formatMessage(messages['id.verification.support'])}
+              </Hyperlink>
+            ),
+          }}
+        />
+      );
+    }
+    return props.intl.formatMessage(messages['id.verification.account.name.error']);
+  }
+
+  function 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}
@@ -51,7 +97,7 @@ function GetNameIdPanel(props) {
         {props.intl.formatMessage(messages['id.verification.account.name.instructions'])}
       </p>
 
-      <Form>
+      <Form onSubmit={handleSubmit}>
         <Form.Group>
           <Form.Label htmlFor="nameMatchesYes">
             {props.intl.formatMessage(messages['id.verification.account.name.radio.label'])}
@@ -68,7 +114,7 @@ function GetNameIdPanel(props) {
               inline
               onChange={() => {
                 setNameMatches(true);
-                setIdPhotoName('');
+                setIdPhotoName(null);
               }}
             />
             <Form.Check
@@ -93,19 +139,15 @@ function GetNameIdPanel(props) {
             size="lg"
             type="text"
             ref={nameInputRef}
-            readOnly={nameMatches}
+            readOnly={nameMatches || profileDataManager}
             isInvalid={invalidName || blankName}
             aria-describedby="photo-id-name-feedback"
-            value={
-              !nameMatches ?
-                idPhotoName || nameOnAccountValue
-                : nameOnAccountValue
-            }
+            value={getNameValue()}
             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'])}
+            {getErrorMessage()}
           </Form.Control.Feedback>
         </Form.Group>
       </Form>
@@ -118,8 +160,8 @@ function GetNameIdPanel(props) {
           aria-disabled={invalidName || blankName}
         >
           {
-            !nameMatches ?
-              props.intl.formatMessage(messages['id.verification.account.name.save'])
+            !nameMatches
+              ? props.intl.formatMessage(messages['id.verification.account.name.save'])
               : props.intl.formatMessage(messages['id.verification.next'])
           }
         </Link>

src/id-verification/panels/IdContextPanel.jsx

@@ -6,6 +6,7 @@ import { useNextPanelSlug } from '../routing-utilities';
 import BasePanel from './BasePanel';
 import CameraHelp from '../CameraHelp';
 import messages from '../IdVerification.messages';
+import exampleCard from '../assets/example-card.png';
 
 function IdContextPanel(props) {
   const panelSlug = 'id-context';
@@ -24,7 +25,7 @@ function IdContextPanel(props) {
           <p>
             {props.intl.formatMessage(messages['id.verification.photo.tips.list.description'])}
           </p>
-          <ul className="mb-0">
+          <ul>
             <li>
               {props.intl.formatMessage(messages['id.verification.id.tips.list.well.lit'])}
             </li>
@@ -32,6 +33,10 @@ function IdContextPanel(props) {
               {props.intl.formatMessage(messages['id.verification.id.tips.list.clear'])}
             </li>
           </ul>
+          <img
+            src={exampleCard}
+            alt={props.intl.formatMessage(messages['id.verification.example.card.alt'])}
+          />
         </div>
       </div>
       <CameraHelp isOpen />

src/id-verification/panels/RequestCameraAccessPanel.jsx

@@ -7,8 +7,9 @@ import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/
 
 import { useNextPanelSlug } from '../routing-utilities';
 import BasePanel from './BasePanel';
-import { IdVerificationContext, MEDIA_ACCESS } from '../IdVerificationContext';
+import IdVerificationContext, { MEDIA_ACCESS } from '../IdVerificationContext';
 import { EnableCameraDirectionsPanel } from './EnableCameraDirectionsPanel';
+import { UnsupportedCameraDirectionsPanel } from './UnsupportedCameraDirectionsPanel';
 
 import messages from '../IdVerification.messages';
 
@@ -17,7 +18,9 @@ function RequestCameraAccessPanel(props) {
   const [returnText, setReturnText] = useState('id.verification.return.dashboard');
   const panelSlug = 'request-camera-access';
   const nextPanelSlug = useNextPanelSlug(panelSlug);
-  const { tryGetUserMedia, mediaAccess, userId } = useContext(IdVerificationContext);
+  const {
+    tryGetUserMedia, mediaAccess, userId, optimizelyExperimentName,
+  } = useContext(IdVerificationContext);
   const browserName = Bowser.parse(window.navigator.userAgent).browser.name;
 
   useEffect(() => {
@@ -47,12 +50,25 @@ function RequestCameraAccessPanel(props) {
   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)) {
+    }
+    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']);
   };
 
+  const returnToDashboardLink = (
+    <a className="btn btn-primary" href={`${getConfig().LMS_BASE_URL}/${returnUrl}`}>
+      {props.intl.formatMessage(messages[returnText])}
+    </a>
+  );
+
+  const nextButtonLink = (
+    <Link to={nextPanelSlug} className="btn btn-primary" data-testid="next-button">
+      {props.intl.formatMessage(messages['id.verification.continue.upload'])}
+    </Link>
+  );
+
   return (
     <BasePanel
       name={panelSlug}
@@ -71,7 +87,7 @@ function RequestCameraAccessPanel(props) {
             />
           </p>
           <div className="action-row">
-            <button className="btn btn-primary" onClick={tryGetUserMedia}>
+            <button type="button" className="btn btn-primary" onClick={tryGetUserMedia}>
               {props.intl.formatMessage(messages['id.verification.camera.access.enable'])}
             </button>
           </div>
@@ -91,16 +107,26 @@ function RequestCameraAccessPanel(props) {
         </div>
       )}
 
-      {[MEDIA_ACCESS.UNSUPPORTED, MEDIA_ACCESS.DENIED].includes(mediaAccess) && (
+      {mediaAccess === MEDIA_ACCESS.DENIED && (
         <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>
+            {optimizelyExperimentName ? nextButtonLink : returnToDashboardLink}
+          </div>
+        </div>
+      )}
+
+      {mediaAccess === MEDIA_ACCESS.UNSUPPORTED && (
+        <div data-testid="camera-unsupported-instructions">
+          <p data-testid="camera-unsupported-failure">
+            {props.intl.formatMessage(messages['id.verification.camera.access.failure.unsupported'])}
+          </p>
+          <UnsupportedCameraDirectionsPanel browserName={browserName} intl={props.intl} />
+          <div className="action-row">
+            {optimizelyExperimentName ? nextButtonLink : returnToDashboardLink}
           </div>
         </div>
       )}

src/id-verification/panels/ReviewRequirementsPanel.jsx

@@ -1,32 +1,79 @@
 import React, { useEffect, useContext } from 'react';
 import { Link } from 'react-router-dom';
+import { getConfig } from '@edx/frontend-platform';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
+import { Alert, Hyperlink } from '@edx/paragon';
 
 import { useNextPanelSlug } from '../routing-utilities';
 import BasePanel from './BasePanel';
 
-import { IdVerificationContext } from '../IdVerificationContext';
+import IdVerificationContext from '../IdVerificationContext';
 import messages from '../IdVerification.messages';
+import exampleCard from '../assets/example-card.png';
 
 function ReviewRequirementsPanel(props) {
-  const { userId } = useContext(IdVerificationContext);
+  const {
+    userId, profileDataManager, setOptimizelyExperimentName,
+  } = useContext(IdVerificationContext);
   const panelSlug = 'review-requirements';
   const nextPanelSlug = useNextPanelSlug(panelSlug);
 
+  const getExperiments = () => {
+    const {
+      experimentVariables: {
+        experimentName = '',
+      } = {},
+    } = window;
+
+    if (experimentName) {
+      setOptimizelyExperimentName(experimentName);
+    }
+  };
+
   useEffect(() => {
     sendTrackEvent('edx.id_verification.started', {
       category: 'id_verification',
       user_id: userId,
     });
+
+    getExperiments();
   }, [userId]);
 
+  function renderManagedProfileMessage() {
+    if (!profileDataManager) {
+      return null;
+    }
+
+    return (
+      <div>
+        <Alert className="alert alert-primary" role="alert">
+          <FormattedMessage
+            id="id.verification.requirements.account.managed.alert"
+            defaultMessage="Your account settings are managed by {managerTitle}. If the name on your photo ID does not match the name on your account, please contact your {profileDataManager} administrator or {support} for help before completing the Photo Verification process."
+            description="Alert message informing the user their account data is managed by a third party."
+            values={{
+              managerTitle: <strong>{profileDataManager}</strong>,
+              profileDataManager,
+              support: (
+                <Hyperlink destination={getConfig().SUPPORT_URL} target="_blank">
+                  {props.intl.formatMessage(messages['id.verification.support'])}
+                </Hyperlink>
+              ),
+            }}
+          />
+        </Alert>
+      </div>
+    );
+  }
+
   return (
     <BasePanel
       name={panelSlug}
       title={props.intl.formatMessage(messages['id.verification.requirements.title'])}
       focusOnMount={false}
     >
+      {renderManagedProfileMessage()}
       <p>
         {props.intl.formatMessage(messages['id.verification.requirements.description'])}
       </p>
@@ -54,6 +101,10 @@ function ReviewRequirementsPanel(props) {
           </h6>
           <p className="mb-0">
             {props.intl.formatMessage(messages['id.verification.requirements.card.id.text'])}
+            <img
+              src={exampleCard}
+              alt={props.intl.formatMessage(messages['id.verification.example.card.alt'])}
+            />
           </p>
         </div>
       </div>
@@ -61,16 +112,25 @@ function ReviewRequirementsPanel(props) {
         {props.intl.formatMessage(messages['id.verification.privacy.title'])}
       </h4>
       <h6 aria-level="3">
-        {props.intl.formatMessage(messages['id.verification.privacy.need.photo.question'])}
+        {props.intl.formatMessage(
+          messages['id.verification.privacy.need.photo.question'],
+          { siteName: getConfig().SITE_NAME },
+        )}
       </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'])}
+        {props.intl.formatMessage(
+          messages['id.verification.privacy.do.with.photo.question'],
+          { siteName: getConfig().SITE_NAME },
+        )}
       </h6>
       <p>
-        {props.intl.formatMessage(messages['id.verification.privacy.do.with.photo.answer'])}
+        {props.intl.formatMessage(
+          messages['id.verification.privacy.do.with.photo.answer'],
+          { siteName: getConfig().SITE_NAME },
+        )}
       </p>
 
       <div className="action-row">

src/id-verification/panels/SubmittedPanel.jsx

@@ -1,26 +1,18 @@
-import React, { useState, useEffect, useContext } from 'react';
+import React, { 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 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,
@@ -37,10 +29,10 @@ function SubmittedPanel(props) {
       </p>
       <a
         className="btn btn-primary"
-        href={`${getConfig().LMS_BASE_URL}/${returnUrl}`}
+        href={`${getConfig().LMS_BASE_URL}/dashboard`}
         data-testid="return-button"
       >
-        {props.intl.formatMessage(messages[returnText])}
+        {props.intl.formatMessage(messages['id.verification.return.dashboard'])}
       </a>
     </BasePanel>
   );

src/id-verification/panels/SummaryPanel.jsx

@@ -1,17 +1,20 @@
-import React, { useState, useContext } from 'react';
-import { history } from '@edx/frontend-platform';
-import { Input, Button, Spinner } from '@edx/paragon';
+import React, { useState, useContext, useEffect } from 'react';
+import { getConfig, history } from '@edx/frontend-platform';
+import {
+  Alert, Hyperlink, Input, Button, Spinner,
+} 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 IdVerificationContext from '../IdVerificationContext';
 import ImagePreview from '../ImagePreview';
 
 import messages from '../IdVerification.messages';
 import CameraHelpWithUpload from '../CameraHelpWithUpload';
+import SupportedMediaTypes from '../SupportedMediaTypes';
 
 function SummaryPanel(props) {
   const panelSlug = 'summary';
@@ -19,12 +22,43 @@ function SummaryPanel(props) {
   const {
     facePhotoFile,
     idPhotoFile,
+    profileDataManager,
     nameOnAccount,
     idPhotoName,
     stopUserMedia,
+    optimizelyExperimentName,
+    setReachedSummary,
   } = useContext(IdVerificationContext);
   const nameToBeUsed = idPhotoName || nameOnAccount || '';
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submissionError, setSubmissionError] = useState(null);
+
+  useEffect(() => setReachedSummary(true), []);
+
+  function renderManagedProfileMessage() {
+    if (!profileDataManager) {
+      return null;
+    }
+
+    return (
+      <p id="profile-manager-warning">
+        <FormattedMessage
+          id="id.verification.account.name.summary.alert"
+          defaultMessage="Your account settings are managed by {managerTitle}. If the name on your photo ID does not match the name on your account, please contact your {profileDataManager} administrator or {support} for help."
+          description="Alert message informing the user their account data is managed by a third party."
+          values={{
+            managerTitle: <strong>{profileDataManager}</strong>,
+            profileDataManager,
+            support: (
+              <Hyperlink destination={getConfig().SUPPORT_URL} target="_blank">
+                {props.intl.formatMessage(messages['id.verification.support'])}
+              </Hyperlink>
+            ),
+          }}
+        />
+      </p>
+    );
+  }
 
   function SubmitButton() {
     async function handleClick() {
@@ -32,18 +66,26 @@ function SummaryPanel(props) {
       const verificationData = {
         facePhotoFile,
         idPhotoFile,
-        idPhotoName: nameToBeUsed,
         courseRunKey: sessionStorage.getItem('courseRunKey'),
       };
+      if (idPhotoName) {
+        verificationData.idPhotoName = idPhotoName;
+      }
+      if (optimizelyExperimentName) {
+        verificationData.optimizelyExperimentName = optimizelyExperimentName;
+      }
       const result = await submitIdVerification(verificationData);
       if (result.success) {
         stopUserMedia();
         history.push(nextPanelSlug);
+      } else {
+        stopUserMedia();
+        setIsSubmitting(false);
+        setSubmissionError(result);
       }
     }
     return (
       <Button
-        className="btn btn-primary"
         title="Confirmation"
         disabled={isSubmitting}
         onClick={handleClick}
@@ -54,17 +96,69 @@ function SummaryPanel(props) {
     );
   }
 
+  function getError() {
+    if (submissionError.status === 400) {
+      if (submissionError.message.includes('face_image')) {
+        return props.intl.formatMessage(messages['id.verification.submission.alert.error.face']);
+      }
+      if (submissionError.message.includes('Photo ID image')) {
+        return props.intl.formatMessage(messages['id.verification.submission.alert.error.id']);
+      }
+      if (submissionError.message.includes('Name')) {
+        return props.intl.formatMessage(messages['id.verification.submission.alert.error.name']);
+      }
+      if (submissionError.message.includes('unsupported format')) {
+        return (
+          <>
+            {props.intl.formatMessage(messages['id.verification.submission.alert.error.unsupported'])}
+            <SupportedMediaTypes />
+          </>
+        );
+      }
+    }
+    return (
+      <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'],
+                { siteName: getConfig().SITE_NAME },
+              )}
+            </Alert.Link>
+          ),
+        }}
+      />
+    );
+  }
+
   return (
     <BasePanel
       name={panelSlug}
       title={props.intl.formatMessage(messages['id.verification.review.title'])}
     >
+      {submissionError && (
+        <Alert
+          variant="danger"
+          data-testid="submission-error"
+          dismissible
+          onClose={() => setSubmissionError(null)}
+        >
+          {getError()}
+        </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">
+          <label htmlFor="photo-of-face" className="font-weight-bold">
             {props.intl.formatMessage(messages['id.verification.review.portrait.label'])}
           </label>
           <ImagePreview
@@ -84,7 +178,7 @@ function SummaryPanel(props) {
           </Link>
         </div>
         <div className="col-6">
-          <label htmlFor="photo-of-id/edit">
+          <label htmlFor="photo-of-id/edit" className="font-weight-bold">
             {props.intl.formatMessage(messages['id.verification.review.id.label'])}
           </label>
           <ImagePreview
@@ -104,11 +198,12 @@ function SummaryPanel(props) {
           </Link>
         </div>
       </div>
-      <CameraHelpWithUpload />
+      {!optimizelyExperimentName && <CameraHelpWithUpload />}
       <div className="form-group">
-        <label htmlFor="name-to-be-used">
+        <label htmlFor="name-to-be-used" className="font-weight-bold">
           {props.intl.formatMessage(messages['id.verification.account.name.label'])}
         </label>
+        {renderManagedProfileMessage()}
         <div className="d-flex">
           <Input
             id="name-to-be-used"
@@ -116,24 +211,26 @@ function SummaryPanel(props) {
             readOnly
             value={nameToBeUsed}
             onChange={() => {}}
+            aria-describedby={profileDataManager ? 'profile-manager-warning' : null}
           />
-
-          <Link
-            className="btn btn-link ml-3 px-0"
-            to={{
+          {!profileDataManager && (
+            <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>
+            >
+              <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 />{' '}

src/id-verification/panels/TakeIdPhotoPanel.jsx

@@ -5,28 +5,49 @@ 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 IdVerificationContext from '../IdVerificationContext';
 
 import messages from '../IdVerification.messages';
 import CameraHelp from '../CameraHelp';
+import ImagePreview from '../ImagePreview';
+import ImageFileUpload from '../ImageFileUpload';
+import CollapsibleImageHelp from '../CollapsibleImageHelp';
+import SupportedMediaTypes from '../SupportedMediaTypes';
 
 function TakeIdPhotoPanel(props) {
   const panelSlug = 'take-id-photo';
   const nextPanelSlug = useNextPanelSlug(panelSlug);
-  const { setIdPhotoFile, idPhotoFile } = useContext(IdVerificationContext);
+  const {
+    setIdPhotoFile, idPhotoFile, optimizelyExperimentName, shouldUseCamera,
+  } = useContext(IdVerificationContext);
 
   return (
     <BasePanel
       name={panelSlug}
-      title={props.intl.formatMessage(messages['id.verification.id.photo.title.camera'])}
+      title={shouldUseCamera ? props.intl.formatMessage(messages['id.verification.id.photo.title.camera']) : props.intl.formatMessage(messages['id.verification.id.photo.title.upload'])}
     >
       <div>
-        <p>
-          {props.intl.formatMessage(messages['id.verification.id.photo.instructions.camera'])}
-        </p>
-        <Camera onImageCapture={setIdPhotoFile} />
+        {idPhotoFile && !shouldUseCamera && <ImagePreview src={idPhotoFile} alt={props.intl.formatMessage(messages['id.verification.id.photo.preview.alt'])} />}
+
+        {shouldUseCamera ? (
+          <div>
+            <p>
+              {props.intl.formatMessage(messages['id.verification.id.photo.instructions.camera'])}
+            </p>
+            <Camera onImageCapture={setIdPhotoFile} isPortrait={false} />
+          </div>
+        ) : (
+          <div style={{ marginBottom: '1.25rem' }}>
+            <p data-testid="upload-text">
+              {props.intl.formatMessage(messages['id.verification.id.photo.instructions.upload'])}
+              <SupportedMediaTypes />
+            </p>
+            <ImageFileUpload onFileChange={setIdPhotoFile} intl={props.intl} />
+          </div>
+        )}
       </div>
-      <CameraHelp />
+      {shouldUseCamera && !optimizelyExperimentName && <CameraHelp />}
+      <CollapsibleImageHelp isPortrait={false} />
       <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'])}

src/id-verification/panels/TakePortraitPhotoPanel.jsx

@@ -8,17 +8,18 @@ import ImageFileUpload from '../ImageFileUpload';
 import ImagePreview from '../ImagePreview';
 import Camera from '../Camera';
 import CameraHelp from '../CameraHelp';
-import { IdVerificationContext } from '../IdVerificationContext';
+import IdVerificationContext from '../IdVerificationContext';
 
 import messages from '../IdVerification.messages';
+import CollapsibleImageHelp from '../CollapsibleImageHelp';
+import SupportedMediaTypes from '../SupportedMediaTypes';
 
 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;
+  const {
+    setFacePhotoFile, facePhotoFile, shouldUseCamera, optimizelyExperimentName,
+  } = useContext(IdVerificationContext);
 
   return (
     <BasePanel
@@ -33,18 +34,20 @@ function TakePortraitPhotoPanel(props) {
             <p>
               {props.intl.formatMessage(messages['id.verification.portrait.photo.instructions.camera'])}
             </p>
-            <Camera onImageCapture={setFacePhotoFile} />
+            <Camera onImageCapture={setFacePhotoFile} isPortrait />
           </div>
         ) : (
-          <div>
-            <p>
+          <div style={{ marginBottom: '1.25rem' }}>
+            <p data-testid="upload-text">
               {props.intl.formatMessage(messages['id.verification.portrait.photo.instructions.upload'])}
+              <SupportedMediaTypes />
             </p>
-            <ImageFileUpload onFileChange={setFacePhotoFile} />
+            <ImageFileUpload onFileChange={setFacePhotoFile} intl={props.intl} />
           </div>
         )}
       </div>
-      {shouldUseCamera && <CameraHelp isPortrait />}
+      {shouldUseCamera && !optimizelyExperimentName && <CameraHelp isPortrait />}
+      <CollapsibleImageHelp 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'])}

src/id-verification/panels/UnsupportedCameraDirectionsPanel.jsx

@@ -0,0 +1,21 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import messages from '../IdVerification.messages';
+
+export function UnsupportedCameraDirectionsPanel(props) {
+  return (
+    <>
+      {props.browserName === 'Chrome' && <span>{props.intl.formatMessage(messages['id.verification.camera.access.failure.unsupported.chrome.explanation'])}</span>}
+      <span> </span>
+      <span>{props.intl.formatMessage(messages['id.verification.camera.access.failure.unsupported.instructions'])}</span>
+    </>
+  );
+}
+
+UnsupportedCameraDirectionsPanel.propTypes = {
+  intl: intlShape.isRequired,
+  browserName: PropTypes.string.isRequired,
+};
+
+export default injectIntl(UnsupportedCameraDirectionsPanel);

src/id-verification/routing-utilities.js

@@ -1,26 +1,80 @@
 import { useContext } from 'react';
 import { useLocation } from 'react-router-dom';
-import { IdVerificationContext } from './IdVerificationContext';
+import IdVerificationContext, { MEDIA_ACCESS } from './IdVerificationContext';
+
+const SLUGS = {
+  REVIEW_REQUIREMENTS: 'review-requirements',
+  CHOOSE_MODE: 'choose-mode',
+  REQUEST_CAMERA_ACCESS: 'request-camera-access',
+  PORTRAIT_PHOTO_CONTEXT: 'portrait-photo-context',
+  TAKE_PORTRAIT_PHOTO: 'take-portrait-photo',
+  ID_CONTEXT: 'id-context',
+  TAKE_ID_PHOTO: 'take-id-photo',
+  GET_NAME_ID: 'get-name-id',
+  SUMMARY: 'summary',
+  SUBMITTED: 'submitted',
+};
 
 const panelSteps = [
-  'review-requirements',
-  'request-camera-access',
-  'portrait-photo-context',
-  'take-portrait-photo',
-  'id-context',
-  'take-id-photo',
-  'get-name-id',
-  'summary',
-  'submitted',
+  SLUGS.REVIEW_REQUIREMENTS,
+  SLUGS.CHOOSE_MODE,
+  SLUGS.REQUEST_CAMERA_ACCESS,
+  SLUGS.PORTRAIT_PHOTO_CONTEXT,
+  SLUGS.TAKE_PORTRAIT_PHOTO,
+  SLUGS.ID_CONTEXT,
+  SLUGS.TAKE_ID_PHOTO,
+  SLUGS.GET_NAME_ID,
+  SLUGS.SUMMARY,
+  SLUGS.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 isFromPortrait = location.state && location.state.fromPortraitCapture;
+  const isFromId = location.state && location.state.fromIdCapture;
+  const {
+    mediaAccess,
+    optimizelyExperimentName,
+    reachedSummary,
+    shouldUseCamera,
+  } = useContext(IdVerificationContext);
+
+  const canRerouteToSummary = [
+    SLUGS.TAKE_PORTRAIT_PHOTO,
+    SLUGS.TAKE_ID_PHOTO,
+    SLUGS.GET_NAME_ID,
+  ];
+
+  if (reachedSummary && canRerouteToSummary.includes(originSlug)) {
+    return SLUGS.SUMMARY;
+  }
+
+  // the following are used as part of an A/B experiment
+  if (isFromPortrait) {
+    if (mediaAccess === MEDIA_ACCESS.GRANTED) {
+      return SLUGS.PORTRAIT_PHOTO_CONTEXT;
+    }
+    return SLUGS.TAKE_PORTRAIT_PHOTO;
+  }
+  if (isFromId) {
+    if (mediaAccess === MEDIA_ACCESS.GRANTED) {
+      return SLUGS.ID_CONTEXT;
+    }
+    return SLUGS.TAKE_ID_PHOTO;
+  }
+  if (originSlug === SLUGS.REVIEW_REQUIREMENTS && !optimizelyExperimentName) {
+    return SLUGS.REQUEST_CAMERA_ACCESS;
+  }
+  if (originSlug === SLUGS.CHOOSE_MODE && !shouldUseCamera) {
+    return SLUGS.TAKE_PORTRAIT_PHOTO;
+  }
+  if (originSlug === SLUGS.TAKE_PORTRAIT_PHOTO && !shouldUseCamera) {
+    return SLUGS.TAKE_ID_PHOTO;
+  }
+  if (originSlug === SLUGS.REQUEST_CAMERA_ACCESS && mediaAccess !== MEDIA_ACCESS.GRANTED) {
+    return SLUGS.TAKE_PORTRAIT_PHOTO;
   }
 
   const nextIndex = panelSteps.indexOf(originSlug) + 1;
@@ -30,16 +84,18 @@ export const useNextPanelSlug = (originSlug) => {
 // 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 { facePhotoFile, idPhotoFile, optimizelyExperimentName } = useContext(IdVerificationContext);
   const indexOfCurrentPanel = panelSteps.indexOf(slug);
-
+  if (!optimizelyExperimentName && slug === SLUGS.CHOOSE_MODE) {
+    return SLUGS.REVIEW_REQUIREMENTS;
+  }
   if (!facePhotoFile) {
-    if (indexOfCurrentPanel > panelSteps.indexOf('take-portrait-photo')) {
-      return 'portrait-photo-context';
+    if (indexOfCurrentPanel > panelSteps.indexOf(SLUGS.TAKE_PORTRAIT_PHOTO)) {
+      return SLUGS.PORTRAIT_PHOTO_CONTEXT;
     }
   } else if (!idPhotoFile) {
-    if (indexOfCurrentPanel > panelSteps.indexOf('take-id-photo')) {
-      return 'id-context';
+    if (indexOfCurrentPanel > panelSteps.indexOf(SLUGS.TAKE_ID_PHOTO)) {
+      return SLUGS.ID_CONTEXT;
     }
   }
 

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

@@ -1,33 +1,37 @@
 import React from 'react';
 import { Router } from 'react-router-dom';
 import { createMemoryHistory } from 'history';
-import { render, cleanup, act, screen } from '@testing-library/react';
+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);
+import { ERROR_REASONS } from '../IdVerificationContext';
+import AccessBlocked from '../AccessBlocked';
+
+const IntlAccessBlocked = injectIntl(AccessBlocked);
 
 const history = createMemoryHistory();
 
-describe('ExistingRequest', () => {
+describe('AccessBlocked', () => {
   const defaultProps = {
     intl: {},
-    status: '',
+    error: '',
   };
 
   afterEach(() => {
     cleanup();
   });
 
-  it('renders correctly when status is pending', async () => {
-    defaultProps.status = 'pending';
+  it('renders correctly when there is an existing request', async () => {
+    defaultProps.error = ERROR_REASONS.EXISTING_REQUEST;
 
     await act(async () => render((
       <Router history={history}>
         <IntlProvider locale="en">
-          <IntlExistingRequest {...defaultProps} />
+          <IntlAccessBlocked {...defaultProps} />
         </IntlProvider>
       </Router>
     )));
@@ -37,29 +41,29 @@ describe('ExistingRequest', () => {
     expect(text).toBeInTheDocument();
   });
 
-  it('renders correctly when status is approved', async () => {
-    defaultProps.status = 'approved';
+  it('renders correctly when learner is not enrolled in a verified course mode', async () => {
+    defaultProps.error = ERROR_REASONS.COURSE_ENROLLMENT;
 
     await act(async () => render((
       <Router history={history}>
         <IntlProvider locale="en">
-          <IntlExistingRequest {...defaultProps} />
+          <IntlAccessBlocked {...defaultProps} />
         </IntlProvider>
       </Router>
     )));
 
-    const text = screen.getByText(/You have already submitted your verification information./);
+    const text = screen.getByText(/You are not currently enrolled in a course that requires identity verification./);
 
     expect(text).toBeInTheDocument();
   });
 
   it('renders correctly when status is denied', async () => {
-    defaultProps.status = 'denied';
+    defaultProps.error = ERROR_REASONS.CANNOT_VERIFY;
 
     await act(async () => render((
       <Router history={history}>
         <IntlProvider locale="en">
-          <IntlExistingRequest {...defaultProps} />
+          <IntlAccessBlocked {...defaultProps} />
         </IntlProvider>
       </Router>
     )));

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

@@ -2,12 +2,21 @@ 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 {
+  render, cleanup, screen, act, fireEvent,
+} from '@testing-library/react';
 import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
-import { IdVerificationContext } from '../IdVerificationContext';
+// eslint-disable-next-line import/no-unresolved
+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 = () => {};
 
@@ -19,6 +28,13 @@ describe('SubmittedPanel', () => {
   const defaultProps = {
     intl: {},
     onImageCapture: jest.fn(),
+    isPortrait: true,
+  };
+
+  const idProps = {
+    intl: {},
+    onImageCapture: jest.fn(),
+    isPortrait: false,
   };
 
   const contextValue = {};
@@ -42,4 +58,130 @@ describe('SubmittedPanel', () => {
     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/CollapsibleImageHelp.test.jsx

@@ -0,0 +1,153 @@
+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 analytics from '@edx/frontend-platform/analytics';
+import IdVerificationContext from '../IdVerificationContext';
+import CollapsibleImageHelp from '../CollapsibleImageHelp';
+
+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 IntlCollapsible = injectIntl(CollapsibleImageHelp);
+
+const history = createMemoryHistory();
+
+describe('CollapsibleImageHelpPanel', () => {
+  const defaultProps = {
+    intl: {},
+    isPortrait: true,
+  };
+
+  const contextValue = {
+    shouldUseCamera: true,
+    setShouldUseCamera: jest.fn(),
+    optimizelyExperimentName: '',
+    mediaAccess: 'granted',
+  };
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('does not return if not part of experiment', async () => {
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlCollapsible {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+
+    const titleText = screen.queryByText('Upload a Photo Instead');
+    expect(titleText).not.toBeInTheDocument();
+  });
+
+  it('does not return if media access denied or unsupported', async () => {
+    let titleText = '';
+    contextValue.mediaAccess = 'denied';
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlCollapsible {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+
+    titleText = screen.queryByText('Upload a Photo Instead');
+    expect(titleText).not.toBeInTheDocument();
+
+    contextValue.mediaAccess = 'unsupported';
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlCollapsible {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+
+    titleText = screen.queryByText('Upload a Photo Instead');
+    expect(titleText).not.toBeInTheDocument();
+  });
+
+  it('shows the correct text if user should switch to upload', async () => {
+    contextValue.optimizelyExperimentName = 'test';
+    contextValue.mediaAccess = 'granted';
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlCollapsible {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+
+    const titleText = screen.getByText('Upload a Photo Instead');
+    expect(titleText).toBeInTheDocument();
+    const helpText = screen.getByTestId('help-text');
+    expect(helpText.textContent).toContain('If you are having trouble using the photo capture above');
+    const button = screen.getByTestId('toggle-button');
+    expect(button).toHaveTextContent('Switch to Upload Mode');
+  });
+
+  it('shows the correct text if user should switch to camera', async () => {
+    contextValue.optimizelyExperimentName = 'test';
+    contextValue.mediaAccess = 'granted';
+    contextValue.shouldUseCamera = false;
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlCollapsible {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+
+    const titleText = screen.getByText('Use Your Camera Instead');
+    expect(titleText).toBeInTheDocument();
+    const helpText = screen.getByTestId('help-text');
+    expect(helpText.textContent).toContain('If you are having trouble uploading a photo above');
+    const button = screen.getByTestId('toggle-button');
+    expect(button).toHaveTextContent('Switch to Camera Mode');
+  });
+
+  it('shows the correct text if user should switch to camera with pending media access', async () => {
+    contextValue.optimizelyExperimentName = 'test';
+    contextValue.mediaAccess = 'pending';
+    contextValue.shouldUseCamera = false;
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlCollapsible {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+
+    const titleText = screen.getByText('Use Your Camera Instead');
+    expect(titleText).toBeInTheDocument();
+    const helpText = screen.getByTestId('help-text');
+    expect(helpText.textContent).toContain('If you are having trouble uploading a photo above');
+    const accessLink = screen.getByTestId('access-link');
+    fireEvent.click(accessLink);
+    expect(history.location.pathname).toEqual('/request-camera-access');
+  });
+});

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

@@ -1,33 +0,0 @@
-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/IdVerificationContextProvider.test.jsx

@@ -0,0 +1,65 @@
+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 { getProfileDataManager } from '../../account-settings/data/service';
+
+import { getExistingIdVerification, getEnrollments } from '../data/service';
+import IdVerificationContextProvider from '../IdVerificationContextProvider';
+
+jest.mock('../../account-settings/data/service', () => ({
+  getProfileDataManager: jest.fn(),
+}));
+
+jest.mock('../data/service', () => ({
+  getExistingIdVerification: jest.fn(),
+  getEnrollments: jest.fn(() => []),
+}));
+
+describe('IdVerificationContextProvider', () => {
+  const defaultProps = {
+    children: <div />,
+    intl: {},
+  };
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('renders correctly and calls getExistingIdVerification + getEnrollments', async () => {
+    const context = { authenticatedUser: { userId: 3, roles: [] } };
+    await act(async () => render((
+      <AppContext.Provider value={context}>
+        <IntlProvider locale="en">
+          <IdVerificationContextProvider {...defaultProps} />
+        </IntlProvider>
+      </AppContext.Provider>
+    )));
+    expect(getExistingIdVerification).toHaveBeenCalled();
+    expect(getEnrollments).toHaveBeenCalled();
+  });
+
+  it('calls getProfileDataManager if the user has any roles', async () => {
+    const context = {
+      authenticatedUser: {
+        userId: 3,
+        username: 'testname',
+        roles: ['enterprise_learner'],
+      },
+    };
+    await act(async () => render((
+      <AppContext.Provider value={context}>
+        <IntlProvider locale="en">
+          <IdVerificationContextProvider {...defaultProps} />
+        </IntlProvider>
+      </AppContext.Provider>
+    )));
+    expect(getProfileDataManager).toHaveBeenCalledWith(
+      context.authenticatedUser.username,
+      context.authenticatedUser.roles,
+    );
+  });
+});

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

@@ -0,0 +1,81 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import { Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+import configureStore from 'redux-mock-store';
+import { render, act } from '@testing-library/react';
+import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
+
+import IdVerificationPage from '../IdVerificationPage';
+import * as selectors from '../data/selectors';
+
+jest.mock('../data/selectors', () => jest.fn().mockImplementation(() => ({ idVerificationSelector: () => ({}) })));
+jest.mock('../IdVerificationContextProvider', () => jest.fn(({ children }) => children));
+jest.mock('../panels/ReviewRequirementsPanel');
+jest.mock('../panels/RequestCameraAccessPanel');
+jest.mock('../panels/PortraitPhotoContextPanel');
+jest.mock('../panels/TakePortraitPhotoPanel');
+jest.mock('../panels/IdContextPanel');
+jest.mock('../panels/GetNameIdPanel');
+jest.mock('../panels/TakeIdPhotoPanel');
+jest.mock('../panels/SummaryPanel');
+jest.mock('../panels/SubmittedPanel');
+
+const IntlIdVerificationPage = injectIntl(IdVerificationPage);
+
+const mockStore = configureStore();
+const history = createMemoryHistory();
+
+describe('IdVerificationPage', () => {
+  selectors.mockClear();
+  jest.spyOn(Storage.prototype, 'setItem');
+  const store = mockStore();
+  const props = {
+    intl: {},
+  };
+
+  it('does not store irrelevant query params', async () => {
+    history.push('/?test=irrelevant');
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <Provider store={store}>
+            <IntlIdVerificationPage {...props} />
+          </Provider>
+        </IntlProvider>
+      </Router>
+    )));
+    expect(sessionStorage.setItem).toHaveBeenCalledTimes(0);
+  });
+
+  it('does not store empty course_id', async () => {
+    history.push('/?course_id=');
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <Provider store={store}>
+            <IntlIdVerificationPage {...props} />
+          </Provider>
+        </IntlProvider>
+      </Router>
+    )));
+    expect(sessionStorage.setItem).toHaveBeenCalledTimes(0);
+  });
+
+  it('decodes and stores course_id', async () => {
+    history.push('/?course_id=course-v1%3AedX%2BDemoX%2BDemo_Course');
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <Provider store={store}>
+            <IntlIdVerificationPage {...props} />
+          </Provider>
+        </IntlProvider>
+      </Router>
+    )));
+    expect(sessionStorage.setItem).toHaveBeenCalledWith(
+      'courseRunKey',
+      'course-v1:edX+DemoX+Demo_Course',
+    );
+  });
+});

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

@@ -0,0 +1,111 @@
+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 ChooseModePanel from '../../panels/ChooseModePanel';
+
+jest.mock('@edx/frontend-platform/analytics', () => ({
+  sendTrackEvent: jest.fn(),
+}));
+
+const IntlChooseModePanel = injectIntl(ChooseModePanel);
+
+const history = createMemoryHistory();
+
+describe('ChooseModePanel', () => {
+  const defaultProps = {
+    intl: {},
+  };
+
+  const contextValue = {
+    optimizelyExperimentName: 'test',
+    shouldUseCamera: false,
+    reachedSummary: false,
+  };
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('renders correctly', async () => {
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlChooseModePanel {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+
+    // check that radio button for upload is selected
+    const uploadRadioButton = await screen.findByLabelText('Upload photos from my device');
+    expect(uploadRadioButton).toBeChecked();
+
+    // check that if upload is selected, next button goes to correct screen
+    const nextButton = await screen.findByTestId('next-button');
+    expect(nextButton.getAttribute('href')).toEqual('/take-portrait-photo');
+  });
+
+  it('renders correctly if user wants to use camera', async () => {
+    contextValue.shouldUseCamera = true;
+
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlChooseModePanel {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+
+    // check that radio button for camera is selected
+    const cameraRadioButton = await screen.findByLabelText('Take pictures using my camera');
+    expect(cameraRadioButton).toBeChecked();
+
+    // check that if upload is selected, next button goes to correct screen
+    const nextButton = await screen.findByTestId('next-button');
+    expect(nextButton.getAttribute('href')).toEqual('/request-camera-access');
+  });
+
+  it('reroutes correctly if reachedSummary is true', async () => {
+    contextValue.shouldUseCamera = true;
+    contextValue.reachedSummary = true;
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlChooseModePanel {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+    const nextButton = await screen.findByTestId('next-button');
+    fireEvent.click(nextButton);
+    expect(history.location.pathname).toEqual('/request-camera-access');
+  });
+
+  it('redirects if user is not part of experiment', async () => {
+    contextValue.optimizelyExperimentName = '';
+
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlChooseModePanel {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+
+    // check that radio button is not in document
+    const cameraRadioButton = await screen.queryByLabelText('Take pictures using my camera');
+    expect(cameraRadioButton).not.toBeInTheDocument();
+  });
+});

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

@@ -1,10 +1,12 @@
 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 {
+  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 IdVerificationContext from '../../IdVerificationContext';
 import GetNameIdPanel from '../../panels/GetNameIdPanel';
 
 jest.mock('@edx/frontend-platform/analytics', () => ({
@@ -29,11 +31,7 @@ describe('GetNameIdPanel', () => {
     idPhotoFile: 'test.jpg',
   };
 
-  afterEach(() => {
-    cleanup();
-  });
-
-  it('edits', async () => {
+  const getPanel = async () => {
     await act(async () => render((
       <Router history={history}>
         <IntlProvider locale="en">
@@ -43,16 +41,29 @@ describe('GetNameIdPanel', () => {
         </IntlProvider>
       </Router>
     )));
+  };
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('edits', async () => {
+    await getPanel();
+
     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();
@@ -60,36 +71,39 @@ describe('GetNameIdPanel', () => {
 
   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>
-    )));
+    await getPanel();
+
     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('blocks the user from changing account name if managed by a third party', async () => {
+    contextValue.profileDataManager = 'test-org';
+    await getPanel();
+
+    const noButton = await screen.findByTestId('name-matches-no');
+    const input = await screen.findByTestId('name-input');
+    const nextButton = await screen.findByTestId('next-button');
+
+    fireEvent.click(noButton);
+    expect(input).toHaveProperty('readOnly');
+    expect(nextButton.classList.contains('disabled')).toBe(true);
+    const warning = await screen.getAllByText('test-org');
+    expect(warning.length).toEqual(1);
+  });
+
   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>
-    )));
+    await getPanel();
+
     const button = await screen.findByTestId('next-button');
+
     fireEvent.click(button);
     expect(history.location.pathname).toEqual('/summary');
   });

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

@@ -1,10 +1,13 @@
 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 {
+  render, cleanup, act, screen, fireEvent,
+} 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 { IdVerificationContext } from '../../IdVerificationContext';
+import IdVerificationContext from '../../IdVerificationContext';
 import IdContextPanel from '../../panels/IdContextPanel';
 
 jest.mock('@edx/frontend-platform/analytics', () => ({
@@ -21,14 +24,16 @@ describe('IdContextPanel', () => {
   };
 
   const contextValue = {
+    optimizelyExperimentName: '',
     facePhotoFile: 'test.jpg',
+    reachedSummary: false,
   };
 
   afterEach(() => {
     cleanup();
   });
 
-  it('routes to TakeIdPhotoPanel', async () => {
+  it('routes to TakeIdPhotoPanel normally', async () => {
     await act(async () => render((
       <Router history={history}>
         <IntlProvider locale="en">
@@ -42,4 +47,49 @@ describe('IdContextPanel', () => {
     fireEvent.click(button);
     expect(history.location.pathname).toEqual('/take-id-photo');
   });
+
+  it('routes to TakeIdPhotoPanel if reachedSummary is true', async () => {
+    contextValue.reachedSummary = true;
+    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');
+  });
+
+  it('does not show help text for photo upload if not part of experiment', async () => {
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlIdContextPanel {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+    const title = await screen.queryByText('What if I want to upload a photo instead?');
+    expect(title).not.toBeInTheDocument();
+  });
+
+  it('shows help text for photo upload if part of experiment', async () => {
+    contextValue.optimizelyExperimentName = 'test';
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlIdContextPanel {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+    const title = await screen.queryByText('What if I want to upload a photo instead?');
+    expect(title).toBeInTheDocument();
+  });
 });

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

@@ -1,10 +1,14 @@
 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 {
+  render, cleanup, act, screen, fireEvent,
+} 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 PortraitPhotoContextPanel from '../../panels/PortraitPhotoContextPanel';
+import IdVerificationContext from '../../IdVerificationContext';
 
 jest.mock('@edx/frontend-platform/analytics', () => ({
   sendTrackEvent: jest.fn(),
@@ -19,15 +23,22 @@ describe('PortraitPhotoContextPanel', () => {
     intl: {},
   };
 
+  const contextValue = {
+    optimizelyExperimentName: '',
+    reachedSummary: false,
+  };
+
   afterEach(() => {
     cleanup();
   });
 
-  it('routes to TakePortraitPhotoPanel', async () => {
+  it('routes to TakePortraitPhotoPanel normally', async () => {
     await act(async () => render((
       <Router history={history}>
         <IntlProvider locale="en">
-          <IntlPortraitPhotoContextPanel {...defaultProps} />
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlPortraitPhotoContextPanel {...defaultProps} />
+          </IdVerificationContext.Provider>
         </IntlProvider>
       </Router>
     )));
@@ -35,4 +46,49 @@ describe('PortraitPhotoContextPanel', () => {
     fireEvent.click(button);
     expect(history.location.pathname).toEqual('/take-portrait-photo');
   });
+
+  it('routes to TakePortraitPhotoPanel if reachedSummary is true', async () => {
+    contextValue.reachedSummary = true;
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlPortraitPhotoContextPanel {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+    const button = await screen.findByTestId('next-button');
+    fireEvent.click(button);
+    expect(history.location.pathname).toEqual('/take-portrait-photo');
+  });
+
+  it('does not show help text for photo upload if not part of experiment', async () => {
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlPortraitPhotoContextPanel {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+    const title = await screen.queryByText('What if I want to upload a photo instead?');
+    expect(title).not.toBeInTheDocument();
+  });
+
+  it('shows help text for photo upload if part of experiment', async () => {
+    contextValue.optimizelyExperimentName = 'test';
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={contextValue}>
+            <IntlPortraitPhotoContextPanel {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+    const title = await screen.queryByText('What if I want to upload a photo instead?');
+    expect(title).toBeInTheDocument();
+  });
 });

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

@@ -2,10 +2,12 @@ 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 {
+  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 IdVerificationContext from '../../IdVerificationContext';
 import RequestCameraAccessPanel from '../../panels/RequestCameraAccessPanel';
 
 jest.mock('@edx/frontend-platform/analytics', () => ({
@@ -24,6 +26,7 @@ describe('RequestCameraAccessPanel', () => {
   };
 
   const contextValue = {
+    reachedSummary: false,
     tryGetUserMedia: jest.fn(),
   };
 
@@ -82,8 +85,9 @@ describe('RequestCameraAccessPanel', () => {
     expect(text).toHaveTextContent(/It looks like we're unable to access your camera./);
   });
 
-  it('renders correctly with media access unsupported', async () => {
-    contextValue.mediaAccess = 'unsupported';
+  it('renders correctly with media access denied in optimizely experiment', async () => {
+    contextValue.mediaAccess = 'denied';
+    contextValue.optimizelyExperimentName = 'test';
     Bowser.parse = jest.fn().mockReturnValue({ browser: { name: '' } });
     await act(async () => render((
       <Router history={history}>
@@ -96,6 +100,44 @@ describe('RequestCameraAccessPanel', () => {
     )));
     const text = await screen.findByTestId('camera-access-failure');
     expect(text).toHaveTextContent(/It looks like we're unable to access your camera./);
+    const nextButton = await screen.findByText('Continue with Upload');
+    fireEvent.click(nextButton);
+    expect(history.location.pathname).toEqual('/take-portrait-photo');
+    contextValue.optimizelyExperimentName = '';
+  });
+
+  it('renders correctly with media access unsupported with Chrome browser', async () => {
+    contextValue.mediaAccess = 'unsupported';
+    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-unsupported-instructions');
+    expect(text).toHaveTextContent(/It looks like your browser does not support camera access./);
+    expect(text).toHaveTextContent(/The Chrome browser currently does not support camera access on iOS devices, such as iPhones and iPads./);
+  });
+
+  it('renders correctly with media access unsupported with non-Chrome browser', 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-unsupported-instructions');
+    expect(text).toHaveTextContent(/It looks like your browser does not support camera access./);
+    expect(text).not.toHaveTextContent(/The Chrome browser currently does not support camera access on iOS devices, such as iPhones and iPads./);
   });
 
   it('renders correct directions for Chrome with media access denied', async () => {
@@ -161,4 +203,124 @@ describe('RequestCameraAccessPanel', () => {
     const text = await screen.findByTestId('camera-failure-instructions');
     expect(text).toHaveTextContent(/Open the Flash Player/);
   });
+
+  it('reroutes correctly to portrait context', async () => {
+    contextValue.mediaAccess = 'granted';
+    history.location.state = { fromPortraitCapture: true };
+
+    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.findByTestId('next-button');
+    fireEvent.click(button);
+    expect(history.location.pathname).toEqual('/portrait-photo-context');
+  });
+
+  it('reroutes correctly to ID context', async () => {
+    contextValue.mediaAccess = 'granted';
+    history.location.state = { fromIdCapture: true };
+
+    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.findByTestId('next-button');
+    fireEvent.click(button);
+    expect(history.location.pathname).toEqual('/id-context');
+  });
+
+  it('reroutes to portrait context when reachedSummary is true', async () => {
+    contextValue.mediaAccess = 'granted';
+    contextValue.reachedSummary = true;
+    history.location.state = { fromPortraitCapture: true };
+
+    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.findByTestId('next-button');
+    fireEvent.click(button);
+    expect(history.location.pathname).toEqual('/portrait-photo-context');
+  });
+
+  it('reroutes to ID context when reachedSummary is true', async () => {
+    contextValue.mediaAccess = 'granted';
+    contextValue.reachedSummary = true;
+    history.location.state = { fromIdCapture: true };
+
+    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.findByTestId('next-button');
+    fireEvent.click(button);
+    expect(history.location.pathname).toEqual('/id-context');
+  });
+
+  it('reroutes correctly to portrait context with no media access', async () => {
+    contextValue.mediaAccess = 'denied';
+    contextValue.optimizelyExperimentName = 'test';
+    history.location.state = { fromPortraitCapture: true };
+
+    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.findByTestId('next-button');
+    fireEvent.click(button);
+    expect(history.location.pathname).toEqual('/take-portrait-photo');
+    contextValue.optimizelyExperimentName = '';
+  });
+
+  it('reroutes correctly to ID context with no media access', async () => {
+    contextValue.mediaAccess = 'denied';
+    contextValue.optimizelyExperimentName = 'test';
+    history.location.state = { fromIdCapture: true };
+
+    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.findByTestId('next-button');
+    fireEvent.click(button);
+    expect(history.location.pathname).toEqual('/take-id-photo');
+    contextValue.optimizelyExperimentName = '';
+  });
 });

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

@@ -1,9 +1,12 @@
 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 {
+  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 ReviewRequirementsPanel from '../../panels/ReviewRequirementsPanel';
 
 jest.mock('@edx/frontend-platform/analytics', () => ({
@@ -19,20 +22,42 @@ describe('ReviewRequirementsPanel', () => {
     intl: {},
   };
 
+  const context = { setOptimizelyExperimentName: jest.fn() };
+
+  const getPanel = async () => {
+    await act(async () => render((
+      <Router history={history}>
+        <IntlProvider locale="en">
+          <IdVerificationContext.Provider value={context}>
+            <IntlReviewRequirementsPanel {...defaultProps} />
+          </IdVerificationContext.Provider>
+        </IntlProvider>
+      </Router>
+    )));
+  };
+
   afterEach(() => {
     cleanup();
   });
 
   it('routes to RequestCameraAccessPanel', async () => {
-    await act(async () => render((
-      <Router history={history}>
-        <IntlProvider locale="en">
-          <IntlReviewRequirementsPanel {...defaultProps} />
-        </IntlProvider>
-      </Router>
-    )));
+    await getPanel();
     const button = await screen.findByTestId('next-button');
     fireEvent.click(button);
     expect(history.location.pathname).toEqual('/request-camera-access');
   });
+
+  it('updates optimizely experiment name in context', async () => {
+    window.experimentVariables = {};
+    window.experimentVariables.experimentName = 'test-experiment';
+    await getPanel();
+    expect(context.setOptimizelyExperimentName).toHaveBeenCalledWith('test-experiment');
+  });
+
+  it('displays an alert if the user\'s account information is managed by a third party', async () => {
+    context.profileDataManager = 'test-org';
+    await getPanel();
+    const alert = await screen.getAllByText('test-org');
+    expect(alert.length).toEqual(1);
+  });
 });

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

@@ -2,10 +2,12 @@ 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 {
+  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 IdVerificationContext from '../../IdVerificationContext';
 import SubmittedPanel from '../../panels/SubmittedPanel';
 
 jest.mock('@edx/frontend-platform/analytics', () => ({
@@ -47,19 +49,4 @@ describe('SubmittedPanel', () => {
     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

@@ -1,21 +1,22 @@
 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 {
+  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 { submitIdVerification } from '../../data/service';
-import { IdVerificationContext } from '../../IdVerificationContext';
+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', () => ({
-  submitIdVerification: jest.fn(() => ({ success: true, message: null })),
-}));
+jest.mock('../../data/service');
+dataService.submitIdVerification = jest.fn().mockReturnValue({ success: true });
 
 const IntlSummaryPanel = injectIntl(SummaryPanel);
 
@@ -29,12 +30,14 @@ describe('SummaryPanel', () => {
   const contextValue = {
     facePhotoFile: 'test.jpg',
     idPhotoFile: 'test.jpg',
-    nameOnAccount: '',
-    idPhotoName: '',
+    nameOnAccount: 'test name',
+    idPhotoName: 'test name',
+    optimizelyExperimentName: 'test-experiment',
     stopUserMedia: jest.fn(),
+    setReachedSummary: jest.fn(),
   };
 
-  beforeEach(async () => {
+  const getPanel = async () => {
     await act(async () => render((
       <Router history={history}>
         <IntlProvider locale="en">
@@ -44,13 +47,14 @@ describe('SummaryPanel', () => {
         </IntlProvider>
       </Router>
     )));
-  });
+  };
 
   afterEach(() => {
     cleanup();
   });
 
   it('routes back to TakePortraitPhotoPanel', async () => {
+    await getPanel();
     const button = await screen.findByTestId('portrait-retake');
     fireEvent.click(button);
     expect(history.location.pathname).toEqual('/take-portrait-photo');
@@ -58,6 +62,7 @@ describe('SummaryPanel', () => {
   });
 
   it('routes back to TakeIdPhotoPanel', async () => {
+    await getPanel();
     const button = await screen.findByTestId('id-retake');
     fireEvent.click(button);
     expect(history.location.pathname).toEqual('/take-id-photo');
@@ -65,16 +70,135 @@ describe('SummaryPanel', () => {
   });
 
   it('allows user to upload ID photo', async () => {
+    contextValue.optimizelyExperimentName = '';
+    await getPanel();
     const collapsible = await screen.getAllByRole('button', { 'aria-expanded': false })[0];
     fireEvent.click(collapsible);
     const uploadButton = await screen.getByTestId('fileUpload');
     expect(uploadButton).toBeVisible();
+    contextValue.optimizelyExperimentName = 'test-experiment';
+  });
+
+  it('displays warning if account is managed by a third party', async () => {
+    contextValue.profileDataManager = 'test-org';
+    await getPanel();
+    const warning = await screen.getAllByText('test-org');
+    expect(warning.length).toEqual(1);
   });
 
   it('submits', async () => {
+    const verificationData = {
+      facePhotoFile: contextValue.facePhotoFile,
+      idPhotoFile: contextValue.idPhotoFile,
+      idPhotoName: contextValue.idPhotoName,
+      optimizelyExperimentName: contextValue.optimizelyExperimentName,
+      courseRunKey: null,
+    };
+    await getPanel();
     const button = await screen.findByTestId('submit-button');
     fireEvent.click(button);
-    expect(submitIdVerification).toHaveBeenCalled();
-    await waitFor(() => expect(contextValue.stopUserMedia).toHaveBeenCalled())
+    expect(dataService.submitIdVerification).toHaveBeenCalledWith(verificationData);
+    await waitFor(() => expect(contextValue.stopUserMedia).toHaveBeenCalled());
+  });
+
+  it('does not submit a name if name is blank', async () => {
+    contextValue.idPhotoName = '';
+    const verificationData = {
+      facePhotoFile: contextValue.facePhotoFile,
+      idPhotoFile: contextValue.idPhotoFile,
+      optimizelyExperimentName: contextValue.optimizelyExperimentName,
+      courseRunKey: null,
+    };
+    await getPanel();
+    const button = await screen.findByTestId('submit-button');
+    fireEvent.click(button);
+    expect(dataService.submitIdVerification).toHaveBeenCalledWith(verificationData);
+  });
+
+  it('does not submit a name if name is unchanged', async () => {
+    contextValue.idPhotoName = null;
+    const verificationData = {
+      facePhotoFile: contextValue.facePhotoFile,
+      idPhotoFile: contextValue.idPhotoFile,
+      optimizelyExperimentName: contextValue.optimizelyExperimentName,
+      courseRunKey: null,
+    };
+    await getPanel();
+    const button = await screen.findByTestId('submit-button');
+    fireEvent.click(button);
+    expect(dataService.submitIdVerification).toHaveBeenCalledWith(verificationData);
+  });
+
+  it('shows error when cannot submit', async () => {
+    dataService.submitIdVerification = jest.fn().mockReturnValue({ success: false });
+    await getPanel();
+    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();
+  });
+
+  it('displays correct error for missing portrait photo', async () => {
+    dataService.submitIdVerification = jest.fn().mockReturnValue({
+      success: false,
+      status: 400,
+      message: 'Missing required parameter face_image',
+    });
+    await getPanel();
+    const button = await screen.findByTestId('submit-button');
+    await act(async () => fireEvent.click(button));
+    const error = await screen.getByTestId('submission-error');
+    expect(error).toHaveTextContent('A photo of your face is required. Please retake your portrait photo.');
+  });
+
+  it('displays correct error for missing id photo', async () => {
+    dataService.submitIdVerification = jest.fn().mockReturnValue({
+      success: false,
+      status: 400,
+      message: 'Photo ID image is required if the user does not have an initial verification attempt.',
+    });
+    await getPanel();
+    const button = await screen.findByTestId('submit-button');
+    await act(async () => fireEvent.click(button));
+    const error = await screen.getByTestId('submission-error');
+    expect(error).toHaveTextContent('A photo of your ID card is required. Please retake your ID photo.');
+  });
+
+  it('displays correct error for missing account name', async () => {
+    dataService.submitIdVerification = jest.fn().mockReturnValue({
+      success: false,
+      status: 400,
+      message: 'Name must be at least 1 character long.',
+    });
+    await getPanel();
+    const button = await screen.findByTestId('submit-button');
+    await act(async () => fireEvent.click(button));
+    const error = await screen.getByTestId('submission-error');
+    expect(error).toHaveTextContent(
+      'A valid account name is required. Please update your account name to match the name on your ID.',
+    );
+  });
+
+  it('displays correct error for unsupported file type', async () => {
+    dataService.submitIdVerification = jest.fn().mockReturnValue({
+      success: false,
+      status: 400,
+      message: 'Image data is in an unsupported format.',
+    });
+    await getPanel();
+    const button = await screen.findByTestId('submit-button');
+    await act(async () => fireEvent.click(button));
+    const error = await screen.getByTestId('submission-error');
+    expect(error).toHaveTextContent(
+      'One or more of the files you have uploaded is in an unsupported format. Please choose from the following:',
+    );
+  });
+
+  it('does not show ID upload option if user is in experiment', async () => {
+    await getPanel();
+    const collapsible = await screen.queryByTestId('collapsible');
+    expect(collapsible).not.toBeInTheDocument();
+    contextValue.optimizelyExperimentName = 'test-experiment';
   });
 });