diff --git a/src/courseware/course/sequence/Sequence.jsx b/src/courseware/course/sequence/Sequence.jsx index 9579b4df..4b197330 100644 --- a/src/courseware/course/sequence/Sequence.jsx +++ b/src/courseware/course/sequence/Sequence.jsx @@ -9,7 +9,6 @@ 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'; @@ -35,7 +34,6 @@ const Sequence = ({ previousSequenceHandler, }) => { const intl = useIntl(); - const [isOpen, open, close] = useToggle(); const { canAccessProctoredExams, license, @@ -145,6 +143,7 @@ const Sequence = ({ const renderUnitNavigation = (isAtTop) => ( diff --git a/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx b/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx index 918f6c3e..c89a7dfd 100644 --- a/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx +++ b/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx @@ -1,9 +1,7 @@ -import React from 'react'; import PropTypes from 'prop-types'; import { breakpoints, useWindowSize } from '@openedx/paragon'; import classNames from 'classnames'; import { useIntl } from '@edx/frontend-platform/i18n'; -import { PluginSlot } from '@openedx/frontend-plugin-framework'; import { useSelector } from 'react-redux'; import { LOADED } from '@src/constants'; @@ -15,7 +13,7 @@ import { useModel } from '../../../../generic/model-store'; import messages from './messages'; import PreviousButton from './generic/PreviousButton'; -import NextButton from './generic/NextButton'; +import { NextUnitTopNavTriggerSlot } from '../../../../plugin-slots/NextUnitTopNavTriggerSlot'; const SequenceNavigation = ({ unitId, @@ -24,11 +22,6 @@ const SequenceNavigation = ({ onNavigate, nextHandler, previousHandler, - nextSequenceHandler, - handleNavigate, - isOpen, - open, - close, }) => { const intl = useIntl(); const sequence = useModel('sequences', sequenceId); @@ -83,36 +76,28 @@ const SequenceNavigation = ({ ); const renderNextButton = () => { + let buttonText; const { exitActive, exitText } = GetCourseExitNavigation(courseId, intl); - const buttonText = (isLastUnit && exitText) ? exitText : intl.formatMessage(messages.nextButton); const disabled = isLastUnit && !exitActive; + if (isLastUnit && exitText) { + buttonText = exitText; + } else if (!shouldDisplayNotificationTriggerInSequence) { + buttonText = intl.formatMessage(messages.nextButton); + } return navigationDisabledNextSequence || ( - - - + /> ); }; @@ -132,21 +117,11 @@ 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 SequenceNavigation; diff --git a/src/courseware/course/sequence/sequence-navigation/UnitNavigation.jsx b/src/courseware/course/sequence/sequence-navigation/UnitNavigation.jsx index d27e0acb..3cabbe1a 100644 --- a/src/courseware/course/sequence/sequence-navigation/UnitNavigation.jsx +++ b/src/courseware/course/sequence/sequence-navigation/UnitNavigation.jsx @@ -1,7 +1,6 @@ import classNames from 'classnames'; import PropTypes from 'prop-types'; import { useIntl } from '@edx/frontend-platform/i18n'; -import { useSelector } from 'react-redux'; import { GetCourseExitNavigation } from '../../course-exit'; @@ -9,6 +8,7 @@ import { useSequenceNavigationMetadata } from './hooks'; import messages from './messages'; import PreviousButton from './generic/PreviousButton'; import NextButton from './generic/NextButton'; +import { NextUnitTopNavTriggerSlot } from '../../../../plugin-slots/NextUnitTopNavTriggerSlot'; const UnitNavigation = ({ sequenceId, @@ -16,12 +16,12 @@ const UnitNavigation = ({ onClickPrevious, onClickNext, isAtTop, + courseId, }) => { const intl = useIntl(); const { isFirstUnit, isLastUnit, nextLink, previousLink, } = useSequenceNavigationMetadata(sequenceId, unitId); - const { courseId } = useSelector(state => state.courseware); const renderPreviousButton = () => ( + ); + } + return ( @@ -60,6 +80,7 @@ const UnitNavigation = ({ }; UnitNavigation.propTypes = { + courseId: PropTypes.string.isRequired, sequenceId: PropTypes.string.isRequired, unitId: PropTypes.string, onClickPrevious: PropTypes.func.isRequired, diff --git a/src/courseware/course/sequence/sequence-navigation/UnitNavigation.test.jsx b/src/courseware/course/sequence/sequence-navigation/UnitNavigation.test.jsx index 779769d2..26e3034f 100644 --- a/src/courseware/course/sequence/sequence-navigation/UnitNavigation.test.jsx +++ b/src/courseware/course/sequence/sequence-navigation/UnitNavigation.test.jsx @@ -18,6 +18,7 @@ describe('Unit Navigation', () => { const store = await initializeTestStore({ courseMetadata, unitBlocks }); const { courseware } = store.getState(); mockData = { + courseId: courseware.courseId, unitId: unitBlocks[1].id, sequenceId: courseware.sequenceId, onClickPrevious: () => {}, diff --git a/src/courseware/course/sequence/sequence-navigation/generic/NextButton.jsx b/src/courseware/course/sequence/sequence-navigation/generic/NextButton.jsx index f0051df0..40de2c51 100644 --- a/src/courseware/course/sequence/sequence-navigation/generic/NextButton.jsx +++ b/src/courseware/course/sequence/sequence-navigation/generic/NextButton.jsx @@ -7,8 +7,8 @@ import { isRtl, getLocale } from '@edx/frontend-platform/i18n'; import UnitNavigationEffortEstimate from '../UnitNavigationEffortEstimate'; const NextButton = ({ - onClick, - buttonLabel, + onClickHandler, + buttonText, nextLink, variant, buttonStyle, @@ -20,16 +20,16 @@ const NextButton = ({ const navLink = pathname.startsWith('/preview') ? `/preview${nextLink}` : nextLink; const buttonContent = hasEffortEstimate ? ( - {buttonLabel} + {buttonText} - ) : buttonLabel; + ) : buttonText; return ( + ), + }, + }, + ] + } + }, +} + +export default config; +``` diff --git a/src/plugin-slots/NextUnitTopNavTriggerSlot/index.tsx b/src/plugin-slots/NextUnitTopNavTriggerSlot/index.tsx new file mode 100644 index 00000000..909c4da4 --- /dev/null +++ b/src/plugin-slots/NextUnitTopNavTriggerSlot/index.tsx @@ -0,0 +1,53 @@ +import React from 'react'; + +import { PluginSlot } from '@openedx/frontend-plugin-framework'; + +import NextButton from '../../courseware/course/sequence/sequence-navigation/generic/NextButton'; + +interface Props { + courseId: string | ''; + disabled: boolean; + buttonText: string | ''; + nextLink: string; + sequenceId: string; + unitId: string; + onClickHandler: () => void; + variant: string; + buttonStyle: string; +} + +export const NextUnitTopNavTriggerSlot : React.FC = ({ + courseId, + disabled, + buttonText, + nextLink, + sequenceId, + onClickHandler, + variant, + buttonStyle, +}) => ( + + + +); diff --git a/src/plugin-slots/NextUnitTopNavTriggerSlot/screenshot_horizontal_nav_custom.png b/src/plugin-slots/NextUnitTopNavTriggerSlot/screenshot_horizontal_nav_custom.png new file mode 100644 index 00000000..06e2fa3b Binary files /dev/null and b/src/plugin-slots/NextUnitTopNavTriggerSlot/screenshot_horizontal_nav_custom.png differ diff --git a/src/plugin-slots/NextUnitTopNavTriggerSlot/screenshot_horizontal_nav_default.png b/src/plugin-slots/NextUnitTopNavTriggerSlot/screenshot_horizontal_nav_default.png new file mode 100644 index 00000000..4f4e80d7 Binary files /dev/null and b/src/plugin-slots/NextUnitTopNavTriggerSlot/screenshot_horizontal_nav_default.png differ diff --git a/src/plugin-slots/NextUnitTopNavTriggerSlot/screenshot_unit_at_top_custom.png b/src/plugin-slots/NextUnitTopNavTriggerSlot/screenshot_unit_at_top_custom.png new file mode 100644 index 00000000..76bab491 Binary files /dev/null and b/src/plugin-slots/NextUnitTopNavTriggerSlot/screenshot_unit_at_top_custom.png differ diff --git a/src/plugin-slots/NextUnitTopNavTriggerSlot/screenshot_unit_at_top_default.png b/src/plugin-slots/NextUnitTopNavTriggerSlot/screenshot_unit_at_top_default.png new file mode 100644 index 00000000..5c3d3df5 Binary files /dev/null and b/src/plugin-slots/NextUnitTopNavTriggerSlot/screenshot_unit_at_top_default.png differ