Andal.LND/frontend-app-learning
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

AA-278 & AA-279: Add offer and course expired alerts to outline (#164)

Browse Source 
* AA-278: Add offer alert to outline

It was previously only used in the courseware. But to match the
LMS, we also want to show it on the outline tab.

* AA-279: Add course expired alert to outline

It was previously only used in the courseware. But to match the
LMS, we also want to show it on the outline tab.
This commit is contained in:
Michael Terry
2020-08-06 09:49:37 -04:00
committed by GitHub
parent 4667535c0c
commit 9e0f192ae7
11 changed files with 63 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/courseware/course/Course.jsx
View File

@@ -5,8 +5,8 @@ import { useDispatch } from 'react-redux';
import { getConfig } from '@edx/frontend-platform';
import { AlertList } from '../../generic/user-messages';
import { useAccessExpirationAlert } from '../../alerts/access-expiration-alert';
import { useOfferAlert } from '../../alerts/offer-alert';
import useAccessExpirationAlert from '../../alerts/access-expiration-alert';
import useOfferAlert from '../../alerts/offer-alert';
import Sequence from './sequence';
@@ -16,13 +16,6 @@ import CourseSock from './course-sock';
import ContentTools from './content-tools';
import { useModel } from '../../generic/model-store';
// Note that we import from the component files themselves in the enrollment-alert package.
// This is because Reacy.lazy() requires that we import() from a file with a Component as it's
// default export.
// See React.lazy docs here: https://reactjs.org/docs/code-splitting.html#reactlazy
const AccessExpirationAlert = React.lazy(() => import('../../alerts/access-expiration-alert/AccessExpirationAlert'));
const OfferAlert = React.lazy(() => import('../../alerts/offer-alert/OfferAlert'));
function Course({
courseId,
sequenceId,
@@ -41,15 +34,18 @@ function Course({
course,
].filter(element => element != null).map(element => element.title);
useOfferAlert(courseId);
useAccessExpirationAlert(courseId);
const {
canShowUpgradeSock,
celebrations,
courseExpiredMessage,
offerHtml,
verifiedMode,
} = course;
// Below the tabs, above the breadcrumbs alerts (appearing in the order listed here)
const offerAlert = useOfferAlert(offerHtml, 'course');
const accessExpirationAlert = useAccessExpirationAlert(courseExpiredMessage, 'course');
const dispatch = useDispatch();
const celebrateFirstSection = celebrations && celebrations.firstSection;
const celebrationOpen = shouldCelebrateOnSectionLoad(courseId, sequenceId, unitId, celebrateFirstSection, dispatch);
@@ -63,8 +59,8 @@ function Course({
className="my-3"
topic="course"
customAlerts={{
clientAccessExpirationAlert: AccessExpirationAlert,
clientOfferAlert: OfferAlert,
...accessExpirationAlert,
...offerAlert,
}}
/>
<CourseBreadcrumbs