feat: add slot to extend the profile fields

package.json

@@ -39,6 +39,7 @@
     "@fortawesome/free-regular-svg-icons": "6.7.2",
     "@fortawesome/free-solid-svg-icons": "6.7.2",
     "@fortawesome/react-fontawesome": "0.2.2",
+    "@openedx/frontend-plugin-framework": "^1.7.0",
     "@openedx/paragon": "^23.4.5",
     "@pact-foundation/pact": "^11.0.2",
     "@redux-devtools/extension": "3.3.0",

src/plugin-slots/ExtendedProfileFieldsSlot/README.md

@@ -0,0 +1,49 @@
+# Extended Profile Fields
+
+### Slot ID: `org.openedx.frontend.profile.extended_profile_fields.v1`
+
+### Slot ID Aliases
+* `extended_profile_fields_slot`
+
+## Description
+
+This slot is used to replace/modify/hide the extended profile fields in the account page.
+
+## Example
+
+> [!NOTE]
+> Take into account that the fields shown in the screenshots come from a [custom NPM Package](https://www.npmjs.com/package/@edunext/frontend-component-extended-fields) 
+
+The following `env.config.jsx` will replace the default custom fields. 
+
+![Screenshot of Default Fields](./images/default_fields.png)
+
+with a custom extended fields component
+
+![Screenshot of Custom Fields](./images/custom_fields.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+import { ExtendedProfileFields } from '@organization/frontend-component-extended-fields';
+
+const config = {
+  pluginSlots: {
+    extended_profile_fields_slot: {
+      keepDefault: false,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'extended_profile_fields',
+            type: DIRECT_PLUGIN,
+            RenderWidget: ExtendedProfileFields,
+          },
+        },
+      ],
+    },
+  },
+};
+
+export default config;
+```

src/plugin-slots/ExtendedProfileFieldsSlot/index.jsx

@@ -0,0 +1,36 @@
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { useCallback } from 'react';
+import { patchProfile } from '../../profile/data/services';
+import { fetchProfile } from '../../profile/data/actions';
+
+import SwitchContent from '../../profile/forms/elements/SwitchContent';
+import EmptyContent from '../../profile/forms/elements/EmptyContent';
+import EditableItemHeader from '../../profile/forms/elements/EditableItemHeader';
+
+const ExtendedProfileFieldsSlot = () => {
+  const dispatch = useDispatch();
+  const extendedProfileValues = useSelector((state) => state.profilePage.account.extendedProfile);
+
+  const pluginProps = {
+    refreshUserProfile: useCallback((username) => dispatch(fetchProfile(username)), [dispatch]),
+    updateUserProfile: patchProfile,
+    profileFieldValues: extendedProfileValues,
+    formComponents: {
+      SwitchContent,
+      EmptyContent,
+      EditableItemHeader,
+    },
+  };
+
+  return (
+    <PluginSlot
+      id="org.openedx.frontend.profile.extended_profile_fields.v1"
+      idAliases={['extended_profile_fields_slot']}
+      pluginProps={pluginProps}
+    />
+  );
+};
+
+export default ExtendedProfileFieldsSlot;

src/profile/ProfilePage.jsx

@@ -15,6 +15,9 @@ import {
 import { InfoOutline } from '@openedx/paragon/icons';
 import classNames from 'classnames';
 
+import ExtendedProfileFieldsSlot from '../plugin-slots/ExtendedProfileFieldsSlot';
+
+// Actions
 import {
   fetchProfile,
   saveProfile,
@@ -362,6 +365,9 @@ const ProfilePage = ({ params }) => {
                     {...commonFormProps}
                   />
                   )}
+
+                  <ExtendedProfileFieldsSlot />
+
                   {isBlockVisible((socialLinks || []).some((link) => link?.socialLink !== null)) && (
                   <SocialLinks
                     socialLinks={socialLinks || []}