richie-education 3.1.3-dev11 → 3.1.3-dev12

package/js/hooks/useCourseProducts.ts

@@ -1,5 +1,5 @@
 import { defineMessages } from 'react-intl';
-import { API, CourseProductQueryFilters, CourseProductRelation, Product } from 'types/Joanie';
+import { API, CourseProductQueryFilters, Offer, Product } from 'types/Joanie';
 import { QueryOptions, useResourcesCustom, UseResourcesProps } from 'hooks/useResources';
 import { useJoanieApi } from 'contexts/JoanieApiContext';
 
@@ -19,11 +19,7 @@ export const messages = defineMessages({
 /**
  * Joanie Api hook to retrieve a product through its id and a course code.
  */
-const props: UseResourcesProps<
-  CourseProductRelation,
-  CourseProductQueryFilters,
-  API['courses']['products']
-> = {
+const props: UseResourcesProps<Offer, CourseProductQueryFilters, API['courses']['products']> = {
   queryKey: ['courses-products'],
   apiInterface: () => useJoanieApi().courses.products,
   messages,
@@ -31,11 +27,11 @@ const props: UseResourcesProps<
 
 export const useCourseProduct = (
   filters: Omit<CourseProductQueryFilters, 'id'> & { product_id: Product['id'] },
-  queryOptions?: QueryOptions<CourseProductRelation>,
+  queryOptions?: QueryOptions<Offer>,
 ) => {
   const { product_id: productId, ...queryfilters } = filters;
   const enabled = !!productId && !!queryfilters.course_id;
-  const resources = useResourcesCustom<CourseProductRelation, CourseProductQueryFilters>({
+  const resources = useResourcesCustom<Offer, CourseProductQueryFilters>({
     ...props,
     filters: { id: productId, ...queryfilters },
     queryOptions: { ...queryOptions, enabled },

package/js/hooks/useDefaultOrganizationId/index.tsx

@@ -1,6 +1,6 @@
 import { useParams, useSearchParams } from 'react-router';
 import { useOrganizations } from 'hooks/useOrganizations';
-import { CourseProductRelation, Organization } from 'types/Joanie';
+import { Offer, Organization } from 'types/Joanie';
 
 /**
  * return organization id with this priority:
@@ -9,17 +9,14 @@ import { CourseProductRelation, Organization } from 'types/Joanie';
  * * first organization of user's organizations
  */
 const useDefaultOrganizationId = () => {
-  const {
-    organizationId: routeOrganizationId,
-    courseProductRelationId: routeCourseProductRelationId,
-  } = useParams<{
+  const { organizationId: routeOrganizationId, offerId: routeOfferId } = useParams<{
     organizationId?: Organization['id'];
-    courseProductRelationId: CourseProductRelation['id'];
+    offerId: Offer['id'];
   }>();
   const [searchParams] = useSearchParams();
   const queryOrganizationId = searchParams.get('organization_id') || undefined;
   const { items: organizations } = useOrganizations(
-    { course_product_relation_id: routeCourseProductRelationId },
+    { offer_id: routeOfferId },
     {
       enabled: !routeOrganizationId && !queryOrganizationId,
     },

package/js/hooks/useOffer/index.ts

@@ -0,0 +1,32 @@
+import { defineMessages } from 'react-intl';
+import { useJoanieApi } from 'contexts/JoanieApiContext';
+import { API, Offer, OfferQueryFilters } from 'types/Joanie';
+import { useResource, useResources, UseResourcesProps } from 'hooks/useResources';
+
+const messages = defineMessages({
+  errorGet: {
+    id: 'hooks.useOffers.errorGet',
+    description: 'Error message shown to the user when offer fetch request fails.',
+    defaultMessage: 'An error occurred while fetching trainings. Please retry later.',
+  },
+  errorNotFound: {
+    id: 'hooks.useOffers.errorNotFound',
+    description: 'Error message shown to the user when no offer matches.',
+    defaultMessage: 'Cannot find the training.',
+  },
+});
+
+/**
+ * Joanie Api hook to retrieve/create/update/delete course
+ * owned by the authenticated user.
+ */
+const props: UseResourcesProps<Offer, OfferQueryFilters, API['offers']> = {
+  queryKey: ['offers'],
+  apiInterface: () => useJoanieApi().offers,
+  session: true,
+  messages,
+};
+
+export const useOffers = useResources<Offer, OfferQueryFilters, API['offers']>(props);
+
+export const useOffer = useResource<Offer, OfferQueryFilters>(props);

package/js/hooks/useTeacherCoursesSearch/index.tsx

@@ -1,16 +1,16 @@
 import { useEffect, useState } from 'react';
 import { useParams, useSearchParams } from 'react-router';
 import { useCourseProductUnion } from 'hooks/useCourseProductUnion';
-import { CourseListItem, CourseProductRelationLight, ProductType } from 'types/Joanie';
+import { CourseListItem, OfferLight, ProductType } from 'types/Joanie';
 import { Maybe, Nullable } from 'types/utils';
 
 const useTeacherCoursesSearch = () => {
   const { organizationId } = useParams<{ organizationId: string }>();
   const [searchParams, setSearchParams] = useSearchParams();
   const [count, setCount] = useState<Maybe<number>>(0);
-  const [courseAndProductList, setCourseAndProductList] = useState<
-    (CourseListItem | CourseProductRelationLight)[]
-  >([]);
+  const [courseAndProductList, setCourseAndProductList] = useState<(CourseListItem | OfferLight)[]>(
+    [],
+  );
   const [isNewSearchLoading, setIsNewSearchLoading] = useState(false);
   const query = searchParams.get('query') || undefined;
   const {

package/js/hooks/useTeacherPendingContractsCount/index.ts

@@ -1,19 +1,19 @@
 import { useOrganizationContracts } from 'hooks/useContracts';
 import { PER_PAGE } from 'settings';
-import { ContractState, CourseProductRelation, Organization } from 'types/Joanie';
+import { ContractState, Offer, Organization } from 'types/Joanie';
 
 interface UseTeacherPendingContractsCountProps {
   organizationId?: Organization['id'];
-  courseProductRelationId?: CourseProductRelation['id'];
+  offerId?: Offer['id'];
 }
 
 const useTeacherPendingContractsCount = ({
   organizationId,
-  courseProductRelationId,
+  offerId,
 }: UseTeacherPendingContractsCountProps) => {
   const { items: contracts, meta } = useOrganizationContracts({
     organization_id: organizationId,
-    course_product_relation_id: courseProductRelationId,
+    offer_id: offerId,
     signature_state: ContractState.LEARNER_SIGNED,
     page: 1,
     page_size: PER_PAGE.teacherContractList,

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

@@ -5,12 +5,12 @@ import userEvent from '@testing-library/user-event';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
 import { DashboardTest } from 'widgets/Dashboard/components/DashboardTest';
 import {
-  CourseProductRelationFactory,
+  OfferFactory,
   EnrollmentFactory,
   CredentialOrderFactory,
 } from 'utils/test/factories/joanie';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
-import { CourseLight, CourseProductRelation, Enrollment, CredentialOrder } from 'types/Joanie';
+import { CourseLight, Offer, Enrollment, CredentialOrder } from 'types/Joanie';
 import { expectNoSpinner, expectSpinner } from 'utils/test/expectSpinner';
 import { expectBannerError, expectBannerInfo, expectNoBannerInfo } from 'utils/test/expectBanner';
 import { Deferred } from 'utils/test/deferred';
@@ -54,15 +54,15 @@ describe('<DashboardCourses/>', () => {
   const perPage = PER_PAGE.useOrdersEnrollments;
 
   const mockOrders = (orders: CredentialOrder[], client?: QueryClient) => {
-    const relations: Record<string, CourseProductRelation> = {};
+    const offers: Record<string, Offer> = {};
     orders.forEach((order) => {
       const productId = order.product_id;
       const courseCode = (order.course as CourseLight).code;
-      const relation = CourseProductRelationFactory().one();
+      const offer = OfferFactory().one();
 
       fetchMock.get(
         `https://joanie.endpoint/api/v1.0/courses/${courseCode}/products/${productId}/`,
-        relation,
+        offer,
       );
 
       // Allowing this option boosts the test performances. Without it, the tests case with 200+
@@ -70,28 +70,28 @@ describe('<DashboardCourses/>', () => {
       if (client) {
         client.setQueryData(
           ['courses-products', JSON.stringify({ id: courseCode, productId })],
-          relation,
+          offer,
         );
       }
-      relations[order.id] = relation;
+      offers[order.id] = offer;
     });
     orders.sort((a, b) => {
       const aDate = new Date(a.created_on);
       const bDate = new Date(b.created_on);
       return bDate.getTime() - aDate.getTime();
     });
-    return { orders, relations };
+    return { orders, offers };
   };
 
   const expectList = (
     entities: (CredentialOrder | Enrollment)[],
-    relations: Record<string, CourseProductRelation>,
+    offers: Record<string, Offer>,
   ) => {
     const itemElements = document.querySelectorAll<HTMLElement>('.dashboard__courses__list__item');
     expect(itemElements.length).toBe(entities.length);
     entities.forEach((entity, i) => {
       const title = isOrder(entity)
-        ? relations[entity.id].product.title
+        ? offers[entity.id].product.title
         : entity.course_run.course?.title;
       getByRole(itemElements[i], 'heading', {
         name: title,
@@ -146,10 +146,7 @@ describe('<DashboardCourses/>', () => {
 
   it('should render the list of entities', async () => {
     const client = createTestQueryClient({ user: true });
-    const { orders, relations } = mockOrders(
-      CredentialOrderFactory().many(perPage * 2 + 1),
-      client,
-    );
+    const { orders, offers } = mockOrders(CredentialOrderFactory().many(perPage * 2 + 1), client);
     fetchMock.get(
       'https://joanie.endpoint/api/v1.0/orders/' +
         '?product_type=credential' +
@@ -255,18 +252,18 @@ describe('<DashboardCourses/>', () => {
     await expectNoBannerInfo('You have no enrollments nor orders yet');
     let loadMoreButton = await screen.findByRole('button', { name: 'Load more' });
     expect(loadMoreButton).toBeEnabled();
-    await waitFor(() => expectList(entities.slice(0, perPage), relations), { interval: 200 });
+    await waitFor(() => expectList(entities.slice(0, perPage), offers), { interval: 200 });
 
     // Click on load more button to load slice 2.
     await act(async () => userEvent.click(loadMoreButton));
-    await waitFor(() => expectList(entities.slice(0, perPage * 2), relations));
+    await waitFor(() => expectList(entities.slice(0, perPage * 2), offers));
     loadMoreButton = await screen.findByRole('button', { name: 'Load more' });
     expect(loadMoreButton).toBeEnabled();
 
     // Activate intersection observe to load slice 3.
     const { onIntersect } = (globalThis as any).__intersection_observer_props__;
     await waitFor(async () => onIntersect());
-    await waitFor(() => expectList(entities.slice(0, perPage * 3), relations), { timeout: 30000 });
+    await waitFor(() => expectList(entities.slice(0, perPage * 3), offers), { timeout: 30000 });
     loadMoreButton = await screen.findByRole('button', { name: 'Load more' });
     expect(loadMoreButton).toBeEnabled();
   }, 15000);

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

@@ -3,11 +3,7 @@ import { 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 {
-  ContractFactory,
-  CourseProductRelationFactory,
-  OrganizationFactory,
-} from 'utils/test/factories/joanie';
+import { ContractFactory, OfferFactory, OrganizationFactory } from 'utils/test/factories/joanie';
 import { expectNoSpinner } from 'utils/test/expectSpinner';
 import { expectBannerError } from 'utils/test/expectBanner';
 import { HttpStatusCode } from 'utils/errors/HttpError';
@@ -37,8 +33,8 @@ jest.mock('components/ContractFrame', () => ({
 describe('pages/TeacherDashboardContracts', () => {
   setupJoanieSession();
 
-  it('should render a list of contracts for a course product relation', async () => {
-    const courseProductRelation = CourseProductRelationFactory().one();
+  it('should render a list of contracts for a offer', async () => {
+    const offer = OfferFactory().one();
     const contracts = ContractFactory({
       student_signed_on: Date.toString(),
       organization_signed_on: Date.toString(),
@@ -48,26 +44,24 @@ describe('pages/TeacherDashboardContracts', () => {
 
     // OrganizationContractFilter request all organizations forwho the user have access
     fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/organizations/?course_product_relation_id=${courseProductRelation.id}`,
+      `https://joanie.endpoint/api/v1.0/organizations/?offer_id=${offer.id}`,
       organizations,
     );
     // TeacherDashboardContracts request a paginated list of contracts to display
     fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/organizations/${defaultOrganization.id}/contracts/?course_product_relation_id=${courseProductRelation.id}&signature_state=signed&page=1&page_size=25`,
+      `https://joanie.endpoint/api/v1.0/organizations/${defaultOrganization.id}/contracts/?offer_id=${offer.id}&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.endpoint/api/v1.0/organizations/${defaultOrganization.id}/contracts/?signature_state=half_signed&course_product_relation_id=${courseProductRelation.id}`,
+      `https://joanie.endpoint/api/v1.0/organizations/${defaultOrganization.id}/contracts/?signature_state=half_signed&offer_id=${offer.id}`,
       { results: [], count: 0, previous: null, next: null },
     );
 
     render(<TeacherDashboardContracts />, {
       routerOptions: {
-        path: '/courses/:courseId/products/:courseProductRelationId/contracts',
-        initialEntries: [
-          `/courses/${courseProductRelation.course.id}/products/${courseProductRelation.id}/contracts`,
-        ],
+        path: '/courses/:courseId/products/:offerId/contracts',
+        initialEntries: [`/courses/${offer.course.id}/products/${offer.id}/contracts`],
       },
     });
 

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

@@ -42,20 +42,15 @@ const TeacherDashboardContracts = () => {
     defaultPage: page ? parseInt(page, 10) : 1,
     pageSize: PER_PAGE.teacherContractList,
   });
-  const {
-    organizationId: routeOrganizationId,
-    courseProductRelationId: routeCourseProductRelationId,
-  } = useParams<TeacherDashboardContractsParams>();
+  const { organizationId: routeOrganizationId, offerId: routeofferId } =
+    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(
-    { course_product_relation_id: routeCourseProductRelationId },
-    { enabled: !routeOrganizationId },
-  );
+  } = useOrganizations({ offer_id: routeofferId }, { enabled: !routeOrganizationId });
   const hasMultipleOrganizations = isOrganizationListFetched && organizationList.length > 1;
   const { initialFilters, filters, setFilters } = useTeacherContractFilters();
   const {
@@ -96,10 +91,7 @@ const TeacherDashboardContracts = () => {
   return (
     <div className="teacher-contract-page">
       <div className="dashboard__page__actions">
-        <ContractActionsBar
-          organizationId={filters.organization_id!}
-          courseProductRelationId={filters.course_product_relation_id}
-        />
+        <ContractActionsBar organizationId={filters.organization_id!} offerId={filters.offer_id} />
         <ContractFiltersBar
           defaultValues={initialFilters}
           onFiltersChange={handleFiltersChange}

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

@@ -9,7 +9,7 @@ import JoanieApiProvider from 'contexts/JoanieApiContext';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { ContractDownloadStatus } from 'pages/TeacherDashboardContractsLayout/hooks/useDownloadContractArchive';
 
-import { CourseProductRelationFactory, OrganizationFactory } from 'utils/test/factories/joanie';
+import { OfferFactory, OrganizationFactory } from 'utils/test/factories/joanie';
 import { unstoreContractArchiveId } from 'pages/TeacherDashboardContractsLayout/hooks/useDownloadContractArchive/contractArchiveLocalStorage';
 import BulkDownloadContractButton from '.';
 
@@ -44,26 +44,26 @@ describe.each([
   {
     testLabel: 'for all organization and all trainings',
     organization: undefined,
-    courseProductRelation: undefined,
+    offer: undefined,
   },
   {
     testLabel: 'for a training in an organization',
     organization: OrganizationFactory().one(),
-    courseProductRelation: CourseProductRelationFactory().one(),
+    offer: OfferFactory().one(),
   },
   {
     testLabel: 'for an organization',
     organization: OrganizationFactory().one(),
-    courseProductRelation: undefined,
+    offer: undefined,
   },
   {
     testLabel: 'for a training',
     organization: undefined,
-    courseProductRelation: CourseProductRelationFactory().one(),
+    offer: OfferFactory().one(),
   },
 ])(
   'TeacherDashboardContractsLayout/BulkDownloadContractButton $testLabel',
-  ({ organization, courseProductRelation }) => {
+  ({ organization, offer }) => {
     const Wrapper = ({ children }: PropsWithChildren) => {
       return (
         <IntlProvider locale="en">
@@ -86,7 +86,7 @@ describe.each([
       jest.resetAllMocks();
       unstoreContractArchiveId({
         organizationId: organization ? organization.id : undefined,
-        courseProductRelationId: courseProductRelation ? courseProductRelation.id : undefined,
+        offerId: offer ? offer.id : undefined,
       });
     });
 
@@ -97,7 +97,7 @@ describe.each([
         <Wrapper>
           <BulkDownloadContractButton
             organizationId={organization?.id ?? undefined}
-            courseProductRelationId={courseProductRelation?.id ?? undefined}
+            offerId={offer?.id ?? undefined}
           />
         </Wrapper>,
       );
@@ -118,7 +118,7 @@ describe.each([
         <Wrapper>
           <BulkDownloadContractButton
             organizationId={organization?.id ?? undefined}
-            courseProductRelationId={courseProductRelation?.id ?? undefined}
+            offerId={offer?.id ?? undefined}
           />
         </Wrapper>,
       );
@@ -139,7 +139,7 @@ describe.each([
         <Wrapper>
           <BulkDownloadContractButton
             organizationId={organization?.id ?? undefined}
-            courseProductRelationId={courseProductRelation?.id ?? undefined}
+            offerId={offer?.id ?? undefined}
           />
         </Wrapper>,
       );
@@ -160,7 +160,7 @@ describe.each([
         <Wrapper>
           <BulkDownloadContractButton
             organizationId={organization?.id ?? undefined}
-            courseProductRelationId={courseProductRelation?.id ?? undefined}
+            offerId={offer?.id ?? undefined}
           />
         </Wrapper>,
       );

package/js/pages/TeacherDashboardContractsLayout/components/BulkDownloadContractButton/index.timer.spec.tsx

@@ -14,7 +14,7 @@ import {
   unstoreContractArchiveId,
 } from 'pages/TeacherDashboardContractsLayout/hooks/useDownloadContractArchive/contractArchiveLocalStorage';
 import { CONTRACT_DOWNLOAD_SETTINGS } from 'settings';
-import { CourseProductRelationFactory, OrganizationFactory } from 'utils/test/factories/joanie';
+import { OfferFactory, OrganizationFactory } from 'utils/test/factories/joanie';
 import BulkDownloadContractButton from '.';
 
 jest.mock('utils/context', () => ({
@@ -45,26 +45,26 @@ describe.each([
   {
     testLabel: 'for all organization and all trainings',
     organization: undefined,
-    courseProductRelation: undefined,
+    offer: undefined,
   },
   {
     testLabel: 'for a training in an organization',
     organization: OrganizationFactory().one(),
-    courseProductRelation: CourseProductRelationFactory().one(),
+    offer: OfferFactory().one(),
   },
   {
     testLabel: 'for an organization',
     organization: OrganizationFactory().one(),
-    courseProductRelation: undefined,
+    offer: undefined,
   },
   {
     testLabel: 'for a training',
     organization: undefined,
-    courseProductRelation: CourseProductRelationFactory().one(),
+    offer: OfferFactory().one(),
   },
 ])(
   'TeacherDashboardContractsLayout/BulkDownloadContractButton with fake timer, $testLabel',
-  ({ organization, courseProductRelation }) => {
+  ({ organization, offer }) => {
     let localStorageArchiveFilters: LocalStorageArchiveFilters;
 
     const Wrapper = ({ children }: PropsWithChildren) => {
@@ -81,7 +81,7 @@ describe.each([
     beforeEach(() => {
       localStorageArchiveFilters = {
         organizationId: organization ? organization.id : undefined,
-        courseProductRelationId: courseProductRelation ? courseProductRelation.id : undefined,
+        offerId: offer ? offer.id : undefined,
       };
       mockHasContractToDownload = true;
 
@@ -102,7 +102,7 @@ describe.each([
       jest.clearAllMocks();
       unstoreContractArchiveId({
         organizationId: organization ? organization.id : undefined,
-        courseProductRelationId: courseProductRelation ? courseProductRelation.id : undefined,
+        offerId: offer ? offer.id : undefined,
       });
     });
 
@@ -114,7 +114,7 @@ describe.each([
         <Wrapper>
           <BulkDownloadContractButton
             organizationId={organization?.id ?? undefined}
-            courseProductRelationId={courseProductRelation?.id ?? undefined}
+            offerId={offer?.id ?? undefined}
           />
         </Wrapper>,
       );
@@ -151,10 +151,7 @@ describe.each([
 
       render(
         <Wrapper>
-          <BulkDownloadContractButton
-            organizationId={organization?.id}
-            courseProductRelationId={courseProductRelation?.id}
-          />
+          <BulkDownloadContractButton organizationId={organization?.id} offerId={offer?.id} />
         </Wrapper>,
       );
 

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

@@ -4,7 +4,7 @@ import { useEffect } from 'react';
 import useDownloadContractArchive, {
   ContractDownloadStatus,
 } from 'pages/TeacherDashboardContractsLayout/hooks/useDownloadContractArchive';
-import { CourseProductRelation, Organization } from 'types/Joanie';
+import { Offer, Organization } from 'types/Joanie';
 
 const messages = defineMessages({
   bulkDownloadButtonDownloadLabel: {
@@ -26,16 +26,16 @@ const messages = defineMessages({
 
 interface BulkDownloadContractButtonProps {
   organizationId?: Organization['id'];
-  courseProductRelationId?: CourseProductRelation['id'];
+  offerId?: Offer['id'];
 }
 
 const BulkDownloadContractButton = ({
   organizationId,
-  courseProductRelationId,
+  offerId,
 }: BulkDownloadContractButtonProps) => {
   const { downloadContractArchive, createContractArchive, status } = useDownloadContractArchive({
     organizationId,
-    courseProductRelationId,
+    offerId,
   });
 
   useEffect(() => {

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

@@ -97,38 +97,30 @@ describe('TeacherDashboardContractsLayout/ContractActionsBar', () => {
     {
       label: "doesn't have contract to download",
       hasContractToDownload: false,
-      courseProductRelationId: undefined,
+      offerId: undefined,
     },
     {
-      label: "doesn't have contract to download  and courseProductRelationId",
+      label: "doesn't have contract to download  and offerId",
       hasContractToDownload: false,
-      courseProductRelationId: faker.string.uuid(),
+      offerId: faker.string.uuid(),
     },
-  ])(
-    'should only display sign button when $label',
-    ({ hasContractToDownload, courseProductRelationId }) => {
-      mockHasContractToDownload = hasContractToDownload;
-      mockCanSignContracts = true;
-      mockContractsToSignCount = 1;
-
-      render(
-        <Wrapper>
-          <ContractActionsBar
-            courseProductRelationId={courseProductRelationId}
-            organizationId={faker.string.uuid()}
-          />
-        </Wrapper>,
-      );
-
-      expect(screen.getByTestId('teacher-contracts-list-actionsBar')).toBeInTheDocument();
-      expect(
-        screen.getByRole('button', { name: /Sign all pending contracts/ }),
-      ).toBeInTheDocument();
-      expect(
-        screen.queryByRole('button', { name: /Request contracts archive/ }),
-      ).not.toBeInTheDocument();
-    },
-  );
+  ])('should only display sign button when $label', ({ hasContractToDownload, offerId }) => {
+    mockHasContractToDownload = hasContractToDownload;
+    mockCanSignContracts = true;
+    mockContractsToSignCount = 1;
+
+    render(
+      <Wrapper>
+        <ContractActionsBar offerId={offerId} organizationId={faker.string.uuid()} />
+      </Wrapper>,
+    );
+
+    expect(screen.getByTestId('teacher-contracts-list-actionsBar')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Sign all pending contracts/ })).toBeInTheDocument();
+    expect(
+      screen.queryByRole('button', { name: /Request contracts archive/ }),
+    ).not.toBeInTheDocument();
+  });
 
   it("shouldn't only display download button", () => {
     mockHasContractToDownload = true;

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

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { Organization, CourseProductRelation } from 'types/Joanie';
+import { Organization, Offer } from 'types/Joanie';
 import useTeacherContractsToSign from 'pages/TeacherDashboardContractsLayout/hooks/useTeacherContractsToSign';
 import useHasContractToDownload from 'pages/TeacherDashboardContractsLayout/hooks/useHasContractToDownload';
 import SignOrganizationContractButton from '../SignOrganizationContractButton';
@@ -7,18 +7,18 @@ import BulkDownloadContractButton from '../BulkDownloadContractButton';
 
 interface ContractActionsProps {
   organizationId: Organization['id'];
-  courseProductRelationId?: CourseProductRelation['id'];
+  offerId?: Offer['id'];
 }
 
-const ContractActionsBar = ({ organizationId, courseProductRelationId }: ContractActionsProps) => {
+const ContractActionsBar = ({ organizationId, offerId }: ContractActionsProps) => {
   const { canSignContracts, contractsToSignCount } = useTeacherContractsToSign({
     organizationId,
-    courseProductRelationId,
+    offerId,
   });
-  const hasContractToDownload = useHasContractToDownload(organizationId, courseProductRelationId);
+  const hasContractToDownload = useHasContractToDownload(organizationId, offerId);
 
   const nbAvailableActions = [canSignContracts, hasContractToDownload].filter((val) => val).length;
-  const courseProductRelationIds = courseProductRelationId ? [courseProductRelationId] : undefined;
+  const offerIds = offerId ? [offerId] : undefined;
   return (
     nbAvailableActions > 0 && (
       <div
@@ -31,17 +31,14 @@ const ContractActionsBar = ({ organizationId, courseProductRelationId }: Contrac
         {canSignContracts && (
           <div>
             <SignOrganizationContractButton
-              courseProductRelationIds={courseProductRelationIds}
+              offerIds={offerIds}
               organizationId={organizationId}
               contractToSignCount={contractsToSignCount}
             />
           </div>
         )}
         {hasContractToDownload && (
-          <BulkDownloadContractButton
-            organizationId={organizationId}
-            courseProductRelationId={courseProductRelationId}
-          />
+          <BulkDownloadContractButton organizationId={organizationId} offerId={offerId} />
         )}
       </div>
     )