feat: display the certificate available date if available in progress tab

Author: dcoa

src/course-home/progress-tab/certificate-status/CertificateStatus.jsx

@@ -91,11 +91,11 @@ const CertificateStatus = () => {
   const dashboardLink = <DashboardLink />;
   const idVerificationSupportLink = <IdVerificationSupportLink />;
   const profileLink = <ProfileLink />;
-
   // Some learners have a valid ("downloadable") certificate without being in a passing
   // state (e.g. learners who have been added to a course's allowlist), so we need to
   // skip grade validation for these learners
   const certIsDownloadable = certStatus === 'downloadable';
+
   if (mode === COURSE_EXIT_MODES.disabled) {
     certEventName = 'certificate_status_disabled';
   } else if (mode === COURSE_EXIT_MODES.nonPassing && !certIsDownloadable) {
@@ -187,7 +187,8 @@ const CertificateStatus = () => {
         // regardless of passing or nonpassing status
         if (!canViewCertificate) {
           certCase = 'notAvailable';
-          endDate = intl.formatDate(end, {
+          // use the certificate_available_date if it is available, otherwise use the end date of the course
+          endDate = intl.formatDate((certificateAvailableDate || end), {
             year: 'numeric',
             month: 'long',
             day: 'numeric',
@@ -214,6 +215,7 @@ const CertificateStatus = () => {
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+
   if (!certCase) {
     return null;
   }

src/courseware/course/course-exit/utils.js

@@ -17,6 +17,7 @@ const CELEBRATION_STATUSES = [
   'audit_passing',
   'downloadable',
   'earned_but_not_available',
+  'not_earned_but_available_date',
   'honor_passing',
   'requesting',
   'unverified',