richie-education 3.1.3-dev8 → 3.2.1-dev1

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 { CourseProductRelation, CredentialOrder, Product, ProductType } 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';
@@ -77,16 +77,9 @@ type HeaderProps = {
   canPurchase: boolean;
   order: Maybe<CredentialOrder>;
   product: Product;
-  courseProductRelation: CourseProductRelation;
+  offering: Offering;
 };
-const Header = ({
-  product,
-  order,
-  courseProductRelation,
-  hasPurchased,
-  canPurchase,
-  compact,
-}: HeaderProps) => {
+const Header = ({ product, order, offering, hasPurchased, canPurchase, compact }: HeaderProps) => {
   const intl = useIntl();
   const formatDate = useDateFormat();
 
@@ -110,7 +103,7 @@ const Header = ({
       return null;
     }
 
-    if (courseProductRelation.discounted_price) {
+    if (offering?.rules?.discounted_price != null) {
       return (
         <>
           <span id="original-price" className="offscreen">
@@ -129,7 +122,7 @@ const Header = ({
           <ins aria-describedby="discount-price" className="product-widget__price-discount">
             <FormattedNumber
               currency={product.price_currency}
-              value={courseProductRelation.discounted_price}
+              value={offering.rules.discounted_price}
               style="currency"
             />
           </ins>
@@ -140,7 +133,7 @@ const Header = ({
     return (
       <FormattedNumber currency={product.price_currency} value={product.price} style="currency" />
     );
-  }, [canPurchase, courseProductRelation.discounted_price, product.price]);
+  }, [canPurchase, offering?.rules?.discounted_price, product.price]);
 
   return (
     <header className="product-widget__header">
@@ -151,39 +144,39 @@ const Header = ({
         {hasPurchased && <FormattedMessage {...messages.purchased} />}
         {displayPrice}
       </strong>
-      {courseProductRelation?.description && (
-        <p className="product-widget__header-description">{courseProductRelation.description}</p>
+      {offering?.rules?.description && (
+        <p className="product-widget__header-description">{offering.rules.description}</p>
       )}
-      {courseProductRelation?.discounted_price && (
+      {offering?.rules?.discounted_price && (
         <p className="product-widget__header-discount">
-          {courseProductRelation.discount_rate ? (
+          {offering.rules.discount_rate ? (
             <span className="product-widget__header-discount-rate">
-              <FormattedNumber value={-courseProductRelation.discount_rate} style="percent" />
+              <FormattedNumber value={-offering.rules.discount_rate} style="percent" />
             </span>
           ) : (
             <span className="product-widget__header-discount-amount">
               <FormattedNumber
                 currency={product.price_currency}
-                value={-courseProductRelation.discount_amount!}
+                value={-offering.rules.discount_amount!}
                 style="currency"
               />
             </span>
           )}
-          {courseProductRelation.discount_start && (
+          {offering.rules.discount_start && (
             <span className="product-widget__header-discount-date">
               &nbsp;
               <FormattedMessage
                 {...messages.from}
-                values={{ from: formatDate(courseProductRelation.discount_start) }}
+                values={{ from: formatDate(offering.rules.discount_start) }}
               />
             </span>
           )}
-          {courseProductRelation.discount_end && (
+          {offering.rules.discount_end && (
             <span className="product-widget__header-discount-date">
               &nbsp;
               <FormattedMessage
                 {...messages.to}
-                values={{ to: formatDate(courseProductRelation.discount_end) }}
+                values={{ to: formatDate(offering.rules.discount_end) }}
               />
             </span>
           )}
@@ -246,12 +239,18 @@ 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({
-    product_id: productId,
-    course_id: course.code,
-  });
+  const { item: offering, states: productQueryStates } = useCourseProduct(
+    {
+      product_id: productId,
+      course_id: course.code,
+    },
+    {
+      refetchOnMount: 'always',
+      refetchOnWindowFocus: 'always',
+    },
+  );
 
-  const product = courseProductRelation?.product;
+  const product = offering?.product;
   const { item: productOrder, states: orderQueryStates } = useProductOrder({
     productId,
     courseCode: course.code,
@@ -309,7 +308,7 @@ const CourseProductItem = ({ productId, course, compact = false }: CourseProduct
           <Header
             product={product}
             order={order}
-            courseProductRelation={courseProductRelation}
+            offering={offering}
             canPurchase={canPurchase}
             hasPurchased={hasPurchased}
             compact={compact}
@@ -318,7 +317,7 @@ const CourseProductItem = ({ productId, course, compact = false }: CourseProduct
           <footer className="product-widget__footer">
             <CourseProductItemFooter
               course={course}
-              courseProductRelation={courseProductRelation}
+              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

@@ -111,7 +111,9 @@ const OpenedCourseRun = ({
   let courseOfferMessage = null;
   let certificationOfferMessage = null;
   let enrollmentPrice = '';
+  let enrollmentDiscountedPrice = '';
   let certificatePrice = '';
+  let certificateDiscountedPrice = '';
 
   if (courseRun.offer) {
     const offer = courseRun.offer.toUpperCase().replaceAll(' ', '_');
@@ -128,6 +130,13 @@ const OpenedCourseRun = ({
         currency: courseRun.price_currency,
       });
     }
+
+    if ((courseRun.discounted_price ?? -1) >= 0) {
+      enrollmentDiscountedPrice = intl.formatNumber(courseRun.discounted_price!, {
+        style: 'currency',
+        currency: courseRun.price_currency,
+      });
+    }
   }
 
   if (courseRun.certificate_offer) {
@@ -144,6 +153,13 @@ const OpenedCourseRun = ({
         currency: courseRun.price_currency,
       });
     }
+
+    if ((courseRun.certificate_discounted_price ?? -1) >= 0) {
+      certificateDiscountedPrice = intl.formatNumber(courseRun.certificate_discounted_price!, {
+        style: 'currency',
+        currency: courseRun.price_currency,
+      });
+    }
   }
 
   return (
@@ -190,7 +206,16 @@ const OpenedCourseRun = ({
             <dd>
               <FormattedMessage {...courseOfferMessage} />
               <br />
-              {enrollmentPrice}
+              {enrollmentDiscountedPrice ? (
+                <>
+                  <del>{enrollmentPrice}</del>
+                  <span>&nbsp;({courseRun.discount})</span>
+                  <br />
+                  <strong>{enrollmentDiscountedPrice}</strong>
+                </>
+              ) : (
+                enrollmentPrice
+              )}
             </dd>
           </>
         )}
@@ -202,7 +227,16 @@ const OpenedCourseRun = ({
             <dd>
               <FormattedMessage {...certificationOfferMessage} />
               <br />
-              {certificatePrice}
+              {certificateDiscountedPrice ? (
+                <>
+                  <del>{certificatePrice}</del>
+                  <span>&nbsp;({courseRun.certificate_discount})</span>
+                  <br />
+                  <strong>{certificateDiscountedPrice}</strong>
+                </>
+              ) : (
+                certificatePrice
+              )}
             </dd>
           </>
         )}

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

@@ -102,7 +102,9 @@ const OpenedSelfPacedCourseRun = ({
   let courseOfferMessage = null;
   let certificationOfferMessage = null;
   let enrollmentPrice = '';
+  let enrollmentDiscountedPrice = '';
   let certificatePrice = '';
+  let certificateDiscountedPrice = '';
 
   if (courseRun.offer) {
     const offer = courseRun.offer.toUpperCase().replaceAll(' ', '_');
@@ -119,6 +121,13 @@ const OpenedSelfPacedCourseRun = ({
         currency: courseRun.price_currency,
       });
     }
+
+    if ((courseRun.discounted_price ?? -1) >= 0) {
+      enrollmentDiscountedPrice = intl.formatNumber(courseRun.discounted_price!, {
+        style: 'currency',
+        currency: courseRun.price_currency,
+      });
+    }
   }
 
   if (courseRun.certificate_offer) {
@@ -135,6 +144,13 @@ const OpenedSelfPacedCourseRun = ({
         currency: courseRun.price_currency,
       });
     }
+
+    if ((courseRun.certificate_discounted_price ?? -1) >= 0) {
+      certificateDiscountedPrice = intl.formatNumber(courseRun.certificate_discounted_price!, {
+        style: 'currency',
+        currency: courseRun.price_currency,
+      });
+    }
   }
 
   return (
@@ -174,7 +190,16 @@ const OpenedSelfPacedCourseRun = ({
             <dd>
               <FormattedMessage {...courseOfferMessage} />
               <br />
-              {enrollmentPrice}
+              {enrollmentDiscountedPrice ? (
+                <>
+                  <del>{enrollmentPrice}</del>
+                  <span>&nbsp;({courseRun.discount})</span>
+                  <br />
+                  <strong>{enrollmentDiscountedPrice}</strong>
+                </>
+              ) : (
+                enrollmentPrice
+              )}
             </dd>
           </>
         )}
@@ -186,7 +211,16 @@ const OpenedSelfPacedCourseRun = ({
             <dd>
               <FormattedMessage {...certificationOfferMessage} />
               <br />
-              {certificatePrice}
+              {certificateDiscountedPrice ? (
+                <>
+                  <del>{certificatePrice}</del>
+                  <span>&nbsp;({courseRun.certificate_discount})</span>
+                  <br />
+                  <strong>{certificateDiscountedPrice}</strong>
+                </>
+              ) : (
+                certificatePrice
+              )}
             </dd>
           </>
         )}

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,54 @@ 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><del>€49.99</del><span>&nbsp;(-20%)</span><br><strong>€30.00</strong></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><del>€100.00</del><span>&nbsp;(-30%)</span><br><strong>€70.00</strong></dd>',
+    );
+  });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "3.1.3-dev8",
+  "version": "3.2.1-dev1",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {
@@ -90,6 +90,7 @@
     "cljs-merge": "1.1.1",
     "core-js": "3.41.0",
     "downshift": "9.0.9",
+    "embla-carousel-autoplay": "8.6.0",
     "embla-carousel-react": "8.5.2",
     "embla-carousel-wheel-gestures": "8.0.1",
     "eslint": ">=8.57.0 <9",

package/scss/colors/_theme.scss

@@ -166,6 +166,9 @@ $r-theme: (
     index-color: r-color('battleship-grey'),
     index-hover-color: r-color('indianred3'),
     index-active-color: r-color('firebrick6'),
+    autoplay-color: r-color('white'),
+    autoplay-background-color: r-color('battleship-grey'),
+    autoplay-background-hover-color: r-color('charcoal'),
   ),
   blogpost-glimpse: (
     card-background: r-color('white'),

package/scss/components/templates/richie/slider/_slider.scss

@@ -155,6 +155,25 @@ $r-slider-content-line-clamp: 4 !default;
   }
 }
 
+.slider__autoplay {
+  display: flex;
+  justify-content: flex-end;
+  font-weight: bold;
+  margin-top: 0.5rem;
+  button {
+    cursor: pointer;
+    border-radius: 50px;
+    padding: 0.25rem 0.5rem;
+    border: none;
+    color: r-theme-val(slider-plugin, autoplay-color);
+    background-color: r-theme-val(slider-plugin, autoplay-background-color);
+    &:hover,
+    &:focus {
+      background-color: r-theme-val(slider-plugin, autoplay-background-hover-color);
+    }
+  }
+}
+
 .slide__content {
   max-width: 680px;
 

package/scss/objects/_blogpost_glimpses.scss

@@ -55,6 +55,11 @@ $glimpse-gutter: 0.6rem;
       align-self: flex-end;
     }
   }
+  .section__grid--33x33x33 > &:nth-child(0n + 2) {
+    @include media-breakpoint-up(lg) {
+      align-self: unset;
+    }
+  }
 
   // Apply card styles for elements
   @include m-o-card(

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