fix: replace injected Plugins directory with dependency

---------

Co-authored-by: jsnwesson <jsnwesson@users.noreply.github.com>

.env

@@ -1,32 +1,29 @@
-NODE_ENV=null
-ACCESS_TOKEN_COOKIE_NAME=null
-BASE_URL=null
-CREDENTIALS_BASE_URL=null
-CSRF_TOKEN_API_PATH=null
-ECOMMERCE_BASE_URL=null
-LANGUAGE_PREFERENCE_COOKIE_NAME=null
-LMS_BASE_URL=null
-LOGIN_URL=null
-LOGOUT_URL=null
-MARKETING_SITE_BASE_URL=null
-ORDER_HISTORY_URL=null
-REFRESH_ACCESS_TOKEN_ENDPOINT=null
-SEGMENT_KEY=null
-SITE_NAME=null
-USER_INFO_COOKIE_NAME=null
-APPLE_APP_STORE_URL=null
-CONTACT_URL=null
-ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM=null
-ENTERPRISE_MARKETING_URL=null
-ENTERPRISE_MARKETING_UTM_CAMPAIGN=null
-ENTERPRISE_MARKETING_UTM_SOURCE=null
-FACEBOOK_URL=null
-GOOGLE_PLAY_URL=null
-LINKED_IN_URL=null
-OPEN_SOURCE_URL=null
-PRIVACY_POLICY_URL=null
-REDDIT_URL=null
-SUPPORT_URL=null
-TERMS_OF_SERVICE_URL=null
-TWITTER_URL=null
-YOU_TUBE_URL=null
+NODE_ENV='production'
+ACCESS_TOKEN_COOKIE_NAME=''
+BASE_URL=''
+CREDENTIALS_BASE_URL=''
+CSRF_TOKEN_API_PATH=''
+ECOMMERCE_BASE_URL=''
+LANGUAGE_PREFERENCE_COOKIE_NAME=''
+LMS_BASE_URL=''
+LOGIN_URL=''
+LOGOUT_URL=''
+MARKETING_SITE_BASE_URL=''
+ORDER_HISTORY_URL=''
+REFRESH_ACCESS_TOKEN_ENDPOINT=''
+SEGMENT_KEY=''
+SITE_NAME=''
+USER_INFO_COOKIE_NAME=''
+CONTACT_URL=''
+ENTERPRISE_LEARNER_PORTAL_HOSTNAME=''
+SUPPORT_URL=''
+TERMS_OF_SERVICE_URL=''
+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=''

.env.development

@@ -8,26 +8,23 @@ ECOMMERCE_BASE_URL='http://localhost:18130'
 LANGUAGE_PREFERENCE_COOKIE_NAME='openedx-language-preference'
 LMS_BASE_URL='http://localhost:18000'
 LOGIN_URL='http://localhost:18000/login'
-LOGOUT_URL='http://localhost:18000/login'
+LOGOUT_URL='http://localhost:18000/logout'
 MARKETING_SITE_BASE_URL='http://localhost:18000'
-ORDER_HISTORY_URL='localhost:1996/orders'
+ORDER_HISTORY_URL='http://localhost:1996/orders'
 REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
-SEGMENT_KEY=null
-SITE_NAME='edX'
+SEGMENT_KEY=''
+SITE_NAME=localhost
 USER_INFO_COOKIE_NAME='edx-user-info'
-APPLE_APP_STORE_URL='https://www.apple.com/ios/app-store/'
 CONTACT_URL='http://localhost:18000/contact'
-ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM='Footer'
-ENTERPRISE_MARKETING_URL='http://example.com'
-ENTERPRISE_MARKETING_UTM_CAMPAIGN='my_campaign'
-ENTERPRISE_MARKETING_UTM_SOURCE='edX profile'
-FACEBOOK_URL='https://www.facebook.com'
-GOOGLE_PLAY_URL='https://play.google.com/store'
-LINKED_IN_URL='https://www.linkedin.com'
-OPEN_SOURCE_URL='http://localhost:18000/openedx'
-PRIVACY_POLICY_URL='http://localhost:18000/privacy-policy'
-REDDIT_URL='https://www.reddit.com'
+ENTERPRISE_LEARNER_PORTAL_HOSTNAME='http://localhost:8080'
 SUPPORT_URL='http://localhost:18000/support'
 TERMS_OF_SERVICE_URL='http://localhost:18000/terms-of-service'
-TWITTER_URL='https://twitter.com'
-YOU_TUBE_URL='https://www.youtube.com'
+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=''

.env.test

@@ -6,10 +6,20 @@ ECOMMERCE_BASE_URL='http://localhost:18130'
 LANGUAGE_PREFERENCE_COOKIE_NAME='openedx-language-preference'
 LMS_BASE_URL='http://localhost:18000'
 LOGIN_URL='http://localhost:18000/login'
-LOGOUT_URL='http://localhost:18000/login'
+LOGOUT_URL='http://localhost:18000/logout'
 MARKETING_SITE_BASE_URL='http://localhost:18000'
-ORDER_HISTORY_URL='localhost:1996/orders'
+ORDER_HISTORY_URL='http://localhost:1996/orders'
 REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
 SEGMENT_KEY=null
-SITE_NAME='edX'
+SITE_NAME=localhost
 USER_INFO_COOKIE_NAME='edx-user-info'
+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
+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=''

.eslintrc.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
 const { createConfig } = require('@edx/frontend-build');
 
-module.exports = createConfig('eslint');
+module.exports = createConfig('eslint');

.github/workflows/add-depr-ticket-to-depr-board.yml

@@ -0,0 +1,19 @@
+# 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 }}

.github/workflows/add-remove-label-on-comment.yml

@@ -0,0 +1,20 @@
+# 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
+

.github/workflows/ci.yml

@@ -0,0 +1,29 @@
+name: ci
+on:
+  push:
+    branches:
+    - master
+  pull_request:
+jobs:
+  tests:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        npm-test:
+        - i18n_extract
+        - lint
+        - test
+    steps:
+    - uses: actions/checkout@v3
+    - name: Setup Nodejs Env
+      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
+    - uses: actions/setup-node@v3
+      with:
+        node-version: ${{ env.NODE_VER }}
+    - 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
+      with:
+        fail_ci_if_error: false

.github/workflows/commitlint.yml

@@ -0,0 +1,10 @@
+# Run commitlint on the commit messages in a pull request.
+
+name: Lint Commit Messages
+
+on:
+  - pull_request
+
+jobs:
+  commitlint:
+    uses: openedx/.github/.github/workflows/commitlint.yml@master

.github/workflows/lockfileversion-check.yml

@@ -0,0 +1,13 @@
+#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

.github/workflows/self-assign-issue.yml

@@ -0,0 +1,12 @@
+# 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

.github/workflows/update-browserslist-db.yml

@@ -0,0 +1,12 @@
+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 }}

.gitignore

@@ -14,6 +14,6 @@ temp/babel-plugin-react-intl
 
 ### Emacs ###
 *~
-/.vscode
 /temp
-/npm-dist
+/.vscode
+/module.config.js

.nvmrc

@@ -0,0 +1 @@
+18

.releaserc

@@ -1,27 +0,0 @@
-{
-  "branch": "master",
-  "tagFormat": "v${version}",
-  "verifyConditions": [
-    "@semantic-release/npm",
-    {
-      "path": "@semantic-release/github",
-      "assets": {
-        "path": "npm-dist/*"
-      }
-    }
-  ],
-  "analyzeCommits": "@semantic-release/commit-analyzer",
-  "generateNotes": "@semantic-release/release-notes-generator",
-  "prepare": "@semantic-release/npm",
-  "publish": [
-    "@semantic-release/npm",
-    {
-      "path": "@semantic-release/github",
-      "assets": {
-        "path": "npm-dist/*"
-      }
-    }
-  ],
-  "success": [],
-  "fail": []
-}

.travis.yml

@@ -1,23 +0,0 @@
-language: node_js
-node_js: 12
-before_install:
-- npm install -g npm@6
-install:
-- npm ci
-script:
-- make validate-no-uncommitted-package-lock-changes
-- npm run i18n_extract
-- npm run lint
-- npm run test
-- npm run build
-- npm run npm-build
-- npm run is-es5
-after_success:
-- npx semantic-release
-- codecov
-env:
-  global:
-  # GH_TOKEN
-  - secure: qvCsyn5Ioj+b/gvX95yaQ+Vha+r60pGxuKFm6HzVbnWJyKAbR1NN8+RpIo0HUD9S5RPEFjLae82bLa2g/syS+D1DU9qF8NYderjy58bjibgrPdC1YOhi2SEY5u6TW6/T88+w9DyfZ6MF883lJi/6uzs24bHE13RguARlO79OeGvHk6SecoJSWe9yq2IHA0wAScKrvS64+AcUWyTDUvkrxHEvupVJs6aJ6EsdPALODLJ7JnXX7Rh+68nyqbezh+ZnumxBPkdCzUNdtO9C0o7JjV6/P1xg9rNre/huWGx4SYndPaPEmoOpWEfyCZw1ub83LHC1HBnE7eRJku/CmiaiaLGSfeU2sCRteBLlSyI5fEOQ4Su2xLu2k+Yuczj4BlIbjr+xC+bNg+WbOF8vj7TL4/YCxOG/8V4nLfDcHFsZDsPoYZyBe9Z5HsS77S5ZrutQ3i/qR+4zfs4X/QfPXfW3MqI7+oGo+PVNPgxI24i2Kwq5+ZUjnmkVnuGC5ZOZMN8aYojEvqdF+u5VALL/YCmXsXysL6BUsqv4kiZJpQEVBG0WPbh0FJH8qiB8OjLGogxkoSrL4Yd++o4fnSAvW1UgARIlJ0iHVf5r/wVei1KCQiFS6mh0Pwq1lM0Vo2SlTCF5UylnV80Hv7XY6Sp9dYi/EaVG1dv4DyJOHnPti1JAM/U=
-  # NPM_TOKEN
-  - secure: S6spzx4jJGWqucSwjaSdPEaNWlwzA75FisK+NoLFDY6uU7KIi2dayHiFlSW1C1vl5xQkkosHXJAInSwcnQMCUomCEuD1FFzydXA1/Dn8NmPc35coKR4CX9yJiArRbjZZjboCulrTPUVWHWoPfA7JTnqCDgOnXspgRKy7emzFLXkdn8vuUQcyXmmT/vDfQQjgq/T+DdBbMiradMvlTzxmKydAVeHAZ03A1Z5O6ePnR6IsFv4LgJ/RfGn501jHeTww6HsxfQX27tWLo5AyQ00YjMl9oXfs57n5u+em/ph3Xoc8Pz6wjkMLJ+eYo+xkYjoZ3d+/f+WXPLMBUNz0LpIBs7LcBHhAc2z4N+dce42CTXur/v8ra0BZEnZQsvOakHvox6KisDDlipPqc0yF7MgThbd31fc8QjdVxdh5w7tLH4PJ7QpBUtZwPskDLABKjnrxkxH+BysHADvVaNOBcZMwIA9yHY3GqzpyQ2upcS07h5a+SHx07viuA7hEn14XCtYrM1AHwS0n2sNdinb0qWOCcGOXzl39FU3N6xNueKoH/eIXuqJ7oiUkKBiSP9zApTApPL6nrng0InZhGjzZHOMNePPdin/uIrxk/fp/wqneGTQemCGRkfHdPT0yuIP22bUv/OmDtgNEG9t9hbIZGYgQmG4FTeTQQ7lC5RjmLrn+uWI=

.tx/config

@@ -1,8 +1,9 @@
 [main]
 host = https://www.transifex.com
 
-[edx-platform.frontend-app-profile]
+[o:open-edx:p:edx-platform:r:frontend-app-profile]
 file_filter = src/i18n/messages/<lang>.json
 source_file = src/i18n/transifex_input.json
 source_lang = en
-type = KEYVALUEJSON
+type        = KEYVALUEJSON
+

Makefile

@@ -1,17 +1,27 @@
+export TRANSIFEX_RESOURCE = frontend-app-profile
 transifex_resource = frontend-app-profile
-transifex_langs = "ar,fr,es_419,zh_CN"
+transifex_langs = "ar,de,de_DE,es_419,fa_IR,fr,fr_CA,hi,it,it_IT,pt,pt_PT,ru,uk,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
+transifex_temp = ./temp/babel-plugin-formatjs
 
-requirements:
-	npm install
+NPM_TESTS=build i18n_extract lint test
+
+.PHONY: test
+test: $(addprefix test.npm.,$(NPM_TESTS))  ## validate ci suite
+
+.PHONY: test.npm.*
+test.npm.%: validate-no-uncommitted-package-lock-changes
+	test -d node_modules || $(MAKE) requirements
+	npm run $(*)
+
+.PHONY: requirements
+requirements:  ## install ci requirements
+	npm ci
 
 i18n.extract:
 	# Pulling display strings from .jsx files into .json files...
@@ -34,24 +44,32 @@ push_translations:
 	# Pushing strings to Transifex...
 	tx push -s
 	# Fetching hashes from Transifex...
-	./node_modules/reactifex/bash_scripts/get_hashed_strings.sh $(tx_url1)
+	./node_modules/@edx/reactifex/bash_scripts/get_hashed_strings_v3.sh
 	# Writing out comments to file...
-	$(transifex_utils) $(transifex_temp) --comments
+	$(transifex_utils) $(transifex_temp) --comments --v3-scripts-path
 	# Pushing comments to Transifex...
-	./node_modules/reactifex/bash_scripts/put_comments.sh $(tx_url2)
+	./node_modules/@edx/reactifex/bash_scripts/put_comments_v3.sh
 
+ifeq ($(OPENEDX_ATLAS_PULL),)
 # Pulls translations from Transifex.
 pull_translations:
-	tx pull -f --mode reviewed --language=$(transifex_langs)
+	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
 
 # This target is used by Travis.
 validate-no-uncommitted-package-lock-changes:
 	# Checking for package-lock.json changes...
 	git diff --exit-code package-lock.json
-
-npm-build:
-	rm -rf ./npm-dist
-	./node_modules/.bin/fedx-scripts babel src/profile --out-dir npm-dist --source-maps --ignore **/*.test.jsx,**/*.test.js,**/setupTest.js --copy-files
-	@# --copy-files will bring in everything else that wasn't processed by babel. Remove what we don't want.
-	@find npm-dist -name '*.test.js*' -delete
-	@rm -rf ./npm-dist/__mocks__

README.rst

@@ -1,70 +1,147 @@
-|Build Status| |Codecov| |npm_version| |npm_downloads| |license| |semantic-release|
-
+#####################
 frontend-app-profile
-====================
+#####################
 
-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.
+|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.
 
 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
+***************
 
-Development
------------
+Installation
+============
 
-Start Devstack
-^^^^^^^^^^^^^^
+Follow these steps to provision, run, and enable an instance of the
+Profile MFE for local development via the `devstack`_.
 
-To use this application `devstack <https://github.com/edx/devstack>`__ must be running and you must be logged into it.
+.. _devstack: https://github.com/openedx/devstack#getting-started
 
--  Start devstack
--  Log in (http://localhost:18000/login)
+#. To use this application, `devstack <https://github.com/openedx/devstack>`__ must be running and you must be logged into it.
 
-Start the development server
-^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   * Start devstack
+   * Log in (http://localhost:18000/login)
 
-In this project, install requirements and start the development server by running:
+#. To run Profile, install requirements and start the development server by running:
 
-.. code:: bash
+.. code-block::
 
-   npm install
-   npm start # The server will run on port 1995
+  1. Clone your new repo:
 
-Once the dev server is up visit http://localhost:1995/u/staff.
+    ``git clone https://github.com/openedx/frontend-app-profile.git``
 
-----------
+  2. Use node v18.x.
 
-Configuration and Deployment
-----------------------------
+    The current version of the micro-frontend build scripts support node 18.
+    Using other major versions of node *may* work, but this is unsupported.  For
+    convenience, this repository includes an .nvmrc file to help in setting the
+    correct node version via `nvm <https://github.com/nvm-sh/nvm>`_.
+
+  3. Install npm dependencies:
+
+    ``cd frontend-app-profile && npm ci``
+
+  4. Start the dev server:
+
+    ``npm start``
+     The server will run on port 1995
+
+Once the dev server is up, visit http://localhost:1995/u/staff.
+
+Configuration
+=============
 
 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:: bash
+.. code-block::
 
    NODE_ENV=production ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload' npm run build
 
+Getting Help
+============
 
-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>`__.
+If you're having trouble, we have discussion forums at
+https://discuss.openedx.org where you can connect with others in the community.
 
-----------
+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`_.
 
-Notes
------
+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.
 
-The production Webpack configuration for this repo uses `Purgecss <https://www.purgecss.com/>`__ to remove unused CSS from the production css file. In ``webpack.prod.config.js`` the Purgecss plugin is configured to scan directories to determine what css selectors should remain. Currently the src/ directory is scanned along with all ``@edx/frontend-component*`` node modules and ``@edx/paragon``. **If you add and use a component in this repo that relies on HTML classes or ids for styling you must add it to the Purgecss configuration or it will be unstyled in the production build.**
+https://github.com/openedx/frontend-app-profile/issues
 
-.. |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
-.. |npm_version| image:: https://img.shields.io/npm/v/@edx/frontend-app-profile.svg
-   :target: https://www.npmjs.com/package/@edx/frontend-app-profile
-.. |npm_downloads| image:: https://img.shields.io/npm/dt/@edx/frontend-app-profile.svg
-   :target: https://www.npmjs.com/package/@edx/frontend-app-profile
-.. |license| image:: https://img.shields.io/npm/l/@edx/frontend-app-profile.svg
-   :target: @edx/frontend-app-profile
-.. |semantic-release| image:: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg
-   :target: https://github.com/semantic-release/semantic-release
+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.

catalog-info.yaml

@@ -0,0 +1,24 @@
+# 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.

commitlint.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  extends: ['@commitlint/config-angular'],
-};

openedx.yaml

@@ -1,6 +1,6 @@
 # This file describes this Open edX repo, as described in OEP-2:
-# http://open-edx-proposals.readthedocs.io/en/latest/oeps/oep-0002.html#specification
+# https://open-edx-proposals.readthedocs.io/en/latest/oep-0002-bp-repo-metadata.html#specification
 
 nick: prof
 oeps: {}
-owner: edx/arch-team
+openedx-release: {ref: master}

package.json

@@ -4,91 +4,79 @@
   "description": "User profile micro-frontend for Open edX",
   "author": "edX",
   "license": "AGPL-3.0",
-  "main": "npm-dist/index.js",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/edx/frontend-app-profile.git"
+    "url": "git+https://github.com/openedx/frontend-app-profile.git"
   },
   "scripts": {
     "build": "fedx-scripts webpack",
-    "npm-build": "make npm-build",
-    "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
-    "is-es5": "es-check es5 ./dist/*.js",
-    "lint": "fedx-scripts eslint",
+    "i18n_extract": "fedx-scripts formatjs extract",
+    "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
-    "test": "fedx-scripts jest --coverage --passWithNoTests"
-  },
-  "files": [
-    "/npm-dist"
-  ],
-  "husky": {
-    "hooks": {
-      "pre-commit": "npm run lint",
-      "commit-msg": "commitlint -e $GIT_PARAMS"
-    }
+    "test": "TZ=UTC fedx-scripts jest --coverage --passWithNoTests",
+    "stubs": "pact-stub-service ./src/pacts/frontend-app-profile-edx-platform.json --port 18000"
   },
   "bugs": {
-    "url": "https://github.com/edx/frontend-app-profile/issues"
+    "url": "https://github.com/openedx/frontend-app-profile/issues"
   },
-  "homepage": "https://github.com/edx/frontend-app-profile#readme",
+  "homepage": "https://github.com/openedx/frontend-app-profile#readme",
   "publishConfig": {
     "access": "public"
   },
   "browserslist": [
-    "last 2 versions",
-    "ie 11"
+    "extends @edx/browserslist-config"
   ],
   "dependencies": {
-    "@edx/frontend-component-footer": "10.0.5",
-    "@edx/frontend-component-header": "2.0.3",
-    "@edx/frontend-platform": "1.1.9",
-    "@edx/paragon": "7.1.3",
-    "@fortawesome/fontawesome-svg-core": "1.2.25",
-    "@fortawesome/free-brands-svg-icons": "5.7.2",
-    "@fortawesome/free-regular-svg-icons": "5.7.2",
-    "@fortawesome/free-solid-svg-icons": "5.7.2",
-    "@fortawesome/react-fontawesome": "0.1.8",
-    "babel-polyfill": "6.26.0",
-    "classnames": "2.2.6",
-    "email-prop-type": "1.1.7",
-    "font-awesome": "4.7.0",
-    "form-urlencoded": "3.0.2",
-    "history": "4.7.2",
+    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
+    "@edx/frontend-component-footer": "12.5.1",
+    "@edx/frontend-component-header": "4.8.0",
+    "@edx/frontend-platform": "5.6.1",
+    "@edx/frontend-plugin-framework": "openedx/frontend-plugin-framework#jwesson/install-plugins",
+    "@edx/paragon": "^20.44.0",
+    "@fortawesome/fontawesome-svg-core": "1.2.36",
+    "@fortawesome/free-brands-svg-icons": "5.15.4",
+    "@fortawesome/free-regular-svg-icons": "5.15.4",
+    "@fortawesome/free-solid-svg-icons": "5.15.4",
+    "@fortawesome/react-fontawesome": "0.2.0",
+    "@pact-foundation/pact": "^11.0.2",
+    "classnames": "2.3.2",
+    "core-js": "3.33.1",
+    "history": "5.3.0",
     "lodash.camelcase": "4.3.0",
     "lodash.get": "4.4.2",
-    "lodash.memoize": "4.1.2",
     "lodash.pick": "4.4.0",
     "lodash.snakecase": "4.1.1",
-    "newrelic": "5.5.0",
-    "prop-types": "15.7.2",
-    "react": "16.9.0",
-    "react-dom": "16.9.0",
-    "react-redux": "7.1.3",
-    "react-router": "5.0.1",
-    "react-router-dom": "5.0.1",
-    "react-transition-group": "4.3.0",
-    "redux": "4.0.4",
-    "redux-devtools-extension": "2.13.8",
+    "prop-types": "15.8.1",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-error-boundary": "^4.0.11",
+    "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",
+    "redux-devtools-extension": "2.13.9",
     "redux-logger": "3.0.6",
-    "redux-saga": "1.0.5",
-    "redux-thunk": "2.3.0",
-    "reselect": "4.0.0",
-    "universal-cookie": "3.1.0"
+    "redux-saga": "1.2.3",
+    "redux-thunk": "2.4.2",
+    "regenerator-runtime": "0.14.0",
+    "reselect": "4.1.8",
+    "universal-cookie": "4.0.4"
   },
   "devDependencies": {
-    "@commitlint/cli": "8.2.0",
-    "@commitlint/config-angular": "8.2.0",
-    "@edx/frontend-build": "2.0.4",
-    "codecov": "3.6.1",
-    "enzyme": "3.10.0",
-    "enzyme-adapter-react-16": "1.15.1",
-    "es-check": "5.0.0",
-    "glob": "7.1.6",
-    "husky": "3.1.0",
-    "purgecss-webpack-plugin": "1.6.0",
-    "react-test-renderer": "16.9.0",
+    "@commitlint/cli": "17.8.1",
+    "@commitlint/config-angular": "17.8.1",
+    "@edx/browserslist-config": "^1.1.1",
+    "@edx/frontend-build": "13.0.4",
+    "@edx/reactifex": "2.2.0",
+    "@testing-library/react": "12.1.5",
+    "@wojtekmaj/enzyme-adapter-react-17": "0.8.0",
+    "codecov": "3.8.3",
+    "enzyme": "3.11.0",
+    "glob": "10.3.10",
+    "react-test-renderer": "17.0.2",
     "reactifex": "1.1.1",
-    "redux-mock-store": "1.5.3"
+    "redux-mock-store": "1.5.4"
   }
 }

plugins/Plugin.jsx

@@ -0,0 +1,93 @@
+'use client';
+
+import React, {
+  useEffect, useMemo, useState,
+} from 'react';
+import PropTypes from 'prop-types';
+import { ErrorBoundary } from 'react-error-boundary';
+import { logError } from '@edx/frontend-platform/logging';
+import {
+  dispatchMountedEvent, dispatchReadyEvent, dispatchUnmountedEvent, useHostEvent,
+} from './data/hooks';
+import { PLUGIN_RESIZE } from './data/constants';
+
+// see example-plugin-app/src/PluginOne.jsx for example of customizing errorFallback
+function errorFallbackDefault() {
+  return (
+    <div>
+      <h2>
+        Oops! An error occurred. Please refresh the screen to try again.
+      </h2>
+    </div>
+  );
+}
+
+// eslint-disable-next-line react/function-component-definition
+export default function Plugin({
+  children, className, style, ready, errorFallbackProp,
+}) {
+  const [dimensions, setDimensions] = useState({
+    width: null,
+    height: null,
+  });
+
+  const finalStyle = useMemo(() => ({
+    ...dimensions,
+    ...style,
+  }), [dimensions, style]);
+
+  const errorFallback = errorFallbackProp || errorFallbackDefault;
+
+  // Error logging function
+  // Need to confirm: When an error is caught here, the logging will be sent to the child MFE's logging service
+  const logErrorToService = (error, info) => {
+    logError(error, { stack: info.componentStack });
+  };
+
+  useHostEvent(PLUGIN_RESIZE, ({ payload }) => {
+    setDimensions({
+      width: payload.width,
+      height: payload.height,
+    });
+  });
+
+  useEffect(() => {
+    dispatchMountedEvent();
+
+    return () => {
+      dispatchUnmountedEvent();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (ready) {
+      dispatchReadyEvent();
+    }
+  }, [ready]);
+
+  return (
+    <div className={className} style={finalStyle}>
+      <ErrorBoundary
+        FallbackComponent={errorFallback}
+        onError={logErrorToService}
+      >
+        {children}
+      </ErrorBoundary>
+    </div>
+  );
+}
+
+Plugin.propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  errorFallbackProp: PropTypes.func,
+  ready: PropTypes.bool,
+  style: PropTypes.object, // eslint-disable-line
+};
+
+Plugin.defaultProps = {
+  className: null,
+  errorFallbackProp: null,
+  style: {},
+  ready: true,
+};

plugins/PluginContainer.jsx

@@ -0,0 +1,42 @@
+'use client';
+
+import React from 'react';
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import PluginContainerIframe from './PluginContainerIframe';
+
+import {
+  IFRAME_PLUGIN,
+} from './data/constants';
+import { pluginConfigShape } from './data/shapes';
+
+// eslint-disable-next-line react/function-component-definition
+export default function PluginContainer({ config, ...props }) {
+  if (config === null) {
+    return null;
+  }
+
+  // this will allow for future plugin types to be inserted in the PluginErrorBoundary
+  let renderer = null;
+  switch (config.type) {
+    case IFRAME_PLUGIN:
+      renderer = (
+        <PluginContainerIframe config={config} {...props} />
+      );
+      break;
+    // istanbul ignore next: default isn't meaningful, just satisfying linter
+    default:
+  }
+
+  return (
+    renderer
+  );
+}
+
+PluginContainer.propTypes = {
+  config: pluginConfigShape,
+};
+
+PluginContainer.defaultProps = {
+  config: null,
+};

plugins/PluginContainerIframe.jsx

@@ -0,0 +1,99 @@
+import React, {
+  useEffect, useState,
+} from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import {
+  PLUGIN_MOUNTED,
+  PLUGIN_READY,
+  PLUGIN_RESIZE,
+} from './data/constants';
+import {
+  dispatchPluginEvent,
+  useElementSize,
+  usePluginEvent,
+} from './data/hooks';
+import { pluginConfigShape } from './data/shapes';
+
+/**
+ * Feature policy for iframe, allowing access to certain courseware-related media.
+ *
+ * We must use the wildcard (*) origin for each feature, as courseware content
+ * may be embedded in external iframes. Notably, xblock-lti-consumer is a popular
+ * block that iframes external course content.
+
+ * This policy was selected in conference with the edX Security Working Group.
+ * Changes to it should be vetted by them (security@edx.org).
+ */
+export const IFRAME_FEATURE_POLICY = (
+  'fullscreen; microphone *; camera *; midi *; geolocation *; encrypted-media *'
+);
+
+// eslint-disable-next-line react/function-component-definition
+export default function PluginContainerIframe({
+  config, fallback, className, ...props
+}) {
+  const { url } = config;
+  const { title, scrolling } = props;
+  const [mounted, setMounted] = useState(false);
+  const [ready, setReady] = useState(false);
+
+  const [iframeRef, iframeElement, width, height] = useElementSize();
+
+  useEffect(() => {
+    if (mounted) {
+      dispatchPluginEvent(iframeElement, {
+        type: PLUGIN_RESIZE,
+        payload: {
+          width,
+          height,
+        },
+      }, url);
+    }
+  }, [iframeElement, mounted, width, height, url]);
+
+  usePluginEvent(iframeElement, PLUGIN_MOUNTED, () => {
+    setMounted(true);
+  });
+
+  usePluginEvent(iframeElement, PLUGIN_READY, () => {
+    setReady(true);
+  });
+
+  return (
+    <>
+      <iframe
+        ref={iframeRef}
+        title={title}
+        src={url}
+        allow={IFRAME_FEATURE_POLICY}
+        scrolling={scrolling}
+        referrerPolicy="origin" // The sent referrer will be limited to the origin of the referring page: its scheme, host, and port.
+        className={classNames(
+          'border border-0',
+          { 'd-none': !ready },
+          className,
+        )}
+        {...props}
+      />
+      {!ready && fallback}
+    </>
+  );
+}
+
+PluginContainerIframe.propTypes = {
+  config: pluginConfigShape,
+  fallback: PropTypes.node,
+  scrolling: PropTypes.oneOf(['auto', 'yes', 'no']),
+  title: PropTypes.string,
+  className: PropTypes.string,
+};
+
+PluginContainerIframe.defaultProps = {
+  config: null,
+  fallback: null,
+  scrolling: 'auto',
+  title: null,
+  className: null,
+};

plugins/PluginErrorBoundary.jsx

@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { FormattedMessage } from 'react-intl';
+
+import { logError } from '@edx/frontend-platform/logging';
+
+export default class PluginErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError() {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, info) {
+    logError(error, { stack: info.componentStack });
+  }
+
+  render() {
+    if (this.state.hasError) {
+      // You can render any custom fallback UI
+      return (
+        <FormattedMessage
+          id="plugin.load.failure.text"
+          defaultMessage="This content failed to load."
+          description="error message when an unexpected error occurs"
+        />
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+PluginErrorBoundary.propTypes = {
+  children: PropTypes.node,
+};
+
+PluginErrorBoundary.defaultProps = {
+  children: null,
+};

plugins/PluginSlot.jsx

@@ -0,0 +1,75 @@
+/* eslint-disable no-unused-vars */
+import React, { forwardRef } from 'react';
+
+import classNames from 'classnames';
+import { Spinner } from '@edx/paragon';
+import PropTypes from 'prop-types';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+// import { usePluginSlot } from './data/hooks';
+import PluginContainer from './PluginContainer';
+
+const PluginSlot = forwardRef(({
+  as, id, intl, pluginProps, children, ...props
+}, ref) => {
+  /* the plugins below are obtained by the id passed into PluginSlot by the Host MFE. See example/src/PluginsPage.jsx
+  for an example of how PluginSlot is populated, and example/src/index.jsx for a dummy JS config that holds all plugins
+  */
+  // const { plugins, keepDefault } = usePluginSlot(id);
+
+  const { fallback } = pluginProps;
+
+  // TODO: Add internationalization to the "Loading" text on the spinner.
+  let finalFallback = (
+    <div className={classNames(pluginProps.className, 'd-flex justify-content-center align-items-center')}>
+      <Spinner animation="border" screenReaderText="Loading" />
+    </div>
+  );
+  if (fallback !== undefined) {
+    finalFallback = fallback;
+  }
+
+  let finalChildren = [];
+  // if (plugins.length > 0) {
+  // if (keepDefault) {
+  //   finalChildren.push(children);
+  // }
+  // plugins.forEach((pluginConfig) => {
+  //   finalChildren.push(
+  //     <PluginContainer
+  //       key={pluginConfig.url}
+  //       config={pluginConfig}
+  //       fallback={finalFallback}
+  //       {...pluginProps}
+  //     />,
+  //   );
+  // });
+  // } else {
+  finalChildren = children;
+  // }
+
+  return React.createElement(
+    as,
+    {
+      ...props,
+      ref,
+    },
+    finalChildren,
+  );
+});
+
+export default injectIntl(PluginSlot);
+
+PluginSlot.propTypes = {
+  as: PropTypes.elementType,
+  children: PropTypes.node,
+  id: PropTypes.string.isRequired,
+  intl: intlShape.isRequired,
+  pluginProps: PropTypes.object, // eslint-disable-line
+};
+
+PluginSlot.defaultProps = {
+  as: 'div',
+  children: null,
+  pluginProps: {},
+};

plugins/data/constants.js

@@ -0,0 +1,8 @@
+// TODO: We expect other plugin types to be added here, such as LTI_PLUGIN and BUILD_TIME_PLUGIN.
+export const IFRAME_PLUGIN = 'IFRAME_PLUGIN'; // loads iframe at the URL, rather than loading a JS file.
+
+// Plugin lifecycle events
+export const PLUGIN_MOUNTED = 'PLUGIN_MOUNTED';
+export const PLUGIN_READY = 'PLUGIN_READY';
+export const PLUGIN_UNMOUNTED = 'PLUGIN_UNMOUNTED';
+export const PLUGIN_RESIZE = 'PLUGIN_RESIZE';

plugins/data/hooks.js

@@ -0,0 +1,96 @@
+import {
+  useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState,
+} from 'react';
+import { PLUGIN_MOUNTED, PLUGIN_READY, PLUGIN_UNMOUNTED } from './constants';
+
+export function useMessageEvent(srcWindow, type, callback) {
+  useLayoutEffect(() => {
+    const listener = (event) => {
+      // Filter messages to those from our source window.
+      if (event.source === srcWindow) {
+        if (event.data.type === type) {
+          callback({ type, payload: event.data.payload });
+        }
+      }
+    };
+    if (srcWindow !== null) {
+      global.addEventListener('message', listener);
+    }
+    return () => {
+      global.removeEventListener('message', listener);
+    };
+  }, [srcWindow, type, callback]);
+}
+
+export function useHostEvent(type, callback) {
+  useMessageEvent(global.parent, type, callback);
+}
+
+export function usePluginEvent(iframeElement, type, callback) {
+  const contentWindow = iframeElement ? iframeElement.contentWindow : null;
+  useMessageEvent(contentWindow, type, callback);
+}
+
+export function dispatchMessageEvent(targetWindow, message, targetOrigin) {
+  // Checking targetOrigin falsiness here since '', null or undefined would all be reasons not to
+  // try to post a message to the origin.
+  if (targetOrigin) {
+    targetWindow.postMessage(message, targetOrigin);
+  }
+}
+
+export function dispatchPluginEvent(iframeElement, message, targetOrigin) {
+  dispatchMessageEvent(iframeElement.contentWindow, message, targetOrigin);
+}
+
+export function dispatchHostEvent(message) {
+  dispatchMessageEvent(global.parent, message, global.document.referrer);
+}
+
+export function dispatchReadyEvent() {
+  dispatchHostEvent({ type: PLUGIN_READY });
+}
+
+export function dispatchMountedEvent() {
+  dispatchHostEvent({ type: PLUGIN_MOUNTED });
+}
+
+export function dispatchUnmountedEvent() {
+  dispatchHostEvent({ type: PLUGIN_UNMOUNTED });
+}
+
+export function useElementSize() {
+  const observerRef = useRef();
+
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+  const [offset, setOffset] = useState({ x: 0, y: 0 });
+
+  const [element, setElement] = useState(null);
+
+  const measuredRef = useCallback(_element => {
+    setElement(_element);
+  }, []);
+
+  useEffect(() => {
+    observerRef.current = new ResizeObserver(() => {
+      if (element) {
+        setDimensions({
+          width: element.clientWidth,
+          height: element.clientHeight,
+        });
+        setOffset({
+          x: element.offsetLeft,
+          y: element.offsetTop,
+        });
+      }
+    });
+    if (element) {
+      observerRef.current.observe(element);
+    }
+  }, [element]);
+
+  return useMemo(
+    () => ([measuredRef, element, dimensions.width, dimensions.height, offset.x, offset.y]),
+    [measuredRef, element, dimensions, offset],
+  );
+}

plugins/data/shapes.js

@@ -0,0 +1,10 @@
+/* eslint-disable import/prefer-default-export */
+import PropTypes from 'prop-types';
+import { IFRAME_PLUGIN } from './constants';
+
+export const pluginConfigShape = PropTypes.shape({
+  url: PropTypes.string.isRequired,
+  type: PropTypes.oneOf([IFRAME_PLUGIN]).isRequired,
+  // This is a place for us to put any generic props we want to pass to the component.  We need it.
+  props: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+});

plugins/index.js

@@ -0,0 +1,18 @@
+// export {
+//   usePluginSlot,
+// } from './data/hooks';
+export {
+  default as Plugin,
+} from './Plugin';
+export {
+  default as PluginContainer,
+} from './PluginContainer';
+export {
+  default as PluginSlot,
+} from './PluginSlot';
+export {
+  IFRAME_PLUGIN,
+} from './data/constants';
+export {
+  default as PluginErrorBoundary,
+} from './PluginErrorBoundary';

public/index.html

@@ -1,12 +1,10 @@
 <!doctype html>
 <html lang="en-us">
   <head>
-      <title>Learner Profile | edX</title>
+      <title>Learner Profile | <%= process.env.SITE_NAME %></title>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
-      <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
-      <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
-      <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
+      <link rel="shortcut icon" href="<%=htmlWebpackPlugin.options.FAVICON_URL%>" type="image/x-icon" />
   </head>
   <body>
     <div id="root"></div>

renovate.json

@@ -1,9 +1,33 @@
 {
   "extends": [
-    "config:base"
+    "config:base",
+    "schedule:weekly",
+    ":automergeLinters",
+    ":automergeMinor",
+    ":automergeTesters",
+    ":enableVulnerabilityAlerts",
+    ":rebaseStalePrs",
+    ":semanticCommits",
+    ":updateNotScheduled"
   ],
-  "patch": {
-    "automerge": true
-  },
-  "rebaseStalePrs": true
+  "packageRules": [
+    {
+      "matchDepTypes": [
+        "devDependencies"
+      ],
+      "matchUpdateTypes": [
+        "lockFileMaintenance",
+        "minor",
+        "patch",
+        "pin"
+      ],
+      "automerge": true
+    },
+    {
+      "matchPackagePatterns": ["@edx", "@openedx"],
+      "matchUpdateTypes": ["minor", "patch"],
+      "automerge": true
+    }
+  ],
+  "timezone": "America/New_York"
 }

src/data/reducers.js

@@ -2,9 +2,8 @@ import { combineReducers } from 'redux';
 
 import { reducer as profilePage } from '../profile';
 
-const createRootReducer = () =>
-  combineReducers({
-    profilePage,
-  });
+const createRootReducer = () => combineReducers({
+  profilePage,
+});
 
 export default createRootReducer;

src/head/Head.jsx

@@ -0,0 +1,21 @@
+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);

src/head/Head.test.jsx

@@ -0,0 +1,17 @@
+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);
+  });
+});

src/head/messages.js

@@ -0,0 +1,11 @@
+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;

src/i18n/index.js

@@ -0,0 +1,44 @@
+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,
+];

src/i18n/index.jsx

@@ -1,32 +0,0 @@
-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;

src/i18n/messages/ar.json

@@ -1,51 +1,57 @@
 {
-  "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",
-  "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 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",
-  "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.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}."
 }

src/i18n/messages/ca.json

@@ -1 +0,0 @@
-{}

src/i18n/messages/de.json

@@ -0,0 +1,57 @@
+{
+  "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}."
+}

src/i18n/messages/de_DE.json

@@ -0,0 +1,57 @@
+{
+  "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."
+}

src/i18n/messages/es_419.json

@@ -1,6 +1,6 @@
 {
-  "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.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.set.date": "Establece tu fecha de nacimiento",
   "profile.datejoined.member.since": "Miembro desde {year}",
   "profile.bio.empty": "Añade una breve biografía",
@@ -33,7 +33,12 @@
   "profile.formcontrols.button.saving": "Guardando",
   "profile.formcontrols.button.saved": "Guardado",
   "profile.visibility.who.just.me": "Solo yo",
-  "profile.visibility.who.everyone": "Todos en edX",
+  "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.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",
@@ -47,5 +52,6 @@
   "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.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}."
 }

src/i18n/messages/fa_IR.json

@@ -0,0 +1,57 @@
+{
+  "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} می‌توانند ببینند."
+}

src/i18n/messages/fr.json

@@ -1,51 +1,57 @@
 {
-  "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",
-  "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.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.set.date": "Définissez 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 de certificats.",
+  "profile.certificates.my.certificates": "Mes certificats",
+  "profile.certificates.view.certificate": "Voir le certificat",
+  "profile.certificates.types.verified": "Certificat vérifié",
+  "profile.certificates.types.professional": "Certificat professionnel",
+  "profile.certificates.types.unknown": "Certificat",
+  "profile.country.label": "Localisation",
+  "profile.country.empty": "Ajouter localisation",
+  "profile.education.empty": "Ajouter une éducation",
   "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 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",
-  "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.education.levels.p": "Doctorat",
+  "profile.education.levels.m": "Master ou diplôme professionnel",
+  "profile.education.levels.b": "Diplôme de licence",
+  "profile.education.levels.a": "Grade de l'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 diplôme",
+  "profile.education.levels.o": "Autre niveau d'étude",
+  "profile.editbutton.edit": "Modifier",
+  "profile.formcontrols.who.can.see": "Qui peut voir ça :",
+  "profile.formcontrols.button.cancel": "Annuler",
+  "profile.formcontrols.button.save": "Enregistrer",
+  "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.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",
+  "profile.preferredlanguage.empty": "Ajouter une langue",
+  "profile.preferredlanguage.label": "Langue principale parlée",
+  "profile.profileavatar.upload-button": "Envoyer la photo",
+  "profile.profileavatar.remove.button": "Supprimer",
+  "profile.image.alt.attribute": "Profil avatar",
+  "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": "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}."
 }

src/i18n/messages/fr_CA.json

@@ -0,0 +1,57 @@
+{
+  "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}."
+}

src/i18n/messages/he.json

@@ -1 +0,0 @@
-{}

src/i18n/messages/hi.json

@@ -0,0 +1,57 @@
+{
+  "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}."
+}

src/i18n/messages/id.json

@@ -1 +0,0 @@
-{}

src/i18n/messages/it.json

@@ -0,0 +1,57 @@
+{
+  "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}."
+}

src/i18n/messages/it_IT.json

@@ -0,0 +1,57 @@
+{
+  "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}."
+}

src/i18n/messages/ko_kr.json

@@ -1 +0,0 @@
-{}

src/i18n/messages/pl.json

@@ -1 +0,0 @@
-{}

src/i18n/messages/pt.json

@@ -0,0 +1,57 @@
+{
+  "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}."
+}

src/i18n/messages/pt_PT.json

@@ -0,0 +1,57 @@
+{
+  "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}."
+}

src/i18n/messages/pt_br.json

@@ -1 +0,0 @@
-{}

src/i18n/messages/ru.json

@@ -1 +1,57 @@
-{}
+{
+  "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}."
+}

src/i18n/messages/th.json

@@ -1 +0,0 @@
-{}

src/i18n/messages/uk.json

@@ -1 +1,57 @@
-{}
+{
+  "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}."
+}

src/i18n/messages/zh_CN.json

@@ -1,6 +1,6 @@
 {
-  "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.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",
@@ -33,7 +33,12 @@
   "profile.formcontrols.button.saving": "Saving",
   "profile.formcontrols.button.saved": "Saved",
   "profile.visibility.who.just.me": "Just me",
-  "profile.visibility.who.everyone": "Everyone on edX",
+  "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",
@@ -47,5 +52,6 @@
   "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.loading": "Profile loading...",
+  "profile.username.description": "Your profile information is only visible to you. Only your username is visible to others on {siteName}."
 }

src/index.jsx

@@ -1,34 +1,52 @@
-import 'babel-polyfill';
+import 'core-js/stable';
+import 'regenerator-runtime/runtime';
 
-import { APP_INIT_ERROR, APP_READY, initialize, subscribe } from '@edx/frontend-platform';
-import { AppProvider, ErrorPage } from '@edx/frontend-platform/react';
+import {
+  APP_INIT_ERROR,
+  APP_READY,
+  initialize,
+  mergeConfig,
+  subscribe,
+} from '@edx/frontend-platform';
+import {
+  AppProvider,
+  ErrorPage,
+} from '@edx/frontend-platform/react';
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Route, Switch } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 
-import Header, { messages as headerMessages } from '@edx/frontend-component-header';
-import Footer, { messages as footerMessages } from '@edx/frontend-component-footer';
+import Header from '@edx/frontend-component-header';
+import Footer from '@edx/frontend-component-footer';
 
-import appMessages from './i18n';
-import { ProfilePage, NotFoundPage } from './profile';
+import messages from './i18n';
 import configureStore from './data/configureStore';
 
 import './index.scss';
-import './assets/favicon.ico';
+import Head from './head/Head';
+
+import AppRoutes from './routes/AppRoutes';
+
+const RenderFooter = () => {
+  const location = useLocation();
+  return location.pathname.includes('/plugin') ? null : <Footer />;
+};
+
+const RenderHeader = () => {
+  const location = useLocation();
+  return location.pathname.includes('/plugin') ? null : <Header />;
+};
 
 subscribe(APP_READY, () => {
   ReactDOM.render(
     <AppProvider store={configureStore()}>
-      <Header />
-      <main>
-        <Switch>
-          <Route path="/u/:username" component={ProfilePage} />
-          <Route path="/notfound" component={NotFoundPage} />
-          <Route path="*" component={NotFoundPage} />
-        </Switch>
+      <Head />
+      <RenderHeader />
+      <main id="main">
+        <AppRoutes />
       </main>
-      <Footer />
+      <RenderFooter />
     </AppProvider>,
     document.getElementById('root'),
   );
@@ -39,11 +57,14 @@ subscribe(APP_INIT_ERROR, (error) => {
 });
 
 initialize({
-  messages: [
-    appMessages,
-    headerMessages,
-    footerMessages,
-  ],
-  requireAuthenticatedUser: true,
+  messages,
   hydrateAuthenticatedUser: true,
+  handlers: {
+    config: () => {
+      mergeConfig({
+        COLLECT_YEAR_OF_BIRTH: process.env.COLLECT_YEAR_OF_BIRTH,
+        ENABLE_SKILLS_BUILDER_PROFILE: process.env.ENABLE_SKILLS_BUILDER_PROFILE,
+      }, 'App loadConfig override handler');
+    },
+  },
 });

src/index.scss

@@ -1,7 +1,8 @@
-@import '~@edx/paragon/scss/edx/theme.scss';
-@import '~@edx/paragon/scss/edx/fonts.scss'; // Roboto
-
-@import './profile/index.scss';
-
+@import "~@edx/brand/paragon/fonts";
+@import "~@edx/brand/paragon/variables";
+@import "~@edx/paragon/scss/core/core";
+@import "~@edx/brand/paragon/overrides";
 @import "~@edx/frontend-component-header/dist/index";
 @import "~@edx/frontend-component-footer/dist/footer";
+
+@import './profile/index';

src/pacts/frontend-app-profile-edx-platform.json

@@ -0,0 +1,77 @@
+{
+  "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
+      }
+    }
+  ],
+  "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"
+  }
+}

src/profile/AgeMessage.jsx

@@ -1,40 +1,36 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { StatusAlert } from '@edx/paragon';
+import { Alert } from '@edx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
 
-function AgeMessage({ accountSettingsUrl }) {
-  return (
-    <StatusAlert
-      alertType="info"
-      dialog={
-        <React.Fragment>
-          <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>
-        </React.Fragment>
-      }
-      dismissible={false}
-      open
+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,
+      }}
     />
-  );
-}
+    <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,

src/profile/Banner.jsx

@@ -1,7 +1,5 @@
 import React from 'react';
 
-function Banner() {
-  return <div className="profile-page-bg-banner bg-primary d-none d-md-block p-relative" />;
-}
+const Banner = () => <div className="profile-page-bg-banner bg-primary d-none d-md-block p-relative" />;
 
 export default Banner;

src/profile/DateJoined.jsx

@@ -2,9 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage, FormattedDate } from '@edx/frontend-platform/i18n';
 
-function DateJoined({ date }) {
-  if (date == null) return null;
-
+const DateJoined = ({ date }) => {
+  if (date == null) {
+    return null;
+  }
   return (
     <p className="mb-0">
       <FormattedMessage
@@ -17,7 +18,7 @@ function DateJoined({ date }) {
       />
     </p>
   );
-}
+};
 
 DateJoined.propTypes = {
   date: PropTypes.string,

src/profile/NotFoundPage.jsx

@@ -1,16 +1,16 @@
 import React from 'react';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
-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>
-  );
-}
+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;

src/profile/ProfilePage.jsx

@@ -3,10 +3,10 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
 import { sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
-import { ensureConfig } from '@edx/frontend-platform';
+import { ensureConfig, getConfig } from '@edx/frontend-platform';
 import { AppContext } from '@edx/frontend-platform/react';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { StatusAlert, Hyperlink } from '@edx/paragon';
+import { Alert, Hyperlink } from '@edx/paragon';
 
 // Actions
 import {
@@ -30,8 +30,10 @@ 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';
@@ -39,14 +41,18 @@ 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;
+
     this.state = {
-      viewMyRecordsUrl: `${context.config.CREDENTIALS_BASE_URL}/records`,
+      viewMyRecordsUrl: credentialsBaseUrl ? `${credentialsBaseUrl}/records` : null,
       accountSettingsUrl: `${context.config.LMS_BASE_URL}/account/settings`,
     };
 
@@ -59,16 +65,12 @@ class ProfilePage extends React.Component {
   }
 
   componentDidMount() {
-    this.props.fetchProfile(this.props.match.params.username);
+    this.props.fetchProfile(this.props.params.username);
     sendTrackingLogEvent('edx.profile.viewed', {
-      username: this.props.match.params.username,
+      username: this.props.params.username,
     });
   }
 
-  isAuthenticatedUserProfile() {
-    return this.props.match.params.username === this.context.authenticatedUser.username;
-  }
-
   handleSaveProfilePhoto(formData) {
     this.props.saveProfilePhoto(this.context.authenticatedUser.username, formData);
   }
@@ -93,9 +95,21 @@ 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.isAuthenticatedUserProfile()) {
+    if (!(this.state.viewMyRecordsUrl && this.isAuthenticatedUserProfile())) {
       return null;
     }
 
@@ -111,11 +125,12 @@ class ProfilePage extends React.Component {
     const { dateJoined } = this.props;
 
     return (
-      <React.Fragment>
-        <h1 className="h2 mb-0 font-weight-bold">{this.props.match.params.username}</h1>
+      <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" />
-      </React.Fragment>
+      </span>
     );
   }
 
@@ -129,7 +144,9 @@ class ProfilePage extends React.Component {
     return (
       <div className="row">
         <div className="col-md-4 col-lg-3">
-          <StatusAlert alertType="danger" dialog={photoUploadError.userMessage} dismissible={false} open />
+          <Alert variant="danger" dismissible={false} show>
+            {photoUploadError.userMessage}
+          </Alert>
         </div>
       </div>
     );
@@ -157,6 +174,8 @@ class ProfilePage extends React.Component {
       socialLinks,
       draftSocialLinksByPlatform,
       visibilitySocialLinks,
+      learningGoal,
+      visibilityLearningGoal,
       languageProficiencies,
       visibilityLanguageProficiencies,
       visibilityCourseCertificates,
@@ -177,7 +196,6 @@ class ProfilePage extends React.Component {
       changeHandler: this.handleChange,
     };
 
-
     return (
       <div className="container-fluid">
         <div className="row align-items-center pt-4 mb-4 pt-md-0 mb-md-0">
@@ -194,6 +212,7 @@ class ProfilePage extends React.Component {
               />
             </div>
           </div>
+          <div>PluginPOC</div>
           <div className="col pl-0">
             <div className="d-md-none">
               {this.renderHeadingLockup()}
@@ -245,13 +264,21 @@ class ProfilePage extends React.Component {
             />
           </div>
           <div className="pt-md-3 col-md-8 col-lg-7 offset-lg-1">
-            {this.renderAgeMessage()}
+            {!this.isYOBDisabled() && 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"
@@ -282,6 +309,7 @@ ProfilePage.propTypes = {
 
   // Bio form data
   bio: PropTypes.string,
+  yearOfBirth: PropTypes.number,
   visibilityBio: PropTypes.string.isRequired,
 
   // Certificates form data
@@ -319,6 +347,10 @@ 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,
@@ -341,10 +373,8 @@ ProfilePage.propTypes = {
   updateDraft: PropTypes.func.isRequired,
 
   // Router
-  match: PropTypes.shape({
-    params: PropTypes.shape({
-      username: PropTypes.string.isRequired,
-    }).isRequired,
+  params: PropTypes.shape({
+    username: PropTypes.string.isRequired,
   }).isRequired,
 
   // i18n
@@ -357,11 +387,13 @@ ProfilePage.defaultProps = {
   photoUploadError: {},
   profileImage: {},
   name: null,
+  yearOfBirth: null,
   levelOfEducation: null,
   country: null,
   socialLinks: [],
   draftSocialLinksByPlatform: {},
   bio: null,
+  learningGoal: null,
   languageProficiencies: [],
   courseCertificates: null,
   requiresParentalConsent: null,
@@ -379,4 +411,4 @@ export default connect(
     closeForm,
     updateDraft,
   },
-)(injectIntl(ProfilePage));
+)(injectIntl(withParams(ProfilePage)));

src/profile/ProfilePage.test.jsx

@@ -5,6 +5,7 @@ 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';
@@ -15,10 +16,10 @@ import ProfilePage from './ProfilePage';
 
 const mockStore = configureMockStore([thunk]);
 const storeMocks = {
-  loadingApp: require('./__mocks__/loadingApp.mockStore.js'),
-  viewOwnProfile: require('./__mocks__/viewOwnProfile.mockStore.js'),
-  viewOtherProfile: require('./__mocks__/viewOtherProfile.mockStore.js'),
-  savingEditedBio: require('./__mocks__/savingEditedBio.mockStore.js'),
+  loadingApp: require('./__mocks__/loadingApp.mockStore'),
+  viewOwnProfile: require('./__mocks__/viewOwnProfile.mockStore'),
+  viewOtherProfile: require('./__mocks__/viewOtherProfile.mockStore'),
+  savingEditedBio: require('./__mocks__/savingEditedBio.mockStore'),
 };
 const requiredProfilePageProps = {
   fetchUserAccount: () => {},
@@ -28,7 +29,7 @@ const requiredProfilePageProps = {
   deleteProfilePhoto: () => {},
   openField: () => {},
   closeField: () => {},
-  match: { params: { username: 'staff' } },
+  params: { username: 'staff' },
 };
 
 // Mock language cookie
@@ -65,106 +66,220 @@ 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 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 contextValue = {
+        authenticatedUser: { userId: null, username: null, administrator: false },
+        config: getConfig(),
+      };
+      const component = <ProfilePageWrapper contextValue={contextValue} store={mockStore(storeMocks.loadingApp)} />;
       const tree = renderer.create(component).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
     it('viewing own profile', () => {
-      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 contextValue = {
+        authenticatedUser: { userId: 123, username: 'staff', administrator: true },
+        config: getConfig(),
+      };
+      const component = <ProfilePageWrapper contextValue={contextValue} store={mockStore(storeMocks.viewOwnProfile)} />;
       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 = (
-        <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>
+        <ProfilePageWrapper
+          contextValue={contextValue}
+          store={mockStore(storeMocks.viewOtherProfile)}
+          params={{ username: 'verified' }} // Override default params
+        />
       );
       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 = (
-        <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>
+        <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)}
+        />
+      );
+      const tree = renderer.create(component).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('without credentials service', () => {
+      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)}
+        />
+      );
+      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 = (
-        <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>
+        <ProfilePageWrapper
+          contextValue={contextValue}
+          store={mockStore(storeMocks.loadingApp)}
+          params={{ username: 'test-username' }}
+        />
       );
       const wrapper = mount(component);
       wrapper.update();

src/profile/ProfilePluginPage.jsx

@@ -0,0 +1,219 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import { ensureConfig } from '@edx/frontend-platform';
+import { AppContext } from '@edx/frontend-platform/react';
+import { injectIntl, intlShape, FormattedDate } from '@edx/frontend-platform/i18n';
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTwitter, faFacebook, faLinkedin } from '@fortawesome/free-brands-svg-icons';
+import {
+  ActionRow, Avatar, Card, Hyperlink, Icon,
+} from '@edx/paragon';
+import { HistoryEdu, VerifiedUser } from '@edx/paragon/icons';
+
+import get from 'lodash.get';
+
+import { Plugin } from '@edx/frontend-plugin-framework/src/plugins';
+import PluginCountry from './forms/PluginCountry';
+
+// Actions
+import {
+  fetchProfile,
+} from './data/actions';
+
+// Components
+import PageLoading from './PageLoading';
+
+// Selectors
+import { profilePageSelector } from './data/selectors';
+
+// i18n
+import messages from './ProfilePage.messages';
+import eduMessages from './forms/Education.messages';
+
+import withParams from '../utils/hoc';
+
+ensureConfig(['CREDENTIALS_BASE_URL', 'LMS_BASE_URL'], 'ProfilePage');
+
+// eslint-disable-next-line react/function-component-definition
+function Fallback() {
+  return (
+    <div>this is broken as all get</div>
+  );
+}
+
+const platformDisplayInfo = {
+  facebook: {
+    icon: faFacebook,
+    name: '',
+  },
+  twitter: {
+    icon: faTwitter,
+    name: '',
+  },
+  linkedin: {
+    icon: faLinkedin,
+    name: '',
+  },
+};
+
+class ProfilePluginPage extends React.Component {
+  componentDidMount() {
+    this.props.fetchProfile(this.props.params.username);
+  }
+
+  renderContent() {
+    const {
+      profileImage,
+      country,
+      levelOfEducation,
+      socialLinks,
+      isLoadingProfile,
+      dateJoined,
+      name,
+      intl,
+    } = this.props;
+
+    if (isLoadingProfile) {
+      return <PageLoading srMessage={this.props.intl.formatMessage(messages['profile.loading'])} />;
+    }
+
+    return (
+      <Plugin fallbackComponent={<Fallback />}>
+        <Card className="mb-2">
+          <Card.Header
+            className="pb-5"
+            subtitle={(
+              <Hyperlink destination={`/u/${this.props.params.username}`}>
+                View public profile
+              </Hyperlink>
+            )}
+            actions={
+              (
+                <ActionRow className="mt-3">
+                  {socialLinks
+                    .filter(({ socialLink }) => Boolean(socialLink))
+                    .map(({ platform, socialLink }) => (
+                      <StaticListItem
+                        key={platform}
+                        name={platformDisplayInfo[platform].name}
+                        url={socialLink}
+                        platform={platform}
+                      />
+                    ))}
+                </ActionRow>
+              )
+            }
+          />
+          <Card.Section className="text-center" muted>
+            <Avatar
+              size="xl"
+              className="profile-plugin-avatar"
+              src={profileImage.src}
+              alt="Profile image"
+            />
+            <p className="h2 mb-0 font-weight-bold">{name}</p>
+            <p className="h3 mb-0 font-weight-bold">{this.props.params.username}</p>
+            <PluginCountry
+              country={country}
+            />
+          </Card.Section>
+          <Card.Footer className="p-0">
+            <Card.Section className="pgn-icons-cell-vertical">
+              <Icon src={VerifiedUser} />
+              <p>
+                since <FormattedDate value={new Date(dateJoined)} year="numeric" />
+              </p>
+            </Card.Section>
+            <Card.Section className="pgn-icons-cell-vertical">
+              <Icon src={HistoryEdu} />
+              <p>
+                {intl.formatMessage(get(
+                  eduMessages,
+                  `profile.education.levels.${levelOfEducation}`,
+                  eduMessages['profile.education.levels.o'],
+                ))}
+              </p>
+            </Card.Section>
+          </Card.Footer>
+        </Card>
+      </Plugin>
+    );
+  }
+
+  render() {
+    return (
+      <div className="profile-page">
+        {this.renderContent()}
+      </div>
+    );
+  }
+}
+
+const SocialLink = ({ url, name, platform }) => (
+  <a href={url} className="font-weight-bold">
+    <FontAwesomeIcon className="mr-2" icon={platformDisplayInfo[platform].icon} />
+    {name}
+  </a>
+);
+
+const StaticListItem = ({ url, name, platform }) => (
+  <ul className="list-inline">
+    <SocialLink name={name} url={url} platform={platform} />
+  </ul>
+);
+
+ProfilePluginPage.contextType = AppContext;
+
+ProfilePluginPage.propTypes = {
+  // Account data
+  dateJoined: PropTypes.string,
+
+  // Country form data
+  country: PropTypes.string,
+
+  // Education form data
+  levelOfEducation: PropTypes.string,
+
+  // Social links form data
+  socialLinks: PropTypes.arrayOf(PropTypes.shape({
+    platform: PropTypes.string,
+    socialLink: PropTypes.string,
+  })),
+
+  // Other data we need
+  profileImage: PropTypes.shape({
+    src: PropTypes.string,
+    isDefault: PropTypes.bool,
+  }),
+  isLoadingProfile: PropTypes.bool.isRequired,
+
+  // Actions
+  fetchProfile: PropTypes.func.isRequired,
+
+  // Router
+  params: PropTypes.shape({
+    username: PropTypes.string.isRequired,
+  }).isRequired,
+
+  // i18n
+  intl: intlShape.isRequired,
+};
+
+ProfilePluginPage.defaultProps = {
+  profileImage: {},
+  levelOfEducation: null,
+  country: null,
+  socialLinks: [],
+  dateJoined: null,
+};
+
+export default connect(
+  profilePageSelector,
+  {
+    fetchProfile,
+  },
+)(injectIntl(withParams(ProfilePluginPage)));

src/profile/UsernameDescription.jsx

@@ -0,0 +1,23 @@
+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;

src/profile/__mocks__/loadingApp.mockStore.js

@@ -12,7 +12,8 @@ module.exports = {
       imageUrlMedium: null,
       imageUrlLarge: null
     },
-    levelOfEducation: null
+    levelOfEducation: null,
+    learningGoal: null
   },
   profilePage: {
     errors: {},

src/profile/__mocks__/savingEditedBio.mockStore.js

@@ -42,7 +42,8 @@ module.exports = {
     secondaryEmail: null,
     timeZone: null,
     gender: null,
-    accountPrivacy: 'custom'
+    accountPrivacy: 'custom',
+    learningGoal: null,
   },
   profilePage: {
     errors: {},
@@ -91,7 +92,8 @@ module.exports = {
       timeZone: null,
       levelOfEducation: 'el',
       gender: null,
-      accountPrivacy: 'custom'
+      accountPrivacy: 'custom',
+      learningGoal: null,
     },
     preferences: {
       visibilityUserLocation: 'all_users',
@@ -104,7 +106,8 @@ module.exports = {
       visibilityName: 'private',
       visibilityLanguageProficiencies: 'all_users',
       visibilityCountry: 'all_users',
-      accountPrivacy: 'custom'
+      accountPrivacy: 'custom',
+      visibilityLearningGoal: 'private',
     },
     courseCertificates: [
       {

src/profile/__mocks__/viewOtherProfile.mockStore.js

@@ -42,7 +42,8 @@ module.exports = {
     secondaryEmail: null,
     timeZone: null,
     gender: null,
-    accountPrivacy: 'custom'
+    accountPrivacy: 'custom',
+    learningGoal: 'advance_career',
   },
   profilePage: {
     errors: {},
@@ -83,7 +84,8 @@ module.exports = {
     preferences: {},
     courseCertificates: [],
     drafts: {},
-    isLoadingProfile: false
+    isLoadingProfile: false,
+    learningGoal: 'advance_career',
   },
   router: {
     location: {

src/profile/__mocks__/viewOwnProfile.mockStore.js

@@ -42,7 +42,8 @@ module.exports = {
     secondaryEmail: null,
     timeZone: null,
     gender: null,
-    accountPrivacy: 'custom'
+    accountPrivacy: 'custom',
+    learningGoal: 'advance_career'
   },
   profilePage: {
     errors: {},
@@ -91,7 +92,8 @@ module.exports = {
       timeZone: null,
       levelOfEducation: 'el',
       gender: null,
-      accountPrivacy: 'custom'
+      accountPrivacy: 'custom',
+      learningGoal: 'advance_career'
     },
     preferences: {
       visibilityUserLocation: 'all_users',
@@ -104,7 +106,8 @@ module.exports = {
       visibilityName: 'private',
       visibilityLanguageProficiencies: 'all_users',
       visibilityCountry: 'all_users',
-      accountPrivacy: 'custom'
+      accountPrivacy: 'custom',
+      visibilityLearningGoal: 'private',
     },
     courseCertificates: [
       {

src/profile/__snapshots__/ProfilePage.test.jsx.snap

@@ -31,6 +31,5627 @@ 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>
+        PluginPOC
+      </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>
+        PluginPOC
+      </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>
+        PluginPOC
+      </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"
@@ -80,30 +5701,61 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
           </div>
         </div>
       </div>
+      <div>
+        PluginPOC
+      </div>
       <div
         className="col pl-0"
       >
         <div
           className="d-md-none"
         >
-          <h1
-            className="h2 mb-0 font-weight-bold"
+          <span
+            data-hj-suppress={true}
           >
-            verified
-          </h1>
-          <p
-            className="mb-0"
-          >
-            <span>
+            <h1
+              className="h2 mb-0 font-weight-bold"
+            >
+              verified
+            </h1>
+            <p
+              className="mb-0"
+            >
               Member since 
-              <span>
-                2017
+              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>
-            </span>
-          </p>
-          <hr
-            className="d-none d-md-block"
-          />
+              <div
+                className="username-description"
+              >
+                Your profile information is only visible to you. Only your username is visible to others on localhost.
+              </div>
+            </div>
+            <hr
+              className="d-none d-md-block"
+            />
+          </span>
         </div>
         <div
           className="d-none d-md-block float-right"
@@ -119,24 +5771,52 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
         <div
           className="d-none d-md-block mb-4"
         >
-          <h1
-            className="h2 mb-0 font-weight-bold"
+          <span
+            data-hj-suppress={true}
           >
-            verified
-          </h1>
-          <p
-            className="mb-0"
-          >
-            <span>
+            <h1
+              className="h2 mb-0 font-weight-bold"
+            >
+              verified
+            </h1>
+            <p
+              className="mb-0"
+            >
               Member since 
-              <span>
-                2017
+              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>
-            </span>
-          </p>
-          <hr
-            className="d-none d-md-block"
-          />
+              <div
+                className="username-description"
+              >
+                Your profile information is only visible to you. Only your username is visible to others on localhost.
+              </div>
+            </div>
+            <hr
+              className="d-none d-md-block"
+            />
+          </span>
         </div>
         <div
           className="d-md-none mb-4"
@@ -236,47 +5916,25 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                 className="profile-avatar-menu-container"
               >
                 <div
-                  className="dropdown"
+                  className="pgn__dropdown pgn__dropdown-light dropdown"
+                  data-testid="dropdown"
                 >
                   <button
                     aria-expanded={false}
                     aria-haspopup={true}
-                    className="dropdown-toggle btn btn-light"
-                    id="pgn__dropdown-trigger-0"
+                    className="dropdown-toggle btn btn-primary"
+                    disabled={false}
                     onClick={[Function]}
-                    type="btn-outline"
+                    type="button"
                   >
                     Change
                   </button>
-                  <div
-                    aria-hidden={true}
-                    aria-labelledby="pgn__dropdown-trigger-0"
-                    className="dropdown-menu"
-                    onKeyDown={[Function]}
-                    role="menu"
-                  >
-                    <button
-                      className="dropdown-item"
-                      onClick={[Function]}
-                    >
-                      <span>
-                        Upload Photo
-                      </span>
-                    </button>
-                    <button
-                      className="dropdown-item"
-                      onClick={[Function]}
-                    >
-                      <span>
-                        Remove
-                      </span>
-                    </button>
-                  </div>
                 </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 {
@@ -301,50 +5959,79 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
           </div>
         </div>
       </div>
+      <div>
+        PluginPOC
+      </div>
       <div
         className="col pl-0"
       >
         <div
           className="d-md-none"
         >
-          <h1
-            className="h2 mb-0 font-weight-bold"
+          <span
+            data-hj-suppress={true}
           >
-            staff
-          </h1>
-          <p
-            className="mb-0"
-          >
-            <span>
+            <h1
+              className="h2 mb-0 font-weight-bold"
+            >
+              staff
+            </h1>
+            <p
+              className="mb-0"
+            >
               Member since 
-              <span>
-                2017
-              </span>
-            </span>
-          </p>
-          <hr
-            className="d-none d-md-block"
-          />
+              2017
+            </p>
+            <hr
+              className="d-none d-md-block"
+            />
+          </span>
         </div>
         <div
           className="d-none d-md-block float-right"
         >
           <a
-            className="btn btn-primary"
+            className="pgn__hyperlink default-link standalone-link btn btn-primary"
             href="http://localhost:18150/records"
             onClick={[Function]}
-            rel="noopener"
+            rel="noopener noreferrer"
             target="_blank"
           >
             View My Records
-            <span>
-               
+            <span
+              className="pgn__hyperlink__external-icon"
+              title="Opens in a new tab"
+            >
               <span
-                aria-hidden={false}
-                aria-label="Opens in a new window"
-                className="fa fa-external-link"
-                title="Opens in a new window"
-              />
+                className="pgn__icon"
+                style={
+                  Object {
+                    "height": "1em",
+                    "width": "1em",
+                  }
+                }
+              >
+                <svg
+                  aria-hidden={true}
+                  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>
@@ -359,44 +6046,70 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
         <div
           className="d-none d-md-block mb-4"
         >
-          <h1
-            className="h2 mb-0 font-weight-bold"
+          <span
+            data-hj-suppress={true}
           >
-            staff
-          </h1>
-          <p
-            className="mb-0"
-          >
-            <span>
+            <h1
+              className="h2 mb-0 font-weight-bold"
+            >
+              staff
+            </h1>
+            <p
+              className="mb-0"
+            >
               Member since 
-              <span>
-                2017
-              </span>
-            </span>
-          </p>
-          <hr
-            className="d-none d-md-block"
-          />
+              2017
+            </p>
+            <hr
+              className="d-none d-md-block"
+            />
+          </span>
         </div>
         <div
           className="d-md-none mb-4"
         >
           <a
-            className="btn btn-primary"
+            className="pgn__hyperlink default-link standalone-link btn btn-primary"
             href="http://localhost:18150/records"
             onClick={[Function]}
-            rel="noopener"
+            rel="noopener noreferrer"
             target="_blank"
           >
             View My Records
-            <span>
-               
+            <span
+              className="pgn__hyperlink__external-icon"
+              title="Opens in a new tab"
+            >
               <span
-                aria-hidden={false}
-                aria-label="Opens in a new window"
-                className="fa fa-external-link"
-                title="Opens in a new window"
-              />
+                className="pgn__icon"
+                style={
+                  Object {
+                    "height": "1em",
+                    "width": "1em",
+                  }
+                }
+              >
+                <svg
+                  aria-hidden={true}
+                  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>
@@ -424,10 +6137,9 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
               >
                 Full Name
                 <button
-                  className="btn btn-sm btn-link float-right px-0"
-                  onBlur={[Function]}
+                  className="float-right px-0 btn btn-link btn-sm"
+                  disabled={false}
                   onClick={[Function]}
-                  onKeyDown={[Function]}
                   style={
                     Object {
                       "marginTop": "-.35rem",
@@ -485,6 +6197,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
             </div>
             <p
               className="h5"
+              data-hj-suppress={true}
             >
               Lemon Seltzer
             </p>
@@ -519,10 +6232,9 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
               >
                 Location
                 <button
-                  className="btn btn-sm btn-link float-right px-0"
-                  onBlur={[Function]}
+                  className="float-right px-0 btn btn-link btn-sm"
+                  disabled={false}
                   onClick={[Function]}
-                  onKeyDown={[Function]}
                   style={
                     Object {
                       "marginTop": "-.35rem",
@@ -574,12 +6286,13 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                     />
                   </svg>
                    
-                  Everyone on edX
+                  Everyone on localhost
                 </span>
               </p>
             </div>
             <p
               className="h5"
+              data-hj-suppress={true}
             >
               Montenegro
             </p>
@@ -609,10 +6322,9 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
               >
                 Primary Language Spoken
                 <button
-                  className="btn btn-sm btn-link float-right px-0"
-                  onBlur={[Function]}
+                  className="float-right px-0 btn btn-link btn-sm"
+                  disabled={false}
                   onClick={[Function]}
-                  onKeyDown={[Function]}
                   style={
                     Object {
                       "marginTop": "-.35rem",
@@ -664,12 +6376,13 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                     />
                   </svg>
                    
-                  Everyone on edX
+                  Everyone on localhost
                 </span>
               </p>
             </div>
             <p
               className="h5"
+              data-hj-suppress={true}
             >
               Yoruba
             </p>
@@ -699,10 +6412,9 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
               >
                 Education
                 <button
-                  className="btn btn-sm btn-link float-right px-0"
-                  onBlur={[Function]}
+                  className="float-right px-0 btn btn-link btn-sm"
+                  disabled={false}
                   onClick={[Function]}
-                  onKeyDown={[Function]}
                   style={
                     Object {
                       "marginTop": "-.35rem",
@@ -760,6 +6472,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
             </div>
             <p
               className="h5"
+              data-hj-suppress={true}
             >
               Elementary/primary school
             </p>
@@ -789,10 +6502,9 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
               >
                 Social Links
                 <button
-                  className="btn btn-sm btn-link float-right px-0"
-                  onBlur={[Function]}
+                  className="float-right px-0 btn btn-link btn-sm"
+                  disabled={false}
                   onClick={[Function]}
-                  onKeyDown={[Function]}
                   style={
                     Object {
                       "marginTop": "-.35rem",
@@ -844,7 +6556,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                     />
                   </svg>
                    
-                  Everyone on edX
+                  Everyone on localhost
                 </span>
               </p>
             </div>
@@ -887,17 +6599,17 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                 >
                   <svg
                     aria-hidden="true"
-                    className="svg-inline--fa fa-facebook fa-w-14 mr-2"
+                    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 448 512"
+                    viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                      d="M448 56.7v398.5c0 13.7-11.1 24.7-24.7 24.7H309.1V306.5h58.2l8.7-67.6h-67v-43.2c0-19.6 5.4-32.9 33.5-32.9h35.8v-60.5c-6.2-.8-27.4-2.7-52.2-2.7-51.6 0-87 31.5-87 89.4v49.9h-58.4v67.6h58.4V480H24.7C11.1 480 0 468.9 0 455.3V56.7C0 43.1 11.1 32 24.7 32h398.5c13.7 0 24.8 11.1 24.8 24.7z"
+                      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 {}}
                     />
@@ -914,6 +6626,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                     onClick={[Function]}
                     onKeyDown={[Function]}
                     tabIndex={0}
+                    type="button"
                   >
                     <svg
                       aria-hidden="true"
@@ -968,10 +6681,9 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
               >
                 About Me
                 <button
-                  className="btn btn-sm btn-link float-right px-0"
-                  onBlur={[Function]}
+                  className="float-right px-0 btn btn-link btn-sm"
+                  disabled={false}
                   onClick={[Function]}
-                  onKeyDown={[Function]}
                   style={
                     Object {
                       "marginTop": "-.35rem",
@@ -1023,12 +6735,13 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                     />
                   </svg>
                    
-                  Everyone on edX
+                  Everyone on localhost
                 </span>
               </p>
             </div>
             <p
               className="lead"
+              data-hj-suppress={true}
             >
               This is my bio
             </p>
@@ -1058,10 +6771,9 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
               >
                 My Certificates
                 <button
-                  className="btn btn-sm btn-link float-right px-0"
-                  onBlur={[Function]}
+                  className="float-right px-0 btn btn-link btn-sm"
+                  disabled={false}
                   onClick={[Function]}
-                  onKeyDown={[Function]}
                   style={
                     Object {
                       "marginTop": "-.35rem",
@@ -1113,7 +6825,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                     />
                   </svg>
                    
-                  Everyone on edX
+                  Everyone on localhost
                 </span>
               </p>
             </div>
@@ -1154,9 +6866,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                     <p
                       className="small mb-0"
                     >
-                      <span>
-                        From
-                      </span>
+                      From
                     </p>
                     <p
                       className="h6 mb-4"
@@ -1169,30 +6879,52 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                     <p
                       className="small mb-2"
                     >
-                      <span>
-                        Completed on 
-                        <span>
-                          3/4/2019
-                        </span>
-                      </span>
+                      Completed on 
+                      3/4/2019
                     </p>
                     <div>
                       <a
-                        className="btn btn-outline-primary"
+                        className="pgn__hyperlink default-link standalone-link btn btn-outline-primary"
                         href="http://www.example.com/"
                         onClick={[Function]}
-                        rel="noopener"
+                        rel="noopener noreferrer"
                         target="_blank"
                       >
                         View Certificate
-                        <span>
-                           
+                        <span
+                          className="pgn__hyperlink__external-icon"
+                          title="Opens in a new tab"
+                        >
                           <span
-                            aria-hidden={false}
-                            aria-label="Opens in a new window"
-                            className="fa fa-external-link"
-                            title="Opens in a new window"
-                          />
+                            className="pgn__icon"
+                            style={
+                              Object {
+                                "height": "1em",
+                                "width": "1em",
+                              }
+                            }
+                          >
+                            <svg
+                              aria-hidden={true}
+                              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>
@@ -1237,47 +6969,25 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                 className="profile-avatar-menu-container"
               >
                 <div
-                  className="dropdown"
+                  className="pgn__dropdown pgn__dropdown-light dropdown"
+                  data-testid="dropdown"
                 >
                   <button
                     aria-expanded={false}
                     aria-haspopup={true}
-                    className="dropdown-toggle btn btn-light"
-                    id="pgn__dropdown-trigger-1"
+                    className="dropdown-toggle btn btn-primary"
+                    disabled={false}
                     onClick={[Function]}
-                    type="btn-outline"
+                    type="button"
                   >
                     Change
                   </button>
-                  <div
-                    aria-hidden={true}
-                    aria-labelledby="pgn__dropdown-trigger-1"
-                    className="dropdown-menu"
-                    onKeyDown={[Function]}
-                    role="menu"
-                  >
-                    <button
-                      className="dropdown-item"
-                      onClick={[Function]}
-                    >
-                      <span>
-                        Upload Photo
-                      </span>
-                    </button>
-                    <button
-                      className="dropdown-item"
-                      onClick={[Function]}
-                    >
-                      <span>
-                        Remove
-                      </span>
-                    </button>
-                  </div>
                 </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 {
@@ -1302,50 +7012,79 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
           </div>
         </div>
       </div>
+      <div>
+        PluginPOC
+      </div>
       <div
         className="col pl-0"
       >
         <div
           className="d-md-none"
         >
-          <h1
-            className="h2 mb-0 font-weight-bold"
+          <span
+            data-hj-suppress={true}
           >
-            staff
-          </h1>
-          <p
-            className="mb-0"
-          >
-            <span>
+            <h1
+              className="h2 mb-0 font-weight-bold"
+            >
+              staff
+            </h1>
+            <p
+              className="mb-0"
+            >
               Member since 
-              <span>
-                2017
-              </span>
-            </span>
-          </p>
-          <hr
-            className="d-none d-md-block"
-          />
+              2017
+            </p>
+            <hr
+              className="d-none d-md-block"
+            />
+          </span>
         </div>
         <div
           className="d-none d-md-block float-right"
         >
           <a
-            className="btn btn-primary"
+            className="pgn__hyperlink default-link standalone-link btn btn-primary"
             href="http://localhost:18150/records"
             onClick={[Function]}
-            rel="noopener"
+            rel="noopener noreferrer"
             target="_blank"
           >
             View My Records
-            <span>
-               
+            <span
+              className="pgn__hyperlink__external-icon"
+              title="Opens in a new tab"
+            >
               <span
-                aria-hidden={false}
-                aria-label="Opens in a new window"
-                className="fa fa-external-link"
-                title="Opens in a new window"
-              />
+                className="pgn__icon"
+                style={
+                  Object {
+                    "height": "1em",
+                    "width": "1em",
+                  }
+                }
+              >
+                <svg
+                  aria-hidden={true}
+                  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>
@@ -1360,44 +7099,70 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
         <div
           className="d-none d-md-block mb-4"
         >
-          <h1
-            className="h2 mb-0 font-weight-bold"
+          <span
+            data-hj-suppress={true}
           >
-            staff
-          </h1>
-          <p
-            className="mb-0"
-          >
-            <span>
+            <h1
+              className="h2 mb-0 font-weight-bold"
+            >
+              staff
+            </h1>
+            <p
+              className="mb-0"
+            >
               Member since 
-              <span>
-                2017
-              </span>
-            </span>
-          </p>
-          <hr
-            className="d-none d-md-block"
-          />
+              2017
+            </p>
+            <hr
+              className="d-none d-md-block"
+            />
+          </span>
         </div>
         <div
           className="d-md-none mb-4"
         >
           <a
-            className="btn btn-primary"
+            className="pgn__hyperlink default-link standalone-link btn btn-primary"
             href="http://localhost:18150/records"
             onClick={[Function]}
-            rel="noopener"
+            rel="noopener noreferrer"
             target="_blank"
           >
             View My Records
-            <span>
-               
+            <span
+              className="pgn__hyperlink__external-icon"
+              title="Opens in a new tab"
+            >
               <span
-                aria-hidden={false}
-                aria-label="Opens in a new window"
-                className="fa fa-external-link"
-                title="Opens in a new window"
-              />
+                className="pgn__icon"
+                style={
+                  Object {
+                    "height": "1em",
+                    "width": "1em",
+                  }
+                }
+              >
+                <svg
+                  aria-hidden={true}
+                  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>
@@ -1425,10 +7190,9 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
               >
                 Full Name
                 <button
-                  className="btn btn-sm btn-link float-right px-0"
-                  onBlur={[Function]}
+                  className="float-right px-0 btn btn-link btn-sm"
+                  disabled={false}
                   onClick={[Function]}
-                  onKeyDown={[Function]}
                   style={
                     Object {
                       "marginTop": "-.35rem",
@@ -1486,6 +7250,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
             </div>
             <p
               className="h5"
+              data-hj-suppress={true}
             >
               Lemon Seltzer
             </p>
@@ -1520,10 +7285,9 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
               >
                 Location
                 <button
-                  className="btn btn-sm btn-link float-right px-0"
-                  onBlur={[Function]}
+                  className="float-right px-0 btn btn-link btn-sm"
+                  disabled={false}
                   onClick={[Function]}
-                  onKeyDown={[Function]}
                   style={
                     Object {
                       "marginTop": "-.35rem",
@@ -1575,12 +7339,13 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                     />
                   </svg>
                    
-                  Everyone on edX
+                  Everyone on localhost
                 </span>
               </p>
             </div>
             <p
               className="h5"
+              data-hj-suppress={true}
             >
               Montenegro
             </p>
@@ -1610,10 +7375,9 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
               >
                 Primary Language Spoken
                 <button
-                  className="btn btn-sm btn-link float-right px-0"
-                  onBlur={[Function]}
+                  className="float-right px-0 btn btn-link btn-sm"
+                  disabled={false}
                   onClick={[Function]}
-                  onKeyDown={[Function]}
                   style={
                     Object {
                       "marginTop": "-.35rem",
@@ -1665,12 +7429,13 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                     />
                   </svg>
                    
-                  Everyone on edX
+                  Everyone on localhost
                 </span>
               </p>
             </div>
             <p
               className="h5"
+              data-hj-suppress={true}
             >
               Yoruba
             </p>
@@ -1700,10 +7465,9 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
               >
                 Education
                 <button
-                  className="btn btn-sm btn-link float-right px-0"
-                  onBlur={[Function]}
+                  className="float-right px-0 btn btn-link btn-sm"
+                  disabled={false}
                   onClick={[Function]}
-                  onKeyDown={[Function]}
                   style={
                     Object {
                       "marginTop": "-.35rem",
@@ -1761,6 +7525,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
             </div>
             <p
               className="h5"
+              data-hj-suppress={true}
             >
               Elementary/primary school
             </p>
@@ -1790,10 +7555,9 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
               >
                 Social Links
                 <button
-                  className="btn btn-sm btn-link float-right px-0"
-                  onBlur={[Function]}
+                  className="float-right px-0 btn btn-link btn-sm"
+                  disabled={false}
                   onClick={[Function]}
-                  onKeyDown={[Function]}
                   style={
                     Object {
                       "marginTop": "-.35rem",
@@ -1845,7 +7609,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                     />
                   </svg>
                    
-                  Everyone on edX
+                  Everyone on localhost
                 </span>
               </p>
             </div>
@@ -1888,17 +7652,17 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                 >
                   <svg
                     aria-hidden="true"
-                    className="svg-inline--fa fa-facebook fa-w-14 mr-2"
+                    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 448 512"
+                    viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                      d="M448 56.7v398.5c0 13.7-11.1 24.7-24.7 24.7H309.1V306.5h58.2l8.7-67.6h-67v-43.2c0-19.6 5.4-32.9 33.5-32.9h35.8v-60.5c-6.2-.8-27.4-2.7-52.2-2.7-51.6 0-87 31.5-87 89.4v49.9h-58.4v67.6h58.4V480H24.7C11.1 480 0 468.9 0 455.3V56.7C0 43.1 11.1 32 24.7 32h398.5c13.7 0 24.8 11.1 24.8 24.7z"
+                      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 {}}
                     />
@@ -1915,6 +7679,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                     onClick={[Function]}
                     onKeyDown={[Function]}
                     tabIndex={0}
+                    type="button"
                   >
                     <svg
                       aria-hidden="true"
@@ -1968,7 +7733,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                 onSubmit={[Function]}
               >
                 <div
-                  className="form-group"
+                  className="pgn__form-group"
                 >
                   <label
                     className="edit-section-header"
@@ -1977,7 +7742,6 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                     About Me
                   </label>
                   <textarea
-                    aria-describedby=""
                     className="form-control"
                     id="bio"
                     name="bio"
@@ -2042,7 +7806,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                         <option
                           value="all_users"
                         >
-                          Everyone on edX
+                          Everyone on localhost
                         </option>
                       </select>
                     </span>
@@ -2053,10 +7817,9 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                     <button
                       aria-disabled={false}
                       aria-live="assertive"
-                      className="btn pgn__stateful-btn pgn__stateful-btn-state-pending btn-primary"
-                      onBlur={[Function]}
+                      className="pgn__stateful-btn pgn__stateful-btn-state-pending btn btn-primary"
+                      disabled={false}
                       onClick={[Function]}
-                      onKeyDown={[Function]}
                       type="submit"
                     >
                       <span
@@ -2066,19 +7829,34 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                           className="pgn__stateful-btn-icon"
                         >
                           <span
-                            aria-hidden={true}
-                            className="icon fa fa-spinner fa-spin"
-                            id="Icon2"
-                          />
+                            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>
-                        Saving
                       </span>
                     </button>
                     <button
                       className="btn btn-link"
-                      onBlur={[Function]}
+                      disabled={false}
                       onClick={[Function]}
-                      onKeyDown={[Function]}
                       type="button"
                     >
                       Cancel
@@ -2113,10 +7891,9 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
               >
                 My Certificates
                 <button
-                  className="btn btn-sm btn-link float-right px-0"
-                  onBlur={[Function]}
+                  className="float-right px-0 btn btn-link btn-sm"
+                  disabled={false}
                   onClick={[Function]}
-                  onKeyDown={[Function]}
                   style={
                     Object {
                       "marginTop": "-.35rem",
@@ -2168,7 +7945,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                     />
                   </svg>
                    
-                  Everyone on edX
+                  Everyone on localhost
                 </span>
               </p>
             </div>
@@ -2209,9 +7986,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                     <p
                       className="small mb-0"
                     >
-                      <span>
-                        From
-                      </span>
+                      From
                     </p>
                     <p
                       className="h6 mb-4"
@@ -2224,30 +7999,2143 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                     <p
                       className="small mb-2"
                     >
-                      <span>
-                        Completed on 
-                        <span>
-                          3/4/2019
-                        </span>
-                      </span>
+                      Completed on 
+                      3/4/2019
                     </p>
                     <div>
                       <a
-                        className="btn btn-outline-primary"
+                        className="pgn__hyperlink default-link standalone-link btn btn-outline-primary"
                         href="http://www.example.com/"
                         onClick={[Function]}
-                        rel="noopener"
+                        rel="noopener noreferrer"
                         target="_blank"
                       >
                         View Certificate
-                        <span>
-                           
+                        <span
+                          className="pgn__hyperlink__external-icon"
+                          title="Opens in a new tab"
+                        >
                           <span
-                            aria-hidden={false}
-                            aria-label="Opens in a new window"
-                            className="fa fa-external-link"
-                            title="Opens in a new window"
-                          />
+                            className="pgn__icon"
+                            style={
+                              Object {
+                                "height": "1em",
+                                "width": "1em",
+                              }
+                            }
+                          >
+                            <svg
+                              aria-hidden={true}
+                              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>
+        PluginPOC
+      </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>
+                          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-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 without credentials service 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>
+        PluginPOC
+      </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"
+        />
+      </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"
+        />
+        <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
+              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>

src/profile/data/actions.test.js

@@ -92,7 +92,6 @@ describe('SAVE profile actions', () => {
   });
 });
 
-
 describe('SAVE profile photo actions', () => {
   it('should create an action to signal the start of a profile photo save', () => {
     const formData = 'multipart form data';
@@ -141,7 +140,6 @@ describe('SAVE profile photo actions', () => {
   });
 });
 
-
 describe('DELETE profile photo actions', () => {
   it('should create an action to signal the start of a profile photo deletion', () => {
     const expectedAction = {
@@ -179,7 +177,6 @@ describe('DELETE profile photo actions', () => {
   });
 });
 
-
 describe('Editable field opening and closing actions', () => {
   const formId = 'name';
 

src/profile/data/constants.js

@@ -7,7 +7,7 @@ const EDUCATION_LEVELS = [
   'jhs',
   'el',
   'none',
-  'o',
+  'other',
 ];
 
 const SOCIAL = {

src/profile/data/mock_data.js

@@ -0,0 +1,7 @@
+const mockData = {
+  learningGoal: 'advance_career',
+  editMode: 'static',
+  visibilityLearningGoal: 'private',
+};
+
+export default mockData;

src/profile/data/pact-profile.test.js

@@ -0,0 +1,80 @@
+// 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');
+    });
+  });
+});

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 {
@@ -57,13 +57,13 @@ const profilePage = (state = initialState, action) => {
         // Account is always replaced completely.
         account: action.payload.account !== null ? action.payload.account : state.account,
         // Preferences changes get merged in.
-        preferences: Object.assign({}, state.preferences, action.payload.preferences),
+        preferences: { ...state.preferences, ...action.payload.preferences },
       };
     case SAVE_PROFILE.FAILURE:
       return {
         ...state,
         saveState: 'error',
-        errors: Object.assign({}, state.errors, action.payload.errors),
+        errors: { ...state.errors, ...action.payload.errors },
       };
     case SAVE_PROFILE.RESET:
       return {
@@ -82,7 +82,7 @@ const profilePage = (state = initialState, action) => {
       return {
         ...state,
         // Merge in new profile image data
-        account: Object.assign({}, state.account, { profileImage: action.payload.profileImage }),
+        account: { ...state.account, profileImage: action.payload.profileImage },
         savePhotoState: 'complete',
         errors: {},
       };
@@ -90,7 +90,7 @@ const profilePage = (state = initialState, action) => {
       return {
         ...state,
         savePhotoState: 'error',
-        errors: Object.assign({}, state.errors, { photo: action.payload.error }),
+        errors: { ...state.errors, photo: action.payload.error },
       };
     case SAVE_PROFILE_PHOTO.RESET:
       return {
@@ -109,7 +109,7 @@ const profilePage = (state = initialState, action) => {
       return {
         ...state,
         // Merge in new profile image data (should be empty or default image)
-        account: Object.assign({}, state.account, { profileImage: action.payload.profileImage }),
+        account: { ...state.account, profileImage: action.payload.profileImage },
         savePhotoState: 'complete',
         errors: {},
       };
@@ -117,7 +117,7 @@ const profilePage = (state = initialState, action) => {
       return {
         ...state,
         savePhotoState: 'error',
-        errors: Object.assign({}, state.errors, action.payload.errors),
+        errors: { ...state.errors, ...action.payload.errors },
       };
     case DELETE_PROFILE_PHOTO.RESET:
       return {
@@ -129,9 +129,7 @@ const profilePage = (state = initialState, action) => {
     case UPDATE_DRAFT:
       return {
         ...state,
-        drafts: Object.assign({}, state.drafts, {
-          [action.payload.name]: action.payload.value,
-        }),
+        drafts: { ...state.drafts, [action.payload.name]: action.payload.value },
       };
 
     case RESET_DRAFTS:

src/profile/data/sagas.js

@@ -1,7 +1,14 @@
 import { history } from '@edx/frontend-platform';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import pick from 'lodash.pick';
-import { all, call, delay, put, select, takeEvery } from 'redux-saga/effects';
+import {
+  all,
+  call,
+  delay,
+  put,
+  select,
+  takeEvery,
+} from 'redux-saga/effects';
 import {
   closeForm,
   deleteProfilePhotoBegin,

src/profile/data/sagas.test.js

@@ -1,4 +1,11 @@
-import { takeEvery, put, call, delay, select, all } from 'redux-saga/effects';
+import {
+  takeEvery,
+  put,
+  call,
+  delay,
+  select,
+  all,
+} from 'redux-saga/effects';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 
 import * as profileActions from './actions';

src/profile/data/selectors.js

@@ -22,8 +22,7 @@ export const savePhotoStateSelector = state => state.profilePage.savePhotoState;
 export const isLoadingProfileSelector = state => state.profilePage.isLoadingProfile;
 export const currentlyEditingFieldSelector = state => state.profilePage.currentlyEditingField;
 export const accountErrorsSelector = state => state.profilePage.errors;
-export const isAuthenticatedUserProfileSelector = state =>
-  state.profilePage.isAuthenticatedUserProfile;
+export const isAuthenticatedUserProfileSelector = state => state.profilePage.isAuthenticatedUserProfile;
 
 export const editableFormModeSelector = createSelector(
   profileAccountSelector,
@@ -147,13 +146,12 @@ export const certificatesSelector = createSelector(
 
 export const profileImageSelector = createSelector(
   profileAccountSelector,
-  account =>
-    (account.profileImage != null
-      ? {
-        src: account.profileImage.imageUrlFull,
-        isDefault: !account.profileImage.hasImage,
-      }
-      : {}),
+  account => (account.profileImage != null
+    ? {
+      src: account.profileImage.imageUrlFull,
+      isDefault: !account.profileImage.hasImage,
+    }
+    : {}),
 );
 
 /**
@@ -337,6 +335,7 @@ export const profilePageSelector = createSelector(
     profileImage,
     requiresParentalConsent: account.requiresParentalConsent,
     dateJoined: account.dateJoined,
+    yearOfBirth: account.yearOfBirth,
 
     // Bio form data
     bio: formValues.bio,

src/profile/data/services.js

@@ -121,12 +121,12 @@ function transformCertificateData(data) {
   data.forEach((cert) => {
     // download_url may be full url or absolute path.
     // note: using the URL() api breaks in ie 11
-    const urlIsPath = typeof cert.download_url === 'string' &&
-      cert.download_url.search(/http[s]?:\/\//) !== 0;
+    const urlIsPath = typeof cert.download_url === 'string'
+      && cert.download_url.search(/http[s]?:\/\//) !== 0;
 
-    const downloadUrl = urlIsPath ?
-      `${getConfig().LMS_BASE_URL}${cert.download_url}` :
-      cert.download_url;
+    const downloadUrl = urlIsPath
+      ? `${getConfig().LMS_BASE_URL}${cert.download_url}`
+      : cert.download_url;
 
     transformedData.push({
       ...camelCaseObject(cert),

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 { ValidationFormGroup } from '@edx/paragon';
+import { Form } from '@edx/paragon';
 
 import messages from './Bio.messages';
 
@@ -56,10 +56,9 @@ class Bio extends React.Component {
           editing: (
             <div role="dialog" aria-labelledby={`${formId}-label`}>
               <form onSubmit={this.handleSubmit}>
-                <ValidationFormGroup
-                  for={formId}
-                  invalid={error !== null}
-                  invalidMessage={error}
+                <Form.Group
+                  controlId={formId}
+                  isInvalid={error !== null}
                 >
                   <label className="edit-section-header" htmlFor={formId}>
                     {intl.formatMessage(messages['profile.bio.about.me'])}
@@ -71,7 +70,12 @@ class Bio extends React.Component {
                     value={bio}
                     onChange={this.handleChange}
                   />
-                </ValidationFormGroup>
+                  {error !== null && (
+                    <Form.Control.Feedback hasIcon={false}>
+                      {error}
+                    </Form.Control.Feedback>
+                  )}
+                </Form.Group>
                 <FormControls
                   visibilityId="visibilityBio"
                   saveState={saveState}
@@ -83,7 +87,7 @@ class Bio extends React.Component {
             </div>
           ),
           editable: (
-            <React.Fragment>
+            <>
               <EditableItemHeader
                 content={intl.formatMessage(messages['profile.bio.about.me'])}
                 showEditButton
@@ -91,11 +95,11 @@ class Bio extends React.Component {
                 showVisibility={visibilityBio !== null}
                 visibility={visibilityBio}
               />
-              <p className="lead">{bio}</p>
-            </React.Fragment>
+              <p data-hj-suppress className="lead">{bio}</p>
+            </>
           ),
           empty: (
-            <React.Fragment>
+            <>
               <EditableItemHeader content={intl.formatMessage(messages['profile.bio.about.me'])} />
               <EmptyContent onClick={this.handleOpen}>
                 <FormattedMessage
@@ -104,13 +108,13 @@ class Bio extends React.Component {
                   description="instructions when the user hasn't written an About Me"
                 />
               </EmptyContent>
-            </React.Fragment>
+            </>
           ),
           static: (
-            <React.Fragment>
+            <>
               <EditableItemHeader content={intl.formatMessage(messages['profile.bio.about.me'])} />
-              <p className="lead">{bio}</p>
-            </React.Fragment>
+              <p data-hj-suppress className="lead">{bio}</p>
+            </>
           ),
         }}
       />

src/profile/forms/Certificates.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FormattedDate, FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import {
+  FormattedDate, FormattedMessage, injectIntl, intlShape,
+} from '@edx/frontend-platform/i18n';
 import { Hyperlink } from '@edx/paragon';
 import { connect } from 'react-redux';
 import get from 'lodash.get';
@@ -113,11 +115,13 @@ class Certificates extends React.Component {
 
   renderCertificates() {
     if (this.props.certificates === null || this.props.certificates.length === 0) {
-      return (<FormattedMessage
-        id="profile.no.certificates"
-        defaultMessage="You don't have any certificates yet."
-        description="displays when user has no course completion certificates"
-      />);
+      return (
+        <FormattedMessage
+          id="profile.no.certificates"
+          defaultMessage="You don't have any certificates yet."
+          description="displays when user has no course completion certificates"
+        />
+      );
     }
 
     return (
@@ -154,7 +158,7 @@ class Certificates extends React.Component {
             </div>
           ),
           editable: (
-            <React.Fragment>
+            <>
               <EditableItemHeader
                 content={intl.formatMessage(messages['profile.certificates.my.certificates'])}
                 showEditButton
@@ -163,10 +167,10 @@ class Certificates extends React.Component {
                 visibility={visibilityCourseCertificates}
               />
               {this.renderCertificates()}
-            </React.Fragment>
+            </>
           ),
           empty: (
-            <React.Fragment>
+            <>
               <EditableItemHeader
                 content={intl.formatMessage(messages['profile.certificates.my.certificates'])}
                 showEditButton
@@ -175,13 +179,13 @@ class Certificates extends React.Component {
                 visibility={visibilityCourseCertificates}
               />
               {this.renderCertificates()}
-            </React.Fragment>
+            </>
           ),
           static: (
-            <React.Fragment>
+            <>
               <EditableItemHeader content={intl.formatMessage(messages['profile.certificates.my.certificates'])} />
               {this.renderCertificates()}
-            </React.Fragment>
+            </>
           ),
         }}
       />

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 { ValidationFormGroup } from '@edx/paragon';
+import { Form } from '@edx/paragon';
 
 import messages from './Country.messages';
 
@@ -67,15 +67,15 @@ class Country extends React.Component {
           editing: (
             <div role="dialog" aria-labelledby={`${formId}-label`}>
               <form onSubmit={this.handleSubmit}>
-                <ValidationFormGroup
-                  for={formId}
-                  invalid={error !== null}
-                  invalidMessage={error}
+                <Form.Group
+                  controlId={formId}
+                  isInvalid={error !== null}
                 >
                   <label className="edit-section-header" htmlFor={formId}>
                     {intl.formatMessage(messages['profile.country.label'])}
                   </label>
                   <select
+                    data-hj-suppress
                     className="form-control"
                     type="select"
                     id={formId}
@@ -83,12 +83,17 @@ class Country extends React.Component {
                     value={country}
                     onChange={this.handleChange}
                   >
-                    <option value="" />
+                    <option value="">&nbsp;</option>
                     {sortedCountries.map(({ code, name }) => (
                       <option key={code} value={code}>{name}</option>
                     ))}
                   </select>
-                </ValidationFormGroup>
+                  {error !== null && (
+                    <Form.Control.Feedback hasIcon={false}>
+                      {error}
+                    </Form.Control.Feedback>
+                  )}
+                </Form.Group>
                 <FormControls
                   visibilityId="visibilityCountry"
                   saveState={saveState}
@@ -100,7 +105,7 @@ class Country extends React.Component {
             </div>
           ),
           editable: (
-            <React.Fragment>
+            <>
               <EditableItemHeader
                 content={intl.formatMessage(messages['profile.country.label'])}
                 showEditButton
@@ -108,26 +113,26 @@ class Country extends React.Component {
                 showVisibility={visibilityCountry !== null}
                 visibility={visibilityCountry}
               />
-              <p className="h5">{countryMessages[country]}</p>
-            </React.Fragment>
+              <p data-hj-suppress className="h5">{countryMessages[country]}</p>
+            </>
           ),
           empty: (
-            <React.Fragment>
+            <>
               <EditableItemHeader
                 content={intl.formatMessage(messages['profile.country.label'])}
               />
               <EmptyContent onClick={this.handleOpen}>
                 {intl.formatMessage(messages['profile.country.empty'])}
               </EmptyContent>
-            </React.Fragment>
+            </>
           ),
           static: (
-            <React.Fragment>
+            <>
               <EditableItemHeader
                 content={intl.formatMessage(messages['profile.country.label'])}
               />
-              <p className="h5">{countryMessages[country]}</p>
-            </React.Fragment>
+              <p data-hj-suppress className="h5">{countryMessages[country]}</p>
+            </>
           ),
         }}
       />

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 { ValidationFormGroup } from '@edx/paragon';
+import { Form } from '@edx/paragon';
 
 import messages from './Education.messages';
 
@@ -63,22 +63,22 @@ class Education extends React.Component {
           editing: (
             <div role="dialog" aria-labelledby={`${formId}-label`}>
               <form onSubmit={this.handleSubmit}>
-                <ValidationFormGroup
-                  for={formId}
-                  invalid={error !== null}
-                  invalidMessage={error}
+                <Form.Group
+                  controlId={formId}
+                  isInvalid={error !== null}
                 >
                   <label className="edit-section-header" htmlFor={formId}>
                     {intl.formatMessage(messages['profile.education.education'])}
                   </label>
                   <select
+                    data-hj-suppress
                     className="form-control"
                     id={formId}
                     name={formId}
                     value={levelOfEducation}
                     onChange={this.handleChange}
                   >
-                    <option value="" />
+                    <option value="">&nbsp;</option>
                     {EDUCATION_LEVELS.map(level => (
                       <option key={level} value={level}>
                         {intl.formatMessage(get(
@@ -89,7 +89,12 @@ class Education extends React.Component {
                       </option>
                     ))}
                   </select>
-                </ValidationFormGroup>
+                  {error !== null && (
+                    <Form.Control.Feedback hasIcon={false}>
+                      {error}
+                    </Form.Control.Feedback>
+                  )}
+                </Form.Group>
                 <FormControls
                   visibilityId="visibilityLevelOfEducation"
                   saveState={saveState}
@@ -101,7 +106,7 @@ class Education extends React.Component {
             </div>
           ),
           editable: (
-            <React.Fragment>
+            <>
               <EditableItemHeader
                 content={intl.formatMessage(messages['profile.education.education'])}
                 showEditButton
@@ -109,17 +114,17 @@ class Education extends React.Component {
                 showVisibility={visibilityLevelOfEducation !== null}
                 visibility={visibilityLevelOfEducation}
               />
-              <p className="h5">
+              <p data-hj-suppress className="h5">
                 {intl.formatMessage(get(
                   messages,
                   `profile.education.levels.${levelOfEducation}`,
                   messages['profile.education.levels.o'],
                 ))}
               </p>
-            </React.Fragment>
+            </>
           ),
           empty: (
-            <React.Fragment>
+            <>
               <EditableItemHeader content={intl.formatMessage(messages['profile.education.education'])} />
               <EmptyContent onClick={this.handleOpen}>
                 <FormattedMessage
@@ -128,19 +133,19 @@ class Education extends React.Component {
                   description="instructions when the user doesn't have their level of education set"
                 />
               </EmptyContent>
-            </React.Fragment>
+            </>
           ),
           static: (
-            <React.Fragment>
+            <>
               <EditableItemHeader content={intl.formatMessage(messages['profile.education.education'])} />
-              <p className="h5">
+              <p data-hj-suppress className="h5">
                 {intl.formatMessage(get(
                   messages,
                   `profile.education.levels.${levelOfEducation}`,
                   messages['profile.education.levels.o'],
                 ))}
               </p>
-            </React.Fragment>
+            </>
           ),
         }}
       />

src/profile/forms/LearningGoal.jsx

@@ -0,0 +1,92 @@
+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));

src/profile/forms/LearningGoal.messages.jsx

@@ -0,0 +1,31 @@
+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;

src/profile/forms/LearningGoal.test.jsx

@@ -0,0 +1,122 @@
+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']);
+    });
+  });
+});

src/profile/forms/Name.jsx

@@ -68,7 +68,7 @@ class Name extends React.Component {
                   Once we're super sure we don't want it back, you could delete the name props and
                   such to fully get rid of it.
                   */}
-                  <p className="h5">{name}</p>
+                  <p data-hj-suppress className="h5">{name}</p>
                   <small className="form-text text-muted" id={`${formId}-help-text`}>
                     {intl.formatMessage(messages['profile.name.details'])}
                   </small>
@@ -84,7 +84,7 @@ class Name extends React.Component {
             </div>
           ),
           editable: (
-            <React.Fragment>
+            <>
               <EditableItemHeader
                 content={intl.formatMessage(messages['profile.name.full.name'])}
                 showEditButton
@@ -92,14 +92,14 @@ class Name extends React.Component {
                 showVisibility={visibilityName !== null}
                 visibility={visibilityName}
               />
-              <p className="h5">{name}</p>
+              <p data-hj-suppress className="h5">{name}</p>
               <small className="form-text text-muted">
                 {intl.formatMessage(messages['profile.name.details'])}
               </small>
-            </React.Fragment>
+            </>
           ),
           empty: (
-            <React.Fragment>
+            <>
               <EditableItemHeader content={intl.formatMessage(messages['profile.name.full.name'])} />
               <EmptyContent onClick={this.handleOpen}>
                 {intl.formatMessage(messages['profile.name.empty'])}
@@ -107,13 +107,13 @@ class Name extends React.Component {
               <small className="form-text text-muted">
                 {intl.formatMessage(messages['profile.name.details'])}
               </small>
-            </React.Fragment>
+            </>
           ),
           static: (
-            <React.Fragment>
+            <>
               <EditableItemHeader content={intl.formatMessage(messages['profile.name.full.name'])} />
-              <p className="h5">{name}</p>
-            </React.Fragment>
+              <p data-hj-suppress className="h5">{name}</p>
+            </>
           ),
         }}
       />

src/profile/forms/PluginCountry.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { injectIntl } from '@edx/frontend-platform/i18n';
+import { Icon } from '@edx/paragon';
+import { LocationOn } from '@edx/paragon/icons';
+
+// Selectors
+import { countrySelector } from '../data/selectors';
+
+// eslint-disable-next-line react/prefer-stateless-function
+class PluginCountry extends React.Component {
+  render() {
+    const {
+      country,
+      countryMessages,
+    } = this.props;
+
+    return (
+      <div className="pgn-icons-cell-horizontal">
+        <Icon src={LocationOn} />
+        <p className="h5 mt-1 ml-1">{countryMessages[country]}</p>
+      </div>
+    );
+  }
+}
+
+PluginCountry.propTypes = {
+  country: PropTypes.string,
+  countryMessages: PropTypes.objectOf(PropTypes.string).isRequired,
+};
+
+PluginCountry.defaultProps = {
+  country: null,
+};
+
+export default connect(
+  countrySelector,
+  {},
+)(injectIntl(PluginCountry));

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 { ValidationFormGroup } from '@edx/paragon';
+import { Form } from '@edx/paragon';
 
 import messages from './PreferredLanguage.messages';
 
@@ -77,27 +77,32 @@ class PreferredLanguage extends React.Component {
           editing: (
             <div role="dialog" aria-labelledby={`${formId}-label`}>
               <form onSubmit={this.handleSubmit}>
-                <ValidationFormGroup
-                  for={formId}
-                  invalid={error !== null}
-                  invalidMessage={error}
+                <Form.Group
+                  controlId={formId}
+                  isInvalid={error !== null}
                 >
                   <label className="edit-section-header" htmlFor={formId}>
                     {intl.formatMessage(messages['profile.preferredlanguage.label'])}
                   </label>
                   <select
+                    data-hj-suppress
                     id={formId}
                     name={formId}
                     className="form-control"
                     value={value}
                     onChange={this.handleChange}
                   >
-                    <option value="" />
+                    <option value="">&nbsp;</option>
                     {sortedLanguages.map(({ code, name }) => (
                       <option key={code} value={code}>{name}</option>
                     ))}
                   </select>
-                </ValidationFormGroup>
+                  {error !== null && (
+                    <Form.Control.Feedback hasIcon={false}>
+                      {error}
+                    </Form.Control.Feedback>
+                  )}
+                </Form.Group>
                 <FormControls
                   visibilityId="visibilityLanguageProficiencies"
                   saveState={saveState}
@@ -109,7 +114,7 @@ class PreferredLanguage extends React.Component {
             </div>
           ),
           editable: (
-            <React.Fragment>
+            <>
               <EditableItemHeader
                 content={intl.formatMessage(messages['profile.preferredlanguage.label'])}
                 showEditButton
@@ -117,26 +122,26 @@ class PreferredLanguage extends React.Component {
                 showVisibility={visibilityLanguageProficiencies !== null}
                 visibility={visibilityLanguageProficiencies}
               />
-              <p className="h5">{languageMessages[value]}</p>
-            </React.Fragment>
+              <p data-hj-suppress className="h5">{languageMessages[value]}</p>
+            </>
           ),
           empty: (
-            <React.Fragment>
+            <>
               <EditableItemHeader
                 content={intl.formatMessage(messages['profile.preferredlanguage.label'])}
               />
               <EmptyContent onClick={this.handleOpen}>
                 {intl.formatMessage(messages['profile.preferredlanguage.empty'])}
               </EmptyContent>
-            </React.Fragment>
+            </>
           ),
           static: (
-            <React.Fragment>
+            <>
               <EditableItemHeader
                 content={intl.formatMessage(messages['profile.preferredlanguage.label'])}
               />
-              <p className="h5">{languageMessages[value]}</p>
-            </React.Fragment>
+              <p data-hj-suppress className="h5">{languageMessages[value]}</p>
+            </>
           ),
         }}
       />

src/profile/forms/ProfileAvatar.jsx

@@ -33,7 +33,9 @@ class ProfileAvatar extends React.Component {
   }
 
   onSubmit(e) {
-    if (e) e.preventDefault();
+    if (e) {
+      e.preventDefault();
+    }
     this.props.onSave(new FormData(this.form.current));
     this.form.current.reset();
   }
@@ -55,7 +57,9 @@ class ProfileAvatar extends React.Component {
     if (this.props.isDefault) {
       return (
         <Button
-          className="text-white btn-block btn-sm btn-link"
+          variant="link"
+          size="sm"
+          className="text-white btn-block"
           onClick={this.onClickUpload}
         >
           <FormattedMessage
@@ -69,9 +73,9 @@ class ProfileAvatar extends React.Component {
 
     return (
       <Dropdown>
-        <Dropdown.Button type="btn-outline">
+        <Dropdown.Toggle>
           {intl.formatMessage(messages['profile.profileavatar.change-button'])}
-        </Dropdown.Button>
+        </Dropdown.Toggle>
         <Dropdown.Menu>
           <Dropdown.Item type="button" onClick={this.onClickUpload}>
             <FormattedMessage
@@ -93,7 +97,9 @@ class ProfileAvatar extends React.Component {
   }
 
   renderMenu() {
-    if (!this.props.isEditable) return null;
+    if (!this.props.isEditable) {
+      return null;
+    }
 
     return (
       <div className="profile-avatar-menu-container">
@@ -109,6 +115,7 @@ class ProfileAvatar extends React.Component {
       <DefaultAvatar className="text-muted" role="img" aria-hidden focusable="false" viewBox="0 0 24 24" />
     ) : (
       <img
+        data-hj-suppress
         className="w-100 h-100 d-block rounded-circle overflow-hidden"
         style={{ objectFit: 'cover' }}
         alt={intl.formatMessage(messages['profile.image.alt.attribute'])}

src/profile/forms/SocialLinks.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { StatusAlert } from '@edx/paragon';
+import { Alert } 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 {
     }
   }
 
-  mergeWithDrafts(newSocialLink) {
-    const knownPlatforms = ['twitter', 'facebook', 'linkedin'];
-    const updated = [];
-    knownPlatforms.forEach((platform) => {
-      if (newSocialLink.platform === platform) {
-        updated.push(newSocialLink);
-      } else if (this.props.draftSocialLinksByPlatform[platform] !== undefined) {
-        updated.push(this.props.draftSocialLinksByPlatform[platform]);
-      }
-    });
-    return updated;
-  }
-
   handleSubmit(e) {
     e.preventDefault();
     this.props.submitHandler(this.props.formId);
@@ -91,6 +78,19 @@ class SocialLinks extends React.Component {
     this.props.openHandler(this.props.formId);
   }
 
+  mergeWithDrafts(newSocialLink) {
+    const knownPlatforms = ['twitter', 'facebook', 'linkedin'];
+    const updated = [];
+    knownPlatforms.forEach((platform) => {
+      if (newSocialLink.platform === platform) {
+        updated.push(newSocialLink);
+      } else if (this.props.draftSocialLinksByPlatform[platform] !== undefined) {
+        updated.push(this.props.draftSocialLinksByPlatform[platform]);
+      }
+    });
+    return updated;
+  }
+
   render() {
     const {
       socialLinks, visibilitySocialLinks, editMode, saveState, error, intl,
@@ -102,7 +102,7 @@ class SocialLinks extends React.Component {
         expression={editMode}
         cases={{
           empty: (
-            <React.Fragment>
+            <>
               <EditableItemHeader content={intl.formatMessage(messages['profile.sociallinks.social.links'])} />
               <ul className="list-unstyled">
                 {socialLinks.map(({ platform }) => (
@@ -113,10 +113,10 @@ class SocialLinks extends React.Component {
                   />
                 ))}
               </ul>
-            </React.Fragment>
+            </>
           ),
           static: (
-            <React.Fragment>
+            <>
               <EditableItemHeader
                 content={intl.formatMessage(messages['profile.sociallinks.social.links'])}
               />
@@ -130,13 +130,12 @@ class SocialLinks extends React.Component {
                       url={socialLink}
                       platform={platform}
                     />
-                  ))
-                }
+                  ))}
               </ul>
-            </React.Fragment>
+            </>
           ),
           editable: (
-            <React.Fragment>
+            <>
               <EditableItemHeader
                 content={intl.formatMessage(messages['profile.sociallinks.social.links'])}
                 showEditButton
@@ -155,18 +154,23 @@ class SocialLinks extends React.Component {
                   />
                 ))}
               </ul>
-            </React.Fragment>
+            </>
           ),
           editing: (
             <div role="dialog" aria-labelledby="social-links-label">
-              <form onSubmit={this.handleSubmit}>
+              <form aria-labelledby="editing-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 ? <StatusAlert alertType="danger" dialog={error} dismissible={false} open /> : null}
+                  {error !== null
+                    ? (
+                      <Alert variant="danger" dismissible={false} show>
+                        {error}
+                      </Alert>
+                    ) : null}
                 </div>
                 <ul className="list-unstyled">
                   {socialLinks.map(({ platform, socialLink }) => (
@@ -240,14 +244,12 @@ export default connect(
   {},
 )(injectIntl(SocialLinks));
 
-function SocialLink({ url, name, platform }) {
-  return (
-    <a href={url} className="font-weight-bold">
-      <FontAwesomeIcon className="mr-2" icon={platformDisplayInfo[platform].icon} />
-      {name}
-    </a>
-  );
-}
+const SocialLink = ({ url, name, platform }) => (
+  <a href={url} className="font-weight-bold">
+    <FontAwesomeIcon className="mr-2" icon={platformDisplayInfo[platform].icon} />
+    {name}
+  </a>
+);
 
 SocialLink.propTypes = {
   url: PropTypes.string.isRequired,
@@ -255,9 +257,9 @@ SocialLink.propTypes = {
   name: PropTypes.string.isRequired,
 };
 
-function EditableListItem({
+const EditableListItem = ({
   url, platform, onClickEmptyContent, name,
-}) {
+}) => {
   const linkDisplay = url ? (
     <SocialLink name={name} url={url} platform={platform} />
   ) : (
@@ -265,7 +267,7 @@ function EditableListItem({
   );
 
   return <li className="form-group">{linkDisplay}</li>;
-}
+};
 
 EditableListItem.propTypes = {
   url: PropTypes.string,
@@ -278,24 +280,22 @@ EditableListItem.defaultProps = {
   onClickEmptyContent: null,
 };
 
-function EditingListItem({
+const EditingListItem = ({
   platform, name, value, onChange, error,
-}) {
-  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>
-  );
-}
+}) => (
+  <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,35 +310,31 @@ EditingListItem.defaultProps = {
   error: null,
 };
 
-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>
-  );
-}
+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>
+);
 
 EmptyListItem.propTypes = {
   name: PropTypes.string.isRequired,
   onClick: PropTypes.func.isRequired,
 };
 
-function StaticListItem({ name, url, platform }) {
-  return (
-    <li className="mb-2">
-      <SocialLink name={name} url={url} platform={platform} />
-    </li>
-  );
-}
+const StaticListItem = ({ name, url, platform }) => (
+  <li className="mb-2">
+    <SocialLink name={name} url={url} platform={platform} />
+  </li>
+);
 
 StaticListItem.propTypes = {
   name: PropTypes.string.isRequired,