AA-277: Add certificate available alert on outline (#144)

src/alerts/certificate-available-alert/CertificateAvailableAlert.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { getConfig } from '@edx/frontend-platform';
+import { FormattedMessage, FormattedRelative } from '@edx/frontend-platform/i18n';
+import { Hyperlink } from '@edx/paragon';
+
+import { Alert, ALERT_TYPES } from '../../generic/user-messages';
+
+function CertificateAvailableAlert({ payload }) {
+  const {
+    certDate,
+    username,
+    userTimezone,
+  } = payload;
+
+  const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};
+
+  return (
+    <Alert type={ALERT_TYPES.INFO}>
+      <strong>
+        <FormattedMessage
+          id="learning.outline.alert.cert.title"
+          defaultMessage="We are working on generating course certificates."
+        />
+      </strong>
+      <br />
+      <FormattedMessage
+        id="learning.outline.alert.cert.when"
+        defaultMessage="If you have earned a certificate, you will be able to access it {timeRemaining}. You will also be able to view your certificates on your {profileLink}."
+        values={{
+          profileLink: (
+            <Hyperlink
+              destination={`${getConfig().LMS_BASE_URL}/u/${username}`}
+            >
+              <FormattedMessage
+                id="learning.outline.alert.cert.profile"
+                defaultMessage="Learner Profile"
+              />
+            </Hyperlink>
+          ),
+          timeRemaining: (
+            <FormattedRelative
+              key="timeRemaining"
+              value={certDate}
+              {...timezoneFormatArgs}
+            />
+          ),
+        }}
+      />
+    </Alert>
+  );
+}
+
+CertificateAvailableAlert.propTypes = {
+  payload: PropTypes.shape({
+    certDate: PropTypes.string,
+    username: PropTypes.string,
+    userTimezone: PropTypes.string,
+  }).isRequired,
+};
+
+export default CertificateAvailableAlert;

src/alerts/certificate-available-alert/hooks.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
+
+import { useAlert } from '../../generic/user-messages';
+import { useModel } from '../../generic/model-store';
+
+const CertificateAvailableAlert = React.lazy(() => import('./CertificateAvailableAlert'));
+
+function useCertificateAvailableAlert(courseId) {
+  const {
+    isEnrolled,
+  } = useModel('courses', courseId);
+  const {
+    datesWidget: {
+      courseDateBlocks,
+      userTimezone,
+    },
+  } = useModel('outline', courseId);
+  const { username } = getAuthenticatedUser();
+
+  const certBlock = courseDateBlocks.find(b => b.dateType === 'certificate-available-date');
+  const endBlock = courseDateBlocks.find(b => b.dateType === 'course-end-date');
+  const endDate = endBlock ? new Date(endBlock.date) : null;
+  const hasEnded = endBlock ? endDate < new Date() : false;
+  const isVisible = isEnrolled && certBlock && hasEnded; // only show if we're between end and cert dates
+
+  useAlert(isVisible, {
+    code: 'clientCertificateAvailableAlert',
+    payload: {
+      certDate: certBlock && certBlock.date,
+      username,
+      userTimezone,
+    },
+    topic: 'outline-course-alerts',
+  });
+
+  return {
+    clientCertificateAvailableAlert: CertificateAvailableAlert,
+  };
+}
+
+export default useCertificateAvailableAlert;

src/alerts/certificate-available-alert/index.js

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

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

@@ -10,6 +10,7 @@ import CourseHandouts from './widgets/CourseHandouts';
 import CourseTools from './widgets/CourseTools';
 import messages from './messages';
 import Section from './Section';
+import useCertificateAvailableAlert from '../../alerts/certificate-available-alert';
 import useCourseEndAlert from '../../alerts/course-end-alert';
 import useEnrollmentAlert from '../../alerts/enrollment-alert';
 import useLogistrationAlert from '../../alerts/logistration-alert';
@@ -38,6 +39,7 @@ function OutlineTab({ intl }) {
     },
   } = useModel('outline', courseId);
 
+  const certificateAvailableAlert = useCertificateAvailableAlert(courseId);
   const courseEndAlert = useCourseEndAlert(courseId);
   const enrollmentAlert = useEnrollmentAlert(courseId);
   const logistrationAlert = useLogistrationAlert();
@@ -66,6 +68,7 @@ function OutlineTab({ intl }) {
             topic="outline-course-alerts"
             className="mb-3"
             customAlerts={{
+              ...certificateAvailableAlert,
               ...courseEndAlert,
             }}
           />