richie-education 2.24.0 → 2.25.0-b2.dev101

package/js/pages/DashboardCreditCardsManagement/index.spec.tsx

@@ -22,6 +22,7 @@ import { confirm } from 'utils/indirection/window';
 import { expectBreadcrumbsToEqualParts } from 'utils/test/expectBreadcrumbsToEqualParts';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { expectBannerError } from 'utils/test/expectBanner';
+import { HttpStatusCode } from 'utils/errors/HttpError';
 
 jest.mock('utils/context', () => ({
   __esModule: true,
@@ -59,7 +60,7 @@ describe('<DashboardCreditCardsManagement/>', () => {
         </QueryClientProvider>,
       );
     });
-    expectBreadcrumbsToEqualParts(['Back', 'My preferences']);
+    expectBreadcrumbsToEqualParts(['chevron_leftBack', 'My preferences']);
     // The empty placeholder is shown.
     await screen.findByText("You haven't created any credit cards yet.");
     // No error is shown.
@@ -68,11 +69,11 @@ describe('<DashboardCreditCardsManagement/>', () => {
 
   it('renders the correct label for expired date', async () => {
     const date = faker.date.past();
-    const creditCard: CreditCard = {
-      ...CreditCardFactory().one(),
+    const creditCard: CreditCard = CreditCardFactory({
       expiration_month: date.getMonth() + 1,
       expiration_year: date.getFullYear(),
-    };
+    }).one();
+
     fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', [creditCard]);
     await act(async () => {
       render(
@@ -105,11 +106,11 @@ describe('<DashboardCreditCardsManagement/>', () => {
     refDate.setMonth(refDate.getMonth() + 1);
     refDate.setDate(1);
     const futureLessThan3Months = faker.date.future({ years: 2.99 / 12, refDate });
-    const creditCard: CreditCard = {
-      ...CreditCardFactory().one(),
+    const creditCard: CreditCard = CreditCardFactory({
       expiration_month: futureLessThan3Months.getMonth() + 1,
       expiration_year: futureLessThan3Months.getFullYear(),
-    };
+    }).one();
+
     fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', [creditCard]);
     await act(async () => {
       render(
@@ -141,11 +142,11 @@ describe('<DashboardCreditCardsManagement/>', () => {
     const refDate = new Date();
     refDate.setMonth(refDate.getMonth() + 4);
     const date = faker.date.future({ refDate });
-    const creditCard: CreditCard = {
-      ...CreditCardFactory().one(),
+    const creditCard: CreditCard = CreditCardFactory({
       expiration_month: date.getMonth() + 1,
       expiration_year: date.getFullYear(),
-    };
+    }).one();
+
     fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', [creditCard]);
     await act(async () => {
       render(
@@ -405,8 +406,8 @@ describe('<DashboardCreditCardsManagement/>', () => {
   it('shows an error banner in case of API error', async () => {
     // Mock the API route to return a 500 error.
     fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', {
-      status: 500,
-      body: 'Bad request',
+      status: HttpStatusCode.INTERNAL_SERVER_ERROR,
+      body: 'Internal Server Error',
     });
 
     await act(async () => {

package/js/pages/DashboardCreditCardsManagement/index.tsx

@@ -32,7 +32,7 @@ interface Props {
 export const DashboardCreditCardsManagement = ({ onClickEdit }: Props) => {
   const intl = useIntl();
   const {
-    states: { error, isLoading },
+    states: { error, isPending },
     methods: { setError, update, safeDelete },
     ...creditCards
   } = useCreditCardsManagement();
@@ -68,8 +68,8 @@ export const DashboardCreditCardsManagement = ({ onClickEdit }: Props) => {
   return (
     <DashboardCard header={<FormattedMessage {...messages.header} />}>
       <div className="dashboard-credit-cards">
-        {isLoading && <Spinner />}
-        {!isLoading && (
+        {isPending && <Spinner />}
+        {!isPending && (
           <>
             {error && <Banner message={error} type={BannerType.ERROR} rounded />}
             {!error && creditCardsList.length === 0 && (

package/js/pages/DashboardOrderLayout/_styles.scss

@@ -0,0 +1,5 @@
+.dashboard-order-layout {
+  .dashboard__sidebar {
+    display: none;
+  }
+}

package/js/pages/DashboardOrderLayout/index.spec.tsx

@@ -3,9 +3,9 @@ import { QueryClientProvider } from '@tanstack/react-query';
 import { IntlProvider } from 'react-intl';
 import fetchMock from 'fetch-mock';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
-import { Order } from 'types/Joanie';
-import { OrderFactory, TargetCourseFactory } from 'utils/test/factories/joanie';
-import { mockProductWithOrder } from 'utils/test/mockProductWithOrder';
+import { CredentialOrder } from 'types/Joanie';
+import { CredentialOrderFactory, TargetCourseFactory } from 'utils/test/factories/joanie';
+import { mockCourseProductWithOrder } from 'utils/test/mockCourseProductWithOrder';
 import { LearnerDashboardPaths } from 'widgets/Dashboard/utils/learnerRouteMessages';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { SessionProvider } from 'contexts/SessionContext';
@@ -47,12 +47,12 @@ describe('<DashboardOrderLayout />', () => {
   });
 
   it('renders sidebar', async () => {
-    const order: Order = {
-      ...OrderFactory().one(),
+    const order: CredentialOrder = CredentialOrderFactory({
       target_courses: [TargetCourseFactory().one()],
-      enrollments: [],
-    };
-    const product = mockProductWithOrder(order);
+      target_enrollments: [],
+    }).one();
+
+    const { product } = mockCourseProductWithOrder(order);
     fetchMock.get(
       'https://joanie.endpoint/api/v1.0/orders/',
       { results: [order], next: null, previous: null, count: null },

package/js/pages/DashboardOrderLayout/index.tsx

@@ -7,17 +7,21 @@ import {
 } from 'widgets/Dashboard/utils/dashboardRoutes';
 import { LearnerDashboardPaths } from 'widgets/Dashboard/utils/learnerRouteMessages';
 import { DashboardLayout } from 'widgets/Dashboard/components/DashboardLayout';
-import { useOrder } from 'hooks/useOrders';
-import { useProduct } from 'hooks/useProduct';
+import { useOmniscientOrder } from 'hooks/useOrders';
 import { useBreadcrumbsPlaceholders } from 'hooks/useBreadcrumbsPlaceholders';
 import { CourseLight, Product } from 'types/Joanie';
 import { LearnerDashboardSidebar } from 'widgets/Dashboard/components/LearnerDashboardSidebar';
+import { useCourseProduct } from 'hooks/useCourseProducts';
 
 export const DashboardOrderLayout = () => {
   const params = useParams<{ orderId: string }>();
-  const order = useOrder(params.orderId);
+  const order = useOmniscientOrder(params.orderId);
   const course = order.item?.course as CourseLight;
-  const product = useProduct(order.item?.product, { course: course?.code });
+  const courseProduct = useCourseProduct({
+    product_id: order.item?.product_id,
+    course_id: course?.code,
+  });
+  const product = courseProduct?.item?.product;
   const intl = useIntl();
   const getRoutePath = getDashboardRoutePath(intl);
   const getRouteLabel = getDashboardRouteLabel(intl);
@@ -34,9 +38,10 @@ export const DashboardOrderLayout = () => {
 
   return (
     <DashboardLayout
-      sidebar={<LearnerDashboardSidebar menuLinks={links} title={product.item?.title} />}
+      className="dashboard-order-layout"
+      sidebar={<LearnerDashboardSidebar menuLinks={links} title={product?.title} />}
     >
-      <DashboardOrderLayoutContent product={product.item} />
+      <DashboardOrderLayoutContent product={product} />
     </DashboardLayout>
   );
 };

package/js/pages/TeacherDashboardContractsLayout/TeacherDashboardContracts/index.spec.tsx

@@ -0,0 +1,358 @@
+import { IntlProvider } from 'react-intl';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { CunninghamProvider } from '@openfun/cunningham-react';
+import fetchMock from 'fetch-mock';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { render, screen } from '@testing-library/react';
+import { getAllByRole } from '@testing-library/dom';
+import userEvent from '@testing-library/user-event';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import JoanieSessionProvider from 'contexts/SessionContext/JoanieSessionProvider';
+import { createTestQueryClient } from 'utils/test/createTestQueryClient';
+import { ContractFactory, OrganizationFactory } from 'utils/test/factories/joanie';
+import { expectNoSpinner } from 'utils/test/expectSpinner';
+import { expectBannerError } from 'utils/test/expectBanner';
+import { HttpStatusCode } from 'utils/errors/HttpError';
+import TeacherDashboardContracts from '.';
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: { backend: 'fonzie', endpoint: 'https://auth.endpoint.test' },
+    joanie_backend: { endpoint: 'https://joanie.test' },
+  }).one(),
+}));
+
+jest.mock('components/ContractFrame', () => ({
+  __esModule: true,
+  OrganizationContractFrame: ({
+    isOpen,
+    organizationId,
+  }: {
+    isOpen: boolean;
+    organizationId: string;
+  }) => isOpen && <p>ContractFrame opened for {organizationId}</p>,
+}));
+
+const Wrapper = ({ path, initialEntry }: { path: string; initialEntry: string }) => {
+  return (
+    <IntlProvider locale="en">
+      <QueryClientProvider client={createTestQueryClient({ user: true })}>
+        <JoanieSessionProvider>
+          <CunninghamProvider>
+            <MemoryRouter initialEntries={[initialEntry]}>
+              <Routes>
+                <Route path={path} element={<TeacherDashboardContracts />} />
+              </Routes>
+            </MemoryRouter>
+          </CunninghamProvider>
+        </JoanieSessionProvider>
+      </QueryClientProvider>
+    </IntlProvider>
+  );
+};
+
+describe('pages/TeacherDashboardContracts', () => {
+  beforeEach(() => {
+    // Joanie providers calls
+    fetchMock.get('https://joanie.test/api/v1.0/orders/', []);
+    fetchMock.get('https://joanie.test/api/v1.0/credit-cards/', []);
+    fetchMock.get('https://joanie.test/api/v1.0/addresses/', []);
+  });
+
+  afterEach(() => {
+    fetchMock.restore();
+    jest.resetAllMocks();
+  });
+
+  it('should render a list of contracts for a course product relation', async () => {
+    const contracts = ContractFactory({
+      student_signed_on: Date.toString(),
+      organization_signed_on: Date.toString(),
+    }).many(3);
+    const organizations = OrganizationFactory().many(2);
+    const defaultOrganization = organizations[0];
+
+    // OrganizationContractFilter request all organizations forwho the user have access
+    fetchMock.get(`https://joanie.test/api/v1.0/organizations/`, organizations);
+    // TeacherDashboardContracts request a paginated list of contracts to display
+    fetchMock.get(
+      `https://joanie.test/api/v1.0/organizations/${defaultOrganization.id}/contracts/?course_product_relation_id=2&signature_state=signed&page=1&page_size=25`,
+      { results: contracts, count: 0, previous: null, next: null },
+    );
+    // useTeacherContractsToSign request all contract to sign, without pagination
+    fetchMock.get(
+      `https://joanie.test/api/v1.0/organizations/${defaultOrganization.id}/contracts/?signature_state=half_signed&course_product_relation_id=2`,
+      { results: [], count: 0, previous: null, next: null },
+    );
+
+    render(
+      <Wrapper
+        path="/courses/:courseId/products/:courseProductRelationId/contracts"
+        initialEntry="/courses/1/products/2/contracts"
+      />,
+    );
+
+    await expectNoSpinner();
+
+    // Organization filter should have been rendered
+    const organizationFilter: HTMLInputElement = await screen.findByRole('combobox', {
+      name: 'Organization',
+    });
+    expect(organizationFilter).toHaveAttribute('value', defaultOrganization.title);
+
+    // Signature state filter should have been rendered
+    const signatureStateFilter: HTMLInputElement = screen.getByRole('combobox', {
+      name: 'Signature state',
+      hidden: true,
+    });
+    const value = (signatureStateFilter.querySelector('input[type="hidden"]') as HTMLInputElement)
+      ?.value;
+    expect(value).toBe('signed');
+
+    await expectNoSpinner();
+
+    // Table listing all signed contracts should have been rendered
+    screen.getByRole('table');
+
+    // Table header should have been rendered with 3 columns
+    const columnHeaders = screen.getAllByRole('columnheader');
+    expect(columnHeaders.length).toBe(3);
+    expect(columnHeaders[0]).toHaveTextContent('Training');
+    expect(columnHeaders[1]).toHaveTextContent('Learner');
+    expect(columnHeaders[2]).toHaveTextContent('State');
+
+    // Table body should have been rendered with 3 rows (one per contract)
+    contracts.forEach((contract) => {
+      const row = screen.getByTestId(contract.id);
+      const cells = getAllByRole(row, 'cell');
+      expect(cells.length).toBe(3);
+      expect(cells[0]).toHaveTextContent(contract.order.product_title);
+      expect(cells[1]).toHaveTextContent(contract.order.owner_name);
+      expect(cells[2]).toHaveTextContent('Signed');
+    });
+  });
+
+  it('should render a list of contracts for an organization', async () => {
+    const contracts = ContractFactory({
+      student_signed_on: Date.toString(),
+      organization_signed_on: Date.toString(),
+    }).many(3);
+
+    fetchMock.get(
+      `https://joanie.test/api/v1.0/organizations/1/contracts/?signature_state=signed&page=1&page_size=25`,
+      { results: contracts, count: 0, previous: null, next: null },
+    );
+    fetchMock.get(
+      `https://joanie.test/api/v1.0/organizations/1/contracts/?signature_state=half_signed`,
+      { results: [], count: 0, previous: null, next: null },
+    );
+
+    render(
+      <Wrapper
+        path="/organizations/:organizationId/contracts"
+        initialEntry="/organizations/1/contracts"
+      />,
+    );
+
+    await expectNoSpinner();
+
+    // Organization filter should not have been rendered
+    const organizationFilter = screen.queryByRole('combobox', {
+      name: 'Organization',
+    });
+    expect(organizationFilter).not.toBeInTheDocument();
+
+    // Signature state filter should have been rendered
+    const signatureStateFilter: HTMLInputElement = screen.getByRole('combobox', {
+      name: 'Signature state',
+      hidden: true,
+    });
+    const value = (signatureStateFilter.querySelector('input[type="hidden"]') as HTMLInputElement)
+      ?.value;
+    expect(value).toBe('signed');
+
+    await expectNoSpinner();
+
+    // Table listing all signed contracts should have been rendered
+    screen.getByRole('table');
+
+    // Table header should have been rendered with 3 columns
+    const columnHeaders = screen.getAllByRole('columnheader');
+    expect(columnHeaders.length).toBe(3);
+
+    // Table body should have been rendered with 3 rows (one per contract)
+    contracts.forEach((contract) => {
+      const row = screen.getByTestId(contract.id);
+      const cells = getAllByRole(row, 'cell');
+      expect(cells.length).toBe(3);
+      expect(cells[0]).toHaveTextContent(contract.order.product_title);
+      expect(cells[1]).toHaveTextContent(contract.order.owner_name);
+      expect(cells[2]).toHaveTextContent('Signed');
+    });
+  });
+
+  it('should render an empty table if there are no contracts', async () => {
+    fetchMock.get(
+      `https://joanie.test/api/v1.0/organizations/1/contracts/?signature_state=signed&page=1&page_size=25`,
+      { results: [], count: 0, previous: null, next: null },
+    );
+    fetchMock.get(
+      `https://joanie.test/api/v1.0/organizations/1/contracts/?signature_state=half_signed`,
+      { results: [], count: 0, previous: null, next: null },
+    );
+
+    render(
+      <Wrapper
+        path="/organizations/:organizationId/contracts"
+        initialEntry="/organizations/1/contracts"
+      />,
+    );
+
+    await expectNoSpinner();
+
+    // Organization filter should not have been rendered
+    const organizationFilter = screen.queryByRole('combobox', {
+      name: 'Organization',
+    });
+    expect(organizationFilter).not.toBeInTheDocument();
+
+    // Signature state filter should have been rendered
+    const signatureStateFilter: HTMLInputElement = screen.getByRole('combobox', {
+      name: 'Signature state',
+      hidden: true,
+    });
+    const value = (signatureStateFilter.querySelector('input[type="hidden"]') as HTMLInputElement)
+      ?.value;
+    expect(value).toBe('signed');
+
+    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 a button to bulk sign contracts if user has abilities and there are contracts to sign', async () => {
+    const contracts = ContractFactory({
+      student_signed_on: Date.toString(),
+      abilities: { sign: true },
+    }).many(3);
+
+    fetchMock.get(
+      `https://joanie.test/api/v1.0/organizations/1/contracts/?signature_state=signed&page=1&page_size=25`,
+      { results: [], count: 0, previous: null, next: null },
+    );
+    fetchMock.get(
+      `https://joanie.test/api/v1.0/organizations/1/contracts/?signature_state=half_signed&page=1&page_size=25`,
+      { results: contracts, count: 3, previous: null, next: null },
+    );
+    fetchMock.get(
+      `https://joanie.test/api/v1.0/organizations/1/contracts/?signature_state=half_signed`,
+      { results: contracts, count: 3, previous: null, next: null },
+    );
+
+    render(
+      <Wrapper
+        path="/organizations/:organizationId/contracts"
+        initialEntry="/organizations/1/contracts?signature_state=half_signed"
+      />,
+    );
+
+    await expectNoSpinner();
+
+    // Organization filter should not have been rendered
+    const organizationFilter = screen.queryByRole('combobox', {
+      name: 'Organization',
+    });
+    expect(organizationFilter).not.toBeInTheDocument();
+
+    // Signature state filter should have been rendered
+    const signatureStateFilter: HTMLInputElement = screen.getByRole('combobox', {
+      name: 'Signature state',
+      hidden: true,
+    });
+    const value = (signatureStateFilter.querySelector('input[type="hidden"]') as HTMLInputElement)
+      ?.value;
+    expect(value).toBe('half_signed');
+
+    // Table listing all signed contracts should have been rendered
+    screen.getByRole('table');
+
+    // Table header should have been rendered with 3 columns
+    const columnHeaders = screen.getAllByRole('columnheader');
+    expect(columnHeaders.length).toBe(3);
+
+    // Table body should have been rendered with 3 rows (one per contract)
+    contracts.forEach((contract) => {
+      const row = screen.getByTestId(contract.id);
+      const cells = getAllByRole(row, 'cell');
+      expect(cells.length).toBe(3);
+      expect(cells[2]).toHaveTextContent('Pending for signature');
+    });
+
+    // OrganizationContractFrame should not be opened yet
+    expect(screen.queryByText('ContractFrame opened for 1')).not.toBeInTheDocument();
+
+    // Bulk sign button should have been rendered
+    const bulkSignButton = screen.getByRole('button', {
+      name: 'Sign all pending contracts (3)',
+    });
+    const user = userEvent.setup();
+    await user.click(bulkSignButton);
+
+    // And now OrganizationContractFrame should be opened
+    screen.getByText('ContractFrame opened for 1');
+  });
+
+  it('should render an error banner if an error occured during contracts fetching', async () => {
+    fetchMock.get(
+      `https://joanie.test/api/v1.0/organizations/1/contracts/?signature_state=signed&page=1&page_size=25`,
+      HttpStatusCode.NOT_FOUND,
+    );
+    fetchMock.get(
+      `https://joanie.test/api/v1.0/organizations/1/contracts/?signature_state=half_signed`,
+      HttpStatusCode.NOT_FOUND,
+    );
+
+    render(
+      <Wrapper
+        path="/organizations/:organizationId/contracts"
+        initialEntry="/organizations/1/contracts"
+      />,
+    );
+
+    await expectNoSpinner();
+    await expectBannerError('An error occurred while fetching contracts. Please retry later.');
+  });
+
+  it('should hide organization filter when user only have one organization', async () => {
+    const defaultOrganization = OrganizationFactory().one();
+    fetchMock.get('https://joanie.test/api/v1.0/organizations/', [defaultOrganization]);
+
+    const contracts = ContractFactory({
+      student_signed_on: Date.toString(),
+      abilities: { sign: true },
+    }).many(3);
+    fetchMock.get(
+      `https://joanie.test/api/v1.0/organizations/${defaultOrganization.id}/contracts/?signature_state=signed&page=1&page_size=25`,
+      { results: [], count: 0, previous: null, next: null },
+    );
+    fetchMock.get(
+      `https://joanie.test/api/v1.0/organizations/${defaultOrganization.id}/contracts/?signature_state=half_signed`,
+      { results: contracts, count: 3, previous: null, next: null },
+    );
+    render(<Wrapper path="/" initialEntry="" />);
+    await expectNoSpinner();
+
+    // Signature state filter should have been rendered
+    screen.getByRole('combobox', {
+      name: 'Signature state',
+      hidden: true,
+    });
+
+    // Organization filter should not have been rendered
+    const organizationFilter = screen.queryByRole('combobox', { name: 'Organization' });
+    expect(organizationFilter).not.toBeInTheDocument();
+  });
+});

package/js/pages/TeacherDashboardContractsLayout/TeacherDashboardContracts/index.tsx

@@ -0,0 +1,129 @@
+import { defineMessages, useIntl } from 'react-intl';
+
+import { DataGrid, usePagination } from '@openfun/cunningham-react';
+import { useEffect, useMemo } from 'react';
+import { useParams, useSearchParams } from 'react-router-dom';
+import { ContractHelper, ContractStatePoV } from 'utils/ContractHelper';
+import { useOrganizationContracts } from 'hooks/useContracts';
+import Banner, { BannerType } from 'components/Banner';
+import { PER_PAGE } from 'settings';
+import { ContractResourceQuery } from 'types/Joanie';
+
+import { useOrganizations } from 'hooks/useOrganizations';
+import ContractFiltersBar from '../components/ContractFiltersBar';
+import useTeacherContractFilters, {
+  TeacherDashboardContractsParams,
+} from '../hooks/useTeacherContractFilters';
+import ContractActionsBar from '../components/ContractActionsBar';
+
+const messages = defineMessages({
+  columnProductTitle: {
+    defaultMessage: 'Training',
+    description: 'Label for productTitle column',
+    id: 'pages.TeacherDashboardOrganizationContractsLayout.columnProductTitle',
+  },
+  columnLearnerName: {
+    defaultMessage: 'Learner',
+    description: 'Label for learnerName column',
+    id: 'pages.TeacherDashboardOrganizationContractsLayout.columnLearnerName',
+  },
+  columnState: {
+    defaultMessage: 'State',
+    description: 'Label for state column',
+    id: 'pages.TeacherDashboardOrganizationContractsLayout.columnState',
+  },
+});
+
+const TeacherDashboardContracts = () => {
+  const intl = useIntl();
+  const [searchParams] = useSearchParams();
+  const page = searchParams.get('page') ?? '1';
+  const pagination = usePagination({
+    defaultPage: page ? parseInt(page, 10) : 1,
+    pageSize: PER_PAGE.teacherContractList,
+  });
+  const { organizationId: routeOrganizationId } = useParams<TeacherDashboardContractsParams>();
+  // organization list is used to show/hide organization filter.
+  // when organizationId is in route's params this filter is always hidden.
+  // therefore we don't need to enable this query.
+  const {
+    items: organizationList,
+    states: { isFetched: isOrganizationListFetched },
+  } = useOrganizations(undefined, { enabled: !!routeOrganizationId });
+  const hasMultipleOrganizations = isOrganizationListFetched && organizationList.length > 1;
+  const { initialFilters, filters, setFilters } = useTeacherContractFilters();
+  const {
+    items: contracts,
+    meta,
+    states: { fetching, isFetched, error },
+  } = useOrganizationContracts({
+    ...filters,
+    page: pagination.page,
+    page_size: PER_PAGE.teacherContractList,
+  });
+
+  const rows = useMemo(() => {
+    return contracts.map((contract) => ({
+      id: contract.id,
+      learnerName: contract.order.owner_name,
+      productTitle: contract.order.product_title,
+      state: ContractHelper.getHumanReadableState(contract, ContractStatePoV.ORGANIZATION, intl),
+    }));
+  }, [contracts]);
+
+  const handleFiltersChange = (newFilters: Partial<ContractResourceQuery>) => {
+    // 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 />;
+  }
+
+  return (
+    <div className="teacher-contract-page">
+      <div className="dashboard__page__actions">
+        <ContractActionsBar
+          organizationId={filters.organization_id!}
+          courseProductRelationId={filters.course_product_relation_id}
+        />
+        <ContractFiltersBar
+          defaultValues={initialFilters}
+          onFiltersChange={handleFiltersChange}
+          hideFilterOrganization={!!(routeOrganizationId || !hasMultipleOrganizations)}
+        />
+      </div>
+      <DataGrid
+        columns={[
+          {
+            field: 'productTitle',
+            headerName: intl.formatMessage(messages.columnProductTitle),
+            enableSorting: false,
+          },
+          {
+            field: 'learnerName',
+            headerName: intl.formatMessage(messages.columnLearnerName),
+            enableSorting: false,
+          },
+          {
+            field: 'state',
+            headerName: intl.formatMessage(messages.columnState),
+            enableSorting: false,
+          },
+        ]}
+        rows={rows}
+        pagination={pagination}
+        isLoading={fetching}
+      />
+    </div>
+  );
+};
+
+export default TeacherDashboardContracts;