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

* 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.

src/alerts/access-expiration-alert/AccessExpirationAlert.jsx

@@ -1,14 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Alert } from '../../generic/user-messages';
+import { Alert, ALERT_TYPES } from '../../generic/user-messages';
 
 function AccessExpirationAlert({ payload }) {
   const {
     rawHtml,
   } = payload;
   return rawHtml && (
-    <Alert type="info">
+    <Alert type={ALERT_TYPES.INFO}>
+      {/* eslint-disable-next-line react/no-danger */}
       <div dangerouslySetInnerHTML={{ __html: rawHtml }} />
     </Alert>
   );

src/alerts/access-expiration-alert/hooks.js

@@ -1,18 +1,21 @@
-/* eslint-disable import/prefer-default-export */
-import { useMemo } from 'react';
-import { useModel } from '../../generic/model-store';
+import React, { useMemo } from 'react';
 import { useAlert } from '../../generic/user-messages';
 
-export function useAccessExpirationAlert(courseId) {
-  const course = useModel('courses', courseId);
-  const rawHtml = (course && course.courseExpiredMessage) || null;
+const AccessExpirationAlert = React.lazy(() => import('./AccessExpirationAlert'));
+
+function useAccessExpirationAlert(courseExpiredMessage, topic) {
+  const rawHtml = courseExpiredMessage || null;
   const isVisible = !!rawHtml; // If it exists, show it.
 
   const payload = useMemo(() => ({ rawHtml }), [rawHtml]);
 
   useAlert(isVisible, {
     code: 'clientAccessExpirationAlert',
-    topic: 'course',
     payload,
+    topic,
   });
+
+  return { clientAccessExpirationAlert: AccessExpirationAlert };
 }
+
+export default useAccessExpirationAlert;

src/alerts/access-expiration-alert/index.js

@@ -1,2 +1 @@
-export { default as AccessExpirationAlert } from './AccessExpirationAlert';
-export { useAccessExpirationAlert } from './hooks';
+export { default } from './hooks';

src/alerts/offer-alert/OfferAlert.jsx

@@ -1,14 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Alert } from '../../generic/user-messages';
+import { Alert, ALERT_TYPES } from '../../generic/user-messages';
 
 function OfferAlert({ payload }) {
   const {
     rawHtml,
   } = payload;
   return rawHtml && (
-    <Alert type="info">
+    <Alert type={ALERT_TYPES.INFO}>
+      {/* eslint-disable-next-line react/no-danger */}
       <div dangerouslySetInnerHTML={{ __html: rawHtml }} />
     </Alert>
   );

src/alerts/offer-alert/hooks.js

@@ -1,15 +1,19 @@
-/* eslint-disable import/prefer-default-export */
-import { useModel } from '../../generic/model-store';
+import React from 'react';
 import { useAlert } from '../../generic/user-messages';
 
-export function useOfferAlert(courseId) {
-  const course = useModel('courses', courseId);
-  const rawHtml = (course && course.offerHtml) || null;
+const OfferAlert = React.lazy(() => import('./OfferAlert'));
+
+export function useOfferAlert(offerHtml, topic) {
+  const rawHtml = offerHtml || null;
   const isVisible = !!rawHtml; // if it exists, show it.
 
   useAlert(isVisible, {
     code: 'clientOfferAlert',
-    topic: 'course',
+    topic,
     payload: { rawHtml },
   });
+
+  return { clientOfferAlert: OfferAlert };
 }
+
+export default useOfferAlert;

src/alerts/offer-alert/index.js

@@ -1,2 +1 @@
-export { default as OfferAlert } from './OfferAlert';
-export { useOfferAlert } from './hooks';
+export { default } from './hooks';