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.

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';

src/course-home/data/__factories__/outlineTabData.factory.js

@@ -20,4 +20,5 @@ Factory.define('outlineTabData')
     can_enroll: true,
     extra_text: 'Contact the administrator.',
   })
-  .attr('handouts_html', [], () => '<ul><li>Handout 1</li></ul>');
+  .attr('handouts_html', [], () => '<ul><li>Handout 1</li></ul>')
+  .attr('offer_html', [], () => '<div>Great offer here</div>');

src/course-home/data/__snapshots__/redux.test.js.snap

@@ -204,6 +204,7 @@ Object {
         },
         "handoutsHtml": "<ul><li>Handout 1</li></ul>",
         "id": "course-v1:edX+DemoX+Demo_Course_1",
+        "offerHtml": "<div>Great offer here</div>",
         "welcomeMessageHtml": undefined,
       },
     },

src/course-home/data/api.js

@@ -73,6 +73,7 @@ export async function getOutlineTabData(courseId) {
   const datesWidget = camelCaseObject(data.dates_widget);
   const enrollAlert = camelCaseObject(data.enroll_alert);
   const handoutsHtml = data.handouts_html;
+  const offerHtml = data.offer_html;
   const welcomeMessageHtml = data.welcome_message_html;
 
   return {
@@ -81,6 +82,7 @@ export async function getOutlineTabData(courseId) {
     datesWidget,
     enrollAlert,
     handoutsHtml,
+    offerHtml,
     welcomeMessageHtml,
   };
 }

src/course-home/outline-tab/OutlineTab.jsx

@@ -15,6 +15,7 @@ import useCourseEndAlert from './alerts/course-end-alert';
 import useCourseStartAlert from './alerts/course-start-alert';
 import useEnrollmentAlert from '../../alerts/enrollment-alert';
 import useLogistrationAlert from '../../alerts/logistration-alert';
+import useOfferAlert from '../../alerts/offer-alert';
 import { useModel } from '../../generic/model-store';
 import WelcomeMessage from './widgets/WelcomeMessage';
 
@@ -38,13 +39,18 @@ function OutlineTab({ intl }) {
       courses,
       sections,
     },
+    offerHtml,
   } = useModel('outline', courseId);
 
-  const certificateAvailableAlert = useCertificateAvailableAlert(courseId);
-  const courseEndAlert = useCourseEndAlert(courseId);
-  const courseStartAlert = useCourseStartAlert(courseId);
-  const enrollmentAlert = useEnrollmentAlert(courseId);
+  // Above the tab alerts (appearing in the order listed here)
   const logistrationAlert = useLogistrationAlert();
+  const enrollmentAlert = useEnrollmentAlert(courseId);
+
+  // Below the course title alerts (appearing in the order listed here)
+  const offerAlert = useOfferAlert(offerHtml, 'outline-course-alerts');
+  const courseStartAlert = useCourseStartAlert(courseId);
+  const courseEndAlert = useCourseEndAlert(courseId);
+  const certificateAvailableAlert = useCertificateAvailableAlert(courseId);
 
   const rootCourseId = Object.keys(courses)[0];
   const { sectionIds } = courses[rootCourseId];
@@ -73,6 +79,7 @@ function OutlineTab({ intl }) {
               ...certificateAvailableAlert,
               ...courseEndAlert,
               ...courseStartAlert,
+              ...offerAlert,
             }}
           />
           {sectionIds.map((sectionId) => (

src/courseware/course/Course.jsx

@@ -6,7 +6,7 @@ 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 useOfferAlert from '../../alerts/offer-alert';
 
 import Sequence from './sequence';
 
@@ -21,7 +21,6 @@ import { useModel } from '../../generic/model-store';
 // 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,
@@ -41,15 +40,17 @@ function Course({
     course,
   ].filter(element => element != null).map(element => element.title);
 
-  useOfferAlert(courseId);
-  useAccessExpirationAlert(courseId);
-
   const {
     canShowUpgradeSock,
     celebrations,
+    offerHtml,
     verifiedMode,
   } = course;
 
+  // Below the tabs, above the breadcrumbs alerts (appearing in the order listed here)
+  const offerAlert = useOfferAlert(offerHtml, 'course');
+  useAccessExpirationAlert(courseId);
+
   const dispatch = useDispatch();
   const celebrateFirstSection = celebrations && celebrations.firstSection;
   const celebrationOpen = shouldCelebrateOnSectionLoad(courseId, sequenceId, unitId, celebrateFirstSection, dispatch);
@@ -64,7 +65,7 @@ function Course({
         topic="course"
         customAlerts={{
           clientAccessExpirationAlert: AccessExpirationAlert,
-          clientOfferAlert: OfferAlert,
+          ...offerAlert,
         }}
       />
       <CourseBreadcrumbs