richie-education 2.34.1-dev5 → 2.34.1-dev51

package/js/components/OpenEdxFullNameForm/index.tsx

@@ -1,4 +1,4 @@
-import { ButtonElement, Input } from '@openfun/cunningham-react';
+import { ButtonElement, Input, Alert, VariantType } from '@openfun/cunningham-react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { FormProvider, useForm } from 'react-hook-form';
 import * as Yup from 'yup';
@@ -8,7 +8,6 @@ import { useSession } from 'contexts/SessionContext';
 import useOpenEdxProfile from 'hooks/useOpenEdxProfile';
 import Form, { getLocalizedCunninghamErrorProp } from 'components/Form';
 import { Spinner } from 'components/Spinner';
-import Banner, { BannerType } from 'components/Banner';
 import { useSaleTunnelContext } from 'components/SaleTunnel/GenericSaleTunnel';
 
 const messages = defineMessages({
@@ -19,14 +18,15 @@ const messages = defineMessages({
   },
   fullNameInputLabel: {
     id: 'components.OpenEdxFullNameForm.fullNameInputLabel',
-    description: 'Label of "fullName" field of the openEdx full name form',
-    defaultMessage: 'Full name',
+    description: 'Label of "First name and last name" field of the openEdx full name form',
+    defaultMessage: 'First name and last name',
   },
   fullNameInputDescription: {
     id: 'components.OpenEdxFullNameForm.fullNameInputDescription',
-    description: 'Descripiton on the "fullName" field of the openEdx full name form.',
+    description:
+      'Description about the "First name and last name" field of the openEdx full name form.',
     defaultMessage:
-      'Please check that your fullname is correct. It will be used on official document (e.g: certificate)',
+      'Please check that your first name and last name are correct. They will be used on official document (e.g: certificate, contract, etc.)',
   },
   submitButtonLabel: {
     id: 'components.OpenEdxFullNameForm.submitButtonLabel',
@@ -128,27 +128,24 @@ const OpenEdxFullNameForm = () => {
 
   if (error) {
     // display get error message
-    return <Banner type={BannerType.ERROR} message={error} />;
+    return <Alert type={VariantType.ERROR}>{error}</Alert>;
   }
 
   return (
     <FormProvider {...form}>
       <Form name="openedx-fullname-form" noValidate>
+        <Alert type={formState.errors.name?.message ? VariantType.ERROR : VariantType.WARNING}>
+          <FormattedMessage {...messages.fullNameInputDescription} />
+        </Alert>
         <Input
           {...register('name')}
-          className="form-field"
+          className="form-field mt-s"
           required
           fullWidth
           label={intl.formatMessage(messages.fullNameInputLabel)}
           value={formState.defaultValues?.name}
-          state={
-            error || (formState.errors.name && formState.errors.name.message) ? 'error' : 'default'
-          }
-          text={
-            error ||
-            getLocalizedCunninghamErrorProp(intl, formState.errors.name?.message).text ||
-            intl.formatMessage(messages.fullNameInputDescription)
-          }
+          state={error || formState.errors.name?.message ? 'error' : 'default'}
+          text={error || getLocalizedCunninghamErrorProp(intl, formState.errors.name?.message).text}
         />
       </Form>
     </FormProvider>

package/js/components/SaleTunnel/index.full-process.spec.tsx

@@ -184,7 +184,7 @@ describe('SaleTunnel', () => {
      */
     screen.getByText('Information');
 
-    const nameInput = screen.getByLabelText('Full name');
+    const nameInput = screen.getByLabelText('First name and last name');
     await user.type(nameInput, 'John Doe');
 
     /**

package/js/pages/DashboardCreditCardsManagement/index.spec.tsx

@@ -134,13 +134,14 @@ describe('<DashboardCreditCardsManagement/>', () => {
   });
 
   it('renders the correct label for an expiration date that will soon expire', async () => {
-    const refDate = new Date();
-    refDate.setMonth(refDate.getMonth() + 1);
-    refDate.setDate(1);
-    const futureLessThan3Months = faker.date.future({ years: 2.99 / 12, refDate });
+    const now = new Date();
+    const expirationDate = faker.date.between({
+      from: now,
+      to: new Date(now.getFullYear(), now.getMonth() + 4, 0, 23, 59, 59),
+    });
     const creditCard: CreditCard = CreditCardFactory({
-      expiration_month: futureLessThan3Months.getMonth() + 1,
-      expiration_year: futureLessThan3Months.getFullYear(),
+      expiration_month: expirationDate.getMonth() + 1,
+      expiration_year: expirationDate.getFullYear(),
     }).one();
 
     fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', [creditCard]);
@@ -151,11 +152,11 @@ describe('<DashboardCreditCardsManagement/>', () => {
     expect(screen.queryByText('An error occurred', { exact: false })).toBeNull();
     const element = await screen.findByText(
       'Expires on ' +
-        (futureLessThan3Months.getMonth() + 1).toLocaleString(undefined, {
+        (expirationDate.getMonth() + 1).toLocaleString(undefined, {
           minimumIntegerDigits: 2,
         }) +
         '/' +
-        futureLessThan3Months.getFullYear(),
+        expirationDate.getFullYear(),
     );
     expect(element.classList).toContain('dashboard-credit-card__expiration');
     expect(element.classList).not.toContain('dashboard-credit-card__expiration--expired');

package/js/types/Course.ts

@@ -3,6 +3,19 @@ import { Resource } from 'types/Resource';
 import { Nullable } from 'types/utils';
 import { CourseListItem as JoanieCourse } from 'types/Joanie';
 
+export enum CourseOffer {
+  PAID = 'paid',
+  FREE = 'free',
+  PARTIALLY_FREE = 'partially_free',
+  SUBSCRIPTION = 'subscription',
+}
+
+export enum CourseCertificateOffer {
+  PAID = 'paid',
+  FREE = 'free',
+  SUBSCRIPTION = 'subscription',
+}
+
 export interface Course extends Resource {
   absolute_url: string;
   categories: string[];
@@ -29,6 +42,11 @@ export interface Course extends Resource {
   }>;
   organizations: string[];
   state: CourseState;
+  certificate_offer: Nullable<CourseCertificateOffer>;
+  offer: Nullable<CourseOffer>;
+  certificate_price: Nullable<number>;
+  price: Nullable<number>;
+  price_currency: string;
 }
 
 export function isRichieCourse(course: Course | JoanieCourse): course is Course {

package/js/types/index.ts

@@ -35,6 +35,11 @@ export interface CourseRun {
   title?: string;
   snapshot?: string;
   display_mode: CourseRunDisplayMode;
+  price?: number;
+  price_currency?: string;
+  offer?: string;
+  certificate_price?: number;
+  certificate_offer?: string;
 }
 
 export enum Priority {

package/js/utils/test/expectAlert.ts

@@ -0,0 +1,63 @@
+import { waitFor } from '@testing-library/react';
+import { VariantType } from '@openfun/cunningham-react';
+
+export const expectAlertError = (message: string, rootElement: ParentNode = document) => {
+  return expectAlert(VariantType.ERROR, message, rootElement);
+};
+
+export const expectAlertInfo = (message: string, rootElement: ParentNode = document) => {
+  return expectAlert(VariantType.INFO, message, rootElement);
+};
+
+export const expectAlertSuccess = (message: string, rootElement: ParentNode = document) => {
+  return expectAlert(VariantType.SUCCESS, message, rootElement);
+};
+
+export const expectAlertWarning = (message: string, rootElement: ParentNode = document) => {
+  return expectAlert(VariantType.WARNING, message, rootElement);
+};
+
+export const expectAlert = (
+  type: VariantType,
+  message: string,
+  rootElement: ParentNode = document,
+) => {
+  return waitFor(async () => {
+    // Cunningham Alert has a class with the alert variant type
+    const alert = rootElement.querySelector(`.c__alert--${type}`) as HTMLElement;
+    expect(alert).not.toBeNull();
+    expect(alert).toHaveTextContent(message);
+  });
+};
+
+export const expectNoAlert = (
+  type: VariantType,
+  message: string,
+  rootElement: ParentNode = document,
+) => {
+  return waitFor(() => {
+    // Check that no alert exists with this message and type
+    const alerts = rootElement.querySelectorAll('.c__alert');
+    const matchingAlert = Array.from(alerts).find(
+      (alert) =>
+        alert.classList.contains(`c__alert--${type}`) && alert.textContent?.includes(message),
+    );
+    expect(matchingAlert).toBeUndefined();
+  });
+};
+
+export const expectNoAlertError = (message: string, rootElement: ParentNode = document) => {
+  return expectNoAlert(VariantType.ERROR, message, rootElement);
+};
+
+export const expectNoAlertInfo = (message: string, rootElement: ParentNode = document) => {
+  return expectNoAlert(VariantType.INFO, message, rootElement);
+};
+
+export const expectNoAlertSuccess = (message: string, rootElement: ParentNode = document) => {
+  return expectNoAlert(VariantType.SUCCESS, message, rootElement);
+};
+
+export const expectNoAlertWarning = (message: string, rootElement: ParentNode = document) => {
+  return expectNoAlert(VariantType.WARNING, message, rootElement);
+};

package/js/utils/test/factories/richie.ts

@@ -10,7 +10,7 @@ import {
   PacedCourse,
   Priority,
 } from 'types';
-import { Course } from 'types/Course';
+import { CourseCertificateOffer, Course, CourseOffer } from 'types/Course';
 import { FactoryHelper } from 'utils/test/factories/helper';
 import { factory } from './factories';
 
@@ -45,7 +45,27 @@ export const CourseStateFutureOpenFactory = factory<CourseState>(() => {
   };
 });
 
+enum OfferType {
+  PAID = 'PAID',
+  FREE = 'FREE',
+  PARTIALLY_FREE = 'PARTIALLY_FREE',
+  SUBSCRIPTION = 'SUBSCRIPTION',
+}
+
 export const CourseRunFactory = factory<CourseRun>(() => {
+  const offerValues = Object.values(OfferType);
+  const offer = offerValues[Math.floor(Math.random() * offerValues.length)];
+  const certificateOfferValues = [OfferType.PAID, OfferType.FREE, OfferType.SUBSCRIPTION];
+  const certificateOffer =
+    certificateOfferValues[Math.floor(Math.random() * certificateOfferValues.length)];
+  const currency = faker.finance.currency().code;
+  const price = [OfferType.FREE, OfferType.PARTIALLY_FREE].includes(offer)
+    ? 0
+    : parseFloat(faker.finance.amount({ min: 1, max: 100, symbol: currency, autoFormat: true }));
+  const certificatePrice =
+    certificateOffer === OfferType.FREE
+      ? 0
+      : parseFloat(faker.finance.amount({ min: 1, max: 100, symbol: currency, autoFormat: true }));
   return {
     id: faker.number.int(),
     resource_link: FactoryHelper.unique(faker.internet.url),
@@ -58,6 +78,11 @@ export const CourseRunFactory = factory<CourseRun>(() => {
     dashboard_link: null,
     title: faker.lorem.sentence(3),
     display_mode: CourseRunDisplayMode.DETAILED,
+    price,
+    price_currency: currency,
+    offer,
+    certificate_price: certificatePrice,
+    certificate_offer: certificateOffer,
   };
 });
 
@@ -214,5 +239,10 @@ export const CourseLightFactory = factory<Course>(() => {
     },
     organizations: [organizationName],
     state: CourseStateFactory().one(),
+    certificate_offer: CourseCertificateOffer.FREE,
+    offer: CourseOffer.FREE,
+    certificate_price: null,
+    price: null,
+    price_currency: 'EUR',
   };
 });

package/js/widgets/Slider/components/Slide.tsx

@@ -0,0 +1,20 @@
+import { type Slide as SlideType } from '../types';
+
+const Slide = ({ slide }: { slide: SlideType }) => (
+  <div className="slider__slide">
+    {slide.link_url ? (
+      <a
+        href={slide.link_url}
+        target={slide.link_open_blank ? '_blank' : '_self'}
+        rel="noopener noreferrer"
+        title={`Go to ${slide.link_url}`}
+      >
+        <img src={slide.image} alt={slide.title} loading="lazy" />
+      </a>
+    ) : (
+      <img src={slide.image} alt={slide.title} loading="lazy" />
+    )}
+  </div>
+);
+
+export default Slide;

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

@@ -0,0 +1,83 @@
+import classNames from 'classnames';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { Slide } from '../types';
+
+const messages = defineMessages({
+  goToSlide: {
+    id: 'widgets.Slider.components.SlidePanel.goToSlide',
+    defaultMessage: 'Go to slide {slideIndex}',
+    description: 'Aria label for the bullet buttons to go to a given slide.',
+  },
+  slideAriaLabel: {
+    id: 'widgets.Slider.components.SlidePanel.slideAriaLabel',
+    defaultMessage: 'Slide {slideNumber}: {slideTitle}',
+    description: 'Aria label for the current slide.',
+  },
+});
+
+type SlidePanelProps = {
+  slides: readonly Slide[];
+  activeSlideIndex: number;
+  isTransitioning: boolean;
+  onBulletClick: (index: number) => void;
+};
+
+/**
+ * This component is used to display the panel for the slideshow.
+ * It renders the textual content of the current slide and also the bullet points.
+ */
+const SlidePanel = ({
+  slides,
+  activeSlideIndex,
+  onBulletClick,
+  isTransitioning,
+}: SlidePanelProps) => {
+  const intl = useIntl();
+  const hasSlideContent = slides.some((slide) => slide.content);
+
+  return (
+    <section className="slider__panel" aria-label="Slide information">
+      <div
+        className={classNames('slide__content', {
+          'slide__content--transitioning': isTransitioning,
+        })}
+        role="group"
+        aria-roledescription="slide"
+        aria-label={intl.formatMessage(messages.slideAriaLabel, {
+          slideNumber: activeSlideIndex + 1,
+          slideTitle: slides[activeSlideIndex].title,
+        })}
+      >
+        <strong className="slide__title">
+          <span>{slides[activeSlideIndex].title}</span>
+        </strong>
+        {hasSlideContent && (
+          <div
+            className="slide__description"
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML={{ __html: slides[activeSlideIndex].content }}
+          />
+        )}
+      </div>
+      <div className="slider__bullet-list" role="tablist" aria-label="Slide navigation">
+        {slides.map((slide, index) => (
+          <button
+            key={slide.pk}
+            className={classNames('slider__bullet-item', {
+              'slider__bullet-item--active': activeSlideIndex === index,
+            })}
+            onClick={() => onBulletClick(index)}
+            role="tab"
+            aria-selected={activeSlideIndex === index}
+          >
+            <span className="offscreen">
+              <FormattedMessage {...messages.goToSlide} values={{ slideIndex: index + 1 }} />
+            </span>
+          </button>
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export default SlidePanel;

package/js/widgets/Slider/components/Slideshow.tsx

@@ -0,0 +1,58 @@
+import { defineMessages, useIntl } from 'react-intl';
+import { Icon, IconTypeEnum } from 'components/Icon';
+import { Slide as SlideType } from '../types';
+import Slide from './Slide';
+
+const messages = defineMessages({
+  nextSlide: {
+    id: 'widgets.Slider.components.Slideshow.nextSlide',
+    defaultMessage: 'Next slide',
+    description: 'Aria label to navigate to the next slide.',
+  },
+  previousSlide: {
+    id: 'widgets.Slider.components.Slideshow.previousSlide',
+    defaultMessage: 'Previous slide',
+    description: 'Aria label to navigate to the previous slide.',
+  },
+});
+type SlideshowProps = {
+  slides: readonly SlideType[];
+  onNextSlide: () => void;
+  onPreviousSlide: () => void;
+};
+
+/**
+ * This component is used to display the slideshow.
+ * It renders the slides and the navigation buttons.
+ */
+const Slideshow = ({ slides, onNextSlide, onPreviousSlide }: SlideshowProps) => {
+  const intl = useIntl();
+
+  return (
+    <>
+      <div className="slider__slideshow">
+        {slides.map((slide) => (
+          <Slide key={slide.pk} slide={slide} />
+        ))}
+      </div>
+      <div className="slider__slideshow-overlay">
+        <button
+          className="slider__navigation-button"
+          onClick={onPreviousSlide}
+          aria-label={intl.formatMessage(messages.previousSlide)}
+        >
+          <Icon name={IconTypeEnum.CHEVRON_LEFT_OUTLINE} aria-hidden="true" />
+        </button>
+        <button
+          className="slider__navigation-button"
+          onClick={onNextSlide}
+          aria-label={intl.formatMessage(messages.nextSlide)}
+        >
+          <Icon name={IconTypeEnum.CHEVRON_RIGHT_OUTLINE} aria-hidden="true" />
+        </button>
+      </div>
+    </>
+  );
+};
+
+export default Slideshow;

package/js/widgets/Slider/index.spec.tsx

@@ -0,0 +1,167 @@
+import { screen, fireEvent, render, within } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import useEmblaCarousel from 'embla-carousel-react';
+import { Slide } from './types';
+import Slider from '.';
+
+// Mock the embla-carousel-react hook
+jest.mock('embla-carousel-react', () => {
+  const mockEmblaApi = {
+    scrollTo: jest.fn(),
+    scrollNext: jest.fn(),
+    scrollPrev: jest.fn(),
+    on: jest.fn(),
+    off: jest.fn(),
+    selectedScrollSnap: jest.fn(),
+  };
+
+  return () => [
+    jest.fn(), // ref
+    mockEmblaApi,
+  ];
+});
+
+const mockUseEmblaCarousel = useEmblaCarousel as jest.Mocked<typeof useEmblaCarousel>;
+
+describe('<Slider />', () => {
+  const mockSlides: Slide[] = [
+    {
+      pk: '1',
+      title: 'Slide 1',
+      content: 'Content 1',
+      image: 'image1.jpg',
+      link_url: 'https://example.com/1',
+      link_open_blank: false,
+    },
+    {
+      pk: '2',
+      title: 'Slide 2',
+      content: 'Content 2',
+      image: 'image2.jpg',
+      link_url: 'https://example.com/2',
+      link_open_blank: false,
+    },
+    {
+      pk: '3',
+      title: 'Slide 3',
+      content: 'Content 3',
+      image: 'image3.jpg',
+      link_url: 'https://example.com/3',
+      link_open_blank: false,
+    },
+  ];
+
+  const defaultProps = {
+    pk: '1',
+    title: 'Test Slider',
+    slides: mockSlides,
+  };
+
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it('renders the slider with all slides', () => {
+    render(
+      <IntlProvider locale="en">
+        <Slider {...defaultProps} />
+      </IntlProvider>,
+    );
+
+    // Check if all slides are rendered
+    mockSlides.forEach((slide) => {
+      expect(screen.getByRole('img', { name: slide.title })).toBeInTheDocument();
+      // Check if the link is rendered
+      const link = screen.queryByRole('link', { name: slide.title });
+      if (slide.link_url) {
+        expect(link).toHaveAttribute('href', slide.link_url);
+        expect(link).toBeInTheDocument();
+      } else {
+        expect(link).not.toBeInTheDocument();
+      }
+    });
+
+    // Check if navigation elements are present
+    expect(screen.getByRole('button', { name: 'Previous slide' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Next slide' })).toBeInTheDocument();
+
+    // Only the active slide content should be visible
+    const activeSlide = screen.getByRole('group', { name: /Slide 1:.*/ });
+    expect(activeSlide).toBeInTheDocument();
+    within(activeSlide).getByText(mockSlides[0].title);
+    within(activeSlide).getByText(mockSlides[0].content);
+    expect(screen.queryByRole('group', { name: /Slide 2:.*/ })).not.toBeInTheDocument();
+    expect(screen.queryByRole('group', { name: /Slide 3:.*/ })).not.toBeInTheDocument();
+  });
+
+  it('handles keyboard navigation', () => {
+    const mockEmblaApi = mockUseEmblaCarousel()[1]!;
+    render(
+      <IntlProvider locale="en">
+        <Slider {...defaultProps} />
+      </IntlProvider>,
+    );
+
+    const slider = screen.getByRole('button', { name: /test slider/i });
+
+    // Test arrow key navigation
+    fireEvent.keyDown(slider, { key: 'ArrowLeft' });
+    expect(mockEmblaApi.scrollPrev).toHaveBeenNthCalledWith(1);
+
+    fireEvent.keyDown(slider, { key: 'ArrowRight' });
+    expect(mockEmblaApi.scrollNext).toHaveBeenNthCalledWith(1);
+
+    // Test home/end key navigation
+    fireEvent.keyDown(slider, { key: 'Home' });
+    expect(mockEmblaApi.scrollTo).toHaveBeenNthCalledWith(1, 0);
+
+    fireEvent.keyDown(slider, { key: 'End' });
+    expect(mockEmblaApi.scrollTo).toHaveBeenNthCalledWith(2, mockSlides.length - 1);
+  });
+
+  it('provides accessible navigation controls', () => {
+    render(
+      <IntlProvider locale="en">
+        <Slider {...defaultProps} />
+      </IntlProvider>,
+    );
+
+    // Check if navigation buttons are properly labeled
+    expect(screen.getByRole('button', { name: 'Previous slide' })).toHaveAttribute(
+      'aria-label',
+      'Previous slide',
+    );
+    expect(screen.getByRole('button', { name: 'Next slide' })).toHaveAttribute(
+      'aria-label',
+      'Next slide',
+    );
+
+    // Check if slider has proper ARIA attributes
+    const slider = screen.getByRole('button', { name: defaultProps.title });
+    expect(slider).toHaveAttribute('aria-roledescription', 'carousel');
+    const presentation = screen.getByRole('presentation');
+    expect(presentation).toBeInTheDocument();
+    expect(presentation).toHaveAttribute('aria-live', 'polite');
+    expect(presentation).toHaveAttribute('aria-atomic', 'true');
+    expect(presentation).toHaveTextContent(/Slide 1 of 3:.*/);
+  });
+
+  it('renders bullets navigation', () => {
+    render(
+      <IntlProvider locale="en">
+        <Slider {...defaultProps} />
+      </IntlProvider>,
+    );
+
+    const bullets = screen.getAllByRole('tab', { name: /Go to slide [1-3]{1}/ });
+    expect(bullets).toHaveLength(mockSlides.length);
+
+    expect(bullets[0]).toHaveAttribute('aria-selected', 'true');
+    expect(bullets[1]).toHaveAttribute('aria-selected', 'false');
+    expect(bullets[2]).toHaveAttribute('aria-selected', 'false');
+
+    // Click the second bullet
+    fireEvent.click(bullets[1]);
+    expect(mockUseEmblaCarousel()[1]!.scrollTo).toHaveBeenCalledWith(1);
+  });
+});