richie-education 3.1.3-dev8 → 3.2.1-dev1

package/i18n/locales/vi-VN.json

@@ -227,6 +227,18 @@
     "description": "Course run languages",
     "message": "Available in {languages}"
   },
+  "components.CourseProductItem.discount_rate": {
+    "description": "Discount rate information",
+    "message": "-{rate}%"
+  },
+  "components.CourseProductItem.discounted_price": {
+    "description": "Label for the discounted price of a product",
+    "message": "Discounted price:"
+  },
+  "components.CourseProductItem.from": {
+    "description": "Discount start date information",
+    "message": "from {from}"
+  },
   "components.CourseProductItem.fromTo": {
     "description": "Course run date range",
     "message": "From {from} {to, select, undefined {} other {to {to}}}"
@@ -243,10 +255,18 @@
     "description": "Message displayed when no seats are available for the product",
     "message": "Sorry, no seats available for now"
   },
+  "components.CourseProductItem.original_price": {
+    "description": "Label for the original price of a product",
+    "message": "Original price:"
+  },
   "components.CourseProductItem.purchased": {
     "description": "Message displayed when authenticated user owned the product",
     "message": "Purchased"
   },
+  "components.CourseProductItem.to": {
+    "description": "Discount end date information",
+    "message": "to {to}"
+  },
   "components.CourseProductsList.end": {
     "description": "End label displayed in the header of course run dates section",
     "message": "End"
@@ -1927,8 +1947,8 @@
     "description": "Sub title of the dashboard sidebar",
     "message": "You are on your teacher dashboard"
   },
-  "components.TeacherDashboardTraining.errorNoCourseProductRelation": {
-    "description": "Message displayed when requested course product relation is not found",
+  "components.TeacherDashboardTraining.errorNoOffering": {
+    "description": "Message displayed when requested offering is not found",
     "message": "This product doesn't exist"
   },
   "components.TeacherDashboardTrainingLoader.loading": {
@@ -2047,14 +2067,6 @@
     "description": "Error message shown to the user when orders fetch request fails.",
     "message": "An error occurred while fetching orders. Please retry later."
   },
-  "hooks.useCourseProductRelations.errorGet": {
-    "description": "Error message shown to the user when course product relation fetch request fails.",
-    "message": "An error occurred while fetching trainings. Please retry later."
-  },
-  "hooks.useCourseProductRelations.errorNotFound": {
-    "description": "Error message shown to the user when no course product relation matches.",
-    "message": "Cannot find the training."
-  },
   "hooks.useCourseProductUnion.errorGet": {
     "description": "Error message shown to the user when trainings fetch request fails.",
     "message": "An error occurred while fetching trainings. Please retry later."
@@ -2147,6 +2159,14 @@
     "description": "Error message shown to the user when it isn't logged.",
     "message": "You aren't logged in."
   },
+  "hooks.useOfferings.errorGet": {
+    "description": "Error message shown to the user when offering fetch request fails.",
+    "message": "An error occurred while fetching trainings. Please retry later."
+  },
+  "hooks.useOfferings.errorNotFound": {
+    "description": "Error message shown to the user when no offering matches.",
+    "message": "Cannot find the training."
+  },
   "hooks.useOpenEdxProfile.errorGet": {
     "description": "Error message shown to the user when openEdx profile fetch request fails.",
     "message": "An error occurred while fetching your profile. Please retry later."

package/js/api/joanie.ts

@@ -127,8 +127,8 @@ export const getRoutes = () => {
     },
     organizations: {
       get: `${baseUrl}/organizations/:id/`,
-      courseProductRelations: {
-        get: `${baseUrl}/organizations/:organization_id/course-product-relations/:id/`,
+      offerings: {
+        get: `${baseUrl}/organizations/:organization_id/offerings/:id/`,
       },
       courses: {
         get: `${baseUrl}/organizations/:organization_id/courses/:id/`,
@@ -156,8 +156,8 @@ export const getRoutes = () => {
     courseRuns: {
       get: `${baseUrl}/course-runs/:id/`,
     },
-    courseProductRelations: {
-      get: `${baseUrl}/course-product-relations/:id/`,
+    offerings: {
+      get: `${baseUrl}/offerings/:id/`,
     },
     contractDefinitions: {
       previewTemplate: `${baseUrl}/contract_definitions/:id/preview_template/`,
@@ -470,12 +470,12 @@ const API = (): Joanie.API => {
         ).then(checkStatus);
       },
     },
-    courseProductRelations: {
-      get: (filters?: Joanie.CourseProductRelationQueryFilters) => {
+    offerings: {
+      get: (filters?: Joanie.OfferingQueryFilters) => {
         return fetchWithJWT(
           filters?.organization_id
-            ? buildApiUrl(ROUTES.organizations.courseProductRelations.get, filters)
-            : buildApiUrl(ROUTES.courseProductRelations.get, filters),
+            ? buildApiUrl(ROUTES.organizations.offerings.get, filters)
+            : buildApiUrl(ROUTES.offerings.get, filters),
         ).then(checkStatus);
       },
     },

package/js/components/ContractFrame/OrganizationContractFrame.spec.tsx

@@ -6,14 +6,10 @@ import { IntlProvider } from 'react-intl';
 import fetchMock from 'fetch-mock';
 import { QueryStateFactory } from 'utils/test/factories/reactQuery';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
-import {
-  ContractFactory,
-  CourseProductRelationFactory,
-  OrganizationFactory,
-} from 'utils/test/factories/joanie';
+import { ContractFactory, OfferingFactory, OrganizationFactory } from 'utils/test/factories/joanie';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import JoanieSessionProvider from 'contexts/SessionContext/JoanieSessionProvider';
-import { isCourseProductRelation } from 'types/Joanie';
+import { isOffering } from 'types/Joanie';
 import { Props } from './AbstractContractFrame';
 import { OrganizationContractFrame } from '.';
 
@@ -77,31 +73,29 @@ describe('OrganizationContractFrame', () => {
 
   it.each([
     {
-      label: 'contractList: undefined, courseProductRelation: undefined',
+      label: 'contractList: undefined, offering: undefined',
       contractList: undefined,
-      courseProductRelation: undefined,
+      offering: undefined,
     },
     {
-      label: 'contractList: 2 Contract, courseProductRelation: undefined',
+      label: 'contractList: 2 Contract, offering: undefined',
       contractList: ContractFactory().many(2),
-      courseProductRelation: undefined,
+      offering: undefined,
     },
     {
-      label: 'contractList: undefined, courseProductRelation: one CourseProductRelation',
+      label: 'contractList: undefined, offering: one Offering',
       contractList: undefined,
-      courseProductRelation: CourseProductRelationFactory().one(),
+      offering: OfferingFactory().one(),
     },
   ])(
     'should implement AbstractContractFrame for organization and $label',
-    async ({ contractList, courseProductRelation }) => {
+    async ({ contractList, offering }) => {
       const organization = OrganizationFactory().one();
       const contracts = contractList || ContractFactory().many(2);
       const isOpen = faker.datatype.boolean();
 
       const invitationLinkQueryString =
-        courseProductRelation && isCourseProductRelation(courseProductRelation)
-          ? `?course_product_relation_ids=${courseProductRelation.id}`
-          : '';
+        offering && isOffering(offering) ? `?offering_ids=${offering.id}` : '';
       const expectedUrls = {
         getInvitationLink: `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/contracts-signature-link/${invitationLinkQueryString}`,
         checkSignature: `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/contracts/?id=${contracts[0].id}&id=${contracts[1].id}`,
@@ -133,9 +127,7 @@ describe('OrganizationContractFrame', () => {
           <Wrapper client={client}>
             <OrganizationContractFrame
               organizationId={organization.id}
-              courseProductRelationIds={
-                courseProductRelation ? [courseProductRelation.id] : undefined
-              }
+              offeringIds={offering ? [offering.id] : undefined}
               isOpen={isOpen}
               onDone={handleDone}
               onClose={handleClose}

package/js/components/ContractFrame/OrganizationContractFrame.tsx

@@ -4,17 +4,17 @@ import { useJoanieApi } from 'contexts/JoanieApiContext';
 import AbstractContractFrame, {
   AbstractProps,
 } from 'components/ContractFrame/AbstractContractFrame';
-import { Contract, CourseProductRelation } from 'types/Joanie';
+import { Contract, Offering } from 'types/Joanie';
 
 interface Props extends AbstractProps {
   contractIds?: Contract['id'][];
   organizationId: string;
-  courseProductRelationIds?: CourseProductRelation['id'][];
+  offeringIds?: Offering['id'][];
 }
 
 const OrganizationContractFrame = ({
   organizationId,
-  courseProductRelationIds = [],
+  offeringIds = [],
   contractIds,
   onDone,
   ...props
@@ -29,7 +29,7 @@ const OrganizationContractFrame = ({
      be signed. We need to keep track of these ids to check if all contracts have been signed.
      */
     const response = await api.organizations.contracts.getSignatureLinks({
-      course_product_relation_ids: courseProductRelationIds,
+      offering_ids: offeringIds,
       organization_id: organizationId,
       contracts_ids: contractIds,
     });

package/js/components/CourseGlimpse/CourseGlimpseFooter.tsx

@@ -65,6 +65,35 @@ export const CourseGlimpseFooter: React.FC<{ course: CourseGlimpseCourse } & Com
   const offerIcon = `icon-offer-${offer}` as OfferIconType;
   const offerCertificateIcon = hasCertificateOffer && IconTypeEnum.SCHOOL;
   const offerPrice = hasEnrollmentOffer && course.price;
+  const discountedPrice = course.discounted_price ?? null;
+  const hasDiscount = discountedPrice !== null;
+
+  let $price = null;
+
+  if (offerPrice) {
+    if (hasDiscount) {
+      $price = (
+        <div className="offer_prices">
+          <span className="offer__price offer__price--striked">
+            <FormattedNumber value={offerPrice} currency={course.price_currency} style="currency" />
+          </span>
+          <span className="offer__price offer__price--discounted">
+            <FormattedNumber
+              value={discountedPrice}
+              currency={course.price_currency}
+              style="currency"
+            />
+          </span>
+        </div>
+      );
+    } else {
+      $price = (
+        <span className="offer__price">
+          <FormattedNumber value={offerPrice} currency={course.price_currency} style="currency" />
+        </span>
+      );
+    }
+  }
 
   return (
     <div className="course-glimpse-footer">
@@ -99,11 +128,7 @@ export const CourseGlimpseFooter: React.FC<{ course: CourseGlimpseCourse } & Com
           name={offerIcon}
           title={intl.formatMessage(courseOfferMessages[offer])}
         />
-        {offerPrice && (
-          <span className="offer__price">
-            <FormattedNumber value={offerPrice} currency={course.price_currency} style="currency" />
-          </span>
-        )}
+        {$price}
       </div>
     </div>
   );

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

@@ -59,6 +59,10 @@ describe('widgets/Search/components/CourseGlimpse', () => {
     certificate_offer: CourseCertificateOffer.FREE,
     certificate_price: null,
     price_currency: 'EUR',
+    discounted_price: null,
+    discount: null,
+    certificate_discounted_price: null,
+    certificate_discount: null,
   };
 
   const contextProps: CommonDataProps['context'] = RichieContextFactory().one();
@@ -168,6 +172,20 @@ describe('widgets/Search/components/CourseGlimpse', () => {
     );
   });
 
+  it('renders a course glimpse with a discount', () => {
+    const { container } = renderCourseGlimpse({
+      contextProps,
+      course: { ...course, price: 100.0, discount: '30%', discounted_price: 70.0 },
+    });
+
+    const prices = container.getElementsByClassName('offer_prices');
+    expect(prices.length).toBe(1);
+    expect(prices[0].children.length).toBe(2);
+    const discountedPrice = container.getElementsByClassName('offer__price--discounted');
+    expect(discountedPrice.length).toBe(1);
+    expect(discountedPrice[0]).toHaveTextContent('€70.00');
+  });
+
   it('does not show certificate offer if the course does not offer a certificate', () => {
     const { container } = renderCourseGlimpse({
       contextProps,

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

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { RichieContextFactory, CourseLightFactory } from 'utils/test/factories/richie';
-import { getCourseGlimpseProps, CourseGlimpse } from 'components/CourseGlimpse';
+import { CourseLightFactory, RichieContextFactory } from 'utils/test/factories/richie';
+import { CourseGlimpse, getCourseGlimpseProps } from 'components/CourseGlimpse';
+import { CourseCertificateOffer, CourseOffer } from 'types/Course';
 
 export default {
   component: CourseGlimpse,
@@ -8,9 +9,79 @@ export default {
 
 type Story = StoryObj<typeof CourseGlimpse>;
 
+const richieContext = RichieContextFactory().one();
+const courseLight = CourseLightFactory().one();
+const courseGlimpseCourse = getCourseGlimpseProps(courseLight);
+
 export const RichieCourse: Story = {
   args: {
-    context: RichieContextFactory().one(),
-    course: getCourseGlimpseProps(CourseLightFactory().one()),
+    context: richieContext,
+    course: { ...courseGlimpseCourse },
+  },
+};
+
+export const certificateProduct: Story = {
+  args: {
+    context: richieContext,
+    course: {
+      ...courseGlimpseCourse,
+      title: 'Certificate Product',
+      offer: CourseOffer.FREE,
+      price: null,
+      certificate_offer: CourseCertificateOffer.PAID,
+      certificate_price: 100,
+      discounted_price: null,
+      discount: null,
+    },
+  },
+};
+
+export const certificateProductDiscount: Story = {
+  args: {
+    context: richieContext,
+    course: {
+      ...courseGlimpseCourse,
+      title: 'Certificate Product with Discount',
+      offer: CourseOffer.FREE,
+      price: null,
+      certificate_offer: CourseCertificateOffer.PAID,
+      certificate_price: 100,
+      discounted_price: 80,
+      discount: '-20 €',
+    },
+  },
+};
+
+export const credentialProduct: Story = {
+  args: {
+    context: richieContext,
+    course: {
+      ...courseGlimpseCourse,
+      title: 'Credential Product',
+      icon: null,
+      offer: CourseOffer.PAID,
+      price: 100,
+      certificate_offer: null,
+      certificate_price: null,
+      discounted_price: null,
+      discount: null,
+    },
+  },
+};
+
+export const credentialProductDiscount: Story = {
+  args: {
+    context: richieContext,
+    course: {
+      ...courseGlimpseCourse,
+      title: 'Credential Product with Discount',
+      icon: null,
+      offer: CourseOffer.PAID,
+      price: 100,
+      certificate_offer: null,
+      certificate_price: null,
+      discounted_price: 80,
+      discount: '-20 €',
+    },
   },
 };

package/js/components/CourseGlimpse/index.tsx

@@ -47,6 +47,10 @@ export interface CourseGlimpseCourse {
   certificate_price: Nullable<number>;
   price: Nullable<number>;
   price_currency: string;
+  discounted_price: Nullable<number>;
+  discount: Nullable<string>;
+  certificate_discounted_price: Nullable<number>;
+  certificate_discount: Nullable<string>;
 }
 
 export interface CourseGlimpseProps {

package/js/components/CourseGlimpse/utils.ts

@@ -8,21 +8,21 @@ import {
 } from 'types/Course';
 import {
   CourseListItem as JoanieCourse,
-  CourseProductRelationLight,
-  isCourseProductRelation,
+  OfferingLight,
+  isOffering,
   ProductType,
 } from 'types/Joanie';
 import { TeacherDashboardPaths } from 'widgets/Dashboard/utils/teacherDashboardPaths';
 import { CourseGlimpseCourse } from '.';
 
-const getCourseGlimpsePropsFromCourseProductRelation = (
-  courseProductRelation: CourseProductRelationLight,
+const getCourseGlimpsePropsFromOffering = (
+  offering: OfferingLight,
   intl: IntlShape,
   organizationId?: string,
 ): CourseGlimpseCourse => {
   const courseRouteParams = {
-    courseId: courseProductRelation.course.id,
-    courseProductRelationId: courseProductRelation.id,
+    courseId: offering.course.id,
+    offeringId: offering.id,
   };
   const courseRoute = organizationId
     ? generatePath(TeacherDashboardPaths.ORGANIZATION_PRODUCT, {
@@ -31,35 +31,32 @@ const getCourseGlimpsePropsFromCourseProductRelation = (
       })
     : generatePath(TeacherDashboardPaths.COURSE_PRODUCT, courseRouteParams);
   return {
-    id: courseProductRelation.id,
-    code: courseProductRelation.course.code,
-    title: courseProductRelation.product.title,
-    cover_image: courseProductRelation.course.cover
+    id: offering.id,
+    code: offering.course.code,
+    title: offering.product.title,
+    cover_image: offering.course.cover
       ? {
-          src: courseProductRelation.course.cover.src,
+          src: offering.course.cover.src,
         }
       : null,
     organization: {
-      title: courseProductRelation.organizations[0].title,
-      image: courseProductRelation.organizations[0].logo || null,
+      title: offering.organizations[0].title,
+      image: offering.organizations[0].logo || null,
     },
-    product_id: courseProductRelation.product.id,
+    product_id: offering.product.id,
     course_route: courseRoute,
-    state: courseProductRelation.product.state,
+    state: offering.product.state,
     certificate_offer:
-      courseProductRelation.product.type === ProductType.CERTIFICATE
-        ? CourseCertificateOffer.PAID
-        : null,
-    offer: courseProductRelation.product.type === ProductType.CREDENTIAL ? CourseOffer.PAID : null,
+      offering.product.type === ProductType.CERTIFICATE ? CourseCertificateOffer.PAID : null,
+    offer: offering.product.type === ProductType.CREDENTIAL ? CourseOffer.PAID : null,
     certificate_price:
-      courseProductRelation.product.type === ProductType.CERTIFICATE
-        ? courseProductRelation.product.price
-        : null,
-    price:
-      courseProductRelation.product.type === ProductType.CREDENTIAL
-        ? courseProductRelation.product.price
-        : null,
-    price_currency: courseProductRelation.product.price_currency,
+      offering.product.type === ProductType.CERTIFICATE ? offering.product.price : null,
+    price: offering.product.type === ProductType.CREDENTIAL ? offering.product.price : null,
+    price_currency: offering.product.price_currency,
+    discounted_price: offering.product.discounted_price || null,
+    discount: offering.product.discount || null,
+    certificate_discounted_price: offering.product.certificate_discounted_price || null,
+    certificate_discount: offering.product.certificate_discount || null,
   };
 };
 
@@ -84,6 +81,10 @@ const getCourseGlimpsePropsFromRichieCourse = (course: RichieCourse): CourseGlim
   certificate_offer: course.certificate_offer,
   offer: course.offer,
   certificate_price: course.certificate_price,
+  certificate_discounted_price: course.certificate_discounted_price,
+  certificate_discount: course.certificate_discount,
+  discounted_price: course.discounted_price,
+  discount: course.discount,
 });
 
 const getCourseGlimpsePropsFromJoanieCourse = (
@@ -121,16 +122,20 @@ const getCourseGlimpsePropsFromJoanieCourse = (
     certificate_offer: null,
     offer: null,
     certificate_price: null,
+    discounted_price: null,
+    discount: null,
+    certificate_discounted_price: null,
+    certificate_discount: null,
   };
 };
 
 export const getCourseGlimpseProps = (
-  course: RichieCourse | (JoanieCourse | CourseProductRelationLight),
+  course: RichieCourse | (JoanieCourse | OfferingLight),
   intl?: IntlShape,
   organizationId?: string,
 ): CourseGlimpseCourse => {
-  if (isCourseProductRelation(course)) {
-    return getCourseGlimpsePropsFromCourseProductRelation(course, intl!, organizationId);
+  if (isOffering(course)) {
+    return getCourseGlimpsePropsFromOffering(course, intl!, organizationId);
   }
 
   if (isRichieCourse(course)) {

package/js/components/CourseGlimpseList/utils.ts

@@ -1,10 +1,10 @@
 import { IntlShape } from 'react-intl';
-import { CourseProductRelationLight, CourseListItem as JoanieCourse } from 'types/Joanie';
+import { OfferingLight, CourseListItem as JoanieCourse } from 'types/Joanie';
 import { Course as RichieCourse } from 'types/Course';
 import { CourseGlimpseCourse, getCourseGlimpseProps } from 'components/CourseGlimpse';
 
 export const getCourseGlimpseListProps = (
-  courses: RichieCourse[] | (JoanieCourse | CourseProductRelationLight)[],
+  courses: RichieCourse[] | (JoanieCourse | OfferingLight)[],
   intl?: IntlShape,
   organizationId?: string,
 ): CourseGlimpseCourse[] => {

package/js/components/PurchaseButton/index.tsx

@@ -42,7 +42,7 @@ const messages = defineMessages({
 
 interface PurchaseButtonPropsBase {
   product: Joanie.CredentialProduct | Joanie.CertificateProduct;
-  courseProductRelation?: Joanie.CourseProductRelation;
+  offering?: Joanie.Offering;
   isWithdrawable: boolean;
   disabled?: boolean;
   className?: string;
@@ -66,7 +66,7 @@ interface CertificatePurchaseButtonProps extends PurchaseButtonPropsBase {
 const PurchaseButton = ({
   product,
   course,
-  courseProductRelation,
+  offering,
   enrollment,
   isWithdrawable,
   organizations,
@@ -140,7 +140,7 @@ const PurchaseButton = ({
         {...saleTunnelModal}
         product={product}
         organizations={organizations}
-        courseProductRelation={courseProductRelation}
+        offering={offering}
         enrollment={enrollment}
         course={course}
         isWithdrawable={isWithdrawable}

package/js/components/SaleTunnel/GenericSaleTunnel.tsx

@@ -12,7 +12,8 @@ import { SaleTunnelSponsors } from 'components/SaleTunnel/Sponsors/SaleTunnelSpo
 import { SaleTunnelProps } from 'components/SaleTunnel/index';
 import {
   Address,
-  CourseProductRelation,
+  Enrollment,
+  Offering,
   CreditCard,
   Order,
   OrderState,
@@ -33,7 +34,8 @@ export interface SaleTunnelContextType {
   order?: Order;
   product: Product;
   webAnalyticsEventKey: string;
-  relation?: CourseProductRelation;
+  offering?: Offering;
+  enrollment?: Enrollment;
 
   // internal
   step: SaleTunnelStep;
@@ -121,7 +123,8 @@ export const GenericSaleTunnel = (props: GenericSaleTunnelProps) => {
       webAnalyticsEventKey: props.eventKey,
       order,
       product: props.product,
-      relation: props.courseProductRelation,
+      offering: props.offering,
+      enrollment: props.enrollment,
       props,
       billingAddress,
       setBillingAddress,

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

@@ -8,6 +8,7 @@ import useOpenEdxProfile from 'hooks/useOpenEdxProfile';
 import { usePaymentSchedule } from 'hooks/usePaymentSchedule';
 import { Spinner } from 'components/Spinner';
 import WithdrawRightCheckbox from 'components/SaleTunnel/WithdrawRightCheckbox';
+import { ProductType } from 'types/Joanie';
 
 const messages = defineMessages({
   title: {
@@ -54,6 +55,7 @@ const messages = defineMessages({
 });
 
 export const SaleTunnelInformation = () => {
+  const { product } = useSaleTunnelContext();
   return (
     <div className="sale-tunnel__main__column sale-tunnel__information">
       <div>
@@ -70,7 +72,7 @@ export const SaleTunnelInformation = () => {
         </div>
       </div>
       <div>
-        <PaymentScheduleBlock />
+        {product.type === ProductType.CREDENTIAL && <PaymentScheduleBlock />}
         <Total />
         <WithdrawRightCheckbox />
       </div>
@@ -99,7 +101,11 @@ const Email = () => {
 };
 
 const Total = () => {
-  const { product, relation } = useSaleTunnelContext();
+  const { product, offering, enrollment } = useSaleTunnelContext();
+  const totalPrice =
+    enrollment?.offerings?.[0]?.rules?.discounted_price ??
+    offering?.rules?.discounted_price ??
+    product.price;
   return (
     <div className="sale-tunnel__total">
       <div className="sale-tunnel__total__amount mt-t" data-testid="sale-tunnel__total__amount">
@@ -107,11 +113,7 @@ const Total = () => {
           <FormattedMessage {...messages.totalLabel} />
         </div>
         <div className="block-title">
-          <FormattedNumber
-            value={relation?.discounted_price || product.price}
-            style="currency"
-            currency={product.price_currency}
-          />
+          <FormattedNumber value={totalPrice} style="currency" currency={product.price_currency} />
         </div>
       </div>
     </div>

package/js/components/SaleTunnel/index.full-process.spec.tsx

@@ -15,7 +15,7 @@ import CourseProductItem from 'widgets/SyllabusCourseRunsList/components/CourseP
 import {
   AddressFactory,
   ContractFactory,
-  CourseProductRelationFactory,
+  OfferingFactory,
   CredentialOrderFactory,
   CreditCardFactory,
   PaymentFactory,
@@ -99,7 +99,7 @@ describe('SaleTunnel', () => {
      */
     const course = PacedCourseFactory().one();
     const product = ProductFactory().one();
-    const relation = CourseProductRelationFactory({
+    const offering = OfferingFactory({
       course,
       product,
       is_withdrawable: false,
@@ -108,7 +108,7 @@ describe('SaleTunnel', () => {
 
     fetchMock.get(
       `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/`,
-      relation,
+      offering,
     );
     fetchMock.get(
       `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-schedule/`,