richie-education 3.1.3-dev8 → 3.2.1-dev1

package/js/components/SaleTunnel/index.spec.tsx

@@ -8,6 +8,7 @@ import { useState } from 'react';
 import { OrderState, Product, ProductType, NOT_CANCELED_ORDER_STATES } from 'types/Joanie';
 import {
   RichieContextFactory as mockRichieContextFactory,
+  CourseStateFactory,
   UserFactory,
   PacedCourseFactory,
 } from 'utils/test/factories/richie';
@@ -15,13 +16,15 @@ import {
   AddressFactory,
   CertificateOrderFactory,
   CertificateProductFactory,
-  CourseProductRelationFactory,
+  OfferingFactory,
+  CourseRunFactory,
   CredentialOrderFactory,
   CredentialProductFactory,
   CreditCardFactory,
   EnrollmentFactory,
   PaymentInstallmentFactory,
 } from 'utils/test/factories/joanie';
+import { Priority } from 'types';
 import { render } from 'utils/test/render';
 import { SaleTunnel, SaleTunnelProps } from 'components/SaleTunnel/index';
 import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
@@ -97,7 +100,7 @@ describe.each([
     return (
       <SaleTunnel
         {...props}
-        enrollment={enrollment}
+        enrollment={props.enrollment ?? enrollment}
         course={productType === ProductType.CREDENTIAL ? course : undefined}
         isOpen={open}
         onClose={() => setOpen(false)}
@@ -182,7 +185,9 @@ describe.each([
     nbApiCalls += 1; // useProductOrder call.
     nbApiCalls += 1; // get user account call.
     nbApiCalls += 1; // get user preferences call.
-    nbApiCalls += 1; // product payment-schedule call
+    if (product.type === ProductType.CREDENTIAL) {
+      nbApiCalls += 1; // product payment-schedule call
+    }
     await waitFor(() => expect(fetchMock.calls()).toHaveLength(nbApiCalls));
 
     const user = userEvent.setup({ delay: null });
@@ -269,7 +274,9 @@ describe.each([
     nbApiCalls += 1; // useProductOrder get order with filters
     nbApiCalls += 1; // get user account call.
     nbApiCalls += 1; // get user preferences call.
-    nbApiCalls += 1; // get product payment schedule.
+    if (product.type === ProductType.CREDENTIAL) {
+      nbApiCalls += 1; // get product payment schedule.
+    }
     await waitFor(() => expect(fetchMock.calls()).toHaveLength(nbApiCalls));
 
     const user = userEvent.setup({ delay: null });
@@ -403,36 +410,41 @@ describe.each([
       queryOptions: { client: createTestQueryClient({ user: richieUser }) },
     });
 
-    await screen.findByRole('heading', {
-      level: 4,
-      name: 'Payment schedule',
-    });
+    if (product.type === ProductType.CREDENTIAL) {
+      await screen.findByRole('heading', {
+        level: 4,
+        name: 'Payment schedule',
+      });
 
-    const scheduleTable = screen.getByRole('table');
-    const scheduleTableRows = within(scheduleTable).getAllByRole('row');
-    expect(scheduleTableRows).toHaveLength(schedule.length);
+      const scheduleTable = screen.getByRole('table');
+      const scheduleTableRows = within(scheduleTable).getAllByRole('row');
+      expect(scheduleTableRows).toHaveLength(schedule.length);
 
-    scheduleTableRows.forEach((row, index) => {
-      const installment = schedule[index];
-      // A first column should show the installment index
-      within(row).getByRole('cell', {
-        name: (index + 1).toString(),
-      });
-      // A 2nd column should show the installment amount
-      within(row).getByRole('cell', {
-        name: formatPrice(installment.amount, installment.currency),
-      });
-      // A 3rd column should show the installment withdraw date
-      within(row).getByRole('cell', {
-        name: `Withdrawn on ${intl.formatDate(installment.due_date, {
-          ...DEFAULT_DATE_FORMAT,
-        })}`,
-      });
-      // A 4th column should show the installment state
-      within(row).getByRole('cell', {
-        name: StringHelper.capitalizeFirst(installment.state.replace('_', ' '))!,
+      scheduleTableRows.forEach((row, index) => {
+        const installment = schedule[index];
+        // A first column should show the installment index
+        within(row).getByRole('cell', {
+          name: (index + 1).toString(),
+        });
+        // A 2nd column should show the installment amount
+        within(row).getByRole('cell', {
+          name: formatPrice(installment.amount, installment.currency),
+        });
+        // A 3rd column should show the installment withdraw date
+        within(row).getByRole('cell', {
+          name: `Withdrawn on ${intl.formatDate(installment.due_date, {
+            ...DEFAULT_DATE_FORMAT,
+          })}`,
+        });
+        // A 4th column should show the installment state
+        within(row).getByRole('cell', {
+          name: StringHelper.capitalizeFirst(installment.state.replace('_', ' '))!,
+        });
       });
-    });
+    } else {
+      expect(screen.queryByRole('heading', { level: 4, name: 'Payment schedule' })).toBeNull();
+      expect(screen.queryByRole('table')).toBeNull();
+    }
 
     const $totalAmount = screen.getByTestId('sale-tunnel__total__amount');
     expect($totalAmount).toHaveTextContent(
@@ -440,19 +452,72 @@ describe.each([
     );
   });
 
+  // Fixes the issue : https://github.com/openfun/richie/issues/2645
+  it('should show the certificate product total with discounted price', async () => {
+    const product = ProductFactory({
+      price: 600,
+      target_courses: [course],
+    }).one();
+    const enrollmentDiscounted = EnrollmentFactory({
+      course_run: CourseRunFactory({
+        state: CourseStateFactory({ priority: Priority.ONGOING_OPEN }).one(),
+        course,
+      }).one(),
+      offerings: [
+        OfferingFactory({
+          product,
+          rules: {
+            discounted_price: 540,
+            discount_rate: 0.1,
+          },
+        }).one(),
+      ],
+    }).one();
+
+    if (product.type === ProductType.CERTIFICATE) {
+      enrollmentDiscounted.offerings[0].product = product;
+
+      fetchMock.get(
+        `https://joanie.endpoint/api/v1.0/orders/?enrollment_id=${enrollmentDiscounted.id}&product_id=${product.id}&state=pending&state=pending_payment&state=no_payment&state=failed_payment&state=completed&state=draft&state=assigned&state=to_sign&state=signing&state=to_save_payment_method`,
+        {
+          results: [],
+          next: null,
+          previous: null,
+          count: 0,
+        },
+      );
+
+      render(
+        <Wrapper product={product} enrollment={enrollmentDiscounted} isWithdrawable={true} />,
+        { queryOptions: { client: createTestQueryClient({ user: richieUser }) } },
+      );
+
+      const $totalAmount = screen.getByTestId('sale-tunnel__total__amount');
+      expect($totalAmount).toHaveTextContent(
+        'Total' +
+          formatPrice(
+            enrollmentDiscounted.offerings[0].rules?.discounted_price!,
+            product.price_currency,
+          ).replace(/(\u202F|\u00a0)/g, ' '),
+      );
+    }
+  });
+
   it('should show the product payment schedule with discounted price', async () => {
     const intl = createIntl({ locale: 'en' });
     const schedule = PaymentInstallmentFactory().many(2);
 
-    const relation = CourseProductRelationFactory({
+    const offering = OfferingFactory({
       product: ProductFactory({
         price: 840,
         price_currency: 'EUR',
       }).one(),
-      discounted_price: 800,
-      discount_rate: 0.3,
+      rules: {
+        discounted_price: 800,
+        discount_rate: 0.3,
+      },
     }).one();
-    const { product } = relation;
+    const { product } = offering;
 
     fetchMock
       .get(
@@ -464,45 +529,47 @@ describe.each([
         schedule,
       );
 
-    render(<Wrapper product={product} courseProductRelation={relation} isWithdrawable={true} />, {
+    render(<Wrapper product={product} offering={offering} isWithdrawable={true} />, {
       queryOptions: { client: createTestQueryClient({ user: richieUser }) },
     });
 
-    await screen.findByRole('heading', {
-      level: 4,
-      name: 'Payment schedule',
-    });
+    if (product.type === ProductType.CREDENTIAL) {
+      await screen.findByRole('heading', { level: 4, name: 'Payment schedule' });
 
-    const scheduleTable = screen.getByRole('table');
-    const scheduleTableRows = within(scheduleTable).getAllByRole('row');
-    expect(scheduleTableRows).toHaveLength(schedule.length);
+      const scheduleTable = screen.getByRole('table');
+      const scheduleTableRows = within(scheduleTable).getAllByRole('row');
+      expect(scheduleTableRows).toHaveLength(schedule.length);
 
-    scheduleTableRows.forEach((row, index) => {
-      const installment = schedule[index];
-      // A first column should show the installment index
-      within(row).getByRole('cell', {
-        name: (index + 1).toString(),
-      });
-      // A 2nd column should show the installment amount
-      within(row).getByRole('cell', {
-        name: formatPrice(installment.amount, installment.currency),
-      });
-      // A 3rd column should show the installment withdraw date
-      within(row).getByRole('cell', {
-        name: `Withdrawn on ${intl.formatDate(installment.due_date, {
-          ...DEFAULT_DATE_FORMAT,
-        })}`,
-      });
-      // A 4th column should show the installment state
-      within(row).getByRole('cell', {
-        name: StringHelper.capitalizeFirst(installment.state.replace('_', ' '))!,
+      scheduleTableRows.forEach((row, index) => {
+        const installment = schedule[index];
+        // A first column should show the installment index
+        within(row).getByRole('cell', {
+          name: (index + 1).toString(),
+        });
+        // A 2nd column should show the installment amount
+        within(row).getByRole('cell', {
+          name: formatPrice(installment.amount, installment.currency),
+        });
+        // A 3rd column should show the installment withdraw date
+        within(row).getByRole('cell', {
+          name: `Withdrawn on ${intl.formatDate(installment.due_date, {
+            ...DEFAULT_DATE_FORMAT,
+          })}`,
+        });
+        // A 4th column should show the installment state
+        within(row).getByRole('cell', {
+          name: StringHelper.capitalizeFirst(installment.state.replace('_', ' '))!,
+        });
       });
-    });
+    } else {
+      expect(screen.queryByRole('heading', { level: 4, name: 'Payment schedule' })).toBeNull();
+      expect(screen.queryByRole('table')).toBeNull();
+    }
 
     const $totalAmount = screen.getByTestId('sale-tunnel__total__amount');
     expect($totalAmount).toHaveTextContent(
       'Total' +
-        formatPrice(relation!.discounted_price!, product.price_currency).replace(
+        formatPrice(offering!.rules!.discounted_price!, product.price_currency).replace(
           /(\u202F|\u00a0)/g,
           ' ',
         ),

package/js/components/SaleTunnel/index.stories.tsx

@@ -1,6 +1,11 @@
 import { StoryObj, Meta } from '@storybook/react';
 import { BaseJoanieAppWrapper } from 'utils/test/wrappers/BaseJoanieAppWrapper';
-import { ProductFactory } from 'utils/test/factories/joanie';
+import {
+  CertificateProductFactory,
+  EnrollmentFactory,
+  OfferingFactory,
+  ProductFactory,
+} from 'utils/test/factories/joanie';
 import { PacedCourseFactory } from 'utils/test/factories/richie';
 import { SaleTunnel, SaleTunnelProps } from './index';
 
@@ -28,6 +33,16 @@ export default {
 
 type Story = StoryObj<typeof SaleTunnel>;
 
-export const Default: Story = {
+export const Credential: Story = {
   args: {},
 };
+
+export const CertificateDiscount: Story = {
+  args: {
+    product: CertificateProductFactory({ price: 100, price_currency: 'EUR' }).one(),
+    course: PacedCourseFactory().one(),
+    enrollment: EnrollmentFactory({
+      offerings: OfferingFactory({ rules: { discounted_price: 80 } }).many(1),
+    }).one(),
+  },
+};

package/js/components/SaleTunnel/index.tsx

@@ -2,7 +2,7 @@ import { ModalProps } from '@openfun/cunningham-react';
 import {
   CertificateProduct,
   CourseLight,
-  CourseProductRelation,
+  Offering,
   CredentialProduct,
   Enrollment,
   Order,
@@ -16,7 +16,7 @@ import { PacedCourse } from 'types';
 
 export interface SaleTunnelProps extends Pick<ModalProps, 'isOpen' | 'onClose'> {
   product: Product;
-  courseProductRelation?: CourseProductRelation;
+  offering?: Offering;
   organizations?: Organization[];
   isWithdrawable: boolean;
   course?: PacedCourse | CourseLight;

package/js/components/TeacherDashboardCourseList/index.spec.tsx

@@ -1,7 +1,7 @@
 import { screen } from '@testing-library/react';
 import fetchMock from 'fetch-mock';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
-import { CourseListItemFactory, CourseProductRelationFactory } from 'utils/test/factories/joanie';
+import { CourseListItemFactory, OfferingFactory } from 'utils/test/factories/joanie';
 import { render } from 'utils/test/render';
 import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
 import { expectNoSpinner, expectSpinner } from 'utils/test/expectSpinner';
@@ -35,7 +35,7 @@ describe('components/TeacherDashboardCourseList', () => {
   });
 
   it('should render loading more state', async () => {
-    const trainings = CourseProductRelationFactory().many(2);
+    const trainings = OfferingFactory().many(2);
     const courses = CourseListItemFactory().many(2);
     const courseAndProductList = [...courses, ...trainings];
 
@@ -60,7 +60,7 @@ describe('components/TeacherDashboardCourseList', () => {
   });
 
   it('should render courses and products list', async () => {
-    const trainings = CourseProductRelationFactory().many(2);
+    const trainings = OfferingFactory().many(2);
     const courses = CourseListItemFactory().many(2);
     const courseAndProductList = [...courses, ...trainings];
 

package/js/components/TeacherDashboardCourseList/index.tsx

@@ -6,7 +6,7 @@ import { CourseGlimpseList, getCourseGlimpseListProps } from 'components/CourseG
 import { Spinner } from 'components/Spinner';
 import context from 'utils/context';
 import { useIntersectionObserver } from 'hooks/useIntersectionObserver';
-import { CourseListItem, CourseProductRelationLight } from 'types/Joanie';
+import { CourseListItem, OfferingLight } from 'types/Joanie';
 import Banner from 'components/Banner';
 
 const messages = defineMessages({
@@ -31,7 +31,7 @@ interface TeacherDashboardCourseListProps {
   titleTranslated?: string;
   organizationId?: string;
   loadMore: () => void;
-  courseAndProductList?: (CourseListItem | CourseProductRelationLight)[];
+  courseAndProductList?: (CourseListItem | OfferingLight)[];
   isLoadingMore?: boolean;
   hasMore?: boolean;
   isNewSearchLoading?: boolean;

package/js/hooks/useContractArchive/index.ts

@@ -1,5 +1,5 @@
 import { useJoanieApi } from 'contexts/JoanieApiContext';
-import { CourseProductRelation, Organization } from 'types/Joanie';
+import { Offering, Organization } from 'types/Joanie';
 import { browserDownloadFromBlob } from 'utils/download';
 import { HttpStatusCode } from 'utils/errors/HttpError';
 import { handle } from 'utils/errors/handle';
@@ -53,11 +53,11 @@ const useContractArchive = () => {
       },
       create: async (
         organizationId?: Organization['id'],
-        courseProductRelationId?: CourseProductRelation['id'],
+        offeringId?: Offering['id'],
       ): Promise<string> => {
         const response = await api.user.contracts.zip_archive.create({
           organization_id: organizationId,
-          course_product_relation_id: courseProductRelationId,
+          offering_id: offeringId,
         });
 
         return extractArchiveId(response.url);

package/js/hooks/useCourseProductUnion/index.spec.tsx

@@ -2,13 +2,13 @@ import { renderHook, waitFor } from '@testing-library/react';
 import { QueryClient } from '@tanstack/react-query';
 import fetchMock from 'fetch-mock';
 import { PropsWithChildren } from 'react';
-import { CourseListItem, CourseProductRelation } from 'types/Joanie';
+import { CourseListItem, Offering } from 'types/Joanie';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { SessionProvider } from 'contexts/SessionContext';
 import { getRoutes } from 'api/joanie';
 import { mockPaginatedResponse } from 'utils/test/mockPaginatedResponse';
-import { CourseListItemFactory, CourseProductRelationFactory } from 'utils/test/factories/joanie';
+import { CourseListItemFactory, OfferingFactory } from 'utils/test/factories/joanie';
 import { BaseJoanieAppWrapper } from 'utils/test/wrappers/BaseJoanieAppWrapper';
 import { useCourseProductUnion } from '.';
 
@@ -41,12 +41,12 @@ const renderUseCourseProductUnion = ({ organizationId }: { organizationId?: stri
 
 describe('useCourseProductUnion', () => {
   let courseList: CourseListItem[];
-  let courseProductRelationList: CourseProductRelation[];
+  let offeringList: Offering[];
   let nbApiCalls: number;
 
   beforeEach(() => {
     courseList = CourseListItemFactory().many(6);
-    courseProductRelationList = CourseProductRelationFactory().many(6);
+    offeringList = OfferingFactory().many(6);
 
     fetchMock.get('https://joanie.endpoint/api/v1.0/orders/', [], { overwriteRoutes: true });
     fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', [], { overwriteRoutes: true });
@@ -59,38 +59,38 @@ describe('useCourseProductUnion', () => {
     fetchMock.restore();
   });
 
-  it('should call courses and coursesProductRelation endpoints', async () => {
+  it('should call courses and offering endpoints', async () => {
     const ROUTES = getRoutes();
     const coursesUrl = ROUTES.courses.get.replace(':id/', '');
-    const courseProductRelationsUrl = ROUTES.courseProductRelations.get.replace(':id/', '');
+    const offeringsUrl = ROUTES.offerings.get.replace(':id/', '');
     fetchMock.get(
       `${coursesUrl}?has_listed_course_runs=true&page=1&page_size=${PER_PAGE}`,
       mockPaginatedResponse(courseList.slice(0, PER_PAGE), 0, false),
     );
     fetchMock.get(
-      `${courseProductRelationsUrl}?page=1&page_size=${PER_PAGE}`,
-      mockPaginatedResponse(courseProductRelationList.slice(0, PER_PAGE), 0, false),
+      `${offeringsUrl}?page=1&page_size=${PER_PAGE}`,
+      mockPaginatedResponse(offeringList.slice(0, PER_PAGE), 0, false),
     );
     const { result } = renderUseCourseProductUnion();
     await waitFor(() => expect(result.current.isLoading).toBe(false));
     expect(result.current.data.length).toBe(PER_PAGE);
     nbApiCalls += 1; // courses page 1
-    nbApiCalls += 1; // course product relations page 1
+    nbApiCalls += 1; // offerings page 1
     const calledUrls = fetchMock.calls().map((call) => call[0]);
     expect(calledUrls).toHaveLength(nbApiCalls);
     expect(calledUrls).toContain(
       `${coursesUrl}?has_listed_course_runs=true&page=1&page_size=${PER_PAGE}`,
     );
-    expect(calledUrls).toContain(`${courseProductRelationsUrl}?page=1&page_size=${PER_PAGE}`);
+    expect(calledUrls).toContain(`${offeringsUrl}?page=1&page_size=${PER_PAGE}`);
   }, 25000);
 
-  it('should call organization courses and organization coursesProductRelation endpoints', async () => {
+  it('should call organization courses and organization offering endpoints', async () => {
     const organizationId = 'DUMMY_ORGANIZATION_ID';
     const ROUTES = getRoutes();
     const organizationCoursesUrl = ROUTES.organizations.courses.get
       .replace(':organization_id', organizationId)
       .replace(':id/', '');
-    const organizationCourseProductRelationsUrl = ROUTES.organizations.courseProductRelations.get
+    const organizationOfferingsUrl = ROUTES.organizations.offerings.get
       .replace(':organization_id', organizationId)
       .replace(':id/', '');
     fetchMock.get(
@@ -98,21 +98,19 @@ describe('useCourseProductUnion', () => {
       mockPaginatedResponse(courseList.slice(0, PER_PAGE), 0, false),
     );
     fetchMock.get(
-      `${organizationCourseProductRelationsUrl}?page=1&page_size=${PER_PAGE}`,
-      mockPaginatedResponse(courseProductRelationList.slice(0, PER_PAGE), 0, false),
+      `${organizationOfferingsUrl}?page=1&page_size=${PER_PAGE}`,
+      mockPaginatedResponse(offeringList.slice(0, PER_PAGE), 0, false),
     );
     const { result } = renderUseCourseProductUnion({ organizationId: 'DUMMY_ORGANIZATION_ID' });
     await waitFor(() => expect(result.current.isLoading).toBe(false));
     expect(result.current.data.length).toBe(PER_PAGE);
     nbApiCalls += 1; // courses page 1
-    nbApiCalls += 1; // course product relations page 1
+    nbApiCalls += 1; // offerings page 1
     const calledUrls = fetchMock.calls().map((call) => call[0]);
     expect(calledUrls).toHaveLength(nbApiCalls);
     expect(calledUrls).toContain(
       `${organizationCoursesUrl}?has_listed_course_runs=true&page=1&page_size=${PER_PAGE}`,
     );
-    expect(calledUrls).toContain(
-      `${organizationCourseProductRelationsUrl}?page=1&page_size=${PER_PAGE}`,
-    );
+    expect(calledUrls).toContain(`${organizationOfferingsUrl}?page=1&page_size=${PER_PAGE}`);
   });
 });

package/js/hooks/useCourseProductUnion/index.ts

@@ -3,11 +3,11 @@ import { useJoanieApi } from 'contexts/JoanieApiContext';
 import {
   CourseListItem,
   Product,
-  CourseProductRelation,
+  Offering,
   CourseQueryFilters,
-  CourseProductRelationQueryFilters,
+  OfferingQueryFilters,
   ProductType,
-  CourseProductRelationLight,
+  OfferingLight,
 } from 'types/Joanie';
 import useUnionResource, { ResourceUnionPaginationProps } from 'hooks/useUnionResource';
 
@@ -41,9 +41,9 @@ export const useCourseProductUnion = ({
   const api = useJoanieApi();
   return useUnionResource<
     CourseListItem,
-    CourseProductRelation | CourseProductRelationLight,
+    Offering | OfferingLight,
     CourseQueryFilters,
-    CourseProductRelationQueryFilters
+    OfferingQueryFilters
   >({
     queryAConfig: {
       queryKey: ['user', 'courses'],
@@ -51,8 +51,8 @@ export const useCourseProductUnion = ({
       filters: { query, organization_id: organizationId, has_listed_course_runs: true },
     },
     queryBConfig: {
-      queryKey: ['user', 'course_product_relations'],
-      fn: api.courseProductRelations.get,
+      queryKey: ['user', 'offerings'],
+      fn: api.offerings.get,
       filters: { query, organization_id: organizationId, product_type: productType },
     },
     perPage,

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, Offering, 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<Offering, 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<Offering>,
 ) => {
   const { product_id: productId, ...queryfilters } = filters;
   const enabled = !!productId && !!queryfilters.course_id;
-  const resources = useResourcesCustom<CourseProductRelation, CourseProductQueryFilters>({
+  const resources = useResourcesCustom<Offering, 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 { Offering, 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, offeringId: routeOfferingId } = useParams<{
     organizationId?: Organization['id'];
-    courseProductRelationId: CourseProductRelation['id'];
+    offeringId: Offering['id'];
   }>();
   const [searchParams] = useSearchParams();
   const queryOrganizationId = searchParams.get('organization_id') || undefined;
   const { items: organizations } = useOrganizations(
-    { course_product_relation_id: routeCourseProductRelationId },
+    { offering_id: routeOfferingId },
     {
       enabled: !routeOrganizationId && !queryOrganizationId,
     },

package/js/hooks/useOffering/index.ts

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

package/js/hooks/useTeacherCoursesSearch/index.tsx

@@ -1,7 +1,7 @@
 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, OfferingLight, ProductType } from 'types/Joanie';
 import { Maybe, Nullable } from 'types/utils';
 
 const useTeacherCoursesSearch = () => {
@@ -9,7 +9,7 @@ const useTeacherCoursesSearch = () => {
   const [searchParams, setSearchParams] = useSearchParams();
   const [count, setCount] = useState<Maybe<number>>(0);
   const [courseAndProductList, setCourseAndProductList] = useState<
-    (CourseListItem | CourseProductRelationLight)[]
+    (CourseListItem | OfferingLight)[]
   >([]);
   const [isNewSearchLoading, setIsNewSearchLoading] = useState(false);
   const query = searchParams.get('query') || undefined;