richie-education 3.5.2-dev12 → 3.5.2-dev18

package/.nvmrc

@@ -1 +1 @@
-20.11.0
+24.21.0

package/.storybook/main.js

@@ -12,7 +12,7 @@ export default {
   stories: ['../stories/**/*.stories.@(js|jsx|ts|tsx)', '../js/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     getAbsolutePath('@storybook/addon-links'),
-    getAbsolutePath('@storybook/addon-webpack5-compiler-babel'),
+    getAbsolutePath('@storybook/addon-webpack5-compiler-swc'),
   ],
   framework: {
     name: getAbsolutePath('@storybook/react-webpack5'),

package/babel.config.js

@@ -1,23 +1,33 @@
 module.exports = {
   plugins: [
     [
-      'react-intl',
+      'polyfill-corejs3',
       {
-        ast: true,
-        extractFromFormatMessageCall: true,
-        idInterpolationPattern: '[sha512:contenthash:base64:6]',
+        method: 'usage-global',
+        version: require('core-js/package.json').version,
       },
     ],
-    ['@babel/plugin-syntax-dynamic-import'],
+  ],
+  overrides: [
+    {
+      exclude: /node_modules/,
+      plugins: [
+        [
+          'formatjs',
+          {
+            ast: true,
+            idInterpolationPattern: '[sha512:contenthash:base64:6]',
+          },
+        ],
+      ],
+    },
   ],
   presets: [
     [
       '@babel/preset-env',
       {
-        corejs: 3,
         forceAllTransforms: true,
         targets: 'last 1 version, >0.2%, IE 11',
-        useBuiltIns: 'usage',
       },
     ],
     [
@@ -26,6 +36,11 @@ module.exports = {
         runtime: 'automatic',
       },
     ],
-    '@babel/preset-typescript',
+    [
+      '@babel/preset-typescript',
+      {
+        onlyRemoveTypeImports: false,
+      },
+    ],
   ],
 };

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

@@ -73,7 +73,7 @@ describe('useCourseProductUnion', () => {
     );
     const { result } = renderUseCourseProductUnion();
     await waitFor(() => expect(result.current.isLoading).toBe(false));
-    expect(result.current.data.length).toBe(PER_PAGE);
+    await waitFor(() => expect(result.current.data.length).toBe(PER_PAGE));
     nbApiCalls += 1; // courses page 1
     nbApiCalls += 1; // offerings page 1
     const calledUrls = fetchMock.calls().map((call) => call[0]);
@@ -103,7 +103,7 @@ describe('useCourseProductUnion', () => {
     );
     const { result } = renderUseCourseProductUnion({ organizationId: 'DUMMY_ORGANIZATION_ID' });
     await waitFor(() => expect(result.current.isLoading).toBe(false));
-    expect(result.current.data.length).toBe(PER_PAGE);
+    await waitFor(() => expect(result.current.data.length).toBe(PER_PAGE));
     nbApiCalls += 1; // courses page 1
     nbApiCalls += 1; // offerings page 1
     const calledUrls = fetchMock.calls().map((call) => call[0]);

package/js/hooks/usePrevious.ts

@@ -6,7 +6,7 @@ import { useEffect, useRef } from 'react';
  *
  * @param value
  */
-const usePrevious = <T>(value: T): T => {
+const usePrevious = <T extends unknown>(value: T): T => {
   const previous = useRef<T>(value);
 
   useEffect(() => {

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

@@ -7,6 +7,7 @@ import {
   queryByText,
   render,
   screen,
+  waitFor,
 } from '@testing-library/react';
 import fetchMock from 'fetch-mock';
 import {
@@ -143,7 +144,7 @@ describe('<DashboardAddressesManagement/>', () => {
     expect(fetchMock.called(deleteUrl)).toBe(true);
 
     // The address does not appear anymore in the list.
-    expect(screen.queryByText(address.title)).toBeNull();
+    await waitFor(() => expect(screen.queryByText(address.title)).toBeNull());
 
     // No error is shown.
     expect(screen.queryByText('An error occurred', { exact: false })).toBeNull();

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

@@ -1,12 +1,14 @@
 import fetchMock from 'fetch-mock';
 import {
   act,
+  findByText,
   fireEvent,
   getByRole,
   getByText,
   queryByRole,
   queryByText,
   screen,
+  waitFor,
 } from '@testing-library/react';
 import { faker } from '@faker-js/faker';
 import {
@@ -229,7 +231,7 @@ describe('<DashboardCreditCardsManagement/>', () => {
     expect(screen.queryByText('An error occurred', { exact: false })).toBeNull();
 
     // The address does not appear anymore in the list.
-    expect(screen.queryByText(creditCard.title!)).toBeNull();
+    await waitFor(() => expect(screen.queryByText(creditCard.title!)).toBeNull());
   });
 
   it('deletes a main credit card', async () => {
@@ -269,7 +271,7 @@ describe('<DashboardCreditCardsManagement/>', () => {
     expect(screen.queryByText('An error occurred', { exact: false })).toBeNull();
 
     // The address does not appear anymore in the list.
-    expect(screen.queryByText(creditCard.title!)).toBeNull();
+    await waitFor(() => expect(screen.queryByText(creditCard.title!)).toBeNull());
   });
 
   it('promotes a credit card', async () => {
@@ -310,7 +312,7 @@ describe('<DashboardCreditCardsManagement/>', () => {
 
     // Assert that "Default credit card" is displayed on the credit card's box.
     creditCardContainer = screen.getByTestId('dashboard-credit-card__' + creditCard.id);
-    getByText(creditCardContainer, 'Default credit card');
+    await findByText(creditCardContainer, 'Default credit card');
 
     // No error is shown.
     expect(screen.queryByText('An error occurred', { exact: false })).toBeNull();

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

@@ -40,7 +40,7 @@ const setUndefinedValues = (obj: any) => {
 };
 
 type Factory<TData> = (override?: Subset<TData>) => FactoryInterface<TData>;
-export const factory = <TData>(builder: FactoryBuilder<TData>): Factory<TData> => {
+export const factory = <TData extends unknown>(builder: FactoryBuilder<TData>): Factory<TData> => {
   const mergeData = (data: TData, override: Subset<TData>): TData => {
     const customizer = (_objValue: any, srcValue: any) => {
       if (Array.isArray(srcValue)) {

package/js/utils/test/mockPaginatedResponse.ts

@@ -1,6 +1,6 @@
 import { PaginatedResponse } from 'types/Joanie';
 
-export const mockPaginatedResponse: <Data>(
+export const mockPaginatedResponse: <Data extends unknown>(
   results?: Data[],
   totalCount?: number,
   haveNextPage?: boolean,

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

@@ -208,7 +208,9 @@ describe('<DashboardItemOrder/>', () => {
     const withdrawnOnDate = new Intl.DateTimeFormat('en', DEFAULT_DATE_FORMAT).format(
       new Date(order.withdrawn_confirmation_at!),
     );
-    await screen.findByText(`Withdrawn On ${withdrawnOnDate}.`, { exact: false });
+    await screen.findByText(`You withdrew from this order on ${withdrawnOnDate}.`, {
+      exact: false,
+    });
     expect(screen.queryByRole('link', { name: 'View details' })).not.toBeInTheDocument();
     order.target_courses.forEach((course) => {
       expect(

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

@@ -53,8 +53,8 @@ const messages = defineMessages({
   },
   withdrawnOn: {
     id: 'components.DashboardItemOrder.withdrawnOn',
-    description: 'Date at which the withdrawal was confirmed',
-    defaultMessage: 'On {date}.',
+    description: 'Message displayed once a withdrawal request has been confirmed',
+    defaultMessage: 'You withdrew from this order on {date}.',
   },
 });
 
@@ -118,15 +118,13 @@ export const DashboardItemOrder = ({
                   <>
                     <Icon name={isWithdrawn ? IconTypeEnum.ROUND_CLOSE : IconTypeEnum.SCHOOL} />
                     <span>
-                      <OrderStateLearnerMessage order={order} />
-                      {isWithdrawn && order.withdrawn_confirmation_at && (
-                        <>
-                          {' '}
-                          <FormattedMessage
-                            {...messages.withdrawnOn}
-                            values={{ date: formatDate(order.withdrawn_confirmation_at) }}
-                          />
-                        </>
+                      {isWithdrawn && order.withdrawn_confirmation_at ? (
+                        <FormattedMessage
+                          {...messages.withdrawnOn}
+                          values={{ date: formatDate(order.withdrawn_confirmation_at) }}
+                        />
+                      ) : (
+                        <OrderStateLearnerMessage order={order} />
                       )}
                     </span>
                   </>

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

@@ -81,7 +81,7 @@ const messages = defineMessages({
   },
   accountLinkRefresh: {
     id: 'components.DashboardItemOrder.OrderWithdrawalModal.accountLinkRefresh',
-    defaultMessage: ' and log out. The changes will be visible the next time you log in.',
+    defaultMessage: 'and log out. The changes will be visible the next time you log in.',
     description: 'Label of the account refresh information',
   },
   submit: {
@@ -263,7 +263,7 @@ export const OrderWithdrawalModal = ({
             href={(AuthenticationApi!.account as KeycloakAccountApi).updateUrl()}
           >
             <FormattedMessage {...messages.accountLinkLabel} />
-          </a>
+          </a>{' '}
           <FormattedMessage {...messages.accountLinkRefresh} />
         </p>
       )}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "3.5.2-dev12",
+  "version": "3.5.2-dev18",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {
@@ -39,12 +39,11 @@
     "not op_mini all"
   ],
   "dependencies": {
-    "@babel/core": "7.29.0",
-    "@babel/plugin-syntax-dynamic-import": "7.8.3",
-    "@babel/plugin-transform-modules-commonjs": "7.28.6",
-    "@babel/preset-env": "7.29.0",
-    "@babel/preset-react": "7.28.5",
-    "@babel/preset-typescript": "7.28.5",
+    "@babel/core": "8.0.6",
+    "@babel/plugin-transform-modules-commonjs": "8.0.1",
+    "@babel/preset-env": "8.0.2",
+    "@babel/preset-react": "8.0.1",
+    "@babel/preset-typescript": "8.0.1",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@faker-js/faker": "10.3.0",
@@ -80,8 +79,9 @@
     "@typescript-eslint/eslint-plugin": "8.56.1",
     "@typescript-eslint/parser": "8.56.1",
     "babel-jest": "30.2.0",
-    "babel-loader": "10.0.0",
-    "babel-plugin-react-intl": "8.2.25",
+    "babel-loader": "10.1.1",
+    "babel-plugin-formatjs": "13.0.6",
+    "babel-plugin-polyfill-corejs3": "1.0.0",
     "bootstrap": ">=4.6.0 <5",
     "classnames": "2.5.1",
     "cljs-merge": "1.1.1",
@@ -149,11 +149,11 @@
     "workerDirectory": "../richie/static/richie/js"
   },
   "volta": {
-    "node": "20.19.0",
+    "node": "24.21.0",
     "yarn": "1.22.22"
   },
   "devDependencies": {
-    "@storybook/addon-webpack5-compiler-babel": "4.0.0",
+    "@storybook/addon-webpack5-compiler-swc": "4.0.3",
     "@storybook/addon-links": "10.2.13",
     "@storybook/react": "10.2.13",
     "@storybook/react-webpack5": "10.2.13",