From 7680871ca244be8da436aeac997125c51f52e250 Mon Sep 17 00:00:00 2001
From: "Albert (AJ) St. Aubin" <astaubin@edx.org>
Date: Fri, 21 May 2021 12:57:28 -0400
Subject: [PATCH] PR

---
 .../CertificateAvailableAlert.jsx                         | 7 +++++--
 .../alerts/certificate-available-alert/hooks.js           | 2 +-
 src/courseware/course/course-exit/CourseCelebration.jsx   | 7 ++-----
 src/courseware/course/course-exit/messages.js             | 6 ++++++
 src/generic/user-messages/Alert.jsx                       | 8 +++++++-
 5 files changed, 21 insertions(+), 9 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 f279952a..685e41f1 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
@@ -7,10 +7,12 @@ import { Alert, ALERT_TYPES } from '../../../../generic/user-messages';
 function CertificateAvailableAlert({ payload }) {
   const {
     certDate,
+    userTimezone,
     courseEndDate,
   } = payload;
 
-  const certificateAvailableDate = <FormattedDate value={certDate} day="numeric" month="long" year="numeric" />;
+  const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};
+  const certificateAvailableDateFormatted = <FormattedDate value={certDate} day="numeric" month="long" year="numeric" />;
   const courseEndDateFormatted = <FormattedDate value={courseEndDate} day="numeric" month="long" year="numeric" />;
 
   return (
@@ -28,8 +30,9 @@ function CertificateAvailableAlert({ payload }) {
         scheduled to be available after {certificateAvailableDate}."
         values={{
           courseEndDateFormatted,
-          certificateAvailableDate,
+          certificateAvailableDate: certificateAvailableDateFormatted,
         }}
+        {...timezoneFormatArgs}
       />
     </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 a176572f..7c8295e6 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
@@ -25,7 +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,
+    courseEndDate: endDate,
     username,
     userTimezone,
   };
diff --git a/src/courseware/course/course-exit/CourseCelebration.jsx b/src/courseware/course/course-exit/CourseCelebration.jsx
index 0d724882..0fdd5d84 100644
--- a/src/courseware/course/course-exit/CourseCelebration.jsx
+++ b/src/courseware/course/course-exit/CourseCelebration.jsx
@@ -134,15 +134,12 @@ function CourseCelebration({ intl }) {
             <FormattedMessage
               id="courseCelebration.certificateBody.notAvailable.endDate"
               defaultMessage="This course ended on {endDate} and final grades and certificates are scheduled to be
-              available after {certAvailableDate}"
+              available after {certAvailableDate}."
               values={{ endDate, certAvailableDate }}
             />
           </p>
           <p>
-            <FormattedMessage
-              id="courseCelebration.certificateBody.notAvailable.accessCertificate"
-              defaultMessage="If you have earned a passing grade, your certificate will be automatically issued."
-            />
+            {intl.formatMessage(messages.certificateNotAvailableBodyAccessCert)}
           </p>
         </>
       );
diff --git a/src/courseware/course/course-exit/messages.js b/src/courseware/course/course-exit/messages.js
index e0dca551..9f36d386 100644
--- a/src/courseware/course/course-exit/messages.js
+++ b/src/courseware/course/course-exit/messages.js
@@ -14,6 +14,11 @@ const messages = defineMessages({
   certificateHeaderNotAvailable: {
     id: 'courseCelebration.certificateHeader.notAvailable',
     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..3eb73365 100644
--- a/src/generic/user-messages/Alert.jsx
+++ b/src/generic/user-messages/Alert.jsx
@@ -41,6 +41,12 @@ function getAlertIcon(type) {
   return faInfoCircle;
 }
 
+function getAlertIconColor(type) {
+  if (type === ALERT_TYPES.SUCCESS) {
+    return 'text-success-500';
+  }
+}
+
 function Alert({
   type, dismissible, children, footer, intl, onDismiss,
 }) {
@@ -49,7 +55,7 @@ function Alert({
       <div className="row w-100 m-0">
         {type !== ALERT_TYPES.WELCOME && (
           <div className="col-auto p-0 mr-3">
-            <FontAwesomeIcon icon={getAlertIcon(type)} />
+            <FontAwesomeIcon icon={getAlertIcon(type)} className={getAlertIconColor(type)}/>
           </div>
         )}
         <div className="col mr-4 p-0 align-items-start">