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

package/js/api/joanie.ts

@@ -23,13 +23,21 @@ interface CheckStatusOptions {
   ignoredErrorStatus: (number | HttpStatusCode)[];
 }
 
+export async function getFileFromResponse(response: Response): Promise<File> {
+  const filenameRegex = /filename="(.*)";/;
+  const dispositionHeader = response.headers.get('Content-Disposition');
+  const matches = dispositionHeader?.match(filenameRegex);
+
+  return new File([await response.blob()], matches ? matches[1] : '');
+}
+
 export function getResponseBody(response: Response) {
   if (response.headers.get('Content-Type') === 'application/json') {
     return response.json();
   }
   const fileType = ['application/pdf', 'application/zip'];
   if (fileType.includes(response.headers.get('Content-Type') || '')) {
-    return response.blob();
+    return new Promise((resolve) => resolve(response));
   }
   return response.text();
 }
@@ -321,7 +329,7 @@ const API = (): Joanie.API => {
             let url = ROUTES.user.orders.invoice.download.replace(':id', order_id);
             url += `?${queryString.stringify({ reference: invoice_reference })}`;
 
-            return fetchWithJWT(url).then(checkStatus);
+            return fetchWithJWT(url).then(checkStatus).then(getFileFromResponse);
           },
         },
         submit_for_signature: async (id) =>
@@ -346,7 +354,9 @@ const API = (): Joanie.API => {
       },
       certificates: {
         download: async (id: string): Promise<File> =>
-          fetchWithJWT(ROUTES.user.certificates.download.replace(':id', id)).then(checkStatus),
+          fetchWithJWT(ROUTES.user.certificates.download.replace(':id', id))
+            .then(checkStatus)
+            .then(getFileFromResponse),
         get: async (filters) => {
           return fetchWithJWT(buildApiUrl(ROUTES.user.certificates.get, filters)).then(checkStatus);
         },
@@ -382,7 +392,9 @@ const API = (): Joanie.API => {
         download(id: string): Promise<any> {
           return fetchWithJWT(ROUTES.user.contracts.download.replace(':id', id), {
             method: 'GET',
-          }).then(checkStatus);
+          })
+            .then(checkStatus)
+            .then(getFileFromResponse);
         },
         zip_archive: {
           check: async (id) => {
@@ -399,7 +411,9 @@ const API = (): Joanie.API => {
           get: async (id) => {
             return fetchWithJWT(ROUTES.user.contracts.zip_archive.get.replace(':id', id), {
               method: 'GET',
-            }).then(checkStatus);
+            })
+              .then(checkStatus)
+              .then(getFileFromResponse);
           },
         },
       },

package/js/components/DownloadContractButton/index.spec.tsx

@@ -10,6 +10,7 @@ import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/fac
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import JoanieApiProvider from 'contexts/JoanieApiContext';
 import { alert } from 'utils/indirection/window';
+import { HttpStatusCode } from 'utils/errors/HttpError';
 import DownloadContractButton from '.';
 
 jest.mock('utils/context', () => ({
@@ -65,7 +66,16 @@ describe('<DownloadContractButton/>', () => {
     const DOWNLOAD_URL = `https://joanie.endpoint/api/v1.0/contracts/${
       order.contract!.id
     }/download/`;
-    fetchMock.get(DOWNLOAD_URL, 'contract content');
+
+    fetchMock.get(DOWNLOAD_URL, () => ({
+      status: HttpStatusCode.OK,
+      body: new Blob(['contract content']),
+      headers: {
+        'Content-Disposition': 'attachment; filename="test.pdf";',
+        'Content-Type': 'application/pdf',
+      },
+    }));
+    const expectedFile = new File(['contract content'], 'test.pdf');
 
     render(
       <Wrapper>
@@ -88,9 +98,9 @@ describe('<DownloadContractButton/>', () => {
     // eslint-disable-next-line compat/compat
     expect(URL.createObjectURL).toHaveBeenCalledTimes(1);
     // eslint-disable-next-line compat/compat
-    expect(URL.createObjectURL).toHaveBeenCalledWith('contract content');
+    expect(URL.createObjectURL).toHaveBeenCalledWith(expectedFile);
     expect(window.open).toHaveBeenCalledTimes(1);
-    expect(window.open).toHaveBeenCalledWith('contract content');
+    expect(window.open).toHaveBeenCalledWith(expectedFile);
   });
 
   it('fails downloading the contract and shows an error', async () => {
@@ -109,7 +119,10 @@ describe('<DownloadContractButton/>', () => {
     const DOWNLOAD_URL = `https://joanie.endpoint/api/v1.0/contracts/${
       order.contract!.id
     }/download/`;
-    fetchMock.get(DOWNLOAD_URL, 500);
+    fetchMock.get(DOWNLOAD_URL, {
+      status: HttpStatusCode.INTERNAL_SERVER_ERROR,
+      body: 'Bad request',
+    });
 
     render(
       <Wrapper>

package/js/components/DownloadContractButton/index.tsx

@@ -1,9 +1,9 @@
 import { Button } from '@openfun/cunningham-react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { useJoanieApi } from 'contexts/JoanieApiContext';
-import { handle } from 'utils/errors/handle';
 import { Contract } from 'types/Joanie';
 import { alert } from 'utils/indirection/window';
+import { browserDownloadFromBlob } from 'utils/download';
 
 const messages = defineMessages({
   contractDownloadActionLabel: {
@@ -29,16 +29,11 @@ const DownloadContractButton = ({ contract, className }: DownloadContractButtonP
   const intl = useIntl();
 
   const downloadContract = async () => {
-    try {
-      const blob = await api.user.contracts.download(contract!.id);
-      // eslint-disable-next-line compat/compat
-      const file = window.URL.createObjectURL(blob);
-      window.open(file);
-
-      // eslint-disable-next-line compat/compat
-      URL.revokeObjectURL(file);
-    } catch (e) {
-      handle(e);
+    const success = await browserDownloadFromBlob(
+      () => api.user.contracts.download(contract!.id),
+      true,
+    );
+    if (!success) {
       alert(intl.formatMessage(messages.contractDownloadError));
     }
   };

package/js/hooks/useContractArchive/index.download.spec.tsx

@@ -71,7 +71,14 @@ describe('useContractArchive', () => {
     expect(URL.revokeObjectURL).toHaveBeenCalledTimes(0);
 
     result.current.methods.get(archiveId);
-    deferred.resolve(HttpStatusCode.OK);
+    deferred.resolve({
+      status: HttpStatusCode.OK,
+      body: new Blob(['test']),
+      headers: {
+        'Content-Disposition': 'attachment; filename="test.pdf";',
+        'Content-Type': 'application/pdf',
+      },
+    });
 
     await waitFor(() => {
       expect(fetchMock.called(DOWNLOAD_URL)).toBe(true);

package/js/hooks/useContractArchive/index.ts

@@ -1,4 +1,5 @@
 import { useJoanieApi } from 'contexts/JoanieApiContext';
+import { browserDownloadFromBlob } from 'utils/download';
 import { HttpStatusCode } from 'utils/errors/HttpError';
 import { handle } from 'utils/errors/handle';
 
@@ -17,25 +18,6 @@ const extractArchiveId = (url: string): string => {
   return match[0];
 };
 
-// TODO: should be factorized with useDownloadCertificate
-// and maybe DownloadContractButton
-const buildArchiveFromBlob = (fileName: string, blob: Blob) => {
-  // eslint-disable-next-line compat/compat
-  const url = URL.createObjectURL(blob);
-  const $link = document.createElement('a');
-  $link.href = url;
-  $link.download = fileName;
-
-  const revokeObject = () => {
-    // eslint-disable-next-line compat/compat
-    URL.revokeObjectURL(url);
-    window.removeEventListener('blur', revokeObject);
-  };
-
-  window.addEventListener('blur', revokeObject);
-  $link.click();
-};
-
 const useContractArchive = () => {
   const api = useJoanieApi();
   return {
@@ -57,17 +39,16 @@ const useContractArchive = () => {
         return false;
       },
       get: async (archiveId: string): Promise<true | void> => {
-        try {
-          const response = api.user.contracts.zip_archive.get(archiveId);
-          buildArchiveFromBlob('contracts.zip', await response);
-          return true;
-        } catch (error) {
-          handle(error);
-        }
-
         // FIXME: two thing could happen here with HttpStatusCode.NOT_FOUND response:
         // * nothing found because the zip is generating.
         // * nothing found because the zip doesn't and will never exist.
+        const success = await browserDownloadFromBlob(() =>
+          api.user.contracts.zip_archive.get(archiveId),
+        );
+
+        if (success) {
+          return true;
+        }
       },
       create: async (organizationId: string): Promise<string> => {
         const response = await api.user.contracts.zip_archive.create({

package/js/hooks/useDownloadCertificate/index.spec.tsx

@@ -2,7 +2,7 @@ import fetchMock from 'fetch-mock';
 import { PropsWithChildren } from 'react';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { IntlProvider } from 'react-intl';
-import { fireEvent, renderHook, waitFor } from '@testing-library/react';
+import { act, fireEvent, renderHook, waitFor } from '@testing-library/react';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { useDownloadCertificate } from 'hooks/useDownloadCertificate/index';
@@ -72,9 +72,19 @@ describe('useDownloadCertificate', () => {
     expect(URL.revokeObjectURL).toHaveBeenCalledTimes(0);
     expect(result.current.loading).toBe(false);
 
-    result.current.download(certificate.id);
-    await waitFor(() => expect(result.current.loading).toBe(true));
-    deferred.resolve(HttpStatusCode.OK);
+    act(() => {
+      result.current.download(certificate.id);
+    });
+    expect(result.current.loading).toBe(true);
+
+    deferred.resolve({
+      status: HttpStatusCode.OK,
+      body: new Blob(['test']),
+      headers: {
+        'Content-Disposition': 'attachment; filename="test.pdf";',
+        'Content-Type': 'application/pdf',
+      },
+    });
 
     await waitFor(() => {
       expect(fetchMock.called(DOWNLOAD_URL)).toBe(true);
@@ -109,7 +119,9 @@ describe('useDownloadCertificate', () => {
     // eslint-disable-next-line compat/compat
     expect(URL.revokeObjectURL).toHaveBeenCalledTimes(0);
 
-    await result.current.download(certificate.id);
+    act(() => {
+      result.current.download(certificate.id);
+    });
 
     await waitFor(() => {
       expect(fetchMock.called(DOWNLOAD_URL)).toBe(true);

package/js/hooks/useDownloadCertificate/index.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
-import { handle } from 'utils/errors/handle';
 import { useJoanieApi } from 'contexts/JoanieApiContext';
+import { browserDownloadFromBlob } from 'utils/download';
 
 export const useDownloadCertificate = () => {
   const [loading, setLoading] = useState(false);
@@ -9,25 +9,7 @@ export const useDownloadCertificate = () => {
   return {
     download: async (certificateId: string) => {
       setLoading(true);
-      try {
-        const $link = document.createElement('a');
-        const file = await API.user.certificates.download(certificateId);
-        // eslint-disable-next-line compat/compat
-        const url = URL.createObjectURL(file);
-        $link.href = url;
-        $link.download = '';
-
-        const revokeObject = () => {
-          // eslint-disable-next-line compat/compat
-          URL.revokeObjectURL(url);
-          window.removeEventListener('blur', revokeObject);
-        };
-
-        window.addEventListener('blur', revokeObject);
-        $link.click();
-      } catch (error) {
-        handle(error);
-      }
+      await browserDownloadFromBlob(() => API.user.certificates.download(certificateId));
       setLoading(false);
     },
     loading,

package/js/utils/download.ts

@@ -0,0 +1,43 @@
+import { handle } from './errors/handle';
+
+/**
+ * browserDownloadFromBlob handle direct download of a file api response.
+ *
+ * @param downloadFunction, an api promise that return a File
+ * @param newWindow, does it open in a new window or not
+ * @returns boolean, true for success
+ */
+export const browserDownloadFromBlob = async (
+  downloadFunction: () => Promise<File>,
+  newWindow: boolean = false,
+) => {
+  try {
+    const file = await downloadFunction();
+
+    // eslint-disable-next-line compat/compat
+    const url = URL.createObjectURL(file);
+
+    if (newWindow) {
+      window.open(url);
+      return;
+    }
+
+    const $link = document.createElement('a');
+    $link.href = url;
+    $link.download = file.name;
+
+    const revokeObject = () => {
+      // eslint-disable-next-line compat/compat
+      URL.revokeObjectURL(url);
+      window.removeEventListener('blur', revokeObject);
+    };
+
+    window.addEventListener('blur', revokeObject);
+    $link.click();
+    return true;
+  } catch (error) {
+    handle(error);
+  }
+
+  return false;
+};

package/js/widgets/Dashboard/components/DashboardItem/Certificate/index.spec.tsx

@@ -48,9 +48,13 @@ describe.each([
   beforeAll(() => {
     // eslint-disable-next-line compat/compat
     URL.createObjectURL = jest.fn();
+    // eslint-disable-next-line compat/compat
+    URL.revokeObjectURL = jest.fn();
+    HTMLAnchorElement.prototype.click = jest.fn();
   });
 
   beforeEach(() => {
+    // SessionProvider queries
     fetchMock.get('https://joanie.test/api/v1.0/orders/', []);
     fetchMock.get('https://joanie.test/api/v1.0/addresses/', []);
     fetchMock.get('https://joanie.test/api/v1.0/credit-cards/', []);
@@ -88,10 +92,14 @@ describe.each([
       order: OrderFactory().one(),
     }).one();
 
-    fetchMock.get(
-      `https://joanie.test/api/v1.0/certificates/${certificate.id}/download/`,
-      HttpStatusCode.OK,
-    );
+    fetchMock.get(`https://joanie.test/api/v1.0/certificates/${certificate.id}/download/`, () => ({
+      status: HttpStatusCode.OK,
+      body: new Blob(['test']),
+      headers: {
+        'Content-Disposition': 'attachment; filename="test.pdf";',
+        'Content-Type': 'application/pdf',
+      },
+    }));
 
     render(
       <DashboardItemCertificate certificate={certificate} productType={ProductType.CREDENTIAL} />,

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/js/widgets/SyllabusCourseRunsList/components/CourseProductItem/components/CourseProductCertificateItem/index.spec.tsx

@@ -91,7 +91,14 @@ describe('CourseProductCertificateItem', () => {
     // When user clicks on "Download" button, the certificate should be downloaded
     fetchMock.get(
       `https://joanie.test/api/v1.0/certificates/${order.certificate_id}/download/`,
-      HttpStatusCode.OK,
+      () => ({
+        status: HttpStatusCode.OK,
+        body: new Blob(['test']),
+        headers: {
+          'Content-Disposition': 'attachment; filename="test.pdf";',
+          'Content-Type': 'application/pdf',
+        },
+      }),
     );
 
     fireEvent.click($button);

package/package.json

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