AA-276: Add course start alert in outline (#146)

Also move a few of the outline alerts into the course home
source folder.

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

@@ -10,8 +10,9 @@ 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 useCertificateAvailableAlert from './alerts/certificate-available-alert';
+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 { useModel } from '../../generic/model-store';
@@ -41,6 +42,7 @@ function OutlineTab({ intl }) {
 
   const certificateAvailableAlert = useCertificateAvailableAlert(courseId);
   const courseEndAlert = useCourseEndAlert(courseId);
+  const courseStartAlert = useCourseStartAlert(courseId);
   const enrollmentAlert = useEnrollmentAlert(courseId);
   const logistrationAlert = useLogistrationAlert();
 
@@ -70,6 +72,7 @@ function OutlineTab({ intl }) {
             customAlerts={{
               ...certificateAvailableAlert,
               ...courseEndAlert,
+              ...courseStartAlert,
             }}
           />
           {sectionIds.map((sectionId) => (

src/course-home/outline-tab/alerts/certificate-available-alert/CertificateAvailableAlert.jsx

@@ -4,7 +4,7 @@ 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';
+import { Alert, ALERT_TYPES } from '../../../../generic/user-messages';
 
 function CertificateAvailableAlert({ payload }) {
   const {

src/course-home/outline-tab/alerts/certificate-available-alert/hooks.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 
-import { useAlert } from '../../generic/user-messages';
-import { useModel } from '../../generic/model-store';
+import { useAlert } from '../../../../generic/user-messages';
+import { useModel } from '../../../../generic/model-store';
 
 const CertificateAvailableAlert = React.lazy(() => import('./CertificateAvailableAlert'));
 

src/course-home/outline-tab/alerts/course-end-alert/CourseEndAlert.jsx

@@ -7,7 +7,7 @@ import {
   FormattedTime,
 } from '@edx/frontend-platform/i18n';
 
-import { Alert, ALERT_TYPES } from '../../generic/user-messages';
+import { Alert, ALERT_TYPES } from '../../../../generic/user-messages';
 
 const DAY_MS = 24 * 60 * 60 * 1000; // in ms
 

src/course-home/outline-tab/alerts/course-end-alert/hooks.js

@@ -1,7 +1,7 @@
 /* eslint-disable import/prefer-default-export */
 import React from 'react';
-import { useAlert } from '../../generic/user-messages';
-import { useModel } from '../../generic/model-store';
+import { useAlert } from '../../../../generic/user-messages';
+import { useModel } from '../../../../generic/model-store';
 
 const CourseEndAlert = React.lazy(() => import('./CourseEndAlert'));
 

src/course-home/outline-tab/alerts/course-start-alert/CourseStartAlert.jsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  FormattedDate,
+  FormattedMessage,
+  FormattedRelative,
+  FormattedTime,
+} from '@edx/frontend-platform/i18n';
+
+import { Alert, ALERT_TYPES } from '../../../../generic/user-messages';
+
+const DAY_MS = 24 * 60 * 60 * 1000; // in ms
+
+function CourseStartAlert({ payload }) {
+  const {
+    delta,
+    startDate,
+    userTimezone,
+  } = payload;
+
+  const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};
+
+  const timeRemaining = (
+    <FormattedRelative
+      key="timeRemaining"
+      value={startDate}
+      {...timezoneFormatArgs}
+    />
+  );
+
+  if (delta < DAY_MS) {
+    return (
+      <Alert type={ALERT_TYPES.INFO}>
+        <FormattedMessage
+          id="learning.outline.alert.start.short"
+          defaultMessage="Course starts {timeRemaining} at {courseStartTime}."
+          description="Used when the time remaining is less than a day away."
+          values={{
+            courseStartTime: (
+              <FormattedTime
+                key="courseStartTime"
+                day="numeric"
+                month="short"
+                year="numeric"
+                hour12={false}
+                timeZoneName="short"
+                value={startDate}
+                {...timezoneFormatArgs}
+              />
+            ),
+            timeRemaining,
+          }}
+        />
+      </Alert>
+    );
+  }
+
+  return (
+    <Alert type={ALERT_TYPES.INFO}>
+      <strong>
+        <FormattedMessage
+          id="learning.outline.alert.end.long"
+          defaultMessage="Course starts {timeRemaining} on {courseStartDate}."
+          description="Used when the time remaining is more than a day away."
+          values={{
+            courseStartDate: (
+              <FormattedDate
+                key="courseStartDate"
+                day="numeric"
+                month="short"
+                year="numeric"
+                value={startDate}
+                {...timezoneFormatArgs}
+              />
+            ),
+            timeRemaining,
+          }}
+        />
+      </strong>
+      <br />
+      <FormattedMessage
+        id="learning.outline.alert.end.calendar"
+        defaultMessage="Don’t forget to add a calendar reminder!"
+      />
+    </Alert>
+  );
+}
+
+CourseStartAlert.propTypes = {
+  payload: PropTypes.shape({
+    delta: PropTypes.number,
+    startDate: PropTypes.string,
+    userTimezone: PropTypes.string,
+  }).isRequired,
+};
+
+export default CourseStartAlert;

src/course-home/outline-tab/alerts/course-start-alert/hooks.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { useAlert } from '../../../../generic/user-messages';
+import { useModel } from '../../../../generic/model-store';
+
+const CourseStartAlert = React.lazy(() => import('./CourseStartAlert'));
+
+function useCourseStartAlert(courseId) {
+  const {
+    isEnrolled,
+  } = useModel('courses', courseId);
+  const {
+    datesWidget: {
+      courseDateBlocks,
+      userTimezone,
+    },
+  } = useModel('outline', courseId);
+
+  const startBlock = courseDateBlocks.find(b => b.dateType === 'course-start-date');
+  const delta = startBlock ? new Date(startBlock.date) - new Date() : 0;
+  const isVisible = isEnrolled && startBlock && delta > 0;
+
+  useAlert(isVisible, {
+    code: 'clientCourseStartAlert',
+    payload: {
+      delta,
+      startDate: startBlock && startBlock.date,
+      userTimezone,
+    },
+    topic: 'outline-course-alerts',
+  });
+
+  return {
+    clientCourseStartAlert: CourseStartAlert,
+  };
+}
+
+export default useCourseStartAlert;

src/course-home/outline-tab/alerts/course-start-alert/index.js

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