diff --git a/src/course-home/outline-tab/OutlineTab.test.jsx b/src/course-home/outline-tab/OutlineTab.test.jsx index 43f5534b..db234c27 100644 --- a/src/course-home/outline-tab/OutlineTab.test.jsx +++ b/src/course-home/outline-tab/OutlineTab.test.jsx @@ -686,7 +686,7 @@ describe('Outline Tab', () => { ], }); await fetchAndRender(); - await screen.findByText('We are working on generating course certificates.'); + await screen.findByText('Your grade and certificate will be ready soon!'); }); }); diff --git a/src/course-home/outline-tab/alerts/certificate-available-alert/CertificateAvailableAlert.jsx b/src/course-home/outline-tab/alerts/certificate-available-alert/CertificateAvailableAlert.jsx index 70b59b11..9cbe405c 100644 --- a/src/course-home/outline-tab/alerts/certificate-available-alert/CertificateAvailableAlert.jsx +++ b/src/course-home/outline-tab/alerts/certificate-available-alert/CertificateAvailableAlert.jsx @@ -1,51 +1,38 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { getConfig } from '@edx/frontend-platform'; -import { FormattedMessage, FormattedRelative } from '@edx/frontend-platform/i18n'; -import { Hyperlink } from '@edx/paragon'; +import { FormattedDate, FormattedMessage } from '@edx/frontend-platform/i18n'; import { Alert, ALERT_TYPES } from '../../../../generic/user-messages'; function CertificateAvailableAlert({ payload }) { const { certDate, - username, userTimezone, + courseEndDate, } = payload; const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {}; + const certificateAvailableDateFormatted = ; + const courseEndDateFormatted = ; return ( - + - - - ), - timeRemaining: ( - - ), + courseEndDateFormatted, + certificateAvailableDate: certificateAvailableDateFormatted, }} + {...timezoneFormatArgs} /> ); @@ -54,7 +41,7 @@ function CertificateAvailableAlert({ payload }) { CertificateAvailableAlert.propTypes = { payload: PropTypes.shape({ certDate: PropTypes.string, - username: PropTypes.string, + courseEndDate: PropTypes.string, userTimezone: PropTypes.string, }).isRequired, }; diff --git a/src/course-home/outline-tab/alerts/certificate-available-alert/hooks.js b/src/course-home/outline-tab/alerts/certificate-available-alert/hooks.js index ea83d37b..a176572f 100644 --- a/src/course-home/outline-tab/alerts/certificate-available-alert/hooks.js +++ b/src/course-home/outline-tab/alerts/certificate-available-alert/hooks.js @@ -18,7 +18,6 @@ function useCertificateAvailableAlert(courseId) { } = useModel('outline', courseId); const authenticatedUser = getAuthenticatedUser(); const username = authenticatedUser ? authenticatedUser.username : ''; - const certBlock = courseDateBlocks.find(b => b.dateType === 'certificate-available-date'); const endBlock = courseDateBlocks.find(b => b.dateType === 'course-end-date'); const endDate = endBlock ? new Date(endBlock.date) : null; @@ -26,6 +25,7 @@ function useCertificateAvailableAlert(courseId) { const isVisible = isEnrolled && certBlock && hasEnded; // only show if we're between end and cert dates const payload = { certDate: certBlock && certBlock.date, + courseEndDate: endBlock && endBlock.date, username, userTimezone, }; diff --git a/src/courseware/course/course-exit/CourseCelebration.jsx b/src/courseware/course/course-exit/CourseCelebration.jsx index 6272fa66..0fdd5d84 100644 --- a/src/courseware/course/course-exit/CourseCelebration.jsx +++ b/src/courseware/course/course-exit/CourseCelebration.jsx @@ -60,6 +60,7 @@ function CourseCelebration({ intl }) { certStatus, certWebViewUrl, downloadUrl, + certificateAvailableDate, } = certificateData || {}; /** [WS-1681 experiment] */ @@ -125,25 +126,20 @@ function CourseCelebration({ intl }) { break; case 'earned_but_not_available': { const endDate = ; + const certAvailableDate = ; certHeader = intl.formatMessage(messages.certificateHeaderNotAvailable); message = ( <> - + {intl.formatMessage(messages.certificateNotAvailableBodyAccessCert)} > ); @@ -294,7 +290,7 @@ function CourseCelebration({ intl }) { {certHeader && ( - + {certHeader} {message} diff --git a/src/courseware/course/course-exit/CourseExit.test.jsx b/src/courseware/course/course-exit/CourseExit.test.jsx index 24c36a5f..342fca85 100644 --- a/src/courseware/course/course-exit/CourseExit.test.jsx +++ b/src/courseware/course/course-exit/CourseExit.test.jsx @@ -115,9 +115,14 @@ describe('Course Exit Pages', () => { }); it('Displays certificate is earned but unavailable message', async () => { - setMetadata({ certificate_data: { cert_status: 'earned_but_not_available' } }); + setMetadata({ + certificate_data: { + cert_status: 'earned_but_not_available', + certificate_available_date: '2021-05-21T12:00:00Z', + }, + }); await fetchAndRender(); - expect(screen.getByText('Your certificate will be available soon!')).toBeInTheDocument(); + expect(screen.getByText('Your grade and certificate will be ready soon!')).toBeInTheDocument(); }); it('Displays request certificate link', async () => { diff --git a/src/courseware/course/course-exit/messages.js b/src/courseware/course/course-exit/messages.js index 58cf4360..9f36d386 100644 --- a/src/courseware/course/course-exit/messages.js +++ b/src/courseware/course/course-exit/messages.js @@ -13,7 +13,12 @@ const messages = defineMessages({ }, certificateHeaderNotAvailable: { id: 'courseCelebration.certificateHeader.notAvailable', - defaultMessage: 'Your certificate will be available soon!', + defaultMessage: 'Your grade and certificate will be ready soon!', + description: 'Header displayed when course certificate is not yet available to be viewed', + }, + certificateNotAvailableBodyAccessCert: { + id: 'courseCelebration.certificateBody.notAvailable.accessCertificate', + defaultMessage: 'If you have earned a passing grade, your certificate will be automatically issued.', description: 'Text displayed when course certificate is not yet available to be viewed', }, certificateHeaderUnverified: { @@ -180,6 +185,7 @@ const messages = defineMessages({ id: 'courseExit.viewGradesButton', defaultMessage: 'View grades', }, + }); export default messages; diff --git a/src/generic/user-messages/Alert.jsx b/src/generic/user-messages/Alert.jsx index 4030331c..9f8f7525 100644 --- a/src/generic/user-messages/Alert.jsx +++ b/src/generic/user-messages/Alert.jsx @@ -41,6 +41,13 @@ function getAlertIcon(type) { return faInfoCircle; } +function getAlertIconColor(type) { + if (type === ALERT_TYPES.SUCCESS) { + return 'text-success-500'; + } + return ''; +} + function Alert({ type, dismissible, children, footer, intl, onDismiss, }) { @@ -49,7 +56,7 @@ function Alert({ {type !== ALERT_TYPES.WELCOME && ( - + )}
- + {intl.formatMessage(messages.certificateNotAvailableBodyAccessCert)}