From 2d5af74b1b92b128dca36bd7ab81728e7541cc2e Mon Sep 17 00:00:00 2001 From: Carla Duarte Date: Thu, 15 Oct 2020 13:44:04 -0400 Subject: [PATCH] AA-357: Add reset dates banner to outline tab (#243) --- .../__factories__/outlineTabData.factory.js | 5 ++++ .../data/__snapshots__/redux.test.js.snap | 6 ++++ src/course-home/data/api.js | 4 +++ src/course-home/dates-banner/DatesBanner.jsx | 9 +++--- .../dates-banner/DatesBannerContainer.jsx | 29 ++++++++++++------- src/course-home/dates-tab/DatesTab.jsx | 20 ++++++++++++- src/course-home/outline-tab/OutlineTab.jsx | 12 ++++++++ .../course/course-exit/CourseCelebration.jsx | 4 +-- 8 files changed, 71 insertions(+), 18 deletions(-) diff --git a/src/course-home/data/__factories__/outlineTabData.factory.js b/src/course-home/data/__factories__/outlineTabData.factory.js index 61476826..f5da722a 100644 --- a/src/course-home/data/__factories__/outlineTabData.factory.js +++ b/src/course-home/data/__factories__/outlineTabData.factory.js @@ -25,6 +25,11 @@ Factory.define('outlineTabData') can_enroll: true, extra_text: 'Contact the administrator.', }) + .attr('dates_banner_info', { + content_type_gating_enabled: false, + missed_gated_content: false, + missed_deadlines: false, + }) .attr('dates_widget', { courseDateBlocks: [], userTimezone: 'UTC', diff --git a/src/course-home/data/__snapshots__/redux.test.js.snap b/src/course-home/data/__snapshots__/redux.test.js.snap index 08c8efe5..f88dc485 100644 --- a/src/course-home/data/__snapshots__/redux.test.js.snap +++ b/src/course-home/data/__snapshots__/redux.test.js.snap @@ -386,6 +386,11 @@ Object { "url": "http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course/bookmarks/", }, ], + "datesBannerInfo": Object { + "contentTypeGatingEnabled": false, + "missedDeadlines": false, + "missedGatedContent": false, + }, "datesWidget": Object { "courseDateBlocks": Array [], "userTimezone": "UTC", @@ -395,6 +400,7 @@ Object { "extraText": "Contact the administrator.", }, "handoutsHtml": "", + "hasEnded": undefined, "id": "course-v1:edX+DemoX+Demo_Course_1", "offerHtml": "
Great offer here
", "resumeCourse": Object { diff --git a/src/course-home/data/api.js b/src/course-home/data/api.js index 8dd05b4f..9e47a6f6 100644 --- a/src/course-home/data/api.js +++ b/src/course-home/data/api.js @@ -145,9 +145,11 @@ export async function getOutlineTabData(courseId) { const courseGoals = camelCaseObject(data.course_goals); const courseExpiredHtml = data.course_expired_html; const courseTools = camelCaseObject(data.course_tools); + const datesBannerInfo = camelCaseObject(data.dates_banner_info); const datesWidget = camelCaseObject(data.dates_widget); const enrollAlert = camelCaseObject(data.enroll_alert); const handoutsHtml = data.handouts_html; + const hasEnded = data.has_ended; const offerHtml = data.offer_html; const resumeCourse = camelCaseObject(data.resume_course); const welcomeMessageHtml = data.welcome_message_html; @@ -157,9 +159,11 @@ export async function getOutlineTabData(courseId) { courseGoals, courseExpiredHtml, courseTools, + datesBannerInfo, datesWidget, enrollAlert, handoutsHtml, + hasEnded, offerHtml, resumeCourse, welcomeMessageHtml, diff --git a/src/course-home/dates-banner/DatesBanner.jsx b/src/course-home/dates-banner/DatesBanner.jsx index 14179032..c418ac31 100644 --- a/src/course-home/dates-banner/DatesBanner.jsx +++ b/src/course-home/dates-banner/DatesBanner.jsx @@ -1,6 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; +import { Button } from '@edx/paragon'; import messages from './messages'; @@ -14,17 +15,17 @@ function DatesBanner(props) { return (
-
+
{intl.formatMessage(messages[`datesBanner.${name}.header`])} {intl.formatMessage(messages[`datesBanner.${name}.body`])}
{bannerClickHandler && ( -
- +
)}
diff --git a/src/course-home/dates-banner/DatesBannerContainer.jsx b/src/course-home/dates-banner/DatesBannerContainer.jsx index 3df02df8..4a370b15 100644 --- a/src/course-home/dates-banner/DatesBannerContainer.jsx +++ b/src/course-home/dates-banner/DatesBannerContainer.jsx @@ -7,21 +7,16 @@ import { useModel } from '../../generic/model-store'; import DatesBanner from './DatesBanner'; import { fetchDatesTab, resetDeadlines } from '../data/thunks'; -function DatesBannerContainer(props) { - const { - model, - } = props; - +function DatesBannerContainer({ + courseDateBlocks, + datesBannerInfo, + hasEnded, + model, +}) { const { courseId, } = useSelector(state => state.courseHome); - const { - courseDateBlocks, - datesBannerInfo, - hasEnded, - } = useModel(model, courseId); - const { contentTypeGatingEnabled, missedDeadlines, @@ -76,7 +71,19 @@ function DatesBannerContainer(props) { } DatesBannerContainer.propTypes = { + courseDateBlocks: PropTypes.arrayOf(PropTypes.object).isRequired, + datesBannerInfo: PropTypes.shape({ + contentTypeGatingEnabled: PropTypes.bool.isRequired, + missedDeadlines: PropTypes.bool.isRequired, + missedGatedContent: PropTypes.bool.isRequired, + verifiedUpgradeLink: PropTypes.string, + }).isRequired, + hasEnded: PropTypes.bool, model: PropTypes.string.isRequired, }; +DatesBannerContainer.defaultProps = { + hasEnded: false, +}; + export default DatesBannerContainer; diff --git a/src/course-home/dates-tab/DatesTab.jsx b/src/course-home/dates-tab/DatesTab.jsx index 32d72f17..f12a5e2c 100644 --- a/src/course-home/dates-tab/DatesTab.jsx +++ b/src/course-home/dates-tab/DatesTab.jsx @@ -1,17 +1,35 @@ import React from 'react'; +import { useSelector } from 'react-redux'; import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; import messages from './messages'; import Timeline from './Timeline'; import DatesBannerContainer from '../dates-banner/DatesBannerContainer'; +import { useModel } from '../../generic/model-store'; + function DatesTab({ intl }) { + const { + courseId, + } = useSelector(state => state.courseHome); + + const { + courseDateBlocks, + datesBannerInfo, + hasEnded, + } = useModel('dates', courseId); + return ( <>
{intl.formatMessage(messages.title)}
- + ); diff --git a/src/course-home/outline-tab/OutlineTab.jsx b/src/course-home/outline-tab/OutlineTab.jsx index affa5036..5d8d4373 100644 --- a/src/course-home/outline-tab/OutlineTab.jsx +++ b/src/course-home/outline-tab/OutlineTab.jsx @@ -9,6 +9,7 @@ import CourseDates from './widgets/CourseDates'; import CourseGoalCard from './widgets/CourseGoalCard'; import CourseHandouts from './widgets/CourseHandouts'; import CourseTools from './widgets/CourseTools'; +import DatesBannerContainer from '../dates-banner/DatesBannerContainer'; import genericMessages from '../../generic/messages'; import messages from './messages'; import Section from './Section'; @@ -48,6 +49,11 @@ function OutlineTab({ intl }) { selectedGoal, }, courseExpiredHtml, + datesBannerInfo, + datesWidget: { + courseDateBlocks, + }, + hasEnded, resumeCourse: { hasVisitedCourse, url: resumeCourseUrl, @@ -124,6 +130,12 @@ function OutlineTab({ intl }) { ...offerAlert, }} /> + {rootCourseId && ( <>
diff --git a/src/courseware/course/course-exit/CourseCelebration.jsx b/src/courseware/course/course-exit/CourseCelebration.jsx index e09141f2..11434d12 100644 --- a/src/courseware/course/course-exit/CourseCelebration.jsx +++ b/src/courseware/course/course-exit/CourseCelebration.jsx @@ -186,18 +186,18 @@ function CourseCelebration({ intl }) { {/* The requesting status needs a different button because it does a POST instead of a GET */} {certStatus === 'requesting' && ( )} {buttonLocation && (