From e18d6f0daecc6d3511ea49ac7cdcdddba16c9fa1 Mon Sep 17 00:00:00 2001
From: "Albert (AJ) St. Aubin" <astaubin@edx.org>
Date: Thu, 20 May 2021 16:27:34 -0400
Subject: [PATCH] refactor: Updating the messages for certificate availability.

[MICROBA-678]
---
 .../CertificateAvailableAlert.jsx             | 36 ++++++-------------
 .../certificate-available-alert/hooks.js      |  2 +-
 .../course/course-exit/CourseCelebration.jsx  | 15 ++++----
 src/courseware/course/course-exit/messages.js |  2 +-
 4 files changed, 19 insertions(+), 36 deletions(-)

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..0fe2a76c 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,50 +1,34 @@
 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 certificateAvailableDate = <FormattedDate value={certDate} day="numeric" month="long" year="numeric" />;
+  const courseEndDateFormatted = <FormattedDate value={courseEndDate} day="numeric" month="long" year="numeric" />;
 
   return (
-    <Alert type={ALERT_TYPES.INFO}>
+    <Alert type={ALERT_TYPES.SUCCESS}>
       <strong>
         <FormattedMessage
           id="learning.outline.alert.cert.title"
-          defaultMessage="We are working on generating course certificates."
+          defaultMessage="Your grade and certificate will be ready soon!"
         />
       </strong>
       <br />
       <FormattedMessage
         id="learning.outline.alert.cert.when"
-        defaultMessage="If you have earned a certificate, you will be able to access it {timeRemaining}. You will also be able to view your certificates on your {profileLink}."
+        defaultMessage="This course ended on {courseEndDateFormatted} and final grades and certificates are
+        scheduled to be available after {certificateAvailableDate}."
         values={{
-          profileLink: (
-            <Hyperlink
-              destination={`${getConfig().LMS_BASE_URL}/u/${username}`}
-            >
-              <FormattedMessage
-                id="learning.outline.alert.cert.profile"
-                defaultMessage="Learner Profile"
-              />
-            </Hyperlink>
-          ),
-          timeRemaining: (
-            <FormattedRelative
-              key="timeRemaining"
-              value={certDate}
-              {...timezoneFormatArgs}
-            />
-          ),
+          courseEndDateFormatted,
+          certificateAvailableDate
         }}
       />
     </Alert>
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..0d724882 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,24 +126,22 @@ 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 }}
+              defaultMessage="If you have earned a passing grade, your certificate will be automatically issued."
             />
           </p>
         </>
@@ -294,7 +293,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}
diff --git a/src/courseware/course/course-exit/messages.js b/src/courseware/course/course-exit/messages.js
index 58cf4360..e0dca551 100644
--- a/src/courseware/course/course-exit/messages.js
+++ b/src/courseware/course/course-exit/messages.js
@@ -13,7 +13,7 @@ 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: 'Text displayed when course certificate is not yet available to be viewed',
   },
   certificateHeaderUnverified: {