diff --git a/src/index.jsx b/src/index.jsx index b966bfa3c..520486ea4 100755 --- a/src/index.jsx +++ b/src/index.jsx @@ -12,11 +12,10 @@ import { Route, Routes, Outlet } from 'react-router-dom'; import Header from '@edx/frontend-component-header'; import FooterSlot from '@openedx/frontend-slot-footer'; -import { PluginSlot } from '@openedx/frontend-plugin-framework'; import configureStore from './data/configureStore'; import AccountSettingsPage, { NotFoundPage } from './account-settings'; -import IdVerificationPage from './id-verification'; +import IdVerificationPageSlot from './plugin-slots/IdVerificationPageSlot'; import messages from './i18n'; import './index.scss'; @@ -43,11 +42,7 @@ subscribe(APP_READY, () => { } /> - - - )} + element={} /> } /> } /> diff --git a/src/plugin-slots/IdVerificationPageSlot/README.md b/src/plugin-slots/IdVerificationPageSlot/README.md new file mode 100644 index 000000000..94400bd30 --- /dev/null +++ b/src/plugin-slots/IdVerificationPageSlot/README.md @@ -0,0 +1,45 @@ +# Footer Slot + +### Slot ID: `id_verification_page_plugin` + +## Description + +This slot is used to replace/modify the IDV Page. + +The implementation of the `IdVerificationPageSlot` component lives in `src/plugin-slots/IdVerificationPageSlot/index.jsx`. + +## Example + +The following `env.config.jsx` will replace the default IDV Page. + +![Screenshot of Default IDV Page](./images/default_id-verification-page.png) + +```jsx +import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework'; + +const config = { + pluginSlots: { + id_verification_page_plugin: { + plugins: [ + { + // Insert a custom IDV Page + op: PLUGIN_OPERATIONS.Insert, + widget: { + id: 'id_verification_page_plugin', + type: DIRECT_PLUGIN, + RenderWidget: () => ( +
+

This is the new IDV page

+ Go Home +
+ ), + }, + }, + ], + }, + }, +}; + +export default config; + +``` diff --git a/src/plugin-slots/IdVerificationPageSlot/images/custom_id-verification-page.png b/src/plugin-slots/IdVerificationPageSlot/images/custom_id-verification-page.png new file mode 100644 index 000000000..a3d8d00ea Binary files /dev/null and b/src/plugin-slots/IdVerificationPageSlot/images/custom_id-verification-page.png differ diff --git a/src/plugin-slots/IdVerificationPageSlot/images/default_id-verification-page.png b/src/plugin-slots/IdVerificationPageSlot/images/default_id-verification-page.png new file mode 100644 index 000000000..8741fe7ab Binary files /dev/null and b/src/plugin-slots/IdVerificationPageSlot/images/default_id-verification-page.png differ diff --git a/src/plugin-slots/IdVerificationPageSlot/index.jsx b/src/plugin-slots/IdVerificationPageSlot/index.jsx new file mode 100644 index 000000000..d207e8e09 --- /dev/null +++ b/src/plugin-slots/IdVerificationPageSlot/index.jsx @@ -0,0 +1,10 @@ +import { PluginSlot } from '@openedx/frontend-plugin-framework'; +import IdVerificationPage from '../../id-verification'; + +const IdVerificationPageSlot = () => ( + + + +); + +export default IdVerificationPageSlot; diff --git a/src/plugin-slots/README.md b/src/plugin-slots/README.md index a38ecda48..1b7f8c2df 100644 --- a/src/plugin-slots/README.md +++ b/src/plugin-slots/README.md @@ -1,3 +1,4 @@ # `frontend-app-account` Plugin Slots * [`footer_slot`](./FooterSlot/) +* [`id_verification_page_plugin`](./IdVerificationPageSlot/)