richie 2.25.0b2.dev103__py2.py3-none-any.whl → 2.25.0b2.dev111__py2.py3-none-any.whl

frontend/js/pages/TeacherDashboardCourseLearnersLayout/index.spec.tsx

@@ -0,0 +1,385 @@
+import fetchMock from 'fetch-mock';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import queryString from 'query-string';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import {
+  CourseProductRelationFactory,
+  NestedCourseOrderFactory,
+  OrganizationFactory,
+} from 'utils/test/factories/joanie';
+import { expectNoSpinner } from 'utils/test/expectSpinner';
+import { PER_PAGE } from 'settings';
+import { HttpStatusCode } from 'utils/errors/HttpError';
+import { expectBannerError } from 'utils/test/expectBanner';
+import { render } from 'utils/test/render';
+import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
+import { TeacherDashboardCourseLearnersLayout } from '.';
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: { backend: 'fonzie', endpoint: 'https://auth.endpoint.test' },
+    joanie_backend: { endpoint: 'https://joanie.endpoint' },
+  }).one(),
+}));
+
+describe('pages/TeacherDashboardCourseLearnersLayout', () => {
+  setupJoanieSession();
+  beforeEach(() => {
+    // CourseSidebar api calls
+    fetchMock.get('https://joanie.endpoint/api/v1.0/courses/', {});
+    fetchMock.get('https://joanie.endpoint/api/v1.0/organizations/', []);
+  });
+
+  it.each([
+    {
+      expectedLabel: 'should not render organization filter without organizations',
+      nbOrganization: 0,
+      organizationFilterShouldBeDisplayed: false,
+    },
+    {
+      expectedLabel: 'should not render organization filter with 1 organization',
+      nbOrganization: 1,
+      organizationFilterShouldBeDisplayed: false,
+    },
+    {
+      expectedLabel: 'should render organization filter with 2 organization',
+      nbOrganization: 2,
+      organizationFilterShouldBeDisplayed: true,
+    },
+  ])('$expectedLabel', async ({ nbOrganization, organizationFilterShouldBeDisplayed }) => {
+    const courseProductRelation = CourseProductRelationFactory().one();
+    const organizationList = OrganizationFactory().many(nbOrganization);
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/?course_product_relation_id=${courseProductRelation.id}`,
+      organizationList,
+    );
+
+    // Course sidebar query
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/course-product-relations/${courseProductRelation.id}/`,
+      {},
+    );
+
+    // First request before finding default organizationId
+    const courseOrderListQueryParams = {
+      course_product_relation_id: courseProductRelation.id,
+      page: 1,
+      page_size: PER_PAGE.courseLearnerList,
+    };
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/courses/${courseProductRelation.course.id}/orders/?${queryString.stringify(courseOrderListQueryParams, { sort: false })}`,
+      [],
+    );
+
+    if (organizationList.length > 0) {
+      // Course sidebar query
+      fetchMock.get(
+        `https://joanie.endpoint/api/v1.0/organizations/${organizationList[0].id}/contracts/?course_product_relation_id=${courseProductRelation.id}&signature_state=half_signed&page=1&page_size=${PER_PAGE.teacherContractList}`,
+        [],
+      );
+
+      // Second request when default organizationId is fetched
+      fetchMock.get(
+        `https://joanie.endpoint/api/v1.0/courses/${courseProductRelation.course.id}/orders/?${queryString.stringify({ organization_id: organizationList[0].id, ...courseOrderListQueryParams }, { sort: false })}`,
+        [],
+      );
+    }
+    render(<TeacherDashboardCourseLearnersLayout />, {
+      routerOptions: {
+        path: '/:courseId/:courseProductRelationId',
+        initialEntries: [`/${courseProductRelation.course.id}/${courseProductRelation.id}`],
+      },
+    });
+
+    await expectNoSpinner();
+    if (organizationFilterShouldBeDisplayed) {
+      expect(
+        await screen.findByRole('combobox', {
+          name: /Organization/,
+          hidden: true,
+        }),
+      ).toBeInTheDocument();
+    } else {
+      expect(
+        screen.queryByRole('combobox', {
+          name: /Organization/,
+          hidden: true,
+        }),
+      ).not.toBeInTheDocument();
+    }
+  });
+
+  it('should call onFiltersChange on organization filter change', async () => {
+    const courseProductRelation = CourseProductRelationFactory().one();
+    const defaultOrganization = OrganizationFactory().one();
+    const otherOrganization = OrganizationFactory().one();
+    const organizationList = [defaultOrganization, otherOrganization];
+
+    // Course sidebar queries
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/${defaultOrganization.id}/contracts/?course_product_relation_id=${courseProductRelation.id}&signature_state=half_signed&page=1&page_size=${PER_PAGE.teacherContractList}`,
+      [],
+    );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/course-product-relations/${courseProductRelation.id}/`,
+      {},
+    );
+
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/?course_product_relation_id=${courseProductRelation.id}`,
+      organizationList,
+    );
+    // First request before finding default organizationId
+    const courseOrderListQueryParams = {
+      course_product_relation_id: courseProductRelation.id,
+      page: 1,
+      page_size: PER_PAGE.courseLearnerList,
+    };
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/courses/${courseProductRelation.course.id}/orders/?${queryString.stringify(courseOrderListQueryParams, { sort: false })}`,
+      [],
+    );
+    // Second request when default organizationId is fetched
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/courses/${courseProductRelation.course.id}/orders/?${queryString.stringify({ organization_id: defaultOrganization.id, ...courseOrderListQueryParams }, { sort: false })}`,
+      [],
+    );
+
+    render(<TeacherDashboardCourseLearnersLayout />, {
+      routerOptions: {
+        path: '/:courseId/:courseProductRelationId',
+        initialEntries: [`/${courseProductRelation.course.id}/${courseProductRelation.id}`],
+      },
+    });
+
+    const organizationFilter: HTMLInputElement = await screen.findByRole('combobox', {
+      name: 'Organization',
+      hidden: true,
+    });
+
+    const user = userEvent.setup();
+    await user.click(organizationFilter);
+    const optionToSelect = screen.getByRole('option', { name: organizationList[1].title });
+
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/courses/${courseProductRelation.course.id}/orders/?${queryString.stringify({ organization_id: otherOrganization.id, ...courseOrderListQueryParams }, { sort: false })}`,
+      [],
+    );
+    await user.click(optionToSelect);
+    // onload default value is undefine and is onFiltersChange called once
+    expect(
+      fetchMock.called(
+        `https://joanie.endpoint/api/v1.0/courses/${courseProductRelation.course.id}/orders/?${queryString.stringify({ organization_id: otherOrganization.id, ...courseOrderListQueryParams }, { sort: false })}`,
+      ),
+    ).toBe(true);
+  });
+
+  it('should render a list of course learners for a course product relation', async () => {
+    const defaultOrganization = OrganizationFactory().one();
+    const otherOrganization = OrganizationFactory().one();
+    const organizationList = [defaultOrganization, otherOrganization];
+    const courseProductRelation = CourseProductRelationFactory().one();
+    const courseOrderList = NestedCourseOrderFactory().many(3);
+    // https://joanie.endpoint/api/v1.0/organizations/?course_product_relation_id=d390d6a9-8437-4f92-8897-982e12f97259
+    // Course sidebar queries
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/${defaultOrganization.id}/contracts/?course_product_relation_id=${courseProductRelation.id}&signature_state=half_signed&page=1&page_size=${PER_PAGE.teacherContractList}`,
+      [],
+    );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/course-product-relations/${courseProductRelation.id}/`,
+      {},
+    );
+
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/?course_product_relation_id=${courseProductRelation.id}`,
+      organizationList,
+    );
+
+    // First request before finding default organizationId
+    const courseOrderListQueryParams = {
+      course_product_relation_id: courseProductRelation.id,
+      page: 1,
+      page_size: PER_PAGE.courseLearnerList,
+    };
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/courses/${courseProductRelation.course.id}/orders/?${queryString.stringify(courseOrderListQueryParams, { sort: false })}`,
+      courseOrderList,
+    );
+    // Second request when default organizationId is fetched
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/courses/${courseProductRelation.course.id}/orders/?${queryString.stringify({ organization_id: defaultOrganization.id, ...courseOrderListQueryParams }, { sort: false })}`,
+      courseOrderList,
+    );
+
+    render(<TeacherDashboardCourseLearnersLayout />, {
+      routerOptions: {
+        path: '/:courseId/:courseProductRelationId',
+        initialEntries: [`/${courseProductRelation.course.id}/${courseProductRelation.id}`],
+      },
+    });
+
+    await expectNoSpinner();
+
+    // Organization filter should have been rendered
+    const organizationFilter: HTMLInputElement = await screen.findByRole('combobox', {
+      name: 'Organization',
+    });
+    expect(organizationFilter).toHaveAttribute('value', '');
+
+    expect(screen.getByRole('table')).toBeInTheDocument();
+    // Table body should have been rendered with 3 rows (one per courseOrder)
+    // Table content is tested in CourseLearnerDataGrid
+    courseOrderList.forEach((courseOrder) => {
+      expect(screen.getByTestId(courseOrder.id)).toBeInTheDocument();
+    });
+  });
+
+  it('should render a list of course learners for an organization', async () => {
+    const organization = OrganizationFactory().one();
+    const courseProductRelation = CourseProductRelationFactory().one();
+    const courseOrderList = NestedCourseOrderFactory().many(3);
+
+    // Course sidebar queries
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/contracts/?course_product_relation_id=${courseProductRelation.id}&signature_state=half_signed&page=1&page_size=${PER_PAGE.teacherContractList}`,
+      [],
+    );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/course-product-relations/${courseProductRelation.id}/`,
+      {},
+    );
+
+    // before default organization's fetched, we query all organization to decide if we should display organization filter or not.
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/?course_product_relation_id=${courseProductRelation.id}`,
+      [organization],
+    );
+
+    const courseOrderListQueryParams = {
+      organization_id: organization.id,
+      course_product_relation_id: courseProductRelation.id,
+      page: 1,
+      page_size: PER_PAGE.courseLearnerList,
+    };
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/courses/${courseProductRelation.course.id}/orders/?${queryString.stringify(courseOrderListQueryParams, { sort: false })}`,
+      courseOrderList,
+    );
+
+    render(<TeacherDashboardCourseLearnersLayout />, {
+      routerOptions: {
+        path: '/:organizationId/:courseId/:courseProductRelationId',
+        initialEntries: [
+          `/${organization.id}/${courseProductRelation.course.id}/${courseProductRelation.id}`,
+        ],
+      },
+    });
+
+    await expectNoSpinner();
+
+    // Organization filter should not have been rendered
+    const organizationFilter = screen.queryByRole('combobox', { name: 'Organization' });
+    expect(organizationFilter).not.toBeInTheDocument();
+
+    expect(screen.getByRole('table')).toBeInTheDocument();
+    // Table body should have been rendered with 3 rows (one per courseOrder)
+    // Table content is tested in CourseLearnerDataGrid
+    courseOrderList.forEach((courseOrder) => {
+      expect(screen.getByTestId(courseOrder.id)).toBeInTheDocument();
+    });
+  });
+
+  it('should render an empty table if there are no course learners', async () => {
+    const organization = OrganizationFactory().one();
+    const courseProductRelation = CourseProductRelationFactory().one();
+
+    // Course sidebar queries
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/contracts/?course_product_relation_id=${courseProductRelation.id}&signature_state=half_signed&page=1&page_size=${PER_PAGE.teacherContractList}`,
+      [],
+    );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/course-product-relations/${courseProductRelation.id}/`,
+      {},
+    );
+
+    // before default organization's fetched, we query all organization to decide if we should display organization filter or not.
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/?course_product_relation_id=${courseProductRelation.id}`,
+      [organization],
+    );
+
+    const courseOrderListQueryParams = {
+      organization_id: organization.id,
+      course_product_relation_id: courseProductRelation.id,
+      page: 1,
+      page_size: PER_PAGE.courseLearnerList,
+    };
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/courses/${courseProductRelation.course.id}/orders/?${queryString.stringify(courseOrderListQueryParams, { sort: false })}`,
+      [],
+    );
+
+    render(<TeacherDashboardCourseLearnersLayout />, {
+      routerOptions: {
+        path: '/:organizationId/:courseId/:courseProductRelationId',
+        initialEntries: [
+          `/${organization.id}/${courseProductRelation.course.id}/${courseProductRelation.id}`,
+        ],
+      },
+    });
+
+    await expectNoSpinner();
+
+    // A message should have been rendered to inform the user that there are no contracts
+    screen.getByRole('img', { name: /illustration of an empty table/i });
+    screen.getByText(/this table is empty/i);
+  });
+
+  it('should render an error banner if an error occured during course learners fetching', async () => {
+    const organization = OrganizationFactory().one();
+    const courseProductRelation = CourseProductRelationFactory().one();
+
+    // Course sidebar queries
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/contracts/?course_product_relation_id=${courseProductRelation.id}&signature_state=half_signed&page=1&page_size=${PER_PAGE.teacherContractList}`,
+      [],
+    );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/course-product-relations/${courseProductRelation.id}/`,
+      {},
+    );
+
+    // before default organization's fetched, we query all organization to decide if we should display organization filter or not.
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/?course_product_relation_id=${courseProductRelation.id}`,
+      [organization],
+    );
+
+    const courseOrderListQueryParams = {
+      organization_id: organization.id,
+      course_product_relation_id: courseProductRelation.id,
+      page: 1,
+      page_size: PER_PAGE.courseLearnerList,
+    };
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/courses/${courseProductRelation.course.id}/orders/?${queryString.stringify(courseOrderListQueryParams, { sort: false })}`,
+      new Response('', { status: HttpStatusCode.NOT_FOUND }),
+    );
+
+    render(<TeacherDashboardCourseLearnersLayout />, {
+      routerOptions: {
+        path: '/:organizationId/:courseId/:courseProductRelationId',
+        initialEntries: [
+          `/${organization.id}/${courseProductRelation.course.id}/${courseProductRelation.id}`,
+        ],
+      },
+    });
+
+    await expectNoSpinner();
+    await expectBannerError('An error occurred while fetching orders. Please retry later.');
+  });
+});

frontend/js/pages/TeacherDashboardCourseLearnersLayout/index.tsx

@@ -0,0 +1,141 @@
+import { FormattedMessage, defineMessages } from 'react-intl';
+
+import { useParams, useSearchParams } from 'react-router-dom';
+import { SortModel, usePagination } from '@openfun/cunningham-react';
+import { useEffect, useMemo, useState } from 'react';
+import { TeacherDashboardCourseSidebar } from 'widgets/Dashboard/components/TeacherDashboardCourseSidebar';
+import { DashboardLayout } from 'widgets/Dashboard/components/DashboardLayout';
+import { useCourseOrders } from 'hooks/useCourseOrders';
+import { PER_PAGE } from 'settings';
+import Banner, { BannerType } from 'components/Banner';
+import { CourseOrderResourceQuery, Organization } from 'types/Joanie';
+import { useOrganizations } from 'hooks/useOrganizations';
+import { Spinner } from 'components/Spinner';
+import CourseLearnerDataGrid from './components/CourseLearnerDataGrid';
+import useCourseLearnersFilters from './hooks/useCourseLearnersFilters';
+import CourseLearnersFiltersBar from './components/CourseLearnersFiltersBar';
+
+const messages = defineMessages({
+  pageTitle: {
+    defaultMessage: 'Learners',
+    description: "Use for the page title of the course's contracts page",
+    id: 'pages.TeacherDashboardCourseLearnersLayout.pageTitle',
+  },
+  totalLearnerText: {
+    defaultMessage:
+      '{nbLearners} {nbLearners, plural, one {learner is enrolled} other {learners are enrolled}} for this training',
+    description: 'Text to indicate the total number of learner on a training',
+    id: 'pages.TeacherDashboardCourseLearnersLayout.totalLearnerText',
+  },
+});
+
+export const TeacherDashboardCourseLearnersLayout = () => {
+  const { organizationId: routeOrganizationId } = useParams<{
+    organizationId?: Organization['id'];
+  }>();
+  const [searchParams] = useSearchParams();
+  const page = searchParams.get('page') ?? '1';
+  const pagination = usePagination({
+    defaultPage: page ? parseInt(page, 10) : 1,
+    pageSize: PER_PAGE.teacherContractList,
+  });
+  const [sortModel, setSortModel] = useState<SortModel>([
+    {
+      field: 'created_on',
+      sort: 'desc',
+    },
+  ]);
+
+  // our list is always ordered by created_on asc or desc
+  // here we remove the neutral position that remove the "sortable" arrow icon.
+  const handleSetSortModel = (model: SortModel) => {
+    setSortModel(
+      model.length === 0
+        ? [
+            {
+              field: 'created_on',
+              sort: 'asc',
+            },
+          ]
+        : model,
+    );
+  };
+
+  const { filters, setFilters } = useCourseLearnersFilters();
+  const {
+    items: organizations,
+    states: { isFetched: isOrganizationFetched },
+  } = useOrganizations({ course_product_relation_id: filters.course_product_relation_id });
+  const {
+    items: courseOrders,
+    meta,
+    states: { fetching, isFetched, error },
+  } = useCourseOrders(
+    {
+      ...filters,
+      page: pagination.page,
+      page_size: PER_PAGE.courseLearnerList,
+    },
+    { enabled: isOrganizationFetched },
+  );
+
+  const showFilters = useMemo(() => {
+    return !routeOrganizationId && isOrganizationFetched && organizations.length > 1;
+  }, [isOrganizationFetched, organizations.length, routeOrganizationId]);
+
+  const onFiltersChange = (newFilters: Partial<CourseOrderResourceQuery>) => {
+    // Reset pagination
+    pagination.setPage(1);
+    setFilters((prevFilters) => ({ ...prevFilters, ...newFilters }));
+  };
+
+  useEffect(() => {
+    if (isFetched && meta?.pagination?.count) {
+      pagination.setPagesCount(Math.ceil(meta!.pagination!.count / PER_PAGE.teacherContractList));
+    }
+  }, [meta, isFetched]);
+
+  if (error) {
+    return <Banner message={error} type={BannerType.ERROR} rounded />;
+  }
+
+  if (!isOrganizationFetched) {
+    return <Spinner aria-labelledby="loading-organizations" />;
+  }
+
+  return (
+    <DashboardLayout sidebar={<TeacherDashboardCourseSidebar />}>
+      <div className="dashboard__page_title_container">
+        <h1 className="dashboard__page_title">
+          <FormattedMessage {...messages.pageTitle} />
+        </h1>
+        {!!meta?.pagination?.count && (
+          <div className="list__count-description">
+            <FormattedMessage
+              {...messages.totalLearnerText}
+              values={{ nbLearners: meta?.pagination.count }}
+            />
+          </div>
+        )}
+      </div>
+      <div className="teacher-training-learners-page">
+        {showFilters && (
+          <div className="dashboard__page__actions">
+            <CourseLearnersFiltersBar
+              defaultValues={filters}
+              organizationList={organizations}
+              onFiltersChange={onFiltersChange}
+            />
+          </div>
+        )}
+        <CourseLearnerDataGrid
+          courseOrders={courseOrders}
+          sortModel={sortModel}
+          setSortModel={handleSetSortModel}
+          pagination={pagination}
+          isLoading={fetching}
+        />
+      </div>
+    </DashboardLayout>
+  );
+};

frontend/js/settings/index.ts

@@ -5,7 +5,7 @@ import * as testSettings from './settings.test';
 let settingsOverride = {};
 if (process.env.NODE_ENV === 'development') {
   try {
-    settingsOverride = require('./settings.local.ts');
+    settingsOverride = require('./settings.dev.ts');
   } catch {
     // no local settings found, do nothing
   }
@@ -13,12 +13,6 @@ if (process.env.NODE_ENV === 'development') {
   settingsOverride = testSettings;
 }
 
-try {
-  settingsOverride = require('./settings.local.ts');
-} catch {
-  // no local settings found, do nothing
-}
-
 const settings = mergeWith({}, prodSettings, settingsOverride);
 
 export const {

frontend/js/settings/settings.prod.ts

@@ -54,6 +54,7 @@ export const CONTRACT_DOWNLOAD_SETTINGS = {
 const DEFAULT_PER_PAGE = 50;
 export const PER_PAGE = {
   teacherContractList: 25,
+  courseLearnerList: DEFAULT_PER_PAGE,
   useUnionResources: DEFAULT_PER_PAGE,
   useCourseProductUnion: DEFAULT_PER_PAGE,
   useOrdersEnrollments: DEFAULT_PER_PAGE,

frontend/js/types/Joanie.ts

@@ -18,6 +18,13 @@ export interface PaginatedParameters {
   offset: number;
 }
 
+export interface UserLight {
+  id: string;
+  username: string;
+  full_name: string;
+  email: string;
+}
+
 export interface Organization {
   id: string;
   code: string;
@@ -25,6 +32,10 @@ export interface Organization {
   logo: Nullable<JoanieFile>;
 }
 
+export interface OrganizationResourceQuery extends ResourcesQuery {
+  course_product_relation_id?: CourseProductRelation['id'];
+}
+
 export interface ContractDefinition {
   id: string;
   description: string;
@@ -47,6 +58,8 @@ export interface Contract {
   order: NestedCertificateOrder | NestedCredentialOrder;
 }
 
+export type ContractLight = Pick<Contract, 'id' | 'organization_signed_on' | 'student_signed_on'>;
+
 export interface CourseListItem extends Resource {
   id: string;
   title: string;
@@ -134,6 +147,12 @@ export interface CourseProduct extends Product {
   order: Nullable<OrderLite>;
 }
 
+export interface DefinitionResourcesProduct {
+  id: Product['id'];
+  certificate_definition_id: Nullable<CertificateDefinition['id']>;
+  contract_definition_id: Nullable<ContractDefinition['id']>;
+}
+
 export interface CourseProductRelation {
   id: string;
   course: CourseLight;
@@ -301,6 +320,27 @@ export interface NestedCredentialOrder extends AbstractNestedOrder {
 
 export type OrderEnrollment = Pick<Order, 'id' | 'state' | 'product_id' | 'certificate_id'>;
 
+export interface NestedCourseOrder {
+  id: Order['id'];
+  created_on: Order['created_on'];
+  owner: UserLight;
+  course_id: Order['id'];
+  product_id: Order['id'];
+  state: Order['state'];
+  enrollment_id: Enrollment['id'];
+  organization: Organization;
+  certificate_id?: Order['certificate_id'];
+  product: DefinitionResourcesProduct;
+  contract: ContractLight;
+}
+
+export interface CourseOrderResourceQuery extends PaginatedResourceQuery {
+  course_id?: CourseListItem['id'];
+  course_product_relation_id?: CourseProductRelation['id'];
+  organization_id?: Organization['id'];
+  product_id?: Product['id'];
+}
+
 export interface OrderGroup {
   id: string;
   is_active: boolean;
@@ -557,6 +597,13 @@ export interface API {
     products: {
       get(filters?: CourseProductQueryFilters): Promise<Nullable<CourseProductRelation>>;
     };
+    orders: {
+      get(
+        filters?: CourseOrderResourceQuery,
+      ): CourseOrderResourceQuery extends { id: string }
+        ? Promise<Nullable<NestedCourseOrder>>
+        : Promise<PaginatedResponse<NestedCourseOrder>>;
+    };
   };
   organizations: {
     get<Filters extends ResourcesQuery = ResourcesQuery>(

frontend/js/utils/OrderHelper/index.ts

@@ -4,6 +4,7 @@ import {
   Order,
   OrderState,
   ContractDefinition,
+  NestedCourseOrder,
 } from 'types/Joanie';
 
 /**
@@ -22,7 +23,10 @@ export class OrderHelper {
   /**
    * tell us if a order need to be sign by it's owner (the learner user).
    */
-  static orderNeedsSignature(order: Order, contractDefinition?: ContractDefinition) {
+  static orderNeedsSignature(
+    order: Order | NestedCourseOrder,
+    contractDefinition?: ContractDefinition,
+  ) {
     return (
       order?.state === OrderState.VALIDATED &&
       contractDefinition &&

frontend/js/utils/test/factories/cunningham.ts

@@ -0,0 +1,13 @@
+import { usePagination } from '@openfun/cunningham-react';
+import { factory } from './factories';
+
+export const PaginationFactory = factory((): ReturnType<typeof usePagination> => {
+  return {
+    page: 1,
+    setPage: jest.fn(),
+    onPageChange: jest.fn(),
+    pagesCount: 1,
+    setPagesCount: jest.fn(),
+    pageSize: 50,
+  };
+});