From ef38667751e7a87e4d9247d1325e9de5ddd38b62 Mon Sep 17 00:00:00 2001 From: Michael Terry Date: Tue, 4 Aug 2020 13:02:38 -0400 Subject: [PATCH] AA-278: Add offer alert to outline It was previously only used in the courseware. But to match the LMS, we also want to show it on the outline tab. --- src/alerts/offer-alert/OfferAlert.jsx | 5 +++-- src/alerts/offer-alert/hooks.js | 16 ++++++++++------ src/alerts/offer-alert/index.js | 3 +-- .../data/__factories__/outlineTabData.factory.js | 3 ++- .../data/__snapshots__/redux.test.js.snap | 1 + src/course-home/data/api.js | 2 ++ src/course-home/outline-tab/OutlineTab.jsx | 15 +++++++++++---- src/courseware/course/Course.jsx | 13 +++++++------ 8 files changed, 37 insertions(+), 21 deletions(-) diff --git a/src/alerts/offer-alert/OfferAlert.jsx b/src/alerts/offer-alert/OfferAlert.jsx index ba626610..16857957 100644 --- a/src/alerts/offer-alert/OfferAlert.jsx +++ b/src/alerts/offer-alert/OfferAlert.jsx @@ -1,14 +1,15 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { Alert } from '../../generic/user-messages'; +import { Alert, ALERT_TYPES } from '../../generic/user-messages'; function OfferAlert({ payload }) { const { rawHtml, } = payload; return rawHtml && ( - + + {/* eslint-disable-next-line react/no-danger */}
); diff --git a/src/alerts/offer-alert/hooks.js b/src/alerts/offer-alert/hooks.js index 64a1d9c0..b3020cb0 100644 --- a/src/alerts/offer-alert/hooks.js +++ b/src/alerts/offer-alert/hooks.js @@ -1,15 +1,19 @@ -/* eslint-disable import/prefer-default-export */ -import { useModel } from '../../generic/model-store'; +import React from 'react'; import { useAlert } from '../../generic/user-messages'; -export function useOfferAlert(courseId) { - const course = useModel('courses', courseId); - const rawHtml = (course && course.offerHtml) || null; +const OfferAlert = React.lazy(() => import('./OfferAlert')); + +export function useOfferAlert(offerHtml, topic) { + const rawHtml = offerHtml || null; const isVisible = !!rawHtml; // if it exists, show it. useAlert(isVisible, { code: 'clientOfferAlert', - topic: 'course', + topic, payload: { rawHtml }, }); + + return { clientOfferAlert: OfferAlert }; } + +export default useOfferAlert; diff --git a/src/alerts/offer-alert/index.js b/src/alerts/offer-alert/index.js index 781efdb7..ed12eb0b 100644 --- a/src/alerts/offer-alert/index.js +++ b/src/alerts/offer-alert/index.js @@ -1,2 +1 @@ -export { default as OfferAlert } from './OfferAlert'; -export { useOfferAlert } from './hooks'; +export { default } from './hooks'; diff --git a/src/course-home/data/__factories__/outlineTabData.factory.js b/src/course-home/data/__factories__/outlineTabData.factory.js index 0fe0fe34..1aa39e7a 100644 --- a/src/course-home/data/__factories__/outlineTabData.factory.js +++ b/src/course-home/data/__factories__/outlineTabData.factory.js @@ -20,4 +20,5 @@ Factory.define('outlineTabData') can_enroll: true, extra_text: 'Contact the administrator.', }) - .attr('handouts_html', [], () => '
  • Handout 1
'); + .attr('handouts_html', [], () => '
  • Handout 1
') + .attr('offer_html', [], () => '
Great offer here
'); diff --git a/src/course-home/data/__snapshots__/redux.test.js.snap b/src/course-home/data/__snapshots__/redux.test.js.snap index 5e3dcfd6..22d7604f 100644 --- a/src/course-home/data/__snapshots__/redux.test.js.snap +++ b/src/course-home/data/__snapshots__/redux.test.js.snap @@ -204,6 +204,7 @@ Object { }, "handoutsHtml": "
  • Handout 1
", "id": "course-v1:edX+DemoX+Demo_Course_1", + "offerHtml": "
Great offer here
", "welcomeMessageHtml": undefined, }, }, diff --git a/src/course-home/data/api.js b/src/course-home/data/api.js index 0132915b..6ab7dcd4 100644 --- a/src/course-home/data/api.js +++ b/src/course-home/data/api.js @@ -73,6 +73,7 @@ export async function getOutlineTabData(courseId) { const datesWidget = camelCaseObject(data.dates_widget); const enrollAlert = camelCaseObject(data.enroll_alert); const handoutsHtml = data.handouts_html; + const offerHtml = data.offer_html; const welcomeMessageHtml = data.welcome_message_html; return { @@ -81,6 +82,7 @@ export async function getOutlineTabData(courseId) { datesWidget, enrollAlert, handoutsHtml, + offerHtml, welcomeMessageHtml, }; } diff --git a/src/course-home/outline-tab/OutlineTab.jsx b/src/course-home/outline-tab/OutlineTab.jsx index 89c7e4a0..261aa5cb 100644 --- a/src/course-home/outline-tab/OutlineTab.jsx +++ b/src/course-home/outline-tab/OutlineTab.jsx @@ -15,6 +15,7 @@ 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 useOfferAlert from '../../alerts/offer-alert'; import { useModel } from '../../generic/model-store'; import WelcomeMessage from './widgets/WelcomeMessage'; @@ -38,13 +39,18 @@ function OutlineTab({ intl }) { courses, sections, }, + offerHtml, } = useModel('outline', courseId); - const certificateAvailableAlert = useCertificateAvailableAlert(courseId); - const courseEndAlert = useCourseEndAlert(courseId); - const courseStartAlert = useCourseStartAlert(courseId); - const enrollmentAlert = useEnrollmentAlert(courseId); + // Above the tab alerts (appearing in the order listed here) const logistrationAlert = useLogistrationAlert(); + const enrollmentAlert = useEnrollmentAlert(courseId); + + // Below the course title alerts (appearing in the order listed here) + const offerAlert = useOfferAlert(offerHtml, 'outline-course-alerts'); + const courseStartAlert = useCourseStartAlert(courseId); + const courseEndAlert = useCourseEndAlert(courseId); + const certificateAvailableAlert = useCertificateAvailableAlert(courseId); const rootCourseId = Object.keys(courses)[0]; const { sectionIds } = courses[rootCourseId]; @@ -73,6 +79,7 @@ function OutlineTab({ intl }) { ...certificateAvailableAlert, ...courseEndAlert, ...courseStartAlert, + ...offerAlert, }} /> {sectionIds.map((sectionId) => ( diff --git a/src/courseware/course/Course.jsx b/src/courseware/course/Course.jsx index 640017d0..fac3ed4f 100644 --- a/src/courseware/course/Course.jsx +++ b/src/courseware/course/Course.jsx @@ -6,7 +6,7 @@ import { getConfig } from '@edx/frontend-platform'; import { AlertList } from '../../generic/user-messages'; import { useAccessExpirationAlert } from '../../alerts/access-expiration-alert'; -import { useOfferAlert } from '../../alerts/offer-alert'; +import useOfferAlert from '../../alerts/offer-alert'; import Sequence from './sequence'; @@ -21,7 +21,6 @@ import { useModel } from '../../generic/model-store'; // default export. // See React.lazy docs here: https://reactjs.org/docs/code-splitting.html#reactlazy const AccessExpirationAlert = React.lazy(() => import('../../alerts/access-expiration-alert/AccessExpirationAlert')); -const OfferAlert = React.lazy(() => import('../../alerts/offer-alert/OfferAlert')); function Course({ courseId, @@ -41,15 +40,17 @@ function Course({ course, ].filter(element => element != null).map(element => element.title); - useOfferAlert(courseId); - useAccessExpirationAlert(courseId); - const { canShowUpgradeSock, celebrations, + offerHtml, verifiedMode, } = course; + // Below the tabs, above the breadcrumbs alerts (appearing in the order listed here) + const offerAlert = useOfferAlert(offerHtml, 'course'); + useAccessExpirationAlert(courseId); + const dispatch = useDispatch(); const celebrateFirstSection = celebrations && celebrations.firstSection; const celebrationOpen = shouldCelebrateOnSectionLoad(courseId, sequenceId, unitId, celebrateFirstSection, dispatch); @@ -64,7 +65,7 @@ function Course({ topic="course" customAlerts={{ clientAccessExpirationAlert: AccessExpirationAlert, - clientOfferAlert: OfferAlert, + ...offerAlert, }} />