richie 2.25.0b2.dev26__py2.py3-none-any.whl → 2.25.0b2.dev30__py2.py3-none-any.whl

frontend/js/components/ContractFrame/AbstractContractFrame.spec.tsx

@@ -151,6 +151,11 @@ describe('<AbstractContractFrame />', () => {
     await waitFor(() => {
       expect(screen.getByRole('heading', { name: 'Verifying signature ...' })).toBeInTheDocument();
     });
+    expect(
+      screen.getByText(
+        'We are waiting for the signature to be validated from our signature platform. It can take up to few minutes. Do not close this page.',
+      ),
+    ).toBeInTheDocument();
     expect(screen.getByRole('status')).toBeInTheDocument();
 
     checkSignatureDeferred.resolve({ isSigned: true });
@@ -207,6 +212,11 @@ describe('<AbstractContractFrame />', () => {
     await waitFor(() => {
       expect(screen.getByRole('heading', { name: 'Verifying signature ...' })).toBeInTheDocument();
     });
+    expect(
+      screen.getByText(
+        'We are waiting for the signature to be validated from our signature platform. It can take up to few minutes. Do not close this page.',
+      ),
+    ).toBeInTheDocument();
     expect(screen.getByRole('status')).toBeInTheDocument();
 
     checkSignatureDeferred.reject(new HttpError(500, 'Interval server error'));
@@ -263,6 +273,11 @@ describe('<AbstractContractFrame />', () => {
     await waitFor(() => {
       expect(screen.getByRole('heading', { name: 'Verifying signature ...' })).toBeInTheDocument();
     });
+    expect(
+      screen.getByText(
+        'We are waiting for the signature to be validated from our signature platform. It can take up to few minutes. Do not close this page.',
+      ),
+    ).toBeInTheDocument();
     expect(screen.getByRole('status')).toBeInTheDocument();
 
     checkSignatureDeferred.resolve({ isSigned: false });

frontend/js/components/ContractFrame/AbstractContractFrame.tsx

@@ -50,6 +50,12 @@ export const messages = defineMessages({
     description: 'Message displayed inside the contract signin modal when polling the order.',
     id: 'components.DashboardItem.Order.ContractFrame.polling',
   },
+  pollingDescription: {
+    defaultMessage:
+      'We are waiting for the signature to be validated from our signature platform. It can take up to few minutes. Do not close this page.',
+    description: 'Message displayed inside the contract signin modal when polling the order.',
+    id: 'components.DashboardItem.Order.ContractFrame.pollingDescription',
+  },
   finishedCaption: {
     defaultMessage: 'Congratulations!',
     description: 'Title displayed inside the contract signin modal when the contract is signed.',
@@ -251,9 +257,14 @@ const ContractFrameContent = ({
       )}
       {step === ContractSteps.POLLING && (
         <div className="ContractFrame__loading-container">
-          <h3 className="ContractFrame__caption">
-            <FormattedMessage {...messages.polling} />
-          </h3>
+          <div>
+            <h3 className="ContractFrame__caption">
+              <FormattedMessage {...messages.polling} />
+            </h3>
+            <p className="ContractFrame__content">
+              <FormattedMessage {...messages.pollingDescription} />
+            </p>
+          </div>
           <Loader />
         </div>
       )}

frontend/js/hooks/useContracts/index.tsx

@@ -1,7 +1,7 @@
 import { defineMessages } from 'react-intl';
 import { useJoanieApi } from 'contexts/JoanieApiContext';
 import { QueryOptions, useResource, useResources, UseResourcesProps } from 'hooks/useResources';
-import { API, Contract, ContractFilters } from 'types/Joanie';
+import { API, Contract, ContractResourceQuery } from 'types/Joanie';
 
 const messages = defineMessages({
   errorGet: {
@@ -16,7 +16,7 @@ const messages = defineMessages({
   },
 });
 
-const props: UseResourcesProps<Contract, ContractFilters, API['user']['contracts']> = {
+const props: UseResourcesProps<Contract, ContractResourceQuery, API['user']['contracts']> = {
   queryKey: ['contracts'],
   apiInterface: () => useJoanieApi().user.contracts,
   session: true,
@@ -34,7 +34,7 @@ export const useUserContracts = useResources(props);
  */
 const organizationProps: UseResourcesProps<
   Contract,
-  ContractFilters,
+  ContractResourceQuery,
   API['organizations']['contracts']
 > = {
   ...props,
@@ -44,7 +44,7 @@ const organizationProps: UseResourcesProps<
 
 export const useOrganizationContract = (
   id: string,
-  filters: ContractFilters,
+  filters: ContractResourceQuery,
   queryOptions?: QueryOptions<Contract>,
 ) => {
   return useResource(organizationProps)(id, filters, {
@@ -57,7 +57,7 @@ export const useOrganizationContract = (
 };
 
 export const useOrganizationContracts = (
-  filters: ContractFilters,
+  filters: ContractResourceQuery,
   queryOptions?: QueryOptions<Contract>,
 ) => {
   return useResources(organizationProps)(filters, {

frontend/js/hooks/useTeacherPendingContractsCount/index.ts

@@ -1,6 +1,4 @@
-import { useMemo } from 'react';
 import { useOrganizationContracts } from 'hooks/useContracts';
-import { useCourseProductRelation } from 'hooks/useCourseProductRelation';
 import { PER_PAGE } from 'settings';
 import { ContractState, CourseProductRelation, Organization } from 'types/Joanie';
 
@@ -13,30 +11,15 @@ const useTeacherPendingContractsCount = ({
   organizationId,
   courseProductRelationId,
 }: UseTeacherPendingContractsCountProps) => {
-  const {
-    item: training,
-    states: { isFetched: isTrainingFetched },
-  } = useCourseProductRelation(courseProductRelationId, {
+  const { items: contracts, meta } = useOrganizationContracts({
     organization_id: organizationId,
+    course_product_relation_id: courseProductRelationId,
+    signature_state: ContractState.LEARNER_SIGNED,
+    page: 1,
+    page_size: PER_PAGE.teacherContractList,
   });
 
-  const isActive = useMemo(() => {
-    return !!(organizationId && (!courseProductRelationId || isTrainingFetched));
-  }, [organizationId, courseProductRelationId, isTrainingFetched]);
-
-  const { items: contracts, meta } = useOrganizationContracts(
-    {
-      organization_id: organizationId,
-      course_id: training?.course.id,
-      product_id: training?.product.id,
-      signature_state: ContractState.LEARNER_SIGNED,
-      page: 1,
-      page_size: PER_PAGE.teacherContractList,
-    },
-    { enabled: isActive },
-  );
-
-  if (isActive) {
+  if (organizationId) {
     return {
       contracts,
       pendingContractCount: meta?.pagination?.count ?? 0,

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

@@ -78,19 +78,22 @@ describe('pages/TeacherDashboardContracts', () => {
     }).many(3);
     const organization = OrganizationFactory().one();
 
+    // OrganizationContractFilter request all organizations forwho the user have access
     fetchMock.get(`https://joanie.test/api/v1.0/organizations/`, [organization]);
+    // TeacherDashboardContracts request a paginated list of contracts to display
     fetchMock.get(
-      `https://joanie.test/api/v1.0/organizations/${organization.id}/contracts/?signature_state=signed&course_id=1&product_id=2&page=1&page_size=25`,
+      `https://joanie.test/api/v1.0/organizations/${organization.id}/contracts/?signature_state=signed&course_product_relation_id=2&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/?signature_state=half_signed&course_id=1&product_id=2`,
+      `https://joanie.test/api/v1.0/organizations/${organization.id}/contracts/?signature_state=half_signed&course_product_relation_id=2`,
       { results: [], count: 0, previous: null, next: null },
     );
 
     render(
       <Wrapper
-        path="/courses/:courseId/products/:productId/contracts"
+        path="/courses/:courseId/products/:courseProductRelationId/contracts"
         initialEntry="/courses/1/products/2/contracts"
       />,
     );

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

@@ -7,9 +7,9 @@ import { ContractHelper, ContractStatePoV } from 'utils/ContractHelper';
 import { useOrganizationContracts } from 'hooks/useContracts';
 import Banner, { BannerType } from 'components/Banner';
 import { PER_PAGE } from 'settings';
-import { ContractFilters } from 'types/Joanie';
+import { ContractResourceQuery } from 'types/Joanie';
 
-import ContractFiltersBar from '../components/ContractFilters';
+import ContractFiltersBar from '../components/ContractFiltersBar';
 import useTeacherContractFilters, {
   TeacherDashboardContractsParams,
 } from '../hooks/useTeacherContractFilters';
@@ -62,7 +62,7 @@ const TeacherDashboardContracts = () => {
     }));
   }, [contracts]);
 
-  const handleFiltersChange = (newFilters: Partial<ContractFilters>) => {
+  const handleFiltersChange = (newFilters: Partial<ContractResourceQuery>) => {
     // Reset pagination
     pagination.setPage(1);
     setFilters((prevFilters) => ({ ...prevFilters, ...newFilters }));
@@ -83,8 +83,7 @@ const TeacherDashboardContracts = () => {
       <div className="dashboard__page__actions">
         <ContractActionsBar
           organizationId={filters.organization_id!}
-          courseId={filters.course_id}
-          productId={filters.product_id}
+          courseProductRelationId={filters.course_product_relation_id}
         />
         <ContractFiltersBar
           defaultValues={initialFilters}

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

@@ -1,18 +1,16 @@
-import { CourseListItem, Organization, Product } from 'types/Joanie';
+import { Organization, CourseProductRelation } from 'types/Joanie';
 import useTeacherContractsToSign from 'pages/TeacherDashboardContractsLayout/hooks/useTeacherContractsToSign';
 import SignOrganizationContractButton from '../SignOrganizationContractButton';
 
 interface ContractActionsProps {
-  courseId?: CourseListItem['id'];
-  productId?: Product['id'];
   organizationId: Organization['id'];
+  courseProductRelationId?: CourseProductRelation['id'];
 }
 
-const ContractActionsBar = ({ courseId, productId, organizationId }: ContractActionsProps) => {
+const ContractActionsBar = ({ organizationId, courseProductRelationId }: ContractActionsProps) => {
   const { canSignContracts, contractsToSignCount } = useTeacherContractsToSign({
     organizationId,
-    courseId,
-    productId,
+    courseProductRelationId,
   });
   return (
     canSignContracts && (

frontend/js/pages/TeacherDashboardContractsLayout/components/ContractFiltersBar/index.spec.tsx

@@ -0,0 +1,179 @@
+import { IntlProvider } from 'react-intl';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { CunninghamProvider } from '@openfun/cunningham-react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { PropsWithChildren } from 'react';
+import fetchMock from 'fetch-mock';
+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 { ContractState } from 'types/Joanie';
+import { OrganizationFactory } from 'utils/test/factories/joanie';
+import { expectNoSpinner } from 'utils/test/expectSpinner';
+import { noop } from 'utils';
+import ContractFiltersBar from '.';
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: { backend: 'fonzie', endpoint: 'https://auth.endpoint.test' },
+    joanie_backend: { endpoint: 'https://joanie.test' },
+  }).one(),
+}));
+
+describe('<ContractFiltersBar/>', () => {
+  const Wrapper = ({ children }: PropsWithChildren) => {
+    return (
+      <IntlProvider locale="en">
+        <QueryClientProvider client={createTestQueryClient({ user: true })}>
+          <JoanieSessionProvider>
+            <CunninghamProvider>{children}</CunninghamProvider>
+          </JoanieSessionProvider>
+        </QueryClientProvider>
+      </IntlProvider>
+    );
+  };
+
+  beforeEach(() => {
+    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 SignatureState and Organization filters with default value', async () => {
+    const filterChange = jest.fn();
+    const organizations = OrganizationFactory().many(2);
+    const defaultValues = {
+      signature_state: ContractState.LEARNER_SIGNED,
+      organization_id: organizations[1].id,
+    };
+
+    fetchMock.get('https://joanie.test/api/v1.0/organizations/', organizations);
+
+    render(
+      <Wrapper>
+        <ContractFiltersBar onFiltersChange={filterChange} defaultValues={defaultValues} />
+      </Wrapper>,
+    );
+
+    await waitFor(() => expectNoSpinner());
+
+    // Two selects should have rendered
+    const organizationFilter: HTMLInputElement = screen.getByRole('combobox', {
+      name: 'Organization',
+    });
+    expect(organizationFilter).toHaveAttribute('value', organizations[1].title);
+
+    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');
+
+    expect(filterChange).not.toHaveBeenCalled();
+
+    // Now change value of organization filter should trigger the onFiltersChange callback
+    const user = userEvent.setup();
+    await user.click(organizationFilter);
+    let optionToSelect = screen.getByRole('option', { name: organizations[0].title });
+    await user.click(optionToSelect);
+    expect(filterChange).toHaveBeenNthCalledWith(1, { organization_id: organizations[0].id });
+
+    // Then change value of signature state filter should trigger the onFiltersChange callback too
+    filterChange.mockRestore();
+    await user.click(signatureStateFilter);
+    optionToSelect = screen.getByRole('option', { name: 'Signed' });
+    await user.click(optionToSelect);
+    expect(filterChange).toHaveBeenNthCalledWith(1, { signature_state: ContractState.SIGNED });
+  });
+
+  it('should allow to hide signatureState filter', async () => {
+    const organizations = OrganizationFactory().many(2);
+    const defaultValues = {
+      organization_id: organizations[0].id,
+    };
+
+    fetchMock.get('https://joanie.test/api/v1.0/organizations/', organizations);
+
+    render(
+      <Wrapper>
+        <ContractFiltersBar
+          onFiltersChange={noop}
+          defaultValues={defaultValues}
+          hideFilterSignatureState={true}
+        />
+      </Wrapper>,
+    );
+
+    await waitFor(() => expectNoSpinner());
+
+    // Organization filter should have been rendered
+    screen.getByRole('combobox', { name: 'Organization' });
+
+    // Signature state filter should have not been rendered
+    const signatureStateFilter = screen.queryByRole('combobox', {
+      name: 'Signature state',
+      hidden: true,
+    });
+    expect(signatureStateFilter).not.toBeInTheDocument();
+  });
+
+  it('should allow to hide organization filter', async () => {
+    const organizations = OrganizationFactory().many(2);
+    const defaultValues = {
+      organization_id: organizations[0].id,
+    };
+
+    fetchMock.get('https://joanie.test/api/v1.0/organizations/', organizations);
+
+    render(
+      <Wrapper>
+        <ContractFiltersBar
+          onFiltersChange={noop}
+          defaultValues={defaultValues}
+          hideFilterOrganization={true}
+        />
+      </Wrapper>,
+    );
+
+    await waitFor(() => 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();
+  });
+
+  it('should be able to select default value for organization if none are provided', async () => {
+    const organizations = OrganizationFactory().many(2);
+    const handleChange = jest.fn();
+
+    fetchMock.get('https://joanie.test/api/v1.0/organizations/', organizations);
+
+    render(
+      <Wrapper>
+        <ContractFiltersBar onFiltersChange={handleChange} />
+      </Wrapper>,
+    );
+
+    await waitFor(() => expectNoSpinner());
+
+    // Organization filter should have been rendered and the first organization should be selected
+    const organizationFilter = screen.getByRole('combobox', { name: 'Organization' });
+    expect(organizationFilter).toHaveAttribute('value', organizations[0].title);
+    expect(handleChange).toHaveBeenNthCalledWith(1, { organization_id: organizations[0].id });
+  });
+});

frontend/js/pages/TeacherDashboardContractsLayout/components/ContractFiltersBar/index.tsx

@@ -0,0 +1,125 @@
+import { Select, SelectProps } from '@openfun/cunningham-react';
+import { defineMessages, useIntl } from 'react-intl';
+import { useEffect } from 'react';
+import { useOrganizations } from 'hooks/useOrganizations';
+import { ContractState } from 'types/Joanie';
+import { ContractHelper, ContractStatePoV } from 'utils/ContractHelper';
+import { Spinner } from 'components/Spinner';
+
+export const messages = defineMessages({
+  organizationFilterLabel: {
+    defaultMessage: 'Organization',
+    description: 'Use as organization filter label',
+    id: 'pages.TeacherDashboardContractsLayout.ContractFilters.organizationFilterLabel',
+  },
+  contractSignatureStateLabel: {
+    defaultMessage: 'Signature state',
+    description: 'Contract signature state filter label',
+    id: 'pages.TeacherDashboardContractsLayout.ContractFilters.contractSignatureStateFilterLabel',
+  },
+});
+
+export interface ContractListFilters {
+  organization_id?: string;
+  signature_state?: ContractState;
+}
+
+interface ContractFiltersBarProps {
+  onFiltersChange: (filters: Partial<ContractListFilters>) => void;
+  defaultValues?: ContractListFilters;
+  hideFilterOrganization?: boolean;
+  hideFilterSignatureState?: boolean;
+}
+
+interface FilterProps {
+  defaultValue?: SelectProps['defaultValue'];
+  onChange: (value: Partial<ContractListFilters>) => void;
+}
+
+const ContractFiltersBar = ({
+  defaultValues,
+  onFiltersChange,
+  hideFilterOrganization = false,
+  hideFilterSignatureState = false,
+}: ContractFiltersBarProps) => {
+  return (
+    <div className="dashboard__page__actions-row dashboard__page__actions-row--end">
+      {!hideFilterOrganization && (
+        <OrganizationContractFilter
+          defaultValue={defaultValues?.organization_id}
+          onChange={onFiltersChange}
+        />
+      )}
+      {!hideFilterSignatureState && (
+        <SignatureStateFilter
+          defaultValue={defaultValues?.signature_state}
+          onChange={onFiltersChange}
+        />
+      )}
+    </div>
+  );
+};
+
+const OrganizationContractFilter = ({ defaultValue, onChange }: FilterProps) => {
+  const intl = useIntl();
+  const {
+    items: organizations,
+    states: { isFetched },
+  } = useOrganizations();
+
+  const organizationOptions = organizations.map((organization) => ({
+    label: organization.title,
+    value: organization.id,
+  }));
+
+  const handleChange: SelectProps['onChange'] = (e) => {
+    const value = e.target.value as string;
+    onChange({ organization_id: value });
+  };
+
+  useEffect(() => {
+    if (isFetched && defaultValue === undefined) {
+      onChange({ organization_id: organizationOptions[0]?.value });
+    }
+  }, [defaultValue, isFetched]);
+
+  if (!isFetched) return <Spinner />;
+
+  return (
+    <Select
+      label={intl.formatMessage(messages.organizationFilterLabel)}
+      options={organizationOptions}
+      defaultValue={defaultValue || organizationOptions[0].value}
+      onChange={handleChange}
+      disabled={!isFetched}
+      clearable={false}
+      searchable={true}
+    />
+  );
+};
+
+const SignatureStateFilter = ({ defaultValue, onChange }: FilterProps) => {
+  const intl = useIntl();
+  const contractStateOptions = Object.values(ContractState)
+    .filter((value) => value !== ContractState.UNSIGNED)
+    .map((value) => ({
+      label: ContractHelper.getStateLabel(value, ContractStatePoV.ORGANIZATION, intl),
+      value,
+    }));
+
+  const handleChange: SelectProps['onChange'] = (e) => {
+    const value = e.target.value as ContractState;
+    onChange({ signature_state: value });
+  };
+
+  return (
+    <Select
+      label={intl.formatMessage(messages.contractSignatureStateLabel)}
+      options={contractStateOptions}
+      defaultValue={defaultValue}
+      onChange={handleChange}
+    />
+  );
+};
+
+export default ContractFiltersBar;

frontend/js/pages/TeacherDashboardContractsLayout/hooks/useTeacherContractFilters.tsx

@@ -1,15 +1,14 @@
 import { useMemo, useState } from 'react';
 import { useParams, useSearchParams } from 'react-router-dom';
-import { ContractFilters, ContractState } from 'types/Joanie';
+import { ContractResourceQuery, ContractState } from 'types/Joanie';
 
 export type TeacherDashboardContractsParams = {
   organizationId?: string;
-  courseId?: string;
-  productId?: string;
+  courseProductRelationId?: string;
 };
 
 const useTeacherContractFilters = () => {
-  const { courseId, organizationId, productId } = useParams<TeacherDashboardContractsParams>();
+  const { organizationId, courseProductRelationId } = useParams<TeacherDashboardContractsParams>();
   const [searchParams] = useSearchParams();
 
   const initialFilters = useMemo(
@@ -17,12 +16,11 @@ const useTeacherContractFilters = () => {
       signature_state:
         (searchParams.get('signature_state') as ContractState) || ContractState.SIGNED,
       organization_id: organizationId,
-      course_id: courseId,
-      product_id: productId,
+      course_product_relation_id: courseProductRelationId,
     }),
     [],
   );
-  const [filters, setFilters] = useState<ContractFilters>(initialFilters);
+  const [filters, setFilters] = useState<ContractResourceQuery>(initialFilters);
 
   return { initialFilters, filters, setFilters };
 };

frontend/js/pages/TeacherDashboardContractsLayout/hooks/useTeacherContractsToSign.tsx

@@ -1,25 +1,25 @@
 import useContractAbilities from 'hooks/useContractAbilities';
 import { useOrganizationContracts } from 'hooks/useContracts';
-import { ContractState, CourseListItem, Organization, Product } from 'types/Joanie';
+import { ContractState, Organization, CourseProductRelation } from 'types/Joanie';
 import { ContractActions } from 'utils/AbilitiesHelper/types';
 
 interface UseTeacherContractsToSignProps {
-  courseId?: CourseListItem['id'];
-  productId?: Product['id'];
   organizationId?: Organization['id'];
+  courseProductRelationId?: CourseProductRelation['id'];
 }
 
 const useTeacherContractsToSign = ({
-  courseId,
-  productId,
   organizationId,
+  courseProductRelationId,
 }: UseTeacherContractsToSignProps) => {
-  const { items: contractsToSign, meta: contractsToSignMeta } = useOrganizationContracts({
-    signature_state: ContractState.LEARNER_SIGNED,
-    organization_id: organizationId,
-    course_id: courseId,
-    product_id: productId,
-  });
+  const { items: contractsToSign, meta: contractsToSignMeta } = useOrganizationContracts(
+    {
+      signature_state: ContractState.LEARNER_SIGNED,
+      organization_id: organizationId,
+      course_product_relation_id: courseProductRelationId,
+    },
+    { enabled: !!organizationId },
+  );
   const contractAbilities = useContractAbilities(contractsToSign);
   const contractsToSignCount = contractsToSignMeta?.pagination?.count ?? 0;
 

frontend/js/types/Joanie.ts

@@ -427,10 +427,9 @@ export enum ContractState {
   LEARNER_SIGNED = 'half_signed',
   SIGNED = 'signed',
 }
-export interface ContractFilters extends PaginatedResourceQuery {
+export interface ContractResourceQuery extends PaginatedResourceQuery {
   organization_id?: Organization['id'];
-  course_id?: CourseListItem['id'];
-  product_id?: Product['id'];
+  course_product_relation_id?: CourseProductRelation['id'];
   contract_ids?: Contract['id'][];
   signature_state?: ContractState;
 }
@@ -516,8 +515,8 @@ interface APIUser {
   };
   contracts: {
     get(
-      filters?: ContractFilters,
-    ): ContractFilters extends { id: string }
+      filters?: ContractResourceQuery,
+    ): ContractResourceQuery extends { id: string }
       ? Promise<Nullable<Contract>>
       : Promise<PaginatedResponse<Contract>>;
     download(id: string): Promise<File>;
@@ -542,8 +541,8 @@ export interface API {
     ): Filters extends { id: string } ? Promise<Nullable<Organization>> : Promise<Organization[]>;
     contracts: {
       get(
-        filters?: ContractFilters,
-      ): ContractFilters extends { id: string }
+        filters?: ContractResourceQuery,
+      ): ContractResourceQuery extends { id: string }
         ? Promise<Nullable<Contract>>
         : Promise<PaginatedResponse<Contract>>;
       getSignatureLinks(

frontend/js/widgets/Dashboard/components/TeacherDashboardOrganizationSidebar/index.tsx

@@ -33,9 +33,9 @@ export const TeacherDashboardOrganizationSidebar = () => {
   const intl = useIntl();
   const getRoutePath = getDashboardRoutePath(intl);
   const getRouteLabel = getDashboardRouteLabel(intl);
-  const { organizationId, productId: courseProductRelationId } = useParams<{
+  const { organizationId, courseProductRelationId } = useParams<{
     organizationId: string;
-    productId?: string;
+    courseProductRelationId?: string;
   }>();
   const {
     item: organization,