richie-education 3.1.3-dev23 → 3.1.3-dev24

package/.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,
+};

package/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,

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

@@ -101,7 +101,11 @@ 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">
@@ -109,11 +113,7 @@ const Total = () => {
           <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>

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';
@@ -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);

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "3.1.3-dev23",
+  "version": "3.1.3-dev24",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {