Merge PR #52 upgrade offer banner

* Commits:
  Use new upgrade offer banner
  Add new upgrade offer alert

src/courseware/course/Course.jsx

@@ -7,6 +7,7 @@ import AlertList from '../../user-messages/AlertList';
 import { useAccessExpirationAlert } from '../../access-expiration-alert';
 import { useLogistrationAlert } from '../../logistration-alert';
 import { useEnrollmentAlert } from '../../enrollment-alert';
+import { useOfferAlert } from '../../offer-alert';
 import PageLoading from '../../PageLoading';
 
 import InstructorToolbar from './InstructorToolbar';
@@ -27,6 +28,7 @@ const AccessExpirationAlert = React.lazy(() => import('../../access-expiration-a
 const EnrollmentAlert = React.lazy(() => import('../../enrollment-alert/EnrollmentAlert'));
 const StaffEnrollmentAlert = React.lazy(() => import('../../enrollment-alert/StaffEnrollmentAlert'));
 const LogistrationAlert = React.lazy(() => import('../../logistration-alert'));
+const OfferAlert = React.lazy(() => import('../../offer-alert/OfferAlert'));
 
 function Course({
   courseId,
@@ -41,6 +43,7 @@ function Course({
   const sequence = useModel('sequences', sequenceId);
   const section = useModel('sections', sequence ? sequence.sectionId : null);
 
+  useOfferAlert(courseId);
   useLogistrationAlert();
   useEnrollmentAlert(courseId);
   useAccessExpirationAlert(courseId);
@@ -81,6 +84,7 @@ function Course({
               clientStaffEnrollmentAlert: StaffEnrollmentAlert,
               clientLogistrationAlert: LogistrationAlert,
               clientAccessExpirationAlert: AccessExpirationAlert,
+              clientOfferAlert: OfferAlert,
             }}
           />
           <CourseBreadcrumbs

src/data/api.js

@@ -11,6 +11,7 @@ function normalizeMetadata(metadata) {
     id: metadata.id,
     title: metadata.name,
     number: metadata.number,
+    offerHtml: metadata.offer_html,
     org: metadata.org,
     enrollmentStart: metadata.enrollment_start,
     enrollmentEnd: metadata.enrollment_end,

src/offer-alert/OfferAlert.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Alert from '../user-messages/Alert';
+
+function OfferAlert(props) {
+  const {
+    rawHtml,
+  } = props;
+  return rawHtml && (
+    <Alert type="info">
+      <div dangerouslySetInnerHTML={{ __html: rawHtml }} />
+    </Alert>
+  );
+}
+
+OfferAlert.propTypes = {
+  rawHtml: PropTypes.string.isRequired,
+};
+
+export default OfferAlert;

src/offer-alert/hooks.js

@@ -0,0 +1,28 @@
+/* eslint-disable import/prefer-default-export */
+import { useContext, useState, useEffect } from 'react';
+import UserMessagesContext from '../user-messages/UserMessagesContext';
+import { useModel } from '../model-store';
+
+export function useOfferAlert(courseId) {
+  const course = useModel('courses', courseId);
+  const { add, remove } = useContext(UserMessagesContext);
+  const [alertId, setAlertId] = useState(null);
+  const rawHtml = (course && course.offerHtml) || null;
+  useEffect(() => {
+    if (rawHtml && alertId === null) {
+      setAlertId(add({
+        code: 'clientOfferAlert',
+        topic: 'course',
+        rawHtml,
+      }));
+    } else if (!rawHtml && alertId !== null) {
+      remove(alertId);
+      setAlertId(null);
+    }
+    return () => {
+      if (alertId !== null) {
+        remove(alertId);
+      }
+    };
+  }, [course, rawHtml]);
+}

src/offer-alert/index.js

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