Merge pull request #516 from Dicey-Tech/bbrsofiane/maple-upgrade-deps

chore: upgrade versions of frontend-build and frontend-component-header
2021-12-20 17:52:58 +01:00 · 2021-12-20 16:45:47 +00:00
88 changed files with 15858 additions and 27530 deletions
--- a/.env
+++ b/.env
@@ -22,8 +22,5 @@ LOGO_URL=''
 LOGO_TRADEMARK_URL=''
 LOGO_WHITE_URL=''
 FAVICON_URL=''
-COLLECT_YEAR_OF_BIRTH=true
-APP_ID=''
-MFE_CONFIG_API_URL=''
-SEARCH_CATALOG_URL=''
-ENABLE_SKILLS_BUILDER_PROFILE=''
+ENABLE_LEARNER_RECORD_MFE=''
+LEARNER_RECORD_MFE_BASE_URL=''
--- a/.env.development
+++ b/.env.development
@@ -23,9 +23,5 @@ LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
 LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
 LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
 FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
-COLLECT_YEAR_OF_BIRTH=true
-APP_ID=''
-MFE_CONFIG_API_URL=''
-SEARCH_CATALOG_URL='http://localhost:18000/courses'
-ENABLE_SKILLS_BUILDER_PROFILE=''
-ENABLE_PACT_STUBS=true
+ENABLE_LEARNER_RECORD_MFE=''
+LEARNER_RECORD_MFE_BASE_URL='http://localhost:1990'
--- a/.env.test
+++ b/.env.test
@@ -18,8 +18,4 @@ LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
 LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
 FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
 ENABLE_LEARNER_RECORD_MFE=''
-ENABLE_SKILLS_BUILDER_PROFILE=''
 LEARNER_RECORD_MFE_BASE_URL='http://localhost:1990'
-COLLECT_YEAR_OF_BIRTH=true
-APP_ID=''
-MFE_CONFIG_API_URL=''
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
 const { createConfig } = require('@edx/frontend-build');

-module.exports = createConfig('eslint');
+module.exports = createConfig('eslint');
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -0,0 +1 @@
+* @edx/community-engineering
--- a/.github/workflows/add-depr-ticket-to-depr-board.yml
+++ b/.github/workflows/add-depr-ticket-to-depr-board.yml
@@ -1,19 +0,0 @@
-# Run the workflow that adds new tickets that are either:
-# - labelled "DEPR"
-# - title starts with "[DEPR]"
-# - body starts with "Proposal Date" (this is the first template field)
-# to the org-wide DEPR project board
-
-name: Add newly created DEPR issues to the DEPR project board
-
-on:
-  issues:
-    types: [opened]
-
-jobs:
-  routeissue:
-    uses: openedx/.github/.github/workflows/add-depr-ticket-to-depr-board.yml@master
-    secrets:
-      GITHUB_APP_ID: ${{ secrets.GRAPHQL_AUTH_APP_ID }}
-      GITHUB_APP_PRIVATE_KEY: ${{ secrets.GRAPHQL_AUTH_APP_PEM }}
-      SLACK_BOT_TOKEN: ${{ secrets.SLACK_ISSUE_BOT_TOKEN }}
--- a/.github/workflows/add-remove-label-on-comment.yml
+++ b/.github/workflows/add-remove-label-on-comment.yml
@@ -1,20 +0,0 @@
-# This workflow runs when a comment is made on the ticket
-# If the comment starts with "label: " it tries to apply
-# the label indicated in rest of comment.
-# If the comment starts with "remove label: ", it tries
-# to remove the indicated label.
-# Note: Labels are allowed to have spaces and this script does
-# not parse spaces (as often a space is legitimate), so the command
-# "label: really long lots of words label" will apply the
-# label "really long lots of words label"
-
-name: Allows for the adding and removing of labels via comment
-
-on:
-  issue_comment:
-    types: [created]
-
-jobs:
-  add_remove_labels:
-    uses: openedx/.github/.github/workflows/add-remove-label-on-comment.yml@master
-
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -1,3 +1,4 @@
+---
 name: ci
 on:
  push:
@@ -5,25 +6,27 @@ on:
    - master
  pull_request:
 jobs:
-  tests:
+  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
+        node-version:
+        - 12
        npm-test:
        - i18n_extract
+        - is-es5
        - lint
        - test
    steps:
-    - uses: actions/checkout@v3
-    - name: Setup Nodejs Env
-      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
-    - uses: actions/setup-node@v3
+    - uses: actions/checkout@v2
+    - uses: actions/setup-node@v2
      with:
-        node-version: ${{ env.NODE_VER }}
+        node-version: ${{ matrix.node-version }}
+    - run: npm install -g npm@6
    - run: make requirements
    - run: make test NPM_TESTS=build
    - run: make test NPM_TESTS=${{ matrix.npm-test }}
    - name: upload coverage
-      uses: codecov/codecov-action@v3
+      uses: codecov/codecov-action@v2
      with:
        fail_ci_if_error: false
--- a/.github/workflows/commitlint.yml
+++ b/.github/workflows/commitlint.yml
@@ -7,4 +7,4 @@ on:

 jobs:
  commitlint:
-    uses: openedx/.github/.github/workflows/commitlint.yml@master
+    uses: edx/.github/.github/workflows/commitlint.yml@master
--- a/.github/workflows/lockfileversion-check.yml
+++ b/.github/workflows/lockfileversion-check.yml
@@ -1,13 +0,0 @@
-#check package-lock file version
-
-name: Lockfile Version check
-
-on:
-  push:
-    branches:
-    - master
-  pull_request:
-
-jobs:
-  version-check:
-    uses: openedx/.github/.github/workflows/lockfile-check.yml@master
--- a/.github/workflows/self-assign-issue.yml
+++ b/.github/workflows/self-assign-issue.yml
@@ -1,12 +0,0 @@
-# This workflow runs when a comment is made on the ticket
-# If the comment starts with "assign me" it assigns the author to the
-# ticket (case insensitive)
-
-name: Assign comment author to ticket if they say "assign me"
-on:
-  issue_comment:
-    types: [created]
-
-jobs:
-  self_assign_by_comment:
-    uses: openedx/.github/.github/workflows/self-assign-issue.yml@master
--- a/.github/workflows/update-browserslist-db.yml
+++ b/.github/workflows/update-browserslist-db.yml
@@ -1,12 +0,0 @@
-name: Update Browserslist DB
-on:
-  schedule:
-    - cron:  '0 0 * * 1'
-  workflow_dispatch:
-
-jobs:
-  update-browserslist:
-    uses: openedx/.github/.github/workflows/update-browserslist-db.yml@master
-
-    secrets:
-        requirements_bot_github_token: ${{ secrets.requirements_bot_github_token }}
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +0,0 @@
-18
--- a/.tx/config
+++ b/.tx/config
@@ -1,9 +1,8 @@
 [main]
 host = https://www.transifex.com

-[o:open-edx:p:edx-platform:r:frontend-app-profile]
+[edx-platform.frontend-app-profile]
 file_filter = src/i18n/messages/<lang>.json
 source_file = src/i18n/transifex_input.json
 source_lang = en
-type        = KEYVALUEJSON
-
+type = KEYVALUEJSON
--- a/32
+++ b/32
@@ -1,15 +1,16 @@
-export TRANSIFEX_RESOURCE = frontend-app-profile
 transifex_resource = frontend-app-profile
-transifex_langs = "ar,de,de_DE,es_419,fa_IR,fr,fr_CA,hi,it,it_IT,pt,pt_PT,ru,uk,zh_CN"
+transifex_langs = "ar,fr,es_419,zh_CN"

-intl_imports = ./node_modules/.bin/intl-imports.js
 transifex_utils = ./node_modules/.bin/transifex-utils.js
 i18n = ./src/i18n
 transifex_input = $(i18n)/transifex_input.json
+tx_url1 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transifex_resource)/translation/en/strings/
+tx_url2 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transifex_resource)/source/
+
 # This directory must match .babelrc .
 transifex_temp = ./temp/babel-plugin-react-intl

-NPM_TESTS=build i18n_extract lint test
+NPM_TESTS=build i18n_extract lint test is-es5

 .PHONY: test
 test: $(addprefix test.npm.,$(NPM_TESTS))  ## validate ci suite
@@ -44,30 +45,15 @@ push_translations:
 	# Pushing strings to Transifex...
 	tx push -s
 	# Fetching hashes from Transifex...
-	./node_modules/@edx/reactifex/bash_scripts/get_hashed_strings_v3.sh
+	./node_modules/reactifex/bash_scripts/get_hashed_strings.sh $(tx_url1)
 	# Writing out comments to file...
-	$(transifex_utils) $(transifex_temp) --comments --v3-scripts-path
+	$(transifex_utils) $(transifex_temp) --comments
 	# Pushing comments to Transifex...
-	./node_modules/@edx/reactifex/bash_scripts/put_comments_v3.sh
+	./node_modules/reactifex/bash_scripts/put_comments.sh $(tx_url2)

-ifeq ($(OPENEDX_ATLAS_PULL),)
 # Pulls translations from Transifex.
 pull_translations:
-	tx pull -t -f --mode reviewed --languages=$(transifex_langs)
-else
-# Experimental: OEP-58 Pulls translations using atlas
-pull_translations:
-	rm -rf src/i18n/messages
-	mkdir src/i18n/messages
-	cd src/i18n/messages \
-      && atlas pull --filter=$(transifex_langs) \
-               translations/paragon/src/i18n/messages:paragon \
-               translations/frontend-component-header/src/i18n/messages:frontend-component-header \
-               translations/frontend-component-footer/src/i18n/messages:frontend-component-footer \
-               translations/frontend-app-profile/src/i18n/messages:frontend-app-profile
-
-	$(intl_imports) paragon frontend-component-header frontend-component-footer frontend-app-profile
-endif
+	tx pull -f --mode reviewed --language=$(transifex_langs)

 # This target is used by Travis.
 validate-no-uncommitted-package-lock-changes:
--- a/README.rst
+++ b/README.rst
@@ -1,127 +1,57 @@
+|Build Status| |Codecov| |license|
+
 frontend-app-profile
-##########################
+====================

-|license-badge| |status-badge| |ci-badge| |codecov-badge|
-
-.. |license-badge| image:: https://img.shields.io/github/license/openedx/frontend-app-profile.svg
-    :target: https://github.com/openedx/frontend-app-profile/blob/main/LICENSE
-    :alt: License
-
-.. |status-badge| image:: https://img.shields.io/badge/Status-Maintained-brightgreen
-
-.. |ci-badge| image:: https://github.com/openedx/frontend-app-profile/actions/workflows/ci.yml/badge.svg
-    :target: https://github.com/openedx/frontend-app-profile/actions/workflows/ci.yml
-    :alt: Continuous Integration
-
-.. |codecov-badge| image:: https://codecov.io/github/openedx/frontend-app-profile/coverage.svg?branch=main
-    :target: https://codecov.io/github/openedx/frontend-app-profile?branch=main
-    :alt: Codecov
-
-Purpose
-=======
-
-This is a micro-frontend application responsible for the display and updating of user profiles.
+This is a micro-frontend application responsible for the display and updating of user profiles. Please tag **@edx/arch-fed** on any PRs or issues.

 When a user views their own profile, they're given fields to edit their full name, location, primary spoken language, education, social links, and bio.  Each field also has a dropdown to select the visibility of that field - i.e., whether it can be viewed by other learners.

 When a user views someone else's profile, they see all those fields that that user set as public.

-Getting Started
-===============
+----------

-Devstack Installation
---------------------
+Development
+-----------

-Follow these steps to provision, run, and enable an instance of the
-Profile MFE for local development via the `devstack`_.
+Start Devstack
+^^^^^^^^^^^^^^

-.. _devstack: https://github.com/openedx/devstack#getting-started
+To use this application `devstack <https://github.com/edx/devstack>`__ must be running and you must be logged into it.

-#. To use this application, `devstack <https://github.com/openedx/devstack>`__ must be running and you must be logged into it.
+-  Start devstack
+-  Log in (http://localhost:18000/login)

-   * Start devstack
-   * Log in (http://localhost:18000/login)
+Start the development server
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^

-#. To run Profile, install requirements and start the development server by running:
+In this project, install requirements and start the development server by running:

-.. code-block::
+.. code:: bash

   npm install
   npm start # The server will run on port 1995

-Once the dev server is up, visit http://localhost:1995/u/staff.
+Once the dev server is up visit http://localhost:1995/u/staff.

-Configuration
-------------
+----------
+
+Configuration and Deployment
+----------------------------

 This MFE is configured via node environment variables supplied at build time. See the .env file for the list of required environment variables. Example build syntax with a single environment variable:

-.. code-block::
+.. code:: bash

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

-Getting Help
-============

-If you're having trouble, we have discussion forums at
-https://discuss.openedx.org where you can connect with others in the community.
+For more information see the document: `Micro-frontend applications in Open
+edX <https://edx.readthedocs.io/projects/edx-developer-docs/en/latest/micro-frontends-in-open-edx.html>`__.

-Our real-time conversations are on Slack. You can request a `Slack
-invitation`_, then join our `community Slack workspace`_.  Because this is a
-frontend repository, the best place to discuss it would be in the `#wg-frontend
-channel`_.
-
-For anything non-trivial, the best path is to open an issue in this repository
-with as many details about the issue you are facing as you can provide.  Please tag **@openedx/2u-aperture** on any PRs or issues.
-
-https://github.com/openedx/frontend-app-profile/issues
-
-For more information about these options, see the `Getting Help`_ page.
-
-.. _Slack invitation: https://openedx.org/slack
-.. _community Slack workspace: https://openedx.slack.com/
-.. _#wg-frontend channel: https://openedx.slack.com/archives/C04BM6YC7A6
-.. _Getting Help: https://openedx.org/getting-help
-
-License
-=======
-
-The code in this repository is licensed under the AGPLv3 unless otherwise
-noted.
-
-Please see `LICENSE <LICENSE>`_ for details.
-
-Contributing
-============
-
-Contributions are very welcome.  Please read `How To Contribute`_ for details.
-
-.. _How To Contribute: https://openedx.org/r/how-to-contribute
-
-This project is currently accepting all types of contributions, bug fixes,
-security fixes, maintenance work, or new features.  However, please make sure
-to have a discussion about your new feature idea with the maintainers prior to
-beginning development to maximize the chances of your change being accepted.
-You can start a conversation by creating a new issue on this repo summarizing
-your idea.
-
-The Open edX Code of Conduct
-============================
-
-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`_. Backstage pulls this data from the ``catalog-info.yaml``
-file in this repo.
-
-.. _Backstage: https://backstage.herokuapp.com/catalog/default/component/frontend-app-profile
-
-Reporting Security Issues
-=========================
-
-Please do not report security issues in public.  Email security@openedx.org instead.
+.. |Build Status| image:: https://api.travis-ci.org/edx/frontend-app-profile.svg?branch=master
+   :target: https://travis-ci.org/edx/frontend-app-profile
+.. |Codecov| image:: https://img.shields.io/codecov/c/github/edx/frontend-app-profile
+   :target: https://codecov.io/gh/edx/frontend-app-profile
+.. |license| image:: https://img.shields.io/npm/l/@edx/frontend-app-profile.svg
+   :target: @edx/frontend-app-profile
--- a/catalog-info.yaml
+++ b/catalog-info.yaml
@@ -1,24 +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: 'Profile'
-  description: 'This is a micro-frontend application responsible for the display and updating of user profiles.'
-  links:
-    - url: 'https://github.com/openedx/frontend-app-profile/blob/master/README.rst'
-      title: 'Documentation'
-      icon: 'Article'
-  annotations:
-    # (Optional) Annotation keys and values can be whatever you want.
-    # We use it in Open edX repos to have a comma-separated list of GitHub user
-    # names that might be interested in changes to the architecture of this
-    # component.
-    openedx.org/arch-interest-groups: ""
-    # This can be multiple comma-separated projects.
-    openedx.org/add-to-projects: "openedx:23"
-spec:
-  type: 'service'
-  lifecycle: 'production'
-  owner: 2U-aperture
-# (Optional) An array of different components or resources.
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -6,74 +6,70 @@
  "license": "AGPL-3.0",
  "repository": {
    "type": "git",
-    "url": "git+https://github.com/openedx/frontend-app-profile.git"
+    "url": "git+https://github.com/edx/frontend-app-profile.git"
  },
  "scripts": {
    "build": "fedx-scripts webpack",
    "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
+    "is-es5": "es-check es5 ./dist/*.js",
    "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
    "snapshot": "fedx-scripts jest --updateSnapshot",
    "start": "fedx-scripts webpack-dev-server --progress",
-    "test": "TZ=UTC fedx-scripts jest --coverage --passWithNoTests",
-    "stubs": "pact-stub-service ./src/pacts/frontend-app-profile-edx-platform.json --port 18000 --cors"
+    "test": "fedx-scripts jest --coverage --passWithNoTests"
  },
  "bugs": {
-    "url": "https://github.com/openedx/frontend-app-profile/issues"
+    "url": "https://github.com/edx/frontend-app-profile/issues"
  },
-  "homepage": "https://github.com/openedx/frontend-app-profile#readme",
+  "homepage": "https://github.com/edx/frontend-app-profile#readme",
  "publishConfig": {
    "access": "public"
  },
  "browserslist": [
-    "extends @edx/browserslist-config"
+    "last 2 versions",
+    "ie 11"
  ],
  "dependencies": {
-    "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
-    "@edx/frontend-component-footer": "12.4.0",
-    "@edx/frontend-component-header": "4.7.1",
-    "@edx/frontend-platform": "5.6.1",
-    "@edx/paragon": "^20.44.0",
+    "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
+    "@edx/frontend-component-footer": "10.1.6",
+    "@edx/frontend-component-header": "2.4.3",
+    "@edx/frontend-platform": "1.12.7",
+    "@edx/paragon": "16.6.1",
    "@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",
-    "@pact-foundation/pact": "^11.0.2",
-    "classnames": "2.3.2",
-    "core-js": "3.33.0",
-    "history": "5.3.0",
+    "@fortawesome/react-fontawesome": "0.1.15",
+    "classnames": "2.3.1",
+    "core-js": "3.18.2",
    "lodash.camelcase": "4.3.0",
    "lodash.get": "4.4.2",
    "lodash.pick": "4.4.0",
    "lodash.snakecase": "4.1.1",
-    "prop-types": "15.8.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-helmet": "6.1.0",
-    "react-redux": "7.2.9",
-    "react-router": "6.16.0",
-    "react-router-dom": "6.16.0",
-    "redux": "4.2.1",
+    "prop-types": "15.7.2",
+    "react": "16.14.0",
+    "react-dom": "16.14.0",
+    "react-redux": "7.2.5",
+    "react-router": "5.2.1",
+    "react-router-dom": "5.3.0",
+    "redux": "4.1.1",
    "redux-devtools-extension": "2.13.9",
    "redux-logger": "3.0.6",
-    "redux-saga": "1.2.3",
-    "redux-thunk": "2.4.2",
-    "regenerator-runtime": "0.14.0",
-    "reselect": "4.1.8",
-    "universal-cookie": "4.0.4"
+    "redux-saga": "1.1.3",
+    "redux-thunk": "2.3.0",
+    "regenerator-runtime": "0.13.9",
+    "reselect": "4.0.0",
+    "universal-cookie": "3.1.0"
  },
  "devDependencies": {
-    "@commitlint/cli": "17.8.0",
-    "@commitlint/config-angular": "17.8.0",
-    "@edx/browserslist-config": "^1.1.1",
-    "@edx/frontend-build": "12.9.17",
-    "@edx/reactifex": "2.2.0",
-    "@testing-library/react": "12.1.5",
-    "@wojtekmaj/enzyme-adapter-react-17": "0.8.0",
+    "@commitlint/cli": "13.2.1",
+    "@commitlint/config-angular": "13.2.0",
+    "@edx/frontend-build": "9.0.5",
    "codecov": "3.8.3",
    "enzyme": "3.11.0",
-    "glob": "10.3.10",
-    "react-test-renderer": "17.0.2",
+    "enzyme-adapter-react-16": "1.15.6",
+    "es-check": "5.2.4",
+    "glob": "7.2.0",
+    "react-test-renderer": "16.14.0",
    "reactifex": "1.1.1",
    "redux-mock-store": "1.5.4"
  }
--- a/renovate.json
+++ b/renovate.json
@@ -22,11 +22,6 @@
        "pin"
      ],
      "automerge": true
-    },
-    {
-      "matchPackagePatterns": ["@edx", "@openedx"],
-      "matchUpdateTypes": ["minor", "patch"],
-      "automerge": true
    }
  ],
  "timezone": "America/New_York"
--- a/src/head/Head.jsx
+++ b/src/head/Head.jsx
@@ -1,21 +0,0 @@
-import React from 'react';
-import { Helmet } from 'react-helmet';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { getConfig } from '@edx/frontend-platform';
-
-import messages from './messages';
-
-const Head = ({ intl }) => (
-  <Helmet>
-    <title>
-      {intl.formatMessage(messages['profile.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 injectIntl(Head);
--- a/src/head/Head.test.jsx
+++ b/src/head/Head.test.jsx
@@ -1,17 +0,0 @@
-import React from 'react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { Helmet } from 'react-helmet';
-import { mount } from 'enzyme';
-import { getConfig } from '@edx/frontend-platform';
-import Head from './Head';
-
-describe('Head', () => {
-  const props = {};
-  it('should match render title tag and favicon with the site configuration values', () => {
-    mount(<IntlProvider locale="en"><Head {...props} /></IntlProvider>);
-    const helmet = Helmet.peek();
-    expect(helmet.title).toEqual(`Profile | ${getConfig().SITE_NAME}`);
-    expect(helmet.linkTags[0].rel).toEqual('shortcut icon');
-    expect(helmet.linkTags[0].href).toEqual(getConfig().FAVICON_URL);
-  });
-});
--- a/src/head/messages.js
+++ b/src/head/messages.js
@@ -1,11 +0,0 @@
-import { defineMessages } from '@edx/frontend-platform/i18n';
-
-const messages = defineMessages({
-  'profile.page.title': {
-    id: 'profile.page.title',
-    defaultMessage: 'Profile | {siteName}',
-    description: 'Title tag',
-  },
-});
-
-export default messages;
--- a/src/i18n/index.js
+++ b/src/i18n/index.js
@@ -1,44 +0,0 @@
-import { messages as headerMessages } from '@edx/frontend-component-header';
-import { messages as footerMessages } from '@edx/frontend-component-footer';
-import { messages as paragonMessages } from '@edx/paragon';
-import arMessages from './messages/ar.json';
-import deMessages from './messages/de.json';
-import dedeCAMessages from './messages/de_DE.json';
-import es419Messages from './messages/es_419.json';
-import faIRMessages from './messages/fa_IR.json';
-import frCAMessages from './messages/fr_CA.json';
-import itMessages from './messages/it.json';
-import ititCAMessages from './messages/it_IT.json';
-import frMessages from './messages/fr.json';
-import hiMessages from './messages/hi.json';
-import ptMessages from './messages/pt.json';
-import ptptCAMessages from './messages/pt_PT.json';
-import ruMessages from './messages/ru.json';
-import ukMessages from './messages/uk.json';
-import zhcnMessages from './messages/zh_CN.json';
-// no need to import en messages-- they are in the defaultMessage field
-
-const appMessages = {
-  ar: arMessages,
-  'es-419': es419Messages,
-  'fa-ir': faIRMessages,
-  fr: frMessages,
-  'zh-cn': zhcnMessages,
-  pt: ptMessages,
-  it: itMessages,
-  de: deMessages,
-  hi: hiMessages,
-  'fr-ca': frCAMessages,
-  ru: ruMessages,
-  uk: ukMessages,
-  'de-de': dedeCAMessages,
-  'it-it': ititCAMessages,
-  'pt-pt': ptptCAMessages,
-};
-
-export default [
-  headerMessages,
-  footerMessages,
-  paragonMessages,
-  appMessages,
-];
--- a/src/i18n/index.jsx
+++ b/src/i18n/index.jsx
@@ -0,0 +1,32 @@
+import arMessages from './messages/ar.json';
+import caMessages from './messages/ca.json';
+// no need to import en messages-- they are in the defaultMessage field
+import es419Messages from './messages/es_419.json';
+import frMessages from './messages/fr.json';
+import zhcnMessages from './messages/zh_CN.json';
+import heMessages from './messages/he.json';
+import idMessages from './messages/id.json';
+import kokrMessages from './messages/ko_kr.json';
+import plMessages from './messages/pl.json';
+import ptbrMessages from './messages/pt_br.json';
+import ruMessages from './messages/ru.json';
+import thMessages from './messages/th.json';
+import ukMessages from './messages/uk.json';
+
+const messages = {
+  ar: arMessages,
+  'es-419': es419Messages,
+  fr: frMessages,
+  'zh-cn': zhcnMessages,
+  ca: caMessages,
+  he: heMessages,
+  id: idMessages,
+  'ko-kr': kokrMessages,
+  pl: plMessages,
+  'pt-br': ptbrMessages,
+  ru: ruMessages,
+  th: thMessages,
+  uk: ukMessages,
+};
+
+export default messages;
--- a/src/i18n/messages/ar.json
+++ b/src/i18n/messages/ar.json
@@ -1,57 +1,51 @@
 {
-  "profile.page.title": "الملف الشخصي | {siteName}",
-  "profile.age.details": "لمشاركة ملفك الشخصي مع بقية متعلمي {siteName}، يجب أن تؤكد أنك عمرك يفوق 13 عامًا.",
-  "profile.age.set.date": "ضيط تاريخ ميلادك",
-  "profile.datejoined.member.since": "عضو منذ {year}",
-  "profile.bio.empty": "إضافة نبذة قصيرة",
+  "profile.age.headline": "لا يمكن مشاركة ملفك الشخصي",
+  "profile.age.details": "لمشاركة ملفك الشخصي مع متعلمي edX الآخرين يجب التحقق من أن يكون عمرك أكثر من ١٣ سنة",
+  "profile.age.set.date": "اضبط تاريخ ميلاك",
+  "profile.datejoined.member.since": "عضو منذُ {year}",
+  "profile.bio.empty": "أضف نبذة قصيرة",
  "profile.bio.about.me": "نبذة عنّي",
-  "profile.certificate.organization.label": "من طرف",
-  "profile.certificate.completion.date.label": "صدرت بتاريخ {date}",
-  "profile.no.certificates": "ليست لديك أي شهادات يعد.",
+  "profile.certificate.organization.label": "من",
+  "profile.certificate.completion.date.label": "مكتمل في",
+  "profile.no.certificates": "لم تحصل على أية شهادات حتى الآن.",
  "profile.certificates.my.certificates": "شهاداتي",
  "profile.certificates.view.certificate": "معاينة الشهادة",
  "profile.certificates.types.verified": "شهادة موثقة",
  "profile.certificates.types.professional": "شهادة مهنية",
  "profile.certificates.types.unknown": "شهادة",
  "profile.country.label": "الموقع",
-  "profile.country.empty": "إضافة الموقع",
-  "profile.education.empty": "إضافة المستوى التعليمي",
+  "profile.country.empty": "أضف موقعًا",
+  "profile.education.empty": "أضف مؤهلًا تعليميًا",
  "profile.education.education": "المستوى التعليمي",
-  "profile.education.levels.p": "دكتوراه",
-  "profile.education.levels.m": "ماجستير / ماستر أو شهادة مهنيّة",
-  "profile.education.levels.b": "بكالوريوس / ليسانس",
-  "profile.education.levels.a": "درجة الزمالة / دبلوم الدراسات الجامعية",
-  "profile.education.levels.hs": "الثانوية العامة / البكالوريا",
-  "profile.education.levels.jhs": "المدرسة الإعدادية / المتوسطة",
-  "profile.education.levels.el": "المدرسة الابتدائية / الأساسية",
-  "profile.education.levels.none": "دون تعليم رسمي",
+  "profile.education.levels.p": "شهادة دكتوراه",
+  "profile.education.levels.m": "ماجستير أو شهادة مهنيّة",
+  "profile.education.levels.b": "درجة البكالوريوس",
+  "profile.education.levels.a": "درجة الزمالة",
+  "profile.education.levels.hs": "شهادة الثانوية العامة",
+  "profile.education.levels.jhs": "شهادة الثانوية الصغرى/الإعدادية/المرحلة المتوسّطة",
+  "profile.education.levels.el": "شهادة المدرسة الابتدائية",
+  "profile.education.levels.none": "لا يوجد تعليم رسمي",
  "profile.education.levels.o": "نوع آخر من التعليم",
-  "profile.editbutton.edit": "تعديل",
-  "profile.formcontrols.who.can.see": "من يستطيع رؤية هذا:",
+  "profile.editbutton.edit": "تحرير",
+  "profile.formcontrols.who.can.see": "من يمكنه مشاهدة هذا:",
  "profile.formcontrols.button.cancel": "إلغاء",
  "profile.formcontrols.button.save": "حفظ",
-  "profile.formcontrols.button.saving": "الحفظ جارٍ",
+  "profile.formcontrols.button.saving": "جاري الحفظ",
  "profile.formcontrols.button.saved": "تم الحفظ",
  "profile.visibility.who.just.me": "أنا فقط",
-  "profile.visibility.who.everyone": "جميع من على {siteName}",
-  "profile.learningGoal.learningGoal": "هدف التعلم",
-  "profile.learningGoal.options.start_career": "أريد أن أبدأ مسيرتي المهنية",
-  "profile.learningGoal.options.advance_career": "أريد أن ارتقي في مسيرتي المهنية",
-  "profile.learningGoal.options.learn_something_new": "أريد أن أتعلم شيئًا جديدًا",
-  "profile.learningGoal.options.something_else": "شيء آخر",
+  "profile.visibility.who.everyone": "جميع أعضاء edX",
  "profile.name.full.name": "الاسم الكامل",
-  "profile.name.details": "هذا هو الاسم الذي يظهر في حسابك وفي شهاداتك",
-  "profile.name.empty": "إضافة الاسم",
+  "profile.name.details": "هذا هو الاسم الذي سيظهر في حسابك وفي شهاداتك",
+  "profile.name.empty": "إضافة اسم",
  "profile.preferredlanguage.empty": "إضافة اللغة",
-  "profile.preferredlanguage.label": "لغة التحدّث الأساسية",
+  "profile.preferredlanguage.label": "لغة التحدث الأم",
  "profile.profileavatar.upload-button": "تحميل صورة",
  "profile.profileavatar.remove.button": "حذف",
-  "profile.image.alt.attribute": "صورة الملف الشخصي",
+  "profile.image.alt.attribute": "صورة عرض الملف الشخصي",
  "profile.profileavatar.change-button": "تغيير",
  "profile.sociallinks.add": "إضافة {network}",
-  "profile.sociallinks.social.links": "روابط التواصل الاجتماعي",
-  "profile.notfound.message": "الصفحة التي تبحث عنها غير متوفرة أو هناك خطأ في العنوان. رجاءً تحقق من العنوان و حاول مجدّدًا.",
+  "profile.sociallinks.social.links": "روابط قنوات التواصل الاجتماعي",
+  "profile.notfound.message": "الصفحة التي تبحث عنها غير متوفرة أو هناك خطأ في نص الرابط. الرجاء التحقق من الرابط والمحاولة مجددا.",
  "profile.viewMyRecords": "عرض سجلّاتي",
-  "profile.loading": "يتم تحميل الملف الشخصي...",
-  "profile.username.description": "معلومات ملفك الشخصي تظهر لك فقط. وحده اسم المستخدم الخاص بك يظهر للآخرين على {siteName}."
+  "profile.loading": "جاري تحميل الملف الشخصي ..."
 }
--- a/src/i18n/messages/ca.json
+++ b/src/i18n/messages/ca.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/de.json
+++ b/src/i18n/messages/de.json
@@ -1,57 +0,0 @@
-{
-  "profile.page.title": "Profile | {siteName}",
-  "profile.age.details": "To share your profile with other {siteName} learners, you must confirm that you are over the age of 13.",
-  "profile.age.set.date": "Set your date of birth",
-  "profile.datejoined.member.since": "Member since {year}",
-  "profile.bio.empty": "Add a short bio",
-  "profile.bio.about.me": "About Me",
-  "profile.certificate.organization.label": "From",
-  "profile.certificate.completion.date.label": "Completed on {date}",
-  "profile.no.certificates": "You don't have any certificates yet.",
-  "profile.certificates.my.certificates": "My Certificates",
-  "profile.certificates.view.certificate": "View Certificate",
-  "profile.certificates.types.verified": "Verified Certificate",
-  "profile.certificates.types.professional": "Professional Certificate",
-  "profile.certificates.types.unknown": "Certificate",
-  "profile.country.label": "Location",
-  "profile.country.empty": "Add location",
-  "profile.education.empty": "Add education",
-  "profile.education.education": "Education",
-  "profile.education.levels.p": "Doctorate",
-  "profile.education.levels.m": "Master's or professional degree",
-  "profile.education.levels.b": "Bachelor's Degree",
-  "profile.education.levels.a": "Associate's degree",
-  "profile.education.levels.hs": "Secondary/high school",
-  "profile.education.levels.jhs": "Junior secondary/junior high/middle school",
-  "profile.education.levels.el": "Elementary/primary school",
-  "profile.education.levels.none": "No formal education",
-  "profile.education.levels.o": "Other education",
-  "profile.editbutton.edit": "Edit",
-  "profile.formcontrols.who.can.see": "Who can see this:",
-  "profile.formcontrols.button.cancel": "Cancel",
-  "profile.formcontrols.button.save": "Save",
-  "profile.formcontrols.button.saving": "Saving",
-  "profile.formcontrols.button.saved": "Saved",
-  "profile.visibility.who.just.me": "Just me",
-  "profile.visibility.who.everyone": "Everyone on {siteName}",
-  "profile.learningGoal.learningGoal": "Learning Goal",
-  "profile.learningGoal.options.start_career": "I want to start my career",
-  "profile.learningGoal.options.advance_career": "I want to advance my career",
-  "profile.learningGoal.options.learn_something_new": "I want to learn something new",
-  "profile.learningGoal.options.something_else": "Something else",
-  "profile.name.full.name": "Full Name",
-  "profile.name.details": "This is the name that appears in your account and on your certificates.",
-  "profile.name.empty": "Add name",
-  "profile.preferredlanguage.empty": "Add language",
-  "profile.preferredlanguage.label": "Primary Language Spoken",
-  "profile.profileavatar.upload-button": "Upload Photo",
-  "profile.profileavatar.remove.button": "Remove",
-  "profile.image.alt.attribute": "profile avatar",
-  "profile.profileavatar.change-button": "Change",
-  "profile.sociallinks.add": "Add {network}",
-  "profile.sociallinks.social.links": "Social Links",
-  "profile.notfound.message": "The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again.",
-  "profile.viewMyRecords": "View My Records",
-  "profile.loading": "Profile loading...",
-  "profile.username.description": "Your profile information is only visible to you. Only your username is visible to others on {siteName}."
-}
--- a/src/i18n/messages/de_DE.json
+++ b/src/i18n/messages/de_DE.json
@@ -1,57 +0,0 @@
-{
-  "profile.page.title": "Profil | {siteName}",
-  "profile.age.details": "Um Ihr Profil mit anderen {siteName}-Lernern zu teilen, müssen Sie bestätigen, dass Sie über 13 Jahre alt sind.",
-  "profile.age.set.date": "Legen Sie Ihr Geburtsdatum fest",
-  "profile.datejoined.member.since": "Mitglied seit {year}",
-  "profile.bio.empty": "Fügen Sie Ihre Kurzbiografie hinzu",
-  "profile.bio.about.me": "Über mich",
-  "profile.certificate.organization.label": "Von",
-  "profile.certificate.completion.date.label": "Abgeschlossen am {date}",
-  "profile.no.certificates": "Sie haben bisher keine Zertifikate erhalten.",
-  "profile.certificates.my.certificates": "Meine Zertifikate",
-  "profile.certificates.view.certificate": "Zertifikat anschauen",
-  "profile.certificates.types.verified": "Beglaubigtes Zertifikat ",
-  "profile.certificates.types.professional": "Professional Certificate",
-  "profile.certificates.types.unknown": "Zertifikat",
-  "profile.country.label": "Ort",
-  "profile.country.empty": "Standort hinzufügen",
-  "profile.education.empty": "Ausbildung hinzufügen",
-  "profile.education.education": "Bildung",
-  "profile.education.levels.p": "Doktortitel",
-  "profile.education.levels.m": "Master oder gleichwertiger akademischer Bildungsgrad",
-  "profile.education.levels.b": "Bachelor",
-  "profile.education.levels.a": "Allgemeine Hochschulreife oder gleichwertiger Abschluss",
-  "profile.education.levels.hs": "Mittlere Reife",
-  "profile.education.levels.jhs": "Hauptschule",
-  "profile.education.levels.el": "Grundschule",
-  "profile.education.levels.none": "Keinen Bildungsabschluss",
-  "profile.education.levels.o": "Sonstige Bildung",
-  "profile.editbutton.edit": "Bearbeiten",
-  "profile.formcontrols.who.can.see": "Wer kann das sehen:",
-  "profile.formcontrols.button.cancel": "Abbrechen",
-  "profile.formcontrols.button.save": "Speichern",
-  "profile.formcontrols.button.saving": "Speichert",
-  "profile.formcontrols.button.saved": "Gespeichert",
-  "profile.visibility.who.just.me": "Nur ich",
-  "profile.visibility.who.everyone": "Alle auf {siteName}",
-  "profile.learningGoal.learningGoal": "Lernziel",
-  "profile.learningGoal.options.start_career": "Ich möchte meine Karriere starten",
-  "profile.learningGoal.options.advance_career": "Ich möchte mich beruflich weiterentwickeln",
-  "profile.learningGoal.options.learn_something_new": "Ich möchte etwas Neues lernen",
-  "profile.learningGoal.options.something_else": "Etwas anderes",
-  "profile.name.full.name": "Vollständiger Name",
-  "profile.name.details": "Dies ist der Name, der in Ihrem Konto und auf Ihren Zertifikaten erscheint.",
-  "profile.name.empty": "Name hinzufügen",
-  "profile.preferredlanguage.empty": "Sprache hinzufügen",
-  "profile.preferredlanguage.label": "Gesprochene Primärsprache ",
-  "profile.profileavatar.upload-button": "Foto hochladen",
-  "profile.profileavatar.remove.button": "Entfernen",
-  "profile.image.alt.attribute": "Profil Avatar",
-  "profile.profileavatar.change-button": "Ändern",
-  "profile.sociallinks.add": "{network} hinzufügen",
-  "profile.sociallinks.social.links": "Soziale Netzwerke",
-  "profile.notfound.message": "Die gesuchte Seite ist nicht verfügbar oder es liegt ein Fehler in der URL vor. Bitte überprüfen Sie die URL und versuchen Sie es erneut.",
-  "profile.viewMyRecords": "Meine Aufzeichnungen anzeigen",
-  "profile.loading": "Profil lädt...",
-  "profile.username.description": "Ihre Profilinformationen sind nur für Sie sichtbar. Nur Ihr Benutzername ist für andere auf {siteName} sichtbar."
-}
--- a/src/i18n/messages/es_419.json
+++ b/src/i18n/messages/es_419.json
@@ -1,6 +1,6 @@
 {
-  "profile.page.title": "Perfil | {siteName}",
-  "profile.age.details": "Para compartir el perfil con otros {siteName} estudiantes, debe confirmar que es mayor de 13 años.",
+  "profile.age.headline": "Tu perfil no puede ser compartido.",
+  "profile.age.details": "Para compartir tu perfil con otros estudiantes de edX, debes confirmar que tienes más de 13 años.",
  "profile.age.set.date": "Establece tu fecha de nacimiento",
  "profile.datejoined.member.since": "Miembro desde {year}",
  "profile.bio.empty": "Añade una breve biografía",
@@ -33,12 +33,7 @@
  "profile.formcontrols.button.saving": "Guardando",
  "profile.formcontrols.button.saved": "Guardado",
  "profile.visibility.who.just.me": "Solo yo",
-  "profile.visibility.who.everyone": "Todos en {siteName}",
-  "profile.learningGoal.learningGoal": "Objetivo de aprendizaje",
-  "profile.learningGoal.options.start_career": "quiero empezar mi carrera",
-  "profile.learningGoal.options.advance_career": "Quiero avanzar en mi carrera",
-  "profile.learningGoal.options.learn_something_new": "quiero aprender algo nuevo",
-  "profile.learningGoal.options.something_else": "Algo más",
+  "profile.visibility.who.everyone": "Todos en edX",
  "profile.name.full.name": "Nombre completo",
  "profile.name.details": "Este es el nombre que aparecerá en tu cuenta y en tus certificados.",
  "profile.name.empty": "Añade nombre",
@@ -52,6 +47,5 @@
  "profile.sociallinks.social.links": "Enlaces De Redes Sociales",
  "profile.notfound.message": "La página que estas buscando no está disponible o hay un error en la URL. Por favor, comprueba la URL y vuelve a intentarlo.",
  "profile.viewMyRecords": "Ver mis registros",
-  "profile.loading": "Cargando perfil...",
-  "profile.username.description": "La información del perfil solo la visualiza usted. Solo el nombre de usuario es visible para los demás en {siteName}."
+  "profile.loading": "Cargando perfil..."
 }
--- a/src/i18n/messages/fa_IR.json
+++ b/src/i18n/messages/fa_IR.json
@@ -1,57 +0,0 @@
-{
-  "profile.page.title": "پرونده کاربری {siteName}",
-  "profile.age.details": "برای اشتراک‌گذاری پرونده کاربری خود با سایر یادگیرندگان {siteName}، باید تأیید کنید که  بیش از 13 سال سن دارید.",
-  "profile.age.set.date": "تنظیم تاریخ تولد",
-  "profile.datejoined.member.since": "عضو شده از {year}",
-  "profile.bio.empty": "بیوگرافی کوتاهی اضافه کنید",
-  "profile.bio.about.me": "درباره من",
-  "profile.certificate.organization.label": "از",
-  "profile.certificate.completion.date.label": "تکمیل شده در {date}",
-  "profile.no.certificates": "شما هنوز هیچ گواهی ندارید.",
-  "profile.certificates.my.certificates": "گواهی‌های من",
-  "profile.certificates.view.certificate": "نمایش گواهی",
-  "profile.certificates.types.verified": "گواهی تأییدشده",
-  "profile.certificates.types.professional": "گواهی حرفه‌ای",
-  "profile.certificates.types.unknown": "گواهی",
-  "profile.country.label": "مکان",
-  "profile.country.empty": "افزودن مکان",
-  "profile.education.empty": "افزودن تحصیلات",
-  "profile.education.education": "تحصیلات",
-  "profile.education.levels.p": "درجه دکتری",
-  "profile.education.levels.m": "کارشناسی ارشد یا مدرک حرفه‌ای",
-  "profile.education.levels.b": "مدرک کارشناسی",
-  "profile.education.levels.a": "مدرک کاردانی",
-  "profile.education.levels.hs": "متوسطه/دبیرستان",
-  "profile.education.levels.jhs": "مدرسه متوسطه دوره اول/ راهنمایی",
-  "profile.education.levels.el": "مدرسه ابتدایی",
-  "profile.education.levels.none": "بدون تحصیلات رسمی",
-  "profile.education.levels.o": "تحصیلات متفرقه",
-  "profile.editbutton.edit": " ویرایش",
-  "profile.formcontrols.who.can.see": "کسانی که می‌توانند این را ببینند:",
-  "profile.formcontrols.button.cancel": "لغو‌",
-  "profile.formcontrols.button.save": "ذخیره",
-  "profile.formcontrols.button.saving": "در حال ذخیره",
-  "profile.formcontrols.button.saved": "ذخیره شد",
-  "profile.visibility.who.just.me": "فقط من",
-  "profile.visibility.who.everyone": "هرکسی در {siteName}",
-  "profile.learningGoal.learningGoal": "هدف یادگیری",
-  "profile.learningGoal.options.start_career": "من می خواهم کارم را شروع کنم",
-  "profile.learningGoal.options.advance_career": "من می خواهم حرفه ام را ارتقا دهم",
-  "profile.learningGoal.options.learn_something_new": "می‌خواهم چیز جدیدی یاد بگیرم",
-  "profile.learningGoal.options.something_else": "یک چیز دیگر",
-  "profile.name.full.name": "نام و نام خانوادگی",
-  "profile.name.details": "این همان نامی است که در حساب کاربری و گواهی‌های شما درج می‌شود.",
-  "profile.name.empty": "افزودن نام",
-  "profile.preferredlanguage.empty": "افزودن زبان",
-  "profile.preferredlanguage.label": "زبان اصلی صحبت شده",
-  "profile.profileavatar.upload-button": "بارگذاری عکس",
-  "profile.profileavatar.remove.button": "حذف",
-  "profile.image.alt.attribute": "چهرک پرونده کاربری",
-  "profile.profileavatar.change-button": "تغییر",
-  "profile.sociallinks.add": "افزودن  {network}",
-  "profile.sociallinks.social.links": "پیوندهای رسانه اجتماعی",
-  "profile.notfound.message": "صفحه مورد نظر شما در دسترس نیست یا خطایی در نشانی آن وجود دارد. لطفاً نشانی اینترنتی را بررسی کرده و دوباره امتحان کنید.",
-  "profile.viewMyRecords": "مشاهده سوابق من",
-  "profile.loading": "در حال بارگذاری پرونده کاربری...",
-  "profile.username.description": "اطلاعات پرونده کاربری فقط برای شما قابل مشاهده است. سایرین فقط نام کاربری شما را در  {siteName} می‌توانند ببینند."
-}
--- a/src/i18n/messages/fr.json
+++ b/src/i18n/messages/fr.json
@@ -1,6 +1,6 @@
 {
-  "profile.page.title": "Profile | {siteName}",
-  "profile.age.details": "Pour partager votre profil avec d'autres étudiants {siteName}, vous devez confirmer que vous avez plus de 13 ans.",
+  "profile.age.headline": "Votre profil ne peut pas être partagé.",
+  "profile.age.details": "Pour partager votre profil avec d'autres apprenants edX, vous devez confirmer que vous avez plus de 13 ans.",
  "profile.age.set.date": "Définissez votre date de naissance",
  "profile.datejoined.member.since": "Membre depuis {year}",
  "profile.bio.empty": "Ajouter une courte biographie",
@@ -33,12 +33,7 @@
  "profile.formcontrols.button.saving": "Enregistrement",
  "profile.formcontrols.button.saved": "Enregistré",
  "profile.visibility.who.just.me": "Juste moi",
-  "profile.visibility.who.everyone": "Tout le monde sur {siteName}",
-  "profile.learningGoal.learningGoal": "Learning Goal",
-  "profile.learningGoal.options.start_career": "I want to start my career",
-  "profile.learningGoal.options.advance_career": "I want to advance my career",
-  "profile.learningGoal.options.learn_something_new": "I want to learn something new",
-  "profile.learningGoal.options.something_else": "Something else",
+  "profile.visibility.who.everyone": "Tout le monde sur edX",
  "profile.name.full.name": "Nom complet",
  "profile.name.details": "C'est le nom qui apparaît dans votre compte et sur vos certificats.",
  "profile.name.empty": "Ajouter un nom",
@@ -52,6 +47,5 @@
  "profile.sociallinks.social.links": "Liens vers les réseaux sociaux",
  "profile.notfound.message": "La page que vous recherchez n'est pas disponible ou il y a une erreur dans l'URL. Veuillez vérifier l'URL et réessayer.",
  "profile.viewMyRecords": "Voir mes succès",
-  "profile.loading": "Chargement du profil....",
-  "profile.username.description": "Les informations de votre profil ne sont visibles que par vous. Seul votre nom d'utilisateur est visible par les autres sur {siteName}."
+  "profile.loading": "Chargement du profil...."
 }
--- a/src/i18n/messages/fr_CA.json
+++ b/src/i18n/messages/fr_CA.json
@@ -1,57 +0,0 @@
-{
-  "profile.page.title": "Profil | {siteName}",
-  "profile.age.details": "Pour partager votre profil avec d'autres apprenants {siteName}, vous devez confirmer que vous avez plus de 13 ans.",
-  "profile.age.set.date": "Entrez votre date de naissance",
-  "profile.datejoined.member.since": "Membre depuis {year}",
-  "profile.bio.empty": "Ajouter une courte biographie",
-  "profile.bio.about.me": "À propos de moi",
-  "profile.certificate.organization.label": "De",
-  "profile.certificate.completion.date.label": "Terminé le {date}",
-  "profile.no.certificates": "Vous n'avez pas encore d'attestation.",
-  "profile.certificates.my.certificates": "Mes Attestations",
-  "profile.certificates.view.certificate": "Voir votre attestation",
-  "profile.certificates.types.verified": "Attestation vérifiée",
-  "profile.certificates.types.professional": "Attestation professionnelle",
-  "profile.certificates.types.unknown": "Attestation",
-  "profile.country.label": "Adresse",
-  "profile.country.empty": "Ajouter un emplacement",
-  "profile.education.empty": "Ajouter formation",
-  "profile.education.education": "Formation",
-  "profile.education.levels.p": "Doctorat",
-  "profile.education.levels.m": "Maîtrise ou diplôme professionnel",
-  "profile.education.levels.b": "Diplôme de baccalauréat",
-  "profile.education.levels.a": "Diplôme d'associé",
-  "profile.education.levels.hs": "Lycée / enseignement secondaire",
-  "profile.education.levels.jhs": "Collège / enseignement secondaire inférieur",
-  "profile.education.levels.el": "Enseignement primaire",
-  "profile.education.levels.none": "Sans formation formelle",
-  "profile.education.levels.o": "Autre niveau de formation",
-  "profile.editbutton.edit": "Éditer",
-  "profile.formcontrols.who.can.see": "Qui peut voir ça :",
-  "profile.formcontrols.button.cancel": "Annuler",
-  "profile.formcontrols.button.save": "Sauvegarder",
-  "profile.formcontrols.button.saving": "Sauvegarde en cours",
-  "profile.formcontrols.button.saved": "Sauvegardé",
-  "profile.visibility.who.just.me": "Juste moi",
-  "profile.visibility.who.everyone": "Tout le monde sur {siteName}",
-  "profile.learningGoal.learningGoal": "Objectif d'apprentissage",
-  "profile.learningGoal.options.start_career": "Je veux commencer ma carrière",
-  "profile.learningGoal.options.advance_career": "Je veux faire progresser ma carrière",
-  "profile.learningGoal.options.learn_something_new": "Je veux apprendre quelque chose de nouveau",
-  "profile.learningGoal.options.something_else": "Autre chose",
-  "profile.name.full.name": "Nom complet",
-  "profile.name.details": "C'est le nom qui apparaît dans votre compte et sur vos attestations.",
-  "profile.name.empty": "Ajouter un nom",
-  "profile.preferredlanguage.empty": "Ajouter une langue",
-  "profile.preferredlanguage.label": "Langue principale parlée",
-  "profile.profileavatar.upload-button": "Téléverser une photo",
-  "profile.profileavatar.remove.button": "Retirer",
-  "profile.image.alt.attribute": "avatar de profil",
-  "profile.profileavatar.change-button": "Modifier",
-  "profile.sociallinks.add": "Ajouter {network}",
-  "profile.sociallinks.social.links": "Liens vers les réseaux sociaux",
-  "profile.notfound.message": "La page que vous recherchez n'est pas disponible ou il y a une erreur dans l'URL. Veuillez vérifier l'URL et réessayer.",
-  "profile.viewMyRecords": "Afficher mes dossiers",
-  "profile.loading": "Chargement du profil...",
-  "profile.username.description": "Les informations de votre profil ne sont visibles que par vous. Seul votre nom d'utilisateur est visible par les autres sur {siteName}."
-}
--- a/src/i18n/messages/he.json
+++ b/src/i18n/messages/he.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/hi.json
+++ b/src/i18n/messages/hi.json
@@ -1,57 +0,0 @@
-{
-  "profile.page.title": "Profile | {siteName}",
-  "profile.age.details": "To share your profile with other {siteName} learners, you must confirm that you are over the age of 13.",
-  "profile.age.set.date": "Set your date of birth",
-  "profile.datejoined.member.since": "Member since {year}",
-  "profile.bio.empty": "Add a short bio",
-  "profile.bio.about.me": "About Me",
-  "profile.certificate.organization.label": "From",
-  "profile.certificate.completion.date.label": "Completed on {date}",
-  "profile.no.certificates": "You don't have any certificates yet.",
-  "profile.certificates.my.certificates": "My Certificates",
-  "profile.certificates.view.certificate": "View Certificate",
-  "profile.certificates.types.verified": "Verified Certificate",
-  "profile.certificates.types.professional": "Professional Certificate",
-  "profile.certificates.types.unknown": "Certificate",
-  "profile.country.label": "Location",
-  "profile.country.empty": "Add location",
-  "profile.education.empty": "Add education",
-  "profile.education.education": "Education",
-  "profile.education.levels.p": "Doctorate",
-  "profile.education.levels.m": "Master's or professional degree",
-  "profile.education.levels.b": "Bachelor's Degree",
-  "profile.education.levels.a": "Associate's degree",
-  "profile.education.levels.hs": "Secondary/high school",
-  "profile.education.levels.jhs": "Junior secondary/junior high/middle school",
-  "profile.education.levels.el": "Elementary/primary school",
-  "profile.education.levels.none": "No formal education",
-  "profile.education.levels.o": "Other education",
-  "profile.editbutton.edit": "Edit",
-  "profile.formcontrols.who.can.see": "Who can see this:",
-  "profile.formcontrols.button.cancel": "Cancel",
-  "profile.formcontrols.button.save": "Save",
-  "profile.formcontrols.button.saving": "Saving",
-  "profile.formcontrols.button.saved": "Saved",
-  "profile.visibility.who.just.me": "Just me",
-  "profile.visibility.who.everyone": "Everyone on {siteName}",
-  "profile.learningGoal.learningGoal": "Learning Goal",
-  "profile.learningGoal.options.start_career": "I want to start my career",
-  "profile.learningGoal.options.advance_career": "I want to advance my career",
-  "profile.learningGoal.options.learn_something_new": "I want to learn something new",
-  "profile.learningGoal.options.something_else": "Something else",
-  "profile.name.full.name": "Full Name",
-  "profile.name.details": "This is the name that appears in your account and on your certificates.",
-  "profile.name.empty": "Add name",
-  "profile.preferredlanguage.empty": "Add language",
-  "profile.preferredlanguage.label": "Primary Language Spoken",
-  "profile.profileavatar.upload-button": "Upload Photo",
-  "profile.profileavatar.remove.button": "Remove",
-  "profile.image.alt.attribute": "profile avatar",
-  "profile.profileavatar.change-button": "Change",
-  "profile.sociallinks.add": "Add {network}",
-  "profile.sociallinks.social.links": "Social Links",
-  "profile.notfound.message": "The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again.",
-  "profile.viewMyRecords": "View My Records",
-  "profile.loading": "Profile loading...",
-  "profile.username.description": "Your profile information is only visible to you. Only your username is visible to others on {siteName}."
-}
--- a/src/i18n/messages/id.json
+++ b/src/i18n/messages/id.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/it.json
+++ b/src/i18n/messages/it.json
@@ -1,57 +0,0 @@
-{
-  "profile.page.title": "Profile | {siteName}",
-  "profile.age.details": "To share your profile with other {siteName} learners, you must confirm that you are over the age of 13.",
-  "profile.age.set.date": "Set your date of birth",
-  "profile.datejoined.member.since": "Member since {year}",
-  "profile.bio.empty": "Add a short bio",
-  "profile.bio.about.me": "About Me",
-  "profile.certificate.organization.label": "From",
-  "profile.certificate.completion.date.label": "Completed on {date}",
-  "profile.no.certificates": "You don't have any certificates yet.",
-  "profile.certificates.my.certificates": "My Certificates",
-  "profile.certificates.view.certificate": "View Certificate",
-  "profile.certificates.types.verified": "Verified Certificate",
-  "profile.certificates.types.professional": "Professional Certificate",
-  "profile.certificates.types.unknown": "Certificate",
-  "profile.country.label": "Location",
-  "profile.country.empty": "Add location",
-  "profile.education.empty": "Add education",
-  "profile.education.education": "Education",
-  "profile.education.levels.p": "Doctorate",
-  "profile.education.levels.m": "Master's or professional degree",
-  "profile.education.levels.b": "Bachelor's Degree",
-  "profile.education.levels.a": "Associate's degree",
-  "profile.education.levels.hs": "Secondary/high school",
-  "profile.education.levels.jhs": "Junior secondary/junior high/middle school",
-  "profile.education.levels.el": "Elementary/primary school",
-  "profile.education.levels.none": "No formal education",
-  "profile.education.levels.o": "Other education",
-  "profile.editbutton.edit": "Edit",
-  "profile.formcontrols.who.can.see": "Who can see this:",
-  "profile.formcontrols.button.cancel": "Cancel",
-  "profile.formcontrols.button.save": "Save",
-  "profile.formcontrols.button.saving": "Saving",
-  "profile.formcontrols.button.saved": "Saved",
-  "profile.visibility.who.just.me": "Just me",
-  "profile.visibility.who.everyone": "Everyone on {siteName}",
-  "profile.learningGoal.learningGoal": "Learning Goal",
-  "profile.learningGoal.options.start_career": "I want to start my career",
-  "profile.learningGoal.options.advance_career": "I want to advance my career",
-  "profile.learningGoal.options.learn_something_new": "I want to learn something new",
-  "profile.learningGoal.options.something_else": "Something else",
-  "profile.name.full.name": "Full Name",
-  "profile.name.details": "This is the name that appears in your account and on your certificates.",
-  "profile.name.empty": "Add name",
-  "profile.preferredlanguage.empty": "Add language",
-  "profile.preferredlanguage.label": "Primary Language Spoken",
-  "profile.profileavatar.upload-button": "Upload Photo",
-  "profile.profileavatar.remove.button": "Remove",
-  "profile.image.alt.attribute": "profile avatar",
-  "profile.profileavatar.change-button": "Change",
-  "profile.sociallinks.add": "Add {network}",
-  "profile.sociallinks.social.links": "Social Links",
-  "profile.notfound.message": "The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again.",
-  "profile.viewMyRecords": "View My Records",
-  "profile.loading": "Profile loading...",
-  "profile.username.description": "Your profile information is only visible to you. Only your username is visible to others on {siteName}."
-}
--- a/src/i18n/messages/it_IT.json
+++ b/src/i18n/messages/it_IT.json
@@ -1,57 +0,0 @@
-{
-  "profile.page.title": "Profilo | {siteName}",
-  "profile.age.details": "Per condividere il tuo profilo con altri studenti di {siteName}, devi confermare di avere più di 13 anni.",
-  "profile.age.set.date": "Imposta la data di nascita ",
-  "profile.datejoined.member.since": "Membro da {year}",
-  "profile.bio.empty": "Aggiungi una breve biografia ",
-  "profile.bio.about.me": "Su di me",
-  "profile.certificate.organization.label": "Da ",
-  "profile.certificate.completion.date.label": "Completato il {date}",
-  "profile.no.certificates": "Non si dispone ancora di alcun certificato. ",
-  "profile.certificates.my.certificates": "Certificati personali ",
-  "profile.certificates.view.certificate": "Visualizza il certificato",
-  "profile.certificates.types.verified": "Certificato Verificato",
-  "profile.certificates.types.professional": "Certificato professionale ",
-  "profile.certificates.types.unknown": "Certificato ",
-  "profile.country.label": "Posizione",
-  "profile.country.empty": "Aggiungi posizione ",
-  "profile.education.empty": "Aggiungi titolo di studio ",
-  "profile.education.education": "Educazione",
-  "profile.education.levels.p": "Dottorato",
-  "profile.education.levels.m": "Laurea magistrale o titolo accademico professionale",
-  "profile.education.levels.b": "Laurea di primo livello ",
-  "profile.education.levels.a": "Diploma Professionale",
-  "profile.education.levels.hs": "Scuole superiori/liceo",
-  "profile.education.levels.jhs": "Scuole Medie",
-  "profile.education.levels.el": "Scuola Primaria/Elementare",
-  "profile.education.levels.none": "Nessun livello educativo formale",
-  "profile.education.levels.o": "Altro livello educativo",
-  "profile.editbutton.edit": "Modifica",
-  "profile.formcontrols.who.can.see": "Chi può visualizzare: ",
-  "profile.formcontrols.button.cancel": "Annulla",
-  "profile.formcontrols.button.save": "Salva",
-  "profile.formcontrols.button.saving": "Salvataggio in corso",
-  "profile.formcontrols.button.saved": "Salvato",
-  "profile.visibility.who.just.me": "Solo io ",
-  "profile.visibility.who.everyone": "Tutti su {siteName}",
-  "profile.learningGoal.learningGoal": "Obiettivo di apprendimento",
-  "profile.learningGoal.options.start_career": "Voglio iniziare il mio percorso",
-  "profile.learningGoal.options.advance_career": "Voglio avanzare nel mio percorso",
-  "profile.learningGoal.options.learn_something_new": "Voglio imparare qualcosa di nuovo",
-  "profile.learningGoal.options.something_else": "Qualcos'altro",
-  "profile.name.full.name": "Nome e Cognome",
-  "profile.name.details": "Questo è il nome visualizzato nel proprio account e nei propri certificati. ",
-  "profile.name.empty": "Aggiungi nome ",
-  "profile.preferredlanguage.empty": "Aggiungi lingua",
-  "profile.preferredlanguage.label": "Lingua principale ",
-  "profile.profileavatar.upload-button": "Carica foto",
-  "profile.profileavatar.remove.button": "Rimuovi",
-  "profile.image.alt.attribute": "avatar del profilo ",
-  "profile.profileavatar.change-button": "Cambia",
-  "profile.sociallinks.add": "Aggiungi {network}",
-  "profile.sociallinks.social.links": "Link social ",
-  "profile.notfound.message": "La pagina ricercata non è disponibile oppure è presente un errore nell'URL. Controllare l'URL e riprovare. ",
-  "profile.viewMyRecords": "Visualizza record personali ",
-  "profile.loading": "Caricamento del profilo... ",
-  "profile.username.description": "Le informazioni del tuo profilo sono visibili solo a te. Solo il tuo nome utente è visibile agli altri su {siteName}."
-}
--- a/src/i18n/messages/ko_kr.json
+++ b/src/i18n/messages/ko_kr.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/pl.json
+++ b/src/i18n/messages/pl.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/pt.json
+++ b/src/i18n/messages/pt.json
@@ -1,57 +0,0 @@
-{
-  "profile.page.title": "Profile | {siteName}",
-  "profile.age.details": "To share your profile with other {siteName} learners, you must confirm that you are over the age of 13.",
-  "profile.age.set.date": "Set your date of birth",
-  "profile.datejoined.member.since": "Member since {year}",
-  "profile.bio.empty": "Add a short bio",
-  "profile.bio.about.me": "About Me",
-  "profile.certificate.organization.label": "From",
-  "profile.certificate.completion.date.label": "Completed on {date}",
-  "profile.no.certificates": "You don't have any certificates yet.",
-  "profile.certificates.my.certificates": "My Certificates",
-  "profile.certificates.view.certificate": "View Certificate",
-  "profile.certificates.types.verified": "Verified Certificate",
-  "profile.certificates.types.professional": "Professional Certificate",
-  "profile.certificates.types.unknown": "Certificate",
-  "profile.country.label": "Location",
-  "profile.country.empty": "Add location",
-  "profile.education.empty": "Add education",
-  "profile.education.education": "Education",
-  "profile.education.levels.p": "Doctorate",
-  "profile.education.levels.m": "Master's or professional degree",
-  "profile.education.levels.b": "Bachelor's Degree",
-  "profile.education.levels.a": "Associate's degree",
-  "profile.education.levels.hs": "Secondary/high school",
-  "profile.education.levels.jhs": "Junior secondary/junior high/middle school",
-  "profile.education.levels.el": "Elementary/primary school",
-  "profile.education.levels.none": "No formal education",
-  "profile.education.levels.o": "Other education",
-  "profile.editbutton.edit": "Edit",
-  "profile.formcontrols.who.can.see": "Who can see this:",
-  "profile.formcontrols.button.cancel": "Cancel",
-  "profile.formcontrols.button.save": "Save",
-  "profile.formcontrols.button.saving": "Saving",
-  "profile.formcontrols.button.saved": "Saved",
-  "profile.visibility.who.just.me": "Just me",
-  "profile.visibility.who.everyone": "Everyone on {siteName}",
-  "profile.learningGoal.learningGoal": "Learning Goal",
-  "profile.learningGoal.options.start_career": "I want to start my career",
-  "profile.learningGoal.options.advance_career": "I want to advance my career",
-  "profile.learningGoal.options.learn_something_new": "I want to learn something new",
-  "profile.learningGoal.options.something_else": "Something else",
-  "profile.name.full.name": "Full Name",
-  "profile.name.details": "This is the name that appears in your account and on your certificates.",
-  "profile.name.empty": "Add name",
-  "profile.preferredlanguage.empty": "Add language",
-  "profile.preferredlanguage.label": "Primary Language Spoken",
-  "profile.profileavatar.upload-button": "Upload Photo",
-  "profile.profileavatar.remove.button": "Remove",
-  "profile.image.alt.attribute": "profile avatar",
-  "profile.profileavatar.change-button": "Change",
-  "profile.sociallinks.add": "Add {network}",
-  "profile.sociallinks.social.links": "Social Links",
-  "profile.notfound.message": "The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again.",
-  "profile.viewMyRecords": "View My Records",
-  "profile.loading": "Profile loading...",
-  "profile.username.description": "Your profile information is only visible to you. Only your username is visible to others on {siteName}."
-}
--- a/src/i18n/messages/pt_PT.json
+++ b/src/i18n/messages/pt_PT.json
@@ -1,57 +0,0 @@
-{
-  "profile.page.title": "Perfil | {siteName}",
-  "profile.age.details": "Para partilhar o seu perfil com outros estudantes da plataforma {siteName}, tem de confirmar que tem mais de 13 anos de idade.",
-  "profile.age.set.date": "Indique a sua data de nascimento",
-  "profile.datejoined.member.since": "Utilizador desde {year}",
-  "profile.bio.empty": "Adicionar uma breve biografia",
-  "profile.bio.about.me": "Sobre Mim",
-  "profile.certificate.organization.label": "De",
-  "profile.certificate.completion.date.label": "Concluído a {date}",
-  "profile.no.certificates": "Ainda não tem certificados.",
-  "profile.certificates.my.certificates": "Os Meus Certificados",
-  "profile.certificates.view.certificate": "Ver Certificado",
-  "profile.certificates.types.verified": "Certificado Validado",
-  "profile.certificates.types.professional": "Certificado Profissional",
-  "profile.certificates.types.unknown": "Certificado",
-  "profile.country.label": "Localização",
-  "profile.country.empty": "Adicionar localização",
-  "profile.education.empty": "Adicionar  grau de escolaridade",
-  "profile.education.education": "Educação",
-  "profile.education.levels.p": "Doutoramento",
-  "profile.education.levels.m": "Mestrado ou Grau Profissional",
-  "profile.education.levels.b": "Licenciatura",
-  "profile.education.levels.a": "Pós-graduação",
-  "profile.education.levels.hs": "Secundário",
-  "profile.education.levels.jhs": "2ªciclo/3ºciclo",
-  "profile.education.levels.el": "Primária",
-  "profile.education.levels.none": "Sem estudos",
-  "profile.education.levels.o": "Outra formação",
-  "profile.editbutton.edit": "Editar",
-  "profile.formcontrols.who.can.see": "Quem pode ver isto:",
-  "profile.formcontrols.button.cancel": "Cancelar",
-  "profile.formcontrols.button.save": "Guardar",
-  "profile.formcontrols.button.saving": "A Guardar",
-  "profile.formcontrols.button.saved": "Guardado",
-  "profile.visibility.who.just.me": "Apenas eu",
-  "profile.visibility.who.everyone": "Toda a gente em {siteName}",
-  "profile.learningGoal.learningGoal": "Objectivo de aprendizagem",
-  "profile.learningGoal.options.start_career": "Quero começar a minha carreira",
-  "profile.learningGoal.options.advance_career": "Quero progredir na minha carreira",
-  "profile.learningGoal.options.learn_something_new": "Quero aprender algo novo",
-  "profile.learningGoal.options.something_else": "Outra coisa",
-  "profile.name.full.name": "Nome Completo",
-  "profile.name.details": "Este é o nome que aparece na sua conta e nos seus certificados.",
-  "profile.name.empty": "Adicionar nome",
-  "profile.preferredlanguage.empty": "Adicionar idioma",
-  "profile.preferredlanguage.label": "Língua Materna",
-  "profile.profileavatar.upload-button": "Carregar Fotografia",
-  "profile.profileavatar.remove.button": "Eliminar",
-  "profile.image.alt.attribute": "Icon de perfil",
-  "profile.profileavatar.change-button": "Alterar",
-  "profile.sociallinks.add": "Adicionar {network}",
-  "profile.sociallinks.social.links": "Links de Redes Sociais",
-  "profile.notfound.message": "A página que procura não está disponível ou há um erro no URL. Por favor, verifique o URL e tente novamente.",
-  "profile.viewMyRecords": "Ver os Meus Registos",
-  "profile.loading": "A carregar perfil...",
-  "profile.username.description": "As informações do seu perfil só são visíveis para si. Apenas o seu nome de utilizador é visível para outros em {siteName}."
-}
--- a/src/i18n/messages/pt_br.json
+++ b/src/i18n/messages/pt_br.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/ru.json
+++ b/src/i18n/messages/ru.json
@@ -1,57 +1 @@
-{
-  "profile.page.title": "Profile | {siteName}",
-  "profile.age.details": "To share your profile with other {siteName} learners, you must confirm that you are over the age of 13.",
-  "profile.age.set.date": "Set your date of birth",
-  "profile.datejoined.member.since": "Member since {year}",
-  "profile.bio.empty": "Add a short bio",
-  "profile.bio.about.me": "About Me",
-  "profile.certificate.organization.label": "From",
-  "profile.certificate.completion.date.label": "Completed on {date}",
-  "profile.no.certificates": "You don't have any certificates yet.",
-  "profile.certificates.my.certificates": "My Certificates",
-  "profile.certificates.view.certificate": "View Certificate",
-  "profile.certificates.types.verified": "Verified Certificate",
-  "profile.certificates.types.professional": "Professional Certificate",
-  "profile.certificates.types.unknown": "Certificate",
-  "profile.country.label": "Location",
-  "profile.country.empty": "Add location",
-  "profile.education.empty": "Add education",
-  "profile.education.education": "Education",
-  "profile.education.levels.p": "Doctorate",
-  "profile.education.levels.m": "Master's or professional degree",
-  "profile.education.levels.b": "Bachelor's Degree",
-  "profile.education.levels.a": "Associate's degree",
-  "profile.education.levels.hs": "Secondary/high school",
-  "profile.education.levels.jhs": "Junior secondary/junior high/middle school",
-  "profile.education.levels.el": "Elementary/primary school",
-  "profile.education.levels.none": "No formal education",
-  "profile.education.levels.o": "Other education",
-  "profile.editbutton.edit": "Edit",
-  "profile.formcontrols.who.can.see": "Who can see this:",
-  "profile.formcontrols.button.cancel": "Cancel",
-  "profile.formcontrols.button.save": "Save",
-  "profile.formcontrols.button.saving": "Saving",
-  "profile.formcontrols.button.saved": "Saved",
-  "profile.visibility.who.just.me": "Just me",
-  "profile.visibility.who.everyone": "Everyone on {siteName}",
-  "profile.learningGoal.learningGoal": "Learning Goal",
-  "profile.learningGoal.options.start_career": "I want to start my career",
-  "profile.learningGoal.options.advance_career": "I want to advance my career",
-  "profile.learningGoal.options.learn_something_new": "I want to learn something new",
-  "profile.learningGoal.options.something_else": "Something else",
-  "profile.name.full.name": "Full Name",
-  "profile.name.details": "This is the name that appears in your account and on your certificates.",
-  "profile.name.empty": "Add name",
-  "profile.preferredlanguage.empty": "Add language",
-  "profile.preferredlanguage.label": "Primary Language Spoken",
-  "profile.profileavatar.upload-button": "Upload Photo",
-  "profile.profileavatar.remove.button": "Remove",
-  "profile.image.alt.attribute": "profile avatar",
-  "profile.profileavatar.change-button": "Change",
-  "profile.sociallinks.add": "Add {network}",
-  "profile.sociallinks.social.links": "Social Links",
-  "profile.notfound.message": "The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again.",
-  "profile.viewMyRecords": "View My Records",
-  "profile.loading": "Profile loading...",
-  "profile.username.description": "Your profile information is only visible to you. Only your username is visible to others on {siteName}."
-}
+{}
--- a/src/i18n/messages/th.json
+++ b/src/i18n/messages/th.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/uk.json
+++ b/src/i18n/messages/uk.json
@@ -1,57 +1 @@
-{
-  "profile.page.title": "Profile | {siteName}",
-  "profile.age.details": "To share your profile with other {siteName} learners, you must confirm that you are over the age of 13.",
-  "profile.age.set.date": "Set your date of birth",
-  "profile.datejoined.member.since": "Member since {year}",
-  "profile.bio.empty": "Add a short bio",
-  "profile.bio.about.me": "About Me",
-  "profile.certificate.organization.label": "From",
-  "profile.certificate.completion.date.label": "Completed on {date}",
-  "profile.no.certificates": "You don't have any certificates yet.",
-  "profile.certificates.my.certificates": "Мої сертифікати",
-  "profile.certificates.view.certificate": "View Certificate",
-  "profile.certificates.types.verified": "Verified Certificate",
-  "profile.certificates.types.professional": "Professional Certificate",
-  "profile.certificates.types.unknown": "Certificate",
-  "profile.country.label": "Location",
-  "profile.country.empty": "Add location",
-  "profile.education.empty": "Add education",
-  "profile.education.education": "Education",
-  "profile.education.levels.p": "Doctorate",
-  "profile.education.levels.m": "Master's or professional degree",
-  "profile.education.levels.b": "Bachelor's Degree",
-  "profile.education.levels.a": "Associate's degree",
-  "profile.education.levels.hs": "Secondary/high school",
-  "profile.education.levels.jhs": "Junior secondary/junior high/middle school",
-  "profile.education.levels.el": "Elementary/primary school",
-  "profile.education.levels.none": "No formal education",
-  "profile.education.levels.o": "Other education",
-  "profile.editbutton.edit": "Edit",
-  "profile.formcontrols.who.can.see": "Who can see this:",
-  "profile.formcontrols.button.cancel": "Cancel",
-  "profile.formcontrols.button.save": "Save",
-  "profile.formcontrols.button.saving": "Saving",
-  "profile.formcontrols.button.saved": "Saved",
-  "profile.visibility.who.just.me": "Just me",
-  "profile.visibility.who.everyone": "Everyone on {siteName}",
-  "profile.learningGoal.learningGoal": "Learning Goal",
-  "profile.learningGoal.options.start_career": "I want to start my career",
-  "profile.learningGoal.options.advance_career": "I want to advance my career",
-  "profile.learningGoal.options.learn_something_new": "I want to learn something new",
-  "profile.learningGoal.options.something_else": "Something else",
-  "profile.name.full.name": "Full Name",
-  "profile.name.details": "This is the name that appears in your account and on your certificates.",
-  "profile.name.empty": "Add name",
-  "profile.preferredlanguage.empty": "Add language",
-  "profile.preferredlanguage.label": "Primary Language Spoken",
-  "profile.profileavatar.upload-button": "Upload Photo",
-  "profile.profileavatar.remove.button": "Remove",
-  "profile.image.alt.attribute": "profile avatar",
-  "profile.profileavatar.change-button": "Change",
-  "profile.sociallinks.add": "Add {network}",
-  "profile.sociallinks.social.links": "Social Links",
-  "profile.notfound.message": "The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again.",
-  "profile.viewMyRecords": "View My Records",
-  "profile.loading": "Profile loading...",
-  "profile.username.description": "Your profile information is only visible to you. Only your username is visible to others on {siteName}."
-}
+{}
--- a/src/i18n/messages/zh_CN.json
+++ b/src/i18n/messages/zh_CN.json
@@ -1,6 +1,6 @@
 {
-  "profile.page.title": "Profile | {siteName}",
-  "profile.age.details": "To share your profile with other {siteName} learners, you must confirm that you are over the age of 13.",
+  "profile.age.headline": "Your profile cannot be shared.",
+  "profile.age.details": "To share your profile with other edX learners, you must confirm that you are over the age of 13.",
  "profile.age.set.date": "Set your date of birth",
  "profile.datejoined.member.since": "Member since {year}",
  "profile.bio.empty": "Add a short bio",
@@ -33,12 +33,7 @@
  "profile.formcontrols.button.saving": "Saving",
  "profile.formcontrols.button.saved": "Saved",
  "profile.visibility.who.just.me": "Just me",
-  "profile.visibility.who.everyone": "Everyone on {siteName}",
-  "profile.learningGoal.learningGoal": "Learning Goal",
-  "profile.learningGoal.options.start_career": "I want to start my career",
-  "profile.learningGoal.options.advance_career": "I want to advance my career",
-  "profile.learningGoal.options.learn_something_new": "I want to learn something new",
-  "profile.learningGoal.options.something_else": "Something else",
+  "profile.visibility.who.everyone": "Everyone on edX",
  "profile.name.full.name": "Full Name",
  "profile.name.details": "This is the name that appears in your account and on your certificates.",
  "profile.name.empty": "Add name",
@@ -52,6 +47,5 @@
  "profile.sociallinks.social.links": "Social Links",
  "profile.notfound.message": "The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again.",
  "profile.viewMyRecords": "View My Records",
-  "profile.loading": "Profile loading...",
-  "profile.username.description": "Your profile information is only visible to you. Only your username is visible to others on {siteName}."
+  "profile.loading": "Profile loading..."
 }
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -15,25 +15,27 @@ import {

 import React from 'react';
 import ReactDOM from 'react-dom';
+import { Route, Switch } from 'react-router-dom';

-import Header from '@edx/frontend-component-header';
-import Footer from '@edx/frontend-component-footer';
+import Header, { messages as headerMessages } from '@edx/frontend-component-header';
+import Footer, { messages as footerMessages } from '@edx/frontend-component-footer';

-import messages from './i18n';
+import appMessages from './i18n';
+import { ProfilePage, NotFoundPage } from './profile';
 import configureStore from './data/configureStore';

 import './index.scss';
-import Head from './head/Head';
-
-import AppRoutes from './routes/AppRoutes';

 subscribe(APP_READY, () => {
  ReactDOM.render(
    <AppProvider store={configureStore()}>
-      <Head />
      <Header />
-      <main id="main">
-        <AppRoutes />
+      <main>
+        <Switch>
+          <Route path="/u/:username" component={ProfilePage} />
+          <Route path="/notfound" component={NotFoundPage} />
+          <Route path="*" component={NotFoundPage} />
+        </Switch>
      </main>
      <Footer />
    </AppProvider>,
@@ -46,14 +48,18 @@ subscribe(APP_INIT_ERROR, (error) => {
 });

 initialize({
-  messages,
+  messages: [
+    appMessages,
+    headerMessages,
+    footerMessages,
+  ],
+  requireAuthenticatedUser: true,
  hydrateAuthenticatedUser: true,
-  isPactStubEnabled: process.env.ENABLE_PACT_STUBS,
  handlers: {
    config: () => {
      mergeConfig({
-        COLLECT_YEAR_OF_BIRTH: process.env.COLLECT_YEAR_OF_BIRTH,
-        ENABLE_SKILLS_BUILDER_PROFILE: process.env.ENABLE_SKILLS_BUILDER_PROFILE,
+        ENABLE_LEARNER_RECORD_MFE: (process.env.ENABLE_LEARNER_RECORD_MFE || false),
+        LEARNER_RECORD_MFE_BASE_URL: process.env.LEARNER_RECORD_MFE_BASE_URL,
      }, 'App loadConfig override handler');
    },
  },
--- a/src/pacts/frontend-app-profile-edx-platform.json
+++ b/src/pacts/frontend-app-profile-edx-platform.json
@@ -1,279 +0,0 @@
-{
-  "consumer": {
-    "name": "frontend-app-profile"
-  },
-  "interactions": [
-    {
-      "description": "A request for user's basic information",
-      "providerStates": [
-        {
-          "name": "Account and user's information does not exist"
-        }
-      ],
-      "request": {
-        "method": "GET",
-        "path": "/api/user/v1/accounts/staff_not_found"
-      },
-      "response": {
-        "status": 404
-      }
-    },
-    {
-      "description": "A request for user's basic information",
-      "providerStates": [
-        {
-          "name": "I have a user's basic information"
-        }
-      ],
-      "request": {
-        "method": "GET",
-        "path": "/api/user/v1/accounts/staff"
-      },
-      "response": {
-        "body": {
-          "bio": "This is my bio",
-          "country": "ME",
-          "dateJoined": "2017-06-07T00:44:23Z",
-          "email": "staff@example.com",
-          "isActive": true,
-          "name": "Lemon Seltzer",
-          "username": "staff",
-          "yearOfBirth": 1901
-        },
-        "headers": {
-          "Content-Type": "application/json"
-        },
-        "matchingRules": {
-          "body": {
-            "$": {
-              "combine": "AND",
-              "matchers": [
-                {
-                  "match": "type"
-                }
-              ]
-            }
-          }
-        },
-        "status": 200
-      }
-    },
-    {
-      "description": "A request for user's basic information",
-      "providerStates": [
-        {
-          "name": "I have a user's basic information"
-        }
-      ],
-      "request": {
-        "method": "GET",
-        "path": "/api/user/v1/accounts/edx"
-      },
-      "response": {
-        "body": {
-          "bio": "This is my bio",
-          "country": "ME",
-          "dateJoined": "2017-06-07T00:44:23Z",
-          "email": "edx@example.com",
-          "isActive": true,
-          "name": "Lemon Seltzer",
-          "username": "edx",
-          "yearOfBirth": 1901,
-          "language_proficiencies": [{"code": "en"}]
-        },
-        "headers": {
-          "Content-Type": "application/json"
-        },
-        "matchingRules": {
-          "body": {
-            "$": {
-              "combine": "AND",
-              "matchers": [
-                {
-                  "match": "type"
-                }
-              ]
-            }
-          }
-        },
-        "status": 200
-      }
-    },
-    {
-      "description": "A request for user's basic information",
-      "providerStates": [
-        {
-          "name": "I have a user's basic information"
-        }
-      ],
-      "request": {
-        "method": "POST",
-        "path": "/login_refresh"
-      },
-      "response": {
-        "body": {
-          "login": "This is my login_refresh"
-        },
-        "headers": {
-          "Content-Type": "application/json"
-        },
-        "matchingRules": {
-          "body": {
-            "$": {
-              "combine": "AND",
-              "matchers": [
-                {
-                  "match": "type"
-                }
-              ]
-            }
-          }
-        },
-        "status": 200
-      }
-    },
-    {
-      "description": "A request for user's basic information",
-      "providerStates": [
-        {
-          "name": "I have a user's basic information"
-        }
-      ],
-      "request": {
-        "method": "GET",
-        "path": "/csrf/api/v1/token"
-      },
-      "response": {
-        "body": {
-          "csrfToken": "UYVGuFndy1sJPtAFtXPNQTnkZxZPKSYbvd3KKoKTyk6Vq9k01lg4vSsgjidWbnpt"
-        },
-        "headers": {
-          "Content-Type": "application/json"
-        },
-        "matchingRules": {
-          "body": {
-            "$": {
-              "combine": "AND",
-              "matchers": [
-                {
-                  "match": "type"
-                }
-              ]
-            }
-          }
-        },
-        "status": 200
-      }
-    },
-    {
-      "description": "A request for user's basic information",
-      "providerStates": [
-        {
-          "name": "I have a user's basic information"
-        }
-      ],
-      "request": {
-        "method": "GET",
-        "path": "/api/user/v1/preferences/edx"
-      },
-      "response": {
-        "body": {
-          "pref-lang": "en"
-        },
-        "headers": {
-          "Content-Type": "application/json"
-        },
-        "matchingRules": {
-          "body": {
-            "$": {
-              "combine": "AND",
-              "matchers": [
-                {
-                  "match": "type"
-                }
-              ]
-            }
-          }
-        },
-        "status": 200
-      }
-    },
-    {
-      "description": "A request for user's basic information",
-      "providerStates": [
-        {
-          "name": "I have a user's basic information"
-        }
-      ],
-      "request": {
-        "method": "GET",
-        "path": "/api/certificates/v0/certificates/edx/"
-      },
-      "response": {
-        "body": [],
-        "headers": {
-          "Content-Type": "application/json"
-        },
-        "matchingRules": {
-          "body": {
-            "$": {
-              "combine": "AND",
-              "matchers": [
-                {
-                  "match": "type"
-                }
-              ]
-            }
-          }
-        },
-        "status": 200
-      }
-    },
-    {
-      "description": "A request for user's basic information",
-      "providerStates": [
-        {
-          "name": "I have a user's basic information"
-        }
-      ],
-      "request": {
-        "method": "POST",
-        "path": "/event"
-      },
-      "response": {
-        "body": [],
-        "headers": {
-          "Content-Type": "application/json"
-        },
-        "matchingRules": {
-          "body": {
-            "$": {
-              "combine": "AND",
-              "matchers": [
-                {
-                  "match": "type"
-                }
-              ]
-            }
-          }
-        },
-        "status": 200
-      }
-    }
-  ],
-  "metadata": {
-    "pact-js": {
-      "version": "11.0.2"
-    },
-    "pactRust": {
-      "ffi": "0.4.0",
-      "models": "1.0.4"
-    },
-    "pactSpecification": {
-      "version": "3.0.0"
-    }
-  },
-  "provider": {
-    "name": "edx-platform"
-  }
-}
--- a/src/profile/AgeMessage.jsx
+++ b/src/profile/AgeMessage.jsx
@@ -1,36 +1,40 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Alert } from '@edx/paragon';
+import { StatusAlert } from '@edx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { getConfig } from '@edx/frontend-platform';

-const AgeMessage = ({ accountSettingsUrl }) => (
-  <Alert
-    variant="info"
-    dismissible={false}
-    show
-  >
-    <Alert.Heading id="profile.age.headline">
-      Your profile cannot be shared.
-    </Alert.Heading>
-    <FormattedMessage
-      id="profile.age.details"
-      defaultMessage="To share your profile with other {siteName} learners, you must confirm that you are over the age of 13."
-      description="Error message"
-      tagName="p"
-      values={{
-        siteName: getConfig().SITE_NAME,
-      }}
+function AgeMessage({ accountSettingsUrl }) {
+  return (
+    <StatusAlert
+      alertType="info"
+      dialog={(
+        <>
+          <FormattedMessage
+            id="profile.age.headline"
+            defaultMessage="Your profile cannot be shared."
+            description="error message"
+            tagName="h6"
+          />
+          <FormattedMessage
+            id="profile.age.details"
+            defaultMessage="To share your profile with other edX learners, you must confirm that you are over the age of 13."
+            description="error message"
+            tagName="p"
+          />
+          <a href={accountSettingsUrl}>
+            <FormattedMessage
+              id="profile.age.set.date"
+              defaultMessage="Set your date of birth"
+              description="label on a link to set birthday"
+            />
+          </a>
+        </>
+      )}
+      dismissible={false}
+      open
    />
-    <Alert.Link href={accountSettingsUrl}>
-      <FormattedMessage
-        id="profile.age.set.date"
-        defaultMessage="Set your date of birth"
-        description="Label on a link to set birthday"
-      />
-    </Alert.Link>
-  </Alert>
-);
+  );
+}

 AgeMessage.propTypes = {
  accountSettingsUrl: PropTypes.string.isRequired,
--- a/src/profile/Banner.jsx
+++ b/src/profile/Banner.jsx
@@ -1,5 +1,7 @@
 import React from 'react';

-const Banner = () => <div className="profile-page-bg-banner bg-primary d-none d-md-block p-relative" />;
+function Banner() {
+  return <div className="profile-page-bg-banner bg-primary d-none d-md-block p-relative" />;
+}

 export default Banner;
--- a/src/profile/DateJoined.jsx
+++ b/src/profile/DateJoined.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage, FormattedDate } from '@edx/frontend-platform/i18n';

-const DateJoined = ({ date }) => {
+function DateJoined({ date }) {
  if (date == null) {
    return null;
  }
@@ -19,7 +19,7 @@ const DateJoined = ({ date }) => {
      />
    </p>
  );
-};
+}

 DateJoined.propTypes = {
  date: PropTypes.string,
--- a/src/profile/NotFoundPage.jsx
+++ b/src/profile/NotFoundPage.jsx
@@ -1,16 +1,16 @@
 import React from 'react';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';

-const NotFoundPage = () => (
-  <div className="container-fluid d-flex py-5 justify-content-center align-items-start text-center">
-    <p className="my-0 py-5 text-muted" style={{ maxWidth: '32em' }}>
-      <FormattedMessage
-        id="profile.notfound.message"
-        defaultMessage="The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again."
-        description="error message when a page does not exist"
-      />
-    </p>
-  </div>
-);
-
-export default NotFoundPage;
+export default function NotFoundPage() {
+  return (
+    <div className="container-fluid d-flex py-5 justify-content-center align-items-start text-center">
+      <p className="my-0 py-5 text-muted" style={{ maxWidth: '32em' }}>
+        <FormattedMessage
+          id="profile.notfound.message"
+          defaultMessage="The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again."
+          description="error message when a page does not exist"
+        />
+      </p>
+    </div>
+  );
+}
--- a/src/profile/ProfilePage.jsx
+++ b/src/profile/ProfilePage.jsx
@@ -6,7 +6,7 @@ import { sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
 import { ensureConfig, getConfig } from '@edx/frontend-platform';
 import { AppContext } from '@edx/frontend-platform/react';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Alert, Hyperlink } from '@edx/paragon';
+import { StatusAlert, Hyperlink } from '@edx/paragon';

 // Actions
 import {
@@ -30,10 +30,8 @@ import Bio from './forms/Bio';
 import Certificates from './forms/Certificates';
 import AgeMessage from './AgeMessage';
 import DateJoined from './DateJoined';
-import UsernameDescription from './UsernameDescription';
 import PageLoading from './PageLoading';
 import Banner from './Banner';
-import LearningGoal from './forms/LearningGoal';

 // Selectors
 import { profilePageSelector } from './data/selectors';
@@ -41,18 +39,16 @@ import { profilePageSelector } from './data/selectors';
 // i18n
 import messages from './ProfilePage.messages';

-import withParams from '../utils/hoc';
-
 ensureConfig(['CREDENTIALS_BASE_URL', 'LMS_BASE_URL'], 'ProfilePage');

 class ProfilePage extends React.Component {
  constructor(props, context) {
    super(props, context);

-    const credentialsBaseUrl = context.config.CREDENTIALS_BASE_URL;
+    const recordsUrl = this.getRecordsUrl(context);

    this.state = {
-      viewMyRecordsUrl: credentialsBaseUrl ? `${credentialsBaseUrl}/records` : null,
+      viewMyRecordsUrl: recordsUrl,
      accountSettingsUrl: `${context.config.LMS_BASE_URL}/account/settings`,
    };

@@ -65,12 +61,29 @@ class ProfilePage extends React.Component {
  }

  componentDidMount() {
-    this.props.fetchProfile(this.props.params.username);
+    this.props.fetchProfile(this.props.match.params.username);
    sendTrackingLogEvent('edx.profile.viewed', {
-      username: this.props.params.username,
+      username: this.props.match.params.username,
    });
  }

+  getRecordsUrl(context) {
+    let recordsUrl = null;
+
+    if (getConfig().ENABLE_LEARNER_RECORD_MFE) {
+      recordsUrl = getConfig().LEARNER_RECORD_MFE_BASE_URL;
+    } else {
+      const credentialsBaseUrl = context.config.CREDENTIALS_BASE_URL;
+      recordsUrl = credentialsBaseUrl ? `${credentialsBaseUrl}/records` : null;
+    }
+
+    return recordsUrl;
+  }
+
+  isAuthenticatedUserProfile() {
+    return this.props.match.params.username === this.context.authenticatedUser.username;
+  }
+
  handleSaveProfilePhoto(formData) {
    this.props.saveProfilePhoto(this.context.authenticatedUser.username, formData);
  }
@@ -95,18 +108,6 @@ class ProfilePage extends React.Component {
    this.props.updateDraft(name, value);
  }

-  isYOBDisabled() {
-    const { yearOfBirth } = this.props;
-    const currentYear = new Date().getFullYear();
-    const isAgeOrNotCompliant = !yearOfBirth || ((currentYear - yearOfBirth) < 13);
-
-    return isAgeOrNotCompliant && getConfig().COLLECT_YEAR_OF_BIRTH !== 'true';
-  }
-
-  isAuthenticatedUserProfile() {
-    return this.props.params.username === this.context.authenticatedUser.username;
-  }
-
  // Inserted into the DOM in two places (for responsive layout)
  renderViewMyRecordsButton() {
    if (!(this.state.viewMyRecordsUrl && this.isAuthenticatedUserProfile())) {
@@ -125,12 +126,13 @@ class ProfilePage extends React.Component {
    const { dateJoined } = this.props;

    return (
-      <span data-hj-suppress>
-        <h1 className="h2 mb-0 font-weight-bold">{this.props.params.username}</h1>
-        <DateJoined date={dateJoined} />
-        {this.isYOBDisabled() && <UsernameDescription />}
-        <hr className="d-none d-md-block" />
-      </span>
+      <>
+        <span data-hj-suppress>
+          <h1 className="h2 mb-0 font-weight-bold">{this.props.match.params.username}</h1>
+          <DateJoined date={dateJoined} />
+          <hr className="d-none d-md-block" />
+        </span>
+      </>
    );
  }

@@ -144,9 +146,7 @@ class ProfilePage extends React.Component {
    return (
      <div className="row">
        <div className="col-md-4 col-lg-3">
-          <Alert variant="danger" dismissible={false} show>
-            {photoUploadError.userMessage}
-          </Alert>
+          <StatusAlert alertType="danger" dialog={photoUploadError.userMessage} dismissible={false} open />
        </div>
      </div>
    );
@@ -174,8 +174,6 @@ class ProfilePage extends React.Component {
      socialLinks,
      draftSocialLinksByPlatform,
      visibilitySocialLinks,
-      learningGoal,
-      visibilityLearningGoal,
      languageProficiencies,
      visibilityLanguageProficiencies,
      visibilityCourseCertificates,
@@ -263,21 +261,13 @@ class ProfilePage extends React.Component {
            />
          </div>
          <div className="pt-md-3 col-md-8 col-lg-7 offset-lg-1">
-            {!this.isYOBDisabled() && this.renderAgeMessage()}
+            {this.renderAgeMessage()}
            <Bio
              bio={bio}
              visibilityBio={visibilityBio}
              formId="bio"
              {...commonFormProps}
            />
-            {getConfig().ENABLE_SKILLS_BUILDER_PROFILE && (
-              <LearningGoal
-                learningGoal={learningGoal}
-                visibilityLearningGoal={visibilityLearningGoal}
-                formId="learningGoal"
-                {...commonFormProps}
-              />
-            )}
            <Certificates
              visibilityCourseCertificates={visibilityCourseCertificates}
              formId="certificates"
@@ -308,7 +298,6 @@ ProfilePage.propTypes = {

  // Bio form data
  bio: PropTypes.string,
-  yearOfBirth: PropTypes.number,
  visibilityBio: PropTypes.string.isRequired,

  // Certificates form data
@@ -346,10 +335,6 @@ ProfilePage.propTypes = {
  })),
  visibilitySocialLinks: PropTypes.string.isRequired,

-  // Learning Goal form data
-  learningGoal: PropTypes.string,
-  visibilityLearningGoal: PropTypes.string.isRequired,
-
  // Other data we need
  profileImage: PropTypes.shape({
    src: PropTypes.string,
@@ -372,8 +357,10 @@ ProfilePage.propTypes = {
  updateDraft: PropTypes.func.isRequired,

  // Router
-  params: PropTypes.shape({
-    username: PropTypes.string.isRequired,
+  match: PropTypes.shape({
+    params: PropTypes.shape({
+      username: PropTypes.string.isRequired,
+    }).isRequired,
  }).isRequired,

  // i18n
@@ -386,13 +373,11 @@ ProfilePage.defaultProps = {
  photoUploadError: {},
  profileImage: {},
  name: null,
-  yearOfBirth: null,
  levelOfEducation: null,
  country: null,
  socialLinks: [],
  draftSocialLinksByPlatform: {},
  bio: null,
-  learningGoal: null,
  languageProficiencies: [],
  courseCertificates: null,
  requiresParentalConsent: null,
@@ -410,4 +395,4 @@ export default connect(
    closeForm,
    updateDraft,
  },
-)(injectIntl(withParams(ProfilePage)));
+)(injectIntl(ProfilePage));
--- a/src/profile/ProfilePage.test.jsx
+++ b/src/profile/ProfilePage.test.jsx
@@ -5,7 +5,6 @@ import { AppContext } from '@edx/frontend-platform/react';
 import { configure as configureI18n, IntlProvider } from '@edx/frontend-platform/i18n';
 import { mount } from 'enzyme';
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Provider } from 'react-redux';
 import renderer from 'react-test-renderer';
 import configureMockStore from 'redux-mock-store';
@@ -16,10 +15,10 @@ import ProfilePage from './ProfilePage';

 const mockStore = configureMockStore([thunk]);
 const storeMocks = {
-  loadingApp: require('./__mocks__/loadingApp.mockStore'),
-  viewOwnProfile: require('./__mocks__/viewOwnProfile.mockStore'),
-  viewOtherProfile: require('./__mocks__/viewOtherProfile.mockStore'),
-  savingEditedBio: require('./__mocks__/savingEditedBio.mockStore'),
+  loadingApp: require('./__mocks__/loadingApp.mockStore.js'),
+  viewOwnProfile: require('./__mocks__/viewOwnProfile.mockStore.js'),
+  viewOtherProfile: require('./__mocks__/viewOtherProfile.mockStore.js'),
+  savingEditedBio: require('./__mocks__/savingEditedBio.mockStore.js'),
 };
 const requiredProfilePageProps = {
  fetchUserAccount: () => {},
@@ -29,7 +28,7 @@ const requiredProfilePageProps = {
  deleteProfilePhoto: () => {},
  openField: () => {},
  closeField: () => {},
-  params: { username: 'staff' },
+  match: { params: { username: 'staff' } },
 };

 // Mock language cookie
@@ -66,151 +65,82 @@ beforeEach(() => {
  analytics.sendTrackingLogEvent.mockReset();
 });

-const ProfilePageWrapper = ({
-  contextValue, store, params, requiresParentalConsent,
-}) => (
-  <AppContext.Provider
-    value={contextValue}
-  >
-    <IntlProvider locale="en">
-      <Provider store={store}>
-        <ProfilePage {...requiredProfilePageProps} params={params} requiresParentalConsent={requiresParentalConsent} />
-      </Provider>
-    </IntlProvider>
-  </AppContext.Provider>
-);
-
-ProfilePageWrapper.defaultProps = {
-  params: { username: 'staff' },
-  requiresParentalConsent: null,
-};
-
-ProfilePageWrapper.propTypes = {
-  contextValue: PropTypes.shape({}).isRequired,
-  store: PropTypes.shape({}).isRequired,
-  params: PropTypes.shape({}),
-  requiresParentalConsent: PropTypes.bool,
-};
-
 describe('<ProfilePage />', () => {
  describe('Renders correctly in various states', () => {
    it('app loading', () => {
-      const contextValue = {
-        authenticatedUser: { userId: null, username: null, administrator: false },
-        config: getConfig(),
-      };
-      const component = <ProfilePageWrapper contextValue={contextValue} store={mockStore(storeMocks.loadingApp)} />;
+      const component = (
+        <AppContext.Provider
+          value={{
+            authenticatedUser: { userId: null, username: null, administrator: false },
+            config: getConfig(),
+          }}
+        >
+          <IntlProvider locale="en">
+            <Provider store={mockStore(storeMocks.loadingApp)}>
+              <ProfilePage {...requiredProfilePageProps} />
+            </Provider>
+          </IntlProvider>
+        </AppContext.Provider>
+      );
      const tree = renderer.create(component).toJSON();
      expect(tree).toMatchSnapshot();
    });

    it('viewing own profile', () => {
-      const contextValue = {
-        authenticatedUser: { userId: 123, username: 'staff', administrator: true },
-        config: getConfig(),
-      };
-      const component = <ProfilePageWrapper contextValue={contextValue} store={mockStore(storeMocks.viewOwnProfile)} />;
+      const component = (
+        <AppContext.Provider
+          value={{
+            authenticatedUser: { userId: 123, username: 'staff', administrator: true },
+            config: getConfig(),
+          }}
+        >
+          <IntlProvider locale="en">
+            <Provider store={mockStore(storeMocks.viewOwnProfile)}>
+              <ProfilePage {...requiredProfilePageProps} />
+            </Provider>
+          </IntlProvider>
+        </AppContext.Provider>
+      );
      const tree = renderer.create(component).toJSON();
      expect(tree).toMatchSnapshot();
    });

    it('viewing other profile', () => {
-      const contextValue = {
-        authenticatedUser: { userId: 123, username: 'staff', administrator: true },
-        config: getConfig(),
-      };
      const component = (
-        <ProfilePageWrapper
-          contextValue={contextValue}
-          store={mockStore(storeMocks.viewOtherProfile)}
-          params={{ username: 'verified' }} // Override default params
-        />
+        <AppContext.Provider
+          value={{
+            authenticatedUser: { userId: 123, username: 'staff', administrator: true },
+            config: getConfig(),
+          }}
+        >
+          <IntlProvider locale="en">
+            <Provider store={mockStore(storeMocks.viewOtherProfile)}>
+              <ProfilePage
+                {...requiredProfilePageProps}
+                match={{ params: { username: 'verified' } }} // Override default match
+              />
+            </Provider>
+          </IntlProvider>
+        </AppContext.Provider>
      );
      const tree = renderer.create(component).toJSON();
      expect(tree).toMatchSnapshot();
    });

    it('while saving an edited bio', () => {
-      const contextValue = {
-        authenticatedUser: { userId: 123, username: 'staff', administrator: true },
-        config: getConfig(),
-      };
      const component = (
-        <ProfilePageWrapper
-          contextValue={contextValue}
-          store={mockStore(storeMocks.savingEditedBio)}
-        />
-      );
-      const tree = renderer.create(component).toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-
-    it('while saving an edited bio with error', () => {
-      const storeData = JSON.parse(JSON.stringify(storeMocks.savingEditedBio));
-      storeData.profilePage.errors.bio = { userMessage: 'bio error' };
-      const contextValue = {
-        authenticatedUser: { userId: 123, username: 'staff', administrator: true },
-        config: getConfig(),
-      };
-      const component = (
-        <ProfilePageWrapper
-          contextValue={contextValue}
-          store={mockStore(storeData)}
-        />
-      );
-      const tree = renderer.create(component).toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-
-    it('test country edit with error', () => {
-      const storeData = JSON.parse(JSON.stringify(storeMocks.savingEditedBio));
-      storeData.profilePage.errors.country = { userMessage: 'country error' };
-      storeData.profilePage.currentlyEditingField = 'country';
-      const contextValue = {
-        authenticatedUser: { userId: 123, username: 'staff', administrator: true },
-        config: getConfig(),
-      };
-      const component = (
-        <ProfilePageWrapper
-          contextValue={contextValue}
-          store={mockStore(storeData)}
-        />
-      );
-      const tree = renderer.create(component).toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-
-    it('test education edit with error', () => {
-      const storeData = JSON.parse(JSON.stringify(storeMocks.savingEditedBio));
-      storeData.profilePage.errors.levelOfEducation = { userMessage: 'education error' };
-      storeData.profilePage.currentlyEditingField = 'levelOfEducation';
-      const contextValue = {
-        authenticatedUser: { userId: 123, username: 'staff', administrator: true },
-        config: getConfig(),
-      };
-      const component = (
-        <ProfilePageWrapper
-          contextValue={contextValue}
-          store={mockStore(storeData)}
-        />
-      );
-      const tree = renderer.create(component).toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-
-    it('test preferreded language edit with error', () => {
-      const storeData = JSON.parse(JSON.stringify(storeMocks.savingEditedBio));
-      storeData.profilePage.errors.languageProficiencies = { userMessage: 'preferred language error' };
-      storeData.profilePage.currentlyEditingField = 'languageProficiencies';
-      const contextValue = {
-        authenticatedUser: { userId: 123, username: 'staff', administrator: true },
-        config: getConfig(),
-      };
-      const component = (
-        <ProfilePageWrapper
-          contextValue={contextValue}
-          store={mockStore(storeData)}
-        />
+        <AppContext.Provider
+          value={{
+            authenticatedUser: { userId: 123, username: 'staff', administrator: true },
+            config: getConfig(),
+          }}
+        >
+          <IntlProvider locale="en">
+            <Provider store={mockStore(storeMocks.savingEditedBio)}>
+              <ProfilePage {...requiredProfilePageProps} />
+            </Provider>
+          </IntlProvider>
+        </AppContext.Provider>
      );
      const tree = renderer.create(component).toJSON();
      expect(tree).toMatchSnapshot();
@@ -220,66 +150,43 @@ describe('<ProfilePage />', () => {
      const config = getConfig();
      config.CREDENTIALS_BASE_URL = '';

-      const contextValue = {
-        authenticatedUser: { userId: 123, username: 'staff', administrator: true },
-        config: getConfig(),
-      };
      const component = (
-        <ProfilePageWrapper
-          contextValue={contextValue}
-          store={mockStore(storeMocks.viewOwnProfile)}
-        />
+        <AppContext.Provider
+          value={{
+            authenticatedUser: { userId: 123, username: 'staff', administrator: true },
+            config,
+          }}
+        >
+          <IntlProvider locale="en">
+            <Provider store={mockStore(storeMocks.viewOwnProfile)}>
+              <ProfilePage {...requiredProfilePageProps} />
+            </Provider>
+          </IntlProvider>
+        </AppContext.Provider>
      );
      const tree = renderer.create(component).toJSON();
      expect(tree).toMatchSnapshot();
    });
-    it('test age message alert', () => {
-      const storeData = JSON.parse(JSON.stringify(storeMocks.viewOwnProfile));
-      storeData.userAccount.requiresParentalConsent = true;
-      storeData.profilePage.account.requiresParentalConsent = true;
-      const contextValue = {
-        authenticatedUser: { userId: 123, username: 'staff', administrator: true },
-        config: { ...getConfig(), COLLECT_YEAR_OF_BIRTH: true },
-      };
-      const component = (
-        <ProfilePageWrapper
-          contextValue={contextValue}
-          store={mockStore(storeData)}
-          requiresParentalConsent
-        />
-      );
-      const wrapper = mount(component);
-      wrapper.update();
-
-      expect(wrapper.find('.alert-info').hasClass('show')).toBe(true);
-    });
-    it('test photo error alert', () => {
-      const storeData = JSON.parse(JSON.stringify(storeMocks.viewOwnProfile));
-      storeData.profilePage.errors.photo = { userMessage: 'error' };
-      const contextValue = {
-        authenticatedUser: { userId: 123, username: 'staff', administrator: true },
-        config: { ...getConfig(), COLLECT_YEAR_OF_BIRTH: true },
-      };
-      const component = <ProfilePageWrapper contextValue={contextValue} store={mockStore(storeData)} />;
-      const wrapper = mount(component);
-      wrapper.update();
-
-      expect(wrapper.find('.alert-danger').hasClass('show')).toBe(true);
-    });
  });

  describe('handles analytics', () => {
    it('calls sendTrackingLogEvent when mounting', () => {
-      const contextValue = {
-        authenticatedUser: { userId: 123, username: 'staff', administrator: true },
-        config: getConfig(),
-      };
      const component = (
-        <ProfilePageWrapper
-          contextValue={contextValue}
-          store={mockStore(storeMocks.loadingApp)}
-          params={{ username: 'test-username' }}
-        />
+        <AppContext.Provider
+          value={{
+            authenticatedUser: { userId: 123, username: 'staff', administrator: true },
+            config: getConfig(),
+          }}
+        >
+          <IntlProvider locale="en">
+            <Provider store={mockStore(storeMocks.loadingApp)}>
+              <ProfilePage
+                {...requiredProfilePageProps}
+                match={{ params: { username: 'test-username' } }}
+              />
+            </Provider>
+          </IntlProvider>
+        </AppContext.Provider>
      );
      const wrapper = mount(component);
      wrapper.update();
--- a/src/profile/UsernameDescription.jsx
+++ b/src/profile/UsernameDescription.jsx
@@ -1,23 +0,0 @@
-import React from 'react';
-import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { VisibilityOff } from '@edx/paragon/icons';
-import { Icon } from '@edx/paragon';
-import { getConfig } from '@edx/frontend-platform';
-
-const UsernameDescription = () => (
-  <div className="d-flex align-items-center mt-3 mb-2rem">
-    <Icon src={VisibilityOff} className="icon-visibility-off" />
-    <div className="username-description">
-      <FormattedMessage
-        id="profile.username.description"
-        defaultMessage="Your profile information is only visible to you. Only your username is visible to others on {siteName}."
-        description="A description of the username field"
-        values={{
-          siteName: getConfig().SITE_NAME,
-        }}
-      />
-    </div>
-  </div>
-);
-
-export default UsernameDescription;
--- a/src/profile/mocks/loadingApp.mockStore.js
+++ b/src/profile/mocks/loadingApp.mockStore.js
@@ -12,8 +12,7 @@ module.exports = {
      imageUrlMedium: null,
      imageUrlLarge: null
    },
-    levelOfEducation: null,
-    learningGoal: null
+    levelOfEducation: null
  },
  profilePage: {
    errors: {},
--- a/src/profile/mocks/savingEditedBio.mockStore.js
+++ b/src/profile/mocks/savingEditedBio.mockStore.js
@@ -42,8 +42,7 @@ module.exports = {
    secondaryEmail: null,
    timeZone: null,
    gender: null,
-    accountPrivacy: 'custom',
-    learningGoal: null,
+    accountPrivacy: 'custom'
  },
  profilePage: {
    errors: {},
@@ -92,8 +91,7 @@ module.exports = {
      timeZone: null,
      levelOfEducation: 'el',
      gender: null,
-      accountPrivacy: 'custom',
-      learningGoal: null,
+      accountPrivacy: 'custom'
    },
    preferences: {
      visibilityUserLocation: 'all_users',
@@ -106,8 +104,7 @@ module.exports = {
      visibilityName: 'private',
      visibilityLanguageProficiencies: 'all_users',
      visibilityCountry: 'all_users',
-      accountPrivacy: 'custom',
-      visibilityLearningGoal: 'private',
+      accountPrivacy: 'custom'
    },
    courseCertificates: [
      {
--- a/src/profile/mocks/viewOtherProfile.mockStore.js
+++ b/src/profile/mocks/viewOtherProfile.mockStore.js
@@ -42,8 +42,7 @@ module.exports = {
    secondaryEmail: null,
    timeZone: null,
    gender: null,
-    accountPrivacy: 'custom',
-    learningGoal: 'advance_career',
+    accountPrivacy: 'custom'
  },
  profilePage: {
    errors: {},
@@ -84,8 +83,7 @@ module.exports = {
    preferences: {},
    courseCertificates: [],
    drafts: {},
-    isLoadingProfile: false,
-    learningGoal: 'advance_career',
+    isLoadingProfile: false
  },
  router: {
    location: {
--- a/src/profile/mocks/viewOwnProfile.mockStore.js
+++ b/src/profile/mocks/viewOwnProfile.mockStore.js
@@ -42,8 +42,7 @@ module.exports = {
    secondaryEmail: null,
    timeZone: null,
    gender: null,
-    accountPrivacy: 'custom',
-    learningGoal: 'advance_career'
+    accountPrivacy: 'custom'
  },
  profilePage: {
    errors: {},
@@ -92,8 +91,7 @@ module.exports = {
      timeZone: null,
      levelOfEducation: 'el',
      gender: null,
-      accountPrivacy: 'custom',
-      learningGoal: 'advance_career'
+      accountPrivacy: 'custom'
    },
    preferences: {
      visibilityUserLocation: 'all_users',
@@ -106,8 +104,7 @@ module.exports = {
      visibilityName: 'private',
      visibilityLanguageProficiencies: 'all_users',
      visibilityCountry: 'all_users',
-      accountPrivacy: 'custom',
-      visibilityLearningGoal: 'private',
+      accountPrivacy: 'custom'
    },
    courseCertificates: [
      {
--- a/src/profile/snapshots/ProfilePage.test.jsx.snap
+++ b/src/profile/snapshots/ProfilePage.test.jsx.snap
@@ -31,5618 +31,6 @@ exports[`<ProfilePage /> Renders correctly in various states app loading 1`] = `
 </div>
 `;

-exports[`<ProfilePage /> Renders correctly in various states test country edit with error 1`] = `
-<div
-  className="profile-page"
->
-  <div
-    className="profile-page-bg-banner bg-primary d-none d-md-block p-relative"
-  />
-  <div
-    className="container-fluid"
-  >
-    <div
-      className="row align-items-center pt-4 mb-4 pt-md-0 mb-md-0"
-    >
-      <div
-        className="col-auto col-md-4 col-lg-3"
-      >
-        <div
-          className="d-flex align-items-center d-md-block"
-        >
-          <div
-            className="profile-avatar-wrap position-relative"
-          >
-            <div
-              className="profile-avatar rounded-circle bg-light"
-            >
-              <div
-                className="profile-avatar-menu-container"
-              >
-                <div
-                  className="pgn__dropdown pgn__dropdown-light dropdown"
-                  data-testid="dropdown"
-                >
-                  <button
-                    aria-expanded={false}
-                    aria-haspopup={true}
-                    className="dropdown-toggle btn btn-primary"
-                    disabled={false}
-                    onClick={[Function]}
-                    type="button"
-                  >
-                    Change
-                  </button>
-                </div>
-              </div>
-              <img
-                alt="profile avatar"
-                className="w-100 h-100 d-block rounded-circle overflow-hidden"
-                data-hj-suppress={true}
-                src="http://localhost:18000/media/profile-images/d2a9bdc2ba165dcefc73265c54bf9a20_500.jpg?v=1552495012"
-                style={
-                  Object {
-                    "objectFit": "cover",
-                  }
-                }
-              />
-            </div>
-            <form
-              encType="multipart/form-data"
-              onSubmit={[Function]}
-            >
-              <input
-                accept=".jpg, .jpeg, .png"
-                className="d-none form-control-file"
-                id="photo-file"
-                name="file"
-                onChange={[Function]}
-                type="file"
-              />
-            </form>
-          </div>
-        </div>
-      </div>
-      <div
-        className="col pl-0"
-      >
-        <div
-          className="d-md-none"
-        >
-          <span
-            data-hj-suppress={true}
-          >
-            <h1
-              className="h2 mb-0 font-weight-bold"
-            >
-              staff
-            </h1>
-            <p
-              className="mb-0"
-            >
-              Member since 
-              2017
-            </p>
-            <hr
-              className="d-none d-md-block"
-            />
-          </span>
-        </div>
-        <div
-          className="d-none d-md-block float-right"
-        >
-          <a
-            className="pgn__hyperlink default-link standalone-link btn btn-primary"
-            href="http://localhost:18150/records"
-            onClick={[Function]}
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            View My Records
-            <span
-              className="pgn__hyperlink__external-icon"
-              title="Opens in a new tab"
-            >
-              <span
-                className="pgn__icon"
-                style={
-                  Object {
-                    "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>
-        </div>
-      </div>
-    </div>
-    <div
-      className="row"
-    >
-      <div
-        className="col-md-4 col-lg-4"
-      >
-        <div
-          className="d-none d-md-block mb-4"
-        >
-          <span
-            data-hj-suppress={true}
-          >
-            <h1
-              className="h2 mb-0 font-weight-bold"
-            >
-              staff
-            </h1>
-            <p
-              className="mb-0"
-            >
-              Member since 
-              2017
-            </p>
-            <hr
-              className="d-none d-md-block"
-            />
-          </span>
-        </div>
-        <div
-          className="d-md-none mb-4"
-        >
-          <a
-            className="pgn__hyperlink default-link standalone-link btn btn-primary"
-            href="http://localhost:18150/records"
-            onClick={[Function]}
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            View My Records
-            <span
-              className="pgn__hyperlink__external-icon"
-              title="Opens in a new tab"
-            >
-              <span
-                className="pgn__icon"
-                style={
-                  Object {
-                    "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>
-        </div>
-        <div
-          className="pgn-transition-replace-group position-relative mb-5"
-          style={
-            Object {
-              "height": null,
-            }
-          }
-        >
-          <div
-            style={
-              Object {
-                "padding": ".1px 0",
-              }
-            }
-          >
-            <div
-              className="editable-item-header mb-2"
-            >
-              <h2
-                className="edit-section-header"
-                id={null}
-              >
-                Full Name
-                <button
-                  className="float-right px-0 btn btn-link btn-sm"
-                  disabled={false}
-                  onClick={[Function]}
-                  style={
-                    Object {
-                      "marginTop": "-.35rem",
-                    }
-                  }
-                  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={Object {}}
-                    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={Object {}}
-                    />
-                  </svg>
-                  Edit
-                </button>
-              </h2>
-              <p
-                className="mb-0"
-              >
-                <span
-                  className="ml-auto small text-muted"
-                >
-                  <svg
-                    aria-hidden="true"
-                    className="svg-inline--fa fa-eye-slash fa-w-20 "
-                    data-icon="eye-slash"
-                    data-prefix="far"
-                    focusable="false"
-                    role="img"
-                    style={Object {}}
-                    viewBox="0 0 640 512"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M634 471L36 3.51A16 16 0 0 0 13.51 6l-10 12.49A16 16 0 0 0 6 41l598 467.49a16 16 0 0 0 22.49-2.49l10-12.49A16 16 0 0 0 634 471zM296.79 146.47l134.79 105.38C429.36 191.91 380.48 144 320 144a112.26 112.26 0 0 0-23.21 2.47zm46.42 219.07L208.42 260.16C210.65 320.09 259.53 368 320 368a113 113 0 0 0 23.21-2.46zM320 112c98.65 0 189.09 55 237.93 144a285.53 285.53 0 0 1-44 60.2l37.74 29.5a333.7 333.7 0 0 0 52.9-75.11 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64c-36.7 0-71.71 7-104.63 18.81l46.41 36.29c18.94-4.3 38.34-7.1 58.22-7.1zm0 288c-98.65 0-189.08-55-237.93-144a285.47 285.47 0 0 1 44.05-60.19l-37.74-29.5a333.6 333.6 0 0 0-52.89 75.1 32.35 32.35 0 0 0 0 29.19C89.72 376.41 197.08 448 320 448c36.7 0 71.71-7.05 104.63-18.81l-46.41-36.28C359.28 397.2 339.89 400 320 400z"
-                      fill="currentColor"
-                      style={Object {}}
-                    />
-                  </svg>
-                   
-                  Just me
-                </span>
-              </p>
-            </div>
-            <p
-              className="h5"
-              data-hj-suppress={true}
-            >
-              Lemon Seltzer
-            </p>
-            <small
-              className="form-text text-muted"
-            >
-              This is the name that appears in your account and on your certificates.
-            </small>
-          </div>
-        </div>
-        <div
-          className="pgn-transition-replace-group position-relative mb-5"
-          style={
-            Object {
-              "height": null,
-            }
-          }
-        >
-          <div
-            style={
-              Object {
-                "padding": ".1px 0",
-              }
-            }
-          >
-            <div
-              aria-labelledby="country-label"
-              role="dialog"
-            >
-              <form
-                onSubmit={[Function]}
-              >
-                <div
-                  className="pgn__form-group"
-                >
-                  <label
-                    className="edit-section-header"
-                    htmlFor="country"
-                  >
-                    Location
-                  </label>
-                  <select
-                    className="form-control"
-                    data-hj-suppress={true}
-                    id="country"
-                    name="country"
-                    onChange={[Function]}
-                    type="select"
-                    value="ME"
-                  >
-                    <option
-                      value=""
-                    >
-                       
-                    </option>
-                    <option
-                      value="AF"
-                    >
-                      Afghanistan
-                    </option>
-                    <option
-                      value="AL"
-                    >
-                      Albania
-                    </option>
-                    <option
-                      value="DZ"
-                    >
-                      Algeria
-                    </option>
-                    <option
-                      value="AS"
-                    >
-                      American Samoa
-                    </option>
-                    <option
-                      value="AD"
-                    >
-                      Andorra
-                    </option>
-                    <option
-                      value="AO"
-                    >
-                      Angola
-                    </option>
-                    <option
-                      value="AI"
-                    >
-                      Anguilla
-                    </option>
-                    <option
-                      value="AQ"
-                    >
-                      Antarctica
-                    </option>
-                    <option
-                      value="AG"
-                    >
-                      Antigua and Barbuda
-                    </option>
-                    <option
-                      value="AR"
-                    >
-                      Argentina
-                    </option>
-                    <option
-                      value="AM"
-                    >
-                      Armenia
-                    </option>
-                    <option
-                      value="AW"
-                    >
-                      Aruba
-                    </option>
-                    <option
-                      value="AU"
-                    >
-                      Australia
-                    </option>
-                    <option
-                      value="AT"
-                    >
-                      Austria
-                    </option>
-                    <option
-                      value="AZ"
-                    >
-                      Azerbaijan
-                    </option>
-                    <option
-                      value="BS"
-                    >
-                      Bahamas
-                    </option>
-                    <option
-                      value="BH"
-                    >
-                      Bahrain
-                    </option>
-                    <option
-                      value="BD"
-                    >
-                      Bangladesh
-                    </option>
-                    <option
-                      value="BB"
-                    >
-                      Barbados
-                    </option>
-                    <option
-                      value="BY"
-                    >
-                      Belarus
-                    </option>
-                    <option
-                      value="BE"
-                    >
-                      Belgium
-                    </option>
-                    <option
-                      value="BZ"
-                    >
-                      Belize
-                    </option>
-                    <option
-                      value="BJ"
-                    >
-                      Benin
-                    </option>
-                    <option
-                      value="BM"
-                    >
-                      Bermuda
-                    </option>
-                    <option
-                      value="BT"
-                    >
-                      Bhutan
-                    </option>
-                    <option
-                      value="BO"
-                    >
-                      Bolivia
-                    </option>
-                    <option
-                      value="BA"
-                    >
-                      Bosnia and Herzegovina
-                    </option>
-                    <option
-                      value="BW"
-                    >
-                      Botswana
-                    </option>
-                    <option
-                      value="BV"
-                    >
-                      Bouvet Island
-                    </option>
-                    <option
-                      value="BR"
-                    >
-                      Brazil
-                    </option>
-                    <option
-                      value="IO"
-                    >
-                      British Indian Ocean Territory
-                    </option>
-                    <option
-                      value="BN"
-                    >
-                      Brunei Darussalam
-                    </option>
-                    <option
-                      value="BG"
-                    >
-                      Bulgaria
-                    </option>
-                    <option
-                      value="BF"
-                    >
-                      Burkina Faso
-                    </option>
-                    <option
-                      value="BI"
-                    >
-                      Burundi
-                    </option>
-                    <option
-                      value="KH"
-                    >
-                      Cambodia
-                    </option>
-                    <option
-                      value="CM"
-                    >
-                      Cameroon
-                    </option>
-                    <option
-                      value="CA"
-                    >
-                      Canada
-                    </option>
-                    <option
-                      value="CV"
-                    >
-                      Cape Verde
-                    </option>
-                    <option
-                      value="KY"
-                    >
-                      Cayman Islands
-                    </option>
-                    <option
-                      value="CF"
-                    >
-                      Central African Republic
-                    </option>
-                    <option
-                      value="TD"
-                    >
-                      Chad
-                    </option>
-                    <option
-                      value="CL"
-                    >
-                      Chile
-                    </option>
-                    <option
-                      value="CN"
-                    >
-                      China
-                    </option>
-                    <option
-                      value="CX"
-                    >
-                      Christmas Island
-                    </option>
-                    <option
-                      value="CC"
-                    >
-                      Cocos (Keeling) Islands
-                    </option>
-                    <option
-                      value="CO"
-                    >
-                      Colombia
-                    </option>
-                    <option
-                      value="KM"
-                    >
-                      Comoros
-                    </option>
-                    <option
-                      value="CG"
-                    >
-                      Congo
-                    </option>
-                    <option
-                      value="CD"
-                    >
-                      Congo, the Democratic Republic of the
-                    </option>
-                    <option
-                      value="CK"
-                    >
-                      Cook Islands
-                    </option>
-                    <option
-                      value="CR"
-                    >
-                      Costa Rica
-                    </option>
-                    <option
-                      value="CI"
-                    >
-                      Cote D'Ivoire
-                    </option>
-                    <option
-                      value="HR"
-                    >
-                      Croatia
-                    </option>
-                    <option
-                      value="CU"
-                    >
-                      Cuba
-                    </option>
-                    <option
-                      value="CY"
-                    >
-                      Cyprus
-                    </option>
-                    <option
-                      value="CZ"
-                    >
-                      Czech Republic
-                    </option>
-                    <option
-                      value="DK"
-                    >
-                      Denmark
-                    </option>
-                    <option
-                      value="DJ"
-                    >
-                      Djibouti
-                    </option>
-                    <option
-                      value="DM"
-                    >
-                      Dominica
-                    </option>
-                    <option
-                      value="DO"
-                    >
-                      Dominican Republic
-                    </option>
-                    <option
-                      value="EC"
-                    >
-                      Ecuador
-                    </option>
-                    <option
-                      value="EG"
-                    >
-                      Egypt
-                    </option>
-                    <option
-                      value="SV"
-                    >
-                      El Salvador
-                    </option>
-                    <option
-                      value="GQ"
-                    >
-                      Equatorial Guinea
-                    </option>
-                    <option
-                      value="ER"
-                    >
-                      Eritrea
-                    </option>
-                    <option
-                      value="EE"
-                    >
-                      Estonia
-                    </option>
-                    <option
-                      value="ET"
-                    >
-                      Ethiopia
-                    </option>
-                    <option
-                      value="FK"
-                    >
-                      Falkland Islands (Malvinas)
-                    </option>
-                    <option
-                      value="FO"
-                    >
-                      Faroe Islands
-                    </option>
-                    <option
-                      value="FJ"
-                    >
-                      Fiji
-                    </option>
-                    <option
-                      value="FI"
-                    >
-                      Finland
-                    </option>
-                    <option
-                      value="FR"
-                    >
-                      France
-                    </option>
-                    <option
-                      value="GF"
-                    >
-                      French Guiana
-                    </option>
-                    <option
-                      value="PF"
-                    >
-                      French Polynesia
-                    </option>
-                    <option
-                      value="TF"
-                    >
-                      French Southern Territories
-                    </option>
-                    <option
-                      value="GA"
-                    >
-                      Gabon
-                    </option>
-                    <option
-                      value="GM"
-                    >
-                      Gambia
-                    </option>
-                    <option
-                      value="GE"
-                    >
-                      Georgia
-                    </option>
-                    <option
-                      value="DE"
-                    >
-                      Germany
-                    </option>
-                    <option
-                      value="GH"
-                    >
-                      Ghana
-                    </option>
-                    <option
-                      value="GI"
-                    >
-                      Gibraltar
-                    </option>
-                    <option
-                      value="GR"
-                    >
-                      Greece
-                    </option>
-                    <option
-                      value="GL"
-                    >
-                      Greenland
-                    </option>
-                    <option
-                      value="GD"
-                    >
-                      Grenada
-                    </option>
-                    <option
-                      value="GP"
-                    >
-                      Guadeloupe
-                    </option>
-                    <option
-                      value="GU"
-                    >
-                      Guam
-                    </option>
-                    <option
-                      value="GT"
-                    >
-                      Guatemala
-                    </option>
-                    <option
-                      value="GN"
-                    >
-                      Guinea
-                    </option>
-                    <option
-                      value="GW"
-                    >
-                      Guinea-Bissau
-                    </option>
-                    <option
-                      value="GY"
-                    >
-                      Guyana
-                    </option>
-                    <option
-                      value="HT"
-                    >
-                      Haiti
-                    </option>
-                    <option
-                      value="HM"
-                    >
-                      Heard Island and Mcdonald Islands
-                    </option>
-                    <option
-                      value="VA"
-                    >
-                      Holy See (Vatican City State)
-                    </option>
-                    <option
-                      value="HN"
-                    >
-                      Honduras
-                    </option>
-                    <option
-                      value="HK"
-                    >
-                      Hong Kong
-                    </option>
-                    <option
-                      value="HU"
-                    >
-                      Hungary
-                    </option>
-                    <option
-                      value="IS"
-                    >
-                      Iceland
-                    </option>
-                    <option
-                      value="IN"
-                    >
-                      India
-                    </option>
-                    <option
-                      value="ID"
-                    >
-                      Indonesia
-                    </option>
-                    <option
-                      value="IR"
-                    >
-                      Iran, Islamic Republic of
-                    </option>
-                    <option
-                      value="IQ"
-                    >
-                      Iraq
-                    </option>
-                    <option
-                      value="IE"
-                    >
-                      Ireland
-                    </option>
-                    <option
-                      value="IL"
-                    >
-                      Israel
-                    </option>
-                    <option
-                      value="IT"
-                    >
-                      Italy
-                    </option>
-                    <option
-                      value="JM"
-                    >
-                      Jamaica
-                    </option>
-                    <option
-                      value="JP"
-                    >
-                      Japan
-                    </option>
-                    <option
-                      value="JO"
-                    >
-                      Jordan
-                    </option>
-                    <option
-                      value="KZ"
-                    >
-                      Kazakhstan
-                    </option>
-                    <option
-                      value="KE"
-                    >
-                      Kenya
-                    </option>
-                    <option
-                      value="KI"
-                    >
-                      Kiribati
-                    </option>
-                    <option
-                      value="KP"
-                    >
-                      North Korea
-                    </option>
-                    <option
-                      value="KR"
-                    >
-                      South Korea
-                    </option>
-                    <option
-                      value="KW"
-                    >
-                      Kuwait
-                    </option>
-                    <option
-                      value="KG"
-                    >
-                      Kyrgyzstan
-                    </option>
-                    <option
-                      value="LA"
-                    >
-                      Lao People's Democratic Republic
-                    </option>
-                    <option
-                      value="LV"
-                    >
-                      Latvia
-                    </option>
-                    <option
-                      value="LB"
-                    >
-                      Lebanon
-                    </option>
-                    <option
-                      value="LS"
-                    >
-                      Lesotho
-                    </option>
-                    <option
-                      value="LR"
-                    >
-                      Liberia
-                    </option>
-                    <option
-                      value="LY"
-                    >
-                      Libya
-                    </option>
-                    <option
-                      value="LI"
-                    >
-                      Liechtenstein
-                    </option>
-                    <option
-                      value="LT"
-                    >
-                      Lithuania
-                    </option>
-                    <option
-                      value="LU"
-                    >
-                      Luxembourg
-                    </option>
-                    <option
-                      value="MO"
-                    >
-                      Macao
-                    </option>
-                    <option
-                      value="MG"
-                    >
-                      Madagascar
-                    </option>
-                    <option
-                      value="MW"
-                    >
-                      Malawi
-                    </option>
-                    <option
-                      value="MY"
-                    >
-                      Malaysia
-                    </option>
-                    <option
-                      value="MV"
-                    >
-                      Maldives
-                    </option>
-                    <option
-                      value="ML"
-                    >
-                      Mali
-                    </option>
-                    <option
-                      value="MT"
-                    >
-                      Malta
-                    </option>
-                    <option
-                      value="MH"
-                    >
-                      Marshall Islands
-                    </option>
-                    <option
-                      value="MQ"
-                    >
-                      Martinique
-                    </option>
-                    <option
-                      value="MR"
-                    >
-                      Mauritania
-                    </option>
-                    <option
-                      value="MU"
-                    >
-                      Mauritius
-                    </option>
-                    <option
-                      value="YT"
-                    >
-                      Mayotte
-                    </option>
-                    <option
-                      value="MX"
-                    >
-                      Mexico
-                    </option>
-                    <option
-                      value="FM"
-                    >
-                      Micronesia, Federated States of
-                    </option>
-                    <option
-                      value="MD"
-                    >
-                      Moldova, Republic of
-                    </option>
-                    <option
-                      value="MC"
-                    >
-                      Monaco
-                    </option>
-                    <option
-                      value="MN"
-                    >
-                      Mongolia
-                    </option>
-                    <option
-                      value="MS"
-                    >
-                      Montserrat
-                    </option>
-                    <option
-                      value="MA"
-                    >
-                      Morocco
-                    </option>
-                    <option
-                      value="MZ"
-                    >
-                      Mozambique
-                    </option>
-                    <option
-                      value="MM"
-                    >
-                      Myanmar
-                    </option>
-                    <option
-                      value="NA"
-                    >
-                      Namibia
-                    </option>
-                    <option
-                      value="NR"
-                    >
-                      Nauru
-                    </option>
-                    <option
-                      value="NP"
-                    >
-                      Nepal
-                    </option>
-                    <option
-                      value="NL"
-                    >
-                      Netherlands
-                    </option>
-                    <option
-                      value="NC"
-                    >
-                      New Caledonia
-                    </option>
-                    <option
-                      value="NZ"
-                    >
-                      New Zealand
-                    </option>
-                    <option
-                      value="NI"
-                    >
-                      Nicaragua
-                    </option>
-                    <option
-                      value="NE"
-                    >
-                      Niger
-                    </option>
-                    <option
-                      value="NG"
-                    >
-                      Nigeria
-                    </option>
-                    <option
-                      value="NU"
-                    >
-                      Niue
-                    </option>
-                    <option
-                      value="NF"
-                    >
-                      Norfolk Island
-                    </option>
-                    <option
-                      value="MK"
-                    >
-                      North Macedonia, Republic of
-                    </option>
-                    <option
-                      value="MP"
-                    >
-                      Northern Mariana Islands
-                    </option>
-                    <option
-                      value="NO"
-                    >
-                      Norway
-                    </option>
-                    <option
-                      value="OM"
-                    >
-                      Oman
-                    </option>
-                    <option
-                      value="PK"
-                    >
-                      Pakistan
-                    </option>
-                    <option
-                      value="PW"
-                    >
-                      Palau
-                    </option>
-                    <option
-                      value="PS"
-                    >
-                      Palestinian Territory, Occupied
-                    </option>
-                    <option
-                      value="PA"
-                    >
-                      Panama
-                    </option>
-                    <option
-                      value="PG"
-                    >
-                      Papua New Guinea
-                    </option>
-                    <option
-                      value="PY"
-                    >
-                      Paraguay
-                    </option>
-                    <option
-                      value="PE"
-                    >
-                      Peru
-                    </option>
-                    <option
-                      value="PH"
-                    >
-                      Philippines
-                    </option>
-                    <option
-                      value="PN"
-                    >
-                      Pitcairn
-                    </option>
-                    <option
-                      value="PL"
-                    >
-                      Poland
-                    </option>
-                    <option
-                      value="PT"
-                    >
-                      Portugal
-                    </option>
-                    <option
-                      value="PR"
-                    >
-                      Puerto Rico
-                    </option>
-                    <option
-                      value="QA"
-                    >
-                      Qatar
-                    </option>
-                    <option
-                      value="RE"
-                    >
-                      Reunion
-                    </option>
-                    <option
-                      value="RO"
-                    >
-                      Romania
-                    </option>
-                    <option
-                      value="RU"
-                    >
-                      Russian Federation
-                    </option>
-                    <option
-                      value="RW"
-                    >
-                      Rwanda
-                    </option>
-                    <option
-                      value="SH"
-                    >
-                      Saint Helena
-                    </option>
-                    <option
-                      value="KN"
-                    >
-                      Saint Kitts and Nevis
-                    </option>
-                    <option
-                      value="LC"
-                    >
-                      Saint Lucia
-                    </option>
-                    <option
-                      value="PM"
-                    >
-                      Saint Pierre and Miquelon
-                    </option>
-                    <option
-                      value="VC"
-                    >
-                      Saint Vincent and the Grenadines
-                    </option>
-                    <option
-                      value="WS"
-                    >
-                      Samoa
-                    </option>
-                    <option
-                      value="SM"
-                    >
-                      San Marino
-                    </option>
-                    <option
-                      value="ST"
-                    >
-                      Sao Tome and Principe
-                    </option>
-                    <option
-                      value="SA"
-                    >
-                      Saudi Arabia
-                    </option>
-                    <option
-                      value="SN"
-                    >
-                      Senegal
-                    </option>
-                    <option
-                      value="SC"
-                    >
-                      Seychelles
-                    </option>
-                    <option
-                      value="SL"
-                    >
-                      Sierra Leone
-                    </option>
-                    <option
-                      value="SG"
-                    >
-                      Singapore
-                    </option>
-                    <option
-                      value="SK"
-                    >
-                      Slovakia
-                    </option>
-                    <option
-                      value="SI"
-                    >
-                      Slovenia
-                    </option>
-                    <option
-                      value="SB"
-                    >
-                      Solomon Islands
-                    </option>
-                    <option
-                      value="SO"
-                    >
-                      Somalia
-                    </option>
-                    <option
-                      value="ZA"
-                    >
-                      South Africa
-                    </option>
-                    <option
-                      value="GS"
-                    >
-                      South Georgia and the South Sandwich Islands
-                    </option>
-                    <option
-                      value="ES"
-                    >
-                      Spain
-                    </option>
-                    <option
-                      value="LK"
-                    >
-                      Sri Lanka
-                    </option>
-                    <option
-                      value="SD"
-                    >
-                      Sudan
-                    </option>
-                    <option
-                      value="SR"
-                    >
-                      Suriname
-                    </option>
-                    <option
-                      value="SJ"
-                    >
-                      Svalbard and Jan Mayen
-                    </option>
-                    <option
-                      value="SZ"
-                    >
-                      Swaziland
-                    </option>
-                    <option
-                      value="SE"
-                    >
-                      Sweden
-                    </option>
-                    <option
-                      value="CH"
-                    >
-                      Switzerland
-                    </option>
-                    <option
-                      value="SY"
-                    >
-                      Syrian Arab Republic
-                    </option>
-                    <option
-                      value="TW"
-                    >
-                      Taiwan
-                    </option>
-                    <option
-                      value="TJ"
-                    >
-                      Tajikistan
-                    </option>
-                    <option
-                      value="TZ"
-                    >
-                      Tanzania, United Republic of
-                    </option>
-                    <option
-                      value="TH"
-                    >
-                      Thailand
-                    </option>
-                    <option
-                      value="TL"
-                    >
-                      Timor-Leste
-                    </option>
-                    <option
-                      value="TG"
-                    >
-                      Togo
-                    </option>
-                    <option
-                      value="TK"
-                    >
-                      Tokelau
-                    </option>
-                    <option
-                      value="TO"
-                    >
-                      Tonga
-                    </option>
-                    <option
-                      value="TT"
-                    >
-                      Trinidad and Tobago
-                    </option>
-                    <option
-                      value="TN"
-                    >
-                      Tunisia
-                    </option>
-                    <option
-                      value="TR"
-                    >
-                      Turkey
-                    </option>
-                    <option
-                      value="TM"
-                    >
-                      Turkmenistan
-                    </option>
-                    <option
-                      value="TC"
-                    >
-                      Turks and Caicos Islands
-                    </option>
-                    <option
-                      value="TV"
-                    >
-                      Tuvalu
-                    </option>
-                    <option
-                      value="UG"
-                    >
-                      Uganda
-                    </option>
-                    <option
-                      value="UA"
-                    >
-                      Ukraine
-                    </option>
-                    <option
-                      value="AE"
-                    >
-                      United Arab Emirates
-                    </option>
-                    <option
-                      value="GB"
-                    >
-                      United Kingdom
-                    </option>
-                    <option
-                      value="US"
-                    >
-                      United States of America
-                    </option>
-                    <option
-                      value="UM"
-                    >
-                      United States Minor Outlying Islands
-                    </option>
-                    <option
-                      value="UY"
-                    >
-                      Uruguay
-                    </option>
-                    <option
-                      value="UZ"
-                    >
-                      Uzbekistan
-                    </option>
-                    <option
-                      value="VU"
-                    >
-                      Vanuatu
-                    </option>
-                    <option
-                      value="VE"
-                    >
-                      Venezuela
-                    </option>
-                    <option
-                      value="VN"
-                    >
-                      Viet Nam
-                    </option>
-                    <option
-                      value="VG"
-                    >
-                      Virgin Islands, British
-                    </option>
-                    <option
-                      value="VI"
-                    >
-                      Virgin Islands, U.S.
-                    </option>
-                    <option
-                      value="WF"
-                    >
-                      Wallis and Futuna
-                    </option>
-                    <option
-                      value="EH"
-                    >
-                      Western Sahara
-                    </option>
-                    <option
-                      value="YE"
-                    >
-                      Yemen
-                    </option>
-                    <option
-                      value="ZM"
-                    >
-                      Zambia
-                    </option>
-                    <option
-                      value="ZW"
-                    >
-                      Zimbabwe
-                    </option>
-                    <option
-                      value="AX"
-                    >
-                      Åland Islands
-                    </option>
-                    <option
-                      value="BQ"
-                    >
-                      Bonaire, Sint Eustatius and Saba
-                    </option>
-                    <option
-                      value="CW"
-                    >
-                      Curaçao
-                    </option>
-                    <option
-                      value="GG"
-                    >
-                      Guernsey
-                    </option>
-                    <option
-                      value="IM"
-                    >
-                      Isle of Man
-                    </option>
-                    <option
-                      value="JE"
-                    >
-                      Jersey
-                    </option>
-                    <option
-                      value="ME"
-                    >
-                      Montenegro
-                    </option>
-                    <option
-                      value="BL"
-                    >
-                      Saint Barthélemy
-                    </option>
-                    <option
-                      value="MF"
-                    >
-                      Saint Martin (French part)
-                    </option>
-                    <option
-                      value="RS"
-                    >
-                      Serbia
-                    </option>
-                    <option
-                      value="SX"
-                    >
-                      Sint Maarten (Dutch part)
-                    </option>
-                    <option
-                      value="SS"
-                    >
-                      South Sudan
-                    </option>
-                    <option
-                      value="XK"
-                    >
-                      Kosovo
-                    </option>
-                  </select>
-                  <div
-                    className="pgn__form-control-description pgn__form-text pgn__form-text-invalid"
-                    id="country-2"
-                  >
-                    <div>
-                      country error
-                    </div>
-                  </div>
-                </div>
-                <div
-                  className="d-flex flex-row-reverse flex-wrap justify-content-end align-items-center"
-                >
-                  <div
-                    className="form-group d-flex flex-wrap"
-                  >
-                    <label
-                      className="col-form-label"
-                      htmlFor="visibilityCountry"
-                    >
-                      Who can see this:
-                    </label>
-                    <span
-                      className="d-flex align-items-center"
-                    >
-                      <span
-                        className="d-inline-block ml-1 mr-2"
-                        style={
-                          Object {
-                            "width": "1.5rem",
-                          }
-                        }
-                      >
-                        <svg
-                          aria-hidden="true"
-                          className="svg-inline--fa fa-eye fa-w-18 "
-                          data-icon="eye"
-                          data-prefix="far"
-                          focusable="false"
-                          role="img"
-                          style={Object {}}
-                          viewBox="0 0 576 512"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
-                            fill="currentColor"
-                            style={Object {}}
-                          />
-                        </svg>
-                      </span>
-                      <select
-                        className="d-inline-block w-auto form-control"
-                        id="visibilityCountry"
-                        name="visibilityCountry"
-                        onChange={[Function]}
-                        type="select"
-                        value="all_users"
-                      >
-                        <option
-                          value="private"
-                        >
-                          Just me
-                        </option>
-                        <option
-                          value="all_users"
-                        >
-                          Everyone on localhost
-                        </option>
-                      </select>
-                    </span>
-                  </div>
-                  <div
-                    className="form-group flex-shrink-0 flex-grow-1"
-                  >
-                    <button
-                      aria-disabled={false}
-                      aria-live="assertive"
-                      className="pgn__stateful-btn pgn__stateful-btn-state-pending btn btn-primary"
-                      disabled={false}
-                      onClick={[Function]}
-                      type="submit"
-                    >
-                      <span
-                        className="d-flex align-items-center justify-content-center"
-                      >
-                        <span
-                          className="pgn__stateful-btn-icon"
-                        >
-                          <span
-                            className="pgn__icon icon-spin"
-                          >
-                            <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="M22 12A10 10 0 1 1 6.122 3.91l1.176 1.618A8 8 0 1 0 20 12h2Z"
-                                fill="currentColor"
-                              />
-                            </svg>
-                          </span>
-                        </span>
-                        <span>
-                          Saving
-                        </span>
-                      </span>
-                    </button>
-                    <button
-                      className="btn btn-link"
-                      disabled={false}
-                      onClick={[Function]}
-                      type="button"
-                    >
-                      Cancel
-                    </button>
-                  </div>
-                </div>
-              </form>
-            </div>
-          </div>
-        </div>
-        <div
-          className="pgn-transition-replace-group position-relative mb-5"
-          style={
-            Object {
-              "height": null,
-            }
-          }
-        >
-          <div
-            style={
-              Object {
-                "padding": ".1px 0",
-              }
-            }
-          >
-            <div
-              className="editable-item-header mb-2"
-            >
-              <h2
-                className="edit-section-header"
-                id={null}
-              >
-                Primary Language Spoken
-                <button
-                  className="float-right px-0 btn btn-link btn-sm"
-                  disabled={false}
-                  onClick={[Function]}
-                  style={
-                    Object {
-                      "marginTop": "-.35rem",
-                    }
-                  }
-                  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={Object {}}
-                    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={Object {}}
-                    />
-                  </svg>
-                  Edit
-                </button>
-              </h2>
-              <p
-                className="mb-0"
-              >
-                <span
-                  className="ml-auto small text-muted"
-                >
-                  <svg
-                    aria-hidden="true"
-                    className="svg-inline--fa fa-eye fa-w-18 "
-                    data-icon="eye"
-                    data-prefix="far"
-                    focusable="false"
-                    role="img"
-                    style={Object {}}
-                    viewBox="0 0 576 512"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
-                      fill="currentColor"
-                      style={Object {}}
-                    />
-                  </svg>
-                   
-                  Everyone on localhost
-                </span>
-              </p>
-            </div>
-            <p
-              className="h5"
-              data-hj-suppress={true}
-            >
-              Yoruba
-            </p>
-          </div>
-        </div>
-        <div
-          className="pgn-transition-replace-group position-relative mb-5"
-          style={
-            Object {
-              "height": null,
-            }
-          }
-        >
-          <div
-            style={
-              Object {
-                "padding": ".1px 0",
-              }
-            }
-          >
-            <div
-              className="editable-item-header mb-2"
-            >
-              <h2
-                className="edit-section-header"
-                id={null}
-              >
-                Education
-                <button
-                  className="float-right px-0 btn btn-link btn-sm"
-                  disabled={false}
-                  onClick={[Function]}
-                  style={
-                    Object {
-                      "marginTop": "-.35rem",
-                    }
-                  }
-                  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={Object {}}
-                    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={Object {}}
-                    />
-                  </svg>
-                  Edit
-                </button>
-              </h2>
-              <p
-                className="mb-0"
-              >
-                <span
-                  className="ml-auto small text-muted"
-                >
-                  <svg
-                    aria-hidden="true"
-                    className="svg-inline--fa fa-eye-slash fa-w-20 "
-                    data-icon="eye-slash"
-                    data-prefix="far"
-                    focusable="false"
-                    role="img"
-                    style={Object {}}
-                    viewBox="0 0 640 512"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M634 471L36 3.51A16 16 0 0 0 13.51 6l-10 12.49A16 16 0 0 0 6 41l598 467.49a16 16 0 0 0 22.49-2.49l10-12.49A16 16 0 0 0 634 471zM296.79 146.47l134.79 105.38C429.36 191.91 380.48 144 320 144a112.26 112.26 0 0 0-23.21 2.47zm46.42 219.07L208.42 260.16C210.65 320.09 259.53 368 320 368a113 113 0 0 0 23.21-2.46zM320 112c98.65 0 189.09 55 237.93 144a285.53 285.53 0 0 1-44 60.2l37.74 29.5a333.7 333.7 0 0 0 52.9-75.11 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64c-36.7 0-71.71 7-104.63 18.81l46.41 36.29c18.94-4.3 38.34-7.1 58.22-7.1zm0 288c-98.65 0-189.08-55-237.93-144a285.47 285.47 0 0 1 44.05-60.19l-37.74-29.5a333.6 333.6 0 0 0-52.89 75.1 32.35 32.35 0 0 0 0 29.19C89.72 376.41 197.08 448 320 448c36.7 0 71.71-7.05 104.63-18.81l-46.41-36.28C359.28 397.2 339.89 400 320 400z"
-                      fill="currentColor"
-                      style={Object {}}
-                    />
-                  </svg>
-                   
-                  Just me
-                </span>
-              </p>
-            </div>
-            <p
-              className="h5"
-              data-hj-suppress={true}
-            >
-              Elementary/primary school
-            </p>
-          </div>
-        </div>
-        <div
-          className="pgn-transition-replace-group position-relative mb-5"
-          style={
-            Object {
-              "height": null,
-            }
-          }
-        >
-          <div
-            style={
-              Object {
-                "padding": ".1px 0",
-              }
-            }
-          >
-            <div
-              className="editable-item-header mb-2"
-            >
-              <h2
-                className="edit-section-header"
-                id={null}
-              >
-                Social Links
-                <button
-                  className="float-right px-0 btn btn-link btn-sm"
-                  disabled={false}
-                  onClick={[Function]}
-                  style={
-                    Object {
-                      "marginTop": "-.35rem",
-                    }
-                  }
-                  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={Object {}}
-                    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={Object {}}
-                    />
-                  </svg>
-                  Edit
-                </button>
-              </h2>
-              <p
-                className="mb-0"
-              >
-                <span
-                  className="ml-auto small text-muted"
-                >
-                  <svg
-                    aria-hidden="true"
-                    className="svg-inline--fa fa-eye fa-w-18 "
-                    data-icon="eye"
-                    data-prefix="far"
-                    focusable="false"
-                    role="img"
-                    style={Object {}}
-                    viewBox="0 0 576 512"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
-                      fill="currentColor"
-                      style={Object {}}
-                    />
-                  </svg>
-                   
-                  Everyone on localhost
-                </span>
-              </p>
-            </div>
-            <ul
-              className="list-unstyled"
-            >
-              <li
-                className="form-group"
-              >
-                <a
-                  className="font-weight-bold"
-                  href="https://www.twitter.com/ALOHA"
-                >
-                  <svg
-                    aria-hidden="true"
-                    className="svg-inline--fa fa-twitter fa-w-16 mr-2"
-                    data-icon="twitter"
-                    data-prefix="fab"
-                    focusable="false"
-                    role="img"
-                    style={Object {}}
-                    viewBox="0 0 512 512"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
-                      fill="currentColor"
-                      style={Object {}}
-                    />
-                  </svg>
-                  Twitter
-                </a>
-              </li>
-              <li
-                className="form-group"
-              >
-                <a
-                  className="font-weight-bold"
-                  href="https://www.facebook.com/aloha"
-                >
-                  <svg
-                    aria-hidden="true"
-                    className="svg-inline--fa fa-facebook fa-w-16 mr-2"
-                    data-icon="facebook"
-                    data-prefix="fab"
-                    focusable="false"
-                    role="img"
-                    style={Object {}}
-                    viewBox="0 0 512 512"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"
-                      fill="currentColor"
-                      style={Object {}}
-                    />
-                  </svg>
-                  Facebook
-                </a>
-              </li>
-              <li
-                className="form-group"
-              >
-                <div>
-                  <button
-                    className="pl-0 text-left btn btn-link"
-                    onClick={[Function]}
-                    onKeyDown={[Function]}
-                    tabIndex={0}
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      className="svg-inline--fa fa-plus fa-w-14 fa-xs mr-2"
-                      data-icon="plus"
-                      data-prefix="fas"
-                      focusable="false"
-                      role="img"
-                      style={Object {}}
-                      viewBox="0 0 448 512"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-                        fill="currentColor"
-                        style={Object {}}
-                      />
-                    </svg>
-                    Add 
-                    LinkedIn
-                  </button>
-                </div>
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-      <div
-        className="pt-md-3 col-md-8 col-lg-7 offset-lg-1"
-      >
-        <div
-          className="pgn-transition-replace-group position-relative mb-5"
-          style={
-            Object {
-              "height": null,
-            }
-          }
-        >
-          <div
-            style={
-              Object {
-                "padding": ".1px 0",
-              }
-            }
-          >
-            <div
-              className="editable-item-header mb-2"
-            >
-              <h2
-                className="edit-section-header"
-                id={null}
-              >
-                About Me
-                <button
-                  className="float-right px-0 btn btn-link btn-sm"
-                  disabled={false}
-                  onClick={[Function]}
-                  style={
-                    Object {
-                      "marginTop": "-.35rem",
-                    }
-                  }
-                  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={Object {}}
-                    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={Object {}}
-                    />
-                  </svg>
-                  Edit
-                </button>
-              </h2>
-              <p
-                className="mb-0"
-              >
-                <span
-                  className="ml-auto small text-muted"
-                >
-                  <svg
-                    aria-hidden="true"
-                    className="svg-inline--fa fa-eye fa-w-18 "
-                    data-icon="eye"
-                    data-prefix="far"
-                    focusable="false"
-                    role="img"
-                    style={Object {}}
-                    viewBox="0 0 576 512"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
-                      fill="currentColor"
-                      style={Object {}}
-                    />
-                  </svg>
-                   
-                  Everyone on localhost
-                </span>
-              </p>
-            </div>
-            <p
-              className="lead"
-              data-hj-suppress={true}
-            >
-              This is my bio
-            </p>
-          </div>
-        </div>
-        <div
-          className="pgn-transition-replace-group position-relative mb-4"
-          style={
-            Object {
-              "height": null,
-            }
-          }
-        >
-          <div
-            style={
-              Object {
-                "padding": ".1px 0",
-              }
-            }
-          >
-            <div
-              className="editable-item-header mb-2"
-            >
-              <h2
-                className="edit-section-header"
-                id={null}
-              >
-                My Certificates
-                <button
-                  className="float-right px-0 btn btn-link btn-sm"
-                  disabled={false}
-                  onClick={[Function]}
-                  style={
-                    Object {
-                      "marginTop": "-.35rem",
-                    }
-                  }
-                  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={Object {}}
-                    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={Object {}}
-                    />
-                  </svg>
-                  Edit
-                </button>
-              </h2>
-              <p
-                className="mb-0"
-              >
-                <span
-                  className="ml-auto small text-muted"
-                >
-                  <svg
-                    aria-hidden="true"
-                    className="svg-inline--fa fa-eye fa-w-18 "
-                    data-icon="eye"
-                    data-prefix="far"
-                    focusable="false"
-                    role="img"
-                    style={Object {}}
-                    viewBox="0 0 576 512"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
-                      fill="currentColor"
-                      style={Object {}}
-                    />
-                  </svg>
-                   
-                  Everyone on localhost
-                </span>
-              </p>
-            </div>
-            <div
-              className="row align-items-stretch"
-            >
-              <div
-                className="col col-sm-6 d-flex align-items-stretch"
-              >
-                <div
-                  className="card mb-4 certificate flex-grow-1"
-                >
-                  <div
-                    className="certificate-type-illustration"
-                    style={
-                      Object {
-                        "backgroundImage": "url(icon/mock/path)",
-                      }
-                    }
-                  />
-                  <div
-                    className="card-body d-flex flex-column"
-                  >
-                    <div
-                      className="card-title"
-                    >
-                      <p
-                        className="small mb-0"
-                      >
-                        Verified Certificate
-                      </p>
-                      <h4
-                        className="certificate-title"
-                      >
-                        edX Demonstration Course
-                      </h4>
-                    </div>
-                    <p
-                      className="small mb-0"
-                    >
-                      From
-                    </p>
-                    <p
-                      className="h6 mb-4"
-                    >
-                      edX
-                    </p>
-                    <div
-                      className="flex-grow-1"
-                    />
-                    <p
-                      className="small mb-2"
-                    >
-                      Completed on 
-                      3/4/2019
-                    </p>
-                    <div>
-                      <a
-                        className="pgn__hyperlink default-link standalone-link btn btn-outline-primary"
-                        href="http://www.example.com/"
-                        onClick={[Function]}
-                        rel="noopener noreferrer"
-                        target="_blank"
-                      >
-                        View Certificate
-                        <span
-                          className="pgn__hyperlink__external-icon"
-                          title="Opens in a new tab"
-                        >
-                          <span
-                            className="pgn__icon"
-                            style={
-                              Object {
-                                "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>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<ProfilePage /> Renders correctly in various states test education edit with error 1`] = `
-<div
-  className="profile-page"
->
-  <div
-    className="profile-page-bg-banner bg-primary d-none d-md-block p-relative"
-  />
-  <div
-    className="container-fluid"
-  >
-    <div
-      className="row align-items-center pt-4 mb-4 pt-md-0 mb-md-0"
-    >
-      <div
-        className="col-auto col-md-4 col-lg-3"
-      >
-        <div
-          className="d-flex align-items-center d-md-block"
-        >
-          <div
-            className="profile-avatar-wrap position-relative"
-          >
-            <div
-              className="profile-avatar rounded-circle bg-light"
-            >
-              <div
-                className="profile-avatar-menu-container"
-              >
-                <div
-                  className="pgn__dropdown pgn__dropdown-light dropdown"
-                  data-testid="dropdown"
-                >
-                  <button
-                    aria-expanded={false}
-                    aria-haspopup={true}
-                    className="dropdown-toggle btn btn-primary"
-                    disabled={false}
-                    onClick={[Function]}
-                    type="button"
-                  >
-                    Change
-                  </button>
-                </div>
-              </div>
-              <img
-                alt="profile avatar"
-                className="w-100 h-100 d-block rounded-circle overflow-hidden"
-                data-hj-suppress={true}
-                src="http://localhost:18000/media/profile-images/d2a9bdc2ba165dcefc73265c54bf9a20_500.jpg?v=1552495012"
-                style={
-                  Object {
-                    "objectFit": "cover",
-                  }
-                }
-              />
-            </div>
-            <form
-              encType="multipart/form-data"
-              onSubmit={[Function]}
-            >
-              <input
-                accept=".jpg, .jpeg, .png"
-                className="d-none form-control-file"
-                id="photo-file"
-                name="file"
-                onChange={[Function]}
-                type="file"
-              />
-            </form>
-          </div>
-        </div>
-      </div>
-      <div
-        className="col pl-0"
-      >
-        <div
-          className="d-md-none"
-        >
-          <span
-            data-hj-suppress={true}
-          >
-            <h1
-              className="h2 mb-0 font-weight-bold"
-            >
-              staff
-            </h1>
-            <p
-              className="mb-0"
-            >
-              Member since 
-              2017
-            </p>
-            <hr
-              className="d-none d-md-block"
-            />
-          </span>
-        </div>
-        <div
-          className="d-none d-md-block float-right"
-        >
-          <a
-            className="pgn__hyperlink default-link standalone-link btn btn-primary"
-            href="http://localhost:18150/records"
-            onClick={[Function]}
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            View My Records
-            <span
-              className="pgn__hyperlink__external-icon"
-              title="Opens in a new tab"
-            >
-              <span
-                className="pgn__icon"
-                style={
-                  Object {
-                    "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>
-        </div>
-      </div>
-    </div>
-    <div
-      className="row"
-    >
-      <div
-        className="col-md-4 col-lg-4"
-      >
-        <div
-          className="d-none d-md-block mb-4"
-        >
-          <span
-            data-hj-suppress={true}
-          >
-            <h1
-              className="h2 mb-0 font-weight-bold"
-            >
-              staff
-            </h1>
-            <p
-              className="mb-0"
-            >
-              Member since 
-              2017
-            </p>
-            <hr
-              className="d-none d-md-block"
-            />
-          </span>
-        </div>
-        <div
-          className="d-md-none mb-4"
-        >
-          <a
-            className="pgn__hyperlink default-link standalone-link btn btn-primary"
-            href="http://localhost:18150/records"
-            onClick={[Function]}
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            View My Records
-            <span
-              className="pgn__hyperlink__external-icon"
-              title="Opens in a new tab"
-            >
-              <span
-                className="pgn__icon"
-                style={
-                  Object {
-                    "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>
-        </div>
-        <div
-          className="pgn-transition-replace-group position-relative mb-5"
-          style={
-            Object {
-              "height": null,
-            }
-          }
-        >
-          <div
-            style={
-              Object {
-                "padding": ".1px 0",
-              }
-            }
-          >
-            <div
-              className="editable-item-header mb-2"
-            >
-              <h2
-                className="edit-section-header"
-                id={null}
-              >
-                Full Name
-                <button
-                  className="float-right px-0 btn btn-link btn-sm"
-                  disabled={false}
-                  onClick={[Function]}
-                  style={
-                    Object {
-                      "marginTop": "-.35rem",
-                    }
-                  }
-                  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={Object {}}
-                    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={Object {}}
-                    />
-                  </svg>
-                  Edit
-                </button>
-              </h2>
-              <p
-                className="mb-0"
-              >
-                <span
-                  className="ml-auto small text-muted"
-                >
-                  <svg
-                    aria-hidden="true"
-                    className="svg-inline--fa fa-eye-slash fa-w-20 "
-                    data-icon="eye-slash"
-                    data-prefix="far"
-                    focusable="false"
-                    role="img"
-                    style={Object {}}
-                    viewBox="0 0 640 512"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M634 471L36 3.51A16 16 0 0 0 13.51 6l-10 12.49A16 16 0 0 0 6 41l598 467.49a16 16 0 0 0 22.49-2.49l10-12.49A16 16 0 0 0 634 471zM296.79 146.47l134.79 105.38C429.36 191.91 380.48 144 320 144a112.26 112.26 0 0 0-23.21 2.47zm46.42 219.07L208.42 260.16C210.65 320.09 259.53 368 320 368a113 113 0 0 0 23.21-2.46zM320 112c98.65 0 189.09 55 237.93 144a285.53 285.53 0 0 1-44 60.2l37.74 29.5a333.7 333.7 0 0 0 52.9-75.11 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64c-36.7 0-71.71 7-104.63 18.81l46.41 36.29c18.94-4.3 38.34-7.1 58.22-7.1zm0 288c-98.65 0-189.08-55-237.93-144a285.47 285.47 0 0 1 44.05-60.19l-37.74-29.5a333.6 333.6 0 0 0-52.89 75.1 32.35 32.35 0 0 0 0 29.19C89.72 376.41 197.08 448 320 448c36.7 0 71.71-7.05 104.63-18.81l-46.41-36.28C359.28 397.2 339.89 400 320 400z"
-                      fill="currentColor"
-                      style={Object {}}
-                    />
-                  </svg>
-                   
-                  Just me
-                </span>
-              </p>
-            </div>
-            <p
-              className="h5"
-              data-hj-suppress={true}
-            >
-              Lemon Seltzer
-            </p>
-            <small
-              className="form-text text-muted"
-            >
-              This is the name that appears in your account and on your certificates.
-            </small>
-          </div>
-        </div>
-        <div
-          className="pgn-transition-replace-group position-relative mb-5"
-          style={
-            Object {
-              "height": null,
-            }
-          }
-        >
-          <div
-            style={
-              Object {
-                "padding": ".1px 0",
-              }
-            }
-          >
-            <div
-              className="editable-item-header mb-2"
-            >
-              <h2
-                className="edit-section-header"
-                id={null}
-              >
-                Location
-                <button
-                  className="float-right px-0 btn btn-link btn-sm"
-                  disabled={false}
-                  onClick={[Function]}
-                  style={
-                    Object {
-                      "marginTop": "-.35rem",
-                    }
-                  }
-                  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={Object {}}
-                    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={Object {}}
-                    />
-                  </svg>
-                  Edit
-                </button>
-              </h2>
-              <p
-                className="mb-0"
-              >
-                <span
-                  className="ml-auto small text-muted"
-                >
-                  <svg
-                    aria-hidden="true"
-                    className="svg-inline--fa fa-eye fa-w-18 "
-                    data-icon="eye"
-                    data-prefix="far"
-                    focusable="false"
-                    role="img"
-                    style={Object {}}
-                    viewBox="0 0 576 512"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
-                      fill="currentColor"
-                      style={Object {}}
-                    />
-                  </svg>
-                   
-                  Everyone on localhost
-                </span>
-              </p>
-            </div>
-            <p
-              className="h5"
-              data-hj-suppress={true}
-            >
-              Montenegro
-            </p>
-          </div>
-        </div>
-        <div
-          className="pgn-transition-replace-group position-relative mb-5"
-          style={
-            Object {
-              "height": null,
-            }
-          }
-        >
-          <div
-            style={
-              Object {
-                "padding": ".1px 0",
-              }
-            }
-          >
-            <div
-              className="editable-item-header mb-2"
-            >
-              <h2
-                className="edit-section-header"
-                id={null}
-              >
-                Primary Language Spoken
-                <button
-                  className="float-right px-0 btn btn-link btn-sm"
-                  disabled={false}
-                  onClick={[Function]}
-                  style={
-                    Object {
-                      "marginTop": "-.35rem",
-                    }
-                  }
-                  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={Object {}}
-                    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={Object {}}
-                    />
-                  </svg>
-                  Edit
-                </button>
-              </h2>
-              <p
-                className="mb-0"
-              >
-                <span
-                  className="ml-auto small text-muted"
-                >
-                  <svg
-                    aria-hidden="true"
-                    className="svg-inline--fa fa-eye fa-w-18 "
-                    data-icon="eye"
-                    data-prefix="far"
-                    focusable="false"
-                    role="img"
-                    style={Object {}}
-                    viewBox="0 0 576 512"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
-                      fill="currentColor"
-                      style={Object {}}
-                    />
-                  </svg>
-                   
-                  Everyone on localhost
-                </span>
-              </p>
-            </div>
-            <p
-              className="h5"
-              data-hj-suppress={true}
-            >
-              Yoruba
-            </p>
-          </div>
-        </div>
-        <div
-          className="pgn-transition-replace-group position-relative mb-5"
-          style={
-            Object {
-              "height": null,
-            }
-          }
-        >
-          <div
-            style={
-              Object {
-                "padding": ".1px 0",
-              }
-            }
-          >
-            <div
-              aria-labelledby="levelOfEducation-label"
-              role="dialog"
-            >
-              <form
-                onSubmit={[Function]}
-              >
-                <div
-                  className="pgn__form-group"
-                >
-                  <label
-                    className="edit-section-header"
-                    htmlFor="levelOfEducation"
-                  >
-                    Education
-                  </label>
-                  <select
-                    className="form-control"
-                    data-hj-suppress={true}
-                    id="levelOfEducation"
-                    name="levelOfEducation"
-                    onChange={[Function]}
-                    value="el"
-                  >
-                    <option
-                      value=""
-                    >
-                       
-                    </option>
-                    <option
-                      value="p"
-                    >
-                      Doctorate
-                    </option>
-                    <option
-                      value="m"
-                    >
-                      Master's or professional degree
-                    </option>
-                    <option
-                      value="b"
-                    >
-                      Bachelor's Degree
-                    </option>
-                    <option
-                      value="a"
-                    >
-                      Associate's degree
-                    </option>
-                    <option
-                      value="hs"
-                    >
-                      Secondary/high school
-                    </option>
-                    <option
-                      value="jhs"
-                    >
-                      Junior secondary/junior high/middle school
-                    </option>
-                    <option
-                      value="el"
-                    >
-                      Elementary/primary school
-                    </option>
-                    <option
-                      value="none"
-                    >
-                      No formal education
-                    </option>
-                    <option
-                      value="other"
-                    >
-                      Other education
-                    </option>
-                  </select>
-                  <div
-                    className="pgn__form-control-description pgn__form-text pgn__form-text-invalid"
-                    id="levelOfEducation-3"
-                  >
-                    <div>
-                      education error
-                    </div>
-                  </div>
-                </div>
-                <div
-                  className="d-flex flex-row-reverse flex-wrap justify-content-end align-items-center"
-                >
-                  <div
-                    className="form-group d-flex flex-wrap"
-                  >
-                    <label
-                      className="col-form-label"
-                      htmlFor="visibilityLevelOfEducation"
-                    >
-                      Who can see this:
-                    </label>
-                    <span
-                      className="d-flex align-items-center"
-                    >
-                      <span
-                        className="d-inline-block ml-1 mr-2"
-                        style={
-                          Object {
-                            "width": "1.5rem",
-                          }
-                        }
-                      >
-                        <svg
-                          aria-hidden="true"
-                          className="svg-inline--fa fa-eye-slash fa-w-20 "
-                          data-icon="eye-slash"
-                          data-prefix="far"
-                          focusable="false"
-                          role="img"
-                          style={Object {}}
-                          viewBox="0 0 640 512"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M634 471L36 3.51A16 16 0 0 0 13.51 6l-10 12.49A16 16 0 0 0 6 41l598 467.49a16 16 0 0 0 22.49-2.49l10-12.49A16 16 0 0 0 634 471zM296.79 146.47l134.79 105.38C429.36 191.91 380.48 144 320 144a112.26 112.26 0 0 0-23.21 2.47zm46.42 219.07L208.42 260.16C210.65 320.09 259.53 368 320 368a113 113 0 0 0 23.21-2.46zM320 112c98.65 0 189.09 55 237.93 144a285.53 285.53 0 0 1-44 60.2l37.74 29.5a333.7 333.7 0 0 0 52.9-75.11 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64c-36.7 0-71.71 7-104.63 18.81l46.41 36.29c18.94-4.3 38.34-7.1 58.22-7.1zm0 288c-98.65 0-189.08-55-237.93-144a285.47 285.47 0 0 1 44.05-60.19l-37.74-29.5a333.6 333.6 0 0 0-52.89 75.1 32.35 32.35 0 0 0 0 29.19C89.72 376.41 197.08 448 320 448c36.7 0 71.71-7.05 104.63-18.81l-46.41-36.28C359.28 397.2 339.89 400 320 400z"
-                            fill="currentColor"
-                            style={Object {}}
-                          />
-                        </svg>
-                      </span>
-                      <select
-                        className="d-inline-block w-auto form-control"
-                        id="visibilityLevelOfEducation"
-                        name="visibilityLevelOfEducation"
-                        onChange={[Function]}
-                        type="select"
-                        value="private"
-                      >
-                        <option
-                          value="private"
-                        >
-                          Just me
-                        </option>
-                        <option
-                          value="all_users"
-                        >
-                          Everyone on localhost
-                        </option>
-                      </select>
-                    </span>
-                  </div>
-                  <div
-                    className="form-group flex-shrink-0 flex-grow-1"
-                  >
-                    <button
-                      aria-disabled={false}
-                      aria-live="assertive"
-                      className="pgn__stateful-btn pgn__stateful-btn-state-pending btn btn-primary"
-                      disabled={false}
-                      onClick={[Function]}
-                      type="submit"
-                    >
-                      <span
-                        className="d-flex align-items-center justify-content-center"
-                      >
-                        <span
-                          className="pgn__stateful-btn-icon"
-                        >
-                          <span
-                            className="pgn__icon icon-spin"
-                          >
-                            <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="M22 12A10 10 0 1 1 6.122 3.91l1.176 1.618A8 8 0 1 0 20 12h2Z"
-                                fill="currentColor"
-                              />
-                            </svg>
-                          </span>
-                        </span>
-                        <span>
-                          Saving
-                        </span>
-                      </span>
-                    </button>
-                    <button
-                      className="btn btn-link"
-                      disabled={false}
-                      onClick={[Function]}
-                      type="button"
-                    >
-                      Cancel
-                    </button>
-                  </div>
-                </div>
-              </form>
-            </div>
-          </div>
-        </div>
-        <div
-          className="pgn-transition-replace-group position-relative mb-5"
-          style={
-            Object {
-              "height": null,
-            }
-          }
-        >
-          <div
-            style={
-              Object {
-                "padding": ".1px 0",
-              }
-            }
-          >
-            <div
-              className="editable-item-header mb-2"
-            >
-              <h2
-                className="edit-section-header"
-                id={null}
-              >
-                Social Links
-                <button
-                  className="float-right px-0 btn btn-link btn-sm"
-                  disabled={false}
-                  onClick={[Function]}
-                  style={
-                    Object {
-                      "marginTop": "-.35rem",
-                    }
-                  }
-                  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={Object {}}
-                    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={Object {}}
-                    />
-                  </svg>
-                  Edit
-                </button>
-              </h2>
-              <p
-                className="mb-0"
-              >
-                <span
-                  className="ml-auto small text-muted"
-                >
-                  <svg
-                    aria-hidden="true"
-                    className="svg-inline--fa fa-eye fa-w-18 "
-                    data-icon="eye"
-                    data-prefix="far"
-                    focusable="false"
-                    role="img"
-                    style={Object {}}
-                    viewBox="0 0 576 512"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
-                      fill="currentColor"
-                      style={Object {}}
-                    />
-                  </svg>
-                   
-                  Everyone on localhost
-                </span>
-              </p>
-            </div>
-            <ul
-              className="list-unstyled"
-            >
-              <li
-                className="form-group"
-              >
-                <a
-                  className="font-weight-bold"
-                  href="https://www.twitter.com/ALOHA"
-                >
-                  <svg
-                    aria-hidden="true"
-                    className="svg-inline--fa fa-twitter fa-w-16 mr-2"
-                    data-icon="twitter"
-                    data-prefix="fab"
-                    focusable="false"
-                    role="img"
-                    style={Object {}}
-                    viewBox="0 0 512 512"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
-                      fill="currentColor"
-                      style={Object {}}
-                    />
-                  </svg>
-                  Twitter
-                </a>
-              </li>
-              <li
-                className="form-group"
-              >
-                <a
-                  className="font-weight-bold"
-                  href="https://www.facebook.com/aloha"
-                >
-                  <svg
-                    aria-hidden="true"
-                    className="svg-inline--fa fa-facebook fa-w-16 mr-2"
-                    data-icon="facebook"
-                    data-prefix="fab"
-                    focusable="false"
-                    role="img"
-                    style={Object {}}
-                    viewBox="0 0 512 512"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"
-                      fill="currentColor"
-                      style={Object {}}
-                    />
-                  </svg>
-                  Facebook
-                </a>
-              </li>
-              <li
-                className="form-group"
-              >
-                <div>
-                  <button
-                    className="pl-0 text-left btn btn-link"
-                    onClick={[Function]}
-                    onKeyDown={[Function]}
-                    tabIndex={0}
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      className="svg-inline--fa fa-plus fa-w-14 fa-xs mr-2"
-                      data-icon="plus"
-                      data-prefix="fas"
-                      focusable="false"
-                      role="img"
-                      style={Object {}}
-                      viewBox="0 0 448 512"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-                        fill="currentColor"
-                        style={Object {}}
-                      />
-                    </svg>
-                    Add 
-                    LinkedIn
-                  </button>
-                </div>
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-      <div
-        className="pt-md-3 col-md-8 col-lg-7 offset-lg-1"
-      >
-        <div
-          className="pgn-transition-replace-group position-relative mb-5"
-          style={
-            Object {
-              "height": null,
-            }
-          }
-        >
-          <div
-            style={
-              Object {
-                "padding": ".1px 0",
-              }
-            }
-          >
-            <div
-              className="editable-item-header mb-2"
-            >
-              <h2
-                className="edit-section-header"
-                id={null}
-              >
-                About Me
-                <button
-                  className="float-right px-0 btn btn-link btn-sm"
-                  disabled={false}
-                  onClick={[Function]}
-                  style={
-                    Object {
-                      "marginTop": "-.35rem",
-                    }
-                  }
-                  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={Object {}}
-                    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={Object {}}
-                    />
-                  </svg>
-                  Edit
-                </button>
-              </h2>
-              <p
-                className="mb-0"
-              >
-                <span
-                  className="ml-auto small text-muted"
-                >
-                  <svg
-                    aria-hidden="true"
-                    className="svg-inline--fa fa-eye fa-w-18 "
-                    data-icon="eye"
-                    data-prefix="far"
-                    focusable="false"
-                    role="img"
-                    style={Object {}}
-                    viewBox="0 0 576 512"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
-                      fill="currentColor"
-                      style={Object {}}
-                    />
-                  </svg>
-                   
-                  Everyone on localhost
-                </span>
-              </p>
-            </div>
-            <p
-              className="lead"
-              data-hj-suppress={true}
-            >
-              This is my bio
-            </p>
-          </div>
-        </div>
-        <div
-          className="pgn-transition-replace-group position-relative mb-4"
-          style={
-            Object {
-              "height": null,
-            }
-          }
-        >
-          <div
-            style={
-              Object {
-                "padding": ".1px 0",
-              }
-            }
-          >
-            <div
-              className="editable-item-header mb-2"
-            >
-              <h2
-                className="edit-section-header"
-                id={null}
-              >
-                My Certificates
-                <button
-                  className="float-right px-0 btn btn-link btn-sm"
-                  disabled={false}
-                  onClick={[Function]}
-                  style={
-                    Object {
-                      "marginTop": "-.35rem",
-                    }
-                  }
-                  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={Object {}}
-                    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={Object {}}
-                    />
-                  </svg>
-                  Edit
-                </button>
-              </h2>
-              <p
-                className="mb-0"
-              >
-                <span
-                  className="ml-auto small text-muted"
-                >
-                  <svg
-                    aria-hidden="true"
-                    className="svg-inline--fa fa-eye fa-w-18 "
-                    data-icon="eye"
-                    data-prefix="far"
-                    focusable="false"
-                    role="img"
-                    style={Object {}}
-                    viewBox="0 0 576 512"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
-                      fill="currentColor"
-                      style={Object {}}
-                    />
-                  </svg>
-                   
-                  Everyone on localhost
-                </span>
-              </p>
-            </div>
-            <div
-              className="row align-items-stretch"
-            >
-              <div
-                className="col col-sm-6 d-flex align-items-stretch"
-              >
-                <div
-                  className="card mb-4 certificate flex-grow-1"
-                >
-                  <div
-                    className="certificate-type-illustration"
-                    style={
-                      Object {
-                        "backgroundImage": "url(icon/mock/path)",
-                      }
-                    }
-                  />
-                  <div
-                    className="card-body d-flex flex-column"
-                  >
-                    <div
-                      className="card-title"
-                    >
-                      <p
-                        className="small mb-0"
-                      >
-                        Verified Certificate
-                      </p>
-                      <h4
-                        className="certificate-title"
-                      >
-                        edX Demonstration Course
-                      </h4>
-                    </div>
-                    <p
-                      className="small mb-0"
-                    >
-                      From
-                    </p>
-                    <p
-                      className="h6 mb-4"
-                    >
-                      edX
-                    </p>
-                    <div
-                      className="flex-grow-1"
-                    />
-                    <p
-                      className="small mb-2"
-                    >
-                      Completed on 
-                      3/4/2019
-                    </p>
-                    <div>
-                      <a
-                        className="pgn__hyperlink default-link standalone-link btn btn-outline-primary"
-                        href="http://www.example.com/"
-                        onClick={[Function]}
-                        rel="noopener noreferrer"
-                        target="_blank"
-                      >
-                        View Certificate
-                        <span
-                          className="pgn__hyperlink__external-icon"
-                          title="Opens in a new tab"
-                        >
-                          <span
-                            className="pgn__icon"
-                            style={
-                              Object {
-                                "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>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<ProfilePage /> Renders correctly in various states test preferreded language edit with error 1`] = `
-<div
-  className="profile-page"
->
-  <div
-    className="profile-page-bg-banner bg-primary d-none d-md-block p-relative"
-  />
-  <div
-    className="container-fluid"
-  >
-    <div
-      className="row align-items-center pt-4 mb-4 pt-md-0 mb-md-0"
-    >
-      <div
-        className="col-auto col-md-4 col-lg-3"
-      >
-        <div
-          className="d-flex align-items-center d-md-block"
-        >
-          <div
-            className="profile-avatar-wrap position-relative"
-          >
-            <div
-              className="profile-avatar rounded-circle bg-light"
-            >
-              <div
-                className="profile-avatar-menu-container"
-              >
-                <div
-                  className="pgn__dropdown pgn__dropdown-light dropdown"
-                  data-testid="dropdown"
-                >
-                  <button
-                    aria-expanded={false}
-                    aria-haspopup={true}
-                    className="dropdown-toggle btn btn-primary"
-                    disabled={false}
-                    onClick={[Function]}
-                    type="button"
-                  >
-                    Change
-                  </button>
-                </div>
-              </div>
-              <img
-                alt="profile avatar"
-                className="w-100 h-100 d-block rounded-circle overflow-hidden"
-                data-hj-suppress={true}
-                src="http://localhost:18000/media/profile-images/d2a9bdc2ba165dcefc73265c54bf9a20_500.jpg?v=1552495012"
-                style={
-                  Object {
-                    "objectFit": "cover",
-                  }
-                }
-              />
-            </div>
-            <form
-              encType="multipart/form-data"
-              onSubmit={[Function]}
-            >
-              <input
-                accept=".jpg, .jpeg, .png"
-                className="d-none form-control-file"
-                id="photo-file"
-                name="file"
-                onChange={[Function]}
-                type="file"
-              />
-            </form>
-          </div>
-        </div>
-      </div>
-      <div
-        className="col pl-0"
-      >
-        <div
-          className="d-md-none"
-        >
-          <span
-            data-hj-suppress={true}
-          >
-            <h1
-              className="h2 mb-0 font-weight-bold"
-            >
-              staff
-            </h1>
-            <p
-              className="mb-0"
-            >
-              Member since 
-              2017
-            </p>
-            <hr
-              className="d-none d-md-block"
-            />
-          </span>
-        </div>
-        <div
-          className="d-none d-md-block float-right"
-        >
-          <a
-            className="pgn__hyperlink default-link standalone-link btn btn-primary"
-            href="http://localhost:18150/records"
-            onClick={[Function]}
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            View My Records
-            <span
-              className="pgn__hyperlink__external-icon"
-              title="Opens in a new tab"
-            >
-              <span
-                className="pgn__icon"
-                style={
-                  Object {
-                    "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>
-        </div>
-      </div>
-    </div>
-    <div
-      className="row"
-    >
-      <div
-        className="col-md-4 col-lg-4"
-      >
-        <div
-          className="d-none d-md-block mb-4"
-        >
-          <span
-            data-hj-suppress={true}
-          >
-            <h1
-              className="h2 mb-0 font-weight-bold"
-            >
-              staff
-            </h1>
-            <p
-              className="mb-0"
-            >
-              Member since 
-              2017
-            </p>
-            <hr
-              className="d-none d-md-block"
-            />
-          </span>
-        </div>
-        <div
-          className="d-md-none mb-4"
-        >
-          <a
-            className="pgn__hyperlink default-link standalone-link btn btn-primary"
-            href="http://localhost:18150/records"
-            onClick={[Function]}
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            View My Records
-            <span
-              className="pgn__hyperlink__external-icon"
-              title="Opens in a new tab"
-            >
-              <span
-                className="pgn__icon"
-                style={
-                  Object {
-                    "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>
-        </div>
-        <div
-          className="pgn-transition-replace-group position-relative mb-5"
-          style={
-            Object {
-              "height": null,
-            }
-          }
-        >
-          <div
-            style={
-              Object {
-                "padding": ".1px 0",
-              }
-            }
-          >
-            <div
-              className="editable-item-header mb-2"
-            >
-              <h2
-                className="edit-section-header"
-                id={null}
-              >
-                Full Name
-                <button
-                  className="float-right px-0 btn btn-link btn-sm"
-                  disabled={false}
-                  onClick={[Function]}
-                  style={
-                    Object {
-                      "marginTop": "-.35rem",
-                    }
-                  }
-                  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={Object {}}
-                    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={Object {}}
-                    />
-                  </svg>
-                  Edit
-                </button>
-              </h2>
-              <p
-                className="mb-0"
-              >
-                <span
-                  className="ml-auto small text-muted"
-                >
-                  <svg
-                    aria-hidden="true"
-                    className="svg-inline--fa fa-eye-slash fa-w-20 "
-                    data-icon="eye-slash"
-                    data-prefix="far"
-                    focusable="false"
-                    role="img"
-                    style={Object {}}
-                    viewBox="0 0 640 512"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M634 471L36 3.51A16 16 0 0 0 13.51 6l-10 12.49A16 16 0 0 0 6 41l598 467.49a16 16 0 0 0 22.49-2.49l10-12.49A16 16 0 0 0 634 471zM296.79 146.47l134.79 105.38C429.36 191.91 380.48 144 320 144a112.26 112.26 0 0 0-23.21 2.47zm46.42 219.07L208.42 260.16C210.65 320.09 259.53 368 320 368a113 113 0 0 0 23.21-2.46zM320 112c98.65 0 189.09 55 237.93 144a285.53 285.53 0 0 1-44 60.2l37.74 29.5a333.7 333.7 0 0 0 52.9-75.11 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64c-36.7 0-71.71 7-104.63 18.81l46.41 36.29c18.94-4.3 38.34-7.1 58.22-7.1zm0 288c-98.65 0-189.08-55-237.93-144a285.47 285.47 0 0 1 44.05-60.19l-37.74-29.5a333.6 333.6 0 0 0-52.89 75.1 32.35 32.35 0 0 0 0 29.19C89.72 376.41 197.08 448 320 448c36.7 0 71.71-7.05 104.63-18.81l-46.41-36.28C359.28 397.2 339.89 400 320 400z"
-                      fill="currentColor"
-                      style={Object {}}
-                    />
-                  </svg>
-                   
-                  Just me
-                </span>
-              </p>
-            </div>
-            <p
-              className="h5"
-              data-hj-suppress={true}
-            >
-              Lemon Seltzer
-            </p>
-            <small
-              className="form-text text-muted"
-            >
-              This is the name that appears in your account and on your certificates.
-            </small>
-          </div>
-        </div>
-        <div
-          className="pgn-transition-replace-group position-relative mb-5"
-          style={
-            Object {
-              "height": null,
-            }
-          }
-        >
-          <div
-            style={
-              Object {
-                "padding": ".1px 0",
-              }
-            }
-          >
-            <div
-              className="editable-item-header mb-2"
-            >
-              <h2
-                className="edit-section-header"
-                id={null}
-              >
-                Location
-                <button
-                  className="float-right px-0 btn btn-link btn-sm"
-                  disabled={false}
-                  onClick={[Function]}
-                  style={
-                    Object {
-                      "marginTop": "-.35rem",
-                    }
-                  }
-                  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={Object {}}
-                    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={Object {}}
-                    />
-                  </svg>
-                  Edit
-                </button>
-              </h2>
-              <p
-                className="mb-0"
-              >
-                <span
-                  className="ml-auto small text-muted"
-                >
-                  <svg
-                    aria-hidden="true"
-                    className="svg-inline--fa fa-eye fa-w-18 "
-                    data-icon="eye"
-                    data-prefix="far"
-                    focusable="false"
-                    role="img"
-                    style={Object {}}
-                    viewBox="0 0 576 512"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
-                      fill="currentColor"
-                      style={Object {}}
-                    />
-                  </svg>
-                   
-                  Everyone on localhost
-                </span>
-              </p>
-            </div>
-            <p
-              className="h5"
-              data-hj-suppress={true}
-            >
-              Montenegro
-            </p>
-          </div>
-        </div>
-        <div
-          className="pgn-transition-replace-group position-relative mb-5"
-          style={
-            Object {
-              "height": null,
-            }
-          }
-        >
-          <div
-            style={
-              Object {
-                "padding": ".1px 0",
-              }
-            }
-          >
-            <div
-              aria-labelledby="languageProficiencies-label"
-              role="dialog"
-            >
-              <form
-                onSubmit={[Function]}
-              >
-                <div
-                  className="pgn__form-group"
-                >
-                  <label
-                    className="edit-section-header"
-                    htmlFor="languageProficiencies"
-                  >
-                    Primary Language Spoken
-                  </label>
-                  <select
-                    className="form-control"
-                    data-hj-suppress={true}
-                    id="languageProficiencies"
-                    name="languageProficiencies"
-                    onChange={[Function]}
-                    value="yo"
-                  >
-                    <option
-                      value=""
-                    >
-                       
-                    </option>
-                    <option
-                      value="aa"
-                    >
-                      Afar
-                    </option>
-                    <option
-                      value="ab"
-                    >
-                      Abkhazian
-                    </option>
-                    <option
-                      value="ae"
-                    >
-                      Avestan
-                    </option>
-                    <option
-                      value="af"
-                    >
-                      Afrikaans
-                    </option>
-                    <option
-                      value="ak"
-                    >
-                      Akan
-                    </option>
-                    <option
-                      value="am"
-                    >
-                      Amharic
-                    </option>
-                    <option
-                      value="an"
-                    >
-                      Aragonese
-                    </option>
-                    <option
-                      value="ar"
-                    >
-                      Arabic
-                    </option>
-                    <option
-                      value="as"
-                    >
-                      Assamese
-                    </option>
-                    <option
-                      value="av"
-                    >
-                      Avaric
-                    </option>
-                    <option
-                      value="ay"
-                    >
-                      Aymara
-                    </option>
-                    <option
-                      value="az"
-                    >
-                      Azerbaijani
-                    </option>
-                    <option
-                      value="ba"
-                    >
-                      Bashkir
-                    </option>
-                    <option
-                      value="be"
-                    >
-                      Belarusian
-                    </option>
-                    <option
-                      value="bg"
-                    >
-                      Bulgarian
-                    </option>
-                    <option
-                      value="bh"
-                    >
-                      Bihari languages
-                    </option>
-                    <option
-                      value="bi"
-                    >
-                      Bislama
-                    </option>
-                    <option
-                      value="bm"
-                    >
-                      Bambara
-                    </option>
-                    <option
-                      value="bn"
-                    >
-                      Bengali
-                    </option>
-                    <option
-                      value="bo"
-                    >
-                      Tibetan
-                    </option>
-                    <option
-                      value="br"
-                    >
-                      Breton
-                    </option>
-                    <option
-                      value="bs"
-                    >
-                      Bosnian
-                    </option>
-                    <option
-                      value="ca"
-                    >
-                      Catalan
-                    </option>
-                    <option
-                      value="ce"
-                    >
-                      Chechen
-                    </option>
-                    <option
-                      value="ch"
-                    >
-                      Chamorro
-                    </option>
-                    <option
-                      value="co"
-                    >
-                      Corsican
-                    </option>
-                    <option
-                      value="cr"
-                    >
-                      Cree
-                    </option>
-                    <option
-                      value="cs"
-                    >
-                      Czech
-                    </option>
-                    <option
-                      value="cu"
-                    >
-                      Church Slavic
-                    </option>
-                    <option
-                      value="cv"
-                    >
-                      Chuvash
-                    </option>
-                    <option
-                      value="cy"
-                    >
-                      Welsh
-                    </option>
-                    <option
-                      value="da"
-                    >
-                      Danish
-                    </option>
-                    <option
-                      value="de"
-                    >
-                      German
-                    </option>
-                    <option
-                      value="dv"
-                    >
-                      Maldivian
-                    </option>
-                    <option
-                      value="dz"
-                    >
-                      Dzongkha
-                    </option>
-                    <option
-                      value="ee"
-                    >
-                      Ewe
-                    </option>
-                    <option
-                      value="el"
-                    >
-                      Greek (modern)
-                    </option>
-                    <option
-                      value="en"
-                    >
-                      English
-                    </option>
-                    <option
-                      value="eo"
-                    >
-                      Esperanto
-                    </option>
-                    <option
-                      value="es"
-                    >
-                      Spanish
-                    </option>
-                    <option
-                      value="et"
-                    >
-                      Estonian
-                    </option>
-                    <option
-                      value="eu"
-                    >
-                      Basque
-                    </option>
-                    <option
-                      value="fa"
-                    >
-                      Persian
-                    </option>
-                    <option
-                      value="ff"
-                    >
-                      Fulah
-                    </option>
-                    <option
-                      value="fi"
-                    >
-                      Finnish
-                    </option>
-                    <option
-                      value="fj"
-                    >
-                      Fijian
-                    </option>
-                    <option
-                      value="fo"
-                    >
-                      Faroese
-                    </option>
-                    <option
-                      value="fr"
-                    >
-                      French
-                    </option>
-                    <option
-                      value="fy"
-                    >
-                      Western Frisian
-                    </option>
-                    <option
-                      value="ga"
-                    >
-                      Irish
-                    </option>
-                    <option
-                      value="gd"
-                    >
-                      Gaelic
-                    </option>
-                    <option
-                      value="gl"
-                    >
-                      Galician
-                    </option>
-                    <option
-                      value="gn"
-                    >
-                      Guaraní
-                    </option>
-                    <option
-                      value="gu"
-                    >
-                      Gujarati
-                    </option>
-                    <option
-                      value="gv"
-                    >
-                      Manx
-                    </option>
-                    <option
-                      value="ha"
-                    >
-                      Hausa
-                    </option>
-                    <option
-                      value="he"
-                    >
-                      Hebrew (modern)
-                    </option>
-                    <option
-                      value="hi"
-                    >
-                      Hindi
-                    </option>
-                    <option
-                      value="ho"
-                    >
-                      Hiri Motu
-                    </option>
-                    <option
-                      value="hr"
-                    >
-                      Croatian
-                    </option>
-                    <option
-                      value="ht"
-                    >
-                      Haitian Creole
-                    </option>
-                    <option
-                      value="hu"
-                    >
-                      Hungarian
-                    </option>
-                    <option
-                      value="hy"
-                    >
-                      Armenian
-                    </option>
-                    <option
-                      value="hz"
-                    >
-                      Herero
-                    </option>
-                    <option
-                      value="ia"
-                    >
-                      Interlingua
-                    </option>
-                    <option
-                      value="id"
-                    >
-                      Indonesian
-                    </option>
-                    <option
-                      value="ie"
-                    >
-                      Interlingue
-                    </option>
-                    <option
-                      value="ig"
-                    >
-                      Igbo
-                    </option>
-                    <option
-                      value="ii"
-                    >
-                      Nuosu
-                    </option>
-                    <option
-                      value="ik"
-                    >
-                      Inupiaq
-                    </option>
-                    <option
-                      value="io"
-                    >
-                      Ido
-                    </option>
-                    <option
-                      value="is"
-                    >
-                      Icelandic
-                    </option>
-                    <option
-                      value="it"
-                    >
-                      Italian
-                    </option>
-                    <option
-                      value="iu"
-                    >
-                      Inuktitut
-                    </option>
-                    <option
-                      value="ja"
-                    >
-                      Japanese
-                    </option>
-                    <option
-                      value="jv"
-                    >
-                      Javanese
-                    </option>
-                    <option
-                      value="ka"
-                    >
-                      Georgian
-                    </option>
-                    <option
-                      value="kg"
-                    >
-                      Kongo
-                    </option>
-                    <option
-                      value="ki"
-                    >
-                      Kikuyu
-                    </option>
-                    <option
-                      value="kj"
-                    >
-                      Kwanyama
-                    </option>
-                    <option
-                      value="kk"
-                    >
-                      Kazakh
-                    </option>
-                    <option
-                      value="kl"
-                    >
-                      Greenlandic
-                    </option>
-                    <option
-                      value="km"
-                    >
-                      Central Khmer
-                    </option>
-                    <option
-                      value="kn"
-                    >
-                      Kannada
-                    </option>
-                    <option
-                      value="ko"
-                    >
-                      Korean
-                    </option>
-                    <option
-                      value="kr"
-                    >
-                      Kanuri
-                    </option>
-                    <option
-                      value="ks"
-                    >
-                      Kashmiri
-                    </option>
-                    <option
-                      value="ku"
-                    >
-                      Kurdish
-                    </option>
-                    <option
-                      value="kv"
-                    >
-                      Komi
-                    </option>
-                    <option
-                      value="kw"
-                    >
-                      Cornish
-                    </option>
-                    <option
-                      value="ky"
-                    >
-                      Kyrgyz
-                    </option>
-                    <option
-                      value="la"
-                    >
-                      Latin
-                    </option>
-                    <option
-                      value="lb"
-                    >
-                      Luxembourgish
-                    </option>
-                    <option
-                      value="lg"
-                    >
-                      Ganda
-                    </option>
-                    <option
-                      value="li"
-                    >
-                      Limburgish
-                    </option>
-                    <option
-                      value="ln"
-                    >
-                      Lingala
-                    </option>
-                    <option
-                      value="lo"
-                    >
-                      Lao
-                    </option>
-                    <option
-                      value="lt"
-                    >
-                      Lithuanian
-                    </option>
-                    <option
-                      value="lu"
-                    >
-                      Luba-Katanga
-                    </option>
-                    <option
-                      value="lv"
-                    >
-                      Latvian
-                    </option>
-                    <option
-                      value="mg"
-                    >
-                      Malagasy
-                    </option>
-                    <option
-                      value="mh"
-                    >
-                      Marshallese
-                    </option>
-                    <option
-                      value="mi"
-                    >
-                      Maori
-                    </option>
-                    <option
-                      value="mk"
-                    >
-                      Macedonian
-                    </option>
-                    <option
-                      value="ml"
-                    >
-                      Malayalam
-                    </option>
-                    <option
-                      value="mn"
-                    >
-                      Mongolian
-                    </option>
-                    <option
-                      value="mr"
-                    >
-                      Marathi
-                    </option>
-                    <option
-                      value="ms"
-                    >
-                      Malay
-                    </option>
-                    <option
-                      value="mt"
-                    >
-                      Maltese
-                    </option>
-                    <option
-                      value="my"
-                    >
-                      Burmese
-                    </option>
-                    <option
-                      value="na"
-                    >
-                      Nauru
-                    </option>
-                    <option
-                      value="nb"
-                    >
-                      Bokmål
-                    </option>
-                    <option
-                      value="nd"
-                    >
-                      North Ndebele
-                    </option>
-                    <option
-                      value="ne"
-                    >
-                      Nepali
-                    </option>
-                    <option
-                      value="ng"
-                    >
-                      Ndonga
-                    </option>
-                    <option
-                      value="nl"
-                    >
-                      Dutch
-                    </option>
-                    <option
-                      value="nn"
-                    >
-                      Norwegian Nynorsk
-                    </option>
-                    <option
-                      value="no"
-                    >
-                      Norwegian
-                    </option>
-                    <option
-                      value="nr"
-                    >
-                      South Ndebele
-                    </option>
-                    <option
-                      value="nv"
-                    >
-                      Navajo
-                    </option>
-                    <option
-                      value="ny"
-                    >
-                      Nyanja
-                    </option>
-                    <option
-                      value="oc"
-                    >
-                      Occitan
-                    </option>
-                    <option
-                      value="oj"
-                    >
-                      Ojibwa
-                    </option>
-                    <option
-                      value="om"
-                    >
-                      Oromo
-                    </option>
-                    <option
-                      value="or"
-                    >
-                      Oriya
-                    </option>
-                    <option
-                      value="os"
-                    >
-                      Ossetian
-                    </option>
-                    <option
-                      value="pa"
-                    >
-                      Punjabi
-                    </option>
-                    <option
-                      value="pi"
-                    >
-                      Pali
-                    </option>
-                    <option
-                      value="pl"
-                    >
-                      Polish
-                    </option>
-                    <option
-                      value="ps"
-                    >
-                      Pashto
-                    </option>
-                    <option
-                      value="pt"
-                    >
-                      Portuguese
-                    </option>
-                    <option
-                      value="qu"
-                    >
-                      Quechua
-                    </option>
-                    <option
-                      value="rm"
-                    >
-                      Romansh
-                    </option>
-                    <option
-                      value="rn"
-                    >
-                      Rundi
-                    </option>
-                    <option
-                      value="ro"
-                    >
-                      Romanian
-                    </option>
-                    <option
-                      value="ru"
-                    >
-                      Russian
-                    </option>
-                    <option
-                      value="rw"
-                    >
-                      Kinyarwanda
-                    </option>
-                    <option
-                      value="sa"
-                    >
-                      Sanskrit
-                    </option>
-                    <option
-                      value="sc"
-                    >
-                      Sardinian
-                    </option>
-                    <option
-                      value="sd"
-                    >
-                      Sindhi
-                    </option>
-                    <option
-                      value="se"
-                    >
-                      Northern Sami
-                    </option>
-                    <option
-                      value="sg"
-                    >
-                      Sango
-                    </option>
-                    <option
-                      value="si"
-                    >
-                      Sinhalese
-                    </option>
-                    <option
-                      value="sk"
-                    >
-                      Slovak
-                    </option>
-                    <option
-                      value="sl"
-                    >
-                      Slovenian
-                    </option>
-                    <option
-                      value="sm"
-                    >
-                      Samoan
-                    </option>
-                    <option
-                      value="sn"
-                    >
-                      Shona
-                    </option>
-                    <option
-                      value="so"
-                    >
-                      Somali
-                    </option>
-                    <option
-                      value="sq"
-                    >
-                      Albanian
-                    </option>
-                    <option
-                      value="sr"
-                    >
-                      Serbian
-                    </option>
-                    <option
-                      value="ss"
-                    >
-                      Swati
-                    </option>
-                    <option
-                      value="st"
-                    >
-                      Southern Sotho
-                    </option>
-                    <option
-                      value="su"
-                    >
-                      Sundanese
-                    </option>
-                    <option
-                      value="sv"
-                    >
-                      Swedish
-                    </option>
-                    <option
-                      value="sw"
-                    >
-                      Swahili
-                    </option>
-                    <option
-                      value="ta"
-                    >
-                      Tamil
-                    </option>
-                    <option
-                      value="te"
-                    >
-                      Telugu
-                    </option>
-                    <option
-                      value="tg"
-                    >
-                      Tajik
-                    </option>
-                    <option
-                      value="th"
-                    >
-                      Thai
-                    </option>
-                    <option
-                      value="ti"
-                    >
-                      Tigrinya
-                    </option>
-                    <option
-                      value="tk"
-                    >
-                      Turkmen
-                    </option>
-                    <option
-                      value="tl"
-                    >
-                      Tagalog
-                    </option>
-                    <option
-                      value="tn"
-                    >
-                      Tswana
-                    </option>
-                    <option
-                      value="to"
-                    >
-                      Tonga
-                    </option>
-                    <option
-                      value="tr"
-                    >
-                      Turkish
-                    </option>
-                    <option
-                      value="ts"
-                    >
-                      Tsonga
-                    </option>
-                    <option
-                      value="tt"
-                    >
-                      Tatar
-                    </option>
-                    <option
-                      value="tw"
-                    >
-                      Twi
-                    </option>
-                    <option
-                      value="ty"
-                    >
-                      Tahitian
-                    </option>
-                    <option
-                      value="ug"
-                    >
-                      Uyghur
-                    </option>
-                    <option
-                      value="uk"
-                    >
-                      Ukrainian
-                    </option>
-                    <option
-                      value="ur"
-                    >
-                      Urdu
-                    </option>
-                    <option
-                      value="uz"
-                    >
-                      Uzbek
-                    </option>
-                    <option
-                      value="ve"
-                    >
-                      Venda
-                    </option>
-                    <option
-                      value="vi"
-                    >
-                      Vietnamese
-                    </option>
-                    <option
-                      value="vo"
-                    >
-                      Volapük
-                    </option>
-                    <option
-                      value="wa"
-                    >
-                      Walloon
-                    </option>
-                    <option
-                      value="wo"
-                    >
-                      Wolof
-                    </option>
-                    <option
-                      value="xh"
-                    >
-                      Xhosa
-                    </option>
-                    <option
-                      value="yi"
-                    >
-                      Yiddish
-                    </option>
-                    <option
-                      value="yo"
-                    >
-                      Yoruba
-                    </option>
-                    <option
-                      value="za"
-                    >
-                      Zhuang
-                    </option>
-                    <option
-                      value="zh"
-                    >
-                      Chinese
-                    </option>
-                    <option
-                      value="zu"
-                    >
-                      Zulu
-                    </option>
-                  </select>
-                  <div
-                    className="pgn__form-control-description pgn__form-text pgn__form-text-invalid"
-                    id="languageProficiencies-4"
-                  >
-                    <div>
-                      preferred language error
-                    </div>
-                  </div>
-                </div>
-                <div
-                  className="d-flex flex-row-reverse flex-wrap justify-content-end align-items-center"
-                >
-                  <div
-                    className="form-group d-flex flex-wrap"
-                  >
-                    <label
-                      className="col-form-label"
-                      htmlFor="visibilityLanguageProficiencies"
-                    >
-                      Who can see this:
-                    </label>
-                    <span
-                      className="d-flex align-items-center"
-                    >
-                      <span
-                        className="d-inline-block ml-1 mr-2"
-                        style={
-                          Object {
-                            "width": "1.5rem",
-                          }
-                        }
-                      >
-                        <svg
-                          aria-hidden="true"
-                          className="svg-inline--fa fa-eye fa-w-18 "
-                          data-icon="eye"
-                          data-prefix="far"
-                          focusable="false"
-                          role="img"
-                          style={Object {}}
-                          viewBox="0 0 576 512"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
-                            fill="currentColor"
-                            style={Object {}}
-                          />
-                        </svg>
-                      </span>
-                      <select
-                        className="d-inline-block w-auto form-control"
-                        id="visibilityLanguageProficiencies"
-                        name="visibilityLanguageProficiencies"
-                        onChange={[Function]}
-                        type="select"
-                        value="all_users"
-                      >
-                        <option
-                          value="private"
-                        >
-                          Just me
-                        </option>
-                        <option
-                          value="all_users"
-                        >
-                          Everyone on localhost
-                        </option>
-                      </select>
-                    </span>
-                  </div>
-                  <div
-                    className="form-group flex-shrink-0 flex-grow-1"
-                  >
-                    <button
-                      aria-disabled={false}
-                      aria-live="assertive"
-                      className="pgn__stateful-btn pgn__stateful-btn-state-pending btn btn-primary"
-                      disabled={false}
-                      onClick={[Function]}
-                      type="submit"
-                    >
-                      <span
-                        className="d-flex align-items-center justify-content-center"
-                      >
-                        <span
-                          className="pgn__stateful-btn-icon"
-                        >
-                          <span
-                            className="pgn__icon icon-spin"
-                          >
-                            <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="M22 12A10 10 0 1 1 6.122 3.91l1.176 1.618A8 8 0 1 0 20 12h2Z"
-                                fill="currentColor"
-                              />
-                            </svg>
-                          </span>
-                        </span>
-                        <span>
-                          Saving
-                        </span>
-                      </span>
-                    </button>
-                    <button
-                      className="btn btn-link"
-                      disabled={false}
-                      onClick={[Function]}
-                      type="button"
-                    >
-                      Cancel
-                    </button>
-                  </div>
-                </div>
-              </form>
-            </div>
-          </div>
-        </div>
-        <div
-          className="pgn-transition-replace-group position-relative mb-5"
-          style={
-            Object {
-              "height": null,
-            }
-          }
-        >
-          <div
-            style={
-              Object {
-                "padding": ".1px 0",
-              }
-            }
-          >
-            <div
-              className="editable-item-header mb-2"
-            >
-              <h2
-                className="edit-section-header"
-                id={null}
-              >
-                Education
-                <button
-                  className="float-right px-0 btn btn-link btn-sm"
-                  disabled={false}
-                  onClick={[Function]}
-                  style={
-                    Object {
-                      "marginTop": "-.35rem",
-                    }
-                  }
-                  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={Object {}}
-                    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={Object {}}
-                    />
-                  </svg>
-                  Edit
-                </button>
-              </h2>
-              <p
-                className="mb-0"
-              >
-                <span
-                  className="ml-auto small text-muted"
-                >
-                  <svg
-                    aria-hidden="true"
-                    className="svg-inline--fa fa-eye-slash fa-w-20 "
-                    data-icon="eye-slash"
-                    data-prefix="far"
-                    focusable="false"
-                    role="img"
-                    style={Object {}}
-                    viewBox="0 0 640 512"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M634 471L36 3.51A16 16 0 0 0 13.51 6l-10 12.49A16 16 0 0 0 6 41l598 467.49a16 16 0 0 0 22.49-2.49l10-12.49A16 16 0 0 0 634 471zM296.79 146.47l134.79 105.38C429.36 191.91 380.48 144 320 144a112.26 112.26 0 0 0-23.21 2.47zm46.42 219.07L208.42 260.16C210.65 320.09 259.53 368 320 368a113 113 0 0 0 23.21-2.46zM320 112c98.65 0 189.09 55 237.93 144a285.53 285.53 0 0 1-44 60.2l37.74 29.5a333.7 333.7 0 0 0 52.9-75.11 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64c-36.7 0-71.71 7-104.63 18.81l46.41 36.29c18.94-4.3 38.34-7.1 58.22-7.1zm0 288c-98.65 0-189.08-55-237.93-144a285.47 285.47 0 0 1 44.05-60.19l-37.74-29.5a333.6 333.6 0 0 0-52.89 75.1 32.35 32.35 0 0 0 0 29.19C89.72 376.41 197.08 448 320 448c36.7 0 71.71-7.05 104.63-18.81l-46.41-36.28C359.28 397.2 339.89 400 320 400z"
-                      fill="currentColor"
-                      style={Object {}}
-                    />
-                  </svg>
-                   
-                  Just me
-                </span>
-              </p>
-            </div>
-            <p
-              className="h5"
-              data-hj-suppress={true}
-            >
-              Elementary/primary school
-            </p>
-          </div>
-        </div>
-        <div
-          className="pgn-transition-replace-group position-relative mb-5"
-          style={
-            Object {
-              "height": null,
-            }
-          }
-        >
-          <div
-            style={
-              Object {
-                "padding": ".1px 0",
-              }
-            }
-          >
-            <div
-              className="editable-item-header mb-2"
-            >
-              <h2
-                className="edit-section-header"
-                id={null}
-              >
-                Social Links
-                <button
-                  className="float-right px-0 btn btn-link btn-sm"
-                  disabled={false}
-                  onClick={[Function]}
-                  style={
-                    Object {
-                      "marginTop": "-.35rem",
-                    }
-                  }
-                  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={Object {}}
-                    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={Object {}}
-                    />
-                  </svg>
-                  Edit
-                </button>
-              </h2>
-              <p
-                className="mb-0"
-              >
-                <span
-                  className="ml-auto small text-muted"
-                >
-                  <svg
-                    aria-hidden="true"
-                    className="svg-inline--fa fa-eye fa-w-18 "
-                    data-icon="eye"
-                    data-prefix="far"
-                    focusable="false"
-                    role="img"
-                    style={Object {}}
-                    viewBox="0 0 576 512"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
-                      fill="currentColor"
-                      style={Object {}}
-                    />
-                  </svg>
-                   
-                  Everyone on localhost
-                </span>
-              </p>
-            </div>
-            <ul
-              className="list-unstyled"
-            >
-              <li
-                className="form-group"
-              >
-                <a
-                  className="font-weight-bold"
-                  href="https://www.twitter.com/ALOHA"
-                >
-                  <svg
-                    aria-hidden="true"
-                    className="svg-inline--fa fa-twitter fa-w-16 mr-2"
-                    data-icon="twitter"
-                    data-prefix="fab"
-                    focusable="false"
-                    role="img"
-                    style={Object {}}
-                    viewBox="0 0 512 512"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
-                      fill="currentColor"
-                      style={Object {}}
-                    />
-                  </svg>
-                  Twitter
-                </a>
-              </li>
-              <li
-                className="form-group"
-              >
-                <a
-                  className="font-weight-bold"
-                  href="https://www.facebook.com/aloha"
-                >
-                  <svg
-                    aria-hidden="true"
-                    className="svg-inline--fa fa-facebook fa-w-16 mr-2"
-                    data-icon="facebook"
-                    data-prefix="fab"
-                    focusable="false"
-                    role="img"
-                    style={Object {}}
-                    viewBox="0 0 512 512"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"
-                      fill="currentColor"
-                      style={Object {}}
-                    />
-                  </svg>
-                  Facebook
-                </a>
-              </li>
-              <li
-                className="form-group"
-              >
-                <div>
-                  <button
-                    className="pl-0 text-left btn btn-link"
-                    onClick={[Function]}
-                    onKeyDown={[Function]}
-                    tabIndex={0}
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      className="svg-inline--fa fa-plus fa-w-14 fa-xs mr-2"
-                      data-icon="plus"
-                      data-prefix="fas"
-                      focusable="false"
-                      role="img"
-                      style={Object {}}
-                      viewBox="0 0 448 512"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-                        fill="currentColor"
-                        style={Object {}}
-                      />
-                    </svg>
-                    Add 
-                    LinkedIn
-                  </button>
-                </div>
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-      <div
-        className="pt-md-3 col-md-8 col-lg-7 offset-lg-1"
-      >
-        <div
-          className="pgn-transition-replace-group position-relative mb-5"
-          style={
-            Object {
-              "height": null,
-            }
-          }
-        >
-          <div
-            style={
-              Object {
-                "padding": ".1px 0",
-              }
-            }
-          >
-            <div
-              className="editable-item-header mb-2"
-            >
-              <h2
-                className="edit-section-header"
-                id={null}
-              >
-                About Me
-                <button
-                  className="float-right px-0 btn btn-link btn-sm"
-                  disabled={false}
-                  onClick={[Function]}
-                  style={
-                    Object {
-                      "marginTop": "-.35rem",
-                    }
-                  }
-                  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={Object {}}
-                    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={Object {}}
-                    />
-                  </svg>
-                  Edit
-                </button>
-              </h2>
-              <p
-                className="mb-0"
-              >
-                <span
-                  className="ml-auto small text-muted"
-                >
-                  <svg
-                    aria-hidden="true"
-                    className="svg-inline--fa fa-eye fa-w-18 "
-                    data-icon="eye"
-                    data-prefix="far"
-                    focusable="false"
-                    role="img"
-                    style={Object {}}
-                    viewBox="0 0 576 512"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
-                      fill="currentColor"
-                      style={Object {}}
-                    />
-                  </svg>
-                   
-                  Everyone on localhost
-                </span>
-              </p>
-            </div>
-            <p
-              className="lead"
-              data-hj-suppress={true}
-            >
-              This is my bio
-            </p>
-          </div>
-        </div>
-        <div
-          className="pgn-transition-replace-group position-relative mb-4"
-          style={
-            Object {
-              "height": null,
-            }
-          }
-        >
-          <div
-            style={
-              Object {
-                "padding": ".1px 0",
-              }
-            }
-          >
-            <div
-              className="editable-item-header mb-2"
-            >
-              <h2
-                className="edit-section-header"
-                id={null}
-              >
-                My Certificates
-                <button
-                  className="float-right px-0 btn btn-link btn-sm"
-                  disabled={false}
-                  onClick={[Function]}
-                  style={
-                    Object {
-                      "marginTop": "-.35rem",
-                    }
-                  }
-                  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={Object {}}
-                    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={Object {}}
-                    />
-                  </svg>
-                  Edit
-                </button>
-              </h2>
-              <p
-                className="mb-0"
-              >
-                <span
-                  className="ml-auto small text-muted"
-                >
-                  <svg
-                    aria-hidden="true"
-                    className="svg-inline--fa fa-eye fa-w-18 "
-                    data-icon="eye"
-                    data-prefix="far"
-                    focusable="false"
-                    role="img"
-                    style={Object {}}
-                    viewBox="0 0 576 512"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
-                      fill="currentColor"
-                      style={Object {}}
-                    />
-                  </svg>
-                   
-                  Everyone on localhost
-                </span>
-              </p>
-            </div>
-            <div
-              className="row align-items-stretch"
-            >
-              <div
-                className="col col-sm-6 d-flex align-items-stretch"
-              >
-                <div
-                  className="card mb-4 certificate flex-grow-1"
-                >
-                  <div
-                    className="certificate-type-illustration"
-                    style={
-                      Object {
-                        "backgroundImage": "url(icon/mock/path)",
-                      }
-                    }
-                  />
-                  <div
-                    className="card-body d-flex flex-column"
-                  >
-                    <div
-                      className="card-title"
-                    >
-                      <p
-                        className="small mb-0"
-                      >
-                        Verified Certificate
-                      </p>
-                      <h4
-                        className="certificate-title"
-                      >
-                        edX Demonstration Course
-                      </h4>
-                    </div>
-                    <p
-                      className="small mb-0"
-                    >
-                      From
-                    </p>
-                    <p
-                      className="h6 mb-4"
-                    >
-                      edX
-                    </p>
-                    <div
-                      className="flex-grow-1"
-                    />
-                    <p
-                      className="small mb-2"
-                    >
-                      Completed on 
-                      3/4/2019
-                    </p>
-                    <div>
-                      <a
-                        className="pgn__hyperlink default-link standalone-link btn btn-outline-primary"
-                        href="http://www.example.com/"
-                        onClick={[Function]}
-                        rel="noopener noreferrer"
-                        target="_blank"
-                      >
-                        View Certificate
-                        <span
-                          className="pgn__hyperlink__external-icon"
-                          title="Opens in a new tab"
-                        >
-                          <span
-                            className="pgn__icon"
-                            style={
-                              Object {
-                                "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>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
 exports[`<ProfilePage /> Renders correctly in various states viewing other profile 1`] = `
 <div
  className="profile-page"
@@ -5709,37 +97,13 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
            <p
              className="mb-0"
            >
-              Member since 
-              2017
-            </p>
-            <div
-              className="d-flex align-items-center mt-3 mb-2rem"
-            >
-              <span
-                className="pgn__icon icon-visibility-off"
-              >
-                <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="M12 6.5c2.76 0 5 2.24 5 5 0 .51-.1 1-.24 1.46l3.06 3.06c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l2.17 2.17c.47-.14.96-.24 1.47-.24ZM3.42 2.45 2.01 3.87l2.68 2.68A11.738 11.738 0 0 0 1 11.5C2.73 15.89 7 19 12 19c1.52 0 2.97-.3 4.31-.82l3.43 3.43 1.41-1.41L3.42 2.45ZM12 16.5c-2.76 0-5-2.24-5-5 0-.77.18-1.5.49-2.14l1.57 1.57c-.03.18-.06.37-.06.57 0 1.66 1.34 3 3 3 .2 0 .38-.03.57-.07L14.14 16c-.65.32-1.37.5-2.14.5Zm2.97-5.33a2.97 2.97 0 0 0-2.64-2.64l2.64 2.64Z"
-                    fill="currentColor"
-                  />
-                </svg>
+              <span>
+                Member since 
+                <span>
+                  2017
+                </span>
              </span>
-              <div
-                className="username-description"
-              >
-                Your profile information is only visible to you. Only your username is visible to others on localhost.
-              </div>
-            </div>
+            </p>
            <hr
              className="d-none d-md-block"
            />
@@ -5770,37 +134,13 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
            <p
              className="mb-0"
            >
-              Member since 
-              2017
-            </p>
-            <div
-              className="d-flex align-items-center mt-3 mb-2rem"
-            >
-              <span
-                className="pgn__icon icon-visibility-off"
-              >
-                <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="M12 6.5c2.76 0 5 2.24 5 5 0 .51-.1 1-.24 1.46l3.06 3.06c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l2.17 2.17c.47-.14.96-.24 1.47-.24ZM3.42 2.45 2.01 3.87l2.68 2.68A11.738 11.738 0 0 0 1 11.5C2.73 15.89 7 19 12 19c1.52 0 2.97-.3 4.31-.82l3.43 3.43 1.41-1.41L3.42 2.45ZM12 16.5c-2.76 0-5-2.24-5-5 0-.77.18-1.5.49-2.14l1.57 1.57c-.03.18-.06.37-.06.57 0 1.66 1.34 3 3 3 .2 0 .38-.03.57-.07L14.14 16c-.65.32-1.37.5-2.14.5Zm2.97-5.33a2.97 2.97 0 0 0-2.64-2.64l2.64 2.64Z"
-                    fill="currentColor"
-                  />
-                </svg>
+              <span>
+                Member since 
+                <span>
+                  2017
+                </span>
              </span>
-              <div
-                className="username-description"
-              >
-                Your profile information is only visible to you. Only your username is visible to others on localhost.
-              </div>
-            </div>
+            </p>
            <hr
              className="d-none d-md-block"
            />
@@ -5904,8 +244,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                className="profile-avatar-menu-container"
              >
                <div
-                  className="pgn__dropdown pgn__dropdown-light dropdown"
-                  data-testid="dropdown"
+                  className="dropdown"
                >
                  <button
                    aria-expanded={false}
@@ -5964,8 +303,12 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
            <p
              className="mb-0"
            >
-              Member since 
-              2017
+              <span>
+                Member since 
+                <span>
+                  2017
+                </span>
+              </span>
            </p>
            <hr
              className="d-none d-md-block"
@@ -5976,17 +319,17 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
          className="d-none d-md-block float-right"
        >
          <a
-            className="pgn__hyperlink default-link standalone-link btn btn-primary"
+            className="btn btn-primary"
            href="http://localhost:18150/records"
            onClick={[Function]}
-            rel="noopener noreferrer"
+            rel="noopener"
            target="_blank"
          >
            View My Records
            <span
-              className="pgn__hyperlink__external-icon"
-              title="Opens in a new tab"
+              className="d-inline-block align-text-top"
            >
+               
              <span
                className="pgn__icon"
                style={
@@ -5998,6 +341,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
              >
                <svg
                  aria-hidden={true}
+                  aria-label=""
                  fill="none"
                  focusable={false}
                  height={24}
@@ -6007,15 +351,10 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                  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"
+                    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>
@@ -6042,8 +381,12 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
            <p
              className="mb-0"
            >
-              Member since 
-              2017
+              <span>
+                Member since 
+                <span>
+                  2017
+                </span>
+              </span>
            </p>
            <hr
              className="d-none d-md-block"
@@ -6054,17 +397,17 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
          className="d-md-none mb-4"
        >
          <a
-            className="pgn__hyperlink default-link standalone-link btn btn-primary"
+            className="btn btn-primary"
            href="http://localhost:18150/records"
            onClick={[Function]}
-            rel="noopener noreferrer"
+            rel="noopener"
            target="_blank"
          >
            View My Records
            <span
-              className="pgn__hyperlink__external-icon"
-              title="Opens in a new tab"
+              className="d-inline-block align-text-top"
            >
+               
              <span
                className="pgn__icon"
                style={
@@ -6076,6 +419,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
              >
                <svg
                  aria-hidden={true}
+                  aria-label=""
                  fill="none"
                  focusable={false}
                  height={24}
@@ -6085,15 +429,10 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                  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"
+                    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>
@@ -6271,7 +610,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                    />
                  </svg>
                   
-                  Everyone on localhost
+                  Everyone on edX
                </span>
              </p>
            </div>
@@ -6361,7 +700,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                    />
                  </svg>
                   
-                  Everyone on localhost
+                  Everyone on edX
                </span>
              </p>
            </div>
@@ -6541,7 +880,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                    />
                  </svg>
                   
-                  Everyone on localhost
+                  Everyone on edX
                </span>
              </p>
            </div>
@@ -6720,7 +1059,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                    />
                  </svg>
                   
-                  Everyone on localhost
+                  Everyone on edX
                </span>
              </p>
            </div>
@@ -6810,7 +1149,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                    />
                  </svg>
                   
-                  Everyone on localhost
+                  Everyone on edX
                </span>
              </p>
            </div>
@@ -6851,7 +1190,9 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                    <p
                      className="small mb-0"
                    >
-                      From
+                      <span>
+                        From
+                      </span>
                    </p>
                    <p
                      className="h6 mb-4"
@@ -6864,22 +1205,26 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                    <p
                      className="small mb-2"
                    >
-                      Completed on 
-                      3/4/2019
+                      <span>
+                        Completed on 
+                        <span>
+                          3/4/2019
+                        </span>
+                      </span>
                    </p>
                    <div>
                      <a
-                        className="pgn__hyperlink default-link standalone-link btn btn-outline-primary"
+                        className="btn btn-outline-primary"
                        href="http://www.example.com/"
                        onClick={[Function]}
-                        rel="noopener noreferrer"
+                        rel="noopener"
                        target="_blank"
                      >
                        View Certificate
                        <span
-                          className="pgn__hyperlink__external-icon"
-                          title="Opens in a new tab"
+                          className="d-inline-block align-text-top"
                        >
+                           
                          <span
                            className="pgn__icon"
                            style={
@@ -6891,6 +1236,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                          >
                            <svg
                              aria-hidden={true}
+                              aria-label=""
                              fill="none"
                              focusable={false}
                              height={24}
@@ -6900,15 +1246,10 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                              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"
+                                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>
@@ -6954,8 +1295,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                className="profile-avatar-menu-container"
              >
                <div
-                  className="pgn__dropdown pgn__dropdown-light dropdown"
-                  data-testid="dropdown"
+                  className="dropdown"
                >
                  <button
                    aria-expanded={false}
@@ -7014,8 +1354,12 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
            <p
              className="mb-0"
            >
-              Member since 
-              2017
+              <span>
+                Member since 
+                <span>
+                  2017
+                </span>
+              </span>
            </p>
            <hr
              className="d-none d-md-block"
@@ -7026,17 +1370,17 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
          className="d-none d-md-block float-right"
        >
          <a
-            className="pgn__hyperlink default-link standalone-link btn btn-primary"
+            className="btn btn-primary"
            href="http://localhost:18150/records"
            onClick={[Function]}
-            rel="noopener noreferrer"
+            rel="noopener"
            target="_blank"
          >
            View My Records
            <span
-              className="pgn__hyperlink__external-icon"
-              title="Opens in a new tab"
+              className="d-inline-block align-text-top"
            >
+               
              <span
                className="pgn__icon"
                style={
@@ -7048,6 +1392,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
              >
                <svg
                  aria-hidden={true}
+                  aria-label=""
                  fill="none"
                  focusable={false}
                  height={24}
@@ -7057,15 +1402,10 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                  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"
+                    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>
@@ -7092,8 +1432,12 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
            <p
              className="mb-0"
            >
-              Member since 
-              2017
+              <span>
+                Member since 
+                <span>
+                  2017
+                </span>
+              </span>
            </p>
            <hr
              className="d-none d-md-block"
@@ -7104,17 +1448,17 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
          className="d-md-none mb-4"
        >
          <a
-            className="pgn__hyperlink default-link standalone-link btn btn-primary"
+            className="btn btn-primary"
            href="http://localhost:18150/records"
            onClick={[Function]}
-            rel="noopener noreferrer"
+            rel="noopener"
            target="_blank"
          >
            View My Records
            <span
-              className="pgn__hyperlink__external-icon"
-              title="Opens in a new tab"
+              className="d-inline-block align-text-top"
            >
+               
              <span
                className="pgn__icon"
                style={
@@ -7126,6 +1470,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
              >
                <svg
                  aria-hidden={true}
+                  aria-label=""
                  fill="none"
                  focusable={false}
                  height={24}
@@ -7135,15 +1480,10 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                  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"
+                    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>
@@ -7321,7 +1661,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                    />
                  </svg>
                   
-                  Everyone on localhost
+                  Everyone on edX
                </span>
              </p>
            </div>
@@ -7411,7 +1751,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                    />
                  </svg>
                   
-                  Everyone on localhost
+                  Everyone on edX
                </span>
              </p>
            </div>
@@ -7591,7 +1931,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                    />
                  </svg>
                   
-                  Everyone on localhost
+                  Everyone on edX
                </span>
              </p>
            </div>
@@ -7715,7 +2055,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                onSubmit={[Function]}
              >
                <div
-                  className="pgn__form-group"
+                  className="form-group"
                >
                  <label
                    className="edit-section-header"
@@ -7724,6 +2064,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                    About Me
                  </label>
                  <textarea
+                    aria-describedby=""
                    className="form-control"
                    id="bio"
                    name="bio"
@@ -7788,7 +2129,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                        <option
                          value="all_users"
                        >
-                          Everyone on localhost
+                          Everyone on edX
                        </option>
                      </select>
                    </span>
@@ -7815,6 +2156,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                          >
                            <svg
                              aria-hidden={true}
+                              aria-label=""
                              fill="none"
                              focusable={false}
                              height={24}
@@ -7824,13 +2166,15 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
-                                d="M22 12A10 10 0 1 1 6.122 3.91l1.176 1.618A8 8 0 1 0 20 12h2Z"
+                                d="M22 12A10 10 0 116.122 3.91l1.176 1.618A8 8 0 1020 12h2z"
                                fill="currentColor"
                              />
                            </svg>
                          </span>
                        </span>
-                        <span>
+                        <span
+                          className=""
+                        >
                          Saving
                        </span>
                      </span>
@@ -7927,7 +2271,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                    />
                  </svg>
                   
-                  Everyone on localhost
+                  Everyone on edX
                </span>
              </p>
            </div>
@@ -7968,7 +2312,9 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                    <p
                      className="small mb-0"
                    >
-                      From
+                      <span>
+                        From
+                      </span>
                    </p>
                    <p
                      className="h6 mb-4"
@@ -7981,1147 +2327,26 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                    <p
                      className="small mb-2"
                    >
-                      Completed on 
-                      3/4/2019
-                    </p>
-                    <div>
-                      <a
-                        className="pgn__hyperlink default-link standalone-link btn btn-outline-primary"
-                        href="http://www.example.com/"
-                        onClick={[Function]}
-                        rel="noopener noreferrer"
-                        target="_blank"
-                      >
-                        View Certificate
-                        <span
-                          className="pgn__hyperlink__external-icon"
-                          title="Opens in a new tab"
-                        >
-                          <span
-                            className="pgn__icon"
-                            style={
-                              Object {
-                                "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>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<ProfilePage /> Renders correctly in various states while saving an edited bio with error 1`] = `
-<div
-  className="profile-page"
->
-  <div
-    className="profile-page-bg-banner bg-primary d-none d-md-block p-relative"
-  />
-  <div
-    className="container-fluid"
-  >
-    <div
-      className="row align-items-center pt-4 mb-4 pt-md-0 mb-md-0"
-    >
-      <div
-        className="col-auto col-md-4 col-lg-3"
-      >
-        <div
-          className="d-flex align-items-center d-md-block"
-        >
-          <div
-            className="profile-avatar-wrap position-relative"
-          >
-            <div
-              className="profile-avatar rounded-circle bg-light"
-            >
-              <div
-                className="profile-avatar-menu-container"
-              >
-                <div
-                  className="pgn__dropdown pgn__dropdown-light dropdown"
-                  data-testid="dropdown"
-                >
-                  <button
-                    aria-expanded={false}
-                    aria-haspopup={true}
-                    className="dropdown-toggle btn btn-primary"
-                    disabled={false}
-                    onClick={[Function]}
-                    type="button"
-                  >
-                    Change
-                  </button>
-                </div>
-              </div>
-              <img
-                alt="profile avatar"
-                className="w-100 h-100 d-block rounded-circle overflow-hidden"
-                data-hj-suppress={true}
-                src="http://localhost:18000/media/profile-images/d2a9bdc2ba165dcefc73265c54bf9a20_500.jpg?v=1552495012"
-                style={
-                  Object {
-                    "objectFit": "cover",
-                  }
-                }
-              />
-            </div>
-            <form
-              encType="multipart/form-data"
-              onSubmit={[Function]}
-            >
-              <input
-                accept=".jpg, .jpeg, .png"
-                className="d-none form-control-file"
-                id="photo-file"
-                name="file"
-                onChange={[Function]}
-                type="file"
-              />
-            </form>
-          </div>
-        </div>
-      </div>
-      <div
-        className="col pl-0"
-      >
-        <div
-          className="d-md-none"
-        >
-          <span
-            data-hj-suppress={true}
-          >
-            <h1
-              className="h2 mb-0 font-weight-bold"
-            >
-              staff
-            </h1>
-            <p
-              className="mb-0"
-            >
-              Member since 
-              2017
-            </p>
-            <hr
-              className="d-none d-md-block"
-            />
-          </span>
-        </div>
-        <div
-          className="d-none d-md-block float-right"
-        >
-          <a
-            className="pgn__hyperlink default-link standalone-link btn btn-primary"
-            href="http://localhost:18150/records"
-            onClick={[Function]}
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            View My Records
-            <span
-              className="pgn__hyperlink__external-icon"
-              title="Opens in a new tab"
-            >
-              <span
-                className="pgn__icon"
-                style={
-                  Object {
-                    "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>
-        </div>
-      </div>
-    </div>
-    <div
-      className="row"
-    >
-      <div
-        className="col-md-4 col-lg-4"
-      >
-        <div
-          className="d-none d-md-block mb-4"
-        >
-          <span
-            data-hj-suppress={true}
-          >
-            <h1
-              className="h2 mb-0 font-weight-bold"
-            >
-              staff
-            </h1>
-            <p
-              className="mb-0"
-            >
-              Member since 
-              2017
-            </p>
-            <hr
-              className="d-none d-md-block"
-            />
-          </span>
-        </div>
-        <div
-          className="d-md-none mb-4"
-        >
-          <a
-            className="pgn__hyperlink default-link standalone-link btn btn-primary"
-            href="http://localhost:18150/records"
-            onClick={[Function]}
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            View My Records
-            <span
-              className="pgn__hyperlink__external-icon"
-              title="Opens in a new tab"
-            >
-              <span
-                className="pgn__icon"
-                style={
-                  Object {
-                    "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>
-        </div>
-        <div
-          className="pgn-transition-replace-group position-relative mb-5"
-          style={
-            Object {
-              "height": null,
-            }
-          }
-        >
-          <div
-            style={
-              Object {
-                "padding": ".1px 0",
-              }
-            }
-          >
-            <div
-              className="editable-item-header mb-2"
-            >
-              <h2
-                className="edit-section-header"
-                id={null}
-              >
-                Full Name
-                <button
-                  className="float-right px-0 btn btn-link btn-sm"
-                  disabled={false}
-                  onClick={[Function]}
-                  style={
-                    Object {
-                      "marginTop": "-.35rem",
-                    }
-                  }
-                  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={Object {}}
-                    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={Object {}}
-                    />
-                  </svg>
-                  Edit
-                </button>
-              </h2>
-              <p
-                className="mb-0"
-              >
-                <span
-                  className="ml-auto small text-muted"
-                >
-                  <svg
-                    aria-hidden="true"
-                    className="svg-inline--fa fa-eye-slash fa-w-20 "
-                    data-icon="eye-slash"
-                    data-prefix="far"
-                    focusable="false"
-                    role="img"
-                    style={Object {}}
-                    viewBox="0 0 640 512"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M634 471L36 3.51A16 16 0 0 0 13.51 6l-10 12.49A16 16 0 0 0 6 41l598 467.49a16 16 0 0 0 22.49-2.49l10-12.49A16 16 0 0 0 634 471zM296.79 146.47l134.79 105.38C429.36 191.91 380.48 144 320 144a112.26 112.26 0 0 0-23.21 2.47zm46.42 219.07L208.42 260.16C210.65 320.09 259.53 368 320 368a113 113 0 0 0 23.21-2.46zM320 112c98.65 0 189.09 55 237.93 144a285.53 285.53 0 0 1-44 60.2l37.74 29.5a333.7 333.7 0 0 0 52.9-75.11 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64c-36.7 0-71.71 7-104.63 18.81l46.41 36.29c18.94-4.3 38.34-7.1 58.22-7.1zm0 288c-98.65 0-189.08-55-237.93-144a285.47 285.47 0 0 1 44.05-60.19l-37.74-29.5a333.6 333.6 0 0 0-52.89 75.1 32.35 32.35 0 0 0 0 29.19C89.72 376.41 197.08 448 320 448c36.7 0 71.71-7.05 104.63-18.81l-46.41-36.28C359.28 397.2 339.89 400 320 400z"
-                      fill="currentColor"
-                      style={Object {}}
-                    />
-                  </svg>
-                   
-                  Just me
-                </span>
-              </p>
-            </div>
-            <p
-              className="h5"
-              data-hj-suppress={true}
-            >
-              Lemon Seltzer
-            </p>
-            <small
-              className="form-text text-muted"
-            >
-              This is the name that appears in your account and on your certificates.
-            </small>
-          </div>
-        </div>
-        <div
-          className="pgn-transition-replace-group position-relative mb-5"
-          style={
-            Object {
-              "height": null,
-            }
-          }
-        >
-          <div
-            style={
-              Object {
-                "padding": ".1px 0",
-              }
-            }
-          >
-            <div
-              className="editable-item-header mb-2"
-            >
-              <h2
-                className="edit-section-header"
-                id={null}
-              >
-                Location
-                <button
-                  className="float-right px-0 btn btn-link btn-sm"
-                  disabled={false}
-                  onClick={[Function]}
-                  style={
-                    Object {
-                      "marginTop": "-.35rem",
-                    }
-                  }
-                  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={Object {}}
-                    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={Object {}}
-                    />
-                  </svg>
-                  Edit
-                </button>
-              </h2>
-              <p
-                className="mb-0"
-              >
-                <span
-                  className="ml-auto small text-muted"
-                >
-                  <svg
-                    aria-hidden="true"
-                    className="svg-inline--fa fa-eye fa-w-18 "
-                    data-icon="eye"
-                    data-prefix="far"
-                    focusable="false"
-                    role="img"
-                    style={Object {}}
-                    viewBox="0 0 576 512"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
-                      fill="currentColor"
-                      style={Object {}}
-                    />
-                  </svg>
-                   
-                  Everyone on localhost
-                </span>
-              </p>
-            </div>
-            <p
-              className="h5"
-              data-hj-suppress={true}
-            >
-              Montenegro
-            </p>
-          </div>
-        </div>
-        <div
-          className="pgn-transition-replace-group position-relative mb-5"
-          style={
-            Object {
-              "height": null,
-            }
-          }
-        >
-          <div
-            style={
-              Object {
-                "padding": ".1px 0",
-              }
-            }
-          >
-            <div
-              className="editable-item-header mb-2"
-            >
-              <h2
-                className="edit-section-header"
-                id={null}
-              >
-                Primary Language Spoken
-                <button
-                  className="float-right px-0 btn btn-link btn-sm"
-                  disabled={false}
-                  onClick={[Function]}
-                  style={
-                    Object {
-                      "marginTop": "-.35rem",
-                    }
-                  }
-                  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={Object {}}
-                    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={Object {}}
-                    />
-                  </svg>
-                  Edit
-                </button>
-              </h2>
-              <p
-                className="mb-0"
-              >
-                <span
-                  className="ml-auto small text-muted"
-                >
-                  <svg
-                    aria-hidden="true"
-                    className="svg-inline--fa fa-eye fa-w-18 "
-                    data-icon="eye"
-                    data-prefix="far"
-                    focusable="false"
-                    role="img"
-                    style={Object {}}
-                    viewBox="0 0 576 512"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
-                      fill="currentColor"
-                      style={Object {}}
-                    />
-                  </svg>
-                   
-                  Everyone on localhost
-                </span>
-              </p>
-            </div>
-            <p
-              className="h5"
-              data-hj-suppress={true}
-            >
-              Yoruba
-            </p>
-          </div>
-        </div>
-        <div
-          className="pgn-transition-replace-group position-relative mb-5"
-          style={
-            Object {
-              "height": null,
-            }
-          }
-        >
-          <div
-            style={
-              Object {
-                "padding": ".1px 0",
-              }
-            }
-          >
-            <div
-              className="editable-item-header mb-2"
-            >
-              <h2
-                className="edit-section-header"
-                id={null}
-              >
-                Education
-                <button
-                  className="float-right px-0 btn btn-link btn-sm"
-                  disabled={false}
-                  onClick={[Function]}
-                  style={
-                    Object {
-                      "marginTop": "-.35rem",
-                    }
-                  }
-                  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={Object {}}
-                    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={Object {}}
-                    />
-                  </svg>
-                  Edit
-                </button>
-              </h2>
-              <p
-                className="mb-0"
-              >
-                <span
-                  className="ml-auto small text-muted"
-                >
-                  <svg
-                    aria-hidden="true"
-                    className="svg-inline--fa fa-eye-slash fa-w-20 "
-                    data-icon="eye-slash"
-                    data-prefix="far"
-                    focusable="false"
-                    role="img"
-                    style={Object {}}
-                    viewBox="0 0 640 512"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M634 471L36 3.51A16 16 0 0 0 13.51 6l-10 12.49A16 16 0 0 0 6 41l598 467.49a16 16 0 0 0 22.49-2.49l10-12.49A16 16 0 0 0 634 471zM296.79 146.47l134.79 105.38C429.36 191.91 380.48 144 320 144a112.26 112.26 0 0 0-23.21 2.47zm46.42 219.07L208.42 260.16C210.65 320.09 259.53 368 320 368a113 113 0 0 0 23.21-2.46zM320 112c98.65 0 189.09 55 237.93 144a285.53 285.53 0 0 1-44 60.2l37.74 29.5a333.7 333.7 0 0 0 52.9-75.11 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64c-36.7 0-71.71 7-104.63 18.81l46.41 36.29c18.94-4.3 38.34-7.1 58.22-7.1zm0 288c-98.65 0-189.08-55-237.93-144a285.47 285.47 0 0 1 44.05-60.19l-37.74-29.5a333.6 333.6 0 0 0-52.89 75.1 32.35 32.35 0 0 0 0 29.19C89.72 376.41 197.08 448 320 448c36.7 0 71.71-7.05 104.63-18.81l-46.41-36.28C359.28 397.2 339.89 400 320 400z"
-                      fill="currentColor"
-                      style={Object {}}
-                    />
-                  </svg>
-                   
-                  Just me
-                </span>
-              </p>
-            </div>
-            <p
-              className="h5"
-              data-hj-suppress={true}
-            >
-              Elementary/primary school
-            </p>
-          </div>
-        </div>
-        <div
-          className="pgn-transition-replace-group position-relative mb-5"
-          style={
-            Object {
-              "height": null,
-            }
-          }
-        >
-          <div
-            style={
-              Object {
-                "padding": ".1px 0",
-              }
-            }
-          >
-            <div
-              className="editable-item-header mb-2"
-            >
-              <h2
-                className="edit-section-header"
-                id={null}
-              >
-                Social Links
-                <button
-                  className="float-right px-0 btn btn-link btn-sm"
-                  disabled={false}
-                  onClick={[Function]}
-                  style={
-                    Object {
-                      "marginTop": "-.35rem",
-                    }
-                  }
-                  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={Object {}}
-                    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={Object {}}
-                    />
-                  </svg>
-                  Edit
-                </button>
-              </h2>
-              <p
-                className="mb-0"
-              >
-                <span
-                  className="ml-auto small text-muted"
-                >
-                  <svg
-                    aria-hidden="true"
-                    className="svg-inline--fa fa-eye fa-w-18 "
-                    data-icon="eye"
-                    data-prefix="far"
-                    focusable="false"
-                    role="img"
-                    style={Object {}}
-                    viewBox="0 0 576 512"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
-                      fill="currentColor"
-                      style={Object {}}
-                    />
-                  </svg>
-                   
-                  Everyone on localhost
-                </span>
-              </p>
-            </div>
-            <ul
-              className="list-unstyled"
-            >
-              <li
-                className="form-group"
-              >
-                <a
-                  className="font-weight-bold"
-                  href="https://www.twitter.com/ALOHA"
-                >
-                  <svg
-                    aria-hidden="true"
-                    className="svg-inline--fa fa-twitter fa-w-16 mr-2"
-                    data-icon="twitter"
-                    data-prefix="fab"
-                    focusable="false"
-                    role="img"
-                    style={Object {}}
-                    viewBox="0 0 512 512"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
-                      fill="currentColor"
-                      style={Object {}}
-                    />
-                  </svg>
-                  Twitter
-                </a>
-              </li>
-              <li
-                className="form-group"
-              >
-                <a
-                  className="font-weight-bold"
-                  href="https://www.facebook.com/aloha"
-                >
-                  <svg
-                    aria-hidden="true"
-                    className="svg-inline--fa fa-facebook fa-w-16 mr-2"
-                    data-icon="facebook"
-                    data-prefix="fab"
-                    focusable="false"
-                    role="img"
-                    style={Object {}}
-                    viewBox="0 0 512 512"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"
-                      fill="currentColor"
-                      style={Object {}}
-                    />
-                  </svg>
-                  Facebook
-                </a>
-              </li>
-              <li
-                className="form-group"
-              >
-                <div>
-                  <button
-                    className="pl-0 text-left btn btn-link"
-                    onClick={[Function]}
-                    onKeyDown={[Function]}
-                    tabIndex={0}
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      className="svg-inline--fa fa-plus fa-w-14 fa-xs mr-2"
-                      data-icon="plus"
-                      data-prefix="fas"
-                      focusable="false"
-                      role="img"
-                      style={Object {}}
-                      viewBox="0 0 448 512"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-                        fill="currentColor"
-                        style={Object {}}
-                      />
-                    </svg>
-                    Add 
-                    LinkedIn
-                  </button>
-                </div>
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-      <div
-        className="pt-md-3 col-md-8 col-lg-7 offset-lg-1"
-      >
-        <div
-          className="pgn-transition-replace-group position-relative mb-5"
-          style={
-            Object {
-              "height": null,
-            }
-          }
-        >
-          <div
-            style={
-              Object {
-                "padding": ".1px 0",
-              }
-            }
-          >
-            <div
-              aria-labelledby="bio-label"
-              role="dialog"
-            >
-              <form
-                onSubmit={[Function]}
-              >
-                <div
-                  className="pgn__form-group"
-                >
-                  <label
-                    className="edit-section-header"
-                    htmlFor="bio"
-                  >
-                    About Me
-                  </label>
-                  <textarea
-                    className="form-control"
-                    id="bio"
-                    name="bio"
-                    onChange={[Function]}
-                    value="This is my bio"
-                  />
-                  <div
-                    className="pgn__form-control-description pgn__form-text pgn__form-text-invalid"
-                    id="bio-1"
-                  >
-                    <div>
-                      bio error
-                    </div>
-                  </div>
-                </div>
-                <div
-                  className="d-flex flex-row-reverse flex-wrap justify-content-end align-items-center"
-                >
-                  <div
-                    className="form-group d-flex flex-wrap"
-                  >
-                    <label
-                      className="col-form-label"
-                      htmlFor="visibilityBio"
-                    >
-                      Who can see this:
-                    </label>
-                    <span
-                      className="d-flex align-items-center"
-                    >
-                      <span
-                        className="d-inline-block ml-1 mr-2"
-                        style={
-                          Object {
-                            "width": "1.5rem",
-                          }
-                        }
-                      >
-                        <svg
-                          aria-hidden="true"
-                          className="svg-inline--fa fa-eye fa-w-18 "
-                          data-icon="eye"
-                          data-prefix="far"
-                          focusable="false"
-                          role="img"
-                          style={Object {}}
-                          viewBox="0 0 576 512"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
-                            fill="currentColor"
-                            style={Object {}}
-                          />
-                        </svg>
-                      </span>
-                      <select
-                        className="d-inline-block w-auto form-control"
-                        id="visibilityBio"
-                        name="visibilityBio"
-                        onChange={[Function]}
-                        type="select"
-                        value="all_users"
-                      >
-                        <option
-                          value="private"
-                        >
-                          Just me
-                        </option>
-                        <option
-                          value="all_users"
-                        >
-                          Everyone on localhost
-                        </option>
-                      </select>
-                    </span>
-                  </div>
-                  <div
-                    className="form-group flex-shrink-0 flex-grow-1"
-                  >
-                    <button
-                      aria-disabled={false}
-                      aria-live="assertive"
-                      className="pgn__stateful-btn pgn__stateful-btn-state-pending btn btn-primary"
-                      disabled={false}
-                      onClick={[Function]}
-                      type="submit"
-                    >
-                      <span
-                        className="d-flex align-items-center justify-content-center"
-                      >
-                        <span
-                          className="pgn__stateful-btn-icon"
-                        >
-                          <span
-                            className="pgn__icon icon-spin"
-                          >
-                            <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="M22 12A10 10 0 1 1 6.122 3.91l1.176 1.618A8 8 0 1 0 20 12h2Z"
-                                fill="currentColor"
-                              />
-                            </svg>
-                          </span>
-                        </span>
+                      <span>
+                        Completed on 
                        <span>
-                          Saving
+                          3/4/2019
                        </span>
                      </span>
-                    </button>
-                    <button
-                      className="btn btn-link"
-                      disabled={false}
-                      onClick={[Function]}
-                      type="button"
-                    >
-                      Cancel
-                    </button>
-                  </div>
-                </div>
-              </form>
-            </div>
-          </div>
-        </div>
-        <div
-          className="pgn-transition-replace-group position-relative mb-4"
-          style={
-            Object {
-              "height": null,
-            }
-          }
-        >
-          <div
-            style={
-              Object {
-                "padding": ".1px 0",
-              }
-            }
-          >
-            <div
-              className="editable-item-header mb-2"
-            >
-              <h2
-                className="edit-section-header"
-                id={null}
-              >
-                My Certificates
-                <button
-                  className="float-right px-0 btn btn-link btn-sm"
-                  disabled={false}
-                  onClick={[Function]}
-                  style={
-                    Object {
-                      "marginTop": "-.35rem",
-                    }
-                  }
-                  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={Object {}}
-                    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={Object {}}
-                    />
-                  </svg>
-                  Edit
-                </button>
-              </h2>
-              <p
-                className="mb-0"
-              >
-                <span
-                  className="ml-auto small text-muted"
-                >
-                  <svg
-                    aria-hidden="true"
-                    className="svg-inline--fa fa-eye fa-w-18 "
-                    data-icon="eye"
-                    data-prefix="far"
-                    focusable="false"
-                    role="img"
-                    style={Object {}}
-                    viewBox="0 0 576 512"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
-                      fill="currentColor"
-                      style={Object {}}
-                    />
-                  </svg>
-                   
-                  Everyone on localhost
-                </span>
-              </p>
-            </div>
-            <div
-              className="row align-items-stretch"
-            >
-              <div
-                className="col col-sm-6 d-flex align-items-stretch"
-              >
-                <div
-                  className="card mb-4 certificate flex-grow-1"
-                >
-                  <div
-                    className="certificate-type-illustration"
-                    style={
-                      Object {
-                        "backgroundImage": "url(icon/mock/path)",
-                      }
-                    }
-                  />
-                  <div
-                    className="card-body d-flex flex-column"
-                  >
-                    <div
-                      className="card-title"
-                    >
-                      <p
-                        className="small mb-0"
-                      >
-                        Verified Certificate
-                      </p>
-                      <h4
-                        className="certificate-title"
-                      >
-                        edX Demonstration Course
-                      </h4>
-                    </div>
-                    <p
-                      className="small mb-0"
-                    >
-                      From
-                    </p>
-                    <p
-                      className="h6 mb-4"
-                    >
-                      edX
-                    </p>
-                    <div
-                      className="flex-grow-1"
-                    />
-                    <p
-                      className="small mb-2"
-                    >
-                      Completed on 
-                      3/4/2019
                    </p>
                    <div>
                      <a
-                        className="pgn__hyperlink default-link standalone-link btn btn-outline-primary"
+                        className="btn btn-outline-primary"
                        href="http://www.example.com/"
                        onClick={[Function]}
-                        rel="noopener noreferrer"
+                        rel="noopener"
                        target="_blank"
                      >
                        View Certificate
                        <span
-                          className="pgn__hyperlink__external-icon"
-                          title="Opens in a new tab"
+                          className="d-inline-block align-text-top"
                        >
+                           
                          <span
                            className="pgn__icon"
                            style={
@@ -9133,6 +2358,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                          >
                            <svg
                              aria-hidden={true}
+                              aria-label=""
                              fill="none"
                              focusable={false}
                              height={24}
@@ -9142,15 +2368,10 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                              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"
+                                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>
@@ -9196,8 +2417,7 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
                className="profile-avatar-menu-container"
              >
                <div
-                  className="pgn__dropdown pgn__dropdown-light dropdown"
-                  data-testid="dropdown"
+                  className="dropdown"
                >
                  <button
                    aria-expanded={false}
@@ -9256,8 +2476,12 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
            <p
              className="mb-0"
            >
-              Member since 
-              2017
+              <span>
+                Member since 
+                <span>
+                  2017
+                </span>
+              </span>
            </p>
            <hr
              className="d-none d-md-block"
@@ -9289,8 +2513,12 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
            <p
              className="mb-0"
            >
-              Member since 
-              2017
+              <span>
+                Member since 
+                <span>
+                  2017
+                </span>
+              </span>
            </p>
            <hr
              className="d-none d-md-block"
@@ -9473,7 +2701,7 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
                    />
                  </svg>
                   
-                  Everyone on localhost
+                  Everyone on edX
                </span>
              </p>
            </div>
@@ -9563,7 +2791,7 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
                    />
                  </svg>
                   
-                  Everyone on localhost
+                  Everyone on edX
                </span>
              </p>
            </div>
@@ -9743,7 +2971,7 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
                    />
                  </svg>
                   
-                  Everyone on localhost
+                  Everyone on edX
                </span>
              </p>
            </div>
@@ -9922,7 +3150,7 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
                    />
                  </svg>
                   
-                  Everyone on localhost
+                  Everyone on edX
                </span>
              </p>
            </div>
@@ -10012,7 +3240,7 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
                    />
                  </svg>
                   
-                  Everyone on localhost
+                  Everyone on edX
                </span>
              </p>
            </div>
@@ -10053,7 +3281,9 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
                    <p
                      className="small mb-0"
                    >
-                      From
+                      <span>
+                        From
+                      </span>
                    </p>
                    <p
                      className="h6 mb-4"
@@ -10066,22 +3296,26 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
                    <p
                      className="small mb-2"
                    >
-                      Completed on 
-                      3/4/2019
+                      <span>
+                        Completed on 
+                        <span>
+                          3/4/2019
+                        </span>
+                      </span>
                    </p>
                    <div>
                      <a
-                        className="pgn__hyperlink default-link standalone-link btn btn-outline-primary"
+                        className="btn btn-outline-primary"
                        href="http://www.example.com/"
                        onClick={[Function]}
-                        rel="noopener noreferrer"
+                        rel="noopener"
                        target="_blank"
                      >
                        View Certificate
                        <span
-                          className="pgn__hyperlink__external-icon"
-                          title="Opens in a new tab"
+                          className="d-inline-block align-text-top"
                        >
+                           
                          <span
                            className="pgn__icon"
                            style={
@@ -10093,6 +3327,7 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
                          >
                            <svg
                              aria-hidden={true}
+                              aria-label=""
                              fill="none"
                              focusable={false}
                              height={24}
@@ -10102,15 +3337,10 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
                              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"
+                                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>
--- a/src/profile/data/constants.js
+++ b/src/profile/data/constants.js
@@ -7,7 +7,7 @@ const EDUCATION_LEVELS = [
  'jhs',
  'el',
  'none',
-  'other',
+  'o',
 ];

 const SOCIAL = {
--- a/src/profile/data/mock_data.js
+++ b/src/profile/data/mock_data.js
@@ -1,7 +0,0 @@
-const mockData = {
-  learningGoal: 'advance_career',
-  editMode: 'static',
-  visibilityLearningGoal: 'private',
-};
-
-export default mockData;
--- a/src/profile/data/pact-profile.test.js
+++ b/src/profile/data/pact-profile.test.js
@@ -1,80 +0,0 @@
-// This test file simply creates a contract that defines
-// expectations and correct responses from the Pact stub server.
-
-import path from 'path';
-
-import { PactV3, MatchersV3 } from '@pact-foundation/pact';
-
-import { initializeMockApp, getConfig, setConfig } from '@edx/frontend-platform';
-import { getAccount } from './services';
-
-const expectedUserInfo200 = {
-  username: 'staff',
-  email: 'staff@example.com',
-  bio: 'This is my bio',
-  name: 'Lemon Seltzer',
-  country: 'ME',
-  dateJoined: '2017-06-07T00:44:23Z',
-  isActive: true,
-  yearOfBirth: 1901,
-};
-
-const provider = new PactV3({
-  log: path.resolve(process.cwd(), 'src/pact-logs/pact.log'),
-  dir: path.resolve(process.cwd(), 'src/pacts'),
-  consumer: 'frontend-app-profile',
-  provider: 'edx-platform',
-});
-
-describe('getAccount for one username', () => {
-  beforeAll(async () => {
-    initializeMockApp();
-  });
-  it('returns a HTTP 200 and user information', async () => {
-    const username200 = 'staff';
-    await provider.addInteraction({
-      states: [{ description: "I have a user's basic information" }],
-      uponReceiving: "A request for user's basic information",
-      withRequest: {
-        method: 'GET',
-        path: `/api/user/v1/accounts/${username200}`,
-        headers: {},
-      },
-      willRespondWith: {
-        status: 200,
-        headers: {},
-        body: MatchersV3.like(expectedUserInfo200),
-      },
-    });
-    return provider.executeTest(async (mockserver) => {
-      setConfig({
-        ...getConfig(),
-        LMS_BASE_URL: mockserver.url,
-      });
-      const response = await getAccount(username200);
-      expect(response).toEqual(expectedUserInfo200);
-    });
-  });
-
-  it('Account does not exist', async () => {
-    const username404 = 'staff_not_found';
-    await provider.addInteraction({
-      states: [{ description: "Account and user's information does not exist" }],
-      uponReceiving: "A request for user's basic information",
-      withRequest: {
-        method: 'GET',
-        path: `/api/user/v1/accounts/${username404}`,
-      },
-      willRespondWith: {
-        status: 404,
-      },
-    });
-    await provider.executeTest(async (mockserver) => {
-      setConfig({
-        ...getConfig(),
-        LMS_BASE_URL: mockserver.url,
-      });
-      await expect(getAccount(username404).then((response) => response.data)).rejects.toThrow('Request failed with status code 404');
-    });
-  });
-});
--- a/src/profile/data/reducers.js
+++ b/src/profile/data/reducers.js
@@ -24,7 +24,7 @@ export const initialState = {
  isAuthenticatedUserProfile: false,
 };

-const profilePage = (state = initialState, action = {}) => {
+const profilePage = (state = initialState, action) => {
  switch (action.type) {
    case FETCH_PROFILE.BEGIN:
      return {
--- a/src/profile/data/selectors.js
+++ b/src/profile/data/selectors.js
@@ -335,7 +335,6 @@ export const profilePageSelector = createSelector(
    profileImage,
    requiresParentalConsent: account.requiresParentalConsent,
    dateJoined: account.dateJoined,
-    yearOfBirth: account.yearOfBirth,

    // Bio form data
    bio: formValues.bio,
--- a/src/profile/forms/Bio.jsx
+++ b/src/profile/forms/Bio.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Form } from '@edx/paragon';
+import { ValidationFormGroup } from '@edx/paragon';

 import messages from './Bio.messages';

@@ -56,9 +56,10 @@ class Bio extends React.Component {
          editing: (
            <div role="dialog" aria-labelledby={`${formId}-label`}>
              <form onSubmit={this.handleSubmit}>
-                <Form.Group
-                  controlId={formId}
-                  isInvalid={error !== null}
+                <ValidationFormGroup
+                  for={formId}
+                  invalid={error !== null}
+                  invalidMessage={error}
                >
                  <label className="edit-section-header" htmlFor={formId}>
                    {intl.formatMessage(messages['profile.bio.about.me'])}
@@ -70,12 +71,7 @@ class Bio extends React.Component {
                    value={bio}
                    onChange={this.handleChange}
                  />
-                  {error !== null && (
-                    <Form.Control.Feedback hasIcon={false}>
-                      {error}
-                    </Form.Control.Feedback>
-                  )}
-                </Form.Group>
+                </ValidationFormGroup>
                <FormControls
                  visibilityId="visibilityBio"
                  saveState={saveState}
--- a/src/profile/forms/Country.jsx
+++ b/src/profile/forms/Country.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Form } from '@edx/paragon';
+import { ValidationFormGroup } from '@edx/paragon';

 import messages from './Country.messages';

@@ -67,9 +67,10 @@ class Country extends React.Component {
          editing: (
            <div role="dialog" aria-labelledby={`${formId}-label`}>
              <form onSubmit={this.handleSubmit}>
-                <Form.Group
-                  controlId={formId}
-                  isInvalid={error !== null}
+                <ValidationFormGroup
+                  for={formId}
+                  invalid={error !== null}
+                  invalidMessage={error}
                >
                  <label className="edit-section-header" htmlFor={formId}>
                    {intl.formatMessage(messages['profile.country.label'])}
@@ -88,12 +89,7 @@ class Country extends React.Component {
                      <option key={code} value={code}>{name}</option>
                    ))}
                  </select>
-                  {error !== null && (
-                    <Form.Control.Feedback hasIcon={false}>
-                      {error}
-                    </Form.Control.Feedback>
-                  )}
-                </Form.Group>
+                </ValidationFormGroup>
                <FormControls
                  visibilityId="visibilityCountry"
                  saveState={saveState}
--- a/src/profile/forms/Education.jsx
+++ b/src/profile/forms/Education.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import get from 'lodash.get';
-import { Form } from '@edx/paragon';
+import { ValidationFormGroup } from '@edx/paragon';

 import messages from './Education.messages';

@@ -63,9 +63,10 @@ class Education extends React.Component {
          editing: (
            <div role="dialog" aria-labelledby={`${formId}-label`}>
              <form onSubmit={this.handleSubmit}>
-                <Form.Group
-                  controlId={formId}
-                  isInvalid={error !== null}
+                <ValidationFormGroup
+                  for={formId}
+                  invalid={error !== null}
+                  invalidMessage={error}
                >
                  <label className="edit-section-header" htmlFor={formId}>
                    {intl.formatMessage(messages['profile.education.education'])}
@@ -89,12 +90,7 @@ class Education extends React.Component {
                      </option>
                    ))}
                  </select>
-                  {error !== null && (
-                    <Form.Control.Feedback hasIcon={false}>
-                      {error}
-                    </Form.Control.Feedback>
-                  )}
-                </Form.Group>
+                </ValidationFormGroup>
                <FormControls
                  visibilityId="visibilityLevelOfEducation"
                  saveState={saveState}
--- a/src/profile/forms/LearningGoal.jsx
+++ b/src/profile/forms/LearningGoal.jsx
@@ -1,92 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import get from 'lodash.get';
-
-// Mock Data
-import mockData from '../data/mock_data';
-
-import messages from './LearningGoal.messages';
-
-// Components
-import EditableItemHeader from './elements/EditableItemHeader';
-import SwitchContent from './elements/SwitchContent';
-
-// Selectors
-import { editableFormSelector } from '../data/selectors';
-
-const LearningGoal = (props) => {
-  let { learningGoal, editMode, visibilityLearningGoal } = props;
-  const { intl } = props;
-
-  if (!learningGoal) {
-    learningGoal = mockData.learningGoal;
-  }
-
-  if (!editMode || editMode === 'empty') { // editMode defaults to 'empty', not sure why yet
-    editMode = mockData.editMode;
-  }
-
-  if (!visibilityLearningGoal) {
-    visibilityLearningGoal = mockData.visibilityLearningGoal;
-  }
-
-  return (
-    <SwitchContent
-      className="mb-5"
-      expression={editMode}
-      cases={{
-        editable: (
-          <>
-            <EditableItemHeader
-              content={intl.formatMessage(messages['profile.learningGoal.learningGoal'])}
-              showVisibility={visibilityLearningGoal !== null}
-              visibility={visibilityLearningGoal}
-            />
-            <p data-hj-suppress className="lead">
-              {intl.formatMessage(get(
-                messages,
-                `profile.learningGoal.options.${learningGoal}`,
-                messages['profile.learningGoal.options.something_else'],
-              ))}
-            </p>
-          </>
-        ),
-        static: (
-          <>
-            <EditableItemHeader content={intl.formatMessage(messages['profile.learningGoal.learningGoal'])} />
-            <p data-hj-suppress className="lead">
-              {intl.formatMessage(get(
-                messages,
-                `profile.learningGoal.options.${learningGoal}`,
-                messages['profile.learningGoal.options.something_else'],
-              ))}
-            </p>
-          </>
-        ),
-      }}
-    />
-  );
-};
-
-LearningGoal.propTypes = {
-  // From Selector
-  learningGoal: PropTypes.oneOf(['advance_career', 'start_career', 'learn_something_new', 'something_else']),
-  visibilityLearningGoal: PropTypes.oneOf(['private', 'all_users']),
-  editMode: PropTypes.oneOf(['editable', 'static']),
-
-  // i18n
-  intl: intlShape.isRequired,
-};
-
-LearningGoal.defaultProps = {
-  editMode: 'static',
-  learningGoal: null,
-  visibilityLearningGoal: 'private',
-};
-
-export default connect(
-  editableFormSelector,
-  {},
-)(injectIntl(LearningGoal));
--- a/src/profile/forms/LearningGoal.messages.jsx
+++ b/src/profile/forms/LearningGoal.messages.jsx
@@ -1,31 +0,0 @@
-import { defineMessages } from '@edx/frontend-platform/i18n';
-
-const messages = defineMessages({
-  'profile.learningGoal.learningGoal': {
-    id: 'profile.learningGoal.learningGoal',
-    defaultMessage: 'Learning Goal',
-    description: 'A section of a user profile that displays their current learning goal.',
-  },
-  'profile.learningGoal.options.start_career': {
-    id: 'profile.learningGoal.options.start_career',
-    defaultMessage: 'I want to start my career',
-    description: 'Selected by user if their goal is to start their career.',
-  },
-  'profile.learningGoal.options.advance_career': {
-    id: 'profile.learningGoal.options.advance_career',
-    defaultMessage: 'I want to advance my career',
-    description: 'Selected by user if their goal is to advance their career.',
-  },
-  'profile.learningGoal.options.learn_something_new': {
-    id: 'profile.learningGoal.options.learn_something_new',
-    defaultMessage: 'I want to learn something new',
-    description: 'Selected by user if their goal is to learn something new.',
-  },
-  'profile.learningGoal.options.something_else': {
-    id: 'profile.learningGoal.options.something_else',
-    defaultMessage: 'Something else',
-    description: 'Selected by user if their goal is not described by the other choices.',
-  },
-});
-
-export default messages;
--- a/src/profile/forms/LearningGoal.test.jsx
+++ b/src/profile/forms/LearningGoal.test.jsx
@@ -1,122 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { useMemo } from 'react';
-import { Provider } from 'react-redux';
-import renderer from 'react-test-renderer';
-import configureMockStore from 'redux-mock-store';
-import thunk from 'redux-thunk';
-import { configure as configureI18n, IntlProvider } from '@edx/frontend-platform/i18n';
-import { getConfig } from '@edx/frontend-platform';
-import { AppContext } from '@edx/frontend-platform/react';
-import messages from '../../i18n';
-
-import viewOwnProfileMockStore from '../__mocks__/viewOwnProfile.mockStore';
-import savingEditedBioMockStore from '../__mocks__/savingEditedBio.mockStore';
-
-import LearningGoal from './LearningGoal';
-
-const mockStore = configureMockStore([thunk]);
-
-// props to be passed down to LearningGoal component
-const requiredLearningGoalProps = {
-  formId: 'learningGoal',
-  learningGoal: 'advance_career',
-  drafts: {},
-  visibilityLearningGoal: 'private',
-  editMode: 'static',
-  saveState: null,
-  error: null,
-  openHandler: jest.fn(),
-};
-
-configureI18n({
-  loggingService: { logError: jest.fn() },
-  config: {
-    ENVIRONMENT: 'production',
-    LANGUAGE_PREFERENCE_COOKIE_NAME: 'yum',
-  },
-  messages,
-});
-
-const LearningGoalWrapper = (props) => {
-  const contextValue = useMemo(() => ({
-    authenticatedUser: { userId: null, username: null, administrator: false },
-    config: getConfig(),
-  }), []);
-  return (
-    <AppContext.Provider
-      value={contextValue}
-    >
-      <IntlProvider locale="en">
-        <Provider store={props.store}>
-          <LearningGoal {...props} />
-        </Provider>
-      </IntlProvider>
-    </AppContext.Provider>
-  );
-};
-
-LearningGoalWrapper.defaultProps = {
-  store: mockStore(viewOwnProfileMockStore),
-};
-
-LearningGoalWrapper.propTypes = {
-  store: PropTypes.shape({}),
-};
-
-const LearningGoalWrapperWithStore = ({ store }) => {
-  const contextValue = useMemo(() => ({
-    authenticatedUser: { userId: null, username: null, administrator: false },
-    config: getConfig(),
-  }), []);
-  return (
-    <AppContext.Provider
-      value={contextValue}
-    >
-      <IntlProvider locale="en">
-        <Provider store={mockStore(store)}>
-          <LearningGoal {...requiredLearningGoalProps} formId="learningGoal" />
-        </Provider>
-      </IntlProvider>
-    </AppContext.Provider>
-  );
-};
-
-LearningGoalWrapperWithStore.defaultProps = {
-  store: mockStore(savingEditedBioMockStore),
-};
-
-LearningGoalWrapperWithStore.propTypes = {
-  store: PropTypes.shape({}),
-};
-
-describe('<LearningGoal />', () => {
-  describe('renders the current learning goal', () => {
-    it('renders "I want to advance my career"', () => {
-      const learningGoalRenderer = renderer.create(
-        <LearningGoalWrapper
-          {...requiredLearningGoalProps}
-          formId="learningGoal"
-        />,
-      );
-
-      const learningGoalInstance = learningGoalRenderer.root;
-
-      expect(learningGoalInstance.findByProps({ className: 'lead' }).children).toEqual(['I want to advance my career']);
-    });
-
-    it('renders "Something else"', () => {
-      requiredLearningGoalProps.learningGoal = 'something_else';
-
-      const learningGoalRenderer = renderer.create(
-        <LearningGoalWrapper
-          {...requiredLearningGoalProps}
-          formId="learningGoal"
-        />,
-      );
-
-      const learningGoalInstance = learningGoalRenderer.root;
-
-      expect(learningGoalInstance.findByProps({ className: 'lead' }).children).toEqual(['Something else']);
-    });
-  });
-});
--- a/src/profile/forms/PreferredLanguage.jsx
+++ b/src/profile/forms/PreferredLanguage.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Form } from '@edx/paragon';
+import { ValidationFormGroup } from '@edx/paragon';

 import messages from './PreferredLanguage.messages';

@@ -77,9 +77,10 @@ class PreferredLanguage extends React.Component {
          editing: (
            <div role="dialog" aria-labelledby={`${formId}-label`}>
              <form onSubmit={this.handleSubmit}>
-                <Form.Group
-                  controlId={formId}
-                  isInvalid={error !== null}
+                <ValidationFormGroup
+                  for={formId}
+                  invalid={error !== null}
+                  invalidMessage={error}
                >
                  <label className="edit-section-header" htmlFor={formId}>
                    {intl.formatMessage(messages['profile.preferredlanguage.label'])}
@@ -97,12 +98,7 @@ class PreferredLanguage extends React.Component {
                      <option key={code} value={code}>{name}</option>
                    ))}
                  </select>
-                  {error !== null && (
-                    <Form.Control.Feedback hasIcon={false}>
-                      {error}
-                    </Form.Control.Feedback>
-                  )}
-                </Form.Group>
+                </ValidationFormGroup>
                <FormControls
                  visibilityId="visibilityLanguageProficiencies"
                  saveState={saveState}
--- a/src/profile/forms/SocialLinks.jsx
+++ b/src/profile/forms/SocialLinks.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Alert } from '@edx/paragon';
+import { StatusAlert } from '@edx/paragon';
 import { connect } from 'react-redux';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTwitter, faFacebook, faLinkedin } from '@fortawesome/free-brands-svg-icons';
@@ -65,19 +65,6 @@ class SocialLinks extends React.Component {
    }
  }

-  handleSubmit(e) {
-    e.preventDefault();
-    this.props.submitHandler(this.props.formId);
-  }
-
-  handleClose() {
-    this.props.closeHandler(this.props.formId);
-  }
-
-  handleOpen() {
-    this.props.openHandler(this.props.formId);
-  }
-
  mergeWithDrafts(newSocialLink) {
    const knownPlatforms = ['twitter', 'facebook', 'linkedin'];
    const updated = [];
@@ -91,6 +78,19 @@ class SocialLinks extends React.Component {
    return updated;
  }

+  handleSubmit(e) {
+    e.preventDefault();
+    this.props.submitHandler(this.props.formId);
+  }
+
+  handleClose() {
+    this.props.closeHandler(this.props.formId);
+  }
+
+  handleOpen() {
+    this.props.openHandler(this.props.formId);
+  }
+
  render() {
    const {
      socialLinks, visibilitySocialLinks, editMode, saveState, error, intl,
@@ -158,19 +158,14 @@ class SocialLinks extends React.Component {
          ),
          editing: (
            <div role="dialog" aria-labelledby="social-links-label">
-              <form aria-labelledby="editing-form" onSubmit={this.handleSubmit}>
+              <form onSubmit={this.handleSubmit}>
                <EditableItemHeader
                  headingId="social-links-label"
                  content={intl.formatMessage(messages['profile.sociallinks.social.links'])}
                />
                {/* TODO: Replace this alert with per-field errors. Needs API update. */}
                <div id="social-error-feedback">
-                  {error !== null
-                    ? (
-                      <Alert variant="danger" dismissible={false} show>
-                        {error}
-                      </Alert>
-                    ) : null}
+                  {error !== null ? <StatusAlert alertType="danger" dialog={error} dismissible={false} open /> : null}
                </div>
                <ul className="list-unstyled">
                  {socialLinks.map(({ platform, socialLink }) => (
@@ -244,12 +239,14 @@ export default connect(
  {},
 )(injectIntl(SocialLinks));

-const SocialLink = ({ url, name, platform }) => (
-  <a href={url} className="font-weight-bold">
-    <FontAwesomeIcon className="mr-2" icon={platformDisplayInfo[platform].icon} />
-    {name}
-  </a>
-);
+function SocialLink({ url, name, platform }) {
+  return (
+    <a href={url} className="font-weight-bold">
+      <FontAwesomeIcon className="mr-2" icon={platformDisplayInfo[platform].icon} />
+      {name}
+    </a>
+  );
+}

 SocialLink.propTypes = {
  url: PropTypes.string.isRequired,
@@ -257,9 +254,9 @@ SocialLink.propTypes = {
  name: PropTypes.string.isRequired,
 };

-const EditableListItem = ({
+function EditableListItem({
  url, platform, onClickEmptyContent, name,
-}) => {
+}) {
  const linkDisplay = url ? (
    <SocialLink name={name} url={url} platform={platform} />
  ) : (
@@ -267,7 +264,7 @@ const EditableListItem = ({
  );

  return <li className="form-group">{linkDisplay}</li>;
-};
+}

 EditableListItem.propTypes = {
  url: PropTypes.string,
@@ -280,22 +277,24 @@ EditableListItem.defaultProps = {
  onClickEmptyContent: null,
 };

-const EditingListItem = ({
+function EditingListItem({
  platform, name, value, onChange, error,
-}) => (
-  <li className="form-group">
-    <label htmlFor={`social-${platform}`}>{name}</label>
-    <input
-      className={classNames('form-control', { 'is-invalid': Boolean(error) })}
-      type="text"
-      id={`social-${platform}`}
-      name={platform}
-      value={value || ''}
-      onChange={onChange}
-      aria-describedby="social-error-feedback"
-    />
-  </li>
-);
+}) {
+  return (
+    <li className="form-group">
+      <label htmlFor={`social-${platform}`}>{name}</label>
+      <input
+        className={classNames('form-control', { 'is-invalid': Boolean(error) })}
+        type="text"
+        id={`social-${platform}`}
+        name={platform}
+        value={value || ''}
+        onChange={onChange}
+        aria-describedby="social-error-feedback"
+      />
+    </li>
+  );
+}

 EditingListItem.propTypes = {
  platform: PropTypes.string.isRequired,
@@ -310,31 +309,35 @@ EditingListItem.defaultProps = {
  error: null,
 };

-const EmptyListItem = ({ onClick, name }) => (
-  <li className="mb-4">
-    <EmptyContent onClick={onClick}>
-      <FormattedMessage
-        id="profile.sociallinks.add"
-        defaultMessage="Add {network}"
-        values={{
-          network: name,
-        }}
-        description="{network} is the name of a social network such as Facebook or Twitter"
-      />
-    </EmptyContent>
-  </li>
-);
+function EmptyListItem({ onClick, name }) {
+  return (
+    <li className="mb-4">
+      <EmptyContent onClick={onClick}>
+        <FormattedMessage
+          id="profile.sociallinks.add"
+          defaultMessage="Add {network}"
+          values={{
+            network: name,
+          }}
+          description="{network} is the name of a social network such as Facebook or Twitter"
+        />
+      </EmptyContent>
+    </li>
+  );
+}

 EmptyListItem.propTypes = {
  name: PropTypes.string.isRequired,
  onClick: PropTypes.func.isRequired,
 };

-const StaticListItem = ({ name, url, platform }) => (
-  <li className="mb-2">
-    <SocialLink name={name} url={url} platform={platform} />
-  </li>
-);
+function StaticListItem({ name, url, platform }) {
+  return (
+    <li className="mb-2">
+      <SocialLink name={name} url={url} platform={platform} />
+    </li>
+  );
+}

 StaticListItem.propTypes = {
  name: PropTypes.string.isRequired,
--- a/src/profile/forms/SocialLinks.test.jsx
+++ b/src/profile/forms/SocialLinks.test.jsx
@@ -1,169 +0,0 @@
-import { mount } from 'enzyme';
-import PropTypes from 'prop-types';
-import React, { useMemo } from 'react';
-import { Provider } from 'react-redux';
-import renderer from 'react-test-renderer';
-import configureMockStore from 'redux-mock-store';
-import thunk from 'redux-thunk';
-import { configure as configureI18n, IntlProvider } from '@edx/frontend-platform/i18n';
-import { getConfig } from '@edx/frontend-platform';
-import { AppContext } from '@edx/frontend-platform/react';
-
-import SocialLinks from './SocialLinks';
-import * as savingEditedBio from '../__mocks__/savingEditedBio.mockStore';
-import messages from '../../i18n';
-
-const mockStore = configureMockStore([thunk]);
-
-const defaultProps = {
-  formId: 'socialLinks',
-  socialLinks: [
-    {
-      platform: 'facebook',
-      socialLink: 'https://www.facebook.com/aloha',
-    },
-    {
-      platform: 'twitter',
-      socialLink: 'https://www.twitter.com/ALOHA',
-    },
-  ],
-  drafts: {},
-  visibilitySocialLinks: 'private',
-  editMode: 'static',
-  saveState: null,
-  error: null,
-  changeHandler: jest.fn(),
-  submitHandler: jest.fn(),
-  closeHandler: jest.fn(),
-  openHandler: jest.fn(),
-};
-
-configureI18n({
-  loggingService: { logError: jest.fn() },
-  config: {
-    ENVIRONMENT: 'production',
-    LANGUAGE_PREFERENCE_COOKIE_NAME: 'yum',
-  },
-  messages,
-});
-
-const SocialLinksWrapper = (props) => {
-  const contextValue = useMemo(() => ({
-    authenticatedUser: { userId: null, username: null, administrator: false },
-    config: getConfig(),
-  }), []);
-  return (
-    <AppContext.Provider
-      value={contextValue}
-    >
-      <IntlProvider locale="en">
-        <Provider store={props.store}>
-          <SocialLinks {...props} />
-        </Provider>
-      </IntlProvider>
-    </AppContext.Provider>
-  );
-};
-
-SocialLinksWrapper.defaultProps = {
-  store: mockStore(savingEditedBio),
-};
-
-SocialLinksWrapper.propTypes = {
-  store: PropTypes.shape({}),
-};
-
-const SocialLinksWrapperWithStore = ({ store }) => {
-  const contextValue = useMemo(() => ({
-    authenticatedUser: { userId: null, username: null, administrator: false },
-    config: getConfig(),
-  }), []);
-  return (
-    <AppContext.Provider
-      value={contextValue}
-    >
-      <IntlProvider locale="en">
-        <Provider store={mockStore(store)}>
-          <SocialLinks {...defaultProps} formId="bio" />
-        </Provider>
-      </IntlProvider>
-    </AppContext.Provider>
-  );
-};
-
-SocialLinksWrapperWithStore.defaultProps = {
-  store: mockStore(savingEditedBio),
-};
-
-SocialLinksWrapperWithStore.propTypes = {
-  store: PropTypes.shape({}),
-};
-
-describe('<SocialLinks />', () => {
-  ['certificates', 'bio', 'goals', 'socialLinks'].forEach(editMode => (
-    it(`calls social links with edit mode ${editMode}`, () => {
-      const component = <SocialLinksWrapper {...defaultProps} formId={editMode} />;
-      const tree = renderer.create(component).toJSON();
-      expect(tree).toMatchSnapshot();
-    })
-  ));
-
-  it('calls social links with editing', () => {
-    const changeHandler = jest.fn();
-    const submitHandler = jest.fn();
-    const closeHandler = jest.fn();
-    const component = (
-      <SocialLinksWrapper
-        {...defaultProps}
-        formId="bio"
-        changeHandler={changeHandler}
-        submitHandler={submitHandler}
-        closeHandler={closeHandler}
-      />
-    );
-    const wrapper = mount(component);
-    const socialLink = wrapper.find(SocialLinks);
-    const { platform } = defaultProps.socialLinks[0];
-    const inputField = socialLink.find(`#social-${platform}`);
-    inputField.simulate('change', { target: { value: 'test', name: platform } });
-    expect(changeHandler).toHaveBeenCalledTimes(1);
-
-    expect(socialLink.find('#visibilitySocialLinks select').props().value).toBe('private');
-    const event = { target: { value: 'all_users', name: 'visibilitySocialLinks' } };
-    socialLink.find('#visibilitySocialLinks select').simulate('change', event);
-    expect(changeHandler).toHaveBeenCalledTimes(2);
-
-    socialLink.find('[aria-labelledby="editing-form"]').simulate('submit');
-    expect(submitHandler).toHaveBeenCalledTimes(1);
-
-    socialLink.find('[aria-labelledby="editing-form"]').find('Button .btn-link').simulate('click');
-    expect(closeHandler).toHaveBeenCalledTimes(1);
-  });
-
-  it('calls social links with static', () => {
-    const openHandler = jest.fn();
-    const component = (
-      <SocialLinksWrapper
-        {...defaultProps}
-        formId="goals"
-        openHandler={openHandler}
-      />
-    );
-    const wrapper = mount(component);
-    const socialLink = wrapper.find(SocialLinks);
-
-    socialLink.find('EmptyContent button').first().simulate('click');
-    expect(openHandler).toHaveBeenCalledTimes(1);
-  });
-
-  it('calls social links with error', () => {
-    const newStore = JSON.parse(JSON.stringify(savingEditedBio));
-    newStore.profilePage.errors.bio = { userMessage: 'error' };
-
-    const component = <SocialLinksWrapperWithStore store={newStore} />;
-    const wrapper = mount(component);
-    const socialLink = wrapper.find(SocialLinks);
-
-    expect(socialLink.find('.alert-danger').exists()).toBe(true);
-  });
-});
--- a/src/profile/forms/snapshots/SocialLinks.test.jsx.snap
+++ b/src/profile/forms/snapshots/SocialLinks.test.jsx.snap
@@ -1,586 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<SocialLinks /> calls social links with edit mode bio 1`] = `
-<div
-  className="pgn-transition-replace-group position-relative mb-5"
-  style={
-    Object {
-      "height": null,
-    }
-  }
->
-  <div
-    style={
-      Object {
-        "padding": ".1px 0",
-      }
-    }
-  >
-    <div
-      aria-labelledby="social-links-label"
-      role="dialog"
-    >
-      <form
-        aria-labelledby="editing-form"
-        onSubmit={[Function]}
-      >
-        <div
-          className="editable-item-header mb-2"
-        >
-          <h2
-            className="edit-section-header"
-            id="social-links-label"
-          >
-            Social Links
-          </h2>
-        </div>
-        <div
-          id="social-error-feedback"
-        />
-        <ul
-          className="list-unstyled"
-        >
-          <li
-            className="form-group"
-          >
-            <label
-              htmlFor="social-facebook"
-            >
-              Facebook
-            </label>
-            <input
-              aria-describedby="social-error-feedback"
-              className="form-control"
-              id="social-facebook"
-              name="facebook"
-              onChange={[Function]}
-              type="text"
-              value="https://www.facebook.com/aloha"
-            />
-          </li>
-          <li
-            className="form-group"
-          >
-            <label
-              htmlFor="social-twitter"
-            >
-              Twitter
-            </label>
-            <input
-              aria-describedby="social-error-feedback"
-              className="form-control"
-              id="social-twitter"
-              name="twitter"
-              onChange={[Function]}
-              type="text"
-              value="https://www.twitter.com/ALOHA"
-            />
-          </li>
-        </ul>
-        <div
-          className="d-flex flex-row-reverse flex-wrap justify-content-end align-items-center"
-        >
-          <div
-            className="form-group d-flex flex-wrap"
-          >
-            <label
-              className="col-form-label"
-              htmlFor="visibilitySocialLinks"
-            >
-              Who can see this:
-            </label>
-            <span
-              className="d-flex align-items-center"
-            >
-              <span
-                className="d-inline-block ml-1 mr-2"
-                style={
-                  Object {
-                    "width": "1.5rem",
-                  }
-                }
-              >
-                <svg
-                  aria-hidden="true"
-                  className="svg-inline--fa fa-eye-slash fa-w-20 "
-                  data-icon="eye-slash"
-                  data-prefix="far"
-                  focusable="false"
-                  role="img"
-                  style={Object {}}
-                  viewBox="0 0 640 512"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M634 471L36 3.51A16 16 0 0 0 13.51 6l-10 12.49A16 16 0 0 0 6 41l598 467.49a16 16 0 0 0 22.49-2.49l10-12.49A16 16 0 0 0 634 471zM296.79 146.47l134.79 105.38C429.36 191.91 380.48 144 320 144a112.26 112.26 0 0 0-23.21 2.47zm46.42 219.07L208.42 260.16C210.65 320.09 259.53 368 320 368a113 113 0 0 0 23.21-2.46zM320 112c98.65 0 189.09 55 237.93 144a285.53 285.53 0 0 1-44 60.2l37.74 29.5a333.7 333.7 0 0 0 52.9-75.11 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64c-36.7 0-71.71 7-104.63 18.81l46.41 36.29c18.94-4.3 38.34-7.1 58.22-7.1zm0 288c-98.65 0-189.08-55-237.93-144a285.47 285.47 0 0 1 44.05-60.19l-37.74-29.5a333.6 333.6 0 0 0-52.89 75.1 32.35 32.35 0 0 0 0 29.19C89.72 376.41 197.08 448 320 448c36.7 0 71.71-7.05 104.63-18.81l-46.41-36.28C359.28 397.2 339.89 400 320 400z"
-                    fill="currentColor"
-                    style={Object {}}
-                  />
-                </svg>
-              </span>
-              <select
-                className="d-inline-block w-auto form-control"
-                id="visibilitySocialLinks"
-                name="visibilitySocialLinks"
-                onChange={[Function]}
-                type="select"
-                value="private"
-              >
-                <option
-                  value="private"
-                >
-                  Just me
-                </option>
-                <option
-                  value="all_users"
-                >
-                  Everyone on localhost
-                </option>
-              </select>
-            </span>
-          </div>
-          <div
-            className="form-group flex-shrink-0 flex-grow-1"
-          >
-            <button
-              aria-disabled={false}
-              aria-live="assertive"
-              className="pgn__stateful-btn pgn__stateful-btn-state-pending btn btn-primary"
-              disabled={false}
-              onClick={[Function]}
-              type="submit"
-            >
-              <span
-                className="d-flex align-items-center justify-content-center"
-              >
-                <span
-                  className="pgn__stateful-btn-icon"
-                >
-                  <span
-                    className="pgn__icon icon-spin"
-                  >
-                    <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="M22 12A10 10 0 1 1 6.122 3.91l1.176 1.618A8 8 0 1 0 20 12h2Z"
-                        fill="currentColor"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span>
-                  Saving
-                </span>
-              </span>
-            </button>
-            <button
-              className="btn btn-link"
-              disabled={false}
-              onClick={[Function]}
-              type="button"
-            >
-              Cancel
-            </button>
-          </div>
-        </div>
-      </form>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<SocialLinks /> calls social links with edit mode certificates 1`] = `
-<div
-  className="pgn-transition-replace-group position-relative mb-5"
-  style={
-    Object {
-      "height": null,
-    }
-  }
->
-  <div
-    style={
-      Object {
-        "padding": ".1px 0",
-      }
-    }
-  >
-    <div
-      className="editable-item-header mb-2"
-    >
-      <h2
-        className="edit-section-header"
-        id={null}
-      >
-        Social Links
-        <button
-          className="float-right px-0 btn btn-link btn-sm"
-          disabled={false}
-          onClick={[Function]}
-          style={
-            Object {
-              "marginTop": "-.35rem",
-            }
-          }
-          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={Object {}}
-            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={Object {}}
-            />
-          </svg>
-          Edit
-        </button>
-      </h2>
-      <p
-        className="mb-0"
-      >
-        <span
-          className="ml-auto small text-muted"
-        >
-          <svg
-            aria-hidden="true"
-            className="svg-inline--fa fa-eye-slash fa-w-20 "
-            data-icon="eye-slash"
-            data-prefix="far"
-            focusable="false"
-            role="img"
-            style={Object {}}
-            viewBox="0 0 640 512"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M634 471L36 3.51A16 16 0 0 0 13.51 6l-10 12.49A16 16 0 0 0 6 41l598 467.49a16 16 0 0 0 22.49-2.49l10-12.49A16 16 0 0 0 634 471zM296.79 146.47l134.79 105.38C429.36 191.91 380.48 144 320 144a112.26 112.26 0 0 0-23.21 2.47zm46.42 219.07L208.42 260.16C210.65 320.09 259.53 368 320 368a113 113 0 0 0 23.21-2.46zM320 112c98.65 0 189.09 55 237.93 144a285.53 285.53 0 0 1-44 60.2l37.74 29.5a333.7 333.7 0 0 0 52.9-75.11 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64c-36.7 0-71.71 7-104.63 18.81l46.41 36.29c18.94-4.3 38.34-7.1 58.22-7.1zm0 288c-98.65 0-189.08-55-237.93-144a285.47 285.47 0 0 1 44.05-60.19l-37.74-29.5a333.6 333.6 0 0 0-52.89 75.1 32.35 32.35 0 0 0 0 29.19C89.72 376.41 197.08 448 320 448c36.7 0 71.71-7.05 104.63-18.81l-46.41-36.28C359.28 397.2 339.89 400 320 400z"
-              fill="currentColor"
-              style={Object {}}
-            />
-          </svg>
-           
-          Just me
-        </span>
-      </p>
-    </div>
-    <ul
-      className="list-unstyled"
-    >
-      <li
-        className="form-group"
-      >
-        <a
-          className="font-weight-bold"
-          href="https://www.facebook.com/aloha"
-        >
-          <svg
-            aria-hidden="true"
-            className="svg-inline--fa fa-facebook fa-w-16 mr-2"
-            data-icon="facebook"
-            data-prefix="fab"
-            focusable="false"
-            role="img"
-            style={Object {}}
-            viewBox="0 0 512 512"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"
-              fill="currentColor"
-              style={Object {}}
-            />
-          </svg>
-          Facebook
-        </a>
-      </li>
-      <li
-        className="form-group"
-      >
-        <a
-          className="font-weight-bold"
-          href="https://www.twitter.com/ALOHA"
-        >
-          <svg
-            aria-hidden="true"
-            className="svg-inline--fa fa-twitter fa-w-16 mr-2"
-            data-icon="twitter"
-            data-prefix="fab"
-            focusable="false"
-            role="img"
-            style={Object {}}
-            viewBox="0 0 512 512"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
-              fill="currentColor"
-              style={Object {}}
-            />
-          </svg>
-          Twitter
-        </a>
-      </li>
-    </ul>
-  </div>
-</div>
-`;
-
-exports[`<SocialLinks /> calls social links with edit mode goals 1`] = `
-<div
-  className="pgn-transition-replace-group position-relative mb-5"
-  style={
-    Object {
-      "height": null,
-    }
-  }
->
-  <div
-    style={
-      Object {
-        "padding": ".1px 0",
-      }
-    }
-  >
-    <div
-      className="editable-item-header mb-2"
-    >
-      <h2
-        className="edit-section-header"
-        id={null}
-      >
-        Social Links
-      </h2>
-    </div>
-    <ul
-      className="list-unstyled"
-    >
-      <li
-        className="mb-4"
-      >
-        <div>
-          <button
-            className="pl-0 text-left btn btn-link"
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            tabIndex={0}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-plus fa-w-14 fa-xs mr-2"
-              data-icon="plus"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 448 512"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-                fill="currentColor"
-                style={Object {}}
-              />
-            </svg>
-            Add Facebook
-          </button>
-        </div>
-      </li>
-      <li
-        className="mb-4"
-      >
-        <div>
-          <button
-            className="pl-0 text-left btn btn-link"
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            tabIndex={0}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-plus fa-w-14 fa-xs mr-2"
-              data-icon="plus"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 448 512"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-                fill="currentColor"
-                style={Object {}}
-              />
-            </svg>
-            Add Twitter
-          </button>
-        </div>
-      </li>
-    </ul>
-  </div>
-</div>
-`;
-
-exports[`<SocialLinks /> calls social links with edit mode socialLinks 1`] = `
-<div
-  className="pgn-transition-replace-group position-relative mb-5"
-  style={
-    Object {
-      "height": null,
-    }
-  }
->
-  <div
-    style={
-      Object {
-        "padding": ".1px 0",
-      }
-    }
-  >
-    <div
-      className="editable-item-header mb-2"
-    >
-      <h2
-        className="edit-section-header"
-        id={null}
-      >
-        Social Links
-        <button
-          className="float-right px-0 btn btn-link btn-sm"
-          disabled={false}
-          onClick={[Function]}
-          style={
-            Object {
-              "marginTop": "-.35rem",
-            }
-          }
-          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={Object {}}
-            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={Object {}}
-            />
-          </svg>
-          Edit
-        </button>
-      </h2>
-      <p
-        className="mb-0"
-      >
-        <span
-          className="ml-auto small text-muted"
-        >
-          <svg
-            aria-hidden="true"
-            className="svg-inline--fa fa-eye-slash fa-w-20 "
-            data-icon="eye-slash"
-            data-prefix="far"
-            focusable="false"
-            role="img"
-            style={Object {}}
-            viewBox="0 0 640 512"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M634 471L36 3.51A16 16 0 0 0 13.51 6l-10 12.49A16 16 0 0 0 6 41l598 467.49a16 16 0 0 0 22.49-2.49l10-12.49A16 16 0 0 0 634 471zM296.79 146.47l134.79 105.38C429.36 191.91 380.48 144 320 144a112.26 112.26 0 0 0-23.21 2.47zm46.42 219.07L208.42 260.16C210.65 320.09 259.53 368 320 368a113 113 0 0 0 23.21-2.46zM320 112c98.65 0 189.09 55 237.93 144a285.53 285.53 0 0 1-44 60.2l37.74 29.5a333.7 333.7 0 0 0 52.9-75.11 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64c-36.7 0-71.71 7-104.63 18.81l46.41 36.29c18.94-4.3 38.34-7.1 58.22-7.1zm0 288c-98.65 0-189.08-55-237.93-144a285.47 285.47 0 0 1 44.05-60.19l-37.74-29.5a333.6 333.6 0 0 0-52.89 75.1 32.35 32.35 0 0 0 0 29.19C89.72 376.41 197.08 448 320 448c36.7 0 71.71-7.05 104.63-18.81l-46.41-36.28C359.28 397.2 339.89 400 320 400z"
-              fill="currentColor"
-              style={Object {}}
-            />
-          </svg>
-           
-          Just me
-        </span>
-      </p>
-    </div>
-    <ul
-      className="list-unstyled"
-    >
-      <li
-        className="form-group"
-      >
-        <a
-          className="font-weight-bold"
-          href="https://www.facebook.com/aloha"
-        >
-          <svg
-            aria-hidden="true"
-            className="svg-inline--fa fa-facebook fa-w-16 mr-2"
-            data-icon="facebook"
-            data-prefix="fab"
-            focusable="false"
-            role="img"
-            style={Object {}}
-            viewBox="0 0 512 512"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"
-              fill="currentColor"
-              style={Object {}}
-            />
-          </svg>
-          Facebook
-        </a>
-      </li>
-      <li
-        className="form-group"
-      >
-        <a
-          className="font-weight-bold"
-          href="https://www.twitter.com/ALOHA"
-        >
-          <svg
-            aria-hidden="true"
-            className="svg-inline--fa fa-twitter fa-w-16 mr-2"
-            data-icon="twitter"
-            data-prefix="fab"
-            focusable="false"
-            role="img"
-            style={Object {}}
-            viewBox="0 0 512 512"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
-              fill="currentColor"
-              style={Object {}}
-            />
-          </svg>
-          Twitter
-        </a>
-      </li>
-    </ul>
-  </div>
-</div>
-`;
--- a/src/profile/forms/elements/EditButton.jsx
+++ b/src/profile/forms/elements/EditButton.jsx
@@ -7,20 +7,22 @@ import { Button } from '@edx/paragon';

 import messages from './EditButton.messages';

-const EditButton = ({
+function EditButton({
  onClick, className, style, intl,
-}) => (
-  <Button
-    variant="link"
-    size="sm"
-    className={className}
-    onClick={onClick}
-    style={style}
-  >
-    <FontAwesomeIcon className="mr-1" icon={faPencilAlt} />
-    {intl.formatMessage(messages['profile.editbutton.edit'])}
-  </Button>
-);
+}) {
+  return (
+    <Button
+      variant="link"
+      size="sm"
+      className={className}
+      onClick={onClick}
+      style={style}
+    >
+      <FontAwesomeIcon className="mr-1" icon={faPencilAlt} />
+      {intl.formatMessage(messages['profile.editbutton.edit'])}
+    </Button>
+  );
+}

 export default injectIntl(EditButton);

--- a/src/profile/forms/elements/EditableItemHeader.jsx
+++ b/src/profile/forms/elements/EditableItemHeader.jsx
@@ -4,22 +4,26 @@ import PropTypes from 'prop-types';
 import EditButton from './EditButton';
 import { Visibility } from './Visibility';

-const EditableItemHeader = ({
+function EditableItemHeader({
  content,
  showVisibility,
  visibility,
  showEditButton,
  onClickEdit,
  headingId,
-}) => (
-  <div className="editable-item-header mb-2">
-    <h2 className="edit-section-header" id={headingId}>
-      {content}
-      {showEditButton ? <EditButton style={{ marginTop: '-.35rem' }} className="float-right px-0" onClick={onClickEdit} /> : null}
-    </h2>
-    {showVisibility ? <p className="mb-0"><Visibility to={visibility} /></p> : null}
-  </div>
-);
+}) {
+  return (
+    <>
+      <div className="editable-item-header mb-2">
+        <h2 className="edit-section-header" id={headingId}>
+          {content}
+          {showEditButton ? <EditButton style={{ marginTop: '-.35rem' }} className="float-right px-0" onClick={onClickEdit} /> : null}
+        </h2>
+        {showVisibility ? <p className="mb-0"><Visibility to={visibility} /></p> : null}
+      </div>
+    </>
+  );
+}

 export default EditableItemHeader;

--- a/src/profile/forms/elements/EmptyContent.jsx
+++ b/src/profile/forms/elements/EmptyContent.jsx
@@ -3,22 +3,24 @@ import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faPlus } from '@fortawesome/free-solid-svg-icons';

-const EmptyContent = ({ children, onClick, showPlusIcon }) => (
-  <div>
-    {onClick ? (
-      <button
-        type="button"
-        className="pl-0 text-left btn btn-link"
-        onClick={onClick}
-        onKeyDown={(e) => { if (e.key === 'Enter') { onClick(); } }}
-        tabIndex={0}
-      >
-        {showPlusIcon ? <FontAwesomeIcon size="xs" className="mr-2" icon={faPlus} /> : null}
-        {children}
-      </button>
-    ) : children}
-  </div>
-);
+function EmptyContent({ children, onClick, showPlusIcon }) {
+  return (
+    <div>
+      {onClick ? (
+        <button
+          type="button"
+          className="pl-0 text-left btn btn-link"
+          onClick={onClick}
+          onKeyDown={(e) => { if (e.key === 'Enter') { onClick(); } }}
+          tabIndex={0}
+        >
+          {showPlusIcon ? <FontAwesomeIcon size="xs" className="mr-2" icon={faPlus} /> : null}
+          {children}
+        </button>
+      ) : children}
+    </div>
+  );
+}

 export default EmptyContent;

--- a/src/profile/forms/elements/FormControls.jsx
+++ b/src/profile/forms/elements/FormControls.jsx
@@ -7,9 +7,9 @@ import messages from './FormControls.messages';

 import { VisibilitySelect } from './Visibility';

-const FormControls = ({
+function FormControls({
  cancelHandler, changeHandler, visibility, visibilityId, saveState, intl,
-}) => {
+}) {
  // Eliminate error/failed state for save button
  const buttonState = saveState === 'error' ? null : saveState;

@@ -57,7 +57,7 @@ const FormControls = ({
      </div>
    </div>
  );
-};
+}

 export default injectIntl(FormControls);

--- a/src/profile/forms/elements/SwitchContent.jsx
+++ b/src/profile/forms/elements/SwitchContent.jsx
@@ -22,7 +22,7 @@ const onChildExit = (htmlNode) => {
  }
 };

-const SwitchContent = ({ expression, cases, className }) => {
+function SwitchContent({ expression, cases, className }) {
  const getContent = (caseKey) => {
    if (cases[caseKey]) {
      if (typeof cases[caseKey] === 'string') {
@@ -48,7 +48,7 @@ const SwitchContent = ({ expression, cases, className }) => {
      {getContent(expression)}
    </TransitionReplace>
  );
-};
+}

 SwitchContent.propTypes = {
  expression: PropTypes.string,
--- a/src/profile/forms/elements/Visibility.jsx
+++ b/src/profile/forms/elements/Visibility.jsx
@@ -1,24 +1,23 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { getConfig } from '@edx/frontend-platform';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faEyeSlash, faEye } from '@fortawesome/free-regular-svg-icons';

 import messages from './Visibility.messages';

-const Visibility = ({ to, intl }) => {
+function Visibility({ to, intl }) {
  const icon = to === 'private' ? faEyeSlash : faEye;
  const label = to === 'private'
    ? intl.formatMessage(messages['profile.visibility.who.just.me'])
-    : intl.formatMessage(messages['profile.visibility.who.everyone'], { siteName: getConfig().SITE_NAME });
+    : intl.formatMessage(messages['profile.visibility.who.everyone']);

  return (
    <span className="ml-auto small text-muted">
      <FontAwesomeIcon icon={icon} /> {label}
    </span>
  );
-};
+}

 Visibility.propTypes = {
  to: PropTypes.oneOf(['private', 'all_users']),
@@ -30,7 +29,7 @@ Visibility.defaultProps = {
  to: 'private',
 };

-const VisibilitySelect = ({ intl, className, ...props }) => {
+function VisibilitySelect({ intl, className, ...props }) {
  const { value } = props;
  const icon = value === 'private' ? faEyeSlash : faEye;

@@ -44,12 +43,12 @@ const VisibilitySelect = ({ intl, className, ...props }) => {
          {intl.formatMessage(messages['profile.visibility.who.just.me'])}
        </option>
        <option key="all_users" value="all_users">
-          {intl.formatMessage(messages['profile.visibility.who.everyone'], { siteName: getConfig().SITE_NAME })}
+          {intl.formatMessage(messages['profile.visibility.who.everyone'])}
        </option>
      </select>
    </span>
  );
-};
+}

 VisibilitySelect.propTypes = {
  id: PropTypes.string,
--- a/src/profile/forms/elements/Visibility.messages.jsx
+++ b/src/profile/forms/elements/Visibility.messages.jsx
@@ -8,7 +8,7 @@ const messages = defineMessages({
  },
  'profile.visibility.who.everyone': {
    id: 'profile.visibility.who.everyone',
-    defaultMessage: 'Everyone on {siteName}',
+    defaultMessage: 'Everyone on edX',
    description: 'What users can see this area?',
  },
 });
--- a/src/profile/index.scss
+++ b/src/profile/index.scss
@@ -23,28 +23,6 @@
  background-size: auto 85%;
 }

-.username-description {
-  width: auto;
-  position: absolute;
-  left: 1.5rem;
-  top: 5.25rem;
-  color: $gray-500;
-  line-height: 0.9rem;
-  font-size: 0.8rem;
-  font-style: normal;
-  font-weight: 400;
-  margin-left: 0.9rem;
-}
-
-.mb-2rem {
-  margin-bottom: 2rem;
-}
-
-.icon-visibility-off {
-  height: 1rem;
-  color: $gray-500;
-}
-
 .profile-page {
  .edit-section-header {
    @extend .h6;
--- a/src/routes/AppRoutes.jsx
+++ b/src/routes/AppRoutes.jsx
@@ -1,17 +0,0 @@
-import React from 'react';
-import {
-  AuthenticatedPageRoute,
-  PageWrap,
-} from '@edx/frontend-platform/react';
-import { Routes, Route } from 'react-router-dom';
-import { ProfilePage, NotFoundPage } from '../profile';
-
-const AppRoutes = () => (
-  <Routes>
-    <Route path="/u/:username" element={<AuthenticatedPageRoute><ProfilePage /></AuthenticatedPageRoute>} />
-    <Route path="/notfound" element={<PageWrap><NotFoundPage /></PageWrap>} />
-    <Route path="*" element={<PageWrap><NotFoundPage /></PageWrap>} />
-  </Routes>
-);
-
-export default AppRoutes;
--- a/src/routes/routes.test.jsx
+++ b/src/routes/routes.test.jsx
@@ -1,63 +0,0 @@
-import React from 'react';
-import { AppContext } from '@edx/frontend-platform/react';
-import { getConfig } from '@edx/frontend-platform';
-import { MemoryRouter as Router } from 'react-router-dom';
-import { render, screen } from '@testing-library/react';
-import { getLoginRedirectUrl } from '@edx/frontend-platform/auth';
-import AppRoutes from './AppRoutes';
-
-jest.mock('@edx/frontend-platform/analytics');
-
-jest.mock('@edx/frontend-platform/auth', () => ({
-  getLoginRedirectUrl: jest.fn(),
-}));
-
-jest.mock('../profile', () => ({
-  ProfilePage: () => (<div>Profile page</div>),
-  NotFoundPage: () => (<div>Not found page</div>),
-}));
-
-const RoutesWithProvider = (context, path) => (
-  <AppContext.Provider value={context}>
-    <Router initialEntries={[`${path}`]}>
-      <AppRoutes />
-    </Router>
-  </AppContext.Provider>
-);
-
-const unauthenticatedUser = {
-  authenticatedUser: null,
-  config: getConfig(),
-};
-
-describe('routes', () => {
-  test('Profile page should redirect for unauthenticated users', () => {
-    render(
-      RoutesWithProvider(unauthenticatedUser, '/u/edx'),
-    );
-    expect(getLoginRedirectUrl).toHaveBeenCalled();
-  });
-
-  test('Profile page should be accessible for authenticated users', () => {
-    render(
-      RoutesWithProvider(
-        {
-          authenticatedUser: {
-            username: 'edx',
-            email: 'edx@example.com',
-          },
-          config: getConfig(),
-        },
-        '/u/edx',
-      ),
-    );
-    expect(screen.getByText('Profile page')).toBeTruthy();
-  });
-
-  test('should show NotFound page for a bad route', () => {
-    render(
-      RoutesWithProvider(unauthenticatedUser, '/nonMatchingRoute'),
-    );
-    expect(screen.getByText('Not found page')).toBeTruthy();
-  });
-});
--- a/src/setupTest.js
+++ b/src/setupTest.js
@@ -2,6 +2,6 @@ import 'core-js/stable';
 import 'regenerator-runtime/runtime';

 import Enzyme from 'enzyme';
-import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import Adapter from 'enzyme-adapter-react-16';

 Enzyme.configure({ adapter: new Adapter() });
--- a/src/utils/hoc.jsx
+++ b/src/utils/hoc.jsx
@@ -1,10 +0,0 @@
-import React from 'react';
-
-import { useParams } from 'react-router-dom';
-
-const withParams = (WrappedComponent) => {
-  const WithParamsComponent = (props) => <WrappedComponent params={useParams()} {...props} />;
-  return WithParamsComponent;
-};
-
-export default withParams;
Author	SHA1	Message	Date
Régis Behmo	85f943b1e4	Merge pull request #516 from Dicey-Tech/bbrsofiane/maple-upgrade-deps chore: upgrade versions of frontend-build and frontend-component-header	2021-12-20 17:52:58 +01:00
Sofiane Bebert	c81802c8e8	chore: upgrade versions of frontend-build and frontend-component-header	2021-12-20 16:45:47 +00:00