chore: sync with master

Merge pull request #1137 from openedx/sundasNew/INF-1594
feat: fixed reloading issue
2025-03-18 14:20:33 +05:00 · 2024-11-26 16:06:30 +05:00 · 2024-11-26 13:14:24 +05:00 · 2024-11-26 12:44:17 +05:00 · 2024-11-25 17:28:54 +05:00 · 2024-11-18 13:36:52 +05:00
55 changed files with 7840 additions and 17 deletions
--- a/.env
+++ b/.env
@@ -29,3 +29,4 @@ APP_ID=''
 MFE_CONFIG_API_URL=''
 SEARCH_CATALOG_URL=''
 ENABLE_SKILLS_BUILDER_PROFILE=''
+ENABLE_NEW_PROFILE_VIEW=''
--- a/.env.development
+++ b/.env.development
@@ -30,3 +30,4 @@ APP_ID=''
 MFE_CONFIG_API_URL=''
 SEARCH_CATALOG_URL='http://localhost:18000/courses'
 ENABLE_SKILLS_BUILDER_PROFILE=''
+ENABLE_NEW_PROFILE_VIEW=''
--- a/.env.test
+++ b/.env.test
@@ -25,3 +25,4 @@ LEARNER_RECORD_MFE_BASE_URL='http://localhost:1990'
 COLLECT_YEAR_OF_BIRTH=true
 APP_ID=''
 MFE_CONFIG_API_URL=''
+ENABLE_NEW_PROFILE_VIEW=''
--- a/src/data/reducers.js
+++ b/src/data/reducers.js
@@ -1,9 +1,14 @@
 import { combineReducers } from 'redux';

-import { reducer as profilePage } from '../profile';
+import { getConfig } from '@edx/frontend-platform';
+
+import { reducer as profilePageReducer } from '../profile';
+import { reducer as newProfilePageReducer } from '../profile-v2';
+
+const isNewProfileEnabled = getConfig().ENABLE_NEW_PROFILE_VIEW;

 const createRootReducer = () => combineReducers({
-  profilePage,
+  profilePage: isNewProfileEnabled ? newProfilePageReducer : profilePageReducer,
 });

 export default createRootReducer;
--- a/src/data/sagas.js
+++ b/src/data/sagas.js
@@ -1,9 +1,12 @@
 import { all } from 'redux-saga/effects';
-
+import { getConfig } from '@edx/frontend-platform';
 import { saga as profileSaga } from '../profile';
+import { saga as newProfileSaga } from '../profile-v2';
+
+const isNewProfileEnabled = getConfig().ENABLE_NEW_PROFILE_VIEW;

 export default function* rootSaga() {
  yield all([
-    profileSaga(),
+    isNewProfileEnabled ? newProfileSaga() : profileSaga(),
  ]);
 }
--- a/src/index-v2.scss
+++ b/src/index-v2.scss
@@ -0,0 +1,8 @@
+@import "~@edx/brand/paragon/fonts";
+@import "~@edx/brand/paragon/variables";
+@import "~@openedx/paragon/scss/core/core";
+@import "~@edx/brand/paragon/overrides";
+@import "~@edx/frontend-component-header/dist/index";
+@import "~@edx/frontend-component-footer/dist/footer";
+
+@import './profile-v2/index';
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -7,6 +7,7 @@ import {
  initialize,
  mergeConfig,
  subscribe,
+  getConfig,
 } from '@edx/frontend-platform';
 import {
  AppProvider,
@@ -22,18 +23,23 @@ import FooterSlot from '@openedx/frontend-slot-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, () => {
+subscribe(APP_READY, async () => {
+  const isNewProfileEnabled = getConfig().ENABLE_NEW_PROFILE_VIEW === 'true';
+  if (isNewProfileEnabled) {
+    await import('./index-v2.scss');
+  } else {
+    await import('./index.scss');
+  }
  ReactDOM.render(
    <AppProvider store={configureStore()}>
      <Head />
      <Header />
      <main id="main">
-        <AppRoutes />
+        <AppRoutes isNewProfileEnabled={isNewProfileEnabled} />
      </main>
      <FooterSlot />
    </AppProvider>,
@@ -53,6 +59,7 @@ initialize({
      mergeConfig({
        COLLECT_YEAR_OF_BIRTH: process.env.COLLECT_YEAR_OF_BIRTH,
        ENABLE_SKILLS_BUILDER_PROFILE: process.env.ENABLE_SKILLS_BUILDER_PROFILE,
+        ENABLE_NEW_PROFILE_VIEW: process.env.ENABLE_NEW_PROFILE_VIEW || null,
      }, 'App loadConfig override handler');
    },
  },
--- a/src/profile-v2/CertificateCard.jsx
+++ b/src/profile-v2/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-19rem': isMobileView },
+          { 'width-19625rem': !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 btn-rounded font-weight-normal px-4 py-0625rem',
+                { '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;
--- a/src/profile-v2/Certificates.jsx
+++ b/src/profile-v2/Certificates.jsx
@@ -0,0 +1,101 @@
+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 { useIsOnMobileScreen, useIsOnTabletScreen } from './data/hooks';
+
+const Certificates = ({ certificates }) => {
+  const isMobileView = useIsOnMobileScreen();
+  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-2625rem justify-content-start align-items-start p-0">
+          <p className={classNames([
+            'font-weight-bold text-primary-500 m-0',
+            isMobileView ? 'h3' : '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={classNames([
+            'font-weight-normal text-gray-800 m-0 p-0',
+            isMobileView ? 'h5' : 'p',
+          ])}
+          >
+            <FormattedMessage
+              id="profile.certificates.description"
+              defaultMessage="Your learner records information is only visible to you. Only your username is 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);
--- a/src/profile-v2/Certificates.messages.jsx
+++ b/src/profile-v2/Certificates.messages.jsx
@@ -0,0 +1,31 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  'profile.certificates.my.certificates': {
+    id: 'profile.certificates.my.certificates',
+    defaultMessage: 'My Certificates',
+    description: 'A section of a user profile',
+  },
+  'profile.certificates.view.certificate': {
+    id: 'profile.certificates.view.certificate',
+    defaultMessage: 'View Certificate',
+    description: 'A call to action to view a certificate',
+  },
+  'profile.certificates.types.verified': {
+    id: 'profile.certificates.types.verified',
+    defaultMessage: 'Verified Certificate',
+    description: 'A type of certificate a user may have earned',
+  },
+  'profile.certificates.types.professional': {
+    id: 'profile.certificates.types.professional',
+    defaultMessage: 'Professional Certificate',
+    description: 'A type of certificate a user may have earned',
+  },
+  'profile.certificates.types.unknown': {
+    id: 'profile.certificates.types.unknown',
+    defaultMessage: 'Certificate',
+    description: 'The string to display when a certificate is of an unknown type',
+  },
+});
+
+export default messages;
--- a/src/profile-v2/DateJoined.jsx
+++ b/src/profile-v2/DateJoined.jsx
@@ -0,0 +1,29 @@
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage, FormattedDate } from '@edx/frontend-platform/i18n';
+
+const DateJoined = ({ date }) => {
+  if (!date) { return null; }
+
+  return (
+    <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: <span className="font-weight-bold"> <FormattedDate value={new Date(date)} year="numeric" /> </span>,
+        }}
+      />
+    </span>
+  );
+};
+
+DateJoined.propTypes = {
+  date: PropTypes.string,
+};
+DateJoined.defaultProps = {
+  date: null,
+};
+
+export default memo(DateJoined);
--- a/src/profile-v2/NotFoundPage.jsx
+++ b/src/profile-v2/NotFoundPage.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+
+const NotFoundPage = () => (
+  <div className="container-fluid d-flex py-5 justify-content-center align-items-start text-center">
+    <p className="my-0 py-5 text-muted max-width-32em">
+      <FormattedMessage
+        id="profile.notfound.message"
+        defaultMessage="The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again."
+        description="error message when a page does not exist"
+      />
+    </p>
+  </div>
+);
+
+export default NotFoundPage;
--- a/src/profile-v2/PageLoading.jsx
+++ b/src/profile-v2/PageLoading.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const PageLoading = ({ srMessage }) => (
+  <div>
+    <div className="d-flex justify-content-center align-items-center flex-column height-50vh">
+      <div className="spinner-border text-primary" role="status">
+        {srMessage && <span className="sr-only">{srMessage}</span>}
+      </div>
+    </div>
+  </div>
+);
+
+PageLoading.propTypes = {
+  srMessage: PropTypes.string.isRequired,
+};
+
+export default PageLoading;
--- a/src/profile-v2/ProfilePage.jsx
+++ b/src/profile-v2/ProfilePage.jsx
@@ -0,0 +1,215 @@
+import React, {
+  useEffect, useState, useContext, useCallback,
+} from 'react';
+import PropTypes from 'prop-types';
+import { useDispatch, useSelector } from 'react-redux';
+import { sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
+import { ensureConfig, getConfig } from '@edx/frontend-platform';
+import { AppContext } from '@edx/frontend-platform/react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Alert, Hyperlink } from '@openedx/paragon';
+import classNames from 'classnames';
+import {
+  fetchProfile,
+  saveProfilePhoto,
+  deleteProfilePhoto,
+} from './data/actions';
+import ProfileAvatar from './forms/ProfileAvatar';
+import Certificates from './Certificates';
+import DateJoined from './DateJoined';
+import UserCertificateSummary from './UserCertificateSummary';
+import UsernameDescription from './UsernameDescription';
+import PageLoading from './PageLoading';
+import { profilePageSelector } from './data/selectors';
+import messages from './ProfilePage.messages';
+import withParams from '../utils/hoc';
+import { useIsOnMobileScreen, useIsOnTabletScreen } from './data/hooks';
+
+ensureConfig(['CREDENTIALS_BASE_URL', 'LMS_BASE_URL'], 'ProfilePage');
+
+const ProfilePage = ({ params }) => {
+  const dispatch = useDispatch();
+  const intl = useIntl();
+  const context = useContext(AppContext);
+  const {
+    requiresParentalConsent,
+    dateJoined,
+    yearOfBirth,
+    courseCertificates,
+    name,
+    profileImage,
+    savePhotoState,
+    isLoadingProfile,
+    photoUploadError,
+  } = useSelector(profilePageSelector);
+
+  const [viewMyRecordsUrl, setViewMyRecordsUrl] = useState(null);
+  const isMobileView = useIsOnMobileScreen();
+  const isTabletView = useIsOnTabletScreen();
+
+  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: params.username,
+    });
+  }, [dispatch, params.username, context.config]);
+
+  const handleSaveProfilePhoto = useCallback((formData) => {
+    dispatch(saveProfilePhoto(context.authenticatedUser.username, formData));
+  }, [dispatch, context.authenticatedUser.username]);
+
+  const handleDeleteProfilePhoto = useCallback(() => {
+    dispatch(deleteProfilePhoto(context.authenticatedUser.username));
+  }, [dispatch, context.authenticatedUser.username]);
+
+  const isYOBDisabled = () => {
+    const currentYear = new Date().getFullYear();
+    const isAgeOrNotCompliant = !yearOfBirth || ((currentYear - yearOfBirth) < 13);
+    return isAgeOrNotCompliant && getConfig().COLLECT_YEAR_OF_BIRTH !== 'true';
+  };
+
+  const isAuthenticatedUserProfile = () => params.username === context.authenticatedUser.username;
+
+  const isBlockVisible = (blockInfo) => isAuthenticatedUserProfile()
+      || (!isAuthenticatedUserProfile() && Boolean(blockInfo));
+
+  const renderViewMyRecordsButton = () => {
+    if (!(viewMyRecordsUrl && isAuthenticatedUserProfile())) {
+      return null;
+    }
+
+    return (
+      <Hyperlink
+        className={classNames(
+          'btn btn-brand btn-rounded font-weight-normal px-4 py-0625rem text-nowrap',
+          { 'btn-sm': isMobileView },
+        )}
+        target="_blank"
+        showLaunchIcon={false}
+        destination={viewMyRecordsUrl}
+      >
+        {intl.formatMessage(messages['profile.viewMyRecords'])}
+      </Hyperlink>
+    );
+  };
+
+  const renderPhotoUploadErrorMessage = () => (
+    photoUploadError && (
+    <div className="row">
+      <div className="col-md-4 col-lg-3">
+        <Alert variant="danger" dismissible={false} show>
+          {photoUploadError.userMessage}
+        </Alert>
+      </div>
+    </div>
+    )
+  );
+
+  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 py-4rem h-100 w-100',
+              { 'px-4.5': isMobileView },
+              { 'px-75rem': !isMobileView },
+            )}
+          >
+            <div className="col container-fluid w-100 h-100 bg-white py-0 px-25rem rounded-75">
+              <div className="col h-100 w-100 py-4 px-0 justify-content-start g-15rem">
+                <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() && !requiresParentalConsent}
+                  />
+                  <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={classNames([
+                      'row m-0 font-weight-bold text-truncate text-primary-500',
+                      isMobileView ? 'h4' : 'h3',
+                    ])}
+                    >
+                      {params.username}
+                    </p>
+                    {isBlockVisible(name) && (
+                    <p className={classNames([
+                      'row pt-2 text-gray-800 font-weight-normal m-0',
+                      isMobileView ? 'h5' : '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} />
+                    </div>
+                  </div>
+                  <div className={classNames([
+                    'p-0 ',
+                    isMobileView || isTabletView ? 'col d-flex justify-content-center' : 'col-auto',
+                  ])}
+                  >
+                    {renderViewMyRecordsButton()}
+                  </div>
+                </div>
+                <div className="row-auto d-flex align-items-center h-100 w-100 justify-content-start m-0 pt-4">
+                  {isYOBDisabled() && <UsernameDescription />}
+                </div>
+              </div>
+              <div className="ml-auto">
+                {renderPhotoUploadErrorMessage()}
+              </div>
+            </div>
+          </div>
+          <div className="col container-fluid d-inline-flex px-75rem pt-4rem pb-6 h-100 w-100 align-items-start justify-content-center g-3rem">
+            {isBlockVisible(courseCertificates.length) && (
+              <Certificates
+                certificates={courseCertificates}
+                formId="certificates"
+              />
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+ProfilePage.propTypes = {
+  params: PropTypes.shape({
+    username: PropTypes.string.isRequired,
+  }).isRequired,
+};
+
+export default withParams(ProfilePage);
--- a/src/profile-v2/ProfilePage.messages.jsx
+++ b/src/profile-v2/ProfilePage.messages.jsx
@@ -0,0 +1,16 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  'profile.viewMyRecords': {
+    id: 'profile.viewMyRecords',
+    defaultMessage: 'View My Records',
+    description: 'A link to go view my academic records',
+  },
+  'profile.loading': {
+    id: 'profile.loading',
+    defaultMessage: 'Profile loading...',
+    description: 'Message displayed when the profile data is loading.',
+  },
+});
+
+export default messages;
--- a/src/profile-v2/ProfilePage.test.jsx
+++ b/src/profile-v2/ProfilePage.test.jsx
@@ -0,0 +1,185 @@
+import { getConfig } from '@edx/frontend-platform';
+import * as analytics from '@edx/frontend-platform/analytics';
+import { AppContext } from '@edx/frontend-platform/react';
+import { configure as configureI18n, IntlProvider } from '@edx/frontend-platform/i18n';
+import { render } from '@testing-library/react';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Provider } from 'react-redux';
+import configureMockStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+
+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';
+
+const mockStore = configureMockStore([thunk]);
+
+const storeMocks = {
+  loadingApp,
+  viewOwnProfile,
+  viewOtherProfile,
+};
+const requiredProfilePageProps = {
+  fetchUserAccount: () => {},
+  fetchProfile: () => {},
+  params: { username: 'staff' },
+};
+
+// Mock language cookie
+Object.defineProperty(global.document, 'cookie', {
+  writable: true,
+  value: `${getConfig().LANGUAGE_PREFERENCE_COOKIE_NAME}=en`,
+});
+
+jest.mock('@edx/frontend-platform/auth', () => ({
+  configure: () => {},
+  getAuthenticatedUser: () => null,
+  fetchAuthenticatedUser: () => null,
+  getAuthenticatedHttpClient: jest.fn(),
+  AUTHENTICATED_USER_CHANGED: 'user_changed',
+}));
+
+jest.mock('@edx/frontend-platform/analytics', () => ({
+  configure: () => {},
+  identifyAnonymousUser: jest.fn(),
+  identifyAuthenticatedUser: jest.fn(),
+  sendTrackingLogEvent: jest.fn(),
+}));
+
+configureI18n({
+  loggingService: { logError: jest.fn() },
+  config: {
+    ENVIRONMENT: 'production',
+    LANGUAGE_PREFERENCE_COOKIE_NAME: 'yum',
+  },
+  messages,
+});
+
+beforeEach(() => {
+  analytics.sendTrackingLogEvent.mockReset();
+});
+
+const ProfilePageWrapper = ({
+  contextValue, store, params,
+}) => (
+  <AppContext.Provider
+    value={contextValue}
+  >
+    <IntlProvider locale="en">
+      <Provider store={store}>
+        <ProfilePage {...requiredProfilePageProps} params={params} />
+      </Provider>
+    </IntlProvider>
+  </AppContext.Provider>
+);
+
+ProfilePageWrapper.defaultProps = {
+  params: { username: 'staff' },
+};
+
+ProfilePageWrapper.propTypes = {
+  contextValue: PropTypes.shape({}).isRequired,
+  store: PropTypes.shape({}).isRequired,
+  params: PropTypes.shape({}),
+};
+
+describe('<ProfilePage />', () => {
+  describe('Renders correctly in various states', () => {
+    it('app loading', () => {
+      const contextValue = {
+        authenticatedUser: { userId: null, username: null, administrator: false },
+        config: getConfig(),
+      };
+      const component = <ProfilePageWrapper contextValue={contextValue} store={mockStore(storeMocks.loadingApp)} />;
+      const { container: tree } = render(component);
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('viewing own profile', () => {
+      const contextValue = {
+        authenticatedUser: { userId: 123, username: 'staff', administrator: true },
+        config: getConfig(),
+      };
+      const component = <ProfilePageWrapper contextValue={contextValue} store={mockStore(storeMocks.viewOwnProfile)} />;
+      const { container: tree } = render(component);
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('viewing other profile with all fields', () => {
+      const contextValue = {
+        authenticatedUser: { userId: 123, username: 'staff', administrator: true },
+        config: getConfig(),
+      };
+
+      const component = (
+        <ProfilePageWrapper
+          contextValue={contextValue}
+          store={mockStore({
+            ...storeMocks.viewOtherProfile,
+            profilePage: {
+              ...storeMocks.viewOtherProfile.profilePage,
+              account: {
+                ...storeMocks.viewOtherProfile.profilePage.account,
+                name: 'user',
+                country: 'EN',
+                bio: 'bio',
+                courseCertificates: ['course certificates'],
+                levelOfEducation: 'some level',
+                languageProficiencies: ['some lang'],
+                socialLinks: ['twitter'],
+                timeZone: 'time zone',
+                accountPrivacy: 'all_users',
+              },
+            },
+          })}
+          match={{ params: { username: 'verified' } }} // Override default match
+        />
+      );
+      const { container: tree } = render(component);
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('without credentials service', () => {
+      const config = getConfig();
+      config.CREDENTIALS_BASE_URL = '';
+
+      const contextValue = {
+        authenticatedUser: { userId: 123, username: 'staff', administrator: true },
+        config: getConfig(),
+      };
+      const component = (
+        <ProfilePageWrapper
+          contextValue={contextValue}
+          store={mockStore(storeMocks.viewOwnProfile)}
+        />
+      );
+      const { container: tree } = render(component);
+      expect(tree).toMatchSnapshot();
+    });
+  });
+
+  describe('handles analytics', () => {
+    it('calls sendTrackingLogEvent when mounting', () => {
+      const contextValue = {
+        authenticatedUser: { userId: 123, username: 'staff', administrator: true },
+        config: getConfig(),
+      };
+      render(
+        <ProfilePageWrapper
+          contextValue={contextValue}
+          store={mockStore(storeMocks.loadingApp)}
+          params={{ username: 'test-username' }}
+        />,
+      );
+
+      expect(analytics.sendTrackingLogEvent.mock.calls.length).toBe(1);
+      expect(analytics.sendTrackingLogEvent.mock.calls[0][0]).toEqual('edx.profile.viewed');
+      expect(analytics.sendTrackingLogEvent.mock.calls[0][1]).toEqual({
+        username: 'test-username',
+      });
+    });
+  });
+});
--- a/src/profile-v2/UserCertificateSummary.jsx
+++ b/src/profile-v2/UserCertificateSummary.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+
+const UserCertificateSummary = ({ count = 0 }) => (
+  <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>
+);
+
+UserCertificateSummary.propTypes = {
+  count: PropTypes.number,
+};
+
+export default UserCertificateSummary;
--- a/src/profile-v2/UsernameDescription.jsx
+++ b/src/profile-v2/UsernameDescription.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
+import classNames from 'classnames';
+import { useIsOnMobileScreen } from './data/hooks';
+
+const UsernameDescription = () => {
+  const isMobileView = useIsOnMobileScreen();
+  return (
+    <p className={classNames([
+      'text-gray-800 font-weight-normal m-0',
+      isMobileView ? 'h5' : 'p',
+    ])}
+    >
+      <FormattedMessage
+        id="profile.username.description"
+        defaultMessage="Your learner records 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,
+        }}
+      />
+    </p>
+  );
+};
+
+export default UsernameDescription;
--- a/src/profile-v2/mocks/loadingApp.mockStore.js
+++ b/src/profile-v2/mocks/loadingApp.mockStore.js
@@ -0,0 +1,41 @@
+module.exports = {
+  userAccount: {
+    loading: false,
+    error: null,
+    username: 'staff',
+    email: null,
+    bio: null,
+    name: null,
+    country: null,
+    socialLinks: null,
+    profileImage: {
+      imageUrlMedium: null,
+      imageUrlLarge: null
+    },
+    levelOfEducation: null,
+    learningGoal: null
+  },
+  profilePage: {
+    errors: {},
+    saveState: null,
+    savePhotoState: null,
+    currentlyEditingField: null,
+    account: {
+      username: 'staff',
+      socialLinks: []
+    },
+    preferences: {},
+    courseCertificates: [],
+    drafts: {},
+    isLoadingProfile: true,
+    isAuthenticatedUserProfile: true,
+  },
+  router: {
+    location: {
+      pathname: '/u/staff',
+      search: '',
+      hash: ''
+    },
+    action: 'POP'
+  }
+};
--- a/src/profile-v2/mocks/savingEditedBio.mockStore.js
+++ b/src/profile-v2/mocks/savingEditedBio.mockStore.js
@@ -0,0 +1,139 @@
+module.exports = {
+  userAccount: {
+    loading: false,
+    error: null,
+    username: 'staff',
+    email: 'staff@example.com',
+    bio: 'This is my bio',
+    name: 'Lemon Seltzer',
+    country: 'ME',
+    socialLinks: [
+      {
+        platform: 'facebook',
+        socialLink: 'https://www.facebook.com/aloha'
+      },
+      {
+        platform: 'twitter',
+        socialLink: 'https://www.twitter.com/ALOHA'
+      }
+    ],
+    profileImage: {
+      imageUrlFull: 'http://localhost:18000/media/profile-images/d2a9bdc2ba165dcefc73265c54bf9a20_500.jpg?v=1552495012',
+      imageUrlLarge: 'http://localhost:18000/media/profile-images/d2a9bdc2ba165dcefc73265c54bf9a20_120.jpg?v=1552495012',
+      imageUrlMedium: 'http://localhost:18000/media/profile-images/d2a9bdc2ba165dcefc73265c54bf9a20_50.jpg?v=1552495012',
+      imageUrlSmall: 'http://localhost:18000/media/profile-images/d2a9bdc2ba165dcefc73265c54bf9a20_30.jpg?v=1552495012',
+      hasImage: true
+    },
+    levelOfEducation: 'el',
+    mailingAddress: null,
+    extendedProfile: [],
+    dateJoined: '2017-06-07T00:44:23Z',
+    accomplishmentsShared: false,
+    isActive: true,
+    yearOfBirth: 1901,
+    goals: null,
+    languageProficiencies: [
+      {
+        code: 'yo'
+      }
+    ],
+    courseCertificates: null,
+    requiresParentalConsent: false,
+    secondaryEmail: null,
+    timeZone: null,
+    gender: null,
+    accountPrivacy: 'custom',
+    learningGoal: null,
+  },
+  profilePage: {
+    errors: {},
+    saveState: 'pending',
+    savePhotoState: null,
+    currentlyEditingField: 'bio',
+    isAuthenticatedUserProfile: true,
+    account: {
+      mailingAddress: null,
+      profileImage: {
+        imageUrlFull: 'http://localhost:18000/media/profile-images/d2a9bdc2ba165dcefc73265c54bf9a20_500.jpg?v=1552495012',
+        imageUrlLarge: 'http://localhost:18000/media/profile-images/d2a9bdc2ba165dcefc73265c54bf9a20_120.jpg?v=1552495012',
+        imageUrlMedium: 'http://localhost:18000/media/profile-images/d2a9bdc2ba165dcefc73265c54bf9a20_50.jpg?v=1552495012',
+        imageUrlSmall: 'http://localhost:18000/media/profile-images/d2a9bdc2ba165dcefc73265c54bf9a20_30.jpg?v=1552495012',
+        hasImage: true
+      },
+      extendedProfile: [],
+      dateJoined: '2017-06-07T00:44:23Z',
+      accomplishmentsShared: false,
+      email: 'staff@example.com',
+      username: 'staff',
+      bio: 'This is my bio',
+      isActive: true,
+      yearOfBirth: 1901,
+      goals: null,
+      languageProficiencies: [
+        {
+          code: 'yo'
+        }
+      ],
+      courseCertificates: null,
+      requiresParentalConsent: false,
+      name: 'Lemon Seltzer',
+      secondaryEmail: null,
+      country: 'ME',
+      socialLinks: [
+        {
+          platform: 'facebook',
+          socialLink: 'https://www.facebook.com/aloha'
+        },
+        {
+          platform: 'twitter',
+          socialLink: 'https://www.twitter.com/ALOHA'
+        }
+      ],
+      timeZone: null,
+      levelOfEducation: 'el',
+      gender: null,
+      accountPrivacy: 'custom',
+      learningGoal: null,
+    },
+    preferences: {
+      visibilityUserLocation: 'all_users',
+      visibilitySocialLinks: 'all_users',
+      visibilityCertificates: 'private',
+      visibilityLevelOfEducation: 'private',
+      visibilityCourseCertificates: 'all_users',
+      prefLang: 'en',
+      visibilityBio: 'all_users',
+      visibilityName: 'private',
+      visibilityLanguageProficiencies: 'all_users',
+      visibilityCountry: 'all_users',
+      accountPrivacy: 'custom',
+      visibilityLearningGoal: 'private',
+    },
+    courseCertificates: [
+      {
+        username: 'staff',
+        status: 'downloadable',
+        courseDisplayName: 'edX Demonstration Course',
+        grade: '0.89',
+        courseId: 'course-v1:edX+DemoX+Demo_Course',
+        courseOrganization: 'edX',
+        modifiedDate: '2019-03-04T19:31:39.930255Z',
+        isPassing: true,
+        downloadUrl: 'http://www.example.com/',
+        certificateType: 'verified',
+        createdDate: '2019-03-04T19:31:39.896806Z'
+      }
+    ],
+    drafts: {},
+    isLoadingProfile: false,
+    disabledCountries: [],
+  },
+  router: {
+    location: {
+      pathname: '/u/staff',
+      search: '',
+      hash: ''
+    },
+    action: 'POP'
+  }
+};
--- a/src/profile-v2/mocks/viewOtherProfile.mockStore.js
+++ b/src/profile-v2/mocks/viewOtherProfile.mockStore.js
@@ -0,0 +1,98 @@
+module.exports = {
+  userAccount: {
+    loading: false,
+    error: null,
+    username: 'staff',
+    email: 'staff@example.com',
+    bio: 'This is my bio',
+    name: 'Lemon Seltzer',
+    country: 'ME',
+    socialLinks: [
+      {
+        platform: 'facebook',
+        socialLink: 'https://www.facebook.com/aloha'
+      },
+      {
+        platform: 'twitter',
+        socialLink: 'https://www.twitter.com/ALOHA'
+      }
+    ],
+    profileImage: {
+      imageUrlFull: 'http://localhost:18000/media/profile-images/d2a9bdc2ba165dcefc73265c54bf9a20_500.jpg?v=1552495012',
+      imageUrlLarge: 'http://localhost:18000/media/profile-images/d2a9bdc2ba165dcefc73265c54bf9a20_120.jpg?v=1552495012',
+      imageUrlMedium: 'http://localhost:18000/media/profile-images/d2a9bdc2ba165dcefc73265c54bf9a20_50.jpg?v=1552495012',
+      imageUrlSmall: 'http://localhost:18000/media/profile-images/d2a9bdc2ba165dcefc73265c54bf9a20_30.jpg?v=1552495012',
+      hasImage: true
+    },
+    levelOfEducation: 'el',
+    mailingAddress: null,
+    extendedProfile: [],
+    dateJoined: '2017-06-07T00:44:23Z',
+    accomplishmentsShared: false,
+    isActive: true,
+    yearOfBirth: 1901,
+    goals: null,
+    languageProficiencies: [
+      {
+        code: 'yo'
+      }
+    ],
+    courseCertificates: null,
+    requiresParentalConsent: false,
+    secondaryEmail: null,
+    timeZone: null,
+    gender: null,
+    accountPrivacy: 'custom',
+    learningGoal: 'advance_career',
+  },
+  profilePage: {
+    errors: {},
+    saveState: null,
+    savePhotoState: null,
+    currentlyEditingField: null,
+    isAuthenticatedUserProfile: false,
+    account: {
+      mailingAddress: null,
+      profileImage: {
+        imageUrlFull: 'http://localhost:18000/static/images/profiles/default_500.png',
+        imageUrlLarge: 'http://localhost:18000/static/images/profiles/default_120.png',
+        imageUrlMedium: 'http://localhost:18000/static/images/profiles/default_50.png',
+        imageUrlSmall: 'http://localhost:18000/static/images/profiles/default_30.png',
+        hasImage: false
+      },
+      extendedProfile: [],
+      dateJoined: '2017-06-07T00:44:19Z',
+      accomplishmentsShared: false,
+      email: 'verified@example.com',
+      username: 'verified',
+      bio: null,
+      isActive: true,
+      yearOfBirth: null,
+      goals: null,
+      languageProficiencies: [],
+      courseCertificates: null,
+      requiresParentalConsent: true,
+      name: '',
+      secondaryEmail: null,
+      country: null,
+      socialLinks: [],
+      timeZone: null,
+      levelOfEducation: null,
+      gender: null,
+      accountPrivacy: 'private'
+    },
+    preferences: {},
+    courseCertificates: [],
+    drafts: {},
+    isLoadingProfile: false,
+    learningGoal: 'advance_career',
+  },
+  router: {
+    location: {
+      pathname: '/u/verified',
+      search: '',
+      hash: ''
+    },
+    action: 'POP'
+  }
+};
--- a/src/profile-v2/mocks/viewOwnProfile.mockStore.js
+++ b/src/profile-v2/mocks/viewOwnProfile.mockStore.js
@@ -0,0 +1,138 @@
+module.exports = {
+  userAccount: {
+    loading: false,
+    error: null,
+    username: 'staff',
+    email: 'staff@example.com',
+    bio: 'This is my bio',
+    name: 'Lemon Seltzer',
+    country: 'ME',
+    socialLinks: [
+      {
+        platform: 'facebook',
+        socialLink: 'https://www.facebook.com/aloha'
+      },
+      {
+        platform: 'twitter',
+        socialLink: 'https://www.twitter.com/ALOHA'
+      }
+    ],
+    profileImage: {
+      imageUrlFull: 'http://localhost:18000/media/profile-images/d2a9bdc2ba165dcefc73265c54bf9a20_500.jpg?v=1552495012',
+      imageUrlLarge: 'http://localhost:18000/media/profile-images/d2a9bdc2ba165dcefc73265c54bf9a20_120.jpg?v=1552495012',
+      imageUrlMedium: 'http://localhost:18000/media/profile-images/d2a9bdc2ba165dcefc73265c54bf9a20_50.jpg?v=1552495012',
+      imageUrlSmall: 'http://localhost:18000/media/profile-images/d2a9bdc2ba165dcefc73265c54bf9a20_30.jpg?v=1552495012',
+      hasImage: true
+    },
+    levelOfEducation: 'el',
+    mailingAddress: null,
+    extendedProfile: [],
+    dateJoined: '2017-06-07T00:44:23Z',
+    accomplishmentsShared: false,
+    isActive: true,
+    yearOfBirth: 1901,
+    goals: null,
+    languageProficiencies: [
+      {
+        code: 'yo'
+      }
+    ],
+    courseCertificates: null,
+    requiresParentalConsent: false,
+    secondaryEmail: null,
+    timeZone: null,
+    gender: null,
+    accountPrivacy: 'custom',
+    learningGoal: 'advance_career'
+  },
+  profilePage: {
+    errors: {},
+    saveState: null,
+    savePhotoState: null,
+    currentlyEditingField: null,
+    isAuthenticatedUserProfile: true,
+    account: {
+      mailingAddress: null,
+      profileImage: {
+        imageUrlFull: 'http://localhost:18000/media/profile-images/d2a9bdc2ba165dcefc73265c54bf9a20_500.jpg?v=1552495012',
+        imageUrlLarge: 'http://localhost:18000/media/profile-images/d2a9bdc2ba165dcefc73265c54bf9a20_120.jpg?v=1552495012',
+        imageUrlMedium: 'http://localhost:18000/media/profile-images/d2a9bdc2ba165dcefc73265c54bf9a20_50.jpg?v=1552495012',
+        imageUrlSmall: 'http://localhost:18000/media/profile-images/d2a9bdc2ba165dcefc73265c54bf9a20_30.jpg?v=1552495012',
+        hasImage: true
+      },
+      extendedProfile: [],
+      dateJoined: '2017-06-07T00:44:23Z',
+      accomplishmentsShared: false,
+      email: 'staff@example.com',
+      username: 'staff',
+      bio: 'This is my bio',
+      isActive: true,
+      yearOfBirth: 1901,
+      goals: null,
+      languageProficiencies: [
+        {
+          code: 'yo'
+        }
+      ],
+      courseCertificates: null,
+      requiresParentalConsent: false,
+      name: 'Lemon Seltzer',
+      secondaryEmail: null,
+      country: 'ME',
+      socialLinks: [
+        {
+          platform: 'facebook',
+          socialLink: 'https://www.facebook.com/aloha'
+        },
+        {
+          platform: 'twitter',
+          socialLink: 'https://www.twitter.com/ALOHA'
+        }
+      ],
+      timeZone: null,
+      levelOfEducation: 'el',
+      gender: null,
+      accountPrivacy: 'custom',
+      learningGoal: 'advance_career'
+    },
+    preferences: {
+      visibilityUserLocation: 'all_users',
+      visibilitySocialLinks: 'all_users',
+      visibilityCertificates: 'private',
+      visibilityLevelOfEducation: 'private',
+      visibilityCourseCertificates: 'all_users',
+      prefLang: 'en',
+      visibilityBio: 'all_users',
+      visibilityName: 'private',
+      visibilityLanguageProficiencies: 'all_users',
+      visibilityCountry: 'all_users',
+      accountPrivacy: 'custom',
+      visibilityLearningGoal: 'private',
+    },
+    courseCertificates: [
+      {
+        username: 'staff',
+        status: 'downloadable',
+        courseDisplayName: 'edX Demonstration Course',
+        grade: '0.89',
+        courseId: 'course-v1:edX+DemoX+Demo_Course',
+        courseOrganization: 'edX',
+        modifiedDate: '2019-03-04T19:31:39.930255Z',
+        isPassing: true,
+        downloadUrl: 'http://www.example.com/',
+        certificateType: 'verified',
+        createdDate: '2019-03-04T19:31:39.896806Z'
+      }
+    ],
+    drafts: {},
+    isLoadingProfile: false
+  },
+  router: {
+    location: {
+      pathname: '/u/staff',
+      search: '',
+      hash: ''
+    },
+    action: 'POP'
+  }
+};
--- a/src/profile-v2/snapshots/ProfilePage.test.jsx.snap
+++ b/src/profile-v2/snapshots/ProfilePage.test.jsx.snap
@@ -0,0 +1,619 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ProfilePage /> Renders correctly in various states app loading 1`] = `
+<div>
+  <div
+    class="profile-page"
+  >
+    <div>
+      <div
+        class="d-flex justify-content-center align-items-center flex-column height-50vh"
+      >
+        <div
+          class="spinner-border text-primary"
+          role="status"
+        >
+          <span
+            class="sr-only"
+          >
+            Profile loading...
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<ProfilePage /> Renders correctly in various states viewing other profile with all fields 1`] = `
+<div>
+  <div
+    class="profile-page"
+  >
+    <div
+      class="profile-page-bg-banner bg-primary d-md-block align-items-center py-4rem h-100 w-100 px-75rem"
+    >
+      <div
+        class="col container-fluid w-100 h-100 bg-white py-0 px-25rem rounded-75"
+      >
+        <div
+          class="col h-100 w-100 py-4 px-0 justify-content-start g-15rem"
+        >
+          <div
+            class="row-auto d-flex flex-wrap align-items-center h-100 w-100 justify-content-start g-15rem flex-row"
+          >
+            <div
+              class="profile-avatar-wrap position-relative"
+            >
+              <div
+                class="profile-avatar rounded-circle bg-light"
+              >
+                <iconmock
+                  aria-hidden="true"
+                  class="text-muted"
+                  focusable="false"
+                  role="img"
+                  viewbox="0 0 24 24"
+                />
+              </div>
+              <form
+                enctype="multipart/form-data"
+              >
+                <input
+                  accept=".jpg, .jpeg, .png"
+                  class="d-none form-control-file"
+                  id="photo-file"
+                  name="file"
+                  type="file"
+                />
+              </form>
+            </div>
+            <div
+              class="col h-100 w-100 m-0 p-0 justify-content-start align-items-start"
+            >
+              <p
+                class="row m-0 font-weight-bold text-truncate text-primary-500 h3"
+              >
+                staff
+              </p>
+              <p
+                class="row pt-2 text-gray-800 font-weight-normal m-0 p"
+              >
+                user
+              </p>
+              <div
+                class="row pt-2 m-0 g-1rem"
+              >
+                <span
+                  class="small mb-0 text-gray-800"
+                >
+                  Member since 
+                  <span
+                    class="font-weight-bold"
+                  >
+                     
+                    2017
+                     
+                  </span>
+                </span>
+                <span
+                  class="small m-0 text-gray-800"
+                >
+                  <span
+                    class="font-weight-bold"
+                  >
+                     
+                    0
+                     
+                  </span>
+                   certifications
+                </span>
+              </div>
+            </div>
+            <div
+              class="p-0  col-auto"
+            >
+              <a
+                class="pgn__hyperlink default-link standalone-link btn btn-brand btn-rounded font-weight-normal px-4 py-0625rem text-nowrap"
+                href="http://localhost:18150/records"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                View My Records
+              </a>
+            </div>
+          </div>
+          <div
+            class="row-auto d-flex align-items-center h-100 w-100 justify-content-start m-0 pt-4"
+          >
+            <p
+              class="text-gray-800 font-weight-normal m-0 p"
+            >
+              Your learner records information is only visible to you. Only your username is visible to others on localhost.
+            </p>
+          </div>
+        </div>
+        <div
+          class="ml-auto"
+        />
+      </div>
+    </div>
+    <div
+      class="col container-fluid d-inline-flex px-75rem pt-4rem pb-6 h-100 w-100 align-items-start justify-content-center g-3rem"
+    >
+      <div>
+        <div
+          class="col justify-content-start align-items-start g-5rem p-0"
+        >
+          <div
+            class="col align-self-stretch height-2625rem justify-content-start align-items-start p-0"
+          >
+            <p
+              class="font-weight-bold text-primary-500 m-0 h2"
+            >
+              Your certificates
+            </p>
+          </div>
+          <div
+            class="col justify-content-start align-items-start pt-2 p-0"
+          >
+            <p
+              class="font-weight-normal text-gray-800 m-0 p-0 p"
+            >
+              Your learner records information is only visible to you. Only your username is visible to others on localhost.
+            </p>
+          </div>
+        </div>
+        <div
+          class="pt-5"
+        >
+          You don't have any certificates yet.
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<ProfilePage /> Renders correctly in various states viewing own profile 1`] = `
+<div>
+  <div
+    class="profile-page"
+  >
+    <div
+      class="profile-page-bg-banner bg-primary d-md-block align-items-center py-4rem h-100 w-100 px-75rem"
+    >
+      <div
+        class="col container-fluid w-100 h-100 bg-white py-0 px-25rem rounded-75"
+      >
+        <div
+          class="col h-100 w-100 py-4 px-0 justify-content-start g-15rem"
+        >
+          <div
+            class="row-auto d-flex flex-wrap align-items-center h-100 w-100 justify-content-start g-15rem flex-row"
+          >
+            <div
+              class="profile-avatar-wrap position-relative"
+            >
+              <div
+                class="profile-avatar rounded-circle bg-light"
+              >
+                <div
+                  class="profile-avatar-menu-container"
+                >
+                  <div
+                    class="pgn__dropdown pgn__dropdown-light dropdown"
+                    data-testid="dropdown"
+                  >
+                    <button
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      class="dropdown-toggle btn btn-primary"
+                      type="button"
+                    >
+                      Change
+                    </button>
+                  </div>
+                </div>
+                <img
+                  alt="profile avatar"
+                  class="w-100 h-100 d-block rounded-circle overflow-hidden object-fit-cover"
+                  data-hj-suppress="true"
+                  src="http://localhost:18000/media/profile-images/d2a9bdc2ba165dcefc73265c54bf9a20_500.jpg?v=1552495012"
+                />
+              </div>
+              <form
+                enctype="multipart/form-data"
+              >
+                <input
+                  accept=".jpg, .jpeg, .png"
+                  class="d-none form-control-file"
+                  id="photo-file"
+                  name="file"
+                  type="file"
+                />
+              </form>
+            </div>
+            <div
+              class="col h-100 w-100 m-0 p-0 justify-content-start align-items-start"
+            >
+              <p
+                class="row m-0 font-weight-bold text-truncate text-primary-500 h3"
+              >
+                staff
+              </p>
+              <p
+                class="row pt-2 text-gray-800 font-weight-normal m-0 p"
+              >
+                Lemon Seltzer
+              </p>
+              <div
+                class="row pt-2 m-0 g-1rem"
+              >
+                <span
+                  class="small mb-0 text-gray-800"
+                >
+                  Member since 
+                  <span
+                    class="font-weight-bold"
+                  >
+                     
+                    2017
+                     
+                  </span>
+                </span>
+                <span
+                  class="small m-0 text-gray-800"
+                >
+                  <span
+                    class="font-weight-bold"
+                  >
+                     
+                    1
+                     
+                  </span>
+                   certifications
+                </span>
+              </div>
+            </div>
+            <div
+              class="p-0  col-auto"
+            >
+              <a
+                class="pgn__hyperlink default-link standalone-link btn btn-brand btn-rounded font-weight-normal px-4 py-0625rem text-nowrap"
+                href="http://localhost:18150/records"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                View My Records
+              </a>
+            </div>
+          </div>
+          <div
+            class="row-auto d-flex align-items-center h-100 w-100 justify-content-start m-0 pt-4"
+          />
+        </div>
+        <div
+          class="ml-auto"
+        />
+      </div>
+    </div>
+    <div
+      class="col container-fluid d-inline-flex px-75rem pt-4rem pb-6 h-100 w-100 align-items-start justify-content-center g-3rem"
+    >
+      <div>
+        <div
+          class="col justify-content-start align-items-start g-5rem p-0"
+        >
+          <div
+            class="col align-self-stretch height-2625rem justify-content-start align-items-start p-0"
+          >
+            <p
+              class="font-weight-bold text-primary-500 m-0 h2"
+            >
+              Your certificates
+            </p>
+          </div>
+          <div
+            class="col justify-content-start align-items-start pt-2 p-0"
+          >
+            <p
+              class="font-weight-normal text-gray-800 m-0 p-0 p"
+            >
+              Your learner records information is only visible to you. Only your username is visible to others on localhost.
+            </p>
+          </div>
+        </div>
+        <div
+          class="col"
+        >
+          <div
+            class="row align-items-center pt-5 g-3rem"
+          >
+            <div
+              class="col-auto d-flex align-items-center p-0"
+            >
+              <div
+                class="col certificate p-4 border-light-400 bg-light-200 w-100 h-100"
+              >
+                <div
+                  class="certificate-type-illustration"
+                  style="background-image: url(icon/mock/path);"
+                />
+                <div
+                  class="d-flex flex-column position-relative p-0 width-19625rem"
+                >
+                  <div
+                    class="w-100 color-black"
+                  >
+                    <p
+                      class="mb-0 font-weight-normal small"
+                    >
+                      Verified Certificate
+                    </p>
+                    <p
+                      class="m-0 color-black h4"
+                    >
+                      edX Demonstration Course
+                    </p>
+                    <p
+                      class="mb-0 small"
+                    >
+                      From
+                    </p>
+                    <h5
+                      class="mb-0 color-black"
+                    >
+                      edX
+                    </h5>
+                    <p
+                      class="mb-0 small"
+                    >
+                      Completed on 
+                      3/4/2019
+                    </p>
+                  </div>
+                  <div
+                    class="pt-3"
+                  >
+                    <a
+                      class="pgn__hyperlink default-link standalone-link btn btn-primary btn-rounded font-weight-normal px-4 py-0625rem"
+                      href="http://www.example.com/"
+                      rel="noopener noreferrer"
+                      target="_blank"
+                    >
+                      View Certificate
+                    </a>
+                  </div>
+                  <p
+                    class="mb-0 pt-3 small"
+                  >
+                    Credential ID 
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<ProfilePage /> Renders correctly in various states without credentials service 1`] = `
+<div>
+  <div
+    class="profile-page"
+  >
+    <div
+      class="profile-page-bg-banner bg-primary d-md-block align-items-center py-4rem h-100 w-100 px-75rem"
+    >
+      <div
+        class="col container-fluid w-100 h-100 bg-white py-0 px-25rem rounded-75"
+      >
+        <div
+          class="col h-100 w-100 py-4 px-0 justify-content-start g-15rem"
+        >
+          <div
+            class="row-auto d-flex flex-wrap align-items-center h-100 w-100 justify-content-start g-15rem flex-row"
+          >
+            <div
+              class="profile-avatar-wrap position-relative"
+            >
+              <div
+                class="profile-avatar rounded-circle bg-light"
+              >
+                <div
+                  class="profile-avatar-menu-container"
+                >
+                  <div
+                    class="pgn__dropdown pgn__dropdown-light dropdown"
+                    data-testid="dropdown"
+                  >
+                    <button
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      class="dropdown-toggle btn btn-primary"
+                      type="button"
+                    >
+                      Change
+                    </button>
+                  </div>
+                </div>
+                <img
+                  alt="profile avatar"
+                  class="w-100 h-100 d-block rounded-circle overflow-hidden object-fit-cover"
+                  data-hj-suppress="true"
+                  src="http://localhost:18000/media/profile-images/d2a9bdc2ba165dcefc73265c54bf9a20_500.jpg?v=1552495012"
+                />
+              </div>
+              <form
+                enctype="multipart/form-data"
+              >
+                <input
+                  accept=".jpg, .jpeg, .png"
+                  class="d-none form-control-file"
+                  id="photo-file"
+                  name="file"
+                  type="file"
+                />
+              </form>
+            </div>
+            <div
+              class="col h-100 w-100 m-0 p-0 justify-content-start align-items-start"
+            >
+              <p
+                class="row m-0 font-weight-bold text-truncate text-primary-500 h3"
+              >
+                staff
+              </p>
+              <p
+                class="row pt-2 text-gray-800 font-weight-normal m-0 p"
+              >
+                Lemon Seltzer
+              </p>
+              <div
+                class="row pt-2 m-0 g-1rem"
+              >
+                <span
+                  class="small mb-0 text-gray-800"
+                >
+                  Member since 
+                  <span
+                    class="font-weight-bold"
+                  >
+                     
+                    2017
+                     
+                  </span>
+                </span>
+                <span
+                  class="small m-0 text-gray-800"
+                >
+                  <span
+                    class="font-weight-bold"
+                  >
+                     
+                    1
+                     
+                  </span>
+                   certifications
+                </span>
+              </div>
+            </div>
+            <div
+              class="p-0  col-auto"
+            />
+          </div>
+          <div
+            class="row-auto d-flex align-items-center h-100 w-100 justify-content-start m-0 pt-4"
+          />
+        </div>
+        <div
+          class="ml-auto"
+        />
+      </div>
+    </div>
+    <div
+      class="col container-fluid d-inline-flex px-75rem pt-4rem pb-6 h-100 w-100 align-items-start justify-content-center g-3rem"
+    >
+      <div>
+        <div
+          class="col justify-content-start align-items-start g-5rem p-0"
+        >
+          <div
+            class="col align-self-stretch height-2625rem justify-content-start align-items-start p-0"
+          >
+            <p
+              class="font-weight-bold text-primary-500 m-0 h2"
+            >
+              Your certificates
+            </p>
+          </div>
+          <div
+            class="col justify-content-start align-items-start pt-2 p-0"
+          >
+            <p
+              class="font-weight-normal text-gray-800 m-0 p-0 p"
+            >
+              Your learner records information is only visible to you. Only your username is visible to others on localhost.
+            </p>
+          </div>
+        </div>
+        <div
+          class="col"
+        >
+          <div
+            class="row align-items-center pt-5 g-3rem"
+          >
+            <div
+              class="col-auto d-flex align-items-center p-0"
+            >
+              <div
+                class="col certificate p-4 border-light-400 bg-light-200 w-100 h-100"
+              >
+                <div
+                  class="certificate-type-illustration"
+                  style="background-image: url(icon/mock/path);"
+                />
+                <div
+                  class="d-flex flex-column position-relative p-0 width-19625rem"
+                >
+                  <div
+                    class="w-100 color-black"
+                  >
+                    <p
+                      class="mb-0 font-weight-normal small"
+                    >
+                      Verified Certificate
+                    </p>
+                    <p
+                      class="m-0 color-black h4"
+                    >
+                      edX Demonstration Course
+                    </p>
+                    <p
+                      class="mb-0 small"
+                    >
+                      From
+                    </p>
+                    <h5
+                      class="mb-0 color-black"
+                    >
+                      edX
+                    </h5>
+                    <p
+                      class="mb-0 small"
+                    >
+                      Completed on 
+                      3/4/2019
+                    </p>
+                  </div>
+                  <div
+                    class="pt-3"
+                  >
+                    <a
+                      class="pgn__hyperlink default-link standalone-link btn btn-primary btn-rounded font-weight-normal px-4 py-0625rem"
+                      href="http://www.example.com/"
+                      rel="noopener noreferrer"
+                      target="_blank"
+                    >
+                      View Certificate
+                    </a>
+                  </div>
+                  <p
+                    class="mb-0 pt-3 small"
+                  >
+                    Credential ID 
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
--- a/src/profile-v2/assets/avatar.svg
+++ b/src/profile-v2/assets/avatar.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
+    <title>avatar</title>
+    <desc>Created with Sketch.</desc>
+    <g id="avatar" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M4.10255106,18.1351061 C4.7170266,16.0581859 8.01891846,14.4720277 12,14.4720277 C15.9810815,14.4720277 19.2829734,16.0581859 19.8974489,18.1351061 C21.215206,16.4412566 22,14.3122775 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,14.3122775 2.78479405,16.4412566 4.10255106,18.1351061 Z M12,24 C5.372583,24 0,18.627417 0,12 C0,5.372583 5.372583,0 12,0 C18.627417,0 24,5.372583 24,12 C24,18.627417 18.627417,24 12,24 Z M12,13 C9.790861,13 8,11.209139 8,9 C8,6.790861 9.790861,5 12,5 C14.209139,5 16,6.790861 16,9 C16,11.209139 14.209139,13 12,13 Z" fill="currentColor"></path>
+    </g>
+</svg>
--- a/src/profile-v2/assets/dot-pattern-light.png
+++ b/src/profile-v2/assets/dot-pattern-light.png
--- a/src/profile-v2/assets/micro-masters.svg
+++ b/src/profile-v2/assets/micro-masters.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="110px" height="100px" viewBox="0 0 110 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
+    <title>micro-masters</title>
+    <desc>Created with Sketch.</desc>
+    <g id="micro-masters" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <polygon id="Fill-14" fill="#005585" points="1.00481933 99 1 96.14832 108.995272 96 109 98.85168"></polygon>
+        <polygon id="Fill-16" fill="#005585" points="1.00481933 54 1 51.14832 108.995272 51 109 53.85168"></polygon>
+        <polygon id="Fill-18" fill="#005585" points="24.9998189 88 4.22751315 66.9102771 4.22751315 87.0451102 1 87.0451102 1 59 24.9998189 83.3666894 49 59 49 87.0451102 45.7724869 87.0451102 45.7724869 66.9102771"></polygon>
+        <polygon id="Fill-20" fill="#005585" points="83.0003622 88 62.2275375 66.9102771 62.2275375 87.0451102 59 87.0451102 59 59 83.0003622 83.3666894 107 59 107 87.0451102 103.772372 87.0451102 103.772372 66.9102771"></polygon>
+        <path d="M46.8337141,5.73372796 C40.9959838,9.0009662 32.7599012,14.7887333 26.6032377,23.8303431 C22.1430738,22.980271 18.7577893,22.0941759 16.6724707,21.4890245 C24.4296997,13.0587208 35.0333668,7.38581116 46.8337141,5.73372796 L46.8337141,5.73372796 Z M52.9498983,26.3252576 C44.0609738,26.2888724 36.3049246,25.4607944 30.1183101,24.4518768 C37.8086485,13.8504137 48.4460785,8.26376038 52.9498983,6.25307565 L52.9498983,26.3252576 Z M56.1856092,6.53148511 C60.9824046,8.72165163 70.9689895,14.1856636 78.3079931,24.2371866 C70.4533778,25.5777336 63.0182586,26.1827945 56.1856092,26.3036256 L56.1856092,6.53148511 Z M91.2530147,21.4114572 C88.0536989,22.2655118 84.9019418,22.9909512 81.8101774,23.5971888 C75.749448,14.7672824 67.7047798,9.0930151 61.9038076,5.84261176 C73.3677956,7.61959908 83.6636931,13.2007313 91.2530147,21.4114572 L91.2530147,21.4114572 Z M5.35796556,42 C7.1655563,35.3542865 10.2683027,29.3264862 14.378947,24.1676747 C16.125002,24.7123653 19.7105047,25.7399279 24.7732291,26.7529184 C22.2125965,31.1374149 20.1687556,36.1942214 19.0530339,42 L22.3555447,42 C23.5090228,36.4059248 25.5817257,31.5545765 28.1556093,27.3837747 C34.7214222,28.5242036 43.1689773,29.5005374 52.9498983,29.5419006 L52.9498983,42 L56.1856092,42 L56.1856092,29.5223504 C63.6041191,29.395636 71.7140444,28.7101116 80.2902074,27.16121 C82.9053872,31.3760904 85.0043199,36.3025621 86.1572534,42 L89.460218,42 C88.3437702,36.0858806 86.2630805,30.9538601 83.6533464,26.5180443 C86.9031251,25.8529752 90.216981,25.0530458 93.5773971,24.1181656 C97.7090979,29.2882909 100.82809,35.3331976 102.641853,42 L106,42 C100.00834,18.4385583 78.6589648,2 53.9991832,2 C29.3299624,2 7.9913882,18.4352094 2,42 L5.35796556,42 Z" id="Fill-22" fill="#005585"></path>
+    </g>
+</svg>
--- a/src/profile-v2/assets/professional-certificate.svg
+++ b/src/profile-v2/assets/professional-certificate.svg
--- a/src/profile-v2/assets/verified-certificate.svg
+++ b/src/profile-v2/assets/verified-certificate.svg
--- a/src/profile-v2/data/actions.js
+++ b/src/profile-v2/data/actions.js
@@ -0,0 +1,83 @@
+import { AsyncActionType } from '../utils';
+
+export const FETCH_PROFILE = new AsyncActionType('PROFILE', 'FETCH_PROFILE');
+export const SAVE_PROFILE_PHOTO = new AsyncActionType('PROFILE', 'SAVE_PROFILE_PHOTO');
+export const DELETE_PROFILE_PHOTO = new AsyncActionType('PROFILE', 'DELETE_PROFILE_PHOTO');
+
+// FETCH PROFILE ACTIONS
+
+export const fetchProfile = username => ({
+  type: FETCH_PROFILE.BASE,
+  payload: { username },
+});
+
+export const fetchProfileBegin = () => ({
+  type: FETCH_PROFILE.BEGIN,
+});
+
+export const fetchProfileSuccess = (
+  account,
+  preferences,
+  courseCertificates,
+  isAuthenticatedUserProfile,
+) => ({
+  type: FETCH_PROFILE.SUCCESS,
+  account,
+  preferences,
+  courseCertificates,
+  isAuthenticatedUserProfile,
+});
+
+export const fetchProfileReset = () => ({
+  type: FETCH_PROFILE.RESET,
+});
+
+// SAVE PROFILE PHOTO ACTIONS
+
+export const saveProfilePhoto = (username, formData) => ({
+  type: SAVE_PROFILE_PHOTO.BASE,
+  payload: {
+    username,
+    formData,
+  },
+});
+
+export const saveProfilePhotoBegin = () => ({
+  type: SAVE_PROFILE_PHOTO.BEGIN,
+});
+
+export const saveProfilePhotoSuccess = profileImage => ({
+  type: SAVE_PROFILE_PHOTO.SUCCESS,
+  payload: { profileImage },
+});
+
+export const saveProfilePhotoReset = () => ({
+  type: SAVE_PROFILE_PHOTO.RESET,
+});
+
+export const saveProfilePhotoFailure = error => ({
+  type: SAVE_PROFILE_PHOTO.FAILURE,
+  payload: { error },
+});
+
+// DELETE PROFILE PHOTO ACTIONS
+
+export const deleteProfilePhoto = username => ({
+  type: DELETE_PROFILE_PHOTO.BASE,
+  payload: {
+    username,
+  },
+});
+
+export const deleteProfilePhotoBegin = () => ({
+  type: DELETE_PROFILE_PHOTO.BEGIN,
+});
+
+export const deleteProfilePhotoSuccess = profileImage => ({
+  type: DELETE_PROFILE_PHOTO.SUCCESS,
+  payload: { profileImage },
+});
+
+export const deleteProfilePhotoReset = () => ({
+  type: DELETE_PROFILE_PHOTO.RESET,
+});
--- a/src/profile-v2/data/actions.test.js
+++ b/src/profile-v2/data/actions.test.js
@@ -0,0 +1,98 @@
+import {
+  SAVE_PROFILE_PHOTO,
+  saveProfilePhotoBegin,
+  saveProfilePhotoSuccess,
+  saveProfilePhotoFailure,
+  saveProfilePhotoReset,
+  saveProfilePhoto,
+  DELETE_PROFILE_PHOTO,
+  deleteProfilePhotoBegin,
+  deleteProfilePhotoSuccess,
+  deleteProfilePhotoReset,
+  deleteProfilePhoto,
+} from './actions';
+
+describe('SAVE profile photo actions', () => {
+  it('should create an action to signal the start of a profile photo save', () => {
+    const formData = 'multipart form data';
+    const expectedAction = {
+      type: SAVE_PROFILE_PHOTO.BASE,
+      payload: {
+        username: 'myusername',
+        formData,
+      },
+    };
+    expect(saveProfilePhoto('myusername', formData)).toEqual(expectedAction);
+  });
+
+  it('should create an action to signal user profile photo save beginning', () => {
+    const expectedAction = {
+      type: SAVE_PROFILE_PHOTO.BEGIN,
+    };
+    expect(saveProfilePhotoBegin()).toEqual(expectedAction);
+  });
+
+  it('should create an action to signal user profile photo save success', () => {
+    const newPhotoData = { hasImage: true };
+    const expectedAction = {
+      type: SAVE_PROFILE_PHOTO.SUCCESS,
+      payload: {
+        profileImage: newPhotoData,
+      },
+    };
+    expect(saveProfilePhotoSuccess(newPhotoData)).toEqual(expectedAction);
+  });
+
+  it('should create an action to signal user profile photo save reset', () => {
+    const expectedAction = {
+      type: SAVE_PROFILE_PHOTO.RESET,
+    };
+    expect(saveProfilePhotoReset()).toEqual(expectedAction);
+  });
+
+  it('should create an action to signal user profile photo save failure', () => {
+    const error = 'Test failure';
+    const expectedAction = {
+      type: SAVE_PROFILE_PHOTO.FAILURE,
+      payload: { error },
+    };
+    expect(saveProfilePhotoFailure(error)).toEqual(expectedAction);
+  });
+});
+
+describe('DELETE profile photo actions', () => {
+  it('should create an action to signal the start of a profile photo deletion', () => {
+    const expectedAction = {
+      type: DELETE_PROFILE_PHOTO.BASE,
+      payload: {
+        username: 'myusername',
+      },
+    };
+    expect(deleteProfilePhoto('myusername')).toEqual(expectedAction);
+  });
+
+  it('should create an action to signal user profile photo deletion beginning', () => {
+    const expectedAction = {
+      type: DELETE_PROFILE_PHOTO.BEGIN,
+    };
+    expect(deleteProfilePhotoBegin()).toEqual(expectedAction);
+  });
+
+  it('should create an action to signal user profile photo deletion success', () => {
+    const defaultPhotoData = { hasImage: false };
+    const expectedAction = {
+      type: DELETE_PROFILE_PHOTO.SUCCESS,
+      payload: {
+        profileImage: defaultPhotoData,
+      },
+    };
+    expect(deleteProfilePhotoSuccess(defaultPhotoData)).toEqual(expectedAction);
+  });
+
+  it('should create an action to signal user profile photo deletion reset', () => {
+    const expectedAction = {
+      type: DELETE_PROFILE_PHOTO.RESET,
+    };
+    expect(deleteProfilePhotoReset()).toEqual(expectedAction);
+  });
+});
--- a/src/profile-v2/data/constants.js
+++ b/src/profile-v2/data/constants.js
@@ -0,0 +1,28 @@
+const EDUCATION_LEVELS = [
+  'p',
+  'm',
+  'b',
+  'a',
+  'hs',
+  'jhs',
+  'el',
+  'none',
+  'other',
+];
+
+const SOCIAL = {
+  linkedin: {
+    title: 'LinkedIn',
+  },
+  twitter: {
+    title: 'Twitter',
+  },
+  facebook: {
+    title: 'Facebook',
+  },
+};
+
+export {
+  EDUCATION_LEVELS,
+  SOCIAL,
+};
--- a/src/profile-v2/data/hooks.js
+++ b/src/profile-v2/data/hooks.js
@@ -0,0 +1,11 @@
+import { breakpoints, useWindowSize } from '@openedx/paragon';
+
+export function useIsOnTabletScreen() {
+  const windowSize = useWindowSize();
+  return windowSize.width <= breakpoints.medium.minWidth;
+}
+
+export function useIsOnMobileScreen() {
+  const windowSize = useWindowSize();
+  return windowSize.width <= breakpoints.small.minWidth;
+}
--- a/src/profile-v2/data/mock_data.js
+++ b/src/profile-v2/data/mock_data.js
@@ -0,0 +1,7 @@
+const mockData = {
+  learningGoal: 'advance_career',
+  editMode: 'static',
+  visibilityLearningGoal: 'private',
+};
+
+export default mockData;
--- a/src/profile-v2/data/pact-profile.test.js
+++ b/src/profile-v2/data/pact-profile.test.js
@@ -0,0 +1,80 @@
+// This test file simply creates a contract that defines
+// expectations and correct responses from the Pact stub server.
+
+import path from 'path';
+
+import { PactV3, MatchersV3 } from '@pact-foundation/pact';
+
+import { initializeMockApp, getConfig, setConfig } from '@edx/frontend-platform';
+import { getAccount } from './services';
+
+const expectedUserInfo200 = {
+  username: 'staff',
+  email: 'staff@example.com',
+  bio: 'This is my bio',
+  name: 'Lemon Seltzer',
+  country: 'ME',
+  dateJoined: '2017-06-07T00:44:23Z',
+  isActive: true,
+  yearOfBirth: 1901,
+};
+
+const provider = new PactV3({
+  log: path.resolve(process.cwd(), 'src/pact-logs/pact.log'),
+  dir: path.resolve(process.cwd(), 'src/pacts'),
+  consumer: 'frontend-app-profile',
+  provider: 'edx-platform',
+});
+
+describe('getAccount for one username', () => {
+  beforeAll(async () => {
+    initializeMockApp();
+  });
+  it('returns a HTTP 200 and user information', async () => {
+    const username200 = 'staff';
+    await provider.addInteraction({
+      states: [{ description: "I have a user's basic information" }],
+      uponReceiving: "A request for user's basic information",
+      withRequest: {
+        method: 'GET',
+        path: `/api/user/v1/accounts/${username200}`,
+        headers: {},
+      },
+      willRespondWith: {
+        status: 200,
+        headers: {},
+        body: MatchersV3.like(expectedUserInfo200),
+      },
+    });
+    return provider.executeTest(async (mockserver) => {
+      setConfig({
+        ...getConfig(),
+        LMS_BASE_URL: mockserver.url,
+      });
+      const response = await getAccount(username200);
+      expect(response).toEqual(expectedUserInfo200);
+    });
+  });
+
+  it('Account does not exist', async () => {
+    const username404 = 'staff_not_found';
+    await provider.addInteraction({
+      states: [{ description: "Account and user's information does not exist" }],
+      uponReceiving: "A request for user's basic information",
+      withRequest: {
+        method: 'GET',
+        path: `/api/user/v1/accounts/${username404}`,
+      },
+      willRespondWith: {
+        status: 404,
+      },
+    });
+    await provider.executeTest(async (mockserver) => {
+      setConfig({
+        ...getConfig(),
+        LMS_BASE_URL: mockserver.url,
+      });
+      await expect(getAccount(username404).then((response) => response.data)).rejects.toThrow('Request failed with status code 404');
+    });
+  });
+});
--- a/src/profile-v2/data/reducers.js
+++ b/src/profile-v2/data/reducers.js
@@ -0,0 +1,99 @@
+import {
+  SAVE_PROFILE_PHOTO,
+  DELETE_PROFILE_PHOTO,
+  FETCH_PROFILE,
+} from './actions';
+
+export const initialState = {
+  errors: {},
+  savePhotoState: null,
+  account: {
+    socialLinks: [],
+  },
+  preferences: {},
+  courseCertificates: [],
+  isLoadingProfile: true,
+  isAuthenticatedUserProfile: false,
+  disabledCountries: ['RU'],
+};
+
+const profilePage = (state = initialState, action = {}) => {
+  switch (action.type) {
+    case FETCH_PROFILE.BEGIN:
+      return {
+        ...state,
+        // TODO: uncomment this line after ARCH-438 Image Post API returns the url
+        // is complete. Right now we refetch the whole profile causing us to show a full reload
+        // instead of a partial one.
+        // isLoadingProfile: true,
+      };
+    case FETCH_PROFILE.SUCCESS:
+      return {
+        ...state,
+        account: action.account,
+        preferences: action.preferences,
+        courseCertificates: action.courseCertificates,
+        isLoadingProfile: false,
+        isAuthenticatedUserProfile: action.isAuthenticatedUserProfile,
+      };
+
+    case SAVE_PROFILE_PHOTO.BEGIN:
+      return {
+        ...state,
+        savePhotoState: 'pending',
+        errors: {},
+      };
+    case SAVE_PROFILE_PHOTO.SUCCESS:
+      return {
+        ...state,
+        // Merge in new profile image data
+        account: { ...state.account, profileImage: action.payload.profileImage },
+        savePhotoState: 'complete',
+        errors: {},
+      };
+    case SAVE_PROFILE_PHOTO.FAILURE:
+      return {
+        ...state,
+        savePhotoState: 'error',
+        errors: { ...state.errors, photo: action.payload.error },
+      };
+    case SAVE_PROFILE_PHOTO.RESET:
+      return {
+        ...state,
+        savePhotoState: null,
+        errors: {},
+      };
+
+    case DELETE_PROFILE_PHOTO.BEGIN:
+      return {
+        ...state,
+        savePhotoState: 'pending',
+        errors: {},
+      };
+    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: {},
+      };
+    case DELETE_PROFILE_PHOTO.FAILURE:
+      return {
+        ...state,
+        savePhotoState: 'error',
+        errors: { ...state.errors, ...action.payload.errors },
+      };
+    case DELETE_PROFILE_PHOTO.RESET:
+      return {
+        ...state,
+        savePhotoState: null,
+        errors: {},
+      };
+
+    default:
+      return state;
+  }
+};
+
+export default profilePage;
--- a/src/profile-v2/data/reducers.test.js
+++ b/src/profile-v2/data/reducers.test.js
@@ -0,0 +1,140 @@
+import profilePage, { initialState } from './reducers';
+import {
+  SAVE_PROFILE_PHOTO,
+  DELETE_PROFILE_PHOTO,
+  FETCH_PROFILE,
+} 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,
+        // Uncomment isLoadingProfile: true if this functionality is required.
+      };
+      expect(profilePage(initialState, action)).toEqual(expectedState);
+    });
+
+    it('should handle FETCH_PROFILE.SUCCESS', () => {
+      const action = {
+        type: FETCH_PROFILE.SUCCESS,
+        account: { name: 'John Doe' },
+        preferences: { theme: 'dark' },
+        courseCertificates: ['cert1', 'cert2'],
+        isAuthenticatedUserProfile: true,
+      };
+      const expectedState = {
+        ...initialState,
+        account: action.account,
+        preferences: action.preferences,
+        courseCertificates: action.courseCertificates,
+        isLoadingProfile: false,
+        isAuthenticatedUserProfile: action.isAuthenticatedUserProfile,
+      };
+      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: '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: '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: { ...initialState.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);
+    });
+  });
+});
--- a/src/profile-v2/data/sagas.js
+++ b/src/profile-v2/data/sagas.js
@@ -0,0 +1,127 @@
+import { history } from '@edx/frontend-platform';
+import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
+import {
+  all,
+  call,
+  put,
+  select,
+  takeEvery,
+} from 'redux-saga/effects';
+import {
+  deleteProfilePhotoBegin,
+  deleteProfilePhotoReset,
+  deleteProfilePhotoSuccess,
+  DELETE_PROFILE_PHOTO,
+  fetchProfileBegin,
+  fetchProfileReset,
+  fetchProfileSuccess,
+  FETCH_PROFILE,
+  saveProfilePhotoBegin,
+  saveProfilePhotoReset,
+  saveProfilePhotoSuccess,
+  SAVE_PROFILE_PHOTO,
+} from './actions';
+import { userAccountSelector } from './selectors';
+import * as ProfileApiService from './services';
+
+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;
+
+  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),
+    ];
+
+    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;
+    } else {
+      [account, courseCertificates] = result;
+    }
+
+    // Set initial visibility values for account
+    // Set account_privacy as custom is necessary so that when viewing another user's profile,
+    // their full name is displayed and change visibility forms are worked correctly
+    if (isAuthenticatedUserProfile && result[0].accountPrivacy === 'all_users') {
+      yield call(ProfileApiService.patchPreferences, action.payload.username, {
+        account_privacy: 'custom',
+        'visibility.name': 'all_users',
+        'visibility.bio': 'all_users',
+        'visibility.course_certificates': 'all_users',
+        'visibility.country': 'all_users',
+        'visibility.date_joined': 'all_users',
+        'visibility.level_of_education': 'all_users',
+        'visibility.language_proficiencies': 'all_users',
+        'visibility.social_links': 'all_users',
+        'visibility.time_zone': 'all_users',
+      });
+    }
+
+    yield put(fetchProfileSuccess(
+      account,
+      preferences,
+      courseCertificates,
+      isAuthenticatedUserProfile,
+    ));
+
+    yield put(fetchProfileReset());
+  } catch (e) {
+    if (e.response.status === 404) {
+      history.push('/notfound');
+    } else {
+      throw e;
+    }
+  }
+}
+
+export function* handleSaveProfilePhoto(action) {
+  const { username, formData } = action.payload;
+
+  try {
+    yield put(saveProfilePhotoBegin());
+    const photoResult = yield call(ProfileApiService.postProfilePhoto, username, formData);
+    yield put(saveProfilePhotoSuccess(photoResult));
+    yield put(saveProfilePhotoReset());
+  } catch (e) {
+    // Just reset on error, since editing functionality is deprecated
+    yield put(saveProfilePhotoReset());
+  }
+}
+
+export function* handleDeleteProfilePhoto(action) {
+  const { username } = action.payload;
+
+  try {
+    yield put(deleteProfilePhotoBegin());
+    const photoResult = yield call(ProfileApiService.deleteProfilePhoto, username);
+    yield put(deleteProfilePhotoSuccess(photoResult));
+    yield put(deleteProfilePhotoReset());
+  } catch (e) {
+    // Just reset on error, since editing functionality is deprecated
+    yield put(deleteProfilePhotoReset());
+  }
+}
+
+export default function* profileSaga() {
+  yield takeEvery(FETCH_PROFILE.BASE, handleFetchProfile);
+  yield takeEvery(SAVE_PROFILE_PHOTO.BASE, handleSaveProfilePhoto);
+  yield takeEvery(DELETE_PROFILE_PHOTO.BASE, handleDeleteProfilePhoto);
+}
--- a/src/profile-v2/data/sagas.test.js
+++ b/src/profile-v2/data/sagas.test.js
@@ -0,0 +1,159 @@
+import {
+  takeEvery,
+  put,
+  call,
+  select,
+  all,
+} from 'redux-saga/effects';
+import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
+
+import * as profileActions from './actions';
+import { userAccountSelector } from './selectors';
+
+import profileSaga, {
+  handleFetchProfile,
+  handleSaveProfilePhoto,
+  handleDeleteProfilePhoto,
+} from './sagas';
+import * as ProfileApiService from './services';
+import {
+  deleteProfilePhotoBegin,
+  deleteProfilePhotoReset,
+  saveProfilePhotoBegin,
+  saveProfilePhotoReset,
+} from './actions';
+
+jest.mock('./services', () => ({
+  getAccount: jest.fn(),
+  getCourseCertificates: jest.fn(),
+  getPreferences: jest.fn(),
+  postProfilePhoto: jest.fn(),
+  deleteProfilePhoto: jest.fn(),
+}));
+
+jest.mock('@edx/frontend-platform/auth', () => ({
+  getAuthenticatedUser: jest.fn(),
+}));
+
+describe('RootSaga', () => {
+  describe('profileSaga', () => {
+    it('should pass actions to the correct sagas', () => {
+      const gen = profileSaga();
+
+      expect(gen.next().value)
+        .toEqual(takeEvery(profileActions.FETCH_PROFILE.BASE, handleFetchProfile));
+      expect(gen.next().value)
+        .toEqual(takeEvery(profileActions.SAVE_PROFILE_PHOTO.BASE, handleSaveProfilePhoto));
+      expect(gen.next().value)
+        .toEqual(takeEvery(profileActions.DELETE_PROFILE_PHOTO.BASE, handleDeleteProfilePhoto));
+
+      expect(gen.next().value).toBeUndefined();
+    });
+  });
+
+  describe('handleFetchProfile', () => {
+    it('should fetch certificates and preferences for the current user profile', () => {
+      const userAccount = {
+        username: 'gonzo',
+        other: 'data',
+      };
+      getAuthenticatedUser.mockReturnValue(userAccount);
+      const selectorData = {
+        userAccount,
+      };
+
+      const action = profileActions.fetchProfile('gonzo');
+      const gen = handleFetchProfile(action);
+
+      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.getPreferences, 'gonzo'),
+      ]));
+      expect(gen.next(result).value)
+        .toEqual(put(profileActions.fetchProfileSuccess(userAccount, result[2], result[1], true)));
+      expect(gen.next().value).toEqual(put(profileActions.fetchProfileReset()));
+      expect(gen.next().value).toBeUndefined();
+    });
+
+    it('should fetch certificates and profile for some other user profile', () => {
+      const userAccount = {
+        username: 'gonzo',
+        other: 'data',
+      };
+      getAuthenticatedUser.mockReturnValue(userAccount);
+      const selectorData = {
+        userAccount,
+      };
+
+      const action = profileActions.fetchProfile('booyah');
+      const gen = handleFetchProfile(action);
+
+      const result = [{}, [1, 2, 3]];
+
+      expect(gen.next().value).toEqual(select(userAccountSelector));
+      expect(gen.next(selectorData).value).toEqual(put(profileActions.fetchProfileBegin()));
+      expect(gen.next().value).toEqual(all([
+        call(ProfileApiService.getAccount, 'booyah'),
+        call(ProfileApiService.getCourseCertificates, 'booyah'),
+      ]));
+      expect(gen.next(result).value)
+        .toEqual(put(profileActions.fetchProfileSuccess(result[0], {}, result[1], false)));
+      expect(gen.next().value).toEqual(put(profileActions.fetchProfileReset()));
+      expect(gen.next().value).toBeUndefined();
+    });
+  });
+
+  describe('handleSaveProfilePhoto', () => {
+    it('should publish a reset action on error', () => {
+      const action = profileActions.saveProfilePhoto('my username', {});
+      const gen = handleSaveProfilePhoto(action);
+      const error = new Error('Error occurred');
+
+      expect(gen.next().value).toEqual(put(saveProfilePhotoBegin()));
+      expect(gen.throw(error).value).toEqual(put(saveProfilePhotoReset()));
+      expect(gen.next().value).toBeUndefined();
+    });
+  });
+
+  describe('handleDeleteProfilePhoto', () => {
+    it('should publish a reset action on error', () => {
+      const action = profileActions.deleteProfilePhoto('my username');
+      const gen = handleDeleteProfilePhoto(action);
+      const error = new Error('Error occurred');
+
+      expect(gen.next().value).toEqual(put(deleteProfilePhotoBegin()));
+      expect(gen.throw(error).value).toEqual(put(deleteProfilePhotoReset()));
+      expect(gen.next().value).toBeUndefined();
+    });
+  });
+
+  describe('handleDeleteProfilePhoto', () => {
+    it('should successfully process a deleteProfilePhoto request if there are no exceptions', () => {
+      const action = profileActions.deleteProfilePhoto('my username');
+      const gen = handleDeleteProfilePhoto(action);
+      const photoResult = {};
+
+      expect(gen.next().value).toEqual(put(profileActions.deleteProfilePhotoBegin()));
+      expect(gen.next().value).toEqual(call(ProfileApiService.deleteProfilePhoto, 'my username'));
+      expect(gen.next(photoResult).value).toEqual(put(profileActions.deleteProfilePhotoSuccess(photoResult)));
+      expect(gen.next().value).toEqual(put(profileActions.deleteProfilePhotoReset()));
+      expect(gen.next().value).toBeUndefined();
+    });
+
+    it('should publish a failure action on exception', () => {
+      const error = new Error('Error occurred');
+      const action = profileActions.deleteProfilePhoto('my username');
+      const gen = handleDeleteProfilePhoto(action);
+
+      expect(gen.next().value).toEqual(put(profileActions.deleteProfilePhotoBegin()));
+      const result = gen.throw(error);
+      expect(result.value).toEqual(put(profileActions.deleteProfilePhotoReset()));
+      expect(gen.next().value).toBeUndefined();
+    });
+  });
+});
--- a/src/profile-v2/data/selectors.js
+++ b/src/profile-v2/data/selectors.js
@@ -0,0 +1,58 @@
+import { createSelector } from 'reselect';
+
+export const userAccountSelector = state => state.userAccount;
+export const profileAccountSelector = state => state.profilePage.account;
+export const profileCourseCertificatesSelector = state => state.profilePage.courseCertificates;
+export const savePhotoStateSelector = state => state.profilePage.savePhotoState;
+export const isLoadingProfileSelector = state => state.profilePage.isLoadingProfile;
+export const accountErrorsSelector = state => state.profilePage.errors;
+
+export const certificatesSelector = createSelector(
+  profileCourseCertificatesSelector,
+  (certificates) => ({
+    certificates,
+    value: certificates,
+  }),
+);
+
+export const profileImageSelector = createSelector(
+  profileAccountSelector,
+  account => (account.profileImage != null
+    ? {
+      src: account.profileImage.imageUrlFull,
+      isDefault: !account.profileImage.hasImage,
+    }
+    : {}),
+);
+
+export const profilePageSelector = createSelector(
+  profileAccountSelector,
+  profileCourseCertificatesSelector,
+  profileImageSelector,
+  savePhotoStateSelector,
+  isLoadingProfileSelector,
+  accountErrorsSelector,
+  (
+    account,
+    courseCertificates,
+    profileImage,
+    savePhotoState,
+    isLoadingProfile,
+    errors,
+  ) => ({
+    // Account data we need
+    username: account.username,
+    profileImage,
+    requiresParentalConsent: account.requiresParentalConsent,
+    dateJoined: account.dateJoined,
+    yearOfBirth: account.yearOfBirth,
+    name: account.name,
+
+    courseCertificates,
+
+    // Other data we need
+    savePhotoState,
+    isLoadingProfile,
+    photoUploadError: errors.photo || null,
+  }),
+);
--- a/src/profile-v2/data/services.js
+++ b/src/profile-v2/data/services.js
@@ -0,0 +1,149 @@
+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';
+
+ensureConfig(['LMS_BASE_URL'], 'Profile API service');
+
+function processAccountData(data) {
+  return camelCaseObject(data);
+}
+
+function processAndThrowError(error, errorDataProcessor) {
+  const processedError = Object.create(error);
+  if (error.response && error.response.data && typeof error.response.data === 'object') {
+    processedError.processedData = errorDataProcessor(error.response.data);
+    throw processedError;
+  } else {
+    throw error;
+  }
+}
+
+// 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);
+
+  const { data } = await getHttpClient()
+    .patch(`${getConfig().LMS_BASE_URL}/api/user/v1/accounts/${username}`, processedParams, {
+      headers: {
+        'Content-Type': 'application/merge-patch+json',
+      },
+    })
+    .catch((error) => {
+      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(
+    `${getConfig().LMS_BASE_URL}/api/user/v1/accounts/${username}/image`,
+    formData,
+    {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+    },
+  ).catch((error) => {
+    processAndThrowError(error, camelCaseObject);
+  });
+
+  // TODO: Someday in the future the POST photo endpoint
+  // will return the new values. At that time we should
+  // use the commented line below instead of the separate
+  // getAccount request that follows.
+  // return camelCaseObject(data);
+  const updatedData = await getAccount(username);
+  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`);
+
+  // TODO: Someday in the future the POST photo endpoint
+  // will return the new values. At that time we should
+  // use the commented line below instead of the separate
+  // getAccount request that follows.
+  // return camelCaseObject(data);
+  const updatedData = await getAccount(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, {
+    visibility_bio: 'visibility.bio',
+    visibility_course_certificates: 'visibility.course_certificates',
+    visibility_country: 'visibility.country',
+    visibility_date_joined: 'visibility.date_joined',
+    visibility_level_of_education: 'visibility.level_of_education',
+    visibility_language_proficiencies: 'visibility.language_proficiencies',
+    visibility_name: 'visibility.name',
+    visibility_social_links: 'visibility.social_links',
+    visibility_time_zone: 'visibility.time_zone',
+  });
+
+  await getHttpClient().patch(`${getConfig().LMS_BASE_URL}/api/user/v1/preferences/${username}`, processedParams, {
+    headers: { 'Content-Type': 'application/merge-patch+json' },
+  });
+
+  return params; // TODO: Once the server returns the updated preferences object, return that.
+}
+
+// GET COURSE CERTIFICATES
+
+function transformCertificateData(data) {
+  const transformedData = [];
+  data.forEach((cert) => {
+    // download_url may be full url or absolute path.
+    // note: using the URL() api breaks in ie 11
+    const urlIsPath = typeof cert.download_url === 'string'
+      && cert.download_url.search(/http[s]?:\/\//) !== 0;
+
+    const downloadUrl = urlIsPath
+      ? `${getConfig().LMS_BASE_URL}${cert.download_url}`
+      : cert.download_url;
+
+    transformedData.push({
+      ...camelCaseObject(cert),
+      certificateType: cert.certificate_type,
+      downloadUrl,
+    });
+  });
+  return transformedData;
+}
+
+export async function getCourseCertificates(username) {
+  const url = `${getConfig().LMS_BASE_URL}/api/certificates/v0/certificates/${username}/`;
+  try {
+    const { data } = await getHttpClient().get(url);
+    return transformCertificateData(data);
+  } catch (e) {
+    logError(e);
+    return [];
+  }
+}
--- a/src/profile-v2/forms/ProfileAvatar.jsx
+++ b/src/profile-v2/forms/ProfileAvatar.jsx
@@ -0,0 +1,159 @@
+import React, { useRef } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Dropdown } from '@openedx/paragon';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+
+import { ReactComponent as DefaultAvatar } from '../assets/avatar.svg';
+import messages from './ProfileAvatar.messages';
+
+const ProfileAvatar = ({
+  src,
+  isDefault,
+  onSave,
+  onDelete,
+  savePhotoState,
+  isEditable,
+}) => {
+  const intl = useIntl();
+  const fileInput = useRef(null);
+  const form = useRef(null);
+
+  const onClickUpload = () => {
+    fileInput.current.click();
+  };
+
+  const onClickDelete = () => {
+    onDelete();
+  };
+
+  const onSubmit = (e) => {
+    if (e) {
+      e.preventDefault();
+    }
+    onSave(new FormData(form.current));
+    form.current.reset();
+  };
+
+  const onChangeInput = () => {
+    onSubmit();
+  };
+
+  const renderPending = () => (
+    <div
+      className="position-absolute w-100 h-100 d-flex justify-content-center
+      align-items-center rounded-circle background-black-65"
+    >
+      <div className="spinner-border text-primary" role="status" />
+    </div>
+  );
+
+  const renderMenuContent = () => {
+    if (isDefault) {
+      return (
+        <Button
+          variant="link"
+          size="sm"
+          className="text-white btn-block"
+          onClick={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={onClickUpload}>
+            <FormattedMessage
+              id="profile.profileavatar.upload-button"
+              defaultMessage="Upload Photo"
+              description="Upload photo button"
+            />
+          </Dropdown.Item>
+          <Dropdown.Item type="button" onClick={onClickDelete}>
+            <FormattedMessage
+              id="profile.profileavatar.remove.button"
+              defaultMessage="Remove"
+              description="Remove photo button"
+            />
+          </Dropdown.Item>
+        </Dropdown.Menu>
+      </Dropdown>
+    );
+  };
+
+  const renderMenu = () => {
+    if (!isEditable) {
+      return null;
+    }
+    return (
+      <div className="profile-avatar-menu-container">
+        {renderMenuContent()}
+      </div>
+    );
+  };
+
+  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 object-fit-cover"
+        alt={intl.formatMessage(messages['profile.image.alt.attribute'])}
+        src={src}
+      />
+    )
+  );
+
+  return (
+    <div className="profile-avatar-wrap position-relative">
+      <div className="profile-avatar rounded-circle bg-light">
+        {savePhotoState === 'pending' ? renderPending() : renderMenu()}
+        {renderAvatar()}
+      </div>
+      <form
+        ref={form}
+        onSubmit={onSubmit}
+        encType="multipart/form-data"
+      >
+        {/* The name of this input must be 'file' */}
+        <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,
+  isDefault: PropTypes.bool,
+  onSave: PropTypes.func.isRequired,
+  onDelete: PropTypes.func.isRequired,
+  savePhotoState: PropTypes.oneOf([null, 'pending', 'complete', 'error']),
+  isEditable: PropTypes.bool,
+};
+
+ProfileAvatar.defaultProps = {
+  src: null,
+  isDefault: true,
+  savePhotoState: null,
+  isEditable: false,
+};
+
+export default ProfileAvatar;
--- a/src/profile-v2/forms/ProfileAvatar.messages.jsx
+++ b/src/profile-v2/forms/ProfileAvatar.messages.jsx
@@ -0,0 +1,16 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  'profile.image.alt.attribute': {
+    id: 'profile.image.alt.attribute',
+    defaultMessage: 'profile avatar',
+    description: 'Alt attribute for a profile photo',
+  },
+  'profile.profileavatar.change-button': {
+    id: 'profile.profileavatar.change-button',
+    defaultMessage: 'Change',
+    description: 'Change photo button',
+  },
+});
+
+export default messages;
--- a/src/profile-v2/index.js
+++ b/src/profile-v2/index.js
@@ -0,0 +1,5 @@
+export { default as reducer } from './data/reducers';
+export { default as saga } from './data/sagas';
+export { default as ProfilePage } from './ProfilePage';
+export { default as NotFoundPage } from './NotFoundPage';
+export { default as messages } from './ProfilePage.messages';
--- a/src/profile-v2/index.scss
+++ b/src/profile-v2/index.scss
@@ -0,0 +1,231 @@
+.word-break-all {
+  word-break: break-all !important;
+}
+
+// TODO: Update edx-bootstrap theme to incorporate these edits.
+.btn, a.btn {
+  text-decoration: none;
+  &:hover {
+    text-decoration: none;
+  }
+}
+.btn-link {
+  text-decoration: underline;
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.profile-page-bg-banner {
+  height: 298px;
+  width: 100%;
+  background-image: url('./assets/dot-pattern-light.png');
+  background-repeat: repeat-x;
+  background-size: auto 85%;
+}
+
+.icon-visibility-off {
+  height: 1rem;
+  color: $gray-500;
+}
+
+.profile-page {
+  .edit-section-header {
+    @extend .h6;
+    display: block;
+    font-weight: normal;
+    letter-spacing: 0;
+    margin: 0;
+  }
+
+  label.edit-section-header {
+    margin-bottom: $spacer * .5;
+  }
+
+  .profile-avatar-wrap {
+    @include media-breakpoint-up(md) {
+      max-width: 12rem;
+      margin-right: 0;
+      height: auto;
+    }
+  }
+
+  .profile-avatar-menu-container {
+    background: rgba(0,0,0,.65);
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+
+    @include media-breakpoint-up(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) {
+        margin-bottom: 1.2rem;
+      }
+    }
+
+    .dropdown {
+      @include media-breakpoint-up(md) {
+        margin-bottom: 1.2rem;
+      }
+
+      .btn {
+        color: $white;
+        background: transparent;
+        border-color: transparent;
+        margin: 0;
+      }
+    }
+  }
+
+  .profile-avatar {
+    width: 5rem;
+    height: 5rem;
+    position: relative;
+
+    @include media-breakpoint-up(md) {
+      width: 7.5rem;
+      height: 7.5rem;
+    }
+
+    .profile-avatar-edit-button {
+      border: none;
+      position: absolute;
+      height: 100%;
+      left: 0;
+      width: 100%;
+      bottom: 0;
+      display: flex;
+      justify-content: center;
+      padding-top: .1rem;
+      font-weight: 600;
+      background: rgba(0,0,0,.5);
+      border-radius:0;
+      transition: opacity 200ms ease;
+
+      @include media-breakpoint-up(md) {
+        height: 4rem;
+      }
+
+      &:focus, &:hover, &:active, &.active {
+        opacity: 1;
+      }
+    }
+  }
+
+  .certificate {
+    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: 15.15rem;
+      opacity: .06;
+      background-size: 90%;
+      background-repeat: no-repeat;
+      background-position: right top;
+    }
+  }
+}
+
+// Todo: Move the following to edx-paragon
+
+.btn-rounded {
+  border-radius: 100px;
+}
+
+.max-width-32em {
+  max-width: 32em;
+}
+
+.max-width-19rem{
+    max-width: 19rem;
+}
+.width-75rem {
+  width: 75rem;
+}
+
+.width-72rem {
+  width: 72rem !important;
+}
+
+.width-19625rem {
+  width: 19.625rem;
+}
+
+.height-2625rem {
+  height: 2.625rem;
+}
+
+.height-50vh {
+  height: 50vh;
+}
+
+.rounded-75 {
+  border-radius: 0.75rem;
+}
+
+.pt-4rem {
+  padding-top: 4rem;
+}
+
+.py-4rem {
+  padding-top: 4rem;
+  padding-bottom: 4rem;
+}
+
+.py-0625rem {
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+}
+
+.px-75rem {
+  padding-left: 7.5rem;
+  padding-right: 7.5rem;
+}
+
+.px-25rem {
+  padding-left: 2.5rem;
+  padding-right: 2.5rem;
+}
+
+.g-15rem {
+  gap: 1.5rem;
+}
+
+.g-5rem {
+  gap: 0.5rem;
+}
+
+.g-1rem {
+  gap: 1rem;
+}
+
+.g-3rem {
+  gap: 3rem;
+}
+
+.color-black {
+  color: #000;
+}
+
+.background-black-65 {
+  background-color: rgba(0,0,0,.65)
+}
+
+.object-fit-cover {
+  object-fit: cover;
+}
--- a/src/profile-v2/utils.js
+++ b/src/profile-v2/utils.js
@@ -0,0 +1,71 @@
+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
+    || (typeof object !== 'object' && !Array.isArray(object))
+  ) {
+    return object;
+  }
+
+  if (Array.isArray(object)) {
+    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);
+  });
+  return result;
+}
+
+export function camelCaseObject(object) {
+  return modifyObjectKeys(object, camelCase);
+}
+
+export function snakeCaseObject(object) {
+  return modifyObjectKeys(object, snakeCase);
+}
+
+export function convertKeyNames(object, nameMap) {
+  const transformer = key => (nameMap[key] === undefined ? key : nameMap[key]);
+
+  return modifyObjectKeys(object, transformer);
+}
+
+/**
+ * Helper class to save time when writing out action types for asynchronous methods.  Also helps
+ * ensure that actions are namespaced.
+ *
+ * TODO: Put somewhere common to it can be used by other MFEs.
+ */
+export class AsyncActionType {
+  constructor(topic, name) {
+    this.topic = topic;
+    this.name = name;
+  }
+
+  get BASE() {
+    return `${this.topic}__${this.name}`;
+  }
+
+  get BEGIN() {
+    return `${this.topic}__${this.name}__BEGIN`;
+  }
+
+  get SUCCESS() {
+    return `${this.topic}__${this.name}__SUCCESS`;
+  }
+
+  get FAILURE() {
+    return `${this.topic}__${this.name}__FAILURE`;
+  }
+
+  get RESET() {
+    return `${this.topic}__${this.name}__RESET`;
+  }
+}
--- a/src/profile-v2/utils.test.js
+++ b/src/profile-v2/utils.test.js
@@ -0,0 +1,103 @@
+import {
+  AsyncActionType,
+  modifyObjectKeys,
+  camelCaseObject,
+  snakeCaseObject,
+  convertKeyNames,
+} from './utils';
+
+describe('modifyObjectKeys', () => {
+  it('should use the provided modify function to change all keys in and object and its children', () => {
+    function meowKeys(key) {
+      return `${key}Meow`;
+    }
+
+    const result = modifyObjectKeys(
+      {
+        one: undefined,
+        two: null,
+        three: '',
+        four: 0,
+        five: NaN,
+        six: [1, 2, { seven: 'woof' }],
+        eight: { nine: { ten: 'bark' }, eleven: true },
+      },
+      meowKeys,
+    );
+
+    expect(result).toEqual({
+      oneMeow: undefined,
+      twoMeow: null,
+      threeMeow: '',
+      fourMeow: 0,
+      fiveMeow: NaN,
+      sixMeow: [1, 2, { sevenMeow: 'woof' }],
+      eightMeow: { nineMeow: { tenMeow: 'bark' }, elevenMeow: true },
+    });
+  });
+});
+
+describe('camelCaseObject', () => {
+  it('should make everything camelCase', () => {
+    const result = camelCaseObject({
+      what_now: 'brown cow',
+      but_who: { says_you_people: 'okay then', but_how: { will_we_even_know: 'the song is over' } },
+      'dot.dot.dot': 123,
+    });
+
+    expect(result).toEqual({
+      whatNow: 'brown cow',
+      butWho: { saysYouPeople: 'okay then', butHow: { willWeEvenKnow: 'the song is over' } },
+      dotDotDot: 123,
+    });
+  });
+});
+
+describe('snakeCaseObject', () => {
+  it('should make everything snake_case', () => {
+    const result = snakeCaseObject({
+      whatNow: 'brown cow',
+      butWho: { saysYouPeople: 'okay then', butHow: { willWeEvenKnow: 'the song is over' } },
+      'dot.dot.dot': 123,
+    });
+
+    expect(result).toEqual({
+      what_now: 'brown cow',
+      but_who: { says_you_people: 'okay then', but_how: { will_we_even_know: 'the song is over' } },
+      dot_dot_dot: 123,
+    });
+  });
+});
+
+describe('convertKeyNames', () => {
+  it('should replace the specified keynames', () => {
+    const result = convertKeyNames(
+      {
+        one: { two: { three: 'four' } },
+        five: 'six',
+      },
+      {
+        two: 'blue',
+        five: 'alive',
+        seven: 'heaven',
+      },
+    );
+
+    expect(result).toEqual({
+      one: { blue: { three: 'four' } },
+      alive: 'six',
+    });
+  });
+});
+
+describe('AsyncActionType', () => {
+  it('should return well formatted action strings', () => {
+    const actionType = new AsyncActionType('HOUSE_CATS', 'START_THE_RACE');
+
+    expect(actionType.BASE).toBe('HOUSE_CATS__START_THE_RACE');
+    expect(actionType.BEGIN).toBe('HOUSE_CATS__START_THE_RACE__BEGIN');
+    expect(actionType.SUCCESS).toBe('HOUSE_CATS__START_THE_RACE__SUCCESS');
+    expect(actionType.FAILURE).toBe('HOUSE_CATS__START_THE_RACE__FAILURE');
+    expect(actionType.RESET).toBe('HOUSE_CATS__START_THE_RACE__RESET');
+  });
+});
--- a/src/profile/ProfilePage.test.jsx
+++ b/src/profile/ProfilePage.test.jsx
@@ -319,6 +319,29 @@ describe('<ProfilePage />', () => {

      expect(container.querySelector('.alert-danger')).toHaveClass('show');
    });
+
+    it.each([
+      ['test user with non-disabled country', 'PK'],
+      ['test user with disabled country', 'RU'],
+    ])('test user with %s', (_, accountCountry) => {
+      const storeData = JSON.parse(JSON.stringify(storeMocks.savingEditedBio));
+      storeData.profilePage.errors.country = {};
+      storeData.profilePage.currentlyEditingField = 'country';
+      storeData.profilePage.disabledCountries = ['RU'];
+      storeData.profilePage.account.country = accountCountry;
+      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();
+    });
  });

  describe('handles analytics', () => {
--- a/src/profile/mocks/invalidUser.mockStore.js
+++ b/src/profile/mocks/invalidUser.mockStore.js
@@ -38,4 +38,4 @@ module.exports = {
    },
    action: 'POP'
  }
-};
+};
--- a/src/profile/mocks/savingEditedBio.mockStore.js
+++ b/src/profile/mocks/savingEditedBio.mockStore.js
@@ -125,7 +125,8 @@ module.exports = {
      }
    ],
    drafts: {},
-    isLoadingProfile: false
+    isLoadingProfile: false,
+    disabledCountries: [],
  },
  router: {
    location: {
--- a/src/profile/snapshots/ProfilePage.test.jsx.snap
+++ b/src/profile/snapshots/ProfilePage.test.jsx.snap
@@ -5741,6 +5741,4236 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
 </div>
 `;

+exports[`<ProfilePage /> Renders correctly in various states test user with test user with disabled country 1`] = `
+<div>
+  <div
+    class="profile-page"
+  >
+    <div
+      class="profile-page-bg-banner bg-primary d-md-block p-relative"
+    />
+    <div
+      class="container-fluid"
+    >
+      <div
+        class="row align-items-center pt-4 mb-4 pt-md-0 mb-md-0"
+      >
+        <div
+          class="col-auto col-md-4 col-lg-3"
+        >
+          <div
+            class="d-flex align-items-center d-md-block"
+          >
+            <div
+              class="profile-avatar-wrap position-relative"
+            >
+              <div
+                class="profile-avatar rounded-circle bg-light"
+              >
+                <div
+                  class="profile-avatar-menu-container"
+                >
+                  <div
+                    class="pgn__dropdown pgn__dropdown-light dropdown"
+                    data-testid="dropdown"
+                  >
+                    <button
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      class="dropdown-toggle btn btn-primary"
+                      type="button"
+                    >
+                      Change
+                    </button>
+                  </div>
+                </div>
+                <img
+                  alt="profile avatar"
+                  class="w-100 h-100 d-block rounded-circle overflow-hidden"
+                  data-hj-suppress="true"
+                  src="http://localhost:18000/media/profile-images/d2a9bdc2ba165dcefc73265c54bf9a20_500.jpg?v=1552495012"
+                  style="object-fit: cover;"
+                />
+              </div>
+              <form
+                enctype="multipart/form-data"
+              >
+                <input
+                  accept=".jpg, .jpeg, .png"
+                  class="d-none form-control-file"
+                  id="photo-file"
+                  name="file"
+                  type="file"
+                />
+              </form>
+            </div>
+          </div>
+        </div>
+        <div
+          class="col"
+        >
+          <div
+            class="d-md-none"
+          >
+            <span
+              data-hj-suppress="true"
+            >
+              <h1
+                class="h2 mb-0 font-weight-bold text-truncate"
+              >
+                staff
+              </h1>
+              <p
+                class="mb-0"
+              >
+                Member since 
+                2017
+              </p>
+              <hr
+                class="d-none d-md-block"
+              />
+            </span>
+          </div>
+          <div
+            class="d-none d-md-block float-right"
+          />
+        </div>
+      </div>
+      <div
+        class="row"
+      >
+        <div
+          class="col-md-4 col-lg-4"
+        >
+          <div
+            class="d-none d-md-block mb-4"
+          >
+            <span
+              data-hj-suppress="true"
+            >
+              <h1
+                class="h2 mb-0 font-weight-bold text-truncate"
+              >
+                staff
+              </h1>
+              <p
+                class="mb-0"
+              >
+                Member since 
+                2017
+              </p>
+              <hr
+                class="d-none d-md-block"
+              />
+            </span>
+          </div>
+          <div
+            class="d-md-none mb-4"
+          />
+          <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"
+                >
+                  Full Name
+                  <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>
+              <p
+                class="h5"
+                data-hj-suppress="true"
+              >
+                Lemon Seltzer
+              </p>
+              <small
+                class="form-text text-muted"
+              >
+                This is the name that appears in your account and on your certificates.
+              </small>
+            </div>
+          </div>
+          <div
+            class="pgn-transition-replace-group position-relative mb-5"
+          >
+            <div
+              style="padding: .1px 0px;"
+            >
+              <div
+                aria-labelledby="country-label"
+                role="dialog"
+              >
+                <form>
+                  <div
+                    class="pgn__form-group"
+                  >
+                    <label
+                      class="edit-section-header"
+                      for="country"
+                    >
+                      Location
+                    </label>
+                    <select
+                      class="form-control"
+                      data-hj-suppress="true"
+                      id="country"
+                      name="country"
+                      type="select"
+                    >
+                      <option
+                        value=""
+                      >
+                         
+                      </option>
+                      <option
+                        value="AF"
+                      >
+                        Afghanistan
+                      </option>
+                      <option
+                        value="AL"
+                      >
+                        Albania
+                      </option>
+                      <option
+                        value="DZ"
+                      >
+                        Algeria
+                      </option>
+                      <option
+                        value="AS"
+                      >
+                        American Samoa
+                      </option>
+                      <option
+                        value="AD"
+                      >
+                        Andorra
+                      </option>
+                      <option
+                        value="AO"
+                      >
+                        Angola
+                      </option>
+                      <option
+                        value="AI"
+                      >
+                        Anguilla
+                      </option>
+                      <option
+                        value="AQ"
+                      >
+                        Antarctica
+                      </option>
+                      <option
+                        value="AG"
+                      >
+                        Antigua and Barbuda
+                      </option>
+                      <option
+                        value="AR"
+                      >
+                        Argentina
+                      </option>
+                      <option
+                        value="AM"
+                      >
+                        Armenia
+                      </option>
+                      <option
+                        value="AW"
+                      >
+                        Aruba
+                      </option>
+                      <option
+                        value="AU"
+                      >
+                        Australia
+                      </option>
+                      <option
+                        value="AT"
+                      >
+                        Austria
+                      </option>
+                      <option
+                        value="AZ"
+                      >
+                        Azerbaijan
+                      </option>
+                      <option
+                        value="BS"
+                      >
+                        Bahamas
+                      </option>
+                      <option
+                        value="BH"
+                      >
+                        Bahrain
+                      </option>
+                      <option
+                        value="BD"
+                      >
+                        Bangladesh
+                      </option>
+                      <option
+                        value="BB"
+                      >
+                        Barbados
+                      </option>
+                      <option
+                        value="BY"
+                      >
+                        Belarus
+                      </option>
+                      <option
+                        value="BE"
+                      >
+                        Belgium
+                      </option>
+                      <option
+                        value="BZ"
+                      >
+                        Belize
+                      </option>
+                      <option
+                        value="BJ"
+                      >
+                        Benin
+                      </option>
+                      <option
+                        value="BM"
+                      >
+                        Bermuda
+                      </option>
+                      <option
+                        value="BT"
+                      >
+                        Bhutan
+                      </option>
+                      <option
+                        value="BO"
+                      >
+                        Bolivia
+                      </option>
+                      <option
+                        value="BA"
+                      >
+                        Bosnia and Herzegovina
+                      </option>
+                      <option
+                        value="BW"
+                      >
+                        Botswana
+                      </option>
+                      <option
+                        value="BV"
+                      >
+                        Bouvet Island
+                      </option>
+                      <option
+                        value="BR"
+                      >
+                        Brazil
+                      </option>
+                      <option
+                        value="IO"
+                      >
+                        British Indian Ocean Territory
+                      </option>
+                      <option
+                        value="BN"
+                      >
+                        Brunei Darussalam
+                      </option>
+                      <option
+                        value="BG"
+                      >
+                        Bulgaria
+                      </option>
+                      <option
+                        value="BF"
+                      >
+                        Burkina Faso
+                      </option>
+                      <option
+                        value="BI"
+                      >
+                        Burundi
+                      </option>
+                      <option
+                        value="KH"
+                      >
+                        Cambodia
+                      </option>
+                      <option
+                        value="CM"
+                      >
+                        Cameroon
+                      </option>
+                      <option
+                        value="CA"
+                      >
+                        Canada
+                      </option>
+                      <option
+                        value="CV"
+                      >
+                        Cape Verde
+                      </option>
+                      <option
+                        value="KY"
+                      >
+                        Cayman Islands
+                      </option>
+                      <option
+                        value="CF"
+                      >
+                        Central African Republic
+                      </option>
+                      <option
+                        value="TD"
+                      >
+                        Chad
+                      </option>
+                      <option
+                        value="CL"
+                      >
+                        Chile
+                      </option>
+                      <option
+                        value="CN"
+                      >
+                        China
+                      </option>
+                      <option
+                        value="CX"
+                      >
+                        Christmas Island
+                      </option>
+                      <option
+                        value="CC"
+                      >
+                        Cocos (Keeling) Islands
+                      </option>
+                      <option
+                        value="CO"
+                      >
+                        Colombia
+                      </option>
+                      <option
+                        value="KM"
+                      >
+                        Comoros
+                      </option>
+                      <option
+                        value="CG"
+                      >
+                        Congo
+                      </option>
+                      <option
+                        value="CD"
+                      >
+                        Congo, the Democratic Republic of the
+                      </option>
+                      <option
+                        value="CK"
+                      >
+                        Cook Islands
+                      </option>
+                      <option
+                        value="CR"
+                      >
+                        Costa Rica
+                      </option>
+                      <option
+                        value="CI"
+                      >
+                        Cote D'Ivoire
+                      </option>
+                      <option
+                        value="HR"
+                      >
+                        Croatia
+                      </option>
+                      <option
+                        value="CU"
+                      >
+                        Cuba
+                      </option>
+                      <option
+                        value="CY"
+                      >
+                        Cyprus
+                      </option>
+                      <option
+                        value="CZ"
+                      >
+                        Czech Republic
+                      </option>
+                      <option
+                        value="DK"
+                      >
+                        Denmark
+                      </option>
+                      <option
+                        value="DJ"
+                      >
+                        Djibouti
+                      </option>
+                      <option
+                        value="DM"
+                      >
+                        Dominica
+                      </option>
+                      <option
+                        value="DO"
+                      >
+                        Dominican Republic
+                      </option>
+                      <option
+                        value="EC"
+                      >
+                        Ecuador
+                      </option>
+                      <option
+                        value="EG"
+                      >
+                        Egypt
+                      </option>
+                      <option
+                        value="SV"
+                      >
+                        El Salvador
+                      </option>
+                      <option
+                        value="GQ"
+                      >
+                        Equatorial Guinea
+                      </option>
+                      <option
+                        value="ER"
+                      >
+                        Eritrea
+                      </option>
+                      <option
+                        value="EE"
+                      >
+                        Estonia
+                      </option>
+                      <option
+                        value="ET"
+                      >
+                        Ethiopia
+                      </option>
+                      <option
+                        value="FK"
+                      >
+                        Falkland Islands (Malvinas)
+                      </option>
+                      <option
+                        value="FO"
+                      >
+                        Faroe Islands
+                      </option>
+                      <option
+                        value="FJ"
+                      >
+                        Fiji
+                      </option>
+                      <option
+                        value="FI"
+                      >
+                        Finland
+                      </option>
+                      <option
+                        value="FR"
+                      >
+                        France
+                      </option>
+                      <option
+                        value="GF"
+                      >
+                        French Guiana
+                      </option>
+                      <option
+                        value="PF"
+                      >
+                        French Polynesia
+                      </option>
+                      <option
+                        value="TF"
+                      >
+                        French Southern Territories
+                      </option>
+                      <option
+                        value="GA"
+                      >
+                        Gabon
+                      </option>
+                      <option
+                        value="GM"
+                      >
+                        Gambia
+                      </option>
+                      <option
+                        value="GE"
+                      >
+                        Georgia
+                      </option>
+                      <option
+                        value="DE"
+                      >
+                        Germany
+                      </option>
+                      <option
+                        value="GH"
+                      >
+                        Ghana
+                      </option>
+                      <option
+                        value="GI"
+                      >
+                        Gibraltar
+                      </option>
+                      <option
+                        value="GR"
+                      >
+                        Greece
+                      </option>
+                      <option
+                        value="GL"
+                      >
+                        Greenland
+                      </option>
+                      <option
+                        value="GD"
+                      >
+                        Grenada
+                      </option>
+                      <option
+                        value="GP"
+                      >
+                        Guadeloupe
+                      </option>
+                      <option
+                        value="GU"
+                      >
+                        Guam
+                      </option>
+                      <option
+                        value="GT"
+                      >
+                        Guatemala
+                      </option>
+                      <option
+                        value="GN"
+                      >
+                        Guinea
+                      </option>
+                      <option
+                        value="GW"
+                      >
+                        Guinea-Bissau
+                      </option>
+                      <option
+                        value="GY"
+                      >
+                        Guyana
+                      </option>
+                      <option
+                        value="HT"
+                      >
+                        Haiti
+                      </option>
+                      <option
+                        value="HM"
+                      >
+                        Heard Island and Mcdonald Islands
+                      </option>
+                      <option
+                        value="VA"
+                      >
+                        Holy See (Vatican City State)
+                      </option>
+                      <option
+                        value="HN"
+                      >
+                        Honduras
+                      </option>
+                      <option
+                        value="HK"
+                      >
+                        Hong Kong
+                      </option>
+                      <option
+                        value="HU"
+                      >
+                        Hungary
+                      </option>
+                      <option
+                        value="IS"
+                      >
+                        Iceland
+                      </option>
+                      <option
+                        value="IN"
+                      >
+                        India
+                      </option>
+                      <option
+                        value="ID"
+                      >
+                        Indonesia
+                      </option>
+                      <option
+                        value="IR"
+                      >
+                        Iran, Islamic Republic of
+                      </option>
+                      <option
+                        value="IQ"
+                      >
+                        Iraq
+                      </option>
+                      <option
+                        value="IE"
+                      >
+                        Ireland
+                      </option>
+                      <option
+                        value="IL"
+                      >
+                        Israel
+                      </option>
+                      <option
+                        value="IT"
+                      >
+                        Italy
+                      </option>
+                      <option
+                        value="JM"
+                      >
+                        Jamaica
+                      </option>
+                      <option
+                        value="JP"
+                      >
+                        Japan
+                      </option>
+                      <option
+                        value="JO"
+                      >
+                        Jordan
+                      </option>
+                      <option
+                        value="KZ"
+                      >
+                        Kazakhstan
+                      </option>
+                      <option
+                        value="KE"
+                      >
+                        Kenya
+                      </option>
+                      <option
+                        value="KI"
+                      >
+                        Kiribati
+                      </option>
+                      <option
+                        value="KP"
+                      >
+                        North Korea
+                      </option>
+                      <option
+                        value="KR"
+                      >
+                        South Korea
+                      </option>
+                      <option
+                        value="KW"
+                      >
+                        Kuwait
+                      </option>
+                      <option
+                        value="KG"
+                      >
+                        Kyrgyzstan
+                      </option>
+                      <option
+                        value="LA"
+                      >
+                        Lao People's Democratic Republic
+                      </option>
+                      <option
+                        value="LV"
+                      >
+                        Latvia
+                      </option>
+                      <option
+                        value="LB"
+                      >
+                        Lebanon
+                      </option>
+                      <option
+                        value="LS"
+                      >
+                        Lesotho
+                      </option>
+                      <option
+                        value="LR"
+                      >
+                        Liberia
+                      </option>
+                      <option
+                        value="LY"
+                      >
+                        Libya
+                      </option>
+                      <option
+                        value="LI"
+                      >
+                        Liechtenstein
+                      </option>
+                      <option
+                        value="LT"
+                      >
+                        Lithuania
+                      </option>
+                      <option
+                        value="LU"
+                      >
+                        Luxembourg
+                      </option>
+                      <option
+                        value="MO"
+                      >
+                        Macao
+                      </option>
+                      <option
+                        value="MG"
+                      >
+                        Madagascar
+                      </option>
+                      <option
+                        value="MW"
+                      >
+                        Malawi
+                      </option>
+                      <option
+                        value="MY"
+                      >
+                        Malaysia
+                      </option>
+                      <option
+                        value="MV"
+                      >
+                        Maldives
+                      </option>
+                      <option
+                        value="ML"
+                      >
+                        Mali
+                      </option>
+                      <option
+                        value="MT"
+                      >
+                        Malta
+                      </option>
+                      <option
+                        value="MH"
+                      >
+                        Marshall Islands
+                      </option>
+                      <option
+                        value="MQ"
+                      >
+                        Martinique
+                      </option>
+                      <option
+                        value="MR"
+                      >
+                        Mauritania
+                      </option>
+                      <option
+                        value="MU"
+                      >
+                        Mauritius
+                      </option>
+                      <option
+                        value="YT"
+                      >
+                        Mayotte
+                      </option>
+                      <option
+                        value="MX"
+                      >
+                        Mexico
+                      </option>
+                      <option
+                        value="FM"
+                      >
+                        Micronesia, Federated States of
+                      </option>
+                      <option
+                        value="MD"
+                      >
+                        Moldova, Republic of
+                      </option>
+                      <option
+                        value="MC"
+                      >
+                        Monaco
+                      </option>
+                      <option
+                        value="MN"
+                      >
+                        Mongolia
+                      </option>
+                      <option
+                        value="MS"
+                      >
+                        Montserrat
+                      </option>
+                      <option
+                        value="MA"
+                      >
+                        Morocco
+                      </option>
+                      <option
+                        value="MZ"
+                      >
+                        Mozambique
+                      </option>
+                      <option
+                        value="MM"
+                      >
+                        Myanmar
+                      </option>
+                      <option
+                        value="NA"
+                      >
+                        Namibia
+                      </option>
+                      <option
+                        value="NR"
+                      >
+                        Nauru
+                      </option>
+                      <option
+                        value="NP"
+                      >
+                        Nepal
+                      </option>
+                      <option
+                        value="NL"
+                      >
+                        Netherlands
+                      </option>
+                      <option
+                        value="NC"
+                      >
+                        New Caledonia
+                      </option>
+                      <option
+                        value="NZ"
+                      >
+                        New Zealand
+                      </option>
+                      <option
+                        value="NI"
+                      >
+                        Nicaragua
+                      </option>
+                      <option
+                        value="NE"
+                      >
+                        Niger
+                      </option>
+                      <option
+                        value="NG"
+                      >
+                        Nigeria
+                      </option>
+                      <option
+                        value="NU"
+                      >
+                        Niue
+                      </option>
+                      <option
+                        value="NF"
+                      >
+                        Norfolk Island
+                      </option>
+                      <option
+                        value="MK"
+                      >
+                        North Macedonia, Republic of
+                      </option>
+                      <option
+                        value="MP"
+                      >
+                        Northern Mariana Islands
+                      </option>
+                      <option
+                        value="NO"
+                      >
+                        Norway
+                      </option>
+                      <option
+                        value="OM"
+                      >
+                        Oman
+                      </option>
+                      <option
+                        value="PK"
+                      >
+                        Pakistan
+                      </option>
+                      <option
+                        value="PW"
+                      >
+                        Palau
+                      </option>
+                      <option
+                        value="PS"
+                      >
+                        Palestinian Territory, Occupied
+                      </option>
+                      <option
+                        value="PA"
+                      >
+                        Panama
+                      </option>
+                      <option
+                        value="PG"
+                      >
+                        Papua New Guinea
+                      </option>
+                      <option
+                        value="PY"
+                      >
+                        Paraguay
+                      </option>
+                      <option
+                        value="PE"
+                      >
+                        Peru
+                      </option>
+                      <option
+                        value="PH"
+                      >
+                        Philippines
+                      </option>
+                      <option
+                        value="PN"
+                      >
+                        Pitcairn
+                      </option>
+                      <option
+                        value="PL"
+                      >
+                        Poland
+                      </option>
+                      <option
+                        value="PT"
+                      >
+                        Portugal
+                      </option>
+                      <option
+                        value="PR"
+                      >
+                        Puerto Rico
+                      </option>
+                      <option
+                        value="QA"
+                      >
+                        Qatar
+                      </option>
+                      <option
+                        value="RE"
+                      >
+                        Reunion
+                      </option>
+                      <option
+                        value="RO"
+                      >
+                        Romania
+                      </option>
+                      <option
+                        disabled=""
+                        value="RU"
+                      >
+                        Russian Federation
+                      </option>
+                      <option
+                        value="RW"
+                      >
+                        Rwanda
+                      </option>
+                      <option
+                        value="SH"
+                      >
+                        Saint Helena
+                      </option>
+                      <option
+                        value="KN"
+                      >
+                        Saint Kitts and Nevis
+                      </option>
+                      <option
+                        value="LC"
+                      >
+                        Saint Lucia
+                      </option>
+                      <option
+                        value="PM"
+                      >
+                        Saint Pierre and Miquelon
+                      </option>
+                      <option
+                        value="VC"
+                      >
+                        Saint Vincent and the Grenadines
+                      </option>
+                      <option
+                        value="WS"
+                      >
+                        Samoa
+                      </option>
+                      <option
+                        value="SM"
+                      >
+                        San Marino
+                      </option>
+                      <option
+                        value="ST"
+                      >
+                        Sao Tome and Principe
+                      </option>
+                      <option
+                        value="SA"
+                      >
+                        Saudi Arabia
+                      </option>
+                      <option
+                        value="SN"
+                      >
+                        Senegal
+                      </option>
+                      <option
+                        value="SC"
+                      >
+                        Seychelles
+                      </option>
+                      <option
+                        value="SL"
+                      >
+                        Sierra Leone
+                      </option>
+                      <option
+                        value="SG"
+                      >
+                        Singapore
+                      </option>
+                      <option
+                        value="SK"
+                      >
+                        Slovakia
+                      </option>
+                      <option
+                        value="SI"
+                      >
+                        Slovenia
+                      </option>
+                      <option
+                        value="SB"
+                      >
+                        Solomon Islands
+                      </option>
+                      <option
+                        value="SO"
+                      >
+                        Somalia
+                      </option>
+                      <option
+                        value="ZA"
+                      >
+                        South Africa
+                      </option>
+                      <option
+                        value="GS"
+                      >
+                        South Georgia and the South Sandwich Islands
+                      </option>
+                      <option
+                        value="ES"
+                      >
+                        Spain
+                      </option>
+                      <option
+                        value="LK"
+                      >
+                        Sri Lanka
+                      </option>
+                      <option
+                        value="SD"
+                      >
+                        Sudan
+                      </option>
+                      <option
+                        value="SR"
+                      >
+                        Suriname
+                      </option>
+                      <option
+                        value="SJ"
+                      >
+                        Svalbard and Jan Mayen
+                      </option>
+                      <option
+                        value="SZ"
+                      >
+                        Swaziland
+                      </option>
+                      <option
+                        value="SE"
+                      >
+                        Sweden
+                      </option>
+                      <option
+                        value="CH"
+                      >
+                        Switzerland
+                      </option>
+                      <option
+                        value="SY"
+                      >
+                        Syrian Arab Republic
+                      </option>
+                      <option
+                        value="TW"
+                      >
+                        Taiwan
+                      </option>
+                      <option
+                        value="TJ"
+                      >
+                        Tajikistan
+                      </option>
+                      <option
+                        value="TZ"
+                      >
+                        Tanzania, United Republic of
+                      </option>
+                      <option
+                        value="TH"
+                      >
+                        Thailand
+                      </option>
+                      <option
+                        value="TL"
+                      >
+                        Timor-Leste
+                      </option>
+                      <option
+                        value="TG"
+                      >
+                        Togo
+                      </option>
+                      <option
+                        value="TK"
+                      >
+                        Tokelau
+                      </option>
+                      <option
+                        value="TO"
+                      >
+                        Tonga
+                      </option>
+                      <option
+                        value="TT"
+                      >
+                        Trinidad and Tobago
+                      </option>
+                      <option
+                        value="TN"
+                      >
+                        Tunisia
+                      </option>
+                      <option
+                        value="TR"
+                      >
+                        Turkey
+                      </option>
+                      <option
+                        value="TM"
+                      >
+                        Turkmenistan
+                      </option>
+                      <option
+                        value="TC"
+                      >
+                        Turks and Caicos Islands
+                      </option>
+                      <option
+                        value="TV"
+                      >
+                        Tuvalu
+                      </option>
+                      <option
+                        value="UG"
+                      >
+                        Uganda
+                      </option>
+                      <option
+                        value="UA"
+                      >
+                        Ukraine
+                      </option>
+                      <option
+                        value="AE"
+                      >
+                        United Arab Emirates
+                      </option>
+                      <option
+                        value="GB"
+                      >
+                        United Kingdom
+                      </option>
+                      <option
+                        value="US"
+                      >
+                        United States of America
+                      </option>
+                      <option
+                        value="UM"
+                      >
+                        United States Minor Outlying Islands
+                      </option>
+                      <option
+                        value="UY"
+                      >
+                        Uruguay
+                      </option>
+                      <option
+                        value="UZ"
+                      >
+                        Uzbekistan
+                      </option>
+                      <option
+                        value="VU"
+                      >
+                        Vanuatu
+                      </option>
+                      <option
+                        value="VE"
+                      >
+                        Venezuela
+                      </option>
+                      <option
+                        value="VN"
+                      >
+                        Viet Nam
+                      </option>
+                      <option
+                        value="VG"
+                      >
+                        Virgin Islands, British
+                      </option>
+                      <option
+                        value="VI"
+                      >
+                        Virgin Islands, U.S.
+                      </option>
+                      <option
+                        value="WF"
+                      >
+                        Wallis and Futuna
+                      </option>
+                      <option
+                        value="EH"
+                      >
+                        Western Sahara
+                      </option>
+                      <option
+                        value="YE"
+                      >
+                        Yemen
+                      </option>
+                      <option
+                        value="ZM"
+                      >
+                        Zambia
+                      </option>
+                      <option
+                        value="ZW"
+                      >
+                        Zimbabwe
+                      </option>
+                      <option
+                        value="AX"
+                      >
+                        Åland Islands
+                      </option>
+                      <option
+                        value="BQ"
+                      >
+                        Bonaire, Sint Eustatius and Saba
+                      </option>
+                      <option
+                        value="CW"
+                      >
+                        Curaçao
+                      </option>
+                      <option
+                        value="GG"
+                      >
+                        Guernsey
+                      </option>
+                      <option
+                        value="IM"
+                      >
+                        Isle of Man
+                      </option>
+                      <option
+                        value="JE"
+                      >
+                        Jersey
+                      </option>
+                      <option
+                        value="ME"
+                      >
+                        Montenegro
+                      </option>
+                      <option
+                        value="BL"
+                      >
+                        Saint Barthélemy
+                      </option>
+                      <option
+                        value="MF"
+                      >
+                        Saint Martin (French part)
+                      </option>
+                      <option
+                        value="RS"
+                      >
+                        Serbia
+                      </option>
+                      <option
+                        value="SX"
+                      >
+                        Sint Maarten (Dutch part)
+                      </option>
+                      <option
+                        value="SS"
+                      >
+                        South Sudan
+                      </option>
+                      <option
+                        value="XK"
+                      >
+                        Kosovo
+                      </option>
+                    </select>
+                  </div>
+                  <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="visibilityCountry"
+                      >
+                        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 "
+                            data-icon="eye"
+                            data-prefix="far"
+                            focusable="false"
+                            role="img"
+                            viewBox="0 0 576 512"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
+                              fill="currentColor"
+                            />
+                          </svg>
+                        </span>
+                        <select
+                          class="d-inline-block form-control"
+                          id="visibilityCountry"
+                          name="visibilityCountry"
+                          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
+            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"
+                >
+                  Primary Language Spoken
+                  <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 "
+                      data-icon="eye"
+                      data-prefix="far"
+                      focusable="false"
+                      role="img"
+                      viewBox="0 0 576 512"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                     
+                    Everyone on localhost
+                  </span>
+                </p>
+              </div>
+              <p
+                class="h5"
+                data-hj-suppress="true"
+              >
+                Yoruba
+              </p>
+            </div>
+          </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"
+                >
+                  Education
+                  <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>
+              <p
+                class="h5"
+                data-hj-suppress="true"
+              >
+                Elementary/primary school
+              </p>
+            </div>
+          </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 "
+                      data-icon="eye"
+                      data-prefix="far"
+                      focusable="false"
+                      role="img"
+                      viewBox="0 0 576 512"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                     
+                    Everyone on localhost
+                  </span>
+                </p>
+              </div>
+              <ul
+                class="list-unstyled"
+              >
+                <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>
+                <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"
+                >
+                  <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 
+                      LinkedIn
+                    </button>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        <div
+          class="pt-md-3 col-md-8 col-lg-7 offset-lg-1"
+        >
+          <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"
+                >
+                  About Me
+                  <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 "
+                      data-icon="eye"
+                      data-prefix="far"
+                      focusable="false"
+                      role="img"
+                      viewBox="0 0 576 512"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                     
+                    Everyone on localhost
+                  </span>
+                </p>
+              </div>
+              <p
+                class="lead"
+                data-hj-suppress="true"
+              >
+                This is my bio
+              </p>
+            </div>
+          </div>
+          <div
+            class="pgn-transition-replace-group position-relative mb-4"
+          >
+            <div
+              style="padding: .1px 0px;"
+            >
+              <div
+                class="editable-item-header mb-2"
+              >
+                <h2
+                  class="edit-section-header"
+                >
+                  My Certificates
+                  <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 "
+                      data-icon="eye"
+                      data-prefix="far"
+                      focusable="false"
+                      role="img"
+                      viewBox="0 0 576 512"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                     
+                    Everyone on localhost
+                  </span>
+                </p>
+              </div>
+              <div
+                class="row align-items-stretch"
+              >
+                <div
+                  class="col-12 col-sm-6 d-flex align-items-stretch"
+                >
+                  <div
+                    class="card mb-4 certificate flex-grow-1"
+                  >
+                    <div
+                      class="certificate-type-illustration"
+                      style="background-image: url(icon/mock/path);"
+                    />
+                    <div
+                      class="card-body d-flex flex-column"
+                    >
+                      <div
+                        class="card-title"
+                      >
+                        <p
+                          class="small mb-0"
+                        >
+                          Verified Certificate
+                        </p>
+                        <h4
+                          class="certificate-title"
+                        >
+                          edX Demonstration Course
+                        </h4>
+                      </div>
+                      <p
+                        class="small mb-0"
+                      >
+                        From
+                      </p>
+                      <p
+                        class="h6 mb-4"
+                      >
+                        edX
+                      </p>
+                      <div
+                        class="flex-grow-1"
+                      />
+                      <p
+                        class="small mb-2"
+                      >
+                        Completed on 
+                        3/4/2019
+                      </p>
+                      <div>
+                        <a
+                          class="pgn__hyperlink default-link standalone-link btn btn-outline-primary"
+                          href="http://www.example.com/"
+                          rel="noopener noreferrer"
+                          target="_blank"
+                        >
+                          View Certificate
+                          <span
+                            class="pgn__hyperlink__external-icon"
+                            title="Opens in a new tab"
+                          >
+                            <span
+                              class="pgn__icon"
+                              data-testid="hyperlink-icon"
+                              style="height: 1em; width: 1em;"
+                            >
+                              <svg
+                                aria-hidden="true"
+                                fill="none"
+                                focusable="false"
+                                height="24"
+                                role="img"
+                                viewBox="0 0 24 24"
+                                width="24"
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <path
+                                  d="M19 19H5V5h7V3H3v18h18v-9h-2v7ZM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7Z"
+                                  fill="currentColor"
+                                />
+                              </svg>
+                              <span
+                                class="sr-only"
+                              >
+                                in a new tab
+                              </span>
+                            </span>
+                          </span>
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<ProfilePage /> Renders correctly in various states test user with test user with non-disabled country 1`] = `
+<div>
+  <div
+    class="profile-page"
+  >
+    <div
+      class="profile-page-bg-banner bg-primary d-md-block p-relative"
+    />
+    <div
+      class="container-fluid"
+    >
+      <div
+        class="row align-items-center pt-4 mb-4 pt-md-0 mb-md-0"
+      >
+        <div
+          class="col-auto col-md-4 col-lg-3"
+        >
+          <div
+            class="d-flex align-items-center d-md-block"
+          >
+            <div
+              class="profile-avatar-wrap position-relative"
+            >
+              <div
+                class="profile-avatar rounded-circle bg-light"
+              >
+                <div
+                  class="profile-avatar-menu-container"
+                >
+                  <div
+                    class="pgn__dropdown pgn__dropdown-light dropdown"
+                    data-testid="dropdown"
+                  >
+                    <button
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      class="dropdown-toggle btn btn-primary"
+                      type="button"
+                    >
+                      Change
+                    </button>
+                  </div>
+                </div>
+                <img
+                  alt="profile avatar"
+                  class="w-100 h-100 d-block rounded-circle overflow-hidden"
+                  data-hj-suppress="true"
+                  src="http://localhost:18000/media/profile-images/d2a9bdc2ba165dcefc73265c54bf9a20_500.jpg?v=1552495012"
+                  style="object-fit: cover;"
+                />
+              </div>
+              <form
+                enctype="multipart/form-data"
+              >
+                <input
+                  accept=".jpg, .jpeg, .png"
+                  class="d-none form-control-file"
+                  id="photo-file"
+                  name="file"
+                  type="file"
+                />
+              </form>
+            </div>
+          </div>
+        </div>
+        <div
+          class="col"
+        >
+          <div
+            class="d-md-none"
+          >
+            <span
+              data-hj-suppress="true"
+            >
+              <h1
+                class="h2 mb-0 font-weight-bold text-truncate"
+              >
+                staff
+              </h1>
+              <p
+                class="mb-0"
+              >
+                Member since 
+                2017
+              </p>
+              <hr
+                class="d-none d-md-block"
+              />
+            </span>
+          </div>
+          <div
+            class="d-none d-md-block float-right"
+          />
+        </div>
+      </div>
+      <div
+        class="row"
+      >
+        <div
+          class="col-md-4 col-lg-4"
+        >
+          <div
+            class="d-none d-md-block mb-4"
+          >
+            <span
+              data-hj-suppress="true"
+            >
+              <h1
+                class="h2 mb-0 font-weight-bold text-truncate"
+              >
+                staff
+              </h1>
+              <p
+                class="mb-0"
+              >
+                Member since 
+                2017
+              </p>
+              <hr
+                class="d-none d-md-block"
+              />
+            </span>
+          </div>
+          <div
+            class="d-md-none mb-4"
+          />
+          <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"
+                >
+                  Full Name
+                  <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>
+              <p
+                class="h5"
+                data-hj-suppress="true"
+              >
+                Lemon Seltzer
+              </p>
+              <small
+                class="form-text text-muted"
+              >
+                This is the name that appears in your account and on your certificates.
+              </small>
+            </div>
+          </div>
+          <div
+            class="pgn-transition-replace-group position-relative mb-5"
+          >
+            <div
+              style="padding: .1px 0px;"
+            >
+              <div
+                aria-labelledby="country-label"
+                role="dialog"
+              >
+                <form>
+                  <div
+                    class="pgn__form-group"
+                  >
+                    <label
+                      class="edit-section-header"
+                      for="country"
+                    >
+                      Location
+                    </label>
+                    <select
+                      class="form-control"
+                      data-hj-suppress="true"
+                      id="country"
+                      name="country"
+                      type="select"
+                    >
+                      <option
+                        value=""
+                      >
+                         
+                      </option>
+                      <option
+                        value="AF"
+                      >
+                        Afghanistan
+                      </option>
+                      <option
+                        value="AL"
+                      >
+                        Albania
+                      </option>
+                      <option
+                        value="DZ"
+                      >
+                        Algeria
+                      </option>
+                      <option
+                        value="AS"
+                      >
+                        American Samoa
+                      </option>
+                      <option
+                        value="AD"
+                      >
+                        Andorra
+                      </option>
+                      <option
+                        value="AO"
+                      >
+                        Angola
+                      </option>
+                      <option
+                        value="AI"
+                      >
+                        Anguilla
+                      </option>
+                      <option
+                        value="AQ"
+                      >
+                        Antarctica
+                      </option>
+                      <option
+                        value="AG"
+                      >
+                        Antigua and Barbuda
+                      </option>
+                      <option
+                        value="AR"
+                      >
+                        Argentina
+                      </option>
+                      <option
+                        value="AM"
+                      >
+                        Armenia
+                      </option>
+                      <option
+                        value="AW"
+                      >
+                        Aruba
+                      </option>
+                      <option
+                        value="AU"
+                      >
+                        Australia
+                      </option>
+                      <option
+                        value="AT"
+                      >
+                        Austria
+                      </option>
+                      <option
+                        value="AZ"
+                      >
+                        Azerbaijan
+                      </option>
+                      <option
+                        value="BS"
+                      >
+                        Bahamas
+                      </option>
+                      <option
+                        value="BH"
+                      >
+                        Bahrain
+                      </option>
+                      <option
+                        value="BD"
+                      >
+                        Bangladesh
+                      </option>
+                      <option
+                        value="BB"
+                      >
+                        Barbados
+                      </option>
+                      <option
+                        value="BY"
+                      >
+                        Belarus
+                      </option>
+                      <option
+                        value="BE"
+                      >
+                        Belgium
+                      </option>
+                      <option
+                        value="BZ"
+                      >
+                        Belize
+                      </option>
+                      <option
+                        value="BJ"
+                      >
+                        Benin
+                      </option>
+                      <option
+                        value="BM"
+                      >
+                        Bermuda
+                      </option>
+                      <option
+                        value="BT"
+                      >
+                        Bhutan
+                      </option>
+                      <option
+                        value="BO"
+                      >
+                        Bolivia
+                      </option>
+                      <option
+                        value="BA"
+                      >
+                        Bosnia and Herzegovina
+                      </option>
+                      <option
+                        value="BW"
+                      >
+                        Botswana
+                      </option>
+                      <option
+                        value="BV"
+                      >
+                        Bouvet Island
+                      </option>
+                      <option
+                        value="BR"
+                      >
+                        Brazil
+                      </option>
+                      <option
+                        value="IO"
+                      >
+                        British Indian Ocean Territory
+                      </option>
+                      <option
+                        value="BN"
+                      >
+                        Brunei Darussalam
+                      </option>
+                      <option
+                        value="BG"
+                      >
+                        Bulgaria
+                      </option>
+                      <option
+                        value="BF"
+                      >
+                        Burkina Faso
+                      </option>
+                      <option
+                        value="BI"
+                      >
+                        Burundi
+                      </option>
+                      <option
+                        value="KH"
+                      >
+                        Cambodia
+                      </option>
+                      <option
+                        value="CM"
+                      >
+                        Cameroon
+                      </option>
+                      <option
+                        value="CA"
+                      >
+                        Canada
+                      </option>
+                      <option
+                        value="CV"
+                      >
+                        Cape Verde
+                      </option>
+                      <option
+                        value="KY"
+                      >
+                        Cayman Islands
+                      </option>
+                      <option
+                        value="CF"
+                      >
+                        Central African Republic
+                      </option>
+                      <option
+                        value="TD"
+                      >
+                        Chad
+                      </option>
+                      <option
+                        value="CL"
+                      >
+                        Chile
+                      </option>
+                      <option
+                        value="CN"
+                      >
+                        China
+                      </option>
+                      <option
+                        value="CX"
+                      >
+                        Christmas Island
+                      </option>
+                      <option
+                        value="CC"
+                      >
+                        Cocos (Keeling) Islands
+                      </option>
+                      <option
+                        value="CO"
+                      >
+                        Colombia
+                      </option>
+                      <option
+                        value="KM"
+                      >
+                        Comoros
+                      </option>
+                      <option
+                        value="CG"
+                      >
+                        Congo
+                      </option>
+                      <option
+                        value="CD"
+                      >
+                        Congo, the Democratic Republic of the
+                      </option>
+                      <option
+                        value="CK"
+                      >
+                        Cook Islands
+                      </option>
+                      <option
+                        value="CR"
+                      >
+                        Costa Rica
+                      </option>
+                      <option
+                        value="CI"
+                      >
+                        Cote D'Ivoire
+                      </option>
+                      <option
+                        value="HR"
+                      >
+                        Croatia
+                      </option>
+                      <option
+                        value="CU"
+                      >
+                        Cuba
+                      </option>
+                      <option
+                        value="CY"
+                      >
+                        Cyprus
+                      </option>
+                      <option
+                        value="CZ"
+                      >
+                        Czech Republic
+                      </option>
+                      <option
+                        value="DK"
+                      >
+                        Denmark
+                      </option>
+                      <option
+                        value="DJ"
+                      >
+                        Djibouti
+                      </option>
+                      <option
+                        value="DM"
+                      >
+                        Dominica
+                      </option>
+                      <option
+                        value="DO"
+                      >
+                        Dominican Republic
+                      </option>
+                      <option
+                        value="EC"
+                      >
+                        Ecuador
+                      </option>
+                      <option
+                        value="EG"
+                      >
+                        Egypt
+                      </option>
+                      <option
+                        value="SV"
+                      >
+                        El Salvador
+                      </option>
+                      <option
+                        value="GQ"
+                      >
+                        Equatorial Guinea
+                      </option>
+                      <option
+                        value="ER"
+                      >
+                        Eritrea
+                      </option>
+                      <option
+                        value="EE"
+                      >
+                        Estonia
+                      </option>
+                      <option
+                        value="ET"
+                      >
+                        Ethiopia
+                      </option>
+                      <option
+                        value="FK"
+                      >
+                        Falkland Islands (Malvinas)
+                      </option>
+                      <option
+                        value="FO"
+                      >
+                        Faroe Islands
+                      </option>
+                      <option
+                        value="FJ"
+                      >
+                        Fiji
+                      </option>
+                      <option
+                        value="FI"
+                      >
+                        Finland
+                      </option>
+                      <option
+                        value="FR"
+                      >
+                        France
+                      </option>
+                      <option
+                        value="GF"
+                      >
+                        French Guiana
+                      </option>
+                      <option
+                        value="PF"
+                      >
+                        French Polynesia
+                      </option>
+                      <option
+                        value="TF"
+                      >
+                        French Southern Territories
+                      </option>
+                      <option
+                        value="GA"
+                      >
+                        Gabon
+                      </option>
+                      <option
+                        value="GM"
+                      >
+                        Gambia
+                      </option>
+                      <option
+                        value="GE"
+                      >
+                        Georgia
+                      </option>
+                      <option
+                        value="DE"
+                      >
+                        Germany
+                      </option>
+                      <option
+                        value="GH"
+                      >
+                        Ghana
+                      </option>
+                      <option
+                        value="GI"
+                      >
+                        Gibraltar
+                      </option>
+                      <option
+                        value="GR"
+                      >
+                        Greece
+                      </option>
+                      <option
+                        value="GL"
+                      >
+                        Greenland
+                      </option>
+                      <option
+                        value="GD"
+                      >
+                        Grenada
+                      </option>
+                      <option
+                        value="GP"
+                      >
+                        Guadeloupe
+                      </option>
+                      <option
+                        value="GU"
+                      >
+                        Guam
+                      </option>
+                      <option
+                        value="GT"
+                      >
+                        Guatemala
+                      </option>
+                      <option
+                        value="GN"
+                      >
+                        Guinea
+                      </option>
+                      <option
+                        value="GW"
+                      >
+                        Guinea-Bissau
+                      </option>
+                      <option
+                        value="GY"
+                      >
+                        Guyana
+                      </option>
+                      <option
+                        value="HT"
+                      >
+                        Haiti
+                      </option>
+                      <option
+                        value="HM"
+                      >
+                        Heard Island and Mcdonald Islands
+                      </option>
+                      <option
+                        value="VA"
+                      >
+                        Holy See (Vatican City State)
+                      </option>
+                      <option
+                        value="HN"
+                      >
+                        Honduras
+                      </option>
+                      <option
+                        value="HK"
+                      >
+                        Hong Kong
+                      </option>
+                      <option
+                        value="HU"
+                      >
+                        Hungary
+                      </option>
+                      <option
+                        value="IS"
+                      >
+                        Iceland
+                      </option>
+                      <option
+                        value="IN"
+                      >
+                        India
+                      </option>
+                      <option
+                        value="ID"
+                      >
+                        Indonesia
+                      </option>
+                      <option
+                        value="IR"
+                      >
+                        Iran, Islamic Republic of
+                      </option>
+                      <option
+                        value="IQ"
+                      >
+                        Iraq
+                      </option>
+                      <option
+                        value="IE"
+                      >
+                        Ireland
+                      </option>
+                      <option
+                        value="IL"
+                      >
+                        Israel
+                      </option>
+                      <option
+                        value="IT"
+                      >
+                        Italy
+                      </option>
+                      <option
+                        value="JM"
+                      >
+                        Jamaica
+                      </option>
+                      <option
+                        value="JP"
+                      >
+                        Japan
+                      </option>
+                      <option
+                        value="JO"
+                      >
+                        Jordan
+                      </option>
+                      <option
+                        value="KZ"
+                      >
+                        Kazakhstan
+                      </option>
+                      <option
+                        value="KE"
+                      >
+                        Kenya
+                      </option>
+                      <option
+                        value="KI"
+                      >
+                        Kiribati
+                      </option>
+                      <option
+                        value="KP"
+                      >
+                        North Korea
+                      </option>
+                      <option
+                        value="KR"
+                      >
+                        South Korea
+                      </option>
+                      <option
+                        value="KW"
+                      >
+                        Kuwait
+                      </option>
+                      <option
+                        value="KG"
+                      >
+                        Kyrgyzstan
+                      </option>
+                      <option
+                        value="LA"
+                      >
+                        Lao People's Democratic Republic
+                      </option>
+                      <option
+                        value="LV"
+                      >
+                        Latvia
+                      </option>
+                      <option
+                        value="LB"
+                      >
+                        Lebanon
+                      </option>
+                      <option
+                        value="LS"
+                      >
+                        Lesotho
+                      </option>
+                      <option
+                        value="LR"
+                      >
+                        Liberia
+                      </option>
+                      <option
+                        value="LY"
+                      >
+                        Libya
+                      </option>
+                      <option
+                        value="LI"
+                      >
+                        Liechtenstein
+                      </option>
+                      <option
+                        value="LT"
+                      >
+                        Lithuania
+                      </option>
+                      <option
+                        value="LU"
+                      >
+                        Luxembourg
+                      </option>
+                      <option
+                        value="MO"
+                      >
+                        Macao
+                      </option>
+                      <option
+                        value="MG"
+                      >
+                        Madagascar
+                      </option>
+                      <option
+                        value="MW"
+                      >
+                        Malawi
+                      </option>
+                      <option
+                        value="MY"
+                      >
+                        Malaysia
+                      </option>
+                      <option
+                        value="MV"
+                      >
+                        Maldives
+                      </option>
+                      <option
+                        value="ML"
+                      >
+                        Mali
+                      </option>
+                      <option
+                        value="MT"
+                      >
+                        Malta
+                      </option>
+                      <option
+                        value="MH"
+                      >
+                        Marshall Islands
+                      </option>
+                      <option
+                        value="MQ"
+                      >
+                        Martinique
+                      </option>
+                      <option
+                        value="MR"
+                      >
+                        Mauritania
+                      </option>
+                      <option
+                        value="MU"
+                      >
+                        Mauritius
+                      </option>
+                      <option
+                        value="YT"
+                      >
+                        Mayotte
+                      </option>
+                      <option
+                        value="MX"
+                      >
+                        Mexico
+                      </option>
+                      <option
+                        value="FM"
+                      >
+                        Micronesia, Federated States of
+                      </option>
+                      <option
+                        value="MD"
+                      >
+                        Moldova, Republic of
+                      </option>
+                      <option
+                        value="MC"
+                      >
+                        Monaco
+                      </option>
+                      <option
+                        value="MN"
+                      >
+                        Mongolia
+                      </option>
+                      <option
+                        value="MS"
+                      >
+                        Montserrat
+                      </option>
+                      <option
+                        value="MA"
+                      >
+                        Morocco
+                      </option>
+                      <option
+                        value="MZ"
+                      >
+                        Mozambique
+                      </option>
+                      <option
+                        value="MM"
+                      >
+                        Myanmar
+                      </option>
+                      <option
+                        value="NA"
+                      >
+                        Namibia
+                      </option>
+                      <option
+                        value="NR"
+                      >
+                        Nauru
+                      </option>
+                      <option
+                        value="NP"
+                      >
+                        Nepal
+                      </option>
+                      <option
+                        value="NL"
+                      >
+                        Netherlands
+                      </option>
+                      <option
+                        value="NC"
+                      >
+                        New Caledonia
+                      </option>
+                      <option
+                        value="NZ"
+                      >
+                        New Zealand
+                      </option>
+                      <option
+                        value="NI"
+                      >
+                        Nicaragua
+                      </option>
+                      <option
+                        value="NE"
+                      >
+                        Niger
+                      </option>
+                      <option
+                        value="NG"
+                      >
+                        Nigeria
+                      </option>
+                      <option
+                        value="NU"
+                      >
+                        Niue
+                      </option>
+                      <option
+                        value="NF"
+                      >
+                        Norfolk Island
+                      </option>
+                      <option
+                        value="MK"
+                      >
+                        North Macedonia, Republic of
+                      </option>
+                      <option
+                        value="MP"
+                      >
+                        Northern Mariana Islands
+                      </option>
+                      <option
+                        value="NO"
+                      >
+                        Norway
+                      </option>
+                      <option
+                        value="OM"
+                      >
+                        Oman
+                      </option>
+                      <option
+                        value="PK"
+                      >
+                        Pakistan
+                      </option>
+                      <option
+                        value="PW"
+                      >
+                        Palau
+                      </option>
+                      <option
+                        value="PS"
+                      >
+                        Palestinian Territory, Occupied
+                      </option>
+                      <option
+                        value="PA"
+                      >
+                        Panama
+                      </option>
+                      <option
+                        value="PG"
+                      >
+                        Papua New Guinea
+                      </option>
+                      <option
+                        value="PY"
+                      >
+                        Paraguay
+                      </option>
+                      <option
+                        value="PE"
+                      >
+                        Peru
+                      </option>
+                      <option
+                        value="PH"
+                      >
+                        Philippines
+                      </option>
+                      <option
+                        value="PN"
+                      >
+                        Pitcairn
+                      </option>
+                      <option
+                        value="PL"
+                      >
+                        Poland
+                      </option>
+                      <option
+                        value="PT"
+                      >
+                        Portugal
+                      </option>
+                      <option
+                        value="PR"
+                      >
+                        Puerto Rico
+                      </option>
+                      <option
+                        value="QA"
+                      >
+                        Qatar
+                      </option>
+                      <option
+                        value="RE"
+                      >
+                        Reunion
+                      </option>
+                      <option
+                        value="RO"
+                      >
+                        Romania
+                      </option>
+                      <option
+                        value="RW"
+                      >
+                        Rwanda
+                      </option>
+                      <option
+                        value="SH"
+                      >
+                        Saint Helena
+                      </option>
+                      <option
+                        value="KN"
+                      >
+                        Saint Kitts and Nevis
+                      </option>
+                      <option
+                        value="LC"
+                      >
+                        Saint Lucia
+                      </option>
+                      <option
+                        value="PM"
+                      >
+                        Saint Pierre and Miquelon
+                      </option>
+                      <option
+                        value="VC"
+                      >
+                        Saint Vincent and the Grenadines
+                      </option>
+                      <option
+                        value="WS"
+                      >
+                        Samoa
+                      </option>
+                      <option
+                        value="SM"
+                      >
+                        San Marino
+                      </option>
+                      <option
+                        value="ST"
+                      >
+                        Sao Tome and Principe
+                      </option>
+                      <option
+                        value="SA"
+                      >
+                        Saudi Arabia
+                      </option>
+                      <option
+                        value="SN"
+                      >
+                        Senegal
+                      </option>
+                      <option
+                        value="SC"
+                      >
+                        Seychelles
+                      </option>
+                      <option
+                        value="SL"
+                      >
+                        Sierra Leone
+                      </option>
+                      <option
+                        value="SG"
+                      >
+                        Singapore
+                      </option>
+                      <option
+                        value="SK"
+                      >
+                        Slovakia
+                      </option>
+                      <option
+                        value="SI"
+                      >
+                        Slovenia
+                      </option>
+                      <option
+                        value="SB"
+                      >
+                        Solomon Islands
+                      </option>
+                      <option
+                        value="SO"
+                      >
+                        Somalia
+                      </option>
+                      <option
+                        value="ZA"
+                      >
+                        South Africa
+                      </option>
+                      <option
+                        value="GS"
+                      >
+                        South Georgia and the South Sandwich Islands
+                      </option>
+                      <option
+                        value="ES"
+                      >
+                        Spain
+                      </option>
+                      <option
+                        value="LK"
+                      >
+                        Sri Lanka
+                      </option>
+                      <option
+                        value="SD"
+                      >
+                        Sudan
+                      </option>
+                      <option
+                        value="SR"
+                      >
+                        Suriname
+                      </option>
+                      <option
+                        value="SJ"
+                      >
+                        Svalbard and Jan Mayen
+                      </option>
+                      <option
+                        value="SZ"
+                      >
+                        Swaziland
+                      </option>
+                      <option
+                        value="SE"
+                      >
+                        Sweden
+                      </option>
+                      <option
+                        value="CH"
+                      >
+                        Switzerland
+                      </option>
+                      <option
+                        value="SY"
+                      >
+                        Syrian Arab Republic
+                      </option>
+                      <option
+                        value="TW"
+                      >
+                        Taiwan
+                      </option>
+                      <option
+                        value="TJ"
+                      >
+                        Tajikistan
+                      </option>
+                      <option
+                        value="TZ"
+                      >
+                        Tanzania, United Republic of
+                      </option>
+                      <option
+                        value="TH"
+                      >
+                        Thailand
+                      </option>
+                      <option
+                        value="TL"
+                      >
+                        Timor-Leste
+                      </option>
+                      <option
+                        value="TG"
+                      >
+                        Togo
+                      </option>
+                      <option
+                        value="TK"
+                      >
+                        Tokelau
+                      </option>
+                      <option
+                        value="TO"
+                      >
+                        Tonga
+                      </option>
+                      <option
+                        value="TT"
+                      >
+                        Trinidad and Tobago
+                      </option>
+                      <option
+                        value="TN"
+                      >
+                        Tunisia
+                      </option>
+                      <option
+                        value="TR"
+                      >
+                        Turkey
+                      </option>
+                      <option
+                        value="TM"
+                      >
+                        Turkmenistan
+                      </option>
+                      <option
+                        value="TC"
+                      >
+                        Turks and Caicos Islands
+                      </option>
+                      <option
+                        value="TV"
+                      >
+                        Tuvalu
+                      </option>
+                      <option
+                        value="UG"
+                      >
+                        Uganda
+                      </option>
+                      <option
+                        value="UA"
+                      >
+                        Ukraine
+                      </option>
+                      <option
+                        value="AE"
+                      >
+                        United Arab Emirates
+                      </option>
+                      <option
+                        value="GB"
+                      >
+                        United Kingdom
+                      </option>
+                      <option
+                        value="US"
+                      >
+                        United States of America
+                      </option>
+                      <option
+                        value="UM"
+                      >
+                        United States Minor Outlying Islands
+                      </option>
+                      <option
+                        value="UY"
+                      >
+                        Uruguay
+                      </option>
+                      <option
+                        value="UZ"
+                      >
+                        Uzbekistan
+                      </option>
+                      <option
+                        value="VU"
+                      >
+                        Vanuatu
+                      </option>
+                      <option
+                        value="VE"
+                      >
+                        Venezuela
+                      </option>
+                      <option
+                        value="VN"
+                      >
+                        Viet Nam
+                      </option>
+                      <option
+                        value="VG"
+                      >
+                        Virgin Islands, British
+                      </option>
+                      <option
+                        value="VI"
+                      >
+                        Virgin Islands, U.S.
+                      </option>
+                      <option
+                        value="WF"
+                      >
+                        Wallis and Futuna
+                      </option>
+                      <option
+                        value="EH"
+                      >
+                        Western Sahara
+                      </option>
+                      <option
+                        value="YE"
+                      >
+                        Yemen
+                      </option>
+                      <option
+                        value="ZM"
+                      >
+                        Zambia
+                      </option>
+                      <option
+                        value="ZW"
+                      >
+                        Zimbabwe
+                      </option>
+                      <option
+                        value="AX"
+                      >
+                        Åland Islands
+                      </option>
+                      <option
+                        value="BQ"
+                      >
+                        Bonaire, Sint Eustatius and Saba
+                      </option>
+                      <option
+                        value="CW"
+                      >
+                        Curaçao
+                      </option>
+                      <option
+                        value="GG"
+                      >
+                        Guernsey
+                      </option>
+                      <option
+                        value="IM"
+                      >
+                        Isle of Man
+                      </option>
+                      <option
+                        value="JE"
+                      >
+                        Jersey
+                      </option>
+                      <option
+                        value="ME"
+                      >
+                        Montenegro
+                      </option>
+                      <option
+                        value="BL"
+                      >
+                        Saint Barthélemy
+                      </option>
+                      <option
+                        value="MF"
+                      >
+                        Saint Martin (French part)
+                      </option>
+                      <option
+                        value="RS"
+                      >
+                        Serbia
+                      </option>
+                      <option
+                        value="SX"
+                      >
+                        Sint Maarten (Dutch part)
+                      </option>
+                      <option
+                        value="SS"
+                      >
+                        South Sudan
+                      </option>
+                      <option
+                        value="XK"
+                      >
+                        Kosovo
+                      </option>
+                    </select>
+                  </div>
+                  <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="visibilityCountry"
+                      >
+                        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 "
+                            data-icon="eye"
+                            data-prefix="far"
+                            focusable="false"
+                            role="img"
+                            viewBox="0 0 576 512"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
+                              fill="currentColor"
+                            />
+                          </svg>
+                        </span>
+                        <select
+                          class="d-inline-block form-control"
+                          id="visibilityCountry"
+                          name="visibilityCountry"
+                          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
+            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"
+                >
+                  Primary Language Spoken
+                  <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 "
+                      data-icon="eye"
+                      data-prefix="far"
+                      focusable="false"
+                      role="img"
+                      viewBox="0 0 576 512"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                     
+                    Everyone on localhost
+                  </span>
+                </p>
+              </div>
+              <p
+                class="h5"
+                data-hj-suppress="true"
+              >
+                Yoruba
+              </p>
+            </div>
+          </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"
+                >
+                  Education
+                  <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>
+              <p
+                class="h5"
+                data-hj-suppress="true"
+              >
+                Elementary/primary school
+              </p>
+            </div>
+          </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 "
+                      data-icon="eye"
+                      data-prefix="far"
+                      focusable="false"
+                      role="img"
+                      viewBox="0 0 576 512"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                     
+                    Everyone on localhost
+                  </span>
+                </p>
+              </div>
+              <ul
+                class="list-unstyled"
+              >
+                <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>
+                <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"
+                >
+                  <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 
+                      LinkedIn
+                    </button>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        <div
+          class="pt-md-3 col-md-8 col-lg-7 offset-lg-1"
+        >
+          <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"
+                >
+                  About Me
+                  <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 "
+                      data-icon="eye"
+                      data-prefix="far"
+                      focusable="false"
+                      role="img"
+                      viewBox="0 0 576 512"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                     
+                    Everyone on localhost
+                  </span>
+                </p>
+              </div>
+              <p
+                class="lead"
+                data-hj-suppress="true"
+              >
+                This is my bio
+              </p>
+            </div>
+          </div>
+          <div
+            class="pgn-transition-replace-group position-relative mb-4"
+          >
+            <div
+              style="padding: .1px 0px;"
+            >
+              <div
+                class="editable-item-header mb-2"
+              >
+                <h2
+                  class="edit-section-header"
+                >
+                  My Certificates
+                  <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 "
+                      data-icon="eye"
+                      data-prefix="far"
+                      focusable="false"
+                      role="img"
+                      viewBox="0 0 576 512"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                     
+                    Everyone on localhost
+                  </span>
+                </p>
+              </div>
+              <div
+                class="row align-items-stretch"
+              >
+                <div
+                  class="col-12 col-sm-6 d-flex align-items-stretch"
+                >
+                  <div
+                    class="card mb-4 certificate flex-grow-1"
+                  >
+                    <div
+                      class="certificate-type-illustration"
+                      style="background-image: url(icon/mock/path);"
+                    />
+                    <div
+                      class="card-body d-flex flex-column"
+                    >
+                      <div
+                        class="card-title"
+                      >
+                        <p
+                          class="small mb-0"
+                        >
+                          Verified Certificate
+                        </p>
+                        <h4
+                          class="certificate-title"
+                        >
+                          edX Demonstration Course
+                        </h4>
+                      </div>
+                      <p
+                        class="small mb-0"
+                      >
+                        From
+                      </p>
+                      <p
+                        class="h6 mb-4"
+                      >
+                        edX
+                      </p>
+                      <div
+                        class="flex-grow-1"
+                      />
+                      <p
+                        class="small mb-2"
+                      >
+                        Completed on 
+                        3/4/2019
+                      </p>
+                      <div>
+                        <a
+                          class="pgn__hyperlink default-link standalone-link btn btn-outline-primary"
+                          href="http://www.example.com/"
+                          rel="noopener noreferrer"
+                          target="_blank"
+                        >
+                          View Certificate
+                          <span
+                            class="pgn__hyperlink__external-icon"
+                            title="Opens in a new tab"
+                          >
+                            <span
+                              class="pgn__icon"
+                              data-testid="hyperlink-icon"
+                              style="height: 1em; width: 1em;"
+                            >
+                              <svg
+                                aria-hidden="true"
+                                fill="none"
+                                focusable="false"
+                                height="24"
+                                role="img"
+                                viewBox="0 0 24 24"
+                                width="24"
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <path
+                                  d="M19 19H5V5h7V3H3v18h18v-9h-2v7ZM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7Z"
+                                  fill="currentColor"
+                                />
+                              </svg>
+                              <span
+                                class="sr-only"
+                              >
+                                in a new tab
+                              </span>
+                            </span>
+                          </span>
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`<ProfilePage /> Renders correctly in various states viewing other profile with all fields 1`] = `
 <div>
  <div
--- a/src/profile/data/reducers.js
+++ b/src/profile/data/reducers.js
@@ -22,6 +22,7 @@ export const initialState = {
  drafts: {},
  isLoadingProfile: true,
  isAuthenticatedUserProfile: false,
+  disabledCountries: ['RU'],
 };

 const profilePage = (state = initialState, action = {}) => {
--- a/src/profile/data/selectors.js
+++ b/src/profile/data/selectors.js
@@ -23,6 +23,7 @@ export const isLoadingProfileSelector = state => state.profilePage.isLoadingProf
 export const currentlyEditingFieldSelector = state => state.profilePage.currentlyEditingField;
 export const accountErrorsSelector = state => state.profilePage.errors;
 export const isAuthenticatedUserProfileSelector = state => state.profilePage.isAuthenticatedUserProfile;
+export const disabledCountriesSelector = state => state.profilePage.disabledCountries;

 export const editableFormModeSelector = createSelector(
  profileAccountSelector,
@@ -130,10 +131,14 @@ export const countrySelector = createSelector(
  editableFormSelector,
  sortedCountriesSelector,
  countryMessagesSelector,
-  (editableForm, sortedCountries, countryMessages) => ({
+  disabledCountriesSelector,
+  profileAccountSelector,
+  (editableForm, sortedCountries, countryMessages, disabledCountries, account) => ({
    ...editableForm,
    sortedCountries,
    countryMessages,
+    disabledCountries,
+    committedCountry: account.country,
  }),
 );

--- a/src/profile/forms/Country.jsx
+++ b/src/profile/forms/Country.jsx
@@ -35,7 +35,13 @@ class Country extends React.Component {

  handleSubmit(e) {
    e.preventDefault();
-    this.props.submitHandler(this.props.formId);
+    const {
+      country, disabledCountries, formId, submitHandler,
+    } = this.props;
+
+    if (!disabledCountries.includes(country)) {
+      submitHandler(formId);
+    }
  }

  handleClose() {
@@ -46,6 +52,26 @@ class Country extends React.Component {
    this.props.openHandler(this.props.formId);
  }

+  isDisabledCountry = (country) => {
+    const { disabledCountries } = this.props;
+    return disabledCountries.includes(country);
+  };
+
+  filteredCountries = (countryList) => {
+    const { disabledCountries, committedCountry } = this.props;
+
+    if (!disabledCountries.length) {
+      return countryList;
+    }
+
+    return countryList.filter(({ code }) => {
+      const isDisabled = this.isDisabledCountry(code);
+      const isUserCountry = code === committedCountry;
+
+      return !isDisabled || isUserCountry;
+    });
+  };
+
  render() {
    const {
      formId,
@@ -58,6 +84,7 @@ class Country extends React.Component {
      sortedCountries,
      countryMessages,
    } = this.props;
+    const filteredCountries = this.filteredCountries(sortedCountries);

    return (
      <SwitchContent
@@ -84,8 +111,8 @@ class Country extends React.Component {
                    onChange={this.handleChange}
                  >
                    <option value="">&nbsp;</option>
-                    {sortedCountries.map(({ code, name }) => (
-                      <option key={code} value={code}>{name}</option>
+                    {filteredCountries.map(({ code, name }) => (
+                      <option key={code} value={code} disabled={this.isDisabledCountry(code)}>{name}</option>
                    ))}
                  </select>
                  {error !== null && (
@@ -157,7 +184,9 @@ Country.propTypes = {
    code: PropTypes.string.isRequired,
    name: PropTypes.string.isRequired,
  })).isRequired,
+  disabledCountries: PropTypes.arrayOf(PropTypes.string),
  countryMessages: PropTypes.objectOf(PropTypes.string).isRequired,
+  committedCountry: PropTypes.string,

  // Actions
  changeHandler: PropTypes.func.isRequired,
@@ -175,6 +204,8 @@ Country.defaultProps = {
  country: null,
  visibilityCountry: 'private',
  error: null,
+  disabledCountries: [],
+  committedCountry: '',
 };

 export default connect(
--- a/src/routes/AppRoutes.jsx
+++ b/src/routes/AppRoutes.jsx
@@ -1,21 +1,33 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import {
  AuthenticatedPageRoute,
  PageWrap,
 } from '@edx/frontend-platform/react';
 import { Routes, Route, useNavigate } from 'react-router-dom';
 import { ProfilePage, NotFoundPage } from '../profile';
+import { ProfilePage as NewProfilePage, NotFoundPage as NewNotFoundPage } from '../profile-v2';

-const AppRoutes = () => {
+const AppRoutes = ({ isNewProfileEnabled }) => {
+  const SelectedProfilePage = isNewProfileEnabled ? NewProfilePage : ProfilePage;
+  const SelectedNotFoundPage = isNewProfileEnabled ? NewNotFoundPage : NotFoundPage;
  const navigate = useNavigate();

  return (
    <Routes>
-      <Route path="/u/:username" element={<AuthenticatedPageRoute><ProfilePage navigate={navigate} /></AuthenticatedPageRoute>} />
-      <Route path="/notfound" element={<PageWrap><NotFoundPage /></PageWrap>} />
-      <Route path="*" element={<PageWrap><NotFoundPage /></PageWrap>} />
+      <Route path="/u/:username" element={<AuthenticatedPageRoute><SelectedProfilePage navigate={navigate} /></AuthenticatedPageRoute>} />
+      <Route path="/notfound" element={<PageWrap><SelectedNotFoundPage /></PageWrap>} />
+      <Route path="*" element={<PageWrap><SelectedNotFoundPage /></PageWrap>} />
    </Routes>
  );
 };

+AppRoutes.propTypes = {
+  isNewProfileEnabled: PropTypes.bool,
+};
+
+AppRoutes.defaultProps = {
+  isNewProfileEnabled: null,
+};
+
 export default AppRoutes;
--- a/src/routes/routes.test.jsx
+++ b/src/routes/routes.test.jsx
@@ -17,6 +17,11 @@ jest.mock('../profile', () => ({
  NotFoundPage: () => (<div>Not found page</div>),
 }));

+jest.mock('../profile-v2', () => ({
+  ProfilePage: () => (<div>Profile page</div>),
+  NotFoundPage: () => (<div>Not found page</div>),
+}));
+
 const RoutesWithProvider = (context, path) => (
  <AppContext.Provider value={context}>
    <Router initialEntries={[`${path}`]}>
Author	SHA1	Message	Date
sundasnoreen12	f70f273105	chore: sync with master	2025-03-18 14:20:33 +05:00
sundasnoreen12	1d0059e6fb	Merge pull request #1137 from openedx/sundasNew/INF-1594 feat: fixed reloading issue	2024-11-26 16:06:30 +05:00
sundasnoreen12	e8be5b5926	test: added not found test case	2024-11-26 13:14:24 +05:00
Eemaan Amir	c9b3fb929d	fix: fixed responsiveness issues on mobile view (#1133 ) * fix: fixed reponsiveness issues on mobile view * test: updated tests * refactor: refactored code as requested	2024-11-26 12:44:17 +05:00
sundasnoreen12	b92efcd422	feat: fixed reloading issue	2024-11-25 17:28:54 +05:00
Eemaan Amir	c025310952	feat: reskin of Profile MFE main page (#1114 ) * feat: reskin of Profile MFE main page * feat: reskin of Profile MFE main page * test: updated tests according to the changes * fix: added missing name property * test: updated test snapshot * test: added tests for reducers * feat: moved reskin logic behind env variable * test: updated tests * refactor: refactored code according to requested changes * fix: fixed lint errors * refactor: refactored code according to requested changes * refactor: refactored code according to requested changes	2024-11-18 13:36:52 +05:00
Muhammad Adeel Tajamul	f3a328cbb3	Merge pull request #1122 from openedx/inf-rebase-dep-0001 Rebase 2u-main	2024-11-11 12:07:18 +05:00
muhammadadeeltajamul	cd7361690b	Merge branch 'master' of github.com:openedx/frontend-app-profile into inf-rebase-dep-0001	2024-11-11 07:21:35 +05:00
Muhammad Adeel Tajamul	a03cdc81c0	Merge pull request #1121 from openedx/inf-renovate-reselect-5 Rebase with 2u-main	2024-11-08 09:36:29 +05:00
muhammadadeeltajamul	2a99330801	Merge branch 'master' of github.com:openedx/frontend-app-profile into inf-renovate-reselect-5	2024-11-07 13:31:04 +05:00
Awais Ansari	ca2a79d16f	Merge pull request #1102 from openedx/aansari/rebase-with-master chore: rebase 2u-main with master	2024-10-11 14:32:56 +05:00
Awais Ansari	2cbdc5e315	Merge branch 'master' of github.com:openedx/frontend-app-profile into aansari/rebase-with-master	2024-10-10 22:44:53 +05:00
Awais Ansari	776cd125a2	feat: added country disabling feature (#1084 ) * feat: added country disabling feature * fix: lint errors * test: added test case for disabled countries * refactor: combined test cases	2024-10-01 22:19:35 +05:00