AA-264 mfe courseware reset dates (#165)

- add toast display after successful reset of dates via banner.

src/tab-page/TabPage.jsx

@@ -1,18 +1,27 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useDispatch, useSelector } from 'react-redux';
 
 import { Header } from '../course-header';
 import PageLoading from '../generic/PageLoading';
 
 import messages from './messages';
 import LoadedTabPage from './LoadedTabPage';
+import LearningToast from '../toast/LearningToast';
+import { toggleResetDatesToast } from '../course-home/data/slice';
 
 function TabPage({
   intl,
   courseStatus,
   ...passthroughProps
 }) {
+  const courseId = useSelector(state => state.courseHome.courseId || state.courseware.courseId);
+  const {
+    displayResetDatesToast,
+  } = useSelector(state => state.courseHome);
+  const dispatch = useDispatch();
+
   if (courseStatus === 'loading') {
     return (
       <>
@@ -26,7 +35,16 @@ function TabPage({
 
   if (courseStatus === 'loaded') {
     return (
-      <LoadedTabPage {...passthroughProps} />
+      <>
+        <LearningToast
+          body={messages.datesResetSuccessBody}
+          header={messages.datesResetSuccessHeader}
+          link={`/course/${courseId}/dates`}
+          onClose={() => dispatch(toggleResetDatesToast({ displayResetDatesToast: false }))}
+          show={displayResetDatesToast}
+        />
+        <LoadedTabPage {...passthroughProps} />
+      </>
     );
   }
 

src/tab-page/messages.js

@@ -9,6 +9,14 @@ const messages = defineMessages({
     id: 'learning.loading',
     defaultMessage: 'Loading course page…',
   },
+  datesResetSuccessBody: {
+    id: 'learning.datesResetSuccessBody',
+    defaultMessage: 'View all dates',
+  },
+  datesResetSuccessHeader: {
+    id: 'learning.datesResetSuccessHeader',
+    defaultMessage: 'Your due dates have been successfully shifted to help you stay on track.',
+  },
 });
 
 export default messages;