richie 3.1.3.dev30__py2.py3-none-any.whl → 3.1.3.dev35__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/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/courses/models/course.py

@@ -683,6 +683,15 @@ class Course(EsIdMixin, BasePageExtension):
             return self.best_course_run.price
         return None
 
+    @property
+    def discounted_price(self):
+        """
+        Returns the discounted price of the course run with the best state.
+        """
+        if self.best_course_run:
+            return self.best_course_run.discounted_price
+        return None
+
     @property
     def certificate_offer(self):
         """
@@ -701,6 +710,15 @@ class Course(EsIdMixin, BasePageExtension):
             return self.best_course_run.certificate_price
         return None
 
+    @property
+    def discounted_certificate_price(self):
+        """
+        Returns the discounted certificate price of the course run with the best state.
+        """
+        if self.best_course_run:
+            return self.best_course_run.discounted_certificate_price
+        return None
+
     def copy_relations(self, oldinstance, language=None):
         """
         This method is called for 2 types of copying:

richie/apps/courses/templates/courses/cms/fragment_course_glimpse.html

@@ -117,7 +117,14 @@
                         <use href="#icon-offer-{{course.offer|default:'free'}}" />
                 </svg>
                 {% if course.offer != 'free' and course.price %}
-                    <span class="offer__price">{{ course.price|currency:course.price_currency }}</span>
+                    {% if course.discounted_price %}
+                        <div class="offer_prices">
+                            <span class="offer__price offer__price--striked">{{ course.price|currency:course.price_currency }}</span>
+                            <span class="offer__price offer__price--discounted">{{ course.discounted_price|currency:course.price_currency }}</span>
+                        </div>
+                    {% else %}
+                        <span class="offer__price">{{ course.price|currency:course.price_currency }}</span>
+                    {% endif %}
                 {% endif %}
             </div>
         </div>