feat: add warning helptext to name fields after verification failure

fix: approved alert should appear for subsequent approved attempts

.env

@@ -1,25 +1,27 @@
-ACCESS_TOKEN_COOKIE_NAME=null
-BASE_URL=null
-CREDENTIALS_BASE_URL=null
-CSRF_TOKEN_API_PATH=null
-ECOMMERCE_BASE_URL=null
-LANGUAGE_PREFERENCE_COOKIE_NAME=null
-LMS_BASE_URL=null
-DEMOGRAPHICS_BASE_URL=null
-LOGIN_URL=null
-LOGOUT_URL=null
-MARKETING_SITE_BASE_URL=null
-NODE_ENV=null
-ORDER_HISTORY_URL=null
-REFRESH_ACCESS_TOKEN_ENDPOINT=null
-SEGMENT_KEY=null
-SITE_NAME=''
-SUPPORT_URL=null
-USER_INFO_COOKIE_NAME=null
-LOGO_URL=''
-LOGO_TRADEMARK_URL=''
-LOGO_WHITE_URL=''
+ACCESS_TOKEN_COOKIE_NAME=''
+BASE_URL=''
+COACHING_ENABLED=''
+CREDENTIALS_BASE_URL=''
+CSRF_TOKEN_API_PATH=''
+DEMOGRAPHICS_BASE_URL=''
+DISCOVERY_API_BASE_URL=''
+ECOMMERCE_BASE_URL=''
+ENABLE_DEMOGRAPHICS_COLLECTION=''
 FAVICON_URL=''
-PUBLISHER_BASE_URL=
-STUDIO_BASE_URL=
-DISCOVERY_API_BASE_URL=
+LANGUAGE_PREFERENCE_COOKIE_NAME=''
+LMS_BASE_URL=''
+LOGIN_URL=''
+LOGO_TRADEMARK_URL=''
+LOGO_URL=''
+LOGO_WHITE_URL=''
+LOGOUT_URL=''
+MARKETING_SITE_BASE_URL=''
+NODE_ENV=''
+ORDER_HISTORY_URL=''
+PUBLISHER_BASE_URL=''
+REFRESH_ACCESS_TOKEN_ENDPOINT=''
+SEGMENT_KEY=''
+SITE_NAME=''
+STUDIO_BASE_URL=''
+SUPPORT_URL=''
+USER_INFO_COOKIE_NAME=''

.env.development

@@ -1,29 +1,28 @@
 ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'
 BASE_URL='localhost:1997'
+COACHING_ENABLED=''
 CREDENTIALS_BASE_URL='http://localhost:18150'
 CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
+DEMOGRAPHICS_BASE_URL='http://localhost:18360'
+DISCOVERY_API_BASE_URL=''
 ECOMMERCE_BASE_URL='http://localhost:18130'
+ENABLE_DEMOGRAPHICS_COLLECTION=''
+FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
 LANGUAGE_PREFERENCE_COOKIE_NAME='openedx-language-preference'
 LMS_BASE_URL='http://localhost:18000'
 LOGIN_URL='http://localhost:18000/login'
+LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
+LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
+LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
 LOGOUT_URL='http://localhost:18000/logout'
 MARKETING_SITE_BASE_URL='http://localhost:5335'
-DEMOGRAPHICS_BASE_URL='http://localhost:18360'
 NODE_ENV='development'
-ORDER_HISTORY_URL='localhost:1996/orders'
+ORDER_HISTORY_URL='http://localhost:1996/orders'
 PORT=1997
+PUBLISHER_BASE_URL=''
 REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
-SEGMENT_KEY=null
+SEGMENT_KEY=''
 SITE_NAME=localhost
+STUDIO_BASE_URL=''
 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
-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

@@ -1,27 +1,27 @@
 ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'
 BASE_URL='localhost:1997'
+COACHING_ENABLED=''
 CREDENTIALS_BASE_URL='http://localhost:18150'
 CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
+DEMOGRAPHICS_BASE_URL='http://localhost:18360'
+DISCOVERY_API_BASE_URL=''
 ECOMMERCE_BASE_URL='http://localhost:18130'
+ENABLE_DEMOGRAPHICS_COLLECTION=''
+FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
 LANGUAGE_PREFERENCE_COOKIE_NAME='openedx-language-preference'
 LMS_BASE_URL='http://localhost:18000'
 LOGIN_URL='http://localhost:18000/login'
+LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
+LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
+LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
 LOGOUT_URL='http://localhost:18000/logout'
 MARKETING_SITE_BASE_URL='http://localhost:5335'
-DEMOGRAPHICS_BASE_URL='http://localhost:18360'
-NODE_ENV=null
-ORDER_HISTORY_URL='localhost:1996/orders'
+NODE_ENV=''
+ORDER_HISTORY_URL='http://localhost:1996/orders'
+PUBLISHER_BASE_URL=''
 REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
-SEGMENT_KEY=null
+SEGMENT_KEY=''
 SITE_NAME=localhost
+STUDIO_BASE_URL=''
 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=

.github/CODEOWNERS

@@ -0,0 +1 @@
+* @edx/community-engineering

.github/workflows/ci.yml

@@ -0,0 +1,32 @@
+---
+name: ci
+on:
+  push:
+    branches:
+    - master
+  pull_request:
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version:
+        - 12
+        npm-test:
+        - i18n_extract
+        - is-es5
+        - lint
+        - test
+    steps:
+    - uses: actions/checkout@v2
+    - uses: actions/setup-node@v2
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: npm install -g npm@6
+    - run: make requirements
+    - run: make test NPM_TESTS=build
+    - run: make test NPM_TESTS=${{ matrix.npm-test }}
+    - name: upload coverage
+      uses: codecov/codecov-action@v2
+      with:
+        fail_ci_if_error: false

.travis.yml

@@ -1,15 +0,0 @@
-language: node_js
-node_js: 12
-before_install:
-- npm install -g npm@6
-install:
-- npm ci
-script:
-- make validate-no-uncommitted-package-lock-changes
-- npm run i18n_extract
-- npm run lint
-- npm run test
-- npm run build
-- npm run is-es5
-after_success:
-- codecov

Makefile

@@ -10,8 +10,19 @@ tx_url2 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transi
 # This directory must match .babelrc .
 transifex_temp = ./temp/babel-plugin-react-intl
 
-requirements:
-	npm install
+NPM_TESTS=build i18n_extract lint test is-es5
+
+.PHONY: test
+test: $(addprefix test.npm.,$(NPM_TESTS))  ## validate ci suite
+
+.PHONY: test.npm.*
+test.npm.%: validate-no-uncommitted-package-lock-changes
+	test -d node_modules || $(MAKE) requirements
+	npm run $(*)
+
+.PHONY: requirements
+requirements:  ## install ci requirements
+	npm ci
 
 i18n.extract:
 	# Pulling display strings from .jsx files into .json files...

README.rst

@@ -1,48 +1,110 @@
-|Build Status| |Codecov| |npm_version| |npm_downloads| |license| |semantic-release|
+|ci-badge| |Codecov| |npm_version| |npm_downloads| |license| |semantic-release|
 
 frontend-app-account
 ====================
 
-This is a micro-frontend application responsible for the display and updating of a user's account information.  Please tag **@edx/arch-team** on any PRs or issues.
+Please tag **@edx/community-engineering** on any PRs or issues.  Thanks!
 
-Development
------------
+Introduction
+------------
 
-Start Devstack
-^^^^^^^^^^^^^^
+This is a micro-frontend application responsible for the display and updating of a user's account information.
 
-To use this application `devstack <https://github.com/edx/devstack>`__ must be running and you must be logged into it.
+What is the domain of this MFE?
 
--  Start devstack
--  Log in (http://localhost:18000/login)
+In this MFE: Private user settings UIs. Public facing profile is in a `separate MFE (Profile) <https://github.com/edx/frontend-app-profile>`_
 
-Start the development server
-^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+- Account settings page
 
-In this project, install requirements and start the development server by running:
+- Demographics collection
 
-.. code:: bash
+- IDV (Identity Verification)
 
-   npm install
-   npm start # The server will run on port 1997
+Installation
+------------
 
-Once the dev server is up visit http://localhost:1997.
+This MFE is bundled with `Devstack <https://github.com/edx/devstack>`_, see the `Getting Started <https://github.com/edx/devstack#getting-started>`_ section for setup instructions.
 
-Configuration and Deployment
-----------------------------
+1. Install Devstack using the `Getting Started <https://github.com/edx/devstack#getting-started>`_ instructions.
 
-This MFE is configured via node environment variables supplied at build time. See the .env file for the list of required environment variables. Example build syntax with a single environment variable:
+2. Start up Devstack, if it's not already started.
+
+3. Log in to Devstack (http://localhost:18000/login )
+
+4. Within this project, install requirements and start the development server:
+
+   .. code-block::
+
+      npm install
+      npm start # The server will run on port 1997
+
+5. Once the dev server is up, visit http://localhost:1997 to access the MFE
+
+   .. image:: ./docs/images/localhost_preview.png
+
+Environment Variables/Setup Notes
+---------------------------------
+
+This MFE is configured via environment variables supplied at build time.  All micro-frontends have a shared set of required environment variables, as documented in the Open edX Developer Guide under `Required Environment Variables <https://edx.readthedocs.io/projects/edx-developer-docs/en/latest/developers_guide/micro_frontends_in_open_edx.html#required-environment-variables>`__.
+
+The account settings micro-frontend also supports the following additional variable:
+
+``SUPPORT_URL``
+
+Example: ``https://support.example.com``
+
+The fully-qualified URL to the support page in the target environment.
+
+edX-specific Environment Variables
+**********************************
+
+Furthermore, there are several edX-specific environment variables that enable integrations with closed-source services private to the edX organization, and are unsupported in Open edX.  Enabling these environment variables will result in undefined behavior in Open edX installations:
+
+``COACHING_ENABLED``
+
+Example: ``true`` | ``''`` (empty strings are falsy)
+
+Enables support for a section of the micro-frontend that helps users arrange for coaching sessions.  Integrates with a private coaching plugin and is only used by edx.org.
+
+``ENABLE_DEMOGRAPHICS_COLLECTION``
+
+Example: ``true`` | ``''`` (empty strings are falsy)
+
+Enables support for a section of the account settings page where a user can enter demographics information.  Integrates with a private demographics service and is only used by edx.org.
+
+``DEMOGRAPHICS_BASE_URL``
+
+Example: ``https://demographics.example.com``
+
+Required only if ``ENABLE_DEMOGRAPHICS_COLLECTION`` is true.  The fully-qualified URL to the private demographics service in the target environment.
+
+Example build syntax with a single environment variable:
 
 .. code:: bash
 
    NODE_ENV=development ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload' npm run build
 
-
 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>`__.
+edX <https://edx.readthedocs.io/projects/edx-developer-docs/en/latest/developers_guide/micro_frontends_in_open_edx.html#required-environment-variables>`__.
 
-.. |Build Status| image:: https://api.travis-ci.com/edx/frontend-app-account.svg?branch=master
-   :target: https://travis-ci.com/edx/frontend-app-account
+Known Issues
+------------
+
+None
+
+Development Roadmap
+-------------------
+
+We don't have anything planned for the core of the MFE (the account settings page) - this MFE is currently in maintenance mode.
+There may be a replacement for IDV coming down the pipe, so that may be DEPRed.
+In the future, it's possible that demographics could be modeled as a plugin rather than being hard-coded into this MFE.
+
+
+==============================
+
+.. |ci-badge| image:: https://github.com/edx/edx-developer-docs/actions/workflows/ci.yml/badge.svg
+   :target: https://github.com/edx/edx-developer-docs/actions/workflows/ci.yml
+   :alt: Continuous Integration
 .. |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

openedx.yaml

@@ -3,5 +3,4 @@
 
 nick: acct
 oeps: {}
-owner: edx/arch-team
 openedx-release: {ref: master}

package.json

@@ -30,26 +30,26 @@
   ],
   "dependencies": {
     "@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.14",
+    "@edx/frontend-component-footer": "10.1.6",
+    "@edx/frontend-component-header": "2.3.0",
+    "@edx/frontend-platform": "1.12.7",
+    "@edx/paragon": "16.1.0",
+    "@fortawesome/fontawesome-svg-core": "1.2.36",
+    "@fortawesome/free-brands-svg-icons": "5.15.4",
+    "@fortawesome/free-regular-svg-icons": "5.15.4",
+    "@fortawesome/free-solid-svg-icons": "5.15.4",
+    "@fortawesome/react-fontawesome": "0.1.15",
     "@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",
-    "classnames": "2.2.6",
+    "@tensorflow/tfjs-converter": "1.7.4",
+    "@tensorflow/tfjs-core": "1.7.4",
+    "bowser": "2.11.0",
+    "classnames": "2.3.1",
+    "core-js": "3.18.1",
     "font-awesome": "4.7.0",
     "form-urlencoded": "4.0.1",
-    "formdata-polyfill": "3.0.20",
+    "formdata-polyfill": "4.0.8",
     "history": "4.10.1",
-    "jslib-html5-camera-photo": "3.1.6",
+    "jslib-html5-camera-photo": "3.1.8",
     "lodash.debounce": "4.0.8",
     "lodash.findindex": "4.6.0",
     "lodash.get": "4.4.2",
@@ -58,36 +58,35 @@
     "lodash.omit": "4.5.0",
     "lodash.pick": "4.4.0",
     "lodash.pickby": "4.6.0",
-    "memoize-one": "5.1.1",
-    "newrelic": "5.13.1",
+    "memoize-one": "5.2.1",
     "prop-types": "15.7.2",
-    "qs": "6.9.6",
-    "react": "16.10.2",
-    "react-dom": "16.10.2",
-    "react-redux": "7.1.3",
-    "react-router": "5.1.2",
-    "react-router-dom": "5.1.2",
+    "qs": "6.10.1",
+    "react": "16.14.0",
+    "react-dom": "16.14.0",
+    "react-redux": "7.2.5",
+    "react-router": "5.2.1",
+    "react-router-dom": "5.3.0",
     "react-router-hash-link": "1.2.2",
     "react-scrollspy": "3.4.3",
-    "react-transition-group": "4.3.0",
-    "redux": "4.0.5",
-    "redux-devtools-extension": "2.13.8",
+    "react-transition-group": "4.4.2",
+    "redux": "4.1.1",
+    "redux-devtools-extension": "2.13.9",
     "redux-logger": "3.0.6",
     "redux-saga": "1.1.3",
     "redux-thunk": "2.3.0",
+    "regenerator-runtime": "0.13.9",
     "reselect": "4.0.0",
     "universal-cookie": "4.0.4"
   },
   "devDependencies": {
-    "@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",
+    "@edx/frontend-build": "8.0.4",
+    "@testing-library/jest-dom": "5.14.1",
+    "@testing-library/react": "12.1.0",
+    "codecov": "3.8.3",
+    "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",
-    "es-check": "5.0.0",
-    "husky": "3.0.9",
-    "react-test-renderer": "16.8.6",
+    "es-check": "6.0.0",
+    "react-test-renderer": "16.14.0",
     "reactifex": "1.1.1",
     "redux-mock-store": "1.5.4"
   }

public/index.html

@@ -4,7 +4,7 @@
       <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="<%=webpackConfig.output.publicPath%>favicon.ico" type="image/x-icon" />
+      <link rel="shortcut icon" href="<%=htmlWebpackPlugin.options.FAVICON_URL%>" 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"

renovate.json

@@ -1,17 +1,28 @@
 {
   "extends": [
-    "config:base"
+    "config:base",
+    "schedule:weekly",
+    ":automergeLinters",
+    ":automergeMinor",
+    ":automergeTesters",
+    ":enableVulnerabilityAlerts",
+    ":rebaseStalePrs",
+    ":semanticCommits",
+    ":updateNotScheduled"
   ],
-  "patch": {
-    "automerge": true
-  },
-  "rebaseStalePrs": true,
   "packageRules": [
     {
-      "matchPackagePatterns": ["^@edx/paragon"],
-      "matchUpdateTypes": ["minor", "patch", "pin", "digest"],
-      "automerge": true,
-      "stabilityDays": 3
+      "matchDepTypes": [
+        "devDependencies"
+      ],
+      "matchUpdateTypes": [
+        "lockFileMaintenance",
+        "minor",
+        "patch",
+        "pin"
+      ],
+      "automerge": true
     }
-  ]
+  ],
+  "timezone": "America/New_York"
 }

src/account-settings/AccountSettingsPage.jsx

@@ -13,20 +13,30 @@ import {
   getCountryList,
   getLanguageList,
 } from '@edx/frontend-platform/i18n';
-import { Hyperlink } from '@edx/paragon';
+import {
+  Button, Hyperlink, Icon, Alert,
+} from '@edx/paragon';
+import { CheckCircle, Error, WarningFilled } from '@edx/paragon/icons';
 
 import messages from './AccountSettingsPage.messages';
-import { fetchSettings, saveSettings, updateDraft } from './data/actions';
+import {
+  fetchSettings,
+  saveMultipleSettings,
+  saveSettings,
+  updateDraft,
+  beginNameChange,
+} from './data/actions';
 import { accountSettingsPageSelector } from './data/selectors';
 import PageLoading from './PageLoading';
-import Alert from './Alert';
 import JumpNav from './JumpNav';
 import DeleteAccount from './delete-account';
 import EditableField from './EditableField';
 import ResetPassword from './reset-password';
+import NameChange from './name-change';
 import ThirdPartyAuth from './third-party-auth';
 import BetaLanguageBanner from './BetaLanguageBanner';
 import EmailField from './EmailField';
+import OneTimeDismissibleAlert from './OneTimeDismissibleAlert';
 import {
   YEAR_OF_BIRTH_OPTIONS,
   EDUCATION_LEVELS,
@@ -136,14 +146,63 @@ class AccountSettingsPage extends React.Component {
     })),
   }));
 
+  sortDates = (a, b) => {
+    const aTimeSinceEpoch = new Date(a).getTime();
+    const bTimeSinceEpoch = new Date(b).getTime();
+
+    return bTimeSinceEpoch - aTimeSinceEpoch;
+  }
+
+  verificationFailureAcked = verifiedNameObj => (
+    localStorage.getItem(
+      `dismissedVerifiedNameFailureMessage-${verifiedNameObj.verified_name}-${new Date(verifiedNameObj.created).valueOf()}`,
+    ) === 'true'
+  )
+
+  sortVerifiedNameRecords = verifiedNameHistory => {
+    if (Array.isArray(verifiedNameHistory)) {
+      return [...verifiedNameHistory].sort(this.sortDates);
+    }
+
+    return [];
+  }
+
   handleEditableFieldChange = (name, value) => {
     this.props.updateDraft(name, value);
-  };
+  }
 
   handleSubmit = (formId, values) => {
     this.props.saveSettings(formId, values);
+  }
+
+  handleSubmitProfileName = (formId, values) => {
+    if (Object.keys(this.props.drafts).includes('useVerifiedNameForCerts')) {
+      this.props.saveMultipleSettings([
+        {
+          formId,
+          commitValues: values,
+        },
+        {
+          formId: 'useVerifiedNameForCerts',
+          commitValues: this.props.formValues.useVerifiedNameForCerts,
+        },
+      ], formId);
+    } else {
+      this.props.saveSettings(formId, values);
+    }
   };
 
+  handleSubmitVerifiedName = (formId, values) => {
+    if (Object.keys(this.props.drafts).includes('useVerifiedNameForCerts')) {
+      this.props.saveSettings('useVerifiedNameForCerts', this.props.formValues.useVerifiedNameForCerts);
+    }
+    if (values !== this.props.committedValues?.verified_name) {
+      this.props.beginNameChange(formId);
+    } else {
+      this.props.saveSettings(formId, values);
+    }
+  }
+
   isEditable(fieldName) {
     return !this.props.staticFields.includes(fieldName);
   }
@@ -161,7 +220,7 @@ class AccountSettingsPage extends React.Component {
 
     return (
       <div>
-        <Alert className="alert alert-danger" role="alert">
+        <Alert variant="danger">
           <FormattedMessage
             id="account.settings.message.duplicate.tpa.provider"
             defaultMessage="The {provider} account you selected is already linked to another {siteName} account."
@@ -183,7 +242,7 @@ class AccountSettingsPage extends React.Component {
 
     return (
       <div>
-        <Alert className="alert alert-primary" role="alert">
+        <Alert variant="info">
           <FormattedMessage
             id="account.settings.message.managed.settings"
             defaultMessage="Your profile settings are managed by {managerTitle}. Contact your administrator or {support} for help."
@@ -206,6 +265,155 @@ class AccountSettingsPage extends React.Component {
     );
   }
 
+  renderFullNameHelpText = (verifiedNameObj) => {
+    const { status, profile_name: profileName } = verifiedNameObj;
+    if (
+      !this.props.verifiedNameHistory
+      || !this.props.verifiedNameEnabled
+    ) {
+      return this.props.intl.formatMessage(messages['account.settings.field.full.name.help.text']);
+    }
+
+    switch (status) {
+      case 'submitted':
+        return this.props.intl.formatMessage(messages['account.settings.field.full.name.help.text.submitted']);
+      case 'denied':
+        if (this.props.committedValues.name !== profileName && !this.verificationFailureAcked(verifiedNameObj)) {
+          return (
+            <span className="text-danger">
+              { `${this.props.intl.formatMessage(messages['account.settings.field.full.name.failure.message'], { profileName })}` }
+              <a href="https://support.edx.org/hc/en-us/articles/360004381594-Why-was-my-ID-verification-denied">
+                {this.props.intl.formatMessage(messages['account.settings.field.name.verified.failure.message.help.link'])}
+              </a>
+            </span>
+          );
+        }
+        /* falls through */
+      default:
+        if (this.props.committedValues.useVerifiedNameForCerts) {
+          return this.props.intl.formatMessage(messages['account.settings.field.full.name.help.text.non.certificate']);
+        }
+        return this.props.intl.formatMessage(messages['account.settings.field.full.name.help.text.certificate']);
+    }
+  }
+
+  renderVerifiedNameSuccessMessage = (verifiedName, created) => {
+    const dateValue = new Date(created).valueOf();
+    const id = `dismissedVerifiedNameSuccessMessage-${verifiedName}-${dateValue}`;
+
+    return (
+      <OneTimeDismissibleAlert
+        id={id}
+        variant="success"
+        icon={CheckCircle}
+        header={this.props.intl.formatMessage(messages['account.settings.field.name.verified.success.message.header'])}
+        body={this.props.intl.formatMessage(messages['account.settings.field.name.verified.success.message'])}
+      />
+    );
+  }
+
+  renderVerifiedNameFailureMessage = (verifiedName, created) => {
+    const dateValue = new Date(created).valueOf();
+    const id = `dismissedVerifiedNameFailureMessage-${verifiedName}-${dateValue}`;
+
+    return (
+      <OneTimeDismissibleAlert
+        id={id}
+        variant="danger"
+        icon={Error}
+        header={this.props.intl.formatMessage(messages['account.settings.field.name.verified.failure.message.header'])}
+        body={
+          (
+            <>
+              <div className="d-flex flex-row">
+                {this.props.intl.formatMessage(
+                  messages['account.settings.field.name.verified.failure.message'], {
+                    verifiedName,
+                  },
+                )}
+              </div>
+              <div className="d-flex flex-row-reverse mt-3">
+                <Button
+                  variant="primary"
+                  href="https://support.edx.org/hc/en-us/articles/360004381594-Why-was-my-ID-verification-denied"
+                >
+                  {this.props.intl.formatMessage(messages['account.settings.field.name.verified.failure.message.help.link'])}
+                </Button>{' '}
+              </div>
+            </>
+          )
+        }
+      />
+    );
+  }
+
+  renderVerifiedNameSubmittedMessage = () => (
+    <Alert
+      variant="warning"
+      icon={WarningFilled}
+    >
+      <Alert.Heading>
+        {this.props.intl.formatMessage(messages['account.settings.field.name.verified.submitted.message.header'])}
+      </Alert.Heading>
+      <p>
+        {this.props.intl.formatMessage(messages['account.settings.field.name.verified.submitted.message'])}
+      </p>
+    </Alert>
+  )
+
+  renderVerifiedNameMessage = verifiedNameRecord => {
+    const { created, status, verified_name: verifiedName } = verifiedNameRecord;
+
+    switch (status) {
+      case 'approved':
+        return this.renderVerifiedNameSuccessMessage(verifiedName, created);
+      case 'denied':
+        return this.renderVerifiedNameFailureMessage(verifiedName, created);
+      case 'submitted':
+        return this.renderVerifiedNameSubmittedMessage();
+      default:
+        return null;
+    }
+  }
+
+  renderVerifiedNameIcon = (status) => {
+    switch (status) {
+      case 'approved':
+        return (<Icon src={CheckCircle} className="ml-1" style={{ height: '18px', width: '18px', color: 'green' }} />);
+      case 'submitted':
+        return (<Icon src={WarningFilled} className="ml-1" style={{ height: '18px', width: '18px', color: 'yellow' }} />);
+      default:
+        return null;
+    }
+  }
+
+  renderVerifiedNameHelpText = (verifiedNameObj) => {
+    const { status, verified_name: verifiedName } = verifiedNameObj;
+    switch (status) {
+      case 'approved':
+        if (this.props.committedValues.useVerifiedNameForCerts) {
+          return (this.props.intl.formatMessage(messages['account.settings.field.name.verified.help.text.certificate']));
+        }
+        return (this.props.intl.formatMessage(messages['account.settings.field.name.verified.help.text.verified']));
+      case 'submitted':
+        return (this.props.intl.formatMessage(messages['account.settings.field.name.verified.help.text.submitted']));
+      case 'denied':
+        if (!this.verificationFailureAcked(verifiedNameObj)) {
+          return (
+            <span className="text-danger">
+              { `${this.props.intl.formatMessage(messages['account.settings.field.name.verified.failure.message'], { verifiedName })} ` }
+              <a href="https://support.edx.org/hc/en-us/articles/360004381594-Why-was-my-ID-verification-denied">
+                {this.props.intl.formatMessage(messages['account.settings.field.name.verified.failure.message.help.link'])}
+              </a>
+            </span>
+          );
+        }
+        /* falls through */
+      default:
+        return null;
+    }
+  }
+
   renderEmptyStaticFieldMessage() {
     if (this.isManagedProfile()) {
       return this.props.intl.formatMessage(messages['account.settings.static.field.empty'], {
@@ -215,6 +423,13 @@ class AccountSettingsPage extends React.Component {
     return this.props.intl.formatMessage(messages['account.settings.static.field.empty.no.admin']);
   }
 
+  renderNameChangeModal() {
+    if (this.props.nameChangeModal && this.props.nameChangeModal.formId) {
+      return <NameChange targetFormId={this.props.nameChangeModal.formId} />;
+    }
+    return null;
+  }
+
   renderSecondaryEmailField(editableFieldProps) {
     if (!this.props.formValues.secondary_email_enabled) {
       return null;
@@ -261,6 +476,8 @@ class AccountSettingsPage extends React.Component {
     // Show State field only if the country is US (could include Canada later)
     const showState = this.props.formValues.country === COUNTRY_WITH_STATES;
 
+    const { verifiedName, verifiedNameEnabled, mostRecentVerifiedName } = this.props;
+
     const timeZoneOptions = this.getLocalizedTimeZoneOptions(
       this.props.timeZoneOptions,
       this.props.countryTimeZoneOptions,
@@ -268,16 +485,22 @@ class AccountSettingsPage extends React.Component {
     );
 
     const hasLinkedTPA = findIndex(this.props.tpaProviders, provider => provider.connected) >= 0;
-
     return (
       <>
         <div className="account-section" id="basic-information" ref={this.navLinkRefs['#basic-information']}>
+          {
+            verifiedNameEnabled && this.props.mostRecentVerifiedName
+            && this.renderVerifiedNameMessage(this.props.mostRecentVerifiedName)
+          }
+
           <h2 className="section-heading">
             {this.props.intl.formatMessage(messages['account.settings.section.account.information'])}
           </h2>
           <p>{this.props.intl.formatMessage(messages['account.settings.section.account.information.description'])}</p>
           {this.renderManagedProfileMessage()}
 
+          {this.renderNameChangeModal()}
+
           <EditableField
             name="username"
             type="text"
@@ -293,17 +516,59 @@ class AccountSettingsPage extends React.Component {
           <EditableField
             name="name"
             type="text"
-            value={this.props.formValues.name}
+            value={
+              verifiedNameEnabled
+              && verifiedName?.status === 'submitted'
+              && this.props.formValues.pending_name_change
+                ? this.props.formValues.pending_name_change
+                : 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()
             }
-            helpText={this.props.intl.formatMessage(messages['account.settings.field.full.name.help.text'])}
-            isEditable={this.isEditable('name')}
-            {...editableFieldProps}
+            helpText={
+              verifiedNameEnabled && mostRecentVerifiedName
+                ? this.renderFullNameHelpText(mostRecentVerifiedName)
+                : this.props.intl.formatMessage(messages['account.settings.field.full.name.help.text'])
+            }
+            isEditable={
+              verifiedNameEnabled && verifiedName
+                ? this.isEditable('verifiedName') && this.isEditable('name')
+                : this.isEditable('name')
+            }
+            isGrayedOut={
+              verifiedNameEnabled && verifiedName && !this.isEditable('verifiedName')
+            }
+            onChange={this.handleEditableFieldChange}
+            onSubmit={this.handleSubmitProfileName}
           />
+          {verifiedNameEnabled && verifiedName
+            && (
+            <EditableField
+              name="verified_name"
+              type="text"
+              value={this.props.formValues.verified_name}
+              label={
+                (
+                  <div className="d-flex">
+                    {this.props.intl.formatMessage(messages['account.settings.field.name.verified'])}
+                    {
+                      this.renderVerifiedNameIcon(verifiedName.status)
+                    }
+                  </div>
+                )
+              }
+              helpText={this.renderVerifiedNameHelpText(mostRecentVerifiedName)}
+              isEditable={this.isEditable('verifiedName')}
+              isGrayedOut={!this.isEditable('verifiedName')}
+              onChange={this.handleEditableFieldChange}
+              onSubmit={this.handleSubmitVerifiedName}
+            />
+            )}
+
           <EmailField
             name="email"
             label={this.props.intl.formatMessage(messages['account.settings.field.email'])}
@@ -566,6 +831,7 @@ AccountSettingsPage.propTypes = {
     level_of_education: PropTypes.string,
     gender: PropTypes.string,
     language_proficiencies: PropTypes.string,
+    pending_name_change: PropTypes.string,
     phone_number: PropTypes.string,
     social_link_linkedin: PropTypes.string,
     social_link_facebook: PropTypes.string,
@@ -578,7 +844,18 @@ AccountSettingsPage.propTypes = {
     }),
     state: PropTypes.string,
     shouldDisplayDemographicsSection: PropTypes.bool,
+    useVerifiedNameForCerts: PropTypes.bool.isRequired,
+    verified_name: PropTypes.string,
   }).isRequired,
+  committedValues: PropTypes.shape({
+    useVerifiedNameForCerts: PropTypes.bool,
+    verified_name: PropTypes.string,
+    name: PropTypes.string,
+  }),
+  drafts: PropTypes.shape({}),
+  formErrors: PropTypes.shape({
+    name: PropTypes.string,
+  }),
   siteLanguage: PropTypes.shape({
     previousValue: PropTypes.string,
     draft: PropTypes.string,
@@ -602,15 +879,43 @@ AccountSettingsPage.propTypes = {
   })),
   fetchSiteLanguages: PropTypes.func.isRequired,
   updateDraft: PropTypes.func.isRequired,
+  saveMultipleSettings: PropTypes.func.isRequired,
   saveSettings: PropTypes.func.isRequired,
   fetchSettings: PropTypes.func.isRequired,
-  tpaProviders: PropTypes.arrayOf(PropTypes.object),
+  beginNameChange: PropTypes.func.isRequired,
+  tpaProviders: PropTypes.arrayOf(PropTypes.shape({
+    connected: PropTypes.bool,
+  })),
+  nameChangeModal: PropTypes.shape({
+    formId: PropTypes.string,
+  }),
+  verifiedNameEnabled: PropTypes.bool,
+  verifiedName: PropTypes.shape({
+    verified_name: PropTypes.string,
+    status: PropTypes.string,
+  }),
+  mostRecentVerifiedName: PropTypes.shape({
+    verified_name: PropTypes.string,
+    status: PropTypes.string,
+  }),
+  verifiedNameHistory: PropTypes.arrayOf(
+    PropTypes.shape({
+      verified_name: PropTypes.string,
+      status: PropTypes.string,
+    }),
+  ),
 };
 
 AccountSettingsPage.defaultProps = {
   loading: false,
   loaded: false,
   loadingError: null,
+  committedValues: {
+    useVerifiedNameForCerts: false,
+    verified_name: null,
+  },
+  drafts: {},
+  formErrors: {},
   siteLanguage: null,
   siteLanguageOptions: [],
   timeZoneOptions: [],
@@ -620,11 +925,18 @@ AccountSettingsPage.defaultProps = {
   tpaProviders: [],
   isActive: true,
   secondary_email_enabled: false,
+  nameChangeModal: {},
+  verifiedNameEnabled: false,
+  verifiedName: null,
+  mostRecentVerifiedName: {},
+  verifiedNameHistory: [],
 };
 
 export default connect(accountSettingsPageSelector, {
   fetchSettings,
   saveSettings,
+  saveMultipleSettings,
   updateDraft,
   fetchSiteLanguages,
+  beginNameChange,
 })(injectIntl(AccountSettingsPage));

src/account-settings/AccountSettingsPage.messages.jsx

@@ -91,6 +91,86 @@ const messages = defineMessages({
     defaultMessage: 'The name that is used for ID verification and that appears on your certificates.',
     description: 'Help text for the account settings name field.',
   },
+  'account.settings.field.full.name.help.text.non.certificate': {
+    id: 'account.settings.field.full.name.help.text.non.certificate',
+    defaultMessage: 'The name that appears on your public profile.',
+    description: 'Help text for the account settings name field.',
+  },
+  'account.settings.field.full.name.help.text.certificate': {
+    id: 'account.settings.field.full.name.help.text.certificate',
+    defaultMessage: 'This name is selected to appear on your certificates and public-facing records.',
+    description: 'Help text for the account settings name field.',
+  },
+  'account.settings.field.name.verified': {
+    id: 'account.settings.field.name.verified',
+    defaultMessage: 'Verified name',
+    description: 'Label for account settings verified name field.',
+  },
+  'account.settings.field.name.verified.help.text.verified': {
+    id: 'account.settings.field.name.verified.help.text.verified',
+    defaultMessage: 'This name has been verified by government ID.',
+    description: 'Help text for the account settings verified name field when the name is verified.',
+  },
+  'account.settings.field.name.verified.help.text.certificate': {
+    id: 'account.settings.field.name.verified.help.text.certificate',
+    defaultMessage: 'This name has been verified by government ID and selected to appear on your certificates and public-facing records.',
+    description: 'Help text for the account settings verified name field when the name is selected for certificates.',
+  },
+  'account.settings.field.name.verified.help.text.submitted': {
+    id: 'account.settings.field.name.verified.help.text.submitted',
+    defaultMessage: 'Verification has been submitted. This usually takes 48 hours or less. Verified name cannot be changed at this time.',
+    description: 'Help text for the account settings verified name field when a verified name has been submitted.',
+  },
+  'account.settings.field.name.verified.verification.alert': {
+    id: 'account.settings.field.name.verified.verification.help',
+    defaultMessage: 'Enter your name as it appears on your government-issued ID.',
+    description: 'Form label instructing the user to enter the name on their ID.',
+  },
+  'account.settings.field.full.name.help.text.submitted': {
+    id: 'account.settings.field.full.name.help.text.submitted',
+    defaultMessage: 'When identity verification is successful, this name will appear on your certificates and public-facing records. Full name cannot be changed at this time.',
+    description: 'Help text for the account settings full name field when a verified name has been submitted.',
+  },
+  'account.settings.field.full.name.failure.message': {
+    id: 'account.settings.field.name.verified.failure.message',
+    defaultMessage: 'Your Full name change attempt, “{profileName}”, did not pass ID verification. Your previous Full name settings have been restored. Try changing your Full name again. ',
+    description: 'The body of the failure alert indicating that a user\'s name was not able to be changed',
+  },
+  'account.settings.field.name.verified.success.message': {
+    id: 'account.settings.field.name.verified.success.message',
+    defaultMessage: 'Your identity verification request has successfully completed. You now have the option of selecting which name you prefer to appear on your certificates and public-records.',
+    description: 'The body of the success alert indicating that a user\'s name has been verified',
+  },
+  'account.settings.field.name.verified.success.message.header': {
+    id: 'account.settings.field.name.verified.success.message.header',
+    defaultMessage: 'Your name change request is complete!',
+    description: 'The header of the success alert indicating that a user\'s name has been verified',
+  },
+  'account.settings.field.name.verified.failure.message': {
+    id: 'account.settings.field.name.verified.failure.message',
+    defaultMessage: 'Your Verified name change attempt, “{verifiedName}”, did not pass ID verification. Your previous Verified name settings have been restored.',
+    description: 'The body of the failure alert indicating that a user\'s name was not able to be verified',
+  },
+  'account.settings.field.name.verified.failure.message.header': {
+    id: 'account.settings.field.name.verified.failure.message.header',
+    defaultMessage: 'We were not able to verify your identity.',
+    description: 'The header of the failure alert indicating that a user\'s name was not able to be verified',
+  },
+  'account.settings.field.name.verified.failure.message.help.link': {
+    id: 'account.settings.field.name.verified.failure.message.help.link',
+    defaultMessage: 'Learn more about ID verification',
+    description: 'The text of the button displayed when a user\'s name was not able to be verified, intended to direct the user to a help article about ID verification.',
+  },
+  'account.settings.field.name.verified.submitted.message': {
+    id: 'account.settings.field.name.verified.submitted.message',
+    defaultMessage: 'Your identity verification request has been submitted and usually takes between 24 and 48 hours to complete. When your request is approved, your updated name will appear on all associated certificates and public-facing records.',
+    description: 'The body of the submitted alert indicating that a user\'s name has been submitted for verification',
+  },
+  'account.settings.field.name.verified.submitted.message.header': {
+    id: 'account.settings.field.name.verified.submitted.message.header',
+    defaultMessage: 'Your name change request is almost complete!',
+    description: 'The header of the submitted alert indicating that a user\'s name has been submitted for verification',
+  },
   'account.settings.field.email': {
     id: 'account.settings.field.email',
     defaultMessage: 'Email address (Sign in)',

src/account-settings/EditableField.jsx

@@ -16,6 +16,7 @@ import {
   closeForm,
 } from './data/actions';
 import { editableFieldSelector } from './data/selectors';
+import CertificatePreference from './certificate-preference/CertificatePreference';
 
 function EditableField(props) {
   const {
@@ -37,6 +38,7 @@ function EditableField(props) {
     onChange,
     isEditing,
     isEditable,
+    isGrayedOut,
     intl,
     ...others
   } = props;
@@ -102,54 +104,57 @@ function EditableField(props) {
       expression={isEditing ? 'editing' : 'default'}
       cases={{
         editing: (
-          <form onSubmit={handleSubmit}>
-            <ValidationFormGroup
-              for={id}
-              invalid={error != null}
-              invalidMessage={error}
-              helpText={helpText}
-            >
-              <label className="h6 d-block" htmlFor={id}>{label}</label>
-              <Input
-                data-hj-suppress
-                name={name}
-                id={id}
-                type={type}
-                value={value}
-                onChange={handleChange}
-                options={options}
-                {...others}
-              />
-              <>{others.children}</>
-            </ValidationFormGroup>
-            <p>
-              <StatefulButton
-                type="submit"
-                className="mr-2"
-                state={saveState}
-                labels={{
-                  default: intl.formatMessage(messages['account.settings.editable.field.action.save']),
-                }}
-                onClick={(e) => {
-                  // Swallow clicks if the state is pending.
-                  // We do this instead of disabling the button to prevent
-                  // it from losing focus (disabled elements cannot have focus).
-                  // Disabling it would causes upstream issues in focus management.
-                  // 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(); }
-                }}
-                disabledStates={[]}
-              />
-              <Button
-                variant="outline-primary"
-                onClick={handleCancel}
+          <>
+            <form onSubmit={handleSubmit}>
+              <ValidationFormGroup
+                for={id}
+                invalid={error != null}
+                invalidMessage={error}
+                helpText={helpText}
               >
-                {intl.formatMessage(messages['account.settings.editable.field.action.cancel'])}
-              </Button>
-            </p>
-          </form>
+                <label className="h6 d-block" htmlFor={id}>{label}</label>
+                <Input
+                  data-hj-suppress
+                  name={name}
+                  id={id}
+                  type={type}
+                  value={value}
+                  onChange={handleChange}
+                  options={options}
+                  {...others}
+                />
+                <>{others.children}</>
+              </ValidationFormGroup>
+              <p>
+                <StatefulButton
+                  type="submit"
+                  className="mr-2"
+                  state={saveState}
+                  labels={{
+                    default: intl.formatMessage(messages['account.settings.editable.field.action.save']),
+                  }}
+                  onClick={(e) => {
+                    // Swallow clicks if the state is pending.
+                    // We do this instead of disabling the button to prevent
+                    // it from losing focus (disabled elements cannot have focus).
+                    // Disabling it would causes upstream issues in focus management.
+                    // 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(); }
+                  }}
+                  disabledStates={[]}
+                />
+                <Button
+                  variant="outline-primary"
+                  onClick={handleCancel}
+                >
+                  {intl.formatMessage(messages['account.settings.editable.field.action.cancel'])}
+                </Button>
+              </p>
+            </form>
+            {['name', 'verified_name'].includes(name) && <CertificatePreference fieldName={name} />}
+          </>
         ),
         default: (
           <div className="form-group">
@@ -161,7 +166,7 @@ function EditableField(props) {
                 </Button>
               ) : null}
             </div>
-            <p data-hj-suppress>{renderValue(value)}</p>
+            <p data-hj-suppress className={isGrayedOut ? 'grayed-out' : null}>{renderValue(value)}</p>
             <p className="small text-muted mt-n2">{renderConfirmationMessage() || helpText}</p>
           </div>
         ),
@@ -172,7 +177,7 @@ function EditableField(props) {
 
 EditableField.propTypes = {
   name: PropTypes.string.isRequired,
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.node]),
   emptyLabel: PropTypes.node,
   type: PropTypes.string.isRequired,
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -196,6 +201,7 @@ EditableField.propTypes = {
   onChange: PropTypes.func.isRequired,
   isEditing: PropTypes.bool,
   isEditable: PropTypes.bool,
+  isGrayedOut: PropTypes.bool,
   intl: intlShape.isRequired,
 };
 
@@ -211,6 +217,7 @@ EditableField.defaultProps = {
   helpText: undefined,
   isEditing: false,
   isEditable: true,
+  isGrayedOut: false,
   userSuppliedValue: undefined,
 };
 

src/account-settings/OneTimeDismissibleAlert.jsx

@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import { Alert } from '@edx/paragon';
+
+export default function OneTimeDismissibleAlert(props) {
+  const [dismissed, setDismissed] = useState(localStorage.getItem(props.id) !== 'true');
+
+  const onClose = () => {
+    localStorage.setItem(props.id, 'true');
+    setDismissed(false);
+  };
+
+  return (
+    <Alert
+      variant={props.variant}
+      dismissible
+      icon={props.icon}
+      onClose={onClose}
+      show={dismissed}
+    >
+      <Alert.Heading>{props.header}</Alert.Heading>
+      <p>
+        {props.body}
+      </p>
+    </Alert>
+  );
+}
+
+OneTimeDismissibleAlert.propTypes = {
+  id: PropTypes.string.isRequired,
+  variant: PropTypes.string,
+  icon: PropTypes.func,
+  header: PropTypes.string,
+  body: PropTypes.string,
+};
+
+OneTimeDismissibleAlert.defaultProps = {
+  variant: 'success',
+  icon: undefined,
+  header: undefined,
+  body: undefined,
+};

src/account-settings/_style.scss

@@ -50,4 +50,8 @@
       line-height: 1.6rem;
     }
   }
+  .grayed-out{
+    opacity: 0.6; /* Real browsers */
+    filter: alpha(opacity = 60); /* MSIE */
+  }
 }

src/account-settings/certificate-preference/CertificatePreference.jsx

@@ -0,0 +1,175 @@
+import React, { useState, useEffect } from 'react';
+import { connect, useDispatch } from 'react-redux';
+import PropTypes from 'prop-types';
+
+import {
+  ActionRow,
+  Form,
+  ModalDialog,
+  StatefulButton,
+} from '@edx/paragon';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import {
+  closeForm,
+  resetDrafts,
+  saveSettings,
+  updateDraft,
+} from '../data/actions';
+import { certPreferenceSelector } from '../data/selectors';
+
+import commonMessages from '../AccountSettingsPage.messages';
+import messages from './messages';
+
+function CertificatePreference({
+  intl,
+  fieldName,
+  originalFullName,
+  originalVerifiedName,
+  saveState,
+  useVerifiedNameForCerts,
+  verifiedNameEnabled,
+}) {
+  if (!verifiedNameEnabled || !originalVerifiedName) {
+    // If the user doesn't have an approved verified name, do not display this component
+    return null;
+  }
+
+  const dispatch = useDispatch();
+  const [checked, setChecked] = useState(false);
+  const [modalIsOpen, setModalIsOpen] = useState(false);
+  const formId = 'useVerifiedNameForCerts';
+
+  function handleCheckboxChange() {
+    if (!checked) {
+      if (fieldName === 'verified_name') {
+        dispatch(updateDraft(formId, true));
+      } else {
+        dispatch(updateDraft(formId, false));
+      }
+    } else {
+      setModalIsOpen(true);
+    }
+  }
+
+  function handleCancel() {
+    setModalIsOpen(false);
+    dispatch(resetDrafts());
+  }
+
+  function handleModalChange(e) {
+    if (e.target.value === 'fullName') {
+      dispatch(updateDraft(formId, false));
+    } else {
+      dispatch(updateDraft(formId, true));
+    }
+  }
+
+  function handleSubmit(e) {
+    e.preventDefault();
+
+    if (saveState === 'pending') {
+      return;
+    }
+
+    dispatch(saveSettings(formId, useVerifiedNameForCerts));
+  }
+
+  useEffect(() => {
+    if (fieldName === 'verified_name') {
+      setChecked(useVerifiedNameForCerts);
+    } else {
+      setChecked(!useVerifiedNameForCerts);
+    }
+  }, [useVerifiedNameForCerts]);
+
+  useEffect(() => {
+    if (modalIsOpen && saveState === 'complete') {
+      setModalIsOpen(false);
+      dispatch(closeForm(fieldName));
+    }
+  }, [modalIsOpen, saveState]);
+
+  return (
+    <>
+      <Form.Checkbox className="mt-1 mb-4" checked={checked} onChange={handleCheckboxChange}>
+        {intl.formatMessage(messages['account.settings.field.name.checkbox.certificate.select'])}
+      </Form.Checkbox>
+
+      <ModalDialog
+        title={intl.formatMessage(messages['account.settings.field.name.modal.certificate.title'])}
+        isOpen={modalIsOpen}
+        onClose={handleCancel}
+        size="lg"
+        hasCloseButton
+        isFullscreenOnMobile
+      >
+        <Form onSubmit={handleSubmit}>
+          <ModalDialog.Header>
+            <ModalDialog.Title>
+              {intl.formatMessage(messages['account.settings.field.name.modal.certificate.title'])}
+            </ModalDialog.Title>
+          </ModalDialog.Header>
+
+          <ModalDialog.Body>
+            <Form.Group className="mb-4">
+              <Form.Label>
+                {intl.formatMessage(messages['account.settings.field.name.modal.certificate.select'])}
+              </Form.Label>
+              <Form.RadioSet
+                name={formId}
+                value={useVerifiedNameForCerts ? 'verifiedName' : 'fullName'}
+                onChange={handleModalChange}
+              >
+                <Form.Radio value="fullName">
+                  {originalFullName}{' '}
+                  ({intl.formatMessage(messages['account.settings.field.name.modal.certificate.option.full'])})
+                </Form.Radio>
+                <Form.Radio value="verifiedName">
+                  {originalVerifiedName}{' '}
+                  ({intl.formatMessage(messages['account.settings.field.name.modal.certificate.option.verified'])})
+                </Form.Radio>
+              </Form.RadioSet>
+            </Form.Group>
+          </ModalDialog.Body>
+
+          <ModalDialog.Footer>
+            <ActionRow>
+              <ModalDialog.CloseButton variant="outline-primary" disabled={saveState === 'pending'}>
+                {intl.formatMessage(commonMessages['account.settings.editable.field.action.cancel'])}
+              </ModalDialog.CloseButton>
+              <StatefulButton
+                type="submit"
+                state={saveState}
+                labels={{
+                  default: intl.formatMessage(messages['account.settings.field.name.modal.certificate.button.choose']),
+                }}
+                disabledStates={[]}
+              />
+            </ActionRow>
+          </ModalDialog.Footer>
+        </Form>
+      </ModalDialog>
+    </>
+  );
+}
+
+CertificatePreference.propTypes = {
+  intl: intlShape.isRequired,
+  fieldName: PropTypes.string.isRequired,
+  originalFullName: PropTypes.string,
+  originalVerifiedName: PropTypes.string,
+  saveState: PropTypes.string,
+  useVerifiedNameForCerts: PropTypes.bool,
+  verifiedNameEnabled: PropTypes.bool,
+};
+
+CertificatePreference.defaultProps = {
+  originalFullName: '',
+  originalVerifiedName: '',
+  saveState: null,
+  useVerifiedNameForCerts: false,
+  verifiedNameEnabled: false,
+};
+
+export default connect(certPreferenceSelector)(injectIntl(CertificatePreference));

src/account-settings/certificate-preference/data/service.js

@@ -0,0 +1,22 @@
+import { getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+import { handleRequestError } from '../../data/utils';
+
+// eslint-disable-next-line import/prefer-default-export
+export async function postVerifiedNameConfig(username, commitValues) {
+  const requestConfig = { headers: { Accept: 'application/json' } };
+  const requestUrl = `${getConfig().LMS_BASE_URL}/api/edx_name_affirmation/v1/verified_name/config`;
+
+  const { useVerifiedNameForCerts } = commitValues;
+  const postValues = {
+    username,
+    use_verified_name_for_certs: useVerifiedNameForCerts,
+  };
+
+  const { data } = await getAuthenticatedHttpClient()
+    .post(requestUrl, postValues, requestConfig)
+    .catch(error => handleRequestError(error));
+
+  return data;
+}

src/account-settings/certificate-preference/messages.js

@@ -0,0 +1,36 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  'account.settings.field.name.checkbox.certificate.select': {
+    id: 'account.settings.field.name.certificate.select',
+    defaultMessage: 'If checked, this name will appear on your certificates and public-facing records.',
+    description: 'Label for checkbox describing that the selected name will appear on the user‘s certificates.',
+  },
+  'account.settings.field.name.modal.certificate.title': {
+    id: 'account.settings.field.name.modal.certificate.title',
+    defaultMessage: 'Choose a preferred name for certificates and public-facing records',
+    description: 'Title instructing the user to choose a preferred name.',
+  },
+  'account.settings.field.name.modal.certificate.select': {
+    id: 'account.settings.field.name.modal.certificate.select',
+    defaultMessage: 'Select a name',
+    description: 'Label instructing the user to select a name.',
+  },
+  'account.settings.field.name.modal.certificate.option.full': {
+    id: 'account.settings.field.name.modal.certificate.option.full',
+    defaultMessage: 'Full Name',
+    description: 'Option representing the user’s full name.',
+  },
+  'account.settings.field.name.modal.certificate.option.verified': {
+    id: 'account.settings.field.name.modal.certificate.option.verified',
+    defaultMessage: 'Verified Name',
+    description: 'Option representing the user’s verified name.',
+  },
+  'account.settings.field.name.modal.certificate.button.choose': {
+    id: 'account.settings.field.name.modal.certificate.button.choose',
+    defaultMessage: 'Choose name',
+    description: 'Button to confirm the user’s name choice.',
+  },
+});
+
+export default messages;

src/account-settings/certificate-preference/test/CertificatePreference.test.jsx

@@ -0,0 +1,174 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
+import { Router } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+import {
+  fireEvent,
+  render,
+  screen,
+} from '@testing-library/react';
+import { createMemoryHistory } from 'history';
+
+import * as auth from '@edx/frontend-platform/auth';
+import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
+
+// Modal creates a portal.  Overriding ReactDOM.createPortal allows portals to be tested in jest.
+ReactDOM.createPortal = node => node;
+
+import CertificatePreference from '../CertificatePreference'; // eslint-disable-line import/first
+
+const mockDispatch = jest.fn();
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useDispatch: () => mockDispatch,
+}));
+
+jest.mock('@edx/frontend-platform/auth');
+jest.mock('../../data/selectors', () => jest.fn().mockImplementation(() => ({ certPreferenceSelector: () => ({}) })));
+
+const history = createMemoryHistory();
+
+const IntlCertificatePreference = injectIntl(CertificatePreference);
+
+const mockStore = configureStore();
+
+describe('NameChange', () => {
+  let props = {};
+  let store = {};
+  const formId = 'useVerifiedNameForCerts';
+  const updateDraft = 'UPDATE_DRAFT';
+  const labelText = 'If checked, this name will appear on your certificates and public-facing records.';
+
+  const reduxWrapper = children => (
+    <Router history={history}>
+      <IntlProvider locale="en">
+        <Provider store={store}>{children}</Provider>
+      </IntlProvider>
+    </Router>
+  );
+
+  beforeEach(() => {
+    store = mockStore();
+    props = {
+      fieldName: 'name',
+      originalFullName: 'Ed X',
+      originalVerifiedName: 'edX Verified',
+      saveState: null,
+      useVerifiedNameForCerts: false,
+      verifiedNameEnabled: true,
+      intl: {},
+    };
+
+    auth.getAuthenticatedHttpClient = jest.fn(() => ({
+      patch: async () => ({
+        data: { status: 200 },
+        catch: () => {},
+      }),
+    }));
+    auth.getAuthenticatedUser = jest.fn(() => ({ userId: 3 }));
+  });
+
+  afterEach(() => jest.clearAllMocks());
+
+  it('does not render if there is no verified name', () => {
+    props = {
+      ...props,
+      originalVerifiedName: '',
+    };
+
+    const wrapper = render(reduxWrapper(<IntlCertificatePreference {...props} />));
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('does not trigger modal when checking empty checkbox, and updates draft immediately', () => {
+    props = {
+      ...props,
+      useVerifiedNameForCerts: true,
+    };
+
+    render(reduxWrapper(<IntlCertificatePreference {...props} />));
+
+    const checkbox = screen.getByLabelText(labelText);
+    expect(checkbox.checked).toEqual(false);
+
+    fireEvent.click(checkbox);
+
+    expect(screen.queryByRole('radiogroup')).toBeNull();
+    expect(mockDispatch).toHaveBeenCalledWith({
+      payload: { name: formId, value: false },
+      type: updateDraft,
+    });
+  });
+
+  it('triggers modal when attempting to uncheck checkbox', () => {
+    render(reduxWrapper(<IntlCertificatePreference {...props} />));
+
+    const checkbox = screen.getByLabelText(labelText);
+    expect(checkbox.checked).toEqual(true);
+
+    fireEvent.click(checkbox);
+    expect(mockDispatch).not.toHaveBeenCalled();
+
+    screen.getByRole('radiogroup');
+  });
+
+  it('updates draft when changing radio value', () => {
+    render(reduxWrapper(<IntlCertificatePreference {...props} />));
+
+    const checkbox = screen.getByLabelText(labelText);
+    fireEvent.click(checkbox);
+
+    const fullNameOption = screen.getByLabelText('Ed X (Full Name)');
+    const verifiedNameOption = screen.getByLabelText('edX Verified (Verified Name)');
+    expect(fullNameOption.checked).toEqual(true);
+    expect(verifiedNameOption.checked).toEqual(false);
+
+    fireEvent.click(verifiedNameOption);
+    expect(mockDispatch).toHaveBeenCalledWith({
+      payload: { name: formId, value: true },
+      type: updateDraft,
+    });
+  });
+
+  it('clears draft on cancel', () => {
+    render(reduxWrapper(<IntlCertificatePreference {...props} />));
+
+    const checkbox = screen.getByLabelText(labelText);
+    fireEvent.click(checkbox);
+
+    const cancelButton = screen.getByText('Cancel');
+    fireEvent.click(cancelButton);
+
+    expect(mockDispatch).toHaveBeenCalledWith({ type: 'RESET_DRAFTS' });
+    expect(screen.queryByRole('radiogroup')).toBeNull();
+  });
+
+  it('submits', () => {
+    render(reduxWrapper(<IntlCertificatePreference {...props} />));
+
+    const checkbox = screen.getByLabelText(labelText);
+    fireEvent.click(checkbox);
+
+    const submitButton = screen.getByText('Choose name');
+    fireEvent.click(submitButton);
+    expect(mockDispatch).toHaveBeenCalledWith({
+      payload: { formId, commitValues: false },
+      type: 'ACCOUNT_SETTINGS__SAVE_SETTINGS',
+    });
+  });
+
+  it('checks box for verified name', () => {
+    props = {
+      ...props,
+      fieldName: 'verified_name',
+      useVerifiedNameForCerts: true,
+    };
+
+    render(reduxWrapper(<IntlCertificatePreference {...props} />));
+
+    const checkbox = screen.getByLabelText(labelText);
+    expect(checkbox.checked).toEqual(true);
+  });
+});

src/account-settings/certificate-preference/test/__snapshots__/CertificatePreference.test.jsx.snap

@@ -0,0 +1,62 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NameChange does not render if there is no verified name 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div />
+  </body>,
+  "container": <div />,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;

src/account-settings/data/actions.js

@@ -9,6 +9,7 @@ export const OPEN_FORM = 'OPEN_FORM';
 export const CLOSE_FORM = 'CLOSE_FORM';
 export const UPDATE_DRAFT = 'UPDATE_DRAFT';
 export const RESET_DRAFTS = 'RESET_DRAFTS';
+export const BEGIN_NAME_CHANGE = 'BEGIN_NAME_CHANGE';
 
 // FETCH SETTINGS ACTIONS
 
@@ -25,6 +26,7 @@ export const fetchSettingsSuccess = ({
   thirdPartyAuthProviders,
   profileDataManager,
   timeZones,
+  verifiedNameHistory,
 }) => ({
   type: FETCH_SETTINGS.SUCCESS,
   payload: {
@@ -32,6 +34,7 @@ export const fetchSettingsSuccess = ({
     thirdPartyAuthProviders,
     profileDataManager,
     timeZones,
+    verifiedNameHistory,
   },
 });
 
@@ -68,6 +71,10 @@ export const resetDrafts = () => ({
   type: RESET_DRAFTS,
 });
 
+export const beginNameChange = (formId) => ({
+  type: BEGIN_NAME_CHANGE,
+  payload: { formId },
+});
 // SAVE SETTINGS ACTIONS
 
 export const saveSettings = (formId, commitValues) => ({

src/account-settings/data/reducers.js

@@ -8,11 +8,13 @@ import {
   UPDATE_DRAFT,
   RESET_DRAFTS,
   SAVE_MULTIPLE_SETTINGS,
+  BEGIN_NAME_CHANGE,
 } from './actions';
 
 import { reducer as deleteAccountReducer, DELETE_ACCOUNT } from '../delete-account';
 import { reducer as siteLanguageReducer, FETCH_SITE_LANGUAGES } from '../site-language';
 import { reducer as resetPasswordReducer, RESET_PASSWORD } from '../reset-password';
+import { reducer as nameChangeReducer, REQUEST_NAME_CHANGE } from '../name-change';
 import { reducer as thirdPartyAuthReducer, DISCONNECT_AUTH } from '../third-party-auth';
 
 export const defaultState = {
@@ -31,7 +33,13 @@ export const defaultState = {
   deleteAccount: deleteAccountReducer(),
   siteLanguage: siteLanguageReducer(),
   resetPassword: resetPasswordReducer(),
+  nameChange: nameChangeReducer(),
   thirdPartyAuth: thirdPartyAuthReducer(),
+  nameChangeModal: false,
+  verifiedName: null,
+  mostRecentVerifiedName: {},
+  verifiedNameHistory: {},
+  verifiedNameEnabled: false,
 };
 
 const reducer = (state = defaultState, action) => {
@@ -56,6 +64,7 @@ const reducer = (state = defaultState, action) => {
         loading: false,
         loaded: true,
         loadingError: null,
+        verifiedNameHistory: action.payload.verifiedNameHistory,
       };
     case FETCH_SETTINGS.FAILURE:
       return {
@@ -89,6 +98,7 @@ const reducer = (state = defaultState, action) => {
           saveState: null,
           errors: {},
           drafts: {},
+          nameChangeModal: false,
         };
       }
       return state;
@@ -106,6 +116,15 @@ const reducer = (state = defaultState, action) => {
         drafts: {},
       };
 
+    case BEGIN_NAME_CHANGE:
+      return {
+        ...state,
+        saveState: 'error',
+        nameChangeModal: {
+          formId: action.payload.formId,
+        },
+      };
+
     case SAVE_SETTINGS.BEGIN:
       return {
         ...state,
@@ -119,7 +138,6 @@ const reducer = (state = defaultState, action) => {
         values: { ...state.values, ...action.payload.values },
         errors: {},
         confirmationValues: {
-
           ...state.confirmationValues,
           ...action.payload.confirmationValues,
         },
@@ -198,6 +216,15 @@ const reducer = (state = defaultState, action) => {
         resetPassword: resetPasswordReducer(state.resetPassword, action),
       };
 
+    case REQUEST_NAME_CHANGE.BEGIN:
+    case REQUEST_NAME_CHANGE.SUCCESS:
+    case REQUEST_NAME_CHANGE.FAILURE:
+    case REQUEST_NAME_CHANGE.RESET:
+      return {
+        ...state,
+        nameChange: nameChangeReducer(state.nameChange, action),
+      };
+
     case DISCONNECT_AUTH.BEGIN:
     case DISCONNECT_AUTH.SUCCESS:
     case DISCONNECT_AUTH.FAILURE:

src/account-settings/data/sagas.js

@@ -25,11 +25,13 @@ import {
   saveMultipleSettingsBegin,
   saveMultipleSettingsSuccess,
   saveMultipleSettingsFailure,
+  beginNameChange,
 } from './actions';
 
 // Sub-modules
 import { saga as deleteAccountSaga } from '../delete-account';
 import { saga as resetPasswordSaga } from '../reset-password';
+import { saga as nameChangeSaga } from '../name-change';
 import {
   saga as siteLanguageSaga,
   patchPreferences,
@@ -38,7 +40,12 @@ import {
 import { saga as thirdPartyAuthSaga } from '../third-party-auth';
 
 // Services
-import { getSettings, patchSettings, getTimeZones } from './service';
+import {
+  getSettings,
+  patchSettings,
+  getTimeZones,
+  getVerifiedNameHistory,
+} from './service';
 
 export function* handleFetchSettings() {
   try {
@@ -54,6 +61,8 @@ export function* handleFetchSettings() {
       userId,
     );
 
+    const verifiedNameHistory = yield call(getVerifiedNameHistory);
+
     if (values.country) { yield put(fetchTimeZones(values.country)); }
 
     yield put(fetchSettingsSuccess({
@@ -61,6 +70,7 @@ export function* handleFetchSettings() {
       thirdPartyAuthProviders,
       profileDataManager,
       timeZones,
+      verifiedNameHistory,
     }));
   } catch (e) {
     yield put(fetchSettingsFailure(e.message));
@@ -98,6 +108,9 @@ export function* handleSaveSettings(action) {
     yield put(closeForm(action.payload.formId));
   } catch (e) {
     if (e.fieldErrors) {
+      if (Object.keys(e.fieldErrors).includes('name')) {
+        yield put(beginNameChange('name'));
+      }
       yield put(saveSettingsFailure({ fieldErrors: e.fieldErrors }));
     } else {
       yield put(saveSettingsFailure(e.message));
@@ -126,6 +139,9 @@ export function* handleSaveMultipleSettings(action) {
     }
   } catch (e) {
     if (e.fieldErrors) {
+      if (Object.keys(e.fieldErrors).includes('name')) {
+        yield put(beginNameChange('name'));
+      }
       yield put(saveMultipleSettingsFailure({ fieldErrors: e.fieldErrors }));
     } else {
       yield put(saveMultipleSettingsFailure(e.message));
@@ -148,6 +164,7 @@ export default function* saga() {
     deleteAccountSaga(),
     siteLanguageSaga(),
     resetPasswordSaga(),
+    nameChangeSaga(),
     thirdPartyAuthSaga(),
   ]);
 }

src/account-settings/data/selectors.js

@@ -1,5 +1,6 @@
 import { createSelector, createStructuredSelector } from 'reselect';
 import { siteLanguageListSelector, siteLanguageOptionsSelector } from '../site-language';
+import { compareVerifiedNamesByCreatedDate } from '../../utils';
 
 export const storeName = 'accountSettings';
 
@@ -7,9 +8,75 @@ export const accountSettingsSelector = state => ({ ...state[storeName] });
 
 const editableFieldNameSelector = (state, props) => props.name;
 
+const verifiedNameSettingsSelector = createSelector(
+  accountSettingsSelector,
+  accountSettings => ({
+    history: accountSettings.verifiedNameHistory.results,
+    verifiedNameEnabled: accountSettings?.verifiedNameHistory.verified_name_enabled,
+    useVerifiedNameForCerts: accountSettings?.verifiedNameHistory.use_verified_name_for_certs,
+  }),
+);
+
+const sortedVerifiedNameHistorySelector = createSelector(
+  verifiedNameSettingsSelector,
+  verifiedNameSettings => {
+    const { history } = verifiedNameSettings;
+
+    if (Array.isArray(history)) {
+      return history.sort(compareVerifiedNamesByCreatedDate);
+    }
+
+    return [];
+  },
+);
+
+const mostRecentVerifiedNameSelector = createSelector(
+  sortedVerifiedNameHistorySelector,
+  sortedHistory => (sortedHistory.length > 0 ? sortedHistory[0] : null),
+);
+
+const mostRecentApprovedVerifiedNameValueSelector = createSelector(
+  sortedVerifiedNameHistorySelector,
+  mostRecentVerifiedNameSelector,
+  (sortedHistory, mostRecentVerifiedName) => {
+    const approvedVerifiedNames = sortedHistory.filter(name => name.status === 'approved');
+    const approvedVerifiedName = approvedVerifiedNames.length > 0 ? approvedVerifiedNames[0] : null;
+
+    let verifiedName = null;
+    switch (mostRecentVerifiedName && mostRecentVerifiedName.status) {
+      case 'approved':
+      case 'denied':
+      case 'pending':
+        verifiedName = approvedVerifiedName;
+        break;
+      case 'submitted':
+        verifiedName = mostRecentVerifiedName;
+        break;
+      default:
+        verifiedName = null;
+    }
+    return verifiedName;
+  },
+);
+
 const valuesSelector = createSelector(
   accountSettingsSelector,
-  accountSettings => accountSettings.values,
+  mostRecentApprovedVerifiedNameValueSelector,
+  (accountSettings, mostRecentApprovedVerifiedNameValue) => {
+    let useVerifiedNameForCerts = (
+      accountSettings.verifiedNameHistory?.use_verified_name_for_certs || false
+    );
+
+    if (Object.keys(accountSettings.confirmationValues).includes('useVerifiedNameForCerts')) {
+      useVerifiedNameForCerts = accountSettings.confirmationValues.useVerifiedNameForCerts;
+    }
+
+    return {
+      ...accountSettings.values,
+      verified_name: mostRecentApprovedVerifiedNameValue?.verified_name,
+      useVerifiedNameForCerts,
+    };
+  },
 );
 
 const draftsSelector = createSelector(
@@ -50,6 +117,11 @@ const errorSelector = createSelector(
   accountSettings => accountSettings.errors,
 );
 
+const nameChangeModalSelector = createSelector(
+  accountSettingsSelector,
+  accountSettings => accountSettings.nameChangeModal,
+);
+
 const saveStateSelector = createSelector(
   accountSettingsSelector,
   accountSettings => accountSettings.saveState,
@@ -69,7 +141,18 @@ export const profileDataManagerSelector = createSelector(
 
 export const staticFieldsSelector = createSelector(
   accountSettingsSelector,
-  accountSettings => (accountSettings.profileDataManager ? ['name', 'email', 'country'] : []),
+  mostRecentVerifiedNameSelector,
+  (accountSettings, verifiedName) => {
+    const staticFields = [];
+    if (accountSettings.profileDataManager) {
+      staticFields.push('name', 'email', 'country');
+    }
+    if (verifiedName && ['submitted'].includes(verifiedName.status)) {
+      staticFields.push('verifiedName');
+    }
+
+    return staticFields;
+  },
 );
 
 /**
@@ -85,7 +168,11 @@ const formValuesSelector = createSelector(
   (values, drafts) => {
     const formValues = {};
     Object.entries(values).forEach(([name, value]) => {
-      formValues[name] = chooseFormValue(drafts[name], value) || '';
+      if (typeof value === 'boolean') {
+        formValues[name] = chooseFormValue(drafts[name], value);
+      } else {
+        formValues[name] = chooseFormValue(drafts[name], value) || '';
+      }
     });
     return formValues;
   },
@@ -130,21 +217,37 @@ export const accountSettingsPageSelector = createSelector(
   siteLanguageOptionsSelector,
   siteLanguageSelector,
   formValuesSelector,
+  valuesSelector,
+  draftsSelector,
+  errorSelector,
   profileDataManagerSelector,
   staticFieldsSelector,
   timeZonesSelector,
   countryTimeZonesSelector,
   activeAccountSelector,
+  nameChangeModalSelector,
+  mostRecentApprovedVerifiedNameValueSelector,
+  mostRecentVerifiedNameSelector,
+  sortedVerifiedNameHistorySelector,
+  verifiedNameSettingsSelector,
   (
     accountSettings,
     siteLanguageOptions,
     siteLanguage,
     formValues,
+    committedValues,
+    drafts,
+    formErrors,
     profileDataManager,
     staticFields,
     timeZoneOptions,
     countryTimeZoneOptions,
     activeAccount,
+    nameChangeModal,
+    verifiedName,
+    mostRecentVerifiedName,
+    verifiedNameHistory,
+    verifiedNameSettings,
   ) => ({
     siteLanguageOptions,
     siteLanguage,
@@ -155,9 +258,41 @@ export const accountSettingsPageSelector = createSelector(
     countryTimeZoneOptions,
     isActive: activeAccount,
     formValues,
+    committedValues,
+    drafts,
+    formErrors,
     profileDataManager,
     staticFields,
     tpaProviders: accountSettings.thirdPartyAuth.providers,
+    nameChangeModal,
+    verifiedName,
+    mostRecentVerifiedName,
+    verifiedNameHistory,
+    verifiedNameEnabled: verifiedNameSettings?.verifiedNameEnabled,
+  }),
+);
+
+export const certPreferenceSelector = createSelector(
+  verifiedNameSettingsSelector,
+  valuesSelector,
+  formValuesSelector,
+  mostRecentApprovedVerifiedNameValueSelector,
+  saveStateSelector,
+  errorSelector,
+  (
+    verifiedNameSettings,
+    committedValues,
+    formValues,
+    mostRecentApprovedVerifiedNameValue,
+    saveState,
+    errors,
+  ) => ({
+    originalFullName: committedValues?.name || '',
+    originalVerifiedName: mostRecentApprovedVerifiedNameValue?.verified_name || '',
+    useVerifiedNameForCerts: formValues.useVerifiedNameForCerts || false,
+    saveState,
+    verifiedNameEnabled: verifiedNameSettings.verifiedNameEnabled || false,
+    formErrors: errors,
   }),
 );
 
@@ -204,3 +339,12 @@ export const demographicsSectionSelector = createSelector(
     formErrors: errors,
   }),
 );
+
+export const nameChangeSelector = createSelector(
+  accountSettingsSelector,
+  formValuesSelector,
+  (accountSettings, formValues) => ({
+    ...accountSettings.nameChange,
+    formValues,
+  }),
+);

src/account-settings/data/service.js

@@ -7,6 +7,7 @@ import isEmpty from 'lodash.isempty';
 
 import { handleRequestError, unpackFieldErrors } from './utils';
 import { getThirdPartyAuthProviders } from '../third-party-auth';
+import { postVerifiedNameConfig } from '../certificate-preference/data/service';
 import { getCoachingPreferences, patchCoachingPreferences } from '../coaching/data/service';
 import { getDemographics, getDemographicsOptions, patchDemographics } from '../demographics/data/service';
 import { DEMOGRAPHICS_FIELDS } from '../demographics/data/utils';
@@ -176,12 +177,70 @@ export async function shouldDisplayDemographicsQuestions() {
   return false;
 }
 
+export async function getVerifiedNameEnabled() {
+  let data;
+  const client = getAuthenticatedHttpClient();
+  try {
+    const requestUrl = `${getConfig().LMS_BASE_URL}/api/edx_name_affirmation/v1/verified_name_enabled`;
+    ({ data } = await client.get(requestUrl));
+  } catch (error) {
+    return {};
+  }
+
+  return data;
+}
+
+export async function getVerifiedName() {
+  let data;
+  const client = getAuthenticatedHttpClient();
+  try {
+    const requestUrl = `${getConfig().LMS_BASE_URL}/api/edx_name_affirmation/v1/verified_name`;
+    ({ data } = await client.get(requestUrl));
+  } catch (error) {
+    return {};
+  }
+
+  return data;
+}
+
+export async function getVerifiedNameHistory() {
+  let data;
+  const client = getAuthenticatedHttpClient();
+  try {
+    const requestUrl = `${getConfig().LMS_BASE_URL}/api/edx_name_affirmation/v1/verified_name/history`;
+    ({ data } = await client.get(requestUrl));
+  } catch (error) {
+    return {};
+  }
+
+  return data;
+}
+
+export async function postVerifiedName(data) {
+  const requestConfig = { headers: { Accept: 'application/json' } };
+  const requestUrl = `${getConfig().LMS_BASE_URL}/api/edx_name_affirmation/v1/verified_name`;
+
+  await getAuthenticatedHttpClient()
+    .post(requestUrl, data, requestConfig)
+    .catch(error => handleRequestError(error));
+}
+
 /**
  * A single function to GET everything considered a setting.
  * Currently encapsulates Account, Preferences, Coaching, ThirdPartyAuth, and Demographics
  */
 export async function getSettings(username, userRoles, userId) {
-  const results = await Promise.all([
+  const [
+    account,
+    preferences,
+    thirdPartyAuthProviders,
+    profileDataManager,
+    timeZones,
+    coaching,
+    shouldDisplayDemographicsQuestionsResponse,
+    demographics,
+    demographicsOptions,
+  ] = await Promise.all([
     getAccount(username),
     getPreferences(username),
     getThirdPartyAuthProviders(),
@@ -194,15 +253,15 @@ export async function getSettings(username, userRoles, userId) {
   ]);
 
   return {
-    ...results[0],
-    ...results[1],
-    thirdPartyAuthProviders: results[2],
-    profileDataManager: results[3],
-    timeZones: results[4],
-    coaching: results[5],
-    shouldDisplayDemographicsSection: results[6],
-    ...results[7], // demographics
-    demographicsOptions: results[8],
+    ...account,
+    ...preferences,
+    thirdPartyAuthProviders,
+    profileDataManager,
+    timeZones,
+    coaching,
+    shouldDisplayDemographicsSection: shouldDisplayDemographicsQuestionsResponse,
+    ...demographics,
+    demographicsOptions,
   };
 }
 
@@ -217,11 +276,19 @@ export async function patchSettings(username, commitValues, userId) {
   const preferenceKeys = ['time_zone'];
   const coachingKeys = ['coaching'];
   const demographicsKeys = DEMOGRAPHICS_FIELDS;
+  const certificateKeys = ['useVerifiedNameForCerts'];
   const isDemographicsKey = (value, key) => key.includes('demographics');
-  const accountCommitValues = omit(commitValues, preferenceKeys, coachingKeys, demographicsKeys);
+  const accountCommitValues = omit(
+    commitValues,
+    preferenceKeys,
+    coachingKeys,
+    demographicsKeys,
+    certificateKeys,
+  );
   const preferenceCommitValues = pick(commitValues, preferenceKeys);
   const coachingCommitValues = pick(commitValues, coachingKeys);
   const demographicsCommitValues = pickBy(commitValues, isDemographicsKey);
+  const certCommitValues = pick(commitValues, certificateKeys);
   const patchRequests = [];
 
   if (!isEmpty(accountCommitValues)) {
@@ -236,6 +303,9 @@ export async function patchSettings(username, commitValues, userId) {
   if (!isEmpty(demographicsCommitValues)) {
     patchRequests.push(patchDemographics(userId, demographicsCommitValues));
   }
+  if (!isEmpty(certCommitValues)) {
+    patchRequests.push(postVerifiedNameConfig(username, certCommitValues));
+  }
 
   const results = await Promise.all(patchRequests);
   // Assigns in order of requests. Preference keys

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

@@ -28,6 +28,7 @@ exports[`DeleteAccount should match default section snapshot 1`] = `
   </p>
   <p>
     <a
+      className="default-link standalone-link"
       href="https://support.edx.org/hc/en-us/sections/115004139268-Manage-Your-Account-Settings"
       onClick={[Function]}
       target="_self"
@@ -76,6 +77,7 @@ exports[`DeleteAccount should match unverified account section snapshot 1`] = `
   </p>
   <p>
     <a
+      className="default-link standalone-link"
       href="https://support.edx.org/hc/en-us/sections/115004139268-Manage-Your-Account-Settings"
       onClick={[Function]}
       target="_self"
@@ -119,6 +121,7 @@ exports[`DeleteAccount should match unverified account section snapshot 1`] = `
       <span>
         Before proceeding, please 
         <a
+          className="default-link standalone-link"
           href="https://support.edx.org/hc/en-us/articles/115000940568-How-do-I-activate-my-account-"
           onClick={[Function]}
           target="_self"
@@ -160,6 +163,7 @@ exports[`DeleteAccount should match unverified account section snapshot 2`] = `
   </p>
   <p>
     <a
+      className="default-link standalone-link"
       href="https://support.edx.org/hc/en-us/sections/115004139268-Manage-Your-Account-Settings"
       onClick={[Function]}
       target="_self"
@@ -203,6 +207,7 @@ exports[`DeleteAccount should match unverified account section snapshot 2`] = `
       <span>
         Before proceeding, please 
         <a
+          className="default-link standalone-link"
           href="https://support.edx.org/hc/en-us/articles/207206067"
           onClick={[Function]}
           target="_self"

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

@@ -12,20 +12,43 @@ exports[`DemographicsSection should render 1`] = `
   </h2>
   <p>
     <a
+      className="default-link standalone-link"
       href="http://localhost:5335/demographics"
       onClick={[Function]}
       rel="noopener noopener noreferrer"
       target="_blank"
     >
       Why does localhost collect this information?
-      <span>
+      <span
+        className="d-inline-block align-text-top"
+      >
          
         <span
-          aria-hidden={false}
-          aria-label="Opens in a new window"
-          className="fa fa-external-link"
-          title="Opens in a new window"
-        />
+          className="pgn__icon"
+          style={
+            Object {
+              "height": "1em",
+              "width": "1em",
+            }
+          }
+        >
+          <svg
+            aria-hidden={true}
+            aria-label=""
+            fill="none"
+            focusable={false}
+            height={24}
+            role="img"
+            viewBox="0 0 24 24"
+            width={24}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M19 19H5V5h7V3H3v18h18v-9h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
       </span>
     </a>
   </p>
@@ -85,6 +108,7 @@ exports[`DemographicsSection should render 1`] = `
             </button>
           </div>
           <p
+            className={null}
             data-hj-suppress={true}
           >
             Prefer not to respond
@@ -148,6 +172,7 @@ exports[`DemographicsSection should render 1`] = `
             </button>
           </div>
           <p
+            className={null}
             data-hj-suppress={true}
           >
             <button
@@ -218,6 +243,7 @@ exports[`DemographicsSection should render 1`] = `
             </button>
           </div>
           <p
+            className={null}
             data-hj-suppress={true}
           >
             Prefer not to respond
@@ -281,6 +307,7 @@ exports[`DemographicsSection should render 1`] = `
             </button>
           </div>
           <p
+            className={null}
             data-hj-suppress={true}
           >
             Prefer not to respond
@@ -344,6 +371,7 @@ exports[`DemographicsSection should render 1`] = `
             </button>
           </div>
           <p
+            className={null}
             data-hj-suppress={true}
           >
             Prefer not to respond
@@ -407,6 +435,7 @@ exports[`DemographicsSection should render 1`] = `
             </button>
           </div>
           <p
+            className={null}
             data-hj-suppress={true}
           >
             Prefer not to respond
@@ -470,6 +499,7 @@ exports[`DemographicsSection should render 1`] = `
             </button>
           </div>
           <p
+            className={null}
             data-hj-suppress={true}
           >
             Prefer not to respond
@@ -533,6 +563,7 @@ exports[`DemographicsSection should render 1`] = `
             </button>
           </div>
           <p
+            className={null}
             data-hj-suppress={true}
           >
             Prefer not to respond
@@ -596,6 +627,7 @@ exports[`DemographicsSection should render 1`] = `
             </button>
           </div>
           <p
+            className={null}
             data-hj-suppress={true}
           >
             Prefer not to respond
@@ -622,20 +654,43 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
   </h2>
   <p>
     <a
+      className="default-link standalone-link"
       href="http://localhost:5335/demographics"
       onClick={[Function]}
       rel="noopener noopener noreferrer"
       target="_blank"
     >
       Why does localhost collect this information?
-      <span>
+      <span
+        className="d-inline-block align-text-top"
+      >
          
         <span
-          aria-hidden={false}
-          aria-label="Opens in a new window"
-          className="fa fa-external-link"
-          title="Opens in a new window"
-        />
+          className="pgn__icon"
+          style={
+            Object {
+              "height": "1em",
+              "width": "1em",
+            }
+          }
+        >
+          <svg
+            aria-hidden={true}
+            aria-label=""
+            fill="none"
+            focusable={false}
+            height={24}
+            role="img"
+            viewBox="0 0 24 24"
+            width={24}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M19 19H5V5h7V3H3v18h18v-9h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
       </span>
     </a>
   </p>
@@ -709,6 +764,7 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
             </button>
           </div>
           <p
+            className={null}
             data-hj-suppress={true}
           >
             Prefer not to respond
@@ -772,6 +828,7 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
             </button>
           </div>
           <p
+            className={null}
             data-hj-suppress={true}
           >
             <button
@@ -842,6 +899,7 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
             </button>
           </div>
           <p
+            className={null}
             data-hj-suppress={true}
           >
             Prefer not to respond
@@ -905,6 +963,7 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
             </button>
           </div>
           <p
+            className={null}
             data-hj-suppress={true}
           >
             Prefer not to respond
@@ -968,6 +1027,7 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
             </button>
           </div>
           <p
+            className={null}
             data-hj-suppress={true}
           >
             Prefer not to respond
@@ -1031,6 +1091,7 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
             </button>
           </div>
           <p
+            className={null}
             data-hj-suppress={true}
           >
             Prefer not to respond
@@ -1094,6 +1155,7 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
             </button>
           </div>
           <p
+            className={null}
             data-hj-suppress={true}
           >
             Prefer not to respond
@@ -1157,6 +1219,7 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
             </button>
           </div>
           <p
+            className={null}
             data-hj-suppress={true}
           >
             Prefer not to respond
@@ -1220,6 +1283,7 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
             </button>
           </div>
           <p
+            className={null}
             data-hj-suppress={true}
           >
             Prefer not to respond
@@ -1246,20 +1310,43 @@ exports[`DemographicsSection should render an Alert when demographicsOptions pro
   </h2>
   <p>
     <a
+      className="default-link standalone-link"
       href="http://localhost:5335/demographics"
       onClick={[Function]}
       rel="noopener noopener noreferrer"
       target="_blank"
     >
       Why does localhost collect this information?
-      <span>
+      <span
+        className="d-inline-block align-text-top"
+      >
          
         <span
-          aria-hidden={false}
-          aria-label="Opens in a new window"
-          className="fa fa-external-link"
-          title="Opens in a new window"
-        />
+          className="pgn__icon"
+          style={
+            Object {
+              "height": "1em",
+              "width": "1em",
+            }
+          }
+        >
+          <svg
+            aria-hidden={true}
+            aria-label=""
+            fill="none"
+            focusable={false}
+            height={24}
+            role="img"
+            viewBox="0 0 24 24"
+            width={24}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M19 19H5V5h7V3H3v18h18v-9h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
       </span>
     </a>
   </p>
@@ -1292,20 +1379,43 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
   </h2>
   <p>
     <a
+      className="default-link standalone-link"
       href="http://localhost:5335/demographics"
       onClick={[Function]}
       rel="noopener noopener noreferrer"
       target="_blank"
     >
       Why does localhost collect this information?
-      <span>
+      <span
+        className="d-inline-block align-text-top"
+      >
          
         <span
-          aria-hidden={false}
-          aria-label="Opens in a new window"
-          className="fa fa-external-link"
-          title="Opens in a new window"
-        />
+          className="pgn__icon"
+          style={
+            Object {
+              "height": "1em",
+              "width": "1em",
+            }
+          }
+        >
+          <svg
+            aria-hidden={true}
+            aria-label=""
+            fill="none"
+            focusable={false}
+            height={24}
+            role="img"
+            viewBox="0 0 24 24"
+            width={24}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M19 19H5V5h7V3H3v18h18v-9h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
       </span>
     </a>
   </p>
@@ -1365,6 +1475,7 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
             </button>
           </div>
           <p
+            className={null}
             data-hj-suppress={true}
           >
             Prefer not to respond
@@ -1428,6 +1539,7 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
             </button>
           </div>
           <p
+            className={null}
             data-hj-suppress={true}
           >
             Hispanic, Latin, or Spanish origin, White
@@ -1491,6 +1603,7 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
             </button>
           </div>
           <p
+            className={null}
             data-hj-suppress={true}
           >
             Prefer not to respond
@@ -1554,6 +1667,7 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
             </button>
           </div>
           <p
+            className={null}
             data-hj-suppress={true}
           >
             Prefer not to respond
@@ -1617,6 +1731,7 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
             </button>
           </div>
           <p
+            className={null}
             data-hj-suppress={true}
           >
             Prefer not to respond
@@ -1680,6 +1795,7 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
             </button>
           </div>
           <p
+            className={null}
             data-hj-suppress={true}
           >
             Prefer not to respond
@@ -1743,6 +1859,7 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
             </button>
           </div>
           <p
+            className={null}
             data-hj-suppress={true}
           >
             Prefer not to respond
@@ -1806,6 +1923,7 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
             </button>
           </div>
           <p
+            className={null}
             data-hj-suppress={true}
           >
             Prefer not to respond
@@ -1869,6 +1987,7 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
             </button>
           </div>
           <p
+            className={null}
             data-hj-suppress={true}
           >
             Prefer not to respond
@@ -1895,20 +2014,43 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
   </h2>
   <p>
     <a
+      className="default-link standalone-link"
       href="http://localhost:5335/demographics"
       onClick={[Function]}
       rel="noopener noopener noreferrer"
       target="_blank"
     >
       Why does localhost collect this information?
-      <span>
+      <span
+        className="d-inline-block align-text-top"
+      >
          
         <span
-          aria-hidden={false}
-          aria-label="Opens in a new window"
-          className="fa fa-external-link"
-          title="Opens in a new window"
-        />
+          className="pgn__icon"
+          style={
+            Object {
+              "height": "1em",
+              "width": "1em",
+            }
+          }
+        >
+          <svg
+            aria-hidden={true}
+            aria-label=""
+            fill="none"
+            focusable={false}
+            height={24}
+            role="img"
+            viewBox="0 0 24 24"
+            width={24}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M19 19H5V5h7V3H3v18h18v-9h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
       </span>
     </a>
   </p>
@@ -1968,6 +2110,7 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
             </button>
           </div>
           <p
+            className={null}
             data-hj-suppress={true}
           >
             Prefer not to respond
@@ -2031,6 +2174,7 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
             </button>
           </div>
           <p
+            className={null}
             data-hj-suppress={true}
           >
             Asian
@@ -2094,6 +2238,7 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
             </button>
           </div>
           <p
+            className={null}
             data-hj-suppress={true}
           >
             Prefer not to respond
@@ -2157,6 +2302,7 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
             </button>
           </div>
           <p
+            className={null}
             data-hj-suppress={true}
           >
             Prefer not to respond
@@ -2220,6 +2366,7 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
             </button>
           </div>
           <p
+            className={null}
             data-hj-suppress={true}
           >
             Prefer not to respond
@@ -2283,6 +2430,7 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
             </button>
           </div>
           <p
+            className={null}
             data-hj-suppress={true}
           >
             Prefer not to respond
@@ -2346,6 +2494,7 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
             </button>
           </div>
           <p
+            className={null}
             data-hj-suppress={true}
           >
             Prefer not to respond
@@ -2409,6 +2558,7 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
             </button>
           </div>
           <p
+            className={null}
             data-hj-suppress={true}
           >
             Prefer not to respond
@@ -2472,6 +2622,7 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
             </button>
           </div>
           <p
+            className={null}
             data-hj-suppress={true}
           >
             Prefer not to respond
@@ -2498,20 +2649,43 @@ exports[`DemographicsSection should set user input correctly when user provides
   </h2>
   <p>
     <a
+      className="default-link standalone-link"
       href="http://localhost:5335/demographics"
       onClick={[Function]}
       rel="noopener noopener noreferrer"
       target="_blank"
     >
       Why does localhost collect this information?
-      <span>
+      <span
+        className="d-inline-block align-text-top"
+      >
          
         <span
-          aria-hidden={false}
-          aria-label="Opens in a new window"
-          className="fa fa-external-link"
-          title="Opens in a new window"
-        />
+          className="pgn__icon"
+          style={
+            Object {
+              "height": "1em",
+              "width": "1em",
+            }
+          }
+        >
+          <svg
+            aria-hidden={true}
+            aria-label=""
+            fill="none"
+            focusable={false}
+            height={24}
+            role="img"
+            viewBox="0 0 24 24"
+            width={24}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M19 19H5V5h7V3H3v18h18v-9h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
       </span>
     </a>
   </p>
@@ -2571,6 +2745,7 @@ exports[`DemographicsSection should set user input correctly when user provides
             </button>
           </div>
           <p
+            className={null}
             data-hj-suppress={true}
           >
             Prefer not to respond
@@ -2634,6 +2809,7 @@ exports[`DemographicsSection should set user input correctly when user provides
             </button>
           </div>
           <p
+            className={null}
             data-hj-suppress={true}
           >
             <button
@@ -2704,6 +2880,7 @@ exports[`DemographicsSection should set user input correctly when user provides
             </button>
           </div>
           <p
+            className={null}
             data-hj-suppress={true}
           >
             Prefer not to respond
@@ -2767,6 +2944,7 @@ exports[`DemographicsSection should set user input correctly when user provides
             </button>
           </div>
           <p
+            className={null}
             data-hj-suppress={true}
           >
             Prefer not to respond
@@ -2830,6 +3008,7 @@ exports[`DemographicsSection should set user input correctly when user provides
             </button>
           </div>
           <p
+            className={null}
             data-hj-suppress={true}
           >
             Prefer not to respond
@@ -2893,6 +3072,7 @@ exports[`DemographicsSection should set user input correctly when user provides
             </button>
           </div>
           <p
+            className={null}
             data-hj-suppress={true}
           >
             Prefer not to respond
@@ -2956,6 +3136,7 @@ exports[`DemographicsSection should set user input correctly when user provides
             </button>
           </div>
           <p
+            className={null}
             data-hj-suppress={true}
           >
             Other: test
@@ -3019,6 +3200,7 @@ exports[`DemographicsSection should set user input correctly when user provides
             </button>
           </div>
           <p
+            className={null}
             data-hj-suppress={true}
           >
             Prefer not to respond
@@ -3082,6 +3264,7 @@ exports[`DemographicsSection should set user input correctly when user provides
             </button>
           </div>
           <p
+            className={null}
             data-hj-suppress={true}
           >
             Prefer not to respond
@@ -3108,20 +3291,43 @@ exports[`DemographicsSection should set user input correctly when user provides
   </h2>
   <p>
     <a
+      className="default-link standalone-link"
       href="http://localhost:5335/demographics"
       onClick={[Function]}
       rel="noopener noopener noreferrer"
       target="_blank"
     >
       Why does localhost collect this information?
-      <span>
+      <span
+        className="d-inline-block align-text-top"
+      >
          
         <span
-          aria-hidden={false}
-          aria-label="Opens in a new window"
-          className="fa fa-external-link"
-          title="Opens in a new window"
-        />
+          className="pgn__icon"
+          style={
+            Object {
+              "height": "1em",
+              "width": "1em",
+            }
+          }
+        >
+          <svg
+            aria-hidden={true}
+            aria-label=""
+            fill="none"
+            focusable={false}
+            height={24}
+            role="img"
+            viewBox="0 0 24 24"
+            width={24}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M19 19H5V5h7V3H3v18h18v-9h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
       </span>
     </a>
   </p>
@@ -3181,6 +3387,7 @@ exports[`DemographicsSection should set user input correctly when user provides
             </button>
           </div>
           <p
+            className={null}
             data-hj-suppress={true}
           >
             Prefer to self describe: test
@@ -3244,6 +3451,7 @@ exports[`DemographicsSection should set user input correctly when user provides
             </button>
           </div>
           <p
+            className={null}
             data-hj-suppress={true}
           >
             <button
@@ -3314,6 +3522,7 @@ exports[`DemographicsSection should set user input correctly when user provides
             </button>
           </div>
           <p
+            className={null}
             data-hj-suppress={true}
           >
             Prefer not to respond
@@ -3377,6 +3586,7 @@ exports[`DemographicsSection should set user input correctly when user provides
             </button>
           </div>
           <p
+            className={null}
             data-hj-suppress={true}
           >
             Prefer not to respond
@@ -3440,6 +3650,7 @@ exports[`DemographicsSection should set user input correctly when user provides
             </button>
           </div>
           <p
+            className={null}
             data-hj-suppress={true}
           >
             Prefer not to respond
@@ -3503,6 +3714,7 @@ exports[`DemographicsSection should set user input correctly when user provides
             </button>
           </div>
           <p
+            className={null}
             data-hj-suppress={true}
           >
             Prefer not to respond
@@ -3566,6 +3778,7 @@ exports[`DemographicsSection should set user input correctly when user provides
             </button>
           </div>
           <p
+            className={null}
             data-hj-suppress={true}
           >
             Prefer not to respond
@@ -3629,6 +3842,7 @@ exports[`DemographicsSection should set user input correctly when user provides
             </button>
           </div>
           <p
+            className={null}
             data-hj-suppress={true}
           >
             Prefer not to respond
@@ -3692,6 +3906,7 @@ exports[`DemographicsSection should set user input correctly when user provides
             </button>
           </div>
           <p
+            className={null}
             data-hj-suppress={true}
           >
             Prefer not to respond

src/account-settings/name-change/NameChange.jsx

@@ -0,0 +1,203 @@
+import React, { useEffect, useState } from 'react';
+import { connect, useDispatch } from 'react-redux';
+import { useHistory } from 'react-router-dom';
+import PropTypes from 'prop-types';
+
+import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import {
+  ActionRow,
+  Alert,
+  Button,
+  Col,
+  Form,
+  ModalDialog,
+  StatefulButton,
+} from '@edx/paragon';
+
+import { closeForm, saveSettingsReset } from '../data/actions';
+import { nameChangeSelector } from '../data/selectors';
+
+import { requestNameChange, requestNameChangeFailure, requestNameChangeReset } from './data/actions';
+import messages from './messages';
+
+function NameChangeModal({
+  targetFormId,
+  errors,
+  formValues,
+  intl,
+  saveState,
+}) {
+  const dispatch = useDispatch();
+  const { push } = useHistory();
+  const { username } = getAuthenticatedUser();
+  const [verifiedNameInput, setVerifiedNameInput] = useState(formValues.verified_name || '');
+  const [confirmedWarning, setConfirmedWarning] = useState(false);
+
+  function resetLocalState() {
+    setConfirmedWarning(false);
+    dispatch(requestNameChangeReset());
+  }
+
+  function handleChange(e) {
+    setVerifiedNameInput(e.target.value);
+  }
+
+  function handleClose() {
+    resetLocalState();
+    dispatch(closeForm(targetFormId));
+    dispatch(saveSettingsReset());
+  }
+
+  function handleSubmit(e) {
+    e.preventDefault();
+
+    if (saveState === 'pending') {
+      return;
+    }
+
+    if (!verifiedNameInput) {
+      dispatch(requestNameChangeFailure({
+        verified_name: intl.formatMessage(messages['account.settings.name.change.error.valid.name']),
+      }));
+    } else {
+      const draftProfileName = targetFormId === 'name' ? formValues.name : null;
+      dispatch(requestNameChange(username, draftProfileName, verifiedNameInput));
+    }
+  }
+
+  useEffect(() => {
+    if (saveState === 'complete') {
+      handleClose();
+      push('/id-verification');
+    }
+  }, [saveState]);
+
+  function renderErrors() {
+    if (Object.keys(errors).length > 0) {
+      return (
+        <>
+          {Object.entries(errors).map(([key, value]) => (
+            <Form.Control.Feedback type="invalid" key={key}>
+              {
+                key === 'general_error'
+                  ? intl.formatMessage(messages['account.settings.name.change.error.general'])
+                  : value
+              }
+            </Form.Control.Feedback>
+          ))}
+        </>
+      );
+    }
+    return null;
+  }
+
+  function renderTitle() {
+    if (!confirmedWarning) {
+      return intl.formatMessage(messages['account.settings.name.change.title.id']);
+    }
+
+    return intl.formatMessage(messages['account.settings.name.change.title.begin']);
+  }
+
+  function renderBody() {
+    if (!confirmedWarning) {
+      return (
+        <Alert variant="warning">
+          <p>
+            {intl.formatMessage(messages['account.settings.name.change.warning.one'])}
+          </p>
+          <p>
+            {intl.formatMessage(messages['account.settings.name.change.warning.two'])}
+          </p>
+        </Alert>
+      );
+    }
+
+    return (
+      <Form.Group as={Col} isInvalid={Object.keys(errors).length > 0}>
+        <Form.Label>
+          {intl.formatMessage(messages['account.settings.name.change.id.name.label'])}
+        </Form.Label>
+        <Form.Control
+          type="text"
+          name="verifiedName"
+          placeholder={intl.formatMessage(messages['account.settings.name.change.id.name.placeholder'])}
+          value={verifiedNameInput}
+          onChange={handleChange}
+        />
+        {renderErrors()}
+      </Form.Group>
+    );
+  }
+
+  function renderContinueButton() {
+    if (!confirmedWarning) {
+      return (
+        <Button variant="primary" onClick={() => setConfirmedWarning(true)}>
+          {intl.formatMessage(messages['account.settings.name.change.continue'])}
+        </Button>
+      );
+    }
+
+    return (
+      <StatefulButton
+        type="submit"
+        state={saveState}
+        labels={{
+          default: intl.formatMessage(messages['account.settings.name.change.continue']),
+        }}
+        disabledStates={[]}
+      />
+    );
+  }
+
+  return (
+    <ModalDialog
+      title={renderTitle()}
+      isOpen
+      hasCloseButton={false}
+      onClose={handleClose}
+    >
+
+      <Form onSubmit={handleSubmit}>
+        <ModalDialog.Header>
+          <ModalDialog.Title>
+            {renderTitle()}
+          </ModalDialog.Title>
+        </ModalDialog.Header>
+
+        <ModalDialog.Body>
+          {renderBody()}
+        </ModalDialog.Body>
+
+        <ModalDialog.Footer>
+          <ActionRow>
+            <ModalDialog.CloseButton variant="tertiary">
+              {intl.formatMessage(messages['account.settings.name.change.cancel'])}
+            </ModalDialog.CloseButton>
+            {renderContinueButton()}
+          </ActionRow>
+        </ModalDialog.Footer>
+      </Form>
+
+    </ModalDialog>
+  );
+}
+
+NameChangeModal.propTypes = {
+  targetFormId: PropTypes.string.isRequired,
+  errors: PropTypes.shape({}).isRequired,
+  formValues: PropTypes.shape({
+    name: PropTypes.string,
+    verified_name: PropTypes.string,
+  }).isRequired,
+  saveState: PropTypes.string,
+  intl: intlShape.isRequired,
+};
+
+NameChangeModal.defaultProps = {
+  saveState: null,
+};
+
+export default connect(nameChangeSelector)(injectIntl(NameChangeModal));

src/account-settings/name-change/data/actions.js

@@ -0,0 +1,25 @@
+import { AsyncActionType } from '../../data/utils';
+
+export const REQUEST_NAME_CHANGE = new AsyncActionType('ACCOUNT_SETTINGS', 'REQUEST_NAME_CHANGE');
+
+export const requestNameChange = (username, profileName, verifiedName) => ({
+  type: REQUEST_NAME_CHANGE.BASE,
+  payload: { username, profileName, verifiedName },
+});
+
+export const requestNameChangeBegin = () => ({
+  type: REQUEST_NAME_CHANGE.BEGIN,
+});
+
+export const requestNameChangeSuccess = () => ({
+  type: REQUEST_NAME_CHANGE.SUCCESS,
+});
+
+export const requestNameChangeFailure = errors => ({
+  type: REQUEST_NAME_CHANGE.FAILURE,
+  payload: { errors },
+});
+
+export const requestNameChangeReset = () => ({
+  type: REQUEST_NAME_CHANGE.RESET,
+});

src/account-settings/name-change/data/reducers.js

@@ -0,0 +1,44 @@
+import { REQUEST_NAME_CHANGE } from './actions';
+
+export const defaultState = {
+  saveState: null,
+  errors: {},
+};
+
+const reducer = (state = defaultState, action = null) => {
+  if (action !== null) {
+    switch (action.type) {
+      case REQUEST_NAME_CHANGE.BEGIN:
+        return {
+          ...state,
+          saveState: 'pending',
+          errors: {},
+        };
+
+      case REQUEST_NAME_CHANGE.SUCCESS:
+        return {
+          ...state,
+          saveState: 'complete',
+        };
+
+      case REQUEST_NAME_CHANGE.FAILURE:
+        return {
+          ...state,
+          saveState: 'error',
+          errors: action.payload.errors || { general_error: 'A technical error occurred. Please try again.' },
+        };
+
+      case REQUEST_NAME_CHANGE.RESET:
+        return {
+          ...state,
+          saveState: null,
+          errors: {},
+        };
+
+      default:
+    }
+  }
+  return state;
+};
+
+export default reducer;

src/account-settings/name-change/data/sagas.js

@@ -0,0 +1,40 @@
+import { put, call, takeEvery } from 'redux-saga/effects';
+
+import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
+
+import { postVerifiedName } from '../../data/service';
+
+import {
+  REQUEST_NAME_CHANGE,
+  requestNameChangeBegin,
+  requestNameChangeSuccess,
+  requestNameChangeFailure,
+} from './actions';
+import { postNameChange } from './service';
+
+export function* handleRequestNameChange(action) {
+  let { name: profileName } = getAuthenticatedUser();
+  try {
+    yield put(requestNameChangeBegin());
+    if (action.payload.profileName) {
+      yield call(postNameChange, action.payload.profileName);
+      profileName = action.payload.profileName;
+    }
+    yield call(postVerifiedName, {
+      username: action.payload.username,
+      verified_name: action.payload.verifiedName,
+      profile_name: profileName,
+    });
+    yield put(requestNameChangeSuccess());
+  } catch (err) {
+    if (err.customAttributes?.httpErrorResponseData) {
+      yield put(requestNameChangeFailure(JSON.parse(err.customAttributes.httpErrorResponseData)));
+    } else {
+      yield put(requestNameChangeFailure());
+    }
+  }
+}
+
+export default function* saga() {
+  yield takeEvery(REQUEST_NAME_CHANGE.BASE, handleRequestNameChange);
+}

src/account-settings/name-change/data/service.js

@@ -0,0 +1,17 @@
+import { getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+import { handleRequestError } from '../../data/utils';
+
+// eslint-disable-next-line import/prefer-default-export
+export async function postNameChange(name) {
+  // Requests a pending name change, rather than saving the account name immediately
+  const requestConfig = { headers: { Accept: 'application/json' } };
+  const requestUrl = `${getConfig().LMS_BASE_URL}/api/user/v1/accounts/name_change/`;
+
+  const { data } = await getAuthenticatedHttpClient()
+    .post(requestUrl, { name }, requestConfig)
+    .catch(error => handleRequestError(error));
+
+  return data;
+}

src/account-settings/name-change/index.js

@@ -0,0 +1,4 @@
+export { default } from './NameChange';
+export { default as reducer } from './data/reducers';
+export { default as saga } from './data/sagas';
+export { REQUEST_NAME_CHANGE } from './data/actions';

src/account-settings/name-change/messages.js

@@ -0,0 +1,56 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  'account.settings.name.change.title.id': {
+    id: 'account.settings.name.change.title.id',
+    defaultMessage: 'This name change requires identity verification',
+    description: 'Inform the user that changing their name requires identity verification',
+  },
+  'account.settings.name.change.title.begin': {
+    id: 'account.settings.name.change.title.begin',
+    defaultMessage: 'Before we begin',
+    description: 'Title before beginning the ID verification process',
+  },
+  'account.settings.name.change.warning.one': {
+    id: 'account.settings.name.change.warning.one',
+    defaultMessage: 'Warning: This action updates the name that appears on all certificates that have been earned on this account in the past and any certificates you are currently earning or will earn in the future.',
+    description: 'Warning informing the user that a name change will update the name on all of their certificates.',
+  },
+  'account.settings.name.change.warning.two': {
+    id: 'account.settings.name.change.warning.two',
+    defaultMessage: 'This action cannot be undone without verifying your identity.',
+    description: 'Warning informing the user that a name change cannot be undone without ID verification.',
+  },
+  'account.settings.name.change.id.name.label': {
+    id: 'account.settings.name.change.id.name.label',
+    defaultMessage: 'Enter your name as it appears on your government-issued ID.',
+    description: 'Form label instructing the user to enter the name on their ID.',
+  },
+  'account.settings.name.change.id.name.placeholder': {
+    id: 'account.settings.name.change.id.name.placeholder',
+    defaultMessage: 'Enter the name on your government ID',
+    description: 'Form label instructing the user to enter the name on their ID.',
+  },
+  'account.settings.name.change.error.valid.name': {
+    id: 'account.settings.name.change.error.valid.name',
+    defaultMessage: 'Please enter a valid name.',
+    description: 'Error that appears when the user doesn’t enter a valid name.',
+  },
+  'account.settings.name.change.error.general': {
+    id: 'account.settings.name.change.error.general',
+    defaultMessage: 'A technical error occurred. Please try again.',
+    description: 'Generic error message.',
+  },
+  'account.settings.name.change.continue': {
+    id: 'account.settings.name.change.continue',
+    defaultMessage: 'Continue',
+    description: 'Continue button.',
+  },
+  'account.settings.name.change.cancel': {
+    id: 'account.settings.name.change.cancel',
+    defaultMessage: 'Cancel',
+    description: 'Cancel button.',
+  },
+});
+
+export default messages;

src/account-settings/name-change/test/NameChange.test.jsx

@@ -0,0 +1,172 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
+import { Router } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+import {
+  fireEvent,
+  render,
+  screen,
+} from '@testing-library/react';
+import { createMemoryHistory } from 'history';
+
+import * as auth from '@edx/frontend-platform/auth';
+import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
+
+// Modal creates a portal.  Overriding ReactDOM.createPortal allows portals to be tested in jest.
+ReactDOM.createPortal = node => node;
+
+import NameChange from '../NameChange'; // eslint-disable-line import/first
+
+const mockDispatch = jest.fn();
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useDispatch: () => mockDispatch,
+}));
+
+jest.mock('@edx/frontend-platform/auth');
+jest.mock('../../data/selectors', () => jest.fn().mockImplementation(() => ({ nameChangeSelector: () => ({}) })));
+
+const history = createMemoryHistory();
+
+const IntlNameChange = injectIntl(NameChange);
+
+const mockStore = configureStore();
+
+describe('NameChange', () => {
+  let props = {};
+  let store = {};
+
+  const reduxWrapper = children => (
+    <Router history={history}>
+      <IntlProvider locale="en">
+        <Provider store={store}>{children}</Provider>
+      </IntlProvider>
+    </Router>
+  );
+
+  beforeEach(() => {
+    store = mockStore();
+    props = {
+      targetFormId: 'test_form',
+      errors: {},
+      formValues: {
+        name: 'edx edx',
+        verified_name: 'edX Verified',
+      },
+      saveState: null,
+      intl: {},
+    };
+
+    auth.getAuthenticatedHttpClient = jest.fn(() => ({
+      patch: async () => ({
+        data: { status: 200 },
+        catch: () => {},
+      }),
+    }));
+    auth.getAuthenticatedUser = jest.fn(() => ({ userId: 3, username: 'edx' }));
+  });
+
+  afterEach(() => jest.clearAllMocks());
+
+  it('renders populated input after clicking continue if verified_name in form data', async () => {
+    const getInput = () => screen.queryByPlaceholderText('Enter the name on your government ID');
+
+    render(reduxWrapper(<IntlNameChange {...props} />));
+    expect(getInput()).toBeNull();
+
+    const continueButton = screen.getByText('Continue');
+    fireEvent.click(continueButton);
+
+    expect(getInput().value).toBe('edX Verified');
+  });
+
+  it('renders empty input after clicking continue if verified_name not in form data', async () => {
+    const getInput = () => screen.queryByPlaceholderText('Enter the name on your government ID');
+    const formProps = {
+      ...props,
+      formValues: {
+        name: 'edx edx',
+      },
+    };
+    render(reduxWrapper(<IntlNameChange {...formProps} />));
+
+    const continueButton = screen.getByText('Continue');
+    fireEvent.click(continueButton);
+
+    expect(getInput().value).toBe('');
+  });
+
+  it('dispatches verifiedName on submit if targetForm is not "name"', async () => {
+    const dispatchData = {
+      payload: {
+        profileName: null,
+        username: 'edx',
+        verifiedName: 'Verified Name',
+      },
+      type: 'ACCOUNT_SETTINGS__REQUEST_NAME_CHANGE',
+    };
+
+    render(reduxWrapper(<IntlNameChange {...props} />));
+
+    const continueButton = screen.getByText('Continue');
+    fireEvent.click(continueButton);
+
+    const input = screen.getByPlaceholderText('Enter the name on your government ID');
+    fireEvent.change(input, { target: { value: 'Verified Name' } });
+
+    const submitButton = screen.getByText('Continue');
+    fireEvent.click(submitButton);
+    expect(mockDispatch).toHaveBeenCalledWith(dispatchData);
+  });
+
+  it('dispatches both profileName and verifiedName on submit if the targetForm is "name"', async () => {
+    const dispatchData = {
+      payload: {
+        profileName: 'edx edx',
+        username: 'edx',
+        verifiedName: 'Verified Name',
+      },
+      type: 'ACCOUNT_SETTINGS__REQUEST_NAME_CHANGE',
+    };
+    const formProps = {
+      ...props,
+      targetFormId: 'name',
+    };
+
+    render(reduxWrapper(<IntlNameChange {...formProps} />));
+
+    const continueButton = screen.getByText('Continue');
+    fireEvent.click(continueButton);
+
+    const input = screen.getByPlaceholderText('Enter the name on your government ID');
+    fireEvent.change(input, { target: { value: 'Verified Name' } });
+
+    const submitButton = screen.getByText('Continue');
+    fireEvent.click(submitButton);
+    expect(mockDispatch).toHaveBeenCalledWith(dispatchData);
+  });
+
+  it('does not dispatch action while pending', async () => {
+    props.saveState = 'pending';
+
+    render(reduxWrapper(<IntlNameChange {...props} />));
+
+    const continueButton = screen.getByText('Continue');
+    fireEvent.click(continueButton);
+
+    const input = screen.getByPlaceholderText('Enter the name on your government ID');
+    fireEvent.change(input, { target: { value: 'Verified Name' } });
+
+    const submitButton = screen.getByText('Continue');
+    fireEvent.click(submitButton);
+    expect(mockDispatch).not.toHaveBeenCalled();
+  });
+
+  it('routes to IDV when name change request is successful', async () => {
+    props.saveState = 'complete';
+
+    render(reduxWrapper(<IntlNameChange {...props} />));
+    expect(history.location.pathname).toEqual('/id-verification');
+  });
+});

src/i18n/messages/ar.json

@@ -1,5 +1,5 @@
 {
-  "account.settings.message.duplicate.tpa.provider": "إنّ حساب {provider} الذي اخترتَه مرتبط مسبقًا بحساب آخر في edX. ",
+  "account.settings.message.duplicate.tpa.provider": "The {provider} account you selected is already linked to another {siteName} account.",
   "account.settings.message.managed.settings": "تتم إدارة إعدادات الملف الشخصي بواسطة {ManagerTitle}. اتصل بالمسؤول أو {support} للحصول على المساعدة.",
   "account.settings.message.managed.settings.support": "الدعم",
   "account.settings.page.heading": "إعدادات الحساب",
@@ -14,16 +14,30 @@
   "account.settings.section.demographics.information": "معلومات اختيارية",
   "account.settings.section.site.preferences": "تفضيلات الموقع",
   "account.settings.section.linked.accounts": "الحسابات المرتبطة",
-  "account.settings.section.linked.accounts.description": "يمكنك ربط حساباتك الشخصية لتسهيل عملية تسجيل دخولك إلى edX.",
+  "account.settings.section.linked.accounts.description": "You can link your identity accounts to simplify signing in to {siteName}.",
   "account.settings.field.username": "اسم المستخدم",
-  "account.settings.field.username.help.text": "اسم المستخدم الخاص بك الذي يميزك في edX. لا يمكنك تغيير اسم المستخدم الخاص بك لاحقاً.",
+  "account.settings.field.username.help.text": "The name that identifies you on {siteName}. You cannot change your username.",
   "account.settings.field.full.name": "الاسم الكامل",
   "account.settings.field.full.name.empty": "إضافة اسم",
   "account.settings.field.full.name.help.text": "الاسم المستخدم للتحقق من هويتك والذي سوف يظهر على الشهادات الخاصة بك.",
+  "account.settings.field.full.name.help.text.non.certificate": "The name that appears on your public profile.",
+  "account.settings.field.full.name.help.text.certificate": "This name is selected to appear on your certificates and public-facing records.",
+  "account.settings.field.name.verified": "Verified name",
+  "account.settings.field.name.verified.help.text.verified": "This name has been verified by government ID.",
+  "account.settings.field.name.verified.help.text.certificate": "This name has been verified by government ID and selected to appear on your certificates and public-facing records.",
+  "account.settings.field.name.verified.help.text.submitted": "Verification has been submitted. This usually takes 48 hours or less. Verified name cannot be changed at this time.",
+  "account.settings.field.full.name.help.text.submitted": "When identity verification is successful, this name will appear on your certificates and public-facing records. Full name cannot be changed at this time.",
+  "account.settings.field.name.verified.success.message": "Your identity verification request has successfully completed. You now have the option of selecting which name you prefer to appear on your certificates and public-records.",
+  "account.settings.field.name.verified.success.message.header": "Your name change request is complete!",
+  "account.settings.field.name.verified.failure.message": "Your Verified name change attempt, “{verifiedName}”, did not pass ID verification. Your previous Verified name settings have been restored.",
+  "account.settings.field.name.verified.failure.message.header": "We were not able to verify your identity.",
+  "account.settings.field.name.verified.failure.message.help.link": "Learn more about ID verification",
+  "account.settings.field.name.verified.submitted.message": "Your identity verification request has been submitted and usually takes between 24 and 48 hours to complete. When your request is approved, your updated name will appear on all associated certificates and public-facing records.",
+  "account.settings.field.name.verified.submitted.message.header": "Your name change request is almost complete!",
   "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.email.help.text": "You receive messages from {siteName} and course teams at this address.",
   "account.settings.field.secondary.email": "عنوان البريد الإلكتروني للاسترداد",
   "account.settings.field.secondary.email.empty": "إضافة عنوان البريد الإلكتروني للاسترداد",
   "account.settings.field.secondary.email.confirmation": "لقد أرسلنا رسالة تأكيد إلى {value}. انقر فوق الرابط في الرسالة لتحديث عنوان بريد الاسترداد الإلكتروني.",
@@ -67,7 +81,7 @@
   "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.section.social.media.description": "Optionally, link your personal accounts to the social media icons on your {siteName} profile.",
   "account.settings.field.social.platform.name.linkedin": "لينكد إن",
   "account.settings.field.social.platform.name.linkedin.empty": "إضافة عنوان ملف لينكد إن ",
   "account.settings.jump.nav.delete.account": "احذف حسابي",
@@ -80,6 +94,12 @@
   "account.settings.editable.field.action.edit": "تحرير",
   "account.settings.static.field.empty": "لم يتم تحديد قيمة، فضلًا اتصل بمدير  {enterprise} لتعيين بعض التغييرات.",
   "account.settings.static.field.empty.no.admin": "لم يتم تحديد قيمة",
+  "account.settings.field.name.certificate.select": "If checked, this name will appear on your certificates and public-facing records.",
+  "account.settings.field.name.modal.certificate.title": "Choose a preferred name for certificates and public-facing records",
+  "account.settings.field.name.modal.certificate.select": "Select a name",
+  "account.settings.field.name.modal.certificate.option.full": "Full Name",
+  "account.settings.field.name.modal.certificate.option.verified": "Verified Name",
+  "account.settings.field.name.modal.certificate.button.choose": "Choose name",
   "account.settings.coaching.consent.welcome.header": "لنبدأ",
   "account.settings.coaching.consent.welcome.subheader": "نحن هنا لأجلك من البداية حتى النهاية",
   "account.settings.coaching.consent.description": "تتضمن برامج البكالوريوس التدريب الذي يركز على مهنتك وتعليمك وكيفية تحقيق نتائج مبهرة من خلال التواصل الشخصي مع خبراء متمرسين. إذا كنت مهتمًا، فقدّم المعلومات أدناه وانقر فوق \"إرسال\"، وسيتصل بك شريكنا في التدريب عبر البريد الإلكتروني و/أو الرسائل النصية لمساعدتك على المضي قدمًا. تنطبق الشروط والأحكام.*",
@@ -101,17 +121,19 @@
   "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.1": "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.",
+  "account.settings.delete.account.text.2": "Once your account is deleted, you cannot use it to take courses on {siteName}.",
+  "account.settings.delete.account.text.2.edX": "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 these 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 {siteName}.",
   "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.text.1": "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.",
+  "account.settings.delete.account.modal.text.2": "If you proceed, you will be unable to use this account to take courses on {siteName}.",
+  "account.settings.delete.account.modal.text.2.edX": "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": "إذا كنت لا تزال ترغب في المتابعة وحذف حسابك ، فيرجى إدخال كلمة مرور حسابك:",
   "account.settings.delete.account.modal.confirm.delete": "تعم، أحذف",
   "account.settings.delete.account.modal.confirm.cancel": "إلغاء",
@@ -122,7 +144,8 @@
   "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.delete.account.text.3.edX": "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}.",
+  "account.settings.delete.account.text.3": "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.",
   "account.settings.message.demographics.service.issue": "حدث خطأ أثناء محاولة استرداد معلومات حسابك أو حفظها. يرجى المحاولة مرة أخرى لاحقًا.",
   "account.settings.field.demographics.gender": "هوية الجنس",
   "account.settings.field.demographics.gender.empty": "إضافة هوية الجنس",
@@ -153,7 +176,17 @@
   "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 هذه المعلومات؟",
+  "account.settings.section.demographics.why": "Why does {siteName} collect this information?",
+  "account.settings.name.change.title.id": "This name change requires identity verification",
+  "account.settings.name.change.title.begin": "Before we begin",
+  "account.settings.name.change.warning.one": "Warning: This action updates the name that appears on all certificates that have been earned on this account in the past and any certificates you are currently earning or will earn in the future.",
+  "account.settings.name.change.warning.two": "This action cannot be undone without verifying your identity.",
+  "account.settings.name.change.id.name.label": "Enter your name as it appears on your government-issued ID.",
+  "account.settings.name.change.id.name.placeholder": "Enter the name on your government ID",
+  "account.settings.name.change.error.valid.name": "Please enter a valid name.",
+  "account.settings.name.change.error.general": "A technical error occurred. Please try again.",
+  "account.settings.name.change.continue": "Continue",
+  "account.settings.name.change.cancel": "Cancel",
   "error.notfound.message": "الصفحة التي تبحث عنها غير متوفرة أو هناك خطأ في نص الرابط. الرجاء التحقق من الرابط والمحاولة مجددا.",
   "account.settings.editable.field.password.reset.button.confirmation.support.link": "الدعم الفني",
   "account.settings.editable.field.password.reset.button.confirmation": "لقد أرسلنا رسالة إلى {email}. انقر فوق الرابط في الرسالة لإعادة تعيين كلمة المرور. إذا لم يتم استلام الرسالة؟ اتصل بـ {technicalSupportLink}.",
@@ -168,6 +201,7 @@
   "id.verification.access.blocked.denied": "لا يمكنك التحقق من هويتك في الوقت الحالي. إذا لم تقم بعد بتنشيط حسابك، فيرجى التحقق من مجلد البريد المهمل للحصول على رسالة التفعيل من {email}.",
   "id.verification.next": "التالي",
   "id.verification.support": "support",
+  "id.verification.continue.upload": "Continue with Upload",
   "id.verification.example.card.alt": "مثال على بطاقة هوية صحيحة بالاسم الكامل وصورة.",
   "id.verification.requirements.title": "متطلبات التحقق من الصورة",
   "id.verification.requirements.description": "يجب عليك اتباع الآتي لإكمال عملية التحقق الإلكتروني من هويتك:",
@@ -176,10 +210,10 @@
   "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.question": "Why does {siteName} need my photo?",
   "id.verification.privacy.need.photo.answer": "نستخدم صور التحقق الخاصة بك لتأكيد هويتك والتأكد من صحة شهادتك.",
-  "id.verification.privacy.do.with.photo.question": "ما الذي تفعله edX بهذه الصورة؟",
-  "id.verification.privacy.do.with.photo.answer": "سنقوم بتشفير صورتك بأمان وإرسالها لخدمة التحقق للمراجعة . لن يتم حفظ صورتك ومعلوماتك أو عرضها في أي مكان على edX بعد اكتمال عملية التحقق.",
+  "id.verification.privacy.do.with.photo.question": "What does {siteName} 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 {siteName} after the verification process is complete.",
   "id.verification.access.blocked.title": "التحقق من الهوية",
   "id.verification.access.blocked.enrollment": "أنت الآن ملتحق بمساق يتطلب التحقق من الهوية.",
   "id.verification.access.blocked.pending": "لقد قمت بالفعل بإرسال معلومات التحقق الخاصة بك. ستصلك رسالة على لوحة المعلومات عند اكتمال عملية التحقق (عادةً خلال 5 أيام).",
@@ -254,7 +288,7 @@
   "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.difficulty.answer": "If you require assistance with taking a photo for submission, contact {siteName} 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": "هل صورة بطاقة الهوية غير واضحة أو ضبابية؟",
@@ -293,7 +327,7 @@
   "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.review.error": "{siteName} Support Page",
   "id.verification.submitted.title": "جارِ التحقق من الهوية",
   "id.verification.submitted.text": "لقد تلقينا معلوماتك وجاري الآن العمل على التحقق من هويتك. ستصلك رسالة على لوحة المعلومات عند اكتمال عملية التحقق (عادةً خلال 5 أيام). في غضون ذلك، لا يزال بإمكانك الوصول إلى كل محتوى المساق المتوفر.",
   "id.verification.return.dashboard": "العودة إلى لوحة المعلومات",

src/i18n/messages/es_419.json

@@ -1,5 +1,5 @@
 {
-  "account.settings.message.duplicate.tpa.provider": "La cuenta de {provider} seleccionada ya está vinculada con otra cuenta de edX. ",
+  "account.settings.message.duplicate.tpa.provider": "The {provider} account you selected is already linked to another {siteName} account.",
   "account.settings.message.managed.settings": "Los ajustes en el perfil son administrados por {managerTitle}. Contacte su administrador o {support} para obtener ayuda.",
   "account.settings.message.managed.settings.support": "soporte",
   "account.settings.page.heading": "Configuración de cuenta",
@@ -14,16 +14,30 @@
   "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.",
+  "account.settings.section.linked.accounts.description": "You can link your identity accounts to simplify signing in to {siteName}.",
   "account.settings.field.username": "Nombre de usuario",
-  "account.settings.field.username.help.text": "El nombre que lo identifica en edX. No podrá cambiar el nombre de usuario.",
+  "account.settings.field.username.help.text": "The name that identifies you on {siteName}. You cannot change your username.",
   "account.settings.field.full.name": "Nombre completo",
   "account.settings.field.full.name.empty": "Añade nombre",
   "account.settings.field.full.name.help.text": "El nombre que es usado para la verificación de identidad y aparece en sus certificados.",
+  "account.settings.field.full.name.help.text.non.certificate": "The name that appears on your public profile.",
+  "account.settings.field.full.name.help.text.certificate": "This name is selected to appear on your certificates and public-facing records.",
+  "account.settings.field.name.verified": "Verified name",
+  "account.settings.field.name.verified.help.text.verified": "This name has been verified by government ID.",
+  "account.settings.field.name.verified.help.text.certificate": "This name has been verified by government ID and selected to appear on your certificates and public-facing records.",
+  "account.settings.field.name.verified.help.text.submitted": "Verification has been submitted. This usually takes 48 hours or less. Verified name cannot be changed at this time.",
+  "account.settings.field.full.name.help.text.submitted": "When identity verification is successful, this name will appear on your certificates and public-facing records. Full name cannot be changed at this time.",
+  "account.settings.field.name.verified.success.message": "Your identity verification request has successfully completed. You now have the option of selecting which name you prefer to appear on your certificates and public-records.",
+  "account.settings.field.name.verified.success.message.header": "Your name change request is complete!",
+  "account.settings.field.name.verified.failure.message": "Your Verified name change attempt, “{verifiedName}”, did not pass ID verification. Your previous Verified name settings have been restored.",
+  "account.settings.field.name.verified.failure.message.header": "We were not able to verify your identity.",
+  "account.settings.field.name.verified.failure.message.help.link": "Más información sobre la verificación de ID",
+  "account.settings.field.name.verified.submitted.message": "Your identity verification request has been submitted and usually takes between 24 and 48 hours to complete. When your request is approved, your updated name will appear on all associated certificates and public-facing records.",
+  "account.settings.field.name.verified.submitted.message.header": "Your name change request is almost complete!",
   "account.settings.field.email": "Correo electrónico (Ingresar)",
   "account.settings.field.email.empty": "Agregar correo electrónico",
   "account.settings.field.email.confirmation": "Le enviamos un mensaje de confirmación a  {value}. Hacer click en la liga del mensaje para actualizar su correo electrónico.",
-  "account.settings.field.email.help.text": "Recibes mensajes de edX y equipos del curso en esta dirección.",
+  "account.settings.field.email.help.text": "You receive messages from {siteName} and course teams at this address.",
   "account.settings.field.secondary.email": "Correo electrónico de recuperación",
   "account.settings.field.secondary.email.empty": "Agregar un correo electrónico de recuperación",
   "account.settings.field.secondary.email.confirmation": "Le enviamos un mensaje de confirmación a  {value}. Hacer click en la liga del mensaje para actualizar su correo electrónico.",
@@ -67,7 +81,7 @@
   "account.settings.field.time.zone.all": "Todas las zonas horarias",
   "account.settings.field.time.zone.country": "Zonas horarias",
   "account.settings.section.social.media": "Enlaces de redes sociales",
-  "account.settings.section.social.media.description": "Opcionalmente, conecte sus cuentas personales a los iconos de redes sociales en su perfil de edX.",
+  "account.settings.section.social.media.description": "Optionally, link your personal accounts to the social media icons on your {siteName} profile.",
   "account.settings.field.social.platform.name.linkedin": "LinkedIn",
   "account.settings.field.social.platform.name.linkedin.empty": "Agregar perfil de LinkedIn",
   "account.settings.jump.nav.delete.account": "Eliminar mi cuenta",
@@ -80,6 +94,12 @@
   "account.settings.editable.field.action.edit": "Editar",
   "account.settings.static.field.empty": "No hay valor establecido. Contacte su administrador {enterprise} para hacer cambios.",
   "account.settings.static.field.empty.no.admin": "No hay valor establecido.",
+  "account.settings.field.name.certificate.select": "If checked, this name will appear on your certificates and public-facing records.",
+  "account.settings.field.name.modal.certificate.title": "Choose a preferred name for certificates and public-facing records",
+  "account.settings.field.name.modal.certificate.select": "Select a name",
+  "account.settings.field.name.modal.certificate.option.full": "Full Name",
+  "account.settings.field.name.modal.certificate.option.verified": "Verified Name",
+  "account.settings.field.name.modal.certificate.button.choose": "Choose name",
   "account.settings.coaching.consent.welcome.header": "Empecemos",
   "account.settings.coaching.consent.welcome.subheader": "Estamos aquí para ustede desde el inicio hasta el final",
   "account.settings.coaching.consent.description": "Los programas de MicroBachelors incluyen entrenamiento que se enfoca en su carrera, educación y cómo logrará resultados a través de la comunicación individual con un profesional experimentado. Si está interesado, proporcione la información a continuación y haga clic en \"Enviar\", y nuestro socio asesor se comunicará con usted por correo electrónico y / o mensaje de texto para ayudarlo a avanzar. Los términos y Condiciones aplican.*",
@@ -101,17 +121,19 @@
   "account.settings.delete.account.before.proceeding": "Antes de continuar, por favor {actionLink}.",
   "account.settings.delete.account.header": "Eliminar mi cuenta",
   "account.settings.delete.account.subheader": "¡Sentimos que te vayas!",
-  "account.settings.delete.account.text.1": "Cuidado: la eliminación de tu cuenta y datos personales es permanente e irreversible. edX no podrá recuperar ni tu cuenta ni los datos eliminados.",
-  "account.settings.delete.account.text.2": "Una vez su cuenta haya sido eliminada, no la podrá usar para tomar cursos en la app de edX, edx.org o en cualquier otro sitio administrado por edX. Esto incluye el acceso a edx.org desde el sistema de su empleador o  universidad y el acceso a páginas privadas ofrecidas por MIT Open Learning, Wharton Executive Education y Harvard Medical School.",
-  "account.settings.delete.account.text.3.link": "siga las instrucciones para imprimir o descargar el certificado",
-  "account.settings.delete.account.text.warning": "Warning: La eliminación de la cuenta es permanente. Por favor lee la información de más arriba con atención antes de proceder. Esta es una acción irreversible, y no podrás volver a usar el mismo correo electrónico en edX.",
+  "account.settings.delete.account.text.1": "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.",
+  "account.settings.delete.account.text.2": "Once your account is deleted, you cannot use it to take courses on {siteName}.",
+  "account.settings.delete.account.text.2.edX": "Una vez su cuenta haya sido eliminada, no la podrá usar para tomar cursos en la app de edX, edx.org o en cualquier otro sitio administrado por edX. Esto incluye el acceso a edx.org desde el sistema de su empleador o  universidad y el acceso a páginas privadas ofrecidas por MIT Open Learning, Wharton Executive Education y Harvard Medical School.",
+  "account.settings.delete.account.text.3.link": "Follow these 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 {siteName}.",
   "account.settings.delete.account.text.change.instead": "En lugar de eso, ¿quieres cambiar tu correo electrónico, nombre o contraseña?",
   "account.settings.delete.account.button": "Eliminar mi cuenta",
   "account.settings.delete.account.please.activate": "activar su cuenta",
   "account.settings.delete.account.please.unlink": "Desvincular todas las cuentas de redes sociales.",
   "account.settings.delete.account.modal.header": "¿Está seguro?",
-  "account.settings.delete.account.modal.text.1": "Has seleccionado “Eliminar mi cuenta”. La eliminación de tu cuenta y datos personales es permanente e irreversible. edX no será capaz de recuperar tu cuenta o los datos que se hayan borrado.",
-  "account.settings.delete.account.modal.text.2": "Si procedes, no será posible usar esta cuenta para tomar cursos ni en la aplicación móvil de edX, ni en edx.org, ni en cualquier otro sitio hospedado por edX. Esto incluye el acceso a edx.org desde el sistema de tu empleador o universidad, y el acceso a sitios privados ofrecidos por MIT Open Learning, Wharton Executive Education, y Harvard Medical School.",
+  "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. {siteName} 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 {siteName}.",
+  "account.settings.delete.account.modal.text.2.edX": "Si procedes, no será posible usar esta cuenta para tomar cursos ni en la aplicación móvil de edX, ni en edx.org, ni en cualquier otro sitio hospedado por edX. Esto incluye el acceso a edx.org desde el sistema de tu empleador o universidad, y el acceso a sitios privados ofrecidos por MIT Open Learning, Wharton Executive Education, y Harvard Medical School.",
   "account.settings.delete.account.modal.enter.password": "Si deseas continuar y eliminar tu cuenta, por favor introduce la contraseña de tu cuenta:",
   "account.settings.delete.account.modal.confirm.delete": "Si, Eliminar",
   "account.settings.delete.account.modal.confirm.cancel": "Cancelar",
@@ -122,7 +144,8 @@
   "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.delete.account.text.3.edX": "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}.",
+  "account.settings.delete.account.text.3": "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.",
   "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",
@@ -153,7 +176,17 @@
   "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?",
+  "account.settings.section.demographics.why": "Why does {siteName} collect this information?",
+  "account.settings.name.change.title.id": "This name change requires identity verification",
+  "account.settings.name.change.title.begin": "Before we begin",
+  "account.settings.name.change.warning.one": "Warning: This action updates the name that appears on all certificates that have been earned on this account in the past and any certificates you are currently earning or will earn in the future.",
+  "account.settings.name.change.warning.two": "This action cannot be undone without verifying your identity.",
+  "account.settings.name.change.id.name.label": "Enter your name as it appears on your government-issued ID.",
+  "account.settings.name.change.id.name.placeholder": "Enter the name on your government ID",
+  "account.settings.name.change.error.valid.name": "Please enter a valid name.",
+  "account.settings.name.change.error.general": "A technical error occurred. Please try again.",
+  "account.settings.name.change.continue": "Continue",
+  "account.settings.name.change.cancel": "Cancel",
   "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}.",
@@ -167,7 +200,8 @@
   "account.settings.sso.no.providers": "No se pueden vincular cuentas en este momento.",
   "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.support": "soporte",
+  "id.verification.continue.upload": "Continue with Upload",
   "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:",
@@ -176,15 +210,15 @@
   "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.question": "Why does {siteName} need my photo?",
   "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.privacy.do.with.photo.question": "What does {siteName} 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 {siteName} after the verification process is complete.",
   "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.retake": "¿Tomar nuevamente la foto?",
   "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.",
@@ -254,7 +288,7 @@
   "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.difficulty.answer": "If you require assistance with taking a photo for submission, contact {siteName} 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": "¿La imagen de tu identificación no es clara o está demasiado borrosa?",
@@ -268,7 +302,7 @@
   "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.id.photo.instructions.upload.error.fileTooLarge": "El archivo que has seleccionado es demasiado grande. Vuelve a intentarlo con un archivo de menos de 10 MB.",
   "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?",
@@ -293,7 +327,7 @@
   "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.review.error": "{siteName} Support Page",
   "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",
@@ -314,5 +348,5 @@
   "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}"
+  "id.verification.account.name.edit": "Editar {sr}"
 }

src/i18n/messages/fr.json

@@ -1,5 +1,5 @@
 {
-  "account.settings.message.duplicate.tpa.provider": "The {provider} account you selected is already linked to another edX account.",
+  "account.settings.message.duplicate.tpa.provider": "The {provider} account you selected is already linked to another {siteName} 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",
@@ -14,16 +14,30 @@
   "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.section.linked.accounts.description": "You can link your identity accounts to simplify signing in to {siteName}.",
   "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.username.help.text": "The name that identifies you on {siteName}. 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.full.name.help.text.non.certificate": "The name that appears on your public profile.",
+  "account.settings.field.full.name.help.text.certificate": "This name is selected to appear on your certificates and public-facing records.",
+  "account.settings.field.name.verified": "Verified name",
+  "account.settings.field.name.verified.help.text.verified": "This name has been verified by government ID.",
+  "account.settings.field.name.verified.help.text.certificate": "This name has been verified by government ID and selected to appear on your certificates and public-facing records.",
+  "account.settings.field.name.verified.help.text.submitted": "Verification has been submitted. This usually takes 48 hours or less. Verified name cannot be changed at this time.",
+  "account.settings.field.full.name.help.text.submitted": "When identity verification is successful, this name will appear on your certificates and public-facing records. Full name cannot be changed at this time.",
+  "account.settings.field.name.verified.success.message": "Your identity verification request has successfully completed. You now have the option of selecting which name you prefer to appear on your certificates and public-records.",
+  "account.settings.field.name.verified.success.message.header": "Your name change request is complete!",
+  "account.settings.field.name.verified.failure.message": "Your Verified name change attempt, “{verifiedName}”, did not pass ID verification. Your previous Verified name settings have been restored.",
+  "account.settings.field.name.verified.failure.message.header": "We were not able to verify your identity.",
+  "account.settings.field.name.verified.failure.message.help.link": "Learn more about ID verification",
+  "account.settings.field.name.verified.submitted.message": "Your identity verification request has been submitted and usually takes between 24 and 48 hours to complete. When your request is approved, your updated name will appear on all associated certificates and public-facing records.",
+  "account.settings.field.name.verified.submitted.message.header": "Your name change request is almost complete!",
   "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.email.help.text": "You receive messages from {siteName} 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.",
@@ -67,7 +81,7 @@
   "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.section.social.media.description": "Optionally, link your personal accounts to the social media icons on your {siteName} 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",
@@ -80,6 +94,12 @@
   "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.field.name.certificate.select": "If checked, this name will appear on your certificates and public-facing records.",
+  "account.settings.field.name.modal.certificate.title": "Choose a preferred name for certificates and public-facing records",
+  "account.settings.field.name.modal.certificate.select": "Select a name",
+  "account.settings.field.name.modal.certificate.option.full": "Full Name",
+  "account.settings.field.name.modal.certificate.option.verified": "Verified Name",
+  "account.settings.field.name.modal.certificate.button.choose": "Choose name",
   "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.*",
@@ -101,17 +121,19 @@
   "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.1": "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.",
+  "account.settings.delete.account.text.2": "Once your account is deleted, you cannot use it to take courses on {siteName}.",
+  "account.settings.delete.account.text.2.edX": "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 these 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 {siteName}.",
   "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.text.1": "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.",
+  "account.settings.delete.account.modal.text.2": "If you proceed, you will be unable to use this account to take courses on {siteName}.",
+  "account.settings.delete.account.modal.text.2.edX": "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",
@@ -122,7 +144,8 @@
   "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.delete.account.text.3.edX": "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}.",
+  "account.settings.delete.account.text.3": "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.",
   "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",
@@ -153,7 +176,17 @@
   "account.settings.field.demographics.future_work_sector": "Future work industry",
   "account.settings.field.demographics.future_work_sector.empty": "Add work industry",
   "account.settings.field.demographics.work_sector.options.empty": "Select work industry",
-  "account.settings.section.demographics.why": "Why does edX collect this information?",
+  "account.settings.section.demographics.why": "Why does {siteName} collect this information?",
+  "account.settings.name.change.title.id": "This name change requires identity verification",
+  "account.settings.name.change.title.begin": "Before we begin",
+  "account.settings.name.change.warning.one": "Warning: This action updates the name that appears on all certificates that have been earned on this account in the past and any certificates you are currently earning or will earn in the future.",
+  "account.settings.name.change.warning.two": "This action cannot be undone without verifying your identity.",
+  "account.settings.name.change.id.name.label": "Enter your name as it appears on your government-issued ID.",
+  "account.settings.name.change.id.name.placeholder": "Enter the name on your government ID",
+  "account.settings.name.change.error.valid.name": "Please enter a valid name.",
+  "account.settings.name.change.error.general": "A technical error occurred. Please try again.",
+  "account.settings.name.change.continue": "Continue",
+  "account.settings.name.change.cancel": "Cancel",
   "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}.",
@@ -168,6 +201,7 @@
   "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.continue.upload": "Continue with Upload",
   "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:",
@@ -176,10 +210,10 @@
   "id.verification.requirements.card.id.title": "Photo Identification",
   "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.question": "Why does {siteName} 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.privacy.do.with.photo.question": "What does {siteName} 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 {siteName} after the verification process is complete.",
   "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).",
@@ -254,7 +288,7 @@
   "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.difficulty.answer": "If you require assistance with taking a photo for submission, contact {siteName} 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?",
@@ -293,7 +327,7 @@
   "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.review.error": "{siteName} 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",

src/i18n/messages/zh_CN.json

@@ -1,5 +1,5 @@
 {
-  "account.settings.message.duplicate.tpa.provider": "The {provider} account you selected is already linked to another edX account.",
+  "account.settings.message.duplicate.tpa.provider": "The {provider} account you selected is already linked to another {siteName} 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",
@@ -14,16 +14,30 @@
   "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.section.linked.accounts.description": "You can link your identity accounts to simplify signing in to {siteName}.",
   "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.username.help.text": "The name that identifies you on {siteName}. 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.full.name.help.text.non.certificate": "The name that appears on your public profile.",
+  "account.settings.field.full.name.help.text.certificate": "This name is selected to appear on your certificates and public-facing records.",
+  "account.settings.field.name.verified": "Verified name",
+  "account.settings.field.name.verified.help.text.verified": "This name has been verified by government ID.",
+  "account.settings.field.name.verified.help.text.certificate": "This name has been verified by government ID and selected to appear on your certificates and public-facing records.",
+  "account.settings.field.name.verified.help.text.submitted": "Verification has been submitted. This usually takes 48 hours or less. Verified name cannot be changed at this time.",
+  "account.settings.field.full.name.help.text.submitted": "When identity verification is successful, this name will appear on your certificates and public-facing records. Full name cannot be changed at this time.",
+  "account.settings.field.name.verified.success.message": "Your identity verification request has successfully completed. You now have the option of selecting which name you prefer to appear on your certificates and public-records.",
+  "account.settings.field.name.verified.success.message.header": "Your name change request is complete!",
+  "account.settings.field.name.verified.failure.message": "Your Verified name change attempt, “{verifiedName}”, did not pass ID verification. Your previous Verified name settings have been restored.",
+  "account.settings.field.name.verified.failure.message.header": "We were not able to verify your identity.",
+  "account.settings.field.name.verified.failure.message.help.link": "Learn more about ID verification",
+  "account.settings.field.name.verified.submitted.message": "Your identity verification request has been submitted and usually takes between 24 and 48 hours to complete. When your request is approved, your updated name will appear on all associated certificates and public-facing records.",
+  "account.settings.field.name.verified.submitted.message.header": "Your name change request is almost complete!",
   "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.email.help.text": "You receive messages from {siteName} 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.",
@@ -67,7 +81,7 @@
   "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.section.social.media.description": "Optionally, link your personal accounts to the social media icons on your {siteName} 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",
@@ -80,6 +94,12 @@
   "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.field.name.certificate.select": "If checked, this name will appear on your certificates and public-facing records.",
+  "account.settings.field.name.modal.certificate.title": "Choose a preferred name for certificates and public-facing records",
+  "account.settings.field.name.modal.certificate.select": "Select a name",
+  "account.settings.field.name.modal.certificate.option.full": "Full Name",
+  "account.settings.field.name.modal.certificate.option.verified": "Verified Name",
+  "account.settings.field.name.modal.certificate.button.choose": "Choose name",
   "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.*",
@@ -101,17 +121,19 @@
   "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.1": "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.",
+  "account.settings.delete.account.text.2": "Once your account is deleted, you cannot use it to take courses on {siteName}.",
+  "account.settings.delete.account.text.2.edX": "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 these 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 {siteName}.",
   "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.text.1": "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.",
+  "account.settings.delete.account.modal.text.2": "If you proceed, you will be unable to use this account to take courses on {siteName}.",
+  "account.settings.delete.account.modal.text.2.edX": "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",
@@ -122,7 +144,8 @@
   "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.delete.account.text.3.edX": "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}.",
+  "account.settings.delete.account.text.3": "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.",
   "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",
@@ -153,7 +176,17 @@
   "account.settings.field.demographics.future_work_sector": "Future work industry",
   "account.settings.field.demographics.future_work_sector.empty": "Add work industry",
   "account.settings.field.demographics.work_sector.options.empty": "Select work industry",
-  "account.settings.section.demographics.why": "Why does edX collect this information?",
+  "account.settings.section.demographics.why": "Why does {siteName} collect this information?",
+  "account.settings.name.change.title.id": "This name change requires identity verification",
+  "account.settings.name.change.title.begin": "Before we begin",
+  "account.settings.name.change.warning.one": "Warning: This action updates the name that appears on all certificates that have been earned on this account in the past and any certificates you are currently earning or will earn in the future.",
+  "account.settings.name.change.warning.two": "This action cannot be undone without verifying your identity.",
+  "account.settings.name.change.id.name.label": "Enter your name as it appears on your government-issued ID.",
+  "account.settings.name.change.id.name.placeholder": "Enter the name on your government ID",
+  "account.settings.name.change.error.valid.name": "Please enter a valid name.",
+  "account.settings.name.change.error.general": "A technical error occurred. Please try again.",
+  "account.settings.name.change.continue": "Continue",
+  "account.settings.name.change.cancel": "Cancel",
   "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}.",
@@ -168,6 +201,7 @@
   "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.continue.upload": "Continue with Upload",
   "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:",
@@ -176,10 +210,10 @@
   "id.verification.requirements.card.id.title": "Photo Identification",
   "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.question": "Why does {siteName} 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.privacy.do.with.photo.question": "What does {siteName} 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 {siteName} after the verification process is complete.",
   "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).",
@@ -254,7 +288,7 @@
   "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.difficulty.answer": "If you require assistance with taking a photo for submission, contact {siteName} 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?",
@@ -293,7 +327,7 @@
   "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.review.error": "{siteName} 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",

src/id-verification/Camera.jsx

@@ -262,6 +262,7 @@ class Camera extends React.Component {
     const dataUri = this.cameraPhoto.getDataUri(config);
     this.setState({ dataUri });
     this.props.onImageCapture(dataUri);
+    this.props.setPhotoMode('camera');
   }
 
   playShutterClick() {
@@ -359,6 +360,7 @@ class Camera extends React.Component {
 Camera.propTypes = {
   intl: intlShape.isRequired,
   onImageCapture: PropTypes.func.isRequired,
+  setPhotoMode: PropTypes.func.isRequired,
   isPortrait: PropTypes.bool.isRequired,
 };
 

src/id-verification/CollapsibleImageHelp.jsx

@@ -1,4 +1,5 @@
 import React, { useContext } from 'react';
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Button, Collapsible } from '@edx/paragon';
 import { Link } from 'react-router-dom';
@@ -9,10 +10,16 @@ import messages from './IdVerification.messages';
 
 function CollapsibleImageHelp(props) {
   const {
-    shouldUseCamera, setShouldUseCamera, optimizelyExperimentName, mediaAccess,
+    userId, shouldUseCamera, setShouldUseCamera, optimizelyExperimentName, mediaAccess,
   } = useContext(IdVerificationContext);
 
   function handleClick() {
+    const toggleTo = shouldUseCamera ? 'upload' : 'camera';
+    const eventName = `edx.id_verification.toggle_to.${toggleTo}`;
+    sendTrackEvent(eventName, {
+      category: 'id_verification',
+      user_id: userId,
+    });
     setShouldUseCamera(!shouldUseCamera);
   }
 

src/id-verification/IdVerification.messages.js

@@ -28,7 +28,7 @@ const messages = defineMessages({
   },
   'id.verification.requirements.description': {
     id: 'id.verification.requirements.description',
-    defaultMessage: 'In order to complete Photo Verification online, you will need the following:',
+    defaultMessage: 'In order to complete Photo Verification, you will need the following:',
     description: 'Description for the Photo Verification Requirements page.',
   },
   'id.verification.requirements.card.device.title': {
@@ -43,12 +43,12 @@ const messages = defineMessages({
   },
   'id.verification.requirements.card.id.title': {
     id: 'id.verification.requirements.card.id.title',
-    defaultMessage: 'Photo Identification',
+    defaultMessage: 'Photo Identification Card',
     description: 'Title for the Photo Identification requirement card.',
   },
   'id.verification.requirements.card.id.text': {
     id: 'id.verification.requirements.card.id.text',
-    defaultMessage: 'You need a valid identification card that contains your full name and photo.',
+    defaultMessage: 'You need a valid identification card that contains your full name and photo, such as a driver’s license or passport.',
     description: 'Text that explains that the user needs a photo ID.',
   },
   'id.verification.privacy.title': {
@@ -463,22 +463,22 @@ const messages = defineMessages({
   },
   'id.verification.id.photo.unclear.question': {
     id: 'id.verification.id.photo.unclear.question',
-    defaultMessage: 'Is your ID image not clear or too blurry?',
+    defaultMessage: 'Is your ID card image not clear or too blurry?',
     description: 'Question on what to do if the user\'s ID image is unclear',
   },
   'id.verification.id.tips.title': {
     id: 'id.verification.id.tips.title',
-    defaultMessage: 'Helpful ID Tips',
+    defaultMessage: 'Helpful Identification Card Tips',
     description: 'Title for the ID Tips page.',
   },
   'id.verification.id.tips.description': {
     id: 'id.verification.id.tips.description',
-    defaultMessage: 'Next, we\'ll need you to take a photo of a valid identification card that includes your full name and photo. 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, such as a driver’s license or passport. Please have your ID ready.',
     description: 'Description for the ID Tips page.',
   },
   'id.verification.id.tips.list.well.lit': {
     id: 'id.verification.id.tips.list.well.lit',
-    defaultMessage: 'Your ID is well-lit.',
+    defaultMessage: 'Your identification card is well-lit.',
     description: 'Tip to ensure ID is well lit.',
   },
   'id.verification.id.tips.list.clear': {
@@ -488,12 +488,12 @@ const messages = defineMessages({
   },
   'id.verification.id.photo.title.camera': {
     id: 'id.verification.id.photo.title.camera',
-    defaultMessage: 'Take a Photo of Your ID',
+    defaultMessage: 'Take a Photo of Your Identification Card',
     description: 'Title for the ID Photo page if camera access is enabled.',
   },
   'id.verification.id.photo.title.upload': {
     id: 'id.verification.id.photo.title.upload',
-    defaultMessage: 'Upload a Photo of Your ID',
+    defaultMessage: 'Upload a Photo of Your Identification Card',
     description: 'Title for the ID Photo page if camera access is disabled.',
   },
   'id.verification.id.photo.preview.alt': {
@@ -503,12 +503,12 @@ const messages = defineMessages({
   },
   'id.verification.id.photo.instructions.camera': {
     id: 'id.verification.id.photo.instructions.camera',
-    defaultMessage: 'When your ID is in position, use the Take Photo button below to take your photo.',
+    defaultMessage: 'When your ID is in position, use the Take Photo button below to take your photo. Please use a passport, driver’s license, or another identification card that includes your full name and a picture of your face.',
     description: 'Instructions to use the camera to take an ID photo.',
   },
   'id.verification.id.photo.instructions.upload': {
     id: 'id.verification.id.photo.instructions.upload',
-    defaultMessage: 'Please upload an ID photo. Ensure the entire ID fits inside the frame and is well-lit. The file size must be under 10 MB. Supported formats: ',
+    defaultMessage: 'Please upload a photo of your identification card. 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': {
@@ -603,12 +603,12 @@ const messages = defineMessages({
   },
   'id.verification.review.id.label': {
     id: 'id.verification.review.id.label',
-    defaultMessage: 'Your Photo ID',
+    defaultMessage: 'Your Identification Card',
     description: 'Label for the Photo ID card.',
   },
   'id.verification.review.id.alt': {
     id: 'id.verification.review.id.alt',
-    defaultMessage: 'Photo of your ID to be submitted.',
+    defaultMessage: 'Photo of your identification card to be submitted.',
     description: 'Alt text for the ID photo.',
   },
   'id.verification.review.id.retake': {

src/id-verification/IdVerificationContextProvider.jsx

@@ -9,9 +9,11 @@ import { getExistingIdVerification, getEnrollments } from './data/service';
 import AccessBlocked from './AccessBlocked';
 import { hasGetUserMediaSupport } from './getUserMediaShim';
 import IdVerificationContext, { MEDIA_ACCESS, ERROR_REASONS, VERIFIED_MODES } from './IdVerificationContext';
+import { VerifiedNameContext } from './VerifiedNameContext';
 
 export default function IdVerificationContextProvider({ children }) {
   const { authenticatedUser } = useContext(AppContext);
+  const { verifiedName, verifiedNameEnabled } = useContext(VerifiedNameContext);
 
   const [existingIdVerification, setExistingIdVerification] = useState(null);
   useEffect(() => {
@@ -33,8 +35,9 @@ export default function IdVerificationContextProvider({ children }) {
   const [canVerify, setCanVerify] = useState(true);
   const [error, setError] = useState('');
   useEffect(() => {
-    // Check for an existing verification attempt
-    if (existingIdVerification && !existingIdVerification.canVerify) {
+    // With verified name we can redo verification multiple times
+    // if not a successful request prevents re-verification
+    if (!verifiedNameEnabled && existingIdVerification && !existingIdVerification.canVerify) {
       const { status } = existingIdVerification;
       setCanVerify(false);
       if (status === 'pending' || status === 'approved') {
@@ -43,7 +46,7 @@ export default function IdVerificationContextProvider({ children }) {
         setError(ERROR_REASONS.CANNOT_VERIFY);
       }
     }
-  }, [existingIdVerification]);
+  }, [existingIdVerification, verifiedNameEnabled]);
   useEffect(() => {
     // Check whether the learner is enrolled in a verified course mode.
     (async () => {
@@ -79,6 +82,10 @@ export default function IdVerificationContextProvider({ children }) {
   const [optimizelyExperimentName, setOptimizelyExperimentName] = useState('');
   const [shouldUseCamera, setShouldUseCamera] = useState(false);
 
+  // The following are used to keep track of how a user has submitted photos
+  const [portraitPhotoMode, setPortraitPhotoMode] = useState('');
+  const [idPhotoMode, setIdPhotoMode] = useState('');
+
   // 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);
@@ -91,10 +98,14 @@ export default function IdVerificationContextProvider({ children }) {
     mediaStream,
     mediaAccess,
     userId: authenticatedUser.userId,
-    nameOnAccount: authenticatedUser.name,
+    // If the learner has an applicable verified name, then this should override authenticatedUser.name
+    // when determining the context value nameOnAccount.
+    nameOnAccount: verifiedName || authenticatedUser.name,
     profileDataManager,
     optimizelyExperimentName,
     shouldUseCamera,
+    portraitPhotoMode,
+    idPhotoMode,
     reachedSummary,
     setExistingIdVerification,
     setFacePhotoFile,
@@ -102,6 +113,8 @@ export default function IdVerificationContextProvider({ children }) {
     setIdPhotoName,
     setOptimizelyExperimentName,
     setShouldUseCamera,
+    setPortraitPhotoMode,
+    setIdPhotoMode,
     setReachedSummary,
     tryGetUserMedia: async () => {
       try {

src/id-verification/IdVerificationPage.jsx

@@ -11,6 +11,7 @@ import { idVerificationSelector } from './data/selectors';
 import './getUserMediaShim';
 
 import IdVerificationContextProvider from './IdVerificationContextProvider';
+import { VerifiedNameContextProvider } from './VerifiedNameContext';
 import ReviewRequirementsPanel from './panels/ReviewRequirementsPanel';
 import ChooseModePanel from './panels/ChooseModePanel';
 import RequestCameraAccessPanel from './panels/RequestCameraAccessPanel';
@@ -51,20 +52,22 @@ function IdVerificationPage(props) {
       <div className="page__id-verification container-fluid py-5">
         <div className="row">
           <div className="col-lg-6 col-md-8">
-            <IdVerificationContextProvider>
-              <Switch>
-                <Route path={`${path}/review-requirements`} component={ReviewRequirementsPanel} />
-                <Route path={`${path}/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} />
-                <Route path={`${path}/id-context`} component={IdContextPanel} />
-                <Route path={`${path}/get-name-id`} component={GetNameIdPanel} />
-                <Route path={`${path}/take-id-photo`} component={TakeIdPhotoPanel} />
-                <Route path={`${path}/summary`} component={SummaryPanel} />
-                <Route path={`${path}/submitted`} component={SubmittedPanel} />
-              </Switch>
-            </IdVerificationContextProvider>
+            <VerifiedNameContextProvider>
+              <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} />
+                  <Route path={`${path}/id-context`} component={IdContextPanel} />
+                  <Route path={`${path}/get-name-id`} component={GetNameIdPanel} />
+                  <Route path={`${path}/take-id-photo`} component={TakeIdPhotoPanel} />
+                  <Route path={`${path}/summary`} component={SummaryPanel} />
+                  <Route path={`${path}/submitted`} component={SubmittedPanel} />
+                </Switch>
+              </IdVerificationContextProvider>
+            </VerifiedNameContextProvider>
           </div>
           <div className="col-lg-6 col-md-4 pt-md-0 pt-4 text-right">
             <Button variant="link" className="px-0" onClick={() => setIsModalOpen(true)}>

src/id-verification/ImageFileUpload.jsx

@@ -5,7 +5,7 @@ import { Alert } from '@edx/paragon';
 import messages from './IdVerification.messages';
 import SupportedMediaTypes from './SupportedMediaTypes';
 
-export default function ImageFileUpload({ onFileChange, intl }) {
+export default function ImageFileUpload({ onFileChange, setPhotoMode, intl }) {
   const [error, setError] = useState(null);
   const errorTypes = {
     invalidFileType: 'invalidFileType',
@@ -26,7 +26,10 @@ export default function ImageFileUpload({ onFileChange, intl }) {
     } else {
       setError(null);
       const fileReader = new FileReader();
-      fileReader.addEventListener('load', () => onFileChange(fileReader.result));
+      fileReader.addEventListener('load', () => {
+        onFileChange(fileReader.result);
+        setPhotoMode('upload');
+      });
       fileReader.readAsDataURL(fileObject);
     }
   }, []);
@@ -56,5 +59,6 @@ export default function ImageFileUpload({ onFileChange, intl }) {
 
 ImageFileUpload.propTypes = {
   onFileChange: PropTypes.func.isRequired,
+  setPhotoMode: PropTypes.func.isRequired,
   intl: intlShape.isRequired,
 };

src/id-verification/VerifiedNameContext.jsx

@@ -0,0 +1,40 @@
+import React, { createContext, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+
+import { getVerifiedNameHistory } from '../account-settings/data/service';
+import { getMostRecentApprovedOrPendingVerifiedName } from '../utils';
+
+export const VerifiedNameContext = createContext();
+
+export function VerifiedNameContextProvider({ children }) {
+  const [verifiedNameEnabled, setVerifiedNameEnabled] = useState(false);
+  const [verifiedName, setVerifiedName] = useState('');
+  useEffect(() => {
+    // Make API call to retrieve VerifiedName history for the learner.
+    // From this information, derive whether the verified name feature is enabled
+    // and the learner's verified name as it should be displayed during the IDV process.
+    (async () => {
+      const response = await getVerifiedNameHistory();
+      if (response) {
+        const { verified_name_enabled: verifiedNameFeatureEnabled, results } = response;
+        setVerifiedNameEnabled(verifiedNameFeatureEnabled);
+
+        if (verifiedNameFeatureEnabled) {
+          const applicableVerifiedName = getMostRecentApprovedOrPendingVerifiedName(results);
+          setVerifiedName(applicableVerifiedName);
+        }
+      }
+    })();
+  }, []);
+
+  const value = {
+    verifiedNameEnabled,
+    verifiedName,
+  };
+
+  return (<VerifiedNameContext.Provider value={value}>{children}</VerifiedNameContext.Provider>);
+}
+
+VerifiedNameContextProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+};

src/id-verification/data/service.js

@@ -65,6 +65,8 @@ export async function submitIdVerification(verificationData) {
     idPhotoFile: 'photo_id_image',
     idPhotoName: 'full_name',
     optimizelyExperimentName: 'experiment_name',
+    portraitPhotoMode: 'portrait_photo_mode',
+    idPhotoMode: 'id_photo_mode',
   };
   const postData = {};
   // Don't include blank/null/undefined values.

src/id-verification/panels/ChooseModePanel.jsx

@@ -1,5 +1,6 @@
 import React, { useContext } from 'react';
 import { Link } from 'react-router-dom';
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Form } from '@edx/paragon';
 
@@ -10,10 +11,16 @@ import messages from '../IdVerification.messages';
 
 function ChooseModePanel(props) {
   const panelSlug = 'choose-mode';
-  const { shouldUseCamera, setShouldUseCamera } = useContext(IdVerificationContext);
+  const { userId, shouldUseCamera, setShouldUseCamera } = useContext(IdVerificationContext);
 
   function onPhotoModeChange(value) {
     setShouldUseCamera(value);
+    const mode = value ? 'camera' : 'upload';
+    const eventName = `edx.id_verification.choose.${mode}`;
+    sendTrackEvent(eventName, {
+      category: 'id_verification',
+      user_id: userId,
+    });
   }
 
   return (

src/id-verification/panels/GetNameIdPanel.jsx

@@ -146,9 +146,15 @@ function GetNameIdPanel(props) {
             onChange={e => setIdPhotoName(e.target.value)}
             data-testid="name-input"
           />
-          <Form.Control.Feedback id="photo-id-name-feedback" type="invalid">
-            {getErrorMessage()}
-          </Form.Control.Feedback>
+          {(invalidName || profileDataManager) && (
+            <Form.Control.Feedback
+              id="photo-id-name-feedback"
+              data-testid="id-name-feedback-message"
+              type="invalid"
+            >
+              {getErrorMessage()}
+            </Form.Control.Feedback>
+          )}
         </Form.Group>
       </Form>
 

src/id-verification/panels/SummaryPanel.jsx

@@ -11,6 +11,7 @@ import { useNextPanelSlug } from '../routing-utilities';
 import BasePanel from './BasePanel';
 import IdVerificationContext from '../IdVerificationContext';
 import ImagePreview from '../ImagePreview';
+import { VerifiedNameContext } from '../VerifiedNameContext';
 
 import messages from '../IdVerification.messages';
 import CameraHelpWithUpload from '../CameraHelpWithUpload';
@@ -28,7 +29,10 @@ function SummaryPanel(props) {
     stopUserMedia,
     optimizelyExperimentName,
     setReachedSummary,
+    portraitPhotoMode,
+    idPhotoMode,
   } = useContext(IdVerificationContext);
+  const { verifiedNameEnabled } = useContext(VerifiedNameContext);
   const nameToBeUsed = idPhotoName || nameOnAccount || '';
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [submissionError, setSubmissionError] = useState(null);
@@ -70,9 +74,24 @@ function SummaryPanel(props) {
       };
       if (idPhotoName) {
         verificationData.idPhotoName = idPhotoName;
+      } else if (verifiedNameEnabled) {
+        /**
+         * If learner has not entered an idPhotoName on the GetNameIdPanel,
+         * and the verified name feature is enabled, use the current nameOnAccount
+         * when submitting IDV. The reason we only do this if the feature is enabled
+         * is that, when the feature is off, the server will change the learner's
+         * profile name to this value. If we send the idPhotoName on all requests,
+         * even ones where the learner does not change the idPhotoName, then the
+         * server will record that the full name on the learner's profile has
+         * a requested change, even if the name is the same. This will pollute
+         * the history.
+         */
+        verificationData.idPhotoName = nameOnAccount;
       }
       if (optimizelyExperimentName) {
         verificationData.optimizelyExperimentName = optimizelyExperimentName;
+        verificationData.portraitPhotoMode = portraitPhotoMode;
+        verificationData.idPhotoMode = idPhotoMode;
       }
       const result = await submitIdVerification(verificationData);
       if (result.success) {

src/id-verification/panels/TakeIdPhotoPanel.jsx

@@ -18,7 +18,7 @@ function TakeIdPhotoPanel(props) {
   const panelSlug = 'take-id-photo';
   const nextPanelSlug = useNextPanelSlug(panelSlug);
   const {
-    setIdPhotoFile, idPhotoFile, optimizelyExperimentName, shouldUseCamera,
+    setIdPhotoFile, idPhotoFile, optimizelyExperimentName, shouldUseCamera, setIdPhotoMode,
   } = useContext(IdVerificationContext);
 
   return (
@@ -34,7 +34,7 @@ function TakeIdPhotoPanel(props) {
             <p>
               {props.intl.formatMessage(messages['id.verification.id.photo.instructions.camera'])}
             </p>
-            <Camera onImageCapture={setIdPhotoFile} isPortrait={false} />
+            <Camera onImageCapture={setIdPhotoFile} setPhotoMode={setIdPhotoMode} isPortrait={false} />
           </div>
         ) : (
           <div style={{ marginBottom: '1.25rem' }}>
@@ -42,7 +42,7 @@ function TakeIdPhotoPanel(props) {
               {props.intl.formatMessage(messages['id.verification.id.photo.instructions.upload'])}
               <SupportedMediaTypes />
             </p>
-            <ImageFileUpload onFileChange={setIdPhotoFile} intl={props.intl} />
+            <ImageFileUpload onFileChange={setIdPhotoFile} setPhotoMode={setIdPhotoMode} intl={props.intl} />
           </div>
         )}
       </div>

src/id-verification/panels/TakePortraitPhotoPanel.jsx

@@ -18,7 +18,7 @@ function TakePortraitPhotoPanel(props) {
   const panelSlug = 'take-portrait-photo';
   const nextPanelSlug = useNextPanelSlug(panelSlug);
   const {
-    setFacePhotoFile, facePhotoFile, shouldUseCamera, optimizelyExperimentName,
+    setFacePhotoFile, facePhotoFile, shouldUseCamera, optimizelyExperimentName, setPortraitPhotoMode,
   } = useContext(IdVerificationContext);
 
   return (
@@ -34,7 +34,7 @@ function TakePortraitPhotoPanel(props) {
             <p>
               {props.intl.formatMessage(messages['id.verification.portrait.photo.instructions.camera'])}
             </p>
-            <Camera onImageCapture={setFacePhotoFile} isPortrait />
+            <Camera onImageCapture={setFacePhotoFile} setPhotoMode={setPortraitPhotoMode} isPortrait />
           </div>
         ) : (
           <div style={{ marginBottom: '1.25rem' }}>
@@ -42,7 +42,7 @@ function TakePortraitPhotoPanel(props) {
               {props.intl.formatMessage(messages['id.verification.portrait.photo.instructions.upload'])}
               <SupportedMediaTypes />
             </p>
-            <ImageFileUpload onFileChange={setFacePhotoFile} intl={props.intl} />
+            <ImageFileUpload onFileChange={setFacePhotoFile} setPhotoMode={setPortraitPhotoMode} intl={props.intl} />
           </div>
         )}
       </div>

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

@@ -28,6 +28,7 @@ describe('SubmittedPanel', () => {
   const defaultProps = {
     intl: {},
     onImageCapture: jest.fn(),
+    setPhotoMode: jest.fn(),
     isPortrait: true,
   };
 
@@ -57,6 +58,7 @@ describe('SubmittedPanel', () => {
     expect(button).toHaveTextContent('Take Photo');
     fireEvent.click(button);
     expect(defaultProps.onImageCapture).toHaveBeenCalled();
+    expect(defaultProps.setPhotoMode).toHaveBeenCalledWith('camera');
   });
 
   it('shows correct help text for portrait photo capture', async () => {

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

@@ -9,9 +9,11 @@ import { getProfileDataManager } from '../../account-settings/data/service';
 
 import { getExistingIdVerification, getEnrollments } from '../data/service';
 import IdVerificationContextProvider from '../IdVerificationContextProvider';
+import { VerifiedNameContext } from '../VerifiedNameContext';
 
 jest.mock('../../account-settings/data/service', () => ({
   getProfileDataManager: jest.fn(),
+  getVerifiedNameHistory: jest.fn(),
 }));
 
 jest.mock('../data/service', () => ({
@@ -30,12 +32,15 @@ describe('IdVerificationContextProvider', () => {
   });
 
   it('renders correctly and calls getExistingIdVerification + getEnrollments', async () => {
-    const context = { authenticatedUser: { userId: 3, roles: [] } };
+    const appContext = { authenticatedUser: { userId: 3, roles: [] } };
+    const verifiedNameContext = { verifiedName: '', verifiedNameEnabled: false };
     await act(async () => render((
-      <AppContext.Provider value={context}>
-        <IntlProvider locale="en">
-          <IdVerificationContextProvider {...defaultProps} />
-        </IntlProvider>
+      <AppContext.Provider value={appContext}>
+        <VerifiedNameContext.Provider value={verifiedNameContext}>
+          <IntlProvider locale="en">
+            <IdVerificationContextProvider {...defaultProps} />
+          </IntlProvider>
+        </VerifiedNameContext.Provider>
       </AppContext.Provider>
     )));
     expect(getExistingIdVerification).toHaveBeenCalled();
@@ -43,23 +48,26 @@ describe('IdVerificationContextProvider', () => {
   });
 
   it('calls getProfileDataManager if the user has any roles', async () => {
-    const context = {
+    const appContext = {
       authenticatedUser: {
         userId: 3,
         username: 'testname',
         roles: ['enterprise_learner'],
       },
     };
+    const verifiedNameContext = { verifiedName: '', verifiedNameEnabled: false };
     await act(async () => render((
-      <AppContext.Provider value={context}>
-        <IntlProvider locale="en">
-          <IdVerificationContextProvider {...defaultProps} />
-        </IntlProvider>
+      <AppContext.Provider value={appContext}>
+        <VerifiedNameContext.Provider value={verifiedNameContext}>
+          <IntlProvider locale="en">
+            <IdVerificationContextProvider {...defaultProps} />
+          </IntlProvider>
+        </VerifiedNameContext.Provider>
       </AppContext.Provider>
     )));
     expect(getProfileDataManager).toHaveBeenCalledWith(
-      context.authenticatedUser.username,
-      context.authenticatedUser.roles,
+      appContext.authenticatedUser.username,
+      appContext.authenticatedUser.roles,
     );
   });
 });

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

@@ -11,6 +11,13 @@ import * as selectors from '../data/selectors';
 
 jest.mock('../data/selectors', () => jest.fn().mockImplementation(() => ({ idVerificationSelector: () => ({}) })));
 jest.mock('../IdVerificationContextProvider', () => jest.fn(({ children }) => children));
+jest.mock('../VerifiedNameContext', () => {
+  const originalModule = jest.requireActual('../VerifiedNameContext');
+  return {
+    ...originalModule,
+    VerifiedNameContextProvider: jest.fn(({ children }) => children),
+  };
+});
 jest.mock('../panels/ReviewRequirementsPanel');
 jest.mock('../panels/RequestCameraAccessPanel');
 jest.mock('../panels/PortraitPhotoContextPanel');

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

@@ -0,0 +1,85 @@
+import React, { useContext } from 'react';
+import { render, cleanup, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
+import { getVerifiedNameHistory } from '../../account-settings/data/service';
+import { VerifiedNameContext, VerifiedNameContextProvider } from '../VerifiedNameContext';
+
+const VerifiedNameContextTestComponent = () => {
+  const { verifiedName, verifiedNameEnabled } = useContext(VerifiedNameContext);
+  return (
+    <>
+      {verifiedNameEnabled && (<div data-testid="verified-name">{verifiedName}</div>)}
+      <div data-testid="verified-name-enabled">{verifiedNameEnabled ? 'true' : 'false'}</div>
+    </>
+  );
+};
+
+jest.mock('../../account-settings/data/service', () => ({
+  getVerifiedNameHistory: jest.fn(),
+}));
+
+describe('VerifiedNameContextProvider', () => {
+  const defaultProps = {
+    children: <div />,
+    intl: {},
+  };
+
+  afterEach(() => {
+    cleanup();
+    jest.clearAllMocks();
+  });
+
+  it('calls getVerifiedNameHistory', async () => {
+    jest.mock('../../account-settings/data/service', () => ({
+      getVerifiedNameHistory: jest.fn(),
+    }));
+
+    render(<VerifiedNameContextProvider {...defaultProps} />);
+    expect(getVerifiedNameHistory).toHaveBeenCalledTimes(1);
+  });
+
+  it('sets verifiedName and verifiedNameEnabled correctly when verified name feature enabled', async () => {
+    const mockReturnValue = {
+      verified_name_enabled: true,
+      results: [{
+        verified_name: 'Michael',
+        status: 'approved',
+        created: '2021-08-31T18:33:32.489200Z',
+      }],
+    };
+    getVerifiedNameHistory.mockReturnValueOnce(mockReturnValue);
+
+    const { getByTestId } = render((
+      <VerifiedNameContextProvider {...defaultProps}>
+        <VerifiedNameContextTestComponent />
+      </VerifiedNameContextProvider>
+    ));
+
+    await waitFor(() => expect(getVerifiedNameHistory).toHaveBeenCalledTimes(1));
+    expect(getByTestId('verified-name')).toHaveTextContent('Michael');
+    expect(getByTestId('verified-name-enabled')).toHaveTextContent('true');
+  });
+
+  it('sets verifiedName and verifiedNameEnabled correctly when verified name feature not enabled', async () => {
+    const mockReturnValue = {
+      verified_name_enabled: false,
+      results: [{
+        verified_name: 'Michael',
+        status: 'approved',
+        created: '2021-08-31T18:33:32.489200Z',
+      }],
+    };
+    getVerifiedNameHistory.mockReturnValueOnce(mockReturnValue);
+
+    const { queryByTestId } = render((
+      <VerifiedNameContextProvider {...defaultProps}>
+        <VerifiedNameContextTestComponent />
+      </VerifiedNameContextProvider>
+    ));
+
+    await waitFor(() => expect(getVerifiedNameHistory).toHaveBeenCalledTimes(1));
+    expect(queryByTestId('verified-name')).toBeNull();
+    expect(queryByTestId('verified-name-enabled')).toHaveTextContent('false');
+  });
+});

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

@@ -54,8 +54,10 @@ describe('GetNameIdPanel', () => {
     const noButton = await screen.findByTestId('name-matches-no');
     const input = await screen.findByTestId('name-input');
     const nextButton = await screen.findByTestId('next-button');
+    const errorMessageQuery = await screen.queryByTestId('id-name-feedback-message');
 
     expect(input).toHaveProperty('readOnly');
+    expect(errorMessageQuery).toBeNull();
 
     fireEvent.click(noButton);
     expect(input).toHaveProperty('readOnly', false);
@@ -63,6 +65,8 @@ describe('GetNameIdPanel', () => {
 
     fireEvent.change(input, { target: { value: 'test change' } });
     expect(contextValue.setIdPhotoName).toHaveBeenCalled();
+    // Ensure the feedback message on name shows when the user says the name does not match ID
+    expect(await screen.queryByTestId('id-name-feedback-message')).toBeTruthy();
 
     fireEvent.click(yesButton);
     expect(input).toHaveProperty('readOnly');
@@ -77,11 +81,13 @@ describe('GetNameIdPanel', () => {
     const noButton = await screen.findByTestId('name-matches-no');
     const input = await screen.findByTestId('name-input');
     const nextButton = await screen.findByTestId('next-button');
+    const errorMessageQuery = await screen.queryByTestId('id-name-feedback-message');
 
     expect(yesButton).toHaveProperty('disabled');
     expect(noButton).toHaveProperty('disabled');
     expect(input).toHaveProperty('readOnly', false);
     expect(nextButton.classList.contains('disabled')).toBe(true);
+    expect(errorMessageQuery).toBeTruthy();
   });
 
   it('blocks the user from changing account name if managed by a third party', async () => {

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

@@ -10,6 +10,7 @@ import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
 import * as dataService from '../../data/service';
 import IdVerificationContext from '../../IdVerificationContext';
 import SummaryPanel from '../../panels/SummaryPanel';
+import { VerifiedNameContext } from '../../VerifiedNameContext';
 
 jest.mock('@edx/frontend-platform/analytics', () => ({
   sendTrackEvent: jest.fn(),
@@ -27,23 +28,31 @@ describe('SummaryPanel', () => {
     intl: {},
   };
 
-  const contextValue = {
+  const appContextValue = {
     facePhotoFile: 'test.jpg',
     idPhotoFile: 'test.jpg',
     nameOnAccount: 'test name',
     idPhotoName: 'test name',
     optimizelyExperimentName: 'test-experiment',
+    portraitPhotoMode: 'camera',
+    idPhotoMode: 'upload',
     stopUserMedia: jest.fn(),
     setReachedSummary: jest.fn(),
   };
 
+  const verifiedNameContextValue = {
+    verifiedNameEnabled: false,
+  };
+
   const getPanel = async () => {
     await act(async () => render((
       <Router history={history}>
         <IntlProvider locale="en">
-          <IdVerificationContext.Provider value={contextValue}>
-            <IntlSummaryPanel {...defaultProps} />
-          </IdVerificationContext.Provider>
+          <VerifiedNameContext.Provider value={verifiedNameContextValue}>
+            <IdVerificationContext.Provider value={appContextValue}>
+              <IntlSummaryPanel {...defaultProps} />
+            </IdVerificationContext.Provider>
+          </VerifiedNameContext.Provider>
         </IntlProvider>
       </Router>
     )));
@@ -70,17 +79,17 @@ describe('SummaryPanel', () => {
   });
 
   it('allows user to upload ID photo', async () => {
-    contextValue.optimizelyExperimentName = '';
+    appContextValue.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';
+    appContextValue.optimizelyExperimentName = 'test-experiment';
   });
 
   it('displays warning if account is managed by a third party', async () => {
-    contextValue.profileDataManager = 'test-org';
+    appContextValue.profileDataManager = 'test-org';
     await getPanel();
     const warning = await screen.getAllByText('test-org');
     expect(warning.length).toEqual(1);
@@ -88,25 +97,29 @@ describe('SummaryPanel', () => {
 
   it('submits', async () => {
     const verificationData = {
-      facePhotoFile: contextValue.facePhotoFile,
-      idPhotoFile: contextValue.idPhotoFile,
-      idPhotoName: contextValue.idPhotoName,
-      optimizelyExperimentName: contextValue.optimizelyExperimentName,
+      facePhotoFile: appContextValue.facePhotoFile,
+      idPhotoFile: appContextValue.idPhotoFile,
+      idPhotoName: appContextValue.idPhotoName,
+      optimizelyExperimentName: appContextValue.optimizelyExperimentName,
+      portraitPhotoMode: appContextValue.portraitPhotoMode,
+      idPhotoMode: appContextValue.idPhotoMode,
       courseRunKey: null,
     };
     await getPanel();
     const button = await screen.findByTestId('submit-button');
     fireEvent.click(button);
     expect(dataService.submitIdVerification).toHaveBeenCalledWith(verificationData);
-    await waitFor(() => expect(contextValue.stopUserMedia).toHaveBeenCalled());
+    await waitFor(() => expect(appContextValue.stopUserMedia).toHaveBeenCalled());
   });
 
   it('does not submit a name if name is blank', async () => {
-    contextValue.idPhotoName = '';
+    appContextValue.idPhotoName = '';
     const verificationData = {
-      facePhotoFile: contextValue.facePhotoFile,
-      idPhotoFile: contextValue.idPhotoFile,
-      optimizelyExperimentName: contextValue.optimizelyExperimentName,
+      facePhotoFile: appContextValue.facePhotoFile,
+      idPhotoFile: appContextValue.idPhotoFile,
+      portraitPhotoMode: appContextValue.portraitPhotoMode,
+      idPhotoMode: appContextValue.idPhotoMode,
+      optimizelyExperimentName: appContextValue.optimizelyExperimentName,
       courseRunKey: null,
     };
     await getPanel();
@@ -116,11 +129,13 @@ describe('SummaryPanel', () => {
   });
 
   it('does not submit a name if name is unchanged', async () => {
-    contextValue.idPhotoName = null;
+    appContextValue.idPhotoName = null;
     const verificationData = {
-      facePhotoFile: contextValue.facePhotoFile,
-      idPhotoFile: contextValue.idPhotoFile,
-      optimizelyExperimentName: contextValue.optimizelyExperimentName,
+      facePhotoFile: appContextValue.facePhotoFile,
+      idPhotoFile: appContextValue.idPhotoFile,
+      portraitPhotoMode: appContextValue.portraitPhotoMode,
+      idPhotoMode: appContextValue.idPhotoMode,
+      optimizelyExperimentName: appContextValue.optimizelyExperimentName,
       courseRunKey: null,
     };
     await getPanel();
@@ -129,6 +144,24 @@ describe('SummaryPanel', () => {
     expect(dataService.submitIdVerification).toHaveBeenCalledWith(verificationData);
   });
 
+  it('submits a name if a name is unchanged if verified name feature is enabled', async () => {
+    appContextValue.idPhotoName = null;
+    verifiedNameContextValue.verifiedNameEnabled = true;
+    const verificationData = {
+      facePhotoFile: appContextValue.facePhotoFile,
+      idPhotoFile: appContextValue.idPhotoFile,
+      portraitPhotoMode: appContextValue.portraitPhotoMode,
+      idPhotoMode: appContextValue.idPhotoMode,
+      optimizelyExperimentName: appContextValue.optimizelyExperimentName,
+      courseRunKey: null,
+      idPhotoName: appContextValue.nameOnAccount,
+    };
+    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();
@@ -199,6 +232,6 @@ describe('SummaryPanel', () => {
     await getPanel();
     const collapsible = await screen.queryByTestId('collapsible');
     expect(collapsible).not.toBeInTheDocument();
-    contextValue.optimizelyExperimentName = 'test-experiment';
+    appContextValue.optimizelyExperimentName = 'test-experiment';
   });
 });

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

@@ -98,10 +98,10 @@ describe('TakeIdPhotoPanel', () => {
     )));
 
     // check that upload title and text are correct
-    const title = await screen.findByText('Upload a Photo of Your ID');
+    const title = await screen.findByText('Upload a Photo of Your Identification Card');
     expect(title).toBeVisible();
 
     const text = await screen.findByTestId('upload-text');
-    expect(text.textContent).toContain('Please upload an ID photo');
+    expect(text.textContent).toContain('Please upload a photo of your identification card');
   });
 });

src/index.jsx

@@ -1,4 +1,6 @@
-import 'babel-polyfill';
+import 'core-js/stable';
+import 'regenerator-runtime/runtime';
+
 import 'formdata-polyfill';
 import { AppProvider, ErrorPage } from '@edx/frontend-platform/react';
 import {
@@ -18,7 +20,6 @@ import CoachingConsent from './account-settings/coaching/CoachingConsent';
 import appMessages from './i18n';
 
 import './index.scss';
-import './assets/favicon.ico';
 
 subscribe(APP_READY, () => {
   ReactDOM.render(

src/setupTest.js

@@ -1,4 +1,5 @@
-/* eslint-disable import/no-extraneous-dependencies */
+import 'core-js/stable';
+import 'regenerator-runtime/runtime';
 
 import Enzyme from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';

src/tests/utils.test.js

@@ -0,0 +1,83 @@
+import { compareVerifiedNamesByCreatedDate, getMostRecentApprovedOrPendingVerifiedName } from '../utils';
+
+describe('getMostRecentApprovedOrPendingVerifiedName', () => {
+  it('returns correct verified name if one exists', () => {
+    const verifiedNames = [
+      {
+        created: '2021-08-31T18:33:32.489200Z',
+        verified_name: 'Mike',
+        status: 'denied',
+      },
+      {
+        created: '2021-09-03T18:33:32.489200Z',
+        verified_name: 'Michelangelo',
+        status: 'approved',
+      },
+    ];
+
+    expect(getMostRecentApprovedOrPendingVerifiedName(verifiedNames)).toEqual(verifiedNames[1].verified_name);
+  });
+  it('returns no verified name if one does not exist', () => {
+    const verifiedNames = [
+      {
+        created: '2021-08-31T18:33:32.489200Z',
+        verified_name: 'Mike',
+        status: 'denied',
+      },
+      {
+        created: '2021-09-03T18:33:32.489200Z',
+        verified_name: 'Michelangelo',
+        status: 'submitted',
+      },
+    ];
+
+    expect(getMostRecentApprovedOrPendingVerifiedName(verifiedNames)).toBeNull();
+  });
+});
+
+describe('compareVerifiedNamesByCreatedDate', () => {
+  it('returns 0 when equal', () => {
+    const a = {
+      created: '2021-08-31T18:33:32.489200Z',
+      verified_name: 'Mike',
+      status: 'denied',
+    };
+    const b = {
+      created: '2021-08-31T18:33:32.489200Z',
+      verified_name: 'Michael',
+      status: 'denied',
+    };
+
+    expect(compareVerifiedNamesByCreatedDate(a, b)).toEqual(0);
+  });
+
+  it('returns negative number when first argument is greater than second argument', () => {
+    const a = {
+      created: '2021-09-30T18:33:32.489200Z',
+      verified_name: 'Mike',
+      status: 'denied',
+    };
+    const b = {
+      created: '2021-08-31T18:33:32.489200Z',
+      verified_name: 'Michael',
+      status: 'denied',
+    };
+
+    expect(compareVerifiedNamesByCreatedDate(a, b)).toBeLessThan(0);
+  });
+
+  it('returns positive number when first argument is less than second argument', () => {
+    const a = {
+      created: '2021-08-31T18:33:32.489200Z',
+      verified_name: 'Mike',
+      status: 'denied',
+    };
+    const b = {
+      created: '2021-09-30T18:33:32.489200Z',
+      verified_name: 'Michael',
+      status: 'denied',
+    };
+
+    expect(compareVerifiedNamesByCreatedDate(a, b)).toBeGreaterThan(0);
+  });
+});

src/utils.js

@@ -0,0 +1,40 @@
+/**
+ * Compare two dates.
+ * @param {*} a the first date
+ * @param {*} b the second date
+ * @returns a negative integer if a > b, a positive integer if a < b, or 0 if a = b
+ */
+export function compareVerifiedNamesByCreatedDate(a, b) {
+  const aTimeSinceEpoch = new Date(a.created).getTime();
+  const bTimeSinceEpoch = new Date(b.created).getTime();
+  return bTimeSinceEpoch - aTimeSinceEpoch;
+}
+
+/**
+ *
+ * @param {*} verifiedNames a list of verified name objects, where each object has at least the
+ *                          following keys: created, status, and verified_name.
+ * @returns the most recent verified name object from the list parameter with the 'pending' or
+ *          'accepted' status, if one exists; otherwise, null
+ */
+export function getMostRecentApprovedOrPendingVerifiedName(verifiedNames) {
+  // clone array so as not to modify original array
+  const names = [...verifiedNames];
+
+  if (Array.isArray(names)) {
+    names.sort(compareVerifiedNamesByCreatedDate);
+  }
+
+  // We only want to consider a subset of verified names when determining the value of nameOnAccount.
+  // approved: consider this status, as the name has been verified by IDV and should supersede the full name
+  //           (profile name).
+  // pending: consider this status, as the learner has started the name change process through the
+  //          Account Settings page, and has been navigated to IDV to complete the name change process.
+  // submitted: do not consider this status, as the name has already been submitted for verification through
+  //            IDV but has not yet been verified
+  // denied: do not consider this status because the name was already denied via the IDV process
+  const applicableNames = names.filter(name => ['approved', 'pending'].includes(name.status));
+  const applicableName = applicableNames.length > 0 ? applicableNames[0].verified_name : null;
+
+  return applicableName;
+}