fix: do not break up strings so l10n works properly

doc: Add clarifying translator's notes for edX-specific messages
fix(deps): update dependency @edx/frontend-platform to v1.12.6
2021-09-23 13:55:51 -06:00 · 2021-09-23 13:25:09 -06:00 · 2021-09-13 10:16:42 +00:00 · 2021-09-13 09:59:52 +00:00 · 2021-09-08 10:57:46 -04:00 · 2021-09-06 08:39:07 +00:00
28 changed files with 6819 additions and 8303 deletions
--- a/.github/workflows/ci.yml
+++ b/.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
--- a/.travis.yml
+++ b/.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
--- a/15
+++ b/15
@@ -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...
--- a/README.rst
+++ b/README.rst
@@ -1,4 +1,4 @@
-|Build Status| |Codecov| |npm_version| |npm_downloads| |license| |semantic-release|
+|ci-badge| |Codecov| |npm_version| |npm_downloads| |license| |semantic-release|

 frontend-app-account
 ====================
@@ -102,8 +102,9 @@ In the future, it's possible that demographics could be modeled as a plugin rath

 ==============================

-.. |Build Status| image:: https://api.travis-ci.com/edx/frontend-app-account.svg?branch=master
-   :target: https://travis-ci.com/edx/frontend-app-account
+.. |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
--- a/openedx.yaml
+++ b/openedx.yaml
@@ -3,5 +3,4 @@

 nick: acct
 oeps: {}
-owner: edx/arch-team
 openedx-release: {ref: master}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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.6",
+    "@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",
+    "@tensorflow/tfjs-converter": "1.7.4",
+    "@tensorflow/tfjs-core": "1.7.4",
    "babel-polyfill": "6.26.0",
-    "bowser": "2.10.0",
-    "classnames": "2.2.6",
+    "bowser": "2.11.0",
+    "classnames": "2.3.1",
    "font-awesome": "4.7.0",
    "form-urlencoded": "4.0.1",
-    "formdata-polyfill": "3.0.20",
+    "formdata-polyfill": "4.0.7",
    "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,20 +58,20 @@
    "lodash.omit": "4.5.0",
    "lodash.pick": "4.4.0",
    "lodash.pickby": "4.6.0",
-    "memoize-one": "5.1.1",
+    "memoize-one": "5.2.1",
    "newrelic": "5.13.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",
@@ -79,15 +79,15 @@
    "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.0.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",
+    "husky": "7.0.2",
+    "react-test-renderer": "16.14.0",
    "reactifex": "1.1.1",
    "redux-mock-store": "1.5.4"
  }
--- a/renovate.json
+++ b/renovate.json
@@ -1,15 +1,28 @@
 {
  "extends": [
    "config:base",
+    "schedule:weekly",
    ":automergeLinters",
-    ":automergeTesters",
    ":automergeMinor",
-    ":noUnscheduledUpdates",
-    ":semanticCommits"
+    ":automergeTesters",
+    ":enableVulnerabilityAlerts",
+    ":rebaseStalePrs",
+    ":semanticCommits",
+    ":updateNotScheduled"
  ],
-  "rebaseStalePrs": true,
-  "schedule": [
-    "every weekend"
+  "packageRules": [
+    {
+      "matchDepTypes": [
+        "devDependencies"
+      ],
+      "matchUpdateTypes": [
+        "lockFileMaintenance",
+        "minor",
+        "patch",
+        "pin"
+      ],
+      "automerge": true
+    }
  ],
  "timezone": "America/New_York"
 }
--- a/src/account-settings/AccountSettingsPage.jsx
+++ b/src/account-settings/AccountSettingsPage.jsx
@@ -13,13 +13,15 @@ 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 { 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';
@@ -27,6 +29,7 @@ import ResetPassword from './reset-password';
 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,13 +139,28 @@ class AccountSettingsPage extends React.Component {
    })),
  }));

+  sortDates = (a, b) => {
+    const aTimeSinceEpoch = new Date(a).getTime();
+    const bTimeSinceEpoch = new Date(b).getTime();
+
+    return bTimeSinceEpoch - aTimeSinceEpoch;
+  }
+
+  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);
-  };
+  }

  isEditable(fieldName) {
    return !this.props.staticFields.includes(fieldName);
@@ -161,7 +179,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 +201,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 +224,111 @@ class AccountSettingsPage extends React.Component {
    );
  }

+  renderVerifiedNameSuccessMessage = () => (
+    <OneTimeDismissibleAlert
+      id="dismissedVerifiedNameSuccessMessage"
+      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();
+      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 = (status) => {
+    switch (status) {
+      case 'approved':
+        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']));
+      default:
+        return null;
+    }
+  }
+
+  renderFullNameHelpText = (status) => {
+    switch (status) {
+      case 'submitted':
+        return (this.props.intl.formatMessage(messages['account.settings.field.full.name.help.text.submitted']));
+      default:
+        return (this.props.intl.formatMessage(messages['account.settings.field.full.name.help.text']));
+    }
+  }
+
  renderEmptyStaticFieldMessage() {
    if (this.isManagedProfile()) {
      return this.props.intl.formatMessage(messages['account.settings.static.field.empty'], {
@@ -261,6 +384,9 @@ 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 } = this.props.formValues;
+    const verifiedNameEnabled = this.props.formValues.verifiedNameHistory.verified_name_enabled;
+
    const timeZoneOptions = this.getLocalizedTimeZoneOptions(
      this.props.timeZoneOptions,
      this.props.countryTimeZoneOptions,
@@ -268,10 +394,11 @@ 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.renderVerifiedNameMessage(this.props.formValues.mostRecentVerifiedName)}
+
          <h2 className="section-heading">
            {this.props.intl.formatMessage(messages['account.settings.section.account.information'])}
          </h2>
@@ -300,10 +427,44 @@ class AccountSettingsPage extends React.Component {
                ? 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')}
+            helpText={
+              verifiedNameEnabled && verifiedName
+                ? this.renderFullNameHelpText(verifiedName.status)
+                : 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')
+            }
            {...editableFieldProps}
          />
+          {verifiedNameEnabled && verifiedName
+            && (
+            <EditableField
+              name="verifiedName"
+              type="text"
+              value={this.props.formValues.verifiedName.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(verifiedName.status)}
+              isEditable={this.isEditable('verifiedName')}
+              isGrayedOut={!this.isEditable('verifiedName')}
+              {...(this.isEditable('verifiedName') && editableFieldProps)}
+            />
+            )}
+
          <EmailField
            name="email"
            label={this.props.intl.formatMessage(messages['account.settings.field.email'])}
@@ -578,6 +739,24 @@ AccountSettingsPage.propTypes = {
    }),
    state: PropTypes.string,
    shouldDisplayDemographicsSection: PropTypes.bool,
+    verifiedNameHistory: PropTypes.shape({
+      verified_name_enabled: PropTypes.bool,
+      use_verified_name_for_certs: PropTypes.bool,
+      results: PropTypes.arrayOf(
+        PropTypes.shape({
+          verified_name: PropTypes.string,
+          status: PropTypes.string,
+        }),
+      ),
+    }),
+    verifiedName: PropTypes.shape({
+      verified_name: PropTypes.string,
+      status: PropTypes.string,
+    }),
+    mostRecentVerifiedName: PropTypes.shape({
+      verified_name: PropTypes.string,
+      status: PropTypes.string,
+    }),
  }).isRequired,
  siteLanguage: PropTypes.shape({
    previousValue: PropTypes.string,
--- a/src/account-settings/AccountSettingsPage.messages.jsx
+++ b/src/account-settings/AccountSettingsPage.messages.jsx
@@ -91,6 +91,61 @@ 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.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.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.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.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)',
--- a/src/account-settings/EditableField.jsx
+++ b/src/account-settings/EditableField.jsx
@@ -37,6 +37,7 @@ function EditableField(props) {
    onChange,
    isEditing,
    isEditable,
+    isGrayedOut,
    intl,
    ...others
  } = props;
@@ -161,7 +162,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 +173,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 +197,7 @@ EditableField.propTypes = {
  onChange: PropTypes.func.isRequired,
  isEditing: PropTypes.bool,
  isEditable: PropTypes.bool,
+  isGrayedOut: PropTypes.bool,
  intl: intlShape.isRequired,
 };

@@ -211,6 +213,7 @@ EditableField.defaultProps = {
  helpText: undefined,
  isEditing: false,
  isEditable: true,
+  isGrayedOut: false,
  userSuppliedValue: undefined,
 };

--- a/src/account-settings/OneTimeDismissibleAlert.jsx
+++ b/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,
+};
--- a/src/account-settings/_style.scss
+++ b/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 */
+  }
 }
--- a/src/account-settings/data/sagas.js
+++ b/src/account-settings/data/sagas.js
@@ -38,7 +38,11 @@ import {
 import { saga as thirdPartyAuthSaga } from '../third-party-auth';

 // Services
-import { getSettings, patchSettings, getTimeZones } from './service';
+import {
+  getSettings,
+  patchSettings,
+  getTimeZones,
+} from './service';

 export function* handleFetchSettings() {
  try {
--- a/src/account-settings/data/selectors.js
+++ b/src/account-settings/data/selectors.js
@@ -7,9 +7,63 @@ export const accountSettingsSelector = state => ({ ...state[storeName] });

 const editableFieldNameSelector = (state, props) => props.name;

+const sortedVerifiedNameHistorySelector = createSelector(
+  accountSettingsSelector,
+  accountSettings => {
+    function sortDates(a, b) {
+      const aTimeSinceEpoch = new Date(a).getTime();
+      const bTimeSinceEpoch = new Date(b).getTime();
+      return bTimeSinceEpoch - aTimeSinceEpoch;
+    }
+
+    const history = accountSettings.values.verifiedNameHistory && accountSettings.values.verifiedNameHistory.results;
+
+    if (Array.isArray(history)) {
+      return history.sort(sortDates);
+    }
+
+    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':
+        verifiedName = approvedVerifiedName;
+        break;
+      case 'submitted':
+        verifiedName = mostRecentVerifiedName;
+        break;
+      default:
+        verifiedName = null;
+    }
+    return verifiedName;
+  },
+);
+
 const valuesSelector = createSelector(
  accountSettingsSelector,
-  accountSettings => accountSettings.values,
+  mostRecentVerifiedNameSelector,
+  mostRecentApprovedVerifiedNameValueSelector,
+  (accountSettings, mostRecentVerifiedNameValue, mostRecentApprovedVerifiedNameValue) => (
+    {
+      ...accountSettings.values,
+      verifiedName: mostRecentApprovedVerifiedNameValue,
+      mostRecentVerifiedName: mostRecentVerifiedNameValue,
+    }),
 );

 const draftsSelector = createSelector(
@@ -69,7 +123,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 && ['pending', 'submitted'].includes(verifiedName.status)) {
+      staticFields.push('verifiedName');
+    }
+
+    return staticFields;
+  },
 );

 /**
--- a/src/account-settings/data/service.js
+++ b/src/account-settings/data/service.js
@@ -176,12 +176,49 @@ export async function shouldDisplayDemographicsQuestions() {
  return false;
 }

+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;
+}
+
 /**
 * 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,
+    verifiedNameHistory,
+  ] = await Promise.all([
    getAccount(username),
    getPreferences(username),
    getThirdPartyAuthProviders(),
@@ -191,18 +228,20 @@ export async function getSettings(username, userRoles, userId) {
    getConfig().ENABLE_DEMOGRAPHICS_COLLECTION && shouldDisplayDemographicsQuestions(),
    getConfig().ENABLE_DEMOGRAPHICS_COLLECTION && getDemographics(userId),
    getConfig().ENABLE_DEMOGRAPHICS_COLLECTION && getDemographicsOptions(),
+    getVerifiedNameHistory(),
  ]);

  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,
+    verifiedNameHistory,
  };
 }

--- a/src/account-settings/delete-account/BeforeProceedingBanner.jsx
+++ b/src/account-settings/delete-account/BeforeProceedingBanner.jsx
@@ -21,15 +21,10 @@ const BeforeProceedingBanner = (props) => {
      icon={<FontAwesomeIcon className="mr-2" icon={faExclamationTriangle} />}
    >
      <FormattedMessage
-        id="account.settings.delete.account.before.proceeding"
-        defaultMessage="Before proceeding, please {actionLink}."
-        description="Error that appears if you are trying to delete your account, but something about your account needs attention first.  The actionLink will be instructions, such as 'unlink your Facebook account'."
+        defaultMessage=intl.formatMessage(
+          messages[instructionMessageId], {linkStart: <Hyperlink destination={supportArticleURL}>, linkEnd=</Hyperlink>}
+        )
        values={{
-          actionLink: (
-            <Hyperlink destination={supportArticleUrl}>
-              {intl.formatMessage(messages[instructionMessageId])}
-            </Hyperlink>
-          ),
          siteName: getConfig().SITE_NAME,
        }}
      />
--- a/src/account-settings/delete-account/snapshots/DeleteAccount.test.jsx.snap
+++ b/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"
--- a/src/account-settings/delete-account/messages.js
+++ b/src/account-settings/delete-account/messages.js
@@ -24,7 +24,7 @@ const messages = defineMessages({
  'account.settings.delete.account.text.2.edX': {
    id: 'account.settings.delete.account.text.2.edX',
    defaultMessage: 'Once your account is deleted, you cannot use it to take courses on the edX app, edx.org, or any other site hosted by edX. This includes access to edx.org from your employer’s or university’s system and access to private sites offered by MIT Open Learning, Wharton Executive Education, and Harvard Medical School.',
-    description: 'A message in the user account deletion area',
+    description: 'A message in the user account deletion area. This message will NOT be used on Open edX installations. Please do not translate \'MIT Open Learning\', \'Wharton Executive Education\', or \'Harvard Medical School\'',
  },
  'account.settings.delete.account.text.3.link': {
    id: 'account.settings.delete.account.text.3.link',
@@ -48,13 +48,13 @@ const messages = defineMessages({
  },
  'account.settings.delete.account.please.activate': {
    id: 'account.settings.delete.account.please.activate',
-    defaultMessage: 'activate your account',
-    description: 'This is the text on a link that goes to the support page.  It is part of this sentence: Before proceeding, please activate your account.',
+    defaultMessage: 'Before proceeding, please {linkStart}activate your account{linkEnd}',
+    description: 'This message links to a support article',
  },
  'account.settings.delete.account.please.unlink': {
    id: 'account.settings.delete.account.please.unlink',
-    defaultMessage: 'unlink all social media accounts',
-    description: 'This is the text on a link that goes to the support page.  It is part of this sentence: Before proceeding, please unlink all social media accounts.',
+    defaultMessage: 'Before proceeding, please {linkStart}unlink all social media accounts{linkEnd}',
+    description: 'This message links to a support article',
  },
  'account.settings.delete.account.modal.header': {
    id: 'account.settings.delete.account.modal.header',
@@ -74,7 +74,7 @@ const messages = defineMessages({
  'account.settings.delete.account.modal.text.2.edX': {
    id: 'account.settings.delete.account.modal.text.2.edX',
    defaultMessage: 'If you proceed, you will be unable to use this account to take courses on the edX app, edx.org, or any other site hosted by edX. This includes access to edx.org from your employer\'s or university\'s system and access to private sites offered by MIT Open Learning, Wharton Executive Education, and Harvard Medical School.',
-    description: 'Messaging in the dialog asking user to confirm that they want to delete their entire account',
+    description: 'Messaging in the dialog asking user to confirm that they want to delete their entire account. This message will NOT be used on Open edX installations. Please do not translate \'MIT Open Learning\', \'Wharton Executive Education\', or \'Harvard Medical School\'',
  },
  'account.settings.delete.account.modal.enter.password': {
    id: 'account.settings.delete.account.modal.enter.password',
--- a/src/account-settings/demographics/test/snapshots/DemographicsSection.test.jsx.snap
+++ b/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
--- a/src/i18n/messages/ar.json
+++ b/src/i18n/messages/ar.json
@@ -20,6 +20,17 @@
  "account.settings.field.full.name": "الاسم الكامل",
  "account.settings.field.full.name.empty": "إضافة اسم",
  "account.settings.field.full.name.help.text": "الاسم المستخدم للتحقق من هويتك والذي سوف يظهر على الشهادات الخاصة بك.",
+  "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.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}. انقر فوق الرابط في الرسالة لتحديث عنوان بريدك الإلكتروني.",
--- a/src/i18n/messages/es_419.json
+++ b/src/i18n/messages/es_419.json
@@ -20,6 +20,17 @@
  "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.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.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.",
@@ -103,7 +114,7 @@
  "account.settings.delete.account.subheader": "¡Sentimos que te vayas!",
  "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.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?",
@@ -113,7 +124,7 @@
  "account.settings.delete.account.modal.header": "¿Está seguro?",
  "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.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",
@@ -170,7 +181,7 @@
  "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",
@@ -188,7 +199,7 @@
  "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.",
@@ -272,7 +283,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?",
@@ -318,5 +329,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}"
 }
--- a/src/i18n/messages/fr.json
+++ b/src/i18n/messages/fr.json
@@ -20,6 +20,17 @@
  "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.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.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.",
--- a/src/i18n/messages/zh_CN.json
+++ b/src/i18n/messages/zh_CN.json
@@ -20,6 +20,17 @@
  "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.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.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.",
--- a/src/id-verification/IdVerificationContextProvider.jsx
+++ b/src/id-verification/IdVerificationContextProvider.jsx
@@ -2,7 +2,7 @@ import React, { useState, useContext, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { AppContext } from '@edx/frontend-platform/react';

-import { getProfileDataManager } from '../account-settings/data/service';
+import { getProfileDataManager, getVerifiedName } from '../account-settings/data/service';
 import PageLoading from '../account-settings/PageLoading';

 import { getExistingIdVerification, getEnrollments } from './data/service';
@@ -76,6 +76,19 @@ export default function IdVerificationContextProvider({ children }) {
    }
  }, [authenticatedUser]);

+  const [verifiedName, setVerifiedName] = useState('');
+  useEffect(() => {
+    // Make the API call to retrieve VerifiedName of the learner.
+    // If the learner do not have such attribute from their account, that's OK.
+    // If the learner do have the attribute, the VerifiedName is overriding authenticatedUser.name
+    (async () => {
+      const verifiedNameResponse = await getVerifiedName();
+      if (verifiedNameResponse) {
+        setVerifiedName(verifiedNameResponse.verified_name);
+      }
+    })();
+  }, []);
+
  const [optimizelyExperimentName, setOptimizelyExperimentName] = useState('');
  const [shouldUseCamera, setShouldUseCamera] = useState(false);

@@ -95,7 +108,7 @@ export default function IdVerificationContextProvider({ children }) {
    mediaStream,
    mediaAccess,
    userId: authenticatedUser.userId,
-    nameOnAccount: authenticatedUser.name,
+    nameOnAccount: verifiedName || authenticatedUser.name,
    profileDataManager,
    optimizelyExperimentName,
    shouldUseCamera,
--- a/src/id-verification/panels/GetNameIdPanel.jsx
+++ b/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>

--- a/src/id-verification/tests/IdVerificationContextProvider.test.jsx
+++ b/src/id-verification/tests/IdVerificationContextProvider.test.jsx
@@ -5,13 +5,14 @@ import '@testing-library/jest-dom/extend-expect';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { AppContext } from '@edx/frontend-platform/react';

-import { getProfileDataManager } from '../../account-settings/data/service';
+import { getProfileDataManager, getVerifiedName } from '../../account-settings/data/service';

 import { getExistingIdVerification, getEnrollments } from '../data/service';
 import IdVerificationContextProvider from '../IdVerificationContextProvider';

 jest.mock('../../account-settings/data/service', () => ({
  getProfileDataManager: jest.fn(),
+  getVerifiedName: jest.fn(),
 }));

 jest.mock('../data/service', () => ({
@@ -62,4 +63,16 @@ describe('IdVerificationContextProvider', () => {
      context.authenticatedUser.roles,
    );
  });
+
+  it('calls getVerifiedName', async () => {
+    const context = { authenticatedUser: { userId: 3, roles: [] } };
+    await act(async () => render((
+      <AppContext.Provider value={context}>
+        <IntlProvider locale="en">
+          <IdVerificationContextProvider {...defaultProps} />
+        </IntlProvider>
+      </AppContext.Provider>
+    )));
+    expect(getVerifiedName).toHaveBeenCalled();
+  });
 });
--- a/src/id-verification/tests/panels/GetNameIdPanel.test.jsx
+++ b/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 () => {
Author	SHA1	Message	Date
sarina	2b12c08d0a	fix: do not break up strings so l10n works properly	2021-09-23 13:55:51 -06:00
sarina	87fdb315b1	doc: Add clarifying translator's notes for edX-specific messages	2021-09-23 13:25:09 -06:00
Renovate Bot	53b59231cb	fix(deps): update dependency @edx/frontend-platform to v1.12.6	2021-09-13 10:16:42 +00:00
Renovate Bot	8fb25fd89b	fix(deps): update dependency formdata-polyfill to v4.0.7	2021-09-13 09:59:52 +00:00
Bianca Severino	15d2bf60f9	Merge pull request #493 from edx/mroytman/MST-954-failure-name-change-additional-changes fix: Fix Broken Editing of Verified Name Field	2021-09-08 10:57:46 -04:00
Renovate Bot	135826bc52	fix(deps): update react-router monorepo	2021-09-06 08:39:07 +00:00
Renovate Bot	d7251e6aec	fix(deps): update dependency react-redux to v7.2.5	2021-09-06 08:18:30 +00:00
edX Transifex Bot	0b0846fb00	fix(i18n): update translations	2021-09-06 02:04:24 +05:00
michaelroytman	b1cd1b1995	fix: Fix Broken Editing of Verified Name Field This code change fixes a bug where the verified name field was not editable. This was due to the fact that the verified name was not wired up to the Redux store, so draft verified names were not stored in the Redux store.	2021-09-03 11:44:14 -04:00
alangsto	50c468857a	Merge pull request #492 from edx/alangsto/pending_alert feat: add alert and correct messaging for submitted verified name	2021-08-31 15:47:07 -04:00
Alie Langston	c940d3463c	feat: add alert and correct messaging for pending verified name MST-954 (https://openedx.atlassian.net/browse/MST-954)	2021-08-31 15:35:31 -04:00
Michael Roytman	376deba866	Merge pull request #491 from edx/mroytman/MST-954-failure-name-change-display feat: Change Which VerifiedName Record is Displayed When Most Recent VerifiedName is Denied	2021-08-31 13:52:43 -04:00
michaelroytman	37d0e6e0fb	feat: Change Which VerifiedName Record is Displayed When Most Recent VerifiedName is Denied If a learner requests a profile name change or verified name change that requires ID verification, their ID verification submission may be rejected. This code change changes the verified name that is displayed in this case. If a learner's most recent verified name record has been denied, and the learner has a previously approved verified name, display that. If If a learner's most recent verified name record has been denied, and the learner either has no previously verified name records or no previous verified name records at all, do not show a verified name field. It also refactors the code to better support UI treatments for other verified name statuses, like pending and submitted. MST-954 (https://openedx.atlassian.net/browse/MST-954)	2021-08-30 17:05:08 -04:00
Michael Roytman	9261711d4a	Merge pull request #490 from edx/mroytman/MST-954-failure-name-change-alert feat: Add Dismissible Alert Informing Learner of Failed Name Verification	2021-08-30 17:04:24 -04:00
michaelroytman	3e42d42ad7	feat: Add Dismissible Alert Informing Learner of Failed Name Verification If a learner requests a profile name change or verified name change that requires ID verification, their ID verification submission may be rejected. This code change adds a dismissible error alert to the Account Settings page informing the learner of the failure and redirecting them to a help article about ID verification failures. The local storage key used to determine whether to show the alert or not uses the created time of the name verification object to ensure that subsequent ID verification failures still trigger this alert, even for the same name. MST-954 (https://openedx.atlassian.net/browse/MST-954)	2021-08-30 13:18:02 -04:00
Simon Chen	7de4edc002	Merge pull request #487 from edx/schen/pending_name feat: Make VerifiedName not editable and show proper icon when the Name is in pending status	2021-08-30 12:58:39 -04:00
Simon Chen	2936498b02	feat: Make VerifiedName not editable and show proper icon when the Name is in pending status	2021-08-30 11:50:45 -04:00
Renovate Bot	44d26c444b	chore(deps): update dependency husky to v7.0.2	2021-08-30 09:28:00 +00:00
Michael Roytman	b1c1c6502d	Merge pull request #485 from edx/mroytman/MST-956-pending-name-change-alert feat: Replace use of verified_name API with verified_name_history API.	2021-08-27 13:50:04 -04:00
michaelroytman	21dda3f25b	feat: Replace use of verified_name API with verified_name_history API. This replaces the use of the verified_name API ({LMS_BASE}/api/edx_name_affirmation/v1/verified_name) with the verified_name_history API ({LMS_BASE}/api/edx_name_affirmation/v1/verified_name/history). The verified_name API returns the most recent verified name for a learner. However, we need access to the entire learner's verified name history in order to view verified name records with other statuses (i.e. pending, submitted, denied) as well as to be able to display previously verified names in the event that the most recent verified name record is denied. MST-954 (https://openedx.atlassian.net/browse/MST-954)	2021-08-27 12:24:21 -04:00
Andrew Shultz	f87b5040a3	Merge pull request #484 from edx/ashultz0/verified-status switch account status page to use verified name status	2021-08-26 11:38:52 -04:00
Andy Shultz	0dc1df07d4	feat: gate render verified name success message outside of function this frees the function from doing logic we've already done elsewhere	2021-08-26 11:13:43 -04:00
Andy Shultz	efa682092f	feat: specify shape of verified name object at least the fields that we are interested in	2021-08-26 11:09:33 -04:00
Andy Shultz	0d9e6f8b87	feat: do not smear verified name fields into general fields smooshing an unattached field name status into the general set of fields is a recipie for future bugs	2021-08-26 10:08:28 -04:00
Andy Shultz	26d2b50859	feat: update verified name display to look at status not is_verified bool note that there is no way to trigger pending display currently without code manipulation because the verified name endpoint in use only returns approved names	2021-08-26 10:07:13 -04:00
Simon Chen	3eb63cd624	Merge pull request #482 from edx/schen/fix_name_error fix: Should not display error message when the account name matches the ID name	2021-08-23 11:06:55 -04:00
Simon Chen	ba0774c5c4	fix: Should not display error message when the account name matches the ID name MST-990, we should fix the problem where the ID name error message still show up with Account name filled in or Verified name filled in.	2021-08-23 11:03:19 -04:00
Simon Chen	ac47d0b180	Merge pull request #481 from edx/renovate/formdata-polyfill-4.x fix(deps): update dependency formdata-polyfill to v4	2021-08-23 09:26:25 -04:00
Simon Chen	02038b8ac9	Merge pull request #471 from edx/renovate/edx-frontend-build-8.x chore(deps): update dependency @edx/frontend-build to v8	2021-08-23 09:16:02 -04:00
Simon Chen	458f9f7e3d	Merge pull request #477 from edx/renovate/es-check-6.x chore(deps): update dependency es-check to v6	2021-08-23 09:15:10 -04:00
Simon Chen	c7d9c270f9	Merge pull request #479 from edx/schen/idv_use_verified_name feat: Update IDV workflow to use the VerifiedName	2021-08-23 09:13:12 -04:00
Renovate Bot	d0ecbbfb8a	fix(deps): update dependency formdata-polyfill to v4	2021-08-23 08:24:31 +00:00
Renovate Bot	22db0d9202	chore(deps): update dependency es-check to v6	2021-08-23 08:19:01 +00:00
Renovate Bot	34a142f55f	chore(deps): update dependency @edx/frontend-build to v8	2021-08-23 08:17:25 +00:00
Renovate Bot	6e00915f98	fix(deps): update dependency @edx/frontend-platform to v1.12.4	2021-08-23 08:09:49 +00:00
Simon Chen	4cfa1707de	feat: Update IDV workflow to use the VerifiedName instead of the profile name If the Verified Name feature is turned on, and the user do have a VerifiedName, use that name on the Account Name Check page of the IDV flow instead of account profile name	2021-08-20 11:08:43 -04:00
Renovate Bot	a721887886	fix(deps): update dependency @edx/frontend-platform to v1.12.3	2021-08-16 06:59:33 +00:00
Renovate Bot	9cdbb93bf3	fix(deps): update dependency @edx/frontend-component-footer to v10.1.6	2021-08-16 06:41:37 +00:00
stvn	f9e7519e26	merge(#454 ): renovate/actions-setup-node-2.x commits ======= - chore(deps): update actions/setup-node action to v2	2021-08-10 10:08:50 -07:00
Renovate Bot	ff8d5a4d09	chore(deps): update actions/setup-node action to v2	2021-08-10 07:29:09 +00:00
stvn	f14c71c4fb	merge(#470 ): renovate/codecov-codecov-action-2.x commits ======= - chore(deps): update codecov/codecov-action action to v2	2021-08-09 21:41:29 -07:00
Renovate Bot	43caac8430	chore(deps): update codecov/codecov-action action to v2	2021-08-10 00:38:25 +00:00
stvn	ee1ecb8ab9	merge(#354 ): adzuci/update-owner-to-tnl commits ======= - docs: remove owner from openedx.yml	2021-08-09 16:40:36 -07:00
Adam Blackwell	020aa84986	docs: remove owner from openedx.yml	2021-08-09 16:27:51 -07:00
Renovate Bot	24459daf6d	fix(deps): update font awesome	2021-08-09 10:31:52 +00:00
Renovate Bot	587533703e	fix(deps): update dependency redux to v4.1.1	2021-08-09 10:14:52 +00:00
Renovate Bot	866746d1c6	fix(deps): update dependency @edx/frontend-platform to v1.11.3	2021-08-02 19:45:00 +00:00
Albert (AJ) St. Aubin	4c618a55c0	Merge pull request #472 from edx/aj/fix_demographics fix: Demographics section will now show when enabled	2021-08-02 14:42:50 -04:00
Albert (AJ) St. Aubin	c9f6cf708e	fix: Demographics section will now show when enabled	2021-08-02 14:29:39 -04:00
edX Transifex Bot	5f314ee65f	fix(i18n): update translations	2021-08-02 02:04:23 +05:00
Michael Roytman	7e35b23b36	Merge pull request #466 from edx/mroytman/MST-800-verified-name-field [MST-800] Add Verified Name field and success alert to the Account Settings page	2021-07-30 11:02:57 -04:00
Michael Roytman	842bd11d89	feat: Add Verified Name field and success alert to the Account Settings page MST-800: https://openedx.atlassian.net/browse/MST-800 This code change adds a Verified Name editable field to the Account Settings page. When the verified name API in the LMS returns that a learner has a verified name, and that the name affirmation feature flag is turned on, the Account Settings page displays the Verified Name field. If the learner's name is verified (i.e. it is not pending verification), then a green checkmark is displayed to the right of the field label. The first time the learner visits the Account Settings page after verification, a dismissible alert is displayed indicating that their vreified name was verified. Whether the alert has been dismissed is stored in localStorage, and the alert no longer reappears after it is dismissed.	2021-07-30 10:16:40 -04:00
Renovate Bot	b1e11dfb36	chore(deps): update dependency @edx/frontend-build to v7.1.0	2021-07-26 07:27:17 +00:00
Renovate Bot	aa57b69924	chore(deps): update dependency codecov to v3.8.3	2021-07-26 07:15:09 +00:00
stvn	e7769b37e9	merge(#461 ): renovate/husky-7.x commits ======= - chore(deps): update dependency husky to v7	2021-07-21 11:32:53 -07:00
Renovate Bot	fcc7b26c28	chore(deps): update dependency husky to v7	2021-07-19 07:55:01 +00:00
Renovate Bot	16d844528d	fix(deps): update dependency jslib-html5-camera-photo to v3.1.8	2021-07-19 07:49:54 +00:00
Renovate Bot	223234f623	chore(deps): update dependency @edx/frontend-build to v7.0.6	2021-07-19 07:37:33 +00:00
Renovate Bot	d8a1c0ca8c	fix(deps): update dependency @edx/paragon to v16.1.0	2021-07-12 07:08:14 +00:00
Renovate Bot	1da8f630eb	fix(deps): update dependency @edx/frontend-platform to v1.11.1	2021-07-12 06:55:19 +00:00
Renovate Bot	228eec0afa	chore(deps): update dependency @edx/frontend-build to v7.0.3	2021-07-12 06:40:54 +00:00
David Joy	cf62b4b82c	fix: upgrade frontend-build to v7 and paragon to v16 (#457 ) * build: bumping to Paragon 16.x Test snapshots needed to be updated because the Hyperlink external link icon is now SVG instead of font-awesome, and because it added some new classes. * build: bump frontend-build to v7	2021-07-07 16:10:09 -04:00
renovate[bot]	0184c1fa25	chore(deps): update dependency @edx/frontend-build to v6 (#455 ) Co-authored-by: Renovate Bot <bot@renovateapp.com>	2021-07-06 14:44:31 -04:00
Renovate Bot	8ed103b2ad	chore(deps): update dependency @testing-library/react to v12	2021-07-05 06:59:43 +00:00
Renovate Bot	84a9de44a5	chore(deps): update dependency es-check to v5.2.4	2021-06-28 07:27:56 +00:00
Renovate Bot	84df0a0b3e	fix(deps): update dependency redux to v4.1.0	2021-06-21 07:21:17 +00:00
Renovate Bot	a3917ae550	fix(deps): update dependency qs to v6.10.1	2021-06-21 07:09:01 +00:00
Renovate Bot	bfd6a07a2c	fix(deps): update dependency memoize-one to v5.2.1	2021-06-21 06:55:37 +00:00
Renovate Bot	1df570989b	fix(deps): update dependency classnames to v2.3.1	2021-06-21 06:40:54 +00:00
stvn	b7e433876e	merge(#396 ): renovate/testing-library-react-11.x commits ======= - chore(deps): update dependency @testing-library/react to v11	2021-06-17 02:48:11 -07:00
Renovate Bot	1669d577f6	chore(deps): update dependency @testing-library/react to v11	2021-06-15 09:09:28 +00:00
Renovate Bot	d1ca7decce	fix(deps): update dependency @edx/paragon to v13.17.5	2021-06-15 09:04:04 +00:00
Renovate Bot	79a43ae713	fix(deps): update dependency @edx/frontend-component-footer to v10.1.5	2021-06-15 08:49:54 +00:00
Renovate Bot	9d0b315714	fix(deps): update dependency @edx/frontend-component-header to v2.3.0	2021-06-14 23:34:42 +00:00
Renovate Bot	4b2bc11378	fix(deps): update dependency @edx/frontend-platform to v1.11.0	2021-06-14 07:10:19 +00:00
Renovate Bot	fc7ce6b91e	chore(deps): update dependency @testing-library/jest-dom to v5.14.1	2021-06-14 06:51:50 +00:00
Renovate Bot	39a25fe5bc	fix(deps): update font awesome	2021-06-08 07:57:01 +00:00
Renovate Bot	307cb1541b	fix(deps): update dependency redux-devtools-extension to v2.13.9	2021-06-07 07:02:48 +00:00
Renovate Bot	03e026ce4e	fix(deps): update reactrouter monorepo to v5.2.0	2021-06-05 07:06:40 +00:00
Renovate Bot	a29876aff0	fix(deps): update dependency react-redux to v7.2.4	2021-06-05 06:48:36 +00:00
Renovate Bot	ab77246015	fix(deps): update dependency react-transition-group to v4.4.2	2021-06-05 06:31:19 +00:00
stvn	572b05e7f1	merge(#444 ): build/renovate commits ======= - build(renovate): fix json syntax	2021-06-04 23:05:09 -07:00
stvn	3e4de47ba6	build(renovate): fix json syntax	2021-06-04 22:09:16 -07:00
stvn	6c6cedd422	merge(#442 ): build/renovate commits ======= - build(renovate): be more selective about automerging devDependencies	2021-06-04 13:20:35 -07:00
stvn	43694921ca	build(renovate): be more selective about automerging devDependencies to avoid bumping the major version, besides linters and testers.	2021-06-04 13:15:46 -07:00
Renovate Bot	06ded1e66e	fix(deps): update react monorepo to v16.14.0	2021-06-04 02:03:50 +00:00
Renovate Bot	aba1bb3382	fix(deps): update dependency @tensorflow/tfjs-core to v1.7.4	2021-06-04 00:13:07 +00:00
Renovate Bot	d67b880028	fix(deps): update dependency @tensorflow/tfjs-converter to v1.7.4	2021-06-03 21:48:51 +00:00
Renovate Bot	29692add53	chore(deps): update dependency enzyme to v3.11.0	2021-06-03 19:45:17 +00:00
Renovate Bot	7f53bf32ca	chore(deps): update dependency codecov to v3.8.2	2021-06-03 19:18:50 +00:00
Renovate Bot	add22d9756	fix(deps): update dependency bowser to v2.11.0	2021-06-03 18:50:57 +00:00
Renovate Bot	bef9bf76fd	chore(deps): update dependency husky to v3.1.0	2021-06-03 18:22:21 +00:00
Renovate Bot	bf6b2fb8b8	chore(deps): update dependency @edx/frontend-build to v5.6.14	2021-06-03 17:52:24 +00:00
Renovate Bot	a77cd6d91a	chore(deps): update dependency es-check to v5.2.3	2021-06-03 17:21:04 +00:00
stvn	9b3f222191	merge(#441 ): build/renovate commits ======= - build(renovate): remove linters/testers automerge presets - build(renovate): automerge lockFileMaintenence - build(renovate): use enableVulnerabilityAlerts preset - build(renovate): allow unscheduled updates	2021-06-03 09:40:38 -07:00
stvn	90f2ed8393	merge(#440 ): build/remove-travis commits ======= - build(ci): run ci tests via matrix - build(ci): always run `npm ci` via Makefile - build(ci): convert travis-ci to github actions	2021-06-03 09:38:51 -07:00
stvn	95c53ad380	build(renovate): remove linters/testers automerge presets on the assumption that our blanket policy for `devDependencies` will overlap.	2021-06-02 13:47:16 -07:00
stvn	3023cd3d55	build(renovate): automerge lockFileMaintenence	2021-06-02 12:33:07 -07:00
stvn	50f85674b1	build(renovate): use enableVulnerabilityAlerts preset	2021-06-02 12:33:06 -07:00
stvn	9437ee36f3	build(renovate): allow unscheduled updates so we don't need to wait until next week to see changes.	2021-06-02 12:32:57 -07:00
stvn	463944012c	merge(#438 ): build/renovate commits ======= - build(renovate): automerge devDependencies - build(renovate): use preset to schedule weekly - build(renovate): use preset to rebaseStalePrs	2021-06-02 11:40:56 -07:00
stvn	2d297aa7be	build(renovate): automerge devDependencies tickets ======= - Fixes CENG-109 - Fixes stvstnfrd/openedx-meta#157	2021-06-02 11:33:17 -07:00
stvn	1ab5901d24	build(ci): run ci tests via matrix	2021-06-02 11:28:11 -07:00
stvn	ba678d92f7	build(ci): always run `npm ci` via Makefile	2021-06-02 11:28:11 -07:00
stvn	884651a702	build(ci): convert travis-ci to github actions tickets ======= - Fixes CENG-108 - Fixes stvstnfrd/openedx-meta#156	2021-06-02 11:26:53 -07:00
stvn	a152c631da	build(renovate): use preset to schedule weekly	2021-06-01 23:36:43 -07:00
stvn	fbe91ce7e4	build(renovate): use preset to rebaseStalePrs	2021-06-01 23:33:07 -07:00