richie-education 3.1.2 → 3.1.3-dev12

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 { Offer, 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;
+  offer: Offer;
 };
-const Header = ({ product, order, hasPurchased, canPurchase, compact }: HeaderProps) => {
+const Header = ({ product, order, offer, hasPurchased, canPurchase, compact }: HeaderProps) => {
   const intl = useIntl();
   const formatDate = useDateFormat();
 
@@ -72,21 +98,87 @@ 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 (offer.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={offer.discounted_price}
+              style="currency"
+            />
+          </ins>
+        </>
+      );
+    }
+
+    return (
+      <FormattedNumber currency={product.price_currency} value={product.price} style="currency" />
+    );
+  }, [canPurchase, offer.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>
+      {offer?.description && (
+        <p className="product-widget__header-description">{offer.description}</p>
+      )}
+      {offer?.discounted_price && (
+        <p className="product-widget__header-discount">
+          {offer.discount_rate ? (
+            <span className="product-widget__header-discount-rate">
+              <FormattedNumber value={-offer.discount_rate} style="percent" />
+            </span>
+          ) : (
+            <span className="product-widget__header-discount-amount">
+              <FormattedNumber
+                currency={product.price_currency}
+                value={-offer.discount_amount!}
+                style="currency"
+              />
+            </span>
+          )}
+          {offer.discount_start && (
+            <span className="product-widget__header-discount-date">
+              &nbsp;
+              <FormattedMessage
+                {...messages.from}
+                values={{ from: formatDate(offer.discount_start) }}
+              />
+            </span>
+          )}
+          {offer.discount_end && (
+            <span className="product-widget__header-discount-date">
+              &nbsp;
+              <FormattedMessage {...messages.to} values={{ to: formatDate(offer.discount_end) }} />
+            </span>
+          )}
+        </p>
+      )}
       {canShowMetadata && (
         <>
           <p
@@ -131,7 +223,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 +236,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: offer, states: productQueryStates } = useCourseProduct({
     product_id: productId,
     course_id: course.code,
   });
 
-  const product = courseProductRelation?.product;
+  const product = offer?.product;
   const { item: productOrder, states: orderQueryStates } = useProductOrder({
     productId,
     courseCode: course.code,
@@ -179,13 +271,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,19 +299,14 @@ const CourseProductItem = ({ productId, course, compact = false }: CourseProduct
           <Header
             product={product}
             order={order}
+            offer={offer}
             canPurchase={canPurchase}
             hasPurchased={hasPurchased}
             compact={compact}
           />
           {canShowContent && <Content product={product} order={order} />}
           <footer className="product-widget__footer">
-            <CourseProductItemFooter
-              course={course}
-              courseProductRelation={courseProductRelation}
-              orderGroups={orderGroups}
-              orderGroupsAvailable={orderGroupsAvailable}
-              canPurchase={canPurchase}
-            />
+            <CourseProductItemFooter course={course} offer={offer} 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 { Offer } from 'types/Joanie';
+import { OfferFactory } 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, offer: Offer) => {
     const heading = await findByRole(container, 'heading', {
-      name: relation.product.title,
+      name: offer.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 offer = OfferFactory().one();
+    const resourceLink = `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${offer.product.id}/`;
+    fetchMock.get(resourceLink, offer);
 
     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(), offer);
 
     // Portal.
     expectEmptyPortalContainer();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "3.1.2",
+  "version": "3.1.3-dev12",
   "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);