richie 2.25.0b2.dev68__py2.py3-none-any.whl → 2.25.0b2.dev71__py2.py3-none-any.whl

frontend/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);
           },
         },
       },

frontend/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>

frontend/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));
     }
   };

frontend/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);

frontend/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({

frontend/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);

frontend/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,

frontend/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;
+};

frontend/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} />,

frontend/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;

frontend/js/widgets/Dashboard/components/DashboardItem/CourseEnrolling/index.spec.tsx

@@ -0,0 +1,158 @@
+import { render, screen } from '@testing-library/react';
+import { IntlProvider, createIntl } from 'react-intl';
+import { PropsWithChildren } from 'react';
+import { CredentialOrderFactory, EnrollmentFactory } from 'utils/test/factories/joanie';
+import { Priority } from 'types';
+import { CourseRun, Enrollment } from 'types/Joanie';
+import { DEFAULT_DATE_FORMAT } from 'hooks/useDateFormat';
+import { CourseRunFactoryFromPriority } from 'utils/test/factories/richie';
+import { noop } from 'utils';
+import { computeState } from 'utils/CourseRuns';
+import { formatRelativeDate } from 'utils/relativeDate';
+import { DashboardItemCourseEnrollingRun, Enrolled } from '.';
+
+/**
+ * Most of the component of this file are tested from DashboardItemEnrollment.spec.tsx and
+ * DashboardItemOrder.spec.tsx. But here are some tests that are more straightforward.
+ */
+describe('<Enrolled/>', () => {
+  const wrapper = ({ children }: PropsWithChildren) => {
+    return <IntlProvider locale="en">{children}</IntlProvider>;
+  };
+
+  it.each([
+    {
+      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=$priorityLabel $buttonTestLabel',
+    async ({ priority, expectButton, expectLabelTemplate }) => {
+      const enrollment: Enrollment = EnrollmentFactory().one();
+      enrollment.course_run.state.priority = priority;
+      render(<Enrolled enrollment={enrollment} />, { wrapper });
+      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();
+        expect(link).toHaveAttribute('href', enrollment.course_run.resource_link);
+      } else {
+        expect(screen.queryByRole('link', { name: 'Access to course' })).toBeNull();
+      }
+    },
+  );
+});
+
+describe('<DashboardItemCourseEnrollingRun/>', () => {
+  it.each([
+    [Priority.ONGOING_OPEN, false],
+    [Priority.FUTURE_OPEN, false],
+    [Priority.ARCHIVED_OPEN, false],
+    [Priority.FUTURE_NOT_YET_OPEN, true],
+    [Priority.FUTURE_CLOSED, false],
+    [Priority.ONGOING_CLOSED, false],
+    [Priority.ARCHIVED_CLOSED, false],
+    [Priority.TO_BE_SCHEDULED, false],
+  ])(
+    `handles correctly enrollment_start date displaying with priority=%s`,
+    async (priority, expectEnrollmentNotYetOpened) => {
+      const order = CredentialOrderFactory().one();
+      const courseRun = CourseRunFactoryFromPriority(priority)().one();
+      courseRun.state = computeState(courseRun);
+      const joanieCourseRun = courseRun as unknown as CourseRun;
+      joanieCourseRun.course = order.course;
+
+      render(
+        <IntlProvider locale="en">
+          <DashboardItemCourseEnrollingRun
+            order={order}
+            courseRun={joanieCourseRun}
+            selected={false}
+            enroll={noop}
+          />
+        </IntlProvider>,
+      );
+
+      if (expectEnrollmentNotYetOpened) {
+        screen.getByText(/Enrollment will open on/);
+      } else {
+        expect(screen.queryByText(/Enrollment will open on/)).not.toBeInTheDocument();
+      }
+    },
+  );
+});

frontend/js/widgets/Dashboard/components/DashboardItem/CourseEnrolling/index.stories.tsx

@@ -0,0 +1,72 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { createMemoryRouter, RouterProvider } from 'react-router-dom';
+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 '.';
+
+export default {
+  component: DashboardItemCourseEnrolling,
+  parameters: {
+    docs: {
+      source: {
+        code: 'Disabled for this story, see https://github.com/storybookjs/storybook/issues/11554',
+      },
+    },
+  },
+  render: (args) =>
+    StorybookHelper.wrapInApp(
+      <RouterProvider
+        router={createMemoryRouter([
+          {
+            index: true,
+            element: (
+              <div className="dashboard-item__block__footer">
+                <DashboardItemCourseEnrolling {...args} />
+              </div>
+            ),
+          },
+        ])}
+      />,
+    ),
+} as Meta<typeof DashboardItemCourseEnrolling>;
+
+type Story = StoryObj<typeof DashboardItemCourseEnrolling>;
+
+// Readonly
+
+export const ReadonlyEnrolledOpened: Story = {
+  args: {
+    course: TargetCourseFactory().one(),
+    activeEnrollment: {
+      ...enrollment,
+      course_run: {
+        ...enrollment.course_run,
+        end: faker.date.future({ years: 1 }).toISOString(),
+        state: { ...enrollment.course_run.state, priority: Priority.FUTURE_NOT_YET_OPEN },
+      },
+    },
+  },
+};
+
+export const ReadonlyEnrolledClosed: Story = {
+  args: {
+    course: TargetCourseFactory().one(),
+    activeEnrollment: {
+      ...enrollment,
+      course_run: {
+        ...enrollment.course_run,
+        end: faker.date.past({ years: 1 }).toISOString(),
+        state: { ...enrollment.course_run.state, priority: Priority.FUTURE_CLOSED },
+      },
+    },
+  },
+};
+
+export const ReadonlyNotEnrolled: Story = {
+  args: {
+    course: TargetCourseFactory().one(),
+  },
+};