+
+
+ ),
+ }}
+ />
+ );
+};
+
+Education.propTypes = {
+ formId: PropTypes.string.isRequired,
+ levelOfEducation: PropTypes.string,
+ visibilityLevelOfEducation: PropTypes.oneOf(['private', 'all_users']),
+ editMode: PropTypes.oneOf(['editing', 'editable', 'empty', 'static']),
+ saveState: PropTypes.string,
+ error: PropTypes.string,
+ changeHandler: PropTypes.func.isRequired,
+ submitHandler: PropTypes.func.isRequired,
+ closeHandler: PropTypes.func.isRequired,
+ openHandler: PropTypes.func.isRequired,
+};
+
+Education.defaultProps = {
+ editMode: 'static',
+ saveState: null,
+ levelOfEducation: null,
+ visibilityLevelOfEducation: 'private',
+ error: null,
+};
+
+export default connect(
+ editableFormSelector,
+ {},
+)(Education);
diff --git a/src/profile-v2/forms/Education.messages.jsx b/src/profile-v2/forms/Education.messages.jsx
new file mode 100644
index 0000000..dd7f422
--- /dev/null
+++ b/src/profile-v2/forms/Education.messages.jsx
@@ -0,0 +1,56 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+ 'profile.education.education': {
+ id: 'profile.education.education',
+ defaultMessage: 'Education',
+ description: 'A section of a user profile',
+ },
+ 'profile.education.levels.p': {
+ id: 'profile.education.levels.p',
+ defaultMessage: 'Doctorate',
+ description: 'Selected by the user if their highest level of education is a doctorate degree.',
+ },
+ 'profile.education.levels.m': {
+ id: 'profile.education.levels.m',
+ defaultMessage: "Master's or professional degree",
+ description: "Selected by the user if their highest level of education is a master's or professional degree from a college or university.",
+ },
+ 'profile.education.levels.b': {
+ id: 'profile.education.levels.b',
+ defaultMessage: "Bachelor's Degree",
+ description: "Selected by the user if their highest level of education is a four year college or university bachelor's degree.",
+ },
+ 'profile.education.levels.a': {
+ id: 'profile.education.levels.a',
+ defaultMessage: "Associate's degree",
+ description: "Selected by the user if their highest level of education is an associate's degree. 1-2 years of college or university.",
+ },
+ 'profile.education.levels.hs': {
+ id: 'profile.education.levels.hs',
+ defaultMessage: 'Secondary/high school',
+ description: 'Selected by the user if their highest level of education is secondary or high school. 9-12 years of education.',
+ },
+ 'profile.education.levels.jhs': {
+ id: 'profile.education.levels.jhs',
+ defaultMessage: 'Junior secondary/junior high/middle school',
+ description: 'Selected by the user if their highest level of education is junior or middle school. 6-8 years of education.',
+ },
+ 'profile.education.levels.el': {
+ id: 'profile.education.levels.el',
+ defaultMessage: 'Elementary/primary school',
+ description: 'Selected by the user if their highest level of education is elementary or primary school. 1-5 years of education.',
+ },
+ 'profile.education.levels.none': {
+ id: 'profile.education.levels.none',
+ defaultMessage: 'No formal education',
+ description: 'Selected by the user to describe their education.',
+ },
+ 'profile.education.levels.o': {
+ id: 'profile.education.levels.o',
+ defaultMessage: 'Other education',
+ description: 'Selected by the user if they have a type of education not described by the other choices.',
+ },
+});
+
+export default messages;
diff --git a/src/profile-v2/forms/Name.jsx b/src/profile-v2/forms/Name.jsx
new file mode 100644
index 0000000..f3e2993
--- /dev/null
+++ b/src/profile-v2/forms/Name.jsx
@@ -0,0 +1,192 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { InfoOutline } from '@openedx/paragon/icons';
+import { Hyperlink, OverlayTrigger, Tooltip } from '@openedx/paragon';
+import messages from './Name.messages';
+
+import FormControls from './elements/FormControls';
+import EditableItemHeader from './elements/EditableItemHeader';
+import EmptyContent from './elements/EmptyContent';
+import SwitchContent from './elements/SwitchContent';
+
+import { editableFormSelector } from '../data/selectors';
+import {
+ useCloseOpenHandler,
+ useHandleChange,
+ useHandleSubmit,
+ useIsVisibilityEnabled,
+} from '../data/hooks';
+
+const Name = ({
+ formId,
+ name,
+ visibilityName,
+ editMode,
+ saveState,
+ changeHandler,
+ submitHandler,
+ closeHandler,
+ openHandler,
+ accountSettingsUrl,
+}) => {
+ const isVisibilityEnabled = useIsVisibilityEnabled();
+ const intl = useIntl();
+
+ const handleChange = useHandleChange(changeHandler);
+ const handleSubmit = useHandleSubmit(submitHandler, formId);
+ const handleOpen = useCloseOpenHandler(openHandler, formId);
+ const handleClose = useCloseOpenHandler(closeHandler, formId);
+
+ return (
+
+
+
+ ),
+ editable: (
+ <>
+
+ {
+ // Swallow clicks if the state is pending.
+ // We do this instead of disabling the button to prevent
+ // it from losing focus (disabled elements cannot have focus).
+ // Disabling it would causes upstream issues in focus management.
+ // Swallowing the onSubmit event on the form would be better, but
+ // we would have to add that logic for every field given our
+ // current structure of the application.
+ if (buttonState === 'pending') {
+ e.preventDefault();
+ }
+ }}
+ disabledStates={[]}
+ />
+
+