feat: add extended profile fields functionality to profile page

bra-i-am · bra-i-am · commit 300a52e88c6a · 2025-02-11T15:44:04.000-05:00
diff --git a/src/profile/ProfilePage.jsx b/src/profile/ProfilePage.jsx
@@ -17,6 +17,7 @@ import {
   openForm,
   closeForm,
   updateDraft,
+  getExtendedProfileFields as fetchExtraFieldsInfo,
 } from './data/actions';
 
 // Components
@@ -42,6 +43,7 @@ import { profilePageSelector } from './data/selectors';
 import messages from './ProfilePage.messages';
 
 import withParams from '../utils/hoc';
+import ExtendedProfileFields from './forms/ExtendedProfileFields';
 
 ensureConfig(['CREDENTIALS_BASE_URL', 'LMS_BASE_URL'], 'ProfilePage');
 
@@ -65,6 +67,7 @@ class ProfilePage extends React.Component {
 
   componentDidMount() {
     this.props.fetchProfile(this.props.params.username);
+    this.props.fetchExtraFieldsInfo({ is_register_page: true });
     sendTrackingLogEvent('edx.profile.viewed', {
       username: this.props.params.username,
     });
@@ -284,6 +287,13 @@ class ProfilePage extends React.Component {
             )}
           </div>
           <div className="pt-md-3 col-md-8 col-lg-7 offset-lg-1">
+            {this.props.extendedProfileFields.length > 0 && (
+              <ExtendedProfileFields
+                extendedProfileFields={this.props.extendedProfileFields}
+                formId="extendedProfile"
+                {...commonFormProps}
+              />
+            )}
             {!this.isYOBDisabled() && this.renderAgeMessage()}
             {isBioBlockVisible && (
               <Bio
@@ -360,6 +370,28 @@ ProfilePage.propTypes = {
   name: PropTypes.string,
   visibilityName: PropTypes.string.isRequired,
 
+  // Extra profile fields
+  extendedProfileFields: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired,
+    default: PropTypes.unknown,
+    placeholder: PropTypes.string,
+    instructions: PropTypes.string,
+    options: PropTypes.arrayOf(PropTypes.shape({
+      value: PropTypes.string.isRequired,
+      label: PropTypes.string.isRequired,
+    })),
+    error_message: PropTypes.shape({
+      required: PropTypes.string,
+      invalid: PropTypes.string,
+    }),
+    restrictions: PropTypes.shape({
+      max_length: PropTypes.number,
+    }),
+    type: PropTypes.string.isRequired,
+    value: PropTypes.unknown,
+  })),
+
   // Social links form data
   socialLinks: PropTypes.arrayOf(PropTypes.shape({
     platform: PropTypes.string,
@@ -395,6 +427,7 @@ ProfilePage.propTypes = {
   openForm: PropTypes.func.isRequired,
   closeForm: PropTypes.func.isRequired,
   updateDraft: PropTypes.func.isRequired,
+  fetchExtraFieldsInfo: PropTypes.func.isRequired,
 
   // Router
   params: PropTypes.shape({
@@ -422,6 +455,7 @@ ProfilePage.defaultProps = {
   courseCertificates: null,
   requiresParentalConsent: null,
   dateJoined: null,
+  extendedProfileFields: [],
 };
 
 export default connect(
@@ -434,5 +468,6 @@ export default connect(
     openForm,
     closeForm,
     updateDraft,
+    fetchExtraFieldsInfo,
   },
 )(injectIntl(withParams(ProfilePage)));
diff --git a/src/profile/data/actions.js b/src/profile/data/actions.js
@@ -147,3 +147,29 @@ export const updateDraft = (name, value) => ({
 export const resetDrafts = () => ({
   type: RESET_DRAFTS,
 });
+
+// Third party auth context
+export const EXTENDED_PROFILE_FIELDS = new AsyncActionType('EXTENDED_PROFILE_FIELDS', 'GET_EXTENDED_PROFILE_FIELDS');
+export const EXTENDED_PROFILE_FIELDS_CLEAR_ERROR_MSG = 'EXTENDED_PROFILE_FIELDS_CLEAR_ERROR_MSG';
+
+export const getExtendedProfileFields = (urlParams) => ({
+  type: EXTENDED_PROFILE_FIELDS.BASE,
+  payload: { urlParams },
+});
+
+export const getExtendedProfileFieldsBegin = () => ({
+  type: EXTENDED_PROFILE_FIELDS.BEGIN,
+});
+
+export const getExtendedProfileFieldsSuccess = (fields) => ({
+  type: EXTENDED_PROFILE_FIELDS.SUCCESS,
+  payload: fields,
+});
+
+export const getExtendedProfileFieldsFailure = () => ({
+  type: EXTENDED_PROFILE_FIELDS.FAILURE,
+});
+
+export const clearThirdPartyAuthContextErrorMessage = () => ({
+  type: EXTENDED_PROFILE_FIELDS_CLEAR_ERROR_MSG,
+});
diff --git a/src/profile/data/reducers.js b/src/profile/data/reducers.js
@@ -7,6 +7,7 @@ import {
   FETCH_PROFILE,
   UPDATE_DRAFT,
   RESET_DRAFTS,
+  EXTENDED_PROFILE_FIELDS,
 } from './actions';
 
 export const initialState = {
@@ -22,6 +23,7 @@ export const initialState = {
   drafts: {},
   isLoadingProfile: true,
   isAuthenticatedUserProfile: false,
+  extendedProfileFields: [],
 };
 
 const profilePage = (state = initialState, action = {}) => {
@@ -153,6 +155,14 @@ const profilePage = (state = initialState, action = {}) => {
         };
       }
       return state;
+    case EXTENDED_PROFILE_FIELDS.BEGIN:
+    case EXTENDED_PROFILE_FIELDS.FAILURE:
+    case EXTENDED_PROFILE_FIELDS.SUCCESS:
+      if (!action.payload) { return state; }
+      return {
+        ...state,
+        extendedProfileFields: action.payload,
+      };
     default:
       return state;
   }
diff --git a/src/profile/data/sagas.js b/src/profile/data/sagas.js
@@ -30,6 +30,10 @@ import {
   saveProfileSuccess,
   SAVE_PROFILE,
   SAVE_PROFILE_PHOTO,
+  EXTENDED_PROFILE_FIELDS,
+  getExtendedProfileFieldsBegin,
+  getExtendedProfileFieldsSuccess,
+  getExtendedProfileFieldsFailure,
 } from './actions';
 import { handleSaveProfileSelector, userAccountSelector } from './selectors';
 import * as ProfileApiService from './services';
@@ -114,6 +118,7 @@ export function* handleSaveProfile(action) {
       'languageProficiencies',
       'name',
       'socialLinks',
+      'extendedProfile',
     ]);
 
     const preferencesDrafts = pick(drafts, [
@@ -201,9 +206,24 @@ export function* handleDeleteProfilePhoto(action) {
   }
 }
 
+export function* fetchThirdPartyAuthContext(action) {
+  try {
+    yield put(getExtendedProfileFieldsBegin());
+    const {
+      fields,
+    } = yield call(ProfileApiService.getExtendedProfileFields, action.payload.urlParams);
+
+    yield put(getExtendedProfileFieldsSuccess(fields));
+  } catch (e) {
+    yield put(getExtendedProfileFieldsFailure());
+    throw e;
+  }
+}
+
 export default function* profileSaga() {
   yield takeEvery(FETCH_PROFILE.BASE, handleFetchProfile);
   yield takeEvery(SAVE_PROFILE.BASE, handleSaveProfile);
   yield takeEvery(SAVE_PROFILE_PHOTO.BASE, handleSaveProfilePhoto);
   yield takeEvery(DELETE_PROFILE_PHOTO.BASE, handleDeleteProfilePhoto);
+  yield takeEvery(EXTENDED_PROFILE_FIELDS.BASE, fetchThirdPartyAuthContext);
 }
diff --git a/src/profile/data/selectors.js b/src/profile/data/selectors.js
@@ -11,6 +11,7 @@ export const formIdSelector = (state, props) => props.formId;
 export const userAccountSelector = state => state.userAccount;
 
 export const profileAccountSelector = state => state.profilePage.account;
+export const extendedProfileFieldsSelector = state => state.profilePage.extendedProfileFields;
 export const profileDraftsSelector = state => state.profilePage.drafts;
 export const accountPrivacySelector = state => state.profilePage.preferences.accountPrivacy;
 export const profilePreferencesSelector = state => state.profilePage.preferences;
@@ -323,6 +324,7 @@ export const profilePageSelector = createSelector(
   isLoadingProfileSelector,
   draftSocialLinksByPlatformSelector,
   accountErrorsSelector,
+  extendedProfileFieldsSelector,
   (
     account,
     formValues,
@@ -332,6 +334,7 @@ export const profilePageSelector = createSelector(
     isLoadingProfile,
     draftSocialLinksByPlatform,
     errors,
+    extendedProfileFields,
   ) => ({
     // Account data we need
     username: account.username,
@@ -374,5 +377,14 @@ export const profilePageSelector = createSelector(
     savePhotoState,
     isLoadingProfile,
     photoUploadError: errors.photo || null,
+
+    // Extended profile fields
+    extendedProfileFields: extendedProfileFields.map((field) => ({
+      ...field,
+      value: account.extendedProfile?.find(
+        (extendedProfileField) => extendedProfileField.fieldName === field.name,
+      )?.fieldValue,
+    })),
   }),
+
 );
diff --git a/src/profile/data/services.js b/src/profile/data/services.js
@@ -1,5 +1,5 @@
 import { ensureConfig, getConfig } from '@edx/frontend-platform';
-import { getAuthenticatedHttpClient as getHttpClient } from '@edx/frontend-platform/auth';
+import { getAuthenticatedHttpClient, getAuthenticatedHttpClient as getHttpClient } from '@edx/frontend-platform/auth';
 import { logError } from '@edx/frontend-platform/logging';
 import { camelCaseObject, convertKeyNames, snakeCaseObject } from '../utils';
 
@@ -147,3 +147,26 @@ export async function getCourseCertificates(username) {
     return [];
   }
 }
+
+export async function getExtendedProfileFields(urlParams) {
+  const requestConfig = {
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+    params: urlParams,
+    isPublic: true,
+  };
+
+  const { data } = await getAuthenticatedHttpClient()
+    .get(
+      `${getConfig().LMS_BASE_URL}/api/mfe_context`,
+      requestConfig,
+    )
+    .catch((e) => {
+      throw (e);
+    });
+
+  const extendedProfileFields = data.optionalFields.extended_profile
+    .map((fieldName) => (data.optionalFields.fields[fieldName] ?? data.registrationFields.fields[fieldName]))
+    .filter(Boolean);
+
+  return { fields: extendedProfileFields };
+}
diff --git a/src/profile/forms/ExtendedProfileFields.jsx b/src/profile/forms/ExtendedProfileFields.jsx
@@ -0,0 +1,110 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import get from 'lodash.get';
+
+// Mock Data
+import mockData from '../data/mock_data';
+
+// Components
+import EditableItemHeader from './elements/EditableItemHeader';
+import SwitchContent from './elements/SwitchContent';
+import SelectField from './elements/SelectField';
+import { editableFormSelector } from '../data/selectors';
+import TextField from './elements/TextField';
+
+const ExtendedProfileFields = (props) => {
+  const {
+    extendedProfileFields, formId, changeHandler, submitHandler, closeHandler, openHandler, editMode,
+  } = props;
+
+  //   if (!learningGoal) {
+  //     learningGoal = mockData.learningGoal;
+  //   }
+
+  //   if (!editMode || editMode === 'empty') { // editMode defaults to 'empty', not sure why yet
+  //     editMode = mockData.editMode;
+  //   }
+
+  //   if (!visibilityLearningGoal) {
+  //     visibilityLearningGoal = mockData.visibilityLearningGoal;
+  //   }
+
+  return extendedProfileFields?.map((field) => (
+    <SwitchContent
+      className="mb-5"
+      expression={field.type}
+      cases={{
+        checkbox: (
+          <>
+            <EditableItemHeader content={field.label} />
+            <p data-hj-suppress className="lead">
+              {field.default}
+            </p>
+          </>
+        ),
+        text: (
+          <TextField
+            formId={formId}
+            changeHandler={changeHandler}
+            submitHandler={submitHandler}
+            closeHandler={closeHandler}
+            openHandler={openHandler}
+            editMode={editMode}
+            {...field}
+          />
+        ),
+        select: (
+          <SelectField
+            formId={formId}
+            changeHandler={changeHandler}
+            submitHandler={submitHandler}
+            closeHandler={closeHandler}
+            openHandler={openHandler}
+            editMode={editMode}
+            {...field}
+          />
+        ),
+      }}
+    />
+  ));
+};
+
+ExtendedProfileFields.propTypes = {
+  // From Selector
+  formId: PropTypes.string.isRequired,
+  extendedProfileFields: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired,
+    default: PropTypes.unknown,
+    placeholder: PropTypes.string,
+    instructions: PropTypes.string,
+    options: PropTypes.arrayOf(PropTypes.shape({
+      value: PropTypes.string.isRequired,
+      label: PropTypes.string.isRequired,
+    })),
+    error_message: PropTypes.shape({
+      required: PropTypes.string,
+      invalid: PropTypes.string,
+    }),
+    restrictions: PropTypes.shape({
+      max_length: PropTypes.number,
+    }),
+    type: PropTypes.string.isRequired,
+  })).isRequired,
+
+  // Actions
+  changeHandler: PropTypes.func.isRequired,
+  submitHandler: PropTypes.func.isRequired,
+  closeHandler: PropTypes.func.isRequired,
+  openHandler: PropTypes.func.isRequired,
+
+  // i18n
+  intl: intlShape.isRequired,
+};
+
+ExtendedProfileFields.defaultProps = {
+};
+
+export default connect(editableFormSelector, {})(injectIntl(ExtendedProfileFields));
diff --git a/src/profile/forms/elements/SelectField.jsx b/src/profile/forms/elements/SelectField.jsx
diff --git a/src/profile/forms/elements/TextField.jsx b/src/profile/forms/elements/TextField.jsx
