richie-education 3.1.3-dev8 → 3.2.1-dev1

package/js/widgets/Dashboard/components/DashboardItem/Order/DashboardItemOrder.tsx

@@ -67,15 +67,15 @@ export const DashboardItemOrder = ({
 }: DashboardItemOrderProps) => {
   const { course } = order;
   const intl = useIntl();
-  const { item: courseProductRelation } = useCourseProduct({
+  const { item: offering } = useCourseProduct({
     product_id: order.product_id,
     course_id: course.code,
   });
-  const { product } = courseProductRelation || {};
+  const { product } = offering || {};
   const needsSignature = OrderHelper.orderNeedsSignature(order);
   const needsPaymentMethod = order.state === OrderState.TO_SAVE_PAYMENT_METHOD;
   const isActive = OrderHelper.isActive(order);
-  const isProductPurchasable = ProductHelper.isPurchasable(courseProductRelation?.product);
+  const isProductPurchasable = ProductHelper.isPurchasable(offering?.product);
   const isNotResumable = !isActive && !isProductPurchasable;
   const canEnroll = OrderHelper.allowEnrollment(order);
 

package/js/widgets/Dashboard/components/DashboardItem/Order/DashboardItemOrderContract.useUnionResource.cache.spec.tsx

@@ -57,7 +57,7 @@ describe('<DashboardItemOrder/> Contract', () => {
         contract: ContractFactory({ student_signed_on: null }).one(),
       }).one();
 
-      // learner dashboard course page do one call to course product relation per order
+      // learner dashboard course page do one call to offering per order
       const { product } = mockCourseProductWithOrder(order);
 
       // overwrite useOmniscientOrders call

package/js/widgets/Dashboard/components/DashboardItem/Order/Installment/index.tsx

@@ -94,7 +94,7 @@ const Installment = ({ order }: Props) => {
 
 const PaymentMethodManager = ({ order }: Props) => {
   const needsPaymentMethod = order.state === OrderState.TO_SAVE_PAYMENT_METHOD;
-  const { item: relation, states } = useCourseProduct({
+  const { item: offering, states } = useCourseProduct({
     course_id: order.course.code,
     product_id: order.product_id,
   });
@@ -118,9 +118,9 @@ const PaymentMethodManager = ({ order }: Props) => {
       )}
       <SaleTunnel
         {...modal}
-        product={relation.product as CredentialProduct}
-        course={relation.course}
-        isWithdrawable={relation.is_withdrawable}
+        product={offering.product as CredentialProduct}
+        course={offering.course}
+        isWithdrawable={offering.is_withdrawable}
       />
     </>
   );

package/js/widgets/Dashboard/components/DashboardItem/stories.mock.ts

@@ -25,6 +25,6 @@ export const enrollment: Enrollment = {
     },
     languages: ['en'],
   },
-  product_relations: [],
+  offerings: [],
   certificate_id: null,
 };

package/js/widgets/Dashboard/components/DashboardSidebar/components/ContractNavLink/index.spec.tsx

@@ -28,7 +28,7 @@ describe('<ContractNavLink />', () => {
     fetchMock.get('https://joanie.endpoint/api/v1.0/organizations/', []);
   });
 
-  it('should render a ContractNavLink with route and label when neither organizationId and courseProductRelationId are given', () => {
+  it('should render a ContractNavLink with route and label when neither organizationId and offeringId are given', () => {
     const link: MenuLink = {
       to: '/dummy/url/',
       label: 'My contract navigation link',
@@ -45,31 +45,31 @@ describe('<ContractNavLink />', () => {
     it.each([
       {
         organizationId: faker.string.uuid(),
-        courseProductRelationId: undefined,
+        offeringId: undefined,
       },
       {
         organizationId: faker.string.uuid(),
-        courseProductRelationId: faker.string.uuid(),
+        offeringId: faker.string.uuid(),
       },
       {
         organizationId: undefined,
-        courseProductRelationId: faker.string.uuid(),
+        offeringId: faker.string.uuid(),
       },
       {
         organizationId: undefined,
-        courseProductRelationId: undefined,
+        offeringId: undefined,
       },
     ])(
-      'should never render Badge for organizationId: $organizationId and courseProductId: $courseProductRelationId',
-      async ({ organizationId, courseProductRelationId }) => {
+      'should never render Badge for organizationId: $organizationId and courseProductId: $offeringId',
+      async ({ organizationId, offeringId }) => {
         let contractQueryParams: ContractResourceQuery = {
           signature_state: ContractState.LEARNER_SIGNED,
           page: 1,
           page_size: PER_PAGE.teacherContractList,
         };
-        if (courseProductRelationId) {
+        if (offeringId) {
           contractQueryParams = {
-            course_product_relation_id: courseProductRelationId,
+            offering_id: offeringId,
             ...contractQueryParams,
           };
         }
@@ -94,7 +94,7 @@ describe('<ContractNavLink />', () => {
               label: 'My contract navigation link',
             }}
             organizationId={organizationId}
-            courseProductRelationId={courseProductRelationId}
+            offeringId={offeringId}
           />,
         );
 
@@ -112,25 +112,25 @@ describe('<ContractNavLink />', () => {
       // with 1 contracts to sign
       {
         organizationId: faker.string.uuid(),
-        courseProductRelationId: undefined,
+        offeringId: undefined,
         nbContractsToSign: 1,
         expectedBadgeCount: 1,
       },
       {
         organizationId: faker.string.uuid(),
-        courseProductRelationId: faker.string.uuid(),
+        offeringId: faker.string.uuid(),
         nbContractsToSign: 1,
         expectedBadgeCount: 1,
       },
       {
         organizationId: undefined,
-        courseProductRelationId: faker.string.uuid(),
+        offeringId: faker.string.uuid(),
         nbContractsToSign: 1,
         expectedBadgeCount: undefined,
       },
       {
         organizationId: undefined,
-        courseProductRelationId: undefined,
+        offeringId: undefined,
         nbContractsToSign: 1,
         expectedBadgeCount: undefined,
       },
@@ -138,44 +138,39 @@ describe('<ContractNavLink />', () => {
       // with 0 contracts to sign
       {
         organizationId: faker.string.uuid(),
-        courseProductRelationId: undefined,
+        offeringId: undefined,
         nbContractsToSign: 0,
         expectedBadgeCount: undefined,
       },
       {
         organizationId: faker.string.uuid(),
-        courseProductRelationId: faker.string.uuid(),
+        offeringId: faker.string.uuid(),
         nbContractsToSign: 0,
         expectedBadgeCount: undefined,
       },
       {
         organizationId: undefined,
-        courseProductRelationId: faker.string.uuid(),
+        offeringId: faker.string.uuid(),
         nbContractsToSign: 0,
         expectedBadgeCount: undefined,
       },
       {
         organizationId: undefined,
-        courseProductRelationId: undefined,
+        offeringId: undefined,
         nbContractsToSign: 0,
         expectedBadgeCount: undefined,
       },
     ])(
-      'should render Badge (count: $expectedBadgeCount) for nb contracts to sign: $nbContractsToSign, organizationId: $organizationId and courseProductId: $courseProductRelationId',
-      async ({
-        nbContractsToSign,
-        organizationId,
-        courseProductRelationId,
-        expectedBadgeCount,
-      }) => {
+      'should render Badge (count: $expectedBadgeCount) for nb contracts to sign: $nbContractsToSign, organizationId: $organizationId and courseProductId: $offeringId',
+      async ({ nbContractsToSign, organizationId, offeringId, expectedBadgeCount }) => {
         let contractQueryParams: ContractResourceQuery = {
           signature_state: ContractState.LEARNER_SIGNED,
           page: 1,
           page_size: PER_PAGE.teacherContractList,
         };
-        if (courseProductRelationId) {
+        if (offeringId) {
           contractQueryParams = {
-            course_product_relation_id: courseProductRelationId,
+            offering_id: offeringId,
             ...contractQueryParams,
           };
         }
@@ -199,7 +194,7 @@ describe('<ContractNavLink />', () => {
               label: 'My contract navigation link',
             }}
             organizationId={organizationId}
-            courseProductRelationId={courseProductRelationId}
+            offeringId={offeringId}
           />,
         );
 

package/js/widgets/Dashboard/components/DashboardSidebar/components/ContractNavLink/index.tsx

@@ -1,7 +1,7 @@
 import { createSearchParams } from 'react-router';
 import { useMemo } from 'react';
 import { MenuLink } from 'widgets/Dashboard/components/DashboardSidebar';
-import { ContractState, CourseProductRelation, Organization } from 'types/Joanie';
+import { ContractState, Offering, Organization } from 'types/Joanie';
 import useTeacherPendingContractsCount from 'hooks/useTeacherPendingContractsCount';
 import { ContractActions } from 'utils/AbilitiesHelper/types';
 import useContractAbilities from 'hooks/useContractAbilities';
@@ -11,18 +11,14 @@ import MenuNavLink from '../MenuNavLink';
 interface ContractNavLinkProps {
   link: MenuLink;
   organizationId?: Organization['id'];
-  courseProductRelationId?: CourseProductRelation['id'];
+  offeringId?: Offering['id'];
 }
 
-const ContractNavLink = ({
-  link,
-  organizationId,
-  courseProductRelationId,
-}: ContractNavLinkProps) => {
+const ContractNavLink = ({ link, organizationId, offeringId }: ContractNavLinkProps) => {
   const defaultOrganizationId = useDefaultOrganizationId();
   const { contracts: pendingContracts, pendingContractCount } = useTeacherPendingContractsCount({
     organizationId: organizationId || defaultOrganizationId,
-    courseProductRelationId,
+    offeringId,
   });
   const contractAbilities = useContractAbilities(pendingContracts);
   const canSignContracts = contractAbilities.can(ContractActions.SIGN);

package/js/widgets/Dashboard/components/TeacherDashboardCourseSidebar/index.spec.tsx

@@ -4,11 +4,7 @@ import { createIntl } from 'react-intl';
 import { generatePath } from 'react-router';
 import { CourseListItem } from 'types/Joanie';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
-import {
-  CourseFactory,
-  CourseProductRelationFactory,
-  OrganizationFactory,
-} from 'utils/test/factories/joanie';
+import { CourseFactory, OfferingFactory, OrganizationFactory } from 'utils/test/factories/joanie';
 import { expectNoSpinner } from 'utils/test/expectSpinner';
 import { render } from 'utils/test/render';
 import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
@@ -65,14 +61,14 @@ describe('<TeacherDashboardCourseSidebar/>', () => {
       label: 'course',
       course: CourseFactory().one(),
       organization: undefined,
-      courseProductRelation: undefined,
+      offering: undefined,
       expectedRoutes: [TeacherDashboardPaths.COURSE_GENERAL_INFORMATION],
     },
     {
       label: 'training',
       course: CourseFactory().one(),
       organization: undefined,
-      courseProductRelation: CourseProductRelationFactory().one(),
+      offering: OfferingFactory().one(),
       expectedRoutes: [
         TeacherDashboardPaths.COURSE_PRODUCT,
         TeacherDashboardPaths.COURSE_PRODUCT_CONTRACTS,
@@ -83,14 +79,14 @@ describe('<TeacherDashboardCourseSidebar/>', () => {
       label: "organization's course",
       course: CourseFactory().one(),
       organization: OrganizationFactory().one(),
-      courseProductRelation: undefined,
+      offering: undefined,
       expectedRoutes: [TeacherDashboardPaths.ORGANIZATION_COURSE_GENERAL_INFORMATION],
     },
     {
       label: "organization's training",
       course: CourseFactory().one(),
       organization: OrganizationFactory().one(),
-      courseProductRelation: CourseProductRelationFactory().one(),
+      offering: OfferingFactory().one(),
       expectedRoutes: [
         TeacherDashboardPaths.ORGANIZATION_PRODUCT,
         TeacherDashboardPaths.ORGANIZATION_PRODUCT_CONTRACTS,
@@ -99,20 +95,20 @@ describe('<TeacherDashboardCourseSidebar/>', () => {
     },
   ])(
     'should display menu items for "$label" route',
-    async ({ course, organization, courseProductRelation, expectedRoutes }) => {
+    async ({ course, organization, offering, expectedRoutes }) => {
       // mock api for organization's training
-      if (organization && courseProductRelation) {
+      if (organization && offering) {
         // fetching training's contracts
         nbApiRequest += 1;
         fetchMock.get(
-          `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/contracts/?course_product_relation_id=${courseProductRelation.id}&signature_state=half_signed&page=1&page_size=25`,
+          `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/contracts/?offering_id=${offering.id}&signature_state=half_signed&page=1&page_size=25`,
           [],
         );
         // fetching organization's training
         nbApiRequest += 1;
         fetchMock.get(
-          `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/course-product-relations/${courseProductRelation.id}/`,
-          courseProductRelation,
+          `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/offerings/${offering.id}/`,
+          offering,
         );
       } else if (organization) {
         // fetching organization's course
@@ -121,16 +117,13 @@ describe('<TeacherDashboardCourseSidebar/>', () => {
           `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/courses/${course.id}/`,
           course,
         );
-      } else if (courseProductRelation) {
+      } else if (offering) {
         // fetching training
         nbApiRequest += 1;
-        fetchMock.get(
-          `https://joanie.endpoint/api/v1.0/course-product-relations/${courseProductRelation.id}/`,
-          courseProductRelation,
-        );
+        fetchMock.get(`https://joanie.endpoint/api/v1.0/offerings/${offering.id}/`, offering);
         nbApiRequest += 1;
         fetchMock.get(
-          `https://joanie.endpoint/api/v1.0/organizations/?course_product_relation_id=${courseProductRelation.id}`,
+          `https://joanie.endpoint/api/v1.0/organizations/?offering_id=${offering.id}`,
           [],
         );
       } else {
@@ -142,9 +135,9 @@ describe('<TeacherDashboardCourseSidebar/>', () => {
       let routePath = '/:courseId';
       let initialEntry = `/${course.id}`;
 
-      if (courseProductRelation) {
-        routePath += '/:courseProductRelationId';
-        initialEntry += `/${courseProductRelation.id}`;
+      if (offering) {
+        routePath += '/:offeringId';
+        initialEntry += `/${offering.id}`;
       }
       if (organization) {
         routePath = '/:organizationId' + routePath;
@@ -168,7 +161,7 @@ describe('<TeacherDashboardCourseSidebar/>', () => {
           generatePath(expectedRoute, {
             organizationId: organization ? organization.id : null,
             courseId: course.id,
-            courseProductRelationId: courseProductRelation ? courseProductRelation.id : null,
+            offeringId: offering ? offering.id : null,
           }),
         );
       });

package/js/widgets/Dashboard/components/TeacherDashboardCourseSidebar/index.tsx

@@ -2,12 +2,12 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { generatePath, useParams } from 'react-router';
 import { useMemo } from 'react';
 import { capitalize } from 'lodash-es';
+import { useOffering } from 'hooks/useOffering';
 import { DashboardSidebar, MenuLink } from 'widgets/Dashboard/components/DashboardSidebar';
 import { getDashboardRouteLabel } from 'widgets/Dashboard/utils/dashboardRoutes';
 import { useCourse } from 'hooks/useCourses';
 import { Spinner } from 'components/Spinner';
 import { Icon, IconTypeEnum } from 'components/Icon';
-import { useCourseProductRelation } from 'hooks/useCourseProductRelation';
 import { TeacherDashboardPaths } from 'widgets/Dashboard/utils/teacherDashboardPaths';
 import ContractNavLink from '../DashboardSidebar/components/ContractNavLink';
 import { getMenuRoutes } from './utils';
@@ -41,11 +41,11 @@ export const TeacherDashboardCourseSidebar = () => {
   const {
     organizationId: routeOrganizationId,
     courseId: routeCourseId,
-    courseProductRelationId: routeCourseProductRelationId = '',
+    offeringId: routeOfferingId = '',
   } = useParams<{
     organizationId?: string;
     courseId: string;
-    courseProductRelationId: string;
+    offeringId: string;
   }>();
 
   const {
@@ -54,38 +54,35 @@ export const TeacherDashboardCourseSidebar = () => {
   } = useCourse(
     routeCourseId,
     { organization_id: routeOrganizationId },
-    { enabled: !routeCourseProductRelationId },
+    { enabled: !routeOfferingId },
   );
 
   const {
-    item: courseProductRelation,
-    states: { fetching: courseProductRelationFetching },
-  } = useCourseProductRelation(
-    routeCourseProductRelationId,
+    item: offering,
+    states: { fetching: offeringFetching },
+  } = useOffering(
+    routeOfferingId,
     {
       organization_id: routeOrganizationId,
     },
-    { enabled: !!routeCourseProductRelationId },
+    { enabled: !!routeOfferingId },
   );
 
   const fetching = useMemo(
-    () => courseFetching || courseProductRelationFetching,
-    [courseFetching, courseProductRelationFetching],
-  );
-  const product = useMemo(
-    () => (courseProductRelation ? courseProductRelation.product : undefined),
-    [courseProductRelation],
+    () => courseFetching || offeringFetching,
+    [courseFetching, offeringFetching],
   );
+  const product = useMemo(() => (offering ? offering.product : undefined), [offering]);
   const course = useMemo(
-    () => (courseProductRelation ? courseProductRelation.course : singleCourse),
-    [courseProductRelation, singleCourse],
+    () => (offering ? offering.course : singleCourse),
+    [offering, singleCourse],
   );
 
   const getMenuLinkFromPath = (basePath: TeacherDashboardPaths) => {
     const path = generatePath(basePath, {
       organizationId: routeOrganizationId ?? '',
       courseId: routeCourseId ?? '',
-      courseProductRelationId: routeCourseProductRelationId ?? '',
+      offeringId: routeOfferingId ?? '',
     });
     const menuLink: MenuLink = {
       to: path,
@@ -102,7 +99,7 @@ export const TeacherDashboardCourseSidebar = () => {
         <ContractNavLink
           link={menuLink}
           organizationId={routeOrganizationId}
-          courseProductRelationId={routeCourseProductRelationId}
+          offeringId={routeOfferingId}
         />
       );
     }
@@ -112,10 +109,10 @@ export const TeacherDashboardCourseSidebar = () => {
   const menuLinkList = useMemo(
     () =>
       getMenuRoutes({
-        courseProductRelationId: routeCourseProductRelationId,
+        offeringId: routeOfferingId,
         organizationId: routeOrganizationId,
       }).map(getMenuLinkFromPath),
-    [routeOrganizationId, routeCourseProductRelationId],
+    [routeOrganizationId, routeOfferingId],
   );
 
   return (

package/js/widgets/Dashboard/components/TeacherDashboardCourseSidebar/utils.ts

@@ -1,13 +1,13 @@
 import { TeacherDashboardPaths } from 'widgets/Dashboard/utils/teacherDashboardPaths';
 
 interface GetMenuRoutesArgs {
-  courseProductRelationId?: string;
+  offeringId?: string;
   organizationId?: string;
 }
 
-export const getMenuRoutes = ({ courseProductRelationId, organizationId }: GetMenuRoutesArgs) => {
+export const getMenuRoutes = ({ offeringId, organizationId }: GetMenuRoutesArgs) => {
   if (organizationId) {
-    if (courseProductRelationId) {
+    if (offeringId) {
       return [
         TeacherDashboardPaths.ORGANIZATION_PRODUCT,
         TeacherDashboardPaths.ORGANIZATION_PRODUCT_CONTRACTS,
@@ -17,7 +17,7 @@ export const getMenuRoutes = ({ courseProductRelationId, organizationId }: GetMe
     return [TeacherDashboardPaths.ORGANIZATION_COURSE_GENERAL_INFORMATION];
   }
 
-  if (courseProductRelationId) {
+  if (offeringId) {
     return [
       TeacherDashboardPaths.COURSE_PRODUCT,
       TeacherDashboardPaths.COURSE_PRODUCT_CONTRACTS,

package/js/widgets/Dashboard/components/TeacherDashboardOrganizationSidebar/index.tsx

@@ -24,9 +24,9 @@ const messages = defineMessages({
 export const TeacherDashboardOrganizationSidebar = () => {
   const intl = useIntl();
   const getRouteLabel = getDashboardRouteLabel(intl);
-  const { organizationId, courseProductRelationId } = useParams<{
+  const { organizationId, offeringId } = useParams<{
     organizationId: string;
-    courseProductRelationId?: string;
+    offeringId?: string;
   }>();
   const {
     item: organization,
@@ -43,11 +43,7 @@ export const TeacherDashboardOrganizationSidebar = () => {
 
     if (basePath === TeacherDashboardPaths.ORGANIZATION_CONTRACTS) {
       menuLink.component = (
-        <ContractNavLink
-          link={menuLink}
-          organizationId={organizationId}
-          courseProductRelationId={courseProductRelationId}
-        />
+        <ContractNavLink link={menuLink} organizationId={organizationId} offeringId={offeringId} />
       );
     }
 

package/js/widgets/Dashboard/utils/teacherDashboardPaths.tsx

@@ -9,14 +9,14 @@ export enum TeacherDashboardPaths {
   ORGANIZATION = `${ROOT}/organizations/:organizationId`,
   ORGANIZATION_CONTRACTS = `${ORGANIZATION}/contracts`,
   ORGANIZATION_COURSES = `${ORGANIZATION}/courses`,
-  ORGANIZATION_PRODUCT = `${ORGANIZATION_COURSES}/:courseId/products/:courseProductRelationId`,
+  ORGANIZATION_PRODUCT = `${ORGANIZATION_COURSES}/:courseId/products/:offeringId`,
   ORGANIZATION_COURSE_CONTRACTS = `${ORGANIZATION_COURSES}/:courseId/contracts`,
-  ORGANIZATION_PRODUCT_CONTRACTS = `${ORGANIZATION_COURSES}/:courseId/products/:courseProductRelationId/contracts`,
-  ORGANIZATION_COURSE_PRODUCT_LEARNER_LIST = `${ORGANIZATION_COURSES}/:courseId/products/:courseProductRelationId/learners`,
+  ORGANIZATION_PRODUCT_CONTRACTS = `${ORGANIZATION_COURSES}/:courseId/products/:offeringId/contracts`,
+  ORGANIZATION_COURSE_PRODUCT_LEARNER_LIST = `${ORGANIZATION_COURSES}/:courseId/products/:offeringId/learners`,
   ORGANIZATION_COURSE_GENERAL_INFORMATION = `${ORGANIZATION_COURSES}/:courseId/information`,
   COURSE = `${TEACHER_COURSES}/:courseId`,
   COURSE_GENERAL_INFORMATION = `${COURSE}/information`,
-  COURSE_PRODUCT = `${COURSE}/products/:courseProductRelationId`,
+  COURSE_PRODUCT = `${COURSE}/products/:offeringId`,
   COURSE_PRODUCT_LEARNER_LIST = `${COURSE_PRODUCT}/learners`,
   COURSE_PRODUCT_CONTRACTS = `${COURSE_PRODUCT}/contracts`,
 }

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

package/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,
+  },
+};

package/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