richie-education 3.1.3-dev8 → 3.2.1-dev1

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 } from 'types/Joanie';
+import { Offering, CredentialProduct } from 'types/Joanie';
 import { PacedCourse } from 'types';
 
 const messages = defineMessages({
@@ -24,20 +24,16 @@ other {# remaining seats}
 
 interface CourseProductItemFooterProps {
   course: PacedCourse;
-  courseProductRelation: CourseProductRelation;
+  offering: Offering;
   canPurchase: boolean;
 }
 
 const CourseProductItemFooter = ({
   course,
-  courseProductRelation,
+  offering,
   canPurchase,
 }: CourseProductItemFooterProps) => {
-  // 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)
+  if (!offering?.rules?.has_seats_left)
     return (
       <p className="product-widget__footer__message">
         <FormattedMessage {...messages.noSeatsAvailable} />
@@ -47,18 +43,18 @@ const CourseProductItemFooter = ({
     <div className="product-widget__footer__order-group">
       <PurchaseButton
         course={course}
-        product={courseProductRelation.product as CredentialProduct}
-        courseProductRelation={courseProductRelation}
-        organizations={courseProductRelation.organizations}
-        isWithdrawable={courseProductRelation.is_withdrawable}
+        product={offering.product as CredentialProduct}
+        offering={offering}
+        organizations={offering.organizations}
+        isWithdrawable={offering.is_withdrawable}
         disabled={!canPurchase}
         buttonProps={{ fullWidth: true }}
       />
-      {hasSeatsLimit && (
+      {offering?.rules?.has_seat_limit && (
         <p className="product-widget__footer__message">
           <FormattedMessage
             {...messages.nbSeatsAvailable}
-            values={{ nb: courseProductRelation.nb_seats_available }}
+            values={{ nb: offering.rules.nb_available_seats }}
           />
         </p>
       )}

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

@@ -67,6 +67,12 @@
       }
     }
 
+    & .product-widget__header-main {
+      display: flex;
+      justify-content: center;
+      text-align: center;
+    }
+
     & .product-widget__title {
       color: r-theme-val(product-item, light-color);
       font-size: 1.5rem;
@@ -76,7 +82,7 @@
       background-color: r-theme-val(product-item, light-color);
       border-radius: 100vw;
       color: r-theme-val(product-item, base-border);
-      font-size: 0.81rem;
+      font-size: 1rem;
       margin-bottom: 0.3rem;
       padding: 0.375rem 0.81rem;
       white-space: nowrap;
@@ -90,6 +96,7 @@
 
       &-discount {
         color: r-theme-val(product-item, feedback-color);
+        text-decoration: none;
       }
     }
 

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

@@ -68,7 +68,7 @@ const CourseRunList = ({ courseRuns }: Props) => {
               </strong>
               <span
                 data-testid={`course-run-${courseRun.id}-enrollment-dates`}
-                className="course-runs-item__metadata"
+                className="course-runs-item__metadata course-runs-item__enrollment-date"
               >
                 <EnrollmentDate
                   enrollment_start={courseRun.enrollment_start}
@@ -77,7 +77,7 @@ const CourseRunList = ({ courseRuns }: Props) => {
               </span>
               <span
                 data-testid={`course-run-${courseRun.id}-languages`}
-                className="course-runs-item__metadata"
+                className="course-runs-item__metadata course-runs-item__languages"
               >
                 <FormattedMessage
                   {...sharedMessages.language}

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

@@ -113,6 +113,15 @@
       line-height: 1.4em;
     }
 
+    &__enrollment-date {
+      font-weight: bold;
+      color: #03317f;
+    }
+
+    &__languages {
+      font-weight: bold;
+    }
+
     &__feedback {
       color: r-theme-val(product-item, feedback-color);
     }

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

@@ -6,7 +6,7 @@ import {
   PacedCourseFactory,
 } from 'utils/test/factories/richie';
 import {
-  CourseProductRelationFactory,
+  OfferingFactory,
   EnrollmentFactory,
   CredentialOrderFactory,
   ProductFactory,
@@ -74,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}/`,
@@ -92,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(
@@ -131,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,21 +151,23 @@ describe('CourseProductItem', () => {
   });
 
   it('renders discount rate for anonymous user', async () => {
-    const relation = CourseProductRelationFactory({
+    const offering = OfferingFactory({
       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(),
+      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 } = relation;
+    const { product } = offering;
     fetchMock.get(
       `https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`,
-      relation,
+      offering,
     );
 
     render(
@@ -192,7 +194,7 @@ describe('CourseProductItem', () => {
     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(
+      priceFormatter(product.price_currency, offering.rules!.discounted_price!).replace(
         /(\u202F|\u00a0)/g,
         ' ',
       ),
@@ -212,21 +214,23 @@ describe('CourseProductItem', () => {
   });
 
   it('renders discount amount for anonymous user', async () => {
-    const relation = CourseProductRelationFactory({
+    const offering = OfferingFactory({
       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(),
+      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 } = relation;
+    const { product } = offering;
     fetchMock.get(
       `https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`,
-      relation,
+      offering,
     );
 
     render(
@@ -253,7 +257,7 @@ describe('CourseProductItem', () => {
     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(
+      priceFormatter(product.price_currency, offering.rules!.discounted_price!).replace(
         /(\u202F|\u00a0)/g,
         ' ',
       ),
@@ -273,15 +277,15 @@ describe('CourseProductItem', () => {
   });
 
   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(
@@ -300,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 }) } },
@@ -317,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,
         ' ',
       ),
@@ -340,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();
     });
@@ -349,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();
   });
@@ -357,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(),
@@ -368,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,
@@ -382,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
 
@@ -418,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(),
@@ -429,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,
@@ -443,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
 
@@ -460,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();
       });
@@ -471,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(),
@@ -482,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,
@@ -533,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,
@@ -557,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');
@@ -601,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,
@@ -616,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,
@@ -668,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(),
@@ -678,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,
@@ -709,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
@@ -724,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,
@@ -759,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
@@ -773,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}/`,
@@ -794,11 +798,13 @@ describe('CourseProductItem', () => {
   });
 
   it('renders a warning message that tells that no seats are left', async () => {
-    const relation = CourseProductRelationFactory({
-      seats: 2,
-      nb_seats_available: 0,
+    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(),
@@ -807,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,
@@ -832,4 +838,39 @@ describe('CourseProductItem', () => {
     expect(screen.queryByRole('button', { name: product.call_to_action })).not.toBeInTheDocument();
     screen.getByText('Sorry, no seats available for now');
   });
+
+  it('renders product information without rules in offering', async () => {
+    const offering = OfferingFactory({
+      product: CredentialProductFactory({
+        price: 840,
+        price_currency: 'EUR',
+      }).one(),
+      rules: undefined,
+    }).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 }) } },
+    );
+
+    // Wait for product information to be fetched
+    await screen.findByRole('heading', { level: 3, name: product.title });
+
+    // Expect to render the component without rules information
+    expect(
+      screen.getByText(
+        priceFormatter(product.price_currency, product.price).replace(/(\u202F|\u00a0)/g, ' '),
+      ),
+    ).toBeInTheDocument();
+    expect(document.querySelector('.product-widget__price-discounted')).not.toBeInTheDocument();
+    expect(screen.getByText('Sorry, no seats available for now')).toBeInTheDocument();
+  });
 });

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