richie-education 3.1.3-dev3 → 3.1.3-dev8

package/js/components/PurchaseButton/index.tsx

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

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

@@ -19,9 +19,7 @@ export const CredentialSaleTunnel = (props: CredentialSaleTunnelProps) => {
   );
 };
 
-const CredentialPaymentButton = ({
-  course,
-}: Pick<CredentialSaleTunnelProps, 'course' | 'orderGroup'>) => {
+const CredentialPaymentButton = ({ course }: Pick<CredentialSaleTunnelProps, 'course'>) => {
   return (
     <SubscriptionButton
       buildOrderPayload={(payload) => ({

package/js/components/SaleTunnel/GenericSaleTunnel.tsx

@@ -10,7 +10,14 @@ import {
 } from 'react';
 import { SaleTunnelSponsors } from 'components/SaleTunnel/Sponsors/SaleTunnelSponsors';
 import { SaleTunnelProps } from 'components/SaleTunnel/index';
-import { Address, CreditCard, Order, OrderState, Product } from 'types/Joanie';
+import {
+  Address,
+  CourseProductRelation,
+  CreditCard,
+  Order,
+  OrderState,
+  Product,
+} from 'types/Joanie';
 import useProductOrder from 'hooks/useProductOrder';
 import { SaleTunnelSuccess } from 'components/SaleTunnel/SaleTunnelSuccess';
 import WebAnalyticsAPIHandler from 'api/web-analytics';
@@ -26,6 +33,7 @@ export interface SaleTunnelContextType {
   order?: Order;
   product: Product;
   webAnalyticsEventKey: string;
+  relation?: CourseProductRelation;
 
   // internal
   step: SaleTunnelStep;
@@ -113,6 +121,7 @@ export const GenericSaleTunnel = (props: GenericSaleTunnelProps) => {
       webAnalyticsEventKey: props.eventKey,
       order,
       product: props.product,
+      relation: props.courseProductRelation,
       props,
       billingAddress,
       setBillingAddress,

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

@@ -99,7 +99,7 @@ const Email = () => {
 };
 
 const Total = () => {
-  const { product } = useSaleTunnelContext();
+  const { product, relation } = useSaleTunnelContext();
   return (
     <div className="sale-tunnel__total">
       <div className="sale-tunnel__total__amount mt-t" data-testid="sale-tunnel__total__amount">
@@ -108,7 +108,7 @@ const Total = () => {
         </div>
         <div className="block-title">
           <FormattedNumber
-            value={product.price}
+            value={relation?.discounted_price || product.price}
             style="currency"
             currency={product.price_currency}
           />

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

@@ -72,7 +72,7 @@ interface Props {
   buildOrderPayload: (
     payload: Pick<
       OrderCreationPayload,
-      'product_id' | 'billing_address' | 'order_group_id' | 'has_waived_withdrawal_right'
+      'product_id' | 'billing_address' | 'has_waived_withdrawal_right'
     >,
   ) => OrderCreationPayload;
 }
@@ -124,7 +124,6 @@ const SubscriptionButton = ({ buildOrderPayload }: Props) => {
     const payload = buildOrderPayload({
       product_id: product.id,
       billing_address: billingAddress!,
-      order_group_id: saleTunnelProps.orderGroup?.id,
       has_waived_withdrawal_right: hasWaivedWithdrawalRight,
     });
 

package/js/components/SaleTunnel/index.credential.spec.tsx

@@ -1,5 +1,5 @@
 import fetchMock from 'fetch-mock';
-import { act, fireEvent, screen, waitFor } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import queryString from 'query-string';
 import {
   RichieContextFactory as mockRichieContextFactory,
@@ -11,11 +11,9 @@ import {
   AddressFactory,
   CredentialOrderFactory,
   CredentialProductFactory,
-  OrderGroupFactory,
 } from 'utils/test/factories/joanie';
 import type * as Joanie from 'types/Joanie';
-import { Maybe } from 'types/utils';
-import { NOT_CANCELED_ORDER_STATES, OrderCredentialCreationPayload } from 'types/Joanie';
+import { NOT_CANCELED_ORDER_STATES } from 'types/Joanie';
 import { SaleTunnel, SaleTunnelProps } from 'components/SaleTunnel/index';
 import { render } from 'utils/test/render';
 import { getAddressLabel } from 'components/SaleTunnel/AddressSelector';
@@ -83,11 +81,9 @@ describe('SaleTunnel / Credential', () => {
   it('should create an order with an order group', async () => {
     const course = PacedCourseFactory().one();
     const product = CredentialProductFactory().one();
-    const orderGroup = OrderGroupFactory().one();
     const billingAddress: Joanie.Address = AddressFactory({ is_main: true }).one();
 
-    let createOrderPayload: Maybe<OrderCredentialCreationPayload>;
-    const order = CredentialOrderFactory({ order_group_id: orderGroup.id }).one();
+    const order = CredentialOrderFactory().one();
     const orderQueryParameters = {
       course_code: course.code,
       product_id: product.id,
@@ -100,15 +96,12 @@ describe('SaleTunnel / Credential', () => {
         `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-schedule/`,
         [],
       )
-      .post('https://joanie.endpoint/api/v1.0/orders/', (_, { body }) => {
-        createOrderPayload = JSON.parse(body as any);
-        return order;
-      })
+      .post('https://joanie.endpoint/api/v1.0/orders/', order)
       .get('https://joanie.endpoint/api/v1.0/addresses/', [billingAddress], {
         overwriteRoutes: true,
       });
 
-    render(<Wrapper product={product} course={course} orderGroup={orderGroup} />, {
+    render(<Wrapper product={product} course={course} />, {
       queryOptions: { client: createTestQueryClient({ user: richieUser }) },
     });
 
@@ -121,12 +114,5 @@ describe('SaleTunnel / Credential', () => {
 
     // - Payment button should not be disabled.
     expect($button.disabled).toBe(false);
-
-    // - User clicks on pay button
-    await act(async () => {
-      fireEvent.click($button);
-    });
-
-    await waitFor(() => expect(createOrderPayload?.order_group_id).toEqual(orderGroup.id));
   });
 });

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

@@ -15,6 +15,7 @@ import {
   AddressFactory,
   CertificateOrderFactory,
   CertificateProductFactory,
+  CourseProductRelationFactory,
   CredentialOrderFactory,
   CredentialProductFactory,
   CreditCardFactory,
@@ -432,6 +433,80 @@ describe.each([
         name: StringHelper.capitalizeFirst(installment.state.replace('_', ' '))!,
       });
     });
+
+    const $totalAmount = screen.getByTestId('sale-tunnel__total__amount');
+    expect($totalAmount).toHaveTextContent(
+      'Total' + formatPrice(product.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);
+
+    const relation = CourseProductRelationFactory({
+      product: ProductFactory({
+        price: 840,
+        price_currency: 'EUR',
+      }).one(),
+      discounted_price: 800,
+      discount_rate: 0.3,
+    }).one();
+    const { product } = relation;
+
+    fetchMock
+      .get(
+        `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(getFetchOrderQueryParams(product))}`,
+        [],
+      )
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-schedule/`,
+        schedule,
+      );
+
+    render(<Wrapper product={product} courseProductRelation={relation} isWithdrawable={true} />, {
+      queryOptions: { client: createTestQueryClient({ user: richieUser }) },
+    });
+
+    await screen.findByRole('heading', {
+      level: 4,
+      name: 'Payment schedule',
+    });
+
+    const scheduleTable = screen.getByRole('table');
+    const scheduleTableRows = within(scheduleTable).getAllByRole('row');
+    expect(scheduleTableRows).toHaveLength(schedule.length);
+
+    scheduleTableRows.forEach((row, index) => {
+      const installment = schedule[index];
+      // A first column should show the installment index
+      within(row).getByRole('cell', {
+        name: (index + 1).toString(),
+      });
+      // A 2nd column should show the installment amount
+      within(row).getByRole('cell', {
+        name: formatPrice(installment.amount, installment.currency),
+      });
+      // A 3rd column should show the installment withdraw date
+      within(row).getByRole('cell', {
+        name: `Withdrawn on ${intl.formatDate(installment.due_date, {
+          ...DEFAULT_DATE_FORMAT,
+        })}`,
+      });
+      // A 4th column should show the installment state
+      within(row).getByRole('cell', {
+        name: StringHelper.capitalizeFirst(installment.state.replace('_', ' '))!,
+      });
+    });
+
+    const $totalAmount = screen.getByTestId('sale-tunnel__total__amount');
+    expect($totalAmount).toHaveTextContent(
+      'Total' +
+        formatPrice(relation!.discounted_price!, product.price_currency).replace(
+          /(\u202F|\u00a0)/g,
+          ' ',
+        ),
+    );
   });
 
   it('should show a walkthrough to explain the subscription process', async () => {

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

@@ -15,7 +15,6 @@ export default {
       isWithdrawable: true,
       // enrollment?: Enrollment;
       // product: CredentialProduct | CertificateProduct;
-      // orderGroup?: OrderGroup;
       // onFinish?: (order: Order) => void;
     };
     return (

package/js/components/SaleTunnel/index.tsx

@@ -2,10 +2,10 @@ import { ModalProps } from '@openfun/cunningham-react';
 import {
   CertificateProduct,
   CourseLight,
+  CourseProductRelation,
   CredentialProduct,
   Enrollment,
   Order,
-  OrderGroup,
   Organization,
   Product,
   ProductType,
@@ -16,11 +16,11 @@ import { PacedCourse } from 'types';
 
 export interface SaleTunnelProps extends Pick<ModalProps, 'isOpen' | 'onClose'> {
   product: Product;
+  courseProductRelation?: CourseProductRelation;
   organizations?: Organization[];
   isWithdrawable: boolean;
   course?: PacedCourse | CourseLight;
   enrollment?: Enrollment;
-  orderGroup?: OrderGroup;
   onFinish?: (order: Order) => void;
 }
 

package/js/types/Joanie.ts

@@ -183,8 +183,15 @@ export interface CourseProductRelationLight {
 }
 
 export interface CourseProductRelation extends CourseProductRelationLight {
-  order_groups: OrderGroup[];
   is_withdrawable: boolean;
+  discounted_price: Nullable<number>;
+  discount_rate: Nullable<number>;
+  discount_amount: Nullable<number>;
+  discount_start: Nullable<string>;
+  discount_end: Nullable<string>;
+  description: Nullable<string>;
+  nb_seats_available: Nullable<number>;
+  seats: Nullable<number>;
 }
 export function isCourseProductRelation(
   entity: CourseListItem | CourseProductRelationLight | RichieCourse,
@@ -325,7 +332,6 @@ export interface Order {
   enrollment: Nullable<EnrollmentLight>;
   organization_id: Organization['id'];
   organization: Organization;
-  order_group_id?: OrderGroup['id'];
   payment_schedule?: PaymentSchedule;
   credit_card_id?: CreditCard['id'];
 }
@@ -403,13 +409,6 @@ export interface CourseOrderResourceQuery extends PaginatedResourceQuery {
   product_id?: Product['id'];
 }
 
-export interface OrderGroup {
-  id: string;
-  is_active: boolean;
-  nb_seats: number;
-  nb_available_seats: number;
-}
-
 export enum CreditCardBrand {
   MASTERCARD = 'mastercard',
   MAESTRO = 'maestro',
@@ -481,7 +480,6 @@ export interface AddressCreationPayload extends Omit<Address, 'id' | 'is_main'>
 
 interface AbstractOrderProductCreationPayload {
   product_id: Product['id'];
-  order_group_id?: OrderGroup['id'];
   billing_address: Omit<Address, 'id' | 'is_main'>;
   has_waived_withdrawal_right: boolean;
 }

package/js/utils/ProductHelper/index.ts

@@ -1,5 +1,5 @@
 import { IntlShape } from 'react-intl';
-import { CourseProductRelation, Product, TargetCourse } from 'types/Joanie';
+import { Product, TargetCourse } from 'types/Joanie';
 import { Maybe } from 'types/utils';
 import { IntlHelper } from 'utils/IntlHelper';
 import * as Joanie from 'types/Joanie';
@@ -44,10 +44,6 @@ export class ProductHelper {
     return IntlHelper.getLocalizedLanguages(uniqueLanguages, intl);
   }
 
-  static getActiveOrderGroups(courseProductRelation: CourseProductRelation) {
-    return courseProductRelation.order_groups?.filter((orderGroup) => orderGroup.is_active);
-  }
-
   static hasRemainingSeats(product: Maybe<Product>) {
     if (!product) return false;
     return typeof product?.remaining_order_count !== 'number' || product.remaining_order_count > 0;

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

@@ -28,7 +28,6 @@ import {
   NestedCredentialOrder,
   Order,
   OrderEnrollment,
-  OrderGroup,
   PaymentInstallment,
   OrderLite,
   OrderState,
@@ -197,7 +196,7 @@ export const CredentialProductFactory = factory((): CredentialProduct => {
     created_on: faker.date.past().toISOString(),
     title: FactoryHelper.sequence((counter) => `Certificate Product ${counter}`),
     type: ProductType.CREDENTIAL,
-    price: faker.number.int(),
+    price: faker.number.int({ min: 1, max: 1000, multipleOf: 10 }),
     price_currency: faker.finance.currencyCode(),
     call_to_action: faker.lorem.words(3),
     certificate_definition: CertificationDefinitionFactory().one(),
@@ -294,25 +293,6 @@ export const CourseLightFactory = factory((): CourseLight => {
   };
 });
 
-export const OrderGroupFactory = factory((): OrderGroup => {
-  const seats = faker.number.int({ min: 5, max: 100 });
-  return {
-    id: faker.string.uuid(),
-    is_active: true,
-    nb_seats: seats,
-    nb_available_seats: faker.number.int({ min: 2, max: seats }),
-  };
-});
-
-export const OrderGroupFullFactory = factory((): OrderGroup => {
-  return {
-    id: faker.string.uuid(),
-    is_active: true,
-    nb_seats: faker.number.int({ min: 5, max: 100 }),
-    nb_available_seats: 0,
-  };
-});
-
 export const NestedCourseOrderFactory = factory((): NestedCourseOrder => {
   return {
     id: faker.string.uuid(),
@@ -336,8 +316,15 @@ export const CourseProductRelationFactory = factory((): CourseProductRelation =>
     course: CourseFactory().one(),
     product: ProductFactory().one(),
     organizations: OrganizationFactory().many(1),
-    order_groups: [],
     is_withdrawable: true,
+    discounted_price: null,
+    discount_rate: null,
+    discount_amount: null,
+    discount_start: null,
+    discount_end: null,
+    description: null,
+    seats: null,
+    nb_seats_available: null,
   };
 });
 

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

@@ -1,6 +1,6 @@
 import { FormattedMessage, defineMessages } from 'react-intl';
 import PurchaseButton from 'components/PurchaseButton';
-import { CourseProductRelation, CredentialProduct, OrderGroup } from 'types/Joanie';
+import { CourseProductRelation, CredentialProduct } from 'types/Joanie';
 import { PacedCourse } from 'types';
 
 const messages = defineMessages({
@@ -26,54 +26,43 @@ interface CourseProductItemFooterProps {
   course: PacedCourse;
   courseProductRelation: CourseProductRelation;
   canPurchase: boolean;
-  orderGroups: OrderGroup[];
-  orderGroupsAvailable: OrderGroup[];
 }
 
 const CourseProductItemFooter = ({
   course,
   courseProductRelation,
-  orderGroups,
-  orderGroupsAvailable,
   canPurchase,
 }: CourseProductItemFooterProps) => {
-  if (orderGroups.length === 0) {
-    return (
-      <PurchaseButton
-        course={course}
-        product={courseProductRelation.product as CredentialProduct}
-        organizations={courseProductRelation.organizations}
-        isWithdrawable={courseProductRelation.is_withdrawable}
-        disabled={!canPurchase}
-        buttonProps={{ fullWidth: true }}
-      />
-    );
-  }
-  if (orderGroupsAvailable.length === 0) {
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  const { seats, nb_seats_available } = courseProductRelation;
+  const hasSeatsLimit = seats && nb_seats_available !== undefined;
+  const hasNoSeatsAvailable = hasSeatsLimit && nb_seats_available === 0;
+  if (hasNoSeatsAvailable)
     return (
       <p className="product-widget__footer__message">
         <FormattedMessage {...messages.noSeatsAvailable} />
       </p>
     );
-  }
-  return orderGroupsAvailable.map((orderGroup) => (
-    <div className="product-widget__footer__order-group" key={orderGroup.id}>
+  return (
+    <div className="product-widget__footer__order-group">
       <PurchaseButton
         course={course}
         product={courseProductRelation.product as CredentialProduct}
+        courseProductRelation={courseProductRelation}
         organizations={courseProductRelation.organizations}
         isWithdrawable={courseProductRelation.is_withdrawable}
         disabled={!canPurchase}
-        orderGroup={orderGroup}
         buttonProps={{ fullWidth: true }}
       />
-      <p className="product-widget__footer__message">
-        <FormattedMessage
-          {...messages.nbSeatsAvailable}
-          values={{ nb: orderGroup.nb_available_seats }}
-        />
-      </p>
+      {hasSeatsLimit && (
+        <p className="product-widget__footer__message">
+          <FormattedMessage
+            {...messages.nbSeatsAvailable}
+            values={{ nb: courseProductRelation.nb_seats_available }}
+          />
+        </p>
+      )}
     </div>
-  ));
+  );
 };
 export default CourseProductItemFooter;

package/js/widgets/SyllabusCourseRunsList/components/CourseProductItem/_styles.scss

@@ -43,6 +43,7 @@
     background-color: r-theme-val(product-item, base-border);
     color: r-theme-val(product-item, light-color);
     justify-content: space-between;
+    text-align: center;
     padding: 1rem 0.5rem;
 
     &-main {
@@ -51,6 +52,8 @@
       font-family: $r-font-family-montserrat;
       font-weight: bold;
       justify-content: space-between;
+      text-align: initial;
+      margin-bottom: rem-calc(8px);
     }
 
     &-metadata {
@@ -74,10 +77,30 @@
       border-radius: 100vw;
       color: r-theme-val(product-item, base-border);
       font-size: 0.81rem;
-      margin-bottom: 0;
-      margin-left: rem-calc(8px);
+      margin-bottom: 0.3rem;
       padding: 0.375rem 0.81rem;
       white-space: nowrap;
+      display: inline-block;
+
+      &-discounted {
+        text-decoration: line-through;
+        margin-right: rem-calc(6px);
+        font-size: 0.73rem;
+      }
+
+      &-discount {
+        color: r-theme-val(product-item, feedback-color);
+      }
+    }
+
+    &-description,
+    &-discount {
+      font-size: 1.1rem;
+      margin: 0;
+    }
+
+    &-discount {
+      font-weight: bold;
     }
   }
 
@@ -149,13 +172,10 @@
 
     &__order-group {
       text-align: center;
+      margin-bottom: 0.5rem;
 
       .product-widget__footer__message {
-        margin: 0.5rem 0;
-      }
-
-      &:last-child {
-        margin-bottom: -1rem;
+        margin: 0.5rem 0 0;
       }
     }
   }

package/js/widgets/SyllabusCourseRunsList/components/CourseProductItem/components/CourseProductCourseRuns/CourseRunList.tsx

@@ -38,7 +38,7 @@ const CourseRunList = ({ courseRuns }: Props) => {
       <ol className="course-runs-list">
         {Children.toArray(
           courseRuns.map((courseRun) => (
-            <li className="course-runs-item course-runs-item--inactive">
+            <li key={courseRun.id} className="course-runs-item course-runs-item--inactive">
               <strong className="course-runs-item__course-dates">
                 <span
                   className="offscreen"

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

@@ -10,8 +10,7 @@ import {
   EnrollmentFactory,
   CredentialOrderFactory,
   ProductFactory,
-  OrderGroupFullFactory,
-  OrderGroupFactory,
+  CredentialProductFactory,
 } from 'utils/test/factories/joanie';
 import {
   CourseRun,
@@ -151,6 +150,128 @@ describe('CourseProductItem', () => {
     expect(screen.queryByTestId('PurchaseButton__cta')).toBeNull();
   });
 
+  it('renders discount rate for anonymous user', async () => {
+    const relation = CourseProductRelationFactory({
+      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(),
+    }).one();
+    const { product } = relation;
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`,
+      relation,
+    );
+
+    render(
+      <CourseProductItem
+        course={PacedCourseFactory({ code: '00000' }).one()}
+        productId={product.id}
+      />,
+      { queryOptions: { client: createTestQueryClient({ user: null }) } },
+    );
+
+    await screen.findByRole('heading', { level: 3, name: product.title });
+
+    // - Render discount information
+    // Original price should be displayed as a del element
+    const originalPriceLabel = screen.getByText('Original price:');
+    expect(originalPriceLabel.classList.contains('offscreen')).toBe(true);
+    const originalPrice = screen.getByText(
+      priceFormatter(product.price_currency, product.price).replace(/(\u202F|\u00a0)/g, ' '),
+    );
+    expect(originalPrice.tagName).toBe('DEL');
+    expect(originalPrice.getAttribute('aria-describedby')).toEqual(originalPriceLabel.id);
+
+    // Discounted price should be displayed as an ins element
+    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(
+        /(\u202F|\u00a0)/g,
+        ' ',
+      ),
+    );
+    expect(discountedPrice.tagName).toBe('INS');
+    expect(discountedPrice.getAttribute('aria-describedby')).toEqual(discountedPriceLabel.id);
+
+    // Discount description should be displayed
+    screen.getByText('Year 2023 discount');
+
+    // Discount rate should be displayed
+    screen.getByText('-30%');
+
+    // Discount date range should be displayed
+    screen.getByText('from Jan 01, 2023');
+    screen.getByText('to Dec 31, 2023');
+  });
+
+  it('renders discount amount for anonymous user', async () => {
+    const relation = CourseProductRelationFactory({
+      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(),
+    }).one();
+    const { product } = relation;
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`,
+      relation,
+    );
+
+    render(
+      <CourseProductItem
+        course={PacedCourseFactory({ code: '00000' }).one()}
+        productId={product.id}
+      />,
+      { queryOptions: { client: createTestQueryClient({ user: null }) } },
+    );
+
+    await screen.findByRole('heading', { level: 3, name: product.title });
+
+    // - Render discount information
+    // Original price should be displayed as a del element
+    const originalPriceLabel = screen.getByText('Original price:');
+    expect(originalPriceLabel.classList.contains('offscreen')).toBe(true);
+    const originalPrice = screen.getByText(
+      priceFormatter(product.price_currency, product.price).replace(/(\u202F|\u00a0)/g, ' '),
+    );
+    expect(originalPrice.tagName).toBe('DEL');
+    expect(originalPrice.getAttribute('aria-describedby')).toEqual(originalPriceLabel.id);
+
+    // Discounted price should be displayed as an ins element
+    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(
+        /(\u202F|\u00a0)/g,
+        ' ',
+      ),
+    );
+    expect(discountedPrice.tagName).toBe('INS');
+    expect(discountedPrice.getAttribute('aria-describedby')).toEqual(discountedPriceLabel.id);
+
+    // Discount description should be displayed
+    screen.getByText('Year 2023 discount');
+
+    // Discount rate should be displayed
+    screen.getByText(priceFormatter(product.price_currency, -40).replace(/(\u202F|\u00a0)/g, ' '));
+
+    // Discount date range should be displayed
+    screen.getByText('from Jan 01, 2023');
+    screen.getByText('to Dec 31, 2023');
+  });
+
   it('does not render <CertificateItem /> if product do not have a certificate', async () => {
     const relation = CourseProductRelationFactory({
       product: ProductFactory({
@@ -674,7 +795,8 @@ describe('CourseProductItem', () => {
 
   it('renders a warning message that tells that no seats are left', async () => {
     const relation = CourseProductRelationFactory({
-      order_groups: [OrderGroupFullFactory().one()],
+      seats: 2,
+      nb_seats_available: 0,
     }).one();
     const { product } = relation;
     const order = CredentialOrderFactory({
@@ -710,86 +832,4 @@ describe('CourseProductItem', () => {
     expect(screen.queryByRole('button', { name: product.call_to_action })).not.toBeInTheDocument();
     screen.getByText('Sorry, no seats available for now');
   });
-
-  it('renders one payment button when one of two order groups is full', async () => {
-    const relation = CourseProductRelationFactory({
-      order_groups: [OrderGroupFullFactory().one(), OrderGroupFactory().one()],
-    }).one();
-    const { product } = relation;
-    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,
-    );
-    const orderQueryParameters = {
-      product_id: order.product_id,
-      course_code: order.course?.code,
-      state: NOT_CANCELED_ORDER_STATES,
-    };
-    fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(orderQueryParameters)}`,
-      [order],
-    );
-
-    render(
-      <CourseProductItem
-        productId={product.id}
-        course={PacedCourseFactory({ code: '00000' }).one()}
-      />,
-    );
-
-    // wait for component to be fully loaded
-    await screen.findByRole('heading', { level: 3, name: product.title });
-
-    expect(screen.queryByText('Sorry, no seats available for now')).not.toBeInTheDocument();
-    screen.getByRole('button', { name: product.call_to_action });
-    screen.getByText(relation.order_groups[1].nb_available_seats + ' remaining seats');
-  });
-
-  it('renders mutliple payment button when there are multiple order groups', async () => {
-    const relation = CourseProductRelationFactory({
-      order_groups: [OrderGroupFactory().one(), OrderGroupFactory({ nb_available_seats: 1 }).one()],
-    }).one();
-    const { product } = relation;
-    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,
-    );
-    const orderQueryParameters = {
-      product_id: order.product_id,
-      course_code: order.course?.code,
-      state: NOT_CANCELED_ORDER_STATES,
-    };
-    fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(orderQueryParameters)}`,
-      [order],
-    );
-
-    render(
-      <CourseProductItem
-        productId={product.id}
-        course={PacedCourseFactory({ code: '00000' }).one()}
-      />,
-    );
-
-    // wait for component to be fully loaded
-    await screen.findByRole('heading', { level: 3, name: product.title });
-
-    expect(screen.queryByText('Sorry, no seats available for now')).not.toBeInTheDocument();
-    expect(screen.getAllByTestId('PurchaseButton__cta')).toHaveLength(2);
-    expect(screen.getAllByRole('button', { name: product.call_to_action })).toHaveLength(2);
-    screen.getByText(relation.order_groups[0].nb_available_seats + ' remaining seats');
-    screen.getByText('Last remaining seat!');
-  });
 });

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

@@ -22,7 +22,14 @@ 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({ product: CredentialProductFactory().one() }).one(),
+    CourseProductRelationFactory({
+      product: CredentialProductFactory({
+        price: 840,
+        price_currency: 'EUR',
+      }).one(),
+      discounted_price: 800,
+      discount_rate: 0.3,
+    }).one(),
     { overwriteRoutes: true },
   );
   fetchMock.get(

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 { ProductType, Product, CredentialOrder } from 'types/Joanie';
+import { CourseProductRelation, CredentialOrder, Product, ProductType } from 'types/Joanie';
 import { useCourseProduct } from 'hooks/useCourseProducts';
 import { Spinner } from 'components/Spinner';
 import { Icon, IconTypeEnum } from 'components/Icon';
@@ -38,6 +38,31 @@ const messages = defineMessages({
     description: 'Course run languages',
     id: 'components.CourseProductItem.availableIn',
   },
+  original_price: {
+    defaultMessage: 'Original price:',
+    description: 'Label for the original price of a product',
+    id: 'components.CourseProductItem.original_price',
+  },
+  discounted_price: {
+    defaultMessage: 'Discounted price:',
+    description: 'Label for the discounted price of a product',
+    id: 'components.CourseProductItem.discounted_price',
+  },
+  discount_rate: {
+    defaultMessage: '-{rate}%',
+    description: 'Discount rate information',
+    id: 'components.CourseProductItem.discount_rate',
+  },
+  from: {
+    defaultMessage: 'from {from}',
+    description: 'Discount start date information',
+    id: 'components.CourseProductItem.from',
+  },
+  to: {
+    defaultMessage: 'to {to}',
+    description: 'Discount end date information',
+    id: 'components.CourseProductItem.to',
+  },
 });
 
 export interface CourseProductItemProps {
@@ -52,8 +77,16 @@ type HeaderProps = {
   canPurchase: boolean;
   order: Maybe<CredentialOrder>;
   product: Product;
+  courseProductRelation: CourseProductRelation;
 };
-const Header = ({ product, order, hasPurchased, canPurchase, compact }: HeaderProps) => {
+const Header = ({
+  product,
+  order,
+  courseProductRelation,
+  hasPurchased,
+  canPurchase,
+  compact,
+}: HeaderProps) => {
   const intl = useIntl();
   const formatDate = useDateFormat();
 
@@ -72,21 +105,90 @@ const Header = ({ product, order, hasPurchased, canPurchase, compact }: HeaderPr
     return ProductHelper.getLanguages(product, true, intl);
   }, [canShowMetadata, product, intl]);
 
-  return (
-    <header className="product-widget__header">
-      <div className="product-widget__header-main">
-        <h3 className="product-widget__title">{product.title}</h3>
-        <strong className="product-widget__price h6">
-          {hasPurchased && <FormattedMessage {...messages.purchased} />}
-          {canPurchase && (
+  const displayPrice = useMemo(() => {
+    if (!canPurchase) {
+      return null;
+    }
+
+    if (courseProductRelation.discounted_price) {
+      return (
+        <>
+          <span id="original-price" className="offscreen">
+            <FormattedMessage {...messages.original_price} />
+          </span>
+          <del aria-describedby="original-price" className="product-widget__price-discounted">
             <FormattedNumber
               currency={product.price_currency}
               value={product.price}
               style="currency"
             />
-          )}
-        </strong>
+          </del>
+          <span id="discount-price" className="offscreen">
+            <FormattedMessage {...messages.discounted_price} />
+          </span>
+          <ins aria-describedby="discount-price" className="product-widget__price-discount">
+            <FormattedNumber
+              currency={product.price_currency}
+              value={courseProductRelation.discounted_price}
+              style="currency"
+            />
+          </ins>
+        </>
+      );
+    }
+
+    return (
+      <FormattedNumber currency={product.price_currency} value={product.price} style="currency" />
+    );
+  }, [canPurchase, courseProductRelation.discounted_price, product.price]);
+
+  return (
+    <header className="product-widget__header">
+      <div className="product-widget__header-main">
+        <h3 className="product-widget__title">{product.title}</h3>
       </div>
+      <strong className="product-widget__price h6">
+        {hasPurchased && <FormattedMessage {...messages.purchased} />}
+        {displayPrice}
+      </strong>
+      {courseProductRelation?.description && (
+        <p className="product-widget__header-description">{courseProductRelation.description}</p>
+      )}
+      {courseProductRelation?.discounted_price && (
+        <p className="product-widget__header-discount">
+          {courseProductRelation.discount_rate ? (
+            <span className="product-widget__header-discount-rate">
+              <FormattedNumber value={-courseProductRelation.discount_rate} style="percent" />
+            </span>
+          ) : (
+            <span className="product-widget__header-discount-amount">
+              <FormattedNumber
+                currency={product.price_currency}
+                value={-courseProductRelation.discount_amount!}
+                style="currency"
+              />
+            </span>
+          )}
+          {courseProductRelation.discount_start && (
+            <span className="product-widget__header-discount-date">
+              &nbsp;
+              <FormattedMessage
+                {...messages.from}
+                values={{ from: formatDate(courseProductRelation.discount_start) }}
+              />
+            </span>
+          )}
+          {courseProductRelation.discount_end && (
+            <span className="product-widget__header-discount-date">
+              &nbsp;
+              <FormattedMessage
+                {...messages.to}
+                values={{ to: formatDate(courseProductRelation.discount_end) }}
+              />
+            </span>
+          )}
+        </p>
+      )}
       {canShowMetadata && (
         <>
           <p
@@ -131,7 +233,7 @@ const Content = ({ product, order }: { product: Product; order?: CredentialOrder
     <ol className="product-widget__content">
       {Children.toArray(
         targetCourses.map((target_course) => (
-          <CourseRunItem targetCourse={target_course} order={order} />
+          <CourseRunItem key={target_course.code} targetCourse={target_course} order={order} />
         )),
       )}
       {product.certificate_definition && (
@@ -179,13 +281,6 @@ const CourseProductItem = ({ productId, course, compact = false }: CourseProduct
     return null;
   }
 
-  const orderGroups = courseProductRelation
-    ? ProductHelper.getActiveOrderGroups(courseProductRelation)
-    : [];
-  const orderGroupsAvailable = orderGroups.filter(
-    (orderGroup) => orderGroup.nb_available_seats > 0,
-  );
-
   return (
     <section
       className={c('product-widget', {
@@ -214,6 +309,7 @@ const CourseProductItem = ({ productId, course, compact = false }: CourseProduct
           <Header
             product={product}
             order={order}
+            courseProductRelation={courseProductRelation}
             canPurchase={canPurchase}
             hasPurchased={hasPurchased}
             compact={compact}
@@ -223,8 +319,6 @@ const CourseProductItem = ({ productId, course, compact = false }: CourseProduct
             <CourseProductItemFooter
               course={course}
               courseProductRelation={courseProductRelation}
-              orderGroups={orderGroups}
-              orderGroupsAvailable={orderGroupsAvailable}
               canPurchase={canPurchase}
             />
           </footer>

package/package.json

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