richie-education 3.1.3-dev2 → 3.1.3-dev24

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 { Offering, 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,9 @@ type HeaderProps = {
   canPurchase: boolean;
   order: Maybe<CredentialOrder>;
   product: Product;
+  offering: Offering;
 };
-const Header = ({ product, order, hasPurchased, canPurchase, compact }: HeaderProps) => {
+const Header = ({ product, order, offering, hasPurchased, canPurchase, compact }: HeaderProps) => {
   const intl = useIntl();
   const formatDate = useDateFormat();
 
@@ -72,21 +98,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 (offering.rules.discounted_price != null) {
+      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={offering.rules.discounted_price}
+              style="currency"
+            />
+          </ins>
+        </>
+      );
+    }
+
+    return (
+      <FormattedNumber currency={product.price_currency} value={product.price} style="currency" />
+    );
+  }, [canPurchase, offering.rules.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>
+      {offering?.rules.description && (
+        <p className="product-widget__header-description">{offering.rules.description}</p>
+      )}
+      {offering?.rules.discounted_price && (
+        <p className="product-widget__header-discount">
+          {offering.rules.discount_rate ? (
+            <span className="product-widget__header-discount-rate">
+              <FormattedNumber value={-offering.rules.discount_rate} style="percent" />
+            </span>
+          ) : (
+            <span className="product-widget__header-discount-amount">
+              <FormattedNumber
+                currency={product.price_currency}
+                value={-offering.rules.discount_amount!}
+                style="currency"
+              />
+            </span>
+          )}
+          {offering.rules.discount_start && (
+            <span className="product-widget__header-discount-date">
+              &nbsp;
+              <FormattedMessage
+                {...messages.from}
+                values={{ from: formatDate(offering.rules.discount_start) }}
+              />
+            </span>
+          )}
+          {offering.rules.discount_end && (
+            <span className="product-widget__header-discount-date">
+              &nbsp;
+              <FormattedMessage
+                {...messages.to}
+                values={{ to: formatDate(offering.rules.discount_end) }}
+              />
+            </span>
+          )}
+        </p>
+      )}
       {canShowMetadata && (
         <>
           <p
@@ -131,7 +226,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 && (
@@ -144,12 +239,12 @@ const Content = ({ product, order }: { product: Product; order?: CredentialOrder
 const CourseProductItem = ({ productId, course, compact = false }: CourseProductItemProps) => {
   // FIXME(rlecellier): useCourseProduct need's a filter on product.type that only return
   // CredentialOrder
-  const { item: courseProductRelation, states: productQueryStates } = useCourseProduct({
+  const { item: offering, states: productQueryStates } = useCourseProduct({
     product_id: productId,
     course_id: course.code,
   });
 
-  const product = courseProductRelation?.product;
+  const product = offering?.product;
   const { item: productOrder, states: orderQueryStates } = useProductOrder({
     productId,
     courseCode: course.code,
@@ -179,13 +274,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 +302,7 @@ const CourseProductItem = ({ productId, course, compact = false }: CourseProduct
           <Header
             product={product}
             order={order}
+            offering={offering}
             canPurchase={canPurchase}
             hasPurchased={hasPurchased}
             compact={compact}
@@ -222,9 +311,7 @@ const CourseProductItem = ({ productId, course, compact = false }: CourseProduct
           <footer className="product-widget__footer">
             <CourseProductItemFooter
               course={course}
-              courseProductRelation={courseProductRelation}
-              orderGroups={orderGroups}
-              orderGroupsAvailable={orderGroupsAvailable}
+              offering={offering}
               canPurchase={canPurchase}
             />
           </footer>

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

@@ -22,8 +22,8 @@ import {
 import SyllabusCourseRunsList from 'widgets/SyllabusCourseRunsList/index';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { CourseRun, Priority } from 'types';
-import { CourseProductRelation } from 'types/Joanie';
-import { CourseProductRelationFactory } from 'utils/test/factories/joanie';
+import { Offering } from 'types/Joanie';
+import { OfferingFactory } from 'utils/test/factories/joanie';
 import { DEFAULT_DATE_FORMAT } from 'hooks/useDateFormat';
 import { StringHelper } from 'utils/StringHelper';
 import { computeStates } from 'utils/CourseRuns';
@@ -211,9 +211,9 @@ describe('<SyllabusCourseRunsList/>', () => {
     });
   };
 
-  const expectCourseProduct = async (container: HTMLElement, relation: CourseProductRelation) => {
+  const expectCourseProduct = async (container: HTMLElement, offering: Offering) => {
     const heading = await findByRole(container, 'heading', {
-      name: relation.product.title,
+      name: offering.product.title,
     });
     expect(Array.from(heading.classList)).toContain('product-widget__title');
   };
@@ -383,9 +383,9 @@ describe('<SyllabusCourseRunsList/>', () => {
 
   it('has one opened product', async () => {
     const course = PacedCourseFactory().one();
-    const relation = CourseProductRelationFactory().one();
-    const resourceLink = `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${relation.product.id}/`;
-    fetchMock.get(resourceLink, relation);
+    const offering = OfferingFactory().one();
+    const resourceLink = `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${offering.product.id}/`;
+    fetchMock.get(resourceLink, offering);
 
     const courseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
       resource_link: resourceLink,
@@ -406,7 +406,7 @@ describe('<SyllabusCourseRunsList/>', () => {
     expect(getHeaderContainer().querySelectorAll('.course-detail__run-descriptions').length).toBe(
       1,
     );
-    await expectCourseProduct(getHeaderContainer(), relation);
+    await expectCourseProduct(getHeaderContainer(), offering);
 
     // Portal.
     expectEmptyPortalContainer();

package/package.json

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

package/js/hooks/useCourseProductRelation/index.ts

@@ -1,44 +0,0 @@
-import { defineMessages } from 'react-intl';
-import { useJoanieApi } from 'contexts/JoanieApiContext';
-import { API, CourseProductRelation, CourseProductRelationQueryFilters } from 'types/Joanie';
-import { useResource, useResources, UseResourcesProps } from 'hooks/useResources';
-
-const messages = defineMessages({
-  errorGet: {
-    id: 'hooks.useCourseProductRelations.errorGet',
-    description:
-      'Error message shown to the user when course product relation fetch request fails.',
-    defaultMessage: 'An error occurred while fetching trainings. Please retry later.',
-  },
-  errorNotFound: {
-    id: 'hooks.useCourseProductRelations.errorNotFound',
-    description: 'Error message shown to the user when no course product relation matches.',
-    defaultMessage: 'Cannot find the training.',
-  },
-});
-
-/**
- * Joanie Api hook to retrieve/create/update/delete course
- * owned by the authenticated user.
- */
-const props: UseResourcesProps<
-  CourseProductRelation,
-  CourseProductRelationQueryFilters,
-  API['courseProductRelations']
-> = {
-  queryKey: ['courseProductRelations'],
-  apiInterface: () => useJoanieApi().courseProductRelations,
-  session: true,
-  messages,
-};
-
-export const useCourseProductRelations = useResources<
-  CourseProductRelation,
-  CourseProductRelationQueryFilters,
-  API['courseProductRelations']
->(props);
-
-export const useCourseProductRelation = useResource<
-  CourseProductRelation,
-  CourseProductRelationQueryFilters
->(props);