feat: plugin slot to show non course content on next button click (#1412

)
openedx · Jul 18, 2024 · 7d99677 · 7d99677
1 parent 29bc2d9
commit 7d99677
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 12 deletions.
diff --git a/src/courseware/course/sequence/Sequence.jsx b/src/courseware/course/sequence/Sequence.jsx
@@ -9,6 +9,7 @@ import {
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { useSelector } from 'react-redux';
 import SequenceExamWrapper from '@edx/frontend-lib-special-exams';
+import { useToggle } from '@openedx/paragon';
 
 import PageLoading from '@src/generic/PageLoading';
 import { useModel } from '@src/generic/model-store';
@@ -37,6 +38,7 @@ const Sequence = ({
   previousSequenceHandler,
 }) => {
   const intl = useIntl();
+  const [isOpen, open, close] = useToggle();
   const {
     canAccessProctoredExams,
     license,
@@ -51,7 +53,6 @@ const Sequence = ({
   const sequenceStatus = useSelector(state => state.courseware.sequenceStatus);
   const sequenceMightBeUnit = useSelector(state => state.courseware.sequenceMightBeUnit);
   const { enableNavigationSidebar: isEnabledOutlineSidebar } = useSelector(getCoursewareOutlineSidebarSettings);
-
   const handleNext = () => {
     const nextIndex = sequence.unitIds.indexOf(unitId) + 1;
     const newUnitId = sequence.unitIds[nextIndex];
@@ -185,6 +186,13 @@ const Sequence = ({
                   logEvent('edx.ui.lms.sequence.previous_selected', 'top');
                   handlePrevious();
                 }}
+                {...{
+                  nextSequenceHandler,
+                  handleNavigate,
+                  isOpen,
+                  open,
+                  close,
+                }}
               />
             </div>
           )}

diff --git a/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx b/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
@@ -10,8 +10,9 @@ import {
   isRtl,
   getLocale,
 } from '@edx/frontend-platform/i18n';
-
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
 import { useSelector } from 'react-redux';
+
 import { GetCourseExitNavigation } from '../../course-exit';
 import UnitButton from './UnitButton';
 import SequenceNavigationTabs from './SequenceNavigationTabs';
@@ -29,6 +30,11 @@ const SequenceNavigation = ({
   onNavigate,
   nextHandler,
   previousHandler,
+  nextSequenceHandler,
+  handleNavigate,
+  isOpen,
+  open,
+  close,
 }) => {
   const sequence = useModel('sequences', sequenceId);
   const {
@@ -95,17 +101,37 @@ const SequenceNavigation = ({
     const nextArrow = isRtl(getLocale()) ? ChevronLeft : ChevronRight;
 
     return navigationDisabledNextSequence || (
-      <Button
-        variant="link"
-        className="next-btn"
-        onClick={nextHandler}
-        disabled={disabled}
-        iconAfter={nextArrow}
-        as={disabled ? undefined : Link}
-        to={disabled ? undefined : nextLink}
+      <PluginSlot
+        id="next_button_slot"
+        pluginProps={{
+          courseId,
+          disabled,
+          buttonText,
+          nextArrow,
+          nextLink,
+          shouldDisplayNotificationTriggerInSequence,
+          sequenceId,
+          unitId,
+          nextSequenceHandler,
+          handleNavigate,
+          isOpen,
+          open,
+          close,
+          linkComponent: Link,
+        }}
       >
-        {shouldDisplayNotificationTriggerInSequence ? null : buttonText}
-      </Button>
+        <Button
+          variant="link"
+          className="next-btn"
+          onClick={nextHandler}
+          disabled={disabled}
+          iconAfter={nextArrow}
+          as={disabled ? undefined : Link}
+          to={disabled ? undefined : nextLink}
+        >
+          {shouldDisplayNotificationTriggerInSequence ? null : buttonText}
+        </Button>
+      </PluginSlot>
     );
   };
 
@@ -126,11 +152,21 @@ SequenceNavigation.propTypes = {
   onNavigate: PropTypes.func.isRequired,
   nextHandler: PropTypes.func.isRequired,
   previousHandler: PropTypes.func.isRequired,
+  close: PropTypes.func,
+  open: PropTypes.func,
+  isOpen: PropTypes.bool,
+  handleNavigate: PropTypes.func,
+  nextSequenceHandler: PropTypes.func,
 };
 
 SequenceNavigation.defaultProps = {
   className: null,
   unitId: null,
+  close: null,
+  open: null,
+  isOpen: false,
+  handleNavigate: null,
+  nextSequenceHandler: null,
 };
 
 export default injectIntl(SequenceNavigation);