fix: [MICROBA-1769] Fix nonPassing states

When a learner is in the non-passing state for a certificate, we don't want to give them messaging about certificate status IF the certificate is not released yet for the course. Before this change, learners who were were in the nonpassing state would be informed before finishing the course or before the certificates were released. After this change, learners who are nonpassing will be in a "not passing not available" state (similar to "earned but not available" state) until the course issues its certificate.
2022-04-04 17:19:41 -04:00
parent af837fcac8
commit e74de71fb7
10 changed files with 261 additions and 24 deletions
--- a/src/courseware/course/course-exit/CourseCelebration.jsx
+++ b/src/courseware/course/course-exit/CourseCelebration.jsx
@@ -55,6 +55,7 @@ function CourseCelebration({ intl }) {
  const {
    org,
    verifiedMode,
+    canViewCertificate,
  } = useModel('courseHomeMeta', courseId);

  const {
@@ -248,6 +249,29 @@ function CourseCelebration({ intl }) {
      }
      break;
    default:
+      // To properly handle messaging in the case where a course has not ended yet
+      // and certificateData is null, we want to make sure we serve a generic message
+      // whether they are in a nonpassing or earned state.
+      if (!canViewCertificate) {
+        const endDate = <FormattedDate value={end} day="numeric" month="long" year="numeric" />;
+        const certAvailableDate = <FormattedDate value={certificateAvailableDate || end} day="numeric" month="long" year="numeric" />;
+        certHeader = intl.formatMessage(messages.certificateHeaderNotAvailable);
+        message = (
+          <>
+            <p>
+              <FormattedMessage
+                id="courseCelebration.certificateBody.notAvailable.endDate.v2"
+                defaultMessage="This course ends on {endDate}. Final grades and any earned certificates are
+                scheduled to be available after {certAvailableDate}."
+                values={{ endDate, certAvailableDate }}
+                description="This shown for leaner when they are eligible for certifcate but it't not available yet, it could because leaners just finished the course quickly!"
+              />
+            </p>
+          </>
+        );
+        visitEvent = 'celebration_with_unavailable_cert';
+        footnote = <DashboardFootnote variant={visitEvent} />;
+      }
      break;
  }

--- a/src/courseware/course/course-exit/CourseExit.test.jsx
+++ b/src/courseware/course/course-exit/CourseExit.test.jsx
@@ -38,6 +38,9 @@ describe('Course Exit Pages', () => {
  const discoveryRecommendationsUrl = new RegExp(`${getConfig().DISCOVERY_API_BASE_URL}/api/v1/course_recommendations/*`);
  const enrollmentsUrl = new RegExp(`${getConfig().LMS_BASE_URL}/api/enrollment/v1/enrollment*`);
  const learningSequencesUrlRegExp = new RegExp(`${getConfig().LMS_BASE_URL}/api/learning_sequences/v1/course_outline/*`);
+  const now = new Date();
+  const tomorrow = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
+  const overmorrow = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 2);

  function setMetadata(coursewareAttributes, courseHomeAttributes = {}) {
    const extendedCourseMetadata = { ...coursewareMetadata, ...coursewareAttributes };
@@ -367,11 +370,57 @@ describe('Course Exit Pages', () => {

  describe('Course Non-passing Experience', () => {
    it('Displays link to progress tab', async () => {
-      setMetadata({ user_has_passing_grade: false });
+      setMetadata({
+        user_has_passing_grade: false,
+        can_view_certificate: true,
+      }, {
+        can_view_certificate: false,
+      });
      await fetchAndRender(<CourseNonPassing />);
      expect(screen.getByText('You’ve reached the end of the course!')).toBeInTheDocument();
      expect(screen.getByRole('link', { name: 'View grades' })).toBeInTheDocument();
    });
+
+    it('Displays text for notAvailableNonPassing case when a learner does not have a passing grade and certificates are not viewable', async () => {
+      setMetadata({
+        user_has_passing_grade: false,
+        end: tomorrow.toISOString(),
+      }, {
+        can_view_certificate: false,
+      });
+      await fetchAndRender(<CourseNonPassing />);
+      expect(screen.getByText(`This course ends on ${tomorrow.toLocaleDateString('en-us', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+      })}, final grades and any earned certificates are scheduled to be available after ${tomorrow.toLocaleDateString('en-us', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+      })}.`)).toBeInTheDocument();
+    });
+
+    it('Handles certificate available dates for notAvailableNotPassing', async () => {
+      setMetadata({
+        user_has_passing_grade: false,
+        end: tomorrow.toISOString(),
+        certificate_data: {
+          certificate_available_date: overmorrow.toISOString(),
+        },
+      }, {
+        can_view_certificate: false,
+      });
+      await fetchAndRender(<CourseNonPassing />);
+      expect(screen.getByText(`This course ends on ${tomorrow.toLocaleDateString('en-us', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+      })}, final grades and any earned certificates are scheduled to be available after ${overmorrow.toLocaleDateString('en-us', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+      })}.`)).toBeInTheDocument();
+    });
  });

  describe('Course in progress experience', () => {
--- a/src/courseware/course/course-exit/CourseNonPassing.jsx
+++ b/src/courseware/course/course-exit/CourseNonPassing.jsx
@@ -4,11 +4,17 @@ import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Helmet } from 'react-helmet';
 import { useSelector } from 'react-redux';
-import { Alert, Button } from '@edx/paragon';
+import {
+  Alert, breakpoints, Button, useWindowSize,
+} from '@edx/paragon';
 import { getConfig } from '@edx/frontend-platform';

+import { CheckCircle } from '@edx/paragon/icons';
 import { useModel } from '../../../generic/model-store';

+import CelebrationMobile from './assets/celebration_456x328.gif';
+import CelebrationDesktop from './assets/celebration_750x540.gif';
+import certificate from '../../../generic/assets/edX_certificate.png';
 import CatalogSuggestion from './CatalogSuggestion';
 import DashboardFootnote from './DashboardFootnote';
 import messages from './messages';
@@ -20,15 +26,27 @@ function CourseNonPassing({ intl }) {
    org,
    tabs,
    title,
+    isSelfPaced,
+    canViewCertificate,
  } = useModel('courseHomeMeta', courseId);
+  const { end, certificateData } = useModel('coursewareMeta', courseId);
  const { administrator } = getAuthenticatedUser();
-
+  let certificateAvailableDate = certificateData?.certificateAvailableDate || end;
+  certificateAvailableDate = intl.formatDate(certificateAvailableDate, {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });
+  const courseEndDate = intl.formatDate(end, {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });
+  const wideScreen = useWindowSize().width >= breakpoints.medium.minWidth;
  // Get progress tab link for 'view grades' button
  const progressTab = tabs.find(tab => tab.slug === 'progress');
  const progressLink = progressTab && progressTab.url;
-
  useEffect(() => logVisit(org, courseId, administrator, 'nonpassing'), [org, courseId, administrator]);
-
  return (
    <>
      <Helmet>
@@ -38,21 +56,79 @@ function CourseNonPassing({ intl }) {
        <div className="col-12 p-0 h2 text-center">
          { intl.formatMessage(messages.endOfCourseHeader) }
        </div>
-        <Alert variant="primary" className="col col-lg-10 mt-4">
-          <div className="row w-100 m-0 align-items-start">
-            <div className="flex-grow-1 col-sm p-0">{ intl.formatMessage(messages.endOfCourseDescription) }</div>
-            {progressLink && (
-              <Button
-                variant="primary"
-                className="flex-shrink-0 mt-3 mt-sm-0 mb-1 mb-sm-0 ml-sm-5"
-                href={progressLink}
-                onClick={() => logClick(org, courseId, administrator, 'view_grades')}
-              >
-                {intl.formatMessage(messages.viewGradesButton)}
-              </Button>
-            )}
-          </div>
-        </Alert>
+        {!canViewCertificate && !isSelfPaced && (
+        <>
+          {!wideScreen && (
+            <div className="col-12 mt-3 mb-4 px-0 px-md-5 text-center">
+              <img
+                src={CelebrationMobile}
+                alt={`${intl.formatMessage(messages.congratulationsImage)}`}
+                className="img-fluid"
+              />
+            </div>
+          )}
+          {wideScreen && (
+            <div className="col-12 mt-3 mb-4 px-0 px-md-5 text-center">
+              <img
+                src={CelebrationDesktop}
+                alt={`${intl.formatMessage(messages.congratulationsImage)}`}
+                className="img-fluid"
+                style={{ width: '36rem' }}
+              />
+            </div>
+          )}
+        </>
+        )}
+        { // We don't want to show a learner an nonPassing message
+          // before the certificates are viewable for the course.
+          canViewCertificate || isSelfPaced
+            ? (
+              <Alert variant="primary" className="col col-lg-10 mt-4">
+                <div className="row w-100 m-0 align-items-start">
+                  <div className="flex-grow-1 col-sm p-0">
+                    {intl.formatMessage(messages.endOfCourseDescription)}
+                  </div>
+                  {progressLink && (
+                    <Button
+                      variant="primary"
+                      className="flex-shrink-0 mt-3 mt-sm-0 mb-1 mb-sm-0 ml-sm-5"
+                      href={progressLink}
+                      onClick={() => logClick(org, courseId, administrator, 'view_grades')}
+                    >
+                      {intl.formatMessage(messages.viewGradesButton)}
+                    </Button>
+                  )}
+                </div>
+              </Alert>
+            ) : (
+              <div className="col-12 px-0 px-md-5">
+                <Alert Alert variant="success" icon={CheckCircle}>
+                  <div className="row w-100 m-0">
+                    <div className="col order-1 order-md-0 pl-0 pr-0 pr-md-5">
+                      <h4 className="h4">{intl.formatMessage(messages.courseFinishedEarlyHeading)}</h4>
+                      <p>
+                        {intl.formatMessage(
+                          messages.courseFinishedEarlyBody,
+                          {
+                            courseEndDate,
+                            certificateAvailableDate,
+                          },
+                        )}
+                      </p>
+                    </div>
+                    <div className="col-12 order-0 col-md-3 order-md-1 w-100 mb-3 p-0 text-center">
+                      <img
+                        src={certificate}
+                        alt={`${intl.formatMessage(messages.certificateImage)}`}
+                        className="w-100"
+                        style={{ maxWidth: '13rem' }}
+                      />
+                    </div>
+                  </div>
+                </Alert>
+              </div>
+            )
+        }
        <DashboardFootnote variant="nonpassing" />
        <CatalogSuggestion variant="nonpassing" />
      </div>
--- a/src/courseware/course/course-exit/messages.js
+++ b/src/courseware/course/course-exit/messages.js
@@ -66,6 +66,16 @@ const messages = defineMessages({
    defaultMessage: 'More content is coming soon!',
    description: 'Header when the status of the course not all of (contents or assignments) available yet',
  },
+  courseFinishedEarlyHeading: {
+    id: 'courseExit.courseFinishedEarlyHeading',
+    defaultMessage: 'Your grade and certificate status will be available soon.',
+    description: 'Heading to a message that appears at the end of a course for a user who has finished a course early and has not passed or grades are not final',
+  },
+  courseFinishedEarlyBody: {
+    id: 'courseExit.courseFinishedEarlyBody',
+    defaultMessage: 'This course ends on {courseEndDate}, final grades and any earned certificates are scheduled to be available after {certificateAvailableDate}.',
+    description: 'message that appears at the end of a course for a user who has finished a course early and has not passed or grades are not final',
+  },
  dashboardLink: {
    id: 'courseExit.dashboardLink',
    defaultMessage: 'Dashboard',
--- a/src/courseware/data/api.js
+++ b/src/courseware/data/api.js
@@ -124,6 +124,7 @@ function normalizeMetadata(metadata) {
    relatedPrograms: camelCaseObject(data.related_programs),
    userNeedsIntegritySignature: data.user_needs_integrity_signature,
    canAccessProctoredExams: data.can_access_proctored_exams,
+    canViewCertificate: data.can_view_certificate,
  };
 }