feat: Updating the messages for certificate availability.

[MICROBA-678]

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 = <FormattedDate value={end} day="numeric" month="long" year="numeric" />;
+      const certAvailableDate = <FormattedDate value={certificateAvailableDate} day="numeric" month="long" year="numeric" />;
       certHeader = intl.formatMessage(messages.certificateHeaderNotAvailable);
       message = (
         <>
           <p>
             <FormattedMessage
               id="courseCelebration.certificateBody.notAvailable.endDate"
-              defaultMessage="After this course officially ends on {endDate}, you will receive an
-                email notification with your certificate. Once you have your certificate, be sure
-                to showcase your accomplishment on LinkedIn or your resumé."
-              values={{ endDate }}
+              defaultMessage="This course ended on {endDate} and final grades and certificates are scheduled to be
+              available after {certAvailableDate}."
+              values={{ endDate, certAvailableDate }}
             />
           </p>
           <p>
-            <FormattedMessage
-              id="courseCelebration.certificateBody.notAvailable.accessCertificate"
-              defaultMessage="You will be able to access your certificate any time from your
-                {dashboardLink} and {profileLink}."
-              values={{ dashboardLink, profileLink }}
-            />
+            {intl.formatMessage(messages.certificateNotAvailableBodyAccessCert)}
           </p>
         </>
       );
@@ -294,7 +290,7 @@ function CourseCelebration({ intl }) {
         </div>
         <div className="col-12 px-0 px-md-5">
           {certHeader && (
-          <Alert variant="primary" className="row w-100 m-0">
+          <Alert variant="success" className="row w-100 m-0">
             <div className="col order-1 order-md-0 pl-0 pr-0 pr-md-5">
               <div className="h4">{certHeader}</div>
               {message}

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(<CourseCelebration />);
-      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 () => {

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;