Merge pull request #1145 from eduNEXT/MJG/backport-1139

fix: send json accept headers for POST requests
Merge pull request #1139 from eduNEXT/bav/fix-incorrect-post-accept
2024-10-23 14:09:37 +03:00 · 2024-10-23 12:57:41 +02:00 · 2024-06-06 15:04:59 -03:00
144 changed files with 12064 additions and 17939 deletions
--- a/.env
+++ b/.env
@@ -1,10 +1,11 @@
 ACCESS_TOKEN_COOKIE_NAME=''
-ACCOUNT_PROFILE_URL=''
 BASE_URL=''
 CREDENTIALS_BASE_URL=''
 CSRF_TOKEN_API_PATH=''
+DEMOGRAPHICS_BASE_URL=''
 DISCOVERY_API_BASE_URL=''
 ECOMMERCE_BASE_URL=''
+ENABLE_DEMOGRAPHICS_COLLECTION=''
 FAVICON_URL=''
 LANGUAGE_PREFERENCE_COOKIE_NAME=''
 LMS_BASE_URL=''
@@ -12,11 +13,9 @@ LOGIN_URL=''
 LOGO_TRADEMARK_URL=''
 LOGO_URL=''
 LOGO_WHITE_URL=''
-SHOW_PUSH_CHANNEL=''
-SHOW_EMAIL_CHANNEL=''
 LOGOUT_URL=''
 MARKETING_SITE_BASE_URL=''
-NODE_ENV='production'
+NODE_ENV=''
 ORDER_HISTORY_URL=''
 PUBLISHER_BASE_URL=''
 REFRESH_ACCESS_TOKEN_ENDPOINT=''
@@ -33,7 +32,4 @@ APP_ID=
 MFE_CONFIG_API_URL=
 PASSWORD_RESET_SUPPORT_LINK=''
 LEARNER_FEEDBACK_URL=''
-SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT='https://help.edx.org/edxlearner/s/article/How-do-I-link-or-unlink-my-edX-account-to-a-social-media-account'
-COUNTRIES_WITH_DELETE_ACCOUNT_DISABLED='[]'
-# Fallback in local style files
-PARAGON_THEME_URLS={}
+SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT='https://support.edx.org/hc/en-us/articles/207206067'
--- a/.env.development
+++ b/.env.development
@@ -1,10 +1,11 @@
 ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'
-ACCOUNT_PROFILE_URL='http://localhost:1995'
 BASE_URL='localhost:1997'
 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'
@@ -28,13 +29,8 @@ ENABLE_COPPA_COMPLIANCE=''
 ENABLE_ACCOUNT_DELETION=''
 ENABLE_DOB_UPDATE=''
 MARKETING_EMAILS_OPT_IN=''
-SHOW_PUSH_CHANNEL='true'
-SHOW_EMAIL_CHANNEL='true'
 APP_ID=
 MFE_CONFIG_API_URL=
 PASSWORD_RESET_SUPPORT_LINK='mailto:support@example.com'
 LEARNER_FEEDBACK_URL=''
-SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT='https://help.edx.org/edxlearner/s/article/How-do-I-link-or-unlink-my-edX-account-to-a-social-media-account'
-COUNTRIES_WITH_DELETE_ACCOUNT_DISABLED='[]'
-# Fallback in local style files
-PARAGON_THEME_URLS={}
+SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT='https://support.edx.org/hc/en-us/articles/207206067'
--- a/.env.test
+++ b/.env.test
@@ -2,8 +2,10 @@ ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'
 BASE_URL='localhost:1997'
 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'
@@ -24,13 +26,9 @@ SUPPORT_URL='http://localhost:18000/support'
 USER_INFO_COOKIE_NAME='edx-user-info'
 ENABLE_COPPA_COMPLIANCE=''
 ENABLE_ACCOUNT_DELETION=''
-SHOW_PUSH_CHANNEL=''
-SHOW_EMAIL_CHANNEL=''
 ENABLE_DOB_UPDATE=''
 MARKETING_EMAILS_OPT_IN=''
 APP_ID=
 MFE_CONFIG_API_URL=
 LEARNER_FEEDBACK_URL=''
-SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT='https://help.edx.org/edxlearner/s/article/How-do-I-link-or-unlink-my-edX-account-to-a-social-media-account'
-COUNTRIES_WITH_DELETE_ACCOUNT_DISABLED='[]'
-PARAGON_THEME_URLS={}
+SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT='https://support.edx.org/hc/en-us/articles/207206067'
--- a/.eslintignore
+++ b/.eslintignore
@@ -3,4 +3,3 @@ dist/
 node_modules/
 __mocks__/
 __snapshots__/
-src/i18n/messages/
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -1,24 +0,0 @@
-### Description
-
-Include a description of your changes here, along with a link to any relevant Jira tickets and/or GitHub issues.
-
-#### How Has This Been Tested?
-
-Please describe in detail how you tested your changes.
-
-#### Screenshots/sandbox (optional):
-Include a link to the sandbox for design changes or screenshot for before and after. **Remove this section if it's not applicable.**
-
-|Before|After|
-|-------|-----|
-|      |      |
-
-#### Merge Checklist
-
-* [ ] If your update includes visual changes, have they been reviewed by a designer? Send them a link to the Sandbox, if applicable.
-* [ ] Is there adequate test coverage for your changes?
-
-#### Post-merge Checklist
-
-* [ ] Deploy the changes to prod after verifying on stage or ask **@openedx/edx-infinity** to do it. 
-* [ ] 🎉 🙌 Celebrate! Thanks for your contribution.
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -15,15 +15,15 @@ jobs:
        - test
    steps:
    - uses: actions/checkout@v4
-    - uses: actions/setup-node@v4
+    - name: Setup Nodejs Env
+      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
+    - uses: actions/setup-node@v2
      with:
-        node-version-file: '.nvmrc'
+        node-version: ${{ env.NODE_VER }}
    - run: make requirements
    - run: make test NPM_TESTS=build
    - run: make test NPM_TESTS=${{ matrix.npm-test }}
-    - name: Coverage
-      if: matrix.npm-test == 'test'
-      uses: codecov/codecov-action@v4
+    - name: upload coverage
+      uses: codecov/codecov-action@v3
      with:
-        token: ${{ secrets.CODECOV_TOKEN }}
-        fail_ci_if_error: true
+        fail_ci_if_error: false
--- a/.github/workflows/lockfileversion-check.yml
+++ b/.github/workflows/lockfileversion-check.yml
@@ -10,4 +10,5 @@ on:

 jobs:
  version-check:
-    uses: openedx/.github/.github/workflows/lockfileversion-check-v3.yml@master
+    uses: openedx/.github/.github/workflows/lockfile-check.yml@master
+    
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-24
+18
--- a/7
+++ b/7
@@ -1,3 +1,5 @@
+
+
 intl_imports = ./node_modules/.bin/intl-imports.js
 transifex_utils = ./node_modules/.bin/transifex-utils.js
 i18n = ./src/i18n
@@ -17,11 +19,6 @@ test.npm.%: validate-no-uncommitted-package-lock-changes
 	npm run $(*)

 .PHONY: requirements
-
-precommit:
-	npm run lint
-	npm audit
-
 requirements:  ## install ci requirements
 	npm ci

--- a/README.rst
+++ b/README.rst
@@ -16,6 +16,9 @@ What is the domain of this MFE?
 In this MFE: Private user settings UIs. Public facing profile is in a `separate MFE (Profile) <https://github.com/openedx/frontend-app-profile>`_

 - Account settings page
+
+- Demographics collection
+
 - IDV (Identity Verification)

 ***************
@@ -25,13 +28,40 @@ Getting Started
 Prerequisites
 =============

-`Tutor`_ is currently recommended as a development environment for your
-new MFE. Please refer
+The `devstack`_ is currently recommended as a development environment for your
+new MFE.  If you start it with ``make dev.up.lms`` that should give you
+everything you need as a companion to this frontend.
+
+Note that it is also possible to use `Tutor`_ to develop an MFE.  You can refer
 to the `relevant tutor-mfe documentation`_ to get started using it.

+.. _Devstack: https://github.com/openedx/devstack
+
 .. _Tutor: https://github.com/overhangio/tutor

-.. _relevant tutor-mfe documentation: https://github.com/overhangio/tutor-mfe?tab=readme-ov-file#mfe-development
+.. _relevant tutor-mfe documentation: https://github.com/overhangio/tutor-mfe#mfe-development
+
+Installation
+============
+
+This MFE is bundled with `Devstack <https://github.com/openedx/devstack>`_, see the `Getting Started <https://github.com/openedx/devstack#getting-started>`_ section for setup instructions.
+
+1. Install Devstack using the `Getting Started <https://github.com/openedx/devstack#getting-started>`_ instructions.
+
+2. Start up Devstack, if it's not already started.
+
+3. Log in to Devstack (http://localhost:18000/login )
+
+4. Within this project, install requirements and start the development server:
+
+   .. code-block::
+
+      npm install
+      npm start # The server will run on port 1997
+
+5. Once the dev server is up, visit http://localhost:1997 to access the MFE
+
+   .. image:: ./docs/images/localhost_preview.png

 Plugins
 =======
@@ -42,7 +72,7 @@ The parts of this MFE that can be customized in that manner are documented `here
 Environment Variables/Setup Notes
 =================================

-This MFE is configured via the ``frontend-platform`` configuration module. For more information on MFE configuration see the `Configuration documentation`_.
+This MFE is configured via environment variables supplied at build time.  All micro-frontends have a shared set of required environment variables, as documented in the Open edX Developer Guide under `Required Environment Variables <https://edx.readthedocs.io/projects/edx-developer-docs/en/latest/developers_guide/micro_frontends_in_open_edx.html#required-environment-variables>`__.

 The account settings micro-frontend also supports the following additional variable:

@@ -69,15 +99,31 @@ Example: ``'false'`` | ``''`` (empty strings are true)
 Enable the account deletion option, defaults to true.
 To disable account deletion set ``ENABLE_ACCOUNT_DELETION`` to ``'false'`` (string), otherwise it will default to true.

+edX-specific Environment Variables
+==================================
+
+Furthermore, there are several edX-specific environment variables that enable integrations with closed-source services private to the edX organization, and are unsupported in Open edX.  Enabling these environment variables will result in undefined behavior in Open edX installations:
+
+``ENABLE_DEMOGRAPHICS_COLLECTION``
+
+Example: ``true`` | ``''`` (empty strings are falsy)
+
+Enables support for a section of the account settings page where a user can enter demographics information.  Integrates with a private demographics service and is only used by edx.org.
+
+``DEMOGRAPHICS_BASE_URL``
+
+Example: ``https://demographics.example.com``
+
+Required only if ``ENABLE_DEMOGRAPHICS_COLLECTION`` is true.  The fully-qualified URL to the private demographics service in the target environment.
+
 Example build syntax with a single environment variable:

 .. code:: bash

   NODE_ENV=development ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload' npm run build

-For more information see the document: `Configuration documentation`_
-
-.. _Configuration documentation: https://openedx.github.io/frontend-platform/module-Config.html
+For more information see the document: `Micro-frontend applications in Open
+edX <https://edx.readthedocs.io/projects/edx-developer-docs/en/latest/developers_guide/micro_frontends_in_open_edx.html#required-environment-variables>`__.

 Cloning and Startup
 ===================
@@ -104,40 +150,6 @@ Cloning and Startup

    ``npm start``

-    Or for local development with custom configuration:
-
-    ``npm run dev``
-
-    This runs the dev server with PUBLIC_PATH=/account/, MFE_CONFIG_API_URL pointing to localhost:8000, and hosts on apps.local.openedx.io.
-
-Local module development
-=========================
-
-To develop locally on modules that are installed into this app, you'll need to create a ``module.config.js``
-file (which is git-ignored) that defines where to find your local modules, for instance:
-
-.. code-block:: js
-
-   module.exports = {
-     /*
-     Modules you want to use from local source code.  Adding a module here means that when this app
-     runs its build, it'll resolve the source from peer directories of this app.
-
-     moduleName: the name you use to import code from the module.
-     dir: The relative path to the module's source code.
-     dist: The sub-directory of the source code where it puts its build artifact.  Often "dist", though you
-       may want to use "src" if the module installs React as a peer/dev dependency.
-     */
-     localModules: [
-        { moduleName: '@openedx/paragon/scss', dir: '../paragon', dist: 'scss' },
-        { moduleName: '@openedx/paragon', dir: '../paragon', dist: 'dist' },
-        { moduleName: '@openedx/frontend-enterprise', dir: '../frontend-enterprise', dist: 'src' },
-        { moduleName: '@openedx/frontend-platform', dir: '../frontend-platform', dist: 'dist' },
-     ],
-   };
-
-See https://github.com/openedx/frontend-build#local-module-configuration-for-webpack for more details.
-
 Known Issues
 ===========

@@ -148,6 +160,7 @@ Development Roadmap

 We don't have anything planned for the core of the MFE (the account settings page) - this MFE is currently in maintenance mode.
 There may be a replacement for IDV coming down the pipe, so that may be DEPRed.
+In the future, it's possible that demographics could be modeled as a plugin rather than being hard-coded into this MFE.

 License
 =======
@@ -203,10 +216,6 @@ All community members are expected to follow the `Open edX Code of Conduct`_.

 .. _Open edX Code of Conduct: https://openedx.org/code-of-conduct/

-People
-======
-The assigned maintainers for this component and other project details may be found in Backstage or from inspecting catalog-info.yaml.
-
 Reporting Security Issues
 =========================

@@ -218,7 +227,7 @@ Please do not report security issues in public. Please email security@openedx.or
   :target: https://github.com/openedx/edx-developer-docs/actions/workflows/ci.yml
   :alt: Continuous Integration
 .. |Codecov| image:: https://img.shields.io/codecov/c/github/edx/frontend-app-account
-   :target: https://codecov.io/gh/openedx/frontend-app-account/
+   :target: https://codecov.io/gh/edx/frontend-app-account
 .. |npm_version| image:: https://img.shields.io/npm/v/@edx/frontend-app-account.svg
   :target: @edx/frontend-app-account
 .. |npm_downloads| image:: https://img.shields.io/npm/dt/@edx/frontend-app-account.svg
--- a/catalog-info.yaml
+++ b/catalog-info.yaml
@@ -1,19 +0,0 @@
-# This file records information about this repo. Its use is described in OEP-55:
-# https://open-edx-proposals.readthedocs.io/en/latest/processes/oep-0055-proc-project-maintainers.html
-
-apiVersion: backstage.io/v1alpha1
-kind: Component
-metadata:
-  name: 'frontend-app-account'
-  description: "Open edX micro-frontend application for managing user account information."
-  links:
-    - url: "https://github.com/openedx/frontend-app-account"
-      title: "Frontend app account"
-      icon: "Web"
-  annotations:
-    openedx.org/arch-interest-groups: ""
-    openedx.org/release: "master"
-spec:
-  owner: group:2u-infinity
-  type: 'website'
-  lifecycle: 'production'
--- a/codecov.yml
+++ b/codecov.yml
@@ -1,15 +0,0 @@
-coverage:
-  status:
-    project:
-      default:
-        enabled: yes
-        target: auto
-        threshold: 0%
-    patch:
-      default:
-        enabled: yes
-        target: auto
-        threshold: 0%
-ignore:
-  - "src/i18n"
-  - "src/index.jsx"
--- a/openedx.yaml
+++ b/openedx.yaml
@@ -0,0 +1,6 @@
+# This file describes this Open edX repo, as described in OEP-2:
+# https://open-edx-proposals.readthedocs.io/en/latest/oep-0002-bp-repo-metadata.html#specification
+
+nick: acct
+oeps: {}
+openedx-release: {ref: master}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -10,10 +10,8 @@
  },
  "scripts": {
    "build": "fedx-scripts webpack",
-    "dev": "PUBLIC_PATH=/account/ MFE_CONFIG_API_URL='http://localhost:8000/api/mfe_config/v1' fedx-scripts webpack-dev-server --progress --host apps.local.openedx.io",
    "i18n_extract": "fedx-scripts formatjs extract",
    "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
-    "lint:fix": "npm run lint -- --fix",
    "snapshot": "fedx-scripts jest --updateSnapshot",
    "start": "fedx-scripts webpack-dev-server --progress",
    "test": "TZ=UTC fedx-scripts jest --coverage --passWithNoTests"
@@ -30,25 +28,25 @@
  ],
  "dependencies": {
    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-component-footer": "^14.6.0",
-    "@edx/frontend-component-header": "^6.2.0",
-    "@edx/frontend-platform": "^8.4.0",
-    "@edx/openedx-atlas": "^0.7.0",
-    "@fortawesome/fontawesome-svg-core": "^6.6.0",
-    "@fortawesome/free-brands-svg-icons": "^6.6.0",
-    "@fortawesome/free-regular-svg-icons": "^6.6.0",
-    "@fortawesome/free-solid-svg-icons": "^6.6.0",
-    "@fortawesome/react-fontawesome": "0.2.6",
-    "@openedx/frontend-plugin-framework": "^1.7.0",
-    "@openedx/paragon": "^23.4.5",
-    "@tensorflow-models/blazeface": "0.1.0",
-    "@tensorflow/tfjs-converter": "4.22.0",
-    "@tensorflow/tfjs-core": "4.22.0",
-    "bowser": "2.12.1",
+    "@edx/frontend-component-footer": "^13.2.0",
+    "@edx/frontend-component-header": "5.3.0",
+    "@edx/frontend-platform": "8.0.1",
+    "@edx/openedx-atlas": "^0.6.0",
+    "@fortawesome/fontawesome-svg-core": "1.2.36",
+    "@fortawesome/free-brands-svg-icons": "5.15.4",
+    "@fortawesome/free-regular-svg-icons": "5.15.4",
+    "@fortawesome/free-solid-svg-icons": "5.15.4",
+    "@fortawesome/react-fontawesome": "0.2.0",
+    "@openedx/frontend-plugin-framework": "^1.1.2",
+    "@openedx/paragon": "22.0.0",
+    "@tensorflow-models/blazeface": "0.0.7",
+    "@tensorflow/tfjs-converter": "3.21.0",
+    "@tensorflow/tfjs-core": "3.21.0",
+    "bowser": "2.11.0",
    "classnames": "2.5.1",
-    "core-js": "3.46.0",
+    "core-js": "3.37.0",
    "font-awesome": "4.7.0",
-    "form-urlencoded": "6.1.6",
+    "form-urlencoded": "6.1.4",
    "formdata-polyfill": "4.0.10",
    "jslib-html5-camera-photo": "3.3.4",
    "lodash.camelcase": "4.3.0",
@@ -61,16 +59,16 @@
    "lodash.pick": "4.4.0",
    "lodash.pickby": "4.6.0",
    "lodash.snakecase": "4.1.1",
-    "long": "5.3.2",
-    "memoize-one": "^6.0.0",
+    "long": "5.2.3",
+    "memoize-one": "5.2.1",
    "prop-types": "15.8.1",
-    "qs": "6.14.0",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "qs": "6.12.1",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
    "react-helmet": "6.1.0",
    "react-redux": "7.2.9",
-    "react-router": "^6.25.1",
-    "react-router-dom": "^6.25.1",
+    "react-router": "6.23.0",
+    "react-router-dom": "6.23.0",
    "react-router-hash-link": "2.4.3",
    "react-scrollspy": "3.4.3",
    "react-transition-group": "4.4.5",
@@ -80,15 +78,17 @@
    "redux-saga": "1.3.0",
    "redux-thunk": "2.4.2",
    "regenerator-runtime": "0.14.1",
-    "reselect": "^5.1.1",
-    "universal-cookie": "7.2.2"
+    "reselect": "4.1.8",
+    "universal-cookie": "4.0.4"
  },
  "devDependencies": {
-    "@edx/browserslist-config": "1.5.0",
-    "@openedx/frontend-build": "^14.6.2",
-    "@testing-library/jest-dom": "6.9.1",
-    "@testing-library/react": "14.3.1",
-    "react-test-renderer": "^18.3.1",
-    "redux-mock-store": "1.5.5"
+    "@edx/browserslist-config": "1.2.0",
+    "@edx/reactifex": "1.1.0",
+    "@openedx/frontend-build": "14.0.3",
+    "@testing-library/jest-dom": "6.4.5",
+    "@testing-library/react": "12.1.5",
+    "react-test-renderer": "17.0.2",
+    "reactifex": "1.1.1",
+    "redux-mock-store": "1.5.4"
  }
 }
--- a/src/account-settings/AccountSettingsPage.jsx
+++ b/src/account-settings/AccountSettingsPage.jsx
@@ -14,7 +14,7 @@ import {
  getLanguageList,
 } from '@edx/frontend-platform/i18n';
 import {
-  Container, Hyperlink, Icon, Alert,
+  Button, Hyperlink, Icon, Alert,
 } from '@openedx/paragon';
 import { CheckCircle, Error, WarningFilled } from '@openedx/paragon/icons';

@@ -47,13 +47,11 @@ import {
  COPPA_COMPLIANCE_YEAR,
  WORK_EXPERIENCE_OPTIONS,
  getStatesList,
-  FIELD_LABELS,
 } from './data/constants';
 import { fetchSiteLanguages } from './site-language';
-import { fetchNotificationPreferences } from '../notification-preferences/data/thunks';
-import NotificationSettings from '../notification-preferences/NotificationSettings';
+import DemographicsSection from './demographics/DemographicsSection';
+import { fetchCourseList } from '../notification-preferences/data/thunks';
 import { withLocation, withNavigate } from './hoc';
-import AdditionalProfileFieldsSlot from '../plugin-slots/AdditionalProfileFieldsSlot';

 class AccountSettingsPage extends React.Component {
  constructor(props, context) {
@@ -67,8 +65,8 @@ class AccountSettingsPage extends React.Component {
    this.navLinkRefs = {
      '#basic-information': React.createRef(),
      '#profile-information': React.createRef(),
+      '#demographics-information': React.createRef(),
      '#social-media': React.createRef(),
-      '#notifications': React.createRef(),
      '#site-preferences': React.createRef(),
      '#linked-accounts': React.createRef(),
      '#delete-account': React.createRef(),
@@ -76,7 +74,7 @@ class AccountSettingsPage extends React.Component {
  }

  componentDidMount() {
-    this.props.fetchNotificationPreferences();
+    this.props.fetchCourseList();
    this.props.fetchSettings();
    this.props.fetchSiteLanguages(this.props.navigate);
    sendTrackingLogEvent('edx.user.settings.viewed', {
@@ -124,15 +122,7 @@ class AccountSettingsPage extends React.Component {
    countryOptions: [{
      value: '',
      label: this.props.intl.formatMessage(messages['account.settings.field.country.options.empty']),
-    }].concat(
-      this.removeDisabledCountries(
-        getCountryList(locale).map(({ code, name }) => ({
-          value: code,
-          label: name,
-          disabled: this.isDisabledCountry(code),
-        })),
-      ),
-    ),
+    }].concat(getCountryList(locale).map(({ code, name }) => ({ value: code, label: name }))),
    stateOptions: [{
      value: '',
      label: this.props.intl.formatMessage(messages['account.settings.field.state.options.empty']),
@@ -159,30 +149,11 @@ class AccountSettingsPage extends React.Component {
    })),
  }));

-  canDeleteAccount = () => {
-    const { committedValues } = this.props;
-    return !getConfig().COUNTRIES_WITH_DELETE_ACCOUNT_DISABLED.includes(committedValues.country);
-  };
-
-  removeDisabledCountries = (countryList) => {
-    const { countriesCodesList, committedValues } = this.props;
-    const committedCountry = committedValues?.country;
-
-    if (!countriesCodesList.length) {
-      return countryList;
-    }
-    return countryList.filter(({ value }) => value === committedCountry || countriesCodesList.find(x => x === value));
-  };
-
  handleEditableFieldChange = (name, value) => {
    this.props.updateDraft(name, value);
  };

  handleSubmit = (formId, values) => {
-    if (formId === FIELD_LABELS.COUNTRY && this.isDisabledCountry(values)) {
-      return;
-    }
-
    const { formValues } = this.props;
    let extendedProfileObject = {};

@@ -224,12 +195,6 @@ class AccountSettingsPage extends React.Component {
    }
  };

-  isDisabledCountry = (country) => {
-    const { countriesCodesList } = this.props;
-
-    return countriesCodesList.length > 0 && !countriesCodesList.find(x => x === country);
-  };
-
  isEditable(fieldName) {
    return !this.props.staticFields.includes(fieldName);
  }
@@ -348,9 +313,19 @@ class AccountSettingsPage extends React.Component {
        header={this.props.intl.formatMessage(messages['account.settings.field.name.verified.failure.message.header'])}
        body={
          (
-            <div className="d-flex flex-row">
-              {this.props.intl.formatMessage(messages['account.settings.field.name.verified.failure.message'])}
-            </div>
+            <>
+              <div className="d-flex flex-row">
+                {this.props.intl.formatMessage(messages['account.settings.field.name.verified.failure.message'])}
+              </div>
+              <div className="d-flex flex-row-reverse mt-3">
+                <Button
+                  variant="primary"
+                  href="https://support.edx.org/hc/en-us/articles/360004381594-Why-was-my-ID-verification-denied"
+                >
+                  {this.props.intl.formatMessage(messages['account.settings.field.name.verified.failure.message.help.link'])}
+                </Button>{' '}
+              </div>
+            </>
          )
        }
      />
@@ -485,6 +460,16 @@ class AccountSettingsPage extends React.Component {
    );
  }

+  renderDemographicsSection() {
+    // check the result of an LMS API call to determine if we should render the DemographicsSection component
+    if (this.props.formValues.shouldDisplayDemographicsSection) {
+      return (
+        <DemographicsSection forwardRef={this.navLinkRefs['#demographics-information']} />
+      );
+    }
+    return null;
+  }
+
  renderContent() {
    const editableFieldProps = {
      onChange: this.handleEditableFieldChange,
@@ -503,8 +488,7 @@ class AccountSettingsPage extends React.Component {
    } = this.getLocalizedOptions(this.context.locale, this.props.formValues.country);

    // Show State field only if the country is US (could include Canada later)
-    const { country } = this.props.formValues;
-    const showState = country === COUNTRY_WITH_STATES && !this.isDisabledCountry(country);
+    const showState = this.props.formValues.country === COUNTRY_WITH_STATES;
    const { verifiedName } = this.props;

    const hasWorkExperience = !!this.props.formValues?.extended_profile?.find(field => field.field_name === 'work_experience');
@@ -733,10 +717,9 @@ class AccountSettingsPage extends React.Component {
            emptyLabel={this.props.intl.formatMessage(messages['account.settings.field.language.proficiencies.empty'])}
            {...editableFieldProps}
          />
-
-          <AdditionalProfileFieldsSlot />
        </div>
-        <div className="account-section pt-3 mb-6" id="social-media">
+        {getConfig().ENABLE_DEMOGRAPHICS_COLLECTION && this.renderDemographicsSection()}
+        <div className="account-section pt-3 mb-5" id="social-media">
          <h2 className="section-heading h4 mb-3">
            {this.props.intl.formatMessage(messages['account.settings.section.social.media'])}
          </h2>
@@ -772,11 +755,8 @@ class AccountSettingsPage extends React.Component {
            {...editableFieldProps}
          />
        </div>
-        <div className="border border-light-700" />
-        <div className="mt-6" id="notifications" ref={this.navLinkRefs['#notifications']}>
-          <NotificationSettings />
-        </div>
-        <div className="account-section mb-5" id="site-preferences" ref={this.navLinkRefs['#site-preferences']}>
+
+        <div className="account-section pt-3 mb-5" id="site-preferences" ref={this.navLinkRefs['#site-preferences']}>
          <h2 className="section-heading h4 mb-3">
            {this.props.intl.formatMessage(messages['account.settings.section.site.preferences'])}
          </h2>
@@ -818,15 +798,16 @@ class AccountSettingsPage extends React.Component {
          <ThirdPartyAuth />
        </div>

-        {getConfig().ENABLE_ACCOUNT_DELETION && (
+        {getConfig().ENABLE_ACCOUNT_DELETION
+          && (
          <div className="account-section pt-3 mb-5" id="delete-account" ref={this.navLinkRefs['#delete-account']}>
            <DeleteAccount
              isVerifiedAccount={this.props.isActive}
              hasLinkedTPA={hasLinkedTPA}
-              canDeleteAccount={this.canDeleteAccount()}
            />
          </div>
-        )}
+          )}
+
      </>
    );
  }
@@ -855,24 +836,26 @@ class AccountSettingsPage extends React.Component {
    } = this.props;

    return (
-      <Container className="page__account-settings py-5" size="xl">
+      <div className="page__account-settings container-fluid py-5">
        {this.renderDuplicateTpaProviderMessage()}
        <h1 className="mb-4">
          {this.props.intl.formatMessage(messages['account.settings.page.heading'])}
        </h1>
        <div>
          <div className="row">
-            <div className="col-md-3">
-              <JumpNav />
+            <div className="col-md-2">
+              <JumpNav
+                displayDemographicsLink={this.props.formValues.shouldDisplayDemographicsSection}
+              />
            </div>
-            <div className="col-md-9">
+            <div className="col-md-10">
              {loading ? this.renderLoading() : null}
              {loaded ? this.renderContent() : null}
              {loadingError ? this.renderError() : null}
            </div>
          </div>
        </div>
-      </Container>
+      </div>
    );
  }
 }
@@ -891,15 +874,12 @@ AccountSettingsPage.propTypes = {
    name: PropTypes.string,
    email: PropTypes.string,
    secondary_email: PropTypes.string,
-    secondary_email_enabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+    secondary_email_enabled: PropTypes.bool,
    year_of_birth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    country: PropTypes.string,
    level_of_education: PropTypes.string,
    gender: PropTypes.string,
-    extended_profile: PropTypes.arrayOf(PropTypes.shape({
-      field_name: PropTypes.string,
-      field_value: PropTypes.string,
-    })),
+    extended_profile: PropTypes.string,
    language_proficiencies: PropTypes.string,
    pending_name_change: PropTypes.string,
    phone_number: PropTypes.string,
@@ -908,6 +888,7 @@ AccountSettingsPage.propTypes = {
    social_link_twitter: PropTypes.string,
    time_zone: PropTypes.string,
    state: PropTypes.string,
+    shouldDisplayDemographicsSection: PropTypes.bool,
    useVerifiedNameForCerts: PropTypes.bool.isRequired,
    verified_name: PropTypes.string,
  }).isRequired,
@@ -915,7 +896,6 @@ AccountSettingsPage.propTypes = {
    name: PropTypes.string,
    useVerifiedNameForCerts: PropTypes.bool,
    verified_name: PropTypes.string,
-    country: PropTypes.string,
  }),
  drafts: PropTypes.shape({}),
  formErrors: PropTypes.shape({
@@ -948,16 +928,13 @@ AccountSettingsPage.propTypes = {
  saveSettings: PropTypes.func.isRequired,
  fetchSettings: PropTypes.func.isRequired,
  beginNameChange: PropTypes.func.isRequired,
-  fetchNotificationPreferences: PropTypes.func.isRequired,
+  fetchCourseList: PropTypes.func.isRequired,
  tpaProviders: PropTypes.arrayOf(PropTypes.shape({
    connected: PropTypes.bool,
  })),
-  nameChangeModal: PropTypes.oneOfType([
-    PropTypes.shape({
-      formId: PropTypes.string,
-    }),
-    PropTypes.bool,
-  ]),
+  nameChangeModal: PropTypes.shape({
+    formId: PropTypes.string,
+  }),
  verifiedName: PropTypes.shape({
    verified_name: PropTypes.string,
    status: PropTypes.string,
@@ -977,12 +954,6 @@ AccountSettingsPage.propTypes = {
  ),
  navigate: PropTypes.func.isRequired,
  location: PropTypes.string.isRequired,
-  countriesCodesList: PropTypes.arrayOf(
-    PropTypes.shape({
-      value: PropTypes.string.isRequired,
-      label: PropTypes.string.isRequired,
-    }),
-  ),
 };

 AccountSettingsPage.defaultProps = {
@@ -992,7 +963,6 @@ AccountSettingsPage.defaultProps = {
  committedValues: {
    useVerifiedNameForCerts: false,
    verified_name: null,
-    country: '',
  },
  drafts: {},
  formErrors: {},
@@ -1005,15 +975,14 @@ AccountSettingsPage.defaultProps = {
  tpaProviders: [],
  isActive: true,
  secondary_email_enabled: false,
-  nameChangeModal: {} || false,
+  nameChangeModal: {},
  verifiedName: null,
  mostRecentVerifiedName: {},
  verifiedNameHistory: [],
-  countriesCodesList: [],
 };

 export default withLocation(withNavigate(connect(accountSettingsPageSelector, {
-  fetchNotificationPreferences,
+  fetchCourseList,
  fetchSettings,
  saveSettings,
  saveMultipleSettings,
--- a/src/account-settings/AccountSettingsPage.messages.jsx
+++ b/src/account-settings/AccountSettingsPage.messages.jsx
@@ -46,6 +46,11 @@ const messages = defineMessages({
    defaultMessage: 'Profile Information',
    description: 'The profile information section heading.',
  },
+  'account.settings.section.demographics.information': {
+    id: 'account.settings.section.demographics.information',
+    defaultMessage: 'Optional Information',
+    description: 'The optional information section heading.',
+  },
  'account.settings.section.site.preferences': {
    id: 'account.settings.section.site.preferences',
    defaultMessage: 'Site Preferences',
@@ -141,6 +146,11 @@ const messages = defineMessages({
    defaultMessage: 'Once your proctored exam passes review, this name will appear on your certificate and public-facing records. 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 through proctoring and will appear on certificates.',
  },
+  'account.settings.field.name.verified.verification.alert': {
+    id: 'account.settings.field.name.verified.verification.help',
+    defaultMessage: 'Enter your name as it appears on your unexpired student, work, or government-issued identification card.',
+    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: 'Verification has been submitted. This usually takes 48 hours or less. Full name cannot be changed at this time.',
--- a/src/account-settings/DOBForm.jsx
+++ b/src/account-settings/DOBForm.jsx
@@ -1,9 +1,9 @@
 import PropTypes from 'prop-types';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import {
  Form, StatefulButton, ModalDialog, ActionRow, useToggle, Button,
 } from '@openedx/paragon';
-import { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { connect, useDispatch } from 'react-redux';
 import messages from './AccountSettingsPage.messages';
 import { YEAR_OF_BIRTH_OPTIONS } from './data/constants';
@@ -11,11 +11,11 @@ import { editableFieldSelector } from './data/selectors';
 import { saveSettingsReset } from './data/actions';

 const DOBModal = (props) => {
-  const intl = useIntl();
  const {
    saveState,
    error,
    onSubmit,
+    intl,
  } = props;

  const dispatch = useDispatch();
@@ -56,7 +56,7 @@ const DOBModal = (props) => {
  function renderErrors() {
    if (saveState === 'error' || error) {
      return (
-        <Form.Control.Feedback type="invalid" key="general-error" data-testid="error-message">
+        <Form.Control.Feedback type="invalid" key="general-error">
          {intl.formatMessage(messages['account.settingsfield.dob.error.general'])}
        </Form.Control.Feedback>
      );
@@ -72,7 +72,7 @@ const DOBModal = (props) => {

  return (
    <>
-      <Button variant="primary" onClick={open} data-testid="open-modal-button">
+      <Button variant="primary" onClick={open}>
        {intl.formatMessage(messages['account.settings.field.dob.form.button'])}
      </Button>
      <ModalDialog
@@ -81,27 +81,25 @@ const DOBModal = (props) => {
        onClose={handleClose}
        hasCloseButton={false}
        variant="default"
-        data-testid="dob-modal"
      >
-        <form onSubmit={handleSubmit} data-testid="dob-form">
+        <form onSubmit={handleSubmit}>

          <ModalDialog.Header>
-            <ModalDialog.Title data-testid="modal-title">
+            <ModalDialog.Title>
              {intl.formatMessage(messages['account.settings.field.dob.form.title'])}
            </ModalDialog.Title>
          </ModalDialog.Header>

          <ModalDialog.Body className="overflow-hidden" style={{ padding: '1.5rem' }}>
-            <p data-testid="help-text">{intl.formatMessage(messages['account.settings.field.dob.form.help.text'])}</p>
+            <p>{intl.formatMessage(messages['account.settings.field.dob.form.help.text'])}</p>
            <Form.Group>
-              <Form.Label data-testid="month-label">
+              <Form.Label>
                {intl.formatMessage(messages['account.settings.field.dob.month'])}
              </Form.Label>
              <Form.Control
                as="select"
                name="month"
                onChange={handleChange}
-                data-testid="month-select"
              >
                <option value="">{intl.formatMessage(messages['account.settings.field.dob.month.default'])}</option>
                {[...Array(12).keys()].map(month => (
@@ -110,14 +108,13 @@ const DOBModal = (props) => {
              </Form.Control>
            </Form.Group>
            <Form.Group>
-              <Form.Label data-testid="year-label">
+              <Form.Label>
                {intl.formatMessage(messages['account.settings.field.dob.year'])}
              </Form.Label>
              <Form.Control
                as="select"
                name="year"
                onChange={handleChange}
-                data-testid="year-select"
              >
                <option value="">{intl.formatMessage(messages['account.settings.field.dob.year.default'])}</option>
                {YEAR_OF_BIRTH_OPTIONS.map(year => (
@@ -130,7 +127,7 @@ const DOBModal = (props) => {

          <ModalDialog.Footer>
            <ActionRow>
-              <ModalDialog.CloseButton variant="tertiary" data-testid="cancel-button">
+              <ModalDialog.CloseButton variant="tertiary">
                Cancel
              </ModalDialog.CloseButton>
              <StatefulButton
@@ -140,7 +137,6 @@ const DOBModal = (props) => {
                  default: intl.formatMessage(messages['account.settings.editable.field.action.save']),
                }}
                disabledStates={['unedited']}
-                data-testid="submit-button"
              />
            </ActionRow>
          </ModalDialog.Footer>
@@ -155,6 +151,7 @@ DOBModal.propTypes = {
  saveState: PropTypes.oneOf(['default', 'pending', 'complete', 'error']),
  error: PropTypes.string,
  onSubmit: PropTypes.func.isRequired,
+  intl: intlShape.isRequired,
 };

 DOBModal.defaultProps = {
@@ -162,4 +159,4 @@ DOBModal.defaultProps = {
  error: undefined,
 };

-export default connect(editableFieldSelector)(DOBModal);
+export default connect(editableFieldSelector)(injectIntl(DOBModal));
--- a/src/account-settings/EditableField.jsx
+++ b/src/account-settings/EditableField.jsx
@@ -1,7 +1,8 @@
+import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import classNames from 'classnames';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import {
  Button, Form, StatefulButton,
 } from '@openedx/paragon';
@@ -38,10 +39,10 @@ const EditableField = (props) => {
    isEditing,
    isEditable,
    isGrayedOut,
+    intl,
    ...others
  } = props;
  const id = `field-${name}`;
-  const intl = useIntl();

  const handleSubmit = (e) => {
    e.preventDefault();
@@ -84,13 +85,9 @@ const EditableField = (props) => {
    if (!confirmationMessageDefinition || !confirmationValue) {
      return null;
    }
-    return (
-      <span data-testid="editable-field-confirmation">
-        {intl.formatMessage(confirmationMessageDefinition, {
-          value: confirmationValue,
-        })}
-      </span>
-    );
+    return intl.formatMessage(confirmationMessageDefinition, {
+      value: confirmationValue,
+    });
  };

  return (
@@ -99,7 +96,7 @@ const EditableField = (props) => {
      cases={{
        editing: (
          <>
-            <form onSubmit={handleSubmit} data-testid="editable-field-form">
+            <form onSubmit={handleSubmit}>
              <Form.Group
                controlId={id}
                isInvalid={error != null}
@@ -112,11 +109,10 @@ const EditableField = (props) => {
                  type={type}
                  value={value}
                  onChange={handleChange}
-                  data-testid="editable-field-textbox"
                  {...others}
                />
                {!!helpText && <Form.Text>{helpText}</Form.Text>}
-                {error != null && <Form.Control.Feedback hasIcon={false} data-testid="editable-field-error">{error}</Form.Control.Feedback>}
+                {error != null && <Form.Control.Feedback hasIcon={false}>{error}</Form.Control.Feedback>}
                {others.children}
              </Form.Group>
              <p>
@@ -138,21 +134,16 @@ const EditableField = (props) => {
                    if (saveState === 'pending') { e.preventDefault(); }
                  }}
                  disabledStates={[]}
-                  data-testid="editable-field-save"
                />
                <Button
                  variant="outline-primary"
                  onClick={handleCancel}
-                  data-testid="editable-field-cancel"
-                  data-clicked="cancel"
                >
                  {intl.formatMessage(messages['account.settings.editable.field.action.cancel'])}
                </Button>
              </p>
            </form>
-            {['name', 'verified_name'].includes(name) && (
-              <CertificatePreference fieldName={name} data-testid="editable-field-certificate-preference" />
-            )}
+            {['name', 'verified_name'].includes(name) && <CertificatePreference fieldName={name} />}
          </>
        ),
        default: (
@@ -160,7 +151,7 @@ const EditableField = (props) => {
            <div className="d-flex align-items-start">
              <h6 aria-level="3">{label}</h6>
              {isEditable ? (
-                <Button variant="link" onClick={handleEdit} className="ml-3" data-testid="editable-field-edit" data-clicked="edit">
+                <Button variant="link" onClick={handleEdit} className="ml-3">
                  <FontAwesomeIcon className="mr-1" icon={faPencilAlt} />{intl.formatMessage(messages['account.settings.editable.field.action.edit'])}
                </Button>
              ) : null}
@@ -197,6 +188,7 @@ EditableField.propTypes = {
  isEditing: PropTypes.bool,
  isEditable: PropTypes.bool,
  isGrayedOut: PropTypes.bool,
+  intl: intlShape.isRequired,
 };

 EditableField.defaultProps = {
@@ -217,4 +209,4 @@ EditableField.defaultProps = {
 export default connect(editableFieldSelector, {
  onEdit: openForm,
  onCancel: closeForm,
-})(EditableField);
+})(injectIntl(EditableField));
--- a/src/account-settings/EditableSelectField.jsx
+++ b/src/account-settings/EditableSelectField.jsx
@@ -1,6 +1,7 @@
+import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import {
  Button, Form, StatefulButton,
 } from '@openedx/paragon';
@@ -18,7 +19,6 @@ import { editableFieldSelector } from './data/selectors';
 import CertificatePreference from './certificate-preference/CertificatePreference';

 const EditableSelectField = (props) => {
-  const intl = useIntl();
  const {
    name,
    label,
@@ -39,6 +39,7 @@ const EditableSelectField = (props) => {
    isEditing,
    isEditable,
    isGrayedOut,
+    intl,
    ...others
  } = props;
  const id = `field-${name}`;
@@ -106,7 +107,6 @@ const EditableSelectField = (props) => {
            <option
              value={subOption.value}
              key={`${subOption.value}-${subOption.label}`}
-              disabled={subOption?.disabled}
            >
              {subOption.label}
            </option>
@@ -115,7 +115,7 @@ const EditableSelectField = (props) => {
      );
    }
    return (
-      <option value={option.value} key={`${option.value}-${option.label}`} disabled={option?.disabled}>
+      <option value={option.value} key={`${option.value}-${option.label}`}>
        {option.label}
      </option>
    );
@@ -226,6 +226,7 @@ EditableSelectField.propTypes = {
  isEditing: PropTypes.bool,
  isEditable: PropTypes.bool,
  isGrayedOut: PropTypes.bool,
+  intl: intlShape.isRequired,
 };

 EditableSelectField.defaultProps = {
@@ -247,4 +248,4 @@ EditableSelectField.defaultProps = {
 export default connect(editableFieldSelector, {
  onEdit: openForm,
  onCancel: closeForm,
-})(EditableSelectField);
+})(injectIntl(EditableSelectField));
--- a/src/account-settings/EmailField.jsx
+++ b/src/account-settings/EmailField.jsx
@@ -1,8 +1,9 @@
+import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
 import {
-  Button, StatefulButton, Form, Tooltip, OverlayTrigger,
+  Button, StatefulButton, Form,
 } from '@openedx/paragon';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faExclamationTriangle, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
@@ -34,9 +35,9 @@ const EmailField = (props) => {
    onChange,
    isEditing,
    isEditable,
+    intl,
  } = props;
  const id = `field-${name}`;
-  const intl = useIntl();

  const handleSubmit = (e) => {
    e.preventDefault();
@@ -161,16 +162,7 @@ const EmailField = (props) => {
                </Button>
              ) : null}
            </div>
-            <OverlayTrigger
-              placement="top"
-              overlay={(
-                <Tooltip id={`tooltip-${name}`} variant="light" className="d-sm-none">
-                  {renderValue()}
-                </Tooltip>
-              )}
-            >
-              <p data-hj-suppress className="text-truncate">{renderValue()}</p>
-            </OverlayTrigger>
+            <p data-hj-suppress>{renderValue()}</p>
            {renderConfirmationMessage() || <p className="small text-muted mt-n2">{helpText}</p>}
          </div>
        ),
@@ -199,6 +191,7 @@ EmailField.propTypes = {
  onChange: PropTypes.func.isRequired,
  isEditing: PropTypes.bool,
  isEditable: PropTypes.bool,
+  intl: intlShape.isRequired,
 };

 EmailField.defaultProps = {
@@ -217,4 +210,4 @@ EmailField.defaultProps = {
 export default connect(editableFieldSelector, {
  onEdit: openForm,
  onCancel: closeForm,
-})(EmailField);
+})(injectIntl(EmailField));
--- a/src/account-settings/JumpNav.jsx
+++ b/src/account-settings/JumpNav.jsx
@@ -1,30 +1,38 @@
 import { getConfig } from '@edx/frontend-platform';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { breakpoints, useWindowSize } from '@openedx/paragon';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { breakpoints, useWindowSize, Icon } from '@openedx/paragon';
+import { OpenInNew } from '@openedx/paragon/icons';
 import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { useSelector } from 'react-redux';
 import { NavHashLink } from 'react-router-hash-link';
 import Scrollspy from 'react-scrollspy';
+import { Link } from 'react-router-dom';
 import messages from './AccountSettingsPage.messages';
+import { selectShowPreferences } from '../notification-preferences/data/selectors';

-const JumpNav = () => {
-  const intl = useIntl();
+const JumpNav = ({
+  intl,
+  displayDemographicsLink,
+}) => {
  const stickToTop = useWindowSize().width > breakpoints.small.minWidth;
+  const showPreferences = useSelector(selectShowPreferences());

  return (
-    <div className={classNames('jump-nav', { 'jump-nav-sm position-sticky pt-3': stickToTop })}>
+    <div className={classNames('jump-nav px-2.25', { 'jump-nav-sm position-sticky pt-3': stickToTop })}>
      <Scrollspy
        items={[
          'basic-information',
          'profile-information',
+          'demographics-information',
          'social-media',
-          'notifications',
          'site-preferences',
          'linked-accounts',
          'delete-account',
        ]}
        className="list-unstyled"
        currentClassName="font-weight-bold"
-        offset={-64}
      >
        <li>
          <NavHashLink to="#basic-information">
@@ -36,16 +44,19 @@ const JumpNav = () => {
            {intl.formatMessage(messages['account.settings.section.profile.information'])}
          </NavHashLink>
        </li>
+        {getConfig().ENABLE_DEMOGRAPHICS_COLLECTION && displayDemographicsLink
+          && (
+          <li>
+            <NavHashLink to="#demographics-information">
+              {intl.formatMessage(messages['account.settings.section.demographics.information'])}
+            </NavHashLink>
+          </li>
+          )}
        <li>
          <NavHashLink to="#social-media">
            {intl.formatMessage(messages['account.settings.section.social.media'])}
          </NavHashLink>
        </li>
-        <li>
-          <NavHashLink to="#notifications">
-            {intl.formatMessage(messages['notification.preferences.notifications.label'])}
-          </NavHashLink>
-        </li>
        <li>
          <NavHashLink to="#site-preferences">
            {intl.formatMessage(messages['account.settings.section.site.preferences'])}
@@ -65,8 +76,28 @@ const JumpNav = () => {
          </li>
          )}
      </Scrollspy>
+      {showPreferences && (
+        <>
+          <hr />
+          <Scrollspy
+            className="list-unstyled"
+          >
+            <li>
+              <Link to="/notifications" target="_blank" rel="noopener noreferrer">
+                <span>{intl.formatMessage(messages['notification.preferences.notifications.label'])}</span>
+                <Icon className="d-inline-block align-bottom ml-1" src={OpenInNew} />
+              </Link>
+            </li>
+          </Scrollspy>
+        </>
+      )}
    </div>
  );
 };

-export default JumpNav;
+JumpNav.propTypes = {
+  intl: intlShape.isRequired,
+  displayDemographicsLink: PropTypes.bool.isRequired,
+};
+
+export default injectIntl(JumpNav);
--- a/src/account-settings/_style.scss
+++ b/src/account-settings/_style.scss
@@ -29,6 +29,7 @@
    }
  }

+
  .custom-switch {
    padding: 0;
    max-width: 500px;
@@ -43,8 +44,3 @@
    filter: alpha(opacity = 60); /* MSIE */
  }
 }
-
-#tooltip-email .small {
-  display: block;
-  margin: 0 !important;
-}
--- a/src/account-settings/certificate-preference/CertificatePreference.jsx
+++ b/src/account-settings/certificate-preference/CertificatePreference.jsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { connect, useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';

@@ -8,7 +8,7 @@ import {
  ModalDialog,
  StatefulButton,
 } from '@openedx/paragon';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';

 import {
  closeForm,
@@ -22,6 +22,7 @@ import commonMessages from '../AccountSettingsPage.messages';
 import messages from './messages';

 const CertificatePreference = ({
+  intl,
  fieldName,
  originalFullName,
  originalVerifiedName,
@@ -32,7 +33,6 @@ const CertificatePreference = ({
  const [checked, setChecked] = useState(false);
  const [modalIsOpen, setModalIsOpen] = useState(false);
  const formId = 'useVerifiedNameForCerts';
-  const intl = useIntl();

  const handleCheckboxChange = () => {
    if (!checked) {
@@ -155,6 +155,7 @@ const CertificatePreference = ({
 };

 CertificatePreference.propTypes = {
+  intl: intlShape.isRequired,
  fieldName: PropTypes.string.isRequired,
  originalFullName: PropTypes.string,
  originalVerifiedName: PropTypes.string,
@@ -169,4 +170,4 @@ CertificatePreference.defaultProps = {
  useVerifiedNameForCerts: false,
 };

-export default connect(certPreferenceSelector)(CertificatePreference);
+export default connect(certPreferenceSelector)(injectIntl(CertificatePreference));
--- a/src/account-settings/certificate-preference/data/service.test.js
+++ b/src/account-settings/certificate-preference/data/service.test.js
@@ -1,76 +0,0 @@
-import { getConfig } from '@edx/frontend-platform';
-import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-
-import { postVerifiedNameConfig } from './service';
-import { handleRequestError } from '../../data/utils';
-
-jest.mock('@edx/frontend-platform');
-jest.mock('@edx/frontend-platform/auth');
-jest.mock('../../data/utils');
-
-describe('postVerifiedNameConfig', () => {
-  const mockPost = jest.fn();
-
-  beforeEach(() => {
-    jest.resetAllMocks();
-
-    getConfig.mockReturnValue({
-      LMS_BASE_URL: 'http://testserver',
-    });
-
-    getAuthenticatedHttpClient.mockReturnValue({
-      post: mockPost,
-    });
-  });
-
-  it('posts verified name config with useVerifiedNameForCerts = true', async () => {
-    const mockResponse = { data: { success: true } };
-    mockPost.mockResolvedValueOnce(mockResponse);
-
-    const result = await postVerifiedNameConfig('testuser', { useVerifiedNameForCerts: true });
-
-    expect(getConfig).toHaveBeenCalled();
-    expect(getAuthenticatedHttpClient).toHaveBeenCalled();
-    expect(mockPost).toHaveBeenCalledWith(
-      'http://testserver/api/edx_name_affirmation/v1/verified_name/config',
-      {
-        username: 'testuser',
-        use_verified_name_for_certs: true,
-      },
-      { headers: { Accept: 'application/json' } },
-    );
-    expect(result).toEqual(mockResponse.data);
-  });
-
-  it('posts verified name config with useVerifiedNameForCerts = false', async () => {
-    const mockResponse = { data: { success: false } };
-    mockPost.mockResolvedValueOnce(mockResponse);
-
-    const result = await postVerifiedNameConfig('anotheruser', { useVerifiedNameForCerts: false });
-
-    expect(mockPost).toHaveBeenCalledWith(
-      'http://testserver/api/edx_name_affirmation/v1/verified_name/config',
-      {
-        username: 'anotheruser',
-        use_verified_name_for_certs: false,
-      },
-      { headers: { Accept: 'application/json' } },
-    );
-    expect(result).toEqual(mockResponse.data);
-  });
-
-  it('calls handleRequestError and throws when request fails', async () => {
-    const mockError = new Error('Request failed');
-    mockPost.mockRejectedValueOnce(mockError);
-
-    handleRequestError.mockImplementation(() => {
-      throw mockError;
-    });
-
-    await expect(
-      postVerifiedNameConfig('erroruser', { useVerifiedNameForCerts: true }),
-    ).rejects.toThrow('Request failed');
-
-    expect(handleRequestError).toHaveBeenCalledWith(mockError);
-  });
-});
--- a/src/account-settings/certificate-preference/test/CertificatePreference.test.jsx
+++ b/src/account-settings/certificate-preference/test/CertificatePreference.test.jsx
@@ -1,5 +1,6 @@
 /* eslint-disable no-import-assign */
 import React from 'react';
+import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import { BrowserRouter as Router } from 'react-router-dom';
 import configureStore from 'redux-mock-store';
@@ -10,14 +11,10 @@ import {
 } from '@testing-library/react';

 import * as auth from '@edx/frontend-platform/auth';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import messages from '../messages';
+import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';

-// Modal creates a portal.  Overriding createPortal allows portals to be tested in jest.
-jest.mock('react-dom', () => ({
-  ...jest.requireActual('react-dom'),
-  createPortal: jest.fn(node => node), // Mock portal behavior
-}));
+// 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

@@ -30,6 +27,8 @@ jest.mock('react-redux', () => ({
 jest.mock('@edx/frontend-platform/auth');
 jest.mock('../../data/selectors', () => jest.fn().mockImplementation(() => ({ certPreferenceSelector: () => ({}) })));

+const IntlCertificatePreference = injectIntl(CertificatePreference);
+
 const mockStore = configureStore();

 describe('NameChange', () => {
@@ -37,7 +36,7 @@ describe('NameChange', () => {
  let store = {};
  const formId = 'useVerifiedNameForCerts';
  const updateDraft = 'UPDATE_DRAFT';
-  const labelText = messages['account.settings.field.name.checkbox.certificate.select'].defaultMessage;
+  const labelText = 'If checked, this name will appear on your certificates and public-facing records.';

  const reduxWrapper = children => (
    <Router>
@@ -55,6 +54,7 @@ describe('NameChange', () => {
      originalVerifiedName: 'edX Verified',
      saveState: null,
      useVerifiedNameForCerts: false,
+      intl: {},
    };

    auth.getAuthenticatedHttpClient = jest.fn(() => ({
@@ -74,7 +74,7 @@ describe('NameChange', () => {
      originalVerifiedName: '',
    };

-    const wrapper = render(reduxWrapper(<CertificatePreference {...props} />));
+    const wrapper = render(reduxWrapper(<IntlCertificatePreference {...props} />));

    expect(wrapper).toMatchSnapshot();
  });
@@ -85,7 +85,7 @@ describe('NameChange', () => {
      useVerifiedNameForCerts: true,
    };

-    render(reduxWrapper(<CertificatePreference {...props} />));
+    render(reduxWrapper(<IntlCertificatePreference {...props} />));

    const checkbox = screen.getByLabelText(labelText);
    expect(checkbox.checked).toEqual(false);
@@ -100,7 +100,7 @@ describe('NameChange', () => {
  });

  it('triggers modal when attempting to uncheck checkbox', () => {
-    render(reduxWrapper(<CertificatePreference {...props} />));
+    render(reduxWrapper(<IntlCertificatePreference {...props} />));

    const checkbox = screen.getByLabelText(labelText);
    expect(checkbox.checked).toEqual(true);
@@ -112,7 +112,7 @@ describe('NameChange', () => {
  });

  it('updates draft when changing radio value', () => {
-    render(reduxWrapper(<CertificatePreference {...props} />));
+    render(reduxWrapper(<IntlCertificatePreference {...props} />));

    const checkbox = screen.getByLabelText(labelText);
    fireEvent.click(checkbox);
@@ -130,7 +130,7 @@ describe('NameChange', () => {
  });

  it('clears draft on cancel', () => {
-    render(reduxWrapper(<CertificatePreference {...props} />));
+    render(reduxWrapper(<IntlCertificatePreference {...props} />));

    const checkbox = screen.getByLabelText(labelText);
    fireEvent.click(checkbox);
@@ -143,7 +143,7 @@ describe('NameChange', () => {
  });

  it('submits', () => {
-    render(reduxWrapper(<CertificatePreference {...props} />));
+    render(reduxWrapper(<IntlCertificatePreference {...props} />));

    const checkbox = screen.getByLabelText(labelText);
    fireEvent.click(checkbox);
@@ -163,7 +163,7 @@ describe('NameChange', () => {
      useVerifiedNameForCerts: true,
    };

-    render(reduxWrapper(<CertificatePreference {...props} />));
+    render(reduxWrapper(<IntlCertificatePreference {...props} />));

    const checkbox = screen.getByLabelText(labelText);
    expect(checkbox.checked).toEqual(true);
--- a/src/account-settings/data/actions.js
+++ b/src/account-settings/data/actions.js
@@ -27,7 +27,6 @@ export const fetchSettingsSuccess = ({
  profileDataManager,
  timeZones,
  verifiedNameHistory,
-  countriesCodesList,
 }) => ({
  type: FETCH_SETTINGS.SUCCESS,
  payload: {
@@ -36,7 +35,6 @@ export const fetchSettingsSuccess = ({
    profileDataManager,
    timeZones,
    verifiedNameHistory,
-    countriesCodesList,
  },
 });

--- a/src/account-settings/data/constants.js
+++ b/src/account-settings/data/constants.js
@@ -132,6 +132,6 @@ export function getStatesList(country) {
  return country && COUNTRY_STATES_MAP[country.toUpperCase()];
 }

-export const FIELD_LABELS = {
-  COUNTRY: 'country',
-};
+export const DECLINED = 'declined';
+export const SELF_DESCRIBE = 'self-describe';
+export const OTHER = 'other';
--- a/src/account-settings/data/reducers.js
+++ b/src/account-settings/data/reducers.js
@@ -39,7 +39,6 @@ export const defaultState = {
  verifiedName: null,
  mostRecentVerifiedName: {},
  verifiedNameHistory: {},
-  countriesCodesList: [],
 };

 const reducer = (state = defaultState, action = {}) => {
@@ -65,7 +64,6 @@ const reducer = (state = defaultState, action = {}) => {
        loaded: true,
        loadingError: null,
        verifiedNameHistory: action.payload.verifiedNameHistory,
-        countriesCodesList: action.payload.countriesCodesList,
      };
    case FETCH_SETTINGS.FAILURE:
      return {
--- a/src/account-settings/data/sagas.js
+++ b/src/account-settings/data/sagas.js
@@ -53,7 +53,7 @@ export function* handleFetchSettings() {
    const { username, userId, roles: userRoles } = getAuthenticatedUser();

    const {
-      thirdPartyAuthProviders, profileDataManager, timeZones, countries, ...values
+      thirdPartyAuthProviders, profileDataManager, timeZones, ...values
    } = yield call(
      getSettings,
      username,
@@ -71,7 +71,6 @@ export function* handleFetchSettings() {
      profileDataManager,
      timeZones,
      verifiedNameHistory,
-      countriesCodesList: countries,
    }));
  } catch (e) {
    yield put(fetchSettingsFailure(e.message));
--- a/src/account-settings/data/selectors.js
+++ b/src/account-settings/data/selectors.js
@@ -88,11 +88,6 @@ const previousSiteLanguageSelector = createSelector(
  accountSettings => accountSettings.previousSiteLanguage,
 );

-const countriesSelector = createSelector(
-  accountSettingsSelector,
-  accountSettings => accountSettings.countriesCodesList,
-);
-
 const editableFieldErrorSelector = createSelector(
  editableFieldNameSelector,
  accountSettingsSelector,
@@ -242,7 +237,6 @@ export const accountSettingsPageSelector = createSelector(
  mostRecentApprovedVerifiedNameValueSelector,
  mostRecentVerifiedNameSelector,
  sortedVerifiedNameHistorySelector,
-  countriesSelector,
  (
    accountSettings,
    siteLanguageOptions,
@@ -260,7 +254,6 @@ export const accountSettingsPageSelector = createSelector(
    verifiedName,
    mostRecentVerifiedName,
    verifiedNameHistory,
-    countriesCodesList,
  ) => ({
    siteLanguageOptions,
    siteLanguage,
@@ -281,7 +274,6 @@ export const accountSettingsPageSelector = createSelector(
    verifiedName,
    mostRecentVerifiedName,
    verifiedNameHistory,
-    countriesCodesList,
  }),
 );

@@ -306,6 +298,21 @@ export const certPreferenceSelector = createSelector(
  }),
 );

+export const demographicsSectionSelector = createSelector(
+  formValuesSelector,
+  draftsSelector,
+  errorSelector,
+  (
+    formValues,
+    drafts,
+    errors,
+  ) => ({
+    formValues,
+    drafts,
+    formErrors: errors,
+  }),
+);
+
 export const nameChangeSelector = createSelector(
  accountSettingsSelector,
  formValuesSelector,
--- a/src/account-settings/data/service.js
+++ b/src/account-settings/data/service.js
@@ -1,14 +1,15 @@
 import { getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import { logError } from '@edx/frontend-platform/logging';
 import pick from 'lodash.pick';
+import pickBy from 'lodash.pickby';
 import omit from 'lodash.omit';
 import isEmpty from 'lodash.isempty';

 import { handleRequestError, unpackFieldErrors } from './utils';
 import { getThirdPartyAuthProviders } from '../third-party-auth';
 import { postVerifiedNameConfig } from '../certificate-preference/data/service';
-import { FIELD_LABELS } from './constants';
+import { getDemographics, getDemographicsOptions, patchDemographics } from '../demographics/data/service';
+import { DEMOGRAPHICS_FIELDS } from '../demographics/data/utils';

 const SOCIAL_PLATFORMS = [
  { id: 'twitter', key: 'social_link_twitter' },
@@ -153,6 +154,28 @@ export async function getProfileDataManager(username, userRoles) {
  return null;
 }

+/**
+ * A function to determine if the Demographics questions should be displayed to the user. For the
+ * MVP release of Demographics we are limiting the Demographics question visibility only to
+ * MicroBachelors learners.
+ */
+export async function shouldDisplayDemographicsQuestions() {
+  const requestUrl = `${getConfig().LMS_BASE_URL}/api/demographics/v1/demographics/status/`;
+  let data = {};
+
+  try {
+    ({ data } = await getAuthenticatedHttpClient().get(requestUrl));
+    if (data.display) {
+      return data.display;
+    }
+  } catch (error) {
+    // if there was an error then we just hide the section
+    return false;
+  }
+
+  return false;
+}
+
 export async function getVerifiedName() {
  let data;
  const client = getAuthenticatedHttpClient();
@@ -188,43 +211,29 @@ export async function postVerifiedName(data) {
    .catch(error => handleRequestError(error));
 }

-function extractCountryList(data) {
-  return data?.fields
-    .find(({ name }) => name === FIELD_LABELS.COUNTRY)
-    ?.options?.map(({ value }) => (value)) || [];
-}
-
-export async function getCountryList() {
-  const url = `${getConfig().LMS_BASE_URL}/user_api/v1/account/registration/`;
-
-  try {
-    const { data } = await getAuthenticatedHttpClient().get(url);
-    return extractCountryList(data);
-  } catch (e) {
-    logError(e);
-    return [];
-  }
-}
-
 /**
- * A single function to GET everything considered a setting. Currently encapsulates Account, Preferences, and
- * ThirdPartyAuth.
+ * A single function to GET everything considered a setting.
+ * Currently encapsulates Account, Preferences, ThirdPartyAuth, and Demographics
 */
-export async function getSettings(username, userRoles) {
+export async function getSettings(username, userRoles, userId) {
  const [
    account,
    preferences,
    thirdPartyAuthProviders,
    profileDataManager,
    timeZones,
-    countries,
+    shouldDisplayDemographicsQuestionsResponse,
+    demographics,
+    demographicsOptions,
  ] = await Promise.all([
    getAccount(username),
    getPreferences(username),
    getThirdPartyAuthProviders(),
    getProfileDataManager(username, userRoles),
    getTimeZones(),
-    getCountryList(),
+    getConfig().ENABLE_DEMOGRAPHICS_COLLECTION && shouldDisplayDemographicsQuestions(),
+    getConfig().ENABLE_DEMOGRAPHICS_COLLECTION && getDemographics(userId),
+    getConfig().ENABLE_DEMOGRAPHICS_COLLECTION && getDemographicsOptions(),
  ]);

  return {
@@ -233,7 +242,9 @@ export async function getSettings(username, userRoles) {
    thirdPartyAuthProviders,
    profileDataManager,
    timeZones,
-    countries,
+    shouldDisplayDemographicsSection: shouldDisplayDemographicsQuestionsResponse,
+    ...demographics,
+    demographicsOptions,
  };
 }

@@ -241,18 +252,22 @@ export async function getSettings(username, userRoles) {
 * A single function to PATCH everything considered a setting.
 * Currently encapsulates Account, Preferences, ThirdPartyAuth
 */
-export async function patchSettings(username, commitValues) {
+export async function patchSettings(username, commitValues, userId) {
  // Note: time_zone exists in the return value from user/v1/accounts
  // but it is always null and won't update. It also exists in
  // user/v1/preferences where it does update. This is the one we use.
  const preferenceKeys = ['time_zone'];
+  const demographicsKeys = DEMOGRAPHICS_FIELDS;
  const certificateKeys = ['useVerifiedNameForCerts'];
+  const isDemographicsKey = (value, key) => key.includes('demographics');
  const accountCommitValues = omit(
    commitValues,
    preferenceKeys,
+    demographicsKeys,
    certificateKeys,
  );
  const preferenceCommitValues = pick(commitValues, preferenceKeys);
+  const demographicsCommitValues = pickBy(commitValues, isDemographicsKey);
  const certCommitValues = pick(commitValues, certificateKeys);
  const patchRequests = [];

@@ -262,6 +277,9 @@ export async function patchSettings(username, commitValues) {
  if (!isEmpty(preferenceCommitValues)) {
    patchRequests.push(patchPreferences(username, preferenceCommitValues));
  }
+  if (!isEmpty(demographicsCommitValues)) {
+    patchRequests.push(patchDemographics(userId, demographicsCommitValues));
+  }
  if (!isEmpty(certCommitValues)) {
    patchRequests.push(postVerifiedNameConfig(username, certCommitValues));
  }
--- a/src/account-settings/data/service.test.js
+++ b/src/account-settings/data/service.test.js
@@ -1,181 +0,0 @@
-import { getConfig } from '@edx/frontend-platform';
-import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import { logError } from '@edx/frontend-platform/logging';
-import { FIELD_LABELS } from './constants';
-import {
-  getAccount,
-  patchAccount,
-  getPreferences,
-  patchPreferences,
-  getTimeZones,
-  getProfileDataManager,
-  getVerifiedName,
-  getVerifiedNameHistory,
-  postVerifiedName,
-  getCountryList,
-  patchSettings,
-} from './service';
-
-jest.mock('@edx/frontend-platform');
-jest.mock('@edx/frontend-platform/auth');
-jest.mock('@edx/frontend-platform/logging');
-
-const mockHttpClient = {
-  get: jest.fn(),
-  patch: jest.fn(),
-  post: jest.fn(),
-};
-
-getAuthenticatedHttpClient.mockReturnValue(mockHttpClient);
-getConfig.mockReturnValue({ LMS_BASE_URL: 'http://lms.test' });
-
-beforeEach(() => {
-  jest.clearAllMocks();
-});
-
-describe('account service', () => {
-  describe('getAccount', () => {
-    it('returns unpacked account data', async () => {
-      const apiResponse = {
-        username: 'testuser',
-        social_links: [{ platform: 'twitter', social_link: 'http://t' }],
-        language_proficiencies: [{ code: 'en' }],
-      };
-      mockHttpClient.get.mockResolvedValue({ data: apiResponse });
-
-      const result = await getAccount('testuser');
-      expect(mockHttpClient.get).toHaveBeenCalledWith('http://lms.test/api/user/v1/accounts/testuser');
-      expect(result.social_link_twitter).toEqual('http://t');
-      expect(result.language_proficiencies).toEqual('en');
-    });
-  });
-
-  describe('patchAccount', () => {
-    it('sends packed commit data and returns unpacked response', async () => {
-      const commit = { social_link_twitter: 'http://t' };
-      const apiResponse = {
-        username: 'testuser',
-        social_links: [{ platform: 'twitter', social_link: 'http://t' }],
-        language_proficiencies: [],
-      };
-      mockHttpClient.patch.mockResolvedValue({ data: apiResponse });
-
-      const result = await patchAccount('testuser', commit);
-      expect(mockHttpClient.patch).toHaveBeenCalledWith(
-        'http://lms.test/api/user/v1/accounts/testuser',
-        expect.objectContaining({ social_links: [{ platform: 'twitter', social_link: 'http://t' }] }),
-        expect.any(Object),
-      );
-      expect(result.social_link_twitter).toEqual('http://t');
-    });
-  });
-
-  describe('getPreferences', () => {
-    it('returns preferences data', async () => {
-      mockHttpClient.get.mockResolvedValue({ data: { theme: 'dark' } });
-      const result = await getPreferences('user');
-      expect(result.theme).toBe('dark');
-    });
-  });
-
-  describe('patchPreferences', () => {
-    it('patches preferences and returns commitValues', async () => {
-      mockHttpClient.patch.mockResolvedValue({});
-      const commit = { time_zone: 'UTC' };
-      const result = await patchPreferences('user', commit);
-      expect(mockHttpClient.patch).toHaveBeenCalled();
-      expect(result).toEqual(commit);
-    });
-  });
-
-  describe('getTimeZones', () => {
-    it('returns data from API', async () => {
-      mockHttpClient.get.mockResolvedValue({ data: ['UTC', 'PST'] });
-      const result = await getTimeZones('PK');
-      expect(mockHttpClient.get).toHaveBeenCalledWith(
-        'http://lms.test/user_api/v1/preferences/time_zones/',
-        { params: { country_code: 'PK' } },
-      );
-      expect(result).toEqual(['UTC', 'PST']);
-    });
-  });
-
-  describe('getProfileDataManager', () => {
-    it('returns null if no enterprise manages profile', async () => {
-      mockHttpClient.get.mockResolvedValue({ data: { results: [] } });
-      const result = await getProfileDataManager('user', ['learner']);
-      expect(result).toBeNull();
-    });
-
-    it('returns enterprise name if sync is enabled', async () => {
-      mockHttpClient.get.mockResolvedValue({ data: { results: [{ enterprise_customer: { name: 'Acme', sync_learner_profile_data: true } }] } });
-      const result = await getProfileDataManager('user', ['enterprise_learner']);
-      expect(result).toBe('Acme');
-    });
-  });
-
-  describe('getVerifiedName', () => {
-    it('returns verified name data', async () => {
-      mockHttpClient.get.mockResolvedValue({ data: { verified: true } });
-      const result = await getVerifiedName();
-      expect(result.verified).toBe(true);
-    });
-
-    it('returns {} on error', async () => {
-      mockHttpClient.get.mockRejectedValue(new Error('fail'));
-      const result = await getVerifiedName();
-      expect(result).toEqual({});
-    });
-  });
-
-  describe('getVerifiedNameHistory', () => {
-    it('returns verified name history data', async () => {
-      mockHttpClient.get.mockResolvedValue({ data: [{ id: 1 }] });
-      const result = await getVerifiedNameHistory();
-      expect(result[0].id).toBe(1);
-    });
-  });
-
-  describe('postVerifiedName', () => {
-    it('posts verified name data', async () => {
-      mockHttpClient.post.mockResolvedValue({});
-      await postVerifiedName({ first_name: 'A' });
-      expect(mockHttpClient.post).toHaveBeenCalledWith(
-        'http://lms.test/api/edx_name_affirmation/v1/verified_name',
-        { first_name: 'A' },
-        { headers: { Accept: 'application/json' } },
-      );
-    });
-  });
-
-  describe('getCountryList', () => {
-    it('extracts country values from registration API', async () => {
-      const apiResponse = { fields: [{ name: FIELD_LABELS.COUNTRY, options: [{ value: 'PK' }] }] };
-      mockHttpClient.get.mockResolvedValue({ data: apiResponse });
-      const result = await getCountryList();
-      expect(result).toEqual(['PK']);
-    });
-
-    it('returns [] and logs error on failure', async () => {
-      mockHttpClient.get.mockRejectedValue(new Error('fail'));
-      const result = await getCountryList();
-      expect(result).toEqual([]);
-      expect(logError).toHaveBeenCalled();
-    });
-  });
-
-  describe('patchSettings', () => {
-    it('calls patchAccount and patchPreferences as needed', async () => {
-      mockHttpClient.patch.mockResolvedValue({
-        data: {
-          username: 'user',
-          social_links: [],
-          language_proficiencies: [],
-        },
-      });
-
-      const result = await patchSettings('user', { time_zone: 'UTC', social_link_twitter: 't' });
-      expect(result.username).toBe('user');
-    });
-  });
-});
--- a/src/account-settings/delete-account/BeforeProceedingBanner.jsx
+++ b/src/account-settings/delete-account/BeforeProceedingBanner.jsx
@@ -1,5 +1,6 @@
+import React from 'react';
 import PropTypes from 'prop-types';
-import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Hyperlink } from '@openedx/paragon';
@@ -12,8 +13,7 @@ import messages from './messages';
 import Alert from '../Alert';

 const BeforeProceedingBanner = (props) => {
-  const { instructionMessageId, supportArticleUrl } = props;
-  const intl = useIntl();
+  const { instructionMessageId, intl, supportArticleUrl } = props;

  return (
    <Alert
@@ -41,7 +41,8 @@ const BeforeProceedingBanner = (props) => {

 BeforeProceedingBanner.propTypes = {
  instructionMessageId: PropTypes.string.isRequired,
+  intl: intlShape.isRequired,
  supportArticleUrl: PropTypes.string.isRequired,
 };

-export default BeforeProceedingBanner;
+export default injectIntl(BeforeProceedingBanner);
--- a/src/account-settings/delete-account/BeforeProceedingBanner.test.jsx
+++ b/src/account-settings/delete-account/BeforeProceedingBanner.test.jsx
@@ -1,23 +1,25 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
 import renderer from 'react-test-renderer';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { IntlProvider, injectIntl, createIntl } from '@edx/frontend-platform/i18n';

-jest.mock('react-dom', () => ({
-  ...jest.requireActual('react-dom'),
-  createPortal: jest.fn(node => node), // Mock portal behavior
-}));
+ReactDOM.createPortal = node => node;

 import BeforeProceedingBanner from './BeforeProceedingBanner'; // eslint-disable-line import/first

+const IntlBeforeProceedingBanner = injectIntl(BeforeProceedingBanner);
+
 describe('BeforeProceedingBanner', () => {
  it('should match the snapshot if SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT does not have a support link', () => {
    const props = {
      instructionMessageId: 'account.settings.delete.account.please.unlink',
+      intl: createIntl({ locale: 'en' }),
      supportArticleUrl: '',
    };
    const tree = renderer
      .create((
        <IntlProvider locale="en">
-          <BeforeProceedingBanner
+          <IntlBeforeProceedingBanner
            {...props}
          />
        </IntlProvider>
@@ -29,12 +31,13 @@ describe('BeforeProceedingBanner', () => {
  it('should match the snapshot when SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT has a support link', () => {
    const props = {
      instructionMessageId: 'account.settings.delete.account.please.unlink',
+      intl: createIntl({ locale: 'en' }),
      supportArticleUrl: 'http://test-support.edx',
    };
    const tree = renderer
      .create((
        <IntlProvider locale="en">
-          <BeforeProceedingBanner
+          <IntlBeforeProceedingBanner
            {...props}
          />
        </IntlProvider>
--- a/src/account-settings/delete-account/ConfirmationModal.jsx
+++ b/src/account-settings/delete-account/ConfirmationModal.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';

 import {
  AlertModal,
-  Button, Form, ActionRow,
+  Button, Input, ValidationFormGroup, ActionRow,
 } from '@openedx/paragon';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { faExclamationCircle, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
@@ -78,7 +78,6 @@ export class ConfirmationModal extends Component {
        isOpen={open}
        title={intl.formatMessage(messages['account.settings.delete.account.modal.header'])}
        onClose={onCancel}
-        isOverflowVisible
        footerNode={(
          <ActionRow>
            <Button variant="link" onClick={onCancel}>Cancel</Button>
@@ -108,26 +107,22 @@ export class ConfirmationModal extends Component {
              <PrintingInstructions />
            </p>
          </Alert>
-          <Form.Group
+          <ValidationFormGroup
            for={passwordFieldId}
-            isInvalid={errorType !== null}
+            invalid={errorType !== null}
+            invalidMessage={intl.formatMessage(invalidMessage)}
          >
-            <Form.Label className="d-block" htmlFor={passwordFieldId}>
+            <label className="d-block" htmlFor={passwordFieldId}>
              {intl.formatMessage(messages['account.settings.delete.account.modal.enter.password'])}
-            </Form.Label>
-            <Form.Control
+            </label>
+            <Input
              name="password"
              id={passwordFieldId}
              type="password"
              value={password}
              onChange={onChange}
            />
-            {errorType !== null && (
-              <Form.Control.Feedback type="invalid" feedback-for={passwordFieldId}>
-                {intl.formatMessage(invalidMessage)}
-              </Form.Control.Feedback>
-            )}
-          </Form.Group>
+          </ValidationFormGroup>
        </div>

      </AlertModal>
--- a/src/account-settings/delete-account/ConfirmationModal.test.jsx
+++ b/src/account-settings/delete-account/ConfirmationModal.test.jsx
@@ -1,12 +1,10 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import renderer from 'react-test-renderer';
 import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';

-// Modal creates a portal.  Overriding createPortal allows portals to be tested in jest.
-jest.mock('react-dom', () => ({
-  ...jest.requireActual('react-dom'),
-  createPortal: jest.fn(node => node), // Mock portal behavior
-}));
+// Modal creates a portal.  Overriding ReactDOM.createPortal allows portals to be tested in jest.
+ReactDOM.createPortal = node => node;

 import { ConfirmationModal } from './ConfirmationModal'; // eslint-disable-line import/first

--- a/src/account-settings/delete-account/DeleteAccount.jsx
+++ b/src/account-settings/delete-account/DeleteAccount.jsx
@@ -76,74 +76,67 @@ export class DeleteAccount extends React.Component {
        <h2 className="section-heading h4 mb-3">
          {intl.formatMessage(messages['account.settings.delete.account.header'])}
        </h2>
-        {
-          this.props.canDeleteAccount ? (
-            <>
-              <p>{intl.formatMessage(messages['account.settings.delete.account.subheader'])}</p>
-              <p>
-                {intl.formatMessage(
-                  messages['account.settings.delete.account.text.1'],
-                  { siteName: getConfig().SITE_NAME },
-                )}
-              </p>
-              <p>
-                {intl.formatMessage(
-                  messages[deleteAccountText2MessageKey],
-                  { siteName: getConfig().SITE_NAME },
-                )}
-              </p>
-              <p>
-                <PrintingInstructions />
-              </p>
-              <p className="text-danger h6">
-                {intl.formatMessage(
-                  messages['account.settings.delete.account.text.warning'],
-                  { siteName: getConfig().SITE_NAME },
-                )}
-              </p>
-              <p>
-                <Hyperlink destination="https://help.edx.org/edxlearner/s/topic/0TOQq0000001UdZOAU/account-basics">
-                  {intl.formatMessage(messages['account.settings.delete.account.text.change.instead'])}
-                </Hyperlink>
-              </p>
-              <p>
-                <Button
-                  variant="outline-danger"
-                  onClick={canDelete ? this.props.deleteAccountConfirmation : null}
-                  disabled={!canDelete}
-                >
-                  {intl.formatMessage(messages['account.settings.delete.account.button'])}
-                </Button>
-              </p>
-              {isVerifiedAccount ? null : (
-                <BeforeProceedingBanner
-                  instructionMessageId={optInInstructionMessageId}
-                  supportArticleUrl="https://support.edx.org/hc/en-us/articles/115000940568-How-do-I-confirm-my-email"
-                />
-              )}
-              {hasLinkedTPA ? (
-                <BeforeProceedingBanner
-                  instructionMessageId="account.settings.delete.account.please.unlink"
-                  supportArticleUrl={supportArticleUrl}
-                />
-              ) : null}
+        <p>{intl.formatMessage(messages['account.settings.delete.account.subheader'])}</p>
+        <p>
+          {intl.formatMessage(
+            messages['account.settings.delete.account.text.1'],
+            { siteName: getConfig().SITE_NAME },
+          )}
+        </p>
+        <p>
+          {intl.formatMessage(
+            messages[deleteAccountText2MessageKey],
+            { siteName: getConfig().SITE_NAME },
+          )}
+        </p>
+        <p>
+          <PrintingInstructions />
+        </p>
+        <p className="text-danger h6">
+          {intl.formatMessage(
+            messages['account.settings.delete.account.text.warning'],
+            { siteName: getConfig().SITE_NAME },
+          )}
+        </p>
+        <p>
+          <Hyperlink destination="https://support.edx.org/hc/en-us/sections/115004139268-Manage-Your-Account-Settings">
+            {intl.formatMessage(messages['account.settings.delete.account.text.change.instead'])}
+          </Hyperlink>
+        </p>
+        <p>
+          <Button
+            variant="outline-danger"
+            onClick={canDelete ? this.props.deleteAccountConfirmation : null}
+            disabled={!canDelete}
+          >
+            {intl.formatMessage(messages['account.settings.delete.account.button'])}
+          </Button>
+        </p>

-              <ConnectedConfirmationModal
-                status={status}
-                errorType={errorType}
-                onSubmit={this.handleSubmit}
-                onCancel={this.handleCancel}
-                onChange={this.handlePasswordChange}
-                password={this.state.password}
-              />
+        {isVerifiedAccount ? null : (
+          <BeforeProceedingBanner
+            instructionMessageId={optInInstructionMessageId}
+            supportArticleUrl="https://support.edx.org/hc/en-us/articles/115000940568-How-do-I-confirm-my-email-"
+          />
+        )}

-              <ConnectedSuccessModal status={status} onClose={this.handleFinalClose} />
-            </>
-          ) : (
-            <p>{intl.formatMessage(messages['account.settings.cannot.delete.account.text'])}</p>
-          )
-        }
+        {hasLinkedTPA ? (
+          <BeforeProceedingBanner
+            instructionMessageId="account.settings.delete.account.please.unlink"
+            supportArticleUrl={supportArticleUrl}
+          />
+        ) : null}

+        <ConnectedConfirmationModal
+          status={status}
+          errorType={errorType}
+          onSubmit={this.handleSubmit}
+          onCancel={this.handleCancel}
+          onChange={this.handlePasswordChange}
+          password={this.state.password}
+        />
+
+        <ConnectedSuccessModal status={status} onClose={this.handleFinalClose} />
      </div>
    );
  }
@@ -159,7 +152,6 @@ DeleteAccount.propTypes = {
  errorType: PropTypes.oneOf(['empty-password', 'server']),
  hasLinkedTPA: PropTypes.bool,
  isVerifiedAccount: PropTypes.bool,
-  canDeleteAccount: PropTypes.bool,
  intl: intlShape.isRequired,
 };

@@ -168,7 +160,6 @@ DeleteAccount.defaultProps = {
  isVerifiedAccount: true,
  status: null,
  errorType: null,
-  canDeleteAccount: true,
 };

 // Assume we're part of the accountSettings state.
--- a/src/account-settings/delete-account/PrintingInstructions.jsx
+++ b/src/account-settings/delete-account/PrintingInstructions.jsx
@@ -1,19 +1,19 @@
-import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import React from 'react';
+import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Hyperlink } from '@openedx/paragon';

 import { getConfig } from '@edx/frontend-platform';
 import messages from './messages';

-const PrintingInstructions = () => {
-  const intl = useIntl();
+const PrintingInstructions = (props) => {
  const actionLink = (
    <Hyperlink
      // TODO: What would a generic version of this link look like?  Should
      // CERTIFICATE_SHARING_HELP_URL really be a configuration variable?  In the meantime,
      // We've removed the link from the default message.
-      destination="https://help.edx.org/edxlearner/s/topic/0TOQq0000001UVVOA2/certificates"
+      destination="https://support.edx.org/hc/en-us/sections/115004173027-Receive-and-Share-edX-Certificates"
    >
-      {intl.formatMessage(messages['account.settings.delete.account.text.3.link'])}
+      {props.intl.formatMessage(messages['account.settings.delete.account.text.3.link'])}
    </Hyperlink>
  );

@@ -40,4 +40,8 @@ const PrintingInstructions = () => {
  );
 };

-export default PrintingInstructions;
+PrintingInstructions.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(PrintingInstructions);
--- a/src/account-settings/delete-account/SuccessModal.jsx
+++ b/src/account-settings/delete-account/SuccessModal.jsx
@@ -1,12 +1,12 @@
+import React from 'react';
 import PropTypes from 'prop-types';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { ModalLayer, ModalCloseButton } from '@openedx/paragon';

 import messages from './messages';

 export const SuccessModal = (props) => {
-  const intl = useIntl();
-  const { status, onClose } = props;
+  const { status, intl, onClose } = props;
  return (

    <ModalLayer isOpen={status === 'deleted'} onClose={onClose}>
@@ -20,7 +20,7 @@ export const SuccessModal = (props) => {
          </p>
        </div>
        <p>
-          <ModalCloseButton className="float-right" variant="link">{intl.formatMessage(messages['account.settings.delete.account.modal.after.button'])}</ModalCloseButton>
+          <ModalCloseButton className="float-right" variant="link">Close</ModalCloseButton>
        </p>
      </div>

@@ -31,6 +31,7 @@ export const SuccessModal = (props) => {

 SuccessModal.propTypes = {
  status: PropTypes.oneOf(['confirming', 'pending', 'deleted', 'failed']),
+  intl: intlShape.isRequired,
  onClose: PropTypes.func.isRequired,
 };

@@ -38,4 +39,4 @@ SuccessModal.defaultProps = {
  status: null,
 };

-export default SuccessModal;
+export default injectIntl(SuccessModal);
--- a/src/account-settings/delete-account/SuccessModal.test.jsx
+++ b/src/account-settings/delete-account/SuccessModal.test.jsx
@@ -1,13 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
 import renderer from 'react-test-renderer';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { waitFor } from '@testing-library/react';
-import { SuccessModal } from './SuccessModal';
+import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';

-// Modal creates a portal.  Overriding createPortal allows portals to be tested in jest.
-jest.mock('react-dom', () => ({
-  ...jest.requireActual('react-dom'),
-  createPortal: jest.fn(node => node), // Mock portal behavior
-}));
+// Modal creates a portal.  Overriding ReactDOM.createPortal allows portals to be tested in jest.
+ReactDOM.createPortal = node => node;
+
+import { SuccessModal } from './SuccessModal'; // eslint-disable-line import/first
+
+const IntlSuccessModal = injectIntl(SuccessModal);

 describe('SuccessModal', () => {
  let props = {};
@@ -19,40 +20,39 @@ describe('SuccessModal', () => {
    };
  });

-  it('should match default closed success modal snapshot', async () => {
-    await waitFor(() => {
-      const tree = renderer.create((
-        <IntlProvider locale="en"><SuccessModal {...props} /></IntlProvider>)).toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-    await waitFor(() => {
-      const tree = renderer.create((
-        <IntlProvider locale="en"><SuccessModal {...props} status="confirming" /></IntlProvider>)).toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-    await waitFor(() => {
-      const tree = renderer.create((
-        <IntlProvider locale="en"><SuccessModal {...props} status="pending" /></IntlProvider>)).toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-    await waitFor(() => {
-      const tree = renderer.create((
-        <IntlProvider locale="en"><SuccessModal {...props} status="failed" /></IntlProvider>)).toJSON();
-      expect(tree).toMatchSnapshot();
-    });
+  it('should match default closed success modal snapshot', () => {
+    let tree = renderer.create((
+      <IntlProvider locale="en"><IntlSuccessModal {...props} /></IntlProvider>))
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+
+    tree = renderer.create((
+      <IntlProvider locale="en"><IntlSuccessModal {...props} status="confirming" /></IntlProvider>))
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+
+    tree = renderer.create((
+      <IntlProvider locale="en"><IntlSuccessModal {...props} status="pending" /></IntlProvider>))
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+
+    tree = renderer.create((
+      <IntlProvider locale="en"><IntlSuccessModal {...props} status="failed" /></IntlProvider>))
+      .toJSON();
+    expect(tree).toMatchSnapshot();
  });

-  it('should match open success modal snapshot', async () => {
-    await waitFor(() => {
-      const tree = renderer.create(
+  it('should match open success modal snapshot', () => {
+    const tree = renderer
+      .create((
        <IntlProvider locale="en">
-          <SuccessModal
+          <IntlSuccessModal
            {...props}
-            status="deleted"
+            status="deleted" // This will cause 'modal-backdrop' and 'show' to appear on the modal as CSS classes.
          />
-        </IntlProvider>,
-      ).toJSON();
-      expect(tree).toMatchSnapshot();
-    });
+        </IntlProvider>
+      ))
+      .toJSON();
+    expect(tree).toMatchSnapshot();
  });
 });
--- a/src/account-settings/delete-account/snapshots/BeforeProceedingBanner.test.jsx.snap
+++ b/src/account-settings/delete-account/snapshots/BeforeProceedingBanner.test.jsx.snap
@@ -7,17 +7,17 @@ exports[`BeforeProceedingBanner should match the snapshot if SUPPORT_URL_TO_UNLI
  <div>
    <svg
      aria-hidden="true"
-      className="svg-inline--fa fa-triangle-exclamation mr-2"
-      data-icon="triangle-exclamation"
+      className="svg-inline--fa fa-exclamation-triangle fa-w-18 mr-2"
+      data-icon="exclamation-triangle"
      data-prefix="fas"
      focusable="false"
      role="img"
      style={{}}
-      viewBox="0 0 512 512"
+      viewBox="0 0 576 512"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
-        d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"
+        d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
        fill="currentColor"
        style={{}}
      />
@@ -36,17 +36,17 @@ exports[`BeforeProceedingBanner should match the snapshot when SUPPORT_URL_TO_UN
  <div>
    <svg
      aria-hidden="true"
-      className="svg-inline--fa fa-triangle-exclamation mr-2"
-      data-icon="triangle-exclamation"
+      className="svg-inline--fa fa-exclamation-triangle fa-w-18 mr-2"
+      data-icon="exclamation-triangle"
      data-prefix="fas"
      focusable="false"
      role="img"
      style={{}}
-      viewBox="0 0 512 512"
+      viewBox="0 0 576 512"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
-        d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"
+        d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
        fill="currentColor"
        style={{}}
      />
@@ -57,6 +57,7 @@ exports[`BeforeProceedingBanner should match the snapshot when SUPPORT_URL_TO_UN
    <a
      className="pgn__hyperlink default-link standalone-link"
      href="http://test-support.edx"
+      onClick={[Function]}
      target="_self"
    >
      unlink all social media accounts
--- a/src/account-settings/delete-account/snapshots/ConfirmationModal.test.jsx.snap
+++ b/src/account-settings/delete-account/snapshots/ConfirmationModal.test.jsx.snap
@@ -41,7 +41,7 @@ exports[`ConfirmationModal should match empty password confirmation modal snapsh
      />
      <div
        aria-label="Are you sure?"
-        className="pgn__modal pgn__modal-md pgn__modal-default pgn__modal-visible-overflow pgn__alert-modal"
+        className="pgn__modal pgn__modal-md pgn__modal-default pgn__alert-modal"
        role="dialog"
      >
        <div
@@ -69,8 +69,8 @@ exports[`ConfirmationModal should match empty password confirmation modal snapsh
                <div>
                  <svg
                    aria-hidden="true"
-                    className="svg-inline--fa fa-circle-exclamation mr-2"
-                    data-icon="circle-exclamation"
+                    className="svg-inline--fa fa-exclamation-circle fa-w-16 mr-2"
+                    data-icon="exclamation-circle"
                    data-prefix="fas"
                    focusable="false"
                    role="img"
@@ -79,7 +79,7 @@ exports[`ConfirmationModal should match empty password confirmation modal snapsh
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
-                      d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"
+                      d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
                      fill="currentColor"
                      style={{}}
                    />
@@ -102,17 +102,17 @@ exports[`ConfirmationModal should match empty password confirmation modal snapsh
                <div>
                  <svg
                    aria-hidden="true"
-                    className="svg-inline--fa fa-triangle-exclamation mr-2"
-                    data-icon="triangle-exclamation"
+                    className="svg-inline--fa fa-exclamation-triangle fa-w-18 mr-2"
+                    data-icon="exclamation-triangle"
                    data-prefix="fas"
                    focusable="false"
                    role="img"
                    style={{}}
-                    viewBox="0 0 512 512"
+                    viewBox="0 0 576 512"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
-                      d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"
+                      d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
                      fill="currentColor"
                      style={{}}
                    />
@@ -131,57 +131,30 @@ exports[`ConfirmationModal should match empty password confirmation modal snapsh
                </div>
              </div>
              <div
-                className="pgn__form-group"
-                for="passwordFieldId"
+                className="form-group"
+                data-testid="validation-form-group"
              >
                <label
-                  className="pgn__form-label d-block"
-                  htmlFor="form-field3"
+                  className="d-block"
+                  htmlFor="passwordFieldId"
                >
                  If you still wish to continue and delete your account, please enter your account password:
                </label>
-                <div
-                  className="pgn__form-control-decorator-group"
+                <input
+                  aria-describedby="passwordFieldId-invalid-feedback"
+                  className="form-control is-invalid"
+                  id="passwordFieldId"
+                  name="password"
+                  onChange={[MockFunction]}
+                  type="password"
+                  value="fluffy bunnies"
+                />
+                <strong
+                  className="invalid-feedback"
+                  id="passwordFieldId-invalid-feedback"
                >
-                  <input
-                    aria-describedby="form-field3-5"
-                    className="has-value form-control is-invalid"
-                    id="form-field3"
-                    name="password"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    type="password"
-                    value="fluffy bunnies"
-                  />
-                </div>
-                <div
-                  className="pgn__form-control-description pgn__form-text pgn__form-text-invalid"
-                  feedback-for="passwordFieldId"
-                  id="form-field3-5"
-                >
-                  <span
-                    className="pgn__icon"
-                  >
-                    <svg
-                      aria-hidden={true}
-                      fill="none"
-                      focusable={false}
-                      height={24}
-                      role="img"
-                      viewBox="0 0 24 24"
-                      width={24}
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"
-                        fill="currentColor"
-                      />
-                    </svg>
-                  </span>
-                  <div>
-                    A password is required
-                  </div>
-                </div>
+                  A password is required
+                </strong>
              </div>
            </div>
          </div>
@@ -269,7 +242,7 @@ exports[`ConfirmationModal should match open confirmation modal snapshot 1`] = `
      />
      <div
        aria-label="Are you sure?"
-        className="pgn__modal pgn__modal-md pgn__modal-default pgn__modal-visible-overflow pgn__alert-modal"
+        className="pgn__modal pgn__modal-md pgn__modal-default pgn__alert-modal"
        role="dialog"
      >
        <div
@@ -297,17 +270,17 @@ exports[`ConfirmationModal should match open confirmation modal snapshot 1`] = `
                <div>
                  <svg
                    aria-hidden="true"
-                    className="svg-inline--fa fa-triangle-exclamation mr-2"
-                    data-icon="triangle-exclamation"
+                    className="svg-inline--fa fa-exclamation-triangle fa-w-18 mr-2"
+                    data-icon="exclamation-triangle"
                    data-prefix="fas"
                    focusable="false"
                    role="img"
                    style={{}}
-                    viewBox="0 0 512 512"
+                    viewBox="0 0 576 512"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
-                      d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"
+                      d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
                      fill="currentColor"
                      style={{}}
                    />
@@ -326,28 +299,30 @@ exports[`ConfirmationModal should match open confirmation modal snapshot 1`] = `
                </div>
              </div>
              <div
-                className="pgn__form-group"
-                for="passwordFieldId"
+                className="form-group"
+                data-testid="validation-form-group"
              >
                <label
-                  className="pgn__form-label d-block"
-                  htmlFor="form-field1"
+                  className="d-block"
+                  htmlFor="passwordFieldId"
                >
                  If you still wish to continue and delete your account, please enter your account password:
                </label>
-                <div
-                  className="pgn__form-control-decorator-group"
+                <input
+                  aria-describedby=""
+                  className="form-control"
+                  id="passwordFieldId"
+                  name="password"
+                  onChange={[MockFunction]}
+                  type="password"
+                  value="fluffy bunnies"
+                />
+                <strong
+                  className="invalid-feedback"
+                  id="passwordFieldId-invalid-feedback"
                >
-                  <input
-                    className="has-value form-control"
-                    id="form-field1"
-                    name="password"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    type="password"
-                    value="fluffy bunnies"
-                  />
-                </div>
+                  Unable to delete account
+                </strong>
              </div>
            </div>
          </div>
--- a/src/account-settings/delete-account/snapshots/DeleteAccount.test.jsx.snap
+++ b/src/account-settings/delete-account/snapshots/DeleteAccount.test.jsx.snap
@@ -27,7 +27,8 @@ exports[`DeleteAccount should match default section snapshot 1`] = `
  <p>
    <a
      className="pgn__hyperlink default-link standalone-link"
-      href="https://help.edx.org/edxlearner/s/topic/0TOQq0000001UdZOAU/account-basics"
+      href="https://support.edx.org/hc/en-us/sections/115004139268-Manage-Your-Account-Settings"
+      onClick={[Function]}
      target="_self"
    >
      Want to change your email, name, or password instead?
@@ -73,7 +74,8 @@ exports[`DeleteAccount should match unverified account section snapshot 1`] = `
  <p>
    <a
      className="pgn__hyperlink default-link standalone-link"
-      href="https://help.edx.org/edxlearner/s/topic/0TOQq0000001UdZOAU/account-basics"
+      href="https://support.edx.org/hc/en-us/sections/115004139268-Manage-Your-Account-Settings"
+      onClick={[Function]}
      target="_self"
    >
      Want to change your email, name, or password instead?
@@ -95,17 +97,17 @@ exports[`DeleteAccount should match unverified account section snapshot 1`] = `
    <div>
      <svg
        aria-hidden="true"
-        className="svg-inline--fa fa-triangle-exclamation mr-2"
-        data-icon="triangle-exclamation"
+        className="svg-inline--fa fa-exclamation-triangle fa-w-18 mr-2"
+        data-icon="exclamation-triangle"
        data-prefix="fas"
        focusable="false"
        role="img"
        style={{}}
-        viewBox="0 0 512 512"
+        viewBox="0 0 576 512"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
-          d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"
+          d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
          fill="currentColor"
          style={{}}
        />
@@ -115,7 +117,8 @@ exports[`DeleteAccount should match unverified account section snapshot 1`] = `
      Before proceeding, please 
      <a
        className="pgn__hyperlink default-link standalone-link"
-        href="https://support.edx.org/hc/en-us/articles/115000940568-How-do-I-confirm-my-email"
+        href="https://support.edx.org/hc/en-us/articles/115000940568-How-do-I-confirm-my-email-"
+        onClick={[Function]}
        target="_self"
      >
        activate your account
@@ -153,7 +156,8 @@ exports[`DeleteAccount should match unverified account section snapshot 2`] = `
  <p>
    <a
      className="pgn__hyperlink default-link standalone-link"
-      href="https://help.edx.org/edxlearner/s/topic/0TOQq0000001UdZOAU/account-basics"
+      href="https://support.edx.org/hc/en-us/sections/115004139268-Manage-Your-Account-Settings"
+      onClick={[Function]}
      target="_self"
    >
      Want to change your email, name, or password instead?
@@ -175,17 +179,17 @@ exports[`DeleteAccount should match unverified account section snapshot 2`] = `
    <div>
      <svg
        aria-hidden="true"
-        className="svg-inline--fa fa-triangle-exclamation mr-2"
-        data-icon="triangle-exclamation"
+        className="svg-inline--fa fa-exclamation-triangle fa-w-18 mr-2"
+        data-icon="exclamation-triangle"
        data-prefix="fas"
        focusable="false"
        role="img"
        style={{}}
-        viewBox="0 0 512 512"
+        viewBox="0 0 576 512"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
-          d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"
+          d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
          fill="currentColor"
          style={{}}
        />
@@ -195,7 +199,8 @@ exports[`DeleteAccount should match unverified account section snapshot 2`] = `
      Before proceeding, please 
      <a
        className="pgn__hyperlink default-link standalone-link"
-        href="https://help.edx.org/edxlearner/s/article/How-do-I-link-or-unlink-my-edX-account-to-a-social-media-account"
+        href="https://support.edx.org/hc/en-us/articles/207206067"
+        onClick={[Function]}
        target="_self"
      >
        unlink all social media accounts
--- a/src/account-settings/delete-account/data/service.test.js
+++ b/src/account-settings/delete-account/data/service.test.js
@@ -1,65 +0,0 @@
-import { getConfig } from '@edx/frontend-platform';
-import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import formurlencoded from 'form-urlencoded';
-import { handleRequestError } from '../../data/utils';
-
-import { postDeleteAccount } from './service';
-
-jest.mock('@edx/frontend-platform');
-jest.mock('@edx/frontend-platform/auth');
-jest.mock('form-urlencoded');
-jest.mock('../../data/utils');
-
-describe('postDeleteAccount', () => {
-  const mockPost = jest.fn();
-
-  beforeEach(() => {
-    jest.resetAllMocks();
-
-    getConfig.mockReturnValue({
-      LMS_BASE_URL: 'http://testserver',
-    });
-
-    getAuthenticatedHttpClient.mockReturnValue({
-      post: mockPost,
-    });
-
-    formurlencoded.mockImplementation(obj => `encoded:${JSON.stringify(obj)}`);
-  });
-
-  it('posts delete account request with password', async () => {
-    const mockResponse = { data: { success: true } };
-    mockPost.mockResolvedValueOnce(mockResponse);
-
-    const result = await postDeleteAccount('mypassword');
-
-    expect(getConfig).toHaveBeenCalled();
-    expect(getAuthenticatedHttpClient).toHaveBeenCalled();
-    expect(formurlencoded).toHaveBeenCalledWith({ password: 'mypassword' });
-
-    expect(mockPost).toHaveBeenCalledWith(
-      'http://testserver/api/user/v1/accounts/deactivate_logout/',
-      'encoded:{"password":"mypassword"}',
-      {
-        headers: {
-          'Content-Type': 'application/x-www-form-urlencoded',
-        },
-      },
-    );
-
-    expect(result).toEqual(mockResponse.data);
-  });
-
-  it('calls handleRequestError and throws when request fails', async () => {
-    const mockError = new Error('Request failed');
-    mockPost.mockRejectedValueOnce(mockError);
-
-    handleRequestError.mockImplementation(() => {
-      throw mockError;
-    });
-
-    await expect(postDeleteAccount('wrongpassword')).rejects.toThrow('Request failed');
-
-    expect(handleRequestError).toHaveBeenCalledWith(mockError);
-  });
-});
--- a/src/account-settings/delete-account/messages.js
+++ b/src/account-settings/delete-account/messages.js
@@ -1,11 +1,6 @@
 import { defineMessages } from '@edx/frontend-platform/i18n';

 const messages = defineMessages({
-  'account.settings.cannot.delete.account.text': {
-    id: 'account.settings.cannot.delete.account.text',
-    defaultMessage: 'Please note that, for legal and regulatory compliance purposes, account deletion is currently unavailable.',
-    description: 'This text is visible when user is not allowed to delete account',
-  },
  'account.settings.delete.account.header': {
    id: 'account.settings.delete.account.header',
    defaultMessage: 'Delete My Account',
--- a/src/account-settings/demographics/Checkboxes.jsx
+++ b/src/account-settings/demographics/Checkboxes.jsx
@@ -0,0 +1,80 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Form } from '@openedx/paragon';
+import { DECLINED } from '../data/constants';
+
+const Checkboxes = (props) => {
+  const {
+    id,
+    options,
+    values,
+    onChange,
+  } = props;
+
+  const [selected, setSelected] = useState(values);
+  useEffect(() => {
+    onChange(id, selected);
+  }, [id, onChange, selected]);
+
+  const handleToggle = (value, option) => {
+    // If the user checked 'declined', uncheck all other options
+    if (value && option === DECLINED) {
+      setSelected([DECLINED]);
+      return;
+    }
+
+    // If option checked, make sure this option is in `selected` (and remove 'declined')
+    if (value && !selected.includes(option)) {
+      const newSelected = selected.filter(i => i !== DECLINED).concat(option);
+      setSelected(newSelected);
+    }
+
+    // If unchecked, make sure this option is NOT in `selected`
+    if (!value) {
+      setSelected(selected.filter(i => i !== option));
+    }
+  };
+
+  const renderCheckboxes = () => options.map((option, index) => {
+    const isFirst = index === 0;
+    const isChecked = selected.includes(option.value);
+    return (
+      <div key={option.value} className="checkboxOption">
+        <Form.Checkbox
+          type="checkbox"
+          id={option.value}
+          name={option.value}
+          value={option.value}
+          checked={isChecked}
+          autoFocus={isFirst}
+          onChange={(event) => handleToggle(event.target.checked, option.value)}
+        >
+          {option.label}
+        </Form.Checkbox>
+      </div>
+    );
+  });
+
+  return (
+    <div role="group">
+      {renderCheckboxes()}
+    </div>
+  );
+};
+
+Checkboxes.propTypes = {
+  id: PropTypes.string.isRequired,
+  options: PropTypes.arrayOf(PropTypes.shape({
+    value: PropTypes.string,
+    label: PropTypes.string,
+  })),
+  values: PropTypes.arrayOf(PropTypes.string),
+  onChange: PropTypes.func.isRequired,
+};
+
+Checkboxes.defaultProps = {
+  options: [],
+  values: [],
+};
+
+export default Checkboxes;
--- a/src/account-settings/demographics/DemographicsSection.jsx
+++ b/src/account-settings/demographics/DemographicsSection.jsx
@@ -0,0 +1,357 @@
+import { getConfig } from '@edx/frontend-platform';
+import {
+  FormattedMessage,
+  injectIntl,
+  intlShape,
+} from '@edx/frontend-platform/i18n';
+
+import { Hyperlink, Form } from '@openedx/paragon';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { connect } from 'react-redux';
+import get from 'lodash.get';
+import isEmpty from 'lodash.isempty';
+import memoize from 'memoize-one';
+import { demographicsSectionSelector } from '../data/selectors';
+import EditableSelectField from '../EditableSelectField';
+import Checkboxes from './Checkboxes';
+import Alert from '../Alert';
+import { saveMultipleSettings, updateDraft } from '../data/actions';
+import {
+  OTHER,
+  SELF_DESCRIBE,
+} from '../data/constants';
+import messages from './DemographicsSection.messages';
+
+class DemographicsSection extends React.Component {
+  // We check the `demographicsOptions` prop to see if it is empty before we attempt to extract and
+  // format the available options for each question from the API response.
+  getApiOptions = memoize((demographicsOptions) => (this.hasRetrievedDemographicsOptions() && {
+    demographicsGenderOptions: this.addDefaultOption('account.settings.field.demographics.gender.options.empty')
+      .concat(demographicsOptions.actions.POST.gender.choices.map(key => ({
+        value: key.value,
+        label: key.display_name,
+      }))),
+    /* Ethnicity options don't need the blank/default option */
+    demographicsEthnicityOptions: demographicsOptions.actions.POST.user_ethnicity.child.children.ethnicity.choices.map(
+      key => ({
+        value: key.value,
+        label: key.display_name,
+      }),
+    ),
+    demographicsIncomeOptions: this.addDefaultOption('account.settings.field.demographics.income.options.empty')
+      .concat(demographicsOptions.actions.POST.income.choices.map(key => ({
+        value: key.value,
+        label: key.display_name,
+      }))),
+    demographicsMilitaryHistoryOptions: this.addDefaultOption('account.settings.field.demographics.military_history.options.empty')
+      .concat(demographicsOptions.actions.POST.military_history.choices.map(key => ({
+        value: key.value,
+        label: key.display_name,
+      }))),
+    demographicsEducationLevelOptions: this.addDefaultOption('account.settings.field.demographics.education_level.options.empty')
+      .concat(demographicsOptions.actions.POST.learner_education_level.choices.map(key => ({
+        value: key.value,
+        label: key.display_name,
+      }))),
+    demographicsWorkStatusOptions: this.addDefaultOption('account.settings.field.demographics.work_status.options.empty')
+      .concat(demographicsOptions.actions.POST.work_status.choices.map(key => ({
+        value: key.value,
+        label: key.display_name,
+      }))),
+    demographicsWorkSectorOptions: this.addDefaultOption('account.settings.field.demographics.work_sector.options.empty')
+      .concat(demographicsOptions.actions.POST.current_work_sector.choices.map(key => ({
+        value: key.value,
+        label: key.display_name,
+      }))),
+  }));
+
+  ethnicityFieldDisplay = (demographicsEthnicityOptions) => {
+    let ethnicities = [];
+    if (get(this, 'props.formValues.demographics_user_ethnicity')) {
+      ethnicities = this.props.formValues.demographics_user_ethnicity;
+    }
+    return ethnicities.map((e) => {
+      const matchingOption = demographicsEthnicityOptions.filter(option => option.value === e)[0];
+      return matchingOption && matchingOption.label;
+    }).join(', ');
+  };
+
+  handleEditableFieldChange = (name, value) => {
+    this.props.updateDraft(name, value);
+  };
+
+  handleSubmit = (formId) => {
+    // We have some custom fields in this section. Instead of relying on the
+    // submitted values, submit the values stored in 'drafts'.
+    const { drafts } = this.props;
+    const settingsArray = Object.entries(drafts).map(([field, value]) => ({
+      formId: field,
+      commitValues: value,
+    }));
+
+    this.props.saveMultipleSettings(settingsArray, formId);
+  };
+
+  /**
+   * Utility method that adds the specified message as a default option to the list of available
+   * choices.
+   *
+   * @param {*} messageId id of message matching desired default label text
+   */
+  addDefaultOption(messageId) {
+    return [{
+      value: '',
+      label: this.props.intl.formatMessage(messages[messageId]),
+    }];
+  }
+
+  /**
+   * Utility method that helps determine if we were able to retrieve the available options for
+   * the Demographics questions. Returns true if the `demographicsOptions` prop is _not_ empty,
+   * otherwise false. This prop being empty is indicative of a failure communicating with the
+   * Demographics IDA's API.
+   */
+  hasRetrievedDemographicsOptions() {
+    return !isEmpty(this.props.formValues.demographicsOptions);
+  }
+
+  /**
+   * If an error is encountered when trying to communicate with the Demographics IDA then we will
+   * display an Alert letting the user know that their info will not be displayed and temporarily
+   * cannot be updated.
+   */
+  renderDemographicsServiceIssueWarning() {
+    if (!isEmpty(this.props.formErrors.demographicsError)
+        || !this.hasRetrievedDemographicsOptions()) {
+      return (
+        <div
+          tabIndex="-1"
+          ref={this.alertRef}
+        >
+          <Alert className="alert alert-danger" role="alert">
+            <FormattedMessage
+              id="account.settings.message.demographics.service.issue"
+              defaultMessage="An error occurred attempting to retrieve or save your account information. Please try again later."
+              description="alert message informing the user that the there is a problem retrieving or updating information from the Demographics microservice"
+            />
+          </Alert>
+        </div>
+      );
+    }
+    return null;
+  }
+
+  render() {
+    const editableFieldProps = {
+      onChange: this.handleEditableFieldChange,
+      onSubmit: this.handleSubmit,
+    };
+
+    const {
+      demographicsGenderOptions,
+      demographicsEthnicityOptions,
+      demographicsIncomeOptions,
+      demographicsMilitaryHistoryOptions,
+      demographicsEducationLevelOptions,
+      demographicsWorkStatusOptions,
+      demographicsWorkSectorOptions,
+    } = this.getApiOptions(this.props.formValues.demographicsOptions);
+
+    const showSelfDescribe = this.props.formValues.demographics_gender === SELF_DESCRIBE;
+    const showWorkStatusDescribe = this.props.formValues.demographics_work_status === OTHER;
+
+    return (
+      <div className="account-section pt-3 mb-5" id="demographics-information" ref={this.props.forwardRef}>
+        <h2 className="section-heading h4 mb-3">
+          {this.props.intl.formatMessage(messages['account.settings.section.demographics.information'])}
+        </h2>
+        <p>
+          <Hyperlink
+            destination={`${getConfig().MARKETING_SITE_BASE_URL}/demographics`}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {this.props.intl.formatMessage(
+              messages['account.settings.section.demographics.why'],
+              {
+                siteName: getConfig().SITE_NAME,
+              },
+            )}
+          </Hyperlink>
+        </p>
+        {this.renderDemographicsServiceIssueWarning()}
+        {/*
+          If the demographicsOptions props are empty then there is no need to display the fields as
+          the user will not have any choices available to select, nor will they be able to update
+          their answers.
+        */}
+        {this.hasRetrievedDemographicsOptions() && (
+          <div id="demographics-fields">
+            <EditableSelectField
+              name="demographics_gender"
+              type="select"
+              value={this.props.formValues.demographics_gender}
+              userSuppliedValue={showSelfDescribe ? this.props.formValues.demographics_gender_description : null}
+              options={demographicsGenderOptions}
+              label={this.props.intl.formatMessage(messages['account.settings.field.demographics.gender'])}
+              emptyLabel={this.props.intl.formatMessage(messages['account.settings.field.demographics.gender.empty'])}
+              {...editableFieldProps}
+            >
+              {showSelfDescribe && (
+                <Form.Control
+                  name="demographics_gender_description"
+                  id="field-demographics_gender_description"
+                  type="text"
+                  placeholder={this.props.intl.formatMessage(messages['account.settings.field.demographics.gender_description.empty'])}
+                  value={this.props.formValues.demographics_gender_description}
+                  onChange={(e) => this.handleEditableFieldChange('demographics_gender_description', e.target.value)}
+                  aria-label={this.props.intl.formatMessage(messages['account.settings.field.demographics.gender_description'])}
+                  className="mt-1"
+                />
+              )}
+            </EditableSelectField>
+            <EditableSelectField
+              name="demographics_user_ethnicity"
+              type="select"
+              hidden
+              value={this.ethnicityFieldDisplay(demographicsEthnicityOptions)}
+              label={this.props.intl.formatMessage(messages['account.settings.field.demographics.ethnicity'])}
+              emptyLabel={this.props.intl.formatMessage(messages['account.settings.field.demographics.ethnicity.empty'])}
+              {...editableFieldProps}
+            >
+              <Checkboxes
+                id="demographics_user_ethnicity"
+                options={demographicsEthnicityOptions}
+                values={this.props.formValues.demographics_user_ethnicity}
+                {...editableFieldProps}
+              />
+            </EditableSelectField>
+            <EditableSelectField
+              name="demographics_income"
+              type="select"
+              value={this.props.formValues.demographics_income}
+              options={demographicsIncomeOptions}
+              label={this.props.intl.formatMessage(messages['account.settings.field.demographics.income'])}
+              emptyLabel={this.props.intl.formatMessage(messages['account.settings.field.demographics.income.empty'])}
+              {...editableFieldProps}
+            />
+            <EditableSelectField
+              name="demographics_military_history"
+              type="select"
+              value={this.props.formValues.demographics_military_history}
+              options={demographicsMilitaryHistoryOptions}
+              label={this.props.intl.formatMessage(messages['account.settings.field.demographics.military_history'])}
+              emptyLabel={this.props.intl.formatMessage(messages['account.settings.field.demographics.military_history.empty'])}
+              {...editableFieldProps}
+            />
+            <EditableSelectField
+              name="demographics_learner_education_level"
+              type="select"
+              value={this.props.formValues.demographics_learner_education_level}
+              options={demographicsEducationLevelOptions}
+              label={this.props.intl.formatMessage(messages['account.settings.field.demographics.learner_education_level'])}
+              emptyLabel={this.props.intl.formatMessage(messages['account.settings.field.demographics.learner_education_level.empty'])}
+              {...editableFieldProps}
+            />
+            <EditableSelectField
+              name="demographics_parent_education_level"
+              type="select"
+              value={this.props.formValues.demographics_parent_education_level}
+              options={demographicsEducationLevelOptions}
+              label={this.props.intl.formatMessage(messages['account.settings.field.demographics.parent_education_level'])}
+              emptyLabel={this.props.intl.formatMessage(messages['account.settings.field.demographics.parent_education_level.empty'])}
+              {...editableFieldProps}
+            />
+            <EditableSelectField
+              name="demographics_work_status"
+              type="select"
+              value={this.props.formValues.demographics_work_status}
+              userSuppliedValue={showWorkStatusDescribe
+                ? this.props.formValues.demographics_work_status_description
+                : null}
+              options={demographicsWorkStatusOptions}
+              label={this.props.intl.formatMessage(messages['account.settings.field.demographics.work_status'])}
+              emptyLabel={this.props.intl.formatMessage(messages['account.settings.field.demographics.work_status.empty'])}
+              {...editableFieldProps}
+            >
+              {showWorkStatusDescribe && (
+                <Form.Control
+                  name="demographics_work_status_description"
+                  id="field-demographics_work_status_description"
+                  type="text"
+                  placeholder={this.props.intl.formatMessage(messages['account.settings.field.demographics.work_status_description.empty'])}
+                  value={this.props.formValues.demographics_work_status_description}
+                  onChange={(e) => this.handleEditableFieldChange('demographics_work_status_description', e.target.value)}
+                  aria-label={this.props.intl.formatMessage(messages['account.settings.field.demographics.work_status_description'])}
+                  className="mt-1"
+                />
+              )}
+            </EditableSelectField>
+            <EditableSelectField
+              name="demographics_current_work_sector"
+              type="select"
+              value={this.props.formValues.demographics_current_work_sector}
+              options={demographicsWorkSectorOptions}
+              label={this.props.intl.formatMessage(messages['account.settings.field.demographics.current_work_sector'])}
+              emptyLabel={this.props.intl.formatMessage(messages['account.settings.field.demographics.current_work_sector.empty'])}
+              {...editableFieldProps}
+            />
+            <EditableSelectField
+              name="demographics_future_work_sector"
+              type="select"
+              value={this.props.formValues.demographics_future_work_sector}
+              options={demographicsWorkSectorOptions}
+              label={this.props.intl.formatMessage(messages['account.settings.field.demographics.future_work_sector'])}
+              emptyLabel={this.props.intl.formatMessage(messages['account.settings.field.demographics.future_work_sector.empty'])}
+              {...editableFieldProps}
+            />
+          </div>
+        )}
+      </div>
+    );
+  }
+}
+
+DemographicsSection.propTypes = {
+  intl: intlShape.isRequired,
+  formValues: PropTypes.shape({
+    demographics_gender: PropTypes.string,
+    demographics_user_ethnicity: PropTypes.shape([]),
+    demographics_income: PropTypes.string,
+    demographics_military_history: PropTypes.string,
+    demographics_learner_education_level: PropTypes.string,
+    demographics_parent_education_level: PropTypes.string,
+    demographics_work_status: PropTypes.string,
+    demographics_current_work_sector: PropTypes.string,
+    demographics_future_work_sector: PropTypes.string,
+    demographics_work_status_description: PropTypes.string,
+    demographics_gender_description: PropTypes.string,
+    demographicsOptions: PropTypes.shape({}),
+  }).isRequired,
+  drafts: PropTypes.shape({
+    demographics_gender: PropTypes.string,
+    demographics_user_ethnicity: PropTypes.shape([]),
+    demographics_income: PropTypes.string,
+    demographics_military_history: PropTypes.string,
+    demographics_learner_education_level: PropTypes.string,
+    demographics_parent_education_level: PropTypes.string,
+    demographics_work_status: PropTypes.string,
+    demographics_current_work_sector: PropTypes.string,
+    demographics_future_work_sector: PropTypes.string,
+    demographics_work_status_description: PropTypes.string,
+    demographics_gender_description: PropTypes.string,
+    demographicsOptions: PropTypes.shape({}),
+  }).isRequired,
+  formErrors: PropTypes.shape({
+    demographicsError: PropTypes.string,
+  }).isRequired,
+  forwardRef: PropTypes.func.isRequired,
+  updateDraft: PropTypes.func.isRequired,
+  saveMultipleSettings: PropTypes.func.isRequired,
+};
+
+export default connect(demographicsSectionSelector, {
+  saveMultipleSettings,
+  updateDraft,
+})(injectIntl(DemographicsSection));
--- a/src/account-settings/demographics/DemographicsSection.messages.jsx
+++ b/src/account-settings/demographics/DemographicsSection.messages.jsx
@@ -0,0 +1,170 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  /* Demographics section heading */
+  'account.settings.section.demographics.information': {
+    id: 'account.settings.section.demographics.information',
+    defaultMessage: 'Optional Information',
+    description: 'The optional information section heading.',
+  },
+  /* Gender identity */
+  'account.settings.field.demographics.gender': {
+    id: 'account.settings.field.demographics.gender',
+    defaultMessage: 'Gender identity',
+    description: 'Label for account settings gender identity field.',
+  },
+  'account.settings.field.demographics.gender.empty': {
+    id: 'account.settings.field.demographics.gender.empty',
+    defaultMessage: 'Add gender identity',
+    description: 'Placeholder for empty account settings gender identity field.',
+  },
+  'account.settings.field.demographics.gender.options.empty': {
+    id: 'account.settings.field.demographics.gender.options.empty',
+    defaultMessage: 'Select a gender identity',
+    description: 'Placeholder for the gender identity options dropdown.',
+  },
+  'account.settings.field.demographics.gender_description': {
+    id: 'account.settings.field.demographics.gender_description',
+    defaultMessage: 'Gender identity description',
+    description: 'Label for account settings gender identity description field.',
+  },
+  'account.settings.field.demographics.gender_description.empty': {
+    id: 'account.settings.field.demographics.gender_description.empty',
+    defaultMessage: 'Enter description',
+    description: 'Placeholder for empty account settings gender identity field.',
+  },
+  /* Ethnicity */
+  'account.settings.field.demographics.ethnicity': {
+    id: 'account.settings.field.demographics.ethnicity',
+    defaultMessage: 'Race/Ethnicity identity',
+    description: 'Label for account settings ethnic background field.',
+  },
+  'account.settings.field.demographics.ethnicity.empty': {
+    id: 'account.settings.field.demographics.ethnicity.empty',
+    defaultMessage: 'Add race/ethnicity identity',
+    description: 'Placeholder for empty account settings ethnic background field.',
+  },
+  'account.settings.field.demographics.ethnicity.options.empty': {
+    id: 'account.settings.field.demographics.ethnicity.options.empty',
+    defaultMessage: 'Select all that apply', // TODO: Is this the desired text?
+    description: 'Placeholder for the ethnic background options field.',
+  },
+  /* Income */
+  'account.settings.field.demographics.income': {
+    id: 'account.settings.field.demographics.income',
+    defaultMessage: 'Family income',
+    description: 'Label for account settings household income field.',
+  },
+  'account.settings.field.demographics.income.empty': {
+    id: 'account.settings.field.demographics.income.empty',
+    defaultMessage: 'Add family income',
+    description: 'Placeholder for empty account settings household income field.',
+  },
+  'account.settings.field.demographics.income.options.empty': {
+    id: 'account.settings.field.demographics.income.options.empty',
+    defaultMessage: 'Select a family income range',
+    description: 'Placeholder for the household income dropdown.',
+  },
+  /* Military history */
+  'account.settings.field.demographics.military_history': {
+    id: 'account.settings.field.demographics.military_history',
+    defaultMessage: 'U.S. Military status',
+    description: 'Label for account settings military history field.',
+  },
+  'account.settings.field.demographics.military_history.empty': {
+    id: 'account.settings.field.demographics.military_history.empty',
+    defaultMessage: 'Add military status',
+    description: 'Placeholder for empty account settings military history field.',
+  },
+  'account.settings.field.demographics.military_history.options.empty': {
+    id: 'account.settings.field.demographics.military_history.options.empty',
+    defaultMessage: 'Select military status',
+    description: 'Placeholder for the military history dropdown.',
+  },
+  /* Learner and family education level */
+  'account.settings.field.demographics.learner_education_level': {
+    id: 'account.settings.field.demographics.learner_education_level',
+    defaultMessage: 'Your education level',
+    description: 'Label for account settings learner education level field.',
+  },
+  'account.settings.field.demographics.learner_education_level.empty': {
+    id: 'account.settings.field.demographics.learner_education_level.empty',
+    defaultMessage: 'Add education level',
+    description: 'Placeholder for empty account settings learner education level field.',
+  },
+  'account.settings.field.demographics.parent_education_level': {
+    id: 'account.settings.field.demographics.parent_education_level',
+    defaultMessage: 'Parents/Guardians education level',
+    description: 'Label for account settings parent education level field.',
+  },
+  'account.settings.field.demographics.parent_education_level.empty': {
+    id: 'account.settings.field.demographics.parent_education_level.empty',
+    defaultMessage: 'Add education level',
+    description: 'Placeholder for empty account settings parent education level field.',
+  },
+  'account.settings.field.demographics.education_level.options.empty': {
+    id: 'account.settings.field.demographics.education_level.options.empty',
+    defaultMessage: 'Select education level',
+    description: 'Placeholder for the education level options dropdown.',
+  },
+  /* Work status */
+  'account.settings.field.demographics.work_status': {
+    id: 'account.settings.field.demographics.work_status',
+    defaultMessage: 'Employment status',
+    description: 'Label for account settings work status field.',
+  },
+  'account.settings.field.demographics.work_status.empty': {
+    id: 'account.settings.field.demographics.work_status.empty',
+    defaultMessage: 'Add employment status',
+    description: 'Placeholder for empty account settings work status field.',
+  },
+  'account.settings.field.demographics.work_status.options.empty': {
+    id: 'account.settings.field.demographics.work_status.options.empty',
+    defaultMessage: 'Select employment status',
+    description: 'Placeholder for the work status options dropdown.',
+  },
+  'account.settings.field.demographics.work_status_description': {
+    id: 'account.settings.field.demographics.work_status_description',
+    defaultMessage: 'Employment status description',
+    description: 'Label for account settings work status description field.',
+  },
+  'account.settings.field.demographics.work_status_description.empty': {
+    id: 'account.settings.field.demographics.work_status_description.empty',
+    defaultMessage: 'Enter description',
+    description: 'Placeholder for empty account settings work status description field.',
+  },
+  /* Work sector */
+  'account.settings.field.demographics.current_work_sector': {
+    id: 'account.settings.field.demographics.current_work_sector',
+    defaultMessage: 'Current work industry',
+    description: 'Label for account settings current work sector field.',
+  },
+  'account.settings.field.demographics.current_work_sector.empty': {
+    id: 'account.settings.field.demographics.current_work_sector.empty',
+    defaultMessage: 'Add work industry',
+    description: 'Placeholder for empty account settings current work sector field.',
+  },
+  'account.settings.field.demographics.future_work_sector': {
+    id: 'account.settings.field.demographics.future_work_sector',
+    defaultMessage: 'Future work industry',
+    description: 'Label for account settings future work sector field.',
+  },
+  'account.settings.field.demographics.future_work_sector.empty': {
+    id: 'account.settings.field.demographics.future_work_sector.empty',
+    defaultMessage: 'Add work industry',
+    description: 'Placeholder for empty account settings future work sector field.',
+  },
+  'account.settings.field.demographics.work_sector.options.empty': {
+    id: 'account.settings.field.demographics.work_sector.options.empty',
+    defaultMessage: 'Select work industry',
+    description: 'Placeholder for the work sector options dropdown.',
+  },
+  /* Legal copy link text */
+  'account.settings.section.demographics.why': {
+    id: 'account.settings.section.demographics.why',
+    defaultMessage: 'Why does {siteName} collect this information?',
+    description: 'Link text for a link to external legal text',
+  },
+});
+
+export default messages;
--- a/src/account-settings/demographics/data/service.js
+++ b/src/account-settings/demographics/data/service.js
@@ -0,0 +1,140 @@
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { getConfig } from '@edx/frontend-platform';
+import get from 'lodash.get';
+import { convertData, TO, FROM } from './utils';
+
+/**
+ * Utility method that attempts to extract errors from the response of a PATCH request in order to
+ * display a warning or otherwise meaningful message to the user.
+ *
+ * @param {Error} error
+ */
+export function createDemographicsError(error) {
+  const apiError = Object.create(error);
+  // If the error received has the `httpResponseData` field in it, then we should have reason to
+  // believe the Demographics service is alive and responding. Extract errors from fields where
+  // appropriate so we can display them to the user.
+  if (get(error, 'customAttributes.httpErrorResponseData')) {
+    apiError.fieldErrors = JSON.parse(error.customAttributes.httpErrorResponseData);
+    if (get(apiError, 'fieldErrors.gender_description')) {
+      // eslint-disable-next-line prefer-destructuring
+      apiError.fieldErrors.demographics_gender = apiError.fieldErrors.gender_description[0];
+      delete apiError.fieldErrors.gender_description;
+    } else if (get(apiError, 'fieldErrors.work_status_description')) {
+      // eslint-disable-next-line prefer-destructuring
+      apiError.fieldErrors.demographics_work_status = apiError.fieldErrors.work_status_description[0];
+      delete apiError.fieldErrors.work_status_description;
+    }
+  // Otherwise, when the service is down, the error response will not contain a
+  // `httpErrorResponseData` field. Add a generic 'demographicsError' field to the fieldErrors that
+  // will trigger showing an Alert to the user to them them know the update was unsuccessful.
+  } else {
+    apiError.fieldErrors = {
+      demographicsError: error.customAttributes.httpErrorType,
+    };
+  }
+
+  return apiError;
+}
+
+/**
+ * post all of the data related to demographics.
+ * @param {Number} userId users are identified in the api by LMS id
+ * @param {Object} commitValues { demographics }
+ */
+export async function postDemographics(userId) {
+  const requestConfig = { headers: { 'Content-Type': 'application/json' } };
+  const requestUrl = `${getConfig().DEMOGRAPHICS_BASE_URL}/demographics/api/v1/demographics/`;
+  const commitValues = { user: userId };
+  let data = {};
+
+  ({ data } = await getAuthenticatedHttpClient()
+    .post(requestUrl, commitValues, requestConfig)
+    .catch((error) => {
+      const apiError = createDemographicsError(error);
+      throw apiError;
+    }));
+
+  return convertData(data, FROM);
+}
+
+/**
+ * get all data related to the demographics.
+ * @param {Number} userId users are identified in the api by LMS id
+ */
+export async function getDemographics(userId) {
+  const requestUrl = `${getConfig().DEMOGRAPHICS_BASE_URL}/demographics/api/v1/demographics/${userId}/`;
+  let data = {};
+
+  try {
+    ({ data } = await getAuthenticatedHttpClient()
+      .get(requestUrl));
+
+    data = convertData(data, FROM);
+  } catch (error) {
+    const apiError = Object.create(error);
+    // if the API called resulted in this user receiving a 404 then follow up with a POST call to
+    // try and create the demographics entity on the backend
+    if (apiError.customAttributes.httpErrorStatus) {
+      if (apiError.customAttributes.httpErrorStatus === 404) {
+        data = await postDemographics(userId);
+      }
+    } else {
+      data = {
+        user: userId,
+        demographics_gender: '',
+        demographics_gender_description: '',
+        demographics_income: '',
+        demographics_learner_education_level: '',
+        demographics_parent_education_level: '',
+        demographics_military_history: '',
+        demographics_work_status: '',
+        demographics_work_status_description: '',
+        demographics_current_work_sector: '',
+        demographics_future_work_sector: '',
+        demographics_user_ethnicity: [],
+      };
+    }
+  }
+
+  return data;
+}
+
+/**
+ * patch all of the data related to demographics.
+ * @param {Number} userId users are identified in the api by LMS id
+ * @param {Object} commitValues { demographics }
+ */
+export async function patchDemographics(userId, commitValues) {
+  const requestUrl = `${getConfig().DEMOGRAPHICS_BASE_URL}/demographics/api/v1/demographics/${userId}/`;
+  const convertedCommitValues = convertData(commitValues, TO);
+  let data = {};
+
+  ({ data } = await getAuthenticatedHttpClient()
+    .patch(requestUrl, convertedCommitValues)
+    .catch((error) => {
+      const apiError = createDemographicsError(error);
+      throw apiError;
+    }));
+
+  return convertData(data, FROM);
+}
+
+/**
+ * retrieve the options for each field from the Demographics API
+ */
+export async function getDemographicsOptions() {
+  const requestUrl = `${getConfig().DEMOGRAPHICS_BASE_URL}/demographics/api/v1/demographics/`;
+  let data = {};
+
+  try {
+    ({ data } = await getAuthenticatedHttpClient().options(requestUrl));
+  } catch (error) {
+    // We are catching and suppressing errors here on purpose. If an error occurs during the
+    // getDemographicsOptions call we will pass back an empty `data` object. Downstream we make
+    // the assumption that if the demographicsOptions object is empty that there was an issue or
+    // error communicating with the service/API.
+  }
+
+  return data;
+}
--- a/src/account-settings/demographics/data/utils.js
+++ b/src/account-settings/demographics/data/utils.js
@@ -0,0 +1,63 @@
+export const TO = 'to';
+export const FROM = 'from';
+export const DEMOGRAPHICS_FIELDS = [
+  'demographics_gender',
+  'demographics_gender_description',
+  'demographics_income',
+  'demographics_learner_education_level',
+  'demographics_parent_education_level',
+  'demographics_military_history',
+  'demographics_work_status',
+  'demographics_work_status_description',
+  'demographics_current_work_sector',
+  'demographics_future_work_sector',
+  'demographics_user_ethnicity',
+];
+
+// Frontend wants (example):
+//    demographics_user_ethnicity: ["asian", "white", "other"]
+//
+// Demographics wants (example):
+//    user_ethnicity: [
+//      { ethnicity: "asian" },
+//      { ethnicity: "white" },
+//      { ethnicity: "other" }
+//    ]
+function convertEthnicity(ethnicityData, direction) {
+  if (direction === FROM) {
+    return ethnicityData.map(e => e.ethnicity);
+  }
+
+  if (direction === TO) {
+    return ethnicityData.map(e => ({ ethnicity: e }));
+  }
+
+  return ethnicityData;
+}
+
+// Handles conversion of data to/from Demographics IDA to/from format needed for
+// frontend
+//  * handles ethnicity field
+//  * adds/removes 'demographics' to/from key
+//  * replace `null` with empty string or empty string with null
+export function convertData(dataObject, direction) {
+  const converted = {};
+
+  Object.entries(dataObject).forEach(([key, value]) => {
+    let newValue = value;
+
+    if (key.includes('ethnicity')) {
+      newValue = convertEthnicity(value, direction);
+    }
+
+    if (direction === TO) {
+      converted[key.replace('demographics_', '')] = newValue || null;
+    }
+
+    if (direction === FROM) {
+      converted[`demographics_${key}`] = newValue || '';
+    }
+  });
+
+  return converted;
+}
--- a/src/account-settings/demographics/test/DemographicsSection.test.jsx
+++ b/src/account-settings/demographics/test/DemographicsSection.test.jsx
@@ -0,0 +1,584 @@
+/* eslint-disable no-import-assign */
+import * as auth from '@edx/frontend-platform/auth';
+
+import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
+
+import { Provider } from 'react-redux';
+import React from 'react';
+import configureStore from 'redux-mock-store';
+import renderer from 'react-test-renderer';
+import DemographicsSection from '../DemographicsSection';
+
+jest.mock('@edx/frontend-platform/auth');
+
+const IntlDemographicsSection = injectIntl(DemographicsSection);
+
+jest.mock('../../data/selectors', () => jest.fn().mockImplementation(() => ({ demographicsSectionSelector: () => ({}) })));
+
+const mockStore = configureStore();
+
+describe('DemographicsSection', () => {
+  let props = {};
+  let store = {};
+
+  const reduxWrapper = children => (
+    <IntlProvider locale="en">
+      <Provider store={store}>{children}</Provider>
+    </IntlProvider>
+  );
+
+  beforeEach(() => {
+    store = mockStore();
+    props = {
+      updateDraft: jest.fn(),
+      formValues: {
+        demographics_gender: 'declined',
+        demographics_gender_description: '',
+        demographics_user_ethnicity: [],
+        demographics_income: 'declined',
+        demographics_military_history: 'declined',
+        demographics_learner_education_level: 'declined',
+        demographics_parent_education_level: 'declined',
+        demographics_work_status: 'declined',
+        demographics_work_status_description: '',
+        demographics_current_work_sector: 'declined',
+        demographics_future_work_sector: 'declined',
+        demographics_user: 1,
+        demographicsOptions: {
+          actions: {
+            POST: {
+              gender: {
+                choices: [
+                  {
+                    value: 'woman',
+                    display_name: 'Woman',
+                  },
+                  {
+                    value: 'man',
+                    display_name: 'Man',
+                  },
+                  {
+                    value: 'non-binary',
+                    display_name: 'Non-binary',
+                  },
+                  {
+                    value: 'self-describe',
+                    display_name: 'Prefer to self describe',
+                  },
+                  {
+                    value: 'declined',
+                    display_name: 'Prefer not to respond',
+                  },
+                ],
+              },
+              income: {
+                choices: [
+                  {
+                    value: 'less-than-10k',
+                    display_name: 'Less than US $10,000',
+                  },
+                  {
+                    value: '10k-25k',
+                    display_name: 'US $10,000 - $25,000',
+                  },
+                  {
+                    value: '25k-50k',
+                    display_name: 'US $25,000 - $50,000',
+                  },
+                  {
+                    value: '50k-75k',
+                    display_name: 'US $50,000 - $75,000',
+                  },
+                  {
+                    value: '75k-100k',
+                    display_name: 'US $75,000 - $100,000',
+                  },
+                  {
+                    value: 'over-100k',
+                    display_name: 'Over US $100,000',
+                  },
+                  {
+                    value: 'unsure',
+                    display_name: "I don't know",
+                  },
+                  {
+                    value: 'declined',
+                    display_name: 'Prefer not to respond',
+                  },
+                ],
+              },
+              learner_education_level: {
+                choices: [
+                  {
+                    value: 'no-high-school',
+                    display_name: 'No High School',
+                  },
+                  {
+                    value: 'some-high-school',
+                    display_name: 'Some High School',
+                  },
+                  {
+                    value: 'high-school-ged-equivalent',
+                    display_name: 'High School diploma, GED, or equivalent',
+                  },
+                  {
+                    value: 'some-college',
+                    display_name: 'Some college, but no degree',
+                  },
+                  {
+                    value: 'associates',
+                    display_name: 'Associates degree',
+                  },
+                  {
+                    value: 'bachelors',
+                    display_name: 'Bachelors degree',
+                  },
+                  {
+                    value: 'masters',
+                    display_name: 'Masters degree',
+                  },
+                  {
+                    value: 'professional',
+                    display_name: 'Professional degree',
+                  },
+                  {
+                    value: 'doctorate',
+                    display_name: 'Doctorate degree',
+                  },
+                  {
+                    value: 'declined',
+                    display_name: 'Prefer not to respond',
+                  },
+                ],
+              },
+              parent_education_level: {
+                choices: [
+                  {
+                    value: 'no-high-school',
+                    display_name: 'No High School',
+                  },
+                  {
+                    value: 'some-high-school',
+                    display_name: 'Some High School',
+                  },
+                  {
+                    value: 'high-school-ged-equivalent',
+                    display_name: 'High School diploma, GED, or equivalent',
+                  },
+                  {
+                    value: 'some-college',
+                    display_name: 'Some college, but no degree',
+                  },
+                  {
+                    value: 'associates',
+                    display_name: 'Associates degree',
+                  },
+                  {
+                    value: 'bachelors',
+                    display_name: 'Bachelors degree',
+                  },
+                  {
+                    value: 'masters',
+                    display_name: 'Masters degree',
+                  },
+                  {
+                    value: 'professional',
+                    display_name: 'Professional degree',
+                  },
+                  {
+                    value: 'doctorate',
+                    display_name: 'Doctorate degree',
+                  },
+                  {
+                    value: 'declined',
+                    display_name: 'Prefer not to respond',
+                  },
+                ],
+              },
+              military_history: {
+                choices: [
+                  {
+                    value: 'never-served',
+                    display_name: 'Never served in the military',
+                  },
+                  {
+                    value: 'training',
+                    display_name: 'Only on active duty for training',
+                  },
+                  {
+                    value: 'active',
+                    display_name: 'Now on active duty',
+                  },
+                  {
+                    value: 'previously-active',
+                    display_name: 'On active duty in the past, but not now',
+                  },
+                  {
+                    value: 'declined',
+                    display_name: 'Prefer not to respond',
+                  },
+                ],
+              },
+              work_status: {
+                choices: [
+                  {
+                    value: 'full-time',
+                    display_name: 'Employed, working full-time',
+                  },
+                  {
+                    value: 'part-time',
+                    display_name: 'Employed, working part-time',
+                  },
+                  {
+                    value: 'self-employed',
+                    display_name: 'Self-Employed',
+                  },
+                  {
+                    value: 'not-employed-looking',
+                    display_name: 'Not employed, looking for work',
+                  },
+                  {
+                    value: 'not-employed-not-looking',
+                    display_name: 'Not employed, not looking for work',
+                  },
+                  {
+                    value: 'unable',
+                    display_name: 'Unable to work',
+                  },
+                  {
+                    value: 'retired',
+                    display_name: 'Retired',
+                  },
+                  {
+                    value: 'other',
+                    display_name: 'Other',
+                  },
+                  {
+                    value: 'declined',
+                    display_name: 'Prefer not to respond',
+                  },
+                ],
+              },
+              current_work_sector: {
+                choices: [
+                  {
+                    value: 'accommodation-food',
+                    display_name: 'Accommodation and Food Services',
+                  },
+                  {
+                    value: 'administrative-support-waste-remediation',
+                    display_name: 'Administrative and Support and Waste Management and Remediation Services',
+                  },
+                  {
+                    value: 'agriculture-forestry-fishing-hunting',
+                    display_name: 'Agriculture, Forestry, Fishing and Hunting',
+                  },
+                  {
+                    value: 'arts-entertainment-recreation',
+                    display_name: 'Arts, Entertainment, and Recreation',
+                  },
+                  {
+                    value: 'construction',
+                    display_name: 'Construction',
+                  },
+                  {
+                    value: 'educational',
+                    display_name: 'Education Services',
+                  },
+                  {
+                    value: 'finance-insurance',
+                    display_name: 'Finance and Insurance',
+                  },
+                  {
+                    value: 'healthcare-social',
+                    display_name: 'Health Care and Social Assistance',
+                  },
+                  {
+                    value: 'information',
+                    display_name: 'Information',
+                  },
+                  {
+                    value: 'management',
+                    display_name: 'Management of Companies and Enterprises',
+                  },
+                  {
+                    value: 'manufacturing',
+                    display_name: 'Manufacturing',
+                  },
+                  {
+                    value: 'mining-quarry-oil-gas',
+                    display_name: 'Mining, Quarrying, and Oil and Gas Extraction',
+                  },
+                  {
+                    value: 'professional-scientific-technical',
+                    display_name: 'Professional, Scientific, and Technical Services',
+                  },
+                  {
+                    value: 'public-admin',
+                    display_name: 'Public Administration',
+                  },
+                  {
+                    value: 'real-estate',
+                    display_name: 'Real Estate and Rental and Leasing',
+                  },
+                  {
+                    value: 'retail',
+                    display_name: 'Retail Trade',
+                  },
+                  {
+                    value: 'transport-warehousing',
+                    display_name: 'Transportation and Warehousing',
+                  },
+                  {
+                    value: 'utilities',
+                    display_name: 'Utilities',
+                  },
+                  {
+                    value: 'trade',
+                    display_name: 'Wholesale Trade',
+                  },
+                  {
+                    value: 'other',
+                    display_name: 'Other',
+                  },
+                  {
+                    value: 'declined',
+                    display_name: 'Prefer not to respond',
+                  },
+                ],
+              },
+              future_work_sector: {
+                choices: [
+                  {
+                    value: 'accommodation-food',
+                    display_name: 'Accommodation and Food Services',
+                  },
+                  {
+                    value: 'administrative-support-waste-remediation',
+                    display_name: 'Administrative and Support and Waste Management and Remediation Services',
+                  },
+                  {
+                    value: 'agriculture-forestry-fishing-hunting',
+                    display_name: 'Agriculture, Forestry, Fishing and Hunting',
+                  },
+                  {
+                    value: 'arts-entertainment-recreation',
+                    display_name: 'Arts, Entertainment, and Recreation',
+                  },
+                  {
+                    value: 'construction',
+                    display_name: 'Construction',
+                  },
+                  {
+                    value: 'educational',
+                    display_name: 'Education Services',
+                  },
+                  {
+                    value: 'finance-insurance',
+                    display_name: 'Finance and Insurance',
+                  },
+                  {
+                    value: 'healthcare-social',
+                    display_name: 'Health Care and Social Assistance',
+                  },
+                  {
+                    value: 'information',
+                    display_name: 'Information',
+                  },
+                  {
+                    value: 'management',
+                    display_name: 'Management of Companies and Enterprises',
+                  },
+                  {
+                    value: 'manufacturing',
+                    display_name: 'Manufacturing',
+                  },
+                  {
+                    value: 'mining-quarry-oil-gas',
+                    display_name: 'Mining, Quarrying, and Oil and Gas Extraction',
+                  },
+                  {
+                    value: 'professional-scientific-technical',
+                    display_name: 'Professional, Scientific, and Technical Services',
+                  },
+                  {
+                    value: 'public-admin',
+                    display_name: 'Public Administration',
+                  },
+                  {
+                    value: 'real-estate',
+                    display_name: 'Real Estate and Rental and Leasing',
+                  },
+                  {
+                    value: 'retail',
+                    display_name: 'Retail Trade',
+                  },
+                  {
+                    value: 'transport-warehousing',
+                    display_name: 'Transportation and Warehousing',
+                  },
+                  {
+                    value: 'utilities',
+                    display_name: 'Utilities',
+                  },
+                  {
+                    value: 'trade',
+                    display_name: 'Wholesale Trade',
+                  },
+                  {
+                    value: 'other',
+                    display_name: 'Other',
+                  },
+                  {
+                    value: 'declined',
+                    display_name: 'Prefer not to respond',
+                  },
+                ],
+              },
+              user_ethnicity: {
+                child: {
+                  children: {
+                    ethnicity: {
+                      choices: [
+                        {
+                          value: 'american-indian-or-alaska-native',
+                          display_name: 'American Indian or Alaska Native',
+                        },
+                        {
+                          value: 'asian',
+                          display_name: 'Asian',
+                        },
+                        {
+                          value: 'black-or-african-american',
+                          display_name: 'Black or African American',
+                        },
+                        {
+                          value: 'hispanic-latin-spanish',
+                          display_name: 'Hispanic, Latin, or Spanish origin',
+                        },
+                        {
+                          value: 'middle-eastern-or-north-african',
+                          display_name: 'Middle Eastern or North African',
+                        },
+                        {
+                          value: 'native-hawaiian-or-pacific-islander',
+                          display_name: 'Native Hawaiian or Other Pacific Islander',
+                        },
+                        {
+                          value: 'white',
+                          display_name: 'White',
+                        },
+                        {
+                          value: 'other',
+                          display_name: 'Some other race, ethnicity, or origin',
+                        },
+                        {
+                          value: 'declined',
+                          display_name: 'Prefer not to respond',
+                        },
+                      ],
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+      formErrors: {},
+      intl: {},
+      forwardRef: () => {},
+      drafts: {},
+    };
+    auth.getAuthenticatedHttpClient = jest.fn(() => ({
+      patch: async () => ({
+        data: { status: 200 },
+        catch: () => {},
+      }),
+    }));
+    auth.getAuthenticatedUser = jest.fn(() => ({ userId: 1 }));
+  });
+
+  it('should render', () => {
+    const wrapper = renderer.create(reduxWrapper(<IntlDemographicsSection {...props} />)).toJSON();
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should render an Alert if an error occurs', () => {
+    props = {
+      ...props,
+      formErrors: {
+        demographicsError: 'api-error',
+      },
+    };
+
+    const wrapper = renderer.create(reduxWrapper(<IntlDemographicsSection {...props} />)).toJSON();
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should set user input correctly when user provides gender self-description', () => {
+    props = {
+      ...props,
+      formValues: {
+        ...props.formValues,
+        demographics_gender: 'self-describe',
+        demographics_gender_description: 'test',
+      },
+    };
+
+    const wrapper = renderer.create(reduxWrapper(<IntlDemographicsSection {...props} />)).toJSON();
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should set user input correctly when user provides answers to work_status question', () => {
+    props = {
+      ...props,
+      formValues: {
+        ...props.formValues,
+        demographics_work_status: 'other',
+        demographics_work_status_description: 'test',
+      },
+    };
+
+    const wrapper = renderer.create(reduxWrapper(<IntlDemographicsSection {...props} />)).toJSON();
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should render ethnicity text correctly', () => {
+    props = {
+      ...props,
+      formValues: {
+        ...props.formValues,
+        demographics_user_ethnicity: ['asian'],
+      },
+    };
+
+    const wrapper = renderer.create(reduxWrapper(<IntlDemographicsSection {...props} />)).toJSON();
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should render ethnicity correctly when multiple options are selected', () => {
+    props = {
+      ...props,
+      formValues: {
+        ...props.formValues,
+        demographics_user_ethnicity: ['hispanic-latin-spanish', 'white'],
+      },
+    };
+
+    const wrapper = renderer.create(reduxWrapper(<IntlDemographicsSection {...props} />)).toJSON();
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should render an Alert when demographicsOptions props are empty', () => {
+    props = {
+      ...props,
+      formValues: {
+        demographicsOptions: null,
+      },
+    };
+
+    const wrapper = renderer.create(reduxWrapper(<IntlDemographicsSection {...props} />)).toJSON();
+    expect(wrapper).toMatchSnapshot();
+  });
+});
--- a/src/account-settings/demographics/test/snapshots/DemographicsSection.test.jsx.snap
+++ b/src/account-settings/demographics/test/snapshots/DemographicsSection.test.jsx.snap
@@ -0,0 +1,3953 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DemographicsSection should render 1`] = `
+<div
+  className="account-section pt-3 mb-5"
+  id="demographics-information"
+>
+  <h2
+    className="section-heading h4 mb-3"
+  >
+    Optional Information
+  </h2>
+  <p>
+    <a
+      className="pgn__hyperlink default-link standalone-link"
+      href="http://localhost:5335/demographics"
+      onClick={[Function]}
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      Why does localhost collect this information?
+      <span
+        className="pgn__hyperlink__external-icon"
+        title="Opens in a new tab"
+      >
+        <span
+          className="pgn__icon"
+          data-testid="hyperlink-icon"
+          style={
+            {
+              "height": "1em",
+              "width": "1em",
+            }
+          }
+        >
+          <svg
+            aria-hidden={true}
+            fill="none"
+            focusable={false}
+            height={24}
+            role="img"
+            viewBox="0 0 24 24"
+            width={24}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M19 19H5V5h7V3H3v18h18v-9h-2v7ZM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7Z"
+              fill="currentColor"
+            />
+          </svg>
+          <span
+            className="sr-only"
+          >
+            in a new tab
+          </span>
+        </span>
+      </span>
+    </a>
+  </p>
+  <div
+    id="demographics-fields"
+  >
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Gender identity
+            </h6>
+            <button
+              className="ml-3 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            className={null}
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Race/Ethnicity identity
+            </h6>
+            <button
+              className="ml-3 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            className={null}
+            data-hj-suppress={true}
+          >
+            <button
+              className="p-0 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              Add race/ethnicity identity
+            </button>
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Family income
+            </h6>
+            <button
+              className="ml-3 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            className={null}
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              U.S. Military status
+            </h6>
+            <button
+              className="ml-3 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            className={null}
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Your education level
+            </h6>
+            <button
+              className="ml-3 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            className={null}
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Parents/Guardians education level
+            </h6>
+            <button
+              className="ml-3 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            className={null}
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Employment status
+            </h6>
+            <button
+              className="ml-3 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            className={null}
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Current work industry
+            </h6>
+            <button
+              className="ml-3 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            className={null}
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Future work industry
+            </h6>
+            <button
+              className="ml-3 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            className={null}
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
+<div
+  className="account-section pt-3 mb-5"
+  id="demographics-information"
+>
+  <h2
+    className="section-heading h4 mb-3"
+  >
+    Optional Information
+  </h2>
+  <p>
+    <a
+      className="pgn__hyperlink default-link standalone-link"
+      href="http://localhost:5335/demographics"
+      onClick={[Function]}
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      Why does localhost collect this information?
+      <span
+        className="pgn__hyperlink__external-icon"
+        title="Opens in a new tab"
+      >
+        <span
+          className="pgn__icon"
+          data-testid="hyperlink-icon"
+          style={
+            {
+              "height": "1em",
+              "width": "1em",
+            }
+          }
+        >
+          <svg
+            aria-hidden={true}
+            fill="none"
+            focusable={false}
+            height={24}
+            role="img"
+            viewBox="0 0 24 24"
+            width={24}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M19 19H5V5h7V3H3v18h18v-9h-2v7ZM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7Z"
+              fill="currentColor"
+            />
+          </svg>
+          <span
+            className="sr-only"
+          >
+            in a new tab
+          </span>
+        </span>
+      </span>
+    </a>
+  </p>
+  <div
+    tabIndex="-1"
+  >
+    <div
+      className="alert d-flex align-items-start alert alert-danger"
+    >
+      <div />
+      <div>
+        An error occurred attempting to retrieve or save your account information. Please try again later.
+      </div>
+    </div>
+  </div>
+  <div
+    id="demographics-fields"
+  >
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Gender identity
+            </h6>
+            <button
+              className="ml-3 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            className={null}
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Race/Ethnicity identity
+            </h6>
+            <button
+              className="ml-3 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            className={null}
+            data-hj-suppress={true}
+          >
+            <button
+              className="p-0 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              Add race/ethnicity identity
+            </button>
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Family income
+            </h6>
+            <button
+              className="ml-3 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            className={null}
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              U.S. Military status
+            </h6>
+            <button
+              className="ml-3 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            className={null}
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Your education level
+            </h6>
+            <button
+              className="ml-3 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            className={null}
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Parents/Guardians education level
+            </h6>
+            <button
+              className="ml-3 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            className={null}
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Employment status
+            </h6>
+            <button
+              className="ml-3 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            className={null}
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Current work industry
+            </h6>
+            <button
+              className="ml-3 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            className={null}
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Future work industry
+            </h6>
+            <button
+              className="ml-3 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            className={null}
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`DemographicsSection should render an Alert when demographicsOptions props are empty 1`] = `
+<div
+  className="account-section pt-3 mb-5"
+  id="demographics-information"
+>
+  <h2
+    className="section-heading h4 mb-3"
+  >
+    Optional Information
+  </h2>
+  <p>
+    <a
+      className="pgn__hyperlink default-link standalone-link"
+      href="http://localhost:5335/demographics"
+      onClick={[Function]}
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      Why does localhost collect this information?
+      <span
+        className="pgn__hyperlink__external-icon"
+        title="Opens in a new tab"
+      >
+        <span
+          className="pgn__icon"
+          data-testid="hyperlink-icon"
+          style={
+            {
+              "height": "1em",
+              "width": "1em",
+            }
+          }
+        >
+          <svg
+            aria-hidden={true}
+            fill="none"
+            focusable={false}
+            height={24}
+            role="img"
+            viewBox="0 0 24 24"
+            width={24}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M19 19H5V5h7V3H3v18h18v-9h-2v7ZM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7Z"
+              fill="currentColor"
+            />
+          </svg>
+          <span
+            className="sr-only"
+          >
+            in a new tab
+          </span>
+        </span>
+      </span>
+    </a>
+  </p>
+  <div
+    tabIndex="-1"
+  >
+    <div
+      className="alert d-flex align-items-start alert alert-danger"
+    >
+      <div />
+      <div>
+        An error occurred attempting to retrieve or save your account information. Please try again later.
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`DemographicsSection should render ethnicity correctly when multiple options are selected 1`] = `
+<div
+  className="account-section pt-3 mb-5"
+  id="demographics-information"
+>
+  <h2
+    className="section-heading h4 mb-3"
+  >
+    Optional Information
+  </h2>
+  <p>
+    <a
+      className="pgn__hyperlink default-link standalone-link"
+      href="http://localhost:5335/demographics"
+      onClick={[Function]}
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      Why does localhost collect this information?
+      <span
+        className="pgn__hyperlink__external-icon"
+        title="Opens in a new tab"
+      >
+        <span
+          className="pgn__icon"
+          data-testid="hyperlink-icon"
+          style={
+            {
+              "height": "1em",
+              "width": "1em",
+            }
+          }
+        >
+          <svg
+            aria-hidden={true}
+            fill="none"
+            focusable={false}
+            height={24}
+            role="img"
+            viewBox="0 0 24 24"
+            width={24}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M19 19H5V5h7V3H3v18h18v-9h-2v7ZM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7Z"
+              fill="currentColor"
+            />
+          </svg>
+          <span
+            className="sr-only"
+          >
+            in a new tab
+          </span>
+        </span>
+      </span>
+    </a>
+  </p>
+  <div
+    id="demographics-fields"
+  >
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Gender identity
+            </h6>
+            <button
+              className="ml-3 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            className={null}
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Race/Ethnicity identity
+            </h6>
+            <button
+              className="ml-3 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            className={null}
+            data-hj-suppress={true}
+          >
+            Hispanic, Latin, or Spanish origin, White
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Family income
+            </h6>
+            <button
+              className="ml-3 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            className={null}
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              U.S. Military status
+            </h6>
+            <button
+              className="ml-3 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            className={null}
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Your education level
+            </h6>
+            <button
+              className="ml-3 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            className={null}
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Parents/Guardians education level
+            </h6>
+            <button
+              className="ml-3 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            className={null}
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Employment status
+            </h6>
+            <button
+              className="ml-3 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            className={null}
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Current work industry
+            </h6>
+            <button
+              className="ml-3 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            className={null}
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Future work industry
+            </h6>
+            <button
+              className="ml-3 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            className={null}
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`DemographicsSection should render ethnicity text correctly 1`] = `
+<div
+  className="account-section pt-3 mb-5"
+  id="demographics-information"
+>
+  <h2
+    className="section-heading h4 mb-3"
+  >
+    Optional Information
+  </h2>
+  <p>
+    <a
+      className="pgn__hyperlink default-link standalone-link"
+      href="http://localhost:5335/demographics"
+      onClick={[Function]}
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      Why does localhost collect this information?
+      <span
+        className="pgn__hyperlink__external-icon"
+        title="Opens in a new tab"
+      >
+        <span
+          className="pgn__icon"
+          data-testid="hyperlink-icon"
+          style={
+            {
+              "height": "1em",
+              "width": "1em",
+            }
+          }
+        >
+          <svg
+            aria-hidden={true}
+            fill="none"
+            focusable={false}
+            height={24}
+            role="img"
+            viewBox="0 0 24 24"
+            width={24}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M19 19H5V5h7V3H3v18h18v-9h-2v7ZM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7Z"
+              fill="currentColor"
+            />
+          </svg>
+          <span
+            className="sr-only"
+          >
+            in a new tab
+          </span>
+        </span>
+      </span>
+    </a>
+  </p>
+  <div
+    id="demographics-fields"
+  >
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Gender identity
+            </h6>
+            <button
+              className="ml-3 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            className={null}
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Race/Ethnicity identity
+            </h6>
+            <button
+              className="ml-3 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            className={null}
+            data-hj-suppress={true}
+          >
+            Asian
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Family income
+            </h6>
+            <button
+              className="ml-3 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            className={null}
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              U.S. Military status
+            </h6>
+            <button
+              className="ml-3 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            className={null}
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Your education level
+            </h6>
+            <button
+              className="ml-3 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            className={null}
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Parents/Guardians education level
+            </h6>
+            <button
+              className="ml-3 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            className={null}
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Employment status
+            </h6>
+            <button
+              className="ml-3 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            className={null}
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Current work industry
+            </h6>
+            <button
+              className="ml-3 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            className={null}
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Future work industry
+            </h6>
+            <button
+              className="ml-3 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            className={null}
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`DemographicsSection should set user input correctly when user provides answers to work_status question 1`] = `
+<div
+  className="account-section pt-3 mb-5"
+  id="demographics-information"
+>
+  <h2
+    className="section-heading h4 mb-3"
+  >
+    Optional Information
+  </h2>
+  <p>
+    <a
+      className="pgn__hyperlink default-link standalone-link"
+      href="http://localhost:5335/demographics"
+      onClick={[Function]}
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      Why does localhost collect this information?
+      <span
+        className="pgn__hyperlink__external-icon"
+        title="Opens in a new tab"
+      >
+        <span
+          className="pgn__icon"
+          data-testid="hyperlink-icon"
+          style={
+            {
+              "height": "1em",
+              "width": "1em",
+            }
+          }
+        >
+          <svg
+            aria-hidden={true}
+            fill="none"
+            focusable={false}
+            height={24}
+            role="img"
+            viewBox="0 0 24 24"
+            width={24}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M19 19H5V5h7V3H3v18h18v-9h-2v7ZM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7Z"
+              fill="currentColor"
+            />
+          </svg>
+          <span
+            className="sr-only"
+          >
+            in a new tab
+          </span>
+        </span>
+      </span>
+    </a>
+  </p>
+  <div
+    id="demographics-fields"
+  >
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Gender identity
+            </h6>
+            <button
+              className="ml-3 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            className={null}
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Race/Ethnicity identity
+            </h6>
+            <button
+              className="ml-3 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            className={null}
+            data-hj-suppress={true}
+          >
+            <button
+              className="p-0 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              Add race/ethnicity identity
+            </button>
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Family income
+            </h6>
+            <button
+              className="ml-3 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            className={null}
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              U.S. Military status
+            </h6>
+            <button
+              className="ml-3 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            className={null}
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Your education level
+            </h6>
+            <button
+              className="ml-3 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            className={null}
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Parents/Guardians education level
+            </h6>
+            <button
+              className="ml-3 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            className={null}
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Employment status
+            </h6>
+            <button
+              className="ml-3 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            className={null}
+            data-hj-suppress={true}
+          >
+            Other: test
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Current work industry
+            </h6>
+            <button
+              className="ml-3 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            className={null}
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Future work industry
+            </h6>
+            <button
+              className="ml-3 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            className={null}
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`DemographicsSection should set user input correctly when user provides gender self-description 1`] = `
+<div
+  className="account-section pt-3 mb-5"
+  id="demographics-information"
+>
+  <h2
+    className="section-heading h4 mb-3"
+  >
+    Optional Information
+  </h2>
+  <p>
+    <a
+      className="pgn__hyperlink default-link standalone-link"
+      href="http://localhost:5335/demographics"
+      onClick={[Function]}
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      Why does localhost collect this information?
+      <span
+        className="pgn__hyperlink__external-icon"
+        title="Opens in a new tab"
+      >
+        <span
+          className="pgn__icon"
+          data-testid="hyperlink-icon"
+          style={
+            {
+              "height": "1em",
+              "width": "1em",
+            }
+          }
+        >
+          <svg
+            aria-hidden={true}
+            fill="none"
+            focusable={false}
+            height={24}
+            role="img"
+            viewBox="0 0 24 24"
+            width={24}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M19 19H5V5h7V3H3v18h18v-9h-2v7ZM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7Z"
+              fill="currentColor"
+            />
+          </svg>
+          <span
+            className="sr-only"
+          >
+            in a new tab
+          </span>
+        </span>
+      </span>
+    </a>
+  </p>
+  <div
+    id="demographics-fields"
+  >
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Gender identity
+            </h6>
+            <button
+              className="ml-3 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            className={null}
+            data-hj-suppress={true}
+          >
+            Prefer to self describe: test
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Race/Ethnicity identity
+            </h6>
+            <button
+              className="ml-3 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            className={null}
+            data-hj-suppress={true}
+          >
+            <button
+              className="p-0 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              Add race/ethnicity identity
+            </button>
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Family income
+            </h6>
+            <button
+              className="ml-3 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            className={null}
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              U.S. Military status
+            </h6>
+            <button
+              className="ml-3 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            className={null}
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Your education level
+            </h6>
+            <button
+              className="ml-3 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            className={null}
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Parents/Guardians education level
+            </h6>
+            <button
+              className="ml-3 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            className={null}
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Employment status
+            </h6>
+            <button
+              className="ml-3 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            className={null}
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Current work industry
+            </h6>
+            <button
+              className="ml-3 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            className={null}
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Future work industry
+            </h6>
+            <button
+              className="ml-3 btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p
+            className={null}
+            data-hj-suppress={true}
+          >
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
--- a/src/account-settings/name-change/NameChange.jsx
+++ b/src/account-settings/name-change/NameChange.jsx
@@ -1,10 +1,10 @@
-import { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { connect, useDispatch } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import PropTypes from 'prop-types';

 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import {
  ActionRow,
  Alert,
@@ -25,6 +25,7 @@ const NameChangeModal = ({
  targetFormId,
  errors,
  formValues,
+  intl,
  saveState,
 }) => {
  const dispatch = useDispatch();
@@ -32,7 +33,6 @@ const NameChangeModal = ({
  const { username } = getAuthenticatedUser();
  const [verifiedNameInput, setVerifiedNameInput] = useState(formValues.verified_name || '');
  const [confirmedWarning, setConfirmedWarning] = useState(false);
-  const intl = useIntl();

  const resetLocalState = useCallback(() => {
    setConfirmedWarning(false);
@@ -193,10 +193,11 @@ NameChangeModal.propTypes = {
    verified_name: PropTypes.string,
  }).isRequired,
  saveState: PropTypes.string,
+  intl: intlShape.isRequired,
 };

 NameChangeModal.defaultProps = {
  saveState: null,
 };

-export default connect(nameChangeSelector)(NameChangeModal);
+export default connect(nameChangeSelector)(injectIntl(NameChangeModal));
--- a/src/account-settings/name-change/data/service.test.js
+++ b/src/account-settings/name-change/data/service.test.js
@@ -1,56 +0,0 @@
-import { getConfig } from '@edx/frontend-platform';
-import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import { handleRequestError } from '../../data/utils';
-
-import { postNameChange } from './service';
-
-jest.mock('@edx/frontend-platform');
-jest.mock('@edx/frontend-platform/auth');
-jest.mock('../../data/utils');
-
-describe('postNameChange', () => {
-  const mockPost = jest.fn();
-
-  beforeEach(() => {
-    jest.resetAllMocks();
-
-    getConfig.mockReturnValue({
-      LMS_BASE_URL: 'http://testserver',
-    });
-
-    getAuthenticatedHttpClient.mockReturnValue({
-      post: mockPost,
-    });
-  });
-
-  it('posts a name change request successfully', async () => {
-    const mockResponse = { data: { success: true, updated: true } };
-    mockPost.mockResolvedValueOnce(mockResponse);
-
-    const result = await postNameChange('New Name');
-
-    expect(getConfig).toHaveBeenCalled();
-    expect(getAuthenticatedHttpClient).toHaveBeenCalled();
-
-    expect(mockPost).toHaveBeenCalledWith(
-      'http://testserver/api/user/v1/accounts/name_change/',
-      { name: 'New Name' },
-      { headers: { Accept: 'application/json' } },
-    );
-
-    expect(result).toEqual(mockResponse.data);
-  });
-
-  it('calls handleRequestError and throws when request fails', async () => {
-    const mockError = new Error('Request failed');
-    mockPost.mockRejectedValueOnce(mockError);
-
-    handleRequestError.mockImplementation(() => {
-      throw mockError;
-    });
-
-    await expect(postNameChange('Bad Name')).rejects.toThrow('Request failed');
-
-    expect(handleRequestError).toHaveBeenCalledWith(mockError);
-  });
-});
--- a/src/account-settings/name-change/messages.js
+++ b/src/account-settings/name-change/messages.js
@@ -23,7 +23,7 @@ const messages = defineMessages({
  },
  'account.settings.name.change.id.name.label': {
    id: 'account.settings.name.change.id.name.label',
-    defaultMessage: 'Enter your name as it appears on your identification card.',
+    defaultMessage: 'Enter your name as it appears on your unexpired student, work, or government-issued identification card.',
    description: 'Form label instructing the user to enter the name on their ID.',
  },
  'account.settings.name.change.id.name.placeholder': {
--- a/src/account-settings/name-change/test/NameChange.test.jsx
+++ b/src/account-settings/name-change/test/NameChange.test.jsx
@@ -1,4 +1,6 @@
 /* eslint-disable no-import-assign */
+import React from 'react';
+import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import { BrowserRouter as Router } from 'react-router-dom';
 import configureStore from 'redux-mock-store';
@@ -9,13 +11,10 @@ import {
 } from '@testing-library/react';

 import * as auth from '@edx/frontend-platform/auth';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';

-// Modal creates a portal.  Overriding createPortal allows portals to be tested in jest.
-jest.mock('react-dom', () => ({
-  ...jest.requireActual('react-dom'),
-  createPortal: jest.fn(node => node), // Mock portal behavior
-}));
+// 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

@@ -28,6 +27,8 @@ jest.mock('react-redux', () => ({
 jest.mock('@edx/frontend-platform/auth');
 jest.mock('../../data/selectors', () => jest.fn().mockImplementation(() => ({ nameChangeSelector: () => ({}) })));

+const IntlNameChange = injectIntl(NameChange);
+
 const mockStore = configureStore();

 describe('NameChange', () => {
@@ -52,6 +53,7 @@ describe('NameChange', () => {
        verified_name: 'edX Verified',
      },
      saveState: null,
+      intl: {},
    };

    auth.getAuthenticatedHttpClient = jest.fn(() => ({
@@ -68,7 +70,7 @@ describe('NameChange', () => {
  it('renders populated input after clicking continue if verified_name in form data', async () => {
    const getInput = () => screen.queryByPlaceholderText('Enter the name on your photo ID');

-    render(reduxWrapper(<NameChange {...props} />));
+    render(reduxWrapper(<IntlNameChange {...props} />));
    expect(getInput()).toBeNull();

    const continueButton = screen.getByText('Continue');
@@ -85,7 +87,7 @@ describe('NameChange', () => {
        name: 'edx edx',
      },
    };
-    render(reduxWrapper(<NameChange {...formProps} />));
+    render(reduxWrapper(<IntlNameChange {...formProps} />));

    const continueButton = screen.getByText('Continue');
    fireEvent.click(continueButton);
@@ -103,7 +105,7 @@ describe('NameChange', () => {
      type: 'ACCOUNT_SETTINGS__REQUEST_NAME_CHANGE',
    };

-    render(reduxWrapper(<NameChange {...props} />));
+    render(reduxWrapper(<IntlNameChange {...props} />));

    const continueButton = screen.getByText('Continue');
    fireEvent.click(continueButton);
@@ -130,7 +132,7 @@ describe('NameChange', () => {
      targetFormId: 'name',
    };

-    render(reduxWrapper(<NameChange {...formProps} />));
+    render(reduxWrapper(<IntlNameChange {...formProps} />));

    const continueButton = screen.getByText('Continue');
    fireEvent.click(continueButton);
@@ -146,7 +148,7 @@ describe('NameChange', () => {
  it('does not dispatch action while pending', async () => {
    props.saveState = 'pending';

-    render(reduxWrapper(<NameChange {...props} />));
+    render(reduxWrapper(<IntlNameChange {...props} />));

    const continueButton = screen.getByText('Continue');
    fireEvent.click(continueButton);
@@ -162,7 +164,7 @@ describe('NameChange', () => {
  it('routes to IDV when name change request is successful', async () => {
    props.saveState = 'complete';

-    render(reduxWrapper(<NameChange {...props} />));
+    render(reduxWrapper(<IntlNameChange {...props} />));
    expect(window.location.pathname).toEqual('/id-verification');
  });
 });
--- a/src/account-settings/reset-password/ResetPassword.jsx
+++ b/src/account-settings/reset-password/ResetPassword.jsx
@@ -1,6 +1,7 @@
+import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
 import { StatefulButton } from '@openedx/paragon';

 import { resetPassword } from './data/actions';
@@ -9,9 +10,7 @@ import ConfirmationAlert from './ConfirmationAlert';
 import RequestInProgressAlert from './RequestInProgressAlert';

 const ResetPassword = (props) => {
-  const { email, status } = props;
-  const intl = useIntl();
-
+  const { email, intl, status } = props;
  return (
    <div className="form-group">
      <h6 aria-level="3">
@@ -52,6 +51,7 @@ const ResetPassword = (props) => {

 ResetPassword.propTypes = {
  email: PropTypes.string,
+  intl: intlShape.isRequired,
  resetPassword: PropTypes.func.isRequired,
  status: PropTypes.string,
 };
@@ -68,4 +68,4 @@ export default connect(
  {
    resetPassword,
  },
-)(ResetPassword);
+)(injectIntl(ResetPassword));
--- a/src/account-settings/reset-password/data/service.test.js
+++ b/src/account-settings/reset-password/data/service.test.js
@@ -1,65 +0,0 @@
-import { getConfig } from '@edx/frontend-platform';
-import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import formurlencoded from 'form-urlencoded';
-import { handleRequestError } from '../../data/utils';
-
-import { postResetPassword } from './service';
-
-jest.mock('@edx/frontend-platform');
-jest.mock('@edx/frontend-platform/auth');
-jest.mock('form-urlencoded');
-jest.mock('../../data/utils');
-
-describe('postResetPassword', () => {
-  const mockPost = jest.fn();
-
-  beforeEach(() => {
-    jest.resetAllMocks();
-
-    getConfig.mockReturnValue({
-      LMS_BASE_URL: 'http://testserver',
-    });
-
-    getAuthenticatedHttpClient.mockReturnValue({
-      post: mockPost,
-    });
-
-    formurlencoded.mockImplementation(obj => `encoded:${JSON.stringify(obj)}`);
-  });
-
-  it('posts reset password request with email', async () => {
-    const mockResponse = { data: { success: true, email_sent: true } };
-    mockPost.mockResolvedValueOnce(mockResponse);
-
-    const result = await postResetPassword('user@example.com');
-
-    expect(getConfig).toHaveBeenCalled();
-    expect(getAuthenticatedHttpClient).toHaveBeenCalled();
-    expect(formurlencoded).toHaveBeenCalledWith({ email: 'user@example.com' });
-
-    expect(mockPost).toHaveBeenCalledWith(
-      'http://testserver/password_reset/',
-      'encoded:{"email":"user@example.com"}',
-      {
-        headers: {
-          'Content-Type': 'application/x-www-form-urlencoded',
-        },
-      },
-    );
-
-    expect(result).toEqual(mockResponse.data);
-  });
-
-  it('calls handleRequestError and throws when request fails', async () => {
-    const mockError = new Error('Reset password failed');
-    mockPost.mockRejectedValueOnce(mockError);
-
-    handleRequestError.mockImplementation(() => {
-      throw mockError;
-    });
-
-    await expect(postResetPassword('bad@example.com')).rejects.toThrow('Reset password failed');
-
-    expect(handleRequestError).toHaveBeenCalledWith(mockError);
-  });
-});
--- a/src/account-settings/site-language/service.test.js
+++ b/src/account-settings/site-language/service.test.js
@@ -1,95 +0,0 @@
-import { getConfig } from '@edx/frontend-platform';
-import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import { convertKeyNames, snakeCaseObject } from '@edx/frontend-platform/utils';
-
-import { getSiteLanguageList, patchPreferences, postSetLang } from './service';
-
-jest.mock('@edx/frontend-platform');
-jest.mock('@edx/frontend-platform/auth');
-jest.mock('@edx/frontend-platform/utils');
-jest.mock('./constants', () => (['en', 'es', 'fr']));
-
-describe('preferencesApi', () => {
-  const mockPatch = jest.fn();
-  const mockPost = jest.fn();
-
-  beforeEach(() => {
-    jest.resetAllMocks();
-
-    getConfig.mockReturnValue({
-      LMS_BASE_URL: 'http://testserver',
-    });
-
-    getAuthenticatedHttpClient.mockReturnValue({
-      patch: mockPatch,
-      post: mockPost,
-    });
-
-    snakeCaseObject.mockImplementation(obj => obj);
-    convertKeyNames.mockImplementation((obj) => obj);
-  });
-
-  describe('getSiteLanguageList', () => {
-    it('returns the siteLanguageList constant', async () => {
-      const result = await getSiteLanguageList();
-      expect(result).toEqual(['en', 'es', 'fr']);
-    });
-  });
-
-  describe('patchPreferences', () => {
-    it('patches preferences with processed params and returns the original params', async () => {
-      const username = 'testuser';
-      const params = { prefLang: 'en', darkMode: true };
-      const processed = { 'pref-lang': 'en', dark_mode: true };
-
-      // Mock conversions
-      snakeCaseObject.mockReturnValueOnce({ pref_lang: 'en', dark_mode: true });
-      convertKeyNames.mockReturnValueOnce(processed);
-
-      mockPatch.mockResolvedValueOnce({ data: { success: true } });
-
-      const result = await patchPreferences(username, params);
-
-      expect(snakeCaseObject).toHaveBeenCalledWith(params);
-      expect(convertKeyNames).toHaveBeenCalledWith(
-        { pref_lang: 'en', dark_mode: true },
-        { pref_lang: 'pref-lang' },
-      );
-
-      expect(mockPatch).toHaveBeenCalledWith(
-        'http://testserver/api/user/v1/preferences/testuser',
-        processed,
-        {
-          headers: { 'Content-Type': 'application/merge-patch+json' },
-        },
-      );
-
-      expect(result).toEqual(params);
-    });
-  });
-
-  describe('postSetLang', () => {
-    it('posts language selection via FormData', async () => {
-      const mockResponse = { data: { success: true } };
-      mockPost.mockResolvedValueOnce(mockResponse);
-
-      const appendSpy = jest.spyOn(FormData.prototype, 'append');
-
-      await postSetLang('fr');
-
-      expect(appendSpy).toHaveBeenCalledWith('language', 'fr');
-      expect(mockPost).toHaveBeenCalledWith(
-        'http://testserver/i18n/setlang/',
-        expect.any(FormData),
-        {
-          headers: {
-            Accept: 'application/json',
-            'X-Requested-With': 'XMLHttpRequest',
-          },
-        },
-      );
-
-      appendSpy.mockRestore();
-    });
-  });
-});
--- a/src/account-settings/test/AccountSettingsPage.test.jsx
+++ b/src/account-settings/test/AccountSettingsPage.test.jsx
@@ -15,7 +15,7 @@ import mockData from './mockData';
 const mockDispatch = jest.fn();
 jest.mock('@edx/frontend-platform/analytics', () => ({
  sendTrackingLogEvent: jest.fn(),
-  getCountryList: jest.fn(() => [{ code: 'US', name: 'United States' }]),
+  getCountryList: jest.fn(),
 }));

 jest.mock('react-redux', () => ({
@@ -25,19 +25,6 @@ jest.mock('react-redux', () => ({

 jest.mock('@edx/frontend-platform/auth');

-jest.mock('@edx/frontend-platform', () => ({
-  ...jest.requireActual('@edx/frontend-platform'),
-  getConfig: jest.fn(() => ({
-    SITE_NAME: 'edX',
-    SUPPORT_URL: 'https://support.edx.org',
-    ENABLE_ACCOUNT_DELETION: true,
-    ENABLE_COPPA_COMPLIANCE: false,
-    COUNTRIES_WITH_DELETE_ACCOUNT_DISABLED: [],
-  })),
-  getCountryList: jest.fn(() => [{ code: 'US', name: 'United States' }]),
-  getLanguageList: jest.fn(() => [{ code: 'en', name: 'English' }]),
-}));
-
 const IntlAccountSettingsPage = injectIntl(AccountSettingsPage);

 const middlewares = [thunk];
@@ -76,67 +63,14 @@ describe('AccountSettingsPage', () => {
            field_value: '',
          },
        ],
-        country: 'US',
-        level_of_education: 'b',
-        gender: 'm',
-        language_proficiencies: 'es',
-        social_link_linkedin: 'https://linkedin.com/in/testuser',
-        social_link_facebook: '',
-        social_link_twitter: '',
-        time_zone: 'America/New_York',
-        state: 'NY',
-        secondary_email_enabled: true,
-        secondary_email: 'test_recovery@test.com',
-        year_of_birth: '1990',
+
      },
      fetchSettings: jest.fn(),
-      fetchSiteLanguages: jest.fn(),
-      fetchNotificationPreferences: jest.fn(),
-      saveSettings: jest.fn(),
-      updateDraft: jest.fn(),
-      beginNameChange: jest.fn(),
-      saveMultipleSettings: jest.fn(),
-      timeZoneOptions: [
-        { label: 'America/New_York', value: 'America/New_York' },
-      ],
-      countryTimeZoneOptions: [
-        { label: 'America/New_York', value: 'America/New_York' },
-      ],
-      siteLanguageOptions: [
-        { label: 'English', value: 'en' },
-      ],
-      tpaProviders: [
-        {
-          id: 'oa2-google-oauth2',
-          name: 'Google',
-          connected: false,
-          accepts_logins: true,
-          connectUrl: 'http://localhost:18000/auth/login/google-oauth2/',
-          disconnectUrl: 'http://localhost:18000/auth/disconnect/google-oauth2/',
-        },
-      ],
-      isActive: true,
-      staticFields: [],
-      profileDataManager: null,
-      verifiedName: null,
-      mostRecentVerifiedName: {},
-      verifiedNameHistory: [],
-      countriesCodesList: ['US'],
    };
  });

  afterEach(() => jest.clearAllMocks());

-  beforeAll(() => {
-    global.lightningjs = {
-      require: jest.fn().mockImplementation((module, url) => ({ moduleName: module, url })),
-    };
-  });
-
-  afterAll(() => {
-    delete global.lightningjs;
-  });
-
  it('renders AccountSettingsPage correctly with editing enabled', async () => {
    const { getByText, rerender, getByLabelText } = render(reduxWrapper(<IntlAccountSettingsPage {...props} />));

@@ -164,70 +98,4 @@ describe('AccountSettingsPage', () => {

    fireEvent.click(submitButton);
  });
-
-  it('renders Account Information section with correct field values', () => {
-    render(reduxWrapper(<AccountSettingsPage {...props} />));
-
-    expect(screen.getByText('test_username')).toBeInTheDocument();
-    expect(screen.getByText('test_name')).toBeInTheDocument();
-    expect(screen.getByText('test_email@test.com')).toBeInTheDocument();
-    expect(screen.getByText('test_recovery@test.com')).toBeInTheDocument();
-    expect(screen.getByText('1990')).toBeInTheDocument();
-  });
-
-  it('renders Profile Information section with correct field values', () => {
-    render(reduxWrapper(<AccountSettingsPage {...props} />));
-
-    expect(screen.getByText('Bachelor\'s Degree')).toBeInTheDocument();
-    expect(screen.getByText('Male')).toBeInTheDocument();
-    expect(screen.getByText('Add work experience')).toBeInTheDocument();
-    expect(screen.getByText('English')).toBeInTheDocument();
-  });
-
-  it('renders Social Media section with correct field values', () => {
-    render(reduxWrapper(<AccountSettingsPage {...props} />));
-
-    expect(screen.getByText('https://linkedin.com/in/testuser')).toBeInTheDocument();
-    expect(screen.getByText('Add Facebook profile')).toBeInTheDocument();
-    expect(screen.getByText('Add Twitter profile')).toBeInTheDocument();
-  });
-
-  it('renders Site Preferences section with correct field values', () => {
-    render(reduxWrapper(<AccountSettingsPage {...props} />));
-
-    expect(screen.getByText('English')).toBeInTheDocument();
-    expect(screen.getByText('America/New_York')).toBeInTheDocument();
-  });
-
-  it('renders Delete Account section when enabled', () => {
-    // eslint-disable-next-line global-require
-    const { getConfig } = require('@edx/frontend-platform');
-    jest.spyOn({ getConfig }, 'getConfig').mockImplementation(() => ({
-      SITE_NAME: 'edX',
-      SUPPORT_URL: 'https://support.edx.org',
-      ENABLE_ACCOUNT_DELETION: true,
-      ENABLE_COPPA_COMPLIANCE: false,
-      COUNTRIES_WITH_DELETE_ACCOUNT_DISABLED: [],
-    }));
-
-    render(reduxWrapper(<AccountSettingsPage {...props} />));
-
-    expect(screen.getByText('We\'re sorry to see you go!')).toBeInTheDocument();
-  });
-
-  it('does not render Delete Account section when disabled', () => {
-    // eslint-disable-next-line global-require
-    const { getConfig } = require('@edx/frontend-platform');
-    jest.spyOn({ getConfig }, 'getConfig').mockImplementation(() => ({
-      SITE_NAME: 'edX',
-      SUPPORT_URL: 'https://support.edx.org',
-      ENABLE_ACCOUNT_DELETION: false,
-      ENABLE_COPPA_COMPLIANCE: false,
-      COUNTRIES_WITH_DELETE_ACCOUNT_DISABLED: [],
-    }));
-
-    render(reduxWrapper(<AccountSettingsPage {...props} />));
-
-    expect(screen.queryByText('We\'re sorry to see you go!')).not.toBeInTheDocument();
-  });
 });
--- a/src/account-settings/test/DOBForm.test.jsx
+++ b/src/account-settings/test/DOBForm.test.jsx
@@ -1,144 +0,0 @@
-import {
-  render, screen, fireEvent, waitFor,
-} from '@testing-library/react';
-import { Provider } from 'react-redux';
-import configureStore from 'redux-mock-store';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { act } from 'react-dom/test-utils';
-import * as reactRedux from 'react-redux';
-import DOBModal from '../DOBForm';
-import messages from '../AccountSettingsPage.messages';
-import { YEAR_OF_BIRTH_OPTIONS } from '../data/constants';
-
-jest.mock('react-redux', () => ({
-  ...jest.requireActual('react-redux'),
-  useDispatch: jest.fn(),
-}));
-
-jest.mock('@edx/frontend-platform/i18n', () => ({
-  ...jest.requireActual('@edx/frontend-platform/i18n'),
-  useIntl: () => ({
-    formatMessage: (message) => message.defaultMessage,
-  }),
-}));
-
-jest.mock('@openedx/paragon', () => ({
-  ...jest.requireActual('@openedx/paragon'),
-  Form: {
-    ...jest.requireActual('@openedx/paragon').Form,
-    Control: {
-      ...jest.requireActual('@openedx/paragon').Form.Control,
-      // eslint-disable-next-line react/prop-types
-      Feedback: ({ children, ...props }) => <div {...props}>{children}</div>,
-    },
-  },
-}));
-
-const mockStore = configureStore([]);
-
-describe('DOBModal', () => {
-  let store;
-  let mockDispatch;
-
-  beforeEach(() => {
-    store = mockStore({
-      accountSettings: {
-        saveState: 'default',
-        errors: {},
-        openFormId: null,
-        confirmationValues: {},
-      },
-    });
-    mockDispatch = jest.fn();
-    jest.spyOn(reactRedux, 'useDispatch').mockReturnValue(mockDispatch); // ✅ replaced require with import
-    // Mock localStorage.setItem
-    Object.defineProperty(window, 'localStorage', {
-      value: {
-        setItem: jest.fn(),
-      },
-      writable: true,
-    });
-  });
-
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
-  const renderComponent = (props = {}) => render(
-    <Provider store={store}>
-      <IntlProvider locale="en">
-        <DOBModal
-          saveState="default"
-          error={undefined}
-          onSubmit={jest.fn()}
-          {...props}
-        />
-      </IntlProvider>
-    </Provider>,
-  );
-
-  it('renders the modal with correct elements', async () => {
-    renderComponent();
-    const openButton = screen.getByTestId('open-modal-button');
-    expect(openButton).toHaveTextContent(messages['account.settings.field.dob.form.button'].defaultMessage);
-
-    fireEvent.click(openButton);
-
-    expect(screen.getByTestId('modal-title')).toHaveTextContent(messages['account.settings.field.dob.form.title'].defaultMessage);
-    expect(screen.getByTestId('help-text')).toHaveTextContent(messages['account.settings.field.dob.form.help.text'].defaultMessage);
-    expect(screen.getByTestId('month-label')).toHaveTextContent(messages['account.settings.field.dob.month'].defaultMessage);
-    expect(screen.getByTestId('year-label')).toHaveTextContent(messages['account.settings.field.dob.year'].defaultMessage);
-    expect(screen.getByTestId('month-select')).toBeInTheDocument();
-    expect(screen.getByTestId('year-select')).toBeInTheDocument();
-    expect(screen.getByTestId('cancel-button')).toBeInTheDocument();
-    expect(screen.getByTestId('submit-button')).toBeInTheDocument();
-  });
-
-  it('enables submit button when both month and year are selected', async () => {
-    renderComponent();
-    const openButton = screen.getByTestId('open-modal-button');
-    await act(async () => {
-      fireEvent.click(openButton);
-    });
-    await waitFor(() => {
-      const monthSelect = screen.getByTestId('month-select');
-      const yearSelect = screen.getByTestId('year-select');
-      const submitButton = screen.getByTestId('submit-button');
-
-      act(() => {
-        fireEvent.change(monthSelect, { target: { value: '6' } });
-        fireEvent.change(yearSelect, { target: { value: YEAR_OF_BIRTH_OPTIONS[0].value } });
-      });
-
-      expect(submitButton).not.toHaveAttribute('disabled');
-    }, { timeout: 2000 });
-  });
-
-  it('calls onSubmit with correct data when form is submitted', async () => {
-    const mockOnSubmit = jest.fn();
-    renderComponent({ onSubmit: mockOnSubmit });
-
-    const openButton = screen.getByTestId('open-modal-button');
-    await act(async () => {
-      fireEvent.click(openButton);
-    });
-    await waitFor(() => {
-      const monthSelect = screen.getByTestId('month-select');
-      const yearSelect = screen.getByTestId('year-select');
-      const form = screen.getByTestId('dob-form');
-
-      act(() => {
-        fireEvent.change(monthSelect, { target: { value: '6' } });
-        fireEvent.change(yearSelect, { target: { value: '1990' } });
-      });
-
-      act(() => {
-        fireEvent.submit(form);
-      });
-
-      expect(mockOnSubmit).toHaveBeenCalledWith('extended_profile', [
-        { field_name: 'DOB', field_value: '1990-6' },
-      ]);
-    }, { timeout: 2000 });
-  });
-});
--- a/src/account-settings/test/EditableField.test.jsx
+++ b/src/account-settings/test/EditableField.test.jsx
@@ -1,184 +0,0 @@
-import React from 'react';
-import {
-  render, screen, fireEvent, waitFor,
-} from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import configureStore from 'redux-mock-store';
-import { Provider } from 'react-redux';
-import EditableField from '../EditableField';
-import messages from '../AccountSettingsPage.messages';
-
-jest.mock('../data/selectors', () => ({
-  editableFieldSelector: () => (state, props) => ({
-    ...state.accountSettings,
-    isEditing: props.isEditing,
-    error: props.error || state.accountSettings.errors[props.name],
-    confirmationValue: props.confirmationValue || state.accountSettings.confirmationValues[props.name],
-  }),
-}));
-
-jest.mock('../data/actions', () => ({
-  openForm: jest.fn((name) => ({ type: 'OPEN_FORM', payload: name })),
-  closeForm: jest.fn((name) => ({ type: 'CLOSE_FORM', payload: name })),
-}));
-
-// eslint-disable-next-line react/prop-types
-jest.mock('../certificate-preference/CertificatePreference', () => function MockCertificatePreference({ fieldName }) {
-  return <div data-testid="editable-field-certificate-preference">Certificate Preference for {fieldName}</div>;
-});
-
-const mockStore = configureStore([]);
-const mockOnEdit = jest.fn();
-const mockOnCancel = jest.fn();
-const mockOnSubmit = jest.fn();
-const mockOnChange = jest.fn();
-
-const baseState = {
-  accountSettings: {
-    errors: {},
-    confirmationValues: {},
-    saveState: 'default',
-    openFormId: null,
-    verifiedNameHistory: { results: [] },
-    values: {},
-    drafts: {},
-    timeZones: [],
-    countryTimeZones: [],
-    thirdPartyAuth: { providers: [] },
-    countriesCodesList: [],
-    profileDataManager: false,
-    nameChangeModal: {},
-    loading: false,
-    loaded: true,
-    loadingError: null,
-  },
-};
-
-const renderComponent = (props = {}, stateOverrides = {}) => {
-  const store = mockStore({
-    ...baseState,
-    ...stateOverrides,
-  });
-  return render(
-    <Provider store={store}>
-      <IntlProvider locale="en">
-        <EditableField
-          name="username"
-          label="Username"
-          type="text"
-          value="john_doe"
-          onEdit={mockOnEdit}
-          onCancel={mockOnCancel}
-          onSubmit={mockOnSubmit}
-          onChange={mockOnChange}
-          isEditing={false}
-          {...props}
-        />
-      </IntlProvider>
-    </Provider>,
-  );
-};
-
-describe('EditableField', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('renders default state with value', () => {
-    renderComponent();
-    expect(screen.getByText('Username')).toBeInTheDocument();
-    expect(screen.getByText('john_doe')).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /Edit/i })).toBeInTheDocument();
-  });
-
-  it('renders empty label with edit button if no value and editable', () => {
-    renderComponent({ value: '', emptyLabel: 'Add value' });
-    expect(screen.getByRole('button', { name: 'Add value' })).toBeInTheDocument();
-  });
-
-  it('renders empty label as muted text if not editable', () => {
-    renderComponent({ value: '', emptyLabel: 'No value', isEditable: false });
-    expect(screen.getByText('No value')).toHaveClass('text-muted');
-  });
-
-  it('renders editing state with form controls', async () => {
-    renderComponent({ isEditing: true });
-    await waitFor(() => {
-      expect(screen.getByTestId('editable-field-textbox')).toHaveValue('john_doe');
-      expect(screen.getByTestId('editable-field-save')).toBeInTheDocument();
-      expect(screen.getByTestId('editable-field-cancel')).toBeInTheDocument();
-    }, { timeout: 2000 });
-  });
-
-  it('calls onChange when input changes', async () => {
-    renderComponent({ isEditing: true });
-    await waitFor(() => {
-      const input = screen.getByTestId('editable-field-textbox');
-      fireEvent.change(input, { target: { value: 'new_name' } });
-      expect(mockOnChange).toHaveBeenCalledWith('username', 'new_name');
-    }, { timeout: 2000 });
-  });
-
-  it('calls onSubmit when form is submitted', async () => {
-    renderComponent({ isEditing: true });
-    await waitFor(() => {
-      const form = screen.getByTestId('editable-field-form');
-      fireEvent.submit(form);
-      expect(mockOnSubmit).toHaveBeenCalledWith('username', 'john_doe');
-    }, { timeout: 2000 });
-  });
-
-  it('shows error message when error is present', async () => {
-    const stateOverrides = {
-      accountSettings: {
-        ...baseState.accountSettings,
-        errors: { username: 'Invalid input' },
-      },
-    };
-    renderComponent({ isEditing: true, error: 'Invalid input' }, stateOverrides);
-    await waitFor(() => {
-      expect(screen.getByTestId('editable-field-error')).toHaveTextContent('Invalid input');
-    }, { timeout: 2000 });
-  });
-
-  it('shows help text in editing mode', () => {
-    renderComponent({ isEditing: true, helpText: 'Helpful info' });
-    expect(screen.getByText('Helpful info')).toBeInTheDocument();
-  });
-
-  it('shows confirmation message in default mode if provided', async () => {
-    const stateOverrides = {
-      accountSettings: {
-        ...baseState.accountSettings,
-        confirmationValues: { username: 'done' },
-      },
-    };
-    renderComponent(
-      {
-        confirmationMessageDefinition: messages['account.settings.editable.field.action.save'],
-        confirmationValue: 'done',
-      },
-      stateOverrides,
-    );
-    await waitFor(() => {
-      expect(screen.getByTestId('editable-field-confirmation')).toBeInTheDocument();
-    }, { timeout: 2000 });
-  });
-
-  it('renders CertificatePreference for name fields when editing', async () => {
-    renderComponent({ isEditing: true, name: 'name' });
-    await waitFor(() => {
-      expect(screen.getByTestId('editable-field-certificate-preference')).toHaveTextContent('Certificate Preference for name');
-    }, { timeout: 2000 });
-  });
-
-  it('applies grayed-out class when isGrayedOut is true', () => {
-    renderComponent({ isGrayedOut: true });
-    expect(screen.getByText('john_doe')).toHaveClass('grayed-out');
-  });
-
-  it('appends userSuppliedValue when provided', () => {
-    renderComponent({ userSuppliedValue: 'extra' });
-    expect(screen.getByText('john_doe: extra')).toBeInTheDocument();
-  });
-});
--- a/src/account-settings/test/EditableSelectField.test.jsx
+++ b/src/account-settings/test/EditableSelectField.test.jsx
@@ -1,9 +1,10 @@
+import React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { Provider } from 'react-redux';
 import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';

-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';

 import EditableSelectField from '../EditableSelectField';

@@ -16,6 +17,8 @@ jest.mock('react-redux', () => ({
 jest.mock('@edx/frontend-platform/auth');
 jest.mock('../data/selectors', () => jest.fn().mockImplementation(() => ({ certPreferenceSelector: () => ({}) })));

+const IntlEditableSelectField = injectIntl(EditableSelectField);
+
 const mockStore = configureStore();

 describe('EditableSelectField', () => {
@@ -85,7 +88,7 @@ describe('EditableSelectField', () => {
  afterEach(() => jest.clearAllMocks());

  it('renders EditableSelectField correctly with editing disabled', () => {
-    const tree = renderer.create(reduxWrapper(<EditableSelectField {...props} />)).toJSON();
+    const tree = renderer.create(reduxWrapper(<IntlEditableSelectField {...props} />)).toJSON();
    expect(tree).toMatchSnapshot();
  });

@@ -95,7 +98,7 @@ describe('EditableSelectField', () => {
      isEditing: true,
    };

-    const tree = renderer.create(reduxWrapper(<EditableSelectField {...props} />)).toJSON();
+    const tree = renderer.create(reduxWrapper(<IntlEditableSelectField {...props} />)).toJSON();
    expect(tree).toMatchSnapshot();
  });

@@ -104,7 +107,7 @@ describe('EditableSelectField', () => {
      ...props,
      error: 'This is an error message',
    };
-    const tree = renderer.create(reduxWrapper(<EditableSelectField {...errorProps} />)).toJSON();
+    const tree = renderer.create(reduxWrapper(<IntlEditableSelectField {...errorProps} />)).toJSON();
    expect(tree).toMatchSnapshot();
  });

@@ -123,7 +126,7 @@ describe('EditableSelectField', () => {
        },
      ],
    };
-    const tree = renderer.create(reduxWrapper(<EditableSelectField {...propsWithGroup} />)).toJSON();
+    const tree = renderer.create(reduxWrapper(<IntlEditableSelectField {...propsWithGroup} />)).toJSON();
    expect(tree).toMatchSnapshot();
  });

@@ -137,7 +140,7 @@ describe('EditableSelectField', () => {
        },
      ],
    };
-    const tree = renderer.create(reduxWrapper(<EditableSelectField {...propsWithoutGroup} />)).toJSON();
+    const tree = renderer.create(reduxWrapper(<IntlEditableSelectField {...propsWithoutGroup} />)).toJSON();
    expect(tree).toMatchSnapshot();
  });

@@ -160,7 +163,7 @@ describe('EditableSelectField', () => {
        },
      ],
    };
-    const tree = renderer.create(reduxWrapper(<EditableSelectField {...propsWithGroups} />)).toJSON();
+    const tree = renderer.create(reduxWrapper(<IntlEditableSelectField {...propsWithGroups} />)).toJSON();
    expect(tree).toMatchSnapshot();
  });
 });
--- a/src/account-settings/test/JumpNav.test.jsx
+++ b/src/account-settings/test/JumpNav.test.jsx
@@ -1,16 +1,21 @@
-import { render, screen } from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
 import { AppProvider } from '@edx/frontend-platform/react';
 import { initializeMockApp, mergeConfig, setConfig } from '@edx/frontend-platform';

 import JumpNav from '../JumpNav';
 import configureStore from '../../data/configureStore';

+const IntlJumpNav = injectIntl(JumpNav);
+
 describe('JumpNav', () => {
  mergeConfig({
+    ENABLE_DEMOGRAPHICS_COLLECTION: false,
    ENABLE_ACCOUNT_DELETION: true,
  });

+  let props = {};
  let store;

  beforeEach(() => {
@@ -23,6 +28,10 @@ describe('JumpNav', () => {
      },
    });

+    props = {
+      intl: {},
+      displayDemographicsLink: false,
+    };
    store = configureStore({
      notificationPreferences: {
        showPreferences: false,
@@ -30,35 +39,43 @@ describe('JumpNav', () => {
    });
  });

-  it('should not render delete account link', async () => {
+  it('should not render Optional Information or delete account link', () => {
    setConfig({
      ENABLE_ACCOUNT_DELETION: false,
    });

-    render(
+    const tree = renderer.create((
      <IntlProvider locale="en">
        <AppProvider store={store}>
-          <JumpNav />
+          <IntlJumpNav {...props} />
        </AppProvider>
-      </IntlProvider>,
-    );
+      </IntlProvider>
+    ))
+      .toJSON();

-    expect(await screen.queryByText('Delete My Account')).toBeNull();
+    expect(tree).toMatchSnapshot();
  });

-  it('should render delete account link', async () => {
+  it('should render Optional Information and delete account link', () => {
    setConfig({
+      ENABLE_DEMOGRAPHICS_COLLECTION: true,
      ENABLE_ACCOUNT_DELETION: true,
    });

-    render(
+    props = {
+      ...props,
+      displayDemographicsLink: true,
+    };
+
+    const tree = renderer.create((
      <IntlProvider locale="en">
        <AppProvider store={store}>
-          <JumpNav />
+          <IntlJumpNav {...props} />
        </AppProvider>
-      </IntlProvider>,
-    );
+      </IntlProvider>
+    ))
+      .toJSON();

-    expect(await screen.findByText('Delete My Account')).toBeVisible();
+    expect(tree).toMatchSnapshot();
  });
 });
--- a/src/account-settings/test/snapshots/EditableSelectField.test.jsx.snap
+++ b/src/account-settings/test/snapshots/EditableSelectField.test.jsx.snap
@@ -35,8 +35,8 @@ exports[`EditableSelectField renders EditableSelectField correctly with editing
        >
          <svg
            aria-hidden="true"
-            className="svg-inline--fa fa-pencil mr-1"
-            data-icon="pencil"
+            className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+            data-icon="pencil-alt"
            data-prefix="fas"
            focusable="false"
            role="img"
@@ -45,7 +45,7 @@ exports[`EditableSelectField renders EditableSelectField correctly with editing
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
-              d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+              d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
              fill="currentColor"
              style={{}}
            />
@@ -172,7 +172,9 @@ exports[`EditableSelectField renders EditableSelectField correctly with editing
              />
            </svg>
          </span>
-          <div />
+          <div>
+            
+          </div>
        </div>
      </div>
      <p>
@@ -241,8 +243,8 @@ exports[`EditableSelectField renders EditableSelectField with an error 1`] = `
        >
          <svg
            aria-hidden="true"
-            className="svg-inline--fa fa-pencil mr-1"
-            data-icon="pencil"
+            className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+            data-icon="pencil-alt"
            data-prefix="fas"
            focusable="false"
            role="img"
@@ -251,7 +253,7 @@ exports[`EditableSelectField renders EditableSelectField with an error 1`] = `
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
-              d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+              d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
              fill="currentColor"
              style={{}}
            />
@@ -310,8 +312,8 @@ exports[`EditableSelectField renders selectOptions when option does not have a g
        >
          <svg
            aria-hidden="true"
-            className="svg-inline--fa fa-pencil mr-1"
-            data-icon="pencil"
+            className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+            data-icon="pencil-alt"
            data-prefix="fas"
            focusable="false"
            role="img"
@@ -320,7 +322,7 @@ exports[`EditableSelectField renders selectOptions when option does not have a g
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
-              d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+              d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
              fill="currentColor"
              style={{}}
            />
@@ -379,8 +381,8 @@ exports[`EditableSelectField renders selectOptions when option has a group 1`] =
        >
          <svg
            aria-hidden="true"
-            className="svg-inline--fa fa-pencil mr-1"
-            data-icon="pencil"
+            className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+            data-icon="pencil-alt"
            data-prefix="fas"
            focusable="false"
            role="img"
@@ -389,7 +391,7 @@ exports[`EditableSelectField renders selectOptions when option has a group 1`] =
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
-              d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+              d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
              fill="currentColor"
              style={{}}
            />
@@ -448,8 +450,8 @@ exports[`EditableSelectField renders selectOptions with multiple groups 1`] = `
        >
          <svg
            aria-hidden="true"
-            className="svg-inline--fa fa-pencil mr-1"
-            data-icon="pencil"
+            className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+            data-icon="pencil-alt"
            data-prefix="fas"
            focusable="false"
            role="img"
@@ -458,7 +460,7 @@ exports[`EditableSelectField renders selectOptions with multiple groups 1`] = `
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
-              d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+              d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
              fill="currentColor"
              style={{}}
            />
--- a/src/account-settings/test/snapshots/JumpNav.test.jsx.snap
+++ b/src/account-settings/test/snapshots/JumpNav.test.jsx.snap
@@ -0,0 +1,197 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`JumpNav should not render Optional Information or delete account link 1`] = `
+<div
+  data-testid="redux-provider"
+>
+  <div
+    data-testid="browser-router"
+  >
+    <div
+      className="jump-nav px-2.25 jump-nav-sm position-sticky pt-3"
+    >
+      <ul
+        className="list-unstyled"
+        style={{}}
+      >
+        <li
+          className=""
+        >
+          <a
+            aria-current="page"
+            className="active"
+            href="/#basic-information"
+            isActive={[Function]}
+            onClick={[Function]}
+          >
+            Account Information
+          </a>
+        </li>
+        <li
+          className=""
+        >
+          <a
+            aria-current="page"
+            className="active"
+            href="/#profile-information"
+            isActive={[Function]}
+            onClick={[Function]}
+          >
+            Profile Information
+          </a>
+        </li>
+        <li
+          className=""
+        >
+          <a
+            aria-current="page"
+            className="active"
+            href="/#social-media"
+            isActive={[Function]}
+            onClick={[Function]}
+          >
+            Social Media Links
+          </a>
+        </li>
+        <li
+          className=""
+        >
+          <a
+            aria-current="page"
+            className="active"
+            href="/#site-preferences"
+            isActive={[Function]}
+            onClick={[Function]}
+          >
+            Site Preferences
+          </a>
+        </li>
+        <li
+          className=""
+        >
+          <a
+            aria-current="page"
+            className="active"
+            href="/#linked-accounts"
+            isActive={[Function]}
+            onClick={[Function]}
+          >
+            Linked Accounts
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`JumpNav should render Optional Information and delete account link 1`] = `
+<div
+  data-testid="redux-provider"
+>
+  <div
+    data-testid="browser-router"
+  >
+    <div
+      className="jump-nav px-2.25 jump-nav-sm position-sticky pt-3"
+    >
+      <ul
+        className="list-unstyled"
+        style={{}}
+      >
+        <li
+          className=""
+        >
+          <a
+            aria-current="page"
+            className="active"
+            href="/#basic-information"
+            isActive={[Function]}
+            onClick={[Function]}
+          >
+            Account Information
+          </a>
+        </li>
+        <li
+          className=""
+        >
+          <a
+            aria-current="page"
+            className="active"
+            href="/#profile-information"
+            isActive={[Function]}
+            onClick={[Function]}
+          >
+            Profile Information
+          </a>
+        </li>
+        <li
+          className=""
+        >
+          <a
+            aria-current="page"
+            className="active"
+            href="/#demographics-information"
+            isActive={[Function]}
+            onClick={[Function]}
+          >
+            Optional Information
+          </a>
+        </li>
+        <li
+          className=""
+        >
+          <a
+            aria-current="page"
+            className="active"
+            href="/#social-media"
+            isActive={[Function]}
+            onClick={[Function]}
+          >
+            Social Media Links
+          </a>
+        </li>
+        <li
+          className=""
+        >
+          <a
+            aria-current="page"
+            className="active"
+            href="/#site-preferences"
+            isActive={[Function]}
+            onClick={[Function]}
+          >
+            Site Preferences
+          </a>
+        </li>
+        <li
+          className=""
+        >
+          <a
+            aria-current="page"
+            className="active"
+            href="/#linked-accounts"
+            isActive={[Function]}
+            onClick={[Function]}
+          >
+            Linked Accounts
+          </a>
+        </li>
+        <li
+          className=""
+        >
+          <a
+            aria-current="page"
+            className="active"
+            href="/#delete-account"
+            isActive={[Function]}
+            onClick={[Function]}
+          >
+            Delete My Account
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+`;
--- a/src/account-settings/test/mockData.js
+++ b/src/account-settings/test/mockData.js
@@ -6,7 +6,7 @@ const mockData = {
    data: null,
    values: {
      username: 'test_username',
-      country: 'US',
+      country: 'AD',
      accomplishments_shared: false,
      name: 'test_name',
      email: 'test_email@test.com',
@@ -18,18 +18,11 @@ const mockData = {
          field_value: '',
        },
      ],
-      gender: 'm',
+      gender: null,
+
      'pref-lang': 'en',
-      level_of_education: 'b',
-      language_proficiencies: 'es',
-      social_link_linkedin: 'https://linkedin.com/in/testuser',
-      social_link_facebook: '',
-      social_link_twitter: '',
-      time_zone: 'America/New_York',
-      state: 'NY',
-      secondary_email_enabled: true,
-      secondary_email: 'test_recovery@test.com',
-      year_of_birth: '1990',
+      shouldDisplayDemographicsSection: false,
+      demographicsOptions: false,
    },
    errors: {},
    confirmationValues: {},
@@ -37,14 +30,14 @@ const mockData = {
    saveState: null,
    timeZones: [
      {
-        time_zone: 'America/New_York',
-        description: 'America/New_York (EST, UTC-0500)',
+        time_zone: 'Africa/Abidjan',
+        description: 'Africa/Abidjan (GMT, UTC+0000)',
      },
    ],
    countryTimeZones: [
      {
-        time_zone: 'America/New_York',
-        description: 'America/New_York (EST, UTC-0500)',
+        time_zone: 'Europe/Andorra',
+        description: 'Europe/Andorra (CET, UTC+0100)',
      },
    ],
    previousSiteLanguage: null,
@@ -94,7 +87,7 @@ const mockData = {
    profileDataManager: null,
  },
  notificationPreferences: {
-    showPreferences: true,
+    showPreferences: false,
    courses: {
      status: 'success',
      courses: [],
@@ -108,7 +101,7 @@ const mockData = {
    preferences: {
      status: 'idle',
      updatePreferenceStatus: 'idle',
-      selectedCourse: 'account',
+      selectedCourse: null,
      preferences: [],
      apps: [],
      nonEditable: {},
--- a/src/divider/Divider.jsx
+++ b/src/divider/Divider.jsx
@@ -1,16 +0,0 @@
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-const Divider = ({ className, ...props }) => (
-  <div className={classNames('divider', className)} {...props} />
-);
-
-Divider.propTypes = {
-  className: PropTypes.string,
-};
-
-Divider.defaultProps = {
-  className: undefined,
-};
-
-export default Divider;
--- a/src/divider/index.jsx
+++ b/src/divider/index.jsx
@@ -1,2 +0,0 @@
-// eslint-disable-next-line import/prefer-default-export
-export { default as Divider } from './Divider';
--- a/src/head/Head.jsx
+++ b/src/head/Head.jsx
@@ -1,19 +1,21 @@
+import React from 'react';
 import { Helmet } from 'react-helmet';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';

 import messages from './messages';

-const Head = () => {
-  const intl = useIntl();
-  return (
-    <Helmet>
-      <title>
-        {intl.formatMessage(messages['account.page.title'], { siteName: getConfig().SITE_NAME })}
-      </title>
-      <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
-    </Helmet>
-  );
+const Head = ({ intl }) => (
+  <Helmet>
+    <title>
+      {intl.formatMessage(messages['account.page.title'], { siteName: getConfig().SITE_NAME })}
+    </title>
+    <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
+  </Helmet>
+);
+
+Head.propTypes = {
+  intl: intlShape.isRequired,
 };

-export default Head;
+export default injectIntl(Head);
--- a/src/head/Head.test.jsx
+++ b/src/head/Head.test.jsx
@@ -6,8 +6,9 @@ import { getConfig } from '@edx/frontend-platform';
 import Head from './Head';

 describe('Head', () => {
+  const props = {};
  it('should match render title tag and fivicon with the site configuration values', () => {
-    render(<IntlProvider locale="en"><Head /></IntlProvider>);
+    render(<IntlProvider locale="en"><Head {...props} /></IntlProvider>);
    const helmet = Helmet.peek();
    expect(helmet.title).toEqual(`Account | ${getConfig().SITE_NAME}`);
    expect(helmet.linkTags[0].rel).toEqual('shortcut icon');
--- a/src/hooks.js
+++ b/src/hooks.js
@@ -1,5 +1,4 @@
 import { useEffect, useState } from 'react';
-
 import { getConfig } from '@edx/frontend-platform';
 import { logError } from '@edx/frontend-platform/logging';
 import { breakpoints, useWindowSize } from '@openedx/paragon';
--- a/src/id-verification/AccessBlocked.jsx
+++ b/src/id-verification/AccessBlocked.jsx
@@ -1,13 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { getConfig } from '@edx/frontend-platform';
-import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';

 import messages from './IdVerification.messages';
 import { ERROR_REASONS } from './IdVerificationContext';

-const AccessBlocked = ({ error }) => {
-  const intl = useIntl();
+const AccessBlocked = ({ error, intl }) => {
  const handleMessage = () => {
    if (error === ERROR_REASONS.COURSE_ENROLLMENT) {
      return <p>{intl.formatMessage(messages['id.verification.access.blocked.enrollment'])}</p>;
@@ -43,7 +42,8 @@ const AccessBlocked = ({ error }) => {
 };

 AccessBlocked.propTypes = {
+  intl: intlShape.isRequired,
  error: PropTypes.string.isRequired,
 };

-export default AccessBlocked;
+export default injectIntl(AccessBlocked);
--- a/src/id-verification/CameraHelp.jsx
+++ b/src/id-verification/CameraHelp.jsx
@@ -1,44 +1,41 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Collapsible } from '@openedx/paragon';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';

 import { getConfig } from '@edx/frontend-platform';
 import messages from './IdVerification.messages';

-const CameraHelp = (props) => {
-  const intl = useIntl();
-
-  return (
-    <div>
-      <Collapsible
-        styling="card"
-        title={intl.formatMessage(messages['id.verification.camera.help.sight.question'])}
-        className="mb-4 shadow"
-        defaultOpen={props.isOpen}
-      >
-        <p>
-          {intl.formatMessage(messages[`id.verification.camera.help.sight.answer.${props.isPortrait ? 'portrait' : 'id'}`])}
-        </p>
-      </Collapsible>
-      <Collapsible
-        styling="card"
-        title={intl.formatMessage(messages[`id.verification.camera.help.difficulty.question.${props.isPortrait ? 'portrait' : 'id'}`])}
-        className="mb-4 shadow"
-        defaultOpen={props.isOpen}
-      >
-        <p>
-          {intl.formatMessage(
-            messages['id.verification.camera.help.difficulty.answer'],
-            { siteName: getConfig().SITE_NAME },
-          )}
-        </p>
-      </Collapsible>
-    </div>
-  );
-};
+const CameraHelp = (props) => (
+  <div>
+    <Collapsible
+      styling="card"
+      title={props.intl.formatMessage(messages['id.verification.camera.help.sight.question'])}
+      className="mb-4 shadow"
+      defaultOpen={props.isOpen}
+    >
+      <p>
+        {props.intl.formatMessage(messages[`id.verification.camera.help.sight.answer.${props.isPortrait ? 'portrait' : 'id'}`])}
+      </p>
+    </Collapsible>
+    <Collapsible
+      styling="card"
+      title={props.intl.formatMessage(messages[`id.verification.camera.help.difficulty.question.${props.isPortrait ? 'portrait' : 'id'}`])}
+      className="mb-4 shadow"
+      defaultOpen={props.isOpen}
+    >
+      <p>
+        {props.intl.formatMessage(
+          messages['id.verification.camera.help.difficulty.answer'],
+          { siteName: getConfig().SITE_NAME },
+        )}
+      </p>
+    </Collapsible>
+  </div>
+);

 CameraHelp.propTypes = {
+  intl: intlShape.isRequired,
  isOpen: PropTypes.bool,
  isPortrait: PropTypes.bool,
 };
@@ -48,4 +45,4 @@ CameraHelp.defaultProps = {
  isPortrait: false,
 };

-export default CameraHelp;
+export default injectIntl(CameraHelp);
--- a/src/id-verification/CameraHelpWithUpload.jsx
+++ b/src/id-verification/CameraHelpWithUpload.jsx
@@ -1,7 +1,7 @@
-import { useState, useContext } from 'react';
+import React, { useState, useContext } from 'react';
 import PropTypes from 'prop-types';
 import { Collapsible } from '@openedx/paragon';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';

 import messages from './IdVerification.messages';
@@ -11,7 +11,6 @@ import ImagePreview from './ImagePreview';
 import SupportedMediaTypes from './SupportedMediaTypes';

 const CameraHelpWithUpload = (props) => {
-  const intl = useIntl();
  const { setIdPhotoFile, idPhotoFile, userId } = useContext(IdVerificationContext);
  const [hasUploadedImage, setHasUploadedImage] = useState(false);

@@ -28,23 +27,24 @@ const CameraHelpWithUpload = (props) => {
    <div>
      <Collapsible
        styling="card"
-        title={intl.formatMessage(messages['id.verification.id.photo.unclear.question'])}
+        title={props.intl.formatMessage(messages['id.verification.id.photo.unclear.question'])}
        data-testid="collapsible"
        className="mb-4 shadow"
        defaultOpen={props.isOpen}
      >
-        {idPhotoFile && hasUploadedImage && <ImagePreview src={idPhotoFile} alt={intl.formatMessage(messages['id.verification.id.photo.preview.alt'])} />}
+        {idPhotoFile && hasUploadedImage && <ImagePreview src={idPhotoFile} alt={props.intl.formatMessage(messages['id.verification.id.photo.preview.alt'])} />}
        <p>
-          {intl.formatMessage(messages['id.verification.id.photo.instructions.upload'])}
+          {props.intl.formatMessage(messages['id.verification.id.photo.instructions.upload'])}
          <SupportedMediaTypes />
        </p>
-        <ImageFileUpload onFileChange={setAndTrackIdPhotoFile} />
+        <ImageFileUpload onFileChange={setAndTrackIdPhotoFile} intl={props.intl} />
      </Collapsible>
    </div>
  );
 };

 CameraHelpWithUpload.propTypes = {
+  intl: intlShape.isRequired,
  isOpen: PropTypes.bool,
 };

@@ -52,4 +52,4 @@ CameraHelpWithUpload.defaultProps = {
  isOpen: false,
 };

-export default CameraHelpWithUpload;
+export default injectIntl(CameraHelpWithUpload);
--- a/src/id-verification/CollapsibleImageHelp.jsx
+++ b/src/id-verification/CollapsibleImageHelp.jsx
@@ -1,13 +1,12 @@
-import { useContext } from 'react';
+import React, { useContext } from 'react';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Button, Collapsible } from '@openedx/paragon';

 import IdVerificationContext from './IdVerificationContext';
 import messages from './IdVerification.messages';

-const CollapsibleImageHelp = () => {
-  const intl = useIntl();
+const CollapsibleImageHelp = (props) => {
  const {
    userId, useCameraForId, setUseCameraForId,
  } = useContext(IdVerificationContext);
@@ -26,15 +25,15 @@ const CollapsibleImageHelp = () => {
    <Collapsible
      styling="card"
      title={useCameraForId
-        ? intl.formatMessage(messages['id.verification.photo.upload.help.title'])
-        : intl.formatMessage(messages['id.verification.photo.camera.help.title'])}
+        ? props.intl.formatMessage(messages['id.verification.photo.upload.help.title'])
+        : props.intl.formatMessage(messages['id.verification.photo.camera.help.title'])}
      className="mb-4 shadow"
      defaultOpen
    >
      <p data-testid="help-text">
        {useCameraForId
-          ? intl.formatMessage(messages['id.verification.photo.upload.help.text'])
-          : intl.formatMessage(messages['id.verification.photo.camera.help.text'])}
+          ? props.intl.formatMessage(messages['id.verification.photo.upload.help.text'])
+          : props.intl.formatMessage(messages['id.verification.photo.camera.help.text'])}
      </p>
      <Button
        title={useCameraForId ? 'Upload Photo' : 'Take Photo'} // TO-DO: translation
@@ -43,11 +42,15 @@ const CollapsibleImageHelp = () => {
        style={{ marginTop: '0.5rem' }}
      >
        {useCameraForId
-          ? intl.formatMessage(messages['id.verification.photo.upload.help.button'])
-          : intl.formatMessage(messages['id.verification.photo.camera.help.button'])}
+          ? props.intl.formatMessage(messages['id.verification.photo.upload.help.button'])
+          : props.intl.formatMessage(messages['id.verification.photo.camera.help.button'])}
      </Button>
    </Collapsible>
  );
 };

-export default CollapsibleImageHelp;
+CollapsibleImageHelp.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(CollapsibleImageHelp);
--- a/src/id-verification/IdVerification.messages.js
+++ b/src/id-verification/IdVerification.messages.js
@@ -46,11 +46,6 @@ const messages = defineMessages({
    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.modal.close.button': {
-    id: 'id.verification.privacy.modal.close.button',
-    defaultMessage: 'Close',
-    description: 'Label on button to close privacy information dialog.',
-  },
  'id.verification.privacy.title': {
    id: 'id.verification.privacy.title',
    defaultMessage: 'Privacy Information',
@@ -661,11 +656,6 @@ const messages = defineMessages({
    defaultMessage: 'Switch to Camera Mode',
    description: 'Button used to switch to camera mode.',
  },
-  'id.verification.context.loading.state': {
-    id: 'id.verification.context.loading.state',
-    defaultMessage: 'Loading verification status',
-    description: 'Message shown for screen readers when a user\'s identification verification is in the loading state',
-  },
 });

 export default messages;
--- a/src/id-verification/IdVerificationContextProvider.jsx
+++ b/src/id-verification/IdVerificationContextProvider.jsx
@@ -3,7 +3,6 @@ import React, {
 } from 'react';
 import PropTypes from 'prop-types';
 import { AppContext } from '@edx/frontend-platform/react';
-import { useIntl } from '@edx/frontend-platform/i18n';

 import { getProfileDataManager } from '../account-settings/data/service';
 import PageLoading from '../account-settings/PageLoading';
@@ -16,10 +15,7 @@ import { hasGetUserMediaSupport } from './getUserMediaShim';
 import IdVerificationContext, { MEDIA_ACCESS, ERROR_REASONS, VERIFIED_MODES } from './IdVerificationContext';
 import { VerifiedNameContext } from './VerifiedNameContext';

-import messages from './IdVerification.messages';
-
 const IdVerificationContextProvider = ({ children }) => {
-  const intl = useIntl();
  const { authenticatedUser } = useContext(AppContext);
  const { verifiedNameHistoryCallStatus, verifiedName } = useContext(VerifiedNameContext);

@@ -121,7 +117,7 @@ const IdVerificationContextProvider = ({ children }) => {
  const loadingStatuses = [IDLE_STATUS, LOADING_STATUS];
  // If we are waiting for verification status or verified name history endpoint, show spinner.
  if (loadingStatuses.includes(idVerificationData.status) || loadingStatuses.includes(verifiedNameHistoryCallStatus)) {
-    return <PageLoading srMessage={intl.formatMessage(messages['id.verification.context.loading.state'])} />;
+    return <PageLoading srMessage="Loading verification status" />;
  }

  if (!canVerify) {
--- a/src/id-verification/IdVerificationPage.jsx
+++ b/src/id-verification/IdVerificationPage.jsx
@@ -1,11 +1,11 @@
-import { useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { connect } from 'react-redux';
 import {
  Route, Routes, useLocation, useNavigate,
 } from 'react-router-dom';
 import camelCase from 'lodash.camelcase';
 import qs from 'qs';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Button, ModalDialog, ActionRow } from '@openedx/paragon';
 import { getConfig } from '@edx/frontend-platform';
 import { idVerificationSelector } from './data/selectors';
@@ -26,10 +26,9 @@ import SubmittedPanel from './panels/SubmittedPanel';
 import messages from './IdVerification.messages';

 // eslint-disable-next-line react/prefer-stateless-function
-const IdVerificationPage = () => {
+const IdVerificationPage = (props) => {
  const { search } = useLocation();
  const navigate = useNavigate();
-  const intl = useIntl();

  const [isModalOpen, setIsModalOpen] = useState(false);

@@ -79,33 +78,33 @@ const IdVerificationPage = () => {
      </div>
      <ModalDialog
        isOpen={isModalOpen}
-        title={intl.formatMessage(messages['id.verification.privacy.title'])}
+        title="Id modal"
        onClose={() => setIsModalOpen(false)}
        size="lg"
        hasCloseButton={false}
      >
        <ModalDialog.Header>
          <ModalDialog.Title data-testid="Id-modal">
-            {intl.formatMessage(messages['id.verification.privacy.title'])}
+            {props.intl.formatMessage(messages['id.verification.privacy.title'])}
          </ModalDialog.Title>
        </ModalDialog.Header>
        <ModalDialog.Body>
          <div className="p-3">
            <h6>
-              {intl.formatMessage(
+              {props.intl.formatMessage(
                messages['id.verification.privacy.need.photo.question'],
                { siteName: getConfig().SITE_NAME },
              )}
            </h6>
-            <p>{intl.formatMessage(messages['id.verification.privacy.need.photo.answer'])}</p>
+            <p>{props.intl.formatMessage(messages['id.verification.privacy.need.photo.answer'])}</p>
            <h6>
-              {intl.formatMessage(
+              {props.intl.formatMessage(
                messages['id.verification.privacy.do.with.photo.question'],
                { siteName: getConfig().SITE_NAME },
              )}
            </h6>
            <p>
-              {intl.formatMessage(
+              {props.intl.formatMessage(
                messages['id.verification.privacy.do.with.photo.answer'],
                { siteName: getConfig().SITE_NAME },
              )}
@@ -115,7 +114,7 @@ const IdVerificationPage = () => {
        <ModalDialog.Footer className="p-2">
          <ActionRow>
            <ModalDialog.CloseButton variant="link">
-              {intl.formatMessage(messages['id.verification.privacy.modal.close.button'])}
+              Close
            </ModalDialog.CloseButton>
          </ActionRow>
        </ModalDialog.Footer>
@@ -125,4 +124,8 @@ const IdVerificationPage = () => {
  );
 };

-export default connect(idVerificationSelector, {})(IdVerificationPage);
+IdVerificationPage.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default connect(idVerificationSelector, {})(injectIntl(IdVerificationPage));
--- a/src/id-verification/ImageFileUpload.jsx
+++ b/src/id-verification/ImageFileUpload.jsx
@@ -1,12 +1,11 @@
-import { useCallback, useState } from 'react';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import React, { useCallback, useState } from 'react';
+import { intlShape } from '@edx/frontend-platform/i18n';
 import PropTypes from 'prop-types';
 import { Alert } from '@openedx/paragon';
 import messages from './IdVerification.messages';
 import SupportedMediaTypes from './SupportedMediaTypes';

-const ImageFileUpload = ({ onFileChange }) => {
-  const intl = useIntl();
+const ImageFileUpload = ({ onFileChange, intl }) => {
  const [error, setError] = useState(null);
  const errorTypes = {
    invalidFileType: 'invalidFileType',
@@ -59,6 +58,7 @@ const ImageFileUpload = ({ onFileChange }) => {

 ImageFileUpload.propTypes = {
  onFileChange: PropTypes.func.isRequired,
+  intl: intlShape.isRequired,
 };

 export default ImageFileUpload;
--- a/src/id-verification/data/service.test.js
+++ b/src/id-verification/data/service.test.js
@@ -1,147 +0,0 @@
-import { getConfig } from '@edx/frontend-platform';
-import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import qs from 'qs';
-import { getExistingIdVerification, getEnrollments, submitIdVerification } from './service';
-
-jest.mock('@edx/frontend-platform', () => {
-  const actual = jest.requireActual('@edx/frontend-platform');
-  return {
-    ...actual,
-    getConfig: jest.fn(),
-  };
-});
-
-jest.mock('@edx/frontend-platform/auth', () => ({
-  getAuthenticatedHttpClient: jest.fn(),
-}));
-
-jest.mock('qs');
-
-describe('ID Verification Service', () => {
-  let mockHttpClient;
-
-  beforeEach(() => {
-    jest.resetAllMocks();
-
-    getConfig.mockReturnValue({ LMS_BASE_URL: 'http://test.lms' });
-
-    mockHttpClient = {
-      get: jest.fn(),
-      post: jest.fn(),
-    };
-
-    getAuthenticatedHttpClient.mockReturnValue(mockHttpClient);
-  });
-
-  describe('getExistingIdVerification', () => {
-    it('returns transformed data on success', async () => {
-      const mockResponse = {
-        data: { status: 'approved', expires: '2025-12-01', can_verify: true },
-      };
-      mockHttpClient.get.mockResolvedValue(mockResponse);
-
-      const result = await getExistingIdVerification();
-
-      expect(mockHttpClient.get).toHaveBeenCalledWith(
-        'http://test.lms/verify_student/status/',
-        { headers: { Accept: 'application/json' } },
-      );
-      expect(result).toEqual({
-        status: 'approved',
-        expires: '2025-12-01',
-        canVerify: true,
-      });
-    });
-
-    it('returns defaults on failure', async () => {
-      mockHttpClient.get.mockRejectedValue(new Error('Network error'));
-
-      const result = await getExistingIdVerification();
-
-      expect(result).toEqual({
-        status: null,
-        expires: null,
-        canVerify: false,
-      });
-    });
-  });
-
-  describe('getEnrollments', () => {
-    it('returns data on success', async () => {
-      const mockResponse = { data: [{ course_id: 'course-v1:test+T101+2025', mode: 'verified' }] };
-      mockHttpClient.get.mockResolvedValue(mockResponse);
-
-      const result = await getEnrollments();
-
-      expect(mockHttpClient.get).toHaveBeenCalledWith(
-        'http://test.lms/api/enrollment/v1/enrollment',
-        { headers: { Accept: 'application/json' } },
-      );
-      expect(result).toEqual(mockResponse.data);
-    });
-
-    it('returns empty object on failure', async () => {
-      mockHttpClient.get.mockRejectedValue(new Error('Server error'));
-
-      const result = await getEnrollments();
-
-      expect(result).toEqual({});
-    });
-  });
-
-  describe('submitIdVerification', () => {
-    it('posts transformed data and returns success', async () => {
-      const verificationData = {
-        facePhotoFile: 'face-img',
-        idPhotoFile: 'id-img',
-        idPhotoName: 'John Doe',
-        courseRunKey: 'course-v1:test+T101+2025',
-      };
-      const expectedPostData = {
-        face_image: 'face-img',
-        photo_id_image: 'id-img',
-        full_name: 'John Doe',
-      };
-      qs.stringify.mockReturnValue('encoded-data');
-      mockHttpClient.post.mockResolvedValue({});
-
-      const result = await submitIdVerification(verificationData);
-
-      expect(qs.stringify).toHaveBeenCalledWith(expectedPostData);
-      expect(mockHttpClient.post).toHaveBeenCalledWith(
-        'http://test.lms/verify_student/submit-photos/',
-        'encoded-data',
-        { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } },
-      );
-      expect(result).toEqual({ success: true, message: null });
-    });
-
-    it('omits null/undefined values', async () => {
-      const verificationData = {
-        facePhotoFile: 'face-img',
-        idPhotoFile: null,
-        idPhotoName: undefined,
-      };
-      qs.stringify.mockReturnValue('encoded-data');
-      mockHttpClient.post.mockResolvedValue({});
-
-      await submitIdVerification(verificationData);
-
-      expect(qs.stringify).toHaveBeenCalledWith({ face_image: 'face-img' });
-    });
-
-    it('returns failure object on error', async () => {
-      const error = new Error('Failed');
-      error.customAttributes = { httpErrorStatus: 400 };
-      mockHttpClient.post.mockRejectedValue(error);
-
-      const result = await submitIdVerification({ facePhotoFile: 'face-img' });
-
-      expect(result).toEqual({
-        success: false,
-        status: 400,
-        message: expect.stringContaining('Failed'),
-      });
-    });
-  });
-});
--- a/src/id-verification/panels/EnableCameraDirectionsPanel.jsx
+++ b/src/id-verification/panels/EnableCameraDirectionsPanel.jsx
@@ -1,17 +1,17 @@
 import PropTypes from 'prop-types';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import React from 'react';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import messages from '../IdVerification.messages';

 export const EnableCameraDirectionsPanel = (props) => {
-  const intl = useIntl();
  if (props.browserName === 'Internet Explorer') {
    return (
      <>
-        <h6>{intl.formatMessage(messages['id.verification.camera.access.failure.temporary.ie11'])}</h6>
+        <h6>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.ie11'])}</h6>
        <ol>
-          <li>{intl.formatMessage(messages['id.verification.camera.access.failure.temporary.ie11.step1'])}</li>
-          <li>{intl.formatMessage(messages['id.verification.camera.access.failure.temporary.ie11.step2'])}</li>
-          <li>{intl.formatMessage(messages['id.verification.camera.access.failure.temporary.ie11.step3'])}</li>
+          <li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.ie11.step1'])}</li>
+          <li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.ie11.step2'])}</li>
+          <li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.ie11.step3'])}</li>
        </ol>
      </>
    );
@@ -19,17 +19,17 @@ export const EnableCameraDirectionsPanel = (props) => {
  if (props.browserName === 'Chrome') {
    return (
      <>
-        <h6>{intl.formatMessage(messages['id.verification.camera.access.failure.temporary.chrome'])}</h6>
+        <h6>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.chrome'])}</h6>
        <ol>
-          <li>{intl.formatMessage(messages['id.verification.camera.access.failure.temporary.chrome.step1'])}</li>
-          <li>{intl.formatMessage(messages['id.verification.camera.access.failure.temporary.chrome.step2'])}</li>
+          <li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.chrome.step1'])}</li>
+          <li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.chrome.step2'])}</li>
          <ul>
-            <li>{intl.formatMessage(messages['id.verification.camera.access.failure.temporary.chrome.step2.windows'])}</li>
-            <li>{intl.formatMessage(messages['id.verification.camera.access.failure.temporary.chrome.step2.mac'])}</li>
+            <li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.chrome.step2.windows'])}</li>
+            <li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.chrome.step2.mac'])}</li>
          </ul>
-          <li>{intl.formatMessage(messages['id.verification.camera.access.failure.temporary.chrome.step3'])}</li>
-          <li>{intl.formatMessage(messages['id.verification.camera.access.failure.temporary.chrome.step4'])}</li>
-          <li>{intl.formatMessage(messages['id.verification.camera.access.failure.temporary.chrome.step5'])}</li>
+          <li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.chrome.step3'])}</li>
+          <li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.chrome.step4'])}</li>
+          <li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.chrome.step5'])}</li>
        </ol>
      </>
    );
@@ -37,15 +37,15 @@ export const EnableCameraDirectionsPanel = (props) => {
  if (props.browserName === 'Firefox') {
    return (
      <>
-        <h6>{intl.formatMessage(messages['id.verification.camera.access.failure.temporary.firefox'])}</h6>
+        <h6>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.firefox'])}</h6>
        <ol>
-          <li>{intl.formatMessage(messages['id.verification.camera.access.failure.temporary.firefox.step1'])}</li>
-          <li>{intl.formatMessage(messages['id.verification.camera.access.failure.temporary.firefox.step2'])}</li>
-          <li>{intl.formatMessage(messages['id.verification.camera.access.failure.temporary.firefox.step3'])}</li>
-          <li>{intl.formatMessage(messages['id.verification.camera.access.failure.temporary.firefox.step4'])}</li>
-          <li>{intl.formatMessage(messages['id.verification.camera.access.failure.temporary.firefox.step5'])}</li>
-          <li>{intl.formatMessage(messages['id.verification.camera.access.failure.temporary.firefox.step6'])}</li>
-          <li>{intl.formatMessage(messages['id.verification.camera.access.failure.temporary.firefox.step7'])}</li>
+          <li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.firefox.step1'])}</li>
+          <li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.firefox.step2'])}</li>
+          <li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.firefox.step3'])}</li>
+          <li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.firefox.step4'])}</li>
+          <li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.firefox.step5'])}</li>
+          <li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.firefox.step6'])}</li>
+          <li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.firefox.step7'])}</li>
        </ol>
      </>
    );
@@ -53,12 +53,12 @@ export const EnableCameraDirectionsPanel = (props) => {
  if (props.browserName === 'Safari') {
    return (
      <>
-        <h6>{intl.formatMessage(messages['id.verification.camera.access.failure.temporary.safari'])}</h6>
+        <h6>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.safari'])}</h6>
        <ol>
-          <li>{intl.formatMessage(messages['id.verification.camera.access.failure.temporary.safari.step1'])}</li>
-          <li>{intl.formatMessage(messages['id.verification.camera.access.failure.temporary.safari.step2'])}</li>
-          <li>{intl.formatMessage(messages['id.verification.camera.access.failure.temporary.safari.step3'])}</li>
-          <li>{intl.formatMessage(messages['id.verification.camera.access.failure.temporary.safari.step4'])}</li>
+          <li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.safari.step1'])}</li>
+          <li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.safari.step2'])}</li>
+          <li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.safari.step3'])}</li>
+          <li>{props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary.safari.step4'])}</li>
        </ol>
      </>
    );
@@ -68,7 +68,8 @@ export const EnableCameraDirectionsPanel = (props) => {
 };

 EnableCameraDirectionsPanel.propTypes = {
+  intl: intlShape.isRequired,
  browserName: PropTypes.string.isRequired,
 };

-export default EnableCameraDirectionsPanel;
+export default injectIntl(EnableCameraDirectionsPanel);
--- a/src/id-verification/panels/GetNameIdPanel.jsx
+++ b/src/id-verification/panels/GetNameIdPanel.jsx
@@ -1,9 +1,9 @@
-import {
+import React, {
  useContext, useEffect, useRef,
 } from 'react';
 import { Form } from '@openedx/paragon';
 import { Link, useNavigate, useLocation } from 'react-router-dom';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';

 import { useNextPanelSlug } from '../routing-utilities';
 import BasePanel from './BasePanel';
@@ -11,13 +11,12 @@ import IdVerificationContext from '../IdVerificationContext';

 import messages from '../IdVerification.messages';

-const GetNameIdPanel = () => {
+const GetNameIdPanel = (props) => {
  const location = useLocation();
  const navigate = useNavigate();
  const nameInputRef = useRef();
  const panelSlug = 'get-name-id';
  const nextPanelSlug = useNextPanelSlug(panelSlug);
-  const intl = useIntl();

  const { nameOnAccount, idPhotoName, setIdPhotoName } = useContext(IdVerificationContext);
  const nameOnAccountValue = nameOnAccount || '';
@@ -42,19 +41,19 @@ const GetNameIdPanel = () => {
  return (
    <BasePanel
      name={panelSlug}
-      title={intl.formatMessage(messages['id.verification.name.check.title'])}
+      title={props.intl.formatMessage(messages['id.verification.name.check.title'])}
    >
      <p>
-        {intl.formatMessage(messages['id.verification.name.check.instructions'])}
+        {props.intl.formatMessage(messages['id.verification.name.check.instructions'])}
      </p>
      <p>
-        {intl.formatMessage(messages['id.verification.name.check.mismatch.information'])}
+        {props.intl.formatMessage(messages['id.verification.name.check.mismatch.information'])}
      </p>

      <Form onSubmit={handleSubmit}>
        <Form.Group>
          <Form.Label className="font-weight-bold" htmlFor="photo-id-name">
-            {intl.formatMessage(messages['id.verification.name.label'])}
+            {props.intl.formatMessage(messages['id.verification.name.label'])}
          </Form.Label>
          <Form.Control
            controlId="photo-id-name"
@@ -73,7 +72,7 @@ const GetNameIdPanel = () => {
              data-testid="id-name-feedback-message"
              type="invalid"
            >
-              {intl.formatMessage(messages['id.verification.name.error'])}
+              {props.intl.formatMessage(messages['id.verification.name.error'])}
            </Form.Control.Feedback>
          )}
        </Form.Group>
@@ -86,11 +85,15 @@ const GetNameIdPanel = () => {
          data-testid="next-button"
          aria-disabled={!idPhotoName}
        >
-          {intl.formatMessage(messages['id.verification.next'])}
+          {props.intl.formatMessage(messages['id.verification.next'])}
        </Link>
      </div>
    </BasePanel>
  );
 };

-export default GetNameIdPanel;
+GetNameIdPanel.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(GetNameIdPanel);
--- a/src/id-verification/panels/IdContextPanel.jsx
+++ b/src/id-verification/panels/IdContextPanel.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';

 import { useNextPanelSlug } from '../routing-utilities';
 import BasePanel from './BasePanel';
@@ -8,46 +8,49 @@ import CameraHelp from '../CameraHelp';
 import messages from '../IdVerification.messages';
 import exampleCard from '../assets/example-card.png';

-const IdContextPanel = () => {
+const IdContextPanel = (props) => {
  const panelSlug = 'id-context';
  const nextPanelSlug = useNextPanelSlug(panelSlug);
-  const intl = useIntl();
  return (
    <BasePanel
      name={panelSlug}
-      title={intl.formatMessage(messages['id.verification.id.tips.title'])}
+      title={props.intl.formatMessage(messages['id.verification.id.tips.title'])}
    >
-      <p>{intl.formatMessage(messages['id.verification.id.tips.description'])}</p>
+      <p>{props.intl.formatMessage(messages['id.verification.id.tips.description'])}</p>
      <div className="card mb-4 shadow accent border-warning">
        <div className="card-body">
          <h6>
-            {intl.formatMessage(messages['id.verification.photo.tips.list.title'])}
+            {props.intl.formatMessage(messages['id.verification.photo.tips.list.title'])}
          </h6>
          <p>
-            {intl.formatMessage(messages['id.verification.photo.tips.list.description'])}
+            {props.intl.formatMessage(messages['id.verification.photo.tips.list.description'])}
          </p>
          <ul>
            <li>
-              {intl.formatMessage(messages['id.verification.id.tips.list.well.lit'])}
+              {props.intl.formatMessage(messages['id.verification.id.tips.list.well.lit'])}
            </li>
            <li>
-              {intl.formatMessage(messages['id.verification.id.tips.list.clear'])}
+              {props.intl.formatMessage(messages['id.verification.id.tips.list.clear'])}
            </li>
          </ul>
          <img
            src={exampleCard}
-            alt={intl.formatMessage(messages['id.verification.example.card.alt'])}
+            alt={props.intl.formatMessage(messages['id.verification.example.card.alt'])}
          />
        </div>
      </div>
      <CameraHelp isOpen />
      <div className="action-row">
        <Link to={`/id-verification/${nextPanelSlug}`} className="btn btn-primary" data-testid="next-button">
-          {intl.formatMessage(messages['id.verification.next'])}
+          {props.intl.formatMessage(messages['id.verification.next'])}
        </Link>
      </div>
    </BasePanel>
  );
 };

-export default IdContextPanel;
+IdContextPanel.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(IdContextPanel);
--- a/src/id-verification/panels/PortraitPhotoContextPanel.jsx
+++ b/src/id-verification/panels/PortraitPhotoContextPanel.jsx
@@ -1,37 +1,37 @@
+import React from 'react';
 import { Link } from 'react-router-dom';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';

 import { useNextPanelSlug } from '../routing-utilities';
 import BasePanel from './BasePanel';
 import CameraHelp from '../CameraHelp';
 import messages from '../IdVerification.messages';

-const PortraitPhotoContextPanel = () => {
-  const intl = useIntl();
+const PortraitPhotoContextPanel = (props) => {
  const panelSlug = 'portrait-photo-context';
  const nextPanelSlug = useNextPanelSlug(panelSlug);
  return (
    <BasePanel
      name={panelSlug}
-      title={intl.formatMessage(messages['id.verification.photo.tips.title'])}
+      title={props.intl.formatMessage(messages['id.verification.photo.tips.title'])}
    >
      <p>
-        {intl.formatMessage(messages['id.verification.photo.tips.description'])}
+        {props.intl.formatMessage(messages['id.verification.photo.tips.description'])}
      </p>
      <div className="card mb-4 shadow accent border-warning">
        <div className="card-body">
          <h6>
-            {intl.formatMessage(messages['id.verification.photo.tips.list.title'])}
+            {props.intl.formatMessage(messages['id.verification.photo.tips.list.title'])}
          </h6>
          <p>
-            {intl.formatMessage(messages['id.verification.photo.tips.list.description'])}
+            {props.intl.formatMessage(messages['id.verification.photo.tips.list.description'])}
          </p>
          <ul className="mb-0">
            <li>
-              {intl.formatMessage(messages['id.verification.photo.tips.list.well.lit'])}
+              {props.intl.formatMessage(messages['id.verification.photo.tips.list.well.lit'])}
            </li>
            <li>
-              {intl.formatMessage(messages['id.verification.photo.tips.list.inside.frame'])}
+              {props.intl.formatMessage(messages['id.verification.photo.tips.list.inside.frame'])}
            </li>
          </ul>
        </div>
@@ -39,11 +39,15 @@ const PortraitPhotoContextPanel = () => {
      <CameraHelp isOpen isPortrait />
      <div className="action-row">
        <Link to={`/id-verification/${nextPanelSlug}`} className="btn btn-primary" data-testid="next-button">
-          {intl.formatMessage(messages['id.verification.next'])}
+          {props.intl.formatMessage(messages['id.verification.next'])}
        </Link>
      </div>
    </BasePanel>
  );
 };

-export default PortraitPhotoContextPanel;
+PortraitPhotoContextPanel.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(PortraitPhotoContextPanel);
--- a/src/id-verification/panels/RequestCameraAccessPanel.jsx
+++ b/src/id-verification/panels/RequestCameraAccessPanel.jsx
@@ -1,9 +1,9 @@
-import { useEffect, useContext } from 'react';
+import React, { useEffect, useContext } from 'react';
 import { Link } from 'react-router-dom';
 import Bowser from 'bowser';
 import { getConfig } from '@edx/frontend-platform';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
-import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';

 import { useRedirect } from '../../hooks';
 import { useNextPanelSlug } from '../routing-utilities';
@@ -14,8 +14,7 @@ import { UnsupportedCameraDirectionsPanel } from './UnsupportedCameraDirectionsP

 import messages from '../IdVerification.messages';

-const RequestCameraAccessPanel = () => {
-  const intl = useIntl();
+const RequestCameraAccessPanel = (props) => {
  const { location: returnUrl, text: returnText } = useRedirect();
  const panelSlug = 'request-camera-access';
  const nextPanelSlug = useNextPanelSlug(panelSlug);
@@ -41,17 +40,17 @@ const RequestCameraAccessPanel = () => {

  const getTitle = () => {
    if (mediaAccess === MEDIA_ACCESS.GRANTED) {
-      return intl.formatMessage(messages['id.verification.camera.access.title.success']);
+      return props.intl.formatMessage(messages['id.verification.camera.access.title.success']);
    }
    if ([MEDIA_ACCESS.UNSUPPORTED, MEDIA_ACCESS.DENIED].includes(mediaAccess)) {
-      return intl.formatMessage(messages['id.verification.camera.access.title.failed']);
+      return props.intl.formatMessage(messages['id.verification.camera.access.title.failed']);
    }
-    return intl.formatMessage(messages['id.verification.camera.access.title']);
+    return props.intl.formatMessage(messages['id.verification.camera.access.title']);
  };

  const returnLink = (
    <a className="btn btn-primary" href={`${getConfig().LMS_BASE_URL}/${returnUrl}`}>
-      {intl.formatMessage(messages[returnText])}
+      {props.intl.formatMessage(messages[returnText])}
    </a>
  );

@@ -68,13 +67,13 @@ const RequestCameraAccessPanel = () => {
              defaultMessage="In order to take a photo using your webcam, you may receive a browser prompt for access to your camera. {clickAllow}"
              description="Instructions to enable camera access."
              values={{
-                clickAllow: <strong>{intl.formatMessage(messages['id.verification.camera.access.click.allow'])}</strong>,
+                clickAllow: <strong>{props.intl.formatMessage(messages['id.verification.camera.access.click.allow'])}</strong>,
              }}
            />
          </p>
          <div className="action-row">
            <button type="button" className="btn btn-primary" onClick={tryGetUserMedia}>
-              {intl.formatMessage(messages['id.verification.camera.access.enable'])}
+              {props.intl.formatMessage(messages['id.verification.camera.access.enable'])}
            </button>
          </div>
        </div>
@@ -83,11 +82,11 @@ const RequestCameraAccessPanel = () => {
      {mediaAccess === MEDIA_ACCESS.GRANTED && (
        <div>
          <p data-testid="camera-access-success">
-            {intl.formatMessage(messages['id.verification.camera.access.success'])}
+            {props.intl.formatMessage(messages['id.verification.camera.access.success'])}
          </p>
          <div className="action-row">
            <Link to={`/id-verification/${nextPanelSlug}`} className="btn btn-primary" data-testid="next-button">
-              {intl.formatMessage(messages['id.verification.next'])}
+              {props.intl.formatMessage(messages['id.verification.next'])}
            </Link>
          </div>
        </div>
@@ -96,9 +95,9 @@ const RequestCameraAccessPanel = () => {
      {mediaAccess === MEDIA_ACCESS.DENIED && (
        <div data-testid="camera-failure-instructions">
          <p data-testid="camera-access-failure">
-            {intl.formatMessage(messages['id.verification.camera.access.failure.temporary'])}
+            {props.intl.formatMessage(messages['id.verification.camera.access.failure.temporary'])}
          </p>
-          <EnableCameraDirectionsPanel browserName={browserName} />
+          <EnableCameraDirectionsPanel browserName={browserName} intl={props.intl} />
          <div className="action-row">
            {returnLink}
          </div>
@@ -108,9 +107,9 @@ const RequestCameraAccessPanel = () => {
      {mediaAccess === MEDIA_ACCESS.UNSUPPORTED && (
        <div data-testid="camera-unsupported-instructions">
          <p data-testid="camera-unsupported-failure">
-            {intl.formatMessage(messages['id.verification.camera.access.failure.unsupported'])}
+            {props.intl.formatMessage(messages['id.verification.camera.access.failure.unsupported'])}
          </p>
-          <UnsupportedCameraDirectionsPanel browserName={browserName} />
+          <UnsupportedCameraDirectionsPanel browserName={browserName} intl={props.intl} />
          <div className="action-row">
            {returnLink}
          </div>
@@ -121,4 +120,8 @@ const RequestCameraAccessPanel = () => {
  );
 };

-export default RequestCameraAccessPanel;
+RequestCameraAccessPanel.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(RequestCameraAccessPanel);
--- a/src/id-verification/panels/ReviewRequirementsPanel.jsx
+++ b/src/id-verification/panels/ReviewRequirementsPanel.jsx
@@ -1,8 +1,8 @@
-import { useEffect, useContext } from 'react';
+import React, { useEffect, useContext } from 'react';
 import { Link } from 'react-router-dom';
 import { getConfig } from '@edx/frontend-platform';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
-import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
 import { Alert, Hyperlink } from '@openedx/paragon';

 import { useNextPanelSlug } from '../routing-utilities';
@@ -12,8 +12,7 @@ import IdVerificationContext from '../IdVerificationContext';
 import messages from '../IdVerification.messages';
 import exampleCard from '../assets/example-card.png';

-const ReviewRequirementsPanel = () => {
-  const intl = useIntl();
+const ReviewRequirementsPanel = (props) => {
  const { userId, profileDataManager } = useContext(IdVerificationContext);
  const panelSlug = 'review-requirements';
  const nextPanelSlug = useNextPanelSlug(panelSlug);
@@ -42,7 +41,7 @@ const ReviewRequirementsPanel = () => {
              profileDataManager,
              support: (
                <Hyperlink destination={getConfig().SUPPORT_URL} target="_blank">
-                  {intl.formatMessage(messages['id.verification.support'])}
+                  {props.intl.formatMessage(messages['id.verification.support'])}
                </Hyperlink>
              ),
            }}
@@ -55,17 +54,17 @@ const ReviewRequirementsPanel = () => {
  return (
    <BasePanel
      name={panelSlug}
-      title={intl.formatMessage(messages['id.verification.requirements.title'])}
+      title={props.intl.formatMessage(messages['id.verification.requirements.title'])}
      focusOnMount={false}
    >
      {renderManagedProfileMessage()}
      <p>
-        {intl.formatMessage(messages['id.verification.requirements.description'])}
+        {props.intl.formatMessage(messages['id.verification.requirements.description'])}
      </p>
      <div className="card mb-4 shadow accent border-warning">
        <div className="card-body">
          <h6 aria-level="3">
-            {intl.formatMessage(messages['id.verification.requirements.card.device.title'])}
+            {props.intl.formatMessage(messages['id.verification.requirements.card.device.title'])}
          </h6>
          <p className="mb-0">
            <FormattedMessage
@@ -73,7 +72,7 @@ const ReviewRequirementsPanel = () => {
              defaultMessage="You need a device that has a camera. If you receive a browser prompt for access to your camera, please make sure to click {allow}."
              description="Text explaining that the user needs access to a camera."
              values={{
-                allow: <strong>{intl.formatMessage(messages['id.verification.requirements.card.device.allow'])}</strong>,
+                allow: <strong>{props.intl.formatMessage(messages['id.verification.requirements.card.device.allow'])}</strong>,
              }}
            />
          </p>
@@ -82,37 +81,37 @@ const ReviewRequirementsPanel = () => {
      <div className="card mb-4 shadow accent border-warning">
        <div className="card-body">
          <h6 aria-level="3">
-            {intl.formatMessage(messages['id.verification.requirements.card.id.title'])}
+            {props.intl.formatMessage(messages['id.verification.requirements.card.id.title'])}
          </h6>
          <p className="mb-0">
-            {intl.formatMessage(messages['id.verification.requirements.card.id.text'])}
+            {props.intl.formatMessage(messages['id.verification.requirements.card.id.text'])}
            <img
              src={exampleCard}
-              alt={intl.formatMessage(messages['id.verification.example.card.alt'])}
+              alt={props.intl.formatMessage(messages['id.verification.example.card.alt'])}
            />
          </p>
        </div>
      </div>
      <h4 aria-level="2" className="mb-3">
-        {intl.formatMessage(messages['id.verification.privacy.title'])}
+        {props.intl.formatMessage(messages['id.verification.privacy.title'])}
      </h4>
      <h6 aria-level="3">
-        {intl.formatMessage(
+        {props.intl.formatMessage(
          messages['id.verification.privacy.need.photo.question'],
          { siteName: getConfig().SITE_NAME },
        )}
      </h6>
      <p>
-        {intl.formatMessage(messages['id.verification.privacy.need.photo.answer'])}
+        {props.intl.formatMessage(messages['id.verification.privacy.need.photo.answer'])}
      </p>
      <h6 aria-level="3">
-        {intl.formatMessage(
+        {props.intl.formatMessage(
          messages['id.verification.privacy.do.with.photo.question'],
          { siteName: getConfig().SITE_NAME },
        )}
      </h6>
      <p>
-        {intl.formatMessage(
+        {props.intl.formatMessage(
          messages['id.verification.privacy.do.with.photo.answer'],
          { siteName: getConfig().SITE_NAME },
        )}
@@ -120,11 +119,15 @@ const ReviewRequirementsPanel = () => {

      <div className="action-row">
        <Link to={`/id-verification/${nextPanelSlug}`} className="btn btn-primary" data-testid="next-button">
-          {intl.formatMessage(messages['id.verification.next'])}
+          {props.intl.formatMessage(messages['id.verification.next'])}
        </Link>
      </div>
    </BasePanel>
  );
 };

-export default ReviewRequirementsPanel;
+ReviewRequirementsPanel.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(ReviewRequirementsPanel);
--- a/src/id-verification/panels/SubmittedPanel.jsx
+++ b/src/id-verification/panels/SubmittedPanel.jsx
@@ -1,7 +1,7 @@
-import { useContext, useEffect } from 'react';
+import React, { useContext, useEffect } from 'react';
 import { getConfig } from '@edx/frontend-platform';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';

 import { useRedirect } from '../../hooks';

@@ -10,11 +10,10 @@ import messages from '../IdVerification.messages';

 import BasePanel from './BasePanel';

-const SubmittedPanel = () => {
+const SubmittedPanel = (props) => {
  const { userId } = useContext(IdVerificationContext);
  const { location: returnUrl, text: returnText } = useRedirect();
  const panelSlug = 'submitted';
-  const intl = useIntl();

  useEffect(() => {
    sendTrackEvent('edx.id_verification.submitted', {
@@ -26,20 +25,24 @@ const SubmittedPanel = () => {
  return (
    <BasePanel
      name={panelSlug}
-      title={intl.formatMessage(messages['id.verification.submitted.title'])}
+      title={props.intl.formatMessage(messages['id.verification.submitted.title'])}
    >
      <p>
-        {intl.formatMessage(messages['id.verification.submitted.text'])}
+        {props.intl.formatMessage(messages['id.verification.submitted.text'])}
      </p>
      <a
        className="btn btn-primary"
        href={`${getConfig().LMS_BASE_URL}/${returnUrl}`}
        data-testid="return-button"
      >
-        {intl.formatMessage(messages[returnText])}
+        {props.intl.formatMessage(messages[returnText])}
      </a>
    </BasePanel>
  );
 };

-export default SubmittedPanel;
+SubmittedPanel.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(SubmittedPanel);
--- a/src/id-verification/panels/SummaryPanel.jsx
+++ b/src/id-verification/panels/SummaryPanel.jsx
@@ -1,10 +1,10 @@
-import { useState, useContext, useEffect } from 'react';
+import React, { useState, useContext, useEffect } from 'react';
 import { getConfig } from '@edx/frontend-platform';
 import {
  Alert, Hyperlink, Form, Button, Spinner,
 } from '@openedx/paragon';
 import { Link, useNavigate } from 'react-router-dom';
-import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';

 import { submitIdVerification } from '../data/service';
 import { useNextPanelSlug } from '../routing-utilities';
@@ -16,8 +16,7 @@ import messages from '../IdVerification.messages';
 import CameraHelpWithUpload from '../CameraHelpWithUpload';
 import SupportedMediaTypes from '../SupportedMediaTypes';

-const SummaryPanel = () => {
-  const intl = useIntl();
+const SummaryPanel = (props) => {
  const panelSlug = 'summary';
  const nextPanelSlug = useNextPanelSlug(panelSlug);
  const {
@@ -52,7 +51,7 @@ const SummaryPanel = () => {
            profileDataManager,
            support: (
              <Hyperlink destination={getConfig().SUPPORT_URL} target="_blank">
-                {intl.formatMessage(messages['id.verification.support'])}
+                {props.intl.formatMessage(messages['id.verification.support'])}
              </Hyperlink>
            ),
          }}
@@ -91,11 +90,12 @@ const SummaryPanel = () => {
    };
    return (
      <Button
+        title="Confirmation"
        disabled={isSubmitting}
        onClick={handleClick}
        data-testid="submit-button"
      >
-        {intl.formatMessage(messages['id.verification.review.confirm'])}
+        {props.intl.formatMessage(messages['id.verification.review.confirm'])}
      </Button>
    );
  };
@@ -103,18 +103,18 @@ const SummaryPanel = () => {
  function getError() {
    if (submissionError.status === 400) {
      if (submissionError.message.includes('face_image')) {
-        return intl.formatMessage(messages['id.verification.submission.alert.error.face']);
+        return props.intl.formatMessage(messages['id.verification.submission.alert.error.face']);
      }
      if (submissionError.message.includes('Photo ID image')) {
-        return intl.formatMessage(messages['id.verification.submission.alert.error.id']);
+        return props.intl.formatMessage(messages['id.verification.submission.alert.error.id']);
      }
      if (submissionError.message.includes('Name')) {
-        return intl.formatMessage(messages['id.verification.submission.alert.error.name']);
+        return props.intl.formatMessage(messages['id.verification.submission.alert.error.name']);
      }
      if (submissionError.message.includes('unsupported format')) {
        return (
          <>
-            {intl.formatMessage(messages['id.verification.submission.alert.error.unsupported'])}
+            {props.intl.formatMessage(messages['id.verification.submission.alert.error.unsupported'])}
            <SupportedMediaTypes />
          </>
        );
@@ -131,7 +131,7 @@ const SummaryPanel = () => {
        values={{
          support_link: (
            <Alert.Link href="https://support.edx.org/hc/en-us">
-              {intl.formatMessage(
+              {props.intl.formatMessage(
                messages['id.verification.review.error'],
                { siteName: getConfig().SITE_NAME },
              )}
@@ -145,7 +145,7 @@ const SummaryPanel = () => {
  return (
    <BasePanel
      name={panelSlug}
-      title={intl.formatMessage(messages['id.verification.review.title'])}
+      title={props.intl.formatMessage(messages['id.verification.review.title'])}
    >
      {submissionError && (
        <Alert
@@ -158,17 +158,17 @@ const SummaryPanel = () => {
        </Alert>
      )}
      <p>
-        {intl.formatMessage(messages['id.verification.review.description'])}
+        {props.intl.formatMessage(messages['id.verification.review.description'])}
      </p>
      <div className="row mb-4">
        <div className="col-6">
          <label htmlFor="photo-of-face" className="font-weight-bold">
-            {intl.formatMessage(messages['id.verification.review.portrait.label'])}
+            {props.intl.formatMessage(messages['id.verification.review.portrait.label'])}
          </label>
          <ImagePreview
            id="photo-of-face"
            src={facePhotoFile}
-            alt={intl.formatMessage(messages['id.verification.review.portrait.alt'])}
+            alt={props.intl.formatMessage(messages['id.verification.review.portrait.alt'])}
          />
          <Link
            className="btn btn-outline-primary"
@@ -176,17 +176,17 @@ const SummaryPanel = () => {
            state={{ fromSummary: true }}
            data-testid="portrait-retake"
          >
-            {intl.formatMessage(messages['id.verification.review.portrait.retake'])}
+            {props.intl.formatMessage(messages['id.verification.review.portrait.retake'])}
          </Link>
        </div>
        <div className="col-6">
          <label htmlFor="photo-of-id/edit" className="font-weight-bold">
-            {intl.formatMessage(messages['id.verification.review.id.label'])}
+            {props.intl.formatMessage(messages['id.verification.review.id.label'])}
          </label>
          <ImagePreview
            id="photo-of-id"
            src={idPhotoFile}
-            alt={intl.formatMessage(messages['id.verification.review.id.alt'])}
+            alt={props.intl.formatMessage(messages['id.verification.review.id.alt'])}
          />
          <Link
            className="btn btn-outline-primary"
@@ -194,14 +194,14 @@ const SummaryPanel = () => {
            state={{ fromSummary: true }}
            data-testid="id-retake"
          >
-            {intl.formatMessage(messages['id.verification.review.id.retake'])}
+            {props.intl.formatMessage(messages['id.verification.review.id.retake'])}
          </Link>
        </div>
      </div>
      <CameraHelpWithUpload />
      <div className="form-group">
        <label htmlFor="name-to-be-used" className="font-weight-bold">
-          {intl.formatMessage(messages['id.verification.name.label'])}
+          {props.intl.formatMessage(messages['id.verification.name.label'])}
        </label>
        {renderManagedProfileMessage()}
        <div className="d-flex">
@@ -237,4 +237,8 @@ const SummaryPanel = () => {
  );
 };

-export default SummaryPanel;
+SummaryPanel.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(SummaryPanel);
--- a/src/id-verification/panels/TakeIdPhotoPanel.jsx
+++ b/src/id-verification/panels/TakeIdPhotoPanel.jsx
@@ -1,6 +1,6 @@
-import { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';

 import { useNextPanelSlug } from '../routing-utilities';
 import BasePanel from './BasePanel';
@@ -14,12 +14,11 @@ import ImageFileUpload from '../ImageFileUpload';
 import CollapsibleImageHelp from '../CollapsibleImageHelp';
 import SupportedMediaTypes from '../SupportedMediaTypes';

-const TakeIdPhotoPanel = () => {
+const TakeIdPhotoPanel = (props) => {
  const panelSlug = 'take-id-photo';
  const nextPanelSlug = useNextPanelSlug(panelSlug);
  const { setIdPhotoFile, idPhotoFile, useCameraForId } = useContext(IdVerificationContext);
  const [mounted, setMounted] = useState(false);
-  const intl = useIntl();

  useEffect(() => {
    // This prevents focus switching to the heading when taking a photo
@@ -31,31 +30,31 @@ const TakeIdPhotoPanel = () => {
      name={panelSlug}
      focusOnMount={!mounted}
      title={useCameraForId
-        ? intl.formatMessage(messages['id.verification.id.photo.title.camera'])
-        : intl.formatMessage(messages['id.verification.id.photo.title.upload'])}
+        ? props.intl.formatMessage(messages['id.verification.id.photo.title.camera'])
+        : props.intl.formatMessage(messages['id.verification.id.photo.title.upload'])}
    >
      <div>
        {idPhotoFile && !useCameraForId && (
          <ImagePreview
            src={idPhotoFile}
-            alt={intl.formatMessage(messages['id.verification.id.photo.preview.alt'])}
+            alt={props.intl.formatMessage(messages['id.verification.id.photo.preview.alt'])}
          />
        )}

        {useCameraForId ? (
          <div>
            <p>
-              {intl.formatMessage(messages['id.verification.id.photo.instructions.camera'])}
+              {props.intl.formatMessage(messages['id.verification.id.photo.instructions.camera'])}
            </p>
            <Camera onImageCapture={setIdPhotoFile} isPortrait={false} />
          </div>
        ) : (
          <div style={{ marginBottom: '1.25rem' }}>
            <p data-testid="upload-text">
-              {intl.formatMessage(messages['id.verification.id.photo.instructions.upload'])}
+              {props.intl.formatMessage(messages['id.verification.id.photo.instructions.upload'])}
              <SupportedMediaTypes />
            </p>
-            <ImageFileUpload onFileChange={setIdPhotoFile} />
+            <ImageFileUpload onFileChange={setIdPhotoFile} intl={props.intl} />
          </div>
        )}
      </div>
@@ -63,11 +62,15 @@ const TakeIdPhotoPanel = () => {
      <CollapsibleImageHelp />
      <div className="action-row" style={{ visibility: idPhotoFile ? 'unset' : 'hidden' }}>
        <Link to={`/id-verification/${nextPanelSlug}`} className="btn btn-primary" data-testid="next-button">
-          {intl.formatMessage(messages['id.verification.next'])}
+          {props.intl.formatMessage(messages['id.verification.next'])}
        </Link>
      </div>
    </BasePanel>
  );
 };

-export default TakeIdPhotoPanel;
+TakeIdPhotoPanel.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(TakeIdPhotoPanel);
--- a/src/id-verification/panels/TakePortraitPhotoPanel.jsx
+++ b/src/id-verification/panels/TakePortraitPhotoPanel.jsx
@@ -1,6 +1,6 @@
-import { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';

 import { useNextPanelSlug } from '../routing-utilities';
 import BasePanel from './BasePanel';
@@ -10,12 +10,11 @@ import IdVerificationContext from '../IdVerificationContext';

 import messages from '../IdVerification.messages';

-const TakePortraitPhotoPanel = () => {
+const TakePortraitPhotoPanel = (props) => {
  const panelSlug = 'take-portrait-photo';
  const nextPanelSlug = useNextPanelSlug(panelSlug);
  const { setFacePhotoFile, facePhotoFile } = useContext(IdVerificationContext);
  const [mounted, setMounted] = useState(false);
-  const intl = useIntl();

  useEffect(() => {
    // This prevents focus switching to the heading when taking a photo
@@ -26,22 +25,26 @@ const TakePortraitPhotoPanel = () => {
    <BasePanel
      name={panelSlug}
      focusOnMount={!mounted}
-      title={intl.formatMessage(messages['id.verification.portrait.photo.title.camera'])}
+      title={props.intl.formatMessage(messages['id.verification.portrait.photo.title.camera'])}
    >
      <div>
        <p>
-          {intl.formatMessage(messages['id.verification.portrait.photo.instructions.camera'])}
+          {props.intl.formatMessage(messages['id.verification.portrait.photo.instructions.camera'])}
        </p>
        <Camera onImageCapture={setFacePhotoFile} isPortrait />
      </div>
      <CameraHelp isPortrait />
      <div className="action-row" style={{ visibility: facePhotoFile ? 'unset' : 'hidden' }}>
        <Link to={`/id-verification/${nextPanelSlug}`} className="btn btn-primary" data-testid="next-button">
-          {intl.formatMessage(messages['id.verification.next'])}
+          {props.intl.formatMessage(messages['id.verification.next'])}
        </Link>
      </div>
    </BasePanel>
  );
 };

-export default TakePortraitPhotoPanel;
+TakePortraitPhotoPanel.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(TakePortraitPhotoPanel);
--- a/src/id-verification/panels/UnsupportedCameraDirectionsPanel.jsx
+++ b/src/id-verification/panels/UnsupportedCameraDirectionsPanel.jsx
@@ -1,21 +1,19 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import messages from '../IdVerification.messages';

-export const UnsupportedCameraDirectionsPanel = (props) => {
-  const intl = useIntl();
-  return (
-    <>
-      {props.browserName === 'Chrome' && <span>{intl.formatMessage(messages['id.verification.camera.access.failure.unsupported.chrome.explanation'])}</span>}
-      <span> </span>
-      <span>{intl.formatMessage(messages['id.verification.camera.access.failure.unsupported.instructions'])}</span>
-    </>
-  );
-};
+export const UnsupportedCameraDirectionsPanel = (props) => (
+  <>
+    {props.browserName === 'Chrome' && <span>{props.intl.formatMessage(messages['id.verification.camera.access.failure.unsupported.chrome.explanation'])}</span>}
+    <span> </span>
+    <span>{props.intl.formatMessage(messages['id.verification.camera.access.failure.unsupported.instructions'])}</span>
+  </>
+);

 UnsupportedCameraDirectionsPanel.propTypes = {
+  intl: intlShape.isRequired,
  browserName: PropTypes.string.isRequired,
 };

-export default UnsupportedCameraDirectionsPanel;
+export default injectIntl(UnsupportedCameraDirectionsPanel);
--- a/src/id-verification/tests/AccessBlocked.test.jsx
+++ b/src/id-verification/tests/AccessBlocked.test.jsx
@@ -4,13 +4,16 @@ import {
  render, cleanup, act, screen,
 } from '@testing-library/react';
 import '@edx/frontend-platform/analytics';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';

 import { ERROR_REASONS } from '../IdVerificationContext';
 import AccessBlocked from '../AccessBlocked';

+const IntlAccessBlocked = injectIntl(AccessBlocked);
+
 describe('AccessBlocked', () => {
  const defaultProps = {
+    intl: {},
    error: '',
  };

@@ -24,7 +27,7 @@ describe('AccessBlocked', () => {
    await act(async () => render((
      <Router>
        <IntlProvider locale="en">
-          <AccessBlocked {...defaultProps} />
+          <IntlAccessBlocked {...defaultProps} />
        </IntlProvider>
      </Router>
    )));
@@ -40,7 +43,7 @@ describe('AccessBlocked', () => {
    await act(async () => render((
      <Router>
        <IntlProvider locale="en">
-          <AccessBlocked {...defaultProps} />
+          <IntlAccessBlocked {...defaultProps} />
        </IntlProvider>
      </Router>
    )));
@@ -56,7 +59,7 @@ describe('AccessBlocked', () => {
    await act(async () => render((
      <Router>
        <IntlProvider locale="en">
-          <AccessBlocked {...defaultProps} />
+          <IntlAccessBlocked {...defaultProps} />
        </IntlProvider>
      </Router>
    )));
--- a/src/id-verification/tests/Camera.test.jsx
+++ b/src/id-verification/tests/Camera.test.jsx
@@ -5,7 +5,6 @@ import {
  render, cleanup, screen, act, fireEvent,
 } from '@testing-library/react';
 import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
-import CameraPhoto from 'jslib-html5-camera-photo';
 // eslint-disable-next-line import/no-unresolved
 import * as blazeface from '@tensorflow-models/blazeface';
 import * as analytics from '@edx/frontend-platform/analytics';
@@ -182,99 +181,4 @@ describe('SubmittedPanel', () => {
    await fireEvent.click(checkbox);
    expect(analytics.sendTrackEvent).toHaveBeenCalledWith('edx.id_verification.id_photo.face_detection_disabled');
  });
-
-  describe('Camera getSizeFactor method', () => {
-    let mockGetDataUri;
-
-    beforeEach(() => {
-      jest.clearAllMocks();
-      mockGetDataUri = jest.fn().mockReturnValue('data:image/jpeg;base64,test');
-    });
-
-    it('scales down large resolutions to stay under 10MB limit', async () => {
-      const currentSettings = { width: 4000, height: 3000 };
-
-      CameraPhoto.mockImplementation(() => ({
-        startCamera: jest.fn(),
-        stopCamera: jest.fn(),
-        getDataUri: mockGetDataUri,
-        getCameraSettings: jest.fn().mockReturnValue(currentSettings),
-      }));
-
-      await act(async () => render((
-        <Router>
-          <IntlProvider locale="en">
-            <IdVerificationContext.Provider value={contextValue}>
-              <Camera {...defaultProps} />
-            </IdVerificationContext.Provider>
-          </IntlProvider>
-        </Router>
-      )));
-
-      const button = await screen.findByRole('button', { name: /take photo/i });
-      fireEvent.click(button);
-
-      // For large resolution: size = 4000 * 3000 * 3 = 36,000,000 bytes
-      // Ratio = 9,999,999 / 36,000,000 ≈ 0.278
-      expect(mockGetDataUri).toHaveBeenCalledWith(expect.objectContaining({
-        sizeFactor: expect.closeTo(0.278, 2),
-      }));
-    });
-
-    it('scales up 640x480 resolution to improve quality', async () => {
-      const currentSettings = { width: 640, height: 480 };
-
-      CameraPhoto.mockImplementation(() => ({
-        startCamera: jest.fn(),
-        stopCamera: jest.fn(),
-        getDataUri: mockGetDataUri,
-        getCameraSettings: jest.fn().mockReturnValue(currentSettings),
-      }));
-
-      await act(async () => render((
-        <Router>
-          <IntlProvider locale="en">
-            <IdVerificationContext.Provider value={contextValue}>
-              <Camera {...defaultProps} />
-            </IdVerificationContext.Provider>
-          </IntlProvider>
-        </Router>
-      )));
-
-      const button = await screen.findByRole('button', { name: /take photo/i });
-      fireEvent.click(button);
-
-      expect(mockGetDataUri).toHaveBeenCalledWith(expect.objectContaining({
-        sizeFactor: 2,
-      }));
-    });
-
-    it('maintains original size for medium resolutions', async () => {
-      const currentSettings = { width: 1280, height: 720 };
-
-      CameraPhoto.mockImplementation(() => ({
-        startCamera: jest.fn(),
-        stopCamera: jest.fn(),
-        getDataUri: mockGetDataUri,
-        getCameraSettings: jest.fn().mockReturnValue(currentSettings),
-      }));
-
-      await act(async () => render((
-        <Router>
-          <IntlProvider locale="en">
-            <IdVerificationContext.Provider value={contextValue}>
-              <Camera {...defaultProps} />
-            </IdVerificationContext.Provider>
-          </IntlProvider>
-        </Router>
-      )));
-
-      const button = await screen.findByRole('button', { name: /take photo/i });
-      fireEvent.click(button);
-
-      expect(mockGetDataUri).toHaveBeenCalledWith(expect.objectContaining({
-        sizeFactor: 1,
-      }));
-    });
-  });
 });
--- a/src/id-verification/tests/CollapsibleImageHelp.test.jsx
+++ b/src/id-verification/tests/CollapsibleImageHelp.test.jsx
@@ -1,8 +1,9 @@
+import React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import {
  render, cleanup, screen, act,
 } from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
 import * as analytics from '@edx/frontend-platform/analytics';
 import IdVerificationContext from '../IdVerificationContext';
 import CollapsibleImageHelp from '../CollapsibleImageHelp';
@@ -16,7 +17,11 @@ analytics.sendTrackEvent = jest.fn();

 window.HTMLMediaElement.prototype.play = () => {};

+const IntlCollapsible = injectIntl(CollapsibleImageHelp);
+
 describe('CollapsibleImageHelpPanel', () => {
+  const defaultProps = { intl: {} };
+
  const contextValue = {
    useCameraForId: true,
    setUseCameraForId: jest.fn(),
@@ -31,7 +36,7 @@ describe('CollapsibleImageHelpPanel', () => {
      <Router>
        <IntlProvider locale="en">
          <IdVerificationContext.Provider value={contextValue}>
-            <CollapsibleImageHelp />
+            <IntlCollapsible {...defaultProps} />
          </IdVerificationContext.Provider>
        </IntlProvider>
      </Router>
@@ -51,7 +56,7 @@ describe('CollapsibleImageHelpPanel', () => {
      <Router>
        <IntlProvider locale="en">
          <IdVerificationContext.Provider value={contextValue}>
-            <CollapsibleImageHelp />
+            <IntlCollapsible {...defaultProps} />
          </IdVerificationContext.Provider>
        </IntlProvider>
      </Router>
--- a/src/id-verification/tests/IdVerificationPage.test.jsx
+++ b/src/id-verification/tests/IdVerificationPage.test.jsx
@@ -1,12 +1,13 @@
 /* eslint-disable react/jsx-no-useless-fragment */
+import React from 'react';
 import { Provider } from 'react-redux';
 import { MemoryRouter as Router } from 'react-router-dom';
 import configureStore from 'redux-mock-store';
 import {
  render, act, screen, fireEvent,
 } from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import IdVerificationPageSlot from '../../plugin-slots/IdVerificationPageSlot';
+import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
+import IdVerificationPage from '../IdVerificationPage';
 import * as selectors from '../data/selectors';

 jest.mock('../data/selectors', () => jest.fn().mockImplementation(() => ({ idVerificationSelector: () => ({}) })));
@@ -46,18 +47,22 @@ jest.mock('../panels/SubmittedPanel', () => function SubmittedPanelMock() {
  return <></>;
 });

+const IntlIdVerificationPage = injectIntl(IdVerificationPage);
 const mockStore = configureStore();

 describe('IdVerificationPage', () => {
  selectors.mockClear();
  jest.spyOn(Storage.prototype, 'setItem');
  const store = mockStore();
+  const props = {
+    intl: {},
+  };
  it('decodes and stores course_id', async () => {
    await act(async () => render((
      <Router initialEntries={[`/?course_id=${encodeURIComponent('course-v1:edX+DemoX+Demo_Course')}`]}>
        <IntlProvider locale="en">
          <Provider store={store}>
-            <IdVerificationPageSlot />
+            <IntlIdVerificationPage {...props} />
          </Provider>
        </IntlProvider>
      </Router>
@@ -73,7 +78,7 @@ describe('IdVerificationPage', () => {
      <Router initialEntries={['/?next=dashboard']}>
        <IntlProvider locale="en">
          <Provider store={store}>
-            <IdVerificationPageSlot />
+            <IntlIdVerificationPage {...props} />
          </Provider>
        </IntlProvider>
      </Router>
@@ -88,7 +93,7 @@ describe('IdVerificationPage', () => {
      <Router initialEntries={['/?next=dashboard']}>
        <IntlProvider locale="en">
          <Provider store={store}>
-            <IdVerificationPageSlot />
+            <IntlIdVerificationPage {...props} />
          </Provider>
        </IntlProvider>
      </Router>
@@ -102,7 +107,7 @@ describe('IdVerificationPage', () => {
      <Router initialEntries={['/?next=dashboard']}>
        <IntlProvider locale="en">
          <Provider store={store}>
-            <IdVerificationPageSlot />
+            <IntlIdVerificationPage {...props} />
          </Provider>
        </IntlProvider>
      </Router>
--- a/src/id-verification/tests/panels/GetNameIdPanel.test.jsx
+++ b/src/id-verification/tests/panels/GetNameIdPanel.test.jsx
@@ -1,9 +1,10 @@
+import React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import {
  render, cleanup, act, screen, fireEvent,
 } from '@testing-library/react';
 import '@edx/frontend-platform/analytics';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
 import IdVerificationContext from '../../IdVerificationContext';
 import { VerifiedNameContext } from '../../VerifiedNameContext';
 import GetNameIdPanel from '../../panels/GetNameIdPanel';
@@ -12,7 +13,13 @@ jest.mock('@edx/frontend-platform/analytics', () => ({
  sendTrackEvent: jest.fn(),
 }));

+const IntlGetNameIdPanel = injectIntl(GetNameIdPanel);
+
 describe('GetNameIdPanel', () => {
+  const defaultProps = {
+    intl: {},
+  };
+
  const IDVerificationContextValue = {
    nameOnAccount: 'test',
    userId: 3,
@@ -30,7 +37,7 @@ describe('GetNameIdPanel', () => {
        <IntlProvider locale="en">
          <VerifiedNameContext.Provider value={verifiedNameContextValue}>
            <IdVerificationContext.Provider value={idVerificationContextValue}>
-              <GetNameIdPanel />
+              <IntlGetNameIdPanel {...defaultProps} />
            </IdVerificationContext.Provider>
          </VerifiedNameContext.Provider>
        </IntlProvider>
--- a/src/id-verification/tests/panels/IdContextPanel.test.jsx
+++ b/src/id-verification/tests/panels/IdContextPanel.test.jsx
@@ -4,7 +4,7 @@ import {
  render, cleanup, act, screen, fireEvent,
 } from '@testing-library/react';
 import '@edx/frontend-platform/analytics';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
 import IdVerificationContext from '../../IdVerificationContext';
 import IdContextPanel from '../../panels/IdContextPanel';

@@ -12,7 +12,13 @@ jest.mock('@edx/frontend-platform/analytics', () => ({
  sendTrackEvent: jest.fn(),
 }));

+const IntlIdContextPanel = injectIntl(IdContextPanel);
+
 describe('IdContextPanel', () => {
+  const defaultProps = {
+    intl: {},
+  };
+
  const contextValue = {
    facePhotoFile: 'test.jpg',
    reachedSummary: false,
@@ -27,7 +33,7 @@ describe('IdContextPanel', () => {
      <Router>
        <IntlProvider locale="en">
          <IdVerificationContext.Provider value={contextValue}>
-            <IdContextPanel />
+            <IntlIdContextPanel {...defaultProps} />
          </IdVerificationContext.Provider>
        </IntlProvider>
      </Router>
@@ -43,7 +49,7 @@ describe('IdContextPanel', () => {
      <Router>
        <IntlProvider locale="en">
          <IdVerificationContext.Provider value={contextValue}>
-            <IdContextPanel />
+            <IntlIdContextPanel {...defaultProps} />
          </IdVerificationContext.Provider>
        </IntlProvider>
      </Router>
--- a/src/id-verification/tests/panels/PortraitPhotoContextPanel.test.jsx
+++ b/src/id-verification/tests/panels/PortraitPhotoContextPanel.test.jsx
@@ -1,9 +1,10 @@
+import React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import {
  render, cleanup, act, screen, fireEvent,
 } from '@testing-library/react';
 import '@edx/frontend-platform/analytics';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
 import PortraitPhotoContextPanel from '../../panels/PortraitPhotoContextPanel';
 import IdVerificationContext from '../../IdVerificationContext';

@@ -11,7 +12,13 @@ jest.mock('@edx/frontend-platform/analytics', () => ({
  sendTrackEvent: jest.fn(),
 }));

+const IntlPortraitPhotoContextPanel = injectIntl(PortraitPhotoContextPanel);
+
 describe('PortraitPhotoContextPanel', () => {
+  const defaultProps = {
+    intl: {},
+  };
+
  const contextValue = { reachedSummary: false };

  afterEach(() => {
@@ -23,7 +30,7 @@ describe('PortraitPhotoContextPanel', () => {
      <Router>
        <IntlProvider locale="en">
          <IdVerificationContext.Provider value={contextValue}>
-            <PortraitPhotoContextPanel />
+            <IntlPortraitPhotoContextPanel {...defaultProps} />
          </IdVerificationContext.Provider>
        </IntlProvider>
      </Router>
@@ -39,7 +46,7 @@ describe('PortraitPhotoContextPanel', () => {
      <Router>
        <IntlProvider locale="en">
          <IdVerificationContext.Provider value={contextValue}>
-            <PortraitPhotoContextPanel />
+            <IntlPortraitPhotoContextPanel {...defaultProps} />
          </IdVerificationContext.Provider>
        </IntlProvider>
      </Router>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Max Sokolski	02f5bbaad1	Merge pull request #1145 from eduNEXT/MJG/backport-1139 fix: send json accept headers for POST requests	2024-10-23 14:09:37 +03:00
Adolfo R. Brandes	75ba8f1184	Merge pull request #1139 from eduNEXT/bav/fix-incorrect-post-accept fix: send json accept headers for POST requests	2024-10-23 12:57:41 +02:00
Brian Smith	5219606c5f	feat: use frontend-plugin-framework to provide a FooterSlot	2024-06-06 15:04:59 -03:00