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

package/js/components/ContractFrame/OrganizationContractFrame.spec.tsx

@@ -6,9 +6,14 @@ import { IntlProvider } from 'react-intl';
 import fetchMock from 'fetch-mock';
 import { QueryStateFactory } from 'utils/test/factories/reactQuery';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
-import { ContractFactory, OrganizationFactory } from 'utils/test/factories/joanie';
+import {
+  ContractFactory,
+  CourseProductRelationFactory,
+  OrganizationFactory,
+} from 'utils/test/factories/joanie';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import JoanieSessionProvider from 'contexts/SessionContext/JoanieSessionProvider';
+import { isCourseProductRelation } from 'types/Joanie';
 import { Props } from './AbstractContractFrame';
 import { OrganizationContractFrame } from '.';
 
@@ -70,132 +75,93 @@ describe('OrganizationContractFrame', () => {
     fetchMock.restore();
   });
 
-  it('should implement AbstractContractFrame for organization', async () => {
-    const organization = OrganizationFactory().one();
-    const contract = ContractFactory().one();
-    const isOpen = faker.datatype.boolean();
-
-    const expectedUrls = {
-      getInvitationLink: `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/contracts-signature-link/`,
-      checkSignature: `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/contracts/?id=${contract.id}`,
-    };
-
-    fetchMock
-      .get(expectedUrls.getInvitationLink, {
-        invitation_link: faker.internet.url(),
-        contract_ids: [contract.id],
-      })
-      .get(expectedUrls.checkSignature, { results: [contract] });
-
-    const handleDone = jest.fn();
-    const handleClose = jest.fn();
-
-    const client = createTestQueryClient({
-      user: true,
-      queriesCallback: (queries) => {
-        // Push contract and orders queries
-        queries.push(QueryStateFactory(['user', 'organization_contracts'], { data: [] }));
-      },
-    });
-
-    let contractsQueryState = client.getQueryState(['user', 'organization_contracts']);
-    expect(contractsQueryState?.isInvalidated).toBe(false);
-
-    await act(async () => {
-      render(
-        <Wrapper client={client}>
-          <OrganizationContractFrame
-            organizationId={organization.id}
-            isOpen={isOpen}
-            onDone={handleDone}
-            onClose={handleClose}
-          />
-        </Wrapper>,
-      );
-    });
-
-    // isOpen should be passed down to AbstractContractFrame
-    const contractFrame = await screen.getByTestId('AbstractContractFrame');
-    expect(contractFrame).toHaveAttribute('data-is-open', String(isOpen));
-
-    // getInvitationLink should post on order/submit-for-signature endpoint
-    expect(fetchMock.called(expectedUrls.getInvitationLink)).toBe(true);
-
-    // checkSignature should get on order endpoint
-    expect(fetchMock.called(expectedUrls.checkSignature)).toBe(true);
-
-    // onDone should be tweaked to invalidate the user orders and contracts queries
-    // and passed down to AbstractContractFrame
-    contractsQueryState = client.getQueryState(['user', 'organization_contracts']);
-    expect(contractsQueryState?.isInvalidated).toBe(true);
-    expect(handleDone).toHaveBeenCalledTimes(1);
-
-    // onClose should be passed down to AbstractContractFrame
-    expect(handleClose).toHaveBeenCalledTimes(1);
-  });
-
-  it('should implement AbstractContractFrame for organization with a list of contract ids', async () => {
-    const organization = OrganizationFactory().one();
-    const contracts = ContractFactory().many(2);
-    const isOpen = faker.datatype.boolean();
-
-    const expectedUrls = {
-      getInvitationLink: `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/contracts-signature-link/?contracts_ids=${contracts[0].id}&contracts_ids=${contracts[1].id}`,
-      checkSignature: `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/contracts/?id=${contracts[0].id}&id=${contracts[1].id}`,
-    };
-
-    fetchMock
-      .get(expectedUrls.getInvitationLink, {
-        invitation_link: faker.internet.url(),
-        contract_ids: contracts.map((contract) => contract.id),
-      })
-      .get(expectedUrls.checkSignature, { results: [contracts] });
-
-    const handleDone = jest.fn();
-    const handleClose = jest.fn();
-
-    const client = createTestQueryClient({
-      user: true,
-      queriesCallback: (queries) => {
-        // Push contract and orders queries
-        queries.push(QueryStateFactory(['user', 'organization_contracts'], { data: [] }));
-      },
-    });
-
-    let contractsQueryState = client.getQueryState(['user', 'organization_contracts']);
-    expect(contractsQueryState?.isInvalidated).toBe(false);
-
-    await act(async () => {
-      render(
-        <Wrapper client={client}>
-          <OrganizationContractFrame
-            organizationId={organization.id}
-            contractIds={contracts.map((contract) => contract.id)}
-            isOpen={isOpen}
-            onDone={handleDone}
-            onClose={handleClose}
-          />
-        </Wrapper>,
-      );
-    });
-
-    // isOpen should be passed down to AbstractContractFrame
-    const contractFrame = await screen.getByTestId('AbstractContractFrame');
-    expect(contractFrame).toHaveAttribute('data-is-open', String(isOpen));
-
-    // getInvitationLink should post on order/submit-for-signature endpoint
-    expect(fetchMock.called(expectedUrls.getInvitationLink)).toBe(true);
-
-    // checkSignature should get on order endpoint
-    expect(fetchMock.called(expectedUrls.checkSignature)).toBe(true);
-
-    // onDone should be tweaked to invalidate the user orders and contracts queries
-    // and passed down to AbstractContractFrame
-    contractsQueryState = client.getQueryState(['user', 'organization_contracts']);
-    expect(contractsQueryState?.isInvalidated).toBe(true);
-    expect(handleDone).toHaveBeenCalledTimes(1);
-
-    // onClose should be passed down to AbstractContractFrame
-    expect(handleClose).toHaveBeenCalledTimes(1);
-  });
+  it.each([
+    {
+      label: 'contractList: undefined, courseProductRelation: undefined',
+      contractList: undefined,
+      courseProductRelation: undefined,
+    },
+    {
+      label: 'contractList: 2 Contract, courseProductRelation: undefined',
+      contractList: ContractFactory().many(2),
+      courseProductRelation: undefined,
+    },
+    {
+      label: 'contractList: undefined, courseProductRelation: one CourseProductRelation',
+      contractList: undefined,
+      courseProductRelation: CourseProductRelationFactory().one(),
+    },
+  ])(
+    'should implement AbstractContractFrame for organization and $label',
+    async ({ contractList, courseProductRelation }) => {
+      const organization = OrganizationFactory().one();
+      const contracts = contractList || ContractFactory().many(2);
+      const isOpen = faker.datatype.boolean();
+
+      const invitationLinkQueryString =
+        courseProductRelation && isCourseProductRelation(courseProductRelation)
+          ? `?course_product_relation_ids=${courseProductRelation.id}`
+          : '';
+      const expectedUrls = {
+        getInvitationLink: `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/contracts-signature-link/${invitationLinkQueryString}`,
+        checkSignature: `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/contracts/?id=${contracts[0].id}&id=${contracts[1].id}`,
+      };
+
+      fetchMock
+        .get(expectedUrls.getInvitationLink, {
+          invitation_link: faker.internet.url(),
+          contract_ids: contracts.map((contract) => contract.id),
+        })
+        .get(expectedUrls.checkSignature, { results: [contracts] });
+
+      const handleDone = jest.fn();
+      const handleClose = jest.fn();
+
+      const client = createTestQueryClient({
+        user: true,
+        queriesCallback: (queries) => {
+          // Push contract and orders queries
+          queries.push(QueryStateFactory(['user', 'organization_contracts'], { data: [] }));
+        },
+      });
+
+      let contractsQueryState = client.getQueryState(['user', 'organization_contracts']);
+      expect(contractsQueryState?.isInvalidated).toBe(false);
+
+      await act(async () => {
+        render(
+          <Wrapper client={client}>
+            <OrganizationContractFrame
+              organizationId={organization.id}
+              courseProductRelationIds={
+                courseProductRelation ? [courseProductRelation.id] : undefined
+              }
+              isOpen={isOpen}
+              onDone={handleDone}
+              onClose={handleClose}
+            />
+          </Wrapper>,
+        );
+      });
+
+      // isOpen should be passed down to AbstractContractFrame
+      const contractFrame = screen.getByTestId('AbstractContractFrame');
+      expect(contractFrame).toHaveAttribute('data-is-open', String(isOpen));
+
+      // getInvitationLink should post on order/submit-for-signature endpoint
+      expect(fetchMock.called(expectedUrls.getInvitationLink)).toBe(true);
+
+      // checkSignature should get on order endpoint
+      expect(fetchMock.called(expectedUrls.checkSignature)).toBe(true);
+
+      // onDone should be tweaked to invalidate the user orders and contracts queries
+      // and passed down to AbstractContractFrame
+      contractsQueryState = client.getQueryState(['user', 'organization_contracts']);
+      expect(contractsQueryState?.isInvalidated).toBe(true);
+      expect(handleDone).toHaveBeenCalledTimes(1);
+
+      // onClose should be passed down to AbstractContractFrame
+      expect(handleClose).toHaveBeenCalledTimes(1);
+    },
+  );
 });

package/js/components/ContractFrame/OrganizationContractFrame.tsx

@@ -4,14 +4,21 @@ import { useJoanieApi } from 'contexts/JoanieApiContext';
 import AbstractContractFrame, {
   AbstractProps,
 } from 'components/ContractFrame/AbstractContractFrame';
-import { Contract } from 'types/Joanie';
+import { Contract, CourseProductRelation } from 'types/Joanie';
 
 interface Props extends AbstractProps {
   contractIds?: Contract['id'][];
   organizationId: string;
+  courseProductRelationIds?: CourseProductRelation['id'][];
 }
 
-const OrganizationContractFrame = ({ organizationId, contractIds, onDone, ...props }: Props) => {
+const OrganizationContractFrame = ({
+  organizationId,
+  courseProductRelationIds = [],
+  contractIds,
+  onDone,
+  ...props
+}: Props) => {
   const api = useJoanieApi();
   const queryClient = useQueryClient();
   const [contractIdsToCheck, setContractIdsToCheck] = useState(contractIds);
@@ -22,6 +29,7 @@ const OrganizationContractFrame = ({ organizationId, contractIds, onDone, ...pro
      be signed. We need to keep track of these ids to check if all contracts have been signed.
      */
     const response = await api.organizations.contracts.getSignatureLinks({
+      course_product_relation_ids: courseProductRelationIds,
       organization_id: organizationId,
       contracts_ids: contractIds,
     });

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

@@ -76,18 +76,19 @@ describe('pages/TeacherDashboardContracts', () => {
       student_signed_on: Date.toString(),
       organization_signed_on: Date.toString(),
     }).many(3);
-    const organization = OrganizationFactory().one();
+    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/`, [organization]);
+    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/${organization.id}/contracts/?course_product_relation_id=2&signature_state=signed&page=1&page_size=25`,
+      `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/${organization.id}/contracts/?course_product_relation_id=2&signature_state=half_signed`,
+      `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 },
     );
 
@@ -101,10 +102,10 @@ describe('pages/TeacherDashboardContracts', () => {
     await expectNoSpinner();
 
     // Organization filter should have been rendered
-    const organizationFilter: HTMLInputElement = screen.getByRole('combobox', {
+    const organizationFilter: HTMLInputElement = await screen.findByRole('combobox', {
       name: 'Organization',
     });
-    expect(organizationFilter).toHaveAttribute('value', organization.title);
+    expect(organizationFilter).toHaveAttribute('value', defaultOrganization.title);
 
     // Signature state filter should have been rendered
     const signatureStateFilter: HTMLInputElement = screen.getByRole('combobox', {
@@ -330,4 +331,34 @@ describe('pages/TeacherDashboardContracts', () => {
     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

@@ -9,6 +9,7 @@ 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,
@@ -41,7 +42,15 @@ const TeacherDashboardContracts = () => {
     defaultPage: page ? parseInt(page, 10) : 1,
     pageSize: PER_PAGE.teacherContractList,
   });
-  const { organizationId } = useParams<TeacherDashboardContractsParams>();
+  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,
@@ -88,7 +97,7 @@ const TeacherDashboardContracts = () => {
         <ContractFiltersBar
           defaultValues={initialFilters}
           onFiltersChange={handleFiltersChange}
-          hideFilterOrganization={!!organizationId}
+          hideFilterOrganization={!!(routeOrganizationId || !hasMultipleOrganizations)}
         />
       </div>
       <DataGrid

package/js/pages/TeacherDashboardContractsLayout/components/ContractActionsBar/index.tsx

@@ -19,6 +19,7 @@ const ContractActionsBar = ({ organizationId, courseProductRelationId }: Contrac
 
   const canDownloadContracts = hasContractToDownload && !courseProductRelationId;
   const nbAvailableActions = [canSignContracts, canDownloadContracts].filter((val) => val).length;
+  const courseProductRelationIds = courseProductRelationId ? [courseProductRelationId] : undefined;
   return (
     nbAvailableActions > 0 && (
       <div
@@ -31,6 +32,7 @@ const ContractActionsBar = ({ organizationId, courseProductRelationId }: Contrac
         {canSignContracts && (
           <div>
             <SignOrganizationContractButton
+              courseProductRelationIds={courseProductRelationIds}
               organizationId={organizationId}
               contractToSignCount={contractsToSignCount}
             />

package/js/pages/TeacherDashboardContractsLayout/components/SignOrganizationContractButton/index.spec.tsx

@@ -1,12 +1,13 @@
 import { faker } from '@faker-js/faker';
 import { render, screen } from '@testing-library/react';
-import { IntlProvider } from 'react-intl';
 import { PropsWithChildren } from 'react';
+import { IntlProvider } from 'react-intl';
 import { QueryClientProvider } from '@tanstack/react-query';
+import fetchMock from 'fetch-mock';
+import userEvent from '@testing-library/user-event';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
 import JoanieApiProvider from 'contexts/JoanieApiContext';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
-
 import SignOrganizationContractButton from '.';
 
 jest.mock('utils/context', () => ({
@@ -35,26 +36,27 @@ describe('TeacherDashboardContractsLayout/SignOrganizationContractButton', () =>
   });
 
   afterEach(() => {
-    jest.resetAllMocks();
+    fetchMock.restore();
   });
 
-  it("shouldn't render sign button and <OrganizationContractFrame/> when contractToSignCount > 0", () => {
+  it('should display sign button user have some contract to sign', () => {
     render(
       <Wrapper>
         <SignOrganizationContractButton
           organizationId={faker.string.uuid()}
-          contractToSignCount={1}
+          contractToSignCount={12}
         />
       </Wrapper>,
     );
 
-    expect(screen.getByRole('button', { name: /Sign all pending contracts/ })).toBeInTheDocument();
-
+    expect(
+      screen.getByRole('button', { name: 'Sign all pending contracts (12)' }),
+    ).toBeInTheDocument();
     const DashboardContractFramePortal = document.getElementsByClassName('ReactModalPortal');
     expect(DashboardContractFramePortal).toHaveLength(1);
   });
 
-  it("shouldn't only render <OrganizationContractFrame/> when contractToSignCount is 0", () => {
+  it("shouldn't display sign button user don't have some contract to sign", () => {
     render(
       <Wrapper>
         <SignOrganizationContractButton
@@ -67,8 +69,47 @@ describe('TeacherDashboardContractsLayout/SignOrganizationContractButton', () =>
     expect(
       screen.queryByRole('button', { name: /Sign all pending contracts/ }),
     ).not.toBeInTheDocument();
-
     const DashboardContractFramePortal = document.getElementsByClassName('ReactModalPortal');
     expect(DashboardContractFramePortal).toHaveLength(1);
   });
+
+  it.each([
+    {
+      label: "organization's contracts",
+      organizationId: faker.string.uuid(),
+      courseProductRelationIds: undefined,
+    },
+    {
+      label: "organization's training contracts",
+      organizationId: faker.string.uuid(),
+      courseProductRelationIds: [faker.string.uuid()],
+    },
+  ])('should open $label frame on click', async ({ organizationId, courseProductRelationIds }) => {
+    render(
+      <Wrapper>
+        <SignOrganizationContractButton
+          organizationId={organizationId}
+          courseProductRelationIds={courseProductRelationIds}
+          contractToSignCount={12}
+        />
+      </Wrapper>,
+    );
+
+    const $button = screen.getByRole('button', { name: /Sign all pending contracts/ });
+    const user = userEvent.setup();
+
+    let getInvitationLinkUrl = `https://joanie.test/api/v1.0/organizations/${organizationId}/contracts-signature-link/`;
+    if (courseProductRelationIds) {
+      getInvitationLinkUrl += `?course_product_relation_ids=${courseProductRelationIds[0]}`;
+    }
+
+    fetchMock.get(getInvitationLinkUrl, {
+      invitation_link: 'https://dummysignaturebackend.fr',
+      contract_ids: [],
+    });
+    await user.click($button);
+
+    expect(screen.getByTestId('dashboard-contract-frame')).toBeInTheDocument();
+    expect(fetchMock.called(getInvitationLinkUrl)).toBe(true);
+  });
 });

package/js/pages/TeacherDashboardContractsLayout/components/SignOrganizationContractButton/index.tsx

@@ -3,7 +3,7 @@ import { defineMessages, FormattedMessage } from 'react-intl';
 import { Button } from '@openfun/cunningham-react';
 import { OrganizationContractFrame } from 'components/ContractFrame';
 
-import { Organization } from 'types/Joanie';
+import { CourseProductRelation, Organization } from 'types/Joanie';
 
 const messages = defineMessages({
   signAllPendingContracts: {
@@ -14,11 +14,16 @@ const messages = defineMessages({
 });
 
 interface Props {
+  courseProductRelationIds?: CourseProductRelation['id'][];
   organizationId: Organization['id'];
   contractToSignCount: number;
 }
 
-const SignOrganizationContractButton = ({ organizationId, contractToSignCount }: Props) => {
+const SignOrganizationContractButton = ({
+  organizationId,
+  contractToSignCount,
+  courseProductRelationIds = [],
+}: Props) => {
   const [contractFrameOpened, setContractFrameOpened] = useState(false);
   const hasContractToSign = contractToSignCount > 0;
 
@@ -43,6 +48,7 @@ const SignOrganizationContractButton = ({ organizationId, contractToSignCount }:
         </Button>
       )}
       <OrganizationContractFrame
+        courseProductRelationIds={courseProductRelationIds}
         organizationId={organizationId}
         isOpen={contractFrameOpened}
         onClose={() => setContractFrameOpened(false)}

package/js/types/Joanie.ts

@@ -452,6 +452,7 @@ export interface ContractResourceQuery extends PaginatedResourceQuery {
 export interface OrganizationContractSignatureLinksFilters {
   contracts_ids?: string[];
   organization_id: Organization['id'];
+  course_product_relation_ids?: CourseProductRelation['id'][];
 }
 
 export interface ContractInvitationLinkResponse {

package/js/widgets/Dashboard/components/DashboardSidebar/components/ContractNavLink/index.tsx

@@ -5,6 +5,7 @@ import { ContractState, CourseProductRelation, Organization } from 'types/Joanie
 import useTeacherPendingContractsCount from 'hooks/useTeacherPendingContractsCount';
 import { ContractActions } from 'utils/AbilitiesHelper/types';
 import useContractAbilities from 'hooks/useContractAbilities';
+import useDefaultOrganizationId from 'pages/TeacherDashboardContractsLayout/hooks/useDefaultOrganizationId';
 import MenuNavLink from '../MenuNavLink';
 
 interface ContractNavLinkProps {
@@ -18,8 +19,9 @@ const ContractNavLink = ({
   organizationId,
   courseProductRelationId,
 }: ContractNavLinkProps) => {
+  const defaultOrganizationId = useDefaultOrganizationId();
   const { contracts: pendingContracts, pendingContractCount } = useTeacherPendingContractsCount({
-    organizationId,
+    organizationId: organizationId || defaultOrganizationId,
     courseProductRelationId,
   });
   const contractAbilities = useContractAbilities(pendingContracts);

package/js/widgets/Dashboard/components/TeacherDashboardCourseSidebar/index.spec.tsx

@@ -4,7 +4,8 @@ import { render, screen } from '@testing-library/react';
 import { IntlProvider, createIntl } from 'react-intl';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { CunninghamProvider } from '@openfun/cunningham-react';
-import { CourseListItem } from 'types/Joanie';
+import { PropsWithChildren } from 'react';
+import { CourseListItem, CourseProductRelation, Organization } from 'types/Joanie';
 import {
   RichieContextFactory as mockRichieContextFactory,
   UserFactory,
@@ -16,7 +17,11 @@ import {
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import JoanieSessionProvider from 'contexts/SessionContext/JoanieSessionProvider';
 
-import { CourseFactory } from 'utils/test/factories/joanie';
+import {
+  CourseFactory,
+  CourseProductRelationFactory,
+  OrganizationFactory,
+} from 'utils/test/factories/joanie';
 import { expectNoSpinner } from 'utils/test/expectSpinner';
 import { TeacherDashboardCourseSidebar, messages } from '.';
 
@@ -37,26 +42,44 @@ jest.mock('utils/indirection/window', () => ({
 const intl = createIntl({ locale: 'en' });
 
 interface RenderTeacherDashboardCourseSidebarProps {
-  courseId: string;
+  courseId: CourseListItem['id'];
+  organizationId?: Organization['id'];
+  courseProductRelationId?: CourseProductRelation['id'];
 }
-const renderTeacherDashboardCourseSidebar = ({
+
+const Wrapper = ({
+  children,
   courseId,
-}: RenderTeacherDashboardCourseSidebarProps) =>
-  render(
+  organizationId,
+  courseProductRelationId,
+}: PropsWithChildren<RenderTeacherDashboardCourseSidebarProps>) => {
+  let routePath = '/:courseId';
+  let initialEntry = `/${courseId}`;
+
+  if (courseProductRelationId) {
+    routePath += '/:courseProductRelationId';
+    initialEntry += `/${courseProductRelationId}`;
+  }
+  if (organizationId) {
+    routePath = '/:organizationId' + routePath;
+    initialEntry = `/${organizationId}` + initialEntry;
+  }
+  return (
     <IntlProvider locale="en">
       <QueryClientProvider client={createTestQueryClient({ user: UserFactory().one() })}>
         <JoanieSessionProvider>
           <CunninghamProvider>
-            <MemoryRouter initialEntries={[`/${courseId}`]}>
+            <MemoryRouter initialEntries={[initialEntry]}>
               <Routes>
-                <Route path="/:courseId" element={<TeacherDashboardCourseSidebar />} />
+                <Route path={routePath} element={children} />
               </Routes>
             </MemoryRouter>
           </CunninghamProvider>
         </JoanieSessionProvider>
       </QueryClientProvider>
-    </IntlProvider>,
+    </IntlProvider>
   );
+};
 
 describe('<TeacherDashboardCourseSidebar/>', () => {
   let nbApiRequest: number;
@@ -77,7 +100,12 @@ describe('<TeacherDashboardCourseSidebar/>', () => {
     fetchMock.get(`https://joanie.endpoint/api/v1.0/courses/${course.id}/`, course);
     nbApiRequest += 1; // call to course
 
-    renderTeacherDashboardCourseSidebar({ courseId: course.id });
+    render(
+      <Wrapper courseId={course.id}>
+        <TeacherDashboardCourseSidebar />
+      </Wrapper>,
+    );
+
     await expectNoSpinner('Loading course...');
     const link = screen.getByRole('link', {
       name: intl.formatMessage(messages.syllabusLinkLabel),
@@ -85,25 +113,103 @@ describe('<TeacherDashboardCourseSidebar/>', () => {
     expect(link).toHaveAttribute('href', `/redirects/courses/${course.code}`);
   });
 
-  it('should display menu items', async () => {
-    const course: CourseListItem = CourseFactory().one();
-    fetchMock.get(`https://joanie.endpoint/api/v1.0/courses/${course.id}/`, course);
-    nbApiRequest += 1; // call to course
+  it.each([
+    {
+      label: 'course',
+      course: CourseFactory().one(),
+      organization: undefined,
+      courseProductRelation: undefined,
+      expectedRoutes: [TeacherDashboardPaths.COURSE_GENERAL_INFORMATION],
+    },
+    {
+      label: 'training',
+      course: CourseFactory().one(),
+      organization: undefined,
+      courseProductRelation: CourseProductRelationFactory().one(),
+      expectedRoutes: [
+        TeacherDashboardPaths.COURSE_PRODUCT,
+        TeacherDashboardPaths.COURSE_CONTRACTS,
+      ],
+    },
+    {
+      label: "organization's course",
+      course: CourseFactory().one(),
+      organization: OrganizationFactory().one(),
+      courseProductRelation: undefined,
+      expectedRoutes: [TeacherDashboardPaths.ORGANIZATION_COURSE_GENERAL_INFORMATION],
+    },
+    {
+      label: "organization's training",
+      course: CourseFactory().one(),
+      organization: OrganizationFactory().one(),
+      courseProductRelation: CourseProductRelationFactory().one(),
+      expectedRoutes: [
+        TeacherDashboardPaths.ORGANIZATION_PRODUCT,
+        TeacherDashboardPaths.ORGANIZATION_PRODUCT_CONTRACTS,
+      ],
+    },
+  ])(
+    'should display menu items for "$label" route',
+    async ({ course, organization, courseProductRelation, expectedRoutes }) => {
+      // mock api for organization's training
+      if (organization && courseProductRelation) {
+        // fetching training's contracts
+        nbApiRequest += 1;
+        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=25`,
+          [],
+        );
+        // fetching organization's training
+        nbApiRequest += 1;
+        fetchMock.get(
+          `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/course-product-relations/${courseProductRelation.id}/`,
+          courseProductRelation,
+        );
+      } else if (organization) {
+        // fetching organization's course
+        nbApiRequest += 1;
+        fetchMock.get(
+          `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/courses/${course.id}/`,
+          course,
+        );
+      } else if (courseProductRelation) {
+        // fetching training
+        nbApiRequest += 1;
+        fetchMock.get(
+          `https://joanie.endpoint/api/v1.0/course-product-relations/${courseProductRelation.id}/`,
+          courseProductRelation,
+        );
+      } else {
+        // mock api for course
+        nbApiRequest += 1;
+        fetchMock.get(`https://joanie.endpoint/api/v1.0/courses/${course.id}/`, course);
+      }
 
-    renderTeacherDashboardCourseSidebar({ courseId: course.id });
-    await expectNoSpinner('Loading course...');
-    expect(
-      screen.getByRole('link', {
-        name: intl.formatMessage(
-          TEACHER_DASHBOARD_ROUTE_LABELS[TeacherDashboardPaths.COURSE_GENERAL_INFORMATION],
-        ),
-      }),
-    ).toBeInTheDocument();
-
-    expect(screen.queryByTestId('organization-links')).not.toBeInTheDocument();
-    // general informations
-    // go to syllabus
-    expect(screen.getAllByRole('link')).toHaveLength(2);
-    expect(fetchMock.calls()).toHaveLength(nbApiRequest);
-  });
+      render(
+        <Wrapper
+          courseId={course.id}
+          courseProductRelationId={courseProductRelation ? courseProductRelation.id : undefined}
+          organizationId={organization ? organization.id : undefined}
+        >
+          <TeacherDashboardCourseSidebar />
+        </Wrapper>,
+      );
+
+      await expectNoSpinner('Loading course...');
+      expectedRoutes.forEach((expectedRoute) => {
+        expect(
+          screen.getByRole('link', {
+            name: intl.formatMessage(TEACHER_DASHBOARD_ROUTE_LABELS[expectedRoute]),
+          }),
+        ).toBeInTheDocument();
+      });
+
+      expect(screen.queryByTestId('organization-links')).not.toBeInTheDocument();
+
+      let nbExpectedLinks = expectedRoutes.length;
+      nbExpectedLinks += 1; // link to syllabus
+      expect(screen.getAllByRole('link')).toHaveLength(nbExpectedLinks);
+      expect(fetchMock.calls()).toHaveLength(nbApiRequest);
+    },
+  );
 });

package/js/widgets/Dashboard/components/TeacherDashboardCourseSidebar/index.tsx

@@ -2,7 +2,7 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { useParams } from 'react-router-dom';
 import { useMemo } from 'react';
 import { capitalize } from 'lodash-es';
-import { DashboardSidebar } from 'widgets/Dashboard/components/DashboardSidebar';
+import { DashboardSidebar, MenuLink } from 'widgets/Dashboard/components/DashboardSidebar';
 import {
   getDashboardRouteLabel,
   getDashboardRoutePath,
@@ -11,6 +11,8 @@ import { useCourse } from 'hooks/useCourses';
 import { Spinner } from 'components/Spinner';
 import { Icon, IconTypeEnum } from 'components/Icon';
 import { useCourseProductRelation } from 'hooks/useCourseProductRelation';
+import { TeacherDashboardPaths } from 'widgets/Dashboard/utils/teacherRouteMessages';
+import ContractNavLink from '../DashboardSidebar/components/ContractNavLink';
 import { getMenuRoutes } from './utils';
 
 export const messages = defineMessages({
@@ -41,23 +43,35 @@ export const TeacherDashboardCourseSidebar = () => {
   const getRoutePath = getDashboardRoutePath(intl);
   const getRouteLabel = getDashboardRouteLabel(intl);
   const {
-    courseId,
-    courseProductRelationId = '',
-    organizationId,
+    organizationId: routeOrganizationId,
+    courseId: routeCourseId,
+    courseProductRelationId: routeCourseProductRelationId = '',
   } = useParams<{
+    organizationId?: string;
     courseId: string;
     courseProductRelationId: string;
-    organizationId?: string;
   }>();
 
   const {
     item: singleCourse,
     states: { fetching: courseFetching },
-  } = useCourse(courseId, { organization_id: organizationId });
+  } = useCourse(
+    routeCourseId,
+    { organization_id: routeOrganizationId },
+    { enabled: !routeCourseProductRelationId },
+  );
+
   const {
     item: courseProductRelation,
     states: { fetching: courseProductRelationFetching },
-  } = useCourseProductRelation(courseProductRelationId, { organization_id: organizationId });
+  } = useCourseProductRelation(
+    routeCourseProductRelationId,
+    {
+      organization_id: routeOrganizationId,
+    },
+    { enabled: !!routeCourseProductRelationId },
+  );
+
   const fetching = useMemo(
     () => courseFetching || courseProductRelationFetching,
     [courseFetching, courseProductRelationFetching],
@@ -71,14 +85,48 @@ export const TeacherDashboardCourseSidebar = () => {
     [courseProductRelation, singleCourse],
   );
 
-  const menuLinks = getMenuRoutes({ courseProductRelationId, organizationId }).map((path) => ({
-    to: getRoutePath(path, { courseId, courseProductRelationId, organizationId }),
-    label: getRouteLabel(path),
-  }));
+  const getMenuLinkFromPath = (basePath: TeacherDashboardPaths) => {
+    const path = getRoutePath(basePath, {
+      organizationId: routeOrganizationId,
+      courseId: routeCourseId,
+      courseProductRelationId: routeCourseProductRelationId,
+    });
+
+    const menuLink: MenuLink = {
+      to: path,
+      label: getRouteLabel(basePath),
+    };
+
+    if (
+      [
+        TeacherDashboardPaths.ORGANIZATION_PRODUCT_CONTRACTS,
+        TeacherDashboardPaths.COURSE_PRODUCT_CONTRACTS,
+      ].includes(basePath)
+    ) {
+      menuLink.component = (
+        <ContractNavLink
+          link={menuLink}
+          organizationId={routeOrganizationId}
+          courseProductRelationId={routeCourseProductRelationId}
+        />
+      );
+    }
+
+    return menuLink;
+  };
+
+  const menuLinkList = useMemo(
+    () =>
+      getMenuRoutes({
+        courseProductRelationId: routeCourseProductRelationId,
+        organizationId: routeOrganizationId,
+      }).map(getMenuLinkFromPath),
+    [routeOrganizationId, routeCourseProductRelationId],
+  );
 
   return (
     <DashboardSidebar
-      menuLinks={menuLinks}
+      menuLinks={menuLinkList}
       header={
         course === undefined
           ? ''

package/js/widgets/Dashboard/components/TeacherDashboardCourseSidebar/utils.ts

@@ -4,16 +4,20 @@ interface GetMenuRoutesArgs {
   courseProductRelationId?: string;
   organizationId?: string;
 }
+
 export const getMenuRoutes = ({ courseProductRelationId, organizationId }: GetMenuRoutesArgs) => {
   if (organizationId) {
     if (courseProductRelationId) {
-      return [TeacherDashboardPaths.ORGANIZATION_PRODUCT];
+      return [
+        TeacherDashboardPaths.ORGANIZATION_PRODUCT,
+        TeacherDashboardPaths.ORGANIZATION_PRODUCT_CONTRACTS,
+      ];
     }
     return [TeacherDashboardPaths.ORGANIZATION_COURSE_GENERAL_INFORMATION];
   }
 
   if (courseProductRelationId) {
-    return [TeacherDashboardPaths.COURSE_PRODUCT];
+    return [TeacherDashboardPaths.COURSE_PRODUCT, TeacherDashboardPaths.COURSE_PRODUCT_CONTRACTS];
   }
   return [TeacherDashboardPaths.COURSE_GENERAL_INFORMATION];
 };

package/package.json

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