docs: Updated documentation on the IDV Page Plugin Slot

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, () => {
           <Route path="/notifications" element={<NotificationCourses />} />
           <Route
             path="/id-verification/*"
-            element={(
-              <PluginSlot id="id_verification_page_plugin">
-                <IdVerificationPage />
-              </PluginSlot>
-          )}
+            element={<IdVerificationPageSlot />}
           />
           <Route path="/" element={<AccountSettingsPage />} />
           <Route path="/notfound" element={<NotFoundPage />} />

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: () => (
+              <div>
+                <p>This is the new IDV page</p>
+                <a href="/">Go Home</a>
+              </div>
+            ),
+          },
+        },
+      ],
+    },
+  },
+};
+
+export default config;
+
+```

src/plugin-slots/IdVerificationPageSlot/index.jsx

@@ -0,0 +1,10 @@
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import IdVerificationPage from '../../id-verification';
+
+const IdVerificationPageSlot = () => (
+  <PluginSlot id="id_verification_page_plugin">
+    <IdVerificationPage />
+  </PluginSlot>
+);
+
+export default IdVerificationPageSlot;

src/plugin-slots/README.md

@@ -1,3 +1,4 @@
 # `frontend-app-account` Plugin Slots
 
 * [`footer_slot`](./FooterSlot/)
+* [`id_verification_page_plugin`](./IdVerificationPageSlot/)