feat(deps): update header to 5.6.0 (#1112)

This reverts commit 1fb7b96c40.

.env

@@ -10,6 +10,8 @@ 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=''
@@ -26,9 +28,4 @@ COLLECT_YEAR_OF_BIRTH=true
 APP_ID=''
 MFE_CONFIG_API_URL=''
 SEARCH_CATALOG_URL=''
-ENABLE_SKILLS_BUILDER=''
 ENABLE_SKILLS_BUILDER_PROFILE=''
-ALGOLIA_APP_ID=''
-ALGOLIA_JOBS_INDEX_NAME=''
-ALGOLIA_PRODUCT_INDEX_NAME=''
-ALGOLIA_SEARCH_API_KEY=''

.env.development

@@ -3,7 +3,9 @@ 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'
@@ -27,9 +29,4 @@ COLLECT_YEAR_OF_BIRTH=true
 APP_ID=''
 MFE_CONFIG_API_URL=''
 SEARCH_CATALOG_URL='http://localhost:18000/courses'
-ENABLE_SKILLS_BUILDER='true'
 ENABLE_SKILLS_BUILDER_PROFILE=''
-ALGOLIA_APP_ID=''
-ALGOLIA_JOBS_INDEX_NAME=''
-ALGOLIA_PRODUCT_INDEX_NAME=''
-ALGOLIA_SEARCH_API_KEY=''

.env.test

@@ -5,6 +5,8 @@ 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'
@@ -18,13 +20,8 @@ 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='true'
 ENABLE_SKILLS_BUILDER_PROFILE=''
 LEARNER_RECORD_MFE_BASE_URL='http://localhost:1990'
 COLLECT_YEAR_OF_BIRTH=true
 APP_ID=''
 MFE_CONFIG_API_URL=''
-ALGOLIA_APP_ID=''
-ALGOLIA_JOBS_INDEX_NAME=''
-ALGOLIA_PRODUCT_INDEX_NAME=''
-ALGOLIA_SEARCH_API_KEY=''

.eslintrc.js

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

.github/CODEOWNERS

@@ -0,0 +1 @@
+*   @openedx/2U-infinity

.github/dependabot.yml

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

.github/pull_request_template.md

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

@@ -13,17 +13,18 @@ jobs:
         - i18n_extract
         - lint
         - test
+        node: [18, 20]
     steps:
-    - uses: actions/checkout@v3
-    - name: Setup Nodejs Env
-      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
-    - uses: actions/setup-node@v3
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
       with:
-        node-version: ${{ env.NODE_VER }}
+        node-version: ${{ matrix.node }}
     - run: make requirements
     - run: make test NPM_TESTS=build
     - run: make test NPM_TESTS=${{ matrix.npm-test }}
-    - name: upload coverage
-      uses: codecov/codecov-action@v3
+    - name: Coverage
+      if: ${{ matrix.npm-test == 'test' }}
+      uses: codecov/codecov-action@v4
       with:
-        fail_ci_if_error: false
+        token: ${{ secrets.CODECOV_TOKEN }}
+        fail_ci_if_error: true

.gitignore

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

.nvmrc

@@ -1 +1 @@
-18
+20

.tx/config

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

Makefile

@@ -1,13 +1,9 @@
-export TRANSIFEX_RESOURCE = frontend-app-profile
-transifex_resource = frontend-app-profile
-transifex_langs = "ar,fr,es_419,zh_CN,pt,it,de,uk,ru,hi,fr_CA"
-
 intl_imports = ./node_modules/.bin/intl-imports.js
 transifex_utils = ./node_modules/.bin/transifex-utils.js
 i18n = ./src/i18n
 transifex_input = $(i18n)/transifex_input.json
 # This directory must match .babelrc .
-transifex_temp = ./temp/babel-plugin-react-intl
+transifex_temp = ./temp/babel-plugin-formatjs
 
 NPM_TESTS=build i18n_extract lint test
 
@@ -39,34 +35,18 @@ detect_changed_source_translations:
 	# Checking for changed translations...
 	git diff --exit-code $(i18n)
 
-# 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/@edx/reactifex/bash_scripts/get_hashed_strings_v3.sh
-	# Writing out comments to file...
-	$(transifex_utils) $(transifex_temp) --comments --v3-scripts-path
-	# Pushing comments to Transifex...
-	./node_modules/@edx/reactifex/bash_scripts/put_comments_v3.sh
-
-ifeq ($(OPENEDX_ATLAS_PULL),)
-# Pulls translations from Transifex.
-pull_translations:
-	tx pull -t -f --mode reviewed --languages=$(transifex_langs)
-else
-# Experimental: OEP-58 Pulls translations using atlas
 pull_translations:
 	rm -rf src/i18n/messages
 	mkdir src/i18n/messages
 	cd src/i18n/messages \
-      && atlas pull --filter=$(transifex_langs) \
+      && 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
 
-	$(intl_imports) frontend-component-header frontend-component-footer frontend-app-profile
-endif
+	$(intl_imports) frontend-platform paragon frontend-component-header frontend-component-footer frontend-app-profile
 
 # This target is used by Travis.
 validate-no-uncommitted-package-lock-changes:

README.rst

@@ -1,57 +1,153 @@
-|Build Status| |Codecov| |license|
-
+#####################
 frontend-app-profile
-====================
+#####################
 
-This is a micro-frontend application responsible for the display and updating of user profiles. Please tag **@openedx/2u-aperture** on any PRs or issues.
+|license-badge| |status-badge| |ci-badge| |codecov-badge|
+
+.. |license-badge| image:: https://img.shields.io/github/license/openedx/frontend-app-profile.svg
+    :target: https://github.com/openedx/frontend-app-profile/blob/main/LICENSE
+    :alt: License
+
+.. |status-badge| image:: https://img.shields.io/badge/Status-Maintained-brightgreen
+
+.. |ci-badge| image:: https://github.com/openedx/frontend-app-profile/actions/workflows/ci.yml/badge.svg
+    :target: https://github.com/openedx/frontend-app-profile/actions/workflows/ci.yml
+    :alt: Continuous Integration
+
+.. |codecov-badge| image:: https://codecov.io/github/openedx/frontend-app-profile/coverage.svg?branch=main
+    :target: https://codecov.io/github/openedx/frontend-app-profile?branch=main
+    :alt: Codecov
+
+********
+Purpose
+********
+
+This is a micro-frontend application responsible for the display and updating of user profiles.
 
 When a user views their own profile, they're given fields to edit their full name, location, primary spoken language, education, social links, and bio.  Each field also has a dropdown to select the visibility of that field - i.e., whether it can be viewed by other learners.
 
 When a user views someone else's profile, they see all those fields that that user set as public.
 
-----------
+***************
+Getting Started
+***************
 
-Development
------------
+Installation
+============
 
-Start Devstack
-^^^^^^^^^^^^^^
+Follow these steps to provision, run, and enable an instance of the
+Profile MFE for local development via the `devstack`_.
 
-To use this application `devstack <https://github.com/openedx/devstack>`__ must be running and you must be logged into it.
+.. _devstack: https://github.com/openedx/devstack#getting-started
 
--  Start devstack
--  Log in (http://localhost:18000/login)
+#. To use this application, `devstack <https://github.com/openedx/devstack>`__ must be running and you must be logged into it.
 
-Start the development server
-^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   * Start devstack
+   * Log in (http://localhost:18000/login)
 
-In this project, install requirements and start the development server by running:
+#. To run Profile, install requirements and start the development server by running:
 
-.. code:: bash
+.. code-block::
 
-   npm install
-   npm start # The server will run on port 1995
+  1. Clone your new repo:
 
-Once the dev server is up visit http://localhost:1995/u/staff.
+    ``git clone https://github.com/openedx/frontend-app-profile.git``
 
-----------
+  2. Use node v18.x.
 
-Configuration and Deployment
-----------------------------
+    The current version of the micro-frontend build scripts support node 18.
+    Using other major versions of node *may* work, but this is unsupported.  For
+    convenience, this repository includes an .nvmrc file to help in setting the
+    correct node version via `nvm <https://github.com/nvm-sh/nvm>`_.
+
+  3. Install npm dependencies:
+
+    ``cd frontend-app-profile && npm ci``
+
+  4. Start the dev server:
+
+    ``npm start``
+     The server will run on port 1995
+
+Once the dev server is up, visit http://localhost:1995/u/staff.
+
+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
+=============
 
 This MFE is configured via node environment variables supplied at build time. See the .env file for the list of required environment variables. Example build syntax with a single environment variable:
 
-.. code:: bash
+.. code-block::
 
    NODE_ENV=production ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload' npm run build
 
+Getting Help
+============
 
-For more information see the document: `Micro-frontend applications in Open
-edX <https://edx.readthedocs.io/projects/edx-developer-docs/en/latest/micro-frontends-in-open-edx.html>`__.
+If you're having trouble, we have discussion forums at
+https://discuss.openedx.org where you can connect with others in the community.
 
-.. |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
+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.

catalog-info.yaml

@@ -0,0 +1,24 @@
+# This file records information about this repo. Its use is described in OEP-55:
+# https://open-edx-proposals.readthedocs.io/en/latest/processes/oep-0055-proc-project-maintainers.html
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: '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"
+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('@edx/frontend-build');
+const { createConfig } = require('@openedx/frontend-build');
 
 module.exports = createConfig('jest', {
-  setupFiles: [
+  setupFilesAfterEnv: [
     '<rootDir>/src/setupTest.js',
   ],
 });

package.json

@@ -10,11 +10,12 @@
   },
   "scripts": {
     "build": "fedx-scripts webpack",
-    "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
+    "i18n_extract": "fedx-scripts formatjs extract",
     "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
-    "test": "TZ=UTC fedx-scripts jest --coverage --passWithNoTests"
+    "test": "TZ=UTC fedx-scripts jest --coverage --passWithNoTests",
+    "stubs": "pact-stub-service ./src/pacts/frontend-app-profile-edx-platform.json --port 18000"
   },
   "bugs": {
     "url": "https://github.com/openedx/frontend-app-profile/issues"
@@ -27,54 +28,50 @@
     "extends @edx/browserslist-config"
   ],
   "dependencies": {
-    "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
-    "@edx/frontend-component-footer": "12.0.0",
-    "@edx/frontend-component-header": "4.0.0",
-    "@edx/frontend-platform": "4.5.1",
-    "@edx/paragon": "^20.43.0",
-    "@fortawesome/fontawesome-svg-core": "1.2.36",
-    "@fortawesome/free-brands-svg-icons": "5.15.4",
-    "@fortawesome/free-regular-svg-icons": "5.15.4",
-    "@fortawesome/free-solid-svg-icons": "5.15.4",
-    "@fortawesome/react-fontawesome": "0.2.0",
+    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
+    "@edx/frontend-component-header": "^5.6.0",
+    "@edx/frontend-platform": "8.1.2",
+    "@edx/openedx-atlas": "^0.6.0",
+    "@fortawesome/fontawesome-svg-core": "6.6.0",
+    "@fortawesome/free-brands-svg-icons": "6.6.0",
+    "@fortawesome/free-regular-svg-icons": "6.6.0",
+    "@fortawesome/free-solid-svg-icons": "6.6.0",
+    "@fortawesome/react-fontawesome": "0.2.2",
+    "@openedx/frontend-slot-footer": "^1.0.2",
+    "@openedx/paragon": "^22.2.2",
     "@pact-foundation/pact": "^11.0.2",
-    "algoliasearch": "4.17.2",
-    "classnames": "2.3.2",
-    "core-js": "3.30.2",
-    "history": "4.10.1",
+    "@redux-devtools/extension": "3.3.0",
+    "classnames": "2.5.1",
+    "core-js": "3.38.1",
+    "history": "5.3.0",
     "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": "16.14.0",
-    "react-dom": "16.14.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "react-helmet": "6.1.0",
-    "react-instantsearch-hooks-web": "^6.40.1",
     "react-redux": "7.2.9",
-    "react-router": "5.3.4",
-    "react-router-dom": "5.3.4",
+    "react-router": "6.27.0",
+    "react-router-dom": "6.27.0",
     "redux": "4.2.1",
-    "redux-devtools-extension": "2.13.9",
     "redux-logger": "3.0.6",
-    "redux-saga": "1.2.3",
+    "redux-saga": "1.3.0",
     "redux-thunk": "2.4.2",
-    "regenerator-runtime": "0.13.11",
+    "regenerator-runtime": "0.14.1",
     "reselect": "4.1.8",
     "universal-cookie": "4.0.4"
   },
   "devDependencies": {
-    "@commitlint/cli": "17.6.5",
-    "@commitlint/config-angular": "17.6.5",
+    "@commitlint/cli": "19.5.0",
+    "@commitlint/config-angular": "19.5.0",
     "@edx/browserslist-config": "^1.1.1",
-    "@edx/frontend-build": "12.8.51",
     "@edx/reactifex": "2.2.0",
-    "@testing-library/react": "11.2.7",
-    "codecov": "3.8.3",
-    "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.7",
-    "glob": "8.1.0",
-    "react-test-renderer": "16.14.0",
+    "@openedx/frontend-build": "14.1.5",
+    "@testing-library/jest-dom": "6.6.2",
+    "@testing-library/react": "12.1.5",
+    "glob": "10.4.5",
     "reactifex": "1.1.1",
     "redux-mock-store": "1.5.4"
   }

renovate.json

@@ -24,7 +24,7 @@
       "automerge": true
     },
     {
-      "matchPackagePatterns": ["@edx"],
+      "matchPackagePatterns": ["@edx", "@openedx"],
       "matchUpdateTypes": ["minor", "patch"],
       "automerge": true
     }

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/head/Head.test.jsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { Helmet } from 'react-helmet';
-import { mount } from 'enzyme';
+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', () => {
-    mount(<IntlProvider locale="en"><Head {...props} /></IntlProvider>);
+    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');

src/i18n/index.js

@@ -1,35 +1 @@
-import { messages as headerMessages } from '@edx/frontend-component-header';
-import { messages as footerMessages } from '@edx/frontend-component-footer';
-
-import arMessages from './messages/ar.json';
-import frMessages from './messages/fr.json';
-import es419Messages from './messages/es_419.json';
-import zhcnMessages from './messages/zh_CN.json';
-import ptMessages from './messages/pt.json';
-import itMessages from './messages/it.json';
-import ukMessages from './messages/uk.json';
-import deMessages from './messages/de.json';
-import ruMessages from './messages/ru.json';
-import hiMessages from './messages/hi.json';
-import frCAMessages from './messages/fr_CA.json';
-// no need to import en messages-- they are in the defaultMessage field
-
-const appMessages = {
-  ar: arMessages,
-  'es-419': es419Messages,
-  fr: frMessages,
-  'zh-cn': zhcnMessages,
-  pt: ptMessages,
-  it: itMessages,
-  de: deMessages,
-  hi: hiMessages,
-  'fr-ca': frCAMessages,
-  ru: ruMessages,
-  uk: ukMessages,
-};
-
-export default [
-  headerMessages,
-  footerMessages,
-  appMessages,
-];
+export default [];

src/i18n/messages/ar.json

@@ -1,85 +0,0 @@
-{
-  "profile.page.title": "الملف الشخصي | {siteName}",
-  "profile.age.details": "لمشاركة ملفك الشخصي مع بقية متعلمي {siteName}، يجب أن تؤكد أنك عمرك يفوق 13 عامًا.",
-  "profile.age.set.date": "ضيط تاريخ ميلادك",
-  "profile.datejoined.member.since": "عضو منذ {year}",
-  "profile.bio.empty": "إضافة نبذة قصيرة",
-  "profile.bio.about.me": "نبذة عنّي",
-  "profile.certificate.organization.label": "من طرف",
-  "profile.certificate.completion.date.label": "صدرت بتاريخ {date}",
-  "profile.no.certificates": "ليست لديك أي شهادات يعد.",
-  "profile.certificates.my.certificates": "شهاداتي",
-  "profile.certificates.view.certificate": "معاينة الشهادة",
-  "profile.certificates.types.verified": "شهادة موثقة",
-  "profile.certificates.types.professional": "شهادة مهنية",
-  "profile.certificates.types.unknown": "شهادة",
-  "profile.country.label": "الموقع",
-  "profile.country.empty": "إضافة الموقع",
-  "profile.education.empty": "إضافة المستوى التعليمي",
-  "profile.education.education": "المستوى التعليمي",
-  "profile.education.levels.p": "دكتوراه",
-  "profile.education.levels.m": "ماجستير / ماستر أو شهادة مهنيّة",
-  "profile.education.levels.b": "بكالوريوس / ليسانس",
-  "profile.education.levels.a": "درجة الزمالة / دبلوم الدراسات الجامعية",
-  "profile.education.levels.hs": "الثانوية العامة / البكالوريا",
-  "profile.education.levels.jhs": "المدرسة الإعدادية / المتوسطة",
-  "profile.education.levels.el": "المدرسة الابتدائية / الأساسية",
-  "profile.education.levels.none": "دون تعليم رسمي",
-  "profile.education.levels.o": "نوع آخر من التعليم",
-  "profile.editbutton.edit": "تعديل",
-  "profile.formcontrols.who.can.see": "من يستطيع رؤية هذا:",
-  "profile.formcontrols.button.cancel": "إلغاء",
-  "profile.formcontrols.button.save": "حفظ",
-  "profile.formcontrols.button.saving": "الحفظ جارٍ",
-  "profile.formcontrols.button.saved": "تم الحفظ",
-  "profile.visibility.who.just.me": "أنا فقط",
-  "profile.visibility.who.everyone": "جميع من على {siteName}",
-  "profile.learningGoal.learningGoal": "هدف التعلم",
-  "profile.learningGoal.options.start_career": "أريد أن أبدأ مسيرتي المهنية",
-  "profile.learningGoal.options.advance_career": "أريد أن ارتقي في مسيرتي المهنية",
-  "profile.learningGoal.options.learn_something_new": "أريد أن أتعلم شيئًا جديدًا",
-  "profile.learningGoal.options.something_else": "شيء آخر",
-  "profile.name.full.name": "الاسم الكامل",
-  "profile.name.details": "هذا هو الاسم الذي يظهر في حسابك وفي شهاداتك",
-  "profile.name.empty": "إضافة الاسم",
-  "profile.preferredlanguage.empty": "إضافة اللغة",
-  "profile.preferredlanguage.label": "لغة التحدّث الأساسية",
-  "profile.profileavatar.upload-button": "تحميل صورة",
-  "profile.profileavatar.remove.button": "حذف",
-  "profile.image.alt.attribute": "صورة الملف الشخصي",
-  "profile.profileavatar.change-button": "تغيير",
-  "profile.sociallinks.add": "إضافة {network}",
-  "profile.sociallinks.social.links": "روابط التواصل الاجتماعي",
-  "profile.notfound.message": "الصفحة التي تبحث عنها غير متوفرة أو هناك خطأ في العنوان. رجاءً تحقق من العنوان و حاول مجدّدًا.",
-  "profile.viewMyRecords": "عرض سجلّاتي",
-  "profile.loading": "يتم تحميل الملف الشخصي...",
-  "profile.username.description": "معلومات ملفك الشخصي تظهر لك فقط. وحده اسم المستخدم الخاص بك يظهر للآخرين على {siteName}.",
-  "skills.builder.header.title": "باني المهارات",
-  "skills.builder.header.subheading": "دع (المنصة التعليمية أو edX) ان تكون دليلك",
-  "skills.builder.header.title.is.medium": "edX Skills builder",
-  "go.back.button": "العودة إلى الخلف",
-  "next.step.button": "الخطوة التالية",
-  "exit.button": "خروج",
-  "select.preferences": "حدد التفضيلاتك",
-  "review.results": "مراجعة النتائج",
-  "skills.builder.description": "ابحث عن الدورات والبرامج المناسبة التي تساعدك في الوصول إلى أهدافك.",
-  "learning.goal.prompt": "أولاً، أخبرنا بما تريد تحقيقه",
-  "select.learning.goal": "اختر هدفًا",
-  "learning.goal.start_career": "أريد أن أبدأ مسيرتي المهنية",
-  "learning.goal.advance_career": "أريد أن ارتقي في مهنتي",
-  "learning.goal.change_career": "اريد تغيير المهنتي",
-  "learning.goal.something.new": "أريد أن أتعلم شيئًا جديدًا",
-  "learning.goal.something.else": "شيء آخر",
-  "job.title.prompt": "بعد ذلك، ابحث وحدد المسمى الوظيفي الحالي الخاص بك",
-  "job.title.input.placeholder.text": "أبحث واختار مسمى وظيفي",
-  "student.checkbox.prompt": "أنا طالب",
-  "currently.looking.checkbox.prompt": "أنا حاليا أبحث عن عمل",
-  "career.interest.prompt": "ما هي المهن التي تثير اهتمامك؟",
-  "career.interest.input.placeholder.text": "حدد ما يصل إلى ثلاث عناوين وظيفية جديدة",
-  "career.interest.remove.button.alt.text": "إزالة الاهتمام الوظيفي:",
-  "matches.found.success.alert": "وجدنا المهارات والدورات التي تناسب تفضيلاتك!",
-  "matches.not.found.danger.alert": "لم نتمكن من استرداد التوصيات في هذا الوقت. الرجاء معاودة المحاولة في وقت لاحق.",
-  "related.skills.heading": "مهارات ذات الصلة",
-  "related.skills.selectable.box.label.text": "مهارات ذات الصلة:",
-  "product.recommendations.header.text": "{productType} recommendations for {jobName}"
-}

src/i18n/messages/de.json

@@ -1,85 +0,0 @@
-{
-  "profile.page.title": "Profile | {siteName}",
-  "profile.age.details": "To share your profile with other {siteName} learners, you must confirm that you are over the age of 13.",
-  "profile.age.set.date": "Set your date of birth",
-  "profile.datejoined.member.since": "Member since {year}",
-  "profile.bio.empty": "Add a short bio",
-  "profile.bio.about.me": "About Me",
-  "profile.certificate.organization.label": "From",
-  "profile.certificate.completion.date.label": "Completed on {date}",
-  "profile.no.certificates": "You don't have any certificates yet.",
-  "profile.certificates.my.certificates": "My Certificates",
-  "profile.certificates.view.certificate": "View Certificate",
-  "profile.certificates.types.verified": "Verified Certificate",
-  "profile.certificates.types.professional": "Professional Certificate",
-  "profile.certificates.types.unknown": "Certificate",
-  "profile.country.label": "Location",
-  "profile.country.empty": "Add location",
-  "profile.education.empty": "Add education",
-  "profile.education.education": "Education",
-  "profile.education.levels.p": "Doctorate",
-  "profile.education.levels.m": "Master's or professional degree",
-  "profile.education.levels.b": "Bachelor's Degree",
-  "profile.education.levels.a": "Associate's degree",
-  "profile.education.levels.hs": "Secondary/high school",
-  "profile.education.levels.jhs": "Junior secondary/junior high/middle school",
-  "profile.education.levels.el": "Elementary/primary school",
-  "profile.education.levels.none": "No formal education",
-  "profile.education.levels.o": "Other education",
-  "profile.editbutton.edit": "Edit",
-  "profile.formcontrols.who.can.see": "Who can see this:",
-  "profile.formcontrols.button.cancel": "Cancel",
-  "profile.formcontrols.button.save": "Save",
-  "profile.formcontrols.button.saving": "Saving",
-  "profile.formcontrols.button.saved": "Saved",
-  "profile.visibility.who.just.me": "Just me",
-  "profile.visibility.who.everyone": "Everyone on {siteName}",
-  "profile.learningGoal.learningGoal": "Learning Goal",
-  "profile.learningGoal.options.start_career": "I want to start my career",
-  "profile.learningGoal.options.advance_career": "I want to advance my career",
-  "profile.learningGoal.options.learn_something_new": "I want to learn something new",
-  "profile.learningGoal.options.something_else": "Something else",
-  "profile.name.full.name": "Full Name",
-  "profile.name.details": "This is the name that appears in your account and on your certificates.",
-  "profile.name.empty": "Add name",
-  "profile.preferredlanguage.empty": "Add language",
-  "profile.preferredlanguage.label": "Primary Language Spoken",
-  "profile.profileavatar.upload-button": "Upload Photo",
-  "profile.profileavatar.remove.button": "Remove",
-  "profile.image.alt.attribute": "profile avatar",
-  "profile.profileavatar.change-button": "Change",
-  "profile.sociallinks.add": "Add {network}",
-  "profile.sociallinks.social.links": "Social Links",
-  "profile.notfound.message": "The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again.",
-  "profile.viewMyRecords": "View My Records",
-  "profile.loading": "Profile loading...",
-  "profile.username.description": "Your profile information is only visible to you. Only your username is visible to others on {siteName}.",
-  "skills.builder.header.title": "Skills Builder",
-  "skills.builder.header.subheading": "Let edX be your guide",
-  "skills.builder.header.title.is.medium": "edX Skills builder",
-  "go.back.button": "Go Back",
-  "next.step.button": "Next Step",
-  "exit.button": "Exit",
-  "select.preferences": "Select preferences",
-  "review.results": "Review results",
-  "skills.builder.description": "Find the right courses and programs that help you reach your goals.",
-  "learning.goal.prompt": "First, tell us what you want to achieve",
-  "select.learning.goal": "Select a goal",
-  "learning.goal.start_career": "I want to start my career",
-  "learning.goal.advance_career": "I want to advance my career",
-  "learning.goal.change_career": "I want to change careers",
-  "learning.goal.something.new": "I want to learn something new",
-  "learning.goal.something.else": "Something else",
-  "job.title.prompt": "Next, search and select your current job title",
-  "job.title.input.placeholder.text": "Search and select a job title",
-  "student.checkbox.prompt": "I'm a student",
-  "currently.looking.checkbox.prompt": "I'm currently looking for work",
-  "career.interest.prompt": "What careers are you interested in?",
-  "career.interest.input.placeholder.text": "Select up to 3 new job titles",
-  "career.interest.remove.button.alt.text": "Remove career interest: ",
-  "matches.found.success.alert": "We found skills and courses that match your preferences!",
-  "matches.not.found.danger.alert": "We were not able to retrieve recommendations at this time. Please try again later.",
-  "related.skills.heading": "Related Skills",
-  "related.skills.selectable.box.label.text": "Related skills:",
-  "product.recommendations.header.text": "{productType} recommendations for {jobName}"
-}

src/i18n/messages/es_419.json

@@ -1,85 +0,0 @@
-{
-  "profile.page.title": "Perfil | {siteName}",
-  "profile.age.details": "Para compartir el perfil con otros {siteName} estudiantes, debe confirmar que es mayor de 13 años.",
-  "profile.age.set.date": "Establece tu fecha de nacimiento",
-  "profile.datejoined.member.since": "Miembro desde {year}",
-  "profile.bio.empty": "Añade una breve biografía",
-  "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 {siteName}",
-  "profile.learningGoal.learningGoal": "Objetivo de aprendizaje",
-  "profile.learningGoal.options.start_career": "quiero empezar mi carrera",
-  "profile.learningGoal.options.advance_career": "Quiero avanzar en mi carrera",
-  "profile.learningGoal.options.learn_something_new": "quiero aprender algo nuevo",
-  "profile.learningGoal.options.something_else": "Algo más",
-  "profile.name.full.name": "Nombre completo",
-  "profile.name.details": "Este es el nombre que aparecerá en tu cuenta y en tus certificados.",
-  "profile.name.empty": "Añade nombre",
-  "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...",
-  "profile.username.description": "La información del perfil solo la visualiza usted. Solo el nombre de usuario es visible para los demás en {siteName}.",
-  "skills.builder.header.title": "Constructor de habilidades",
-  "skills.builder.header.subheading": "Dejanos ser tu guía",
-  "skills.builder.header.title.is.medium": "edX Skills builder",
-  "go.back.button": "Volver Atrás",
-  "next.step.button": "Próximo paso",
-  "exit.button": "Salida",
-  "select.preferences": "Seleccionar preferencias",
-  "review.results": "Revisar resultados",
-  "skills.builder.description": "Encontrar los cursos y programas adecuados que lo ayuden a alcanzar sus metas.",
-  "learning.goal.prompt": "Primero, contar qué quieres lograr",
-  "select.learning.goal": "Seleccionar una meta",
-  "learning.goal.start_career": "Quiero empezar mi carrera",
-  "learning.goal.advance_career": "Quiero avanzar en mi carrera",
-  "learning.goal.change_career": "Quiero cambiar de carrera",
-  "learning.goal.something.new": "Quiero aprender algo nuevo",
-  "learning.goal.something.else": "Algo más",
-  "job.title.prompt": "A continuación, busque y seleccione su título de trabajo actual",
-  "job.title.input.placeholder.text": "Search and select a job title",
-  "student.checkbox.prompt": "Soy un estudiante",
-  "currently.looking.checkbox.prompt": "Actualmente estoy buscando trabajo",
-  "career.interest.prompt": "¿Qué carreras te interesan?",
-  "career.interest.input.placeholder.text": "Select up to 3 new job titles",
-  "career.interest.remove.button.alt.text": "Eliminar interés profesional:",
-  "matches.found.success.alert": "We found skills and courses that match your preferences!",
-  "matches.not.found.danger.alert": "We were not able to retrieve recommendations at this time. Please try again later.",
-  "related.skills.heading": "Related Skills",
-  "related.skills.selectable.box.label.text": "Related skills:",
-  "product.recommendations.header.text": "{productType} recommendations for {jobName}"
-}

src/i18n/messages/fr.json

@@ -1,85 +0,0 @@
-{
-  "profile.page.title": "Profile | {siteName}",
-  "profile.age.details": "Pour partager votre profil avec d'autres étudiants {siteName}, vous devez confirmer que vous avez plus de 13 ans.",
-  "profile.age.set.date": "Définissez votre date de naissance",
-  "profile.datejoined.member.since": "Membre depuis {year}",
-  "profile.bio.empty": "Ajouter une courte biographie",
-  "profile.bio.about.me": "À propos de moi",
-  "profile.certificate.organization.label": "De",
-  "profile.certificate.completion.date.label": "Terminé le {date}",
-  "profile.no.certificates": "Vous n'avez pas encore de certificats.",
-  "profile.certificates.my.certificates": "Mes certificats",
-  "profile.certificates.view.certificate": "Voir le certificat",
-  "profile.certificates.types.verified": "Certificat vérifié",
-  "profile.certificates.types.professional": "Certificat professionnel",
-  "profile.certificates.types.unknown": "Certificat",
-  "profile.country.label": "Localisation",
-  "profile.country.empty": "Ajouter localisation",
-  "profile.education.empty": "Ajouter une éducation",
-  "profile.education.education": "Education",
-  "profile.education.levels.p": "Doctorat",
-  "profile.education.levels.m": "Master ou diplôme professionnel",
-  "profile.education.levels.b": "Diplôme de licence",
-  "profile.education.levels.a": "Grade de l'associé",
-  "profile.education.levels.hs": "Lycée / enseignement secondaire",
-  "profile.education.levels.jhs": "Collège / enseignement secondaire inférieur",
-  "profile.education.levels.el": "Enseignement primaire",
-  "profile.education.levels.none": "Sans diplôme",
-  "profile.education.levels.o": "Autre niveau d'étude",
-  "profile.editbutton.edit": "Modifier",
-  "profile.formcontrols.who.can.see": "Qui peut voir ça :",
-  "profile.formcontrols.button.cancel": "Annuler",
-  "profile.formcontrols.button.save": "Enregistrer",
-  "profile.formcontrols.button.saving": "Enregistrement",
-  "profile.formcontrols.button.saved": "Enregistré",
-  "profile.visibility.who.just.me": "Juste moi",
-  "profile.visibility.who.everyone": "Tout le monde sur {siteName}",
-  "profile.learningGoal.learningGoal": "Learning Goal",
-  "profile.learningGoal.options.start_career": "I want to start my career",
-  "profile.learningGoal.options.advance_career": "I want to advance my career",
-  "profile.learningGoal.options.learn_something_new": "I want to learn something new",
-  "profile.learningGoal.options.something_else": "Something else",
-  "profile.name.full.name": "Nom complet",
-  "profile.name.details": "C'est le nom qui apparaît dans votre compte et sur vos certificats.",
-  "profile.name.empty": "Ajouter un nom",
-  "profile.preferredlanguage.empty": "Ajouter une langue",
-  "profile.preferredlanguage.label": "Langue principale parlée",
-  "profile.profileavatar.upload-button": "Envoyer la photo",
-  "profile.profileavatar.remove.button": "Supprimer",
-  "profile.image.alt.attribute": "Profil avatar",
-  "profile.profileavatar.change-button": "Modifier",
-  "profile.sociallinks.add": "Ajouter {network}",
-  "profile.sociallinks.social.links": "Liens vers les réseaux sociaux",
-  "profile.notfound.message": "La page que vous recherchez n'est pas disponible ou il y a une erreur dans l'URL. Veuillez vérifier l'URL et réessayer.",
-  "profile.viewMyRecords": "Voir mes succès",
-  "profile.loading": "Chargement du profil....",
-  "profile.username.description": "Les informations de votre profil ne sont visibles que par vous. Seul votre nom d'utilisateur est visible par les autres sur {siteName}.",
-  "skills.builder.header.title": "Skills Builder",
-  "skills.builder.header.subheading": "Let edX be your guide",
-  "skills.builder.header.title.is.medium": "edX Skills builder",
-  "go.back.button": "Go Back",
-  "next.step.button": "Next Step",
-  "exit.button": "Exit",
-  "select.preferences": "Select preferences",
-  "review.results": "Review results",
-  "skills.builder.description": "Find the right courses and programs that help you reach your goals.",
-  "learning.goal.prompt": "First, tell us what you want to achieve",
-  "select.learning.goal": "Select a goal",
-  "learning.goal.start_career": "I want to start my career",
-  "learning.goal.advance_career": "I want to advance my career",
-  "learning.goal.change_career": "I want to change careers",
-  "learning.goal.something.new": "I want to learn something new",
-  "learning.goal.something.else": "Something else",
-  "job.title.prompt": "Next, search and select your current job title",
-  "job.title.input.placeholder.text": "Search and select a job title",
-  "student.checkbox.prompt": "I'm a student",
-  "currently.looking.checkbox.prompt": "I'm currently looking for work",
-  "career.interest.prompt": "What careers are you interested in?",
-  "career.interest.input.placeholder.text": "Select up to 3 new job titles",
-  "career.interest.remove.button.alt.text": "Remove career interest: ",
-  "matches.found.success.alert": "We found skills and courses that match your preferences!",
-  "matches.not.found.danger.alert": "We were not able to retrieve recommendations at this time. Please try again later.",
-  "related.skills.heading": "Related Skills",
-  "related.skills.selectable.box.label.text": "Related skills:",
-  "product.recommendations.header.text": "{productType} recommendations for {jobName}"
-}

src/i18n/messages/fr_CA.json

@@ -1,85 +0,0 @@
-{
-  "profile.page.title": "Profil | {siteName}",
-  "profile.age.details": "Pour partager votre profil avec d'autres apprenants {siteName}, vous devez confirmer que vous avez plus de 13 ans.",
-  "profile.age.set.date": "Entrez votre date de naissance",
-  "profile.datejoined.member.since": "Membre depuis {year}",
-  "profile.bio.empty": "Ajouter une courte biographie",
-  "profile.bio.about.me": "À propos de moi",
-  "profile.certificate.organization.label": "De",
-  "profile.certificate.completion.date.label": "Terminé le {date}",
-  "profile.no.certificates": "Vous n'avez pas encore d'attestation.",
-  "profile.certificates.my.certificates": "Mes Attestations",
-  "profile.certificates.view.certificate": "Voir votre attestation",
-  "profile.certificates.types.verified": "Attestation vérifiée",
-  "profile.certificates.types.professional": "Attestation professionnelle",
-  "profile.certificates.types.unknown": "Attestation",
-  "profile.country.label": "Adresse",
-  "profile.country.empty": "Ajouter un emplacement",
-  "profile.education.empty": "Ajouter formation",
-  "profile.education.education": "Formation",
-  "profile.education.levels.p": "Doctorat",
-  "profile.education.levels.m": "Maîtrise ou diplôme professionnel",
-  "profile.education.levels.b": "Diplôme de baccalauréat",
-  "profile.education.levels.a": "Diplôme d'associé",
-  "profile.education.levels.hs": "Lycée / enseignement secondaire",
-  "profile.education.levels.jhs": "Collège / enseignement secondaire inférieur",
-  "profile.education.levels.el": "Enseignement primaire",
-  "profile.education.levels.none": "Sans formation formelle",
-  "profile.education.levels.o": "Autre niveau de formation",
-  "profile.editbutton.edit": "Éditer",
-  "profile.formcontrols.who.can.see": "Qui peut voir ça :",
-  "profile.formcontrols.button.cancel": "Annuler",
-  "profile.formcontrols.button.save": "Sauvegarder",
-  "profile.formcontrols.button.saving": "Sauvegarde en cours",
-  "profile.formcontrols.button.saved": "Sauvegardé",
-  "profile.visibility.who.just.me": "Juste moi",
-  "profile.visibility.who.everyone": "Tout le monde sur {siteName}",
-  "profile.learningGoal.learningGoal": "Objectif d'apprentissage",
-  "profile.learningGoal.options.start_career": "Je veux commencer ma carrière",
-  "profile.learningGoal.options.advance_career": "Je veux faire progresser ma carrière",
-  "profile.learningGoal.options.learn_something_new": "Je veux apprendre quelque chose de nouveau",
-  "profile.learningGoal.options.something_else": "Autre chose",
-  "profile.name.full.name": "Nom complet",
-  "profile.name.details": "C'est le nom qui apparaît dans votre compte et sur vos attestations.",
-  "profile.name.empty": "Ajouter un nom",
-  "profile.preferredlanguage.empty": "Ajouter une langue",
-  "profile.preferredlanguage.label": "Langue principale parlée",
-  "profile.profileavatar.upload-button": "Téléverser une photo",
-  "profile.profileavatar.remove.button": "Supprimer",
-  "profile.image.alt.attribute": "avatar de profil",
-  "profile.profileavatar.change-button": "Modifier",
-  "profile.sociallinks.add": "Ajouter {network}",
-  "profile.sociallinks.social.links": "Liens vers les réseaux sociaux",
-  "profile.notfound.message": "La page que vous recherchez n'est pas disponible ou il y a une erreur dans l'URL. Veuillez vérifier l'URL et réessayer.",
-  "profile.viewMyRecords": "Afficher mes dossiers",
-  "profile.loading": "Chargement du profil...",
-  "profile.username.description": "Les informations de votre profil ne sont visibles que par vous. Seul votre nom d'utilisateur est visible par les autres sur {siteName}.",
-  "skills.builder.header.title": "Constructeur de compétences",
-  "skills.builder.header.subheading": "Laissez EDUlib être votre guide",
-  "skills.builder.header.title.is.medium": "Générateur de compétences edX",
-  "go.back.button": "Retour",
-  "next.step.button": "Prochaine étape",
-  "exit.button": "Sortie",
-  "select.preferences": "Sélectionnez les préférences",
-  "review.results": "Examiner les résultats",
-  "skills.builder.description": "Trouvez les bons cours et programmes qui vous aideront à atteindre vos objectifs.",
-  "learning.goal.prompt": "Tout d'abord, dites-nous ce que vous voulez réaliser",
-  "select.learning.goal": "Sélectionnez un objectif",
-  "learning.goal.start_career": "Je veux commencer ma carrière",
-  "learning.goal.advance_career": "Je veux faire progresser ma carrière",
-  "learning.goal.change_career": "Je veux changer de métier",
-  "learning.goal.something.new": "Je veux apprendre quelque chose de nouveau",
-  "learning.goal.something.else": "Autre chose",
-  "job.title.prompt": "Ensuite, recherchez et sélectionnez votre titre de poste actuel",
-  "job.title.input.placeholder.text": "Rechercher et sélectionner un intitulé de poste",
-  "student.checkbox.prompt": "Je suis étudiant.e",
-  "currently.looking.checkbox.prompt": "Je suis actuellement à la recherche d'un emploi",
-  "career.interest.prompt": "Quels métiers vous intéressent ?",
-  "career.interest.input.placeholder.text": "Sélectionnez jusqu'à 3 nouveaux intitulés de poste",
-  "career.interest.remove.button.alt.text": "Supprimer l'intérêt professionnel :",
-  "matches.found.success.alert": "Nous avons trouvé des compétences et des cours qui correspondent à vos préférences !",
-  "matches.not.found.danger.alert": "Nous n'avons pas pu récupérer les recommandations pour le moment. Veuillez réessayer plus tard.",
-  "related.skills.heading": "Compétences connexes",
-  "related.skills.selectable.box.label.text": "Compétences connexes:",
-  "product.recommendations.header.text": "{productType} recommandations pour {jobName}"
-}

src/i18n/messages/hi.json

@@ -1,85 +0,0 @@
-{
-  "profile.page.title": "Profile | {siteName}",
-  "profile.age.details": "To share your profile with other {siteName} learners, you must confirm that you are over the age of 13.",
-  "profile.age.set.date": "Set your date of birth",
-  "profile.datejoined.member.since": "Member since {year}",
-  "profile.bio.empty": "Add a short bio",
-  "profile.bio.about.me": "About Me",
-  "profile.certificate.organization.label": "From",
-  "profile.certificate.completion.date.label": "Completed on {date}",
-  "profile.no.certificates": "You don't have any certificates yet.",
-  "profile.certificates.my.certificates": "My Certificates",
-  "profile.certificates.view.certificate": "View Certificate",
-  "profile.certificates.types.verified": "Verified Certificate",
-  "profile.certificates.types.professional": "Professional Certificate",
-  "profile.certificates.types.unknown": "Certificate",
-  "profile.country.label": "Location",
-  "profile.country.empty": "Add location",
-  "profile.education.empty": "Add education",
-  "profile.education.education": "Education",
-  "profile.education.levels.p": "Doctorate",
-  "profile.education.levels.m": "Master's or professional degree",
-  "profile.education.levels.b": "Bachelor's Degree",
-  "profile.education.levels.a": "Associate's degree",
-  "profile.education.levels.hs": "Secondary/high school",
-  "profile.education.levels.jhs": "Junior secondary/junior high/middle school",
-  "profile.education.levels.el": "Elementary/primary school",
-  "profile.education.levels.none": "No formal education",
-  "profile.education.levels.o": "Other education",
-  "profile.editbutton.edit": "Edit",
-  "profile.formcontrols.who.can.see": "Who can see this:",
-  "profile.formcontrols.button.cancel": "Cancel",
-  "profile.formcontrols.button.save": "Save",
-  "profile.formcontrols.button.saving": "Saving",
-  "profile.formcontrols.button.saved": "Saved",
-  "profile.visibility.who.just.me": "Just me",
-  "profile.visibility.who.everyone": "Everyone on {siteName}",
-  "profile.learningGoal.learningGoal": "Learning Goal",
-  "profile.learningGoal.options.start_career": "I want to start my career",
-  "profile.learningGoal.options.advance_career": "I want to advance my career",
-  "profile.learningGoal.options.learn_something_new": "I want to learn something new",
-  "profile.learningGoal.options.something_else": "Something else",
-  "profile.name.full.name": "Full Name",
-  "profile.name.details": "This is the name that appears in your account and on your certificates.",
-  "profile.name.empty": "Add name",
-  "profile.preferredlanguage.empty": "Add language",
-  "profile.preferredlanguage.label": "Primary Language Spoken",
-  "profile.profileavatar.upload-button": "Upload Photo",
-  "profile.profileavatar.remove.button": "Remove",
-  "profile.image.alt.attribute": "profile avatar",
-  "profile.profileavatar.change-button": "Change",
-  "profile.sociallinks.add": "Add {network}",
-  "profile.sociallinks.social.links": "Social Links",
-  "profile.notfound.message": "The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again.",
-  "profile.viewMyRecords": "View My Records",
-  "profile.loading": "Profile loading...",
-  "profile.username.description": "Your profile information is only visible to you. Only your username is visible to others on {siteName}.",
-  "skills.builder.header.title": "Skills Builder",
-  "skills.builder.header.subheading": "Let edX be your guide",
-  "skills.builder.header.title.is.medium": "edX Skills builder",
-  "go.back.button": "Go Back",
-  "next.step.button": "Next Step",
-  "exit.button": "Exit",
-  "select.preferences": "Select preferences",
-  "review.results": "Review results",
-  "skills.builder.description": "Find the right courses and programs that help you reach your goals.",
-  "learning.goal.prompt": "First, tell us what you want to achieve",
-  "select.learning.goal": "Select a goal",
-  "learning.goal.start_career": "I want to start my career",
-  "learning.goal.advance_career": "I want to advance my career",
-  "learning.goal.change_career": "I want to change careers",
-  "learning.goal.something.new": "I want to learn something new",
-  "learning.goal.something.else": "Something else",
-  "job.title.prompt": "Next, search and select your current job title",
-  "job.title.input.placeholder.text": "Search and select a job title",
-  "student.checkbox.prompt": "I'm a student",
-  "currently.looking.checkbox.prompt": "I'm currently looking for work",
-  "career.interest.prompt": "What careers are you interested in?",
-  "career.interest.input.placeholder.text": "Select up to 3 new job titles",
-  "career.interest.remove.button.alt.text": "Remove career interest: ",
-  "matches.found.success.alert": "We found skills and courses that match your preferences!",
-  "matches.not.found.danger.alert": "We were not able to retrieve recommendations at this time. Please try again later.",
-  "related.skills.heading": "Related Skills",
-  "related.skills.selectable.box.label.text": "Related skills:",
-  "product.recommendations.header.text": "{productType} recommendations for {jobName}"
-}

src/i18n/messages/it.json

@@ -1,85 +0,0 @@
-{
-  "profile.page.title": "Profile | {siteName}",
-  "profile.age.details": "To share your profile with other {siteName} learners, you must confirm that you are over the age of 13.",
-  "profile.age.set.date": "Set your date of birth",
-  "profile.datejoined.member.since": "Member since {year}",
-  "profile.bio.empty": "Add a short bio",
-  "profile.bio.about.me": "About Me",
-  "profile.certificate.organization.label": "From",
-  "profile.certificate.completion.date.label": "Completed on {date}",
-  "profile.no.certificates": "You don't have any certificates yet.",
-  "profile.certificates.my.certificates": "My Certificates",
-  "profile.certificates.view.certificate": "View Certificate",
-  "profile.certificates.types.verified": "Verified Certificate",
-  "profile.certificates.types.professional": "Professional Certificate",
-  "profile.certificates.types.unknown": "Certificate",
-  "profile.country.label": "Location",
-  "profile.country.empty": "Add location",
-  "profile.education.empty": "Add education",
-  "profile.education.education": "Education",
-  "profile.education.levels.p": "Doctorate",
-  "profile.education.levels.m": "Master's or professional degree",
-  "profile.education.levels.b": "Bachelor's Degree",
-  "profile.education.levels.a": "Associate's degree",
-  "profile.education.levels.hs": "Secondary/high school",
-  "profile.education.levels.jhs": "Junior secondary/junior high/middle school",
-  "profile.education.levels.el": "Elementary/primary school",
-  "profile.education.levels.none": "No formal education",
-  "profile.education.levels.o": "Other education",
-  "profile.editbutton.edit": "Edit",
-  "profile.formcontrols.who.can.see": "Who can see this:",
-  "profile.formcontrols.button.cancel": "Cancel",
-  "profile.formcontrols.button.save": "Save",
-  "profile.formcontrols.button.saving": "Saving",
-  "profile.formcontrols.button.saved": "Saved",
-  "profile.visibility.who.just.me": "Just me",
-  "profile.visibility.who.everyone": "Everyone on {siteName}",
-  "profile.learningGoal.learningGoal": "Learning Goal",
-  "profile.learningGoal.options.start_career": "I want to start my career",
-  "profile.learningGoal.options.advance_career": "I want to advance my career",
-  "profile.learningGoal.options.learn_something_new": "I want to learn something new",
-  "profile.learningGoal.options.something_else": "Something else",
-  "profile.name.full.name": "Full Name",
-  "profile.name.details": "This is the name that appears in your account and on your certificates.",
-  "profile.name.empty": "Add name",
-  "profile.preferredlanguage.empty": "Add language",
-  "profile.preferredlanguage.label": "Primary Language Spoken",
-  "profile.profileavatar.upload-button": "Upload Photo",
-  "profile.profileavatar.remove.button": "Remove",
-  "profile.image.alt.attribute": "profile avatar",
-  "profile.profileavatar.change-button": "Change",
-  "profile.sociallinks.add": "Add {network}",
-  "profile.sociallinks.social.links": "Social Links",
-  "profile.notfound.message": "The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again.",
-  "profile.viewMyRecords": "View My Records",
-  "profile.loading": "Profile loading...",
-  "profile.username.description": "Your profile information is only visible to you. Only your username is visible to others on {siteName}.",
-  "skills.builder.header.title": "Skills Builder",
-  "skills.builder.header.subheading": "Let edX be your guide",
-  "skills.builder.header.title.is.medium": "edX Skills builder",
-  "go.back.button": "Go Back",
-  "next.step.button": "Next Step",
-  "exit.button": "Exit",
-  "select.preferences": "Select preferences",
-  "review.results": "Review results",
-  "skills.builder.description": "Find the right courses and programs that help you reach your goals.",
-  "learning.goal.prompt": "First, tell us what you want to achieve",
-  "select.learning.goal": "Select a goal",
-  "learning.goal.start_career": "I want to start my career",
-  "learning.goal.advance_career": "I want to advance my career",
-  "learning.goal.change_career": "I want to change careers",
-  "learning.goal.something.new": "I want to learn something new",
-  "learning.goal.something.else": "Something else",
-  "job.title.prompt": "Next, search and select your current job title",
-  "job.title.input.placeholder.text": "Search and select a job title",
-  "student.checkbox.prompt": "I'm a student",
-  "currently.looking.checkbox.prompt": "I'm currently looking for work",
-  "career.interest.prompt": "What careers are you interested in?",
-  "career.interest.input.placeholder.text": "Select up to 3 new job titles",
-  "career.interest.remove.button.alt.text": "Remove career interest: ",
-  "matches.found.success.alert": "We found skills and courses that match your preferences!",
-  "matches.not.found.danger.alert": "We were not able to retrieve recommendations at this time. Please try again later.",
-  "related.skills.heading": "Related Skills",
-  "related.skills.selectable.box.label.text": "Related skills:",
-  "product.recommendations.header.text": "{productType} recommendations for {jobName}"
-}

src/i18n/messages/pt.json

@@ -1,85 +0,0 @@
-{
-  "profile.page.title": "Profile | {siteName}",
-  "profile.age.details": "To share your profile with other {siteName} learners, you must confirm that you are over the age of 13.",
-  "profile.age.set.date": "Set your date of birth",
-  "profile.datejoined.member.since": "Member since {year}",
-  "profile.bio.empty": "Add a short bio",
-  "profile.bio.about.me": "About Me",
-  "profile.certificate.organization.label": "From",
-  "profile.certificate.completion.date.label": "Completed on {date}",
-  "profile.no.certificates": "You don't have any certificates yet.",
-  "profile.certificates.my.certificates": "My Certificates",
-  "profile.certificates.view.certificate": "View Certificate",
-  "profile.certificates.types.verified": "Verified Certificate",
-  "profile.certificates.types.professional": "Professional Certificate",
-  "profile.certificates.types.unknown": "Certificate",
-  "profile.country.label": "Location",
-  "profile.country.empty": "Add location",
-  "profile.education.empty": "Add education",
-  "profile.education.education": "Education",
-  "profile.education.levels.p": "Doctorate",
-  "profile.education.levels.m": "Master's or professional degree",
-  "profile.education.levels.b": "Bachelor's Degree",
-  "profile.education.levels.a": "Associate's degree",
-  "profile.education.levels.hs": "Secondary/high school",
-  "profile.education.levels.jhs": "Junior secondary/junior high/middle school",
-  "profile.education.levels.el": "Elementary/primary school",
-  "profile.education.levels.none": "No formal education",
-  "profile.education.levels.o": "Other education",
-  "profile.editbutton.edit": "Edit",
-  "profile.formcontrols.who.can.see": "Who can see this:",
-  "profile.formcontrols.button.cancel": "Cancel",
-  "profile.formcontrols.button.save": "Save",
-  "profile.formcontrols.button.saving": "Saving",
-  "profile.formcontrols.button.saved": "Saved",
-  "profile.visibility.who.just.me": "Just me",
-  "profile.visibility.who.everyone": "Everyone on {siteName}",
-  "profile.learningGoal.learningGoal": "Learning Goal",
-  "profile.learningGoal.options.start_career": "I want to start my career",
-  "profile.learningGoal.options.advance_career": "I want to advance my career",
-  "profile.learningGoal.options.learn_something_new": "I want to learn something new",
-  "profile.learningGoal.options.something_else": "Something else",
-  "profile.name.full.name": "Full Name",
-  "profile.name.details": "This is the name that appears in your account and on your certificates.",
-  "profile.name.empty": "Add name",
-  "profile.preferredlanguage.empty": "Add language",
-  "profile.preferredlanguage.label": "Primary Language Spoken",
-  "profile.profileavatar.upload-button": "Upload Photo",
-  "profile.profileavatar.remove.button": "Remove",
-  "profile.image.alt.attribute": "profile avatar",
-  "profile.profileavatar.change-button": "Change",
-  "profile.sociallinks.add": "Add {network}",
-  "profile.sociallinks.social.links": "Social Links",
-  "profile.notfound.message": "The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again.",
-  "profile.viewMyRecords": "View My Records",
-  "profile.loading": "Profile loading...",
-  "profile.username.description": "Your profile information is only visible to you. Only your username is visible to others on {siteName}.",
-  "skills.builder.header.title": "Skills Builder",
-  "skills.builder.header.subheading": "Let edX be your guide",
-  "skills.builder.header.title.is.medium": "edX Skills builder",
-  "go.back.button": "Go Back",
-  "next.step.button": "Next Step",
-  "exit.button": "Exit",
-  "select.preferences": "Select preferences",
-  "review.results": "Review results",
-  "skills.builder.description": "Find the right courses and programs that help you reach your goals.",
-  "learning.goal.prompt": "First, tell us what you want to achieve",
-  "select.learning.goal": "Select a goal",
-  "learning.goal.start_career": "I want to start my career",
-  "learning.goal.advance_career": "I want to advance my career",
-  "learning.goal.change_career": "I want to change careers",
-  "learning.goal.something.new": "I want to learn something new",
-  "learning.goal.something.else": "Something else",
-  "job.title.prompt": "Next, search and select your current job title",
-  "job.title.input.placeholder.text": "Search and select a job title",
-  "student.checkbox.prompt": "I'm a student",
-  "currently.looking.checkbox.prompt": "I'm currently looking for work",
-  "career.interest.prompt": "What careers are you interested in?",
-  "career.interest.input.placeholder.text": "Select up to 3 new job titles",
-  "career.interest.remove.button.alt.text": "Remove career interest: ",
-  "matches.found.success.alert": "We found skills and courses that match your preferences!",
-  "matches.not.found.danger.alert": "We were not able to retrieve recommendations at this time. Please try again later.",
-  "related.skills.heading": "Related Skills",
-  "related.skills.selectable.box.label.text": "Related skills:",
-  "product.recommendations.header.text": "{productType} recommendations for {jobName}"
-}

src/i18n/messages/ru.json

@@ -1,85 +0,0 @@
-{
-  "profile.page.title": "Profile | {siteName}",
-  "profile.age.details": "To share your profile with other {siteName} learners, you must confirm that you are over the age of 13.",
-  "profile.age.set.date": "Set your date of birth",
-  "profile.datejoined.member.since": "Member since {year}",
-  "profile.bio.empty": "Add a short bio",
-  "profile.bio.about.me": "About Me",
-  "profile.certificate.organization.label": "From",
-  "profile.certificate.completion.date.label": "Completed on {date}",
-  "profile.no.certificates": "You don't have any certificates yet.",
-  "profile.certificates.my.certificates": "My Certificates",
-  "profile.certificates.view.certificate": "View Certificate",
-  "profile.certificates.types.verified": "Verified Certificate",
-  "profile.certificates.types.professional": "Professional Certificate",
-  "profile.certificates.types.unknown": "Certificate",
-  "profile.country.label": "Location",
-  "profile.country.empty": "Add location",
-  "profile.education.empty": "Add education",
-  "profile.education.education": "Education",
-  "profile.education.levels.p": "Doctorate",
-  "profile.education.levels.m": "Master's or professional degree",
-  "profile.education.levels.b": "Bachelor's Degree",
-  "profile.education.levels.a": "Associate's degree",
-  "profile.education.levels.hs": "Secondary/high school",
-  "profile.education.levels.jhs": "Junior secondary/junior high/middle school",
-  "profile.education.levels.el": "Elementary/primary school",
-  "profile.education.levels.none": "No formal education",
-  "profile.education.levels.o": "Other education",
-  "profile.editbutton.edit": "Edit",
-  "profile.formcontrols.who.can.see": "Who can see this:",
-  "profile.formcontrols.button.cancel": "Cancel",
-  "profile.formcontrols.button.save": "Save",
-  "profile.formcontrols.button.saving": "Saving",
-  "profile.formcontrols.button.saved": "Saved",
-  "profile.visibility.who.just.me": "Just me",
-  "profile.visibility.who.everyone": "Everyone on {siteName}",
-  "profile.learningGoal.learningGoal": "Learning Goal",
-  "profile.learningGoal.options.start_career": "I want to start my career",
-  "profile.learningGoal.options.advance_career": "I want to advance my career",
-  "profile.learningGoal.options.learn_something_new": "I want to learn something new",
-  "profile.learningGoal.options.something_else": "Something else",
-  "profile.name.full.name": "Full Name",
-  "profile.name.details": "This is the name that appears in your account and on your certificates.",
-  "profile.name.empty": "Add name",
-  "profile.preferredlanguage.empty": "Add language",
-  "profile.preferredlanguage.label": "Primary Language Spoken",
-  "profile.profileavatar.upload-button": "Upload Photo",
-  "profile.profileavatar.remove.button": "Remove",
-  "profile.image.alt.attribute": "profile avatar",
-  "profile.profileavatar.change-button": "Change",
-  "profile.sociallinks.add": "Add {network}",
-  "profile.sociallinks.social.links": "Social Links",
-  "profile.notfound.message": "The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again.",
-  "profile.viewMyRecords": "View My Records",
-  "profile.loading": "Profile loading...",
-  "profile.username.description": "Your profile information is only visible to you. Only your username is visible to others on {siteName}.",
-  "skills.builder.header.title": "Skills Builder",
-  "skills.builder.header.subheading": "Let edX be your guide",
-  "skills.builder.header.title.is.medium": "edX Skills builder",
-  "go.back.button": "Go Back",
-  "next.step.button": "Next Step",
-  "exit.button": "Exit",
-  "select.preferences": "Select preferences",
-  "review.results": "Review results",
-  "skills.builder.description": "Find the right courses and programs that help you reach your goals.",
-  "learning.goal.prompt": "First, tell us what you want to achieve",
-  "select.learning.goal": "Select a goal",
-  "learning.goal.start_career": "I want to start my career",
-  "learning.goal.advance_career": "I want to advance my career",
-  "learning.goal.change_career": "I want to change careers",
-  "learning.goal.something.new": "I want to learn something new",
-  "learning.goal.something.else": "Something else",
-  "job.title.prompt": "Next, search and select your current job title",
-  "job.title.input.placeholder.text": "Search and select a job title",
-  "student.checkbox.prompt": "I'm a student",
-  "currently.looking.checkbox.prompt": "I'm currently looking for work",
-  "career.interest.prompt": "What careers are you interested in?",
-  "career.interest.input.placeholder.text": "Select up to 3 new job titles",
-  "career.interest.remove.button.alt.text": "Remove career interest: ",
-  "matches.found.success.alert": "We found skills and courses that match your preferences!",
-  "matches.not.found.danger.alert": "We were not able to retrieve recommendations at this time. Please try again later.",
-  "related.skills.heading": "Related Skills",
-  "related.skills.selectable.box.label.text": "Related skills:",
-  "product.recommendations.header.text": "{productType} recommendations for {jobName}"
-}

src/i18n/messages/uk.json

@@ -1,85 +0,0 @@
-{
-  "profile.page.title": "Profile | {siteName}",
-  "profile.age.details": "To share your profile with other {siteName} learners, you must confirm that you are over the age of 13.",
-  "profile.age.set.date": "Set your date of birth",
-  "profile.datejoined.member.since": "Member since {year}",
-  "profile.bio.empty": "Add a short bio",
-  "profile.bio.about.me": "About Me",
-  "profile.certificate.organization.label": "From",
-  "profile.certificate.completion.date.label": "Completed on {date}",
-  "profile.no.certificates": "You don't have any certificates yet.",
-  "profile.certificates.my.certificates": "Мої сертифікати",
-  "profile.certificates.view.certificate": "View Certificate",
-  "profile.certificates.types.verified": "Verified Certificate",
-  "profile.certificates.types.professional": "Professional Certificate",
-  "profile.certificates.types.unknown": "Certificate",
-  "profile.country.label": "Location",
-  "profile.country.empty": "Add location",
-  "profile.education.empty": "Add education",
-  "profile.education.education": "Education",
-  "profile.education.levels.p": "Doctorate",
-  "profile.education.levels.m": "Master's or professional degree",
-  "profile.education.levels.b": "Bachelor's Degree",
-  "profile.education.levels.a": "Associate's degree",
-  "profile.education.levels.hs": "Secondary/high school",
-  "profile.education.levels.jhs": "Junior secondary/junior high/middle school",
-  "profile.education.levels.el": "Elementary/primary school",
-  "profile.education.levels.none": "No formal education",
-  "profile.education.levels.o": "Other education",
-  "profile.editbutton.edit": "Edit",
-  "profile.formcontrols.who.can.see": "Who can see this:",
-  "profile.formcontrols.button.cancel": "Cancel",
-  "profile.formcontrols.button.save": "Save",
-  "profile.formcontrols.button.saving": "Saving",
-  "profile.formcontrols.button.saved": "Saved",
-  "profile.visibility.who.just.me": "Just me",
-  "profile.visibility.who.everyone": "Everyone on {siteName}",
-  "profile.learningGoal.learningGoal": "Learning Goal",
-  "profile.learningGoal.options.start_career": "I want to start my career",
-  "profile.learningGoal.options.advance_career": "I want to advance my career",
-  "profile.learningGoal.options.learn_something_new": "I want to learn something new",
-  "profile.learningGoal.options.something_else": "Something else",
-  "profile.name.full.name": "Full Name",
-  "profile.name.details": "This is the name that appears in your account and on your certificates.",
-  "profile.name.empty": "Add name",
-  "profile.preferredlanguage.empty": "Add language",
-  "profile.preferredlanguage.label": "Primary Language Spoken",
-  "profile.profileavatar.upload-button": "Upload Photo",
-  "profile.profileavatar.remove.button": "Remove",
-  "profile.image.alt.attribute": "profile avatar",
-  "profile.profileavatar.change-button": "Change",
-  "profile.sociallinks.add": "Add {network}",
-  "profile.sociallinks.social.links": "Social Links",
-  "profile.notfound.message": "The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again.",
-  "profile.viewMyRecords": "View My Records",
-  "profile.loading": "Profile loading...",
-  "profile.username.description": "Your profile information is only visible to you. Only your username is visible to others on {siteName}.",
-  "skills.builder.header.title": "Skills Builder",
-  "skills.builder.header.subheading": "Let edX be your guide",
-  "skills.builder.header.title.is.medium": "edX Skills builder",
-  "go.back.button": "Go Back",
-  "next.step.button": "Next Step",
-  "exit.button": "Exit",
-  "select.preferences": "Select preferences",
-  "review.results": "Review results",
-  "skills.builder.description": "Find the right courses and programs that help you reach your goals.",
-  "learning.goal.prompt": "First, tell us what you want to achieve",
-  "select.learning.goal": "Select a goal",
-  "learning.goal.start_career": "I want to start my career",
-  "learning.goal.advance_career": "I want to advance my career",
-  "learning.goal.change_career": "I want to change careers",
-  "learning.goal.something.new": "I want to learn something new",
-  "learning.goal.something.else": "Something else",
-  "job.title.prompt": "Next, search and select your current job title",
-  "job.title.input.placeholder.text": "Search and select a job title",
-  "student.checkbox.prompt": "I'm a student",
-  "currently.looking.checkbox.prompt": "I'm currently looking for work",
-  "career.interest.prompt": "What careers are you interested in?",
-  "career.interest.input.placeholder.text": "Select up to 3 new job titles",
-  "career.interest.remove.button.alt.text": "Remove career interest: ",
-  "matches.found.success.alert": "We found skills and courses that match your preferences!",
-  "matches.not.found.danger.alert": "We were not able to retrieve recommendations at this time. Please try again later.",
-  "related.skills.heading": "Related Skills",
-  "related.skills.selectable.box.label.text": "Related skills:",
-  "product.recommendations.header.text": "{productType} recommendations for {jobName}"
-}

src/i18n/messages/zh_CN.json

@@ -1,85 +0,0 @@
-{
-  "profile.page.title": "Profile | {siteName}",
-  "profile.age.details": "To share your profile with other {siteName} learners, you must confirm that you are over the age of 13.",
-  "profile.age.set.date": "Set your date of birth",
-  "profile.datejoined.member.since": "Member since {year}",
-  "profile.bio.empty": "Add a short bio",
-  "profile.bio.about.me": "About Me",
-  "profile.certificate.organization.label": "From",
-  "profile.certificate.completion.date.label": "Completed on {date}",
-  "profile.no.certificates": "You don't have any certificates yet.",
-  "profile.certificates.my.certificates": "My Certificates",
-  "profile.certificates.view.certificate": "View Certificate",
-  "profile.certificates.types.verified": "Verified Certificate",
-  "profile.certificates.types.professional": "Professional Certificate",
-  "profile.certificates.types.unknown": "Certificate",
-  "profile.country.label": "Location",
-  "profile.country.empty": "Add location",
-  "profile.education.empty": "Add education",
-  "profile.education.education": "Education",
-  "profile.education.levels.p": "Doctorate",
-  "profile.education.levels.m": "Master's or professional degree",
-  "profile.education.levels.b": "Bachelor's Degree",
-  "profile.education.levels.a": "Associate's degree",
-  "profile.education.levels.hs": "Secondary/high school",
-  "profile.education.levels.jhs": "Junior secondary/junior high/middle school",
-  "profile.education.levels.el": "Elementary/primary school",
-  "profile.education.levels.none": "No formal education",
-  "profile.education.levels.o": "Other education",
-  "profile.editbutton.edit": "Edit",
-  "profile.formcontrols.who.can.see": "Who can see this:",
-  "profile.formcontrols.button.cancel": "Cancel",
-  "profile.formcontrols.button.save": "Save",
-  "profile.formcontrols.button.saving": "Saving",
-  "profile.formcontrols.button.saved": "Saved",
-  "profile.visibility.who.just.me": "Just me",
-  "profile.visibility.who.everyone": "Everyone on {siteName}",
-  "profile.learningGoal.learningGoal": "Learning Goal",
-  "profile.learningGoal.options.start_career": "I want to start my career",
-  "profile.learningGoal.options.advance_career": "I want to advance my career",
-  "profile.learningGoal.options.learn_something_new": "I want to learn something new",
-  "profile.learningGoal.options.something_else": "Something else",
-  "profile.name.full.name": "Full Name",
-  "profile.name.details": "This is the name that appears in your account and on your certificates.",
-  "profile.name.empty": "Add name",
-  "profile.preferredlanguage.empty": "Add language",
-  "profile.preferredlanguage.label": "Primary Language Spoken",
-  "profile.profileavatar.upload-button": "Upload Photo",
-  "profile.profileavatar.remove.button": "Remove",
-  "profile.image.alt.attribute": "profile avatar",
-  "profile.profileavatar.change-button": "Change",
-  "profile.sociallinks.add": "Add {network}",
-  "profile.sociallinks.social.links": "Social Links",
-  "profile.notfound.message": "The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again.",
-  "profile.viewMyRecords": "View My Records",
-  "profile.loading": "Profile loading...",
-  "profile.username.description": "Your profile information is only visible to you. Only your username is visible to others on {siteName}.",
-  "skills.builder.header.title": "Skills Builder",
-  "skills.builder.header.subheading": "Let edX be your guide",
-  "skills.builder.header.title.is.medium": "edX Skills builder",
-  "go.back.button": "Go Back",
-  "next.step.button": "Next Step",
-  "exit.button": "Exit",
-  "select.preferences": "Select preferences",
-  "review.results": "Review results",
-  "skills.builder.description": "Find the right courses and programs that help you reach your goals.",
-  "learning.goal.prompt": "First, tell us what you want to achieve",
-  "select.learning.goal": "Select a goal",
-  "learning.goal.start_career": "I want to start my career",
-  "learning.goal.advance_career": "I want to advance my career",
-  "learning.goal.change_career": "I want to change careers",
-  "learning.goal.something.new": "I want to learn something new",
-  "learning.goal.something.else": "Something else",
-  "job.title.prompt": "Next, search and select your current job title",
-  "job.title.input.placeholder.text": "Search and select a job title",
-  "student.checkbox.prompt": "I'm a student",
-  "currently.looking.checkbox.prompt": "I'm currently looking for work",
-  "career.interest.prompt": "What careers are you interested in?",
-  "career.interest.input.placeholder.text": "Select up to 3 new job titles",
-  "career.interest.remove.button.alt.text": "Remove career interest: ",
-  "matches.found.success.alert": "We found skills and courses that match your preferences!",
-  "matches.not.found.danger.alert": "We were not able to retrieve recommendations at this time. Please try again later.",
-  "related.skills.heading": "Related Skills",
-  "related.skills.selectable.box.label.text": "Related skills:",
-  "product.recommendations.header.text": "{productType} recommendations for {jobName}"
-}

src/index.jsx

@@ -17,7 +17,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 import Header from '@edx/frontend-component-header';
-import Footer from '@edx/frontend-component-footer';
+import FooterSlot from '@openedx/frontend-slot-footer';
 
 import messages from './i18n';
 import configureStore from './data/configureStore';
@@ -32,10 +32,10 @@ subscribe(APP_READY, () => {
     <AppProvider store={configureStore()}>
       <Head />
       <Header />
-      <main>
+      <main id="main">
         <AppRoutes />
       </main>
-      <Footer />
+      <FooterSlot />
     </AppProvider>,
     document.getElementById('root'),
   );
@@ -52,13 +52,7 @@ initialize({
     config: () => {
       mergeConfig({
         COLLECT_YEAR_OF_BIRTH: process.env.COLLECT_YEAR_OF_BIRTH,
-        ENABLE_SKILLS_BUILDER: process.env.ENABLE_SKILLS_BUILDER,
         ENABLE_SKILLS_BUILDER_PROFILE: process.env.ENABLE_SKILLS_BUILDER_PROFILE,
-        ALGOLIA_APP_ID: process.env.ALGOLIA_APP_ID || null,
-        ALGOLIA_JOBS_INDEX_NAME: process.env.ALGOLIA_JOBS_INDEX_NAME || null,
-        ALGOLIA_PRODUCT_INDEX_NAME: process.env.ALGOLIA_PRODUCT_INDEX_NAME || null,
-        ALGOLIA_SEARCH_API_KEY: process.env.ALGOLIA_SEARCH_API_KEY || null,
-        MARKETING_SITE_SEARCH_URL: process.env.SEARCH_CATALOG_URL || null,
       }, 'App loadConfig override handler');
     },
   },

src/index.scss

@@ -1,11 +1,8 @@
 @import "~@edx/brand/paragon/fonts";
 @import "~@edx/brand/paragon/variables";
-@import "~@edx/paragon/scss/core/core";
+@import "~@openedx/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 './skills-builder/skills-builder-modal/skillsBuilderModal.scss';
-@import './skills-builder/skills-builder-header/skillsBuilderHeader.scss';

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

@@ -4,57 +4,41 @@
   },
   "interactions": [
     {
-      "description": "a request for a user's account information",
+      "description": "A request for user's basic information",
       "providerStates": [
         {
-          "name": "I have user account information"
+          "name": "Account and user's information does not exist"
         }
       ],
       "request": {
-        "headers": {
-          "Accept": "application/json"
-        },
         "method": "GET",
-        "path": "/api/user/v1/accounts/edx"
+        "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": {
-          "accomplishments_shared": false,
-          "account_privacy": "private",
-          "activation_key": null,
-          "bio": null,
-          "country": null,
-          "course_certificates": null,
-          "date_joined": "2021-07-30T20:01:46Z",
-          "email": "edx@example.com",
-          "extended_profile": [],
-          "gender": null,
-          "goals": null,
-          "id": 3,
-          "is_active": true,
-          "language_proficiencies": [],
-          "last_login": "2023-04-10T18:28:01.771896Z",
-          "level_of_education": null,
-          "mailing_address": null,
-          "name": "",
-          "pending_name_change": null,
-          "phone_number": null,
-          "profile_image": {
-            "has_image": false,
-            "image_url_full": "http://localhost:18000/static/images/profiles/default_500.png",
-            "image_url_large": "http://localhost:18000/static/images/profiles/default_120.png",
-            "image_url_medium": "http://localhost:18000/static/images/profiles/default_50.png",
-            "image_url_small": "http://localhost:18000/static/images/profiles/default_30.png"
-          },
-          "requires_parental_consent": true,
-          "secondary_email": null,
-          "secondary_email_enabled": null,
-          "social_links": [],
-          "state": null,
-          "time_zone": null,
-          "username": "edx",
-          "verified_name": null,
-          "year_of_birth": null
+          "bio": "This is my bio",
+          "country": "ME",
+          "dateJoined": "2017-06-07T00:44:23Z",
+          "email": "staff@example.com",
+          "isActive": true,
+          "name": "Lemon Seltzer",
+          "username": "staff",
+          "yearOfBirth": 1901
         },
         "headers": {
           "Content-Type": "application/json"
@@ -69,8 +53,7 @@
                 }
               ]
             }
-          },
-          "header": {}
+          }
         },
         "status": 200
       }

src/plugin-slots/FooterSlot/README.md

@@ -0,0 +1,50 @@
+# Footer Slot
+
+### Slot ID: `footer_slot`
+
+## Description
+
+This slot is used to replace/modify/hide the footer.
+
+The implementation of the `FooterSlot` component lives in [the `frontend-slot-footer` repository](https://github.com/openedx/frontend-slot-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: {
+    footer_slot: {
+      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

@@ -0,0 +1,3 @@
+# `frontend-app-profile` Plugin Slots
+
+* [`footer_slot`](./FooterSlot/)

src/profile/AgeMessage.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Alert } from '@edx/paragon';
+import { Alert } from '@openedx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';
 
@@ -11,7 +11,11 @@ const AgeMessage = ({ accountSettingsUrl }) => (
     show
   >
     <Alert.Heading id="profile.age.headline">
-      Your profile cannot be shared.
+      <FormattedMessage
+        id="profile.age.cannotShare"
+        defaultMessage="Your profile cannot be shared."
+        description="Error message indicating that the user's profile cannot be shared"
+      />
     </Alert.Heading>
     <FormattedMessage
       id="profile.age.details"

src/profile/Banner.jsx

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

src/profile/ProfilePage.jsx

@@ -6,7 +6,7 @@ import { sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
 import { ensureConfig, getConfig } from '@edx/frontend-platform';
 import { AppContext } from '@edx/frontend-platform/react';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Alert, Hyperlink } from '@edx/paragon';
+import { Alert, Hyperlink } from '@openedx/paragon';
 
 // Actions
 import {
@@ -41,6 +41,8 @@ import { profilePageSelector } from './data/selectors';
 // i18n
 import messages from './ProfilePage.messages';
 
+import withParams from '../utils/hoc';
+
 ensureConfig(['CREDENTIALS_BASE_URL', 'LMS_BASE_URL'], 'ProfilePage');
 
 class ProfilePage extends React.Component {
@@ -48,10 +50,9 @@ class ProfilePage extends React.Component {
     super(props, context);
 
     const credentialsBaseUrl = context.config.CREDENTIALS_BASE_URL;
-
     this.state = {
       viewMyRecordsUrl: credentialsBaseUrl ? `${credentialsBaseUrl}/records` : null,
-      accountSettingsUrl: `${context.config.LMS_BASE_URL}/account/settings`,
+      accountSettingsUrl: context.config.ACCOUNT_SETTINGS_URL,
     };
 
     this.handleSaveProfilePhoto = this.handleSaveProfilePhoto.bind(this);
@@ -63,9 +64,9 @@ class ProfilePage extends React.Component {
   }
 
   componentDidMount() {
-    this.props.fetchProfile(this.props.match.params.username);
+    this.props.fetchProfile(this.props.params.username);
     sendTrackingLogEvent('edx.profile.viewed', {
-      username: this.props.match.params.username,
+      username: this.props.params.username,
     });
   }
 
@@ -102,7 +103,7 @@ class ProfilePage extends React.Component {
   }
 
   isAuthenticatedUserProfile() {
-    return this.props.match.params.username === this.context.authenticatedUser.username;
+    return this.props.params.username === this.context.authenticatedUser.username;
   }
 
   // Inserted into the DOM in two places (for responsive layout)
@@ -124,7 +125,7 @@ class ProfilePage extends React.Component {
 
     return (
       <span data-hj-suppress>
-        <h1 className="h2 mb-0 font-weight-bold">{this.props.match.params.username}</h1>
+        <h1 className="h2 mb-0 font-weight-bold text-truncate">{this.props.params.username}</h1>
         <DateJoined date={dateJoined} />
         {this.isYOBDisabled() && <UsernameDescription />}
         <hr className="d-none d-md-block" />
@@ -176,6 +177,7 @@ class ProfilePage extends React.Component {
       visibilityLearningGoal,
       languageProficiencies,
       visibilityLanguageProficiencies,
+      courseCertificates,
       visibilityCourseCertificates,
       bio,
       visibilityBio,
@@ -194,6 +196,17 @@ class ProfilePage extends React.Component {
       changeHandler: this.handleChange,
     };
 
+    const isBlockVisible = (blockInfo) => this.isAuthenticatedUserProfile()
+      || (!this.isAuthenticatedUserProfile() && Boolean(blockInfo));
+
+    const isLanguageBlockVisible = isBlockVisible(languageProficiencies.length);
+    const isEducationBlockVisible = isBlockVisible(levelOfEducation);
+    const isSocialLinksBLockVisible = isBlockVisible(socialLinks.some((link) => link.socialLink !== null));
+    const isBioBlockVisible = isBlockVisible(bio);
+    const isCertificatesBlockVisible = isBlockVisible(courseCertificates.length);
+    const isNameBlockVisible = isBlockVisible(name);
+    const isLocationBlockVisible = isBlockVisible(country);
+
     return (
       <div className="container-fluid">
         <div className="row align-items-center pt-4 mb-4 pt-md-0 mb-md-0">
@@ -210,7 +223,7 @@ class ProfilePage extends React.Component {
               />
             </div>
           </div>
-          <div className="col pl-0">
+          <div className="col">
             <div className="d-md-none">
               {this.renderHeadingLockup()}
             </div>
@@ -228,46 +241,58 @@ class ProfilePage extends React.Component {
             <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}
-            />
+            {isNameBlockVisible && (
+              <Name
+                name={name}
+                visibilityName={visibilityName}
+                formId="name"
+                {...commonFormProps}
+              />
+            )}
+            {isLocationBlockVisible && (
+              <Country
+                country={country}
+                visibilityCountry={visibilityCountry}
+                formId="country"
+                {...commonFormProps}
+              />
+            )}
+            {isLanguageBlockVisible && (
+              <PreferredLanguage
+                languageProficiencies={languageProficiencies}
+                visibilityLanguageProficiencies={visibilityLanguageProficiencies}
+                formId="languageProficiencies"
+                {...commonFormProps}
+              />
+            )}
+            {isEducationBlockVisible && (
+              <Education
+                levelOfEducation={levelOfEducation}
+                visibilityLevelOfEducation={visibilityLevelOfEducation}
+                formId="levelOfEducation"
+                {...commonFormProps}
+              />
+            )}
+            {isSocialLinksBLockVisible && (
+              <SocialLinks
+                socialLinks={socialLinks}
+                draftSocialLinksByPlatform={draftSocialLinksByPlatform}
+                visibilitySocialLinks={visibilitySocialLinks}
+                formId="socialLinks"
+                {...commonFormProps}
+              />
+            )}
           </div>
           <div className="pt-md-3 col-md-8 col-lg-7 offset-lg-1">
             {!this.isYOBDisabled() && this.renderAgeMessage()}
-            <Bio
-              bio={bio}
-              visibilityBio={visibilityBio}
-              formId="bio"
-              {...commonFormProps}
-            />
+            {isBioBlockVisible && (
+              <Bio
+                bio={bio}
+                visibilityBio={visibilityBio}
+                formId="bio"
+                {...commonFormProps}
+              />
+            )}
             {getConfig().ENABLE_SKILLS_BUILDER_PROFILE && (
               <LearningGoal
                 learningGoal={learningGoal}
@@ -276,11 +301,13 @@ class ProfilePage extends React.Component {
                 {...commonFormProps}
               />
             )}
-            <Certificates
-              visibilityCourseCertificates={visibilityCourseCertificates}
-              formId="certificates"
-              {...commonFormProps}
-            />
+            {isCertificatesBlockVisible && (
+              <Certificates
+                visibilityCourseCertificates={visibilityCourseCertificates}
+                formId="certificates"
+                {...commonFormProps}
+              />
+            )}
           </div>
         </div>
       </div>
@@ -370,10 +397,8 @@ ProfilePage.propTypes = {
   updateDraft: PropTypes.func.isRequired,
 
   // Router
-  match: PropTypes.shape({
-    params: PropTypes.shape({
-      username: PropTypes.string.isRequired,
-    }).isRequired,
+  params: PropTypes.shape({
+    username: PropTypes.string.isRequired,
   }).isRequired,
 
   // i18n
@@ -410,4 +435,4 @@ export default connect(
     closeForm,
     updateDraft,
   },
-)(injectIntl(ProfilePage));
+)(injectIntl(withParams(ProfilePage)));

src/profile/ProfilePage.test.jsx

@@ -3,11 +3,10 @@ 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 { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 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';
 
@@ -29,7 +28,7 @@ const requiredProfilePageProps = {
   deleteProfilePhoto: () => {},
   openField: () => {},
   closeField: () => {},
-  match: { params: { username: 'staff' } },
+  params: { username: 'staff' },
 };
 
 // Mock language cookie
@@ -67,29 +66,28 @@ beforeEach(() => {
 });
 
 const ProfilePageWrapper = ({
-  contextValue, store, match, requiresParentalConsent,
+  contextValue, store, params, requiresParentalConsent,
 }) => (
   <AppContext.Provider
     value={contextValue}
   >
     <IntlProvider locale="en">
       <Provider store={store}>
-        <ProfilePage {...requiredProfilePageProps} match={match} requiresParentalConsent={requiresParentalConsent} />
+        <ProfilePage {...requiredProfilePageProps} params={params} requiresParentalConsent={requiresParentalConsent} />
       </Provider>
     </IntlProvider>
   </AppContext.Provider>
 );
 
 ProfilePageWrapper.defaultProps = {
-  match: { params: { username: 'staff' } },
+  params: { username: 'staff' },
   requiresParentalConsent: null,
-
 };
 
 ProfilePageWrapper.propTypes = {
   contextValue: PropTypes.shape({}).isRequired,
   store: PropTypes.shape({}).isRequired,
-  match: PropTypes.shape({}),
+  params: PropTypes.shape({}),
   requiresParentalConsent: PropTypes.bool,
 };
 
@@ -101,7 +99,7 @@ describe('<ProfilePage />', () => {
         config: getConfig(),
       };
       const component = <ProfilePageWrapper contextValue={contextValue} store={mockStore(storeMocks.loadingApp)} />;
-      const tree = renderer.create(component).toJSON();
+      const { container: tree } = render(component);
       expect(tree).toMatchSnapshot();
     });
 
@@ -111,23 +109,41 @@ describe('<ProfilePage />', () => {
         config: getConfig(),
       };
       const component = <ProfilePageWrapper contextValue={contextValue} store={mockStore(storeMocks.viewOwnProfile)} />;
-      const tree = renderer.create(component).toJSON();
+      const { container: tree } = render(component);
       expect(tree).toMatchSnapshot();
     });
 
-    it('viewing other profile', () => {
+    it('viewing other profile with all fields', () => {
       const contextValue = {
         authenticatedUser: { userId: 123, username: 'staff', administrator: true },
         config: getConfig(),
       };
+
       const component = (
         <ProfilePageWrapper
           contextValue={contextValue}
-          store={mockStore(storeMocks.viewOtherProfile)}
+          store={mockStore({
+            ...storeMocks.viewOtherProfile,
+            profilePage: {
+              ...storeMocks.viewOtherProfile.profilePage,
+              account: {
+                ...storeMocks.viewOtherProfile.profilePage.account,
+                name: 'user',
+                country: 'EN',
+                bio: 'bio',
+                courseCertificates: ['course certificates'],
+                levelOfEducation: 'some level',
+                languageProficiencies: ['some lang'],
+                socialLinks: ['twitter'],
+                timeZone: 'time zone',
+                accountPrivacy: 'all_users',
+              },
+            },
+          })}
           match={{ params: { username: 'verified' } }} // Override default match
         />
       );
-      const tree = renderer.create(component).toJSON();
+      const { container: tree } = render(component);
       expect(tree).toMatchSnapshot();
     });
 
@@ -142,7 +158,7 @@ describe('<ProfilePage />', () => {
           store={mockStore(storeMocks.savingEditedBio)}
         />
       );
-      const tree = renderer.create(component).toJSON();
+      const { container: tree } = render(component);
       expect(tree).toMatchSnapshot();
     });
 
@@ -159,7 +175,7 @@ describe('<ProfilePage />', () => {
           store={mockStore(storeData)}
         />
       );
-      const tree = renderer.create(component).toJSON();
+      const { container: tree } = render(component);
       expect(tree).toMatchSnapshot();
     });
 
@@ -177,7 +193,7 @@ describe('<ProfilePage />', () => {
           store={mockStore(storeData)}
         />
       );
-      const tree = renderer.create(component).toJSON();
+      const { container: tree } = render(component);
       expect(tree).toMatchSnapshot();
     });
 
@@ -195,7 +211,7 @@ describe('<ProfilePage />', () => {
           store={mockStore(storeData)}
         />
       );
-      const tree = renderer.create(component).toJSON();
+      const { container: tree } = render(component);
       expect(tree).toMatchSnapshot();
     });
 
@@ -213,7 +229,7 @@ describe('<ProfilePage />', () => {
           store={mockStore(storeData)}
         />
       );
-      const tree = renderer.create(component).toJSON();
+      const { container: tree } = render(component);
       expect(tree).toMatchSnapshot();
     });
 
@@ -231,7 +247,7 @@ describe('<ProfilePage />', () => {
           store={mockStore(storeMocks.viewOwnProfile)}
         />
       );
-      const tree = renderer.create(component).toJSON();
+      const { container: tree } = render(component);
       expect(tree).toMatchSnapshot();
     });
     it('test age message alert', () => {
@@ -242,17 +258,15 @@ describe('<ProfilePage />', () => {
         authenticatedUser: { userId: 123, username: 'staff', administrator: true },
         config: { ...getConfig(), COLLECT_YEAR_OF_BIRTH: true },
       };
-      const component = (
+      const { container } = render(
         <ProfilePageWrapper
           contextValue={contextValue}
           store={mockStore(storeData)}
           requiresParentalConsent
-        />
+        />,
       );
-      const wrapper = mount(component);
-      wrapper.update();
 
-      expect(wrapper.find('.alert-info').hasClass('show')).toBe(true);
+      expect(container.querySelector('.alert-info')).toHaveClass('show');
     });
     it('test photo error alert', () => {
       const storeData = JSON.parse(JSON.stringify(storeMocks.viewOwnProfile));
@@ -261,11 +275,15 @@ describe('<ProfilePage />', () => {
         authenticatedUser: { userId: 123, username: 'staff', administrator: true },
         config: { ...getConfig(), COLLECT_YEAR_OF_BIRTH: true },
       };
-      const component = <ProfilePageWrapper contextValue={contextValue} store={mockStore(storeData)} />;
-      const wrapper = mount(component);
-      wrapper.update();
+      const { container } = render(
+        <ProfilePageWrapper
+          contextValue={contextValue}
+          store={mockStore(storeData)}
+          requiresParentalConsent
+        />,
+      );
 
-      expect(wrapper.find('.alert-danger').hasClass('show')).toBe(true);
+      expect(container.querySelector('.alert-danger')).toHaveClass('show');
     });
   });
 
@@ -275,15 +293,13 @@ describe('<ProfilePage />', () => {
         authenticatedUser: { userId: 123, username: 'staff', administrator: true },
         config: getConfig(),
       };
-      const component = (
+      render(
         <ProfilePageWrapper
           contextValue={contextValue}
           store={mockStore(storeMocks.loadingApp)}
-          match={{ params: { username: 'test-username' } }}
-        />
+          params={{ username: 'test-username' }}
+        />,
       );
-      const wrapper = mount(component);
-      wrapper.update();
 
       expect(analytics.sendTrackingLogEvent.mock.calls.length).toBe(1);
       expect(analytics.sendTrackingLogEvent.mock.calls[0][0]).toEqual('edx.profile.viewed');

src/profile/UsernameDescription.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { VisibilityOff } from '@edx/paragon/icons';
-import { Icon } from '@edx/paragon';
+import { VisibilityOff } from '@openedx/paragon/icons';
+import { Icon } from '@openedx/paragon';
 import { getConfig } from '@edx/frontend-platform';
 
 const UsernameDescription = () => (

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

@@ -1,90 +0,0 @@
-import path from 'path';
-import { PactV3, MatchersV3 } from '@pact-foundation/pact';
-
-import { getAccountRequest } from './services';
-import { getConfig, initializeMockApp, setConfig } from '@edx/frontend-platform';
-
-// Create a 'pact' between the two applications in the integration we are testing
-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',
-});
-
-const getAccountBody = {
-  "account_privacy":"private",
-  "profile_image":{
-    "has_image":false,
-    "image_url_full":"http://localhost:18000/static/images/profiles/default_500.png",
-    "image_url_large":"http://localhost:18000/static/images/profiles/default_120.png",
-    "image_url_medium":"http://localhost:18000/static/images/profiles/default_50.png",
-    "image_url_small":"http://localhost:18000/static/images/profiles/default_30.png"
-  },"username":"edx",
-  "bio":null,
-  "course_certificates":null,
-  "country":null,
-  "date_joined":"2021-07-30T20:01:46Z",
-  "language_proficiencies":[],
-  "level_of_education":null,
-  "social_links":[],
-  "time_zone":null,
-  "accomplishments_shared":false,
-  "name":"",
-  "email":"edx@example.com",
-  "id":3,
-  "verified_name":null,
-  "extended_profile":[],
-  "gender":null,
-  "state":null,
-  "goals":null,
-  "is_active":true,
-  "last_login":"2023-04-10T18:28:01.771896Z",
-  "mailing_address":null,
-  "requires_parental_consent":true,
-  "secondary_email":null,
-  "secondary_email_enabled":null,
-  "year_of_birth":null,
-  "phone_number":null,
-  "activation_key":null,
-  "pending_name_change":null
-}
-
-const EXPECTED_GET_ACCOUNT_BODY = MatchersV3.like(getAccountBody);
-
-describe('getAccount', () => {
-  beforeAll(async () => {
-    initializeMockApp();
-  });
-
-  it('returns an HTTP 200 and user account information', () => {
-    const username = 'edx';
-    provider
-      .given("I have user account information")
-      .uponReceiving(`a request for a user's account information`)
-      .withRequest({
-        method: 'GET',
-        path: `/api/user/v1/accounts/${username}`,
-        headers: { Accept: 'application/json' },
-      })
-      .willRespondWith({
-        status: 200,
-        headers: { 'Content-Type': 'application/json' },
-        body: EXPECTED_GET_ACCOUNT_BODY
-      });
-
-    return provider.executeTest(async (mockserver) => {
-
-      const port = mockserver.port;
-
-      setConfig({
-        ...getConfig(),
-        LMS_BASE_URL: `http://localhost:${port}`,
-      });
-
-      const response = await getAccountRequest(username);
-
-      expect(response.data).toEqual(getAccountBody);
-    })
-  });
-});

src/profile/data/constants.js

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

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

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

src/profile/data/sagas.js

@@ -66,6 +66,25 @@ export function* handleFetchProfile(action) {
     } else {
       [account, courseCertificates] = result;
     }
+
+    // Set initial visibility values for account
+    // Set account_privacy as custom is necessary so that when viewing another user's profile,
+    // their full name is displayed and change visibility forms are worked correctly
+    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,

src/profile/data/selectors.js

@@ -35,9 +35,12 @@ export const editableFormModeSelector = createSelector(
     // 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; // overwrite for certificates
-    // If this isn't the current user's profile or if
+    // If this isn't the current user's profile
+    if (!isAuthenticatedUserProfile) {
+      return 'static';
+    }
     // the current user has no age set / under 13 ...
-    if (!isAuthenticatedUserProfile || account.requiresParentalConsent) {
+    if (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.
@@ -228,13 +231,13 @@ export const visibilitiesSelector = createSelector(
     switch (accountPrivacy) {
       case 'custom':
         return {
-          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',
+          visibilityBio: preferences.visibilityBio || 'all_users',
+          visibilityCourseCertificates: preferences.visibilityCourseCertificates || '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',
         };
       case 'private':
         return {

src/profile/data/services.js

@@ -1,5 +1,5 @@
 import { ensureConfig, getConfig } from '@edx/frontend-platform';
-import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { getAuthenticatedHttpClient as getHttpClient } from '@edx/frontend-platform/auth';
 import { logError } from '@edx/frontend-platform/logging';
 import { camelCaseObject, convertKeyNames, snakeCaseObject } from '../utils';
 
@@ -21,24 +21,17 @@ function processAndThrowError(error, errorDataProcessor) {
 
 // GET ACCOUNT
 export async function getAccount(username) {
-  const { data } = await getAccountRequest(username);
+  const { data } = await getHttpClient().get(`${getConfig().LMS_BASE_URL}/api/user/v1/accounts/${username}`);
 
   // Process response data
   return processAccountData(data);
 }
 
-export async function getAccountRequest(username) {
-  return await getAuthenticatedHttpClient().get(
-    `${getConfig().LMS_BASE_URL}/api/user/v1/accounts/${username}`,
-    { mockApiId: 'getAccount' }
-  );
-}
-
 // PATCH PROFILE
 export async function patchProfile(username, params) {
   const processedParams = snakeCaseObject(params);
 
-  const { data } = await getAuthenticatedHttpClient()
+  const { data } = await getHttpClient()
     .patch(`${getConfig().LMS_BASE_URL}/api/user/v1/accounts/${username}`, processedParams, {
       headers: {
         'Content-Type': 'application/merge-patch+json',
@@ -56,7 +49,7 @@ export async function patchProfile(username, params) {
 
 export async function postProfilePhoto(username, formData) {
   // eslint-disable-next-line no-unused-vars
-  const { data } = await getAuthenticatedHttpClient().post(
+  const { data } = await getHttpClient().post(
     `${getConfig().LMS_BASE_URL}/api/user/v1/accounts/${username}/image`,
     formData,
     {
@@ -81,7 +74,7 @@ export async function postProfilePhoto(username, formData) {
 
 export async function deleteProfilePhoto(username) {
   // eslint-disable-next-line no-unused-vars
-  const { data } = await getAuthenticatedHttpClient().delete(`${getConfig().LMS_BASE_URL}/api/user/v1/accounts/${username}/image`);
+  const { data } = await getHttpClient().delete(`${getConfig().LMS_BASE_URL}/api/user/v1/accounts/${username}/image`);
 
   // TODO: Someday in the future the POST photo endpoint
   // will return the new values. At that time we should
@@ -94,7 +87,7 @@ export async function deleteProfilePhoto(username) {
 
 // GET PREFERENCES
 export async function getPreferences(username) {
-  const { data } = await getAuthenticatedHttpClient().get(`${getConfig().LMS_BASE_URL}/api/user/v1/preferences/${username}`, { mockApiId: 'getPreferences'});
+  const { data } = await getHttpClient().get(`${getConfig().LMS_BASE_URL}/api/user/v1/preferences/${username}`);
 
   return camelCaseObject(data);
 }
@@ -114,7 +107,7 @@ export async function patchPreferences(username, params) {
     visibility_time_zone: 'visibility.time_zone',
   });
 
-  await getAuthenticatedHttpClient().patch(`${getConfig().LMS_BASE_URL}/api/user/v1/preferences/${username}`, processedParams, {
+  await getHttpClient().patch(`${getConfig().LMS_BASE_URL}/api/user/v1/preferences/${username}`, processedParams, {
     headers: { 'Content-Type': 'application/merge-patch+json' },
   });
 
@@ -147,7 +140,7 @@ function transformCertificateData(data) {
 export async function getCourseCertificates(username) {
   const url = `${getConfig().LMS_BASE_URL}/api/certificates/v0/certificates/${username}/`;
   try {
-    const { data } = await getAuthenticatedHttpClient().get(url, { mockApiId: 'getCourseCertificates' });
+    const { data } = await getHttpClient().get(url);
     return transformCertificateData(data);
   } catch (e) {
     logError(e);

src/profile/forms/Bio.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Form } from '@edx/paragon';
+import { Form } from '@openedx/paragon';
 
 import messages from './Bio.messages';
 

src/profile/forms/Certificates.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import {
   FormattedDate, FormattedMessage, injectIntl, intlShape,
 } from '@edx/frontend-platform/i18n';
-import { Hyperlink } from '@edx/paragon';
+import { Hyperlink } from '@openedx/paragon';
 import { connect } from 'react-redux';
 import get from 'lodash.get';
 
@@ -68,7 +68,7 @@ class Certificates extends React.Component {
     })();
 
     return (
-      <div key={`${modifiedDate}-${courseId}`} className="col col-sm-6 d-flex align-items-stretch">
+      <div key={`${modifiedDate}-${courseId}`} className="col-12 col-sm-6 d-flex align-items-stretch">
         <div className="card mb-4 certificate flex-grow-1">
           <div
             className="certificate-type-illustration"

src/profile/forms/Country.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Form } from '@edx/paragon';
+import { Form } from '@openedx/paragon';
 
 import messages from './Country.messages';
 

src/profile/forms/Education.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import get from 'lodash.get';
-import { Form } from '@edx/paragon';
+import { Form } from '@openedx/paragon';
 
 import messages from './Education.messages';
 

src/profile/forms/LearningGoal.test.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { useMemo } from 'react';
 import { Provider } from 'react-redux';
-import renderer from 'react-test-renderer';
+import { render, screen } from '@testing-library/react';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import { configure as configureI18n, IntlProvider } from '@edx/frontend-platform/i18n';
@@ -92,31 +92,25 @@ LearningGoalWrapperWithStore.propTypes = {
 describe('<LearningGoal />', () => {
   describe('renders the current learning goal', () => {
     it('renders "I want to advance my career"', () => {
-      const learningGoalRenderer = renderer.create(
+      render(
         <LearningGoalWrapper
           {...requiredLearningGoalProps}
           formId="learningGoal"
         />,
       );
-
-      const learningGoalInstance = learningGoalRenderer.root;
-
-      expect(learningGoalInstance.findByProps({ className: 'lead' }).children).toEqual(['I want to advance my career']);
+      expect(screen.getByText('I want to advance my career')).toBeTruthy();
     });
 
     it('renders "Something else"', () => {
       requiredLearningGoalProps.learningGoal = 'something_else';
 
-      const learningGoalRenderer = renderer.create(
+      render(
         <LearningGoalWrapper
           {...requiredLearningGoalProps}
           formId="learningGoal"
         />,
       );
-
-      const learningGoalInstance = learningGoalRenderer.root;
-
-      expect(learningGoalInstance.findByProps({ className: 'lead' }).children).toEqual(['Something else']);
+      expect(screen.getByText('Something else')).toBeTruthy();
     });
   });
 });

src/profile/forms/PreferredLanguage.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Form } from '@edx/paragon';
+import { Form } from '@openedx/paragon';
 
 import messages from './PreferredLanguage.messages';
 

src/profile/forms/ProfileAvatar.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Dropdown } from '@edx/paragon';
+import { Button, Dropdown } from '@openedx/paragon';
 import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
 import { ReactComponent as DefaultAvatar } from '../assets/avatar.svg';

src/profile/forms/SocialLinks.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Alert } from '@edx/paragon';
+import { Alert } from '@openedx/paragon';
 import { connect } from 'react-redux';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTwitter, faFacebook, faLinkedin } from '@fortawesome/free-brands-svg-icons';
@@ -33,6 +33,108 @@ const platformDisplayInfo = {
   },
 };
 
+const SocialLink = ({ url, name, platform }) => (
+  <a href={url} className="font-weight-bold">
+    <FontAwesomeIcon className="mr-2" icon={platformDisplayInfo[platform].icon} />
+    {name}
+  </a>
+);
+
+SocialLink.propTypes = {
+  url: PropTypes.string.isRequired,
+  platform: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+};
+
+const EditableListItem = ({
+  url, platform, onClickEmptyContent, name,
+}) => {
+  const linkDisplay = url ? (
+    <SocialLink name={name} url={url} platform={platform} />
+  ) : (
+    <EmptyContent onClick={onClickEmptyContent}>Add {name}</EmptyContent>
+  );
+
+  return <li className="form-group">{linkDisplay}</li>;
+};
+
+EditableListItem.propTypes = {
+  url: PropTypes.string,
+  platform: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  onClickEmptyContent: PropTypes.func,
+};
+EditableListItem.defaultProps = {
+  url: null,
+  onClickEmptyContent: null,
+};
+
+const EditingListItem = ({
+  platform, name, value, onChange, error,
+}) => (
+  <li className="form-group">
+    <label htmlFor={`social-${platform}`}>{name}</label>
+    <input
+      className={classNames('form-control', { 'is-invalid': Boolean(error) })}
+      type="text"
+      id={`social-${platform}`}
+      name={platform}
+      value={value || ''}
+      onChange={onChange}
+      aria-describedby="social-error-feedback"
+    />
+  </li>
+);
+
+EditingListItem.propTypes = {
+  platform: PropTypes.string.isRequired,
+  value: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  error: PropTypes.string,
+};
+
+EditingListItem.defaultProps = {
+  value: null,
+  error: null,
+};
+
+const EmptyListItem = ({ onClick, name }) => (
+  <li className="mb-4">
+    <EmptyContent onClick={onClick}>
+      <FormattedMessage
+        id="profile.sociallinks.add"
+        defaultMessage="Add {network}"
+        values={{
+          network: name,
+        }}
+        description="{network} is the name of a social network such as Facebook or Twitter"
+      />
+    </EmptyContent>
+  </li>
+);
+
+EmptyListItem.propTypes = {
+  name: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired,
+};
+
+const StaticListItem = ({ name, url, platform }) => (
+  <li className="mb-2">
+    <SocialLink name={name} url={url} platform={platform} />
+  </li>
+);
+
+StaticListItem.propTypes = {
+  name: PropTypes.string.isRequired,
+  url: PropTypes.string,
+  platform: PropTypes.string.isRequired,
+};
+
+StaticListItem.defaultProps = {
+  url: null,
+};
+
 class SocialLinks extends React.Component {
   constructor(props) {
     super(props);
@@ -243,105 +345,3 @@ export default connect(
   editableFormSelector,
   {},
 )(injectIntl(SocialLinks));
-
-const SocialLink = ({ url, name, platform }) => (
-  <a href={url} className="font-weight-bold">
-    <FontAwesomeIcon className="mr-2" icon={platformDisplayInfo[platform].icon} />
-    {name}
-  </a>
-);
-
-SocialLink.propTypes = {
-  url: PropTypes.string.isRequired,
-  platform: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-};
-
-const EditableListItem = ({
-  url, platform, onClickEmptyContent, name,
-}) => {
-  const linkDisplay = url ? (
-    <SocialLink name={name} url={url} platform={platform} />
-  ) : (
-    <EmptyContent onClick={onClickEmptyContent}>Add {name}</EmptyContent>
-  );
-
-  return <li className="form-group">{linkDisplay}</li>;
-};
-
-EditableListItem.propTypes = {
-  url: PropTypes.string,
-  platform: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  onClickEmptyContent: PropTypes.func,
-};
-EditableListItem.defaultProps = {
-  url: null,
-  onClickEmptyContent: null,
-};
-
-const EditingListItem = ({
-  platform, name, value, onChange, error,
-}) => (
-  <li className="form-group">
-    <label htmlFor={`social-${platform}`}>{name}</label>
-    <input
-      className={classNames('form-control', { 'is-invalid': Boolean(error) })}
-      type="text"
-      id={`social-${platform}`}
-      name={platform}
-      value={value || ''}
-      onChange={onChange}
-      aria-describedby="social-error-feedback"
-    />
-  </li>
-);
-
-EditingListItem.propTypes = {
-  platform: PropTypes.string.isRequired,
-  value: PropTypes.string,
-  name: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired,
-  error: PropTypes.string,
-};
-
-EditingListItem.defaultProps = {
-  value: null,
-  error: null,
-};
-
-const EmptyListItem = ({ onClick, name }) => (
-  <li className="mb-4">
-    <EmptyContent onClick={onClick}>
-      <FormattedMessage
-        id="profile.sociallinks.add"
-        defaultMessage="Add {network}"
-        values={{
-          network: name,
-        }}
-        description="{network} is the name of a social network such as Facebook or Twitter"
-      />
-    </EmptyContent>
-  </li>
-);
-
-EmptyListItem.propTypes = {
-  name: PropTypes.string.isRequired,
-  onClick: PropTypes.func.isRequired,
-};
-
-const StaticListItem = ({ name, url, platform }) => (
-  <li className="mb-2">
-    <SocialLink name={name} url={url} platform={platform} />
-  </li>
-);
-
-StaticListItem.propTypes = {
-  name: PropTypes.string.isRequired,
-  url: PropTypes.string,
-  platform: PropTypes.string.isRequired,
-};
-
-StaticListItem.defaultProps = {
-  url: null,
-};

src/profile/forms/SocialLinks.test.jsx

@@ -1,8 +1,7 @@
-import { mount } from 'enzyme';
+import { render, fireEvent, screen } from '@testing-library/react';
 import PropTypes from 'prop-types';
 import React, { useMemo } from 'react';
 import { Provider } from 'react-redux';
-import renderer from 'react-test-renderer';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import { configure as configureI18n, IntlProvider } from '@edx/frontend-platform/i18n';
@@ -103,7 +102,7 @@ describe('<SocialLinks />', () => {
   ['certificates', 'bio', 'goals', 'socialLinks'].forEach(editMode => (
     it(`calls social links with edit mode ${editMode}`, () => {
       const component = <SocialLinksWrapper {...defaultProps} formId={editMode} />;
-      const tree = renderer.create(component).toJSON();
+      const { container: tree } = render(component);
       expect(tree).toMatchSnapshot();
     })
   ));
@@ -112,47 +111,45 @@ describe('<SocialLinks />', () => {
     const changeHandler = jest.fn();
     const submitHandler = jest.fn();
     const closeHandler = jest.fn();
-    const component = (
+    const { container } = render(
       <SocialLinksWrapper
         {...defaultProps}
         formId="bio"
         changeHandler={changeHandler}
         submitHandler={submitHandler}
         closeHandler={closeHandler}
-      />
+      />,
     );
-    const wrapper = mount(component);
-    const socialLink = wrapper.find(SocialLinks);
+
     const { platform } = defaultProps.socialLinks[0];
-    const inputField = socialLink.find(`#social-${platform}`);
-    inputField.simulate('change', { target: { value: 'test', name: platform } });
+    const inputField = container.querySelector(`#social-${platform}`);
+    fireEvent.change(inputField, { target: { value: 'test', name: platform } });
     expect(changeHandler).toHaveBeenCalledTimes(1);
 
-    expect(socialLink.find('#visibilitySocialLinks select').props().value).toBe('private');
-    const event = { target: { value: 'all_users', name: 'visibilitySocialLinks' } };
-    socialLink.find('#visibilitySocialLinks select').simulate('change', event);
+    const selectElement = container.querySelector('#visibilitySocialLinks');
+    expect(selectElement.value).toBe('private');
+    fireEvent.change(selectElement, { target: { value: 'all_users', name: 'visibilitySocialLinks' } });
     expect(changeHandler).toHaveBeenCalledTimes(2);
 
-    socialLink.find('[aria-labelledby="editing-form"]').simulate('submit');
+    fireEvent.submit(container.querySelector('[aria-labelledby="editing-form"]'));
     expect(submitHandler).toHaveBeenCalledTimes(1);
 
-    socialLink.find('[aria-labelledby="editing-form"]').find('Button .btn-link').simulate('click');
+    fireEvent.click(screen.getByRole('button', { name: 'Cancel' }));
     expect(closeHandler).toHaveBeenCalledTimes(1);
   });
 
   it('calls social links with static', () => {
     const openHandler = jest.fn();
-    const component = (
+    render(
       <SocialLinksWrapper
         {...defaultProps}
         formId="goals"
         openHandler={openHandler}
-      />
+      />,
     );
-    const wrapper = mount(component);
-    const socialLink = wrapper.find(SocialLinks);
+    const addFacebookButton = screen.getByRole('button', { name: 'Add Facebook' });
+    fireEvent.click(addFacebookButton);
 
-    socialLink.find('EmptyContent button').first().simulate('click');
     expect(openHandler).toHaveBeenCalledTimes(1);
   });
 
@@ -160,10 +157,9 @@ describe('<SocialLinks />', () => {
     const newStore = JSON.parse(JSON.stringify(savingEditedBio));
     newStore.profilePage.errors.bio = { userMessage: 'error' };
 
-    const component = <SocialLinksWrapperWithStore store={newStore} />;
-    const wrapper = mount(component);
-    const socialLink = wrapper.find(SocialLinks);
+    const { container } = render(<SocialLinksWrapperWithStore store={newStore} />);
 
-    expect(socialLink.find('.alert-danger').exists()).toBe(true);
+    const alertDanger = container.querySelector('.alert-danger');
+    expect(alertDanger).toBeInTheDocument();
   });
 });

src/profile/forms/__snapshots__/SocialLinks.test.jsx.snap

@@ -1,586 +1,504 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<SocialLinks /> calls social links with edit mode bio 1`] = `
-<div
-  className="pgn-transition-replace-group position-relative mb-5"
-  style={
-    Object {
-      "height": null,
-    }
-  }
->
+<div>
   <div
-    style={
-      Object {
-        "padding": ".1px 0",
-      }
-    }
+    class="pgn-transition-replace-group position-relative mb-5"
   >
     <div
-      aria-labelledby="social-links-label"
-      role="dialog"
+      style="padding: .1px 0px;"
     >
-      <form
-        aria-labelledby="editing-form"
-        onSubmit={[Function]}
+      <div
+        aria-labelledby="social-links-label"
+        role="dialog"
       >
-        <div
-          className="editable-item-header mb-2"
-        >
-          <h2
-            className="edit-section-header"
-            id="social-links-label"
-          >
-            Social Links
-          </h2>
-        </div>
-        <div
-          id="social-error-feedback"
-        />
-        <ul
-          className="list-unstyled"
-        >
-          <li
-            className="form-group"
-          >
-            <label
-              htmlFor="social-facebook"
-            >
-              Facebook
-            </label>
-            <input
-              aria-describedby="social-error-feedback"
-              className="form-control"
-              id="social-facebook"
-              name="facebook"
-              onChange={[Function]}
-              type="text"
-              value="https://www.facebook.com/aloha"
-            />
-          </li>
-          <li
-            className="form-group"
-          >
-            <label
-              htmlFor="social-twitter"
-            >
-              Twitter
-            </label>
-            <input
-              aria-describedby="social-error-feedback"
-              className="form-control"
-              id="social-twitter"
-              name="twitter"
-              onChange={[Function]}
-              type="text"
-              value="https://www.twitter.com/ALOHA"
-            />
-          </li>
-        </ul>
-        <div
-          className="d-flex flex-row-reverse flex-wrap justify-content-end align-items-center"
+        <form
+          aria-labelledby="editing-form"
         >
           <div
-            className="form-group d-flex flex-wrap"
+            class="editable-item-header mb-2"
           >
-            <label
-              className="col-form-label"
-              htmlFor="visibilitySocialLinks"
+            <h2
+              class="edit-section-header"
+              id="social-links-label"
             >
-              Who can see this:
-            </label>
-            <span
-              className="d-flex align-items-center"
-            >
-              <span
-                className="d-inline-block ml-1 mr-2"
-                style={
-                  Object {
-                    "width": "1.5rem",
-                  }
-                }
-              >
-                <svg
-                  aria-hidden="true"
-                  className="svg-inline--fa fa-eye-slash fa-w-20 "
-                  data-icon="eye-slash"
-                  data-prefix="far"
-                  focusable="false"
-                  role="img"
-                  style={Object {}}
-                  viewBox="0 0 640 512"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M634 471L36 3.51A16 16 0 0 0 13.51 6l-10 12.49A16 16 0 0 0 6 41l598 467.49a16 16 0 0 0 22.49-2.49l10-12.49A16 16 0 0 0 634 471zM296.79 146.47l134.79 105.38C429.36 191.91 380.48 144 320 144a112.26 112.26 0 0 0-23.21 2.47zm46.42 219.07L208.42 260.16C210.65 320.09 259.53 368 320 368a113 113 0 0 0 23.21-2.46zM320 112c98.65 0 189.09 55 237.93 144a285.53 285.53 0 0 1-44 60.2l37.74 29.5a333.7 333.7 0 0 0 52.9-75.11 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64c-36.7 0-71.71 7-104.63 18.81l46.41 36.29c18.94-4.3 38.34-7.1 58.22-7.1zm0 288c-98.65 0-189.08-55-237.93-144a285.47 285.47 0 0 1 44.05-60.19l-37.74-29.5a333.6 333.6 0 0 0-52.89 75.1 32.35 32.35 0 0 0 0 29.19C89.72 376.41 197.08 448 320 448c36.7 0 71.71-7.05 104.63-18.81l-46.41-36.28C359.28 397.2 339.89 400 320 400z"
-                    fill="currentColor"
-                    style={Object {}}
-                  />
-                </svg>
-              </span>
-              <select
-                className="d-inline-block w-auto form-control"
-                id="visibilitySocialLinks"
-                name="visibilitySocialLinks"
-                onChange={[Function]}
-                type="select"
-                value="private"
-              >
-                <option
-                  value="private"
-                >
-                  Just me
-                </option>
-                <option
-                  value="all_users"
-                >
-                  Everyone on localhost
-                </option>
-              </select>
-            </span>
+              Social Links
+            </h2>
           </div>
           <div
-            className="form-group flex-shrink-0 flex-grow-1"
+            id="social-error-feedback"
+          />
+          <ul
+            class="list-unstyled"
           >
-            <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"
+            <li
+              class="form-group"
             >
+              <label
+                for="social-facebook"
+              >
+                Facebook
+              </label>
+              <input
+                aria-describedby="social-error-feedback"
+                class="form-control"
+                id="social-facebook"
+                name="facebook"
+                type="text"
+                value="https://www.facebook.com/aloha"
+              />
+            </li>
+            <li
+              class="form-group"
+            >
+              <label
+                for="social-twitter"
+              >
+                Twitter
+              </label>
+              <input
+                aria-describedby="social-error-feedback"
+                class="form-control"
+                id="social-twitter"
+                name="twitter"
+                type="text"
+                value="https://www.twitter.com/ALOHA"
+              />
+            </li>
+          </ul>
+          <div
+            class="d-flex flex-row-reverse flex-wrap justify-content-end align-items-center"
+          >
+            <div
+              class="form-group d-flex flex-wrap"
+            >
+              <label
+                class="col-form-label"
+                for="visibilitySocialLinks"
+              >
+                Who can see this:
+              </label>
               <span
-                className="d-flex align-items-center justify-content-center"
+                class="d-flex align-items-center"
               >
                 <span
-                  className="pgn__stateful-btn-icon"
+                  class="d-inline-block ml-1 mr-2"
+                  style="width: 1.5rem;"
+                >
+                  <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>
+                </span>
+                <select
+                  class="d-inline-block form-control"
+                  id="visibilitySocialLinks"
+                  name="visibilitySocialLinks"
+                  type="select"
+                >
+                  <option
+                    value="private"
+                  >
+                    Just me
+                  </option>
+                  <option
+                    value="all_users"
+                  >
+                    Everyone on localhost
+                  </option>
+                </select>
+              </span>
+            </div>
+            <div
+              class="form-group flex-shrink-0 flex-grow-1"
+            >
+              <button
+                aria-disabled="false"
+                aria-live="assertive"
+                class="pgn__stateful-btn pgn__stateful-btn-state-pending btn btn-primary"
+                type="submit"
+              >
+                <span
+                  class="d-flex align-items-center justify-content-center"
                 >
                   <span
-                    className="pgn__icon icon-spin"
+                    class="pgn__stateful-btn-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"
+                    <span
+                      class="pgn__icon icon-spin"
                     >
-                      <path
-                        d="M22 12A10 10 0 1 1 6.122 3.91l1.176 1.618A8 8 0 1 0 20 12h2Z"
-                        fill="currentColor"
-                      />
-                    </svg>
+                      <svg
+                        aria-hidden="true"
+                        fill="none"
+                        focusable="false"
+                        height="24"
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width="24"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M22 12A10 10 0 1 1 6.122 3.91l1.176 1.618A8 8 0 1 0 20 12h2Z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                    </span>
+                  </span>
+                  <span>
+                    Saving
                   </span>
                 </span>
-                <span>
-                  Saving
-                </span>
-              </span>
-            </button>
-            <button
-              className="btn btn-link"
-              disabled={false}
-              onClick={[Function]}
-              type="button"
-            >
-              Cancel
-            </button>
+              </button>
+              <button
+                class="btn btn-link"
+                type="button"
+              >
+                Cancel
+              </button>
+            </div>
           </div>
-        </div>
-      </form>
+        </form>
+      </div>
     </div>
   </div>
 </div>
 `;
 
 exports[`<SocialLinks /> calls social links with edit mode certificates 1`] = `
-<div
-  className="pgn-transition-replace-group position-relative mb-5"
-  style={
-    Object {
-      "height": null,
-    }
-  }
->
+<div>
   <div
-    style={
-      Object {
-        "padding": ".1px 0",
-      }
-    }
+    class="pgn-transition-replace-group position-relative mb-5"
   >
     <div
-      className="editable-item-header mb-2"
+      style="padding: .1px 0px;"
     >
-      <h2
-        className="edit-section-header"
-        id={null}
+      <div
+        class="editable-item-header mb-2"
       >
-        Social Links
-        <button
-          className="float-right px-0 btn btn-link btn-sm"
-          disabled={false}
-          onClick={[Function]}
-          style={
-            Object {
-              "marginTop": "-.35rem",
-            }
-          }
-          type="button"
+        <h2
+          class="edit-section-header"
         >
-          <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"
+          Social Links
+          <button
+            class="float-right px-0 btn btn-link btn-sm"
+            style="margin-top: -.35rem;"
+            type="button"
           >
-            <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"
+            <svg
+              aria-hidden="true"
+              class="svg-inline--fa fa-pencil mr-1"
+              data-icon="pencil"
+              data-prefix="fas"
+              focusable="false"
+              role="img"
+              viewBox="0 0 512 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+                fill="currentColor"
+              />
+            </svg>
+            Edit
+          </button>
+        </h2>
+        <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>
+      <ul
+        class="list-unstyled"
       >
-        <span
-          className="ml-auto small text-muted"
+        <li
+          class="form-group"
         >
-          <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"
+          <a
+            class="font-weight-bold"
+            href="https://www.facebook.com/aloha"
           >
-            <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>
+            <svg
+              aria-hidden="true"
+              class="svg-inline--fa fa-facebook mr-2"
+              data-icon="facebook"
+              data-prefix="fab"
+              focusable="false"
+              role="img"
+              viewBox="0 0 512 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5V334.2H141.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287V510.1C413.8 494.8 512 386.9 512 256h0z"
+                fill="currentColor"
+              />
+            </svg>
+            Facebook
+          </a>
+        </li>
+        <li
+          class="form-group"
+        >
+          <a
+            class="font-weight-bold"
+            href="https://www.twitter.com/ALOHA"
+          >
+            <svg
+              aria-hidden="true"
+              class="svg-inline--fa fa-twitter mr-2"
+              data-icon="twitter"
+              data-prefix="fab"
+              focusable="false"
+              role="img"
+              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"
+              />
+            </svg>
+            Twitter
+          </a>
+        </li>
+      </ul>
     </div>
-    <ul
-      className="list-unstyled"
-    >
-      <li
-        className="form-group"
-      >
-        <a
-          className="font-weight-bold"
-          href="https://www.facebook.com/aloha"
-        >
-          <svg
-            aria-hidden="true"
-            className="svg-inline--fa fa-facebook fa-w-16 mr-2"
-            data-icon="facebook"
-            data-prefix="fab"
-            focusable="false"
-            role="img"
-            style={Object {}}
-            viewBox="0 0 512 512"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"
-              fill="currentColor"
-              style={Object {}}
-            />
-          </svg>
-          Facebook
-        </a>
-      </li>
-      <li
-        className="form-group"
-      >
-        <a
-          className="font-weight-bold"
-          href="https://www.twitter.com/ALOHA"
-        >
-          <svg
-            aria-hidden="true"
-            className="svg-inline--fa fa-twitter fa-w-16 mr-2"
-            data-icon="twitter"
-            data-prefix="fab"
-            focusable="false"
-            role="img"
-            style={Object {}}
-            viewBox="0 0 512 512"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
-              fill="currentColor"
-              style={Object {}}
-            />
-          </svg>
-          Twitter
-        </a>
-      </li>
-    </ul>
   </div>
 </div>
 `;
 
 exports[`<SocialLinks /> calls social links with edit mode goals 1`] = `
-<div
-  className="pgn-transition-replace-group position-relative mb-5"
-  style={
-    Object {
-      "height": null,
-    }
-  }
->
+<div>
   <div
-    style={
-      Object {
-        "padding": ".1px 0",
-      }
-    }
+    class="pgn-transition-replace-group position-relative mb-5"
   >
     <div
-      className="editable-item-header mb-2"
+      style="padding: .1px 0px;"
     >
-      <h2
-        className="edit-section-header"
-        id={null}
+      <div
+        class="editable-item-header mb-2"
       >
-        Social Links
-      </h2>
+        <h2
+          class="edit-section-header"
+        >
+          Social Links
+        </h2>
+      </div>
+      <ul
+        class="list-unstyled"
+      >
+        <li
+          class="mb-4"
+        >
+          <div>
+            <button
+              class="pl-0 text-left btn btn-link"
+              tabindex="0"
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                class="svg-inline--fa fa-plus fa-xs mr-2"
+                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 Facebook
+            </button>
+          </div>
+        </li>
+        <li
+          class="mb-4"
+        >
+          <div>
+            <button
+              class="pl-0 text-left btn btn-link"
+              tabindex="0"
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                class="svg-inline--fa fa-plus fa-xs mr-2"
+                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 Twitter
+            </button>
+          </div>
+        </li>
+      </ul>
     </div>
-    <ul
-      className="list-unstyled"
-    >
-      <li
-        className="mb-4"
-      >
-        <div>
-          <button
-            className="pl-0 text-left btn btn-link"
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            tabIndex={0}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-plus fa-w-14 fa-xs mr-2"
-              data-icon="plus"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 448 512"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-                fill="currentColor"
-                style={Object {}}
-              />
-            </svg>
-            Add Facebook
-          </button>
-        </div>
-      </li>
-      <li
-        className="mb-4"
-      >
-        <div>
-          <button
-            className="pl-0 text-left btn btn-link"
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            tabIndex={0}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-plus fa-w-14 fa-xs mr-2"
-              data-icon="plus"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 448 512"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-                fill="currentColor"
-                style={Object {}}
-              />
-            </svg>
-            Add Twitter
-          </button>
-        </div>
-      </li>
-    </ul>
   </div>
 </div>
 `;
 
 exports[`<SocialLinks /> calls social links with edit mode socialLinks 1`] = `
-<div
-  className="pgn-transition-replace-group position-relative mb-5"
-  style={
-    Object {
-      "height": null,
-    }
-  }
->
+<div>
   <div
-    style={
-      Object {
-        "padding": ".1px 0",
-      }
-    }
+    class="pgn-transition-replace-group position-relative mb-5"
   >
     <div
-      className="editable-item-header mb-2"
+      style="padding: .1px 0px;"
     >
-      <h2
-        className="edit-section-header"
-        id={null}
+      <div
+        class="editable-item-header mb-2"
       >
-        Social Links
-        <button
-          className="float-right px-0 btn btn-link btn-sm"
-          disabled={false}
-          onClick={[Function]}
-          style={
-            Object {
-              "marginTop": "-.35rem",
-            }
-          }
-          type="button"
+        <h2
+          class="edit-section-header"
         >
-          <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"
+          Social Links
+          <button
+            class="float-right px-0 btn btn-link btn-sm"
+            style="margin-top: -.35rem;"
+            type="button"
           >
-            <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"
+            <svg
+              aria-hidden="true"
+              class="svg-inline--fa fa-pencil mr-1"
+              data-icon="pencil"
+              data-prefix="fas"
+              focusable="false"
+              role="img"
+              viewBox="0 0 512 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+                fill="currentColor"
+              />
+            </svg>
+            Edit
+          </button>
+        </h2>
+        <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>
+      <ul
+        class="list-unstyled"
       >
-        <span
-          className="ml-auto small text-muted"
+        <li
+          class="form-group"
         >
-          <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"
+          <a
+            class="font-weight-bold"
+            href="https://www.facebook.com/aloha"
           >
-            <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>
+            <svg
+              aria-hidden="true"
+              class="svg-inline--fa fa-facebook mr-2"
+              data-icon="facebook"
+              data-prefix="fab"
+              focusable="false"
+              role="img"
+              viewBox="0 0 512 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5V334.2H141.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287V510.1C413.8 494.8 512 386.9 512 256h0z"
+                fill="currentColor"
+              />
+            </svg>
+            Facebook
+          </a>
+        </li>
+        <li
+          class="form-group"
+        >
+          <a
+            class="font-weight-bold"
+            href="https://www.twitter.com/ALOHA"
+          >
+            <svg
+              aria-hidden="true"
+              class="svg-inline--fa fa-twitter mr-2"
+              data-icon="twitter"
+              data-prefix="fab"
+              focusable="false"
+              role="img"
+              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"
+              />
+            </svg>
+            Twitter
+          </a>
+        </li>
+      </ul>
     </div>
-    <ul
-      className="list-unstyled"
-    >
-      <li
-        className="form-group"
-      >
-        <a
-          className="font-weight-bold"
-          href="https://www.facebook.com/aloha"
-        >
-          <svg
-            aria-hidden="true"
-            className="svg-inline--fa fa-facebook fa-w-16 mr-2"
-            data-icon="facebook"
-            data-prefix="fab"
-            focusable="false"
-            role="img"
-            style={Object {}}
-            viewBox="0 0 512 512"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"
-              fill="currentColor"
-              style={Object {}}
-            />
-          </svg>
-          Facebook
-        </a>
-      </li>
-      <li
-        className="form-group"
-      >
-        <a
-          className="font-weight-bold"
-          href="https://www.twitter.com/ALOHA"
-        >
-          <svg
-            aria-hidden="true"
-            className="svg-inline--fa fa-twitter fa-w-16 mr-2"
-            data-icon="twitter"
-            data-prefix="fab"
-            focusable="false"
-            role="img"
-            style={Object {}}
-            viewBox="0 0 512 512"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
-              fill="currentColor"
-              style={Object {}}
-            />
-          </svg>
-          Twitter
-        </a>
-      </li>
-    </ul>
   </div>
 </div>
 `;

src/profile/forms/elements/EditButton.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faPencilAlt } from '@fortawesome/free-solid-svg-icons';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Button } from '@edx/paragon';
+import { Button } from '@openedx/paragon';
 
 import messages from './EditButton.messages';
 

src/profile/forms/elements/FormControls.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, StatefulButton } from '@edx/paragon';
+import { Button, StatefulButton } from '@openedx/paragon';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
 import messages from './FormControls.messages';

src/profile/forms/elements/SwitchContent.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { TransitionReplace } from '@edx/paragon';
+import { TransitionReplace } from '@openedx/paragon';
 
 const onChildExit = (htmlNode) => {
   // If the leaving child has focus, take control and redirect it

src/profile/forms/elements/Visibility.jsx

@@ -39,7 +39,7 @@ const VisibilitySelect = ({ intl, className, ...props }) => {
       <span className="d-inline-block ml-1 mr-2" style={{ width: '1.5rem' }}>
         <FontAwesomeIcon icon={icon} />
       </span>
-      <select className="d-inline-block w-auto form-control" {...props}>
+      <select className="d-inline-block form-control" {...props}>
         <option key="private" value="private">
           {intl.formatMessage(messages['profile.visibility.who.just.me'])}
         </option>

src/routes/AppRoutes.jsx

@@ -1,22 +1,17 @@
 import React from 'react';
-import { getConfig } from '@edx/frontend-platform';
 import {
   AuthenticatedPageRoute,
-  PageRoute,
+  PageWrap,
 } from '@edx/frontend-platform/react';
-import { Switch } from 'react-router-dom';
+import { Routes, Route } from 'react-router-dom';
 import { ProfilePage, NotFoundPage } from '../profile';
-import { SkillsBuilder } from '../skills-builder';
 
 const AppRoutes = () => (
-  <Switch>
-    {getConfig().ENABLE_SKILLS_BUILDER && (
-      <PageRoute path="/skills" component={SkillsBuilder} />
-    )}
-    <AuthenticatedPageRoute path="/u/:username" component={ProfilePage} />
-    <PageRoute path="/notfound" component={NotFoundPage} />
-    <PageRoute path="*" component={NotFoundPage} />
-  </Switch>
+  <Routes>
+    <Route path="/u/:username" element={<AuthenticatedPageRoute><ProfilePage /></AuthenticatedPageRoute>} />
+    <Route path="/notfound" element={<PageWrap><NotFoundPage /></PageWrap>} />
+    <Route path="*" element={<PageWrap><NotFoundPage /></PageWrap>} />
+  </Routes>
 );
 
 export default AppRoutes;

src/routes/routes.test.jsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import { AppContext } from '@edx/frontend-platform/react';
 import { getConfig } from '@edx/frontend-platform';
-import { Router } from 'react-router';
+import { MemoryRouter as Router } from 'react-router-dom';
 import { render, screen } from '@testing-library/react';
-import { createMemoryHistory } from 'history';
 import { getLoginRedirectUrl } from '@edx/frontend-platform/auth';
 import AppRoutes from './AppRoutes';
 
@@ -13,24 +12,14 @@ jest.mock('@edx/frontend-platform/auth', () => ({
   getLoginRedirectUrl: jest.fn(),
 }));
 
-jest.mock('@edx/frontend-platform', () => ({
-  getConfig: jest.fn(() => ({
-    ENABLE_SKILLS_BUILDER: true,
-  })),
-}));
-
 jest.mock('../profile', () => ({
   ProfilePage: () => (<div>Profile page</div>),
   NotFoundPage: () => (<div>Not found page</div>),
 }));
 
-jest.mock('../skills-builder', () => ({
-  SkillsBuilder: () => (<div>Skills Builder</div>),
-}));
-
-const RoutesWithProvider = (context, history) => (
+const RoutesWithProvider = (context, path) => (
   <AppContext.Provider value={context}>
-    <Router history={history}>
+    <Router initialEntries={[`${path}`]}>
       <AppRoutes />
     </Router>
   </AppContext.Provider>
@@ -42,22 +31,14 @@ const unauthenticatedUser = {
 };
 
 describe('routes', () => {
-  let history;
-
-  beforeEach(() => {
-    history = createMemoryHistory();
-  });
-
   test('Profile page should redirect for unauthenticated users', () => {
-    history.push('/u/edx');
     render(
-      RoutesWithProvider(unauthenticatedUser, history),
+      RoutesWithProvider(unauthenticatedUser, '/u/edx'),
     );
     expect(getLoginRedirectUrl).toHaveBeenCalled();
   });
 
   test('Profile page should be accessible for authenticated users', () => {
-    history.push('/u/edx');
     render(
       RoutesWithProvider(
         {
@@ -67,24 +48,15 @@ describe('routes', () => {
           },
           config: getConfig(),
         },
-        history,
+        '/u/edx',
       ),
     );
     expect(screen.getByText('Profile page')).toBeTruthy();
   });
 
-  test('Skills Builder page should be accessible to unauthenticated users', () => {
-    history.push('/skills');
-    render(
-      RoutesWithProvider(unauthenticatedUser, history),
-    );
-    expect(screen.getByText('Skills Builder')).toBeTruthy();
-  });
-
   test('should show NotFound page for a bad route', () => {
-    history.push('/nonMatchingRoute');
     render(
-      RoutesWithProvider(unauthenticatedUser, history),
+      RoutesWithProvider(unauthenticatedUser, '/nonMatchingRoute'),
     );
     expect(screen.getByText('Not found page')).toBeTruthy();
   });

src/setupTest.js

@@ -1,7 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import 'core-js/stable';
 import 'regenerator-runtime/runtime';
-
-import Enzyme from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
-
-Enzyme.configure({ adapter: new Adapter() });
+import '@testing-library/jest-dom';

src/skills-builder/SkillsBuilder.jsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import { SkillsBuilderModal } from './skills-builder-modal';
-import { SkillsBuilderProvider } from './skills-builder-context';
-
-const SkillsBuilder = () => (
-  <SkillsBuilderProvider>
-    <SkillsBuilderModal />
-  </SkillsBuilderProvider>
-);
-
-export default SkillsBuilder;

src/skills-builder/data/actions.js

@@ -1,26 +0,0 @@
-import {
-  SET_GOAL,
-  SET_CURRENT_JOB_TITLE,
-  ADD_CAREER_INTEREST,
-  REMOVE_CAREER_INTEREST,
-} from './constants';
-
-export const setGoal = (payload) => ({
-  type: SET_GOAL,
-  payload,
-});
-
-export const setCurrentJobTitle = (payload) => ({
-  type: SET_CURRENT_JOB_TITLE,
-  payload,
-});
-
-export const addCareerInterest = (payload) => ({
-  type: ADD_CAREER_INTEREST,
-  payload,
-});
-
-export const removeCareerInterest = (payload) => ({
-  type: REMOVE_CAREER_INTEREST,
-  payload,
-});

src/skills-builder/data/constants.js

@@ -1,9 +0,0 @@
-// Actions for Skills Context
-export const SET_GOAL = 'SET_GOAL';
-export const SET_CURRENT_JOB_TITLE = 'SET_CURRENT_JOB_TITLE';
-export const ADD_CAREER_INTEREST = 'ADD_CAREER_INTEREST';
-export const REMOVE_CAREER_INTEREST = 'REMOVE_CAREER_INTEREST';
-
-// Stepper keys
-export const STEP1 = 'select-your-preferences';
-export const STEP2 = 'review-your-results';

src/skills-builder/data/reducer.js

@@ -1,41 +0,0 @@
-import {
-  SET_GOAL,
-  SET_CURRENT_JOB_TITLE,
-  ADD_CAREER_INTEREST,
-  REMOVE_CAREER_INTEREST,
-} from './constants';
-
-export function skillsReducer(state, action) {
-  switch (action.type) {
-    case SET_GOAL:
-      return {
-        ...state,
-        currentGoal: action.payload,
-      };
-    case SET_CURRENT_JOB_TITLE:
-      return {
-        ...state,
-        currentJobTitle: action.payload,
-      };
-    case ADD_CAREER_INTEREST:
-      return {
-        ...state,
-        careerInterests: [...state.careerInterests, action.payload],
-      };
-    case REMOVE_CAREER_INTEREST:
-      return {
-        ...state,
-        careerInterests: state.careerInterests.filter(interest => interest !== action.payload),
-      };
-    default:
-      return state;
-  }
-}
-
-export const skillsInitialState = {
-  currentGoal: '',
-  currentJobTitle: '',
-  careerInterests: [],
-};
-
-export default skillsReducer;

src/skills-builder/data/test/reducer.test.js

@@ -1,60 +0,0 @@
-import { skillsReducer, skillsInitialState } from '../reducer';
-import {
-  SET_GOAL,
-  SET_CURRENT_JOB_TITLE,
-  ADD_CAREER_INTEREST,
-  REMOVE_CAREER_INTEREST,
-} from '../constants';
-
-describe('skillsReducer', () => {
-  const testState = skillsInitialState;
-  beforeEach(() => jest.resetModules());
-
-  it('does not remove present data when SET_GOAL action is dispatched', () => {
-    const newGoalPayload = 'test-goal';
-    const returnedState = skillsReducer(testState, { type: SET_GOAL, payload: newGoalPayload });
-    const finalState = {
-      ...testState,
-      currentGoal: 'test-goal',
-    };
-    expect(returnedState).toEqual(finalState);
-  });
-
-  it('does not remove present data when SET_JOB_TITLE action is dispatched', () => {
-    const newJobTitlePayload = 'test-job-title';
-    const returnedState = skillsReducer(testState, { type: SET_CURRENT_JOB_TITLE, payload: newJobTitlePayload });
-    const finalState = {
-      ...testState,
-      currentJobTitle: 'test-job-title',
-    };
-    expect(returnedState).toEqual(finalState);
-  });
-
-  it('adds a careerInterest when ADD_CAREER_INTEREST action is dispatched', () => {
-    const newCareerInterestPayload = 'test-career-interest';
-    const returnedState = skillsReducer(testState, { type: ADD_CAREER_INTEREST, payload: newCareerInterestPayload });
-    const finalState = {
-      ...testState,
-      careerInterests: [...testState.careerInterests, 'test-career-interest'],
-    };
-    expect(returnedState).toEqual(finalState);
-  });
-
-  it('removes a careerInterest when REMOVE_CAREER_INTEREST action is dispatched', () => {
-    const newCareerInterestPayload = 'test-career-interest';
-    const testStateWithInterest = {
-      ...testState,
-      careerInterests: [newCareerInterestPayload],
-    };
-    const returnedState = skillsReducer(
-      testStateWithInterest,
-      { type: REMOVE_CAREER_INTEREST, payload: newCareerInterestPayload },
-    );
-    const finalState = {
-      ...testStateWithInterest,
-      // override the 'careerInterests` field and remove 'test-career-interest' from the array
-      careerInterests: testStateWithInterest.careerInterests.filter(interest => interest !== newCareerInterestPayload),
-    };
-    expect(returnedState).toEqual(finalState);
-  });
-});

src/skills-builder/images/edX-logo.svg

@@ -1,3 +0,0 @@
-<svg width="148" height="83" viewBox="0 0 148 83" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M97.6992 0L94.8413 14.525H148L133.537 83H66.3135L70.1777 64.325H0L13.7661 0H97.6992ZM45.3759 37.6596C45.419 37.1851 45.4513 36.7212 45.4729 36.2654C45.4944 35.8123 45.5052 35.4154 45.5025 35.0776C45.5025 32.8602 45.1523 30.8949 44.452 29.1842C43.7517 27.4736 42.8063 26.0311 41.6184 24.8594C40.4306 23.685 39.0461 22.7948 37.465 22.1808C35.8812 21.5668 34.2112 21.2611 32.4496 21.2611C29.8396 21.2611 27.4343 21.7679 25.2391 22.7814C23.0412 23.7949 21.1584 25.2267 19.588 27.0741C18.0177 28.9241 16.7922 31.1415 15.9114 33.7289C15.0306 36.3163 14.5915 39.1853 14.5915 42.333C14.5915 44.6362 14.9579 46.674 15.6905 48.449C16.4231 50.2239 17.4198 51.7174 18.683 52.932C19.9463 54.1466 21.4277 55.0663 23.1246 55.6883C24.8216 56.313 26.6262 56.6241 28.5359 56.6241C30.5319 56.6241 32.3608 56.3854 34.0281 55.9109C35.6927 55.4363 37.1579 54.7794 38.4212 53.9455C39.6845 53.1116 40.7296 52.1223 41.5565 50.9827C42.3834 49.8432 42.9787 48.6179 43.3396 47.3067H37.5135C36.7916 48.6393 35.7411 49.6957 34.3621 50.476C32.983 51.2562 31.1568 51.6477 28.8861 51.6477C27.8464 51.6477 26.8175 51.4734 25.7993 51.1248C24.7812 50.7763 23.8627 50.2132 23.0465 49.4303C22.2277 48.6474 21.5651 47.6392 21.056 46.4032C20.5469 45.1671 20.2911 43.6737 20.2911 41.9201C20.2911 41.6252 20.2964 41.341 20.3072 41.0648C20.318 40.7913 20.3342 40.5071 20.3557 40.2095H45.0904C45.155 39.8931 45.2062 39.507 45.2493 39.0539C45.2762 38.7515 45.3044 38.4432 45.333 38.1306L45.3759 37.6596ZM37.8017 28.5488C37.1445 27.7873 36.3256 27.1867 35.3506 26.7416C34.3728 26.2992 33.2388 26.0767 31.9433 26.0767C30.6261 26.0767 29.3952 26.3099 28.2504 26.7738C27.103 27.2376 26.0633 27.8999 25.1313 28.7552C24.1967 29.6105 23.3913 30.6348 22.7125 31.8279C22.0338 33.0211 21.4924 34.3483 21.0883 35.8042H39.7114C39.7329 35.6997 39.7491 35.5039 39.7599 35.217C39.7706 34.9328 39.776 34.6513 39.776 34.3778C39.776 33.257 39.6117 32.1953 39.2831 31.1925C38.9518 30.1924 38.4589 29.3102 37.8017 28.5488ZM71.4707 56.0235L72.4565 51.3661H71.9475C70.695 52.9937 69.1246 54.2753 67.2365 55.2164C65.3483 56.1549 63.3093 56.6268 61.1249 56.6268C59.4064 56.6268 57.793 56.305 56.2846 55.6588C54.7762 55.0153 53.4564 54.0903 52.3224 52.8864C51.1857 51.6825 50.2888 50.2239 49.6316 48.5133C48.9743 46.8027 48.6457 44.8909 48.6457 42.7781C48.6457 40.7297 48.8531 38.7697 49.2652 36.9008C49.68 35.032 50.2672 33.2999 51.0322 31.7046C51.7972 30.1092 52.713 28.6667 53.785 27.3797C54.857 26.0901 56.0449 24.9934 57.3512 24.0845C58.6576 23.1755 60.0663 22.4784 61.5854 21.9931C63.1019 21.5078 64.6884 21.2638 66.3449 21.2638C67.5759 21.2638 68.7475 21.4327 69.8627 21.7706C70.9778 22.1084 71.9852 22.5776 72.8875 23.1809C73.7898 23.7842 74.5629 24.5108 75.212 25.3661C75.8585 26.2214 76.3325 27.1572 76.6288 28.1707H77.1379L81.3721 8.3H86.9423L76.7554 56.0261H71.4707V56.0235ZM70.3556 26.8381C71.4169 27.2805 72.3192 27.9106 73.0626 28.723C73.806 29.5381 74.3771 30.5248 74.7784 31.6831C75.1824 32.8468 75.3844 34.1552 75.3844 35.6138C75.3844 37.8741 75.0639 39.9816 74.4282 41.9362C73.7926 43.8908 72.9118 45.5907 71.7859 47.0386C70.6627 48.4838 69.3402 49.626 67.8237 50.4599C66.3046 51.2964 64.6561 51.712 62.873 51.712C61.6016 51.712 60.4434 51.4734 59.4037 50.9988C58.364 50.5216 57.4725 49.8566 56.7291 49.0013C55.9856 48.146 55.4092 47.1164 54.9944 45.9125C54.5796 44.7086 54.3722 43.3894 54.3722 41.9523C54.3722 39.6491 54.6927 37.5309 55.3284 35.5978C55.9641 33.6673 56.8341 32.0022 57.9384 30.608C59.0428 29.2137 60.3465 28.1278 61.8548 27.3449C63.3605 26.5646 64.9955 26.1732 66.7571 26.1732C68.0957 26.1732 69.2944 26.393 70.3556 26.8381ZM126.409 74.7H114.031L105.938 57.0191H104.927L89.9496 74.7H77.6479L100.989 47.1736L90.1767 22.825H102.789L109.982 39.5884H110.652L124.254 22.825H136.724L114.442 48.3925L126.409 74.7Z" fill="white"/>
-</svg>

src/skills-builder/index.js

@@ -1,2 +0,0 @@
-// eslint-disable-next-line import/prefer-default-export
-export { default as SkillsBuilder } from './SkillsBuilder';

src/skills-builder/skills-builder-context/SkillsBuilderProvider.jsx

@@ -1,32 +0,0 @@
-import React, { createContext, useReducer, useMemo } from 'react';
-import PropTypes from 'prop-types';
-import reducer, { skillsInitialState } from '../data/reducer';
-import { useAlgoliaSearch } from '../utils/search';
-
-export const SkillsBuilderContext = createContext();
-
-export const SkillsBuilderProvider = ({ children }) => {
-  const [state, dispatch] = useReducer(reducer, skillsInitialState);
-
-  const [searchClient, productSearchIndex, jobSearchIndex] = useAlgoliaSearch();
-
-  const value = useMemo(() => ({
-    state,
-    dispatch,
-    algolia: {
-      searchClient,
-      productSearchIndex,
-      jobSearchIndex,
-    },
-  }), [state, searchClient, productSearchIndex, jobSearchIndex]);
-
-  return (
-    <SkillsBuilderContext.Provider value={value}>
-      {children}
-    </SkillsBuilderContext.Provider>
-  );
-};
-
-SkillsBuilderProvider.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
-};

src/skills-builder/skills-builder-context/index.js

@@ -1,2 +0,0 @@
-// eslint-disable-next-line import/prefer-default-export
-export { SkillsBuilderProvider, SkillsBuilderContext } from './SkillsBuilderProvider';

src/skills-builder/skills-builder-header/SkillsBuilderHeader.jsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import edXLogo from '../images/edX-logo.svg';
-import messages from './messages';
-
-const SkillsBuilderHeader = ({ isMedium }) => {
-  const { formatMessage } = useIntl();
-
-  if (isMedium) {
-    return (
-      <div className="d-flex">
-        <h1 className="h3 mb-0 text-white">
-          {formatMessage(messages.skillsBuilderHeaderTitleIsMedium)}
-        </h1>
-      </div>
-    );
-  }
-  return (
-    <div className="d-flex">
-      <img src={edXLogo} alt="edx-logo" className="mt-2 h-50" />
-      <div className="ml-5 vertical-line" />
-      <div className="w-100 ml-5">
-        <h1 className="h1 text-warning-300">
-          {formatMessage(messages.skillsBuilderHeaderTitle)}
-        </h1>
-        <p className="h2 text-white">
-          {formatMessage(messages.skillsBuilderHeaderSubheading)}
-        </p>
-      </div>
-    </div>
-  );
-};
-
-SkillsBuilderHeader.propTypes = {
-  isMedium: PropTypes.func.isRequired,
-};
-
-export default SkillsBuilderHeader;

src/skills-builder/skills-builder-header/index.js

@@ -1,2 +0,0 @@
-// eslint-disable-next-line import/prefer-default-export
-export { default as SkillsBuilderHeader } from './SkillsBuilderHeader';

src/skills-builder/skills-builder-header/messages.js

@@ -1,21 +0,0 @@
-import { defineMessages } from '@edx/frontend-platform/i18n';
-
-const messages = defineMessages({
-  skillsBuilderHeaderTitle: {
-    id: 'skills.builder.header.title',
-    defaultMessage: 'Skills Builder',
-    description: 'Title for the Skills Builder feature',
-  },
-  skillsBuilderHeaderSubheading: {
-    id: 'skills.builder.header.subheading',
-    defaultMessage: 'Let edX be your guide',
-    description: 'Subheading to the Skills Builder title in the header component',
-  },
-  skillsBuilderHeaderTitleIsMedium: {
-    id: 'skills.builder.header.title.is.medium',
-    defaultMessage: 'edX Skills builder',
-    description: 'Title for the Skills Builder feature when screen size is medium or less',
-  },
-});
-
-export default messages;

src/skills-builder/skills-builder-header/skillsBuilderHeader.scss

@@ -1,4 +0,0 @@
-.vertical-line {
-  border-left: 7px solid #D23228;
-  transform: rotate(13deg);
-}

src/skills-builder/skills-builder-modal/SkillsBuilderModal.jsx

@@ -1,114 +0,0 @@
-import React, { useState, useContext } from 'react';
-import {
-  Button, Container, Stepper, ModalDialog, Form, Hyperlink, useMediaQuery, breakpoints,
-} from '@edx/paragon';
-import { getConfig } from '@edx/frontend-platform';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { sendTrackEvent } from '@edx/frontend-platform/analytics';
-import {
-  STEP1, STEP2,
-} from '../data/constants';
-import messages from './messages';
-
-import { SkillsBuilderContext } from '../skills-builder-context';
-import { SkillsBuilderHeader } from '../skills-builder-header';
-import { SelectPreferences } from './select-preferences';
-import ViewResults from './view-results/ViewResults';
-
-import headerImage from '../images/headerImage.png';
-
-const SkillsBuilderModal = () => {
-  const { formatMessage } = useIntl();
-  const isMedium = useMediaQuery({ maxWidth: breakpoints.medium.maxWidth });
-  const { state } = useContext(SkillsBuilderContext);
-  const { currentGoal, currentJobTitle, careerInterests } = state;
-  const [currentStep, setCurrentStep] = useState(STEP1);
-
-  const sendActionButtonEvent = (eventSuffix) => {
-    sendTrackEvent(
-      `edx.skills_builder.${eventSuffix}`,
-      {
-        app_name: 'skills_builder',
-        category: 'skills_builder',
-        learner_data: {
-          current_goal: currentGoal,
-          current_job_title: currentJobTitle,
-          career_interests: careerInterests,
-        },
-      },
-    );
-  };
-
-  const nextStepHandle = () => {
-    setCurrentStep(STEP2);
-    sendActionButtonEvent('next_step');
-  };
-  const exitButtonHandle = () => {
-    sendActionButtonEvent('exit');
-  };
-  const closeButtonHandle = () => {
-    sendActionButtonEvent('close');
-    window.location.href = getConfig().MARKETING_SITE_SEARCH_URL;
-  };
-
-  return (
-    <Stepper activeKey={currentStep}>
-      <ModalDialog
-        title="Skills Builder"
-        size="fullscreen"
-        className="skills-builder-modal bg-light-200"
-        isOpen
-        onClose={closeButtonHandle}
-      >
-        <ModalDialog.Hero className="med-min-height">
-          <ModalDialog.Hero.Background className="bg-primary-500">
-            { !isMedium && <img src={headerImage} alt="" className="h-100" /> }
-          </ModalDialog.Hero.Background>
-          <ModalDialog.Hero.Content>
-            <SkillsBuilderHeader isMedium={isMedium} />
-          </ModalDialog.Hero.Content>
-        </ModalDialog.Hero>
-
-        <Stepper.Header compactWidth="md" />
-
-        <ModalDialog.Body>
-          <Container size="md" className="p-4.5">
-            <Form>
-              <Stepper.Step eventKey={STEP1} title={formatMessage(messages.selectPreferences)}>
-                <SelectPreferences />
-              </Stepper.Step>
-
-              <Stepper.Step eventKey={STEP2} title={formatMessage(messages.reviewResults)}>
-                <ViewResults />
-              </Stepper.Step>
-            </Form>
-          </Container>
-        </ModalDialog.Body>
-
-        <ModalDialog.Footer>
-          <Stepper.ActionRow eventKey={STEP1}>
-            <Button
-              onClick={nextStepHandle}
-              disabled={careerInterests.length === 0}
-            >
-              {formatMessage(messages.nextStepButton)}
-            </Button>
-          </Stepper.ActionRow>
-          <Stepper.ActionRow eventKey={STEP2}>
-            <Button variant="outline-primary" onClick={() => setCurrentStep(STEP1)}>
-              {formatMessage(messages.goBackButton)}
-            </Button>
-            <Stepper.ActionRow.Spacer />
-            <Hyperlink destination={getConfig().MARKETING_SITE_SEARCH_URL}>
-              <Button onClick={exitButtonHandle}>
-                {formatMessage(messages.exitButton)}
-              </Button>
-            </Hyperlink>
-          </Stepper.ActionRow>
-        </ModalDialog.Footer>
-      </ModalDialog>
-    </Stepper>
-  );
-};
-
-export default SkillsBuilderModal;

src/skills-builder/skills-builder-modal/index.js

@@ -1,2 +0,0 @@
-// eslint-disable-next-line import/prefer-default-export
-export { default as SkillsBuilderModal } from './SkillsBuilderModal';

src/skills-builder/skills-builder-modal/messages.js

@@ -1,32 +0,0 @@
-import { defineMessages } from '@edx/frontend-platform/i18n';
-
-const messages = defineMessages({
-  /* Modal Action Row Buttons */
-  goBackButton: {
-    id: 'go.back.button',
-    defaultMessage: 'Go Back',
-    description: 'Button that sends the user to the previous step in the skills builder.',
-  },
-  nextStepButton: {
-    id: 'next.step.button',
-    defaultMessage: 'Next Step',
-    description: 'Button that sends the user to the next step in the skills builder.',
-  },
-  exitButton: {
-    id: 'exit.button',
-    defaultMessage: 'Exit',
-    description: 'Button that exits the Skills Builder.',
-  },
-  selectPreferences: {
-    id: 'select.preferences',
-    defaultMessage: 'Select preferences',
-    description: 'The first step of the Skills Builder for selecting a goal, a current job/occupation, and career interests',
-  },
-  reviewResults: {
-    id: 'review.results',
-    defaultMessage: 'Review results',
-    description: 'The second step of the Skills Builder for rendering results from learner input',
-  },
-});
-
-export default messages;

src/skills-builder/skills-builder-modal/select-preferences/CareerInterestCard.jsx

@@ -1,51 +0,0 @@
-import React, { useContext } from 'react';
-import PropTypes from 'prop-types';
-import {
-  IconButton, Icon,
-} from '@edx/paragon';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { sendTrackEvent } from '@edx/frontend-platform/analytics';
-import { Close } from '@edx/paragon/icons';
-import { SkillsBuilderContext } from '../../skills-builder-context';
-import { removeCareerInterest } from '../../data/actions';
-import messages from './messages';
-
-const CareerInterestCard = ({ interest }) => {
-  const { formatMessage } = useIntl();
-  const { dispatch } = useContext(SkillsBuilderContext);
-
-  const handleRemoveCareerInterest = () => {
-    dispatch(removeCareerInterest(interest));
-
-    sendTrackEvent(
-      'edx.skills_builder.career_interest.removed',
-      {
-        app_name: 'skills_builder',
-        category: 'skills_builder',
-        learner_data: {
-          career_interest: interest,
-        },
-      },
-    );
-  };
-
-  return (
-    <div className="d-flex justify-content-between align-items-center pb-2 pr-2 pl-4 rounded shadow-sm">
-      <p className="pt-4">
-        {interest}
-      </p>
-      <IconButton
-        iconAs={Icon}
-        src={Close}
-        alt={`${formatMessage(messages.removeCareerInterestButtonAltText)} ${interest}`}
-        onClick={handleRemoveCareerInterest}
-      />
-    </div>
-  );
-};
-
-CareerInterestCard.propTypes = {
-  interest: PropTypes.string.isRequired,
-};
-
-export default CareerInterestCard;

src/skills-builder/skills-builder-modal/select-preferences/CareerInterestSelect.jsx

@@ -1,65 +0,0 @@
-import React, { useContext } from 'react';
-import { getConfig } from '@edx/frontend-platform';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { sendTrackEvent } from '@edx/frontend-platform/analytics';
-import {
-  Stack, Row, Col, Form,
-} from '@edx/paragon';
-import { Configure, InstantSearch } from 'react-instantsearch-hooks-web';
-import JobTitleInstantSearch from './JobTitleInstantSearch';
-import CareerInterestCard from './CareerInterestCard';
-import { addCareerInterest } from '../../data/actions';
-import { SkillsBuilderContext } from '../../skills-builder-context';
-import messages from './messages';
-
-const CareerInterestSelect = () => {
-  const { formatMessage } = useIntl();
-  const { state, dispatch, algolia } = useContext(SkillsBuilderContext);
-  const { careerInterests } = state;
-  const { searchClient } = algolia;
-
-  const handleCareerInterestSelect = (value) => {
-    if (!careerInterests.includes(value) && careerInterests.length < 3) {
-      dispatch(addCareerInterest(value));
-
-      sendTrackEvent(
-        'edx.skills_builder.career_interest.added',
-        {
-          app_name: 'skills_builder',
-          category: 'skills_builder',
-          learner_data: {
-            career_interest: value,
-          },
-        },
-      );
-    }
-  };
-
-  return (
-    <Stack gap={2}>
-      <Form.Label>
-        <h4 className="mb-3">
-          {formatMessage(messages.careerInterestPrompt)}
-        </h4>
-        <InstantSearch searchClient={searchClient} indexName={getConfig().ALGOLIA_JOBS_INDEX_NAME}>
-          <Configure filters="b2c_opt_in:true" />
-          <JobTitleInstantSearch
-            onSelected={handleCareerInterestSelect}
-            placeholder={formatMessage(messages.careerInterestInputPlaceholderText)}
-            data-testid="career-interest-select"
-          />
-        </InstantSearch>
-      </Form.Label>
-      <Row>
-        {careerInterests.map((interest, index) => (
-          // eslint-disable-next-line react/no-array-index-key
-          <Col key={index} xs={12} sm={4} className="mb-4">
-            <CareerInterestCard interest={interest} />
-          </Col>
-        ))}
-      </Row>
-    </Stack>
-  );
-};
-
-export default CareerInterestSelect;

src/skills-builder/skills-builder-modal/select-preferences/GoalSelect.jsx

@@ -1,56 +0,0 @@
-import React, { useContext } from 'react';
-import {
-  Form,
-} from '@edx/paragon';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { sendTrackEvent } from '@edx/frontend-platform/analytics';
-import { setGoal } from '../../data/actions';
-import { SkillsBuilderContext } from '../../skills-builder-context';
-import messages from './messages';
-
-const GoalDropdown = () => {
-  const { formatMessage } = useIntl();
-  const { state, dispatch } = useContext(SkillsBuilderContext);
-  const { currentGoal } = state;
-
-  const handleGoalSelect = (e) => {
-    const { value } = e.target;
-    dispatch(setGoal(value));
-
-    sendTrackEvent(
-      'edx.skills_builder.goal.select',
-      {
-        app_name: 'skills_builder',
-        category: 'skills_builder',
-        learner_data: {
-          current_goal: value,
-        },
-      },
-    );
-  };
-
-  return (
-    <Form.Group>
-      <Form.Label>
-        <h4>
-          {formatMessage(messages.learningGoalPrompt)}
-        </h4>
-      </Form.Label>
-      <Form.Control
-        as="select"
-        value={currentGoal}
-        onChange={handleGoalSelect}
-        data-testid="goal-select-dropdown"
-      >
-        <option value="" disabled={currentGoal}>{formatMessage(messages.selectLearningGoal)}</option>
-        <option>{formatMessage(messages.learningGoalStartCareer)}</option>
-        <option>{formatMessage(messages.learningGoalAdvanceCareer)}</option>
-        <option>{formatMessage(messages.learningGoalChangeCareer)}</option>
-        <option>{formatMessage(messages.learningGoalSomethingNew)}</option>
-        <option>{formatMessage(messages.learningGoalSomethingElse)}</option>
-      </Form.Control>
-    </Form.Group>
-  );
-};
-
-export default GoalDropdown;

src/skills-builder/skills-builder-modal/select-preferences/JobTitleInstantSearch.jsx

@@ -1,43 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import {
-  Form,
-} from '@edx/paragon';
-import { useHits, useSearchBox } from 'react-instantsearch-hooks-web';
-
-const JobTitleInstantSearch = (props) => {
-  const { refine } = useSearchBox(props);
-  const { hits } = useHits(props);
-
-  const [jobInput, setJobInput] = useState('');
-
-  const handleAutosuggestChange = (value) => {
-    setJobInput(value);
-  };
-
-  useEffect(() => {
-    refine(jobInput);
-  }, [jobInput, refine]);
-
-  return (
-    <Form.Autosuggest
-      value={jobInput}
-      onChange={handleAutosuggestChange}
-      name="job-title-suggest"
-      autoComplete="off"
-      {...props}
-    >
-      {hits.map(job => (
-        <Form.AutosuggestOption key={job.id} id={job.name.replaceAll(' ', '-').toLowerCase()}>
-          {job.name}
-        </Form.AutosuggestOption>
-      ))}
-    </Form.Autosuggest>
-  );
-};
-
-JobTitleInstantSearch.propTypes = {
-  onSelected: PropTypes.func.isRequired,
-};
-
-export default JobTitleInstantSearch;

src/skills-builder/skills-builder-modal/select-preferences/JobTitleSelect.jsx

@@ -1,79 +0,0 @@
-import React, { useContext } from 'react';
-import { getConfig } from '@edx/frontend-platform';
-import {
-  Form, Stack,
-} from '@edx/paragon';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { sendTrackEvent } from '@edx/frontend-platform/analytics';
-import { InstantSearch } from 'react-instantsearch-hooks-web';
-import { setCurrentJobTitle } from '../../data/actions';
-import { SkillsBuilderContext } from '../../skills-builder-context';
-import JobTitleInstantSearch from './JobTitleInstantSearch';
-import messages from './messages';
-
-const JobTitleSelect = () => {
-  const { formatMessage } = useIntl();
-  const { state, dispatch, algolia } = useContext(SkillsBuilderContext);
-  const { searchClient } = algolia;
-  const { currentJobTitle } = state;
-
-  const handleCurrentJobTitleSelect = (value) => {
-    dispatch(setCurrentJobTitle(value));
-    sendTrackEvent(
-      'edx.skills_builder.current_job.select',
-      {
-        app_name: 'skills_builder',
-        category: 'skills_builder',
-        learner_data: {
-          current_job_title: value,
-        },
-      },
-    );
-  };
-
-  const handleCheckboxChange = (e) => {
-    const { value } = e.target;
-    // only setCurrentJobTitle if the user hasn't selected a current job as we don't want to override their selection
-    if (!currentJobTitle) { dispatch(setCurrentJobTitle(value)); }
-
-    sendTrackEvent(
-      `edx.skills_builder.current_job.${value}`,
-      {
-        app_name: 'skills_builder',
-        category: 'skills_builder',
-      },
-    );
-  };
-
-  return (
-    <Stack>
-      <Form.Label>
-        <h4 className="mb-3">
-          {formatMessage(messages.jobTitlePrompt)}
-        </h4>
-        <InstantSearch searchClient={searchClient} indexName={getConfig().ALGOLIA_JOBS_INDEX_NAME}>
-          <JobTitleInstantSearch
-            onSelected={handleCurrentJobTitleSelect}
-            placeholder={formatMessage(messages.jobTitleInputPlaceholderText)}
-            data-testid="job-title-select"
-          />
-        </InstantSearch>
-      </Form.Label>
-      <Form.Group>
-        <Form.CheckboxSet
-          name="other-occupations"
-          onChange={handleCheckboxChange}
-        >
-          <Form.Checkbox value="student">
-            {formatMessage(messages.studentCheckboxPrompt)}
-          </Form.Checkbox>
-          <Form.Checkbox value="looking_for_work">
-            {formatMessage(messages.currentlyLookingCheckboxPrompt)}
-          </Form.Checkbox>
-        </Form.CheckboxSet>
-      </Form.Group>
-    </Stack>
-  );
-};
-
-export default JobTitleSelect;

src/skills-builder/skills-builder-modal/select-preferences/SelectPreferences.jsx

@@ -1,38 +0,0 @@
-import React, { useContext } from 'react';
-import {
-  Stack,
-} from '@edx/paragon';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { SkillsBuilderContext } from '../../skills-builder-context';
-import GoalSelect from './GoalSelect';
-import JobTitleSelect from './JobTitleSelect';
-import CareerInterestSelect from './CareerInterestSelect';
-import messages from './messages';
-
-const SelectPreferences = () => {
-  const { formatMessage } = useIntl();
-  const { state } = useContext(SkillsBuilderContext);
-  const { currentGoal, currentJobTitle } = state;
-
-  return (
-    <Stack gap={4}>
-      <p className="lead">
-        {formatMessage(messages.skillsBuilderDescription)}
-      </p>
-      <Stack gap={4}>
-
-        <GoalSelect />
-
-        {currentGoal && (
-          <JobTitleSelect />
-        )}
-
-        {currentGoal && currentJobTitle && (
-          <CareerInterestSelect />
-        )}
-      </Stack>
-    </Stack>
-  );
-};
-
-export default SelectPreferences;

src/skills-builder/skills-builder-modal/select-preferences/index.js

@@ -1,2 +0,0 @@
-// eslint-disable-next-line import/prefer-default-export
-export { default as SelectPreferences } from './SelectPreferences';

src/skills-builder/skills-builder-modal/select-preferences/messages.js

@@ -1,80 +0,0 @@
-import { defineMessages } from '@edx/frontend-platform/i18n';
-
-const messages = defineMessages({
-  skillsBuilderDescription: {
-    id: 'skills.builder.description',
-    defaultMessage: 'Find the right courses and programs that help you reach your goals.',
-    description: 'Description of what the Skills Builder seeks to accomplish',
-  },
-  learningGoalPrompt: {
-    id: 'learning.goal.prompt',
-    defaultMessage: 'First, tell us what you want to achieve',
-    description: 'Prompts the user to select their current goal.',
-  },
-  selectLearningGoal: {
-    id: 'select.learning.goal',
-    defaultMessage: 'Select a goal',
-    description: 'Placeholder text for the goal selection component.',
-  },
-  learningGoalStartCareer: {
-    id: 'learning.goal.start_career',
-    defaultMessage: 'I want to start my career',
-    description: 'Selected by user if their goal is to start their career.',
-  },
-  learningGoalAdvanceCareer: {
-    id: 'learning.goal.advance_career',
-    defaultMessage: 'I want to advance my career',
-    description: 'Selected by user if their goal is to advance their career.',
-  },
-  learningGoalChangeCareer: {
-    id: 'learning.goal.change_career',
-    defaultMessage: 'I want to change careers',
-    description: 'Selected by user if their goal is to change careers.',
-  },
-  learningGoalSomethingNew: {
-    id: 'learning.goal.something.new',
-    defaultMessage: 'I want to learn something new',
-    description: 'Selected by user if their goal is to learn something new.',
-  },
-  learningGoalSomethingElse: {
-    id: 'learning.goal.something.else',
-    defaultMessage: 'Something else',
-    description: 'Selected by user if their goal is not described by the other choices.',
-  },
-  jobTitlePrompt: {
-    id: 'job.title.prompt',
-    defaultMessage: 'Next, search and select your current job title',
-    description: 'Prompts the user to select their current job title or occupation.',
-  },
-  jobTitleInputPlaceholderText: {
-    id: 'job.title.input.placeholder.text',
-    defaultMessage: 'Search and select a job title',
-    description: 'Placeholder text for the job title input control.',
-  },
-  studentCheckboxPrompt: {
-    id: 'student.checkbox.prompt',
-    defaultMessage: 'I\'m a student',
-    description: 'Label text for the corresponding checkbox',
-  },
-  currentlyLookingCheckboxPrompt: {
-    id: 'currently.looking.checkbox.prompt',
-    defaultMessage: 'I\'m currently looking for work',
-    description: 'Label text for the corresponding checkbox',
-  },
-  careerInterestPrompt: {
-    id: 'career.interest.prompt',
-    defaultMessage: 'What careers are you interested in?',
-    description: 'Prompts the user to select careers they are interested in pursuing.',
-  },
-  careerInterestInputPlaceholderText: {
-    id: 'career.interest.input.placeholder.text',
-    defaultMessage: 'Select up to 3 new job titles',
-    description: 'Placeholder text for the career interest input control.',
-  },
-  removeCareerInterestButtonAltText: {
-    id: 'career.interest.remove.button.alt.text',
-    defaultMessage: 'Remove career interest: ',
-  },
-});
-
-export default messages;

src/skills-builder/skills-builder-modal/select-preferences/test/SelectPreferences.test.jsx

@@ -1,180 +0,0 @@
-import {
-  screen, render, cleanup, fireEvent,
-} from '@testing-library/react';
-import { mergeConfig } from '@edx/frontend-platform';
-import { sendTrackEvent } from '@edx/frontend-platform/analytics';
-import { SkillsBuilderWrapperWithContext, dispatchMock, contextValue } from '../../../test/setupSkillsBuilder';
-
-jest.mock('@edx/frontend-platform/analytics', () => ({
-  sendTrackEvent: jest.fn(),
-}));
-
-describe('select-preferences', () => {
-  beforeAll(() => {
-    mergeConfig({
-      ALGOLIA_JOBS_INDEX_NAME: 'test-job-index-name',
-    });
-  });
-  beforeEach(() => cleanup());
-
-  describe('render behavior', () => {
-    it('should render the second prompt if a goal is selected', () => {
-      render(
-        SkillsBuilderWrapperWithContext(
-          {
-            ...contextValue,
-            state: {
-              ...contextValue.state,
-              currentGoal: 'I want to start my career',
-            },
-          },
-        ),
-      );
-      const expectedGoal = {
-        payload: 'I want to advance my career',
-        type: 'SET_GOAL',
-      };
-      const expectedStudent = {
-        payload: 'student',
-        type: 'SET_CURRENT_JOB_TITLE',
-      };
-
-      const expectedJobTitle = {
-        payload: 'Prospector',
-        type: 'SET_CURRENT_JOB_TITLE',
-      };
-
-      const goalSelect = screen.getByTestId('goal-select-dropdown');
-      fireEvent.change(goalSelect, { target: { value: 'I want to advance my career' } });
-
-      const checkbox = screen.getByRole('checkbox', { name: 'I\'m a student' });
-      fireEvent.click(checkbox);
-
-      const jobTitleInput = screen.getByTestId('job-title-select');
-      fireEvent.change(jobTitleInput, { target: { value: 'Prospector' } });
-      fireEvent.click(screen.getByRole('button', { name: 'Prospector' }));
-
-      expect(screen.getByText('Next, search and select your current job title')).toBeTruthy();
-      expect(dispatchMock).toHaveBeenCalledWith(expectedGoal);
-      expect(dispatchMock).toHaveBeenCalledWith(expectedStudent);
-      expect(dispatchMock).toHaveBeenCalledWith(expectedJobTitle);
-      expect(sendTrackEvent).toHaveBeenCalledWith(
-        'edx.skills_builder.goal.select',
-        {
-          app_name: 'skills_builder',
-          category: 'skills_builder',
-          learner_data: {
-            current_goal: 'I want to advance my career',
-          },
-        },
-      );
-      expect(sendTrackEvent).toHaveBeenCalledWith(
-        'edx.skills_builder.current_job.student',
-        {
-          app_name: 'skills_builder',
-          category: 'skills_builder',
-        },
-      );
-      expect(sendTrackEvent).toHaveBeenCalledWith(
-        'edx.skills_builder.current_job.select',
-        {
-          app_name: 'skills_builder',
-          category: 'skills_builder',
-          learner_data: {
-            current_job_title: 'Prospector',
-          },
-        },
-      );
-    });
-
-    it('should render the third prompt if a current job title is selected', () => {
-      render(
-        SkillsBuilderWrapperWithContext(
-          {
-            ...contextValue,
-            state: {
-              ...contextValue.state,
-              currentGoal: 'I want to start my career',
-              currentJobTitle: 'Goblin Guide',
-            },
-          },
-        ),
-      );
-      expect(screen.getByText('What careers are you interested in?')).toBeTruthy();
-    });
-
-    it('should render a <CareerInterestCard> for each career interest', () => {
-      render(
-        SkillsBuilderWrapperWithContext(
-          {
-            ...contextValue,
-            state: {
-              ...contextValue.state,
-              currentGoal: 'I want to start my career',
-              currentJobTitle: 'Goblin Lackey',
-              careerInterests: ['Prospector'],
-            },
-          },
-        ),
-      );
-      expect(screen.getByText('Prospector')).toBeTruthy();
-
-      const careerInterestInput = screen.getByTestId('career-interest-select');
-      fireEvent.change(careerInterestInput, { target: { value: 'Mirror Breaker' } });
-      fireEvent.click(screen.getByRole('button', { name: 'Mirror Breaker' }));
-
-      expect(sendTrackEvent).toHaveBeenCalledWith(
-        'edx.skills_builder.career_interest.added',
-        {
-          app_name: 'skills_builder',
-          category: 'skills_builder',
-          learner_data: {
-            career_interest: 'Mirror Breaker',
-          },
-        },
-      );
-      expect(dispatchMock).toHaveBeenCalledWith(
-        {
-          payload: 'Mirror Breaker',
-          type: 'ADD_CAREER_INTEREST',
-        },
-      );
-    });
-  });
-
-  describe('controlled behavior', () => {
-    it('should remove a <CareerInterestCard> when the corresponding close button is selected', () => {
-      render(
-        SkillsBuilderWrapperWithContext(
-          {
-            ...contextValue,
-            state: {
-              ...contextValue.state,
-              currentGoal: 'I want to start my career',
-              currentJobTitle: 'Goblin Lackey',
-              careerInterests: ['Prospector', 'Mirror Breaker', 'Bombardment'],
-            },
-          },
-        ),
-      );
-
-      const expected = {
-        payload: 'Prospector',
-        type: 'REMOVE_CAREER_INTEREST',
-      };
-
-      fireEvent.click(screen.getByLabelText('Remove career interest: Prospector'));
-      expect(dispatchMock).toHaveBeenCalledWith(expected);
-      expect(sendTrackEvent).toHaveBeenCalledWith(
-        'edx.skills_builder.career_interest.removed',
-        {
-          app_name: 'skills_builder',
-          category: 'skills_builder',
-          learner_data: {
-            career_interest: 'Prospector',
-          },
-        },
-      );
-    });
-  });
-});

src/skills-builder/skills-builder-modal/skillsBuilderModal.scss

@@ -1,16 +0,0 @@
-.skills-builder-modal {
-  button[aria-label="Close"][type="button"]{
-    color: $white;
-  }
-}
-
-
-$breakpoint-medium: 992px;
-@media (max-width: $breakpoint-medium) {
-  .med-min-height {
-    min-height: map-get($spacers, 6);
-  }
-  .pgn__modal-close-container {
-    top: 1rem;
-  }
-}

src/skills-builder/skills-builder-modal/view-results/CarouselStack.jsx

@@ -1,80 +0,0 @@
-import React from 'react';
-import { CardCarousel } from '@edx/paragon';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { sendTrackEvent } from '@edx/frontend-platform/analytics';
-import RecommendationCard from './RecommendationCard';
-import messages from './messages';
-
-const CarouselStack = ({ selectedRecommendations }) => {
-  const { formatMessage } = useIntl();
-  const { id: jobId, name: jobName, recommendations } = selectedRecommendations;
-  const productTypeNames = Object.keys(recommendations);
-  const courseKeys = recommendations.course?.map(rec => ({
-    title: rec.title,
-    courserun_key: rec.active_run_key,
-  }));
-
-  const normalizeProductTypeName = (productType) => {
-    // If the productType is more than one word (i.e. boot_camp)
-    if (productType.includes('_')) {
-      // split to remove underscore and return an array of strings (i.e. ['boot', 'camp'])
-      const splitStrings = productType.split('_');
-
-      // map through the array and normalize each string (i.e. ['Boot', 'Camp'])
-      const normalizeStrings = splitStrings.map(word => word[0].toUpperCase() + word.slice(1).toLowerCase());
-
-      // return the array as a string joined by white spaces (i.e. Boot Camp)
-      return normalizeStrings.join(' ');
-    }
-    // Otherwise, return a normalized string
-    const normalizeString = productType[0].toUpperCase() + productType.slice(1).toLowerCase();
-    return normalizeString;
-  };
-
-  const renderCarouselTitle = (productType) => (
-    <h3>
-      {formatMessage(messages.productRecommendationsHeaderText, {
-        productType: normalizeProductTypeName(productType),
-        jobName,
-      })}
-    </h3>
-  );
-
-  const handleCourseCardClick = (courseKey, productType) => {
-    sendTrackEvent(
-      'edx.skills_builder.recommendation.click',
-      {
-        app_name: 'skills_builder',
-        category: 'skills_builder',
-        page: 'skills_builder',
-        courserun_key: courseKey,
-        product_type: productType,
-        selected_recommendations: {
-          job_id: jobId,
-          job_name: jobName,
-          courserun_keys: courseKeys,
-        },
-      },
-    );
-  };
-
-  return (
-    productTypeNames.map(productType => (
-      <CardCarousel
-        key={productType}
-        ariaLabel="card carousel"
-        title={renderCarouselTitle(productType)}
-      >
-        {recommendations[productType].map(rec => (
-          <RecommendationCard
-            key={rec.uuid}
-            handleCourseCardClick={handleCourseCardClick}
-            rec={rec}
-            productType={productType}
-          />
-        ))}
-      </CardCarousel>
-    )));
-};
-
-export default CarouselStack;

src/skills-builder/skills-builder-modal/view-results/RecommendationCard.jsx

@@ -1,60 +0,0 @@
-import React from 'react';
-import { Card, Chip, Hyperlink } from '@edx/paragon';
-import PropTypes from 'prop-types';
-import cardImageCapFallbackSrc from '../../images/card-imagecap-fallback.png';
-
-const RecommendationCard = ({ rec, productType, handleCourseCardClick }) => {
-  const {
-    card_image_url: cardImageUrl,
-    marketing_url: marketingUrl,
-    active_run_key: courseKey,
-    owners,
-    partner,
-    title,
-  } = rec;
-
-  const { logoImageUrl } = owners[0];
-
-  return (
-    <Hyperlink destination={marketingUrl} target="_blank" showLaunchIcon={false}>
-      <Card
-        className="carousel-card"
-        onClick={() => handleCourseCardClick(courseKey, productType)}
-      >
-        <Card.ImageCap
-          src={cardImageUrl}
-          logoSrc={logoImageUrl}
-          fallbackSrc={cardImageCapFallbackSrc}
-          fallbackLogoSrc={cardImageCapFallbackSrc}
-        />
-        <Card.Header title={title} />
-        <Card.Section>
-          {partner.map((orgName, index) => (
-            // eslint-disable-next-line react/no-array-index-key
-            <Chip key={index}>
-              {orgName}
-            </Chip>
-          ))}
-        </Card.Section>
-      </Card>
-    </Hyperlink>
-  );
-};
-
-RecommendationCard.propTypes = {
-  rec: PropTypes.shape({
-    title: PropTypes.string,
-    card_image_url: PropTypes.string,
-    marketing_url: PropTypes.string,
-    partner: PropTypes.arrayOf(PropTypes.string),
-    owners: PropTypes.arrayOf(PropTypes.shape({
-      key: PropTypes.string,
-      logoImageUrl: PropTypes.string,
-    })),
-    active_run_key: PropTypes.string.isRequired,
-  }).isRequired,
-  productType: PropTypes.string.isRequired,
-  handleCourseCardClick: PropTypes.func.isRequired,
-};
-
-export default RecommendationCard;

src/skills-builder/skills-builder-modal/view-results/RelatedSkillsSelectableBoxSet.jsx

@@ -1,57 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {
-  SelectableBox, Chip, Stack, useMediaQuery, breakpoints,
-} from '@edx/paragon';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import messages from './messages';
-
-const RelatedSkillsSelectableBoxSet = ({ jobSkillsList, selectedJobTitle, onChange }) => {
-  const { formatMessage } = useIntl();
-  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });
-
-  const renderTopFiveSkills = (skills) => {
-    const topFiveSkills = skills.sort((a, b) => b.significance - a.significance).slice(0, 5);
-    return (
-      topFiveSkills.map(skill => (
-        <Chip key={skill.external_id}>
-          {skill.name}
-        </Chip>
-      ))
-    );
-  };
-
-  return (
-    <SelectableBox.Set
-      name="selected job title"
-      type="radio"
-      value={selectedJobTitle}
-      onChange={onChange}
-      columns={isExtraSmall ? 1 : 3}
-    >
-      {jobSkillsList.map(job => (
-        <SelectableBox
-          key={job.id}
-          type="radio"
-          value={job.name}
-          aria-label={job.name}
-          inputHidden={false}
-        >
-          <p>{job.name}</p>
-          <Stack gap={2} className="align-items-start">
-            <p className="heading-label x-small">{formatMessage(messages.relatedSkillsHeading)}</p>
-            {renderTopFiveSkills(job.skills)}
-          </Stack>
-        </SelectableBox>
-      ))}
-    </SelectableBox.Set>
-  );
-};
-
-RelatedSkillsSelectableBoxSet.propTypes = {
-  jobSkillsList: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
-  selectedJobTitle: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired,
-};
-
-export default RelatedSkillsSelectableBoxSet;