Add new upgrade offer alert

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