feat: course unenroll is configureable and its slot is added

.env

@@ -42,5 +42,6 @@ CAREER_LINK_URL=''
 ENABLE_EDX_PERSONAL_DASHBOARD=false
 ENABLE_PROGRAMS=false
 NON_BROWSABLE_COURSES=false
+SHOW_UNENROLL_SURVEY=true
 # Fallback in local style files
 PARAGON_THEME_URLS={}

.env.development

@@ -48,5 +48,6 @@ CAREER_LINK_URL=''
 ENABLE_EDX_PERSONAL_DASHBOARD=false
 ENABLE_PROGRAMS=false
 NON_BROWSABLE_COURSES=false
+SHOW_UNENROLL_SURVEY=true
 # Fallback in local style files
 PARAGON_THEME_URLS={}

.env.test

@@ -47,4 +47,5 @@ CAREER_LINK_URL=''
 ENABLE_EDX_PERSONAL_DASHBOARD=true
 ENABLE_PROGRAMS=false
 NON_BROWSABLE_COURSES=false
+SHOW_UNENROLL_SURVEY=true
 PARAGON_THEME_URLS={}

example.env.config.js

@@ -70,4 +70,5 @@ module.exports = {
   ENABLE_NOTICES: '',
   CAREER_LINK_URL: '',
   EXPERIMENT_08_23_VAN_PAINTED_DOOR: true,
+  SHOW_UNENROLL_SURVEY: true
 };

src/config/index.js

@@ -21,6 +21,7 @@ const configuration = {
   SEARCH_CATALOG_URL: process.env.SEARCH_CATALOG_URL || null,
   ENABLE_PROGRAMS: process.env.ENABLE_PROGRAMS === 'true',
   NON_BROWSABLE_COURSES: process.env.NON_BROWSABLE_COURSES === 'true',
+  SHOW_UNENROLL_SURVEY: process.env.SHOW_UNENROLL_SURVEY === 'true',
 };
 
 const features = {};

src/containers/UnenrollConfirmModal/components/ReasonPane.jsx

@@ -50,8 +50,8 @@ export const ReasonPane = ({
     </>
   );
 };
-ReasonPane.propTypes = {
-  reason: PropTypes.shape({
+
+export const reasonShape = PropTypes.shape({
     value: PropTypes.string,
     hasReason: PropTypes.bool,
     selectOption: PropTypes.func,
@@ -61,7 +61,10 @@ ReasonPane.propTypes = {
     }),
     selected: PropTypes.string,
     handleSubmit: PropTypes.func.isRequired,
-  }).isRequired,
+})
+
+ReasonPane.propTypes = {
+  reason: reasonShape.isRequired,
   handleClose: PropTypes.func.isRequired,
 };
 

src/containers/UnenrollConfirmModal/hooks/index.js

@@ -1,10 +1,13 @@
+import { getConfig } from '@edx/frontend-platform';
+
 import React from 'react';
 
 import { StrictDict } from 'utils';
 import { apiHooks } from 'hooks';
 
 import { useUnenrollReasons } from './reasons';
 import * as module from '.';
+import { configuration } from 'config';
 
 export const state = StrictDict({
   confirmed: (val) => React.useState(val), // eslint-disable-line
@@ -18,13 +21,21 @@ export const modalStates = StrictDict({
 
 export const useUnenrollData = ({ closeModal, cardId }) => {
   const [isConfirmed, setIsConfirmed] = module.state.confirmed(false);
-  const confirm = () => setIsConfirmed(true);
   const reason = useUnenrollReasons({ cardId });
   const refreshList = apiHooks.useInitializeApp();
 
+  const unenrollFromCourse = apiHooks.useUnenrollFromCourse(cardId);
+
+  const confirm = () => {
+    if (!configuration.SHOW_UNENROLL_SURVEY) {
+      unenrollFromCourse();
+    }
+    setIsConfirmed(true);
+  };
+
   let modalState;
   if (isConfirmed) {
-    modalState = (reason.isSubmitted)
+    modalState = (reason.isSubmitted || !configuration.SHOW_UNENROLL_SURVEY)
       ? modalStates.finished : modalStates.reason;
   } else {
     modalState = modalStates.confirm;

src/containers/UnenrollConfirmModal/index.jsx

@@ -7,10 +7,10 @@ import { ModalDialog } from '@openedx/paragon';
 import { nullMethod } from 'utils';
 
 import ConfirmPane from './components/ConfirmPane';
-import ReasonPane from './components/ReasonPane';
 import FinishedPane from './components/FinishedPane';
 
 import { useUnenrollData, modalStates } from './hooks';
+import CourseUnenrollReasonSlot from 'plugin-slots/CourseUnenrollReasonSlot';
 
 export const UnenrollConfirmModal = ({
   closeModal,
@@ -44,7 +44,7 @@ export const UnenrollConfirmModal = ({
           <FinishedPane handleClose={closeAndRefresh} cardId={cardId} />
         )}
         {(modalState === modalStates.reason) && (
-          <ReasonPane reason={reason} handleClose={close} />
+          <CourseUnenrollReasonSlot reason={reason} close={close} />
         )}
       </div>
     </ModalDialog>

src/plugin-slots/CourseListSlot/README.md

@@ -15,7 +15,7 @@ This slot is used for replacing or adding content around the `CourseList` compon
 
 ## Example
 
-The space will show the `CourseList` component by default. This can be disabled in the configuration with the `keepDefault` boolean. 
+The space will show the `CourseList` component by default. This can be disabled in the configuration with the `keepDefault` boolean.
 
 ![Screenshot of the CourseListSlot](./images/course_list_slot.png)
 
@@ -60,4 +60,4 @@ const config = {
 }
 
 export default config;
-```
+```

src/plugin-slots/CourseUnenrollReasonSlot/README.md

@@ -0,0 +1 @@
+# Course Unenroll Slot

src/plugin-slots/CourseUnenrollReasonSlot/index.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import PropTypes from 'prop-types';
+
+import { PluginSlot } from '@openedx/frontend-plugin-framework'
+import ReasonPane, { reasonShape } from 'containers/UnenrollConfirmModal/components/ReasonPane'
+
+const CourseUnenrollReasonSlot = ({ reason, close }) => (
+  <PluginSlot
+    id="org.openedx.frontend.learner_dashboard.course_unenroll.v1"
+    idAliases={["course_unenroll_slot"]}
+    pluginProps={{ reason, close }}
+  >
+    <ReasonPane reason={reason} handleClose={close} />
+  </PluginSlot>
+);
+
+CourseUnenrollReasonSlot.propTypes = {
+  reason: reasonShape.isRequired,
+  close: PropTypes.func.isRequired,
+};
+
+export default CourseUnenrollReasonSlot;