richie 3.1.3.dev31__py2.py3-none-any.whl → 3.1.3.dev37__py2.py3-none-any.whl

frontend/js/settings/index.ts

@@ -29,4 +29,5 @@ export const {
   MOCK_SERVICE_WORKER_ENABLED,
   DEBUG_UNION_RESOURCES_HOOK,
   CURRENT_JOANIE_DEV_DEMO_USER,
+  SLIDER_SETTINGS,
 } = settings;

frontend/js/settings/settings.prod.ts

@@ -61,3 +61,4 @@ export const PER_PAGE = {
 
 export const MOCK_SERVICE_WORKER_ENABLED = false;
 export const DEBUG_UNION_RESOURCES_HOOK = false;
+export const SLIDER_SETTINGS = { autoplayDelay: 3000 };

frontend/js/widgets/Slider/components/SlidePanel.tsx

@@ -20,6 +20,8 @@ type SlidePanelProps = {
   activeSlideIndex: number;
   isTransitioning: boolean;
   onBulletClick: (index: number) => void;
+  toggleAutoplay: () => void;
+  isAutoplaying: boolean;
 };
 
 /**
@@ -31,6 +33,8 @@ const SlidePanel = ({
   activeSlideIndex,
   onBulletClick,
   isTransitioning,
+  toggleAutoplay,
+  isAutoplaying,
 }: SlidePanelProps) => {
   const intl = useIntl();
   const hasSlideContent = slides.some((slide) => slide.content);
@@ -75,6 +79,11 @@ const SlidePanel = ({
             </span>
           </button>
         ))}
+        <div className="slider__autoplay">
+          <button type="button" onClick={toggleAutoplay}>
+            {isAutoplaying ? '⏸' : '⏵'}
+          </button>
+        </div>
       </div>
     </section>
   );

frontend/js/widgets/Slider/index.stories.tsx

@@ -0,0 +1,53 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { IntlProvider } from 'react-intl';
+import { Slide } from './types';
+import Slider from '.';
+
+const slides: Slide[] = [
+  {
+    pk: '1',
+    title: 'Slide 1',
+    content: 'Content for slide 1',
+    image: '/static/course_cover_image.jpg',
+    link_url: 'https://example.com/1',
+    link_open_blank: true,
+  },
+  {
+    pk: '2',
+    title: 'Slide 2',
+    content: 'Content for slide 2',
+    image: '/static/course_cover_image.jpg',
+    link_url: 'https://example.com/2',
+    link_open_blank: true,
+  },
+  {
+    pk: '3',
+    title: 'Slide 3',
+    content: 'Content for slide 3',
+    image: '/static/course_cover_image.jpg',
+    link_url: 'https://example.com/3',
+    link_open_blank: true,
+  },
+];
+
+export default {
+  component: Slider,
+  title: 'Widgets/Slider',
+  decorators: [
+    (Story) => (
+      <IntlProvider locale="en">
+        <Story />
+      </IntlProvider>
+    ),
+  ],
+} as Meta<typeof Slider>;
+
+type Story = StoryObj<typeof Slider>;
+
+export const Default: Story = {
+  args: {
+    pk: 'slider-1',
+    title: 'Example Slider',
+    slides,
+  },
+};

frontend/js/widgets/Slider/index.tsx

@@ -1,7 +1,9 @@
 import useEmblaCarousel from 'embla-carousel-react';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures';
+import Autoplay from 'embla-carousel-autoplay';
 import { defineMessages, FormattedMessage } from 'react-intl';
+import { SLIDER_SETTINGS } from 'settings';
 import { Slide as SlideType } from './types';
 import SlidePanel from './components/SlidePanel';
 import Slideshow from './components/Slideshow';
@@ -22,9 +24,24 @@ type SliderProps = {
 };
 
 const Slider = ({ slides, title }: SliderProps) => {
-  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true }, [WheelGesturesPlugin()]);
+  const autoplay = useRef(Autoplay({ delay: SLIDER_SETTINGS.autoplayDelay }));
+  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true }, [
+    WheelGesturesPlugin(),
+    autoplay.current,
+  ]);
   const [activeSlideIndex, setActiveSlideIndex] = useState(0);
   const [isTransitioning, setIsTransitioning] = useState(false);
+  const [isAutoplaying, setIsAutoplaying] = useState(true);
+
+  const toggleAutoplay = () => {
+    if (!autoplay.current) return;
+    if (isAutoplaying) {
+      autoplay.current.stop();
+    } else {
+      autoplay.current.play();
+    }
+    setIsAutoplaying(!isAutoplaying);
+  };
 
   const handleBulletClick = useCallback(
     (index: number) => {
@@ -101,6 +118,8 @@ const Slider = ({ slides, title }: SliderProps) => {
         activeSlideIndex={activeSlideIndex}
         onBulletClick={handleBulletClick}
         isTransitioning={isTransitioning}
+        toggleAutoplay={toggleAutoplay}
+        isAutoplaying={isAutoplaying}
       />
       <span className="offscreen" role="presentation" aria-live="polite" aria-atomic="true">
         <FormattedMessage

frontend/js/widgets/SyllabusCourseRunsList/components/CourseProductItem/index.tsx

@@ -239,10 +239,16 @@ 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: offering, 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 = offering?.product;
   const { item: productOrder, states: orderQueryStates } = useProductOrder({

frontend/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(' ', '_');
@@ -130,7 +132,7 @@ const OpenedCourseRun = ({
     }
 
     if ((courseRun.discounted_price ?? -1) >= 0) {
-      enrollmentPrice = intl.formatNumber(courseRun.discounted_price!, {
+      enrollmentDiscountedPrice = intl.formatNumber(courseRun.discounted_price!, {
         style: 'currency',
         currency: courseRun.price_currency,
       });
@@ -153,7 +155,7 @@ const OpenedCourseRun = ({
     }
 
     if ((courseRun.certificate_discounted_price ?? -1) >= 0) {
-      certificatePrice = intl.formatNumber(courseRun.certificate_discounted_price!, {
+      certificateDiscountedPrice = intl.formatNumber(courseRun.certificate_discounted_price!, {
         style: 'currency',
         currency: courseRun.price_currency,
       });
@@ -204,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>
           </>
         )}
@@ -216,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>
           </>
         )}

frontend/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(' ', '_');
@@ -121,7 +123,7 @@ const OpenedSelfPacedCourseRun = ({
     }
 
     if ((courseRun.discounted_price ?? -1) >= 0) {
-      enrollmentPrice = intl.formatNumber(courseRun.discounted_price!, {
+      enrollmentDiscountedPrice = intl.formatNumber(courseRun.discounted_price!, {
         style: 'currency',
         currency: courseRun.price_currency,
       });
@@ -144,7 +146,7 @@ const OpenedSelfPacedCourseRun = ({
     }
 
     if ((courseRun.certificate_discounted_price ?? -1) >= 0) {
-      certificatePrice = intl.formatNumber(courseRun.certificate_discounted_price!, {
+      certificateDiscountedPrice = intl.formatNumber(courseRun.certificate_discounted_price!, {
         style: 'currency',
         currency: courseRun.price_currency,
       });
@@ -188,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>
           </>
         )}
@@ -200,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>
           </>
         )}

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

@@ -1486,7 +1486,9 @@ describe('<SyllabusCourseRunsList/>', () => {
     );
 
     const content = getHeaderContainer().innerHTML;
-    expect(content).toContain('<dd>Paid access<br>€30.00</dd>');
+    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 () => {
@@ -1509,6 +1511,8 @@ describe('<SyllabusCourseRunsList/>', () => {
     );
 
     const content = getHeaderContainer().innerHTML;
-    expect(content).toContain('<dd>Paid certificate<br>€70.00</dd>');
+    expect(content).toContain(
+      '<dd>Paid certificate<br><del>€100.00</del><span>&nbsp;(-30%)</span><br><strong>€70.00</strong></dd>',
+    );
   });
 });

frontend/package.json

@@ -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",

frontend/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'),

frontend/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;
 

frontend/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(

frontend/yarn.lock

@@ -5664,6 +5664,11 @@ electron-to-chromium@^1.5.73:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.101.tgz#c26490fb2c1363d804e798e138a2a544fc7f7075"
   integrity sha512-L0ISiQrP/56Acgu4/i/kfPwWSgrzYZUnQrC0+QPFuhqlLP1Ir7qzPPDVS9BcKIyWTRU8+o6CC8dKw38tSWhYIA==
 
+embla-carousel-autoplay@8.6.0:
+  version "8.6.0"
+  resolved "https://registry.yarnpkg.com/embla-carousel-autoplay/-/embla-carousel-autoplay-8.6.0.tgz#bc86c97de00d52ec34b05058736ef50af6e0d0e4"
+  integrity sha512-OBu5G3nwaSXkZCo1A6LTaFMZ8EpkYbwIaH+bPqdBnDGQ2fh4+NbzjXjs2SktoPNKCtflfVMc75njaDHOYXcrsA==
+
 embla-carousel-react@8.5.2:
   version "8.5.2"
   resolved "https://registry.yarnpkg.com/embla-carousel-react/-/embla-carousel-react-8.5.2.tgz#f79f6c36690596fe2aceec994372ab84bfbfd9cc"

richie/apps/demo/management/commands/create_dev_data.py

@@ -13,6 +13,7 @@ from django.core.management.base import BaseCommand, CommandError
 from django.test.utils import override_settings
 
 import factory
+from beaupy import select_multiple
 from cms.api import add_plugin
 from cms.models import StaticPlaceholder
 
@@ -697,6 +698,7 @@ def create_courses(
     pages_created,
     persons_for_organization,
     subjects,
+    code,
     title=None,
     price=None,
     certificate_price=None,
@@ -731,6 +733,7 @@ def create_courses(
     )
 
     course = factories.CourseFactory(
+        code=code,
         page_title=title,
         page_in_navigation=True,
         page_languages=languages,
@@ -1083,72 +1086,92 @@ def create_dev_data(log=lambda x: None):
 
     # Create courses under the `Course` page with categories and organizations
     # relations
+
+    product_options = [
+        "Certificate product",
+        "Certificate product with discount",
+        "Credential product",
+        "Credential product with discount",
+    ]
+    products = select_multiple(product_options)
+
     log(f"Creating {NB_OBJECTS['courses']} courses...")
     courses = []
-    course = create_courses(
-        icons,
-        languages,
-        levels,
-        licences,
-        lms_endpoint,
-        organizations,
-        pages_created,
-        persons_for_organization,
-        subjects,
-        title="Certificate product",
-        price=0,
-        certificate_price=100,
-    )
-    courses.append(course)
-    course = create_courses(
-        icons,
-        languages,
-        levels,
-        licences,
-        lms_endpoint,
-        organizations,
-        pages_created,
-        persons_for_organization,
-        subjects,
-        title="Certificate product discount",
-        price=0,
-        certificate_price=100,
-        discount="-20 €",
-        discounted_price=80,
-    )
-    courses.append(course)
-    course = create_courses(
-        icons,
-        languages,
-        levels,
-        licences,
-        lms_endpoint,
-        organizations,
-        pages_created,
-        persons_for_organization,
-        subjects,
-        title="Credential product",
-        price=100,
-        certificate_price=0,
-    )
-    courses.append(course)
-    course = create_courses(
-        icons,
-        languages,
-        levels,
-        licences,
-        lms_endpoint,
-        organizations,
-        pages_created,
-        persons_for_organization,
-        subjects,
-        title="Credential product discount",
-        price=100,
-        certificate_price=0,
-        discount="-20 €",
-        discounted_price=80,
-    )
-    courses.append(course)
+    if "Certificate product" in products:
+        course = create_courses(
+            icons,
+            languages,
+            levels,
+            licences,
+            lms_endpoint,
+            organizations,
+            pages_created,
+            persons_for_organization,
+            subjects,
+            code="00000",
+            title="Certificate product",
+            price=0,
+            certificate_price=100,
+        )
+        courses.append(course)
+
+    if "Certificate product with discount" in products:
+        course = create_courses(
+            icons,
+            languages,
+            levels,
+            licences,
+            lms_endpoint,
+            organizations,
+            pages_created,
+            persons_for_organization,
+            subjects,
+            code="00001",
+            title="Certificate product discount",
+            price=0,
+            certificate_price=100,
+            discount="-20 €",
+            discounted_price=80,
+        )
+        courses.append(course)
+
+    if "Credential product" in products:
+        course = create_courses(
+            icons,
+            languages,
+            levels,
+            licences,
+            lms_endpoint,
+            organizations,
+            pages_created,
+            persons_for_organization,
+            subjects,
+            code="00002",
+            title="Credential product",
+            price=100,
+            certificate_price=0,
+        )
+        courses.append(course)
+
+    if "Credential product with discount" in products:
+        course = create_courses(
+            icons,
+            languages,
+            levels,
+            licences,
+            lms_endpoint,
+            organizations,
+            pages_created,
+            persons_for_organization,
+            subjects,
+            code="00003",
+            title="Credential product discount",
+            price=100,
+            certificate_price=0,
+            discount="-20 €",
+            discounted_price=80,
+        )
+        courses.append(course)
 
     # Create blog posts under the `News` page
     log(f"Creating {NB_OBJECTS['blogposts']} blog posts...")