feat: add slot to extend the profile fields [Backport #1254] (#1375)

* feat: add ExtendedProfileFieldsSlot component

* feat: update ExtendedProfileFieldsSlot documentation and images

* fix: format code in ExtendedProfileFieldsSlot README for consistency

* feat: add error handling to ExtendedProfileFieldsSlot component

* feat: replace ExtendedProfileFieldsSlot with AdditionalProfileFieldsSlot and update documentation

* feat: add Example component for AdditionalProfileFieldsSlot and update README

* fix: update README to reflect correct slot name and widget ID for AdditionalProfileFieldsSlot

* chore: remove unused default_fields.png image

src/account-settings/AccountSettingsPage.jsx

@@ -53,6 +53,7 @@ import { fetchSiteLanguages } from './site-language';
 import { fetchCourseList } from '../notification-preferences/data/thunks';
 import NotificationSettings from '../notification-preferences/NotificationSettings';
 import { withLocation, withNavigate } from './hoc';
+import AdditionalProfileFieldsSlot from '../plugin-slots/AdditionalProfileFieldsSlot';
 
 class AccountSettingsPage extends React.Component {
   constructor(props, context) {
@@ -732,6 +733,8 @@ class AccountSettingsPage extends React.Component {
             emptyLabel={this.props.intl.formatMessage(messages['account.settings.field.language.proficiencies.empty'])}
             {...editableFieldProps}
           />
+
+          <AdditionalProfileFieldsSlot />
         </div>
         <div className="account-section pt-3 mb-6" id="social-media">
           <h2 className="section-heading h4 mb-3">

src/plugin-slots/AdditionalProfileFieldsSlot/README.md

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

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

@@ -0,0 +1,104 @@
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Form, Button } from '@openedx/paragon';
+
+/**
+ * Straightforward example of how you could use the pluginProps provided by
+ * the AdditionalProfileFieldsSlot to create a custom profile field.
+ *
+ * Here you can set a 'favorite_color' field with radio buttons and
+ * save it to the user's profile, especifically to their `meta` in
+ * the user's model. For more information, see the documentation:
+ *
+ * https://github.com/openedx/edx-platform/blob/master/openedx/core/djangoapps/user_api/README.rst#persisting-optional-user-metadata
+ */
+const Example = ({
+  updateUserProfile, profileFieldValues, profileFieldErrors, formComponents: { SwitchContent } = {},
+}) => {
+  const [formMode, setFormMode] = useState('default');
+
+  // Get current favorite color from profileFieldValues
+  const currentColorField = profileFieldValues?.find(field => field.fieldName === 'favorite_color');
+  const currentColor = currentColorField ? currentColorField.fieldValue : '';
+
+  const [value, setValue] = useState(currentColor);
+  const handleChange = e => setValue(e.target.value);
+
+  // Get any validation errors for the favorite_color field
+  const colorFieldError = profileFieldErrors?.favorite_color;
+
+  const handleSubmit = () => {
+    try {
+      updateUserProfile({ extendedProfile: [{ fieldName: 'favorite_color', fieldValue: value }] });
+      setFormMode('default');
+    } catch (error) {
+      setFormMode('edit');
+    }
+  };
+
+  return (
+    <div className="border .border-accent-500 p-3">
+      <h3 className="h3">Example Additional Profile Fields Slot</h3>
+
+      <SwitchContent
+        expression={formMode}
+        cases={{
+          default: (
+            <>
+              <h3 className="text-muted">
+                {value ? `Selected value: ${value}` : 'No color selected'}
+              </h3>
+              <Button onClick={() => setFormMode('edit')}>Edit</Button>
+            </>
+          ),
+          edit: (
+            <>
+              <Form.Group>
+                <Form.Label>Which Color?</Form.Label>
+                <Form.RadioSet
+                  name="colors"
+                  onChange={handleChange}
+                  value={value}
+                  isInvalid={!!colorFieldError}
+                >
+                  <Form.Radio value="red">Red</Form.Radio>
+                  <Form.Radio value="green">Green</Form.Radio>
+                  <Form.Radio value="blue">Blue</Form.Radio>
+                </Form.RadioSet>
+                {colorFieldError && (
+                  <Form.Control.Feedback type="invalid">
+                    {colorFieldError}
+                  </Form.Control.Feedback>
+                )}
+              </Form.Group>
+
+              <Button onClick={handleSubmit} disabled={!value}>
+                Save
+              </Button>
+            </>
+          ),
+        }}
+      />
+
+    </div>
+  );
+};
+Example.propTypes = {
+  updateUserProfile: PropTypes.func.isRequired,
+  profileFieldValues: PropTypes.arrayOf(
+    PropTypes.shape({
+      fieldName: PropTypes.string.isRequired,
+      fieldValue: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.bool,
+        PropTypes.number,
+      ]).isRequired,
+    }),
+  ),
+  profileFieldErrors: PropTypes.objectOf(PropTypes.string),
+  formComponents: PropTypes.shape({
+    SwitchContent: PropTypes.elementType.isRequired,
+  }),
+};
+
+export default Example;

src/plugin-slots/AdditionalProfileFieldsSlot/index.jsx

@@ -0,0 +1,32 @@
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import { useDispatch, useSelector } from 'react-redux';
+import { camelCaseObject, snakeCaseObject } from '@edx/frontend-platform';
+
+import { fetchSettings, saveSettings } from '../../account-settings/data/actions';
+
+import SwitchContent from '../../account-settings/SwitchContent';
+
+const AdditionalProfileFieldsSlot = () => {
+  const dispatch = useDispatch();
+  const extendedProfileValues = useSelector((state) => state.accountSettings.values.extended_profile);
+  const errors = useSelector((state) => state.accountSettings.errors);
+
+  const pluginProps = {
+    refreshUserProfile: (username) => dispatch(fetchSettings(username)),
+    updateUserProfile: (params) => dispatch(saveSettings(null, null, snakeCaseObject(params))),
+    profileFieldValues: camelCaseObject(extendedProfileValues),
+    profileFieldErrors: errors,
+    formComponents: {
+      SwitchContent,
+    },
+  };
+
+  return (
+    <PluginSlot
+      id="org.openedx.frontend.account.additional_profile_fields.v1"
+      pluginProps={pluginProps}
+    />
+  );
+};
+
+export default AdditionalProfileFieldsSlot;

src/plugin-slots/README.md

@@ -2,3 +2,4 @@
 
 * [`org.openedx.frontend.layout.footer.v1`](./FooterSlot/)
 * [`org.openedx.frontend.account.id_verification_page.v1`](./IdVerificationPageSlot/)
+* [`org.openedx.frontend.account.additional_profile_fields.v1`](./AdditionalProfileFieldsSlot/)