chore: update browserslist DB (#1334)

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

.env

@@ -29,3 +29,6 @@ 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

@@ -30,3 +30,6 @@ 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

@@ -25,3 +25,5 @@ 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=''

.github/CODEOWNERS

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

.github/pull_request_template.md

@@ -20,5 +20,5 @@ Include a link to the sandbox for design changes or screenshot for before and af
 
 #### Post-merge Checklist
 
-* [ ] Deploy the changes to prod after verifying on stage or ask **@openedx/2u-infinity** to do it. 
+* [ ] Deploy the changes to prod after verifying on stage or ask **@jacobo-dominguez-wgu** to do it. 
 * [ ] 🎉 🙌 Celebrate! Thanks for your contribution.

.nvmrc

@@ -1 +1 @@
-20
+24

README.rst

@@ -32,44 +32,52 @@ When a user views someone else's profile, they see all those fields that that us
 Getting Started
 ***************
 
-Installation
-============
+Prerequisites
+=============
 
-Follow these steps to provision, run, and enable an instance of the
-Profile MFE for local development via the `devstack`_.
+The Tutor_ platform is a prerequisite for developing an MFE.
+Utilize `relevant tutor-mfe documentation`_ to guide you through
+the process of MFE development within the Tutor environment.
 
-.. _devstack: https://github.com/openedx/devstack#getting-started
+.. _Tutor: https://github.com/overhangio/tutor
 
-#. To use this application, `devstack <https://github.com/openedx/devstack>`__ must be running and you must be logged into it.
+.. _relevant tutor-mfe documentation: https://github.com/overhangio/tutor-mfe#mfe-development
 
-   * Start devstack
-   * Log in (http://localhost:18000/login)
 
-#. To run Profile, install requirements and start the development server by running:
+Cloning and Startup
+===================
 
-.. code-block::
+1. Clone the repo:
 
-  1. Clone your new repo:
+  ``git clone https://github.com/openedx/frontend-app-profile.git``
 
-    ``git clone https://github.com/openedx/frontend-app-profile.git``
+2. Use the version of node in the `.nvmrc` file.
 
-  2. Use node v18.x.
+  The current version of the micro-frontend build scripts support the version of node found in `.nvmrc`.
+  Using other major versions of node *may* work, but this is unsupported.  For
+  convenience, this repository includes an .nvmrc file to help in setting the
+  correct node version via `nvm <https://github.com/nvm-sh/nvm>`_.
 
-    The current version of the micro-frontend build scripts support node 18.
-    Using other major versions of node *may* work, but this is unsupported.  For
-    convenience, this repository includes an .nvmrc file to help in setting the
-    correct node version via `nvm <https://github.com/nvm-sh/nvm>`_.
+3. Install npm dependencies:
 
-  3. Install npm dependencies:
+  ``cd frontend-app-profile && npm ci``
 
-    ``cd frontend-app-profile && npm ci``
+4. Mount the frontend-app-profile MFE in Tutor:
 
-  4. Start the dev server:
+  ``tutor mounts add <your-tutor-project-dir>/frontend-app-profile``
+5. Build the Docker image:
 
-    ``npm start``
-     The server will run on port 1995
+  ``tutor images build profile-dev``
 
-Once the dev server is up, visit http://localhost:1995/u/staff.
+6. Launch the development server with Tutor:
+
+  ``tutor dev start profile``
+
+
+The dev server is running at `http://localhost:1995/u/staff <http://localhost:1995/u/staff>`_.
+
+`Tutor <https://github.com/overhangio/tutor>`_. If you start Tutor with ``tutor dev start profile``
+that should give you everything you need as a companion to this frontend.
 
 Plugins
 =======

catalog-info.yaml

@@ -19,7 +19,7 @@ metadata:
     openedx.org/add-to-projects: "openedx:23"
     openedx.org/release: "master"
 spec:
-  owner: group:2u-infinity
+  owner: jacobo-dominguez-wgu
   type: 'service'
   lifecycle: 'production'
 # (Optional) An array of different components or resources.

package.json

@@ -14,6 +14,7 @@
     "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"
   },
@@ -29,50 +30,49 @@
   ],
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-component-header": "^5.6.0",
-    "@edx/frontend-platform": "8.3.1",
-    "@edx/openedx-atlas": "^0.6.0",
+    "@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.2",
-    "@openedx/frontend-slot-footer": "^1.0.2",
-    "@openedx/paragon": "^22.2.2",
+    "@fortawesome/react-fontawesome": "0.2.6",
+    "@openedx/frontend-plugin-framework": "^1.7.0",
+    "@openedx/paragon": "^23.4.5",
     "@pact-foundation/pact": "^11.0.2",
     "@redux-devtools/extension": "3.3.0",
     "classnames": "2.5.1",
-    "core-js": "3.40.0",
+    "core-js": "3.48.0",
     "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": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "react-helmet": "6.1.0",
     "react-redux": "7.2.9",
-    "react-router": "6.29.0",
-    "react-router-dom": "6.29.0",
+    "react-router": "6.30.3",
+    "react-router-dom": "6.30.3",
     "redux": "4.2.1",
     "redux-logger": "3.0.6",
-    "redux-saga": "1.3.0",
+    "redux-saga": "1.4.2",
     "redux-thunk": "2.4.2",
     "regenerator-runtime": "0.14.1",
     "reselect": "5.1.1",
     "universal-cookie": "4.0.4"
   },
   "devDependencies": {
-    "@commitlint/cli": "19.8.0",
-    "@commitlint/config-angular": "19.8.0",
+    "@commitlint/cli": "19.8.1",
+    "@commitlint/config-angular": "19.8.1",
     "@edx/browserslist-config": "^1.1.1",
-    "@edx/reactifex": "2.2.0",
-    "@openedx/frontend-build": "14.3.2",
-    "@testing-library/jest-dom": "6.6.3",
-    "@testing-library/react": "12.1.5",
-    "glob": "11.0.1",
-    "reactifex": "1.1.1",
+    "@openedx/frontend-build": "^14.6.2",
+    "@testing-library/jest-dom": "6.9.1",
+    "@testing-library/react": "14.3.1",
+    "glob": "11.1.0",
     "redux-mock-store": "1.5.5"
   }
 }

src/data/reducers.js

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

src/data/sagas.js

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

src/head/Head.jsx

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

src/index.jsx

@@ -14,21 +14,24 @@ import {
 } from '@edx/frontend-platform/react';
 
 import React from 'react';
-import ReactDOM from 'react-dom';
+// eslint-disable-next-line import/no-unresolved
+import { createRoot } from 'react-dom/client';
 
 import Header from '@edx/frontend-component-header';
-import FooterSlot from '@openedx/frontend-slot-footer';
+import { FooterSlot } 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';
 
-subscribe(APP_READY, () => {
-  ReactDOM.render(
+import './index.scss';
+
+const rootNode = createRoot(document.getElementById('root'));
+subscribe(APP_READY, async () => {
+  rootNode.render(
     <AppProvider store={configureStore()}>
       <Head />
       <Header />
@@ -42,7 +45,7 @@ subscribe(APP_READY, () => {
 });
 
 subscribe(APP_INIT_ERROR, (error) => {
-  ReactDOM.render(<ErrorPage message={error.message} />, document.getElementById('root'));
+  rootNode.render(<ErrorPage message={error.message} />, document.getElementById('root'));
 });
 
 initialize({
@@ -53,6 +56,7 @@ 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,8 +1,6 @@
-@import "~@edx/brand/paragon/fonts";
-@import "~@edx/brand/paragon/variables";
-@import "~@openedx/paragon/scss/core/core";
-@import "~@edx/brand/paragon/overrides";
+@use "@openedx/paragon/styles/css/core/custom-media-breakpoints" as paragonCustomMediaBreakpoints;
+
 @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,7 +36,11 @@
           "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

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

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

@@ -0,0 +1,37 @@
+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,12 +1,15 @@
 # Footer Slot
 
-### Slot ID: `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-slot-footer` repository](https://github.com/openedx/frontend-slot-footer/).
+The implementation of the `FooterSlot` component lives in [the `frontend-component-footer` repository](https://github.com/openedx/frontend-component-footer/).
 
 ## Example
 
@@ -23,7 +26,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    footer_slot: {
+    'org.openedx.frontend.layout.footer.v1': {
       plugins: [
         {
           // Hide the default footer

src/plugin-slots/README.md

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

src/profile/AgeMessage.jsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Alert } from '@openedx/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">
-      <FormattedMessage
-        id="profile.age.cannotShare"
-        defaultMessage="Your profile cannot be shared."
-        description="Error message indicating that the user's profile cannot be shared"
-      />
-    </Alert.Heading>
-    <FormattedMessage
-      id="profile.age.details"
-      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

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

src/profile/CertificateCard.jsx

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

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

src/profile/DateJoined.jsx

@@ -1,23 +1,21 @@
-import React from 'react';
+import React, { memo } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage, FormattedDate } from '@edx/frontend-platform/i18n';
 
 const DateJoined = ({ date }) => {
-  if (date == null) {
-    return null;
-  }
+  if (!date) { return null; }
 
   return (
-    <p className="mb-0">
+    <span className="small mb-0 text-gray-800">
       <FormattedMessage
         id="profile.datejoined.member.since"
         defaultMessage="Member since {year}"
         description="A label for how long the user has been a member"
         values={{
-          year: <FormattedDate value={new Date(date)} year="numeric" />,
+          year: <span className="font-weight-bold"> <FormattedDate value={new Date(date)} year="numeric" /> </span>,
         }}
       />
-    </p>
+    </span>
   );
 };
 
@@ -28,4 +26,4 @@ DateJoined.defaultProps = {
   date: null,
 };
 
-export default DateJoined;
+export default memo(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" style={{ maxWidth: '32em' }}>
+    <p className="my-0 py-5 text-muted max-width-32em">
       <FormattedMessage
         id="profile.notfound.message"
         defaultMessage="The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again."

src/profile/PageLoading.jsx

@@ -1,37 +1,18 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 
-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>
+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>}
       </div>
-    );
-  }
-}
+    </div>
+  </div>
+);
 
 PageLoading.propTypes = {
   srMessage: PropTypes.string.isRequired,
 };
+
+export default PageLoading;

src/profile/ProfilePage.jsx

@@ -1,14 +1,20 @@
-import React from 'react';
+import React, {
+  useEffect, useState, useContext, useCallback,
+} from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
 
 import { sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
-import { ensureConfig, getConfig } from '@edx/frontend-platform';
+import { ensureConfig } from '@edx/frontend-platform';
 import { AppContext } from '@edx/frontend-platform/react';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Alert, Hyperlink } from '@openedx/paragon';
+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';
 
-// Actions
 import {
   fetchProfile,
   saveProfile,
@@ -19,7 +25,6 @@ import {
   updateDraft,
 } from './data/actions';
 
-// Components
 import ProfileAvatar from './forms/ProfileAvatar';
 import Name from './forms/Name';
 import Country from './forms/Country';
@@ -27,120 +32,124 @@ 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 UsernameDescription from './UsernameDescription';
+import UserCertificateSummary from './UserCertificateSummary';
 import PageLoading from './PageLoading';
-import Banner from './Banner';
-import LearningGoal from './forms/LearningGoal';
+import Certificates from './Certificates';
 
-// Selectors
 import { profilePageSelector } from './data/selectors';
-
-// i18n
 import messages from './ProfilePage.messages';
-
 import withParams from '../utils/hoc';
+import { useIsOnMobileScreen, useIsOnTabletScreen } from './data/hooks';
 
-ensureConfig(['CREDENTIALS_BASE_URL', 'LMS_BASE_URL'], 'ProfilePage');
+import AdditionalProfileFieldsSlot from '../plugin-slots/AdditionalProfileFieldsSlot';
 
-class ProfilePage extends React.Component {
-  constructor(props, context) {
-    super(props, context);
+ensureConfig(['CREDENTIALS_BASE_URL', 'LMS_BASE_URL', 'ACCOUNT_SETTINGS_URL'], 'ProfilePage');
 
-    const credentialsBaseUrl = context.config.CREDENTIALS_BASE_URL;
-    this.state = {
-      viewMyRecordsUrl: credentialsBaseUrl ? `${credentialsBaseUrl}/records` : null,
-      accountSettingsUrl: context.config.ACCOUNT_SETTINGS_URL,
-    };
+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);
 
-    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);
-  }
+  const navigate = useNavigate();
+  const [viewMyRecordsUrl, setViewMyRecordsUrl] = useState(null);
+  const isMobileView = useIsOnMobileScreen();
+  const isTabletView = useIsOnTabletScreen();
 
-  componentDidMount() {
-    this.props.fetchProfile(this.props.params.username);
+  useEffect(() => {
+    const { CREDENTIALS_BASE_URL } = context.config;
+    if (CREDENTIALS_BASE_URL) {
+      setViewMyRecordsUrl(`${CREDENTIALS_BASE_URL}/records`);
+    }
+
+    dispatch(fetchProfile(params.username));
     sendTrackingLogEvent('edx.profile.viewed', {
-      username: this.props.params.username,
+      username: params.username,
     });
-  }
+  }, [dispatch, params.username, context.config]);
 
-  handleSaveProfilePhoto(formData) {
-    this.props.saveProfilePhoto(this.context.authenticatedUser.username, formData);
-  }
+  useEffect(() => {
+    if (!username && saveState === 'error' && navigate) {
+      navigate('/notfound');
+    }
+  }, [username, saveState, navigate]);
 
-  handleDeleteProfilePhoto() {
-    this.props.deleteProfilePhoto(this.context.authenticatedUser.username);
-  }
+  const authenticatedUserName = context.authenticatedUser.username;
 
-  handleClose(formId) {
-    this.props.closeForm(formId);
-  }
+  const handleSaveProfilePhoto = useCallback((formData) => {
+    dispatch(saveProfilePhoto(authenticatedUserName, formData));
+  }, [dispatch, authenticatedUserName]);
 
-  handleOpen(formId) {
-    this.props.openForm(formId);
-  }
+  const handleDeleteProfilePhoto = useCallback(() => {
+    dispatch(deleteProfilePhoto(authenticatedUserName));
+  }, [dispatch, authenticatedUserName]);
 
-  handleSubmit(formId) {
-    this.props.saveProfile(formId, this.context.authenticatedUser.username);
-  }
+  const handleClose = useCallback((formId) => {
+    dispatch(closeForm(formId));
+  }, [dispatch]);
 
-  handleChange(name, value) {
-    this.props.updateDraft(name, value);
-  }
+  const handleOpen = useCallback((formId) => {
+    dispatch(openForm(formId));
+  }, [dispatch]);
 
-  isYOBDisabled() {
-    const { yearOfBirth } = this.props;
-    const currentYear = new Date().getFullYear();
-    const isAgeOrNotCompliant = !yearOfBirth || ((currentYear - yearOfBirth) < 13);
+  const handleSubmit = useCallback((formId) => {
+    dispatch(saveProfile(formId, authenticatedUserName));
+  }, [dispatch, authenticatedUserName]);
 
-    return isAgeOrNotCompliant && getConfig().COLLECT_YEAR_OF_BIRTH !== 'true';
-  }
+  const handleChange = useCallback((fieldName, value) => {
+    dispatch(updateDraft(fieldName, value));
+  }, [dispatch]);
 
-  isAuthenticatedUserProfile() {
-    return this.props.params.username === this.context.authenticatedUser.username;
-  }
+  const isAuthenticatedUserProfile = () => params.username === authenticatedUserName;
 
-  // Inserted into the DOM in two places (for responsive layout)
-  renderViewMyRecordsButton() {
-    if (!(this.state.viewMyRecordsUrl && this.isAuthenticatedUserProfile())) {
+  const isBlockVisible = (blockInfo) => isAuthenticatedUserProfile()
+      || (!isAuthenticatedUserProfile() && Boolean(blockInfo));
+
+  const renderViewMyRecordsButton = () => {
+    if (!(viewMyRecordsUrl && isAuthenticatedUserProfile())) {
       return null;
     }
 
     return (
-      <Hyperlink className="btn btn-primary" destination={this.state.viewMyRecordsUrl} target="_blank">
-        {this.props.intl.formatMessage(messages['profile.viewMyRecords'])}
+      <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>
     );
-  }
+  };
 
-  // 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 text-truncate">{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 (
+  const renderPhotoUploadErrorMessage = () => (
+    photoUploadError && (
       <div className="row">
         <div className="col-md-4 col-lg-3">
           <Alert variant="danger" dismissible={false} show>
@@ -148,227 +157,270 @@ class ProfilePage extends React.Component {
           </Alert>
         </div>
       </div>
-    );
-  }
+    )
+  );
 
-  renderAgeMessage() {
-    const { requiresParentalConsent } = this.props;
-    const shouldShowAgeMessage = requiresParentalConsent && this.isAuthenticatedUserProfile();
+  const commonFormProps = {
+    openHandler: handleOpen,
+    closeHandler: handleClose,
+    submitHandler: handleSubmit,
+    changeHandler: handleChange,
+  };
 
-    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,
-      courseCertificates,
-      visibilityCourseCertificates,
-      bio,
-      visibilityBio,
-      requiresParentalConsent,
-      isLoadingProfile,
-      username,
-      saveState,
-      navigate,
-    } = this.props;
-
-    if (isLoadingProfile) {
-      return <PageLoading srMessage={this.props.intl.formatMessage(messages['profile.loading'])} />;
-    }
-
-    if (!username && saveState === 'error' && navigate) {
-      navigate('/notfound');
-    }
-
-    const commonFormProps = {
-      openHandler: this.handleOpen,
-      closeHandler: this.handleClose,
-      submitHandler: this.handleSubmit,
-      changeHandler: this.handleChange,
-    };
-
-    const isBlockVisible = (blockInfo) => this.isAuthenticatedUserProfile()
-      || (!this.isAuthenticatedUserProfile() && Boolean(blockInfo));
-
-    const isLanguageBlockVisible = isBlockVisible(languageProficiencies.length);
-    const isEducationBlockVisible = isBlockVisible(levelOfEducation);
-    const isSocialLinksBLockVisible = isBlockVisible(socialLinks.some((link) => link.socialLink !== null));
-    const isBioBlockVisible = isBlockVisible(bio);
-    const isCertificatesBlockVisible = isBlockVisible(courseCertificates.length);
-    const isNameBlockVisible = isBlockVisible(name);
-    const isLocationBlockVisible = isBlockVisible(country);
-
-    return (
-      <div className="container-fluid">
-        <div className="row align-items-center pt-4 mb-4 pt-md-0 mb-md-0">
-          <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}
-              />
+  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>
             </div>
           </div>
-          <div className="col">
-            <div className="d-md-none">
-              {this.renderHeadingLockup()}
-            </div>
-            <div className="d-none d-md-block float-right">
-              {this.renderViewMyRecordsButton()}
-            </div>
-          </div>
-        </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>
-            {isNameBlockVisible && (
-              <Name
-                name={name}
-                visibilityName={visibilityName}
-                formId="name"
-                {...commonFormProps}
-              />
-            )}
-            {isLocationBlockVisible && (
-              <Country
-                country={country}
-                visibilityCountry={visibilityCountry}
-                formId="country"
-                {...commonFormProps}
-              />
-            )}
-            {isLanguageBlockVisible && (
-              <PreferredLanguage
-                languageProficiencies={languageProficiencies}
-                visibilityLanguageProficiencies={visibilityLanguageProficiencies}
-                formId="languageProficiencies"
-                {...commonFormProps}
-              />
-            )}
-            {isEducationBlockVisible && (
-              <Education
-                levelOfEducation={levelOfEducation}
-                visibilityLevelOfEducation={visibilityLevelOfEducation}
-                formId="levelOfEducation"
-                {...commonFormProps}
-              />
-            )}
-            {isSocialLinksBLockVisible && (
-              <SocialLinks
-                socialLinks={socialLinks}
-                draftSocialLinksByPlatform={draftSocialLinksByPlatform}
-                visibilitySocialLinks={visibilitySocialLinks}
-                formId="socialLinks"
-                {...commonFormProps}
-              />
-            )}
-          </div>
-          <div className="pt-md-3 col-md-8 col-lg-7 offset-lg-1">
-            {!this.isYOBDisabled() && this.renderAgeMessage()}
-            {isBioBlockVisible && (
-              <Bio
-                bio={bio}
-                visibilityBio={visibilityBio}
-                formId="bio"
-                {...commonFormProps}
-              />
-            )}
-            {getConfig().ENABLE_SKILLS_BUILDER_PROFILE && (
-              <LearningGoal
-                learningGoal={learningGoal}
-                visibilityLearningGoal={visibilityLearningGoal}
-                formId="learningGoal"
-                {...commonFormProps}
-              />
-            )}
-            {isCertificatesBlockVisible && (
-              <Certificates
-                visibilityCourseCertificates={visibilityCourseCertificates}
-                formId="certificates"
-                {...commonFormProps}
-              />
-            )}
-          </div>
-        </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}
+                  />
+                  )}
 
-  render() {
-    return (
-      <div className="profile-page">
-        <Banner />
-        {this.renderContent()}
-      </div>
-    );
-  }
-}
+                  <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}
+                  />
+                  )}
 
-ProfilePage.contextType = AppContext;
+                  {isBlockVisible((socialLinks || []).some((link) => link?.socialLink !== null)) && (
+                  <SocialLinks
+                    socialLinks={socialLinks || []}
+                    draftSocialLinksByPlatform={draftSocialLinksByPlatform || {}}
+                    visibilitySocialLinks={visibilitySocialLinks}
+                    formId="socialLinks"
+                    {...commonFormProps}
+                  />
+                  )}
+                </div>
+              </div>
+            </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>
+        </>
+      )}
+    </div>
+  );
+};
 
 ProfilePage.propTypes = {
-  // Account data
+  params: PropTypes.shape({
+    username: PropTypes.string.isRequired,
+  }).isRequired,
   requiresParentalConsent: PropTypes.bool,
   dateJoined: PropTypes.string,
   username: PropTypes.string,
-
-  // Bio form data
   bio: PropTypes.string,
-  yearOfBirth: PropTypes.number,
-  visibilityBio: PropTypes.string.isRequired,
-
-  // Certificates form data
+  visibilityBio: PropTypes.string,
   courseCertificates: PropTypes.arrayOf(PropTypes.shape({
     title: PropTypes.string,
   })),
-  visibilityCourseCertificates: PropTypes.string.isRequired,
-
-  // Country form data
   country: PropTypes.string,
-  visibilityCountry: PropTypes.string.isRequired,
-
-  // Education form data
+  visibilityCountry: PropTypes.string,
   levelOfEducation: PropTypes.string,
-  visibilityLevelOfEducation: PropTypes.string.isRequired,
-
-  // Language proficiency form data
+  visibilityLevelOfEducation: PropTypes.string,
   languageProficiencies: PropTypes.arrayOf(PropTypes.shape({
     code: PropTypes.string.isRequired,
   })),
-  visibilityLanguageProficiencies: PropTypes.string.isRequired,
-
-  // Name form data
+  visibilityLanguageProficiencies: PropTypes.string,
   name: PropTypes.string,
-  visibilityName: PropTypes.string.isRequired,
-
-  // Social links form data
+  visibilityName: PropTypes.string,
   socialLinks: PropTypes.arrayOf(PropTypes.shape({
     platform: PropTypes.string,
     socialLink: PropTypes.string,
@@ -377,41 +429,15 @@ ProfilePage.propTypes = {
     platform: PropTypes.string,
     socialLink: PropTypes.string,
   })),
-  visibilitySocialLinks: PropTypes.string.isRequired,
-
-  // Learning Goal form data
-  learningGoal: PropTypes.string,
-  visibilityLearningGoal: PropTypes.string.isRequired,
-
-  // Other data we need
+  visibilitySocialLinks: PropTypes.string,
   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.isRequired,
-
-  // Page state helpers
+  isLoadingProfile: PropTypes.bool,
   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,
-  navigate: PropTypes.func.isRequired,
-
-  // Router
-  params: PropTypes.shape({
-    username: PropTypes.string.isRequired,
-  }).isRequired,
-
-  // i18n
-  intl: intlShape.isRequired,
 };
 
 ProfilePage.defaultProps = {
@@ -421,28 +447,22 @@ ProfilePage.defaultProps = {
   photoUploadError: {},
   profileImage: {},
   name: null,
-  yearOfBirth: null,
   levelOfEducation: null,
   country: null,
   socialLinks: [],
   draftSocialLinksByPlatform: {},
   bio: null,
-  learningGoal: null,
   languageProficiencies: [],
-  courseCertificates: null,
+  courseCertificates: [],
   requiresParentalConsent: null,
   dateJoined: null,
+  visibilityName: null,
+  visibilityCountry: null,
+  visibilityLevelOfEducation: null,
+  visibilitySocialLinks: null,
+  visibilityLanguageProficiencies: null,
+  visibilityBio: null,
+  isLoadingProfile: false,
 };
 
-export default connect(
-  profilePageSelector,
-  {
-    fetchProfile,
-    saveProfilePhoto,
-    deleteProfilePhoto,
-    saveProfile,
-    openForm,
-    closeForm,
-    updateDraft,
-  },
-)(injectIntl(withParams(ProfilePage)));
+export default withParams(ProfilePage);

src/profile/ProfilePage.messages.jsx

@@ -11,6 +11,16 @@ 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,4 +1,3 @@
-/* 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';
@@ -9,31 +8,38 @@ import PropTypes from 'prop-types';
 import { Provider } from 'react-redux';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
-import { BrowserRouter, useNavigate } from 'react-router-dom';
+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: require('./__mocks__/loadingApp.mockStore'),
-  invalidUser: require('./__mocks__/invalidUser.mockStore'),
-  viewOwnProfile: require('./__mocks__/viewOwnProfile.mockStore'),
-  viewOtherProfile: require('./__mocks__/viewOtherProfile.mockStore'),
-  savingEditedBio: require('./__mocks__/savingEditedBio.mockStore'),
+  loadingApp,
+  viewOwnProfile,
+  viewOtherProfile,
+  invalidUser,
 };
+
 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`,
@@ -65,54 +71,39 @@ configureI18n({
 
 beforeEach(() => {
   analytics.sendTrackingLogEvent.mockReset();
+  useNavigate.mockReset();
 });
 
-const ProfileWrapper = ({ params, requiresParentalConsent }) => {
-  const navigate = useNavigate();
-  return (
-    <ProfilePage
-      {...requiredProfilePageProps}
-      params={params}
-      requiresParentalConsent={requiresParentalConsent}
-      navigate={navigate}
-    />
-  );
-};
-
-ProfileWrapper.propTypes = {
-  params: PropTypes.shape({}).isRequired,
-  requiresParentalConsent: PropTypes.bool.isRequired,
-};
-
 const ProfilePageWrapper = ({
-  contextValue, store, params, requiresParentalConsent,
+  contextValue, store, params,
 }) => (
-  <AppContext.Provider
-    value={contextValue}
-  >
+  <AppContext.Provider value={contextValue}>
     <IntlProvider locale="en">
       <Provider store={store}>
-        <BrowserRouter>
-          <ProfileWrapper
-            params={params}
-            requiresParentalConsent={requiresParentalConsent}
-          />
-        </BrowserRouter>
+        <MemoryRouter initialEntries={[`/profile/${params.username}`]}>
+          <Routes>
+            <Route
+              path="/profile/:username"
+              element={<ProfilePage {...requiredProfilePageProps} params={params} />}
+            />
+          </Routes>
+        </MemoryRouter>
       </Provider>
     </IntlProvider>
   </AppContext.Provider>
 );
 
 ProfilePageWrapper.defaultProps = {
+  // eslint-disable-next-line react/default-props-match-prop-types
   params: { username: 'staff' },
-  requiresParentalConsent: null,
 };
 
 ProfilePageWrapper.propTypes = {
   contextValue: PropTypes.shape({}).isRequired,
   store: PropTypes.shape({}).isRequired,
-  params: PropTypes.shape({}),
-  requiresParentalConsent: PropTypes.bool,
+  params: PropTypes.shape({
+    username: PropTypes.string.isRequired,
+  }).isRequired,
 };
 
 describe('<ProfilePage />', () => {
@@ -122,17 +113,12 @@ 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);
-      expect(tree).toMatchSnapshot();
-    });
-
-    it('successfully redirected to not found page.', () => {
-      const contextValue = {
-        authenticatedUser: { userId: 123, username: 'staff', administrator: true },
-        config: getConfig(),
-      };
-      const component = <ProfilePageWrapper contextValue={contextValue} store={mockStore(storeMocks.invalidUser)} />;
+      const component = (
+        <ProfilePageWrapper
+          contextValue={contextValue}
+          store={mockStore(storeMocks.loadingApp)}
+        />
+      );
       const { container: tree } = render(component);
       expect(tree).toMatchSnapshot();
     });
@@ -142,7 +128,12 @@ describe('<ProfilePage />', () => {
         authenticatedUser: { userId: 123, username: 'staff', administrator: true },
         config: getConfig(),
       };
-      const component = <ProfilePageWrapper contextValue={contextValue} store={mockStore(storeMocks.viewOwnProfile)} />;
+      const component = (
+        <ProfilePageWrapper
+          contextValue={contextValue}
+          store={mockStore(storeMocks.viewOwnProfile)}
+        />
+      );
       const { container: tree } = render(component);
       expect(tree).toMatchSnapshot();
     });
@@ -152,7 +143,6 @@ describe('<ProfilePage />', () => {
         authenticatedUser: { userId: 123, username: 'staff', administrator: true },
         config: getConfig(),
       };
-
       const component = (
         <ProfilePageWrapper
           contextValue={contextValue}
@@ -162,105 +152,26 @@ describe('<ProfilePage />', () => {
               ...storeMocks.viewOtherProfile.profilePage,
               account: {
                 ...storeMocks.viewOtherProfile.profilePage.account,
-                name: 'user',
-                country: 'EN',
-                bio: 'bio',
-                courseCertificates: ['course certificates'],
-                levelOfEducation: 'some level',
-                languageProficiencies: ['some lang'],
-                socialLinks: ['twitter'],
-                timeZone: 'time zone',
-                accountPrivacy: 'all_users',
+                name: 'Verified User',
+                country: 'US',
+                bio: 'About me',
+                courseCertificates: [{ title: 'Course 1' }],
+                levelOfEducation: 'bachelors',
+                languageProficiencies: [{ code: 'en' }],
+                socialLinks: [{ platform: 'x', socialLink: 'https://x.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',
               },
             },
           })}
-          match={{ params: { username: 'verified' } }} // Override default match
-        />
-      );
-      const { container: tree } = render(component);
-      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 { container: tree } = render(component);
-      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 { container: tree } = render(component);
-      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 { container: tree } = render(component);
-      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 { container: tree } = render(component);
-      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)}
+          params={{ username: 'verified' }}
         />
       );
       const { container: tree } = render(component);
@@ -284,40 +195,24 @@ describe('<ProfilePage />', () => {
       const { container: tree } = render(component);
       expect(tree).toMatchSnapshot();
     });
-    it('test age message alert', () => {
-      const storeData = JSON.parse(JSON.stringify(storeMocks.viewOwnProfile));
-      storeData.userAccount.requiresParentalConsent = true;
-      storeData.profilePage.account.requiresParentalConsent = true;
+
+    it('successfully redirected to not found page', () => {
       const contextValue = {
         authenticatedUser: { userId: 123, username: 'staff', administrator: true },
-        config: { ...getConfig(), COLLECT_YEAR_OF_BIRTH: true },
+        config: getConfig(),
       };
-      const { container } = render(
+      const navigate = jest.fn();
+      useNavigate.mockReturnValue(navigate);
+      const component = (
         <ProfilePageWrapper
           contextValue={contextValue}
-          store={mockStore(storeData)}
-          requiresParentalConsent
-        />,
+          store={mockStore(storeMocks.invalidUser)}
+          params={{ username: 'staffTest' }}
+        />
       );
-
-      expect(container.querySelector('.alert-info')).toHaveClass('show');
-    });
-    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 { container } = render(
-        <ProfilePageWrapper
-          contextValue={contextValue}
-          store={mockStore(storeData)}
-          requiresParentalConsent
-        />,
-      );
-
-      expect(container.querySelector('.alert-danger')).toHaveClass('show');
+      const { container: tree } = render(component);
+      expect(tree).toMatchSnapshot();
+      expect(navigate).toHaveBeenCalledWith('/notfound');
     });
   });
 
@@ -335,11 +230,30 @@ describe('<ProfilePage />', () => {
         />,
       );
 
-      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({
+      expect(analytics.sendTrackingLogEvent).toHaveBeenCalledTimes(1);
+      expect(analytics.sendTrackingLogEvent).toHaveBeenCalledWith('edx.profile.viewed', {
         username: 'test-username',
       });
     });
   });
+
+  describe('handles navigation', () => {
+    it('navigates to notfound on save error with no username', () => {
+      const contextValue = {
+        authenticatedUser: { userId: 123, username: 'staff', administrator: true },
+        config: getConfig(),
+      };
+      const navigate = jest.fn();
+      useNavigate.mockReturnValue(navigate);
+      render(
+        <ProfilePageWrapper
+          contextValue={contextValue}
+          store={mockStore(storeMocks.invalidUser)}
+          params={{ username: 'staffTest' }}
+        />,
+      );
+
+      expect(navigate).toHaveBeenCalledWith('/notfound');
+    });
+  });
 });

src/profile/UserCertificateSummary.jsx

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

@@ -1,23 +0,0 @@
-import React from 'react';
-import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { VisibilityOff } from '@openedx/paragon/icons';
-import { Icon } from '@openedx/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

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

src/profile/__mocks__/loadingApp.mockStore.js

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

src/profile/__mocks__/savingEditedBio.mockStore.js

@@ -13,8 +13,8 @@ module.exports = {
         socialLink: 'https://www.facebook.com/aloha'
       },
       {
-        platform: 'twitter',
-        socialLink: 'https://www.twitter.com/ALOHA'
+        platform: 'x',
+        socialLink: 'https://www.x.com/ALOHA'
       }
     ],
     profileImage: {
@@ -85,8 +85,8 @@ module.exports = {
           socialLink: 'https://www.facebook.com/aloha'
         },
         {
-          platform: 'twitter',
-          socialLink: 'https://www.twitter.com/ALOHA'
+          platform: 'x',
+          socialLink: 'https://www.x.com/ALOHA'
         }
       ],
       timeZone: null,
@@ -125,7 +125,8 @@ module.exports = {
       }
     ],
     drafts: {},
-    isLoadingProfile: false
+    isLoadingProfile: false,
+    disabledCountries: [],
   },
   router: {
     location: {

src/profile/__mocks__/viewOtherProfile.mockStore.js

@@ -13,8 +13,8 @@ module.exports = {
         socialLink: 'https://www.facebook.com/aloha'
       },
       {
-        platform: 'twitter',
-        socialLink: 'https://www.twitter.com/ALOHA'
+        platform: 'x',
+        socialLink: 'https://www.x.com/ALOHA'
       }
     ],
     profileImage: {
@@ -81,11 +81,18 @@ module.exports = {
       gender: null,
       accountPrivacy: 'private'
     },
-    preferences: {},
+    preferences: {
+      visibilityName: 'all_users',
+      visibilityCountry: 'all_users',
+      visibilityLevelOfEducation: 'all_users',
+      visibilityLanguageProficiencies: 'all_users',
+      visibilitySocialLinks: 'all_users',
+      visibilityBio: 'all_users'
+    },
     courseCertificates: [],
     drafts: {},
     isLoadingProfile: false,
-    learningGoal: 'advance_career',
+    countriesCodesList: ['US', 'CA', 'GB', 'ME']
   },
   router: {
     location: {

src/profile/__mocks__/viewOwnProfile.mockStore.js

@@ -13,8 +13,8 @@ module.exports = {
         socialLink: 'https://www.facebook.com/aloha'
       },
       {
-        platform: 'twitter',
-        socialLink: 'https://www.twitter.com/ALOHA'
+        platform: 'x',
+        socialLink: 'https://www.x.com/ALOHA'
       }
     ],
     profileImage: {
@@ -85,8 +85,8 @@ module.exports = {
           socialLink: 'https://www.facebook.com/aloha'
         },
         {
-          platform: 'twitter',
-          socialLink: 'https://www.twitter.com/ALOHA'
+          platform: 'x',
+          socialLink: 'https://www.x.com/ALOHA'
         }
       ],
       timeZone: null,
@@ -125,7 +125,8 @@ module.exports = {
       }
     ],
     drafts: {},
-    isLoadingProfile: false
+    isLoadingProfile: false,
+    countriesCodesList: ['US', 'CA', 'GB', 'ME']
   },
   router: {
     location: {

src/profile/data/actions.js

@@ -9,8 +9,6 @@ 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 },
@@ -25,20 +23,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: {
@@ -68,8 +66,6 @@ export const saveProfileFailure = errors => ({
   payload: { errors },
 });
 
-// SAVE PROFILE PHOTO ACTIONS
-
 export const saveProfilePhoto = (username, formData) => ({
   type: SAVE_PROFILE_PHOTO.BASE,
   payload: {
@@ -96,8 +92,6 @@ export const saveProfilePhotoFailure = error => ({
   payload: { error },
 });
 
-// DELETE PROFILE PHOTO ACTIONS
-
 export const deleteProfilePhoto = username => ({
   type: DELETE_PROFILE_PHOTO.BASE,
   payload: {
@@ -118,8 +112,6 @@ export const deleteProfilePhotoReset = () => ({
   type: DELETE_PROFILE_PHOTO.RESET,
 });
 
-// FIELD STATE ACTIONS
-
 export const openForm = formId => ({
   type: OPEN_FORM,
   payload: {
@@ -134,8 +126,6 @@ export const closeForm = formId => ({
   },
 });
 
-// FORM STATE ACTIONS
-
 export const updateDraft = (name, value) => ({
   type: UPDATE_DRAFT,
   payload: {

src/profile/data/actions.test.js

@@ -1,14 +1,4 @@
 import {
-  openForm,
-  closeForm,
-  OPEN_FORM,
-  CLOSE_FORM,
-  SAVE_PROFILE,
-  saveProfileBegin,
-  saveProfileSuccess,
-  saveProfileFailure,
-  saveProfileReset,
-  saveProfile,
   SAVE_PROFILE_PHOTO,
   saveProfilePhotoBegin,
   saveProfilePhotoSuccess,
@@ -22,76 +12,6 @@ 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';
@@ -123,7 +43,7 @@ describe('SAVE profile photo actions', () => {
     expect(saveProfilePhotoSuccess(newPhotoData)).toEqual(expectedAction);
   });
 
-  it('should create an action to signal user profile photo save success', () => {
+  it('should create an action to signal user profile photo save reset', () => {
     const expectedAction = {
       type: SAVE_PROFILE_PHOTO.RESET,
     };
@@ -169,34 +89,10 @@ describe('DELETE profile photo actions', () => {
     expect(deleteProfilePhotoSuccess(defaultPhotoData)).toEqual(expectedAction);
   });
 
-  it('should create an action to signal user profile photo deletion success', () => {
+  it('should create an action to signal user profile photo deletion reset', () => {
     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

@@ -14,15 +14,20 @@ const SOCIAL = {
   linkedin: {
     title: 'LinkedIn',
   },
-  twitter: {
-    title: 'Twitter',
+  x: {
+    title: 'X',
   },
   facebook: {
     title: 'Facebook',
   },
 };
 
+const FIELD_LABELS = {
+  COUNTRY: 'country',
+};
+
 export {
   EDUCATION_LEVELS,
   SOCIAL,
+  FIELD_LABELS,
 };

src/profile/data/hooks.js

@@ -0,0 +1,34 @@
+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,6 +17,10 @@ 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,12 +16,28 @@ 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 = {}) => {
@@ -37,11 +53,17 @@ const profilePage = (state = initialState, action = {}) => {
     case FETCH_PROFILE.SUCCESS:
       return {
         ...state,
-        account: action.account,
+        account: {
+          ...state.account,
+          ...action.account,
+          socialLinks: action.account.socialLinks || [],
+          languageProficiencies: action.account.languageProficiencies || [],
+        },
         preferences: action.preferences,
-        courseCertificates: action.courseCertificates,
+        courseCertificates: action.courseCertificates || [],
         isLoadingProfile: false,
         isAuthenticatedUserProfile: action.isAuthenticatedUserProfile,
+        countriesCodesList: action.countriesCodesList || [],
       };
     case SAVE_PROFILE.BEGIN:
       return {
@@ -54,9 +76,12 @@ const profilePage = (state = initialState, action = {}) => {
         ...state,
         saveState: 'complete',
         errors: {},
-        // Account is always replaced completely.
-        account: action.payload.account !== null ? action.payload.account : state.account,
-        // Preferences changes get merged in.
+        account: action.payload.account !== null ? {
+          ...state.account,
+          ...action.payload.account,
+          socialLinks: action.payload.account.socialLinks || [],
+          languageProficiencies: action.payload.account.languageProficiencies || [],
+        } : state.account,
         preferences: { ...state.preferences, ...action.payload.preferences },
       };
     case SAVE_PROFILE.FAILURE:
@@ -73,7 +98,6 @@ const profilePage = (state = initialState, action = {}) => {
         isLoadingProfile: false,
         errors: {},
       };
-
     case SAVE_PROFILE_PHOTO.BEGIN:
       return {
         ...state,
@@ -83,7 +107,6 @@ 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: {},
@@ -100,7 +123,6 @@ const profilePage = (state = initialState, action = {}) => {
         savePhotoState: null,
         errors: {},
       };
-
     case DELETE_PROFILE_PHOTO.BEGIN:
       return {
         ...state,
@@ -110,7 +132,6 @@ 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: {},
@@ -127,13 +148,11 @@ 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,
@@ -146,7 +165,6 @@ 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

@@ -0,0 +1,309 @@
+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: 'x', link: 'x.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

@@ -1,3 +1,4 @@
+import { history } from '@edx/frontend-platform';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import pick from 'lodash.pick';
 import {
@@ -21,13 +22,12 @@ 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,38 +37,32 @@ 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, preferences] = result;
+      [account, courseCertificates, countriesCodesList, preferences] = result;
     } else {
-      [account, courseCertificates] = result;
+      [account, courseCertificates, countriesCodesList] = result;
     }
 
-    // Set initial visibility values for account
-    // Set account_privacy as custom is necessary so that when viewing another user's profile,
-    // their full name is displayed and change visibility forms are worked correctly
     if (isAuthenticatedUserProfile && result[0].accountPrivacy === 'all_users') {
       yield call(ProfileApiService.patchPreferences, action.payload.username, {
         account_privacy: 'custom',
@@ -89,16 +83,13 @@ export function* handleFetchProfile(action) {
       preferences,
       courseCertificates,
       isAuthenticatedUserProfile,
+      countriesCodesList,
     ));
 
     yield put(fetchProfileReset());
   } catch (e) {
     if (e.response.status === 404) {
-      if (e.processedData && e.processedData.fieldErrors) {
-        yield put(saveProfileFailure(e.processedData.fieldErrors));
-      } else {
-        yield put(saveProfileFailure(e.customAttributes));
-      }
+      history.push('/notfound');
     } else {
       throw e;
     }
@@ -111,7 +102,6 @@ export function* handleSaveProfile(action) {
 
     const accountDrafts = pick(drafts, [
       'bio',
-      'courseCertificates',
       'country',
       'levelOfEducation',
       'languageProficiencies',
@@ -121,7 +111,6 @@ export function* handleSaveProfile(action) {
 
     const preferencesDrafts = pick(drafts, [
       'visibilityBio',
-      'visibilityCourseCertificates',
       'visibilityCountry',
       'visibilityLevelOfEducation',
       'visibilityLanguageProficiencies',
@@ -135,7 +124,6 @@ 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(
@@ -145,17 +133,14 @@ export function* handleSaveProfile(action) {
       );
     }
 
-    let preferencesResult = preferences; // assume it hasn't changed.
+    let preferencesResult = preferences;
     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));
@@ -181,12 +166,7 @@ export function* handleSaveProfilePhoto(action) {
     yield put(saveProfilePhotoSuccess(photoResult));
     yield put(saveProfilePhotoReset());
   } catch (e) {
-    if (e.processedData) {
-      yield put(saveProfilePhotoFailure(e.processedData));
-    } else {
-      yield put(saveProfilePhotoReset());
-      throw e;
-    }
+    yield put(saveProfilePhotoReset());
   }
 }
 
@@ -200,7 +180,6 @@ 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,17 +68,18 @@ 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[2], result[1], true)));
+        .toEqual(put(profileActions.fetchProfileSuccess(userAccount, result[3], result[1], true, [])));
       expect(gen.next().value).toEqual(put(profileActions.fetchProfileReset()));
       expect(gen.next().value).toBeUndefined();
     });
@@ -88,6 +89,7 @@ describe('RootSaga', () => {
         username: 'gonzo',
         other: 'data',
       };
+      const countriesCodesList = [{ code: 'AX' }, { code: 'AL' }];
       getAuthenticatedUser.mockReturnValue(userAccount);
       const selectorData = {
         userAccount,
@@ -96,16 +98,17 @@ describe('RootSaga', () => {
       const action = profileActions.fetchProfile('booyah');
       const gen = handleFetchProfile(action);
 
-      const result = [{}, [1, 2, 3]];
+      const result = [{}, [1, 2, 3], countriesCodesList];
 
       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)));
+        .toEqual(put(profileActions.fetchProfileSuccess(result[0], {}, result[1], false, countriesCodesList)));
       expect(gen.next().value).toEqual(put(profileActions.fetchProfileReset()));
       expect(gen.next().value).toBeUndefined();
     });
@@ -132,8 +135,6 @@ 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')));
@@ -162,5 +163,67 @@ 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,24 +5,22 @@ import {
   getCountryList,
   getCountryMessages,
   getLanguageMessages,
-} from '@edx/frontend-platform/i18n'; // eslint-disable-line
+} from '@edx/frontend-platform/i18n';
 
 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,
@@ -31,22 +29,11 @@ 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; // overwrite for certificates
-    // If this isn't the current user's profile
+    propExists = formId === 'certificates' ? certificates.length > 0 : propExists;
     if (!isAuthenticatedUserProfile) {
       return 'static';
     }
-    // the current user has no age set / under 13 ...
-    if (account.requiresParentalConsent) {
-      // then there are only two options: static or nothing.
-      // We use 'null' as a return value because the consumers of
-      // getMode render nothing at all on a mode of null.
-      return propExists ? 'static' : null;
-    }
-    // Otherwise, if this is the current user's profile...
     if (formId === currentlyEditingField) {
       return 'editing';
     }
@@ -67,12 +54,10 @@ export const accountDraftsFieldSelector = createSelector(
 
 export const visibilityDraftsFieldSelector = createSelector(
   formIdSelector,
-  profileVisibilityDraftsSelector,
-  (formId, visibilityDrafts) => visibilityDrafts[formId],
+  profileDraftsSelector,
+  (formId, drafts) => drafts[`visibility${formId.charAt(0).toUpperCase() + formId.slice(1)}`],
 );
 
-// Note: Error messages are delivered from the server
-// localized according to a user's account settings
 export const formErrorSelector = createSelector(
   accountErrorsSelector,
   formIdSelector,
@@ -90,11 +75,6 @@ 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,
@@ -112,7 +92,14 @@ export const sortedLanguagesSelector = createSelector(
 
 export const sortedCountriesSelector = createSelector(
   localeSelector,
-  locale => getCountryList(locale),
+  countriesCodesListSelector,
+  profileAccountSelector,
+  (locale, countriesCodesList, profileAccount) => {
+    const countryList = getCountryList(locale);
+    const userCountry = profileAccount.country;
+
+    return countryList.filter(({ code }) => code === userCountry || countriesCodesList.find(x => x === code));
+  },
 );
 
 export const preferredLanguageSelector = createSelector(
@@ -130,10 +117,14 @@ export const countrySelector = createSelector(
   editableFormSelector,
   sortedCountriesSelector,
   countryMessagesSelector,
-  (editableForm, sortedCountries, countryMessages) => ({
+  countriesCodesListSelector,
+  profileAccountSelector,
+  (editableForm, translatedCountries, countryMessages, countriesCodesList, account) => ({
     ...editableForm,
-    sortedCountries,
+    translatedCountries,
     countryMessages,
+    countriesCodesList,
+    committedCountry: account.country,
   }),
 );
 
@@ -157,9 +148,6 @@ export const profileImageSelector = createSelector(
     : {}),
 );
 
-/**
- * This is used by a saga to pull out data to process.
- */
 export const handleSaveProfileSelector = createSelector(
   profileDraftsSelector,
   profilePreferencesSelector,
@@ -169,7 +157,6 @@ export const handleSaveProfileSelector = createSelector(
   }),
 );
 
-// Reformats the social links in a platform-keyed hash.
 const socialLinksByPlatformSelector = createSelector(
   profileAccountSelector,
   (account) => {
@@ -196,24 +183,18 @@ 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 knownPlatforms = ['x', '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,
@@ -232,7 +213,6 @@ export const visibilitiesSelector = createSelector(
       case 'custom':
         return {
           visibilityBio: preferences.visibilityBio || 'all_users',
-          visibilityCourseCertificates: preferences.visibilityCourseCertificates || 'all_users',
           visibilityCountry: preferences.visibilityCountry || 'all_users',
           visibilityLevelOfEducation: preferences.visibilityLevelOfEducation || 'all_users',
           visibilityLanguageProficiencies: preferences.visibilityLanguageProficiencies || 'all_users',
@@ -242,7 +222,6 @@ export const visibilitiesSelector = createSelector(
       case 'private':
         return {
           visibilityBio: 'private',
-          visibilityCourseCertificates: 'private',
           visibilityCountry: 'private',
           visibilityLevelOfEducation: 'private',
           visibilityLanguageProficiencies: 'private',
@@ -251,13 +230,8 @@ 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',
@@ -268,9 +242,6 @@ 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;
 }
@@ -285,10 +256,6 @@ 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),
@@ -306,7 +273,7 @@ export const formValuesSelector = createSelector(
     ),
     name: chooseFormValue(drafts.name, account.name),
     visibilityName: chooseFormValue(drafts.visibilityName, visibilities.visibilityName),
-    socialLinks, // Social links is calculated in its own selector, since it's complicated.
+    socialLinks,
     visibilitySocialLinks: chooseFormValue(
       drafts.visibilitySocialLinks,
       visibilities.visibilitySocialLinks,
@@ -323,6 +290,7 @@ export const profilePageSelector = createSelector(
   isLoadingProfileSelector,
   draftSocialLinksByPlatformSelector,
   accountErrorsSelector,
+  isAuthenticatedUserProfileSelector,
   (
     account,
     formValues,
@@ -332,47 +300,39 @@ 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,11 +2,24 @@ 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) {
-  return camelCaseObject(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,
+  };
 }
 
 function processAndThrowError(error, errorDataProcessor) {
@@ -19,15 +32,12 @@ 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);
 
@@ -41,12 +51,9 @@ 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(
@@ -70,8 +77,6 @@ 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`);
@@ -85,14 +90,12 @@ 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, {
@@ -114,8 +117,6 @@ 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) => {
@@ -147,3 +148,21 @@ 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

@@ -0,0 +1,174 @@
+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,149 +1,140 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import { Form } from '@openedx/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';
 
-class Bio extends React.Component {
-  constructor(props) {
-    super(props);
+const Bio = ({
+  formId,
+  bio,
+  visibilityBio,
+  editMode,
+  saveState,
+  error,
+  changeHandler,
+  submitHandler,
+  closeHandler,
+  openHandler,
+}) => {
+  const isMobileView = useIsOnMobileScreen();
+  const isVisibilityEnabled = useIsVisibilityEnabled();
+  const intl = useIntl();
 
-    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 handleChange = useHandleChange(changeHandler);
+  const handleSubmit = useHandleSubmit(submitHandler, formId);
+  const handleOpen = useCloseOpenHandler(openHandler, formId);
+  const handleClose = useCloseOpenHandler(closeHandler, formId);
 
-  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}
+  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}
                 />
-              </form>
-            </div>
-          ),
-          editable: (
-            <>
-              <EditableItemHeader
-                content={intl.formatMessage(messages['profile.bio.about.me'])}
-                showEditButton
-                onClickEdit={this.handleOpen}
-                showVisibility={visibilityBio !== null}
+                {error !== null && (
+                  <Form.Control.Feedback hasIcon={false}>
+                    {error}
+                  </Form.Control.Feedback>
+                )}
+              </Form.Group>
+              <FormControls
+                visibilityId="visibilityBio"
+                saveState={saveState}
                 visibility={visibilityBio}
+                cancelHandler={handleClose}
+                changeHandler={handleChange}
               />
-              <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>
-            </>
-          ),
-        }}
-      />
-    );
-  }
-}
+            </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} />
+          </>
+        ),
+      }}
+    />
+  );
+};
 
 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 = {
@@ -157,4 +148,4 @@ Bio.defaultProps = {
 export default connect(
   editableFormSelector,
   {},
-)(injectIntl(Bio));
+)(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: 'About Me',
+    defaultMessage: 'Bio',
     description: 'A section of a user profile',
   },
 });

src/profile/forms/Certificates.jsx

@@ -1,231 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {
-  FormattedDate, FormattedMessage, injectIntl, intlShape,
-} from '@edx/frontend-platform/i18n';
-import { Hyperlink } from '@openedx/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-12 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,172 +1,152 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Form } from '@openedx/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';
 
-class Country extends React.Component {
-  constructor(props) {
-    super(props);
+const Country = ({
+  formId,
+  country,
+  visibilityCountry,
+  editMode,
+  saveState,
+  error,
+  translatedCountries,
+  countriesCodesList,
+  countryMessages,
+  changeHandler,
+  submitHandler,
+  closeHandler,
+  openHandler,
+}) => {
+  const isVisibilityEnabled = useIsVisibilityEnabled();
+  const intl = useIntl();
 
-    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 handleChange = useHandleChange(changeHandler);
+  const handleSubmit = useHandleSubmit(submitHandler, formId);
+  const handleOpen = useCloseOpenHandler(openHandler, formId);
+  const handleClose = useCloseOpenHandler(closeHandler, formId);
 
-  handleChange(e) {
-    const {
-      name,
-      value,
-    } = e.target;
-    this.props.changeHandler(name, value);
-  }
+  const isDisabledCountry = (countryCode) => countriesCodesList.length > 0
+      && !countriesCodesList.find(code => code === countryCode);
 
-  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}
+  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}
                 >
-                  <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}
+                  <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}
                 visibility={visibilityCountry}
+                cancelHandler={handleClose}
+                changeHandler={handleChange}
               />
-              <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>
-            </>
-          ),
-        }}
-      />
-    );
-  }
-}
+            </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]} />
+          </>
+        ),
+      }}
+    />
+  );
+};
 
 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,
-  sortedCountries: PropTypes.arrayOf(PropTypes.shape({
+  translatedCountries: 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 = {
@@ -180,4 +160,4 @@ Country.defaultProps = {
 export default connect(
   countrySelector,
   {},
-)(injectIntl(Country));
+)(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: 'Location',
+    defaultMessage: 'Country',
     description: 'The label for a country in a user profile.',
   },
   'profile.country.empty': {
     id: 'profile.country.empty',
-    defaultMessage: 'Add location',
+    defaultMessage: 'Add country',
     description: 'The affordance to add country location to a user’s profile.',
   },
 });

src/profile/forms/Education.jsx

@@ -1,180 +1,160 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import get from 'lodash.get';
 import { Form } from '@openedx/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';
 
-class Education extends React.Component {
-  constructor(props) {
-    super(props);
+const Education = ({
+  formId,
+  levelOfEducation,
+  visibilityLevelOfEducation,
+  editMode,
+  saveState,
+  error,
+  changeHandler,
+  submitHandler,
+  closeHandler,
+  openHandler,
+}) => {
+  const isVisibilityEnabled = useIsVisibilityEnabled();
+  const intl = useIntl();
 
-    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 handleChange = useHandleChange(changeHandler);
+  const handleSubmit = useHandleSubmit(submitHandler, formId);
+  const handleOpen = useCloseOpenHandler(openHandler, formId);
+  const handleClose = useCloseOpenHandler(closeHandler, formId);
 
-  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}
+  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}
                 >
-                  <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}
+                  <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}
                 visibility={visibilityLevelOfEducation}
+                cancelHandler={handleClose}
+                changeHandler={handleChange}
               />
-              <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>
-            </>
-          ),
-        }}
-      />
-    );
-  }
-}
+            </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'],
+              ))}
+            />
+          </>
+        ),
+      }}
+    />
+  );
+};
 
 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 = {
@@ -188,4 +168,4 @@ Education.defaultProps = {
 export default connect(
   editableFormSelector,
   {},
-)(injectIntl(Education));
+)(Education);

src/profile/forms/LearningGoal.jsx

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

src/profile/forms/LearningGoal.messages.jsx

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

src/profile/forms/LearningGoal.test.jsx

@@ -1,116 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { useMemo } from 'react';
-import { Provider } from 'react-redux';
-import { render, screen } from '@testing-library/react';
-import configureMockStore from 'redux-mock-store';
-import thunk from 'redux-thunk';
-import { configure as configureI18n, IntlProvider } from '@edx/frontend-platform/i18n';
-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"', () => {
-      render(
-        <LearningGoalWrapper
-          {...requiredLearningGoalProps}
-          formId="learningGoal"
-        />,
-      );
-      expect(screen.getByText('I want to advance my career')).toBeTruthy();
-    });
-
-    it('renders "Something else"', () => {
-      requiredLearningGoalProps.learningGoal = 'something_else';
-
-      render(
-        <LearningGoalWrapper
-          {...requiredLearningGoalProps}
-          formId="learningGoal"
-        />,
-      );
-      expect(screen.getByText('Something else')).toBeTruthy();
-    });
-  });
-});

src/profile/forms/Name.jsx

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

src/profile/forms/Name.messages.jsx

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

src/profile/forms/PreferredLanguage.jsx

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

src/profile/forms/PreferredLanguage.messages.jsx

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

src/profile/forms/ProfileAvatar.jsx

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

src/profile/forms/ProfileAvatar.messages.jsx

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

src/profile/forms/SocialLinks.jsx

@@ -1,31 +1,27 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Alert } from '@openedx/paragon';
 import { connect } from 'react-redux';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faTwitter, faFacebook, faLinkedin } from '@fortawesome/free-brands-svg-icons';
-import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { faXTwitter, faFacebook, faLinkedin } from '@fortawesome/free-brands-svg-icons';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import classNames from 'classnames';
 
-import messages from './SocialLinks.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 { useIsVisibilityEnabled } from '../data/hooks';
 
 const platformDisplayInfo = {
   facebook: {
     icon: faFacebook,
     name: 'Facebook',
   },
-  twitter: {
-    icon: faTwitter,
-    name: 'Twitter',
+  x: {
+    icon: faXTwitter,
+    name: 'X (Twitter)',
   },
   linkedin: {
     icon: faLinkedin,
@@ -33,283 +29,203 @@ const platformDisplayInfo = {
   },
 };
 
-const SocialLink = ({ url, name, platform }) => (
-  <a href={url} className="font-weight-bold">
-    <FontAwesomeIcon className="mr-2" icon={platformDisplayInfo[platform].icon} />
-    {name}
-  </a>
-);
-
-SocialLink.propTypes = {
-  url: PropTypes.string.isRequired,
-  platform: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-};
-
-const EditableListItem = ({
-  url, platform, onClickEmptyContent, name,
+const SocialLinks = ({
+  formId,
+  socialLinks,
+  draftSocialLinksByPlatform,
+  visibilitySocialLinks,
+  editMode,
+  saveState,
+  error,
+  changeHandler,
+  submitHandler,
+  closeHandler,
+  openHandler,
 }) => {
-  const linkDisplay = url ? (
-    <SocialLink name={name} url={url} platform={platform} />
-  ) : (
-    <EmptyContent onClick={onClickEmptyContent}>Add {name}</EmptyContent>
-  );
+  const isVisibilityEnabled = useIsVisibilityEnabled();
+  const [activePlatform, setActivePlatform] = useState(null);
 
-  return <li className="form-group">{linkDisplay}</li>;
-};
-
-EditableListItem.propTypes = {
-  url: PropTypes.string,
-  platform: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  onClickEmptyContent: PropTypes.func,
-};
-EditableListItem.defaultProps = {
-  url: null,
-  onClickEmptyContent: null,
-};
-
-const EditingListItem = ({
-  platform, name, value, onChange, error,
-}) => (
-  <li className="form-group">
-    <label htmlFor={`social-${platform}`}>{name}</label>
-    <input
-      className={classNames('form-control', { 'is-invalid': Boolean(error) })}
-      type="text"
-      id={`social-${platform}`}
-      name={platform}
-      value={value || ''}
-      onChange={onChange}
-      aria-describedby="social-error-feedback"
-    />
-  </li>
-);
-
-EditingListItem.propTypes = {
-  platform: PropTypes.string.isRequired,
-  value: PropTypes.string,
-  name: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired,
-  error: PropTypes.string,
-};
-
-EditingListItem.defaultProps = {
-  value: null,
-  error: null,
-};
-
-const EmptyListItem = ({ onClick, name }) => (
-  <li className="mb-4">
-    <EmptyContent onClick={onClick}>
-      <FormattedMessage
-        id="profile.sociallinks.add"
-        defaultMessage="Add {network}"
-        values={{
-          network: name,
-        }}
-        description="{network} is the name of a social network such as Facebook or Twitter"
-      />
-    </EmptyContent>
-  </li>
-);
-
-EmptyListItem.propTypes = {
-  name: PropTypes.string.isRequired,
-  onClick: PropTypes.func.isRequired,
-};
-
-const StaticListItem = ({ name, url, platform }) => (
-  <li className="mb-2">
-    <SocialLink name={name} url={url} platform={platform} />
-  </li>
-);
-
-StaticListItem.propTypes = {
-  name: PropTypes.string.isRequired,
-  url: PropTypes.string,
-  platform: PropTypes.string.isRequired,
-};
-
-StaticListItem.defaultProps = {
-  url: null,
-};
-
-class SocialLinks extends React.Component {
-  constructor(props) {
-    super(props);
-
-    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;
-
-    // The social links are a bit special. If we're updating them, we need to merge them
-    // with any existing social link drafts, essentially sending a fresh copy of the whole
-    // data structure back to the reducer. This helps the reducer stay simple and keeps
-    // special cases out of it, concentrating them here, where they began.
-    if (name !== 'visibilitySocialLinks') {
-      this.props.changeHandler(
-        'socialLinks',
-        this.mergeWithDrafts({
-          platform: name,
-          // If it's an empty string, send it as null.
-          // The empty string is just for the input.  We want nulls.
-          socialLink: value,
-        }),
-      );
-    } else {
-      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);
-  }
-
-  mergeWithDrafts(newSocialLink) {
-    const knownPlatforms = ['twitter', 'facebook', 'linkedin'];
+  const mergeWithDrafts = (newSocialLink) => {
+    const knownPlatforms = ['x', 'facebook', 'linkedin'];
     const updated = [];
     knownPlatforms.forEach((platform) => {
       if (newSocialLink.platform === platform) {
         updated.push(newSocialLink);
-      } else if (this.props.draftSocialLinksByPlatform[platform] !== undefined) {
-        updated.push(this.props.draftSocialLinksByPlatform[platform]);
+      } else if (draftSocialLinksByPlatform[platform] !== undefined) {
+        updated.push(draftSocialLinksByPlatform[platform]);
       }
     });
     return updated;
-  }
+  };
 
-  render() {
-    const {
-      socialLinks, visibilitySocialLinks, editMode, saveState, error, intl,
-    } = this.props;
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    if (name !== 'visibilitySocialLinks') {
+      changeHandler(
+        'socialLinks',
+        mergeWithDrafts({
+          platform: name,
+          socialLink: value,
+        }),
+      );
+    } else {
+      changeHandler(name, value);
+    }
+  };
 
-    return (
-      <SwitchContent
-        className="mb-5"
-        expression={editMode}
-        cases={{
-          empty: (
-            <>
-              <EditableItemHeader content={intl.formatMessage(messages['profile.sociallinks.social.links'])} />
-              <ul className="list-unstyled">
-                {socialLinks.map(({ platform }) => (
-                  <EmptyListItem
-                    key={platform}
-                    onClick={this.handleOpen}
-                    name={platformDisplayInfo[platform].name}
-                  />
-                ))}
-              </ul>
-            </>
-          ),
-          static: (
-            <>
-              <EditableItemHeader
-                content={intl.formatMessage(messages['profile.sociallinks.social.links'])}
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    submitHandler(formId);
+    setActivePlatform(null);
+  };
+
+  const handleClose = () => {
+    closeHandler(formId);
+    setActivePlatform(null);
+  };
+
+  const handleOpen = (platform) => {
+    openHandler(formId);
+    setActivePlatform(platform);
+  };
+
+  const renderPlatformContent = (platform, socialLink, isEditing) => {
+    if (isEditing) {
+      return (
+        <form onSubmit={handleSubmit}>
+          <div className="form-group m-0">
+            {error !== null && (
+              <div id="social-error-feedback">
+                <Alert variant="danger" dismissible={false} show>
+                  {error}
+                </Alert>
+              </div>
+            )}
+            <div className="pb-3">
+              <input
+                className={classNames('form-control py-10px', { 'is-invalid': Boolean(error) })}
+                type="text"
+                id={`social-${platform}`}
+                name={platform}
+                value={socialLink || ''}
+                onChange={handleChange}
+                aria-describedby="social-error-feedback"
               />
-              <ul className="list-unstyled">
-                {socialLinks
-                  .filter(({ socialLink }) => Boolean(socialLink))
-                  .map(({ platform, socialLink }) => (
-                    <StaticListItem
-                      key={platform}
-                      name={platformDisplayInfo[platform].name}
-                      url={socialLink}
-                      platform={platform}
-                    />
-                  ))}
-              </ul>
-            </>
-          ),
-          editable: (
-            <>
-              <EditableItemHeader
-                content={intl.formatMessage(messages['profile.sociallinks.social.links'])}
-                showEditButton
-                onClickEdit={this.handleOpen}
-                showVisibility={visibilitySocialLinks !== null}
-                visibility={visibilitySocialLinks}
-              />
-              <ul className="list-unstyled">
-                {socialLinks.map(({ platform, socialLink }) => (
-                  <EditableListItem
-                    key={platform}
-                    platform={platform}
-                    name={platformDisplayInfo[platform].name}
-                    url={socialLink}
-                    onClickEmptyContent={this.handleOpen}
-                  />
-                ))}
-              </ul>
-            </>
-          ),
-          editing: (
-            <div role="dialog" aria-labelledby="social-links-label">
-              <form aria-labelledby="editing-form" onSubmit={this.handleSubmit}>
-                <EditableItemHeader
-                  headingId="social-links-label"
-                  content={intl.formatMessage(messages['profile.sociallinks.social.links'])}
-                />
-                {/* TODO: Replace this alert with per-field errors. Needs API update. */}
-                <div id="social-error-feedback">
-                  {error !== null
-                    ? (
-                      <Alert variant="danger" dismissible={false} show>
-                        {error}
-                      </Alert>
-                    ) : null}
-                </div>
-                <ul className="list-unstyled">
-                  {socialLinks.map(({ platform, socialLink }) => (
-                    <EditingListItem
-                      key={platform}
-                      name={platformDisplayInfo[platform].name}
-                      platform={platform}
-                      value={socialLink}
-                      /* TODO: Per-field errors: error={error !== null ? error[platform] : null} */
-                      onChange={this.handleChange}
-                    />
-                  ))}
-                </ul>
-                <FormControls
-                  visibilityId="visibilitySocialLinks"
-                  saveState={saveState}
-                  visibility={visibilitySocialLinks}
-                  cancelHandler={this.handleClose}
-                  changeHandler={this.handleChange}
-                />
-              </form>
             </div>
-          ),
-        }}
-      />
+            <FormControls
+              visibilityId="visibilitySocialLinks"
+              saveState={saveState}
+              visibility={visibilitySocialLinks}
+              cancelHandler={handleClose}
+              changeHandler={handleChange}
+              submitHandler={handleSubmit}
+            />
+          </div>
+        </form>
+      );
+    }
+    if (socialLink) {
+      return (
+        <div className="w-100 overflowWrap-breakWord">
+          <EditableItemHeader
+            content={socialLink}
+            showEditButton
+            onClickEdit={() => handleOpen(platform)}
+            showVisibility={visibilitySocialLinks !== null && isVisibilityEnabled}
+            visibility={visibilitySocialLinks}
+          />
+        </div>
+      );
+    }
+    return (
+      <EmptyContent onClick={() => handleOpen(platform)}>
+        Add {platformDisplayInfo[platform].name}
+      </EmptyContent>
     );
-  }
-}
+  };
+
+  return (
+    <SwitchContent
+      className="p-0"
+      expression={editMode}
+      cases={{
+        empty: (
+          <div>
+            <div>
+              {socialLinks.map(({ platform }) => (
+                <div key={platform} className="pt-40px">
+                  <p data-hj-suppress className="h5 font-weight-bold m-0 pb-1.5">
+                    {platformDisplayInfo[platform].name}
+                  </p>
+                  <EmptyContent onClick={() => handleOpen(platform)}>
+                    <FormattedMessage
+                      id="profile.sociallinks.add"
+                      defaultMessage="Add {network} profile"
+                      values={{
+                        network: platformDisplayInfo[platform].name,
+                      }}
+                      description="{network} is the name of a social network such as Facebook or X"
+                    />
+                  </EmptyContent>
+                </div>
+              ))}
+            </div>
+          </div>
+        ),
+        static: (
+          <div>
+            <div>
+              {socialLinks
+                .filter(({ socialLink }) => Boolean(socialLink))
+                .map(({ platform, socialLink }) => (
+                  <div key={platform} className="pt-40px">
+                    <p data-hj-suppress className="h5 font-weight-bold m-0 pb-1.5">
+                      {platformDisplayInfo[platform].name}
+                    </p>
+                    <EditableItemHeader
+                      content={socialLink}
+                      contentPrefix={`${platformDisplayInfo[platform].name}: `}
+                    />
+                  </div>
+                ))}
+            </div>
+          </div>
+        ),
+        editable: (
+          <div>
+            <div>
+              {socialLinks.map(({ platform, socialLink }) => (
+                <div key={platform} className="pt-40px">
+                  <p data-hj-suppress className="h5 font-weight-bold m-0 pb-1.5">
+                    {platformDisplayInfo[platform].name}
+                  </p>
+                  {renderPlatformContent(platform, socialLink, activePlatform === platform)}
+                </div>
+              ))}
+            </div>
+          </div>
+        ),
+        editing: (
+          <div>
+            <div>
+              {socialLinks.map(({ platform, socialLink }) => (
+                <div key={platform} className="pt-40px">
+                  <p data-hj-suppress className="h5 font-weight-bold m-0 pb-2.5">
+                    {platformDisplayInfo[platform].name}
+                  </p>
+                  {renderPlatformContent(platform, socialLink, activePlatform === platform)}
+                </div>
+              ))}
+            </div>
+          </div>
+        ),
+      }}
+    />
+  );
+};
 
 SocialLinks.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
   socialLinks: PropTypes.arrayOf(PropTypes.shape({
     platform: PropTypes.string,
     socialLink: PropTypes.string,
@@ -322,15 +238,10 @@ SocialLinks.propTypes = {
   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,
 };
 
 SocialLinks.defaultProps = {
@@ -344,4 +255,4 @@ SocialLinks.defaultProps = {
 export default connect(
   editableFormSelector,
   {},
-)(injectIntl(SocialLinks));
+)(SocialLinks);

src/profile/forms/SocialLinks.test.jsx

@@ -1,165 +0,0 @@
-import { render, fireEvent, screen } from '@testing-library/react';
-import PropTypes from 'prop-types';
-import React, { useMemo } from 'react';
-import { Provider } from 'react-redux';
-import configureMockStore from 'redux-mock-store';
-import thunk from 'redux-thunk';
-import { configure as configureI18n, IntlProvider } from '@edx/frontend-platform/i18n';
-import { getConfig } from '@edx/frontend-platform';
-import { AppContext } from '@edx/frontend-platform/react';
-
-import SocialLinks from './SocialLinks';
-import * as savingEditedBio from '../__mocks__/savingEditedBio.mockStore';
-import messages from '../../i18n';
-
-const mockStore = configureMockStore([thunk]);
-
-const defaultProps = {
-  formId: 'socialLinks',
-  socialLinks: [
-    {
-      platform: 'facebook',
-      socialLink: 'https://www.facebook.com/aloha',
-    },
-    {
-      platform: 'twitter',
-      socialLink: 'https://www.twitter.com/ALOHA',
-    },
-  ],
-  drafts: {},
-  visibilitySocialLinks: 'private',
-  editMode: 'static',
-  saveState: null,
-  error: null,
-  changeHandler: jest.fn(),
-  submitHandler: jest.fn(),
-  closeHandler: jest.fn(),
-  openHandler: jest.fn(),
-};
-
-configureI18n({
-  loggingService: { logError: jest.fn() },
-  config: {
-    ENVIRONMENT: 'production',
-    LANGUAGE_PREFERENCE_COOKIE_NAME: 'yum',
-  },
-  messages,
-});
-
-const SocialLinksWrapper = (props) => {
-  const contextValue = useMemo(() => ({
-    authenticatedUser: { userId: null, username: null, administrator: false },
-    config: getConfig(),
-  }), []);
-  return (
-    <AppContext.Provider
-      value={contextValue}
-    >
-      <IntlProvider locale="en">
-        <Provider store={props.store}>
-          <SocialLinks {...props} />
-        </Provider>
-      </IntlProvider>
-    </AppContext.Provider>
-  );
-};
-
-SocialLinksWrapper.defaultProps = {
-  store: mockStore(savingEditedBio),
-};
-
-SocialLinksWrapper.propTypes = {
-  store: PropTypes.shape({}),
-};
-
-const SocialLinksWrapperWithStore = ({ store }) => {
-  const contextValue = useMemo(() => ({
-    authenticatedUser: { userId: null, username: null, administrator: false },
-    config: getConfig(),
-  }), []);
-  return (
-    <AppContext.Provider
-      value={contextValue}
-    >
-      <IntlProvider locale="en">
-        <Provider store={mockStore(store)}>
-          <SocialLinks {...defaultProps} formId="bio" />
-        </Provider>
-      </IntlProvider>
-    </AppContext.Provider>
-  );
-};
-
-SocialLinksWrapperWithStore.defaultProps = {
-  store: mockStore(savingEditedBio),
-};
-
-SocialLinksWrapperWithStore.propTypes = {
-  store: PropTypes.shape({}),
-};
-
-describe('<SocialLinks />', () => {
-  ['certificates', 'bio', 'goals', 'socialLinks'].forEach(editMode => (
-    it(`calls social links with edit mode ${editMode}`, () => {
-      const component = <SocialLinksWrapper {...defaultProps} formId={editMode} />;
-      const { container: tree } = render(component);
-      expect(tree).toMatchSnapshot();
-    })
-  ));
-
-  it('calls social links with editing', () => {
-    const changeHandler = jest.fn();
-    const submitHandler = jest.fn();
-    const closeHandler = jest.fn();
-    const { container } = render(
-      <SocialLinksWrapper
-        {...defaultProps}
-        formId="bio"
-        changeHandler={changeHandler}
-        submitHandler={submitHandler}
-        closeHandler={closeHandler}
-      />,
-    );
-
-    const { platform } = defaultProps.socialLinks[0];
-    const inputField = container.querySelector(`#social-${platform}`);
-    fireEvent.change(inputField, { target: { value: 'test', name: platform } });
-    expect(changeHandler).toHaveBeenCalledTimes(1);
-
-    const selectElement = container.querySelector('#visibilitySocialLinks');
-    expect(selectElement.value).toBe('private');
-    fireEvent.change(selectElement, { target: { value: 'all_users', name: 'visibilitySocialLinks' } });
-    expect(changeHandler).toHaveBeenCalledTimes(2);
-
-    fireEvent.submit(container.querySelector('[aria-labelledby="editing-form"]'));
-    expect(submitHandler).toHaveBeenCalledTimes(1);
-
-    fireEvent.click(screen.getByRole('button', { name: 'Cancel' }));
-    expect(closeHandler).toHaveBeenCalledTimes(1);
-  });
-
-  it('calls social links with static', () => {
-    const openHandler = jest.fn();
-    render(
-      <SocialLinksWrapper
-        {...defaultProps}
-        formId="goals"
-        openHandler={openHandler}
-      />,
-    );
-    const addFacebookButton = screen.getByRole('button', { name: 'Add Facebook' });
-    fireEvent.click(addFacebookButton);
-
-    expect(openHandler).toHaveBeenCalledTimes(1);
-  });
-
-  it('calls social links with error', () => {
-    const newStore = JSON.parse(JSON.stringify(savingEditedBio));
-    newStore.profilePage.errors.bio = { userMessage: 'error' };
-
-    const { container } = render(<SocialLinksWrapperWithStore store={newStore} />);
-
-    const alertDanger = container.querySelector('.alert-danger');
-    expect(alertDanger).toBeInTheDocument();
-  });
-});

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

@@ -1,504 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<SocialLinks /> calls social links with edit mode bio 1`] = `
-<div>
-  <div
-    class="pgn-transition-replace-group position-relative mb-5"
-  >
-    <div
-      style="padding: .1px 0px;"
-    >
-      <div
-        aria-labelledby="social-links-label"
-        role="dialog"
-      >
-        <form
-          aria-labelledby="editing-form"
-        >
-          <div
-            class="editable-item-header mb-2"
-          >
-            <h2
-              class="edit-section-header"
-              id="social-links-label"
-            >
-              Social Links
-            </h2>
-          </div>
-          <div
-            id="social-error-feedback"
-          />
-          <ul
-            class="list-unstyled"
-          >
-            <li
-              class="form-group"
-            >
-              <label
-                for="social-facebook"
-              >
-                Facebook
-              </label>
-              <input
-                aria-describedby="social-error-feedback"
-                class="form-control"
-                id="social-facebook"
-                name="facebook"
-                type="text"
-                value="https://www.facebook.com/aloha"
-              />
-            </li>
-            <li
-              class="form-group"
-            >
-              <label
-                for="social-twitter"
-              >
-                Twitter
-              </label>
-              <input
-                aria-describedby="social-error-feedback"
-                class="form-control"
-                id="social-twitter"
-                name="twitter"
-                type="text"
-                value="https://www.twitter.com/ALOHA"
-              />
-            </li>
-          </ul>
-          <div
-            class="d-flex flex-row-reverse flex-wrap justify-content-end align-items-center"
-          >
-            <div
-              class="form-group d-flex flex-wrap"
-            >
-              <label
-                class="col-form-label"
-                for="visibilitySocialLinks"
-              >
-                Who can see this:
-              </label>
-              <span
-                class="d-flex align-items-center"
-              >
-                <span
-                  class="d-inline-block ml-1 mr-2"
-                  style="width: 1.5rem;"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="svg-inline--fa fa-eye-slash "
-                    data-icon="eye-slash"
-                    data-prefix="far"
-                    focusable="false"
-                    role="img"
-                    viewBox="0 0 640 512"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm9.4 130.3C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5l-41.9-33zM192 256c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5z"
-                      fill="currentColor"
-                    />
-                  </svg>
-                </span>
-                <select
-                  class="d-inline-block form-control"
-                  id="visibilitySocialLinks"
-                  name="visibilitySocialLinks"
-                  type="select"
-                >
-                  <option
-                    value="private"
-                  >
-                    Just me
-                  </option>
-                  <option
-                    value="all_users"
-                  >
-                    Everyone on localhost
-                  </option>
-                </select>
-              </span>
-            </div>
-            <div
-              class="form-group flex-shrink-0 flex-grow-1"
-            >
-              <button
-                aria-disabled="false"
-                aria-live="assertive"
-                class="pgn__stateful-btn pgn__stateful-btn-state-pending btn btn-primary"
-                type="submit"
-              >
-                <span
-                  class="d-flex align-items-center justify-content-center"
-                >
-                  <span
-                    class="pgn__stateful-btn-icon"
-                  >
-                    <span
-                      class="pgn__icon icon-spin"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        role="img"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M22 12A10 10 0 1 1 6.122 3.91l1.176 1.618A8 8 0 1 0 20 12h2Z"
-                          fill="currentColor"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span>
-                    Saving
-                  </span>
-                </span>
-              </button>
-              <button
-                class="btn btn-link"
-                type="button"
-              >
-                Cancel
-              </button>
-            </div>
-          </div>
-        </form>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<SocialLinks /> calls social links with edit mode certificates 1`] = `
-<div>
-  <div
-    class="pgn-transition-replace-group position-relative mb-5"
-  >
-    <div
-      style="padding: .1px 0px;"
-    >
-      <div
-        class="editable-item-header mb-2"
-      >
-        <h2
-          class="edit-section-header"
-        >
-          Social Links
-          <button
-            class="float-right px-0 btn btn-link btn-sm"
-            style="margin-top: -.35rem;"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="svg-inline--fa fa-pencil mr-1"
-              data-icon="pencil"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
-                fill="currentColor"
-              />
-            </svg>
-            Edit
-          </button>
-        </h2>
-        <p
-          class="mb-0"
-        >
-          <span
-            class="ml-auto small text-muted"
-          >
-            <svg
-              aria-hidden="true"
-              class="svg-inline--fa fa-eye-slash "
-              data-icon="eye-slash"
-              data-prefix="far"
-              focusable="false"
-              role="img"
-              viewBox="0 0 640 512"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm9.4 130.3C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5l-41.9-33zM192 256c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5z"
-                fill="currentColor"
-              />
-            </svg>
-             
-            Just me
-          </span>
-        </p>
-      </div>
-      <ul
-        class="list-unstyled"
-      >
-        <li
-          class="form-group"
-        >
-          <a
-            class="font-weight-bold"
-            href="https://www.facebook.com/aloha"
-          >
-            <svg
-              aria-hidden="true"
-              class="svg-inline--fa fa-facebook mr-2"
-              data-icon="facebook"
-              data-prefix="fab"
-              focusable="false"
-              role="img"
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5V334.2H141.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287V510.1C413.8 494.8 512 386.9 512 256h0z"
-                fill="currentColor"
-              />
-            </svg>
-            Facebook
-          </a>
-        </li>
-        <li
-          class="form-group"
-        >
-          <a
-            class="font-weight-bold"
-            href="https://www.twitter.com/ALOHA"
-          >
-            <svg
-              aria-hidden="true"
-              class="svg-inline--fa fa-twitter mr-2"
-              data-icon="twitter"
-              data-prefix="fab"
-              focusable="false"
-              role="img"
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
-                fill="currentColor"
-              />
-            </svg>
-            Twitter
-          </a>
-        </li>
-      </ul>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<SocialLinks /> calls social links with edit mode goals 1`] = `
-<div>
-  <div
-    class="pgn-transition-replace-group position-relative mb-5"
-  >
-    <div
-      style="padding: .1px 0px;"
-    >
-      <div
-        class="editable-item-header mb-2"
-      >
-        <h2
-          class="edit-section-header"
-        >
-          Social Links
-        </h2>
-      </div>
-      <ul
-        class="list-unstyled"
-      >
-        <li
-          class="mb-4"
-        >
-          <div>
-            <button
-              class="pl-0 text-left btn btn-link"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="svg-inline--fa fa-plus fa-xs mr-2"
-                data-icon="plus"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                viewBox="0 0 448 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z"
-                  fill="currentColor"
-                />
-              </svg>
-              Add Facebook
-            </button>
-          </div>
-        </li>
-        <li
-          class="mb-4"
-        >
-          <div>
-            <button
-              class="pl-0 text-left btn btn-link"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="svg-inline--fa fa-plus fa-xs mr-2"
-                data-icon="plus"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                viewBox="0 0 448 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z"
-                  fill="currentColor"
-                />
-              </svg>
-              Add Twitter
-            </button>
-          </div>
-        </li>
-      </ul>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<SocialLinks /> calls social links with edit mode socialLinks 1`] = `
-<div>
-  <div
-    class="pgn-transition-replace-group position-relative mb-5"
-  >
-    <div
-      style="padding: .1px 0px;"
-    >
-      <div
-        class="editable-item-header mb-2"
-      >
-        <h2
-          class="edit-section-header"
-        >
-          Social Links
-          <button
-            class="float-right px-0 btn btn-link btn-sm"
-            style="margin-top: -.35rem;"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="svg-inline--fa fa-pencil mr-1"
-              data-icon="pencil"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
-                fill="currentColor"
-              />
-            </svg>
-            Edit
-          </button>
-        </h2>
-        <p
-          class="mb-0"
-        >
-          <span
-            class="ml-auto small text-muted"
-          >
-            <svg
-              aria-hidden="true"
-              class="svg-inline--fa fa-eye-slash "
-              data-icon="eye-slash"
-              data-prefix="far"
-              focusable="false"
-              role="img"
-              viewBox="0 0 640 512"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm9.4 130.3C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5l-41.9-33zM192 256c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5z"
-                fill="currentColor"
-              />
-            </svg>
-             
-            Just me
-          </span>
-        </p>
-      </div>
-      <ul
-        class="list-unstyled"
-      >
-        <li
-          class="form-group"
-        >
-          <a
-            class="font-weight-bold"
-            href="https://www.facebook.com/aloha"
-          >
-            <svg
-              aria-hidden="true"
-              class="svg-inline--fa fa-facebook mr-2"
-              data-icon="facebook"
-              data-prefix="fab"
-              focusable="false"
-              role="img"
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5V334.2H141.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287V510.1C413.8 494.8 512 386.9 512 256h0z"
-                fill="currentColor"
-              />
-            </svg>
-            Facebook
-          </a>
-        </li>
-        <li
-          class="form-group"
-        >
-          <a
-            class="font-weight-bold"
-            href="https://www.twitter.com/ALOHA"
-          >
-            <svg
-              aria-hidden="true"
-              class="svg-inline--fa fa-twitter mr-2"
-              data-icon="twitter"
-              data-prefix="fab"
-              focusable="false"
-              role="img"
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
-                fill="currentColor"
-              />
-            </svg>
-            Twitter
-          </a>
-        </li>
-      </ul>
-    </div>
-  </div>
-</div>
-`;

src/profile/forms/elements/EditButton.jsx

@@ -1,39 +1,41 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faPencilAlt } from '@fortawesome/free-solid-svg-icons';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Button } from '@openedx/paragon';
-
+import { EditOutline } from '@openedx/paragon/icons';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Button, OverlayTrigger, Tooltip } from '@openedx/paragon';
 import messages from './EditButton.messages';
 
-const EditButton = ({
-  onClick, className, style, intl,
-}) => (
-  <Button
-    variant="link"
-    size="sm"
-    className={className}
-    onClick={onClick}
-    style={style}
-  >
-    <FontAwesomeIcon className="mr-1" icon={faPencilAlt} />
-    {intl.formatMessage(messages['profile.editbutton.edit'])}
-  </Button>
-);
+const EditButton = ({ onClick, className = null, style = null }) => {
+  const intl = useIntl();
+  return (
+    <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.editbutton.edit'])}
+          </p>
+        </Tooltip>
+      )}
+    >
+      <Button
+        variant="link"
+        size="sm"
+        className={className}
+        onClick={onClick}
+        style={style}
+      >
+        <EditOutline className="text-gray-700" />
+      </Button>
+    </OverlayTrigger>
+  );
+};
 
-export default injectIntl(EditButton);
+export default EditButton;
 
 EditButton.propTypes = {
   onClick: PropTypes.func.isRequired,
   className: PropTypes.string,
   style: PropTypes.object, // eslint-disable-line
-
-  // i18n
-  intl: intlShape.isRequired,
-};
-
-EditButton.defaultProps = {
-  className: null,
-  style: null,
 };

src/profile/forms/elements/EditButton.test.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import EditButton from './EditButton';
+
+const messages = {
+  'profile.editbutton.edit': 'Edit',
+};
+
+describe('EditButton', () => {
+  it('renders and calls onClick when clicked', () => {
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <IntlProvider locale="en" messages={messages}>
+        <EditButton onClick={onClick} />
+      </IntlProvider>,
+    );
+    const button = getByRole('button');
+    fireEvent.click(button);
+    expect(onClick).toHaveBeenCalled();
+  });
+});

src/profile/forms/elements/EditableItemHeader.jsx

@@ -1,25 +1,51 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import classNames from 'classnames';
 import EditButton from './EditButton';
 import { Visibility } from './Visibility';
+import { useIsOnMobileScreen } from '../../data/hooks';
 
 const EditableItemHeader = ({
-  content,
-  showVisibility,
-  visibility,
-  showEditButton,
-  onClickEdit,
-  headingId,
-}) => (
-  <div className="editable-item-header mb-2">
-    <h2 className="edit-section-header" id={headingId}>
-      {content}
-      {showEditButton ? <EditButton style={{ marginTop: '-.35rem' }} className="float-right px-0" onClick={onClickEdit} /> : null}
-    </h2>
-    {showVisibility ? <p className="mb-0"><Visibility to={visibility} /></p> : null}
-  </div>
-);
+  content = '',
+  showVisibility = false,
+  visibility = 'private',
+  showEditButton = false,
+  onClickEdit = () => {},
+  headingId = null,
+}) => {
+  const isMobileView = useIsOnMobileScreen();
+  return (
+    <>
+      <div className="row m-0 p-0 d-flex flex-nowrap align-items-center">
+        <div
+          className={classNames([
+            'm-0 p-0 col-auto',
+            isMobileView ? 'w-90' : '',
+          ])}
+        >
+          <h4
+            className="edit-section-header text-gray-700"
+            id={headingId}
+          >
+            {content}
+          </h4>
+        </div>
+        <div
+          className={classNames([
+            'col-auto m-0 p-0 d-flex align-items-center',
+            isMobileView ? 'col-1' : 'col-auto',
+          ])}
+        >
+          {showEditButton ? <EditButton className="p-1.5" onClick={onClickEdit} /> : null}
+        </div>
+      </div>
+      <div className="row m-0 p-0">
+        {showVisibility ? <p className="mb-0"><Visibility to={visibility} /></p> : null}
+      </div>
+    </>
+  );
+};
 
 export default EditableItemHeader;
 
@@ -31,12 +57,3 @@ EditableItemHeader.propTypes = {
   visibility: PropTypes.oneOf(['private', 'all_users']),
   headingId: PropTypes.string,
 };
-
-EditableItemHeader.defaultProps = {
-  onClickEdit: () => {},
-  showVisibility: false,
-  showEditButton: false,
-  content: '',
-  visibility: 'private',
-  headingId: null,
-};

src/profile/forms/elements/EmptyContent.jsx

@@ -3,17 +3,17 @@ import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faPlus } from '@fortawesome/free-solid-svg-icons';
 
-const EmptyContent = ({ children, onClick, showPlusIcon }) => (
-  <div>
+const EmptyContent = ({ children = null, onClick = null, showPlusIcon = true }) => (
+  <div className="p-0 m-0">
     {onClick ? (
       <button
         type="button"
-        className="pl-0 text-left btn btn-link"
+        className="p-0 text-left btn btn-link lh-36px"
         onClick={onClick}
         onKeyDown={(e) => { if (e.key === 'Enter') { onClick(); } }}
         tabIndex={0}
       >
-        {showPlusIcon ? <FontAwesomeIcon size="xs" className="mr-2" icon={faPlus} /> : null}
+        {showPlusIcon ? <FontAwesomeIcon size="xs" className="mr-1" icon={faPlus} /> : null}
         {children}
       </button>
     ) : children}
@@ -27,9 +27,3 @@ EmptyContent.propTypes = {
   children: PropTypes.node,
   showPlusIcon: PropTypes.bool,
 };
-
-EmptyContent.defaultProps = {
-  onClick: null,
-  children: null,
-  showPlusIcon: true,
-};

src/profile/forms/elements/FormControls.jsx

@@ -1,65 +1,83 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, StatefulButton } from '@openedx/paragon';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
 import messages from './FormControls.messages';
 
 import { VisibilitySelect } from './Visibility';
+import { useIsVisibilityEnabled } from '../../data/hooks';
 
 const FormControls = ({
-  cancelHandler, changeHandler, visibility, visibilityId, saveState, intl,
+  cancelHandler,
+  changeHandler,
+  visibility = 'private',
+  visibilityId,
+  saveState = null,
 }) => {
-  // Eliminate error/failed state for save button
+  const intl = useIntl();
   const buttonState = saveState === 'error' ? null : saveState;
+  const isVisibilityEnabled = useIsVisibilityEnabled();
 
   return (
     <div className="d-flex flex-row-reverse flex-wrap justify-content-end align-items-center">
-      <div className="form-group d-flex flex-wrap">
-        <label className="col-form-label" htmlFor={visibilityId}>
-          {intl.formatMessage(messages['profile.formcontrols.who.can.see'])}
-        </label>
-        <VisibilitySelect
-          id={visibilityId}
-          className="d-flex align-items-center"
-          type="select"
-          name={visibilityId}
-          value={visibility}
-          onChange={changeHandler}
-        />
-      </div>
-      <div className="form-group flex-shrink-0 flex-grow-1">
-        <StatefulButton
-          type="submit"
-          state={buttonState}
-          labels={{
-            default: intl.formatMessage(messages['profile.formcontrols.button.save']),
-            pending: intl.formatMessage(messages['profile.formcontrols.button.saving']),
-            complete: intl.formatMessage(messages['profile.formcontrols.button.saved']),
-          }}
-          onClick={(e) => {
-            // Swallow clicks if the state is pending.
-            // We do this instead of disabling the button to prevent
-            // it from losing focus (disabled elements cannot have focus).
-            // Disabling it would causes upstream issues in focus management.
-            // Swallowing the onSubmit event on the form would be better, but
-            // we would have to add that logic for every field given our
-            // current structure of the application.
-            if (buttonState === 'pending') {
-              e.preventDefault();
-            }
-          }}
-          disabledStates={[]}
-        />
-        <Button variant="link" onClick={cancelHandler}>
-          {intl.formatMessage(messages['profile.formcontrols.button.cancel'])}
-        </Button>
+      {isVisibilityEnabled && (
+        <div className="form-group d-flex flex-wrap">
+          <label className="col-form-label" htmlFor={visibilityId}>
+            {intl.formatMessage(messages['profile.formcontrols.who.can.see'])}
+          </label>
+          <VisibilitySelect
+            id={visibilityId}
+            className="d-flex align-items-center"
+            type="select"
+            name={visibilityId}
+            value={visibility}
+            onChange={changeHandler}
+          />
+        </div>
+      )}
+      <div className="row form-group flex-shrink-0 flex-grow-1 m-0 p-0">
+        <div className="pr-2 pl-0 m-0">
+          <Button variant="outline-primary" onClick={cancelHandler}>
+            {intl.formatMessage(messages['profile.formcontrols.button.cancel'])}
+          </Button>
+        </div>
+        <div className="p-0 m-0">
+          <StatefulButton
+            type="submit"
+            state={buttonState}
+            labels={{
+              default: intl.formatMessage(
+                messages['profile.formcontrols.button.save'],
+              ),
+              pending: intl.formatMessage(
+                messages['profile.formcontrols.button.saving'],
+              ),
+              complete: intl.formatMessage(
+                messages['profile.formcontrols.button.saved'],
+              ),
+            }}
+            onClick={(e) => {
+              // Swallow clicks if the state is pending.
+              // We do this instead of disabling the button to prevent
+              // it from losing focus (disabled elements cannot have focus).
+              // Disabling it would causes upstream issues in focus management.
+              // Swallowing the onSubmit event on the form would be better, but
+              // we would have to add that logic for every field given our
+              // current structure of the application.
+              if (buttonState === 'pending') {
+                e.preventDefault();
+              }
+            }}
+            disabledStates={[]}
+          />
+        </div>
       </div>
     </div>
   );
 };
 
-export default injectIntl(FormControls);
+export default FormControls;
 
 FormControls.propTypes = {
   saveState: PropTypes.oneOf([null, 'pending', 'complete', 'error']),
@@ -67,12 +85,4 @@ FormControls.propTypes = {
   visibilityId: PropTypes.string.isRequired,
   cancelHandler: PropTypes.func.isRequired,
   changeHandler: PropTypes.func.isRequired,
-
-  // i18n
-  intl: intlShape.isRequired,
-};
-
-FormControls.defaultProps = {
-  visibility: 'private',
-  saveState: null,
 };

src/profile/forms/elements/FormControls.test.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import FormControls from './FormControls';
+import messages from './FormControls.messages';
+
+const defaultProps = {
+  cancelHandler: jest.fn(),
+  changeHandler: jest.fn(),
+  visibilityId: 'visibility-id',
+  visibility: 'private',
+  saveState: null,
+};
+
+jest.mock('@edx/frontend-platform/i18n', () => {
+  const actual = jest.requireActual('@edx/frontend-platform/i18n');
+  return {
+    ...actual,
+    useIntl: () => ({
+      formatMessage: (msg) => msg.id, // returns id so we can assert on it
+    }),
+    injectIntl: (Component) => (props) => (
+      <Component
+        {...props}
+        intl={{
+          formatMessage: (msg) => msg.id, // returns id so we can assert on it
+        }}
+      />
+    ),
+    intlShape: {}, // optional, prevents prop-type warnings
+  };
+});
+
+jest.mock('../../data/hooks', () => ({
+  useIsVisibilityEnabled: () => true,
+}));
+
+describe('FormControls', () => {
+  it('renders Save button label when saveState is null', () => {
+    render(<FormControls {...defaultProps} />);
+    expect(
+      screen.getByRole('button', { name: messages['profile.formcontrols.button.save'].id }),
+    ).toBeInTheDocument();
+  });
+
+  it('renders Saved label when saveState is complete', () => {
+    render(<FormControls {...defaultProps} saveState="complete" />);
+    expect(
+      screen.getByRole('button', { name: messages['profile.formcontrols.button.saved'].id }),
+    ).toBeInTheDocument();
+  });
+
+  it('renders Saving label when saveState is pending', () => {
+    render(<FormControls {...defaultProps} saveState="pending" />);
+    expect(
+      screen.getByRole('button', { name: messages['profile.formcontrols.button.saving'].id }),
+    ).toBeInTheDocument();
+  });
+
+  it('calls cancelHandler when Cancel button is clicked', () => {
+    render(<FormControls {...defaultProps} />);
+    fireEvent.click(
+      screen.getByRole('button', { name: messages['profile.formcontrols.button.cancel'].id }),
+    );
+    expect(defaultProps.cancelHandler).toHaveBeenCalled();
+  });
+});

src/profile/forms/elements/SwitchContent.jsx

@@ -3,18 +3,13 @@ import PropTypes from 'prop-types';
 import { TransitionReplace } from '@openedx/paragon';
 
 const onChildExit = (htmlNode) => {
-  // If the leaving child has focus, take control and redirect it
   if (htmlNode.contains(document.activeElement)) {
-    // Get the newly entering sibling.
-    // It's the previousSibling, but not for any explicit reason. So checking for both.
     const enteringChild = htmlNode.previousSibling || htmlNode.nextSibling;
 
-    // There's no replacement, do nothing.
     if (!enteringChild) {
       return;
     }
 
-    // Get all the focusable elements in the entering child and focus the first one
     const focusableElements = enteringChild.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
     if (focusableElements.length) {
       focusableElements[0].focus();
@@ -22,7 +17,7 @@ const onChildExit = (htmlNode) => {
   }
 };
 
-const SwitchContent = ({ expression, cases, className }) => {
+const SwitchContent = ({ expression = null, cases, className = null }) => {
   const getContent = (caseKey) => {
     if (cases[caseKey]) {
       if (typeof cases[caseKey] === 'string') {
@@ -56,9 +51,4 @@ SwitchContent.propTypes = {
   className: PropTypes.string,
 };
 
-SwitchContent.defaultProps = {
-  expression: null,
-  className: null,
-};
-
 export default SwitchContent;

src/profile/forms/elements/SwitchContent.test.jsx

@@ -0,0 +1,80 @@
+/* eslint-disable react/prop-types */
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import SwitchContent from './SwitchContent';
+
+jest.mock('@openedx/paragon', () => ({
+  TransitionReplace: ({ children, onChildExit, className }) => (
+    <div data-testid="transition" data-class={className} data-onchildexit={!!onChildExit}>
+      {children}
+    </div>
+  ),
+}));
+
+describe('SwitchContent', () => {
+  const makeElement = (text) => <div>{text}</div>;
+
+  it('renders matching case element directly', () => {
+    render(
+      <SwitchContent
+        expression="one"
+        cases={{ one: makeElement('Case One') }}
+      />,
+    );
+    expect(screen.getByText('Case One')).toBeInTheDocument();
+  });
+
+  it('renders case via string alias', () => {
+    render(
+      <SwitchContent
+        expression="alias"
+        cases={{
+          alias: 'target',
+          target: makeElement('Target Case'),
+        }}
+      />,
+    );
+    expect(screen.getByText('Target Case')).toBeInTheDocument();
+  });
+
+  it('renders default alias when expression not found', () => {
+    render(
+      <SwitchContent
+        expression="missing"
+        cases={{
+          default: 'target',
+          target: makeElement('Target via Default'),
+        }}
+      />,
+    );
+    expect(screen.getByText('Target via Default')).toBeInTheDocument();
+  });
+
+  it('renders null when no matching case and no default', () => {
+    const { container } = render(
+      <SwitchContent
+        expression="missing"
+        cases={{ something: makeElement('Something') }}
+      />,
+    );
+    expect(container.querySelector('[data-testid="transition"]').textContent).toBe('');
+  });
+
+  it('calls onChildExit when child exits', () => {
+    const onChildExit = jest.fn();
+    render(
+      <SwitchContent
+        expression="one"
+        cases={{ one: makeElement('Case One') }}
+        className="test-class"
+      />,
+    );
+    const transition = screen.getByTestId('transition');
+    transition.dataset.onchildexit = onChildExit;
+
+    // Simulate child exit
+    onChildExit(transition);
+    expect(onChildExit).toHaveBeenCalledWith(transition);
+  });
+});

src/profile/forms/elements/Visibility.jsx

@@ -1,17 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faEyeSlash, faEye } from '@fortawesome/free-regular-svg-icons';
 
 import messages from './Visibility.messages';
 
-const Visibility = ({ to, intl }) => {
+const Visibility = ({ to = 'private' }) => {
+  const intl = useIntl();
   const icon = to === 'private' ? faEyeSlash : faEye;
   const label = to === 'private'
     ? intl.formatMessage(messages['profile.visibility.who.just.me'])
-    : intl.formatMessage(messages['profile.visibility.who.everyone'], { siteName: getConfig().SITE_NAME });
+    : intl.formatMessage(messages['profile.visibility.who.everyone'], {
+      siteName: getConfig().SITE_NAME,
+    });
 
   return (
     <span className="ml-auto small text-muted">
@@ -22,29 +25,39 @@ const Visibility = ({ to, intl }) => {
 
 Visibility.propTypes = {
   to: PropTypes.oneOf(['private', 'all_users']),
-
-  // i18n
-  intl: intlShape.isRequired,
-};
-Visibility.defaultProps = {
-  to: 'private',
 };
 
-const VisibilitySelect = ({ intl, className, ...props }) => {
-  const { value } = props;
+const VisibilitySelect = ({
+  id = null,
+  className = null,
+  name = 'visibility',
+  value = null,
+  onChange = null,
+  ...props
+}) => {
+  const intl = useIntl();
   const icon = value === 'private' ? faEyeSlash : faEye;
 
   return (
     <span className={className}>
-      <span className="d-inline-block ml-1 mr-2" style={{ width: '1.5rem' }}>
+      <span className="d-inline-block ml-1 mr-2 width-24px">
         <FontAwesomeIcon icon={icon} />
       </span>
-      <select className="d-inline-block form-control" {...props}>
+      <select
+        className="d-inline-block form-control"
+        id={id}
+        name={name}
+        value={value}
+        onChange={onChange}
+        {...props}
+      >
         <option key="private" value="private">
           {intl.formatMessage(messages['profile.visibility.who.just.me'])}
         </option>
         <option key="all_users" value="all_users">
-          {intl.formatMessage(messages['profile.visibility.who.everyone'], { siteName: getConfig().SITE_NAME })}
+          {intl.formatMessage(messages['profile.visibility.who.everyone'], {
+            siteName: getConfig().SITE_NAME,
+          })}
         </option>
       </select>
     </span>
@@ -57,22 +70,6 @@ VisibilitySelect.propTypes = {
   name: PropTypes.string,
   value: PropTypes.oneOf(['private', 'all_users']),
   onChange: PropTypes.func,
-
-  // i18n
-  intl: intlShape.isRequired,
-};
-VisibilitySelect.defaultProps = {
-  id: null,
-  className: null,
-  name: 'visibility',
-  value: null,
-  onChange: null,
 };
 
-const intlVisibility = injectIntl(Visibility);
-const intlVisibilitySelect = injectIntl(VisibilitySelect);
-
-export {
-  intlVisibility as Visibility,
-  intlVisibilitySelect as VisibilitySelect,
-};
+export { Visibility, VisibilitySelect };

src/profile/forms/elements/Visibility.test.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { Visibility, VisibilitySelect } from './Visibility';
+import '@testing-library/jest-dom';
+
+const messages = {
+  'profile.visibility.who.just.me': 'Just me',
+  'profile.visibility.who.everyone': 'Everyone',
+};
+
+describe('Visibility', () => {
+  it('shows the correct icon and label for private', () => {
+    const { getByText } = render(
+      <IntlProvider locale="en" messages={messages}>
+        <Visibility to="private" />
+      </IntlProvider>,
+    );
+    expect(getByText(/just me/i)).toBeInTheDocument();
+  });
+  it('shows the correct icon and label for all_users', () => {
+    const { getByText } = render(
+      <IntlProvider locale="en" messages={messages}>
+        <Visibility to="all_users" />
+      </IntlProvider>,
+    );
+    expect(getByText(/everyone/i)).toBeInTheDocument();
+  });
+});
+
+describe('VisibilitySelect', () => {
+  it('renders both options', () => {
+    const { getByRole, getAllByRole } = render(
+      <IntlProvider locale="en" messages={messages}>
+        <VisibilitySelect value="private" onChange={() => {}} />
+      </IntlProvider>,
+    );
+    const select = getByRole('combobox');
+    const options = getAllByRole('option');
+    expect(select).toBeInTheDocument();
+    expect(options.length).toBe(2);
+  });
+});

src/profile/index.scss

@@ -17,56 +17,46 @@
 }
 
 .profile-page-bg-banner {
-  height: 12rem;
+  height: 298px;
+  width: 100%;
   background-image: url('./assets/dot-pattern-light.png');
   background-repeat: repeat-x;
   background-size: auto 85%;
 }
 
-.username-description {
-  width: auto;
-  position: absolute;
-  left: 1.5rem;
-  top: 5.25rem;
-  color: $gray-500;
-  line-height: 0.9rem;
-  font-size: 0.8rem;
-  font-style: normal;
-  font-weight: 400;
-  margin-left: 0.9rem;
-}
-
-.mb-2rem {
-  margin-bottom: 2rem;
-}
-
 .icon-visibility-off {
   height: 1rem;
-  color: $gray-500;
+  color: var(--pgn-color-gray-500);
 }
 
 .profile-page {
   .edit-section-header {
-    @extend .h6;
+    font-size: var(--pgn-typography-font-size-h4-base);
     display: block;
-    font-weight: normal;
+    font-weight: 400;
     letter-spacing: 0;
     margin: 0;
+    line-height: 2.25rem;
   }
 
   label.edit-section-header {
-    margin-bottom: $spacer * .5;
+    margin-bottom: calc(var(--pgn-spacing-spacer-base) * .5);
   }
 
   .profile-avatar-wrap {
-    @include media-breakpoint-up(md) {
+    @media (--pgn-size-breakpoint-min-width-md) {
       max-width: 12rem;
       margin-right: 0;
-      margin-top: -8rem;
-      margin-bottom: 2rem;
+      height: auto;
     }
   }
 
+  .profile-avatar-button {
+    position: absolute;
+    left: 76px;
+    top: 76px;
+  }
+
   .profile-avatar-menu-container {
     background: rgba(0,0,0,.65);
     position: absolute;
@@ -77,25 +67,25 @@
     align-items: center;
     border-radius: 50%;
 
-    @include media-breakpoint-up(md) {
+    @media (--pgn-size-breakpoint-min-width-md) {
       background: linear-gradient(to top, rgba(0,0,0,.65) 4rem, rgba(0,0,0,0) 4rem);
       align-items: flex-end;
     }
 
     .btn {
       text-decoration: none;
-      @include media-breakpoint-up(md) {
+      @media (--pgn-size-breakpoint-min-width-md) {
         margin-bottom: 1.2rem;
       }
     }
 
     .dropdown {
-      @include media-breakpoint-up(md) {
+      @media (--pgn-size-breakpoint-min-width-md) {
         margin-bottom: 1.2rem;
       }
 
       .btn {
-        color: $white;
+        color:var(--pgn-color-white);;
         background: transparent;
         border-color: transparent;
         margin: 0;
@@ -104,13 +94,13 @@
   }
 
   .profile-avatar {
-    width: 5rem;
-    height: 5rem;
+    width: 7.5rem;
+    height: 7.5rem;
     position: relative;
 
-    @include media-breakpoint-up(md) {
-      width: 12rem;
-      height: 12rem;
+    @media (--pgn-size-breakpoint-min-width-md) {
+      width: 7.5rem;
+      height: 7.5rem;
     }
 
     .profile-avatar-edit-button {
@@ -128,7 +118,7 @@
       border-radius:0;
       transition: opacity 200ms ease;
 
-      @include media-breakpoint-up(md) {
+      @media (--pgn-size-breakpoint-min-width-md) {
         height: 4rem;
       }
 
@@ -139,27 +129,133 @@
   }
 
   .certificate {
-    position: relative;
-
-    .certificate-title {
-      font-family: $font-family-serif;
-      font-weight: 400;
-    }
+    background-color: #F3F1ED;
+    border-radius: 0.75rem;
+    overflow: hidden;
+    border: 1px #E7E4DB solid;
 
     .certificate-type-illustration {
       position: absolute;
       top: 1rem;
       right: 1rem;
       bottom: 0;
-      width: 12rem;
+      width: 15.15rem;
       opacity: .06;
       background-size: 90%;
       background-repeat: no-repeat;
       background-position: right top;
     }
-
-    .card-body {
-      position: relative;
-    }
   }
 }
+
+.info-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  padding-left: 0.125rem;
+}
+
+.max-width-32em {
+  max-width: 32em;
+}
+
+.height-50vh {
+  height: 50vh;
+}
+
+// Todo: Move the following to edx-paragon
+
+.min-width-179px {
+  min-width: 179px;
+}
+
+.max-width-304px{
+  max-width: 304px;
+}
+
+.width-314px {
+  width: 314px;
+}
+
+.w-90{
+  max-width: 90%;
+}
+
+.width-24px{
+  width: 24px;
+}
+
+.height-42px {
+  height: 42px;
+}
+
+.rounded-75 {
+  border-radius: 0.75rem;
+}
+
+.pt-40px{
+  padding-top: 40px;
+}
+
+.pl-40px {
+  padding-left: 40px;
+}
+
+.py-10px{
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.py-36px {
+  padding-top: 36px;
+  padding-bottom: 36px;
+}
+
+.px-120px {
+  padding-left: 120px;
+  padding-right: 120px;
+}
+
+.px-40px {
+  padding-left: 40px;
+  padding-right: 40px;
+}
+
+.g-15rem {
+  gap: 1.5rem;
+}
+
+.g-5rem {
+  gap: 0.5rem;
+}
+
+.g-1rem {
+  gap: 1rem;
+}
+
+.g-3rem {
+  gap: 3rem;
+}
+
+.color-black {
+  color: #000;
+}
+
+.bg-color-grey-FBFAF9 {
+  background-color: #FBFAF9;
+}
+
+.background-black-65 {
+  background-color: rgba(0,0,0,.65)
+}
+
+.object-fit-cover {
+  object-fit: cover;
+}
+
+.lh-36px {
+  line-height: 36px;
+}
+
+.overflowWrap-breakWord {
+  overflow-wrap: break-word;
+}

src/profile/utils.js

@@ -2,7 +2,6 @@ import camelCase from 'lodash.camelcase';
 import snakeCase from 'lodash.snakecase';
 
 export function modifyObjectKeys(object, modify) {
-  // If the passed in object is not an object, return it.
   if (
     object === undefined
     || object === null
@@ -15,7 +14,6 @@ export function modifyObjectKeys(object, modify) {
     return object.map(value => modifyObjectKeys(value, modify));
   }
 
-  // Otherwise, process all its keys.
   const result = {};
   Object.entries(object).forEach(([key, value]) => {
     result[modify(key)] = modifyObjectKeys(value, modify);

src/routes/AppRoutes.jsx

@@ -1,8 +1,5 @@
 import React from 'react';
-import {
-  AuthenticatedPageRoute,
-  PageWrap,
-} from '@edx/frontend-platform/react';
+import { AuthenticatedPageRoute, PageWrap } from '@edx/frontend-platform/react';
 import { Routes, Route, useNavigate } from 'react-router-dom';
 import { ProfilePage, NotFoundPage } from '../profile';