diff --git a/src/alerts/access-expiration-alert/AccessExpirationAlert.jsx b/src/alerts/access-expiration-alert/AccessExpirationAlert.jsx index db627764..450604f9 100644 --- a/src/alerts/access-expiration-alert/AccessExpirationAlert.jsx +++ b/src/alerts/access-expiration-alert/AccessExpirationAlert.jsx @@ -9,7 +9,6 @@ import { Hyperlink } from '@edx/paragon'; import { Alert, ALERT_TYPES } from '../../generic/user-messages'; import messages from './messages'; import AccessExpirationAlertMMP2P from './AccessExpirationAlertMMP2P'; -import AccessExpirationAlertMasquerade from './AccessExpirationAlertMasquerade'; function AccessExpirationAlert({ intl, payload }) { /** [MM-P2P] Experiment */ @@ -43,7 +42,24 @@ function AccessExpirationAlert({ intl, payload }) { if (masqueradingExpiredCourse) { return ( - + + + ), + }} + /> + ); } diff --git a/src/alerts/access-expiration-alert/AccessExpirationAlertMasquerade.jsx b/src/alerts/access-expiration-alert/AccessExpirationAlertMasquerade.jsx deleted file mode 100644 index 51ee6209..00000000 --- a/src/alerts/access-expiration-alert/AccessExpirationAlertMasquerade.jsx +++ /dev/null @@ -1,51 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { FormattedMessage, FormattedDate } from '@edx/frontend-platform/i18n'; - -import { Alert, ALERT_TYPES } from '../../generic/user-messages'; - -function AccessExpirationAlertMasquerade({ payload }) { - const { - accessExpiration, - userTimezone, - } = payload; - - const { - expirationDate, - } = accessExpiration; - - const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {}; - - return ( - - - ), - }} - /> - - ); -} - -AccessExpirationAlertMasquerade.propTypes = { - payload: PropTypes.shape({ - accessExpiration: PropTypes.shape({ - expirationDate: PropTypes.string.isRequired, - masqueradingExpiredCourse: PropTypes.bool.isRequired, - }).isRequired, - userTimezone: PropTypes.string.isRequired, - }).isRequired, -}; - -export default AccessExpirationAlertMasquerade; diff --git a/src/alerts/access-expiration-alert/hooks.js b/src/alerts/access-expiration-alert/hooks.js index d650f025..4744ef3e 100644 --- a/src/alerts/access-expiration-alert/hooks.js +++ b/src/alerts/access-expiration-alert/hooks.js @@ -2,7 +2,6 @@ import React, { useMemo } from 'react'; import { useAlert } from '../../generic/user-messages'; const AccessExpirationAlert = React.lazy(() => import('./AccessExpirationAlert')); -const AccessExpirationAlertMasquerade = React.lazy(() => import('./AccessExpirationAlertMasquerade')); function useAccessExpirationAlert(accessExpiration, courseId, org, userTimezone, topic, analyticsPageName) { const isVisible = !!accessExpiration; // If it exists, show it. @@ -23,20 +22,4 @@ function useAccessExpirationAlert(accessExpiration, courseId, org, userTimezone, return { clientAccessExpirationAlert: AccessExpirationAlert }; } -export function useAccessExpirationAlertMasquerade(accessExpiration, userTimezone, topic) { - const isVisible = !!accessExpiration; // If it exists, show it. - const payload = { - accessExpiration, - userTimezone, - }; - - useAlert(isVisible, { - code: 'clientAccessExpirationAlertMasquerade', - payload: useMemo(() => payload, Object.values(payload).sort()), - topic, - }); - - return { clientAccessExpirationAlertMasquerade: AccessExpirationAlertMasquerade }; -} - export default useAccessExpirationAlert; diff --git a/src/alerts/access-expiration-alert/index.js b/src/alerts/access-expiration-alert/index.js index 3b93c9fc..ed12eb0b 100644 --- a/src/alerts/access-expiration-alert/index.js +++ b/src/alerts/access-expiration-alert/index.js @@ -1 +1 @@ -export { default, useAccessExpirationAlertMasquerade } from './hooks'; +export { default } from './hooks'; diff --git a/src/course-home/outline-tab/OutlineTab.jsx b/src/course-home/outline-tab/OutlineTab.jsx index 500f2080..c6435c6b 100644 --- a/src/course-home/outline-tab/OutlineTab.jsx +++ b/src/course-home/outline-tab/OutlineTab.jsx @@ -17,7 +17,7 @@ import messages from './messages'; import Section from './Section'; import UpdateGoalSelector from './widgets/UpdateGoalSelector'; import UpgradeCard from './widgets/UpgradeCard'; -import { useAccessExpirationAlertMasquerade } from '../../alerts/access-expiration-alert'; +import useAccessExpirationAlert from '../../alerts/access-expiration-alert'; import useCertificateAvailableAlert from './alerts/certificate-status-alert'; import useCourseEndAlert from './alerts/course-end-alert'; import useCourseStartAlert from './alerts/course-start-alert'; @@ -84,7 +84,7 @@ function OutlineTab({ intl }) { }; // Below the course title alerts (appearing in the order listed here) - const accessExpirationAlertMasquerade = useAccessExpirationAlertMasquerade(accessExpiration, userTimezone, 'outline-course-alerts'); + const accessExpirationAlert = useAccessExpirationAlert(accessExpiration, courseId, org, userTimezone, 'outline-course-alerts', 'course_home'); const courseStartAlert = useCourseStartAlert(courseId); const courseEndAlert = useCourseEndAlert(courseId); const certificateAvailableAlert = useCertificateAvailableAlert(courseId); @@ -145,7 +145,7 @@ function OutlineTab({ intl }) { topic="outline-course-alerts" className="mb-3" customAlerts={{ - ...accessExpirationAlertMasquerade, + ...accessExpirationAlert, ...certificateAvailableAlert, ...courseEndAlert, ...courseStartAlert, diff --git a/src/course-home/outline-tab/OutlineTab.test.jsx b/src/course-home/outline-tab/OutlineTab.test.jsx index f4a1b285..f6b45b3c 100644 --- a/src/course-home/outline-tab/OutlineTab.test.jsx +++ b/src/course-home/outline-tab/OutlineTab.test.jsx @@ -533,6 +533,59 @@ describe('Outline Tab', () => { await fetchAndRender(); await screen.findByText('This learner does not have access to this course.', { exact: false }); }); + + it('shows expiration', async () => { + setTabData({ + access_expiration: { + expiration_date: '2080-01-01T12:00:00Z', + masquerading_expired_course: false, + upgrade_deadline: null, + upgrade_url: null, + }, + }); + await fetchAndRender(); + await screen.findByText('Audit Access Expires'); + }); + + it('shows upgrade prompt', async () => { + setTabData({ + access_expiration: { + expiration_date: '2080-01-01T12:00:00Z', + masquerading_expired_course: false, + upgrade_deadline: '2070-01-01T12:00:00Z', + upgrade_url: 'https://example.com/upgrade', + }, + }); + await fetchAndRender(); + await screen.findByText('to get unlimited access to the course as long as it exists on the site.', { exact: false }); + }); + + it('sends analytics event onClick of upgrade link', async () => { + setTabData({ + access_expiration: { + expiration_date: '2080-01-01T12:00:00Z', + masquerading_expired_course: false, + upgrade_deadline: '2070-01-01T12:00:00Z', + upgrade_url: 'https://example.com/upgrade', + }, + }); + await fetchAndRender(); + + // Clearing after render to remove any events sent on view (ex. 'Promotion Viewed') + sendTrackEvent.mockClear(); + const upgradeLink = screen.getByRole('link', { name: 'Upgrade now' }); + fireEvent.click(upgradeLink); + + expect(sendTrackEvent).toHaveBeenCalledTimes(1); + expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.ecommerce.upsell_links_clicked', { + org_key: 'edX', + courserun_key: courseId, + linkCategory: 'FBE_banner', + linkName: 'course_home_audit_access_expires', + linkType: 'link', + pageName: 'course_home', + }); + }); }); describe('Course Start Alert', () => {