richie-education 2.25.0-b2.dev69 → 2.25.0-b2.dev71

package/js/widgets/Dashboard/components/DashboardItem/CourseEnrolling/hooks/useCourseRunPeriodMessage.ts

@@ -0,0 +1,76 @@
+import { defineMessages, useIntl } from 'react-intl';
+import useDateRelative from 'hooks/useDateRelative';
+import { Priority } from 'types';
+import { CourseRun } from 'types/Joanie';
+import useDateFormat, { DEFAULT_DATE_FORMAT } from 'hooks/useDateFormat';
+
+const messages = defineMessages({
+  onGoingRunPeriod: {
+    id: 'components.useCourseRunPeriodMessage.onGoingRunPeriod',
+    description: 'Text to display when a course run is on going.',
+    defaultMessage: 'This session started on {startDate} and will end on {endDate}',
+  },
+  futureRunPeriod: {
+    id: 'components.useCourseRunPeriodMessage.futureRunPeriod',
+    description: 'Text to display the period of a future course run.',
+    defaultMessage: 'This session starts {relativeStartDate}, the {startDate}',
+  },
+  onGoingEnrolledRunPeriod: {
+    id: 'components.useCourseRunPeriodMessage.onGoingEnrolledRunPeriod',
+    description: 'Text to display when a course run is ongoing and the user is enrolled to.',
+    defaultMessage: "You are enrolled for this session. It's open from {startDate} to {endDate}",
+  },
+  futureEnrolledRunPeriod: {
+    id: 'components.useCourseRunPeriodMessage.futureEnrolledRunPeriod',
+    description: 'Text to display when a course run is not yet opened and the user is enrolled to.',
+    defaultMessage:
+      'You are enrolled for this session. It starts {relativeStartDate}, the {startDate}.',
+  },
+  archivedEnrolledRunPeriod: {
+    id: 'components.useCourseRunPeriodMessage.archivedEnrolledRunPeriod',
+    description: 'Text to display when a course run is archived and the user is enrolled to.',
+    defaultMessage: 'You are enrolled for this session.',
+  },
+});
+
+const useCourseRunPeriodMessage = (courseRun: CourseRun, enrolled: boolean = false) => {
+  const intl = useIntl();
+  const formatDate = useDateFormat();
+
+  const relativeStartDate = useDateRelative(new Date(courseRun.start));
+  const startDate = formatDate(courseRun.start, DEFAULT_DATE_FORMAT);
+  const endDate = formatDate(courseRun.end, DEFAULT_DATE_FORMAT);
+  const isArchived = [Priority.ARCHIVED_CLOSED, Priority.ARCHIVED_OPEN].includes(
+    courseRun.state.priority,
+  );
+  const isOnGoing = [Priority.ONGOING_OPEN, Priority.ONGOING_CLOSED].includes(
+    courseRun.state.priority,
+  );
+  if (enrolled) {
+    if (isArchived) {
+      return intl.formatMessage(messages.archivedEnrolledRunPeriod);
+    }
+    if (isOnGoing) {
+      return intl.formatMessage(messages.onGoingEnrolledRunPeriod, {
+        startDate,
+        endDate,
+      });
+    }
+    return intl.formatMessage(messages.futureEnrolledRunPeriod, {
+      relativeStartDate,
+      startDate,
+    });
+  }
+  if (isOnGoing) {
+    return intl.formatMessage(messages.onGoingRunPeriod, {
+      startDate,
+      endDate,
+    });
+  }
+  return intl.formatMessage(messages.futureRunPeriod, {
+    relativeStartDate,
+    startDate,
+  });
+};
+
+export default useCourseRunPeriodMessage;

package/js/widgets/Dashboard/components/DashboardItem/{DashboardItemCourseEnrolling.spec.tsx → CourseEnrolling/index.spec.tsx}

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react';
-import { IntlProvider } from 'react-intl';
+import { IntlProvider, createIntl } from 'react-intl';
 import { PropsWithChildren } from 'react';
 import { CredentialOrderFactory, EnrollmentFactory } from 'utils/test/factories/joanie';
 import { Priority } from 'types';
@@ -8,7 +8,8 @@ import { DEFAULT_DATE_FORMAT } from 'hooks/useDateFormat';
 import { CourseRunFactoryFromPriority } from 'utils/test/factories/richie';
 import { noop } from 'utils';
 import { computeState } from 'utils/CourseRuns';
-import { DashboardItemCourseEnrollingRun, Enrolled } from './DashboardItemCourseEnrolling';
+import { formatRelativeDate } from 'utils/relativeDate';
+import { DashboardItemCourseEnrollingRun, Enrolled } from '.';
 
 /**
  * Most of the component of this file are tested from DashboardItemEnrollment.spec.tsx and
@@ -23,59 +24,89 @@ describe('<Enrolled/>', () => {
     {
       buttonTestLabel: 'and access course button',
       priority: Priority.ONGOING_OPEN,
+      priorityLabel: 'ONGOING_OPEN',
       expectButton: true,
+      expectLabelTemplate:
+        "You are enrolled for this session. It's open from %fromDate% to %toDate%",
     },
     {
       buttonTestLabel: 'and no access course button',
       priority: Priority.FUTURE_OPEN,
+      priorityLabel: 'FUTURE_OPEN',
       expectButton: false,
+      expectLabelTemplate:
+        'You are enrolled for this session. It starts %fromRelativeDate%, the %fromDate%.',
     },
     {
       buttonTestLabel: 'and access course button',
       priority: Priority.ARCHIVED_OPEN,
+      priorityLabel: 'ARCHIVED_OPEN',
       expectButton: true,
+      expectLabelTemplate: `You are enrolled for this session.`,
     },
     {
       buttonTestLabel: 'and no access course button',
       priority: Priority.FUTURE_NOT_YET_OPEN,
+      priorityLabel: 'FUTURE_NOT_YET_OPEN',
       expectButton: false,
+      expectLabelTemplate:
+        'You are enrolled for this session. It starts %fromRelativeDate%, the %fromDate%.',
     },
     {
       buttonTestLabel: 'and no access course button',
       priority: Priority.FUTURE_CLOSED,
+      priorityLabel: 'FUTURE_CLOSED',
       expectButton: false,
+      expectLabelTemplate:
+        'You are enrolled for this session. It starts %fromRelativeDate%, the %fromDate%.',
     },
     {
       buttonTestLabel: 'and access course button',
       priority: Priority.ONGOING_CLOSED,
+      priorityLabel: 'ONGOING_CLOSED',
       expectButton: true,
+      expectLabelTemplate: `You are enrolled for this session. It's open from %fromDate% to %toDate%`,
     },
     {
       buttonTestLabel: 'and access course button',
       priority: Priority.ARCHIVED_CLOSED,
+      priorityLabel: 'ARCHIVED_CLOSED',
       expectButton: true,
+      expectLabelTemplate: `You are enrolled for this session.`,
     },
     {
       buttonTestLabel: 'and no access course button',
       priority: Priority.TO_BE_SCHEDULED,
+      priorityLabel: 'TO_BE_SCHEDULED',
       expectButton: false,
+      expectLabelTemplate:
+        'You are enrolled for this session. It starts %fromRelativeDate%, the %fromDate%.',
     },
   ])(
-    'handles enrollments with priority=$priority $buttonTestLabel',
-    async ({ priority, expectButton }) => {
+    'handles enrollments with priority=$priorityLabel $buttonTestLabel',
+    async ({ priority, expectButton, expectLabelTemplate }) => {
       const enrollment: Enrollment = EnrollmentFactory().one();
       enrollment.course_run.state.priority = priority;
       render(<Enrolled enrollment={enrollment} />, { wrapper });
-      await screen.findByText(
-        'You are enrolled for the session from ' +
-          new Intl.DateTimeFormat('en', DEFAULT_DATE_FORMAT).format(
-            new Date(enrollment.course_run.start),
-          ) +
-          ' to ' +
-          new Intl.DateTimeFormat('en', DEFAULT_DATE_FORMAT).format(
-            new Date(enrollment.course_run.end),
-          ),
+      const intl = createIntl({ locale: 'en' });
+
+      const fromDate = new Intl.DateTimeFormat('en', DEFAULT_DATE_FORMAT).format(
+        new Date(enrollment.course_run.start),
+      );
+      const fromRelativeDate = formatRelativeDate(
+        new Date(enrollment.course_run.start),
+        new Date(),
+        intl.locale,
       );
+      const toDate = new Intl.DateTimeFormat('en', DEFAULT_DATE_FORMAT).format(
+        new Date(enrollment.course_run.end),
+      );
+
+      const expectLabel = expectLabelTemplate
+        .replace('%fromRelativeDate%', fromRelativeDate)
+        .replace('%fromDate%', fromDate)
+        .replace('%toDate%', toDate);
+      expect(await screen.findByText(expectLabel)).toBeInTheDocument();
       if (expectButton) {
         const link = screen.getByRole('link', { name: 'Access to course' });
         expect(link).toBeEnabled();

package/js/widgets/Dashboard/components/DashboardItem/{DashboardItemCourseEnrolling.stories.tsx → CourseEnrolling/index.stories.tsx}

@@ -4,8 +4,8 @@ import { faker } from '@faker-js/faker';
 import { TargetCourseFactory } from 'utils/test/factories/joanie';
 import { StorybookHelper } from 'utils/StorybookHelper';
 import { Priority } from 'types';
-import { enrollment } from './stories.mock';
-import { DashboardItemCourseEnrolling } from './DashboardItemCourseEnrolling';
+import { enrollment } from '../stories.mock';
+import { DashboardItemCourseEnrolling } from '.';
 
 export default {
   component: DashboardItemCourseEnrolling,

package/js/widgets/Dashboard/components/DashboardItem/{DashboardItemCourseEnrolling.tsx → CourseEnrolling/index.tsx}

@@ -13,11 +13,12 @@ import {
 } from 'types/Joanie';
 import { Spinner } from 'components/Spinner';
 import Banner, { BannerType } from 'components/Banner';
-import useDateFormat, { DEFAULT_DATE_FORMAT } from 'hooks/useDateFormat';
 import { Icon, IconTypeEnum } from 'components/Icon';
+import useDateFormat from 'hooks/useDateFormat';
 import { orderNeedsSignature } from 'widgets/Dashboard/components/DashboardItem/utils/order';
-import { RouterButton } from '../RouterButton';
-import { useEnroll } from '../../hooks/useEnroll';
+import { RouterButton } from 'widgets/Dashboard/components/RouterButton';
+import { useEnroll } from 'widgets/Dashboard/hooks/useEnroll';
+import useCourseRunPeriodMessage from './hooks/useCourseRunPeriodMessage';
 
 const messages = defineMessages({
   notEnrolled: {
@@ -41,16 +42,6 @@ const messages = defineMessages({
     description: 'Button to access course when the user is enrolled',
     defaultMessage: 'Access to course',
   },
-  runPeriod: {
-    id: 'components.DashboardItemEnrollment.runPeriod',
-    description: 'Text to display the period of a course run',
-    defaultMessage: 'From {startDate} to {endDate}',
-  },
-  enrolledRunPeriod: {
-    id: 'components.DashboardItemEnrollment.enrolledRunPeriod',
-    description: 'Text to display the period of a course run',
-    defaultMessage: 'You are enrolled for the session from {startDate} to {endDate}',
-  },
   enrolled: {
     id: 'components.DashboardItemEnrollment.enrolled',
     description: 'Text shown when user is enrolled in a course run',
@@ -152,7 +143,7 @@ const DashboardItemCourseEnrollingRuns = ({
   const { enroll, isLoading, error } = useEnroll(enrollments, order);
 
   // Hide runs with finished enrollment.
-  const datas = useMemo(() => {
+  const courseRunOpenForEnrollmentList = useMemo(() => {
     const activeEnrollment = CoursesHelper.findActiveEnrollment(course, enrollments);
     return course.course_runs
       .map((courseRun) => ({
@@ -160,6 +151,9 @@ const DashboardItemCourseEnrollingRuns = ({
         selected: activeEnrollment?.course_run.id === courseRun.id,
       }))
       .filter(
+        // FIXME(rlecellier): question!
+        // does that mean the we hide the enrollment when user cannot enroll?
+        // even if he's already enrolled ?
         (data) => data.selected || data.courseRun.state.priority <= Priority.FUTURE_NOT_YET_OPEN,
       );
   }, [course, enrollments]);
@@ -168,13 +162,13 @@ const DashboardItemCourseEnrollingRuns = ({
   return (
     <div className="dashboard-item__course-enrolling__runs">
       {error && <Banner message={error} type={BannerType.ERROR} />}
-      {datas.length === 0 && (
+      {courseRunOpenForEnrollmentList.length === 0 && (
         <div className="dashboard-item__course-enrolling__no-runs">
           <Icon name={IconTypeEnum.WARNING} size="small" />
           <FormattedMessage {...messages.noCourseRunAvailable} />
         </div>
       )}
-      {datas.map((data) => (
+      {courseRunOpenForEnrollmentList.map((data) => (
         <DashboardItemCourseEnrollingRun
           key={data.courseRun.id}
           courseRun={data.courseRun}
@@ -217,6 +211,7 @@ export const DashboardItemCourseEnrollingRun = ({
 }: DashboardItemCourseEnrollingRunProps) => {
   const intl = useIntl();
   const formatDate = useDateFormat();
+  const courseRunPeriodMessage = useCourseRunPeriodMessage(courseRun, selected);
   const haveToSignContract = order ? orderNeedsSignature(order, product) : false;
   const isOpenedForEnrollment = useMemo(
     () => courseRun.state.priority < Priority.FUTURE_NOT_YET_OPEN,
@@ -239,16 +234,11 @@ export const DashboardItemCourseEnrollingRun = ({
             )}
             <strong>{courseRun.title}</strong>
           </p>
-          <FormattedMessage
-            {...(selected ? messages.enrolledRunPeriod : messages.runPeriod)}
-            values={{
-              startDate: formatDate(courseRun.start, DEFAULT_DATE_FORMAT),
-              endDate: formatDate(courseRun.end, DEFAULT_DATE_FORMAT),
-            }}
-          />
+          {courseRunPeriodMessage}
         </div>
         {courseRun.state.priority === Priority.FUTURE_NOT_YET_OPEN && (
           <div className="dashboard-item__course-enrolling__run__not-opened">
+            -{' '}
             <FormattedMessage
               {...messages.enrollmentNotYetOpened}
               values={{ enrollment_start: formatDate(courseRun.enrollment_start) }}
@@ -256,18 +246,22 @@ export const DashboardItemCourseEnrollingRun = ({
           </div>
         )}
       </div>
-      <div>
-        {selected ? (
-          <Button
-            color="secondary"
-            size="small"
-            href={courseRun.resource_link}
-            data-testid="dashboard-item-enrollment__button"
-            className="dashboard-item__button"
-          >
-            <FormattedMessage {...messages.accessCourse} />
-          </Button>
-        ) : (
+      {selected ? (
+        SHOW_ACCESS_COURSE_PRIORITIES.includes(courseRun.state.priority) && (
+          <div>
+            <Button
+              color="secondary"
+              size="small"
+              href={courseRun.resource_link}
+              data-testid="dashboard-item-enrollment__button"
+              className="dashboard-item__button"
+            >
+              <FormattedMessage {...messages.accessCourse} />
+            </Button>
+          </div>
+        )
+      ) : (
+        <div>
           <Button
             disabled={!isOpenedForEnrollment || haveToSignContract}
             color="tertiary"
@@ -277,8 +271,8 @@ export const DashboardItemCourseEnrollingRun = ({
           >
             <FormattedMessage {...messages.enrollRun} />
           </Button>
-        )}
-      </div>
+        </div>
+      )}
     </div>
   );
 };
@@ -313,7 +307,7 @@ const NotEnrolled = ({
   );
 };
 
-const SHOW_ACCESS_COURSE_PRIORITIES = [
+export const SHOW_ACCESS_COURSE_PRIORITIES = [
   Priority.ONGOING_OPEN,
   Priority.ARCHIVED_OPEN,
   Priority.ONGOING_CLOSED,
@@ -327,11 +321,16 @@ export const Enrolled = ({
   icon?: boolean;
   enrollment: Enrollment;
 }) => {
+  const courseRunPeriodMessage = useCourseRunPeriodMessage(enrollment.course_run, true);
   return (
     <>
       <div className="dashboard-item__block__status">
         {icon && <Icon name={IconTypeEnum.SCHOOL} />}
-        <EnrolledStatus enrollment={enrollment} />
+        {enrollment.is_active ? (
+          courseRunPeriodMessage
+        ) : (
+          <FormattedMessage {...messages.statusNotActive} />
+        )}
       </div>
       {SHOW_ACCESS_COURSE_PRIORITIES.includes(enrollment.course_run.state.priority) && (
         <Button
@@ -347,21 +346,3 @@ export const Enrolled = ({
     </>
   );
 };
-
-const EnrolledStatus = ({ enrollment }: { enrollment: Enrollment }) => {
-  const formatDate = useDateFormat();
-
-  if (!enrollment.is_active) {
-    return <FormattedMessage {...messages.statusNotActive} />;
-  }
-
-  return (
-    <FormattedMessage
-      {...messages.enrolledRunPeriod}
-      values={{
-        startDate: formatDate(enrollment.course_run.start, DEFAULT_DATE_FORMAT),
-        endDate: formatDate(enrollment.course_run.end, DEFAULT_DATE_FORMAT),
-      }}
-    />
-  );
-};

package/js/widgets/Dashboard/components/DashboardItem/Enrollment/DashboardItemEnrollment.spec.tsx

@@ -51,16 +51,13 @@ describe('<DashboardItemEnrollment/>', () => {
     expect(link).toBeEnabled();
     expect(link).toHaveAttribute('href', enrollment.course_run.resource_link);
 
-    screen.getByText(
-      'You are enrolled for the session from ' +
-        new Intl.DateTimeFormat('en', DEFAULT_DATE_FORMAT).format(
-          new Date(enrollment.course_run.start),
-        ) +
-        ' to ' +
-        new Intl.DateTimeFormat('en', DEFAULT_DATE_FORMAT).format(
-          new Date(enrollment.course_run.end),
-        ),
+    const fromDate = new Intl.DateTimeFormat('en', DEFAULT_DATE_FORMAT).format(
+      new Date(enrollment.course_run.start),
     );
+    const toDate = new Intl.DateTimeFormat('en', DEFAULT_DATE_FORMAT).format(
+      new Date(enrollment.course_run.end),
+    );
+    screen.getByText(`You are enrolled for this session. It's open from ${fromDate} to ${toDate}`);
   });
 
   it('renders a closed enrollment', () => {
@@ -80,16 +77,7 @@ describe('<DashboardItemEnrollment/>', () => {
     const link = screen.getByRole('link', { name: 'Access to course' });
     expect(link).toBeEnabled();
     expect(link).toHaveAttribute('href', enrollment.course_run.resource_link);
-    screen.getByText(
-      'You are enrolled for the session from ' +
-        new Intl.DateTimeFormat('en', DEFAULT_DATE_FORMAT).format(
-          new Date(enrollment.course_run.start),
-        ) +
-        ' to ' +
-        new Intl.DateTimeFormat('en', DEFAULT_DATE_FORMAT).format(
-          new Date(enrollment.course_run.end),
-        ),
-    );
+    expect(screen.getByText(/You are enrolled for this session./)).toBeInTheDocument();
   });
 
   it('renders an inactive enrollment', () => {

package/js/widgets/Dashboard/components/DashboardItem/Enrollment/DashboardItemEnrollment.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { Enrollment, isCertificateProduct } from 'types/Joanie';
-import { Enrolled } from '../DashboardItemCourseEnrolling';
+import { Enrolled } from '../CourseEnrolling';
 import { DashboardItem } from '..';
 import ProductCertificateFooter from './ProductCertificateFooter';
 

package/js/widgets/Dashboard/components/DashboardItem/Order/DashboardItemOrder.spec.tsx

@@ -16,7 +16,10 @@ import { PropsWithChildren } from 'react';
 import fetchMock from 'fetch-mock';
 import { createMemoryRouter, RouterProvider } from 'react-router-dom';
 import { DEFAULT_DATE_FORMAT } from 'hooks/useDateFormat';
-import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import {
+  CourseStateFactory,
+  RichieContextFactory as mockRichieContextFactory,
+} from 'utils/test/factories/richie';
 import {
   CertificateFactory,
   CourseLightFactory,
@@ -213,18 +216,19 @@ describe('<DashboardItemOrder/>', () => {
     await screen.findByRole('heading', { level: 5, name: product.title });
     await screen.findByText('Ref. ' + (order.course as CourseLight).code);
     await screen.findByText('On going');
+    const fromDate = new Intl.DateTimeFormat('en', DEFAULT_DATE_FORMAT).format(
+      new Date(order.target_enrollments[0].course_run.start),
+    );
+    const toDate = new Intl.DateTimeFormat('en', DEFAULT_DATE_FORMAT).format(
+      new Date(order.target_enrollments[0].course_run.end),
+    );
     await resolveAll(order.target_courses, async (course) => {
       await screen.findByRole('heading', { level: 6, name: course.title });
-      screen.getByText(
-        'You are enrolled for the session from ' +
-          new Intl.DateTimeFormat('en', DEFAULT_DATE_FORMAT).format(
-            new Date(order.target_enrollments[0].course_run.start),
-          ) +
-          ' to ' +
-          new Intl.DateTimeFormat('en', DEFAULT_DATE_FORMAT).format(
-            new Date(order.target_enrollments[0].course_run.end),
-          ),
-      );
+      expect(
+        screen.getByText(
+          `You are enrolled for this session. It's open from ${fromDate} to ${toDate}`,
+        ),
+      ).toBeInTheDocument();
       screen.getByRole('link', { name: 'Access to course' });
     });
   });
@@ -269,7 +273,15 @@ describe('<DashboardItemOrder/>', () => {
 
   it('renders a writable order with enrolled target course', async () => {
     const order: CredentialOrder = CredentialOrderFactory({
-      target_courses: TargetCourseFactory().many(1),
+      target_courses: [
+        TargetCourseFactory({
+          course_runs: [
+            CourseRunFactory({
+              state: CourseStateFactory({ priority: Priority.ONGOING_OPEN }).one(),
+            }).one(),
+          ],
+        }).one(),
+      ],
     }).one();
     // Make target course enrolled.
     order.target_enrollments = [
@@ -297,13 +309,17 @@ describe('<DashboardItemOrder/>', () => {
         // Expect the first courseRun to be enrolled but not the others.
         if (i === 0) {
           expect(queryByRole(runElement, 'button', { name: 'Enroll' })).toBeNull();
-          getByText(
-            runElement,
-            'You are enrolled for the session from ' +
-              new Intl.DateTimeFormat('en', DEFAULT_DATE_FORMAT).format(new Date(courseRun.start)) +
-              ' to ' +
-              new Intl.DateTimeFormat('en', DEFAULT_DATE_FORMAT).format(new Date(courseRun.end)),
+          const fromDate = new Intl.DateTimeFormat('en', DEFAULT_DATE_FORMAT).format(
+            new Date(courseRun.start),
           );
+          const toDate = new Intl.DateTimeFormat('en', DEFAULT_DATE_FORMAT).format(
+            new Date(courseRun.end),
+          );
+          expect(
+            screen.getByText(
+              `You are enrolled for this session. It's open from ${fromDate} to ${toDate}`,
+            ),
+          ).toBeInTheDocument();
           const button = getByRole(runElement, 'link', { name: 'Access to course' });
           expect(button).toHaveAttribute('href', courseRun.resource_link);
         } else {
@@ -323,7 +339,15 @@ describe('<DashboardItemOrder/>', () => {
   it('renders a writable order with not enrolled target course and enrolls it', async () => {
     // Initial order without enrollment.
     const order: CredentialOrder = CredentialOrderFactory({
-      target_courses: TargetCourseFactory().many(1),
+      target_courses: [
+        TargetCourseFactory({
+          course_runs: [
+            CourseRunFactory({
+              state: CourseStateFactory({ priority: Priority.ONGOING_OPEN }).one(),
+            }).one(),
+          ],
+        }).one(),
+      ],
       target_enrollments: [],
     }).one();
     const { product } = mockCourseProductWithOrder(order);
@@ -451,7 +475,16 @@ describe('<DashboardItemOrder/>', () => {
   it('renders a writable order with enrolled target course and changes the enrollment', async () => {
     // Initial order with first course run enrolled.
     const order: CredentialOrder = CredentialOrderFactory({
-      target_courses: TargetCourseFactory().many(1),
+      target_courses: [
+        TargetCourseFactory({
+          course_runs: [
+            CourseRunFactory().one(),
+            CourseRunFactory({
+              state: CourseStateFactory({ priority: Priority.ONGOING_OPEN }).one(),
+            }).one(),
+          ],
+        }).one(),
+      ],
     }).one();
     const initialEnrolledCourseRun = order.target_courses[0].course_runs[0];
     order.target_enrollments = EnrollmentFactory({ course_run: initialEnrolledCourseRun }).many(1);
@@ -550,7 +583,16 @@ describe('<DashboardItemOrder/>', () => {
   it('renders a writable order with enrolled target course and refuse the confirm message when enrolling', async () => {
     // Initial order without enrollment.
     const order: CredentialOrder = CredentialOrderFactory({
-      target_courses: TargetCourseFactory().many(1),
+      target_courses: [
+        TargetCourseFactory({
+          course_runs: [
+            CourseRunFactory({
+              state: CourseStateFactory({ priority: Priority.ONGOING_OPEN }).one(),
+            }).one(),
+            CourseRunFactory().one(),
+          ],
+        }).one(),
+      ],
     }).one();
 
     const initialEnrolledCourseRun = order.target_courses[0].course_runs[0];
@@ -620,11 +662,20 @@ describe('<DashboardItemOrder/>', () => {
   it('renders a writable order with non-enrolled (is_active=false) target course and changes the enrollment', async () => {
     // Initial order with first course run enrolled.
     const order: CredentialOrder = CredentialOrderFactory({
-      target_courses: TargetCourseFactory().many(1),
+      target_courses: TargetCourseFactory({
+        course_runs: [
+          CourseRunFactory({
+            state: CourseStateFactory({ priority: Priority.ONGOING_OPEN }).one(),
+          }).one(),
+        ],
+      }).many(1),
     }).one();
 
     const courseRun = order.target_courses[0].course_runs[0];
-    const enrollment = EnrollmentFactory({ course_run: courseRun, is_active: false }).one();
+    const enrollment = EnrollmentFactory({
+      course_run: courseRun,
+      is_active: false,
+    }).one();
     order.target_enrollments = [enrollment];
 
     // When the existing enrollment will be set as is_active: true.
@@ -725,6 +776,7 @@ describe('<DashboardItemOrder/>', () => {
         new Intl.DateTimeFormat('en', DEFAULT_DATE_FORMAT).format(
           new Date(order.target_courses[0].course_runs[0].enrollment_start),
         ),
+      { exact: false },
     );
 
     // Enroll button should be disabled.
@@ -759,7 +811,7 @@ describe('<DashboardItemOrder/>', () => {
 
     // The course run should be shown as enrolled even if is it past.
     const runElement = screen.getByTestId('dashboard-item__course-enrolling__run__' + courseRun.id);
-    getByRole(runElement, 'link', { name: 'Access to course' });
+    expect(screen.queryByRole('link', { name: 'Access to course' })).not.toBeInTheDocument();
     expect(queryByRole(runElement, 'button', { name: 'Enroll' })).toBeNull();
   });
 

package/js/widgets/Dashboard/components/DashboardItem/Order/DashboardItemOrder.tsx

@@ -13,7 +13,7 @@ import { useCourseProduct } from 'hooks/useCourseProducts';
 import { orderNeedsSignature } from 'widgets/Dashboard/components/DashboardItem/utils/order';
 
 import { DashboardSubItemsList } from '../DashboardSubItemsList';
-import { DashboardItemCourseEnrolling } from '../DashboardItemCourseEnrolling';
+import { DashboardItemCourseEnrolling } from '../CourseEnrolling';
 import { DashboardItem } from '../index';
 import { DashboardItemContract } from '../Contract';
 import OrderStateMessage from './OrderStateMessage';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "2.25.0-b2.dev69",
+  "version": "2.25.0-b2.dev71",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {