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

chore: upgrade versions of frontend-build and frontend-component-header

.env

@@ -10,8 +10,6 @@ LOGIN_URL=''
 LOGOUT_URL=''
 MARKETING_SITE_BASE_URL=''
 ORDER_HISTORY_URL=''
-ACCOUNT_SETTINGS_URL=''
-ACCOUNT_PROFILE_URL=''
 REFRESH_ACCESS_TOKEN_ENDPOINT=''
 SEGMENT_KEY=''
 SITE_NAME=''
@@ -24,11 +22,5 @@ LOGO_URL=''
 LOGO_TRADEMARK_URL=''
 LOGO_WHITE_URL=''
 FAVICON_URL=''
-COLLECT_YEAR_OF_BIRTH=true
-APP_ID=''
-MFE_CONFIG_API_URL=''
-SEARCH_CATALOG_URL=''
-ENABLE_SKILLS_BUILDER_PROFILE=''
-# Fallback in local style files
-PARAGON_THEME_URLS={}
-DISABLE_VISIBILITY_EDITING=''
+ENABLE_LEARNER_RECORD_MFE=''
+LEARNER_RECORD_MFE_BASE_URL=''

.env.development

@@ -3,9 +3,7 @@ PORT=1995
 ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'
 BASE_URL='localhost:1995'
 CREDENTIALS_BASE_URL='http://localhost:18150'
-ACCOUNT_SETTINGS_URL=http://localhost:1997
 CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
-ACCOUNT_PROFILE_URL=http://localhost:1995
 ECOMMERCE_BASE_URL='http://localhost:18130'
 LANGUAGE_PREFERENCE_COOKIE_NAME='openedx-language-preference'
 LMS_BASE_URL='http://localhost:18000'
@@ -25,11 +23,5 @@ LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
 LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
 LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
 FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
-COLLECT_YEAR_OF_BIRTH=true
-APP_ID=''
-MFE_CONFIG_API_URL=''
-SEARCH_CATALOG_URL='http://localhost:18000/courses'
-ENABLE_SKILLS_BUILDER_PROFILE=''
-# Fallback in local style files
-PARAGON_THEME_URLS={}
-DISABLE_VISIBILITY_EDITING=''
+ENABLE_LEARNER_RECORD_MFE=''
+LEARNER_RECORD_MFE_BASE_URL='http://localhost:1990'

.env.test

@@ -5,8 +5,6 @@ CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
 ECOMMERCE_BASE_URL='http://localhost:18130'
 LANGUAGE_PREFERENCE_COOKIE_NAME='openedx-language-preference'
 LMS_BASE_URL='http://localhost:18000'
-ACCOUNT_SETTINGS_URL='http://localhost:1997'
-ACCOUNT_PROFILE_URL='http://localhost:1995'
 LOGIN_URL='http://localhost:18000/login'
 LOGOUT_URL='http://localhost:18000/logout'
 MARKETING_SITE_BASE_URL='http://localhost:18000'
@@ -20,10 +18,4 @@ LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
 LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
 FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
 ENABLE_LEARNER_RECORD_MFE=''
-ENABLE_SKILLS_BUILDER_PROFILE=''
 LEARNER_RECORD_MFE_BASE_URL='http://localhost:1990'
-COLLECT_YEAR_OF_BIRTH=true
-APP_ID=''
-MFE_CONFIG_API_URL=''
-PARAGON_THEME_URLS={}
-DISABLE_VISIBILITY_EDITING=''

.eslintrc.js

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

.github/CODEOWNERS

@@ -0,0 +1 @@
+* @edx/community-engineering

.github/dependabot.yml

@@ -1,7 +0,0 @@
-version: 2
-updates:
-    # Adding new check for github-actions
-  - package-ecosystem: "github-actions"
-    directory: "/"
-    schedule:
-        interval: "weekly"

.github/pull_request_template.md

@@ -1,24 +0,0 @@
-### Description
-
-Include a description of your changes here, along with a link to any relevant Jira tickets and/or GitHub issues.
-
-#### How Has This Been Tested?
-
-Please describe in detail how you tested your changes.
-
-#### Screenshots/sandbox (optional):
-Include a link to the sandbox for design changes or screenshot for before and after. **Remove this section if it's not applicable.**
-
-|Before|After|
-|-------|-----|
-|      |      |
-
-#### Merge Checklist
-
-* [ ] If your update includes visual changes, have they been reviewed by a designer? Send them a link to the Sandbox, if applicable.
-* [ ] Is there adequate test coverage for your changes?
-
-#### Post-merge Checklist
-
-* [ ] Deploy the changes to prod after verifying on stage or ask **@openedx/2u-infinity** to do it. 
-* [ ] 🎉 🙌 Celebrate! Thanks for your contribution.

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

@@ -1,19 +0,0 @@
-# Run the workflow that adds new tickets that are either:
-# - labelled "DEPR"
-# - title starts with "[DEPR]"
-# - body starts with "Proposal Date" (this is the first template field)
-# to the org-wide DEPR project board
-
-name: Add newly created DEPR issues to the DEPR project board
-
-on:
-  issues:
-    types: [opened]
-
-jobs:
-  routeissue:
-    uses: openedx/.github/.github/workflows/add-depr-ticket-to-depr-board.yml@master
-    secrets:
-      GITHUB_APP_ID: ${{ secrets.GRAPHQL_AUTH_APP_ID }}
-      GITHUB_APP_PRIVATE_KEY: ${{ secrets.GRAPHQL_AUTH_APP_PEM }}
-      SLACK_BOT_TOKEN: ${{ secrets.SLACK_ISSUE_BOT_TOKEN }}

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

@@ -1,20 +0,0 @@
-# This workflow runs when a comment is made on the ticket
-# If the comment starts with "label: " it tries to apply
-# the label indicated in rest of comment.
-# If the comment starts with "remove label: ", it tries
-# to remove the indicated label.
-# Note: Labels are allowed to have spaces and this script does
-# not parse spaces (as often a space is legitimate), so the command
-# "label: really long lots of words label" will apply the
-# label "really long lots of words label"
-
-name: Allows for the adding and removing of labels via comment
-
-on:
-  issue_comment:
-    types: [created]
-
-jobs:
-  add_remove_labels:
-    uses: openedx/.github/.github/workflows/add-remove-label-on-comment.yml@master
-

.github/workflows/ci.yml

@@ -1,3 +1,4 @@
+---
 name: ci
 on:
   push:
@@ -5,25 +6,27 @@ on:
     - master
   pull_request:
 jobs:
-  tests:
+  build:
     runs-on: ubuntu-latest
     strategy:
       matrix:
+        node-version:
+        - 12
         npm-test:
         - i18n_extract
+        - is-es5
         - lint
         - test
     steps:
-    - uses: actions/checkout@v4
-    - uses: actions/setup-node@v4
+    - uses: actions/checkout@v2
+    - uses: actions/setup-node@v2
       with:
-        node-version-file: '.nvmrc'
+        node-version: ${{ matrix.node-version }}
+    - run: npm install -g npm@6
     - run: make requirements
     - run: make test NPM_TESTS=build
     - run: make test NPM_TESTS=${{ matrix.npm-test }}
-    - name: Coverage
-      if: ${{ matrix.npm-test == 'test' }}
-      uses: codecov/codecov-action@v4
+    - name: upload coverage
+      uses: codecov/codecov-action@v2
       with:
-        token: ${{ secrets.CODECOV_TOKEN }}
-        fail_ci_if_error: true
+        fail_ci_if_error: false

.github/workflows/commitlint.yml

@@ -7,4 +7,4 @@ on:
 
 jobs:
   commitlint:
-    uses: openedx/.github/.github/workflows/commitlint.yml@master
+    uses: edx/.github/.github/workflows/commitlint.yml@master

.github/workflows/lockfileversion-check.yml

@@ -1,13 +0,0 @@
-#check package-lock file version
-
-name: Lockfile Version check
-
-on:
-  push:
-    branches:
-    - master
-  pull_request:
-
-jobs:
-  version-check:
-    uses: openedx/.github/.github/workflows/lockfileversion-check-v3.yml@master

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

@@ -1,12 +0,0 @@
-# This workflow runs when a comment is made on the ticket
-# If the comment starts with "assign me" it assigns the author to the
-# ticket (case insensitive)
-
-name: Assign comment author to ticket if they say "assign me"
-on:
-  issue_comment:
-    types: [created]
-
-jobs:
-  self_assign_by_comment:
-    uses: openedx/.github/.github/workflows/self-assign-issue.yml@master

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

@@ -1,12 +0,0 @@
-name: Update Browserslist DB
-on:
-  schedule:
-    - cron:  '0 0 * * 1'
-  workflow_dispatch:
-
-jobs:
-  update-browserslist:
-    uses: openedx/.github/.github/workflows/update-browserslist-db.yml@master
-
-    secrets:
-        requirements_bot_github_token: ${{ secrets.requirements_bot_github_token }}

.gitignore

@@ -17,4 +17,3 @@ temp/babel-plugin-react-intl
 /temp
 /.vscode
 /module.config.js
-src/i18n/messages

.nvmrc

@@ -1 +0,0 @@
-24

.tx/config

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

Makefile

@@ -1,11 +1,16 @@
-intl_imports = ./node_modules/.bin/intl-imports.js
+transifex_resource = frontend-app-profile
+transifex_langs = "ar,fr,es_419,zh_CN"
+
 transifex_utils = ./node_modules/.bin/transifex-utils.js
 i18n = ./src/i18n
 transifex_input = $(i18n)/transifex_input.json
-# This directory must match .babelrc .
-transifex_temp = ./temp/babel-plugin-formatjs
+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/
 
-NPM_TESTS=build i18n_extract lint test
+# This directory must match .babelrc .
+transifex_temp = ./temp/babel-plugin-react-intl
+
+NPM_TESTS=build i18n_extract lint test is-es5
 
 .PHONY: test
 test: $(addprefix test.npm.,$(NPM_TESTS))  ## validate ci suite
@@ -35,18 +40,20 @@ detect_changed_source_translations:
 	# Checking for changed translations...
 	git diff --exit-code $(i18n)
 
-pull_translations:
-	rm -rf src/i18n/messages
-	mkdir src/i18n/messages
-	cd src/i18n/messages \
-      && atlas pull $(ATLAS_OPTIONS) \
-               translations/frontend-platform/src/i18n/messages:frontend-platform \
-               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
+# Pushes translations to Transifex.  You must run make extract_translations first.
+push_translations:
+	# Pushing strings to Transifex...
+	tx push -s
+	# Fetching hashes from Transifex...
+	./node_modules/reactifex/bash_scripts/get_hashed_strings.sh $(tx_url1)
+	# Writing out comments to file...
+	$(transifex_utils) $(transifex_temp) --comments
+	# Pushing comments to Transifex...
+	./node_modules/reactifex/bash_scripts/put_comments.sh $(tx_url2)
 
-	$(intl_imports) frontend-platform paragon frontend-component-header frontend-component-footer frontend-app-profile
+# Pulls translations from Transifex.
+pull_translations:
+	tx pull -f --mode reviewed --language=$(transifex_langs)
 
 # This target is used by Travis.
 validate-no-uncommitted-package-lock-changes:

README.rst

@@ -1,153 +1,57 @@
-#####################
+|Build Status| |Codecov| |license|
+
 frontend-app-profile
-#####################
+====================
 
-|license-badge| |status-badge| |ci-badge| |codecov-badge|
-
-.. |license-badge| image:: https://img.shields.io/github/license/openedx/frontend-app-profile.svg
-    :target: https://github.com/openedx/frontend-app-profile/blob/main/LICENSE
-    :alt: License
-
-.. |status-badge| image:: https://img.shields.io/badge/Status-Maintained-brightgreen
-
-.. |ci-badge| image:: https://github.com/openedx/frontend-app-profile/actions/workflows/ci.yml/badge.svg
-    :target: https://github.com/openedx/frontend-app-profile/actions/workflows/ci.yml
-    :alt: Continuous Integration
-
-.. |codecov-badge| image:: https://codecov.io/github/openedx/frontend-app-profile/coverage.svg?branch=main
-    :target: https://codecov.io/github/openedx/frontend-app-profile?branch=main
-    :alt: Codecov
-
-********
-Purpose
-********
-
-This is a micro-frontend application responsible for the display and updating of user profiles.
+This is a micro-frontend application responsible for the display and updating of user profiles. Please tag **@edx/arch-fed** on any PRs or issues.
 
 When a user views their own profile, they're given fields to edit their full name, location, primary spoken language, education, social links, and bio.  Each field also has a dropdown to select the visibility of that field - i.e., whether it can be viewed by other learners.
 
 When a user views someone else's profile, they see all those fields that that user set as public.
 
-***************
-Getting Started
-***************
+----------
 
-Installation
-============
+Development
+-----------
 
-Follow these steps to provision, run, and enable an instance of the
-Profile MFE for local development via the `devstack`_.
+Start Devstack
+^^^^^^^^^^^^^^
 
-.. _devstack: https://github.com/openedx/devstack#getting-started
+To use this application `devstack <https://github.com/edx/devstack>`__ must be running and you must be logged into it.
 
-#. To use this application, `devstack <https://github.com/openedx/devstack>`__ must be running and you must be logged into it.
+-  Start devstack
+-  Log in (http://localhost:18000/login)
 
-   * Start devstack
-   * Log in (http://localhost:18000/login)
+Start the development server
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 
-#. To run Profile, install requirements and start the development server by running:
+In this project, install requirements and start the development server by running:
 
-.. code-block::
+.. code:: bash
 
-  1. Clone your new repo:
+   npm install
+   npm start # The server will run on port 1995
 
-    ``git clone https://github.com/openedx/frontend-app-profile.git``
+Once the dev server is up visit http://localhost:1995/u/staff.
 
-  2. Use node v18.x.
+----------
 
-    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.
-
-Plugins
-=======
-This MFE can be customized using `Frontend Plugin Framework <https://github.com/openedx/frontend-plugin-framework>`_.
-
-The parts of this MFE that can be customized in that manner are documented `here </src/plugin-slots>`_.
-
-Configuration
-=============
+Configuration and Deployment
+----------------------------
 
 This MFE is configured via node environment variables supplied at build time. See the .env file for the list of required environment variables. Example build syntax with a single environment variable:
 
-.. code-block::
+.. code:: bash
 
    NODE_ENV=production ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload' npm run build
 
-Getting Help
-============
 
-If you're having trouble, we have discussion forums at
-https://discuss.openedx.org where you can connect with others in the community.
+For more information see the document: `Micro-frontend applications in Open
+edX <https://edx.readthedocs.io/projects/edx-developer-docs/en/latest/micro-frontends-in-open-edx.html>`__.
 
-Our real-time conversations are on Slack. You can request a `Slack
-invitation`_, then join our `community Slack workspace`_.  Because this is a
-frontend repository, the best place to discuss it would be in the `#wg-frontend
-channel`_.
-
-For anything non-trivial, the best path is to open an issue in this repository
-with as many details about the issue you are facing as you can provide.  Please tag **@openedx/2u-infinity** on any PRs or issues.
-
-https://github.com/openedx/frontend-app-profile/issues
-
-For more information about these options, see the `Getting Help`_ page.
-
-.. _Slack invitation: https://openedx.org/slack
-.. _community Slack workspace: https://openedx.slack.com/
-.. _#wg-frontend channel: https://openedx.slack.com/archives/C04BM6YC7A6
-.. _Getting Help: https://openedx.org/getting-help
-
-License
-=======
-
-The code in this repository is licensed under the AGPLv3 unless otherwise
-noted.
-
-Please see `LICENSE <LICENSE>`_ for details.
-
-Contributing
-============
-
-Contributions are very welcome.  Please read `How To Contribute`_ for details.
-
-.. _How To Contribute: https://openedx.org/r/how-to-contribute
-
-This project is currently accepting all types of contributions, bug fixes,
-security fixes, maintenance work, or new features.  However, please make sure
-to have a discussion about your new feature idea with the maintainers prior to
-beginning development to maximize the chances of your change being accepted.
-You can start a conversation by creating a new issue on this repo summarizing
-your idea.
-
-The Open edX Code of Conduct
-============================
-
-All community members are expected to follow the `Open edX Code of Conduct`_.
-
-.. _Open edX Code of Conduct: https://openedx.org/code-of-conduct/
-
-People
-======
-
-The assigned maintainers for this component and other project details may be
-found in `Backstage`_. Backstage pulls this data from the ``catalog-info.yaml``
-file in this repo.
-
-.. _Backstage: https://backstage.herokuapp.com/catalog/default/component/frontend-app-profile
-
-Reporting Security Issues
-=========================
-
-Please do not report security issues in public.  Email security@openedx.org instead.
+.. |Build Status| image:: https://api.travis-ci.org/edx/frontend-app-profile.svg?branch=master
+   :target: https://travis-ci.org/edx/frontend-app-profile
+.. |Codecov| image:: https://img.shields.io/codecov/c/github/edx/frontend-app-profile
+   :target: https://codecov.io/gh/edx/frontend-app-profile
+.. |license| image:: https://img.shields.io/npm/l/@edx/frontend-app-profile.svg
+   :target: @edx/frontend-app-profile

catalog-info.yaml

@@ -1,25 +0,0 @@
-# This file records information about this repo. Its use is described in OEP-55:
-# https://open-edx-proposals.readthedocs.io/en/latest/processes/oep-0055-proc-project-maintainers.html
-apiVersion: backstage.io/v1alpha1
-kind: Component
-metadata:
-  name: 'frontend-app-profile'
-  description: 'This is a micro-frontend application responsible for displaying and updating the 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"
-    openedx.org/release: "master"
-spec:
-  owner: group:2u-infinity
-  type: 'service'
-  lifecycle: 'production'
-# (Optional) An array of different components or resources.

jest.config.js

@@ -1,7 +1,7 @@
-const { createConfig } = require('@openedx/frontend-build');
+const { createConfig } = require('@edx/frontend-build');
 
 module.exports = createConfig('jest', {
-  setupFilesAfterEnv: [
+  setupFiles: [
     '<rootDir>/src/setupTest.js',
   ],
 });

openedx.yaml

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

package.json

@@ -6,73 +6,71 @@
   "license": "AGPL-3.0",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/openedx/frontend-app-profile.git"
+    "url": "git+https://github.com/edx/frontend-app-profile.git"
   },
   "scripts": {
     "build": "fedx-scripts webpack",
-    "i18n_extract": "fedx-scripts formatjs extract",
+    "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
+    "is-es5": "es-check es5 ./dist/*.js",
     "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
-    "dev": "PUBLIC_PATH=/profile/ MFE_CONFIG_API_URL='http://localhost:8000/api/mfe_config/v1' fedx-scripts webpack-dev-server --progress --host apps.local.openedx.io",
-    "test": "TZ=UTC fedx-scripts jest --coverage --passWithNoTests",
-    "stubs": "pact-stub-service ./src/pacts/frontend-app-profile-edx-platform.json --port 18000"
+    "test": "fedx-scripts jest --coverage --passWithNoTests"
   },
   "bugs": {
-    "url": "https://github.com/openedx/frontend-app-profile/issues"
+    "url": "https://github.com/edx/frontend-app-profile/issues"
   },
-  "homepage": "https://github.com/openedx/frontend-app-profile#readme",
+  "homepage": "https://github.com/edx/frontend-app-profile#readme",
   "publishConfig": {
     "access": "public"
   },
   "browserslist": [
-    "extends @edx/browserslist-config"
+    "last 2 versions",
+    "ie 11"
   ],
   "dependencies": {
-    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-component-footer": "^14.6.0",
-    "@edx/frontend-component-header": "^6.2.0",
-    "@edx/frontend-platform": "^8.3.1",
-    "@edx/openedx-atlas": "^0.7.0",
-    "@fortawesome/fontawesome-svg-core": "6.7.2",
-    "@fortawesome/free-brands-svg-icons": "6.7.2",
-    "@fortawesome/free-regular-svg-icons": "6.7.2",
-    "@fortawesome/free-solid-svg-icons": "6.7.2",
-    "@fortawesome/react-fontawesome": "0.2.6",
-    "@openedx/frontend-plugin-framework": "^1.7.0",
-    "@openedx/paragon": "^23.4.5",
-    "@pact-foundation/pact": "^11.0.2",
-    "@redux-devtools/extension": "3.3.0",
-    "classnames": "2.5.1",
-    "core-js": "3.46.0",
-    "history": "5.3.0",
+    "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
+    "@edx/frontend-component-footer": "10.1.6",
+    "@edx/frontend-component-header": "2.4.3",
+    "@edx/frontend-platform": "1.12.7",
+    "@edx/paragon": "16.6.1",
+    "@fortawesome/fontawesome-svg-core": "1.2.36",
+    "@fortawesome/free-brands-svg-icons": "5.15.4",
+    "@fortawesome/free-regular-svg-icons": "5.15.4",
+    "@fortawesome/free-solid-svg-icons": "5.15.4",
+    "@fortawesome/react-fontawesome": "0.1.15",
+    "classnames": "2.3.1",
+    "core-js": "3.18.2",
     "lodash.camelcase": "4.3.0",
     "lodash.get": "4.4.2",
     "lodash.pick": "4.4.0",
     "lodash.snakecase": "4.1.1",
-    "prop-types": "15.8.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "react-helmet": "6.1.0",
-    "react-redux": "7.2.9",
-    "react-router": "6.30.1",
-    "react-router-dom": "6.30.1",
-    "redux": "4.2.1",
+    "prop-types": "15.7.2",
+    "react": "16.14.0",
+    "react-dom": "16.14.0",
+    "react-redux": "7.2.5",
+    "react-router": "5.2.1",
+    "react-router-dom": "5.3.0",
+    "redux": "4.1.1",
+    "redux-devtools-extension": "2.13.9",
     "redux-logger": "3.0.6",
-    "redux-saga": "1.3.0",
-    "redux-thunk": "2.4.2",
-    "regenerator-runtime": "0.14.1",
-    "reselect": "5.1.1",
-    "universal-cookie": "4.0.4"
+    "redux-saga": "1.1.3",
+    "redux-thunk": "2.3.0",
+    "regenerator-runtime": "0.13.9",
+    "reselect": "4.0.0",
+    "universal-cookie": "3.1.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "19.8.1",
-    "@commitlint/config-angular": "19.8.1",
-    "@edx/browserslist-config": "^1.1.1",
-    "@openedx/frontend-build": "^14.6.2",
-    "@testing-library/jest-dom": "6.9.1",
-    "@testing-library/react": "14.3.1",
-    "glob": "11.0.3",
-    "redux-mock-store": "1.5.5"
+    "@commitlint/cli": "13.2.1",
+    "@commitlint/config-angular": "13.2.0",
+    "@edx/frontend-build": "9.0.5",
+    "codecov": "3.8.3",
+    "enzyme": "3.11.0",
+    "enzyme-adapter-react-16": "1.15.6",
+    "es-check": "5.2.4",
+    "glob": "7.2.0",
+    "react-test-renderer": "16.14.0",
+    "reactifex": "1.1.1",
+    "redux-mock-store": "1.5.4"
   }
 }

renovate.json

@@ -22,11 +22,6 @@
         "pin"
       ],
       "automerge": true
-    },
-    {
-      "matchPackagePatterns": ["@edx", "@openedx"],
-      "matchUpdateTypes": ["minor", "patch"],
-      "automerge": true
     }
   ],
   "timezone": "America/New_York"

src/data/configureStore.js

@@ -1,7 +1,7 @@
 import { getConfig } from '@edx/frontend-platform';
 import { applyMiddleware, createStore, compose } from 'redux';
 import thunkMiddleware from 'redux-thunk';
-import { composeWithDevTools } from '@redux-devtools/extension';
+import { composeWithDevTools } from 'redux-devtools-extension';
 import { createLogger } from 'redux-logger';
 import createSagaMiddleware from 'redux-saga';
 

src/data/reducers.js

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

src/data/sagas.js

@@ -1,4 +1,5 @@
 import { all } from 'redux-saga/effects';
+
 import { saga as profileSaga } from '../profile';
 
 export default function* rootSaga() {

src/head/Head.jsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import { Helmet } from 'react-helmet';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { getConfig } from '@edx/frontend-platform';
-
-import messages from './messages';
-
-const Head = () => {
-  const intl = useIntl();
-  return (
-    <Helmet>
-      <title>
-        {intl.formatMessage(messages['profile.page.title'], {
-          siteName: getConfig().SITE_NAME,
-        })}
-      </title>
-      <link
-        rel="shortcut icon"
-        href={getConfig().FAVICON_URL}
-        type="image/x-icon"
-      />
-    </Helmet>
-  );
-};
-
-export default Head;

src/head/Head.test.jsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { Helmet } from 'react-helmet';
-import { render } from '@testing-library/react';
-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', () => {
-    render(<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

@@ -1,11 +0,0 @@
-import { defineMessages } from '@edx/frontend-platform/i18n';
-
-const messages = defineMessages({
-  'profile.page.title': {
-    id: 'profile.page.title',
-    defaultMessage: 'Profile | {siteName}',
-    description: 'Title tag',
-  },
-});
-
-export default messages;

src/i18n/index.js

@@ -1 +0,0 @@
-export default [];

src/i18n/index.jsx

@@ -0,0 +1,32 @@
+import arMessages from './messages/ar.json';
+import caMessages from './messages/ca.json';
+// no need to import en messages-- they are in the defaultMessage field
+import es419Messages from './messages/es_419.json';
+import frMessages from './messages/fr.json';
+import zhcnMessages from './messages/zh_CN.json';
+import heMessages from './messages/he.json';
+import idMessages from './messages/id.json';
+import kokrMessages from './messages/ko_kr.json';
+import plMessages from './messages/pl.json';
+import ptbrMessages from './messages/pt_br.json';
+import ruMessages from './messages/ru.json';
+import thMessages from './messages/th.json';
+import ukMessages from './messages/uk.json';
+
+const messages = {
+  ar: arMessages,
+  'es-419': es419Messages,
+  fr: frMessages,
+  'zh-cn': zhcnMessages,
+  ca: caMessages,
+  he: heMessages,
+  id: idMessages,
+  'ko-kr': kokrMessages,
+  pl: plMessages,
+  'pt-br': ptbrMessages,
+  ru: ruMessages,
+  th: thMessages,
+  uk: ukMessages,
+};
+
+export default messages;

src/i18n/messages/ar.json

@@ -0,0 +1,51 @@
+{
+  "profile.age.headline": "لا يمكن مشاركة ملفك الشخصي",
+  "profile.age.details": "لمشاركة ملفك الشخصي مع متعلمي edX الآخرين يجب التحقق من أن يكون عمرك أكثر من ١٣ سنة",
+  "profile.age.set.date": "اضبط تاريخ ميلاك",
+  "profile.datejoined.member.since": "عضو منذُ {year}",
+  "profile.bio.empty": "أضف نبذة قصيرة",
+  "profile.bio.about.me": "نبذة عنّي",
+  "profile.certificate.organization.label": "من",
+  "profile.certificate.completion.date.label": "مكتمل في",
+  "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": "جميع أعضاء edX",
+  "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": "جاري تحميل الملف الشخصي ..."
+}

src/i18n/messages/ca.json

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

src/i18n/messages/es_419.json

@@ -0,0 +1,51 @@
+{
+  "profile.age.headline": "Tu perfil no puede ser compartido.",
+  "profile.age.details": "Para compartir tu perfil con otros estudiantes de edX, debes confirmar que tienes más de 13 años.",
+  "profile.age.set.date": "Establece tu fecha de nacimiento",
+  "profile.datejoined.member.since": "Miembro desde {year}",
+  "profile.bio.empty": "Añade una breve biografía",
+  "profile.bio.about.me": "Sobre Mí",
+  "profile.certificate.organization.label": "Desde",
+  "profile.certificate.completion.date.label": "Completado el {date}",
+  "profile.no.certificates": "Todavía no ha obtenido ningún certificado.",
+  "profile.certificates.my.certificates": "Mis Certificados",
+  "profile.certificates.view.certificate": "Ver Certificado",
+  "profile.certificates.types.verified": "Certificado verificado",
+  "profile.certificates.types.professional": "Certificado profesional",
+  "profile.certificates.types.unknown": "Certificado",
+  "profile.country.label": "Ubicación",
+  "profile.country.empty": "Añade ubicación",
+  "profile.education.empty": "Añade Educación",
+  "profile.education.education": "Educación",
+  "profile.education.levels.p": "Doctorado",
+  "profile.education.levels.m": "Master o magíster",
+  "profile.education.levels.b": "Pregrado o Licenciatura",
+  "profile.education.levels.a": "Grado técnico - tecnológico",
+  "profile.education.levels.hs": "Enseñanza secundaria",
+  "profile.education.levels.jhs": "Formación media",
+  "profile.education.levels.el": "Enseñanza primaria",
+  "profile.education.levels.none": "Ninguna educación formal",
+  "profile.education.levels.o": "Otra educación",
+  "profile.editbutton.edit": "Editar",
+  "profile.formcontrols.who.can.see": "Quién puede ver esto:",
+  "profile.formcontrols.button.cancel": "Cancelar",
+  "profile.formcontrols.button.save": "Guardar",
+  "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.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",
+  "profile.preferredlanguage.empty": "Añadir idioma",
+  "profile.preferredlanguage.label": "Idioma principal que hablas",
+  "profile.profileavatar.upload-button": "Subir foto",
+  "profile.profileavatar.remove.button": "Eliminar",
+  "profile.image.alt.attribute": "avatar del perfil",
+  "profile.profileavatar.change-button": "Cambiar",
+  "profile.sociallinks.add": "Añade {network}",
+  "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..."
+}

src/i18n/messages/fr.json

@@ -0,0 +1,51 @@
+{
+  "profile.age.headline": "Votre profil ne peut pas être partagé.",
+  "profile.age.details": "Pour partager votre profil avec d'autres apprenants edX, vous devez confirmer que vous avez plus de 13 ans.",
+  "profile.age.set.date": "Définissez votre date de naissance",
+  "profile.datejoined.member.since": "Membre depuis {year}",
+  "profile.bio.empty": "Ajouter une courte biographie",
+  "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": "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 edX",
+  "profile.name.full.name": "Nom complet",
+  "profile.name.details": "C'est le nom qui apparaît dans votre compte et sur vos certificats.",
+  "profile.name.empty": "Ajouter un nom",
+  "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...."
+}

src/i18n/messages/he.json

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

src/i18n/messages/id.json

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

src/i18n/messages/ko_kr.json

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

src/i18n/messages/pl.json

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

src/i18n/messages/pt_br.json

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

src/i18n/messages/ru.json

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

src/i18n/messages/th.json

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

src/i18n/messages/uk.json

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

src/i18n/messages/zh_CN.json

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

src/index.jsx

@@ -14,49 +14,52 @@ import {
 } from '@edx/frontend-platform/react';
 
 import React from 'react';
-// eslint-disable-next-line import/no-unresolved
-import { createRoot } from 'react-dom/client';
+import ReactDOM from 'react-dom';
+import { Route, Switch } from 'react-router-dom';
 
-import Header from '@edx/frontend-component-header';
-import { FooterSlot } from '@edx/frontend-component-footer';
+import Header, { messages as headerMessages } from '@edx/frontend-component-header';
+import Footer, { messages as footerMessages } from '@edx/frontend-component-footer';
 
-import messages from './i18n';
+import appMessages from './i18n';
+import { ProfilePage, NotFoundPage } from './profile';
 import configureStore from './data/configureStore';
 
-import Head from './head/Head';
-
-import AppRoutes from './routes/AppRoutes';
-
 import './index.scss';
 
-const rootNode = createRoot(document.getElementById('root'));
-subscribe(APP_READY, async () => {
-  rootNode.render(
+subscribe(APP_READY, () => {
+  ReactDOM.render(
     <AppProvider store={configureStore()}>
-      <Head />
       <Header />
-      <main id="main">
-        <AppRoutes />
+      <main>
+        <Switch>
+          <Route path="/u/:username" component={ProfilePage} />
+          <Route path="/notfound" component={NotFoundPage} />
+          <Route path="*" component={NotFoundPage} />
+        </Switch>
       </main>
-      <FooterSlot />
+      <Footer />
     </AppProvider>,
     document.getElementById('root'),
   );
 });
 
 subscribe(APP_INIT_ERROR, (error) => {
-  rootNode.render(<ErrorPage message={error.message} />, document.getElementById('root'));
+  ReactDOM.render(<ErrorPage message={error.message} />, document.getElementById('root'));
 });
 
 initialize({
-  messages,
+  messages: [
+    appMessages,
+    headerMessages,
+    footerMessages,
+  ],
+  requireAuthenticatedUser: true,
   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,
-        DISABLE_VISIBILITY_EDITING: process.env.DISABLE_VISIBILITY_EDITING,
+        ENABLE_LEARNER_RECORD_MFE: (process.env.ENABLE_LEARNER_RECORD_MFE || false),
+        LEARNER_RECORD_MFE_BASE_URL: process.env.LEARNER_RECORD_MFE_BASE_URL,
       }, 'App loadConfig override handler');
     },
   },

src/index.scss

@@ -1,6 +1,8 @@
-@use "@openedx/paragon/styles/css/core/custom-media-breakpoints" as paragonCustomMediaBreakpoints;
-
+@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';
+@import './profile/index';

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

@@ -1,81 +0,0 @@
-{
-  "consumer": {
-    "name": "frontend-app-profile"
-  },
-  "interactions": [
-    {
-      "description": "A request for user's basic information",
-      "providerStates": [
-        {
-          "name": "Account and user's information does not exist"
-        }
-      ],
-      "request": {
-        "method": "GET",
-        "path": "/api/user/v1/accounts/staff_not_found"
-      },
-      "response": {
-        "status": 404
-      }
-    },
-    {
-      "description": "A request for user's basic information",
-      "providerStates": [
-        {
-          "name": "I have a user's basic information"
-        }
-      ],
-      "request": {
-        "method": "GET",
-        "path": "/api/user/v1/accounts/staff"
-      },
-      "response": {
-        "body": {
-          "bio": "This is my bio",
-          "country": "ME",
-          "dateJoined": "2017-06-07T00:44:23Z",
-          "email": "staff@example.com",
-          "isActive": true,
-          "languageProficiencies": [],
-          "levelOfEducation": null,
-          "name": "Lemon Seltzer",
-          "profileImage": {},
-          "socialLinks": [],
-          "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/plugin-slots/AdditionalProfileFieldsSlot/README.md

@@ -1,97 +0,0 @@
-# Additional Profile Fields
-
-### Slot ID: `org.openedx.frontend.profile.additional_profile_fields.v1`
-
-## Description
-
-This slot is used to replace/modify/hide the additional profile fields in the profile page.
-
-## Example
-The following `env.config.jsx` will extend the default fields with a additional custom fields through a simple example component.
-
-![Screenshot of Custom Fields](./images/custom_fields.png)
-
-### Using the Additional Fields Component
-Create a file named `env.config.jsx` at the MFE root with this:
-
-```jsx
-import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
-import Example from './src/plugin-slots/AdditionalProfileFieldsSlot/example';
-
-const config = {
-  pluginSlots: {
-    'org.openedx.frontend.profile.additional_profile_fields.v1': {
-      plugins: [
-        {
-          op: PLUGIN_OPERATIONS.Insert,
-          widget: {
-            id: 'additional_profile_fields',
-            type: DIRECT_PLUGIN,
-            RenderWidget: Example,
-          },
-        },
-      ],
-    },
-  },
-};
-
-export default config;
-```
-
-## Plugin Props
-
-When implementing a plugin for this slot, the following props are available:
-
-### `updateUserProfile`
-- **Type**: Function  
-- **Description**: A function for updating the user's profile with new field values. This handles the API call to persist changes to the backend.
-- **Usage**: Pass an object containing the field updates to be saved to the user's profile. The function automatically handles the persistence and UI updates.
-
-#### Example
-```javascript
-updateUserProfile({ extendedProfile: [{ fieldName: 'favorite_color', fieldValue: value }] });
-```
-
-### `profileFieldValues`
-- **Type**: Array of Objects
-- **Description**: Contains the current values of all additional profile fields as an array of objects. Each object has a `fieldName` property (string) and a `fieldValue` property (which can be string, boolean, number, or other data types depending on the field type).
-- **Usage**: Access specific field values by finding the object with the matching `fieldName` and reading its `fieldValue` property. Use array methods like `find()` to locate specific fields.
-
-#### Example
-```javascript
-// Finding a specific field value
-const nifField = profileFieldValues.find(field => field.fieldName === 'nif');
-const nifValue = nifField ? nifField.fieldValue : null;
-
-// Example data structure:
-[
-    {
-        "fieldName": "favorite_color",
-        "fieldValue": "red"
-    },
-    {
-        "fieldName": "employment_situation",
-        "fieldValue": "Unemployed"
-    },
-]
-```
-
-### `profileFieldErrors`
-- **Type**: Object
-- **Description**: Contains validation errors for profile fields. Each key corresponds to a field name, and the value is the error message.
-- **Usage**: Check for field-specific errors to display validation feedback to users.
-
-### `formComponents`
-- **Type**: Object
-- **Description**: Provides access to reusable form components that are consistent with the rest of the profile page styling and behavior. These components follow the platform's design system and include proper validation and accessibility features.
-- **Usage**: Use these components in your custom fields implementation to maintain UI consistency. Available components include `SwitchContent` for managing different UI states, `EmptyContent` for empty states, and `EditableItemHeader` for consistent headers.
-
-### `refreshUserProfile`
-- **Type**: Function
-- **Description**: A function that triggers a refresh of the user's profile data. This can be used after updating profile fields to ensure the UI reflects the latest data from the server.
-- **Usage**: Call this function with the username parameter when you need to manually reload the user profile information. Note that `updateUserProfile` typically handles data refresh automatically.
-
-#### Example
-```javascript
-refreshUserProfile(username);
-```

src/plugin-slots/AdditionalProfileFieldsSlot/example/index.jsx

@@ -1,129 +0,0 @@
-import { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import { Button } from '@openedx/paragon';
-import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
-
-/**
- * Straightforward example of how you could use the pluginProps provided by
- * the AdditionalProfileFieldsSlot to create a custom profile field.
- *
- * Here you can set a 'favorite_color' field with radio buttons and
- * save it to the user's profile, especifically to their `meta` in
- * the user's model. For more information, see the documentation:
- *
- * https://github.com/openedx/edx-platform/blob/master/openedx/core/djangoapps/user_api/README.rst#persisting-optional-user-metadata
- */
-const Example = ({
-  updateUserProfile,
-  profileFieldValues,
-  profileFieldErrors,
-  formComponents: { SwitchContent, EditableItemHeader, EmptyContent } = {},
-}) => {
-  const authenticatedUser = getAuthenticatedUser();
-  const [formMode, setFormMode] = useState('editable');
-
-  // Get current favorite color from profileFieldValues
-  const currentColorField = profileFieldValues?.find(field => field.fieldName === 'favorite_color');
-  const currentColor = currentColorField ? currentColorField.fieldValue : '';
-
-  const [value, setValue] = useState(currentColor);
-  const handleChange = e => setValue(e.target.value);
-
-  // Get any validation errors for the favorite_color field
-  const colorFieldError = profileFieldErrors?.favorite_color;
-
-  useEffect(() => {
-    if (!value) { setFormMode('empty'); }
-    if (colorFieldError) {
-      setFormMode('editing');
-    }
-  }, [colorFieldError, value]);
-
-  const handleSubmit = () => {
-    try {
-      updateUserProfile(authenticatedUser.username, { extendedProfile: [{ fieldName: 'favorite_color', fieldValue: value }] });
-      setFormMode('editable');
-    } catch (error) {
-      setFormMode('editing');
-    }
-  };
-
-  return (
-    <div className="border border-accent-500 p-3 mt-5">
-      <h3 className="h3">Example Additional Profile Fields Slot</h3>
-
-      <SwitchContent
-        className="pt-40px"
-        expression={formMode}
-        cases={{
-          editing: (
-            <>
-              <label className="edit-section-header" htmlFor="favorite_color">
-                Favorite Color
-              </label>
-              <input
-                className="form-control"
-                id="favorite_color"
-                name="favorite_color"
-                value={value}
-                onChange={handleChange}
-              />
-              <Button type="button" className="mt-2" onClick={handleSubmit}>
-                Save
-              </Button>
-            </>
-          ),
-          editable: (
-            <>
-              <div className="row m-0 pb-1.5 align-items-center">
-                <p data-hj-suppress className="h5 font-weight-bold m-0">
-                  Favorite Color
-                </p>
-              </div>
-              <EditableItemHeader
-                content={value}
-                showEditButton
-                onClickEdit={() => setFormMode('editing')}
-                showVisibility={false}
-                visibility="private"
-              />
-            </>
-          ),
-          empty: (
-            <>
-              <div className="row m-0 pb-1.5 align-items-center">
-                <p data-hj-suppress className="h5 font-weight-bold m-0">
-                  Favorite Color
-                </p>
-              </div>
-              <EmptyContent onClick={() => setFormMode('editing')}>
-                <p className="mb-0">Click to add your favorite color</p>
-              </EmptyContent>
-            </>
-          ),
-        }}
-      />
-
-    </div>
-  );
-};
-
-Example.propTypes = {
-  updateUserProfile: PropTypes.func.isRequired,
-  profileFieldValues: PropTypes.arrayOf(
-    PropTypes.shape({
-      fieldName: PropTypes.string.isRequired,
-      fieldValue: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.bool,
-        PropTypes.number,
-      ]).isRequired,
-    }),
-  ),
-  profileFieldErrors: PropTypes.objectOf(PropTypes.string),
-  formComponents: PropTypes.shape({
-    SwitchContent: PropTypes.elementType.isRequired,
-  }),
-};
-
-export default Example;

src/plugin-slots/AdditionalProfileFieldsSlot/index.jsx

@@ -1,37 +0,0 @@
-import { PluginSlot } from '@openedx/frontend-plugin-framework';
-import { useDispatch, useSelector } from 'react-redux';
-
-import { useCallback } from 'react';
-import { patchProfile } from '../../profile/data/services';
-import { fetchProfile } from '../../profile/data/actions';
-
-import SwitchContent from '../../profile/forms/elements/SwitchContent';
-import EmptyContent from '../../profile/forms/elements/EmptyContent';
-import EditableItemHeader from '../../profile/forms/elements/EditableItemHeader';
-
-const AdditionalProfileFieldsSlot = () => {
-  const dispatch = useDispatch();
-  const extendedProfileValues = useSelector((state) => state.profilePage.account.extendedProfile);
-  const errors = useSelector((state) => state.profilePage.errors);
-
-  const pluginProps = {
-    refreshUserProfile: useCallback((username) => dispatch(fetchProfile(username)), [dispatch]),
-    updateUserProfile: patchProfile,
-    profileFieldValues: extendedProfileValues,
-    profileFieldErrors: errors,
-    formComponents: {
-      SwitchContent,
-      EmptyContent,
-      EditableItemHeader,
-    },
-  };
-
-  return (
-    <PluginSlot
-      id="org.openedx.frontend.profile.additional_profile_fields.v1"
-      pluginProps={pluginProps}
-    />
-  );
-};
-
-export default AdditionalProfileFieldsSlot;

src/plugin-slots/FooterSlot/README.md

@@ -1,53 +0,0 @@
-# Footer Slot
-
-### Slot ID: `org.openedx.frontend.layout.footer.v1`
-
-### Slot ID Aliases
-* `footer_slot`
-
-## Description
-
-This slot is used to replace/modify/hide the footer.
-
-The implementation of the `FooterSlot` component lives in [the `frontend-component-footer` repository](https://github.com/openedx/frontend-component-footer/).
-
-## Example
-
-The following `env.config.jsx` will replace the default footer.
-
-![Screenshot of Default Footer](./images/default_footer.png)
-
-with a simple custom footer
-
-![Screenshot of Custom Footer](./images/custom_footer.png)
-
-```jsx
-import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
-
-const config = {
-  pluginSlots: {
-    'org.openedx.frontend.layout.footer.v1': {
-      plugins: [
-        {
-          // Hide the default footer
-          op: PLUGIN_OPERATIONS.Hide,
-          widgetId: 'default_contents',
-        },
-        {
-          // Insert a custom footer
-          op: PLUGIN_OPERATIONS.Insert,
-          widget: {
-            id: 'custom_footer',
-            type: DIRECT_PLUGIN,
-            RenderWidget: () => (
-              <h1 style={{textAlign: 'center'}}>🦶</h1>
-            ),
-          },
-        },
-      ]
-    }
-  },
-}
-
-export default config;
-```

src/plugin-slots/README.md

@@ -1,3 +0,0 @@
-# `frontend-app-profile` Plugin Slots
-
-* [`org.openedx.frontend.layout.footer.v1`](./FooterSlot/)

src/profile/AgeMessage.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { StatusAlert } from '@edx/paragon';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+
+function AgeMessage({ accountSettingsUrl }) {
+  return (
+    <StatusAlert
+      alertType="info"
+      dialog={(
+        <>
+          <FormattedMessage
+            id="profile.age.headline"
+            defaultMessage="Your profile cannot be shared."
+            description="error message"
+            tagName="h6"
+          />
+          <FormattedMessage
+            id="profile.age.details"
+            defaultMessage="To share your profile with other edX learners, you must confirm that you are over the age of 13."
+            description="error message"
+            tagName="p"
+          />
+          <a href={accountSettingsUrl}>
+            <FormattedMessage
+              id="profile.age.set.date"
+              defaultMessage="Set your date of birth"
+              description="label on a link to set birthday"
+            />
+          </a>
+        </>
+      )}
+      dismissible={false}
+      open
+    />
+  );
+}
+
+AgeMessage.propTypes = {
+  accountSettingsUrl: PropTypes.string.isRequired,
+};
+
+export default AgeMessage;

src/profile/Banner.jsx

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

src/profile/CertificateCard.jsx

@@ -1,146 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { FormattedDate, FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
-import { Hyperlink } from '@openedx/paragon';
-import get from 'lodash.get';
-
-import classNames from 'classnames';
-import professionalCertificateSVG from './assets/professional-certificate.svg';
-import verifiedCertificateSVG from './assets/verified-certificate.svg';
-import messages from './Certificates.messages';
-import { useIsOnMobileScreen } from './data/hooks';
-
-const CertificateCard = ({
-  certificateType,
-  courseDisplayName,
-  courseOrganization,
-  modifiedDate,
-  downloadUrl,
-  courseId,
-  uuid,
-}) => {
-  const intl = useIntl();
-
-  const certificateIllustration = {
-    professional: professionalCertificateSVG,
-    'no-id-professional': professionalCertificateSVG,
-    verified: verifiedCertificateSVG,
-    honor: null,
-    audit: null,
-  }[certificateType] || null;
-
-  const isMobileView = useIsOnMobileScreen();
-
-  return (
-    <div
-      key={`${modifiedDate}-${courseId}`}
-      className="col-auto d-flex align-items-center p-0"
-    >
-      <div className="col certificate p-4 border-light-400 bg-light-200 w-100 h-100">
-        <div
-          className="certificate-type-illustration"
-          style={{ backgroundImage: `url(${certificateIllustration})` }}
-        />
-        <div className={classNames(
-          'd-flex flex-column position-relative p-0',
-          { 'max-width-304px': isMobileView },
-          { 'width-314px': !isMobileView },
-        )}
-        >
-          <div className="w-100 color-black">
-            <p className={classNames([
-              'mb-0 font-weight-normal',
-              isMobileView ? 'x-small' : 'small',
-            ])}
-            >
-              {intl.formatMessage(get(
-                messages,
-                `profile.certificates.types.${certificateType}`,
-                messages['profile.certificates.types.unknown'],
-              ))}
-            </p>
-            <p className={classNames([
-              'm-0 color-black',
-              isMobileView ? 'h5' : 'h4',
-            ])}
-            >
-              {courseDisplayName}
-            </p>
-            <p className={classNames([
-              'mb-0',
-              isMobileView ? 'x-small' : 'small',
-            ])}
-            >
-              <FormattedMessage
-                id="profile.certificate.organization.label"
-                defaultMessage="From"
-              />
-            </p>
-            <h5 className="mb-0 color-black">{courseOrganization}</h5>
-            <p className={classNames([
-              'mb-0',
-              isMobileView ? 'x-small' : 'small',
-            ])}
-            >
-              <FormattedMessage
-                id="profile.certificate.completion.date.label"
-                defaultMessage="Completed on {date}"
-                values={{
-                  date: <FormattedDate value={new Date(modifiedDate)} />,
-                }}
-              />
-            </p>
-          </div>
-          <div className="pt-3">
-            <Hyperlink
-              destination={downloadUrl}
-              target="_blank"
-              showLaunchIcon={false}
-              className={classNames(
-                'btn btn-primary font-weight-normal px-4 py-10px',
-                { 'btn-sm': isMobileView },
-              )}
-            >
-              {intl.formatMessage(messages['profile.certificates.view.certificate'])}
-            </Hyperlink>
-          </div>
-          <p
-            className={classNames([
-              'mb-0 pt-3',
-              isMobileView ? 'x-small' : 'small',
-            ])}
-          >
-            <FormattedMessage
-              id="profile.certificate.uuid"
-              defaultMessage="Credential ID {certificate_uuid}"
-              values={{
-                certificate_uuid: uuid,
-              }}
-            />
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-CertificateCard.propTypes = {
-  certificateType: PropTypes.string,
-  courseDisplayName: PropTypes.string,
-  courseOrganization: PropTypes.string,
-  modifiedDate: PropTypes.string,
-  downloadUrl: PropTypes.string,
-  courseId: PropTypes.string.isRequired,
-  uuid: PropTypes.string,
-};
-
-CertificateCard.defaultProps = {
-  certificateType: 'unknown',
-  courseDisplayName: '',
-  courseOrganization: '',
-  modifiedDate: '',
-  downloadUrl: '',
-  uuid: '',
-};
-
-export default CertificateCard;

src/profile/Certificates.jsx

@@ -1,92 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { connect } from 'react-redux';
-import { getConfig } from '@edx/frontend-platform';
-
-import classNames from 'classnames';
-import CertificateCard from './CertificateCard';
-import { certificatesSelector } from './data/selectors';
-import { useIsOnTabletScreen } from './data/hooks';
-
-const Certificates = ({ certificates }) => {
-  const isTabletView = useIsOnTabletScreen();
-  return (
-    <div>
-      <div className="col justify-content-start align-items-start g-5rem p-0">
-        <div className="col align-self-stretch height-42px justify-content-start align-items-start p-0">
-          <p className="font-weight-bold text-primary-500 m-0 h2">
-            <FormattedMessage
-              id="profile.your.certificates"
-              defaultMessage="Your certificates"
-              description="heading for the certificates section"
-            />
-          </p>
-        </div>
-        <div className="col justify-content-start align-items-start pt-2 p-0">
-          <p className="font-weight-normal text-gray-800 m-0 p-0 p">
-            <FormattedMessage
-              id="profile.certificates.description"
-              defaultMessage="Your learner records information is only visible to you. Only your username and profile image are visible to others on {siteName}."
-              description="description of the certificates section"
-              values={{
-                siteName: getConfig().SITE_NAME,
-              }}
-            />
-          </p>
-        </div>
-      </div>
-      {certificates?.length > 0 ? (
-        <div className="col">
-          <div className={classNames(
-            'row align-items-center pt-5 g-3rem',
-            { 'justify-content-center': isTabletView },
-          )}
-          >
-            {certificates.map(certificate => (
-              <CertificateCard
-                key={certificate.courseId}
-                certificateType={certificate.certificateType}
-                courseDisplayName={certificate.courseDisplayName}
-                courseOrganization={certificate.courseOrganization}
-                modifiedDate={certificate.modifiedDate}
-                downloadUrl={certificate.downloadUrl}
-                courseId={certificate.courseId}
-                uuid={certificate.uuid}
-              />
-            ))}
-          </div>
-        </div>
-      ) : (
-        <div className="pt-5">
-          <FormattedMessage
-            id="profile.no.certificates"
-            defaultMessage="You don't have any certificates yet."
-            description="displays when user has no course completion certificates"
-          />
-        </div>
-      )}
-    </div>
-  );
-};
-
-Certificates.propTypes = {
-  certificates: PropTypes.arrayOf(PropTypes.shape({
-    certificateType: PropTypes.string,
-    courseDisplayName: PropTypes.string,
-    courseOrganization: PropTypes.string,
-    modifiedDate: PropTypes.string,
-    downloadUrl: PropTypes.string,
-    courseId: PropTypes.string.isRequired,
-    uuid: PropTypes.string,
-  })),
-};
-
-Certificates.defaultProps = {
-  certificates: [],
-};
-
-export default connect(
-  certificatesSelector,
-  {},
-)(Certificates);

src/profile/DateJoined.jsx

@@ -1,23 +1,25 @@
-import React, { memo } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage, FormattedDate } from '@edx/frontend-platform/i18n';
 
-const DateJoined = ({ date }) => {
-  if (!date) { return null; }
+function DateJoined({ date }) {
+  if (date == null) {
+    return null;
+  }
 
   return (
-    <span className="small mb-0 text-gray-800">
+    <p className="mb-0">
       <FormattedMessage
         id="profile.datejoined.member.since"
         defaultMessage="Member since {year}"
         description="A label for how long the user has been a member"
         values={{
-          year: <span className="font-weight-bold"> <FormattedDate value={new Date(date)} year="numeric" /> </span>,
+          year: <FormattedDate value={new Date(date)} year="numeric" />,
         }}
       />
-    </span>
+    </p>
   );
-};
+}
 
 DateJoined.propTypes = {
   date: PropTypes.string,
@@ -26,4 +28,4 @@ DateJoined.defaultProps = {
   date: null,
 };
 
-export default memo(DateJoined);
+export default DateJoined;

src/profile/NotFoundPage.jsx

@@ -1,16 +1,16 @@
 import React from 'react';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
-const NotFoundPage = () => (
-  <div className="container-fluid d-flex py-5 justify-content-center align-items-start text-center">
-    <p className="my-0 py-5 text-muted max-width-32em">
-      <FormattedMessage
-        id="profile.notfound.message"
-        defaultMessage="The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again."
-        description="error message when a page does not exist"
-      />
-    </p>
-  </div>
-);
-
-export default NotFoundPage;
+export default function NotFoundPage() {
+  return (
+    <div className="container-fluid d-flex py-5 justify-content-center align-items-start text-center">
+      <p className="my-0 py-5 text-muted" style={{ maxWidth: '32em' }}>
+        <FormattedMessage
+          id="profile.notfound.message"
+          defaultMessage="The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again."
+          description="error message when a page does not exist"
+        />
+      </p>
+    </div>
+  );
+}

src/profile/PageLoading.jsx

@@ -1,18 +1,37 @@
-import React from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
-const PageLoading = ({ srMessage }) => (
-  <div>
-    <div className="d-flex justify-content-center align-items-center flex-column height-50vh">
-      <div className="spinner-border text-primary" role="status">
-        {srMessage && <span className="sr-only">{srMessage}</span>}
+export default class PageLoading extends Component {
+  renderSrMessage() {
+    if (!this.props.srMessage) {
+      return null;
+    }
+
+    return (
+      <span className="sr-only">
+        {this.props.srMessage}
+      </span>
+    );
+  }
+
+  render() {
+    return (
+      <div>
+        <div
+          className="d-flex justify-content-center align-items-center flex-column"
+          style={{
+            height: '50vh',
+          }}
+        >
+          <div className="spinner-border text-primary" role="status">
+            {this.renderSrMessage()}
+          </div>
+        </div>
       </div>
-    </div>
-  </div>
-);
+    );
+  }
+}
 
 PageLoading.propTypes = {
   srMessage: PropTypes.string.isRequired,
 };
-
-export default PageLoading;

src/profile/ProfilePage.jsx

@@ -1,20 +1,14 @@
-import React, {
-  useEffect, useState, useContext, useCallback,
-} from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { useDispatch, useSelector } from 'react-redux';
-import { useNavigate } from 'react-router-dom';
+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 { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
-import {
-  Alert, Hyperlink, OverlayTrigger, Tooltip,
-} from '@openedx/paragon';
-import { InfoOutline } from '@openedx/paragon/icons';
-import classNames from 'classnames';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { StatusAlert, Hyperlink } from '@edx/paragon';
 
+// Actions
 import {
   fetchProfile,
   saveProfile,
@@ -25,6 +19,7 @@ import {
   updateDraft,
 } from './data/actions';
 
+// Components
 import ProfileAvatar from './forms/ProfileAvatar';
 import Name from './forms/Name';
 import Country from './forms/Country';
@@ -32,395 +27,304 @@ import PreferredLanguage from './forms/PreferredLanguage';
 import Education from './forms/Education';
 import SocialLinks from './forms/SocialLinks';
 import Bio from './forms/Bio';
+import Certificates from './forms/Certificates';
+import AgeMessage from './AgeMessage';
 import DateJoined from './DateJoined';
-import UserCertificateSummary from './UserCertificateSummary';
 import PageLoading from './PageLoading';
-import Certificates from './Certificates';
+import Banner from './Banner';
 
+// Selectors
 import { profilePageSelector } from './data/selectors';
+
+// i18n
 import messages from './ProfilePage.messages';
-import withParams from '../utils/hoc';
-import { useIsOnMobileScreen, useIsOnTabletScreen } from './data/hooks';
 
-import AdditionalProfileFieldsSlot from '../plugin-slots/AdditionalProfileFieldsSlot';
+ensureConfig(['CREDENTIALS_BASE_URL', 'LMS_BASE_URL'], 'ProfilePage');
 
-ensureConfig(['CREDENTIALS_BASE_URL', 'LMS_BASE_URL', 'ACCOUNT_SETTINGS_URL'], 'ProfilePage');
+class ProfilePage extends React.Component {
+  constructor(props, context) {
+    super(props, context);
 
-const ProfilePage = ({ params }) => {
-  const dispatch = useDispatch();
-  const intl = useIntl();
-  const context = useContext(AppContext);
-  const {
-    dateJoined,
-    courseCertificates,
-    name,
-    visibilityName,
-    profileImage,
-    savePhotoState,
-    isLoadingProfile,
-    photoUploadError,
-    country,
-    visibilityCountry,
-    levelOfEducation,
-    visibilityLevelOfEducation,
-    socialLinks,
-    draftSocialLinksByPlatform,
-    visibilitySocialLinks,
-    languageProficiencies,
-    visibilityLanguageProficiencies,
-    bio,
-    visibilityBio,
-    saveState,
-    username,
-  } = useSelector(profilePageSelector);
+    const recordsUrl = this.getRecordsUrl(context);
 
-  const navigate = useNavigate();
-  const [viewMyRecordsUrl, setViewMyRecordsUrl] = useState(null);
-  const isMobileView = useIsOnMobileScreen();
-  const isTabletView = useIsOnTabletScreen();
+    this.state = {
+      viewMyRecordsUrl: recordsUrl,
+      accountSettingsUrl: `${context.config.LMS_BASE_URL}/account/settings`,
+    };
 
-  useEffect(() => {
-    const { CREDENTIALS_BASE_URL } = context.config;
-    if (CREDENTIALS_BASE_URL) {
-      setViewMyRecordsUrl(`${CREDENTIALS_BASE_URL}/records`);
-    }
+    this.handleSaveProfilePhoto = this.handleSaveProfilePhoto.bind(this);
+    this.handleDeleteProfilePhoto = this.handleDeleteProfilePhoto.bind(this);
+    this.handleClose = this.handleClose.bind(this);
+    this.handleOpen = this.handleOpen.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+  }
 
-    dispatch(fetchProfile(params.username));
+  componentDidMount() {
+    this.props.fetchProfile(this.props.match.params.username);
     sendTrackingLogEvent('edx.profile.viewed', {
-      username: params.username,
+      username: this.props.match.params.username,
     });
-  }, [dispatch, params.username, context.config]);
+  }
 
-  useEffect(() => {
-    if (!username && saveState === 'error' && navigate) {
-      navigate('/notfound');
+  getRecordsUrl(context) {
+    let recordsUrl = null;
+
+    if (getConfig().ENABLE_LEARNER_RECORD_MFE) {
+      recordsUrl = getConfig().LEARNER_RECORD_MFE_BASE_URL;
+    } else {
+      const credentialsBaseUrl = context.config.CREDENTIALS_BASE_URL;
+      recordsUrl = credentialsBaseUrl ? `${credentialsBaseUrl}/records` : null;
     }
-  }, [username, saveState, navigate]);
 
-  const authenticatedUserName = context.authenticatedUser.username;
+    return recordsUrl;
+  }
 
-  const handleSaveProfilePhoto = useCallback((formData) => {
-    dispatch(saveProfilePhoto(authenticatedUserName, formData));
-  }, [dispatch, authenticatedUserName]);
+  isAuthenticatedUserProfile() {
+    return this.props.match.params.username === this.context.authenticatedUser.username;
+  }
 
-  const handleDeleteProfilePhoto = useCallback(() => {
-    dispatch(deleteProfilePhoto(authenticatedUserName));
-  }, [dispatch, authenticatedUserName]);
+  handleSaveProfilePhoto(formData) {
+    this.props.saveProfilePhoto(this.context.authenticatedUser.username, formData);
+  }
 
-  const handleClose = useCallback((formId) => {
-    dispatch(closeForm(formId));
-  }, [dispatch]);
+  handleDeleteProfilePhoto() {
+    this.props.deleteProfilePhoto(this.context.authenticatedUser.username);
+  }
 
-  const handleOpen = useCallback((formId) => {
-    dispatch(openForm(formId));
-  }, [dispatch]);
+  handleClose(formId) {
+    this.props.closeForm(formId);
+  }
 
-  const handleSubmit = useCallback((formId) => {
-    dispatch(saveProfile(formId, authenticatedUserName));
-  }, [dispatch, authenticatedUserName]);
+  handleOpen(formId) {
+    this.props.openForm(formId);
+  }
 
-  const handleChange = useCallback((fieldName, value) => {
-    dispatch(updateDraft(fieldName, value));
-  }, [dispatch]);
+  handleSubmit(formId) {
+    this.props.saveProfile(formId, this.context.authenticatedUser.username);
+  }
 
-  const isAuthenticatedUserProfile = () => params.username === authenticatedUserName;
+  handleChange(name, value) {
+    this.props.updateDraft(name, value);
+  }
 
-  const isBlockVisible = (blockInfo) => isAuthenticatedUserProfile()
-      || (!isAuthenticatedUserProfile() && Boolean(blockInfo));
-
-  const renderViewMyRecordsButton = () => {
-    if (!(viewMyRecordsUrl && isAuthenticatedUserProfile())) {
+  // Inserted into the DOM in two places (for responsive layout)
+  renderViewMyRecordsButton() {
+    if (!(this.state.viewMyRecordsUrl && this.isAuthenticatedUserProfile())) {
       return null;
     }
 
     return (
-      <Hyperlink
-        className={classNames(
-          'btn btn-brand bg-brand-500 font-weight-normal px-4 py-10px text-nowrap',
-          { 'w-100': isMobileView },
-        )}
-        target="_blank"
-        showLaunchIcon={false}
-        destination={viewMyRecordsUrl}
-      >
-        {intl.formatMessage(messages['profile.viewMyRecords'])}
+      <Hyperlink className="btn btn-primary" destination={this.state.viewMyRecordsUrl} target="_blank">
+        {this.props.intl.formatMessage(messages['profile.viewMyRecords'])}
       </Hyperlink>
     );
-  };
+  }
 
-  const renderPhotoUploadErrorMessage = () => (
-    photoUploadError && (
+  // Inserted into the DOM in two places (for responsive layout)
+  renderHeadingLockup() {
+    const { dateJoined } = this.props;
+
+    return (
+      <>
+        <span data-hj-suppress>
+          <h1 className="h2 mb-0 font-weight-bold">{this.props.match.params.username}</h1>
+          <DateJoined date={dateJoined} />
+          <hr className="d-none d-md-block" />
+        </span>
+      </>
+    );
+  }
+
+  renderPhotoUploadErrorMessage() {
+    const { photoUploadError } = this.props;
+
+    if (photoUploadError === null) {
+      return null;
+    }
+
+    return (
       <div className="row">
         <div className="col-md-4 col-lg-3">
-          <Alert variant="danger" dismissible={false} show>
-            {photoUploadError.userMessage}
-          </Alert>
+          <StatusAlert alertType="danger" dialog={photoUploadError.userMessage} dismissible={false} open />
         </div>
       </div>
-    )
-  );
+    );
+  }
 
-  const commonFormProps = {
-    openHandler: handleOpen,
-    closeHandler: handleClose,
-    submitHandler: handleSubmit,
-    changeHandler: handleChange,
-  };
+  renderAgeMessage() {
+    const { requiresParentalConsent } = this.props;
+    const shouldShowAgeMessage = requiresParentalConsent && this.isAuthenticatedUserProfile();
 
-  return (
-    <div className="profile-page">
-      {isLoadingProfile ? (
-        <PageLoading srMessage={intl.formatMessage(messages['profile.loading'])} />
-      ) : (
-        <>
-          <div
-            className={classNames(
-              'profile-page-bg-banner bg-primary d-md-block align-items-center h-100 w-100',
-              { 'px-3 py-4': isMobileView },
-              { 'px-120px py-5.5': !isMobileView },
-            )}
-          >
-            <div
-              className={classNames([
-                'col container-fluid w-100 h-100 bg-white py-0 rounded-75',
-                {
-                  'px-3': isMobileView,
-                  'px-40px': !isMobileView,
-                },
-              ])}
-            >
-              <div
-                className={classNames([
-                  'col h-100 w-100 px-0 justify-content-start g-15rem',
-                  {
-                    'py-4': isMobileView,
-                    'py-36px': !isMobileView,
-                  },
-                ])}
-              >
-                <div
-                  className={classNames([
-                    'row-auto d-flex flex-wrap align-items-center h-100 w-100 justify-content-start g-15rem',
-                    isMobileView || isTabletView ? 'flex-column' : 'flex-row',
-                  ])}
-                >
-                  <ProfileAvatar
-                    className="col p-0"
-                    src={profileImage.src}
-                    isDefault={profileImage.isDefault}
-                    onSave={handleSaveProfilePhoto}
-                    onDelete={handleDeleteProfilePhoto}
-                    savePhotoState={savePhotoState}
-                    isEditable={isAuthenticatedUserProfile()}
-                  />
-                  <div
-                    className={classNames([
-                      'col h-100 w-100 m-0 p-0',
-                      isMobileView || isTabletView
-                        ? 'd-flex flex-column justify-content-center align-items-center'
-                        : 'justify-content-start align-items-start',
-                    ])}
-                  >
-                    <p className="row m-0 font-weight-bold text-truncate text-primary-500 h3">
-                      {params.username}
-                    </p>
-                    {isBlockVisible(name) && (
-                    <p className="row pt-2 text-gray-800 font-weight-normal m-0 p">
-                      {name}
-                    </p>
-                    )}
-                    <div className={classNames(
-                      'row pt-2 m-0',
-                      isMobileView
-                        ? 'd-flex justify-content-center align-items-center flex-column'
-                        : 'g-1rem',
-                    )}
-                    >
-                      <DateJoined date={dateJoined} />
-                      <UserCertificateSummary count={courseCertificates?.length || 0} />
-                    </div>
-                  </div>
-                  <div className={classNames([
-                    'p-0 ',
-                    isMobileView || isTabletView ? 'col d-flex justify-content-center' : 'col-auto',
-                  ])}
-                  >
-                    {renderViewMyRecordsButton()}
-                  </div>
-                </div>
-              </div>
-              <div className="ml-auto">
-                {renderPhotoUploadErrorMessage()}
-              </div>
+    if (!shouldShowAgeMessage) {
+      return null;
+    }
+    return <AgeMessage accountSettingsUrl={this.state.accountSettingsUrl} />;
+  }
+
+  renderContent() {
+    const {
+      profileImage,
+      name,
+      visibilityName,
+      country,
+      visibilityCountry,
+      levelOfEducation,
+      visibilityLevelOfEducation,
+      socialLinks,
+      draftSocialLinksByPlatform,
+      visibilitySocialLinks,
+      languageProficiencies,
+      visibilityLanguageProficiencies,
+      visibilityCourseCertificates,
+      bio,
+      visibilityBio,
+      requiresParentalConsent,
+      isLoadingProfile,
+    } = this.props;
+
+    if (isLoadingProfile) {
+      return <PageLoading srMessage={this.props.intl.formatMessage(messages['profile.loading'])} />;
+    }
+
+    const commonFormProps = {
+      openHandler: this.handleOpen,
+      closeHandler: this.handleClose,
+      submitHandler: this.handleSubmit,
+      changeHandler: this.handleChange,
+    };
+
+    return (
+      <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">
+              <ProfileAvatar
+                className="mb-md-3"
+                src={profileImage.src}
+                isDefault={profileImage.isDefault}
+                onSave={this.handleSaveProfilePhoto}
+                onDelete={this.handleDeleteProfilePhoto}
+                savePhotoState={this.props.savePhotoState}
+                isEditable={this.isAuthenticatedUserProfile() && !requiresParentalConsent}
+              />
             </div>
           </div>
-          <div
-            className={classNames([
-              'col d-inline-flex h-100 w-100 align-items-start justify-content-start g-3rem',
-              isMobileView ? 'py-4 px-3' : 'px-120px py-6',
-            ])}
-          >
-            <div className="w-100 p-0">
-              <div className="col justify-content-start align-items-start p-0">
-                <div className="col align-self-stretch height-42px justify-content-start align-items-start p-0">
-                  <p className="font-weight-bold text-primary-500 m-0 h2">
-                    {isMobileView ? (
-                      <FormattedMessage
-                        id="profile.profile.information"
-                        defaultMessage="Profile"
-                        description="heading for the editable profile section in mobile view"
-                      />
-                    )
-                      : (
-                        <FormattedMessage
-                          id="profile.profile.information"
-                          defaultMessage="Profile information"
-                          description="heading for the editable profile section"
-                        />
-                      )}
-                  </p>
-                </div>
-              </div>
-              <div
-                className={classNames([
-                  'row m-0 px-0 w-100 d-inline-flex align-items-start justify-content-start',
-                  isMobileView ? 'pt-4' : 'pt-5.5',
-                ])}
-              >
-                <div
-                  className={classNames([
-                    'col p-0',
-                    isMobileView ? 'col-12' : 'col-6',
-                  ])}
-                >
-                  <div className="m-0">
-                    <div className="row m-0 pb-1.5 align-items-center">
-                      <p data-hj-suppress className="h5 font-weight-bold m-0">
-                        {intl.formatMessage(messages['profile.username'])}
-                      </p>
-                      <OverlayTrigger
-                        key="top"
-                        placement="top"
-                        overlay={(
-                          <Tooltip variant="light" id="tooltip-top">
-                            <p className="h5 font-weight-normal m-0 p-0">
-                              {intl.formatMessage(messages['profile.username.tooltip'])}
-                            </p>
-                          </Tooltip>
-                          )}
-                      >
-                        <InfoOutline className="m-0 info-icon" />
-                      </OverlayTrigger>
-                    </div>
-                    <h4 className="edit-section-header text-gray-700">
-                      {params.username}
-                    </h4>
-                  </div>
-                  {isBlockVisible(name) && (
-                  <Name
-                    name={name}
-                    accountSettingsUrl={context.config.ACCOUNT_SETTINGS_URL}
-                    visibilityName={visibilityName}
-                    formId="name"
-                    {...commonFormProps}
-                  />
-                  )}
-                  {isBlockVisible(country) && (
-                  <Country
-                    country={country}
-                    visibilityCountry={visibilityCountry}
-                    formId="country"
-                    {...commonFormProps}
-                  />
-                  )}
-                  {isBlockVisible((languageProficiencies || []).length) && (
-                  <PreferredLanguage
-                    languageProficiencies={languageProficiencies || []}
-                    visibilityLanguageProficiencies={visibilityLanguageProficiencies}
-                    formId="languageProficiencies"
-                    {...commonFormProps}
-                  />
-                  )}
-                  {isBlockVisible(levelOfEducation) && (
-                  <Education
-                    levelOfEducation={levelOfEducation}
-                    visibilityLevelOfEducation={visibilityLevelOfEducation}
-                    formId="levelOfEducation"
-                    {...commonFormProps}
-                  />
-                  )}
-
-                  <AdditionalProfileFieldsSlot />
-                </div>
-                <div
-                  className={classNames([
-                    'col m-0 pr-0',
-                    isMobileView ? 'pl-0 col-12' : 'pl-40px col-6',
-                  ])}
-                >
-                  {isBlockVisible(bio) && (
-                  <Bio
-                    bio={bio}
-                    visibilityBio={visibilityBio}
-                    formId="bio"
-                    {...commonFormProps}
-                  />
-                  )}
-
-                  {isBlockVisible((socialLinks || []).some((link) => link?.socialLink !== null)) && (
-                  <SocialLinks
-                    socialLinks={socialLinks || []}
-                    draftSocialLinksByPlatform={draftSocialLinksByPlatform || {}}
-                    visibilitySocialLinks={visibilitySocialLinks}
-                    formId="socialLinks"
-                    {...commonFormProps}
-                  />
-                  )}
-                </div>
-              </div>
+          <div className="col pl-0">
+            <div className="d-md-none">
+              {this.renderHeadingLockup()}
+            </div>
+            <div className="d-none d-md-block float-right">
+              {this.renderViewMyRecordsButton()}
             </div>
           </div>
-          <div
-            className={classNames([
-              'col container-fluid d-inline-flex bg-color-grey-FBFAF9 h-100 w-100 align-items-start justify-content-start g-3rem',
-              isMobileView ? 'py-4 px-3' : 'px-120px py-6',
-            ])}
-          >
-            {isBlockVisible((courseCertificates || []).length) && (
-            <Certificates
-              certificates={courseCertificates || []}
-              formId="certificates"
+        </div>
+        {this.renderPhotoUploadErrorMessage()}
+        <div className="row">
+          <div className="col-md-4 col-lg-4">
+            <div className="d-none d-md-block mb-4">
+              {this.renderHeadingLockup()}
+            </div>
+            <div className="d-md-none mb-4">
+              {this.renderViewMyRecordsButton()}
+            </div>
+            <Name
+              name={name}
+              visibilityName={visibilityName}
+              formId="name"
+              {...commonFormProps}
+            />
+            <Country
+              country={country}
+              visibilityCountry={visibilityCountry}
+              formId="country"
+              {...commonFormProps}
+            />
+            <PreferredLanguage
+              languageProficiencies={languageProficiencies}
+              visibilityLanguageProficiencies={visibilityLanguageProficiencies}
+              formId="languageProficiencies"
+              {...commonFormProps}
+            />
+            <Education
+              levelOfEducation={levelOfEducation}
+              visibilityLevelOfEducation={visibilityLevelOfEducation}
+              formId="levelOfEducation"
+              {...commonFormProps}
+            />
+            <SocialLinks
+              socialLinks={socialLinks}
+              draftSocialLinksByPlatform={draftSocialLinksByPlatform}
+              visibilitySocialLinks={visibilitySocialLinks}
+              formId="socialLinks"
+              {...commonFormProps}
             />
-            )}
           </div>
-        </>
-      )}
-    </div>
-  );
-};
+          <div className="pt-md-3 col-md-8 col-lg-7 offset-lg-1">
+            {this.renderAgeMessage()}
+            <Bio
+              bio={bio}
+              visibilityBio={visibilityBio}
+              formId="bio"
+              {...commonFormProps}
+            />
+            <Certificates
+              visibilityCourseCertificates={visibilityCourseCertificates}
+              formId="certificates"
+              {...commonFormProps}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <div className="profile-page">
+        <Banner />
+        {this.renderContent()}
+      </div>
+    );
+  }
+}
+
+ProfilePage.contextType = AppContext;
 
 ProfilePage.propTypes = {
-  params: PropTypes.shape({
-    username: PropTypes.string.isRequired,
-  }).isRequired,
+  // Account data
   requiresParentalConsent: PropTypes.bool,
   dateJoined: PropTypes.string,
-  username: PropTypes.string,
+
+  // Bio form data
   bio: PropTypes.string,
-  visibilityBio: PropTypes.string,
+  visibilityBio: PropTypes.string.isRequired,
+
+  // Certificates form data
   courseCertificates: PropTypes.arrayOf(PropTypes.shape({
     title: PropTypes.string,
   })),
+  visibilityCourseCertificates: PropTypes.string.isRequired,
+
+  // Country form data
   country: PropTypes.string,
-  visibilityCountry: PropTypes.string,
+  visibilityCountry: PropTypes.string.isRequired,
+
+  // Education form data
   levelOfEducation: PropTypes.string,
-  visibilityLevelOfEducation: PropTypes.string,
+  visibilityLevelOfEducation: PropTypes.string.isRequired,
+
+  // Language proficiency form data
   languageProficiencies: PropTypes.arrayOf(PropTypes.shape({
     code: PropTypes.string.isRequired,
   })),
-  visibilityLanguageProficiencies: PropTypes.string,
+  visibilityLanguageProficiencies: PropTypes.string.isRequired,
+
+  // Name form data
   name: PropTypes.string,
-  visibilityName: PropTypes.string,
+  visibilityName: PropTypes.string.isRequired,
+
+  // Social links form data
   socialLinks: PropTypes.arrayOf(PropTypes.shape({
     platform: PropTypes.string,
     socialLink: PropTypes.string,
@@ -429,20 +333,42 @@ ProfilePage.propTypes = {
     platform: PropTypes.string,
     socialLink: PropTypes.string,
   })),
-  visibilitySocialLinks: PropTypes.string,
+  visibilitySocialLinks: PropTypes.string.isRequired,
+
+  // Other data we need
   profileImage: PropTypes.shape({
     src: PropTypes.string,
     isDefault: PropTypes.bool,
   }),
   saveState: PropTypes.oneOf([null, 'pending', 'complete', 'error']),
   savePhotoState: PropTypes.oneOf([null, 'pending', 'complete', 'error']),
-  isLoadingProfile: PropTypes.bool,
+  isLoadingProfile: PropTypes.bool.isRequired,
+
+  // Page state helpers
   photoUploadError: PropTypes.objectOf(PropTypes.string),
+
+  // Actions
+  fetchProfile: PropTypes.func.isRequired,
+  saveProfile: PropTypes.func.isRequired,
+  saveProfilePhoto: PropTypes.func.isRequired,
+  deleteProfilePhoto: PropTypes.func.isRequired,
+  openForm: PropTypes.func.isRequired,
+  closeForm: PropTypes.func.isRequired,
+  updateDraft: PropTypes.func.isRequired,
+
+  // Router
+  match: PropTypes.shape({
+    params: PropTypes.shape({
+      username: PropTypes.string.isRequired,
+    }).isRequired,
+  }).isRequired,
+
+  // i18n
+  intl: intlShape.isRequired,
 };
 
 ProfilePage.defaultProps = {
   saveState: null,
-  username: '',
   savePhotoState: null,
   photoUploadError: {},
   profileImage: {},
@@ -453,16 +379,20 @@ ProfilePage.defaultProps = {
   draftSocialLinksByPlatform: {},
   bio: null,
   languageProficiencies: [],
-  courseCertificates: [],
+  courseCertificates: null,
   requiresParentalConsent: null,
   dateJoined: null,
-  visibilityName: null,
-  visibilityCountry: null,
-  visibilityLevelOfEducation: null,
-  visibilitySocialLinks: null,
-  visibilityLanguageProficiencies: null,
-  visibilityBio: null,
-  isLoadingProfile: false,
 };
 
-export default withParams(ProfilePage);
+export default connect(
+  profilePageSelector,
+  {
+    fetchProfile,
+    saveProfilePhoto,
+    deleteProfilePhoto,
+    saveProfile,
+    openForm,
+    closeForm,
+    updateDraft,
+  },
+)(injectIntl(ProfilePage));

src/profile/ProfilePage.messages.jsx

@@ -11,16 +11,6 @@ const messages = defineMessages({
     defaultMessage: 'Profile loading...',
     description: 'Message displayed when the profile data is loading.',
   },
-  'profile.username': {
-    id: 'profile.username',
-    defaultMessage: 'Username',
-    description: 'Label for the username field.',
-  },
-  'profile.username.tooltip': {
-    id: 'profile.username.tooltip',
-    defaultMessage: 'The name that identifies you on edX. You cannot change your username.',
-    description: 'Tooltip for the username field.',
-  },
 });
 
 export default messages;

src/profile/ProfilePage.test.jsx

@@ -1,45 +1,37 @@
+/* eslint-disable global-require */
 import { getConfig } from '@edx/frontend-platform';
 import * as analytics from '@edx/frontend-platform/analytics';
 import { AppContext } from '@edx/frontend-platform/react';
 import { configure as configureI18n, IntlProvider } from '@edx/frontend-platform/i18n';
-import { render } from '@testing-library/react';
+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';
 import thunk from 'redux-thunk';
-import {
-  MemoryRouter,
-  Routes,
-  Route,
-  useNavigate,
-} from 'react-router-dom';
 
 import messages from '../i18n';
 import ProfilePage from './ProfilePage';
-import loadingApp from './__mocks__/loadingApp.mockStore';
-import viewOwnProfile from './__mocks__/viewOwnProfile.mockStore';
-import viewOtherProfile from './__mocks__/viewOtherProfile.mockStore';
-import invalidUser from './__mocks__/invalidUser.mockStore';
-
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useNavigate: jest.fn(),
-}));
 
 const mockStore = configureMockStore([thunk]);
-
 const storeMocks = {
-  loadingApp,
-  viewOwnProfile,
-  viewOtherProfile,
-  invalidUser,
+  loadingApp: require('./__mocks__/loadingApp.mockStore.js'),
+  viewOwnProfile: require('./__mocks__/viewOwnProfile.mockStore.js'),
+  viewOtherProfile: require('./__mocks__/viewOtherProfile.mockStore.js'),
+  savingEditedBio: require('./__mocks__/savingEditedBio.mockStore.js'),
 };
-
 const requiredProfilePageProps = {
-  params: { username: 'staff' },
+  fetchUserAccount: () => {},
+  fetchProfile: () => {},
+  saveProfile: () => {},
+  saveProfilePhoto: () => {},
+  deleteProfilePhoto: () => {},
+  openField: () => {},
+  closeField: () => {},
+  match: { params: { username: 'staff' } },
 };
 
+// Mock language cookie
 Object.defineProperty(global.document, 'cookie', {
   writable: true,
   value: `${getConfig().LANGUAGE_PREFERENCE_COOKIE_NAME}=en`,
@@ -71,110 +63,86 @@ configureI18n({
 
 beforeEach(() => {
   analytics.sendTrackingLogEvent.mockReset();
-  useNavigate.mockReset();
 });
 
-const ProfilePageWrapper = ({
-  contextValue, store, params,
-}) => (
-  <AppContext.Provider value={contextValue}>
-    <IntlProvider locale="en">
-      <Provider store={store}>
-        <MemoryRouter initialEntries={[`/profile/${params.username}`]}>
-          <Routes>
-            <Route
-              path="/profile/:username"
-              element={<ProfilePage {...requiredProfilePageProps} params={params} />}
-            />
-          </Routes>
-        </MemoryRouter>
-      </Provider>
-    </IntlProvider>
-  </AppContext.Provider>
-);
-
-ProfilePageWrapper.defaultProps = {
-  // eslint-disable-next-line react/default-props-match-prop-types
-  params: { username: 'staff' },
-};
-
-ProfilePageWrapper.propTypes = {
-  contextValue: PropTypes.shape({}).isRequired,
-  store: PropTypes.shape({}).isRequired,
-  params: PropTypes.shape({
-    username: PropTypes.string.isRequired,
-  }).isRequired,
-};
-
 describe('<ProfilePage />', () => {
   describe('Renders correctly in various states', () => {
     it('app loading', () => {
-      const contextValue = {
-        authenticatedUser: { userId: null, username: null, administrator: false },
-        config: getConfig(),
-      };
       const component = (
-        <ProfilePageWrapper
-          contextValue={contextValue}
-          store={mockStore(storeMocks.loadingApp)}
-        />
+        <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 { container: tree } = render(component);
+      const tree = renderer.create(component).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
     it('viewing own profile', () => {
-      const contextValue = {
-        authenticatedUser: { userId: 123, username: 'staff', administrator: true },
-        config: getConfig(),
-      };
       const component = (
-        <ProfilePageWrapper
-          contextValue={contextValue}
-          store={mockStore(storeMocks.viewOwnProfile)}
-        />
+        <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 { container: tree } = render(component);
+      const tree = renderer.create(component).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
-    it('viewing other profile with all fields', () => {
-      const contextValue = {
-        authenticatedUser: { userId: 123, username: 'staff', administrator: true },
-        config: getConfig(),
-      };
+    it('viewing other profile', () => {
       const component = (
-        <ProfilePageWrapper
-          contextValue={contextValue}
-          store={mockStore({
-            ...storeMocks.viewOtherProfile,
-            profilePage: {
-              ...storeMocks.viewOtherProfile.profilePage,
-              account: {
-                ...storeMocks.viewOtherProfile.profilePage.account,
-                name: 'Verified User',
-                country: 'US',
-                bio: 'About me',
-                courseCertificates: [{ title: 'Course 1' }],
-                levelOfEducation: 'bachelors',
-                languageProficiencies: [{ code: 'en' }],
-                socialLinks: [{ platform: 'twitter', socialLink: 'https://twitter.com/user' }],
-              },
-              preferences: {
-                ...storeMocks.viewOtherProfile.profilePage.preferences,
-                visibilityName: 'all_users',
-                visibilityCountry: 'all_users',
-                visibilityLevelOfEducation: 'all_users',
-                visibilityLanguageProficiencies: 'all_users',
-                visibilitySocialLinks: 'all_users',
-                visibilityBio: 'all_users',
-              },
-            },
-          })}
-          params={{ username: 'verified' }}
-        />
+        <AppContext.Provider
+          value={{
+            authenticatedUser: { userId: 123, username: 'staff', administrator: true },
+            config: getConfig(),
+          }}
+        >
+          <IntlProvider locale="en">
+            <Provider store={mockStore(storeMocks.viewOtherProfile)}>
+              <ProfilePage
+                {...requiredProfilePageProps}
+                match={{ params: { username: 'verified' } }} // Override default match
+              />
+            </Provider>
+          </IntlProvider>
+        </AppContext.Provider>
       );
-      const { container: tree } = render(component);
+      const tree = renderer.create(component).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('while saving an edited bio', () => {
+      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>
+      );
+      const tree = renderer.create(component).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
@@ -182,78 +150,52 @@ describe('<ProfilePage />', () => {
       const config = getConfig();
       config.CREDENTIALS_BASE_URL = '';
 
-      const contextValue = {
-        authenticatedUser: { userId: 123, username: 'staff', administrator: true },
-        config: getConfig(),
-      };
       const component = (
-        <ProfilePageWrapper
-          contextValue={contextValue}
-          store={mockStore(storeMocks.viewOwnProfile)}
-        />
+        <AppContext.Provider
+          value={{
+            authenticatedUser: { userId: 123, username: 'staff', administrator: true },
+            config,
+          }}
+        >
+          <IntlProvider locale="en">
+            <Provider store={mockStore(storeMocks.viewOwnProfile)}>
+              <ProfilePage {...requiredProfilePageProps} />
+            </Provider>
+          </IntlProvider>
+        </AppContext.Provider>
       );
-      const { container: tree } = render(component);
+      const tree = renderer.create(component).toJSON();
       expect(tree).toMatchSnapshot();
     });
-
-    it('successfully redirected to not found page', () => {
-      const contextValue = {
-        authenticatedUser: { userId: 123, username: 'staff', administrator: true },
-        config: getConfig(),
-      };
-      const navigate = jest.fn();
-      useNavigate.mockReturnValue(navigate);
-      const component = (
-        <ProfilePageWrapper
-          contextValue={contextValue}
-          store={mockStore(storeMocks.invalidUser)}
-          params={{ username: 'staffTest' }}
-        />
-      );
-      const { container: tree } = render(component);
-      expect(tree).toMatchSnapshot();
-      expect(navigate).toHaveBeenCalledWith('/notfound');
-    });
   });
 
   describe('handles analytics', () => {
     it('calls sendTrackingLogEvent when mounting', () => {
-      const contextValue = {
-        authenticatedUser: { userId: 123, username: 'staff', administrator: true },
-        config: getConfig(),
-      };
-      render(
-        <ProfilePageWrapper
-          contextValue={contextValue}
-          store={mockStore(storeMocks.loadingApp)}
-          params={{ username: 'test-username' }}
-        />,
+      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>
       );
+      const wrapper = mount(component);
+      wrapper.update();
 
-      expect(analytics.sendTrackingLogEvent).toHaveBeenCalledTimes(1);
-      expect(analytics.sendTrackingLogEvent).toHaveBeenCalledWith('edx.profile.viewed', {
+      expect(analytics.sendTrackingLogEvent.mock.calls.length).toBe(1);
+      expect(analytics.sendTrackingLogEvent.mock.calls[0][0]).toEqual('edx.profile.viewed');
+      expect(analytics.sendTrackingLogEvent.mock.calls[0][1]).toEqual({
         username: 'test-username',
       });
     });
   });
-
-  describe('handles navigation', () => {
-    it('navigates to notfound on save error with no username', () => {
-      const contextValue = {
-        authenticatedUser: { userId: 123, username: 'staff', administrator: true },
-        config: getConfig(),
-      };
-      const navigate = jest.fn();
-      useNavigate.mockReturnValue(navigate);
-      render(
-        <ProfilePageWrapper
-          contextValue={contextValue}
-          store={mockStore(storeMocks.invalidUser)}
-          params={{ username: 'staffTest' }}
-        />,
-      );
-
-      expect(navigate).toHaveBeenCalledWith('/notfound');
-    });
-  });
 });

src/profile/UserCertificateSummary.jsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { FormattedMessage } from '@edx/frontend-platform/i18n';
-
-const UserCertificateSummary = ({ count = 0 }) => {
-  if (count) {
-    return (
-      <span className="small m-0 text-gray-800">
-        <FormattedMessage
-          id="profile.certificatecount"
-          defaultMessage="{certificate_count} certifications"
-          description="A label for many certificates a user has"
-          values={{
-            certificate_count: <span className="font-weight-bold">{count}</span>,
-          }}
-        />
-      </span>
-    );
-  }
-  return null;
-};
-
-UserCertificateSummary.propTypes = {
-  count: PropTypes.number,
-};
-
-export default UserCertificateSummary;

src/profile/__mocks__/invalidUser.mockStore.js

@@ -1,42 +0,0 @@
-module.exports = {
-  userAccount: {
-    loading: false,
-    error: null,
-    username: 'staff',
-    email: null,
-    bio: null,
-    name: null,
-    country: null,
-    socialLinks: null,
-    profileImage: {
-      imageUrlMedium: null,
-      imageUrlLarge: null
-    },
-    levelOfEducation: null,
-    learningGoal: null
-  },
-  profilePage: {
-    errors: {},
-    saveState: 'error',
-    savePhotoState: null,
-    currentlyEditingField: null,
-    account: {
-      username: '',
-      socialLinks: []
-    },
-    preferences: {},
-    courseCertificates: [],
-    drafts: {},
-    isLoadingProfile: false,
-    isAuthenticatedUserProfile: true,
-    countriesCodesList: ['US', 'CA', 'GB', 'ME']
-  },
-  router: {
-    location: {
-      pathname: '/u/staffTest',
-      search: '',
-      hash: ''
-    },
-    action: 'POP'
-  }
-};

src/profile/__mocks__/loadingApp.mockStore.js

@@ -12,8 +12,7 @@ module.exports = {
       imageUrlMedium: null,
       imageUrlLarge: null
     },
-    levelOfEducation: null,
-    learningGoal: null
+    levelOfEducation: null
   },
   profilePage: {
     errors: {},
@@ -29,7 +28,6 @@ module.exports = {
     drafts: {},
     isLoadingProfile: true,
     isAuthenticatedUserProfile: true,
-    countriesCodesList: ['US', 'CA', 'GB', 'ME']
   },
   router: {
     location: {

src/profile/__mocks__/savingEditedBio.mockStore.js

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

src/profile/__mocks__/viewOtherProfile.mockStore.js

@@ -42,8 +42,7 @@ module.exports = {
     secondaryEmail: null,
     timeZone: null,
     gender: null,
-    accountPrivacy: 'custom',
-    learningGoal: 'advance_career',
+    accountPrivacy: 'custom'
   },
   profilePage: {
     errors: {},
@@ -81,18 +80,10 @@ module.exports = {
       gender: null,
       accountPrivacy: 'private'
     },
-    preferences: {
-      visibilityName: 'all_users',
-      visibilityCountry: 'all_users',
-      visibilityLevelOfEducation: 'all_users',
-      visibilityLanguageProficiencies: 'all_users',
-      visibilitySocialLinks: 'all_users',
-      visibilityBio: 'all_users'
-    },
+    preferences: {},
     courseCertificates: [],
     drafts: {},
-    isLoadingProfile: false,
-    countriesCodesList: ['US', 'CA', 'GB', 'ME']
+    isLoadingProfile: false
   },
   router: {
     location: {

src/profile/__mocks__/viewOwnProfile.mockStore.js

@@ -42,8 +42,7 @@ module.exports = {
     secondaryEmail: null,
     timeZone: null,
     gender: null,
-    accountPrivacy: 'custom',
-    learningGoal: 'advance_career'
+    accountPrivacy: 'custom'
   },
   profilePage: {
     errors: {},
@@ -92,8 +91,7 @@ module.exports = {
       timeZone: null,
       levelOfEducation: 'el',
       gender: null,
-      accountPrivacy: 'custom',
-      learningGoal: 'advance_career'
+      accountPrivacy: 'custom'
     },
     preferences: {
       visibilityUserLocation: 'all_users',
@@ -106,8 +104,7 @@ module.exports = {
       visibilityName: 'private',
       visibilityLanguageProficiencies: 'all_users',
       visibilityCountry: 'all_users',
-      accountPrivacy: 'custom',
-      visibilityLearningGoal: 'private',
+      accountPrivacy: 'custom'
     },
     courseCertificates: [
       {
@@ -125,8 +122,7 @@ module.exports = {
       }
     ],
     drafts: {},
-    isLoadingProfile: false,
-    countriesCodesList: ['US', 'CA', 'GB', 'ME']
+    isLoadingProfile: false
   },
   router: {
     location: {

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

@@ -1,1359 +1,1258 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<ProfilePage /> Renders correctly in various states app loading 1`] = `
-<div>
+<div
+  className="profile-page"
+>
   <div
-    class="profile-page"
-  >
-    <div>
+    className="profile-page-bg-banner bg-primary d-none d-md-block p-relative"
+  />
+  <div>
+    <div
+      className="d-flex justify-content-center align-items-center flex-column"
+      style={
+        Object {
+          "height": "50vh",
+        }
+      }
+    >
       <div
-        class="d-flex justify-content-center align-items-center flex-column height-50vh"
+        className="spinner-border text-primary"
+        role="status"
       >
-        <div
-          class="spinner-border text-primary"
-          role="status"
+        <span
+          className="sr-only"
         >
-          <span
-            class="sr-only"
-          >
-            Profile loading...
-          </span>
-        </div>
+          Profile loading...
+        </span>
       </div>
     </div>
   </div>
 </div>
 `;
 
-exports[`<ProfilePage /> Renders correctly in various states successfully redirected to not found page 1`] = `
-<div>
+exports[`<ProfilePage /> Renders correctly in various states viewing other profile 1`] = `
+<div
+  className="profile-page"
+>
   <div
-    class="profile-page"
+    className="profile-page-bg-banner bg-primary d-none d-md-block p-relative"
+  />
+  <div
+    className="container-fluid"
   >
     <div
-      class="profile-page-bg-banner bg-primary d-md-block align-items-center h-100 w-100 px-120px py-5.5"
+      className="row align-items-center pt-4 mb-4 pt-md-0 mb-md-0"
     >
       <div
-        class="col container-fluid w-100 h-100 bg-white py-0 rounded-75 px-40px"
+        className="col-auto col-md-4 col-lg-3"
       >
         <div
-          class="col h-100 w-100 px-0 justify-content-start g-15rem py-36px"
+          className="d-flex align-items-center d-md-block"
         >
           <div
-            class="row-auto d-flex flex-wrap align-items-center h-100 w-100 justify-content-start g-15rem flex-row"
+            className="profile-avatar-wrap position-relative"
           >
             <div
-              class="profile-avatar-wrap position-relative"
+              className="profile-avatar rounded-circle bg-light"
             >
-              <div
-                class="profile-avatar rounded-circle bg-light"
-              >
-                <div
-                  aria-hidden="true"
-                  class="text-muted"
-                  data-testid="IconMock"
-                  focusable="false"
-                  role="img"
-                  viewbox="0 0 24 24"
-                />
-              </div>
-              <form
-                enctype="multipart/form-data"
-              >
-                <input
-                  accept=".jpg, .jpeg, .png"
-                  class="d-none form-control-file"
-                  id="photo-file"
-                  name="file"
-                  type="file"
-                />
-              </form>
-            </div>
-            <div
-              class="col h-100 w-100 m-0 p-0 justify-content-start align-items-start"
-            >
-              <p
-                class="row m-0 font-weight-bold text-truncate text-primary-500 h3"
-              >
-                staffTest
-              </p>
-              <div
-                class="row pt-2 m-0 g-1rem"
+              <IconMock
+                aria-hidden={true}
+                className="text-muted"
+                focusable="false"
+                role="img"
+                viewBox="0 0 24 24"
               />
             </div>
-            <div
-              class="p-0  col-auto"
-            />
+            <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
-          class="ml-auto"
-        />
       </div>
-    </div>
-    <div
-      class="col d-inline-flex h-100 w-100 align-items-start justify-content-start g-3rem px-120px py-6"
-    >
       <div
-        class="w-100 p-0"
+        className="col pl-0"
       >
         <div
-          class="col justify-content-start align-items-start p-0"
+          className="d-md-none"
         >
-          <div
-            class="col align-self-stretch height-42px justify-content-start align-items-start p-0"
+          <span
+            data-hj-suppress={true}
           >
+            <h1
+              className="h2 mb-0 font-weight-bold"
+            >
+              verified
+            </h1>
             <p
-              class="font-weight-bold text-primary-500 m-0 h2"
+              className="mb-0"
             >
-              Profile information
-            </p>
-          </div>
-        </div>
-        <div
-          class="row m-0 px-0 w-100 d-inline-flex align-items-start justify-content-start pt-5.5"
-        >
-          <div
-            class="col p-0 col-6"
-          >
-            <div
-              class="m-0"
-            >
-              <div
-                class="row m-0 pb-1.5 align-items-center"
-              >
-                <p
-                  class="h5 font-weight-bold m-0"
-                  data-hj-suppress="true"
-                >
-                  Username
-                </p>
-                <svg
-                  class="m-0 info-icon"
-                  fill="none"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M11 7h2v2h-2V7Zm0 4h2v6h-2v-6Zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8Z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </div>
-              <h4
-                class="edit-section-header text-gray-700"
-              >
-                staffTest
-              </h4>
-            </div>
-          </div>
-          <div
-            class="col m-0 pr-0 pl-40px col-6"
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      class="col container-fluid d-inline-flex bg-color-grey-FBFAF9 h-100 w-100 align-items-start justify-content-start g-3rem px-120px py-6"
-    />
-  </div>
-</div>
-`;
-
-exports[`<ProfilePage /> Renders correctly in various states viewing other profile with all fields 1`] = `
-<div>
-  <div
-    class="profile-page"
-  >
-    <div
-      class="profile-page-bg-banner bg-primary d-md-block align-items-center h-100 w-100 px-120px py-5.5"
-    >
-      <div
-        class="col container-fluid w-100 h-100 bg-white py-0 rounded-75 px-40px"
-      >
-        <div
-          class="col h-100 w-100 px-0 justify-content-start g-15rem py-36px"
-        >
-          <div
-            class="row-auto d-flex flex-wrap align-items-center h-100 w-100 justify-content-start g-15rem flex-row"
-          >
-            <div
-              class="profile-avatar-wrap position-relative"
-            >
-              <div
-                class="profile-avatar rounded-circle bg-light"
-              >
-                <div
-                  aria-hidden="true"
-                  class="text-muted"
-                  data-testid="IconMock"
-                  focusable="false"
-                  role="img"
-                  viewbox="0 0 24 24"
-                />
-              </div>
-              <form
-                enctype="multipart/form-data"
-              >
-                <input
-                  accept=".jpg, .jpeg, .png"
-                  class="d-none form-control-file"
-                  id="photo-file"
-                  name="file"
-                  type="file"
-                />
-              </form>
-            </div>
-            <div
-              class="col h-100 w-100 m-0 p-0 justify-content-start align-items-start"
-            >
-              <p
-                class="row m-0 font-weight-bold text-truncate text-primary-500 h3"
-              >
-                verified
-              </p>
-              <p
-                class="row pt-2 text-gray-800 font-weight-normal m-0 p"
-              >
-                Verified User
-              </p>
-              <div
-                class="row pt-2 m-0 g-1rem"
-              >
-                <span
-                  class="small mb-0 text-gray-800"
-                >
-                  Member since 
-                  <span
-                    class="font-weight-bold"
-                  >
-                     
-                    2017
-                     
-                  </span>
+              <span>
+                Member since 
+                <span>
+                  2017
                 </span>
-              </div>
-            </div>
-            <div
-              class="p-0  col-auto"
+              </span>
+            </p>
+            <hr
+              className="d-none d-md-block"
             />
-          </div>
+          </span>
         </div>
         <div
-          class="ml-auto"
+          className="d-none d-md-block float-right"
         />
       </div>
     </div>
     <div
-      class="col d-inline-flex h-100 w-100 align-items-start justify-content-start g-3rem px-120px py-6"
+      className="row"
     >
       <div
-        class="w-100 p-0"
+        className="col-md-4 col-lg-4"
       >
         <div
-          class="col justify-content-start align-items-start p-0"
+          className="d-none d-md-block mb-4"
         >
-          <div
-            class="col align-self-stretch height-42px justify-content-start align-items-start p-0"
+          <span
+            data-hj-suppress={true}
           >
-            <p
-              class="font-weight-bold text-primary-500 m-0 h2"
+            <h1
+              className="h2 mb-0 font-weight-bold"
             >
-              Profile information
+              verified
+            </h1>
+            <p
+              className="mb-0"
+            >
+              <span>
+                Member since 
+                <span>
+                  2017
+                </span>
+              </span>
             </p>
-          </div>
+            <hr
+              className="d-none d-md-block"
+            />
+          </span>
         </div>
         <div
-          class="row m-0 px-0 w-100 d-inline-flex align-items-start justify-content-start pt-5.5"
-        >
-          <div
-            class="col p-0 col-6"
-          >
-            <div
-              class="m-0"
-            >
-              <div
-                class="row m-0 pb-1.5 align-items-center"
-              >
-                <p
-                  class="h5 font-weight-bold m-0"
-                  data-hj-suppress="true"
-                >
-                  Username
-                </p>
-                <svg
-                  class="m-0 info-icon"
-                  fill="none"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M11 7h2v2h-2V7Zm0 4h2v6h-2v-6Zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8Z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </div>
-              <h4
-                class="edit-section-header text-gray-700"
-              >
-                verified
-              </h4>
-            </div>
-            <div
-              class="pgn-transition-replace-group position-relative pt-40px"
-            >
-              <div
-                style="padding: .1px 0px;"
-              >
-                <div
-                  class="row m-0 pb-1.5 align-items-center"
-                >
-                  <p
-                    class="h5 font-weight-bold m-0"
-                    data-hj-suppress="true"
-                  >
-                    Full name
-                  </p>
-                  <svg
-                    class="m-0 info-icon"
-                    fill="none"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M11 7h2v2h-2V7Zm0 4h2v6h-2v-6Zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8Z"
-                      fill="currentColor"
-                    />
-                  </svg>
-                </div>
-                <div
-                  class="row m-0 p-0 d-flex flex-nowrap align-items-center"
-                >
-                  <div
-                    class="m-0 p-0 col-auto"
-                  >
-                    <h4
-                      class="edit-section-header text-gray-700"
-                    >
-                      Verified User
-                    </h4>
-                  </div>
-                  <div
-                    class="col-auto m-0 p-0 d-flex align-items-center col-auto"
-                  />
-                </div>
-                <div
-                  class="row m-0 p-0"
-                />
-              </div>
-            </div>
-            <div
-              class="pgn-transition-replace-group position-relative pt-40px"
-            >
-              <div
-                style="padding: .1px 0px;"
-              >
-                <p
-                  class="h5 font-weight-bold m-0 pb-1.5"
-                  data-hj-suppress="true"
-                >
-                  Country
-                </p>
-                <div
-                  class="row m-0 p-0 d-flex flex-nowrap align-items-center"
-                >
-                  <div
-                    class="m-0 p-0 col-auto"
-                  >
-                    <h4
-                      class="edit-section-header text-gray-700"
-                    >
-                      United States of America
-                    </h4>
-                  </div>
-                  <div
-                    class="col-auto m-0 p-0 d-flex align-items-center col-auto"
-                  />
-                </div>
-                <div
-                  class="row m-0 p-0"
-                />
-              </div>
-            </div>
-            <div
-              class="pgn-transition-replace-group position-relative pt-40px"
-            >
-              <div
-                style="padding: .1px 0px;"
-              >
-                <p
-                  class="h5 font-weight-bold m-0 pb-1.5"
-                  data-hj-suppress="true"
-                >
-                  Primary language spoken
-                </p>
-                <div
-                  class="row m-0 p-0 d-flex flex-nowrap align-items-center"
-                >
-                  <div
-                    class="m-0 p-0 col-auto"
-                  >
-                    <h4
-                      class="edit-section-header text-gray-700"
-                    >
-                      English
-                    </h4>
-                  </div>
-                  <div
-                    class="col-auto m-0 p-0 d-flex align-items-center col-auto"
-                  />
-                </div>
-                <div
-                  class="row m-0 p-0"
-                />
-              </div>
-            </div>
-            <div
-              class="pgn-transition-replace-group position-relative pt-40px"
-            >
-              <div
-                style="padding: .1px 0px;"
-              >
-                <p
-                  class="h5 font-weight-bold m-0 pb-1.5"
-                  data-hj-suppress="true"
-                >
-                  Education
-                </p>
-                <div
-                  class="row m-0 p-0 d-flex flex-nowrap align-items-center"
-                >
-                  <div
-                    class="m-0 p-0 col-auto"
-                  >
-                    <h4
-                      class="edit-section-header text-gray-700"
-                    >
-                      Other education
-                    </h4>
-                  </div>
-                  <div
-                    class="col-auto m-0 p-0 d-flex align-items-center col-auto"
-                  />
-                </div>
-                <div
-                  class="row m-0 p-0"
-                />
-              </div>
-            </div>
-          </div>
-          <div
-            class="col m-0 pr-0 pl-40px col-6"
-          >
-            <div
-              class="pgn-transition-replace-group position-relative pt-0"
-            >
-              <div
-                style="padding: .1px 0px;"
-              >
-                <p
-                  class="h5 font-weight-bold m-0 pb-1.5"
-                  data-hj-suppress="true"
-                >
-                  Bio
-                </p>
-                <div
-                  class="row m-0 p-0 d-flex flex-nowrap align-items-center"
-                >
-                  <div
-                    class="m-0 p-0 col-auto"
-                  >
-                    <h4
-                      class="edit-section-header text-gray-700"
-                    >
-                      About me
-                    </h4>
-                  </div>
-                  <div
-                    class="col-auto m-0 p-0 d-flex align-items-center col-auto"
-                  />
-                </div>
-                <div
-                  class="row m-0 p-0"
-                />
-              </div>
-            </div>
-            <div
-              class="pgn-transition-replace-group position-relative p-0"
-            >
-              <div
-                style="padding: .1px 0px;"
-              >
-                <div>
-                  <div>
-                    <div
-                      class="pt-40px"
-                    >
-                      <p
-                        class="h5 font-weight-bold m-0 pb-1.5"
-                        data-hj-suppress="true"
-                      >
-                        X
-                      </p>
-                      <div
-                        class="row m-0 p-0 d-flex flex-nowrap align-items-center"
-                      >
-                        <div
-                          class="m-0 p-0 col-auto"
-                        >
-                          <h4
-                            class="edit-section-header text-gray-700"
-                          >
-                            https://twitter.com/user
-                          </h4>
-                        </div>
-                        <div
-                          class="col-auto m-0 p-0 d-flex align-items-center col-auto"
-                        />
-                      </div>
-                      <div
-                        class="row m-0 p-0"
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
+          className="d-md-none mb-4"
+        />
+        <div
+          className="pgn-transition-replace-group position-relative mb-5"
+          style={
+            Object {
+              "height": null,
+            }
+          }
+        />
+        <div
+          className="pgn-transition-replace-group position-relative mb-5"
+          style={
+            Object {
+              "height": null,
+            }
+          }
+        />
+        <div
+          className="pgn-transition-replace-group position-relative mb-5"
+          style={
+            Object {
+              "height": null,
+            }
+          }
+        />
+        <div
+          className="pgn-transition-replace-group position-relative mb-5"
+          style={
+            Object {
+              "height": null,
+            }
+          }
+        />
+        <div
+          className="pgn-transition-replace-group position-relative mb-5"
+          style={
+            Object {
+              "height": null,
+            }
+          }
+        />
+      </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
+          className="pgn-transition-replace-group position-relative mb-4"
+          style={
+            Object {
+              "height": null,
+            }
+          }
+        />
       </div>
     </div>
-    <div
-      class="col container-fluid d-inline-flex bg-color-grey-FBFAF9 h-100 w-100 align-items-start justify-content-start g-3rem px-120px py-6"
-    />
   </div>
 </div>
 `;
 
 exports[`<ProfilePage /> Renders correctly in various states viewing own profile 1`] = `
-<div>
+<div
+  className="profile-page"
+>
   <div
-    class="profile-page"
+    className="profile-page-bg-banner bg-primary d-none d-md-block p-relative"
+  />
+  <div
+    className="container-fluid"
   >
     <div
-      class="profile-page-bg-banner bg-primary d-md-block align-items-center h-100 w-100 px-120px py-5.5"
+      className="row align-items-center pt-4 mb-4 pt-md-0 mb-md-0"
     >
       <div
-        class="col container-fluid w-100 h-100 bg-white py-0 rounded-75 px-40px"
+        className="col-auto col-md-4 col-lg-3"
       >
         <div
-          class="col h-100 w-100 px-0 justify-content-start g-15rem py-36px"
+          className="d-flex align-items-center d-md-block"
         >
           <div
-            class="row-auto d-flex flex-wrap align-items-center h-100 w-100 justify-content-start g-15rem flex-row"
+            className="profile-avatar-wrap position-relative"
           >
             <div
-              class="profile-avatar-wrap position-relative"
+              className="profile-avatar rounded-circle bg-light"
             >
               <div
-                class="profile-avatar rounded-circle bg-light"
-              >
-                <img
-                  alt="profile avatar"
-                  class="w-100 h-100 d-block rounded-circle overflow-hidden object-fit-cover"
-                  data-hj-suppress="true"
-                  src="http://localhost:18000/media/profile-images/d2a9bdc2ba165dcefc73265c54bf9a20_500.jpg?v=1552495012"
-                />
-              </div>
-              <div
-                class="profile-avatar-button"
+                className="profile-avatar-menu-container"
               >
                 <div
-                  class="pgn__dropdown pgn__dropdown-light dropdown"
-                  data-testid="dropdown"
+                  className="dropdown"
                 >
                   <button
-                    aria-expanded="false"
-                    aria-haspopup="true"
-                    class="btn-icon btn-icon-inverse-primary btn-icon-md btn-icon-inverse-primary-active shadow-sm pgn__dropdown-toggle-iconbutton"
-                    id="dropdown-toggle-with-iconbutton"
+                    aria-expanded={false}
+                    aria-haspopup={true}
+                    className="dropdown-toggle btn btn-primary"
+                    disabled={false}
+                    onClick={[Function]}
                     type="button"
                   >
-                    <span
-                      class="btn-icon__icon-container"
-                    >
-                      <span
-                        class="pgn__icon btn-icon__icon"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          role="img"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"
-                            fill="currentColor"
-                          />
-                          <path
-                            d="M9 2 7.17 4H2v16h20V4h-5.17L15 2H9Zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5Z"
-                            fill="currentColor"
-                          />
-                        </svg>
-                      </span>
-                    </span>
+                    Change
                   </button>
                 </div>
               </div>
-              <form
-                enctype="multipart/form-data"
-              >
-                <input
-                  accept=".jpg, .jpeg, .png"
-                  class="d-none form-control-file"
-                  id="photo-file"
-                  name="file"
-                  type="file"
-                />
-              </form>
+              <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>
-            <div
-              class="col h-100 w-100 m-0 p-0 justify-content-start align-items-start"
+            <form
+              encType="multipart/form-data"
+              onSubmit={[Function]}
             >
-              <p
-                class="row m-0 font-weight-bold text-truncate text-primary-500 h3"
-              >
-                staff
-              </p>
-              <p
-                class="row pt-2 text-gray-800 font-weight-normal m-0 p"
-              >
-                Lemon Seltzer
-              </p>
-              <div
-                class="row pt-2 m-0 g-1rem"
-              >
-                <span
-                  class="small mb-0 text-gray-800"
-                >
-                  Member since 
-                  <span
-                    class="font-weight-bold"
-                  >
-                     
-                    2017
-                     
-                  </span>
-                </span>
-                <span
-                  class="small m-0 text-gray-800"
-                >
-                  <span
-                    class="font-weight-bold"
-                  >
-                    1
-                  </span>
-                   certifications
-                </span>
-              </div>
-            </div>
-            <div
-              class="p-0  col-auto"
-            >
-              <a
-                class="pgn__hyperlink default-link standalone-link btn btn-brand bg-brand-500 font-weight-normal px-4 py-10px text-nowrap"
-                href="http://localhost:18150/records"
-                rel="noopener noreferrer"
-                target="_blank"
-              >
-                View My Records
-              </a>
-            </div>
+              <input
+                accept=".jpg, .jpeg, .png"
+                className="d-none form-control-file"
+                id="photo-file"
+                name="file"
+                onChange={[Function]}
+                type="file"
+              />
+            </form>
           </div>
         </div>
-        <div
-          class="ml-auto"
-        />
       </div>
-    </div>
-    <div
-      class="col d-inline-flex h-100 w-100 align-items-start justify-content-start g-3rem px-120px py-6"
-    >
       <div
-        class="w-100 p-0"
+        className="col pl-0"
       >
         <div
-          class="col justify-content-start align-items-start p-0"
+          className="d-md-none"
         >
-          <div
-            class="col align-self-stretch height-42px justify-content-start align-items-start p-0"
+          <span
+            data-hj-suppress={true}
           >
-            <p
-              class="font-weight-bold text-primary-500 m-0 h2"
+            <h1
+              className="h2 mb-0 font-weight-bold"
             >
-              Profile information
+              staff
+            </h1>
+            <p
+              className="mb-0"
+            >
+              <span>
+                Member since 
+                <span>
+                  2017
+                </span>
+              </span>
             </p>
-          </div>
+            <hr
+              className="d-none d-md-block"
+            />
+          </span>
         </div>
         <div
-          class="row m-0 px-0 w-100 d-inline-flex align-items-start justify-content-start pt-5.5"
+          className="d-none d-md-block float-right"
         >
-          <div
-            class="col p-0 col-6"
+          <a
+            className="btn btn-primary"
+            href="http://localhost:18150/records"
+            onClick={[Function]}
+            rel="noopener"
+            target="_blank"
           >
-            <div
-              class="m-0"
+            View My Records
+            <span
+              className="d-inline-block align-text-top"
             >
-              <div
-                class="row m-0 pb-1.5 align-items-center"
+               
+              <span
+                className="pgn__icon"
+                style={
+                  Object {
+                    "height": "1em",
+                    "width": "1em",
+                  }
+                }
               >
-                <p
-                  class="h5 font-weight-bold m-0"
-                  data-hj-suppress="true"
-                >
-                  Username
-                </p>
                 <svg
-                  class="m-0 info-icon"
+                  aria-hidden={true}
+                  aria-label=""
                   fill="none"
-                  height="24"
+                  focusable={false}
+                  height={24}
+                  role="img"
                   viewBox="0 0 24 24"
-                  width="24"
+                  width={24}
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
-                    d="M11 7h2v2h-2V7Zm0 4h2v6h-2v-6Zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8Z"
+                    d="M19 19H5V5h7V3H3v18h18v-9h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
                     fill="currentColor"
                   />
                 </svg>
-              </div>
-              <h4
-                class="edit-section-header text-gray-700"
-              >
-                staff
-              </h4>
-            </div>
-            <div
-              class="pgn-transition-replace-group position-relative pt-40px"
+              </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"
             >
-              <div
-                style="padding: .1px 0px;"
+              staff
+            </h1>
+            <p
+              className="mb-0"
+            >
+              <span>
+                Member since 
+                <span>
+                  2017
+                </span>
+              </span>
+            </p>
+            <hr
+              className="d-none d-md-block"
+            />
+          </span>
+        </div>
+        <div
+          className="d-md-none mb-4"
+        >
+          <a
+            className="btn btn-primary"
+            href="http://localhost:18150/records"
+            onClick={[Function]}
+            rel="noopener"
+            target="_blank"
+          >
+            View My Records
+            <span
+              className="d-inline-block align-text-top"
+            >
+               
+              <span
+                className="pgn__icon"
+                style={
+                  Object {
+                    "height": "1em",
+                    "width": "1em",
+                  }
+                }
               >
-                <div
-                  class="row m-0 pb-1.5 align-items-center"
+                <svg
+                  aria-hidden={true}
+                  aria-label=""
+                  fill="none"
+                  focusable={false}
+                  height={24}
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width={24}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M19 19H5V5h7V3H3v18h18v-9h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
+            </span>
+          </a>
+        </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"
                 >
-                  <p
-                    class="h5 font-weight-bold m-0"
-                    data-hj-suppress="true"
-                  >
-                    Full name
-                  </p>
                   <svg
-                    class="m-0 info-icon"
-                    fill="none"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
+                    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="M11 7h2v2h-2V7Zm0 4h2v6h-2v-6Zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8Z"
+                      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>
-                </div>
-                <div
-                  class="row m-0 p-0 d-flex flex-nowrap align-items-center"
-                >
-                  <div
-                    class="m-0 p-0 col-auto"
-                  >
-                    <h4
-                      class="edit-section-header text-gray-700"
-                    >
-                      Lemon Seltzer
-                    </h4>
-                  </div>
-                  <div
-                    class="col-auto m-0 p-0 d-flex align-items-center col-auto"
-                  >
-                    <button
-                      class="p-1.5 btn btn-link btn-sm"
-                      type="button"
-                    >
-                      <svg
-                        class="text-gray-700"
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m14.06 9.02.92.92L5.92 19H5v-.92l9.06-9.06ZM17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83a.996.996 0 0 0 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29Zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75Z"
-                          fill="currentColor"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-                <div
-                  class="row m-0 p-0"
-                >
-                  <p
-                    class="mb-0"
-                  >
-                    <span
-                      class="ml-auto small text-muted"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="svg-inline--fa fa-eye-slash "
-                        data-icon="eye-slash"
-                        data-prefix="far"
-                        focusable="false"
-                        role="img"
-                        viewBox="0 0 640 512"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm9.4 130.3C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5l-41.9-33zM192 256c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5z"
-                          fill="currentColor"
-                        />
-                      </svg>
-                       
-                      Just me
-                    </span>
-                  </p>
-                </div>
-              </div>
-            </div>
-            <div
-              class="pgn-transition-replace-group position-relative pt-40px"
-            >
-              <div
-                style="padding: .1px 0px;"
+                  Edit
+                </button>
+              </h2>
+              <p
+                className="mb-0"
               >
-                <p
-                  class="h5 font-weight-bold m-0 pb-1.5"
-                  data-hj-suppress="true"
+                <span
+                  className="ml-auto small text-muted"
                 >
-                  Country
-                </p>
-                <div
-                  class="row m-0 p-0 d-flex flex-nowrap align-items-center"
-                >
-                  <div
-                    class="m-0 p-0 col-auto"
+                  <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"
                   >
-                    <h4
-                      class="edit-section-header text-gray-700"
-                    >
-                      Montenegro
-                    </h4>
-                  </div>
-                  <div
-                    class="col-auto m-0 p-0 d-flex align-items-center col-auto"
-                  >
-                    <button
-                      class="p-1.5 btn btn-link btn-sm"
-                      type="button"
-                    >
-                      <svg
-                        class="text-gray-700"
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m14.06 9.02.92.92L5.92 19H5v-.92l9.06-9.06ZM17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83a.996.996 0 0 0 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29Zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75Z"
-                          fill="currentColor"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-                <div
-                  class="row m-0 p-0"
-                >
-                  <p
-                    class="mb-0"
-                  >
-                    <span
-                      class="ml-auto small text-muted"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="svg-inline--fa fa-eye "
-                        data-icon="eye"
-                        data-prefix="far"
-                        focusable="false"
-                        role="img"
-                        viewBox="0 0 576 512"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
-                          fill="currentColor"
-                        />
-                      </svg>
-                       
-                      Everyone on localhost
-                    </span>
-                  </p>
-                </div>
-              </div>
+                    <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>
-            <div
-              class="pgn-transition-replace-group position-relative pt-40px"
+            <p
+              className="h5"
+              data-hj-suppress={true}
             >
-              <div
-                style="padding: .1px 0px;"
-              >
-                <p
-                  class="h5 font-weight-bold m-0 pb-1.5"
-                  data-hj-suppress="true"
-                >
-                  Primary language spoken
-                </p>
-                <div
-                  class="row m-0 p-0 d-flex flex-nowrap align-items-center"
-                >
-                  <div
-                    class="m-0 p-0 col-auto"
-                  >
-                    <h4
-                      class="edit-section-header text-gray-700"
-                    >
-                      Yoruba
-                    </h4>
-                  </div>
-                  <div
-                    class="col-auto m-0 p-0 d-flex align-items-center col-auto"
-                  >
-                    <button
-                      class="p-1.5 btn btn-link btn-sm"
-                      type="button"
-                    >
-                      <svg
-                        class="text-gray-700"
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m14.06 9.02.92.92L5.92 19H5v-.92l9.06-9.06ZM17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83a.996.996 0 0 0 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29Zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75Z"
-                          fill="currentColor"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-                <div
-                  class="row m-0 p-0"
-                >
-                  <p
-                    class="mb-0"
-                  >
-                    <span
-                      class="ml-auto small text-muted"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="svg-inline--fa fa-eye "
-                        data-icon="eye"
-                        data-prefix="far"
-                        focusable="false"
-                        role="img"
-                        viewBox="0 0 576 512"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
-                          fill="currentColor"
-                        />
-                      </svg>
-                       
-                      Everyone on localhost
-                    </span>
-                  </p>
-                </div>
-              </div>
-            </div>
-            <div
-              class="pgn-transition-replace-group position-relative pt-40px"
+              Lemon Seltzer
+            </p>
+            <small
+              className="form-text text-muted"
             >
-              <div
-                style="padding: .1px 0px;"
-              >
-                <p
-                  class="h5 font-weight-bold m-0 pb-1.5"
-                  data-hj-suppress="true"
-                >
-                  Education
-                </p>
-                <div
-                  class="row m-0 p-0 d-flex flex-nowrap align-items-center"
-                >
-                  <div
-                    class="m-0 p-0 col-auto"
-                  >
-                    <h4
-                      class="edit-section-header text-gray-700"
-                    >
-                      Elementary/primary school
-                    </h4>
-                  </div>
-                  <div
-                    class="col-auto m-0 p-0 d-flex align-items-center col-auto"
-                  >
-                    <button
-                      class="p-1.5 btn btn-link btn-sm"
-                      type="button"
-                    >
-                      <svg
-                        class="text-gray-700"
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m14.06 9.02.92.92L5.92 19H5v-.92l9.06-9.06ZM17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83a.996.996 0 0 0 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29Zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75Z"
-                          fill="currentColor"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-                <div
-                  class="row m-0 p-0"
-                >
-                  <p
-                    class="mb-0"
-                  >
-                    <span
-                      class="ml-auto small text-muted"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="svg-inline--fa fa-eye-slash "
-                        data-icon="eye-slash"
-                        data-prefix="far"
-                        focusable="false"
-                        role="img"
-                        viewBox="0 0 640 512"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm9.4 130.3C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5l-41.9-33zM192 256c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5z"
-                          fill="currentColor"
-                        />
-                      </svg>
-                       
-                      Just me
-                    </span>
-                  </p>
-                </div>
-              </div>
-            </div>
+              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
-            class="col m-0 pr-0 pl-40px col-6"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
-              class="pgn-transition-replace-group position-relative pt-0"
+              className="editable-item-header mb-2"
             >
-              <div
-                style="padding: .1px 0px;"
+              <h2
+                className="edit-section-header"
+                id={null}
               >
-                <p
-                  class="h5 font-weight-bold m-0 pb-1.5"
-                  data-hj-suppress="true"
+                Location
+                <button
+                  className="float-right px-0 btn btn-link btn-sm"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "marginTop": "-.35rem",
+                    }
+                  }
+                  type="button"
                 >
-                  Bio
-                </p>
-                <div
-                  class="row m-0 p-0 d-flex flex-nowrap align-items-center"
+                  <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"
                 >
-                  <div
-                    class="m-0 p-0 col-auto"
+                  <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"
                   >
-                    <h4
-                      class="edit-section-header text-gray-700"
-                    >
-                      This is my bio
-                    </h4>
-                  </div>
-                  <div
-                    class="col-auto m-0 p-0 d-flex align-items-center col-auto"
-                  >
-                    <button
-                      class="p-1.5 btn btn-link btn-sm"
-                      type="button"
-                    >
-                      <svg
-                        class="text-gray-700"
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m14.06 9.02.92.92L5.92 19H5v-.92l9.06-9.06ZM17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83a.996.996 0 0 0 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29Zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75Z"
-                          fill="currentColor"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-                <div
-                  class="row m-0 p-0"
-                >
-                  <p
-                    class="mb-0"
-                  >
-                    <span
-                      class="ml-auto small text-muted"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="svg-inline--fa fa-eye "
-                        data-icon="eye"
-                        data-prefix="far"
-                        focusable="false"
-                        role="img"
-                        viewBox="0 0 576 512"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
-                          fill="currentColor"
-                        />
-                      </svg>
-                       
-                      Everyone on localhost
-                    </span>
-                  </p>
-                </div>
-              </div>
+                    <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 edX
+                </span>
+              </p>
             </div>
-            <div
-              class="pgn-transition-replace-group position-relative p-0"
+            <p
+              className="h5"
+              data-hj-suppress={true}
             >
-              <div
-                style="padding: .1px 0px;"
+              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 edX
+                </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 edX
+                </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>
-                  <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 edX
+                </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 edX
+                </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
-                      class="pt-40px"
+                      className="card-title"
                     >
                       <p
-                        class="h5 font-weight-bold m-0 pb-1.5"
-                        data-hj-suppress="true"
+                        className="small mb-0"
                       >
-                        X
+                        Verified Certificate
                       </p>
-                      <div
-                        class="w-100 overflowWrap-breakWord"
+                      <h4
+                        className="certificate-title"
                       >
-                        <div
-                          class="row m-0 p-0 d-flex flex-nowrap align-items-center"
-                        >
-                          <div
-                            class="m-0 p-0 col-auto"
-                          >
-                            <h4
-                              class="edit-section-header text-gray-700"
-                            >
-                              https://www.twitter.com/ALOHA
-                            </h4>
-                          </div>
-                          <div
-                            class="col-auto m-0 p-0 d-flex align-items-center col-auto"
-                          >
-                            <button
-                              class="p-1.5 btn btn-link btn-sm"
-                              type="button"
-                            >
-                              <svg
-                                class="text-gray-700"
-                                fill="none"
-                                height="24"
-                                viewBox="0 0 24 24"
-                                width="24"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="m14.06 9.02.92.92L5.92 19H5v-.92l9.06-9.06ZM17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83a.996.996 0 0 0 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29Zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75Z"
-                                  fill="currentColor"
-                                />
-                              </svg>
-                            </button>
-                          </div>
-                        </div>
-                        <div
-                          class="row m-0 p-0"
-                        >
-                          <p
-                            class="mb-0"
-                          >
-                            <span
-                              class="ml-auto small text-muted"
-                            >
-                              <svg
-                                aria-hidden="true"
-                                class="svg-inline--fa fa-eye "
-                                data-icon="eye"
-                                data-prefix="far"
-                                focusable="false"
-                                role="img"
-                                viewBox="0 0 576 512"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
-                                  fill="currentColor"
-                                />
-                              </svg>
-                               
-                              Everyone on localhost
-                            </span>
-                          </p>
-                        </div>
-                      </div>
+                        edX Demonstration Course
+                      </h4>
                     </div>
-                    <div
-                      class="pt-40px"
+                    <p
+                      className="small mb-0"
                     >
-                      <p
-                        class="h5 font-weight-bold m-0 pb-1.5"
-                        data-hj-suppress="true"
-                      >
-                        Facebook
-                      </p>
-                      <div
-                        class="w-100 overflowWrap-breakWord"
-                      >
-                        <div
-                          class="row m-0 p-0 d-flex flex-nowrap align-items-center"
-                        >
-                          <div
-                            class="m-0 p-0 col-auto"
-                          >
-                            <h4
-                              class="edit-section-header text-gray-700"
-                            >
-                              https://www.facebook.com/aloha
-                            </h4>
-                          </div>
-                          <div
-                            class="col-auto m-0 p-0 d-flex align-items-center col-auto"
-                          >
-                            <button
-                              class="p-1.5 btn btn-link btn-sm"
-                              type="button"
-                            >
-                              <svg
-                                class="text-gray-700"
-                                fill="none"
-                                height="24"
-                                viewBox="0 0 24 24"
-                                width="24"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="m14.06 9.02.92.92L5.92 19H5v-.92l9.06-9.06ZM17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83a.996.996 0 0 0 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29Zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75Z"
-                                  fill="currentColor"
-                                />
-                              </svg>
-                            </button>
-                          </div>
-                        </div>
-                        <div
-                          class="row m-0 p-0"
-                        >
-                          <p
-                            class="mb-0"
-                          >
-                            <span
-                              class="ml-auto small text-muted"
-                            >
-                              <svg
-                                aria-hidden="true"
-                                class="svg-inline--fa fa-eye "
-                                data-icon="eye"
-                                data-prefix="far"
-                                focusable="false"
-                                role="img"
-                                viewBox="0 0 576 512"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
-                                  fill="currentColor"
-                                />
-                              </svg>
-                               
-                              Everyone on localhost
-                            </span>
-                          </p>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="pt-40px"
+                      <span>
+                        From
+                      </span>
+                    </p>
+                    <p
+                      className="h6 mb-4"
                     >
-                      <p
-                        class="h5 font-weight-bold m-0 pb-1.5"
-                        data-hj-suppress="true"
+                      edX
+                    </p>
+                    <div
+                      className="flex-grow-1"
+                    />
+                    <p
+                      className="small mb-2"
+                    >
+                      <span>
+                        Completed on 
+                        <span>
+                          3/4/2019
+                        </span>
+                      </span>
+                    </p>
+                    <div>
+                      <a
+                        className="btn btn-outline-primary"
+                        href="http://www.example.com/"
+                        onClick={[Function]}
+                        rel="noopener"
+                        target="_blank"
                       >
-                        LinkedIn
-                      </p>
-                      <div
-                        class="p-0 m-0"
-                      >
-                        <button
-                          class="p-0 text-left btn btn-link lh-36px"
-                          tabindex="0"
-                          type="button"
+                        View Certificate
+                        <span
+                          className="d-inline-block align-text-top"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="svg-inline--fa fa-plus fa-xs mr-1"
-                            data-icon="plus"
-                            data-prefix="fas"
-                            focusable="false"
-                            role="img"
-                            viewBox="0 0 448 512"
-                            xmlns="http://www.w3.org/2000/svg"
+                           
+                          <span
+                            className="pgn__icon"
+                            style={
+                              Object {
+                                "height": "1em",
+                                "width": "1em",
+                              }
+                            }
                           >
-                            <path
-                              d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z"
-                              fill="currentColor"
-                            />
-                          </svg>
-                          Add 
-                          LinkedIn
-                        </button>
-                      </div>
+                            <svg
+                              aria-hidden={true}
+                              aria-label=""
+                              fill="none"
+                              focusable={false}
+                              height={24}
+                              role="img"
+                              viewBox="0 0 24 24"
+                              width={24}
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M19 19H5V5h7V3H3v18h18v-9h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
+                                fill="currentColor"
+                              />
+                            </svg>
+                          </span>
+                        </span>
+                      </a>
                     </div>
                   </div>
                 </div>
@@ -1363,98 +1262,1121 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
         </div>
       </div>
     </div>
+  </div>
+</div>
+`;
+
+exports[`<ProfilePage /> Renders correctly in various states while saving an edited bio 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
-      class="col container-fluid d-inline-flex bg-color-grey-FBFAF9 h-100 w-100 align-items-start justify-content-start g-3rem px-120px py-6"
+      className="row align-items-center pt-4 mb-4 pt-md-0 mb-md-0"
     >
-      <div>
+      <div
+        className="col-auto col-md-4 col-lg-3"
+      >
         <div
-          class="col justify-content-start align-items-start g-5rem p-0"
+          className="d-flex align-items-center d-md-block"
         >
           <div
-            class="col align-self-stretch height-42px justify-content-start align-items-start p-0"
+            className="profile-avatar-wrap position-relative"
           >
-            <p
-              class="font-weight-bold text-primary-500 m-0 h2"
+            <div
+              className="profile-avatar rounded-circle bg-light"
             >
-              Your certificates
-            </p>
+              <div
+                className="profile-avatar-menu-container"
+              >
+                <div
+                  className="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
-            class="col justify-content-start align-items-start pt-2 p-0"
+        </div>
+      </div>
+      <div
+        className="col pl-0"
+      >
+        <div
+          className="d-md-none"
+        >
+          <span
+            data-hj-suppress={true}
           >
-            <p
-              class="font-weight-normal text-gray-800 m-0 p-0 p"
+            <h1
+              className="h2 mb-0 font-weight-bold"
             >
-              Your learner records information is only visible to you. Only your username and profile image are visible to others on localhost.
+              staff
+            </h1>
+            <p
+              className="mb-0"
+            >
+              <span>
+                Member since 
+                <span>
+                  2017
+                </span>
+              </span>
+            </p>
+            <hr
+              className="d-none d-md-block"
+            />
+          </span>
+        </div>
+        <div
+          className="d-none d-md-block float-right"
+        >
+          <a
+            className="btn btn-primary"
+            href="http://localhost:18150/records"
+            onClick={[Function]}
+            rel="noopener"
+            target="_blank"
+          >
+            View My Records
+            <span
+              className="d-inline-block align-text-top"
+            >
+               
+              <span
+                className="pgn__icon"
+                style={
+                  Object {
+                    "height": "1em",
+                    "width": "1em",
+                  }
+                }
+              >
+                <svg
+                  aria-hidden={true}
+                  aria-label=""
+                  fill="none"
+                  focusable={false}
+                  height={24}
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width={24}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M19 19H5V5h7V3H3v18h18v-9h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
+            </span>
+          </a>
+        </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"
+            >
+              <span>
+                Member since 
+                <span>
+                  2017
+                </span>
+              </span>
+            </p>
+            <hr
+              className="d-none d-md-block"
+            />
+          </span>
+        </div>
+        <div
+          className="d-md-none mb-4"
+        >
+          <a
+            className="btn btn-primary"
+            href="http://localhost:18150/records"
+            onClick={[Function]}
+            rel="noopener"
+            target="_blank"
+          >
+            View My Records
+            <span
+              className="d-inline-block align-text-top"
+            >
+               
+              <span
+                className="pgn__icon"
+                style={
+                  Object {
+                    "height": "1em",
+                    "width": "1em",
+                  }
+                }
+              >
+                <svg
+                  aria-hidden={true}
+                  aria-label=""
+                  fill="none"
+                  focusable={false}
+                  height={24}
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width={24}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M19 19H5V5h7V3H3v18h18v-9h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
+            </span>
+          </a>
+        </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 edX
+                </span>
+              </p>
+            </div>
+            <p
+              className="h5"
+              data-hj-suppress={true}
+            >
+              Montenegro
             </p>
           </div>
         </div>
         <div
-          class="col"
+          className="pgn-transition-replace-group position-relative mb-5"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
           <div
-            class="row align-items-center pt-5 g-3rem"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
-              class="col-auto d-flex align-items-center p-0"
+              className="editable-item-header mb-2"
             >
-              <div
-                class="col certificate p-4 border-light-400 bg-light-200 w-100 h-100"
+              <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 edX
+                </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 edX
+                </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
-                  class="certificate-type-illustration"
-                  style="background-image: url(icon/mock/path);"
-                />
+                  className="form-group"
+                >
+                  <label
+                    className="edit-section-header"
+                    htmlFor="bio"
+                  >
+                    About Me
+                  </label>
+                  <textarea
+                    aria-describedby=""
+                    className="form-control"
+                    id="bio"
+                    name="bio"
+                    onChange={[Function]}
+                    value="This is my bio"
+                  />
+                </div>
                 <div
-                  class="d-flex flex-column position-relative p-0 width-314px"
+                  className="d-flex flex-row-reverse flex-wrap justify-content-end align-items-center"
                 >
                   <div
-                    class="w-100 color-black"
+                    className="form-group d-flex flex-wrap"
                   >
-                    <p
-                      class="mb-0 font-weight-normal small"
+                    <label
+                      className="col-form-label"
+                      htmlFor="visibilityBio"
                     >
-                      Verified Certificate
-                    </p>
-                    <p
-                      class="m-0 color-black h4"
+                      Who can see this:
+                    </label>
+                    <span
+                      className="d-flex align-items-center"
                     >
-                      edX Demonstration Course
-                    </p>
-                    <p
-                      class="mb-0 small"
-                    >
-                      From
-                    </p>
-                    <h5
-                      class="mb-0 color-black"
-                    >
-                      edX
-                    </h5>
-                    <p
-                      class="mb-0 small"
-                    >
-                      Completed on 
-                      3/4/2019
-                    </p>
+                      <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 edX
+                        </option>
+                      </select>
+                    </span>
                   </div>
                   <div
-                    class="pt-3"
+                    className="form-group flex-shrink-0 flex-grow-1"
                   >
-                    <a
-                      class="pgn__hyperlink default-link standalone-link btn btn-primary font-weight-normal px-4 py-10px"
-                      href="http://www.example.com/"
-                      rel="noopener noreferrer"
-                      target="_blank"
+                    <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"
                     >
-                      View Certificate
-                    </a>
+                      <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}
+                              aria-label=""
+                              fill="none"
+                              focusable={false}
+                              height={24}
+                              role="img"
+                              viewBox="0 0 24 24"
+                              width={24}
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M22 12A10 10 0 116.122 3.91l1.176 1.618A8 8 0 1020 12h2z"
+                                fill="currentColor"
+                              />
+                            </svg>
+                          </span>
+                        </span>
+                        <span
+                          className=""
+                        >
+                          Saving
+                        </span>
+                      </span>
+                    </button>
+                    <button
+                      className="btn btn-link"
+                      disabled={false}
+                      onClick={[Function]}
+                      type="button"
+                    >
+                      Cancel
+                    </button>
                   </div>
-                  <p
-                    class="mb-0 pt-3 small"
+                </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"
                   >
-                    Credential ID 
-                  </p>
+                    <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 edX
+                </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"
+                    >
+                      <span>
+                        From
+                      </span>
+                    </p>
+                    <p
+                      className="h6 mb-4"
+                    >
+                      edX
+                    </p>
+                    <div
+                      className="flex-grow-1"
+                    />
+                    <p
+                      className="small mb-2"
+                    >
+                      <span>
+                        Completed on 
+                        <span>
+                          3/4/2019
+                        </span>
+                      </span>
+                    </p>
+                    <div>
+                      <a
+                        className="btn btn-outline-primary"
+                        href="http://www.example.com/"
+                        onClick={[Function]}
+                        rel="noopener"
+                        target="_blank"
+                      >
+                        View Certificate
+                        <span
+                          className="d-inline-block align-text-top"
+                        >
+                           
+                          <span
+                            className="pgn__icon"
+                            style={
+                              Object {
+                                "height": "1em",
+                                "width": "1em",
+                              }
+                            }
+                          >
+                            <svg
+                              aria-hidden={true}
+                              aria-label=""
+                              fill="none"
+                              focusable={false}
+                              height={24}
+                              role="img"
+                              viewBox="0 0 24 24"
+                              width={24}
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M19 19H5V5h7V3H3v18h18v-9h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
+                                fill="currentColor"
+                              />
+                            </svg>
+                          </span>
+                        </span>
+                      </a>
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
@@ -1467,910 +2389,963 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
 `;
 
 exports[`<ProfilePage /> Renders correctly in various states without credentials service 1`] = `
-<div>
+<div
+  className="profile-page"
+>
   <div
-    class="profile-page"
+    className="profile-page-bg-banner bg-primary d-none d-md-block p-relative"
+  />
+  <div
+    className="container-fluid"
   >
     <div
-      class="profile-page-bg-banner bg-primary d-md-block align-items-center h-100 w-100 px-120px py-5.5"
+      className="row align-items-center pt-4 mb-4 pt-md-0 mb-md-0"
     >
       <div
-        class="col container-fluid w-100 h-100 bg-white py-0 rounded-75 px-40px"
+        className="col-auto col-md-4 col-lg-3"
       >
         <div
-          class="col h-100 w-100 px-0 justify-content-start g-15rem py-36px"
+          className="d-flex align-items-center d-md-block"
         >
           <div
-            class="row-auto d-flex flex-wrap align-items-center h-100 w-100 justify-content-start g-15rem flex-row"
+            className="profile-avatar-wrap position-relative"
           >
             <div
-              class="profile-avatar-wrap position-relative"
+              className="profile-avatar rounded-circle bg-light"
             >
               <div
-                class="profile-avatar rounded-circle bg-light"
-              >
-                <img
-                  alt="profile avatar"
-                  class="w-100 h-100 d-block rounded-circle overflow-hidden object-fit-cover"
-                  data-hj-suppress="true"
-                  src="http://localhost:18000/media/profile-images/d2a9bdc2ba165dcefc73265c54bf9a20_500.jpg?v=1552495012"
-                />
-              </div>
-              <div
-                class="profile-avatar-button"
+                className="profile-avatar-menu-container"
               >
                 <div
-                  class="pgn__dropdown pgn__dropdown-light dropdown"
-                  data-testid="dropdown"
+                  className="dropdown"
                 >
                   <button
-                    aria-expanded="false"
-                    aria-haspopup="true"
-                    class="btn-icon btn-icon-inverse-primary btn-icon-md btn-icon-inverse-primary-active shadow-sm pgn__dropdown-toggle-iconbutton"
-                    id="dropdown-toggle-with-iconbutton"
+                    aria-expanded={false}
+                    aria-haspopup={true}
+                    className="dropdown-toggle btn btn-primary"
+                    disabled={false}
+                    onClick={[Function]}
                     type="button"
                   >
-                    <span
-                      class="btn-icon__icon-container"
-                    >
-                      <span
-                        class="pgn__icon btn-icon__icon"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          role="img"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"
-                            fill="currentColor"
-                          />
-                          <path
-                            d="M9 2 7.17 4H2v16h20V4h-5.17L15 2H9Zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5Z"
-                            fill="currentColor"
-                          />
-                        </svg>
-                      </span>
-                    </span>
+                    Change
                   </button>
                 </div>
               </div>
-              <form
-                enctype="multipart/form-data"
-              >
-                <input
-                  accept=".jpg, .jpeg, .png"
-                  class="d-none form-control-file"
-                  id="photo-file"
-                  name="file"
-                  type="file"
-                />
-              </form>
+              <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>
-            <div
-              class="col h-100 w-100 m-0 p-0 justify-content-start align-items-start"
+            <form
+              encType="multipart/form-data"
+              onSubmit={[Function]}
             >
-              <p
-                class="row m-0 font-weight-bold text-truncate text-primary-500 h3"
-              >
-                staff
-              </p>
-              <p
-                class="row pt-2 text-gray-800 font-weight-normal m-0 p"
-              >
-                Lemon Seltzer
-              </p>
-              <div
-                class="row pt-2 m-0 g-1rem"
-              >
-                <span
-                  class="small mb-0 text-gray-800"
-                >
-                  Member since 
-                  <span
-                    class="font-weight-bold"
-                  >
-                     
-                    2017
-                     
-                  </span>
-                </span>
-                <span
-                  class="small m-0 text-gray-800"
-                >
-                  <span
-                    class="font-weight-bold"
-                  >
-                    1
-                  </span>
-                   certifications
-                </span>
-              </div>
-            </div>
-            <div
-              class="p-0  col-auto"
-            />
+              <input
+                accept=".jpg, .jpeg, .png"
+                className="d-none form-control-file"
+                id="photo-file"
+                name="file"
+                onChange={[Function]}
+                type="file"
+              />
+            </form>
           </div>
         </div>
+      </div>
+      <div
+        className="col pl-0"
+      >
         <div
-          class="ml-auto"
+          className="d-md-none"
+        >
+          <span
+            data-hj-suppress={true}
+          >
+            <h1
+              className="h2 mb-0 font-weight-bold"
+            >
+              staff
+            </h1>
+            <p
+              className="mb-0"
+            >
+              <span>
+                Member since 
+                <span>
+                  2017
+                </span>
+              </span>
+            </p>
+            <hr
+              className="d-none d-md-block"
+            />
+          </span>
+        </div>
+        <div
+          className="d-none d-md-block float-right"
         />
       </div>
     </div>
     <div
-      class="col d-inline-flex h-100 w-100 align-items-start justify-content-start g-3rem px-120px py-6"
+      className="row"
     >
       <div
-        class="w-100 p-0"
+        className="col-md-4 col-lg-4"
       >
         <div
-          class="col justify-content-start align-items-start p-0"
+          className="d-none d-md-block mb-4"
         >
-          <div
-            class="col align-self-stretch height-42px justify-content-start align-items-start p-0"
+          <span
+            data-hj-suppress={true}
           >
-            <p
-              class="font-weight-bold text-primary-500 m-0 h2"
+            <h1
+              className="h2 mb-0 font-weight-bold"
             >
-              Profile information
+              staff
+            </h1>
+            <p
+              className="mb-0"
+            >
+              <span>
+                Member since 
+                <span>
+                  2017
+                </span>
+              </span>
             </p>
-          </div>
+            <hr
+              className="d-none d-md-block"
+            />
+          </span>
         </div>
         <div
-          class="row m-0 px-0 w-100 d-inline-flex align-items-start justify-content-start pt-5.5"
+          className="d-md-none mb-4"
+        />
+        <div
+          className="pgn-transition-replace-group position-relative mb-5"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
           <div
-            class="col p-0 col-6"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
-              class="m-0"
+              className="editable-item-header mb-2"
             >
-              <div
-                class="row m-0 pb-1.5 align-items-center"
+              <h2
+                className="edit-section-header"
+                id={null}
               >
-                <p
-                  class="h5 font-weight-bold m-0"
-                  data-hj-suppress="true"
+                Full Name
+                <button
+                  className="float-right px-0 btn btn-link btn-sm"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "marginTop": "-.35rem",
+                    }
+                  }
+                  type="button"
                 >
-                  Username
-                </p>
-                <svg
-                  class="m-0 info-icon"
-                  fill="none"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M11 7h2v2h-2V7Zm0 4h2v6h-2v-6Zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8Z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </div>
-              <h4
-                class="edit-section-header text-gray-700"
-              >
-                staff
-              </h4>
-            </div>
-            <div
-              class="pgn-transition-replace-group position-relative pt-40px"
-            >
-              <div
-                style="padding: .1px 0px;"
-              >
-                <div
-                  class="row m-0 pb-1.5 align-items-center"
-                >
-                  <p
-                    class="h5 font-weight-bold m-0"
-                    data-hj-suppress="true"
-                  >
-                    Full name
-                  </p>
                   <svg
-                    class="m-0 info-icon"
-                    fill="none"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
+                    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="M11 7h2v2h-2V7Zm0 4h2v6h-2v-6Zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8Z"
+                      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>
-                </div>
-                <div
-                  class="row m-0 p-0 d-flex flex-nowrap align-items-center"
-                >
-                  <div
-                    class="m-0 p-0 col-auto"
-                  >
-                    <h4
-                      class="edit-section-header text-gray-700"
-                    >
-                      Lemon Seltzer
-                    </h4>
-                  </div>
-                  <div
-                    class="col-auto m-0 p-0 d-flex align-items-center col-auto"
-                  >
-                    <button
-                      class="p-1.5 btn btn-link btn-sm"
-                      type="button"
-                    >
-                      <svg
-                        class="text-gray-700"
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m14.06 9.02.92.92L5.92 19H5v-.92l9.06-9.06ZM17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83a.996.996 0 0 0 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29Zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75Z"
-                          fill="currentColor"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-                <div
-                  class="row m-0 p-0"
-                >
-                  <p
-                    class="mb-0"
-                  >
-                    <span
-                      class="ml-auto small text-muted"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="svg-inline--fa fa-eye-slash "
-                        data-icon="eye-slash"
-                        data-prefix="far"
-                        focusable="false"
-                        role="img"
-                        viewBox="0 0 640 512"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm9.4 130.3C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5l-41.9-33zM192 256c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5z"
-                          fill="currentColor"
-                        />
-                      </svg>
-                       
-                      Just me
-                    </span>
-                  </p>
-                </div>
-              </div>
-            </div>
-            <div
-              class="pgn-transition-replace-group position-relative pt-40px"
-            >
-              <div
-                style="padding: .1px 0px;"
+                  Edit
+                </button>
+              </h2>
+              <p
+                className="mb-0"
               >
-                <p
-                  class="h5 font-weight-bold m-0 pb-1.5"
-                  data-hj-suppress="true"
+                <span
+                  className="ml-auto small text-muted"
                 >
-                  Country
-                </p>
-                <div
-                  class="row m-0 p-0 d-flex flex-nowrap align-items-center"
-                >
-                  <div
-                    class="m-0 p-0 col-auto"
+                  <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"
                   >
-                    <h4
-                      class="edit-section-header text-gray-700"
-                    >
-                      Montenegro
-                    </h4>
-                  </div>
-                  <div
-                    class="col-auto m-0 p-0 d-flex align-items-center col-auto"
-                  >
-                    <button
-                      class="p-1.5 btn btn-link btn-sm"
-                      type="button"
-                    >
-                      <svg
-                        class="text-gray-700"
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m14.06 9.02.92.92L5.92 19H5v-.92l9.06-9.06ZM17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83a.996.996 0 0 0 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29Zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75Z"
-                          fill="currentColor"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-                <div
-                  class="row m-0 p-0"
-                >
-                  <p
-                    class="mb-0"
-                  >
-                    <span
-                      class="ml-auto small text-muted"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="svg-inline--fa fa-eye "
-                        data-icon="eye"
-                        data-prefix="far"
-                        focusable="false"
-                        role="img"
-                        viewBox="0 0 576 512"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
-                          fill="currentColor"
-                        />
-                      </svg>
-                       
-                      Everyone on localhost
-                    </span>
-                  </p>
-                </div>
-              </div>
+                    <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>
-            <div
-              class="pgn-transition-replace-group position-relative pt-40px"
+            <p
+              className="h5"
+              data-hj-suppress={true}
             >
-              <div
-                style="padding: .1px 0px;"
-              >
-                <p
-                  class="h5 font-weight-bold m-0 pb-1.5"
-                  data-hj-suppress="true"
-                >
-                  Primary language spoken
-                </p>
-                <div
-                  class="row m-0 p-0 d-flex flex-nowrap align-items-center"
-                >
-                  <div
-                    class="m-0 p-0 col-auto"
-                  >
-                    <h4
-                      class="edit-section-header text-gray-700"
-                    >
-                      Yoruba
-                    </h4>
-                  </div>
-                  <div
-                    class="col-auto m-0 p-0 d-flex align-items-center col-auto"
-                  >
-                    <button
-                      class="p-1.5 btn btn-link btn-sm"
-                      type="button"
-                    >
-                      <svg
-                        class="text-gray-700"
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m14.06 9.02.92.92L5.92 19H5v-.92l9.06-9.06ZM17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83a.996.996 0 0 0 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29Zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75Z"
-                          fill="currentColor"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-                <div
-                  class="row m-0 p-0"
-                >
-                  <p
-                    class="mb-0"
-                  >
-                    <span
-                      class="ml-auto small text-muted"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="svg-inline--fa fa-eye "
-                        data-icon="eye"
-                        data-prefix="far"
-                        focusable="false"
-                        role="img"
-                        viewBox="0 0 576 512"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
-                          fill="currentColor"
-                        />
-                      </svg>
-                       
-                      Everyone on localhost
-                    </span>
-                  </p>
-                </div>
-              </div>
-            </div>
-            <div
-              class="pgn-transition-replace-group position-relative pt-40px"
+              Lemon Seltzer
+            </p>
+            <small
+              className="form-text text-muted"
             >
-              <div
-                style="padding: .1px 0px;"
-              >
-                <p
-                  class="h5 font-weight-bold m-0 pb-1.5"
-                  data-hj-suppress="true"
-                >
-                  Education
-                </p>
-                <div
-                  class="row m-0 p-0 d-flex flex-nowrap align-items-center"
-                >
-                  <div
-                    class="m-0 p-0 col-auto"
-                  >
-                    <h4
-                      class="edit-section-header text-gray-700"
-                    >
-                      Elementary/primary school
-                    </h4>
-                  </div>
-                  <div
-                    class="col-auto m-0 p-0 d-flex align-items-center col-auto"
-                  >
-                    <button
-                      class="p-1.5 btn btn-link btn-sm"
-                      type="button"
-                    >
-                      <svg
-                        class="text-gray-700"
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m14.06 9.02.92.92L5.92 19H5v-.92l9.06-9.06ZM17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83a.996.996 0 0 0 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29Zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75Z"
-                          fill="currentColor"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-                <div
-                  class="row m-0 p-0"
-                >
-                  <p
-                    class="mb-0"
-                  >
-                    <span
-                      class="ml-auto small text-muted"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="svg-inline--fa fa-eye-slash "
-                        data-icon="eye-slash"
-                        data-prefix="far"
-                        focusable="false"
-                        role="img"
-                        viewBox="0 0 640 512"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm9.4 130.3C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5l-41.9-33zM192 256c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5z"
-                          fill="currentColor"
-                        />
-                      </svg>
-                       
-                      Just me
-                    </span>
-                  </p>
-                </div>
-              </div>
-            </div>
+              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
-            class="col m-0 pr-0 pl-40px col-6"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
-              class="pgn-transition-replace-group position-relative pt-0"
+              className="editable-item-header mb-2"
             >
-              <div
-                style="padding: .1px 0px;"
+              <h2
+                className="edit-section-header"
+                id={null}
               >
-                <p
-                  class="h5 font-weight-bold m-0 pb-1.5"
-                  data-hj-suppress="true"
+                Location
+                <button
+                  className="float-right px-0 btn btn-link btn-sm"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "marginTop": "-.35rem",
+                    }
+                  }
+                  type="button"
                 >
-                  Bio
-                </p>
-                <div
-                  class="row m-0 p-0 d-flex flex-nowrap align-items-center"
+                  <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"
                 >
-                  <div
-                    class="m-0 p-0 col-auto"
+                  <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"
                   >
-                    <h4
-                      class="edit-section-header text-gray-700"
-                    >
-                      This is my bio
-                    </h4>
-                  </div>
-                  <div
-                    class="col-auto m-0 p-0 d-flex align-items-center col-auto"
-                  >
-                    <button
-                      class="p-1.5 btn btn-link btn-sm"
-                      type="button"
-                    >
-                      <svg
-                        class="text-gray-700"
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m14.06 9.02.92.92L5.92 19H5v-.92l9.06-9.06ZM17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83a.996.996 0 0 0 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29Zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75Z"
-                          fill="currentColor"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-                <div
-                  class="row m-0 p-0"
-                >
-                  <p
-                    class="mb-0"
-                  >
-                    <span
-                      class="ml-auto small text-muted"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="svg-inline--fa fa-eye "
-                        data-icon="eye"
-                        data-prefix="far"
-                        focusable="false"
-                        role="img"
-                        viewBox="0 0 576 512"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
-                          fill="currentColor"
-                        />
-                      </svg>
-                       
-                      Everyone on localhost
-                    </span>
-                  </p>
-                </div>
-              </div>
+                    <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 edX
+                </span>
+              </p>
             </div>
-            <div
-              class="pgn-transition-replace-group position-relative p-0"
+            <p
+              className="h5"
+              data-hj-suppress={true}
             >
-              <div
-                style="padding: .1px 0px;"
+              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 edX
+                </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 edX
+                </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>
-                  <div>
-                    <div
-                      class="pt-40px"
+                  <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"
                     >
-                      <p
-                        class="h5 font-weight-bold m-0 pb-1.5"
-                        data-hj-suppress="true"
-                      >
-                        X
-                      </p>
-                      <div
-                        class="w-100 overflowWrap-breakWord"
-                      >
-                        <div
-                          class="row m-0 p-0 d-flex flex-nowrap align-items-center"
-                        >
-                          <div
-                            class="m-0 p-0 col-auto"
-                          >
-                            <h4
-                              class="edit-section-header text-gray-700"
-                            >
-                              https://www.twitter.com/ALOHA
-                            </h4>
-                          </div>
-                          <div
-                            class="col-auto m-0 p-0 d-flex align-items-center col-auto"
-                          >
-                            <button
-                              class="p-1.5 btn btn-link btn-sm"
-                              type="button"
-                            >
-                              <svg
-                                class="text-gray-700"
-                                fill="none"
-                                height="24"
-                                viewBox="0 0 24 24"
-                                width="24"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="m14.06 9.02.92.92L5.92 19H5v-.92l9.06-9.06ZM17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83a.996.996 0 0 0 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29Zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75Z"
-                                  fill="currentColor"
-                                />
-                              </svg>
-                            </button>
-                          </div>
-                        </div>
-                        <div
-                          class="row m-0 p-0"
-                        >
-                          <p
-                            class="mb-0"
-                          >
-                            <span
-                              class="ml-auto small text-muted"
-                            >
-                              <svg
-                                aria-hidden="true"
-                                class="svg-inline--fa fa-eye "
-                                data-icon="eye"
-                                data-prefix="far"
-                                focusable="false"
-                                role="img"
-                                viewBox="0 0 576 512"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
-                                  fill="currentColor"
-                                />
-                              </svg>
-                               
-                              Everyone on localhost
-                            </span>
-                          </p>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="pt-40px"
-                    >
-                      <p
-                        class="h5 font-weight-bold m-0 pb-1.5"
-                        data-hj-suppress="true"
-                      >
-                        Facebook
-                      </p>
-                      <div
-                        class="w-100 overflowWrap-breakWord"
-                      >
-                        <div
-                          class="row m-0 p-0 d-flex flex-nowrap align-items-center"
-                        >
-                          <div
-                            class="m-0 p-0 col-auto"
-                          >
-                            <h4
-                              class="edit-section-header text-gray-700"
-                            >
-                              https://www.facebook.com/aloha
-                            </h4>
-                          </div>
-                          <div
-                            class="col-auto m-0 p-0 d-flex align-items-center col-auto"
-                          >
-                            <button
-                              class="p-1.5 btn btn-link btn-sm"
-                              type="button"
-                            >
-                              <svg
-                                class="text-gray-700"
-                                fill="none"
-                                height="24"
-                                viewBox="0 0 24 24"
-                                width="24"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="m14.06 9.02.92.92L5.92 19H5v-.92l9.06-9.06ZM17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83a.996.996 0 0 0 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29Zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75Z"
-                                  fill="currentColor"
-                                />
-                              </svg>
-                            </button>
-                          </div>
-                        </div>
-                        <div
-                          class="row m-0 p-0"
-                        >
-                          <p
-                            class="mb-0"
-                          >
-                            <span
-                              class="ml-auto small text-muted"
-                            >
-                              <svg
-                                aria-hidden="true"
-                                class="svg-inline--fa fa-eye "
-                                data-icon="eye"
-                                data-prefix="far"
-                                focusable="false"
-                                role="img"
-                                viewBox="0 0 576 512"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
-                                  fill="currentColor"
-                                />
-                              </svg>
-                               
-                              Everyone on localhost
-                            </span>
-                          </p>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="pt-40px"
-                    >
-                      <p
-                        class="h5 font-weight-bold m-0 pb-1.5"
-                        data-hj-suppress="true"
-                      >
-                        LinkedIn
-                      </p>
-                      <div
-                        class="p-0 m-0"
-                      >
-                        <button
-                          class="p-0 text-left btn btn-link lh-36px"
-                          tabindex="0"
-                          type="button"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="svg-inline--fa fa-plus fa-xs mr-1"
-                            data-icon="plus"
-                            data-prefix="fas"
-                            focusable="false"
-                            role="img"
-                            viewBox="0 0 448 512"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z"
-                              fill="currentColor"
-                            />
-                          </svg>
-                          Add 
-                          LinkedIn
-                        </button>
-                      </div>
-                    </div>
-                  </div>
+                      <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>
-              </div>
-            </div>
+              </li>
+            </ul>
           </div>
         </div>
       </div>
-    </div>
-    <div
-      class="col container-fluid d-inline-flex bg-color-grey-FBFAF9 h-100 w-100 align-items-start justify-content-start g-3rem px-120px py-6"
-    >
-      <div>
+      <div
+        className="pt-md-3 col-md-8 col-lg-7 offset-lg-1"
+      >
         <div
-          class="col justify-content-start align-items-start g-5rem p-0"
+          className="pgn-transition-replace-group position-relative mb-5"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
           <div
-            class="col align-self-stretch height-42px justify-content-start align-items-start p-0"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
-            <p
-              class="font-weight-bold text-primary-500 m-0 h2"
+            <div
+              className="editable-item-header mb-2"
             >
-              Your certificates
-            </p>
-          </div>
-          <div
-            class="col justify-content-start align-items-start pt-2 p-0"
-          >
+              <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 edX
+                </span>
+              </p>
+            </div>
             <p
-              class="font-weight-normal text-gray-800 m-0 p-0 p"
+              className="lead"
+              data-hj-suppress={true}
             >
-              Your learner records information is only visible to you. Only your username and profile image are visible to others on localhost.
+              This is my bio
             </p>
           </div>
         </div>
         <div
-          class="col"
+          className="pgn-transition-replace-group position-relative mb-4"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
           <div
-            class="row align-items-center pt-5 g-3rem"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
-              class="col-auto d-flex align-items-center p-0"
+              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 edX
+                </span>
+              </p>
+            </div>
+            <div
+              className="row align-items-stretch"
             >
               <div
-                class="col certificate p-4 border-light-400 bg-light-200 w-100 h-100"
+                className="col col-sm-6 d-flex align-items-stretch"
               >
                 <div
-                  class="certificate-type-illustration"
-                  style="background-image: url(icon/mock/path);"
-                />
-                <div
-                  class="d-flex flex-column position-relative p-0 width-314px"
+                  className="card mb-4 certificate flex-grow-1"
                 >
                   <div
-                    class="w-100 color-black"
+                    className="certificate-type-illustration"
+                    style={
+                      Object {
+                        "backgroundImage": "url(icon/mock/path)",
+                      }
+                    }
+                  />
+                  <div
+                    className="card-body d-flex flex-column"
                   >
-                    <p
-                      class="mb-0 font-weight-normal small"
+                    <div
+                      className="card-title"
                     >
-                      Verified Certificate
+                      <p
+                        className="small mb-0"
+                      >
+                        Verified Certificate
+                      </p>
+                      <h4
+                        className="certificate-title"
+                      >
+                        edX Demonstration Course
+                      </h4>
+                    </div>
+                    <p
+                      className="small mb-0"
+                    >
+                      <span>
+                        From
+                      </span>
                     </p>
                     <p
-                      class="m-0 color-black h4"
-                    >
-                      edX Demonstration Course
-                    </p>
-                    <p
-                      class="mb-0 small"
-                    >
-                      From
-                    </p>
-                    <h5
-                      class="mb-0 color-black"
+                      className="h6 mb-4"
                     >
                       edX
-                    </h5>
-                    <p
-                      class="mb-0 small"
-                    >
-                      Completed on 
-                      3/4/2019
                     </p>
-                  </div>
-                  <div
-                    class="pt-3"
-                  >
-                    <a
-                      class="pgn__hyperlink default-link standalone-link btn btn-primary font-weight-normal px-4 py-10px"
-                      href="http://www.example.com/"
-                      rel="noopener noreferrer"
-                      target="_blank"
+                    <div
+                      className="flex-grow-1"
+                    />
+                    <p
+                      className="small mb-2"
                     >
-                      View Certificate
-                    </a>
+                      <span>
+                        Completed on 
+                        <span>
+                          3/4/2019
+                        </span>
+                      </span>
+                    </p>
+                    <div>
+                      <a
+                        className="btn btn-outline-primary"
+                        href="http://www.example.com/"
+                        onClick={[Function]}
+                        rel="noopener"
+                        target="_blank"
+                      >
+                        View Certificate
+                        <span
+                          className="d-inline-block align-text-top"
+                        >
+                           
+                          <span
+                            className="pgn__icon"
+                            style={
+                              Object {
+                                "height": "1em",
+                                "width": "1em",
+                              }
+                            }
+                          >
+                            <svg
+                              aria-hidden={true}
+                              aria-label=""
+                              fill="none"
+                              focusable={false}
+                              height={24}
+                              role="img"
+                              viewBox="0 0 24 24"
+                              width={24}
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M19 19H5V5h7V3H3v18h18v-9h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
+                                fill="currentColor"
+                              />
+                            </svg>
+                          </span>
+                        </span>
+                      </a>
+                    </div>
                   </div>
-                  <p
-                    class="mb-0 pt-3 small"
-                  >
-                    Credential ID 
-                  </p>
                 </div>
               </div>
             </div>

src/profile/data/actions.js

@@ -9,6 +9,8 @@ export const CLOSE_FORM = 'CLOSE_FORM';
 export const UPDATE_DRAFT = 'UPDATE_DRAFT';
 export const RESET_DRAFTS = 'RESET_DRAFTS';
 
+// FETCH PROFILE ACTIONS
+
 export const fetchProfile = username => ({
   type: FETCH_PROFILE.BASE,
   payload: { username },
@@ -23,20 +25,20 @@ export const fetchProfileSuccess = (
   preferences,
   courseCertificates,
   isAuthenticatedUserProfile,
-  countriesCodesList,
 ) => ({
   type: FETCH_PROFILE.SUCCESS,
   account,
   preferences,
   courseCertificates,
   isAuthenticatedUserProfile,
-  countriesCodesList,
 });
 
 export const fetchProfileReset = () => ({
   type: FETCH_PROFILE.RESET,
 });
 
+// SAVE PROFILE ACTIONS
+
 export const saveProfile = (formId, username) => ({
   type: SAVE_PROFILE.BASE,
   payload: {
@@ -66,6 +68,8 @@ export const saveProfileFailure = errors => ({
   payload: { errors },
 });
 
+// SAVE PROFILE PHOTO ACTIONS
+
 export const saveProfilePhoto = (username, formData) => ({
   type: SAVE_PROFILE_PHOTO.BASE,
   payload: {
@@ -92,6 +96,8 @@ export const saveProfilePhotoFailure = error => ({
   payload: { error },
 });
 
+// DELETE PROFILE PHOTO ACTIONS
+
 export const deleteProfilePhoto = username => ({
   type: DELETE_PROFILE_PHOTO.BASE,
   payload: {
@@ -112,6 +118,8 @@ export const deleteProfilePhotoReset = () => ({
   type: DELETE_PROFILE_PHOTO.RESET,
 });
 
+// FIELD STATE ACTIONS
+
 export const openForm = formId => ({
   type: OPEN_FORM,
   payload: {
@@ -126,6 +134,8 @@ export const closeForm = formId => ({
   },
 });
 
+// FORM STATE ACTIONS
+
 export const updateDraft = (name, value) => ({
   type: UPDATE_DRAFT,
   payload: {

src/profile/data/actions.test.js

@@ -1,4 +1,14 @@
 import {
+  openForm,
+  closeForm,
+  OPEN_FORM,
+  CLOSE_FORM,
+  SAVE_PROFILE,
+  saveProfileBegin,
+  saveProfileSuccess,
+  saveProfileFailure,
+  saveProfileReset,
+  saveProfile,
   SAVE_PROFILE_PHOTO,
   saveProfilePhotoBegin,
   saveProfilePhotoSuccess,
@@ -12,6 +22,76 @@ import {
   deleteProfilePhoto,
 } from './actions';
 
+describe('editable field actions', () => {
+  it('should create an open action', () => {
+    const expectedAction = {
+      type: OPEN_FORM,
+      payload: {
+        formId: 'name',
+      },
+    };
+    expect(openForm('name')).toEqual(expectedAction);
+  });
+
+  it('should create a closed action', () => {
+    const expectedAction = {
+      type: CLOSE_FORM,
+      payload: {
+        formId: 'name',
+      },
+    };
+    expect(closeForm('name')).toEqual(expectedAction);
+  });
+});
+
+describe('SAVE profile actions', () => {
+  it('should create an action to signal the start of a profile save', () => {
+    const expectedAction = {
+      type: SAVE_PROFILE.BASE,
+      payload: {
+        formId: 'name',
+      },
+    };
+    expect(saveProfile('name')).toEqual(expectedAction);
+  });
+
+  it('should create an action to signal user profile save success', () => {
+    const accountData = { name: 'Full Name' };
+    const preferencesData = { visibility: { name: 'private' } };
+    const expectedAction = {
+      type: SAVE_PROFILE.SUCCESS,
+      payload: {
+        account: accountData,
+        preferences: preferencesData,
+      },
+    };
+    expect(saveProfileSuccess(accountData, preferencesData)).toEqual(expectedAction);
+  });
+
+  it('should create an action to signal user profile save beginning', () => {
+    const expectedAction = {
+      type: SAVE_PROFILE.BEGIN,
+    };
+    expect(saveProfileBegin()).toEqual(expectedAction);
+  });
+
+  it('should create an action to signal user profile save success', () => {
+    const expectedAction = {
+      type: SAVE_PROFILE.RESET,
+    };
+    expect(saveProfileReset()).toEqual(expectedAction);
+  });
+
+  it('should create an action to signal user account save failure', () => {
+    const errors = ['Test failure'];
+    const expectedAction = {
+      type: SAVE_PROFILE.FAILURE,
+      payload: { errors },
+    };
+    expect(saveProfileFailure(errors)).toEqual(expectedAction);
+  });
+});
+
 describe('SAVE profile photo actions', () => {
   it('should create an action to signal the start of a profile photo save', () => {
     const formData = 'multipart form data';
@@ -43,7 +123,7 @@ describe('SAVE profile photo actions', () => {
     expect(saveProfilePhotoSuccess(newPhotoData)).toEqual(expectedAction);
   });
 
-  it('should create an action to signal user profile photo save reset', () => {
+  it('should create an action to signal user profile photo save success', () => {
     const expectedAction = {
       type: SAVE_PROFILE_PHOTO.RESET,
     };
@@ -89,10 +169,34 @@ describe('DELETE profile photo actions', () => {
     expect(deleteProfilePhotoSuccess(defaultPhotoData)).toEqual(expectedAction);
   });
 
-  it('should create an action to signal user profile photo deletion reset', () => {
+  it('should create an action to signal user profile photo deletion success', () => {
     const expectedAction = {
       type: DELETE_PROFILE_PHOTO.RESET,
     };
     expect(deleteProfilePhotoReset()).toEqual(expectedAction);
   });
 });
+
+describe('Editable field opening and closing actions', () => {
+  const formId = 'name';
+
+  it('should create an action to signal the opening a field', () => {
+    const expectedAction = {
+      type: OPEN_FORM,
+      payload: {
+        formId,
+      },
+    };
+    expect(openForm(formId)).toEqual(expectedAction);
+  });
+
+  it('should create an action to signal the closing a field', () => {
+    const expectedAction = {
+      type: CLOSE_FORM,
+      payload: {
+        formId,
+      },
+    };
+    expect(closeForm(formId)).toEqual(expectedAction);
+  });
+});

src/profile/data/constants.js

@@ -7,7 +7,7 @@ const EDUCATION_LEVELS = [
   'jhs',
   'el',
   'none',
-  'other',
+  'o',
 ];
 
 const SOCIAL = {
@@ -22,12 +22,7 @@ const SOCIAL = {
   },
 };
 
-const FIELD_LABELS = {
-  COUNTRY: 'country',
-};
-
 export {
   EDUCATION_LEVELS,
   SOCIAL,
-  FIELD_LABELS,
 };

src/profile/data/hooks.js

@@ -1,34 +0,0 @@
-import { breakpoints, useWindowSize } from '@openedx/paragon';
-import { getConfig } from '@edx/frontend-platform';
-
-export function useIsOnTabletScreen() {
-  const windowSize = useWindowSize();
-  return windowSize.width <= breakpoints.medium.minWidth;
-}
-
-export function useIsOnMobileScreen() {
-  const windowSize = useWindowSize();
-  return windowSize.width <= breakpoints.small.minWidth;
-}
-
-export function useIsVisibilityEnabled() {
-  return getConfig().DISABLE_VISIBILITY_EDITING !== 'true';
-}
-
-export function useHandleChange(changeHandler) {
-  return (e) => {
-    const { name, value } = e.target;
-    changeHandler(name, value);
-  };
-}
-
-export function useHandleSubmit(submitHandler, formId) {
-  return (e) => {
-    e.preventDefault();
-    submitHandler(formId);
-  };
-}
-
-export function useCloseOpenHandler(handler, formId) {
-  return () => handler(formId);
-}

src/profile/data/mock_data.js

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

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

@@ -1,84 +0,0 @@
-// This test file simply creates a contract that defines
-// expectations and correct responses from the Pact stub server.
-
-import path from 'path';
-
-import { PactV3, MatchersV3 } from '@pact-foundation/pact';
-
-import { initializeMockApp, getConfig, setConfig } from '@edx/frontend-platform';
-import { getAccount } from './services';
-
-const expectedUserInfo200 = {
-  username: 'staff',
-  email: 'staff@example.com',
-  bio: 'This is my bio',
-  name: 'Lemon Seltzer',
-  country: 'ME',
-  dateJoined: '2017-06-07T00:44:23Z',
-  isActive: true,
-  yearOfBirth: 1901,
-  languageProficiencies: [],
-  levelOfEducation: null,
-  profileImage: {},
-  socialLinks: [],
-};
-
-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

@@ -16,31 +16,15 @@ export const initialState = {
   currentlyEditingField: null,
   account: {
     socialLinks: [],
-    languageProficiencies: [],
-    name: '',
-    bio: '',
-    country: '',
-    levelOfEducation: '',
-    profileImage: {},
-    yearOfBirth: '',
-  },
-  preferences: {
-    visibilityName: '',
-    visibilityBio: '',
-    visibilityCountry: '',
-    visibilityLevelOfEducation: '',
-    visibilitySocialLinks: '',
-    visibilityLanguageProficiencies: '',
   },
+  preferences: {},
   courseCertificates: [],
   drafts: {},
   isLoadingProfile: true,
   isAuthenticatedUserProfile: false,
-  disabledCountries: ['RU'],
-  countriesCodesList: [],
 };
 
-const profilePage = (state = initialState, action = {}) => {
+const profilePage = (state = initialState, action) => {
   switch (action.type) {
     case FETCH_PROFILE.BEGIN:
       return {
@@ -53,17 +37,11 @@ const profilePage = (state = initialState, action = {}) => {
     case FETCH_PROFILE.SUCCESS:
       return {
         ...state,
-        account: {
-          ...state.account,
-          ...action.account,
-          socialLinks: action.account.socialLinks || [],
-          languageProficiencies: action.account.languageProficiencies || [],
-        },
+        account: action.account,
         preferences: action.preferences,
-        courseCertificates: action.courseCertificates || [],
+        courseCertificates: action.courseCertificates,
         isLoadingProfile: false,
         isAuthenticatedUserProfile: action.isAuthenticatedUserProfile,
-        countriesCodesList: action.countriesCodesList || [],
       };
     case SAVE_PROFILE.BEGIN:
       return {
@@ -76,28 +54,24 @@ const profilePage = (state = initialState, action = {}) => {
         ...state,
         saveState: 'complete',
         errors: {},
-        account: action.payload.account !== null ? {
-          ...state.account,
-          ...action.payload.account,
-          socialLinks: action.payload.account.socialLinks || [],
-          languageProficiencies: action.payload.account.languageProficiencies || [],
-        } : state.account,
+        // Account is always replaced completely.
+        account: action.payload.account !== null ? action.payload.account : state.account,
+        // Preferences changes get merged in.
         preferences: { ...state.preferences, ...action.payload.preferences },
       };
     case SAVE_PROFILE.FAILURE:
       return {
         ...state,
         saveState: 'error',
-        isLoadingProfile: false,
         errors: { ...state.errors, ...action.payload.errors },
       };
     case SAVE_PROFILE.RESET:
       return {
         ...state,
         saveState: null,
-        isLoadingProfile: false,
         errors: {},
       };
+
     case SAVE_PROFILE_PHOTO.BEGIN:
       return {
         ...state,
@@ -107,6 +81,7 @@ const profilePage = (state = initialState, action = {}) => {
     case SAVE_PROFILE_PHOTO.SUCCESS:
       return {
         ...state,
+        // Merge in new profile image data
         account: { ...state.account, profileImage: action.payload.profileImage },
         savePhotoState: 'complete',
         errors: {},
@@ -123,6 +98,7 @@ const profilePage = (state = initialState, action = {}) => {
         savePhotoState: null,
         errors: {},
       };
+
     case DELETE_PROFILE_PHOTO.BEGIN:
       return {
         ...state,
@@ -132,6 +108,7 @@ const profilePage = (state = initialState, action = {}) => {
     case DELETE_PROFILE_PHOTO.SUCCESS:
       return {
         ...state,
+        // Merge in new profile image data (should be empty or default image)
         account: { ...state.account, profileImage: action.payload.profileImage },
         savePhotoState: 'complete',
         errors: {},
@@ -148,11 +125,13 @@ const profilePage = (state = initialState, action = {}) => {
         savePhotoState: null,
         errors: {},
       };
+
     case UPDATE_DRAFT:
       return {
         ...state,
         drafts: { ...state.drafts, [action.payload.name]: action.payload.value },
       };
+
     case RESET_DRAFTS:
       return {
         ...state,
@@ -165,6 +144,7 @@ const profilePage = (state = initialState, action = {}) => {
         drafts: {},
       };
     case CLOSE_FORM:
+      // Only close if the field to close is undefined or matches the field that is currently open
       if (action.payload.formId === state.currentlyEditingField) {
         return {
           ...state,

src/profile/data/reducers.test.js

@@ -1,309 +0,0 @@
-import profilePage, { initialState } from './reducers';
-import {
-  SAVE_PROFILE,
-  SAVE_PROFILE_PHOTO,
-  DELETE_PROFILE_PHOTO,
-  CLOSE_FORM,
-  OPEN_FORM,
-  FETCH_PROFILE,
-  UPDATE_DRAFT,
-  RESET_DRAFTS,
-} from './actions';
-
-describe('profilePage reducer', () => {
-  it('should return the initial state by default', () => {
-    expect(profilePage(undefined, {})).toEqual(initialState);
-  });
-
-  describe('FETCH_PROFILE actions', () => {
-    it('should handle FETCH_PROFILE.BEGIN', () => {
-      const action = { type: FETCH_PROFILE.BEGIN };
-      const expectedState = {
-        ...initialState,
-      };
-      expect(profilePage(initialState, action)).toEqual(expectedState);
-    });
-
-    it('should handle FETCH_PROFILE.SUCCESS', () => {
-      const action = {
-        type: FETCH_PROFILE.SUCCESS,
-        account: {
-          name: 'John Doe',
-          bio: 'Software Engineer',
-          country: 'US',
-          levelOfEducation: 'bachelors',
-          socialLinks: [{ platform: 'twitter', link: 'twitter.com/johndoe' }],
-          languageProficiencies: [{ code: 'en', name: 'English' }],
-          profileImage: { url: 'profile.jpg' },
-          yearOfBirth: 1990,
-        },
-        preferences: {
-          visibilityName: 'public',
-          visibilityBio: 'public',
-          visibilityCountry: 'public',
-          visibilityLevelOfEducation: 'public',
-          visibilitySocialLinks: 'public',
-          visibilityLanguageProficiencies: 'public',
-        },
-        courseCertificates: ['cert1', 'cert2'],
-        isAuthenticatedUserProfile: true,
-        countriesCodesList: ['US', 'CA'],
-      };
-      const expectedState = {
-        ...initialState,
-        account: {
-          ...initialState.account,
-          ...action.account,
-          socialLinks: action.account.socialLinks,
-          languageProficiencies: action.account.languageProficiencies,
-        },
-        preferences: action.preferences,
-        courseCertificates: action.courseCertificates,
-        isLoadingProfile: false,
-        isAuthenticatedUserProfile: action.isAuthenticatedUserProfile,
-        countriesCodesList: action.countriesCodesList,
-      };
-      expect(profilePage(initialState, action)).toEqual(expectedState);
-    });
-  });
-
-  describe('SAVE_PROFILE actions', () => {
-    it('should handle SAVE_PROFILE.BEGIN', () => {
-      const action = { type: SAVE_PROFILE.BEGIN };
-      const expectedState = {
-        ...initialState,
-        saveState: 'pending',
-        errors: {},
-      };
-      expect(profilePage(initialState, action)).toEqual(expectedState);
-    });
-
-    it('should handle SAVE_PROFILE.SUCCESS', () => {
-      const action = {
-        type: SAVE_PROFILE.SUCCESS,
-        payload: {
-          account: {
-            name: 'Jane Doe',
-            bio: 'Updated bio',
-            socialLinks: [{ platform: 'linkedin', link: 'linkedin.com/janedoe' }],
-            languageProficiencies: [{ code: 'es', name: 'Spanish' }],
-          },
-          preferences: {
-            visibilityName: 'private',
-            visibilityBio: 'private',
-          },
-        },
-      };
-      const expectedState = {
-        ...initialState,
-        saveState: 'complete',
-        errors: {},
-        account: {
-          ...initialState.account,
-          ...action.payload.account,
-          socialLinks: action.payload.account.socialLinks,
-          languageProficiencies: action.payload.account.languageProficiencies,
-        },
-        preferences: {
-          ...initialState.preferences,
-          ...action.payload.preferences,
-        },
-      };
-      expect(profilePage(initialState, action)).toEqual(expectedState);
-    });
-
-    it('should handle SAVE_PROFILE.FAILURE', () => {
-      const action = {
-        type: SAVE_PROFILE.FAILURE,
-        payload: { errors: { save: 'Failed to save profile' } },
-      };
-      const expectedState = {
-        ...initialState,
-        saveState: 'error',
-        isLoadingProfile: false,
-        errors: { save: action.payload.errors.save },
-      };
-      expect(profilePage(initialState, action)).toEqual(expectedState);
-    });
-
-    it('should handle SAVE_PROFILE.RESET', () => {
-      const action = { type: SAVE_PROFILE.RESET };
-      const expectedState = {
-        ...initialState,
-        saveState: null,
-        isLoadingProfile: false,
-        errors: {},
-      };
-      expect(profilePage(initialState, action)).toEqual(expectedState);
-    });
-  });
-
-  describe('SAVE_PROFILE_PHOTO actions', () => {
-    it('should handle SAVE_PROFILE_PHOTO.BEGIN', () => {
-      const action = { type: SAVE_PROFILE_PHOTO.BEGIN };
-      const expectedState = {
-        ...initialState,
-        savePhotoState: 'pending',
-        errors: {},
-      };
-      expect(profilePage(initialState, action)).toEqual(expectedState);
-    });
-
-    it('should handle SAVE_PROFILE_PHOTO.SUCCESS', () => {
-      const action = {
-        type: SAVE_PROFILE_PHOTO.SUCCESS,
-        payload: { profileImage: { url: 'new-image-url.jpg' } },
-      };
-      const expectedState = {
-        ...initialState,
-        account: { ...initialState.account, profileImage: action.payload.profileImage },
-        savePhotoState: 'complete',
-        errors: {},
-      };
-      expect(profilePage(initialState, action)).toEqual(expectedState);
-    });
-
-    it('should handle SAVE_PROFILE_PHOTO.FAILURE', () => {
-      const action = {
-        type: SAVE_PROFILE_PHOTO.FAILURE,
-        payload: { error: 'Photo upload failed' },
-      };
-      const expectedState = {
-        ...initialState,
-        savePhotoState: 'error',
-        errors: { photo: action.payload.error },
-      };
-      expect(profilePage(initialState, action)).toEqual(expectedState);
-    });
-
-    it('should handle SAVE_PROFILE_PHOTO.RESET', () => {
-      const action = { type: SAVE_PROFILE_PHOTO.RESET };
-      const expectedState = {
-        ...initialState,
-        savePhotoState: null,
-        errors: {},
-      };
-      expect(profilePage(initialState, action)).toEqual(expectedState);
-    });
-  });
-
-  describe('DELETE_PROFILE_PHOTO actions', () => {
-    it('should handle DELETE_PROFILE_PHOTO.BEGIN', () => {
-      const action = { type: DELETE_PROFILE_PHOTO.BEGIN };
-      const expectedState = {
-        ...initialState,
-        savePhotoState: 'pending',
-        errors: {},
-      };
-      expect(profilePage(initialState, action)).toEqual(expectedState);
-    });
-
-    it('should handle DELETE_PROFILE_PHOTO.SUCCESS', () => {
-      const action = {
-        type: DELETE_PROFILE_PHOTO.SUCCESS,
-        payload: { profileImage: { url: 'default-image-url.jpg' } },
-      };
-      const expectedState = {
-        ...initialState,
-        account: { ...initialState.account, profileImage: action.payload.profileImage },
-        savePhotoState: 'complete',
-        errors: {},
-      };
-      expect(profilePage(initialState, action)).toEqual(expectedState);
-    });
-
-    it('should handle DELETE_PROFILE_PHOTO.FAILURE', () => {
-      const action = {
-        type: DELETE_PROFILE_PHOTO.FAILURE,
-        payload: { errors: { delete: 'Failed to delete photo' } },
-      };
-      const expectedState = {
-        ...initialState,
-        savePhotoState: 'error',
-        errors: { delete: action.payload.errors.delete },
-      };
-      expect(profilePage(initialState, action)).toEqual(expectedState);
-    });
-
-    it('should handle DELETE_PROFILE_PHOTO.RESET', () => {
-      const action = { type: DELETE_PROFILE_PHOTO.RESET };
-      const expectedState = {
-        ...initialState,
-        savePhotoState: null,
-        errors: {},
-      };
-      expect(profilePage(initialState, action)).toEqual(expectedState);
-    });
-  });
-
-  describe('Draft and Form actions', () => {
-    it('should handle UPDATE_DRAFT', () => {
-      const action = {
-        type: UPDATE_DRAFT,
-        payload: { name: 'bio', value: 'New bio draft' },
-      };
-      const expectedState = {
-        ...initialState,
-        drafts: { bio: 'New bio draft' },
-      };
-      expect(profilePage(initialState, action)).toEqual(expectedState);
-    });
-
-    it('should handle RESET_DRAFTS', () => {
-      const initialStateWithDrafts = {
-        ...initialState,
-        drafts: { bio: 'New bio draft', name: 'New name' },
-      };
-      const action = { type: RESET_DRAFTS };
-      const expectedState = {
-        ...initialStateWithDrafts,
-        drafts: {},
-      };
-      expect(profilePage(initialStateWithDrafts, action)).toEqual(expectedState);
-    });
-
-    it('should handle OPEN_FORM', () => {
-      const action = {
-        type: OPEN_FORM,
-        payload: { formId: 'bioForm' },
-      };
-      const expectedState = {
-        ...initialState,
-        currentlyEditingField: 'bioForm',
-        drafts: {},
-      };
-      expect(profilePage(initialState, action)).toEqual(expectedState);
-    });
-
-    it('should handle CLOSE_FORM when formId matches currentlyEditingField', () => {
-      const initialStateWithForm = {
-        ...initialState,
-        currentlyEditingField: 'bioForm',
-        drafts: { bio: 'New bio draft' },
-      };
-      const action = {
-        type: CLOSE_FORM,
-        payload: { formId: 'bioForm' },
-      };
-      const expectedState = {
-        ...initialStateWithForm,
-        currentlyEditingField: null,
-        drafts: {},
-      };
-      expect(profilePage(initialStateWithForm, action)).toEqual(expectedState);
-    });
-
-    it('should not handle CLOSE_FORM when formId does not match currentlyEditingField', () => {
-      const initialStateWithForm = {
-        ...initialState,
-        currentlyEditingField: 'bioForm',
-        drafts: { bio: 'New bio draft' },
-      };
-      const action = {
-        type: CLOSE_FORM,
-        payload: { formId: 'nameForm' },
-      };
-      expect(profilePage(initialStateWithForm, action)).toEqual(initialStateWithForm);
-    });
-  });
-});

src/profile/data/sagas.js

@@ -22,12 +22,13 @@ import {
   resetDrafts,
   saveProfileBegin,
   saveProfileFailure,
+  saveProfilePhotoBegin,
+  saveProfilePhotoFailure,
+  saveProfilePhotoReset,
+  saveProfilePhotoSuccess,
   saveProfileReset,
   saveProfileSuccess,
   SAVE_PROFILE,
-  saveProfilePhotoBegin,
-  saveProfilePhotoReset,
-  saveProfilePhotoSuccess,
   SAVE_PROFILE_PHOTO,
 } from './actions';
 import { handleSaveProfileSelector, userAccountSelector } from './selectors';
@@ -37,53 +38,39 @@ export function* handleFetchProfile(action) {
   const { username } = action.payload;
   const userAccount = yield select(userAccountSelector);
   const isAuthenticatedUserProfile = username === getAuthenticatedUser().username;
+  // Default our data assuming the account is the current user's account.
   let preferences = {};
   let account = userAccount;
   let courseCertificates = null;
-  let countriesCodesList = [];
 
   try {
     yield put(fetchProfileBegin());
 
+    // Depending on which profile we're loading, we need to make different calls.
     const calls = [
       call(ProfileApiService.getAccount, username),
       call(ProfileApiService.getCourseCertificates, username),
-      call(ProfileApiService.getCountryList),
     ];
 
     if (isAuthenticatedUserProfile) {
+      // If the profile is for the current user, get their preferences.
+      // We don't need them for other users.
       calls.push(call(ProfileApiService.getPreferences, username));
     }
 
+    // Make all the calls in parallel.
     const result = yield all(calls);
 
     if (isAuthenticatedUserProfile) {
-      [account, courseCertificates, countriesCodesList, preferences] = result;
+      [account, courseCertificates, preferences] = result;
     } else {
-      [account, courseCertificates, countriesCodesList] = result;
+      [account, courseCertificates] = result;
     }
-
-    if (isAuthenticatedUserProfile && result[0].accountPrivacy === 'all_users') {
-      yield call(ProfileApiService.patchPreferences, action.payload.username, {
-        account_privacy: 'custom',
-        'visibility.name': 'all_users',
-        'visibility.bio': 'all_users',
-        'visibility.course_certificates': 'all_users',
-        'visibility.country': 'all_users',
-        'visibility.date_joined': 'all_users',
-        'visibility.level_of_education': 'all_users',
-        'visibility.language_proficiencies': 'all_users',
-        'visibility.social_links': 'all_users',
-        'visibility.time_zone': 'all_users',
-      });
-    }
-
     yield put(fetchProfileSuccess(
       account,
       preferences,
       courseCertificates,
       isAuthenticatedUserProfile,
-      countriesCodesList,
     ));
 
     yield put(fetchProfileReset());
@@ -102,6 +89,7 @@ export function* handleSaveProfile(action) {
 
     const accountDrafts = pick(drafts, [
       'bio',
+      'courseCertificates',
       'country',
       'levelOfEducation',
       'languageProficiencies',
@@ -111,6 +99,7 @@ export function* handleSaveProfile(action) {
 
     const preferencesDrafts = pick(drafts, [
       'visibilityBio',
+      'visibilityCourseCertificates',
       'visibilityCountry',
       'visibilityLevelOfEducation',
       'visibilityLanguageProficiencies',
@@ -124,6 +113,7 @@ export function* handleSaveProfile(action) {
 
     yield put(saveProfileBegin());
     let accountResult = null;
+    // Build the visibility drafts into a structure the API expects.
 
     if (Object.keys(accountDrafts).length > 0) {
       accountResult = yield call(
@@ -133,14 +123,17 @@ export function* handleSaveProfile(action) {
       );
     }
 
-    let preferencesResult = preferences;
+    let preferencesResult = preferences; // assume it hasn't changed.
     if (Object.keys(preferencesDrafts).length > 0) {
       yield call(ProfileApiService.patchPreferences, action.payload.username, preferencesDrafts);
       // TODO: Temporary deoptimization since the patchPreferences call doesn't return anything.
-
+      // Remove this second call once we can get a result from the one above.
       preferencesResult = yield call(ProfileApiService.getPreferences, action.payload.username);
     }
 
+    // The account result is returned from the server.
+    // The preferences draft is valid if the server didn't complain, so
+    // pass it through directly.
     yield put(saveProfileSuccess(accountResult, preferencesResult));
     yield delay(1000);
     yield put(closeForm(action.payload.formId));
@@ -166,7 +159,12 @@ export function* handleSaveProfilePhoto(action) {
     yield put(saveProfilePhotoSuccess(photoResult));
     yield put(saveProfilePhotoReset());
   } catch (e) {
-    yield put(saveProfilePhotoReset());
+    if (e.processedData) {
+      yield put(saveProfilePhotoFailure(e.processedData));
+    } else {
+      yield put(saveProfilePhotoReset());
+      throw e;
+    }
   }
 }
 
@@ -180,6 +178,7 @@ export function* handleDeleteProfilePhoto(action) {
     yield put(deleteProfilePhotoReset());
   } catch (e) {
     yield put(deleteProfilePhotoReset());
+    throw e;
   }
 }
 

src/profile/data/sagas.test.js

@@ -19,13 +19,13 @@ jest.mock('./services', () => ({
   getPreferences: jest.fn(),
   getAccount: jest.fn(),
   getCourseCertificates: jest.fn(),
-  getCountryList: jest.fn(),
 }));
 
 jest.mock('@edx/frontend-platform/auth', () => ({
   getAuthenticatedUser: jest.fn(),
 }));
 
+// RootSaga and ProfileApiService must be imported AFTER the mock above.
 /* eslint-disable import/first */
 import profileSaga, {
   handleFetchProfile,
@@ -68,18 +68,17 @@ describe('RootSaga', () => {
       const action = profileActions.fetchProfile('gonzo');
       const gen = handleFetchProfile(action);
 
-      const result = [userAccount, [1, 2, 3], [], { preferences: 'stuff' }];
+      const result = [userAccount, [1, 2, 3], { preferences: 'stuff' }];
 
       expect(gen.next().value).toEqual(select(userAccountSelector));
       expect(gen.next(selectorData).value).toEqual(put(profileActions.fetchProfileBegin()));
       expect(gen.next().value).toEqual(all([
         call(ProfileApiService.getAccount, 'gonzo'),
         call(ProfileApiService.getCourseCertificates, 'gonzo'),
-        call(ProfileApiService.getCountryList),
         call(ProfileApiService.getPreferences, 'gonzo'),
       ]));
       expect(gen.next(result).value)
-        .toEqual(put(profileActions.fetchProfileSuccess(userAccount, result[3], result[1], true, [])));
+        .toEqual(put(profileActions.fetchProfileSuccess(userAccount, result[2], result[1], true)));
       expect(gen.next().value).toEqual(put(profileActions.fetchProfileReset()));
       expect(gen.next().value).toBeUndefined();
     });
@@ -89,7 +88,6 @@ describe('RootSaga', () => {
         username: 'gonzo',
         other: 'data',
       };
-      const countriesCodesList = [{ code: 'AX' }, { code: 'AL' }];
       getAuthenticatedUser.mockReturnValue(userAccount);
       const selectorData = {
         userAccount,
@@ -98,17 +96,16 @@ describe('RootSaga', () => {
       const action = profileActions.fetchProfile('booyah');
       const gen = handleFetchProfile(action);
 
-      const result = [{}, [1, 2, 3], countriesCodesList];
+      const result = [{}, [1, 2, 3]];
 
       expect(gen.next().value).toEqual(select(userAccountSelector));
       expect(gen.next(selectorData).value).toEqual(put(profileActions.fetchProfileBegin()));
       expect(gen.next().value).toEqual(all([
         call(ProfileApiService.getAccount, 'booyah'),
         call(ProfileApiService.getCourseCertificates, 'booyah'),
-        call(ProfileApiService.getCountryList),
       ]));
       expect(gen.next(result).value)
-        .toEqual(put(profileActions.fetchProfileSuccess(result[0], {}, result[1], false, countriesCodesList)));
+        .toEqual(put(profileActions.fetchProfileSuccess(result[0], {}, result[1], false)));
       expect(gen.next().value).toEqual(put(profileActions.fetchProfileReset()));
       expect(gen.next().value).toBeUndefined();
     });
@@ -135,6 +132,8 @@ describe('RootSaga', () => {
       expect(gen.next().value).toEqual(call(ProfileApiService.patchProfile, 'my username', {
         name: 'Full Name',
       }));
+      // The library would supply the result of the above call
+      // as the parameter to the NEXT yield.  Here:
       expect(gen.next(profile).value).toEqual(put(profileActions.saveProfileSuccess(profile, {})));
       expect(gen.next().value).toEqual(delay(1000));
       expect(gen.next().value).toEqual(put(profileActions.closeForm('ze form id')));
@@ -163,67 +162,5 @@ describe('RootSaga', () => {
       expect(result.value).toEqual(put(profileActions.saveProfileFailure({ uhoh: 'not good' })));
       expect(gen.next().value).toBeUndefined();
     });
-
-    it('should reset profile if error has no processedData', () => {
-      const action = profileActions.saveProfile('formid', 'user1');
-      const gen = handleSaveProfile(action);
-
-      expect(gen.next().value).toEqual(select(handleSaveProfileSelector));
-      expect(gen.next(selectorData).value).toEqual(put(profileActions.saveProfileBegin()));
-
-      const err = new Error('oops');
-      const result = gen.throw(err);
-      expect(result.value).toEqual(put(profileActions.saveProfileReset()));
-    });
-  });
-
-  describe('handleSaveProfilePhoto', () => {
-    it('should save profile photo successfully', () => {
-      const action = profileActions.saveProfilePhoto('user1', { some: 'formdata' });
-      const gen = handleSaveProfilePhoto(action);
-      const fakePhoto = { url: 'photo.jpg' };
-
-      expect(gen.next().value).toEqual(put(profileActions.saveProfilePhotoBegin()));
-      expect(gen.next().value).toEqual(call(ProfileApiService.postProfilePhoto, 'user1', { some: 'formdata' }));
-      expect(gen.next(fakePhoto).value).toEqual(put(profileActions.saveProfilePhotoSuccess(fakePhoto)));
-      expect(gen.next().value).toEqual(put(profileActions.saveProfilePhotoReset()));
-      expect(gen.next().value).toBeUndefined();
-    });
-
-    it('should reset photo state on error', () => {
-      const action = profileActions.saveProfilePhoto('user1', {});
-      const gen = handleSaveProfilePhoto(action);
-
-      expect(gen.next().value).toEqual(put(profileActions.saveProfilePhotoBegin()));
-
-      const err = new Error('fail');
-
-      expect(gen.throw(err).value).toEqual(put(profileActions.saveProfilePhotoReset()));
-      expect(gen.next().done).toBe(true);
-    });
-  });
-
-  describe('handleDeleteProfilePhoto', () => {
-    it('should delete profile photo successfully', () => {
-      const action = profileActions.deleteProfilePhoto('user1');
-      const gen = handleDeleteProfilePhoto(action);
-      const fakeResult = { ok: true };
-
-      expect(gen.next().value).toEqual(put(profileActions.deleteProfilePhotoBegin()));
-      expect(gen.next().value).toEqual(call(ProfileApiService.deleteProfilePhoto, 'user1'));
-      expect(gen.next(fakeResult).value).toEqual(put(profileActions.deleteProfilePhotoSuccess(fakeResult)));
-      expect(gen.next().value).toEqual(put(profileActions.deleteProfilePhotoReset()));
-      expect(gen.next().value).toBeUndefined();
-    });
-    it('should reset photo state on error', () => {
-      const action = profileActions.saveProfilePhoto('user1', {});
-      const gen = handleSaveProfilePhoto(action);
-
-      expect(gen.next().value).toEqual(put(profileActions.saveProfilePhotoBegin()));
-      const err = new Error('fail');
-      expect(gen.throw(err).value).toEqual(put(profileActions.saveProfilePhotoReset()));
-
-      expect(gen.next().done).toBe(true);
-    });
   });
 });

src/profile/data/selectors.js

@@ -5,22 +5,24 @@ import {
   getCountryList,
   getCountryMessages,
   getLanguageMessages,
-} from '@edx/frontend-platform/i18n';
+} from '@edx/frontend-platform/i18n'; // eslint-disable-line
 
 export const formIdSelector = (state, props) => props.formId;
 export const userAccountSelector = state => state.userAccount;
+
 export const profileAccountSelector = state => state.profilePage.account;
 export const profileDraftsSelector = state => state.profilePage.drafts;
 export const accountPrivacySelector = state => state.profilePage.preferences.accountPrivacy;
 export const profilePreferencesSelector = state => state.profilePage.preferences;
 export const profileCourseCertificatesSelector = state => state.profilePage.courseCertificates;
+export const profileAccountDraftsSelector = state => state.profilePage.accountDrafts;
+export const profileVisibilityDraftsSelector = state => state.profilePage.visibilityDrafts;
 export const saveStateSelector = state => state.profilePage.saveState;
 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 countriesCodesListSelector = state => state.profilePage.countriesCodesList;
 
 export const editableFormModeSelector = createSelector(
   profileAccountSelector,
@@ -29,11 +31,19 @@ export const editableFormModeSelector = createSelector(
   formIdSelector,
   currentlyEditingFieldSelector,
   (account, isAuthenticatedUserProfile, certificates, formId, currentlyEditingField) => {
+    // If the prop doesn't exist, that means it hasn't been set (for the current user's profile)
+    // or is being hidden from us (for other users' profiles)
     let propExists = account[formId] != null && account[formId].length > 0;
-    propExists = formId === 'certificates' ? certificates.length > 0 : propExists;
-    if (!isAuthenticatedUserProfile) {
-      return 'static';
+    propExists = formId === 'certificates' ? certificates.length > 0 : propExists; // overwrite for certificates
+    // If this isn't the current user's profile or if
+    // the current user has no age set / under 13 ...
+    if (!isAuthenticatedUserProfile || account.requiresParentalConsent) {
+      // then there are only two options: static or nothing.
+      // We use 'null' as a return value because the consumers of
+      // getMode render nothing at all on a mode of null.
+      return propExists ? 'static' : null;
     }
+    // Otherwise, if this is the current user's profile...
     if (formId === currentlyEditingField) {
       return 'editing';
     }
@@ -54,10 +64,12 @@ export const accountDraftsFieldSelector = createSelector(
 
 export const visibilityDraftsFieldSelector = createSelector(
   formIdSelector,
-  profileDraftsSelector,
-  (formId, drafts) => drafts[`visibility${formId.charAt(0).toUpperCase() + formId.slice(1)}`],
+  profileVisibilityDraftsSelector,
+  (formId, visibilityDrafts) => visibilityDrafts[formId],
 );
 
+// Note: Error messages are delivered from the server
+// localized according to a user's account settings
 export const formErrorSelector = createSelector(
   accountErrorsSelector,
   formIdSelector,
@@ -75,6 +87,11 @@ export const editableFormSelector = createSelector(
   }),
 );
 
+// Because this selector has no input selectors, it will only be evaluated once.  This is fine
+// for now because we don't allow users to change the locale after page load.
+// Once we DO allow this, we should create an actual action which dispatches the locale into redux,
+// then we can modify this to get the locale from state rather than from getLocale() directly.
+// Once we do that, this will work as expected and be re-evaluated when the locale changes.
 export const localeSelector = () => getLocale();
 export const countryMessagesSelector = createSelector(
   localeSelector,
@@ -92,14 +109,7 @@ export const sortedLanguagesSelector = createSelector(
 
 export const sortedCountriesSelector = createSelector(
   localeSelector,
-  countriesCodesListSelector,
-  profileAccountSelector,
-  (locale, countriesCodesList, profileAccount) => {
-    const countryList = getCountryList(locale);
-    const userCountry = profileAccount.country;
-
-    return countryList.filter(({ code }) => code === userCountry || countriesCodesList.find(x => x === code));
-  },
+  locale => getCountryList(locale),
 );
 
 export const preferredLanguageSelector = createSelector(
@@ -117,14 +127,10 @@ export const countrySelector = createSelector(
   editableFormSelector,
   sortedCountriesSelector,
   countryMessagesSelector,
-  countriesCodesListSelector,
-  profileAccountSelector,
-  (editableForm, translatedCountries, countryMessages, countriesCodesList, account) => ({
+  (editableForm, sortedCountries, countryMessages) => ({
     ...editableForm,
-    translatedCountries,
+    sortedCountries,
     countryMessages,
-    countriesCodesList,
-    committedCountry: account.country,
   }),
 );
 
@@ -148,6 +154,9 @@ export const profileImageSelector = createSelector(
     : {}),
 );
 
+/**
+ * This is used by a saga to pull out data to process.
+ */
 export const handleSaveProfileSelector = createSelector(
   profileDraftsSelector,
   profilePreferencesSelector,
@@ -157,6 +166,7 @@ export const handleSaveProfileSelector = createSelector(
   }),
 );
 
+// Reformats the social links in a platform-keyed hash.
 const socialLinksByPlatformSelector = createSelector(
   profileAccountSelector,
   (account) => {
@@ -183,18 +193,24 @@ const draftSocialLinksByPlatformSelector = createSelector(
   },
 );
 
+// Fleshes out our list of existing social links with all the other ones the user can set.
 export const formSocialLinksSelector = createSelector(
   socialLinksByPlatformSelector,
   draftSocialLinksByPlatformSelector,
   (linksByPlatform, draftLinksByPlatform) => {
     const knownPlatforms = ['twitter', 'facebook', 'linkedin'];
     const socialLinks = [];
+    // For each known platform
     knownPlatforms.forEach((platform) => {
+      // If the link is in our drafts.
       if (draftLinksByPlatform[platform] !== undefined) {
+        // Use the draft one.
         socialLinks.push(draftLinksByPlatform[platform]);
       } else if (linksByPlatform[platform] !== undefined) {
+        // Otherwise use the real one.
         socialLinks.push(linksByPlatform[platform]);
       } else {
+        // And if it's not in either, use a stub.
         socialLinks.push({
           platform,
           socialLink: null,
@@ -212,16 +228,18 @@ export const visibilitiesSelector = createSelector(
     switch (accountPrivacy) {
       case 'custom':
         return {
-          visibilityBio: preferences.visibilityBio || 'all_users',
-          visibilityCountry: preferences.visibilityCountry || 'all_users',
-          visibilityLevelOfEducation: preferences.visibilityLevelOfEducation || 'all_users',
-          visibilityLanguageProficiencies: preferences.visibilityLanguageProficiencies || 'all_users',
-          visibilityName: preferences.visibilityName || 'all_users',
-          visibilitySocialLinks: preferences.visibilitySocialLinks || 'all_users',
+          visibilityBio: preferences.visibilityBio || 'private',
+          visibilityCourseCertificates: preferences.visibilityCourseCertificates || 'private',
+          visibilityCountry: preferences.visibilityCountry || 'private',
+          visibilityLevelOfEducation: preferences.visibilityLevelOfEducation || 'private',
+          visibilityLanguageProficiencies: preferences.visibilityLanguageProficiencies || 'private',
+          visibilityName: preferences.visibilityName || 'private',
+          visibilitySocialLinks: preferences.visibilitySocialLinks || 'private',
         };
       case 'private':
         return {
           visibilityBio: 'private',
+          visibilityCourseCertificates: 'private',
           visibilityCountry: 'private',
           visibilityLevelOfEducation: 'private',
           visibilityLanguageProficiencies: 'private',
@@ -230,8 +248,13 @@ export const visibilitiesSelector = createSelector(
         };
       case 'all_users':
       default:
+        // All users is intended to fall through to default.
+        // If there is no value for accountPrivacy in perferences, that means it has not been
+        // explicitly set yet. The server assumes - today - that this means "all_users",
+        // so we emulate that here in the client.
         return {
           visibilityBio: 'all_users',
+          visibilityCourseCertificates: 'all_users',
           visibilityCountry: 'all_users',
           visibilityLevelOfEducation: 'all_users',
           visibilityLanguageProficiencies: 'all_users',
@@ -242,6 +265,9 @@ export const visibilitiesSelector = createSelector(
   },
 );
 
+/**
+ * If there's no draft present at all (undefined), use the original committed value.
+ */
 function chooseFormValue(draft, committed) {
   return draft !== undefined ? draft : committed;
 }
@@ -256,6 +282,10 @@ export const formValuesSelector = createSelector(
     bio: chooseFormValue(drafts.bio, account.bio),
     visibilityBio: chooseFormValue(drafts.visibilityBio, visibilities.visibilityBio),
     courseCertificates,
+    visibilityCourseCertificates: chooseFormValue(
+      drafts.visibilityCourseCertificates,
+      visibilities.visibilityCourseCertificates,
+    ),
     country: chooseFormValue(drafts.country, account.country),
     visibilityCountry: chooseFormValue(drafts.visibilityCountry, visibilities.visibilityCountry),
     levelOfEducation: chooseFormValue(drafts.levelOfEducation, account.levelOfEducation),
@@ -273,7 +303,7 @@ export const formValuesSelector = createSelector(
     ),
     name: chooseFormValue(drafts.name, account.name),
     visibilityName: chooseFormValue(drafts.visibilityName, visibilities.visibilityName),
-    socialLinks,
+    socialLinks, // Social links is calculated in its own selector, since it's complicated.
     visibilitySocialLinks: chooseFormValue(
       drafts.visibilitySocialLinks,
       visibilities.visibilitySocialLinks,
@@ -290,7 +320,6 @@ export const profilePageSelector = createSelector(
   isLoadingProfileSelector,
   draftSocialLinksByPlatformSelector,
   accountErrorsSelector,
-  isAuthenticatedUserProfileSelector,
   (
     account,
     formValues,
@@ -300,39 +329,46 @@ export const profilePageSelector = createSelector(
     isLoadingProfile,
     draftSocialLinksByPlatform,
     errors,
-    isAuthenticatedUserProfile,
   ) => ({
+    // Account data we need
     username: account.username,
     profileImage,
     requiresParentalConsent: account.requiresParentalConsent,
     dateJoined: account.dateJoined,
-    yearOfBirth: account.yearOfBirth,
 
+    // Bio form data
     bio: formValues.bio,
     visibilityBio: formValues.visibilityBio,
 
+    // Certificates form data
     courseCertificates: formValues.courseCertificates,
+    visibilityCourseCertificates: formValues.visibilityCourseCertificates,
 
+    // Country form data
     country: formValues.country,
     visibilityCountry: formValues.visibilityCountry,
 
+    // Education form data
     levelOfEducation: formValues.levelOfEducation,
     visibilityLevelOfEducation: formValues.visibilityLevelOfEducation,
 
+    // Language proficiency form data
     languageProficiencies: formValues.languageProficiencies,
     visibilityLanguageProficiencies: formValues.visibilityLanguageProficiencies,
 
+    // Name form data
     name: formValues.name,
     visibilityName: formValues.visibilityName,
 
+    // Social links form data
     socialLinks: formValues.socialLinks,
     visibilitySocialLinks: formValues.visibilitySocialLinks,
     draftSocialLinksByPlatform,
 
+    // Other data we need
     saveState,
     savePhotoState,
     isLoadingProfile,
     photoUploadError: errors.photo || null,
-    isAuthenticatedUserProfile,
   }),
 );

src/profile/data/services.js

@@ -2,24 +2,11 @@ import { ensureConfig, getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient as getHttpClient } from '@edx/frontend-platform/auth';
 import { logError } from '@edx/frontend-platform/logging';
 import { camelCaseObject, convertKeyNames, snakeCaseObject } from '../utils';
-import { FIELD_LABELS } from './constants';
 
 ensureConfig(['LMS_BASE_URL'], 'Profile API service');
 
 function processAccountData(data) {
-  const processedData = camelCaseObject(data);
-  return {
-    ...processedData,
-    socialLinks: Array.isArray(processedData.socialLinks) ? processedData.socialLinks : [],
-    languageProficiencies: Array.isArray(processedData.languageProficiencies)
-      ? processedData.languageProficiencies : [],
-    name: processedData.name || null,
-    bio: processedData.bio || null,
-    country: processedData.country || null,
-    levelOfEducation: processedData.levelOfEducation || null,
-    profileImage: processedData.profileImage || {},
-    yearOfBirth: processedData.yearOfBirth || null,
-  };
+  return camelCaseObject(data);
 }
 
 function processAndThrowError(error, errorDataProcessor) {
@@ -32,12 +19,15 @@ function processAndThrowError(error, errorDataProcessor) {
   }
 }
 
+// GET ACCOUNT
 export async function getAccount(username) {
   const { data } = await getHttpClient().get(`${getConfig().LMS_BASE_URL}/api/user/v1/accounts/${username}`);
 
+  // Process response data
   return processAccountData(data);
 }
 
+// PATCH PROFILE
 export async function patchProfile(username, params) {
   const processedParams = snakeCaseObject(params);
 
@@ -51,9 +41,12 @@ export async function patchProfile(username, params) {
       processAndThrowError(error, processAccountData);
     });
 
+  // Process response data
   return processAccountData(data);
 }
 
+// POST PROFILE PHOTO
+
 export async function postProfilePhoto(username, formData) {
   // eslint-disable-next-line no-unused-vars
   const { data } = await getHttpClient().post(
@@ -77,6 +70,8 @@ export async function postProfilePhoto(username, formData) {
   return updatedData.profileImage;
 }
 
+// DELETE PROFILE PHOTO
+
 export async function deleteProfilePhoto(username) {
   // eslint-disable-next-line no-unused-vars
   const { data } = await getHttpClient().delete(`${getConfig().LMS_BASE_URL}/api/user/v1/accounts/${username}/image`);
@@ -90,12 +85,14 @@ export async function deleteProfilePhoto(username) {
   return updatedData.profileImage;
 }
 
+// GET PREFERENCES
 export async function getPreferences(username) {
   const { data } = await getHttpClient().get(`${getConfig().LMS_BASE_URL}/api/user/v1/preferences/${username}`);
 
   return camelCaseObject(data);
 }
 
+// PATCH PREFERENCES
 export async function patchPreferences(username, params) {
   let processedParams = snakeCaseObject(params);
   processedParams = convertKeyNames(processedParams, {
@@ -117,6 +114,8 @@ export async function patchPreferences(username, params) {
   return params; // TODO: Once the server returns the updated preferences object, return that.
 }
 
+// GET COURSE CERTIFICATES
+
 function transformCertificateData(data) {
   const transformedData = [];
   data.forEach((cert) => {
@@ -148,21 +147,3 @@ export async function getCourseCertificates(username) {
     return [];
   }
 }
-
-function extractCountryList(data) {
-  return data?.fields
-    .find(({ name }) => name === FIELD_LABELS.COUNTRY)
-    ?.options?.map(({ value }) => (value)) || [];
-}
-
-export async function getCountryList() {
-  const url = `${getConfig().LMS_BASE_URL}/user_api/v1/account/registration/`;
-
-  try {
-    const { data } = await getHttpClient().get(url);
-    return extractCountryList(data);
-  } catch (e) {
-    logError(e);
-    return [];
-  }
-}

src/profile/data/services.test.js

@@ -1,174 +0,0 @@
-import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import { logError } from '@edx/frontend-platform/logging';
-import {
-  getAccount,
-  patchProfile,
-  postProfilePhoto,
-  deleteProfilePhoto,
-  getPreferences,
-  patchPreferences,
-  getCourseCertificates,
-  getCountryList,
-} from './services';
-
-import { FIELD_LABELS } from './constants';
-
-import { camelCaseObject, snakeCaseObject, convertKeyNames } from '../utils';
-
-// --- Mocks ---
-jest.mock('@edx/frontend-platform', () => ({
-  ensureConfig: jest.fn(),
-  getConfig: jest.fn(() => ({ LMS_BASE_URL: 'http://fake-lms' })),
-}));
-
-jest.mock('@edx/frontend-platform/auth', () => ({
-  getAuthenticatedHttpClient: jest.fn(),
-}));
-
-jest.mock('@edx/frontend-platform/logging', () => ({
-  logError: jest.fn(),
-}));
-
-jest.mock('../utils', () => ({
-  camelCaseObject: jest.fn((obj) => obj),
-  snakeCaseObject: jest.fn((obj) => obj),
-  convertKeyNames: jest.fn((obj) => obj),
-}));
-
-const mockHttpClient = {
-  get: jest.fn(),
-  patch: jest.fn(),
-  post: jest.fn(),
-  delete: jest.fn(),
-};
-
-beforeEach(() => {
-  jest.clearAllMocks();
-  getAuthenticatedHttpClient.mockReturnValue(mockHttpClient);
-});
-
-// --- Tests ---
-describe('services', () => {
-  describe('getAccount', () => {
-    it('should return processed account data', async () => {
-      const mockData = { name: 'John Doe', socialLinks: [] };
-      mockHttpClient.get.mockResolvedValue({ data: mockData });
-
-      const result = await getAccount('john');
-      expect(result).toMatchObject(mockData);
-      expect(mockHttpClient.get).toHaveBeenCalledWith(
-        'http://fake-lms/api/user/v1/accounts/john',
-      );
-    });
-  });
-
-  describe('patchProfile', () => {
-    it('should patch and return processed data', async () => {
-      const mockData = { bio: 'New Bio' };
-      mockHttpClient.patch.mockResolvedValue({ data: mockData });
-
-      const result = await patchProfile('john', { bio: 'New Bio' });
-      expect(result).toMatchObject(mockData);
-      expect(snakeCaseObject).toHaveBeenCalledWith({ bio: 'New Bio' });
-    });
-
-    it('should throw processed error on failure', async () => {
-      const error = { response: { data: { some: 'error' } } };
-      mockHttpClient.patch.mockRejectedValue(error);
-
-      await expect(patchProfile('john', {})).rejects.toMatchObject(error);
-    });
-  });
-
-  describe('postProfilePhoto', () => {
-    it('should post photo and return updated profile image', async () => {
-      mockHttpClient.post.mockResolvedValue({});
-      mockHttpClient.get.mockResolvedValue({
-        data: { profileImage: { url: 'img.png' } },
-      });
-
-      const result = await postProfilePhoto('john', new FormData());
-      expect(result).toEqual({ url: 'img.png' });
-    });
-
-    it('should throw error if API fails', async () => {
-      const error = { response: { data: { error: 'fail' } } };
-      mockHttpClient.post.mockRejectedValue(error);
-      await expect(postProfilePhoto('john', new FormData())).rejects.toMatchObject(error);
-    });
-  });
-
-  describe('deleteProfilePhoto', () => {
-    it('should delete photo and return updated profile image', async () => {
-      mockHttpClient.delete.mockResolvedValue({});
-      mockHttpClient.get.mockResolvedValue({
-        data: { profileImage: { url: 'deleted.png' } },
-      });
-
-      const result = await deleteProfilePhoto('john');
-      expect(result).toEqual({ url: 'deleted.png' });
-    });
-  });
-
-  describe('getPreferences', () => {
-    it('should return camelCased preferences', async () => {
-      mockHttpClient.get.mockResolvedValue({ data: { pref: 1 } });
-
-      const result = await getPreferences('john');
-      expect(result).toMatchObject({ pref: 1 });
-      expect(camelCaseObject).toHaveBeenCalledWith({ pref: 1 });
-    });
-  });
-
-  describe('patchPreferences', () => {
-    it('should patch preferences and return params', async () => {
-      mockHttpClient.patch.mockResolvedValue({});
-      const params = { visibility_bio: true };
-
-      const result = await patchPreferences('john', params);
-      expect(result).toBe(params);
-      expect(snakeCaseObject).toHaveBeenCalledWith(params);
-      expect(convertKeyNames).toHaveBeenCalled();
-    });
-  });
-
-  describe('getCourseCertificates', () => {
-    it('should return transformed certificates', async () => {
-      mockHttpClient.get.mockResolvedValue({
-        data: [{ download_url: '/path', certificate_type: 'type' }],
-      });
-
-      const result = await getCourseCertificates('john');
-      expect(result[0]).toHaveProperty('downloadUrl', 'http://fake-lms/path');
-    });
-
-    it('should log error and return empty array on failure', async () => {
-      mockHttpClient.get.mockRejectedValue(new Error('fail'));
-      const result = await getCourseCertificates('john');
-      expect(result).toEqual([]);
-      expect(logError).toHaveBeenCalled();
-    });
-  });
-
-  describe('getCountryList', () => {
-    it('should extract country list', async () => {
-      mockHttpClient.get.mockResolvedValue({
-        data: {
-          fields: [
-            { name: FIELD_LABELS.COUNTRY, options: [{ value: 'US' }, { value: 'CA' }] },
-          ],
-        },
-      });
-
-      const result = await getCountryList();
-      expect(result).toEqual(['US', 'CA']);
-    });
-
-    it('should log error and return empty array on failure', async () => {
-      mockHttpClient.get.mockRejectedValue(new Error('fail'));
-      const result = await getCountryList();
-      expect(result).toEqual([]);
-      expect(logError).toHaveBeenCalled();
-    });
-  });
-});

src/profile/forms/Bio.jsx

@@ -1,140 +1,145 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
-import { Form } from '@openedx/paragon';
+import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { ValidationFormGroup } from '@edx/paragon';
 
-import classNames from 'classnames';
 import messages from './Bio.messages';
 
+// Components
 import FormControls from './elements/FormControls';
 import EditableItemHeader from './elements/EditableItemHeader';
 import EmptyContent from './elements/EmptyContent';
 import SwitchContent from './elements/SwitchContent';
 
+// Selectors
 import { editableFormSelector } from '../data/selectors';
-import {
-  useCloseOpenHandler,
-  useHandleChange,
-  useHandleSubmit,
-  useIsOnMobileScreen,
-  useIsVisibilityEnabled,
-} from '../data/hooks';
 
-const Bio = ({
-  formId,
-  bio,
-  visibilityBio,
-  editMode,
-  saveState,
-  error,
-  changeHandler,
-  submitHandler,
-  closeHandler,
-  openHandler,
-}) => {
-  const isMobileView = useIsOnMobileScreen();
-  const isVisibilityEnabled = useIsVisibilityEnabled();
-  const intl = useIntl();
+class Bio extends React.Component {
+  constructor(props) {
+    super(props);
 
-  const handleChange = useHandleChange(changeHandler);
-  const handleSubmit = useHandleSubmit(submitHandler, formId);
-  const handleOpen = useCloseOpenHandler(openHandler, formId);
-  const handleClose = useCloseOpenHandler(closeHandler, formId);
+    this.handleChange = this.handleChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleClose = this.handleClose.bind(this);
+    this.handleOpen = this.handleOpen.bind(this);
+  }
 
-  return (
-    <SwitchContent
-      className={classNames([
-        isMobileView ? 'pt-40px' : 'pt-0',
-      ])}
-      expression={editMode}
-      cases={{
-        editing: (
-          <div role="dialog" aria-labelledby={`${formId}-label`}>
-            <form onSubmit={handleSubmit}>
-              <Form.Group
-                controlId={formId}
-                className="m-0 pb-3"
-                isInvalid={error !== null}
-              >
-                <p data-hj-suppress className="h5 font-weight-bold m-0 pb-2.5">
-                  {intl.formatMessage(messages['profile.bio.about.me'])}
-                </p>
-                <textarea
-                  className="form-control py-10px"
-                  id={formId}
-                  name={formId}
-                  value={bio}
-                  onChange={handleChange}
+  handleChange(e) {
+    const { name, value } = e.target;
+    this.props.changeHandler(name, value);
+  }
+
+  handleSubmit(e) {
+    e.preventDefault();
+    this.props.submitHandler(this.props.formId);
+  }
+
+  handleClose() {
+    this.props.closeHandler(this.props.formId);
+  }
+
+  handleOpen() {
+    this.props.openHandler(this.props.formId);
+  }
+
+  render() {
+    const {
+      formId, bio, visibilityBio, editMode, saveState, error, intl,
+    } = this.props;
+
+    return (
+      <SwitchContent
+        className="mb-5"
+        expression={editMode}
+        cases={{
+          editing: (
+            <div role="dialog" aria-labelledby={`${formId}-label`}>
+              <form onSubmit={this.handleSubmit}>
+                <ValidationFormGroup
+                  for={formId}
+                  invalid={error !== null}
+                  invalidMessage={error}
+                >
+                  <label className="edit-section-header" htmlFor={formId}>
+                    {intl.formatMessage(messages['profile.bio.about.me'])}
+                  </label>
+                  <textarea
+                    className="form-control"
+                    id={formId}
+                    name={formId}
+                    value={bio}
+                    onChange={this.handleChange}
+                  />
+                </ValidationFormGroup>
+                <FormControls
+                  visibilityId="visibilityBio"
+                  saveState={saveState}
+                  visibility={visibilityBio}
+                  cancelHandler={this.handleClose}
+                  changeHandler={this.handleChange}
                 />
-                {error !== null && (
-                  <Form.Control.Feedback hasIcon={false}>
-                    {error}
-                  </Form.Control.Feedback>
-                )}
-              </Form.Group>
-              <FormControls
-                visibilityId="visibilityBio"
-                saveState={saveState}
+              </form>
+            </div>
+          ),
+          editable: (
+            <>
+              <EditableItemHeader
+                content={intl.formatMessage(messages['profile.bio.about.me'])}
+                showEditButton
+                onClickEdit={this.handleOpen}
+                showVisibility={visibilityBio !== null}
                 visibility={visibilityBio}
-                cancelHandler={handleClose}
-                changeHandler={handleChange}
               />
-            </form>
-          </div>
-        ),
-        editable: (
-          <>
-            <p data-hj-suppress className="h5 font-weight-bold m-0 pb-1.5">
-              {intl.formatMessage(messages['profile.bio.about.me'])}
-            </p>
-            <EditableItemHeader
-              content={bio}
-              showEditButton
-              onClickEdit={handleOpen}
-              showVisibility={visibilityBio !== null && isVisibilityEnabled}
-              visibility={visibilityBio}
-            />
-          </>
-        ),
-        empty: (
-          <>
-            <p data-hj-suppress className="h5 font-weight-bold m-0 pb-1.5">
-              {intl.formatMessage(messages['profile.bio.about.me'])}
-            </p>
-            <EmptyContent onClick={handleOpen}>
-              <FormattedMessage
-                id="profile.bio.empty"
-                defaultMessage="Add a short bio"
-                description="instructions when the user hasn't written an About Me"
-              />
-            </EmptyContent>
-          </>
-        ),
-        static: (
-          <>
-            <p data-hj-suppress className="h5 font-weight-bold m-0 pb-1.5">
-              {intl.formatMessage(messages['profile.bio.about.me'])}
-            </p>
-            <EditableItemHeader content={bio} />
-          </>
-        ),
-      }}
-    />
-  );
-};
+              <p data-hj-suppress className="lead">{bio}</p>
+            </>
+          ),
+          empty: (
+            <>
+              <EditableItemHeader content={intl.formatMessage(messages['profile.bio.about.me'])} />
+              <EmptyContent onClick={this.handleOpen}>
+                <FormattedMessage
+                  id="profile.bio.empty"
+                  defaultMessage="Add a short bio"
+                  description="instructions when the user hasn't written an About Me"
+                />
+              </EmptyContent>
+            </>
+          ),
+          static: (
+            <>
+              <EditableItemHeader content={intl.formatMessage(messages['profile.bio.about.me'])} />
+              <p data-hj-suppress className="lead">{bio}</p>
+            </>
+          ),
+        }}
+      />
+    );
+  }
+}
 
 Bio.propTypes = {
+  // It'd be nice to just set this as a defaultProps...
+  // except the class that comes out on the other side of react-redux's
+  // connect() method won't have it anymore. Static properties won't survive
+  // through the higher order function.
   formId: PropTypes.string.isRequired,
+
+  // From Selector
   bio: PropTypes.string,
   visibilityBio: PropTypes.oneOf(['private', 'all_users']),
   editMode: PropTypes.oneOf(['editing', 'editable', 'empty', 'static']),
   saveState: PropTypes.string,
   error: PropTypes.string,
+
+  // Actions
   changeHandler: PropTypes.func.isRequired,
   submitHandler: PropTypes.func.isRequired,
   closeHandler: PropTypes.func.isRequired,
   openHandler: PropTypes.func.isRequired,
+
+  // i18n
+  intl: intlShape.isRequired,
 };
 
 Bio.defaultProps = {
@@ -148,4 +153,4 @@ Bio.defaultProps = {
 export default connect(
   editableFormSelector,
   {},
-)(Bio);
+)(injectIntl(Bio));

src/profile/forms/Bio.messages.jsx

@@ -3,7 +3,7 @@ import { defineMessages } from '@edx/frontend-platform/i18n';
 const messages = defineMessages({
   'profile.bio.about.me': {
     id: 'profile.bio.about.me',
-    defaultMessage: 'Bio',
+    defaultMessage: 'About Me',
     description: 'A section of a user profile',
   },
 });

src/profile/forms/Certificates.jsx

@@ -0,0 +1,231 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+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';
+
+import messages from './Certificates.messages';
+
+// Components
+import FormControls from './elements/FormControls';
+import EditableItemHeader from './elements/EditableItemHeader';
+import SwitchContent from './elements/SwitchContent';
+
+// Assets
+import professionalCertificateSVG from '../assets/professional-certificate.svg';
+import verifiedCertificateSVG from '../assets/verified-certificate.svg';
+
+// Selectors
+import { certificatesSelector } from '../data/selectors';
+
+class Certificates extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.handleChange = this.handleChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleClose = this.handleClose.bind(this);
+    this.handleOpen = this.handleOpen.bind(this);
+  }
+
+  handleChange(e) {
+    const { name, value } = e.target;
+    this.props.changeHandler(name, value);
+  }
+
+  handleSubmit(e) {
+    e.preventDefault();
+    this.props.submitHandler(this.props.formId);
+  }
+
+  handleClose() {
+    this.props.closeHandler(this.props.formId);
+  }
+
+  handleOpen() {
+    this.props.openHandler(this.props.formId);
+  }
+
+  renderCertificate({
+    certificateType, courseDisplayName, courseOrganization, modifiedDate, downloadUrl, courseId,
+  }) {
+    const { intl } = this.props;
+    const certificateIllustration = (() => {
+      switch (certificateType) {
+        case 'professional':
+        case 'no-id-professional':
+          return professionalCertificateSVG;
+        case 'verified':
+          return verifiedCertificateSVG;
+        case 'honor':
+        case 'audit':
+        default:
+          return null;
+      }
+    })();
+
+    return (
+      <div key={`${modifiedDate}-${courseId}`} 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={{ backgroundImage: `url(${certificateIllustration})` }}
+          />
+          <div className="card-body d-flex flex-column">
+            <div className="card-title">
+              <p className="small mb-0">
+                {intl.formatMessage(get(
+                  messages,
+                  `profile.certificates.types.${certificateType}`,
+                  messages['profile.certificates.types.unknown'],
+                ))}
+              </p>
+              <h4 className="certificate-title">{courseDisplayName}</h4>
+            </div>
+            <p className="small mb-0">
+              <FormattedMessage
+                id="profile.certificate.organization.label"
+                defaultMessage="From"
+              />
+            </p>
+            <p className="h6 mb-4">{courseOrganization}</p>
+            <div className="flex-grow-1" />
+            <p className="small mb-2">
+              <FormattedMessage
+                id="profile.certificate.completion.date.label"
+                defaultMessage="Completed on {date}"
+                values={{
+                  date: <FormattedDate value={new Date(modifiedDate)} />,
+                }}
+              />
+            </p>
+            <div>
+              <Hyperlink destination={downloadUrl} className="btn btn-outline-primary" target="_blank">
+                {intl.formatMessage(messages['profile.certificates.view.certificate'])}
+              </Hyperlink>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  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 (
+      <div className="row align-items-stretch">{this.props.certificates.map(certificate => this.renderCertificate(certificate))}</div>
+    );
+  }
+
+  render() {
+    const {
+      visibilityCourseCertificates, editMode, saveState, intl,
+    } = this.props;
+
+    return (
+      <SwitchContent
+        className="mb-4"
+        expression={editMode}
+        cases={{
+          editing: (
+            <div role="dialog" aria-labelledby="course-certificates-label">
+              <form onSubmit={this.handleSubmit}>
+                <EditableItemHeader
+                  headingId="course-certificates-label"
+                  content={intl.formatMessage(messages['profile.certificates.my.certificates'])}
+                />
+                <FormControls
+                  visibilityId="visibilityCourseCertificates"
+                  saveState={saveState}
+                  visibility={visibilityCourseCertificates}
+                  cancelHandler={this.handleClose}
+                  changeHandler={this.handleChange}
+                />
+                {this.renderCertificates()}
+              </form>
+            </div>
+          ),
+          editable: (
+            <>
+              <EditableItemHeader
+                content={intl.formatMessage(messages['profile.certificates.my.certificates'])}
+                showEditButton
+                onClickEdit={this.handleOpen}
+                showVisibility={visibilityCourseCertificates !== null}
+                visibility={visibilityCourseCertificates}
+              />
+              {this.renderCertificates()}
+            </>
+          ),
+          empty: (
+            <>
+              <EditableItemHeader
+                content={intl.formatMessage(messages['profile.certificates.my.certificates'])}
+                showEditButton
+                onClickEdit={this.handleOpen}
+                showVisibility={visibilityCourseCertificates !== null}
+                visibility={visibilityCourseCertificates}
+              />
+              {this.renderCertificates()}
+            </>
+          ),
+          static: (
+            <>
+              <EditableItemHeader content={intl.formatMessage(messages['profile.certificates.my.certificates'])} />
+              {this.renderCertificates()}
+            </>
+          ),
+        }}
+      />
+    );
+  }
+}
+
+Certificates.propTypes = {
+  // It'd be nice to just set this as a defaultProps...
+  // except the class that comes out on the other side of react-redux's
+  // connect() method won't have it anymore. Static properties won't survive
+  // through the higher order function.
+  formId: PropTypes.string.isRequired,
+
+  // From Selector
+  certificates: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string,
+  })),
+  visibilityCourseCertificates: PropTypes.oneOf(['private', 'all_users']),
+  editMode: PropTypes.oneOf(['editing', 'editable', 'empty', 'static']),
+  saveState: PropTypes.string,
+
+  // Actions
+  changeHandler: PropTypes.func.isRequired,
+  submitHandler: PropTypes.func.isRequired,
+  closeHandler: PropTypes.func.isRequired,
+  openHandler: PropTypes.func.isRequired,
+
+  // i18n
+  intl: intlShape.isRequired,
+};
+
+Certificates.defaultProps = {
+  editMode: 'static',
+  saveState: null,
+  visibilityCourseCertificates: 'private',
+  certificates: null,
+};
+
+export default connect(
+  certificatesSelector,
+  {},
+)(injectIntl(Certificates));

src/profile/forms/Country.jsx

@@ -1,152 +1,168 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { Form } from '@openedx/paragon';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { ValidationFormGroup } from '@edx/paragon';
 
 import messages from './Country.messages';
 
+// Components
 import FormControls from './elements/FormControls';
 import EditableItemHeader from './elements/EditableItemHeader';
 import EmptyContent from './elements/EmptyContent';
 import SwitchContent from './elements/SwitchContent';
 
+// Selectors
 import { countrySelector } from '../data/selectors';
-import {
-  useCloseOpenHandler,
-  useHandleChange,
-  useHandleSubmit,
-  useIsVisibilityEnabled,
-} from '../data/hooks';
 
-const Country = ({
-  formId,
-  country,
-  visibilityCountry,
-  editMode,
-  saveState,
-  error,
-  translatedCountries,
-  countriesCodesList,
-  countryMessages,
-  changeHandler,
-  submitHandler,
-  closeHandler,
-  openHandler,
-}) => {
-  const isVisibilityEnabled = useIsVisibilityEnabled();
-  const intl = useIntl();
+class Country extends React.Component {
+  constructor(props) {
+    super(props);
 
-  const handleChange = useHandleChange(changeHandler);
-  const handleSubmit = useHandleSubmit(submitHandler, formId);
-  const handleOpen = useCloseOpenHandler(openHandler, formId);
-  const handleClose = useCloseOpenHandler(closeHandler, formId);
+    this.handleChange = this.handleChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleClose = this.handleClose.bind(this);
+    this.handleOpen = this.handleOpen.bind(this);
+  }
 
-  const isDisabledCountry = (countryCode) => countriesCodesList.length > 0
-      && !countriesCodesList.find(code => code === countryCode);
+  handleChange(e) {
+    const {
+      name,
+      value,
+    } = e.target;
+    this.props.changeHandler(name, value);
+  }
 
-  return (
-    <SwitchContent
-      className="pt-40px"
-      expression={editMode}
-      cases={{
-        editing: (
-          <div role="dialog" aria-labelledby={`${formId}-label`}>
-            <form onSubmit={handleSubmit}>
-              <Form.Group
-                controlId={formId}
-                className="m-0 pb-3"
-                isInvalid={error !== null}
-              >
-                <p data-hj-suppress className="h5 font-weight-bold m-0 pb-2.5">
-                  {intl.formatMessage(messages['profile.country.label'])}
-                </p>
-                <select
-                  data-hj-suppress
-                  className="form-control py-10px"
-                  type="select"
-                  id={formId}
-                  name={formId}
-                  value={country}
-                  onChange={handleChange}
+  handleSubmit(e) {
+    e.preventDefault();
+    this.props.submitHandler(this.props.formId);
+  }
+
+  handleClose() {
+    this.props.closeHandler(this.props.formId);
+  }
+
+  handleOpen() {
+    this.props.openHandler(this.props.formId);
+  }
+
+  render() {
+    const {
+      formId,
+      country,
+      visibilityCountry,
+      editMode,
+      saveState,
+      error,
+      intl,
+      sortedCountries,
+      countryMessages,
+    } = this.props;
+
+    return (
+      <SwitchContent
+        className="mb-5"
+        expression={editMode}
+        cases={{
+          editing: (
+            <div role="dialog" aria-labelledby={`${formId}-label`}>
+              <form onSubmit={this.handleSubmit}>
+                <ValidationFormGroup
+                  for={formId}
+                  invalid={error !== null}
+                  invalidMessage={error}
                 >
-                  <option value=""> </option>
-                  {translatedCountries.map(({ code, name }) => (
-                    <option key={code} value={code} disabled={isDisabledCountry(code)}>
-                      {name}
-                    </option>
-                  ))}
-                </select>
-                {error !== null && (
-                  <Form.Control.Feedback hasIcon={false}>
-                    {error}
-                  </Form.Control.Feedback>
-                )}
-              </Form.Group>
-              <FormControls
-                visibilityId="visibilityCountry"
-                saveState={saveState}
+                  <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}
+                    name={formId}
+                    value={country}
+                    onChange={this.handleChange}
+                  >
+                    <option value="">&nbsp;</option>
+                    {sortedCountries.map(({ code, name }) => (
+                      <option key={code} value={code}>{name}</option>
+                    ))}
+                  </select>
+                </ValidationFormGroup>
+                <FormControls
+                  visibilityId="visibilityCountry"
+                  saveState={saveState}
+                  visibility={visibilityCountry}
+                  cancelHandler={this.handleClose}
+                  changeHandler={this.handleChange}
+                />
+              </form>
+            </div>
+          ),
+          editable: (
+            <>
+              <EditableItemHeader
+                content={intl.formatMessage(messages['profile.country.label'])}
+                showEditButton
+                onClickEdit={this.handleOpen}
+                showVisibility={visibilityCountry !== null}
                 visibility={visibilityCountry}
-                cancelHandler={handleClose}
-                changeHandler={handleChange}
               />
-            </form>
-          </div>
-        ),
-        editable: (
-          <>
-            <p data-hj-suppress className="h5 font-weight-bold m-0 pb-1.5">
-              {intl.formatMessage(messages['profile.country.label'])}
-            </p>
-            <EditableItemHeader
-              content={countryMessages[country]}
-              showEditButton
-              onClickEdit={handleOpen}
-              showVisibility={visibilityCountry !== null && isVisibilityEnabled}
-              visibility={visibilityCountry}
-            />
-          </>
-        ),
-        empty: (
-          <>
-            <p data-hj-suppress className="h5 font-weight-bold m-0 pb-1.5">
-              {intl.formatMessage(messages['profile.country.label'])}
-            </p>
-            <EmptyContent onClick={handleOpen}>
-              {intl.formatMessage(messages['profile.country.empty'])}
-            </EmptyContent>
-          </>
-        ),
-        static: (
-          <>
-            <p data-hj-suppress className="h5 font-weight-bold m-0 pb-1.5">
-              {intl.formatMessage(messages['profile.country.label'])}
-            </p>
-            <EditableItemHeader content={countryMessages[country]} />
-          </>
-        ),
-      }}
-    />
-  );
-};
+              <p data-hj-suppress className="h5">{countryMessages[country]}</p>
+            </>
+          ),
+          empty: (
+            <>
+              <EditableItemHeader
+                content={intl.formatMessage(messages['profile.country.label'])}
+              />
+              <EmptyContent onClick={this.handleOpen}>
+                {intl.formatMessage(messages['profile.country.empty'])}
+              </EmptyContent>
+            </>
+          ),
+          static: (
+            <>
+              <EditableItemHeader
+                content={intl.formatMessage(messages['profile.country.label'])}
+              />
+              <p data-hj-suppress className="h5">{countryMessages[country]}</p>
+            </>
+          ),
+        }}
+      />
+    );
+  }
+}
 
 Country.propTypes = {
+  // It'd be nice to just set this as a defaultProps...
+  // except the class that comes out on the other side of react-redux's
+  // connect() method won't have it anymore. Static properties won't survive
+  // through the higher order function.
   formId: PropTypes.string.isRequired,
+
+  // From Selector
   country: PropTypes.string,
   visibilityCountry: PropTypes.oneOf(['private', 'all_users']),
   editMode: PropTypes.oneOf(['editing', 'editable', 'empty', 'static']),
   saveState: PropTypes.string,
   error: PropTypes.string,
-  translatedCountries: PropTypes.arrayOf(PropTypes.shape({
+  sortedCountries: PropTypes.arrayOf(PropTypes.shape({
     code: PropTypes.string.isRequired,
     name: PropTypes.string.isRequired,
   })).isRequired,
-  countriesCodesList: PropTypes.arrayOf(PropTypes.string).isRequired,
   countryMessages: PropTypes.objectOf(PropTypes.string).isRequired,
+
+  // Actions
   changeHandler: PropTypes.func.isRequired,
   submitHandler: PropTypes.func.isRequired,
   closeHandler: PropTypes.func.isRequired,
   openHandler: PropTypes.func.isRequired,
+
+  // i18n
+  intl: intlShape.isRequired,
 };
 
 Country.defaultProps = {
@@ -160,4 +176,4 @@ Country.defaultProps = {
 export default connect(
   countrySelector,
   {},
-)(Country);
+)(injectIntl(Country));

src/profile/forms/Country.messages.jsx

@@ -3,12 +3,12 @@ import { defineMessages } from '@edx/frontend-platform/i18n';
 const messages = defineMessages({
   'profile.country.label': {
     id: 'profile.country.label',
-    defaultMessage: 'Country',
+    defaultMessage: 'Location',
     description: 'The label for a country in a user profile.',
   },
   'profile.country.empty': {
     id: 'profile.country.empty',
-    defaultMessage: 'Add country',
+    defaultMessage: 'Add location',
     description: 'The affordance to add country location to a user’s profile.',
   },
 });

src/profile/forms/Education.jsx

@@ -1,160 +1,176 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import get from 'lodash.get';
-import { Form } from '@openedx/paragon';
+import { ValidationFormGroup } from '@edx/paragon';
 
 import messages from './Education.messages';
 
+// Components
 import FormControls from './elements/FormControls';
 import EditableItemHeader from './elements/EditableItemHeader';
 import EmptyContent from './elements/EmptyContent';
 import SwitchContent from './elements/SwitchContent';
 
+// Constants
 import { EDUCATION_LEVELS } from '../data/constants';
 
+// Selectors
 import { editableFormSelector } from '../data/selectors';
-import {
-  useCloseOpenHandler,
-  useHandleChange,
-  useHandleSubmit,
-  useIsVisibilityEnabled,
-} from '../data/hooks';
 
-const Education = ({
-  formId,
-  levelOfEducation,
-  visibilityLevelOfEducation,
-  editMode,
-  saveState,
-  error,
-  changeHandler,
-  submitHandler,
-  closeHandler,
-  openHandler,
-}) => {
-  const isVisibilityEnabled = useIsVisibilityEnabled();
-  const intl = useIntl();
+class Education extends React.Component {
+  constructor(props) {
+    super(props);
 
-  const handleChange = useHandleChange(changeHandler);
-  const handleSubmit = useHandleSubmit(submitHandler, formId);
-  const handleOpen = useCloseOpenHandler(openHandler, formId);
-  const handleClose = useCloseOpenHandler(closeHandler, formId);
+    this.handleChange = this.handleChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleClose = this.handleClose.bind(this);
+    this.handleOpen = this.handleOpen.bind(this);
+  }
 
-  return (
-    <SwitchContent
-      className="pt-40px"
-      expression={editMode}
-      cases={{
-        editing: (
-          <div role="dialog" aria-labelledby={`${formId}-label`}>
-            <form onSubmit={handleSubmit}>
-              <Form.Group
-                controlId={formId}
-                className="m-0 pb-3"
-                isInvalid={error !== null}
-              >
-                <p data-hj-suppress className="h5 font-weight-bold m-0 pb-2.5">
-                  {intl.formatMessage(messages['profile.education.education'])}
-                </p>
-                <select
-                  data-hj-suppress
-                  className="form-control py-10px"
-                  id={formId}
-                  name={formId}
-                  value={levelOfEducation}
-                  onChange={handleChange}
+  handleChange(e) {
+    const {
+      name,
+      value,
+    } = e.target;
+    this.props.changeHandler(name, value);
+  }
+
+  handleSubmit(e) {
+    e.preventDefault();
+    this.props.submitHandler(this.props.formId);
+  }
+
+  handleClose() {
+    this.props.closeHandler(this.props.formId);
+  }
+
+  handleOpen() {
+    this.props.openHandler(this.props.formId);
+  }
+
+  render() {
+    const {
+      formId, levelOfEducation, visibilityLevelOfEducation, editMode, saveState, error, intl,
+    } = this.props;
+
+    return (
+      <SwitchContent
+        className="mb-5"
+        expression={editMode}
+        cases={{
+          editing: (
+            <div role="dialog" aria-labelledby={`${formId}-label`}>
+              <form onSubmit={this.handleSubmit}>
+                <ValidationFormGroup
+                  for={formId}
+                  invalid={error !== null}
+                  invalidMessage={error}
                 >
-                  <option value=""> </option>
-                  {EDUCATION_LEVELS.map(level => (
-                    <option key={level} value={level}>
-                      {intl.formatMessage(get(
-                        messages,
-                        `profile.education.levels.${level}`,
-                        messages['profile.education.levels.o'],
-                      ))}
-                    </option>
-                  ))}
-                </select>
-                {error !== null && (
-                  <Form.Control.Feedback hasIcon={false}>
-                    {error}
-                  </Form.Control.Feedback>
-                )}
-              </Form.Group>
-              <FormControls
-                visibilityId="visibilityLevelOfEducation"
-                saveState={saveState}
+                  <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="">&nbsp;</option>
+                    {EDUCATION_LEVELS.map(level => (
+                      <option key={level} value={level}>
+                        {intl.formatMessage(get(
+                          messages,
+                          `profile.education.levels.${level}`,
+                          messages['profile.education.levels.o'],
+                        ))}
+                      </option>
+                    ))}
+                  </select>
+                </ValidationFormGroup>
+                <FormControls
+                  visibilityId="visibilityLevelOfEducation"
+                  saveState={saveState}
+                  visibility={visibilityLevelOfEducation}
+                  cancelHandler={this.handleClose}
+                  changeHandler={this.handleChange}
+                />
+              </form>
+            </div>
+          ),
+          editable: (
+            <>
+              <EditableItemHeader
+                content={intl.formatMessage(messages['profile.education.education'])}
+                showEditButton
+                onClickEdit={this.handleOpen}
+                showVisibility={visibilityLevelOfEducation !== null}
                 visibility={visibilityLevelOfEducation}
-                cancelHandler={handleClose}
-                changeHandler={handleChange}
               />
-            </form>
-          </div>
-        ),
-        editable: (
-          <>
-            <p data-hj-suppress className="h5 font-weight-bold m-0 pb-1.5">
-              {intl.formatMessage(messages['profile.education.education'])}
-            </p>
-            <EditableItemHeader
-              content={intl.formatMessage(get(
-                messages,
-                `profile.education.levels.${levelOfEducation}`,
-                messages['profile.education.levels.o'],
-              ))}
-              showEditButton
-              onClickEdit={handleOpen}
-              showVisibility={visibilityLevelOfEducation !== null && isVisibilityEnabled}
-              visibility={visibilityLevelOfEducation}
-            />
-          </>
-        ),
-        empty: (
-          <>
-            <p data-hj-suppress className="h5 font-weight-bold m-0 pb-1.5">
-              {intl.formatMessage(messages['profile.education.education'])}
-            </p>
-            <EmptyContent onClick={handleOpen}>
-              <FormattedMessage
-                id="profile.education.empty"
-                defaultMessage="Add level of education"
-                description="instructions when the user doesn't have their level of education set"
-              />
-            </EmptyContent>
-          </>
-        ),
-        static: (
-          <>
-            <p data-hj-suppress className="h5 font-weight-bold m-0 pb-1.5">
-              {intl.formatMessage(messages['profile.education.education'])}
-            </p>
-            <EditableItemHeader
-              content={intl.formatMessage(get(
-                messages,
-                `profile.education.levels.${levelOfEducation}`,
-                messages['profile.education.levels.o'],
-              ))}
-            />
-          </>
-        ),
-      }}
-    />
-  );
-};
+              <p data-hj-suppress className="h5">
+                {intl.formatMessage(get(
+                  messages,
+                  `profile.education.levels.${levelOfEducation}`,
+                  messages['profile.education.levels.o'],
+                ))}
+              </p>
+            </>
+          ),
+          empty: (
+            <>
+              <EditableItemHeader content={intl.formatMessage(messages['profile.education.education'])} />
+              <EmptyContent onClick={this.handleOpen}>
+                <FormattedMessage
+                  id="profile.education.empty"
+                  defaultMessage="Add education"
+                  description="instructions when the user doesn't have their level of education set"
+                />
+              </EmptyContent>
+            </>
+          ),
+          static: (
+            <>
+              <EditableItemHeader content={intl.formatMessage(messages['profile.education.education'])} />
+              <p data-hj-suppress className="h5">
+                {intl.formatMessage(get(
+                  messages,
+                  `profile.education.levels.${levelOfEducation}`,
+                  messages['profile.education.levels.o'],
+                ))}
+              </p>
+            </>
+          ),
+        }}
+      />
+    );
+  }
+}
 
 Education.propTypes = {
+  // It'd be nice to just set this as a defaultProps...
+  // except the class that comes out on the other side of react-redux's
+  // connect() method won't have it anymore. Static properties won't survive
+  // through the higher order function.
   formId: PropTypes.string.isRequired,
+
+  // From Selector
   levelOfEducation: PropTypes.string,
   visibilityLevelOfEducation: PropTypes.oneOf(['private', 'all_users']),
   editMode: PropTypes.oneOf(['editing', 'editable', 'empty', 'static']),
   saveState: PropTypes.string,
   error: PropTypes.string,
+
+  // Actions
   changeHandler: PropTypes.func.isRequired,
   submitHandler: PropTypes.func.isRequired,
   closeHandler: PropTypes.func.isRequired,
   openHandler: PropTypes.func.isRequired,
+
+  // i18n
+  intl: intlShape.isRequired,
 };
 
 Education.defaultProps = {
@@ -168,4 +184,4 @@ Education.defaultProps = {
 export default connect(
   editableFormSelector,
   {},
-)(Education);
+)(injectIntl(Education));

src/profile/forms/Name.jsx

@@ -1,182 +1,147 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
-import { InfoOutline } from '@openedx/paragon/icons';
-import { Hyperlink, OverlayTrigger, Tooltip } from '@openedx/paragon';
 import messages from './Name.messages';
 
+// Components
 import FormControls from './elements/FormControls';
 import EditableItemHeader from './elements/EditableItemHeader';
 import EmptyContent from './elements/EmptyContent';
 import SwitchContent from './elements/SwitchContent';
 
+// Selectors
 import { editableFormSelector } from '../data/selectors';
-import {
-  useCloseOpenHandler,
-  useHandleChange,
-  useHandleSubmit,
-  useIsVisibilityEnabled,
-} from '../data/hooks';
 
-const Name = ({
-  formId,
-  name,
-  visibilityName,
-  editMode,
-  saveState,
-  changeHandler,
-  submitHandler,
-  closeHandler,
-  openHandler,
-  accountSettingsUrl,
-}) => {
-  const isVisibilityEnabled = useIsVisibilityEnabled();
-  const intl = useIntl();
+class Name extends React.Component {
+  constructor(props) {
+    super(props);
 
-  const handleChange = useHandleChange(changeHandler);
-  const handleSubmit = useHandleSubmit(submitHandler, formId);
-  const handleOpen = useCloseOpenHandler(openHandler, formId);
-  const handleClose = useCloseOpenHandler(closeHandler, formId);
+    this.handleChange = this.handleChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleClose = this.handleClose.bind(this);
+    this.handleOpen = this.handleOpen.bind(this);
+  }
 
-  return (
-    <SwitchContent
-      className="pt-40px"
-      expression={editMode}
-      cases={{
-        editing: (
-          <div role="dialog" aria-labelledby={`${formId}-label`}>
-            <form onSubmit={handleSubmit}>
-              <div className="form-group">
-                <div className="row m-0 pb-2.5 align-items-center">
-                  <p data-hj-suppress className="h5 font-weight-bold m-0">
-                    {intl.formatMessage(messages['profile.name.full.name'])}
-                  </p>
-                  <OverlayTrigger
-                    key="top"
-                    placement="top"
-                    overlay={(
-                      <Tooltip variant="light" id="tooltip-top">
-                        <p className="h5 font-weight-normal m-0 p-0">
-                          {intl.formatMessage(messages['profile.name.tooltip'])}
-                        </p>
-                      </Tooltip>
-                            )}
-                  >
-                    <InfoOutline className="m-0 info-icon" />
-                  </OverlayTrigger>
+  handleChange(e) {
+    const {
+      name,
+      value,
+    } = e.target;
+    this.props.changeHandler(name, value);
+  }
+
+  handleSubmit(e) {
+    e.preventDefault();
+    this.props.submitHandler(this.props.formId);
+  }
+
+  handleClose() {
+    this.props.closeHandler(this.props.formId);
+  }
+
+  handleOpen() {
+    this.props.openHandler(this.props.formId);
+  }
+
+  render() {
+    const {
+      formId, name, visibilityName, editMode, saveState, intl,
+    } = this.props;
+
+    return (
+      <SwitchContent
+        className="mb-5"
+        expression={editMode}
+        cases={{
+          editing: (
+            <div role="dialog" aria-labelledby={`${formId}-label`}>
+              <form onSubmit={this.handleSubmit}>
+                <div className="form-group">
+                  <EditableItemHeader content={intl.formatMessage(messages['profile.name.full.name'])} />
+                  {/*
+                  This isn't a mistake - the name field should not be editable.  But if it were,
+                  you'd find the original code got deleted in the commit which added this comment.
+                  -djoy
+                  TODO: Relatedly, the plumbing for editing the name field is still in place.
+                  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 data-hj-suppress className="h5">{name}</p>
+                  <small className="form-text text-muted" id={`${formId}-help-text`}>
+                    {intl.formatMessage(messages['profile.name.details'])}
+                  </small>
                 </div>
-                <EditableItemHeader content={name} />
-                <h4 className="font-weight-normal">
-                  <Hyperlink destination={accountSettingsUrl} target="_blank">
-                    {intl.formatMessage(messages['profile.name.redirect'])}
-                  </Hyperlink>
-                </h4>
-              </div>
-              <FormControls
-                visibilityId="visibilityName"
-                saveState={saveState}
+                <FormControls
+                  visibilityId="visibilityName"
+                  saveState={saveState}
+                  visibility={visibilityName}
+                  cancelHandler={this.handleClose}
+                  changeHandler={this.handleChange}
+                />
+              </form>
+            </div>
+          ),
+          editable: (
+            <>
+              <EditableItemHeader
+                content={intl.formatMessage(messages['profile.name.full.name'])}
+                showEditButton
+                onClickEdit={this.handleOpen}
+                showVisibility={visibilityName !== null}
                 visibility={visibilityName}
-                cancelHandler={handleClose}
-                changeHandler={handleChange}
               />
-            </form>
-          </div>
-        ),
-        editable: (
-          <>
-            <div className="row m-0 pb-1.5 align-items-center">
-              <p data-hj-suppress className="h5 font-weight-bold m-0">
-                {intl.formatMessage(messages['profile.name.full.name'])}
-              </p>
-              <OverlayTrigger
-                key="top"
-                placement="top"
-                overlay={(
-                  <Tooltip variant="light" id="tooltip-top">
-                    <p className="h5 font-weight-normal m-0 p-0">
-                      {intl.formatMessage(messages['profile.name.tooltip'])}
-                    </p>
-                  </Tooltip>
-                          )}
-              >
-                <InfoOutline className="m-0 info-icon" />
-              </OverlayTrigger>
-            </div>
-            <EditableItemHeader
-              content={name}
-              showEditButton
-              onClickEdit={handleOpen}
-              showVisibility={visibilityName !== null && isVisibilityEnabled}
-              visibility={visibilityName}
-            />
-          </>
-        ),
-        empty: (
-          <>
-            <div className="row m-0 pb-1.5 align-items-center">
-              <p data-hj-suppress className="h5 font-weight-bold m-0">
-                {intl.formatMessage(messages['profile.name.full.name'])}
-              </p>
-              <OverlayTrigger
-                key="top"
-                placement="top"
-                overlay={(
-                  <Tooltip variant="light" id="tooltip-top">
-                    <p className="h5 font-weight-normal m-0 p-0">
-                      {intl.formatMessage(messages['profile.name.tooltip'])}
-                    </p>
-                  </Tooltip>
-                          )}
-              >
-                <InfoOutline className="m-0 info-icon" />
-              </OverlayTrigger>
-            </div>
-            <EmptyContent onClick={handleOpen}>
-              {intl.formatMessage(messages['profile.name.empty'])}
-            </EmptyContent>
-          </>
-        ),
-        static: (
-          <>
-            <div className="row m-0 pb-1.5 align-items-center">
-              <p data-hj-suppress className="h5 font-weight-bold m-0">
-                {intl.formatMessage(messages['profile.name.full.name'])}
-              </p>
-              <OverlayTrigger
-                key="top"
-                placement="top"
-                overlay={(
-                  <Tooltip variant="light" id="tooltip-top">
-                    <p className="h5 font-weight-normal m-0 p-0">
-                      {intl.formatMessage(messages['profile.name.tooltip'])}
-                    </p>
-                  </Tooltip>
-                          )}
-              >
-                <InfoOutline className="m-0 info-icon" />
-              </OverlayTrigger>
-            </div>
-            <EditableItemHeader content={name} />
-          </>
-        ),
-      }}
-    />
-  );
-};
+              <p data-hj-suppress className="h5">{name}</p>
+              <small className="form-text text-muted">
+                {intl.formatMessage(messages['profile.name.details'])}
+              </small>
+            </>
+          ),
+          empty: (
+            <>
+              <EditableItemHeader content={intl.formatMessage(messages['profile.name.full.name'])} />
+              <EmptyContent onClick={this.handleOpen}>
+                {intl.formatMessage(messages['profile.name.empty'])}
+              </EmptyContent>
+              <small className="form-text text-muted">
+                {intl.formatMessage(messages['profile.name.details'])}
+              </small>
+            </>
+          ),
+          static: (
+            <>
+              <EditableItemHeader content={intl.formatMessage(messages['profile.name.full.name'])} />
+              <p data-hj-suppress className="h5">{name}</p>
+            </>
+          ),
+        }}
+      />
+    );
+  }
+}
 
 Name.propTypes = {
+  // It'd be nice to just set this as a defaultProps...
+  // except the class that comes out on the other side of react-redux's
+  // connect() method won't have it anymore. Static properties won't survive
+  // through the higher order function.
   formId: PropTypes.string.isRequired,
+
+  // From Selector
   name: PropTypes.string,
   visibilityName: PropTypes.oneOf(['private', 'all_users']),
   editMode: PropTypes.oneOf(['editing', 'editable', 'empty', 'static']),
   saveState: PropTypes.string,
+
+  // Actions
   changeHandler: PropTypes.func.isRequired,
   submitHandler: PropTypes.func.isRequired,
   closeHandler: PropTypes.func.isRequired,
   openHandler: PropTypes.func.isRequired,
-  accountSettingsUrl: PropTypes.string.isRequired,
+
+  // i18n
+  intl: intlShape.isRequired,
 };
 
 Name.defaultProps = {
@@ -189,4 +154,4 @@ Name.defaultProps = {
 export default connect(
   editableFormSelector,
   {},
-)(Name);
+)(injectIntl(Name));

src/profile/forms/Name.messages.jsx

@@ -3,24 +3,19 @@ import { defineMessages } from '@edx/frontend-platform/i18n';
 const messages = defineMessages({
   'profile.name.full.name': {
     id: 'profile.name.full.name',
-    defaultMessage: 'Full name',
+    defaultMessage: 'Full Name',
     description: 'A section of a user profile',
   },
+  'profile.name.details': {
+    id: 'profile.name.details',
+    defaultMessage: 'This is the name that appears in your account and on your certificates.',
+    description: 'Describes the area for a user to update their name.',
+  },
   'profile.name.empty': {
     id: 'profile.name.empty',
-    defaultMessage: 'Add full name',
+    defaultMessage: 'Add name',
     description: 'The affordance to add a name to a user’s profile.',
   },
-  'profile.name.tooltip': {
-    id: 'profile.name.tooltip',
-    defaultMessage: 'The name that is used for ID verification and that appears on your certificates',
-    description: 'Tooltip for the full name field.',
-  },
-  'profile.name.redirect': {
-    id: 'profile.name.redirect',
-    defaultMessage: 'Edit full name from the Accounts page',
-    description: 'Redirect message for editing the name from the Accounts page.',
-  },
 });
 
 export default messages;

src/profile/forms/PreferredLanguage.jsx

@@ -1,140 +1,162 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { Form } from '@openedx/paragon';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { ValidationFormGroup } from '@edx/paragon';
 
 import messages from './PreferredLanguage.messages';
 
+// Components
 import FormControls from './elements/FormControls';
 import EditableItemHeader from './elements/EditableItemHeader';
 import EmptyContent from './elements/EmptyContent';
 import SwitchContent from './elements/SwitchContent';
 
+// Selectors
 import { preferredLanguageSelector } from '../data/selectors';
-import {
-  useCloseOpenHandler,
-  useHandleSubmit,
-  useIsVisibilityEnabled,
-} from '../data/hooks';
 
-const PreferredLanguage = ({
-  formId,
-  languageProficiencies,
-  visibilityLanguageProficiencies,
-  editMode,
-  saveState,
-  error,
-  sortedLanguages,
-  languageMessages,
-  changeHandler,
-  submitHandler,
-  closeHandler,
-  openHandler,
-}) => {
-  const isVisibilityEnabled = useIsVisibilityEnabled();
-  const intl = useIntl();
+class PreferredLanguage extends React.Component {
+  constructor(props) {
+    super(props);
 
-  const handleChange = ({ target: { name, value } }) => {
-    let newValue = value;
-    if (name === formId) {
-      newValue = value ? [{ code: value }] : [];
+    this.handleChange = this.handleChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleClose = this.handleClose.bind(this);
+    this.handleOpen = this.handleOpen.bind(this);
+  }
+
+  handleChange(e) {
+    const { name, value } = e.target;
+    // Restructure the data.
+    // We deconstruct our value prop in render() so this
+    // changes our data's shape back to match what came in
+    if (name === this.props.formId) {
+      if (value !== '') {
+        this.props.changeHandler(name, [{ code: value }]);
+      } else {
+        this.props.changeHandler(name, []);
+      }
+    } else {
+      this.props.changeHandler(name, value);
     }
-    changeHandler(name, newValue);
-  };
+  }
 
-  const handleSubmit = useHandleSubmit(submitHandler, formId);
-  const handleOpen = useCloseOpenHandler(openHandler, formId);
-  const handleClose = useCloseOpenHandler(closeHandler, formId);
+  handleSubmit(e) {
+    e.preventDefault();
+    this.props.submitHandler(this.props.formId);
+  }
 
-  const value = languageProficiencies.length ? languageProficiencies[0].code : '';
+  handleClose() {
+    this.props.closeHandler(this.props.formId);
+  }
 
-  return (
-    <SwitchContent
-      className="pt-40px"
-      expression={editMode}
-      cases={{
-        editing: (
-          <div role="dialog" aria-labelledby={`${formId}-label`}>
-            <form onSubmit={handleSubmit}>
-              <Form.Group
-                controlId={formId}
-                className="m-0 pb-3"
-                isInvalid={error !== null}
-              >
-                <p data-hj-suppress className="h5 font-weight-bold m-0 pb-2.5">
-                  {intl.formatMessage(messages['profile.preferredlanguage.label'])}
-                </p>
-                <select
-                  data-hj-suppress
-                  id={formId}
-                  name={formId}
-                  className="form-control py-10px"
-                  value={value}
-                  onChange={handleChange}
+  handleOpen() {
+    this.props.openHandler(this.props.formId);
+  }
+
+  render() {
+    const {
+      formId,
+      languageProficiencies,
+      visibilityLanguageProficiencies,
+      editMode,
+      saveState,
+      error,
+      intl,
+      sortedLanguages,
+      languageMessages,
+    } = this.props;
+
+    const value = languageProficiencies.length ? languageProficiencies[0].code : '';
+
+    return (
+      <SwitchContent
+        className="mb-5"
+        expression={editMode}
+        cases={{
+          editing: (
+            <div role="dialog" aria-labelledby={`${formId}-label`}>
+              <form onSubmit={this.handleSubmit}>
+                <ValidationFormGroup
+                  for={formId}
+                  invalid={error !== null}
+                  invalidMessage={error}
                 >
-                  <option value=""> </option>
-                  {sortedLanguages.map(({ code, name }) => (
-                    <option key={code} value={code}>{name}</option>
-                  ))}
-                </select>
-                {error !== null && (
-                  <Form.Control.Feedback hasIcon={false}>
-                    {error}
-                  </Form.Control.Feedback>
-                )}
-              </Form.Group>
-              <FormControls
-                visibilityId="visibilityLanguageProficiencies"
-                saveState={saveState}
+                  <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="">&nbsp;</option>
+                    {sortedLanguages.map(({ code, name }) => (
+                      <option key={code} value={code}>{name}</option>
+                    ))}
+                  </select>
+                </ValidationFormGroup>
+                <FormControls
+                  visibilityId="visibilityLanguageProficiencies"
+                  saveState={saveState}
+                  visibility={visibilityLanguageProficiencies}
+                  cancelHandler={this.handleClose}
+                  changeHandler={this.handleChange}
+                />
+              </form>
+            </div>
+          ),
+          editable: (
+            <>
+              <EditableItemHeader
+                content={intl.formatMessage(messages['profile.preferredlanguage.label'])}
+                showEditButton
+                onClickEdit={this.handleOpen}
+                showVisibility={visibilityLanguageProficiencies !== null}
                 visibility={visibilityLanguageProficiencies}
-                cancelHandler={handleClose}
-                changeHandler={handleChange}
               />
-            </form>
-          </div>
-        ),
-        editable: (
-          <>
-            <p data-hj-suppress className="h5 font-weight-bold m-0 pb-1.5">
-              {intl.formatMessage(messages['profile.preferredlanguage.label'])}
-            </p>
-            <EditableItemHeader
-              content={languageMessages[value]}
-              showEditButton
-              onClickEdit={handleOpen}
-              showVisibility={visibilityLanguageProficiencies !== null && isVisibilityEnabled}
-              visibility={visibilityLanguageProficiencies}
-            />
-          </>
-        ),
-        empty: (
-          <>
-            <p data-hj-suppress className="h5 font-weight-bold m-0 pb-1.5">
-              {intl.formatMessage(messages['profile.preferredlanguage.label'])}
-            </p>
-            <EmptyContent onClick={handleOpen}>
-              {intl.formatMessage(messages['profile.preferredlanguage.empty'])}
-            </EmptyContent>
-          </>
-        ),
-        static: (
-          <>
-            <p data-hj-suppress className="h5 font-weight-bold m-0 pb-1.5">
-              {intl.formatMessage(messages['profile.preferredlanguage.label'])}
-            </p>
-            <EditableItemHeader content={languageMessages[value]} />
-          </>
-        ),
-      }}
-    />
-  );
-};
+              <p data-hj-suppress className="h5">{languageMessages[value]}</p>
+            </>
+          ),
+          empty: (
+            <>
+              <EditableItemHeader
+                content={intl.formatMessage(messages['profile.preferredlanguage.label'])}
+              />
+              <EmptyContent onClick={this.handleOpen}>
+                {intl.formatMessage(messages['profile.preferredlanguage.empty'])}
+              </EmptyContent>
+            </>
+          ),
+          static: (
+            <>
+              <EditableItemHeader
+                content={intl.formatMessage(messages['profile.preferredlanguage.label'])}
+              />
+              <p data-hj-suppress className="h5">{languageMessages[value]}</p>
+            </>
+          ),
+        }}
+      />
+    );
+  }
+}
 
 PreferredLanguage.propTypes = {
+  // It'd be nice to just set this as a defaultProps...
+  // except the class that comes out on the other side of react-redux's
+  // connect() method won't have it anymore. Static properties won't survive
+  // through the higher order function.
   formId: PropTypes.string.isRequired,
+
+  // From Selector
   languageProficiencies: PropTypes.oneOfType([
     PropTypes.arrayOf(PropTypes.shape({ code: PropTypes.string })),
+    // TODO: ProfilePageSelector should supply null values
+    // instead of empty strings when no value exists
     PropTypes.oneOf(['']),
   ]),
   visibilityLanguageProficiencies: PropTypes.oneOf(['private', 'all_users']),
@@ -146,10 +168,15 @@ PreferredLanguage.propTypes = {
     name: PropTypes.string.isRequired,
   })).isRequired,
   languageMessages: PropTypes.objectOf(PropTypes.string).isRequired,
+
+  // Actions
   changeHandler: PropTypes.func.isRequired,
   submitHandler: PropTypes.func.isRequired,
   closeHandler: PropTypes.func.isRequired,
   openHandler: PropTypes.func.isRequired,
+
+  // i18n
+  intl: intlShape.isRequired,
 };
 
 PreferredLanguage.defaultProps = {
@@ -163,4 +190,4 @@ PreferredLanguage.defaultProps = {
 export default connect(
   preferredLanguageSelector,
   {},
-)(PreferredLanguage);
+)(injectIntl(PreferredLanguage));

src/profile/forms/PreferredLanguage.messages.jsx

@@ -8,7 +8,7 @@ const messages = defineMessages({
   },
   'profile.preferredlanguage.label': {
     id: 'profile.preferredlanguage.label',
-    defaultMessage: 'Primary language spoken',
+    defaultMessage: 'Primary Language Spoken',
     description: 'The label for a user’s primary spoken language.',
   },
 });

src/profile/forms/ProfileAvatar.jsx

@@ -1,155 +1,158 @@
-import React, { useRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  Dropdown,
-  IconButton,
-  Icon,
-  Tooltip,
-  OverlayTrigger,
-} from '@openedx/paragon';
-import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import { Button, Dropdown } from '@edx/paragon';
+import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
-import { PhotoCamera } from '@openedx/paragon/icons';
 import { ReactComponent as DefaultAvatar } from '../assets/avatar.svg';
+
 import messages from './ProfileAvatar.messages';
 
-const ProfileAvatar = ({
-  src,
-  isDefault,
-  onSave,
-  onDelete,
-  savePhotoState,
-  isEditable,
-}) => {
-  const intl = useIntl();
-  const fileInput = useRef(null);
-  const form = useRef(null);
+class ProfileAvatar extends React.Component {
+  constructor(props) {
+    super(props);
 
-  const onClickUpload = () => {
-    fileInput.current.click();
-  };
+    this.fileInput = React.createRef();
+    this.form = React.createRef();
 
-  const onClickDelete = () => {
-    onDelete();
-  };
+    this.onClickUpload = this.onClickUpload.bind(this);
+    this.onClickDelete = this.onClickDelete.bind(this);
+    this.onChangeInput = this.onChangeInput.bind(this);
+    this.onSubmit = this.onSubmit.bind(this);
+  }
 
-  const onSubmit = (e) => {
+  onClickUpload() {
+    this.fileInput.current.click();
+  }
+
+  onClickDelete() {
+    this.props.onDelete();
+  }
+
+  onChangeInput() {
+    this.onSubmit();
+  }
+
+  onSubmit(e) {
     if (e) {
       e.preventDefault();
     }
-    onSave(new FormData(form.current));
-    form.current.reset();
-  };
+    this.props.onSave(new FormData(this.form.current));
+    this.form.current.reset();
+  }
 
-  const onChangeInput = () => {
-    onSubmit();
-  };
+  renderPending() {
+    return (
+      <div
+        className="position-absolute w-100 h-100 d-flex justify-content-center align-items-center rounded-circle"
+        style={{ backgroundColor: 'rgba(0,0,0,.65)' }}
+      >
+        <div className="spinner-border text-primary" role="status" />
+      </div>
+    );
+  }
 
-  const renderPending = () => (
-    <div
-      className="position-absolute w-100 h-100 d-flex justify-content-center align-items-center rounded-circle bg-black bg-opacity-65"
-    >
-      <div className="spinner-border text-primary" role="status" />
-    </div>
-  );
+  renderMenuContent() {
+    const { intl } = this.props;
 
-  const renderEditButton = () => {
-    if (!isEditable) {
+    if (this.props.isDefault) {
+      return (
+        <Button
+          variant="link"
+          size="sm"
+          className="text-white btn-block"
+          onClick={this.onClickUpload}
+        >
+          <FormattedMessage
+            id="profile.profileavatar.upload-button"
+            defaultMessage="Upload Photo"
+            description="Upload photo button"
+          />
+        </Button>
+      );
+    }
+
+    return (
+      <Dropdown>
+        <Dropdown.Toggle>
+          {intl.formatMessage(messages['profile.profileavatar.change-button'])}
+        </Dropdown.Toggle>
+        <Dropdown.Menu>
+          <Dropdown.Item type="button" onClick={this.onClickUpload}>
+            <FormattedMessage
+              id="profile.profileavatar.upload-button"
+              defaultMessage="Upload Photo"
+              description="Upload photo button"
+            />
+          </Dropdown.Item>
+          <Dropdown.Item type="button" onClick={this.onClickDelete}>
+            <FormattedMessage
+              id="profile.profileavatar.remove.button"
+              defaultMessage="Remove"
+              description="Remove photo button"
+            />
+          </Dropdown.Item>
+        </Dropdown.Menu>
+      </Dropdown>
+    );
+  }
+
+  renderMenu() {
+    if (!this.props.isEditable) {
       return null;
     }
 
     return (
-      <div className="profile-avatar-button">
-        <Dropdown>
-          <OverlayTrigger
-            key="top"
-            placement="top"
-            overlay={(
-              <Tooltip variant="light" id="tooltip-top">
-                {!isDefault ? (
-                  <p className="h5 font-weight-normal m-0 p-0">
-                    {intl.formatMessage(messages['profile.profileavatar.tooltip.edit'])}
-                  </p>
-                ) : (
-                  <p className="h5 font-weight-normal m-0 p-0">
-                    {intl.formatMessage(messages['profile.profileavatar.tooltip.upload'])}
-                  </p>
-                )}
-              </Tooltip>
-              )}
-          >
-            <Dropdown.Toggle
-              invertColors
-              isActive
-              id="dropdown-toggle-with-iconbutton"
-              as={IconButton}
-              src={PhotoCamera}
-              iconAs={Icon}
-              variant="primary"
-              className="shadow-sm"
-            />
-          </OverlayTrigger>
-          <Dropdown.Menu className="min-width-179px p-0 m-0">
-            <Dropdown.Item type="button" onClick={onClickUpload}>
-              <FormattedMessage
-                id="profile.profileavatar.upload-button"
-                defaultMessage="Upload photo"
-                description="Upload photo button"
-              />
-            </Dropdown.Item>
-            {!isDefault && (
-              <Dropdown.Item type="button" onClick={onClickDelete}>
-                <FormattedMessage
-                  id="profile.profileavatar.remove.button"
-                  defaultMessage="Remove photo"
-                  description="Remove photo button"
-                />
-              </Dropdown.Item>
-            )}
-          </Dropdown.Menu>
-        </Dropdown>
+      <div className="profile-avatar-menu-container">
+        {this.renderMenuContent()}
       </div>
     );
-  };
+  }
 
-  const renderAvatar = () => (
-    isDefault ? (
+  renderAvatar() {
+    const { intl } = this.props;
+
+    return this.props.isDefault ? (
       <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 object-fit-cover"
+        className="w-100 h-100 d-block rounded-circle overflow-hidden"
+        style={{ objectFit: 'cover' }}
         alt={intl.formatMessage(messages['profile.image.alt.attribute'])}
-        src={src}
+        src={this.props.src}
       />
-    )
-  );
+    );
+  }
 
-  return (
-    <div className="profile-avatar-wrap position-relative">
-      <div className="profile-avatar rounded-circle bg-light">
-        {savePhotoState === 'pending' && renderPending()}
-        {renderAvatar()}
+  render() {
+    return (
+      <div className="profile-avatar-wrap position-relative">
+        <div className="profile-avatar rounded-circle bg-light">
+          {this.props.savePhotoState === 'pending' ? this.renderPending() : this.renderMenu() }
+          {this.renderAvatar()}
+        </div>
+        <form
+          ref={this.form}
+          onSubmit={this.onSubmit}
+          encType="multipart/form-data"
+        >
+          {/* The name of this input must be 'file' */}
+          <input
+            className="d-none form-control-file"
+            ref={this.fileInput}
+            type="file"
+            name="file"
+            id="photo-file"
+            onChange={this.onChangeInput}
+            accept=".jpg, .jpeg, .png"
+          />
+        </form>
       </div>
-      {renderEditButton()}
-      <form
-        ref={form}
-        onSubmit={onSubmit}
-        encType="multipart/form-data"
-      >
-        <input
-          className="d-none form-control-file"
-          ref={fileInput}
-          type="file"
-          name="file"
-          id="photo-file"
-          onChange={onChangeInput}
-          accept=".jpg, .jpeg, .png"
-        />
-      </form>
-    </div>
-  );
-};
+    );
+  }
+}
+
+export default injectIntl(ProfileAvatar);
 
 ProfileAvatar.propTypes = {
   src: PropTypes.string,
@@ -158,6 +161,7 @@ ProfileAvatar.propTypes = {
   onDelete: PropTypes.func.isRequired,
   savePhotoState: PropTypes.oneOf([null, 'pending', 'complete', 'error']),
   isEditable: PropTypes.bool,
+  intl: intlShape.isRequired,
 };
 
 ProfileAvatar.defaultProps = {
@@ -166,5 +170,3 @@ ProfileAvatar.defaultProps = {
   savePhotoState: null,
   isEditable: false,
 };
-
-export default ProfileAvatar;

src/profile/forms/ProfileAvatar.messages.jsx

@@ -11,16 +11,6 @@ const messages = defineMessages({
     defaultMessage: 'Change',
     description: 'Change photo button',
   },
-  'profile.profileavatar.tooltip.edit': {
-    id: 'profile.profileavatar.tooltip.edit',
-    defaultMessage: 'Edit photo',
-    description: 'Tooltip for edit photo button',
-  },
-  'profile.profileavatar.tooltip.upload': {
-    id: 'profile.profileavatar.tooltip.upload',
-    defaultMessage: 'Upload photo',
-    description: 'Tooltip for upload photo button',
-  },
 });
 
 export default messages;