richie-education 3.1.3-dev11 → 3.1.3-dev15

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

@@ -6,7 +6,7 @@ import {
   PacedCourseFactory,
 } from 'utils/test/factories/richie';
 import {
-  CourseProductRelationFactory,
+  OfferFactory,
   EnrollmentFactory,
   CredentialOrderFactory,
   ProductFactory,
@@ -74,8 +74,8 @@ describe('CourseProductItem', () => {
     }).format(price);
 
   it('should display a loader until product is loaded', async () => {
-    const relation = CourseProductRelationFactory().one();
-    const { product } = relation;
+    const offer = OfferFactory().one();
+    const { product } = offer;
     const productDeferred = new Deferred();
     fetchMock.get(
       `https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`,
@@ -92,17 +92,14 @@ describe('CourseProductItem', () => {
 
     // - A loader should be displayed while product information are fetching
     await expectSpinner('Loading product information...');
-    productDeferred.resolve(relation);
+    productDeferred.resolve(offer);
     await expectNoSpinner('Loading product information...');
   });
 
   it('renders product information for anonymous user', async () => {
-    const relation = CourseProductRelationFactory().one();
-    const { product } = relation;
-    fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`,
-      relation,
-    );
+    const offer = OfferFactory().one();
+    const { product } = offer;
+    fetchMock.get(`https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`, offer);
 
     render(
       <CourseProductItem
@@ -131,7 +128,7 @@ describe('CourseProductItem', () => {
     ).not.toBeInTheDocument();
 
     // - Render all target courses information
-    relation.product.target_courses.forEach((course) => {
+    offer.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
@@ -151,22 +148,21 @@ describe('CourseProductItem', () => {
   });
 
   it('renders discount rate for anonymous user', async () => {
-    const relation = CourseProductRelationFactory({
+    const offer = OfferFactory({
       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 } = relation;
-    fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`,
-      relation,
-    );
+    const { product } = offer;
+    fetchMock.get(`https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`, offer);
 
     render(
       <CourseProductItem
@@ -192,7 +188,7 @@ describe('CourseProductItem', () => {
     const discountedPriceLabel = screen.getByText('Discounted price:');
     expect(discountedPriceLabel.classList.contains('offscreen')).toBe(true);
     const discountedPrice = screen.getByText(
-      priceFormatter(product.price_currency, relation.discounted_price!).replace(
+      priceFormatter(product.price_currency, offer.rules.discounted_price!).replace(
         /(\u202F|\u00a0)/g,
         ' ',
       ),
@@ -212,22 +208,21 @@ describe('CourseProductItem', () => {
   });
 
   it('renders discount amount for anonymous user', async () => {
-    const relation = CourseProductRelationFactory({
+    const offer = OfferFactory({
       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 } = relation;
-    fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`,
-      relation,
-    );
+    const { product } = offer;
+    fetchMock.get(`https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`, offer);
 
     render(
       <CourseProductItem
@@ -253,7 +248,7 @@ describe('CourseProductItem', () => {
     const discountedPriceLabel = screen.getByText('Discounted price:');
     expect(discountedPriceLabel.classList.contains('offscreen')).toBe(true);
     const discountedPrice = screen.getByText(
-      priceFormatter(product.price_currency, relation.discounted_price!).replace(
+      priceFormatter(product.price_currency, offer.rules.discounted_price!).replace(
         /(\u202F|\u00a0)/g,
         ' ',
       ),
@@ -273,16 +268,13 @@ describe('CourseProductItem', () => {
   });
 
   it('does not render <CertificateItem /> if product do not have a certificate', async () => {
-    const relation = CourseProductRelationFactory({
+    const offer = OfferFactory({
       product: ProductFactory({
         certificate_definition: undefined,
       }).one(),
     }).one();
-    const { product } = relation;
-    fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`,
-      relation,
-    );
+    const { product } = offer;
+    fetchMock.get(`https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`, offer);
 
     render(
       <CourseProductItem
@@ -300,16 +292,16 @@ describe('CourseProductItem', () => {
   });
 
   it('renders product information in compact mode', async () => {
-    const relation = CourseProductRelationFactory().one();
+    const offer = OfferFactory().one();
     fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/courses/00000/products/${relation.product.id}/`,
-      relation,
+      `https://joanie.endpoint/api/v1.0/courses/00000/products/${offer.product.id}/`,
+      offer,
     );
 
     const { container } = render(
       <CourseProductItem
         course={PacedCourseFactory({ code: '00000' }).one()}
-        productId={relation.product.id}
+        productId={offer.product.id}
         compact
       />,
       { queryOptions: { client: createTestQueryClient({ user: null }) } },
@@ -317,14 +309,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: relation.product.title });
+    await screen.findByRole('heading', { level: 3, name: offer.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(relation.product.price_currency, relation.product.price).replace(
+      priceFormatter(offer.product.price_currency, offer.product.price).replace(
         /(\u202F|\u00a0)/g,
         ' ',
       ),
@@ -340,7 +332,7 @@ describe('CourseProductItem', () => {
     expect($productWidgetContent).not.toBeInTheDocument();
 
     // - Any target courses information should be displayed
-    relation.product.target_courses.forEach((course) => {
+    offer.product.target_courses.forEach((course) => {
       const $item = screen.queryByTestId(`course-item-${course.code}`);
       expect($item).not.toBeInTheDocument();
     });
@@ -349,7 +341,7 @@ describe('CourseProductItem', () => {
     expect(screen.queryByTestId('CertificateItem')).not.toBeInTheDocument();
 
     // - Render a login button
-    screen.getByRole('button', { name: `Login to purchase "${relation.product.title}"` });
+    screen.getByRole('button', { name: `Login to purchase "${offer.product.title}"` });
     // - Does not render PurchaseButton cta
     expect(screen.queryByTestId('PurchaseButton__cta')).not.toBeInTheDocument();
   });
@@ -357,8 +349,8 @@ describe('CourseProductItem', () => {
   it.each([OrderState.PENDING, OrderState.NO_PAYMENT])(
     'renders product informations for %s order',
     async (state) => {
-      const relation = CourseProductRelationFactory().one();
-      const { product } = relation;
+      const offer = OfferFactory().one();
+      const { product } = offer;
       const order = CredentialOrderFactory({
         product_id: product.id,
         course: PacedCourseFactory({ code: '00000' }).one(),
@@ -368,7 +360,7 @@ describe('CourseProductItem', () => {
 
       fetchMock.get(
         `https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`,
-        relation,
+        offer,
       );
       const orderQueryParameters = {
         course_code: order.course.code,
@@ -382,13 +374,13 @@ describe('CourseProductItem', () => {
       render(
         <CourseProductItem
           course={PacedCourseFactory({ code: '00000' }).one()}
-          productId={relation.product.id}
+          productId={offer.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: relation.product.title });
+      await screen.findByRole('heading', { level: 3, name: offer.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
 
@@ -418,8 +410,8 @@ describe('CourseProductItem', () => {
   it.each([OrderState.PENDING, OrderState.NO_PAYMENT])(
     'renders product informations for %s order in compact mode',
     async (state) => {
-      const relation = CourseProductRelationFactory().one();
-      const { product } = relation;
+      const offer = OfferFactory().one();
+      const { product } = offer;
       const order = CredentialOrderFactory({
         product_id: product.id,
         course: PacedCourseFactory({ code: '00000' }).one(),
@@ -429,7 +421,7 @@ describe('CourseProductItem', () => {
 
       fetchMock.get(
         `https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`,
-        relation,
+        offer,
       );
       const orderQueryParameters = {
         course_code: order.course.code,
@@ -443,14 +435,14 @@ describe('CourseProductItem', () => {
       render(
         <CourseProductItem
           course={PacedCourseFactory({ code: '00000' }).one()}
-          productId={relation.product.id}
+          productId={offer.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: relation.product.title });
+      await screen.findByRole('heading', { level: 3, name: offer.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
 
@@ -460,7 +452,7 @@ describe('CourseProductItem', () => {
       expect($enrolledInfo.classList.contains('h6')).toBe(true);
 
       // - Any target courses information should be displayed
-      relation.product.target_courses.forEach((course) => {
+      offer.product.target_courses.forEach((course) => {
         const $item = screen.queryByTestId(`course-item-${course.code}`);
         expect($item).not.toBeInTheDocument();
       });
@@ -471,8 +463,8 @@ describe('CourseProductItem', () => {
   );
 
   it.each(ENROLLABLE_ORDER_STATES)('renders product information for a %s order', async (state) => {
-    const relation = CourseProductRelationFactory().one();
-    const { product } = relation;
+    const offer = OfferFactory().one();
+    const { product } = offer;
     const order = CredentialOrderFactory({
       product_id: product.id,
       course: PacedCourseFactory({ code: '00000' }).one(),
@@ -480,10 +472,7 @@ describe('CourseProductItem', () => {
       state,
     }).one();
 
-    fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`,
-      relation,
-    );
+    fetchMock.get(`https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`, offer);
     const orderQueryParameters = {
       course_code: order.course.code,
       product_id: order.product_id,
@@ -533,17 +522,17 @@ describe('CourseProductItem', () => {
   it.each(ENROLLABLE_ORDER_STATES)(
     'renders product informations for a %s order in compact mode',
     async (state) => {
-      const relation = CourseProductRelationFactory().one();
+      const offer = OfferFactory().one();
       const order: CredentialOrder = CredentialOrderFactory({
-        product_id: relation.product.id,
+        product_id: offer.product.id,
         course: PacedCourseFactory({ code: '00000' }).one(),
-        target_courses: relation.product.target_courses,
+        target_courses: offer.product.target_courses,
         state,
       }).one();
 
       fetchMock.get(
-        `https://joanie.endpoint/api/v1.0/courses/00000/products/${relation.product.id}/`,
-        relation,
+        `https://joanie.endpoint/api/v1.0/courses/00000/products/${offer.product.id}/`,
+        offer,
       );
       const orderQueryParameters = {
         product_id: order.product_id,
@@ -557,14 +546,14 @@ describe('CourseProductItem', () => {
 
       render(
         <CourseProductItem
-          productId={relation.product.id}
+          productId={offer.product.id}
           course={PacedCourseFactory({ code: '00000' }).one()}
           compact
         />,
       );
 
       // Wait for product information to be fetched
-      await screen.findByRole('heading', { level: 3, name: relation.product.title });
+      await screen.findByRole('heading', { level: 3, name: offer.product.title });
 
       // - In place of product price, a label should be displayed
       const $enrolledInfo = await screen.findByText('Purchased');
@@ -601,8 +590,8 @@ describe('CourseProductItem', () => {
   );
 
   it('renders enrollment information when user is enrolled to a course run', async () => {
-    const relation = CourseProductRelationFactory().one();
-    const { product } = relation;
+    const offer = OfferFactory().one();
+    const { product } = offer;
     // - Create an order with an active enrollment
     const enrollment: Enrollment = EnrollmentFactory({
       course_run: product.target_courses[0]!.course_runs[0]! as CourseRun,
@@ -614,10 +603,7 @@ describe('CourseProductItem', () => {
       target_enrollments: [enrollment],
     }).one();
 
-    fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`,
-      relation,
-    );
+    fetchMock.get(`https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`, offer);
     const orderQueryParameters = {
       product_id: order.product_id,
       course_code: order.course?.code,
@@ -668,8 +654,8 @@ describe('CourseProductItem', () => {
   it.each(PURCHASABLE_ORDER_STATES)(
     'renders sale tunnel button if user already has a %s order',
     async (state) => {
-      const relation = CourseProductRelationFactory().one();
-      const { product } = relation;
+      const offer = OfferFactory().one();
+      const { product } = offer;
       const order = CredentialOrderFactory({
         product_id: product.id,
         course: PacedCourseFactory({ code: '00000' }).one(),
@@ -678,7 +664,7 @@ describe('CourseProductItem', () => {
       }).one();
       fetchMock.get(
         `https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`,
-        relation,
+        offer,
       );
       const orderQueryParameters = {
         product_id: order.product_id,
@@ -709,7 +695,7 @@ describe('CourseProductItem', () => {
       expect($price.classList.contains('h6')).toBe(true);
 
       // - Render all target courses information
-      relation.product.target_courses.forEach((course) => {
+      offer.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
@@ -724,12 +710,9 @@ describe('CourseProductItem', () => {
   );
 
   it('renders sale tunnel button if user already has a canceled order', async () => {
-    const relation = CourseProductRelationFactory().one();
-    const { product } = relation;
-    fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`,
-      relation,
-    );
+    const offer = OfferFactory().one();
+    const { product } = offer;
+    fetchMock.get(`https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`, offer);
     const orderQueryParameters = {
       product_id: product.id,
       course_code: '00000',
@@ -759,7 +742,7 @@ describe('CourseProductItem', () => {
     expect($price.classList.contains('h6')).toBe(true);
 
     // - Render all target courses information
-    relation.product.target_courses.forEach((course) => {
+    offer.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
@@ -773,7 +756,7 @@ describe('CourseProductItem', () => {
   });
 
   it('renders error message when product fetching has failed', async () => {
-    const { product } = CourseProductRelationFactory().one();
+    const { product } = OfferFactory().one();
 
     fetchMock.get(
       `https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`,
@@ -794,21 +777,20 @@ describe('CourseProductItem', () => {
   });
 
   it('renders a warning message that tells that no seats are left', async () => {
-    const relation = CourseProductRelationFactory({
-      seats: 2,
-      nb_seats_available: 0,
+    const offer = OfferFactory({
+      rules: {
+        nb_available_seats: 0,
+        has_seats_left: false,
+      },
     }).one();
-    const { product } = relation;
+    const { product } = offer;
     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}/`,
-      relation,
-    );
+    fetchMock.get(`https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`, offer);
     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 {
-  CourseProductRelationFactory,
+  OfferFactory,
   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}/`,
-    CourseProductRelationFactory({
+    OfferFactory({
       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 { CourseProductRelation, CredentialOrder, Product, ProductType } from 'types/Joanie';
+import { Offer, CredentialOrder, Product, ProductType } from 'types/Joanie';
 import { useCourseProduct } from 'hooks/useCourseProducts';
 import { Spinner } from 'components/Spinner';
 import { Icon, IconTypeEnum } from 'components/Icon';
@@ -77,16 +77,9 @@ type HeaderProps = {
   canPurchase: boolean;
   order: Maybe<CredentialOrder>;
   product: Product;
-  courseProductRelation: CourseProductRelation;
+  offer: Offer;
 };
-const Header = ({
-  product,
-  order,
-  courseProductRelation,
-  hasPurchased,
-  canPurchase,
-  compact,
-}: HeaderProps) => {
+const Header = ({ product, order, offer, hasPurchased, canPurchase, compact }: HeaderProps) => {
   const intl = useIntl();
   const formatDate = useDateFormat();
 
@@ -110,7 +103,7 @@ const Header = ({
       return null;
     }
 
-    if (courseProductRelation.discounted_price) {
+    if (offer.rules.discounted_price != null) {
       return (
         <>
           <span id="original-price" className="offscreen">
@@ -129,7 +122,7 @@ const Header = ({
           <ins aria-describedby="discount-price" className="product-widget__price-discount">
             <FormattedNumber
               currency={product.price_currency}
-              value={courseProductRelation.discounted_price}
+              value={offer.rules.discounted_price}
               style="currency"
             />
           </ins>
@@ -140,7 +133,7 @@ const Header = ({
     return (
       <FormattedNumber currency={product.price_currency} value={product.price} style="currency" />
     );
-  }, [canPurchase, courseProductRelation.discounted_price, product.price]);
+  }, [canPurchase, offer.rules.discounted_price, product.price]);
 
   return (
     <header className="product-widget__header">
@@ -151,39 +144,39 @@ const Header = ({
         {hasPurchased && <FormattedMessage {...messages.purchased} />}
         {displayPrice}
       </strong>
-      {courseProductRelation?.description && (
-        <p className="product-widget__header-description">{courseProductRelation.description}</p>
+      {offer?.rules.description && (
+        <p className="product-widget__header-description">{offer.rules.description}</p>
       )}
-      {courseProductRelation?.discounted_price && (
+      {offer?.rules.discounted_price && (
         <p className="product-widget__header-discount">
-          {courseProductRelation.discount_rate ? (
+          {offer.rules.discount_rate ? (
             <span className="product-widget__header-discount-rate">
-              <FormattedNumber value={-courseProductRelation.discount_rate} style="percent" />
+              <FormattedNumber value={-offer.rules.discount_rate} style="percent" />
             </span>
           ) : (
             <span className="product-widget__header-discount-amount">
               <FormattedNumber
                 currency={product.price_currency}
-                value={-courseProductRelation.discount_amount!}
+                value={-offer.rules.discount_amount!}
                 style="currency"
               />
             </span>
           )}
-          {courseProductRelation.discount_start && (
+          {offer.rules.discount_start && (
             <span className="product-widget__header-discount-date">
               &nbsp;
               <FormattedMessage
                 {...messages.from}
-                values={{ from: formatDate(courseProductRelation.discount_start) }}
+                values={{ from: formatDate(offer.rules.discount_start) }}
               />
             </span>
           )}
-          {courseProductRelation.discount_end && (
+          {offer.rules.discount_end && (
             <span className="product-widget__header-discount-date">
               &nbsp;
               <FormattedMessage
                 {...messages.to}
-                values={{ to: formatDate(courseProductRelation.discount_end) }}
+                values={{ to: formatDate(offer.rules.discount_end) }}
               />
             </span>
           )}
@@ -246,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: courseProductRelation, states: productQueryStates } = useCourseProduct({
+  const { item: offer, states: productQueryStates } = useCourseProduct({
     product_id: productId,
     course_id: course.code,
   });
 
-  const product = courseProductRelation?.product;
+  const product = offer?.product;
   const { item: productOrder, states: orderQueryStates } = useProductOrder({
     productId,
     courseCode: course.code,
@@ -309,18 +302,14 @@ const CourseProductItem = ({ productId, course, compact = false }: CourseProduct
           <Header
             product={product}
             order={order}
-            courseProductRelation={courseProductRelation}
+            offer={offer}
             canPurchase={canPurchase}
             hasPurchased={hasPurchased}
             compact={compact}
           />
           {canShowContent && <Content product={product} order={order} />}
           <footer className="product-widget__footer">
-            <CourseProductItemFooter
-              course={course}
-              courseProductRelation={courseProductRelation}
-              canPurchase={canPurchase}
-            />
+            <CourseProductItemFooter course={course} offer={offer} canPurchase={canPurchase} />
           </footer>
         </>
       )}