🐛(frontend) discounted price in sales tunnel for certificate product

When we open the sales tunnel to purchase a certificate product
in a course that we are enrolled, when a discount is present
for the product offer, we would not see the discounted price.
With the latest developments on OfferingRules, we can now access
that price. When it comes to credentials, it works as usual,
and when there is no discount, the initial product price is shown.

Fix #2645

Author: jonathanreveille

CHANGELOG.md

@@ -29,6 +29,8 @@ Versioning](https://semver.org/spec/v2.0.0.html).
 ### Fixed
 
 - Prevent indexation failure when any thumbnail generation fails
+- Display discounted price for the purchase of a certificate product
+  from student dashboard in sale tunnel informations
 
 ## [3.1.2] - 2025-05-22
 

src/frontend/.storybook/__mocks__/utils/context.ts

@@ -13,3 +13,7 @@ let context = {
 (window as any).__richie_frontend_context__ = {
   context: RichieContextFactory(context).one(),
 };
+
+(window as any).jest = {
+    fn: ((fnc: any) => fnc) as any,
+};

src/frontend/js/components/SaleTunnel/GenericSaleTunnel.tsx

@@ -10,7 +10,15 @@ import {
 } from 'react';
 import { SaleTunnelSponsors } from 'components/SaleTunnel/Sponsors/SaleTunnelSponsors';
 import { SaleTunnelProps } from 'components/SaleTunnel/index';
-import { Address, Offering, CreditCard, Order, OrderState, Product } from 'types/Joanie';
+import {
+  Address,
+  Enrollment,
+  Offering,
+  CreditCard,
+  Order,
+  OrderState,
+  Product,
+} from 'types/Joanie';
 import useProductOrder from 'hooks/useProductOrder';
 import { SaleTunnelSuccess } from 'components/SaleTunnel/SaleTunnelSuccess';
 import WebAnalyticsAPIHandler from 'api/web-analytics';
@@ -27,6 +35,7 @@ export interface SaleTunnelContextType {
   product: Product;
   webAnalyticsEventKey: string;
   offering?: Offering;
+  enrollment?: Enrollment;
 
   // internal
   step: SaleTunnelStep;
@@ -115,6 +124,7 @@ export const GenericSaleTunnel = (props: GenericSaleTunnelProps) => {
       order,
       product: props.product,
       offering: props.offering,
+      enrollment: props.enrollment,
       props,
       billingAddress,
       setBillingAddress,

src/frontend/js/components/SaleTunnel/SaleTunnelInformation/index.tsx

@@ -101,19 +101,19 @@ const Email = () => {
 };
 
 const Total = () => {
-  const { product, offering } = 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">
         <div className="block-title">
           <FormattedMessage {...messages.totalLabel} />
         </div>
         <div className="block-title">
-          <FormattedNumber
-            value={offering?.rules.discounted_price || product.price}
-            style="currency"
-            currency={product.price_currency}
-          />
+          <FormattedNumber value={totalPrice} style="currency" currency={product.price_currency} />
         </div>
       </div>
     </div>

src/frontend/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';
@@ -16,12 +17,14 @@ import {
   CertificateOrderFactory,
   CertificateProductFactory,
   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)}
@@ -449,6 +452,57 @@ 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);

src/frontend/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(),
+  },
+};