fix: invalid date formatting on course route (#1233)

openedx · Dec 6, 2024 · d3920e9 · d3920e9
1 parent b7eaa10
commit d3920e9
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 33 deletions.
diff --git a/src/components/course/course-header/deprecated/CourseRunCard.jsx b/src/components/course/course-header/deprecated/CourseRunCard.jsx
@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import dayjs from 'dayjs';
 import { useLocation } from 'react-router-dom';
 import { Card } from '@openedx/paragon';
 import { FormattedDate, FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
@@ -15,7 +14,7 @@ import {
   hasCourseStarted,
   findHighestLevelSku,
   pathContainsCourseTypeSlug,
-  getCourseStartDate,
+  getNormalizedStartDate,
 } from '../../data/utils';
 import { formatStringAsNumber } from '../../../../utils/common';
 import {
@@ -32,8 +31,6 @@ import {
   useSubscriptions,
 } from '../../../app/data';
 
-const DATE_FORMAT = 'MMM D';
-
 const CourseRunCard = ({
   courseEntitlements,
   userEntitlements,
@@ -62,7 +59,7 @@ const CourseRunCard = ({
   const { data: enterpriseCustomer } = useEnterpriseCustomer();
   const userCanRequestSubsidyForCourse = useCanUserRequestSubsidyForCourse();
 
-  const courseStartDate = getCourseStartDate({ courseRun });
+  const courseStartDate = getNormalizedStartDate(courseRun);
 
   const isCourseStarted = useMemo(
     () => hasCourseStarted(courseStartDate),
@@ -165,7 +162,7 @@ const CourseRunCard = ({
             values={{
               upcomingCourseStartDate: (
                 <FormattedDate
-                  value={dayjs(courseStartDate).format(DATE_FORMAT)}
+                  value={courseStartDate}
                   month="short"
                   day="numeric"
                 />
@@ -203,7 +200,7 @@ const CourseRunCard = ({
               values={{
                 courseStartDate: (
                   <FormattedDate
-                    value={dayjs(courseStartDate).format(DATE_FORMAT)}
+                    value={courseStartDate}
                     month="short"
                     day="numeric"
                   />
@@ -275,7 +272,7 @@ const CourseRunCard = ({
           values={{
             courseStartedDate: (
               <FormattedDate
-                value={dayjs(courseStartDate).format(DATE_FORMAT)}
+                value={courseStartDate}
                 month="short"
                 day="numeric"
               />
@@ -291,7 +288,7 @@ const CourseRunCard = ({
           values={{
             courseStartsDate: (
               <FormattedDate
-                value={dayjs(courseStartDate).format(DATE_FORMAT)}
+                value={courseStartDate}
                 month="short"
                 day="numeric"
               />
@@ -311,7 +308,7 @@ const CourseRunCard = ({
               values={{
                 courseStartsDate: (
                   <FormattedDate
-                    value={dayjs(courseStartDate).format(DATE_FORMAT)}
+                    value={courseStartDate}
                     month="short"
                     day="numeric"
                   />

diff --git a/src/components/course/course-header/tests/DeprecatedCourseRunCard.test.jsx b/src/components/course/course-header/tests/DeprecatedCourseRunCard.test.jsx
@@ -28,7 +28,7 @@ import { useCanUserRequestSubsidyForCourse } from '../../data/hooks';
 import { SUBSIDY_TYPE } from '../../../../constants';
 
 const COURSE_UUID = 'foo';
-const COURSE_RUN_START = dayjs().format();
+const COURSE_RUN_START = dayjs().toISOString();
 const COURSE_WEEKS_TO_COMPLETE = 1;
 const DATE_FORMAT = 'MMM D';
 const COURSE_ID = '123';
@@ -201,9 +201,7 @@ describe('<DeprecatedCourseRunCard />', () => {
   test('Course is self paced and has started', () => {
     // If Browse/Request feature is off, user should always see the enroll button
     const courseRun = generateCourseRun({});
-    renderCard({
-      courseRun,
-    });
+    renderCard({ courseRun });
     const startDate = dayjs(COURSE_RUN_START).format(DATE_FORMAT);
     expect(screen.getByText(`Starts ${startDate}`)).toBeInTheDocument();
     expect(screen.getByText('Be the first to enroll!')).toBeInTheDocument();
@@ -213,14 +211,12 @@ describe('<DeprecatedCourseRunCard />', () => {
   test('Course self is paced, has not started, and enrollment count', () => {
     // The user has a mocked subsidy from renderCard default values,
     // so they should see an enroll button.
-    const courseRunStart = dayjs(COURSE_RUN_START).add(1, 'd').format();
+    const courseRunStart = dayjs(COURSE_RUN_START).add(1, 'd').toISOString();
     const courseRun = generateCourseRun({
       start: courseRunStart,
       enrollmentCount: 1000,
     });
-    renderCard({
-      courseRun,
-    });
+    renderCard({ courseRun });
     const startDate = dayjs(courseRunStart).format(DATE_FORMAT);
     expect(screen.getByText(`Starts ${startDate}`)).toBeInTheDocument();
     expect(screen.getByText('1,000 recently enrolled!')).toBeInTheDocument();
@@ -240,9 +236,7 @@ describe('<DeprecatedCourseRunCard />', () => {
       },
     });
     const courseRun = generateCourseRun({});
-    renderCard({
-      courseRun,
-    });
+    renderCard({ courseRun });
     const startDate = dayjs(COURSE_RUN_START).format(DATE_FORMAT);
     expect(screen.getByText(`Starts ${startDate}`)).toBeInTheDocument();
     expect(screen.getByText('Be the first to enroll!')).toBeInTheDocument();
@@ -254,9 +248,7 @@ describe('<DeprecatedCourseRunCard />', () => {
     // and there is an applicable catalog for the configured subsidy request type.
     const courseRun = generateCourseRun({});
     useCanUserRequestSubsidyForCourse.mockReturnValue(true);
-    renderCard({
-      courseRun,
-    });
+    renderCard({ courseRun });
     const startDate = dayjs(COURSE_RUN_START).format(DATE_FORMAT);
     expect(screen.getByText(`Starts ${startDate}`)).toBeInTheDocument();
     expect(screen.getByText('Be the first to enroll!')).toBeInTheDocument();
@@ -268,17 +260,15 @@ describe('<DeprecatedCourseRunCard />', () => {
     // subsidies and there is no applicable catalog for the configured subsidy type.
     // Instead, the CTA should bring the user through the ecommerce basket flow.
     const courseRun = generateCourseRun({});
-    renderCard({
-      courseRun,
-    });
+    renderCard({ courseRun });
     const startDate = dayjs(COURSE_RUN_START).format(DATE_FORMAT);
     expect(screen.getByText(`Starts ${startDate}`)).toBeInTheDocument();
     expect(screen.getByText('Be the first to enroll!')).toBeInTheDocument();
     expect(screen.getByText(enrollButtonTypes.ENROLL_DISABLED)).toBeInTheDocument();
   });
 
   test('User is enrolled, and course not started', () => {
-    const courseRunStart = dayjs(COURSE_RUN_START).add(1, 'd').format();
+    const courseRunStart = dayjs(COURSE_RUN_START).add(1, 'd').toISOString();
     const courseRun = generateCourseRun({
       start: courseRunStart,
     });
@@ -289,7 +279,7 @@ describe('<DeprecatedCourseRunCard />', () => {
         courseRunId: COURSE_ID,
         isEnrollmentActive: true,
         isRevoked: false,
-        mode: COURSE_MODES_MAP.AUDIT,
+        mode: COURSE_MODES_MAP.VERIFIED,
       }],
     });
     expect(screen.getByText(`Starts ${startDate}`)).toBeInTheDocument();

diff --git a/src/components/course/data/utils.jsx b/src/components/course/data/utils.jsx
@@ -95,7 +95,7 @@ export const getNormalizedStartDate = ({
     return todayToIso;
   }
   const startDateIso = dayjs(start).toISOString();
-  if (isCourseSelfPaced(pacingType)) {
+  if (isCourseSelfPaced(pacingType) && dayjs(startDateIso).isBefore(dayjs())) {
     if (hasTimeToComplete({ end, weeksToComplete }) || isWithinMinimumStartDateThreshold({ start })) {
       // always today's date (incentives enrollment)
       return todayToIso;

diff --git a/src/components/dashboard/main-content/course-enrollments/course-cards/UpcomingCourseCard.jsx b/src/components/dashboard/main-content/course-enrollments/course-cards/UpcomingCourseCard.jsx
@@ -1,6 +1,4 @@
-import React from 'react';
 import PropTypes from 'prop-types';
-import dayjs from 'dayjs';
 import { FormattedDate, FormattedMessage } from '@edx/frontend-platform/i18n';
 
 import { Button } from '@openedx/paragon';
@@ -15,7 +13,7 @@ const UpcomingCourseCard = (props) => {
         description="Label for the upcoming course card button"
         values={{
           upcomingDate: <FormattedDate
-            value={dayjs(props.startDate).format('MMM D')}
+            value={props.startDate}
             month="short"
             day="numeric"
           />,