richie-education 2.33.1-dev1 → 2.33.1-dev10

package/jest/setup.ts

@@ -8,6 +8,13 @@ import { FactoryConfig } from 'utils/test/factories/factories';
 global.Request = Request as any;
 global.Response = Response as any;
 
+// https://github.com/remix-run/react-router/issues/12363#issuecomment-2496226528
+if (!globalThis.TextEncoder || !globalThis.TextDecoder) {
+  const { TextDecoder, TextEncoder } = require('node:util');
+  globalThis.TextEncoder = TextEncoder;
+  globalThis.TextDecoder = TextDecoder;
+}
+
 /*
  * A little trick to prevent so package to be reset when using `jest.resetModules()`.
  * https://github.com/facebook/jest/issues/8987#issuecomment-584898030

package/js/api/lms/joanie.ts

@@ -1,4 +1,4 @@
-import { matchPath, PathMatch } from 'react-router-dom';
+import { matchPath, PathMatch } from 'react-router';
 import JoanieApi from 'api/joanie';
 import { LMSBackend } from 'types/commonDataProps';
 import { APIBackend, APILms } from 'types/api';

package/js/components/AddressesManagement/AddressForm/index.spec.tsx

@@ -153,5 +153,5 @@ describe('AddressForm', () => {
     expect(
       getByText($countryInput.closest('.c__field')!, /This field is required./),
     ).toBeInTheDocument();
-  });
+  }, 15000);
 });

package/js/components/AddressesManagement/index.spec.tsx

@@ -177,7 +177,7 @@ describe('AddressesManagement', () => {
       ...address,
       is_main: true,
     });
-  }, 10000);
+  }, 15000);
 
   it('renders a form to edit an address when user selects an address to edit', async () => {
     const address = AddressFactory().one();

package/js/components/ContractFrame/AbstractContractFrame.spec.tsx

@@ -169,7 +169,7 @@ describe('<AbstractContractFrame />', () => {
     await user.click(button);
 
     expect(mockOnClose).toHaveBeenCalledTimes(1);
-  });
+  }, 25000);
 
   it('retrieves invitation link but fails during signature checking', async () => {
     const user = userEvent.setup();
@@ -231,7 +231,7 @@ describe('<AbstractContractFrame />', () => {
     await user.click(button);
 
     expect(mockOnClose).toHaveBeenCalledTimes(1);
-  });
+  }, 25000);
 
   it('retrieves invitation link but exceeds polling max attemps', async () => {
     const user = userEvent.setup();

package/js/components/CourseGlimpse/CourseLink.tsx

@@ -1,4 +1,4 @@
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { FunctionComponent, ReactElement } from 'react';
 
 interface CourseLinkProps {

package/js/components/CourseGlimpse/index.spec.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import { CommonDataProps } from 'types/commonDataProps';
 import { RichieContextFactory } from 'utils/test/factories/richie';
 import { CourseStateTextEnum } from 'types';

package/js/components/CourseGlimpse/utils.ts

@@ -1,5 +1,5 @@
 import { IntlShape } from 'react-intl';
-import { generatePath } from 'react-router-dom';
+import { generatePath } from 'react-router';
 import { Course as RichieCourse, isRichieCourse } from 'types/Course';
 import {
   CourseListItem as JoanieCourse,

package/js/components/ProtectedRoute/index.spec.tsx

@@ -1,6 +1,6 @@
 import { screen } from '@testing-library/dom';
 import userEvent from '@testing-library/user-event';
-import { Link, RouteObject } from 'react-router-dom';
+import { Link, RouteObject } from 'react-router';
 import { render } from 'utils/test/render';
 import { RouterWrapper } from 'utils/test/wrappers/RouterWrapper';
 import ProtectedRoute from '.';

package/js/components/ProtectedRoute/index.tsx

@@ -1,4 +1,4 @@
-import { Navigate, Outlet } from 'react-router-dom';
+import { Navigate, Outlet } from 'react-router';
 
 interface ProtectedRouteProps {
   isAllowed: boolean;

package/js/components/SaleTunnel/AddressSelector/index.spec.tsx

@@ -133,7 +133,7 @@ describe('AddressSelector', () => {
         'Billing address' + getAddressLabel(address) + 'closearrow_drop_down',
       );
     });
-  });
+  }, 15000);
   it('has an existing main billing address and choose another', async () => {
     const address = AddressFactory({
       is_main: true,
@@ -268,5 +268,5 @@ describe('AddressSelector', () => {
         'Billing address' + getAddressLabel(newAddress) + 'closearrow_drop_down',
       ),
     );
-  });
+  }, 15000);
 });

package/js/components/SaleTunnel/SaleTunnelSuccess/index.tsx

@@ -1,6 +1,6 @@
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Button } from '@openfun/cunningham-react';
-import { generatePath } from 'react-router-dom';
+import { generatePath } from 'react-router';
 import { SuccessIcon } from 'components/SuccessIcon';
 import { getDashboardBasename } from 'widgets/Dashboard/hooks/useDashboardRouter/getDashboardBasename';
 import { useSaleTunnelContext } from 'components/SaleTunnel/GenericSaleTunnel';

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

@@ -381,5 +381,5 @@ describe('SaleTunnel', () => {
     // This way we make sure the cache is updated.
     await screen.findByText('Purchased');
     expect(screen.queryByRole('button', { name: product.call_to_action })).not.toBeInTheDocument();
-  }, 10000);
+  }, 15000);
 });

package/js/components/SignContractButton/index.omniscientOrders.spec.tsx

@@ -1,7 +1,7 @@
 import { PropsWithChildren } from 'react';
 import { render, screen, within } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import userEvent from '@testing-library/user-event';
 import { QueryClientProvider } from '@tanstack/react-query';
 import fetchMock from 'fetch-mock';

package/js/components/SignContractButton/index.spec.tsx

@@ -1,7 +1,7 @@
 import { PropsWithChildren } from 'react';
 import { render, screen } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import userEvent from '@testing-library/user-event';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { faker } from '@faker-js/faker';

package/js/components/SignContractButton/index.tsx

@@ -1,7 +1,7 @@
 import { Button } from '@openfun/cunningham-react';
 import { FormattedMessage, defineMessages } from 'react-intl';
 import { useState } from 'react';
-import { generatePath } from 'react-router-dom';
+import { generatePath } from 'react-router';
 import { LearnerContractFrame } from 'components/ContractFrame';
 import {
   Contract,

package/js/components/Tabs/index.tsx

@@ -9,7 +9,7 @@ import {
   cloneElement,
   useState,
 } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import { noop } from 'utils';
 
 interface TabProps extends PropsWithChildren {

package/js/hooks/useCourseProductUnion/index.spec.tsx

@@ -82,7 +82,7 @@ describe('useCourseProductUnion', () => {
       `${coursesUrl}?has_listed_course_runs=true&page=1&page_size=${PER_PAGE}`,
     );
     expect(calledUrls).toContain(`${courseProductRelationsUrl}?page=1&page_size=${PER_PAGE}`);
-  });
+  }, 25000);
 
   it('should call organization courses and organization coursesProductRelation endpoints', async () => {
     const organizationId = 'DUMMY_ORGANIZATION_ID';

package/js/hooks/useDefaultOrganizationId/index.tsx

@@ -1,4 +1,4 @@
-import { useParams, useSearchParams } from 'react-router-dom';
+import { useParams, useSearchParams } from 'react-router';
 import { useOrganizations } from 'hooks/useOrganizations';
 import { CourseProductRelation, Organization } from 'types/Joanie';
 

package/js/hooks/useLearnerCoursesSearch/index.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 import { Enrollment, CredentialOrder, OrderState, ProductType } from 'types/Joanie';
 import { Maybe, Nullable } from 'types/utils';
 import { useOrdersEnrollments } from 'pages/DashboardCourses/useOrdersEnrollments';

package/js/hooks/useTeacherCoursesSearch/index.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { useParams, useSearchParams } from 'react-router-dom';
+import { useParams, useSearchParams } from 'react-router';
 import { useCourseProductUnion } from 'hooks/useCourseProductUnion';
 import { CourseListItem, CourseProductRelationLight, ProductType } from 'types/Joanie';
 import { Maybe, Nullable } from 'types/utils';

package/js/pages/DashboardAddressesManagement/DashboardCreateAddress.spec.tsx

@@ -170,7 +170,7 @@ describe('<DashboardCreateAddress/>', () => {
     await waitFor(() => {
       expect(screen.getByText('Billing addresses')).toBeInTheDocument();
     });
-  });
+  }, 15000);
 
   it('shows an error in case of API error', async () => {
     fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', []);
@@ -210,5 +210,5 @@ describe('<DashboardCreateAddress/>', () => {
     ).toBe(true);
 
     await expectBannerError('An error occurred while creating the address. Please retry later.');
-  });
+  }, 15000);
 });

package/js/pages/DashboardAddressesManagement/DashboardEditAddressLoader.tsx

@@ -1,4 +1,4 @@
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 import Banner, { BannerType } from 'components/Banner';
 import { Spinner } from 'components/Spinner';
 import { useAddress } from 'hooks/useAddresses';

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

@@ -231,7 +231,7 @@ describe('<DashboardCourses/>', () => {
     await waitFor(() => expectList(entities.slice(0, perPage * 3), relations), { timeout: 30000 });
     loadMoreButton = await screen.findByRole('button', { name: 'Load more' });
     expect(loadMoreButton).toBeEnabled();
-  });
+  }, 15000);
 
   it('shows an error', async () => {
     jest.spyOn(console, 'error').mockImplementation(noop);

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

@@ -1,7 +1,7 @@
 import { getByText, queryByText, screen, waitFor } from '@testing-library/react';
 import fetchMock from 'fetch-mock';
 import userEvent from '@testing-library/user-event';
-import { Outlet, generatePath } from 'react-router-dom';
+import { Outlet, generatePath } from 'react-router';
 import {
   UserFactory,
   RichieContextFactory as mockRichieContextFactory,
@@ -267,7 +267,7 @@ describe('<DahsboardEditCreditCard/>', () => {
     );
 
     // Redirected to the list route.
-    screen.getByText('Credit cards');
+    await screen.findByText('Credit cards');
     const creditCardsContainers = await screen.findAllByTestId(/dashboard-credit-card__/);
     expect(creditCardsContainers.length).toEqual(6);
 
@@ -333,7 +333,7 @@ describe('<DahsboardEditCreditCard/>', () => {
     expect(screen.queryByText('An error occurred', { exact: false })).toBeNull();
 
     // Redirected to the list route.
-    screen.getByText('Credit cards');
+    await screen.findByText('Credit cards');
 
     await waitFor(() => {
       // Assert that other credit cards appear in the list.

package/js/pages/DashboardCreditCardsManagement/DashboardEditCreditCardLoader.tsx

@@ -1,4 +1,4 @@
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 import { useDashboardNavigate } from 'widgets/Dashboard/hooks/useDashboardRouter';
 import { useCreditCard } from 'hooks/useCreditCards';
 import { Spinner } from 'components/Spinner';

package/js/pages/DashboardOrderLayout/index.tsx

@@ -1,4 +1,4 @@
-import { generatePath, Outlet, useParams } from 'react-router-dom';
+import { generatePath, Outlet, useParams } from 'react-router';
 import { useIntl } from 'react-intl';
 import { useMemo } from 'react';
 import { getDashboardRouteLabel } from 'widgets/Dashboard/utils/dashboardRoutes';

package/js/pages/TeacherDashboardContractsLayout/TeacherDashboardContracts/index.tsx

@@ -2,7 +2,7 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import { DataGrid, usePagination } from '@openfun/cunningham-react';
 import { useEffect, useMemo } from 'react';
-import { useParams, useSearchParams } from 'react-router-dom';
+import { useParams, useSearchParams } from 'react-router';
 import { ContractHelper, ContractStatePoV } from 'utils/ContractHelper';
 import { useOrganizationContracts } from 'hooks/useContracts';
 import Banner, { BannerType } from 'components/Banner';

package/js/pages/TeacherDashboardContractsLayout/hooks/useTeacherContractFilters/index.spec.tsx

@@ -3,7 +3,7 @@ import { PropsWithChildren } from 'react';
 import { IntlProvider } from 'react-intl';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { renderHook, waitFor, act } from '@testing-library/react';
-import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { MemoryRouter, Route, Routes } from 'react-router';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import JoanieSessionProvider from 'contexts/SessionContext/JoanieSessionProvider';

package/js/pages/TeacherDashboardContractsLayout/hooks/useTeacherContractFilters/index.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
-import { useParams, useSearchParams } from 'react-router-dom';
+import { useParams, useSearchParams } from 'react-router';
 import useDefaultOrganizationId from 'hooks/useDefaultOrganizationId';
 import { ContractResourceQuery, ContractState } from 'types/Joanie';
 

package/js/pages/TeacherDashboardCourseLearnersLayout/hooks/useCourseLearnersFilters/index.ts

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
-import { useParams, useSearchParams } from 'react-router-dom';
+import { useParams, useSearchParams } from 'react-router';
 import useDefaultOrganizationId from 'hooks/useDefaultOrganizationId';
 import {
   CourseListItem,

package/js/pages/TeacherDashboardCourseLearnersLayout/index.tsx

@@ -1,6 +1,6 @@
 import { FormattedMessage, defineMessages } from 'react-intl';
 
-import { useParams, useSearchParams } from 'react-router-dom';
+import { useParams, useSearchParams } from 'react-router';
 import { SortModel, usePagination } from '@openfun/cunningham-react';
 import { useEffect, useMemo, useState } from 'react';
 import { TeacherDashboardCourseSidebar } from 'widgets/Dashboard/components/TeacherDashboardCourseSidebar';

package/js/pages/TeacherDashboardCourseLoader/CourseRunList/index.spec.tsx

@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 import { CunninghamProvider } from '@openfun/cunningham-react';
 import { capitalize } from 'lodash-es';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import { CourseRunFactory } from 'utils/test/factories/joanie';
 import CourseRunList from '.';
 

package/js/pages/TeacherDashboardCourseLoader/CourseRunList/utils.spec.tsx

@@ -1,7 +1,7 @@
 import { IntlProvider, createIntl } from 'react-intl';
 import { render, screen } from '@testing-library/react';
 import { capitalize } from 'lodash-es';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import { CourseRunFactory } from 'utils/test/factories/joanie';
 import { buildCourseRunData, messages } from './utils';
 

package/js/pages/TeacherDashboardCourseLoader/index.tsx

@@ -1,5 +1,5 @@
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 
 import { capitalize } from 'lodash-es';
 import { DashboardLayout } from 'widgets/Dashboard/components/DashboardLayout';

package/js/pages/TeacherDashboardOrganizationCourseLoader/index.tsx

@@ -1,5 +1,5 @@
 import { defineMessages, FormattedMessage } from 'react-intl';
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 import { Spinner } from 'components/Spinner';
 import { DashboardLayout } from 'widgets/Dashboard/components/DashboardLayout';
 import { TeacherDashboardOrganizationSidebar } from 'widgets/Dashboard/components/TeacherDashboardOrganizationSidebar';

package/js/pages/TeacherDashboardTraining/TeacherDashboardTrainingLoader.tsx

@@ -1,5 +1,5 @@
 import { FormattedMessage, defineMessages } from 'react-intl';
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 
 import { DashboardLayout } from 'widgets/Dashboard/components/DashboardLayout';
 import { TeacherDashboardCourseSidebar } from 'widgets/Dashboard/components/TeacherDashboardCourseSidebar';

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

@@ -1,4 +1,4 @@
-import { createMemoryRouter, RouterProvider } from 'react-router-dom';
+import { createMemoryRouter, RouterProvider } from 'react-router';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { render, screen } from '@testing-library/react';
 import fetchMock from 'fetch-mock';

package/js/utils/test/LocationDisplay.tsx

@@ -1,4 +1,4 @@
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 
 const LocationDisplay = () => {
   const location = useLocation();

package/js/utils/test/render.tsx

@@ -27,7 +27,7 @@ type RenderFunction = (
  * the same contexts.
  *
  * The provided {@param element} is to be wrapped in :
- * - react router (react-router-dom)
+ * - react router (react-router)
  * - react i18n context (react-intl)
  * - query context (react-query)
  *

package/js/utils/test/wrappers/RouterWrapper.tsx

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
-import { RouteObject, RouterProvider, createMemoryRouter } from 'react-router-dom';
+import { RouteObject, RouterProvider, createMemoryRouter } from 'react-router';
 import { Maybe } from 'types/utils';
 
 export interface RouterWrapperProps extends PropsWithChildren {

package/js/widgets/Dashboard/components/DashboardBreadcrumbs/index.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { createMemoryRouter, Outlet, RouteObject, RouterProvider } from 'react-router-dom';
+import { createMemoryRouter, Outlet, RouteObject, RouterProvider } from 'react-router';
 import { defineMessages } from 'react-intl';
 import { DashboardBreadcrumbsProvider } from 'widgets/Dashboard/contexts/DashboardBreadcrumbsContext';
 import { useBreadcrumbsPlaceholders } from 'hooks/useBreadcrumbsPlaceholders';

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

@@ -1,5 +1,5 @@
 import { useContext, useMemo } from 'react';
-import { useMatches } from 'react-router-dom';
+import { useMatches } from 'react-router';
 import { defineMessages, FormattedMessage, MessageDescriptor, useIntl } from 'react-intl';
 import { IntlHelper } from 'utils/IntlHelper';
 import { DashboardBreadcrumbsContext } from 'widgets/Dashboard/contexts/DashboardBreadcrumbsContext';

package/js/widgets/Dashboard/components/DashboardItem/CourseEnrolling/index.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { createMemoryRouter, RouterProvider } from 'react-router-dom';
+import { createMemoryRouter, RouterProvider } from 'react-router';
 import { faker } from '@faker-js/faker';
 import { TargetCourseFactory } from 'utils/test/factories/joanie';
 import { StorybookHelper } from 'utils/StorybookHelper';

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

@@ -1,5 +1,5 @@
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
-import { generatePath } from 'react-router-dom';
+import { generatePath } from 'react-router';
 import { CredentialOrder, OrderState } from 'types/Joanie';
 import { Icon, IconTypeEnum } from 'components/Icon';
 import { CoursesHelper } from 'utils/CoursesHelper';

package/js/widgets/Dashboard/components/DashboardItem/Order/DashboardItemOrderReadonly.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { createMemoryRouter, RouterProvider } from 'react-router-dom';
+import { createMemoryRouter, RouterProvider } from 'react-router';
 import { CredentialOrder, OrderState, Product, TargetCourse } from 'types/Joanie';
 import {
   CredentialOrderFactory,

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

@@ -1,5 +1,5 @@
 import { PropsWithChildren, ReactNode } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import c from 'classnames';
 import { LearnerDashboardSidebar } from 'widgets/Dashboard/components/LearnerDashboardSidebar';
 import { DashboardBreadcrumbs } from 'widgets/Dashboard/components/DashboardBreadcrumbs';

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

@@ -1,4 +1,4 @@
-import { Outlet, useMatches } from 'react-router-dom';
+import { Outlet, useMatches } from 'react-router';
 import { DashboardRouteHandle } from 'widgets/Dashboard/hooks/useDashboardRouter';
 import { DashboardLayout } from 'widgets/Dashboard/components/DashboardLayout';
 import { DashboardBreadcrumbsProvider } from 'widgets/Dashboard/contexts/DashboardBreadcrumbsContext';

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

@@ -1,4 +1,4 @@
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useMemo } from 'react';
 import { useOmniscientOrder } from 'hooks/useOrders';

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

@@ -1,4 +1,4 @@
-import { createSearchParams } from 'react-router-dom';
+import { createSearchParams } from 'react-router';
 import { useMemo } from 'react';
 import { MenuLink } from 'widgets/Dashboard/components/DashboardSidebar';
 import { ContractState, CourseProductRelation, Organization } from 'types/Joanie';

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

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { NavLink, useLocation } from 'react-router-dom';
+import { NavLink, useLocation } from 'react-router';
 import Badge from 'components/Badge';
 import { MenuLink } from '../..';
 import { isMenuLinkActive } from '../../utils';

package/js/widgets/Dashboard/components/DashboardSidebar/components/NavigationSelect.tsx

@@ -1,7 +1,7 @@
 import { Select, SelectHandle } from '@openfun/cunningham-react';
 import { useMemo, useRef } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-import { matchPath, useLocation, useNavigate } from 'react-router-dom';
+import { matchPath, useLocation, useNavigate } from 'react-router';
 import { MenuLink } from 'widgets/Dashboard/components/DashboardSidebar';
 
 const messages = defineMessages({

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

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { createMemoryRouter, RouterProvider } from 'react-router-dom';
+import { createMemoryRouter, RouterProvider } from 'react-router';
 import { UserFactory } from 'utils/test/factories/richie';
 import { StorybookHelper } from 'utils/StorybookHelper';
 import MenuNavLink from './components/MenuNavLink';

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

@@ -1,4 +1,4 @@
-import { Location, matchPath, resolvePath } from 'react-router-dom';
+import { Location, matchPath, resolvePath } from 'react-router';
 
 export const isMenuLinkActive = (to: string, location: Location) => {
   const path = resolvePath(to).pathname;

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

@@ -1,4 +1,4 @@
-import { createMemoryRouter } from 'react-router-dom';
+import { createMemoryRouter } from 'react-router';
 import Dashboard from 'widgets/Dashboard';
 import { getDashboardRoutes } from 'widgets/Dashboard/utils/dashboardRoutes';
 

package/js/widgets/Dashboard/components/LearnerDashboardSidebar/index.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { createMemoryRouter, RouterProvider } from 'react-router-dom';
+import { createMemoryRouter, RouterProvider } from 'react-router';
 import { UserFactory } from 'utils/test/factories/richie';
 import { LearnerDashboardSidebar } from 'widgets/Dashboard/components/LearnerDashboardSidebar';
 import { StorybookHelper } from 'utils/StorybookHelper';

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

@@ -1,6 +1,6 @@
 import { defineMessages, useIntl } from 'react-intl';
 import { useMemo } from 'react';
-import { generatePath } from 'react-router-dom';
+import { generatePath } from 'react-router';
 import { getDashboardRouteLabel } from 'widgets/Dashboard/utils/dashboardRoutes';
 import {
   DashboardSidebar,

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

@@ -1,5 +1,5 @@
 import { screen } from '@testing-library/react';
-import { Outlet } from 'react-router-dom';
+import { Outlet } from 'react-router';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
 import LocationDisplay from 'utils/test/LocationDisplay';
 import { render } from 'utils/test/render';

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

@@ -1,4 +1,4 @@
-import { generatePath, Navigate, NavigateProps, useParams } from 'react-router-dom';
+import { generatePath, Navigate, NavigateProps, useParams } from 'react-router';
 
 interface NavigateWithParamsProps extends NavigateProps {
   to: string;

package/js/widgets/Dashboard/components/ProtectedOutlet/ProtectedOutlet.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { Outlet } from 'react-router-dom';
+import { Outlet } from 'react-router';
 import { location } from 'utils/indirection/window';
 
 export interface ProtectedOutletProps {

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

@@ -1,4 +1,4 @@
-import { RouteObject } from 'react-router-dom';
+import { RouteObject } from 'react-router';
 import { act, fireEvent, screen } from '@testing-library/react';
 import { location } from 'utils/indirection/window';
 import { render } from 'utils/test/render';

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

@@ -1,5 +1,5 @@
 import { MouseEvent, useRef } from 'react';
-import { useHref, useNavigate } from 'react-router-dom';
+import { useHref, useNavigate } from 'react-router';
 import { Button, ButtonProps } from '@openfun/cunningham-react';
 import { location } from 'utils/indirection/window';
 import isTestEnv from 'utils/test/isTestEnv';

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

@@ -1,7 +1,7 @@
 import { Button, Input } from '@openfun/cunningham-react';
 import { MouseEvent, PropsWithChildren, useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 import { Nullable } from 'types/utils';
 
 const messages = defineMessages({

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

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import { FormattedMessage, defineMessages } from 'react-intl';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 
 const messages = defineMessages({
   searchCountText: {

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

@@ -1,7 +1,7 @@
 import fetchMock from 'fetch-mock';
 import { screen } from '@testing-library/react';
 import { createIntl } from 'react-intl';
-import { generatePath } from 'react-router-dom';
+import { generatePath } from 'react-router';
 import { CourseListItem } from 'types/Joanie';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
 import {

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

@@ -1,5 +1,5 @@
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
-import { generatePath, useParams } from 'react-router-dom';
+import { generatePath, useParams } from 'react-router';
 import { useMemo } from 'react';
 import { capitalize } from 'lodash-es';
 import { DashboardSidebar, MenuLink } from 'widgets/Dashboard/components/DashboardSidebar';

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

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { createMemoryRouter, RouterProvider } from 'react-router-dom';
+import { createMemoryRouter, RouterProvider } from 'react-router';
 import fetchMock from 'fetch-mock';
 import { UserFactory } from 'utils/test/factories/richie';
 import { TeacherDashboardOrganizationSidebar } from 'widgets/Dashboard/components/TeacherDashboardOrganizationSidebar';

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

@@ -1,5 +1,5 @@
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
-import { generatePath, useParams } from 'react-router-dom';
+import { generatePath, useParams } from 'react-router';
 import { Spinner } from 'components/Spinner';
 import { useOrganization } from 'hooks/useOrganizations';
 import { DashboardSidebar, MenuLink } from 'widgets/Dashboard/components/DashboardSidebar';

package/js/widgets/Dashboard/components/TeacherDashboardProfileSidebar/components/OrganizationLinks/index.tsx

@@ -1,5 +1,5 @@
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
-import { generatePath, Link } from 'react-router-dom';
+import { generatePath, Link } from 'react-router';
 import { Organization } from 'types/Joanie';
 import { StringHelper } from 'utils/StringHelper';
 

package/js/widgets/Dashboard/components/TeacherDashboardProfileSidebar/index.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { createMemoryRouter, RouterProvider } from 'react-router-dom';
+import { createMemoryRouter, RouterProvider } from 'react-router';
 import { UserFactory } from 'utils/test/factories/richie';
 import { TeacherDashboardProfileSidebar } from 'widgets/Dashboard/components/TeacherDashboardProfileSidebar';
 import { StorybookHelper } from 'utils/StorybookHelper';

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

@@ -1,6 +1,6 @@
 import { defineMessages, useIntl } from 'react-intl';
 import { useMemo } from 'react';
-import { generatePath } from 'react-router-dom';
+import { generatePath } from 'react-router';
 import { DashboardSidebar } from 'widgets/Dashboard/components/DashboardSidebar';
 import { getDashboardRouteLabel } from 'widgets/Dashboard/utils/dashboardRoutes';
 import { useSession } from 'contexts/SessionContext';

package/js/widgets/Dashboard/hooks/useDashboardRouter/index.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { MessageDescriptor, useIntl } from 'react-intl';
-import { createBrowserRouter, generatePath, NavigateOptions, useNavigate } from 'react-router-dom';
+import { createBrowserRouter, generatePath, NavigateOptions, useNavigate } from 'react-router';
 import { getDashboardRoutes } from 'widgets/Dashboard/utils/dashboardRoutes';
 import { TeacherDashboardPaths } from 'widgets/Dashboard/utils/teacherDashboardPaths';
 import { LearnerDashboardPaths } from 'widgets/Dashboard/utils/learnerRoutesPaths';

package/js/widgets/Dashboard/hooks/useRouteInfo/index.ts

@@ -1,4 +1,4 @@
-import { useLocation, useMatches } from 'react-router-dom';
+import { useLocation, useMatches } from 'react-router';
 
 /**
  * Retrieve route information

package/js/widgets/Dashboard/index.tsx

@@ -1,4 +1,4 @@
-import { RouterProvider, RouterProviderProps } from 'react-router-dom';
+import { RouterProvider, RouterProviderProps } from 'react-router';
 import { useEffect } from 'react';
 import { location } from 'utils/indirection/window';
 import { useSession } from 'contexts/SessionContext';

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

@@ -4,7 +4,7 @@ import type {
   Options as IntlMessageFormatOptions,
   PrimitiveType,
 } from 'intl-messageformat';
-import { generatePath, Navigate, RouteObject } from 'react-router-dom';
+import { generatePath, Navigate, RouteObject } from 'react-router';
 import DashboardPageNotFound from 'pages/DashboardPageNotFound';
 import { DashboardLayoutRoute } from 'widgets/Dashboard/components/DashboardLayoutRoute';
 import { getLearnerDashboardRoutes } from 'widgets/Dashboard/utils/learnerRoutes';

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

@@ -1,5 +1,5 @@
 import { MessageDescriptor, useIntl } from 'react-intl';
-import { Navigate, Outlet, RouteObject } from 'react-router-dom';
+import { Navigate, Outlet, RouteObject } from 'react-router';
 import RouteInfo from 'widgets/Dashboard/components/RouteInfo';
 import { DashboardCreateAddressLoader } from 'pages/DashboardAddressesManagement/DashboardCreateAddressLoader';
 import { DashboardEditAddressLoader } from 'pages/DashboardAddressesManagement/DashboardEditAddressLoader';

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

@@ -1,4 +1,4 @@
-import { Navigate, RouteObject } from 'react-router-dom';
+import { Navigate, RouteObject } from 'react-router';
 import {
   TeacherDashboardCourseContractsLayout,
   TeacherDashboardOrganizationContractsLayout,

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
-import { generatePath } from 'react-router-dom';
+import { generatePath } from 'react-router';
 import { CourseRun } from 'types';
 import useCourseEnrollment from 'widgets/SyllabusCourseRunsList/hooks/useCourseEnrollment';
 import CourseRunItem from 'widgets/SyllabusCourseRunsList/components/CourseRunItem';

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

@@ -11,6 +11,16 @@ import CourseRunEnrollment from '../CourseRunEnrollment';
 import CourseProductItem from '../CourseProductItem';
 
 const messages = defineMessages({
+  enrollNow: {
+    id: 'components.SyllabusCourseRun.enrollNow',
+    description: 'CTA for users to enroll on ongoing of future open course.',
+    defaultMessage: 'Enroll now',
+  },
+  studyNow: {
+    id: 'components.SyllabusCourseRun.studyNow',
+    description: 'CTA for users to enroll on archived course.',
+    defaultMessage: 'Study now',
+  },
   enrollment: {
     id: 'components.SyllabusCourseRun.enrollment',
     description: 'Title of the enrollment dates section of an opened course run block',
@@ -94,7 +104,12 @@ const OpenedCourseRun = ({
         <CourseRunEnrollment courseRun={courseRun} />
       ) : (
         <Button className="course-run-enrollment__cta" href={courseRun.resource_link} fullWidth>
-          {StringHelper.capitalizeFirst(courseRun.state.call_to_action)}
+          {courseRun.state.call_to_action === 'enroll now' ? (
+            <FormattedMessage {...messages.enrollNow} />
+          ) : null}
+          {courseRun.state.call_to_action === 'study now' ? (
+            <FormattedMessage {...messages.studyNow} />
+          ) : null}
         </Button>
       )}
     </>

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

@@ -11,6 +11,16 @@ import CourseRunEnrollment from '../CourseRunEnrollment';
 import CourseProductItem from '../CourseProductItem';
 
 const messages = defineMessages({
+  enrollNow: {
+    id: 'components.SyllabusCourseRunCompacted.enrollNow',
+    description: 'CTA for users to enroll on ongoing of future open course.',
+    defaultMessage: 'Enroll now',
+  },
+  studyNow: {
+    id: 'components.SyllabusCourseRunCompacted.studyNow',
+    description: 'CTA for users to enroll on archived course.',
+    defaultMessage: 'Study now',
+  },
   course: {
     id: 'components.SyllabusCourseRunCompacted.course',
     description: 'Title of the course dates section of an opened course run block',
@@ -78,7 +88,12 @@ const OpenedSelfPacedCourseRun = ({
         <CourseRunEnrollment courseRun={courseRun} />
       ) : (
         <Button className="course-run-enrollment__cta" href={courseRun.resource_link} fullWidth>
-          {StringHelper.capitalizeFirst(courseRun.state.call_to_action)}
+          {courseRun.state.call_to_action === 'enroll now' ? (
+            <FormattedMessage {...messages.enrollNow} />
+          ) : null}
+          {courseRun.state.call_to_action === 'study now' ? (
+            <FormattedMessage {...messages.studyNow} />
+          ) : null}
         </Button>
       )}
     </>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "2.33.1-dev1",
+  "version": "2.33.1-dev10",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {
@@ -44,29 +44,29 @@
     "@babel/preset-env": "7.26.0",
     "@babel/preset-react": "7.25.9",
     "@babel/preset-typescript": "7.26.0",
-    "@faker-js/faker": "9.1.0",
-    "@formatjs/cli": "6.3.5",
-    "@formatjs/intl-relativetimeformat": "11.4.1",
-    "@hookform/resolvers": "3.9.0",
+    "@faker-js/faker": "9.2.0",
+    "@formatjs/cli": "6.3.11",
+    "@formatjs/intl-relativetimeformat": "11.4.5",
+    "@hookform/resolvers": "3.9.1",
     "@lyracom/embedded-form-glue": "1.4.2",
     "@openfun/cunningham-react": "2.9.4",
     "@openfun/cunningham-tokens": "2.1.1",
-    "@sentry/browser": "8.35.0",
-    "@sentry/types": "8.35.0",
-    "@storybook/addon-actions": "8.3.6",
-    "@storybook/addon-essentials": "8.3.6",
-    "@storybook/addon-interactions": "8.3.6",
-    "@storybook/addon-links": "8.3.6",
-    "@storybook/react": "8.3.6",
-    "@storybook/react-webpack5": "8.3.6",
-    "@storybook/test": "8.3.6",
-    "@tanstack/query-core": "5.59.16",
-    "@tanstack/query-sync-storage-persister": "5.59.16",
-    "@tanstack/react-query": "5.59.16",
-    "@tanstack/react-query-devtools": "5.59.16",
-    "@tanstack/react-query-persist-client": "5.59.16",
+    "@sentry/browser": "8.42.0",
+    "@sentry/types": "8.42.0",
+    "@storybook/addon-actions": "8.4.6",
+    "@storybook/addon-essentials": "8.4.6",
+    "@storybook/addon-interactions": "8.4.6",
+    "@storybook/addon-links": "8.4.6",
+    "@storybook/react": "8.4.6",
+    "@storybook/react-webpack5": "8.4.6",
+    "@storybook/test": "8.4.6",
+    "@tanstack/query-core": "5.62.1",
+    "@tanstack/query-sync-storage-persister": "5.62.1",
+    "@tanstack/react-query": "5.62.1",
+    "@tanstack/react-query-devtools": "5.62.1",
+    "@tanstack/react-query-persist-client": "5.62.1",
     "@testing-library/dom": "10.4.0",
-    "@testing-library/jest-dom": "6.6.2",
+    "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.0.1",
     "@testing-library/user-event": "14.5.2",
     "@types/fetch-mock": "7.3.8",
@@ -74,21 +74,21 @@
     "@types/jest": "29.5.14",
     "@types/js-cookie": "3.0.6",
     "@types/lodash-es": "4.17.12",
-    "@types/node-fetch": "2.6.11",
+    "@types/node-fetch": "2.6.12",
     "@types/query-string": "6.3.0",
     "@types/react": "18.3.12",
     "@types/react-autosuggest": "10.1.11",
     "@types/react-dom": "18.3.1",
     "@types/react-modal": "3.16.3",
-    "@typescript-eslint/eslint-plugin": "8.11.0",
-    "@typescript-eslint/parser": "8.11.0",
+    "@typescript-eslint/eslint-plugin": "8.17.0",
+    "@typescript-eslint/parser": "8.17.0",
     "babel-jest": "29.7.0",
     "babel-loader": "9.2.1",
     "babel-plugin-react-intl": "8.2.25",
     "bootstrap": ">=4.6.0 <5",
     "classnames": "2.5.1",
     "cljs-merge": "1.1.1",
-    "core-js": "3.38.1",
+    "core-js": "3.39.0",
     "downshift": "9.0.8",
     "eslint": ">=8.57.0 <9",
     "eslint-config-airbnb": "19.0.4",
@@ -96,17 +96,17 @@
     "eslint-config-prettier": "9.1.0",
     "eslint-import-resolver-webpack": "0.13.9",
     "eslint-plugin-compat": "6.0.1",
-    "eslint-plugin-formatjs": "5.1.5",
+    "eslint-plugin-formatjs": "5.2.5",
     "eslint-plugin-import": "2.31.0",
     "eslint-plugin-jsx-a11y": "6.10.2",
     "eslint-plugin-prettier": "5.2.1",
     "eslint-plugin-react": "7.37.2",
     "eslint-plugin-react-hooks": "5.0.0",
-    "eslint-plugin-storybook": "0.10.1",
+    "eslint-plugin-storybook": "0.11.1",
     "fetch-mock": "<10",
     "file-loader": "6.2.0",
     "glob": "11.0.0",
-    "i18n-iso-countries": "7.12.0",
+    "i18n-iso-countries": "7.13.0",
     "iframe-resizer": "<5",
     "intl-pluralrules": "2.0.1",
     "jest": "29.7.0",
@@ -114,25 +114,25 @@
     "js-cookie": "3.0.5",
     "lodash-es": "4.17.21",
     "mdn-polyfills": "5.20.0",
-    "msw": "2.5.2",
+    "msw": "2.6.6",
     "node-fetch": ">2.6.6 <3",
     "nodemon": "3.1.7",
-    "prettier": "3.3.3",
+    "prettier": "3.4.1",
     "query-string": "9.1.1",
     "react": "18.3.1",
     "react-autosuggest": "10.1.0",
     "react-dom": "18.3.1",
-    "react-hook-form": "7.53.1",
-    "react-intl": "6.8.4",
+    "react-hook-form": "7.53.2",
+    "react-intl": "7.0.1",
     "react-modal": "3.16.1",
-    "react-router-dom": "6.27.0",
-    "sass": "1.80.4",
+    "react-router": "7.0.1",
+    "sass": "1.81.0",
     "source-map-loader": "5.0.0",
-    "storybook": "8.3.6",
-    "tsconfig-paths-webpack-plugin": "4.1.0",
-    "typescript": "5.6.3",
-    "uuid": "11.0.2",
-    "webpack": "5.96.0",
+    "storybook": "8.4.6",
+    "tsconfig-paths-webpack-plugin": "4.2.0",
+    "typescript": "5.7.2",
+    "uuid": "11.0.3",
+    "webpack": "5.96.1",
     "webpack-cli": "5.1.4",
     "whatwg-fetch": "3.6.20",
     "xhr-mock": "2.5.1",
@@ -152,7 +152,7 @@
     "yarn": "1.22.22"
   },
   "devDependencies": {
-    "@storybook/addon-mdx-gfm": "8.3.6",
+    "@storybook/addon-mdx-gfm": "8.4.6",
     "@storybook/addon-webpack5-compiler-babel": "3.0.3"
   }
 }

package/scss/components/_header.scss

@@ -208,6 +208,11 @@
       @include sv-flex(0, 0, auto);
     }
 
+    // Define color variable for default item color on hover then available variants
+    @if r-theme-val(topbar, item-hover-color) {
+      --r--menu--item--hover--color: #{r-theme-val(topbar, item-hover-color)};
+    }
+
     & > a {
       @include sv-flex(1, 0, 100%);
       display: flex;
@@ -228,6 +233,7 @@
         @include media-breakpoint-up($r-topbar-breakpoint) {
           position: relative;
 
+          // If there is no default hover color we assume there is also no variant
           @if r-theme-val(topbar, item-hover-color) {
             &::after {
               content: '';
@@ -236,7 +242,7 @@
               left: 0;
               right: 0;
               height: 8px;
-              background-color: r-theme-val(topbar, item-hover-color);
+              background-color: var(--r--menu--item--hover--color);
               border-top-left-radius: 0.2rem;
               border-top-right-radius: 0.2rem;
             }

package/webpack.config.js

@@ -99,7 +99,16 @@ module.exports = (env) => {
           },
         },
         // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
-        { enforce: 'pre', test: /\.js$/, loader: 'source-map-loader' },
+        {
+          enforce: 'pre',
+          test: /\.js$/,
+          loader: 'source-map-loader',
+          options: {
+            filterSourceMappingUrl: (url, resourcePath) => {
+              return !/@formatjs\/fast-memoize/i.test(resourcePath);
+            },
+          },
+        },
       ],
     },