diff --git a/src/course-home/outline-tab/OutlineTab.jsx b/src/course-home/outline-tab/OutlineTab.jsx
index 02a2e2ca..89c7e4a0 100644
--- a/src/course-home/outline-tab/OutlineTab.jsx
+++ b/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) => (
diff --git a/src/alerts/certificate-available-alert/CertificateAvailableAlert.jsx b/src/course-home/outline-tab/alerts/certificate-available-alert/CertificateAvailableAlert.jsx
similarity index 96%
rename from src/alerts/certificate-available-alert/CertificateAvailableAlert.jsx
rename to src/course-home/outline-tab/alerts/certificate-available-alert/CertificateAvailableAlert.jsx
index eac8d04a..70b59b11 100644
--- a/src/alerts/certificate-available-alert/CertificateAvailableAlert.jsx
+++ b/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 {
diff --git a/src/alerts/certificate-available-alert/hooks.js b/src/course-home/outline-tab/alerts/certificate-available-alert/hooks.js
similarity index 90%
rename from src/alerts/certificate-available-alert/hooks.js
rename to src/course-home/outline-tab/alerts/certificate-available-alert/hooks.js
index f8bf2e18..a4ee0261 100644
--- a/src/alerts/certificate-available-alert/hooks.js
+++ b/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'));
diff --git a/src/alerts/certificate-available-alert/index.js b/src/course-home/outline-tab/alerts/certificate-available-alert/index.js
similarity index 100%
rename from src/alerts/certificate-available-alert/index.js
rename to src/course-home/outline-tab/alerts/certificate-available-alert/index.js
diff --git a/src/alerts/course-end-alert/CourseEndAlert.jsx b/src/course-home/outline-tab/alerts/course-end-alert/CourseEndAlert.jsx
similarity index 96%
rename from src/alerts/course-end-alert/CourseEndAlert.jsx
rename to src/course-home/outline-tab/alerts/course-end-alert/CourseEndAlert.jsx
index 1328ff73..baa7c1bc 100644
--- a/src/alerts/course-end-alert/CourseEndAlert.jsx
+++ b/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
diff --git a/src/alerts/course-end-alert/hooks.js b/src/course-home/outline-tab/alerts/course-end-alert/hooks.js
similarity index 90%
rename from src/alerts/course-end-alert/hooks.js
rename to src/course-home/outline-tab/alerts/course-end-alert/hooks.js
index 101efeed..851087c0 100644
--- a/src/alerts/course-end-alert/hooks.js
+++ b/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'));
diff --git a/src/alerts/course-end-alert/index.js b/src/course-home/outline-tab/alerts/course-end-alert/index.js
similarity index 100%
rename from src/alerts/course-end-alert/index.js
rename to src/course-home/outline-tab/alerts/course-end-alert/index.js
diff --git a/src/course-home/outline-tab/alerts/course-start-alert/CourseStartAlert.jsx b/src/course-home/outline-tab/alerts/course-start-alert/CourseStartAlert.jsx
new file mode 100644
index 00000000..e1d78fbe
--- /dev/null
+++ b/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 = (
+
+ );
+
+ if (delta < DAY_MS) {
+ return (
+
+
+ ),
+ timeRemaining,
+ }}
+ />
+
+ );
+ }
+
+ return (
+
+
+
+ ),
+ timeRemaining,
+ }}
+ />
+
+
+
+
+ );
+}
+
+CourseStartAlert.propTypes = {
+ payload: PropTypes.shape({
+ delta: PropTypes.number,
+ startDate: PropTypes.string,
+ userTimezone: PropTypes.string,
+ }).isRequired,
+};
+
+export default CourseStartAlert;
diff --git a/src/course-home/outline-tab/alerts/course-start-alert/hooks.js b/src/course-home/outline-tab/alerts/course-start-alert/hooks.js
new file mode 100644
index 00000000..1f387156
--- /dev/null
+++ b/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;
diff --git a/src/course-home/outline-tab/alerts/course-start-alert/index.js b/src/course-home/outline-tab/alerts/course-start-alert/index.js
new file mode 100644
index 00000000..ed12eb0b
--- /dev/null
+++ b/src/course-home/outline-tab/alerts/course-start-alert/index.js
@@ -0,0 +1 @@
+export { default } from './hooks';