richie-education 3.1.3-dev3 → 3.1.3-dev30

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/components/SyllabusCourseRun/index.stories.tsx

@@ -0,0 +1,81 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { CourseRunFactory, PacedCourseFactory } from 'utils/test/factories/richie';
+import { StorybookHelper } from 'utils/StorybookHelper';
+import { CourseCertificateOffer, CourseOffer } from '../../../../types/Course';
+import { SyllabusCourseRun } from '.';
+
+export default {
+  component: SyllabusCourseRun,
+  render: (args) => {
+    return StorybookHelper.wrapInApp(<SyllabusCourseRun {...args} />);
+  },
+} as Meta<typeof SyllabusCourseRun>;
+
+type Story = StoryObj<typeof SyllabusCourseRun>;
+
+const courseRun = CourseRunFactory().one();
+
+export const certificateSyllabusCourseRun: Story = {
+  args: {
+    courseRun: {
+      ...courseRun,
+      title: 'Certificate Product',
+      price_currency: 'EUR',
+      offer: CourseOffer.FREE,
+      certificate_offer: CourseCertificateOffer.PAID,
+      certificate_price: 100,
+      discounted_price: null,
+      discount: null,
+    },
+    course: PacedCourseFactory().one(),
+    showLanguages: true,
+  },
+};
+export const certificateDiscountSyllabusCourseRun: Story = {
+  args: {
+    courseRun: {
+      ...courseRun,
+      title: 'Certificate Product',
+      price_currency: 'EUR',
+      offer: CourseOffer.FREE,
+      certificate_offer: CourseCertificateOffer.PAID,
+      certificate_price: 100,
+      certificate_discounted_price: 80,
+      certificate_discount: '-20 €',
+    },
+    course: PacedCourseFactory().one(),
+    showLanguages: true,
+  },
+};
+export const credentialSyllabusCourseRun: Story = {
+  args: {
+    courseRun: {
+      ...courseRun,
+      title: 'Certificate Product',
+      price_currency: 'EUR',
+      offer: CourseOffer.PAID,
+      price: 100,
+      certificate_offer: CourseCertificateOffer.FREE,
+      discounted_price: null,
+      discount: null,
+    },
+    course: PacedCourseFactory().one(),
+    showLanguages: true,
+  },
+};
+export const credentialDiscountSyllabusCourseRun: Story = {
+  args: {
+    courseRun: {
+      ...courseRun,
+      title: 'Certificate Product',
+      price_currency: 'EUR',
+      offer: CourseOffer.PAID,
+      price: 100,
+      certificate_offer: CourseCertificateOffer.FREE,
+      discounted_price: 80,
+      discount: '-20 €',
+    },
+    course: PacedCourseFactory().one(),
+    showLanguages: true,
+  },
+};

package/js/widgets/SyllabusCourseRunsList/components/SyllabusCourseRun/index.tsx

@@ -128,6 +128,13 @@ const OpenedCourseRun = ({
         currency: courseRun.price_currency,
       });
     }
+
+    if ((courseRun.discounted_price ?? -1) >= 0) {
+      enrollmentPrice = intl.formatNumber(courseRun.discounted_price!, {
+        style: 'currency',
+        currency: courseRun.price_currency,
+      });
+    }
   }
 
   if (courseRun.certificate_offer) {
@@ -144,6 +151,13 @@ const OpenedCourseRun = ({
         currency: courseRun.price_currency,
       });
     }
+
+    if ((courseRun.certificate_discounted_price ?? -1) >= 0) {
+      certificatePrice = intl.formatNumber(courseRun.certificate_discounted_price!, {
+        style: 'currency',
+        currency: courseRun.price_currency,
+      });
+    }
   }
 
   return (

package/js/widgets/SyllabusCourseRunsList/components/SyllabusCourseRunCompacted/index.tsx

@@ -119,6 +119,13 @@ const OpenedSelfPacedCourseRun = ({
         currency: courseRun.price_currency,
       });
     }
+
+    if ((courseRun.discounted_price ?? -1) >= 0) {
+      enrollmentPrice = intl.formatNumber(courseRun.discounted_price!, {
+        style: 'currency',
+        currency: courseRun.price_currency,
+      });
+    }
   }
 
   if (courseRun.certificate_offer) {
@@ -135,6 +142,13 @@ const OpenedSelfPacedCourseRun = ({
         currency: courseRun.price_currency,
       });
     }
+
+    if ((courseRun.certificate_discounted_price ?? -1) >= 0) {
+      certificatePrice = intl.formatNumber(courseRun.certificate_discounted_price!, {
+        style: 'currency',
+        currency: courseRun.price_currency,
+      });
+    }
   }
 
   return (

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();
@@ -1465,4 +1465,50 @@ describe('<SyllabusCourseRunsList/>', () => {
     expect(content).not.toContain('The certification process is');
     expect(content).not.toContain('<br>€59.99');
   });
+
+  it('renders price discount on SyllabusCourseRun', async () => {
+    const course = PacedCourseFactory().one();
+    const courseRun: CourseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
+      languages: ['en'],
+      price_currency: 'EUR',
+      offer: 'paid',
+      price: 49.99,
+      certificate_offer: undefined,
+      certificate_price: undefined,
+      discounted_price: 30.0,
+      discount: '-20%',
+    }).one();
+
+    render(
+      <div className="course-detail__row course-detail__runs course-detail__runs--open">
+        <SyllabusCourseRunCompacted courseRun={courseRun} course={course} showLanguages={false} />
+      </div>,
+    );
+
+    const content = getHeaderContainer().innerHTML;
+    expect(content).toContain('<dd>Paid access<br>€30.00</dd>');
+  });
+
+  it('renders certificate discount on SyllabusCourseRun', async () => {
+    const course = PacedCourseFactory().one();
+    const courseRun: CourseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
+      languages: ['en'],
+      price_currency: 'EUR',
+      offer: 'free',
+      price: undefined,
+      certificate_offer: 'paid',
+      certificate_price: 100.0,
+      certificate_discounted_price: 70.0,
+      certificate_discount: '-30%',
+    }).one();
+
+    render(
+      <div className="course-detail__row course-detail__runs course-detail__runs--open">
+        <SyllabusCourseRunCompacted courseRun={courseRun} course={course} showLanguages={false} />
+      </div>,
+    );
+
+    const content = getHeaderContainer().innerHTML;
+    expect(content).toContain('<dd>Paid certificate<br>€70.00</dd>');
+  });
 });

package/package.json

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

package/scss/objects/_course_glimpses.scss

@@ -396,6 +396,12 @@ $course-glimpse-content-padding-sides: 0.7rem !default;
       }
     }
 
+    .offer_prices {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+    }
+
     .offer__price {
       $visibility: r-theme-val(course-glimpse, offer-price-visibility);
       @if $visibility == hidden {
@@ -404,6 +410,16 @@ $course-glimpse-content-padding-sides: 0.7rem !default;
       visibility: $visibility;
       // Align vertically the price with the icon
       margin-top: calc(1ex - 1cap);
+
+      &--striked,
+      &--discounted {
+        display: inline-block;
+      }
+
+      &--striked {
+        text-decoration: line-through;
+        opacity: 0.5;
+      }
     }
   }
 }

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);