richie-education 3.1.3-dev3 → 3.1.3-dev30

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

@@ -6,12 +6,11 @@ import {
   PacedCourseFactory,
 } from 'utils/test/factories/richie';
 import {
-  CourseProductRelationFactory,
+  OfferingFactory,
   EnrollmentFactory,
   CredentialOrderFactory,
   ProductFactory,
-  OrderGroupFullFactory,
-  OrderGroupFactory,
+  CredentialProductFactory,
 } from 'utils/test/factories/joanie';
 import {
   CourseRun,
@@ -75,8 +74,8 @@ describe('CourseProductItem', () => {
     }).format(price);
 
   it('should display a loader until product is loaded', async () => {
-    const relation = CourseProductRelationFactory().one();
-    const { product } = relation;
+    const offering = OfferingFactory().one();
+    const { product } = offering;
     const productDeferred = new Deferred();
     fetchMock.get(
       `https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`,
@@ -93,16 +92,16 @@ describe('CourseProductItem', () => {
 
     // - A loader should be displayed while product information are fetching
     await expectSpinner('Loading product information...');
-    productDeferred.resolve(relation);
+    productDeferred.resolve(offering);
     await expectNoSpinner('Loading product information...');
   });
 
   it('renders product information for anonymous user', async () => {
-    const relation = CourseProductRelationFactory().one();
-    const { product } = relation;
+    const offering = OfferingFactory().one();
+    const { product } = offering;
     fetchMock.get(
       `https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`,
-      relation,
+      offering,
     );
 
     render(
@@ -132,7 +131,7 @@ describe('CourseProductItem', () => {
     ).not.toBeInTheDocument();
 
     // - Render all target courses information
-    relation.product.target_courses.forEach((course) => {
+    offering.product.target_courses.forEach((course) => {
       const $item = screen.getByTestId(`course-item-${course.code}`);
       // the course title shouldn't be a heading to prevent misdirection for screen reader users,
       // but we want to it to visually look like a h5
@@ -151,16 +150,142 @@ describe('CourseProductItem', () => {
     expect(screen.queryByTestId('PurchaseButton__cta')).toBeNull();
   });
 
+  it('renders discount rate for anonymous user', async () => {
+    const offering = OfferingFactory({
+      product: CredentialProductFactory({
+        price: 840,
+        price_currency: 'EUR',
+      }).one(),
+      rules: {
+        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 } = offering;
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`,
+      offering,
+    );
+
+    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, offering.rules.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 offering = OfferingFactory({
+      product: CredentialProductFactory({
+        price: 840,
+        price_currency: 'EUR',
+      }).one(),
+      rules: {
+        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 } = offering;
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`,
+      offering,
+    );
+
+    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, offering.rules.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({
+    const offering = OfferingFactory({
       product: ProductFactory({
         certificate_definition: undefined,
       }).one(),
     }).one();
-    const { product } = relation;
+    const { product } = offering;
     fetchMock.get(
       `https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`,
-      relation,
+      offering,
     );
 
     render(
@@ -179,16 +304,16 @@ describe('CourseProductItem', () => {
   });
 
   it('renders product information in compact mode', async () => {
-    const relation = CourseProductRelationFactory().one();
+    const offering = OfferingFactory().one();
     fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/courses/00000/products/${relation.product.id}/`,
-      relation,
+      `https://joanie.endpoint/api/v1.0/courses/00000/products/${offering.product.id}/`,
+      offering,
     );
 
     const { container } = render(
       <CourseProductItem
         course={PacedCourseFactory({ code: '00000' }).one()}
-        productId={relation.product.id}
+        productId={offering.product.id}
         compact
       />,
       { queryOptions: { client: createTestQueryClient({ user: null }) } },
@@ -196,14 +321,14 @@ describe('CourseProductItem', () => {
 
     // In the header, we should display the product title, the product price
     // and product date range and languages
-    await screen.findByRole('heading', { level: 3, name: relation.product.title });
+    await screen.findByRole('heading', { level: 3, name: offering.product.title });
     // the price shouldn't be a heading to prevent misdirection for screen reader users,
     // but we want to it to visually look like a h6
 
     const $price = screen.getByText(
       // the price formatter generates non-breaking spaces and getByText doesn't seem to handle that well, replace it
       // with a regular space. We replace NNBSP (\u202F) and NBSP (\u00a0) with a regular space
-      priceFormatter(relation.product.price_currency, relation.product.price).replace(
+      priceFormatter(offering.product.price_currency, offering.product.price).replace(
         /(\u202F|\u00a0)/g,
         ' ',
       ),
@@ -219,7 +344,7 @@ describe('CourseProductItem', () => {
     expect($productWidgetContent).not.toBeInTheDocument();
 
     // - Any target courses information should be displayed
-    relation.product.target_courses.forEach((course) => {
+    offering.product.target_courses.forEach((course) => {
       const $item = screen.queryByTestId(`course-item-${course.code}`);
       expect($item).not.toBeInTheDocument();
     });
@@ -228,7 +353,7 @@ describe('CourseProductItem', () => {
     expect(screen.queryByTestId('CertificateItem')).not.toBeInTheDocument();
 
     // - Render a login button
-    screen.getByRole('button', { name: `Login to purchase "${relation.product.title}"` });
+    screen.getByRole('button', { name: `Login to purchase "${offering.product.title}"` });
     // - Does not render PurchaseButton cta
     expect(screen.queryByTestId('PurchaseButton__cta')).not.toBeInTheDocument();
   });
@@ -236,8 +361,8 @@ describe('CourseProductItem', () => {
   it.each([OrderState.PENDING, OrderState.NO_PAYMENT])(
     'renders product informations for %s order',
     async (state) => {
-      const relation = CourseProductRelationFactory().one();
-      const { product } = relation;
+      const offering = OfferingFactory().one();
+      const { product } = offering;
       const order = CredentialOrderFactory({
         product_id: product.id,
         course: PacedCourseFactory({ code: '00000' }).one(),
@@ -247,7 +372,7 @@ describe('CourseProductItem', () => {
 
       fetchMock.get(
         `https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`,
-        relation,
+        offering,
       );
       const orderQueryParameters = {
         course_code: order.course.code,
@@ -261,13 +386,13 @@ describe('CourseProductItem', () => {
       render(
         <CourseProductItem
           course={PacedCourseFactory({ code: '00000' }).one()}
-          productId={relation.product.id}
+          productId={offering.product.id}
         />,
       );
 
       // In the header, we should display the product title, the product price
       // and product date range and languages
-      await screen.findByRole('heading', { level: 3, name: relation.product.title });
+      await screen.findByRole('heading', { level: 3, name: offering.product.title });
       // the price shouldn't be a heading to prevent misdirection for screen reader users,
       // but we want to it to visually look like a h6
 
@@ -297,8 +422,8 @@ describe('CourseProductItem', () => {
   it.each([OrderState.PENDING, OrderState.NO_PAYMENT])(
     'renders product informations for %s order in compact mode',
     async (state) => {
-      const relation = CourseProductRelationFactory().one();
-      const { product } = relation;
+      const offering = OfferingFactory().one();
+      const { product } = offering;
       const order = CredentialOrderFactory({
         product_id: product.id,
         course: PacedCourseFactory({ code: '00000' }).one(),
@@ -308,7 +433,7 @@ describe('CourseProductItem', () => {
 
       fetchMock.get(
         `https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`,
-        relation,
+        offering,
       );
       const orderQueryParameters = {
         course_code: order.course.code,
@@ -322,14 +447,14 @@ describe('CourseProductItem', () => {
       render(
         <CourseProductItem
           course={PacedCourseFactory({ code: '00000' }).one()}
-          productId={relation.product.id}
+          productId={offering.product.id}
           compact
         />,
       );
 
       // In the header, we should display the product title, the product price
       // and product date range and languages
-      await screen.findByRole('heading', { level: 3, name: relation.product.title });
+      await screen.findByRole('heading', { level: 3, name: offering.product.title });
       // the price shouldn't be a heading to prevent misdirection for screen reader users,
       // but we want to it to visually look like a h6
 
@@ -339,7 +464,7 @@ describe('CourseProductItem', () => {
       expect($enrolledInfo.classList.contains('h6')).toBe(true);
 
       // - Any target courses information should be displayed
-      relation.product.target_courses.forEach((course) => {
+      offering.product.target_courses.forEach((course) => {
         const $item = screen.queryByTestId(`course-item-${course.code}`);
         expect($item).not.toBeInTheDocument();
       });
@@ -350,8 +475,8 @@ describe('CourseProductItem', () => {
   );
 
   it.each(ENROLLABLE_ORDER_STATES)('renders product information for a %s order', async (state) => {
-    const relation = CourseProductRelationFactory().one();
-    const { product } = relation;
+    const offering = OfferingFactory().one();
+    const { product } = offering;
     const order = CredentialOrderFactory({
       product_id: product.id,
       course: PacedCourseFactory({ code: '00000' }).one(),
@@ -361,7 +486,7 @@ describe('CourseProductItem', () => {
 
     fetchMock.get(
       `https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`,
-      relation,
+      offering,
     );
     const orderQueryParameters = {
       course_code: order.course.code,
@@ -412,17 +537,17 @@ describe('CourseProductItem', () => {
   it.each(ENROLLABLE_ORDER_STATES)(
     'renders product informations for a %s order in compact mode',
     async (state) => {
-      const relation = CourseProductRelationFactory().one();
+      const offering = OfferingFactory().one();
       const order: CredentialOrder = CredentialOrderFactory({
-        product_id: relation.product.id,
+        product_id: offering.product.id,
         course: PacedCourseFactory({ code: '00000' }).one(),
-        target_courses: relation.product.target_courses,
+        target_courses: offering.product.target_courses,
         state,
       }).one();
 
       fetchMock.get(
-        `https://joanie.endpoint/api/v1.0/courses/00000/products/${relation.product.id}/`,
-        relation,
+        `https://joanie.endpoint/api/v1.0/courses/00000/products/${offering.product.id}/`,
+        offering,
       );
       const orderQueryParameters = {
         product_id: order.product_id,
@@ -436,14 +561,14 @@ describe('CourseProductItem', () => {
 
       render(
         <CourseProductItem
-          productId={relation.product.id}
+          productId={offering.product.id}
           course={PacedCourseFactory({ code: '00000' }).one()}
           compact
         />,
       );
 
       // Wait for product information to be fetched
-      await screen.findByRole('heading', { level: 3, name: relation.product.title });
+      await screen.findByRole('heading', { level: 3, name: offering.product.title });
 
       // - In place of product price, a label should be displayed
       const $enrolledInfo = await screen.findByText('Purchased');
@@ -480,8 +605,8 @@ describe('CourseProductItem', () => {
   );
 
   it('renders enrollment information when user is enrolled to a course run', async () => {
-    const relation = CourseProductRelationFactory().one();
-    const { product } = relation;
+    const offering = OfferingFactory().one();
+    const { product } = offering;
     // - Create an order with an active enrollment
     const enrollment: Enrollment = EnrollmentFactory({
       course_run: product.target_courses[0]!.course_runs[0]! as CourseRun,
@@ -495,7 +620,7 @@ describe('CourseProductItem', () => {
 
     fetchMock.get(
       `https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`,
-      relation,
+      offering,
     );
     const orderQueryParameters = {
       product_id: order.product_id,
@@ -547,8 +672,8 @@ describe('CourseProductItem', () => {
   it.each(PURCHASABLE_ORDER_STATES)(
     'renders sale tunnel button if user already has a %s order',
     async (state) => {
-      const relation = CourseProductRelationFactory().one();
-      const { product } = relation;
+      const offering = OfferingFactory().one();
+      const { product } = offering;
       const order = CredentialOrderFactory({
         product_id: product.id,
         course: PacedCourseFactory({ code: '00000' }).one(),
@@ -557,7 +682,7 @@ describe('CourseProductItem', () => {
       }).one();
       fetchMock.get(
         `https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`,
-        relation,
+        offering,
       );
       const orderQueryParameters = {
         product_id: order.product_id,
@@ -588,7 +713,7 @@ describe('CourseProductItem', () => {
       expect($price.classList.contains('h6')).toBe(true);
 
       // - Render all target courses information
-      relation.product.target_courses.forEach((course) => {
+      offering.product.target_courses.forEach((course) => {
         const $item = screen.getByTestId(`course-item-${course.code}`);
         // the course title shouldn't be a heading to prevent misdirection for screen reader users,
         // but we want to it to visually look like a h5
@@ -603,11 +728,11 @@ describe('CourseProductItem', () => {
   );
 
   it('renders sale tunnel button if user already has a canceled order', async () => {
-    const relation = CourseProductRelationFactory().one();
-    const { product } = relation;
+    const offering = OfferingFactory().one();
+    const { product } = offering;
     fetchMock.get(
       `https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`,
-      relation,
+      offering,
     );
     const orderQueryParameters = {
       product_id: product.id,
@@ -638,7 +763,7 @@ describe('CourseProductItem', () => {
     expect($price.classList.contains('h6')).toBe(true);
 
     // - Render all target courses information
-    relation.product.target_courses.forEach((course) => {
+    offering.product.target_courses.forEach((course) => {
       const $item = screen.getByTestId(`course-item-${course.code}`);
       // the course title shouldn't be a heading to prevent misdirection for screen reader users,
       // but we want to it to visually look like a h5
@@ -652,7 +777,7 @@ describe('CourseProductItem', () => {
   });
 
   it('renders error message when product fetching has failed', async () => {
-    const { product } = CourseProductRelationFactory().one();
+    const { product } = OfferingFactory().one();
 
     fetchMock.get(
       `https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`,
@@ -673,10 +798,13 @@ describe('CourseProductItem', () => {
   });
 
   it('renders a warning message that tells that no seats are left', async () => {
-    const relation = CourseProductRelationFactory({
-      order_groups: [OrderGroupFullFactory().one()],
+    const offering = OfferingFactory({
+      rules: {
+        nb_available_seats: 0,
+        has_seats_left: false,
+      },
     }).one();
-    const { product } = relation;
+    const { product } = offering;
     const order = CredentialOrderFactory({
       product_id: product.id,
       course: PacedCourseFactory({ code: '00000' }).one(),
@@ -685,7 +813,7 @@ describe('CourseProductItem', () => {
     }).one();
     fetchMock.get(
       `https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`,
-      relation,
+      offering,
     );
     const orderQueryParameters = {
       product_id: order.product_id,
@@ -710,86 +838,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

@@ -3,7 +3,7 @@ import { QueryClientProvider } from '@tanstack/react-query';
 import fetchMock from 'fetch-mock';
 import { StorybookHelper } from 'utils/StorybookHelper';
 import {
-  CourseProductRelationFactory,
+  OfferingFactory,
   CourseRunFactory,
   CredentialOrderFactory,
   CredentialProductFactory,
@@ -22,7 +22,16 @@ 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(),
+    OfferingFactory({
+      product: CredentialProductFactory({
+        price: 840,
+        price_currency: 'EUR',
+      }).one(),
+      rules: {
+        discounted_price: 800,
+        discount_rate: 0.3,
+      },
+    }).one(),
     { overwriteRoutes: true },
   );
   fetchMock.get(