richie-education 2.34.1-dev5 → 2.34.1-dev52

package/js/widgets/Slider/index.tsx

@@ -0,0 +1,119 @@
+import useEmblaCarousel from 'embla-carousel-react';
+import { useCallback, useEffect, useState } from 'react';
+import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures';
+import { defineMessages, FormattedMessage } from 'react-intl';
+import { Slide as SlideType } from './types';
+import SlidePanel from './components/SlidePanel';
+import Slideshow from './components/Slideshow';
+
+const messages = defineMessages({
+  sliderSummary: {
+    id: 'widgets.Slider.sliderSummary',
+    defaultMessage: 'Slide {slideNumber} of {totalSlides}: {slideTitle}',
+    description: 'Aria live label which summarizes the slider state.',
+  },
+});
+
+type SliderProps = {
+  // eslint-disable-next-line react/no-unused-prop-types
+  pk: string;
+  title: string;
+  slides: readonly SlideType[];
+};
+
+const Slider = ({ slides, title }: SliderProps) => {
+  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true }, [WheelGesturesPlugin()]);
+  const [activeSlideIndex, setActiveSlideIndex] = useState(0);
+  const [isTransitioning, setIsTransitioning] = useState(false);
+
+  const handleBulletClick = useCallback(
+    (index: number) => {
+      setIsTransitioning(true);
+      emblaApi?.scrollTo(index);
+    },
+    [emblaApi],
+  );
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent) => {
+      if (!emblaApi) return;
+
+      switch (event.key) {
+        case 'ArrowLeft':
+          event.preventDefault();
+          emblaApi.scrollPrev();
+          break;
+        case 'ArrowRight':
+          event.preventDefault();
+          emblaApi.scrollNext();
+          break;
+        case 'Home':
+          event.preventDefault();
+          emblaApi.scrollTo(0);
+          break;
+        case 'End':
+          event.preventDefault();
+          emblaApi.scrollTo(slides.length - 1);
+          break;
+        default:
+          break;
+      }
+    },
+    [emblaApi, slides.length],
+  );
+
+  useEffect(() => {
+    if (!emblaApi) return;
+
+    const handleSlidesChanged = (event: any) => {
+      setIsTransitioning(true);
+      setActiveSlideIndex(event.selectedScrollSnap());
+    };
+    emblaApi.on('select', handleSlidesChanged);
+
+    return () => {
+      emblaApi.off('select', handleSlidesChanged);
+    };
+  }, [emblaApi]);
+
+  useEffect(() => {
+    // Remove the transitioning class immediately after a transitioned render
+    setIsTransitioning(false);
+  }, [activeSlideIndex]);
+
+  return (
+    <div
+      className="slider"
+      ref={emblaRef}
+      aria-roledescription="carousel"
+      aria-label={title}
+      role="button"
+      tabIndex={0}
+      onKeyDown={handleKeyDown}
+    >
+      <Slideshow
+        slides={slides}
+        onNextSlide={() => emblaApi?.scrollNext()}
+        onPreviousSlide={() => emblaApi?.scrollPrev()}
+      />
+      <SlidePanel
+        slides={slides}
+        activeSlideIndex={activeSlideIndex}
+        onBulletClick={handleBulletClick}
+        isTransitioning={isTransitioning}
+      />
+      <span className="offscreen" role="presentation" aria-live="polite" aria-atomic="true">
+        <FormattedMessage
+          {...messages.sliderSummary}
+          values={{
+            slideNumber: activeSlideIndex + 1,
+            totalSlides: slides.length,
+            slideTitle: slides[activeSlideIndex].title,
+          }}
+        />
+      </span>
+    </div>
+  );
+};
+
+export default Slider;

package/js/widgets/Slider/types/index.ts

@@ -0,0 +1,8 @@
+export type Slide = {
+  pk: string;
+  title: string;
+  image: string;
+  content: string;
+  link_url: string;
+  link_open_blank: boolean;
+};

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

@@ -46,6 +46,51 @@ const messages = defineMessages({
     description: 'Course date of an opened course run block',
     defaultMessage: 'From {startDate} {endDate, select, undefined {} other {to {endDate}}}',
   },
+  coursePrice: {
+    id: 'components.SyllabusCourseRun.coursePrice',
+    description: 'Title of the course enrollment price section of an opened course run block',
+    defaultMessage: 'Enrollment price',
+  },
+  certificationPrice: {
+    id: 'components.SyllabusCourseRun.certificationPrice',
+    description: 'Title of the certification price section of an opened course run block',
+    defaultMessage: 'Certification price',
+  },
+  coursePaidOffer: {
+    id: 'components.SyllabusCourseRun.coursePaidOffer',
+    description: 'Message for the paid course offer of an opened course run block',
+    defaultMessage: 'The course content is paid.',
+  },
+  courseFreeOffer: {
+    id: 'components.SyllabusCourseRun.courseFreeOffer',
+    description: 'Message for the free course offer of an opened course run block',
+    defaultMessage: 'The course content is free.',
+  },
+  coursePartiallyFree: {
+    id: 'components.SyllabusCourseRun.coursePartiallyFree',
+    description: 'Message for the partially free course offer of an opened course run block',
+    defaultMessage: 'The course content is free.',
+  },
+  courseSubscriptionOffer: {
+    id: 'components.SyllabusCourseRun.courseSubscriptionOffer',
+    description: 'Message for the subscription course offer of an opened course run block',
+    defaultMessage: 'Subscribe to access the course content.',
+  },
+  certificatePaidOffer: {
+    id: 'components.SyllabusCourseRun.certificatePaidOffer',
+    description: 'Messagge for the paid certification offer of an opened course run block',
+    defaultMessage: 'The certification process is paid.',
+  },
+  certificateFreeOffer: {
+    id: 'components.SyllabusCourseRun.certificateFreeOffer',
+    description: 'Message for the free certification offer of an opened course run block',
+    defaultMessage: 'The certification process is free.',
+  },
+  certificateSubscriptionOffer: {
+    id: 'components.SyllabusCourseRun.certificateSubscriptionOffer',
+    description: 'Message for the subscription certification offer of an opened course run block',
+    defaultMessage: 'The certification process is offered through subscription.',
+  },
 });
 
 const OpenedCourseRun = ({
@@ -63,6 +108,44 @@ const OpenedCourseRun = ({
   const enrollmentEnd = courseRun.enrollment_end ? formatDate(courseRun.enrollment_end) : '...';
   const start = courseRun.start ? formatDate(courseRun.start) : '...';
   const end = courseRun.end ? formatDate(courseRun.end) : '...';
+  let courseOfferMessage = null;
+  let certificationOfferMessage = null;
+  let enrollmentPrice = '';
+  let certificatePrice = '';
+
+  if (courseRun.offer) {
+    const offer = courseRun.offer.toUpperCase().replaceAll(' ', '_');
+    courseOfferMessage = {
+      PAID: messages.coursePaidOffer,
+      FREE: messages.courseFreeOffer,
+      PARTIALLY_FREE: messages.coursePartiallyFree,
+      SUBSCRIPTION: messages.courseSubscriptionOffer,
+    }[offer];
+
+    if ((courseRun.price ?? -1) >= 0) {
+      enrollmentPrice = intl.formatNumber(courseRun.price!, {
+        style: 'currency',
+        currency: courseRun.price_currency,
+      });
+    }
+  }
+
+  if (courseRun.certificate_offer) {
+    const certificationOffer = courseRun.certificate_offer.toUpperCase().replaceAll(' ', '');
+    certificationOfferMessage = {
+      PAID: messages.certificatePaidOffer,
+      FREE: messages.certificateFreeOffer,
+      SUBSCRIPTION: messages.certificateSubscriptionOffer,
+    }[certificationOffer];
+
+    if ((courseRun.certificate_price ?? -1) >= 0) {
+      certificatePrice = intl.formatNumber(courseRun.certificate_price!, {
+        style: 'currency',
+        currency: courseRun.price_currency,
+      });
+    }
+  }
+
   return (
     <>
       {courseRun.title && <h3>{StringHelper.capitalizeFirst(courseRun.title)}</h3>}
@@ -99,6 +182,30 @@ const OpenedCourseRun = ({
             <dd>{IntlHelper.getLocalizedLanguages(courseRun.languages, intl)}</dd>
           </>
         )}
+        {courseOfferMessage && (
+          <>
+            <dt>
+              <FormattedMessage {...messages.coursePrice} />
+            </dt>
+            <dd>
+              <FormattedMessage {...courseOfferMessage} />
+              <br />
+              {enrollmentPrice}
+            </dd>
+          </>
+        )}
+        {certificationOfferMessage && (
+          <>
+            <dt>
+              <FormattedMessage {...messages.certificationPrice} />
+            </dt>
+            <dd>
+              <FormattedMessage {...certificationOfferMessage} />
+              <br />
+              {certificatePrice}
+            </dd>
+          </>
+        )}
       </dl>
       {findLmsBackend(courseRun.resource_link) ? (
         <CourseRunEnrollment courseRun={courseRun} />

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

@@ -41,6 +41,51 @@ const messages = defineMessages({
     description: 'Self paced course run block with no end date',
     defaultMessage: 'Available',
   },
+  coursePrice: {
+    id: 'components.SyllabusCourseRunCompacted.coursePrice',
+    description: 'Title of the course enrollment price section of an opened course run block',
+    defaultMessage: 'Enrollment price',
+  },
+  certificationPrice: {
+    id: 'components.SyllabusCourseRunCompacted.certificationPrice',
+    description: 'Title of the certification price section of an opened course run block',
+    defaultMessage: 'Certification price',
+  },
+  coursePaidOffer: {
+    id: 'components.SyllabusCourseRunCompacted.coursePaidOffer',
+    description: 'Message for the paid course offer of an opened course run block',
+    defaultMessage: 'The course content is paid.',
+  },
+  courseFreeOffer: {
+    id: 'components.SyllabusCourseRunCompacted.courseFreeOffer',
+    description: 'Message for the free course offer of an opened course run block',
+    defaultMessage: 'The course content is free.',
+  },
+  coursePartiallyFree: {
+    id: 'components.SyllabusCourseRunCompacted.coursePartiallyFree',
+    description: 'Message for the partially free course offer of an opened course run block',
+    defaultMessage: 'The course content is free.',
+  },
+  courseSubscriptionOffer: {
+    id: 'components.SyllabusCourseRunCompacted.courseSubscriptionOffer',
+    description: 'Message for the subscription course offer of an opened course run block',
+    defaultMessage: 'Subscribe to access the course content.',
+  },
+  certificatePaidOffer: {
+    id: 'components.SyllabusCourseRunCompacted.certificatePaidOffer',
+    description: 'Messagge for the paid certification offer of an opened course run block',
+    defaultMessage: 'The certification process is paid.',
+  },
+  certificateFreeOffer: {
+    id: 'components.SyllabusCourseRunCompacted.certificateFreeOffer',
+    description: 'Message for the free certification offer of an opened course run block',
+    defaultMessage: 'The certification process is free.',
+  },
+  certificateSubscriptionOffer: {
+    id: 'components.SyllabusCourseRunCompacted.certificateSubscriptionOffer',
+    description: 'Message for the subscription certification offer of an opened course run block',
+    defaultMessage: 'The certification process is offered through subscription.',
+  },
 });
 
 const OpenedSelfPacedCourseRun = ({
@@ -54,6 +99,44 @@ const OpenedSelfPacedCourseRun = ({
   const intl = useIntl();
   const end = courseRun.end ? formatDate(courseRun.end) : '...';
   const hasEndDate = end !== '...';
+  let courseOfferMessage = null;
+  let certificationOfferMessage = null;
+  let enrollmentPrice = '';
+  let certificatePrice = '';
+
+  if (courseRun.offer) {
+    const offer = courseRun.offer.toUpperCase().replaceAll(' ', '_');
+    courseOfferMessage = {
+      PAID: messages.coursePaidOffer,
+      FREE: messages.courseFreeOffer,
+      PARTIALLY_FREE: messages.coursePartiallyFree,
+      SUBSCRIPTION: messages.courseSubscriptionOffer,
+    }[offer];
+
+    if ((courseRun.price ?? -1) >= 0) {
+      enrollmentPrice = intl.formatNumber(courseRun.price!, {
+        style: 'currency',
+        currency: courseRun.price_currency,
+      });
+    }
+  }
+
+  if (courseRun.certificate_offer) {
+    const certificationOffer = courseRun.certificate_offer.toUpperCase().replaceAll(' ', '');
+    certificationOfferMessage = {
+      PAID: messages.certificatePaidOffer,
+      FREE: messages.certificateFreeOffer,
+      SUBSCRIPTION: messages.certificateSubscriptionOffer,
+    }[certificationOffer];
+
+    if ((courseRun.certificate_price ?? -1) >= 0) {
+      certificatePrice = intl.formatNumber(courseRun.certificate_price!, {
+        style: 'currency',
+        currency: courseRun.price_currency,
+      });
+    }
+  }
+
   return (
     <>
       {courseRun.title && <h3>{StringHelper.capitalizeFirst(courseRun.title)}</h3>}
@@ -83,6 +166,30 @@ const OpenedSelfPacedCourseRun = ({
             <dd>{IntlHelper.getLocalizedLanguages(courseRun.languages, intl)}</dd>
           </>
         )}
+        {courseOfferMessage && (
+          <>
+            <dt>
+              <FormattedMessage {...messages.coursePrice} />
+            </dt>
+            <dd>
+              <FormattedMessage {...courseOfferMessage} />
+              <br />
+              {enrollmentPrice}
+            </dd>
+          </>
+        )}
+        {certificationOfferMessage && (
+          <>
+            <dt>
+              <FormattedMessage {...messages.certificationPrice} />
+            </dt>
+            <dd>
+              <FormattedMessage {...certificationOfferMessage} />
+              <br />
+              {certificatePrice}
+            </dd>
+          </>
+        )}
       </dl>
       {findLmsBackend(courseRun.resource_link) ? (
         <CourseRunEnrollment courseRun={courseRun} />