richie-education 3.1.3-dev23 → 3.1.3-dev27

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

@@ -61,6 +61,8 @@ describe('widgets/Search/components/CourseGlimpse', () => {
     price_currency: 'EUR',
     discounted_price: null,
     discount: null,
+    certificate_discounted_price: null,
+    certificate_discount: null,
   };
 
   const contextProps: CommonDataProps['context'] = RichieContextFactory().one();
@@ -170,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

@@ -49,6 +49,8 @@ export interface CourseGlimpseCourse {
   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

@@ -55,6 +55,8 @@ const getCourseGlimpsePropsFromOffering = (
     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,
   };
 };
 
@@ -79,6 +81,8 @@ 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,
 });
@@ -120,6 +124,8 @@ const getCourseGlimpsePropsFromJoanieCourse = (
     certificate_price: null,
     discounted_price: null,
     discount: null,
+    certificate_discounted_price: null,
+    certificate_discount: null,
   };
 };
 

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/js/types/Course.ts

@@ -49,6 +49,8 @@ export interface Course extends Resource {
   price_currency: string;
   discounted_price: Nullable<number>;
   discount: Nullable<string>;
+  certificate_discounted_price: Nullable<number>;
+  certificate_discount: Nullable<string>;
 }
 
 export function isRichieCourse(course: Course | JoanieCourse): course is Course {

package/js/types/Joanie.ts

@@ -151,6 +151,8 @@ export interface Product {
   contract_definition?: ContractDefinition;
   discounted_price: Nullable<number>;
   discount: Nullable<string>;
+  certificate_discounted_price: Nullable<number>;
+  certificate_discount: Nullable<string>;
 }
 
 export interface CredentialProduct extends Product {

package/js/types/index.ts

@@ -42,6 +42,8 @@ export interface CourseRun {
   certificate_offer?: string;
   discounted_price: Nullable<number>;
   discount: Nullable<string>;
+  certificate_discounted_price: Nullable<number>;
+  certificate_discount: Nullable<string>;
 }
 
 export enum Priority {

package/js/utils/test/factories/joanie.ts

@@ -207,6 +207,8 @@ export const CredentialProductFactory = factory((): CredentialProduct => {
     instructions: null,
     discounted_price: null,
     discount: null,
+    certificate_discounted_price: null,
+    certificate_discount: null,
   };
 });
 

package/js/utils/test/factories/richie.ts

@@ -85,6 +85,8 @@ export const CourseRunFactory = factory<CourseRun>(() => {
     certificate_offer: certificateOffer,
     discounted_price: null,
     discount: null,
+    certificate_discounted_price: null,
+    certificate_discount: null,
   };
 });
 
@@ -248,5 +250,7 @@ export const CourseLightFactory = factory<Course>(() => {
     price_currency: 'EUR',
     discounted_price: null,
     discount: null,
+    certificate_discounted_price: null,
+    certificate_discount: null,
   };
 });

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

@@ -0,0 +1,81 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { CourseRunFactory, PacedCourseFactory } from 'utils/test/factories/richie';
+import { StorybookHelper } from 'utils/StorybookHelper';
+import { CourseCertificateOffer, CourseOffer } from '../../../../types/Course';
+import { SyllabusCourseRun } from '.';
+
+export default {
+  component: SyllabusCourseRun,
+  render: (args) => {
+    return StorybookHelper.wrapInApp(<SyllabusCourseRun {...args} />);
+  },
+} as Meta<typeof SyllabusCourseRun>;
+
+type Story = StoryObj<typeof SyllabusCourseRun>;
+
+const courseRun = CourseRunFactory().one();
+
+export const certificateSyllabusCourseRun: Story = {
+  args: {
+    courseRun: {
+      ...courseRun,
+      title: 'Certificate Product',
+      price_currency: 'EUR',
+      offer: CourseOffer.FREE,
+      certificate_offer: CourseCertificateOffer.PAID,
+      certificate_price: 100,
+      discounted_price: null,
+      discount: null,
+    },
+    course: PacedCourseFactory().one(),
+    showLanguages: true,
+  },
+};
+export const certificateDiscountSyllabusCourseRun: Story = {
+  args: {
+    courseRun: {
+      ...courseRun,
+      title: 'Certificate Product',
+      price_currency: 'EUR',
+      offer: CourseOffer.FREE,
+      certificate_offer: CourseCertificateOffer.PAID,
+      certificate_price: 100,
+      certificate_discounted_price: 80,
+      certificate_discount: '-20 €',
+    },
+    course: PacedCourseFactory().one(),
+    showLanguages: true,
+  },
+};
+export const credentialSyllabusCourseRun: Story = {
+  args: {
+    courseRun: {
+      ...courseRun,
+      title: 'Certificate Product',
+      price_currency: 'EUR',
+      offer: CourseOffer.PAID,
+      price: 100,
+      certificate_offer: CourseCertificateOffer.FREE,
+      discounted_price: null,
+      discount: null,
+    },
+    course: PacedCourseFactory().one(),
+    showLanguages: true,
+  },
+};
+export const credentialDiscountSyllabusCourseRun: Story = {
+  args: {
+    courseRun: {
+      ...courseRun,
+      title: 'Certificate Product',
+      price_currency: 'EUR',
+      offer: CourseOffer.PAID,
+      price: 100,
+      certificate_offer: CourseCertificateOffer.FREE,
+      discounted_price: 80,
+      discount: '-20 €',
+    },
+    course: PacedCourseFactory().one(),
+    showLanguages: true,
+  },
+};

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

@@ -128,6 +128,13 @@ const OpenedCourseRun = ({
         currency: courseRun.price_currency,
       });
     }
+
+    if ((courseRun.discounted_price ?? -1) >= 0) {
+      enrollmentPrice = intl.formatNumber(courseRun.discounted_price!, {
+        style: 'currency',
+        currency: courseRun.price_currency,
+      });
+    }
   }
 
   if (courseRun.certificate_offer) {
@@ -144,6 +151,13 @@ const OpenedCourseRun = ({
         currency: courseRun.price_currency,
       });
     }
+
+    if ((courseRun.certificate_discounted_price ?? -1) >= 0) {
+      certificatePrice = intl.formatNumber(courseRun.certificate_discounted_price!, {
+        style: 'currency',
+        currency: courseRun.price_currency,
+      });
+    }
   }
 
   return (

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

@@ -119,6 +119,13 @@ const OpenedSelfPacedCourseRun = ({
         currency: courseRun.price_currency,
       });
     }
+
+    if ((courseRun.discounted_price ?? -1) >= 0) {
+      enrollmentPrice = intl.formatNumber(courseRun.discounted_price!, {
+        style: 'currency',
+        currency: courseRun.price_currency,
+      });
+    }
   }
 
   if (courseRun.certificate_offer) {
@@ -135,6 +142,13 @@ const OpenedSelfPacedCourseRun = ({
         currency: courseRun.price_currency,
       });
     }
+
+    if ((courseRun.certificate_discounted_price ?? -1) >= 0) {
+      certificatePrice = intl.formatNumber(courseRun.certificate_discounted_price!, {
+        style: 'currency',
+        currency: courseRun.price_currency,
+      });
+    }
   }
 
   return (

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

@@ -1465,4 +1465,50 @@ describe('<SyllabusCourseRunsList/>', () => {
     expect(content).not.toContain('The certification process is');
     expect(content).not.toContain('<br>€59.99');
   });
+
+  it('renders price discount on SyllabusCourseRun', async () => {
+    const course = PacedCourseFactory().one();
+    const courseRun: CourseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
+      languages: ['en'],
+      price_currency: 'EUR',
+      offer: 'paid',
+      price: 49.99,
+      certificate_offer: undefined,
+      certificate_price: undefined,
+      discounted_price: 30.0,
+      discount: '-20%',
+    }).one();
+
+    render(
+      <div className="course-detail__row course-detail__runs course-detail__runs--open">
+        <SyllabusCourseRunCompacted courseRun={courseRun} course={course} showLanguages={false} />
+      </div>,
+    );
+
+    const content = getHeaderContainer().innerHTML;
+    expect(content).toContain('<dd>Paid access<br>€30.00</dd>');
+  });
+
+  it('renders certificate discount on SyllabusCourseRun', async () => {
+    const course = PacedCourseFactory().one();
+    const courseRun: CourseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
+      languages: ['en'],
+      price_currency: 'EUR',
+      offer: 'free',
+      price: undefined,
+      certificate_offer: 'paid',
+      certificate_price: 100.0,
+      certificate_discounted_price: 70.0,
+      certificate_discount: '-30%',
+    }).one();
+
+    render(
+      <div className="course-detail__row course-detail__runs course-detail__runs--open">
+        <SyllabusCourseRunCompacted courseRun={courseRun} course={course} showLanguages={false} />
+      </div>,
+    );
+
+    const content = getHeaderContainer().innerHTML;
+    expect(content).toContain('<dd>Paid certificate<br>€70.00</dd>');
+  });
 });

package/package.json

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

package/scss/objects/_course_glimpses.scss

@@ -396,6 +396,11 @@ $course-glimpse-content-padding-sides: 0.7rem !default;
       }
     }
 
+    .offer_prices {
+      display: flex;
+      flex-direction: column;
+    }
+
     .offer__price {
       $visibility: r-theme-val(course-glimpse, offer-price-visibility);
       @if $visibility == hidden {
@@ -404,6 +409,16 @@ $course-glimpse-content-padding-sides: 0.7rem !default;
       visibility: $visibility;
       // Align vertically the price with the icon
       margin-top: calc(1ex - 1cap);
+
+      &--striked,
+      &--discounted {
+        display: inline-block;
+      }
+
+      &--striked {
+        text-decoration: line-through;
+        opacity: 0.5;
+      }
     }
   }
 }