richie-education 3.1.3-dev12 → 3.1.3-dev17

package/js/widgets/SyllabusCourseRunsList/components/CourseProductItem/index.spec.tsx

@@ -6,7 +6,7 @@ import {
   PacedCourseFactory,
 } from 'utils/test/factories/richie';
 import {
-  OfferFactory,
+  OfferingFactory,
   EnrollmentFactory,
   CredentialOrderFactory,
   ProductFactory,
@@ -74,8 +74,8 @@ describe('CourseProductItem', () => {
     }).format(price);
 
   it('should display a loader until product is loaded', async () => {
-    const offer = OfferFactory().one();
-    const { product } = offer;
+    const offering = OfferingFactory().one();
+    const { product } = offering;
     const productDeferred = new Deferred();
     fetchMock.get(
       `https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`,
@@ -92,14 +92,17 @@ describe('CourseProductItem', () => {
 
     // - A loader should be displayed while product information are fetching
     await expectSpinner('Loading product information...');
-    productDeferred.resolve(offer);
+    productDeferred.resolve(offering);
     await expectNoSpinner('Loading product information...');
   });
 
   it('renders product information for anonymous user', async () => {
-    const offer = OfferFactory().one();
-    const { product } = offer;
-    fetchMock.get(`https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`, offer);
+    const offering = OfferingFactory().one();
+    const { product } = offering;
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`,
+      offering,
+    );
 
     render(
       <CourseProductItem
@@ -128,7 +131,7 @@ describe('CourseProductItem', () => {
     ).not.toBeInTheDocument();
 
     // - Render all target courses information
-    offer.product.target_courses.forEach((course) => {
+    offering.product.target_courses.forEach((course) => {
       const $item = screen.getByTestId(`course-item-${course.code}`);
       // the course title shouldn't be a heading to prevent misdirection for screen reader users,
       // but we want to it to visually look like a h5
@@ -148,19 +151,24 @@ describe('CourseProductItem', () => {
   });
 
   it('renders discount rate for anonymous user', async () => {
-    const offer = OfferFactory({
+    const offering = OfferingFactory({
       product: CredentialProductFactory({
         price: 840,
         price_currency: 'EUR',
       }).one(),
-      discounted_price: 800,
-      discount_rate: 0.3,
-      description: 'Year 2023 discount',
-      discount_start: new Date('2023-01-01T00:00:00Z').toISOString(),
-      discount_end: new Date('2023-12-31T23:59:59Z').toISOString(),
+      rules: {
+        discounted_price: 800,
+        discount_rate: 0.3,
+        description: 'Year 2023 discount',
+        discount_start: new Date('2023-01-01T00:00:00Z').toISOString(),
+        discount_end: new Date('2023-12-31T23:59:59Z').toISOString(),
+      },
     }).one();
-    const { product } = offer;
-    fetchMock.get(`https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`, offer);
+    const { product } = offering;
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`,
+      offering,
+    );
 
     render(
       <CourseProductItem
@@ -186,7 +194,7 @@ describe('CourseProductItem', () => {
     const discountedPriceLabel = screen.getByText('Discounted price:');
     expect(discountedPriceLabel.classList.contains('offscreen')).toBe(true);
     const discountedPrice = screen.getByText(
-      priceFormatter(product.price_currency, offer.discounted_price!).replace(
+      priceFormatter(product.price_currency, offering.rules.discounted_price!).replace(
         /(\u202F|\u00a0)/g,
         ' ',
       ),
@@ -206,19 +214,24 @@ describe('CourseProductItem', () => {
   });
 
   it('renders discount amount for anonymous user', async () => {
-    const offer = OfferFactory({
+    const offering = OfferingFactory({
       product: CredentialProductFactory({
         price: 840,
         price_currency: 'EUR',
       }).one(),
-      discounted_price: 800,
-      discount_amount: 40,
-      description: 'Year 2023 discount',
-      discount_start: new Date('2023-01-01T00:00:00Z').toISOString(),
-      discount_end: new Date('2023-12-31T23:59:59Z').toISOString(),
+      rules: {
+        discounted_price: 800,
+        discount_amount: 40,
+        description: 'Year 2023 discount',
+        discount_start: new Date('2023-01-01T00:00:00Z').toISOString(),
+        discount_end: new Date('2023-12-31T23:59:59Z').toISOString(),
+      },
     }).one();
-    const { product } = offer;
-    fetchMock.get(`https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`, offer);
+    const { product } = offering;
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`,
+      offering,
+    );
 
     render(
       <CourseProductItem
@@ -244,7 +257,7 @@ describe('CourseProductItem', () => {
     const discountedPriceLabel = screen.getByText('Discounted price:');
     expect(discountedPriceLabel.classList.contains('offscreen')).toBe(true);
     const discountedPrice = screen.getByText(
-      priceFormatter(product.price_currency, offer.discounted_price!).replace(
+      priceFormatter(product.price_currency, offering.rules.discounted_price!).replace(
         /(\u202F|\u00a0)/g,
         ' ',
       ),
@@ -264,13 +277,16 @@ describe('CourseProductItem', () => {
   });
 
   it('does not render <CertificateItem /> if product do not have a certificate', async () => {
-    const offer = OfferFactory({
+    const offering = OfferingFactory({
       product: ProductFactory({
         certificate_definition: undefined,
       }).one(),
     }).one();
-    const { product } = offer;
-    fetchMock.get(`https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`, offer);
+    const { product } = offering;
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`,
+      offering,
+    );
 
     render(
       <CourseProductItem
@@ -288,16 +304,16 @@ describe('CourseProductItem', () => {
   });
 
   it('renders product information in compact mode', async () => {
-    const offer = OfferFactory().one();
+    const offering = OfferingFactory().one();
     fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/courses/00000/products/${offer.product.id}/`,
-      offer,
+      `https://joanie.endpoint/api/v1.0/courses/00000/products/${offering.product.id}/`,
+      offering,
     );
 
     const { container } = render(
       <CourseProductItem
         course={PacedCourseFactory({ code: '00000' }).one()}
-        productId={offer.product.id}
+        productId={offering.product.id}
         compact
       />,
       { queryOptions: { client: createTestQueryClient({ user: null }) } },
@@ -305,14 +321,14 @@ describe('CourseProductItem', () => {
 
     // In the header, we should display the product title, the product price
     // and product date range and languages
-    await screen.findByRole('heading', { level: 3, name: offer.product.title });
+    await screen.findByRole('heading', { level: 3, name: offering.product.title });
     // the price shouldn't be a heading to prevent misdirection for screen reader users,
     // but we want to it to visually look like a h6
 
     const $price = screen.getByText(
       // the price formatter generates non-breaking spaces and getByText doesn't seem to handle that well, replace it
       // with a regular space. We replace NNBSP (\u202F) and NBSP (\u00a0) with a regular space
-      priceFormatter(offer.product.price_currency, offer.product.price).replace(
+      priceFormatter(offering.product.price_currency, offering.product.price).replace(
         /(\u202F|\u00a0)/g,
         ' ',
       ),
@@ -328,7 +344,7 @@ describe('CourseProductItem', () => {
     expect($productWidgetContent).not.toBeInTheDocument();
 
     // - Any target courses information should be displayed
-    offer.product.target_courses.forEach((course) => {
+    offering.product.target_courses.forEach((course) => {
       const $item = screen.queryByTestId(`course-item-${course.code}`);
       expect($item).not.toBeInTheDocument();
     });
@@ -337,7 +353,7 @@ describe('CourseProductItem', () => {
     expect(screen.queryByTestId('CertificateItem')).not.toBeInTheDocument();
 
     // - Render a login button
-    screen.getByRole('button', { name: `Login to purchase "${offer.product.title}"` });
+    screen.getByRole('button', { name: `Login to purchase "${offering.product.title}"` });
     // - Does not render PurchaseButton cta
     expect(screen.queryByTestId('PurchaseButton__cta')).not.toBeInTheDocument();
   });
@@ -345,8 +361,8 @@ describe('CourseProductItem', () => {
   it.each([OrderState.PENDING, OrderState.NO_PAYMENT])(
     'renders product informations for %s order',
     async (state) => {
-      const offer = OfferFactory().one();
-      const { product } = offer;
+      const offering = OfferingFactory().one();
+      const { product } = offering;
       const order = CredentialOrderFactory({
         product_id: product.id,
         course: PacedCourseFactory({ code: '00000' }).one(),
@@ -356,7 +372,7 @@ describe('CourseProductItem', () => {
 
       fetchMock.get(
         `https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`,
-        offer,
+        offering,
       );
       const orderQueryParameters = {
         course_code: order.course.code,
@@ -370,13 +386,13 @@ describe('CourseProductItem', () => {
       render(
         <CourseProductItem
           course={PacedCourseFactory({ code: '00000' }).one()}
-          productId={offer.product.id}
+          productId={offering.product.id}
         />,
       );
 
       // In the header, we should display the product title, the product price
       // and product date range and languages
-      await screen.findByRole('heading', { level: 3, name: offer.product.title });
+      await screen.findByRole('heading', { level: 3, name: offering.product.title });
       // the price shouldn't be a heading to prevent misdirection for screen reader users,
       // but we want to it to visually look like a h6
 
@@ -406,8 +422,8 @@ describe('CourseProductItem', () => {
   it.each([OrderState.PENDING, OrderState.NO_PAYMENT])(
     'renders product informations for %s order in compact mode',
     async (state) => {
-      const offer = OfferFactory().one();
-      const { product } = offer;
+      const offering = OfferingFactory().one();
+      const { product } = offering;
       const order = CredentialOrderFactory({
         product_id: product.id,
         course: PacedCourseFactory({ code: '00000' }).one(),
@@ -417,7 +433,7 @@ describe('CourseProductItem', () => {
 
       fetchMock.get(
         `https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`,
-        offer,
+        offering,
       );
       const orderQueryParameters = {
         course_code: order.course.code,
@@ -431,14 +447,14 @@ describe('CourseProductItem', () => {
       render(
         <CourseProductItem
           course={PacedCourseFactory({ code: '00000' }).one()}
-          productId={offer.product.id}
+          productId={offering.product.id}
           compact
         />,
       );
 
       // In the header, we should display the product title, the product price
       // and product date range and languages
-      await screen.findByRole('heading', { level: 3, name: offer.product.title });
+      await screen.findByRole('heading', { level: 3, name: offering.product.title });
       // the price shouldn't be a heading to prevent misdirection for screen reader users,
       // but we want to it to visually look like a h6
 
@@ -448,7 +464,7 @@ describe('CourseProductItem', () => {
       expect($enrolledInfo.classList.contains('h6')).toBe(true);
 
       // - Any target courses information should be displayed
-      offer.product.target_courses.forEach((course) => {
+      offering.product.target_courses.forEach((course) => {
         const $item = screen.queryByTestId(`course-item-${course.code}`);
         expect($item).not.toBeInTheDocument();
       });
@@ -459,8 +475,8 @@ describe('CourseProductItem', () => {
   );
 
   it.each(ENROLLABLE_ORDER_STATES)('renders product information for a %s order', async (state) => {
-    const offer = OfferFactory().one();
-    const { product } = offer;
+    const offering = OfferingFactory().one();
+    const { product } = offering;
     const order = CredentialOrderFactory({
       product_id: product.id,
       course: PacedCourseFactory({ code: '00000' }).one(),
@@ -468,7 +484,10 @@ describe('CourseProductItem', () => {
       state,
     }).one();
 
-    fetchMock.get(`https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`, offer);
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`,
+      offering,
+    );
     const orderQueryParameters = {
       course_code: order.course.code,
       product_id: order.product_id,
@@ -518,17 +537,17 @@ describe('CourseProductItem', () => {
   it.each(ENROLLABLE_ORDER_STATES)(
     'renders product informations for a %s order in compact mode',
     async (state) => {
-      const offer = OfferFactory().one();
+      const offering = OfferingFactory().one();
       const order: CredentialOrder = CredentialOrderFactory({
-        product_id: offer.product.id,
+        product_id: offering.product.id,
         course: PacedCourseFactory({ code: '00000' }).one(),
-        target_courses: offer.product.target_courses,
+        target_courses: offering.product.target_courses,
         state,
       }).one();
 
       fetchMock.get(
-        `https://joanie.endpoint/api/v1.0/courses/00000/products/${offer.product.id}/`,
-        offer,
+        `https://joanie.endpoint/api/v1.0/courses/00000/products/${offering.product.id}/`,
+        offering,
       );
       const orderQueryParameters = {
         product_id: order.product_id,
@@ -542,14 +561,14 @@ describe('CourseProductItem', () => {
 
       render(
         <CourseProductItem
-          productId={offer.product.id}
+          productId={offering.product.id}
           course={PacedCourseFactory({ code: '00000' }).one()}
           compact
         />,
       );
 
       // Wait for product information to be fetched
-      await screen.findByRole('heading', { level: 3, name: offer.product.title });
+      await screen.findByRole('heading', { level: 3, name: offering.product.title });
 
       // - In place of product price, a label should be displayed
       const $enrolledInfo = await screen.findByText('Purchased');
@@ -586,8 +605,8 @@ describe('CourseProductItem', () => {
   );
 
   it('renders enrollment information when user is enrolled to a course run', async () => {
-    const offer = OfferFactory().one();
-    const { product } = offer;
+    const offering = OfferingFactory().one();
+    const { product } = offering;
     // - Create an order with an active enrollment
     const enrollment: Enrollment = EnrollmentFactory({
       course_run: product.target_courses[0]!.course_runs[0]! as CourseRun,
@@ -599,7 +618,10 @@ describe('CourseProductItem', () => {
       target_enrollments: [enrollment],
     }).one();
 
-    fetchMock.get(`https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`, offer);
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`,
+      offering,
+    );
     const orderQueryParameters = {
       product_id: order.product_id,
       course_code: order.course?.code,
@@ -650,8 +672,8 @@ describe('CourseProductItem', () => {
   it.each(PURCHASABLE_ORDER_STATES)(
     'renders sale tunnel button if user already has a %s order',
     async (state) => {
-      const offer = OfferFactory().one();
-      const { product } = offer;
+      const offering = OfferingFactory().one();
+      const { product } = offering;
       const order = CredentialOrderFactory({
         product_id: product.id,
         course: PacedCourseFactory({ code: '00000' }).one(),
@@ -660,7 +682,7 @@ describe('CourseProductItem', () => {
       }).one();
       fetchMock.get(
         `https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`,
-        offer,
+        offering,
       );
       const orderQueryParameters = {
         product_id: order.product_id,
@@ -691,7 +713,7 @@ describe('CourseProductItem', () => {
       expect($price.classList.contains('h6')).toBe(true);
 
       // - Render all target courses information
-      offer.product.target_courses.forEach((course) => {
+      offering.product.target_courses.forEach((course) => {
         const $item = screen.getByTestId(`course-item-${course.code}`);
         // the course title shouldn't be a heading to prevent misdirection for screen reader users,
         // but we want to it to visually look like a h5
@@ -706,9 +728,12 @@ describe('CourseProductItem', () => {
   );
 
   it('renders sale tunnel button if user already has a canceled order', async () => {
-    const offer = OfferFactory().one();
-    const { product } = offer;
-    fetchMock.get(`https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`, offer);
+    const offering = OfferingFactory().one();
+    const { product } = offering;
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`,
+      offering,
+    );
     const orderQueryParameters = {
       product_id: product.id,
       course_code: '00000',
@@ -738,7 +763,7 @@ describe('CourseProductItem', () => {
     expect($price.classList.contains('h6')).toBe(true);
 
     // - Render all target courses information
-    offer.product.target_courses.forEach((course) => {
+    offering.product.target_courses.forEach((course) => {
       const $item = screen.getByTestId(`course-item-${course.code}`);
       // the course title shouldn't be a heading to prevent misdirection for screen reader users,
       // but we want to it to visually look like a h5
@@ -752,7 +777,7 @@ describe('CourseProductItem', () => {
   });
 
   it('renders error message when product fetching has failed', async () => {
-    const { product } = OfferFactory().one();
+    const { product } = OfferingFactory().one();
 
     fetchMock.get(
       `https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`,
@@ -773,18 +798,23 @@ describe('CourseProductItem', () => {
   });
 
   it('renders a warning message that tells that no seats are left', async () => {
-    const offer = OfferFactory({
-      seats: 2,
-      nb_seats_available: 0,
+    const offering = OfferingFactory({
+      rules: {
+        nb_available_seats: 0,
+        has_seats_left: false,
+      },
     }).one();
-    const { product } = offer;
+    const { product } = offering;
     const order = CredentialOrderFactory({
       product_id: product.id,
       course: PacedCourseFactory({ code: '00000' }).one(),
       target_courses: product.target_courses,
       state: OrderState.DRAFT,
     }).one();
-    fetchMock.get(`https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`, offer);
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`,
+      offering,
+    );
     const orderQueryParameters = {
       product_id: order.product_id,
       course_code: order.course?.code,

package/js/widgets/SyllabusCourseRunsList/components/CourseProductItem/index.stories.tsx

@@ -3,7 +3,7 @@ import { QueryClientProvider } from '@tanstack/react-query';
 import fetchMock from 'fetch-mock';
 import { StorybookHelper } from 'utils/StorybookHelper';
 import {
-  OfferFactory,
+  OfferingFactory,
   CourseRunFactory,
   CredentialOrderFactory,
   CredentialProductFactory,
@@ -22,13 +22,15 @@ const render = (args: CourseProductItemProps, options?: Maybe<{ order: Credentia
   fetchMock.get(`http://localhost:8071/api/v1.0/addresses/`, [], { overwriteRoutes: true });
   fetchMock.get(
     `http://localhost:8071/api/v1.0/courses/${args.course.code}/products/${args.productId}/`,
-    OfferFactory({
+    OfferingFactory({
       product: CredentialProductFactory({
         price: 840,
         price_currency: 'EUR',
       }).one(),
-      discounted_price: 800,
-      discount_rate: 0.3,
+      rules: {
+        discounted_price: 800,
+        discount_rate: 0.3,
+      },
     }).one(),
     { overwriteRoutes: true },
   );

package/js/widgets/SyllabusCourseRunsList/components/CourseProductItem/index.tsx

@@ -1,7 +1,7 @@
 import { Children, useEffect, useMemo } from 'react';
 import { defineMessages, FormattedMessage, FormattedNumber, useIntl } from 'react-intl';
 import c from 'classnames';
-import { Offer, CredentialOrder, Product, ProductType } from 'types/Joanie';
+import { Offering, CredentialOrder, Product, ProductType } from 'types/Joanie';
 import { useCourseProduct } from 'hooks/useCourseProducts';
 import { Spinner } from 'components/Spinner';
 import { Icon, IconTypeEnum } from 'components/Icon';
@@ -77,9 +77,9 @@ type HeaderProps = {
   canPurchase: boolean;
   order: Maybe<CredentialOrder>;
   product: Product;
-  offer: Offer;
+  offering: Offering;
 };
-const Header = ({ product, order, offer, hasPurchased, canPurchase, compact }: HeaderProps) => {
+const Header = ({ product, order, offering, hasPurchased, canPurchase, compact }: HeaderProps) => {
   const intl = useIntl();
   const formatDate = useDateFormat();
 
@@ -103,7 +103,7 @@ const Header = ({ product, order, offer, hasPurchased, canPurchase, compact }: H
       return null;
     }
 
-    if (offer.discounted_price) {
+    if (offering.rules.discounted_price != null) {
       return (
         <>
           <span id="original-price" className="offscreen">
@@ -122,7 +122,7 @@ const Header = ({ product, order, offer, hasPurchased, canPurchase, compact }: H
           <ins aria-describedby="discount-price" className="product-widget__price-discount">
             <FormattedNumber
               currency={product.price_currency}
-              value={offer.discounted_price}
+              value={offering.rules.discounted_price}
               style="currency"
             />
           </ins>
@@ -133,7 +133,7 @@ const Header = ({ product, order, offer, hasPurchased, canPurchase, compact }: H
     return (
       <FormattedNumber currency={product.price_currency} value={product.price} style="currency" />
     );
-  }, [canPurchase, offer.discounted_price, product.price]);
+  }, [canPurchase, offering.rules.discounted_price, product.price]);
 
   return (
     <header className="product-widget__header">
@@ -144,37 +144,40 @@ const Header = ({ product, order, offer, hasPurchased, canPurchase, compact }: H
         {hasPurchased && <FormattedMessage {...messages.purchased} />}
         {displayPrice}
       </strong>
-      {offer?.description && (
-        <p className="product-widget__header-description">{offer.description}</p>
+      {offering?.rules.description && (
+        <p className="product-widget__header-description">{offering.rules.description}</p>
       )}
-      {offer?.discounted_price && (
+      {offering?.rules.discounted_price && (
         <p className="product-widget__header-discount">
-          {offer.discount_rate ? (
+          {offering.rules.discount_rate ? (
             <span className="product-widget__header-discount-rate">
-              <FormattedNumber value={-offer.discount_rate} style="percent" />
+              <FormattedNumber value={-offering.rules.discount_rate} style="percent" />
             </span>
           ) : (
             <span className="product-widget__header-discount-amount">
               <FormattedNumber
                 currency={product.price_currency}
-                value={-offer.discount_amount!}
+                value={-offering.rules.discount_amount!}
                 style="currency"
               />
             </span>
           )}
-          {offer.discount_start && (
+          {offering.rules.discount_start && (
             <span className="product-widget__header-discount-date">
               &nbsp;
               <FormattedMessage
                 {...messages.from}
-                values={{ from: formatDate(offer.discount_start) }}
+                values={{ from: formatDate(offering.rules.discount_start) }}
               />
             </span>
           )}
-          {offer.discount_end && (
+          {offering.rules.discount_end && (
             <span className="product-widget__header-discount-date">
               &nbsp;
-              <FormattedMessage {...messages.to} values={{ to: formatDate(offer.discount_end) }} />
+              <FormattedMessage
+                {...messages.to}
+                values={{ to: formatDate(offering.rules.discount_end) }}
+              />
             </span>
           )}
         </p>
@@ -236,12 +239,12 @@ const Content = ({ product, order }: { product: Product; order?: CredentialOrder
 const CourseProductItem = ({ productId, course, compact = false }: CourseProductItemProps) => {
   // FIXME(rlecellier): useCourseProduct need's a filter on product.type that only return
   // CredentialOrder
-  const { item: offer, states: productQueryStates } = useCourseProduct({
+  const { item: offering, states: productQueryStates } = useCourseProduct({
     product_id: productId,
     course_id: course.code,
   });
 
-  const product = offer?.product;
+  const product = offering?.product;
   const { item: productOrder, states: orderQueryStates } = useProductOrder({
     productId,
     courseCode: course.code,
@@ -299,14 +302,18 @@ const CourseProductItem = ({ productId, course, compact = false }: CourseProduct
           <Header
             product={product}
             order={order}
-            offer={offer}
+            offering={offering}
             canPurchase={canPurchase}
             hasPurchased={hasPurchased}
             compact={compact}
           />
           {canShowContent && <Content product={product} order={order} />}
           <footer className="product-widget__footer">
-            <CourseProductItemFooter course={course} offer={offer} canPurchase={canPurchase} />
+            <CourseProductItemFooter
+              course={course}
+              offering={offering}
+              canPurchase={canPurchase}
+            />
           </footer>
         </>
       )}

package/js/widgets/SyllabusCourseRunsList/index.spec.tsx

@@ -22,8 +22,8 @@ import {
 import SyllabusCourseRunsList from 'widgets/SyllabusCourseRunsList/index';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { CourseRun, Priority } from 'types';
-import { Offer } from 'types/Joanie';
-import { OfferFactory } from 'utils/test/factories/joanie';
+import { Offering } from 'types/Joanie';
+import { OfferingFactory } from 'utils/test/factories/joanie';
 import { DEFAULT_DATE_FORMAT } from 'hooks/useDateFormat';
 import { StringHelper } from 'utils/StringHelper';
 import { computeStates } from 'utils/CourseRuns';
@@ -211,9 +211,9 @@ describe('<SyllabusCourseRunsList/>', () => {
     });
   };
 
-  const expectCourseProduct = async (container: HTMLElement, offer: Offer) => {
+  const expectCourseProduct = async (container: HTMLElement, offering: Offering) => {
     const heading = await findByRole(container, 'heading', {
-      name: offer.product.title,
+      name: offering.product.title,
     });
     expect(Array.from(heading.classList)).toContain('product-widget__title');
   };
@@ -383,9 +383,9 @@ describe('<SyllabusCourseRunsList/>', () => {
 
   it('has one opened product', async () => {
     const course = PacedCourseFactory().one();
-    const offer = OfferFactory().one();
-    const resourceLink = `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${offer.product.id}/`;
-    fetchMock.get(resourceLink, offer);
+    const offering = OfferingFactory().one();
+    const resourceLink = `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${offering.product.id}/`;
+    fetchMock.get(resourceLink, offering);
 
     const courseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
       resource_link: resourceLink,
@@ -406,7 +406,7 @@ describe('<SyllabusCourseRunsList/>', () => {
     expect(getHeaderContainer().querySelectorAll('.course-detail__run-descriptions').length).toBe(
       1,
     );
-    await expectCourseProduct(getHeaderContainer(), offer);
+    await expectCourseProduct(getHeaderContainer(), offering);
 
     // Portal.
     expectEmptyPortalContainer();