feat: add warning helptext to name fields after verification failure

Merge pull request #516 from edx/alangsto/update_dismissable_alert
fix: approved alert should appear for subsequent approved attempts
2021-09-29 17:06:46 -04:00 · 2021-09-29 14:36:02 -04:00 · 2021-09-29 14:00:30 -04:00 · 2021-09-29 13:03:08 -04:00 · 2021-09-29 12:57:51 -04:00 · 2021-09-29 09:53:05 -04:00
46 changed files with 2111 additions and 528 deletions
--- a/.env
+++ b/.env
@@ -1,25 +1,27 @@
-ACCESS_TOKEN_COOKIE_NAME=null
-BASE_URL=null
-CREDENTIALS_BASE_URL=null
-CSRF_TOKEN_API_PATH=null
-ECOMMERCE_BASE_URL=null
-LANGUAGE_PREFERENCE_COOKIE_NAME=null
-LMS_BASE_URL=null
-DEMOGRAPHICS_BASE_URL=null
-LOGIN_URL=null
-LOGOUT_URL=null
-MARKETING_SITE_BASE_URL=null
-NODE_ENV=null
-ORDER_HISTORY_URL=null
-REFRESH_ACCESS_TOKEN_ENDPOINT=null
-SEGMENT_KEY=null
-SITE_NAME=''
-SUPPORT_URL=null
-USER_INFO_COOKIE_NAME=null
-LOGO_URL=''
-LOGO_TRADEMARK_URL=''
-LOGO_WHITE_URL=''
+ACCESS_TOKEN_COOKIE_NAME=''
+BASE_URL=''
+COACHING_ENABLED=''
+CREDENTIALS_BASE_URL=''
+CSRF_TOKEN_API_PATH=''
+DEMOGRAPHICS_BASE_URL=''
+DISCOVERY_API_BASE_URL=''
+ECOMMERCE_BASE_URL=''
+ENABLE_DEMOGRAPHICS_COLLECTION=''
 FAVICON_URL=''
-PUBLISHER_BASE_URL=
-STUDIO_BASE_URL=
-DISCOVERY_API_BASE_URL=
+LANGUAGE_PREFERENCE_COOKIE_NAME=''
+LMS_BASE_URL=''
+LOGIN_URL=''
+LOGO_TRADEMARK_URL=''
+LOGO_URL=''
+LOGO_WHITE_URL=''
+LOGOUT_URL=''
+MARKETING_SITE_BASE_URL=''
+NODE_ENV=''
+ORDER_HISTORY_URL=''
+PUBLISHER_BASE_URL=''
+REFRESH_ACCESS_TOKEN_ENDPOINT=''
+SEGMENT_KEY=''
+SITE_NAME=''
+STUDIO_BASE_URL=''
+SUPPORT_URL=''
+USER_INFO_COOKIE_NAME=''
--- a/.env.development
+++ b/.env.development
@@ -1,28 +1,28 @@
 ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'
 BASE_URL='localhost:1997'
+COACHING_ENABLED=''
 CREDENTIALS_BASE_URL='http://localhost:18150'
 CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
+DEMOGRAPHICS_BASE_URL='http://localhost:18360'
+DISCOVERY_API_BASE_URL=''
 ECOMMERCE_BASE_URL='http://localhost:18130'
+ENABLE_DEMOGRAPHICS_COLLECTION=''
+FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
 LANGUAGE_PREFERENCE_COOKIE_NAME='openedx-language-preference'
 LMS_BASE_URL='http://localhost:18000'
 LOGIN_URL='http://localhost:18000/login'
+LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
+LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
+LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
 LOGOUT_URL='http://localhost:18000/logout'
 MARKETING_SITE_BASE_URL='http://localhost:5335'
-DEMOGRAPHICS_BASE_URL='http://localhost:18360'
 NODE_ENV='development'
-ORDER_HISTORY_URL='localhost:1996/orders'
+ORDER_HISTORY_URL='http://localhost:1996/orders'
 PORT=1997
+PUBLISHER_BASE_URL=''
 REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
-SEGMENT_KEY=null
+SEGMENT_KEY=''
 SITE_NAME=localhost
+STUDIO_BASE_URL=''
 SUPPORT_URL='http://localhost:18000/support'
 USER_INFO_COOKIE_NAME='edx-user-info'
-COACHING_ENABLED=false
-ENABLE_DEMOGRAPHICS_COLLECTION=false
-LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
-LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
-LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
-FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
-PUBLISHER_BASE_URL=
-STUDIO_BASE_URL=
-DISCOVERY_API_BASE_URL=
--- a/.env.test
+++ b/.env.test
@@ -1,27 +1,27 @@
 ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'
 BASE_URL='localhost:1997'
+COACHING_ENABLED=''
 CREDENTIALS_BASE_URL='http://localhost:18150'
 CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
+DEMOGRAPHICS_BASE_URL='http://localhost:18360'
+DISCOVERY_API_BASE_URL=''
 ECOMMERCE_BASE_URL='http://localhost:18130'
+ENABLE_DEMOGRAPHICS_COLLECTION=''
+FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
 LANGUAGE_PREFERENCE_COOKIE_NAME='openedx-language-preference'
 LMS_BASE_URL='http://localhost:18000'
 LOGIN_URL='http://localhost:18000/login'
+LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
+LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
+LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
 LOGOUT_URL='http://localhost:18000/logout'
 MARKETING_SITE_BASE_URL='http://localhost:5335'
-DEMOGRAPHICS_BASE_URL='http://localhost:18360'
-NODE_ENV=null
-ORDER_HISTORY_URL='localhost:1996/orders'
+NODE_ENV=''
+ORDER_HISTORY_URL='http://localhost:1996/orders'
+PUBLISHER_BASE_URL=''
 REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
-SEGMENT_KEY=null
+SEGMENT_KEY=''
 SITE_NAME=localhost
+STUDIO_BASE_URL=''
 SUPPORT_URL='http://localhost:18000/support'
 USER_INFO_COOKIE_NAME='edx-user-info'
-COACHING_ENABLED=''
-ENABLE_DEMOGRAPHICS_COLLECTION=''
-LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
-LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
-LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
-FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
-PUBLISHER_BASE_URL=
-STUDIO_BASE_URL=
-DISCOVERY_API_BASE_URL=
--- a/package-lock.json
+++ b/package-lock.json
@@ -1442,9 +1442,9 @@
      }
    },
    "@edx/frontend-platform": {
-      "version": "1.12.6",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-1.12.6.tgz",
-      "integrity": "sha512-bhifApR/XmQij8HcxDoCSrjf7WZvwpOIqFRJDmdNBGVCkpCsG3jOXVDUUgpi5nH0WeASb+XN+V/f8jFcInWNgw==",
+      "version": "1.12.7",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-1.12.7.tgz",
+      "integrity": "sha512-q4QmqVfYjuFCoG0oJthxhSx6rDljaSFZ0rjbQYccBogfwAKi+QedcGgYiPVsiRQN+b+hRleS/r+D0hJ+7zjtfQ==",
      "requires": {
        "@cospired/i18n-iso-languages": "2.2.0",
        "axios": "0.21.4",
@@ -2228,24 +2228,6 @@
        }
      }
    },
-    "@newrelic/koa": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/@newrelic/koa/-/koa-1.0.8.tgz",
-      "integrity": "sha512-kY//FlLQkGdUIKEeGJlyY3dJRU63EG77YIa48ACMGZxQbWRd3WZMikyft33f8XScTq6WpCDo9xa0viNo8zeYkg==",
-      "requires": {
-        "methods": "^1.1.2"
-      }
-    },
-    "@newrelic/native-metrics": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/@newrelic/native-metrics/-/native-metrics-4.1.0.tgz",
-      "integrity": "sha512-7CZlKMLuaYQW7mV9qVyo9b9HVe2xBnyn+kkETRJoZGs5P7gdfv9AAE3RPhtOBUopTfbmc8ju7njYadjui9J1XA==",
-      "optional": true,
-      "requires": {
-        "nan": "^2.12.1",
-        "semver": "^5.5.1"
-      }
-    },
    "@newrelic/publish-sourcemap": {
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/@newrelic/publish-sourcemap/-/publish-sourcemap-5.0.1.tgz",
@@ -2256,14 +2238,6 @@
        "yargs": "^16.0.3"
      }
    },
-    "@newrelic/superagent": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@newrelic/superagent/-/superagent-1.0.3.tgz",
-      "integrity": "sha512-lJbsqKa79qPLbHZsbiRaXl1jfzaXAN7zqqnLRqBY+zI/O5zcfyNngTmdi+9y+qIUq7xHYNaLsAxCXerrsoINKg==",
-      "requires": {
-        "methods": "^1.1.2"
-      }
-    },
    "@nodelib/fs.scandir": {
      "version": "2.1.5",
      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -2795,9 +2769,9 @@
      }
    },
    "@testing-library/dom": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.1.0.tgz",
-      "integrity": "sha512-kmW9alndr19qd6DABzQ978zKQ+J65gU2Rzkl8hriIetPnwpesRaK4//jEQyYh8fEALmGhomD/LBQqt+o+DL95Q==",
+      "version": "8.5.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.5.0.tgz",
+      "integrity": "sha512-O0fmHFaPlqaYCpa/cBL0cvroMridb9vZsMLacgIqrlxj+fd+bGF8UfAgwsLCHRF84KLBafWlm9CuOvxeNTlodw==",
      "dev": true,
      "requires": {
        "@babel/code-frame": "^7.10.4",
@@ -2810,58 +2784,19 @@
        "pretty-format": "^27.0.2"
      },
      "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
-          "integrity": "sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==",
-          "dev": true,
-          "requires": {
-            "@babel/highlight": "^7.14.5"
-          }
-        },
-        "@babel/helper-validator-identifier": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
-          "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
-          "dev": true
-        },
-        "@babel/highlight": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.5.tgz",
-          "integrity": "sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.14.5",
-            "chalk": "^2.0.0",
-            "js-tokens": "^4.0.0"
-          },
-          "dependencies": {
-            "chalk": {
-              "version": "2.4.2",
-              "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-              "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-              "dev": true,
-              "requires": {
-                "ansi-styles": "^3.2.1",
-                "escape-string-regexp": "^1.0.5",
-                "supports-color": "^5.3.0"
-              }
-            }
-          }
-        },
        "@babel/runtime": {
-          "version": "7.14.6",
-          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.6.tgz",
-          "integrity": "sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==",
+          "version": "7.15.4",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz",
+          "integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==",
          "dev": true,
          "requires": {
            "regenerator-runtime": "^0.13.4"
          }
        },
        "@jest/types": {
-          "version": "27.0.6",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-27.0.6.tgz",
-          "integrity": "sha512-aSquT1qa9Pik26JK5/3rvnYb4bGtm1VFNesHKmNTwmPIgOrixvhL2ghIvFRNEpzy3gU+rUgjIF/KodbkFAl++g==",
+          "version": "27.1.1",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-27.1.1.tgz",
+          "integrity": "sha512-yqJPDDseb0mXgKqmNqypCsb85C22K1aY5+LUxh7syIM9n/b0AsaltxNy+o6tt29VcfGDpYEve175bm3uOhcehA==",
          "dev": true,
          "requires": {
            "@types/istanbul-lib-coverage": "^2.0.0",
@@ -2881,11 +2816,20 @@
          }
        },
        "ansi-regex": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
-          "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
          "dev": true
        },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
        "aria-query": {
          "version": "4.2.2",
          "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-4.2.2.tgz",
@@ -2897,33 +2841,13 @@
          }
        },
        "chalk": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
          "dev": true,
          "requires": {
            "ansi-styles": "^4.1.0",
            "supports-color": "^7.1.0"
-          },
-          "dependencies": {
-            "ansi-styles": {
-              "version": "4.3.0",
-              "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-              "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-              "dev": true,
-              "requires": {
-                "color-convert": "^2.0.1"
-              }
-            },
-            "supports-color": {
-              "version": "7.2.0",
-              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-              "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-              "dev": true,
-              "requires": {
-                "has-flag": "^4.0.0"
-              }
-            }
          }
        },
        "color-convert": {
@@ -2948,12 +2872,12 @@
          "dev": true
        },
        "pretty-format": {
-          "version": "27.0.6",
-          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.0.6.tgz",
-          "integrity": "sha512-8tGD7gBIENgzqA+UBzObyWqQ5B778VIFZA/S66cclyd5YkFLYs2Js7gxDKf0MXtTc9zcS7t1xhdfcElJ3YIvkQ==",
+          "version": "27.2.0",
+          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.2.0.tgz",
+          "integrity": "sha512-KyJdmgBkMscLqo8A7K77omgLx5PWPiXJswtTtFV7XgVZv2+qPk6UivpXXO+5k6ZEbWIbLoKdx1pZ6ldINzbwTA==",
          "dev": true,
          "requires": {
-            "@jest/types": "^27.0.6",
+            "@jest/types": "^27.1.1",
            "ansi-regex": "^5.0.0",
            "ansi-styles": "^5.0.0",
            "react-is": "^17.0.1"
@@ -2974,10 +2898,19 @@
          "dev": true
        },
        "regenerator-runtime": {
-          "version": "0.13.7",
-          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
-          "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==",
+          "version": "0.13.9",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
+          "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
        }
      }
    },
@@ -3133,9 +3066,9 @@
      }
    },
    "@testing-library/react": {
-      "version": "12.0.0",
-      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-12.0.0.tgz",
-      "integrity": "sha512-sh3jhFgEshFyJ/0IxGltRhwZv2kFKfJ3fN1vTZ6hhMXzz9ZbbcTgmDYM4e+zJv+oiVKKEWZPyqPAh4MQBI65gA==",
+      "version": "12.1.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-12.1.0.tgz",
+      "integrity": "sha512-Ge3Ht3qXE82Yv9lyPpQ7ZWgzo/HgOcHu569Y4ZGWcZME38iOFiOg87qnu6hTEa8jTJVL7zYovnvD3GE2nsNIoQ==",
      "dev": true,
      "requires": {
        "@babel/runtime": "^7.12.5",
@@ -3143,18 +3076,18 @@
      },
      "dependencies": {
        "@babel/runtime": {
-          "version": "7.14.6",
-          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.6.tgz",
-          "integrity": "sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==",
+          "version": "7.15.4",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz",
+          "integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==",
          "dev": true,
          "requires": {
            "regenerator-runtime": "^0.13.4"
          }
        },
        "regenerator-runtime": {
-          "version": "0.13.7",
-          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
-          "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==",
+          "version": "0.13.9",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
+          "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
          "dev": true
        }
      }
@@ -3172,9 +3105,9 @@
      "dev": true
    },
    "@types/aria-query": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-4.2.1.tgz",
-      "integrity": "sha512-S6oPal772qJZHoRZLFc/XoZW2gFvwXusYUmXPXkgxJLuEk2vOt7jc4Yo6z/vtI0EBkbPBVrJJ0B+prLIKiWqHg==",
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-4.2.2.tgz",
+      "integrity": "sha512-HnYpAE1Y6kRyKM/XkEuiRQhTHvkzMBurTHnpFLYLBGPIylZNPs9jJcuOOYWxPLJCSEtmZT0Y8rHDokKN7rRTig==",
      "dev": true
    },
    "@types/babel__core": {
@@ -3558,11 +3491,6 @@
      "integrity": "sha512-FA/BWv8t8ZWJ+gEOnLLd8ygxH/2UFbAvgEonyfN6yWGLKc7zVjbpl2Y4CTjid9h2RfgPP6SEt6uHwEOply00yw==",
      "dev": true
    },
-    "@tyriar/fibonacci-heap": {
-      "version": "2.0.9",
-      "resolved": "https://registry.npmjs.org/@tyriar/fibonacci-heap/-/fibonacci-heap-2.0.9.tgz",
-      "integrity": "sha512-bYuSNomfn4hu2tPiDN+JZtnzCpSpbJ/PNeulmocDy3xN2X5OkJL65zo6rPZp65cPPhLF9vfT/dgE+RtFRCSxOA=="
-    },
    "@webassemblyjs/ast": {
      "version": "1.11.1",
      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
@@ -3808,14 +3736,6 @@
        "regex-parser": "^2.2.11"
      }
    },
-    "agent-base": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-4.3.0.tgz",
-      "integrity": "sha512-salcGninV0nPrwpGNn4VTXBb1SOuXQBiqbrNXoeizJsHrsL6ERFM2Ne3JUSBWRE6aeNJI2ROP/WEEIDUiDe3cg==",
-      "requires": {
-        "es6-promisify": "^5.0.0"
-      }
-    },
    "aggregate-error": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz",
@@ -4482,6 +4402,7 @@
      "version": "2.6.2",
      "resolved": "https://registry.npmjs.org/async/-/async-2.6.2.tgz",
      "integrity": "sha512-H1qVYh1MYhEEFLsP97cVKqCGo7KfCyTt6uEWqsTBr9SO84oK9Uwbyd/yCW+6rKJLHksBNUVWZDAjfS+Ccx0Bbg==",
+      "dev": true,
      "requires": {
        "lodash": "^4.17.11"
      }
@@ -4539,9 +4460,9 @@
      },
      "dependencies": {
        "follow-redirects": {
-          "version": "1.14.3",
-          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.3.tgz",
-          "integrity": "sha512-3MkHxknWMUtb23apkgz/83fDoe+y+qr0TdgacGIA7bew+QLBo3vdgEN2xEsuXNivpFy4CyDhBBZnNZOtalmenw=="
+          "version": "1.14.4",
+          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.4.tgz",
+          "integrity": "sha512-zwGkiSXC1MUJG/qmeIFH2HBJx9u0V46QGUe3YR1fXG8bXQxq7fLj0RjLZQ5nubr9qNJUZrH+xUcwXEoXNpfS+g=="
        }
      }
    },
@@ -4840,6 +4761,11 @@
        "regenerator-runtime": "^0.10.5"
      },
      "dependencies": {
+        "core-js": {
+          "version": "2.6.12",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+          "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
+        },
        "regenerator-runtime": {
          "version": "0.10.5",
          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz",
@@ -4886,6 +4812,11 @@
        "regenerator-runtime": "^0.11.0"
      },
      "dependencies": {
+        "core-js": {
+          "version": "2.6.12",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+          "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
+        },
        "regenerator-runtime": {
          "version": "0.11.1",
          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
@@ -5568,7 +5499,8 @@
    "buffer-from": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
-      "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A=="
+      "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==",
+      "dev": true
    },
    "buffer-indexof": {
      "version": "1.1.1",
@@ -6311,17 +6243,6 @@
      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
    },
-    "concat-stream": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-2.0.0.tgz",
-      "integrity": "sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==",
-      "requires": {
-        "buffer-from": "^1.0.0",
-        "inherits": "^2.0.3",
-        "readable-stream": "^3.0.2",
-        "typedarray": "^0.0.6"
-      }
-    },
    "config-chain": {
      "version": "1.1.13",
      "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.13.tgz",
@@ -6406,9 +6327,9 @@
      "dev": true
    },
    "core-js": {
-      "version": "2.6.10",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.10.tgz",
-      "integrity": "sha512-I39t74+4t+zau64EN1fE5v2W31Adtc/REhzWN+gWRRXg6WH5qAsZm62DHpQ1+Yhe4047T55jvzz7MUqF/dBBlA=="
+      "version": "3.18.1",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.18.1.tgz",
+      "integrity": "sha512-vJlUi/7YdlCZeL6fXvWNaLUPh/id12WXj3MbkMw5uOyF0PfWPBNOCNbs53YqgrvtujLNlt9JQpruyIKkUZ+PKA=="
    },
    "core-js-compat": {
      "version": "3.16.2",
@@ -6732,6 +6653,7 @@
      "version": "3.2.6",
      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
      "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
+      "dev": true,
      "requires": {
        "ms": "^2.1.1"
      }
@@ -6936,7 +6858,8 @@
    "deep-is": {
      "version": "0.1.3",
      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
-      "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ="
+      "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=",
+      "dev": true
    },
    "deepmerge": {
      "version": "4.2.2",
@@ -7238,9 +7161,9 @@
      }
    },
    "dom-accessibility-api": {
-      "version": "0.5.6",
-      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.6.tgz",
-      "integrity": "sha512-DplGLZd8L1lN64jlT27N9TVSESFR5STaEJvX+thCby7fuCHonfPpAlodYc3vuUYbDuDec5w8AMP7oCM5TWFsqw==",
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.7.tgz",
+      "integrity": "sha512-ml3lJIq9YjUfM9TUnEPvEYWFSwivwIGBPKpewX7tii7fwCazA8yCioGdqQcNsItPpfFvSJ3VIdMQPj60LJhcQA==",
      "dev": true
    },
    "dom-converter": {
@@ -8404,19 +8327,6 @@
        "is-symbol": "^1.0.2"
      }
    },
-    "es6-promise": {
-      "version": "4.2.6",
-      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.6.tgz",
-      "integrity": "sha512-aRVgGdnmW2OiySVPUC9e6m+plolMAJKjZnQlCwNSuK5yQ0JN61DZSO1X1Ufd1foqWRAlig0rhduTCHe7sVtK5Q=="
-    },
-    "es6-promisify": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/es6-promisify/-/es6-promisify-5.0.0.tgz",
-      "integrity": "sha1-UQnWLz5W6pZ8S2NQWu8IKRyKUgM=",
-      "requires": {
-        "es6-promise": "^4.0.3"
-      }
-    },
    "escalade": {
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
@@ -8435,25 +8345,6 @@
      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
      "dev": true
    },
-    "escodegen": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.11.1.tgz",
-      "integrity": "sha512-JwiqFD9KdGVVpeuRa68yU3zZnBEOcPs0nKW7wZzXky8Z7tffdYUHbe11bPCV5jYlK6DVdKLWLm0f5I/QlL0Kmw==",
-      "requires": {
-        "esprima": "^3.1.3",
-        "estraverse": "^4.2.0",
-        "esutils": "^2.0.2",
-        "optionator": "^0.8.1",
-        "source-map": "~0.6.1"
-      },
-      "dependencies": {
-        "esprima": {
-          "version": "3.1.3",
-          "resolved": "https://registry.npmjs.org/esprima/-/esprima-3.1.3.tgz",
-          "integrity": "sha1-/cpRzuYTOJXjyI1TXOSdv/YqRjM="
-        }
-      }
-    },
    "eslint": {
      "version": "6.8.0",
      "resolved": "https://registry.npmjs.org/eslint/-/eslint-6.8.0.tgz",
@@ -8872,7 +8763,8 @@
    "esprima": {
      "version": "4.0.1",
      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
-      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A=="
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "dev": true
    },
    "esquery": {
      "version": "1.4.0",
@@ -8911,12 +8803,14 @@
    "estraverse": {
      "version": "4.2.0",
      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.2.0.tgz",
-      "integrity": "sha1-De4/7TH81GlhjOc0IJn8GvoL2xM="
+      "integrity": "sha1-De4/7TH81GlhjOc0IJn8GvoL2xM=",
+      "dev": true
    },
    "esutils": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.2.tgz",
-      "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs="
+      "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=",
+      "dev": true
    },
    "etag": {
      "version": "1.8.1",
@@ -9433,7 +9327,8 @@
    "fast-levenshtein": {
      "version": "2.0.6",
      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
-      "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc="
+      "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
+      "dev": true
    },
    "fast-url-parser": {
      "version": "1.1.3",
@@ -9755,9 +9650,9 @@
      "integrity": "sha512-UWcTgTk8HsU0UYXo0m820lmOE9rqxhk2wbnYhVTWm5TLpWDW6pCAaIzTL05FU3w/4R/7GUbim9uFvLij+u457Q=="
    },
    "formdata-polyfill": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.7.tgz",
-      "integrity": "sha512-pTY5vaVDcdiEyFQfTkRoCPAtv1I9yLqsf8TICX3vqQmpywZaGfjIf9tW86yt3iTcbE5oEhhUNJQa/Nn7Uv/i2w==",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.8.tgz",
+      "integrity": "sha512-p0naEVqvCUELWr294iIyMwXH3mhlsg2AhTrFEAWbJx1i8FOrHuaoQQKEvQsK08oF+77KxFwuRVm5ltOY1Ac1rg==",
      "requires": {
        "fetch-blob": "^3.1.2"
      }
@@ -10893,12 +10788,6 @@
      "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
      "dev": true
    },
-    "husky": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/husky/-/husky-7.0.2.tgz",
-      "integrity": "sha512-8yKEWNX4z2YsofXAMT7KvA1g8p+GxtB1ffV8XtpAEGuXNAbCV5wdNKH+qTpw8SM9fh4aMPDR+yQuKfgnreyZlg==",
-      "dev": true
-    },
    "hyphenate-style-name": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz",
@@ -14145,11 +14034,6 @@
      "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=",
      "dev": true
    },
-    "json-stringify-safe": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
-      "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus="
-    },
    "json5": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz",
@@ -14245,6 +14129,7 @@
      "version": "0.3.0",
      "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
      "integrity": "sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=",
+      "dev": true,
      "requires": {
        "prelude-ls": "~1.1.2",
        "type-check": "~0.3.2"
@@ -14338,7 +14223,8 @@
    "lodash": {
      "version": "4.17.15",
      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
-      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
+      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==",
+      "dev": true
    },
    "lodash.camelcase": {
      "version": "4.3.0",
@@ -14827,7 +14713,8 @@
    "methods": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
-      "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4="
+      "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=",
+      "dev": true
    },
    "microevent.ts": {
      "version": "0.1.1",
@@ -15011,7 +14898,8 @@
    "ms": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
-      "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
+      "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
+      "dev": true
    },
    "multicast-dns": {
      "version": "6.2.3",
@@ -15039,6 +14927,7 @@
      "version": "2.14.0",
      "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.0.tgz",
      "integrity": "sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==",
+      "dev": true,
      "optional": true
    },
    "nanoid": {
@@ -15096,36 +14985,6 @@
      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
      "dev": true
    },
-    "newrelic": {
-      "version": "5.13.1",
-      "resolved": "https://registry.npmjs.org/newrelic/-/newrelic-5.13.1.tgz",
-      "integrity": "sha512-FRChTKLh29benj2r//8/q+nLX3oHYlaOkOAjCVkilbTpp8OwR84FFDZNWRVuocxWP+yPR6ayfPaNc0ueLp9R7g==",
-      "requires": {
-        "@newrelic/koa": "^1.0.8",
-        "@newrelic/native-metrics": "^4.0.0",
-        "@newrelic/superagent": "^1.0.2",
-        "@tyriar/fibonacci-heap": "^2.0.7",
-        "async": "^2.1.4",
-        "concat-stream": "^2.0.0",
-        "escodegen": "^1.11.1",
-        "esprima": "^4.0.1",
-        "https-proxy-agent": "^3.0.0",
-        "json-stringify-safe": "^5.0.0",
-        "readable-stream": "^3.1.1",
-        "semver": "^5.3.0"
-      },
-      "dependencies": {
-        "https-proxy-agent": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-3.0.0.tgz",
-          "integrity": "sha512-y4jAxNEihqvBI5F3SaO2rtsjIOnnNA8sEbuiP+UhJZJHeM2NRm6c09ax2tgqme+SgUUvjao2fJXF4h3D6Cb2HQ==",
-          "requires": {
-            "agent-base": "^4.3.0",
-            "debug": "^3.1.0"
-          }
-        }
-      }
-    },
    "nice-try": {
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
@@ -15718,6 +15577,7 @@
      "version": "0.8.2",
      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.2.tgz",
      "integrity": "sha1-NkxeQJ0/TWMB1sC0wFu6UBgK62Q=",
+      "dev": true,
      "requires": {
        "deep-is": "~0.1.3",
        "fast-levenshtein": "~2.0.4",
@@ -16740,7 +16600,8 @@
    "prelude-ls": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
-      "integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ="
+      "integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=",
+      "dev": true
    },
    "prepend-http": {
      "version": "1.0.4",
@@ -17707,6 +17568,7 @@
      "version": "3.3.0",
      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.3.0.tgz",
      "integrity": "sha512-EsI+s3k3XsW+fU8fQACLN59ky34AZ14LoeVZpYwmZvldCFo0r0gnelwF2TcMjLor/BTL5aDJVBMkss0dthToPw==",
+      "dev": true,
      "requires": {
        "inherits": "^2.0.3",
        "string_decoder": "^1.1.1",
@@ -17864,9 +17726,9 @@
      }
    },
    "regenerator-runtime": {
-      "version": "0.13.2",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz",
-      "integrity": "sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA=="
+      "version": "0.13.9",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
+      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
    },
    "regenerator-transform": {
      "version": "0.14.5",
@@ -18409,7 +18271,8 @@
    "safe-buffer": {
      "version": "5.1.2",
      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "dev": true
    },
    "safe-regex": {
      "version": "1.1.0",
@@ -18553,7 +18416,8 @@
    "semver": {
      "version": "5.7.0",
      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.0.tgz",
-      "integrity": "sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA=="
+      "integrity": "sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA==",
+      "dev": true
    },
    "semver-regex": {
      "version": "2.0.0",
@@ -18989,7 +18853,8 @@
    "source-map": {
      "version": "0.6.1",
      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true
    },
    "source-map-js": {
      "version": "0.6.2",
@@ -19734,6 +19599,7 @@
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.2.0.tgz",
      "integrity": "sha512-6YqyX6ZWEYguAxgZzHGL7SsCeGx3V2TtOTqZz1xSTSWnqsbWwbptafNyvf/ACquZUXV3DANr5BDIwNYe1mN42w==",
+      "dev": true,
      "requires": {
        "safe-buffer": "~5.1.0"
      }
@@ -20603,6 +20469,7 @@
      "version": "0.3.2",
      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
      "integrity": "sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=",
+      "dev": true,
      "requires": {
        "prelude-ls": "~1.1.2"
      }
@@ -20632,7 +20499,8 @@
    "typedarray": {
      "version": "0.0.6",
      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
-      "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
+      "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
+      "dev": true
    },
    "typedarray-to-buffer": {
      "version": "3.1.5",
@@ -20950,7 +20818,8 @@
    "util-deprecate": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
+      "dev": true
    },
    "util.promisify": {
      "version": "1.0.1",
@@ -21758,7 +21627,8 @@
    "wordwrap": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
-      "integrity": "sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus="
+      "integrity": "sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=",
+      "dev": true
    },
    "worker-rpc": {
      "version": "0.1.1",
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
    "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
    "@edx/frontend-component-footer": "10.1.6",
    "@edx/frontend-component-header": "2.3.0",
-    "@edx/frontend-platform": "1.12.6",
+    "@edx/frontend-platform": "1.12.7",
    "@edx/paragon": "16.1.0",
    "@fortawesome/fontawesome-svg-core": "1.2.36",
    "@fortawesome/free-brands-svg-icons": "5.15.4",
@@ -42,12 +42,12 @@
    "@tensorflow-models/blazeface": "0.0.7",
    "@tensorflow/tfjs-converter": "1.7.4",
    "@tensorflow/tfjs-core": "1.7.4",
-    "babel-polyfill": "6.26.0",
    "bowser": "2.11.0",
    "classnames": "2.3.1",
+    "core-js": "3.18.1",
    "font-awesome": "4.7.0",
    "form-urlencoded": "4.0.1",
-    "formdata-polyfill": "4.0.7",
+    "formdata-polyfill": "4.0.8",
    "history": "4.10.1",
    "jslib-html5-camera-photo": "3.1.8",
    "lodash.debounce": "4.0.8",
@@ -59,7 +59,6 @@
    "lodash.pick": "4.4.0",
    "lodash.pickby": "4.6.0",
    "memoize-one": "5.2.1",
-    "newrelic": "5.13.1",
    "prop-types": "15.7.2",
    "qs": "6.10.1",
    "react": "16.14.0",
@@ -75,18 +74,18 @@
    "redux-logger": "3.0.6",
    "redux-saga": "1.1.3",
    "redux-thunk": "2.3.0",
+    "regenerator-runtime": "0.13.9",
    "reselect": "4.0.0",
    "universal-cookie": "4.0.4"
  },
  "devDependencies": {
    "@edx/frontend-build": "8.0.4",
    "@testing-library/jest-dom": "5.14.1",
-    "@testing-library/react": "12.0.0",
+    "@testing-library/react": "12.1.0",
    "codecov": "3.8.3",
    "enzyme": "3.11.0",
    "enzyme-adapter-react-16": "1.15.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/public/index.html
+++ b/public/index.html
@@ -4,7 +4,7 @@
      <title>Account | <%= process.env.SITE_NAME %></title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
-      <link rel="shortcut icon" href="<%=webpackConfig.output.publicPath%>favicon.ico" type="image/x-icon" />
+      <link rel="shortcut icon" href="<%=htmlWebpackPlugin.options.FAVICON_URL%>" type="image/x-icon" />
      <% if (process.env.OPTIMIZELY_PROJECT_ID) { %>
        <script
          src="<%= process.env.MARKETING_SITE_BASE_URL %>/optimizelyjs/<%= process.env.OPTIMIZELY_PROJECT_ID %>.js"
--- a/src/account-settings/AccountSettingsPage.jsx
+++ b/src/account-settings/AccountSettingsPage.jsx
@@ -19,13 +19,20 @@ import {
 import { CheckCircle, Error, WarningFilled } from '@edx/paragon/icons';

 import messages from './AccountSettingsPage.messages';
-import { fetchSettings, saveSettings, updateDraft } from './data/actions';
+import {
+  fetchSettings,
+  saveMultipleSettings,
+  saveSettings,
+  updateDraft,
+  beginNameChange,
+} from './data/actions';
 import { accountSettingsPageSelector } from './data/selectors';
 import PageLoading from './PageLoading';
 import JumpNav from './JumpNav';
 import DeleteAccount from './delete-account';
 import EditableField from './EditableField';
 import ResetPassword from './reset-password';
+import NameChange from './name-change';
 import ThirdPartyAuth from './third-party-auth';
 import BetaLanguageBanner from './BetaLanguageBanner';
 import EmailField from './EmailField';
@@ -146,6 +153,12 @@ class AccountSettingsPage extends React.Component {
    return bTimeSinceEpoch - aTimeSinceEpoch;
  }

+  verificationFailureAcked = verifiedNameObj => (
+    localStorage.getItem(
+      `dismissedVerifiedNameFailureMessage-${verifiedNameObj.verified_name}-${new Date(verifiedNameObj.created).valueOf()}`,
+    ) === 'true'
+  )
+
  sortVerifiedNameRecords = verifiedNameHistory => {
    if (Array.isArray(verifiedNameHistory)) {
      return [...verifiedNameHistory].sort(this.sortDates);
@@ -162,6 +175,34 @@ class AccountSettingsPage extends React.Component {
    this.props.saveSettings(formId, values);
  }

+  handleSubmitProfileName = (formId, values) => {
+    if (Object.keys(this.props.drafts).includes('useVerifiedNameForCerts')) {
+      this.props.saveMultipleSettings([
+        {
+          formId,
+          commitValues: values,
+        },
+        {
+          formId: 'useVerifiedNameForCerts',
+          commitValues: this.props.formValues.useVerifiedNameForCerts,
+        },
+      ], formId);
+    } else {
+      this.props.saveSettings(formId, values);
+    }
+  };
+
+  handleSubmitVerifiedName = (formId, values) => {
+    if (Object.keys(this.props.drafts).includes('useVerifiedNameForCerts')) {
+      this.props.saveSettings('useVerifiedNameForCerts', this.props.formValues.useVerifiedNameForCerts);
+    }
+    if (values !== this.props.committedValues?.verified_name) {
+      this.props.beginNameChange(formId);
+    } else {
+      this.props.saveSettings(formId, values);
+    }
+  }
+
  isEditable(fieldName) {
    return !this.props.staticFields.includes(fieldName);
  }
@@ -224,15 +265,52 @@ 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'])}
-    />
-  )
+  renderFullNameHelpText = (verifiedNameObj) => {
+    const { status, profile_name: profileName } = verifiedNameObj;
+    if (
+      !this.props.verifiedNameHistory
+      || !this.props.verifiedNameEnabled
+    ) {
+      return this.props.intl.formatMessage(messages['account.settings.field.full.name.help.text']);
+    }
+
+    switch (status) {
+      case 'submitted':
+        return this.props.intl.formatMessage(messages['account.settings.field.full.name.help.text.submitted']);
+      case 'denied':
+        if (this.props.committedValues.name !== profileName && !this.verificationFailureAcked(verifiedNameObj)) {
+          return (
+            <span className="text-danger">
+              { `${this.props.intl.formatMessage(messages['account.settings.field.full.name.failure.message'], { profileName })}` }
+              <a href="https://support.edx.org/hc/en-us/articles/360004381594-Why-was-my-ID-verification-denied">
+                {this.props.intl.formatMessage(messages['account.settings.field.name.verified.failure.message.help.link'])}
+              </a>
+            </span>
+          );
+        }
+        /* falls through */
+      default:
+        if (this.props.committedValues.useVerifiedNameForCerts) {
+          return this.props.intl.formatMessage(messages['account.settings.field.full.name.help.text.non.certificate']);
+        }
+        return this.props.intl.formatMessage(messages['account.settings.field.full.name.help.text.certificate']);
+    }
+  }
+
+  renderVerifiedNameSuccessMessage = (verifiedName, created) => {
+    const dateValue = new Date(created).valueOf();
+    const id = `dismissedVerifiedNameSuccessMessage-${verifiedName}-${dateValue}`;
+
+    return (
+      <OneTimeDismissibleAlert
+        id={id}
+        variant="success"
+        icon={CheckCircle}
+        header={this.props.intl.formatMessage(messages['account.settings.field.name.verified.success.message.header'])}
+        body={this.props.intl.formatMessage(messages['account.settings.field.name.verified.success.message'])}
+      />
+    );
+  }

  renderVerifiedNameFailureMessage = (verifiedName, created) => {
    const dateValue = new Date(created).valueOf();
@@ -288,7 +366,7 @@ class AccountSettingsPage extends React.Component {

    switch (status) {
      case 'approved':
-        return this.renderVerifiedNameSuccessMessage();
+        return this.renderVerifiedNameSuccessMessage(verifiedName, created);
      case 'denied':
        return this.renderVerifiedNameFailureMessage(verifiedName, created);
      case 'submitted':
@@ -309,26 +387,33 @@ class AccountSettingsPage extends React.Component {
    }
  }

-  renderVerifiedNameHelpText = (status) => {
+  renderVerifiedNameHelpText = (verifiedNameObj) => {
+    const { status, verified_name: verifiedName } = verifiedNameObj;
    switch (status) {
      case 'approved':
+        if (this.props.committedValues.useVerifiedNameForCerts) {
+          return (this.props.intl.formatMessage(messages['account.settings.field.name.verified.help.text.certificate']));
+        }
        return (this.props.intl.formatMessage(messages['account.settings.field.name.verified.help.text.verified']));
      case 'submitted':
        return (this.props.intl.formatMessage(messages['account.settings.field.name.verified.help.text.submitted']));
+      case 'denied':
+        if (!this.verificationFailureAcked(verifiedNameObj)) {
+          return (
+            <span className="text-danger">
+              { `${this.props.intl.formatMessage(messages['account.settings.field.name.verified.failure.message'], { verifiedName })} ` }
+              <a href="https://support.edx.org/hc/en-us/articles/360004381594-Why-was-my-ID-verification-denied">
+                {this.props.intl.formatMessage(messages['account.settings.field.name.verified.failure.message.help.link'])}
+              </a>
+            </span>
+          );
+        }
+        /* falls through */
      default:
        return null;
    }
  }

-  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'], {
@@ -338,6 +423,13 @@ class AccountSettingsPage extends React.Component {
    return this.props.intl.formatMessage(messages['account.settings.static.field.empty.no.admin']);
  }

+  renderNameChangeModal() {
+    if (this.props.nameChangeModal && this.props.nameChangeModal.formId) {
+      return <NameChange targetFormId={this.props.nameChangeModal.formId} />;
+    }
+    return null;
+  }
+
  renderSecondaryEmailField(editableFieldProps) {
    if (!this.props.formValues.secondary_email_enabled) {
      return null;
@@ -384,8 +476,7 @@ 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 { verifiedName, verifiedNameEnabled, mostRecentVerifiedName } = this.props;

    const timeZoneOptions = this.getLocalizedTimeZoneOptions(
      this.props.timeZoneOptions,
@@ -397,7 +488,10 @@ class AccountSettingsPage extends React.Component {
    return (
      <>
        <div className="account-section" id="basic-information" ref={this.navLinkRefs['#basic-information']}>
-          {verifiedNameEnabled && this.renderVerifiedNameMessage(this.props.formValues.mostRecentVerifiedName)}
+          {
+            verifiedNameEnabled && this.props.mostRecentVerifiedName
+            && this.renderVerifiedNameMessage(this.props.mostRecentVerifiedName)
+          }

          <h2 className="section-heading">
            {this.props.intl.formatMessage(messages['account.settings.section.account.information'])}
@@ -405,6 +499,8 @@ class AccountSettingsPage extends React.Component {
          <p>{this.props.intl.formatMessage(messages['account.settings.section.account.information.description'])}</p>
          {this.renderManagedProfileMessage()}

+          {this.renderNameChangeModal()}
+
          <EditableField
            name="username"
            type="text"
@@ -420,7 +516,13 @@ class AccountSettingsPage extends React.Component {
          <EditableField
            name="name"
            type="text"
-            value={this.props.formValues.name}
+            value={
+              verifiedNameEnabled
+              && verifiedName?.status === 'submitted'
+              && this.props.formValues.pending_name_change
+                ? this.props.formValues.pending_name_change
+                : this.props.formValues.name
+              }
            label={this.props.intl.formatMessage(messages['account.settings.field.full.name'])}
            emptyLabel={
              this.isEditable('name')
@@ -428,8 +530,8 @@ class AccountSettingsPage extends React.Component {
                : this.renderEmptyStaticFieldMessage()
            }
            helpText={
-              verifiedNameEnabled && verifiedName
-                ? this.renderFullNameHelpText(verifiedName.status)
+              verifiedNameEnabled && mostRecentVerifiedName
+                ? this.renderFullNameHelpText(mostRecentVerifiedName)
                : this.props.intl.formatMessage(messages['account.settings.field.full.name.help.text'])
            }
            isEditable={
@@ -440,14 +542,15 @@ class AccountSettingsPage extends React.Component {
            isGrayedOut={
              verifiedNameEnabled && verifiedName && !this.isEditable('verifiedName')
            }
-            {...editableFieldProps}
+            onChange={this.handleEditableFieldChange}
+            onSubmit={this.handleSubmitProfileName}
          />
          {verifiedNameEnabled && verifiedName
            && (
            <EditableField
-              name="verifiedName"
+              name="verified_name"
              type="text"
-              value={this.props.formValues.verifiedName.verified_name}
+              value={this.props.formValues.verified_name}
              label={
                (
                  <div className="d-flex">
@@ -458,10 +561,11 @@ class AccountSettingsPage extends React.Component {
                  </div>
                )
              }
-              helpText={this.renderVerifiedNameHelpText(verifiedName.status)}
+              helpText={this.renderVerifiedNameHelpText(mostRecentVerifiedName)}
              isEditable={this.isEditable('verifiedName')}
              isGrayedOut={!this.isEditable('verifiedName')}
-              {...(this.isEditable('verifiedName') && editableFieldProps)}
+              onChange={this.handleEditableFieldChange}
+              onSubmit={this.handleSubmitVerifiedName}
            />
            )}

@@ -727,6 +831,7 @@ AccountSettingsPage.propTypes = {
    level_of_education: PropTypes.string,
    gender: PropTypes.string,
    language_proficiencies: PropTypes.string,
+    pending_name_change: PropTypes.string,
    phone_number: PropTypes.string,
    social_link_linkedin: PropTypes.string,
    social_link_facebook: PropTypes.string,
@@ -739,25 +844,18 @@ 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,
-    }),
+    useVerifiedNameForCerts: PropTypes.bool.isRequired,
+    verified_name: PropTypes.string,
  }).isRequired,
+  committedValues: PropTypes.shape({
+    useVerifiedNameForCerts: PropTypes.bool,
+    verified_name: PropTypes.string,
+    name: PropTypes.string,
+  }),
+  drafts: PropTypes.shape({}),
+  formErrors: PropTypes.shape({
+    name: PropTypes.string,
+  }),
  siteLanguage: PropTypes.shape({
    previousValue: PropTypes.string,
    draft: PropTypes.string,
@@ -781,15 +879,43 @@ AccountSettingsPage.propTypes = {
  })),
  fetchSiteLanguages: PropTypes.func.isRequired,
  updateDraft: PropTypes.func.isRequired,
+  saveMultipleSettings: PropTypes.func.isRequired,
  saveSettings: PropTypes.func.isRequired,
  fetchSettings: PropTypes.func.isRequired,
-  tpaProviders: PropTypes.arrayOf(PropTypes.object),
+  beginNameChange: PropTypes.func.isRequired,
+  tpaProviders: PropTypes.arrayOf(PropTypes.shape({
+    connected: PropTypes.bool,
+  })),
+  nameChangeModal: PropTypes.shape({
+    formId: PropTypes.string,
+  }),
+  verifiedNameEnabled: PropTypes.bool,
+  verifiedName: PropTypes.shape({
+    verified_name: PropTypes.string,
+    status: PropTypes.string,
+  }),
+  mostRecentVerifiedName: PropTypes.shape({
+    verified_name: PropTypes.string,
+    status: PropTypes.string,
+  }),
+  verifiedNameHistory: PropTypes.arrayOf(
+    PropTypes.shape({
+      verified_name: PropTypes.string,
+      status: PropTypes.string,
+    }),
+  ),
 };

 AccountSettingsPage.defaultProps = {
  loading: false,
  loaded: false,
  loadingError: null,
+  committedValues: {
+    useVerifiedNameForCerts: false,
+    verified_name: null,
+  },
+  drafts: {},
+  formErrors: {},
  siteLanguage: null,
  siteLanguageOptions: [],
  timeZoneOptions: [],
@@ -799,11 +925,18 @@ AccountSettingsPage.defaultProps = {
  tpaProviders: [],
  isActive: true,
  secondary_email_enabled: false,
+  nameChangeModal: {},
+  verifiedNameEnabled: false,
+  verifiedName: null,
+  mostRecentVerifiedName: {},
+  verifiedNameHistory: [],
 };

 export default connect(accountSettingsPageSelector, {
  fetchSettings,
  saveSettings,
+  saveMultipleSettings,
  updateDraft,
  fetchSiteLanguages,
+  beginNameChange,
 })(injectIntl(AccountSettingsPage));
--- a/src/account-settings/AccountSettingsPage.messages.jsx
+++ b/src/account-settings/AccountSettingsPage.messages.jsx
@@ -91,6 +91,16 @@ const messages = defineMessages({
    defaultMessage: 'The name that is used for ID verification and that appears on your certificates.',
    description: 'Help text for the account settings name field.',
  },
+  'account.settings.field.full.name.help.text.non.certificate': {
+    id: 'account.settings.field.full.name.help.text.non.certificate',
+    defaultMessage: 'The name that appears on your public profile.',
+    description: 'Help text for the account settings name field.',
+  },
+  'account.settings.field.full.name.help.text.certificate': {
+    id: 'account.settings.field.full.name.help.text.certificate',
+    defaultMessage: 'This name is selected to appear on your certificates and public-facing records.',
+    description: 'Help text for the account settings name field.',
+  },
  'account.settings.field.name.verified': {
    id: 'account.settings.field.name.verified',
    defaultMessage: 'Verified name',
@@ -101,16 +111,31 @@ const messages = defineMessages({
    defaultMessage: 'This name has been verified by government ID.',
    description: 'Help text for the account settings verified name field when the name is verified.',
  },
+  'account.settings.field.name.verified.help.text.certificate': {
+    id: 'account.settings.field.name.verified.help.text.certificate',
+    defaultMessage: 'This name has been verified by government ID and selected to appear on your certificates and public-facing records.',
+    description: 'Help text for the account settings verified name field when the name is selected for certificates.',
+  },
  'account.settings.field.name.verified.help.text.submitted': {
    id: 'account.settings.field.name.verified.help.text.submitted',
    defaultMessage: 'Verification has been submitted. This usually takes 48 hours or less. Verified name cannot be changed at this time.',
    description: 'Help text for the account settings verified name field when a verified name has been submitted.',
  },
+  'account.settings.field.name.verified.verification.alert': {
+    id: 'account.settings.field.name.verified.verification.help',
+    defaultMessage: 'Enter your name as it appears on your government-issued ID.',
+    description: 'Form label instructing the user to enter the name on their ID.',
+  },
  'account.settings.field.full.name.help.text.submitted': {
    id: 'account.settings.field.full.name.help.text.submitted',
    defaultMessage: 'When identity verification is successful, this name will appear on your certificates and public-facing records. Full name cannot be changed at this time.',
    description: 'Help text for the account settings full name field when a verified name has been submitted.',
  },
+  'account.settings.field.full.name.failure.message': {
+    id: 'account.settings.field.name.verified.failure.message',
+    defaultMessage: 'Your Full name change attempt, “{profileName}”, did not pass ID verification. Your previous Full name settings have been restored. Try changing your Full name again. ',
+    description: 'The body of the failure alert indicating that a user\'s name was not able to be changed',
+  },
  'account.settings.field.name.verified.success.message': {
    id: 'account.settings.field.name.verified.success.message',
    defaultMessage: 'Your identity verification request has successfully completed. You now have the option of selecting which name you prefer to appear on your certificates and public-records.',
--- a/src/account-settings/EditableField.jsx
+++ b/src/account-settings/EditableField.jsx
@@ -16,6 +16,7 @@ import {
  closeForm,
 } from './data/actions';
 import { editableFieldSelector } from './data/selectors';
+import CertificatePreference from './certificate-preference/CertificatePreference';

 function EditableField(props) {
  const {
@@ -103,54 +104,57 @@ function EditableField(props) {
      expression={isEditing ? 'editing' : 'default'}
      cases={{
        editing: (
-          <form onSubmit={handleSubmit}>
-            <ValidationFormGroup
-              for={id}
-              invalid={error != null}
-              invalidMessage={error}
-              helpText={helpText}
-            >
-              <label className="h6 d-block" htmlFor={id}>{label}</label>
-              <Input
-                data-hj-suppress
-                name={name}
-                id={id}
-                type={type}
-                value={value}
-                onChange={handleChange}
-                options={options}
-                {...others}
-              />
-              <>{others.children}</>
-            </ValidationFormGroup>
-            <p>
-              <StatefulButton
-                type="submit"
-                className="mr-2"
-                state={saveState}
-                labels={{
-                  default: intl.formatMessage(messages['account.settings.editable.field.action.save']),
-                }}
-                onClick={(e) => {
-                  // Swallow clicks if the state is pending.
-                  // We do this instead of disabling the button to prevent
-                  // it from losing focus (disabled elements cannot have focus).
-                  // Disabling it would causes upstream issues in focus management.
-                  // Swallowing the onSubmit event on the form would be better, but
-                  // we would have to add that logic for every field given our
-                  // current structure of the application.
-                  if (saveState === 'pending') { e.preventDefault(); }
-                }}
-                disabledStates={[]}
-              />
-              <Button
-                variant="outline-primary"
-                onClick={handleCancel}
+          <>
+            <form onSubmit={handleSubmit}>
+              <ValidationFormGroup
+                for={id}
+                invalid={error != null}
+                invalidMessage={error}
+                helpText={helpText}
              >
-                {intl.formatMessage(messages['account.settings.editable.field.action.cancel'])}
-              </Button>
-            </p>
-          </form>
+                <label className="h6 d-block" htmlFor={id}>{label}</label>
+                <Input
+                  data-hj-suppress
+                  name={name}
+                  id={id}
+                  type={type}
+                  value={value}
+                  onChange={handleChange}
+                  options={options}
+                  {...others}
+                />
+                <>{others.children}</>
+              </ValidationFormGroup>
+              <p>
+                <StatefulButton
+                  type="submit"
+                  className="mr-2"
+                  state={saveState}
+                  labels={{
+                    default: intl.formatMessage(messages['account.settings.editable.field.action.save']),
+                  }}
+                  onClick={(e) => {
+                    // Swallow clicks if the state is pending.
+                    // We do this instead of disabling the button to prevent
+                    // it from losing focus (disabled elements cannot have focus).
+                    // Disabling it would causes upstream issues in focus management.
+                    // Swallowing the onSubmit event on the form would be better, but
+                    // we would have to add that logic for every field given our
+                    // current structure of the application.
+                    if (saveState === 'pending') { e.preventDefault(); }
+                  }}
+                  disabledStates={[]}
+                />
+                <Button
+                  variant="outline-primary"
+                  onClick={handleCancel}
+                >
+                  {intl.formatMessage(messages['account.settings.editable.field.action.cancel'])}
+                </Button>
+              </p>
+            </form>
+            {['name', 'verified_name'].includes(name) && <CertificatePreference fieldName={name} />}
+          </>
        ),
        default: (
          <div className="form-group">
--- a/src/account-settings/certificate-preference/CertificatePreference.jsx
+++ b/src/account-settings/certificate-preference/CertificatePreference.jsx
@@ -0,0 +1,175 @@
+import React, { useState, useEffect } from 'react';
+import { connect, useDispatch } from 'react-redux';
+import PropTypes from 'prop-types';
+
+import {
+  ActionRow,
+  Form,
+  ModalDialog,
+  StatefulButton,
+} from '@edx/paragon';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import {
+  closeForm,
+  resetDrafts,
+  saveSettings,
+  updateDraft,
+} from '../data/actions';
+import { certPreferenceSelector } from '../data/selectors';
+
+import commonMessages from '../AccountSettingsPage.messages';
+import messages from './messages';
+
+function CertificatePreference({
+  intl,
+  fieldName,
+  originalFullName,
+  originalVerifiedName,
+  saveState,
+  useVerifiedNameForCerts,
+  verifiedNameEnabled,
+}) {
+  if (!verifiedNameEnabled || !originalVerifiedName) {
+    // If the user doesn't have an approved verified name, do not display this component
+    return null;
+  }
+
+  const dispatch = useDispatch();
+  const [checked, setChecked] = useState(false);
+  const [modalIsOpen, setModalIsOpen] = useState(false);
+  const formId = 'useVerifiedNameForCerts';
+
+  function handleCheckboxChange() {
+    if (!checked) {
+      if (fieldName === 'verified_name') {
+        dispatch(updateDraft(formId, true));
+      } else {
+        dispatch(updateDraft(formId, false));
+      }
+    } else {
+      setModalIsOpen(true);
+    }
+  }
+
+  function handleCancel() {
+    setModalIsOpen(false);
+    dispatch(resetDrafts());
+  }
+
+  function handleModalChange(e) {
+    if (e.target.value === 'fullName') {
+      dispatch(updateDraft(formId, false));
+    } else {
+      dispatch(updateDraft(formId, true));
+    }
+  }
+
+  function handleSubmit(e) {
+    e.preventDefault();
+
+    if (saveState === 'pending') {
+      return;
+    }
+
+    dispatch(saveSettings(formId, useVerifiedNameForCerts));
+  }
+
+  useEffect(() => {
+    if (fieldName === 'verified_name') {
+      setChecked(useVerifiedNameForCerts);
+    } else {
+      setChecked(!useVerifiedNameForCerts);
+    }
+  }, [useVerifiedNameForCerts]);
+
+  useEffect(() => {
+    if (modalIsOpen && saveState === 'complete') {
+      setModalIsOpen(false);
+      dispatch(closeForm(fieldName));
+    }
+  }, [modalIsOpen, saveState]);
+
+  return (
+    <>
+      <Form.Checkbox className="mt-1 mb-4" checked={checked} onChange={handleCheckboxChange}>
+        {intl.formatMessage(messages['account.settings.field.name.checkbox.certificate.select'])}
+      </Form.Checkbox>
+
+      <ModalDialog
+        title={intl.formatMessage(messages['account.settings.field.name.modal.certificate.title'])}
+        isOpen={modalIsOpen}
+        onClose={handleCancel}
+        size="lg"
+        hasCloseButton
+        isFullscreenOnMobile
+      >
+        <Form onSubmit={handleSubmit}>
+          <ModalDialog.Header>
+            <ModalDialog.Title>
+              {intl.formatMessage(messages['account.settings.field.name.modal.certificate.title'])}
+            </ModalDialog.Title>
+          </ModalDialog.Header>
+
+          <ModalDialog.Body>
+            <Form.Group className="mb-4">
+              <Form.Label>
+                {intl.formatMessage(messages['account.settings.field.name.modal.certificate.select'])}
+              </Form.Label>
+              <Form.RadioSet
+                name={formId}
+                value={useVerifiedNameForCerts ? 'verifiedName' : 'fullName'}
+                onChange={handleModalChange}
+              >
+                <Form.Radio value="fullName">
+                  {originalFullName}{' '}
+                  ({intl.formatMessage(messages['account.settings.field.name.modal.certificate.option.full'])})
+                </Form.Radio>
+                <Form.Radio value="verifiedName">
+                  {originalVerifiedName}{' '}
+                  ({intl.formatMessage(messages['account.settings.field.name.modal.certificate.option.verified'])})
+                </Form.Radio>
+              </Form.RadioSet>
+            </Form.Group>
+          </ModalDialog.Body>
+
+          <ModalDialog.Footer>
+            <ActionRow>
+              <ModalDialog.CloseButton variant="outline-primary" disabled={saveState === 'pending'}>
+                {intl.formatMessage(commonMessages['account.settings.editable.field.action.cancel'])}
+              </ModalDialog.CloseButton>
+              <StatefulButton
+                type="submit"
+                state={saveState}
+                labels={{
+                  default: intl.formatMessage(messages['account.settings.field.name.modal.certificate.button.choose']),
+                }}
+                disabledStates={[]}
+              />
+            </ActionRow>
+          </ModalDialog.Footer>
+        </Form>
+      </ModalDialog>
+    </>
+  );
+}
+
+CertificatePreference.propTypes = {
+  intl: intlShape.isRequired,
+  fieldName: PropTypes.string.isRequired,
+  originalFullName: PropTypes.string,
+  originalVerifiedName: PropTypes.string,
+  saveState: PropTypes.string,
+  useVerifiedNameForCerts: PropTypes.bool,
+  verifiedNameEnabled: PropTypes.bool,
+};
+
+CertificatePreference.defaultProps = {
+  originalFullName: '',
+  originalVerifiedName: '',
+  saveState: null,
+  useVerifiedNameForCerts: false,
+  verifiedNameEnabled: false,
+};
+
+export default connect(certPreferenceSelector)(injectIntl(CertificatePreference));
--- a/src/account-settings/certificate-preference/data/service.js
+++ b/src/account-settings/certificate-preference/data/service.js
@@ -0,0 +1,22 @@
+import { getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+import { handleRequestError } from '../../data/utils';
+
+// eslint-disable-next-line import/prefer-default-export
+export async function postVerifiedNameConfig(username, commitValues) {
+  const requestConfig = { headers: { Accept: 'application/json' } };
+  const requestUrl = `${getConfig().LMS_BASE_URL}/api/edx_name_affirmation/v1/verified_name/config`;
+
+  const { useVerifiedNameForCerts } = commitValues;
+  const postValues = {
+    username,
+    use_verified_name_for_certs: useVerifiedNameForCerts,
+  };
+
+  const { data } = await getAuthenticatedHttpClient()
+    .post(requestUrl, postValues, requestConfig)
+    .catch(error => handleRequestError(error));
+
+  return data;
+}
--- a/src/account-settings/certificate-preference/messages.js
+++ b/src/account-settings/certificate-preference/messages.js
@@ -0,0 +1,36 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  'account.settings.field.name.checkbox.certificate.select': {
+    id: 'account.settings.field.name.certificate.select',
+    defaultMessage: 'If checked, this name will appear on your certificates and public-facing records.',
+    description: 'Label for checkbox describing that the selected name will appear on the user‘s certificates.',
+  },
+  'account.settings.field.name.modal.certificate.title': {
+    id: 'account.settings.field.name.modal.certificate.title',
+    defaultMessage: 'Choose a preferred name for certificates and public-facing records',
+    description: 'Title instructing the user to choose a preferred name.',
+  },
+  'account.settings.field.name.modal.certificate.select': {
+    id: 'account.settings.field.name.modal.certificate.select',
+    defaultMessage: 'Select a name',
+    description: 'Label instructing the user to select a name.',
+  },
+  'account.settings.field.name.modal.certificate.option.full': {
+    id: 'account.settings.field.name.modal.certificate.option.full',
+    defaultMessage: 'Full Name',
+    description: 'Option representing the user’s full name.',
+  },
+  'account.settings.field.name.modal.certificate.option.verified': {
+    id: 'account.settings.field.name.modal.certificate.option.verified',
+    defaultMessage: 'Verified Name',
+    description: 'Option representing the user’s verified name.',
+  },
+  'account.settings.field.name.modal.certificate.button.choose': {
+    id: 'account.settings.field.name.modal.certificate.button.choose',
+    defaultMessage: 'Choose name',
+    description: 'Button to confirm the user’s name choice.',
+  },
+});
+
+export default messages;
--- a/src/account-settings/certificate-preference/test/CertificatePreference.test.jsx
+++ b/src/account-settings/certificate-preference/test/CertificatePreference.test.jsx
@@ -0,0 +1,174 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
+import { Router } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+import {
+  fireEvent,
+  render,
+  screen,
+} from '@testing-library/react';
+import { createMemoryHistory } from 'history';
+
+import * as auth from '@edx/frontend-platform/auth';
+import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
+
+// Modal creates a portal.  Overriding ReactDOM.createPortal allows portals to be tested in jest.
+ReactDOM.createPortal = node => node;
+
+import CertificatePreference from '../CertificatePreference'; // eslint-disable-line import/first
+
+const mockDispatch = jest.fn();
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useDispatch: () => mockDispatch,
+}));
+
+jest.mock('@edx/frontend-platform/auth');
+jest.mock('../../data/selectors', () => jest.fn().mockImplementation(() => ({ certPreferenceSelector: () => ({}) })));
+
+const history = createMemoryHistory();
+
+const IntlCertificatePreference = injectIntl(CertificatePreference);
+
+const mockStore = configureStore();
+
+describe('NameChange', () => {
+  let props = {};
+  let store = {};
+  const formId = 'useVerifiedNameForCerts';
+  const updateDraft = 'UPDATE_DRAFT';
+  const labelText = 'If checked, this name will appear on your certificates and public-facing records.';
+
+  const reduxWrapper = children => (
+    <Router history={history}>
+      <IntlProvider locale="en">
+        <Provider store={store}>{children}</Provider>
+      </IntlProvider>
+    </Router>
+  );
+
+  beforeEach(() => {
+    store = mockStore();
+    props = {
+      fieldName: 'name',
+      originalFullName: 'Ed X',
+      originalVerifiedName: 'edX Verified',
+      saveState: null,
+      useVerifiedNameForCerts: false,
+      verifiedNameEnabled: true,
+      intl: {},
+    };
+
+    auth.getAuthenticatedHttpClient = jest.fn(() => ({
+      patch: async () => ({
+        data: { status: 200 },
+        catch: () => {},
+      }),
+    }));
+    auth.getAuthenticatedUser = jest.fn(() => ({ userId: 3 }));
+  });
+
+  afterEach(() => jest.clearAllMocks());
+
+  it('does not render if there is no verified name', () => {
+    props = {
+      ...props,
+      originalVerifiedName: '',
+    };
+
+    const wrapper = render(reduxWrapper(<IntlCertificatePreference {...props} />));
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('does not trigger modal when checking empty checkbox, and updates draft immediately', () => {
+    props = {
+      ...props,
+      useVerifiedNameForCerts: true,
+    };
+
+    render(reduxWrapper(<IntlCertificatePreference {...props} />));
+
+    const checkbox = screen.getByLabelText(labelText);
+    expect(checkbox.checked).toEqual(false);
+
+    fireEvent.click(checkbox);
+
+    expect(screen.queryByRole('radiogroup')).toBeNull();
+    expect(mockDispatch).toHaveBeenCalledWith({
+      payload: { name: formId, value: false },
+      type: updateDraft,
+    });
+  });
+
+  it('triggers modal when attempting to uncheck checkbox', () => {
+    render(reduxWrapper(<IntlCertificatePreference {...props} />));
+
+    const checkbox = screen.getByLabelText(labelText);
+    expect(checkbox.checked).toEqual(true);
+
+    fireEvent.click(checkbox);
+    expect(mockDispatch).not.toHaveBeenCalled();
+
+    screen.getByRole('radiogroup');
+  });
+
+  it('updates draft when changing radio value', () => {
+    render(reduxWrapper(<IntlCertificatePreference {...props} />));
+
+    const checkbox = screen.getByLabelText(labelText);
+    fireEvent.click(checkbox);
+
+    const fullNameOption = screen.getByLabelText('Ed X (Full Name)');
+    const verifiedNameOption = screen.getByLabelText('edX Verified (Verified Name)');
+    expect(fullNameOption.checked).toEqual(true);
+    expect(verifiedNameOption.checked).toEqual(false);
+
+    fireEvent.click(verifiedNameOption);
+    expect(mockDispatch).toHaveBeenCalledWith({
+      payload: { name: formId, value: true },
+      type: updateDraft,
+    });
+  });
+
+  it('clears draft on cancel', () => {
+    render(reduxWrapper(<IntlCertificatePreference {...props} />));
+
+    const checkbox = screen.getByLabelText(labelText);
+    fireEvent.click(checkbox);
+
+    const cancelButton = screen.getByText('Cancel');
+    fireEvent.click(cancelButton);
+
+    expect(mockDispatch).toHaveBeenCalledWith({ type: 'RESET_DRAFTS' });
+    expect(screen.queryByRole('radiogroup')).toBeNull();
+  });
+
+  it('submits', () => {
+    render(reduxWrapper(<IntlCertificatePreference {...props} />));
+
+    const checkbox = screen.getByLabelText(labelText);
+    fireEvent.click(checkbox);
+
+    const submitButton = screen.getByText('Choose name');
+    fireEvent.click(submitButton);
+    expect(mockDispatch).toHaveBeenCalledWith({
+      payload: { formId, commitValues: false },
+      type: 'ACCOUNT_SETTINGS__SAVE_SETTINGS',
+    });
+  });
+
+  it('checks box for verified name', () => {
+    props = {
+      ...props,
+      fieldName: 'verified_name',
+      useVerifiedNameForCerts: true,
+    };
+
+    render(reduxWrapper(<IntlCertificatePreference {...props} />));
+
+    const checkbox = screen.getByLabelText(labelText);
+    expect(checkbox.checked).toEqual(true);
+  });
+});
--- a/src/account-settings/certificate-preference/test/snapshots/CertificatePreference.test.jsx.snap
+++ b/src/account-settings/certificate-preference/test/snapshots/CertificatePreference.test.jsx.snap
@@ -0,0 +1,62 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NameChange does not render if there is no verified name 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div />
+  </body>,
+  "container": <div />,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
--- a/src/account-settings/data/actions.js
+++ b/src/account-settings/data/actions.js
@@ -9,6 +9,7 @@ export const OPEN_FORM = 'OPEN_FORM';
 export const CLOSE_FORM = 'CLOSE_FORM';
 export const UPDATE_DRAFT = 'UPDATE_DRAFT';
 export const RESET_DRAFTS = 'RESET_DRAFTS';
+export const BEGIN_NAME_CHANGE = 'BEGIN_NAME_CHANGE';

 // FETCH SETTINGS ACTIONS

@@ -25,6 +26,7 @@ export const fetchSettingsSuccess = ({
  thirdPartyAuthProviders,
  profileDataManager,
  timeZones,
+  verifiedNameHistory,
 }) => ({
  type: FETCH_SETTINGS.SUCCESS,
  payload: {
@@ -32,6 +34,7 @@ export const fetchSettingsSuccess = ({
    thirdPartyAuthProviders,
    profileDataManager,
    timeZones,
+    verifiedNameHistory,
  },
 });

@@ -68,6 +71,10 @@ export const resetDrafts = () => ({
  type: RESET_DRAFTS,
 });

+export const beginNameChange = (formId) => ({
+  type: BEGIN_NAME_CHANGE,
+  payload: { formId },
+});
 // SAVE SETTINGS ACTIONS

 export const saveSettings = (formId, commitValues) => ({
--- a/src/account-settings/data/reducers.js
+++ b/src/account-settings/data/reducers.js
@@ -8,11 +8,13 @@ import {
  UPDATE_DRAFT,
  RESET_DRAFTS,
  SAVE_MULTIPLE_SETTINGS,
+  BEGIN_NAME_CHANGE,
 } from './actions';

 import { reducer as deleteAccountReducer, DELETE_ACCOUNT } from '../delete-account';
 import { reducer as siteLanguageReducer, FETCH_SITE_LANGUAGES } from '../site-language';
 import { reducer as resetPasswordReducer, RESET_PASSWORD } from '../reset-password';
+import { reducer as nameChangeReducer, REQUEST_NAME_CHANGE } from '../name-change';
 import { reducer as thirdPartyAuthReducer, DISCONNECT_AUTH } from '../third-party-auth';

 export const defaultState = {
@@ -31,7 +33,13 @@ export const defaultState = {
  deleteAccount: deleteAccountReducer(),
  siteLanguage: siteLanguageReducer(),
  resetPassword: resetPasswordReducer(),
+  nameChange: nameChangeReducer(),
  thirdPartyAuth: thirdPartyAuthReducer(),
+  nameChangeModal: false,
+  verifiedName: null,
+  mostRecentVerifiedName: {},
+  verifiedNameHistory: {},
+  verifiedNameEnabled: false,
 };

 const reducer = (state = defaultState, action) => {
@@ -56,6 +64,7 @@ const reducer = (state = defaultState, action) => {
        loading: false,
        loaded: true,
        loadingError: null,
+        verifiedNameHistory: action.payload.verifiedNameHistory,
      };
    case FETCH_SETTINGS.FAILURE:
      return {
@@ -89,6 +98,7 @@ const reducer = (state = defaultState, action) => {
          saveState: null,
          errors: {},
          drafts: {},
+          nameChangeModal: false,
        };
      }
      return state;
@@ -106,6 +116,15 @@ const reducer = (state = defaultState, action) => {
        drafts: {},
      };

+    case BEGIN_NAME_CHANGE:
+      return {
+        ...state,
+        saveState: 'error',
+        nameChangeModal: {
+          formId: action.payload.formId,
+        },
+      };
+
    case SAVE_SETTINGS.BEGIN:
      return {
        ...state,
@@ -119,7 +138,6 @@ const reducer = (state = defaultState, action) => {
        values: { ...state.values, ...action.payload.values },
        errors: {},
        confirmationValues: {
-
          ...state.confirmationValues,
          ...action.payload.confirmationValues,
        },
@@ -198,6 +216,15 @@ const reducer = (state = defaultState, action) => {
        resetPassword: resetPasswordReducer(state.resetPassword, action),
      };

+    case REQUEST_NAME_CHANGE.BEGIN:
+    case REQUEST_NAME_CHANGE.SUCCESS:
+    case REQUEST_NAME_CHANGE.FAILURE:
+    case REQUEST_NAME_CHANGE.RESET:
+      return {
+        ...state,
+        nameChange: nameChangeReducer(state.nameChange, action),
+      };
+
    case DISCONNECT_AUTH.BEGIN:
    case DISCONNECT_AUTH.SUCCESS:
    case DISCONNECT_AUTH.FAILURE:
--- a/src/account-settings/data/sagas.js
+++ b/src/account-settings/data/sagas.js
@@ -25,11 +25,13 @@ import {
  saveMultipleSettingsBegin,
  saveMultipleSettingsSuccess,
  saveMultipleSettingsFailure,
+  beginNameChange,
 } from './actions';

 // Sub-modules
 import { saga as deleteAccountSaga } from '../delete-account';
 import { saga as resetPasswordSaga } from '../reset-password';
+import { saga as nameChangeSaga } from '../name-change';
 import {
  saga as siteLanguageSaga,
  patchPreferences,
@@ -42,6 +44,7 @@ import {
  getSettings,
  patchSettings,
  getTimeZones,
+  getVerifiedNameHistory,
 } from './service';

 export function* handleFetchSettings() {
@@ -58,6 +61,8 @@ export function* handleFetchSettings() {
      userId,
    );

+    const verifiedNameHistory = yield call(getVerifiedNameHistory);
+
    if (values.country) { yield put(fetchTimeZones(values.country)); }

    yield put(fetchSettingsSuccess({
@@ -65,6 +70,7 @@ export function* handleFetchSettings() {
      thirdPartyAuthProviders,
      profileDataManager,
      timeZones,
+      verifiedNameHistory,
    }));
  } catch (e) {
    yield put(fetchSettingsFailure(e.message));
@@ -102,6 +108,9 @@ export function* handleSaveSettings(action) {
    yield put(closeForm(action.payload.formId));
  } catch (e) {
    if (e.fieldErrors) {
+      if (Object.keys(e.fieldErrors).includes('name')) {
+        yield put(beginNameChange('name'));
+      }
      yield put(saveSettingsFailure({ fieldErrors: e.fieldErrors }));
    } else {
      yield put(saveSettingsFailure(e.message));
@@ -130,6 +139,9 @@ export function* handleSaveMultipleSettings(action) {
    }
  } catch (e) {
    if (e.fieldErrors) {
+      if (Object.keys(e.fieldErrors).includes('name')) {
+        yield put(beginNameChange('name'));
+      }
      yield put(saveMultipleSettingsFailure({ fieldErrors: e.fieldErrors }));
    } else {
      yield put(saveMultipleSettingsFailure(e.message));
@@ -152,6 +164,7 @@ export default function* saga() {
    deleteAccountSaga(),
    siteLanguageSaga(),
    resetPasswordSaga(),
+    nameChangeSaga(),
    thirdPartyAuthSaga(),
  ]);
 }
--- a/src/account-settings/data/selectors.js
+++ b/src/account-settings/data/selectors.js
@@ -1,5 +1,6 @@
 import { createSelector, createStructuredSelector } from 'reselect';
 import { siteLanguageListSelector, siteLanguageOptionsSelector } from '../site-language';
+import { compareVerifiedNamesByCreatedDate } from '../../utils';

 export const storeName = 'accountSettings';

@@ -7,19 +8,22 @@ export const accountSettingsSelector = state => ({ ...state[storeName] });

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

-const sortedVerifiedNameHistorySelector = createSelector(
+const verifiedNameSettingsSelector = createSelector(
  accountSettingsSelector,
-  accountSettings => {
-    function sortDates(a, b) {
-      const aTimeSinceEpoch = new Date(a).getTime();
-      const bTimeSinceEpoch = new Date(b).getTime();
-      return bTimeSinceEpoch - aTimeSinceEpoch;
-    }
+  accountSettings => ({
+    history: accountSettings.verifiedNameHistory.results,
+    verifiedNameEnabled: accountSettings?.verifiedNameHistory.verified_name_enabled,
+    useVerifiedNameForCerts: accountSettings?.verifiedNameHistory.use_verified_name_for_certs,
+  }),
+);

-    const history = accountSettings.values.verifiedNameHistory && accountSettings.values.verifiedNameHistory.results;
+const sortedVerifiedNameHistorySelector = createSelector(
+  verifiedNameSettingsSelector,
+  verifiedNameSettings => {
+    const { history } = verifiedNameSettings;

    if (Array.isArray(history)) {
-      return history.sort(sortDates);
+      return history.sort(compareVerifiedNamesByCreatedDate);
    }

    return [];
@@ -42,6 +46,7 @@ const mostRecentApprovedVerifiedNameValueSelector = createSelector(
    switch (mostRecentVerifiedName && mostRecentVerifiedName.status) {
      case 'approved':
      case 'denied':
+      case 'pending':
        verifiedName = approvedVerifiedName;
        break;
      case 'submitted':
@@ -56,14 +61,22 @@ const mostRecentApprovedVerifiedNameValueSelector = createSelector(

 const valuesSelector = createSelector(
  accountSettingsSelector,
-  mostRecentVerifiedNameSelector,
  mostRecentApprovedVerifiedNameValueSelector,
-  (accountSettings, mostRecentVerifiedNameValue, mostRecentApprovedVerifiedNameValue) => (
-    {
+  (accountSettings, mostRecentApprovedVerifiedNameValue) => {
+    let useVerifiedNameForCerts = (
+      accountSettings.verifiedNameHistory?.use_verified_name_for_certs || false
+    );
+
+    if (Object.keys(accountSettings.confirmationValues).includes('useVerifiedNameForCerts')) {
+      useVerifiedNameForCerts = accountSettings.confirmationValues.useVerifiedNameForCerts;
+    }
+
+    return {
      ...accountSettings.values,
-      verifiedName: mostRecentApprovedVerifiedNameValue,
-      mostRecentVerifiedName: mostRecentVerifiedNameValue,
-    }),
+      verified_name: mostRecentApprovedVerifiedNameValue?.verified_name,
+      useVerifiedNameForCerts,
+    };
+  },
 );

 const draftsSelector = createSelector(
@@ -104,6 +117,11 @@ const errorSelector = createSelector(
  accountSettings => accountSettings.errors,
 );

+const nameChangeModalSelector = createSelector(
+  accountSettingsSelector,
+  accountSettings => accountSettings.nameChangeModal,
+);
+
 const saveStateSelector = createSelector(
  accountSettingsSelector,
  accountSettings => accountSettings.saveState,
@@ -129,7 +147,7 @@ export const staticFieldsSelector = createSelector(
    if (accountSettings.profileDataManager) {
      staticFields.push('name', 'email', 'country');
    }
-    if (verifiedName && ['pending', 'submitted'].includes(verifiedName.status)) {
+    if (verifiedName && ['submitted'].includes(verifiedName.status)) {
      staticFields.push('verifiedName');
    }

@@ -150,7 +168,11 @@ const formValuesSelector = createSelector(
  (values, drafts) => {
    const formValues = {};
    Object.entries(values).forEach(([name, value]) => {
-      formValues[name] = chooseFormValue(drafts[name], value) || '';
+      if (typeof value === 'boolean') {
+        formValues[name] = chooseFormValue(drafts[name], value);
+      } else {
+        formValues[name] = chooseFormValue(drafts[name], value) || '';
+      }
    });
    return formValues;
  },
@@ -195,21 +217,37 @@ export const accountSettingsPageSelector = createSelector(
  siteLanguageOptionsSelector,
  siteLanguageSelector,
  formValuesSelector,
+  valuesSelector,
+  draftsSelector,
+  errorSelector,
  profileDataManagerSelector,
  staticFieldsSelector,
  timeZonesSelector,
  countryTimeZonesSelector,
  activeAccountSelector,
+  nameChangeModalSelector,
+  mostRecentApprovedVerifiedNameValueSelector,
+  mostRecentVerifiedNameSelector,
+  sortedVerifiedNameHistorySelector,
+  verifiedNameSettingsSelector,
  (
    accountSettings,
    siteLanguageOptions,
    siteLanguage,
    formValues,
+    committedValues,
+    drafts,
+    formErrors,
    profileDataManager,
    staticFields,
    timeZoneOptions,
    countryTimeZoneOptions,
    activeAccount,
+    nameChangeModal,
+    verifiedName,
+    mostRecentVerifiedName,
+    verifiedNameHistory,
+    verifiedNameSettings,
  ) => ({
    siteLanguageOptions,
    siteLanguage,
@@ -220,9 +258,41 @@ export const accountSettingsPageSelector = createSelector(
    countryTimeZoneOptions,
    isActive: activeAccount,
    formValues,
+    committedValues,
+    drafts,
+    formErrors,
    profileDataManager,
    staticFields,
    tpaProviders: accountSettings.thirdPartyAuth.providers,
+    nameChangeModal,
+    verifiedName,
+    mostRecentVerifiedName,
+    verifiedNameHistory,
+    verifiedNameEnabled: verifiedNameSettings?.verifiedNameEnabled,
+  }),
+);
+
+export const certPreferenceSelector = createSelector(
+  verifiedNameSettingsSelector,
+  valuesSelector,
+  formValuesSelector,
+  mostRecentApprovedVerifiedNameValueSelector,
+  saveStateSelector,
+  errorSelector,
+  (
+    verifiedNameSettings,
+    committedValues,
+    formValues,
+    mostRecentApprovedVerifiedNameValue,
+    saveState,
+    errors,
+  ) => ({
+    originalFullName: committedValues?.name || '',
+    originalVerifiedName: mostRecentApprovedVerifiedNameValue?.verified_name || '',
+    useVerifiedNameForCerts: formValues.useVerifiedNameForCerts || false,
+    saveState,
+    verifiedNameEnabled: verifiedNameSettings.verifiedNameEnabled || false,
+    formErrors: errors,
  }),
 );

@@ -269,3 +339,12 @@ export const demographicsSectionSelector = createSelector(
    formErrors: errors,
  }),
 );
+
+export const nameChangeSelector = createSelector(
+  accountSettingsSelector,
+  formValuesSelector,
+  (accountSettings, formValues) => ({
+    ...accountSettings.nameChange,
+    formValues,
+  }),
+);
--- a/src/account-settings/data/service.js
+++ b/src/account-settings/data/service.js
@@ -7,6 +7,7 @@ import isEmpty from 'lodash.isempty';

 import { handleRequestError, unpackFieldErrors } from './utils';
 import { getThirdPartyAuthProviders } from '../third-party-auth';
+import { postVerifiedNameConfig } from '../certificate-preference/data/service';
 import { getCoachingPreferences, patchCoachingPreferences } from '../coaching/data/service';
 import { getDemographics, getDemographicsOptions, patchDemographics } from '../demographics/data/service';
 import { DEMOGRAPHICS_FIELDS } from '../demographics/data/utils';
@@ -176,6 +177,19 @@ export async function shouldDisplayDemographicsQuestions() {
  return false;
 }

+export async function getVerifiedNameEnabled() {
+  let data;
+  const client = getAuthenticatedHttpClient();
+  try {
+    const requestUrl = `${getConfig().LMS_BASE_URL}/api/edx_name_affirmation/v1/verified_name_enabled`;
+    ({ data } = await client.get(requestUrl));
+  } catch (error) {
+    return {};
+  }
+
+  return data;
+}
+
 export async function getVerifiedName() {
  let data;
  const client = getAuthenticatedHttpClient();
@@ -202,6 +216,15 @@ export async function getVerifiedNameHistory() {
  return data;
 }

+export async function postVerifiedName(data) {
+  const requestConfig = { headers: { Accept: 'application/json' } };
+  const requestUrl = `${getConfig().LMS_BASE_URL}/api/edx_name_affirmation/v1/verified_name`;
+
+  await getAuthenticatedHttpClient()
+    .post(requestUrl, data, requestConfig)
+    .catch(error => handleRequestError(error));
+}
+
 /**
 * A single function to GET everything considered a setting.
 * Currently encapsulates Account, Preferences, Coaching, ThirdPartyAuth, and Demographics
@@ -217,7 +240,6 @@ export async function getSettings(username, userRoles, userId) {
    shouldDisplayDemographicsQuestionsResponse,
    demographics,
    demographicsOptions,
-    verifiedNameHistory,
  ] = await Promise.all([
    getAccount(username),
    getPreferences(username),
@@ -228,7 +250,6 @@ 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 {
@@ -241,7 +262,6 @@ export async function getSettings(username, userRoles, userId) {
    shouldDisplayDemographicsSection: shouldDisplayDemographicsQuestionsResponse,
    ...demographics,
    demographicsOptions,
-    verifiedNameHistory,
  };
 }

@@ -256,11 +276,19 @@ export async function patchSettings(username, commitValues, userId) {
  const preferenceKeys = ['time_zone'];
  const coachingKeys = ['coaching'];
  const demographicsKeys = DEMOGRAPHICS_FIELDS;
+  const certificateKeys = ['useVerifiedNameForCerts'];
  const isDemographicsKey = (value, key) => key.includes('demographics');
-  const accountCommitValues = omit(commitValues, preferenceKeys, coachingKeys, demographicsKeys);
+  const accountCommitValues = omit(
+    commitValues,
+    preferenceKeys,
+    coachingKeys,
+    demographicsKeys,
+    certificateKeys,
+  );
  const preferenceCommitValues = pick(commitValues, preferenceKeys);
  const coachingCommitValues = pick(commitValues, coachingKeys);
  const demographicsCommitValues = pickBy(commitValues, isDemographicsKey);
+  const certCommitValues = pick(commitValues, certificateKeys);
  const patchRequests = [];

  if (!isEmpty(accountCommitValues)) {
@@ -275,6 +303,9 @@ export async function patchSettings(username, commitValues, userId) {
  if (!isEmpty(demographicsCommitValues)) {
    patchRequests.push(patchDemographics(userId, demographicsCommitValues));
  }
+  if (!isEmpty(certCommitValues)) {
+    patchRequests.push(postVerifiedNameConfig(username, certCommitValues));
+  }

  const results = await Promise.all(patchRequests);
  // Assigns in order of requests. Preference keys
--- a/src/account-settings/name-change/NameChange.jsx
+++ b/src/account-settings/name-change/NameChange.jsx
@@ -0,0 +1,203 @@
+import React, { useEffect, useState } from 'react';
+import { connect, useDispatch } from 'react-redux';
+import { useHistory } from 'react-router-dom';
+import PropTypes from 'prop-types';
+
+import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import {
+  ActionRow,
+  Alert,
+  Button,
+  Col,
+  Form,
+  ModalDialog,
+  StatefulButton,
+} from '@edx/paragon';
+
+import { closeForm, saveSettingsReset } from '../data/actions';
+import { nameChangeSelector } from '../data/selectors';
+
+import { requestNameChange, requestNameChangeFailure, requestNameChangeReset } from './data/actions';
+import messages from './messages';
+
+function NameChangeModal({
+  targetFormId,
+  errors,
+  formValues,
+  intl,
+  saveState,
+}) {
+  const dispatch = useDispatch();
+  const { push } = useHistory();
+  const { username } = getAuthenticatedUser();
+  const [verifiedNameInput, setVerifiedNameInput] = useState(formValues.verified_name || '');
+  const [confirmedWarning, setConfirmedWarning] = useState(false);
+
+  function resetLocalState() {
+    setConfirmedWarning(false);
+    dispatch(requestNameChangeReset());
+  }
+
+  function handleChange(e) {
+    setVerifiedNameInput(e.target.value);
+  }
+
+  function handleClose() {
+    resetLocalState();
+    dispatch(closeForm(targetFormId));
+    dispatch(saveSettingsReset());
+  }
+
+  function handleSubmit(e) {
+    e.preventDefault();
+
+    if (saveState === 'pending') {
+      return;
+    }
+
+    if (!verifiedNameInput) {
+      dispatch(requestNameChangeFailure({
+        verified_name: intl.formatMessage(messages['account.settings.name.change.error.valid.name']),
+      }));
+    } else {
+      const draftProfileName = targetFormId === 'name' ? formValues.name : null;
+      dispatch(requestNameChange(username, draftProfileName, verifiedNameInput));
+    }
+  }
+
+  useEffect(() => {
+    if (saveState === 'complete') {
+      handleClose();
+      push('/id-verification');
+    }
+  }, [saveState]);
+
+  function renderErrors() {
+    if (Object.keys(errors).length > 0) {
+      return (
+        <>
+          {Object.entries(errors).map(([key, value]) => (
+            <Form.Control.Feedback type="invalid" key={key}>
+              {
+                key === 'general_error'
+                  ? intl.formatMessage(messages['account.settings.name.change.error.general'])
+                  : value
+              }
+            </Form.Control.Feedback>
+          ))}
+        </>
+      );
+    }
+    return null;
+  }
+
+  function renderTitle() {
+    if (!confirmedWarning) {
+      return intl.formatMessage(messages['account.settings.name.change.title.id']);
+    }
+
+    return intl.formatMessage(messages['account.settings.name.change.title.begin']);
+  }
+
+  function renderBody() {
+    if (!confirmedWarning) {
+      return (
+        <Alert variant="warning">
+          <p>
+            {intl.formatMessage(messages['account.settings.name.change.warning.one'])}
+          </p>
+          <p>
+            {intl.formatMessage(messages['account.settings.name.change.warning.two'])}
+          </p>
+        </Alert>
+      );
+    }
+
+    return (
+      <Form.Group as={Col} isInvalid={Object.keys(errors).length > 0}>
+        <Form.Label>
+          {intl.formatMessage(messages['account.settings.name.change.id.name.label'])}
+        </Form.Label>
+        <Form.Control
+          type="text"
+          name="verifiedName"
+          placeholder={intl.formatMessage(messages['account.settings.name.change.id.name.placeholder'])}
+          value={verifiedNameInput}
+          onChange={handleChange}
+        />
+        {renderErrors()}
+      </Form.Group>
+    );
+  }
+
+  function renderContinueButton() {
+    if (!confirmedWarning) {
+      return (
+        <Button variant="primary" onClick={() => setConfirmedWarning(true)}>
+          {intl.formatMessage(messages['account.settings.name.change.continue'])}
+        </Button>
+      );
+    }
+
+    return (
+      <StatefulButton
+        type="submit"
+        state={saveState}
+        labels={{
+          default: intl.formatMessage(messages['account.settings.name.change.continue']),
+        }}
+        disabledStates={[]}
+      />
+    );
+  }
+
+  return (
+    <ModalDialog
+      title={renderTitle()}
+      isOpen
+      hasCloseButton={false}
+      onClose={handleClose}
+    >
+
+      <Form onSubmit={handleSubmit}>
+        <ModalDialog.Header>
+          <ModalDialog.Title>
+            {renderTitle()}
+          </ModalDialog.Title>
+        </ModalDialog.Header>
+
+        <ModalDialog.Body>
+          {renderBody()}
+        </ModalDialog.Body>
+
+        <ModalDialog.Footer>
+          <ActionRow>
+            <ModalDialog.CloseButton variant="tertiary">
+              {intl.formatMessage(messages['account.settings.name.change.cancel'])}
+            </ModalDialog.CloseButton>
+            {renderContinueButton()}
+          </ActionRow>
+        </ModalDialog.Footer>
+      </Form>
+
+    </ModalDialog>
+  );
+}
+
+NameChangeModal.propTypes = {
+  targetFormId: PropTypes.string.isRequired,
+  errors: PropTypes.shape({}).isRequired,
+  formValues: PropTypes.shape({
+    name: PropTypes.string,
+    verified_name: PropTypes.string,
+  }).isRequired,
+  saveState: PropTypes.string,
+  intl: intlShape.isRequired,
+};
+
+NameChangeModal.defaultProps = {
+  saveState: null,
+};
+
+export default connect(nameChangeSelector)(injectIntl(NameChangeModal));
--- a/src/account-settings/name-change/data/actions.js
+++ b/src/account-settings/name-change/data/actions.js
@@ -0,0 +1,25 @@
+import { AsyncActionType } from '../../data/utils';
+
+export const REQUEST_NAME_CHANGE = new AsyncActionType('ACCOUNT_SETTINGS', 'REQUEST_NAME_CHANGE');
+
+export const requestNameChange = (username, profileName, verifiedName) => ({
+  type: REQUEST_NAME_CHANGE.BASE,
+  payload: { username, profileName, verifiedName },
+});
+
+export const requestNameChangeBegin = () => ({
+  type: REQUEST_NAME_CHANGE.BEGIN,
+});
+
+export const requestNameChangeSuccess = () => ({
+  type: REQUEST_NAME_CHANGE.SUCCESS,
+});
+
+export const requestNameChangeFailure = errors => ({
+  type: REQUEST_NAME_CHANGE.FAILURE,
+  payload: { errors },
+});
+
+export const requestNameChangeReset = () => ({
+  type: REQUEST_NAME_CHANGE.RESET,
+});
--- a/src/account-settings/name-change/data/reducers.js
+++ b/src/account-settings/name-change/data/reducers.js
@@ -0,0 +1,44 @@
+import { REQUEST_NAME_CHANGE } from './actions';
+
+export const defaultState = {
+  saveState: null,
+  errors: {},
+};
+
+const reducer = (state = defaultState, action = null) => {
+  if (action !== null) {
+    switch (action.type) {
+      case REQUEST_NAME_CHANGE.BEGIN:
+        return {
+          ...state,
+          saveState: 'pending',
+          errors: {},
+        };
+
+      case REQUEST_NAME_CHANGE.SUCCESS:
+        return {
+          ...state,
+          saveState: 'complete',
+        };
+
+      case REQUEST_NAME_CHANGE.FAILURE:
+        return {
+          ...state,
+          saveState: 'error',
+          errors: action.payload.errors || { general_error: 'A technical error occurred. Please try again.' },
+        };
+
+      case REQUEST_NAME_CHANGE.RESET:
+        return {
+          ...state,
+          saveState: null,
+          errors: {},
+        };
+
+      default:
+    }
+  }
+  return state;
+};
+
+export default reducer;
--- a/src/account-settings/name-change/data/sagas.js
+++ b/src/account-settings/name-change/data/sagas.js
@@ -0,0 +1,40 @@
+import { put, call, takeEvery } from 'redux-saga/effects';
+
+import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
+
+import { postVerifiedName } from '../../data/service';
+
+import {
+  REQUEST_NAME_CHANGE,
+  requestNameChangeBegin,
+  requestNameChangeSuccess,
+  requestNameChangeFailure,
+} from './actions';
+import { postNameChange } from './service';
+
+export function* handleRequestNameChange(action) {
+  let { name: profileName } = getAuthenticatedUser();
+  try {
+    yield put(requestNameChangeBegin());
+    if (action.payload.profileName) {
+      yield call(postNameChange, action.payload.profileName);
+      profileName = action.payload.profileName;
+    }
+    yield call(postVerifiedName, {
+      username: action.payload.username,
+      verified_name: action.payload.verifiedName,
+      profile_name: profileName,
+    });
+    yield put(requestNameChangeSuccess());
+  } catch (err) {
+    if (err.customAttributes?.httpErrorResponseData) {
+      yield put(requestNameChangeFailure(JSON.parse(err.customAttributes.httpErrorResponseData)));
+    } else {
+      yield put(requestNameChangeFailure());
+    }
+  }
+}
+
+export default function* saga() {
+  yield takeEvery(REQUEST_NAME_CHANGE.BASE, handleRequestNameChange);
+}
--- a/src/account-settings/name-change/data/service.js
+++ b/src/account-settings/name-change/data/service.js
@@ -0,0 +1,17 @@
+import { getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+import { handleRequestError } from '../../data/utils';
+
+// eslint-disable-next-line import/prefer-default-export
+export async function postNameChange(name) {
+  // Requests a pending name change, rather than saving the account name immediately
+  const requestConfig = { headers: { Accept: 'application/json' } };
+  const requestUrl = `${getConfig().LMS_BASE_URL}/api/user/v1/accounts/name_change/`;
+
+  const { data } = await getAuthenticatedHttpClient()
+    .post(requestUrl, { name }, requestConfig)
+    .catch(error => handleRequestError(error));
+
+  return data;
+}
--- a/src/account-settings/name-change/index.js
+++ b/src/account-settings/name-change/index.js
@@ -0,0 +1,4 @@
+export { default } from './NameChange';
+export { default as reducer } from './data/reducers';
+export { default as saga } from './data/sagas';
+export { REQUEST_NAME_CHANGE } from './data/actions';
--- a/src/account-settings/name-change/messages.js
+++ b/src/account-settings/name-change/messages.js
@@ -0,0 +1,56 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  'account.settings.name.change.title.id': {
+    id: 'account.settings.name.change.title.id',
+    defaultMessage: 'This name change requires identity verification',
+    description: 'Inform the user that changing their name requires identity verification',
+  },
+  'account.settings.name.change.title.begin': {
+    id: 'account.settings.name.change.title.begin',
+    defaultMessage: 'Before we begin',
+    description: 'Title before beginning the ID verification process',
+  },
+  'account.settings.name.change.warning.one': {
+    id: 'account.settings.name.change.warning.one',
+    defaultMessage: 'Warning: This action updates the name that appears on all certificates that have been earned on this account in the past and any certificates you are currently earning or will earn in the future.',
+    description: 'Warning informing the user that a name change will update the name on all of their certificates.',
+  },
+  'account.settings.name.change.warning.two': {
+    id: 'account.settings.name.change.warning.two',
+    defaultMessage: 'This action cannot be undone without verifying your identity.',
+    description: 'Warning informing the user that a name change cannot be undone without ID verification.',
+  },
+  'account.settings.name.change.id.name.label': {
+    id: 'account.settings.name.change.id.name.label',
+    defaultMessage: 'Enter your name as it appears on your government-issued ID.',
+    description: 'Form label instructing the user to enter the name on their ID.',
+  },
+  'account.settings.name.change.id.name.placeholder': {
+    id: 'account.settings.name.change.id.name.placeholder',
+    defaultMessage: 'Enter the name on your government ID',
+    description: 'Form label instructing the user to enter the name on their ID.',
+  },
+  'account.settings.name.change.error.valid.name': {
+    id: 'account.settings.name.change.error.valid.name',
+    defaultMessage: 'Please enter a valid name.',
+    description: 'Error that appears when the user doesn’t enter a valid name.',
+  },
+  'account.settings.name.change.error.general': {
+    id: 'account.settings.name.change.error.general',
+    defaultMessage: 'A technical error occurred. Please try again.',
+    description: 'Generic error message.',
+  },
+  'account.settings.name.change.continue': {
+    id: 'account.settings.name.change.continue',
+    defaultMessage: 'Continue',
+    description: 'Continue button.',
+  },
+  'account.settings.name.change.cancel': {
+    id: 'account.settings.name.change.cancel',
+    defaultMessage: 'Cancel',
+    description: 'Cancel button.',
+  },
+});
+
+export default messages;
--- a/src/account-settings/name-change/test/NameChange.test.jsx
+++ b/src/account-settings/name-change/test/NameChange.test.jsx
@@ -0,0 +1,172 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
+import { Router } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+import {
+  fireEvent,
+  render,
+  screen,
+} from '@testing-library/react';
+import { createMemoryHistory } from 'history';
+
+import * as auth from '@edx/frontend-platform/auth';
+import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
+
+// Modal creates a portal.  Overriding ReactDOM.createPortal allows portals to be tested in jest.
+ReactDOM.createPortal = node => node;
+
+import NameChange from '../NameChange'; // eslint-disable-line import/first
+
+const mockDispatch = jest.fn();
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useDispatch: () => mockDispatch,
+}));
+
+jest.mock('@edx/frontend-platform/auth');
+jest.mock('../../data/selectors', () => jest.fn().mockImplementation(() => ({ nameChangeSelector: () => ({}) })));
+
+const history = createMemoryHistory();
+
+const IntlNameChange = injectIntl(NameChange);
+
+const mockStore = configureStore();
+
+describe('NameChange', () => {
+  let props = {};
+  let store = {};
+
+  const reduxWrapper = children => (
+    <Router history={history}>
+      <IntlProvider locale="en">
+        <Provider store={store}>{children}</Provider>
+      </IntlProvider>
+    </Router>
+  );
+
+  beforeEach(() => {
+    store = mockStore();
+    props = {
+      targetFormId: 'test_form',
+      errors: {},
+      formValues: {
+        name: 'edx edx',
+        verified_name: 'edX Verified',
+      },
+      saveState: null,
+      intl: {},
+    };
+
+    auth.getAuthenticatedHttpClient = jest.fn(() => ({
+      patch: async () => ({
+        data: { status: 200 },
+        catch: () => {},
+      }),
+    }));
+    auth.getAuthenticatedUser = jest.fn(() => ({ userId: 3, username: 'edx' }));
+  });
+
+  afterEach(() => jest.clearAllMocks());
+
+  it('renders populated input after clicking continue if verified_name in form data', async () => {
+    const getInput = () => screen.queryByPlaceholderText('Enter the name on your government ID');
+
+    render(reduxWrapper(<IntlNameChange {...props} />));
+    expect(getInput()).toBeNull();
+
+    const continueButton = screen.getByText('Continue');
+    fireEvent.click(continueButton);
+
+    expect(getInput().value).toBe('edX Verified');
+  });
+
+  it('renders empty input after clicking continue if verified_name not in form data', async () => {
+    const getInput = () => screen.queryByPlaceholderText('Enter the name on your government ID');
+    const formProps = {
+      ...props,
+      formValues: {
+        name: 'edx edx',
+      },
+    };
+    render(reduxWrapper(<IntlNameChange {...formProps} />));
+
+    const continueButton = screen.getByText('Continue');
+    fireEvent.click(continueButton);
+
+    expect(getInput().value).toBe('');
+  });
+
+  it('dispatches verifiedName on submit if targetForm is not "name"', async () => {
+    const dispatchData = {
+      payload: {
+        profileName: null,
+        username: 'edx',
+        verifiedName: 'Verified Name',
+      },
+      type: 'ACCOUNT_SETTINGS__REQUEST_NAME_CHANGE',
+    };
+
+    render(reduxWrapper(<IntlNameChange {...props} />));
+
+    const continueButton = screen.getByText('Continue');
+    fireEvent.click(continueButton);
+
+    const input = screen.getByPlaceholderText('Enter the name on your government ID');
+    fireEvent.change(input, { target: { value: 'Verified Name' } });
+
+    const submitButton = screen.getByText('Continue');
+    fireEvent.click(submitButton);
+    expect(mockDispatch).toHaveBeenCalledWith(dispatchData);
+  });
+
+  it('dispatches both profileName and verifiedName on submit if the targetForm is "name"', async () => {
+    const dispatchData = {
+      payload: {
+        profileName: 'edx edx',
+        username: 'edx',
+        verifiedName: 'Verified Name',
+      },
+      type: 'ACCOUNT_SETTINGS__REQUEST_NAME_CHANGE',
+    };
+    const formProps = {
+      ...props,
+      targetFormId: 'name',
+    };
+
+    render(reduxWrapper(<IntlNameChange {...formProps} />));
+
+    const continueButton = screen.getByText('Continue');
+    fireEvent.click(continueButton);
+
+    const input = screen.getByPlaceholderText('Enter the name on your government ID');
+    fireEvent.change(input, { target: { value: 'Verified Name' } });
+
+    const submitButton = screen.getByText('Continue');
+    fireEvent.click(submitButton);
+    expect(mockDispatch).toHaveBeenCalledWith(dispatchData);
+  });
+
+  it('does not dispatch action while pending', async () => {
+    props.saveState = 'pending';
+
+    render(reduxWrapper(<IntlNameChange {...props} />));
+
+    const continueButton = screen.getByText('Continue');
+    fireEvent.click(continueButton);
+
+    const input = screen.getByPlaceholderText('Enter the name on your government ID');
+    fireEvent.change(input, { target: { value: 'Verified Name' } });
+
+    const submitButton = screen.getByText('Continue');
+    fireEvent.click(submitButton);
+    expect(mockDispatch).not.toHaveBeenCalled();
+  });
+
+  it('routes to IDV when name change request is successful', async () => {
+    props.saveState = 'complete';
+
+    render(reduxWrapper(<IntlNameChange {...props} />));
+    expect(history.location.pathname).toEqual('/id-verification');
+  });
+});
--- a/src/assets/favicon.ico
+++ b/src/assets/favicon.ico
--- a/src/i18n/messages/ar.json
+++ b/src/i18n/messages/ar.json
@@ -20,8 +20,11 @@
  "account.settings.field.full.name": "الاسم الكامل",
  "account.settings.field.full.name.empty": "إضافة اسم",
  "account.settings.field.full.name.help.text": "الاسم المستخدم للتحقق من هويتك والذي سوف يظهر على الشهادات الخاصة بك.",
+  "account.settings.field.full.name.help.text.non.certificate": "The name that appears on your public profile.",
+  "account.settings.field.full.name.help.text.certificate": "This name is selected to appear on your certificates and public-facing records.",
  "account.settings.field.name.verified": "Verified name",
  "account.settings.field.name.verified.help.text.verified": "This name has been verified by government ID.",
+  "account.settings.field.name.verified.help.text.certificate": "This name has been verified by government ID and selected to appear on your certificates and public-facing records.",
  "account.settings.field.name.verified.help.text.submitted": "Verification has been submitted. This usually takes 48 hours or less. Verified name cannot be changed at this time.",
  "account.settings.field.full.name.help.text.submitted": "When identity verification is successful, this name will appear on your certificates and public-facing records. Full name cannot be changed at this time.",
  "account.settings.field.name.verified.success.message": "Your identity verification request has successfully completed. You now have the option of selecting which name you prefer to appear on your certificates and public-records.",
@@ -91,6 +94,12 @@
  "account.settings.editable.field.action.edit": "تحرير",
  "account.settings.static.field.empty": "لم يتم تحديد قيمة، فضلًا اتصل بمدير  {enterprise} لتعيين بعض التغييرات.",
  "account.settings.static.field.empty.no.admin": "لم يتم تحديد قيمة",
+  "account.settings.field.name.certificate.select": "If checked, this name will appear on your certificates and public-facing records.",
+  "account.settings.field.name.modal.certificate.title": "Choose a preferred name for certificates and public-facing records",
+  "account.settings.field.name.modal.certificate.select": "Select a name",
+  "account.settings.field.name.modal.certificate.option.full": "Full Name",
+  "account.settings.field.name.modal.certificate.option.verified": "Verified Name",
+  "account.settings.field.name.modal.certificate.button.choose": "Choose name",
  "account.settings.coaching.consent.welcome.header": "لنبدأ",
  "account.settings.coaching.consent.welcome.subheader": "نحن هنا لأجلك من البداية حتى النهاية",
  "account.settings.coaching.consent.description": "تتضمن برامج البكالوريوس التدريب الذي يركز على مهنتك وتعليمك وكيفية تحقيق نتائج مبهرة من خلال التواصل الشخصي مع خبراء متمرسين. إذا كنت مهتمًا، فقدّم المعلومات أدناه وانقر فوق \"إرسال\"، وسيتصل بك شريكنا في التدريب عبر البريد الإلكتروني و/أو الرسائل النصية لمساعدتك على المضي قدمًا. تنطبق الشروط والأحكام.*",
@@ -168,6 +177,16 @@
  "account.settings.field.demographics.future_work_sector.empty": "إضافة مجال العمل",
  "account.settings.field.demographics.work_sector.options.empty": "حدد مجال العمل",
  "account.settings.section.demographics.why": "Why does {siteName} collect this information?",
+  "account.settings.name.change.title.id": "This name change requires identity verification",
+  "account.settings.name.change.title.begin": "Before we begin",
+  "account.settings.name.change.warning.one": "Warning: This action updates the name that appears on all certificates that have been earned on this account in the past and any certificates you are currently earning or will earn in the future.",
+  "account.settings.name.change.warning.two": "This action cannot be undone without verifying your identity.",
+  "account.settings.name.change.id.name.label": "Enter your name as it appears on your government-issued ID.",
+  "account.settings.name.change.id.name.placeholder": "Enter the name on your government ID",
+  "account.settings.name.change.error.valid.name": "Please enter a valid name.",
+  "account.settings.name.change.error.general": "A technical error occurred. Please try again.",
+  "account.settings.name.change.continue": "Continue",
+  "account.settings.name.change.cancel": "Cancel",
  "error.notfound.message": "الصفحة التي تبحث عنها غير متوفرة أو هناك خطأ في نص الرابط. الرجاء التحقق من الرابط والمحاولة مجددا.",
  "account.settings.editable.field.password.reset.button.confirmation.support.link": "الدعم الفني",
  "account.settings.editable.field.password.reset.button.confirmation": "لقد أرسلنا رسالة إلى {email}. انقر فوق الرابط في الرسالة لإعادة تعيين كلمة المرور. إذا لم يتم استلام الرسالة؟ اتصل بـ {technicalSupportLink}.",
--- a/src/i18n/messages/es_419.json
+++ b/src/i18n/messages/es_419.json
@@ -20,8 +20,11 @@
  "account.settings.field.full.name": "Nombre completo",
  "account.settings.field.full.name.empty": "Añade nombre",
  "account.settings.field.full.name.help.text": "El nombre que es usado para la verificación de identidad y aparece en sus certificados.",
+  "account.settings.field.full.name.help.text.non.certificate": "The name that appears on your public profile.",
+  "account.settings.field.full.name.help.text.certificate": "This name is selected to appear on your certificates and public-facing records.",
  "account.settings.field.name.verified": "Verified name",
  "account.settings.field.name.verified.help.text.verified": "This name has been verified by government ID.",
+  "account.settings.field.name.verified.help.text.certificate": "This name has been verified by government ID and selected to appear on your certificates and public-facing records.",
  "account.settings.field.name.verified.help.text.submitted": "Verification has been submitted. This usually takes 48 hours or less. Verified name cannot be changed at this time.",
  "account.settings.field.full.name.help.text.submitted": "When identity verification is successful, this name will appear on your certificates and public-facing records. Full name cannot be changed at this time.",
  "account.settings.field.name.verified.success.message": "Your identity verification request has successfully completed. You now have the option of selecting which name you prefer to appear on your certificates and public-records.",
@@ -91,6 +94,12 @@
  "account.settings.editable.field.action.edit": "Editar",
  "account.settings.static.field.empty": "No hay valor establecido. Contacte su administrador {enterprise} para hacer cambios.",
  "account.settings.static.field.empty.no.admin": "No hay valor establecido.",
+  "account.settings.field.name.certificate.select": "If checked, this name will appear on your certificates and public-facing records.",
+  "account.settings.field.name.modal.certificate.title": "Choose a preferred name for certificates and public-facing records",
+  "account.settings.field.name.modal.certificate.select": "Select a name",
+  "account.settings.field.name.modal.certificate.option.full": "Full Name",
+  "account.settings.field.name.modal.certificate.option.verified": "Verified Name",
+  "account.settings.field.name.modal.certificate.button.choose": "Choose name",
  "account.settings.coaching.consent.welcome.header": "Empecemos",
  "account.settings.coaching.consent.welcome.subheader": "Estamos aquí para ustede desde el inicio hasta el final",
  "account.settings.coaching.consent.description": "Los programas de MicroBachelors incluyen entrenamiento que se enfoca en su carrera, educación y cómo logrará resultados a través de la comunicación individual con un profesional experimentado. Si está interesado, proporcione la información a continuación y haga clic en \"Enviar\", y nuestro socio asesor se comunicará con usted por correo electrónico y / o mensaje de texto para ayudarlo a avanzar. Los términos y Condiciones aplican.*",
@@ -168,6 +177,16 @@
  "account.settings.field.demographics.future_work_sector.empty": "Añade área profesional",
  "account.settings.field.demographics.work_sector.options.empty": "Selecciona área profesional",
  "account.settings.section.demographics.why": "Why does {siteName} collect this information?",
+  "account.settings.name.change.title.id": "This name change requires identity verification",
+  "account.settings.name.change.title.begin": "Before we begin",
+  "account.settings.name.change.warning.one": "Warning: This action updates the name that appears on all certificates that have been earned on this account in the past and any certificates you are currently earning or will earn in the future.",
+  "account.settings.name.change.warning.two": "This action cannot be undone without verifying your identity.",
+  "account.settings.name.change.id.name.label": "Enter your name as it appears on your government-issued ID.",
+  "account.settings.name.change.id.name.placeholder": "Enter the name on your government ID",
+  "account.settings.name.change.error.valid.name": "Please enter a valid name.",
+  "account.settings.name.change.error.general": "A technical error occurred. Please try again.",
+  "account.settings.name.change.continue": "Continue",
+  "account.settings.name.change.cancel": "Cancel",
  "error.notfound.message": "La página que estas buscando no está disponible o hay un error en la URL. Por favor, comprueba la URL y vuelve a intentarlo.",
  "account.settings.editable.field.password.reset.button.confirmation.support.link": "soporte técnico",
  "account.settings.editable.field.password.reset.button.confirmation": "Hemos mandado un mensaje a {email}. Haz clic en el enlace en el mensaje para restablecer tu contraseña. ¿No recibiste el mensaje? Contáctate con {technicalSupportLink}.",
--- a/src/i18n/messages/fr.json
+++ b/src/i18n/messages/fr.json
@@ -20,8 +20,11 @@
  "account.settings.field.full.name": "Full name",
  "account.settings.field.full.name.empty": "Add name",
  "account.settings.field.full.name.help.text": "The name that is used for ID verification and that appears on your certificates.",
+  "account.settings.field.full.name.help.text.non.certificate": "The name that appears on your public profile.",
+  "account.settings.field.full.name.help.text.certificate": "This name is selected to appear on your certificates and public-facing records.",
  "account.settings.field.name.verified": "Verified name",
  "account.settings.field.name.verified.help.text.verified": "This name has been verified by government ID.",
+  "account.settings.field.name.verified.help.text.certificate": "This name has been verified by government ID and selected to appear on your certificates and public-facing records.",
  "account.settings.field.name.verified.help.text.submitted": "Verification has been submitted. This usually takes 48 hours or less. Verified name cannot be changed at this time.",
  "account.settings.field.full.name.help.text.submitted": "When identity verification is successful, this name will appear on your certificates and public-facing records. Full name cannot be changed at this time.",
  "account.settings.field.name.verified.success.message": "Your identity verification request has successfully completed. You now have the option of selecting which name you prefer to appear on your certificates and public-records.",
@@ -91,6 +94,12 @@
  "account.settings.editable.field.action.edit": "Edit",
  "account.settings.static.field.empty": "No value set. Contact your {enterprise} administrator to make changes.",
  "account.settings.static.field.empty.no.admin": "No value set.",
+  "account.settings.field.name.certificate.select": "If checked, this name will appear on your certificates and public-facing records.",
+  "account.settings.field.name.modal.certificate.title": "Choose a preferred name for certificates and public-facing records",
+  "account.settings.field.name.modal.certificate.select": "Select a name",
+  "account.settings.field.name.modal.certificate.option.full": "Full Name",
+  "account.settings.field.name.modal.certificate.option.verified": "Verified Name",
+  "account.settings.field.name.modal.certificate.button.choose": "Choose name",
  "account.settings.coaching.consent.welcome.header": "Let’s get started.",
  "account.settings.coaching.consent.welcome.subheader": "We're here for you from start to finish",
  "account.settings.coaching.consent.description": "MicroBachelors programs include coaching that focuses on your career, education, and how you'll achieve results through one-on-one communication with an experienced professional. If you’re interested, provide the information below and click “Submit,” and our coaching partner will connect with you via email and/or text message to help you move forward. Terms and conditions apply.*",
@@ -168,6 +177,16 @@
  "account.settings.field.demographics.future_work_sector.empty": "Add work industry",
  "account.settings.field.demographics.work_sector.options.empty": "Select work industry",
  "account.settings.section.demographics.why": "Why does {siteName} collect this information?",
+  "account.settings.name.change.title.id": "This name change requires identity verification",
+  "account.settings.name.change.title.begin": "Before we begin",
+  "account.settings.name.change.warning.one": "Warning: This action updates the name that appears on all certificates that have been earned on this account in the past and any certificates you are currently earning or will earn in the future.",
+  "account.settings.name.change.warning.two": "This action cannot be undone without verifying your identity.",
+  "account.settings.name.change.id.name.label": "Enter your name as it appears on your government-issued ID.",
+  "account.settings.name.change.id.name.placeholder": "Enter the name on your government ID",
+  "account.settings.name.change.error.valid.name": "Please enter a valid name.",
+  "account.settings.name.change.error.general": "A technical error occurred. Please try again.",
+  "account.settings.name.change.continue": "Continue",
+  "account.settings.name.change.cancel": "Cancel",
  "error.notfound.message": "The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again.",
  "account.settings.editable.field.password.reset.button.confirmation.support.link": "technical support",
  "account.settings.editable.field.password.reset.button.confirmation": "We've sent a message to {email}. Click the link in the message to reset your password. Didn't receive the message? Contact {technicalSupportLink}.",
--- a/src/i18n/messages/zh_CN.json
+++ b/src/i18n/messages/zh_CN.json
@@ -20,8 +20,11 @@
  "account.settings.field.full.name": "Full name",
  "account.settings.field.full.name.empty": "Add name",
  "account.settings.field.full.name.help.text": "The name that is used for ID verification and that appears on your certificates.",
+  "account.settings.field.full.name.help.text.non.certificate": "The name that appears on your public profile.",
+  "account.settings.field.full.name.help.text.certificate": "This name is selected to appear on your certificates and public-facing records.",
  "account.settings.field.name.verified": "Verified name",
  "account.settings.field.name.verified.help.text.verified": "This name has been verified by government ID.",
+  "account.settings.field.name.verified.help.text.certificate": "This name has been verified by government ID and selected to appear on your certificates and public-facing records.",
  "account.settings.field.name.verified.help.text.submitted": "Verification has been submitted. This usually takes 48 hours or less. Verified name cannot be changed at this time.",
  "account.settings.field.full.name.help.text.submitted": "When identity verification is successful, this name will appear on your certificates and public-facing records. Full name cannot be changed at this time.",
  "account.settings.field.name.verified.success.message": "Your identity verification request has successfully completed. You now have the option of selecting which name you prefer to appear on your certificates and public-records.",
@@ -91,6 +94,12 @@
  "account.settings.editable.field.action.edit": "Edit",
  "account.settings.static.field.empty": "No value set. Contact your {enterprise} administrator to make changes.",
  "account.settings.static.field.empty.no.admin": "No value set.",
+  "account.settings.field.name.certificate.select": "If checked, this name will appear on your certificates and public-facing records.",
+  "account.settings.field.name.modal.certificate.title": "Choose a preferred name for certificates and public-facing records",
+  "account.settings.field.name.modal.certificate.select": "Select a name",
+  "account.settings.field.name.modal.certificate.option.full": "Full Name",
+  "account.settings.field.name.modal.certificate.option.verified": "Verified Name",
+  "account.settings.field.name.modal.certificate.button.choose": "Choose name",
  "account.settings.coaching.consent.welcome.header": "Let’s get started.",
  "account.settings.coaching.consent.welcome.subheader": "We're here for you from start to finish",
  "account.settings.coaching.consent.description": "MicroBachelors programs include coaching that focuses on your career, education, and how you'll achieve results through one-on-one communication with an experienced professional. If you’re interested, provide the information below and click “Submit,” and our coaching partner will connect with you via email and/or text message to help you move forward. Terms and conditions apply.*",
@@ -168,6 +177,16 @@
  "account.settings.field.demographics.future_work_sector.empty": "Add work industry",
  "account.settings.field.demographics.work_sector.options.empty": "Select work industry",
  "account.settings.section.demographics.why": "Why does {siteName} collect this information?",
+  "account.settings.name.change.title.id": "This name change requires identity verification",
+  "account.settings.name.change.title.begin": "Before we begin",
+  "account.settings.name.change.warning.one": "Warning: This action updates the name that appears on all certificates that have been earned on this account in the past and any certificates you are currently earning or will earn in the future.",
+  "account.settings.name.change.warning.two": "This action cannot be undone without verifying your identity.",
+  "account.settings.name.change.id.name.label": "Enter your name as it appears on your government-issued ID.",
+  "account.settings.name.change.id.name.placeholder": "Enter the name on your government ID",
+  "account.settings.name.change.error.valid.name": "Please enter a valid name.",
+  "account.settings.name.change.error.general": "A technical error occurred. Please try again.",
+  "account.settings.name.change.continue": "Continue",
+  "account.settings.name.change.cancel": "Cancel",
  "error.notfound.message": "The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again.",
  "account.settings.editable.field.password.reset.button.confirmation.support.link": "technical support",
  "account.settings.editable.field.password.reset.button.confirmation": "We've sent a message to {email}. Click the link in the message to reset your password. Didn't receive the message? Contact {technicalSupportLink}.",
--- a/src/id-verification/IdVerification.messages.js
+++ b/src/id-verification/IdVerification.messages.js
@@ -28,7 +28,7 @@ const messages = defineMessages({
  },
  'id.verification.requirements.description': {
    id: 'id.verification.requirements.description',
-    defaultMessage: 'In order to complete Photo Verification online, you will need the following:',
+    defaultMessage: 'In order to complete Photo Verification, you will need the following:',
    description: 'Description for the Photo Verification Requirements page.',
  },
  'id.verification.requirements.card.device.title': {
@@ -43,12 +43,12 @@ const messages = defineMessages({
  },
  'id.verification.requirements.card.id.title': {
    id: 'id.verification.requirements.card.id.title',
-    defaultMessage: 'Photo Identification',
+    defaultMessage: 'Photo Identification Card',
    description: 'Title for the Photo Identification requirement card.',
  },
  'id.verification.requirements.card.id.text': {
    id: 'id.verification.requirements.card.id.text',
-    defaultMessage: 'You need a valid identification card that contains your full name and photo.',
+    defaultMessage: 'You need a valid identification card that contains your full name and photo, such as a driver’s license or passport.',
    description: 'Text that explains that the user needs a photo ID.',
  },
  'id.verification.privacy.title': {
@@ -463,22 +463,22 @@ const messages = defineMessages({
  },
  'id.verification.id.photo.unclear.question': {
    id: 'id.verification.id.photo.unclear.question',
-    defaultMessage: 'Is your ID image not clear or too blurry?',
+    defaultMessage: 'Is your ID card image not clear or too blurry?',
    description: 'Question on what to do if the user\'s ID image is unclear',
  },
  'id.verification.id.tips.title': {
    id: 'id.verification.id.tips.title',
-    defaultMessage: 'Helpful ID Tips',
+    defaultMessage: 'Helpful Identification Card Tips',
    description: 'Title for the ID Tips page.',
  },
  'id.verification.id.tips.description': {
    id: 'id.verification.id.tips.description',
-    defaultMessage: 'Next, we\'ll need you to take a photo of a valid identification card that includes your full name and photo. Please have your ID ready.',
+    defaultMessage: 'Next, we\'ll need you to take a photo of a valid identification card that includes your full name and photo, such as a driver’s license or passport. Please have your ID ready.',
    description: 'Description for the ID Tips page.',
  },
  'id.verification.id.tips.list.well.lit': {
    id: 'id.verification.id.tips.list.well.lit',
-    defaultMessage: 'Your ID is well-lit.',
+    defaultMessage: 'Your identification card is well-lit.',
    description: 'Tip to ensure ID is well lit.',
  },
  'id.verification.id.tips.list.clear': {
@@ -488,12 +488,12 @@ const messages = defineMessages({
  },
  'id.verification.id.photo.title.camera': {
    id: 'id.verification.id.photo.title.camera',
-    defaultMessage: 'Take a Photo of Your ID',
+    defaultMessage: 'Take a Photo of Your Identification Card',
    description: 'Title for the ID Photo page if camera access is enabled.',
  },
  'id.verification.id.photo.title.upload': {
    id: 'id.verification.id.photo.title.upload',
-    defaultMessage: 'Upload a Photo of Your ID',
+    defaultMessage: 'Upload a Photo of Your Identification Card',
    description: 'Title for the ID Photo page if camera access is disabled.',
  },
  'id.verification.id.photo.preview.alt': {
@@ -503,12 +503,12 @@ const messages = defineMessages({
  },
  'id.verification.id.photo.instructions.camera': {
    id: 'id.verification.id.photo.instructions.camera',
-    defaultMessage: 'When your ID is in position, use the Take Photo button below to take your photo.',
+    defaultMessage: 'When your ID is in position, use the Take Photo button below to take your photo. Please use a passport, driver’s license, or another identification card that includes your full name and a picture of your face.',
    description: 'Instructions to use the camera to take an ID photo.',
  },
  'id.verification.id.photo.instructions.upload': {
    id: 'id.verification.id.photo.instructions.upload',
-    defaultMessage: 'Please upload an ID photo. Ensure the entire ID fits inside the frame and is well-lit. The file size must be under 10 MB. Supported formats: ',
+    defaultMessage: 'Please upload a photo of your identification card. Ensure the entire ID fits inside the frame and is well-lit. The file size must be under 10 MB. Supported formats: ',
    description: 'Instructions for ID photo upload.',
  },
  'id.verification.id.photo.instructions.upload.error.invalidFileType': {
@@ -603,12 +603,12 @@ const messages = defineMessages({
  },
  'id.verification.review.id.label': {
    id: 'id.verification.review.id.label',
-    defaultMessage: 'Your Photo ID',
+    defaultMessage: 'Your Identification Card',
    description: 'Label for the Photo ID card.',
  },
  'id.verification.review.id.alt': {
    id: 'id.verification.review.id.alt',
-    defaultMessage: 'Photo of your ID to be submitted.',
+    defaultMessage: 'Photo of your identification card to be submitted.',
    description: 'Alt text for the ID photo.',
  },
  'id.verification.review.id.retake': {
--- a/src/id-verification/IdVerificationContextProvider.jsx
+++ b/src/id-verification/IdVerificationContextProvider.jsx
@@ -2,16 +2,18 @@ import React, { useState, useContext, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { AppContext } from '@edx/frontend-platform/react';

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

 import { getExistingIdVerification, getEnrollments } from './data/service';
 import AccessBlocked from './AccessBlocked';
 import { hasGetUserMediaSupport } from './getUserMediaShim';
 import IdVerificationContext, { MEDIA_ACCESS, ERROR_REASONS, VERIFIED_MODES } from './IdVerificationContext';
+import { VerifiedNameContext } from './VerifiedNameContext';

 export default function IdVerificationContextProvider({ children }) {
  const { authenticatedUser } = useContext(AppContext);
+  const { verifiedName, verifiedNameEnabled } = useContext(VerifiedNameContext);

  const [existingIdVerification, setExistingIdVerification] = useState(null);
  useEffect(() => {
@@ -33,8 +35,9 @@ export default function IdVerificationContextProvider({ children }) {
  const [canVerify, setCanVerify] = useState(true);
  const [error, setError] = useState('');
  useEffect(() => {
-    // Check for an existing verification attempt
-    if (existingIdVerification && !existingIdVerification.canVerify) {
+    // With verified name we can redo verification multiple times
+    // if not a successful request prevents re-verification
+    if (!verifiedNameEnabled && existingIdVerification && !existingIdVerification.canVerify) {
      const { status } = existingIdVerification;
      setCanVerify(false);
      if (status === 'pending' || status === 'approved') {
@@ -43,7 +46,7 @@ export default function IdVerificationContextProvider({ children }) {
        setError(ERROR_REASONS.CANNOT_VERIFY);
      }
    }
-  }, [existingIdVerification]);
+  }, [existingIdVerification, verifiedNameEnabled]);
  useEffect(() => {
    // Check whether the learner is enrolled in a verified course mode.
    (async () => {
@@ -76,19 +79,6 @@ 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);

@@ -108,6 +98,8 @@ export default function IdVerificationContextProvider({ children }) {
    mediaStream,
    mediaAccess,
    userId: authenticatedUser.userId,
+    // If the learner has an applicable verified name, then this should override authenticatedUser.name
+    // when determining the context value nameOnAccount.
    nameOnAccount: verifiedName || authenticatedUser.name,
    profileDataManager,
    optimizelyExperimentName,
--- a/src/id-verification/IdVerificationPage.jsx
+++ b/src/id-verification/IdVerificationPage.jsx
@@ -11,6 +11,7 @@ import { idVerificationSelector } from './data/selectors';
 import './getUserMediaShim';

 import IdVerificationContextProvider from './IdVerificationContextProvider';
+import { VerifiedNameContextProvider } from './VerifiedNameContext';
 import ReviewRequirementsPanel from './panels/ReviewRequirementsPanel';
 import ChooseModePanel from './panels/ChooseModePanel';
 import RequestCameraAccessPanel from './panels/RequestCameraAccessPanel';
@@ -51,20 +52,22 @@ function IdVerificationPage(props) {
      <div className="page__id-verification container-fluid py-5">
        <div className="row">
          <div className="col-lg-6 col-md-8">
-            <IdVerificationContextProvider>
-              <Switch>
-                <Route path={`${path}/review-requirements`} component={ReviewRequirementsPanel} />
-                <Route path={`${path}/choose-mode`} component={ChooseModePanel} />
-                <Route path={`${path}/request-camera-access`} component={RequestCameraAccessPanel} />
-                <Route path={`${path}/portrait-photo-context`} component={PortraitPhotoContextPanel} />
-                <Route path={`${path}/take-portrait-photo`} component={TakePortraitPhotoPanel} />
-                <Route path={`${path}/id-context`} component={IdContextPanel} />
-                <Route path={`${path}/get-name-id`} component={GetNameIdPanel} />
-                <Route path={`${path}/take-id-photo`} component={TakeIdPhotoPanel} />
-                <Route path={`${path}/summary`} component={SummaryPanel} />
-                <Route path={`${path}/submitted`} component={SubmittedPanel} />
-              </Switch>
-            </IdVerificationContextProvider>
+            <VerifiedNameContextProvider>
+              <IdVerificationContextProvider>
+                <Switch>
+                  <Route path={`${path}/review-requirements`} component={ReviewRequirementsPanel} />
+                  <Route path={`${path}/choose-mode`} component={ChooseModePanel} />
+                  <Route path={`${path}/request-camera-access`} component={RequestCameraAccessPanel} />
+                  <Route path={`${path}/portrait-photo-context`} component={PortraitPhotoContextPanel} />
+                  <Route path={`${path}/take-portrait-photo`} component={TakePortraitPhotoPanel} />
+                  <Route path={`${path}/id-context`} component={IdContextPanel} />
+                  <Route path={`${path}/get-name-id`} component={GetNameIdPanel} />
+                  <Route path={`${path}/take-id-photo`} component={TakeIdPhotoPanel} />
+                  <Route path={`${path}/summary`} component={SummaryPanel} />
+                  <Route path={`${path}/submitted`} component={SubmittedPanel} />
+                </Switch>
+              </IdVerificationContextProvider>
+            </VerifiedNameContextProvider>
          </div>
          <div className="col-lg-6 col-md-4 pt-md-0 pt-4 text-right">
            <Button variant="link" className="px-0" onClick={() => setIsModalOpen(true)}>
--- a/src/id-verification/VerifiedNameContext.jsx
+++ b/src/id-verification/VerifiedNameContext.jsx
@@ -0,0 +1,40 @@
+import React, { createContext, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+
+import { getVerifiedNameHistory } from '../account-settings/data/service';
+import { getMostRecentApprovedOrPendingVerifiedName } from '../utils';
+
+export const VerifiedNameContext = createContext();
+
+export function VerifiedNameContextProvider({ children }) {
+  const [verifiedNameEnabled, setVerifiedNameEnabled] = useState(false);
+  const [verifiedName, setVerifiedName] = useState('');
+  useEffect(() => {
+    // Make API call to retrieve VerifiedName history for the learner.
+    // From this information, derive whether the verified name feature is enabled
+    // and the learner's verified name as it should be displayed during the IDV process.
+    (async () => {
+      const response = await getVerifiedNameHistory();
+      if (response) {
+        const { verified_name_enabled: verifiedNameFeatureEnabled, results } = response;
+        setVerifiedNameEnabled(verifiedNameFeatureEnabled);
+
+        if (verifiedNameFeatureEnabled) {
+          const applicableVerifiedName = getMostRecentApprovedOrPendingVerifiedName(results);
+          setVerifiedName(applicableVerifiedName);
+        }
+      }
+    })();
+  }, []);
+
+  const value = {
+    verifiedNameEnabled,
+    verifiedName,
+  };
+
+  return (<VerifiedNameContext.Provider value={value}>{children}</VerifiedNameContext.Provider>);
+}
+
+VerifiedNameContextProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+};
--- a/src/id-verification/panels/SummaryPanel.jsx
+++ b/src/id-verification/panels/SummaryPanel.jsx
@@ -11,6 +11,7 @@ import { useNextPanelSlug } from '../routing-utilities';
 import BasePanel from './BasePanel';
 import IdVerificationContext from '../IdVerificationContext';
 import ImagePreview from '../ImagePreview';
+import { VerifiedNameContext } from '../VerifiedNameContext';

 import messages from '../IdVerification.messages';
 import CameraHelpWithUpload from '../CameraHelpWithUpload';
@@ -31,6 +32,7 @@ function SummaryPanel(props) {
    portraitPhotoMode,
    idPhotoMode,
  } = useContext(IdVerificationContext);
+  const { verifiedNameEnabled } = useContext(VerifiedNameContext);
  const nameToBeUsed = idPhotoName || nameOnAccount || '';
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [submissionError, setSubmissionError] = useState(null);
@@ -72,6 +74,19 @@ function SummaryPanel(props) {
      };
      if (idPhotoName) {
        verificationData.idPhotoName = idPhotoName;
+      } else if (verifiedNameEnabled) {
+        /**
+         * If learner has not entered an idPhotoName on the GetNameIdPanel,
+         * and the verified name feature is enabled, use the current nameOnAccount
+         * when submitting IDV. The reason we only do this if the feature is enabled
+         * is that, when the feature is off, the server will change the learner's
+         * profile name to this value. If we send the idPhotoName on all requests,
+         * even ones where the learner does not change the idPhotoName, then the
+         * server will record that the full name on the learner's profile has
+         * a requested change, even if the name is the same. This will pollute
+         * the history.
+         */
+        verificationData.idPhotoName = nameOnAccount;
      }
      if (optimizelyExperimentName) {
        verificationData.optimizelyExperimentName = optimizelyExperimentName;
--- a/src/id-verification/tests/IdVerificationContextProvider.test.jsx
+++ b/src/id-verification/tests/IdVerificationContextProvider.test.jsx
@@ -5,14 +5,15 @@ import '@testing-library/jest-dom/extend-expect';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { AppContext } from '@edx/frontend-platform/react';

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

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

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

 jest.mock('../data/service', () => ({
@@ -31,12 +32,15 @@ describe('IdVerificationContextProvider', () => {
  });

  it('renders correctly and calls getExistingIdVerification + getEnrollments', async () => {
-    const context = { authenticatedUser: { userId: 3, roles: [] } };
+    const appContext = { authenticatedUser: { userId: 3, roles: [] } };
+    const verifiedNameContext = { verifiedName: '', verifiedNameEnabled: false };
    await act(async () => render((
-      <AppContext.Provider value={context}>
-        <IntlProvider locale="en">
-          <IdVerificationContextProvider {...defaultProps} />
-        </IntlProvider>
+      <AppContext.Provider value={appContext}>
+        <VerifiedNameContext.Provider value={verifiedNameContext}>
+          <IntlProvider locale="en">
+            <IdVerificationContextProvider {...defaultProps} />
+          </IntlProvider>
+        </VerifiedNameContext.Provider>
      </AppContext.Provider>
    )));
    expect(getExistingIdVerification).toHaveBeenCalled();
@@ -44,35 +48,26 @@ describe('IdVerificationContextProvider', () => {
  });

  it('calls getProfileDataManager if the user has any roles', async () => {
-    const context = {
+    const appContext = {
      authenticatedUser: {
        userId: 3,
        username: 'testname',
        roles: ['enterprise_learner'],
      },
    };
+    const verifiedNameContext = { verifiedName: '', verifiedNameEnabled: false };
    await act(async () => render((
-      <AppContext.Provider value={context}>
-        <IntlProvider locale="en">
-          <IdVerificationContextProvider {...defaultProps} />
-        </IntlProvider>
+      <AppContext.Provider value={appContext}>
+        <VerifiedNameContext.Provider value={verifiedNameContext}>
+          <IntlProvider locale="en">
+            <IdVerificationContextProvider {...defaultProps} />
+          </IntlProvider>
+        </VerifiedNameContext.Provider>
      </AppContext.Provider>
    )));
    expect(getProfileDataManager).toHaveBeenCalledWith(
-      context.authenticatedUser.username,
-      context.authenticatedUser.roles,
+      appContext.authenticatedUser.username,
+      appContext.authenticatedUser.roles,
    );
  });
-
-  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/IdVerificationPage.test.jsx
+++ b/src/id-verification/tests/IdVerificationPage.test.jsx
@@ -11,6 +11,13 @@ import * as selectors from '../data/selectors';

 jest.mock('../data/selectors', () => jest.fn().mockImplementation(() => ({ idVerificationSelector: () => ({}) })));
 jest.mock('../IdVerificationContextProvider', () => jest.fn(({ children }) => children));
+jest.mock('../VerifiedNameContext', () => {
+  const originalModule = jest.requireActual('../VerifiedNameContext');
+  return {
+    ...originalModule,
+    VerifiedNameContextProvider: jest.fn(({ children }) => children),
+  };
+});
 jest.mock('../panels/ReviewRequirementsPanel');
 jest.mock('../panels/RequestCameraAccessPanel');
 jest.mock('../panels/PortraitPhotoContextPanel');
--- a/src/id-verification/tests/VerifiedNameContextProvider.test.jsx
+++ b/src/id-verification/tests/VerifiedNameContextProvider.test.jsx
@@ -0,0 +1,85 @@
+import React, { useContext } from 'react';
+import { render, cleanup, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
+import { getVerifiedNameHistory } from '../../account-settings/data/service';
+import { VerifiedNameContext, VerifiedNameContextProvider } from '../VerifiedNameContext';
+
+const VerifiedNameContextTestComponent = () => {
+  const { verifiedName, verifiedNameEnabled } = useContext(VerifiedNameContext);
+  return (
+    <>
+      {verifiedNameEnabled && (<div data-testid="verified-name">{verifiedName}</div>)}
+      <div data-testid="verified-name-enabled">{verifiedNameEnabled ? 'true' : 'false'}</div>
+    </>
+  );
+};
+
+jest.mock('../../account-settings/data/service', () => ({
+  getVerifiedNameHistory: jest.fn(),
+}));
+
+describe('VerifiedNameContextProvider', () => {
+  const defaultProps = {
+    children: <div />,
+    intl: {},
+  };
+
+  afterEach(() => {
+    cleanup();
+    jest.clearAllMocks();
+  });
+
+  it('calls getVerifiedNameHistory', async () => {
+    jest.mock('../../account-settings/data/service', () => ({
+      getVerifiedNameHistory: jest.fn(),
+    }));
+
+    render(<VerifiedNameContextProvider {...defaultProps} />);
+    expect(getVerifiedNameHistory).toHaveBeenCalledTimes(1);
+  });
+
+  it('sets verifiedName and verifiedNameEnabled correctly when verified name feature enabled', async () => {
+    const mockReturnValue = {
+      verified_name_enabled: true,
+      results: [{
+        verified_name: 'Michael',
+        status: 'approved',
+        created: '2021-08-31T18:33:32.489200Z',
+      }],
+    };
+    getVerifiedNameHistory.mockReturnValueOnce(mockReturnValue);
+
+    const { getByTestId } = render((
+      <VerifiedNameContextProvider {...defaultProps}>
+        <VerifiedNameContextTestComponent />
+      </VerifiedNameContextProvider>
+    ));
+
+    await waitFor(() => expect(getVerifiedNameHistory).toHaveBeenCalledTimes(1));
+    expect(getByTestId('verified-name')).toHaveTextContent('Michael');
+    expect(getByTestId('verified-name-enabled')).toHaveTextContent('true');
+  });
+
+  it('sets verifiedName and verifiedNameEnabled correctly when verified name feature not enabled', async () => {
+    const mockReturnValue = {
+      verified_name_enabled: false,
+      results: [{
+        verified_name: 'Michael',
+        status: 'approved',
+        created: '2021-08-31T18:33:32.489200Z',
+      }],
+    };
+    getVerifiedNameHistory.mockReturnValueOnce(mockReturnValue);
+
+    const { queryByTestId } = render((
+      <VerifiedNameContextProvider {...defaultProps}>
+        <VerifiedNameContextTestComponent />
+      </VerifiedNameContextProvider>
+    ));
+
+    await waitFor(() => expect(getVerifiedNameHistory).toHaveBeenCalledTimes(1));
+    expect(queryByTestId('verified-name')).toBeNull();
+    expect(queryByTestId('verified-name-enabled')).toHaveTextContent('false');
+  });
+});
--- a/src/id-verification/tests/panels/SummaryPanel.test.jsx
+++ b/src/id-verification/tests/panels/SummaryPanel.test.jsx
@@ -10,6 +10,7 @@ import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
 import * as dataService from '../../data/service';
 import IdVerificationContext from '../../IdVerificationContext';
 import SummaryPanel from '../../panels/SummaryPanel';
+import { VerifiedNameContext } from '../../VerifiedNameContext';

 jest.mock('@edx/frontend-platform/analytics', () => ({
  sendTrackEvent: jest.fn(),
@@ -27,7 +28,7 @@ describe('SummaryPanel', () => {
    intl: {},
  };

-  const contextValue = {
+  const appContextValue = {
    facePhotoFile: 'test.jpg',
    idPhotoFile: 'test.jpg',
    nameOnAccount: 'test name',
@@ -39,13 +40,19 @@ describe('SummaryPanel', () => {
    setReachedSummary: jest.fn(),
  };

+  const verifiedNameContextValue = {
+    verifiedNameEnabled: false,
+  };
+
  const getPanel = async () => {
    await act(async () => render((
      <Router history={history}>
        <IntlProvider locale="en">
-          <IdVerificationContext.Provider value={contextValue}>
-            <IntlSummaryPanel {...defaultProps} />
-          </IdVerificationContext.Provider>
+          <VerifiedNameContext.Provider value={verifiedNameContextValue}>
+            <IdVerificationContext.Provider value={appContextValue}>
+              <IntlSummaryPanel {...defaultProps} />
+            </IdVerificationContext.Provider>
+          </VerifiedNameContext.Provider>
        </IntlProvider>
      </Router>
    )));
@@ -72,17 +79,17 @@ describe('SummaryPanel', () => {
  });

  it('allows user to upload ID photo', async () => {
-    contextValue.optimizelyExperimentName = '';
+    appContextValue.optimizelyExperimentName = '';
    await getPanel();
    const collapsible = await screen.getAllByRole('button', { 'aria-expanded': false })[0];
    fireEvent.click(collapsible);
    const uploadButton = await screen.getByTestId('fileUpload');
    expect(uploadButton).toBeVisible();
-    contextValue.optimizelyExperimentName = 'test-experiment';
+    appContextValue.optimizelyExperimentName = 'test-experiment';
  });

  it('displays warning if account is managed by a third party', async () => {
-    contextValue.profileDataManager = 'test-org';
+    appContextValue.profileDataManager = 'test-org';
    await getPanel();
    const warning = await screen.getAllByText('test-org');
    expect(warning.length).toEqual(1);
@@ -90,29 +97,29 @@ describe('SummaryPanel', () => {

  it('submits', async () => {
    const verificationData = {
-      facePhotoFile: contextValue.facePhotoFile,
-      idPhotoFile: contextValue.idPhotoFile,
-      idPhotoName: contextValue.idPhotoName,
-      optimizelyExperimentName: contextValue.optimizelyExperimentName,
-      portraitPhotoMode: contextValue.portraitPhotoMode,
-      idPhotoMode: contextValue.idPhotoMode,
+      facePhotoFile: appContextValue.facePhotoFile,
+      idPhotoFile: appContextValue.idPhotoFile,
+      idPhotoName: appContextValue.idPhotoName,
+      optimizelyExperimentName: appContextValue.optimizelyExperimentName,
+      portraitPhotoMode: appContextValue.portraitPhotoMode,
+      idPhotoMode: appContextValue.idPhotoMode,
      courseRunKey: null,
    };
    await getPanel();
    const button = await screen.findByTestId('submit-button');
    fireEvent.click(button);
    expect(dataService.submitIdVerification).toHaveBeenCalledWith(verificationData);
-    await waitFor(() => expect(contextValue.stopUserMedia).toHaveBeenCalled());
+    await waitFor(() => expect(appContextValue.stopUserMedia).toHaveBeenCalled());
  });

  it('does not submit a name if name is blank', async () => {
-    contextValue.idPhotoName = '';
+    appContextValue.idPhotoName = '';
    const verificationData = {
-      facePhotoFile: contextValue.facePhotoFile,
-      idPhotoFile: contextValue.idPhotoFile,
-      portraitPhotoMode: contextValue.portraitPhotoMode,
-      idPhotoMode: contextValue.idPhotoMode,
-      optimizelyExperimentName: contextValue.optimizelyExperimentName,
+      facePhotoFile: appContextValue.facePhotoFile,
+      idPhotoFile: appContextValue.idPhotoFile,
+      portraitPhotoMode: appContextValue.portraitPhotoMode,
+      idPhotoMode: appContextValue.idPhotoMode,
+      optimizelyExperimentName: appContextValue.optimizelyExperimentName,
      courseRunKey: null,
    };
    await getPanel();
@@ -122,13 +129,13 @@ describe('SummaryPanel', () => {
  });

  it('does not submit a name if name is unchanged', async () => {
-    contextValue.idPhotoName = null;
+    appContextValue.idPhotoName = null;
    const verificationData = {
-      facePhotoFile: contextValue.facePhotoFile,
-      idPhotoFile: contextValue.idPhotoFile,
-      portraitPhotoMode: contextValue.portraitPhotoMode,
-      idPhotoMode: contextValue.idPhotoMode,
-      optimizelyExperimentName: contextValue.optimizelyExperimentName,
+      facePhotoFile: appContextValue.facePhotoFile,
+      idPhotoFile: appContextValue.idPhotoFile,
+      portraitPhotoMode: appContextValue.portraitPhotoMode,
+      idPhotoMode: appContextValue.idPhotoMode,
+      optimizelyExperimentName: appContextValue.optimizelyExperimentName,
      courseRunKey: null,
    };
    await getPanel();
@@ -137,6 +144,24 @@ describe('SummaryPanel', () => {
    expect(dataService.submitIdVerification).toHaveBeenCalledWith(verificationData);
  });

+  it('submits a name if a name is unchanged if verified name feature is enabled', async () => {
+    appContextValue.idPhotoName = null;
+    verifiedNameContextValue.verifiedNameEnabled = true;
+    const verificationData = {
+      facePhotoFile: appContextValue.facePhotoFile,
+      idPhotoFile: appContextValue.idPhotoFile,
+      portraitPhotoMode: appContextValue.portraitPhotoMode,
+      idPhotoMode: appContextValue.idPhotoMode,
+      optimizelyExperimentName: appContextValue.optimizelyExperimentName,
+      courseRunKey: null,
+      idPhotoName: appContextValue.nameOnAccount,
+    };
+    await getPanel();
+    const button = await screen.findByTestId('submit-button');
+    fireEvent.click(button);
+    expect(dataService.submitIdVerification).toHaveBeenCalledWith(verificationData);
+  });
+
  it('shows error when cannot submit', async () => {
    dataService.submitIdVerification = jest.fn().mockReturnValue({ success: false });
    await getPanel();
@@ -207,6 +232,6 @@ describe('SummaryPanel', () => {
    await getPanel();
    const collapsible = await screen.queryByTestId('collapsible');
    expect(collapsible).not.toBeInTheDocument();
-    contextValue.optimizelyExperimentName = 'test-experiment';
+    appContextValue.optimizelyExperimentName = 'test-experiment';
  });
 });
--- a/src/id-verification/tests/panels/TakeIdPhotoPanel.test.jsx
+++ b/src/id-verification/tests/panels/TakeIdPhotoPanel.test.jsx
@@ -98,10 +98,10 @@ describe('TakeIdPhotoPanel', () => {
    )));

    // check that upload title and text are correct
-    const title = await screen.findByText('Upload a Photo of Your ID');
+    const title = await screen.findByText('Upload a Photo of Your Identification Card');
    expect(title).toBeVisible();

    const text = await screen.findByTestId('upload-text');
-    expect(text.textContent).toContain('Please upload an ID photo');
+    expect(text.textContent).toContain('Please upload a photo of your identification card');
  });
 });
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -1,4 +1,6 @@
-import 'babel-polyfill';
+import 'core-js/stable';
+import 'regenerator-runtime/runtime';
+
 import 'formdata-polyfill';
 import { AppProvider, ErrorPage } from '@edx/frontend-platform/react';
 import {
@@ -18,7 +20,6 @@ import CoachingConsent from './account-settings/coaching/CoachingConsent';
 import appMessages from './i18n';

 import './index.scss';
-import './assets/favicon.ico';

 subscribe(APP_READY, () => {
  ReactDOM.render(
--- a/src/setupTest.js
+++ b/src/setupTest.js
@@ -1,4 +1,5 @@
-/* eslint-disable import/no-extraneous-dependencies */
+import 'core-js/stable';
+import 'regenerator-runtime/runtime';

 import Enzyme from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
--- a/src/tests/utils.test.js
+++ b/src/tests/utils.test.js
@@ -0,0 +1,83 @@
+import { compareVerifiedNamesByCreatedDate, getMostRecentApprovedOrPendingVerifiedName } from '../utils';
+
+describe('getMostRecentApprovedOrPendingVerifiedName', () => {
+  it('returns correct verified name if one exists', () => {
+    const verifiedNames = [
+      {
+        created: '2021-08-31T18:33:32.489200Z',
+        verified_name: 'Mike',
+        status: 'denied',
+      },
+      {
+        created: '2021-09-03T18:33:32.489200Z',
+        verified_name: 'Michelangelo',
+        status: 'approved',
+      },
+    ];
+
+    expect(getMostRecentApprovedOrPendingVerifiedName(verifiedNames)).toEqual(verifiedNames[1].verified_name);
+  });
+  it('returns no verified name if one does not exist', () => {
+    const verifiedNames = [
+      {
+        created: '2021-08-31T18:33:32.489200Z',
+        verified_name: 'Mike',
+        status: 'denied',
+      },
+      {
+        created: '2021-09-03T18:33:32.489200Z',
+        verified_name: 'Michelangelo',
+        status: 'submitted',
+      },
+    ];
+
+    expect(getMostRecentApprovedOrPendingVerifiedName(verifiedNames)).toBeNull();
+  });
+});
+
+describe('compareVerifiedNamesByCreatedDate', () => {
+  it('returns 0 when equal', () => {
+    const a = {
+      created: '2021-08-31T18:33:32.489200Z',
+      verified_name: 'Mike',
+      status: 'denied',
+    };
+    const b = {
+      created: '2021-08-31T18:33:32.489200Z',
+      verified_name: 'Michael',
+      status: 'denied',
+    };
+
+    expect(compareVerifiedNamesByCreatedDate(a, b)).toEqual(0);
+  });
+
+  it('returns negative number when first argument is greater than second argument', () => {
+    const a = {
+      created: '2021-09-30T18:33:32.489200Z',
+      verified_name: 'Mike',
+      status: 'denied',
+    };
+    const b = {
+      created: '2021-08-31T18:33:32.489200Z',
+      verified_name: 'Michael',
+      status: 'denied',
+    };
+
+    expect(compareVerifiedNamesByCreatedDate(a, b)).toBeLessThan(0);
+  });
+
+  it('returns positive number when first argument is less than second argument', () => {
+    const a = {
+      created: '2021-08-31T18:33:32.489200Z',
+      verified_name: 'Mike',
+      status: 'denied',
+    };
+    const b = {
+      created: '2021-09-30T18:33:32.489200Z',
+      verified_name: 'Michael',
+      status: 'denied',
+    };
+
+    expect(compareVerifiedNamesByCreatedDate(a, b)).toBeGreaterThan(0);
+  });
+});
--- a/src/utils.js
+++ b/src/utils.js
@@ -0,0 +1,40 @@
+/**
+ * Compare two dates.
+ * @param {*} a the first date
+ * @param {*} b the second date
+ * @returns a negative integer if a > b, a positive integer if a < b, or 0 if a = b
+ */
+export function compareVerifiedNamesByCreatedDate(a, b) {
+  const aTimeSinceEpoch = new Date(a.created).getTime();
+  const bTimeSinceEpoch = new Date(b.created).getTime();
+  return bTimeSinceEpoch - aTimeSinceEpoch;
+}
+
+/**
+ *
+ * @param {*} verifiedNames a list of verified name objects, where each object has at least the
+ *                          following keys: created, status, and verified_name.
+ * @returns the most recent verified name object from the list parameter with the 'pending' or
+ *          'accepted' status, if one exists; otherwise, null
+ */
+export function getMostRecentApprovedOrPendingVerifiedName(verifiedNames) {
+  // clone array so as not to modify original array
+  const names = [...verifiedNames];
+
+  if (Array.isArray(names)) {
+    names.sort(compareVerifiedNamesByCreatedDate);
+  }
+
+  // We only want to consider a subset of verified names when determining the value of nameOnAccount.
+  // approved: consider this status, as the name has been verified by IDV and should supersede the full name
+  //           (profile name).
+  // pending: consider this status, as the learner has started the name change process through the
+  //          Account Settings page, and has been navigated to IDV to complete the name change process.
+  // submitted: do not consider this status, as the name has already been submitted for verification through
+  //            IDV but has not yet been verified
+  // denied: do not consider this status because the name was already denied via the IDV process
+  const applicableNames = names.filter(name => ['approved', 'pending'].includes(name.status));
+  const applicableName = applicableNames.length > 0 ? applicableNames[0].verified_name : null;
+
+  return applicableName;
+}
Author	SHA1	Message	Date
Zach Hancock	0e272f39ee	feat: add warning helptext to name fields after verification failure	2021-09-29 17:06:46 -04:00
alangsto	afa808ff5d	Merge pull request #516 from edx/alangsto/update_dismissable_alert fix: approved alert should appear for subsequent approved attempts	2021-09-29 14:36:02 -04:00
Alie Langston	5279f2a9c9	fix: approved alert should appear for subsequent approved attempts	2021-09-29 14:00:30 -04:00
Michael Roytman	4cc00fd7e3	Merge pull request #514 from edx/mroytman/MST-1073-pending-verified-name-display fix: Display Last Approved Verified Name When Most Recent Verified Name is Pending	2021-09-29 13:03:08 -04:00
alangsto	8815626411	Merge pull request #515 from edx/alangsto/fix_certificate_checkbox fix: Checkbox incorrectly tied to profile name	2021-09-29 12:57:51 -04:00
Alie Langston	db319b6cdf	fix: Checkbox incorrectly tied to profile name Fixed a bug that incorrectly rendered the certificate preference checkbox upon each page render. The bug caused the 1) the checkboxes to both be selected at the same time, 2) the checkbox to always be selected for the profile name, and 3) wouldn't allow the proper UI changes upon saving a verified name. The checkbox selection works correctly now, and the save button for the verified name field also works as expected.	2021-09-29 09:53:05 -04:00
michaelroytman	50edcb1c50	fix: Display Last Approved Verified Name When Most Recent Verified Name is Pending When a learner's most recent Verified Name is in the pending state, we should display their most recent approved Verified Name. If such a Verified Name does not exist, do not display any Verified Name. In either case, do not disable or gray out either the Full name or Verified name fields. This change is being made because we do not want to prevent a learner from editing the Verified name field if their most recent entry is pending. An entry remains in the pending state when a learner has created a Verified name by changing their name on the Account Settings page but has not followed through with submitting their IDV.	2021-09-28 13:07:46 -04:00
David Joy	d6519bc825	fix: update deps and modernize, fix favicon (#513 )	2021-09-27 19:50:16 -04:00
Bianca Severino	b54aeb9446	Merge pull request #512 from edx/bseverino/idv-language [MST-797] Update IDV instructions	2021-09-27 17:01:11 -04:00
Zachary Hancock	bb1bd6e648	fix: null check mostRecentVerifiedName	2021-09-27 14:33:46 -04:00
Bianca Severino	7df9f92dd8	fix: update IDV instructions Update IDV instructions to be more explicit about the need for a photo identification card, and provide a few more examples.	2021-09-27 14:23:36 -04:00
Zach Hancock	3627915985	fix: null check mostRecentVerifiedName	2021-09-27 14:19:51 -04:00
Zachary Hancock	9fe1a04a0a	feat: enter name change flow when submitting a new verified name	2021-09-27 11:33:30 -04:00
Zach Hancock	7455821500	fix: missing null check	2021-09-27 10:12:15 -04:00
Renovate Bot	817980be00	fix(deps): update dependency formdata-polyfill to v4.0.8	2021-09-27 08:56:10 +00:00
Michael Roytman	7d4e31f69d	Merge pull request #508 from edx/mroytman/MST-1059-verified-name-not-sent-in-IDV feat: send nameOnAccount as full_name with all IDV submissions when learner has no name change and verified name feature is enabled	2021-09-24 16:16:08 -04:00
Zach Hancock	34dde09ccc	style: lint	2021-09-24 14:37:56 -04:00
Zach Hancock	aee4e44f8c	feat: submit new verified name	2021-09-24 14:20:00 -04:00
michaelroytman	7381cfd3b6	feat: send nameOnAccount as full_name with all IDV submissions when learner has no name change and verified name feature is enabled MST-1059: https://openedx.atlassian.net/browse/MST-1059 This code change changes how the full_name field is included in the form data sent during IDV submission. Before, full_name was only included in the form data when the learner entered a different name in the GetNameIdPanel than what was displayed to them as the default (i.e. their full name on their profile). If a full_name was provided in the request, the server would use the supplied full_name when creating the IDV record and would update the learner's full name on their profile accordingly. If a full_name was not provided in the request, then the server would fall back to the current full name on their profile when creating the IDV record and no change to the full name on their profile would occur. With the introduction of the Verified Name feature, things have changed. Assuming the feature is enabled, the name displayed to the learner is either the most recent pending or approved verified name or their full name on their profile if the former does not exist. This means that it is no longer correct for the server to create an IDV record using the current full name on the learner's profile when full_name is not provided, which, again, occurs if the learner does not change the name submitted with IDV. This is because, if the learner has a pending or approved verified name, that should be prioritzed over the full name on their profile. This code change sends the full_name field whether or not the learner has modified it in the IDV flow, if the verified name feature is enabled. This allows the server to create a verified name with whatever value is submitted to it through IDV. The reason we only do this if the feature is enabled is that, when the feature is off, the server will change the learner's profile name to this value, as described above. If we send the idPhotoName on all requests, even ones where the learner does not change the idPhotoName, then the server will record that the full name on the learner's profile has a requested change, even if the name is the same. Their name may not change, but this will pollute the history by being logged as a requested change.	2021-09-24 12:22:19 -04:00
Michael Roytman	1d0bd3986c	Merge pull request #505 from edx/mroytman/MST-1016-verified-name-in-account-name-check feat: include pending or approved verified names in the name field if they exist	2021-09-24 12:03:07 -04:00
michaelroytman	1c0dc36907	feat: include pending or approved verified names in the name field if they exist MST-1016: https://openedx.atlassian.net/browse/MST-1016 If a learner has a pending or approved verified name, the most recent should take precedence over the profile name on the GetNameIdPanel during the "Account Name Check". If the learner has no pending or approved verified names, then the learner's profile name should be used instead.	2021-09-23 11:44:51 -04:00
Bianca Severino	ac0ab9daea	Merge pull request #504 from edx/bseverino/pending-name [MST-1057] Display pending name when in "submitted" state	2021-09-21 11:43:08 -04:00
Bianca Severino	0d45d17cd3	fix: display pending name when in submitted state	2021-09-21 10:18:49 -04:00
Renovate Bot	a6d265b885	chore(deps): update dependency @testing-library/react to v12.1.0	2021-09-20 08:18:04 +00:00
Renovate Bot	3508bc6c34	fix(deps): update dependency @edx/frontend-platform to v1.12.7	2021-09-20 08:00:12 +00:00
edX Transifex Bot	28de621fc7	chore(i18n): update translations	2021-09-20 02:04:23 +05:00
Bianca Severino	e6df5e77ae	Merge pull request #486 from edx/bseverino/change-name [MST-803] Add name change modal	2021-09-16 10:09:47 -04:00
Bianca Severino	8bc5c1fae8	feat: add name change modal	2021-09-15 14:15:43 -04:00
Bianca Severino	6e48c9d2d1	Merge pull request #497 from edx/bseverino/certificate-name feat: add certificate preference to name fields	2021-09-15 13:37:23 -04:00
Andrew Shultz	d3469d648f	Merge pull request #500 from edx/ashultz0/idv_redo_ok feat: if verified name is on, we can redo ID verification	2021-09-15 11:03:56 -04:00
Bianca Severino	cc65ffc96f	feat: add certificate preference to name fields Adds a checkbox under "Name" and "Verified Name" fields, signifying which name the user prefers to display on their certificates. When checking the checkbox, the user can save this choice along with their name. When unchecking the check- box, a modal appears, prompting the user to choose a name to display on their certificate.	2021-09-15 11:01:20 -04:00
Andy Shultz	5640fb95c2	fix: use correct initial state type	2021-09-15 09:36:09 -04:00
Andy Shultz	7bbb889258	feat: if verified name is on, we can redo ID verification The verified_name endpoint provides is_enabled only it a name exists, so we have to request the enabled flag separately. MST-1026	2021-09-13 13:17:14 -04:00