diff --git a/src/plugin-slots/AdditionalProfileFieldsSlot/README.md b/src/plugin-slots/AdditionalProfileFieldsSlot/README.md
new file mode 100644
index 000000000..26c4dd9cd
--- /dev/null
+++ b/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.
+
+
+
+### 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.
diff --git a/src/plugin-slots/AdditionalProfileFieldsSlot/example/index.jsx b/src/plugin-slots/AdditionalProfileFieldsSlot/example/index.jsx
new file mode 100644
index 000000000..29551d1b7
--- /dev/null
+++ b/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 (
+
diff --git a/src/plugin-slots/AdditionalProfileFieldsSlot/README.md b/src/plugin-slots/AdditionalProfileFieldsSlot/README.md new file mode 100644 index 000000000..26c4dd9cd --- /dev/null +++ b/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. + + + +### 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. diff --git a/src/plugin-slots/AdditionalProfileFieldsSlot/example/index.jsx b/src/plugin-slots/AdditionalProfileFieldsSlot/example/index.jsx new file mode 100644 index 000000000..29551d1b7 --- /dev/null +++ b/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 ( +
+
+
+ Which Color?
+
+ Red
+ Green
+ Blue
+
+ {colorFieldError && (
+
+ {colorFieldError}
+
+ )}
+
+
+
+
+ ),
+ }}
+ />
+
+
+ );
+};
+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;
diff --git a/src/plugin-slots/AdditionalProfileFieldsSlot/images/custom_fields.png b/src/plugin-slots/AdditionalProfileFieldsSlot/images/custom_fields.png
new file mode 100644
index 000000000..547f502c5
Binary files /dev/null and b/src/plugin-slots/AdditionalProfileFieldsSlot/images/custom_fields.png differ
diff --git a/src/plugin-slots/AdditionalProfileFieldsSlot/index.jsx b/src/plugin-slots/AdditionalProfileFieldsSlot/index.jsx
new file mode 100644
index 000000000..839314b27
--- /dev/null
+++ b/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 (
+
Example Additional Profile Fields Slot
+ ++ {value ? `Selected value: ${value}` : 'No color selected'} +
+ + + ), + edit: ( + <> +