fix: replace injected Plugins directory with dependency

---------

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

.env

@@ -10,8 +10,6 @@ LOGIN_URL=''
 LOGOUT_URL=''
 MARKETING_SITE_BASE_URL=''
 ORDER_HISTORY_URL=''
-ACCOUNT_SETTINGS_URL=''
-ACCOUNT_PROFILE_URL=''
 REFRESH_ACCESS_TOKEN_ENDPOINT=''
 SEGMENT_KEY=''
 SITE_NAME=''
@@ -29,6 +27,3 @@ APP_ID=''
 MFE_CONFIG_API_URL=''
 SEARCH_CATALOG_URL=''
 ENABLE_SKILLS_BUILDER_PROFILE=''
-# Fallback in local style files
-PARAGON_THEME_URLS={}
-DISABLE_VISIBILITY_EDITING=''

.env.development

@@ -3,9 +3,7 @@ PORT=1995
 ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'
 BASE_URL='localhost:1995'
 CREDENTIALS_BASE_URL='http://localhost:18150'
-ACCOUNT_SETTINGS_URL=http://localhost:1997
 CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
-ACCOUNT_PROFILE_URL=http://localhost:1995
 ECOMMERCE_BASE_URL='http://localhost:18130'
 LANGUAGE_PREFERENCE_COOKIE_NAME='openedx-language-preference'
 LMS_BASE_URL='http://localhost:18000'
@@ -30,6 +28,3 @@ APP_ID=''
 MFE_CONFIG_API_URL=''
 SEARCH_CATALOG_URL='http://localhost:18000/courses'
 ENABLE_SKILLS_BUILDER_PROFILE=''
-# Fallback in local style files
-PARAGON_THEME_URLS={}
-DISABLE_VISIBILITY_EDITING=''

.env.test

@@ -5,8 +5,6 @@ CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
 ECOMMERCE_BASE_URL='http://localhost:18130'
 LANGUAGE_PREFERENCE_COOKIE_NAME='openedx-language-preference'
 LMS_BASE_URL='http://localhost:18000'
-ACCOUNT_SETTINGS_URL='http://localhost:1997'
-ACCOUNT_PROFILE_URL='http://localhost:1995'
 LOGIN_URL='http://localhost:18000/login'
 LOGOUT_URL='http://localhost:18000/logout'
 MARKETING_SITE_BASE_URL='http://localhost:18000'
@@ -25,5 +23,3 @@ LEARNER_RECORD_MFE_BASE_URL='http://localhost:1990'
 COLLECT_YEAR_OF_BIRTH=true
 APP_ID=''
 MFE_CONFIG_API_URL=''
-PARAGON_THEME_URLS={}
-DISABLE_VISIBILITY_EDITING=''

.eslintrc.js

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

.github/dependabot.yml

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

.github/pull_request_template.md

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

.github/workflows/ci.yml

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

.github/workflows/lockfileversion-check.yml

@@ -10,4 +10,4 @@ on:
 
 jobs:
   version-check:
-    uses: openedx/.github/.github/workflows/lockfileversion-check-v3.yml@master
+    uses: openedx/.github/.github/workflows/lockfile-check.yml@master

.gitignore

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

.nvmrc

@@ -1 +1 @@
-24
+18

.tx/config

@@ -0,0 +1,9 @@
+[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,3 +1,7 @@
+export TRANSIFEX_RESOURCE = frontend-app-profile
+transifex_resource = frontend-app-profile
+transifex_langs = "ar,de,de_DE,es_419,fa_IR,fr,fr_CA,hi,it,it_IT,pt,pt_PT,ru,uk,zh_CN"
+
 intl_imports = ./node_modules/.bin/intl-imports.js
 transifex_utils = ./node_modules/.bin/transifex-utils.js
 i18n = ./src/i18n
@@ -35,18 +39,35 @@ 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 $(ATLAS_OPTIONS) \
-               translations/frontend-platform/src/i18n/messages:frontend-platform \
+      && atlas pull --filter=$(transifex_langs) \
                translations/paragon/src/i18n/messages:paragon \
                translations/frontend-component-header/src/i18n/messages:frontend-component-header \
                translations/frontend-component-footer/src/i18n/messages:frontend-component-footer \
                translations/frontend-app-profile/src/i18n/messages:frontend-app-profile
 
-	$(intl_imports) frontend-platform paragon frontend-component-header frontend-component-footer frontend-app-profile
+	$(intl_imports) paragon frontend-component-header frontend-component-footer frontend-app-profile
+endif
 
 # This target is used by Travis.
 validate-no-uncommitted-package-lock-changes:

README.rst

@@ -71,12 +71,6 @@ Profile MFE for local development via the `devstack`_.
 
 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
 =============
 
@@ -98,7 +92,7 @@ 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.
+with as many details about the issue you are facing as you can provide.  Please tag **@openedx/2u-aperture** on any PRs or issues.
 
 https://github.com/openedx/frontend-app-profile/issues
 

catalog-info.yaml

@@ -3,8 +3,8 @@
 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.'
+  name: 'Profile'
+  description: 'This is a micro-frontend application responsible for the display and updating of user profiles.'
   links:
     - url: 'https://github.com/openedx/frontend-app-profile/blob/master/README.rst'
       title: 'Documentation'
@@ -17,9 +17,8 @@ metadata:
     openedx.org/arch-interest-groups: ""
     # This can be multiple comma-separated projects.
     openedx.org/add-to-projects: "openedx:23"
-    openedx.org/release: "master"
 spec:
-  owner: group:2u-infinity
   type: 'service'
   lifecycle: 'production'
-# (Optional) An array of different components or resources.
+  owner: 2U-aperture
+# (Optional) An array of different components or resources.

jest.config.js

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

openedx.yaml

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

package.json

@@ -14,7 +14,6 @@
     "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
-    "dev": "PUBLIC_PATH=/profile/ MFE_CONFIG_API_URL='http://localhost:8000/api/mfe_config/v1' fedx-scripts webpack-dev-server --progress --host apps.local.openedx.io",
     "test": "TZ=UTC fedx-scripts jest --coverage --passWithNoTests",
     "stubs": "pact-stub-service ./src/pacts/frontend-app-profile-edx-platform.json --port 18000"
   },
@@ -30,49 +29,54 @@
   ],
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-component-footer": "^14.6.0",
-    "@edx/frontend-component-header": "^6.2.0",
-    "@edx/frontend-platform": "^8.3.1",
-    "@edx/openedx-atlas": "^0.7.0",
-    "@fortawesome/fontawesome-svg-core": "6.7.2",
-    "@fortawesome/free-brands-svg-icons": "6.7.2",
-    "@fortawesome/free-regular-svg-icons": "6.7.2",
-    "@fortawesome/free-solid-svg-icons": "6.7.2",
-    "@fortawesome/react-fontawesome": "0.2.6",
-    "@openedx/frontend-plugin-framework": "^1.7.0",
-    "@openedx/paragon": "^23.4.5",
+    "@edx/frontend-component-footer": "12.5.1",
+    "@edx/frontend-component-header": "4.8.0",
+    "@edx/frontend-platform": "5.6.1",
+    "@edx/frontend-plugin-framework": "openedx/frontend-plugin-framework#jwesson/install-plugins",
+    "@edx/paragon": "^20.44.0",
+    "@fortawesome/fontawesome-svg-core": "1.2.36",
+    "@fortawesome/free-brands-svg-icons": "5.15.4",
+    "@fortawesome/free-regular-svg-icons": "5.15.4",
+    "@fortawesome/free-solid-svg-icons": "5.15.4",
+    "@fortawesome/react-fontawesome": "0.2.0",
     "@pact-foundation/pact": "^11.0.2",
-    "@redux-devtools/extension": "3.3.0",
-    "classnames": "2.5.1",
-    "core-js": "3.46.0",
+    "classnames": "2.3.2",
+    "core-js": "3.33.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": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-error-boundary": "^4.0.11",
     "react-helmet": "6.1.0",
     "react-redux": "7.2.9",
-    "react-router": "6.30.1",
-    "react-router-dom": "6.30.1",
+    "react-router": "6.16.0",
+    "react-router-dom": "6.16.0",
     "redux": "4.2.1",
+    "redux-devtools-extension": "2.13.9",
     "redux-logger": "3.0.6",
-    "redux-saga": "1.3.0",
+    "redux-saga": "1.2.3",
     "redux-thunk": "2.4.2",
-    "regenerator-runtime": "0.14.1",
-    "reselect": "5.1.1",
+    "regenerator-runtime": "0.14.0",
+    "reselect": "4.1.8",
     "universal-cookie": "4.0.4"
   },
   "devDependencies": {
-    "@commitlint/cli": "19.8.1",
-    "@commitlint/config-angular": "19.8.1",
+    "@commitlint/cli": "17.8.1",
+    "@commitlint/config-angular": "17.8.1",
     "@edx/browserslist-config": "^1.1.1",
-    "@openedx/frontend-build": "^14.6.2",
-    "@testing-library/jest-dom": "6.9.1",
-    "@testing-library/react": "14.3.1",
-    "glob": "11.0.3",
-    "redux-mock-store": "1.5.5"
+    "@edx/frontend-build": "13.0.4",
+    "@edx/reactifex": "2.2.0",
+    "@testing-library/react": "12.1.5",
+    "@wojtekmaj/enzyme-adapter-react-17": "0.8.0",
+    "codecov": "3.8.3",
+    "enzyme": "3.11.0",
+    "glob": "10.3.10",
+    "react-test-renderer": "17.0.2",
+    "reactifex": "1.1.1",
+    "redux-mock-store": "1.5.4"
   }
 }

plugins/Plugin.jsx

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

plugins/PluginContainer.jsx

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

plugins/PluginContainerIframe.jsx

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

plugins/PluginErrorBoundary.jsx

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

plugins/PluginSlot.jsx

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

plugins/data/constants.js

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

plugins/data/hooks.js

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

plugins/data/shapes.js

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

plugins/index.js

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

src/data/configureStore.js

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

src/data/reducers.js

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

src/data/sagas.js

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

src/head/Head.jsx

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

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 { render } from '@testing-library/react';
+import { mount } from 'enzyme';
 import { getConfig } from '@edx/frontend-platform';
 import Head from './Head';
 
 describe('Head', () => {
   const props = {};
   it('should match render title tag and favicon with the site configuration values', () => {
-    render(<IntlProvider locale="en"><Head {...props} /></IntlProvider>);
+    mount(<IntlProvider locale="en"><Head {...props} /></IntlProvider>);
     const helmet = Helmet.peek();
     expect(helmet.title).toEqual(`Profile | ${getConfig().SITE_NAME}`);
     expect(helmet.linkTags[0].rel).toEqual('shortcut icon');

src/i18n/index.js

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

src/i18n/messages/ar.json

@@ -0,0 +1,57 @@
+{
+  "profile.page.title": "الملف الشخصي | {siteName}",
+  "profile.age.details": "لمشاركة ملفك الشخصي مع بقية متعلمي {siteName}، يجب أن تؤكد أنك عمرك يفوق 13 عامًا.",
+  "profile.age.set.date": "ضيط تاريخ ميلادك",
+  "profile.datejoined.member.since": "عضو منذ {year}",
+  "profile.bio.empty": "إضافة نبذة قصيرة",
+  "profile.bio.about.me": "نبذة عنّي",
+  "profile.certificate.organization.label": "من طرف",
+  "profile.certificate.completion.date.label": "صدرت بتاريخ {date}",
+  "profile.no.certificates": "ليست لديك أي شهادات يعد.",
+  "profile.certificates.my.certificates": "شهاداتي",
+  "profile.certificates.view.certificate": "معاينة الشهادة",
+  "profile.certificates.types.verified": "شهادة موثقة",
+  "profile.certificates.types.professional": "شهادة مهنية",
+  "profile.certificates.types.unknown": "شهادة",
+  "profile.country.label": "الموقع",
+  "profile.country.empty": "إضافة الموقع",
+  "profile.education.empty": "إضافة المستوى التعليمي",
+  "profile.education.education": "المستوى التعليمي",
+  "profile.education.levels.p": "دكتوراه",
+  "profile.education.levels.m": "ماجستير / ماستر أو شهادة مهنيّة",
+  "profile.education.levels.b": "بكالوريوس / ليسانس",
+  "profile.education.levels.a": "درجة الزمالة / دبلوم الدراسات الجامعية",
+  "profile.education.levels.hs": "الثانوية العامة / البكالوريا",
+  "profile.education.levels.jhs": "المدرسة الإعدادية / المتوسطة",
+  "profile.education.levels.el": "المدرسة الابتدائية / الأساسية",
+  "profile.education.levels.none": "دون تعليم رسمي",
+  "profile.education.levels.o": "نوع آخر من التعليم",
+  "profile.editbutton.edit": "تعديل",
+  "profile.formcontrols.who.can.see": "من يستطيع رؤية هذا:",
+  "profile.formcontrols.button.cancel": "إلغاء",
+  "profile.formcontrols.button.save": "حفظ",
+  "profile.formcontrols.button.saving": "الحفظ جارٍ",
+  "profile.formcontrols.button.saved": "تم الحفظ",
+  "profile.visibility.who.just.me": "أنا فقط",
+  "profile.visibility.who.everyone": "جميع من على {siteName}",
+  "profile.learningGoal.learningGoal": "هدف التعلم",
+  "profile.learningGoal.options.start_career": "أريد أن أبدأ مسيرتي المهنية",
+  "profile.learningGoal.options.advance_career": "أريد أن ارتقي في مسيرتي المهنية",
+  "profile.learningGoal.options.learn_something_new": "أريد أن أتعلم شيئًا جديدًا",
+  "profile.learningGoal.options.something_else": "شيء آخر",
+  "profile.name.full.name": "الاسم الكامل",
+  "profile.name.details": "هذا هو الاسم الذي يظهر في حسابك وفي شهاداتك",
+  "profile.name.empty": "إضافة الاسم",
+  "profile.preferredlanguage.empty": "إضافة اللغة",
+  "profile.preferredlanguage.label": "لغة التحدّث الأساسية",
+  "profile.profileavatar.upload-button": "تحميل صورة",
+  "profile.profileavatar.remove.button": "حذف",
+  "profile.image.alt.attribute": "صورة الملف الشخصي",
+  "profile.profileavatar.change-button": "تغيير",
+  "profile.sociallinks.add": "إضافة {network}",
+  "profile.sociallinks.social.links": "روابط التواصل الاجتماعي",
+  "profile.notfound.message": "الصفحة التي تبحث عنها غير متوفرة أو هناك خطأ في العنوان. رجاءً تحقق من العنوان و حاول مجدّدًا.",
+  "profile.viewMyRecords": "عرض سجلّاتي",
+  "profile.loading": "يتم تحميل الملف الشخصي...",
+  "profile.username.description": "معلومات ملفك الشخصي تظهر لك فقط. وحده اسم المستخدم الخاص بك يظهر للآخرين على {siteName}."
+}

src/i18n/messages/de.json

@@ -0,0 +1,57 @@
+{
+  "profile.page.title": "Profile | {siteName}",
+  "profile.age.details": "To share your profile with other {siteName} learners, you must confirm that you are over the age of 13.",
+  "profile.age.set.date": "Set your date of birth",
+  "profile.datejoined.member.since": "Member since {year}",
+  "profile.bio.empty": "Add a short bio",
+  "profile.bio.about.me": "About Me",
+  "profile.certificate.organization.label": "From",
+  "profile.certificate.completion.date.label": "Completed on {date}",
+  "profile.no.certificates": "You don't have any certificates yet.",
+  "profile.certificates.my.certificates": "My Certificates",
+  "profile.certificates.view.certificate": "View Certificate",
+  "profile.certificates.types.verified": "Verified Certificate",
+  "profile.certificates.types.professional": "Professional Certificate",
+  "profile.certificates.types.unknown": "Certificate",
+  "profile.country.label": "Location",
+  "profile.country.empty": "Add location",
+  "profile.education.empty": "Add education",
+  "profile.education.education": "Education",
+  "profile.education.levels.p": "Doctorate",
+  "profile.education.levels.m": "Master's or professional degree",
+  "profile.education.levels.b": "Bachelor's Degree",
+  "profile.education.levels.a": "Associate's degree",
+  "profile.education.levels.hs": "Secondary/high school",
+  "profile.education.levels.jhs": "Junior secondary/junior high/middle school",
+  "profile.education.levels.el": "Elementary/primary school",
+  "profile.education.levels.none": "No formal education",
+  "profile.education.levels.o": "Other education",
+  "profile.editbutton.edit": "Edit",
+  "profile.formcontrols.who.can.see": "Who can see this:",
+  "profile.formcontrols.button.cancel": "Cancel",
+  "profile.formcontrols.button.save": "Save",
+  "profile.formcontrols.button.saving": "Saving",
+  "profile.formcontrols.button.saved": "Saved",
+  "profile.visibility.who.just.me": "Just me",
+  "profile.visibility.who.everyone": "Everyone on {siteName}",
+  "profile.learningGoal.learningGoal": "Learning Goal",
+  "profile.learningGoal.options.start_career": "I want to start my career",
+  "profile.learningGoal.options.advance_career": "I want to advance my career",
+  "profile.learningGoal.options.learn_something_new": "I want to learn something new",
+  "profile.learningGoal.options.something_else": "Something else",
+  "profile.name.full.name": "Full Name",
+  "profile.name.details": "This is the name that appears in your account and on your certificates.",
+  "profile.name.empty": "Add name",
+  "profile.preferredlanguage.empty": "Add language",
+  "profile.preferredlanguage.label": "Primary Language Spoken",
+  "profile.profileavatar.upload-button": "Upload Photo",
+  "profile.profileavatar.remove.button": "Remove",
+  "profile.image.alt.attribute": "profile avatar",
+  "profile.profileavatar.change-button": "Change",
+  "profile.sociallinks.add": "Add {network}",
+  "profile.sociallinks.social.links": "Social Links",
+  "profile.notfound.message": "The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again.",
+  "profile.viewMyRecords": "View My Records",
+  "profile.loading": "Profile loading...",
+  "profile.username.description": "Your profile information is only visible to you. Only your username is visible to others on {siteName}."
+}

src/i18n/messages/de_DE.json

@@ -0,0 +1,57 @@
+{
+  "profile.page.title": "Profil | {siteName}",
+  "profile.age.details": "Um Ihr Profil mit anderen {siteName}-Lernern zu teilen, müssen Sie bestätigen, dass Sie über 13 Jahre alt sind.",
+  "profile.age.set.date": "Legen Sie Ihr Geburtsdatum fest",
+  "profile.datejoined.member.since": "Mitglied seit {year}",
+  "profile.bio.empty": "Fügen Sie Ihre Kurzbiografie hinzu",
+  "profile.bio.about.me": "Über mich",
+  "profile.certificate.organization.label": "Von",
+  "profile.certificate.completion.date.label": "Abgeschlossen am {date}",
+  "profile.no.certificates": "Sie haben bisher keine Zertifikate erhalten.",
+  "profile.certificates.my.certificates": "Meine Zertifikate",
+  "profile.certificates.view.certificate": "Zertifikat anschauen",
+  "profile.certificates.types.verified": "Beglaubigtes Zertifikat ",
+  "profile.certificates.types.professional": "Professional Certificate",
+  "profile.certificates.types.unknown": "Zertifikat",
+  "profile.country.label": "Ort",
+  "profile.country.empty": "Standort hinzufügen",
+  "profile.education.empty": "Ausbildung hinzufügen",
+  "profile.education.education": "Bildung",
+  "profile.education.levels.p": "Doktortitel",
+  "profile.education.levels.m": "Master oder gleichwertiger akademischer Bildungsgrad",
+  "profile.education.levels.b": "Bachelor",
+  "profile.education.levels.a": "Allgemeine Hochschulreife oder gleichwertiger Abschluss",
+  "profile.education.levels.hs": "Mittlere Reife",
+  "profile.education.levels.jhs": "Hauptschule",
+  "profile.education.levels.el": "Grundschule",
+  "profile.education.levels.none": "Keinen Bildungsabschluss",
+  "profile.education.levels.o": "Sonstige Bildung",
+  "profile.editbutton.edit": "Bearbeiten",
+  "profile.formcontrols.who.can.see": "Wer kann das sehen:",
+  "profile.formcontrols.button.cancel": "Abbrechen",
+  "profile.formcontrols.button.save": "Speichern",
+  "profile.formcontrols.button.saving": "Speichert",
+  "profile.formcontrols.button.saved": "Gespeichert",
+  "profile.visibility.who.just.me": "Nur ich",
+  "profile.visibility.who.everyone": "Alle auf {siteName}",
+  "profile.learningGoal.learningGoal": "Lernziel",
+  "profile.learningGoal.options.start_career": "Ich möchte meine Karriere starten",
+  "profile.learningGoal.options.advance_career": "Ich möchte mich beruflich weiterentwickeln",
+  "profile.learningGoal.options.learn_something_new": "Ich möchte etwas Neues lernen",
+  "profile.learningGoal.options.something_else": "Etwas anderes",
+  "profile.name.full.name": "Vollständiger Name",
+  "profile.name.details": "Dies ist der Name, der in Ihrem Konto und auf Ihren Zertifikaten erscheint.",
+  "profile.name.empty": "Name hinzufügen",
+  "profile.preferredlanguage.empty": "Sprache hinzufügen",
+  "profile.preferredlanguage.label": "Gesprochene Primärsprache ",
+  "profile.profileavatar.upload-button": "Foto hochladen",
+  "profile.profileavatar.remove.button": "Entfernen",
+  "profile.image.alt.attribute": "Profil Avatar",
+  "profile.profileavatar.change-button": "Ändern",
+  "profile.sociallinks.add": "{network} hinzufügen",
+  "profile.sociallinks.social.links": "Soziale Netzwerke",
+  "profile.notfound.message": "Die gesuchte Seite ist nicht verfügbar oder es liegt ein Fehler in der URL vor. Bitte überprüfen Sie die URL und versuchen Sie es erneut.",
+  "profile.viewMyRecords": "Meine Aufzeichnungen anzeigen",
+  "profile.loading": "Profil lädt...",
+  "profile.username.description": "Ihre Profilinformationen sind nur für Sie sichtbar. Nur Ihr Benutzername ist für andere auf {siteName} sichtbar."
+}

src/i18n/messages/es_419.json

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

src/i18n/messages/fa_IR.json

@@ -0,0 +1,57 @@
+{
+  "profile.page.title": "پرونده کاربری {siteName}",
+  "profile.age.details": "برای اشتراک‌گذاری پرونده کاربری خود با سایر یادگیرندگان {siteName}، باید تأیید کنید که  بیش از 13 سال سن دارید.",
+  "profile.age.set.date": "تنظیم تاریخ تولد",
+  "profile.datejoined.member.since": "عضو شده از {year}",
+  "profile.bio.empty": "بیوگرافی کوتاهی اضافه کنید",
+  "profile.bio.about.me": "درباره من",
+  "profile.certificate.organization.label": "از",
+  "profile.certificate.completion.date.label": "تکمیل شده در {date}",
+  "profile.no.certificates": "شما هنوز هیچ گواهی ندارید.",
+  "profile.certificates.my.certificates": "گواهی‌های من",
+  "profile.certificates.view.certificate": "نمایش گواهی",
+  "profile.certificates.types.verified": "گواهی تأییدشده",
+  "profile.certificates.types.professional": "گواهی حرفه‌ای",
+  "profile.certificates.types.unknown": "گواهی",
+  "profile.country.label": "مکان",
+  "profile.country.empty": "افزودن مکان",
+  "profile.education.empty": "افزودن تحصیلات",
+  "profile.education.education": "تحصیلات",
+  "profile.education.levels.p": "درجه دکتری",
+  "profile.education.levels.m": "کارشناسی ارشد یا مدرک حرفه‌ای",
+  "profile.education.levels.b": "مدرک کارشناسی",
+  "profile.education.levels.a": "مدرک کاردانی",
+  "profile.education.levels.hs": "متوسطه/دبیرستان",
+  "profile.education.levels.jhs": "مدرسه متوسطه دوره اول/ راهنمایی",
+  "profile.education.levels.el": "مدرسه ابتدایی",
+  "profile.education.levels.none": "بدون تحصیلات رسمی",
+  "profile.education.levels.o": "تحصیلات متفرقه",
+  "profile.editbutton.edit": " ویرایش",
+  "profile.formcontrols.who.can.see": "کسانی که می‌توانند این را ببینند:",
+  "profile.formcontrols.button.cancel": "لغو‌",
+  "profile.formcontrols.button.save": "ذخیره",
+  "profile.formcontrols.button.saving": "در حال ذخیره",
+  "profile.formcontrols.button.saved": "ذخیره شد",
+  "profile.visibility.who.just.me": "فقط من",
+  "profile.visibility.who.everyone": "هرکسی در {siteName}",
+  "profile.learningGoal.learningGoal": "هدف یادگیری",
+  "profile.learningGoal.options.start_career": "من می خواهم کارم را شروع کنم",
+  "profile.learningGoal.options.advance_career": "من می خواهم حرفه ام را ارتقا دهم",
+  "profile.learningGoal.options.learn_something_new": "می‌خواهم چیز جدیدی یاد بگیرم",
+  "profile.learningGoal.options.something_else": "یک چیز دیگر",
+  "profile.name.full.name": "نام و نام خانوادگی",
+  "profile.name.details": "این همان نامی است که در حساب کاربری و گواهی‌های شما درج می‌شود.",
+  "profile.name.empty": "افزودن نام",
+  "profile.preferredlanguage.empty": "افزودن زبان",
+  "profile.preferredlanguage.label": "زبان اصلی صحبت شده",
+  "profile.profileavatar.upload-button": "بارگذاری عکس",
+  "profile.profileavatar.remove.button": "حذف",
+  "profile.image.alt.attribute": "چهرک پرونده کاربری",
+  "profile.profileavatar.change-button": "تغییر",
+  "profile.sociallinks.add": "افزودن  {network}",
+  "profile.sociallinks.social.links": "پیوندهای رسانه اجتماعی",
+  "profile.notfound.message": "صفحه مورد نظر شما در دسترس نیست یا خطایی در نشانی آن وجود دارد. لطفاً نشانی اینترنتی را بررسی کرده و دوباره امتحان کنید.",
+  "profile.viewMyRecords": "مشاهده سوابق من",
+  "profile.loading": "در حال بارگذاری پرونده کاربری...",
+  "profile.username.description": "اطلاعات پرونده کاربری فقط برای شما قابل مشاهده است. سایرین فقط نام کاربری شما را در  {siteName} می‌توانند ببینند."
+}

src/i18n/messages/fr.json

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

src/i18n/messages/fr_CA.json

@@ -0,0 +1,57 @@
+{
+  "profile.page.title": "Profil | {siteName}",
+  "profile.age.details": "Pour partager votre profil avec d'autres apprenants {siteName}, vous devez confirmer que vous avez plus de 13 ans.",
+  "profile.age.set.date": "Entrez votre date de naissance",
+  "profile.datejoined.member.since": "Membre depuis {year}",
+  "profile.bio.empty": "Ajouter une courte biographie",
+  "profile.bio.about.me": "À propos de moi",
+  "profile.certificate.organization.label": "De",
+  "profile.certificate.completion.date.label": "Terminé le {date}",
+  "profile.no.certificates": "Vous n'avez pas encore d'attestation.",
+  "profile.certificates.my.certificates": "Mes Attestations",
+  "profile.certificates.view.certificate": "Voir votre attestation",
+  "profile.certificates.types.verified": "Attestation vérifiée",
+  "profile.certificates.types.professional": "Attestation professionnelle",
+  "profile.certificates.types.unknown": "Attestation",
+  "profile.country.label": "Adresse",
+  "profile.country.empty": "Ajouter un emplacement",
+  "profile.education.empty": "Ajouter formation",
+  "profile.education.education": "Formation",
+  "profile.education.levels.p": "Doctorat",
+  "profile.education.levels.m": "Maîtrise ou diplôme professionnel",
+  "profile.education.levels.b": "Diplôme de baccalauréat",
+  "profile.education.levels.a": "Diplôme d'associé",
+  "profile.education.levels.hs": "Lycée / enseignement secondaire",
+  "profile.education.levels.jhs": "Collège / enseignement secondaire inférieur",
+  "profile.education.levels.el": "Enseignement primaire",
+  "profile.education.levels.none": "Sans formation formelle",
+  "profile.education.levels.o": "Autre niveau de formation",
+  "profile.editbutton.edit": "Éditer",
+  "profile.formcontrols.who.can.see": "Qui peut voir ça :",
+  "profile.formcontrols.button.cancel": "Annuler",
+  "profile.formcontrols.button.save": "Sauvegarder",
+  "profile.formcontrols.button.saving": "Sauvegarde en cours",
+  "profile.formcontrols.button.saved": "Sauvegardé",
+  "profile.visibility.who.just.me": "Juste moi",
+  "profile.visibility.who.everyone": "Tout le monde sur {siteName}",
+  "profile.learningGoal.learningGoal": "Objectif d'apprentissage",
+  "profile.learningGoal.options.start_career": "Je veux commencer ma carrière",
+  "profile.learningGoal.options.advance_career": "Je veux faire progresser ma carrière",
+  "profile.learningGoal.options.learn_something_new": "Je veux apprendre quelque chose de nouveau",
+  "profile.learningGoal.options.something_else": "Autre chose",
+  "profile.name.full.name": "Nom complet",
+  "profile.name.details": "C'est le nom qui apparaît dans votre compte et sur vos attestations.",
+  "profile.name.empty": "Ajouter un nom",
+  "profile.preferredlanguage.empty": "Ajouter une langue",
+  "profile.preferredlanguage.label": "Langue principale parlée",
+  "profile.profileavatar.upload-button": "Téléverser une photo",
+  "profile.profileavatar.remove.button": "Retirer",
+  "profile.image.alt.attribute": "avatar de profil",
+  "profile.profileavatar.change-button": "Modifier",
+  "profile.sociallinks.add": "Ajouter {network}",
+  "profile.sociallinks.social.links": "Liens vers les réseaux sociaux",
+  "profile.notfound.message": "La page que vous recherchez n'est pas disponible ou il y a une erreur dans l'URL. Veuillez vérifier l'URL et réessayer.",
+  "profile.viewMyRecords": "Afficher mes dossiers",
+  "profile.loading": "Chargement du profil...",
+  "profile.username.description": "Les informations de votre profil ne sont visibles que par vous. Seul votre nom d'utilisateur est visible par les autres sur {siteName}."
+}

src/i18n/messages/hi.json

@@ -0,0 +1,57 @@
+{
+  "profile.page.title": "Profile | {siteName}",
+  "profile.age.details": "To share your profile with other {siteName} learners, you must confirm that you are over the age of 13.",
+  "profile.age.set.date": "Set your date of birth",
+  "profile.datejoined.member.since": "Member since {year}",
+  "profile.bio.empty": "Add a short bio",
+  "profile.bio.about.me": "About Me",
+  "profile.certificate.organization.label": "From",
+  "profile.certificate.completion.date.label": "Completed on {date}",
+  "profile.no.certificates": "You don't have any certificates yet.",
+  "profile.certificates.my.certificates": "My Certificates",
+  "profile.certificates.view.certificate": "View Certificate",
+  "profile.certificates.types.verified": "Verified Certificate",
+  "profile.certificates.types.professional": "Professional Certificate",
+  "profile.certificates.types.unknown": "Certificate",
+  "profile.country.label": "Location",
+  "profile.country.empty": "Add location",
+  "profile.education.empty": "Add education",
+  "profile.education.education": "Education",
+  "profile.education.levels.p": "Doctorate",
+  "profile.education.levels.m": "Master's or professional degree",
+  "profile.education.levels.b": "Bachelor's Degree",
+  "profile.education.levels.a": "Associate's degree",
+  "profile.education.levels.hs": "Secondary/high school",
+  "profile.education.levels.jhs": "Junior secondary/junior high/middle school",
+  "profile.education.levels.el": "Elementary/primary school",
+  "profile.education.levels.none": "No formal education",
+  "profile.education.levels.o": "Other education",
+  "profile.editbutton.edit": "Edit",
+  "profile.formcontrols.who.can.see": "Who can see this:",
+  "profile.formcontrols.button.cancel": "Cancel",
+  "profile.formcontrols.button.save": "Save",
+  "profile.formcontrols.button.saving": "Saving",
+  "profile.formcontrols.button.saved": "Saved",
+  "profile.visibility.who.just.me": "Just me",
+  "profile.visibility.who.everyone": "Everyone on {siteName}",
+  "profile.learningGoal.learningGoal": "Learning Goal",
+  "profile.learningGoal.options.start_career": "I want to start my career",
+  "profile.learningGoal.options.advance_career": "I want to advance my career",
+  "profile.learningGoal.options.learn_something_new": "I want to learn something new",
+  "profile.learningGoal.options.something_else": "Something else",
+  "profile.name.full.name": "Full Name",
+  "profile.name.details": "This is the name that appears in your account and on your certificates.",
+  "profile.name.empty": "Add name",
+  "profile.preferredlanguage.empty": "Add language",
+  "profile.preferredlanguage.label": "Primary Language Spoken",
+  "profile.profileavatar.upload-button": "Upload Photo",
+  "profile.profileavatar.remove.button": "Remove",
+  "profile.image.alt.attribute": "profile avatar",
+  "profile.profileavatar.change-button": "Change",
+  "profile.sociallinks.add": "Add {network}",
+  "profile.sociallinks.social.links": "Social Links",
+  "profile.notfound.message": "The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again.",
+  "profile.viewMyRecords": "View My Records",
+  "profile.loading": "Profile loading...",
+  "profile.username.description": "Your profile information is only visible to you. Only your username is visible to others on {siteName}."
+}

src/i18n/messages/it.json

@@ -0,0 +1,57 @@
+{
+  "profile.page.title": "Profile | {siteName}",
+  "profile.age.details": "To share your profile with other {siteName} learners, you must confirm that you are over the age of 13.",
+  "profile.age.set.date": "Set your date of birth",
+  "profile.datejoined.member.since": "Member since {year}",
+  "profile.bio.empty": "Add a short bio",
+  "profile.bio.about.me": "About Me",
+  "profile.certificate.organization.label": "From",
+  "profile.certificate.completion.date.label": "Completed on {date}",
+  "profile.no.certificates": "You don't have any certificates yet.",
+  "profile.certificates.my.certificates": "My Certificates",
+  "profile.certificates.view.certificate": "View Certificate",
+  "profile.certificates.types.verified": "Verified Certificate",
+  "profile.certificates.types.professional": "Professional Certificate",
+  "profile.certificates.types.unknown": "Certificate",
+  "profile.country.label": "Location",
+  "profile.country.empty": "Add location",
+  "profile.education.empty": "Add education",
+  "profile.education.education": "Education",
+  "profile.education.levels.p": "Doctorate",
+  "profile.education.levels.m": "Master's or professional degree",
+  "profile.education.levels.b": "Bachelor's Degree",
+  "profile.education.levels.a": "Associate's degree",
+  "profile.education.levels.hs": "Secondary/high school",
+  "profile.education.levels.jhs": "Junior secondary/junior high/middle school",
+  "profile.education.levels.el": "Elementary/primary school",
+  "profile.education.levels.none": "No formal education",
+  "profile.education.levels.o": "Other education",
+  "profile.editbutton.edit": "Edit",
+  "profile.formcontrols.who.can.see": "Who can see this:",
+  "profile.formcontrols.button.cancel": "Cancel",
+  "profile.formcontrols.button.save": "Save",
+  "profile.formcontrols.button.saving": "Saving",
+  "profile.formcontrols.button.saved": "Saved",
+  "profile.visibility.who.just.me": "Just me",
+  "profile.visibility.who.everyone": "Everyone on {siteName}",
+  "profile.learningGoal.learningGoal": "Learning Goal",
+  "profile.learningGoal.options.start_career": "I want to start my career",
+  "profile.learningGoal.options.advance_career": "I want to advance my career",
+  "profile.learningGoal.options.learn_something_new": "I want to learn something new",
+  "profile.learningGoal.options.something_else": "Something else",
+  "profile.name.full.name": "Full Name",
+  "profile.name.details": "This is the name that appears in your account and on your certificates.",
+  "profile.name.empty": "Add name",
+  "profile.preferredlanguage.empty": "Add language",
+  "profile.preferredlanguage.label": "Primary Language Spoken",
+  "profile.profileavatar.upload-button": "Upload Photo",
+  "profile.profileavatar.remove.button": "Remove",
+  "profile.image.alt.attribute": "profile avatar",
+  "profile.profileavatar.change-button": "Change",
+  "profile.sociallinks.add": "Add {network}",
+  "profile.sociallinks.social.links": "Social Links",
+  "profile.notfound.message": "The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again.",
+  "profile.viewMyRecords": "View My Records",
+  "profile.loading": "Profile loading...",
+  "profile.username.description": "Your profile information is only visible to you. Only your username is visible to others on {siteName}."
+}

src/i18n/messages/it_IT.json

@@ -0,0 +1,57 @@
+{
+  "profile.page.title": "Profilo | {siteName}",
+  "profile.age.details": "Per condividere il tuo profilo con altri studenti di {siteName}, devi confermare di avere più di 13 anni.",
+  "profile.age.set.date": "Imposta la data di nascita ",
+  "profile.datejoined.member.since": "Membro da {year}",
+  "profile.bio.empty": "Aggiungi una breve biografia ",
+  "profile.bio.about.me": "Su di me",
+  "profile.certificate.organization.label": "Da ",
+  "profile.certificate.completion.date.label": "Completato il {date}",
+  "profile.no.certificates": "Non si dispone ancora di alcun certificato. ",
+  "profile.certificates.my.certificates": "Certificati personali ",
+  "profile.certificates.view.certificate": "Visualizza il certificato",
+  "profile.certificates.types.verified": "Certificato Verificato",
+  "profile.certificates.types.professional": "Certificato professionale ",
+  "profile.certificates.types.unknown": "Certificato ",
+  "profile.country.label": "Posizione",
+  "profile.country.empty": "Aggiungi posizione ",
+  "profile.education.empty": "Aggiungi titolo di studio ",
+  "profile.education.education": "Educazione",
+  "profile.education.levels.p": "Dottorato",
+  "profile.education.levels.m": "Laurea magistrale o titolo accademico professionale",
+  "profile.education.levels.b": "Laurea di primo livello ",
+  "profile.education.levels.a": "Diploma Professionale",
+  "profile.education.levels.hs": "Scuole superiori/liceo",
+  "profile.education.levels.jhs": "Scuole Medie",
+  "profile.education.levels.el": "Scuola Primaria/Elementare",
+  "profile.education.levels.none": "Nessun livello educativo formale",
+  "profile.education.levels.o": "Altro livello educativo",
+  "profile.editbutton.edit": "Modifica",
+  "profile.formcontrols.who.can.see": "Chi può visualizzare: ",
+  "profile.formcontrols.button.cancel": "Annulla",
+  "profile.formcontrols.button.save": "Salva",
+  "profile.formcontrols.button.saving": "Salvataggio in corso",
+  "profile.formcontrols.button.saved": "Salvato",
+  "profile.visibility.who.just.me": "Solo io ",
+  "profile.visibility.who.everyone": "Tutti su {siteName}",
+  "profile.learningGoal.learningGoal": "Obiettivo di apprendimento",
+  "profile.learningGoal.options.start_career": "Voglio iniziare il mio percorso",
+  "profile.learningGoal.options.advance_career": "Voglio avanzare nel mio percorso",
+  "profile.learningGoal.options.learn_something_new": "Voglio imparare qualcosa di nuovo",
+  "profile.learningGoal.options.something_else": "Qualcos'altro",
+  "profile.name.full.name": "Nome e Cognome",
+  "profile.name.details": "Questo è il nome visualizzato nel proprio account e nei propri certificati. ",
+  "profile.name.empty": "Aggiungi nome ",
+  "profile.preferredlanguage.empty": "Aggiungi lingua",
+  "profile.preferredlanguage.label": "Lingua principale ",
+  "profile.profileavatar.upload-button": "Carica foto",
+  "profile.profileavatar.remove.button": "Rimuovi",
+  "profile.image.alt.attribute": "avatar del profilo ",
+  "profile.profileavatar.change-button": "Cambia",
+  "profile.sociallinks.add": "Aggiungi {network}",
+  "profile.sociallinks.social.links": "Link social ",
+  "profile.notfound.message": "La pagina ricercata non è disponibile oppure è presente un errore nell'URL. Controllare l'URL e riprovare. ",
+  "profile.viewMyRecords": "Visualizza record personali ",
+  "profile.loading": "Caricamento del profilo... ",
+  "profile.username.description": "Le informazioni del tuo profilo sono visibili solo a te. Solo il tuo nome utente è visibile agli altri su {siteName}."
+}

src/i18n/messages/pt.json

@@ -0,0 +1,57 @@
+{
+  "profile.page.title": "Profile | {siteName}",
+  "profile.age.details": "To share your profile with other {siteName} learners, you must confirm that you are over the age of 13.",
+  "profile.age.set.date": "Set your date of birth",
+  "profile.datejoined.member.since": "Member since {year}",
+  "profile.bio.empty": "Add a short bio",
+  "profile.bio.about.me": "About Me",
+  "profile.certificate.organization.label": "From",
+  "profile.certificate.completion.date.label": "Completed on {date}",
+  "profile.no.certificates": "You don't have any certificates yet.",
+  "profile.certificates.my.certificates": "My Certificates",
+  "profile.certificates.view.certificate": "View Certificate",
+  "profile.certificates.types.verified": "Verified Certificate",
+  "profile.certificates.types.professional": "Professional Certificate",
+  "profile.certificates.types.unknown": "Certificate",
+  "profile.country.label": "Location",
+  "profile.country.empty": "Add location",
+  "profile.education.empty": "Add education",
+  "profile.education.education": "Education",
+  "profile.education.levels.p": "Doctorate",
+  "profile.education.levels.m": "Master's or professional degree",
+  "profile.education.levels.b": "Bachelor's Degree",
+  "profile.education.levels.a": "Associate's degree",
+  "profile.education.levels.hs": "Secondary/high school",
+  "profile.education.levels.jhs": "Junior secondary/junior high/middle school",
+  "profile.education.levels.el": "Elementary/primary school",
+  "profile.education.levels.none": "No formal education",
+  "profile.education.levels.o": "Other education",
+  "profile.editbutton.edit": "Edit",
+  "profile.formcontrols.who.can.see": "Who can see this:",
+  "profile.formcontrols.button.cancel": "Cancel",
+  "profile.formcontrols.button.save": "Save",
+  "profile.formcontrols.button.saving": "Saving",
+  "profile.formcontrols.button.saved": "Saved",
+  "profile.visibility.who.just.me": "Just me",
+  "profile.visibility.who.everyone": "Everyone on {siteName}",
+  "profile.learningGoal.learningGoal": "Learning Goal",
+  "profile.learningGoal.options.start_career": "I want to start my career",
+  "profile.learningGoal.options.advance_career": "I want to advance my career",
+  "profile.learningGoal.options.learn_something_new": "I want to learn something new",
+  "profile.learningGoal.options.something_else": "Something else",
+  "profile.name.full.name": "Full Name",
+  "profile.name.details": "This is the name that appears in your account and on your certificates.",
+  "profile.name.empty": "Add name",
+  "profile.preferredlanguage.empty": "Add language",
+  "profile.preferredlanguage.label": "Primary Language Spoken",
+  "profile.profileavatar.upload-button": "Upload Photo",
+  "profile.profileavatar.remove.button": "Remove",
+  "profile.image.alt.attribute": "profile avatar",
+  "profile.profileavatar.change-button": "Change",
+  "profile.sociallinks.add": "Add {network}",
+  "profile.sociallinks.social.links": "Social Links",
+  "profile.notfound.message": "The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again.",
+  "profile.viewMyRecords": "View My Records",
+  "profile.loading": "Profile loading...",
+  "profile.username.description": "Your profile information is only visible to you. Only your username is visible to others on {siteName}."
+}

src/i18n/messages/pt_PT.json

@@ -0,0 +1,57 @@
+{
+  "profile.page.title": "Perfil | {siteName}",
+  "profile.age.details": "Para partilhar o seu perfil com outros estudantes da plataforma {siteName}, tem de confirmar que tem mais de 13 anos de idade.",
+  "profile.age.set.date": "Indique a sua data de nascimento",
+  "profile.datejoined.member.since": "Utilizador desde {year}",
+  "profile.bio.empty": "Adicionar uma breve biografia",
+  "profile.bio.about.me": "Sobre Mim",
+  "profile.certificate.organization.label": "De",
+  "profile.certificate.completion.date.label": "Concluído a {date}",
+  "profile.no.certificates": "Ainda não tem certificados.",
+  "profile.certificates.my.certificates": "Os Meus Certificados",
+  "profile.certificates.view.certificate": "Ver Certificado",
+  "profile.certificates.types.verified": "Certificado Validado",
+  "profile.certificates.types.professional": "Certificado Profissional",
+  "profile.certificates.types.unknown": "Certificado",
+  "profile.country.label": "Localização",
+  "profile.country.empty": "Adicionar localização",
+  "profile.education.empty": "Adicionar  grau de escolaridade",
+  "profile.education.education": "Educação",
+  "profile.education.levels.p": "Doutoramento",
+  "profile.education.levels.m": "Mestrado ou Grau Profissional",
+  "profile.education.levels.b": "Licenciatura",
+  "profile.education.levels.a": "Pós-graduação",
+  "profile.education.levels.hs": "Secundário",
+  "profile.education.levels.jhs": "2ªciclo/3ºciclo",
+  "profile.education.levels.el": "Primária",
+  "profile.education.levels.none": "Sem estudos",
+  "profile.education.levels.o": "Outra formação",
+  "profile.editbutton.edit": "Editar",
+  "profile.formcontrols.who.can.see": "Quem pode ver isto:",
+  "profile.formcontrols.button.cancel": "Cancelar",
+  "profile.formcontrols.button.save": "Guardar",
+  "profile.formcontrols.button.saving": "A Guardar",
+  "profile.formcontrols.button.saved": "Guardado",
+  "profile.visibility.who.just.me": "Apenas eu",
+  "profile.visibility.who.everyone": "Toda a gente em {siteName}",
+  "profile.learningGoal.learningGoal": "Objectivo de aprendizagem",
+  "profile.learningGoal.options.start_career": "Quero começar a minha carreira",
+  "profile.learningGoal.options.advance_career": "Quero progredir na minha carreira",
+  "profile.learningGoal.options.learn_something_new": "Quero aprender algo novo",
+  "profile.learningGoal.options.something_else": "Outra coisa",
+  "profile.name.full.name": "Nome Completo",
+  "profile.name.details": "Este é o nome que aparece na sua conta e nos seus certificados.",
+  "profile.name.empty": "Adicionar nome",
+  "profile.preferredlanguage.empty": "Adicionar idioma",
+  "profile.preferredlanguage.label": "Língua Materna",
+  "profile.profileavatar.upload-button": "Carregar Fotografia",
+  "profile.profileavatar.remove.button": "Eliminar",
+  "profile.image.alt.attribute": "Icon de perfil",
+  "profile.profileavatar.change-button": "Alterar",
+  "profile.sociallinks.add": "Adicionar {network}",
+  "profile.sociallinks.social.links": "Links de Redes Sociais",
+  "profile.notfound.message": "A página que procura não está disponível ou há um erro no URL. Por favor, verifique o URL e tente novamente.",
+  "profile.viewMyRecords": "Ver os Meus Registos",
+  "profile.loading": "A carregar perfil...",
+  "profile.username.description": "As informações do seu perfil só são visíveis para si. Apenas o seu nome de utilizador é visível para outros em {siteName}."
+}

src/i18n/messages/ru.json

@@ -0,0 +1,57 @@
+{
+  "profile.page.title": "Profile | {siteName}",
+  "profile.age.details": "To share your profile with other {siteName} learners, you must confirm that you are over the age of 13.",
+  "profile.age.set.date": "Set your date of birth",
+  "profile.datejoined.member.since": "Member since {year}",
+  "profile.bio.empty": "Add a short bio",
+  "profile.bio.about.me": "About Me",
+  "profile.certificate.organization.label": "From",
+  "profile.certificate.completion.date.label": "Completed on {date}",
+  "profile.no.certificates": "You don't have any certificates yet.",
+  "profile.certificates.my.certificates": "My Certificates",
+  "profile.certificates.view.certificate": "View Certificate",
+  "profile.certificates.types.verified": "Verified Certificate",
+  "profile.certificates.types.professional": "Professional Certificate",
+  "profile.certificates.types.unknown": "Certificate",
+  "profile.country.label": "Location",
+  "profile.country.empty": "Add location",
+  "profile.education.empty": "Add education",
+  "profile.education.education": "Education",
+  "profile.education.levels.p": "Doctorate",
+  "profile.education.levels.m": "Master's or professional degree",
+  "profile.education.levels.b": "Bachelor's Degree",
+  "profile.education.levels.a": "Associate's degree",
+  "profile.education.levels.hs": "Secondary/high school",
+  "profile.education.levels.jhs": "Junior secondary/junior high/middle school",
+  "profile.education.levels.el": "Elementary/primary school",
+  "profile.education.levels.none": "No formal education",
+  "profile.education.levels.o": "Other education",
+  "profile.editbutton.edit": "Edit",
+  "profile.formcontrols.who.can.see": "Who can see this:",
+  "profile.formcontrols.button.cancel": "Cancel",
+  "profile.formcontrols.button.save": "Save",
+  "profile.formcontrols.button.saving": "Saving",
+  "profile.formcontrols.button.saved": "Saved",
+  "profile.visibility.who.just.me": "Just me",
+  "profile.visibility.who.everyone": "Everyone on {siteName}",
+  "profile.learningGoal.learningGoal": "Learning Goal",
+  "profile.learningGoal.options.start_career": "I want to start my career",
+  "profile.learningGoal.options.advance_career": "I want to advance my career",
+  "profile.learningGoal.options.learn_something_new": "I want to learn something new",
+  "profile.learningGoal.options.something_else": "Something else",
+  "profile.name.full.name": "Full Name",
+  "profile.name.details": "This is the name that appears in your account and on your certificates.",
+  "profile.name.empty": "Add name",
+  "profile.preferredlanguage.empty": "Add language",
+  "profile.preferredlanguage.label": "Primary Language Spoken",
+  "profile.profileavatar.upload-button": "Upload Photo",
+  "profile.profileavatar.remove.button": "Remove",
+  "profile.image.alt.attribute": "profile avatar",
+  "profile.profileavatar.change-button": "Change",
+  "profile.sociallinks.add": "Add {network}",
+  "profile.sociallinks.social.links": "Social Links",
+  "profile.notfound.message": "The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again.",
+  "profile.viewMyRecords": "View My Records",
+  "profile.loading": "Profile loading...",
+  "profile.username.description": "Your profile information is only visible to you. Only your username is visible to others on {siteName}."
+}

src/i18n/messages/uk.json

@@ -0,0 +1,57 @@
+{
+  "profile.page.title": "Profile | {siteName}",
+  "profile.age.details": "To share your profile with other {siteName} learners, you must confirm that you are over the age of 13.",
+  "profile.age.set.date": "Set your date of birth",
+  "profile.datejoined.member.since": "Member since {year}",
+  "profile.bio.empty": "Add a short bio",
+  "profile.bio.about.me": "About Me",
+  "profile.certificate.organization.label": "From",
+  "profile.certificate.completion.date.label": "Completed on {date}",
+  "profile.no.certificates": "You don't have any certificates yet.",
+  "profile.certificates.my.certificates": "Мої сертифікати",
+  "profile.certificates.view.certificate": "View Certificate",
+  "profile.certificates.types.verified": "Verified Certificate",
+  "profile.certificates.types.professional": "Professional Certificate",
+  "profile.certificates.types.unknown": "Certificate",
+  "profile.country.label": "Location",
+  "profile.country.empty": "Add location",
+  "profile.education.empty": "Add education",
+  "profile.education.education": "Education",
+  "profile.education.levels.p": "Doctorate",
+  "profile.education.levels.m": "Master's or professional degree",
+  "profile.education.levels.b": "Bachelor's Degree",
+  "profile.education.levels.a": "Associate's degree",
+  "profile.education.levels.hs": "Secondary/high school",
+  "profile.education.levels.jhs": "Junior secondary/junior high/middle school",
+  "profile.education.levels.el": "Elementary/primary school",
+  "profile.education.levels.none": "No formal education",
+  "profile.education.levels.o": "Other education",
+  "profile.editbutton.edit": "Edit",
+  "profile.formcontrols.who.can.see": "Who can see this:",
+  "profile.formcontrols.button.cancel": "Cancel",
+  "profile.formcontrols.button.save": "Save",
+  "profile.formcontrols.button.saving": "Saving",
+  "profile.formcontrols.button.saved": "Saved",
+  "profile.visibility.who.just.me": "Just me",
+  "profile.visibility.who.everyone": "Everyone on {siteName}",
+  "profile.learningGoal.learningGoal": "Learning Goal",
+  "profile.learningGoal.options.start_career": "I want to start my career",
+  "profile.learningGoal.options.advance_career": "I want to advance my career",
+  "profile.learningGoal.options.learn_something_new": "I want to learn something new",
+  "profile.learningGoal.options.something_else": "Something else",
+  "profile.name.full.name": "Full Name",
+  "profile.name.details": "This is the name that appears in your account and on your certificates.",
+  "profile.name.empty": "Add name",
+  "profile.preferredlanguage.empty": "Add language",
+  "profile.preferredlanguage.label": "Primary Language Spoken",
+  "profile.profileavatar.upload-button": "Upload Photo",
+  "profile.profileavatar.remove.button": "Remove",
+  "profile.image.alt.attribute": "profile avatar",
+  "profile.profileavatar.change-button": "Change",
+  "profile.sociallinks.add": "Add {network}",
+  "profile.sociallinks.social.links": "Social Links",
+  "profile.notfound.message": "The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again.",
+  "profile.viewMyRecords": "View My Records",
+  "profile.loading": "Profile loading...",
+  "profile.username.description": "Your profile information is only visible to you. Only your username is visible to others on {siteName}."
+}

src/i18n/messages/zh_CN.json

@@ -0,0 +1,57 @@
+{
+  "profile.page.title": "Profile | {siteName}",
+  "profile.age.details": "To share your profile with other {siteName} learners, you must confirm that you are over the age of 13.",
+  "profile.age.set.date": "Set your date of birth",
+  "profile.datejoined.member.since": "Member since {year}",
+  "profile.bio.empty": "Add a short bio",
+  "profile.bio.about.me": "About Me",
+  "profile.certificate.organization.label": "From",
+  "profile.certificate.completion.date.label": "Completed on {date}",
+  "profile.no.certificates": "You don't have any certificates yet.",
+  "profile.certificates.my.certificates": "My Certificates",
+  "profile.certificates.view.certificate": "View Certificate",
+  "profile.certificates.types.verified": "Verified Certificate",
+  "profile.certificates.types.professional": "Professional Certificate",
+  "profile.certificates.types.unknown": "Certificate",
+  "profile.country.label": "Location",
+  "profile.country.empty": "Add location",
+  "profile.education.empty": "Add education",
+  "profile.education.education": "Education",
+  "profile.education.levels.p": "Doctorate",
+  "profile.education.levels.m": "Master's or professional degree",
+  "profile.education.levels.b": "Bachelor's Degree",
+  "profile.education.levels.a": "Associate's degree",
+  "profile.education.levels.hs": "Secondary/high school",
+  "profile.education.levels.jhs": "Junior secondary/junior high/middle school",
+  "profile.education.levels.el": "Elementary/primary school",
+  "profile.education.levels.none": "No formal education",
+  "profile.education.levels.o": "Other education",
+  "profile.editbutton.edit": "Edit",
+  "profile.formcontrols.who.can.see": "Who can see this:",
+  "profile.formcontrols.button.cancel": "Cancel",
+  "profile.formcontrols.button.save": "Save",
+  "profile.formcontrols.button.saving": "Saving",
+  "profile.formcontrols.button.saved": "Saved",
+  "profile.visibility.who.just.me": "Just me",
+  "profile.visibility.who.everyone": "Everyone on {siteName}",
+  "profile.learningGoal.learningGoal": "Learning Goal",
+  "profile.learningGoal.options.start_career": "I want to start my career",
+  "profile.learningGoal.options.advance_career": "I want to advance my career",
+  "profile.learningGoal.options.learn_something_new": "I want to learn something new",
+  "profile.learningGoal.options.something_else": "Something else",
+  "profile.name.full.name": "Full Name",
+  "profile.name.details": "This is the name that appears in your account and on your certificates.",
+  "profile.name.empty": "Add name",
+  "profile.preferredlanguage.empty": "Add language",
+  "profile.preferredlanguage.label": "Primary Language Spoken",
+  "profile.profileavatar.upload-button": "Upload Photo",
+  "profile.profileavatar.remove.button": "Remove",
+  "profile.image.alt.attribute": "profile avatar",
+  "profile.profileavatar.change-button": "Change",
+  "profile.sociallinks.add": "Add {network}",
+  "profile.sociallinks.social.links": "Social Links",
+  "profile.notfound.message": "The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again.",
+  "profile.viewMyRecords": "View My Records",
+  "profile.loading": "Profile loading...",
+  "profile.username.description": "Your profile information is only visible to you. Only your username is visible to others on {siteName}."
+}

src/index.jsx

@@ -14,38 +14,46 @@ import {
 } from '@edx/frontend-platform/react';
 
 import React from 'react';
-// eslint-disable-next-line import/no-unresolved
-import { createRoot } from 'react-dom/client';
+import ReactDOM from 'react-dom';
+import { useLocation } from 'react-router-dom';
 
 import Header from '@edx/frontend-component-header';
-import { FooterSlot } from '@edx/frontend-component-footer';
+import Footer from '@edx/frontend-component-footer';
 
 import messages from './i18n';
 import configureStore from './data/configureStore';
 
+import './index.scss';
 import Head from './head/Head';
 
 import AppRoutes from './routes/AppRoutes';
 
-import './index.scss';
+const RenderFooter = () => {
+  const location = useLocation();
+  return location.pathname.includes('/plugin') ? null : <Footer />;
+};
 
-const rootNode = createRoot(document.getElementById('root'));
-subscribe(APP_READY, async () => {
-  rootNode.render(
+const RenderHeader = () => {
+  const location = useLocation();
+  return location.pathname.includes('/plugin') ? null : <Header />;
+};
+
+subscribe(APP_READY, () => {
+  ReactDOM.render(
     <AppProvider store={configureStore()}>
       <Head />
-      <Header />
+      <RenderHeader />
       <main id="main">
         <AppRoutes />
       </main>
-      <FooterSlot />
+      <RenderFooter />
     </AppProvider>,
     document.getElementById('root'),
   );
 });
 
 subscribe(APP_INIT_ERROR, (error) => {
-  rootNode.render(<ErrorPage message={error.message} />, document.getElementById('root'));
+  ReactDOM.render(<ErrorPage message={error.message} />, document.getElementById('root'));
 });
 
 initialize({
@@ -56,7 +64,6 @@ initialize({
       mergeConfig({
         COLLECT_YEAR_OF_BIRTH: process.env.COLLECT_YEAR_OF_BIRTH,
         ENABLE_SKILLS_BUILDER_PROFILE: process.env.ENABLE_SKILLS_BUILDER_PROFILE,
-        DISABLE_VISIBILITY_EDITING: process.env.DISABLE_VISIBILITY_EDITING,
       }, 'App loadConfig override handler');
     },
   },

src/index.scss

@@ -1,6 +1,8 @@
-@use "@openedx/paragon/styles/css/core/custom-media-breakpoints" as paragonCustomMediaBreakpoints;
-
+@import "~@edx/brand/paragon/fonts";
+@import "~@edx/brand/paragon/variables";
+@import "~@edx/paragon/scss/core/core";
+@import "~@edx/brand/paragon/overrides";
 @import "~@edx/frontend-component-header/dist/index";
 @import "~@edx/frontend-component-footer/dist/footer";
 
-@import 'profile/index';
+@import './profile/index';

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

@@ -36,11 +36,7 @@
           "dateJoined": "2017-06-07T00:44:23Z",
           "email": "staff@example.com",
           "isActive": true,
-          "languageProficiencies": [],
-          "levelOfEducation": null,
           "name": "Lemon Seltzer",
-          "profileImage": {},
-          "socialLinks": [],
           "username": "staff",
           "yearOfBirth": 1901
         },

src/plugin-slots/AdditionalProfileFieldsSlot/README.md

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

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

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

src/plugin-slots/AdditionalProfileFieldsSlot/index.jsx

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

src/plugin-slots/FooterSlot/README.md

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

src/plugin-slots/README.md

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

src/profile/AgeMessage.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Alert } from '@edx/paragon';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
+
+const AgeMessage = ({ accountSettingsUrl }) => (
+  <Alert
+    variant="info"
+    dismissible={false}
+    show
+  >
+    <Alert.Heading id="profile.age.headline">
+      Your profile cannot be shared.
+    </Alert.Heading>
+    <FormattedMessage
+      id="profile.age.details"
+      defaultMessage="To share your profile with other {siteName} learners, you must confirm that you are over the age of 13."
+      description="Error message"
+      tagName="p"
+      values={{
+        siteName: getConfig().SITE_NAME,
+      }}
+    />
+    <Alert.Link href={accountSettingsUrl}>
+      <FormattedMessage
+        id="profile.age.set.date"
+        defaultMessage="Set your date of birth"
+        description="Label on a link to set birthday"
+      />
+    </Alert.Link>
+  </Alert>
+);
+
+AgeMessage.propTypes = {
+  accountSettingsUrl: PropTypes.string.isRequired,
+};
+
+export default AgeMessage;

src/profile/Banner.jsx

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

src/profile/CertificateCard.jsx

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

src/profile/Certificates.jsx

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

src/profile/DateJoined.jsx

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

src/profile/NotFoundPage.jsx

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

src/profile/PageLoading.jsx

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

src/profile/ProfilePage.jsx

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

src/profile/ProfilePage.messages.jsx

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

src/profile/ProfilePage.test.jsx

@@ -1,45 +1,38 @@
+/* eslint-disable global-require */
 import { getConfig } from '@edx/frontend-platform';
 import * as analytics from '@edx/frontend-platform/analytics';
 import { AppContext } from '@edx/frontend-platform/react';
 import { configure as configureI18n, IntlProvider } from '@edx/frontend-platform/i18n';
-import { render } from '@testing-library/react';
+import { mount } from 'enzyme';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Provider } from 'react-redux';
+import renderer from 'react-test-renderer';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
-import {
-  MemoryRouter,
-  Routes,
-  Route,
-  useNavigate,
-} from 'react-router-dom';
 
 import messages from '../i18n';
 import ProfilePage from './ProfilePage';
-import loadingApp from './__mocks__/loadingApp.mockStore';
-import viewOwnProfile from './__mocks__/viewOwnProfile.mockStore';
-import viewOtherProfile from './__mocks__/viewOtherProfile.mockStore';
-import invalidUser from './__mocks__/invalidUser.mockStore';
-
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useNavigate: jest.fn(),
-}));
 
 const mockStore = configureMockStore([thunk]);
-
 const storeMocks = {
-  loadingApp,
-  viewOwnProfile,
-  viewOtherProfile,
-  invalidUser,
+  loadingApp: require('./__mocks__/loadingApp.mockStore'),
+  viewOwnProfile: require('./__mocks__/viewOwnProfile.mockStore'),
+  viewOtherProfile: require('./__mocks__/viewOtherProfile.mockStore'),
+  savingEditedBio: require('./__mocks__/savingEditedBio.mockStore'),
 };
-
 const requiredProfilePageProps = {
+  fetchUserAccount: () => {},
+  fetchProfile: () => {},
+  saveProfile: () => {},
+  saveProfilePhoto: () => {},
+  deleteProfilePhoto: () => {},
+  openField: () => {},
+  closeField: () => {},
   params: { username: 'staff' },
 };
 
+// Mock language cookie
 Object.defineProperty(global.document, 'cookie', {
   writable: true,
   value: `${getConfig().LANGUAGE_PREFERENCE_COOKIE_NAME}=en`,
@@ -71,39 +64,32 @@ configureI18n({
 
 beforeEach(() => {
   analytics.sendTrackingLogEvent.mockReset();
-  useNavigate.mockReset();
 });
 
 const ProfilePageWrapper = ({
-  contextValue, store, params,
+  contextValue, store, params, requiresParentalConsent,
 }) => (
-  <AppContext.Provider value={contextValue}>
+  <AppContext.Provider
+    value={contextValue}
+  >
     <IntlProvider locale="en">
       <Provider store={store}>
-        <MemoryRouter initialEntries={[`/profile/${params.username}`]}>
-          <Routes>
-            <Route
-              path="/profile/:username"
-              element={<ProfilePage {...requiredProfilePageProps} params={params} />}
-            />
-          </Routes>
-        </MemoryRouter>
+        <ProfilePage {...requiredProfilePageProps} params={params} requiresParentalConsent={requiresParentalConsent} />
       </Provider>
     </IntlProvider>
   </AppContext.Provider>
 );
 
 ProfilePageWrapper.defaultProps = {
-  // eslint-disable-next-line react/default-props-match-prop-types
   params: { username: 'staff' },
+  requiresParentalConsent: null,
 };
 
 ProfilePageWrapper.propTypes = {
   contextValue: PropTypes.shape({}).isRequired,
   store: PropTypes.shape({}).isRequired,
-  params: PropTypes.shape({
-    username: PropTypes.string.isRequired,
-  }).isRequired,
+  params: PropTypes.shape({}),
+  requiresParentalConsent: PropTypes.bool,
 };
 
 describe('<ProfilePage />', () => {
@@ -113,13 +99,8 @@ describe('<ProfilePage />', () => {
         authenticatedUser: { userId: null, username: null, administrator: false },
         config: getConfig(),
       };
-      const component = (
-        <ProfilePageWrapper
-          contextValue={contextValue}
-          store={mockStore(storeMocks.loadingApp)}
-        />
-      );
-      const { container: tree } = render(component);
+      const component = <ProfilePageWrapper contextValue={contextValue} store={mockStore(storeMocks.loadingApp)} />;
+      const tree = renderer.create(component).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
@@ -128,17 +109,12 @@ describe('<ProfilePage />', () => {
         authenticatedUser: { userId: 123, username: 'staff', administrator: true },
         config: getConfig(),
       };
-      const component = (
-        <ProfilePageWrapper
-          contextValue={contextValue}
-          store={mockStore(storeMocks.viewOwnProfile)}
-        />
-      );
-      const { container: tree } = render(component);
+      const component = <ProfilePageWrapper contextValue={contextValue} store={mockStore(storeMocks.viewOwnProfile)} />;
+      const tree = renderer.create(component).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
-    it('viewing other profile with all fields', () => {
+    it('viewing other profile', () => {
       const contextValue = {
         authenticatedUser: { userId: 123, username: 'staff', administrator: true },
         config: getConfig(),
@@ -146,35 +122,97 @@ describe('<ProfilePage />', () => {
       const component = (
         <ProfilePageWrapper
           contextValue={contextValue}
-          store={mockStore({
-            ...storeMocks.viewOtherProfile,
-            profilePage: {
-              ...storeMocks.viewOtherProfile.profilePage,
-              account: {
-                ...storeMocks.viewOtherProfile.profilePage.account,
-                name: 'Verified User',
-                country: 'US',
-                bio: 'About me',
-                courseCertificates: [{ title: 'Course 1' }],
-                levelOfEducation: 'bachelors',
-                languageProficiencies: [{ code: 'en' }],
-                socialLinks: [{ platform: 'twitter', socialLink: 'https://twitter.com/user' }],
-              },
-              preferences: {
-                ...storeMocks.viewOtherProfile.profilePage.preferences,
-                visibilityName: 'all_users',
-                visibilityCountry: 'all_users',
-                visibilityLevelOfEducation: 'all_users',
-                visibilityLanguageProficiencies: 'all_users',
-                visibilitySocialLinks: 'all_users',
-                visibilityBio: 'all_users',
-              },
-            },
-          })}
-          params={{ username: 'verified' }}
+          store={mockStore(storeMocks.viewOtherProfile)}
+          params={{ username: 'verified' }} // Override default params
         />
       );
-      const { container: tree } = render(component);
+      const tree = renderer.create(component).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('while saving an edited bio', () => {
+      const contextValue = {
+        authenticatedUser: { userId: 123, username: 'staff', administrator: true },
+        config: getConfig(),
+      };
+      const component = (
+        <ProfilePageWrapper
+          contextValue={contextValue}
+          store={mockStore(storeMocks.savingEditedBio)}
+        />
+      );
+      const tree = renderer.create(component).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('while saving an edited bio with error', () => {
+      const storeData = JSON.parse(JSON.stringify(storeMocks.savingEditedBio));
+      storeData.profilePage.errors.bio = { userMessage: 'bio error' };
+      const contextValue = {
+        authenticatedUser: { userId: 123, username: 'staff', administrator: true },
+        config: getConfig(),
+      };
+      const component = (
+        <ProfilePageWrapper
+          contextValue={contextValue}
+          store={mockStore(storeData)}
+        />
+      );
+      const tree = renderer.create(component).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('test country edit with error', () => {
+      const storeData = JSON.parse(JSON.stringify(storeMocks.savingEditedBio));
+      storeData.profilePage.errors.country = { userMessage: 'country error' };
+      storeData.profilePage.currentlyEditingField = 'country';
+      const contextValue = {
+        authenticatedUser: { userId: 123, username: 'staff', administrator: true },
+        config: getConfig(),
+      };
+      const component = (
+        <ProfilePageWrapper
+          contextValue={contextValue}
+          store={mockStore(storeData)}
+        />
+      );
+      const tree = renderer.create(component).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('test education edit with error', () => {
+      const storeData = JSON.parse(JSON.stringify(storeMocks.savingEditedBio));
+      storeData.profilePage.errors.levelOfEducation = { userMessage: 'education error' };
+      storeData.profilePage.currentlyEditingField = 'levelOfEducation';
+      const contextValue = {
+        authenticatedUser: { userId: 123, username: 'staff', administrator: true },
+        config: getConfig(),
+      };
+      const component = (
+        <ProfilePageWrapper
+          contextValue={contextValue}
+          store={mockStore(storeData)}
+        />
+      );
+      const tree = renderer.create(component).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('test preferreded language edit with error', () => {
+      const storeData = JSON.parse(JSON.stringify(storeMocks.savingEditedBio));
+      storeData.profilePage.errors.languageProficiencies = { userMessage: 'preferred language error' };
+      storeData.profilePage.currentlyEditingField = 'languageProficiencies';
+      const contextValue = {
+        authenticatedUser: { userId: 123, username: 'staff', administrator: true },
+        config: getConfig(),
+      };
+      const component = (
+        <ProfilePageWrapper
+          contextValue={contextValue}
+          store={mockStore(storeData)}
+        />
+      );
+      const tree = renderer.create(component).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
@@ -192,27 +230,41 @@ describe('<ProfilePage />', () => {
           store={mockStore(storeMocks.viewOwnProfile)}
         />
       );
-      const { container: tree } = render(component);
+      const tree = renderer.create(component).toJSON();
       expect(tree).toMatchSnapshot();
     });
-
-    it('successfully redirected to not found page', () => {
+    it('test age message alert', () => {
+      const storeData = JSON.parse(JSON.stringify(storeMocks.viewOwnProfile));
+      storeData.userAccount.requiresParentalConsent = true;
+      storeData.profilePage.account.requiresParentalConsent = true;
       const contextValue = {
         authenticatedUser: { userId: 123, username: 'staff', administrator: true },
-        config: getConfig(),
+        config: { ...getConfig(), COLLECT_YEAR_OF_BIRTH: true },
       };
-      const navigate = jest.fn();
-      useNavigate.mockReturnValue(navigate);
       const component = (
         <ProfilePageWrapper
           contextValue={contextValue}
-          store={mockStore(storeMocks.invalidUser)}
-          params={{ username: 'staffTest' }}
+          store={mockStore(storeData)}
+          requiresParentalConsent
         />
       );
-      const { container: tree } = render(component);
-      expect(tree).toMatchSnapshot();
-      expect(navigate).toHaveBeenCalledWith('/notfound');
+      const wrapper = mount(component);
+      wrapper.update();
+
+      expect(wrapper.find('.alert-info').hasClass('show')).toBe(true);
+    });
+    it('test photo error alert', () => {
+      const storeData = JSON.parse(JSON.stringify(storeMocks.viewOwnProfile));
+      storeData.profilePage.errors.photo = { userMessage: 'error' };
+      const contextValue = {
+        authenticatedUser: { userId: 123, username: 'staff', administrator: true },
+        config: { ...getConfig(), COLLECT_YEAR_OF_BIRTH: true },
+      };
+      const component = <ProfilePageWrapper contextValue={contextValue} store={mockStore(storeData)} />;
+      const wrapper = mount(component);
+      wrapper.update();
+
+      expect(wrapper.find('.alert-danger').hasClass('show')).toBe(true);
     });
   });
 
@@ -222,38 +274,21 @@ describe('<ProfilePage />', () => {
         authenticatedUser: { userId: 123, username: 'staff', administrator: true },
         config: getConfig(),
       };
-      render(
+      const component = (
         <ProfilePageWrapper
           contextValue={contextValue}
           store={mockStore(storeMocks.loadingApp)}
           params={{ username: 'test-username' }}
-        />,
+        />
       );
+      const wrapper = mount(component);
+      wrapper.update();
 
-      expect(analytics.sendTrackingLogEvent).toHaveBeenCalledTimes(1);
-      expect(analytics.sendTrackingLogEvent).toHaveBeenCalledWith('edx.profile.viewed', {
+      expect(analytics.sendTrackingLogEvent.mock.calls.length).toBe(1);
+      expect(analytics.sendTrackingLogEvent.mock.calls[0][0]).toEqual('edx.profile.viewed');
+      expect(analytics.sendTrackingLogEvent.mock.calls[0][1]).toEqual({
         username: 'test-username',
       });
     });
   });
-
-  describe('handles navigation', () => {
-    it('navigates to notfound on save error with no username', () => {
-      const contextValue = {
-        authenticatedUser: { userId: 123, username: 'staff', administrator: true },
-        config: getConfig(),
-      };
-      const navigate = jest.fn();
-      useNavigate.mockReturnValue(navigate);
-      render(
-        <ProfilePageWrapper
-          contextValue={contextValue}
-          store={mockStore(storeMocks.invalidUser)}
-          params={{ username: 'staffTest' }}
-        />,
-      );
-
-      expect(navigate).toHaveBeenCalledWith('/notfound');
-    });
-  });
 });

src/profile/ProfilePluginPage.jsx

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

src/profile/UserCertificateSummary.jsx

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

src/profile/UsernameDescription.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { VisibilityOff } from '@edx/paragon/icons';
+import { Icon } from '@edx/paragon';
+import { getConfig } from '@edx/frontend-platform';
+
+const UsernameDescription = () => (
+  <div className="d-flex align-items-center mt-3 mb-2rem">
+    <Icon src={VisibilityOff} className="icon-visibility-off" />
+    <div className="username-description">
+      <FormattedMessage
+        id="profile.username.description"
+        defaultMessage="Your profile information is only visible to you. Only your username is visible to others on {siteName}."
+        description="A description of the username field"
+        values={{
+          siteName: getConfig().SITE_NAME,
+        }}
+      />
+    </div>
+  </div>
+);
+
+export default UsernameDescription;

src/profile/__mocks__/invalidUser.mockStore.js

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

src/profile/__mocks__/loadingApp.mockStore.js

@@ -29,7 +29,6 @@ module.exports = {
     drafts: {},
     isLoadingProfile: true,
     isAuthenticatedUserProfile: true,
-    countriesCodesList: ['US', 'CA', 'GB', 'ME']
   },
   router: {
     location: {

src/profile/__mocks__/savingEditedBio.mockStore.js

@@ -125,8 +125,7 @@ module.exports = {
       }
     ],
     drafts: {},
-    isLoadingProfile: false,
-    disabledCountries: [],
+    isLoadingProfile: false
   },
   router: {
     location: {

src/profile/__mocks__/viewOtherProfile.mockStore.js

@@ -81,18 +81,11 @@ module.exports = {
       gender: null,
       accountPrivacy: 'private'
     },
-    preferences: {
-      visibilityName: 'all_users',
-      visibilityCountry: 'all_users',
-      visibilityLevelOfEducation: 'all_users',
-      visibilityLanguageProficiencies: 'all_users',
-      visibilitySocialLinks: 'all_users',
-      visibilityBio: 'all_users'
-    },
+    preferences: {},
     courseCertificates: [],
     drafts: {},
     isLoadingProfile: false,
-    countriesCodesList: ['US', 'CA', 'GB', 'ME']
+    learningGoal: 'advance_career',
   },
   router: {
     location: {

src/profile/__mocks__/viewOwnProfile.mockStore.js

@@ -125,8 +125,7 @@ module.exports = {
       }
     ],
     drafts: {},
-    isLoadingProfile: false,
-    countriesCodesList: ['US', 'CA', 'GB', 'ME']
+    isLoadingProfile: false
   },
   router: {
     location: {

src/profile/data/actions.js

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

src/profile/data/actions.test.js

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

src/profile/data/constants.js

@@ -22,12 +22,7 @@ const SOCIAL = {
   },
 };
 
-const FIELD_LABELS = {
-  COUNTRY: 'country',
-};
-
 export {
   EDUCATION_LEVELS,
   SOCIAL,
-  FIELD_LABELS,
 };

src/profile/data/hooks.js

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

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

@@ -17,10 +17,6 @@ const expectedUserInfo200 = {
   dateJoined: '2017-06-07T00:44:23Z',
   isActive: true,
   yearOfBirth: 1901,
-  languageProficiencies: [],
-  levelOfEducation: null,
-  profileImage: {},
-  socialLinks: [],
 };
 
 const provider = new PactV3({

src/profile/data/reducers.js

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

src/profile/data/reducers.test.js

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

src/profile/data/sagas.js

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

src/profile/data/sagas.test.js

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

src/profile/data/selectors.js

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

src/profile/data/services.js

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

src/profile/data/services.test.js

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

src/profile/forms/Bio.jsx

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

src/profile/forms/Bio.messages.jsx

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

src/profile/forms/Certificates.jsx

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

src/profile/forms/Country.jsx

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

src/profile/forms/Country.messages.jsx

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

src/profile/forms/Education.jsx

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

src/profile/forms/LearningGoal.jsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import get from 'lodash.get';
+
+// Mock Data
+import mockData from '../data/mock_data';
+
+import messages from './LearningGoal.messages';
+
+// Components
+import EditableItemHeader from './elements/EditableItemHeader';
+import SwitchContent from './elements/SwitchContent';
+
+// Selectors
+import { editableFormSelector } from '../data/selectors';
+
+const LearningGoal = (props) => {
+  let { learningGoal, editMode, visibilityLearningGoal } = props;
+  const { intl } = props;
+
+  if (!learningGoal) {
+    learningGoal = mockData.learningGoal;
+  }
+
+  if (!editMode || editMode === 'empty') { // editMode defaults to 'empty', not sure why yet
+    editMode = mockData.editMode;
+  }
+
+  if (!visibilityLearningGoal) {
+    visibilityLearningGoal = mockData.visibilityLearningGoal;
+  }
+
+  return (
+    <SwitchContent
+      className="mb-5"
+      expression={editMode}
+      cases={{
+        editable: (
+          <>
+            <EditableItemHeader
+              content={intl.formatMessage(messages['profile.learningGoal.learningGoal'])}
+              showVisibility={visibilityLearningGoal !== null}
+              visibility={visibilityLearningGoal}
+            />
+            <p data-hj-suppress className="lead">
+              {intl.formatMessage(get(
+                messages,
+                `profile.learningGoal.options.${learningGoal}`,
+                messages['profile.learningGoal.options.something_else'],
+              ))}
+            </p>
+          </>
+        ),
+        static: (
+          <>
+            <EditableItemHeader content={intl.formatMessage(messages['profile.learningGoal.learningGoal'])} />
+            <p data-hj-suppress className="lead">
+              {intl.formatMessage(get(
+                messages,
+                `profile.learningGoal.options.${learningGoal}`,
+                messages['profile.learningGoal.options.something_else'],
+              ))}
+            </p>
+          </>
+        ),
+      }}
+    />
+  );
+};
+
+LearningGoal.propTypes = {
+  // From Selector
+  learningGoal: PropTypes.oneOf(['advance_career', 'start_career', 'learn_something_new', 'something_else']),
+  visibilityLearningGoal: PropTypes.oneOf(['private', 'all_users']),
+  editMode: PropTypes.oneOf(['editable', 'static']),
+
+  // i18n
+  intl: intlShape.isRequired,
+};
+
+LearningGoal.defaultProps = {
+  editMode: 'static',
+  learningGoal: null,
+  visibilityLearningGoal: 'private',
+};
+
+export default connect(
+  editableFormSelector,
+  {},
+)(injectIntl(LearningGoal));

src/profile/forms/LearningGoal.messages.jsx

@@ -0,0 +1,31 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  'profile.learningGoal.learningGoal': {
+    id: 'profile.learningGoal.learningGoal',
+    defaultMessage: 'Learning Goal',
+    description: 'A section of a user profile that displays their current learning goal.',
+  },
+  'profile.learningGoal.options.start_career': {
+    id: 'profile.learningGoal.options.start_career',
+    defaultMessage: 'I want to start my career',
+    description: 'Selected by user if their goal is to start their career.',
+  },
+  'profile.learningGoal.options.advance_career': {
+    id: 'profile.learningGoal.options.advance_career',
+    defaultMessage: 'I want to advance my career',
+    description: 'Selected by user if their goal is to advance their career.',
+  },
+  'profile.learningGoal.options.learn_something_new': {
+    id: 'profile.learningGoal.options.learn_something_new',
+    defaultMessage: 'I want to learn something new',
+    description: 'Selected by user if their goal is to learn something new.',
+  },
+  'profile.learningGoal.options.something_else': {
+    id: 'profile.learningGoal.options.something_else',
+    defaultMessage: 'Something else',
+    description: 'Selected by user if their goal is not described by the other choices.',
+  },
+});
+
+export default messages;

src/profile/forms/LearningGoal.test.jsx

@@ -0,0 +1,122 @@
+import PropTypes from 'prop-types';
+import React, { useMemo } from 'react';
+import { Provider } from 'react-redux';
+import renderer from 'react-test-renderer';
+import configureMockStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import { configure as configureI18n, IntlProvider } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
+import { AppContext } from '@edx/frontend-platform/react';
+import messages from '../../i18n';
+
+import viewOwnProfileMockStore from '../__mocks__/viewOwnProfile.mockStore';
+import savingEditedBioMockStore from '../__mocks__/savingEditedBio.mockStore';
+
+import LearningGoal from './LearningGoal';
+
+const mockStore = configureMockStore([thunk]);
+
+// props to be passed down to LearningGoal component
+const requiredLearningGoalProps = {
+  formId: 'learningGoal',
+  learningGoal: 'advance_career',
+  drafts: {},
+  visibilityLearningGoal: 'private',
+  editMode: 'static',
+  saveState: null,
+  error: null,
+  openHandler: jest.fn(),
+};
+
+configureI18n({
+  loggingService: { logError: jest.fn() },
+  config: {
+    ENVIRONMENT: 'production',
+    LANGUAGE_PREFERENCE_COOKIE_NAME: 'yum',
+  },
+  messages,
+});
+
+const LearningGoalWrapper = (props) => {
+  const contextValue = useMemo(() => ({
+    authenticatedUser: { userId: null, username: null, administrator: false },
+    config: getConfig(),
+  }), []);
+  return (
+    <AppContext.Provider
+      value={contextValue}
+    >
+      <IntlProvider locale="en">
+        <Provider store={props.store}>
+          <LearningGoal {...props} />
+        </Provider>
+      </IntlProvider>
+    </AppContext.Provider>
+  );
+};
+
+LearningGoalWrapper.defaultProps = {
+  store: mockStore(viewOwnProfileMockStore),
+};
+
+LearningGoalWrapper.propTypes = {
+  store: PropTypes.shape({}),
+};
+
+const LearningGoalWrapperWithStore = ({ store }) => {
+  const contextValue = useMemo(() => ({
+    authenticatedUser: { userId: null, username: null, administrator: false },
+    config: getConfig(),
+  }), []);
+  return (
+    <AppContext.Provider
+      value={contextValue}
+    >
+      <IntlProvider locale="en">
+        <Provider store={mockStore(store)}>
+          <LearningGoal {...requiredLearningGoalProps} formId="learningGoal" />
+        </Provider>
+      </IntlProvider>
+    </AppContext.Provider>
+  );
+};
+
+LearningGoalWrapperWithStore.defaultProps = {
+  store: mockStore(savingEditedBioMockStore),
+};
+
+LearningGoalWrapperWithStore.propTypes = {
+  store: PropTypes.shape({}),
+};
+
+describe('<LearningGoal />', () => {
+  describe('renders the current learning goal', () => {
+    it('renders "I want to advance my career"', () => {
+      const learningGoalRenderer = renderer.create(
+        <LearningGoalWrapper
+          {...requiredLearningGoalProps}
+          formId="learningGoal"
+        />,
+      );
+
+      const learningGoalInstance = learningGoalRenderer.root;
+
+      expect(learningGoalInstance.findByProps({ className: 'lead' }).children).toEqual(['I want to advance my career']);
+    });
+
+    it('renders "Something else"', () => {
+      requiredLearningGoalProps.learningGoal = 'something_else';
+
+      const learningGoalRenderer = renderer.create(
+        <LearningGoalWrapper
+          {...requiredLearningGoalProps}
+          formId="learningGoal"
+        />,
+      );
+
+      const learningGoalInstance = learningGoalRenderer.root;
+
+      expect(learningGoalInstance.findByProps({ className: 'lead' }).children).toEqual(['Something else']);
+    });
+  });
+});